6 ms·

Only s

135 points by lifthrasiir 3y ago

spott 3y ago
This is one massive blob of text in reader mode. No line breaks show up.
rrr_oh_man 3y ago
It's neat, but during my dabbling in web dev I've noticed that you can use basically <whatever>...</whatever> instead of divs, spans, sections, and it still mostly just works.
- CM30 3y ago
 Yeah, you could replace every single span on this page with almost any other HTML element and it'd work fine. But I guess onlylists or onlyh1s or onlybolds doesn't quite roll off the tongue as well.
 - kevindamm 3y ago
 onlys? onlysubs? onlyslots?
 - kevindamm 3y ago
 onlymarquees
 - rrr_oh_man 3y ago
 I honestly miss them
- bluefirebrand 3y ago
 Accessibility will be absolutely destroyed though
 - xpl 3y ago
 I am pretty sure in the end accessibility will more likely be solved by some smart LLMs (with vision) interpreting arbitrary web pages on the user side, rather than by web developers coding it by hand. Because the latter obviously doesn't universally work. I would pay money for a browser plugin that restyles every web page to a single readable/accessible design that I like. Think "Reader Mode" on steroids (that could transform arbitrary GUIs, not just blog posts).
 - interstice 3y ago
 Interesting idea, and I’d think mostly only limited by cost/speed per token currently
 - edent 3y ago
 In the end? Maybe. What about the people who can't use the web now?
 - dartos 3y ago
 > I would pay money for a browser plugin that restyles every web page to a single readable/accessible design that I like. Sometimes designs you don’t like are intentional.
 - btown 3y ago
 As much as I work painstakingly to implement highly intentional design systems… the browser should be your “user agent.” If it can agentically interpret semi-structured data to help you, it’s entirely the user’s right to have the browser do that for them.
 DaiPlusPlus 3y ago
 Except Chrome doesn’t support user-stylesheets - which is an outrage (even Internet Explorer supported them). I shouldn’t need to author my own Chrome extension just to set a minimum font-size on pages or disable fixed background images over remote-desktop.
- ivanjermakov 3y ago
 And you often don't even need a closing tag
- extraduder_ire 3y ago
 Aside from the spec wanting you to provide a schema, this is pretty much what xhtml aimed to do. The idea was that you could make the tags describe the content in them, and not have to rely on what's built into a common spec. HTML is and always was very error tolerant though.
 - hgyjnbdet 3y ago
 So XML in truth then?
 - formerly_proven 3y ago
 I think you're thinking about XML + XSLT transforming the domain XML into XHTML in the browser.
 - speedgoose 3y ago
 You can also attach a CSS to a XML document to specify how to present it. No need to touch XSLT.
 - SJC_Hacker 3y ago
 Its not simply styling, it goes beyond that. XML was/still intended to be the equivalent of JSON - just the data. With XSLT you created entirely new structure based on the underlying XML. The W3schools example is fairly decent https://www.w3schools.com/xml/xsl_intro.asp https://www.w3schools.com/xml/xsl_intro.asp Somehwhat similar to how component based JS frameworks work nowadays. Anyone who was using at a CSS equivalent was missing the point.
 - TazeTSchnitzel 3y ago
 You don't have to do it that way. You can embed arbitrary foreign (but appropriately namespaced) XML into an XHTML document and style it with CSS, untransformed. Or, as the sibling comment says, you can even avoid XHTML and style pure XML directly.
- MrVandemar 3y ago
 You can even make up your own tags, according to specific criteria, and they will been seen as spans. Eg: <my-dalek>EX-TER-MIN-ATE</my-dalek> You can style them, including setting them as block level elements. Where it can make life a lot easier is when you have a large number of nested divs. If you give the div's distinct names, it makes debugging/editing the source easier, which is probably required if you have that many divs.
- rezonant 3y ago
 It actually 100% works, just with the caveat that those elements receive display: contents by default.
