Link archive: January, 2017

The Schedule and the Stream

Matt takes a look at the history of scheduled broadcast media—which all began in Hungary in 1887 via telephone—and compares it to the emerging media context of the 21st century; the stream.

If the organizing principle of the broadcast schedule was synchronization — millions seeing the same thing at the same time — then the organizing principle of the stream is de-contextualization — stories stripped of their original context, and organized into millions of individual, highly personalized streams.

The ‘Credit Card Number’ Field Must Allow and Auto-Format Spaces (80% Don’t) - Articles - Baymard Institute

A deep dive into formatting credit card numbers with spaces in online forms.

100 Days Of Open Source (2017) — Joschi Kuphal · Web architect · Nuremberg / Germany

Joschi is documenting his commitment to “contribute at least one meaningful commit a day to a public Open Source project or a similar community effort.” So far it’s a really nice mix of coding and face-to-face activities.

Less Bro-gramming: Net Natives host and sponsor Codebar | Net Natives

An excellent potted history from Cassie on women in computing.

NASA’s “Keypunch girls” would work in cramped rows translating programming instructions onto paper pads, whilst the machine operators would sit in comfort, feeding the code decks through card readers and enjoying the esteem of the end result (I imagine it a bit like Mad Men, but with more sexism and astronauts).

Visual Design meetup, Brighton

Are you a UI designer? In Brighton? Well, feel in this form if you’re interested in gathering with like-minded people.

This local, monthly and free meetup will let designers show their work, share any methods, processes and tools and ask for the odd critique.

Donate to the ACLU | American Civil Liberties Union

You don’t need to be an American citizen to donate to the American Civil Liberties Union. The online payment process is quick and painless.

If you make a donation—and I sincerely hope you do—ping people who are generously offering to match donations.

Troy Hunt: HTTPS adoption has reached the tipping point

Things are looking good for HTTPS.

The Invention of Wireless Cryptography—The Appendix

A marvellous story of early twentieth century espionage over the airwaves.

In one proposal, hidden instructions were interspersed within regular, ordinary-looking messages by slightly lengthening the spaces between dots and dashes.

What Is the Oldest Computer Program Still in Use?

A fascinating bit of technological archeology tracing some of the oldest still-running software, from a COBOL program at the Pentagon to the firmware on the Voyager probes.

Resilient Web and Tools — David Larlet

David picks up on one of the closing themes of Resilient Web Design—how we choose our tools. This has been on my mind a lot; it’s what I’ll be talking about at conferences this year.

That’s part of my job to ease processes and reduce frictions. That’s part of my job to take into account from the early beginning of a product its lasting qualities.

There’s a very good point here about when and how we decide to remove the things we’ve added to our projects:

We spend our time adding features without considering at the same pace the removal of useless ones. And still the true resilience (or is it perfection Antoine?) is when there is nothing more to take away. What are you removing on Monday to make our Web more resilient?

Callback Hell

At first when I was reading this JavaScript coding guide, I thought “Isn’t this exactly what promises address?” but that is then addressed further down:

Before looking at more advanced solutions, remember that callbacks are a fundamental part of JavaScript (since they are just functions) and you should learn how to read and write them before moving on to more advanced language features, since they all depend on an understanding of callbacks.

Fair enough. In any case, what you’ll find here is mainly good advice for writing modular code.

Calling Bullshit

A proposed syllabus for critical thinking: Calling Bullshit in the Age of Big Data.

Our aim in this course is to teach you how to think critically about the data and models that constitute evidence in the social and natural sciences.

Practical tools and case studies are also provided.

We built a PWA from scratch - This is what we learned

A nice straightforward account of building and testing a progressive web a… I mean, website.

I think every website from now on should use some of the Progressive Web App features. It’s even confusing to call it “Apps” as it applies to all websites and apps.

Life plus Linux: Look before you paste from a website to terminal

The (literally) hidden dangers of copying code snippets from the web and pasting them into the command line.

This cautionary tale backs up a small tip I heard for getting to understand how found code works: deliberately type it out instead of copying and pasting.

DirtyMarkup · Tidy up your HTML, CSS, and JavaScript code

