html

Today I learned that you can actually specify different hash algorithms for Subresource Integrity (SRI) hashes. If you aren’t familiar with SRI, this post does a good job explaining why it’s useful and how it would have mitigated the recent pollyfill.io incident. I needed to add the hashes to some scripts from a third party CDN that didn’t provide them and I came across this handy generator which let’s you choose which algorithm to use and defaults to SHA-384 and report-uri has a generator that just includes all 3 different hashes in the integrity value....

Today I learned that you can actually store state in the browser history via the history API (note this is not the query string). I came across in this post that uses it as a clever method for temporarily storing form data.

Today I learned that creating a nice drag-and-drop file component using vanilla javascript and the built web APIs is actually fairly easy. Smashing Magazine has an easy-to-follow example. The gist of it is that the browser gives you 'dragenter', 'dragover', 'dragleave' events that you can use to style your “dropzone” however you want and the drop event allows you to handle the files themselves: dropArea.addEventListener('drop', handleDrop, false) function handleDrop(e) { let dt = e....

Today I learned that iOS changed the way it handles the inputmode="numeric" attribute on HTML input elements. It used to display the full number keyboard as shown here: I couldn’t find it documented anywhere but, after testing various versions on BrowserStack, I found that starting with iOS 14 the numeric keyboard is the same as decimal but without the decimal key: This is overall an improvement in usability I think except if you need to allow the user to enter negative numbers....

Today I learned that the Backwards/forwards cache (BFCache) is a thing. This is the cache where the browser keeps a snapshot of a webpage so that it’s able to display almost instantly when a user clicks the back or forward buttons. This post gives a nice overview of the BFCache and how it works — apparently “Chrome usage data shows that 1 in 10 navigations on desktop and 1 in 5 on mobile are either back or forward”....

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 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 &thinsp; 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....

Today I learned that there’s now an HTML element called datalist that’s basically an autocomplete-like input element.