Archive: May, 2017 sparkline

                    5th                     10th                     15th                     20th                     25th                     30th     
12am          
4am      
8am                                    
12pm                                    
4pm                                      
8pm                  

Wednesday, May 31st, 2017

HN PWA - Hacker News readers as Progressive Web Apps

Of all the sites to pick to demo progressive web apps, we get the cesspit that is Hacker News …I guess it is possible to polish a turd.

Anyway, here are some examples of using frameworks to create alternative Hacker News readers. So the challenge here is to display some text to read..

Four of them render absolutely no content without JavaScript.

In the Hall of Shame we have React, Preact, Angular, and Polymer.

In the Hall of Fame, we have the ones doing it right: React, Vue, and Viper.

That’s right: React appears in both. See, it’s not about the tools; it’s about how you use ‘em.

Pssst …I’ve got a sekrit diskownt for @PixelPioneers in Bristol on June 22nd:

https://ti.to/pixel-pioneers/bristol-2017/discount/speaker15

Responsive Design for Motion | WebKit

A really great overview of using prefers-reduced-motion to tone down CSS animations.

This post was written by James Craig, and I’m going to take this opportunity to say a big “thank you!” to James for all the amazing accessibility work he has been doing at Apple through the years. The guy’s a goddamn hero!

@media (prefers-reduced-motion) {
    *:hover, *:focus {
        transform: none !important;
    }
}

Emmet Re:view — fast and easy way to test responsive design in multiple viewports

It’s no substitute for testing with real devices, but the “device wall” view in this Chrome plug-in is a nifty way of getting an overview of a site’s responsiveness at a glance.

A Love Letter to CSS

My argument is relatively simple: creating a comprehensive styling mechanism for building complex user interfaces is startlingly hard, and every alternative to CSS is much worse. Like, it’s not even close.

I’m more concerned about HTML-in-JS than I am about CSS-in-JS.

Tuesday, May 30th, 2017

Micropub is a W3C Recommendation • Aaron Parecki

I was just talking about micropub …and now it’s officially a W3C spec. Great work!

If you’re building a blogging platform, you can allow your users choose from a wide variety of posting clients by implementing the Micropub spec.

If you’re building a posting client and want it to work with many different server backends instead of hard-coding it to Twitter or other proprietary APIs, implement the Micropub spec and you’ll quickly have people eager to start using the app!

Checking in at Indie Web Camp Nuremberg

Once I finished my workshop on evaluating technology I stayed in Nuremberg for that weekend’s Indie Web Camp.

IndieWebCamp Nuremberg

Just as with Indie Web Camp Düsseldorf the weekend before, it was a fun two days—one day of discussions, followed by one day of making.

IndieWebCamp Nuremberg IndieWebCamp Nuremberg IndieWebCamp Nuremberg IndieWebCamp Nuremberg

I spent most of the second day playing around with a new service that Aaron created called OwnYourSwarm. It’s very similar to his other service, OwnYourGram. Whereas OwnYourGram is all about posting pictures from Instagram to your own site, OwnYourSwarm is all about posting Swarm check-ins to your own site.

Usually I prefer to publish on my own site and then push copies out to other services like Twitter, Flickr, etc. (POSSE—Publish on Own Site, Syndicate Elsewhere). In the case of Instagram, that’s impossible because of their ludicrously restrictive API, so I have go the other way around (PESOS—Publish Elsewhere, Syndicate to Own Site). When it comes to check-ins, I could do it from my own site, but I’d have to create my own databases of places to check into. I don’t fancy that much (yet) so I’m using OwnYourSwarm to PESOS check-ins.

The great thing about OwnYourSwarm is that I didn’t have to do anything. I already had the building blocks in place.

First of all, I needed some way to authenticate as my website. IndieAuth takes care of all that. All I needed was rel="me" attributes pointing from my website to my profiles on Twitter, Flickr, Github, or any other services that provide OAuth. Then I can piggyback on their authentication flow (this is also how you sign in to the Indie Web wiki).

The other step is more involved. My site needs to provide an API endpoint so that services like OwnYourGram and OwnYourSwarm can post to it. That’s where micropub comes in. You can see the code for my minimal micropub endpoint if you like. If you want to test your own micropub endpoint, check out micropub.rocks—the companion to webmention.rocks.

Anyway, I already had IndieAuth and micropub set up on my site, so all I had to do was log in to OwnYourSwarm and I immediately started to get check-ins posted to my own site. They show up the same as any other note, so I decided to spend my time at Indie Web Camp Nuremberg making them look a bit different. I used Mapbox’s static map API to show an image of the location of the check-in. What’s really nice is that if I post a photo on Swarm, that gets posted to my own site too. I had fun playing around with the display of photo+map on my home page stream. I’ve made a page for keeping track of check-ins too.

