PoP now treats Javascript as progressive enhancement

PoP now treats Javascript as a progressive enhancement, meaning that browsing a PoP website from a device with no support for Javascript will still work. This feature is available since adding server-side rendering to PoP. To check it out, simply disable Javascript from your browser, and refresh this current website.

You can also force the website to remove all Javascript output from the page. This could be useful in several scenarios, such as testing the overhead from adding Javascript to a site. (For simple blogs for emerging markets, a very basic HTML-only website might work better). For this, simply add parameter config with value disable-js to the site URL. To test it, please check it out on any of these websites: https://www.mesym.com/en/?config=disable-js and https://agendaurbana.org/es/?config=disable-js.

Currently, around 80% of all functionality can be accessed without Javascript (check below to see what is still missing), including:

  • All content in the website is browsable
  • The “Load more” button works, it simply refreshes the page to show more content instead of doing infinite-scroll
  • Search works
  • All interaction with the website works: users can log-in, add a new post, follow other users, etc
  • Modal windows, such as opening a Google Map, work; instead of opening in a modal, they open in a new tab
  • etc

Some examples of functionalities with(out) Javascript support:

Adding comments:

adding-comment-js

Adding a comment with Javascript enabled: it opens an inline window.

adding-comment-no-js

Adding a comment with Javascript disabled: instead of opening an inline window, it opens on a new browser tab.

Searching:

search-js

Searching with Javascript enabled: a typeahead offers results immediately.

search-no-js

Searching with Javascript disabled: it simply performs the search, refreshing the page.

Work still to be done

There are still plenty of kinks to be ironed out for this functionality to work 100%, such as:

  • Adding a comment uses TinyMCE, which relies on Javascript; it should just use a standard textarea in this case
  • Events calendar is still printed using Javascript
  • Google Maps does not print a fallback image
  • Comments rely on Javascript to be added to the DOM
  • Plenty of modules make sense only when Javascript is enabled (eg: filter posts by section). These should either be hidden, or, even better, not added to the configuration in first place if Javascript is not supported
  • Bootstrap components are still rendered, such as collapses, carousels, etc

As usual, enjoy!


Sign up to our newsletter:

Welcome to the PoP framework!
Break the information monopoly

the PoP framework is open source software which aims to decentralize the content flow and break the information monopoly from large internet corporations. Read more.