Tags: resources

I gave a new talk at An Event Apart in Seattle yesterday morning. The talk was called Going Offline, which the eagle-eyed amongst you will recognise as the title of my most recent book, all about service workers.

I was quite nervous about this talk. It’s very different from my usual fare. Usually I have some big sweeping arc of history, and lots of pretentious ideas joined together into some kind of narrative arc. But this talk needed to be more straightforward and practical. I wasn’t sure how well I would manage that brief.

I knew from pretty early on that I was going to show—and explain—some code examples. Those were the parts I sweated over the most. I knew I’d be presenting to a mixed audience of designers, developers, and other web professionals. I couldn’t assume too much existing knowledge. At the same time, I didn’t want to teach anyone to such eggs.

In the end, there was an overarching meta-theme to talk, which was this: logic is more important than code. In other words, figuring out what you’re trying to accomplish (and describing it clearly) is more important than typing curly braces and semi-colons. Programming is an act of translation. Before you can translate something, you need to be able to articulate it clearly in your own language first. By emphasising that point, I hoped to make the code less overwhelming to people unfamilar with it.

I had tested the talk with some of my Clearleft colleagues, and they gave me great feedback. But I never know until I’ve actually given a talk in front of a real conference audience whether the talk is any good or not. Now that I’ve given the talk, and received more feedback, I think I can confidentally say that it’s pretty damn good.

My goal was to explain some fairly gnarly concepts—let’s face it: service workers are downright weird, and not the easiest thing to get your head around—and to leave the audience with two feelings:

1. This is exciting, and
2. This is something I can do today.

I deliberately left time for questions, bribing people with free copies of my book. I got some great questions, and I may incorporate some of them into future versions of this talk (conference organisers, if this sounds like the kind of talk you’d like at your event, please get in touch). Some of the points brought up in the questions were:

• Is there some kind of wizard for creating a typical service worker script for any site? I didn’t have a direct answer to this, but I have attempted to make a minimal viable service worker that could be used for just about any site. Mostly I encouraged the questioner to roll their sleeves up and try writing a bespoke script. I also mentioned the Workbox library, but I gave my opinion that if you’re going to spend the time to learn the library, you may as well spend the time to learn the underlying language.
• What are some state-of-the-art progressive web apps for offline user experiences? Ooh, this one kind of stumped me. I mean, the obvious poster children for progressive webs apps are things like Twitter, Instagram, and Pinterest. They’re all great but the offline experience is somewhat limited. To be honest, I think there’s more potential for great offline experiences by publishers. I especially love the pattern on personal sites like Una’s and Sara’s where people can choose to save articles offline to read later—like a bespoke Instapaper or Pocket. I’d love so see that pattern adopted by some big publications. I particularly like that gives so much more control directly to the end user. Instead of trying to guess what kind of offline experience they want, we give them the tools to craft their own.
• Do caches get cleaned up automatically? Great question! And the answer is mostly no—although browsers do have their own heuristics about how much space you get to play with. There’s a whole chapter in my book about being a good citizen and cleaning up your caches, but I didn’t include that in the talk because it isn’t exactly exciting: “Hey everyone! Now we’re going to do some housekeeping—yay!”
• Isn’t there potential for abuse here? This is related to the previous question, and it’s another great question to ask of any technology. In short, yes. Bad actors could use service workers to fill up caches uneccesarily. I’ve written about back door service workers too, although the real problem there is with iframes rather than service workers—iframes and cookies are technologies that are already being abused by bad actors, and we’re going to see more and more interventions by ethical browser makers (like Mozilla) to clamp down on those technologies …just as browsers had to clamp down on the abuse of pop-up windows in the early days of JavaScript. The cache API could become a tragedy of the commons. I liken the situation to regulation: we should self-regulate, but if we prove ourselves incapable of that, then outside regulation (by browsers) will be imposed upon us.
• What kind of things are in the future for service workers? Excellent question! If you think about it, a service worker is kind of a conduit that gives you access to different APIs: the Cache API and the Fetch API being the main ones now. A service worker is like an airport and the APIs are like the airlines. There are other APIs that you can access through service workers. Notifications are available now on desktop and on Android, and they’ll be coming to iOS soon. Background Sync is another powerful API accessed through service workers that will get more and more browser support over time. The great thing is that you can start using these APIs today even if they aren’t universally supported. Then, over time, more and more of your users will benefit from those enhancements.

