Friday Frontend: Accessibility Inspector Edition
The thing that I got super excited and inspired by this week is the new Firefox Accessibility Inspector. Better tooling is a key step towards better outcomes, so I’m excited for the improvements this will make for the accessibility of the web!
KBall from ZenDev
CSS & SCSS
Believe it or not, you can use CSS Grid in IE11 - in fact, IE was one of the first browsers to support a version of CSS Grid, as the push for the spec came out of Microsoft. However, because it was so early to the party, and is not being updated any more, there are definite quirks to the IE11 version of Grid. This post goes through them and shows you how you can write grid layouts that work in modern browsers and IE11, so if supporting IE11 is holding you back from trying Grid, this is for you.
An excellent explainer on subgrids within CSS Grid, the biggest/most important feature that will be included in the second round of the CSS Grid spec. There was a lot of hope that subgrids would make it into the first round, but they were eventually dropped to allow more time to figure out exactly how they should work without holding up the rest. Work is underway, and hopefully we’ll see the first implementations coming soon - read this to see what the hype is about.
Nothing worldshaking, but a very nice walk-through building a simple layout with Grid and theming it using CSS variables. If you’re the type who likes to learn by doing alongside, this is a good one.
An exploration of some of the potential unlocked by CSS Grid and other advanced CSS features. After a period of consolidation of best practices and relatively stagnant layout technology that led to most of the web looking alike, we are now entering a period of incredible diversification.
Short video talking about the history of the CSS specification and what’s going on now. Great overview of the way the specification process has evolved over time. The fragmentation across multiple specs definitely makes for more things to keep track of, but I think this is a huge part of why we’re seeing much more rapid progress in the web platform today.
Refs are one of the really interesting features in React and Vue for “peeling back the covers” and getting access to the underlying browser DOM. Super useful for doing things like plugging in third-party libraries and dealing with those rare cases where the virtual DOM abstraction is a bit leaky. This full length guide on using refs within React is top notch.
A standalone PWA storefront for e-commerce applications that you can plug in in front of any e-commerce solution to get a super-fast, scalable, and mobile-first frontend. The system includes a cache in between the backend and frontend, offline capabilities, and more. Currently magento appears to have the most support, but the adapter system is set up to allow easy adding of additional e-commerce backends. I haven’t been in e-commerce recently, but next time I have a reason to I’ll definitely be looking at this.
I’ve been interested in the potential of AR/VR on the web for a while now, ever since Kieran Farr pointed out to me that the combination of progressive enhancement and deep linking makes web-based VR even more powerful than native VR. It can feel a little intimidating to get into that world though, which is what this article is aiming to fix by giving you a definition of terms and resource list of places to go from outsider to insider in the WebVR world.
Two super cool things in the latest Firefox release. First, they now have enabled parallel CSS parsing, continuing down their road of parallelizing ALL THE THINGS in the browser to take advantage of multicore processes. But the really interesting thing that prompted me to include it in the newsletter is they added a brand new Accessibility Inspector, making it easy to debug how screen-readers are interacting with your website. This is HUGE for helping developers make websites more accessible.
A little bit older of a post, but inspired by the recent release making the Accessibility Inspector available to everyone, I want to highlight this. Interact with your site as would a screen reader, and dive deep into the underlying accessibility tree to understand how it’s working and why things are broken. This is a phenomenal step forward for accessibility.
That's it for this week's Friday Frontend newsletter. If you enjoyed this, be sure to sign up to get these newsletters straight to your inbox every Friday!