Tags: ar

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…


…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.

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.

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.

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.


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.

NC.gov Styleguide

The comprehensive style guide and pattern library for North Carolina.

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.

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…”

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.

The Okinawa missiles of October | Bulletin of the Atomic Scientists

Pssst! Wanna read something scary for Halloween? Well, this should make you shit your pants.

Seriously though, if the event described here turn out to be true, it is one of the most frightening moments in the history of our species.

<input> I ♡ you, but you’re bringing me down – Monica Dinculescu

The sad history of input elements.

I wish I could share in the closing optimism:

Now imagine the future where Web Components are supported natively, and someone else is allowed to write a <better-input>, an element that is a real, encapsulated DOM element, and not just a div soup. Imagine using this <better-input> that isn’t implemented differently in each browser, that looks the same everywhere, and that probably also knows how to bake you a cherry pie.

But I all I can think is:

Now imagine the future where Web Components are supported natively, and everyone is allowed to write a million variations of <my-idea-of-a-better-input>, an element that is an inaccessible div soup under the hood.

Patterns & Modules: The Toast — 2015 Redesign

I really like the way that you can literally flip between the source code and the output in this styleguide for The Toast.

It’s the IMP

There are Inception-like layers of nostalgia here: firstly, this web series of web pages made by Matt are a throwback to an earlier era, and secondly, the story being told goes all the way back to the birth of the ARPAnet.

Be comfortable looking like an idiot by Charlotte Jackson

I was talking to Charlotte recently about public speaking, confidence, and overcoming fear. She really hit the nail on the head when she said “I need to get comfortable with feeling like an idiot.”

Words to live by—especially if you’re working on the web.

The Radiation Threat to “The Martian” (PDF)

This is something that has been bugging me ever since reading the book:

While Andy Weir does a good job of representing the risks faced by Mark Watney, stranded on Mars and confronting one life-threatening challenge after another, he is silent on the threat of radiation, not just to Mark but particularly to the crew of the Hermes as they contemplate executing a daring rescue mission that more than doubles their time in deep space.

Well, this paper answers all my questions.

Advanced storytelling: Narrative. In space. Over time. | Ellen de Vries

I’m loving Ellen’s thoughts on taking storytelling to the next level.

Let’s say that we’ve got a lot of useful storytelling models for design now. Achievement unlocked. Let’s move on to discuss narrative structure, in space, over time.

Periodic Table of Storytelling

Combining the molecules of narrative tropes to create stories.

Arbitrary Number Generator

Need an arbitrary—but not random—number? Here you go.

No numbers available? Top up the stock by providing some arbitrary numbers.

Day 70: Jeremy’s Got Slack Socks

Yeah, you’re jealous.

The Utopia Of Records: Why Sound Archiving Is Important

The significant challenges in archiving audio.

Her Code Got Humans on the Moon—And Invented Software Itself | WIRED

A profile—published on Ada Lovelace Day—of Margaret Hamilton’s work on the Apollo project.

Static AMP page

Maciej has created a version the AMP Project homepage that’s faster, more performant, and more …um …straight-talkin’.

The Internet’s Dark Ages - The Atlantic

The promise of the web is that Alexandria’s library might be resurrected for the modern world. But today’s great library is being destroyed even as it is being built.

A fascinating account of one story’s linkrot that mirrors the woeful state of our attitude to cultural preservation on the web.

Historians and digital preservationists agree on this fact: The early web, today’s web, will be mostly lost to time.

The Most Mysterious Star in Our Galaxy - The Atlantic

The most interesting anomaly uncovered by a Zooniverse project since Hanny’s Voorwerp.

The Be Nice AMP Project

An alternate version of AMP HTML that works in more parsers and user agents.

The AMP project have “A new approach to web performance” making your website dependent on Google. The Be Nice AMP Project follow the old approach: Make your site fast following best practice guidelines and be independent of Google.

Whatfettle ⁓ Note to self: write more

You read a lot and like the idea of writing. You know the best way to get better at writing is to write, so write!

Rise of the meta-platforms and the new ‘web browser’ - Tales of a Developer Advocate

