The Collective

The Collective is changing

Codrops Publication — Mon, 16 Jun 2025 16:00:00 +0000

Olá, frontend friends! 👋

After 915 editions, we’ve decided to sunset the Codrops Collective, both the weekly email digest and the live archive of curated links. We know, just 85 short of 1000… but even beautiful things need to pause before the round numbers sometimes! The Collective has been a big part of what we do, but keeping it updated has become increasingly hard to sustain alongside everything else we're building.

While we won’t be sending regular newsletters anymore, you might still hear from us from time to time, when we have something truly exciting to share: interesting updates, community highlights, or something we think you’ll love.

Thank you so much for being part of this journey. From long-time readers to recent subscribers, thank you for being part of this journey. 💙

Manoela & the Codrops team

The Collective #915: The UX butterfly effect, Fragments, Human coders are still better than LLMs

Codrops Publication — Mon, 09 Jun 2025 19:47:06 +0000

Olá, frontend friends! 👋

Here’s a fresh roundup of the latest frontend news, links, and resources to inspire and inform you. Whether you're looking for new ideas or just something interesting, we hope you'll discover something exciting in this edition!

Happy exploring! 💙

P.S. We've been hosting Codrops with Liquid Web for almost a decade now—super reliable and solid support. Highly recommended.

^{From our sponsor}

Fact-based news without bias awaits. Make 1440 your choice today.

Overwhelmed by biased news? Cut through the clutter and get straight facts with your daily 1440 digest. From politics to sports, join millions who start their day informed.

GSAP Site of the Week: Phantom Land

GSAP names Phantom Land Site of the Week for its sleek, polished design using CustomEase, Three.js, WebGL, and React.

^{gsap / web-trends}

6 advanced TypeScript tricks

Oleg Wock shares advanced type-level programming tricks to improve your TypeScript codebase.

^{tutorial / typescript}

AI Is Flipping UX Upside Down: Navigating the New Era of Design

Jan Nikka A. Estefani explores how AI is transforming UX design, challenging traditional tools and pushing designers to rethink roles, skills, and the future of interface.

^{ai / ux / web-design}

Why is quality so rare?

Karri Saarinen reflects on why true quality feels rare today and makes the case for craft as both a creative pursuit and a business advantage.

^{article / creativity / opinion}

^{From our sponsor}

Learn AI in 5 minutes a day

What’s the secret to staying ahead of the curve in the world of AI? Information. Luckily, you can join 1,000,000+ early adopters reading The Rundown AI — the free newsletter that makes you smarter on AI with just a 5-minute read per day.

The no-nonsense approach to AI agent development

Malte Ubl shares a practical code-first guide to building reliable AI agents using clear logic and real software patterns.

^{ai / software-engineering}

Physicality: the new age of UI

Sebastiaan de With explores Apple’s rumored UI overhaul and imagines a future where interfaces feel alive through dynamic interactive glass.

^{article / design-trends / opinion}

I Think I’m Done Thinking About genAI For Now

Glyph reflects on their deep discomfort with generative AI, why they’re stepping away from the discourse, and the emotional toll of unresolved skepticism.

^{ai / article / opinion}

The UX butterfly effect

Martin Tomitsch explores how small design choices can lead to big, unintended consequences—and what designers can do about it.

^{article / ux}

The 2025 Pinterest Midyear Trends Report

The 2025 Pinterest Midyear Trends Report reveals Gen Z’s shift toward nature, digital detoxing, and astrology-inspired aesthetics.

^{design-trends / web-trends}

Human coders are still better than LLMs

Antirez argues that while LLMs are helpful, human coders still surpass them in creative problem-solving.

^{ai / article}

Getting Creative With HTML Dialog

Andy Clarke shows how to creatively style HTML

The Collective #914: ForesightJS, What’s new in web UI, RenderHooks

Codrops Publication — Mon, 02 Jun 2025 16:00:00 +0000

Olá, frontend friends! 👋

Happy exploring! 💙

P.S. We've been hosting Codrops with Liquid Web for almost a decade now—super reliable and solid support. Highly recommended.

^{From our sponsor}

Shape the Future of AI—With Your Frontend Skills

Join Outlier and get paid to help train the next generation of AI. No need for prior AI experience—just your expertise in HTML, CSS, JavaScript, and modern frameworks like React or Vue.

Work remotely, on your schedule, and earn up to $50/hour reviewing AI-generated code, improving UX, and shaping smarter systems for top global tech companies.

Why developers love working with Outlier:

💸 Up to $50/hour with weekly payouts
🌍 100% remote work, no contracts
🧠 No AI experience needed—your coding skills are enough
⏰ Flexible hours—you control your time
🚀 Real impact on cutting-edge AI projects

👉 Apply now to start building the future—one line of code at a time.

GSAP Site of the Week: Navigate

GSAP has named Navigate by Resn its Site of the Week, celebrating its playful scroll and text animations powered by ScrollTrigger and SplitText.

^{gsap / web-trends}

The first Penpot Fest speakers are in!

Join us in Madrid, Oct 8–10, at Penpot Fest — a celebration of design, code, and open source. Gloria Langreo (GitHub), Bárbara Martínez (Wikimedia), and Laura Kalbag (Penpot) are set to share their insights on UX/UI, accessibility, and design systems as part of our exciting lineup. Get your tickets!

Animate a mesh across a sphere’s surface

Learn how to move 3D meshes smoothly across a sphere’s surface with three.js and GSAP using spherical paths and quaternions.

^{3d / animation / gsap / three-js / tutorial}

ForesightJS

ForesightJS predicts user intent via mouse movement to prefetch smarter—before clicks or hovers.

^{javascript / library}

What’s new in web UI

Una Kravets explores powerful new web UI features that let developers build rich interfaces with minimal HTML and CSS.

^{css / ui-components / video}

Staying Code Visualization Platform

A zero-config tool to visualize code execution and data structures in Python, JavaScript, and C++ — no installs or setup needed.

^{cpp / data-visualization / javascript / python / tool}

WeatherStar 4000+

A web-based recreation of the classic WeatherStar 4000, offering retro local forecasts powered by NOAA, now modernized with HTML/CSS.

^{css / data-visualization / javascript / retro / weather}

The col element

A scathing and humorous critique of HTML’s and elements—how they work, why they’re confusing, and why you’re probably better off avoiding them.

^{accessibility / article / html}

Eleventy LibDoc

A clean, accessible documentation starter for 11ty, focused on performance and usability.

^{documentation / eleventy / template}

Password Basket

Catch falling characters in a game to generate strong, secure passwords.

^password

A Brief History of JavaScript

This article traces the 30-year journey of JavaScript, highlighting its rise from a quick browser hack to the most influential language in web development history.

^javascript

A place to browse social proof examples grounded in psychology, with real-life applications in business and marketing.

^marketing

RenderHooks

RenderHooks is a small, innovative React library that allows you to use React hooks inline, right next to the JSX where they’re needed, without breaking the Rules of Hooks.

^react

Reinvent the Wheel

Matthias Endler argues that rebuilding existing tools is a powerful path to learning, creativity, and deeper understanding.

^{article / creativity}

So Long, Figma. Thanks for Everything.

Jon Daiello pens a reflective letter from the future, offering a glimpse into a world where designers trade pixel perfection for something far more transformative.

^{ai / article / web-design}

^{From our sponsor}

Get Your Free ChatGPT Productivity Bundle

Mindstream brings you 5 essential resources to master ChatGPT at work. This free bundle includes decision flowcharts, prompt templates, and our 2025 guide to AI productivity.

Our team of AI experts has packaged the most actionable ChatGPT hacks that are actually working for top marketers and founders. Save hours each week with these proven workflows.

It's completely free when you subscribe to our daily AI newsletter.

Subscribe to get instant access

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

The Collective #913: 90s.dev, Web animations today and tomorrow

Codrops Publication — Mon, 26 May 2025 16:01:00 +0000

Olá, frontend friends! 👋

Happy exploring! 💙

P.S. We've been hosting Codrops with Liquid Web for almost a decade now—super reliable and solid support. Highly recommended.

^{From our sponsor}

What do you want to build?

Prompt, run, edit, & deploy full-stack web & mobile apps without any dev experience with Bolt, an AI engineer that writes code straight from your Figma designs.

Try it free

GSAP Site of the Week: Meet Your Legend

GSAP's Site of the Week is Meet Your Legend, a beautifully crafted experience by Beaucoup Studio featuring a slick mouse follower, thoughtful transitions, and a logo/menu/loader combo.

^{gsap / web-trends}

You can style alt text like any other text

Andy Bell shows how to style alt text and enhance fallback UX with CSS and JS when images fail to load.

^{accessibility / css / tutorial}

90s.dev

A new web-based gamedev platform for building game-making tools using a retro OS-style GUI and a 320×180 canvas API.

^{game-development / tool}

Crosspost

Crosspost lets devs post to Twitter, Mastodon, LinkedIn, and more from one JavaScript API or CLI. Streamline your social automation.

^{javascript / library / social-media}

Styling the icon for HTML date and time types

Cassidy Williams shares how to style input[type="date"] icons using ::-webkit-calendar-picker-indicator, solving dark mode issues.

^{css / tutorial}

Join Penpot Fest, the event for design, code and OSS lovers

Join Penpot Fest in Madrid (Spain), Oct 8-10, 2025 — a celebration for open source, design, and code lovers. Enjoy workshops, talks from top speakers like Blender and GitHub, and great networking. Early bird tickets available!

^open-source

A simple search engine from scratch

A hands-on guide to building a lightweight blog search engine using word embeddings and client-side cosine similarity.

^{ai / python / search / tutorial}

Patrick Heintzmann’s Lab

