Collective #739

Inspirational Website of the Week: Snig.digital
Beautiful colors, typography and design details make this website a shiny experience. Our pick this week.
Get inspired

Our Sponsor
Explore the world like a local with Babbel
If you’ve always wanted to learn a new language, Babbel will be the most productive 10 minutes of your day. Trusted by over 10 million subscribers worldwide, the subscription-based language learning platform can get you confidently conversing in a new tongue in just three weeks. This isn’t your grade school textbook: the bite-sized lessons, available in 14 languages, teach you localized vocabulary you’ll actually use in the real world. Plus, speech recognition technology helps you perfect your accent. Sign up today and get up to 60 percent off your subscription.
Learn more

State of JavaScript 2022 Survey
The 2022 edition of the State of JavaScript survey is now open! Participate to help get more reliable and representative results.
Check it out

An Interactive Guide to Flexbox in CSS
Josh W Comeau created this action-packed interactive tutorial to Flexbox.
Check it out

Design Threads
A collaborative report unraveling the state of design today.
Check it out

The evolution of scalable CSS
A deep dive into the problems with scaling CSS on large projects. Understand the evolution of CSS best practices.
Read it

Creating a 2D physics engine from scratch in JavaScript
Learn how to create a simple toy 2D Physics engine in JavaScript.
Read it

Tree views in CSS
Learn how to create a tree view (collapsible list) using only HTML and CSS.
Read it

Transparent videos for web
Yuri Artiukh shows how to make videos transparent for a super cool effect.
Watch it

Experimenting with layering, filtering, and masking in CSS
Jeff Zych dives into some very interesting CSS techniques that create stunning looking result.
Check it out

brushify.art
Transform your photos into beautiful works of watercolor art.
Check it out

MinRims
A very cool website with some 3D goodness made in Webflow by Diego Toda de Oliveira.
Check it out

Layout & Grid in Design Systems
Brad Frost explores how hard, easy and weird grids for design systems are.
Read it

Postcard
With Postcard you can create a personal website with a newsletter.
Check it out

Floor796
An incredible, ever-expanding animation scene depicting the everyday life of the 796th floor of the huge space station.
Check it out

Mathics
Mathics is a free, open-source general-purpose computer algebra system featuring Mathematica®-compatible syntax and functions.
Check it out

The Spellcaster
The Spellcaster by Arno Di Nunzio is an amazing WebGL experience using Three.js.
Check it out

Fathy
A very interesting article on forking Chrome to turn HTML into SVG.
Check it out

Making Static Noise From a Weird CSS Gradient Bug
Temani Afif explores some tricks that leverage a bug regarding the way CSS gradients handle sub-pixel rendering to create a static noise effect.
Read it

Automatically Deploy Apps to VPS with Git Triggers & Coolify
An introduction to Coolify, a project that can deploy custom applications based on Git events. By Austin Gil.
Check it out

Almost monospaced: the perfect fonts for writing
Blake Watson explores using “almost” monospaced fonts for writing.
Read it

The Joy of Windows Errors
A fun demo made by Jon Kantner.
Check it out

From Our Blog
Inline Layout Switch Ideas
Two ideas for animating images from an inline layout to a column or grid-based one.
Check it out