Better Way to Attach Event Listener with Vanilla JS
Let’s discuss a better way to attach event listeners to a bunch of HTML elements selected by a class name with vanilla JavaScript. With jQuery, this is super easy. You just select the elements by a class name and use .on(). jQuery will handle event listener attachments to multiple elements. …
Replacing Local Storage with IndexedDB
When you build a PWA, you often have to store data locally. The easiest way is to use LocalStorage. Data persists even after ending sessions and it does easy synchronous read-write operation. Although you need to convert a JSON object to string because LocalStorage only supports string, the programming overhead …
Using Lexical this in JavaScript Class Method with ES6 Arrow Functions
The way JavaScript handles scope is unique. It makes the language so fascinating to learn. It is so different from any other major programming languages. JavaScript has many quirks that make it so fascinating, such as its asynchronous nature, event loops, prototypes, closure and so on. I think this is …
Setting up Unit Tests for React with Mocha, JSDOM and Enzyme
Before start coding your awesome React app, it is always a good idea to set up unit test infrastructure. Once test is set up, you can write tests whenever you feel necessary before waiting to complete the entire app development. Mocha is a JavaScript test framework that runs on Node.js. …
My Gulp Job Example
Gulp is a build tool that automate application builds. It is usually used for front end build, but you can also use it for backend application build (e.g. automating .NET application build with gulp-msbuild). When it comes to front end build automation, gulp is the most flexible and powerful build …
Sorting JSON Array by Multiple Keys with JavaScript
JavaScript’s sort() method sorts the elements of an array. Sort() takes callback where you can specify sorting rules. By writing a small callback function, array of JSON data can be easily sorted. In this example, we use the JSON array that has name and sore. We will sort this date …
Uploading File from Browser to S3 with JavaScript
Uploading a file from a browser to S3 for only authorised users is a pretty cool trick. It is even cooler if we can build it in a serverless way. Here is the entire solution for a simple serverless app to authenticate with AWS Cognito and upload a file to …
Serverless Authentication with AWS Cognito and JavaScript
In a traditional web application, authentication is handled by server-side code and users are managed in the database layer. In the world of serverless apps, we can offload the heavy-lifting to a managed authentication service like AWS Cognito to simplify it. This post focuses on JavaScript code to authenticate users …
Using setInterval() and setTimeout() with JavaScript
setInterval() and setTimeout() functions are the quickest solutions to loop functions with JavaScript, often used for a simple animation effects. For example, setInterval(function(){functionA()}, 1000) executes functionA() every second. On the other hand, setTimeout(function(){functionA()}, 1000) executes functionA() once after waiting for 1 seconds. Both can be stopped by clearInterval() and clearTimeout() …