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!
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!
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.
How I program with LLMs
David Crawshaw details a year with LLMs, highlighting their impact on programming productivity, workflows, and testing, and introduces sketch.dev, a Go-focused LLM-integrated coding platform.
A 2-ply minimax chess engine in 84,688 regular expressions
Nicholas Carlini's Regex Chess uses 84,688 regular expressions to create a quirky and fascinating chess engine, blending humor with creative programming.
Christmas 2 Challenge
Explore creative festive 3D projects and vote for your favorites—votes are anonymous, you can select multiple entries (including your own), and the final results will be revealed once voting ends.
Stimulation Clicker
A minimalist and humorous online clicker game where players increase their "stimulation" count by clicking and unlocking upgrades, satirizing the addictive mechanics of clicker games.
:hover > :not(:hover), sorry not sorry
This article explores "focus by demotion" in CSS, showcasing creative techniques like fading and scaling non-hovered elements, advanced hover effects using :has() and custom properties, and how these approaches reduce visual clutter and enhance user focus.
DOOM: The Gallery Experience
DOOM: The Gallery Experience transforms the classic DOOM E1M1 level into a satirical virtual art gallery where players explore reimagined spaces and indulge in fine art and virtual wine.
Mokubara
An easy way to create impressive mockups for projects. It offers free 3D, animated, and realistic mockups to enhance design presentations.
CSS Flexbox Playground
The CSS Flexbox Playground is an interactive tool that lets you experiment with various Flexbox properties, see real-time changes to layouts, and copy the generated CSS for your projects.
Languine
Languine is an AI-powered, open-source command-line tool for automating localization, offering support for multiple file formats, intelligent translation features, and seamless integration into developer workflows.
World’s First MIDI Shellcode
This blog post documents an ambitious reverse engineering project on a Yamaha PSR-E433 synthesizer, culminating in the creation of "MIDI shellcode" to display the iconic "Bad Apple" video on the synth's LCD by leveraging custom assembly, memory manipulation, and MIDI protocol.
Balancing Text In CSS
This article by Ahmad Shadeed takes a deep dive into text balancing in CSS, covering features like text-wrap: balance and text-wrap: pretty to help designers and developers create cleaner, more readable layouts with practical examples and use cases.
8-bit Sine Scroller
This tutorial demonstrates how to recreate the classic 8-bit sine scroller effect using about 30 lines of JavaScript, using a bitmap font and HTML5 canvas for a nostalgic, animated text display.
Photoroom
An AI-powered photo editing tool designed to create professional-quality images by automatically removing backgrounds and enhancing visuals with ease.
API Parrot
A debugging tool for testing and simulating API calls, providing a simple interface to mimic API responses and behavior during development.
Orbit by Mozilla
Orbit lets you summarize emails, docs, articles, and videos across the web — without sacrificing your privacy.
Ghostty
Ghostty is a fast, feature-rich, and native terminal emulator designed for macOS and Linux, built with a focus on balancing speed, native UI integration, and advanced features for modern terminal use.
GitIngest
A tool that enables seamless integration of Git repositories into AI workflows, making it easier to analyze, summarize, and extract insights from codebases.
Next.js Book Inventory
A book inventory app template built with Next.js, Drizzle, and PostgreSQL to search, filter and paginate a large number of books.
Building a Design System as a Solo designer in a startup
A detailed reflection on the challenges, strategies, and successes of creating and scaling a design system at Raise.
Reweb
Reweb is a visual builder that enables fast, customizable web development with exportable Next.js and Tailwind code.
Browser Use
A tool for connecting AI agents to browsers, enabling automated browsing, scraping, and page interactions using LLM models.
View Transitions Snippets: Getting all Animations linked to a View Transition
A code snippet that explains how to retrieve and manipulate all animations associated with the View Transition API.
Context Chips in Survey Design: “Okay, but how does it feel?”
Lea Verou's article introduces "Context Chips," an innovative survey UI element designed to capture user sentiment alongside responses.
Some Things About Keyframes
Ryan Mulligan's article delves into nuances of CSS keyframe animations, covering topics like duplicate keyframe properties, the significance of keyframe rule order, and applying custom easing functions within keyframes to enhance animation control.
Bitspace
Bitspace is an open-source creative computing environment that allows users to experiment with GLSL shaders and interactive inputs in a flexible, sandbox-like prototype. By Emil Widlund.
Oniguruma-To-ES: Translate Oniguruma regexes to native JavaScript
Steven Levithan introduces Oniguruma-To-ES, an open-source project that translates Oniguruma regular expressions into native JavaScript RegExp objects.
Refraction and glass effects with #threejs TSL
Yuri Artiukh explores creating refraction and glass effects using custom TSL shaders in Three.js during this livestream.
Office File to Markdown
MarkItDown is a browser-based tool that converts various file formats—including Microsoft Office documents, PDFs, images, and audio files—into Markdown, ensuring privacy by processing files entirely on your device.
Scroll-Driven Multi-Colored Line Indicator
This free lesson from Creative Coding Club demonstrates how to create multi-colored line indicators using GSAP's ScrollTrigger, providing a practical example of scroll-driven animations.
