top | item 17020688

Using the Web for a Day with JavaScript Turned Off

122 points| mhr_online | 8 years ago |smashingmagazine.com | reply

174 comments

order
[+] everdev|8 years ago|reply
Back in 2006/7 I remember we'd use "progressive enhancement" to make a site work without JavaScript and then add JavaScript enhancements for those who had JS enabled.

At some point (maybe after the popularity of Google Maps?) nobody wanted progressive enhancement and it was totally cool to just ignore users who had JS turned off. It made web app development so much easier, but probably less user friendly.

It feels like JS is a hammer to fix the nail of the page reload. I always thought it was too bad that browsers choose to show the blank page instead of sending the request and just rendering the difference themselves.

[+] romaniv|8 years ago|reply
>It made web app development so much easier

I aim to develop web UIs using (mostly) progressive enhancement. I adopted several practices and developed some libraries supporting this process. As a result:

1. When I need to create something, I know exactly which data structures to use. This is determined by what is available in modern browsers.

2. I can quickly prototype solutions using plain HTML focusing on logic rather than style.

3. Since my data is by definition contained in HTML, I can easily query it using CSS queries. This makes working with nested data a breeze.

4. I factored code I reuse into generic, self-contained behaviors. Things like "when this form is invalid, this control should be inactive". There is usually very little to none page-specific code.

5. Once a behavior is written and tested, "debugging" usually involves simply making sure the page has the right attributes. I can do this by running a CSS query in console or looking at DOM. No breakpoints, no stepping, no watches.

6. The most important part: I can add one behavior at a time and the result is something that works and makes sense.

7. A lot of UI "logic" I used to have in scripts naturally migrated to CSS.

I like this process way more than fiddling with tons of page-specific "glue" JavaScript. I especially like it when I'm in a crunch, because it pre-defines a lot of the things I would have to "design" on the fly in a traditional development workflow. Also, if I run out of time I have a working (if ugly) app. If I introduce a bug somewhere in UI or run into a compatibility issues, it usually doesn't result in the entire user workflow stopping dead.

[+] Androider|8 years ago|reply
It does make development easier, and at some point it just doesn't make sense to support any longer.

If the number of people who visit your site with JavaScript disabled is less than the number of people who visit using the Opera browser, does it really make sense to add [number of supported browsers] x [JS on | JS off] permutations to your testing workload? Is spending the time and resources on creating a non-JS site worth it, or would it better spent somewhere else (usability, accessibility, etc.)? Everything is a trade-off.

I personally feel the JS ship has long sailed. I'm more worried about the recent trend of sites not even working in Firefox anymore, just Chrome. That is definitely a bit sad.

[+] cptskippy|8 years ago|reply
I remember when we used the term "Graceful Degradation".

It really isn't that hard to design a functional HTML site and then layer Javascript and AJAX over top of it to enhance the experience. There are very few sites that actually need to be using Frameworks like Angular and React.

Sometimes I wonder if most developers would even be able to design a functional site using only HTML. It seems like most don't know the difference between a button and an anchor.

With modern server side frameworks it's even easier to support graceful degradation or progressive enhancement as the frameworks will handle the accept header processing for you.

[+] realusername|8 years ago|reply
> Back in 2006/7 I remember we'd use "progressive enhancement" to make a site work without JavaScript and then add JavaScript enhancements for those who had JS enabled.

I still do that on my case, a good 95% of the features I develop work without Javascript. One additional benefit is that if your JS crash for any reason, most of the things are still working.

[+] reaperducer|8 years ago|reply
I built a website for a mid-sized health care company, and the primary goal was to communicate with as many people using as many devices as possible, not to be flashy.

With that mandate, the site (about 300 pages) ended up almost completely js-free. I think there was only one page that had js, and that was for a calculating widget.

js is great for certain things, but certainly not necessary for all the things it's used for.

[+] yosito|8 years ago|reply
> At some point (maybe after the popularity of Google Maps?)

I feel like there was a huge uptick in developers ignoring users with JS turned off when Angular and React started becoming popular. It's interesting to note that big tech companies, who have a financial interest in pushing websites away from progressive enhancement techniques, were the ones behind the creation of those frameworks.

[+] wgerard|8 years ago|reply
> I always thought it was too bad that browsers choose to show the blank page instead of sending the request and just rendering the difference themselves.

