Accessibility
SVG Optimization and Accessibility Basics
The article walks through key best practices for improving both performance and accessibility in SVGs. It starts with optimization tips - like removing unnecessary metadata, simplifying paths, and using tools to compress SVG markup - to reduce file size and speed up load times. Then it shifts focus to accessibility.
Accessibility Statements: The good, the bad, and the ugly
Accessibility statements aren’t mere formalities. They are a contractual promise to users that face digital barriers every day that will be piece of evidence number one in any demand letter or piece of litigation an organization ever receives. The words used in the accessibility statement strongly signal how seriously an organization takes legal, ethical, and human responsibilities for its users.
If you are responsible for your organization’s accessibility efforts, audit your own statement. Ask disabled users for feedback. Keep it up to date. Be specific. Be honest. Set up an email box to receive and monitor accessibility-specific complaints. Most importantly, ensure the statement reflects real actions and achievements, not aspirations. If you don’t like what’s in your statement, then the conversation needs to pivot internally to “what more can we do?”
CSS
Invert CSS Shapes using shape()
A simple trick to get the cut-out version of any shape created using shape().
SVG to CSS Shape Converter
This tool will convert an SVG shape created with <path d="..."> into a CSS Shape. You will get a responsive code made with the new shape() function of clip-path.
A single-element implementation that works with images and supports gradient coloration.
object-fit and object-position
Crop images in a similar to way background images by using object-fit and object-position.
Having figure match width of contained image
I wanted a way to make the figure have the same width as the image and have the figcaption wrap if it had a longer width than the image. I could not use a width: max-content on the figure because it would take on the width of the figcaption. Or if the text was long enough to need 2 lines to wrap inside the larger content container, putting a width: min-content on the figure without also putting a max-width: 100% would cause the figcaption and figure to overflow the content container.
CSS Blob Recipes
Blob, Blob, Blob. What's the most effective way to create blob shapes in CSS? Turns out, as always, there are many.
Animating Number Counters
Number animation, as in, imagine a number changing from 1 to 2, then 2 to 3, then 3 to 4, etc. over a specified time. Like a counter, except controlled by the same kind of animation that we use for other design animation on the web. This could be useful when designing something like a dashboard, to bring a little pizazz to the numbers. Amazingly, this can now be done in CSS without much trickery.
The Gap Strikes Back: Now Stylable
Styling the space between layout items — the gap — has typically required some clever workarounds. But a new CSS feature changes all that with just a few simple CSS properties that make it easy, yet also flexible, to display styled separators between your layout items.
CSS conditionals with the new if() function
From Chrome 137 you can try out CSS inline conditionals with the if() function. if() enables a cleaner developer interface for dynamic styles like style queries and media queries, with some key differences, which you can learn about in this post.
Understanding CSS corner-shape and the Power of the Superellipse
The CSS corner-shape property represents one of the most exciting additions to web design’s geometric toolkit in recent years. Extending our ability to control the appearance of corners beyond the simple rounded edges we’ve become accustomed to with border-radius, this seemingly small addition unlocks a world of new possibilities that previously required complex SVG implementations or image-based solutions.
Quantity Query Carousel
The concept of a quantity query is really neat. Coined by Heydon back in 2015, the idea is that you apply different styles depending on how many siblings there are. They was a way to do it back then, but it’s gotten much easier thanks to :has(), which not only makes the detection easier but gives us access to the parent element where we likely want it.
JavaScript
React Still Feels Insane And No One Is Talking About It
Recently, I did a side project that I wrote about in the other post. As part of it, I had what was supposed to be just a few paragraphs on how React sucks - but I just couldn't stop writing about it.
So here it is a full, standalone blog post, even bigger than the one it sprang from, all about how React sucks. And how it might not even be its own fault.
What's coming to JavaScript
TC39’s 108th meeting recently advanced 9 proposals across 4 stages, which represent rough ideas (stage 0) to fully standardized features (stage 4).
Here’s a brief summary of each and what that might mean for the future of JavaScript.
Angular LLM prompts and AI IDE setup
Generating code with large language models (LLMs) is a rapidly growing area of interest for developers. While LLMs are often capable of generating working code it can be a challenge to generate code for consistently evolving frameworks like Angular.
Advanced instructions and prompting are an emerging standard for supporting modern code generation with domain specific details. This section contains curated content and resources to support more accurate code generation for Angular and LLMs.
WebGL2 Fundamentals
Learn WebGL2 from the ground up. No magic.
These are a set of articles that teach WebGL2 from basic principles. They are NOT old rehashed out of date OpenGL articles like many others on the net. They are entirely new, discarding the old out of date ideas and bringing you to a full understanding of what WebGL really is and how it really works.
These articles are specifically about WebGL2. If you are interested in WebGL 1.0 please go here.
Recreating Laravel Cloud’s range input with native HTML
Making a visually appealing range input based on Laravel Cloud's design, native HTML and only a few lines of JavaScript.
What’s the difference between ordinary functions and arrow functions in JavaScript?
Arrow functions (also known as ‘rocket’ functions) are concise and convenient. However, they have subtle differences compared to function declarations and function expressions. So how do you know which one to use, and when?