- sprobertson 3y ago
 I think that is both the basic point of and minimizes the interesting point of the website - the actual element doesn't matter, it's the things you can do with them.
- dsego 3y ago
 You can 100% do this, invent your own tags, no need for React to have custom component names. And it works for styling with CSS, just use your custom tag as selector instead of css class. And then the classes can be used for shared styles.
 - 1f60c 3y ago
 When I was 12, I invented my own tag called <t> (I wanted something with no default styling but I didn't know how to do it).
 - blowski 3y ago
 What year was that? The custom tags thing used to have a lot more problems than it does now.
 - troupo 3y ago
 Browsers have always been lenient towards errors in markup. Unknown elements would just be rendered as or (can't remember which). Much later this was codified in HTML 5: if a browser doesn't know an element, it will render it as basically a span (that is, inline element with default styling IIRC).
 blowski 3y ago
 Up to IE7, non-standard elements couldn't be styled without a shiv.
 troupo 3y ago
 My memory doesn't extend that far back :) Even though I've been "in the biz" since early 2000s
- quectophoton 3y ago
 And if you're lucky, your `<whatever>` might even get upgraded from "you're using the wrong tag for that purpose" to "now your tag is mostly correct" .
- bazoom42 3y ago
 Yes you can do that and it will work. But for future-proofing you should use tag names with a dash in them (like <foo-whatever>) to avoid colissions if html adds an official <whatever> element in the future. (The html standard promises to never add an element with a dash in its name)
 - graypegg 3y ago
 Just to note the reasoning why they've promised that because I thought it was kinda interesting: https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name https://html.spec.whatwg.org/multipage/custom-elements.html#... Tag names with at least one hypen and two words either side are reserved for custom element use... with a few exceptions that I assume were part of the HTML/svg/mathml spec before the custom element registry. - annotation-xml - color-profile - font-face - font-face-src - font-face-uri - font-face-format - font-face-name - missing-glyph
gibbitz 3y ago
Tho I get the onlyfans reference, why not only ?
- Mordisquitos 3y ago
 I'm disappointed the author didn't use a Monty Python Spam Sketch reference — span, span, span, span and span.
zamalek 3y ago
This is basically what was happening late 90s and early 2000s, except with the div. ARIA didn't exist at the time so this presented a major accessibility issue. We now have ARIA, but the "use the right element" cargo cult persists [there's nothing wrong with this cargo cult - it just fits the definition, CSSing it up is just as functional sans older and possibly text browsers]. Edit: it's also where table got a bad rap (for a while table wasn't even used for tables, it was completely taboo). Using table for layout completely wrecked accessibility.
- resonious 3y ago
 I still see a lot of fresh React/Vue code that is all divs with onclick handlers.
- CSSer 3y ago
 I don’t think it fits the definition of a cargo cult. It’s about convenience. I can use a <header /> and the screen reader announces it as such. I could do that with ARIA, but why put in the extra effort? To use a more gross example, I could make a div into a text input or even a form with contenteditable, a bunch of CSS I’d otherwise get out of the box, and a lot of JS. Yet it would require much more work. The only thing I’ll grant you is that my first example’s benefit is a marginal difference, but there is a benefit nonetheless. It was also probably pushed as much for the screen reader benefit as it was for the ability to parse and extract information if I’m feeling cynical, but I digress.
favorited 3y ago
And this https://imgur.com/2gF1cfl https://imgur.com/2gF1cfl is how all those <spans> look in Reader mode.
- dredmorbius 3y ago
 Utterly broken in terminal-based browsers as well.
