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.
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
A very simple search query function. It’s going to take a
searchTerm and filter the
data according to that and returns us the result. …
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.
.gitlab-ci.ymlfile 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.
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.
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
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?
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
So let’s together go through the things I have learned so far.
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
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
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. …