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

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 <select> elements using appearance: base-select, enabling rich content and styling via CSS.

^{accessibility / article / css / ui-components / web-standards}

🌐 Browse No More

A thoughtful critique of AI answer engines and how they're changing (and diminishing) the experience of browsing the web.

^{ai / opinion}

🖋️ Passing Data into SVG: Linked Parameters Workaround

An experimental workaround for passing data like colors from CSS into SVGs used as images, exploiting SVG sizing and modern CSS features.

^{article / css / svg}

Got something you’d like to share? Just reply to this email and let us know!