A Typewriter, but using a New HTML Tag
Tags: html, javascript, webdev, showdev
Published: 2021-09-09 19:55:08

So last time, I made a [typewriter animation without HTML, CSS, nor Javascript](https://dev.to/auroratide/a-typewriter-but-with-no-html-css-or-js-1bgd). What happens if instead of using nothing, we allow ourselves to use... _everything_?

{% codepen https://codepen.io/auroratide/pen/MWoJdda %}

All this is achieved with a fancy new HTML tag, `<typewritten-text>`!

```html
This is a <typewritten-text><strong>typewriter effect!</strong></typewritten-text>
```

Find out how to install and use it here:

{% github Auroratide/typewritten-text no-readme %}

## A New HTML Tag?

The HTML standard allows developers to define **custom elements** through [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components). Making a new element just requires a handful of Javascript, from there letting you define as much or as little functionality as needed.

```js
class MyElement extends HTMLElement {
  // code for how the element looks and behaves
}

window.customElements.define('my-element', MyElement)
```

The `typewritten-text` element is one such web component, designed to provide a semantic, flexible, and reusable typewriter component!

Since web components are native browser technology, they are meant to work with most of our [beloved frameworks](https://custom-elements-everywhere.com/) out of the box <small>(looking at you, _React_...)</small>. That's one of my favorite things about them!

Granted, the developer experience can be... painful sometimes. This innocent little element turned out to be _much much harder_ than I originally thought in order to achieve all my goals for it.

## The `typewritten-text` Element

Once Javascript enters the arena, basically anything becomes possible.

* No need for monospace requirements! The inner text can be of any font or size; in fact, it can mix fonts if you want.
* Built-in multiline support, for if you want to type out a longer sentence or two.
* A very simple interface; you can basically use it like any standard HTML tag.

And of course, I put in the effort to make it as **accessible** as possible.

* It represents its textual content regardless of current typed state, especially useful for those using Assistive Technologies.
* The blinking cursor animation is disabled for people who [prefer reduced motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion).
* No content-shifting either! The element's size is always the size of its content.

Perhaps the most interesting feature is its **events**. The element dispatches events when characters are typed or the phrase is finished. By listening to those events, you can use the magic of code to make the typewriter do any custom behaviour that's desired!

For example, starting another typewritten text:

```js
first.addEventListener('typewritten-text:phrasetyped', () => {
    second.start()
})
```

## Showcasing

Here's a couple of nifty things you can do with the `typewritten-text` component!

### Typewriter Cycle

Using **events**, it's simple to cycle through different texts to type out.

{% codepen https://codepen.io/auroratide/pen/BaZWWwQ %}

<small>The `typewritten-text` element is designed to be very basic so it can be used in as many ways as possible, which is why the cycle effect is not built-in. A different web component could be made to encapsulate the effect, though!</small>

### Character Dialog

Characters tend to talk with a typewriter animation also!

<small>Hit `Rerun` at the bottom of the frame to see the animation again.</small>

{% codepen https://codepen.io/auroratide/pen/rNwyYyW %}

## Find out more

All information on how to install and use the `typewritten-text` component can be found on github!

{% github Auroratide/typewritten-text no-readme %}

I may soon write a little more about the process of actually making (_and testing_) a web component.