Frontend beginnings

It is quite remarkable how, a person can feel when they first learn the basics of coding. As I recently made the jump from understanding the basic concepts of coding to actually building my own unique projects a sense of wonder has begun to appear.

At first I worked on a project with a partner. We called it “The Mushroom Trail”. The idea is that “mushrooms” grow at random along a trail with a tendency to grow more frequently at the beginning of the trail. The trail is not visible, it is only an array of positions created with pointer events. The mushrooms would also die over time and there was a maximum limit of positions and mushrooms.

As I worked on the Mushroom trail with another person, the sense of power and wonder wasn't quite there. The feeling of understanding what I was doing was quite honestly none existent. I had often made programs in the past, but they were always very basic and boring. It lacked something. Perhaps the level of depth was just not met?

I now have started a new project which is entirely my own. The goals are to create a simple web based program that takes keyboard inputs with a temporal element to the input. The output is a variable font changes based on an emotional quality. Although this project sounds simple, it really is not. First I must decide upon an emotion of some sort, which took a lot of consideration. I chose to use the emotion “The frustration of distraction”. The main idea is that based on the variation of typing speed, the variable font is changed to reflect this. There are of course other parts to the project but for the purposes of this article I will not explain it further.

It turns out simply creating objects like words and having them show up in the browser is quite complex. It depends of course how you plan to do it, but for the purpose of a full project that I eventually have in mind it really takes a lot of work. The current point my “Frustratedly Distracted Journal” or perhaps “Irritation Space” is at is quite remarkable and simple. It takes user input from the keyboard. Creates an array of objects for each key press, and upon hitting the space bar creates a word object that is placed into another array. Lastly, every frame request from the browser updates the DOM, appending the words that are not yet on the page, and replacing the ones that already are with updated versions of their objects as well. This may seem like a lot of work for my current project goals, however I do not plan to stop working on it simply because I have reached a goal. Therefore I want to build a proper editor “engine” of sorts before I get into the more difficult parts of the project.

The point I am getting to however, is that sense of wonder. I truly felt like I had achieved something, when I was suddenly able to “print” words to my browser solely based on the key presses I made while running my so very basic program. It is amazing what just a few lines of code can do.

0
Subscribe to my newsletter

Read articles from Jan-Sören Rotermund directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Jan-Sören Rotermund
Jan-Sören Rotermund