← Back to context

Comment by igravious

4 days ago

> not optimized images by size and deferring, JS for things that work natively in the browser, bloat of tailwind instead of nice clean and modern CSS.

care to elaborate?

15 comments

igravious

Reply
jarek83  4 days ago

Sure:

- images: none are visible above the fold - all should be lazy loaded (like it is done with all conference images) and the pragdave.jpeg one does not need to be that large;

- JS: navigation toggle, including chevron rotation can be done in CSS using :has combined with checkbox/radio input. Similarly for header-navigation and theme-toggle (here combined with cookie store). Then toc.js - seems like something easy to do in the backend. Hero-animation - I haven't looked much through it but seems like at least some parts can be done in CSS;

- CSS/tailwind - well it would probably take less typing to do it just in CSS, the site does not seem to be that much componentized to benefit from tailwind.

  • MrJohz  3 days ago

    I would generally caution against doing toggles with CSS. While it can be done, it often has surprising effects, and can be difficult to make properly accessible (for example in the case of opening the navigation, I don't believe it's possible to set the correct aria tags to indicate that the toggle is a button that is showing/hiding another element on screen).

    Instead, for a brochure site like this, I'd rather have the links just always visible, because this is the reference site for Ruby and I imagine a lot of people find them by searching "Ruby", coving l clicking the homepage, and scanning for the link to the docs/downloads/etc.

    Alternatively, if the show/hide feature is really that important, right now I would (a) explore whether it can be done accessibly using the new invoker API, so you don't need JavaScript at all (with a JS fallback), or (b) just do it in JavaScript directly, but with an accessible default if the JS doesn't get loaded properly.

    But yeah, the rest I largely agree with. There's a bunch of stuff here that would have been simpler, and arguably also easier, if they'd taken a slightly different approach.

  • azangru  4 days ago

    > Similarly for header-navigation and theme-toggle

    The theme toggle has three states. How do you model this with a checkbox?