Link archive: November, 2015

Robin Rendle › Ampersand 2015

A great run-down of this year’s excellent Ampersand conference.

I wish I had known that Robin was there—I’d like to thank him for his kind words about Chloe.

Our Generation Ships Will Sink / Boing Boing

Kim Stanley Robinson pours cold water on the premise of generation starships for crewed interstellar travel.

The more I hear about Aurora, the more I think I might enjoy reading it.

Museum of Endangered Sounds

Sounds from our collective technological past.

(I’ll look past the fact that the sound labelled “ZX Spectrum” is using an image of an Amstrad PCP 464)

Blocked! - O’Reilly Radar

Following on from that Wired article I linked to about disabling JavaScript, Simon St. Laurent brings in another factor—content blockers on iOS:

Apple offers its users the power to turn off much of the Web: fonts, styles, scripts, and more.

He rightly points out that the answer to building a robust, resilient web has been here all along:

Turning off web fonts, CSS, and images will frustrate designers and limit user interface possibilities, but turning off JavaScript might mean that we have to reconsider the architecture of our applications. Without JavaScript, the Web returns to its foundations of HTTP requests returning pages, with links and form submissions as the backbone of application structure.

Using consent over consensus for decision making

Mikey compares a few different decision-making processes (and in the process describes the fundamental difference between the W3C and the WHATWG).

HTML5: The New Flash

A new presentation from the wonderfully curmudgeonly Steven Pemberton, the Nosferatu of the web. Ignore the clickbaity title.

I don’t agree with everything he says here, but I strongly agree with his preference for declarative solutions over (or as well as) procedural ones. In short: don’t make JavaScript for something that could be handled in markup.

This part really, really resonated with me:

The web is the way now that we distribute information. We will need the web pages we create now to be readable in 100 years time, just as we can still read 100-year-old books.

Requiring a webpage to depend on a particular 100-year-old implementation of Javascript is not exactly evidence of future-thinking.

Bruce Lawson’s personal site  : Progressive Web Apps: ready for primetime

Bruce gives a great run-down of what’s involved in creating one of those new-fangled progressive apps that everyone at Google and Opera (and soon, Mozilla) are talking about: a secure connection, a service worker, and a manifest file.

Crucially, in browsers that don’t support it, you have a normal website. It’s perfect progressive enhancement.

Funnily enough, this here website—adactio.com—is technically a progressive app now.

At their simplest, Progressive Web Apps are application-like things hosted on your web server. If you’re as old as me, you might call them “web sites”

Troubleshooting rendering performance issues - YouTube

Harry packs a lot of great tips and tricks into one short video about performance troubleshooting. It’s also a great lesson in unlocking some handy features in Chrome’s developer tools.

Great stuff!

A look at detecting, pinpointing, measuring, and fixing rendering performance issues.

Five Goofy Things Medium Did That Break Accessibility — Medium Engineering

Some mea culpas from a developer at Medium. They share so that we may learn.

I Turned Off JavaScript for a Whole Week and It Was Glorious | WIRED

When someone’s web browsing experience can be so drastically improved by simply switching off JavaScript, you know it’s time for an intervention with web developers.

This is our fault. Client-side JavaScript gave us enormous power and we abused that power.

Meanwhile, Near Saturn… - WSJ.com

A breathtaking overview of Cassini’s mission. The timeline video—matching up footage from Saturn with contemporary events on Earth—is a beautiful and haunting dose of perspective.

You can even watch a four hour video of every single one of the 341,805 images that Cassini has sent up till now.

The Clock of the Long Now on Vimeo

A short feature on the 10,000 year clock.

Tips for Creating and Exporting Better SVGs for the Web

Sara enumerates some handy tips aimed squarely at designers exporting SVGs. It focuses on Illustrator in particular but I’m sure a lot of this could equally apply to Sketch.

ampersand : ampersand2015 on Huffduffer

The audio is now up from all the talks at this year’s excellent Ampersand conference.

Manifest generator

A handy tool for helping you generate a JSON manifest file for your site. You’ll need one of those if you want Android devices to provide an “add to home screen” prompt.

Instant Loading Web Apps With An Application Shell Architecture | Web Updates - Google Developers

Outlining the architectural thinking required to create what the Google devrel folks are calling progressive apps.

Browsers without service worker support should always be served a fall-back experience. In our demo, we fall back to basic static server-side rendering…

Yay!

…but this is only one of many options.

Hmmm. In my opinion, sending usable HTML on first request isn’t an implementation detail—it’s crucial. But on the whole, this approach is very sensible indeed.