All in all, a fun way to spend Indie Web Camp Nuremberg. But when it came time to demo, the one that really impressed me was Amber’s. She worked flat out on her site, getting to the second level on IndieWebify.me …including sending a webmention to my site!

IndieWebCamp Nuremberg

Under-Engineered Custom Radio Buttons and Checkboxen | Adrian Roselli

Stylish and accessible checkboxes and radio buttons accompanied by an explanation of the CSS involved.

No images were harmed in the making of these form controls.

An introduction to CSS Grid | Charlotte Jackson, Front-end developer

Charlotte has caught the CSS Grid bug. I absolutely love her step-by-step explanation—it’s really clear, and manages to be brief but thorough at the same time.

It’s time to be more experimental and push the boundaries with layouts.

100 words, 100 days.

When I did my 100 days project, I found it really challenging. I’m so impressed that Amber has managed to do this: she wrote exactly 100 words every day for 100 days.

10,000 words, 10 megawords, 100 h-entries of hand-written HTML:

I can’t believe I have written ten thousand words. If I were to read everything out it would take me almost an hour. Yet, one hundred words seems like such a small amount. An amount that only takes a few minutes to write.

Daring Fireball: Scott Gilbertson: ‘Kill Google AMP Before It Kills the Web’

If you are a publisher and your web pages don’t load fast, the sane solution is to fix your fucking website so that pages load fast, not to throw your hands up in the air and implement AMP.

Pretty strong meat there from Gruber.

(I’m not going to link through to the Register article though—that rag does not deserve our attention.)

Monday, May 29th, 2017

Reading Writing On The Wall by Tom Standage.

Sunday, May 28th, 2017

Time machine.

Time machine.

Checked in at Kapnikarea cafe. I hear a bouzouki.

Checked in at Kapnikarea cafe. I hear a bouzouki.

Checked in at Τράτα

Checked in at Τράτα

Saturday, May 27th, 2017

Good morning, Athens.

Good morning, Athens.

Friday, May 26th, 2017

Eating like the Greeks.

Eating like the Greeks.

Checked in at Ατλαντικός. Late night seafood feast — with Jessica

traintimes.org.uk performance notes

I love, love, *love, traintimes.org.uk—partly because it’s so useful, but also because it’s so fast. I know public transport is the clichéd use-case when it comes to talking about web performance, but in this case it’s genuine: I use the site on trains and in airports.

Matthew gives a blow-by-blow account of the performance optimisations he’s made for the site, including a service worker. The whole thing is a masterclass in performance and progressive enhancement. I’m so glad he took the time to share this!

Thoroughly enjoyed this presentation from @sonniesedge: razor-sharp thinking and bone-dry humour delivered straight from the heart.

Thoroughly enjoyed this presentation from @sonniesedge: razor-sharp thinking and bone-dry humour delivered straight from the heart.

Checked in at Το Μπακαλομάγαζο. Having a late lunch.

Checked in at Το Μπακαλομάγαζο. Having a late lunch.

Thursday, May 25th, 2017

Checked in at Η Παράνγκα του Σωτήρη. Let the eating begin! 🇬🇷

Checked in at Η Παράνγκα του Σωτήρη. Let the eating begin! 🇬🇷

Going to Athens. brb

Wednesday, May 24th, 2017

The Apophenic Machine — Real Life

To navigate the web is to beat a path through a labyrinth of links left by others, and to thereby create associative links yourself, unspooling them like a guiding thread onto a floor already carpeted with such connections. Each thread of connection is unique, individualized: everyone draws their own map of the network as they navigate it.

Douglas Engelbart has a posse.

Douglas Engelbart has a posse.

It’s a nice day for an oyster on the beach.

It’s a nice day for an oyster on the beach.

Today’s oyster.

Today’s oyster.

A workshop on evaluating technology

After hacking away at Indie Web Camp Düsseldorf, I stuck around for Beyond Tellerrand. I ended up giving a talk, stepping in for Ellen. I was a poor substitute, but I hope I entertained the lovely audience for 45 minutes.

After Beyond Tellerrand, I got on a train to Nuremberg …along with a dozen of my peers who were also at the event.

All aboard the Indie Web Train from Düsseldorf to Nürnberg. Indie Web Train.

I arrived right in the middle of Web Week Nürnberg. Among the many events going on was a workshop that Joschi arranged for me to run called Evaluating Technology. The workshop version of my Beyond Tellerrand talk, basically.

This was an evolution of a workshop I ran a while back. I have to admit, I was a bit nervous going into this. I had no tangible material prepared; no slides, no handouts, nothing. Instead the workshop is a collaborative affair. In order for it to work, the attendees needed to jump in and co-create it with me. Luckily for me, I had a fantastic and enthusiastic group of people at my workshop.

Evaluating Technology

