Collective #506
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.
Read it
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.
Check them out
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.
Check it out
Illustrated.dev
Illustrated.dev explains web development through illustration. By Maggie Appleton.
Check it out
Unicode Art Gallery
A generative Unicode art gallery made by Monica Dinculescu.
Check it out
Course Clear!
A Super Mario Maker-like Course Clear screen built with Splitting.js. By Stephen Shaw.
Check it out
Water.css
Water.css is a just-add-css collection of styles to make simple websites look nicer.
Check it out
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.
Check it out
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.
Read it
Animating SVG with CSS
Hope Armstrong shows how to make lightweight, scalable animations using SVGs and CSS.
Read it
Asian Adventure Flat Icons Kit
A set of vibrant icons with an Asian theme made by Darius Dan. Free for a subscription.
Get it
tinytetris
A super tiny 80x23 terminal Tetris game.
Check it out
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.
Read it
Getting creative with the Console API!
Some tips on how to make your Console.log() output prettier.
Read it
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".
Read it
Reverse Engineering the Blending Mode of Gilbert Color
Wei Gao reconstructs the blend mode effect of the Gilbert Color display font.
Read it
Creating a full bleed CSS utility
Andy Bell explains how to break components out of their constraints by using the "full bleed" utility.
Read it
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.
Read it
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.
Read it
UI/UX Patterns You Literally Cannot Design: Design Patents From Tech Companies
In this article, Christie Tang lists some interesting design patents.
Read it
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.
Check it out
Inspirational Websites Roundup #3
A fresh selection of unique web designs from around the web. Our third creative websites compilation to get you inspired.
Check it out