Journal tags: sun

Today was a good day. The weather was beautiful.

Jessica and I did a little bit of work in the garden—nothing too sweaty. Then Jessica cut my hair. It looks good. And it feels good to have my neck freed up.

We went for a Sunday roast at the nearest pub, which does a most excellent carvery. It was tasty and plentiful so after strolling home, I wanted to do nothing more than sit around.

I sat outside in the back garden under the dappled shade offered by the overhanging trees. I had a good book. I had my mandolin to hand. I’d reach for it occassionally to play a tune or two.

Coco the cat—not our cat—sat nearby, stretching her paws out lazily in the warm muggy air.

It was a good day.

I’m taking a nice long weekend break after dConstruct on Friday (I will of course have more to say on that—I’m collecting my thoughts still—but it was a wonderful day).

On Saturday I did absolutely nothing. It was just as well really, considering that I may have over-indulged in the pub on Friday evening after dConstruct was done. So a day of lounging around idly playing mandolin was just the ticket.

Yesterday, Sunday, I had one of those perfect leisurely days.

It began with a good bout of lazing about in the morning. Then, as lunchtime approached, Jessica and I went to a nearby pub for a Sunday Roast. In this case it was the Dover Castle. It turned out to be an excellent choice—top notch roasts!

While we were enjoying our lunch, Jessica spotted a poster on the wall for Bark In The Park, a local fun day of dog-centred activities. We were sure it had already happened earlier in Summer, but the poster said it was rescheduled to …yesterday!

So after lunch we went to the park and spent the next few hours in the sunshine, petting very good dogs and enjoying the spectacle of such catgories as “fancy dress”, “best rescue”, and “sausage catching.” We left shortly before the announcement of “best in show”—my money was on Mayhem—so I could nip home, grab my mandolin, and head to The Bugle pub for the weekly 4pm Irish music session.

After two hours of jigs’n’reels, I headed home. The weather was still lovely. The forecast was for cloudy weather, but it was unexpectedly sunny. So I fired up the outdoor grill.

We grilled: one aubergine, halved and scored; one yellow courgette, halved; one green courgette, halved; half a hispe cabbage, quartered. Once they were nicely charred outside and soft within, we ate them with a drizzle of tahini sauce, accompanied by a green salad.

By that time the sun had gone down and it was time for a nice evening spent watching the latest episode of The Rings Of Power and drinking a nice cup of tea.

Like I said, a perfect leisurely day.

On Thursday of last week, Summer arrived in England. I accept full responsibility for this. That morning I left the house early and wore a winter coat. So of course the day was filled with glorious sunshine.

I was up early to head into the Clearleft studio to do a tech check and some pre-records for the upcoming UX Fest. We’ve turned a meeting room into a very swanky-looking recording studio with proper lights, mics, and camera. I’ll be hosting UX Fest, channeling my inner Alan Partridge and Ron Burgundy.

Being back in the studio was nice. Some of my Clearleft colleagues joined the agency during The Situation so this was my first chance to meet some of them face to face (or facemask to facemask at least).

The next day I had even more opportunity to see my co-workers without the barriers of computer screens. We had a workplace walk in the countryside to mark one year of becoming an employee-owned agency. We rendezvoused at Devil’s Dyke and walked a bit of the Sussex countryside, just enough to work up an appetite and a thirst to be satiated at the nearby Shepherd and Dog pub in Fulking (near the brilliantly named Fulking Hill). We sat at tables outside, had pints of ale, and a proper pub lunch, chatting all the while, just like in The Before Times.

When I got back to Brighton I met up with Jessica for a beer in the sun before wandered down to the beach together to meet our friend Kate and celebrate her birthday.

Two days of good weather was a blessing, but it didn’t stop there. The next day, Saturday, was even sunnier. We spent the day working in the garden. We planted salads in our raised beds and then fortified those raised beds to make them impenatrable to the family of foxes living in our neighbourbood. Don’t get me wrong, the fox cubs are very cute. I just don’t want them digging up our salads.

On Sunday, Jessica and I sauntered up the hill to Brighton Racecourse so we could cheer on Jake as he finished his hundred kilometre walk from London to Brighton. Normally this would be a very strange behaviour, but it was all for a good cause.

