redesign icon indicating copy to clipboard operation
redesign copied to clipboard

Published 20 hours ago • verified publisher icon smashingmagazine

Some features fail non-gracefully without Javascript

Open daprice opened this issue 8 years ago • 2 comments
trafficstars

- Do you want to request a feature or report a bug? Bug

- What is the current behavior? A number of features fail non-gracefully if Javascript does not run. A few of these that I noticed include:

  • "Get the book" buttons do nothing when clicked
  • "Get tickets" buttons take the user to an infinite loading animation
  • Membership/login page is an infinite loading animation
  • Typing something in the search bar and pressing Enter simply reloads the page and does not search
  • All articles show as having 0 comments
  • Table of contents is empty

- If the current behavior is a bug, please provide the steps to reproduce. Disable Javascript in the browser and try the above actions

- What is the expected behavior?

  • The broken features (i.e. "get the book", "get tickets," membership page, search) should either degrade gracefully or display a message stating that JS is required to use those features.
  • Instead of incorrectly showing 0 comments, either don't display any comment info without JS or display a message that JS is required to view comments
  • Non-essential enhancements (e.g. table of contents for articles, if that has to be generated client-side) should be totally hidden instead of left empty if JS doesn’t run

- Please mention your operating system version and the version of your browser MacOS 10.12.3, Safari 10.0.3

daprice avatar Mar 17 '17 22:03 daprice

Dear @daprice — all great points! But doesn't search degrade gracefully to Google search?

vitalyfriedman avatar Mar 18 '17 22:03 vitalyfriedman

@vitalyfriedman Not when I test it. With JS disabled it looks like I still see the form with ID js-search-form, which doesn’t have an action attribute, so submitting it just reloads the current page with the query appended to the url, e.g. https://next.smashingmagazine.com/?q=test&sitesearch=smashingmagazine.com&submit=Search.

I tested this in both Safari 10.0.3 and Firefox Developer Edition 54. Here are my exact steps:

  1. Disable JS in the browser (from the Develop menu in Safari or the Developer Toolbox Options in Firefox)
  2. Navigate to next.smashingmagazine.com
  3. Click into the “Search Smashing” field near the top of the page (when inspected, this has the ID js-search-input)
  4. Type a query and press Enter

daprice avatar Mar 18 '17 23:03 daprice