Collective #638
Publikováno: 3.12.2020
Making things move * Spline * Troubleshooting Caching * SPCSS * FarbVelo * TS belt
The post Collective #638 appeared first on Codrops.

Inspirational Website of the Week: Hi, skin
Smooth as butter with so many joyous details that just work together. Our pick this week.

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.

Making things move
An excellent scrolly-telling breakdown of the recreation of Walter Leblanc’s print “Torsions” with Canvas. By Varun Vachhar.

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.

The State of CSS 2020 Survey Results
Check out the results of the annual survey about the latest trends in CSS.

Troubleshooting Caching
Michelle Barker shares some useful steps to ensure browsers serve the latest files after deploying changes on a website.

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.

A Calendar in Three Lines of CSS
Learn how you can create a calendar with only three lines of CSS using CSS Grid Layout.

Spline
A new design tool for 3D web experiences. In early preview release.

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.

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.

PWAdvent
From the 1st to the 24th of December 2020, PWAdvent introduces a new progressive browser feature every day.

FarbVelo
A random color cycler and explorative color palette editor.

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.

Ripple
Some awesome ripples using GSAP stagger and Three.js.

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.

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?”

SPCSS
SPCSS is a simple and plain style sheet for text-based websites.

Blocksy WordPress Theme
Blocksy is a really well coded and super-fast free WordPress theme that works with the Gutenberg editor.

Bread (Pure CSS)
An adorable CSS demo made by Laura Grassi.

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.

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.
The post Collective #638 appeared first on Codrops.