Loading CSS Asynchronously Without JS Dependency

tl;dr? skip to the proof-of-concept/demo of lazy-loading CSS where possible while still loading it “conventionally” to users without Javascript

In a “daily tip” a couple of days ago, the excellent Chris Ferdinandi recommended an approach to loading CSS asynchronously based on a refined technique by Scott Jehl. The short of it is that you load your stylesheets like this:

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

You see what that’s doing? It’s loading the stylesheet for the print medium, but then when the document finishes loading it’s switching the media type from “print” to “all”. Because it didn’t apply to begin with the stylesheet isn’t render-blocking. You can use this to delay secondary styles so the page essentials can load at full speed.

This website's Lighthouse score showing a Total Blocking Time of 0ms.
Reducing blocking times, like I have on this page, is one of many steps in optimising perceived page performance.

I don’t like this approach. I mean: I love the elegance… I just don’t like the implications.

Why I don’t like lazy-loading CSS using Javascript

Using Javascript to load CSS, in order to prevent that CSS blocking rendering, feels to me like it conceptually breaks the Web. It certainly violates the expectations of progressive enhancement, because it introduces a level of fault-intolerance that I consider (mostly) unacceptable.

CSS and Javascript are independent of one another. A well-designed progressively-enhanced page should function with HTML only, HTML-and-CSS only, HTML-and-JS only, or all three.CSS adds style, and JS adds behvaiour to a page; and when you insist that the user agent uses Javascript in order to load stylistic elements, you violate the separation of these technologies (I’m looking at you, the majority of heavyweight front-end frameworks!).

If you’re thinking that the only people affected are nerds like me who browse with Javascript wholly or partially disabled, you’re wrong: gov.uk research shows that around 1% of your visitors have Javascript fail for some reason or another: because it’s disabled (whether for preference, privacy, compatibility with accessibility technologies, or whaterver), blocked, firewalled, or they’re using a browser that you didn’t expect.

The Web Pyramid. In the style of a "food pyramid", shows Text Worth Reading at the bottom, supporting Markup, supporting Images, supporting CSS, supporting (a small amount of) Scripts.
Maciej Cegłowski‘s 2015 talk “Website Obesity” draws the boundaries firmly, using this great diagram.

Can we lazy-load CSS in a way that doesn’t depend on Javascript? (spoiler: yes)

Chris’s daily tip got me thinking: could there exist a way to load CSS in a non-render-blocking way but which degraded gracefully in the event that Javascript was unavailable? I.e. if Javascript is working, lazy-load CSS, otherwise: load conventionally as a fallback. It turns out, there is!

In principle, it’s this:

  1. Link your stylesheet from within a <noscript> block, thereby only exposing it where Javascript is disabled. Give it a custom attribute to make it easy to find later, e.g. <noscript lazyload> (if you’re a standards purist, you might prefer to use a data- attribute).
  2. Have your Javascript extract the contents of these <noscript> blocks and reinject them. In modern browsers, this is as simple as e.g. [...document.querySelectorAll('noscript[lazyload]')].forEach(ns=>ns.outerHTML=ns.innerHTML).

If you need support for Internet Explorer, you need a little more work, because Internet Explorer doesn’t expose<noscript> blocks to the DOM in a helpful way. There are a variety of possible workarounds; I’ve implemented one but not put too much thought into it because I rarely have to think about Internet Explorer these days.

In any case, I’ve implemented a proof of concept/demonstration if you’d like to see it in action: just take a look and view source (or read the page) for details. Or view the source alone via this gist.

Lazy-loading CSS using my approach provides most of the benefits of other approaches… but works properly in environments without Javascript too.

Update: Chris Ferdinandi’s refined this into an even cleaner approach that takes the best of both worlds.

× ×

Building a Playframe (Timelapse Video)

This week, with help from Robin and JTA, I built a TropicTemple Tall XXL climbing frame in the garden of our new house. Manufacturer Fatmoose provided us with a pallet-load of lumber and a sack of accessories, delivered to our driveway, based on a design Ruth and I customised using their website, and we assembled it on-site over the course of around three days. The video above is a timelapse taken from our kitchen window using a tablet I set up for that purpose, interspersed with close-up snippets of us assembling it and of the children testing it out.

