Link archive: April, 2018

Apart From Code

A good developer…

• debugs
• follows the KISS principle (and respects YAGNI)
• knows how to research
• works well with others
• finds good developer tools
• tests code

Upcoming changes to the CSS you need for variable fonts | Clagnut

Rich enumerates some changes in how you set up variable fonts. So if you’re pulling in a font that has weight as an axis, you can now add this to your @font-face rule:

font-weight: 1 999;

I’m already very excited about variable fonts—I’m going to be positively giddy by the time Ampersand rolls around (which, by the way, you should totally go to—it’s going to be sooo good!).

Going Offline: Designing An Ideal Offline Experience With Service Workers By Jeremy Keith

Here’s a great even-handed in-depth review of Going Offline:

If you’re interested in the “offline first” movement or want to learn more about Service Workers, Going Offline by Jeremy Keith is a really gentle and highly accessible introduction to the topic. At times, it even felt “too gentle”, with Keith taking a moment here and there to explain what a “variable” is and what “JSON” (JavaScript Object Notation) is. But, this just goes to show you the unassuming and welcoming mindset behind writing a book like this one.

alphagov/accessible-autocomplete: An autocomplete component, built to be accessible.

If you’re looking for an accessible standalone autocomplete script, this one from GDS looks very good (similar to Lea’s awesomplete).

The Illusion of Control in Web Design · An A List Apart Article

Aaron gives a timely run-down of all the parts of a web experience that are out of our control. But don’t despair…

Recognizing all of the ways our carefully-crafted experiences can be rendered unusable can be more than a little disheartening. No one likes to spend their time thinking about failure. So don’t. Don’t focus on all of the bad things you can’t control. Focus on what you can control.

Start simply. Code defensively. User-test the heck out of it. Recognize the chaos. Embrace it. And build resilient web experiences that will work no matter what the internet throws at them.

will/slacktyping: i’m typing when you’re typing

A plugin for Slack that will make it look like you’re typing whenever someone else is typing. It isn’t annoying at all.

An Apology for the Internet — From the People Who Built It

A hand-wringing, finger-pointing litany of hindsight, published with 11 tracking scripts attached.

1. Start With Hippie Good Intentions …
2. … Then mix in capitalism on steroids.
3. The arrival of Wall Streeters didn’t help …
4. … And we paid a high price for keeping it free.
5. Everything was designed to be really, really addictive.
6. At first, it worked — almost too well.
7. No one from Silicon Valley was held accountable …
8. … Even as social networks became dangerous and toxic.
9. … And even as they invaded our privacy.
10. Then came 2016.
11. Employees are starting to revolt.
12. To fix it, we’ll need a new business model …
13. … And some tough regulation.
14. Maybe nothing will change.
15. … Unless, at the very least, some new people are in charge.

Express Review: Going Offline by Jeremy Keith – Daniel Koskinen

A short’n’sweet review of Going Offline:

Jeremy nails it again with this beginner-friendly introduction to Service Workers and Progressive Web Apps. The foreword to the book says “you’ll gain a solid understanding of how to put this new technology to work for you right away” and I’d say that is very accurate.

Jeremy Keith: Going Offline | visualgui

Here’s a lovely review of Going Offline from fellow author, Donny Truong:

Jeremy’s technical writing is as superb as always. Similar to his first book for A Book Apart, which cleared up all my confusions about HTML5, Going Offline helps me put the pieces of the service workers’ puzzle together.

Grid to Flex

Una has put together this handy one-pager of flexbox fallbacks for some common grid layouts.

Variable Fonts | DSType Foundry

Here’s an interesting twist on variable fonts: one of variable axes is serificity …serificousness …serifness. The serifs. The serifs, is what I’m trying to say.

One small point: it seems a bit of a shame that there are separate files for regular and italic—it would’ve been nice to have a variable axis for italicity …italicousness …ah, screw it.

Spinning jenny. — Ethan Marcotte

During the Industrial Revolution, as new machines were invented to increase output, business owners often dreamed of an entirely automated workforce—of a factory without workers. I assume their workers had different dreams.

