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