Show HN: Tply – a simple typewriter effect for your websites • Hacker News Board

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

#1

Post by ichub » Mon, Feb 22, 2016, 12:45 AM UTC

Show HN: Tply – a simple typewriter effect for your websites
ichub.github.io

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

#2

Post by jellekralt » Tue, Feb 23, 2016, 6:58 AM UTC

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

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

#3

Post by nivertech » Tue, Feb 23, 2016, 9:56 AM UTC

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/

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

#4

Post by ichub » Tue, Feb 23, 2016, 3:30 PM UTC

nivertech wrote: post #3

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 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 (:

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

#5

Post by josefdlange » Tue, Feb 23, 2016, 3:42 PM UTC

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

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

#6

Post by fiatjaf » Tue, Feb 23, 2016, 4:46 PM UTC

How do you do these special HTML elements?

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

#7

Post by fiatjaf » Tue, Feb 23, 2016, 4:48 PM UTC

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

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

#8

Post by ichub » Tue, Feb 23, 2016, 5:49 PM UTC

josefdlange wrote: post #5

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 (:

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

#9

Post by ichub » Tue, Feb 23, 2016, 5:52 PM UTC

fiatjaf wrote: post #6

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.

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

#10

Post by ichub » Tue, Feb 23, 2016, 5:53 PM UTC

fiatjaf wrote: post #7

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!