We began with a complete braindump. “Name some tools and technologies,” I said. “Just shout ‘em out.” Shout ‘em out, they did. I struggled to keep up just writing down everything they said. This was great!

Evaluating Technology

The next step was supposed to be dot-voting on which technologies to cover, but there were so many of them, we introduced an intermediate step: grouping the technologies together.

Evaluating Technology Evaluating Technology

Once the technologies were grouped into categories like build tools, browser APIs, methodologies etc., we voted on which categories to cover, only then diving deeper into specific technologies.

I proposed a number of questions to ask of each technology we covered. First of all, who benefits from the technology? Is it a tool for designers and developers, or is it a tool for the end user? Build tools, task runners, version control systems, text editors, transpilers, and pattern libraries all fall into the first category—they make life easier for the people making websites. Browser features generally fall into the second category—they improve the experience for the end user.

Looking at user-facing technologies, we asked: how well do they fail? In other words, can you add this technology as an extra layer of enhancement on top of what you’re building or do you have to make it a foundational layer that’s potentially a single point of failure?

For both classes of technologies, we asked the question: what are the assumptions? What fundamental philosophy has been baked into the technology?

Evaluating Technology Evaluating Technology

Now, the point of this workshop is not for me to answer those questions. I have a limited range of experience with the huge amount of web technologies out there. But collectively all of us attending the workshop will have a good range of experience and knowledge.

Interesting then that the technologies people voted for were:

  • service workers,
  • progressive web apps,
  • AMP,
  • web components,
  • pattern libraries and design systems.

Those are topics I actually do have some experience with. Lots of the attendees had heard of these things, they were really interested in finding out more about them, but they hadn’t necessarily used them yet.

And so I ended up doing a lot of the talking …which wasn’t the plan at all! That was just the way things worked out. I was more than happy to share my opinions on those topics, but it was of a shame that I ended up monopolising the discussion. I felt for everyone having to listen to me ramble on.

Still, by the end of the day we had covered quite a few topics. Better yet, we had a good framework for categorising and evaluating web technologies. The specific technologies we covered were interesting enough, but the general approach provided the lasting value.

All in all, a great day with a great group of people.

Evaluating Technology

I’m already looking forward to running this workshop again. If you think it would be valuable for your company, get in touch.

Checked in at trading post coffee roasters. Starting the day right.

Checked in at trading post coffee roasters. Starting the day right.

Tuesday, May 23rd, 2017

Went outside to watch the ISS fly over—it was by far the brightest object in the sky.

You’ve got a beautiful ship, @AstroPeggy.

Checked in at The Joker. Wing night. 🍗

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.

Liking the new lick of paint on the @Clearleft deck.

Liking the new lick of paint on the @Clearleft deck.

Learn CSS Grid - A Guide to Learning CSS Grid | Jonathan Suh

A quick visual guide to CSS Grid properties and values.

Service Worker Security FAQ - The Chromium Projects

Got questions about the security of service workers? This document probably has the answer.

Amber Wilson: IndieWebCamp

Amber’s report from Indie Web Camp Nuremberg last week. I was blown away by how much she got done in one day.

JSON Feed: Home

RSS isn’t dead, but it has metamorphosed into JSON.

I don’t know if syndication feeds have yet taken on their final form, but they’re the canonical example of 927ing.

Anyway, I’ve gone ahead and added some JSON feeds to adactio.com:

Evaluating Technology – Jeremy Keith – btconfDUS2017 on Vimeo

I wasn’t supposed to speak at this year’s Beyond Tellerrand conference, but alas, Ellen wasn’t able to make it so I stepped in and gave my talk on evaluating technology.

Monday, May 22nd, 2017

Checked in at Munich Franz Josef Strauss Airport (MUC) (Flughafen München „Franz Josef Strauß“). One last taste of Germany before the flight home.

Checked in at Munich Franz Josef Strauss Airport (MUC) (Flughafen München „Franz Josef Strauß“). One last taste of Germany before the flight home.

Sponsoring Patterns Day

It didn’t take long for Patterns Day to sell out (in the sense of the tickets all being sold; not in the sense of going mainstream and selling out to The Man).

I’m very pleased about the ticket situation. It certainly makes my life easier. Now I can concentrate on the logistics for the day, without having to worry about trying to flog tickets AKA marketing.

But I also feel bad. Some people who really, really wanted to come weren’t able to get tickets in time. This is usually because they work at a company where to have to get clearance for the time off, and the cost of the ticket. By the time the word came down from on high that they’ve got the green light, the tickets were already gone. That’s a real shame.

There is, however, a glimmer of hope on the horizon. There is one last chance to get tickets for Patterns Day, and that’s through sponsorship.

Here’s the deal: if I can get some things sponsored (like recordings of the talks, tea and coffee for the day, or an after-party), I can offer a few tickets in return. I can also offer your logo on the Patterns Day website, your logo on the slide between talks, and a shout-out on stage. But that’s pretty much it. I can’t offer a physical stand at the event—there just isn’t enough room. And I certainly can’t offer you a list of attendee details for your marketing list—that’s just wrong.

