Link archive: June, 2018

BREAKING: Complex Organic Molecules Discovered on Enceladus For The First Time

I know I should remain calm and sceptical about announcements like this, but …SQUEEEE!

Should computers serve humans, or should humans serve computers? | Read the Tea Leaves

Between the utopian and dystopian, which vision of the future seems more likely to you? Which vision seems more true to how we currently live with technology, in the form of our smartphones and social media apps?

Horrific Soccer Injuries

The horror …the horror.

The Layouts of Tomorrow | Max Böck - Frontend Web Developer

A walkthrough of the process of creating a futuristic interface with CSS (grid and animation).

While this is just one interpretation of what’s possible, I’m sure there are countless other innovative ideas that could be realized using the tools we have today.

Pixels vs. Ems: Users DO Change Font Size – Evan Minto – Medium

I have to admit, I didn’t realise that text reszing behaved differently for user preferences compared to page zoom. For that reason alone, I’m going to avoid setting font sizes in pixels.

If 2 to 3% (or more!) of your users are relying on a custom font size, you should know that so you can either support that user preference or make a conscious decision to not support it. Doing anything less is frankly irresponsible, especially considering that users with larger font sizes may be using those sizes to compensate for visual disabilities.

Untold AI: The Untold | Sci-fi interfaces

Prompted by his time at Clearleft’s AI gathering in Juvet, Chris has been delving deep into the stories we tell about artificial intelligence …and what stories are missing.

And here we are at the eponymous answer to the question that I first asked at Juvet around 7 months ago: What stories aren’t we telling ourselves about AI?

Recursive Recipes | Make food from scratch

Watch the prep time increase as you make more and more of a recipe’s ingredients from scratch.

I guess Carl Sagan was right. To make an apple pie from scratch, you must first invent the universe.

Introducing the GOV.UK Design System - Government Digital Service

The Gov.uk design system is looking very, very good indeed—nicely organised with plenty of usage guidelines for every component.

Guidance on using components and patterns now follow a simple, consistent format based on task-based research into what users need in order to follow and trust an approach.

10 Progressive Web App Examples that Brand Owners can Learn From - Iflexion

Adriana Blum lists progressive web apps that are doing very, very well from Twitter, Trivago, Starbucks, Forbes, Debebhams, West Elm, Washington Post, Pinterest, AliExpress, and Lancôme.

Instead of choosing between the immediacy of a mobile website and the rich experience offered by native apps, you can now offer your target audiences the best of both and improve the commercial performance of your business to boot.

Yay Computers • Robin Rendle

If you’re thinking of writing something that explains a weird thing you struggled with on the Internet, do it! Don’t worry about the views and likes and Internet hugs. If you’ve struggled with figuring out this thing then be sure to jot it down, even if it’s unedited and it uses too many commas and you don’t like the tone of it.

Derek Powazek - AI is Not a Community Management Strategy

A really excellent piece from Derek on the history of community management online.

You have to decide what your platform is for and what it’s not for. And, yeah, that means deciding who it’s for and who it’s not for (hint: it’s not bots, nor nazis). That’s not a job you can outsource. The tech won’t do it for you. Not just because it’s your job, but because outsourcing it won’t work. It never does.

The Critical Request - Speaker Deck

There are some handy performance tips from Ben in this slide deck.

In this talk we’ll study how browsers determine which requests should be made, in what order, and what prevents the browser from rendering content quickly.

Manual Aspire

If only all documentation was as great as this old manual for the ZX Spectrum that Remy uncovered:

The manual is an instruction book on how to program the Spectrum. It’s a full book, with detailed directions and information on how the machine works, how the programming language works, includes human readable sentences explaining logic and even goes so far as touching on what hex values perform which assembly functions.

When we talk about things being “inspiring”, it’s rarely in regards to computer manuals. But, damn, if this isn’t inspiring!

This book stirs a passion inside of me that tells me that I can make something new from an existing thing. It reminds me of the 80s Lego boxes: unlike today’s Lego, the back of a Lego box would include pictures of creations that you could make with your Lego set. It didn’t include any instructions to do so, but it always made me think to myself: “I can make something more with these bricks”.

I discovered a browser bug - JakeArchibald.com

