Link archive: February, 2019

A Briefer History of Time

You can read all of Stephen Hawking’s 2008 book online as a web book (kind of like Resilient Web Design).

Getting help from your worst enemy

Onboarding. Reaching out. In terms of. Synergy. Bandwidth. Headcount. Forward planning. Multichannel. Going forward. We are constantly bombarded and polluted with nonsense speak. These words and phrases snag and attach themselves to our vocabulary like sticky weeds.

Words become walls.

I love this post from Ben on the value of plain language!

We’re not dumbing things down by using simple terms. We’re being smarter.

Read on for the story of the one exception that Ben makes—it’s a good one.

Write on your own website | Brad Frost

Writing on your own website associates your thoughts and ideas with you as a person. Having a distinct website design helps strengthen that association. Writing for another publication you get a little circular avatar at the beginning of the post and a brief bio at the end of the post, and that’s about it. People will remember the publication, but probably not your name.

WorldWideWeb coverage

Remy’s keeping a list of hyperlinks to stories covering our recent hack week at CERN.

Sliding In And Out Of Vue.js — Smashing Magazine

This aspect of Vue appeals to me more than the all-or-nothing vibe I get from React:

By enabling incremental adoption, Vue’s progressive nature means that individuals can start using it here and there, a bit at a time, without having to do massive rewrites.

The CSS mental model - QuirksBlog

PPK looks at the different mental models behind CSS and JavaScript. One is declarative and one is imperative.

There’s a lot here that ties in with what I was talking about at New Adventures around the rule of least power in technology choice.

I’m not sure if I agree with describing CSS as being state-based. The example that illustrates this—a :hover style—feels like an exception rather than a typical example of CSS.

Systems Thinking, Unlocked – Airbnb Design

Some useful lessons here for strengthening a culture of sustained work on a design system.

Creating and maintaining a design system is like planting a tree—it has to be nurtured and cared for to reap the benefits. The seed of our design system has been planted, and now our teams are working together to maintain and grow it. Our new way of working supports gives people recognition, facilitates trust, and creates strong partnerships.

GRID: A simple visual cheatsheet for CSS Grid Layout

This is a really nice glanceable reference for CSS grid.

Emoji Avatars for My Website • Aaron Parecki

Oh, Aaron!

For my hack day project I made the avatar on each post in my website change depending on the emoji I use in the post!

Programming as translation – Increment: Internationalization

Programming lessons from Umberto Eco and Emily Wilson.

Converting the analog into the digital requires discretization, leaving things out. What we filter out—or what we focus on—depends on our biases. How do conventional translators handle issues of bias? What can programmers learn from them?

The timelessness of The Ballad of Halo Jones, the girl who got out | FactorDaily

The Ballad Of Halo Jones is 35 years old this year.

Where did she go? Out.

What did she do? Everything.

Sadly, this is not The Onion

It’s not funny, cause it’s true.

AddyOsmani.com - JavaScript Loading Priorities in Chrome

A table showing how browsers prioritise a) the loading of JavaScript and b) the execution of JavaScript.

github/details-menu-element

Now this is how you design a web component! A great example of progressive enhancement by Mu-An Chiou that’s used all over Github: a details element that gets turbo-charged into a details-menu.

There’s also a slidedeck explaining the whole thing.

indiekit | An IndieWeb publishing toolkit

Paul is making a micropub endpoint for static sites—very cool!

n-gate.com. we can’t both be right.

Hacker News is an echo chamber focusing on computer posturing and self-aggrandizement. It is run by Paul Graham’s investment fund and sociopath incubator, Y Combinator.

There’s never been any reason to visit Hacker News, but now you really don’t need to ever go there. This site posts a weekly roundup, complete with commentary that’s even more snarky than Hacker News.

Here’s a fairly typical summary of a fairly typical thread:

A programmer at a spamhouse is transported to a world where people are not judged by the color scheme of their Atom window, but by the character assessment and culture fit reports they write about potential new hires. Hackernews spends a lot of time discussing how to bullshit people like the author into hiring them. A few Hackernews struggle with the knowledge that there are people who contribute to business without involving Git. Furious debates about “title inflation” break out amongst people who type javascript into computers and straight-facedly refer to themselves as “engineers”.

Oh, and I love the “about” page.

Don’t Get Clever with Login Forms | Brad Frost

1. Have a dedicated page for login
2. Expose all required fields
3. Keep all fields on one page
4. Don’t get fancy

nexus-project / nexus-browser · GitLab

Here’s the source code for the WorldWideWeb project we did at CERN.

WWW: Where’s the Writable Web?

Prompted by our time at CERN, Remy ponders why web browsers (quite quickly) diverged from the original vision of being read/write software.

Why Behavioral Scientists Need to Think Harder About the Future - Behavioral Scientist

Speculative fiction as a tool for change:

We need to think harder about the future and ask: What if our policies, institutions, and societies didn’t have to be organized as they are now? Good science fiction taps us into a rich seam of radical answers to this question.

WorldWideWeb, 30 years on – Dan Q

This is a lovely write-up of the WorldWideWeb hack week at CERN:

The Web is a success story in open standards, natural and by-design progressive enhancement, and the future-proof archivability of human-readable code.

Minimal Google Analytics Snippet | Minimal Analytics

If you really, really have to add Google Analytics to a sites, here’s a way to do it in a more performant way, without the odious Google Tag Manager.

You probably don’t need a single-page application

If there are no specific reasons to build a single-page application, I will go with a traditional server-rendered architecture every day of the week.

An Interview with Nick Harkaway: Algorithmic Futures, Literary Fractals, and Mimetic Immortality - Los Angeles Review of Books

Nick Harkaway on technology in fiction:

Humans without tools are not magically pure; they’re just unvaccinated, cold, and wet.

SF is how we get to know ourselves, either who we are or who we might be. In terms of what is authentically human, SF has a claim to be vastly more honest and important than a literary fiction that refuses to admit the existence of the modern and goes in search of a kind of essential humanness which exists by itself, rather than in the intersection of people, economics, culture, and science which is where we all inevitably live. It’s like saying you can only really understand a flame if you get rid of the candle. Good luck with that.

And on Borges:

He was a genius, and he left this cryptic, brilliant body of work that’s poetic, incomplete, astonishing. It’s like a tasting menu in a restaurant where they let you smell things that go to other tables and never arrive at yours.

Blockchain and Trust - Schneier on Security

Honestly, cryptocurrencies are useless. They’re only used by speculators looking for quick riches, people who don’t like government-backed currencies, and criminals who want a black-market way to exchange money.

Bruce Schneier on the blockchain:

What blockchain does is shift some of the trust in people and institutions to trust in technology. You need to trust the cryptography, the protocols, the software, the computers and the network. And you need to trust them absolutely, because they’re often single points of failure.

Using CSS Grid the right way | hey it’s violet

CSS Grid is easy to use but difficult to learn. It’s a more intuitive paradigm than any other CSS layout technique, but it’s completely different from its predecessors.

Some great advice here on how to approach CSS grid:

• Use names, not numbers
• Use fr as your flexible unit
• Don’t use a grid system

The ineffectiveness of lonely icons | Matt Wilcox, Web Developer & Tinkerer

When in doubt, label your icons.

When not in doubt, you probably should be.

Work and life of Stanley Kubrick

The scrollurbation is so excessive on this site that Reader Mode is pretty much a requirement. A shame, because the actual content buried underneath is pretty great.

Is the universe pro-life? The Fermi paradox can help explain — Quartz

Living things are just a better way for nature to dissipate energy and increase the universe’s entropy.

No anthropocentric exceptionalism here; just the laws of thermodynamics.

According to the inevitable life theory, biological systems spontaneously emerge because they more efficiently disperse, or “dissipate” energy, thereby increasing the entropy of the surroundings. In other words, life is thermodynamically favorable.

