Link archive: November, 2016

Google’s AMP is a gilded cage – Terence Eden’s Blog

Sounds like AMP is a bit of a roach motel. You can check out anytime you like, but you can only leave with great difficulty.

SlimWiki — Beautiful Wikis for Teams

At the last Clearleft Hackfarm, one of the ideas I proposed was “a wiki that doesn’t suck.” Looks like someone’s finally done it.

The Guardian has moved to https 🔒 | Info | The Guardian

Details of The Guardian’s switch to HTTPS.

CSS Reference - A free visual guide to the most popular CSS properties.

A whole lotta CSS properties and values gathered together in one place. The one-page view is a bit overwhelming, but search and collections can get you to the right bit lickety-split.

kottke.org memberships

I have so much admiration for Jason Kottke’s dedication (or sheer bloodymindedness)—he’s been diligently writing and sharing weird and wonderful stuff on his own website for so long. I’m more than happy to support him in that.

Fix the internet by writing good stuff and being nice to people · Woman. Legend.Blog

Whereas before content used to be spread out on numerous domains in numerous ways, content now mostly makes its home on the three domains that are most hostile to thoughtful human discussion: Twitter, Medium, and Facebook.

So what? you may ask..

Think about how many times you’ve tweeted. Or written or commented on a Facebook post. Or started a Medium draft. These are all our words, locked in proprietary platforms that controls not only how our message is displayed, but how we write it, and even more worrying, how we think about it.

Hey designers, if you only know one thing about JavaScript, this is what I would recommend | CSS-Tricks

This is a really great short explanation by Chris. I think it shows that the really power of JavaScript in the browser isn’t so much the language itself, but the DOM—the glue that ties the JavaScript to the HTML.

It reminds me of the old jQuery philosophy: find something and do stuff to it.

Turing Complete User

A superb 2012 essay by Olia Lialin. J.C.R. Licklider, Vannevar Bush, Ted Nelson, Douglas Engelbart, Don Norman, Lawrence Lessig, Jonathan Zittrain, Douglas Rushkoff and Cory Doctorow all make an appearance.

There’s a lot to think about here. I’m particular struck by the idea that calling people “users” isn’t necessarily the dehumanising Lakoffian language we think it is; users have power and control. If we stop treating people like users, we may end up infantilising and disempowering them.

But when you read it in a broader context, the denial of the word “user” in favor of “people” becomes dangerous. Being a User is the last reminder that there is, whether visible or not, a computer, a programmed system you use.

Document your design systems with Fractal | Creative Bloq

This quick dip into Fractal was in last month’s Net magazine.

It’s very gratifying to see how much Fractal is resonating with people—Mark has put so much hard work into it.

History of Icons – a visual brief on icon history by FUTURAMO

An illustrated history of digital iconography.

Keeper of the Clock

An unfolding series of vignettes written by Danny Hillis back in 2010. It’s all very Borgesian.

Style List Markers in CSS | CSS-Tricks

A clever way of styling list numbers and bullets in CSS. It feels like this should be its own pseudo-element already though, right? Well, that’s on the way.

CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends – Smashing Magazine

A really terrific piece by Heydon that serves as a rousing defence of the cascade in CSS. It’s set up in opposition to methodologies like BEM (and there’s plenty of back’n’forth in the comments), but the truth is that every project is different so the more approaches you have in your toolkit, the better. For many projects, something like BEM is a good idea. For others, not so much.

Funnily enough, I’ve been working something recently where I’ve been embracing the approach that Heydon describes—although, to be fair, it’s a personal project where I don’t have to think about other developers touching the HTML or CSS.

Smithsonian 3D Apollo 11 Command Module

This is so wonderful! A 3D fly-through of the Apollo 11 command module, right in your browser. It might get your fan whirring, but it’s worth it.

Click through for lots of great details on the interface controls, like which kinds of buttons and switches were chosen for which tasks.

And there’s this lovely note scrawled near the sextant by Michael Collins (the coolest of all the astronauts):

Spacecraft 107, alias Apollo 11, alias ‘Columbia.’ The Best Ship to Come Down the Line. God Bless Her.