In order of priority, here’s what I would love to get sponsored, and here’s what I can offer in return:

  1. £2000: Sponsoring video recordings of the talks—4 tickets. This is probably the best marketing opportunity for your company; we can slap your logo at the start and end of each video when they go online.
  2. £2000: Sponsoring tea and coffee for attendees for the day—4 tickets. This is a fixed price, set by the venue.
  3. £2000+: Sponsoring an after-party near the conference—4 tickets. Ideally you’d take care of booking a venue for this, and you can go crazy decking it out with your branding. Two pubs right across from the conference venue have upstairs rooms you can book: The Joker, and The Hare And Hounds.

There you have it. There’s no room for negotiation, I’m afraid, but I think they’re pretty good deals. Remember, by sponsoring Patterns Day you’ll also have my undying gratitude, and the goodwill of all my peers coming to this event.

Reckon you can convince your marketing department? Drop me a line, let me know which sponsorship option you’d like to snap up, and those four tickets could be yours.

Are we making the web too complicated? | Seldo.Com Blog

Laurie Voss on the trade-off between new powerful web dev tools, and the messiness that abusing those tools can bring:

Is modern web development fearsomely, intimidatingly complicated? Yes, and that’s a problem. Will we make it simpler? Definitely, but probably not as soon as you’d like. Is all this new complexity worthwhile? Absolutely.

I agree that there’s bound to be inappropriate use of technologies, but I don’t agree that we should just accept it:

Are there some people using a huge pile of JavaScript and a monstrous build chain to throw together a single-pager web site with one box that collects an email address? For sure. And that’s silly and unnecessary. But so what? The misuse of technology does not invalidate it.

I think we can raise our standards. Inappropriate use of technology might have been forgivable ten years ago, but if we want web development to be taken seriously as a discipline, I think we should endeavour to use our tools and technologies appropriately.

But we can all agree that the web is a wonderful thing:

Nobody but nobody loves the web more than I do. It’s my baby. And like a child, it’s frustrating to watch it struggle and make mistakes. But it’s amazing to watch it grow up.

Evaluating Technology | Calum Ryan

Calum’s write-up of the workshop I ran in Nuremberg last week.

Sunday, May 21st, 2017

Checked in at Vintage Bar

Checked in at Homebrew Website Club Nürnberg. Demo time!

Checked in at Homebrew Website Club Nürnberg. Demo time!

Checked in at tollwerk

Checked in at tollwerk

Checked in at IndieWebCamp Nuremberg

Checked in at tollwerk

Checked in at Kaulbach

Saturday, May 20th, 2017

Checked in at Kon Tiki

Checked in at Burgschänke

Indie Web Lunch.

Indie Web Lunch.

Getting ready to kick off Indie Web Camp Nuremberg. https://indieweb.org/live

Getting ready to kick off Indie Web Camp Nuremberg.

https://indieweb.org/live

Essigbrätlein.

Essigbrätlein.

Checked in at IndieWebCamp Nuremberg

Checked in at tollwerk

Friday, May 19th, 2017

Notes From An Emergency

But real problems are messy. Tech culture prefers to solve harder, more abstract problems that haven’t been sullied by contact with reality. So they worry about how to give Mars an earth-like climate, rather than how to give Earth an earth-like climate. They debate how to make a morally benevolent God-like AI, rather than figuring out how to put ethical guard rails around the more pedestrian AI they are introducing into every area of people’s lives.

Further notes on scenius

Austin Kleon expands on Brian Eno’s neologism “scenius”:

Genius is an egosystem, scenius is an ecosystem.

Presentation: Accessibility in a Responsive World, A11Y Days 2017

There are some great hands-on accessibility patterns in this talk transcript from Scott.

Checked in at Rösttrommel Kaffeerösterei

Checked in at Kaulbach. with Jessica

Thursday, May 18th, 2017

Checked in at Hexenhäusle

Checked in at tollwerk

Style Guide Guide | Style Guide Guide

If you want to understand the thinking behind this style guide guide, be sure to read Brad’s style guide guide guide.

Mavo: A new, approachable way to create Web applications

A really interesting new project from Lea that aims to put dynamic sites within the reach of everyone. The emphasis is on declarative languages—HTML and CSS—no JavaScript knowledge required.

Lea has also written an introductory article on Smashing Mag.

It’s not working! Should I blame caching?

Finally, the answer to one of the two hard questions in computer science.

Why Fast Matters // Speaker Deck

Slides from Harry’s recent talk on performance.

Getting ready to workshop.

Getting ready to workshop.

Wednesday, May 17th, 2017

Checked in at Hexenhäusle

