6 ms·

The <detail> <summary> Title </summary> Content </detail> tag allows you to do that iirc. I use it on my site and works fine t

by sdan 6y ago

The <detail> <summary> Title </summary> Content </detail> tag allows you to do that iirc. I use it on my site and works fine to hide things that you can expand upon when clicked.

dharmab 6y ago
It even works in GitHub Markdown: I use it to put long code snippets/examples into a fold.
- llbeansandrice 6y ago
  Oh no way. Going to have to use this
  - sillysaurusx 6y ago
    Somehow it takes 4 seconds to un-collapse a toplevel comment in Chrome. E.g. this one: https://teddit.net/r/Bossfight/comments/k6vh5v/bearers_of_the_eternal_duel/genbcos/ https://teddit.net/r/Bossfight/comments/k6vh5v/bearers_of_th... Pages also seem to take around 10 seconds to do the initial render. No server problem, just rendering. So if you do use this, I guess don't overdo it. :) Or at least profile. I use a 2015 MBP potato laptop. I guess my perf problems aren't really relevant. But it handles all modern sites just fine, so it was surprising. Definitely spikes something to 100% on each load: https://i.imgur.com/1fqBDEX.png https://i.imgur.com/1fqBDEX.png and the CPU graph is a nice timeline of me reloading teddit. EDIT: Oof. I just did a profiling session to figure out what the heck it was doing: https://imgur.com/ilvRkEb https://imgur.com/ilvRkEb Purple = rendering time. As you can see, it's 100% pegged at rendering whenever I uncollapse a thread. So, devs, if you happen to read this, the process is: 1. go to https://teddit.net/r/Bossfight/comments/k6vh5v/bearers_of_the_eternal_duel/genbcos/ https://teddit.net/r/Bossfight/comments/k6vh5v/bearers_of_th... 2. Collapse the toplevel comment https://imgur.com/vjDhTk2 https://imgur.com/vjDhTk2 (which is very fast.) 3. Activate a profiling session: Command-option-I, click performance tab, command-E to start recording 4. Un-collapse the thread 5. Stop recording Here's the profiling session in case it helps: https://battle.shawwn.com/misc/2020-12-04/Profile-20201204T185357.json https://battle.shawwn.com/misc/2020-12-04/Profile-20201204T1... No idea if it gives any insight into what's going on, but there y'go. I'm not sure how they'd solve this. 98.2% of the time is spent in "Layout": https://i.imgur.com/tSexr0n.png https://i.imgur.com/tSexr0n.png Is there even anything you can do to address that kind of perf problem? Yuck. I don't envy whoever digs into that one. I tried profiling with "Enable advanced paint instrumentation (slow)" but it seemed to show exactly the same result: https://i.imgur.com/V26oOTT.png https://i.imgur.com/V26oOTT.png "Nodes That Need Layout 3841 of 3987 Layout root#document" seems relevant. So it sounds like the details card is somehow causing a full-page layout for almost every element on the page. Which should be fast, except that every element seems to cause another layout. Or ... something. Not sure if there's any other details I could give, but let me know if anyone has ideas.
    - ComputerGuru 6y ago
      fwiw, it's instantaneous for me on a 2016 laptop running Firefox on Linux w/ Xorg and nVidia. No fans even spin up (and this is an HP, and we all know how much HP fans like to spin.) https://imgur.com/a/BjRqAs2 https://imgur.com/a/BjRqAs2
      - matt_kantor 6y ago
        On my 2013 macbook pro running Firefox 83 it spends about ~130ms in "layout" when expanding the comments (quick enough to be almost imperceptible). https://imgur.com/a/nV14ybI https://imgur.com/a/nV14ybI Seems to be a Chrome-only issue?
      - rapnie 6y ago
        Instantaneous on FF, old samsung S7
    - waterhouse 6y ago
      Hmm. Not related to the issue you mention, but also on that page, when I click a "Load more comments" link, it takes me to https://teddit.net/r/Bossfight/comments/k6vh5v/bearers_of_the_eternal_duel/genbcos/genr9x6 https://teddit.net/r/Bossfight/comments/k6vh5v/bearers_of_th... , a webpage that just says "Cannot GET /r/Bossfight/comments/k6vh5v/bearers_of_the_eternal_duel/genbcos/genr9x6".
    - jradd 6y ago
      chrome potato here. seems approx. 6 seconds for collapsing any that i've clicked.
    - zepearl 6y ago
      On Linux instantaneous in Firefox (78.5.0), takes forever in Chrome (87.0.4280.66) while using 100% of one CPU core/thread (I killed the tab after ~1 minute).
    - NosyHammock 6y ago
      Dev here. This is a known issue. https://codeberg.org/teddit/teddit/issues/24 https://codeberg.org/teddit/teddit/issues/24 So far I haven't come up with any solution. The nested .comment styles seemed not be the problem. Although something in the CSS triggers the slow rendering on Chromium based browsers – not sure yet what. If any of you have an idea, leave a comment here or in Teddit, appreciated! EDIT: Oh, forgot to say: Works fine in Firefox, no rendering issues.
grishka 6y ago
Another way is to use the checkbox-and-CSS trick. You add a hidden checkbox next to the element you want to hide, add a label to trigger the checkbox, and then use a + selector to toggle the visibility based on the state of the checkbox. Like this: <label for="spoiler">Toggle spoiler</label> <input type="checkbox" id="spoiler"/> <div id="spoilerContent">Spoilery stuff goes here</div> <style> #spoiler, #spoilerContent{display: none;} #spoiler:checked+#spoilerContent{display: block;} </style> You can also use a variation of this for tabs - just use radio buttons instead - and accordions.
- edoceo 6y ago
  Thanks!
- chiefalchemist 6y ago
  Yes. But I believe details / summary is considered more accessible. Since its in the spec it's something AT has or is working towards.
  - capableweb 6y ago
    It be more correct to say what grishka said above: "that will mess up screenreaders though" But if it's more accessible depends on the target user. If you're target are IE users or users with very old browser versions, for one reason or another, more accessible would be to use the CSS toggle trick. But if indeed your target user are users using screenreaders and using recent browsers, then details and summary elements would be more accessible. A bit anal, but important to consider when talking about accessibility, it's very context sensitive.
    - chiefalchemist 6y ago
      What's IE? ;)
    - betenoire 6y ago
      Accessibility is specifically about making things accessible to those with disabilities. Unless you are making a joke about the intelligence IE users or those using old browsers, accessibility isn't about maximizing potential reach.
turblety 6y ago
Is it `details` [1] instead of `detail`? 1. https://css-tricks.com/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion/ https://css-tricks.com/quick-reminder-that-details-summary-i...
mariusor 6y ago
Yes, that's how I do it on littr.me (a federated link aggregator). [edit] An example: https://littr.me/moderation https://littr.me/moderation

by sdan 6y ago

The <detail> <summary> Title </summary> Content </detail> tag allows you to do that iirc. I use it on my site and works fine to hide things that you can expand upon when clicked.

dharmab 6y ago

It even works in GitHub Markdown: I use it to put long code snippets/examples into a fold.

