12 ms·

> For starters: a lot can be done natively nowadays I learned this recently on my personal site when I was going through and de-javascripting stuff. I more an

by Syonyk 4y ago

> For starters: a lot can be done natively nowadays I learned this recently on my personal site when I was going through and de-javascripting stuff. I more and more frequently run without scripting enabled, and it felt very wrong that my personal site had some JS requirements. The worst being that it wouldn't render without JS due to a slick little fade-in effect in the template... One of the things I do quite like (living on a low bandwidth connection a lot of the time) is lazy loading - and it turns out that you can do that without JS too, now, at least in modern browsers. img loading="{lazy,eager}" will do this without needing JS. Combine it with picturesets for smaller images (you let the browser pick an image it supports and a size relevant to the display), and life is good without any JS. 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, and then a JS based search function (which sucks down an awful lot of JSON, but it's fine, and beats an active server backend for a personal blog). It's also impressive just how responsive a browser on a gutless wonder ARM SBC is when all it's having to do is render content, not run a bunch of JS!

zzo38computer 4y ago
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).
- Syonyk 4y ago
  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.
- dane-pgp 4y ago
  > 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.
  - zzo38computer 4y ago
    Clearly it depend what kind of game. (For server-side text-based interactive games, Telnet or SSH will probably do OK, though)
hmsimha 4y ago
> 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.
- azemetre 4y ago
  Couldn’t you just use a any element with a focus pseudo selector? Or is there something in an input that’s special?
  - Y-bar 4y ago
    It should be possible as well: https://tympanus.net/codrops/2011/12/26/css3-lightbox/ https://tympanus.net/codrops/2011/12/26/css3-lightbox/
timando 4y ago
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.
- Syonyk 4y ago
  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.
gitgud 4y ago
> 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.
- Syonyk 4y ago
  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. :)
rtcoms 4y ago
Have you tried AlpineJS or Htmx ? These will cover more than 90% of use cases a simple website need.
Zababa 4y ago
> 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/ http://youmightnotneedjs.com/

by Syonyk 4y ago

zzo38computer 4y ago

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).

Syonyk 4y ago
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.
dane-pgp 4y ago
> 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.
- zzo38computer 4y ago
  Clearly it depend what kind of game. (For server-side text-based interactive games, Telnet or SSH will probably do OK, though)

hmsimha 4y ago

> 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.

azemetre 4y ago
Couldn’t you just use a any element with a focus pseudo selector? Or is there something in an input that’s special?
- Y-bar 4y ago
  It should be possible as well: https://tympanus.net/codrops/2011/12/26/css3-lightbox/ https://tympanus.net/codrops/2011/12/26/css3-lightbox/

timando 4y ago

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.

Syonyk 4y ago
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.

gitgud 4y ago

> 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.

Syonyk 4y ago
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. :)

rtcoms 4y ago

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

Zababa 4y ago

> 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/ http://youmightnotneedjs.com/