Link archive: May, 2017

HN PWA - Hacker News readers as Progressive Web Apps

Of all the sites to pick to demo progressive web apps, we get the cesspit that is Hacker News …I guess it is possible to polish a turd.

Anyway, here are some examples of using frameworks to create alternative Hacker News readers. So the challenge here is to display some text to read..

Four of them render absolutely no content without JavaScript.

In the Hall of Shame we have React, Preact, Angular, and Polymer.

In the Hall of Fame, we have the ones doing it right: React, Vue, and Viper.

That’s right: React appears in both. See, it’s not about the tools; it’s about how you use ‘em.

Responsive Design for Motion | WebKit

A really great overview of using prefers-reduced-motion to tone down CSS animations.

This post was written by James Craig, and I’m going to take this opportunity to say a big “thank you!” to James for all the amazing accessibility work he has been doing at Apple through the years. The guy’s a goddamn hero!

Emmet Re:view — fast and easy way to test responsive design in multiple viewports

It’s no substitute for testing with real devices, but the “device wall” view in this Chrome plug-in is a nifty way of getting an overview of a site’s responsiveness at a glance.

A Love Letter to CSS

My argument is relatively simple: creating a comprehensive styling mechanism for building complex user interfaces is startlingly hard, and every alternative to CSS is much worse. Like, it’s not even close.

Micropub is a W3C Recommendation • Aaron Parecki

I was just talking about micropub …and now it’s officially a W3C spec. Great work!

If you’re building a blogging platform, you can allow your users choose from a wide variety of posting clients by implementing the Micropub spec.

If you’re building a posting client and want it to work with many different server backends instead of hard-coding it to Twitter or other proprietary APIs, implement the Micropub spec and you’ll quickly have people eager to start using the app!

Under-Engineered Custom Radio Buttons and Checkboxen | Adrian Roselli

Stylish and accessible checkboxes and radio buttons accompanied by an explanation of the CSS involved.

No images were harmed in the making of these form controls.

An introduction to CSS Grid | Charlotte Jackson, Front-end developer

Charlotte has caught the CSS Grid bug. I absolutely love her step-by-step explanation—it’s really clear, and manages to be brief but thorough at the same time.

It’s time to be more experimental and push the boundaries with layouts.

100 words, 100 days.

When I did my 100 days project, I found it really challenging. I’m so impressed that Amber has managed to do this: she wrote exactly 100 words every day for 100 days.

10,000 words, 10 megawords, 100 h-entries of hand-written HTML:

I can’t believe I have written ten thousand words. If I were to read everything out it would take me almost an hour. Yet, one hundred words seems like such a small amount. An amount that only takes a few minutes to write.

Daring Fireball: Scott Gilbertson: ‘Kill Google AMP Before It Kills the Web’

If you are a publisher and your web pages don’t load fast, the sane solution is to fix your fucking website so that pages load fast, not to throw your hands up in the air and implement AMP.

Pretty strong meat there from Gruber.

(I’m not going to link through to the Register article though—that rag does not deserve our attention.)

traintimes.org.uk performance notes

I love, love, *love, traintimes.org.uk—partly because it’s so useful, but also because it’s so fast. I know public transport is the clichéd use-case when it comes to talking about web performance, but in this case it’s genuine: I use the site on trains and in airports.

Matthew gives a blow-by-blow account of the performance optimisations he’s made for the site, including a service worker. The whole thing is a masterclass in performance and progressive enhancement. I’m so glad he took the time to share this!

The Apophenic Machine — Real Life

To navigate the web is to beat a path through a labyrinth of links left by others, and to thereby create associative links yourself, unspooling them like a guiding thread onto a floor already carpeted with such connections. Each thread of connection is unique, individualized: everyone draws their own map of the network as they navigate it.

Learn CSS Grid - A Guide to Learning CSS Grid | Jonathan Suh

A quick visual guide to CSS Grid properties and values.

Service Worker Security FAQ - The Chromium Projects

Got questions about the security of service workers? This document probably has the answer.

Amber Wilson: IndieWebCamp

Amber’s report from Indie Web Camp Nuremberg last week. I was blown away by how much she got done in one day.

JSON Feed: Home

RSS isn’t dead, but it has metamorphosed into JSON.

I don’t know if syndication feeds have yet taken on their final form, but they’re the canonical example of 927ing.

Anyway, I’ve gone ahead and added some JSON feeds to adactio.com:

• Journal feed,
• Links feed,
• Notes feed, and
• Articles feed.

Evaluating Technology – Jeremy Keith – btconfDUS2017 on Vimeo

I wasn’t supposed to speak at this year’s Beyond Tellerrand conference, but alas, Ellen wasn’t able to make it so I stepped in and gave my talk on evaluating technology.

