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, I accepted the Write Code Every Day challenge. Basically I worked in open source projects every day for 1 year.

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 (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

🍌 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.

Link to Banana CSS project.

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:

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:

🚀 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.

See an online DEMO with Redux.

Link to millennium.js project.

Using my passions to explore new things

In 2018, after I watched the Ready Player One 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:

🎮 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.

Link to burnout.js project.

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

🔮 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.

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.

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

Link to N.O.M.s project.

Was it worth reinventing the wheel?

After these personal projects (and a lot of others), 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 and/or Twitter 💜.

Cheers.