Skip to main content

Posts

What are Webhooks? Example use case of payment Gateway.

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.

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

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.

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.

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

JavaScript: Basket.js

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

JavaScript: xtype.js

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