Skip to content

Instantly share code, notes, and snippets.

@WebReflection
Last active December 1, 2020 14:14
Show Gist options
  • Save WebReflection/d03d73c5934cff66036a22d678085f54 to your computer and use it in GitHub Desktop.
Save WebReflection/d03d73c5934cff66036a22d678085f54 to your computer and use it in GitHub Desktop.
A privileged answer to a well known issue.

This site throws in users and, most importantly, developers face, the fact publishing websites with hundreds of JS Kilobytes just to see some content, content that might also break due JS itself or browsers that haven't been tested or targeted, is very bad.

The same site is also great to remind everyone that a11y (accessibility) matters, and if you got upset by its disruptive technique, and you are a Web developer, now you know how it feels for people incapable of surfing the "modern Web" with its overly-bloated frameworks and practices that way too often don't take a11y into account.

However, JS is not to blame here, while developers abusing JS without following graceful enhancement practices, or without testing their sites offer some meaningful content even for users that might have disabled JS for whatever reason, are to blame so ... please "don't be that kind of developer".

That being said, as an exercise to see if I could surf it via JS, I've created this tiny snippet you can copy and paste in the browser console ... and after all, if it breaks, or make the browsing less natural or broken, you got the point JS should rarely be the only way to present Web content 👍

(async function IamPrivileged(event) {
  const {href} = event.currentTarget;
  if (href.indexOf(location.protocol + '//' + location.hostname))
    return;
  if (event.isTrusted)
    event.preventDefault();
  const html = await (await fetch(href)).text();
  const doc = (new DOMParser).parseFromString(html, 'text/html');
  const [head, body, noscript] = doc.querySelectorAll('head,body,noscript');
  const {documentElement} = document;
  documentElement.replaceChild(head, document.head);
  documentElement.replaceChild(body, document.body);
  while (noscript.hasChildNodes())
    body.insertBefore(noscript.firstChild, noscript);
  for (const a of document.querySelectorAll('a'))
    a.addEventListener('click', IamPrivileged);
  const {textContent} = head.querySelector('title');
  const method = event.isTrusted ? 'pushState' : 'replaceState';
  history[method](href, textContent, href);
  addEventListener(
    'popstate',
    IamPrivileged.pop || (IamPrivileged.pop = ({state}) => {
      IamPrivileged({target: {href: state}});
    })
  );
}({currentTarget: location}));
@WebReflection
Copy link
Author

Sure, I just would like to provide a way for mobile to see it ... and I have few other ideas

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment