Item — HN Reader

I like the new design, however, I strongly believe the website could've been optimized further and used much less JS. Opening the website with JS turned off makes the code examples not load and the front page freezes as "0%" loading.

What does it do exactly? It just fetches[1] to another part of site and retrieves static text[2] to be displayed. This part could've been kept as part of the html, no need for this artificial loading. It's not a webapp, it's a website.

1. https://www.ruby-lang.org/javascripts/try-ruby-examples.js

2. https://www.ruby-lang.org/en/examples/i_love_ruby

In this day and age, it is possible to have an appealing, responsive, lightweight website with no JS (maybe except for darkmode toggle).

3 comments

> used much less JS

The homepage loads 9.7kB of JS. Navigating to every single link in the main nav results in no additional JS being loaded.

The site is fine.

This page doesn't need JS. It doesn't need a loading indicator for said JS. It could just be html and css, otherwise unchanged.

Sometimes people want things we don't need. It doesn't need Javascript but it allows certain nice to have features, like instantaneous page loads.

> it allows certain nice to have features, like instantaneous page loads

Right, but I do not think this is the case here

Home pages: Ruby 4.3mb, Python 1.3mb, java.com 2.1mb, raku.org 360kb, typescript 2.1mb

Yeah but them's highway miles. I have much less care about a site loading images than the stuff that makes the mobile nav work. Images are pretty!

For instance, here's Python's 144kB JS-powered homepage mid-load: https://imgur.com/a/OvYVAMS

And theirs doesn't even have any pretty images! That said, Ruby really ought to give those images a compress.

I like instantaneous page loads after the initial first page load, which is what the JS does here. Hard to do so without it.

I don't think that JS does any preloading. When I open the front page and I click somewhere it loads normally for me, and it downloads the whole page content, after my click (desktop, Firefox).

I don't see what JS code would provide this?

wat

Darkmode toggle can be (and usually is) achieved by CSS.

And the state of it persist across page loads or tabs?

No. It might, depending on what your browser does, but it's not in the web standard.

But you can have a button that saves your state when you enable javascript, and doesn't save your state (but still works) when you disable javascript.

edit: I think it is possible to save your state on the second click. So the UX is: you have 3 options with a slide. You click one of them, the page theme changes, and the option icon becomes a padlock. You click on it again, and the option is saved.

It seems to be a limitation that without javascript a single click can't change a switch and do something else--make a request to set a cookie. But you can do changing style on first click, then setting a cookie on the second. Here's a demo (written by Claude) (it doesn't work without server, just the HTML part) https://jsfiddle.net/r134vgo7/3/