DEV Community: Nicolás Omar González Passerino

#2 How I picked the right tool for the right job

Nicolás Omar González Passerino — Tue, 28 Jan 2025 12:40:00 +0000

Hello there! I’m back, so let’s pick it up where we left off.
After looking at the steps that helped me structure the project, the story continues with another interesting question that sets the foundation for any new project.

What will the tech stack be?

At first, I wanted to go directly to the component’s library and look at other vital parts of what we can consider a stack… but I never considered how it is composed.
So, I put my experience into practice and categorized the stack into the following list, plus some more questions:

Main Libraries: Would I use Angular, React, Vue, Svelte, Web Components, or else? I included TypeScript without hesitation because it was the main reason I started the project.
Unit Tests: I know they can be a bummer, but how can you say your code does what you say it does without tests? They also help you see scenarios you didn't know when you coded and improve your functionality.
UI and Styles: Which projects have good-looking components? Do they need a dependency like JQuery to work at its fullest? How about its licenses?
Component Visualization: A tool like Storybook provides a sandbox for any interested person, but is there more like it?
Package Manager: Npm is our primary source for libraries and tools, but can I publish elsewhere besides its alternatives? which I had in mind.
Module Bundler: Understanding how bundlers work can be overwhelming in 2023, so it needed its own unique category.
Code Styling and Revision: You might think your code is perfect and error-free, but even the best of us need someone to point out when mistakes are about to happen even before we commit them.

After knowing what to search for, I started investigating and picking possible configurations that would ease my future work:

React and Typescript as the main libraries. React has been my primary tool since 2016, and this project will provide a more in-depth experience.
Storybook as a visualizer because I’d learned to use it previously. Also, I watched some examples of how it could be extended for better documentation while the person was experiencing it.
On the unit testing side, Jest and React Testing Library because I’d learned them before but never extended their use; a similar case to the one mentioned before.
The code styling combo that worked like a charm in my previous projects:
- ESLint to review Javascript and Typescript files for basic errors; even tiny, these could happen.
- Prettier to adjust my codebase to a familiar style standard
- Lint-staged and Husky to maintain tools usage as git flow gateways
- For example, if a TS file had not used imports, it was marked as a fail and stopped a commit; or if the UT suite ran with errors before pushing, stop the process until you can run it correctly.
- Just as a comment, this logic was thought to be implemented in CD/CI pipelines for a long-term solution.
Regarding the package manager, I checked other registries like Github’s npm, which I considered a good option, but I preferred to work on the original npm site and focus my work there.
At this point, things were more difficult ‘cause I knew only a handful of options besides Bootstrap. My first main option was Semantic UI, but at that point, I was using JQuery as a dependency with its internal JS logic, so I kept looking for more alternatives until I found Bulma. This simple-to-install and well-documented set of CSS components had no JS dependencies, making them perfect for expanding their usage in a React version.
Finally, I looked for several builders, such as Webpack, Vite, Parcer, and Rollup, and for analysis like this fireship video and other articles. After the reviews, I went to Rollup because:
- It’s popular and has an excellent plugin ecosystem.
- VIte’s engine is based on Rollup.
- It’s easier to configure than Webpack; bad experiences when working with Angular.

If you are interested in how I expanded on these questions, considered possible alternatives, and chose the answers mentioned, it’s all registered in Ticket #2.
Now, all the pieces are together, and I’ve the necessary information to make them work as one. In the following article, I’ll explain how it happened.

See you in the next episode. Nice tools; now mix them.

#1 How I started building the idea 📒

Nicolás Omar González Passerino — Fri, 18 Oct 2024 14:07:00 +0000

Hello there! I’m Nicolás, a front-end developer from Argentina. I’ve been in the industry since 2016, and this is the first article in a series that I decided to write after working on a personal open-source project in 2023. There’s definitely been a learning curve, and I’d like to share my experience with you on how to create a component library based on a CSS framework.

Before starting with the good tech stuff (like integrating with npm, automating version control through git commits, and structuring the component hierarchy), let’s first talk about how the project came to life from the very beginning. For that, I need to answer two key questions.

Why did I choose a component library?