Ethan thinks through the ethical implications of increasing automation and efficiency über alles:

I can’t stop thinking about how much automation has changed our industry already. And I know the rate of automation is only going to accelerate from here.

At the very least, maybe it’s worth asking ourselves what might happen next.

Sara Soueidan: Going Offline

Sara describes the process of turning her site into a progressive web app, and has some very kind words to say about my new book:

Jeremy covers literally everything you need to know to write and install your first Service Worker, tweak it to your site’s needs, and then write the Web App Manifest file to complete the offline experience, all in a ridiculously easy to follow style. It doesn’t matter if you’re a designer, a junior developer or an experienced engineer — this book is perfect for anyone who wants to learn about Service Workers and take their Web application to a whole new level.

Too, too kind!

I highly recommend it. I read the book over the course of two days, but it can easily be read in half a day. And as someone who rarely ever reads a book cover to cover (I tend to quit halfway through most books), this says a lot about how good it is.

The Woman Who Gave the Macintosh a Smile | The New Yorker

A profile of Susan Kare, icon designer extraordinaire.

I loved the puzzle-like nature of working in sixteen-by-sixteen and thirty-two-by-thirty-two pixel icon grids, and the marriage of craft and metaphor.

page-transitions-travelapp

A demo of page transition animations by Sarah—she’s written about how she did it. I really like it as an example of progressive enhancement: you can navigate around the site just fine, but with JavaScript you get the smooth transitions as a bonus.

All of this reminds me of Jake’s proposal for navigation transitions in the browser. I honestly think this would solve 80% of the use-cases for single page apps.

Animating Progress - Snook.ca

Jonathan goes down the rabbit hole of trying to animate a progress element.

Kap - Capture your screen

This looks like a very handy tool for doing little screencasts where you don’t need to capture the whole screen.

pacapong by kingPenguin

Pong + Pacman + Space Invaders!

The Fast and Slow of Design

Prompted by his recent talk at Smashing Conference, Mark explains why he’s all about the pace layers when it comes to design systems. It’s good stuff, and ties in nicely with my recent (pace layers obsessed) talk at An Event Apart.

Structure for pace. Move at the appropriate speed.

Inside CSS | Clearleft

If you’ve ever wondered what it would be like to be a fly on the wall at a CSS Working Group meeting, Richard has the inside scoop.

The consensus building is vital. Representatives from all the major browsers were in the room, collaborating closely by proposing ideas and sharing implementations. But most fundamentally they were agreeing together what should go in the specifications, because what goes in the specs is what gets built and ends up in the hands of users.

the Origins of Opera and the Future of Programming – The Composition

An interesting piece by Jessica Kerr that draws lessons from the histories of art and science and applies them to software development.

This was an interesting point about the cognitive load of getting your head around an existing system compared to creating your own:

Why are there a thousand JavaScript frameworks out there? because it’s easier to build your own than to gain an understanding of React. Even with hundreds of people contributing to documentation, it’s still more mental effort to form a mental model of an existing system than to construct your own. (I didn’t say it was faster, but less cognitively strenuous.)

And just because I’ve spent most of last year thinking about how to effectively communicate—in book form—relatively complex ideas clearly and simply, this part really stood out for me:

When you do have a decent mental model of a system, sharing that with others is hard. You don’t know how much you know.

How can we incentivise the digital world to make safer services?

A smart look back at historical examples of regulation and what we can learn from them today, by Justine Leblanc:

• Railways in the UK: Public interest as a trigger for regulation
• Engineering in Canada: Accountability as a trigger for regulation
• The automotive industry in the USA: Public outrage as a trigger for regulation

Exquisite Tweets from @neb

There was a moment that it seemed like a proliferation of flickr-like webservices would result in a network of deep shared pools of cultural resource, from which every user could build expressions and applications, but the “entrap and surveil” economics of platforms kicked in.

And now we have no history, and rather than communicating via visualizations of our own shared cultural record, we are left waiting like dogs for treats as facebook decides to surface one of our own images from 3 or 8 years ago. Don’t try to search the graph! Advertisers only.

