Show HN: Replay your typing in a few lines of JavaScript | Hacker News Reader

Show HN: Replay your typing in a few lines of JavaScript

einenlum.github.io

82 pointsEinenlum36 comments

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.

Open articleView on HN

This 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!)

Very 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

Sounds like ICQ circa late 90s :)

Oh, I had not thought about this. Cool idea!

What 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

If 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.

Not quite the same, but if you want to do this with a terminal session, asciinema[0] is great!

[0] https://asciinema.org/

This 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?

That'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.

Thanks, 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.

You can introduce multiple types of changes, for example: addition at the end, removal of N characters from the end, and complete string replacement, etc. Then for each change you can calculate which type is more efficient to store.

Yes, already working on it! Thanks!

I changed the code to add a diff. Thanks for your input! (pun intended)

That 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.

That’s cool. Wonder how well this could be used to create a digital fingerprint of users?

Thanks! 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

While 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.

I 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

Update: 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.

Amazing, I love how it's generating short js code and no library needed

Thanks! I appreciate. I indeed think for such short snippets, adding a dependency is unnecessary.

What 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!

Hold backspace from the end until you erase everything. Start recording and hold down undo(ctrl-z). You're welcome.

It even captures changes made by iOS when auto correct changes the capitalization and spelling of words! :D

a web component in vanilla js would fit nice here

Mmm interesting idea Gonna think about it

It has been added to the project.

Really cool. Thanks for sharing.

Thank you!

Cool!! Thanks for sharing it.

Thanks! :)

Why can I only replay once?

exactly, there should have been to replay it for more number of times.

Oh, interesting point. I fixed this. Thanks!

Man, this is really cool!

Thank you!

Reply on news.ycombinator.com