A handy prettifier for front-end code. Useful if you’re trying to find something inside code markup, CSS, or JavaScript that’s been minified.

Detecting text in an image on the web in real-time - Tales of a Developer Advocate by Paul Kinlan

The text detection API is still in its experimental stage, but it opens up a lot of really interesting possibilities for the web: assistive technology to read out text, archiving tools for digitising text …it’s all part of the nascent shape detection API.

The Promise of a Burger Party - Mariko Kosaka

Mariko has a real knack for explaining technical concepts in a very accessible way. This time it’s JavaScript promises.

A practical guide to Progressive Web Apps for organisations who don’t know anything about Progressive Web Apps : Records Sound the Same

Sally gives a really good introduction to using service workers as a progressive enhancement.

✨Implementing “Save For Offline” with Service Workers | Una Kravets Online✨

A great little script from Una that’s perfect for blogs and news sites—allowing users to explicitly save a page for offline reading.

5 Calls: Make your voice heard

A service for US citizens that suggest five phone calls they can make at any time—based on their location—to influence their representatives.

Calling is the most effective way to influence your representative. 5 Calls gives you contacts and scripts so calling is quick and easy. We use your location to give you your local representatives so your calls are more impactful.

Evaluating Tools For Building a Component Library | Chromatic

A comparison of a few different tools for generating pattern libraries.

Spoiler…

In this particular case, Fractal comes out on top:

It has the features we need, and I’m happier than I should be with how simple the directory and file structure is. The documentation has also been super helpful thus far. We’ve customized it with our client’s branding and are ready to roll.

The White Site | Digital home of Ben White, designer and tinkerer

Ben has been quietly blogging away, documenting beautiful design.

The road to Firefly 6, part 2, Roobottom.com

A look at the technical details behind Firefly’s pattern library. The tech stack includes Less, BEM, and some React, but it’s Anna and Danielle that really made it work.

Astronaut

This is beautifully intimate. Your role is that of an anthropologist in orbit around Earth observing the everyday moments on the planet below through uploaded videos that have never been viewed by another human.

Opera Neon – The future of web browsers? | Opera

Under the hood it’s the same Blink engine that power’s the regular Opera browser (and Chrome) but I really like the interface on this experiment. It’s described as being a “concept browser”, much like a “concept car”, which is a nice way of framing experiments like this. More concept browsers please!

Swing Left | Take Back the House

An excellent location-based resource for US citizens looking to make a difference in the 2018 midterm elections.

CSS Grid. One layout method not the only layout method

Grid is only a replacement for float-based layout, where float-based layout it being used to try and create a two-dimensional grid. If you want to wrap text around an image, I’d suggest floating it.

Grid is only a replacement for flexbox if you have been trying to make flexbox into a two-dimensional grid. If you want to take a bunch of items and space them out evenly in a single row, use flexbox.

Designing inspired style guides presentation slides and transcript | Stuff & Nonsense

Having spent half a decade encouraging people to make their pattern libraries public and doing my best to encourage openness and sharing, I find this kind of styleguide-shaming quite disheartening:

These all offer something different but more often than not they have something in common. They look ugly enough to have been designed by someone who enjoys configuring a router.

If a pattern library is intended to inspire, then make it inspiring. But if it’s intended to be an ever-changing codebase (made for and by the kind of people who enjoy configuring a router), then that’s where the effort and time should be concentrated.

But before designing anything—whether it’s a website or a pattern library—figure out who the audience is first.

Trump: A Resister’s Guide | Harper’s Magazine - Part 11

You, the software engineers and leaders of technology companies, face an enormous responsibility. You know better than anyone how best to protect the millions who have entrusted you with their data, and your knowledge gives you real power as civic actors. If you want to transform the world for the better, here is your moment. Inquire about how a platform will be used. Encrypt as much as you can. Oppose the type of data analysis that predicts people’s orientation, religion, and political preferences if they did not willingly offer that information.

Improving accessibility in Co-op wills – Digital blogs

Some interesting insights from usability and accessibility testing at the Co-op.

We used ‘nesting’ to reduce the amount of information on the page when the user first reaches it. When the user chooses an option, we ask for any other details at that point rather than having all the questions on the page at once.

