Web Development Haikus

#watercooler #webdev

A 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:

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!

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 — Depiction of Alvaro "the poet" 😂 (source: The Hitchhiker's Guide to the Galaxy)

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 –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() (conifers)
linear-gradient() (lingering)
radial-gradient() (radical)
repeating-linear-gradient() (lingering + repeating)
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 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, 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?