A couple weeks ago, an interesting battle of sorts spontaneously erupted between a few developers on a site I frequent, dev.to. It was pretty simple: make a classic typewriter animation using your favorite web technologies!
This is a
What are web technologies?
- Hypertext Markup Language (HTML) gives web pages their skeletal structure, telling your computer what things are headings, paragraphs, and images.
- Cascading Style Sheets (CSS) make websites pretty, defining the look, feel, layout, and colors.
- Alvaro Montoro started with a Typewriter Effect with CSS
- Temani Afif followed up with a Scalable CSS-only Typewriter Effect
It turns out it is possible to make a typewriter animation using just Scalable Vector Graphics (SVG)!
Unlike HTML, CSS, and JS, SVG is mostly used for creating mathematical imagery; you might see them most commonly in the form of logos or icons on websites.
My logo at the top of this website is made using SVG.
However, while it does in fact work, there are a number of limitations which makes this more of a funny submission than a serious one! In other words, developers shouldn't copy the code for this because it probably won't fit most people's use cases.
That said, my post on dev.to, A Typewriter, but with no HTML, CSS, or JS did pretty well and raked in a few thousand views! To me, that was enough encouragement to try something more ambitious...
This is basically the polar opposite of my last idea: instead of using nothing, let's use everything! And by doing so, let's make it so as many people as possible can reuse it.
The result was an easy-to-install
typewritten-text, providing the basic typewriter animation while allowing different sorts of customization!
A web component basically defines a new HTML element that developers can use, making the code quite literally as simple as this:
I like <typewritten-text repeat>the typewriter effect!</typewritten-text>
I talk a bit more about its features on my original dev.to post, A Typewriter, but using a New HTML Tag. In total, that page received over 20,000 views!
And, if you're a developer, you can find out how to actually use it on your site on the typewritten-text Github page! It quickly became my most starred repo, with over 60 stars as of this post.
Who won the battle?
A friendly battle of this sort has no winners or losers! It's just a nice opportunity for devs to stretch their muscles and challenge themselves along with people of similar interest. Here's a list of all the articles I could find by others on Dev!
- Typewriter Effect with CSS by Alvaro Montoro
- Scalable CSS-only Typewriter Effect by Temani Afif
- Animated no-element typewriter by Alvaro Montoro
- A Typewriter, but with no HTML, CSS, or JS?! by me, Timothy Foster
- The CSS Scrabble Writer by Temani Afif
- A Multi-line CSS-only Typewriter Effect by Temani Afif
- A Typewriter, but using a New HTML Tag by me, Timothy Foster
- An Actual Typewriter, that auto types and is interactive too by InHuOfficial
- Type-Writer Component: Magic and Asynchronicity by DarkWiiPlayer