deleted 3y ago
[deleted]
spenceryonce 3y ago
lol, I enjoyed this greatly. Ended up spending the last hour making my own version of this site. Thoroughly enjoyed.
datascienced 3y ago
This spiritually equivalent to tailwind
grodriguez100 3y ago
This is fun to see as an experiment but hopefully nobody does this in real life. This breaks accessibility, reader mode, screen readers, etc.
- blowski 3y ago
  I don't really know much about this area of UI. Can you explain why this breaks accessibility? I did load it in reader mode (macOS Safari), and there were no paragraph breaks - is that similar to the experience of a screen reader?
  - bropher 3y ago
    See this short section on semantic html: https://developer.mozilla.org/en-US/docs/Glossary/semantics#semantics_in_html https://developer.mozilla.org/en-US/docs/Glossary/semantics#...
  - troupo 3y ago
    Screen readers know how to deal with common page elements. So they know how to announce and interact with page breaks, headers, lists, buttons, links etc. If everything is a span, everything becomes just text. It doesn't only apply to screen readers. Regular actions like keyboard navigation becomes broken. For example, on the page, you cannot tab between "click to expand" "buttons". And so on and so on :)
    - jmhammond 3y ago
      In case someone happens to read my comment down here, I just want to highlight > actions like keyboard navigation becomes broken is also an accessibility issue. Not everyone can use a mouse. Keyboard navigation should be the easiest possible thing to test and ensure works…
      - troupo 3y ago
        Indeed. Good accessibility benefits everyone, even the non-disabled people. And that's even before we start the whole discussion on how everyone will be disabled at one point or another in their lives and so on :)
windowshopping 3y ago
Yeah, it was a big learning moment for me as a web developer when I learned that elements could be reshaped to function however you wanted, and none of their intrinsic properties were set in stone aside from content categories. See also: https://stackoverflow.com/questions/30062864/where-do-the-bullets-come-from-on-li-elements https://stackoverflow.com/questions/30062864/where-do-the-bu...
cantSpellSober 3y ago
Is there a practical application for this? > External scripts can be fetched and evaluated using `eval` No! `eval` has some legitimate use cases, but generally should be avoided: https://www.digitalocean.com/community/tutorials/js-eval#reasons-to-avoid-using-eval https://www.digitalocean.com/community/tutorials/js-eval#rea...

135 points by lifthrasiir 3y ago

This is one massive blob of text in reader mode. No line breaks show up.

It's neat, but during my dabbling in web dev I've noticed that you can use basically <whatever>...</whatever> instead of divs, spans, sections, and it still mostly just works.

CM30 3y ago
Yeah, you could replace every single span on this page with almost any other HTML element and it'd work fine. But I guess onlylists or onlyh1s or onlybolds doesn't quite roll off the tongue as well.
- kevindamm 3y ago
 onlys? onlysubs? onlyslots?
 - kevindamm 3y ago
 onlymarquees
 - rrr_oh_man 3y ago
 I honestly miss them
bluefirebrand 3y ago
Accessibility will be absolutely destroyed though
- xpl 3y ago
  I am pretty sure in the end accessibility will more likely be solved by some smart LLMs (with vision) interpreting arbitrary web pages on the user side, rather than by web developers coding it by hand. Because the latter obviously doesn't universally work. I would pay money for a browser plugin that restyles every web page to a single readable/accessible design that I like. Think "Reader Mode" on steroids (that could transform arbitrary GUIs, not just blog posts).
  - interstice 3y ago
    Interesting idea, and I’d think mostly only limited by cost/speed per token currently
  - edent 3y ago
    In the end? Maybe. What about the people who can't use the web now?
  - dartos 3y ago
    > I would pay money for a browser plugin that restyles every web page to a single readable/accessible design that I like. Sometimes designs you don’t like are intentional.
    - btown 3y ago
      As much as I work painstakingly to implement highly intentional design systems… the browser should be your “user agent.” If it can agentically interpret semi-structured data to help you, it’s entirely the user’s right to have the browser do that for them.
      - DaiPlusPlus 3y ago
        Except Chrome doesn’t support user-stylesheets - which is an outrage (even Internet Explorer supported them). I shouldn’t need to author my own Chrome extension just to set a minimum font-size on pages or disable fixed background images over remote-desktop.
