6 ms·

The FUD about SPAs and Javascript on HN is insane. Here's my personal site: https://chadnauseam.com/ https://chadnauseam.com/. It's a SPA. It loads fast. There

The FUD about SPAs and Javascript on HN is insane. Here's my personal site: https://chadnauseam.com/ https://chadnauseam.com/. It's a SPA. It loads fast. There are such things as anchors and link (inspect element if you like). They have URLs and you can ctrl-click to open in a new tab. (The biggest proble with it is that I've been playing around with some js to animate a fade-in effect on page load, and it seems a little laggy and makes the site not work with javascript disabled. If I can't fix those issues I'll probably remove that in a few days.)

bobthepanda 6y ago
Couldn’t you just do fade in with CSS?
Ashanmaril 6y ago
The Discord/Twitter "buttons" on your site actually highlight one of the issues here. You can't open them in a new tab, or hover to see where they're taking you. They also don't make the mouse react properly to being on something clickable (though that could be fixed with a `cursor: pointer` style)
- tshaddox 6y ago
  Which is actually a clear illustration of the point: that you have to go out of your way to make "link-like" things that aren't actual links. Clearly whatever framework or rendering library the site is using supports client-side navigation via real working anchor tags. But for some reason, they decided to not use those for the social media widgets.
  - deleted 6y ago
    [deleted]
- frosted-flakes 6y ago
  Historically, only links got the pointer (hand) cursor, not all clickable things. Buttons and everything else kept the regular arrow cursor. Desktop software on all operating systems has always worked like this. However, this convention has been muddied a lot on the Web in the past few years, but I still like to follow it.
bobbylarrybobby 6y ago
When I hover over most links on your page, I see the link URL in the bottom left corner of the browser window. But when I hover over the discord and twitter buttons, I don't. And when I command-click those buttons they don't open in a new tab. So you used buttons (spans?) instead of links and broke the very functionality the article talked about.
- throwaway8581 6y ago
  >And when I command-click those buttons they don't open in a new tab. One of my greatest annoyances. I’m an open in new tab guy. When I see this annoying pattern I end up clicking, middle clicking the back button (only possible on desktop), then switching the tab positions, so I can get the correct outcome.
  - a1369209993 6y ago
    > middle clicking the back button TIL, apparently. Also, middle-clicking refresh opens a new copy of the current page. So much for GUIs being discoverable. Thanks.
    - runarberg 6y ago
      To be fair, your browser probably has a history menu option in the top menu that opens a sidebar with your recent history. You can probably right click the top page and click “open in a new tab”. This is highly discoverable and does the same thing (just in more steps). You can also select the text in your URL bar, right click and copy, then open a new tab the usual way and paste the URL there. Also the same results but highly discoverable with extra steps. As far as I know highly discoverable means there is no hidden functionality, not that every shortcut is advertised.
  - tacotime 6y ago
    I’m a regular laptop user and I often use this trick. In Windows you can ctrl+click the back button to pop open a tab for the previous url, I’d guess command+clicking the back button does the same on a Mac.
bestinterest 6y ago
I'm not sure its FUD, your main page takes 63.5KB + 38.7KB for the gatsby reactified framework? + an extra 39.8KB in some js bundle and another 51.7KB in some other js bundle. Also you end up thrashing 5MB of browser storage when I hovered a link check out Application -> Storage in Chrome. Maybe I'm crazy but your page should not need that much, your site is making 20 requests to resources (thankfully you have http2) and the longest request took about 7s on a slow 3g connection. For comparison here is Tom MacWright's page https://macwright.com/ https://macwright.com/ which does 2 requests at 14kB total taking 2.3s on a slow 3g connection. I will give you the prefetch trick is superslick in the Gatsby framework for blogs but no reason to have a whole React framework around it. Just use https://instant.page/ https://instant.page/ I say all this and I do love the component nature of React and SPA's (I love Svelte the most at the moment) but it does really not feel like the right tool for 99% of personal blogs.
Isognoviastoma 6y ago
This is great example of what is wrong with many SPAs. They should not be applications in first place. Why is it using tons of JS to display few paragraphs of static text? It could be hosted as static html pages. It also kind-of works in lynx, but totally don't in FF without JS.
coldpie 6y ago
> The biggest proble with it is that I've been playing around with some js to animate a fade-in effect on page load Yeah, there's no reason do this. It's text. Just let it render. KISS.
deleted 6y ago
[deleted]
jraph 6y ago
It's a blank page for me. It does not load at all. I want my browser to display documents, not to run code. I don't want documents to be apps. The browser already has very sophisticated code to render documents well. Unless I am really running an app - then this is somewhat fine to use the browser as a runtime. I'll make sure to only run open source apps with it, unless I really don't have a choice. edit: wait, your page is so close to render perfectly without JS! You can fix this by avoiding opacity:0 in the HTML!
cookiengineer 6y ago
I'm not sure you are aware that everybody that activates JS just to see this type of content (which can be done in a static html only manner) will be heavily disappointed when they've loaded your page. It's like waiting to load a WebGL demo of a damn teapot. Afterwards you have a negative impression, such as me now thinking of chadnauseam, that I now think has no effing clue about webdev if this person can't create two damn paragraphs without a JS framework. If you throw a heavy JS framework on a website, make sure the content is at least as heavy. If the content is two paragraphs of text, why would you disappoint users so much when they visit from mobile?
- frosted-flakes 6y ago
  Gatsby actually works extremely well for no-JS users. It is a static site generator, after all, that serves you raw HTML with a secondary JS payload. It's just that the author broke his website by setting the opacity to 0 on load so he could do a fade-in effect with JavaScript, even though there are much easier ways to do that in CSS. All the text is still there, just invisible.
dmitriid 6y ago
This is a page that displays nothing but static text. - It does 71 requests - It loads 2 MB or resources for this static page - Saves at least 6.7 MB of data in storage on load, no idea where that comes from (service workers maybe?). It jumps to ~16 MB on page refresh - Running Lighthouse on your website gives 2.9s until first contentful paint. 3 seconds to display less than a kilobyte of text. And that's for the front page. It's significantly worse for longer pages. - And on top of that it has buttons-for-links for discord and twitter (that are also, funnily enough, removed by ad blockers like AdGuard) Oh yeah, I see how the "FUD about SPAs" is in reality fully justified criticism.
minitech 6y ago
> It's a SPA. Yeah, but even ignoring all the SPA-caused bugs that other people pointed out – why? It’s just static content.
boring_twenties 6y ago
It certainly loads fast -- in fact, I get the completely blank page pretty much instantly. I do appreciate that it's at least a black blank page and not a bright white one, though.
NathanielK 6y ago
Your site is broken on some browsers that do not support darkmode. On Firefox 78.9 ESR the text is #EBEBEB on #FFFFFF, so it's illegible. Firefox 78 ESR is supported till September this year.
deleted 6y ago
[deleted]
boring_twenties 6y ago
Hm, wait a minute. I'm not a webdev by any stretch, so I could be talking out of my ass here. But, couldn't you "fix" the issue by leaving the opacity alone in the HTML, and setting it to 0 in the beginning of the JavaScript?

bobthepanda 6y ago

Couldn’t you just do fade in with CSS?

Ashanmaril 6y ago

The Discord/Twitter "buttons" on your site actually highlight one of the issues here. You can't open them in a new tab, or hover to see where they're taking you. They also don't make the mouse react properly to being on something clickable (though that could be fixed with a `cursor: pointer` style)

tshaddox 6y ago
Which is actually a clear illustration of the point: that you have to go out of your way to make "link-like" things that aren't actual links. Clearly whatever framework or rendering library the site is using supports client-side navigation via real working anchor tags. But for some reason, they decided to not use those for the social media widgets.
- deleted 6y ago
  [deleted]
frosted-flakes 6y ago
Historically, only links got the pointer (hand) cursor, not all clickable things. Buttons and everything else kept the regular arrow cursor. Desktop software on all operating systems has always worked like this. However, this convention has been muddied a lot on the Web in the past few years, but I still like to follow it.

bobbylarrybobby 6y ago

When I hover over most links on your page, I see the link URL in the bottom left corner of the browser window. But when I hover over the discord and twitter buttons, I don't. And when I command-click those buttons they don't open in a new tab. So you used buttons (spans?) instead of links and broke the very functionality the article talked about.

throwaway8581 6y ago
>And when I command-click those buttons they don't open in a new tab. One of my greatest annoyances. I’m an open in new tab guy. When I see this annoying pattern I end up clicking, middle clicking the back button (only possible on desktop), then switching the tab positions, so I can get the correct outcome.
- a1369209993 6y ago
  > middle clicking the back button TIL, apparently. Also, middle-clicking refresh opens a new copy of the current page. So much for GUIs being discoverable. Thanks.
  - runarberg 6y ago
    To be fair, your browser probably has a history menu option in the top menu that opens a sidebar with your recent history. You can probably right click the top page and click “open in a new tab”. This is highly discoverable and does the same thing (just in more steps). You can also select the text in your URL bar, right click and copy, then open a new tab the usual way and paste the URL there. Also the same results but highly discoverable with extra steps. As far as I know highly discoverable means there is no hidden functionality, not that every shortcut is advertised.
- tacotime 6y ago
  I’m a regular laptop user and I often use this trick. In Windows you can ctrl+click the back button to pop open a tab for the previous url, I’d guess command+clicking the back button does the same on a Mac.

bestinterest 6y ago

I'm not sure its FUD, your main page takes 63.5KB + 38.7KB for the gatsby reactified framework? + an extra 39.8KB in some js bundle and another 51.7KB in some other js bundle. Also you end up thrashing 5MB of browser storage when I hovered a link check out Application -> Storage in Chrome. Maybe I'm crazy but your page should not need that much, your site is making 20 requests to resources (thankfully you have http2) and the longest request took about 7s on a slow 3g connection. For comparison here is Tom MacWright's page https://macwright.com/ https://macwright.com/ which does 2 requests at 14kB total taking 2.3s on a slow 3g connection. I will give you the prefetch trick is superslick in the Gatsby framework for blogs but no reason to have a whole React framework around it. Just use https://instant.page/ https://instant.page/ I say all this and I do love the component nature of React and SPA's (I love Svelte the most at the moment) but it does really not feel like the right tool for 99% of personal blogs.

Isognoviastoma 6y ago

This is great example of what is wrong with many SPAs. They should not be applications in first place. Why is it using tons of JS to display few paragraphs of static text? It could be hosted as static html pages. It also kind-of works in lynx, but totally don't in FF without JS.

coldpie 6y ago

> The biggest proble with it is that I've been playing around with some js to animate a fade-in effect on page load Yeah, there's no reason do this. It's text. Just let it render. KISS.

deleted 6y ago

[deleted]

jraph 6y ago

It's a blank page for me. It does not load at all. I want my browser to display documents, not to run code. I don't want documents to be apps. The browser already has very sophisticated code to render documents well. Unless I am really running an app - then this is somewhat fine to use the browser as a runtime. I'll make sure to only run open source apps with it, unless I really don't have a choice. edit: wait, your page is so close to render perfectly without JS! You can fix this by avoiding opacity:0 in the HTML!

cookiengineer 6y ago

I'm not sure you are aware that everybody that activates JS just to see this type of content (which can be done in a static html only manner) will be heavily disappointed when they've loaded your page. It's like waiting to load a WebGL demo of a damn teapot. Afterwards you have a negative impression, such as me now thinking of chadnauseam, that I now think has no effing clue about webdev if this person can't create two damn paragraphs without a JS framework. If you throw a heavy JS framework on a website, make sure the content is at least as heavy. If the content is two paragraphs of text, why would you disappoint users so much when they visit from mobile?

frosted-flakes 6y ago
Gatsby actually works extremely well for no-JS users. It is a static site generator, after all, that serves you raw HTML with a secondary JS payload. It's just that the author broke his website by setting the opacity to 0 on load so he could do a fade-in effect with JavaScript, even though there are much easier ways to do that in CSS. All the text is still there, just invisible.

dmitriid 6y ago

This is a page that displays nothing but static text. - It does 71 requests - It loads 2 MB or resources for this static page - Saves at least 6.7 MB of data in storage on load, no idea where that comes from (service workers maybe?). It jumps to ~16 MB on page refresh - Running Lighthouse on your website gives 2.9s until first contentful paint. 3 seconds to display less than a kilobyte of text. And that's for the front page. It's significantly worse for longer pages. - And on top of that it has buttons-for-links for discord and twitter (that are also, funnily enough, removed by ad blockers like AdGuard) Oh yeah, I see how the "FUD about SPAs" is in reality fully justified criticism.

minitech 6y ago

> It's a SPA. Yeah, but even ignoring all the SPA-caused bugs that other people pointed out – why? It’s just static content.

boring_twenties 6y ago

It certainly loads fast -- in fact, I get the completely blank page pretty much instantly. I do appreciate that it's at least a black blank page and not a bright white one, though.

NathanielK 6y ago

Your site is broken on some browsers that do not support darkmode. On Firefox 78.9 ESR the text is #EBEBEB on #FFFFFF, so it's illegible. Firefox 78 ESR is supported till September this year.

deleted 6y ago

[deleted]

boring_twenties 6y ago

Hm, wait a minute. I'm not a webdev by any stretch, so I could be talking out of my ass here. But, couldn't you "fix" the issue by leaving the opacity alone in the HTML, and setting it to 0 in the beginning of the JavaScript?