Today I learned that you can preload critical assets in a page by using the preload attribute on a link tag i.e. <link rel="preload">. Especially useful for things like fonts that are discovered later by the browser. Preload critical assets to improve loading speed
Today I learned that there is a Content-Security-Policy (CSP) directive connect-src that you can use to restrict all outgoing requests from your website to only the domains that you specify. This is a powerful mitigation against any kind of script injection attacks since no data can then be exfiltrated from your page. It applies to XMLHttpRequest (AJAX), WebSocket, fetch(), <a ping> or EventSource. CSP is an HTTP response header for enhancing the security of a site and there are of course several other directives you might want to enable. ...
Today I learned that you can disable an entire form by wrapping all the inputs in a <fieldset disabled>. You might think that you can disable a form with <form disabled> but unfortunately, the form element doesn’t have a disabled attribute. Fieldsets are typically used to group related form elements (and in some cases can improve accessibility) — so you can have multiple in a form and disable portions of the form separately. ...
Today I learned that there is an HTML entity called “thin space” that you can use when you need less space between two characters than the normal space. The HTML code is   Thin Space might be the most underrated HTML entity. It can be used for a name like J. K. Simmons. Without spacing, the J and K would seem too close together; with a regular space, they seem too far apart. Insert a thin space and it is just perfect. - Typography Manual ...
Today I learned that there’s now an HTML element called datalist that’s basically an autocomplete-like input element.
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). ...