Paul compares publishing on the web to publish on proprietary platforms, and concludes that things aren’t looking great right now.

Performance is the number one selling point for each of these new content platforms.

The Internet of Things Won’t Work Because Things Don’t Work « The Royal Frontier

But we are promised and shown a world where technology is gorgeous and streamlined and helpful and light and unobtrusive. We don’t live in that world. That world is a fantasy. The hope that the Internet of Things will allow us to be free from daily headaches and logistical errors is naive.

adactio’s jams | This Is My Jam

I absolutely love the way that my archive is presented here. Matt and Hannah have set the bar in how to shut down a service in an honest, dignified way.

Project Apollo Archive on Flickr

This is so, so wonderful—hundreds and hundreds of photographs from all of the Apollo missions. Gorgeous!

The shots of Earth take my breath away.

18F — Introducing the U.S. Web Design Standards

The story behind the newly-released pattern library for the US government.

Andy Budd, Unsung Hero No.51 - Brighton Source

An interview with Andy, reminiscing about the early days of Clearleft.

The Ethos of the Web | degrading disgracefully

This is a wonderful, wonderful description of what it feels like to publish on your own site.

When my writing is on my own server, it will always be there. I may forget about it for a while, but eventually I’ll run into it again. I can torch those posts or save them, rewrite them or repost them. But they’re mine to rediscover.

An Event Apart News: Enhance! by Jeremy Keith—An Event Apart video

Here’s the video of the talk I gave at An Event Apart last year.

Guess what it’s about. Go on, guess!

No! It’s about progressive enha… oh.

Designing The Future, John V Willshire, dConstruct 2015 on Vimeo

Just like Nick, John Willshire has put his slides together with the audio from his gobsmackingly good dConstruct presentation on metadesign.

Clearleft 10th birthday party | Flickr - Photo Sharing!

We celebrated ten years of Clearleft’s existence this weekend. A splendid time was had by all!


How To Organise Your Library

John expands on just one part of his superbly dense and entertaining dConstruct talk.

Diversity Scholarships for ffconf

Remy and Julie are paying for diversity scholarships to Full Frontal on November 6th …including travel and accommodation costs.

The deadline for applications is October 2nd. If you know of someone who would benefit from this, please let them know.

The CompuServe of Things

We need the Internet of Things to be the next step in the series that began with the general purpose PC and continued with the Internet and general purpose protocols—systems that support personal autonomy and choice. The coming Internet of Things envisions computing devices that will intermediate every aspect of our lives. I strongly believe that this will only provide the envisioned benefits or even be tolerable if we build an Internet of Things rather than a CompuServe of Things.

Locus Online Perspectives » Cory Doctorow: What If People Were Sensors, Not Things to be Sensed?

Imagine a location service that sold itself on the fact that your personal information was securely contained in its environs, used by you and you alone. You could have devices on your person that used their sensors to know things about you – when you last ate, what your dining preferences are, what your blood-sugar is, and so on, but these devices would have no truck with the cloud, and they would not deliver that information to anyone else for analysis.

The Web is Ruined and I Ruined it by David Siegel

Here’s a classic. David Siegel—of Creating Killer Websites fame—outlines exactly why he turned his back on that 1×1 spacer .gif trick he invented.

The anatomy of responsive images - JakeArchibald.com

This is the best moment to write a blog post:

I just had my responsive images epiphany and I’m writing it all down before I forget everything.

Writing something down (and sharing it) while you’re still figuring it out is, in my opinion, more valuable than waiting until you’ve understood something completely—you’ll never quite regain that perspective on what it’s like to have beginner’s mind.

Where to Put Your Search Role by Adrian Roselli

This is a very handy tip. I had been putting form role="search" all over The Session. Turns out that’s overriding the default role of “form”. Oops!

GOV.UK elements

I really like the clear styling of checkboxes and radio buttons in the GDS pattern library. Fitts’s law in action.

Lightning Design System

A nice combination of style guide and pattern library, with plenty of documentation.

The Slow Web | words from Cole Henley, @cole007

