A dithering shader demo using React Three Fiber, with bloom, grayscale, pixelation, and live controls.
Radar
Links to things we’re checking into.
Obra Icons
A simple, consistent set of icons, perfect for user interfaces.
Holographic Masks
Experimenting with some CSS holographic effects, inspired by this guide from Robb Owen: Holograms, light-leaks and how to build CSS-only shaders. Unfortunately, this effect relies on background-attachment: fixed; Which doesn't work as expected on iOS...
Get This and Other Things In Our Weekly Email Newsletter
How To Use Chrome’s Developer Tools
This article provides an introduction to Chrome DevTools and then takes a look at some more advanced features.
tinygradient
Easily generate color gradients with an unlimited number of color stops and steps.
State of React 2024
Instead, React 19 focused on taking a lot of our pain away, from making forwardRef obsolete, to diffs for hydration errors, to a new compiler that makes our code more performant with minimal extra work on our part.
Flexbox bulider
Build 'em yay
Chuck Norris red
Setting the colour of text on a webpage is usually a simple affair involving whipping it out the good ol' CSS color property. But this is HTMHell, dammit. None of that wishy-washy CSS nonsense here. No siree. We use HTML as the good lord intended and shalln't stray...
Hero Patterns
A collection of repeatable SVG background patterns for you to use on your web projects.
postspark.app
Take slick screenshots and product image grabs.
Every HTML element
There are over a hundred HTML elements. This page uses all of them. You're looking at <p></p> right now.
Optimizing Images for Web Performance
Images make websites look great, but they’re also the biggest performance bottleneck. They add huge file sizes, delay Largest Contentful Paint (LCP), and can even mess with Cumulative Layout Shift (CLS) if they aren’t handled properly. And while developers are quick...
How to Retain Customers, When AI is Pushing Them to Competitors
You don’t just lose customers to price—you lose them to hesitation.
Build for the Web, Build on the Web, Build with the Web
If you’re going to go all-in on a framework or, heaven forbid, an SPA, give the long term some serious consideration, and make sure you do a really, really good job.
litur
A color picker for the real world. Find, collect and organize all the colors around you.A designer’s best-kept secret, a developer's best friend.
Understanding Accessibility.
Accessibility should be at the core of web design. Colour, typography, animations and images need to be applied according to certain rules so that information can be digested easily. Designers need to understand how people with (and without) disabilities...
untools
Thinking tools and frameworks to help you solve problems, make decisions and understand systems.
Figcomponents.com
We've curated the best Figma components in one place. Discover, copy and paste UI components in Figma with the most efficient way to build designs. Get all the essentials for any design project in one place. From buttons to data visualizations, you'll find the perfect...
Logoipsum
117 free placeholder logos
Landing Pages Explained
The only collection of leading SaaS and creator landing pages with expert explanations of the ideas used to increase conversion
Website hero section library
Curated collection of beautiful website hero sections.
Extending the cursor
The cursor has transformed from a simple pointing device into a powerful tool for enhancing user interaction and providing contextual feedback. Software and games are raising the bar for what the cursor interface can do, demonstrating how thoughtful extensions of a...
Full-Bleed Layout with Modern CSS
I recently shared a trick on how to create a Full-bleed layout using a few lines of modern CSS code. If you are unfamiliar with such layout see the demo below. In this article we’ll dig deeper into the idea and explain things as we go.
Dark Mode and Accessibility: Finding the Right Balance
It didn’t take long for the “dark mode” to become a requirement for every user interface design. What started out as a design trend turned into a must-have feature for offering a comfortable user experience.
Should navigation bars be sticky or fixed?
Like most UX design decisions, choosing the best type of navigation isn’t a one-size-fits-all verdict. It depends on your digital product, target users, and UX goals.
Learn Shader Programming with Rick and Morty
This animation of Rick was made with 240 lines of code. No libraries, no images. I’m going to show you how to use GPU shaders and signed distance fields to make animations like it for videos, video games, or just for fun! I even built a live coding editor into the...
CSS text-box-trim
Take back space from above and below your text content; achieve optical balance.
Super Color Palette
Generate super awesome color palettes by shifting hue, saturation, lightness, and more!
Thoughts on Tailwind 4
The Tailwind CSS v4.0 beta was just released, and I wanted to share some thoughts on it. More specifically, I have some concerns that I have not seen covered elsewhere.
Design for Real Life – Eric Meyer and Sara Wachter-Boettcher
Join Sara Wachter-Boettcher and Eric Meyer as they turn examples from more than a dozen sites and services into a set of principles you can apply right now. Whether you're a designer, developer, content strategist, or anyone who creates user experiences, you'll gain...
The 10 Best Moments of UX (2024)
So I’ve picked 10 of the most popular filters, covering different flows, psychology, impacts and UI components.
Why I’m excited about text-box-trim as a designer
I’ve been excited by the potential of text-box-trim, text-edge and text-box for a while. They’re in draft status at the moment, but when more browser support is available, this capability will open up some exciting possibilities for improving typesetting in the...
Designing for clarity: How we restructured Intercom’s Information Architecture
Every product reaches a moment when its foundation begins to strain under the weight of growth.
Iconic
Free, “do wtf you want with” pixel-perfect icons.
Balancing Text In CSS
Balancing text in CSS helps make designs look cleaner and easier to read. Features like text-wrap: balance and text-wrap: pretty help us in fixing that. Thank you for reading!
Dropbox brand guidelines
A simple masonry-like composable layout
I’d say this is a solid approach to carry you until browsers finally make their mind up on the how and then actually implement this stuff for real.
6 CSS Snippets Every Front-End Developer Should Know In 2025
2025; I think every front-end developer should know how to enable page transitions, transition a <dialog>, popover, and <details>, animate light n' dark gradient text, type safe their CSS system, and add springy easing to animation.
:hover > :not(:hover), sorry not sorry
I don't see this technique enough: focus by demotion. Very often we create focus by promotion: hover to create a glow, focus rings, or even just making text bold.
More News & Articles
Why Some Clients Think They Know Design (And How to Keep the Project on Track)
Ever wonder why some clients over-explain or dodge your questions? Learn how to navigate unclear client communication and keep your design projects on track with practical, experience-based strategies.
Finding Fresh Design Inspiration
Seeking fresh web design inspiration? Explore these top sites that ignite creativity and keep you trend-savvy, while non-traditional sources open new creative pathways.
How to use Font Awesome, The Easy Way
Really quick tutorial and code snippets on using Font Awesome on a web page.