Zach Leatherman wrote up a comprehensive list of font loading strategies that have been widely shared in the web development field. I took a look at this list before, but got so scared (and confused), that I decided not to do anything at all. I don’t know how to begin loading fonts the best way and I don’t want to feel like an idiot going through this list. Today, I gave myself time to sit down and figure it out. In this article, I want to share with you the best loading strategies and how to execute all of them.
Using box shadow for focus is popular in that it doesn’t mess with the box model. Unfortunately, box shadows are removed in high contrast mode. The approach we took in Fluent UI was to do focus borders via psuedo elements. Box model safe, A11y approved!
If you’re at all curious how we did it, I’ll explain it and more in this talk about building web sites. The talk also delves into Single Page Applications, Multi Page Applications, modern JavaScript Frameworks, and what I believe to be a better future for web development.
Let’s look at how to get the user’s mouse position and map it into CSS custom properties: –positionX and –positionY. We could do this in JavaScript. If we did, we could do things like make make an element draggable or move a background. But actually, we can still do similar things, but not use any JavaScript!
So far this year, all but one of my clients have been concerned about Google’s upcoming Web Vitals update. The client who’s bucking the trend is great, not least because it’s given me something a little different to focus on—they’re more interested in how their site fares on iOS. What makes this particularly fun for me is that iOS Safari is a completely different ballgame to Chrome, and not something many people tend to focus on. So, I’m going to share with you a handful of tips to make it a little easier should you need to do the same—and you should do the same.
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