We become obsessed with tools and methods, very rarely looking at how these relate to the fundamental basics of web standards, accessibility and progressive enhancement. We obsess about a right way to do things as if there was one right way rather than looking at the goal; how things fit into the broader philosophy of what we do on the web and how what we write contributes to us being better at what we do.

The West Pier, Brighton England on Vimeo

For almost a century and a half the West Pier has been Britain’s most iconic pier. Renowned for its wonderful architectural style, it has been visited and enjoyed by millions. Even today with its sculptural remains casting an eerie beauty over the seafront, the West Pier is still the most photographed building in Brighton.

Doing Science On The Web – Infrequently Noted

Alex recounts the sordid history of vendor prefixes and looks to new ways of allowing browsers to ship experimental features without causing long-term harm.

Making Charts with CSS | CSS-Tricks

What a lovely bit of progressive enhancement—styling data tables to display as charts.

Crafting A Bridge Between Storytelling & UX Design

I kind of want to link to every one of John’s post chronicling his 90 days at Clearleft, but this one is particular good, I think: how narrative ideas from the world of storytelling can help unlock some design problems.

Locking the Web Open: A Call for a Distributed Web | Brewster Kahle’s Blog

I like a lot of Brewster Kahle’s ideas here for a more distributed peer-to-peer architecture for the web, but I’m very wary of relying on JavaScript: I’d much prefer a simpler declarative format.

Confidence and Overwhelm

Following on from her great conversation with Jen on The Web Ahead podcast, Rachel outlines a strategy to avoid feeling overwhelmed by the deluge of tools, frameworks, libraries, and techniques inundating front-end developers every day:

Learn your core skills well. Understand HTML and CSS, be able to build a layout without leaning on a framework. Get a solid understanding of how a website actually gets from the server to a browser, an understanding of security and accessibility. These are the basics, the constants. These things change slowly. These things sit underneath all the complexity and the tooling, the CMSs and the noise of thousands of people all trying to make their mark on this industry.

She also makes this important point:

As you are doing this don’t forget to share what you know.

Growing your business

I enjoyed chatting with Marcus and Paul on the Boagworld podcast …mostly because I managed to avoid the topic at hand by discussing sci-fi for half an hour before we settled to the boring stuff about work, business, and all that guff.

Dave Shea – – beyond tellerrand DÜSSELDORF 2015 on Vimeo

A wonderful, wonderful history of the web from Dave at this year’s Beyond Tellerrand conference. I didn’t get to see this at the time—I was already on the way back home—so I got Dave to give me the gist of it over lunch. He undersold it. This is a fascinating story, wonderfully told.

So gather round the computer, kids, and listen to Uncle Dave tell you about times gone by.

The Infinite Trad Session

Okay, this is kind of nuts: some researchers have seeded a neural network with all the tunes from The Session. Some of the results are surprisingly okay. It’s certainly a fascinating project.

A Good Writer Is a Good Thinker

The web – by its very nature – foregrounds the connections between different clusters of knowledge. Links link. One article leads to another. As you make the journey from destination to destination, all inevitably connected by that trail of links, you begin to tease out understanding.

It’s this drawing together, this weaving together of knowledge, that is the important part. Your journey is unique. The chances of another pursuing the same path, link by link (or book by book), is – statistically – impossible. Your journey leads you to discovery and, through reflection, comprehension. You see the connections others haven’t, because your journey is your own.

The Language of Modular Design · An A List Apart Article

Alla has taken the ideas she presented in her superb talk at Responsive Day Out and published them as a great article in A List Apart.

Use the words normal people use

When you’re struggling to write something that sounds clear and sounds human (two of the essential basics of a good blog post, I’d argue), just use the words normal people would use. The best way to find out what those words are is to try talking the thing through to someone who doesn’t know anything about it. Remember what you just said, then write that.


This is so nifty! Mikey has made a site where you can order his interactive artwork.

Interactive? That’s right! Each framed picture comes with a pen so you can doodle over the picture (and wipe it clean again).

Check out The Fett and The Falcon!

