Archive: January, 2017

126

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

Tuesday, January 31st, 2017

The Schedule and the Stream

Matt takes a look at the history of scheduled broadcast media—which all began in Hungary in 1887 via telephone—and compares it to the emerging media context of the 21st century; the stream.

If the organizing principle of the broadcast schedule was synchronization — millions seeing the same thing at the same time — then the organizing principle of the stream is de-contextualization — stories stripped of their original context, and organized into millions of individual, highly personalized streams.

The ‘Credit Card Number’ Field Must Allow and Auto-Format Spaces (80% Don’t) - Articles - Baymard Institute

A deep dive into formatting credit card numbers with spaces in online forms.

100 Days Of Open Source (2017) — Joschi Kuphal · Web architect · Nuremberg / Germany

Joschi is documenting his commitment to “contribute at least one meaningful commit a day to a public Open Source project or a similar community effort.” So far it’s a really nice mix of coding and face-to-face activities.

Less Bro-gramming: Net Natives host and sponsor Codebar | Net Natives

An excellent potted history from Cassie on women in computing.

NASA’s “Keypunch girls” would work in cramped rows translating programming instructions onto paper pads, whilst the machine operators would sit in comfort, feeding the code decks through card readers and enjoying the esteem of the end result (I imagine it a bit like Mad Men, but with more sexism and astronauts).

Visual Design meetup, Brighton

Are you a UI designer? In Brighton? Well, feel in this form if you’re interested in gathering with like-minded people.

This local, monthly and free meetup will let designers show their work, share any methods, processes and tools and ask for the odd critique.

Monday, January 30th, 2017

Donate to the ACLU | American Civil Liberties Union

You don’t need to be an American citizen to donate to the American Civil Liberties Union. The online payment process is quick and painless.

If you make a donation—and I sincerely hope you do—ping people who are generously offering to match donations.

The Invention of Wireless Cryptography—The Appendix

A marvellous story of early twentieth century espionage over the airwaves.

In one proposal, hidden instructions were interspersed within regular, ordinary-looking messages by slightly lengthening the spaces between dots and dashes.

What Is the Oldest Computer Program Still in Use?

A fascinating bit of technological archeology tracing some of the oldest still-running software, from a COBOL program at the Pentagon to the firmware on the Voyager probes.

And the award for Most British Sign at this protest goes to…

“Things Are Not Going Well”

#BrightonEmergencyDemo

Localised signs: “Theresa the appeaser” “I wish the Trump hadn’t followed through” (it’s a scatalogical thing, my American friends)

Localised signs:

“Theresa the appeaser”

“I wish the Trump hadn’t followed through”

(it’s a scatalogical thing, my American friends)

At the Brighton anti-Trump protest.

At the Brighton anti-Trump protest.

Wallfacing.

Wallfacing.

Resilient Web and Tools — David Larlet

David picks up on one of the closing themes of Resilient Web Design—how we choose our tools. This has been on my mind a lot; it’s what I’ll be talking about at conferences this year.

That’s part of my job to ease processes and reduce frictions. That’s part of my job to take into account from the early beginning of a product its lasting qualities.

There’s a very good point here about when and how we decide to remove the things we’ve added to our projects:

We spend our time adding features without considering at the same pace the removal of useless ones. And still the true resilience (or is it perfection Antoine?) is when there is nothing more to take away. What are you removing on Monday to make our Web more resilient?

Sunday, January 29th, 2017

Making a donation to the American Civil Liberties Union.

https://action.aclu.org/donate-aclu

If that Holocaust denier complains about having his @Huffduffer account deleted, I shall simply deny that any such act ever took place.

Doing some chores …cleaning the kitchen floor; kicking a Holocaust denier off @Huffduffer

(Okay, that last one didn’t feel like a chore.)

Callback Hell

At first when I was reading this JavaScript coding guide, I thought “Isn’t this exactly what promises address?” but that is then addressed further down:

Before looking at more advanced solutions, remember that callbacks are a fundamental part of JavaScript (since they are just functions) and you should learn how to read and write them before moving on to more advanced language features, since they all depend on an understanding of callbacks.

Fair enough. In any case, what you’ll find here is mainly good advice for writing modular code.

Calling Bullshit

A proposed syllabus for critical thinking: Calling Bullshit in the Age of Big Data.

Our aim in this course is to teach you how to think critically about the data and models that constitute evidence in the social and natural sciences.

Practical tools and case studies are also provided.

We built a PWA from scratch - This is what we learned

A nice straightforward account of building and testing a progressive web a… I mean, website.

I think every website from now on should use some of the Progressive Web App features. It’s even confusing to call it “Apps” as it applies to all websites and apps.

Life plus Linux: Look before you paste from a website to terminal

The (literally) hidden dangers of copying code snippets from the web and pasting them into the command line.

This cautionary tale backs up a small tip I heard for getting to understand how found code works: deliberately type it out instead of copying and pasting.

DirtyMarkup · Tidy up your HTML, CSS, and JavaScript code

A handy prettifier for front-end code. Useful if you’re trying to find something inside code markup, CSS, or JavaScript that’s been minified.

Detecting text in an image on the web in real-time - Tales of a Developer Advocate by Paul Kinlan

The text detection API is still in its experimental stage, but it opens up a lot of really interesting possibilities for the web: assistive technology to read out text, archiving tools for digitising text …it’s all part of the nascent shape detection API.

Saturday, January 28th, 2017

The Promise of a Burger Party - Mariko Kosaka

Mariko has a real knack for explaining technical concepts in a very accessible way. This time it’s JavaScript promises.

Friday, January 27th, 2017

A practical guide to Progressive Web Apps for organisations who don’t know anything about Progressive Web Apps : Records Sound the Same

Sally gives a really good introduction to using service workers as a progressive enhancement.

✨Implementing “Save For Offline” with Service Workers | Una Kravets Online✨

A great little script from Una that’s perfect for blogs and news sites—allowing users to explicitly save a page for offline reading.

Thursday, January 26th, 2017

“Anyone remember when Ethan published his Responsive Web Design article?” asks @sniffles.

“May 25th, 2010” I blurt out reflexively.

