We can build very powerful network graphs using D3 Force Simulation library. I have already written how we can build such graph in Angular in my previous blog.

In this blog, I have done same exercise but with React.js and TypeScript. Before we start, checkout the running application to see what we are trying to build.

Let’s go!

npx create-react-app d3-network-graph-editor --template typescript

2. Add D3 package in application

yarn add d3

3. Add D3 types for IDE

yarn add d3 @types/d3

4. Run application to test everything is good so far.

yarn build

5. Let’s…

Compute matrix calculation using GPU in browser and Angular

In a typical client-server architecture, client is supposed to do a little processing of inputs and more of user interactions. A web client should capture user inputs and data and send it to a server where heavy computations will take place and result will be sent back to a client for presentation. This is/was the orthodox way of web application development. But with advancement in computer hardwares, browsers capabilities, power of JavaScript libraries, introduction of web workers, web assemblies (WASM) etc.; things are not the same, are they? Nowadays, a web client can do lots of pure computations in memory…

My first technical book got published!!!

My dear readers, I am very excited to share that, my first technical book about Angular got published! In this story, I will briefly share how I got into this book writing and what this book is all about.

For the last three years, I have been writing many blogs about Angular on this portal. It was just a hobby until BPB Publications contacted me about a year ago and asked me if I would be interested in writing a book about Angular. The decision was not easy, writing a blog against writing a book!? I thought okay, why not…

Angular is infamous for frequent version releases. Angular team try to deliver at least two major versions in a year.

You can find Angular release schedule here:

In general, you can expect the following release cycle:

A major release every 6 months

1–3 minor releases for each major release

A patch release and pre-release (next or rc) build almost every week

If you are a web developer working with Angular since its version 2, then you must have suffered from the pain of version upgrade. Thanks to Angular team, the version upgrade is smooth now (or is it?) if you…

In this story, we will discuss about the simple ToDo web application for employees. Angular 9.1 is used for frontend, ASP.NET Core 3.1 for building REST API with Swagger integration. MongoDB community edition is used for storing Todo list and employee data. You can find complete source code at GitHub repository. Feel free to refactor existing code and introduce new features by raising new Pull Requests (PRs).


The frontend is built with Angular 9.1 and Angular Material design library. All modules are lazy loaded for better performance. Note that the API URLs are kept as localhost://<api> for testing purpose thus…

The AWS EC2 and SSH connection always go hand in hand. As a DevOps engineer, you would always want to connect to your EC2 instance via SSH and perform various tasks.

To connect EC2 via SSH, we must add an inbound rule for port 22 and specify range address. Many times, engineers leave port open to “” even though AWS console warns about it. (Who takes warning seriously unless there is an error, right?). The open SSH port could lead to an attack from outside and thus its very important to secure it.

The AWS System Manager service has introduced…

In many organisation, people receives phishing emails with company’s name tweaked/changed a bit so to look original. As a human being its very easy to ignore such small change(s) and people ends up responding to such phishing email. In this story we will see an add-in which validates selected email address against hard coded domain name. If selected email is safe then a notification message will be displayed on top of the email otherwise a warning will be displayed.

For example you are working in an organisation and your official email address is “sherlock-homes@smart-detectives-technologies.com”. Now you can get an email…

Angular application should be built by assembling small and atomic level components which follows SOLID principles. One of the challenge occurs when components needs to pass data and message between each other. If components are in Parent-Child hierarchy then it is very easy to implement using @Input() and @Output() decorators. But when components are not related with each other, then it becomes bit tricky. One of the solution is creating a Dependency Injectable service class which will aggregate events and pass between components. Since it is repetitive process, I have published a npmjs package — ng-event-broker which expose EventBrokerService. …

Are you tired of building typical Material Design/Bootstrap and other design system websites and wants to build something sketchy for fun? If yes, then let’s build one!

WiredJS Library

WiredJS is a web component library which offers sketchy hand-drawn like web components. Don’t forget to checkout their showcase of web components.

WiredJs has good examples about how to use with React and VueJs but not for Angular, hence I thought let’s create one like below image.

WiredJs Signup form built with Angular

Building WiredJs Sign-up form with Angular

ng new ng-wiredjs-demo

VS Code extension gives developer an opportunity for extending capability of VS Code. In this story, we will see how to create new folder in VS Code Workspace using VS Code API.

Create a new extension project:

If you are new to creating VS Code extension, then follow below tutorial:

Create New workspace folder:

VS Code API has updateWorkspaceFolders function to update workspace. Checkout the official documentation for parameter details.

Using this function, we can add/remove/edit existing workspace folders. Since our goal is to add a new folder, we will call this function with below arguments:

Running extension

Balram Chavan

Cloud Solution Architect | Author | Full Stack Developer | https://www.linkedin.com/in/balram-chavan | https://www.hiretheauthor.com/balramchavan

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