FWIW there are libraries that work around this, e.g. turbolinks - which I heavily suspect Github is using, and is probably a large part of why they're able to support progressive enhancement.

[+] mattmanser|8 years ago|reply
It's more than that, they could have fixed html to support snippets without needing a full page reload.

They haven't and now we're in this javascript SPA mess.

[+] acomjean|8 years ago|reply
I thought progressive enhancement.

I think people expect much more interactivity now, (I think google maps was a driver and web based email as well), so it became harder to do pure back end. For example a lot of the queries I run now show a dynamically generated graph. I can do that on the back end, but much easier to use a javascript charting package. I guess I could just use javascript all the way down

[+] majani|8 years ago|reply
There was a viral post on HN back in the day that demoed how the web would look like with seamless page loads instead of JavaScript. The consensus then was that the blank page and spinning gifs were good UI for showing that your click has led to a major change, while seamless JS communicated a minor action to the users
[+] amelius|8 years ago|reply
> It feels like JS is a hammer to fix the nail of the page reload.

JS is useful for much more, e.g. collaborative editing, where the user doesn't have to wait for a server round-trip. JS is essential for a real-time multi-user interactive web.

[+] bitwize|8 years ago|reply
Iron law of Web development: You develop your site for tge platform that has 95% of your user base, and tell the other 5% to join the 21st century because supporting them is not worth the cost.

Back in the early 2000s, this meant you had to check your site in IE. Stragglers still using Netscape could pound sand.

[+] jakecopp|8 years ago|reply
Install uBlock Origin and do it every day!

I block all JavaScript, then re enable it when needed to fix a site.

Often I just need to enable 1st party scripts in the uBlock Origin grid to fix it.

Make sure you enable advanced mode to see the grid.

[+] shabbyrobe|8 years ago|reply
If you're serious about giving this a whirl, uMatrix is even better for fine-grained control. I disable everything except first-party images and CSS by default and it's like a whole new internet.

There's a bit of a dance you have to get used to when things don't work, but I've got it into muscle memory now so I don't even think about it. I tend to click around in there enabling the first few obvious things for about 3 seconds, which works 95% of the time, and for the the remaining 5% the URL gets copy-pasted into Chromium.

Wait, what are all these floating obstructions? I thought I disabled all JS... hang on, you mean CSS is now full of animations and distractions too? https://addons.mozilla.org/en-US/firefox/addon/unstickall/ and https://github.com/gagarine/no-transition.

What's that? Sticky sidebar full of chum? No problem - uBlock Origin's "right click, block element" to the rescue.

The internet doesn't have to be shit any more!

[+] natbobc|8 years ago|reply
Will need to look at that! I've disabled JS ever since the spectre/meltdown CVE announcement and only enabled it for a select few sites. Now if I hit a SPA site I just close the browser tab unless it's something I really need and want. It's ludicrous how many "doc" and "brochure" sites aren't functional w/out JS enabled.
[+] AdmiralAsshat|8 years ago|reply
Or install uMatrix alongside uBO.

Having just one is certainly less hassle, but uMatrix gives more granular control over what's allowed by the first/third party domains than uBO's advanced mode.

[+] echohack5|8 years ago|reply
I run uBlock Origin + NoScript. Makes the web run much much faster.
[+] pkhagah|8 years ago|reply
Same here. In addition, if I think I will visit certain website only once, I open it in private mode and disable umatrix for all domains in the site for a quick view.
[+] hedora|8 years ago|reply
My approach on iOS: install an “everyday” adblocker, and a secondary one that supports custom rulesets (I use refine). Then, tell the secondary to block all images + javascript (I downloaded the “block javascript images and css” filter, then toggled the css rule).

Next, long press the reader view button in safari’s url bar, and turn it on for all sites.

Finally, since Apple doesn’t support high contrast black backgrounds in reader view, go into accessibility, turn on the three clicks to bring up accessibility shortcuts option, and add “classic invert” to it.

As a bonus for reading this far, also add “magnifier” to it, which lets you use your rear facing camera in a surprisingly good magnifying mode that should be part of the default camera app.

