Tags: action

125

sparkline

A Todo List

A great step-by-step walkthrough by Heydon of making an accessible to-do list, the “Hello World” of JavaScript frameworks.

There’s a lot of great knowledge in here that can be applied to plenty of other interface elements too.

Strange Beasts on Vimeo

A small black mirror.

1968 Demo Interactive - Doug Engelbart Institute

A new way to enjoy the mother of all demos, organised into sections that you can jump between. This was put together by Douglas Engelbart’s daughter Christina, and Bret Victor.

Protest and persist: why giving up hope is not an option | World news | The Guardian

Hope is a belief that what we do might matter, an understanding that the future is not yet written.

Rebecca Solnit’s piece reminded me of something I mentioned a couple of year’s back when I referred to Margaret Atwood’s phrase “judicious hope”:

Hope sounds like such a wishy-washy word, like “faith” or “belief”, but it carries with it a seed of resistance. Hope, faith, and belief all carry connotations of optimism, but where faith and belief sound passive, even downright complacent, hope carries the promise of action.

Let’s Make the World We Want To Live In | Big Medium

Josh gives a thorough roundup of the Interaction ‘17 event he co-chaired.

“I think I’ve distilled what this conference is all about,” Jeremy Keith quipped to me during one of the breaks. “It’s about how we’ll save the world through some nightmarish combination of virtual reality, chatbots, and self-driving cars.”

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.

Hyper text. — Ethan Marcotte

Ethan looks back on Mandy’s talk from dConstruct 2014 which is more relevant than ever.

Rafaël Rozendaal - Formal characteristics of the browser

I really like this list of observations (Vasilis pointed it my way). I feel like it encapsulates some of what I was talking about in chapter two of Resilient Web Design. The only point I’d take issue with now is the very last one.

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.

You Might Not Need JavaScript

Una has put together a nice collection of patterns that use CSS for interactions. JavaScript would certainly be more suitable for many of these, but they still provide some great ideas for robust fallbacks.

Aria-Controls is Poop | HeydonWorks

I wrote a while back about how I switched from using a button to using a link for progressive disclosure patterns. That looks like it was a good move—if I use a button, I’d need to use aria-controls and, as Heydon outlines here, the screen reader support is pants.

City Objects

A catalogue of objects and observations from cities around the world.

Building better accessibility primitives

On the need for a way to mark parts of a document as “inert” while the user is interacting with modal content.

eBay MIND Patterns - GitBook

A very handy collection:

This book contains frontend coding patterns (and anti-patterns) that will assist developers in building accessible e-commerce web pages, widgets and workflows.

I like that it contains a list of anti-patterns too.

There’s also a corresponding collection of working demos.

You Don’t Need JavaScript for That!

A few common patterns—tooltips, fly-out menus, and toggles—that you can achieve with CSS.

Richard Dawkins, Mount Improbable: Play With Evolution

A lovely interactive demonstration of evolution, based on the original code Richard Dawkins used for Climbing Mount Improbable.

Frend — A collection of accessible, modern front-end components.

A nice little collection of interaction patterns with built-in accessibility and no dependencies.

Developing Dependency Awareness – Smashing Magazine

A typically superb article by Aaron. Here, he breaks down a resilient approach to building for the web by examining the multiple ways you could add a button to a page. There’s a larger lesson here too:

We don’t control where our web-based products go or how our users access them. All we can do is imagine as many less-than-perfect scenarios as possible and do our best to ensure our creations will continue to do what they’re supposed to do. One of the easiest ways to do that is to be aware of and limit our dependencies.

OOUX: A Foundation for Interaction Design · An A List Apart Article

I really, really like this approach. I’ve used something similar in my responsive design workshops, where I get people to break things down into nouns and verbs (objects and actions). I think there’s a lot of crossover with good URL design here too—this is kind of like REST for UX designers.

Interactive Form

I quite like this step-by-step interface for a form, all cleverly handled with the :focus pseudo-class. I’d want to refine some of the usability issues before using it in production, but the progressive disclosure is nice.