Bookmarklet

[jocap]

Hi!

I really like the idea of a simple, plug-to-play theme, so I created a simple piece of JavaScript that removes all style sheets and replaces them with water.css (light by default), to be used as a bookmarklet on sites with terrible, unreadable style sheets. It also makes sure that the viewport is setup properly for mobile devices.

Here's the code for the bookmarklet that you can copy:

javascript:document.querySelectorAll('link[rel="stylesheet"]').forEach(e=>e.parentElement.removeChild(e));var x=document.createElement("link");if(x.rel="stylesheet",x.href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.css",document.head.appendChild(x),0==document.querySelectorAll('meta[name="viewport"]').length){var y=document.createElement("meta");y.name="viewport",y.content="width=device-width, initial-scale=1.0",document.head.appendChild(y)}

Here's the formatted code:

document.querySelectorAll('link[rel="stylesheet"]').forEach(x => x.parentElement.removeChild(x));
var x = document.createElement('link');
x.rel = 'stylesheet';
x.href = 'https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.css';
document.head.appendChild(x);
if (document.querySelectorAll('meta[name="viewport"]').length == 0) {
    var y = document.createElement('meta');
    y.name = 'viewport';
    y.content = 'width=device-width, initial-scale=1.0';
    document.head.appendChild(y);
}

[kognise]

This is awesome! Just fyi, the bookmarklet version doesn't work. This does:

javascript:(function()%7Bdocument.querySelectorAll('link%5Brel%3D%22stylesheet%22%5D').forEach(x%20%3D%3E%20x.parentElement.removeChild(x))%3Bvar%20x%20%3D%20document.createElement('link')%3Bx.rel%20%3D%20'stylesheet'%3Bx.href%20%3D%20'https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2Fkognise%2Fwater.css%40latest%2Fdist%2Flight.css'%3Bdocument.head.appendChild(x)%3Bif%20(document.querySelectorAll('meta%5Bname%3D%22viewport%22%5D').length%20%3D%3D%200)%20%7Bvar%20y%20%3D%20document.createElement('meta')%3By.name%20%3D%20'viewport'%3By.content%20%3D%20'width%3Ddevice-width%2C%20initial-scale%3D1.0'%3Bdocument.head.appendChild(y)%3B%7D%7D)()

[kognise]

Btw this is an AWESOME idea! It's so useful for making complicated pages simple. This would also make a ncie extension.

If only some websites were more semantic cough cough medium

[jocap]

Thank you! And thanks for fixing the bookmarklet. It did work for me in Firefox and iOS Safari.

…

8 apr. 2019 kl. 06:39 skrev Kognise ***@***.***>: Btw this is an AWESOME idea! It's so useful for making complicated pages simple. This would also make a ncie extension — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[kylejrp]

@kognise Do we want to support this and add it to our docs somewhere?

[jonaskuske]

Love the idea of a bookmarklet! Already used it on some horrendous sites and it was awesome! 🎉

I'd really love to have the respective link in the README, so you can just drag & drop it from there into your favorites bar – but I didn't manage to escape the bookmarklet in a way that GitHub's markdown would accept it as URL. 😕

---

Anyhow, this would be an alternative implementation – minifies a little better (although this is admittedly not that important for a bookmarklet 😄) but also removes inline stylesheets and inline styles:

javascript:(()=%3E{let%20a=document,b=b=%3Ea.querySelectorAll(b),d=(b,c)=%3EObject.assign(a.createElement(b),c);b(%22link[rel=\%22stylesheet\%22],style%22).forEach(a=%3Ea.remove()),b(%22*%22).forEach(a=%3Ea.style=%22%22),a.head.append(d(%22link%22,{rel:%22stylesheet%22,href:%22//cdn.jsdelivr.net/gh/kognise/water.css%40latest/dist/light.css%22}),d(%22meta%22,{name:%22viewport%22,content:%22width=device-width,initial-scale=1.0%22}))})()

(escaped with Bookmarkleter and tested in Chrome & Firefox)¹

Beautified version:

let doc = document
let $$ = selector => doc.querySelectorAll(selector)
let createElement = (tagName, properties) => Object.assign(doc.createElement(tagName), properties)

// Remove all CSS stylesheets, external and internal
$$('link[rel="stylesheet"],style').forEach(el => el.remove())

// Remove all inline styles
$$('*').forEach(el => (el.style = ''))

// Add water.css and responsive viewport (if necessary)
doc.head.append(
  createElement('link', {
    rel: 'stylesheet',
    href: '//cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.css',
  }),
  !$$('meta[name="viewport"]').length && createElement('meta', {
    name: 'viewport',
    content: 'width=device-width,initial-scale=1.0',
  })
)

Although I wonder if we even need to check whether a meta[name="viewport"] already exists, does adding a second viewport tag (in case the site already had one) cause any harm? 🤔

¹ When used as actual bookmarklet. When copy-pasting directly into the URL bar, Chrome strips the javascript: so you have to re-add it manually, and Firefox doesn't like it at all for whatever reason... :(

[jonaskuske]

I'd really love to have the respective link in the README, so you can just drag & drop it from there into your favorites bar – but I didn't manage to escape the bookmarklet in a way that GitHub's markdown would accept it as URL. 😕

In case this just doesn't work, we could add the link and drag-and-drop instructions to a separate HTML page (or simply the demo site) and then link to this page from within the READMA, à la:

Want a bookmarklet to apply water.css to messy websites with a single click?

Get it here!

Edit: Yup, GitHub simply doesn't allow javascript: URLs (to prevent XSS vulnerabilities I guess?), so we'd have to distribute the bookmarklet from the demo site, not the README itself.

[kylejrp]

That's too bad that it doesn't work in the README, but I think that the demo place is a good place to have it instead.

I think we'd take a pull request with the bookmarklet added to the demo page if you wanted to make one!

In the future, it would probably be best to have our Gulp build tools uglify the bookmarklet code at build time, but I think it's okay to just use the minified output from Bookmarkleter for now.

Thanks for your work on this @jonaskuske!

[kylejrp]

This should probably wait for #64 to merge before continuing - the bookmarklet code from above would have to change to point to the NPM release instead of the GitHub release.

If someone wants to make a pull request ahead of time that adds the bookmarklet that points to the future NPM release, we could merge it once we publish to NPM.

[kognise]

I'm gonna add this to the 2.0 milestone.

[kognise]

I added the bookmarklet code as suggested by @jonaskuske to the repo in 9fb3225, but I'm gonna wait til #191 is merged to update the documentation site to avoid conflicts.

Is there a better way to generate the bookmarklet then to manually use Bookmarkleter?

[kognise]

Added this in c940d74! <3