Accessibility
Link vs Button: Choosing the Right Element for the Right Job
While the Web Content Accessibility Guidelines (WCAG) do not explicitly prohibit misusing link or button semantics if functionality and accessibility outcomes are preserved, best practice — supported by W3C and Authoring Practices — is to use the correct semantic element for each purpose. Semantics convey meaning — not just to developers, but also to assistive technologies like screen readers.
Here are the main distinguishing factors between the two:
- Links (
<a>elements) take users to different locations — either to another page or a different section of the same page. Example: Navigating to a “Contact Us” page or jumping to a specific heading on the current page. - Buttons (
<button>elements) activate an action or functionality, typically on the same page. Example: Expanding a hidden menu, submitting a form, toggling a theme, or opening a modal dialog.
While there are gray areas, such as a control that loads new content dynamically without a full page reload, the distinction usually comes down to navigation vs. action.
CSS
CSS Bar Chart
Turning a plain table into a bar chart using nothing but CSS. It's a tiny trick, but a great reminder of how much raw power the web offers.
How to Create 3D Images in CSS with the Layered Pattern
How to use the “layered pattern” technique in CSS — typically used for text — to create 3D-looking images. By stacking multiple identical <img> elements in slightly offset layers and manipulating their position on the Z-axis, brightness, and saturation, you get the illusion of depth.
Building a multi stage timetable with modern CSS using grid, subgrid, round(), and mod()
Timetables are one of those components that look simple but contain a surprising amount of layout logic. For a project in 2026 I needed a version that supports multiple stages, adapts to the tallest session, and stays aligned across the entire timeline — all built in CSS.
Brand New Layouts with CSS Subgrid
Subgrid allows us to extend a grid template down through the DOM tree, so that deeply-nested elements can participate in the same grid layout. At first glance, I thought this would be a helpful convenience, but it turns out that it’s <em>so much more.</em> Subgrid unlocks exciting new layout possibilities, stuff we couldn’t do until now.
Responsive Letter Spacing
A “responsive” letter-spacing rule in CSS: as font size goes up, letter-spacing gradually tightens; as font size goes down, spacing remains more open for readability.
Offers a simple example using CSS’s clamp() and calc() so that spacing adjusts automatically based on each element’s font size.
Shuffling a CSS grid using custom properties
How to shuffle or randomize the visual order of a CSS grid — without heavy DOM manipulation — by leveraging CSS custom properties combined with the CSS order property.
Keyframes Tokens: Standardizing Animation Across Projects
Animations can be one of the most joyful parts of building interfaces, but without structure, they can also become one of the biggest sources of frustration. By consolidating and standardizing keyframes, you take something that is usually messy and hard to manage and turn it into a clear, predictable system.
On Inheriting and Sharing Property Values
There are many ways to share properties, but what would it look like to inherit and use any parent property value on a child?
Direction-Aware Arrow Shape using corner-shape
We can use the new corner-shape to draw different CSS Shapes. And since it relies on border-radius, we can use the logical properties to create a direction-aware arrow that adjusts based on both the direction and the writing mode.
Direction-Aware CSS Shapes
A few lines of code to make any CSS shape adjust according to the direction of the text.
HTML
A complete guide to the HTML number input
There are a few anti <input type="number" /> articles around the web but they’re mostly out of date. Why the GOV.UK Design System team changed the input type for numbers, published in 2020, relates all the reasons that team stopped using <input type="number" />. The post listed several accessibility-related bugs, all of which have since been fixed. Today, there are few reasons to avoid <input type="number"/>.
JavaScript
A comprehensive guide to error handling In Node.js
ode.js error handling can be quite straightforward once you are familiar with the patterns used to create, deliver, and handle potential errors. This article aims to introduce you to these patterns so that you can make your programs more robust by ensuring that you’ll discover potential errors and handle them appropriately before deploying your application to production.
Managing Side Effects: A JavaScript Effect System in 30 Lines or Less
This article argues that mixing business logic (validation) with side-effects (database calls, HTTP requests, logging, etc.) harms testability and maintainability.
Instead of having functions immediately execute side-effects, it proposes writing those functions so they return a description of what needs to be done (like a “recipe”), rather than doing it right away.
The approach constructs a tiny “effect system” in about 30 lines: effects are represented as objects of types like Success, Failure, or Command (where Command holds a function to be run later).
The result is a clear separation between your pure business logic (“what to do”) and the impure side-effects (“how/when to do it”), which improves testability and makes code easier to reason about.
You're doing JavaScript testing wrong
Testing sucks because you try to test implementation details. This results in you writing tests to pass your code. That’s not useful, because…
- Your code might not be doing something it should.
- Your code might be doing something it shouldn’t.
- Refactors require you to rewrite tests.
- You’re less likely to catch critical errors.
Instead, you should…
- Write an empty test, with one comment for each external behavior your code should display.
- Write the code to test each comment below it.
- Then write the actual code to make it so.
is-online: Check if the internet connection is up
Works in Node.js and the browser (with a bundler).
In the browser, there is already navigator.onLine, but it's useless as it only tells you if there's a local connection, and not whether the internet is accessible.
UX
Tooltip Components Should Not Exist
A look at why tooltip components are often the wrong abstraction in design systems, leading to accessibility issues, misuse, and inconsistent user experiences.
In the sea of sameness
Finding a soul in this world seems to be a rare quality these days, especially in software-internet-land.
- Every app looks the same.
- Every website looks the same.
- Every process looks the same.
The rise of Tailwind, design system templates, and other dev frameworks has made it easier than ever to achieve visually appealing designs, often without the need for a designer’s hands. Out-of-the-box components, elegant icons, and ready-to-apply CSS are now within reach for whoever desires.
This abundance has made programming life easier while speeding up the design process, but it also appears to dull creative thinking. Alongside trends that come and go, sameness has become the default state. The spark of the past has faded in many aspects, far beyond the digital sphere: quirky tech brand logos have turned banal, social networks media wear the same interface, and web design is.. well, web design.