Patrick Heintzmann launches a personal lab to preserve and share his creative WebGL sketches, demos, and shader experiments.

^{three-js / webgl}

New Digital HQ — pt 1

Basement shares part 1 of a case study on their PS2-inspired 3D site—covering design choices, performance tricks, and custom workflows post-launch.

^{3d / article / web-design / webgl}

Masonry, Item Flow, and… GULP?

A promising CSS proposal called Item Flow may finally bring native masonry layout support—and a unified layout model—to the web.

^{css / opinion / web-design}

Painting With the Web

Matthias Ott's inspiring talk at the "beyond tellerrand" festival 2025 in Düsseldorf.

^{accessibility / video / web-design / web-standards}

The Era Of The Business Idiot

Ed Zitron eviscerates modern leadership, arguing tech and business are ruled by clueless, performative execs detached from real work and people.

^{ai / leadership / opinion / satire}

Web animations today and tomorrow

Bramus Van Damme explores new and upcoming web animation features at Google I/O 2025, including View Transitions and @starting-style.

^{animation / css / video}

Visualizing 100,000 Years of Earth in WebGL

Bouke Stam built a WebGL globe that visualizes 100,000 years of Earth's geography, sea levels, climate, and ice sheets using shaders and scientific data.

^{data-visualization / tutorial / webgl}

Particle Life simulation in browser using WebGPU

Nikita Lisitsa explores life-like particle simulations in the browser using WebGPU, covering modeling, GPU binning, prefix sums, and rendering.

^{particles / physics / tutorial / webgpu}

Antoine Wodniack’s Open Source Portfolio

Antoine Wodniack open-sources his Webby-winning Astro portfolio for others to learn from.

^{astro / portfolio}

^{From our sponsor}

Maximize Brand Impact with Every Campaign

Make smarter brand decisions with Neurons AI.

Know exactly how memorable & engaging your creatives will be, before you launch.

Get instant, AI-powered recommendations to refine your visuals and hit your campaign goals.

Top global brands trust Neurons to boost CTR by 73% CTR and lift brand awareness by 20%.

Get Your Neurons Demo

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

The Collective #912: Disfigure Posture Editor, View Transitions Applied, Dithering Shader

Codrops Publication — Mon, 19 May 2025 16:02:00 +0000

Olá, frontend friends! 👋

Happy exploring! 💙

P.S. We've been hosting Codrops with Liquid Web for almost a decade now—super reliable and solid support. Highly recommended.

^{From our sponsor}

What will you create with Bolt?

A fresh, designer-friendly way to build without writing a single line of code.

Bolt.new is the AI-powered agent that enables anyone to become a developer.

Take a look

GSAP Site of the Week: Andres Briganti

GSAP named Andres Briganti its Website of the Week—a fast, focused, and brutally intentional experience powered by Observer, SplitText, and React.

^{gsap / web-trends}

Building my childhood dream PC

Fabien Sanglard restores his dream 90s IBM PC in a deep, nostalgic series covering hardware, DOS setup, peripherals, and classic PC gaming.

^{article / hardware / nostalgia / retro}

Disfigure Posture Editor

A WIP library for rigging boneless, morphless 3D models using Three.js TSL. Includes demos and proof-of-concept videos.

^{3d / three-js / tsl}

itter.sh

A terminal-based microblogging platform accessed via SSH — no browser, just pure text, hashtags, and eets.

^{social-media / ssh / terminal}

Hyvector

Hyvector is a fast, browser-based SVG editor built for complex images. Now in first release, feedback is welcome via the issue tracker.

^{svg / tool}

View Transitions Applied: Smoothly animating a border-radius with a View Transition, revisited

A tutorial exploring two ways to animate border-radius with View Transitions in CSS — one using custom animations, the other using CSS transitions.

^{css / tutorial}

Finding Your Next Amusement Park Ride with APIs

A tutorial on building a ride wait-time sorter using a free API, Alpine.js, and Gemini-assisted styling

^{alpinejs / api / javascript / tutorial}

snapDOM

A fast, dependency-free DOM capture library that converts HTML elements to SVG or images with full style, font, and pseudo-element support.

^{library / svg / tool}

GeoJSON parser for threejs

Three.js loaders for GeoJSON and WKT shapes with support for flat/extruded meshes, precise transforms, and line geometry.

^{3d / data-visualization / geojson / three-js}

Dithering Shader

A dithering shader demo using React Three Fiber, with bloom, grayscale, pixelation, and live controls. Source code here.

^{glsl / three-js}

WebTUI

A modular CSS library bringing the aesthetics of terminal UIs to the web.

^{css / library}

Aurelia

A realtime procedural jellyfish demo using Three.js and WebGPU. Fake lighting, GPU physics, and shaders. View the source code here.

^{three-js / tsl / webgpu}

^{From our sponsor}

Small Budget, Big Impact: Outsmart Your Larger Competitors

Being outspent doesn't mean being outmarketed. Our latest resource showcases 15 small businesses that leveraged creativity instead of cash to achieve remarkable marketing wins against much larger competitors.

Proven techniques for standing out in crowded markets without massive budgets
Tactical approaches that turn resource constraints into competitive advantages
Real-world examples of small teams creating outsized market impact

Ready to level the playing field? Download now to discover the exact frameworks these brands used to compete and win.

Download now for free here.

Human

A satirical sci-fi tale where machines create humans as an experiment, only to be amazed—and alarmed—by their emotional resilience.

^{ai / article / satire}

How to have the browser pick a contrasting color in CSS

Jen Simmons shows how contrast-color() in CSS auto-picks black or white text for better contrast, easing styling but not replacing a11y checks.

^{accessibility / article / css}

Codigo: The Programming Language Repository

A site for discovering, comparing, and staying updated on programming languages with news, code examples, and trends.

^{programming-language}

Top 10 GSAP x Webflow Community Challenge Demos

GSAP shares 10 standout entries from the GSAP x Webflow animation challenge, showcasing creative and technical excellence in playful demos.

^gsap

Hyper-Typing

This article critiques “hyper-typing” in TypeScript—overly complex types for perfect safety—arguing simpler types often offer better DX.

^{opinion / typescript}

Aberdeen

A lightweight JS/TS UI library for building fast, reactive interfaces without a virtual DOM.

^{javascript / library / typescript}

The Height Enigma

Josh W. Comeau explains why height: 50% often fails in CSS and how to make percentage heights work with knowable parent heights, Grid, or Flexbox.

^{css / tutorial}

^{From our sponsor}

Fact-based news without bias awaits. Make 1440 your choice today.

Overwhelmed by biased news? Cut through the clutter and get straight facts with your daily 1440 digest. From politics to sports, join millions who start their day informed.

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

The Collective #911: Internet roadtrip, Ludo GL and the creative power of contraints

Codrops Publication — Mon, 12 May 2025 15:58:00 +0000

Olá, frontend friends! 👋

Happy exploring! 💙

P.S. We've been hosting Codrops with Liquid Web for almost a decade now—super reliable and solid support. Highly recommended.

^{From our sponsor}

Prompt, run, edit & deploy full-stack web & mobile apps with Bolt

Bolt is the AI-powered dev agent that brings full stack coding right to your browser.

Bring your design to life with Bolt.

Try for free

GSAP Site of the Week: Inkwell

GSAP named Inkwell its Site of the Week! This polished scroll-driven experience by SavoirFaire©️ uses GSAP’s ScrollSmoother and WebGL magic.

^{gsap / web-trends}

The creative power of constraints

This article explores how creative constraints—whether imposed or self-chosen—can fuel innovation across design, art, and architecture.

^{article / creativity}

LudoGL

Marco Ludovico Perego built LudoGL, a WebGL2-only renderer from scratch to learn deferred rendering and post-processing techniques.

^{tutorial / webgl}

Zed: The Fastest AI Code Editor

Richard Feldman introduces Zed, an open-source AI code editor with a built-in Agent Panel for interactive coding assistance.

^{ai / code-editors}

Config 2025: Pushing design further

This article updates you on what's new in Figma following Config 2025, including tools like Figma Make, Sites, Grid, Draw, and Buzz that expand its capabilities from design to production.

^{graphic-design / tool}

Clippy

Clippy lets you run LLMs locally with a nostalgic 1990s interface inspired by Microsoft’s original Clippy design.

^{ai / tool}

Guitar Chords in CSS

Mads Stoumann builds a guitar chord visualizer using only CSS, leveraging the new attr() function and grid layout for fretboard rendering.

^{css / music / tutorial}

Making a new form control

Joeri Sebrechts explores building a custom element from scratch with full form support, styling, and validation using only web standards.

^{javascript / tutorial / web-components}

LegoGPT

LegoGPT is an open-source model that generates physically buildable LEGO designs from text prompts, using LLaMA fine-tuning and stability checks.

^{3d / ai}

How Node.js Works Behind the Scenes

A deep dive into how Node.js handles async operations with its event loop, libuv, and phases like timers, poll, check, and process.nextTick().

^{node-js / tutorial}

Exploring CSS3DRenderer in Three.js

Yuri Artiukh shares insights on alternative renderers in Three.js, highlighting CSS3DRenderer’s ability to render HTML in 3D space, and how it enables seamless mixing of WebGL and DOM elements.

^{3d / css / three-js / webgl}

Adventures in Vibe Coding – Really, Really Big Numbers

Raymond Camden explores "vibe coding" with GenAI to build a large-number formatter in JS using K–AAA-style suffixes (yes, even KFC).

^{ai / javascript / opinion}

JavaScript, what is this?

Mat “Wilto” Marquis explains how this works in JavaScript, from global to strict mode, arrow functions, events, and binding nuances.

^{javascript / tutorial}

VERT

VERT is a fast, ad-free, open-source file converter that runs locally for most formats and supports images, audio, video, and documents.

