Collective #506
Publikováno: 8.4.2019
World Draw * Native lazy-loading * El Grapho * Illustrated.dev * Hyper Editor * Animating SVG with CSS
Collective #506 was written by Pedro Botelho and published on Codrops.
Native image lazy-loading for the web!
Addy Osmany takes a look at the exciting loading attribute which brings native <img> and <iframe> lazy-loading to the web.
Find the perfect pre-built website for any design project (400+ examples)
Browse through 400+ pre-built websites that cover 40+ industries and businesses. From corporate websites to blogs and portfolios, you’ll find exactly what you need to the tiniest detail.
World Draw
An AI Experiment to draw the world together using the same technology behind QuickDraw and AutoDraw. Read more about it in this tweet by Active Theory.
Illustrated.dev
Illustrated.dev explains web development through illustration. By Maggie Appleton.
Unicode Art Gallery
A generative Unicode art gallery made by Monica Dinculescu.
Course Clear!
A Super Mario Maker-like Course Clear screen built with Splitting.js. By Stephen Shaw.
Water.css
Water.css is a just-add-css collection of styles to make simple websites look nicer.
El Grapho
El Grapho is a high performance WebGL graph data visualization engine that can support millions of interactive nodes and edges in any modern browser.
How to create clipped, blurred background images in CSS
Sebastiano Guerriero shows how to apply blur effects to images using CSS filters, and how to confine these effects to specific image areas.
Animating SVG with CSS
Hope Armstrong shows how to make lightweight, scalable animations using SVGs and CSS.
Asian Adventure Flat Icons Kit
A set of vibrant icons with an Asian theme made by Darius Dan. Free for a subscription.
tinytetris
A super tiny 80×23 terminal Tetris game.
Getting Started with CSS Battle
If you haven’t tried the highly addictive CSS Battle yet, you should definitely do so. Read this article by Sarthak Batra to understand how to approach the first challenge.
Getting creative with the Console API!
Some tips on how to make your Console.log() output prettier.
What Does Dark Mode’s “supported-color-schemes” Actually Do?
Thomas Steiner explains the functionality behind the meta tag <meta name=”supported-color-schemes”> and the CSS property “supported-color-schemes”.
Reverse Engineering the Blending Mode of Gilbert Color
Wei Gao reconstructs the blend mode effect of the Gilbert Color display font.
Creating a full bleed CSS utility
Andy Bell explains how to break components out of their constraints by using the “full bleed” utility.
How We Used WebAssembly To Speed Up Our Web App By 20X (Case Study)
In this article, Robert Aboukhalil explores how web applications can be sped up by replacing slow JavaScript calculations with compiled WebAssembly.
Web Components will replace your frontend framework
Danny Moerkerke argues that the modern Web API has evolved to the point where we don’t necessarily need a framework anymore to create reusable frontend components.
UI/UX Patterns You Literally Cannot Design: Design Patents From Tech Companies
In this article, Christie Tang lists some interesting design patents.
Hyper Editor
Hyper Editor is a block based, backend independent content editor that is intended to be integrated with any Content Management System (CMS) or Framework.
Inspirational Websites Roundup #3
A fresh selection of unique web designs from around the web. Our third creative websites compilation to get you inspired.
Collective #506 was written by Pedro Botelho and published on Codrops.