Tags: 100

229

sparkline

Sunday, November 17th, 2019

Picture 1 Picture 2 Picture 3

The Ballardian exterior of Tempelhof.

Checked in at Flughafen Berlin Tempelhof. with Jessica map

Checked in at Flughafen Berlin Tempelhof. with Jessica

Thursday, October 24th, 2019

Markup.

Markup.

Sunday, October 13th, 2019

100 words in a 100 days – Monique Dubbelman

I was chatting with Monique after her Paris Web talk on doing 100 days of code. I told her about my 100 days project and now she’s doing it too!

Friday, October 11th, 2019

Chagall’s ceiling.

Chagall’s ceiling.

Wednesday, September 25th, 2019

Checked in at Lamiak. Gilda monster! — with Jessica map

Checked in at Lamiak. Gilda monster! — with Jessica

Wednesday, September 18th, 2019

Replying to

That is unkind.

Monday, September 9th, 2019

We should work toward a universal linked information system, in which generality and portability are more important than fancy graphics techniques and complex extra facilities.

Sunday, August 25th, 2019

Going to Chicago. brb

Thursday, July 25th, 2019

Replying to

Ah, I see. Sounds like a shitty app. Or maybe it’s a shitty iOS-level sharing thing.

Wednesday, July 10th, 2019

Checked in at Tom Malone's Pub & Market House. 🎶 — with Jessica map

Checked in at Tom Malone’s Pub & Market House. 🎶 — with Jessica

Tuesday, July 9th, 2019

Checked in at Clery's. 🎶 — with Jessica map

Checked in at Clery’s. 🎶 — with Jessica

Monday, July 1st, 2019

Picture 1 Picture 2 Picture 3 Picture 4

Behind the scenes of #PatternsDay.

Friday, June 28th, 2019

@NikkitaFTW

@NikkitaFTW

Wednesday, June 26th, 2019

Checked in at Duke of York's Picturehouse for Apollo 11. Apollo 11 — with Jessica map

Checked in at Duke of York’s Picturehouse for Apollo 11. Apollo 11 — with Jessica

Monday, June 24th, 2019

Am I cached or not?

When I was writing about the lie-fi strategy I’ve added to adactio.com, I finished with this thought:

What I’d really like is some way to know—on the client side—whether or not the currently-loaded page came from a cache or from a network. Then I could add some kind of interface element that says, “Hey, this page might be stale—click here if you want to check for a fresher version.”

Trys heard my plea, and came up with a very clever technique to alter the HTML of a page when it’s put into a cache.

It’s a function that reads the response body stream in, returning a new stream. Whilst reading the stream, it searches for the character codes that make up: <html. If it finds them, it tacks on a data-cached attribute.

Nice!

But then I was discussing this issue with Tantek and Aaron late one night after Indie Web Camp Düsseldorf. I realised that I might have another potential solution that doesn’t involve the service worker at all.

Caveat: this will only work for pages that have some kind of server-side generation. This won’t work for static sites.

In my case, pages are generated by PHP. I’m not doing a database lookup every time you request a page—I’ve got a server-side cache of posts, for example—but there is a little bit of assembly done for every request: get the header from here; get the main content from over there; get the footer; put them all together into a single page and serve that up.

This means I can add a timestamp to the page (using PHP). I can mark the moment that it was served up. Then I can use JavaScript on the client side to compare that timestamp to the current time.

I’ve published the code as a gist.

In a script element on each page, I have this bit of coducken:

var serverTimestamp = <?php echo time(); ?>;

Now the JavaScript variable serverTimestamp holds the timestamp that the page was generated. When the page is put in the cache, this won’t change. This number should be the number of seconds since January 1st, 1970 in the UTC timezone (that’s what my server’s timezone is set to).

Starting with JavaScript’s Date object, I use a caravan of methods like toUTCString() and getTime() to end up with a variable called clientTimestamp. This will give the current number of seconds since January 1st, 1970, regardless of whether the page is coming from the server or from the cache.

var localDate = new Date();
var localUTCString = localDate.toUTCString();
var UTCDate = new Date(localUTCString);
var clientTimestamp = UTCDate.getTime() / 1000;

Then I compare the two and see if there’s a discrepency greater than five minutes:

if (clientTimestamp - serverTimestamp > (60 * 5))

If there is, then I inject some markup into the page, telling the reader that this page might be stale:

document.querySelector('main').insertAdjacentHTML('afterbegin',`
  <p class="feedback">
    <button onclick="this.parentNode.remove()">dismiss</button>
    This page might be out of date. You can try <a href="javascript:window.location=window.location.href">refreshing</a>.
  </p>
`);

The reader has the option to refresh the page or dismiss the message.

This page might be out of date. You can try refreshing.

It’s not foolproof by any means. If the visitor’s computer has their clock set weirdly, then the comparison might return a false positive every time. Still, I thought that using UTC might be a safer bet.

All in all, I think this is a pretty good method for detecting if a page is being served from a cache. Remember, the goal here is not to determine if the user is offline—for that, there’s navigator.onLine.

The upshot is this: if you visit my site with a crappy internet connection (lie-fi), then after three seconds you may be served with a cached version of the page you’re requesting (if you visited that page previously). If that happens, you’ll now also be presented with a little message telling you that the page isn’t fresh. Then it’s up to you whether you want to have another go.

I like the way that this puts control back into the hands of the user.

Monday, June 3rd, 2019

Checked in at The Bugle Inn. with Jessica map

Checked in at The Bugle Inn. with Jessica

Wednesday, May 29th, 2019

This pub dog is gettin’ good scritches.

This pub dog is gettin’ good scritches.

Saturday, May 11th, 2019

Checked in at sipgate GmbH. Indie Web Camp — with Tantek, aaronpk, Joschi, Rosemary map

Checked in at sipgate GmbH. Indie Web Camp — with Tantek, aaronpk, Joschi, Rosemary

Tuesday, April 23rd, 2019

Looking at the schedule for @ParisWeb this October, I think I’m in the René Descartes room, therefore I am in the René Descartes room.

https://www.paris-web.fr/2019/conferences/going-offline.php