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

Write HTML Like It's 1999

bradleytaunt.com

Post reply on HN
Print view View original

81–90 of 191 posts

Re: Write HTML Like It's 1999

#81

Post by GrantSolar »

adamwathan wrote: post #72
mdtusz wrote: post #57

Earlier quoted context omitted.

* { box-sizing: border-box; } I have never wanted anything other than this behaviour, so I pretty much always include it when starting on a fresh project.

Borders still affect the positioning of things even with box-sizing set to border-box. For example, here "Block 1" is still two pixels taller than "Block 2": Block 1 Block 2 https://jsfiddle.net/t4rkvfzx/

Does that really matter though? A difference of 2px for something temporary doesn't seem like much concern. While I understand the implication is that these can accumulate and cause larger layout issues, the purpose of this practice is to highlight those areas to remove that accumulation anyway

Re: Write HTML Like It's 1999

#82

Post by _bxg1 »

Really almost all of this comes down to, "don't use JavaScript to replace HTML". Everything else on this post derives from that one guideline. For example, "Implementing custom div layouts for forms while removing items like select or radio" is only possible if you're replacing native functionality with JavaScript.

Which is perfectly fine advice if you aren't doing anything really novel. You probably don't need a custom library for dropdowns or forms or whatever else and would gain performance, accessibility, and stability by hooking into the native versions instead.

The one part I disagree with is necessarily using in place of divs with CSS Grid. The latter is native and is a perfectly legitimate replacement, with some added benefits like responsiveness.

Also the title is a bit of a misnomer, because lots of the HTML features that allow you to forego JavaScript are pretty recent:

https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Fo...

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/da...

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/In...

Re: Write HTML Like It's 1999

#83

Post by salutonmundo »

numlock86 wrote: post #79

> To be clear, I’m not advocating for creating projects that look like they belong in the 1990s. Funny enough, only changing the body's background color to "lightgrey" and the font face to "serif" makes it look exactly like that.

it's better than "mid-2000s teenager"—purple on black with glitter gifs

Re: Write HTML Like It's 1999

#84

Post by _bxg1 »

trnglina wrote: post #12
whalesalad wrote: post #3

Instead of a border I tend to have a debug helper that adds a 1px outline of cyan or pink. To get the “bones” of a component or page. Good advice. Definitely sounds like captain obvious but it’s also something I think needs to be said.

And for anyone who isn't familiar with (what I would consider) the most important difference in this use-case: borders affect the positioning of other elements, whereas outlines do not. You don't want to be using a temporary border, since it can significantly affect the layout of your site when you remove it.

For this case of debugging, though, borders might actually be preferable because outlines would overlap, potentially obscuring the DOM depth

Re: Write HTML Like It's 1999

#85

Post by supermatt »

klogd wrote: post #78
asymptotically2 wrote: post #74

Earlier quoted context omitted.

You can upgrade your browser but you can't upgrade to a body that isn't disabled (yet)

I agree. But I mean it in the sense that they are a very low % of users and you have to ponder if it makes sense to spend the money to support them.

that would be discrimination. your country likely has laws to deal with this.

Re: Write HTML Like It's 1999

#87

Post by bryanrasmussen »

klogd wrote: post #78
asymptotically2 wrote: post #74

Earlier quoted context omitted.

You can upgrade your browser but you can't upgrade to a body that isn't disabled (yet)

I agree. But I mean it in the sense that they are a very low % of users and you have to ponder if it makes sense to spend the money to support them.

https://www.practicalecommerce.com/Accessibility-How-Many-Di...

Re: Write HTML Like It's 1999

#88

Post by thomasz »

klogd wrote: post #78
asymptotically2 wrote: post #74

Earlier quoted context omitted.

You can upgrade your browser but you can't upgrade to a body that isn't disabled (yet)

I agree. But I mean it in the sense that they are a very low % of users and you have to ponder if it makes sense to spend the money to support them.

Using semantic html like nav, list, header and so forth is basically free.

Re: Write HTML Like It's 1999

#89

Post by whalesalad »

trnglina wrote: post #12
whalesalad wrote: post #3

Instead of a border I tend to have a debug helper that adds a 1px outline of cyan or pink. To get the “bones” of a component or page. Good advice. Definitely sounds like captain obvious but it’s also something I think needs to be said.

And for anyone who isn't familiar with (what I would consider) the most important difference in this use-case: borders affect the positioning of other elements, whereas outlines do not. You don't want to be using a temporary border, since it can significantly affect the layout of your site when you remove it.

Yep, that is exactly why I do this! Great explanation.
Post reply on HN