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

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.

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!

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

[0] https://asciinema.org/

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!

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.

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

Using current methods it would be difficult to uniquely identify an individual user out of all based solely on their typing pattern (because entropy, they aren't unique enough). But you could fairly reliably use it as a 2nd factor to verify someone as themselves vs. a malicious user

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

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

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.

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.

Really cool. Thanks for sharing.

Thank you!

a web component in vanilla js would fit nice here

Mmm interesting idea Gonna think about it

It has been added to the project.

Cool!! Thanks for sharing it.

Thanks! :)

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!