Posts

Showing posts from May, 2020

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
1 comment
Read more

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>&
Post a Comment
Read more

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
3 comments
Read more

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
Post a Comment
Read more

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.
Post a Comment
Read more

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
Post a Comment
Read more

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
Post a Comment
Read more

JavaScript: Basket.js

-
Image
This article is about one of the common concern for web development i.e loading time and how it affects on website performance when you need to load several libraries to your website especially with low internet speed. So basket.js is one of the solutions for it. It is a small JavaScript library which loads external JavaScript libraries and also caches them in local storage, so that on the next page request the external JavaScript does not have to be requested over the network again, but can simply be loaded from the local storage. You can also set an expiry time for the cached item. Let's give a try: <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/basket.js/0.5.2/basket.full.min.js"></script> <script> basket.require({ url:'https://cdnjs.cloudflare.com/ajax/libs/countable/3.0.1/Countable.min.js',expire: 2 }); </script> </head> <body> <h2>Hello, Please check network tab
4 comments
Read more

JavaScript: xtype.js

-
Image
This article is about the weirdness  of javascript and how to handle it by xtype.js. So I am talking about weirdness in terms of types in JS. The typeof operator returns the type in a string format of the unevaluated operand. For example: typeof({}) => will return 'object' typeof(5) => will return 'number' Well, this is not weird. Let me show you something weird, typeof(new Date())  => will return 'object' typeof([‘Max’, ‘Carl’, ‘Tom’])  => will return 'object' typeof(/ab+c/i) => will return 'object'        So it may create problems when you have to do some kind of validations on a type basis. But with xtype.js there is a reliable solution for it. Npm Available: npm install xtype Also, you can use it in the browser by downloading it . Let's have a look at how we can solve this type of validations reliably. xtype.type(new Date())                 // date xtype.type([‘Max’, ‘Carl’, ‘Tom’])     // arr
Post a Comment
Read more

JavaScript: Debouncing | Flipkart UI Interview Question.

-
Image
To understand this programming practice will go with a quick example. We all do online shopping and we do search for products on Flipkart on the search bar. So when we type on search bar i.e on every keypress we are actually giving API requests to the server, which in response gives us suggestions. Actually, it's a time-consuming task and may degrade the performance of the webpage. So to improve the performance we use debounce function which actually acts as a controller which reduces the API request to the server on keypress event. In simple terms, we are giving API request only after a certain amount of time between two keypress events. A debounce is a higher-order function. Higher-order function: A function that returns another function. Let's dive deep: HTML Code: <input type="text" onkeyup="searchProducts()"/> Consider this as a search bar for Flipkart. On any keypress, we are calling searchProducts() function. Javascri
Post a Comment
Read more