ivanjermakov 3y ago
And you often don't even need a closing tag
extraduder_ire 3y ago
Aside from the spec wanting you to provide a schema, this is pretty much what xhtml aimed to do. The idea was that you could make the tags describe the content in them, and not have to rely on what's built into a common spec. HTML is and always was very error tolerant though.
- hgyjnbdet 3y ago
  So XML in truth then?
- formerly_proven 3y ago
  I think you're thinking about XML + XSLT transforming the domain XML into XHTML in the browser.
  - speedgoose 3y ago
    You can also attach a CSS to a XML document to specify how to present it. No need to touch XSLT.
    - SJC_Hacker 3y ago
      Its not simply styling, it goes beyond that. XML was/still intended to be the equivalent of JSON - just the data. With XSLT you created entirely new structure based on the underlying XML. The W3schools example is fairly decent https://www.w3schools.com/xml/xsl_intro.asp https://www.w3schools.com/xml/xsl_intro.asp Somehwhat similar to how component based JS frameworks work nowadays. Anyone who was using at a CSS equivalent was missing the point.
  - TazeTSchnitzel 3y ago
    You don't have to do it that way. You can embed arbitrary foreign (but appropriately namespaced) XML into an XHTML document and style it with CSS, untransformed. Or, as the sibling comment says, you can even avoid XHTML and style pure XML directly.
MrVandemar 3y ago
You can even make up your own tags, according to specific criteria, and they will been seen as spans. Eg: <my-dalek>EX-TER-MIN-ATE</my-dalek> You can style them, including setting them as block level elements. Where it can make life a lot easier is when you have a large number of nested divs. If you give the div's distinct names, it makes debugging/editing the source easier, which is probably required if you have that many divs.
rezonant 3y ago
It actually 100% works, just with the caveat that those elements receive display: contents by default.
sprobertson 3y ago
I think that is both the basic point of and minimizes the interesting point of the website - the actual element doesn't matter, it's the things you can do with them.
dsego 3y ago
You can 100% do this, invent your own tags, no need for React to have custom component names. And it works for styling with CSS, just use your custom tag as selector instead of css class. And then the classes can be used for shared styles.
- 1f60c 3y ago
 When I was 12, I invented my own tag called <t> (I wanted something with no default styling but I didn't know how to do it).
 - blowski 3y ago
 What year was that? The custom tags thing used to have a lot more problems than it does now.
 - troupo 3y ago
 Browsers have always been lenient towards errors in markup. Unknown elements would just be rendered as or (can't remember which). Much later this was codified in HTML 5: if a browser doesn't know an element, it will render it as basically a span (that is, inline element with default styling IIRC).
 - blowski 3y ago
 Up to IE7, non-standard elements couldn't be styled without a shiv.
 troupo 3y ago
 My memory doesn't extend that far back :) Even though I've been "in the biz" since early 2000s
quectophoton 3y ago
And if you're lucky, your `<whatever>` might even get upgraded from "you're using the wrong tag for that purpose" to "now your tag is mostly correct" .
bazoom42 3y ago
Yes you can do that and it will work. But for future-proofing you should use tag names with a dash in them (like <foo-whatever>) to avoid colissions if html adds an official <whatever> element in the future. (The html standard promises to never add an element with a dash in its name)
- graypegg 3y ago
 Just to note the reasoning why they've promised that because I thought it was kinda interesting: https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name https://html.spec.whatwg.org/multipage/custom-elements.html#... Tag names with at least one hypen and two words either side are reserved for custom element use... with a few exceptions that I assume were part of the HTML/svg/mathml spec before the custom element registry. - annotation-xml - color-profile - font-face - font-face-src - font-face-uri - font-face-format - font-face-name - missing-glyph

gibbitz 3y ago

Tho I get the onlyfans reference, why not only ?

Mordisquitos 3y ago
I'm disappointed the author didn't use a Monty Python Spam Sketch reference — span, span, span, span and span.

zamalek 3y ago

This is basically what was happening late 90s and early 2000s, except with the div. ARIA didn't exist at the time so this presented a major accessibility issue. We now have ARIA, but the "use the right element" cargo cult persists [there's nothing wrong with this cargo cult - it just fits the definition, CSSing it up is just as functional sans older and possibly text browsers]. Edit: it's also where table got a bad rap (for a while table wasn't even used for tables, it was completely taboo). Using table for layout completely wrecked accessibility.

