JavaScript is an essential part of any basic/modern web application and the strategies we decide to load it directly impacts the performance to a greater extent.

In this article, we will try understanding the important differences between each approach, pros & cons along with the performance implications and ways to optimize page interaction/load time.

For demonstration purpose — I am creating a website consisting of the following external dependencies. Just pay close attention to the respective file sizes, as file download time is directly proportional to that.

  1. HTML Page ~1 MB It contains the actual markup/content and will provide some…


This article focuses on the major challenges and caveats for proper implementation of JavaScript Prototypal Inheritance.

If you are looking to understand the Basics of JavaScript Prototypal Inheritance, I highly encourage you to please read it here.

Let’s Begin….

Consider PersonClass to be the Parent and instance of it is an object p1.

function PersonClass(name, age) {
this.name = name;
this.age = age;
}
PersonClass.prototype.walk = function() {
console.log('Person ' + this.name + ' is walking');
}
var p1 = new PersonClass('David', 50);
p1.walk();
// Output : Person David is walking

Below, we are creating our Child [EmployeeClass] with its own method…


Functions are considered as First Class citizen in JavaScript and it is really important to be clear with the concept of creating function in JS.

Unlike other programming languages, we can create function in JavaScript using 3 distinct ways :

1. Function Declaration
2. Function Expression
3. Named Function Expression

Function Declaration

function [name](param1, param2, ...param3) {
// Function Body & Logic
}

In this case, we prefix [function keyword] before respective [function name].
One major advantage of this approach is that the complete function is Hoisted.

Because of that, we can execute the function before declaring it.

It is helpful when…


JavaScript [[Prototypal]] Inheritance — Code Flow & Prototype Linkage

So, if you have landed here to understand what is Prototypal Inheritance in JavaScript, I am assuming that you have a good understanding of Inheritance [Basic OOPS concept].

Switching my career to JavaScript from C++, Java, C# or any other programming language which supports the classical inheritance, JavaScript Inheritance looked pretty weird at the first glance.
To be frank, it is the same case for any seasonal JS developer.

But if you are really serious about your career in JavaScript which is taking over the complete landscape of Web development or even server side, further reaching to Mobile app development…


So how many of you have stumbled upon mysterious Webpack's publicPath configuration? Frankly, I have faced it numerous times before starting different projects and then after spending some time on it — somehow magically it works. I decided to dig dipper but did’t get much documentation or help.

So, here I am going to unfold the mystery of publicPath config based on my experience and understanding. Please feel free to provide your feedback if it helps.

The 2 main issues which are caused by incorrect publicPath config configuration are :

  1. webpack-dev-server : live-reloadfeature doesn’t work correctly i.e. …

Ravi Roshan

JavaScript Enthusiast

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store