It all started after completing a Typescript course at the end of 2022; at that moment, I was excited because I got a new course certificate to add to my LinkedIn and a public repo with my comments. However, I wanted to put those lessons into practice. Unfortunately, the client code at my job was too complex for a straightforward TypeScript implementation, so I decided to take on a side project. The one I found most interesting was a component library. I had worked on a few client projects before and wanted to dive deeper into how other public alternatives maintain their libraries (like Material UI, AntDesign, and Bootstrap, to name a few).

How did I begin organizing the project?

Once the objective had been set, these were the steps I followed

Named the library Reactive Bulma’s and created the repo.
Created the first issues in its repo.
Created a Project (a GitHub feature that works as a Jira alternative) to organize all current and future issues.
Looked for possible tech stacks and compared each case until finding the best fit (reference, Ticket #2)
Applied the same concept to third-party tools for code improvement (reference, Ticket #4).
Investigated all possible components to be migrated according to the stack I chose, which led to the creation of milestones and the roadmap (reference, Ticket #1).
Added the first folder structure and most basic libraries to the repo's first commits (reference, Ticket #5).
And lastly:
- Wrote the essential documentation for the repo.
- Established a git flow approach.
- Created GitHub issue templates to avoid repetitive actions.
- Added tags for issues related to specific topics (like research, bugs, documentation, or feature implementation).
- (reference, Ticket #6)

The steps above helped me focus my work and create a structure to organize and document all the changes I would encounter, which I’ll discuss in the upcoming articles.

See you in the next episode: Pick the right tool for the right job.

I want to build a solid CI with GitHub Actions

Nicolás Omar González Passerino — Mon, 05 Dec 2022 13:30:00 +0000

Hello you. Thank you for taking the time to look at my post.

First, let me give you some context. I am currently investigating some topics to apply to some future projects:

Some web applications (mostly javascript) as a team and my own
A component library to based on a UI library (like Bulma, for example)

From those investigations, I would like to learn about CI/CD steps to integrate with my future PRs. Some of the steps I am planning to add are:

Unit testing (with Codecov)
DAST/SAST scanning (I don't have any idea in mind)
Code quality analysis (I am looking at Codacy, but never used it)

My idea is to use GitHub repositories to create the issues, link them to the repo's PRs and add the review steps with GitHub Actions

So, I would like to start the discussion with this questions:

¿Do you think there are more steps to have in mind to be included in PR analysis?
¿Do you know any tools to help this process?

Thank you again for your time and help.

Heroku, stages and idle time

Nicolás Omar González Passerino — Fri, 18 Dec 2020 18:33:01 +0000

This year I wanted to understand how to deploy my own apps and improve that path by adding improvements like code coverage upload through jobs or how to use different stages.
Now I've learned how to work with services like heroku and Github Pages/Actions, I come to you with this problem:

These days I have a couple of apps for demo purposes loaded on Heroku using free dynos/plan, these apps are working for my beta and production branches in separated apps
Thanks to the free dynos I don't have any cost, but this comes with the cost of idle time after the app is not been used for 20 minutes.
So far I have founded that each app (or dyno) has to be upgraded to be 24/7 for USD 7/month (thing that I approve, but it gets expensive in my country if I have to mantain several apps with that service)

Therefore, I need your advice about alternatives to heroku or a way of mix services (like use Heroku for the beta version and GitHub Pages for prod).

Any hint or idea is welcome :D
Thank you for your help.

How do you deal with burnout?

Nicolás Omar González Passerino — Mon, 16 Nov 2020 00:29:09 +0000

Thanks to DEV, I have found a lot of great articles about new features, tools, and libraries, as well as questions about life aspects of a developer, which helps me to become a sharper dev and better professional every day.

Today, I want to publish my first article after I began my career almost five years ago with a situation that may have happened to many of you (even before this time of pandemic).
This year I started learning new things to improve my toolbox as front-end. But in recent months, I didn't have time to apply them because I have had other things to do in my free time (chores, work overtime), and like someone who often challenges himself, I started to feel sad and overwhelmed.

Nowadays, I have found a way to reach a balance with my demands. First, I list all my goals, dividing them into small tasks, and doing one or two a day, so I can focus on what I want and have a balance with my life.

Do you experience this feeling often?
If you do, what do you do to achieve that balance?