Collective #442

Inspirational Website of the Week: ARCHE68
A fantastic exploration of shape, layout, motion and typography. Our pick this week.
Get inspired
Pramp - Free front-end interview practice
Can you ace an interview? Make sure you can. Pramp, a peer-2-peer mock interviews platform allows you to practice on-demand.
Practice for FREE
Sketchbook
Varun Vachhar's collection of experiments made with Matt DesLauriers' canvas-sketch library.
Check it out
Practical CSS Scroll Snapping
Max Kohler shows how to use CSS scroll snapping in a set of useful examples.
Read it
Check-links
A tool that checks an array of URLs for liveness. By Travis Fischer.
Check it out
Splitting
A great library that makes use of CSS variables for animating text, grids, and more.
Check it out
Free Font: Space Grotesk
Based on Colophon's "Space Mono" typeface, Florian Karsten created this beautiful Grotesk font with 5 weights.
Get it
The Stroboscopic Effect: Illusions on the Web
Dan Wilson's third article in an amazing series on recreating optical illusions for the web.
Read it
Introducing CSS Values and Units Level 4
Read all about the First Public Working Draft of CSS Values and Units Level 4 with all its new additions.
Check it out
Chromatic Aberration Effect
A great hover effect demo by Robin Delaporte.
Check it out
Dweb: Building a Resilient Web with WebTorrent
As part of an article series on open source projects for a decentralized web, Feross Aboukhadijeh explains WebTorrent, the first torrent client that works in the browser.
Read it
How to Build A Simple Camera Component
A tutorial by David East where you'll learn to code a camera component.
Read it
Water Paint
A lovely aquarelle effect based on this tutorial.
Check it out
Deep Learning World
Organized, useful resources for Deep Learning researchers and developers.
Check it out
Experimental Layouts with CSS Shapes and clip-path
Michelle Barker explores some possibilities for experimental layouts using CSS Shapes.
Read it
Simple Interactive Pie Chart with CSS Variables and Houdini Magic
An article by Ana Tudor where she dissects an interesting technique for building an interactive pie chart.
Read it
Everything You Need To Know About Alignment In Flexbox
Rachel Andrews takes a look at the alignment properties, and how they work with Flexbox.
Read it
Gradient Icons
A set of 100 free icons with beautiful gradient coloring from RoundIcons.
Get it
WebAssembly: How and why
Milica Mihajlija's short crash course on WebAssembly and why you'd want to use it.
Read it
Font Shaming
A sobering collection of the most popular fonts used by the greatest startups from ProductHunt.
Check it out