🤔️ Home-brewing - Adding @clagnut’s hyphenation and other offline enhancements

After I added an offline page to my website at last week’s homebrew, I couldn’t help but tinker with the page a little more and a list of pages stored in the cache.

It didn’t take very long as I lifted the code straight from the Clearleft site. Jeremy pointed out a bit of javascript that loops through the pages stored in the cache and outputs them in an unordered list. Job done.

Well, not quite. On my site, as well as urls, the list also included other files requested e.g. images and CSS. Now I need to store those files for a consistent offline experience but they’re not necessary in this context.

I had a quick chat with Jeremy and Mark about the merits of updating the serviceworker.js to store assets and pages separately in the cache, or just adding a few lines to the javascript to only output HTML files.

As all of my image and CSS files are in an /assets/ directory it was as simple as outputting urls that didn’t contain that in the string. A few StackOverflow pages later and a bit of time messing about with JSBin and I was there. Job done proper.

With about 20 mins to spare I took a look at Richard’s recent CSS hyphenation post that had been sat in one of my browser tabs for that past few days.

It turns out hyphenation is readily available in modern browsers and adding to your site is a simple 2 step process. A perfect candidate for wrapping up this week’s homebrew.

A few lines of code and a deployment later and I was up and running with hyphenated text.

Rich’s article gets into the nitty gritty of the detail of the different properties, which at some point I want to return to but for now I’m happy with the addition.

Another highly productive 90 mins.

Homebrew website club is on every Thursday evening 6.00-7.30pm at Clearleft. You should come along!