A five-part video series from Ire on how she built the “save for offline” functionality on her site.
The first one is about getting a set set up on Ghost so you can probably safely skip that one and go straight to the second video to get down to the nitty-gritty of the Cache API and service workers.
Here’s the talk I gave recently about indie web building blocks.
There’s fifteen minutes of Q&A starting around the 35 minute mark. People asked some great questions!
When is a space not a space?
Tom talks about ogham stones and unicode.
Scroll around this massive video of a timelapse of one day’s footage from the Himawari 8 satellite in geostationary orbit around our homeworld.
Looking back on this classic explainer video from eleven years ago, I know exactly what’s meant by this comment:
its weird that when i first saw this video it made me think of the future, and now i watch it and it reminds me of the past..
I love this example of paying it forward:
Alright, so I’ve already talked about some gotchas when debugging service worker issues. But what if you don’t even realise the problem has anything to do with your service worker?
This is not a hypothetical situation. I encountered this very thing myself. Gather ‘round the campfire, children…
One of the latest case studies on the Clearleft site is a nice write-up by Luke of designing a mobile app for Virgin Holidays. The case study includes a lovely video that demonstrates the log-in flow. I implemented that using a video element (with a poster image). Nice and straightforward. Super easy. All good.
But I hadn’t done my due diligence in browser testing (I guess I didn’t even think of it in this case). Hana informed me that the video wasn’t working at all in Safari. The poster image appeared just fine, but when you clicked on it, the video didn’t load.
I ducked, ducked, and went, uncovering what appeared to be the root of the problem. It seems that Safari is fussy about having servers support something called “byte-range requests”.
I had put the video in question on an Amazon S3 server. I came to the conclusion that S3 mustn’t support these kinds of headers correctly, or something.
Now I had a diagnosis. The next step was figuring out a solution. I thought I might have to move the video off of S3 and onto a server that I could configure a bit more.
Luckily, I never got ‘round to even starting that process. That’s good. Because it turns out that my diagnosis was completely wrong.
I came across a recent post by Phil Nash called Service workers: beware Safari’s range request. The title immediately grabbed my attention. Safari: yes! Video: yes! But service workers …wait a minute!
There’s a section in Phil’s post entitled “Diagnosing the problem”, in which he says:
I first thought it could have something to do with the CDN I’m using. There were some false positives regarding streaming video through a CDN that resulted in some extra research that was ultimately fruitless.
That described my situation exactly. Except Phil went further and nailed down the real cause of the problem:
Nginx was serving correct responses to Range requests. So was the CDN. The only other problem? The service worker. And this broke the video in Safari.
Doh! I hadn’t even thought about service workers!
Phil came up with a solution, and he has kindly shared his code.
I decided to go for a dumber solution:
if ( request.url.match(/\.(mp4)$/) ) {
return;
}
That tells the service worker to just step out of the way when it comes to video requests. Now the video plays just fine in Safari. It’s a bit of a shame, because I’m kind of penalising all browsers for Safari’s bug, but the Clearleft site isn’t using much video at all, and in any case, it might be good not to fill up the cache with large video files.
But what’s more important than any particular solution is correctly identifying the problem. I’m quite sure I never would’ve been able to fix this issue if Phil hadn’t gone to the trouble of sharing his experience. I’m very, very grateful that he did.
That’s the bigger lesson here: if you solve a problem—even if you think it’s hardly worth mentioning—please, please share your solution. It could make all the difference for someone out there.
This talk from Peter—looking at the long zoom of history—is right up my alley.
Videos for the whole first season of James Burke’s brilliant Connections TV series.
Internet Archive and chill.
A step-by-step guide to wrapping up a self-contained bit of functionality (a camera, in this case) into a web component.
Mind you, it would be nice if there were some thought given to fallbacks, like say:
<simple-camera>
<input type="file" accept="image/*">
</simple-camera>
Another great video from Jen as part of her Layout Land series. This time she addresses the question of the overwhelming technology landscape for developers and where they should invest their time.
She references my most recent talk, where I’ve been drawing a distinction between “materials” (HTML, CSS, JavaScript) and “tools” (everything else).
The slides and video from a really great well-rounded talk by Aaron, filled with practical examples illustrating concepts like progressive enhancement and inclusive design.
Here’s the video of the talk I gave at Design4Drupal last week in Boston. There’s a good half an hour of questions at the end.
Here’s a really quick (ten minute) talk about the offline user experience that I gave at the Delta V conference recently. I’m quite happy with how it turned out—there’s something to be said for having a short and snappy time slot.
There’s a common misconception that making a Progressive Web App means creating a Single Page App with an app-shell architecture. But the truth is that literally any website can benefit from the performance boost that results from the combination of HTTPS + Service Worker + Web App Manifest.
If you don’t fancy watching this video, Eric Runyon has written down the salient points about what it means for developers now that websites can be viewed on the Apple Watch. Basically, as long as you’re writing good, meaningful markup and you’ve got a sensible font stack, you’re all set.
Or, as Tim puts it:
When we build our sites in a way that allows people using less-capable devices, slower networks and other less than ideal circumstances, we end up better prepared for whatever crazy device or technology comes along next.
¶, &, @, ‽, ☺, #, and ☛.
This forthcoming documentary on Ursula K. Le Guin looks like it will be very good indeed.
This fun little film gives me all the feels for Battlezone …but then watching the excellent “making of” video really made me appreciate the love and attention to detail that went into this.
The terrific talk from Beyond Tellerrand by Claire L. Evans, author of Broad Band.
As we face issues of privacy, identity, and society in a networked world, we have much to learn from these women, who anticipated the Internet’s greatest problems, faced them, and discovered solutions we can still use today.
Here’s the talk I gave at Webstock earlier this year all about the indie web:
In these times of centralised services like Facebook, Twitter, and Medium, having your own website is downright disruptive. If you care about the longevity of your online presence, independent publishing is the way to go. But how can you get all the benefits of those third-party services while still owning your own data? By using the building blocks of the Indie Web, that’s how!
