A practical introduction to Git Flow

Luca — Fri, 25 Feb 2022 13:56:50 +0000

Most part of the devs out there use Git everyday but for who is not familiar with it, Git is the most popular version system control.

Git basically works by tracking the changes made to the files providing a record of what has been done and allowing to revert to a specific version any time you want.
Git also makes collaboration easier. It enables all changes to be merged into one single source.
These possibilities combined with its ease of use have made it a needful tool to handle the life cycle of the development of a project.

There are various strategies for working with Git and and you can choose among them depending on your own context and needs.
Personally, I have used many times the Git Flow branching model which is described in this great article by Vincent Driessen.

The image above, taken from the article by Driessen, shows an example of the flow of this branching model.

This strategy implies the use of the following types of branches:

master: it is the branch that reflects the production state. Starting from 2020 it is often named main.
develop: is the principal branch where the state of code represents the latest delivered development changes for the next release.
feature/<feature-name>: these branches are completely dedicated to the development of new functionalities. Feature branches come from the develop branch and must be merged back to the develop branch.
release/<release-name>: the release branches are used to prepare the release of a new version. These branches start from the develop branch and must be merged in both develop and master branches.
hotfix/<hotfix-name>: the hotfix branches are used to make urgent corrections to the project. These branches come from the master branch and must be merged back in the master and the develop branches.

git-flow is a set of Git shortcuts to easily apply this branching model, you don’t have to use it necessarily but it is very convenient.

For information about the installation refer to the official repo.

To work with git-flow you need first to initialize it in the project by using



git flow init

Now let's see how to do the most common activities

Add a new feature

You need to create a new feature branch from the develop branch and switch to it. You can achieve this with



git flow feature start <feature-name>

After you have done all the needed changes to the feature, you can close it by typing



git flow feature finish <feature-name>

The feature branch will be merged in the develop branch and then be deleted.
The pointer will be changed to the develop branch.

Since these actions are performed in your local repository, always remember to push the changes when you finish your features to update the remote develop branch.
Alternatively to push you can use



git flow feature publish <feature-name>

Make a new release

First you need to start a new release with the command



git flow release start <release-name>

that creates a new release branch from the develop branch and switches to it.

Once you have done all the changes needed you can close the release with



git flow release finish <release-name>

the release will be merged in the master branch and a version tag will be created using the name of the release branch.
Merges the release in develop and delete the release branch.

Here, too, remember to push the branches and the new tag to update the remote branches. More simply, you can also use



git flow release publish <release-name>

Apply a hotfix

Like in the other examples we need first to create a new hotfix branch from master branch and then switch to it with the command



git flow hotfix start <hotfix-name>

When the hotfix is ready to be closed we can use



git flow hotfix finish [<tag version-name>]

Under the hood this command will merge the hotfix into the master and develop branches, delete the hotfix branch and create a new tag.

Here, too, it is important to update the remote branches.



(master) $ git push
(master) $ git push --tags
(master) $ git checkout develop
(develop) $ git push
$ git push {github_username} :hotfix/1.3.4

If you are looking for a brief summary of git-flow commands check this cheatsheet

👋 See you in the next article!

Learn more

How to detect file type in JavaScript without checking its file object type?

Luca — Thu, 16 Sep 2021 14:46:42 +0000

Usually when we want to check the type for a file that we have to upload we look for its MIME type in the file object.

MIME type is a standard that indicates the nature and format of a file, here you can get a list of the most common, there are really many of them.

But.. What if the file for some reasons doesn't has an extension or have a wrong extension assigned? 🤔

Luckily the magic numbers come to our aid.

Magic numbers are a byte pattern inside a file that is used to determine which is the type of the file.

Or, more properly, from Wikipedia:

Magic numbers implement strongly typed data and are a form of in-band signaling to the controlling program that reads the data type(s) at program run-time. Many files have such constants that identify the contained data

For have an example of how to implement magic numbers "by hand" with the FileReader API I strongly recommend reading this article by Andreas Kihlberg.

I want instead focus on the file-type library. This library applies the magic numbers approach to the ArrayBuffer of the file for detecting its type. It works with a large amount of different file types.

Unfortunately some file types, especially plain-text files, are harder to spot by this method and if you want to check the type you have to use a parser for every kind of file you have to consider.
For example if you want to spot SVG you can use is-svg library from NPM.

I've created a Sandbox using React that show how the file-type library works.
C'mon, try it! 👇

👋 See you in the next article!

Forem: Luca

A practical introduction to Git Flow

Learn more

How to detect file type in JavaScript without checking its file object type?

But.. What if the file for some reasons doesn't has an extension or have a wrong extension assigned? 🤔

Learn more