html

Today I learned that disabled buttons are potentially bad for accessibility. I realized long ago that disabled buttons can be bad for UX but I just saw Chris Ferdinandi’s post Don’t Disable Buttons, and learned that disabled buttons aren’t focusable which means they don’t work well with screen readers or navigating with the keyboard. I usually recommend against disabling form submit buttons when there are validation errors because the user has no feedback as to why it’s disabled, but Chris gives the example of disabling while the form is being submitted (which I’ve probably done in the past) and he goes into detail about the issues with this approach and a good alternative....

Today I learned that in a web page, when you’re working with Blob or File objects you can call URL.createObjectURL() to create a Blob URL that can be used as the source for anything that normally takes a URL like images or download links. It’s also apparently a good alternative to base64 encoded Data-URIs especially when dealing with larger amounts of data since a base64 encoded file will be 33% larger than the raw binary....

Today I learned about the valueAsNumber property of html number inputs. So instead of having to parse the value like: const num = parseFloat(e.target.value) You can do: const num = e.target.valueAsNumber For example in react: return ( <input type="number" value={number} onChange={(e) => { // ✅ const num = e.target.valueAsNumber setNumber(num) }} /> ) Work With Number and Date Inputs in JavaScript

Today I learned about the <use> element and how you can use it to create SVG sprites. It turns out that my preferred way of working with svgs in react by embedding them in the components, is not great for performance or bundle size. But as Ben Adam’s post shows, it looks like inline svgs using sprites gives you the best performance to development experience tradoff.

I just discovered that there is a autocomplete="one-time-code" value you can use on mobile devices where the operating system will autopopulate the field with a code that the user receives via SMS. I haven’t had a chance to test it out but it seems pretty cool and I wish every banking site would just add this one html attribute (since they seem unable to add any MFA option other than SMS)....

Today I learned that autocomplete="off" tends to be completely ignored by browsers these days because they seem to have the attitude that websites don’t use it correctly. Apparently the best way to prevent a browser from trying to autofill a field is to tell the browser it’s not the field it thinks it is with something like autocomplete="something-else". If it’s anything the browser doesn’t recognize it won’t try to fill it....

Even if a button is hidden with display: none, if it has a type of submit then it will still be activated if it’s the first button in a form and a user hits enter in a form field. So it’s a good reason to always explicitly specify the type of a button since submit is the default but most of the time you want type="button". FYI there’s an eslint rule for this for react....