Tags: local

24

sparkline

Thursday, November 23rd, 2017

Localisation and Translation on the Web

Practical advice from Ire on localising web pages.

Monday, October 2nd, 2017

eBay’s Font Loading Strategy | eBay Tech Blog

Here’s the flow that eBay use for the font-loading. They’ve decided that on the very first page view, seeing a system font is an acceptable trade-off. I think that makes sense for their situation.

Interestingly, they set a flag for subsequent visits using localStorage rather than a cookie. I wonder why that is? For me, the ability to read cookies on the server as well as the client make them quite handy for situations like this.

Thursday, September 21st, 2017

Chrome to force .dev domains to HTTPS via preloaded HSTS

Well, I guess it’s time to change all my locally-hosted sites from .dev domains to .test. Thanks, Google.

Tuesday, May 23rd, 2017

Going offline at Indie Web Camp Düsseldorf

I’ve just come back from a ten-day trip to Germany. The trip kicked off with Indie Web Camp Düsseldorf over the course of a weekend.

IndieWebCamp Düsseldorf 2017

Once again the wonderful people at Sipgate hosted us in their beautiful building, and once again myself and Aaron helped facilitate the two days.

IndieWebCamp Düsseldorf 2017

Saturday was the BarCamp-like discussion day. Plenty of interesting topics were covered. I led a session on service workers, and that’s also what I decided to work on for the second day—that’s when the talking is done and we get down to making.

IndieWebCamp Düsseldorf 2017 IndieWebCamp Düsseldorf 2017 IndieWebCamp Düsseldorf 2017 IndieWebCamp Düsseldorf 2017

I like what Ethan is doing on his offline page. He shows a list of pages that have been cached, but instead of just listing URLs, he shows a title and description for each page.

I’ve already got a separate cache for pages that gets added to as the user browses around my site. I needed to figure out a way to store the metadata for those pages so that I could then display it on the offline page. I came up with a workable solution, and interestingly, it involved no changes to the service worker script at all.

When you visit any blog post, I put metadata about the page into localStorage (after first checking that there’s an active service worker):

if (navigator.serviceWorker && navigator.serviceWorker.controller) {
  window.addEventListener('load', function() {
    var data = {
      "title": "A minority report on artificial intelligence",
      "description": "Revisiting Spielberg’s films after a decade and a half.",
      "published": "May 7th, 2017",
      "timestamp": "1494171049"
    };
    localStorage.setItem(
      window.location.href,
      JSON.stringify(data)
    );
  });
}

In my case, I’m outputting the metadata from the server, but you could just as easily grab some from the DOM like this:

var data = {
  "title": document.querySelector("title").innerText,
  "description": document.querySelector("meta[name='description']").getAttribute("contents")
}

Meanwhile in my service worker, when you visit that same page, it gets added to a cache called “pages”. Both localStorage and the cache API are using URLs as keys. I take advantage of that on my offline page.

The nice thing about writing JavaScript on my offline page is that I know the page will only be seen by modern browsers that support service workers, so I can use all sorts of fancy from ES6, or whatever we’re calling it now.

I start by looping through the keys of the “pages” cache (that’s right—the cache API isn’t just for service workers; you can access it from any script). Then I check to see if there is a corresponding localStorage key with the same string (a URL). If there is, I pull the metadata out of local storage and add it to an array called browsingHistory:

