Posts

Node.js: Extract text from image using Tesseract.

Image
In this article, we will see how to extract text from images using Tesseract . So let's start with this use-case, Suppose you have 300 screenshot images in your mobile which has an email attribute that you need for some reason like growing your network or for email marketing. To get an email from all these images manually into CSV or excel will take a lot of time. So now we will check how to automate this thing. First, you need to install Tesseract OCR( An optical character recognition engine ) pre-built binary package for a particular OS. I have tested it for Windows 10. For Windows 10, you can install  it from here. For other OS you make check  this link. So once you install Tesseract from windows setup, you also need to set path variable probably, 'C:\Program Files\Tesseract-OCR' to access it from any location. Then you need to install textract library from npm. To read the path of these 300 images we can select all images and can rename it to som

JavaScript: MediaDevices(Opening webcam to capturing image and downloading it)

Image
In this article, we will see how to open a webcam in chrome and how to capture the image and download it. So let's start, We will be using Navigator.mediaDevices which provides access to connected media input devices like cameras and microphones, as well as screen sharing. The Navigator object contains information about the browser. There is no public standard that applies to the navigator object, but all major browsers support it. HTML CODE: <!DOCTYPE html> <html> <head>   <meta charset='utf-8'>   <meta http-equiv='X-UA-Compatible' content='IE=edge'>   <meta name='viewport' content='width=device-width, initial-scale=1'>   <link rel='stylesheet' type='text/css' media='screen' href='main.css'>   <script src='video.js'></script> </head> <body>   <div class='container'>       <video autoplay>&

What are Webhooks? Example use case of payment Gateway.

Image
In this article, we will see what is webhooks? and a use case for it and how to test webhook locally. Webhooks: Webhooks are just like callbacks but the only difference is there are HTTP callbacks. It is triggered by some event in web application. Let's see this use-case in detail. UseCase: Suppose we have an online site which sells T-shirts and for that we need some payment gateway.  For that, we have decided to use a Razorpay payment gateway. So here the flow will be somewhat like this. Client-side: Users log in to the website and add some T-shirts into the cart and do checkout. Backend side when a user does checkout: Will create an order for the user with payment status 'pending' and will log that in our database with respect to that user. Then we create a payment order for the user using Razorpay APIs and send a payment checkout link to the user. (Consider this payment checkout link is of third party i.e Razorpay) How will w

Node.js/Angular: SheetJS js-xlsx library with issues and fixes.

Image
In this article, we will see how SheetJS js-xlsx library is used to export  data to xlsx file for a particular use case and also, I am covering a few issues that I found and fixes for that. So let's start without wasting time, Use Case: We need to export a html table (containing all columns and rows) into xlsx file. Angular Example Link:  https://stackblitz.com/edit/angular-xbgicw?file=app%2Fapp.component.ts I have used the reference of this example in this article. So please check the Angular Example Link. Here, I have 2 tables with 3 columns Name, Dob in dd/mm/yyyy format, and Id which is a string but sometimes its value maybe number 20 digit. So let's see the happy case: In this example I have imported xlsx library and has 2 functions importTable1() and importTable2() which use xlsx util functions to export the tables into xlsx files. Issues Found: (Export Table One  button will export xlsx sheet for table1 which has these issues) 1) When you ex

JavaScript: Throttling

Image
In this article, we will check what is throttling and how it is different than debouncing. Before that, if you don't know what is debouncing then, I will suggest you read this article on Debouncing(UI interview question for Flipkart). Throttling is a technique to control how many times a function to be executed over time. Why it is important? In 2011, Issue in the Twitter website, when you were scrolling down your Twitter feed, it became slow and unresponsive. John Resig published a blog post about the problem where it was explained how bad of an idea it is to directly attach expensive functions to the scroll event. John Resig: The creator of the most popular JavaScript library in the world: jQuery. How it is different from Debouncing? Well, the debouncing technique is useful for example like search bar in Flipkart, Amazon where we limit the API call to the server. If we are searching for some product and when we take pause(200ms) the API will get called.

JavaScript: Pill 1kB library.

Image
This article is about Pill library which adds dynamic content loading to static sites and makes content loading smooth for users and also at the end of this article, I have share   Interview Questions . The development of Pill started with this tweet: https://twitter.com/sitnikcode/status/1109626507331338240 Its size is 1kB when minified and gzipped. Nowadays, everybody uses a single page application(SPA). SPA is a web application where the page is loaded only once throughout the session but the web components will keep loading as per the user action or the business process. But for the static page's website, there is no need to use SPA. We can use the traditional approach of multi-page application and for that purpose, Pill library will be one of the good solutions. It fetches the content of other HTML files on the server and replaces the current content with the new, fetched one which leads to massive performance improvements. It does not request a whole new p

Node.js (v.14): 2 Things to know.

Image
Node.js version 14 is here! As per the official site, Node.js 14 replaces Node.js 13 on 21st April 2020 as a current release. This article will highlight 2 new JavaScript features included in version 14. So, Let's dive deep and check each one. 1) Optional Chaining operator (?.) : We may have got error many times while conditioning a nested object. For example: var animal={  dog:{    name:'Charlie Bhalerao'    } } if(animal.cat.name){ console.log(animal.cat.name,"executed") } So here we get an error as we do not have a 'cat' key present in the 'animal' object. To avoid such issues, we are validating references in between, if(animal.cat && animal.cat.name){ console.log(animal.cat.name,"executed") } So here we are checking if 'cat' property exist then only access 'name'. But now there is no need to do this type of validations instead we can use optional chaining operator. i