Accessibility
Put aria-hidden=true on decorative SVGs
The title says it all: put aria-hidden="true" on decorative SVGs, or they'll be announced by some screen readers.
Most current screen readers ignore the SVG, but there are exceptions.
Accessible Footnotes with CSS
How to build fully accessible footnotes using only HTML and CSS, focusing on both usability and maintainability. It shows how CSS counters can automatically number footnote references, avoiding manual renumbering, while ARIA attributes like aria-describedby help screen readers understand the relationship between references and notes.
CSS
Un-Sass'ing My CSS: Colour Functions Without Sass
A practical guide to replacing Sass color functions like lighten(), darken(), and tint() with modern CSS using color-mix() and relative color syntax.
The Great CSS Expansion
CSS now does what Floating UI, GSAP ScrollTrigger, Framer Motion, and react-select used to require JavaScript for. Here is exactly how much that saves, why these libraries were painful beyond their size, and what the platform still hasn't figured out.
Beyond border-radius: What The CSS corner-shape Property Unlocks For Everyday UI
For years, developers have been hacking around the limitations of border-radius, using clip-path, SVG masks, and fragile workarounds just to get anything other than round corners. The new corner-shape property finally changes that, opening the door to beveled, scooped, and squircle corners.
Accessible Text Colour with the CSS contrast-color() Function
The CSS contrast-color() function lets the browser pick the most readable text colour for any background. Here is what it does, how it works, and why it matters for accessibility and the web.
Highlighting Footnotes
Explains how to make footnote navigation clearer by visually indicating which footnote a user has jumped to. Starting with the :target selector to highlight the active footnote, then refine the look with better spacing and decorative styling, and finally add a temporary fade-out animation so the highlight draws attention without lingering. The overall point is that small, purely CSS-based improvements can significantly enhance usability and accessibility when navigating footnotes.
More Easy Light-Dark Mode Switching: light-dark() is about to support images
Back in 2023, I wrote about the future of CSS color switching using the then-novel light-dark() function. It was a game-changer for colors, allowing us to ditch the repetitive @media (prefers-color-scheme: ...) blocks for simple property declarations.
But there was one glaring limitation: it only works for colors. If you wanted to swap out a background image, a mask, or a logo based on the user’s color scheme, you were stuck doing things the “old” way.
Well, I have good news. The spec has been updated, and light-dark() is being extended to support images.
On clip-path animations
The WorkCard detail panel is not a fade-in block. It is a circular reveal that grows out of the same point as the trigger button. That one decision makes the interaction feel connected instead of layered on top.
Here is how I built it.
Experimenting With Scroll-Driven corner-shape Animations
The new CSS corner-shape() property is mathematical, so it’s easily animated. Author Daniel Schwarz pokes at animating the property for interesting UI effects.
HTML
SVG favicons that respect theme preference
You can create a single SVG favicon that automatically adapts to light/dark mode using the CSS @media (prefers-color-scheme) query inside the SVG. Instead of swapping files, you embed styles directly in the SVG, changing colors based on the user’s theme preference.
This approach is simple and elegant, but browser support isn’t perfect at this time.
JavaScript
Web Flight Simulator: A browser-based arcade flight simulator using Three.js and CesiumJS, focused on fast-paced flight experience over real-world terrain
A high-performance, web-based flight simulator that bridges the gap between Three.js high-fidelity 3D modeling and CesiumJS global-scale geospatial data. Experience the thrill of piloting an F-15 fighter jet across a real-time, 3D replica of the Earth.
Play it here.
Two React Design Choices Developers Don’t Like—But Can’t Avoid
Developers have never been shy about disliking certain React APIs. They feel awkward, restrictive, or just plain counterintuitive. But the reality is that the two most complained‑about design choices in React weren’t arbitrary at all — they were early signs of deeper constraints that every UI model eventually runs into.
Gea — Lightweight Reactive UI Framework
A compile-time UI framework that turns ordinary classes and functions into surgical DOM updates. No virtual DOM. No hooks. No signals. Just your code — made reactive at build time.
The fastest compiled UI framework — ahead of Solid, Svelte, Vue, and React.
Qite.js - Frontend framework for people who hate React and love HTML
- No build step, no Virtual DOM, no npm, no mixing JavaScript with HTML.
- DOM-first, SSR-first, and fully usable with plain browser APIs.
- Small, self-sufficient, and powerful enough for serious apps.
If you want your UI to feel like structured HTML enhanced with clear, declarative behavior instead of a compiled abstraction layer, Qite.js is for you.
Modern frontend frameworks made a simple idea complicated: take some HTML, react to user input, update the page.
Instead of treating the DOM as the source of truth, they introduced virtual DOMs, render cycles, hydration layers, build pipelines, custom syntaxes and a huge dependency ecosystem. In many stacks, simply rendering a button now comes with transpilation, bundling, component re-execution and many layers that are not the browser.
Qite.js goes the opposite way.
Shadow DOM Focus Delegation: Getting delegatesFocus Right
Focus management in the shadow DOM is one of those things that is easy to get subtly wrong. You build a clean <my-button> wrapper around a native <button>, add a manual focus() override that pokes into the shadow root, ship it, and call it done. It works. But there is a cleaner way, and it has been sitting in the spec the whole time.
That cleaner way is delegatesFocus.
Miscellaneous
The Top Trait Companies Look For in a Technical Interview
The article’s main point is that the #1 trait companies look for in technical interviews is how you think—not what you know.
More specifically:
- Interviewers care most about your problem-solving process (how you break down problems, handle unknowns, and reason through solutions), not memorized answers.
- They’re evaluating whether they can understand your thinking and work with you, not whether you get the perfect solution.
- Communication is critical: explaining your approach clearly often matters as much as the code itself.