{"id":294459,"date":"2019-09-02T07:07:22","date_gmt":"2019-09-02T14:07:22","guid":{"rendered":"https:\/\/css-tricks.com\/?p=294459"},"modified":"2019-09-08T14:39:07","modified_gmt":"2019-09-08T21:39:07","slug":"should-a-website-work-without-javascript","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/should-a-website-work-without-javascript\/","title":{"rendered":"Should a website work without JavaScript?"},"content":{"rendered":"<p>The JS Party podcast just had <a href=\"https:\/\/changelog.com\/jsparty\/87\" rel=\"noopener\">a fun episode<\/a> where they debated this classic question by splitting into two groups of two. Each group was assigned a &#8220;side&#8221; of this debate, and then let loose to debate it. I don&#8217;t think anybody can listen to a show like this and not be totally flooded with thoughts! Here are mine.<\/p>\n<p><!--more--><\/p>\n<ul class=\"thoughts-list\">\n<li>This is one of those holy war arguments that has raged on for years. Perhaps that\u2019s because people are seeking an answer that <strong>applies to the entire web<\/strong>, and the web is <strong>too big<\/strong> to pin this broad of an answer to. <\/li>\n<li>The question itself worth a look. Why are we talking about <strong>hamstringing our sites in this particular way<\/strong>? Should our websites work without HTML? Should our websites work without databases? Perhaps we focus on JavaScript the most because JavaScript has become <a href=\"https:\/\/css-tricks.com\/the-bottleneck-of-the-web\/\">the largest bottleneck of web performance<\/a> (even more so than the network!) and we <strong>experience<\/strong> failed JavaScript more so than any other type of web failure (except, perhaps, entire sites not loading) (or <a href=\"https:\/\/twitter.com\/scottjehl\/status\/1162008514455363585\" rel=\"noopener\">icons fonts<\/a>, jeez).<\/li>\n<li>I enjoyed all the stumbling around the terminology of &#8220;web apps&#8221; and &#8220;web sites&#8221; (<em>web things!<\/em>). This is such a weird one. It&#8217;s so easy to picture the difference in your head: <em>it&#8217;s like facebook versus a blog!<\/em> But when you start trying to define it exactly, it gets really murky really quickly and the distinction loses any value, if it had any to start with. <a href=\"https:\/\/css-tricks.com\/poll-results-sites-vs-apps\/\">Here&#8217;s more on that.<\/a><\/li>\n<li>Accessibility is certainly involved in all conversation about the web, but it probably can&#8217;t be broadly applied here. There is a notion that assistive tech doesn\u2019t run JavaScript \u2014 so a site that requires JavaScript to use it is a 100% fail for those users. Best I know, that\u2019s entirely not the case anymore. We can debate to death the role of JavaScript in accessibility problems, but just because a particular site requires JavaScript to run doesn&#8217;t by itself render the site inaccessible.<\/li>\n<li>It\u2019s easy enough to flip off JavaScript, browse around the web, find broken things, and chinflip them for this apparent failure. The failure being that this site, or a feature on the site, <em>could<\/em> have been architected to work without JavaScript. Rule of least power. This is tricky. It\u2019s easy not to care about a person who has intentionally disabled a part of their web browser and still wants everything to work. I straight up don\u2019t care about that. But the <strong>resiliency<\/strong> part is more interesting. If you <em>do<\/em> build a part of a site to work without JavaScript, it will work both before and after the JavaScript executes, which is pretty great.<\/li>\n<li>The concept of building functional content and features without JavaScript and enhancing the experience with JavaScript is called <strong>progressive enhancement<\/strong>. I&#8217;m both a fan and careful not to insist that everything on earth is always to be built that way (see top bullet point). There are situations where progressive enhancement both increases and reduces technical debt. The only wide brush I&#8217;d use here is to say that it&#8217;s worth doing until the debt is too high.<\/li>\n<li>There is <strong>an in-between moment<\/strong> with progressive enhancement. If a feature is functional without JavaScript, that means it&#8217;s likely you are deferring the loading of that JavaScript for the performance benefit. But it does eventually need to be downloaded and executed. What happens during that time? There is a performance and <abbr>UX<\/abbr> cost there. Best case, it&#8217;s negligible. Worst case, you break the feature during this in-between time.<\/li>\n<li>I find it more interesting to debate this kind of thing on a site-by-site and feature-by-feature basis. <a href=\"https:\/\/jasonformat.com\/application-holotypes\/\" rel=\"noopener\">Application holotypes<\/a> might be an interesting way to scope it. They often turned to Slack as an example which is a perfect choice. How would you build a 20-author movie review site? How you would architect a social and media-heavy site like Dribbble? How do you build dropdown navigation? What about a one-page brochure site where the client wants parallax? How about an airline app that needs a native mobile app as well? And of course, it makes you think about sites you work on yourself. Does CodePen run on the right set of technologies? Does CSS-Tricks?<\/li>\n<li>If a site is &#8220;client-side rendered&#8221; (<abbr>CSR<\/abbr>), that means JavaScript is doing the data fetching and creating the DOM and all that. If we&#8217;re talking about websites &#8220;working&#8221; or not with or without JavaScript, a site that is client-side rendered will 100% fail without JavaScript. It is sort of the opposite of &#8220;server-side rendered&#8221; (<abbr>SSR<\/abbr>) in which the document comes down as HTML right from the server. <abbr>SSR<\/abbr> is almost certainly faster for a first-loading experience. <abbr>CSR<\/abbr>, typically, is faster to move around the site after loading (think &#8220;single page app,&#8221; or <abbr>SPA<\/abbr>).<\/li>\n<li>It&#8217;s not just <abbr>SSR<\/abbr> vs. <abbr>CSR<\/abbr> &mdash; there is <a href=\"https:\/\/css-tricks.com\/the-client-server-rendering-spectrum\/\">a whole spectrum<\/a>. It&#8217;s more and more common to see sites try to take advantage of the best of both worlds. For example, Next\/Nuxt\/Gatsby, or Ember&#8217;s <a href=\"https:\/\/ember-fastboot.com\" rel=\"noopener\">fastboot<\/a>.<\/li>\n<li>Service workers are JavaScript. Web workers are JavaScript. Some of the fancy resilience and performance features of the web are powered by the same technology that causes the grief we debate about.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The JS Party podcast just had a fun episode where they debated this classic question by splitting into two groups [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":274707,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[905],"class_list":["post-294459","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","tag-opinion"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/abstract-color.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":355395,"url":"https:\/\/css-tricks.com\/responsible-javascript-2\/","url_meta":{"origin":294459,"position":0},"title":"Responsible JavaScript","author":"Chris Coyier","date":"November 2, 2021","format":false,"excerpt":"High five to Jeremy on the big release of Responsible JavaScript on A Book Apart. There is a lot of talk about how the proliferation of JavaScript has had a negative impact on the web, but now we have the canonical reference tome. The book is just chock-full of Jeremy\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/responsible-javascript-book-cover-aba.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/responsible-javascript-book-cover-aba.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/responsible-javascript-book-cover-aba.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/responsible-javascript-book-cover-aba.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/responsible-javascript-book-cover-aba.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":358612,"url":"https:\/\/css-tricks.com\/embrace-the-platform\/","url_meta":{"origin":294459,"position":1},"title":"Embrace the Platform","author":"Bramus","date":"December 13, 2021","format":false,"excerpt":"So what is the one thing that people can do is to make their website better? To answer that, let's take a step back in time \u2026 The year is 1998, and the web is on the rise. In an attempt to give a high-level overview of the architecture of\u2026","rel":"","context":"In &quot;2021 End-of-Year Thoughts&quot;","block_context":{"text":"2021 End-of-Year Thoughts","link":"https:\/\/css-tricks.com\/category\/2021-end-of-year-thoughts\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/toolbox-frameworks-scaled.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/toolbox-frameworks-scaled.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/toolbox-frameworks-scaled.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/toolbox-frameworks-scaled.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/toolbox-frameworks-scaled.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":274996,"url":"https:\/\/css-tricks.com\/slow-websites\/","url_meta":{"origin":294459,"position":2},"title":"Slow Websites","author":"Geoff Graham","date":"August 7, 2018","format":false,"excerpt":"The web has grown bigger. Both in expansiveness and weight. Nick Heer's \"The Bullshit Web\": The average internet connection in the United States is about six times as fast as it was just ten years ago, but instead of making it faster to browse the same types of websites, we\u2019re\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/median-webpage-stats.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/median-webpage-stats.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/median-webpage-stats.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/median-webpage-stats.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/median-webpage-stats.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":358037,"url":"https:\/\/css-tricks.com\/be-prepared-for-failure-and-handle-it-gracefully\/","url_meta":{"origin":294459,"position":3},"title":"Be Prepared for Failure and Handle it Gracefully","author":"Heather Migliorisi","date":"December 20, 2021","format":false,"excerpt":"When I was working at my first \u201creal\u201d job in the field in the mid-2000s, it was hammered in the web dev field to build tiny websites (no more than 100KB per page), only use JavaScript for special effects, and make sure everything\u2014from images to Flash content\u2014has a fallback so\u2026","rel":"","context":"In &quot;2021 End-of-Year Thoughts&quot;","block_context":{"text":"2021 End-of-Year Thoughts","link":"https:\/\/css-tricks.com\/category\/2021-end-of-year-thoughts\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/s_9F45834DC82146FF1EAFCD4B5C3DC124D1657CDB857916F17FB4621D6776621D_1637462763152_old-woman.jpg?fit=960%2C720&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/s_9F45834DC82146FF1EAFCD4B5C3DC124D1657CDB857916F17FB4621D6776621D_1637462763152_old-woman.jpg?fit=960%2C720&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/s_9F45834DC82146FF1EAFCD4B5C3DC124D1657CDB857916F17FB4621D6776621D_1637462763152_old-woman.jpg?fit=960%2C720&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/s_9F45834DC82146FF1EAFCD4B5C3DC124D1657CDB857916F17FB4621D6776621D_1637462763152_old-woman.jpg?fit=960%2C720&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":350160,"url":"https:\/\/css-tricks.com\/native-javascript-routing\/","url_meta":{"origin":294459,"position":4},"title":"Native JavaScript Routing?","author":"Chris Coyier","date":"August 23, 2021","format":false,"excerpt":"We can update the URL in JavaScript. We've got the APIs pushState and replaceState: \/\/ Adds to browser history history.pushState({}, \"About Page\", \"\/about\"); \/\/ Doesn't history.replaceState({}, \"About Page\", \"\/about\"); JavaScript is also capable of replacing any content in the DOM. \/\/ Hardcore document.body.innerHTML = ` <div>New body who dis.<\/div> `;\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/js-router.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/js-router.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/js-router.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/js-router.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/js-router.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":4731,"url":"https:\/\/css-tricks.com\/five-questions-with-david-walsh\/","url_meta":{"origin":294459,"position":5},"title":"Five Questions with David Walsh","author":"Chris Coyier","date":"November 18, 2009","format":false,"excerpt":"There is probably a good chance if you read this blog that you also know David\u00a0Walsh. David and I hail from the same hometown (Madison, Wisconsin) and have been friends for years. We've worked on a few projects together and have written a bunch of double-posts together. Mostly I just\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/294459","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=294459"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/294459\/revisions"}],"predecessor-version":[{"id":295526,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/294459\/revisions\/295526"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/274707"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=294459"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=294459"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=294459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}