Subscribe to change

A very smart way of matching up the amount of money you spend on entertainment to contributions to causes you care about.

Over 40 million Americans subscribe to Netflix, which means that ~$400 million dollars are taken out of our accounts monthly. Many Americans don’t even notice this. Imagine what could happen if we set up as many automatic contributions to help nonprofits do what they need to do.

Tentacular: Douglas Coupland on Helvetica, clip art and the gangly beast that is the internet

Douglas Coupland on web typography.

When I discuss the internet’s feel and its random rodeo of fonts, I think of the freedom, naivety, laziness, greed, cluelessness and skill I see there — it’s a cyberplace as wondrous as the bubbling cradle of pea-soup goo from which life emerged. The internet has a rawness, a Darwinian evolutionary texture. It’s a place where metrics totally unrelated to print typography dictate the look and feel.

29 Bullets

Russell wrote an article for Wired magazine all about PowerPoint, but this extended director’s cut on his own site is the real deal.

Who knew that the creator of PowerPoint was such an enthusiast for the concertina?

FormLinter—Detect common issues that hurt conversions

A little tool for testing common form issues.

• Did we remember to give every input a label? (No, placeholders are not an adequate replacement)?
• Do our labels’ for attributes match our inputs’ ids?
• Did we take advantage of the url, email, and password input types, or did we forget and just use text?
• Are our required fields marked as such?

My biggest takeaway from the second Offline Camp in Santa Margarita, CA — plus toast!

J. Renée Beach writes on Ev’s blog about three things to consider when planning for offline experiences:

• Freshness,
• Reach, and
• Assurance.

How will you express to your users that the content is up to date, safe and available across their network?

Designing for new digital rights

A series of quick’n’dirty prototypes to illustrate some of the design challenges involved in handling personal data:

• Data access tracker
• Data minimisation
• Guardian for digital identity
• Home privacy settings
• Portable shopping list
• Single trip insurance checker

If we don’t start exploring what the General Data Protection Regulation means for people, the same thing that happened with the cookie law will happen again.

These new rights have the potential to improve how our digital products and services work.

Free Icon Design Guide - Icon Utopia

Here you go: a free book on icon design in three parts, delivered via email.

You Are Not Paid to Write Code – Brave New Geek

Gall’s Fundamental Theorem of Systems is that new systems mean new problems. I think the same can safely be said of code—more code, more problems. Do it without a new system if you can

A cautionary tale of the risks involved with embracing new frameworks.

But when you introduce a new system, you introduce new variables, new failure points, and new problems.

…almost anything is easier to get into than out of.

Is Dark Matter Hiding Aliens?

Here’s a fun cosmic hypothesis on the scale of an Olaf Stapeldon story. There are even implications for data storage:

By storing its essential data in photons, life could give itself a distributed backup system. And it could go further, manipulating new photons emitted by stars to dictate how they interact with matter. Fronts of electromagnetic radiation could be reaching across the cosmos to set in motion chains of interstellar or planetary chemistry with exquisite timing, exploiting wave interference and excitation energies in atoms and molecules.

Unfathomable

A marvellous piece of writing and design. The family drama of two brothers who revolutionised the world of diving and salvage, told through beautifully typeset hypertext…

…which for some reason is rendered entirely using client-side JavaScript. Unfathomable indeed.

Usability Testing of Inline Form Validation: 40% Don’t Have It, 20% Get It Wrong - Articles - Baymard Institute

I saw Christian speak on this topic at Smashing Conference in Barcelona. Here, he takes a long hard look at some of the little things that sites get wrong when doing validating forms on the fly. It’s all good sensible stuff, although it sounds a bit medical when he takes about “Premature Inline Validation.”

Our World In Data

If you’re in need of some long-term perspective right now—because, let’s face it, the short-term outlook is looking pretty damn bleak—then why not explore some of Max Roser’s data visualisations? Have a look at some of the global trends in inequality, disease, hunger, and conflict.

CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout – Smashing Magazine

Rachel provides an in-depth comparison between flexbox and grid layout: what they have in common, and what their respective strengths are.