^{productivity / tool}

Rybbit Analytics

Rybbit is a privacy-friendly, open-source alternative to Google Analytics with a clean UI, real-time dashboards, and GDPR-compliant tracking.

^{analytics / privacy / tool}

Critical CSS Generator

Generate and inline Critical CSS for faster load times, improved Core Web Vitals, and better performance with this free tool.

^{css / performance / tool}

The history of album art

The history of album art, from utilitarian sleeves to iconic visual design, driven by pioneers like Steinweiss, Miles, and Fujita.

^{art / design-trends / graphic-design / music}

Are ‘CSS Carousels’ accessible?

Sara Soueidan examines the accessibility pitfalls of experimental CSS Carousels, concluding they're not yet ready for production use.

^{accessibility / css / html / opinion}

Internet roadtrip

Neal Agarwal built a collaborative Street View road trip simulator where users vote every 10 seconds on directions—and on changing the radio station.

^{interactive-games}

All the entries from Gamedev.js Jam 2025

Gamedev.js Jam 2025 saw a record-breaking 420 game submissions on the theme "Balance"; voting is open on Itch.io until May 9th.

^{game-development / interactive-games / javascript}

Using AI to Analyze Chart Images

Raymond Camden tests using Gemini AI to extract structured data and summaries from chart images, finding it reasonably accurate and useful.

^{ai / python / tutorial}

^{From our sponsor}

Start learning AI in 2025

Keeping up with AI is hard – we get it!

That’s why over 1M professionals read Superhuman AI to stay ahead.

Get daily AI news, tools, and tutorials
Learn new AI skills you can use at work in 3 mins a day
Become 10X more productive

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

The Collective #910: GSAP is now 100% FREE, Functional HTML, Magic Patterns

Codrops Publication — Mon, 05 May 2025 20:11:11 +0000

Olá, frontend friends! 👋

We’re trying an (old) new layout, let us know if you enjoy the images or if you prefer a more compact format!

Happy exploring! 💙

P.S. We've been hosting Codrops with Liquid Web for almost a decade now—super reliable and solid support. Highly recommended.

Droip: The Next Big Revolution in WordPress

Droip is already making waves in the WordPress world and for all the right reasons.

This no-code WordPress builder is giving creators exactly what they’ve been missing in WordPress.

Complete design freedom
Built-in dynamic content
Instant Figma to Droip handoff
Immersive interactions & animations
Clean, performance-optimized code
Low third-party dependency

And so much more.

❤️ What Droip Users Are Saying

Ready to build without limits?

👉 Get Droip and see why creators are calling it the most powerful builder WordPress has ever seen.

GSAP Site of the Week: Aurel’s Grand Theater

This week's Site of the Week is Aurel's Grand Theater by Aurelien Vigne, selected by the GSAP team for its impressive use of animation techniques like ScrollTrigger, MotionPath, and Three.js.

^{gsap / three-js / web-trends}

Breeze PDF

A free PDF editor that works entirely offline in your browser, allowing you to edit, sign, merge, and secure PDFs while ensuring complete privacy by processing documents locally without uploading them.

^{pdf / tool}

Building a more accessible GitHub CLI

The article discusses GitHub CLI's journey toward making terminal experiences more accessible for developers, focusing on improvements for screen reader users, high contrast options, and customizable color features.

^{accessibility / article}

I hate my portfolio

Valeria Yakovchik’s article discusses the emotional challenges of updating a design portfolio, focusing on self-doubt, conflicting advice, and the pressure to meet expectations.

^article

Magic Patterns

An AI-powered prototyping platform that helps product teams rapidly create UI designs, get user feedback, and make data-driven decisions, enhancing collaboration and streamlining the design process.

^{ai / tool / web-design}

You Can Be a Great Designer and Be Completely Unknown

Christopher Butler's essay explores the idea that true design greatness isn't measured by fame or visibility, but by creating work that seamlessly serves human needs and becomes invisible in its functionality.

^{article / graphic-design}

I use Zip Bombs to Protect my Server

Ibrahim Diallo uses clever zip bombs to protect his server from malicious bots by overwhelming them with massive compressed files.

^security

Polyfilling CSS with CSS Parser Extensions

Bramus proposes CSS Parser Extensions to make polyfills easier, letting devs extend the CSS parser with custom syntax and features.

^{css / opinion}

Arcade car physics

A playful physics demo blending car dynamics and arcade vibes—customize traction, speed, and more in-browser.

^{game-development / physics / three-js}

Easier layout with margin-trim

Jen Simmons introduces margin-trim, a new CSS property that simplifies layout by automatically trimming child element margins at container edges.

^{article / css}

Functional HTML

Dan Abramov reimagines HTML as a functional, JSON-first language with full-stack tags and client/server boundaries shaped like components.

^{html / opinion / react}

When Skill Became Obsolete: Art, Code, and the End of the Amateur

This article discusses how technological advancements, like the automation of programming through AI, are shifting the focus of creative work.

^{ai / art / opinion / software-engineering}

Anchors for Tailwind CSS

Bran McConnell releases Anchors for Tailwind CSS, a plugin for declarative anchor positioning with full CSS API and View Transition support.

^tailwindcss

Revisiting Image Maps

Andy Clarke revisits image maps while designing a retro-style site, ultimately favoring inline SVG for expressive, modern interactivity.

^{accessibility / article / svg}

The canvas element

Heydon Pickering critiques the

^{accessibility / html / opinion}

GSAP x Made With Gsap – Inertia Plugin

Made With GSAP shares a hover effect tutorial using GSAP’s now-free InertiaPlugin — images shift with mouse speed and bounce back.

^{animation / gsap / tutorial}

GSAP is now 100% FREE!

GSAP is now fully free, with a revamped SplitText plugin and new features like animating to CSS variables, plus simpler Webflow integration.

^gsap

The One-Person Framework in practice

Bram Jetten shares how he built a €1M ARR SaaS solo in Rails, proving the power of the “One-Person Framework.”

^{opinion / rails}

Interactive Neural Network Viz

A dynamic 3D network built with Three.js and custom GLSL shaders. Clicks send animated pulses that light up nodes and links.

^{3d / three-js / webgl}

One Million Chessboards

A chaotic, real-time multiplayer chess playground

^{interactive-games}

^{From our sponsor}

Daily News for Curious Minds

Be the smartest person in the room by reading 1440! Dive into 1440, where 4 million Americans find their daily, fact-based news fix. We navigate through 100+ sources to deliver a comprehensive roundup from every corner of the internet – politics, global events, business, and culture, all in a quick, 5-minute newsletter. It's completely free and devoid of bias or political influence, ensuring you get the facts straight. Subscribe to 1440 today.

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

The Collective #909: WebGL powered photo editor, TypeScript library bundler and accessibility essentials

Codrops Publication — Tue, 29 Apr 2025 15:45:00 +0000

Olá, frontend friends! 👋

Apologies for the delay in sending out the Collective – we were affected by a blackout in Portugal that left us without internet access yesterday!

Happy exploring! 💙

P.S. We've been hosting Codrops with Liquid Web for almost a decade now—super reliable and solid support. Highly recommended.

^{From our sponsor}

Start learning AI in 2025

Keeping up with AI is hard – we get it!

That’s why over 1M professionals read Superhuman AI to stay ahead.

Get daily AI news, tools, and tutorials
Learn new AI skills you can use at work in 3 mins a day
Become 10X more productive

🏆 GSAP Site of the Week: Noomo ValenTime

GSAP's Site of the Week is Noomo ValenTime, a stunning interactive experience built with WebGPU, Blender, Houdini, and Nuxt.js, featuring ScrollTrigger, ScrollSmoother and DrawSVG.

^web-trends

🎥 tsdown

A TypeScript library bundler built on Rolldown and Oxc, designed to generate declaration files quickly and support popular plugin ecosystems with minimal configuration.

^typescript

⚙️ Magnitude

An open-source, AI-native testing framework that uses visual agents and natural language to create adaptive, end-to-end tests for web apps with minimal setup and high reliability.

^ai

💡 The AI Quality Coup

Julie Zhuo examines how AI’s ability to replicate artistic styles challenges traditional notions of quality, arguing that true excellence still lies in original narrative, craftsmanship, and emotional depth.

^{ai / article / creativity}

🖼️ MiNi PhotoEditor

A WebGL-based online photo editor with filters, effects, and cropping. Source here.

^{photography / tool / webgl}

🔧 Sim

An open-source platform to build, deploy, and self-host agentic LLM workflows easily via Docker or dev containers.

^ai

📚 Polishing your typography with line height units

Jen Simmons explains new CSS line-height units for better typography control in web design.

^{article / css / typography}

🎮 generative.graphics

Mihael Miklosic made a fun little Perlin noise graphics tool with p5.js—customizable, creative, and a joy to play with.

^{generative-art / tool}

🧑‍💻 Accessibility essentials every front-end developer should know

Martijn Hols shares foundational accessibility practices every front-end dev should follow—covering semantic HTML, forms, keyboard nav, modals, alt text & more.

^{accessibility / css / tutorial}

⚛️ React Labs: View Transitions, Activity, and more

Ricky Hanlon introduces and , new experimental React features for smooth UI transitions and stateful hidden components.

^{react / tutorial / view-transitions}

📝 Advanced TypeScript manipulation features for the real world

A deep dive into advanced TypeScript features like generics, indexed access, and mapped types—applied to real-world modeling.

^{tutorial / typescript}

💬 Open Codex CLI

Local, open-source AI CLI that converts natural language to shell commands using models like phi-4-mini. No API key needed.

^{ai / terminal}

🌀 CSS Hell

CSS Hell is a delightfully cursed set of 15 torturous CSS layout puzzles designed to challenge your styling skills and punish your past CSS sins — all in good fun.

