[HN Gopher] Show HN: I Made a Magic Trick
___________________________________________________________________
Show HN: I Made a Magic Trick
Author : croshan
Score : 103 points
Date : 2022-04-25 16:26 UTC (6 hours ago)
(HTM) web link (cyrusroshan.com)
(TXT) w3m dump (cyrusroshan.com)
| acomjean wrote:
| I tried it. Even though a magician never shares (excepting Penn &
| Teller) want an explanation though..
|
| It seems to be pasting different things all over the place. I'm
| not sure how the "google doc card" past to just pasting a url
| thing happened..
| croshan wrote:
| Haha, now that part is just sleight-of-hand. When you click
| (technically, mousedown) on the google doc link, we copy a new
| item to the pasteboard, so now instead of {"html": joker_image,
| "plaintext": card_you_picked}, it's {"html":
| joker_image_with_url_paste_hint, "plaintext": twitter_url}.
|
| For how you can save multiple mime types in the same paste
| entry from javascript, the w3c draft is:
| https://w3c.github.io/clipboard-apis/#clipboarditem
| acomjean wrote:
| Thanks. So its loaded and ready to go by the time you click
| the google doc link.
| thedg wrote:
| IT'S GENIUS
| mdb31 wrote:
| I guess this is supposed to be some Jabbascript trickery, but for
| me, a 'paste' action in the second text field just yields...
| blankness...
|
| Which is a pretty good trick, I have to admit, exposing the
| nothingness of life. Kudos!
| binwiederhier wrote:
| Yeah sadly it was the same for me (Firefox). I was hoping for a
| cool trick.
| [deleted]
| klyrs wrote:
| I got y+dy, x+dx
|
| which... um... was the contents of my clipboard before I
| attempted the trick. Probably firefox doing the right thing in
| a private session.
| drewzero1 wrote:
| Me too. Attempting to paste anywhere else does the same, as a
| reflection of the inescapable futility of existence.
|
| Or it could just be that I'm using Firefox? Seems to work for
| me in Chrome. :)
| postalrat wrote:
| I use firefox and when I pasted my previous clipboard I figured
| the "trick" was getting my clipboard.
| noduerme wrote:
| Just checked... nothing goes over the wire when you paste, at
| least.
|
| Seems the error is:
|
| *Uncaught (in promise) ReferenceError: ClipboardItem is not
| defined*
| gus_massa wrote:
| Now way I'm opening a new Google Doc. I'm just too paranoid!
|
| I tried pasting the text in notepad anyway. :)
|
| Also, in the last page, the emoji in the middle looks like a
| square with a question mark in my (old) computer.
| croshan wrote:
| Fair enough! If you have a Mac, you can try the TextEdit tool
| (which also supports rich text), as an alternative to Google
| Docs.
| TehShrike wrote:
| doesn't seem to work in Firefox :-x
| domh wrote:
| Seems like the ClipboardItem API is currently behind a flag on
| Firefox: https://developer.mozilla.org/en-
| US/docs/Web/API/ClipboardIt...
| smegsicle wrote:
| reading from clipboard should be one of those per-page
| permissions like grabbing video
| MPSimmons wrote:
| Doesn't work on Mac Firefox, FWIW
| kamilm wrote:
| A clever way to get a Twitter follower :) You win!
|
| BTW we use a similar mechanism at websktop.com (online bookmarks
| manager), when you copy icons:
|
| - if pasted into our app, all bookmark properties are preserved
| (text/html + "data- " attribute)
|
| - if pasted into web app like Slack, you get a nice HTML-
| formatted unordered list of URLs with titles (text/html)
|
| - if pasted into text editor, you get a simple bullet-point list
| (text/plain)
|
| Unfortunately handling other MIME types gets troublesome. Still,
| you can do a lot of cool stuff with just text/plain & text/html.
| mproud wrote:
| Underwhelming for me.
|
| On my iPhone I opened Google Docs and started a new document, per
| the instructions, and pasted. It pasted a link to their Twitter.
|
| Maybe Desktop works better?
| alekratz wrote:
| This doesn't seem to work in Firefox, tale as old as time.
| Terry_Roll wrote:
| This (https://www.d52.io) is a variation which does work in
| Firefox. Trust me!
| shabier wrote:
| I'm so disappointed, you win.
| croshan wrote:
| 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!
| rasengan wrote:
| It worked, and I thought this was cool. To save people time, it
| would be great if you gave an explainer on how it works xD
| croshan wrote:
| Fair point!
|
| 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
| captn3m0 wrote:
| Could do something with a text/image flip as well?
| rasengan wrote:
| That's really cool - I did not know that; and thank you for
| sharing!
| byecomputer wrote:
| 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
| croshan wrote:
| 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
| uziiuzair wrote:
| 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!
| kaveet wrote:
| Clever! I thought I recognized that name from somewhere
| :wave:
| [deleted]
| justusthane wrote:
| MS Word also works :)
| j_leboulanger wrote:
| Not sure what it is supposed to do
| dvh wrote:
| 0. You visit a webpage with expectation to see a magic trick.
|
| 1. When you click on a card, there is no copying involved. But
| it knows on what card you clicked.
|
| 2. Pages asks you to paste the card you think you have in
| clipboard. You press Ctrl+V, page receives content of your
| clipboard and instantly replaces textarea content with card you
| clicked on. This makes you think that you have that card in
| your clipboard. Your real clipboard with your bank password you
| used 10 minutes ago is sent to the server.
|
| 3. Your clipboard is replaced with different card (adding text
| to clipboard is allowed and easy in javascript, it's reading
| clipboard what is forbidden).
|
| 4. Pages asks you to open some text editor (e.g. google doc)
| where you paste the card, seeing new card. This makes you thing
| that your card was replaced with joker card and it is some kind
| of lame magic trick.
| Kiro wrote:
| You missed step 5 where it replaces it with the Twitter URL
| only when you paste it in the URL bar from Google Docs (but
| continues to be the card when you paste it in the doc). How
| does that work?
| rosmax_1337 wrote:
| Good trick, had me fooled and feeling very paranoid! :D
|
| I appreciate that you took the time to explain how it works in
| another comment in this thread.
| croshan wrote:
| Thank you! Had to implement something related to this at work,
| and thought "huh... what else can I do with this?" :P
|
| I think the real magic is in the last step, when you're on a
| generally-trusted 3rd party website (Google docs), and your
| paste output is different in the doc from the URL.
| jbverschoor wrote:
| Before I pasted my clipboard, I checked what I was gonna paste,
| as this magic trick could be something to steal you clipboard..
|
| It's funny.. I pasted it in a new Pages document.
| 0des wrote:
| Is the magic trick that after clicking the card to copy, when I
| go to paste it has magically disappeared? Because I dont get
| anything.
|
| Edit: copied manually, dont have a Google account, so can't go
| further.
| [deleted]
| freeCandy wrote:
| Nice! I had no idea about the doc.new URL
| ColinWright wrote:
| I click on a card, hit "paste" in the window, and get text I've
| previously copied.
|
| I'm guessing it's not working ... it's certainly not doing what I
| expect, even at that stage.
| croshan wrote:
| Hmm. Guessing you're trying it on Android? It's relying on the
| navigator.clipboard API, and generally the experience is not
| good on mobile
| echeese wrote:
| I have the same issue, Firefox 99 on Windows
| ColinWright wrote:
| Nope
|
| Firefox 99.0 (64-bit) for Ubuntu canonical - 1.0
| $ lsb_release -d Description: Ubuntu 20.04.4 LTS
| $ cat /etc/debian_version bullseye/sid
| aidenn0 wrote:
| I'm having the same issue on Firefox 99 on Linux (NixOS).
| croshan wrote:
| Agh. Turns out Firefox doesn't support it, my bad! Safari
| and Chrome work fine, but I'm guessing that's not an option
| for many Linux users. Sorry!
| daveloyall wrote:
| Firefox 101.0a1 (2022-04-22) (64-bit) says:
|
| > Uncaught (in promise) ReferenceError: ClipboardItem is
| not defined
| scintill76 wrote:
| Demonstrating how easy it is to get someone to disclose their
| clipboard contents to any web page that asks? ;) Not working
| for me either, but it was surprising to see my previous copied
| text.
| bally0241 wrote:
| Same...was just browsing stack overflow for positive mod, so I
| got
|
| "return (i % n + n) % n;"
|
| heh
| [deleted]
| notRobot wrote:
| Same, doesn't work for me on both Firefox on Desktop (Windows)
| and Android.
| motoboi wrote:
| Didnt work for me. Firefox on MacOS
| [deleted]
| bks wrote:
| brilliant and i gave you a twitter follow.
| croshan wrote:
| Thank you :)
| magicseth wrote:
| Very fun! If you wanted to add one more level of misdirection,
| the first cards could be textarea that you have to select with
| your mouse and hit ctrl-c to copy ;-)
|
| This would hide a bit of the method for the twitter reveal.
|
| -Seth
|
| (I also make online magic tricks magicseth.com/animal )
| magicseth wrote:
| And this may not be the effect you are going for, but you could
| make the final twitter link go to a specific tweet, where you
| say "I was hoping you would copy the 3 of diamonds!" and it
| would be right :-)
___________________________________________________________________
(page generated 2022-04-25 23:01 UTC)