Hey hey! Chris here. When I read an article (or part of it) and think it’s interesting, I’ll often save it for sharing later. Because, well, that’s one of the things I do around here! (At the moment I like using the Notion Web Clipper) My goal in doing that is to provide additional thoughts, context, and commentary based on my own experience, so it’s not just a link-dump, but hopefully something more useful than that. I’ve got a good number of interesting links saved up right now, so please allow me to take this opportunity to unload!
Let’s start with some typography links. You know the web is like… mostly typography yeah? Can’t avoid that as a web designer.
Cooper Black is a classic.
Friggin Garfield uses it. But it’s also everywhere, even today, once you start noticing it. Estelle Caswell for Vox has a great video digging into it: A Short History of the Cooper Black Typeface.
It’s a wonderful stroll through some type history.
I have Cooper Black on my machine. I’m not entirely sure how, but my collection of fonts on this machine is a couple of decades old at this point I don’t remember where most of them came from. It didn’t come from the operating system itself, according to Apple. So it was probably some project I worked on from long ago. Pretty interesting that a non-free font is as big as it is. It makes more sense why Impact, Papyrus, and Copperplate are everywhere: default and “free”.
I’ve paid for tons of fonts in my life as well. More than most, I’m sure. Somewhat recently I purchased the desktop version of Sentinel, the webfont we use here on this site. And I’m still rather in love with Pigeonette, although I’ve only used it sparingly here and there on random things so far. I’m totally on the MonoLisa train for a coding font. But speaking of monospace coding fonts, I heard a very strong shout-out for ISO the other day, with a friend saying they have been coding in it for over a year.
While I think paying good money for good type is appropriate, I do appreciate a good open source font too. Jakarta Sans is darn nice looking and, as they say, awfully versatile.
Let’s do some accessibility links now.
The other day on ShopTalk we had someone write in about “Accessibility Widgets”. These are like little third-party JavaScript bolt-on scripts that add UI to the page to try to “solve” accessibility issues. For example, add buttons to change the font size. That way, you just add this rather than code something yourself.
The great irony of these things, in general? They can be inaccessible themselves. Deque says the same:
These overlays are a one-size-fits-all approach that simply does not work for people with disabilities. In fact, tool-based overlays are cheap assistive technologies that do little to improve the real accessibility of Web properties.
Although they do have their own tool called Amaze in this space that attempts to be different. I can’t vouch for it as I haven’t used it, but I do tend to trust them.
You know aria-label? It’s an attribute I’ve probably used the most in those situations where an SVG icon needs a label that can’t otherwise be done via text on the page. Scott O’Hara mentions they can be used on lists too, like regular ol’ <ul>s.
<ul aria-label="I needed a name for some reason">
<li>...</li>
<!-- ... -->
</ul>The use cases are pretty light though. Not navigation. Just lists where there could be some ambiguity between lists and the lists aren’t under headers that deal with that ambiguity.
Do you actually test in screen readers? I do once in a while, but not nearly as much as I should, and when I do, it’s just VoiceOver on my mac. Even VoiceOver has a pretty solid learning curve, I think. There are lots of commands for getting around and doing the things you need to do. If you’re going to give a website a fair break on how it does in VoiceOver, you should try to know it at least somewhat like the people who use it all the time know it. Ethan can help you get started getting there in a great 5-minute video.
I find it very easy to forget how things work, and to my fingers, not particularly intuitive. For example, to get started reading the entire page once it is in focus: Control + Option + A.
I have another group of three links here burning a hole in my pocket that I’ve labeled browsers.
Nick Schaden, Give Microsoft Edge a chance:
After almost two decades of avoiding Microsoft-based web products whenever possible, I’ve come full circle: the new Microsoft Edge is my browser of choice. It has excellent privacy options, a large extension community, and developer support that makes it a reliable option on macOS over Chrome, Firefox, and Safari.
Edge is now Chromium-based, so that probably helps for the people that didn’t use it because they didn’t want to be signing themselves up for using a browser that has historically been riddled with web bugs and lack of support of things (fair or not, you decide). Does the death of a browser rendering engine mean a huge blow to the diversity there? It would be hard to argue that it isn’t, but, surprisingly, there is some spurts of growth too.
Sam Grace Sneddon, Flow: A New Browser Engine:
Over the past year, Flow has caused a fair bit of a stir in both browser and web development communities.
Flow is passing the Acid tests now, which is a huge achievement. Is it going to become a relevant player in years to come? I won’t even guess. I’m always wrong on stuff like that.
Now, if you’re warmed up, the main course is Alex Russel’s Platform Adjacency Theory. Here’s a bit of it about the cyclical nature of platform-specific development:
Every computing platform is locked in overlapping competitions. The first is for developer time and attention. The set of successful applications not built to your platform is a bug to the mind of every competent platform strategist (malware excepted). It is a problem for OSes when developers do not use their APIs directly, but instead reach for portability layers atop the native surface. Developers deliver content. Compelling content and services draw users. If the weight of these experiences is compelling enough, it can even convince potential users to acquire your device or runtime to get access. The resulting install base of a platform and it’s capabilities are an asset in convincing the next developer to build for a platform.
So if the web is a platform, the trick to success is…
Growing a platform’s success requires unlocking use-cases not already serviced. That mean finding needs that combine things your platform is already good at with a small number of missing capabilities
To Alex, if we “lock the web in amber” we lose. Alex is also a strongly vocal advocate against’s Apple’s call to not allow alternate rendering engines on iOS. Why don’t they? Nobody really knows. But a running joke against Chrome is how much of a system hog it is, and I can imagine that alone being the reason for Apple. They have to be strongly concerned about things like battery life, particularly on apps that are used as frequently as a web browser.
I would think all this talk about the lack of certain API adoption has something to do with Apple (and Mozilla to some degree) refusing certain APIs on grounds of privacy mis-use. I’ve found a lot of people blame that on Apple just wanting people to build native apps for those capabilities instead (more platform lock-in). I don’t know what to think. I’m not huge on conspiracy theories, but we don’t have much left when the decision-makers at these companies don’t actually tell us why they do what they do.
Mostly, I’m a trajectory guy. The web has massively improved and grown in the last decade both in capability and what developers are doing with it. I expect that to continue.
Sponsor
Free Book: Modern Development on the JAMstack
Netlify already sets the standard for developing on the JAMstack but now they’ve literally written the book on it. Pick up a free digital copy of Modern Development on the JAMstack and you’ll most certainly level up your ability to craft super-fast websites with tips and tricks from none other than Mathias Biilmann and Phil Hawksworth.
How about some of the best stuff we published on CSS-Tricks?
- Want a more customized GitHub profile? You can do that.
- Already a Trello user? Have you thought of using it as a CMS?
- You can learn a lot when you teach. Ain’t that a fact?
- Did you know that CSS custom properties wiggle their way right through the Shadow DOM?
- Recursive Sans is pretty cool. It’s a variable font right on Google Fonts.
- CSS grid + masonry exists.
Wanna support us? Become an MVP Supporter!