The Real Music Club presents Salter Cane, The Equatorial Group, The Organ Grinder’s Monkey Saturday 28th Apr 2018 | The Brunswick

Mark your calendars, Brightonians: one week from tomorrow, on Saturdaay, April 28th, come and see my band Salter Cane playing in The Brunswick.

We will rock you …in the most miserablist way possible.

(Also, The Equatorial Group sound pretty great.)

:focus-visible and backwards compatibility

Patrick is thinking through a way to implement :focus-visible that’s forwards and backwards compatible.

Cancelling Requests with Abortable Fetch

This is a really good use-case for cancelling fetch requests: making API calls while autocompleting in search.

Brutalist design is the bad influence we all need

What these brands are taking from web-brutalism — and truly, we should all be learning something here — is that User-centered design doesn’t need to be monopolized by the same colors, same buttons, same photography and even same copy you see in pretty much every single website or product.

The Untold Story of Jaime Levy, Punk-Rock Cyber-Publishing Pioneer

This excerpt from Claire L. Evans’s new book Broad Band sounds like Halt and Catch Fire, but for real.

Many people saw the web for the first time in Jaime’s loft, on a Mac II her hacker friend Phiber Optik set up with a 28.8K internet connection. As avant-garde guitarist Elliott Sharp performed live, and another friend, DJ Spooky, played house tracks, Jaime’s guests gathered around the Mac’s small screen. At the top of 1994, there were fewer than 1,000 websites in the world, mostly personal home pages. These converts would call themselves the “early true believers,” counting the year of their arrival online as a mark of status, the way the first punks claimed 1977.

Best Practices With CSS Grid Layout — Smashing Magazine

A great set of answers from Rachel to frequently asked questions about CSS grid. She addresses the evergreen question of when to use flexbox and when to use grid:

I tend to use Flexbox for components where I want the natural size of items to strongly control their layout, essentially pushing the other items around.

A sign that perhaps Flexbox isn’t the layout method I should choose is when I start adding percentage widths to flex items and setting flex-grow to 0. The reason to add percentage widths to flex items is often because I’m trying to line them up in two dimensions (lining things up in two dimensions is exactly what Grid is for).

The three Rs of web performance

1. Reduce
2. Reuse
3. Restructure

The slides from Matthew’s talk on the performance overhauls he did on FixMyStreet.com and TrainTimes.org.uk.

House of Lords - AI in the UK: ready, willing and able? - Artificial Intelligence Committee

Design fiction from the UK parliament. I mean, it’s not exactly a classic of speculative fiction, but it sure beats a white paper.

An Introduction to the IndieWeb

A thorough run-down of the whys and wherefores of being part of the indie web, from Chris.

inessential: The View-Source Web

Lesson learned: the discoverable and understandable web is still do-able — it’s there waiting to be discovered. It just needs some commitment from the people who make websites.

Eclipse

A delightful bit of creative JavaScript from Cameron.

Keep Pixelated Images Pixelated as They Scale | CSS-Tricks

This is a potentially useful bit of CSS that I had no idea existed.

Was There a Civilization On Earth Before Humans? - The Atlantic

So, could researchers find clear evidence that an ancient species built a relatively short-lived industrial civilization long before our own? Perhaps, for example, some early mammal rose briefly to civilization building during the Paleocene epoch about 60 million years ago. There are fossils, of course. But the fraction of life that gets fossilized is always minuscule and varies a lot depending on time and habitat. It would be easy, therefore, to miss an industrial civilization that only lasted 100,000 years—which would be 500 times longer than our industrial civilization has made it so far.

The Hipster Index: Brighton Pips Portland to Global Top Spot

Take that, Portland!

In what is quite likely the greatest, most poetic showdown since the Thrilla in Manila, Brighton and Hove of the United Kingdom beat Portland of the USA by one-thousandth of a point. Portland scored 8.1631, Brighton scored 8.1632. No really. Brighton is scientifically the most hipster city in the world. Just.

Color Palette Cinema

Some colour palette inspiration from films.

Service Workers | Build Progressive

