Introduction
The three musketeers of Web development are indeed HTML, CSS, and JavaScript. The way you combine these three amigos can have a significant effect on your web page layout.
Not just the way you combine them, but also the way you actually write them. This means if you are using a feature in CSS or HTML that's not supported in all browsers; What will happen to users that use a browser that does not support the feature you've implemented?
Another scenario is when JavaScript is a core part of your application and you change or modify some page elements with it; What will happen to users who have JavaScript turned off in their browser? Or browse the Web with JavaScript turned off using a browser extension like NoScript?
I decided to find out. Rather than choosing some random sites to test, I handpicked some top websites on the Web today and opened their Home page with JavaScript turned off in my browser using the NoScript browser extension.
Based on the result, I categorize them into three categories namely; The Good, The Bad, and The Ugly.
Let's begin with the good.
The Good
In my research, for a website to be categorized as good that means the home page or at least the website is still usable with JavaScript disabled.
I am pretty sure you are not surprised with this selection. When you have JavaScript turned off in your browser Google redirects you to a mobile version of the page optimized for browsers with no capability to render JavaScript. You will also get the same view when you visit Google's homepage with Opera Mini.
Wikepedia
The online encyclopedia, seriously I was not expecting it to fail and it did not disappoint me. The home page is identical with or without JavaScript enabled in the users' browser.
Netlify
Have you ever heard of that name Netlify? Something tells me you have. There is only one significant difference in their homepage when JavaScript is disabled in the user's browser. Compare the images below and see if you can spot the difference.
The homepage looks solid with JavaScript disabled and almost no noticeable changes compared to when JavaScript is enabled.
Bing
Microsoft search engine is quite awesome with JavaScript disabled. Compared to Google it does not redirect to a no JavaScript version of the site. The least I can say about this is: resilient.
Smashing Magazine
In all reality I did not expect their site to fail without JavaScript and it did not.
Can you spot the difference? Don't worry it's quite minimal.
The Bad
For this page if any part of the web page fails to load it's considered bad.
Yahoo!
When you land on Yahoo!'s homepage with JavaScript disabled, you can only use part of the page, the rest of the page is the skeleton of what's supposed to load but it did not due to unavailability of JavaScript.
Say what? No am not kidding you. Twitter stops in your track if you have a browser with JavaScript disabled. They give you just an option to redirect to their legacy website which is mobile twitter on a desktop.
BBC
One of the most popular news website seemingly fails to load some images on the homepage if the user has JavaScript disabled in their browser.
Reddit's behavior when JavaScript is disabled is similar to Yahoo! Some page content load, other don't.
If you want to access Reddit with JavaScript disabled you can use https://old.reddit.com
The Ugly
For this research, if it's ugly that means most of the homepage content is unusable or totally unavailable without JavaScript.
YouTube
No JavaScript in your browser No videos for you on the desktop version of YouTube. You only get skeleton of page content that failed to load.
ThePracticalDEV
If JavaScript is disabled on DEV, you lose access to the most important information on the page i.e. the blog post.
The purpose of this research is to show that Resilient Web Design wins as shown by Google, Bing, Netlify, and Wikipedia.
Edited October 9, 2020: Grammar fix and deletion of obsolete canonical URL.
Top comments (20)
I saw somewhere that Twitter can load with JavaScript disabled "only for some User Agents".
The importance of use User Agent to Scraping Data
Hugo Sandoval ・ Apr 30 ・ 6 min read
Indeed, making your website require JavaScript does kill many high performance web scraping.
Thank you for the link @Pacharapol, I'll definitely read the article.
Do you have any resource that I can check for this? Or is it in the linked article?
No, I cite it myself.
Disable JavaScript means you cannot use merely
GETweb scraping (e.g. Python requests), and read the HTML output (e.g. Python BeautifulSoup). You will need to resort to more heavyweight method like Selenium or Puppetteer (Chrome engine).Excellent. Thanks for the info.
Interesting but what's the purpose of disabling JavaScript on websites?
It's a personal preference. Some Web users (like me) actually browser with JavaScript disabled in their browser. We tend to load scripts only on site we trust.
Turning off JavaScript on sites like YouTube, ThePracticalDEV and the likes was just for research purposes and to see what they'll be like with JavaScript disabled.
To protect yourself against XSS exploit. You enable JavaScript only on websites you trust. Like a firewall.
Definitely a good security practice to use noscript in my eyes. Once you get used to it there's no need to go back to js on by default.
It's satisfying to see so many adverts, Google analytics and other crud getting blocked by noscript. I get a good sense of the website by how many third party scripts it runs and what they are called.
One major pain point is cloudfront type hosting. In particular the AWS console will load entirely necessary content from literally dozens of different cloudfront domains that all need to be trusted individually... Every AWS service can use a bunch of different domains :( you can always just disable noscript for a tab though when you hit annoying niche cases like that though :)
Noscript is great, highly recommend it!
Hahaha I love how you threw DEV in there right at the end
As you can see even these web giants, and their top sites on the web do not work without javascript. So turning off javascript is a silly thing to do just because that is your personal preference or you afraid of some mostly non-existent threat. If you this type then just do not use the web then!!!
If you turn js off then you need to live with the fact that you can't use the majority of sites!
I remember times when some developers started trying to make it look trendy and cool and also smart to create sites that can be used with js on and off too. This stupidity only means doubling or tripling the time of development and the budget needed nothing else, which of course for those people is not clear as they are insane, and still some things are simply not possible without js anymore. It is the silliest idea...
That time I had to deal with this issue and face the fact that some people wanted me to create sites like that. It was very annoying and lot of wasting time of arguing on needles stupid things. Trying to make things work without js is not possible anymore or result in a very poor website.
I am not really a fan of javascript, but still... People just have to live with the fact that it is needed nowadays! So stop coming up with silly ideas and nonsense...
If we follow this logic we can try to use a computer with the CPU removed to see if it still works without it... Removing the CPU by the way also protect you from malware and viruses LOL
Experimenting is a good thing, but you should still keep your sanity!
JavaScript has too much power
I already commented the similar problems before: dev.to/bravemaster619/comment/mok2
Stackoverflow can be loaded without any Javascript.
There is notice at the top of the page that reads: Stack Overflow works best with JavaScript enabled.
How about DuckDuckGo? :)
When JavaScript is enabled the search results for DuckDuckGo are displayed with infinite scrolling, if there is no JavaScript, you get paginated results with
NextandPreviousbuttons.For the Home Page, the difference is really noticeable.
DuckDuckGo with JavaScript
DuckDuckGo without JavaScript
P.S. If you prefer the second but do have JS enabled, use start.duckduckgo.com/ instead. :)
I just noticed that the layout of start.duckduckgo.com is similar to the layout when JavaScript is disabled.
Thank you.
Interesting. I just built a site and I think I will need to revisit this because it does rely on JavaScript for a few key components.
Very interesting
The beautiful and useful css.gg ❤️
Some comments have been hidden by the post's author - find out more