Checked in at Homebrew Website Club Nürnberg

Checked in at U Wöhrder Wiese

Rostbratwürste.

Rostbratwürste.

Hallo Nürnberg.

Hallo Nürnberg.

Checked in at Bratwursthäusle

Checked in at AZIMUT Hotel Nuremberg

Checked in at U Hauptbahnhof

Checked in at Nürnberg Hauptbahnhof

Indie Web Train. 🚅💻

Indie Web Train. 🚅💻

Checked in at ICE 623

All aboard the Indie Web Train from Düsseldorf to Nürnberg.

All aboard the Indie Web Train from Düsseldorf to Nürnberg.

Checked in at Gleis 15/16

Tuesday, May 16th, 2017

Checked in at Bar Alexander

Checked in at Hausbrauerei “Zum Schlüssel”

Checked in at Beyond Tellerrand | #btconf

Talk at @BTconf: done. ✅ 🍺

Talk at @BTconf: done. ✅ 🍺

Shout out to Jon Postel in @PattyToland’s talk at @BTconf.

Shout out to Jon Postel in @PattyToland’s talk at @BTconf.

Showtime.

Showtime.

Checked in at Capitol Theater

Article Performance Leaderboard

Oh, I like this! A leaderboard of news sites, ranked by performance.

I’d love to see something like this for just about every sector …including agency websites.

Monday, May 15th, 2017

Checked in at Bosporus - Türkisch Essen. with Jina

Fame at last.

Fame at last.

Checked in at Beyond Tellerrand | #btconf

Tako yaki.

Tako yaki.

Checked in at Takumi Tonkotsu & Gyoza (麺処 匠 二代目)

Checked in at Beyond Tellerrand | #btconf

Shout out to @lottejackson in @jina’s talk at @btconf.

Shout out to @lottejackson in @jina’s talk at @btconf.

Checked in at Capitol Theater

Culatello.

Culatello.

Farfalle with Sussex beef ragu and rainbow chard.

Farfalle with Sussex beef ragu and rainbow chard.

Steak tartare

Steak tartare

Oyster with pickled pine.

Oyster with pickled pine.

Lamb rump.

Lamb rump.

Rib of beef, and pork belly, together at last.

Rib of beef, and pork belly, together at last.

Burning crusader.

Burning crusader.

Grilled courgettes and cherry tomatoes.

Grilled courgettes and cherry tomatoes.

Feta and little gem salad.

Feta and little gem salad.

Roast chicken and garlic.

Roast chicken and garlic.

Hacking time at Indie Web Camp Düsseldorf.

Hacking time at Indie Web Camp Düsseldorf.

Sunday, May 14th, 2017

Checked in at sipgate GmbH

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.

Saturday, May 13th, 2017

Getting set up for Indie Web Camp Düsseldorf with @aaronpk.

Getting set up for Indie Web Camp Düsseldorf with @aaronpk.

Friday, May 12th, 2017

Going to Düsseldorf. brb

The cost of change | The White Site

Ben points to a new product aiming to ease the pain of connected devices bumping up against the harsh realities of shearing layers:

By exposing the ‘hardwiring’ of our electrical systems, Conduct emphasises how much we rely on existing systems to power our ‘new’ technology – the rate of change and advancement in our traditional technologies moves at a much slower pace than our mobile app-based world and there are physical limitations as a result of this hardwired legacy.

I am—unsurprisingly—in favour of exposing the seams like this.

Uncensorable Wikipedia on IPFS

I think this might be the first large-scale practical demonstration of the InterPlanetary File System: routing around the damage of Turkey’s censorship of Wikipedia.

Nick Jones - Interface Prototyper / Designer

A really interesting and well-executed portfolio site, utterly let down by the tone of this demeaning and insulting piece of copy:

WARNING: Do not proceed if you suffer from vertigo or if you find experimental interfaces offensive.

(Pssst: copy is also interface.)

Amber Wilson: HTTPS Poem

How wonderful is this‽ The latest research task I set for Amber was on HTTPS, and she has delivered her findings …as a poem!

Thursday, May 11th, 2017

Programming Design Systems

This is a really intriguing book that combines design theory and programming—learn about contrast, colour, and shapes, with each lesson supported by code examples.

It’s still a work in progress but the whole thing is online for free. Yay for web books!

Contemplating the ocean.

Contemplating the ocean.

Reading Aurora by Kim Stanley Robinson.

Wednesday, May 10th, 2017

Goodnight.

Goodnight.

Sunday, May 7th, 2017

A minority report on artificial intelligence

Want to feel old? Steven Spielberg’s Minority Report was released fifteen years ago.

It casts a long shadow. For a decade after the film’s release, it was referenced at least once at every conference relating to human-computer interaction. Unsurprisingly, most of the focus has been on the technology in the film. The hardware and interfaces in Minority Report came out of a think tank assembled in pre-production. It provided plenty of fodder for technologists to mock and praise in subsequent years: gestural interfaces, autonomous cars, miniature drones, airpods, ubiquitous advertising and surveillance.