Don’t forget to enable the experiment web features flag in your browser if you want to see the examples in action.

State of the Web: Evaluating Technology | Jeremy Keith - Zeldman on Web & Interaction Design

Jeffrey likes the new talk I debuted at An Event San Francisco. That’s nice!

Summarizing it here is like trying to describe the birth of your child in five words or less. Fortunately, you can see Jeremy give this presentation for yourself at several upcoming An Event Apart conference shows in 2017.

Yay, science! The 7th annual Science Hack Day SF roundup

Science Hack Day’s mission is simply to get excited and make things with science, and that’s just what everyone did. One of the remarks I made at the start of this year’s event was about how building community is one of the best things to be involved in right now after the election, and especially connecting different communities together as Science Hack Day does. Exploration is not a solo endeavor and thus it’s less about what you explore and more about the act of exploring. In community exploration, we build strength, support, and safe spaces.

SmashingConf Barcelona 2016 - Jeremy Keith on Resilience on Vimeo

Here’s the video of the talk I gave at Smashing Conference in Barcelona last month—one of its last outings.

kdzwinel/progress-bar-animation: Making a Doughnut Progress Bar - research notes

This is a thorough write-up of an interesting case where SVG looks like the right tool for the job, but further research leads to some sad-making conclusions.

I love SVG. It’s elegant, scalable and works everywhere. It’s perfect for mobile… as long as it doesn’t move. There is no way to animate it smoothly on Android.

Results of the 2016 GOV.UK assistive technology survey | Accessibility

The Government Digital Service have published the results of their assistive technology survey, which makes a nice companion piece to Heydon’s survey. It’s worth noting that the most common assistive technology isn’t screen readers; it’s screen magnifiers. See also this Guardian article on the prevalence of partial blindness:

Of all those registered blind or partially sighted, 93% retain some useful vision – often enough to read a book or watch a film. But this can lead to misunderstanding and confusion

Custom Elements: an ecosystem still being worked out - Tales of a Developer Advocate

Really, really smart thinking from Paul here, musing on the power relationship between the creators of custom elements and the users of custom elements.

From Pages to Patterns – Charlotte Jackson - btconfBER2016 on Vimeo

The video of Charlotte’s excellent pattern library talk that she presented yesterday in Berlin.

How the internet works?

A really clear introduction to the pieces of a URL by Vera, who is setting out on her career as a front-end developer.

The Mob’s IT Department | Bloomberg Business

You just know that this will end up being made into a film one day. It’s like a downmarket Mr. Robot.

Accessibility Meetup: role=drinks

This Saturday afternoon—the day after FFConf—there’s an accessibility meet-up in the Caxton Arms here in Brighton with lighting talks (I’m planning to give one). ‘Twould be lovely to see you there.

antoinentl/web-books-initiatives: A list of different initiatives of web books.

A list of books that have been published in their entirety on the web. If you know of any others, please contribute.

“If it’s not curlable, it’s not on the web.” by Tantek Çelik

It was fun spelunking with Tantek, digging into some digital archeology in an attempt to track down a post by Ben Ward that I remembered reading years ago.

Typewriters in the Technical Museum in Figueres | Flickr

If you enjoyed reading Marcin’s serendipitous story on Twitter, here are the pictures to accompany it.

Bob Baxley: Don’t Judge. Just Observe. | Design.blog

The challenge of being in tech when you’re over 40 is the challenge of constantly setting aside your expectations of how things should work, repeatedly questioning your assumptions, and constantly re-evaluating your positions. It’s the challenge of being a lifelong learner; cultivating the humility of the beginner, the passion of the practitioner, and the joy of the master. It is the challenge of not being so quick to apply old analysis, rely on outdated experience, or expect what worked before to work again.

Create a MarkDown tag - JSFiddle

This is nice example of a web component that degrades gracefully—if custom elements aren’t supported, you still get the markdown content, just not converted to HTML.

<ah-markdown>
## Render some markdown!
</ah-markdown>

bitsofcode | Tools for Developing Accessible Websites

