Discussion on: GitHub ditched jQuery

View post

Lets be clear not everything needs to work without JS for a project to be a progressive enhancement success.

The feed on GitHub might have been deemed non-essential.

There should be better ways to handle than turning off features, but how do you get a dynamic feed without JS? You don't. Technically you could iframe it, or queue it for generation, use a refresh header, but then you risk interrupting other user behaviours.

I have a number of systems that use progressive enhancement for everything from infinite loading (prev, next, pushstate) which requires JS (fallback is standard pagination) to a SaaS GUI.

Browsers need to give people mechanisms beyond iframes if you want dynamic content without JS.

We know from the horror that is current gen single-page (garbage pile) apps that server side is a problem, but full SPA's cannot be progressive as they require JS to coordinate.

What else is missing? Does serviceworker exist without JS (it shouldn't as they are written in JS), what about the JS browsers use. If it's not off then addons & extensions could be draining battery anyhow. If it's not off, how do we ensure that malicious actors don't work out how to escalate scripts?

We need better browser-tools, native hypertext placeholder that are replaced if a URL is available are one. You can sort-of get that using headers and iframes. As my understanding goes that harms accessibility.

What about auto-complete? Firefox can search a site if you have OSD markup using search box or address bar. Could a non-JS input[type="search"] use that same data too? How do we format the results to be less than title, url?

In the case of autocomplete, what about linked fields? Some software I've written has custom markup for autocomplete content, uses linked fields, has required exists (similar to ) functionality. The only way I could get that without wasting lots of time & energy was with jQuery (although the code is nearly half-a-decade old now it works).

What about rich editing UI's like TinyMCE? It'd for-sure be nice to have some form of alternative for that which can be sent without JS. Again, a piece of software like that has no non-JS alternative I'm aware of.

Nor do any image editors with CanvasJS AFAIK

I don't have answers. I don't work for major browsers. I'm glad that large orgs are looking to avoid unnecessary JS, but it'll be a while before it can deliver native application experience, or sadly dated application experience without scripting.

rhymes • Sep 9 '18

Lets be clear not everything needs to work without JS for a project to be a progressive enhancement success.

The feed on GitHub might have been deemed non-essential.

Sure, I was totally teasing :-)

There should be better ways to handle than turning off features, but how do you get a dynamic feed without JS? You don't. Technically you could iframe it, or queue it for generation, use a refresh header, but then you risk interrupting other user behaviours.

You can probably simply render the last 10 items of activity in HTML and that's it.

This is how the page looks without JS:

I don't have answers. I don't work for major browsers. I'm glad that large orgs are looking to avoid unnecessary JS, but it'll be a while before it can deliver native application experience, or sadly dated application experience without scripting.

I feel like we're on different points on this. The purpose of progressive enhancement is not to give users the same exact experience, is to give users a functional experience. I can use GitHub without JS but I know I lose comment previews and stuff like that. The website goal is still 100% reached.

To use a search bar you don't need autocomplete and so on. Also why would you need service workers in a HTML + CSS web app?

I applaud your effort but I don't share the same goal.

The failure is when with JS turned off you get no website or a broken one.

I was reading an article (only images and text) on Vice Italy a few minutes ago, just for curiosity I tried to reload the article link with JS disabled and I got a blank page, with nothing on it. I have no idea what CMS they use but there's no reason in the world to have a magazine website to be completely broken without JS.

The point of progressive enhancement is to let me read the content and see the images even if I don't have flashy animations or preloading :D

ZaneHannanAU • Jun 9 '19 • Edited

For the feed thing, you can use something similar to EventSource infinite pipe. Eg:

.list {
  display: flex;
  flex-flow: column-reverse nowrap;
}
.list > .item:nth-last-of-type(n+16) {
  display: none;
}

let l, o = new MutationObserver(_=>{
  while (l.childElementCount > 64) 
    l.firstChild.remove();
});
requestAnimationFrame(function m(){
  l = document.querySelector(".list")
  if (l) o.observe(l, {
    childList: true,
    subtree: false,
    attributes: false
  });
  else requestAnimationFrame(m);
});

This is about the simplest one I can come up with btw. It's pretty dumb.