Jake’s blow-by-blow account of uncovering a serious browser vulnerability is fascinating. But if you don’t care for the technical details, skip ahead to to how different browser makers handled the issue—it’s very enlightening. (And if you do care for the technical details, make sure you click on the link to the PDF version of this post.)

I Don’t Believe in Full-Stack Engineering • Robin Rendle

A good ol’ rant from Robin.

HTML and CSS and JavaScript have always been looked down upon by many engineers for their quirks. When they see a confusing and haphazardly implemented API across browsers (HTML/CSS/JS), I see a swarming, writhing, and constantly improving interface that means we can read stuff that was written fifteen years ago and our browsers can still parse it.

Before jumping to conclusions, read the whole thing. Robin isn’t having a go at people who consider themselves full-stack developers; he’s having a go at the people who are only hiring back-end developers and expecting them to automatically be “full stack.”

Offline-Friendly Forms by Max Böck

A clever use of localStorage to stop data from being lost when your visitors are offline.

Resilient Web Design with Jeremy Keith | Meetup

People of Boston: I’m doing a book reading at your CSS meet-up on Wednesday, June 27th.

(Marketing genius that I am, I won’t be reading from my newest book, which is on sale now, but from the previous book, which is available for free online.)

Generative Artistry

Tutorials for recreating classics of generative art with JavaScript and canvas.

Don’t Use The Placeholder Attribute — Smashing Magazine

A lot of the issues here are with abuses of the placeholder attribute—using it as a label, using it for additional information, etc.—whereas using it quite literally as a placeholder can be thought of as an enhancement (I almost always preface mine with “e.g.”).

Still, there’s no getting around that terrible colour contrast issue: if the contrast were greater, it would look too much like an actual pre-filled value, and that’s potentially worse.

The three lessons that changed how I think about design systems

1. Know where you stand before starting the journey
2. Make sure everyone is speaking the same language
3. Integrate the right tools into your team’s workflow

A Directory of design and front-end resources

A collection of collections.

This site is dedicated to compiling and sharing useful resources for Designers and UI Developers.

A Book Apart, We’re donating 25% profits to RAICES

What’s happening right now at the US border is heartbreaking and inexcusable. We’re donating 25% of all profits today and tomorrow (June 19 & 20) to RAICES, to help reunite detained immigrant parents and children.

[Essay] Known Unknowns | New Dark Age by James Bridle | Harper’s Magazine

A terrific cautionary look at the history of machine learning and artificial intelligence from the new laugh-a-minute book by James.

The crooked timber of humanity | 1843

Tom Standage—author of the brilliant book The Victorian Internet—relates a tale of how the Chappe optical telegraph was hacked in 19th century France, thereby making it one of the earliest recorded instances of a cyber attack.

Developer happiness considered harmful (sometimes)

Thoughts on my favourite design principle (because I’m that much of a design principles nerd that I have a favourite).

Developer happiness is only a benefit if it first does no harm to others. Even better if it genuinely amplifies benefits to those further up chain of priorities.

User agent as a runtime | Blog | Decade City

Ultimately you can’t control when and how things go wrong but you do have some control over what happens. This is why progressive enhancement exists.

My biggest challenge with JavaScript | Go Make Things

This really, really resonates with me:

I think the thing I struggle the most with right now is determining when something new is going to change the way our industry works for the better (like responsive web design did 5 or 6 years ago), and when it’s just a fad that will fade away in a year or three (which is how I feel about our obsession with things like Angular and React).

I try to avoid jumping from fad to fad, but I also don’t want to be that old guy who misses out on something that’s an important leap forward for us. I spend a lot of time thinking about the longer term impact of the things we make (and make with).

DesignOps Handbook - DesignBetter.Co

This looks like a really good (and free!) online book all about design ops.

(Alas, it is, once again, driven by janky JavaScript that makes it a bit of a chore to scroll and read.)

Telepresence - daverupert.com

Dave is liking the word “telepresence”:

On social media we broadcast our presence and thoughts over radio and wire and I likewise consume your projections as they echo back to me. We commune over TCP/IP.

Just wait until he discovers the related neologism coined by Ted Nelson.

On Rejection | Zeldman on Web & Interaction Design

The focus of the A Book Apart series is what makes it great …and that means having to reject some proposals that don’t fit. Even though I’ve had the honour of being a twice-published A Book Apart author, I also have the honour of receiving a rejection, which Jeffrey mentions here:

In one case we even had to say no to a beautifully written, fully finished book.

That was Resilient Web Design.

So why did we turn down books we knew would sell? Because, again—they weren’t quite right for us.

It was the right decision. And this is the right advice:

If you’ve sent us a proposal that ultimately wasn’t for us, don’t be afraid to try again if you write something new—and most importantly, believe in yourself and keep writing.

Artificial Intelligence for more human interfaces | Christian Heilmann

An even-handed assessment of the benefits and dangers of machine learning.

“Distinct Design Systems,” an article by Dan Mall

Dan asks:

Do we have too many design systems?

Spoiler: the answer is “no”. There. Saved you a click.

(Not really; you should definitely click.)

Your Brain on Front-End Development | CSS-Tricks

I find this soooo relatable:

I know when I look at a design (heck, even if I know I’m not going to be building it), my front-end brain starts triggering all sorts of things I know will be related to the task.

Difference is, Chris comes up with some very, very clever techniques.

designhumandesign

Refresh for a new design challenge.

Any Site can be a Progressive Web App - Jeremy Keith | DeltaV 2018 - YouTube

Here’s a really quick (ten minute) talk about the offline user experience that I gave at the Delta V conference recently. I’m quite happy with how it turned out—there’s something to be said for having a short and snappy time slot.

There’s a common misconception that making a Progressive Web App means creating a Single Page App with an app-shell architecture. But the truth is that literally any website can benefit from the performance boost that results from the combination of HTTPS + Service Worker + Web App Manifest.

Password Tips From a Pen Tester: Common Patterns Exposed

I’ve been wondering about this for quite a while: surely demanding specific patterns in a password (e.g. can’t be all lowercase, must include at least one number, etc.) makes it easier to crack them, right? I mean, you’re basically providing a ruleset for brute-forcing.

Turns out, yes. That’s exactly right.

When employees are faced with this requirement, they tend to:

• Choose a dictionary word or a name
• Make the first character uppercase
• Add a number at the end, and/or an exclamation point

If we know that is a common pattern, then we know where to start…

Resilient, Declarative, Contextual

This is really good breakdown of what’s different about CSS (compared to other languages).

These differences may feel foreign, but it’s these differences that make CSS so powerful. And it’s my suspicion that developers who embrace these things, and have fully internalized them, tend to be far more proficient in CSS.

Designing Web Content for watchOS - WWDC 2018 - Videos - Apple Developer

If you don’t fancy watching this video, Eric Runyon has written down the salient points about what it means for developers now that websites can be viewed on the Apple Watch. Basically, as long as you’re writing good, meaningful markup and you’ve got a sensible font stack, you’re all set.

Or, as Tim puts it:

When we build our sites in a way that allows people using less-capable devices, slower networks and other less than ideal circumstances, we end up better prepared for whatever crazy device or technology comes along next.

Tim Brown: Coming soon: Flexible Typesetting

Fellow web type nerds: Tim Brown brings very good tidings indeed!

My new book is called Flexible Typesetting, and it will be published by A Book Apart this summer. I absolutely cannot wait for you to read it, because we have so much to talk about.

Text Effects - a Collection by Mandy Michael on CodePen

Mandy’s experiments with text effects in CSS are kinda mindblowing—I can’t wait to see her at Ampersand at the end of the month!

Fontjoy - Generate font pairings in one click

This looks like fun: it’s like a clever slot machine for pairing typefaces.

I thought the “machine learning” angle sounded like marketing bullshit, but it’s genuinely fascinating.

“What does that funny squiggle mean?” Playlist - BBC Ideas

¶, &, @, ‽, ☺, #, and ☛.

How to start with variable fonts on the web – Oliver Schöndorfer

A nice intro to variable fonts.

Fostering a Web Performance Culture - José M. Pérez

Six steps to kickstart a web performance culture:

1. Your dev environment is not your user’s environment
2. It’s better to learn the fundamentals than the library
3. Get the time to experiment and validate
4. Educate your colleagues
5. Share and celebrate success (and failure) stories
6. Make performance part of your workflow

I dunno | Brad Frost

I think being simultaneously curious and skeptical of new technology is healthy attitude to have.

I concur.

I want to learn new things in order to keep making good websites. I also think there’s a lot of value in talking about the difficulty in learning new things.