Playframe in VR
You can explore the play equipment in VR, if you like.

I’ve also built a Virtual Tour so you can explore the playframe using your computer, phone, or VR headset. Take a look!

The video is also available via:

Note #17552

Dan with his Masters Degree certificate (Master of Science in Computing: Information Security and Forensics)

I’m unlikely to get a graduation ceremony like last time (on account of social distancing and whatnot), but I get a certificate to acknowledge my most-recent qualification.

×

Dan Q found GC3MFPY Dogfort v Catfort – Sailor Dog

This checkin to GC3MFPY Dogfort v Catfort - Sailor Dog reflects a geocaching.com log entry. See more of Dan's cache logs.

Well, it’s been a long while since I saw an intact Dogfort vs. Catfort!

After dropping the kids off at their respective summer camp activities for the day, my car advised me that, owing to traffic, I ought to consider taking the B4044 most of the way home rather than the usual A-roads. Sure, I thought… that takes me through Farmoor where I think there might be caches I haven’t found! I parked not at the nearby car park but in a layby in Filchampstead to enjoy a walk along the nearby footpath first.

Coordinates were spot on and cache was easy to spot despite camouflage. Re-hid slightly deeper. TFTC!

Bodley and the Bookworms – Scan and Deliver

This is a repost promoting content originally published elsewhere. See more things Dan's reposted.

You know that strange moment when you see your old coworkers on YouTube doing a cover of an Adam and the Ants song? No: just me?

Still good to see the Bodleian put a fun spin on promoting their lockdown-friendly reader services. For some reason they’ve marked this video “not embeddable” (?) in their YouTube settings, so I’ve “fixed” the copy above for you.

Syncthing

This last month or so, my digital life has been dramatically improved by Syncthing. So much so that I want to tell you about it.

Syncthing interface via Synctrayzor on Windows, showing Dan's syncs.
1.25TiB of data is automatically kept in sync between (depending on the data in question) a desktop PC, NAS, media centre, and phone. This computer’s using the Synctrayzor system tray app.

I started using it last month. Basically, what it does is keeps a pair of directories on remote systems “in sync” with one another. So far, it’s like your favourite cloud storage service, albeit self-hosted and much-more customisable. But it’s got a handful of killer features that make it nothing short of a dream to work with:

  • The unique identifier for a computer can be derived from its public key. Encryption comes free as part of the verification of a computer’s identity.
  • You can share any number of folders with any number of other computers, point-to-point or via an intermediate proxy, and it “just works”.
  • It’s super transparent: you can always see what it’s up to, you can tweak the configuration to match your priorities, and it’s open source so you can look at the engine if you like.

Here are some of the ways I’m using it:

Keeping my phone camera synced to my PC

Phone syncing with PC

I’ve tried a lot of different solutions for this over the years. Back in the way-back-when, like everybody else in those dark times, I used to plug my phone in using a cable to copy pictures off and sort them. Since then, I’ve tried cloud solutions from Google, Amazon, and Flickr and never found any that really “worked” for me. Their web interfaces and apps tend to be equally terrible for organising or downloading files, and I’m rarely able to simply drag-and-drop images from them into a blog post like I can from Explorer/Finder/etc.

At first, I set this up as a one-way sync, “pushing” photos and videos from my phone to my desktop PC whenever I was on an unmetered WiFi network. But then I switched it to a two-way sync, enabling me to more-easily tidy up my phone of old photos too, by just dragging them from the folder that’s synced with my phone to my regular picture storage.

Centralising my backups

Phone and desktop backups centralised through the NAS

Now I’ve got a fancy NAS device with tonnes of storage, it makes sense to use it as a central point for backups to run fom. Instead of having many separate backup processes running on different computers, I can just have each of them sync to the NAS, and the NAS can back everything up. Computers don’t need to be “on” at a particular time because the NAS runs all the time, so backups can use the Internet connection when it’s quietest. And in the event of a hardware failure, there’s an up-to-date on-site backup in the first instance: the cloud backup’s only needed in the event of accidental data deletion (which could be sync’ed already, of course!). Plus, integrating the sync with ownCloud running on the NAS gives easy access to my files wherever in the world I am without having to fire up a VPN or otherwise remote-in to my house.

