How to boost your productivity
Tags: webdev, javascript, productivity
Published: 2022-03-06 11:58:03

In the next couple of lines I would like to share you my experience from the latest feature developed at the current company.

__!__ You should not implement __authentication, cryptographic__ solutions from scratch. In those cases, please rely on third party solutions, unless you _really know what you are doing_!

## The eggs hatched

When I started to write this post, it would have contained only the first part. Thankfully forgot to post - because now, after a few weeks - I have another first-hand experience to share with you! (Although I will do that in another post soon :) )

### The scene - for the first occasion

So our designer dreamed a new page for the latest feature. It is a custom graph displaying several different information about booking tables for different periods and for varying length in dates. The main part of the page looks like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ekvo0ie4m9eckojo8h62.png)
 

#### The difficulties

It contains the two most difficult (or rather tricky) thing to deal with in JavaScript (in my opinion): dates, and a graph/chart.

#### The possibilities

Picking some third party solutions for the project usually includes these two reasons:

1. Having the pressure from the product side
2. Try not to reinvent the wheel

With this on the table, every team tries to deliver the feature as fast as possible - within an achievable time period.

#### The path

I started to look for various third-party libraries, like 
[d3js](https://d3js.org) or [recharts](https://github.com/recharts/recharts). Oh, I hope I mentioned, we use React.js.

Everything was like a roller-coaster. One day it looked like there is a possibility to implement all the details with some compromise, but soon I realised that it will not be the solution.

During a bath, a new idea started to take shape, that maybe I should solve it with plain HTML elements. After all, a diagram is a _table_, where the available spaces are the Y axis, and the time period is the X axis. Each cell contains a _filled status_, if that particular space is sold or not.

#### The surprise

To my greatest surprise, it was much quicker to solve the problem this way.

__The pros:__

- You do not have to concentrate on the API of the library
- Your possibilities are not limited by the API
- You can spend more time to completely match your core business logic (even the edge cases)
- React.js is your friend with [Reconciliation](https://reactjs.org/docs/reconciliation.html) to optimise rerendering (You can search for more years in our case)
- You are free to jump between major versions - one dependency less to track the compatibility with.
- Smaller bundle size

__The cons:__

I think there are a few, and the most important one was wasting ~1 week with finding the 3rd party lib that matched our use-case.

- You have to implement the styling by yourself. (Is it even a con? CSS is awesome and easy!)
- Third party libraries may provide some additional features (but does not cover your main requirement, so..)

### Footnote

I do not want to say that using third part libraries are bad. There are awesome ones, and each of those serves a purpose.

My suggestion is: __always look for possible third party options as well as think about how to solve it with plain HTML/TS/CSS.__

The more experience you gain, the less time you can make the current best decision.

And remember: _the junior programmer knows what to use, the senior knows what **not** to use_.