At the time of the film’s release, a lot of the discussion centred on picking apart the plot. The discussions had the same tone of time-travel paradoxes, the kind thrown up by films like Looper and Interstellar. But Minority Report isn’t a film about time travel, it’s a film about prediction.

Or rather, the plot is about prediction. The film—like so many great works of cinema—is about seeing. It’s packed with images of eyes, visions, fragments, and reflections.

The theme of prediction was rarely referenced by technologists in the subsequent years. After all, that aspect of the story—as opposed to the gadgets, gizmos, and interfaces—was one rooted in a fantastical conceit; the idea of people with precognitive abilities.

But if you replace that human element with machines, the central conceit starts to look all too plausible. It’s suggested right there in the film:

It helps not to think of them as human.

To which the response is:

No, they’re so much more than that.

Suppose that Agatha, Arthur, and Dashiell weren’t people in a floatation tank, but banks of servers packed with neural nets: the kinds of machines that are already making predictions on trading stocks and shares, traffic flows, mortgage applications …and, yes, crime.

Precogs are pattern recognition filters, that’s all.

Rewatching Minority Report now, it holds up very well indeed. Apart from the misstep of the final ten minutes, it’s a fast-paced twisty noir thriller. For all the attention to detail in its world-building and technology, the idea that may yet prove to be most prescient is the concept of Precrime, introduced in the original Philip K. Dick short story, The Minority Report.

Minority Report works today as a commentary on Artificial Intelligence …which is ironic given that Spielberg directed a film one year earlier ostensibly about A.I.. In truth, that film has little to say about technology …but much to say about humanity.

Like Minority Report, A.I. was very loosely based on an existing short story: Super-Toys Last All Summer Long by Brian Aldiss. It’s a perfectly-crafted short story that is deeply, almost unbearably, sad.

When I had the great privilege of interviewing Brian Aldiss, I tried to convey how much the story affected me.

Jeremy: …the short story is so sad, there’s such an incredible sadness to it that…

Brian: Well it’s psychological, that’s why. But I didn’t think it works as a movie; sadly, I have to say.

At the time of its release, the general consensus was that A.I. was a mess. It’s true. The film is a mess, but I think that, like Minority Report, it’s worth revisiting.

Watching now, A.I. feels like a horror film to me. The horror comes not—as we first suspect—from the artificial intelligence. The horror comes from the humans. I don’t mean the cruelty of the flesh fairs. I’m talking about the cruelty of Monica, who activates David’s unconditional love only to reject it (watching now, both scenes—the activation and the rejection—are equally horrific). Then there’s the cruelty of the people of who created an artificial person capable of deep, never-ending love, without considering the implications.

There is no robot uprising in the film. The machines want only to fulfil their purpose. But by the end of the film, the human race is gone and the descendants of the machines remain. Based on the conduct of humanity that we’re shown, it’s hard to mourn our species’ extinction. For a film that was panned for being overly sentimental, it is a thoroughly bleak assessment of what makes us human.

The question of what makes us human underpins A.I., Minority Report, and the short stories that spawned them. With distance, it gets easier to brush aside the technological trappings and see the bigger questions beneath. As Al Robertson writes, it’s about leaving the future behind:

SF’s most enduring works don’t live on because they accurately predict tomorrow. In fact, technologically speaking they’re very often wrong about it. They stay readable because they think about what change does to people and how we cope with it.

Saturday, May 6th, 2017

ongoing by Tim Bray · Still Blogging in 2017

This really resonates with me. Tim Bray duly notes that people are writing on Medium, and being shunted towards native apps, and that content is getting centralised at Facebook and other hubs, and then he declares:

But I don’t care.

Same.

Any­how, I’m not go­ing away.

Same.

Aaaaaand https://patternsday.com is sold out.

I’ll see all you lovely people here in Brighton on June 30th.

Friday, May 5th, 2017

Codebar Coach Guide

It’s a short list, but this brief guide for coaches at Codebar is packed with excellent advice for anybody getting into teaching or training:

  • Do not take over the keyboard! This can be off-putting and scary.
  • Encourage the students to type and not copy paste.
  • Assume that anyone you’re teaching has no knowledge but infinite intelligence.

Absolutely thrilled that @Sareh88 and @Jina will be speaking at Patterns Day! https://patternsday.com/#speakers

https://adactio.com/journal/12225

Patterns Day speakers

Ticket sales for Patterns Day are going quite, quite briskly. If you’d like to come along, but you don’t yet have a ticket, you might want to remedy that. Especially when you hear about who else is going to be speaking…

