Beach Point
Idol has launched a new website for Beach Point Capital Management, enhancing their online presence. The project was a collaboration with Jesper Landberg, Bryan James, and Gil Huybrecht.
The Collective
The Collective has paused, but the inspiration continues. Subscribe to our monthly newsletter for fresh updates.
CSS nesting: use with caution
Andy Bell shares a cautious approach to native CSS nesting, warning against its potential for confusion, especially for junior developers, and advocating for simplicity.
What’s OAuth2 Anyway?
A deep dive into OAuth2, explaining its security model, authorization flows, and real-world use cases, with insights on best practices and emerging standards.
Particular Drift
A WebGL/JavaScript tool that turns images into dynamic particle animations, using edge detection and Perlin noise-based flow fields. Find the code here.
Shipixen
Website, blog, or product boilerplates. One-click deploy to Vercel. SEO-ready MDX blog with Next.js 14, TypeScript, TailwindCSS, and Shadcn UI.
How to Set WebGL Shader Colors with CSS and JavaScript
This article guides readers through using CSS and JavaScript to dynamically control WebGL shader colors, ensuring real-time design updates like dark mode.
WOOZ Experience
Joël Mik has created an interactive 3D website for a Dutch sustainable clothing brand, blending R3F and Shopify API for an immersive shopping experience.
Tencent Hunyuan3D
An advanced 3D asset generation model offering high-resolution, textured 3D assets with diffusion-based models for shape and texture creation.
Dissolve Effect
Jatin Chopra showcases a dissolve effect created with shader and particles.
Display of an inline 3D model
Check out this interactive explainer for @Apple's HTMLModelElement proposal, aiming to display 3D models inline with privacy-preserving features. More details here: HTMLModelElement Proposal
A visual builder like no other
Build stunning websites effortlessly with Divi – the world's #1 premium WordPress theme and visual builder.
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.
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!
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.
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!
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.
