Save the dates folks!

On Saturday 22nd September and Sunday 23rd September we will be having the first ever Oxford IndieWebCamp!

It is a free event, but I would ask that you register on Eventbrite, so I can get an idea of numbers.

IndieWebCamp is a weekend gathering of web creators building & sharing their own websites to advance the independent web and empower ourselves and others to take control of our online identities and data.

It is open to all skill levels, from people who want to get started with a web site, through to experienced developers wanting to tackle a specific personal project.

I gave a little presentation about the Indieweb at JS Oxford earlier this year if you want to know more.

Huge thanks to our sponsors for the event, Haybrook IT and White October.

Christopher Noessel at the great Sci-fi Interfaces has been publishing a series of posts analysing Artificial Intelligence in film:

Sci-fi, my reasoning goes, plays an informal and largely unacknowledged role in setting public expectations and understanding about technology in general and AI in particular. That, in turn, affects public attitudes, conversations, behaviors at work, and votes. If we found that sci-fi was telling the public misleading stories over and over, we should make a giant call for the sci-fi creating community to consider telling new stories. It’s not that we want to change sci-fi from being entertainment to being propaganda, but rather to try and take its role as informal opinion-shaper more seriously.

Now that the series has come to end, Sebastian Sadowski has visualised the findings from the posts making it easier to explore the themes and relationships between films.

Pie fans ahoy! With over 600 pie reviews, Pierate is surely the web’s premier pie resource. We’ve been eating and rating pies according to the ‘Seven Cs’ since 2009.

I’ve found my people.

Over the last couple of weeks I’ve been reading Jeremy’s excellent book Going Offline. It’s a step by step exploration of Service Workers. If you’re not sure what a Service Worker is the Mozilla Developer Network has a series of articles to get you up to speed:

Service workers essentially act as proxy servers that sit between web applications, the browser, and the network (when available). They are intended, among other things, to enable the creation of effective offline experiences, intercept network requests and take appropriate action based on whether the network is available, and update assets residing on the server. They will also allow access to push notifications and background sync APIs.

I already had a service worker on this site that had been built with Google’s Workbox library, but it always felt a little like “magic” to me. I wasn’t entirely sure what was going on under the hood, and I only ever managed to get it to do some caching of static assets, nothing more interesting than that. It felt like I was learning how to use a library, not the underlying tool.

That all changed with Going Offline. With his typical self-effacing humour (chapter titles include Making Fetch Happen and Cache Me If You Can), and easy manner, Jeremy explains how Service Workers, uh, work, the clever things you can do with them, and most importantly, how to build your own. Not only that, but it also acts as a great introduction to asynchronous JavaScript, something I’ve had real problems getting my head around. I’m still a long way from being proficient, but thanks to this book, I feel like I “get” it now.

To that end, this site now has its own home-grown, organic, corn fed, Service Worker.

As well as the caching of static assets it now cleans up after itself by deleting old caches, and more importantly will serve an off-line page if the user’s connection goes down. That page isn’t anything special right now, but one of the techniques that Jeremy talks about is caching pages that the user has visited, so at least they can load something from the past. One for me to think about.

I highly recommend picking up a copy of Going Offline, it’s a brilliant read and a great introduction into the power of Service Workers.

Today I replaced the Skeleton based layout on this site with a CSS Grid based layout. I’ve been wanting to make the move for a while and finally found the time after waking up at stupid o’clock this morning.

I wanted to do a like-for-like replacement and stick with the 12 column layout. I’m not quite ready for a complete redesign just yet.

Based on this clever repeating column trick from the Mozilla Developer Network this is how I went about it.

First up, create a 12 column grid I can add to any container I want:

.layout {
    display: grid;
    grid-template-columns: repeat(12, [col-start] 1fr);
    grid-column-gap: 2rem;
}

Taking a small-screen first approach, set the immediate children to span 10 of the columns, offset by one:

.layout > * {
    /* All grid elements to span 10 cols offset by 1 */
    grid-column: col-start 2 / span 10;
}

Adding my .layout class to the header and footer elements, and then wrapping main and aside in a div with that class gave me my basic layout. Then as the viewport gets wider, I can just do this on the required breakpoints:

@media screen and (min-width: 1000px) {
    .layout-main {
        grid-column: col-start 2 / span 5;
    }

    .layout-sidebar {
        grid-column: col-start 8 / span 4;
    }
}

I could have simplified the syntax and removed the line names by omitting col-start, but named lines are very powerful and I might want to play with them later.

The end result is my CSS payload has gone from around 20k to just under 6k, and my markup is a lot simpler.

It was ridiculously quick and painless. From branching my repository to deploying the final code took just over an hour, and I’m sure fifteen minutes of that was me double checking I hadn’t missed something. As Jeremy said :

I think I may need to recalibrate the estimation part of my brain to account for just how powerful CSS grid is.

(Thanks to Mat for pointing me towards to Pun Generator for the title)

Ethan wrote today about his gif repository and how he manages it. As some friends will know I also have a repository, which was entirely inspired by Ethan.

I say “inspired”, what I mean is “blatantly ripped off from”.

The repository sits in a subdirectory hanging off one of my domains. I can’t quite remember why it ended up in a subdirectory, it’s not like I’m running short of domains, but there it sits. One thing on my to-do list is moving it somewhere else.

Like Ethan there isn’t much technical going on behind the scenes, it’s a standard Apache directory listing which gives me simple ordering. It’s refreshing in an old school way, but I do sometimes get the itch to dig into Apache’s AutoIndex Formatting and fancy it up a bit.

Transferring files isn’t something I’ve spent a huge amount of time over. I’ve always been a bit of command line nerd, so interesting files get saved to my desktop, and then secure copied up to the server. It happens so often now that there are 75 entries in my history file for running that one command for the last 3 months alone.

This post came about from a little back and forth with Ethan where I said I would write something, and he’s good people, so I hate to let him down.

Plus it’s fun to write about little projects.

Go forth and create little projects!

A fascinating and poignant Twitter thread from Marcin Wichary, about user interfaces that accidentally collect memories, and tell a story about the past.

Fascinated by UIs that accidentally amass memories. One of them is the wi-fi “preferred networks” pane – unexpected reminders of business trips, vacations, accidental detours, once frequented and now closed cafés. pic.twitter.com/r137dZI0r8

— Marcin Wichary (@mwichary) 14 May 2018

I wonder what I would see if I fired up any of the old social apps I don’t use any more, like Adium, or Textual.

Via this ongoing Metafilter post with more funny and sad stories of accidental memories.

Tetris, on a bloody soldering iron!

Each time you lose the game the soldering iron tip temperature increases by 10 degrees.

Via this Metafilter thread about the Nintendo Switch exploit.

Well I would say that, wouldn’t I.

I’m referring to a recent edition of Jason Kottke and Tim Carmody’s Noticing newsletter.

Jason asked Noticing readers to send in links to their blogs and newsletters, or their favourite blogs and newsletters written by someone else, and as he says:

My inbox exploded with replies. I couldn’t include all (or even most!) of the links I got, but below is a good sampling representative of the types of blogs and newsletters I received.

It’s a great list, and I’ll be adding a few of them to my RSS feeds.

There’s also a fantastic quote from Kari about why she writes:

I also keep it out of spite, because I refuse to let social media take everything. Those shapeless, formless platforms haven’t earned it and don’t deserve it. I’ve blogged about this many times, but I still believe it: When I log into Facebook, I see Facebook. When I visit your blog, I see you.

This place feels more like me than any other platform I use out there.

Dubstep songs are often criticized as sound extremely computer generated and often just too aggressive/“digital” for a lot of people to enjoy. It’s not uncommon for people to joke that they sound like someone had added a bassline and drums to modem noises

For some tracks this is truer than others. After all, it’s a genre with more aggressive interpretations and more relaxed ones.

But that had me thinking, how much effort would it be to actually embed machine readable data inside a dubstep track, while ensuring that the sound could be enjoyed by humans as well…

Encoding data in dubstep drops.

I want to call this something punny. Dubsteg? Dubsteganography? Dubstepanography?

Via O’Reilly’s Four Short Links (which is well worth space in your RSS reader).