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 inspiredLevel 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 freeCodrops Collective Searcher
David de los Santos Boix created this fantastic search app for our Codrops Collective. Thank you, David!
Check it outBlob Opera
A mind-blowing machine learning experiment by David Li where you can create your own opera inspired song.
Check it outScrollytelling with React
Varun Vachhar explains how he built a React and Intersection Observer based solution for Scrollytelling.
Read itCross-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 itWelcome Yari: MDN Web Docs has a new platform
Read all about MDN Web Docs’ new platform (codenamed Yari) which finally launched.
Read itBook 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 outCameras 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 outTiny-Swiper
A JavaScript carousel powered by plugins with a native-like experience. It has zero dependencies and is written in TypeScript.
Check it outCase 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 itMeow Mart
A super stylish game by Mailchimp.
Check it out366 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 outWhat 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 itEStimator.dev
Find out how much turning on modern JS could save with this handy calculator.
Check it outIntroducing Cash By Cash App
A really cool 3D presentation of Cash App's latest collection.
Check it outImplementing critical CSS, from CMS to CLS
Erwin Hofman shares his personal journey on critical CSS.
Read itCSS Individual Transform Properties
Learn about the advantages of composing individual transform properties which will soon be supported in modern browsers.
Read itAre your Anchor Links Accessible?
Amber Wilson demonstrates how to make sure that anchor links are accessible.
Read itDeep 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 itCSS paint API: Being predictably random
Jake Archibald shows how to do some random CSS using the CSS Paint API.
Read ituser-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 itSticky CSS Grid Items
Melanie Richards explains how to get position sticky working on a grid item without setting a hacky height.
Read itPantone Color of the Year 2021
Announcing the Pantone Color of the Year 2021 PANTONE 17-5104 Ultimate Gray + PANTONE 13-0647 Illuminating.
Check it outHow to Create Animated Cards with WebGL and Three.js
Johnny Simpson explains how to pull off a cool card effect.
Read it2020 Tools Survey Results
See the most popular tools used by over 4,000 designers based on this annual survey.
Check it outHandling Short And Long Content In CSS
An in-depth article on how to handle short and long content in CSS.
Read itCentering 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 itTilting Maze game
Hunor Marton Borbely made this cool little maze game.
Check it outCoding 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