This is a really nice explanation of adding a service worker to your site to make it more resilient. This tutorial is part of an ongoing series that I’m really looking forward to reading more of.

A Framework Author’s Case Against Frameworks - YouTube

A terrific talk by Adrian Holovaty. I really hope front-end developers talk its message to heart.

Monzo – Tone of Voice

Monzo’s guidelines for tone of voice, including a reference to “the curse of knowledge.”

Random thoughts and data on hiring from recent experience by Chris Coyier

I recently put the call out for freelance front-end devs on Twitter, and my experience mirrors Chris’s.

Not having a personal website was a turn-off. I don’t know if it matters industry-wide or not, but I’m one person with my own opinions and I’m the one making the call so it mattered here. A personal website is the clearest place I can get a sense of your taste, design ability, and writing ability.

The Eponymous Laws of Tech - daverupert.com

Dave has curated a handy list of eponymous laws.

Notes on `lang` by Taylor Hunt on CodePen

A really deep dive into the lang attribute, and the :lang() pseudo-class (hitherto unknown to me). This is all proving really useful for a little side project I’m working on.

You are not your tools

The technologies you use, the tools you build with, are just that: tools. Learn to use them, and learn to use them well. But always remember that those tools are there to serve you, you are not there to serve your tools.

Going Offline | CSS-Tricks

Now that the latest versions of iOS and macOS Safari support service workers, I can’t think of a better time to learn about how progressive web apps work under the hood.

Thanks, Robin! (the cheque is in the post)

Going Offline | Aaron Gustafson

Aaron was kind enough to write the foreword to my new book Going Offline. Here it is in full.

In Going Offline, Jeremy Keith breaks down heady concepts into approachable prose and easy-to-follow code examples. He also points out service worker gotchas and shows you how to deftly avoid them. Invest a scant few hours with this book, and you’ll gain a solid understanding of how to put this new technology to work for you right away. No, really—within fifteen to twenty minutes of putting it down.

Why Suffolk Libraries chose to build their own self-service app.

It’s so great to see the initial UX work that James and I prototyped in a design sprint come to fruition in the form of a progressive web app!

In the case of this web-app, if the tablets go offline, they will still store all the transactions that are made by customers. Once the tablet comes back online, it will sync it back up to the server. That is, essentially, what a Progressive Web App is — a kind of a website with a few more security and, most importantly, offline features.

Fantasies of the Future: Design in a World Being Eaten by Software / Paul Robert Lloyd

The transcript of a terrific talk by Paul, calling for a more thoughtful, questioning approach to digital design. It covers the issues I’ve raised about Booking.com’s dark patterns and a post I linked to a while back about the shifting priorities of designers working at scale.

Drawing inspiration from architectural practice, its successes and failures, I question the role of design in a world being eaten by software. When the prevailing technocratic culture permits the creation of products that undermine and exploit users, who will protect citizens within the digital spaces they now inhabit?

Facebook Is Tracking Me Even Though I’m Not on Facebook | American Civil Liberties Union

But while I’ve never “opted in” to Facebook or any of the other big social networks, Facebook still has a detailed profile that can be used to target me. I’ve never consented to having Facebook collect my data, which can be used to draw very detailed inferences about my life, my habits, and my relationships. As we aim to take Facebook to task for its breach of user trust, we need to think about what its capabilities imply for society overall. After all, if you do #deleteFacebook, you’ll find yourself in my shoes: non-consenting, but still subject to Facebook’s globe-spanning surveillance and targeting network.

Facebook’s “shadow profiles” are truly egregious …and if you include social sharing buttons on a website, you’re contributing to the data harvest.

If you administer a website and you include a “Like” button on every page, you’re helping Facebook to build profiles of your visitors, even those who have opted out of the social network.

If you are responsible for running a website, try browsing it with a third-party-blocking extension turned on. Think about how much information you’re requiring your users to send to third parties as a condition for using your site. If you care about being a good steward of your visitors’ data, you can re-design your website to reduce this kind of leakage.

Think like it’s 1995; code like it’s 2035 - Grayscale

This is such a great write-up of the workshop I did in Hong Kong!