Plus: because Syncthing can share a folder between any number of devices, the same sharing mechanism that puts my phone’s photos onto my main desktop can simultaneously be pushing them to the NAS, providing redundant connections. And it was a doddle to set up.

Maintaining my media centre’s screensaver

PC photos syncing to the media centre.

Since the NAS, running Jellyfin, took on most of the media management jobs previously shared between desktop computers and the media centre computer, the household media centre’s had less to do. But one thing that it does, and that gets neglected, is showing a screensaver of family photos (when it’s not being used for anything else). Historically, we’ve maintained the photos in that collection via a shared network folder, but then you’ve got credential management and firewall issues to deal with, not to mention different file naming conventions by different people (and their devices).

But simply sharing the screensaver’s photo folder with the computer of anybody who wants to contribute photos means that it’s as easy as copying the picture to a particular place. It works on whatever device they care to (computer, tablet, mobile) on any operating system, and it’s quick and seamless. I’m just using it myself, for now, but I’ll be offering it to the rest of the family soon. It’s a trivial use-case, but once you’ve got it installed it just makes sense.

In short: this month, I’m in love with Syncthing. And maybe you should be, too.

×

7 things we know about the nun reading ‘Boys’ Life’ in ‘Airplane!’

This is a repost promoting content originally published elsewhere. See more things Dan's reposted.

A nun reading Boy's Life and a boy reading Nun's Life

It’s one of the best visual gags in a movie filled with them.

In the classic 1980 comedy Airplane!, two passengers are seen reading magazines. First, we see a nun reading Boys’ Life. Moments later, there’s a boy reading Nuns’ Life.

The scene is over in seconds, but the memory of this joke lives on. That’s especially true for those of us who have been reading Boys’ Life since we were kids.

Here are seven things you might not know about this bit of visual humor.

Of the many things I love, here are two of them:

  • The Airplane series of movies.
  • People who, like me, get carried away researching something trivial and accidentally become an expert in a miniscule field.

This fantastic piece takes a deep dive into a tiny scene in Airplane. What issue of Boys’ Life was the nun reading? What page was she looking at? What actual magazine was the boy reading within the Nuns’ Life cover? These and more questions you never thought about before are answered!