const browsingHistory = [];
caches.open('pages')
.then( cache => {
  cache.keys()
  .then(keys => {
    keys.forEach( request => {
      let data = JSON.parse(localStorage.getItem(request.url));
        if (data) {
          data['url'] = request.url;
          browsingHistory.push(data);
      }
    });

Then I sort the list of pages in reverse chronological order:

browsingHistory.sort( (a,b) => {
  return b.timestamp - a.timestamp;
});

Now I loop through each page in the browsing history list and construct a link to each URL, complete with title and description:

let markup = '';
browsingHistory.forEach( data => {
  markup += `
<h2><a href="${ data.url }">${ data.title }</a></h2>
<p>${ data.description }</p>
<p class="meta">${ data.published }</p>
`;
});

Finally I dump the constructed markup into a waiting div in the page with an ID of “history”:

let container = document.getElementById('history');
container.insertAdjacentHTML('beforeend', markup);

All those steps need to be wrapped inside the then clause attached to caches.open("pages") because the cache API is asynchronous.

There you have it. Now if you’re browsing adactio.com and your network connection drops (or my server goes offline), you can choose from a list of pages you’ve previously visited.

The current situation isn’t ideal though. I’ve got a clean-up operation in my service worker to limit the number of items stored in my “pages” cache. The cache never gets bigger than 35 items. But there’s no corresponding clean-up of metadata stored in localStorage. So there could be a lot more bits of metadata in local storage than there are pages in the cache. It’s not harmful, but it’s a bit wasteful.

I can’t do a clean-up of localStorage from my service worker because service workers can’t access localStorage. There’s a very good reason for that: the localStorage API is synchronous, and everything that happens in a service worker needs to be asynchronous.

Service workers can access indexedDB: it’s asynchronous. I could use indexedDB instead of localStorage, but I’m not a masochist. My best bet would be to use the localForage library, which wraps indexedDB in the simple syntax of localStorage.

Maybe I’ll do that at the next Homebrew Website Club here in Brighton.

Sunday, May 14th, 2017

ngrok - secure introspectable tunnels to localhost

This looks like a useful tool, not just for testing locally-hosted sites (say, at a device lab), but also for making locally-hosted sites run on HTTPS so you can test service workers.

Friday, April 21st, 2017

Brighton digital companies just did something brilliant… | Declan Cassidy

A write-up of the BrightSparks programme that Clearleft is taking part in.

Each company agreed to help support one local child from a low-income family, on free school meals or with a yearly household income of under £25k.

Thursday, June 30th, 2016

Brighton Astro

The website for Brighton’s astronomy meet up:

Every month we will have one or two talks aimed at beginners with an interest in learning more about astronomy, but assuming no prior knowledge.

Also, we will take our telescopes out to observe in and around Brighton on clear evenings - on the seafront, Hove and Preston Park, Devil’s Dyke and beyond.

Tuesday, March 3rd, 2015

localFont - A localStorage solution for web font loading

A quick drag’n’drop way to base 64 encode your web fonts so you can stick ‘em in local storage.

Monday, September 22nd, 2014

[this is aaronland] upload.js

A really handy bit of code from Aaron for building a robust file uploader. A way to make your web-based photo sharing more Instagrammy-clever.

Tuesday, July 29th, 2014

Let’s Talk About RTL

Some very handy techniques for working with right-to-left text.

Tuesday, July 10th, 2012

Mobile > Local « Karen McGrane

Yes, yes, yes! Karen drives home the difference between mobile and local (and there’s more about the myth of the mobile context).

If you’re making an argument for delivering different content to mobile users, or prioritizing content differently based on their context of use, stop for a minute and ask yourself if you mean local content. And if you do mean local content, then say that. Claiming that your travel example extends to cover the “mobile use case” leaves out millions of tasks and users.

Just to belabor this point: people use mobile devices in every location, in every context. Just because you know what type of device someone is using or where she is doesn’t tell you anything about her intention.

Monday, June 11th, 2012

xip.io: wildcard DNS for everyone

It took me a while to get my head ‘round it, but this routing service from 37 Signals is handy for testing local sites on multiple devices (kind of like showoff.io).

Wednesday, March 28th, 2012

Localgram

I like this simple idea, nicely executed: see Instagram photos taken near you.

Monday, August 15th, 2011

localtunnel: instantly show localhost to the rest of the world

An alternative to showoff.io for sharing your locally-hosted sites.

Thursday, August 4th, 2011

LocalStorage in use on the Fontdeck Website | Fontdeck Blog

Listen to Josh explain a genuinely useful example of HTML5’s local storage that he’s added to Fontdeck.

Monday, June 13th, 2011

creding/That-s-Awesome - GitHub

A handy little applescript that takes care of the automation of creating localhost sites on the mac.

Sunday, April 24th, 2011

Showoff

This could be a handy little service for sharing locally-hosted sites.

Friday, September 24th, 2010

Google LatLong: Finding Places on the Web: Rich Snippets for Local Search

If you aren't already marking up addresses in hCard, you really, really, really should start.

Sunday, December 13th, 2009

Code: Flickr Developer Blog » Language Detection: A Witch’s Brew?

This. This right here is how you manage sites in multiple languages. Are you listening, Google?

Friday, October 16th, 2009

Brighton's existentialist chalkboard (From The Argus)

In local news: Area man receives messages from chalkboard.