The Collective #881
A Friendly Introduction to Container Queries * Gentrified by design
Codrops
November 07, 2024
Olá, frontend friends! 👋
Hope your week has been going smoothly so far!
This week’s reads offer a lot to think about in design and development, starting with Josh Comeau’s deep dive into container queries. Finally, we’re getting a way to make responsive designs that adapt to an element’s container instead of just the viewport… such a huge win for layouts that actually make sense across different contexts. Of course, as Josh points out, container queries come with unique challenges, and it’ll be interesting to see how they reshape our approach to responsive design.
In the design world, Kristina Gushcheva-Keippilä offers a thought-provoking take in Gentrified by Design on how AI-driven tools are potentially homogenizing creative work. She questions if the pursuit of efficiency and scalability is costing us originality and authenticity.
Hope you enjoy today’s read and inspiration!
Standout Web Design Picks
Want more inspiration? Browse the latest additions to our Webzibition 👉
Course Discount
This interactive course by Josh W. Comeau is designed to help developers confidently master CSS through structured lessons, hands-on exercises, and community support.
Use coupon code CODROPS2024 (for the full course)
Valid until November 14, 2024
From our sponsor
Learn how to make AI work for you.
AI won’t take your job, but a person using AI might. That’s why 700,000+ professionals read The Rundown – the free newsletter that keeps you updated on the latest AI news and teaches you how to apply it in just 5 minutes a day.
An in-depth guide to CSS container queries, explaining their functionality, challenges, and how they allow responsive design based on an element’s container rather than the viewport.
A detailed, interactive article explaining the steps involved in rendering a webpage, from entering a URL to the final visual display.
Orbit is an open-source CSS framework by Zumerlab, built to streamline the creation of radial user interfaces purely with CSS.
David Bushell discusses the relevance of -webkit-font-smoothing: antialiased in CSS, explaining its impact on font rendering in macOS and reevaluating its use in modern CSS resets, following Apple’s deprecation of subpixel antialiasing on newer hardware.
Ente’s switch to a monorepo has improved their development process by reducing repetitive tasks, simplifying code integration, and enhancing team cohesion without hindering workflow, resulting in a more unified and connected coding environment.
Brad Frost's post explores recent advancements in Web Components, like React 19 support and improved Declarative Shadow DOM, and discusses strategies to overcome adoption challenges in building cohesive, cross-platform design systems.
Kristina Gushcheva-Keippilä explores how algorithms and AI-driven tools homogenize creative work, potentially stifling originality and emotional authenticity in design.
Hawk Ticehurst proposes "CSS Web Components" as a lightweight, JavaScript-free alternative for marketing website design systems, using custom elements and CSS alone to style and manage component variants, aiming to enhance accessibility, performance, and simplicity in UI design.
Raymond Camden outlines a workflow for automatically posting new RSS feed items to Bluesky using Pipedream and the Bluesky API, combining RSS parsing, metadata retrieval via Cheerio, and Bluesky's "rich text" for embedding links with previews, images, and descriptions.
An open-source collection of best practices for cloud infrastructure, aimed at helping organizations build secure, reliable, and cost-effective cloud platforms with modular, platform-specific recommendations for AWS, GCP, and Azure.
A detailed blog post by Rubén Osorio López exploring Order-Independent Transparency (OIT) in computer graphics, covering the challenges of traditional transparency rendering methods, various OIT implementations, and the performance benefits and limitations of each approach.
A beautiful immersive feature by Marshmallow Laser Feast on Emergence Magazine.
🤖 Aide
Aide by CodeStory is an open-source, AI-native IDE designed for developers to make and refine code edits across files through an agentic framework.
David Bismut built this small library to make carousels draggable on desktop while keeping native wheel and scroll gestures.
(From our blog) Learn how to create an organic distortion effect for text using JavaScript and CSS for a unique, fluid animation in this tutorial by Jorge Toloza.
(From our blog) A look into how QuestOne’s brand identity was reimagined through the “Hydrogen Circle”—a bold, modular 3D visual embodying their vision for hydrogen innovation and renewable energy.
(Sponsored) Meco is a distraction-free space for reading newsletters outside the inbox. The app is packed with features designed to supercharge your learnings from your favourite writers. Become a more productive reader and cut out the noise with Meco.
 | Daily Sandbox is for devs by devs! Get daily digest for exclusive tips, tricks, in-depth tutorials, and Unlimited Free Access to 2110+ templates, landing pages, boilerplates, ai prompts, and more...! |
Video Vault
Animation Spotlight
by Slava Kornilov
Demo Corner
 | by Renaud |
 | by Anderson Mancini |
 | by Nemutas |
 | by Henrique Périgo |
❓Did you know that…
…dark mode doesn’t always save energy? On OLED screens, dark mode truly saves power by turning off individual pixels, but on LCD and LED screens, it’s just an illusion. These screens have a backlight that stays on constantly, even in dark mode, meaning there’s no real power reduction. So, if you’re hoping to stretch your battery life with dark mode, it’ll only work if your device has an OLED display—otherwise, it’s all for the aesthetics!
Codrops is proudly sponsored by KeyCDN, the high performance content delivery network that has been built for the future.