resonious 3y ago
I still see a lot of fresh React/Vue code that is all divs with onclick handlers.
CSSer 3y ago
I don’t think it fits the definition of a cargo cult. It’s about convenience. I can use a <header /> and the screen reader announces it as such. I could do that with ARIA, but why put in the extra effort? To use a more gross example, I could make a div into a text input or even a form with contenteditable, a bunch of CSS I’d otherwise get out of the box, and a lot of JS. Yet it would require much more work. The only thing I’ll grant you is that my first example’s benefit is a marginal difference, but there is a benefit nonetheless. It was also probably pushed as much for the screen reader benefit as it was for the ability to parse and extract information if I’m feeling cynical, but I digress.

favorited 3y ago

And this https://imgur.com/2gF1cfl https://imgur.com/2gF1cfl is how all those <spans> look in Reader mode.

dredmorbius 3y ago
Utterly broken in terminal-based browsers as well.

deleted 3y ago

[deleted]

spenceryonce 3y ago

lol, I enjoyed this greatly. Ended up spending the last hour making my own version of this site. Thoroughly enjoyed.

datascienced 3y ago

This spiritually equivalent to tailwind

grodriguez100 3y ago

This is fun to see as an experiment but hopefully nobody does this in real life. This breaks accessibility, reader mode, screen readers, etc.

blowski 3y ago
I don't really know much about this area of UI. Can you explain why this breaks accessibility? I did load it in reader mode (macOS Safari), and there were no paragraph breaks - is that similar to the experience of a screen reader?
- bropher 3y ago
  See this short section on semantic html: https://developer.mozilla.org/en-US/docs/Glossary/semantics#semantics_in_html https://developer.mozilla.org/en-US/docs/Glossary/semantics#...
- troupo 3y ago
  Screen readers know how to deal with common page elements. So they know how to announce and interact with page breaks, headers, lists, buttons, links etc. If everything is a span, everything becomes just text. It doesn't only apply to screen readers. Regular actions like keyboard navigation becomes broken. For example, on the page, you cannot tab between "click to expand" "buttons". And so on and so on :)
  - jmhammond 3y ago
    In case someone happens to read my comment down here, I just want to highlight > actions like keyboard navigation becomes broken is also an accessibility issue. Not everyone can use a mouse. Keyboard navigation should be the easiest possible thing to test and ensure works…
    - troupo 3y ago
      Indeed. Good accessibility benefits everyone, even the non-disabled people. And that's even before we start the whole discussion on how everyone will be disabled at one point or another in their lives and so on :)

windowshopping 3y ago

Yeah, it was a big learning moment for me as a web developer when I learned that elements could be reshaped to function however you wanted, and none of their intrinsic properties were set in stone aside from content categories. See also: https://stackoverflow.com/questions/30062864/where-do-the-bullets-come-from-on-li-elements https://stackoverflow.com/questions/30062864/where-do-the-bu...

cantSpellSober 3y ago

Is there a practical application for this? > External scripts can be fetched and evaluated using `eval` No! `eval` has some legitimate use cases, but generally should be avoided: https://www.digitalocean.com/community/tutorials/js-eval#reasons-to-avoid-using-eval https://www.digitalocean.com/community/tutorials/js-eval#rea...

Only <SPAN>s

Only <SPAN>s