Editor's Pick
CSScape Room
A JavaScript-free web game, really worth a look and play.
If you're too lazy to figure out the safe combo:
1) blue, 2) green, 3) purple, 4) pink, 5) yellow.
Also take a look at Making an Escape Room with only HTML and CSS. The github repo is here.
CSS
CSScape Room
A JavaScript-free web game, really worth a look and play.
If you're too lazy to figure out the safe combo:
1) blue, 2) green, 3) purple, 4) pink, 5) yellow.
Also take a look at Making an Escape Room with only HTML and CSS. The github repo is here.
CSS Clicker
CSS Clicker is an idle game themed around making websites.
Your goal is to make your own website and level it up by buying all sorts of upgrades for your site in the pursuit of becoming the most famous website on the interwebs.
This game was written entirely in HTML/CSS and uses no javascript or server-side code. No, seriously, you can disable JavaScript in your browser and the game remains fully functional.
Warning: really annoying music, so you'll want to mute that.
CSS Bursts with Conic Gradients
You can make stripes with CSS gradients pretty easily. It’s that classic thing where you don’t fade a color from one to another, you just switch colors by having two colors share the same “color stop”.
It occurred to me that these hard-stops can work for conic-gradient() as well. I was literally trying to make a burst background and was pleasantly surprised when I tried this and it worked.
How to use CSS variables like a pro
Build four simple projects to learn how CSS variables can help you write reusable, elegant code and streamline the way you build websites.
CSS-only glitch effect
Let me show you how I created a CSS-only image glitch effect. The effect involves quite a bit of HTML and CSS but no JavaScript. I did use JavaScript to generate the HTML and CSS, but it is not used in the final version.
Cover Flow with Modern CSS: Scroll-Driven Animations in Action
Cover Flow – the iconic carousel of tilted album covers made famous by Apple in the late 2000s – remains a visually striking UI pattern. Originally seen in iTunes and Mac OS X Finder, Cover Flow let users flip through items as if browsing a tangible collection.
Today, we can recreate this effect on the web using only HTML and CSS, thanks to advancements like CSS scroll-driven animations.
Tweaking Text Level Styles, Reprised
An updated, opinionated guide to styling <mark>, <del>, <ins>, and <s> elements for modern browsers and screen readers.
Better typography with text-wrap pretty
Support for text-wrap: pretty just shipped in Safari Technology Preview, bringing an unprecedented level of polish to typography on the web. Let’s take a look at what the WebKit version of pretty does — it’s probably a lot more than you expect. Then, we’ll compare it to balance and the other text-wrap values to better understand when to use which one.
CSS Custom Properties vs. Sass Variables: A Pragmatic Guide
When to use CSS custom properties vs Sass variables in design systems: runtime theming vs compile-time constants, dynamic flexibility vs immutable foundations.
JavaScript
Understanding Hydration Errors by building a SSR React Project
If you’ve written React code in any server-rendered framework, you’ve almost certainly gotten a hydration error. These look like:
Text content does not match server-rendered HTML
or
Error: Hydration failed because the initial UI does not match what was rendered on the server
And after the first time you see this, you quickly realize you can just dismiss it and move on... kind of odd for an error message that’s so in-your-face (later on, we’ll see that you might not want to dismiss them entirely).
So, what is a hydration error? And when should you care about them vs ignore them?
Hiding elements that require JavaScript without JavaScript
If you want to make an element only appear when JavaScript is enabled, it’s a little less clear cut. There’s not an <onlyscript> tag, and the <script> tag has a very different meaning than the <noscript> tag.
Javascript Font Picker
An open source, free, versatile, flexible and lightweight Javascript Font Picker Component for System fonts, Google fonts and custom (woff/ttf) fonts. Features dynamic font loading, favourites, keyboard navigation, fuzzy search, advanced metrics filters, property sorting and much more. Available in multiple languages.
Some features that every JavaScript developer should know in 2025
JavaScript is constantly evolving and newer features are introduced. This oftentimes makes older coding practices outdated, and even less efficient. Bellow is a list of some important features (old and new) that most developers might be unaware of.
Advanced React in the Wild - Production Case Studies from Ambitious Web Projects (2022–2025)
This write-up dives into real-world case studies from engineering teams and products, highlighting their challenges, solutions, and results. We first explore individual case studies in detail — each illustrating advanced techniques in production React/Next.js apps — then distill overarching takeaways and best practices shaping the industry.
Top React Design Patterns dominating React Development lifecycle
The significance of React design patterns extends far beyond simple code organization. They represent the collective wisdom of the development community, distilled into practical, reusable solutions to common architectural challenges. These patterns serve as a blueprint for creating applications that can withstand the test of time, scale with growing user bases, and adapt to evolving business requirements.
UX
The State of UX in 2025
Things have been feeling differently for a while. That UX buzz, that peak we hit in the late 2010s, has faded. Historically, designers have always aimed to exert vast influence within their organizations, guiding the creative vision and making critical decisions that shape the product. That reality simply doesn’t feel palpable anymore when you look at the state of UX more broadly. UX is increasingly a byproduct of business objectives, not the driving force.
Thin Fonts Are a Usability Nightmare—And Finally, Designers Are Waking Up
Thin fonts may look sleek, but they’re a usability nightmare—hard to read, inaccessible, and especially frustrating on mobile. Thankfully, some brands and websites are finally ditching them in favor of thicker, more readable typography that actually puts users first.
Miscellaneous
Knowing where your engineer salary comes from
With the recent flurry of US federal firings, many people are pointing and laughing at the Trump-voting federal employees who are just now finding out that they’ve voted for themselves to be let go. How could you have this poor a mental model of what your job even is? Well. In my opinion, many software engineers are operating under a mental model that’s just as bad, and are often doing the equivalent of voting for the person promising to fire them.
Built At Lightspeed - 4000+ Themes, Templates & UI Kits
Directory of open source and premium themes, templates, starters & UI kits for the Jamstack.
You probably don't need to bundle the resources for your website
Many people think that bundling improves the performance because it reduces the number of the requests, and the fewer requests are done, the faster is the page load. Please don't confuse bundling with minification. You can and probably need to minify individual files. Bundling is about combining multiple files into one file. Here I will list reasons why bundling oftentimes causes more harm than good.