How I became a senior javascript developer with personal projects
Tags: javascript, career, opensource
Published: 2020-08-10 20:39:48

# Everything can be summed up in short words

> *One of the best decisions in my developer career was to go beyond just using tools.*

I decided to create my tools, not for commercial propose,  but to know how these technologies actually work and to improve my tech skills.

This is a short story about how this decision changed my life.

# My first big challenge with a personal project

I've always been the `CSS` guy. In 2015 my passion for `CSS` took me quickly to the status of "reference" in my country (Brazil).

At this time, inspired by my friend [Raphael Amorim](https://twitter.com/raphamorims), I accepted the [Write Code Every Day](https://johnresig.com/blog/write-code-every-day/) challenge. Basically I worked in open source projects every day for 1 year.

![My github profile with 367 days of coding](https://dev-to-uploads.s3.amazonaws.com/i/2r37mihqnipgsx4hejzw.png)

Okay, but in my first days of coding, my `javaScript` skills were **extremely** limited. 

Everything has changed when I received an invite to talk in [Front in Valle](https://www.youtube.com/watch?v=5g-ydL4KZMc) (a big front-end conference in my country) that I could talk about any topic. So I had an idea as naive as it was brilliant. **I decided to learn about `javascript` creating my own `CSS preprocessor`**.

## Banana CSS

![Banana CSS logo](https://dev-to-uploads.s3.amazonaws.com/i/njdulos136yc1jjsykn4.png)

> :banana: *The Brazilian CSS superset.*

In 2016 I created the `CSS preprocessor` called `banana CSS`, the objective of this project was to learn `javascript`, but I ended up learning about `Node.js`, how to `creating CLIs`, `lint`, `unit tests`, `JSDocs`, `continuous integration`, `data structures`, `AST`, how to create `gulp` plugins, and more.

![Preprocessor example with flexbox](https://dev-to-uploads.s3.amazonaws.com/i/f57rgq1096ahhd0fb7vg.gif)

> [Link to Banana CSS project.](https://github.com/bananacss)

# Going deep in front-end development.

Okay, at this point I felt the necessity to learn more about `javascript` in the browser, so **I thought about the main tool I daily use** and came to the conclusion that it was `React.js`.

So...

## millenium.js

In 2017 I created a project called `millenium.js`, the description for this project is:

![millenium.js logo](https://dev-to-uploads.s3.amazonaws.com/i/92ekq9updioatb4osqo2.jpg)

> *A `javascript` library for creating Functional Stateless Components and render with `Virtual DOM`. Ideal for creating ultra-light and fast applications with `Redux`.*

Or my favorite description:

> :rocket: *Render your `front-end` in less than 12 parsecs.*

In this project, I learned about performance, good practices for creating `front-end` libraries, `algorithms`, `JSX`, and more. Of course, I kept all the good practices from the old projects.

![Example with Redux](https://dev-to-uploads.s3.amazonaws.com/i/f2etjyj6x057q5934kus.gif)

See an [online DEMO with Redux](https://millenniumjs.github.io/millennium-redux-boilerplate/).

> [Link to millennium.js project.](https://github.com/millenniumjs)

# Using my passions to explore new things

In 2018, after I watched the [Ready Player One](https://pt.wikipedia.org/wiki/Ready_Player_One_(filme)) movie, I left the movie theater determined to create a game with `javascript`.

Creating a game with `javascript` is relatively simple, you can choose among a lot of tools, read the docs, experiment, and it’s done.

But, the natural decision (for me) was: **Creating a new tool for creating games**.

For this project, I decided to define some funny rules:

- Don't use `Canvas`/`WebGL`.
- Use only `CSS` to render animations.
- Write a functional code.
- Try to write the maximum of `isomorphic`/`universal` code as possible.

## burnout.js

Finally, I created the `burnout.js`:

![burnout.js logo](https://dev-to-uploads.s3.amazonaws.com/i/zd0ahwgx9pi0yos3z48p.png)

> :video_game: *The 2D game engine for manage collisions.*

In this project, I learned more about `functional programming`, `DOM` performance, `algorithms` (for calculating the elements collisions), and much more.

![Game example](https://dev-to-uploads.s3.amazonaws.com/i/quoqr0n6h1ydboibxyld.gif)

> [Link to burnout.js project.](https://github.com/burnoutjs)

Again, of course, I kept all good practices like `unit tests`, `unit tests`, `unit tests`, hum...

# Triggers for projects from projects

At this point, I had a revelation:

**OMG, why did I never think of creating my automated testing tool?**

So...

## N.O.M.s

> :crystal_ball: *Universal/isomorphic javascript unit tests for witches.*

While working on `burnout.js` I built the `N.O.M.s` (my testing tool) and wrote [100% of the `burnout.js` `unit tests` using the `N.O.M.s` library](https://github.com/burnoutjs/burnoutjs/tree/master/tests).

What were the goals of creating my test library?

- It should work in the browser and `Node.js` (`isomorphic`/`universal`).
- Create all assertions in pure `Javascript` (not using browser `APIs` or `Node.js` modules).
- Use `Emojis`.
- Don't use a custom `CLI` for run tests.

![Unit test example](https://dev-to-uploads.s3.amazonaws.com/i/5z5kjg8255i2jbi23pwt.gif)

Curiosity: I used mocha to write the `N.O.M.s` unit tests. Ironic but funny :sweat_smile:!

> [Link to N.O.M.s project.](https://github.com/afonsopacifer/nomsjs)

# Was it worth reinventing the wheel?

After these personal projects (and [a lot of others](https://github.com/afonsopacifer?tab=repositories)), in 2019/2020 I spend my time working on corporate products, creating complex Front-End applications, and leading a `full-stack` development team.

For my surprise, in the last years of open source development, I’ve improved my technical level a lot and I had no problems with implementing complex architectures using `React.JS`, `immutable.js`, `web components`, `flux`, `tests`, `PRPL pattern`, `back-end APIs` (`node.JS`/`python`), `MongoDB`, and a lot of tools/good practices for web applications!

# Conclusion

I finish this blog post complementing the first paragraph:

> One of the best decisions in my developer career was to go beyond just using tools, **I decided to create them**.

Thanks a lot for reading my first English blog post.

If you liked this content, follow me on [Github](https://github.com/afonsopacifer) and/or [Twitter](https://twitter.com/afonsopacifer) :purple_heart:.

Cheers.