This little experiment creates a simple battery UI element, with its background an indicator of battery percentage remaining (plus percentage text): CodePen Experiment
The API provides a bunch of events we can hook into:
chargingchange – is the battery charging?
levelchange – percentage of battery remaining
chargingtimechange – amount of time until battery is charged (estimate)
dischargingtimechange – amount of time until batter is discharged (estimate)
All we need to do is check that we have support for the API and off we go:
Password fields usually mask their content, but is that really good UX?
UX challenges of password fields
User ‘loses their place’ forcing them to start entering the password again.
Password hard to type or complex, no visual guide to text being entered.
Difficulty in paste a password from elsewhere.
Difficult to visually check validity of password before submitting.
Hard to copy password elsewhere before submitting.
An increasingly common pattern is to allow the user to toggle the visibility of the password field content, which has a number of accessibility benefits.
Many users have password manager add-ons—such as LastPass—which may adapt the display of password fields, so we have to be careful when it comes to styling the field itself.
There’s a possibility that the browser could cache or save the state of the field in plain text, which would be a Bad Thing.
Taking point 2, we can be a little smarter about how we handle form submits and ensure we only ever submit password fields, regardless of a toggled display state. This prevents point 3.
By placing the toggle outside of the password field, we can avoid most visual clashes with add-ons or password managers, covering point 1.