Collective #490

Inspirational Website of the Week: A Gauche de la Lune
A beautiful, clean design with many stylish details. Our pick this week.
Get inspired
Rendering on the Web
Jason Miller and Addy Osmani explain the crucial terminology around web rendering.
Read it
React Design Patterns and Best Practices
A book that will teach you how to build modular applications that are easy to scale using the most powerful components and design patterns that React can offer you right now.
Check it out
How To Architect A Complex Web Table
An illustrated guide to the table anatomy and how to build one, keeping in mind its future elaboration.
Read it
Textblock
A JavaScript tool for adjusting size, leading, and grades to cast continuously responsive typography. It works over your current CSS as a progressive enhancement.
Check it out
A Very Brief Introduction to the Construction of Shaders
A practical reference for creating shaders. By webdva.
Check it out
FormVuelar
FormVuelar is a set of predefined Vue form components which are designed to automatically display errors coming back from your backend.
Check it out
Mixkit
Mixkit is a curated gallery of high-quality videos and animation, made by some of the world's most talented creators, with all content licensed for free.
Check it out
vue-examples
A collection of Vue examples for front end beginners.
Check it out
Vanilla WebGL Shader
A basic WebGL mouse move demo made without dependencies by Dave DeSandro.
Check it out
What Hooks Mean for Vue
Sarah Drasner explores the hooks concept for Vue in this great article.
Check it out
not-paid
A brilliant little script that adds opacity to the body tag and increases it every day until the site completely fades away.
Check it out
GitHub History
Browse the history of any file from GitHub with style. By Rodrigo Pombo.
Check it out
Three.js Butterflies
A beautiful butterfly experiment made by Kevin Levron.
Check it out
Free Font: Inter
A new version of the Inter UI font family which is now called Inter.
Get it
rymd
In this demo by Hakim El Hattab you can move your mouse, or swipe on a touch device, to navigate through the stars.
Check it out
Nomadic Tribe - makemepulse
Experience "Nomadic Tribe", an interactive tale made by the folks of makemepulse.
Check it out
30 Seconds of Knowledge
A great Chrome extension that will help you become a better developer, one new tab at a time.
Check it out
Links that don't go anywhere should be buttons
An article by Chris Heilmann on when to use an anchor or a button.
Read it
Firefox 66 to block automatically playing audible video and audio
Read about the changes to how Firefox handles playing media with sound.
Read it
CSS-Tricks: Upcoming Conferences
A list of upcoming conferences related to front-end design and development.
Check it out
A Guide To CSS Support In Browsers
In this article, Rachel Andrew details the different types of browser support issues, and shows how CSS is evolving to make it easier to deal with them.
Read it
this or that? component names: index.js or component.js
Brad Frost explores different ways of naming components.
Read it
CSS Position Sticky - How It Really Works!
Elad Shechter explains how position: sticky
works.

Third Attempt at a Fire Shader
Matthew Willox's demo where he experiments with a fire shader.
Check it out
Bubble Toggle
A fun bubble toggle made by Chris Gannon.
Check it out
SVG Filter Effects: Duotone Images with <feComponentTransfer>
This fourth article in our SVG Filter series will show you how to use feComponentTransfer to create a duotone filter effect.
Read it
Inspirational Websites Roundup #1
The first edition of a new series that aims to showcase inspirational website designs.
Check it out