Should Your Website Work Without JavaScript?

Scott Tolinsky and Wes Bos discuss whether websites should function without JavaScript, emphasizing the importance of progressive enhancement. They argue that while most users do not disable JavaScript, websites should still be accessible and functional without it due to factors like slow networks or browser issues. They highlight that core content and basic interactions should rely on HTML and CSS, with JavaScript enhancing the experience. They explore practical examples, such as forms and links, and stress the importance of server-side rendering. The conversation underscores the need for a balance between leveraging JavaScript and maintaining robust, standards-based web functionality.

• Discussion on whether websites should work without JavaScript.
• Addressing a viral clip that sparked debate on the necessity of JavaScript.
• Clarifying the stance on progressive enhancement and JavaScript usage.

"Welcome to Syntax on this Monday Hasty treat. We're going to be talking about does your website need JavaScript? Should it work without JavaScript?"

• The podcast episode aims to answer if websites should function without JavaScript.
• Emphasis on the importance and scenarios of using JavaScript.

• The viral clip suggested that people do not turn off JavaScript, causing backlash.
• Clarification that the statement was about the rarity of users disabling JavaScript, not its importance.

"Do people turn off JavaScript? The clip was like there's no chance people are surfing the web with JavaScript turned off. And that made a lot of people pretty peeve."

• The initial statement was misunderstood; it was about the uncommon nature of users disabling JavaScript.
• The hosts acknowledge that JavaScript can fail due to various reasons, and websites should still be accessible.

• Websites should be built to work with minimal dependencies on JavaScript.
• Emphasizing the need for websites to be readable and functional even if JavaScript fails.

"Your website should load, it should be readable, and mostly styled with JavaScript. You should be able to get to all of the contents and be able to consume the website at least before the JavaScript even has a chance to run."

• Websites should prioritize content accessibility and basic functionality without relying on JavaScript.
• Progressive enhancement ensures a good user experience regardless of JavaScript availability.

• Examples of websites that work well without JavaScript.
• Discussion on the impact of slow and spotty networks on JavaScript-dependent websites.

"Go to Westboss.com, go to Syntax.fm, turn off JavaScript, and you'll notice that you'll be able to experience and read 97% of the website and its features without having JavaScript turned on."

• Real-world examples demonstrate that well-designed websites can function largely without JavaScript.
• Highlighting the importance of catering to users with unreliable internet connections.

• Explanation of hydration in web development and its role in enhancing HTML content with JavaScript.
• How modern frameworks like Next.js and SvelteKit handle server-side rendering and hydration.

"If we're talking about a website that works without JavaScript, the information, the HTML is written on the server, it is being loaded via a request, and then parsed into the DOM and then loaded as just straight-up HTML and CSS."

• Hydration allows websites to initially load HTML and CSS, ensuring basic functionality before JavaScript kicks in.
• Modern frameworks support progressive enhancement by separating initial content loading from JavaScript enhancements.

• Advocating for building websites with web standards first.
• Ensuring that essential features like navigation and forms work without JavaScript.

"It's web standards first. You should be building your website with standards first. If it can be done without JavaScript, it should be done without JavaScript."

• Prioritizing web standards ensures broader accessibility and reliability.
• Essential website features should be designed to function independently of JavaScript.

• Reinforcement of the importance of progressive enhancement in web development.
• Acknowledgement of the balance between leveraging JavaScript and ensuring basic functionality without it.

"You shouldn't be relying on it. I do think people brought their own personal biases to that tweet. That clip was not saying what a lot of people read it or listen like."

• The hosts reiterate their support for progressive enhancement and the prudent use of JavaScript.
• Emphasizing the need for a balanced approach to web development that considers all users.

These comprehensive study notes cover the key ideas and discussions from the podcast transcript, providing a detailed overview of the themes and their relevance.

• Progressive enhancement starts with a basic, accessible, and readable content-first approach.
• Enhancements are added on top of the basic content to improve user experience.
• New web standards provide functionalities traditionally handled by JavaScript, reducing dependency on JavaScript.
• Example: Popover in HTML and CSS can replace JavaScript implementations for better performance and reliability.

"The whole idea behind Progressive enhancement is that you start with something that is accessible, that is readable, that is just the content first, and then you add on top of that to make a better experience for your users."

• Explanation: Progressive enhancement ensures that a website remains functional and accessible even if advanced features fail to load.

"With these new APIs, you're getting so many great things, like the popover, those types of things that you would always having to reach for JavaScript for."