AMPstinction • Robin Rendle

And so whenever I look at AMP I wonder whether the technology and process itself might be bad (which is arguable) but the efforts might lead to something longer lasting, another movement inspired because of it, despite it, a movement that we can all benefit from.

5 ways having a shared design system has helped us ship our designs faster – Product at Canva

The steps that the Canva team took to turbocharge their design ops.

I’ll talk about why creating a shared design system has boosted our organizational productivity—and how you can help your teams improve product quality while reducing your company’s ‘design debt’.

Fresher service workers, by default

“Ah, this is good news!”, I thought, reading this update about how service worker scripts won’t be cached.

And that was the moment when I realised what an utter nerd I had become.

CORS

A thorough explanation of the history and inner workings of Cross-Origin Resource Sharing.

Like tales of a mythical sea beast, every developer has a story to tell about the day CORS seized upon one of their web requests, dragging it down into the inexorable depths, never to be seen again.

Get to Know Jeremy Keith

I had fun answering these questions.

Bulb Design System

I really like the way that this pattern library includes research insights to provide justification for design decisions.

Progressive Web Games – Mozilla Hacks – the Web developer blog

I was just talking about how browser-based games are the perfect use-case for service workers. Andrzej Mazur breaks down how that would work:

• Add to Home screen
• Offline capabilities
• Progressive loading

Brendan Dawes - Holding the Door Open for Others

I continue to write stuff down on my little corner of the Web (does it have corners?) and I encourage you to do the same, as all these little bits of flotsam and jetsam become something a lot lot bigger.

The React is “just” JavaScript Myth - daverupert.com

In my experience, there’s no casual mode within React. You need to be all-in, keeping up with the ecosystem, or else your knowledge evaporates.

I think Dave is right. At this point, it’s possible to be a React developer exclusively.

React is an ecosystem. I feel like it’s a disservice to anyone trying to learn to diminish all that React entails. React shows up on the scene with Babel, Webpack, and JSX (which each have their own learning curve) then quickly branches out into technologies like Redux, React-Router, Immutable.js, Axios, Jest, Next.js, Create-React-App, GraphQL, and whatever weird plugin you need for your app.

And, as Jake points out, you either need to go all in or not at all—you can’t really incrementally add Reactness to an existing project.

Worlds of Ursula K. Le Guin Official Trailer on Vimeo

This forthcoming documentary on Ursula K. Le Guin looks like it will be very good indeed.

Four short stories and what I learnt writing them (31 May., 2018, at Interconnected)

I’ve been enjoying the stories over on Upsideclown so it’s great to get a peak inside Matt’s writing brain here.

I also happen to really, really like his four stories:

1. Moving House
2. The search for another intelligence
3. The Ursa Major Moving Group
4. Volume Five

I wouldn’t say I’m great at writing fiction. I find it tough. It is the easiest thing in the world for me to pick holes in what I’ve written. So instead, as an exercise—and as some personal positive reinforcement—I want to remind myself what I learnt writing each one, and also what I like.

Let’s make the grimy architecture of the web visible again by Russell Davies

Beneath the URL shorteners, the web!

It’s increasingly apparent that a more digitally literate citizenry would be good for a thousand different reasons. A great way to start would be to make URLs visible again, to let people see the infrastructure they’re living in.

A cartoon intro to DNS over HTTPS – Mozilla Hacks – the Web developer blog

This is a great illustrated explanation of how DNS resolution works.

CSS Is So Overpowered It Can Deanonymize Facebook Users

First of all, don’t panic—this browser vulnerability has been fixed, so the headline is completely out of proportion to the reality. But my goodness, this was a clever technique!

The technique relies on luring users to a malicious site where the attacker embeds iframes to other sites. In their example, the two embedded iframes for one of Facebook’s social widgets, but other sites are also susceptible to this issue.

The attack consists of overlaying a huge stack of DIV layers with different blend modes on top of the iframe. These layers are all 1x1 pixel-sized, meaning they cover just one pixel of the iframe.

Habalov and Weißer say that depending on the time needed to render the entire stack of DIVs, an attacker can determine the color of that pixel shown on the user’s screen.

The researchers say that by gradually moving this DIV “scan” stack across the iframe, “it is possible to determine the iframe’s content.”