Monday, December 23, 2024

The Collective #889

Web DevelopmentThe Collective #889


Olá, frontend friends! 👋

Hope your week has been kind to you so far!

Addy Osmani reminds us that while AI can do a lot, it’s not replacing your expertise any time soon. Speaking of expertise, Josh Comeau has a frosty tip on leveling up backdrop-filter effects, giving you glassy visuals that are as smooth as they are stunning.

If you’re into immersive experiences, Motion Vectors by Active Theory might blow your mind. It’s all about making high-quality 3D content accessible without sacrificing performance. And for a sprinkle of nostalgia, the Emoji 1997 SVG Icons bring Softbank’s original emoji set back to life for your design projects.

Standout Web Design Picks

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

Penpot, the Free Open-Source Design Tool for Design & Code Collaboration, now has a Plugin System! Enter the Penpot Plugin Contest until Dec 15, and create plugins that take your Penpot workflow to the next level. It’s open to everyone, from pro developers to rookies in plugin building. Imagine, build, and win!

Addy Osmani’s latest post discusses the “70% problem” in AI-assisted coding, emphasizing that while AI can quickly get you most of the way there, achieving robust, production-quality software still relies heavily on human expertise and refinement.

Temani Afif shares a CSS tip on creating a glowing border animation that runs smoothly on hover and stops gently when the mouse leaves, using modern CSS techniques like @property, CSS Mask, and Math functions.

🌐 Motion Vectors for 3D Content

This article discusses how Active Theory’s Motion Vectors technology uses compressed frames and real-time shader interpolation to deliver high-quality 3D content online, balancing visual detail with smooth performance for an immersive experience on any device.

David Darnes explores new HTML and CSS features for creating dropdowns and popovers without JavaScript, offering practical insights into how these evolving tools can simplify developers’ workflows for interactive components.

Harry Roberts discusses using a layered approach with the Speculation Rules API to optimize site navigation performance by strategically prefetching and prerendering internal links, adapting tactics for both small static sites and larger dynamic projects.

James Stuckey Weber introduces the potential of CSS anchor positioning to create new, complex layouts without JavaScript, featuring detailed examples like arranging yearbook photos and dynamically aligning text, as explored in Tab Atkins-Bittner’s CSS Day presentation.

In this article, Josh Comeau explains how to take frosted glass effects to the next level using backdrop-filter in CSS.

Nadia Makarevich’s article in the Web Performance Calendar reviews how the React Compiler improves real-world app performance, exploring its effectiveness in reducing re-renders and reliance on manual memoization techniques.

In this blog post, Dmitry Shironosov discusses the current copyright crisis involving AI and creators, arguing that tech companies need to acknowledge and compensate creators fairly while creators must adapt and embrace AI to foster a sustainable coexistence.

Astro 5.0 introduces major features like the Content Layer for loading content from any source and Server Islands for combining static and dynamic content, enhancing performance and flexibility for content-driven sites.

The original Softbank JP Emoji set from 1997. Restored as SVG icons for Figma and Sketch. Licensed under CC BY 4.0.

35+ fully open-source, accessible components for dashboards and charts built with React, Tailwind CSS, and Radix UI.

Cherry Studio is a desktop client that supports multiple LLM providers, available on Windows, Mac, and Linux.

This library contains Figma styles and components that mirror the base UI components found in the @wordpress/components package and icons found in the @wordpress/icons package.

(From our blog) Learn how to create a progressive image rotation effect with WebGL, using OGL and GLSL shaders. By Oluwaseyi Oluwadare.

(From our blog) Discover the top website builders for small businesses in 2025, and learn how to choose the perfect platform to grow your online presence with ease and scalability.

(From our blog) This case study captures the journey of crafting a personal portfolio—an exploration of bold design, creative freedom, and the beauty of designing for oneself.

Why struggle with file uploads? Pinata’s File API is your fix

Simplify your development workflow with Pinata’s File API. Add file uploads and retrieval to your app in minutes, without the need for complicated configurations. Pinata provides simple file management so you can focus on creating great features.

Video Vault

Animation Spotlight

Demo Corner

❓Did you know that…

…Apple’s iconic logo once featured Isaac Newton? In 1976, Apple’s first logo depicted Newton sitting under an apple tree, designed by co-founder Ronald Wayne. A year later, the logo was revamped into the bitten apple we know today, symbolizing simplicity and modernity.

Codrops is proudly sponsored by KeyCDN, the high performance content delivery network that has been built for the future.

Check out our other content

Check out other tags:

Most Popular Articles