Hacker News Reader

> the only things on my site that require JS are the "Make the image bigger when you click on it" feature

You could actually do this without JS, just wrap the image in a label for an invisible input, and apply transform with a transition based on :focus or :focus-within.

It would be ugly, sure, but so much of modern front-end development is already ugly.

Couldn’t you just use a any element with a focus pseudo selector? Or is there something in an input that’s special?

It should be possible as well: https://tympanus.net/codrops/2011/12/26/css3-lightbox/

Lazy loading could also be made as a user option in a web browser, too. (An implementation could also have an option to only use lazy loading if the dimensions of the picture are known.)

"Make the image bigger when you click on it" also can be done without JavaScripts, in a few ways: One way is to just use a ordinary hyperlink directly to the image (and optionally you can override it if JavaScripts are enabled), another way is to just to use features that the web browser might have (if the user has them, they can be used; if not, then not), and a third way might be to use CSS (although I generally want to avoid CSS requirements, too).

Fade-in effects can also be done using CSS, but may be undesirable (I am one who would prefer to reduce animation as much as possible, and other users too).

For JS based search functions with JSON, you could do something that I mentioned before which is <link rel="data"> and the user can make their own search functions if wanted (maybe a browser or extension might have a JSON searching function with many options (that the web page might not necessarily implement; I do often find wanted to make queries that the web page does not implement)), but if JavaScripts are enabled then it will use that one.

Even if the data is rendered into HTML in server-side scripts or generated static pages, you can still have <link rel="data"> or <a rel="data"> to allow to access the raw data, too, since it will sometimes be useful.

But in any case, you should almost always ensure that it works properly with JavaScripts disabled, and usually should work with CSS disabled too. Use <noscript> blocks if needed, and include API documentation or download links or whatever, not simply "This requires JavaScripts to work". For some types of web apps (e.g. interactive games), it might require JavaScripts but even then you can include links to documentation, and if it is open-source also source codes, even if scripts are disabled.

In general, in my opinion, most web pages should need neither JavaScripts nor CSS (and often does not need pictures either).

Interesting - thanks, I'll take a look at some of these ideas. I don't care a bit about fade-in effects, though it looks like I might still have a "text shift in" effect I can get rid of. It's a nice looking template, and the main problem with too many tweaks is that I'm long, long out of web dev. So I just don't have the current skillset for it.

Pictures aren't an option for my blog. It's very photo heavy as it's a lot of teardowns and analysis, and the bulk of my hacking effort has been ensuring that all the photos are run through the render pipeline and into photosets, to reduce bandwidth. I've debated adding AVIF images, but render time on those is quite obscene compared to jpg/png/webp. I should probably add fallback hyperlinks to the original image if JS is disabled - for now it just displays them inline.

> For some types of web apps (e.g. interactive games), it might require JavaScripts

I can't help imagining that the correct fall-back implementation here is to make the game turn-based instead of real-time, although even a game as simple as Pong might lose its appeal under that constraint.

Clearly it depend what kind of game. (For server-side text-based interactive games, Telnet or SSH will probably do OK, though)

Have you tried AlpineJS or Htmx ? These will cover more than 90% of use cases a simple website need.

> lazy loading - and it turns out that you can do that without JS too, now, at least in modern browsers.

The irony is, modern browsers are more likely to have JS enabled, older browsers are less likely to support lazy loading or JS.

Yes - but I also don't care, because an older browser without JS and without lazy load support can still render the site. Perhaps a bit slower than a modern one that supports the tags, but it's not going to break. Even browsers that don't support picture sets will render things, just slower (as they're not getting optimized files). But at some point, I simply don't care - I don't know, and I don't care, if the site looks right in IE6. It's my personal hobby site, and I'm not going to expend ever-increasing effort for fewer and fewer people.

"Site doesn't work with JS disabled" is a problem, and I fixed it.

"Site looks weird in a 20 year old browser" is someone else's problem. :)

> At this point, as far as I know, the only things on my site that require JS are the "Make the image bigger when you click on it" feature

On a website linked in the article, there is something if you search for "Lightbox", that comes with a codepen: http://youmightnotneedjs.com/

lazy loading images is only enabled when javascript is enabled because the assumption is that if you disable javascript, you don't want to be tracked and lazy loading images can track how far you scroll down.

Which browsers implement this? I've not seen that behavior in my testing.

I was saying that "You don't need Javascript to do lazy loading," not making any claims about the privacy or lack thereof.