Photo by Markus Spiske on Unsplash

One of the most loved type system in the javascript world is the typescript type system. It comes with a lot of features. One of the features that we are discussing today is called conditional types.

Conditional types are a lot like a javascript’s ternary operator. Based on the condition, Typescript will decide which type can be assigned to the variable. Conditional types mostly work with generics.

A few words about generics

Generics are created to work over a variety of types. Consider the example from typescript website,

function identity<T>(arg: T): T {
return arg;
}

Here the T is representing the generic type. Typescript…


Photo by Markus Winkler on Unsplash

In this article, we will see how we can use angular material with ngx-charts.

What is ngx-charts?

ngx-charts is the charting library built with angular and D3. It is used for data visualizations. It is using Angular to render and animate the SVG elements with all of its binding and speed goodness and uses d3 for the excellent math functions, scales, axis, and shape generators.

ngx-charts come with some default styles for the tooltip, labels, legends, etc.

In this article, we will override the tooltip styles to make it look like as in the material data-visualization guidelines.

Let’s start by…


Photo by Yomex Owo on Unsplash

In this article, we will see how we can automate the accessibility testing in angular apps using the axe-webdriverjs.

A little info about axe:-

Axe is an accessibility testing engine for websites and other HTML-based user interfaces. It’s fast, secure, lightweight, and was built to seamlessly integrate with any existing test environment so you can automate accessibility testing alongside your regular functional testing.

Of course, you can read more about it here.

We can also simply use axe CLI to run it against any website. But my goal is to run it against the localhost. …


How we can use Lerna with Nx to automate the versioning
How we can use Lerna with Nx to automate the versioning
Photo by Florian Olivo on Unsplash

In this article, we will see how we can automate the versioning process in nx repos(monorepos) with the help of the Lerna, Conventional Commits and commitzen. Although the Nx provides all the important feature that makes it different from Lerna, one thing that we can use from Lerna is to automate the package versioning. This would be helpful in CI/CD.

Let’s get started with creating the Nx workspace:-

npx create-nx-workspace@latest flair

This will create a new Nx workspace with a name flair. You can use any name you want.

Now let’s install the other required packages:-

npm install lerna --save-dev


Photo by Murray Campbell on Unsplash

In this article, we will see how we can cache images in angular so that we can load them faster. let’s get started.
First, we need to create a new angular service. We can create it angular CLI,

ng g s image

it will create,

import { Injectable } from ‘@angular/core’;@Injectable()
export class ImageService {
constructor() { }}

The first thing we need to create is an empty array of URLs that needs to be cached,

private _cacheUrls: string[] = [];

We also need to create an empty array of cachedImages of CachedImage interface,

interface CachedImage { url…

Gaurav Soni

Frontend Engineer

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