[+] hadrien01|8 years ago|reply
I have uBlock Origin and blocked all scripts on the Twitter website to try the trick described in the article, but nothing happened. Are noblock tags displayed when JS is disable in uBlock?
[+] godshatter|8 years ago|reply
The author talks about "noscript" and makes it clear that it's not a reference to the html tag but to the idea of surfing the web without javascript. I was waiting for a discussion of NoScript, the popular add-on for Firefox that blocks javascript by default and allows for turning it back on on a site-by-site basis.

I surf the web, as I have for many years, with NoScript turned on and as few permanent domains white-listed as I can get away with for security reasons.

I don't have any numbers to back this up, but my guess is that the population of people who use the NoScript add-on dwarfs the population of users that actually disable their javascript in their browser. I'm not sure how someone like me shows up in their numbers, but I suspect that I would be on the "blocks javascript" list and then on the "uses javascript" list if I am intrigued enough about the site to enable some of the domains it requests javascript from.

I don't know if web developers take that into account or not, but I suspect they don't because the number of domains I have to experimentally temporarily enable just to see some parts of some sites is getting even more ridiculous these days.

Maybe someone should design a new protocol that is built for interactivity from the start instead of one designed around static content with back-flips needed to make it usably interactive.

[+] codedokode|8 years ago|reply
The web works much better without JS, sites load faster and browser takes less memory. But sadly many sites use preloaders or plugins that hide entire page content until JS is loaded. What an awful idea.
[+] kome|8 years ago|reply
I am not a developer, I can write just html+css. For my personal website (http://mrtno.com/) I use just static pages written by hand. No JS needed, no stupid complexities.

I wonder why if I can sell my lack of skill on the market... because the skilled designers/coders are programing a web that really has a tendency to be so bloated.

I browse the web with no-script (firefox extension); and many websites won't even load without scripts. I wonder why. For many many website I don't see the need to have JS around at all.

Can the lack of skills be a skill? :) hire me!

[+] ibdf|8 years ago|reply
Oh my lord, this article is non-sense. Had you gone to a website and had not been able to read anything I would say... good point. But you went to a Wordpress admin to prove your point. Lord have mercy... you're really going to hate your experience once WP switches to a JS based editor. Quick, let's try using Facebook and other apps built on JS frameworks and complain about the functionality not working. Let's try searching data tables with JS off, and let's try making ajax requests to load data over time instead all at once. It's not only in your browser it's in your phones, in apps that provide you services you can't live without.

These type of articles are a shame and are only written to instigate fights among developers. The world is using JS, it's on every major app. Get over it or make something better.

[+] 80386|8 years ago|reply
I know a guy who built a single-page web app for a blog. Really.

It takes a few seconds to load the post titles, it'll make your computer grind to a halt if you have more than two tabs of it open, it took months to write, and it doesn't do anything you couldn't do with plain HTML and some AJAX request handlers... but Brawndo has electrolytes!

I bet it looks pretty good on his resume.

[+] bahjoite|8 years ago|reply
The whole point of the article is that not everybody is able to use javascript, for a variety of reasons, and it makes perfect sense for apps to provide as close to equivalent functionality as is practicable.
[+] avhon1|8 years ago|reply
>Quick, let's try using Facebook [...] built on JS

Facebook has a no-js version of their website which suffices for all of my purposes.

https://mbasic.facebook.com

[+] overcast|8 years ago|reply
As much as I'd love for the majority of JS to go away, there is no denying the usefulness of AJAX in web forms. Doing page submit is not a better experience for the user or the developer. That's basically the only piece that I can't see going without.
[+] prophesi|8 years ago|reply
Yeah, I only want Javascript for when it actually speeds up a site. Which, from my experience, is simply:

  AJAX for all form submissions
  Service Worker for caching
  Turbolinks[0] for page navigation
And those are easy to implement as progressive enhancements. If JS is disabled, the submit button does a regular page submit, the Service Worker is simply not registered and instead uses your web server's cache policy, and your links remain as regular hyperlinks.

[0] https://github.com/turbolinks/turbolinks

