Accessibility
"Best practice" is just your opinion
My "best practice" and your "best practice" are just our own internal standards. It's our opinions, based on our own experiences, learnings and preferences. But, we can't have learned and experienced absolutely everything! So, whether one is better or worse relies entirely on the knowledge we have at the time, and the context of the problem we're trying to solve.
What is considered best practice today, might be considered archaic in 12 months time. If there's one thing we know for sure about technology, it's that it always moves on. And, when it does, it moves on fast.
A11y 101: 2.4.1 Bypass Blocks
You’ve most likely heard the term “skip link.” The standard take on the skip link is we include a visually-hidden link at the top of the page. When it receives focus, it becomes visible and when activated jumps you to the main content. While this is the primary use and function of this guideline, I’ve found it applies to other areas. Let’s look at the different reasons and methods.
CSS
What are OKLCH colors?
OKLCH is a newer color model that is designed to be perceptually uniform. This means that colors are much more accurate in terms of how humans perceive them and it makes working with them much easier.
OKLCH Color Picker, Generator and Converter
Convert, generate and explore OKLCH colors with oklch.fyi – a powerful tool to build unique and uniform color palettes. Preview on UI components, export CSS or Tailwind variables, and learn why OKLCH outperforms RGB and HSL.
Obsessing Over Smooth radial-gradient() Disc Edges
You may have come across this situation: you want to create a disc (oval) shape contained within your element’s boundaries, and you want it to have smooth edges. Not jagged; not blurry.
If you want to avoid using a pseudo-element or, even worse, children just for decorative purposes, then radial-gradient() seems to be the best solution. Especially in the case where you might need a bunch of such discs, more than the two pseudos available on an element.
Inline Style Exfiltration: leaking data with chained CSS conditionals
I discovered how to use CSS to steal attribute data without selectors and stylesheet imports. This means you can now exploit CSS injection via style attributes.
What does will-change in CSS actually do?
I've been using the will-change CSS property for a while now, but I realized I never understood exactly what it does. I knew it was some sort of performance optimization but that's pretty much it.
It's a hint to the browser, something along the lines of “hey, I’m about to animate these properties, please get ready.”
Browsers may respond by promoting the element to its own GPU compositing layer, pre‑allocating memory, or do nothing at all if they decide the hint isn’t worth it.
You’re loading fonts wrong (and it’s crippling your performance)
Fonts are one of the most visible, most powerful parts of the web. And yet: almost everyone gets them wrong.
If you’re serving anything but WOFF2 today, you’re doing it wrong. For almost every project, WOFF2 is all you need. Unless you have a specific business case (like IE11 on a locked-down enterprise intranet), serving older formats just makes every visitor pay a performance tax. If you absolutely must support a legacy browser, add WOFF as a conditional fallback – but don’t ship it to everyone.
Visualizing Responsive Typography
There are multiple tools that can help create a fluid font-size calculation for CSS – generally expressed as a clamp() function combining em (or rem) with vw (or vi) units. But the results are difficult to understand at a glance, so I wanted to visualize what’s going on, and how the various units interact.
Making Sense of CSS Length Units
For junior developers just starting with CSS, the vast array of available length units can feel overwhelming. This post offers a clear breakdown of the main categories - absolute units; relative units, which adapt better to different screen sizes and accessibility settings; viewport units and niche units.
You no longer need JavaScript
My goal with this article is to share my perspectives on the web, as well as introduce many aspects of modern HTML/CSS you may not be familiar with. I’m not trying to make you give up JavaScript, I’m just trying to show you everything that’s possible, leaving it up to you to pick what works best for whatever you’re working on.
I think there’s a lot most web developers don’t know about CSS.
And I think JS is often used where better alternatives exist.
So, let me show you what’s out there.
JavaScript
Understanding Promise.any(): when one success is enough
Learn how Promise.any() helps you handle multiple promises by resolving with the first success, perfect for fallback APIs and progressive features in JavaScript.
Who's Afraid of a Hard Page Load?
While I’m not going to settle the Single-Page Web Application (SPA) debate in a blog post, there is one claim about SPAs that routinely goes unchallenged, and it drives me nuts: that users prefer them because of the “modern,” responsive feel.
Ahead of Time Fetch for speeding up SPAs
Single page applications have a reputation for being slow. On the first load, they have to download static assets before they can start fetching data from the backend.
Let’s explore how to initiate backend requests before the static JavaScript assets execute so we can speed up rendering.
GeoAI for the modern JavaScript developer
Explore GeoAI.js capabilities with interactive examples. Run AI models for building detection, object detection, land cover classification, and more directly in your browser.
retire.js: scanner detecting the use of JavaScript libraries with known vulnerabilities.
There is a plethora of JavaScript libraries for use on the Web and in Node.JS apps out there. This greatly simplifies development,but we need to stay up-to-date on security fixes. "Using Components with Known Vulnerabilities" is now a part of the OWASP Top 10 list of security risks and insecure libraries can pose a huge risk to your Web app. The goal of Retire.js is to help you detect the use of JS-library versions with known vulnerabilities.
How to optimize your Next.js app with after()
When building apps with Next.js, optimization stops being just about code-splitting or lazy loading and starts becoming about making sure your server does only what’s necessary during a request, and defers everything else until after the response has been sent to the client. That’s where Next.js 15’s after() comes in.
Next.js' after() is a new API that lets you run logic after your route has finished rendering, without blocking the client.
The Next.js 15 Streaming Handbook — SSR, React Suspense, and Loading Skeleton
Next.js is currently one of the most popular and intelligent Web Frameworks out there. But many developers using Next.js often can’t fully utilise its superpowers simply because some of its advanced concepts are hard to understand.
In this handbook, you’ll dive into one such advanced concept in Next.js called Streaming. Technically, this is a feature from React.js, but when used correctly with Next.js, it can massively improve the User Experience of any web application.
The Angular Custom Profiling Track is now available
The Angular and Chrome teams have partnered to bring Angular-specific data and insights directly into the Chrome DevTools performance panel, creating a unified profiling experience. We’re excited to introduce the new custom track for Angular in Chrome DevTools.
Ship UI - a UI library for Angular
Ship UI is a UI library for Angular. It's built to have a minimal set of dependencies and use the cutting edge features of angular.
Ship UI are signal based and Zoneless compliant.
Miscellaneous
Hack to the Future - Frontend
So over the last few months at work, I've been conducting interviews to hire Frontend Developers for a number of new projects we have in the pipeline. It was only when looking at CV's that it struck me, a lot of these candidates weren't even born when I first started in my Web Development career! So I thought maybe developers getting into a Frontend Developer career today, may want to learn a bit about what it was like when I first started (late 90s).