Gitlab created gitlab-runner which helps us run jobs automatically from gitlab and watch results in gitlab dashboard.

Let’s use gitlab-runner to automatically deploy a ReactJS app to a Linux server.

We need these things to successfully automate our application deployment.

1. A Linux server with gitlab-runner installed.
2. Register the installed gitlab-runner with gitlab.com.
3. .gitlab-ci.yml file with configuration about deployment.

So just to key everything things DRY here is the official guide to install gilab-runner into your linux server.

If you want to install gitlab-runner on any other OS than linux checkout github-runner official docs

Once everything setup let’s jump to registering our gitlab-runner with gitlab. …

You shouldn’t be ashamed of making money.

You shouldn’t be ashamed of making money. This world runs on money and more you have in your pocket more you can live an affordable life and get whatever you want.

But does money is everything?

Should we always judge the quality of the employer based on money?

Does more money mean more satisfaction in the workplace?

It depends on your priorities. What are your goals? if you are thinking of buying a house, yeah definitely go for the money but it’s not always that high paying jobs are the best. I’ll try to explain why is that throughout this article.

We relate money with job satisfaction

Money can’t give you job satisfaction. Period. This is the most common misconception. …

React is a great library to write reusable UI. The problem React faced for a long time is reusing logic. Developers introduced techniques like HOC and Render Props to overcome this, but both of the techniques easily goes off the rails and components become very complex ( hard to reason about ) if we use these techniques heavily.

React introduced Hooks to overcome this obstacle. React Hooks are a great way to reuse logic throughout your project. …

So finally we have first class support for custom elements in HTML now. We can define our own custom tags in pure JS without the need of an external library.

Defining your own custom HTML element is very simple. You need to use customElements.define method to register your component so browser can understand and render your HTML element.

customElements.define method takes three arguments

1. Name of your component. ( for e.g. colored-text)
2. Your component. ( i.e. A ES6 class )
3. An optional object if you are trying to extend another HTML tag

Let’s try to write a custom HTML tag which will render text with different colors. …

I have been hearing about Shadow DOM for a quite long now. It’s time we should try them out. So before we get started what exactly is Shadow DOM?

What is Shadow DOM?

I assume you know what a DOM ( Document Object Model ) is, if you don’t you should definitely check it out. On a very high level, a DOM is a tree representation of HTML running inside the browser. The browser uses it for a lot of purpose including adding, removing nodes, changing the style of a specific component etc.

Let’s get back to the Shadow DOM. A Shadow DOM is a hidden dom which can be attached to any element inside our real DOM. It works like a normal DOM. We can use all of the DOM APIs with it but one of the coolest benefits of the Shadow DOM is that all of its markup and style will be scoped. So any CSS that we write inside it will not affect the real DOM. …

It’s not our job to fix everything.

It’s not our job to fix every mistake done by our juniors.

It’s not our job to do extra code because we think we will do it much quicker than the developers we assigned to the task.

It’s not our job to be the one man army who is going to deal with everything while our team members party every time.

We has completed everything. We had been to that place. We had been The Superhero. A cure for all. A person who with the snap of a finger can fix all of the bugs ( Pretty much like Thanos just for the bugs 😅 ). …

Recently I started diving deep into react source code and just reading over the code I learned a lot and among all of these things was a better understanding of JavaScript Objects.

So let’s together go through the things I have learned so far.

Object.freeze

I had known about Object.freeze from some time now but seeing it in action brings a lot to the table. The main purpose of Object.freeze is to freeze the object that is passed to it. Frozen object properties cannot be modified, added or removed in other terms it will make an object completely immutable

If we don’t want that our objects should be modified we can freeze them just like…

In the previous article, I wrote about converting our react component into a npm module today we will be going through the process of publishing that component to npm registry.

If you haven’t read my previous article on Building a React component as an NPM module go check it out.

Let’s pick up where we left off here you can find the code we have written so far https://github.com/recraftstudio/dummy-react-npm-module

Readme.md

Let’s add a readme.md file to our package. A readme file is very important for your NPM module as it will be the first thing people will see when they visit your component. …