User Interfaces for Variable Fonts · An A List Apart Article
A good introduction to variable fonts, and an exploration of the possible interface elements we might use to choose our settings: toggles? knobs? sliders? control pads?
Implementing a slider well
A look at the feedback needed for a slider control that feels “right”.
You can get most of the behavioural (though not styling) suggestions in HTML by doing this:
<form>
<input type="range" min="0" max="100" value="50"
onchange="amount.value=this.value"
onmousemove="amount.value=this.value">
<output name="amount">50</output>
</form>
Related links
How would you build Wordle with just HTML and CSS? | Scott Jehl, Web Designer/Developer
This is a great thought exercise in progressive enhancement …that Scott then turns into a real exercise!
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).
Progressively Enhanced Form Validation, Part 1: HTML and CSS – Cloud Four
A great reminder of just how much you can do with modern markup and styles when it comes to form validation. The :user-invalid and :user-valid pseudo-classes are particularly handy!
Why Chatbots Are Not the Future by Amelia Wattenberger
Of course, users can learn over time what prompts work well and which don’t, but the burden to learn what works still lies with every single user. When it could instead be baked into the interface.
Related posts
Pickin’ dates
HTML web components for augmenting date inputs.
Hanging punctuation in CSS
A little fix for Safari.
Progressive disclosure defaults
If you’re going to toggle the display of content with CSS, make sure the more complex selector does the hiding, not the showing.
Three attributes for better web forms
Better UX through better HTML: inputmode, enterkeyhint, and autocomplete.
Declarative design
Defining the inputs instead of trying to control the outputs.