Are we making the web too complicated? | Seldo.Com Blog

Laurie Voss on the trade-off between new powerful web dev tools, and the messiness that abusing those tools can bring:

Is modern web development fearsomely, intimidatingly complicated? Yes, and that’s a problem. Will we make it simpler? Definitely, but probably not as soon as you’d like. Is all this new complexity worthwhile? Absolutely.

I agree that there’s bound to be inappropriate use of technologies, but I don’t agree that we should just accept it:

Are there some people using a huge pile of JavaScript and a monstrous build chain to throw together a single-pager web site with one box that collects an email address? For sure. And that’s silly and unnecessary. But so what? The misuse of technology does not invalidate it.

I think we can raise our standards. Inappropriate use of technology might have been forgivable ten years ago, but if we want web development to be taken seriously as a discipline, I think we should endeavour to use our tools and technologies appropriately.

But we can all agree that the web is a wonderful thing:

Nobody but nobody loves the web more than I do. It’s my baby. And like a child, it’s frustrating to watch it struggle and make mistakes. But it’s amazing to watch it grow up.

Evaluating Technology | Calum Ryan

Calum’s write-up of the workshop I ran in Nuremberg last week.

Notes From An Emergency

But real problems are messy. Tech culture prefers to solve harder, more abstract problems that haven’t been sullied by contact with reality. So they worry about how to give Mars an earth-like climate, rather than how to give Earth an earth-like climate. They debate how to make a morally benevolent God-like AI, rather than figuring out how to put ethical guard rails around the more pedestrian AI they are introducing into every area of people’s lives.

Further notes on scenius

Austin Kleon expands on Brian Eno’s neologism “scenius”:

Genius is an egosystem, scenius is an ecosystem.

Presentation: Accessibility in a Responsive World, A11Y Days 2017

There are some great hands-on accessibility patterns in this talk transcript from Scott.

Style Guide Guide | Style Guide Guide

If you want to understand the thinking behind this style guide guide, be sure to read Brad’s style guide guide guide.

Mavo: A new, approachable way to create Web applications

A really interesting new project from Lea that aims to put dynamic sites within the reach of everyone. The emphasis is on declarative languages—HTML and CSS—no JavaScript knowledge required.

Lea has also written an introductory article on Smashing Mag.

It’s not working! Should I blame caching?

Finally, the answer to one of the two hard questions in computer science.

Why Fast Matters // Speaker Deck

Slides from Harry’s recent talk on performance.

Article Performance Leaderboard

Oh, I like this! A leaderboard of news sites, ranked by performance.

I’d love to see something like this for just about every sector …including agency websites.

ngrok - secure introspectable tunnels to localhost

This looks like a useful tool, not just for testing locally-hosted sites (say, at a device lab), but also for making locally-hosted sites run on HTTPS so you can test service workers.

The cost of change | The White Site

Ben points to a new product aiming to ease the pain of connected devices bumping up against the harsh realities of shearing layers:

By exposing the ‘hardwiring’ of our electrical systems, Conduct emphasises how much we rely on existing systems to power our ‘new’ technology – the rate of change and advancement in our traditional technologies moves at a much slower pace than our mobile app-based world and there are physical limitations as a result of this hardwired legacy.

I am—unsurprisingly—in favour of exposing the seams like this.

Uncensorable Wikipedia on IPFS

I think this might be the first large-scale practical demonstration of the InterPlanetary File System: routing around the damage of Turkey’s censorship of Wikipedia.

Nick Jones - Interface Prototyper / Designer

A really interesting and well-executed portfolio site, utterly let down by the tone of this demeaning and insulting piece of copy:

WARNING: Do not proceed if you suffer from vertigo or if you find experimental interfaces offensive.

(Pssst: copy is also interface.)

Amber Wilson: HTTPS Poem

How wonderful is this‽ The latest research task I set for Amber was on HTTPS, and she has delivered her findings …as a poem!

Programming Design Systems

This is a really intriguing book that combines design theory and programming—learn about contrast, colour, and shapes, with each lesson supported by code examples.

It’s still a work in progress but the whole thing is online for free. Yay for web books!

ongoing by Tim Bray · Still Blogging in 2017

This really resonates with me. Tim Bray duly notes that people are writing on Medium, and being shunted towards native apps, and that content is getting centralised at Facebook and other hubs, and then he declares:

But I don’t care.

Same.

Any­how, I’m not go­ing away.

Same.

Codebar Coach Guide

It’s a short list, but this brief guide for coaches at Codebar is packed with excellent advice for anybody getting into teaching or training:

• Do not take over the keyboard! This can be off-putting and scary.
• Encourage the students to type and not copy paste.
• Assume that anyone you’re teaching has no knowledge but infinite intelligence.

Going offline. — Ethan Marcotte

