DEV Community: Abner Soares Alves Junior

Faster Conventional Commits Messages

Abner Soares Alves Junior — Tue, 26 Apr 2022 13:55:26 +0000

Conventional Commits is a specification to help creating an organized commit history.

This is not a tutorial explaining what it is, but a simple tip for automate some pieces when you are working with it.

The slow way 🚶‍♀️

In your daily workflow, the team commits use to follow a pattern using the prefixes, like: feat:, chore(API):, fix:. It's become repetitive and can be optimized.

The faster way 🏃‍♀️

Here is a simple solution for my case, but this can be extended in many ways to your workflow.

function gitCommit() {
  git add .
  git commit -m "$1: $2"
}

alias gchore="gitCommit chore"
alias gfeat="gitCommit feat"
alias gfix="gitCommit fix"
alias gwip="gitCommit wip"

The function takes 2 args, one is the prefix you want to be added, second is the message.

In my case, what I most use are these prefixes, so I've created an alias for every single one.

Now when I want to add all and commit I just run

$ g<prefix> "message to be commited"

Going Further

Another good improvement is using oh-my-zsh combo with Git Plugin.
It brings a lot of aliases for other languages, other CLIs, like Heroku, Ruby, etc.

Using the Git Plugin the above function could be converted to:

function gitCommit() {
  gaa
  gcmsg "$1: $2"
}

Use your imagine and you can include other things as you need.

Booting WSL2 faster

Abner Soares Alves Junior — Mon, 27 Jan 2020 17:01:28 +0000

What is WSL2?

For those who don't know what is this. Basically, it is a Linux kernel running in a lightweight VM inside of Windows 10. Allowing you to install some distributions like Ubuntu, Arch, and Debian.

This version 2 becomes with many performances, and other, improvements, which makes it more usable for day-to-day coding.

The Issue

I've been using the Ubuntu distribution, combined with Zsh + Oh-My-Zsh, and recently it's started going really slow during the boot time.

Time to start using the terminal has increased a lot and I didn't change any configs, only updated the Windows. The time to code was more than 20 sec.

Possible Solution. Worked For Me

Reading through a lot of Github Issues on WSL repo, I found one comment that suggests turn off the Windows Firewall. Lots of people upvoted this solution. To my surprise, It worked.

Don't ask me why this worked. I'm not too familiar with how all those things work, but maybe something blocks the process during some check steps in the firewall. Like an anti-virus that slows some application.

In case you have had this kind of experience and solved, or know why to turn off firewall works, drop a comment.

Fixing development flow after Catalina's update

Abner Soares Alves Junior — Fri, 18 Oct 2019 13:59:26 +0000

The MacOS Catalina update for some reason removed some necessary libs that usually are installed to development purposes.

Checking the requirements

I figured out this issue when working in a Ruby project, more specifically with Nokogiri gem.

The issue was pretty easy to solve after find what is the problem.
I had to reinstall the xcode-select tool. Simple as that I managed to fix my issue.

I heard other people having issues with other gems and other projects. Most of them are having issues because of something that was uninstalled in the update.

The advice is check the requirements, possibly you had something removed.

A roadmap to learn React. Personal choices.

Abner Soares Alves Junior — Fri, 04 Oct 2019 21:28:38 +0000

Another list?

Yes! In case you are working for some time with React or even consider yourself "fluent" in React, probably nothing here will be new to you neither stunning. However it's a good path for beginners.

Why I've decided to create this list?

At the time of writing this post, I work in CodeMiner42 and we have in mind that no one born ready. Miners are encouraged to pursuit the knowledge abroad of their comfort zone and evolve beyond their limits.

These courses/videos helped during my learning process. So basically that is the criteria of choice.

Why not entirely free courses and links?

In CodeMiner42, we have access to Frontend Masters and Egghead.io. This websites have a great variety of quality content. This boost provided by our company is amazing. Thanks ❤️
Also we have many lists in the internet that use only free resources. Since this started inside our environment. I decided to use the weapons I was given.

I will not explain each topic because this is part of your learning path. Understanding why and where you can, or should, use these is a good way to keep improving your knowledge.

Javascript

React

