Link archive: December, 2016

Data on the Web Best Practices

This document provides Best Practices related to the publication and usage of data on the Web designed to help support a self-sustaining ecosystem. Data should be discoverable and understandable by humans and machines.

Radical Technologies: The Design of Everyday Life, now available for pre-order | Adam Greenfield’s Speedbird

Adam Greenfield’s new book is almost here at last, and it sounds like it has pivoted into quite an interesting beast.

Is Children of Men 2016’s Most Relevant Film? — Vulture

Ten years on from Afonso Cuarón’s masterpiece.

What you need to know about using VPN in the UK – By Andy Parker

If you’re prepping your defences against the snooper’s charter (and you/I should be), Andy recommend using NordVPN.

Google Noto Fonts

Google’s Noto (short for no-tofu; tofu being the rectangle of unicode sadness) is certainly ambitious. It has glyphs from pretty much every known alphabet …including Ogham and Linear B!

Hyper text. — Ethan Marcotte

Ethan looks back on Mandy’s talk from dConstruct 2014 which is more relevant than ever.

SF Mistressworks | women science fiction writers

Reviews of twentieth century science fiction novels and anthologies by women writers.

How a Couple of Guys Built the Most Ambitious Alien Outreach Project Ever | Science | Smithsonian

One might think sending messages to other stars would be a massive, expensive job. No. It isn’t. The Cosmic Call was essentially a crowdfunded hobby project.

Enigma-E

An Enigma machine of one’s own.

Rafaël Rozendaal - Formal characteristics of the browser

I really like this list of observations (Vasilis pointed it my way). I feel like it encapsulates some of what I was talking about in chapter two of Resilient Web Design. The only point I’d take issue with now is the very last one.

High Performance Browser Networking (O’Reilly)

Did you know that Ilya’s book was available in its entirety online? I didn’t. But now that I do, I think it’s time I got stuck in and tried to understand the low-level underpinnings of the internet and the web.

Megatelescope releases its first image: Physics Today: Vol 69, No 12

A lovely piece of design fiction imagining a project where asteroids are shaped and polished into just the right configuration to form part of an enormous solar-system wide optical telescope.

Once they are deployed in space, a celestial spiderweb of crisscrossed laser beams can push around clouds of those microscopic optical sensors to desired locations.

10 things I learned making the fastest site in the world

Behind the amusing banter there’s some really solid performance advice in here. Good stuff.

Client Side Rendering (CSR), or as I call it “setting money on fire and throwing it in a river” has its uses, but for this site would have been madness.

16 Web Conference Talks You Need to Watch This Holiday

Ignore the clickbaity title—you don’t need to do anything this holiday; that’s why it’s a holiday. But there are some great talks here.

The list is marred only by the presence of my talk Resilience, the inclusion of which spoils an otherwise …ah, who am I kidding? I’m really proud of that talk and I’m very happy to see it on this list.

BLIND : Rogue One

The on-screen interfaces for Rogue One have just the right retro feel next to those for The Force Awakens.

What Comes Next Is the Future (2016) on Vimeo

Matt Griffin’s thoughtful documentary is now available for free on Vimeo. It’s a lovely look at the past, present, and future of the web, marred only by the brief appearance of yours truly.

New Telegraph Who Dis? T-shirt – Bird Fur

This is my kind of T-shirt.

Brendan Dawes - Now Boarding

I love this project by Brendan—a kind of retroactive design fiction featuring boarding passes from airline travel referenced (but never seen) in films like Die Hard, The French Connection, and Pulp Fiction.

Visualizing the Alien: A Hollywood Conundrum

Compare and contrast Alien, Starship Troopers, and The Thing with 2001 and Roadside Picnic (and I would throw Solaris into the mix).

Plugging in a monster moves a plot right along, of course, but if that’s all it’s doing, the plot is neglecting to examine how a real biosphere would work. That would be a sensationally complex task, but given the amount of research now going on in astrobiology and exoplanetary science, the suspicion here is that experts could be summoned who could produce such a film. Even so, there is something to be said for not seeing aliens.

Rogue One: an ‘Engineering Ethics’ Story — SciFi Policy

This article examines what I thought was the most interesting aspect of Rogue One—the ethical implications for technologists.

