Re:Show HN: I Made a Magic Trick
by byecomputer on Monday April 25, 2022 @02:34PM
(#31158873)
Here you go: https://developer.mozilla.org/en-US/docs/Web/API/ClipboardIt...
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
Thanks! After I wrote that, I was thinking "more likely I missed it, than that this is the _one_ example where it doesn't exist" :P
This explanation just made things so much cooler. I wasn't aware of the clipboard api. (Since I never needed to use it)
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!
That's really cool - I did not know that; and thank you for sharing!
Clever! I thought I recognized that name from somewhere :wave:
Could do something with a text/image flip as well?
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