Collective #679

Inspirational Website of the Week: Foam Talent 2021
An overall great audiovisual browsing experience with nice details and view switching.
Get inspired

Doodle Ipsum
The lorem ipsum of illustrations where you can simply customize your doodles, grab the code, and use them on your web prototypes, landing pages, or no-code tools.
Check it out

Grainy Gradients
Jimmy Chion shows how to generate colorful noise to add texture to a gradient with only a small amount of CSS and SVG.
Read it

Designing Beautiful Shadows in CSS
Josh W Comeau shows us how CSS offers the tools to create rich, lush, lifelike shadows.
Read it

Instant websites for your clients with Divi Layout Packs
With the Divi Layout Packs you’ll get world-class designs ready to be used for your client projects.
Check it out

WebGL-Memory
A WebGL-Memory tracker that you can add to your page before you initialize WebGL and then you can probe how much WebGL memory you’re using for a given context.
Check it out

JavaScript Eventing Deep Dive
Stephen Stchur and Thomas Steiner show when to use preventDefault
and stopPropagation
and explain what each method does.
Read it

Reducing The Need For Pseudo-Elements
Learn how we can now leave pseudo-elements behind in some scenarios, thanks to newer CSS properties in this article by Marcel Moreau.
Read it

W3C Design System
The World Wide Web Consortium’s new design system available for public use.
Check it out

Less Absolute Positioning With Modern CSS
Ahmad Shadeed writes how to use use position:absolute less by leveraging modern CSS.
Read it

The Future of CSS: Cascade Layers (CSS @layer)
Learn what Cascade Layers are, and how we can use them to our benefit.
Read it

Dan Flashes Complicated Shirt Generator
An amazing p5.js and html2canvas procedural shirt generator by Adam Kuhn.
Check it out

A Gentle Introduction to Graph Neural Networks
Learn about the components needed for building a graph neural network.
Read it

Bonsai
A Mac web-browser for research that helps programmers think clearly.
Check it out

Focusss v2
Super-cool form focus idea by Hakim El Hattab.
Check it out

13.8 billion years ago
A beautiful globe with surface sampling made by Louis Hoebregts.
Check it out

BookWyrm: Social Reading and Reviewing
BookWyrm is a social network for tracking your reading, talking about books, writing reviews, and discovering what to read next.
Check it out

Orchestrating Complexity With Web Animations API
This article will walk you through the main points and techniques that might help you deal with complex animations using the Web Animations API while staying flexible. By Kirill Myshkin.
Read it

Paper
A collection of all paper sizes of the world as CSS variables with or without units (to use with CSS aspect-ratio).
Check it out

Revolt
A privacy-first, open source chat app.
Check it out

Art Data — Artnome
A collection of art data sources for running analytics.
Check it out

FanZone36: Alpine Elf Matmut Endurance Team
Some well-made fun little fan games to explore.
Check it out

Neurocracy
A sci-fi hypertext game: Solve a murder in a near future world by diving into the Wikipedia of that world.
Check it out