Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Tags to make HTML work like you expect

blog.jim-nielsen.com

Post reply on HN
Print view View original

191–200 of 248 posts

Re: Tags to make HTML work like you expect

#191

Post by keane »

wpollock wrote: post #135

I appreciate this post! I was hoping you would add an inline CSS style sheet to take care of the broken defaults. I only remember one off the top of my head, the rule for monospace font size. You need something like: code, pre, tt, kbd, samp { font-family: monospace, monospace; } But I vaguely remember there are other broken CSS defaults for links, img tags, and other stuff. An HTML 5 boilerplate guide should include…

Paired with H5BP you can use Normalize.css (as an alternative to a reset like http://meyerweb.com/eric/tools/css/reset/) found at https://github.com/necolas/normalize.css/blob/master/normali...

There's also this short reset: https://www.joshwcomeau.com/css/custom-css-reset/

Re: Tags to make HTML work like you expect

#193

Post by cluckindan »

rob wrote: post #59
aragonite wrote: post #29

Fun fact: both HN and (no doubt not coincidentally) paulgraham.com ship no DOCTYPE and are rendered in Quirks Mode. You can see this in devtools by evaluating `document.compatMode`. I ran into this because I have a little userscript I inject everywhere that helps me copy text in hovered elements (not just links). It does: [...document.querySelectorAll(":hover")].at(-1) to grab the innermost hovered element. It works…

I wish `dang` would take some time to go through the website and make some usability updates. HN still uses a font-size value that usually renders to 12px by default as well, making it look insanely small on most modern devices, etc. At quick glance, it looks like they're still using the same CSS that was made public ~13 years ago: https://github.com/wting/hackernews/blob/5a3296417d23d1ecc90...

I bet 99.9% of mobile users' hidden posts are accidentally hidden

Re: Tags to make HTML work like you expect

#194

Post by cluckindan »

reactordev wrote: post #106
Someone1234 wrote: post #93

Earlier quoted context omitted.

I trust dang a lot; but in general I am scared of websites making "usability updates." Modern design trends are going backwards. Tons of spacing around everything, super low information density, designed for touch first (i.e. giant hit-targets), and tons of other things that were considered bad practice just ten years ago. So HN has its quirks, but I'd take what it is over what most 20-something designers would turn…

Overall I would agree but I also agree with the above commenter. It’s ok for mobile but on a desktop view it’s very small when viewed at anything larger than 1080p. Zoom works but doesn’t stick. A simple change to the font size in css will make it legible for mobile, desktop, terminal, or space… font-size:2vw or something that scales.

It’s not ok for mobile. Misclicks all around if you don’t first pinch zoom to what you are trying to click.

Re: Tags to make HTML work like you expect

#195

Post by cluckindan »

sholladay wrote: post #81
eska wrote: post #55

Earlier quoted context omitted.

I’m not a blind person but I was curious about once when I tried to make a hyper-optimized website. It seemed like the best way to please screen readers was to have the navigation HTML come last, but style it so it visually comes first (top nav bar on phones, left nav menu on wider screens).

Props to you for taking the time to test with a screen reader, as opposed to simply reading about best practices. Not enough people do this. Each screen reader does things a bit differently, so testing real behavior is important. It's also worth noting that a lot of alternative input/output devices use the same screen reader protocols, so it's not only blind people you are helping, but anyone with a non-traditional s…

”Each screen reader does things a bit differently, so testing real behavior is important.”

Correction: each screen reader + os + browser combo does things a bit differently, especially on multilanguage React sites. It is a full time job to test web sites on screen readers.

If only there was a tool that would comprehensively test all combos on all navigation styles (mouse, touch, tabbing, screen reader controls, sip and puff joysticks, chin joysticks, eye trackers, Braille terminals, etc)… but there isn’t one.

Re: Tags to make HTML work like you expect

#196

Post by 5- »

reactordev wrote: post #106
Someone1234 wrote: post #93

Earlier quoted context omitted.

I trust dang a lot; but in general I am scared of websites making "usability updates." Modern design trends are going backwards. Tons of spacing around everything, super low information density, designed for touch first (i.e. giant hit-targets), and tons of other things that were considered bad practice just ten years ago. So HN has its quirks, but I'd take what it is over what most 20-something designers would turn…

Overall I would agree but I also agree with the above commenter. It’s ok for mobile but on a desktop view it’s very small when viewed at anything larger than 1080p. Zoom works but doesn’t stick. A simple change to the font size in css will make it legible for mobile, desktop, terminal, or space… font-size:2vw or something that scales.

> Zoom works but doesn’t stick.

perhaps try using a user agent that remembers your settings? e.g. firefox

Re: Tags to make HTML work like you expect

#197

Post by Etheryte »

brianzelip wrote: post #73

> ` ` The author might consider instead: ` `

Those two mean two very different things though, why would the author do that? Please see RFC 5646 [0], "en" means English without any further constraints, "en-US" means English as used in the United States.

[0] https://datatracker.ietf.org/doc/html/rfc5646

Re: Tags to make HTML work like you expect

#198

Post by nine_k »

rob wrote: post #59
aragonite wrote: post #29

Fun fact: both HN and (no doubt not coincidentally) paulgraham.com ship no DOCTYPE and are rendered in Quirks Mode. You can see this in devtools by evaluating `document.compatMode`. I ran into this because I have a little userscript I inject everywhere that helps me copy text in hovered elements (not just links). It does: [...document.querySelectorAll(":hover")].at(-1) to grab the innermost hovered element. It works…

I wish `dang` would take some time to go through the website and make some usability updates. HN still uses a font-size value that usually renders to 12px by default as well, making it look insanely small on most modern devices, etc. At quick glance, it looks like they're still using the same CSS that was made public ~13 years ago: https://github.com/wting/hackernews/blob/5a3296417d23d1ecc90...

Shameless plug: I made this userstyle to make HN comfortable to handle both on desktop and mobile. Minimal changes (font size, triangles, tiny bits of color), makes a huge difference, especially on a mobile screen.

https://userstyles.world/style/9931/

Re: Tags to make HTML work like you expect

#199

Post by busymom0 »

Aransentin wrote: post #4

Note that and auto-close and don't need to be terminated. Also, wrapping the tags in an actual is optional. You also don't need the quotes as long the attribute doesn't have spaces or the like; is OK. (kind of pointless as the average website fetches a bazillion bytes of javascript for every page load nowadays, but sometimes slimming things down as much as possible can be fun and satisfying)

If I don't close something I opened, I feel weird.

Re: Tags to make HTML work like you expect

#200

Post by VPenkov »

evilduck wrote: post #64
VPenkov wrote: post #24

Earlier quoted context omitted.

37 Signals [0] famously uses their own Stimulus [1] framework on most of their products. Their CEO is a proponent of the whole no-build approach because of the additional complexity it adds, and because it makes it difficult for people to pop your code and learn from it. [0]: https://basecamp.com/ [1]: https://stimulus.hotwired.dev/

It's impossible to look at a Stimulus based site (or any similar SSR/hypermedia app) and learn anything useful beyond superficial web design from them because all of the meaningful work is being done on the other side of the network calls. Seeing a "data-action" or a "hx-swap" in the author's original text doesn't really help anyone learn anything without server code in hand. That basically means the point is moot be…

Well you do learn that a no-build process can work at some scale, and you can see what tech stack is used and roughly how it works.

But regardless, I didn't mean to make any argument for or against this, I'm saying this was one of the points DHH made at some point.

Post reply on HN