Ire rounds up a bunch of tools you can use to test accessibility, from dev tools to Tenon.

The Javascript Wars • cssence.com

Some more food for thought, following on from Shaun’s post about HTML as the foundation of web development:

There is another building block for the web, one that is more important than HTML, CSS and JavaScript combined. It all starts with URLs. Those things uniquely identify some piece of information on the web.

welcome.js | booktwo.org

See, view source is a human right. Since the beginning of the web, thousands, probably millions, of users have bootstrapped their way to technical understanding through exploring the way the existing web is put together. I did. You might have done. And you, we, should be able to. And more than that, we should be encouraged to. For fun, for experience, for education, for revolution.

James is right. And he’s made a script to encourage further exploration.

welcome.js adds a friendly message to the console when it’s first opened, as well as links for users to find out more about the console, and programming in general.

The Tragedy/Farce of the Open Web according to journalists – Baldur Bjarnason

Continuous web death.

The modern journalist is not an expert on the web. They and their colleagues have spent a large part of the last twenty-five years dismissing the open web at every stage. They are not the people you can trust to either accurately assess the web or to make usable websites. You can’t even trust them to make sensible decisions about web strategy. Just look at their damn websites!

Performance and assumptions | susan jean robertson

We all make assumptions, it’s natural and normal. But we also need to be jolted out of those assumptions on a regular basis to help us see that not everyone uses the web the way we do. I’ve talked about loving doing support for that reason, but I also love it when I’m on a slow network, it shows me how some people experience the web all the time; that’s good for me.

I’m privileged to have fast devices and fast, broadband internet, along with a lot of other privileges. Not remembering that privilege while I work and assuming that everyone is like me is, quite possibly, one of the biggest mistakes I can make.

Why I am a web developer | Seldo.Com Blog

I think it’s worth revisiting this post by Laurie on a regular basis for a shot of perspective and inspiration.

The web saved my life and then built me a new one. A single living entity, it touches everything in the world and is always getting better — and I can help. I owe it so much; if I can help it out, make it better in any small way, how can I possibly refuse? And if I can make it easier for other people to help make it better, then my efforts are multiplied.

Redesigning Waxy, 2016 edition – Waxy.org

Andy is sticking with the indie web.

Here, I control my words. Nobody can shut this site down, run annoying ads on it, or sell it to a phone company. Nobody can tell me what I can or can’t say, and I have complete control over the way it’s displayed. Nobody except me can change the URL structure, breaking 14 years of links to content on the web.

I second that emotion.

The New Digital School - An Alternative to Design Education by Tiago and Cláudia Pedras — Kickstarter

You can back Tiago’s excellent New Digital School. It’s a fantastic project with the web at its heart, and I really hope it gets funded.

What’s wrong with big data? | New Humanist

The view that more information uncritically produces better decisions is visibly at odds with our contemporary situation.

A superb piece of research and writing by James, skewering the technological determinism that underlies the current faith in “big data.” At best, this misplaced trust is inaccurate; at worst, it is deadly.

To the algorithmic imagination, the practice of journalism and the practice of terrorism appear to be functionally identical.

The Lost Art of HTML | shaunrashid.com

Building a good foundation using HTML is like building a good foundation for a house. Without it, you run the risk of having to deal with issues that are difficult and expensive to fix later on.

Mutating the active element - ally.js

Rodney has done some great research into how different browsers respond to a focusable element becoming inactive (by being made disabled, hidden, or removed).

The Digital Transition: How the Presidential Transition Works in the Social Media Age | whitehouse.gov

Kori Schulman describes the archiving of social media and other online artefacts of the outgoing US president. It’s a shame that a lot of URLs will break, but I’m glad there’s going to be a public backup available.

Best of all, you can get involved:

In the interim, we’re inviting the American public – from students and data engineers, to artists and researchers – to come up with creative ways to archive this content and make it both useful and available for years to come. From Twitter bots and art projects to printed books and query tools, we’re open to it all.

Web fonts, boy, I don’t know – Monica Dinculescu

Monica takes a look at the options out there for loading web fonts and settles on a smart asynchronous lazy-loading approach.