Editor's Pick
This isn't an issue. I just wanted to take the time and say thank you for creating this library
Sometimes all a maintainer needs is a "thank you".
Accessibility
How People with Disabilities Use the Web
This resource introduces how disabled people use the web, including people with age-related impairments. It helps developers, designers, content creators, and others understand the reasons behind creating accessible digital products — including websites, apps, browsers, and other web tools.
Things to Do Before Asking “Is This Accessible?”
It is not uncommon for someone to message, call, email, or carrier pigeon me to ask if something is accessible. They almost invariably want a “yes” or “no.” However, I need to understand what the heck they mean and what the other-heck prompted them to ask.
I figured making a quick list of the kinds of questions I ask would be far easier to repeatedly share as a response. The advantage is that next time they are curious, they may be able to evaluate it on their own without needing to deal with my grump (and its other-grump).
Accessible heading structures for home pages
An accessible heading structure organizes the page’s content. This means a heading should concisely describe the content that’s below it – they shouldn’t be used as paragraph content.
When used correctly, visual and non-visual users use the headings to scan pages and find the content they need.
They’re especially important for screen reader users, who are often non-visual users, because they rely on headings to navigate a page.
CSS
Now in Baseline: animating entry effects
The post four new CSS features for entry and exit effects shared some useful features that had just landed in Chrome. Now, two of these features, @starting-style and transition-behavior: allow-discrete have become Baseline Newly Available with the release of Firefox 129. You can now create entry animation effects for elements, including those animating from display: none, and animating into the top layer.
Transition to `height: auto` & `display: none` Using Pure CSS
Find out how to easily transition to intrinsic sizes and trigger transitions when an element receives its first style update using new CSS features.
JavaScript
Oops.js: Add powerful undo/redo capabilities to your app
With Oops.js, you can implement undo/redo capabilities for your apps on par with industry-leading software like Figma, Photoshop, and Visual Studio Code. Whether you're building a simple text editor or a complex graphic design application, Oops.js offers the tools you need to create an intuitive yet powerful undo/redo functionality for your application.
Simplifying Web Development with Lit Components: JavaScript Web Components Made Easier
In the evolving landscape of web development, the need for reusable, modular, and efficient components has become paramount. While JavaScript Web Components provide a powerful solution to these needs, they often come with a steep learning curve. This is where Lit Components step in, simplifying the creation and use of Web Components with a lightweight and easy-to-use library. In this blog post, we’ll explore what Lit Components are, why they’re gaining popularity, and how you can start using them to simplify your web development projects.
Why I avoid async/await
Whatever your stance on async/await, I’d like to pitch to you on why, in my experience, async/await tends to make code more complicated, not less.
The utility of the async/await feature in JavaScript rests on the idea that asynchronous code is hard and synchronous code, by comparison, is easier. This is objectively true, but I don’t think async/await actually solves that problem in most cases.
I recently turned this article into a talk I gave at UtahJS 2023. It’s also partly a response to some of the reactions I got to this article. In many ways, I feel like I did a bit of a better job with my arguments there than here.
JS1024 Competition - 2024 winners
Participants had 15 days to create a cool JavaScript or GLSL program in 1024 bytes or less.
Splash Dash is very cool. Use the arrow Keys or WASD to move the player.
Miscellaneous
The Dying Web
I look left and right, and I'm the only one who still uses Firefox.
At conferences and in coworking spaces, it's always the same scene: people using some flavor of Chrome. Sometimes it's Brave, sometimes Chromium, most of the time it's just Google Chrome.
I find that hilariously appalling.
An entire generation grew up with access to great free tools and open standards, which helped them jumpstart their careers and gave them access to excellent technology for free.
Now, the world's largest websites are owned by the same company, which also owns the world's most popular browser and search engine. Coincidentally, they are also the world's largest advertising company. And people are wondering why they can't block ads on YouTube anymore.
We gave it all away for nothing.
Video with alpha transparency on the web
I've been helping some teams at Shopify improve page load performance, and the issue of 'videos with an alpha channel' kept coming up, where videos of UI mocks needed to be composited on top of inconsistent backgrounds, such as larger CSS backgrounds.
Often a good solution here is to create the animation using web technologies, but sometimes video is a better solution for consistent frame rates, and allows for effects like motion blur which don't currently exist on the web. A Shopify UI video with transparency (click to pause)
I didn't know much about it, so I dug in to try and find the most robust and efficient way to do it. I thought it was going to be a nice little I-can-do-this-while-jetlagged hackday project, but it's way more complicated than I thought. It turns out, the 'native' ways of doing it are inefficient and buggy. If you handle the transparency yourself, you avoid these bugs, and serve a file that's half the size, or less.
If you just want the solution, here's <stacked-alpha-video>, an NPM package to handle the playback of these videos.
Otherwise, here's what I discovered, and the many bugs I filed along the way.
This isn't an issue. I just wanted to take the time and say thank you for creating this library
Sometimes all a maintainer needs is a "thank you".
nerd-fonts: Iconic font aggregator, collection, & patcher
Nerd Fonts is a project that patches developer targeted fonts with a high number of glyphs (icons). Specifically to add a high number of extra glyphs from popular 'iconic fonts' such as Font Awesome, Devicons, Octicons, and others.