Accessibility
You probably shouldn’t be annotating focus order
There’s a subtle thing at play here, and it mostly revolves around the notion that adding something demonstrates effort and value. For focus order, you’ll actually want to suppress that urge and just let things be.
When it comes to web accessibility, the order interactive elements receive should be a logical order. For the vast majority of situations, this means matching reading order.
Not Every Form Field Needs to Be in a Fieldset
A <fieldset> groups related form controls under a shared name, provided by a <legend>. That's it. That's the whole job.
The <legend> becomes part of the accessible name for every control inside the group, giving each field context it couldn't convey on its own.
That context is the entire value proposition of a fieldset. It's also the problem when it's redundant.
A <fieldset> without a <legend> provides no accessible group name. If you're not providing a <legend>, you don't need the <fieldset>.
Do graphs and charts need to be accessible?
For screen reader users, a simple chart with the data in the alt text might be okay, but more often than not we probably want to present the data in tabular format, which is easier to navigate, compare, and understand. Going one step further by accompanying the chart with a table is an even more robust approach as it also allows sighted users to choose how best to absorb the information.
So do charts and graphs need to be accessible? Yes and no. The chart image itself doesn’t always need to be exposed to assistive technologies, but the information it communicates must be accessible.
Multi-level navigation: the challenge of identifying parent sections for screen readers
Navigating the nuances of digital accessibility requires more than just following a checklist; it requires balancing technical standards with real-world user experience. Choosing between an unusual ARIA implementation—which might suffer from inconsistent assistive technology support or confuse screen reader users—and a less semantic "patch" like a hidden span is a complex architectural decision. There is rarely a "one-size-fits-all" answer, as the best approach often depends on the specific context of your site's navigation and its users.
Keyboard Accessibility: The Clearest Signal of Digital Maturity
Few things reveal the true state of a product’s accessibility posture as quickly as unplugging a mouse. If a user cannot navigate, interact, and complete meaningful tasks using only a keyboard, the product has a structural problem, not a cosmetic one. Keyboard accessibility is not an edge case. It is the baseline from which all other accessibility considerations extend.
The range of people who depend on keyboard access is broader than many teams assume. This includes individuals with motor impairments or repetitive strain injuries that make mouse use painful or impossible. It includes users recovering from temporary injuries, people with neurological conditions affecting fine motor control, and a significant population of power users who simply operate faster without leaving the keyboard. Designing for keyboard access is designing for everyone.
CSS
How to add icons to external links with CSS
Using [target="_blank"] forces links to open in a new tab or window, but this is considered an anti-pattern for accessibility reasons. It can be confusing, and it robs users or choice and agency.
An icon lets them make an informed decision.
Rather than manually adding a link to every external link, I figured out how to target all links that point to an external page and add an icon with CSS instead.
The Fundamentals and Dev Experience of CSS @function
CSS has introduced functions so authors can encapsulate and reuse property behaviors across their style sheets without duplicating the code or polluting the DOM with single-use intermediate --_variables.
There are a lot of really cool and useful things we can do with functions. In this fundamentals article, we will go over several CSS gotchas that form the bumpers on our bowling lane for the strike we’ll hit in the follow-up, and get a good sense of what they are and what they aren’t.
Navigating the age-old problem of checkmarks in UI with progressive enhancement
According to the specification, ::checkmark is supposed to support styling of checkmarks present in checkboxes, radios, and option elements, but again, at the time of writing, it’s only supported for <option> elements in the <select> dropdown.
This means that ::checkmark , as simple, powerful, and useful as it is, is still very limited, and that’s a problem. So, do we rely on the traditional solutions we used to use in the past to style checkmarks? Are they better? In this article, we will be exploring how the problem of customised checkmarks was solved in the past and compare those solutions with the modern ::checkmark solution, providing recommendations as we go.
CSS-native parallax effect
Parallax effects have a long history, and while there are countless ways and libraries to achieve them, a new CSS-native way was recently made possible with CSS Scroll-driven animation timelines.
The usual recipe was a scroll event listener in JavaScript, recalculating positions on every frame and nudging an element up and down.
Scroll-driven animations handle all of that with CSS. Handling parallax animations with CSS has a few advantages: performance should be better as it runs it off the main thread, but my favorite part is the simplicity with which the whole thing becomes a small block of declarative styles, that can be applied with a single utility class.
Our CSS isn't opinionated enough
Why styling on semantics and roles could make accessibility harder to skip.
@uindow/css - The Smarter CSS Selector Generator
Generate one - or many - unique CSS selectors for any DOM element. Clean, human-readable output. A configurable penalty model that ranks results from most semantic to most specific. Built for performance, designed to stay out of your way.
Works everywhere JavaScript runs: Node.js, browsers, and any environment with a DOM.
Obscuring Text with @counter-style
The @counter-style at-property in CSS helps us shift from browser defaults to user-defined web styling for list markers. Like instead of the bullet-points of unordered lists and numbers of ordered lists, you can define any marker glyphs you want. But it’s uses extend beyond that, and we’re going to use it for some trickery in this article.
In-N-Out Animations: Dialogs (Part 1/3)
I’d like to kick off a small series here focused on animating elements in and out of view.
First, we’re going to focus on an element that goes from display: none; to display: block;. This is of particular interest because, well, it used to be quite difficult to do. But more than that: it’s often highly desirable. Movement can help a user understand what’s going when a new element appears or disappears.
JavaScript
TypeScript Tips Everyone Should Know
A curated collection of practical TypeScript patterns that improve safety, readability, maintainability, and developer experience.
Most of these are small individually. Together, they dramatically change how TypeScript code feels to work in.
Intentionally blocking rendering with JavaScript
You nearly always want to put <script> tags in the <head> and mark them as non-blocking using either async or defer. However, there's an interesting use-case for actually wanting to block paint.
Announcing Angular v22
- Signal Forms are now stable: Angular's new Signals-based forms API graduates from preview, offering a more reactive and ergonomic alternative to traditional Reactive Forms.
- OnPush becomes the default change detection strategy for new components, improving performance out of the box. Existing applications are automatically migrated to preserve behavior.
- Resource APIs are stable (
resource,httpResource,rxResource), making data fetching and async state management more declarative and signal-friendly. - New developer ergonomics include features such as
@Service,injectAsync(), anddebounced()signals, reducing boilerplate and simplifying common patterns. - Performance and modernization continue with stronger zoneless support, improved SSR/hydration, TypeScript updates, and removal of legacy APIs like
ComponentFactoryResolver. - AI integration gets more attention, including MCP/WebMCP tooling and broader support for AI-assisted development workflows.
Angular v22 is a consolidation release that makes the framework's "signal-first, zoneless, high-performance" vision the default rather than an opt-in feature set.
Everything you need to know about Sourcemaps
Sourcemaps unlock some observability benefits but might expose your codebase. Check out how they work, and how to protect yourself.
lucide-motion-vue - The largest animated icon library for Vue 3
523 Lucide icons across 815 named animation variants — drop-in and tree-shakeable, with a live gallery, variant switcher, and copy-paste snippets.
Stop Blaming React: The Real Performance Problems in Your UI
Modern React is remarkably efficient. The real performance issues usually come from application architecture, unnecessary rendering, excessive JavaScript execution, oversized bundles, and expensive operations happening at exactly the wrong time.
Many teams reach for useMemo() and useCallback() as soon as they notice performance issues. Unfortunately, this often treats symptoms instead of causes.
The reality is much simpler:
- Performance optimization in React usually comes down to reducing unnecessary work.
- Less rendering.
- Less JavaScript.
- Less DOM.
- Less network activity.
- Less blocking work on the main thread.
Let’s walk through the techniques that consistently produce measurable improvements in real-world applications.
Miscellaneous
Animation Vocabulary
A glossary of common animation patterns taught in the course. Use these names to describe what you want when prompting an AI.
Fontastic Space — Find Mathematically Optimal Font Pairings
Compare Google Fonts with anatomy overlays, metrics & pairing scores.