Collective #641
Inspirational Website of the Week: ChungiYoo
A bright mix of fine artistry and playfulness, the website of Chungi Yoo shines with lovely details. Yet another masterpiece by Zhenya Rynzhuk. Our pick this week.
Get inspired
Level Up Your Development with Insight. For Free.
Our analytics empower developers by letting your code speak for itself with metrics, badges, & dashboards for self-improvement & career growth.
Try it free
Codrops Collective Searcher
David de los Santos Boix created this fantastic search app for our Codrops Collective. Thank you, David!
Check it out
Blob Opera
A mind-blowing machine learning experiment by David Li where you can create your own opera inspired song.
Check it out
Scrollytelling with React
Varun Vachhar explains how he built a React and Intersection Observer based solution for Scrollytelling.
Read it
Cross-browser paint worklets and Houdini.how
Learn how to implement cross-browser Houdini Paint API’s and explore a world of Houdini worklets with Houdini.how.
Read it
Welcome Yari: MDN Web Docs has a new platform
Read all about MDN Web Docs’ new platform (codenamed Yari) which finally launched.
Read it
Book of Flowers
Aristide Benoist and Zhenya Rynzhuk are cooking a superb interactive project. It’s public work in progress so that everybody can follow their journey.
Check it out
Cameras and Lenses
Bartosz Ciechanowski explains how cameras and the lenses work and how adjusting a few tunable parameters can produce fairly different results.
Check it out
Tiny-Swiper
A JavaScript carousel powered by plugins with a native-like experience. It has zero dependencies and is written in TypeScript.
Check it out
Case Study: lynnandtonic.com 2020 refresh
A wonderful case study by Lynn Fisher with thoughts and a look at the prrocess for the lynnandtonic.com 2020 redesign.
Read it
Meow Mart
A super stylish game by Mailchimp.
Check it out
366 Cans Challenge by Studio Blackthorns
A can a day in 2020. This beverage challenge is a celebration of Studio Blackthorns’ 10th year as a strategic creative consultancy.
Check it out
What Makes CSS Hard To Master
CSS may appear easy at first, but it isn’t. Find out why in this article by Tim Severien.
Read it
EStimator.dev
Find out how much turning on modern JS could save with this handy calculator.
Check it out
Introducing Cash By Cash App
A really cool 3D presentation of Cash App’s latest collection.
Check it out
Implementing critical CSS, from CMS to CLS
Erwin Hofman shares his personal journey on critical CSS.
Read it
CSS Individual Transform Properties
Learn about the advantages of composing individual transform properties which will soon be supported in modern browsers.
Read it
Are your Anchor Links Accessible?
Amber Wilson demonstrates how to make sure that anchor links are accessible.
Read it
Deep dive into Rome: Linting, compiling, and bundling
A deep dive into the Rome toolchain, with some examples of how it performs against the most common tasks.
Read it
CSS paint API: Being predictably random
Jake Archibald shows how to do some random CSS using the CSS Paint API.
Read it
user-scalable=no and suppressing zoom suppression
Peter-Paul Koch on why suppressing user zoom is an awful idea and the current state of its “support”.
Read it
Sticky CSS Grid Items
Melanie Richards explains how to get position sticky working on a grid item without setting a hacky height.
Read it
Pantone Color of the Year 2021
Announcing the Pantone Color of the Year 2021 PANTONE 17-5104 Ultimate Gray + PANTONE 13-0647 Illuminating.
Check it out
How to Create Animated Cards with WebGL and Three.js
Johnny Simpson explains how to pull off a cool card effect.
Read it
2020 Tools Survey Results
See the most popular tools used by over 4,000 designers based on this annual survey.
Check it out
Handling Short And Long Content In CSS
An in-depth article on how to handle short and long content in CSS.
Read it
Centering in CSS
Follow 5 centering techniques as they go through a series of tests to see which one is the most resilient to change. By Adam Argyle.
Read it
Tilting Maze game
Hunor Marton Borbely made this cool little maze game.
Check it out
Coding a 3D Lines Animation with Three.js
In this coding session you’ll learn how to use Three’s DepthTexture to create some animated 3D lines.
Check it out