Let‘s search

Image for post
Image for post
Building a client-side search recommendations system

Searching data is an interesting problem. Most of the application requires some sort of search implementations. Some need to provide very simple search functionalities whereas others require intelligent recommendation based searching techniques.

Today we are going to build a search implementation that can scale
with the needs of our application by querying different search algorithms/providers and serving combined results.

Search data source

The initial implementation is straightforward. We are going to do a text-based search over our data, and return whatever matches as the result.

So let’s write some code to make this happen


Let’s deploy our app

Image for post
Image for post
Pixabay & Canva

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. Register the installed gitlab-runner with gitlab.com.
  2. .gitlab-ci.yml file with configuration about deployment.

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. …


Let me tell you something interesting

Image for post
Image for post

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. …


They are fun and concise

Image for post
Image for post
Canvas & Pixabay

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. …


First class support of custom elements in HTML

Image for post
Image for post

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. Your component. ( i.e. A ES6 class )
  2. An optional object if you are trying to extend another HTML tag


Pretty simple isn’t it?

Image for post
Image for post

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.

Image for post
Image for post
Pixabay

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 😅 ). …


Let’s explore objects

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.

Image for post
Image for post

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…


Here we go

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. …


Are you ready?

Image for post
Image for post

Javascript is evolving and we are on that ride. In the past couple of years, the progression in Javascript ecosystem is overwhelming. There are enough UI libraries, Frameworks which will exhaust us in the process of learning them.

To stay competitive in the market a Javascript developer has to learn a lot of things and as the Javascript developers ecosystem starts to get crowded a fine developer have to learn things quickly too.

In my own case to stay and hold my ground as a Javascript developer, I hold up to a technique I refer to as “Speed learning through code”. …

About

Manoj Singh Negi

I write about Javascript http://eepurl.com/co0DYj. Solving people problems using code. Javascript developer, Writer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store