Good Start, trully begginer's guide React Tutorial for Beginners with Kent C. Dodds on egghead.io
This one is a little bit more advanced: Advanced React Tutorial with Kent C. Dodds on egghead.io

React Routes

Redux

This two links should be watched in the sequence as linked here:

Testing

Actually we have two major libs for testing react components. Enzyme and react-testing-library.

This first link show some good to know concepts for unit testing. Not specifically for React. Learn Testing Practices and Principles with Kent C. Dodds
React Testing Cookbook from @trevordmiller on @eggheadio
This one is more like a walkthrough the react-testing-library. Understanding how react-testing-library works with Kent C. Dodds from @jhooks on @eggheadio
This course has also Integration tests using cypress.Learn to Test React Applications with Jest, react-testing-library and Cypress

Hooks

React In General

This section brings to us courses not only with basic React, but also other libraries commonly used alongside.

Build A React App With Redux from @avanslaars on @eggheadio
Learn React Using Hooks to Build Real-World Applications with Brian Holt
This is a path to follow and has some courses that were listed in other topics. React.js Learning Path – Be Productive with React.js, Today's Most Popular Framework

Webpack

Show your skills

Creating projects is a really good way to put in practice what you've learned. Here is a list of ideas:

Todo list: it's widely used as a first app, but you can add improved features pushing yourself
Pomodoro App
RSS reader
Some idea consuming publics API, eg: Github, weather, currencies, cryptocurrencies.

Last but not least, put all this on the Github. Don't be afraid to show your code, even this not being the best. You are learning and you will evolve. People don't have a present without a past.

Share the content which you used to learn React. Since this is not a free-list only, share also paid content. This can help people decide if the content is worth.

Is Server-Side Rendering really easy using NextJS?

Abner Soares Alves Junior — Mon, 10 Jun 2019 14:15:13 +0000

In large scale, front-end app which I have worked, one of the requirements that must be present in the project was Server-Side Rendering. The core team has decided to go with NextJS, at that moment was the NextJS 6.

Many things started to goes wrong and we faced troubles with Dynamic Routes, state merge, and management.

Have you ever used NextJS to accomplish this requirement or any other lib/framework?

Last, did you have in troubles with SSR rendering not only in React apps but in other apps?

Speed up your Next.js build with one simple step

Abner Soares Alves Junior — Wed, 08 May 2019 02:49:43 +0000

Brief introduction

Next.js is one of the most hyped and used React Frameworks to create SSR(Server Side Rendering) applications nowadays.

This framework was created inside of ZEIT headquarters, the same company behind the NOW, a really easy and fast way to deploy your apps.

🚀 Boosting your build time

In a React project, many folders patterns to organize your code are possible, so you also can have your specs in different folders, but Next.js has one requirement that your pages should be placed in the pages folder. The standard setting will serve every js file located in this place as a route. You can find more 🔗here about how to change this if you need more custom routes to your project. But it still building the JS files.

All Javascript files placed in that folder and those subfolders are going to build, so your spec files also will be built. In the moment what I'm writing Next.js 7 and 8 both has this behavior.

Next, if that was not enough and you decide to generate source maps for your files, things become way more critical. Probably you are going to have source maps for your specs file too. Imagine how much time you've been spending unnecessarily.

What about the numbers?

Disclaimer: this might change accordingly with your machine, project size and structure.

My project has the following numbers:

Around 100 React components
Around 15 Next.js pages, which usually are a group of React components
Using latest Next.js 7

My machine is a MacBook Pro 13" - 2018 and to build the project it was taking between 150~165 seconds without source maps.

Moving the spec's files from pages to another folder the build time decreases to 45~60 seconds. An increase of 266% in the build time because of this simple miss placement of the files.

Wrapping up

When you are using a third party framework or library, with a built-in setup to process something you definitely should read the docs.

You can miss important requirements or how things works that may cause trouble for you in the future, and also digging deep into their codebase you may find interesting things that can help you too. Don't be afraid to do that.

If this post helped you solve that particular problem or similar issues, I would like to know.

This is my first post in Dev.to. Feedback and discussion are more than welcome, please drop me a comment if I helped you tweet to me at @abnersajr.

Last but not least, in software development, small things can cause a big problem.