18 ms·
Show HN: I Made a Magic Trick
- hyperhopper 4y agoDidn't work for me on mobile. Just a misformatted version of the queen I clicked on showed up in google docs
- croshan 4y agoHi 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 4y agoIt 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 4y agoFair 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 https://w3c.github.io/clipboard-apis/#clipboarditem
- rasengan 4y agoThat's really cool - I did not know that; and thank you for sharing!
- captn3m0 4y agoCould do something with a text/image flip as well?
- byecomputer 4y agoHere you go: https://developer.mozilla.org/en-US/docs/Web/API/ClipboardItem/ClipboardItem 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 4y agoThanks! 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 4y agoThis 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 4y agoClever! I thought I recognized that name from somewhere :wave:
- splatzone 4y agoNice work, I had no idea about this.
- deleted 4y ago[deleted]
- justusthane 4y agoMS Word also works :)
- Diggsey 4y agoDoesn't work in firefox?
- hackmiester 4y agoWorks great on iPhone. Just use Notes as the last step.
- ColinWright 4y agoI 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 4y agoHmm. Guessing you're trying it on Android? It's relying on the navigator.clipboard API, and generally the experience is not good on mobile
- ColinWright 4y agoNope 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 4y agoI'm having the same issue on Firefox 99 on Linux (NixOS).
- croshan 4y agoAgh. 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 4y agoFirefox 101.0a1 (2022-04-22) (64-bit) says: > Uncaught (in promise) ReferenceError: ClipboardItem is not defined
- echeese 4y agoI have the same issue, Firefox 99 on Windows
- scintill76 4y agoDemonstrating 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.
- gus_massa 4y agoNow 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 4y agoFair enough! If you have a Mac, you can try the TextEdit tool (which also supports rich text), as an alternative to Google Docs.
- hackmiester 4y agoThanks for the tip! I used Notes on iOS thanks to your comment!
- j_leboulanger 4y agoNot sure what it is supposed to do
- dvh 4y ago0. 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 4y agoYou 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?
- recursive 4y agoI didn't paste with a keyboard shortcut, so I had no idea what type of weird anti-performance art this was supposed to be. Thanks for explaining. Needless to say, this didn't work at all for me.
- quickthrower2 4y agoKiss goodbye to that 20 bitcoin then
- rosmax_1337 4y agoGood 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 4y agoThank 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.
- mdb31 4y agoI 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 4y agoYeah sadly it was the same for me (Firefox). I was hoping for a cool trick.
- drewzero1 4y agoMe 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 4y agoI use firefox and when I pasted my previous clipboard I figured the "trick" was getting my clipboard.
- noduerme 4y agoJust checked... nothing goes over the wire when you paste, at least. Seems the error is: *Uncaught (in promise) ReferenceError: ClipboardItem is not defined*
- deleted 4y ago[deleted]
- klyrs 4y agoI 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.
- TehShrike 4y agodoesn't seem to work in Firefox :-x
- domh 4y agoSeems like the ClipboardItem API is currently behind a flag on Firefox: https://developer.mozilla.org/en-US/docs/Web/API/ClipboardItem#browser_compatibility https://developer.mozilla.org/en-US/docs/Web/API/ClipboardIt...
- smegsicle 4y agoreading from clipboard should be one of those per-page permissions like grabbing video
- jbverschoor 4y agoBefore 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.
- recursive 4y agoInstead of giving your clipboard to a proof of concept, you just gave it straight to google.
- jbverschoor 4y agoWhat makes you think so?
- recursive 4y agoYou said you posted it in a "Pages document". Unless I've misunderstood what Pages is, that's Google.
- magicseth 4y agoVery 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 4y agoAnd 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 :-)
- thedg 4y agoIT'S GENIUS
- 0des 4y agoIs 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 4y ago[deleted]
- silviot 4y agoThe magic trick is that when you click the card to copy it to your clipboard you'll end up with two versions of the clipboard. One will be used when you paste into a rich-text aware editor (like google docs). In this case it happens to be an ascii art of the card you chose. The other one will be used when you paste to a text-only editor (like your URL bar). In this case it happens to be the OP's author's twitter URL.
- bks 4y agobrilliant and i gave you a twitter follow.
- croshan 4y agoThank you :)
- acomjean 4y agoI 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 4y agoHaha, 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 https://w3c.github.io/clipboard-apis/#clipboarditem
- acomjean 4y agoThanks. So its loaded and ready to go by the time you click the google doc link.
- kamilm 4y agoA 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.
- edmcnulty101 4y agoYour product is great! Is it possible to make other media uploadable to folders? I.e. I could have a folder with bookmarks, pdf's, videos, etc.
- edmcnulty101 4y agoTo follow up I would love to be able to group ALL of the info pertaining to a subject.
- kamilm 4y ago> Your product is great! Great to hear, thanks! > Is it possible to make other media uploadable to folders? We thought about it before but we've de-prioritized it in favor of collaborative-editing features. But I totally understand your use-case. It would be a great addition to our product. Stay tuned! :)
- freeCandy 4y agoNice! I had no idea about the doc.new URL
- 0xDEFACED 4y agoLearning that shortcut was a game changer for me. There’s a similar shortcut for the other google apps too (e.g. sheet.new)
- alekratz 4y agoThis doesn't seem to work in Firefox, tale as old as time.
- Terry_Roll 4y agoThis (https://www.d52.io https://www.d52.io) is a variation which does work in Firefox. Trust me!
- mproud 4y agoUnderwhelming 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?
- deleted 4y ago[deleted]
- MPSimmons 4y agoDoesn't work on Mac Firefox, FWIW
- jesprenj 4y agoBlank page on Chromium on android /:
- leakbang 4y agoSo I tried this on my phone (Android - Bromite browser) and it's not working. But from the comments, I'm guessing that multiple items are copied to the clipboard and one of them is the author's twitter link? :D I'll try this on my PC to see what the actual trick is. But also looks like that some people have reported that it doesn't work on Firefox. edit: Typo
- akersten 4y agoAfter Firefox mobile pasted my previous clipboard contents into the textbox in step 2, I thought "man, that's damn good clipboard phishing and you got this audience real good ;)"
- tux1968 4y agoExact same reaction here. I felt a little embarrassed about being phished so easily.
- gardenhedge 4y agoIs this a phishing attack? Why does everyone trust OP? @dang this should probably be removed
- deleted 4y ago[deleted]
- Titan2189 4y agoSo obviously just as we click on the "new Google Docs"-link the JS-function onMouseDown: function() {li(si({withAddtlText: !0}), "https://twitter.com/cyrusroshan https://twitter.com/cyrusroshan")} gets called, which overwrites the clipboard. I didn't spend any time looking at the obfuscated functions li and si, but why does this have to be in a 14,000 line Javascript? Isn't writing something to the clipboard a regular html function? https://www.w3schools.com/howto/howto_js_copy_clipboard.asp https://www.w3schools.com/howto/howto_js_copy_clipboard.asp
- cachvico 4y agoYou didn't do the full trick. Paste into the URL bar for a different behaviour.
- forgotmypw17 4y agoSorry, but I've already done :set content.javascript.can_access_clipboard false
- autoexec 4y agoI've got JS disabled, but I've still got dom.event.clipboardevents.enabled set to 'false' in Firefox
- bmacho 4y agoIs it working for you with firefox? If not, maybe you should add a note that firefox is not working, so the ~third(?) of your visitors won't get confused, and you won't just waste their time for nothing.
- kaeruct 4y agoDoesn't work on Firefox. Is it so hard to support?