4 ms·

I like how it looks. I don't like to see how badly it is crafted tech-wise - not optimized images by size and deferring, JS for things that work natively in the

by jarek83 10mo ago

I like how it looks. I don't like to see how badly it is crafted tech-wise - 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. Knowing ruby I can tell that the relaxed approach to the website does not correspond with sophistication in the language itself. If I wouldn't know ruby, that would be a put off for me, thinking that if they don't want to convince me tech-wise by their site, it might be similarly annoying to deep-dive into the language.

igravious 10mo 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?
- jarek83 10mo 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.
  - azangru 10mo ago
    > Similarly for header-navigation and theme-toggle The theme toggle has three states. How do you model this with a checkbox?
    - jarek83 10mo ago
      It could be done with :indeterminate state (so key in a cookie would be absent or removed when switching), but I'd probably would do it with radios instead
      - SquareWheel 10mo ago
        Note that a checkbox's indeterminate state can only be set via JavaScript, so that lessens the elegance of a CSS-based approach. I agree that using radios would be better. Or just prefers-color-scheme, which sidesteps the FOUT issue that often occurs when storing theme settings in localStorage.
    - bmacho 10mo ago
      It's possible to have a 3-states CSS switch/slider that controls site theme. Google it or ask AI assistant.
    - Elfener 10mo ago
      Why does a site even need a light/dark toggle, when you can just use prefers-color-scheme in CSS, and the user can select that in their browser settings? (Also, technically, alternative stylesheets can be defined in HTML, except every browser except Firefox removed it: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel/alternate_stylesheet#browser_compatibility https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...)
      - deleted 10mo ago
        [deleted]
      - azangru 10mo ago
        > Why does a site even need a light/dark toggle, when you can just use prefers-color-scheme in CSS, and the user can select that in their browser settings? Good question, especially since the Ruby site already does this by default. Perhaps the argument is that one of the two color schemes may be designed so poorly that the user may want to manually switch to the other one.
  - MrJohz 10mo 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.
markdown 10mo ago
The decorative underlines under the headings on the home page are embedded as content (<img> tags)!!! Amateur hour.
- tyre 10mo ago
  I say this with love, compassion, grace, and all due respect: Who gives a shit?
  - markdown 10mo ago
    It's a website for web devs. Web devs give a shit.
    - ecshafer 10mo ago
      Ruby isn't necessarily for web devs. Ruby is popular for all sorts of business line applications. In Japan is popular for lower level programming. You can do game programming via something like Dragon Ruby. Sure its very popular for Rails, but you don't necessarily need to do web dev.

by jarek83 10mo ago

igravious 10mo 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?

jarek83 10mo 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.
- azangru 10mo ago
  > Similarly for header-navigation and theme-toggle The theme toggle has three states. How do you model this with a checkbox?
  - jarek83 10mo ago
    It could be done with :indeterminate state (so key in a cookie would be absent or removed when switching), but I'd probably would do it with radios instead
    - SquareWheel 10mo ago
      Note that a checkbox's indeterminate state can only be set via JavaScript, so that lessens the elegance of a CSS-based approach. I agree that using radios would be better. Or just prefers-color-scheme, which sidesteps the FOUT issue that often occurs when storing theme settings in localStorage.
  - bmacho 10mo ago
    It's possible to have a 3-states CSS switch/slider that controls site theme. Google it or ask AI assistant.
  - Elfener 10mo ago
    Why does a site even need a light/dark toggle, when you can just use prefers-color-scheme in CSS, and the user can select that in their browser settings? (Also, technically, alternative stylesheets can be defined in HTML, except every browser except Firefox removed it: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel/alternate_stylesheet#browser_compatibility https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...)
    - deleted 10mo ago
      [deleted]
    - azangru 10mo ago
      > Why does a site even need a light/dark toggle, when you can just use prefers-color-scheme in CSS, and the user can select that in their browser settings? Good question, especially since the Ruby site already does this by default. Perhaps the argument is that one of the two color schemes may be designed so poorly that the user may want to manually switch to the other one.
- MrJohz 10mo 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.

markdown 10mo ago

The decorative underlines under the headings on the home page are embedded as content (<img> tags)!!! Amateur hour.

tyre 10mo ago
I say this with love, compassion, grace, and all due respect: Who gives a shit?
- markdown 10mo ago
  It's a website for web devs. Web devs give a shit.
  - ecshafer 10mo ago
    Ruby isn't necessarily for web devs. Ruby is popular for all sorts of business line applications. In Japan is popular for lower level programming. You can do game programming via something like Dragon Ruby. Sure its very popular for Rails, but you don't necessarily need to do web dev.