Occasional blog of Tobias Revell: Haunted Machines an Origin Story (Long)

Any sufficiently advanced hacking is indistinguishable from a haunting. In the same way that many Internet of Things objects are referred to as ‘enchanting’ or ‘magical,’ with an intervention, they can very quickly become haunted.

90 Days

John is joining us at Clearleft for three months and he’s documenting every single day—in quite some detail!

If you’ve ever wanted to be a fly on the wall at Clearleft, well, this is pretty close.

PDF: Designing For Deep Time: How Art History Is Used To Mark Nuclear Waste

Kelli Anderson’s thesis on the Human Interference Task Force project set up to mark nuclear waste sites for future generations (a project I’ve referenced in some of my talks).

(Xrisk 101): Existential Risk for Interstellar Advocates | Heath Rezabek - Academia.edu

Exemplars proposing various solutions for the resilience of digital data and computation over long timeframes include the Internet Archive; redundantly distributed storage platforms such GlusterFS, LOCKSS, and BitTorrent Sync; and the Lunar supercomputer proposal of Ouliang Chang.

Each of these differs in its approach and its focus; yet each shares with Vessel and with one another a key understanding: The prospects of Earth-originating life in the future, whether vast or diminishing, depend upon our actions and our foresight in this current cultural moment of opportunity, agency, awareness, ability, capability, and willpower.

No one will ever read this but

There’s something so beautifully, beautifully webbish about this: readings of blog posts found through a search for “no one will ever read this.”

Listen to all of them.

Deep Time : A History of the Earth

This infographic offers a visual way to explore the various stages of the Earth’s history using a 12 hour clock analogy.

Library of Babel

This is simply wondrous! A microcosm of Borges’s story made real on the world wide web.

We do not simply generate and store books as they are requested — in fact, the storage demands would make that impossible. Every possible permutation of letters is accessible at this very moment in one of the library’s books, only awaiting its discovery.


This is just wonderful: Powers Of Ten recreated using images from the internet. Also available as a flip book!

Read more about it or watch the video.


Huge have released their tool for generating front-end style guides.

Fan Is A Tool-Using Animal—dConstruct Conference Talk

Maciej has published the transcript of his magnificent (and hilarious) talk from dConstruct 2013.


This is a nifty audio-isation of distance from the Earth, like Radio Free Earth but a lot slicker.

You might not need jQuery plugins

From the people who brought you youmightnotneedjquery.com comes youmightnotneedjqueryplugins.com.

Don’t get me wrong—jQuery is great (some of the plugins less so) but the decision about whether to use it or not on any particular project should be an informed decision made on a case-by-case basis …not just because that’s the way things have always been done.

These sites help to inform that decision.

The Ushahidi Platform ~ Pattern Library

A really nicely-documented pattern library.

Clearleft Letterpress Day | Flickr - Photo Sharing!

This was a fun way to spend the day—getting my hands dirty with ink and type.

Wood type composited and ready to set

An album for a11y | HeydonWorks

Heydon’s putting together a collection of songs from webby people. I need to either give him a Salter Cane track or record some tunes for this.

The Internet That Was (and Still Could Be) - The Atlantic

A fantastic piece by David Weinberger on the changing uses of the internet—apparently in contradiction of the internet’s original architecture.

Some folks invented the Internet for some set of purposes. They gave it a name, pointed to some prototypical examples—sharing scientific papers and engaging in email about them—shaping the way the early adopters domesticated it.

But over time, the Internet escaped from its creators’ intentions. It became a way to communicate person-to-person via email and many-to-many via Usenet. The web came along and the prototypical example became home pages. Social networking came along and the prototype became Facebook.

tota11y – an a11y visualization toolkit

A handy little bookmarklet for doing some quick accessibility checks.

When Responsive Images Get Ugly by Taylor Hunt on CodePen

This is a deep, deep dive into responsive images and I can only follow about half of it, but there are some really useful suggestions in here (I particularly like the ideas for swapping out images for print).

Practical Questions around Web Components - Ian Feather

An in-depth look at where web components stand today, together with some very good questions about where they might be heading tomorrow.

