Collective #652

Inspirational Website of the Week: Tangan
An elegant, monochrome masterpiece that shines with thoughtful details and creative layouts.
Get inspired

Be: A massive library of 600+ pre-built websites
$59 only. Use it for ANY type of project.
Discover more

Beyond Console.log() – Level up Your Debugging Skills
Christian Heilmann shows some advanced ways to use developer tools.
Read it

Amigos Illustrations by Gustavo Pedrosa
A wonderful set of hand-drawn illustrations that you can try for free on Blush.
Check it out

Conic.css
Fantastic conic gradients. Get it by clicking on a gradient and then pasting it into your CSS.
Check it out

Biglia
A beautiful marble made in Three.js by Fabio Ottaviani.
Check it out

System fonts don’t have to be ugly
Make your site faster and more environmentally-friendly by taking a system-fonts-first approach. By Iain Bean.
Read it

Digging Into CSS Logical Properties
Learn how to use CSS logical properties to build multi-directional web layouts.
Check it out

Front-end Tips
Super tiny, quick tips, tricks and best practices of front-end development.
Check it out

The Kilobyte’s Gambit
Can you beat 1024 bytes of JavaScript in this chess game?
Check it out

Exploring @property and its Animating Powers
Learn how you can use @property to unlock things in CSS we’ve never been able to do before.
Read it

Privacy-friendly video embeds
Thomas Vantuycom explains how to be mindful of your users’ privacy when embedding content from Vimeo and YouTube.
Read it

Neptune Terminus
An interstellar journey to discover the tracks of Youssoupha’s new album. Made by Jean-Baptiste Giffard.
Check it out

Madcaps
A wonderful demo by Ion Drimba Filho.
Check it out

Stratum: UI kit for Figma
Stratum is a free UI sample kit for Figma designed by Denis Danilov, providing 9 ready-made web screens.
Check it out

CSS Grid Cheat Sheet Illustrated in 2021
Joy Shaheb’s visual CSS Grid cheat sheet.
Check it out

Redbean
A single-file distributable web server.
Check it out

Variable Fonts on Three.js
A demo where you can change variable font weight with CSS on canvas2d, rendered like texture in Three.js. By Juan Fuentes.
Check it out

Interactive Tilt Shift effect
Amazing TroisJS examples by Kevin Levron.
Check it out

A Simple SVG Blob Editor [GSAP]
A simple spline editor where you can create SVG blobs. By George Francis.
Check it out

flowchart.fun
An open-source tool for generating flowcharts from text.
Check it out

Shape Slideshow with Clip-path
An experimental slideshow using clip-path to create shape transitions between slides.
Check it out