As a consequence of this fact, something that seems almost magical happens, but there is nothing supernatural about it. When an inanimate system of particles, like a group of atoms, is bombarded with flowing energy (such as concentrated currents of electricity or heat), that system will often self-organize into a more complex configuration—specifically an arrangement that allows the system to more efficiently dissipate the incoming energy, converting it into entropy.

Impossible Cookware and Other Triumphs of the Penrose Tile - Issue 69: Patterns - Nautilus

The forbidden symmetry of Penrose tiles and quasicrystals.

FOREVERYONE.NET

I linked to this a while back but now this great half hour documentary by Jessica Yu is ready and you can watch the whole thing online: Tim Berners-Lee, the birth of the web, and where the web has gone since.

In the scenes describing the early web, there’s footage of the recreated Line Mode Browser—how cool is that‽

Recreating the First Web Browser at CERN | U.S. Mission to International Organizations in Geneva

The US Mission to the UN in Geneva came by to visit us during our hackweek at CERN.

“Our hope is that over the next few days we are going to recreate the experience of what it would be like using that browser, but doing it in a way that anyone using a modern web browser can experience,” explains team member Jeremy Keith. The aim is to “give people the feeling of what it would have been like, in terms of how it looked, how it felt, the fonts, the rendering, the windows, how you navigated from link to link.”

Developers revitalise first Web browser at week-long hackathon | CERN

Here’s the CERN write-up of our week of hacking to produce the recreation of the WorldWideWeb browser.

Recreating the first web browser at CERN | Flickr

Photos from earlier this week:

In a small room in CERN’s Data Center, an international group of nine developers is taking a plunge back in time to the beginnings of the World Wide Web. Their aim is to enable the whole world to experience what the web looked like viewed within the very first browser developed by Tim Berners-Lee.

Public Affairs Office on Instagram

A little teaser from U.S. MIssion at the U.N. in Geneva:

This year marks the 30th Anniversary of the birth of the #WorldWideWeb. A team of #webdevelopers are working to make it possible for the public to experience the #FirstWebBrowser as it looked on #TimBernersLees’s computer @CERN…

Talk at Bush Symposium: Notes

On the 50th anniversary of Vannevar Bush’s As We May Think, Tim Berners-Lee delivered this address in 1995.

To a large part we have MEMEXes on our desks today. We have not yet seen the wide scale deployment of easy human interfaces for editing hypertext and making links. (I find this constantly frustrating, but always assume will be cured by cheap commercial products within the year.)

Tinnitus Tracker

Rob has turned his exhaustive spreadsheet of all the concerts he has attended into a beautiful website. Browse around—it’s really quite lovely!

Rob’s also writing about the making of the site over on his blog.

A Simpler Web: I Concur

Tales of over-engineering, as experienced by Bridget. This resonates with me, and I think she’s right when she says that these things go in cycles. The pendulum always ends up swinging the other way eventually.

Weeknotes #5 — Paul Robert Lloyd

A nice counterpoint to the last time I linked to Paul’s weeknotes:

However, there’s another portion of the industry, primarily but not exclusively within the public sector, where traditional development approaches (progressive enhancement, server-side rendering) remain prevalent, or less likely to be dismissed, at least. Because accessibility isn’t optional when your audience is everyone, these organisations tend to attract those with a pragmatic outlook who like to work more diligently and deliberately.

Table Design Patterns On The Web — Smashing Magazine

Hui Jing runs through a whole bunch of options for displaying responsive tables, some of them using just CSS, some of them using a smidgen of JavaScript. There are some really clever techniques in here.

CodePen - Solar System 3D Animation (Pure CSS)

This orrery is really quite wonderful! Not only is it a great demonstration of what CSS can do, it’s a really accurate visualisation of the solar system.

Proper UI hierarchy · accssible

Bringing gradients back, baby!

This is going to be a handy reference to keep on hand whenever you want a button to actually look like a button.

PWA2APK- Convert PWA to APK file - Appmaker.xyz

This seems to work quite nicely: convert your progressive web app into an APK file that you can then submit to the Google Play store (you’ll still have to go through all the hassle of submitting the app, but still).