^{css / interactive-games}

🛠️ How to Build an Agent

Thorsten Ball shows how to build a functioning, code-editing AI agent with just a loop, an LLM, and a few tools — in under 400 lines of Go.

^{ai / tutorial}

🔧 Impossible Components

Dan Abramov explains how to create "impossible components" that span backend and frontend logic by splitting React components into server and client parts.

^{react / tutorial}

⚙️ Creating CSS Theme Variables from a JS file

Michelle Barker shares a script for converting nested JS theme objects into CSS variables, eliminating the need to maintain styles in two places.

^{css / javascript / productivity / tutorial}

🎭 Aurel’s Grand Theater

Step into Aurel’s Grand Theater—a portfolio like no other. Solve mysteries, smash props, and uncover hidden gems about Aurelien Vigne’s creative world.

^{3d / blender / cannonjs / immersive-experience / portfolio / three-js}

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

The Collective #908: Customizing shadcn/ui, GLSL Shaders in Practice, Post-Developer Era

Codrops Publication — Mon, 21 Apr 2025 16:00:00 +0000

Olá, frontend friends! 👋

Happy exploring! 💙

P.S. We've been hosting Codrops with Liquid Web for almost a decade now—super reliable and solid support. Highly recommended.

^{From our sponsor}

🎁 Free Gift Sent to Your Door + No CIAM Pain? Yes!

Join our Frontegg demo on April 29 at 2 PM ET to learn how you can offload CIAM work like auth flows and user roles. See how you can get back to coding and building—and get a free 3-in-1 charging station just for attending.

Save your seat today!

🏆 GSAP Site of the Week: Siena Film Foundation

GSAP's Site of the Week is the Siena Film Foundation website, featuring a smooth film carousel and innovative ticket menu animations.

^{gsap / web-trends}

💡 So you want to use Object Storage

Tips and lessons learned from building systems using object storage, focusing on strategies to manage latency, improve performance, and optimize costs in cloud-based systems.

^{article / software-engineering}

🖥️ Sidekick-CLI

An open-source, agentic command-line interface AI tool that allows users to integrate various LLM providers and customize workflows.

^{ai / terminal / tool}

🎨 tweakcn

A visual theme editor that allows users to easily customize shadcn/ui components with real-time previews.

^{tool / ui-components}

⚡ 5 Ways to Reduce HTML File Size on Your Website

Anna Monus provides five best practices for reducing HTML file size on websites to improve web performance, including minification, compression, breaking up long pages and more.

^{article / performance}

🔧 Curvy slider with Three.js postprocessing distortions

Yuri Artiukh explores the Three.js and WebGPU TSL postprocessing pipeline while recreating the stunning slider from the Kaide website.

^{three-js / tsl / tutorial / video / webgl}

🎎 Japanese Gradients

Nuevo.Tokyo™ is offering a free version of their JAPANESE GRADIENTS [FOR UI]™ design pack on Figma, part of their ongoing project blending traditional Japanese color aesthetics with modern UI design.

^{design-resource / web-design}

🎮 Getting Started with Shader Functions (step, mix, smoothstep)

Romain Herault dives into step, mix, and smoothstep in GLSL shaders, with live editors, challenges, and interactive examples for shader beginners.

^{glsl / tutorial / webgl}

💬 How to write error messages that actually help users rather than frustrate them

Amy Hupe shares how to write clear, empathetic error messages that help users recover instead of leaving them confused or frustrated.

^{accessibility / article / ux}

🕹️ React miami

A browser-based multiplayer game made for React Miami Conf by Matias Fernandez using PartyKit and PeerJS. Everyone joins the same room — madness guaranteed. Source code here.

^{interactive-games / partykit / peerjs / react / three-js}

^{From our sponsor}

Start learning AI in 2025

Keeping up with AI is hard – we get it!

That’s why over 1M professionals read Superhuman AI to stay ahead.

Get daily AI news, tools, and tutorials
Learn new AI skills you can use at work in 3 mins a day
Become 10X more productive

📊 Design Meets Data: Rive Launches Powerful Data Binding for Seamless UI Workflows

Rive, the real-time design and animation tool, has launched Data Binding—letting designers visually connect UI to live data without complex dev handoffs.

^{animation / rive / tool}

🔴 Why do AI company logos look like buttholes?

Radek Sienkiewicz roasts the AI industry’s logo obsession with circular, gradient-filled “butthole” designs—and yes, there’s a serious design critique too.

^{branding / opinion}

🌈 The customizable select – Part two: Potions, anchoring, and radial shenanigans in CSS

Brecht De Ruyte explores CSS anchor positioning to create a radial potion picker with customizable selects and animated styling tricks.

^{css / tutorial}

📡 JSX Over The Wire

Dan Abramov explores how React Server Components enable server-defined UI with co-located data, replacing REST with component-shaped JSON.

^{article / jsx / react}

🔄 Advanced React in the Wild

Addy Osmani & Hassan Djirdeh dive into advanced, real-world React/Next.js case studies, showing how top teams optimized performance and UX.

^{article / next-js / performance / react}

🔬 The Lab by Anderson Moss

Anderson Moss launches The Lab — a new WebGL-powered 3D playground for motion and interaction experiments, packed with clever video texture tech.

^{3d / three-js / webgl}

🤖 The Post-Developer Era

Josh Comeau reflects on his 2023 predictions, arguing that despite AI advances, human devs are still essential—and not going anywhere.

^{ai / opinion}

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

The Collective #907: HTML Dialogs in Practice, Custom CSS Functions for Modern Browsers, WebGL Gradients

Codrops Publication — Mon, 14 Apr 2025 12:08:00 +0000

Olá, frontend friends! 👋

Happy exploring! 💙

P.S. We've been hosting Codrops with Liquid Web for almost a decade now—super reliable and solid support. Highly recommended.

^{From our sponsor}

Penpot, the only tool with built-in design tokens

Penpot is the only tool to offer native design tokens—a single source of truth for collaboration between design and code. You can apply tokens to elements like dimensions, opacity, border radius, and more, organizing them into themes and sets. As an open-source design tool, Penpot follows the most standardized approach to design tokens: Exchange tokens between tools! This feature was developed in collaboration with Tokens Studio by Hyma.

Try Design Tokens!

🔑 How to Open and Close HTML Dialogs

Aleksandr Hovhannisyan shows how to open and close

The Collective #906: Anime.js v4, WebGL Scroll Sync, Vector-based Feathering System

Codrops Publication — Mon, 07 Apr 2025 15:20:19 +0000

Olá, frontend friends! 👋

Happy exploring! 💙

P.S. We've been hosting Codrops with Liquid Web for almost a decade now—super reliable and solid support. Highly recommended.

^{From our sponsor}

Start learning AI in 2025

Keeping up with AI is hard – we get it!

That’s why over 1M professionals read Superhuman AI to stay ahead.

Get daily AI news, tools, and tutorials
Learn new AI skills you can use at work in 3 mins a day
Become 10X more productive

🏆 GSAP Site of the Week: Nite Riot

GSAP's Site of the Week, Nite Riot, was flawlessly executed with ScrollTrigger, ScrollSmoother, Observer, and Flip — all built in Webflow.

^web-trends

🎡 Cover Flow with Modern CSS: Scroll-Driven Animations in Action

A deep dive into recreating Apple’s iconic Cover Flow UI using modern CSS features—scroll snap and scroll-driven animations—with no JavaScript.

^{article / css}

📝 Tweaking Text Level Styles, Reprised

An updated, opinionated guide to styling , ~~, , and ~~elements for modern browsers and screen readers.~~~~

~~^{article / css}~~

🌐 WebGL Scroll Sync

~~Lusion’s WebGL-Scroll-Sync demo explores a workaround for syncing WebGL visuals with DOM elements using a single canvas—without resorting to scroll-jacking.~~

~~^webgl~~

⚙️ Bare

~~A lightweight, embeddable JS runtime for cross-device apps, with native threads, CJS/ESM, and no stdlib—built for modularity.~~

~~^{javascript / tool}~~

🔗 Overengineered anchor links

~~Mats Erdkamp dives deep into solving anchor link scroll issues with increasingly advanced methods, ending in a smoothstep-based optimized approach.~~

~~^{article / css}~~

💡 Gumroad is now open source

~~After helping creators earn $1B+, the platform has opened its entire codebase, enabling faster features, bug fixes, and self-hosted marketplaces.~~

~~^{gumroad / marketplace / open-source}~~

💻 CSS-only glitch effect

~~Stanko shows how to build a CSS-only glitch effect by slicing images into animated strips with hue shifts, random transforms, and no runtime JS.~~

~~^{css / tutorial}~~

🌐 self.so

~~Create a personal website in seconds from your resume or LinkedIn — free, open source, and built with Together.ai, Next.js, and more.~~

~~^{ai / next-js / portfolio / software-engineering}~~

~~^{From our sponsor}~~

Learn AI in 5 minutes a day

~~Sign up to start learning.~~

🎨 First Look at The Modern attr()

~~Ahmad Shadeed explores the new modern attr() in CSS, which allows typed attribute values like colors, lengths, and times for dynamic styling.~~

~~^{css / tutorial}~~

🚀 Anime.js v4

~~Anime.js v4 is out with a new modular API, scroll-linked animations, draggables, additive effects, WAAPI support, and major performance improvements.~~

~~^{animation / javascript / library}~~

🔲 Minimal CSS-only blurry image placeholders

~~A minimal, CSS-only technique for rendering blurry image placeholders using a single custom property and packed integer encoding.~~

~~^{css / tutorial}~~

💾 Breaking down circular dependencies in JavaScript

