How to Optimize Viewport for Mobile for Faster Interactions | DebugBear If the viewport isn’t configured properly (e.g., the meta tag has a fixed value), mobile browsers delay all responses by up to 300 milliseconds. As a result, users will have to wait after each tap, the UI will feel sluggish, and Interaction to Next Paint (INP) scores will increase dramatically.
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.