If you attended the talk and want to learn more about about service workers, there’s my book (obvs), but I’ve also written lots of blog posts about service workers and I’ve linked to lots of resources too.

Finally, here’s a list of links to all the books, sites, and articles I referenced in my talk…

Books

• DOM Scripting, 2005
• Bulletproof Ajax, 2007
• Going Offline, 2018

Sites

• adactio.com
• Resilient Web Design
• jQuery
• The Prime Number Shitting Bear
• Ampersand
• Trivago
• Clearleft
• The Session
• Una Kravets
• Sara Soueidan
• dConstruct Archive

Progressive Web Apps

• What the heck is a “Progressive Web App”? Seriously. by Ben Halpern
• Building Progressive Web Apps by Diogo Cunha
• Before You Build a PWA You Need a SPA by Mark Muskardin
• Tweet by Jake Archibald
• What is a PWA by Salva de la Puente
• Naming Progressive Web Apps by Frances Berriman
• Progressive Web App Checklist by Google

In just over a week, I’ll be giving the opening talk at the New Adventures conference in Nottingham. I’ll be giving a workshop the day before too. There are still tickets available for both.

I have to admit, I’m kind of nervous about this talk. It’s been quite a while since the last New Adventures, but it’s always had quite the cachet. I think I went to most of them. It’s quite strange—and quite an honour—to shift gears from attendee to speaker.

The talk I’ll be giving is called Building. That might be a noun. That might be a verb. You decide:

Every new medium looks to what has come before for guidance. Web design has taken cues from centuries of typography and graphic design. Web development has borrowed metaphors and ideas from the world of architecture. Let’s take a tour of some of the most influential ideas from architecture that have crossed over into the web, from pattern languages to responsive design. Together we’ll uncover how to build resilient, performant, accessible and beautiful structures that work with the grain of the materials of the web.

This talk builds upon the talk I gave at last year’s An Event Apart called The Way Of The Web. It also reflects many of the ideas in Resilient Web Design. When I gave a run-through of the talk at Clearleft last week, Andy called it a “greatest hits.” For a while there, I was feeling guilty about retreading some ground I’ve covered in previous talks and writings. Then I realised it was pretty arrogant of me to think that anyone in the audience would be familiar with any of it.

Besides, I’ve got a whole new avenue of exploration in this talk. It’s about language and metaphor—how we talk about what we do on the web. I’ve just finished giving another run-through at the Clearleft studio and I’m feeling pretty good about it. That’s good, because I find that giving a talk in a small room to a handful of colleagues is way more stressful than giving a talk to hundreds of people at a conference.

Just as I put together links related to last year’s talk, I figured I’d provide some hyperlinks for anyone interested in the topics raised in this new talk…

Books

• Metaphors We Live By by George Lakoff and Mark Johnson
• Understanding Comics by Scott McCloud
• Creating Killer Websites by David Siegel
• Grid Systems in Graphic Design by Josef Müller-Brockman
• 101 Things I Learned in Architecture School by Matthew Frederick
• Architectural Intelligence by Molly Wright Steenson
• A Pattern Language by Christopher Alexander, Sara Ishikawa, Murray Silverstein with Ingrid King, Shlomo Angel and Max Jacobsen
• How Buildings Learn by Stewart Brand
• Where Good Ideas Come From by Steven Johnson
• The Clock of the Long Now: Time and Responsibility by Stewart Brand

Articles

• A Dao Of Web Design by John Allsopp
• Responsive Web Design by Ethan Marcotte
• Device Agnostic by Trent Walton
• The Work I Like by Ethan Marcotte

Audio

• Christopher Alexander: A Pattern Language on Studio 360
• Molly Wright Steenson on Design Notes
• Quebec Bridge Collapse on the Brady Heywood Podcast

At the end of my new book, Going Offline, I have a little collection of resources relating to service workers. Here’s how I introduce them:

If this book were a podcast, then this would be the point at which I would be imploring you to rate me on iTunes (or I’d be telling you about a really good mattress). Instead, I’d like to give you some hyperlinks so that you can explore some of the topics in this brief book in more detail.

It always feels a little strange to publish a list of hyperlinks in a physical book, so I figured I’d republish them here for easy access…

Explanations