bastianallgeier/letter: Letter is a simple, highly customizable tool to create letters in your browser.

A nice little use of print (and screen) styles from Bastian—compose letters in a web browser.

Instead of messing around in Word, Pages or even Indesign, you can write your letters in the browser, export them as HTML or PDF (via Apple Preview).

Understanding the Critical Rendering Path

A nice and clear description of how browsers parse and render web pages.

Certified Malice – text/plain

Following from that great post about the “zone of death” in browsers, Eric Law looks at security and trust in a world where certificates are free and easily available …even to the bad guys.

Let them paste passwords - NCSC Site

Ever been on one of those websites that doesn’t allow you to paste into the password field? Frustrating, isn’t it? (Especially if you use a password manager.)

It turns out that nobody knows how this ever started. It’s like a cargo cult without any cargo.

Making input type=date complicated – Samsung Internet Developers – Medium

PPK has posted some excellent thinking on calendar widgets to Ev’s blog.

Arrival – Mozilla Open Design

Mozilla’s audacious rebranding in the open that I linked to a while back has come to fruition.

I like it. But even if I didn’t, congratulations to everyone involved in getting agreement across an organisation of this size—never an easy task.

Memory of Mankind: All of Human Knowledge Buried in a Salt Mine - The Atlantic

Like cuneiform crossed with the Long Now Foundation’s Rosetta Project.

He will laser-print a microscopic font onto 1-mm-thick ceramic sheets, encased in wafer-thin layers of glass. One 20 cm piece of this microfilm can store 5 million characters; whole libraries of information—readable with a 10x-magnifying lens—could be slotted next to each other and hardly take up any space.

The Line of Death – text/plain

A thoroughly fascinating look at which parts of a browser’s interface are available to prevent phishing attacks, and which parts are available to enable phishing attacks. It’s like trench warfare for pixels.

Bring on the Flood · thewalrus.ca

Most of these dystopian scenarios are, after all, post-apocalyptic: the bad thing happened, the tension broke, and now so much less is at stake. The anxiety and ambivalence we feel toward late-stage capitalism, income inequality, political corruption, and environmental degradation—acute psychological pandemics in the here and now—are utterly dissolved. In a strange, wicked way, the aftermath feels fine.

Using the aria-current attribute – Tink

The aria-current attribute is very handy and easy to implement. Léonie explains it really well here.

Modernizing our Progressive Enhancement Delivery | Filament Group, Inc., Boston, MA

Scott runs through the latest improvements to the Filament Group website. There’s a lot about HTTP2, but also a dab of service workers (using a similar recipe to my site).

Browser Support for evergreen websites

Oh, how I wished everyone approached building for the web the way that Rachel does. Smart, sensible, pragmatic, and exciting!

The Robot That Performed My Kidney Transplant Declined to Be Interviewed - The New York Times

Tiff is my hero.

How E.T. Really Called Home (PDF)

A 1983 article from 73 Magazine on the surprisingly plausible Rube Goldberg/Heath Robinson device created by E.T. to call home.

Saving you bandwidth on Google+ through machine learning

This is an interesting use of voodoo magic (or “machine learning” as we call it now) by Google to interpolate data in a small image to create a larger version. A win for performance.

Edge.org 2017: What scientific term or concept ought to be more widely known?

A good range of answers for this year’s question, overlapping a bit with 2011’s What scientific concept would improve everybody’s cognitive toolkit?

ryanmcdermott/clean-code-javascript: Clean Code concepts adapted for JavaScript

This looks a sensible approach to writing clean JavaScript.

A Tale of Four Caches · Yoav Weiss

A cute explanation of different browser caches:

• memory cache,
• service worker cache,
• disk cache, and
• push cache.

Mentorship, From the Notebook of Aaron Gustafson

Here’s a great opportunity for somebody looking to level up in web development—mentorship from the one and only Aaron Gustafson.

Stargazing Live, 2017 : Outreach : Physics and Astronomy : University of Sussex

There’s going to be an evening of astro events out at Sussex University next Wednesday, January 18th. Stargazing, an inflatable planetarium, and the Ensonglopedia of science—fun for all the family!