Don’t dismiss this essay just because it’s about a Hollywood blockbuster. Given the current political situation, this is deeply relevant.

Your Voice - TimKadlec.com

The most important rule to follow when giving a talk or writing is to be yourself. I can learn just about any topic out there from a million different posts or talks. The reason I’m listening to you is because I want to hear your take. I want to know what you think about it, what you’ve experienced. More than anything, I want your authenticity. I want you to be you.

The (Not So) Secret Powers Of The Mobile Browser – Smashing Magazine

A run-down of all the functionality that you get in browsers these days. One small quibble with the title: most of the features and APIs described here aren’t limited to mobile browsers. Still, this is a great reminder that you probably don’t need to create a native app to get the most out of a mobile device.

Front-End Developers Are Information Architects Too ◆ 24 ways

Some great thoughts here from Francis on how crafting solid HTML is information architecture.

Front-End Performance Checklist 2017

You can print out this PDF and then have the satisfaction of ticking off each item on the list as you build your website.

BAgel

The styleguide, design principles, and pattern library for British Airways. It’s the “global experience language” for BA …so it’s called BAgel.

The math of CSS locks

A very very in-depth look at fluid typography in CSS using calc.

Datafication and ideological blindness — Cennydd Bowles

Run from data-driven companies. In thrall to semi-science and blinded by their dogma, they’ve lost the ability to see intelligent alternative perspectives on their business, their products, and the world. Embrace instead data-informed companies. This isn’t mere grammatical pedantry – a company genuinely informed by data understands the risks of datafication and adopts sophisticated, balanced approaches to strategy that blend quant, qual, and even some of that unfashionable prediction and intuition.

Experiment: Using Picture Element and VW+VH units as a Lightbox

This is a clever technique by Dave—use viewport units to make a lightweight lightbox.

The bold beauty of content prototypes — Thomas Byttebier

Designing content-first:

Everything that happens to the content prototype from now on is merely progressive enhancement. Because while the prototype is in a shared git repository, microcopy sneaks in, text gets corrected by a copywriter, photos change for the better and flows shape up, meta data is added, semantics are double checked, WAI-ARIA roles get in…

Thread. — Ethan Marcotte

Ethan redesigned. It’s lovely.

And now that the new site’s live, I realize I’d like to keep working on it. I’m not just feeling excited to see where it goes from here: as modest as it is, I’ve made something I’m proud of.

Xaviera López

Beautiful animation work.

Progressive enhancement and team memberships

A really nice pattern, similar to one I wrote about a little while back. There’s also this little gem of an observation:

Progressive enhancement is also well-suited to Agile, as you can start with the core functionality and then iterate.

Radio Garden

This is absolutely fascinating—listen live to radio stations all over the world by rotating our planet in your browser.

There’s something really addictive about eavesdropping on the world’s airwaves like this.

CSS Shorthand Syntax Considered an Anti-Pattern – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts

Sensible advice from Harry—only style what you mean to style.

The World According to Stanisław Lem - Los Angeles Review of Books

A profile of Stanisław Lem and his work, much of which is still untranslated.

Accessibility Whack-A-Mole · An A List Apart Article

A fascinating piece by Eleanor on the typographic tweaking that the Wellcome team did to balance the competing needs of different users.

Get the Balance Right: Responsive Display Text ◆ 24 ways

Some really great CSS tips from Rich on sizing display text for multiple viewports.

A Book Apart, Working the Command Line

Remy’s excellent digital book is now available for your purchasing pleasure. I wrote a cheeky foreword for it.

Server Side React

Remy wants to be able to apply progressive enhancement to React: server-side and client-side rendering, sharing the same codebase. He succeeded, but…

In my opinion, an individual or a team starting out, or without the will, aren’t going to use progressive enhancement in their approach to applying server side rendering to a React app. I don’t believe this is by choice, I think it’s simply because React lends itself so strongly to client-side, that I can see how it’s easy to oversee how you could start on the server and progressive enhance upwards to a rich client side experience.

I’m hopeful that future iterations of React will make this a smoother option.

What the Heck Is Inclusive Design? ◆ 24 ways

I really, really like Heydon’s framing of inclusive design: yes, it covers accessibility, but it’s more than that, and it’s subtly different to universal design.

He also includes some tips which read like design principles to me:

• Involve code early
• Respect conventions
• Don’t be exact
• Enforce simplicity

Come to think of it, they’re really good design principles in that they are all reversible i.e. you could imagine the polar opposites being design principles elsewhere.

Hey, Hey, Cloud Four is a PWA! - Cloud Four

Jason talks through the service worker strategy for his company website.

What design sprints are good for — Cennydd Bowles

Cennydd enumerates what design sprints are good for:

• generating momentum,
• highlighting the scope of the design process,
• developing the team, or
• provoking core product issues.

And also what they’re not so good for:

• reliable product design,
• proposing sophisticated user research,
• answering deep product-market fit questions, or
• getting the green light.

Is JavaScript more fragile? – Baldur Bjarnason

Progressive enhancement’s core value proposition, for me, is that HTML and CSS have features that are powerful in their own right. Using HTML, CSS, and JavaScript together makes for more reliable products than just using Javascript alone in a single-page-app.

This philosophy doesn’t apply to every website out there, but it sure as hell applies to a lot of them.

Eric’s Archived Thoughts: CSS Grid!

Eric is excited about the imminent arrival of grid layout in browsers. And after reading the answers to these sure-to-be-frequently asked questions, you’ll be excited too!

DiceWARE

This is a wonderful service! Handcrafted artisanal passwords made with a tried and trusted technique:

You roll a die 5 times and write down each number. Then you look up the resulting five-digit number in the Diceware dictionary, which contains a numbered list of short words.

That’s the description from the site’s creator, Mira:

Please keep in mind when ordering that I am a full-time sixth grade student with a lot of homework.

She’s the daughter of Julia Angwin, author of Dragnet Nation.

Designing digital services that are accountable, understood, and trusted (OSCON 2016 talk)

Software is politics, because software is power.

The transcript of a tremendous talk by Richard Pope.

After the flood | Projects | Robot Life Survey

Lovely prints!

The Robot Life Survey is an alternative-history from design company After the flood, where mechanical intelligence is discovered by man, noted and painted for posterity and science.

Browsers, not apps, are the future of mobile - Inside Intercom

I wrote a while back:

There’s a whole category of native apps that could just as easily be described as “artisanal web browsers” (and if someone wants to write a browser extension that replaces every mention of “native app” with “artisanal web browser” that would be just peachy).

Here’s some more thoughts along the same lines:

We’re spending increasing amounts of time inside messaging apps and social networks, themselves wrappers for the mobile web. They’re actually browsers.

There’s an important take-away to this:

The web is and will always be the most popular mobile operating system in the world – not iOS or Android. It’s important that the next generation of software companies don’t focus exclusively on building native iOS or Android versions of existing web apps.

Just make sure those web apps render and work well in the new wave of mobile browsers – messengers. Don’t build for iOS or Android just for an imaginary distribution opportunity. Distribution exists where people spend most of their time today – social and messaging apps, the new mobile browser for a bot-enabled world.

KUTE.js | Javascript Animation Engine

This looks like an interesting little JavaScript library for scripting animations.

We’ve updated the radios and checkboxes on GOV.UK | GDS design notes

I always loved the way that Gov.uk styled their radio buttns and checkboxes with nice big visible labels, but it turns out that users never used the label area. And because it’s still so frickin’ hard to style native form elements, custom controls with generated content is the only way to go if you want nice big hit areas.

The world-wide web (PDF) by T.J. Berners-Lee, R. Cailliau and J.-F. Groff

Well, look at these fresh-faced lads presenting their little hypertext system in 1992. A fascinating time capsule.

Installing web apps on phones (for real)

Henrik points to some crucial information that slipped under the radar at the Chrome Dev Summit—the Android OS is going to treat progressive web apps much more like regular native apps. This is kind of a big deal.

It’s a good time to go all in on the web. I can’t wait to see what the next few years bring. Personally, I feel like the web is well poised to replace the majority of apps we now get from app stores.

Service Worker, what are you? - Mariko Kosaka

This is a fun—and accurate—explanation of service workers.

There’s definitely something “alien” about a service worker—it’s kind of like a virus that gets installed on the user’s device. I’ve taken to describing it as “a man-in-the-middle attack on your own website” which makes sound a bit scarier than is necessary.