So last time, I made a typewriter animation without HTML, CSS, nor Javascript. What happens if instead of using nothing, we allow ourselves to use....
For further actions, you may consider blocking this person and/or reporting abuse
Well @afif and @alvaromontoro , I finally did a part two which is the polar opposite of part one π This was a lot harder than I expected it to be, so this war has certainly knocked me out cold!
Well done. Not only is your outcome cool, youβve actually written an article which flows well and isnβt riddled with mistakes and doesnβt just serve as shameless self promotion like some much of the crap on dev.to - kudos
Harsh words right there, but I do agree. It's really nice to see a well-written article on here :D
This motivated me to finally update my own
<type-writer>to deal with nested HTML elements instead of just text. Here is the result, and here is the code πIt's currently set up to just type out text in an endless loop, but of course it could easily be modified to wait for manual starting or emit events π€
Update: Mine now has a
loopattribute for automatic looping and a bunch of event event-related stuff to go with it. Here's the code changes :DOooooh! I really like it!
But you used the J-word, @afif will not be happy π
But at the end of the day this is what people will be using π .. no one like crazy-sophisticated-CSS-only solutions. People want to download a package, run one instruction and leave JS do all the job behind the scene.
This said, nice job. We end this war with a useful package π
PS: better consider the JS tag instead of Codepen for better visibility
The fact I forgot the JS tag existed shows how brain-dead I am right now ^^
What isβ¦ the JS tag? π
A great demo to show the power of Web Component APIs. Have been willing to see how these components can change the world.
For me it would be even better if you don't need this:
Ah yes I did think about this; normally web components define styles in the shadow dom for encapsulation, but I found I couldn't do that here since the characters live in the light dom.
In theory the
define.jsscript could create a style node itself, but in the end I decided to let the developer decide how/when to import the stylesheet, since the preference can differ from app to app.Interesting and useful, thank you!
This is sick. I have plans to introduce a custom element for TypeIt too. This makes me even more excited π
Probably don't make this happen in the future ; )
I was about to panic but realized you forgot the namespace
@auroratide:Looks great! Any advice on how to use it with Nextjs?
I haven't used Next before, but it should be possible to put the following in Head:
If there's a way to import from node modules in Next, you can do that too; you only have to be careful not to import in a server context, because a server does not know how to define a custom element like a browser does.
Am soo confused... ah fuck i am..