Olá, frontend associates! 👋
Hope your week has been form to you up to now!
Addy Osmani reminds us that whereas AI can do loads, it’s not changing your experience any time quickly. Talking of experience, Josh Comeau has a frosty tip on leveling up backdrop-filter results, supplying you with glassy visuals which can be as easy as they’re gorgeous.
For those who’re into immersive experiences, Movement Vectors by Lively Idea may blow your thoughts. It’s all about making high-quality 3D content material accessible with out sacrificing efficiency. And for a sprinkle of nostalgia, the Emoji 1997 SVG Icons deliver Softbank’s authentic emoji set again to life in your design initiatives.
Standout Net Design Picks
Need extra inspiration? Browse the newest additions to our Webzibition 👉
Penpot, the Free Open-Supply Design Device for Design & Code Collaboration, now has a Plugin System! Enter the Penpot Plugin Contest till Dec 15, and create plugins that take your Penpot workflow to the subsequent stage. It’s open to everybody, from professional builders to rookies in plugin constructing. Think about, construct, and win!
Addy Osmani’s newest put up discusses the “70% drawback” in AI-assisted coding, emphasizing that whereas AI can rapidly get you a lot of the means there, reaching strong, production-quality software program nonetheless depends closely on human experience and refinement.
Temani Afif shares a CSS tip on making a glowing border animation that runs easily on hover and stops gently when the mouse leaves, utilizing fashionable CSS strategies like @property, CSS Masks, and Math features.
This text discusses how Lively Idea’s Movement Vectors know-how makes use of compressed frames and real-time shader interpolation to ship high-quality 3D content material on-line, balancing visible element with easy efficiency for an immersive expertise on any machine.
David Darnes explores new HTML and CSS options for creating dropdowns and popovers with out JavaScript, providing sensible insights into how these evolving instruments can simplify builders’ workflows for interactive elements.
Harry Roberts discusses utilizing a layered strategy with the Hypothesis Guidelines API to optimize web site navigation efficiency by strategically prefetching and prerendering inner hyperlinks, adapting techniques for each small static websites and bigger dynamic initiatives.
James Stuckey Weber introduces the potential of CSS anchor positioning to create new, complicated layouts with out JavaScript, that includes detailed examples like arranging yearbook photographs and dynamically aligning textual content, as explored in Tab Atkins-Bittner’s CSS Day presentation.
On this article, Josh Comeau explains the way to take frosted glass results to the subsequent stage utilizing backdrop-filter in CSS.
Nadia Makarevich’s article within the Net Efficiency Calendar opinions how the React Compiler improves real-world app efficiency, exploring its effectiveness in decreasing re-renders and reliance on handbook memoization strategies.
On this weblog put up, Dmitry Shironosov discusses the present copyright disaster involving AI and creators, arguing that tech firms have to acknowledge and compensate creators pretty whereas creators should adapt and embrace AI to foster a sustainable coexistence.
Astro 5.0 introduces main options just like the Content material Layer for loading content material from any supply and Server Islands for combining static and dynamic content material, enhancing efficiency and suppleness for content-driven websites.
The unique Softbank JP Emoji set from 1997. Restored as SVG icons for Figma and Sketch. Licensed underneath CC BY 4.0.
35+ absolutely open-source, accessible elements for dashboards and charts constructed with React, Tailwind CSS, and Radix UI.
Cherry Studio is a desktop shopper that helps a number of LLM suppliers, accessible on Home windows, Mac, and Linux.
This library comprises Figma kinds and elements that mirror the bottom UI elements discovered within the @wordpress/elements bundle and icons discovered within the @wordpress/icons bundle.
(From our weblog) Discover ways to create a progressive picture rotation impact with WebGL, utilizing OGL and GLSL shaders. By Oluwaseyi Oluwadare.
(From our weblog) Uncover the highest web site builders for small companies in 2025, and learn to select the right platform to develop your on-line presence with ease and scalability.
(From our weblog) This case research captures the journey of crafting a private portfolio—an exploration of daring design, artistic freedom, and the fantastic thing about designing for oneself.
Why battle with file uploads? Pinata’s File API is your repair
Simplify your growth workflow with Pinata’s File API. Add file uploads and retrieval to your app in minutes, with out the necessity for classy configurations. Pinata offers easy file administration so you may deal with creating nice options.
Video Vault
Animation Highlight
Demo Nook
❓Do you know that…
…Apple’s iconic emblem as soon as featured Isaac Newton? In 1976, Apple’s first emblem depicted Newton sitting underneath an apple tree, designed by co-founder Ronald Wayne. A yr later, the emblem was revamped into the bitten apple we all know right this moment, symbolizing simplicity and modernity.
Codrops is proudly sponsored by KeyCDN, the excessive efficiency content material supply community that has been constructed for the longer term.
