HTMLcat: 42 small, native web tricks worth remembering
HTMLcat collects 42 short, practical web development tips covering HTML, CSS, and JavaScript features often overlooked. Each post-it pairs a useful platform feature with a small example and the caveat that matters, noting limited or experimental support. The collection includes modern CSS selectors like :has() and :where(), the Popover API, View Transitions, and container queries, plus classic tricks like centering and hiding scrollbars. The site emphasizes testing with real browsers and assistive technology, keeping fallbacks for unsupported features.
HTML, CSS, and JavaScript can do more than we remember.
- m-s-y
Love when I go into a car dealership and get to read all about the different cars. Specially when the cars aren’t actually there. In fact there’s not even a picture of a single car. Yep that’s my jam.
- moontear
There are some good descriptions and hints, but what the site really needs is examples. Just looking at the code doesn't help me much. The descriptions are also mostly so short, that they could just as well be tooltips on the homepage.
The whole premise of the page is a collection of "web tricks worth remembering" and I can't fathom what bash (e.g. `du -hd 1 . | sort -hr`) is doing there.
- zeroq
Maybe it's just me, but it seems like a huge waste of time (or to be on a more positive note - potential).
Just the first example "Device type in JS".
"A coarse pointer does not mean “mobile”, and a fine pointer does not guarantee “desktop”. Ask the browser about input capabilities instead of guessing the device from its user agent."
const input = {
finePointer: matchMedia('(any-pointer: fine)').matches,
coarsePointer: matchMedia('(any-pointer: coarse)').matches,
canHover: matchMedia('(any-hover: hover)').matches,
};
So it doesn't tell me how to identify device type. It doesn't even run the code so I could quickly compare results between my mobile and desktop devices to establish a baseline.
- apples_oranges
please don't hide scrollbars :)
- herrherrmann
Neat! I like these opinionated lists, especially when it’s easy to browse and cherry-pick useful stuff. It’d be very good to mention how compatible the features are, though. Especially with newer CSS features, it’s easy to overestimate how ready they are for all browsers.
For that, there could just be links to the related MDN and/or caniuse.com pages.