Html

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.dataTransfer let files = dt.files // implement with your preferred upload method uploadFiles(files) } The dragevent and dataTransfer interface have been supported in modern browsers for some time so they are pretty safe to use. ...

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: ...

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