Web Typography – a handbook by Richard Rutter — Kickstarter

You’ll want to back this—you’ll want to back the hell out of this!

Writing for Yourself (& the Power of Absolute Positioning)

We should write for ourselves, we should write about whatever we want to. Not just about the web either. Our twitter feeds don’t need to be a highlight reel of our best moments and not every blog post needs to be a stinging critique of the latest javascript framework. They just need to reflect who we are and what we think about and with any luck, when we look back on them, we might learn something about ourselves.

Clearleft Graduate Internship

Know any talented recent graduates? Let ‘em know about this 3-month internship at Clearleft.

Keep The Web Healthy

I really like this impassioned love letter to the web. This resonates:

The web is a worthy monument for society. It cannot be taken away by apps in the app store or link bait on Facebook, but it can be lost if we don’t continue to steward this creation of ours. The web is a garden that needs constant tending to thrive. And in the true fashion of the world wide web, this is no task for one person or entity. It will require vigilance and work from us all.

Progressive Apps: Escaping Tabs Without Losing Our Soul – Infrequently Noted

I really like Alex’s framing of best-of-breed progressively enhanced websites as “progressive apps” (although Bruce has some other ideas about the naming).

It’s a shame that the add-to-homescreen part isn’t standardised yet though.

The real story of how the Internet became so vulnerable | The Washington Post

The first in a series of articles about the architecture of the internet and its security issues, this is a great history lesson of how our network came to be.

What began as an online community for a few dozen researchers now is accessible to an estimated 3 billion people. That’s roughly the population of the entire planet in the early 1960s, when talk began of building a revolutionary new computer network.

‘That pig was a good influence’ with Jeremy Keith and Jeffrey Zeldman on Unfinished Business on Huffduffer

I had a lot of fun recording this episode with Andrew and Jeffrey. It is occasionally surreal.

Stick around for the sizzling hot discussion of advertising at the end in which we compare and contrast Mad Men and Triumph Of The Will.

Interface Experience Maps, From the Notebook of Aaron Gustafson

This sounds like it could be a very useful tool to introduce early in projects to get a shared understanding of progressive enhancement.

How we built the new gocardless.com — GoCardless Blog

A classic example of the holy grail of web performance and robustness—start with regular HTML sent from the server, enhance once it’s in the browser …if the browser is capable of it. In this case, it’s using JavaScript (React) on both the server and the browser.

Here Comes the Airplane

Paradigm-busting disruption!

They Write the Right Stuff

This article first appeared in Fast Company almost twenty years ago. It’s a fascinating look into the culture and process that created and maintained the software for the space shuttle. It’s the opposite of Silicon Valley’s “move fast and break things.”

To be this good, the on-board shuttle group has to be very different — the antithesis of the up-all-night, pizza-and-roller-hockey software coders who have captured the public imagination. To be this good, the on-board shuttle group has to be very ordinary — indistinguishable from any focused, disciplined, and methodically managed creative enterprise.

100 days reflections | Clear Thinking - The Clearleft Blog

Two-thirds of the way through our 100 days project, Batesy takes stock of his journey so far.

(I should probably mention that I love each and every one of the pieces of hand lettering that he’s done …talented bastard.)

The Village and The Village

In which Dan simultaneously goes to the Netherlands and Belgium in a Miévillian sort of way.

Have a listen to the dConstruct 2011 talk from Kars for context.

When Neil Armstrong and Edmund Hillary Took a Trip to the North Pole | Atlas Obscura

Hillary, legendary for being the first to scale Mount Everest with teammate Tenzing Norgay, was on board, and Armstrong was, too, saying he was curious to see what the North Pole looked like from ground level, as he’d only seen it from the moon. Astronaut problems.

Web! Apps! Fight! : Sally Jenkinson

It’s not about technology, performance and APIs – it’s about people.

Mentorship for the Novice Expert · An A List Apart Column

Every single word that Lyza has written here speaks to me so, so much.

I have no idea what I’m doing and I’m nervous about messing up, but I keep doing this week after week because it feels important.

Get out of my head, Lyza!