Html

Do not download the app, use the website

A Friendly Introduction to SVG • Josh W. Comeau This is another great tutorial from Josh on the basics of SVG markup! If you want to go further, this is an awesome interactive site for understanding SVG paths: Understanding SVG paths

Building Websites With LLMS I’ve mentioned the new view transitions API before, Jim Nielsen has a great post (with a fun bait-and-switch title) where he takes it to the next level and shows how you can use cross-document transitions to take a site with regular ole html pages and make it feel like a SPA or native app.

Today I learned that you can now create an “exclusive accordion”, meaning only one section of the accordion is open at a time, using just html with the details element. All you need to do is add a matching name attribute to each <details> element you want to be considered part of the same “group”: <details name="faq"> <summary>Section 1</summary> <p> Section 1 details </p> </details> <details name="faq"> <summary>Section 2</summary> <p> Section 2 details </p> </details> Note, the <details> element has been widely supported since 2020 but support for the name attribute was only added last year. ...

Thanks to James’ post, today I learned that you can use the <picture> to display different images based on whether or not the set a preference for light or dark mode. The key is using the prefers-color-scheme CSS media query <picture> <source media="(prefers-color-scheme: dark)" srcset=" https://user-images.githubusercontent.com/25423296/163456776-7f95b81a-f1ed-45f7-b7ab-8fa810d529fa.png " /> <img alt="Shows an illustrated sun in light color mode and a moon with stars in dark color mode." src="https://user-images.githubusercontent.com/25423296/163456779-a8556205-d0a5-45e2-ac17-42d089e3c3f8.png" /> </picture> Since HTML is valid in markdown, you can easily use this technique in a number of places including Github—which apparently has allowed the use of the picture element since 2022. This is much better than the custom syntax they had before. ...

Today I learned that if you have a single text field in a form then browsers will automatically submit it when you press enter. <form> <label> Search <input type="text"> </label> </form> This is kinda handy since normally you need to add a submit button to be able to submit a form — but, you should be aware that if you add another field then you do need to add a submit button for the form to work. ...

Apparently in Safari, setSelectionRange() will focus the element even when not focused despite MDN stating that “The element must be focused for the call to have any effect”. According to this bug, this is considered intended behavior even though it’s inconsistent with MDN and the other browsers. It’s worth noting though, during my testing, I noticed that Chrome/Firefox will update the selection and cursor position you just won’t see it unless you programmatically call .focus() on the element. ...

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