Google+ | Google Web Showcase - Google Developers

Paul gives the lowdown on the Google+ responsive relaunch. They set themselves this performance budget:

• 60K of HTML,
• 60K of CSS,
• 60K of JavaScript,
• 60 frames per second animations, and
• 0.6 seconds latency.

And this bit is crucial:

One of our major rules was that all our pages needed to be both server-side and client-side rendered. With server-side rendering we make sure that the user can begin reading as soon as the HTML is loaded, and no JavaScript needs to run in order to update the contents of the page.

Understanding the Web with Jeremy Keith | The Web Ahead on Huffduffer

I really enjoyed chatting with Jen on this episode of The Web Ahead—aimless rambling fun.

New design thinking by Mikey Allan

Web technology is no longer limiting us or scaring us into “staying safe” moreover it’s enabling us to get inspired by our surroundings and go and create some truly amazing, Web-Specific design.

Aerotwist - The Cost of Frameworks

Here’s Paul’s write-up of his excellent talk at FF Conf.

Previously I’ve used the term “developer convenience” when describing the benefits of using a framework. Paul uses the term “ergonomics” to describe those benefits. I like that. I worry sometimes that the term “developer convenience” sounds dismissive, which isn’t at all my intention—making our lives as developers less painful is hugely important …but it’s just not as important as improving the lives of the end users (in my opinion …and Paul’s).

As I look at frameworks, I see the ergonomic benefits (and those are important, I agree!), but I can’t help but feel that, for many developers, investing in knowledge of the web platform itself is the best long-term bet. Frameworks come and go, it just seems to be the ebb and flow of the web, and, as I said above, they do contribute ideas and patterns. But if you ever find that the one you use no longer works for you, or has a bug that remains unfixed, being able to understand the platform that underpins it will help enormously.

You should use [insert library/framework], it’s the bestestest! / Paul Lewis - YouTube

This was one of favourite talks at this year’s FF Conf. But I will readily admit there’s a hefty dollop of confirmation bias in my enjoyment.

Best viewed with - Velocity Amsterdam 2015 // Speaker Deck

Are we doomed to see history repeat itself? With the amount of client-side MVC frameworks and the upcoming implementation of the ES6 syntax, will we soon be seeing a repeat of the “browser wars.” Will more websites only work in a select number of browsers with the capabilities to run their code?

Online regex tester and debugger: JavaScript, Python, PHP, and PCRE

Regular expressions are my kryptonite. I’m rubbish at them and I can never keep the vocabulary in me head.

Mark recommended this tool so I’m going to give it a go the next time I have to resort to regex.

The Advertising Bubble (Idle Words)

The prognosis for publishers is grim. Repent! Find a way out of the adtech racket before it collapses around you. Ditch your tracking, show dumb ads that you sell directly (not through a thicket of intermediaries), and beg your readers for mercy. Respect their privacy, bandwidth, and intelligence, flatter their vanity, and maybe they’ll subscribe to something.

Three years with CSS Grid Layout

Rachel outlines the history of the CSS Grid Layout spec so far:

The process works, as slow as it may seem to us who wait anxiously to be able to take advantage of these techniques. I am happy that we are waiting for something that I really believe has the ability to completely change how we do layout on the web.

An Offline Experience with Service Workers | Brandon Rozek

A great walkthrough of setting up a Service Worker for a blog. The code is here but more importantly, as Brandon says:

I wouldn’t be able to implement this myself if it wasn’t for some of the awesome people I mentioned earlier sharing their experience. So share, share, share!

Moodboard — a small JavaScript library for presenting image moodboards on the web

A lovely little script from Nat to create a nice montage of images. It works by progressively enhancing a regular series of images in the markup.

jonathantneal/mdcss

A tool for generating a pattern library from Markdown comments in CSS. This isn’t the way that I tend to work, but I can see how it would be quite handy.

Present!

This looks like being a very handy book on public speaking. I’m going to order a copy for the Clearleft office. I’ll let you know what it’s like.

A Semiotic Approach to Designing Interfaces // Speaker Deck

This looks like a terrific presentation from Alla on iconography, semiotics, and communication.

Making a Simple Site Work Offline with ServiceWorker | CSS-Tricks

Another clear explanation by Nicolas of using Service Worker, this time on CSS Tricks.

Dumb Cuneiform. We’ll take your tweets and make them permanent clay tablets.

There’s something about this that I really like: a message transmitted via a modern communications medium converted into the oldest form of writing.

NC.gov Styleguide

The comprehensive style guide and pattern library for North Carolina.

