Show HN: Tply – a simple typewriter effect for your websites | Hacker News Reader

Show HN: Tply – a simple typewriter effect for your websites

ichub.github.io

16 pointsichub11 comments

Link to the actual repository with documentation: https://github.com/ichub/tply

Is it possible to type the sentence, then delete the last words and retype different words? Also show the blinking caret/cursor when typing or deleting characters.

I.e. something like here: https://www.particle.io/

Yes, you can delete previously typed sentences, see example #3 on the site: use a <delete> element.

If you want a caret, there's two options: * put your tply source into a span, then after the span create and style your own caret. * contribute to the repo and add an easier way to have a caret (:

This would make a nice Eager app, like https://eager.io/app/typist

Didn't know about Eager, thanks for letting me know about it!

How do you do these special HTML elements?

If you're wondering about how you would go about using this in your own website, check out the documentation in the github repo here: https://github.com/ichub/tply

If you're wondering how these actually work, browsers just interpret the custom elements as unstyled inline elements, basically as `span`s, which I am free to do with as I wish.

Is that standardized? So why doesn't all those libraries (mostly jQuery libraries) that perform DOM transformation use custom elements, instead of a lot of nested divs with custom classes?

Honestly, I'm not sure. If it was really an issue, it'd be trivial to change the script to render things as nested divs and spans. The appeal of custom elements, at least to me, is that it makes everything more concise and readable. I prefer reading <type>whatever</type> to <div class="type">whatever</div>.

So, any reason why this doesn't work in Safari (Version 9.0.3 (11601.4.4)?

Looks like Safari doesn't support `let` syntax yet. I fixed it, should work now. Thanks for letting me know (:

Reply on news.ycombinator.com