Oh you know, just some silly bookmarklets...
or: "Hexaflexagone.js" - because it makes much of the UI get gone (and it flexes in unexpected ways)
Go here to get the bookmarklet.
(I can't make a javascript: link on a GitHub README, that would be a huge security issue!)
It toggles between two different layouts
(but not the original layout; for that you'll have to delete the stylesheet (<link id="bookmarklet-custom-css"> or <link id="bookmarklet-custom-css-2"> in <head>))
Unminified and sane-ified:
function applyTo(window){
var stylesheetID = "bookmarklet-custom-css";
var link = window.document.getElementById(stylesheetID) || window.document.head.appendChild(window.document.createElement("style"));
link.id = stylesheetID;
var css = `
body,
body *:not(style):not(script) {
display: flex;
flex: 1;
transition: flex .2s ease;
}
body *:hover {
flex: 2;
}
`;
link.reverse = !link.reverse;
var reverse = link.reverse;
var i = 5;
while (i--) {
css += `
body${Array(i).join(" > *")} {
flex-direction: ${((i % 2) ^ reverse) ? "row" : "column"};
}`;
}
link.textContent = css;
}
if (frames.length) {
Array.from(frames).forEach(applyTo);
} else {
applyTo(window);
}I've got more of these that I might add, including some funky CSS filter animation ones and some actually potentially useful ones like for controlling YouTube (or other video) playback. So far I've just created this repo because I was unminifying this bookmarklet, and it seemed like there should be a place for it to go.
Also this bookmarklet could be made way more fun pretty easily by assigning specific flex values etc. in a similar fasion (i.e. maybe going 1 2 3 1 2 3 with i % 3)