After that, we had a pub lunch (outdoors, of course) before heading home. I spent the rest of the day sitting out in the garden, admiring the handiwork of the previous day, reading and occasionally dozing.

Today it’s more of the same. Glorious sunshine. Sitting in the garden. Reading. Playing some tunes on the mandolin. Looking forward to grilling outside for the third evening in a row.

It feels like something is changing and it’s not just the weather. The Situation, while far from ending, is certainly morphing. I still don’t plan on spending any time indoors, but with weather this good, I don’t need to.

In two weeks time I’ll get my second jab of vaccine. Two weeks after that I can start letting my guard down a bit more. Until then, I’ll be staying outdoors. If the weather continues like this, that won’t be a hardship.

I was getting reports of some odd behaviour with the service worker on thesession.org, the Irish music website I run. Someone emailed me to say that they kept getting the offline page, even when their internet connection was perfectly fine and the site was up and running.

They didn’t mind answering my pestering follow-on questions to isolate the problem. They told me that they were using the Samsung Internet browser on Android. After a little searching, I found this message on a Github thread about using waitUntil. It’s from someone who works on the Samsung Internet team:

Sadly, the asynchronos waitUntil() is not implemented yet in our browser. Yes, we will implement it but our release cycle is so far. So, for a long time, we might not resolve the issue.

A-ha! That explains the problem. See, here’s the pattern I was using:

1. When someone requests a file,
2. fetch that file from the network,
3. create a copy of the file and cache it,
4. return the contents.

Step 1 is the event listener:

// 1. When someone requests a file
addEventListener('fetch', fetchEvent => {
  let request = fetchEvent.request;
  fetchEvent.respondWith(

Steps 2, 3, and 4 are inside that respondWith:

// 2. fetch that file from the network
fetch(request)
.then( responseFromFetch => {
  // 3. create a copy of the file and cache it
  let copy = responseFromFetch.clone();
  caches.open(cacheName)
  .then( cache => {
    cache.put(request, copy);
  })
  // 4. return the contents.
  return responseFromFetch;
})

Step 4 might well complete while step 3 is still running (remember, everything in a service worker script is asynchronous so even though I’ve written out the steps sequentially, you never know what order the steps will finish in). That’s why I’m wrapping that third step inside fetchEvent.waitUntil:

// 2. fetch that file from the network
fetch(request)
.then( responseFromFetch => {
  // 3. create a copy of the file and cache it
  let copy = responseFromFetch.clone();
  fetchEvent.waitUntil(
    caches.open(cacheName)
    .then( cache => {
      cache.put(request, copy);
    })
  );
  // 4. return the contents.
  return responseFromFetch;
})

If a browser (like Samsung Internet) doesn’t understand the bit where I say fetchEvent.waitUntil, then it will throw an error and execute the catch clause. That’s where I have my fifth and final step: “try looking in the cache instead, but if that fails, show the offline page”:

.catch( fetchError => {
  console.log(fetchError);
  return caches.match(request)
  .then( responseFromCache => {
    return responseFromCache || caches.match('/offline');
  });
})

Normally in this kind of situation, I’d use feature detection to check whether a browser understands a particular API method. But it’s a bit tricky to test for support for asynchronous waitUntil. That’s okay. I can use a try/catch statement instead. Here’s what my revised code looks like:

fetch(request)
.then( responseFromFetch => {
  let copy = responseFromFetch.clone();
  try {
    fetchEvent.waitUntil(
      caches.open(cacheName)
      .then( cache => {
        cache.put(request, copy);
      })
    );
  } catch (error) {
    console.log(error);
  }
  return responseFromFetch;
})

Now I’ve managed to localise the error. If a browser doesn’t understand the bit where I say fetchEvent.waitUntil, it will execute the code in the catch clause, and then carry on as usual. (I realise it’s a bit confusing that there are two different kinds of catch clauses going on here: on the outside there’s a .then()/.catch() combination; inside is a try{}/catch{} combination.)

At some point, when support for async waitUntil statements is universal, this precautionary measure won’t be needed, but for now wrapping them inside try doesn’t do any harm.

There are a few places in chapter five of Going Offline—the chapter about service worker strategies—where I show examples using async waitUntil. There’s nothing wrong with the code in those examples, but if you want to play it safe (especially while Samsung Internet doesn’t support async waitUntil), feel free to wrap those examples in try/catch statements. But I’m not going to make those changes part of the errata for the book. In this case, the issue isn’t with the code itself, but with browser support.

When I was testing the dConstruct Audio Archive—which is now a Progressive Web App—I noticed some interesting changes in how Chrome on Android offers the “add to home screen” prompt.

It used to literally say “add to home screen.”

Now it simply says “add.”

I vaguely remember there being some talk of changing the labelling, but I could’ve sworn it was going to change to “install”. I’ve got to be honest, just having the word “add” doesn’t seem to provide much context. Based on the quick’n’dirty usability testing I did with some co-workers, it just made things confusing. “Add what?” “What am I adding?”

Additionally, the prompt appeared immediately on the first visit to the site. I thought there was supposed to be an added “engagement” metric in order for the prompt to appear; that the user needs to visit the site more than once.

You’d think I’d be happy that users will be presented with the home-screen prompt immediately, but based on the behaviour I saw, I’m not sure it’s a good thing. Here’s what I observed:

1. The user types the URL archive.dconstruct.org into the address bar.
2. The site loads.
3. The home-screen prompt slides up from the bottom of the screen.
4. The user immediately moves to dismiss the prompt (cue me interjecting “Don’t close that!”).

This behaviour is entirely unsurprising for three reasons:

1. We web designers and web developers have trained users to dismiss overlays and pop-ups if they actually want to get to the content. Nobody’s going to bother to actually read the prompt if there’s a 99% chance it’s going to say “Sign up to our newsletter!” or “Take our survey!”.
2. The prompt appears below the “line of death” so there’s no way to tell it’s a browser or OS-level dialogue rather than a JavaScript-driven pop-up from the site.
3. Because the prompt now appears on the first visit, no trust has been established between the user and the site. If the prompt only appeared on later visits (or later navigations during the first visit) perhaps it would stand a greater chance of survival.

It’s still possible to add a Progressive Web App to the home screen, but the option to do that is hidden behind the mysterious three-dots-vertically-stacked icon (I propose we call this the shish kebab icon to distinguish it from the equally impenetrable hamburger icon).

I was chatting with Andreas from Mozilla at the View Source conference last week, and he was filling me in on how Firefox on Android does the add-to-homescreen flow. Instead of a one-time prompt, they’ve added a persistent icon above the “line of death” (the icon is a combination of a house and a plus symbol).

When a Firefox 58 user arrives on a website that is served over HTTPS and has a valid manifest, a subtle badge will appear in the address bar: when tapped, an “Add to Home screen” confirmation dialog will slide in, through which the web app can be added to the Android home screen.

This kind of badging also has issues (without the explicit text “add to home screen”, the user doesn’t know what the icon does), but I think a more persistently visible option like this works better than the a one-time prompt.

Firefox is following the lead of the badging approach pioneered by the Samsung Internet browser. It provides a plus symbol that, when pressed, reveals the options to add to home screen or simply bookmark.

I don’t think Chrome for Android has any plans for this kind of badging, but they are working on letting the site authors provide their own prompts. I’m not sure this is such a good idea, given our history of abusing pop-ups and overlays.

Sadly, I feel that any solution that relies on an unrequested overlay is doomed. That’s on us. The way we’ve turned browsing the web—especially on mobile—into a frustrating chore of dismissing unwanted overlays is a classic tragedy of the commons. We blew it. Users don’t trust unrequested overlays, and I can’t blame them.

For what it’s worth, my opinion is that ambient badging is a better user experience than one-time prompts. That opinion is informed by a meagre amount of testing though. I’d love to hear from anyone who’s been doing more detailed usability testing of both approaches. I assume that Google, Mozilla, and Samsung are doing this kind of testing, and it would be really great to see the data from that (hint, hint).

But it might well be that ambient badging is just too subtle to even be noticed by the user.

On one end of the scale you’ve got the intrusiveness of an add-to-home-screen prompt, but on the other end of the scale you’ve got the discoverability problem of a subtle badge icon. I wonder if there might be a compromise solution—maybe a badge icon that pulses or glows on the first or second visit?

Of course that would also need to be thoroughly tested.

I was in Amsterdam again at the start of last week for the Progressive Web App Dev Summit, organised by Google. Most of the talks were given by Google employees, but not all—this wasn’t just a European version of Google I/O. Representatives from Opera, Mozilla, Samsung, and Microsoft were also there, and there were quite a few case studies from independent companies. That was very gratifying to see.

Almost all the talks were related to progressive web apps. I say, “almost all” because there were occasional outliers. There was a talk on web components, which don’t have anything directly to do with progressive web apps (and I hope there won’t be any attempts to suggest otherwise), and another on rendering performance that had good advice for anyone building any kind of website. Most of the talks were about the building blocks of progressive web apps: HTTPS, Service Workers, push notifications, and all that jazz.

I was very pleased to see that there was a move away from the suggesting that single-page apps with the app-shell architecture model were the only way of building progressive web apps.

Need to do more to change the perception that a progressive web app must be a single-page client-rendered app #pwadevsummit

— Jake Archibald (@jaffathecake) June 21, 2016

There were lots of great examples of progressively enhancing existing sites into progressive web apps. Jeff Posnick’s talk was a step-by-step walkthrough of doing exactly that. Reading through the agenda, I was really happy to see this message repeated again and again:

In this session we’ll take an online-only site and turn it into a fully network-resilient, offline-first installable progressive web app. We’ll also break out of the app shell and look at approaches that better-suit traditional server-driven sites.

Progressive Web Apps should work everywhere for every user. But what happens when the technology and API’s are not available for in your users browser? In this talk we will show you how you can think about and build sites that work everywhere.

Progressive Web Apps should load fast, work great offline, and progressively enhance to a better experience in modern browsers.

How do you put the “progressive” into your current web app?

You can (and should!) build for the latest and greatest browsers, but through a collection of fallbacks and progressive enhancements you can bring a lot tomorrow’s web to yesterday’s browsers.

I think this is a really smart move. It’s a lot easier to sell people on incremental changes than it is to convince them to rip everything out and start from scratch (another reason why I’m dubious about any association between web components and progressive web apps—but I’ll save that for another post).

The other angle that I really liked was the emphasis on emerging markets, not just wealthy westerners. Tal Oppenheimer’s talk Building for Billions was superb, and Alex kicked the whole thing off with some great facts and figures on mobile usage.

In my mind, these two threads are very much related. Progressive enhancement allows us to have our progressive web app cake and eat it too: we can make websites that can be accessed on devices with limited storage and slow networks, while at the same time ensuring those same sites take advantage of all the newest features in the latest and greatest browsers. I talked to a lot of Google devs about ways to measure the quality of a progressive web app, and I’m coming to the conclusion that a truly high-quality site is one that can still be accessed by a proxy browser like Opera Mini, while providing a turbo-charged experience in the latest version of Chrome. If you think that sounds naive or unrealistic, then I think you might want to dive deeper into all the technologies that make progressive web apps so powerful—responsive design, Service Workers, a manifest file, HTTPS, push notifications; all of those features can and should be used in a layered fashion.

Speaking of Opera, Andreas kind of stole the show, demoing the latest interface experiments in Opera Mobile.

That ambient badging that Alex was talking about? Opera is doing it. The importance of being able to access URLs that I’ve been ranting about? Opera is doing it.

Then we had the idea to somehow connect it to the “pull-to-refresh” spinner, as a secondary gesture to the left or right.

Nice! I’m looking forward to seeing what other browsers come up with it. It’s genuinely exciting to see all these different browser makers in complete agreement on which standards they want to support, while at the same time differentiating their products by competing on user experience. Microsoft recently announced that progressive web apps will be indexed in their app store just like native apps—a really interesting move.

The Progressive Web App Dev Summit wrapped up with a closing panel, that I had the honour of hosting. I thought it was very brave of Paul to ask me to host this, considering my strident criticism of Google’s missteps.

Initially there were going to be six people on the panel. Then it became eight. Then I blinked and it suddenly became twelve. Less of a panel, more of a jury. Half the panelists were from Google and the other half were from Opera, Microsoft, Mozilla, and Samsung. Some of those representatives were a bit too media-trained for my liking: Ali from Microsoft tried to just give a spiel, and Alex Komoroske from Google wouldn’t give me a straight answer about whether he wants Android Instant apps to succeed—Jake was a bit more honest. I should have channelled my inner Paxman a bit more.

Needless to say, nobody from Apple was at the event. No surprise there. They’ve already promised to come to the next event. There won’t be an Apple representative on stage, obviously—that would be asking too much, wouldn’t it? But at least it looks like they’re finally making an effort to engage with the wider developer community.

All in all, the Progressive Web App Dev Summit was good fun. I found the event quite inspiring, although the sausage festiness of the attendees was depressing. It would be good if the marketing for these events reached a wider audience—I met a lot of developers who only found out about it a week or two before the event.

I really hope that people will come away with the message that they can get started with progressive web apps right now without having to re-architect their whole site. Right now the barrier to entry is having your site running on HTTPS. Once you’ve got that up and running, it’s pretty much a no-brainer to add a manifest file and a basic Service Worker—to boost performance if nothing else. From there, you’re in a great position to incrementally add more and more features—an offline-first approach with your Service Worker, perhaps? Or maybe start dabbling in push notifications. The great thing about all of these technologies (with the glaring exception of web components in their current state) is that you don’t need to bet the farm on any of them. Try them out. Use them as enhancements. You’ve literally got nothing to lose …and your users have everything to gain.

Today was a very lazy day. I suppose that’s okay—it is a Sunday after all. But I do feel guilty. I had planned to get some writing done. At the very least I could have made the most of the beautiful weather and gone for an invigorating constitutional perambulation. Instead I stayed in, playing the occasional tune on the bouzouki, but mostly playing a computer game: Portal 2. I know it’s ancient in the dog years of gaming, but as the most casual of casual gamers, I get to reap the rewards of good games long after their prime.

Summer burst into life today. The sun shone out of a clear bright blue sky, warming up the ground and the air below.

This weather suits Brighton. The town was positively preening. Admittedly the town centre was pretty much like any other town centre on a hot day, but if you went down to the seafront you’d have seen a beautiful sight. The water was so calm and placid, its surface broken only by the occasional paddle board or kayak.

Today was the perfect day to get a sandwich, hunker down on the beach’s pebbles and fight off feral seagulls.

Today was a nice quiet Sunday. I did my usual weekly tasks—doing database exports and backing my hard drive. I played some tunes on my bouzouki. I probably should’ve played more. I posted over a half dozen links, wrote two other entries in this journal, and just one note. I didn’t post any pictures today, but yesterday almost every one of my eleven notes had a photo.

I was going to finish the day by stepping outside to watch the ISS fly overhead but the clouds have conspired against me. So instead I finish by writing one hundred words.

At Clearleft towers, we’ve been having semi-regular movie nights, based around a connecting theme. Previous themes include car chases (The French Connection, Bullitt and Ronin) and films set at Christmas that aren’t about Christmas (Gremlins and Die Hard).

Last week’s movie night’s theme was near-future science fiction. We didn’t get around to watching Minority Report but we did watch Children of Men and Sunshine.

Danny Boyle’s Sunshine is one of those films that gets better with each viewing. Little by little, it’s edging up my list of all-time favourites. It has a sense of awe, wonder and humility in the face of science that’s genuinely Clarkeian.

It also has plenty of loving references to those other films featuring the trifecta of sci-fi elements: a ship, a crew, a signal. The nods to 2001 and Alien are clear, but something I didn’t catch until just the other day was that the character of Pinbacker was named for Sergeant Pinback from John Carpenter’s Dark Star.

I know this because, instead of our usual Thursday evening pub gathering and book swapping, the Brighton Speculative Fiction Group this week hosted a puppet show. Paul and Richard recreated all of Dark Star using cardboard, some string, a few dolls and some strategic lighting.

It was one of the best things I’ve ever seen. Here’s the highlight reel.