Hi HN! This weekend, I made a magic trick that you can try out in your browser.
Works best on desktop. Also, for those who don't like it, Google Docs not required--JIRA comments or most other WYSIWYG editors will also work.
Hope you enjoy it!
Works best on desktop. Also, for those who don't like it, Google Docs not required--JIRA comments or most other WYSIWYG editors will also work.
Hope you enjoy it!
The way it work is this: you can copy multiple filetypes to the clipboard. So here, I copy a "text/html" and a "text/plain". When you paste to Google docs, it reads "text/html", and outputs a div that I've reconstructed to look like a joker card. When you paste to most other places (your address bar, a `<textarea>` element, terminal, etc.,), you get the plaintext fallback. So you can have two entirely different outputs, based on where you paste!
MDN surprisingly has no examples/API on this (the only time I've found it to be the case), so I instead link you w3c for reference: https://w3c.github.io/clipboard-apis/#clipboarditem
Also note that the ClipboardItem API doesn't work in Firefox unless specifically enabled :^(
I guess I'm okay with that, considering the API could be used for things way less fun than your magic trick
In my experiment, I assumed that you did another "copy" at some point which printed the twitter URL. I came to this assumption when I pasted into Sublime Text and still saw my card, but pasting into the Address field changed the output to the twitter URL.
Kudos! This was pretty cool!