The Futures of Typography

A wonderfully thoughtful piece from Robin, ranging from the printing technologies of the 15th century right up to the latest web technologies. It’s got all my favourite things in there: typography, digital preservation, and service workers. Marvellous!

Resilient Web Design | susan jean robertson

Well, this is nice! Susan has listed the passages she highlighted from Resilient Web Design.

In the spirit of the book, I read it in a browser, and I broke up my highlights by chapters. As usual, you should read the book yourself, these highlights are taken out of context and better when you’ve read the whole thing.

Typora — a minimal markdown reading & writing app

This looks like an interesting little Markdown editor. I think I’ll take it for a spin.

Redesign v15 Notes | CSS-Tricks

Chris redesigned CSS Tricks and it’s got some really nice touches. I particularly like the stacked card view on mobile.

From Tape Drives to Memory Orbs, the Data Formats of Star Wars Suck (Spoilers) | Motherboard

As always with sci-fi interfaces, the important part is telling the story, not realism or accuracy. Personally, I liked the way that the World War II trappings of Rogue One extended to communications and networking technologies.

A Day in the Life of Americans | FlowingData

Watching this data visualisation on its high speed setting is quite hypnotic.

Making stuff from scratch in the wild

Making fire, building shelter, throwing spears …all useful post-apocalyptic skills documented on the primitive technology blog.

Primitive technology is a hobby where you make things in the wild completely from scratch using no modern tools or materials. This is the strict rule. If you want a fire- use fire sticks, an axe- pick up a stone and shape it, a hut- build one from trees, mud, rocks etc. The challenge is seeing how far you can go without modern technology. If this hobby interests you then this blog might be what you are looking for.

It’s more than just the words

I can relate to what Rachel describes here—I really like using my own website as a playground to try out new technologies. That’s half the fun of the indie web.

I had already decided to bring my content back home in 2017, but I’d also like to think about this idea of using my own site to better demonstrate and play with the new technologies I write about.

Designing Systems: Theory, Practice, and the Unfortunate In-between / Paul Robert Lloyd

Paul is turning his excellent talk on design systems into a three part series. Here’s part one, looking at urban planning from Brasília to London.

Productivity in Terrible Times

When a solid 67% of your soul is engaged with battles elsewhere, how do you continue on with our ongoing, non-revolutionary work?

Indivisible Guide

A resource for American citizens put together by former congressional staffers. If you’re a US citizen wondering how you can resist Trump’s agenda, this should provide solid advice on what action you can take.

The Realm of Rough Telepathy

I love this recasting of the internet into a fantastical medieval setting. Standards become spells, standards bodies become guilds and orders of a coven, and technologies become instruments of divination. Here, for example, is the retelling of IPv4:

The Unique Rune of the Fourth Order is the original and formative Unique Rune, still commonly in use. All existing Unique Runes of the Fourth Order were created simultaneously in the late 1970’s by the Numberkeepers, at a time when Rough Telepathy was a small and speculative effort tightly affiliated with the Warring Kingdom of the United States. There were then and are now 4.3 billion Unique Runes of the Fourth Order, a number which cannot be increased. The early Numberkeepers believed 4.3 billion would be more than enough. However, this number is no longer sufficient to provision the masses hungry to never disengage from participation in Rough Telepathy, and the Merchants eager to harness Rough Telepathy as a “feature” in new and often unnecessary consumer products. This shortage has caused considerable headache among the Fiefdoms, the Regional Telepathy Registers, and the Coven.

What AMP (Maybe) Means for News Developers - Features - Source: An OpenNews project

So if AMP is useful it’s because it raises the stakes. If we (news developers) don’t figure out faster ways to load our pages for readers, then we’re going to lose a lot of magic.

A number of developers answered questions on the potential effects of Google’s AMP project. This answer resonates a lot with my own feelings:

AMP is basically web performance best practices dressed up as a file format. That’s a very clever solution to what is, at heart, a cultural problem: when management (in one form or another) comes to the CMS team at a news organization and asks to add more junk to the site, saying “we can’t do that because AMP” is a much more powerful argument than trying to explain why a pop-over “Like us on Facebook!” modal is driving our readers to drink.

