Web Development Haikus
Tags: watercooler, webdev
Published: 2021-01-11 16:47:45

---
title: Web Development Haikus
published: true
description: Just when you thought that 2021 was going to be better than 2020 and that Vogon poetry was the worst possible poetry in the Universe... here comes Alvaro with some haikus of his own.
tags: watercooler,webdev
//cover_image: https://direct_url_to_image.jpg
---

A [haiku](https://en.wikipedia.org/wiki/Haiku) is a type of short poem that originated in Japan. It consists of three verses in a 5-7-5 pattern, must include a seasonal reference (_kigo_), and a cutting word (_kireji_).

I don't know Japanese, but I have read many haikus translated into English. And I like them: they are short, they provide beautiful imagery, they make you think... They feel like a snapshot of a thought.

So, a few months back, I wrote a "haiku" that expressed my feelings about modern JavaScript development:

{% twitter 1260913441537212417 %}

It was a tongue-in-cheek haiku. But it started something. After that one, I have been using haikus as mnemotechnical tricks to learn and remember different Web Development concepts.

...And I'm going to share some with you!

<figure>
![Screenshot from the movie The HitchHicker's Guide to the Galaxy, showing a Vogon; a really ugly alien race known for their love of bureaucracy and their poor poetry skills](https://dev-to-uploads.s3.amazonaws.com/i/d6dr696i5rlw5l7b1vka.png)
<figcaption>Depiction of Alvaro "the poet" 😂 (source: <a href="https://www.imdb.com/title/tt0371724/">The Hitchhiker's Guide to the Galaxy</a>)</figcaption>
</figure>

Just when you thought that 2021 was going to be better than 2020 and that Vogon poetry was the worst possible poetry in the Universe... here comes Alvaro with some haikus of his own.

## Haikus

### Modern JavaScript development

> _React React React React React,
React React React React React React React.
React React React React Vue._

Technically, this should be considered a [senryu](https://en.wikipedia.org/wiki/Senry%C5%AB) –basically a haiku but without the seasonal reference or the cutting word–. However, we could argue that the last "Vue" works as a good cutting word, and that deep down, React is cold as winter ice.

----

### JavaScript variables

> _varmints run around
let cold winds erase their trails
constant is nothing_

The first word of each verse corresponds with the three ways to declare a variable in JavaScript: `var`, `let`, and `const`. It has a seasonal reference ("cold winds"), and "nothing" could be a cutting word (and a _fun_ one if we consider that in JavaScript, nothing is really constant when using `const`).

----

### CSS Gradients

> _conifers grow fast
lingering and repeating
radical ideas_

In CSS, you can define gradients as background images. There are five different types of gradients:

- [`conic-gradient()`](https://developer.mozilla.org/en-US/docs/Web/CSS/conic-gradient()) (conifers)
- [`linear-gradient()`](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient()) (lingering)
- [`radial-gradient()`](https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient()) (radical)
- [`repeating-linear-gradient()`](https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient()) (lingering + repeating)
- [`repeating-radial-gradient()`](https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-radial-gradient()) (repeating + radical)

----

### CSS positions

> _fix that sticky thought,
the absurd of the static light.
all is relative._

All the different values for the [`position` property](https://developer.mozilla.org/en-US/docs/Web/CSS/position) in CSS: `static`, `relative`, `absolute` (absurd), `fixed` (fix), and `sticky`.

----

### Web Accessibility

> _Level your head now
contrast options, the meaning.
What's the alternative?_

The WebAIM Million is an annual web accessibility analysis of one million front pages. The [top 5 issues account for 85% of the errors found](https://dev.to/alvaromontoro/fix-85-of-your-web-accessibility-issues-in-5-easy-steps-pnf), so taking care of them will improve a11y on your sites:

- Color contrast ("contrast")
- Alternative text ("alternative")
- Labelling fields ("level", a bit of a stretch)
- Meaningful links and buttons ("meaning")
- Organized headings ("head")

I like the last verse "What's the alternative?" Web accessibility should not be or have an alternative, it should be the way to go in web development.

----

And now that you have suffered (and hopefully survived) some poetry... what techniques do you use to remember technical concepts? Do you write them down? Cross-stitch them? Practice building something with them? Write short poems to torture other web developers with them?... or do you just forget and trust in your Google-Fu?