Sareh Heidari works at the BBC building websites for a global audience, in as many as twenty different languages. If you want to know about strategies for using CSS at scale, you definitely want to hear this talk. She just stepped off stage at the excellent CSSconf EU in Berlin, and I’m so happy that Sareh’s coming to Brighton!

Patterns Day isn’t the first conference about design systems and pattern libraries on the web. That honour goes to the Clarity conference, organised by the brilliant Jina Anne. I was gutted I couldn’t make it to Clarity last year. By all accounts, it was excellent. When I started to form the vague idea of putting on an event here in the UK, I immediately contacted Jina to make sure she was okay with it—I didn’t want to step on her toes. Not only was she okay with it, but she really wanted to come along to attend. Well, never mind attending, I said, how about speaking?

I couldn’t be happier that Jina agreed to speak. She has had such a huge impact on the world of pattern libraries through her work with the Lightning design system, Clarity, and the Design Systems Slack channel.

The line-up is now complete. Looking at the speakers, I find myself grinning from ear to ear—it’s going to be an honour to introduce each and every one of them.

This is going to be such an excellent day of fun and knowledge. I can’t wait for June 30th!

Thursday, May 4th, 2017

There are just 30 seats left for https://patternsday.com and I haven’t even announced the final two (amazing) speakers on the full line-up.

This book belongs to @scruffymongrel.

This book belongs to @scruffymongrel.

Going offline. — Ethan Marcotte

Ethan has added a service worker to his site and he’s got a nifty little recipe for showing a list of saved-for-offline articles.

Wednesday, May 3rd, 2017

The Lost Picture Show: Hollywood Archivists Can’t Outpace Obsolescence - IEEE Spectrum

There are three parts to digital preservation: format, medium, and licensing. Film and television archives are struggling with all three.

Format:

Codecs—the software used to compress and decompress digital video files—keep changing, as do the hardware and software for playback.

Medium:

As each new generation of LTO comes to market, an older generation of LTO becomes obsolete. LTO manufacturers guarantee at most two generations of backward compatibility. What that means for film archivists with perhaps tens of thousands of LTO tapes on hand is that every few years they must invest millions of dollars in the latest format of tapes and drives and then migrate all the data on their older tapes—or risk losing access to the information altogether.

Licensing:

Studios didn’t see any revenue potential in their past work. They made money by selling movie tickets; absent the kind of follow-on markets that exist today, long-term archiving didn’t make sense economically.

It adds up to a potential cultural disaster:

If technology companies don’t come through with a long-term solution, it’s possible that humanity could lose a generation’s worth of filmmaking, or more.

Revisiting and pondering @willsh’s 2015 dConstruct talk, which only gets better with time.

https://vimeo.com/139401539

Build a Better Monster: Morality, Machine Learning, and Mass Surveillance

So what happens when these tools for maximizing clicks and engagement creep into the political sphere?

This is a delicate question! If you concede that they work just as well for politics as for commerce, you’re inviting government oversight. If you claim they don’t work well at all, you’re telling advertisers they’re wasting their money.

Facebook and Google have tied themselves into pretzels over this.

Sometimes you see a thing and think “I must inform @waxpancake immediately!”

http://bit.ly/starwarsbeatles

Tuesday, May 2nd, 2017

New Album: Princess Leia’s Stolen Death Star Plans | Palette-Swap Ninja

Absolute genius! I’ll never hear Sgt. Pepper’s quite the same way again.

Creating a pattern library in Sketch, Roobottom.com

A smart approach to creating patterns as symbols in Sketch. Sounds like diligence and vigilance is required to make it work, but then, that’s true of any pattern library.

The Last 100 Days, the Next 100 Years

Cancelling the future.

The future lives and dies by the state of the archives. To look hard at this world and honestly, diligently articulate what happened and what it was like in the present is a sort of promise to the future, a new layer to the palimpsest of history that can become someone else’s foundation.

leaving the future behind – Al Robertson

Science fiction isn’t about technology, it’s about people …and how people change in response to technology.

So ironically, perhaps the only way that any piece of science fiction can be sure that it will remain resonant as the years pass is to make sure that any technical speculation can drop away once it’s no longer relevant. The science will fall back to Earth like an exhausted booster section, tumbling away from the rocket that will one day reach the stars. And then we’ll be left with stories about how people change when change arrives – and that, for me, is what science fiction is.

Counting down the days until the best day: https://patternsday.com/

Less than two months to go…

Styling the Patterns Day site

Once I had a design direction for the Patterns Day site, I started combining my marked-up content with some CSS. Ironically for an event that’s all about maintainability and reusability, I wrote the styles for this one-page site with no mind for future use. I treated the page as a one-shot document. I even used ID selectors—gasp! (the IDs were in the HTML anyway as fragment identifiers).

The truth is I didn’t have much of a plan. I just started hacking away in a style element in the head of the document, playing around with colour, typography, and layout.

