Posted on

Seven Essential JavaScript Functions

As a developer, you might know how important JavaScript has become. Right now, it is the most popular and commonly used programming language in the world. It is used to program desktop and server programs, webpages, web applications, mobile applications, etc. It is also used for databases like MongoDB and CouchDB.

JavaScript has come a long way since its inception. Earlier, developers were aware of only a few functions for all types of features and functionalities because every browser implemented the features according to their rendering engines, which made manual testing of web applications across browsers complicated. But, now you can automate the cross-browser testing of JavaScript web applications with the help of online Selenium Grid without writing repetitive code.

Posted on

How to Add a Static Member Property in a JavaScript Class

Recently while solving a problem, I came across a requirement to create a property in a JavaScript class, which needs to be shared by all the object instances. In the programming world, these types of properties are called Static Properties.

There are various scenarios when you need a static member property:

Posted on

How to Use Higher-Order Components in React

In JavaScript, we have higher-order functions (HOC), which are basically functions that accept functions. In React, higher-order components are basically functions which accept component as parameters, inject or modify their props, and return a modified component.

Real world use case: Suppose you have a button that you want to be rendered with two different styles. Using the main ideas behind HOC, we do not need to create two buttons with different styles, but, rather, create a single button component and pass it through a wrapper function that modifies its props or styles and returns a new component.

Posted on

Loading Data in React: Redux-Thunk, Redux-Saga, Suspense, and Hooks

Introduction

React is a JavaScript library for building user interfaces. Very often using React means using React with Redux. Redux is another JavaScript library for managing global state. Sadly, even with these two libraries, there is no one clear way to handle asynchronous calls to the API (backend) or any other side effects.

In this article, I’m trying to compare different approaches to solving this problem. Let’s define the problem first.

Posted on

Feature Detection With Modernizr for Cross-Browser Compatibility

Modernizr is an open source and compact JavaScript library that allows developers to craft various levels of experiences for users with respect to cross-browser compatibility. Modernizr helps developers to perform cross-browser testing to check whether new the generation of HTML5 and CSS3 features are natively supported by their visitor’s browsers or not and to provide dedicated fallbacks for older browsers that are notorious for their poor feature support. Modernizr coupled with the principle of progressive enhancement helps to design cutting-edge websites layer by layer, taking advantage of powerful modern web technologies without discarding users that are still using older browsers like IE.

How Does Modernizr Work?

Modernizr was launched in July 2009 by Faruk Ateş to battle cross-browser compatibility issues in a uniform, standardized manner. Today, Modernizr as feature detection library is one of the most popular JavaScript libraries, offering more than 270 tests, and is being used in 8.76% websites globally (half a million websites in the US alone). Instead of relying on highly untrustworthy browser detection methods using “User-Agent” sniffing, Modernizr is, instead, based on feature detection. While browser detection is centered around the question “what browser is the visitor using?” feature detection revolves around the question, “what features are supported by the visitor’s browser?” Modernizr runs a series of JavaScript-based feature detection tests in a user’s browser to check for cross-browser compatibility for HTML and CSS by allowing you to target each browser's functionality separately.

Posted on

Not So Easy Functional Programming in JavaScript

Introduction

JavaScript allows for operating on arrays in a functional way, e.g. using filter or map functions. As an argument for these functions, we can pass lambda expressions or function references. Is there a difference between them? The answer is yes.

What's the Problem?

In our project, we are building a mapping using the String.fromCharCode function. To simplify the usage of this function, my code looked similar to:

Posted on

ES6 const Is Neither Constant Nor Immutable

I gave a quick talk on JS a while ago on hoisting in JS and while discussing how hoisting applies to variable declarations, we imminently reached ES6’s let and const. We thus began talking about the difference between var, let and const, and how const is not really a constant or immutable.

What Is const?

Constants are block-scoped, much like variables defined using the let statement. The value of a constant cannot change through reassignment, and it can’t be redeclared. - MDN