4 ms·

"Better interactivity" is subjective. You could argue that faster is better. Expanding and collapsing sections can be achieved faster and with zero JavaScript (

"Better interactivity" is subjective. You could argue that faster is better. Expanding and collapsing sections can be achieved faster and with zero JavaScript (which also makes it work on browsers with disabled JS) with a hidden input[type="checkbox"]. Aa for the media viewer, it could be a great exercise to try and make it in a similar manner with input[type="checkbox"] for opening/closing media viewer and input[type="radio"] for switching to prev/next image. This one probably requires browsers to support the `:has` CSS selector. Also, if you want to further speed up your site, just like you said, the fastest way to speed up the site is to delete JavaScript, get rid of jQuery.

6510 3y ago
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details https://developer.mozilla.org/en-US/docs/Web/HTML/Element/de... <details> is completely supported.
- toast0 3y ago
  Oooh, that's lovely. I have a page with ~50 lines of javascript to do this, and it looks like I can make it zero lines of javascript instead.
  - 6510 3y ago
    One could use js to push the state into the url.
    - toast0 3y ago
      It's just opening and closing detail panes (personal recipie site), there's no reason to put the open/closed state in the url. But if I can do it with all html, that's better than a function to add / remove a css class and document.onclick = a function to find which recipie you clicked on and adjust the css class.
      - 6510 3y ago
        Probably more useful for a nested menu. The default thing almost works out of the box. You need some css to set a proper cursor and style the clickable text properly.
janpio 3y ago
You are not wrong. I assume the author of the blog post just wanted to optimize the current situation, not completely change how these features work (which would most probably be a much more elaborate change). Same for dropping jQuery - that will probably be a few weeks or months of work in a codebase the size of Wikipedia/Mediawiki.
robertoandred 3y ago
Using inputs like that is incorrect in terms of accessibility.

6510 3y ago

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details https://developer.mozilla.org/en-US/docs/Web/HTML/Element/de... <details> is completely supported.

toast0 3y ago
Oooh, that's lovely. I have a page with ~50 lines of javascript to do this, and it looks like I can make it zero lines of javascript instead.
- 6510 3y ago
  One could use js to push the state into the url.
  - toast0 3y ago
    It's just opening and closing detail panes (personal recipie site), there's no reason to put the open/closed state in the url. But if I can do it with all html, that's better than a function to add / remove a css class and document.onclick = a function to find which recipie you clicked on and adjust the css class.
    - 6510 3y ago
      Probably more useful for a nested menu. The default thing almost works out of the box. You need some css to set a proper cursor and style the clickable text properly.

janpio 3y ago

You are not wrong. I assume the author of the blog post just wanted to optimize the current situation, not completely change how these features work (which would most probably be a much more elaborate change). Same for dropping jQuery - that will probably be a few weeks or months of work in a codebase the size of Wikipedia/Mediawiki.

robertoandred 3y ago

Using inputs like that is incorrect in terms of accessibility.