Small, native web tricks worth remembering

OuterVale

They're not really 'tricks' as much of mentions of assorted features of HTML and CSS. You get to discover a similar assortment of things (with much more immediately available detail and many examples) just clicking around MDN.

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.

hk__2

> Each post-it pairs one useful platform feature with a small example I can’t find a single example; each post-it just shows some code but not the result of it.

apples_oranges

please don't hide scrollbars :)

tylerius

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

vortegne

without demos this is mostly useless i think

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.

markuswagner

Super neat! Rare to see a genuinly actually useful opinionated list like this.

mrbluecoat

I'm always googling how to center with CSS.. bookmarked.

JodieBenitez

Nice tips there ! :)

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.

ChrisArchitect

Not to be confused with https://http.cat/

mceachen

"... that matters" is the new emdash

andai

What does native mean in this context?

nater5000

I'm not sure where the design for this site came from, but I hate that it brings you to a new page to show you something that could have probably fit in the big ass buttons on the first page lol. It took my by surprise the the card didn't flip over to show you the details and instead just navigated to a new page. I'm not a design guy- more of a backend, do everything in a TUI kind of guy- so if I'm caught off guard by a cheap UI/UX decision, then that's a serious problem.

robertoandred

And yet that site has horizontal scroll bars.

qqrun

Thank you for sharing, it's very helpful.

zuzululu

what 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

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.

Nifty3929

I really hate hiding scrollbars, and I think the warning on that "feature" misses an important point: The scrollbar is not just for scrolling - it also tells you where you are in the document, and roughly how much of it you can see. Tiny little slider toward the top - oh man, this is going to take a while. Huge slider - great, quick read. Slider toward the bottom - almost done! Please stop hiding scrollbars!