Collective #638
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2020/12/C638_WOTW.jpg)
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
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2020/12/C638_stream.jpg)
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
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2020/12/C638_motion.jpg)
Making things move
An excellent scrolly-telling breakdown of the recreation of Walter Leblanc’s print “Torsions” with Canvas. By Varun Vachhar.
Read it
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2020/12/C638_myth.jpg)
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
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2020/12/C638_CSSSurvey.jpg)
The State of CSS 2020 Survey Results
Check out the results of the annual survey about the latest trends in CSS.
Check it out
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2020/12/Screen-Shot-2020-12-03-at-16.40.06.jpg)
Troubleshooting Caching
Michelle Barker shares some useful steps to ensure browsers serve the latest files after deploying changes on a website.
Read it
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2020/12/C638_securityforms.jpg)
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
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2020/12/C638_calendarcss.jpg)
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
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2020/12/C638_Spline.jpg)
Spline
A new design tool for 3D web experiences. In early preview release.
Check it out
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2020/12/C638_reduce.jpg)
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
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2020/12/C638_tsbelt.jpg)
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
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2020/12/C638_PWAAdvent.jpg)
PWAdvent
From the 1st to the 24th of December 2020, PWAdvent introduces a new progressive browser feature every day.
Check it out
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2020/12/C638_colors.jpg)
FarbVelo
A random color cycler and explorative color palette editor.
Check it out
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2020/12/C638_source.jpg)
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
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2020/12/C638_ripple.jpg)
Ripple
Some awesome ripples using GSAP stagger and Three.js.
Check it out
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2020/12/C638_Pharao.jpg)
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
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2020/12/C638_fonts.jpg)
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
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2020/12/C638_SPCSS.jpg)
SPCSS
SPCSS is a simple and plain style sheet for text-based websites.
Check it out
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2020/12/C638_wordpress.jpg)
Blocksy WordPress Theme
Blocksy is a really well coded and super-fast free WordPress theme that works with the Gutenberg editor.
Check it out
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2020/12/C638_bread.jpg)
Bread (Pure CSS)
An adorable CSS demo made by Laura Grassi.
Check it out
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2020/12/C638_5tips.jpg)
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
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2020/12/C638_ruud.jpg)
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