UI Pattern: Natural Language Form

I only just found this article about those “mad libs” style forms that I started with Huffduffer.

UI Pattern: Natural Language Form

Tagged with

Related links

Registration | Frontend 2011

A nice Huffduffer-style mad libs form gives this registration form a friendly quality.

Tagged with

Cooper Journal: A bit of structure for craigslist posting?

An interesting proposal for a Huffduffer-style mad-libs ad-posting form for Craigslist.

Tagged with

CSS Form Control Styling Level 1

This looks like a really interesting proposal for allowing developers more control over styling inputs. Based on the work being done the customisable select element, it starts with a declaration of appearance: base.

Tagged with

SCALABLE: Save form data to localStorage and auto-complete on refresh

When I was in Amsterdam I was really impressed with the code that Rose was writing and I encouraged her to share it. Here it is: drop this script into a web page with a form to have its values automatically saved into local storage (and automatically loaded into the form if something goes wrong before the form is submitted).

Tagged with

How To Build Resilient JavaScript UIs — Smashing Magazine

The opening paragraphs of this article should be a mantra recited by every web developer before they begin their working day:

Things on the web can break — the odds are stacked against us. Lots can go wrong: a network request fails, a third-party library breaks, a JavaScript feature is unsupported (assuming JavaScript is even available), a CDN goes down, a user behaves unexpectedly (they double-click a submit button), the list goes on.

Fortunately, we as engineers can avoid, or at least mitigate the impact of breakages in the web apps we build. This however requires a conscious effort and mindset shift towards thinking about unhappy scenarios just as much as happy ones.

I love, love, love the emphasis on reducing assumptions:

Taking a more defensive approach when writing code helps reduce programmer errors arising from making assumptions. Pessimism over optimism favours resilience.

Hell, yeah!

Accepting the fragility of the web is a necessary step towards building resilient systems. A more reliable user experience is synonymous with happy customers. Being equipped for the worst (proactive) is better than putting out fires (reactive) from a business, customer, and developer standpoint (less bugs!).

Tagged with

Related posts

The datalist element on iOS

Some buggy behaviour has been fixed in iOS 18 but now there’s a new bit of weirdness.

Three attributes for better web forms

Better UX through better HTML: inputmode, enterkeyhint, and autocomplete.

Accent all areas

A small but important addition to CSS.

Drag’n’drop revisited

An easy accessibility fix, courtesy of my past self.

Deceptive dark patterns

A modest proposal for incrementally adjusting our terminology.