Hacker News Reader

Comment by anchpop | Hacker News Reader

The FUD about SPAs and Javascript on HN is insane. Here's my personal site: 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.)

View on HN

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

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.

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.

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

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

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.

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.

Thanks. I didn’t know that. I usually just map three finger tap to middle click.

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)

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.

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.

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.

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

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.

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!

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.

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?

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.

> It's a SPA.

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

Couldn’t you just do fade in with CSS?

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?

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.

Reply on news.ycombinator.com