[+] danjme1|8 years ago|reply
Most content specific sites (which is what we're talking about right?) and Wordpress et al have RSS feeds out of the box, if you're that obsessed with making browsing that fast surely aggregating feeds is by far the fastest way to browse?
[+] parvenu74|8 years ago|reply
When the statistical body of internet users who refuse to use JavaScrpit are expressed in terms of a market to whom custom (JS-free) experiences will induce them to pay money for products and services we'll begin to see businesses create JS-free experiences for them.

Are there marketing-specific attributes of anti-JS web users?

[+] etatoby|8 years ago|reply
We simply get information on what stuff to buy from websites that work and ignore those that are broken.

My mobile browsing experience has been immensely better since I installed Brave and set it to block everything by default, including js.

When I'm presented with a blank page (not very often) I evaluate in a split second whether the several seconds needed to reload the site with js enabled are worth its content.

90% of the times the answer is no, so I click Back and then try the next search engine result for the same query. 10% of the time I really want to see or use that particular website, so I enable js for it on Brave's panel and wait for it to reload.

Summary: 1 additional click and 1 additional reload (to be only paid once) on websites I care about. ∞ less nuisance on everything else.

[+] textmode|8 years ago|reply
"I Used The Web For A Day With Javascript Turned Off."

I Used the Web For A Decade With Javascript Turned Off.

I have been using the Web for over a decade via software that has no Javascript capabilities.

There is a conception one can detect in this article that there is only one "working" look for any website: the look that the designer intended.

However IME many websites "work" without ever engaging the "look" the designer intended. To discuss this, one needs to first specifically define what it means for a website to "work". I am not sure agreement can be reached on that issue.

It may be that the definition of "work" varies with each user. Different users may want different experiences. I know what I want from websites: data. I am less concerned with design. This may not be the case for another user.

The author cites Amazon as an example website.

When I am only browsing Amazon I do not use a "modern" web browser nor Javascript. Without a browser nor Javascript I can download product data in bulk, convert it to CSV and import it into kdb+ for easier searching and viewing. Without a browser nor Javascript I can download images of interesting products and embed them into a simple PDF for offline viewing, using pdflib.

When I am ready to purchase, then I might move to a "modern" browser with Javascript-enabled.

Other example websites he gives are Wordpress, Github, Instagram, Twitter and YouTube. I read the content of all these sites without ever using a "modern" browser nor Javascript. If I want to view images or video, I can download them as in the above case of Amazon. I may choose to view the data in whatever application I choose on whatever computer I choose on the local network, and the computer need not be connected to the internet.

For this user, these websites "work" just fine without Javascript. I can always use a "modern" browser with Javascript if I want to see what the designer intended. However this is rarely necessary for the experience I seek.

[+] rhacker|8 years ago|reply
The referenced site BlockMetry.com doesn't seem to go into how it calculated 0.2% as having JS disabled. Especially since it references Tor traffic as a high percentage my guess is that each connection was coming into the site with different fully-wiped Http connections basically disabling tracking. Alternatively what percentage of that traffic is simply cache bots for search engines, etc...
[+] stepvhen|8 years ago|reply
i want to invite others to try to visit Yelp on mobile with JS turned off. first off, you canr access anything. then the website provides nonsense reasons for why a user should have js turned on, and tries to guilt the user into doing do.

i always have js off by default, and turn it on momentarily when i feel it necessary. i do not feel it necessary for yelp.

[+] waldfee|8 years ago|reply
the 600kb isn't even that bad. it's 2x the amount of requests that makes it so much worse
[+] addicted|8 years ago|reply
The JS version loads 4times slower, despite only needing 600kb more.

Goes to show how much effect the large number of requests have.

[+] klez|8 years ago|reply
For perspective that's approx. a quarter of the size of the original DooM. And it's probably minified. And it does little more than fetching info from a couple data sources, formatting and showing it.
[+] NVRM|8 years ago|reply
W3M !!! Well done pages runs fine in w3m. Think about viewing it in 20 years. Another good test is to see the rendering in archive.org .
[+] samirillian|8 years ago|reply
Honestly, I don't see the wordpress backend as a relevant test case. Whoever else you might be catering to, it's fair to assume that someone building a website would have JavaScript enabled while developing.
[+] majewsky|8 years ago|reply
90+% of the people using Wordpress backends do not build websites. They just author content.
[+] halite|8 years ago|reply
Might as well try living a day without water.
[+] TeMPOraL|8 years ago|reply
JavaScript is not water. JavaScript is Brawndo, the sports drink. Used in business of watering plants. Because it has electrolytes.
[+] NoGravitas|8 years ago|reply
Meanwhile:

requests blocked

on this page

168 or 96%