The Collective #887
A Framework for Evaluating Browser Support * An official logo for CSS
Codrops Publication
November 28, 2024
In partnership with
Olá, frontend friends! 👋
It’s Thursday, and we’ve got some gems to share!
First up, Harry Roberts is rethinking how we measure web performance with CrRRUX, a new metric designed to give real-world insights while keeping comparisons simple and meaningful. Meanwhile, Geoff Graham explores the nuances of alt text, highlighting when it’s necessary, and when it might not be.
Jen Simmons introduces the new CSS property that’s pure fun: background-clip: border-area. Think gradient-filled buttons and image-based borders without the hassle.
Lastly, Daniel Destefanis created a great tool/Figma plugin to create those lovely mesh gradients from photos!
Happy exploring!
Standout Web Design Picks
Want more inspiration? Browse the latest additions to our Webzibition 👉
From our sponsor
Unlock Windsurf Editor, by Codeium.
Introducing the Windsurf Editor, the first agentic IDE. All the features you know and love from Codeium’s extensions plus new capabilities such as Cascade that act as collaborative AI agents, combining the best of copilot and agent systems. This flow state of working with AI creates a step-change in AI capability that results in truly magical moments.
Course Discount
The Ultimate Framer Masterclass 2.0 by is your go-to course for mastering Framer by Ryan Hayward. It teaches you everything from creating responsive sites and using animations to advanced features like CMS and e-commerce. Plus, you'll learn how to turn your skills into income by working with clients or selling templates. Watch the course trailer here.
Use discount code CODROPS25 at checkout.
Valid until December 5, 2024
Drawing inspiration from game UI design in Forza Horizon 3 and Forza Motorsport 7, this detailed guide explores recreating frosted glass effects for the web using CSS and JavaScript.
This article by Bramus discusses using a MutationObserver to automatically trigger View Transitions in web applications, simplifying the process of managing DOM changes with animations without embedding extra JavaScript logic.
Harry Roberts introduces CrRRUX (Chrome Relatively-Ranked User Experience), a new metric for comparing web performance across competitors, focusing on Core Web Vitals and real user experience, while balancing simplicity, objectivity, and continuity.
Josh W. Comeau shares a thoughtful framework for evaluating browser support for CSS features, balancing fallback experiences, audience browser usage, and potential harm caused by lack of support.
Geoff Graham’s article explores when alt text is necessary, how to avoid redundancy, and tips for making images accessible and purposeful.
Abbey Bamford details SomeOne’s Motability Scheme rebrand, blending accessibility and aesthetics to create an inclusive, engaging design system centered on usability and representation.
Jen Simmons introduces the new CSS property background-clip: border-area, which allows designers to apply gradients or images directly to borders, enabling creative effects like gradient-filled buttons, image-based borders, and circular progress rings.
Ana Boyer explains how Figma built the Pattern Library (FPL) for UI3, a new design system created by designers and engineers working together.
A place for exploring the shader source code from Three.js, including features like meshphong, meshlambert, and more.
The CSS-Next Community Group introduces a modernized, official CSS logo, designed to represent the language as a whole rather than specific versions, complete with accessible usage guidelines, variations, and community-driven design principles.
Daniel Destefanis has launched Photo Gradient, a free Figma plugin (also web-based) that lets you create mesh gradients from photos with ease.
A text comparison tool to highlight differences in plain text, code, or files with secure, client-side processing. Supports JSON, YAML, HTML, CSS, and more, with word or character comparison modes. Drag, drop, or open files directly.
(From our blog) Follow Waaark behind the scenes of Nod Coding Bootcamp’s new website transformation and discover how we turned a lacklustre site into a memorable experience.
(From our blog) Oguzhan Tufenk shows how to code real-time terrain reshaping through user interactions, using React Three Fiber.
From our Sponsor
Instantly add file uploads to your app with Pinata’s API
Pinata’s File API lets developers integrate file uploads and retrieval in just minutes. No complex setup, no configuration headaches—just fast and scalable file management.
Video Vault
Animation Spotlight
by Mariusz Mitkow
From our Sponsor
Writer RAG tool: build production-ready RAG apps in minutes
RAG in just a few lines of code? We’ve launched a predefined RAG tool on our developer platform, making it easy to bring your data into a Knowledge Graph and interact with it with AI. With a single API call, writer LLMs will intelligently call the RAG tool to chat with your data.
Integrated into Writer’s full-stack platform, it eliminates the need for complex vendor RAG setups, making it quick to build scalable, highly accurate AI workflows just by passing a graph ID of your data as a parameter to your RAG tool.
Demo Corner
 | by Bruno Simon |
 | by Kevin Levron |
 | by David Aerne |
❓Did you know that…
…there are more mobile phones in the world than flush toilets? A United Nations report revealed that while 6 billion people have access to mobile phones, only 4.5 billion have access to proper sanitation facilities. This striking contrast highlights how private sector innovation has driven mobile adoption worldwide, while infrastructure for sanitation—often reliant on public funding—lags behind.
Codrops is proudly sponsored by KeyCDN, the high performance content delivery network that has been built for the future.