Cosmos: The infographic book of space

This looks a great book of space-related infographics and data visualisation.

Best of all, there are truly interactive versions online.

A short note about web standards from your friends at Known

Ben and Erin are shipping experimental support for AMP in the latest version of Known, but Ben has some concerns about the balance of power tilting towards one major player, in this case Google:

Unfortunately, AMP redefines the HTML standard with some custom tags. That’s not great. It also requires that we load JavaScript from a specific source, which radically centralizes website content.

But it’s Google’s whitelist of approved ad providers that’s most concerning:

We’ve shipped support for AMP because we see potential here, and recognize that something should be done to improve the experience of loading independently-published content on the web. But attempting to bake certain businesses into a web standard is a malformed idea that is doomed to fail. If this is not corrected in future versions of the specification, we will withdraw support.

Building a device lab | Five Simple Steps

Lara and her colleague Destiny Montague have published a ridiculously useful handbook on setting up a device lab. For such a small book, it’s surprisingly packed with information.

Wrapping up another epic year of Science Hack Day SF!

It looks like this year’s Science Hack Day in San Francisco was particularly excellent.

Tantek told me about building a portable home planetarium—sounded like a blast.

What Happens to Grantland’s Archives? - The Atlantic

Had anyone from the archive been in touch with ESPN? Was there any hope that the treasured collection of Grantland stories might remain accessible?

“We don’t ‘get in touch,’” Jason Scott, a digital historian at the Internet Archive, told me in an email. “We act.”

Radio SETI Observations of the Anomalous Star KIC 8462852 (PDF)

We have made a radio reconnaissance of the star KIC 8462852 whose unusual light curves might possibly be due to planet-scale technology of an extraterrestrial civilization.

Nothing to report yet.

Aural UI of HTML elements

This is such an incredibly useful resource by Steve and Léonie: documenting how multiple screen readers handle each and every element in HTML.

It’s a work in progress, but it’s definitely one to remember the next time you’re thinking “I wonder how screen readers treat this markup…”

Chipmunks on 16 speed

This sounds genuinely good—Alvin and the Chipmunks slowed down to reveal their true ’90s post-punk goth-grunge nature.

From Pages to Patterns: An Exercise for Everyone · An A List Apart Article

I’m so proud of Charlotte right now: last week she gave a conference talk and today she has an article published in A List Apart. Superb work on both fronts!

She does a great job of talking through a collaborative exercise to help teams move from thinking in pages to thinking in patterns.

Where Did the Internet Begin? - The Atlantic

Ingrid begins her tour into the internet and into the past with a visit to room 3240 at UCLA, home to the first node on the ARPAnet.

In a strikingly accurate replica of the original IMP log (crafted by UCLA’s Fowler Museum of Cultural History) on one of the room’s period desks is a note taken at 10:30 p.m., 29 October, 1969—“talked to SRI, host to host.” In the note, there is no sense of wonder at this event—which marks the first message sent across the ARPANET, and the primary reason the room is now deemed hallowed ground.

More for the skill

Be willing to look like a dork:

Embarrassment about what others think has to be the biggest block to any learning. Embarrassment of looking silly. Embarrassment of looking stupid for asking the question everyone else is wondering about but no one is willing to make.

Chimes nicely with Charlotte’s recent piece, Be comfortable looking like an idiot.

Why It’s OK to Block Ads | Practical Ethics

In reality, ad blockers are one of the few tools that we as users have if we want to push back against the perverse design logic that has cannibalized the soul of the Web.

If enough of us used ad blockers, it could help force a systemic shift away from the attention economy altogether—and the ultimate benefit to our lives would not just be “better ads.” It would be better products: better informational environments that are fundamentally designed to be on our side, to respect our increasingly scarce attention, and to help us navigate under the stars of our own goals and values. Isn’t that what technology is for?

Given all this, the question should not be whether ad blocking is ethical, but whether it is a moral obligation.

Reading Right-to-Left | booktwo.org

Suppose the internet is “rewiring our brains” …what of it? Perhaps we can also rewire the brain of the internet.

I’m getting more radical in my view of the internet, this unconsciously-generated machine for unconscious generation. I’m feeling more sure of its cultural value and legacy, and more assertive about stating it. We built this thing, and like all directed culture of the past, it has an agency and a desire, and if you pay attention to it you can see which way it wants to go, and what it wants to fight. We made that, all of us, in time, but we don’t have full control of it. Rather, like the grain of wood, it’s something to be worked with and shaped, but also thought about and conceptualised, both matter and metaphor.