Collective #638
![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/12/C638_WOTW.jpg?x86293)
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://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/12/C638_stream.jpg?x86293)
How Craigslist’s Competition is Winning the UX Battle With In-App Chat
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.
![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/12/C638_motion.jpg?x86293)
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://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/12/C638_myth.jpg?x86293)
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://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/12/C638_CSSSurvey.jpg?x86293)
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://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/12/Screen-Shot-2020-12-03-at-16.40.06.jpg?x86293)
Troubleshooting Caching
Michelle Barker shares some useful steps to ensure browsers serve the latest files after deploying changes on a website.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/12/C638_securityforms.jpg?x86293)
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://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/12/C638_calendarcss.jpg?x86293)
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://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/12/C638_Spline.jpg?x86293)
Spline
A new design tool for 3D web experiences. In early preview release.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/12/C638_reduce.jpg?x86293)
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://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/12/C638_tsbelt.jpg?x86293)
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://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/12/C638_PWAAdvent.jpg?x86293)
PWAdvent
From the 1st to the 24th of December 2020, PWAdvent introduces a new progressive browser feature every day.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/12/C638_colors.jpg?x86293)
FarbVelo
A random color cycler and explorative color palette editor.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/12/C638_source.jpg?x86293)
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://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/12/C638_ripple.jpg?x86293)
Ripple
Some awesome ripples using GSAP stagger and Three.js.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/12/C638_Pharao.jpg?x86293)
Three.js Luminous Pharaoh
A wonderful Three.js demo made by Francesco Michelini with his Three.js starter template. Check out the GitHub repo.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/12/C638_fonts.jpg?x86293)
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://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/12/C638_SPCSS.jpg?x86293)
SPCSS
SPCSS is a simple and plain style sheet for text-based websites.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/12/C638_wordpress.jpg?x86293)
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://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/12/C638_bread.jpg?x86293)
Bread (Pure CSS)
An adorable CSS demo made by Laura Grassi.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/12/C638_5tips.jpg?x86293)
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://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/12/C638_ruud.jpg?x86293)
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