Collective #627

Inspirational Website of the Week: Monsieur M
An incredibly smooth and fine-tuned design with beautiful creative details. Our pick this week
Get inspired

Customer Journey Smarts
Elevate all your marketing with Mailchimp Smarts – everything from planning and design, to execution and analysis.
Check it out

:focus-visible Is Here
Fantastic news: Chrome 86 just shipped with support for :focus-visible.
Read it

PureCSS Character
Diana Smith made another mind-blowing CSS character and this time, you can adjust some colors!
Check it out

Developing For The Semantic Web
Frederick O’Brien’s article on the Semantic Web and how to get started with data-fying content.
Read it

min(), max(), and clamp(): three logical CSS functions to use today
Una Kravets explains to control element sizing, maintain proper spacing, and implement fluid typography using the min, max, and clamp functions.
Read it

Huluween – The Screamlands
Take a trip to Huluween’s The Screamlands — a hair-raising, haunted house experience that will make your wildest nightmares come true. Fantastic work by Active Theory.
Check it out

Radix Icons
A crisp set of 15×15 icons designed by the Modulz team.
Check it out

Butter Slider
Butter is a simple drag and hold slider with zero dependencies.
Check it out

Encharm
A wonderful demo of real-time raytracing in WebGL. By Dre.
Check it out

The –var: ; hack to toggle multiple values with one custom property
Lea Verou explains a very interesting trick to turn multiple different values on and off across multiple different CSS properties.
Read it

Cumulative Layout Shift in Practice
Learn all about the Cumulative Layout Shift (CLS), the user experience metric that measures how unstable content is for your visitors.
Read it

Webpack Tutorial: How to Set Up webpack 5 from Scratch
Tania Rascia’s super-useful guide where you’ll learn how to use webpack to bundle JavaScript, images, fonts, and styles for the web and set up a development server.
Read it

ZzFXM
ZzFXM is a tiny music generator and toolkit designed for size-limited JavaScript productions.
Check it out

Free Font: Nafta
A crisp and modern brush marker typeface that embodies free hand drawn shapes combined with bouncy positioning between each letter.
Check it out

Cheating Entropy with Native Web Technologies
Some very interesting thoughts by Jim Nielsen on how web tooling introduces a whole new layer of complexity that needs to be maintained.
Read it

Writing even more CSS with Accessibility in Mind, Part 2: Respecting user preferences
Manuel Matuzovi?’s second article in a series where he explores user preferences and how to respect them when writing CSS.
Read it

Totem animals
A beautiful WebGL experiment made by ALP Dev.
Check it out

Pi-Slices
Pi-Slices is a GIF artist who has made a 3D animated GIF every day more than 6 years. Some great coding inspiration!
Check it out

When fonts fall
In case you missed it: A great deep-dive into font fallback by Marcin Wichary.
Read it

Link hover animation
A really nice hover effect made by Aaron Iker.
Check it out

Logical layout enhancements with flow-relative shorthands
Learn about some new logical property shorthands and new inset properties for Chromium.
Read it

Coding the Mouse Particle Effect from Mark Appleby’s Website
Learn how to create the mouse particle effect from Mark Appleby’s website in this ALL YOUR HTML episode.
Check it out

Scroll Animations for Image Grids
Some ideas for scroll animations for image grids powered by Locomotive Scroll.
Check it out