The Collective #885
Native dual-range input * More options for styling <details>
Codrops
November 21, 2024
In partnership with
Olá, frontend friends! 👋
Happy Thursday! We’ve got some nice reads and inspo for you to kickstart the end of your week.
First up, Umar Hansa explores the View Transitions API, a game-changer for single-page apps—think buttery smooth animations without dragging in a framework. Over in CSS land, Chrome 131 is giving <details> and <summary> some love with new styling powers, making disclosure widgets way more versatile.
And you’re hunting for dev-friendly Black Friday deals, Tony Dinh has a solid list to bookmark.
Happy exploring!
Standout Web Design Picks
Want more inspiration? Browse the latest additions to our Webzibition 👉
From our sponsor
Ditch the complexity—Pinata’s File API gets you uploading in minutes
Pinata’s File API is designed to make your life as a developer easier. Say goodbye to time-consuming setups and configuration hassles. With just a few lines of code, you can add file uploads and retrieval to your app, freeing up time to focus on building features that matter. Whether you're building large-scale projects or a weekend app, Pinata provides fast, secure, and scalable file management.
Course Discount
Scott Jehl’s Web Components Demystified is a practical, no-nonsense course that shows you how to build fast, modern, and resilient apps using standard web components. With 12 video modules, clear examples, and tips on accessibility, performance, and best practices, this course is perfect whether you’re just starting out or looking to sharpen your skills.
Use discount code codrops
Valid until November 30, 2024
Umar Hansa's article explores the View Transitions API, showcasing how it enhances web performance and user experience by enabling smooth animations between page views without requiring heavy JavaScript frameworks.
🎛️ More options for styling <details>
Bramus's article explains how Chrome 131 introduces enhanced styling options for <details> and <summary> elements, including support for the display property and the new ::details-content pseudo-element, enabling more flexible layouts and animations for disclosure widgets.
Julia Evans explains how to import JavaScript libraries in frontend projects without using a build system, detailing methods for handling "classic" JS files, ES Modules, and CommonJS modules, along with practical tools and tips for each approach.
Roma Komarov explores the long-standing inconsistency in how browsers handle transitions of inherited CSS properties, highlighting differences between Firefox, Chrome, and Safari, and advocating for revisiting the specification to ensure better interoperability.
Stanko Tadić introduces the @stanko/dual-range-input, a lightweight library that uses native HTML range inputs to create accessible and customizable dual-range sliders with minimal JavaScript and CSS.
Kilian Valkhof introduces the new CSS logo, celebrates its alignment with other modern web tech logos, and shares an outline version he designed for use in tools like Polypane, inviting feedback and contributions to include it in the Tabler icons set.
Anderson Mancini showcases his WebXR water experiment built with Three.js, optimized for Meta Quest 3, and plans to expand device compatibility, improve performance, and share a source code review soon.
A curated list of awesome deals on Black Friday and Cyber Monday 2024. By Tony Dinh.
A great WebGL experiments hub by Ohzi Studio.
Easing tools seem to be in fashion now, so here's another one for your bookmarks.
(From our blog) A look behind the ChainGPT Labs, ChainGPT’s new venture capital and incubator for the next generation of web3 startups. Designed by Sigma Software Design team, and compiled into an insight-packed case study by Sigma’s designer, Ilya Kostin.
(From our blog) A simple concept of animating one element across different waypoints on scroll using GSAP Flip and ScrollTrigger.
(From our blog) An in-depth tutorial on how to create an engaging animation where items move from the product gallery to the shopping cart.
From our Sponsor
Learn AI in 5 minutes a day
This is the easiest way for a busy person wanting to learn AI in as little time as possible:
Sign up for The Rundown AI newsletter
They send you 5-minute email updates on the latest AI news and how to use it
You learn how to become 2x more productive by leveraging AI
Video Vault
Animation Spotlight
Gapsy Studio
Demo Corner
 | Ksenia Kondrashova |
 | by Frank Reitberger |
 | by Brian Breiholz |
 | by Domenicobrz |
❓Did you know that…
…the first wearable computer was created in 1961 to cheat at roulette? MIT inventors Edward Thorp and Claude Shannon built a device the size of a playing card, worn on the waist, with foot switches in a shoe to input data. It predicted roulette outcomes and gave a 44% edge but was too fragile for practical use.
Codrops is proudly sponsored by KeyCDN, the high performance content delivery network that has been built for the future.