5 ms·
Show HN: Replay your typing in a few lines of JavaScript
I recently needed to make a text appear on a website and I wanted to get this real human feeling that computers don't have. I only found the TypeIt lib but it was not free and I didn't want to add a dependency for such a simple case.
Human replay allows to copy paste a few lines of JS to make a text appear exactly how you typed it.
- OmarShehata 3y agoThis is great! I was just talking to a coworker today about "libraries" vs "templates". You could have made this a library, but I think it's actually way nicer for it to be code I can copy/paste, so I can integrate it however I want. Some things are better as templates that I can copy. If I have a weird use case or want to integrate it deeply into something else, the library doesn't need to accommodate that. (the tradeoff of course is, if you update the library, my copied code won't update, so obviously this doesn't work for everything, but I think it works for some things!)
- sonofhans 3y agoThis is nice. I’m curious — it looks like you’re storing the full text string along with the timestamp. At first I thought you were capturing keystrokes, but it makes more sense to capture the full text, so you can allow people to edit with mouse/arrow keys, etc. It will fall over at some point though, right? If you work on this more, is the next logical step to store a diff with each timestamp, rather than the full string?
- seafoamteal 3y agoThat's what I was thinking as well. I loved the demo, but was a bit surprised at how much redundant data was stored behind the scenes. Capturing keystrokes could still be a viable option if you maintained something like a virtual cursor that could move around the text display area. Or of course, diffs are the most straightforward way to do it.
- Einenlum 3y agoThanks, this is an interesting point. Storing the full message indeed has a downside in terms of storage (but for a short text it should be unnoticeable). I guess it also brings something positive: you can select the whole text, delete it, and start again, and the whole action should be stored. Making a diff to represent this is way more complicated. I'll still think about this though. I think I could find a way to reduce the data size for most use cases.
- Einenlum 3y agoI changed the code to add a diff. Thanks for your input! (pun intended)
- sonofhans 3y agoThat was quick! It seems to work as well as ever. The data structure is less legible, but a lot more efficient. Such a little project. I hope to find a use for it.
- jmkni 3y agoVery clever, I can imagine a chat app where you see the message how it was typed before seeing the final message sent, could be novel
- michaelmior 3y agoSounds like ICQ circa late 90s :)
- Einenlum 3y agoOh, I had not thought about this. Cool idea!
- michaelmior 3y agoNot quite the same, but if you want to do this with a terminal session, asciinema[0] is great! [0] https://asciinema.org/ https://asciinema.org/
- deleted 3y ago[deleted]
- amelius 3y agoWhy can I only replay once?
- sourabhrathour 3y agoexactly, there should have been to replay it for more number of times.
- Einenlum 3y agoOh, interesting point. I fixed this. Thanks!
- MegaSec 3y agoMan, this is really cool!
- Einenlum 3y agoThank you!
- js4ever 3y agoAmazing, I love how it's generating short js code and no library needed
- Einenlum 3y agoThanks! I appreciate. I indeed think for such short snippets, adding a dependency is unnecessary.
- daniel_iversen 3y agoThat’s cool. Wonder how well this could be used to create a digital fingerprint of users?
- Einenlum 3y agoThanks! It's not the point of this lib, but I know that unfortunately some tools exist to fingerprint users by recording their keystrokes: https://www.whonix.org/wiki/Keystroke_Deanonymization https://www.whonix.org/wiki/Keystroke_Deanonymization
- deleted 3y ago[deleted]
- avery17 3y agoHold backspace from the end until you erase everything. Start recording and hold down undo(ctrl-z). You're welcome.
- codetrotter 3y agoIt even captures changes made by iOS when auto correct changes the capitalization and spelling of words! :D
- darkest_ruby 3y agoWhat is everyone excited about? A mediocre piece of code that actually hardcodes th string? Same could be achieved with generic code with 2 Parms - a string, and duration
- onion2k 3y agoIf you want to focus on code maintainability of your web app then you're right - a generalized library with a simple API is the way to go. On the other hand though, if you want to deliver the minimum code to the user to optimize for download speed, parsing time, and efficiency then a code generator that outputs some 'hardcoded' JS that you drop into the page is the way to go. I really like this approach and I've written plenty of generator functions like this in the past. It's more user-focused than importing a library to the same job. This is one of the decisions every web dev has to make for themselves. Ideally when a site calls for a tiny function for an effect like this they'll opt for some 'bad' code that results in a better user experience.
- mosselman 3y agoWhile we are on the subject: what does chatgpt use for the typing effect they have? I know a stream of diffs comes in, but I think the animation is smoothened by something.
- blharr 3y agoI don't think it does any other processing honestly, it might have a slight delay added in on each token, but it's pretty close to just streaming the output
- Einenlum 3y agoUpdate: I first had a naive approach and stored the full content of the text on each stroke. I updated the code with some small algorithm to reduce data and avoid storing the full text when a character was added or removed.
- p2hari 3y agoReally cool. Thanks for sharing.
- Einenlum 3y agoThank you!
- anon115 3y agoa web component in vanilla js would fit nice here
- tamimio 3y agoCool!! Thanks for sharing it.
- Einenlum 3y agoThanks! :)
- t_zahil 3y agoWhat a smart idea! I immediately sent it to my mom who has such a weird way of typing can't wait to see if the AI can reproduce it!