And TypeScript too

Constructors and prototypes

The earliest versions of JavaScript didn’t have classes. If we wanted to model data as values-and-behaviors like in any other OOP language, we would create constructor functions for creating the object with the assigned values and add behaviors to the constructor’s prototype that would serve as the “blueprint” for the model.

function Human(name, age) {
this.name = name
if (age) {
this.age = age
}
}
Human.prototype.age = 0 // default valueHuman.prototype.speak = function() {
console.log(`Human: ${this.name} | ${this.age}`)
}
const me = new Human('Shirsh Zibbu')
me.speak()
//> Human: Shirsh Zibbu | 0

The next we wanted was classical…


A simple solution to a simple problem using a tool that is simply overkill.

What is this FizzBuzz test?

Write a program that prints the numbers from 1 to 100. But for multiples of three print “Fizz” instead of the number and for the multiples of five print “Buzz”. For numbers which are multiples of both three and five print “FizzBuzz”.
wiki.c2.com

The problem itself isn’t very hard and can be solved with a simple loop iterating over numbers 1 through 100 that prints values matching one of the conditions. The only obvious gotcha is to check for “multiples of both three and five” after checking for multiples of either one.

for (let…


Disclaimer: The quiz was for fun and the questions do not make for good interview questions.

What is the output of this snippet?

const foo = (x, ...y) => new Array(2)console.log(foo.length)

Answer: 1

A function’s length property is the number of required parameters given in the function definition and “rest” parameters are not considered required parameters. See here and here.

Which video format was designed specifically for serving video on the web?

Answer: WebM

WebM is a royalty-free video media format to be used in video & audio elements. See here.

In TypeScript, which of the following can be assigned to variable c?

type A = {
x: string
}
type B = {
y: number
}
type C = A & Blet c: C

Answer: c = {…


Disclaimer: The quiz was for fun and the questions do not make for good interview questions.

What is the difference in extending React.PureComponent instead of React.Component?

Answer: React.PureComponent will not re-render if either of props or state have not changed

React’sPureComponent comes with a default implementation shouldComponentUpdate() that perform shallow comparisons for prop & state. This means that a re-render will only happen if either of the two changes.

Also, there’s now a new React method — React.Memo() — that does the same for functional components.

You can read more about this here and here.

Which lifecycle methods can be used with stateful functional components?

Answer: None of the lifecycle methods

React provides the lifecycle methods as part of the…


Routing with react-router

This article is now part of a much longer series of posts titled Making CRA apps work with SSR. You can find the the code here on github.

This is the fourth entry in my CRA apps with SSR series. This time we’ll work on routing for our app.

We’ll look at two types of routing with react-router — static routes and dynamic routes. There’s also route params and redux integration.

Add routing to client

We’ll use react-router for routing in our client app. But first, we need to do some housekeeping. We’ll use the App component as an entry point for our routing…


Integrating Redux

This article is now part of a much longer series of posts titled Making CRA apps work with SSR. You can find the the code here on github.

In a part 2, we added static assets to our barebones CRA + SSR app. In this post we’ll add redux into the mix.

Add redux to client

Before we can integrate redux in the server code, we need to add it in the client code. I am using the ubiquitous “todos” app for demonstrating redux integration.

Since the main focus here is server integration, I’ll skip the client integration. …


Adding support for static assets

This article is now part of a much longer series of posts titled Making CRA apps work with SSR. You can find the the code here on github.

In part 1, we started working on a more wholesome way of implementing server-side rendering in a react app made using create-react-app. As of now, asset imports that are not working.

I avoided the problem in the previous post by removing the imports. Let’s add them back in.

>>> client/src/App.jsimport React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
// ...

This is a problem that webpack (and…


Just plain old React

This article is now part of a much longer series of posts titled Making CRA apps work with SSR. You can find the the code here on github.

In the React ecosystem, create-react-app is a well-known project. It’s a super useful tool that provides a zero-configuration starting point for a React app, packaged with a lot of good stuff.

SSR is not one of them.

At first, implementing SSR seems rather simple. But things get complicated in the process faster than I thought. And most of the existing solutions (that I came across) are inadequate.

Inadequate Implementations

1. Static Serving

People out there who mislabel…


As time moves forward, the web evolves, and brings new APIs with it. When working on a product, including one or two bleeding-edge APIs might throw some red flags in the user’s browser.

There are some preventive measures we, the developers, can take to ensure that our product doesn’t falter but it’s better said than done.

Preventive Measures

Disclaimer

Adding a disclaimer notice to warn the user about the product’s possible unstable or undefined behaviour on some platforms should be the first line of defense.

Most hacks, and even some polyfills, for some older / incompatible browsers cannot guarantee identical behaviour to native…


A convenient untruth — Multi Arrays in C/++

Inspired by “A convenient untruth” by Glennan Carnie.

When declaring a multi array (multi-dimensional array) in C/++, we end up with is a contiguous chunk of memory. This memory block spans over the size of the product of all the dimensions.

For a 2x3 array arr[2][3],we get a memory block of 6 units. I say units instead of the actual size (in bytes) because the size will be different depending on the data type of the array and the machine architecture.

When we query the array (i.e. …

Shirsh Zibbu

Humble JS developer who loves shiny new tech ✨

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