Div Divisiveness
scottohara.me
scottohara.me
Given all the html created via a component like pseudo element, it further questions the value added imo.
Potentially unpopular opinion, but semantic HTML failed to adequately solve any problems it has set out to solve. Even selectors are better done via something like css modules anyway.
Sure the end compiled HTML is a mess, but that’s like complaining your bytecode or binary is messy. Who cares?
Long live div soup.
[EDIT] I'd to add that for the specific but now-niche use case of writing HTML by hand (which, in an editor with good tag completion and auto-formatting, I find almost as fast as, and far more powerful than, Markdown) semantic tags can be really nice.
» Facebook adds 5 divs, 9 spans and 30 css classes to every single post in the timeline to make it more difficult to identify and block 'Sponsored' posts, oh my.
Previously on hn, https://news.ycombinator.com/item?id=19115460
A true win for the opposition would be to study the literature for ad jamming techniques that would turn people against the advertised content, and alter the ads to be long term subconsciously unappealing / damaging. (eg. "McDonalds McRoach Sandwich")
Bonus points if it could unravel dark patterns, gamification, and engagement optimizations.
Everyone who downloads more data than necessary cares, or whose browser has to spend more battery power to parse that HTML, or who has to wait because you made a page that can't being rendered as it streams in, or any developer who needs to debug that mess in 2 years time because you couldn't write something simple and understandable and you've moved on to a new role.
(Not that any of those things are about semantic HTML specifically; they're more about caring about the structural output of your code.)
And come on, html parsing is the cheapest thing of all that happen there. The most of work goes into font rendering and jpeg decompression. Every paragraph adds CPU workload incomparable to any amount of divs, literally tens of thousands of calculations, if your system uses hinting, kerning, etc.
who has to wait because you made a page that can't being rendered as it streams in
This is just a personal preference. At the times of 14.4k and no-images button in the toolbar it was useful, but not today when you can download a megabyte per ping time. I like to see sites as they were intended to be seen and not jump around and change colors with every chunk of html or css. I actually hate sites like that.
No one likes layout shifting. There's no reason why a site should be jumping around just because the HTML is being rendered as it streams though. Stopping layout shift is more to do with prioritizing layout CSS (inlining important styles for example), avoiding dynamic content injection (eg server side rendering instead of lazy loading content) and providing proper hints to the browser about where things should go, how big things are, and so on.
That's what sites did do until the last two or three years. Now things are moving back to server side rendering because it's a tiny bit faster for some use cases.
It’s not a developer’s fault that there is no browser-way to load apps with particular requirements.
Browsers have exactly that functionality for a small set of requirements. https://developer.mozilla.org/en-US/docs/Web/HTTP/Client_hin...
First modern CSS destroyed semantic styling. Selectors are written using mostly class names and there is not consistency between article or header from one site to the next. Even buttons are different. Even on a single page there are probably instances where styling by element is undesirable.
Second, while there are plenty of tools out there to tell you that you have a11y errors, few developers see direct benefit to using semantic elements. Screen readers are difficult to use if you have spent a lifetime as a visual user and keyboard shortcuts still don’t seem to be there. Screen reader provide all sorts of nav options based on semantics, but visual mode users are usually stuck with Tab and maybe Arrows. Until visual users can clearly benefit from semantics, it will always be second class.
Third, it’s confusing. Webdev is already a pile of gotchas and obtuse footguns. Semantic HTML is another set of knowledge that developers need to memorize and only get feedback about when using analysis plugins. You can test when a button does or does not work, but it’s harder to test if your semantic HTML is correct.
Just make normal websites normally, and you'll get like 95% of the way there. Use button for buttons, links for links, etc. Actually put labels on form controls. The beauty of using HTML correctly is that everyone benefits from it.
Visual users clearly benefit from the semantics implied by visual styling. Space around content, borders, font changes, phrase-level changes like italics etc. These all layer subtlety, dimension, nuance and structure to a document/page/app. Visual users "get it for free".
If you took away all those things, visual users would feel the loss of context just as non-visual users do.
> modern CSS destroyed semantic styling.
Modern CSS methods didn't "destroy" semantic styling. Any kind of styling refines or highlights the semantics of the content it applies to. The modern techniques have sped up feature development for the visual-user subset. You can still use modern techniques and apply them to headers, sections, buttons, nav controls and so on.
Frankly, if you use the older CSS methods, you write less code to achieve most of the same goals.
.table { display: flex; }
.table-vert { display: flex; flex-direction: column; }
.cell-wide { flex-grow: 1; }
Are you telling me there are other ways to create websites?
It's a bit heavy on classes and css, and quickly grows into something that is hard to restructure when needed, but I find myself banging my head against intractable problems less often.
There is almost always a way to achieve what you want with flexbox.
Maybe we could try seperating the html template from the content as well?