Hybrid Lazy Loading: A Progressive Migration To Native Lazy Loading

Native lazy loading is coming to the web. Since it doesn’t depend on JavaScript, it will revolutionize the way we lazy load content today, making it easier for developers to lazy load images and iframes. But it’s not a feature we can polyfill, and it will take some time before it becomes usable across all browsers. In this article, you’ll learn how it works and how you can progressively replace your JavaScript-driven lazy loading with its native alternative, thanks to hybrid lazy loading.

Trans-inclusive Design

Late one night a few years ago, a panicked professor emailed me: “My transgender student’s legal name is showing on our online discussion board. How can I keep him from being outed to his classmates?” Short story: we couldn’t. The professor created an offline workaround with the student. Years later this problem persists not just in campus systems, but in many systems we use every day.

Personal note: My kid is trans, so these issues are close to my heart. I encourage you to read this.

Google Fonts is Adding font-display

Google Fonts is adding support for font-display! This is big news—it means developers now have more control over Google Fonts web font loading behavior. We can enforce instant rendering of fallback text (when using font-display: swap) rather than relying on the browser default behavior of invisible text for up to 3 seconds while the web font request is in-flight.

12 Tips for More Accessible React Apps

If you want to improve the accessibility of your React apps but you don't know how or where to start, this talk is just what you need. Manuel shares 12 tips that will help you build web sites and applications that can be used by anyone. Each tip fits on one slide and you'll be able to put them into practice right away without having to learn anything fundamentally new. The tips include testing, HTML, JS techniques, and general best practices.

Most of these tips are not React-specific, but useful for any modern JS framework.

Utility-First CSS

An overview of Utility-First design from the Tailwinds docs.

Of particular note is the section near the end discussing maintainability concerns with utility classes, and how to manage commonly repeated utility combinations.