Blog

To the future occupants of my office at the MIT Media Lab

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

Hi. My name is Ethan Zuckerman. From 2011-2020, I enjoyed working in this office. I led a research group at the Media Lab called the Center for Civic Media, and I taught here and in Comparative Media Studies and Writing. I resigned in the summer of 2019, but stayed at the lab to help my students graduate and find jobs and to wind down our grants. When COVID-19 hit in March 2020, I left campus and came back on August 14 to clean out my office and to leave you this note.

I’m leaving the note because the previous occupant left me a note of sorts. I was working here late one night. I looked up above my desk and saw a visegrip pliers attached to part of the HVAC system. I climbed up to investigate and found a brief note telling the MIT facilities department that the air conditioning had been disabled (using the vice grips, I presume) as part of a research project and that one should contact him with any questions.

That helped explain one of the peculiarities of the office. When I moved in, attached to the window was a contraption that swallowed the window handle and could be operated with red or green buttons attached to a small circuitboard. Press the green button and the window would open very, very slowly. Red would close it equally slowly. I wondered whether the mysterious researcher might be able to remove it and reattach the window handle. So I emailed him.

I’m reminded of that time eleven years ago that I looked up the person who’d gotten my (recycled) university username and emailed them. Except Ethan’s note, passed on to the next person to occupy his former office at MIT, is much cooler. And not just because it speaks so eloquently to the quirky and bizarre culture of the place (Aber’s got its own weird culture too, y’know!) but because it passes on a slice of engineering history that its previous owner lived with, but perhaps never truly understood. A fun read.

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:

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!

Map of 51.75093,-1.347184

Bodley and the Bookworms – Scan and Deliver

This article 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 article 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 article 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 article 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 mirrors the defiance of both the band and the crown in the face of the torrential rain that repeatedly almost brought an end to the concert. Music that makes me feel like that bit does: that’s the kind of music I like. Does that help?”