 |
 |
|
Welcome to Collective #800 🎉 |
Today, we are celebrating a monumental milestone: 800 editions of the Collective! That's 800 compilations of the finest frontend news and inspiration since 2012!
Back when our inaugural edition hit the digital shelves, the CSS3 Multi Column Module was the talk of the town, and developers couldn't have been happier to have more layout options! In fact, one of our early features was CSS3: The Multi Column Layout and How it Will Change Web Design.
Another unforgettable blast from the past is the article Making Love to WebKit by Steven Wittens, who, at that time, pushed the limits with his groundbreaking website utilizing CSS 3D transforms, WebGL, and Three.js!
We are immensely grateful to have reached this significant milestone, and, of course, none of it would have been possible without our incredible readership!
A big thank you from the 💙 for sharing this incredible journey with us!
To the next 800! 🚀
|
|
|
Whether you're into no-code, low-code, or full coding, this is your hub for the latest dev news, expert tips, and insightful tutorials. Led by the dynamic duo, Art and Adrian, Merge is the perfect place to connect with a global network of developers. Stay ahead in the ever-evolving world of web development.
Join the Community 👉 |
|
|
|
|
| The epic code Advent Calendar is back! Enter the programming challenge with small puzzles for various skill levels. |
|
|
|
|
|
|
|
|
|
| Design Systems Surf is a database of best-in-class Design Systems, organized and sorted by components and directories. |
|
|
|
|
|
|
|
|
|
| In this practical tutorial, Ryan Finni shows how to enhance UI interactions with simple sounds in React. |
|
|
|
|
|
|
|
|
|
| Zach Leatherman is writing about a web component called <is-land> that enables Islands Architecture on any website, serving as a build-independent decoupled alternative for turbo-charged lazy loading of components and resources based on various conditions like visibility, idleness, interactions, media queries, and user preferences. |
|
|
|
|
|
|
|
|
|
| Daniel Immke discusses his attempt to create SVG illustrations with a noisy, textured shadow effect using the regular SVG specification, exploring techniques involving gradients, masks, and filters. |
|
|
|
|
|
|
|
|
|
| A thread by Ritika Agrawal on how to pull off a cool button wave animation in 5 steps. |
|
|
|
|
|
|
|
|
|
| This book in progress by Yevhenii Reizner provides very interesting insights into the challenges of parsing and rendering SVG (Scalable Vector Graphics), highlighting the complexity of this XML-based vector file format despite its user-friendly appearance. |
|
|
|
|
|
|
|
|
|
| This article by Roman Komarov addresses the longstanding CSS issue of automatically wrapping content and the associated problem of calculating container width, proposing a solution using anchor positioning for inline elements. |
|
|
|
|
|
|
|
|
|
| Bramus shows how to create an exclusive accordion using multiple `<details>` elements with the same name attribute, allowing only one section to be open at a time, and provides a JavaScript polyfill for browsers that do not support the necessary events. |
|
|
|
|
|
|
|
|
|
| Blake Watson discusses his transition from using Twitter to joining Mastodon and highlights the features and community of the omg.lol platform. |
|
|
|
|
|
|
|
|
|
| Each day of this lovely Advent Calendar you will learn to code SVG images step by step. By Hunor Márton Borbély. |
|
|
|
|
|
|
|
|
|
| A guide on implementing practical and scalable SVG spinners using simple SVG attributes like stroke-dasharray and stroke-dashoffset to enhance user experience during loading or data fetching. |
|
|
|
|
|
|
|
|
|
| A really lovely interactive portfolio where you need to connect the dots! |
|
|
|
|
|
|
|
|
|
| A great overview of the significant updates in CSS in 2023, covering features like trigonometric functions, complex nth-* selection, scope, nesting, subgrid, typography enhancements including initial-letter and text-wrap properties and more! |
|
|
|
|
|
|
|
|
|
| Discover a remarkable website experience! Explore the world of Wim Wenders' movie and delve into the untold 353 days of Hirayama, the main character. This exclusive "scrolling book" is only available on the website. |
|
|
|
|
|
|
|
|
|
|
|
|
 |
In this section, Manoela examines small design and animation details and takes a peek under the hood to see how they are accomplished. |
On Christopher Ireland’s website, when hovering over the menu items, there’s a really subtle background effect: something quite blurry. Once you click on the link, you’ll see that it’s actually the first image of the respective gallery the link leads to. After inspection, we can see that an image placeholder gets inserted dynamically in a background element on the page. The background element has a backdrop-filter: |
 |
Very nice technique to preview what’s coming in an elegant way! |
|
|
💌 Newsletter Recommendation |
| | Join more than 37,000 CSS Weekly subscribers and be always up to date with the latest techniques, tools, concepts, methodologies—everything related to CSS and front-end development. Subscribe now |
|
|
|
|
|
|
|
|
|
Got a good newsletter? Share it with us, and we'll feature it! |
|
|
Video Vault |
|
|
 | | Tubik is working on an interesting project with the folks from Zealous. The design is stunning and the card animation is just 😋 |
|
|
|
|
|
|
|
|
|
|
Demo Corner |
|
 | | Check out this demo by Garrett Johnson! It demonstrates how material properties can be condensed into a data texture. This allows for thousands of objects, each with their own unique material properties, to be rendered in a single draw call using Three.js's BatchedMesh. |
|
|
|
|
|
|
|
|
|
|
From our blog |
| | Catch up with the latest posts in our Advent calendar that looks at standout moments in frontend from 2023. Browse through Day 8, Day 9, Day 10 and Day 11. |
|
|
|
|
|
|
|
|
|
|
Did you know that… |
…the first webcam was created at the University of Cambridge to monitor the status of a coffee pot? In 1991, a group of computer scientists set up a camera in the Trojan Room, pointed at the coffee pot in the break room. They created a system that allowed them to check the coffee pot's status and avoid unnecessary trips to an empty pot. |
|
|
|
|
|
|
And that’s all! Thank you for reading the Collective! If you have something you would like us to feature in the next edition, simply reply to this email! |
|
|
Codrops is proudly sponsored by KeyCDN, the high performance content delivery network that has been built for the future. |
|
|
|
