Uncode Creative and WooCommerce Theme
Uncode is a pixel-perfect creative WordPress Theme for creating stunning websites.
The Collective
Hand-picked interesting links for
web creators, updated daily.
Prefer a weekly digest?
Build a Product Card with Tailwind CSS
Discover intermediate and advanced styling techniques using Tailwind CSS and craft a fully responsive, professional product card for a web store in this Scrimba course. Codrops readers get 20% off Pro plans!
Cam Hicks
New dev build for Cam Hicks by Paulo Ferreira Jorge and Neutral Studio! Showcasing storytelling through photography, moving images, creative direction, and consulting.
Xorma
A synchronous, reactive, in-memory database built on MobX, ideal for complex frontends like video editors, design tools, and games, with features for reactivity, relationships, undo/redo, and persistence. GitHub repo.
AI is Creating a Generation of Illiterate Programmers
AI is making developers more dependent, eroding skills like debugging and comprehension. The author shares personal insights and suggests "No-AI Days" to regain mastery.
Pure CSS Mixin for Displaying Values of Custom Properties
Roman Komarov introduces a native CSS mixin for previewing custom property values, simplifying debugging and enhancing CSS workflows by displaying calculated values via pseudo-elements.
Container Queries Unleashed
Josh Comeau explores the power of container queries in CSS, offering a new way to create responsive layouts that adjust based on container size, not just viewport.
Open Operator
A proof-of-concept platform by Browserbase that integrates Browserbase, Stagehand, and OpenAI technologies to help users build their own web agents for automating browser-based tasks.
Drops
A real-time fluid simulation using WebAssembly and SPH, showcasing caustics, refractive effects, and interactive parameters in browsers for stunning visuals.
cs16.css
A CSS library that brings a nostalgic gaming interface from Counter Strike 1.6, easily integrated into your web projects for a retro feel.
JavaScript Temporal is coming
JavaScript's new Temporal object simplifies date and time handling, offering better support for time zones, calendars, durations, and precise calculations.
Styling a meter element with CSS and SVG
Mike Aparicio demonstrates how to style a <meter> element using CSS and SVG, creating a flexible rating component with custom icons and scalable options.
Lacoste Customization Tool by Merci-Michel
Lacoste's new real-time polo customizer in Three.js offers endless color, pattern, and detail options, allowing you to design your ideal polo shirt online.
Surface-Stable Fractal Dithering: A Novel 3D Rendering Technique
An innovative 3D rendering technique by Rune Skovbo Johansen that creates adaptive dot patterns on surfaces, maintaining visual consistency across different perspectives. Explanation here.
Creation
A quantum mechanics student shares how he built an open-source laptop from scratch with a 4K AMOLED display, mechanical keyboard, custom powertrain, and modular design.
Single HTML Element Star Rating Component
A tutorial on creating a customizable star-rating component using HTML, CSS, and minimal JavaScript, exploring innovative ways to build interactive web elements.
Dropbox Brand Guidelines
Dropbox launches an innovative brand guidelines site with interactive animations, powered by Rive and Webflow, redefining modern web design.
Tailwind CSS v4.0
A major update focused on faster performance, modern CSS features, and simplified setup.
New capabilities for attr()
Una Kravets highlights Chrome 133’s enhanced CSS attr() function, adding type casting and versatile styling uses.
7 New JavaScript Set Methods for Comparing Arrays
Wes Bos highlights 7 new JavaScript set methods, now available in all browsers and Node.js, perfect for comparing arrays or sets of data.
Moving on from React, a Year Later
Kelly Sutton reviews Scholarly's move from React to a server-rendered stack, praising better speed, testability, and simpler maintenance.
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.
