14 Jul, 202311 min read

Go offline with Service Worker

A JavaScript asset that acts as a proxy between browser and server. If we’ve any service worker installed, all requests go through the service worker before going to the web. It sits in the browser between the app and the rest of the internet. Service workers run on their own thread and give access to the `Cache` API which could be used to implement precaching or runtime caching based on the requirements.

Service Worker
JavaScript
Web Development

04 Feb, 202312 min read

Rendering strategies: CSR, SSR, SSG, ISR

We have been using frontend libraries/frameworks that help to build single-page applications out of the box where the application is rendered on the client side and we all are pretty familiar with that approach. There're a few more ways to render applications which we would be covering in this article along with a brief discussion of client-side rendering(CSR), just to see how it's different from pre-rendering.

Web Development
Rendering
JavaScript
NextJS
ReactJS

12 Sep, 20225 min read

Iterators & Generators in JS

Anything iterable is an object which will have the `Symbol.iterator` method in it and when we try to iterate it or want it to behave like an iterable(using `for...of` loop), the `Symbol.iterator` method would be invoked which would return an object (iterator). The returned object would have the `next` method in it, which would produce an object with the value and status of the iteration (using _boolean_) - whether any other value is present or not to be iterated.

JavaScript
Iterators
Generators

23 Jan, 20227 min read

Web Performance

There're a few metrics known as Web Vitals to measure the performance of web apps. First Contentful Paint(FCP): The time until the user sees an indication that the page is loading. Server with correct hardware configurations based on the need would be doing minimal processing to complete one request with enough bandwidth to complete all the requests.

Web Vitals
Performance
JavaScript

08 Jan, 20228 min read

Prototypal Inheritance and Classes in JavaScript

In practice, we often need to create many similar objects like a list of phones, employees, etc. So, we can achieve this by creating custom types in JS using Constructor Function and then creating multiple objects from it. In other programming languages, we generally use `class` to define this kind of custom type but in JS, the class system is built directly using functions.

JavaScript
OOP
Prototype
Inheritance

05 Sep, 20219 min read

All about Functions and Scopes in JavaScript

Functions allow us to package up lines of code so that we can use (and reuse) a block of code in our programs. Sometimes, they take some values as parameters to do the operation and return some value as a result of the operation. Functions are considered as First-Class Citizen in JavaScript, which means we can do anything we want with functions.

JavaScript
Functions
Scope
Closure

07 Jul, 20216 min read

JS Objects in depth

The object is one of the most useful data structures in JavaScript - a collection of associated key/value pairs. Objects are mutable in JS. So, if you're passing an object to a function or, you're creating a copy of the original object and modifying the value of any property of the object that would modify the value for the original object as in both cases the new copy of the object points to the same reference or memory location. And once we're updating the value of a property, it would reflect in each and every copy of the object.

JavaScript
Objects
OOP
Web Development

24 Jun, 20215 min read

Call, apply and bind in JS

`this` keyword in JS generally points to the object that the function is a property of. In other words, we can also say `this` refers to the object that is being used to invoke the function. In the example above, we can see that the `work()` method is being invoked using `souvik` object. This way of invoking a method using dot operator is known as Implicit binding where this refers to the object using which the method is invoked.

Web Development
JavaScript
Implicit binding
Explicit binding
Objects