~~Bryan Braun breaks down how circular dependencies in JavaScript work, why errors can be cryptic, and how live bindings sometimes mask the problem.~~

~~^{javascript / tutorial}~~

🔮 CSS Holographic Masks

~~Christian Alder experiments with CSS holographic mask effects, inspired by Robb Owen’s guide on blend modes and shader-like visuals using only CSS.~~

~~^css~~

🌟 Reinventing feathering for the Vectorian era

~~Chris Dalton shares how Rive built the first true vector-based feathering system — no rasterization, no blur hacks, just clean math and modern GPU rendering.Vector Feathering~~

~~^{animation / article / gpu / math / rive}~~

🤖 Why I stopped using AI code editors

~~Luciano Nooijen removed AI code tools after noticing a decline in coding instincts, choosing to stay sharp by using AI only manually and intentionally.~~

~~^{ai / opinion}~~

⚡ Is Vite faster than Turbopack?

~~Kyle Gill compares dev server performance across Next.js with Webpack, Turbopack, and Vite (with Rollup and Rolldown), finding Vite fastest in most cases.~~

~~^{article / next-js / performance / turbopack / vite}~~

🧩 Writing my first Astro Integration for Algolia indexing

~~Thomas Ledoux shares how he built an Astro integration that automatically indexes site content to Algolia during production builds, using TypeScript, Cheerio, and stopword filtering.~~

~~^{algolia / astro / tutorial / typescript}~~

💼 The state of the front-end and full-stack job market

~~Tim Severien analyzed 595 job listings to assess front-end and full-stack tech demand, finding React, Tailwind, and AWS dominant—though accessibility remains overlooked.~~

~~^{article / jobmarket / software-engineering}~~

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

The Collective #905: Declarative Web Push, Item Flow Proposal, Hardware-Aware Coding

Codrops Publication — Mon, 31 Mar 2025 15:37:22 +0000

Olá, frontend friends! 👋
Here’s a fresh roundup of the latest frontend news, links, and resources to inspire and inform you. Whether you're looking for new ideas or just something interesting, we hope you'll discover something exciting in this edition!
Happy exploring! 💙
P.S. We've been hosting Codrops with Liquid Web for almost a decade now—super reliable and solid support. Highly recommended.
^{From our sponsor}
Start learning AI in 2025
Keeping up with AI is hard – we get it!
That’s why over 1M professionals read Superhuman AI to stay ahead.
Get daily AI news, tools, and tutorials
Learn new AI skills you can use at work in 3 mins a day
Become 10X more productive
Sign up and start mastering AI
🏆 GSAP Site of the Week: 24/7 Artists
GSAP's Site of the Week, 24/7 Artists, brilliantly showcases animations using ScrollTrigger, MotionPath, and SplitText, created by Waaark.
^web-trends
🖼️ Item Flow, Part 1
A proposed unified layout system in CSS to merge features of Flexbox, Grid, and Masonry for greater control.
^{article / css}
🔔 Meet Declarative Web Push
Brady Eidson introduces a new, privacy-first way to send push notifications without requiring service workers or JavaScript.
^{article / notifications / privacy}
🐒 MONKEY CIRCUS
A Three.js demo showing joint manipulation in six-legged insects. Tilt their habitat with orbit controls. Full source code in the page’s HTML.
^{glsl / three-js}
🎨 Mesh gradient tool
Chase Davis brings back his mesh gradient project, now enhanced with AI tools, and shares updates featuring real-time depth of field in Three.js.
^{three-js / tool}
✍️ How to Write Blog Posts that Developers Read
Michael Lynch shares practical advice on how developers can write blog posts that actually get read.
^{article / blogging}
🛑 Take This On-Call Rotation and Shove It
A deeply personal, richly detailed critique of unpaid and exploitative on-call practices in tech, arguing that 24/7 availability should be compensated and reconsidered.
^{opinion / tech-industry}
💼 Luis Bizarro Portfolio
Luis Bizarro has open-sourced the code behind his personal portfolio.
^{javascript / opengl}
🕹️ Navigate
Resn launches NVG8: a sleek, scroll-driven Web3 experience that gamifies data contribution through immersive motion and futuristic UI.
^{ai / web3}
^{From our sponsor}
There’s a reason 400,000 professionals read this daily.
Join The AI Report, trusted by 400,000+ professionals at Google, Microsoft, and OpenAI. Get daily insights, tools, and strategies to master practical AI skills that drive results.
Sign up now for free and work smarter, not harder.
🔄 UI Algorithms: A Tiny Undo Stack
Julik Tarkhanov shares a robust JavaScript undo/redo stack using dual arrays and structured cloning—avoiding common indexing pitfalls with a clean API.
^{javascript / tutorial}
🖥️ ShaderGPT Explore Page
ShaderGPT introduces a new Explore Page, allowing users to search, filter, and vote on AI-generated GLSL shaders, helping surface the most popular results.
^{ai / generative-art / glsl / webgl}
🤖 AI bots are destroying Open Access
AI scraping bots are overwhelming open-access sites, threatening the sustainability of libraries, archives, and scholarly platforms online.
^{ai / ethics / opinion}
⚔️ Cowardly Defaults and Courageous Overrides with Modern CSS
Modern CSS features like :where() and cascade layers enable cleaner, conflict-free utility classes—no more specificity battles or !important hacks.
^{article / css}
📐 Revisiting CSS border-image
A deep dive into CSS border-image and how it enables creative, performant designs through slicing, repeating, and styling with images or gradients.
^{article / css}
⚙️ You should know this before choosing Next.js
What to consider before choosing Next.js—framework limitations, portability issues, and transparency concerns.
^{framework / javascript / next-js / opinion}
💻 Hardware-Aware Coding: CPU Architecture Concepts Every Developer Should Know
A deep dive into CPU architecture concepts showing how developers can boost code performance by aligning with hardware behavior.
^{hardware / performance / software-engineering}
🔄 The case for “old school” CSS
Rediscover the joy of writing old-school CSS with Drupal 10 theming—flex layouts, Twig magic, and a mobile menu, all built from scratch!
^{article / css / drupal}
🔲 The ‹select› element can now be customized with CSS
Chrome 135 adds support for fully customizable element, now supported in Chrome 134. Covers styling, accessibility, and progressive enhancement.
^{article / css / ui-components}
🏛️ Maquette
A digital maquette of the Farnsworth House using React Three Fiber and Theatre.js for animations. From a while ago—worth checking out. Source code here.
^{3d / react / three-js}
🖼️ Photo gallery with Scroll Driven Animation
A CSS-only demo by Adam Argyle showcasing view-timeline animations for grid items, applying scroll-triggered opacity, scaling, and rotation effects.
^css
🧠 The Cultural Divide between Mathematics and AI
A reflection on the contrasting values, priorities, and collaboration challenges between mathematicians and AI researchers, observed at JMM 2025.
^{ai / math / opinion}
^{From our sponsor}
There’s a reason 400,000 professionals read this daily.
Join The AI Report, trusted by 400,000+ professionals at Google, Microsoft, and OpenAI. Get daily insights, tools, and strategies to master practical AI skills that drive results.
Sign up now for free and work smarter, not harder.
🤔 How Much Are LLMs Actually Boosting Real-World Programmer Productivity?
Thane Ruthenis questions whether LLMs truly boost programmer productivity, asking for concrete real-world impacts rather than vague claims of 5–10x gains.
^{ai / opinion / productivity}
💻 Hallucinations in code are the least dangerous form of LLM mistakes
Simon Willison argues that hallucinations in AI generated code are minor since they are easily caught when running the code, unlike misleading text errors.
^{ai / article}
⏳ Your Life in Weeks
A tool inspired by Tim Urban’s Wait But Why that visualizes your life as a grid of weeks, helping you track milestones and reflect on time.
^tool
🏎️ PolyTrack
PolyTrack 0.5.0 beta is out! A fast-paced, low-poly racing game inspired by TrackMania, featuring custom track building, time trials, and community sharing.
^{interactive-games}
Got something you’d like to share? Just reply to this email and let us know!
Codrops is proudly sponsored by KeyCDN, the high performance content delivery network that has been built for the future.

Powered by beehiiv

The Collective #902: Dynamic Colors, 3D Portfolios, and Cache-Control Insights

Codrops Publication — Mon, 10 Mar 2025 15:01:00 +0000

