React: You May Not Need Controlled Form Components

To work with forms in React two approaches are to either use Controlled Components or use Uncontrolled Components (as detailed here). Swyx shares a third way of working with forms: A lower friction way to handle form inputs is to use HTML name attributes. As a bonus, your code often turns out less React specific! […]

Why you should probably avoid using <input type="number" />

The fine folks at GOV.UK: Until now, the GOV.UK Design System date input component used the HTML element <input type=”number” /> to provide a number keypad when a user enters dates. However, we recently moved away from <input type=”number”> to <input type=”text” inputmode=”numeric” pattern="[0-9]*"> Why the GOV.UK Design System team changed the input type for […]

Netlify Forms – Manage forms and submissions without any server-side code

Wow, this is an awesome addition to Netlify: On Netlify, any HTML form can instantly accept submissions—no backend code or infrastructure required. As soon as your form is deployed, you start seeing submissions appear in your Netlify dashboard. Just add the netlify attribute to any form and everything gets wired up automatically. Netlify will automatically […]

HTML attributes to improve your users’ two factor authentication experience

There are plenty of opportunities for friction in the user experience when logging in, particularly while entering a two factor authentication code. As developers we should be building applications that support the need for account security but don’t detract from the user experience. Sometimes it can feel as though these requirements are in a battle […]

React Hook Form – Form Validation Hook based on Uncontrolled Components

Now this is an interesting approach, building further upon Uncontrolled Components: The React Hook Form (react-hook-form) library provides a new form validation mechanism which embraces uncontrolled form validation and support controlled components. The core idea is to register HTML input’s ref into the custom hook and therefore subscribe to its input value, validate and evaluate […]

Making a Better Custom Select Element

24ways – the advent calendar for web geeks – is back! First post is “Making a Better Custom Select Element” in which Julie Grundy tries to create an accessible Custom Select Element: Sometimes, I can’t recommend the select input. We want a way for someone to choose an item from a list of options, but […]

An HTML attribute potentially worth $4.4M to Chipotle

Jason Grigsby: I recently found myself racing to fill out Chipotle’s online order form before my mother could find her credit card. In the process, I discovered a bug that could cost Chipotle $4.4 million annually. The form didn’t play nice with autocomplete and therefore would not get sent … The culprit? A JS library […]

Clicking Buttons: Inconsistent behavior across browsers

Great research by Zell Liew: I noticed browsers were inconsistent in how they handle a click on <button>. Some browsers choose to focus on the button. Some browsers don’t. In this article, I want to show you my test and findings. Then, I want to talk about a way to overcome these inconsistencies. Great to […]

Hierarchic Indeterminate Checkboxes with JavaScript (Vanilla)

Earlier today Chris Coyier tweeted that he was in the process of rewriting one of his pens without jQuery: Been trying to re-write this without jQuery: https://t.co/xvsZMKsfvL I’m like 70% there but haven’t quite gotten it. jQuery is doing so much helpful DOM traversal here it’s a pain in the ass without it. — Chris […]