Jeremy, it was a pleasure to work with you and you are always welcome here in Hong Kong!

If you fancy having this one-day workshop at your company, get in touch.

Going Offline · An A List Apart Article

The first chapter of my new book Going Offline has been published in A List Apart.

The first hit is free. If you like what you read here and you’re just dying to know how it ends, you can pre-order the book now (it’s shipping on April 24).

Murmuration

Procedurally generated murmurations of starlings.

Future Ethics

Cennydd is writing (and self-publishing) a book on ethics and digital design. It will be released in September.

Technology is never neutral: it has inevitable social, political, and moral impact. The coming era of connected smart technologies, such as AI, autonomous vehicles, and the Internet of Things, demands trust: trust the tech industry has yet to fully earn.

Using Ethics In Web Design — Smashing Magazine

A remarkably practical in-depth guide to making ethical design decisions, with enjoyable diversions into the history of philosophy throughout.

Starability - Accessible rating system demo

Accessible star ratings (progressively enhanced from radio buttons) with lots of animation options. The code is on Github.

Lazy Loading Images and Video  |  Web Fundamentals  |  Google Developers

Jeremy Wagner offers a deep dive into lazy loading images (and video) with some advice for considering the no-JavaScript situation too.

‘Black Mirror’ meets HGTV, and a new genre, home design horror, is born - Curbed

There was a time, circa 2009, when no home design story could do without a reference to Mad Men. There is a time, circa 2018, when no personal tech story should do without a Black Mirror reference.

Black Mirror Home. It’s all fun and games until the screaming starts.

When these products go haywire—as they inevitably do—the Black Mirror tweets won’t seem so funny, just as Mad Men curdled, eventually, from ha-ha how far we’ve come to, oh-no we haven’t come far enough.

Twenty Eighteen Preparation: Becoming an Endless Newbie - Airbag Industries

In the past, when I brushed off new advances or updates to technology and processes I preferred to stick with a simple path of “it still works fine,” but in doing so I realize now that I have l lost a lot beginning with the ability to function with current best practices in certain areas of my skill sets and the degradation a few projects, especially Airbag.

Relaunching Pitas.com, a 20-year old blogging community by Andrew Smales — Kickstarter

This is so great! I don’t just mean the Kickstarter project itself, but this write-up of the origins of pitas.com—it’s a fascinating, heartfelt, genuine piece of web history.

The whole point behind Pitas was, and is, being a simple way to blog. You just open the site, type something into the entry box, and click POST.

And now it’s coming back …if this project gets funded.

I guess if the site gets infested by Nazis we’ll probably not do anything about it for 10 years, then make a bunch of wimpy statements, do nothing, maybe finally request free help from the community and still do nothing about it.

Just kidding, their asses will be kicked off immediately.

Dear Developer, The Web Isn’t About You | sonniesedge.co.uk

This is absolutely brilliant!

Forgive my excitement, but this transcript of Charlie’s talk is so, so good—an equal mix of history and practical advice. Once you’ve read it, share it. I want everyone to have the pleasure of reading this inspiring piece!

It is this flirty declarative nature makes HTML so incredibly robust. Just look at this video. It shows me pulling chunks out of the Amazon homepage as I browse it, while the page continues to run.

Let’s just stop and think about that, because we take it for granted. I’m pulling chunks of code out of a running computer application, AND IT IS STILL WORKING.

Just how… INCREDIBLE is that? Can you imagine pulling random chunks of code out of the memory of your iPhone or Windows laptop, and still expecting it to work? Of course not! But with HTML, it’s a given.

setInterval(_=>{ document.body.innerHTML = [ …”😮😀😁😐😑😬” ][~~(Math.random()*6)] },95)

A tiny snippet of JavaScript for making an animation of a talking emoji face.

Doc Searls Weblog · Facebook’s Cambridge Analytica problems are nothing compared to what’s coming for all of online publishing