I tested this with The Session and sure enough, it looks like it’s available to download from Google Play.

CSS Remedy

This is a really interesting approach that isn’t quite a CSS reset or a normalisation. Instead, it’s an experiment to reimagine what a default browser stylesheet would be like if it were created today, without concerns about backwards compatibility:

Applies basic styling to form elements and controls, getting you started with custom styling. We want to find the balance between providing a base for implementing a custom design, and allowing OS-level control over how form inputs work (like how a number pad works on iOS).

Provides a very lightweight starter file, with generic visual styling that you will want to replace. This isn’t as robust or opinionated as a starter-theme or framework. We’ve leaned toward specifying less, so you have less to override. (We haven’t defined any font families, for example.)

You can contribute by adding issues.

Let’s bring Fan Sites and webrings back! - bryanlrobinson.com

As the commercial viability of the web grew, we saw more and more users become consumers and not creators. Many consumers see websites as black boxes full of magic that they could never understand. Because of this, they would never think to try to create something.

This is a shame. We lost a little piece of the magic of the web when this culture came about.

A call to action to create a fan site about something you love. It would be an unmonetisable enthusiasm. But it’s still worth doing:

1. The act of creation itself is fun!
2. Sharing something you love with the world is worthwhile.
3. You’ll learn something.

So here’s the challenge:

1. Create a Fan Site.
2. Help someone create a Fan Site.
3. Create a webring.

Oh God, It’s Raining Newsletters — by Craig Mod

After musing on newsletters, Craig shares how he’s feeling about Instagram and its ilk:

Instagram will only get more complex, less knowable, more algorithmic, more engagement-hungry in 2019.

I’ve found this cycle has fomented another emotion beyond distrust, one I’ve felt most acutely in 2018: Disdain? (Feels too loaded.) Disappointment? (Too moralistic.) Wariness? (Yes!) Yes — wariness over the way social networks and the publishing platforms they provide shift and shimmy beneath our feet, how the algorithms now show posts of X quality first, or then Y quality first, or how, for example, Instagram seems to randomly show you the first image of a multi-image sequence or, no wait, the second.8

I try to be deliberate, and social networks seem more and more to say: You don’t know what you want, but we do. Which, to someone who, you know, gives a shit, is pretty dang insulting.

Wariness is insidious because it breeds weariness. A person can get tired just opening an app these days. Unpredictable is the last thing a publishing platform should be but is exactly what these social networks become. Which can make them great marketing tools, but perhaps less-than-ideal for publishing.

Transcript of Tim Berners-Lee’s talk to the LCS 35th Anniversary celebrations, Cambridge Massachusetts, 1999/April/14

Twenty years ago—when the web was just a decade old—Tim Berners-Lee gave this talk, looking backwards and forwards.

For me the fundamental Web is the Web of people. It’s not the Web of machines talking to each other; it’s not the network of machines talking to each other. It’s not the Web of documents. Remember when machines talked to each other over some protocol, two machines are talking on behalf of two people.

Revisiting the abbr element

Ire takes a deep dive into implementing an accessible tool tip.

Three ways to build Crouwel’s Hiroshima poster in CSS

Hidde takes one iconic design and shows how it could be recreated with CSS grid using either 4 columns, 9 columns, or 17 columns.

Weeknotes #4 — Paul Robert Lloyd

So far I’ve been drawn towards developer-orientated roles; working with HTML, CSS and JavaScript (in that order) to implement designs and ensure products are accessible and performant. However, it seems such work no longer exists. People talk about full-stack development, but nearly every job I’ve seen containing the words ‘front-end’ has React as a requirement. The gatekeeping is real.

Frustrating on a personal level, but also infuriating when you consider how such gatekeeping is limiting welcome attempts to diversify our industry.

How can we break the Brexit deadlock? Ask ancient Athens | James Bridle | Opinion | The Guardian

James describes an ancient Greek machine called the kleroterian:

The method of governance embodied in the kleroterion, which dates back to the very establishment of democracy, is called sortition, meaning selection by lot, as opposed to election by vote.

Forget privacy: you’re terrible at targeting anyway - apenwarr

A spot-on description of how targetted advertising works …or rather, how it doesn’t.

They are still trying to sell me car insurance for my subway ride.

APOLLO 11 [Official Trailer] - YouTube

This documentary, made entirely with archive footage, looks like it will be amazing! I really hope I get to see it in a cinema.

Crafted from a newly discovered trove of 65mm footage, and more than 11,000 hours of uncatalogued audio recordings, Apollo 11 takes us straight to the heart of NASA’s most celebrated mission—the one that first put men on the moon, and forever made Neil Armstrong and Buzz Aldrin into household names.

Aw! What about Michael Collins‽ He’s always the Ringo of the mission, even though he was the coolest dude.

“It turns out” « the jsomers.net blog

It turns out that “it turns out” is a handy linguistic shortcut for making an unsubstaniated assertion.

1969 & 70 - Bell Labs

PIctures of computers (of the human and machine varieties).

Tools & Craft - Episode 03: Ted Nelson

A great interview with Ted Nelson at the Internet Archive where he reminisces about Doug Engelbart, Bob Taylor, Vannevar Bush, hypertext and Xanadu. Wind him and let him go!

There’s an interesting tidbit on what he’s up to next:

So, the first one I’m trying to build will just be a comment, but with two pages visibly connected. And the second bit will be several pages visibly connected. A nice example is Vladimir Nabokov’s novel Pale Fire, which is a long poem by the fictitious author John Shade, connected to a large number of idiotic footnotes by the fictitious academic Charles Kinbote.

Ironically, back in the days of the Dark Brown Project, I actually got permission from the publishers of Pale Fire to demonstrate it on the Brown system. So now I hope to demonstrate it on the new Xanadu.

Pale Fire is the poem referenced in Blade Runner 2049:

Cells interlinked within cells interlinked…

Word Bubbles — The Man in Blue

Wheeee! Another fun experiment from Cameron.

How do you figure? | CSS-Tricks

A good reminder from Chris—prompted by Scott O’Hara’s article—that the figcaption element and the alt attribute do different things. If you use an empty alt attribute on an img inside a figure, then your figcaption element is captioning nothing …and no, using the same text for both is not the solution.

New Adventures 2019 | Part Two: Progressive Web | Abstrakt

Here’s a thorough blow-by-blow account of the workshop I ran in Nottingham last week:

Jeremy’s workshop was a fascinating insight into resilience and how to approach a web project with ubiquity and consistency in mind from both a design and development point of view.

Limiting JavaScript? - TimKadlec.com

Following on from that proposal for a browser feature that I linked to yesterday, Tim thinks through all the permutations and possibilities of user agents allowing users to throttle resources:

If a limit does get enforced (it’s important to remember this is still a big if right now), as long as it’s handled with care I can see it being an excellent thing for the web that prioritizes users, while still giving developers the ability to take control of the situation themselves.

Readable Code without Prescription Glasses | Ocasta

I saw Daniel give a talk at Async where he compared linguistic rules with code style:

We find the prescriptive rules hard to follow, irrespective of how complex they are, because they are invented, arbitrary, and often go against our intuition. The descriptive rules, on the other hand, are easy to follow because they are instinctive. We learned to follow them as children by listening to, analysing and mimicking speech, armed with an inbuilt concept of the basic building blocks of grammar. We follow them subconsciously, often without even knowing the rules exists.

Thus began some thorough research into trying to uncover a universal grammar for readable code:

I am excited by the possibility of discovering descriptive readability rules, and last autumn I started an online experiment to try and find some. My experiment on howreadable.com compared various coding patterns against each other in an attempt to objectively measure their readability. I haven’t found any strong candidates for prescriptive rules so far, but the results are promising and suggest a potential way forward.

I highly recommend reading through this and watching the video of the Async talk (and conference organisers; get Daniel on your line-up!).