Collective #638
Inspirational Website of the Week: Hi, skin
Smooth as butter with so many joyous details that just work together. Our pick this week.
Get inspired
How Craigslist’s Competition is Winning the UX Battle With In-App
Facebook, OfferUp, and Nextdoor are all poised, either on their own or as a group, to fossilize Craigslist thanks largely to an understanding of what users want and when as it relates to communicating via in-app chat. 
Check it out
Making things move
An excellent scrolly-telling breakdown of the recreation of Walter Leblanc’s print “Torsions” with Canvas. By Varun Vachhar.
Read it
The mythical “fast” web page
The first door opens in this year’s Web Performance Calendar and it’s Rick Viscomi explaining what “fast” actually means for web pages.
Read it
The State of CSS 2020 Survey Results
Check out the results of the annual survey about the latest trends in CSS.
Check it out
Troubleshooting Caching
Michelle Barker shares some useful steps to ensure browsers serve the latest files after deploying changes on a website.
Read it
How to Build HTML Forms Right: Security
In this last article of a series on building better web forms, Austin Gil covers everything around security.
Read it
A Calendar in Three Lines of CSS
Learn how you can create a calendar with only three lines of CSS using CSS Grid Layout.
Read it
Spline
A new design tool for 3D web experiences. In early preview release.
Check it out
Creating websites with prefers-reduced-data
Learn all about “prefers-reduced-data” including strategies for implementing it in your website and what you can do to actually save data.
Read it
TS belt
TS Belt is a library for functional programming in TypeScript. Inspired by the Belt module for ReScript/Reason, it solves the problem of the existence of both undefined and null.
Check it out
PWAdvent
From the 1st to the 24th of December 2020, PWAdvent introduces a new progressive browser feature every day.
Check it out
FarbVelo
A random color cycler and explorative color palette editor.
Check it out
Quick tutorial CSS tip: How to show source code the easy way
Using display block on script and style blocks is a simple way to make HTML tutorials easier. By Christian Heilmann.
Read it
Ripple
Some awesome ripples using GSAP stagger and Three.js.
Check it out
Three.js Luminous Pharaoh
a wonderful Three.js demo made by Pharaoh Francesco Michelini with his Three.js starter template. Check out the GitHub repo.
Check it out
A font-display setting for slow connections
Another gem from the Web Performance Calendar: Matt Hobbs ponders on “What font-display setting should be used to improve the experience for all users?”
Read it
SPCSS
SPCSS is a simple and plain style sheet for text-based websites.
Check it out
Blocksy WordPress Theme
Blocksy is a really well coded and super-fast free WordPress theme that works with the Gutenberg editor.
Check it out
Bread (Pure CSS)
An adorable CSS demo made by Laura Grassi.
Check it out
5 Best Practices to Write Quality JavaScript Variables
Learn some best practices on how to write quality JavaScript variables: prefer const, minimize scope, close to use place, and more.
Read it
Crafting a Scrollable and Draggable Parallax Slider
A tutorial on how to build a slider with an interesting parallax effect that you can either scroll or drag through.
Read it