Performance Golden Rule: 80–90% of the end-user response time is spent downloading front-end i.e all the components on the page: images, stylesheets, scripts, etc
Minification of resources means removing unnecessary characters from your HTML, JavaScript, and CSS that are not required to load, such as White space characters, Newline characters, Comments, and Block delimiters.
This speeds up your load times as it reduces the amount of code that has to be requested from the server.
Minify plugins for the automated task systems — Grunt and Gulp.
Tools for minifying JavaScript code — JSMin and YUI Compressor.
When your browser fetches…
The event loop is the secret behind JavaScript’s asynchronous programming. JS executes all operations on a single thread, but using a few smart data structures, gives us the illusion of multi-threading. The asynchronous behavior is not part of the JavaScript language itself, rather it is built on top of the core JavaScript language in the browser (or the programming environment) and accessed through the browser APIs.
Browser JavaScript execution flow, as well as in Node.js, is based on an event loop. The event loop concept is very simple. …
Object-Oriented Programming(OOP) is a programming paradigm based on the concept of objects. And paradigm simply means the style of the code,
how we write and organize code.
We use objects to model (describe) aspects of the real world, like a user or a to-do list item, or even more abstract features like an HTML component or some kind of data structure.
Objects may contain data (properties) and also code (methods). By using objects, we pack all the data and the corresponding behavior into one big block.
In OOP objects are self-contained pieces/blocks of code like small applications on their own…
Unique, descriptive titles and helpful meta descriptions in the head section help users to quickly identify the best result for their goal.
Data types in JavaScript can be divided into two main categories— primitive data types and reference data types.
Primitive data types: The value assigned to the variable of primitive data type is tightly coupled. That means, whenever you create a copy of a variable of primitive data type, the value is copied to a new memory location to which the new variable is pointing to. When you make a copy, it will be a real copy.
Reference data types: Whereas, for reference data type it stores the address of the memory location where the object is stored. …
var num = 8;
var num = 10;
console.log(num);
Answer — 10
Explanation — With the var
keyword, you can declare multiple variables with the same name. The variable will then hold the latest value. You cannot do this with let
or const
since they're block-scoped.
function sayHi() {
console.log(name);
console.log(age);
var name = 'Ayush';
let age = 28;
}
sayHi();
Answer — undefined
and ReferenceError
Explanation — Within the function, we first declare the name
variable with the var
keyword. This means that the variable gets hoisted (memory space is set up during the creation phase) with the default…
In React, your UI is rendered by updating something called DOM (Document Object Model). In basic layman terms, DOM resembles a tree-like structure of objects and nodes.
In React, however, HTML is not the root node of a DOM. In fact, it is only one single node from Javascript’s prototype chain so that it gets the functions to calculate styles, properties or manipulate the individual nodes.
In simpler terms, DOM in React is a standard that defines how you get, update or manipulate HTML elements.
The React DOM knows how to render a page but it is not so intelligent…
Cross-Origin Resource Sharing (CORS) is a protocol that enables scripts running on a browser client to interact with resources from a different origin. This is useful because thanks to the same-origin policy followed by XMLHttpRequest
and fetch
, JavaScript can only make calls to URLs that live on the same origin as the location where the script is running.
For example, if a JavaScript app wishes to make an AJAX call to an API running on a different port, it would be blocked from doing so thanks to the same-origin policy. CORS error in the console will look like this:
Most…
Debouncing and Throttling are two widely-used techniques to improve the performance of code that gets executed repeatedly within a period of time.
In this post, we’ll learn how to better use them in order to boost our app’s performance and write better and faster code in JavaScript!
User interaction dispatches an action --> The reducer updates the state based on the action --> Subscribed components update the UI based on the new state.
Let’s consider the following app:
This is a just clean example of a Redux-based application. There is only one simple component that is connected to the Redux cycle (counter). We have two buttons inside: Increment and Decrement. As you have probably already guessed — these buttons will either increase or decrease the counter value.
Now let’s figure out what objects and functions we need to build Redux from scratch: — createStore, combineReducers, connect…