Links

6980 sparkline

Monday, November 20th, 2017

Happier HTML5 Form Validation - daverupert.com

Dave uses just a smidgen of JavaScript to whip HTML5’s native form validation into shape.

Instead of being prescriptive about error messaging, we use what the browser natively gives us.

Trolleys, veils and prisoners: the case for accessibility from philosophical ethics

The transcript of a presentation on the intersection of ethics and accessibility.

Sunday, November 19th, 2017

Empty States

A gallery of empty UIs. It reminds me of those galleries of clever 404 pages. Next step: a gallery of witty offline pages.

Teletype for Atom

A plug-in that lets multiple people collaborate on the same document in Atom. Could be useful for hackdays and workshops.

SpeechBoard | Home | The easiest way to edit podcasts

This is quite impressive—you edit the audio file by editing the transcript!

How the BBC News website has changed over the past 20 years - BBC News

Two decades redesigning/realigning the BBC News home page.

The Freedom to Associate » The Digital Antiquarian

A history of hypertext, from the memex to HyperCard.

Ten Years Old – CSS Wizardry

Congratulations on a decade of publishing on your own site—you’re a blogging wizard, Harry!

Having this website changed and shaped my career. If you don’t have a blog, I urge you, start working on one this weekend. Your own blog, with your own content, at your own domain. It might just change your life.

Saturday, November 18th, 2017

Orbital Reflector

Art. In. Spaaaaaace!

Orbital Reflector is a sculpture constructed of a lightweight material similar to Mylar. It is housed in a small box-like infrastructure known as a CubeSat and launched into space aboard a rocket. Once in low Earth orbit at a distance of about 350 miles (575 kilometers) from Earth, the CubeSat opens and releases the sculpture, which self-inflates like a balloon. Sunlight reflects onto the sculpture making it visible from Earth with the naked eye — like a slowly moving artificial star as bright as a star in the Big Dipper.

Using SVG as placeholders — More Image Loading Techniques - JMPerez Blog

Here’s a clever to technique to improve the perceived performance of image loading with a polygonal SVG placeholder.

Friday, November 17th, 2017

Animista

What a great way to play around with CSS animations!

This in JavaScript | Zell Liew

In the immortal words of Ultravox, this means nothing to me.

I’m filing this away for my future self for the next time I (inevitably) get confused about what this means in different JavaScript contexts.

Thursday, November 16th, 2017

The Burden of Precision | Daniel T. Eden, Designer

I think Dan is on to something here—design tools that offer pixel perfection at an early stage are setting us up for disappointment and frustration. Broad brushstrokes early on, followed by more precise tinkering later, feels like a more sensible approach.

With the help of a robust and comprehensive design system, I am certain that we could design in much broader strokes, and concentrate on making the finished product, rather than our design outputs, highly precise and reflective of our ideal.

Wednesday, November 15th, 2017

Constellation

Language conjures the world into being.

Just type stuff.

Relative Requirements – CSS Wizardry

I really like this exercise by Harry. I’ve done similar kinds of grading using dot-voting in the past. It feels like an early step to establishing design principles: “this over that.”

By deciding what we value up-front, we have an agreement that we can look back on in order to help us settle these conflicts and get us back on track again.

Relative Requirements remove the personal aspect of these disagreements and instead focuses on more objective agreements that we made as a team.

Eric’s Archived Thoughts: Declining Complexity in CSS

I think Eric is absolutely right. The barrier to entry for accomplishing what you want with CSS is much lower now. It only seems more complicated if you’re used to doing things the old way.

I envy “the kids”, the ones just starting to learn front end now. They’re likely never going to know the pain of float drop, or wrestling with inline blocks, or not being able to center along one axis. They’re going to roll their eyes when we old-timers start grumbling about the old days and say, “Floats?!? Who ever thought floats would be a good way to lay out a page? That’s totally not what they’re for, anyone can see that! Were you all high as a kite, or just utterly stupid?” You know, the way “the kids” talked ten years ago, except then it was about using tables for layout.

What makes a good design principle? || Matthew Ström: designer & developer

These are really good ideas for evaluating design principles. In fact, I would go so far as to say they are design principles for design principles.

  • Good design principles are memorable
  • Good design principles help you say no.
  • Good design principles aren’t truisms.
  • Good design principles are applicable.

Design Guidelines — The way products are built.

A collection of publicly available design systems, pattern libraries, and interface guidelines.