Skip to main content

Posts

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

JavaScript: Debouncing | Flipkart UI Interview Question.

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

JavaScript: Countable.js

This article is about a very small, rather unknown,  but a very powerful JavaScript library which will make your life easy without making your web app unnecessarily heavy. Well, this may be useful in a use case, where you need to show count of words, characters,  sentences etc to the end-user which he enters into a text field or to store it in a database for some data analyzing kind of thing. So let's start with some code: <input type="text" id='usertext'></textarea> <script>   Countable.count(document.getElementById('usertext'), counter =>     console.log(counter)   ) </script> Now you should see: {paragraphs: 0, sentences: 0, words: 0, characters: 0, all: 0} With the Countable.count function we get the current state of our text field.  But if we change anything in it now, the function will not be called again. The triggering at every change of the content of the text field can be achi

Javascript: Mousetrap.js

Mousetrap is a small standalone library with no external dependency. It is used for handling keyboard events, shortcuts in the browser. Mostly when building complex UI's, it is helpful or necessary to provide the user with keyboards shortcuts. This is also conceivable in video games or something like that. Let's look at the example: Bind a single Key: Mousetrap.bind(‘4’, function() {   console.log(‘you pressed 4’) }) Note: It makes a difference whether it is a capital or small letter that was defined or pressed. For Mousetrap, for example, x is not equal to X. Bind a single key, trigger the function when you let the key come up, after holding it down. Mousetrap.bind(‘x’, function() {   console.log(‘You pressed x and let it come up’) },‘keyup’) Trigger when the a, b & c keys are pressed in sequence. The specified sequence must be observed. Mousetrap.bind(‘a b c’, function() {   console.log(‘You pressed a, then b & after that you pressed c’) }