5 ms·

I recently used html5 sumary/detail to implement a treeview and it was the best experience ever solving such problem on the web. Very simple and easily customiz

by bigato 7y ago

I recently used html5 sumary/detail to implement a treeview and it was the best experience ever solving such problem on the web. Very simple and easily customizable via css, and if you render it on the server, you don't need javascript at all.

stopyellingatme 7y ago
Thank you for posting about this. Never heard of that element combo. Learn something new everyday.
rbinv 7y ago
> and if you render it on the server, you don't need javascript at all. I find it amusing how things have changed. We've almost come full circle.
- vearwhershuh 7y ago
  Server-rendered HTML: the once and future king https://pbs.twimg.com/media/ENnKCr2U8AAw4Bf?format=jpg&name=medium https://pbs.twimg.com/media/ENnKCr2U8AAw4Bf?format=jpg&name=...
oefrha 7y ago
I was about to say still not supported on Edge, then I realized Edge has become Chromium.
jakearmitage 7y ago
Any example?
- bigato 7y ago
  Unfortunately I didn't find an example that was simple enough on the web, and the work I did is not open source, so here is the best link I found, which was by the way what I used to derive my implementation: https://codepen.io/dsheiko/pen/MvEpXm https://codepen.io/dsheiko/pen/MvEpXm This is a bit fancier than necessary and that makes it not so good as an example for learning, but hopefully it will be enough to give you the idea. edit: this one is a little bit better to understand the basics: https://medium.com/metaphorical-web/javascript-treeview-controls-devil-in-the-details-74c252e00ed8 https://medium.com/metaphorical-web/javascript-treeview-cont... In short, summary/detail has the native hability to collapse the details and you can explore that to implement a tree by nesting them.
  - bigato 7y ago
    Scratch my post above, I made a better example: https://pastebin.com/raw/9D02J80s https://pastebin.com/raw/9D02J80s
    - jakearmitage 7y ago
      Thank you, that's enlightening.
    - lukastyrychtr 7y ago
      Unfortunately, this is missing the semantic metadata about the fact that it's a tree. It might be fine in some cases, but in general you would want to add some Aria attributes. But i'm not sure whether you could generate the entire thing server-side.
- qubitcoder 7y ago
  Here's some examples of this lovely element. I can't believe I hadn't heard about this before! I shared it with several web designers/developer friends who all had the same reaction. 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...
mixmastamyk 7y ago
^generated, not rendered, the browser renders.

by bigato 7y ago

stopyellingatme 7y ago

Thank you for posting about this. Never heard of that element combo. Learn something new everyday.

rbinv 7y ago

> and if you render it on the server, you don't need javascript at all. I find it amusing how things have changed. We've almost come full circle.

vearwhershuh 7y ago
Server-rendered HTML: the once and future king https://pbs.twimg.com/media/ENnKCr2U8AAw4Bf?format=jpg&name=medium https://pbs.twimg.com/media/ENnKCr2U8AAw4Bf?format=jpg&name=...

oefrha 7y ago

I was about to say still not supported on Edge, then I realized Edge has become Chromium.

jakearmitage 7y ago

Any example?

bigato 7y ago
Unfortunately I didn't find an example that was simple enough on the web, and the work I did is not open source, so here is the best link I found, which was by the way what I used to derive my implementation: https://codepen.io/dsheiko/pen/MvEpXm https://codepen.io/dsheiko/pen/MvEpXm This is a bit fancier than necessary and that makes it not so good as an example for learning, but hopefully it will be enough to give you the idea. edit: this one is a little bit better to understand the basics: https://medium.com/metaphorical-web/javascript-treeview-controls-devil-in-the-details-74c252e00ed8 https://medium.com/metaphorical-web/javascript-treeview-cont... In short, summary/detail has the native hability to collapse the details and you can explore that to implement a tree by nesting them.
- bigato 7y ago
  Scratch my post above, I made a better example: https://pastebin.com/raw/9D02J80s https://pastebin.com/raw/9D02J80s
  - jakearmitage 7y ago
    Thank you, that's enlightening.
  - lukastyrychtr 7y ago
    Unfortunately, this is missing the semantic metadata about the fact that it's a tree. It might be fine in some cases, but in general you would want to add some Aria attributes. But i'm not sure whether you could generate the entire thing server-side.
qubitcoder 7y ago
Here's some examples of this lovely element. I can't believe I hadn't heard about this before! I shared it with several web designers/developer friends who all had the same reaction. 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...

mixmastamyk 7y ago

^generated, not rendered, the browser renders.