WHAT THE BEC?! (#01)

This is a repost promoting content originally published elsewhere. See more things Dan's reposted.

Just another vlog update from comedian Bec Hill. Oh no, wait… this website is now T-Shirt Famous! (for a very loose definition of “famous”, I guess.) For a closer look, see Instagram.

This isn’t the silliest way I’ve put my web address on something, of course. A little over 17 years ago there was the time I wrote my web address along the central reservation of a road in West Wales using sugar cubes, for example. But it’s certainly the silliest recent way.

Anyway: this t-shirt ain’t the Million Dollar Homepage. It’s much cooler than that. Plus the money’s all going to Water Aid. (If you haven’t claimed a square yourself, you still can!)

DanQ.me on a t-shirt as drawn by comedian Bec Hill
I was pleased to see that Bec even managed to get the blue kinda-sorta on-brand.

On Bec Hill related news, did you see that she did a third “when you listen to music when you’re hungry” video? You should go watch that too. It’s avocado-licious.

×

Lindsey Stirling/Johnny Rzeznik String Session

This is a repost promoting content originally published elsewhere. See more things Dan's reposted.

One of the last “normal” things I got to do before the world went full lockdown was to attend a Goo Goo Dolls concert with Ruth, and so to see two musicians I enjoy team up to perform a song and share some words of hope and encouragement for a better future beyond these troubled times… feels fitting and inspiring.

Also awesome to see that Stirling’s perhaps as much a fan of Live in Buffalo as I am.

Fun diversion: I never know how to answer the question “what kind of music do you like?”, because I increasingly (and somewhat deliberately) find that I enjoy a wider and wider diversity of different genres and styles. But perhaps the right answer might be: “I like music that makes me feel the way I feel when I hear Cuz You’re Gone recorded from the Goo Goo Dolls’ concert in Buffalo on 4 July 2004, specifically the bit between 4 minutes 10 seconds and 4 minutes 33 seconds into the song, right at the end of the extended bridge. It’s full of anticipatory energy and building to a wild crescendo that seems to mirror the defiance of both the band and the crowd in the face of the torrential rain that repeatedly almost brought an end to the concert. Music that makes me feel like that bit; that’s the kind of music I like. Does that help?”

Santander to Accept Homemade Deeds Poll

For most of the last decade, one of my side projects has been FreeDeedPoll.org.uk, a website that helps British adults to change their name for free and without a solicitor. Here’s a little known fact: as a British citizen, you have the right to be known by virtually any name you like, and for most people the simplest way to change it is to write out a deed poll: basically a one-person contract on which you promise that you’re serious about adopting your new name and you’re not committing fraud or anything.

FreeDeedPoll.org.uk
This web design looked dated when I made it and hasn’t gotten any younger, but the content remains valid as ever.

Over that time, I’ve helped thousands of people to change their names. I don’t know exactly how many because I don’t keep any logs, but I’ve always gotten plenty of email from people about the project. Contact spiked in 2013 after the Guardian ran an article about it, but I still correspond with two or three people in a typical week.

These people have lots of questions that come up time and time again, and if I had more free time I’d maintain an FAQ of them or something. In any case, a common one is people asking for advice when their high street bank, almost invariably either Nationwide or Santander, disputes the legitimacy of a “home made” deed poll and refuses to accept it.

Abbey National and Abbey (former names of Santander) crossed out and replaced with Santander.
You’d think that Santander of all people would appreciate how important it is to have your legitimate change of name respected. Hang on… haven’t I joked about their rebranding before?

When such people contact me, I advise them of a number of solutions and workarounds. Going to a different branch can work (training at these high street banks is internally inconsistent, I guess?). Getting your government-issued identity documents sorted and then threatening to move your account elsewhere can sometimes work. For applicants willing to spend a little money, paying a solicitor a couple of quid to be one of your witnesses can work. I often don’t hear back from people who email me about these banks: maybe they find success by one of these routes, or maybe they give up and go down one an unnecessarily-expensive avenue.

But one thing I always put on the table is the possibility of fighting. I provide a playbook of strategies to try to demonstrate to their troublemaking bank that the bank is in the wrong, along with all of the appropriate legal citations. Recent years put a new tool in the box: the GDPR/DPA2018, which contains clauses prohibiting companies from knowingly retaining incorrect personal data about an individual. I’ve been itching for a chance to use these new weapons… and over this last month, I finally had the opportunity.

A man signs a document.
Print this. Sign here. That’s pretty-much all there is to it.

I was recently contacted by a student (who, as you might expect, has more free time than they do spare money!) who was having trouble with Santander refusing to accept their deed poll. They were willing to go all-out to prove their bank wrong. So I gave them the toolbox and they worked through it and… Santander caved!

Not only have Santander accepted that they were wrong in the case of this student, but they’ve also committed to retraining their staff. Oh, and they’ve paid compensation to the student who emailed me.

Even from my position on the sidelines, I couldn’t help but cheer at this news, and not just because I’ll hopefully have fewer queries to deal with.

× ×

The Perfect Art Heist: Hack the Money, Leave the Painting

This is a repost promoting content originally published elsewhere. See more things Dan's reposted.

Thieves didn’t even bother with a London art gallery’s Constable landscape—and they still walked away with $3 million.

This comic is perhaps the best way to enjoy this news story, which describes the theft of £2.4 million during an unusual… let’s call it an “art heist”… in 2018. It has many the characteristics of the kind of heist you’re thinking about: the bad guys got the money, and nobody gets to see the art. But there’s a twist: the criminals never came anywhere near the painting.

A View from Hampstead Heath, ca. 1825, by John Constable

This theft was committed entirely in cyberspace: the victim was tricked into wiring the money to pay for the painting into the wrong account. The art buyer claims that he made the payment in good faith, though, and that he’s not culpable because it was the seller’s email that must have been hacked. Until it’s resolved, the painting’s not on display, so not only do the criminals have the cash, the painting isn’t on display.

Anyway; go read the comic if you haven’t already.