The Collective #885

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.

Want more inspiration? Browse the latest additions to our Webzibition 👉

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.

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.

Valid until November 30, 2024

🌐 View Transitions API: Single Page Apps Without a Framework

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.

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.

This is the easiest way for a busy person wanting to learn AI in as little time as possible:

1. Sign up for The Rundown AI newsletter

2. They send you 5-minute email updates on the latest AI news and how to use it

3. You learn how to become 2x more productive by leveraging AI

…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.