Uday Hiwarale
Senior Software Engineer (JS • Go • Dart • Python) / Available for full time job / thatisuday.comgithub.com/thatisudaythatisuday@gmail.com

No Code Zone

We are surrounded by hundreds of programming languages, but you can’t learn all of them. In this article, I am going to explain a few simple points to consider while choosing your next programming language to learn.

Image for post
Image for post
(source: unsplash.com)

If you are wondering what programming languages I know, well I wouldn’t exactly say I am good at them but I can write programs in JavaScript, TypeScript, Python, Go, Dart, Bash as well as a little of Java and C/C++. I know TypeScript isn’t exactly a language but after Deno, you can say so. I wouldn’t brag about it but I used to work on PHP in the early days.

So does having the baggage of these many languages worth it? Well, it depends who you ask but my answer is always, Yes. Actually, I am planning to learn Rust next, so enough is never enough for me. However, I don’t encourage this practice in certain contexts. …


GRAPHICS ON WEB: FABRIC.JS ANIMATION

In the previous article, we took a look at the Fabric.js library and how to use it to draw basic shapes on the Canvas. In this lesson, we are going to learn how to animate those shapes.

Image for post
Image for post
(source: unsplash.com)

In the “Introduction to Canvas” lesson, we learned about the Canvas Web API and how to draw basic shapes. In that lesson, we also saw how to animate those shapes on the canvas and how surreal it can be to achieve the simplest animations. The Canvas API is not at fault, this is how animations work.

Animation, in a nutshell, is a sequence of frames played quickly so that our eyes perceive smooth motion. This is how traditional film projectors work. …


Graphics on Web: Fabric.js Introduction

In this article, we are going to learn about the fabric.js library which helps us draw 2D shapes on HTML5 canvas with ease.

Image for post
Image for post
(source: unsplash.com)

In the previous lesson, we learned about the Canvas Web API and what it is used for. In a nutshell, the Canvas Web API gives us the capability to draw 2D/3D objects natively on the Web using the HTML5 canvas element and built-in rendering engines (also called drawing contexts).

However, we also discussed some of the problems with this native API, first and foremost, the lack of an object model. When we draw a shape on the canvas, we do not get a reference back to it. Therefore we don’t get the ability to manipulate individual shapes on the canvas. In the animation section of the above tutorial, we saw how this can create a problem. …


Graphics on Web: Canvas Web API

In this article, we are going look at the basics of Canvas Web API provided by the browser to draw 2D/3D graphics natively on the web.

Image for post
Image for post
(source: unsplash.com)

I wanted to keep the title of this article “Why every web developer must know Canvas API?” but then decided not to because to be honest, we don’t use Canvas API that regularly or in most of the cases, ever. But Canvas API, in my opinion, is least explored, however, it can do pretty amazing things. First, let’s understand what Canvas API is and what it can do for us.

Image for post
Image for post
(source: pixabay.com)

Take a look at the above image. What do you see? You see a canvas on which you can draw (or paint) something. It has a background color, in this case white, and proper width and height. You can’t paint beyond these dimensions since there is nothing to paint on. …


Node.js Bundling

In this lesson, we are going to learn how to create a .exe binary executable file from JavaScript code. This is possible with the help of Node.js runtime and some third-party tools.

Image for post
Image for post
(source: unsplash.com)

It’s harder to digest the title of this article. How can we possibly create a binary executable .exe file from a JavaScript program if JavaScript is an interpreted language? JavaScript doesn’t even have a compiler so how do we even fathom the idea of generating executables for JavaScript?

A .exe file is generally called a binary executable file. Unlike a normal program file or simply any file with data of a particular format (such as a .png file with image data), a .exe file contains various different things such as actual program code, program data, static resources, dependencies among others. …


JavaScript Programming Practices

In this lesson, I will talk about a few coding practices I follow while writing JavaScript applications. These certainly increase productivity but also make the code scalable.

Image for post
Image for post
(source: unsplash.com)

JavaScript isn’t exactly the most beloved language but it certainly is the widely used language for writing frontend web applications as well as backend applications using Node. With the introduction of Electron, you can also build desktop applications using JavaScript. Similarly, you can use Cordova to build mobile applications using JavaScript. Deno is a new super-hot thing that needs its own series which I am working on nowadays.

I still remember the days when I used to write a single monolithic JavaScript file (.js) with all the application code inside it. It was not only harder to maintain but a pain in the a** to look at and make sense of it. …


TypeScript: Tooling

In this lesson, we are going to learn how to compile a TypeScript project using Webpack. This setup becomes necessary if you want to bundle TypeScript containing ES6 or the CommonJS module system imports and exports.

Image for post
Image for post
(source: unsplash.com)

If you haven’t read the TypeScript Compilation lesson, then first go through it once. The knowledge of the TypeScript compilation process and the tsconfig.json file is necessary to understand this lesson.

I am assuming that you know what Webpack is and what it is used for. But those who don’t, Webpack is a bundling tool primarily used to combine multiple files together to produce a single bundle. For example, you can combine multiple JavaScript files together to produce one main.js which you will eventually import in the Web application using a <script> tag.

But what separates Webpack from task runners such as Grunt or Gulp is the other functionalities it provides. You can transpile TypeScript to JavaScript on the fly and the resultant JavaScript will be used for bundling. You can also transpile SCSS (SASS) to CSS and make a .css


JAVASCRIPT MINI-SERIES

In this lesson, we are quickly going to go through strict (===) vs loose (==) equality operators in JavaScript and understand how they compare with each other.

Image for post
Image for post
(source: unsplash.com)

You would think, how difficult could it be to compare two values. Well here in JavaScript, it’s a bloody mess. In JavaScript, there are two ways to compare two values. Either we can check two values for the likeness or we can check whether two values are strictly equal in every which way.

● Strict Equality

The Strict Equality operation is what we are used to. Instead of usual == (double equals) operator, we use === (triple equals) operator to perform strict equality check. In this operation, A === B, both A and B should be of the same type else the result will be always false since two values of different data types can’t be equal in any universe. …


JavaScript Mini-Series

In this lesson, we are quickly going to go through truthy and falsy values that resemble true and false boolean behavior.

Image for post
Image for post
(source: unsplash.com)

When you write if/else statement in any programming language, you expect to pass a value in the if() condition that is strictly boolean which means either true or false. It could also be an expression that evaluates to one of these values as demonstrated below.

Image for post
Image for post
(simple-if-statements.js)

However, JavaScript goes beyond that. In JavaScript, if/else statement checks if a value is truthy or falsy. A truthy value is like true and a falsy value is like false. These are as follows.

falsy  -> false, '', "", 0, -0, 0n, NaN, null, undefined
truthy -> anything that is not mentioned above

Therefore, if you use one of these values in if/else statement, you are going to get the same treatment as native true and false values as shown below. You can also use an expression that returns these values. …


JavaScript Mini-Series

In this lesson, we are quickly going to go through the usage of new.target pseudo-property and use it to make JavaScript function non-constructible.

Image for post
Image for post
(source: unsplash.com)

You all must have used new operator. We used new operator to construct object from a constructor function or a class. A class under the hood is a constructor function with a prototype, so we can safely say that new operator invokes a function and returns an object. Let’s see an example.

Image for post
Image for post
(new.target/new-operator.js)

In the above example, we have created a Person constructor function that accepts firstName and lastName argument and initializes firstName and lastName properties on the object with their values. It also has the getFullName method on its prototype that returns the full name. …

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