• Explanation: New web standards like popover in HTML allow developers to achieve functionalities without relying on JavaScript, enhancing performance and reliability.

• Emphasizes using less JavaScript and leveraging web standards wherever possible.
• Forms should have actions that post data to the server and use JavaScript to enhance user experience without breaking functionality.
• Example: Using form elements and actions to ensure forms work without JavaScript and enhance them with JavaScript for a better user experience.

"I went to a JavaScript conference to talk about how to not write JavaScript. I'm definitely of the mind that you should be using less as much as possible."

• Explanation: The speaker advocates for minimizing JavaScript usage and prioritizing web standards.

"If there's a way to do it with web standards, we should be doing it that way first and then adding a bit of JavaScript on top of it."

• Explanation: Web standards should be the primary solution, with JavaScript used to enhance functionality only when necessary.

• Forms should be set up to work without JavaScript and enhanced with JavaScript if available.
• Example: Using form actions and enhancing them with JavaScript to avoid breaking functionality if JavaScript is not available.
• Frameworks like SvelteKit have successfully implemented this approach.

"You write interactivity to the server as a form, you set it up like you would as if it were to work without JavaScript, and then you just sprinkle on it."

• Explanation: Forms should be designed to function without JavaScript and then enhanced with JavaScript for a better user experience.

"That's the API to use: links. The amount of websites I've been on where you can't open something in a new tab when it's clearly a link to something."

• Explanation: Ensuring that links and forms work correctly without JavaScript is crucial for usability and accessibility.

• URLs should reflect the state of the application to ensure shareability and usability.
• Using query parameters in the URL helps manage state changes and ensures that these changes can be shared easily.
• Example: Filtering options on a website should use query parameters to reflect the state in the URL.

"Your URL is your state. If I have a state change in my application, it should be able to be shared that way, and the way that is accomplished is via query parameters in the URL."

• Explanation: Managing state through URL query parameters ensures that application state changes are shareable and accessible.

"Form data and query parameters are the two major pieces of state management that people are ignoring."

• Explanation: Proper use of form data and query parameters is essential for effective state management and shareability.

• Server-side rendering (SSR) is compared to client-side rendering (CSR) using an analogy of bringing a prepared dish to a party versus bringing ingredients and preparing the dish at the party.
• SSR prepares the content on the server and sends the final result to the client, improving performance and user experience.
• CSR requires the client to assemble the page, leading to longer load times and potential issues.

"Server-side rendering is you make it at home first and then you simply just bring the end result with you."

• Explanation: SSR improves performance by delivering pre-rendered content to the client, unlike CSR, which requires the client to assemble the content.

"Client rendering is that you have to bring the API, you got to bring all of your libraries, you got to bring all the rendering steps and then you're basically waiting for the page to load."

• Explanation: CSR involves more steps and dependencies, leading to longer load times and potential performance issues compared to SSR.

• Definition and Importance:
  • Progressive enhancement ensures that web content is accessible to everyone, including those with slow internet connections, assistive technologies, and low-power devices.
  • Enhancements are added on top of the baseline functionality to improve the experience for users with modern browsers and fast connections.
  • The core idea is that if something breaks or if users access the content in unexpected ways, they can still interact with the basic features.

"Progressive enhancement is this idea of at a baseline your content should be built on web standards so that it works for absolutely everyone."

• The baseline ensures universal accessibility, while enhancements improve the experience for the majority.

"You make the experience better for the majority of your users who are on Fast connections and modern browsers."

• Enhancements are layered on top of the basic functionality to cater to advanced users.

• Historical Context:

  • Initially, progressive enhancement was often applied to CSS to ensure that sites looked acceptable even without the latest features.
  • As JavaScript became more prevalent in applications, the same principles were applied to ensure core functionality without JavaScript.

"A lot of folks first approached Progressive enhancement from a place where it was a CSS thing."

• The concept started with CSS but has expanded to include JavaScript and other technologies.

• Practical Examples:

  • CSS page transitions serve as an example where the absence of JavaScript results in a normal page navigation experience without animations.
  • The concept is akin to an escalator that becomes stairs when it stops working; it still functions but in a simpler form.

"CSS page transitions if you don't have JavaScript going on... the fallback is that it just works like normal."

• The fallback ensures basic functionality without advanced features.

"The escalator is temporarily stairs... if it does not not work, it still works, it just works in a different way."

• This metaphor illustrates the essence of progressive enhancement.