Ethan has added a service worker to his site and he’s got a nifty little recipe for showing a list of saved-for-offline articles.

Amazon.co.uk: Amazon Customer’s review of Bulletproof Ajax (Voices That Matter)

This is definitely the best review of any of my books.

The Lost Picture Show: Hollywood Archivists Can’t Outpace Obsolescence - IEEE Spectrum

There are three parts to digital preservation: format, medium, and licensing. Film and television archives are struggling with all three.

Format:

Codecs—the software used to compress and decompress digital video files—keep changing, as do the hardware and software for playback.

Medium:

As each new generation of LTO comes to market, an older generation of LTO becomes obsolete. LTO manufacturers guarantee at most two generations of backward compatibility. What that means for film archivists with perhaps tens of thousands of LTO tapes on hand is that every few years they must invest millions of dollars in the latest format of tapes and drives and then migrate all the data on their older tapes—or risk losing access to the information altogether.

Licensing:

Studios didn’t see any revenue potential in their past work. They made money by selling movie tickets; absent the kind of follow-on markets that exist today, long-term archiving didn’t make sense economically.

It adds up to a potential cultural disaster:

If technology companies don’t come through with a long-term solution, it’s possible that humanity could lose a generation’s worth of filmmaking, or more.

Build a Better Monster: Morality, Machine Learning, and Mass Surveillance

So what happens when these tools for maximizing clicks and engagement creep into the political sphere?

This is a delicate question! If you concede that they work just as well for politics as for commerce, you’re inviting government oversight. If you claim they don’t work well at all, you’re telling advertisers they’re wasting their money.

Facebook and Google have tied themselves into pretzels over this.

New Album: Princess Leia’s Stolen Death Star Plans | Palette-Swap Ninja

Absolute genius! I’ll never hear Sgt. Pepper’s quite the same way again.

Creating a pattern library in Sketch, Roobottom.com

A smart approach to creating patterns as symbols in Sketch. Sounds like diligence and vigilance is required to make it work, but then, that’s true of any pattern library.

The Last 100 Days, the Next 100 Years

Cancelling the future.

The future lives and dies by the state of the archives. To look hard at this world and honestly, diligently articulate what happened and what it was like in the present is a sort of promise to the future, a new layer to the palimpsest of history that can become someone else’s foundation.

leaving the future behind – Al Robertson

Science fiction isn’t about technology, it’s about people …and how people change in response to technology.

So ironically, perhaps the only way that any piece of science fiction can be sure that it will remain resonant as the years pass is to make sure that any technical speculation can drop away once it’s no longer relevant. The science will fall back to Earth like an exhausted booster section, tumbling away from the rocket that will one day reach the stars. And then we’ll be left with stories about how people change when change arrives – and that, for me, is what science fiction is.

Save Youtube Audio As A Podcast With Huffduffer | NickVegas

I love it when people explain Huffduffer better than I ever could.

Huffduffer is a free service that allows you to build a personalized audio feed. It’s kind of like a “read later” service but for audio.

Dealing with Technical & Design Debt - Breakfast Session - Agile Swap Shop (Brighton, England) | Meetup

If you’re a project manager anywhere near Brighton, put this event in your calendar for the morning of May 30th.

Electronic Items

I love the way Guillaume Kurkdjian uses animation here to demonstrate how these gadgets from the ’90s would work.

The People’s Cloud

A documentary by Matt Parker (brother of Andy) that follows in the footsteps of people like Andrew Blum, James Bridle, and Ingrid Burrington, going in search of the physical locations of the internet, and talking to the people who maintain it. Steven Pemberton makes an appearance in the first and last of five episodes:

1. What is the Cloud vs What Existed Before?
2. Working out the Internet: it’s a volume game
3. The Submarine Cable Network
4. How Much Data Is There?
5. Convergence

The music makes it feel quite sinister.

Offline Web Applications | Udacity

This is a free online video course recorded by Jake a couple of years back. It’s got a really good step-by-step introduction to service workers, delivered in Jake’s typically witty way. Some of the details are a bit out of date, and I must admit that I bailed when it got to IndexedDB, but I highly recommend giving this a go.

There’s also a free course on web accessibility I’m planning to check out.

Springer Nature frontend playbook: house style guide

I like it when organisations share their in-house coding styles. This one from Springer Nature not only has guides for HTML, CSS, and JavaScript, but it also has a good primer on progressive enhancement.

Control Panel | Flickr

Photos of analogue interfaces: switches, knobs, levers, dials, buttons, so many buttons.

The Orrery at The Interval: An Invitation to Long-Term Thinking — Blog of the Long Now

The Long Now Foundation has been posting some great stuff on their blog lately. The latest is a look at orreries, clocks, and computers throughout history …and into the future.