llbeansandrice 6y ago
Oh no way. Going to have to use this
- sillysaurusx 6y ago
  Somehow it takes 4 seconds to un-collapse a toplevel comment in Chrome. E.g. this one: https://teddit.net/r/Bossfight/comments/k6vh5v/bearers_of_the_eternal_duel/genbcos/ https://teddit.net/r/Bossfight/comments/k6vh5v/bearers_of_th... Pages also seem to take around 10 seconds to do the initial render. No server problem, just rendering. So if you do use this, I guess don't overdo it. :) Or at least profile. I use a 2015 MBP potato laptop. I guess my perf problems aren't really relevant. But it handles all modern sites just fine, so it was surprising. Definitely spikes something to 100% on each load: https://i.imgur.com/1fqBDEX.png https://i.imgur.com/1fqBDEX.png and the CPU graph is a nice timeline of me reloading teddit. EDIT: Oof. I just did a profiling session to figure out what the heck it was doing: https://imgur.com/ilvRkEb https://imgur.com/ilvRkEb Purple = rendering time. As you can see, it's 100% pegged at rendering whenever I uncollapse a thread. So, devs, if you happen to read this, the process is: 1. go to https://teddit.net/r/Bossfight/comments/k6vh5v/bearers_of_the_eternal_duel/genbcos/ https://teddit.net/r/Bossfight/comments/k6vh5v/bearers_of_th... 2. Collapse the toplevel comment https://imgur.com/vjDhTk2 https://imgur.com/vjDhTk2 (which is very fast.) 3. Activate a profiling session: Command-option-I, click performance tab, command-E to start recording 4. Un-collapse the thread 5. Stop recording Here's the profiling session in case it helps: https://battle.shawwn.com/misc/2020-12-04/Profile-20201204T185357.json https://battle.shawwn.com/misc/2020-12-04/Profile-20201204T1... No idea if it gives any insight into what's going on, but there y'go. I'm not sure how they'd solve this. 98.2% of the time is spent in "Layout": https://i.imgur.com/tSexr0n.png https://i.imgur.com/tSexr0n.png Is there even anything you can do to address that kind of perf problem? Yuck. I don't envy whoever digs into that one. I tried profiling with "Enable advanced paint instrumentation (slow)" but it seemed to show exactly the same result: https://i.imgur.com/V26oOTT.png https://i.imgur.com/V26oOTT.png "Nodes That Need Layout 3841 of 3987 Layout root#document" seems relevant. So it sounds like the details card is somehow causing a full-page layout for almost every element on the page. Which should be fast, except that every element seems to cause another layout. Or ... something. Not sure if there's any other details I could give, but let me know if anyone has ideas.
  - ComputerGuru 6y ago
    fwiw, it's instantaneous for me on a 2016 laptop running Firefox on Linux w/ Xorg and nVidia. No fans even spin up (and this is an HP, and we all know how much HP fans like to spin.) https://imgur.com/a/BjRqAs2 https://imgur.com/a/BjRqAs2
    - matt_kantor 6y ago
      On my 2013 macbook pro running Firefox 83 it spends about ~130ms in "layout" when expanding the comments (quick enough to be almost imperceptible). https://imgur.com/a/nV14ybI https://imgur.com/a/nV14ybI Seems to be a Chrome-only issue?
    - rapnie 6y ago
      Instantaneous on FF, old samsung S7
  - waterhouse 6y ago
    Hmm. Not related to the issue you mention, but also on that page, when I click a "Load more comments" link, it takes me to https://teddit.net/r/Bossfight/comments/k6vh5v/bearers_of_the_eternal_duel/genbcos/genr9x6 https://teddit.net/r/Bossfight/comments/k6vh5v/bearers_of_th... , a webpage that just says "Cannot GET /r/Bossfight/comments/k6vh5v/bearers_of_the_eternal_duel/genbcos/genr9x6".
  - jradd 6y ago
    chrome potato here. seems approx. 6 seconds for collapsing any that i've clicked.
  - zepearl 6y ago
    On Linux instantaneous in Firefox (78.5.0), takes forever in Chrome (87.0.4280.66) while using 100% of one CPU core/thread (I killed the tab after ~1 minute).
  - NosyHammock 6y ago
    Dev here. This is a known issue. https://codeberg.org/teddit/teddit/issues/24 https://codeberg.org/teddit/teddit/issues/24 So far I haven't come up with any solution. The nested .comment styles seemed not be the problem. Although something in the CSS triggers the slow rendering on Chromium based browsers – not sure yet what. If any of you have an idea, leave a comment here or in Teddit, appreciated! EDIT: Oh, forgot to say: Works fine in Firefox, no rendering issues.

grishka 6y ago

Another way is to use the checkbox-and-CSS trick. You add a hidden checkbox next to the element you want to hide, add a label to trigger the checkbox, and then use a + selector to toggle the visibility based on the state of the checkbox. Like this: <label for="spoiler">Toggle spoiler</label> <input type="checkbox" id="spoiler"/> <div id="spoilerContent">Spoilery stuff goes here</div> <style> #spoiler, #spoilerContent{display: none;} #spoiler:checked+#spoilerContent{display: block;} </style> You can also use a variation of this for tabs - just use radio buttons instead - and accordions.

edoceo 6y ago
Thanks!
chiefalchemist 6y ago
Yes. But I believe details / summary is considered more accessible. Since its in the spec it's something AT has or is working towards.
- capableweb 6y ago
  It be more correct to say what grishka said above: "that will mess up screenreaders though" But if it's more accessible depends on the target user. If you're target are IE users or users with very old browser versions, for one reason or another, more accessible would be to use the CSS toggle trick. But if indeed your target user are users using screenreaders and using recent browsers, then details and summary elements would be more accessible. A bit anal, but important to consider when talking about accessibility, it's very context sensitive.
  - chiefalchemist 6y ago
    What's IE? ;)
  - betenoire 6y ago
    Accessibility is specifically about making things accessible to those with disabilities. Unless you are making a joke about the intelligence IE users or those using old browsers, accessibility isn't about maximizing potential reach.

turblety 6y ago

Is it `details` [1] instead of `detail`? 1. https://css-tricks.com/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion/ https://css-tricks.com/quick-reminder-that-details-summary-i...

mariusor 6y ago

Yes, that's how I do it on littr.me (a federated link aggregator). [edit] An example: https://littr.me/moderation https://littr.me/moderation