Wednesday, January 25th, 2017

5 Calls: Make your voice heard

A service for US citizens that suggest five phone calls they can make at any time—based on their location—to influence their representatives.

Calling is the most effective way to influence your representative. 5 Calls gives you contacts and scripts so calling is quick and easy. We use your location to give you your local representatives so your calls are more impactful.

Fair fa’ your honest, sonsie face, Great chieftain o’ the puddin’-race!

Fair fa’ your honest, sonsie face, Great chieftain o’ the puddin’-race!

Hacking away at Homebrew Website Club Brighton.

Hacking away at Homebrew Website Club Brighton.

Evaluating Tools For Building a Component Library | Chromatic

A comparison of a few different tools for generating pattern libraries.

Spoiler…

In this particular case, Fractal comes out on top:

It has the features we need, and I’m happier than I should be with how simple the directory and file structure is. The documentation has also been super helpful thus far. We’ve customized it with our client’s branding and are ready to roll.

Tuesday, January 24th, 2017

Looking forward to tomorrow’s Homebrew Website Club here in Brighton.

https://indieweb.org/events/2017-01-25-homebrew-website-club

Monday, January 23rd, 2017

The White Site | Digital home of Ben White, designer and tinkerer

Ben has been quietly blogging away, documenting beautiful design.

The road to Firefly 6, part 2, Roobottom.com

A look at the technical details behind Firefly’s pattern library. The tech stack includes Less, BEM, and some React, but it’s Anna and Danielle that really made it work.

Charlotte

Over the eleven-year (and counting) lifespan of Clearleft, people have come and gone—great people like Nat, Andy, Paul and many more. It’s always a bittersweet feeling. On the one hand, I know I’ll miss having them around, but on the other hand, I totally get why they’d want to try their hand at something different.

It was Charlotte’s last day at Clearleft last Friday. Her husband Tom is being relocated to work in Sydney, which is quite the exciting opportunity for both of them. Charlotte’s already set up with a job at Atlassian—they’re very lucky to have her.

So once again there’s the excitement of seeing someone set out on a new adventure. But this one feels particularly bittersweet to me. Charlotte wasn’t just a co-worker. For a while there, I was her teacher …or coach …or mentor …I’m not really sure what to call it. I wrote about the first year of learning and how it wasn’t just a learning experience for Charlotte, it was very much a learning experience for me.

For the last year though, there’s been less and less of that direct transfer of skills and knowledge. Charlotte is definitely not a “junior” developer any more (whatever that means), which is really good but it’s left a bit of a gap for me when it comes to finding fulfilment.

Just last week I was checking in with Charlotte at the end of a long day she had spent tirelessly working on the new Clearleft site. Mostly I was making sure that she was going to go home and not stay late (something that had happened the week before which I wanted to nip in the bud—that’s not how we do things ‘round here). She was working on a particularly gnarly cross-browser issue and I ended up sitting with her, trying to help work through it. At the end, I remember thinking “I’ve missed this.”

It hasn’t been all about HTML, CSS, and JavaScript. Charlotte really pushed herself to become a public speaker. I did everything I could to support that—offering advice, giving feedback and encouragement—but in the end, it was all down to her.

I can’t describe the immense swell of pride I felt when Charlotte spoke on stage. Watching her deliver her talk at Dot York was one my highlights of the year.

Thinking about it, this is probably the perfect time for Charlotte to leave the Clearleft nest. After all, I’m not sure there’s anything more I can teach her. But this feels like a particularly sad parting, maybe because she’s going all the way to Australia and not, y’know, starting a new job in London.

In our final one-to-one, my stiff upper lip may have had a slight wobble as I told Charlotte what I thought was her greatest strength. It wasn’t her work ethic (which is incredibly strong), and it wasn’t her CSS skills (‘though she is now an absolute wizard). No, her greatest strength, in my opinion, is her kindness.

I saw her kindness in how she behaved with her colleagues, her peers, and of course in all the fantastic work she’s done at Codebar Brighton.

I’m going to miss her.

Thank you @PhilWalton for https://github.com/philipwalton/flexbugs

That came in very handy today.

Astronaut

This is beautifully intimate. Your role is that of an anthropologist in orbit around Earth observing the everyday moments on the planet below through uploaded videos that have never been viewed by another human.

Sunday, January 22nd, 2017

Rib of beef, carrots, carrot-top chimichurri, and kale.

Rib of beef, carrots, carrot-top chimichurri, and kale.

Rifling through the vinyl in a hipster bar last week, I came across Uncle Alan. https://adactio.com/journal/562

Rifling through the vinyl in a hipster bar last week, I came across Uncle Alan.

https://adactio.com/journal/562

Opera Neon – The future of web browsers? | Opera

Under the hood it’s the same Blink engine that power’s the regular Opera browser (and Chrome) but I really like the interface on this experiment. It’s described as being a “concept browser”, much like a “concept car”, which is a nice way of framing experiments like this. More concept browsers please!

Swing Left | Take Back the House

An excellent location-based resource for US citizens looking to make a difference in the 2018 midterm elections.

CSS Grid. One layout method not the only layout method

Grid is only a replacement for float-based layout, where float-based layout it being used to try and create a two-dimensional grid. If you want to wrap text around an image, I’d suggest floating it.

Grid is only a replacement for flexbox if you have been trying to make flexbox into a two-dimensional grid. If you want to take a bunch of items and space them out evenly in a single row, use flexbox.

Saturday, January 21st, 2017

To everyone who marched today: thank you.

Designing inspired style guides presentation slides and transcript | Stuff & Nonsense

Having spent half a decade encouraging people to make their pattern libraries public and doing my best to encourage openness and sharing, I find this kind of styleguide-shaming quite disheartening:

These all offer something different but more often than not they have something in common. They look ugly enough to have been designed by someone who enjoys configuring a router.

If a pattern library is intended to inspire, then make it inspiring. But if it’s intended to be an ever-changing codebase (made for and by the kind of people who enjoy configuring a router), then that’s where the effort and time should be concentrated.

But before designing anything—whether it’s a website or a pattern library—figure out who the audience is first.

