A coders paradise
These days, most of the photos generated by our devices are quite large in resolution and in size. As developers, we may not need large images (>5mb) especially if you’re using it for a profile picture or so. A common solution so far was to resize the image after it was uploaded to the server. How about doing this at the client side and compressing the image before it reaches …read more
Wondering what exactly does a double arrow function do, how it works and when is it used ? We’ll take you through a quick tutorial explaining the same. Before explaining double arrow functions, we’ll take a quick look at arrow functions. Arrow functions Arrow functions are anonymous functions that are special because they do not bind to their own this. They get the value of this from the enclosing context. …read more
For many websites, advertisements could mean a substantial source of revenue. Hence, making it appealing, clickable and unobtrusive is an essential base requirement. Lets see how you could easily setup ad rotation on your website with the use of a standalone javascript library Ad-rotator. Ad Rotation in pure javascript We made a small list of requirements of what we’d expect from an ideal Ad-rotator. These basic requirements were to – …read more
Sometimes, you might want to encrypt your data stored in the LocalStorage given that it is easily readable by anyone having sufficient knowledge on where to look. Lets see how we can encrypt localstorage data with ease. Instead of reinventing the wheel, we are going to use a localStorage wrapper that takes care of checking browser support, supports storing more than just strings in the localStorage and most importantly supports …read more
You just created a package / library written in TypeScript or Javascript and now you wanna publish it to NPM along with its types (typescript definitions) ensuring that type-hinting is available to everyone who uses your packages, then this little post is for you <3 Linking a NPM package with its types Your package could have been written in typescript or in javascript. Lets deal with packages written in typescript …read more
Building a smart search that’s fast, autocompletes your queries and displays suggestions is something that everyone would love on their website. Today you will be introduced to a sleek, lightweight and most importantly, a standalone autocomplete library – typeahead-standalone.js. Why typeahead standalone ? Before answering that, know that typeahead-standalone is heavily inspired from the famous twitter typeahead library. Although it is a fantastic library (we even recommended it back in …read more
If you are familiar with the LocalStorage API, you know that there is no provision for setting a TTL. This post aims to show you an easy way to write up a simple wrapper to have LocalStorage with TTL. To setup TTL with LocalStorage, all we need to do is – Store items with TTL (i.e. set to expire within a given time frame) Retrieve items that haven’t expired To …read more
How to get a smooth scroll without using Jquery ? or any other library? As of 2020, such a trivial task is well supported natively by browsers. Smooth scroll can be achieved via pure javascript or even pure css. Lets check out how to smooth scroll natively using both the ways. Smooth scroll in pure Css Set the scroll-behaviour property to smooth on any class (or the whole body) to …read more
This post involves setting up eslint, stylelint, husky and lint-staged to ensure you lint on precommit git hook. Less than 5 mins of setup that will automate linting and make it a part of your daily development process. If you are unfamiliar with the libraries that will be used, lets quickly see what each one of them does. Libraries Used and What they do ESlint – Tool to identify and …read more
Webpack analyzer bundle helps you to visualize the output of webpack in an interactive map. It displays the size that each bundle uses before and after being minified and compressed (gzipped). This can help you to discover which bundles are huge and if any of the bundles got in by mistake. Lets check this out by installing the bundle first. 1. Installing Webpack Analyzer Bundle The easiest way to have …read more
