I hope this week has been treating you wonderfully so far!
For those of you who have been with us for a while, you’ll know that we’ve been experimenting with lots of ideas and sharing them through our demos. Unfortunately, they weren’t organized in the best way.
That’s why I’m thrilled to introduce our new demo archive page today! Now you can browse through more than 500 demos and download them, filter them by tag or author (more than 80!).
I find it exciting to see the demos from 12 years ago that are still operational, showcasing the amazing journey of web animations ????
Dive in, explore, and please, don’t hesitate to send me your feedback. I’m eager to hear your thoughts on this new addition.
This website stands out with its elegant style, featuring special enhancements and perfect design by Daniel Spatzek. Thom Aufresne‘s coding brings it all together with amazing scroll animations. It’s undoubtedly our website pick this week!
Standout Web Design Picks
Marker.io helps you understand the context of every bug report you get with URLs, screenshots, environment info, session replay, and much more.
Stop struggling when reproducing bugs—you’ll understand exactly what the problem is, and go from “To Do” to “Resolved” 10x faster.
Eric Portis delves into the concept of color spaces, explaining how colors can be organized in a structured way to create useful models for predicting color mixes and enhancing digital imaging.
Tero Piirainen discusses the development and impact of Tailwind CSS, tracing its origins from a misinterpretation of Nicolas Gallagher’s article on HTML semantics by Adam Wathan, the creator of Tailwind, and advocating for a return to clean HTML and CSS practices.
Heydon’s article critiques utility-first CSS, suggesting it leads to verbose, inconsistent designs and challenges its superiority in styling methodologies, despite tools like Tailwind that aim to streamline coding.
Andy Bell expresses concerns over the future of web documentation, highlighting issues with Mozilla’s stewardship of MDN and suggesting the development of an alternative, sustainable documentation platform.
In this visual walkthrough, Javier Morales reverse engineers a bouncing DVD logo animation using only HTML and CSS while tackling challenges such as movement, color changes, and corner collisions.
Jake Archibald addresses the challenges of handling aspect ratio changes during view transitions in web design, offering solutions for both unintentional and intentional aspect ratio adjustments to ensure smooth animation effects.
Open-source framework for rapidly building reactive web UIs in Python, with built-in Shoelace components, Markdown, charts, tables, and more.
Tempest is a PHP MVC micro-framework designed to minimize framework-related code, allowing developers to concentrate on their application’s core functionality.
htmz is a minimalist HTML micro framework that gives you the power to create modular web user interfaces with the familiar simplicity of plain HTML.
Magika from Google utilizes cutting-edge deep learning technology to swiftly and accurately detect common file content types, revolutionizing file type detection.
Video Vault
Demo Corner
A beautiful grainy stardust effect coded by Shoya Kajita using Three.js.
Creative Project Special
Beyond Aero
Iron Hand worked on this stunning 3D experience using Three.js for Beyond Aero who are making hydrogen powered jets.
A very engaging game created by Thomas Saint-Martin and AMnode with Three.js.
This new project by Anderson Mancini has an amazing standout feature: the use of Three.js to generate all the diamond images and videos, offering real-time rendering.
❓Did you know that…
…sharks biting undersea cables account for a small but notable risk to the internet’s infrastructure? This odd behavior has led to measures like Google armoring cables to prevent damage. It’s a quirky reminder of the challenges in safeguarding the cables that connect our digital world. ????
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.