Friday, January 20th, 2017

Seabass on spinach on chickpeas and chorizo.

Seabass on spinach on chickpeas and chorizo.

Having all the feels as @LotteJackson bids farewell to @Clearleft to begin a new adventure down under.

Having all the feels as @LotteJackson bids farewell to @Clearleft to begin a new adventure down under.

Thursday, January 19th, 2017

Trump: A Resister’s Guide | Harper’s Magazine - Part 11

You, the software engineers and leaders of technology companies, face an enormous responsibility. You know better than anyone how best to protect the millions who have entrusted you with their data, and your knowledge gives you real power as civic actors. If you want to transform the world for the better, here is your moment. Inquire about how a platform will be used. Encrypt as much as you can. Oppose the type of data analysis that predicts people’s orientation, religion, and political preferences if they did not willingly offer that information.

Looking beyond launch

It’s all go, go, go at Clearleft while we’re working on a new version of our website …accompanied by a brand new identity. It’s an exciting time in the studio, tinged with the slight stress that comes with any kind of unveiling like this.

I think it’s good to remember that this is the web. I keep telling myself that we’re not unveiling something carved in stone. Even after the launch we can keep making the site better. In fact, if we wait until everything is perfect before we launch, we’ll probably never launch at all.

On the other hand, you only get one chance to make a first impression, right? So it’s got to be good …but it doesn’t have to be done. A website is never done.

I’ve got to get comfortable with that. There’s lots of things that I’d like to be done in time for launch, but realistically it’s fine if those things are completed in the subsequent days or weeks.

Adding a service worker and making a nice offline experience? I really want to do that …but it can wait.

What about other performance tweaks? Yes, we’ll to try have every asset—images, fonts—optimised …but maybe not from day one.

Making sure that each page has good metadata—Open Graph? Twitter Cards? Microformats? Maybe even AMP? Sure …but not just yet.

Having gorgeous animations? Again, I really want to have them but as Val rightly points out, animations are an enhancement—a really, really great enhancement.

If anything, putting the site live before doing all these things acts as an incentive to make sure they get done.

So when you see the new site, if you view source or run it through Web Page Test and spot areas for improvement, rest assured we’re on it.

Improving accessibility in Co-op wills – Digital blogs

Some interesting insights from usability and accessibility testing at the Co-op.

We used ‘nesting’ to reduce the amount of information on the page when the user first reaches it. When the user chooses an option, we ask for any other details at that point rather than having all the questions on the page at once.

bastianallgeier/letter: Letter is a simple, highly customizable tool to create letters in your browser.

A nice little use of print (and screen) styles from Bastian—compose letters in a web browser.

Instead of messing around in Word, Pages or even Indesign, you can write your letters in the browser, export them as HTML or PDF (via Apple Preview).

Understanding the Critical Rendering Path

A nice and clear description of how browsers parse and render web pages.

Sending out the latest @Clearleft newsletter. It’s a good ’un.

http://tinyletter.com/clearleft

Certified Malice – text/plain

Following from that great post about the “zone of death” in browsers, Eric Law looks at security and trust in a world where certificates are free and easily available …even to the bad guys.

Let them paste passwords - NCSC Site

Ever been on one of those websites that doesn’t allow you to paste into the password field? Frustrating, isn’t it? (Especially if you use a password manager.)

It turns out that nobody knows how this ever started. It’s like a cargo cult without any cargo.

Making input type=date complicated – Samsung Internet Developers – Medium

PPK has posted some excellent thinking on calendar widgets to Ev’s blog.

Arrival – Mozilla Open Design

Mozilla’s audacious rebranding in the open that I linked to a while back has come to fruition.

I like it. But even if I didn’t, congratulations to everyone involved in getting agreement across an organisation of this size—never an easy task.

Memory of Mankind: All of Human Knowledge Buried in a Salt Mine - The Atlantic

Like cuneiform crossed with the Long Now Foundation’s Rosetta Project.

He will laser-print a microscopic font onto 1-mm-thick ceramic sheets, encased in wafer-thin layers of glass. One 20 cm piece of this microfilm can store 5 million characters; whole libraries of information—readable with a 10x-magnifying lens—could be slotted next to each other and hardly take up any space.

Tuesday, January 17th, 2017

Loving the instructions that @iambenwhite designed for the @clearleft coffee machine.

Loving the instructions that @iambenwhite designed for the @clearleft coffee machine.

Monday, January 16th, 2017

Just heard the news about Gene Cernan.

Goodbye, Geno.

The Line of Death – text/plain

A thoroughly fascinating look at which parts of a browser’s interface are available to prevent phishing attacks, and which parts are available to enable phishing attacks. It’s like trench warfare for pixels.

Bring on the Flood · thewalrus.ca

Most of these dystopian scenarios are, after all, post-apocalyptic: the bad thing happened, the tension broke, and now so much less is at stake. The anxiety and ambivalence we feel toward late-stage capitalism, income inequality, political corruption, and environmental degradation—acute psychological pandemics in the here and now—are utterly dissolved. In a strange, wicked way, the aftermath feels fine.

Sunday, January 15th, 2017

Choucroute garnie.

Choucroute garnie.

Using the aria-current attribute – Tink

The aria-current attribute is very handy and easy to implement. Léonie explains it really well here.

Modernizing our Progressive Enhancement Delivery | Filament Group, Inc., Boston, MA

Scott runs through the latest improvements to the Filament Group website. There’s a lot about HTTP2, but also a dab of service workers (using a similar recipe to my site).

Browser Support for evergreen websites

Oh, how I wished everyone approached building for the web the way that Rachel does. Smart, sensible, pragmatic, and exciting!

The roast chicken angel watches over its flock of side dishes.

The roast chicken angel watches over its flock of side dishes.

How E.T. Really Called Home (PDF)

A 1983 article from 73 Magazine on the surprisingly plausible Rube Goldberg/Heath Robinson device created by E.T. to call home.

Saturday, January 14th, 2017

Reading Black Box Thinking by Matthew Syed.

Having a delicious Nightfire burger from @trollburgerBN1.

Having a delicious Nightfire burger from @trollburgerBN1.