• Sentry Syntax Shop Example:
  • With JavaScript turned off, CSS animations still work, and basic form functionalities like radio buttons remain operational.
  • Quantity increment buttons, which rely on JavaScript, do not work, but users can manually input values.

"That little animation that still works with CSS which is pretty nifty... if you want to change the size that you have here that still works because that's probably a checkbox."

• Basic functionalities like CSS animations and radio buttons continue to work without JavaScript.

"Those plus and minus buttons are hooked up to JavaScript... it's been progressively enhanced... I can just type it with my keyboard here."

• Users can manually input values when JavaScript-dependent elements fail.

• Suggestions for Improvement:

  • Disable or hide non-functional UI elements until JavaScript loads to prevent broken experiences.
  • Consider alternative designs, like making the quantity input a form that refreshes the page upon submission.

"Those plus and minus buttons should probably be disabled or hidden in a way if JavaScript has not been loaded."

• Disabling or hiding elements prevents user confusion.

"Should this be a form in itself... should that just submit the form oh and refresh the whole page."

• Alternative design considerations to maintain functionality.

• JavaScript Disabled Experience:
  • The Syntax website functions seamlessly without JavaScript for basic navigation.
  • Page transitions revert to full page reloads instead of animations, adhering to the progressive enhancement principles.

"You can't even tell JavaScript is not enabled on this page because it's there's nothing needed on this page."

• The site maintains full functionality without JavaScript.

"It's just a regular full page reload instead of the fancy Zoom."

• Basic navigation remains intact, showcasing effective progressive enhancement.

• Discussion on the necessity of JavaScript for certain web functionalities.
• Consideration of alternative methods for audio playback and persistent audio players.
• Examination of the limitations of web applications without JavaScript.

"We had an audio player on our site that we wanted to be persistent while the user browsed pages and in a pre JavaScript framework world that wasn't possible."

• Persistent audio players were challenging to implement before JavaScript frameworks.

"You could have the fully styled player pop open in its own window, that way you could still navigate the site while the player is playing."

• Solution involved opening a fully styled player in a new window to maintain persistence.

"You can't style the audio element though, can you? CSS can you not?"

• Discussion on the limitations of styling native audio elements using CSS.

"You can set the accent color, but that's about it."

• Only limited styling options are available for native audio elements.

"The search is not done server side either, it's all client side."

• Client-side search functionality relies heavily on JavaScript.

"A lot of these sign-ins won't even work if you are blocking Google, because they're all using recaptcha."

• Sign-in processes often depend on JavaScript for recaptcha functionalities.

"Can you generate the client side recaptcha token on the server and then put that in the HTML and then check and you do a request back?"

• Exploring potential workarounds for generating recaptcha tokens server-side.

"The way that video works for something like Netflix is that what you're loading is the M3 u8 file... and what that file is is essentially a map to all of the chunks of video that it needs to download."

• Explanation of how video streaming services like Netflix use JavaScript to manage video chunks.

"If you don't do it that way, before a video plays it would have to download that entire video to your site."

• Without JavaScript, the entire video would need to be downloaded before playback.

"People expect websites to work without JavaScript but people don't expect web apps to work."

• Differentiation between user expectations for websites and web apps regarding JavaScript functionality.

"If you want your web app to work without JavaScript often the solution to that is load a bunch of JavaScript first."

• Irony that making a web app work without JavaScript often involves preloading JavaScript.

"What about service workers and loading your scripts locally because you're loading a cached script locally therefore you're not having to wait for the network?"

• Service workers can help load JavaScript from local cache, mitigating network issues.

"If your connection is spotty, requests will fail intermittently, but for JavaScript, a lot of that is just going to be in your cache anyway."

• Local caching of JavaScript can improve performance even with unstable connections.

"TikTok, the whole page doesn't even load nothing like it's just white."

• TikTok is heavily reliant on JavaScript, leading to a non-functional site without it.

"GitHub will load most of it, you can still load the source code and you can still load readme and things like that but things like the Emoji replies in discussions or your own personal feed will not load."

• GitHub has partial functionality without JavaScript, but enhanced features require it.

"Should your website work without JavaScript? Yes, mostly."

• Websites should strive to function without JavaScript for basic accessibility and standards compliance.

"Very few people are actually turning off JavaScript, and most of the people that are doing it are developers."

• While few users disable JavaScript, developers should still consider non-JavaScript scenarios.

"Building websites via web standards makes your life easier at the end of the day."

• Adhering to web standards simplifies development and enhances accessibility.