Today’s Readings

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:

  1. What does text-size-adjust do?
  2. Do you need it in your CSS?
  3. And if not, why not?
See the answers
  1. Allows you to control the amount an iPhone increases a site’s font-size when viewed in landscape.
  2. Yes, most likely, cause without it, your stuff is, like, pro’ly blowing up…
  3. Nope, wrong.

explains in more detail

It is not often that I open a website and stop in my tracks, in a good-way… But ‘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 s 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 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.

, Website performance and the planet

Wait, what now???

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), 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,

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

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.