Explore Learn and Grow

Posts

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’) }

BrainPickings: Maria Popova

This article will link those, who love to read about arts, science, and biography to the perfect place. Brainpickings.org is just the right thing. Well, brainpicking is a famous blog by Maria Popova . Maria Popova is best known for her insightful and eclectic writing. She writes about whatever she reads in her blog. She started her journey on October 23, 2006, like a weekly email to his seven friends, which eventually brought her online and now it is included in the Library of Congress permanent web archive . She is also the author of a very long, very yellow book titled Figuring . She says it is the distillation of her lifetime’s reading on science, the arts, and biography. Well, this was a very short introduction to her. I would insist you too read her blog and get yourself enlighten. I hope you like this short informative article. Do share it with your friends. WRITTEN BY: saurabh Joshi

Node JS:Understanding bin in package.json.

Well as a Node Js developer we know package.json as dependency file where we keep a note of all dependencies of our project. Here we will be looking at what is bin in package.json? To understand this we first need to understand command line application and it's purpose. CLI applications are mostly used to automate things such as deployments of application,running tests,building reports and the list goes on and on. So lets start with creating our first CLI application. First, let’s make sure you have the tools required. To complete this tutorial, you will need the following: 1)A recent version of Node.js downloaded and installed 2)A good text editor, such as Visual Studio Code Next, open your computer’s command prompt (Windows) or terminal (macOS/Linux). Change the current directory to the folder where you save your documents or projects. Enter the following commands to create a new project folder and initialize the project. mkdir hello-cli cd hello-cli npm init Nex