I Ching and Javascript. A mystical approach to front-end development.
How to open the doors of perception to a new era of UI.
I’m a three-dimensional person working on a two-dimensional job. Wouldn’t I be better off if I could access the fourth dimension?
There’s a way to channel the forces of chaos into any task. In this article, we will try to create almost-perfect, never-seen-before UIs.
But first, we need to go way back.
China, 1000 BCE.
When the western world was transitioning from antiquity into classicism, the Eastern world was codifying a divination system called the Book of Changes, or I-Ching.
The method is clear: Generate a random sequence (through dices, coins, or sticks), consult a dictionary of symbols, and interpret it with a mixture of personal and universal knowledge.
A complete introduction can be found here.
A secular point of view.
I’m not a traditionally spiritual person. There are secular explanations for the results: Maybe the unconscious part of our brain contains mental structures common to most; A technique with randomness and time-tested symbols would enable us to communicate with it.
Even if that’s not true, thinking about problems in alternative ways does help. So maybe the technique works as a heuristic.
Having said that: If you are not comfortable challenging yourself, I recommend you to stop reading. Creativity has a cost.
Let’s get started.
There are several ways to consult the I-Ching. A common approach is this:
- Think of a question.
- Roll the coins and get a hexagram. Look for the meaning in the I Ching. Interpret the results as an answer to your question.
- Repeat (2) until you feel satisfied with your answer.
Because this is Medium, I think this question will work:
Give me an idea for a UI that would help with the user experience on Medium articles.
Roll one.
Interesting result. After thinking for a while, the themes of progress and perseverance suggest me the following idea:
This seems like a pretty complete solution, but I don’t want to offend the oracle. Let’s do another roll.
Roll two.
At this point we need to be humble. Let’s call this one the final roll. This one inspires me to simplify the concept as much as possible, and to reduce annoying interactions:
Demo time.
I went for a React demo with SVG for the circle progression:
The complete code is available on the sandbox. I’m using the React library Leva for the fancy controllers GUI.
Here’s the code for the animating pie chart:
CSS and SVG trickery are needed to make it work; you can find a detailed explanation here. My approach differs in that I use CSS variables heavily. I find that they help with maintenance and self-documentation.
And here’s the top-level Javascript file, tying it all together:
Conclusions.
Like Herman Hesse and Carl Jung, I follow a long tradition of men talking about things. Peace out.
Thanks for reading! If you enjoy humorous tech stories like these and want to support me to keep writing forever, consider signing up to become a Medium member. It’s $5 a month, giving you unlimited access to stories on Medium. If you sign up using my link, I’ll earn a small commission. You can also follow me on Medium and Twitter.
