Keak: The first AI agent that continuously improves your website.
Boost your conversion rates by up to 137% with Keak’s AI-driven optimization. Tested, trusted, and proven to deliver results.
The Collective
Hand-picked interesting links for
web creators, updated daily.
Prefer a weekly digest?
The best new app for newsletter reading
Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox. Add your newsletters in seconds and liberate your inbox today!
CSS attr() gets an upgrade
Chrome 133 introduces an upgraded CSS attr() that supports more properties, parses data types like <color>, and aids in advanced features like View Transitions.
My website has been gaslighting you
Dave Rupert shares how he updates his site’s color scheme daily with CSS variables, hue rotation, and math, blending aesthetics, P3 vibrancy, and accessibility.
ASCII Hover effect with shader and post-processing — PART 1
Alexandre Pujol creates an ASCII hover effect with Three.js, React-Three-Fiber, shaders, and GLSL, merging retro ASCII style with modern interactivity.
Cursor spawning particles
Pavel Mazhuga showcases a cursor spawning particle effect using Three.js and TSL. Explore the live demo here and find the source code here.
6 CSS Snippets Every Front-End Developer Should Know In 2025
Explore six essential CSS techniques for 2025: springy animations, typed properties, page transitions, dialog/popover effects, animations, and adaptive gradient text.
Creating Static SVGs from GeoJSON
Michelle Barker shows how to convert GeoJSON to static SVGs using D3.js, detailing data fetching, scaling, and flipping paths for lightweight map creation.
2024 year in review
Shinya Fujino highlights Astro's 2024 growth, features, and future updates like sessions and responsive images.
Use Mouse Position to Change Scroll Speed
A dynamic scrolling effect using GSAP, where the scroll speed adjusts based on the mouse's distance from the center using timeScale() and mapRange(). Watch the full lesson video here.
Move elements around the DOM while preserving their state with moveBefore
Bramus showcases Node.prototype.moveBefore in Chrome 133, enabling DOM element moves while preserving state like focus and animations.
CSS scroll-state()
Adam Argyle introduces scroll-state() in Chrome 133, a new CSS feature that enables style changes based on scroll conditions like sticky, snapped, or scrollable elements.
New View Transition Stuff
Jake Archibald and Surma discuss new features and future plans for the View Transition API, including cross-document transitions, scoped animations, and browser-specific updates.
Top Pens of 2024 on CodePen
A collection of the most hearted Pens from 2024.
Making the this keyword less annoying
Dave Rupert explores ways to make the repetitive use of this in JavaScript less visually distracting, from dimming the color in VS Code to experimenting with custom glyphs in a ligature-enabled font.
Revealed: React’s experimental animations API
Matt Perry introduces React's experimental <ViewTransition /> API, enabling seamless and customizable animations between views using the browser's View Transition API.
Introducing Werk
Simon Ask Ulsnes introduces Werk, a lightweight and portable build system inspired by make and just, designed for cross-platform compatibility and ease of use.
PixelGL
PixelGL is an interactive tool for experimenting with image deformation effects, allowing users to tweak settings through an intuitive interface.
R3F WebGPU Post Processing
Anderson Mancini presents a demo integrating React Three Fiber, WebGPU, and post-processing effects, featuring a metallic Royal Naboo starship with screen space reflections.
Simple Blog Example in Flask
Raymond Camden demonstrates building a simple blog viewer using Flask, showcasing basic routes, templates, and data handling with Python.
Lab 77
A showcase of Sébastien Lempens' 3D projects, experiments & skills.
Fluted glass
A demo by Maxime Heckel showcasing a fluted glass post-processing effect with dynamic lighting.
What’s involved in getting a “modern” terminal setup?
Julia Evans outlines key components of a "modern" terminal setup, offering practical tips for shell, terminal emulator, and editor configurations while addressing common challenges.
Updates to the customizable select API
Una Kravets shares updates on the customizable select API, detailing recent changes to pseudo-elements, styles, and functionality, with demos showcasing its potential for flexible and interactive web design.
Accessibility essentials every front-end developer should know
A blog post covering essential accessibility practices for front-end developers, focusing on techniques to create inclusive and user-friendly web experiences.
ECMAScript feature: import attributes
An overview of the ECMAScript 2025 "Import Attributes" feature, enabling imports of non-JavaScript artifacts like JSON and CSS, with syntax and use cases.
Matt Kane’s Retro HyperCard-Inspired Website
Matt Kane's revamped website adopts a retro "HyperCard on Mac System 6" aesthetic, built with Astro and inspired by 1990s hypermedia design; the source is available on GitHub.
Open source all the way down: Upgrading our developer documentation
Cloudflare details its migration of developer documentation to the Astro framework, enhancing scalability, user experience, and collaboration, while reinforcing its commitment to open source principles.
Shaping Ligatures in Monospace Fonts
Josh Leeb-du Toit discusses the complexities of text rendering in monospace fonts, particularly the handling of ligatures and the discovery of "ligature spacer" glyphs.
Factorio Blueprint Visualizer
A tool to visualize Factorio blueprints as SVGs, enabling customization, pen plotting, and integration into creative workflows.
Tetris in a PDF
This showcases a Tetris game built entirely within a PDF, using annotations and JavaScript in modern PDF engines like PDFium and PDF.js. More info here. Find the source code here.
Interactive CSS Color Mix() helper function
A demo showcasing CSS mix() for creating and comparing smooth color-mixed gradients with standard ones.
NeuralSVG: An Implicit Representation for Text-to-Vector Generation
NeuralSVG is a neural network tool that generates editable vector graphics from text prompts, enabling dynamic control over color, aspect ratio, and layered structure.
View Transitions Snippets: Keeping track of the old and new positions of a transitioned element
Bramus explains how to track old and new element positions during view transitions using JavaScript's getBoundingClientRect, addressing browser quirks and keyframe issues.
CSS Wish List 2025
Eric Meyer’s 2025 CSS Wish List highlights features like custom media queries, masonry layout, and expanded attribute support to enhance web development.
A simple masonry-like composable layout
Andy Bell outlines a flexible, composable approach to creating a masonry-like layout using CSS, leveraging progressive enhancement and fallback strategies while awaiting full browser support for native masonry.
Browser adaptation
An exploration of using the browser as a dynamic storytelling medium, showcasing interactivity, personalization, and a prototype adaptation of The Lord of the Rings.
AdminForth
A free and open-source Node.js and Vue.js framework for rapidly building customizable admin panels with Tailwind, offering features like CRUD generation, Vue components for customization, plugins, and modern back-office tools.
21st.dev
An open-source community registry for React UI components, allowing developers to publish and install minimal Tailwind and Radix UI components using streamlined commands and a variety of modern tools like Supabase, Clerk, and Cloudflare.
Shape Mapper
An open-source projection mapping library built on the Processing framework, supporting features like multi-projector setups, face masking, and multi-object mapping.
2024 JavaScript Rising Stars
JavaScript Rising Stars 2024 highlights top GitHub projects such as shadcn/ui, Excalidraw, and htmx, along with trends in frameworks, tooling, state management, and AI-powered development tools.
InstancedMesh2: Skeletal Animation for Efficient Instance Rendering
InstancedMesh2 now supports skeletal animation, enabling efficient rendering of thousands of animated instances. A demo showcasing 3,000 instances in action is available here. Perfect for performance-focused Three.js and WebGL projects.
Double-keyed Caching: How Browser Cache Partitioning Changed the Web
Addy Osmani highlights cache partitioning's shift towards privacy by isolating cache entries by site and URL, increasing security but raising performance costs, with strategies like domain consolidation and self-hosting to adapt.
Synthesizing Music from JSON
Dominic Szablewski's pl_synth is a compact C and JavaScript synthesizer with a tracker for composing efficient, self-contained music files, optimized for small games and compact outputs.
