Chris’ Corner: 10 HTML Hits

Love HTML? Good. It’s very lovable. One of my favorite parts is how you can screw it all up and it still it’s absolute best to render how it thinks you meant. Not a lot of other languages like that. Are there any? English, I suppose lolz. Anyway — I figured I’d just share 10 links about HTML that I’ve save because, well, I personally thought there were interesting and enjoyed learning what they had to teach.

1. The selected date must be within the last 10 years by Gerardo Rodriguez — That’s the requirement. How do you do it? Definitely use the HTML validation features for the date input. But unfortunately, JavaScript will need to be involved to set them, which means timezones and all that.
2. Just because you can doesn’t mean you should: the <meter> element by Sophie Koonin — I think the HTML
Heat the oven to <meter min="200" max="500" value="350">350 degrees</meter> is hilarious(ly silly). As Sophie puts it, this is the “letter, not the spirit, of semantic HTML.”
3. Fine-tuning Text Inputs by Garrett Dimon — One of those articles that reminds you that there are actually quite a few bonus attributes for HTML inputs and they are all actually pretty useful and you should consider using them.
4. How to think about HTML responsive images by Dan Cătălin Burzo — Speaking of loads of fairly complex attributes, it’s hard to beat responsive images in that regard. Always interesting to read something thinking through it all. This always leads me to the conclusion that it absolutely needs to be automated.
5. Styling an HTML dialog modal to take the full height of the viewport by Simon Willison — Sometimes unexpected browser styles can bite you. DevTools help uncover that of course… if you can see them. I was once very confused about weird behaving dialogs when I set it to be position: relative; (they are fixed by browser styles), so watch for that too.
6. Foundations: grouping forms with <fieldset> and <legend> by Demelza Feltham — “Accessible grouping benefits everyone”. Let’s clean up the weird styling of fieldset while we’re at it.
7. HTML Whitespace is Broken by Douglas Parker — I think a lot of us have a developed intuition of how HTML uses or ignores whitespace, but Douglas manages to point out some real oddities I hadn’t thought of clearly defining before. Like if there is a space both before and after a </a>, the space will collapse, but with the single space be part of the link or not? Formatters struggle with this as their formatting can introduce output changes. It’s one reason I like JSX because it’s ultra opinionated on formatting and how spacing is handled.
8. A highly configurable switch component using modern CSS techniques by Andy Bell — We’ve got <input type="checkbox" switch> coming (it’s in Safari now), but if you can’t wait you can build your own, as long as you are careful.
9. Building a progress-indicating scroll-to-top button in HTML and CSS by Manuel Matuzović — I like that trick where you can use scroll-driven animations to only reveal a “scroll back to the top” button after you’ve scrolled down a bit. I also like Manuel’s idea here where the button itself fills up as you scroll down. I generally don’t care for scroll progress indicators, but this is so subtle it’s cool.
10. Test-driven HTML and accessibility by David Luhr — I’ve written Cypress tests before and this echos of that but feels kinda lower level. It’s interesting looking at Server JavaScript executing DOM JavaScript with expect tests. I suppose it’s a bit like building your own aXe.