Adaptive Placeholders

See the Pen Adaptive Placeholder by Danny King on CodePen.

We’ve seen some floated labels before: when focussing a form field the placeholder seems to move towards a spot above the field.

Adaptive placeholders goes a step further by also allowing one to change the text when something was entered into the field.

Makes clever use of pointer-events: none;, the :valid psuedo-selector, and the adjacent sibling selector (viz. +).

Adaptive Placeholders →

zxcvbn: realistic password strength estimation

meter_screenshot

Simplistic strength estimation gives bad advice. Without checking for common patterns, the practice of encouraging numbers and symbols means encouraging passwords that might only be slightly harder for a computer to crack, and yet frustratingly harder for a human to remember.

zxcvbn, named after a crappy password, is a JavaScript password strength estimation library. Use it to implement a custom strength bar on a signup form near you!

correct horse battery staple 😉

zxcvbn: realistic password strength estimation →
zxcvbn demo →

Form.requestAutocomplete()

In a world of WebGL, WebRTC and other fancy web APIs that start with “Web”, requestAutocomplete is rather unglamorous. However, it’s a superhero in beige clothing. A tiny, boring API that can stick a stake through the heart of the web payments time-vampire.

requestAutocomplete – take my money, not my time →

jQuery.suggest

jQuery.suggest is a simple inline autosuggest jQuery plugin. It takes an array of terms as haystack and suggests the user the first item that matches what has been typed to this point. The suggestion is updated with every keystroke. Tab or Enter will accept the suggestion and update the input field accordingly.

jQuery.suggest →