What will happen when the Times, the New Yorker and other pubs own up to the simple fact that they are just as guilty as Facebook of leaking its readers’ data to other parties, for—in many if not most cases—God knows what purposes besides “interest-based” advertising? And what happens when the EU comes down on them too? It’s game-on after 25 May, when the EU can start fining violators of the General Data Protection Regulation (GDPR). Key fact: the GDPR protects the data blood of EU citizens wherever they risk having it sucked in the digital world.

Turning a MacBook into a Touchscreen with $1 of Hardware · cat /var/log/life

Well now, this is a clever bit of hardware hacking.

Surfaces viewed from an angle tend to look shiny, and you can tell if a finger is touching the surface by checking if it’s touching its own reflection.

#davewentandroid - daverupert.com

Yeah. Fuck this. That’s creepy. Technically I opted into this feature because Google Maps asked “Google Maps would like to know your location, YES or NO?” Of course my answer was “YES” because, hey, it’s a fucking map. I didn’t realize I consented to having my information and location history stored indefinitely on Google’s servers.

I began all the work of disabling this “feature” but it seemed like a fruitless task. Also worth noting, Google Maps for iOS keeps Location History as well.

Geometry Wars

Graham is recreating the (beautiful and addictive) Geometry Wars in canvas.

Best played with a twin-stick controller (or WASD + Arrow keys as a fallback)

If you’re on Windows, XBONE or XB360 controllers are the easiest to use. On Mac, a PS4 Dualshock 4 or wired 360 controller (with a downloadable driver) works well.

The annoying site

Does what it says on the tin.

Why the Web Will Win || Matthew Ström: designer & developer

The first 22 years of the web platform were revolutionary. The open, accessible, and feature-rich applications that exist on the platform continue to drive the global economy. The next 5 years look like they’ll be filled with more innovation and growth than ever.

The web will be the platform of the Next Big Thing. Not just as the distribution network many see it as today; the web platform will deliver the most innovative experiences. They’ll be innovative not just for how they use new technology, but also because of how easy it will be for new users to experience.

A typeface is not a tool · Klim Type Foundry

Conceding that a typeface is a tool sounds dangerously close to an excuse: toolmakers cannot be held responsible for things made with their tools, or the tasks leading up to those things. They are only responsible for the making of the tool itself. If a person decides to use a hammer to drive home a screw, then so be it. The hammer was only designed for nails. It’s not our fault the typography doesn’t look good. The typeface is just a tool — you’re using it wrong.

My POSSE plan for evolving my site | Dries Buytaert

I approve of Dries’s plan!

Braille Neue

I love this idea (and implementation)—instead of treating braille signage as something “separate but equal”, this typeface attempts to unify lettering and braille into one.

Braille Neue is a universal typeface that combines braille with existing characters. This typeface communicates to both the sighted and blind people in the same space.

Brendan Dawes - I Heart URLs

When I’m asked to give an example of a beautiful piece of design, perfect in form and function, I often respond with “the URL.”

I love every word of this beautifully-written love letter from Brendan.

Carbon

This service could be quite handy if you’re making a presentation that involves showing code—it generates syntax-highlighted images of code.

In Defense of Design Thinking, Which Is Terrible + Subtraction.com

Our insular discourse, the way we’ve jealously protected the language and tools of design, the way we’ve focused so much on the “genius designer”… these behaviors have all worked against our own interests.

Khoi on design thinking and the democratisation of design.

Any embrace of design by non-designers is a good thing, and design thinking qualifies here. The reason for this is that when that happens, it means our language, the vocabulary of design, is broadening to the rest of the world.

How display: contents; Works

A really deep dive into display: contents from Ire.

The Way of the Web | Jeremy Keith | Hooked On Code

Here are Torre’s notes on my talk at An Event Apart Seattle. (She’s been liveblogging all the talks.)

LukeW | An Event Apart: The Way of the Web

Here are Luke’s notes from the talk I just gave at An Event Apart in Seattle.

House Elves

Perspectives other than our own bring a breath of fresh air. They open doors and allow light to flood in. They wrap us in a warm, comforting blanket by letting us know other people go through similar struggles. There is a tonne of writing out there that exists because the author suffered through something. Suffering tends to give you a strong desire to prevent others experiencing similar pain.