Tags: mind

11

sparkline

Monday, November 26th, 2018

Prototypes and production

When we do front-end development at Clearleft, we’re usually delivering production code, often in the form of a component library. That means our priorities are performance, accessibility, robustness, and other markers of quality when it comes to web development.

But every so often, we use the materials of front-end development—HTML, CSS, and JavaScript—to produce something that isn’t intended for production. I’m talking about prototyping.

There are plenty of non-code prototyping tools out there, and our designers often reach for them to communicate subtleties like motion design. But when it comes to testing a prototype with real users, it’s hard to beat the flexibility of HTML, CSS, and JavaScript. Load it up in a browser and away you go.

We do a lot of design sprints, where time is of the essence. The prototype we produce on the penultimate day of the sprint definitely won’t be production quality, but it will be good enough to test.

What’s interesting is that—when it comes to prototyping—our usual front-end priorities can and should go out the window. The priority now is speed. If that means sacrificing semantics or performance, then so be it. If I’m building a prototype and I find myself thinking “now, what’s the right class name for this component?”, then I know I’m in the wrong mindset. That question might be valid for production code, but it’s a waste of time for prototypes.

So these two kinds of work require very different attitudes. For production work, quality is key. For prototyping, making something quickly is what matters.

Whereas I would think long and hard about the performance impacts of third-party libraries and frameworks on a public project, I won’t give it a second thought when it comes to a prototype. Throw all the JavaScript frameworks and CSS libraries you want at it (although I would argue that in-browser technologies like CSS Grid have made CSS libraries like Bootstrap less necessary, even for prototyping).

Alternating between production projects and prototyping projects can be quite fun, if a little disorienting. It’s almost like I have to flip a switch in my brain to change tracks.

When a prototype is successful, works great, and tests well, there’s a real temptation to use the prototype code as the basis for the final product. Don’t do this! I’ve made that mistake in the past and it always ends badly. I ended up spending far more time trying to wrangle prototype code to a production level than if I had just started from a clean slate.

Build prototypes to test ideas, designs, interactions, and interfaces …and then throw the code away. The value of a prototype is in answering questions and testing hypotheses. Don’t fall for the sunk cost fallacy when it’s time to switch over into production mode.

Of course it should go without saying that you should never, ever release prototype code into production.

And yet…

More and more live sites seem to be built with a prototyping mindset. Weighty JavaScript frameworks are used regardless of appropriateness. Accessibility, if it’s even considered at all, is relegated to an afterthought. Fragile architectures are employed that rely on first loading and then executing JavaScript in order to render basic content. Developer experience is prioritised over user experience.

Heydon recently highlighted an article that offered this tip for aspiring web developers:

As for HTML, there’s not much to learn right away and you can kind of learn as you go, but before making your first templates, know the difference between in-line elements like span and how they differ from block ones like div.

That’s perfectly reasonable advice …if you’re building a prototype. But if you’re building something for public consumption, you have a duty of care to the end users.

Tuesday, June 12th, 2018

Resilient, Declarative, Contextual

This is really good breakdown of what’s different about CSS (compared to other languages).

These differences may feel foreign, but it’s these differences that make CSS so powerful. And it’s my suspicion that developers who embrace these things, and have fully internalized them, tend to be far more proficient in CSS.

Saturday, March 3rd, 2018

Battleship Solitaire: Mindless Podcast Companion

Once I got the hang of this game, I found it incredibly addictive. I would describe it as mindless fun, but I think it’s more like mindful fun: it has the same zen contemplative peacefulness as Sudoku. I can certainly see how it makes for a good activity while listening to podcasts.

Note: click once for water; double-click for ships. And don’t blame me if you lose hours of time to this game.

Saturday, October 7th, 2017

Virginia Heffernan on Learning to Read the Internet, Not Live in It | WIRED

A beautiful piece of writing from Virginia Heffernan on how to cope with navigating the overwhelming tsunami of the network.

The trick is to read technology instead of being captured by it—to maintain the whip hand.

Sunday, August 6th, 2017

Another Lens - News Deeply x Airbnb.Design

A series of questions to ask on any design project:

  • What are my lenses?
  • Am I just confirming my assumptions, or am I challenging them?
  • What details here are unfair? Unverified? Unused?
  • Am I holding onto something that I need to let go of?
  • What’s here that I designed for me? What’s here that I designed for other people?
  • What would the world look like if my assumptions were wrong?
  • Who might disagree with what I’m designing?
  • Who might be impacted by what I’m designing?
  • What do I believe?
  • Who’s someone I’m nervous to talk to about this?
  • Is my audience open to change?
  • What am I challenging as I create this?
  • How can I reframe a mistake in a way that helps me learn?
  • How does my approach to this problem today compare to how I might have approached this one year ago?
  • If I could learn one thing to help me on this project, what would that one thing be?
  • Do I need to slow down?

Wednesday, May 20th, 2015

The Desktop Conundrum - daverupert.com

I can relate 100% to what Dave is saying here:

I’m disenchanted with desktop. That conviction runs so deep, I groan when I see a desktop layout JPEG.

All too often we talk the talk about taking a mobile first approach, but we rarely walk the walk. Most designers and developers still think of the small-screen viewport as the exception, not the norm.

Sunday, August 10th, 2008

Who Framed George Lakoff? - ChronicleReview.com

A detailed look at the troubled history of George Lakoff, the father of conceptual metaphor.

Friday, March 14th, 2008

DOTHETEST

A brilliant piece of mindhacking for a good cause. Take the test for yourself and see if you can figure out where it's all leading.

Saturday, February 4th, 2006

pasta and vinegar » Be careful with Lego Mindstorms

Playing with Lego Mindstorms on a train can get you arrested in Germany.

Saturday, October 29th, 2005

Mr Angry and Mrs Calm

An optical illusion; a mind hack, if you will.

Friday, August 19th, 2005

eChalk colour perception

This is the most amazing optical effect in the world... or at least a good mind hack.