Thank you for sharing, it's very helpful.
Small, native web tricks worth remembering
51–60 of 73 posts
Re: Small, native web tricks worth remembering
#52what would be cool is an llms.txt that i can feed to use these as most try to use React when they could just use html
Re: Small, native web tricks worth remembering
#53Maybe 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,
};
Re: Small, native web tricks worth remembering
#54Maybe 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, coarsePointe…
It has all the hallmarks of just telling an agent to scrape MDN and make a website
Re: Small, native web tricks worth remembering
#55Maybe 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, coarsePointe…
You’re right: it doesn’t identify the device type, so the title is misleading.
The intended point is that device type is often the wrong thing to detect: a touchscreen laptop may expose both coarse and fine pointers, while a tablet may be connected to a mouse or trackpad. The snippet detects available input capabilities instead, which is usually what the interface should respond to.
I wasn’t particularly careful with the titles, but this one should be "Detect input capabilities". Thanks for the heads-up!
Re: Small, native web tricks worth remembering
#56Best resource for proper HTML+CSS development is Jason Knight AKA deathshadow's CUTCODEDOWN (cutcodedown.com at Web archive) and his articles at Medium and CodePen (user Jason Knight).
How is an archived web site supposed to be a good resource on modern html and css development exactly?
The principles are the same: deliver content in an accesible way separating content from presentation, and if needed use javascript to improve usability, not to hijack basic site functionality.
Unfortunately he died in 2024, that's why the website is down. His last articles are available at Medium: https://deathshadow.medium.com/
These ones are a good starting point to develop accesible websites:
https://web.archive.org/web/20221117231315/https://cutcodedo... https://web.archive.org/web/20221117231314/https://cutcodedo...
Re: Small, native web tricks worth remembering
#57Maybe 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, coarsePointe…
It has all the hallmarks of just telling an agent to scrape MDN and make a website
It wasn’t, but I’d be curious to know what specifically gave you that impression.
Re: Small, native web tricks worth remembering
#58Maybe 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, coarsePointe…
The conclusion is wrong. The point of using these media queries is that:
1) You can only use tiny buttons with precise pointers.
2) You can only use hover popups with pointers that can actually hover.
In practice, much of this is too much work and everyone just designs for touchscreens instead. It's rare to find a website that even bothers with using title="" for tooltips because smartphones are a disaster of UI and lack tooltips.
Re: Small, native web tricks worth remembering
#59There 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.
fwiw I find `*` a lot easier in regular use than all of `-d 1 .`. It doesn't automatically expand to dotfiles but for regular typing, this advice looks like something you'd do if you're a robot or making an alias
It tells you which directory is the largest, including dot directories. You can then cd to the largest and run the exact same command again.
You can find out what's filled your disk just by following it. It's something I regularly do.
Re: Small, native web tricks worth remembering
#60[dead]