DEV Community

Alvaro Montoro
Alvaro Montoro

Posted on

Web Development Haikus

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:


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?

Top comments (3)

Collapse
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

I'll throw in one of my own :P

I thought I fixed it
But it turns out I was wrong
I just made it worse

Collapse
 
alvaromontoro profile image
Alvaro Montoro

This one feels close to home 😂

Collapse
 
winstonpuckett profile image
Winston Puckett • Edited

Once I was alive
I became a web dev
Hours reduce bugs

Connecting the dots
In this legacy codebase
Is like panning gold

I think that I'll quit
But then I remember that
Other jobs are worse

Mutual uplift
"It's easier than before"
I stay for future