bookmarklet suggestion

[hchiam]

why:

to let people try op quickly in their browser (ide not required),
and even to experiment on other people's websites.
either by running it in the console
or as a 1-click bookmark
(bookmarks/bookmarklets also have fast keyboard access in chrome)

usage:

1. copy this code:

javascript: (() => {
  const href = "https://unpkg.com/open-props";
  document.head.append(Object.assign(document.createElement("link"),{rel:"stylesheet",href}));
})();

• (the value of href can be replaced with other CSS CDN URLs)

2. create a bookmark, paste that code you just copied into the URL field, and ideally name that bookmark with a unique name or a unique sequence of letters that's different from your other bookmarks. For me, "op" shows no other results when i search my bookmarks.

3. now you can do this in chrome:

• mac: command + L, then type to search for the bookmark name, then hit enter --> open-props should now be temporarily added to the page!
• pc: Ctrl + L, then type to search for the bookmark name, then hit enter --> open-props should now be temporarily added to the page!

and now you can play with op in the devtools Elements tab, or in Sources:

op-bookmarklet-shortcut-in-action.mov

basically same idea as argyleink/blingblingjs#42 but for css

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[argyleink]

cool 🙂