Live data from Hacker News

Your website should work without JavaScript (2021)

endtimes.dev

51–60 of 159 posts

Re: Your website should work without JavaScript (2021)

#51
post #35

This proved tricky for me because of Core Web Vitals. I made ptable.com work without JS, but I still show "dead" interactive components (the properties area above) because expanding it when JavaScript arrives would destroy my Cumulative Layout Shift score.

give everything that is supposed to be js-only a class called js-only (or whatever) and then just do:

.js-only { display:none !important; }

this won't work on failed script loads, only on actually disabled javascript, though

Re: Your website should work without JavaScript (2021)

#52
post #16

i don't think vanilla html saves more bandwidth than JavaScript. if a part of your website needs update (react,vue,fetch) only that part is transmitted over the wire. It's also less jarring for the user, since most browsers would scroll the content to the top. Also, without JavaScript, some webapps would require storing user state in a server database rather than in memory of the browser. Fix html and we won't need J…

When you're using a server side template all your queries happen on the server in one request. Most react/js apps I've seen need to do a bunch of requests to get that same data, one request for content, another for author profile, another for comments, etc. Maybe with non-rest-ish page specific endpoints.

I'd need a more specific example, but for user state I imagine it can be stored in json-web-tokens, or in the url, depending on if you mean like the current query or some kind of actual session data.

Re: Your website should work without JavaScript (2021)

#53

About a decade ago, the internet disagreed, and everything started requiring JS.

s/internet/money

There is nothing inherent to the internet or the promises thereof that require the kinds of interactivity that have driven the tidal wave of front end scripting that has flooded the space. The overwhelming majority of it comes down to designers being cute for no obvious reason and business entities that aggressively abuse their client's browsers and bandwidth solely because cross-browser compatibility is notionally cheaper than maintaining software across several operating systems. The rest is monkey see monkey do.

Re: Your website should work without JavaScript (2021)

#54
post #32

Earlier quoted context omitted.

I’m genuinely curious: why would Netflix or YouTube not work without JS? As far as I understand it, YouTube and Netflix are a nicer UX with JS but there’s no particular feature that would kill it completely. Like, for example, I thought that you can play HLS* manifests from plain HTML5 video tags. EDIT: I was thinking of HLS and not DASH

Closed captioning would need to be added to the standard video tag. Which IMO is a worthy addition.

The tag has been supported across the board for 8 years.

Re: Your website should work without JavaScript (2021)

#56

About a decade ago, the internet disagreed, and everything started requiring JS.

Right, and now that we've spent a full decade exploring that route together we should be in a great position to step back and ask ourselves if it turned out to be a good decision.

Re: Your website should work without JavaScript (2021)

#57

Earlier quoted context omitted.

There are situations where JavaScript is being replaced with WebAssembly. There are absolutely no situations where serialised HTML is being replaced with WebAssembly.

I see it all the time. Tons of sites out there are replacing standard HTML with JS and won't even work without JS.

I said nothing about replacing HTML with JavaScript.

Re: Your website should work without JavaScript (2021)

#59

Quoted post unavailable.

But it’s also frightfully easy with such stacks to end up with invisibly broken functionality, e.g. a form that you maybe even intended to work without JavaScript, but accidentally broke in some way; or a widget that is just blank in the HTML and gets filled afterwards (this is very common). As an example of that: in https://www.joshwcomeau.com/css/custom-css-reset/ , the first code block is a loading spinner. Why it…

