The Collective #891

In partnership with

Olá, frontend friends! 👋

Happy Thursday, hope you are having an amazing week! We’ve got a packed edition so let’s get reading!

Some highlights: Jake Lazaroff’s deep dive into Isomorphic Web Components offers practical tips for bringing server-side rendering to web components, while Ahmad Shadeed’s CSS guide on modern feature images showcases how container queries and :has() can simplify responsive design.

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

The Rundown is the most trusted AI newsletter in the world, with 800,000+ readers and exclusive interviews with AI leaders like Mark Zuckerberg.

Their expert research team spends all day learning what’s new in AI and talking with industry experts, then distills the most important developments into one free email every morning.

Plus, complete the quiz after signing up and they’ll recommend the best AI tools, guides, and courses – tailored to your needs.

Books and courses by Michal Malewicz have been used by over 50,000 students from all over the world. Universities like Stanford and others also supplement their curriculum with these materials. It’s one of the best ways to level up your design skills even if you’re not a designer.

Use discount code CODROPS for 30% off on any book or course until January 1st 2025!

A breakdown of server-side rendering for web components, from templates to isomorphic solutions. By Jake Lazaroff.

Ryan Mulligan shares a mesmerizing hover effect with shimmering pixels as a Web Component. Includes customization options.

Ahmad Shadeed explores modern CSS techniques, including container queries and :has(), to create dynamic, responsive feature images tailored to varying layouts and contexts.

A comprehensive report analyzing the state of the web across 21 chapters with real data and insights from web experts, covering sustainability, user experience, publishing, and more.

The State of React Native survey explores the tools, trends, and preferences of React Native developers, offering insights into widely used solutions and emerging industry patterns.

Steve Yegge emphasizes the transformative impact of chat-oriented programming (CHOP) on software development, urging developers to embrace AI coding assistants to remain competitive in an era where traditional code-writing is being replaced by AI-driven workflows.

💌 A letter to open-source maintainers

A heartfelt guide for open-source maintainers on thriving, stepping back, and staying happy.

Visualize and 3D print your GitHub contributions with the Skyline CLI tool.

An in-depth analysis of Tailwind CSS 4.0’s new features, highlighting improvements like native cascade layers and simplified configuration while critiquing potential pitfalls such as descendant variants and excessive reliance on rem units.

Ryan Geyer’s exploration of creating scroll-driven image sequence animations with (almost) pure CSS introduces a spritesheet-based approach that minimizes reliance on JavaScript.

Rafael Gonzaga and Lizz Parody delve into benchmarks and updates across Node.js versions 20-22, providing insights into the platform’s performance gains and regressions in 2024.

📂 Nobody Gets Fired for Picking JSON, but Maybe They Should?

Exploring JSON’s popularity and flaws, this article delves into its design issues, interoperability pitfalls, and the challenges of “human readability” that can lead to data corruption, advocating for better alternatives like Protobuf.

Explore a curated list of open-source language models, tools, and resources for NLP development.

Build animated sites faster with Vue, TypeScript, TailwindCSS, and 20+ themeable UI components.

Readymag is celebrating innovative web design with prizes for outstanding creativity and storytelling.

An epic recap dashboard of Stripe systems and stats during Black Friday and Cyber Monday 2024.

Termo is a simple terminal emulator that can be used to create a terminal-like interface on your website.

(From our blog) Jean Mazouni explains how to create a dynamic morphing effect using JavaScript and Canvas2D API, featuring seamless image transitions.

(From our blog) Some fresh hand-picked motion designs and animation concepts for your inspiration.

…the Xbox was almost called “11-X”? Before settling on its iconic name, Microsoft considered several alternatives for its first gaming console, including “Windows Entertainment Project” (WEP), “Midway,” and even “DirectX Box.” The team eventually convinced executives to go with the bold and memorable “Xbox,” a nod to its DirectX gaming technology.