Codrops is proudly hosted by Liquid Web—trusted for nearly a decade for performance, reliability, and scalability.
Olá, frontend friends! 👋
Here’s a fresh roundup of the latest frontend news, links, and resources to inspire and inform you. Whether you're looking for new ideas or just something interesting, we hope you'll discover something exciting in this edition!
Happy exploring! 💙
^{From our sponsor}
Start learning AI in 2025
Keeping up with AI is hard – we get it!
That’s why over 1M professionals read Superhuman AI to stay ahead.
Get daily AI news, tools, and tutorials
Learn new AI skills you can use at work in 3 mins a day
Become 10X more productive
Sign up and start mastering AI
🎨 Relative Colors
Ahmad Shadeed explains how to dynamically modify colors in CSS using relative colors, covering syntax, use cases, and accessibility benefits.
^{article / css}
🏠 Create a Home Office Portfolio with Three.js and Blender
Andrew Woan showcases how to build a home office portfolio using Three.js and Blender, covering 3D website routing, rapid prototyping, and interactive elements.
^{3d / blender / three-js / tutorial / video}
📡 Why Do We Have a Cache-Control Request Header?
Harry Roberts explores the often-overlooked Cache-Control request header, explaining its role in refresh behavior, revalidation, and real-world use cases.
^{article / performance}
🐧 A Quick Journey Into the Linux Kernel
An interesting look at key Linux kernel concepts, from process scheduling to system calls, with practical insights from kernel development.
^{article / linux / operating-systems}
🎨 MoodHue
Thalles Lopes introduces MoodHue, an AI-powered app that generates color palettes based on mood. Built with React and React Three Fiber.
^{ai / react / tool}
📊 GSAP ScrollTrigger Visualizer
A useful tool for GSAP users to better understand ScrollTrigger behavior.
^gsap
📝 CSS Form Control Styling Level 1
An unofficial draft for CSS Form Control Styling, defining new ways to style form controls with standardized pseudo-elements and properties.
^css
🧑‍💻 Circle
Leonel Ngoya introduces Circle, an open-source project management template inspired by Linear. Built with Next.js and shadcn/ui, it helps track issues, projects, and teams.
^{next-js / template / typescript / ui-components}
💬 prompt-kit
Customizable components for building AI interfaces, including features like prompt inputs and messaging elements.
^{ui-components}
🧠 My experiments with WASM and OpenGL
Uddeshya experiments with WASM and OpenGL, tackling performance, rendering challenges, and debugging in an attempt to render 1M spheres at 60 FPS.
^{glsl / performance / tutorial / wasm / webgl}
^{From our sponsor}
Learn AI in 5 minutes a day
What’s the secret to staying ahead of the curve in the world of AI? Information. Luckily, you can join 1,000,000+ early adopters reading The Rundown AI — the free newsletter that makes you smarter on AI with just a 5-minute read per day.
Sign up to start learning.
🔄 View Transitions Applied: Dealing with the Snapshot Containing Block
Bramus explores View Transitions, highlighting coordinate space issues and solutions for smoother animations in web development.
^{css / tutorial}
🔙 Why we ditched Next.js and never looked back
Northflank discusses their switch from Next.js to a custom SSR solution, leading to faster load times, improved SEO, and better control over their tech stack.
^{article / next-js}
🔑 In Defense of Text Labels
Christopher Butler makes the case for the importance of text labels in UX design, highlighting how they improve clarity and reduce cognitive load compared to relying solely on icons.
^{accessibility / article}
🖋️ User-Interface Elements: Glossary
This glossary provides quick definitions for key user-interface elements and controls commonly used in UX research and design.
^{ux / web-design}
📊 Hyper-personalization: a practical UX guide
The article discusses hyper-personalization in UX design, focusing on its evolution, key components, and the role of data in creating tailored, engaging user experiences.
^{article / ux}
🎮 three-pinata
Dan Greenheck announces the official release of Three Piñata, an open-source Three.js library for slicing, smashing, and exploding 3D meshes in real time. Check it out on GitHub here and npm here.
^{3d / three-js}
📱 Chrome on Android edge-to-edge migration guide
Bramus explains Chrome 135's new edge-to-edge behavior on Android, detailing how websites can adapt for full-screen display and handle safe area insets.
^{tutorial / web-design}
🔲 Is the button focusable?
Manuel Matuzović tests different HTML and CSS methods to hide a button, exploring which remain focusable and exposing potential accessibility issues.
^{accessibility / article / css}
🧑‍💻 Scroll Buddy
A fun little experiment adds an animated stick figure that walks along the scrollbar as users scroll, with plans for more characters like a skateboarder or climber.
^{css / javascript}
Got something you’d like to share? Just reply to this email and let us know!
Codrops is proudly sponsored by KeyCDN, the high performance content delivery network that has been built for the future.

Powered by beehiiv

The Collective #901

Codrops Publication — Mon, 03 Mar 2025 15:59:00 +0000

