Accessibility
#ARTY Could Get You Sued
I can’t actually assert the ARTY overlay will result in a lawsuit, though there is a trend of overlays attracting lawsuits. Attorneys say overlays don’t protect from lawsuits, either. Regardless of the company making it, if you wonder if you should use an accessibility overlay, the answer is no. ARTY’s overlay just happens to be the subject of this post.
This post is, of course, my opinion. I provide evidence throughout to support that opinion. You may have a different opinion, in which case good for you.
Accessibility Support
Will your code work with assistive technologies?
Very similar to caniuse.com, but for accessibility.
CSS
CSS Layout Generator
A CSS Grid generator & CSS Flexbox generator. A tool for generating UI layout component code.
The CSS if() function: Conditional styling will never be the same
Explore how the if() function works, see practical examples, and compare it to existing CSS conditional techniques.
Tailwind CSS Grid: Complete Guide & Examples
Learn how to build responsive grid layouts with Tailwind CSS. Complete guide covering grid containers, columns, rows, spacing, and real-world examples.
CSS only counter component
Let's build a counter component using only CSS, using radio inputs and modern CSS selectors.
Building extensible frontend systems
Today, I want to talk about how to build frontend systems—design systems, UI libraries, and so on—that can be easily extended for use cases and situations you didn’t plan for.
Sequential animations with N elements
Using modern CSS, you can create a sequential animation that involves an unknown number of items with a simple code. No need for complex keyframes, delays, or magic numbers. A clever combination of thesibling-index()/sibling-count() functions and linear() will do the job.
HTML
Why Semantic HTML Still Matters
If you want to build for performance, accessibility, discoverability, or resilience, you must start with HTML that means something.
A Few Things About the Anchor Element’s href You Might Not Have Known
I’ve written previously about reloading a document using only HTML but that got me thinking: What are all the values you can put in an anchor tag’s href attribute?
HTML is Dead, Long Live HTML - Rethinking DOM from first principles
Browsers are in a very weird place. While WebAssembly has succeeded, even on the server, the client still feels largely the same as it did 10 years ago.
Enthusiasts will tell you that accessing native web APIs via WASM is a solved problem, with some minimal JS glue.
But the question not asked is why you would want to access the DOM. It's just the only option. So I'd like to explain why it really is time to send the DOM and its assorted APIs off to a farm somewhere, with some ideas on how.
I won't pretend to know everything about browsers. Nobody knows everything anymore, and that's the problem.
JavaScript
React Server Components: How We Got Here
How web app architecture evolved from full page reloads to React Server Components, and why each step in this journey mattered for developers and users.
Making Sense of the Performance Extensibility API
Google Chrome recently introduced the Performance Extensibility API, a means of putting your code front-and-centre in Chrome’s Performance panel. Their own documentation is somewhat dry and doesn’t really state the benefits or outcomes very clearly, so I spent a couple of hours looking into it and here are the key takeaways.
apexcharts.js: Interactive JavaScript Charts built on SVG
A modern JavaScript charting library that allows you to build interactive data visualizations with simple API and 100+ ready-to-use samples. Packed with the features that you expect, ApexCharts includes over a dozen chart types that deliver beautiful, responsive visualizations in your apps and dashboards.
Integrate easily with 3rd party frameworks via wrappers for Vue/React/Angular/Stencil.
How I Built CSS's light-dark() in TypeScript
This weekend I learned about CSS's light-dark() function, which automatically adapts colors to user preferences without JavaScript.
Naturally, I wondered if we can recreate this behavior in TypeScript.
The challenge was deceptively complex because I wanted a solution that could handle live updates while staying memory-safe.
In this article, I'll show you how I achieved the desired behavior in tokens that maintain string compatibility while responding to system changes automatically.
UX
Horizontal Scrolling Containers Are Not a Content Strategy
I should clarify that I am not talking about carousels. That said, because users often consider horizontal scrolling containers to be carousels, I will be talking about carousels.
Also, this post is written by a monolingual American. While I discuss localization issues, there’s no way I can get into all the nuances and challenges of recreating or translating one of these to a non-left-to-right language. This post also assumes a page that is in a left-to-right or right-to-left language.
Miscellaneous
PicoSSG - The anti-framework static site generator. No config. No nonsense. Just files in, files out
PicoSSG is a minimal static site generator built on the philosophy of simplicity and predictability. It processes your markdown, nunjucks templates, and static files into a clean, static website with minimal configuration.
What Developers Can Learn from the Guy Who Landed Multiple YC Jobs in a Tough Market
If you’ve been following tech news lately, you probably came across the wild story of Soham Parekh, the Indian developer who managed to hold, allegedly, at least five jobs simultaneously, many of them at Y Combinator-backed startups. And he did it while living in India.
While the revelation set up a doomscroll rumble, raised some eyebrows, and stirred up plenty of memes and virtue signaling alike, there’s a bigger takeaway here for anyone dealing with today’s competitive tech job market: How did he even land those jobs in the first place?
The short answer: Parekh’s cold outreach, self-presentation and interview style were exceptional.