Thursday, January 12th, 2017

Saving you bandwidth on Google+ through machine learning

This is an interesting use of voodoo magic (or “machine learning” as we call it now) by Google to interpolate data in a small image to create a larger version. A win for performance.

Homemade bagels.

Homemade bagels.

Wednesday, January 11th, 2017

Making Resilient Web Design work offline

I’ve written before about taking an online book offline, documenting the process behind the web version of HTML5 For Web Designers. A book is quite a static thing so it’s safe to take a fairly aggressive offline-first approach. In fact, a static unchanging book is one of the few situations that AppCache works for. Of course a service worker is better, but until AppCache is removed from browsers (and until service worker is supported across the board), I’m using both. I wouldn’t recommend that for most sites though—for most sites, use a service worker to enhance it, and avoid AppCache like the plague.

For Resilient Web Design, I took a similar approach to HTML5 For Web Designers but I knew that there was a good chance that some of the content would be getting tweaked at least for a while. So while the approach is still cache-first, I decided to keep the cache fairly fresh.

Here’s my service worker. It starts with the usual stuff: when the service worker is installed, there’s a list of static assets to cache. In this case, that list is literally everything; all the HTML, CSS, JavaScript, and images for the whole site. Again, this is a pattern that works well for a book, but wouldn’t be right for other kinds of websites.

The real heavy lifting happens with the fetch event. This is where the logic sits for what the service worker should do everytime there’s a request for a resource. I’ve documented the logic with comments:

// Look in the cache first, fall back to the network
  // CACHE
  // Did we find the file in the cache?
      // If so, fetch a fresh copy from the network in the background
      // NETWORK
          // Stash the fresh copy in the cache
  // NETWORK
  // If the file wasn't in the cache, make a network request
      // Stash a fresh copy in the cache in the background
  // OFFLINE
  // If the request is for an image, show an offline placeholder
  // If the request is for a page, show an offline message

So my order of preference is:

  1. Try the cache first,
  2. Try the network second,
  3. Fallback to a placeholder as a last resort.

Leaving aside that third part, regardless of whether the response is served straight from the cache or from the network, the cache gets a top-up. If the response is being served from the cache, there’s an additional network request made to get a fresh copy of the resource that was just served. This means that the user might be seeing a slightly stale version of a file, but they’ll get the fresher version next time round.

Again, I think this acceptable for a book where the tweaks and changes should be fairly minor, but I definitely wouldn’t want to do it on a more dynamic site where the freshness matters more.

Here’s what it usually likes like when a file is served up from the cache:

caches.match(request)
  .then( responseFromCache => {
  // Did we find the file in the cache?
  if (responseFromCache) {
      return responseFromCache;
  }

I’ve introduced an extra step where the fresher version is fetched from the network. This is where the code can look a bit confusing: the network request is happening in the background after the cached file has already been returned, but the code appears before the return statement:

caches.match(request)
  .then( responseFromCache => {
  // Did we find the file in the cache?
  if (responseFromCache) {
      // If so, fetch a fresh copy from the network in the background
      event.waitUntil(
          // NETWORK
          fetch(request)
          .then( responseFromFetch => {
              // Stash the fresh copy in the cache
              caches.open(staticCacheName)
              .then( cache => {
                  cache.put(request, responseFromFetch);
              });
          })
      );
      return responseFromCache;
  }

It’s asynchronous, see? So even though all that network code appears before the return statement, it’s pretty much guaranteed to complete after the cache response has been returned. You can verify this by putting in some console.log statements:

caches.match(request)
.then( responseFromCache => {
  if (responseFromCache) {
      event.waitUntil(
          fetch(request)
          .then( responseFromFetch => {
              console.log('Got a response from the network.');
              caches.open(staticCacheName)
              .then( cache => {
                  cache.put(request, responseFromFetch);
              });
          })
      );
      console.log('Got a response from the cache.');
      return responseFromCache;
  }

Those log statements will appear in this order:

Got a response from the cache.
Got a response from the network.

That’s the opposite order in which they appear in the code. Everything inside the event.waitUntil part is asynchronous.

Here’s the catch: this kind of asynchronous waitUntil hasn’t landed in all the browsers yet. The code I’ve written will fail.

But never fear! Jake has written a polyfill. All I need to do is include that at the start of my serviceworker.js file and I’m good to go:

// Import Jake's polyfill for async waitUntil
importScripts('/js/async-waituntil.js');

I’m also using it when a file isn’t found in the cache, and is returned from the network instead. Here’s what the usual network code looks like:

fetch(request)
  .then( responseFromFetch => {
    return responseFromFetch;
  })

I want to also store that response in the cache, but I want to do it asynchronously—I don’t care how long it takes to put the file in the cache as long as the user gets the response straight away.

Technically, I’m not putting the response in the cache; I’m putting a copy of the response in the cache (it’s a stream, so I need to clone it if I want to do more than one thing with it).

fetch(request)
  .then( responseFromFetch => {
    // Stash a fresh copy in the cache in the background
    let responseCopy = responseFromFetch.clone();
    event.waitUntil(
      caches.open(staticCacheName)
      .then( cache => {
          cache.put(request, responseCopy);
      })
    );
    return responseFromFetch;
  })

That all seems to be working well in browsers that support service workers. For legacy browsers, like Mobile Safari, there’s the much blunter caveman logic of an AppCache manifest.

Here’s the JavaScript that decides whether a browser gets the service worker or the AppCache:

if ('serviceWorker' in navigator) {
  // If service workers are supported
  navigator.serviceWorker.register('/serviceworker.js');
} else if ('applicationCache' in window) {
  // Otherwise inject an iframe to use appcache
  var iframe = document.createElement('iframe');
  iframe.setAttribute('src', '/appcache.html');
  iframe.setAttribute('style', 'width: 0; height: 0; border: 0');
  document.querySelector('footer').appendChild(iframe);
}

Either way, people are making full use of the offline nature of the book and that makes me very happy indeed.

ryanmcdermott/clean-code-javascript: Clean Code concepts adapted for JavaScript

This looks a sensible approach to writing clean JavaScript.

A Tale of Four Caches · Yoav Weiss

A cute explanation of different browser caches:

  • memory cache,
  • service worker cache,
  • disk cache, and
  • push cache.

Are you a human? In Brighton? With a website?

Come along to @68MiddleSt at 6pm for Homebrew Website Club.

Another dark pattern for @harrybr.

Another dark pattern for @harrybr.

Chinscratching.

Chinscratching.

Gathering of the ’lefties.

Gathering of the ’lefties.

Tuesday, January 10th, 2017

Mentorship, From the Notebook of Aaron Gustafson

Here’s a great opportunity for somebody looking to level up in web development—mentorship from the one and only Aaron Gustafson.

Stargazing Live, 2017 : Outreach : Physics and Astronomy : University of Sussex

There’s going to be an evening of astro events out at Sussex University next Wednesday, January 18th. Stargazing, an inflatable planetarium, and the Ensonglopedia of science—fun for all the family!

Monday, January 9th, 2017

The Futures of Typography

A wonderfully thoughtful piece from Robin, ranging from the printing technologies of the 15th century right up to the latest web technologies. It’s got all my favourite things in there: typography, digital preservation, and service workers. Marvellous!

Resilient Web Design | susan jean robertson

Well, this is nice! Susan has listed the passages she highlighted from Resilient Web Design.

In the spirit of the book, I read it in a browser, and I broke up my highlights by chapters. As usual, you should read the book yourself, these highlights are taken out of context and better when you’ve read the whole thing.

Typora — a minimal markdown reading & writing app

This looks like an interesting little Markdown editor. I think I’ll take it for a spin.

Eating toast made from @Aizlewood’s sourdough bread.

Eating toast made from @Aizlewood’s sourdough bread.

Sunday, January 8th, 2017

The circle of life on Ceres was so small you could see the curve.

—Leviathan Wakes

Saturday, January 7th, 2017

Just had a lovely meal made entirely of verbs: duck, squash, and sprouts.

The flower responded to the star.

—Helliconia Spring

Friday, January 6th, 2017

Redesign v15 Notes | CSS-Tricks

Chris redesigned CSS Tricks and it’s got some really nice touches. I particularly like the stacked card view on mobile.

From Tape Drives to Memory Orbs, the Data Formats of Star Wars Suck (Spoilers) | Motherboard

As always with sci-fi interfaces, the important part is telling the story, not realism or accuracy. Personally, I liked the way that the World War II trappings of Rogue One extended to communications and networking technologies.

A Day in the Life of Americans | FlowingData

Watching this data visualisation on its high speed setting is quite hypnotic.

Making stuff from scratch in the wild

Making fire, building shelter, throwing spears …all useful post-apocalyptic skills documented on the primitive technology blog.

Primitive technology is a hobby where you make things in the wild completely from scratch using no modern tools or materials. This is the strict rule. If you want a fire- use fire sticks, an axe- pick up a stone and shape it, a hut- build one from trees, mud, rocks etc. The challenge is seeing how far you can go without modern technology. If this hobby interests you then this blog might be what you are looking for.

It’s more than just the words

I can relate to what Rachel describes here—I really like using my own website as a playground to try out new technologies. That’s half the fun of the indie web.

I had already decided to bring my content back home in 2017, but I’d also like to think about this idea of using my own site to better demonstrate and play with the new technologies I write about.

Designing Systems: Theory, Practice, and the Unfortunate In-between / Paul Robert Lloyd

Paul is turning his excellent talk on design systems into a three part series. Here’s part one, looking at urban planning from Brasília to London.

Lost in thought in front of the wall o’design.

Lost in thought in front of the wall o’design.

Productivity in Terrible Times

When a solid 67% of your soul is engaged with battles elsewhere, how do you continue on with our ongoing, non-revolutionary work?

Indivisible Guide

A resource for American citizens put together by former congressional staffers. If you’re a US citizen wondering how you can resist Trump’s agenda, this should provide solid advice on what action you can take.

The Realm of Rough Telepathy

I love this recasting of the internet into a fantastical medieval setting. Standards become spells, standards bodies become guilds and orders of a coven, and technologies become instruments of divination. Here, for example, is the retelling of IPv4:

The Unique Rune of the Fourth Order is the original and formative Unique Rune, still commonly in use. All existing Unique Runes of the Fourth Order were created simultaneously in the late 1970’s by the Numberkeepers, at a time when Rough Telepathy was a small and speculative effort tightly affiliated with the Warring Kingdom of the United States. There were then and are now 4.3 billion Unique Runes of the Fourth Order, a number which cannot be increased. The early Numberkeepers believed 4.3 billion would be more than enough. However, this number is no longer sufficient to provision the masses hungry to never disengage from participation in Rough Telepathy, and the Merchants eager to harness Rough Telepathy as a “feature” in new and often unnecessary consumer products. This shortage has caused considerable headache among the Fiefdoms, the Regional Telepathy Registers, and the Coven.

Thursday, January 5th, 2017

Seabass with five peppercorn butter sauce.

Seabass with five peppercorn butter sauce.

Going rogue

As soon as tickets were available for the Brighton premiere of Rogue One, I grabbed some—two front-row seats for one minute past midnight on December 15th. No problem. That was the night after the Clearleft end-of-year party on December 14th.

Then I realised how dates work. One minute past midnight on December 15th is the same night as December 14th. I had double-booked myself.

It’s a nice dilemma to have; party or Star Wars? I decided to absolve myself of the decision by buying additional tickets for an evening showing on December 15th. That way, I wouldn’t feel like I had to run out of the Clearleft party before midnight, like some geek Cinderella.

In the end though, I did end up running out of the Clearleft party. I had danced and quaffed my fill, things were starting to get messy, and frankly, I was itching to immerse myself in the newest Star Wars film ever since Graham strapped a VR headset on me earlier in the day and let me fly a virtual X-wing.

Getting in the mood for Rogue One with the Star Wars Battlefront X-Wing VR mission—invigorating! (and only slightly queasy-making)

So, somewhat tired and slightly inebriated, I strapped in for the midnight screening of Rogue One: A Star Wars Story.

I thought it was okay. Some of the fan service scenes really stuck out, and not in a good way. On the whole, I just wasn’t that gripped by the story. Ah, well.

Still, the next evening, I had those extra tickets I had bought as psychological insurance. “Why not?” I thought, and popped along to see it again.

This time, I loved it. It wasn’t just me either. Jessica was equally indifferent the first time ‘round, and she also enjoyed it way more the second time.

I can’t recall having such a dramatic swing in my appraisal of a film from one viewing to the next. I’m not quite sure why it didn’t resonate the first time. Maybe I was just too tired. Maybe I was overthinking it too much, unable to let myself get caught up in the story because I was over-analysing it as a new Star Wars film. Anyway, I’m glad that I like it now.

Much has been made of its similarity to classic World War Two films, which I thought worked really well. But the aspect of the film that I found most thought-provoking was the story of Galen Erso. It’s the classic tale of an apparently good person reluctantly working in service to evil ends.

This reminded me of Mother Night, perhaps my favourite Kurt Vonnegut book (although, let’s face it, many of his books are interchangeable—you could put one down halfway through, and pick another one up, and just keep reading). Mother Night gives the backstory of Howard W. Campbell, who appears as a character in Slaughterhouse Five. In the introduction, Vonnegut states that it’s the one story of his with a moral:

We are what we pretend to be, so we must be careful about what we pretend to be.

If Galen Erso is pretending to work for the Empire, is there any difference to actually working for the Empire? In this case, there’s a get-out clause for this moral dilemma: by sabotaging the work (albeit very, very subtly) Galen’s soul appears to be absolved of sin. That’s the conclusion of the excellent post on the Sci-fi Policy blog, Rogue One: an ‘Engineering Ethics’ Story:

What Galen Erso does is not simply watch a system be built and then whistleblow; he actively shaped the design from its earliest stages considering its ultimate societal impacts. These early design decisions are proactive rather than reactive, which is part of the broader engineering ethics lesson of Rogue One.

I know I’m Godwinning myself with the WWII comparisons, but there are some obvious historical precedents for Erso’s dilemma. The New York Review of Books has an in-depth look at Werner Heisenberg and his “did he/didn’t he?” legacy with Germany’s stalled atom bomb project. One generous reading of his actions is that he kept the project going in order to keep scientists from being sent to the front, but made sure that the project was never ambitious enough to actually achieve destructive ends:

What the letters reveal are glimpses of Heisenberg’s inner life, like the depth of his relief after the meeting with Speer, reassured that things could safely tick along as they were; his deep unhappiness over his failure to explain to Bohr how the German scientists were trying to keep young physicists out of the army while still limiting uranium research work to a reactor, while not pursuing a fission bomb; his care in deciding who among friends and acquaintances could be trusted.

Speaking of Albert Speer, are his hands are clean or dirty? And in the case of either answer, is it because of moral judgement or sheer ignorance? The New Atlantis dives deep into this question in Roger Forsgren’s article The Architecture of Evil:

Speer indeed asserted that his real crime was ambition — that he did what almost any other architect would have done in his place. He also admitted some responsibility, noting, for example, that he had opposed the use of forced labor only when it seemed tactically unsound, and that “it added to my culpability that I had raised no humane and ethical considerations in these cases.” His contrition helped to distance himself from the crude and unrepentant Nazis standing trial with him, and this along with his contrasting personal charm permitted him to be known as the “good Nazi” in the Western press. While many other Nazi officials were hanged for their crimes, the court favorably viewed Speer’s initiative to prevent Hitler’s scorched-earth policy and sentenced him to twenty years’ imprisonment.

I wish that these kinds of questions only applied to the past, but they are all-too relevant today.

Software engineers in the United States are signing a pledge not to participate in the building of a Muslim registry:

We refuse to participate in the creation of databases of identifying information for the United States government to target individuals based on race, religion, or national origin.

That’s all well and good, but it might be that a dedicated registry won’t be necessary if those same engineers are happily contributing their talents to organisations whose business models are based on the ability to track and target people.

But now we’re into slippery slopes and glass houses. One person might draw the line at creating a Muslim registry. Someone else might draw the line at including any kind of invasive tracking script on a website. Someone else again might decide that the line is crossed by including Google Analytics. It’s moral relativism all the way down. But that doesn’t mean we shouldn’t draw lines. Of course it’s hard to live in an ideal state of ethical purity—from the clothes we wear to the food we eat to the electricity we use—but a muddy battleground is still capable of having a line drawn through it.

The question facing the fictional characters Galen Erso and Howard W. Campbell (and the historical figures of Werner Heisenberg and Albert Speer) is this: can I accomplish less evil by working within a morally repugnant system than being outside of it? I’m sure it’s the same question that talented designers ask themselves before taking a job at Facebook.

At one point in Rogue One, Galen Erso explicitly invokes the justification that they’d find someone else to do this work anyway. It sounds a lot like Tim Cook’s memo to Apple staff justifying his presence at a roundtable gathering that legitimised the election of a misogynist bigot to the highest office in the land. I’m sure that Tim Cook, Elon Musk, Jeff Bezos, and Sheryl Sandberg all think they are playing the part of Galen Erso but I wonder if they’ll soon find themselves indistinguishable from Orson Krennic.

The West Pier.

The West Pier.

What AMP (Maybe) Means for News Developers - Features - Source: An OpenNews project

So if AMP is useful it’s because it raises the stakes. If we (news developers) don’t figure out faster ways to load our pages for readers, then we’re going to lose a lot of magic.

A number of developers answered questions on the potential effects of Google’s AMP project. This answer resonates a lot with my own feelings:

AMP is basically web performance best practices dressed up as a file format. That’s a very clever solution to what is, at heart, a cultural problem: when management (in one form or another) comes to the CMS team at a news organization and asks to add more junk to the site, saying “we can’t do that because AMP” is a much more powerful argument than trying to explain why a pop-over “Like us on Facebook!” modal is driving our readers to drink.

But the danger is that AMP turns into a long-term “solution” instead of a stop-gap:

So in a sense, the best possible outcome is that AMP is disruptive enough to shake the boardroom into understanding the importance of performance in platform decisions (and making the hard business decisions this demands), but that developers are allowed to implement those decisions in standard HTML instead of adding yet another delivery format to their export pipeline.

The ideal situation looks a lot more like Tim’s proposal:

I would be much more pleased with AMP if it was a spec for Google’s best-practice recommendations rather than effectively a new non-standard format. By using standard HTML/CSS/JS as the building blocks, they’re starting on the right foot, but the reliance on a Google-decreed AMP JavaScript library, use of separate AMP-specific URLs, and encouragement to use a Google-provided CDN are all worrying aspects.

Wednesday, January 4th, 2017

Day 14: Posting to my Website from Alexa #100DaysOfIndieWeb • Aaron Parecki

Aaron documents how he posts to his website through his Amazon Echo. No interface left behind.

Contact

I left the office one evening a few weeks back, and while I was walking up the street, James Box cycled past, waving a hearty good evening to me. I didn’t see him at first. I was in a state of maximum distraction. For one thing, there was someone walking down the street with a magnificent Irish wolfhound. If that weren’t enough to dominate my brain, I also had headphones in my ears through which I was listening to an audio version of a TED talk by Donald Hoffman called Do we really see reality as it is?

It’s fascinating—if mind-bending—stuff. It sounds like the kind of thing that’s used to justify Deepak Chopra style adventures in la-la land, but Hoffman is deliberately taking a rigorous approach. He knows his claims are outrageous, but he welcomes all attempts to falsify his hypotheses.

I’m not noticing this just from a short TED talk. It’s been one of those strange examples of synchronicity where his work has been popping up on my radar multiple times. There’s an article in Quanta magazine that was also republished in The Atlantic. And there’s a really good interview on the You Are Not So Smart podcast that I huffduffed a while back.

But the most unexpected place that Hoffman popped up was when I was diving down a SETI (or METI) rabbit hole. There I was reading about the Cosmic Call project and Lincos when I came across this article: Why ‘Arrival’ Is Wrong About the Possibility of Talking with Space Aliens, with its subtitle “Human efforts to communicate with extraterrestrials are doomed to failure, expert says.” The expert in question pulling apart the numbers in the Drake equation turned out to be none other than Donald Hoffmann.

A few years ago, at a SETI Institute conference on interstellar communication, Hoffman appeared on the bill after a presentation by radio astronomer Frank Drake, who pioneered the search for alien civilizations in 1960. Drake showed the audience dozens of images that had been launched into space aboard NASA’s Voyager probes in the 1970s. Each picture was carefully chosen to be clearly and easily understood by other intelligent beings, he told the crowd.

After Drake spoke, Hoffman took the stage and “politely explained how every one of the images would be infinitely ambiguous to extraterrestrials,” he recalls.

I’m sure he’s quite right. But let’s face it, the Voyager golden record was never really about communicating with an alien intelligence …it was about how we present ourself.

Slapdashery

I really like this short-form writing project from Ben:

Daily off-the-cuff thoughts on design, UX, and products, written in 5 minutes without stopping.

He has also documented some of his strategies to make sure he sticks with it. Smart!

Happy perihelion, fellow passengers on Spaceship Earth!

Wheeeeeeeeee!

Tuesday, January 3rd, 2017

Kiss My Classname - Zeldman on Web & Interaction Design

I understand how bloated and non-reusable code can get when a dozen people who don’t talk to each other work on it over a period of years. I don’t believe the problem is the principle of semantic markup or the cascade in CSS. I believe the problem is a dozen people working on something without talking to each other.

The triumph of the small » Nieman Journalism Lab

I really like Liz’s long-zoom perspective in this look ahead to journalism in 2017.

What I Read in 2016 - TimKadlec.com

Tim’s book recommendations have always been solid. Here’s his year-end list. I’m honoured that he not only read Resilient Web Design but also gave it all the stars.

Pattern patter. — Ethan Marcotte

Ethan has been thinking smarty-thinky thoughts about patterns and pattern libraries.

Does Google execute JavaScript? | Stephan Boyer

Google may or may not decide to run your JavaScript, and you don’t want your business to depend on its particular inclination of the day. Do server-side/universal/isomorphic rendering just to be safe.

Vertical limit

When I was first styling Resilient Web Design, I made heavy use of vh units. The vertical spacing between elements—headings, paragraphs, images—was all proportional to the overall viewport height. It looked great!

Then I tested it on real devices.

Here’s the problem: when a page loads up in a mobile browser—like, say, Chrome on an Android device—the URL bar is at the top of the screen. The height of that piece of the browser interface isn’t taken into account for the viewport height. That makes sense: the viewport height is the amount of screen real estate available for the content. The content doesn’t extend into the URL bar, therefore the height of the URL bar shouldn’t be part of the viewport height.

But then if you start scrolling down, the URL bar scrolls away off the top of the screen. So now it’s behaving as though it is part of the content rather than part of the browser interface. At this point, the value of the viewport height changes: now it’s the previous value plus the height of the URL bar that was previously there but which has now disappeared.

I totally understand why the URL bar is squirrelled away once the user starts scrolling—it frees up some valuable vertical space. But because that necessarily means recalculating the viewport height, it effectively makes the vh unit in CSS very, very limited in scope.

In my initial implementation of Resilient Web Design, the one where I was styling almost everything with vh, the site was unusable. Every time you started scrolling, things would jump around. I had to go back to the drawing board and remove almost all instances of vh from the styles.

I’ve left it in for one use case and I think it’s the most common use of vh: making an element take up exactly the height of the viewport. The front page of the web book uses min-height: 100vh for the title.

Scrolling.

But as soon as you scroll down from there, that element changes height. The content below it suddenly moves.

Let’s say the overall height of the browser window is 600 pixels, of which 50 pixels are taken up by the URL bar. When the page loads, 100vh is 550 pixels. But as soon as you scroll down and the URL bar floats away, the value of 100vh becomes 600 pixels.

(This also causes problems if you’re using vertical media queries. If you choose the wrong vertical breakpoint, then the media query won’t kick in when the page loads but will kick in once the user starts scrolling …or vice-versa.)

There’s a mixed message here. On the one hand, the browser is declaring that the URL bar is part of its interface; that the space is off-limits for content. But then, once scrolling starts, that is invalidated. Now the URL bar is behaving as though it is part of the content scrolling off the top of the viewport.

The result of this messiness is that the vh unit is practically useless for real-world situations with real-world devices. It works great for desktop browsers if you’re grabbing the browser window and resizing, but that’s not exactly a common scenario for anyone other than web developers.

I’m sure there’s a way of solving it with JavaScript but that feels like using an atomic bomb to crack a walnut—the whole point of having this in CSS is that we don’t need to use JavaScript for something related to styling.

It’s such a shame. A piece of CSS that’s great in theory, and is really well supported, just falls apart where it matters most.

Update: There’s a two-year old bug report on this for Chrome, and it looks like it might actually get fixed in February.

Scrolling.

Scrolling.

Add to home screen.

Add to home screen.

Indie Microblogging: owning your short-form writing by Manton Reece — Kickstarter

Here’s an interesting Kickstarter project: a book about owning your notes (and syndicating them to Twitter) to complement the forthcoming micro.blog service.

Exciting times: 2017 and the web - Tales of a Developer Advocate by Paul Kinlan

Paul takes a look at the year ahead on the web and likes what he sees. There’s plenty of new browser features and APIs of course, but more interesting:

The web reaching more people as they come online with Mobile. There is still a huge amount of potential and growth in India, Indonesia, China, Thailand, Vietnam, all of Africa. You name it, mobile is growing massively still and the web is accessible on all of these devices.

Monday, January 2nd, 2017

Mercury by Postlight

Readability is back, but now it’s called Mercury.

2016 reading list

I was having a think back over 2016, trying to remember which books I had read during the year. To the best of my recollection, I think that this is the final tally…

Non-fiction

  • Endurance by Alfred Lansing
  • The Rational Optimist by Matt Ridley
  • The Real World of Technology by Ursula Franklin
  • Design For Real Life by Eric Meyer and Sara Wachter-Boettcher
  • Practical SVG by Chris Coyier
  • Demystifying Public Speaking by Lara Hogan
  • Working The Command Line by Remy Sharp

Fiction

  • The Revenant by Michael Punke
  • The Adjacent by Christopher Priest
  • Helliconia Spring by Brian Aldiss
  • High Rise by J.G. Ballard
  • The Affirmation by Christopher Priest
  • Brodeck’s Report by Philippe Claudel
  • Greybeard by Brian Aldiss
  • Fictions by Jorge Luis Borges
  • The Long Way to a Small Angry Planet by Becky Chambers
  • The Dark Forest by Cixin Liu
  • Death’s End by Cixin Liu
  • The First Fifteen Lives of Harry August by Claire North

Seems kinda meagre to me. Either I need to read more books or I need to keep better track of what books I’m reading when. Starting now.

Reading Leviathan Wakes by James S.A. Corey.

Sunday, January 1st, 2017

In Praise of On Resilient Web Design by Jeremy Keith

I’m really touched—and honoured—that my book could have this effect.

It made me fall back in love with the web and with making things for the web.

Typography Wars: Has the Internet Killed Curly Quotes? - The Atlantic

Glenn Fleishman on the war of attrition between primes and quotation marks on the web.

Two Irish Girls Who Made It to New York - The New York Times

Maeve Higgins must’ve been back in Cobh (our hometown) at the same time this Christmas. Here she tells the story of Annie Moore, the first person to enter the doors at Ellis Island.

I stood on the darkening quay side in Cobh on Christmas Eve, and looked at a statue of Annie there. She seems small and capable, her hands lightly resting on her little brothers’ shoulders, gazing back at a country she would never see again. An Irish naval ship had returned to the harbor earlier that week from its mission off the Mediterranean coast, a mission that has rescued 15,000 people from the sea since May 2015, though 2016 was still the deadliest one for migrants crossing the Mediterranean since World War II.

Front-end Style Guides by Anna Debenham

Anna has just published a lovely new version of her excellent little book on pattern libraries. EPUB, MOBI, and PDF versions are yours for a mere $8.

Twenty sixteen

When I took a look at back at 2015, it was to remark on how nicely uneventful it was. I wish I could say the same about 2016. Instead, this was the year that too damned much kept happening.

The big picture was dominated by Brexit and Trump, disasters that are sure to shape events for years to come. I try to keep the even bigger picture in perspective and remind myself that our species is doing well, and that we’re successfully battling poverty, illiteracy, violence, pollution, and disease. But it’s so hard sometimes. I still think the overall trend for this decade will be two steps forward, but the closing half is almost certain to be one step back.

Some people close to me have had a really shitty year. More than anything, I wish I could do more to help them.

Right now I’m thinking that one of the best things I could wish for 2017 is for it to be an uneventful year. I’d really like it if the end-of-year round-up in 365 days time had no world-changing events.

But for me personally? 2016 was fine. I didn’t accomplish any big goals—although I’m very proud to have published Resilient Web Design—but I’ve had fun at work, and as always, I’m very grateful for all the opportunities that came my way.

I ate some delicious food…

Short rib. Seabass with carrot-top pesto on beet greens and carrot purée. Bratwurst. Sausage and sauerkraut. Short ribs. Homemade pappardelle with pig cheek ragu. Barbecued Thai chicken. Daily oyster. Kebab. Chicharrones. Nightfireburger. Ribeye.

I went to beautiful places…

Popped in to see Caravaggio and Holbein. Our home for the week. Bodleian go where no one has gone before. Tram. Amsterdam’s looking lovely this morning. Stockholm street. Mauer. Ah, Venice! Barcelona. Malibu sunset. Cuskinny.

And I got to hang out with some lovely doggies…

Mia! Archie is my favourite @EnhanceConf speaker. Mesa, Lola, and @wordridden. Rainier McChedderton! I met Zero! Yay! Thanks, @wilto. On the bright side, Huxley is in the @Clearleft office today. The day Herbie came to visit @Clearleft. It’s Daphne. Poppy’s on patrol. Morty! Scribble is a good dog. Sleepy.

Have a happy—and uneventful—new year!