Good points. I might even go a step further and say that not only should you be AWARE of how your page behaves after the magic (what breaks without JS, what doesn't), you should deliberately pick and CHOOSE what's OK to break and what is essential content, and design around it.

An example: At my last job (a museum), accessibility was a business need (and grantmaker requirement), and part of that is ensuring that our content was accessible by people using screen readers. At the same time, the website was owned by the marketing department, who had strong thoughts on design and "modern" UX. It was a constant tug-of-war between the two and the JS had to be carefully balanced.

For something as simple as a list of exhibitions or blog posts, it was essential that everybody and any browser be able to see a list with titles, a short blurb, and a thumbnail. That was the "must-have". Nobody should be excluded from reading our actual content.

Then, because we have posts stretching back years, we also wanted a good filtering system, so people could search for certain topics or keywords or whatever. That's the "nice to have" that we decided was OK to sacrifice for certain edge cases.

It is possible to write such a system using plain HTML (by sending HTTP GETs/POSTs and having the backend do the filtering). But such a system was much much slower for the user (multiple seconds instead of single-digit milliseconds, because the backend had to process the request, generate the HTML, and send the whole HTML back... instead of client-side JS that can just filter an already-loaded array in a few milliseconds, or at most request a JSON of filtered post summaries that's much much smaller than a full HTML page).

So we looked at our analytics and determined that almost nobody (I'm not saying that this is the ideal approach, just that it is AN approach -- dictated more often by business needs and resource limits, not developer ideologies. Some of our peer institutions (other museums) went opposite ways... some wrote in pure HTML and a sprinkling of bespoke vanilla JS, with very fast and lean pages that didn't have much clientside interactivity. Others went to the other end of the spectrum, creating richly animated interactive stories that are more like a educational game than a webpage. As a developer I have my own preferences on such things, but in the grand scheme of things, our ideologies rarely matter.

What practical frameworks like Next do is allow us to find an acceptable middle-ground between a lot of stakeholders, balancing UX, DX, DevOps, business requirements, resource costs, etc. Next is itself a frankenstein of technologies -- mirroring the modern JS and cloud service ecosystem -- that doesn't try to preach any particular ideology. It looks at the chaos out there, accepts it for what it is, and tries to harness the bits and pieces of it that makes sense to use in an average website. I think it does a pretty good job.

You can, of course, make similar evaluations and tradeoffs as an individual dev. But it's a LOT of work to think through and build and maintain. It was easy to make a JS site and no-JS site side-by-side back in the day (along with frames and no frames!), but that's not really a practical approach for the complexities of modern sites and stakeholders; it would increase development time by an order of magnitude or more. Progressive enhancement is great for simple sites that are really more "documents" than "apps", but even that starts to break down once you move from "documents" to "document store", as in you have a pile of documents originated from some content management system / production pipeline / editorial review process that multiple stakeholders work on together. At an organization of any real scale, you can't have your webmaster editing raw HTML every time somebody wants to update a blog post.

Web dev isn't a place for purists. The whole history of the web is "hack on top of hack". HTML is a barebones document markup language more aligned with Gopher than modern web apps, and JS itself was a me-too panicked reaction to Java (and later, ActiveX and Flash). That it grew to such popularity was an unfortunate coincidence of history, as the lowest common denominator that browser vendors could accept. V8's massive improvements to the JS runtime cemented its own fate, taking the web from "JS is useful for adding a little bit of interactivity" to "JS is now fast enough to BE the web". Now V8 is pretty the de facto operating system of the web, for better or worse. As individual developers, this isn't a system we work in, it's a system we work around because it's just what history left us. Every page we build is a hack on top of a hack, a workaround for another workaround that somebody wrote into spec or engine a decade ago for the needs of those days.

I hate it as much as anyone, but until we can get a new web ecosystem (crypto-web doesn't count), we're just kinda stuck with it...

Re: Your website should work without JavaScript (2021)

#60

I don't care so much when a site with lots of interactivity requires JavaScript, but holy heck, do few things piss me off more than a blog site with articles that require JavaScript just to read text! Whomever writes web software to do that should be ashamed of themselves. If it's really that hard for you to prerender a page on the server, then just send the text by itself. Can you do that? I don't need you to preren…

The point is that you're not supposed to receive the text by itself, the text is only there to entice you to visit the site, but you're supposed to click links, subscribe to the newsletter, get tracking scripts served to you, and buy whatever product/service they're luring you towards with those blog posts.

Nowadays every marketing person will strongly insist on producing tons of semantically meaningless "blog posts" just to generate some new "content" on the site so that google ranks it higher. The blog very rarely exists for you to just read it, most of the time it's a marketing tool supposed to steer you towards something else, and it's not in their interest to allow you to just read the text without the accompanying cruft.

Post reply on HN