Codrops is proudly hosted by Liquid Web—trusted for nearly a decade for performance, reliability, and scalability.
Olá, frontend friends! 👋
Here’s a fresh roundup of the latest frontend news, links, and resources to inspire and inform you. Whether you're looking for new ideas or just something interesting, we hope you'll discover something exciting in this edition!
Happy exploring! 💙
^{From our sponsor}
Start learning AI in 2025
Keeping up with AI is hard – we get it!
That’s why over 1M professionals read Superhuman AI to stay ahead.
Get daily AI news, tools, and tutorials
Learn new AI skills you can use at work in 3 mins a day
Become 10X more productive
Sign up and start mastering AI
📚 What is TypeScript? An overview for JavaScript programmers
Dr. Axel Rauschmayer gives an overview of TypeScript for JavaScript developers, covering its syntax, execution, transpilation, and integration with modern tools.
^{javascript / tutorial / typescript}
🕹️ Three.js Tamagotchi Challenge
The Tamagotchi Challenge is complete with 34 creative submissions! Explore interactive demos, vote for your favorites, and see results on March 7.
^three-js
🖌️ ShaderGPT™
ShaderGPT™ is an AI experiment that generates GLSL shaders from text prompts. Built with Vercel AI SDK, it turns descriptions into real-time visuals. More details here.
^{ai / generative-art / glsl / tool / webgl}
⚡ Particles morphing
Pavel Mazhuga experiments with Three.js TSL, using compute shaders and curl noise to morph particles into shapes. Source here.
^{three-js / tsl / webgpu}
🖥️ In praise of off-screen menus
Jason Bradberry challenges the conventional wisdom that visible menus are always best, arguing that off-screen menus can enhance focus, aesthetics, and user experience in the right context.
^{opinion / web-design}
💡 Distributed Systems Programming Has Stalled
Shadaj Laddad examines the stagnation in distributed systems programming, arguing for a native model that improves control, fault tolerance, and scalability.
^{ai / opinion / software-engineering}
🎨 GLSL tricks for tweet shaders
Xor shares compact GLSL shader tricks: fluid dynamics with sine waves, layered effects, and polar-log coordinates for natural visuals.
^{glsl / math}
⚙️ How Core Git Developers Configure Git
Scott Chacon explores Git config settings that even core Git developers tweak, highlighting key changes that improve usability, efficiency, and defaults.
^{article / git}
🌐 upfetch
A lightweight, type-safe fetch client builder with schema validation, automatic parsing, and smart defaults for simpler API requests.
^{api / javascript}
🎨 Why I Like Designing in the Browser
Tyler Sticka on designing in the browser with HTML/CSS for real-time feedback, fluid layouts, and modern CSS—while still valuing design tools.
^{opinion / web-design}
📹 Building a “shoutout” component in plain HTML/CSS/JavaScript
Christian Heilmann creates a 'shoutout' overlay in plain HTML, CSS, and JS to mark key moments in videos for easier post-production editing.
^{css / javascript / tutorial}
📏 Better Anchor Positioning with position-area
James Stuckey Weber explores position-area, a powerful shorthand for CSS Anchor Positioning that simplifies placement while preventing overflow issues.
^{css / tutorial}
📱 The web on mobile (a response)
A response to Jeremy’s critique: mobile web UX issues aren’t just on developers—business pressures and browser limits worsen the experience.
^{opinion / web-design}
🔄 Clean Code vs. Philosophy of Software Design: Two Masters Debate
In their Sept 2024-Feb 2025 discussions, Martin and Ousterhout debate method length, comments, and TDD, revealing opposing views on code design.
^{discussion / software-engineering}
^{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 1,000,000+ professionals read The Rundown AI – the free newsletter that keeps you updated on the latest AI news and teaches you how to use it in just 5 minutes a day.
Sign up to start learning.
📢 It’s still worth blogging in the age of AI
Giles Thomas argues blogging retains value for learning, portfolio-building, and occasional connections, even as AI tools increasingly mediate content discovery.
^{ai / opinion}
💭 Claude 3.7 Sonnet and Claude Code
Anthropic introduces Claude 3.7 Sonnet, a hybrid reasoning model for rapid or deep thinking, along with Claude Code, an AI-powered agentic coding tool.
^{ai / software-engineering / tool}
🌊 And the river runs
Frank Reitberger’s third WebGPU experiment uses TSL and Three.js to create a real-time water simulation with shaders and procedural rendering.
^{tsl / webgpu}
🦗 Hexapod Simulator
An interactive 3D hexapod simulation using Three.js for visualization, inverse kinematics for movement, and smooth spline-based animations.
^{3d / three-js}
🔍 Solved by StyleObserver: Element.matchContainer()
Martin Winkler's match-container polyfill brings Element.matchContainer() to JavaScript, enabling real-time detection of Container Query changes using StyleObserver.
^{article / css / javascript}
🔨 This page is under construction
A passionate call from Sophie Koonin to reclaim the web’s creativity—build personal sites, embrace individuality, and break free from corporate platforms.
^{creativity / opinion}
💡 Lessons from an AI-assisted site migration
Tom Bennet shares lessons from migrating Tom’s Carnivores to Astro, where AI streamlined repetitive tasks but struggled with complex coding challenges.
^{ai / article / astro}
Got something you’d like to share? Just reply to this email and let us know!
Codrops is proudly sponsored by KeyCDN, the high performance content delivery network that has been built for the future.

Powered by beehiiv

The Collective #900

Codrops Publication — Mon, 24 Feb 2025 13:01:00 +0000

Codrops is proudly hosted by Liquid Web—trusted for nearly a decade for performance, reliability, and scalability.
Olá, frontend friends! 👋
Wow, can you believe this is our 900th Collective? 🎉 We’re excited to share this milestone with you!
As always, we’ve curated a fresh roundup of the latest frontend news, links, and resources to inspire and inform you. Whether you're looking for new ideas or just something interesting, we hope you'll discover something exciting in this edition!
Happy exploring and here’s to many more! 💙
^{From our sponsor}
Start learning AI in 2025
Keeping up with AI is hard – we get it!
That’s why over 1M professionals read Superhuman AI to stay ahead.
Get daily AI news, tools, and tutorials
Learn new AI skills you can use at work in 3 mins a day
Become 10X more productive
Sign up and start mastering AI
🇻🇳 Vietnamese Graphic Design
A growing archive of Vietnamese graphic design, aiming to document and celebrate its history despite limited accessible resources.
^{graphic-design / resource-directory}
🎮 Running Pong in 240 Browser Tabs
Nolen Royalty hacks Pong into 240 browser tabs, syncing movement across favicons and canvases while solving throttling and tab communication challenges.
^{game-development / javascript}
📝 An Emoji Naming Convention
Adam Argyle proposes using emojis in CSS naming for clarity but questions its practicality for readability and accessibility.
^{css / emoji}
⚙️ Liquid Metal by Paper
Liquid Metal is an open-source tool by Paper that lets you transform your logo into a liquid metal effect, inspired by Apple's design.
^webgl
🎥 Record
Addy Osmani launches Record, a free, open-source browser-based screen recorder with camera support, teleprompter, and MP4 export—no installs needed!
^{javascript / software-engineering / tool}
📉 The World’s Largest Search Doesn’t Want You to Search
Ted Gioia argues that Google has shifted from being a true search engine to prioritizing AI content, user retention, and ad revenue at the expense of search quality and trust.
^{ai / opinion}
🤖 Mastra
A TypeScript AI framework with agents, RAG, workflows, and integrations, enabling fast AI app development with LLM model routing.
^{ai / framework / typescript}
🛠️ How To Use Chrome’s Developer Tools
Matt Zeunert provides a comprehensive guide to Chrome DevTools, covering essential and advanced debugging features for web developers.
^{article / chrome-devtools / performance}
🔠 Reimagining Fluid Typography
Miriam Suzanne challenges conventional fluid typography, exploring better ways to respect user preferences without relying on pixel-based assumptions.
^{article / css / typography}
^{From our sponsor}
There’s a reason 400,000 professionals read this daily.
Join The AI Report, trusted by 400,000+ professionals at Google, Microsoft, and OpenAI. Get daily insights, tools, and strategies to master practical AI skills that drive results.
Sign up now for free and work smarter, not harder.
👗 Prada
MisterPrada's Three.js demo transforms a logo image into interactive particle-based geometry, featuring DOF effects with Simplex Noise.
^{three-js / typography / webgl}
🧭 Navigating the web platform
Patrick Brosset offers a concise cheatsheet for web developers on tracking new web platform features, browser updates, and ways to influence future developments.
^{reference / web-standards}
📐 Faux Containers in CSS Grids
Tyler Sticka explores "faux containers" in CSS Grid, showing how to create flexible layouts that break free from traditional boxy designs.
^{css / tutorial}
🏎️ Otherlife Labs
Amelie Maia unveils Otherlife Labs, a hub for experimental web design, debuting with a high-fidelity WebGL virtual car showroom.
^webgl
🔄 CSS Space Toggles
Jim Nielsen Explores CSS Space Toggles as a Solution to Light-Dark() Limitations for More Dynamic Theming.
^{css / tutorial}
➗ XOR
Deep dive into XOR in logic, computing, and mathematics, covering properties, applications in cryptography, graphics, algorithms, and its role in game theory and algebra.
^{math / tutorial}
🧺 My Washing Machine Refreshed My Thinking on Software Effort Estimation
Chris Horsley compares a frustrating washing machine setup to software estimation, highlighting "unknown unknowns" that derail even routine tasks.
^{opinion / software-engineering}
🌍 CSS @function + CSS if() = 🤯
Bramus explores CSS Custom Functions (@function) and the new CSS if() feature in Chrome Canary, showing how they enable advanced, flexible styling.
^{css / tutorial}
💰 The Generative AI Con
Edward Zitron argues that generative AI is an overhyped con, fueled by inflated user metrics, media complicity, and corporate greed, with no real breakthrough or profitability in sight.
^{ai / opinion}
🔤 The hardest working font in Manhattan
Marcin Wichary uncovers the history and cultural impact of the Gorton font, from its industrial origins to its quiet ubiquity in Manhattan, blending history, design, and personal discovery.
^{article / typography}
👩‍💻 New Junior Developers Can’t Actually Code
A critique of AI in coding, arguing junior developers rely on tools like Copilot without understanding fundamentals.
^{ai / opinion / software-engineering}
🧑‍💻 Learning web extensions
Chen Hui Jing explores the fundamentals of web extension development, covering manifest files, content scripts, background scripts, and key browser APIs.
^{article / css / javascript}
📦 How to start a React Project [2025]
Robin Wieruch compares Vite, Next.js, and Astro for React projects, weighing performance, flexibility, and rendering techniques to suit different needs.
^{article / astro / next-js / react}
📏 Aspect Ratio Changes With CSS View Transitions
Jim Nielsen encounters a subtle CSS view transition bug and finds a one-line fix in Jake Archibald’s guide, gaining deeper insights into the feature.
^{article / css / view-transitions}
🔎 Rethinking Find-in-Page Accessibility: Making Hidden Text Work for Everyone
Schepp explores how the hidden="until-found" attribute can improve find-in-page accessibility, making hidden text searchable and enhancing UX for assistive tech users.
^{accessibility / article}
📐 trot
Robin Rendle explores switching from web dev to iOS, missing DevTools, loving SwiftUI animations, and rediscovering the joy of making without constraints.
^{ios / opinion / productivity / software-engineering / web-vs-native}
🎨 uchū
uchū is a color palette designed for internet lovers, using the OKLCH color space for precise, vibrant colors—crafted by NetOperator Wibby.
^{color-theory / css / tool}
🧮 “A calculator app? Anyone could make that.”
Hans-J. Boehm tackled the impossible: making a calculator that always gives correct answers. His brilliant approach powers Android’s superior math.
^{article / math / software-engineering}
🧘‍♂️ Finding Flow: Escaping Digital Distractions Through Deep Work and Slow Living
A thoughtful reflection on focus, deep work, and digital minimalism, blending personal experience with insights from books and productivity methods.
^{opinion / productivity / work-life-balance}
Got something you’d like to share? Just reply to this email and let us know!
Codrops is proudly sponsored by KeyCDN, the high performance content delivery network that has been built for the future.

Powered by beehiiv

The Collective #899

Codrops Publication — Mon, 17 Feb 2025 14:45:00 +0000

Codrops is proudly hosted by Liquid Web—trusted for nearly a decade for performance, reliability, and scalability.
Olá, frontend friends! 👋
Here’s a fresh digest of our latest Collective news!
We’ve gathered some of the most interesting links and resources from the past week to inspire and inform you. We hope you discover something new and exciting!
Happy exploring! 💙
^{From our sponsor}
You’ll love Workflow. And your clients will love you
Share your designs, from wireframe to prototype to the final live website. No signups for clients to leave text or video comments. It’s built to get you better feedback.
Start using Workflow today
🎶 StringTune
StringTune is a modular JS library for smooth web effects like parallax, cursor interactions & animations, using a simple, attribute-based approach.
^{animation / javascript / library}
🤖 smolmodels
Smolmodels is an open-source Python library for creating machine learning models using natural language and minimal code.
^ai
🔍 Evaluating overlay-adjacent accessibility products
The article critiques overlay-adjacent accessibility products, highlighting their flaws, ethical concerns, AI reliance, and business models while advocating for built-in browser and OS accessibility features.
^{accessibility / article}
🐞 Firefox + custom elements + iframes bug
A known Firefox bug causes custom elements to lose their prototype when moved to an iframe. This post explains why it happens and provides a fix using customElements.get() to restore the element’s prototype.
^{article / firefox / javascript}
⚡ Fast & Smooth Third-Party Web Fonts
Scott Jehl shares a faster way to load third-party web fonts asynchronously while keeping text hidden for up to 3s, improving page speed and UX.
^{performance / tutorial / typography}
💣 Smuggling arbitrary data through an emoji
Paul Butler explores encoding data in Unicode variation selectors, hiding arbitrary bytes within emojis and text. A clever but abusable Unicode trick.
^{article / hacking / security}
📂 How to add a directory to your PATH
Julia Evans explains how to add a directory to your PATH across different shells, covering gotchas, debugging, and best practices for bash, zsh, and fish.
^{terminal / tutorial}
^{From our sponsor}
Unlock the full potential of your workday with cutting-edge AI strategies and actionable insights, empowering you to achieve unparalleled excellence in the future of work. Download the free guide today!
🌟 Astro 5.3
Astro 5.3 boosts performance with faster page rendering—SSR up to 4x faster. Plus, easier session storage setup and improved Netlify bundling.
^astro
🎀 Ribbon
A WebGPU-powered physics demo featuring a simulated ribbon using Rapier for physics and Three.js for rendering. Made by Christophe Choffel.
^{physics / three-js / webgpu}
🎉 Smuggling arbitrary data through an emoji
Paul Butler shows how Unicode variation selectors can be used to hide data inside a single emoji, with possible applications in watermarking and bypassing content filters.
^unicode
👁️ Style-observer: JS to observe CSS property changes, for reals
A robust JavaScript library to detect CSS property changes, supporting custom and standard properties with browser bug workarounds.
^{css / javascript}
🔄 Marquee
A Marquee component built on the Web Animations API for smooth, customizable scrolling, offering real-time control over speed, direction, and playback.
^{animation / react / ui-components}
✂️ CSS text-box-trim
Adam Argyle introduces CSS text-box-trim in Chrome 133, allowing developers to trim space above and below text for better alignment.
^css
^{From our sponsor}
This isn’t traditional business news
Welcome to Morning Brew—the free newsletter designed to keep you in the know on the business news impacting your career, company, and life—in a way you didn’t know you needed.
Note: this isn’t traditional business news. Morning Brew’s approach cuts through the noise and bore of classic business media, opting for short writeups, witty jokes, and above all—presenting the facts.
Save time, actually enjoy business news, and join over 4 million professionals reading daily.
Check it out
💭 Modern-Day Oracles or Bullshit Machines?
A series of lessons on LLMs, exploring their potential to simplify tasks, their risks of spreading false information, and how to navigate both.
^{ai / tutorial}
⚠️ We are destroying software
Modern software is collapsing under complexity, fragile dependencies, rushed development, and neglect of documentation, killing the joy of coding.
^{opinion / software-engineering}
📱 Less Precious
Naz Hamid explores the pitfalls of social media, urging creators to move beyond the algorithm-driven trap and invest in their own spaces for genuine self-expression.
^{article / social-media}
🚀 NGT Threlte Spaceship
Chau Tran ports a stunning spaceship demo from Threlte to Angular using Angular Three. Explore the project on GitHub
^{angular / three-js}
Codrops is proudly sponsored by KeyCDN, the high performance content delivery network that has been built for the future.

Powered by beehiiv

The Collective #898

Codrops Publication — Mon, 10 Feb 2025 15:00:00 +0000

Olá, frontend friends! 👋
Here’s a fresh digest of our latest Collective news!
We’ve gathered some of the most interesting links and resources from the past week to inspire and inform you. We hope you discover something new and exciting!
Happy exploring! 💙
^{From our sponsor}
Get Booked on 3.8 Million Podcasts Automatically
Stop wasting time – 2025 is going by fast. If you finally want to be a regular podcast guest in your industry, PodPitch.com will make it happen. Even the beehiiv team uses it!
Imagine snapping your fingers & getting booked on the exact podcasts your customers are already listening to…
With PodPitch.com, it takes 60 secs to start emailing tons of podcast hosts to pitch YOU as the perfect next guest.
Sync your email address
Load in your brand info
Click "go"
Now, you've just automated thousands of personalized emails pitching YOU as the PERFECT next podcast guest. Sit back and relax as you watch the emails send out from your email address.
Big brands like Feastables, Jack Links, and hundreds more are already using PodPitch.com instead of expensive PR agencies.
PodPitch.com is so confident in their tech that they'll give you a FREE Starbucks gift card if PodPitch.com isn't the most impressive 20 minute demo you've ever seen.
Ready to make 2025 your year?
Get your FREE personalized demo by clicking here now!
🔮 CSS Custom Functions are coming … and they are going to be a game changer!
Bramus shares how CSS Custom Functions, now prototyped in Chrome, will enable dynamic, parameterized styles. Test it in Canary!
^{article / css}
📜 CSS scroll-state()
Chrome 133 adds scroll-state() queries to CSS, enabling style changes for sticky, snapped, and scrollable elements without JavaScript.
^{article / css}
🚀 The End of Programming as We Know It
Tim O’Reilly explores how AI will transform programming, creating new roles and skills, rather than replacing software developers.
^{ai / article / software-engineering}
🧩 vite-plugin-tsl-operator
Simplify Three.js TSL Node code with vite-plugin-tsl-operator, enabling math operators for cleaner, more readable shaders.
^{three-js / tsl}
⚡ View Transitions Applied: More performant ::view-transition-group(*) animations
Learn how to optimize ::view-transition-group(*) animations for better performance by running them on the compositor, using custom FLIP keyframes when dimensions remain unchanged.
^{css / tutorial}
📚 Beej’s Guide to Git
Master Git with Beej's Guide! Available in multiple formats with syntax highlighting and open-source access.
^{git / github / tutorial}
🎮 PlayCanvas React
A lightweight library for building 3D apps in React. It supports physics, pointer events, and a built-in scripting API. Read more on their blog.
^{3d / physics / react}
👽 Shader Programming with Rick and Morty
Learn GPU shader programming with GLSL by animating Rick from Rick and Morty—240 lines of code, no libraries, fully interactive examples!
^{glsl / tutorial}
💧 Simulating water over terrain
Simulating water over terrain using the virtual pipes method. Covers fluid flow, grid-based models, and practical game development applications.
^{fluid / game-development / tutorial}
🔲 CSS Voxel Editor
A CSS-powered voxel editor for building 3D models with HTML cuboids. Create and customize shapes right in your browser!
^{3d / css / tool}
^{From our sponsor}
Build Future-Ready Skills with The AI Engineer Path
Think you already understand AI? Building applications powered by generative AI is a whole new frontier—and it’s quickly becoming an essential skill for 2025. Step into The AI Engineer Path, a practical course for web developers ready to build real-world AI-powered apps. No complex research—just hands-on projects that position you for one of the most in-demand roles of the next decade. Check it out
🖼️ Flatlogic Open-Sources 28 Premium Web & Mobile Templates After 12 Years
Flatlogic open-sourced 28 premium web & mobile templates after 12 years in business. Grab the code here
^{react / template / vue-js}
🌐 httptap
A lightweight Linux tool that lets you view HTTP and HTTPS requests made by any program without needing root access or system changes, using network namespaces and TUN devices for traffic interception.
^{networking / tool}
⚙️ Error Message Usability
This article explains Jakob Nielsen's ninth usability heuristic on helping users recognize, diagnose, and recover from errors.
^{article / usability}
💻 A WebAssembly compiler that fits in a tweet
This article breaks down a 192-byte JavaScript WebAssembly compiler, offering a step-by-step guide to understanding both compact code tricks and WebAssembly internals.
^wasm
⚡ Don’t animate height!
Jim Fisher reveals how a simple CSS animation can quietly drain your CPU and GPU, and shares practical tips on identifying and optimizing performance-hungry animations using browser dev tools.
^{article / css / performance}
☁️ Geospatial Clouds: Shota Matsuda’s WIP Volumetric Cloud System
Shota Matsuda unveils a WIP ray-marched volumetric cloud system with interactive controls, still in development and awaiting further tuning.
^three-js
🌍 Ruby on Rails on WebAssembly, the full-stack in-browser journey
Vladimir Dementyev explores running a full-stack Ruby on Rails application entirely in the browser using WebAssembly.
^{ruby-on-rails / tutorial / wasm}
🌬️ Opera Air
A new browser designed to promote mindfulness and mental well-being... Take a “deep breath” before you start doomscrolling ;)
^browser
🎥 How to gif (2025 edition)
This article explores modern GIF alternatives, their performance, and evolving browser support.
^{article / gif / image-processing / performance}
💻 Syntax Highlighting with Prism.js and markdown-it
Aleksandr Hovhannisyan explains how to use Prism.js with markdown-it for syntax highlighting, adding line numbers, file names & copy buttons.
^{javascript / markdown / tutorial}
🔲 fluid-triangle
An interactive fluid simulation rendered in ASCII—featuring device motion support, custom obstacle interactions, and dynamic character mapping for unique visuals. Source code here.
^{animation / ascii}
^{From our sponsor}
Learn AI in 5 minutes a day
What’s the secret to staying ahead of the curve in the world of AI? Information. Luckily, you can join 1,000,000+ early adopters reading The Rundown AI — the free newsletter that makes you smarter on AI with just a 5-minute read per day.
Sign up to start learning.
⚡ Fusion
Aaron Francis introduces Fusion, a new way to write PHP inside Vue & React components in Laravel, enabling seamless backend-frontend sync.
^{javascript / laravel / php / react / vue-js}
🏠 How to create a room portfolio with Three.js and Blender
Andrew Woan's beginner-friendly tutorial on creating a 3D room portfolio with Three.js and Blender. Video here.
^{blender / three-js}
💡 Post-Processing Shaders as a Creative Medium
A deep dive into post-processing shaders—Maxime breaks down techniques for dynamic pixel effects, illusions, and creative rendering.
^{article / ascii / glsl / three-js / webgl}
📢 How to Use ARIA Alert Effectively
Florian Schroiff explores ARIA alerts, guiding developers on best practices to ensure accessible, screen reader-friendly web notifications.
^{accessibility / article}
📦 gltf-type-toolkit
Thorsten Seyschab’s gltf-type-toolkit auto-generates TypeScript types for glTF models, ensuring type safety, efficient bundling, and seamless Three.js integration.
^{three-js / webgl}
🤖 Codename Goose
Goose is an open-source AI agent that automates coding tasks locally, running any LLM for execution, testing, and debugging.
^{ai / tool}
💻 Monospace (ASCII art generator)
Mike Bespalov’s ASCII Converter—Instantly turn any image into ASCII art. A technical yet functional tool, with plans for a cleaner UI in the future.
^{ascii / tool}
⚰️ Death of the Design Engineer
Sahil Lavingia argues AI is making design engineers obsolete, as top designers and engineers now use AI to bridge skill gaps and specialize.
^{ai / discussion}
⚙️ There are a lot of ways to break up long tasks in JavaScript
Alex MacArthur explores various methods to break up long, resource-intensive tasks in JavaScript, improving UX by ensuring responsiveness through different event loop techniques.
^{article / javascript / performance}
🔄 Infinite Vortex Art Gallery
Jean Mazouni’s Infinite Vortex Art Gallery—An interactive 3D experience using Three.js Instanced Mesh API + shaders. Scroll to navigate the endless spiral.
^{3d / three-js}
Codrops is proudly sponsored by KeyCDN, the high performance content delivery network that has been built for the future.

Powered by beehiiv

The Collective: An Important Update

Codrops Publication — Thu, 06 Feb 2025 15:02:00 +0000

Dear reader,
We have an important update regarding our newsletter!
Starting with our next issue, we will stop sending emails from info@tympanus.net.
To ensure you continue receiving the digests without interruptions, please add thecollectivenewsletter@mail.beehiiv.com to your contacts or whitelist it in your email settings. This will be our new sender email address.
No worries, you can still reach us via the previous email address!
We appreciate your support and look forward to sharing more inspiring content with you!

Powered by beehiiv