• Mariko Kosaka wrote and illustrated an explanation of service workers in a post on her site called “Service Worker, what are you?” (https://kosamari.com/notes/Service-Worker-what-are-you).
• Mariko also wrote and illustrated an explanation of promises called “The Promise of a Burger Party” (https://kosamari.com/notes/the-promise-of-a-burger-party).
• Ire Aderinokun wrote a clear guide to “The Service Worker Lifecycle” (https://bitsofco.de/the-service-worker-lifecycle/).
• Yoav Weiss has an explanation of different kinds of caching in “A Tale of Four Caches” (https://blog.yoav.ws/tale-of-four-caches/).

Guides

• Lyza Gardner wrote a step-by-step guide for Smashing Magazine on “Making A Service Worker: A Case Study” (https://www.smashingmagazine.com/2016/02/making-a-service-worker/).
• Jake Archibald has collected a series of service worker strategies into an “offline cookbook” (https://jakearchibald.com/2014/offline-cookbook/).
• Jake also recorded an excellent online video series that you can enjoy for free (https://www.udacity.com/course/offline-web-applications—ud899).

Examples

• Mike Riethmuller has on offline page on his site that shows articles you’ve previously visited (https://madebymike.com.au/writing/service-workers/).
• Ethan Marcotte has a similar offline page, but he also shows metadata for each article (https://ethanmarcotte.com/wrote/going-offline/).
• Una Kravets allows you to choose which pages on her site you want to save for reading offline (https://una.im/save-offline/).

Progressive web apps

• Alex Russell answers the question “What, Exactly, Makes Something A Progressive Web App?” (https://infrequently.org/2016/09/what-exactly-makes-something-a-progressive-web-app/).
• Ada Rose Cannon goes into the details of “The Building Blocks Of Progressive Web Apps” (https://www.smashingmagazine.com/2016/09/the-building-blocks-of-progressive-web-apps/).
• Aaron Gustafson quite rightly points out that “Yes, That Web Project Should Be a PWA” (https://alistapart.com/article/yes-that-web-project-should-be-a-pwa).
• Jason Grigsby outlines “The Business Case for Progressive Web Apps” (https://cloudfour.com/thinks/the-business-case-for-progressive-web-apps/).

Tools

• Google released a collection of scripts and tools for going offline called Workbox (https://developers.google.com/web/tools/workbox/).
• To get started with your manifest and service worker, you can paste your website’s URL into PWA Builder (http://preview.pwabuilder.com/).
• Lighthouse is a great testing tool for progressive web apps that’s now bundled into Chrome’s Developer Tools under the Audits panel (https://developers.google.com/web/tools/lighthouse/).

Documentation

• Over at the website of the World Wide Web Consortium (W3C) you can dig into the details of the Web App Manifest specification (https://www.w3.org/TR/appmanifest/).
• The ever-evolving service worker specification is on the W3C’s Github account (https://w3c.github.io/ServiceWorker/).

I had a really enjoyable time at Codebar Brighton last week, not least because Morty came along.

I particularly enjoy teaching people who have zero previous experience of making a web page. There’s something about explaining HTML and CSS from first principles that appeals to me. I especially love it when people ask lots of questions. “What does this element do?”, “Why do some elements have closing tags and others don’t?”, “Why is it textarea and not input type="textarea"?” The answer usually involves me going down a rabbit-hole of web archeology, so I’m in my happy place.

But there’s only so much time at Codebar each week, so it’s nice to be able to point people to other resources that they can peruse at their leisure. It turns out that’s it’s actually kind of tricky to find resources at that level. There are lots of great articles and tutorials out there for professional web developers—Smashing Magazine, A List Apart, CSS Tricks, etc.—but no so much for complete beginners.

Here are some of the resources I’ve found:

• MarkSheet by Jeremy Thomas is a free HTML and CSS tutorial. It starts with an explanation of the internet, then the World Wide Web, and then web browsers, before diving into HTML syntax. Jeremy is the same guy who recently made CSS Reference.
• Learn to Code HTML & CSS by Shay Howe is another free online book. You can buy a paper copy too. It’s filled with good, clear explanations.
• Zero to Hero Coding by Vera Deák is an ongoing series. She’s starting out on her career as a front-end developer, so her perspective is particularly valuable.

If I find any more handy resources, I’ll link to them and tag them with “learning”.