We’ve done everything by the book, documentation, and HTML standards, so why is Lighthouse telling us everything is wrong? Let’s talk about eliminating font stylesheets as a render-blocking resource, and walk through an optimal setup that not only makes Lighthouse happy, but also overcomes the dreaded flash of unstyled text (FOUT) that usually comes with loading fonts. We’ll do all that with vanilla HTML, CSS, and JavaScript, so it can be applied to any tech stack.
However, today I would like to talk about an area of the framework that is a bit understated. I believe our industry as a whole seriously underestimates the value of customization and user personalization, i.e. users being able to set their own design preferences. Chris has written before about knowing who a design system is made for, pointing out a spectrum of flexibility depending on who a system is meant to help.
The Vue Testing library can help you to test your applications by mirroring the way that a user would interact with them. Here’s everything you need to know if you want to get started right away.
I have written a bunch about responsive tables. Maybe too much. This post is meant to simplify that. It will reference previous work, but mostly I am just going to show you the bare minimum you need to make a WCAG-compliant responsive HTML table.
Welcome to Designing in the Browser with our host, Una Kravets. Today we’re diving into navigation and keyboard accessibility. We’ll go over semantic HTML and ARIA roles, document structure (landmark roles), tab-index, and stylized states using :focus as well as the new :focus-within styling.
Folks, it’s HTML editing time, something that is probably laborious and obnoxious to 90% of you watching this, and I think I’m gonna make your lives a little bit better.
Interactive touches can be great for user understanding in a digital environment, but they can also leave some of your users disoriented and frustrated, the opposite of the intended effect. So let’s talk about how we can avoid that, and how we can be sure to include our cute animated SVGs and button hovers while also ensuring that users who might get a bit nauseous when seeing a lot of animation in front of them, can also enjoy your site. We’ll be demonstrating how to use the “prefers-reduced-motion” media query to progressively enhance animation into your website, as well as show you how to build a simple “reduce animation” switch.
Thanks to Cloud Four for sponsoring this week’s newsletter! If you’d like to help with the costs of running Friday Front-End, you can back our Patreon for as little as a dollar a month.
Tweet
Share