But the danger is that AMP turns into a long-term “solution” instead of a stop-gap:

So in a sense, the best possible outcome is that AMP is disruptive enough to shake the boardroom into understanding the importance of performance in platform decisions (and making the hard business decisions this demands), but that developers are allowed to implement those decisions in standard HTML instead of adding yet another delivery format to their export pipeline.

The ideal situation looks a lot more like Tim’s proposal:

I would be much more pleased with AMP if it was a spec for Google’s best-practice recommendations rather than effectively a new non-standard format. By using standard HTML/CSS/JS as the building blocks, they’re starting on the right foot, but the reliance on a Google-decreed AMP JavaScript library, use of separate AMP-specific URLs, and encouragement to use a Google-provided CDN are all worrying aspects.

Day 14: Posting to my Website from Alexa #100DaysOfIndieWeb • Aaron Parecki

Aaron documents how he posts to his website through his Amazon Echo. No interface left behind.

Slapdashery

I really like this short-form writing project from Ben:

Daily off-the-cuff thoughts on design, UX, and products, written in 5 minutes without stopping.

He has also documented some of his strategies to make sure he sticks with it. Smart!

Kiss My Classname - Zeldman on Web & Interaction Design

I understand how bloated and non-reusable code can get when a dozen people who don’t talk to each other work on it over a period of years. I don’t believe the problem is the principle of semantic markup or the cascade in CSS. I believe the problem is a dozen people working on something without talking to each other.

The triumph of the small » Nieman Journalism Lab

I really like Liz’s long-zoom perspective in this look ahead to journalism in 2017.

What I Read in 2016 - TimKadlec.com

Tim’s book recommendations have always been solid. Here’s his year-end list. I’m honoured that he not only read Resilient Web Design but also gave it all the stars.

Pattern patter. — Ethan Marcotte

Ethan has been thinking smarty-thinky thoughts about patterns and pattern libraries.

Does Google execute JavaScript? | Stephan Boyer

Google may or may not decide to run your JavaScript, and you don’t want your business to depend on its particular inclination of the day. Do server-side/universal/isomorphic rendering just to be safe.

Indie Microblogging: owning your short-form writing by Manton Reece — Kickstarter

Here’s an interesting Kickstarter project: a book about owning your notes (and syndicating them to Twitter) to complement the forthcoming micro.blog service.

Exciting times: 2017 and the web - Tales of a Developer Advocate by Paul Kinlan

Paul takes a look at the year ahead on the web and likes what he sees. There’s plenty of new browser features and APIs of course, but more interesting:

The web reaching more people as they come online with Mobile. There is still a huge amount of potential and growth in India, Indonesia, China, Thailand, Vietnam, all of Africa. You name it, mobile is growing massively still and the web is accessible on all of these devices.

Mercury by Postlight

Readability is back, but now it’s called Mercury.

In Praise of On Resilient Web Design by Jeremy Keith

I’m really touched—and honoured—that my book could have this effect.

It made me fall back in love with the web and with making things for the web.

Typography Wars: Has the Internet Killed Curly Quotes? - The Atlantic

Glenn Fleishman on the war of attrition between primes and quotation marks on the web.

Two Irish Girls Who Made It to New York - The New York Times

Maeve Higgins must’ve been back in Cobh (our hometown) at the same time this Christmas. Here she tells the story of Annie Moore, the first person to enter the doors at Ellis Island.

I stood on the darkening quay side in Cobh on Christmas Eve, and looked at a statue of Annie there. She seems small and capable, her hands lightly resting on her little brothers’ shoulders, gazing back at a country she would never see again. An Irish naval ship had returned to the harbor earlier that week from its mission off the Mediterranean coast, a mission that has rescued 15,000 people from the sea since May 2015, though 2016 was still the deadliest one for migrants crossing the Mediterranean since World War II.

Front-end Style Guides by Anna Debenham

Anna has just published a lovely new version of her excellent little book on pattern libraries. EPUB, MOBI, and PDF versions are yours for a mere $8.