Auroratide

Coding + Storytelling

Menu Close

Contents

Contents

A Typewriter Battle Between Devs

Projects

Topics
  • html
  • css
  • javascript
  • svg
  • web component
  • challenge
  • typewriter
  • animation

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 typewriter animation!

What are web technologies?

All websites are built using HTML, CSS, and Javascript.

  • 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.
  • Javascript (JS) makes pages dynamic, enabling advanced interactivity.

The typewriter animation types one letter at a time to a screen, and usually this means at minimum Javascript is needed, since neither HTML nor CSS are complex enough to allow that level of custom animation. However, some people were coming up with solutions that used no Javascript, relying only on HTML and CSS:

Seeing those, I remembered something I had learned just a week prior, and realized I could enter the unspoken war with a solution of my own, require no Javascript, no CSS, and not even HTML...

A Typewriter with no HTML, CSS, nor Javascript

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.

SVG actually allows for something called Synchronized Multimedia Integration Language (SMIL), enabling defining animations without the need of an advanced programming language like Javascript.

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...

A Typewriter with ALL of HTML, CSS, and Javascript

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!