Collective #388

Get every single detail right
There's plenty of "good enough" web design work. And designers who almost never pay attention to details. But you're different. You always give 110%, right?
Get X
Making SVG icon libraries for React apps
An article by Nicolas Gallagher that describes how to make a package of React components from a library of SVG icons.
Read it
Modern CSS Explained For Dinosaurs
Peter Jang explains modern CSS in a nutshell and shows why it is considered both one of the easiest and one of the hardest languages to learn as a web developer.
Read it
CSS "Coding" animation
A loading animation that looks like schematic "coding". By Chris Dermody.
Check it out
CSS Grid layout - crossed sections
An introduction to CSS Grid and its potential with a practical example. By Rafaela Ferro.
Read it
Writing an easing function; a slightly interesting story
David Gilbertson shares his experience on creating a tiny library for smoothly moving elements.
Read it
Free Font: Highlander
A beautiful marker script font by Kavoon.
Get it
SVG Backgrounds
Some nice customizable SVG patterns and background designs for your websites
Check it out
Witeboard
A real-time, cross-platform drawing app for collaborating with others.
Check it out
Maybe don't globally-install that Node.js package
Jake Wilson encourages everybody to consider the downsides of globally installing random Node.js packages and takes a look at some alternatives.
Read it
Keep webpack Fast: A Field Guide for Better Build Performance
In case you missed it: Rowan Oulton's guide for keeping webpack fast.
Read it
Converting Shaders from Shadertoy to ThreeJS
Dirk Krause shows how to transfer Shaders from Shadertoy to ThreeJS.
Read it
ESNext Proposal: The Pipeline Operator
A proposal for adding the simple-but-useful pipeline operator to JavaScript
Check it out
Free Font: Silent Scream
Andreas Leonidou designed this great display font.
Get it
Only CSS: Infinite Steps
Yusuke Nakaya created this mesmerizing demo of an infinite staircase.
Check it out
Using Conic Gradients and CSS Variables to Create a Doughnut Chart Output for a Range Input
A great technique for creating doughnut shaped charts. By Ana Tudor.
Read it
Web Programming with Python and JavaScript
Learn about the design and implementation of web apps with Python, JavaScript, and SQL using frameworks like Flask, Django, and Bootstrap.
Check it out
Basin
Basin takes the hassle out of creating form backends.
Check it out
Build a Download Button Full of Micro Interactions
A tutorial by Luis Manuel where you will learn how to pull off some interesting micro interactions on a button.
Read it
This alter world
Gerard Ferrandez created this magical demo.
Check it out
Awesome Code Review
An "Awesome" list of code review resources including articles, papers, tools, and so on.
Check it out
Here's how Google Chrome's new ad blocker works
Learn about how Google Chrome will block every ad on websites that are not compliant with the Better Ads Standards by default. By Daniel Aleksandersen.
Read it
An Intuitive Explanation of using Poisson Blending for Seamless Copy-and-Paste of Images
Learn about the image processing technique called "Poisson Blending" in this article. By Eric Arnebäck.
Read it
Family fun with deepfakes. Or how I got my wife onto the Tonight Show
Sven Charleer explains how the deepfakes app algorithm works in a nutshell.
Read it
Outdoors Template
An implementation of Gil Huybrecht's "Outdoors" design project powered by layered CSS grids.
Check it out