I started with the small-screen styles. That wasn’t a conscious decision so much as just the way I do things automatically now. When it came time to add some layout for wider viewports, I used a sprinkling of old-fashioned display: inline-block so that things looked so-so. I knew I wanted to play around with Grid layout so the inline-block styles were there as fallback for non-supporting browsers. Once things looked good enough, the fun really started.

I was building the site while I was in Seattle for An Event Apart. CSS Grid layout was definitely a hot topic there. Best of all, I was surrounded by experts: Jen, Rachel, and Eric. It was the perfect environment for me to dip my toes into the waters of grid.

Jen was very patient in talking me through the concepts, syntax, and tools for using CSS grids. Top tip: open Firefox’s inspector, select the element with the display:grid declaration, and click the “waffle” icon—instant grid overlay!

For the header of the Patterns Day site, I started by using named areas. That’s the ASCII-art approach. I got my head around it and it worked okay, but it didn’t give me quite the precision I wanted. I switched over to using explicit grid-row and grid-column declarations.

It’s definitely a new way of thinking about layout: first you define the grid, then you place the items on it (rather than previous CSS layout systems where each element interacted with the elements before and after). It was fun to move things around and not have to worry about the source order of the elements …as long as they were direct children of the element with display:grid applied.

Without any support for sub-grids, I ended up having to nest two separate grids within one another. The logo is a grid parent, which is inside the header, also a grid parent. I managed to get things to line up okay, but I think this might be a good use case for sub-grids.

The logo grid threw up some interesting challenges. I wanted each letter of the words “Patterns Day” to be styleable, but CSS doesn’t give us any way to target individual letters other than :first-letter. I wrapped each letter in a b element, made sure that they were all wrapped in an element with an aria-hidden attribute (so that the letters wouldn’t be spelled out), and then wrapped that in an element with an aria-label of “Patterns Day.” Now I could target those b elements.

For a while, I also had a br element (between “Patterns” and “Day”). That created some interesting side effects. If a br element becomes a grid item, it starts to behave very oddly: you can apply certain styles but not others. Jen and Eric then started to test other interesting elements, like hr. There was much funkiness and gnashing of specs.

It was a total nerdfest, and I loved every minute of it. This is definitely the most excitement I’ve felt around CSS for a while. It feels like a renaissance of zen gardens and layout reservoirs (kids, ask your parents).

After a couple of days playing around with grid, I had the Patterns Day site looking decent enough to launch. I dabbled with some other fun CSS stuff in there too, like gratuitous clip paths and filters when hovering over the speaker images, and applying shape-outside with an image mask.

Go ahead and view source on the Patterns Day page if you want—I ended up keeping all the CSS in the head of the document. That turned out to be pretty good for performance …for first-time visits anyway. But after launching the site, I couldn’t resist applying some more performance tweaks.

Monday, May 1st, 2017

Save Youtube Audio As A Podcast With Huffduffer | NickVegas

I love it when people explain Huffduffer better than I ever could.

Huffduffer is a free service that allows you to build a personalized audio feed. It’s kind of like a “read later” service but for audio.

Dealing with Technical & Design Debt - Breakfast Session - Agile Swap Shop (Brighton, England) | Meetup

If you’re a project manager anywhere near Brighton, put this event in your calendar for the morning of May 30th.

Electronic Items

I love the way Guillaume Kurkdjian uses animation here to demonstrate how these gadgets from the ’90s would work.

The People’s Cloud

A documentary by Matt Parker (brother of Andy) that follows in the footsteps of people like Andrew Blum, James Bridle, and Ingrid Burrington, going in search of the physical locations of the internet, and talking to the people who maintain it. Steven Pemberton makes an appearance in the first and last of five episodes:

  1. What is the Cloud vs What Existed Before?
  2. Working out the Internet: it’s a volume game
  3. The Submarine Cable Network
  4. How Much Data Is There?
  5. Convergence

The music makes it feel quite sinister.

Offline Web Applications | Udacity

This is a free online video course recorded by Jake a couple of years back. It’s got a really good step-by-step introduction to service workers, delivered in Jake’s typically witty way. Some of the details are a bit out of date, and I must admit that I bailed when it got to IndexedDB, but I highly recommend giving this a go.

There’s also a free course on web accessibility I’m planning to check out.

Springer Nature frontend playbook: house style guide

I like it when organisations share their in-house coding styles. This one from Springer Nature not only has guides for HTML, CSS, and JavaScript, but it also has a good primer on progressive enhancement.

Control Panel | Flickr

Photos of analogue interfaces: switches, knobs, levers, dials, buttons, so many buttons.

The Orrery at The Interval: An Invitation to Long-Term Thinking — Blog of the Long Now

The Long Now Foundation has been posting some great stuff on their blog lately. The latest is a look at orreries, clocks, and computers throughout history …and into the future.