Let’s start this installment with a vocabulary pop-quiz! Everybody loves those, right? How would you define lens, frame and model?
Speaking of quizzes:
- What does
text-size-adjustdo? - Do you need it in your CSS?
- And if not, why not?
See the answers
- Allows you to control the amount an iPhone increases a site’s font-size when viewed in landscape.
- Yes, most likely, cause without it, your stuff is, like, pro’ly blowing up…
- Nope, wrong.
Kilian Valkhof explains in more detail…
It is not often that I open a website and stop in my tracks, in a good-way… But Brian Lovin‘s site layout is awesome… Read all about how it works.
I recently wrote about fuite, a CLI tool for finding memory leaks. And from the guy that wrote fuite, here’s a bit more about memory leaks, how frustrating they can be to find, and how addictive they can be to fix…
We all do it, assume something is safe to do because it only applies to “this” situation, right? Well, it’s encouraging to hear that even the Jeremy Keiths of the world makes such assumptions, and it’s inspiring to read about their solutions!
Who would have thought that watching boxes fold and unfold themselves could be so much fun? Apparently Jhey Tompkins did…
[I]n a year the web as whole uses more electricity than the UK. The internet is annually responsible for emissions equivalent to Germany (the world’s 7th largest polluter). That’s more polluting than the civil aviation sector.
Wait, what now???
Bramus Van Damme introduces us to CSS @Layers, which promise to be one of the biggest structural changes the language has seen in a long time…
Define all your layers upfront, in a single line; the order the layers are defined creates their cascade specificity order:
@layer reset, base, theme, utilities;
Then, throughout your CSS, append rules to each of your layers:
@layer reset {
/* Append stuff to layer named "reset” */
}
@layer theme {
/* Append stuff to layer named "theme” */
}
@layer base {
/* Append stuff to layer named "base” */
}
@layer theme {
/* Append more stuff to layer named "theme” */
}
Already shipping in Firefox and Chrome, in preview in Safari, and behind a flag in Edge… Tomorrow is nigh!
Sticking with Bramus for a sec, let’s also walk through the rainbow-farting Unicorn that is Container Queries! Although still behind a flag in Edge and Chrome, in preview in Safari, and apparently not even on the horizon in Firefox (?), there is a plug-and-play polyfill available that only loads if native support is lacking. And although the polyfill relies on ResizeObserver, MutationObserver and :is(), as discussed in a previous installment of Today’s Readings, support there is not a problem…
Now moving from tomorrow to today (or almost yesterday by now), Chris Ferdinandi guides us through setting up and installing a Service Worker. With only a few basic requirements, the benefits of adding a Service Worker are huge!
Turning a GitHub page into a Progressive Web App. Oh, that’s nice, Christian Heilmann…
And finally, sticking with Christian for a sec, as coders, what do we do when we need a tool but cannot find it? Why, we make it ourselves, of course! Bravo on solving the problem, Christian, and, as importantly to me, for re-instilling the thinking that, “yes, stuff should work without an Internet connection if it can, because… why wouldn’t it?”
Happy reading,
Atg