DEV Community: Adithya Sreyaj

Deploy Node.js applications on a VPS using Coolify

Adithya Sreyaj — Sat, 20 Apr 2024 06:09:56 +0000

If you are not a DevOps person, deploying applications is not going to be very easy if you are trying to do everything on your own. This is the primary reason we have a lot of managed offerings from companies like Heroku, Vercel, Fly etc.

Managed offerings make it extremely easy to deploy applications on the Internet. They eliminate the hassle for us, but this convenience comes at a cost. Recently there has been a lot of noise around the self-hosting vs managed hosting.

My VPS configuration

I've been hosting all my APIs for applications like Flagsy, Flare, Compito, etc on a VPS with the following configuration:

1 vCPU
2GB RAM
40GB Storage
Ubuntu

Worked well for my use case. The VPS cost me around $7 per month. I've now shifted to a new VPS from Oracle which provides a great config in their free tier.

4 vCPU
24GB RAM
ARM Based
Ubuntu

Deployment workflow before Coolify

For all these years, I've been using GitHub Actions with a custom workflow for deploying applications to the server. The GitHub Action workflow is as follows:

Build the Application.
Package the contents into an artifact (.tar file).
Send the artifact to the remote server using rsync (ref: How to use Rsync to Sync Local and Remote Directories)
SSH into the remote server.
Extract the contents of the .tar file.
Install Dependencies.
Run the application using PM2 (ref: Process manager for Node.js)

Deployment using Coolify

When I came across Coolify, I thought of giving it a try. I am aware of Dokku, but I never really tried it because it doesn't have a UI. I work primarily as a UI developer, so having a nice UI to work with is a plus for me.

Coolify is an open source & self-hostable Heroku / Netlify / Vercel alternative. Built by Andras Bacsai (@heyandras)

It's surprisingly good. I did feel a bit lost when I first started trying it out. Eventually, everything fell into place, and I've moved all my previously hosted node applications to use Coolify instead.

Getting started with Coolify

To get started, you need a server, it can be a VPS, a Raspberry Pi, or any other server that you have SSH access to.

Coolify comes with a pretty neat one-click installation script which makes the installation super easy.

Minimum requirements for Coolify

2 CPUs
2 GB memory
30+ GB of storage for the images.

VPS offerings that I found to be good:

Hetzner
OVH

I've used both of these and didn't have any issues with them.

Installing Coolify

The first step is to SSH into your server.



ssh <username>@<ip_address>

Once you are inside the VPS. Enter the below command to install Coolify



curl -fsSL https://cdn.coollabs.io/coolify/install.sh | bash

If you get an error saying: Please run as root using the command below:



curl -fsSL https://cdn.coollabs.io/coolify/install.sh | sudo bash

Once the installation is complete, you'll get a link to the Coolify dashboard. When you visit the link (Eg: http://<server_ip>:8000), you'll be asked to register yourself.

Localhost vs Remote Server

On completion of registration, we will come to this screen where we need to choose whether we want everything to be on one server or not.

If you want to host Coolify on one server and deploy the applications on a different one, go with the Remote Server option. Else continue with Localhost.

I am using the Localhost mode. In the next step, server requirements are validated. Once validation is complete, we can get started by creating our first project.

Resources

We can host multiple resources in the server like Applications, Databases and Services. Each of these are called as a resource in Coolify.

Coolify supports deployment of applications from your private GitHub repo or any public repo. You can also deploy using Docker.

When it comes to databases, we have out of the box support for popular databases like PostgreSQL, MySQL, Mongo, Redis etc.

Deploy Node application using Coolify

There are couple of ways in which we can deploy a node.js application. We will be looking at how to deploy a node application on Coolify using Nixpacks.

Deploy using Nixpacks

This one will be the easiest way to deploy any node application using Coolify. The whole process is pretty straight forward.

Nixpacks takes a source directory and produces an OCI compliant image that can be deployed anywhere.

In simpler terms, Nixpacks will analyse the source folder and automatically create a Dockerfile for us. We don't have to know anything about docker.

We are going to be building a super simple Notes API using:

Hono - Ultrafast web framework for the Edges
TypeScript
MySQL

Setting up the MySQL database

Under Project > Environment > Resources > + New > Databases, you'll be able to see MySQL. Start by adding a database into your project.

All the necessary information is prefilled, and we are good to go. Clicking on Start will spin up a docker container. Wait for the process to complete and once done, the status would say Running.

Deploying The Node Application

For deploying our node application, we start by adding a new resource to your project by going to Project > Environment > Resources > + New > Public Repository

Continue till we are asked to provide the URL of the repo:



https://github.com/adisreyaj/notes-api

Once Coolify loads the repo, we'll be asked to create a new application. We choose Nixpacks as the Build Pack and use 3000 for the port to run the app on.

Configure environment variables!

We need to configure the environment variables that are consumed by our application. Navigate the Environment Variables page and start adding the following variables.

If you are using Prisma, we need to expose the database to the internet. Some applications / libraries need to connect to the database during the build phase, to run migrations for example. Ref: Frequently Asked Questions (FAQ) with Coolify

Copy the MySQL URL(Public) in case you are using Prisma or copy the MySQL URL(Internal) URL in other cases.



mysql://mysql:BfwAmHtmTokbm70fUoFcsL7obNMPCFcW@vww348go4:3306/default

We can split the database URL into the below environment variables:



DATABASE_HOST=vww348go4
DATABASE_NAME=default
DATABASE_PASSWORD=BfwAmHtmTokbm70fUoFcsL7obNMPCFcW
DATABASE_PORT=3306
DATABASE_USER=mysql
PORT=3000

You can either add all of these variables at once using Developer View or create them individually.

There is an option called Build Variable which will make the env available during build phase. For this particular example, we don't need to check the option. But for Prisma and other libraries, we need to make the environment variables accessible at build time.

Deploy the application!

Once we have configured the env variables, we can go ahead a Deploy the application. Coolify shows the logs of the process, we can click on Show Debug Logs to see detailed logs.

Once the application is deployed successfully, we can view the logs of the application under the Logs tab.

You should be able to visit the domain provided and see the app live.

Troubleshooting

Providing custom commands

If you think that Nixpacks picked wrong commands for install, build, or start, you can customize it in the Configuration > General section.

Database not reachable

If you see any errors related to database not reachable, make sure to double check the env variables and make sure they are correct.

Also, if you are using Prisma or other libraries which might access database at build time, make sure to mark the environment variables as Build Variable.

For Prisma with Nixpacks, we need to make the database publicly accessible over the internet.

Feel free to reach out to me if you are having trouble in deploying using above mentioned steps. Happy to help.

Connect with me

Have any thoughts or questions? shoot'em below in the comments.
Stay Safe ❤️

Architecting A Highly Dynamic Card List In Angular

Adithya Sreyaj — Sat, 14 Jan 2023 09:57:40 +0000

Let's look at one way to architect Angular's highly customizable and dynamic card list component. The goal is to make it easier to render different kinds of card lists using one single component.

Dynamic Card List Component

The component should be dynamic enough to render different designs while maintaining a common structure. The consumer should be able to use the component and provide just the config and a data source, the rest is all gonna be taken care of by our dynamic card list component.

For table-like cards, if you want to render display different data in different designs; after a point, it becomes very difficult with dedicated card lists for each of the use cases. Having a single card list component that is dynamic enough to render a wide variety of designs would make things much easier.

Features

Highly customizable 🧱
Re-usable ♻️
Easy to use 🔌
Less boilerplate code to maintain 🛠️
Consistency in design 📐

Concepts

There are a couple of concepts that we use to build this out. We also make good use of Angular's strong Dependency Injection (DI) system. We'll see how we can provide custom components and dynamically create and attach them to the view. We use concepts like Dynamic Component Creation, Injectors, Injection Tokens, etc.

Renderers

So if we consider the card like a table, then the columns are where we display the data. So each of these columns can display different types of information like text, images, buttons, etc. So we can have different renderers for each of these types. For example, we can have a text renderer that will render text, an image renderer that will render an image, etc.

Core Renderers

We will have some core renderers which will be used by default. For example,

Text Renderer
Badge Renderer

We can identify some common use cases for renderers and create components that become part of Core Renderers.

Custom Renderers

If there are use cases that are not covered by the core renderers, then we can create custom renderers. For example, we need to display a user's name with the profile picture. So we can create a custom renderer for this use case. Look at the NameWithAvatarColumnRendererComponent

Renderers Registry

So we need a way to keep track of the renderers that we will create and use in the application. Users can create a lot of custom renderers according to their use cases. We use a type to identify the renderer. So all the renders that are created should have a unique type. We can use this type type associated with them.

We use a Service as our registry (ColumnRenderersRegistryService). We expose a Map to store the type to renderer mapping. We expose two methods:

registerRenderers to register renderers
lookup to lookup a renderer by type

Registering Renderers

There are methods exposed to register default renderers and custom renderers. The default renderers are registered in the constructor of the sreyaj-exp-card-list.

export const registerDefaultRenderers = (): void => {
    registerCustomRenderers([
        TextColumnRendererComponent,
        BadgeColumnRendererComponent,
    ]);
};

export const registerCustomRenderers = (
    renderers: ListColumnRendererConstructor[]
): void => {
    const rendererLookupService = inject(ColumnRenderersRegistryService);
    rendererLookupService.registerRenderers(renderers);
};

We inject the ColumnRenderersRegistryService and use it to register the renderers.

Custom Decorator

We create a custom decorator called ListColumnRenderer to add some metadata information about the renderer component like its type which is the unique identifier of the renderer in the registry.

We could totally do this without a decorator, but we would have to manually set the type on each renderer component. It would look like this:

@Component()
export class TextColumnRendererComponent extends ListColumnRendererBase {
  public type = CoreListColumnRendererType.Text;
}

With the decorator, we just remove this explicit variable assignment. Also, the decorator helps us easily identify renderer components from normal components.

Class decorator is a function that receives the constructor as the argument. Since we want to pass in some arguments to the decorator itself we use a decorator factory.

export function ListColumnRenderer(
  metadata: ListColumnRendererMetadata
) {
  return (constructor: ListColumnRendererConstructor): void => {
    constructor.type = metadata.type;
  };
}

The default type of a Component is Type. For us, we have extra metadata so we say our components are of the type ListColumnRendererConstructor which is an extended Type with some additional properties like type (more can be added later).

export interface ListColumnRendererConstructor extends Type<unknown>,
    ListColumnRendererMetadata {}

export interface ListColumnRendererMetadata {
  type: string;
}

Implementation

Main Component

There is a main component sreyaj-exp-card-list which is the component the consumers will use. The component takes in two inputs:

columnConfig - An array of column config that is used to render each column.
dataSource - The data source which drives the component.

The column config is what drives the view part of the component. Here is how you define it:

[
  {
    id: "name",
    display: CustomRenderers.NameWithAvatar,
    width: 2
  },
  {
    id: "email",
    display: CoreListColumnRendererType.Text,
    width: 4
  }
]

The id is what connects the view and the data. The data source should contain an object with the keys mentioned id in the column config.

The display is the type of renderer. It can be a core renderer or a custom renderer. This key will be used to look up the corresponding renderer to be used for that particular column.

Inside the main component, it just loops through the columns:

<div>
  <sreyaj-exp-card-list-column-renderer [columnConfig]="column" [data]="item"></sreyaj-exp-card-list-column-renderer>
</div>

We pass the column information and the data for the column from the data source to a child component sreyaj-exp-card-list-column-renderer which takes care of dynamically creating and attaching the corresponding renderer to the view.

Attaching Renderers to the View

This magic happens in the sreyaj-exp-card-list-column-renderer component. This is how we do it:

if (!this.columnConfig || !this.data) {
  return;
}
// Get the corresponding renderer for the display type
const renderer = this.rendererLookupService.lookup(this.columnConfig?.display);
if (renderer) {
  // Dynamically create the component and pass the data with the help of Injection Token
  this.vcr.createComponent(renderer, {
    injector: Injector.create({
      providers: [
        {
          provide: COLUMN_RENDERER_DATA,
          useValue: this.data[this.columnConfig.id]
        }
      ],
      parent: this.parentInjector
    })
  });
}

If I were to breakdown what is happening inside the component:

Get the renderer corresponding to the type passed in the columnConfig.
Use ViewContainerRef to dynamically create the component using the createComponent method.
To the createComponent method, we pass the renderer class along with an injector that holds the data.
COLUMN_RENDERER_DATA injection token is provided the data for that particular column.

Inside a Renderer

Let's look at TextColumnRendererComponent which is part of the Core Renderers.

@Component({
  selector: "sreyaj-exp-text-column-renderer",
  template: `
    <div>
      {{ data }}
      <!-- Use the data here -->
    </div>
  `,
  standalone: true
})
@ListColumnRenderer({
  type: CoreListColumnRendererType.Text
})
export class TextColumnRendererComponent extends ListColumnRendererBase {}

The data property contains the data passed from the injector. Wondering how we get it? For that, let's look at ListColumnRendererBase :

export abstract class ListColumnRendererBase<ColumnDataType = unknown> {
  public static readonly type: CoreListColumnRendererType;
  // We inject the token here
  public readonly data: ColumnDataType =
    inject<ColumnDataType>(COLUMN_RENDERER_DATA);
}

We can see that the COLUMN_RENDERER_DATA InjectionToken is injected inside the class and so the component gets the value passed while creating the component. If we don't use the new inject method, it would look something like this:

@Component({
  selector: 'sreyaj-exp-text-column-renderer',
  template: `
    <div>
      {{ data }}
    </div>
  `,
  standalone: true,
})
export class TextColumnRendererComponent {
  constructor(@Inject(COLUMN_RENDERER_DATA) public data: unknown){}
}

References

The idea of this is taken from the OSS project called Hypertrace which is an Open source distributed tracing platform from Traceable (The company I'm currently working in).

The project has a table implementation that does exactly this. I've just used the same concept to create a card list instead of a table (also use standalone components).

The table is far more capable as it even takes care of sorting, pagination, etc. You can look at the codebase to get an idea of how the table is implemented.

Title	Link
Source Code	https://github.com/adisreyaj/sreyaj/tree/main/libs/examples/dynamic-card-list
Demo	https://examples.adi.so/examples/dynamic-card-list
Hypertrace Repo	https://github.com/hypertrace/hypertrace-ui

Connect with me

Have any thoughts or questions? shoot'em below in the comments.
Stay Safe ❤️

Super Simple Select Implementation Using Angular CDK Selection Model

Adithya Sreyaj — Sat, 26 Nov 2022 14:29:09 +0000

Building out Selection feature for tables/list can be challenging at times, because of a lot of corner case that needs to be handled. Here's how we can build one without writing much logic using the Angular CDK's SelectionModel utility.

Angular CDK SelectionModel

Angular CDK comes with a lot of utilities and components that we can use to build our application. One such very useful utility is the SelectionModel utility that is part of the Collections utilities in Angular Material CDK.

SelectionModel is a utility for powering the selection of one or more options from a list. This model is used in components such as the selection list, table selections, and chip lists.

Understanding the API ℹ️

The Selection Model class comes with a lot of handy methods that make it super easy to maintain the state of selections. Here's how we can use it:



const selectionModel = new SelectionModel<string>();

The class constructor takes in these arguments:

multiple - whether we can select multiple items at a time (multi-select)
initiallySelectedValues - initial selection
emitChanges - Whether to emit changes (selectionModel.changed property)
compareWith - A method that can hold the logic for identifying if an item is selected.

Usage with all the arguments provided:



export interface Movie {
  id: number;
  name: string;
  year: string;
}
const selectionModel = new SelectionModel<Movie>(
  true, // <- multi-select
  [], // <- Initial selections
  true, // <- emit an event on selection change
  (otherValue, value) => otherValue.id === value.id // <- compare method which checks the id of the movie
);

We can provide a custom compareWith method to get if a checkbox is selected (selectionModel.isSelected() method). Here's how it's used internally:



  isSelected(value: T): boolean {
    if (this.compareWith) {
      for (const otherValue of this._selection) { // this._selection is a Set()
        if (this.compareWith(otherValue, value)) {
          return true;
        }
      }
      return false;
    }
    return this._selection.has(value);
  }

Building a Table with Selection 🛠️

Now let's use the selection model to build a table with ability to select a row and also have a global checkbox to Select All/Deselect All.



<section>
  <table>
    <thead>
      <tr>
        <th>
          <input type="checkbox" 
                  [checked]="selectionModel.selected.length > 0" 
                  [indeterminate]="selectionModel.selected.length > 0 &&
                  selectionModel.selected.length < tableData.length" 
                  (change)="onCheckAllChange($event)" />
        </th>
        <th>Name</th>
        <th>Year</th>
        <th>Rating</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let row of tableData">
        <td>
          <input type="checkbox" 
                 [checked]="selectionModel.isSelected(row.id)" 
                 (change)="onCheckRowChange(row)" />
        </td>
        <td>{{ row.name }}</td>
        <td>{{ row.year | date : 'short' }}</td>
        <td>{{ row.rating | number }}</td>
      </tr>
    </tbody>
  </table>
  <footer>
    <button type="button" (click)="toggleSelectAll()">
      {{ isAllSelected ? 'Deselect All' : 'Select All' }}
    </button>
  </footer>
</section>



@Component({
  selector: 'sreyaj-exp-cdk-selection',
  template: `
    <!-- see code above >
  `,
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [NgForOf, DatePipe, DecimalPipe],
})
export class CdkSelectionComponent {
    readonly tableData: MockData[];
  readonly selectionModel: SelectionModel<number>;

  constructor() {
    this.tableData = MOCK_TABLE_DATA;
    this.selectionModel = new SelectionModel<number>(true, []);
  }

  get isAllSelected(): boolean {
    return this.selectionModel.selected.length === this.tableData.length;
  }

  public onCheckAllChange(event: Event): void {
    const isChecked = (event.target as HTMLInputElement).checked;
    if (isChecked) {
      this.selectAll();
    } else {
      this.deselectAll();
    }
  }

  public onCheckRowChange(row: MockData): void {
    this.selectionModel.toggle(row.id);
  }

  public toggleSelectAll(): void {
    if (this.isAllSelected) {
      this.deselectAll();
    } else {
      this.selectAll();
    }
  }

  private selectAll(): void {
    this.selectionModel.select(...this.tableData.map((row) => row.id));
  }

  private deselectAll(): void {
    this.selectionModel.clear();
  }
}

Here I've used the id property to maintain the selection state, but we can use the full data also for the selection.

All selection and indeterminate state ✅

The way we check for all selection/intermediate state is:



<input type="checkbox" 
      [checked]="this.selectionModel.selected.length > 0" 
      [indeterminate]="this.selectionModel.selected.length > 0 &&
                  this.selectionModel.selected.length < this.tableData.length" 
      (change)="this.onCheckAllChange($event)" />

We mark checked by checking if at least one item is selected (by looking at the length of the selected items):



[checked]="this.selectionModel.selected.length > 0"

Next, we set the indeterminate state by checking if at least one is selected but not all.



 [indeterminate]="this.selectionModel.selected.length > 0 &&
                  this.selectionModel.selected.length < this.tableData.length"

Selection change event ⚡️

We can configure if the selection model should emit an event on change or not. This is specified using the emitChange argument in the constructor.

Here's what the event looks like:



/**
* export interface SelectionChange<T> {
*  source: SelectionModel<T>;
*  added: T[];
*  removed: T[];
* }
* */
selectionModel.changed.subscribe((change: SelectionChange) => {
   console.log(change); 
})

We'll be able to get the list of items added and removed and the model itself in case we want to do more when the selection changes.

The good thing about the selection model is that it's not coupled to any component (it's completely headless). It can be used with lists and other similar components. A small but really good utility that allows us to concentrate on the actual business logic instead of things like this.

Code and Demo 🔥

Title	Link
Source Code	https://github.com/adisreyaj/sreyaj/blob/main/libs/examples/cdk-selection/src/lib/cdk-selection.component.ts
Demo	https://sreyaj.vercel.app/examples/cdk-selection
Angular CDK SelectionModel Docs	https://material.angular.io/cdk/collections/overview#selectionmodel
Angular CDK SelectionModel Code	https://github.com/angular/components/blob/main/src/cdk/collections/selection-model.ts

Connect with me

Have any thoughts or questions? shoot'em below in the comments.
Stay Safe ❤️

From Working In A Tech Support Role To Becoming A Full-stack Developer

Adithya Sreyaj — Thu, 28 Apr 2022 16:09:52 +0000

Starting as a tech support associate to becoming a full-stack web developer, this is my journey into tech. I currently work with technologies/frameworks like Angular, NodeJs & TypeScript.

Learning to code has changed my life. I'm really proud of myself and the state I'm in right now. I feel empowered. And being a self-taught developer, I can say that it can change your life too.

Studies

Photo by Philippe Bout

Timeline: 2012 - 2016

I did my Engineering in Electronics and Communications. It was in my 3rd year, I really got interested in robotics. There was a workshop on building things with Arduino which triggered something in me.

I got myself an Arduino and started learning to code. I created multiple small projects like Smartphone controlled robocar, and a full home automation system with the support of gestures and voice control. Went on to win a few prizes at the college and national levels.

The thing I noticed is that, even while I was working on all these projects, it was the software side of it that excited me and I knew that I would be better off working with code.

I along with a few of my friends applied for startup incubation at our University to create a company called MakeLabs. We used to build projects for other students and also did R&D on so many interesting ideas.

Change of Plans

Timeline: 2016

After I did my bachelor's, I decided to go for my master's. It was not my plan, my family persuaded me into making this decision. So when I say family, it's not always my mom and dad, but other relatives because mom and dad had always been supportive.

I had two small offers as part of the Campus placements which I rejected because of the Master's plan.

Things went wrong just before a week of my Master's classes started. A bunch of us (Roll numbers 1 to 14) got a back paper in the 7th semester. I still wonder why all 14 of us failed at the same time.

But since I had grace marks as part of the entrepreneurship program. But luckily, my Master's admission got canceled due to the back-paper even though I cleared it thanks to the grace marks.

It was a relief for me to know that I won't be doing something I didn't like. And I think one of the best things happened to me because I really love what I do now.

Getting into tech support

Photo by Petr Macháček

Timeline: 2017

So now since life took a different turn, I was put in a situation with no job and not knowing what to do next.

I struggled for nearly a year to get a job in the software domain. It was very hard during that time to get calls for interviews and most of them really didn't hire freshers. For most of the jobs that I interviewed for I got a really low package.

I came to Bangalore and started looking for a software developer role. I also wanted to do something till I could find a job. That is when one day, one of my friends was going for an interview for a tech support role. I just tagged along. I who went with him just for giving him company ended up giving an interview and getting the job as well.

The job wasn't exciting and I knew that its not for me. But I had to work so that I can pay my bills without having to trouble my parents.

Blogging about computers and smartphones

The one thing that I did during that time is writing blogs, mainly about computer tips and tricks.
You can see that latest iteration of the blog here at sreyaj.com. Before that I use to own other domains.

I wrote a lot of detailed articles about things related to computers that I encountered or I found will be useful to others. I even had AdSense enabled after some time and used to get very small amounts as ad revenue.

I used WordPress for the blogs and also learned a little bit of PhP, just enough to be able to tweak themes and create small applications at that time.

I could really use some money to pay for rent and food. I ended up working there for almost 6 months. I used to work on my blog and also learn HTML, and CSS to make the blog look good. WordPress had limitations in what can be done.

We are limited by the design of the theme that we use. I am really picky about the design of the blog and that's what pushed me to learn HTML, CSS, and JavaScript.

While working in the Tech support role, I spent a lot of time doing UI changes to my blog. I spent more time learning how HTML, CSS, and JavaScript, all to make my blog look better.

I also did some logo designing and website development for my friends and family at that time. I really enjoyed creating designs.

I later started creating small web applications using PhP like Instagram Photo and Video downloader and a few others which could be a nice addition to the blog.

I was pretty successful in creating a blog that generated a good amount of views and so made a few dollars from it. But the interest in writing articles related to computer tips and tricks slowly faded as I got my first job as a Software Developer.

First job as a Software Engineer

Photo by John Schnobrich

Timeline: Nov 2018

While being in the tech support role, I was pulled into the job completely and I thought I'll be stuck there If I don't do something. That's when I started to apply for software jobs, mainly web development. Got a couple of offers, but the pay was way lesser than what I got from the tech support job.

I was pretty confident that once I get a chance, I can prove myself and go from there. But getting that initial break was a real struggle for me.

One fine afternoon, I got a call from an HR who asked me If I could go in for an interview. I was having an off that day and so I decided to go. Went there and gave the interview. I was able to show my blogs and a few smaller projects that I built during that time.

The company asked me to go to their office for 2 days where they would evaluate me and then offer a job. I was given the task of redoing the company website using Angular. That is the first time I came to know about Angular and what Single Page Applications are.

I was able to complete the task given by the company before the given time and was offered a job with less salary than what I was getting in my tech support role. I decided to just take the job eventually. The pay was just around 12,000 INR or ~150 USD per month.

I undervalued myself because my confidence level went down because of all that happened after college and I was jobless for more than a year.

Angular and Me

Angular version 7 just got released at the time I joined for my first-ever software role.

Angular opened up a whole lot of opportunities for me. I never knew frameworks like these existed and you can build impactful products with them. I realized how powerful the whole web ecosystem was. I was just working with WordPress and had a narrow vision of the web before. But that got changed when I was introduced to Angular.

I started reading the docs and also started going through the Udemy course by Max. I started off with the Udemy course at first, but the pace didn't work well for me. I switched to the official documentation and relied more on blogs.

If someone has told me about Angular or the exciting world of web applications before, I would've been in a far better place by now.

I started out with Angular 7 in the company and I was the only front-end developer. I learned everything on my own. Self-learning helped me in many ways. Whenever I come across a new pattern or feature, I try to read more about it and also practice it in a sandbox. I believe in learning by doing.

I was able to pick up things faster and I started working on NodeJS as well after a short while. Since it's a startup and when you don't have a lot of people, you do a lot of things. I really liked having that flexibility and control.

Also having a manager who really knows all the best practices when it comes to architecting software really came as a blessing. I was able to learn a lot from him. I'm grateful for having a mentor like him during the start itself.

Learn to say NO

Worked really hard for almost 2 years. I spent a lot of time at the office working really hard and learning as much as I can. Even spent almost 12 hours in the office for a month straight. I didn't complain as I was learning something every day. I realize it's a mistake that I did because I didn't know to say "No".

Saying NO was and is very hard for me. I am still trying to do this. It's really important for someone to say no to things at times. Otherwise, you'll just end up doing more work without much to gain.

I really am grateful to my first company for believing in me and giving me that opportunity. I was able to work on multiple projects and also lay the foundation for many projects which really helped me learn a lot.

From there I focused on getting more and more knowledge in Angular and NodeJs. I started feeling more confident about what I can do. I started experimenting and working on small side projects to further solidify my learnings.

Another thing that I loved doing is sharing my knowledge with my peers as well. Whenever I come across something interesting, I ping them and let them know about it.

Being part of the community

Photo by John Cameron

The one thing that I really enjoyed is sharing knowledge and that is what brought me into a lot of communities. Twitter was really one of the best places for sharing and networking with a lot of developers.

Twitter had a lot of awesome Angular developers who share good stuff all the time. I followed any Angular developer I could on Twitter at that time. Once I really got a good grasp of Angular and Web development in general, I shifted to writing blogs focusing on web development mainly using Angular.

I got a chance to sync with a lot of great people on Twitter like Santosh, Chau, Trung, Bram, and many more.

Another community that I wanted to give a shout-out to is Angular Nation which is a really nice community of people who loves Angular. I didn't know that such a community existed before I got an invitation from Connie to join Angular Nation.

I met a lot of cool folks there and also had a chance to interact with Bonnie Brennan. She gave me a lot of support and motivation. I went on to give multiple talks on different channels in Angular Nation. There are a lot of people that I interacted with in Angular Nation like Sander, Stephen, Rob, Ankita, Valentine, Oyemade, Debmallya, etc.

I am also thankful to all of my supporters on Buymeacoffee for their support.

Blogs on web development

Covid really changed a lot of things for me. Working from home gave me a lot of time that I can use to invest in learning more advanced topics and also blog about my learnings. This definitely has been a turning point for me.

I put my old blog into maintenance mode and started writing blogs related to web development.
You can find my blogs here:

I realized that I learned and researched more while I write blog posts. I was not just helping others by sharing these articles but was helping myself by researching a lot about topics I write about. So If you are someone who likes to learn and if you want to learn better, I would suggest documenting them as blog posts.

I mostly consider my blogs as documentation that I can go back and refer to just in case. I became a contributor to the Official Angular Org on dev.to as well, Thanks to Wassim Chegham.

Projects & Wins

Photo by Sean Lim

I also worked on a bunch of side projects, most of them built using Angular and a few with React. When it comes to the back-end frameworks, I started out with ExpressJS and then shifted to NestJs for its similarities with Angular.

Being able to write the back-end and front-end means, I don't want to rely on others If I had an idea in mind. I can execute it on my own.

I've participated in multiple hackathons during Covid times and won two of them.

Hackathons came with cash prizes and swags and on top of that people started recognizing my work which gave a confidence boost and motivation to do more.

I've also built up my portfolio during this time. You can check it out here: adi.so

If you want to have a look at the code, here is the link to the repo:
https://github.com/adisreyaj/portfolio

Check out some of my projects:

Fast forward to 2022

I have started my Angular journey from v7 and now we are at v13. It's been a really good journey so far. The amount of learnings that I accumulated is so much and I'm still learning. That's a really interesting thing about the software domain, you need to be up to date with what's happening. And that is something that I really like about the whole software development field.

Fast forward to 2022, I now work as a Software Engineer at Traceable. I work with a really good team of experienced engineers whom I can learn from. I really got to know how culture makes a really big difference. It's not always about the money. Finding a job where you have peace of mind is really important.

Tech Stack

I primarily work with Angular in my day-to-day job. Since I am working as a UI developer, I don't have to work with back-end technologies or databases in general. But since I do work on side projects and do like having control over both front-end and back-end, I keep myself up to date with back-end and database technologies as well.

I really like TypeScript and use it in every project that I start. So whether it's back-end or front-end, TS is my go-to.

Front-end technologies

Apart from Angular, I've learned React. Haven't really gotten a chance to learn Vue or other newer frameworks. I like Angular more because it's opinionated and is more comfortable working with it.

I'm not saying React is bad, I enjoy working in React as well. Especially when working on smaller projects, React makes it really easy to get-go. One thing I didn't like much in React was how we have to set up routing. But with Next.js, I don't have any complaints about routing anymore.

I really like working with Next.js because it has a really good Dx.

For styling, I used SCSS a lot, and lately, it's Tailwind CSS all the way. I just love it so much. I can write styes and iterate over them very fast.

For state management in Angular, I use NGXS and Ngrx Component store.

Back-end technologies

Since I only know JavaScript, Node.js is the way to go. I started off with Express.js and then later started using Nest.js because of its similarities with Angular. There is no context switching required when writing the back-end as both Angular and Nest.js shares a lot of concepts.

I am leaning towards learning Fastify these days for its simplicity.

The majority of my back-ends are all Restful APIs, but recently started using GraphQL and really love how good it is. I'll probably stick with GQL for my future projects.

When it comes to databases, I prefer MongoDB, Postgres, or MySQL. Since I am not that well versed with SQL, I always use an ORM like Prisma which has served me well so far. For Mongo, the obvious choice is mongoose for me. It just works.

For deployments, I use a simple Ubuntu based instance from OVH and run a container in it, connect to domains using Nginx and Let's Encrypt for SSL and that's pretty much it.

I use Nx for all of my projects as it makes it so easier to work on both the front-end and back-end with ease. They take care of all the tooling while we can concentrate on getting the things done.

Going forward

I aspire of being a GDE in Angular at some point in time. I want to continue writing more blogs and sharing my knowledge.

I am also thankful to a whole bunch of people from the Angular community that helped me reach where I am today.

Finally special thanks to all who have supported me on buymeacoffee:

Feel free to reach out to me if you want to chat about something or if you just want to say hi.

Connect with me

✨Libshare - Curate & Share Your favorite JavaScript Libraries!

Adithya Sreyaj — Fri, 18 Feb 2022 17:25:23 +0000

Libshare helps you curate and share your favorite NPM libraries with the community. Showcase all the awesome libraries that you used in your side project and give them visibility. Made for the ♥ of open-source.

What is Libshare?

You can think of Libshare as a curator for JavaScript libraries. How often do you come across a library and then when you need to use it, you forget the name of the library?

Happens to me every time. Libshare solves that problem.

Another great use-case for Libshare is to bring visibility to the open-source packages that are used in your projects. Don't let them hide in your package.json file. Let people know about the libraries that are used in building amazing products.

Curate all the libraries used in your project and add them to a list. You can get a public shareable link to it which can be added in Github Readme or blog posts. This makes it easier for people to find out more about the libraries.

Tech Stack

If you look at the subtitle for the blog post, it says "Powered by Angular and HarperDB". Notice that there is a front-end framework and then there is a Database. You might be wondering What is the back-end used for?

The interesting thing about the project is that I didn't have to develop a separate back-end, I didn't have to deploy it, set up SSL, or do any of the things I usually do when I'm building a side project.

The whole back-end is written as Custom Functions in HarperDB. It's crazy, I know right? I didn't think that it could do so much when I was first introduced to HarperDB. But once I used it, I can say that it has great potential.

I'll make sure to link to the list of all the libraries that are used in making this project.

Setting up the Back-end

So there are two parts to the Back-end.

Setting up Database
API Server which talks to the DB

Let's start by setting up the DB for the application.

We are going to be using a functionality called Custom Functions.

HarperDB Custom Functions

Custom functions are one of the most interesting features of HarperDB. It's so versatile and makes life easy for a developer.

Custom functions allow us to create API routes inside of HarperDB. Yes, you heard me. No need to create a separate API server.
You can directly interact with HarperDB from within the custom functions. What this means for you is that no more configuration or initialization is required.
You can write the whole server in the Integrate IDE in HarperDB Studio or if you are like me who prefers to do things locally, you can write your functions locally and then deploy it once it's ready.

I'll be setting up a local instance of HarperDB to write the custom functions and then once everything is ready, will deploy it to a cloud instance. In this way, I can code faster, test it out better, and once everything is ready, deploying it is easy-peasy.

Note: If you like to write your functions inside the Harper Studio, you can skip setting up the local instance and write your functions directly in the cloud instance.

Setting up a HarperDB

There are two ways to setup HarperDB:

Use their cloud offering
Self-host

Installing HarperDB using Docker.

There are different ways to install a local instance. You can read more about them here. I'll be using docker to create a container using the harperdb/harperdb image.

Create a file called docker-compose.yml and copy over the content below into that file:

version: '3.3'
services:
    harperdb:
        volumes:
            - /Users/admin/Desktop/libshare:/opt/harperdb/hdb
        environment:
            - HDB_ADMIN_USERNAME=admin
            - HDB_ADMIN_PASSWORD=password
            - CUSTOM_FUNCTIONS=true
        ports:
            - '9925:9925'
            - '9926:9926'
        image: harperdb/harperdb

Note: Provide a valid path for volumes (left-hand side of :). That's where we will be setting up the custom functions.

You can then start the container by running:

docker-compose up

Run this command in a separate terminal and keep this open, so you can watch the logs.

Registering the User Installed Instance

Go ahead and sign up for an account in HarperDB if you haven't already.

Once you are logged in, create an Organization.

Once you are inside the newly created Org, you can click on the Add button, which gives you two options. Choose the second option which is Register User-Installed Instance and fill in the details.

You should now be taken to the studio page.

Setting up tables

Now we set up the tables required. For that create a new schema first, and then add tables.
Schema is nothing but for grouping tables. I've just named the schema as data.

Setup 3 tables like so:

users
lists
libraries

Note: The hash_attr is kind of the primary key. Just use id in our case.

Here's how my setup looks:

Setting up custom functions

Going to the Functions tab will land you on a page where you can create the routes for your API.

Start by creating a new project first. I named it api. The project name can be used to namespace your APIs. So in this case, the endpoint will look like: http://localhost:9926/api.

We are all done setting up the instance and the table. The only thing that is left is to go to the Config page and copy the Instance API Auth Header which we need to use.

Creating the APIs

If you navigate to the folder that is mentioned under the volumes in the docker-compose.yml file, you can see there are a couple of folders that got created.

We will be working in the custom_functions directory. Navigate into the custom_functions folder and open your favorite IDE.

The first thing that you will notice, there is an api folder. So each project that you create on the custom functions page, will have its folders. The folders would have the following folders/files:

├── helpers
├── routes
└── static

The names are self-explanatory.

Let's start by initializing git in the custom_functions folder so that we can save it to a repo.

git init

also, initialize npm so that we can install packages

npm init

You can see a few boilerplate files inside these folders, just delete them so we can start fresh.

Setting up first route

You can create multiple files inside the route to organize things better. So we'll few files:

├── auth.js
├── general.js
├── libraries.js
├── lists.js
└── users.js

Here's what a route file would look like:

'use strict';

module.exports = async (server) => {
  server.route({
    url: '/',
    method: 'GET',
    handler: (request, reply) => {
      return {
        status: 'OK',
      };
    },
  });
};

The best thing about HarperDB custom functions is that they are powered by Fastify which is fantastic. The route files contain basic Fastify route declarations.

For maintainability and a better overall structure of code, You can extract the handler into a separate file and add it to the helpers folder. It's not necessary, but doable and I would highly recommend it. I've split my code into multiple handlers and helper files:

├── auth-handler.js
├── auth-helper.js
├── errors-helper.js
├── libraries-handler.js
├── libraries-helper.js
├── list-handler.js
├── list-helper.js
├── query-builder-helper.js
├── users-handler.js
└── users-helper.js

Let's see a complete implementation of how to set up a signup route and its handler:

// users-handler.js

const createUserHandler =
  ({ hdbCore }) =>
  async (request) => {
    const { firstName, lastName, email, password } = request.body;
    const hashedPass = await hashPassword(password);

    const sqlReq = {
      ...request,
      body: {
        operation: 'sql',
        sql: qb.buildInsertQuery('data.users', {
          firstName,
          lastName,
          email,
          password: hashedPass,
        }),
      },
    };

    return hdbCore.requestWithoutAuthentication(sqlReq);
  };

module.exports = { createUserHandler }

and the route:

'use strict';

const userHelpers = require('../helpers/users-helper');
const userHandlers = require('../helpers/users-handler');

module.exports = async (server, hdb) => {
  server.route({
    url: '/signup',
    method: 'POST',
    preValidation: [userHelpers.validateUser(hdb.logger), userHelpers.existingUserValidation(hdb)],
    handler: userHandlers.createUserHandler(hdb),
  });
};

Note: You can also add Validation methods where the authentication can be checked or the request body can be validated.

// users-helper.js

'use strict';

const joi = require('joi');
const errors = require('./errors-helper');

const USER_VALIDATION_SCHEMA = joi.object({
  firstName: joi.string().required(),
  lastName: joi.string().required(),
  email: joi.string().email().required(),
  password: joi.string().required(),
});

const validateUser = (logger) => async (request, reply) => {
  try {
    await USER_VALIDATION_SCHEMA.validate(request.body);
    return true;
  } catch (error) {
    logger.error('Bad Request');
    errors.badRequest(reply);
  }
};

module.exports = {
  validateUser
};

See how I've used joi for validating the request body. You can install and use different libraries like this inside the helpers/routes. Joi can be installed with the following command:

npm install joi

Head over to the documentation website of Joi for more info: https://joi.dev/

Once all the endpoints are set up. We can now deploy the functions to a cloud instance.

Development Tips

Here are a few recipes that could come in handy when working with HarperDB.

Automatically restart the functions on changes

When working with custom functions, whenever you make changes to the files, you need to restart the Custom Functions server every time for those changes to take effect.

So to speed up the process, I created a file watcher which listens to changes in any of the routes or helpers folders and auto-magically restarts the custom functions server. It's a very simple script that makes an API call to restart API when you save a file.

Getting Auth Token

Step into HDB studio and go to the config page. Under the heading of Instance API Auth Header (this user) you can see the token. Copy the token using the icon on the left.

Add a .env file in the root folder of custom_functions where you can mention the copied token which is needed to call the HarperDB API.

HDB_AUTH=

Create a file watcher

Create a file file-watcher.js under the custom_functions/scripts folder. We don't want this to be part of the project so it is kept outside the project folder.

const fetch = require('node-fetch');
const chokidar = require('chokidar');
require('dotenv').config(); // <-- to read the env variables
const updateFunctions = async () => {
  try {
    fetch('http://localhost:9925', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        authorization: `Basic ${process.env.HDB_AUTH}`,
      },
      body: JSON.stringify({ operation: 'restart_service', service: 'custom_functions' }),
    });
    console.log('Custom functions server restarted');
  } catch (error) {
    console.error('Failed to restart custom functions',error);
  }
};

// Make sure the path is correct
chokidar.watch('./api/**/*.js').on('change', () => {
  updateFunctions();
});

You can then open a terminal and run the script:

node file-watcher.js

Note: Make sure the path to your custom functions is correct.

How to use env variables in HarperDB Custom Functions

I needed to save a private key for signing the JWT when the user logs in. For this purpose, the keys should be saved as environment variables.

We use a popular library called dotenv to implement this. dotenv will automatically read the variables in our .env file and inject it to process.env The only gotcha is that the .env file for each project should be placed inside the project folder. In this case, the .env file path is:

custom_functions/api/.env

And for using it, specify the path to the .env file:

require('dotenv').config({
  path: `${__dirname}/../.env`, // <-- relative url
});

console.log(process.env.JWT_SECRET) // <-- access it

Here is the content of the .env file:

JWT_SECRET=

JWT_SECRET is used for signing and verifying the access tokens. You can see the usage in the auth-helper.js file.

Note: There are .env.example files kept in certain places in the repo which is where the actual .env files should be.

Repo

Here is the Github repo with all the routes, helpers written for Libshare.

adisreyaj / libshare-hdb-functions

LibShare App HarperDB Custom Functions

View on GitHub

Testing the custom functions

All the API endpoints can be validated locally using apps like Postman or Insomnia. The URL will be http://localhost:9926/api with your route specified in the routing files. Eg: The signup route will be http://localhost:9926/api.

Here's an example cURL command:

`curl --request POST \
  --url http://localhost:9926/api/signup \
  --header 'Content-Type: application/json' \
  --data '{
    "firstName": "Adithya",
    "lastName": "Sreyaj",
    "email": "hi@adi.so",
    "password": "mysecretpassword"
}'

Final files and folders

Here's what the whole project now looks like:

Deploying the custom functions

There are two different ways to deploy the custom functions to a cloud instance. One involves us zipping the custom_functions folders and making an API call for packaging the functions and then another call to deploy the packaged functions. This is really cumbersome and I'm not a fan of it.

The other one is to deploy it using the HarperDB Studio, which deploys the local custom functions to the chosen cloud instance with a button click.

Go to the functions tab.
Select the project in the left sidebar.
Click on the deploy button on the top right of the editor.
Select the cloud instance to deploy to and press that green deploy button.

Woohoo. We have successfully deployed a whole back-end. You can now visit the cloud instance functions URL to see the API.

Setting up the UI

The Libshare UI is built using Angular and styles are handled using Tailwind CSS. Here's how you can set up the UI to run locally.

%{https://github.com/adisreyaj/libshare%}

Clone or download the repo:

git clone https://github.com/adisreyaj/libshare.git

Navigate to the folder

cd libshare

Initialize the submodule

git submodule  update --init

Install the dependencies

npm install

Serve the UI

npm start

Now you can visit http://localhost:4200 in your browser to see the application running.

Note: The UI components come from another repo called zigzag which is added as a submodule in the repo. We need to initialize the submodule before installing dependencies. It's a set of common components that I use in my projects.

Make sure the HarperDB docker image is running as in the local environment the UI is going to be calling the API at http://localhost:9926.

Pages in UI

So the UI is actually quite simple, there are like 4 pages in the application at the moment:

Login
Signup
Libraries
Lists

Libraries Page

This is where you can add the NPM libraries that you have used or you found useful. You can then add a new library by just entering the name and searching for it.

If the API is able to find the library, all the details are pre-filled by the application. If not the user can simply enter them manually.

Lists Page

Lists are a way to group the libraries that are added. So let's say you can think of them as folders. So if you worked on a project, you can create a list for that project and add all the libraries that are used.

The list can then be made public, which produces a public link that can be shared. If not the list is only visible to the owner.

Here's the link to Libshare's list page: https://libshare.adi.so/view/libshare-api-libraries-i95t9kib9a

Public Lists

Here's what a public list page looks like.

You get a nice list of libraries used with some useful info about it. There is a title and description along with the last update date.

Have you worked on something interesting? Try Libshare! You can showcase all the cool packages that made your application great.

Connect with me

Twitter
Github
Linkedin
Cardify - Dynamic SVG Images for Github Readmes

Do add your thoughts or if you have any questions, shoot'em below in the comments.
Stay Safe ❤️

[](https://www.buymeacoffee.com/adisreyaj

What the heck is HttpContext in Angular?

Adithya Sreyaj — Tue, 01 Feb 2022 16:16:16 +0000

Have you heard about HttpContext in Angular? If not, there is such a thing. HttpContext is used to pass additional metadata to HTTP Interceptors in Angular.

HttpContext in Angular

HttpContext is used to store additional metadata that can be accessed from HTTP Interceptors. Before this, there was no proper way to configure interceptors on a per request basis. This feature was introduced by Angular v12.

If you had use cases where you need to treat a particular request differently or override some logic in an HTTP Interceptor, this is what you need to use.

I came to know about it only recently and actually started using it in one of my recent projects - Libshare.

How to use HttpContext in Angular?

Let's take a practical use case for understanding how to use HttpContext.

I was working on a small application that can be used to curate and share the libraries. Most of the APIs are authenticated, meaning we need to add Authorization header with all the API requests.

For pages like Login and Signup, we don't need to pass the token in the headers. Let's see how we can skip certain APIs and only add Bearer tokens to the other API requests.

The way we use it is pretty straightforward. There are two parts to it:

1. Create a new `HttpContextToken`



const IS_PUBLIC_API = new HttpContextToken<boolean>(() => false);

2. Passing the context while making `http` calls.

When using the HttpClient to make requests, you can pass the context along with other options.
We create an instance of HttpContext class and use the set method to pass the value to the token we created above.



getSomeData(slug: string) {
    return this.http
      .get(<URL>, {
        context: new HttpContext().set(IS_PUBLIC_API, true),
      })
  }

3. Retrieve the data inside an Interceptor.

We can now retrieve the context data from the interceptor by accessing the request.context:



@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.context.get(IS_PUBLIC_API)) {
      return next.handle(req);
    }
   // Add token to other requests
  }
}

You can check a practical usage here: Libshare Repo

Addtional Info

HttpContext is backed by a Map and so has methods like:



class HttpContext {
  set<T>(token: HttpContextToken<T>, value: T): HttpContext
  get<T>(token: HttpContextToken<T>): T
  delete(token: HttpContextToken<unknown>): HttpContext
  has(token: HttpContextToken<unknown>): boolean
  keys(): IterableIterator<HttpContextToken<unknown>>
}

The context is also type-safe, which is a good thing.
Also, keep in mind that the context is mutable and is shared between cloned requests unless explicitly specified.

There are a lot of ways this could prove useful like if you want to cache only particular requests, or maybe add some additional headers conditionally.

Documentation: https://angular.io/api/common/http/HttpContext

Connect with me

Twitter
Github
Linkedin
Cardify - Dynamic SVG Images for Github Readmes

Do add your thoughts in the comments section.
Stay Safe ❤️

Get Signup Notifications In Telegram Using Auth0 Actions.

Adithya Sreyaj — Mon, 17 Jan 2022 15:12:05 +0000

Auth0 actions are so powerful that they can be used to do a lot of cool things. Here's how you can send notifications to Telegram whenever a new user signs up.

I recently worked on a small project which is a small e-commerce application built using Angular and NestJs. Auth0 is used for authenticating the users. I had a very interesting thought of adding notifications when a new user signs up. The easiest way for me was to use Auth0 Actions.

Auth0 Actions

Actions are one of the coolest features of Auth0. I personally love it and have used it for multiple scenarios. Actions are custom Node.js functions that get executed during certain points like User Login, Registration, etc.

Here's a definition from the docs:

Actions are functional services that fire during specific events across multiple identity flows.

Auth0 hooks allowed us to add custom logic that gets triggered when certain events happen. Actions are a more advanced version of hooks that provides more extensibility.

Official docs: https://auth0.com/docs/customize/actions

Action Triggers

The custom functions that we write are called by certain events. Here are the supported triggers:

Here are more details of when exactly these actions are triggered:
https://auth0.com/docs/customize/actions/triggers

Implementing the Action

For our use case, we need the notification to be sent when a new user signs up. So we could use the Post User Registration trigger for our action.

1. Create a custom action

The first step is to create a new custom Action. We do that by navigating to Actions > Custom and then clicking on the Build Custom button.

We get a modal asking to give the Action a name and also select a Trigger and the Environment.

You can fill the form up with the following details:

Name: New User Notifications
Trigger: Post User Registration
Runtime: Node 16 (Recommended)

2. Setting up pre-requisites

Once the action is created, you can see the list of the Actions under Custom tab on the Actions Library page.

There are a few things that we need to do before we can start writing the actual logic.

Creating a Telegram Bot

Telegram is a really powerful messaging platform that can do a lot of stuff. One of the best things about it is that we can create bots and also send messages using the Telegram Bots API.

Put a message to BotFather on Telegram

/newbot

It will prompt to you give a name. Give a name and then you'll be given the Bot Token.

Now that we have the bot token, we can make API calls using the Telegram Bot API.

Ref: https://core.telegram.org/bots#3-how-do-i-create-a-bot

Before we can send a message to the Bot, we need to get the Channel Id. For that send a message to the bot and then just paste the following URL in the browser (replace the with yours):

https://api.telegram.org/bot<bot-token>/getUpdates

You will be able to see the message details that was sent to the bot:

{
  "ok": true,
  "result": [
    {
      "update_id": 723563447,
      "message": {
        "message_id": 7,
        "from": {
          "id": 627445600, // <-- Copy this Id
          "is_bot": false,
          "first_name": "John Doe",
          "username": "johndoe",
          "language_code": "en"
        },
        "chat": {
          "id": 627445600,
          "first_name": "Jane Doe",
          "username": "janedoe",
          "type": "private"
        },
        "date": 1642266764,
        "text": "Test"
      }
    }
  ]
}

The id is the channel_id that we are going to use for sending messages.

3. Writing the Action Logic

Now that we have the things needed, let's start writing the logic. So here are the things that need to be set up in the actions.

Installing Dependencies

Actions allow us to install packages that we can use inside the function, in our case we need to make API requests to the Telegram Bot API to send messages. For that, we can install a library called node-fetch.

To do so, go to your newly created action and click on the Modules section.

Note: We install node-fetch@2 explicitly because we want the CommonJs version of the library.

Adding Env Variables

Actions also have a way to keep our environment variables a secret. This is where we are going to save the Bot Token and the Channel id that we will use in the code. It's not a good idea to put them in the code as they are sensitive information.

There is a Secrets section under which we can save them. Create a secret for the token and the channel id.

Writing the actual logic

Now you can use node-fetch to make a post request to the /sendMessage API endpoint.

const request = require('node-fetch'); // <-- require the library

/**
* Handler that will be called during the execution of a PostUserRegistration flow.
*
* @param {Event} event - Details about the context and user that has registered.
*/
exports.onExecutePostUserRegistration = async (event) => {
  try{
    const {family_name, given_name} = event.user;
    await request(`https://api.telegram.org/bot${event.secrets.BOT_TOKEN}/sendMessage`, 
      {
        method:'POST',
        body: JSON.stringify({
          "chat_id": event.secrets.TELEGRAM_CHAT_ID,
          "text":`New User Signed up: ${given_name} ${family_name}`
        }),
        headers: {
          'content-type': 'application/json'
        }
      }
    );
  } catch(err){
    console.log('Failed to notify');
  }
};

Now the action can be deployed.

Ref: https://core.telegram.org/bots/api#sendmessage

4. Using the Action

Once the action is deployed, we can use it in a flow. To do so, navigate to the Actions > Flows Page and select Post User Registration flow from the cards.

We can find the action that we built under that Custom tab. Dragging and dropping the action to the flow does the job of activating it. The only thing left now is to just Apply the flow.

We are done setting up.

So now whenever someone signs up, you get a message in Telegram.

There are tons of cool use-cases for Actions. If you would like to see more blogs on it, do let me know.

Connect with me

Twitter
Github
Linkedin
Cardify - Dynamic SVG Images for Github Readmes

Do add your thoughts in the comments section.
Stay Safe ❤️

The WFH Store - an eCommerce site for all your WFH Needs | Mongo Atlas Hackathon

Adithya Sreyaj — Wed, 12 Jan 2022 17:54:14 +0000

Overview of My Submission

The WFH Store is a one-stop destination for all your Work From Home needs. If you are someone in the Software industry and want to get a proper WFH setup, The WFH Store is the right place to shop for chairs, desks, monitors, keyboards, and many more.

With powerful search and filtering, you'll find it easy to find just the thing you are looking for.

Tech Stack

The whole application is written in TypeScript and is a mono-repo managed by Nx. The front-end is powered by Angular and the back-end is using NestJs. The main highlight of the project itself is the filtering and search functionality powered by Mongo Atlas Search.

Authentication is powered by Auth0.
UI is built from scratch without using any component library, all using TailwindCSS.

Search and Filtering

The most important feature of any e-commerce website is its search and filtering capabilities. Its' the first time using Mongo Atlas search for doing full text search. To my surprise it was just great.

The important thing here to note is the effort needed for setting up a full text search with Atlas was not that daunting as I thought it would be.

Knowledge on Mongo aggregation pipeline definitely helped me. The project make use of multiple search operators provided by Atlas search like autocomplete, text, equals etc.

Search also works on the Orders page where the user could search for products and the associated order will be filtered out.

Submission Category:

E-Commerce Creation

Link to Code

Demo: http://wfh-store.adi.so/

adisreyaj / wfh

E-commerce app built using Angular, NestJs and MongoDB

The WFH Store

Ecommerce website to buy all you need to setup your home office.

View Demo · Report Bug · Request Feature

A simple e-commerce application that is built using Angular, NestJS and MongoDB. Built as part of the MongoDB Atlas Hackathon (ref).

Tech Stack

Getting started

The application is a monorepo and so both the front-end and the back-end code are in the same repo.

Clone the repo

https://github.com/adisreyaj/wfh.git

Install dependencies

npm install

Setup the environment variables required for the API

MONGODB_URI=
AUTH0_AUDIENCE=
AUTH0_ISSUER_URL=
AUTH0_DB=

// Used for setting and internal APIs
INTERNAL_TOKEN=

Run the Front-end

npm start

Run the Back-end

npm start api

Open the URL in the browser

http://localhost:4200

License

Distributed under the Apache 2.0 License. See LICENSE for more information.

Show your support

Please ⭐️ this repository if this project helped you!

View on GitHub

Additional Resources / Info

Screenshots

Here are some screenshots of the pages in the application

Products Page
Product Quick View
Profile
Orders
Cart

Here are some additional information for the curios bunch :)

Search and Filtering

There are different indexes created in Atlas for entities like Products, Brands, Categories and Orders.

Different kinds of mappings are used on each entity. For example in Products, there are the field mappings:

{
  "mappings": {
    "dynamic": false,
    "fields": {
      "brand": {
        "type": "objectId"
      },
      "category": {
        "type": "objectId"
      },
      "colors": {
        "type": "string"
      },
      "description": {
        "type": "string"
      },
      "name": [
        {
          "type": "string"
        },
        {
          "minGrams": 3,
          "type": "autocomplete"
        }
      ],
      "price": {
        "type": "number"
      }
    }
  }
}

This allows us to search based in product name and description. And also filter based on price, brand, category etc.

Filtering is also powered by the search pipeline as using $match() after $search() can have perf issues as mentioned by the documentation.

Filtering in action

Filters are no brainer for any e-commerce website. In the WFH Store app, users can filters Categories, Brands, Price Range and Colors.

All the filters selections are synced with the URL so that you can share the link with your friends and they'll see the same filters applied.

Here's the code the does the filtering and search magic for products: api-product.service.ts

Search and Autocomplete in action:

Search comes with autocomplete that gives you recommendations even before you finish typing. It can point you towards a product or maybe a brand or category that you are looking for.

Automcomplete is again powered by atlas and it uses the autocomplete operator (ref).

Here's how autocomplete works for the products entity: api-product.service.ts

APIs and Authentication

There are two different APIs for the project:

Public APIs
Authenticated APIs

The APIs for fetching the products, categories, brands etc are public and users can browse through the application without having to login.

For APIs like cart and orders, it requires the user to be logged into the application.

Users can login with their google account and start placing orders.

Mongoose Discriminators

Another interesting new thing that I got a chance to work on is Mongoose Discriminators. Mongoose is used as the connector to talk to MongoDB and it has an interesting feature which allows you to use different schemas in the same collection.

Ref usage in code: api-product.module.ts

Hosting of apps

Front-end is hosted on Vercel. The process is pretty straight forward as you can just push code and see it live.

For the back-end, Github action workflow is used to create a build of the api, which is then compressed and send over to an Ubuntu instance.

Where you able to spot the idea behind the logo? Its a table and a chair btw (I'm not a very good designer btw :))

Please do share your thoughts and comments below. Also don't forget to raise an issue if you find a bug. Thanks <3

All About Validators in Angular + Creating Custom Sync & Async Validators

Adithya Sreyaj — Thu, 16 Dec 2021 13:18:25 +0000

Validators in angular are just simple functions that check our form values and return an error if some things are not the way its meant to be. Angular ships with a bunch of Validators out of the box. These can be used directly without the need for any configuration.

Using validators in angular forms

Validators can be set up in different ways to validate user inputs in form elements. Angular provides a lot of validators that are commonly needed for any form.

If we special validation requirements or if we are dealing with custom components, the default validators might not just cut it. We can always create custom validators for these cases.

In-built validators of angular

Angular ships with different validators out of the box, both for use with Template forms as well as Reactive forms.

In-built Validator Directives.
A set of validator functions exported via the Validators class.

Both the directives and Validators class use the same function under the hood. We can provide multiple validators for an element. What Angular does is stack up the validators in an array and call them one by one.

Validator Directives

Native HTML form has inbuilt validation attributes like required, min, max, etc. Angular has created directives to match each of these native validation attributes. So when we place these attributes on an input, Angular can get access to the element and call a validation function whenever the value changes.

Here's how you would use a validator directive:

<input type="email" required minlength [(ngModel)]="email"/>

The attributes required and minlength are selectors for the RequiredValidator( ref ) and MinLengthValidator ( ref ) directives respectively. These can be used with both Template drive forms and Reactive Forms.

Here's how the requireddirective looks like:

@Directive({
  ...
  providers: [{
  provide: NG_VALIDATORS,
  useExisting: forwardRef(() => RequiredValidator),
  multi: true
}],
  ...
})
export class RequiredValidator implements Validator {
   // .....

   validate(control: AbstractControl): ValidationErrors|null {
    return this.required ? requiredValidator(control) : null;
  }

   // .....
}

Let's break down the code:

The class RequiredValidator implements an interface called Validator.
The Validator interface forces the class to implement a validate() method.
The method will be called for validation of the value.
The validation logic can be performed in the method and just have to return an object if there is an error or null if there is no error.
Now, we need to let Angular know about this custom validation that we've set up.
We use the NG_VALIDATORS Injection token for this.
We ask Angular to use our same RequiredValidator class by using the useExisitng property.

So when the user places required on a form control, the RequiredValidator directive gets instantiated and the validator also gets attached to the element.

Take a look into the source code for Required Validator( ref ).

Validators class

Validators class exposes a set of static methods that can be used when dealing with Reactive Forms like so:

import { FormControl, Validators } from '@angular/forms';

export class AppComponent{
  email = new FormControl('', [Validators.required, Validators.minLength(5)]);
}

Here's the list of all the function inside the class:

class Validators {
  static min(min: number): ValidatorFn
  static max(max: number): ValidatorFn
  static required(control: AbstractControl): ValidationErrors | null
  static requiredTrue(control: AbstractControl): ValidationErrors | null
  static email(control: AbstractControl): ValidationErrors | null
  static minLength(minLength: number): ValidatorFn
  static maxLength(maxLength: number): ValidatorFn
  static pattern(pattern: string | RegExp): ValidatorFn
  static nullValidator(control: AbstractControl): ValidationErrors | null
  static compose(validators: ValidatorFn[]): ValidatorFn | null
  static composeAsync(validators: AsyncValidatorFn[]): AsyncValidatorFn | null
}

Custom Sync Validators

We can also create custom validators in Angular which are tailored to our particular use case. You can't just always rely on the built-in capabilities of Angular.

Validators are just functions of the below type:

export interface ValidatorFn {
  (control: AbstractControl): ValidationErrors|null;
}

Let's create a custom validator function that checks if a domain is secure (https) or not.

export const ProtocolValidator: ValidatorFn = (control) => {
  const { value } = control;
  const isSecure = (value as string).startsWith("https://");
  return isSecure ? null : { protocol: `Should be https URI` };
};

Custom validator with parameters

If we want our custom validator to be more configurable and re-use in multiple places, we can pass parameters to our validator function to create a validator based on the provided parameters.

For example, if the Secure validator needs to validate Websocket URIs also, we can modify the ProtocolValidator to accommodate this change:

export const ProtocolValidator = (protocol: string): ValidatorFn => (control) => {
  const { value } = control;
  const isSecure = (value as string).startsWith(protocol);
  return isSecure ? null : { protocol: `Should be ${protocol} URI` };
};

Use custom validators in Reactive Forms

We can directly use the function in the reactive forms like so:

const urlControl = new FormControl('', [Validators.required, ProtocolValidator('https://')]);

and the template will be something like this:

<input type="text" [formControl]="urlControl" />

Use custom validator in Template-driven Forms

If we want to use these validators with Template-drive forms, we need to create a directive.

@Directive({
  selector: "[protocol]",
  providers: [{
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => ProtocolValidatorDirective),
      multi: true
    }]
})
export class ProtocolValidatorDirective implements Validator {
  @Input() protocol!: string;

  validate(control: AbstractControl): ValidationErrors|null {
    return ProtocolValidator(this.protocol)(control);
  }
}

and we use it like this:

<input type="text" protocol="wss://" [(ngModel)]="url" />

Note: For the directive selector, it's always a good idea to also look for whether there is a valid form connector added to the element:

@Directive({
   selector: '[protocol][formControlName],[protocol][formControl],[protocol][ngModel]'
})

What this translates to is that the element where our protocol directive is placed should also have either of these attributes:

formControlName
formControl
ngModel

This makes sure that the directive is not activated on non-form elements and you won't get any unwanted errors.

Custom async validators

The process of creating async validators in angular is exactly the same, except this time we are doing our validation in an async way (by calling an API for example).

Here is the type of async validator function:

interface AsyncValidatorFn {
  (control: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null>
}

The only thing that is different here is that the method now returns either an Observable or a Promise.

Let's create an async validator by modifying the above validator that we wrote. Ideally, we will be using async validation for meaningful validations like:

Check username availability
Whether a user is blocked
If the user's phone number is part of a blocklist.

Let's create an async validator to check if a username is available.

We are gonna be creating 3 things:

Username Service - which makes the API call to see if the username is available
Validator Service - which contains the validation logic
Validator Directive - for using template-driven forms

Username Service

We'll mock the logic for this:

@Injectable({
  providedIn: "root"
})
export class UsernameService {
  constructor(private http: HttpClient) {}

  isUsernameAvailable(username: string) {
    return this.http.get("https://jsonplaceholder.typicode.com/users").pipe(
      map((users: any[]) => users.map((user) => user?.username?.toLowerCase())),
      map(
        (existingUsernames: string[]) => !existingUsernames.includes(username)
      ),
      startWith(true),
      delay(1000)
    );
  }
}

Async Validator Service

This is the main part of our validation process.

@Injectable({
  providedIn: "root"
})
export class UsernameValidatorService implements Validator {
  constructor(private usernameService: UsernameService) {}

  validatorFunction: AsyncValidatorFn = (control) =>
    control?.value !== ""
      ? this.usernameService
          .isUsernameAvailable(control.value)
          .pipe(
            map((isUsernameAvailable) =>
              isUsernameAvailable
                ? null
                : { username: "Username not available" }
            )
          )
      : of(null);

  validate(control: AbstractControl) {
    return this.validatorFunction(control);
  }
}

Why did we create a separate validatorFunction()? Why can't the logic be placed inside the validate() method itself?

This is done so that, we can use the validatorFunction() when we are using Reactive Forms:

export class AppComponent {
  constructor(private usernameValidator: UsernameValidatorService) {}
  username = new FormControl("", {
    asyncValidators: this.usernameValidator.validatorFunction
  });
}

Now to use the validator with Template-driven forms, we need to create a Directive to bind the validator to the element.

Async Validator Directive

@Directive({
  selector: "[username][ngModel]",
  providers: [
    {
      provide: NG_ASYNC_VALIDATORS,
      useExisting: UsernameValidatorService,
      multi: true
    }
  ]
})
export class UsernameValidatorDirective {}

We provide NG_ASYNC_VALIDATORS instead of NG_VALIDATORS in this case. And since we already have the UsernameValidatorService (which implements the Validator interface).

Note: UsernameValidatorService is providedIn: 'root', which means the Injector has the service instance with it. So we just say use that same instance of UsernameValidatorService by using the useExisitng property.

Angular takes care of subscriptions of these validators so we don't have to worry about cleaning the subscriptions later.

Code and Demo

Code: https://codesandbox.io/s/angular-async-validator-5idsm

Note: Open in a new window to see the demo properly.

Make sure to not just use the code as-is. For the scope of this post, things are kept simple and straightforward. Take some time to see if you can improve something in the code before you use it.

Connect with me

Twitter
Github
Linkedin
Cardify - Dynamic SVG Images for Github Readmes

Do add your thoughts in the comments section.
Stay Safe ❤️

How I implemented sticky columns in tables using directives - Angular!

Adithya Sreyaj — Fri, 19 Nov 2021 17:25:47 +0000

How to create sticky columns in Angular using directives. Implementing tables with sticky columns can be tricky especially when you have to make multiple columns sticky. Using directives, we can easily implement sticky columns.

I can't emphasize more the power of directives in Angular. I've written a couple of articles showcasing how one can actually use it to implement really cool stuff. You can check some use-cases for directives here: Angular Directive Showcase.

Tables with sticky columns

We make use of the position: sticky CSS property to make an element sticky. Read more about sticky positioning at MDN.

.sticky {
  position: sticky;
  left: 0;
}

For the sticky position to work properly, at least one of top, right, bottom, or left should be specified.

The problem

Making the first column in a table sticky is super simple, you basically add the sticky class to the column.

When two columns need to stick to the left, we can't just add the sticky class to both of the columns. This is how it looks if you did so:

Here you can see the Manager column overlapping with the Company column. This is because we gave both the columns left:0.

To make it work as expected, the styles should be like this:

.company {
  position: sticky;
  left: 0px;
}

.manager {
  position: sticky;
  left: 120px; // <-- width of the company column
}

What we did here is we added the offset of the Manager column as the left property value.

Sticky Calculations

For calculating the left value, we need to find the x value of the column. If we look at the first column Company and get its offset from the left side.

We expect the x value to be 0 but we get 85 here. This is because the x value is calculated from the left side of the window to the column. For getting the left threshold of the column with respect to the table, we need to find the x value of the table. Once we get the table's offset, we can subtract it from the offset of the column.

Example of the calculation:

Position of Table = (100, 200) // <-- x = 100
Position of Company = (100, 200) // <-- x with respect to table = 100 - 100 = 0
Position of Manager = (300, 200) // <-- x with respect to table = 300 - 100 = 200

Sticky Directive

We are going to create a directive to do just that. The directive can then be placed on the columns which need to be sticky. If you are thinking about why a directive for this particular use case, the calculation of the sticky thresholds can be done easily. Creating a directive makes it easy to re-use the functionality for different elements.

import { CommonModule } from '@angular/common';
import {
  AfterViewInit,
  Directive,
  ElementRef,
  NgModule,
  Optional,
} from '@angular/core';

@Directive({
  selector: '[stickyTable]',
})
export class StickyTableDirective {
  constructor(private el: ElementRef) {}

  get x() {
    return (this.el.nativeElement as HTMLElement)?.getBoundingClientRect()?.x;
  }
}

@Directive({
  selector: '[sticky]',
})
export class StickyDirective implements AfterViewInit {
  constructor(
    private el: ElementRef,
    @Optional() private table: StickyTableDirective
  ) {}

  ngAfterViewInit() {
    const el = this.el.nativeElement as HTMLElement;
    const { x } = el.getBoundingClientRect();
    el.style.position = 'sticky';
    el.style.left = this.table ? `${x - this.table.x}px` : '0px';
  }
}

@NgModule({
  declarations: [StickyDirective, StickyTableDirective],
  imports: [CommonModule],
  exports: [StickyDirective, StickyTableDirective],
})
export class StickyDirectiveModule {}

If you look at the code above, we have two directives:

StickyDirective
StickyTableDirective

The second directive is really interesting here. Why do we need a second directive?
We have a separate directive that can be placed on the table to get the offset of the table. The directive can then be injected inside the main StickyDirective.

  constructor(
    private el: ElementRef,
    @Optional() private table: StickyTableDirective
  ) {}

We mark the StickyTableDirective as @Optional() so that we can add the StickyDirective directive on other elements and it can automatically be sticky with the default value.

Ref: https://angular.io/guide/hierarchical-dependency-injection#optional

Here is how we use it in HTML.

<table stickyTable>
  <tr>
    <th sticky>Company</th>
    <th sticky>Manager</th>
    <th>Employees</th>
    <th>Contractors</th>
    <th>Jobs</th>
    <th>Contracts</th>
    <th>Vacancy</th>
    <th>Offices</th>
  </tr>
  <ng-container *ngFor="let item of data">
    <tr>
      <td sticky style="min-width:200px">{{ item.company }}</td>
      <td sticky>{{ item?.manager }}</td>
      <td> {{ item?.employees }} </td>
      <td> {{ item?.contractors }} </td>
      <td> {{ item?.employees }} </td>
      <td> {{ item?.contractors }} </td>
      <td> {{ item?.employees }} </td>
      <td> {{ item?.contractors }} </td>
    </tr>
  </ng-container>
</table>

We add the stickyTable directive to the table and the sticky directive to the column.

Demo and Code

Stackblitz Link

Improvements

A lot of improvements can be made to this directive to make it more re-usable like:

Add support for other directions.
Generalize the StickyTableDirective to be able to use it on other elements as well.

For the sake of keeping the example here simple, I've kept it simple.

Connect with me

Twitter
Github
Linkedin
Cardify - Dynamic SVG Images for Github Readmes

Do add your thoughts in the comments section.
Stay Safe ❤️

How To Implement Heatmap In Tables Using Directives In Angular

Adithya Sreyaj — Tue, 12 Oct 2021 14:11:37 +0000

Let's see how easy it is to add heatmaps to tables in Angular using Directives. We'll go for a really simple and elegant solution to have separate heatmap colors to different columns in the table.

As I always say, Directives are a really powerful feature of Angular. It can be used as an elegant solution to implement a lot of cool functionalities. You can clearly see why the directive approach makes more sense when you reach the end of the post.

Heatmaps in table

Even though it's not that often we see heatmaps in tables, but heatmaps can really add some value in terms of visualization. It would make sense in data sets where there is some kind of comparison or range.

Why Directives?

If you have this question in mind, here are some reasons which justify why creating a directive for implementing this feature will make sense.
The logic can be completely moved outside of the component, making it simpler and leaner. If the logic is separated from the component, that means it's more reusable.
When something is built in a re-usable manner, it will be easy to scale and maintain.

Heatmap Logic

For implementing this functionality let's look at what exactly needs to be done here. So basically, heatmaps give the user idea of the magnitude of something by variation in color or hue.

So If we have a set of numbers:

[1,2,3,4,5,6,7,8,9,10]

Here based on the value we can manipulate the intensity of a color. Meaning 1 will be the lightest shade of the color and 10 will be the color itself. So we just need to map the values to the intensity of the colors here. We can also have the opposite condition as well.

There are different ways to implement this.

1. Using Alpha Channel

We can easily implement heatmaps using RGBA or HSLA by just changing the alpha channel meaning the transparency of the color.

I am not going with this approach as we are also trying to generate accessible text colors based on the background color. This will ensure the text will remain readable for all the color stops.

2. Using HSL Color Expression

Here I am gonna be using HSL color expression to easily get the right color for each value by manipulating the L (Lightness) parameter.
HSL is a really good way to express colors and manipulating the colors is very easy with it.

HSL stands for Hue Saturation Lightness and it can also have an Alpha channel with HSLA

So the idea here is to find the Lightness factor for each value. Here's how we can do it.

So here the original color value is first parsed to HSLA:

hsla(234, 77%, 46%, 1) --> Lightness = 46%

We have the min possible value for Lightness ie 0.46. So the highest value will have a lightness of 46% and for other values, it will be higher. When lightness increases it moves nearer to White.

Here is the formula:

const color = '#1b2dd0';
const [h,s,l,a] = parseHSLA(color); // <-- [234, 0.77,0.46,1]
const highestValue = 10;
const maxLightness = 1 - l; // <-- 1 - 0.46 = 0.54

const lightness = 1 - (value * maxLightness / highestValue);

// 1 --> 1 - (1 * 0.54 / 10) = (1 - 0.05) ~ 95% 
// 5 --> 1 - (5 * 0.46 / 10) = (1 - 0.23) ~ 77%
// 10 -> 1 - (10 * 0.54 / 10) = (1 - 0.54) ~ 46%

Here 10 will be the lowest number and hence we need a very light color so 95% will make it very light.
Lightness % as it increases makes the color whiter.

So now we have the logic in place, let's start with the directives!

Creating Heatmap Directives

So I mentioned "Directives" (plural) as we will be creating multiple directives for this functionality. To be specific 3 of them. Out of the 3, two of them are just for tagging the element and setting some metadata:

Heatmap Table
Heatmap Column
Heatmap Cell

Here is how we will use the directives in the template:

<table heatMapTable>
  <tr>
    <th>Company</th>
    <th>Manager</th>
    <th [heatMapColumn]="options.employees"  id="employees">
        Employees
    </th>
    <th [heatMapColumn]="options.contractors" id="contractors">
        Contractors
    </th>
  </tr>
  <ng-container *ngFor="let item of data">
    <tr>
      <td>{{ item.company }}</td>
      <td>{{ item?.manager }}</td>
      <td [heatMapCell]="item.employees" id="employees">
         {{ item?.employees }}
      </td>
      <td [heatMapCell]="item.contractors" id="contractors">
        {{ item?.contractors }}
      </td>
    </tr>
  </ng-container>
</table>

Heatmap Cell Directive

@Directive({
  selector: '[heatMapCell]',
})
export class HeatmapCellDirective {
  @Input('heatMapCell')
  heatMap = 0;

  @Input('id')
  colId = null;

  constructor(public el: ElementRef<HTMLElement>) {}
}

We have an input to pass the value into the directive and also accept the id of the column to which the cell belongs in the table. We inject the ElementRef so that we can manipulate the element later.

Heatmap Column Directive

@Directive({
  selector: '[heatMapColumn]',
})
export class HeatmapColumnDirective {
  @Input('id')
  colId = null;

  @Input('heatMapColumn')
  options = {};
}

Here we can pass options for styling like the color etc and also the id of the column.

Heatmap Table Directive

This is the main directive where all the work is done. This directive is placed on the table. And the other directives are placed on the column and the cells.

Here we can see how we can access child directives from the parent directive using ContentChildren.

@Directive({
  selector: '[heatMapTable]',
})
export class HeatmapTableDirective implements AfterViewInit {
  @ContentChildren(HeatmapCellDirective, { descendants: true })
  heatMapCells: QueryList<HeatmapCellDirective>; // <-- Get all the cells
  @ContentChildren(HeatmapColumnDirective, { descendants: true })
  heatMapColumns: QueryList<HeatmapColumnDirective>; // <-- Get all the columns

  highestValues = {};
  cells: HeatmapCellDirective[] = [];
  columns: HeatmapColumnDirective[] = [];
  config = {};

  ngAfterViewInit() {
    this.cells = this.heatMapCells.toArray();
    this.columns = this.heatMapColumns.toArray();
    this.setOptions();
    this.calculateHighestValues();
    this.applyHeatMap();
  }

  private setOptions() {
    this.columns.forEach((col) => {
      this.config = {
        ...this.config,
        [col.colId]: col.options,
      };
    });
  }

  private calculateHighestValues() {
    return this.cells.forEach(({ colId, heatMap }) => {
      if (!Object.prototype.hasOwnProperty.call(this.highestValues, colId)) {
        this.highestValues[colId] = 0;
      }
      if (heatMap > this.highestValues?.[colId])
        this.highestValues[colId] = heatMap;
    });
  }

  private applyHeatMap() {
    this.cells.forEach((cell) => {
      const { bgColor, color } = this.getColor(cell.colId, cell.heatMap);
      if (bgColor) cell.el.nativeElement.style.backgroundColor = bgColor;
      if (color) cell.el.nativeElement.style.color = color;
    });
  }

  private getColor(id: string, value: number) {
    const color = this.config[id].color;
    let textColor = null;
    let bgColor = null;
    if (color != null) {
      const [h, s, l, a] = parseToHsla(color);
      const maxLightness = 1 - l;
      const percentage = (value * maxLightness) / this.highestValues[id];
      const lightness = +percentage.toFixed(3);
      bgColor = hsla(h, s, 1 - lightness, a);
      textColor = readableColor(bgColor);
    }
    return {
      bgColor,
      color: textColor,
    };
  }

Let me break down the code.

Get access to the cells and columns

We get access to the cells to which the heatmap needs to be applied:

@ContentChildren(HeatmapCellDirective, { descendants: true })
  heatMapCells: QueryList<HeatmapCellDirective>;

This heatMapCells variable will have the list of td to which the heatMapCell was applied. Make sure to set { descendants: true }.

Note: If true include all descendants of the element. If false then only query direct children of the element.

Save the options for each column

We can save the options provided for each column in an object. Currently, we are only configuring the color, but this object can be used for all kinds of different options for customizing the heatmap for each column.

config = {
    "employees": {
        "color": "#000fff"
    },
    "contractors": {
        "color": "#309c39"
    }
}

Calculate the Highest Value for each column

We can now calculate the highest value for each column and save it in an object with the colId as the key.

highestValues = {
   employees: 1239,
   contractors: 453
}

Applying the Heatmap styles

We can now loop through the cells and then apply backgroundColor and color to the cell. Since we have injected the ElementRef in the cell, we can use the el property to modify styles:

cell.el.nativeElement.style.backgroundColor = 'blue';

We have a helper function which finds the color for each cell based on the logic we have discussed above:

  private getColor(id: string, value: number) {
    const color = this.config[id].color;
    let textColor = null;
    let bgColor = null;
    if (color != null) {
      const [h, s, l, a] = parseToHsla(color);
      const maxLightness = 1 - l;
      const percentage = (value * maxLightness) / this.highestValues[id];
      const lightness = +percentage.toFixed(3);
      bgColor = hsla(h, s, 1 - lightness, a);
      textColor = readableColor(bgColor);
    }
    return {
      bgColor,
      color: textColor,
    };
  }

The color manipulation is done using a super simple library color2k which provides a lot of utilities to mess with colors.

We have used something called readableColor() which returns black or white for best contrast depending on the luminosity of the given color. This will make our heatmap more accessible.

Demo and Code

Stackblitz Link

Final Thoughts

As you can see, there is not much code in the component. All the logic is beautifully handled inside the directive. The only complex stuff going on in the directive is finding the colors. Everything else is straightforward.

This is a very basic implementation and not perfect too. To make it better, we might have to add some validation and error handling as well. Also, this can be extended by providing more options like Ascending/Descending heatmaps, color ranges, positive and negative heatmaps, and more.

The whole idea of the blog post is to showcase how a directive can be used for implementing this feature.

Connect with me

Twitter
Github
Linkedin
Compito - Open source project management app
Buy Me a Pizza

Do add your thoughts in the comments section.
Stay Safe ❤️

Creating custom form controls using ControlValueAccessor in Angular

Adithya Sreyaj — Mon, 12 Jul 2021 15:18:13 +0000

How to create custom form controls in Angular using ControlValueAccessor? We can create custom form components and connect them to either template-driven forms or reactive forms.

So when I say custom form controls, I am talking about those elements that are not your typical controls like input fields, radio buttons, or checkboxes. For example, a star rating component or a knob. These are not available out of the box.

We can also make sections in a form as child components which can be then used as custom form controls. In this way, larger forms can be broken down into manageable pieces.

For all the default form controls like input field, radio button, checkbox, select dropdown, etc, custom control value accessors are already written and shipped with Angular. Eg: CheckboxControlValueAccessor

We will be talking more about ControlValueAccessor it and how to use it to create really cool form.

Custom Form Elements

When we hear the term form, we would be thinking of few input text fields and maybe some checkboxes and stuff. But when it comes to really complex forms where we have a lot of custom buttons, lists, and selections, the whole form will become very complex. And managing such a complex form would be a problem.

When there are a lot of custom form elements or when the form starts to get big, it's probably a good idea to break it into smaller sections. Placing everything in a single template would make it really messy.

We can break down the form into multiple components and then connect it with the main form.

Custom form control in Angular

ControlValueAccessor is something that comes with Angular. It acts as a bridge between DOM elements and the angular Form API.

So If you have a custom element that you would like to connect to your form, you have to make use of ControlValueAccessor to make the element compatible with Angular Forms API. Doing so will enable the element to be connected using ngModel (Template Driven Forms) or formControl (Reactive Forms).

Let's take a look at how do we create a custom form control.

When I started with Angular, I was not aware that something like this existed. I remember when I wrote child components for forms and used @Input() and @Output() to receive and send form values to the parent form component. I used to listen to the changes in the child component and then emit the values to the parent.

In the parent, the values will be taken and used to patch the form. This was until I came across the magical ControlValueAccessor. No more inputs and outputs, everything just works.

Implement the ControlValueAccessor interface.

Step 1 is to implement the interface in the custom component. The interface would ask us to add few methods in our class.

interface ControlValueAccessor {
  writeValue(obj: any): void
  registerOnChange(fn: any): void
  registerOnTouched(fn: any): void
  setDisabledState(isDisabled: boolean)?: void
}

Let us see what each of the methods is doing. Once we are clear on how things are, we can dive into the implementation.

writeValue() - this function is called by the Forms API to update the value of the element. When ngModel or formControl value changes, this function gets called and the latest value is passed in as the argument to the function. We can use the latest value and make changes in the component. (ref)
registerOnChange() - we get access to a function in the argument that can be saved to a local variable. Then this function can be called when there are any changes in the value of our custom form control. (ref)
registerOnTouched() - we get access to another function that can be used to update the state of the form to touched. So when the user interacts with our custom form element, we can call the saved function to let Angular know that the element has been interacted with. (ref)
setDisabledState() - this function will be called by the forms API when the disabled state is changed. We can get the current state and update the state of the custom form control. (ref)

Once we implement these functions, the next step is to provide the NG_VALUE_ACCESSOR token in the component's providers array like so:

const COUNTRY_CONTROL_VALUE_ACCESSOR: Provider = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => CustomFormControlComponent),
  multi: true,
};

@Component({
  selector: 'app-country-selector',
  template: ``,
  providers: [COUNTRY_CONTROL_VALUE_ACCESSOR], // <-- provided here
})
export class CustomFormControlComponent implements ControlValueAccessor {}

Note: Here I created a provider constant and then passed it into the providers. Also you can see the use of forwardRef (ref) here. It is needed because we are referring to the CountrySelectorComponent class which is not defined before its reference.

So now that we know what each of these functions does, we can start implementing our custom form element.

Basic Form

We are going to take a look at the base form that we are gonna work with. We just have some basic input fields and 2 custom form elements.

{
    name: 'Adithya',
    github: 'https://github.com/AdiSreyaj',
    website: 'https://adi.so',
    server: 'IN',
    communications: [{
          label: 'Marketing',
          modes: [{
              name: 'Email',
              enabled: true,
            },
            {
              name: 'SMS',
              enabled: false,
            }],
        },
        {
          label: 'Product Updates',
          modes: [{
              name: 'Email',
              enabled: true,
            },
            {
              name: 'SMS',
              enabled: true,
            }],
        },
      ]
  }

This is how we need the data to be. Here the server and the communications fields are going to be connected to a custom form control. We are using Reactive Forms in the example.

Here is how our form will look like:

const form = this.fb.group({
    name: [''],
    github: [''],
    website: [''],
    server: [''],
    communications: [[]]
  });

and in the template

<form [formGroup]="form">
    <div class="form-group">
      <label for="name">Name</label>
      <input type="text" id="name" formControlName="name">
    </div>
    <div class="form-group">
      <label for="github">Github</label>
      <input type="url" id="github" formControlName="github">
    </div>
    <div class="form-group">
      <label for="website">Website</label>
      <input type="url" id="website" formControlName="website">
    </div>
    <div class="form-group">
      <label>Region</label>
      <app-country-selector formControlName="server"></app-country-selector>
    </div>
    <div class="form-group">
      <label>Communication</label>
      <app-communication-preference formControlName="communications"></app-communication-preference>
    </div>
  </form>

Notice in the above template we are directly using formControlName on the app-country-selector and app-communication-preference components. This will be only possible if those components are implementing the ControlValueAccessor interface. This is how you make a component behave like a form control.

Country Selector custom form control

We are going to see how to implement a cool country selector component as a custom form control that can be directly connected to a form. In this example, I'll be using Reactive Forms.

The component is pretty straightforward, we will give the user to select one country from a given list. The behavior is similar to a radio button. The only difference here is that we are using our own custom component to implement this design.

As always, I start by creating a new module and component for our country selector form control.

Here is how we implement the ControlValueAccessor for our country selector component.

const COUNTRY_CONTROL_VALUE_ACCESSOR: Provider = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => CountrySelectorComponent),
  multi: true,
};

We provide it in the providers array inside the @Component decorator.

@Component({
  selector: 'app-country-selector',
  template: `
    <div>
      <ng-container *ngFor="let country of countries">
        <button [disabled]="disabled" (click)="selectCountry(country.code)"
             [class.selected]="!disabled && selected === country.code">
          <ng-container *ngIf="!disabled && selected === country.code">
            <!-- Checkmark Icon -->
          </ng-container>
          <img [src]="...flag src" [alt]="country.name" />
          <p>{{ country?.name }}</p>
        </button>
      </ng-container>
    </div>
  `,
  providers: [COUNTRY_CONTROL_VALUE_ACCESSOR],
})
export class CountrySelectorComponent implements ControlValueAccessor {
  countries = [
    { code: 'IN', name: 'India' },
    { code: 'US', name: 'United States' },
    { code: 'GB-ENG', name: 'England' },
    { code: 'NL', name: 'Netherlands' },
  ];
  selected!: string;
  disabled = false;
  private onTouched!: Function;
  private onChanged!: Function;

  selectCountry(code: string) {
    this.onTouched(); // <-- mark as touched
    this.selected = code;
    this.onChanged(code); // <-- call function to let know of a change
  }

  writeValue(value: string): void {
    this.selected = value ?? 'IN';
  }
  registerOnChange(fn: any): void {
    this.onChanged = fn; // <-- save the function
  }
  registerOnTouched(fn: any): void {
    this.onTouched = fn; // <-- save the function
  }
  setDisabledState(isDisabled: boolean) {
    this.disabled = isDisabled;
  }
}

If the user has given an initial value to server in the form, we will get the initial value in the writeValue() method. We get the value and assign it to our local variable selected which manages the state.

When the user clicks on a different country, we mark the field as touched and then assign the value to the selected variable. The main part is we also call the onChanged method and pass the newly selected country code. This will set the new value as the form control's value.

By using the argument from setDisabledState() method we can implement the disabled state for our component. So If we trigger disable from the form using:

this.form.get('server').disable();

Doing the above will trigger a call to setDisabledState() method where the state isDisabled is passed, which is then assigned to a local variable disabled. Now we can use this local variable to add a class or disable the button.

setDisabledState(isDisabled: boolean) {
    this.disabled = isDisabled;
  }

That is all! We have successfully created a custom form control. Check the GitHub repo for full code.

Communication Preferences custom form control

Now let's see how to implement the second custom form control in our form, which allows user to select their communication preferences.

This is also a very simple component that has a bunch of checkboxes. We could have added this in the same parent component where the form is initialized. But by creating a separate component, we are making it more maintainable.

const COM_PREFERENCE_CONTROL_VALUE_ACCESSOR: Provider = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => CommunicationPreferenceComponent),
  multi: true,
};

@Component({
  selector: 'app-communication-preference',
  template: `<div>
    <ul>
      <ng-container *ngFor="let item of options; index as i">
        <li>
          <p>{{ item?.label }}</p>
          <div>
            <ng-container *ngFor="let mode of item.modes; index as j">
              <div>
                <input
                  type="checkbox"
                  [id]="item.label + mode.name"
                  [(ngModel)]="mode.enabled"
                  (ngModelChange)="handleChange(i, j, $event)" />
                <label [for]="item.label + mode.name">{{ mode.name }}</label>
              </div>
            </ng-container>
          </div>
        </li>
      </ng-container>
    </ul>
  </div>`,
  providers: [COM_PREFERENCE_CONTROL_VALUE_ACCESSOR],
})
export class CommunicationPreferenceComponent implements ControlValueAccessor {
  options: CommunicationPreference[] = [];
  private onTouched!: Function;
  private onChanged!: Function;
  handleChange(itemIndex: number, modeIndex: number, change: any) {
    this.onTouched();
    this.options[itemIndex].modes[modeIndex].enabled = change;
    this.onChanged(this.options);
  }

  writeValue(value: any): void {
    this.options = value;
  }
  registerOnChange(fn: any): void {
    this.onChanged = fn;
  }
  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }
}

Again it's the same thing we are doing, we have an options variable that manages the local state of the component. When there is any value-change triggered by the form, we get the new value in the writeValue method, we update the local state with the changed value.
When the user makes any change, we update the local state and call the onChanged method and pass the updated state which updates the form as well.

Find the complete code for the component in the repo.

Final Thoughts

Angular makes it really easy to implement custom form control using ControlValueAccessor. By implementing few methods, we can directly hook our component to a Reactive or Template Driven form with ease.

We can write all sorts of crazy form elements and use them without writing logic to handle communication between parent and child. Let the forms API do the magic for us.

We can also use this approach to break sections of the form into their own individual component. This way if the form is big/complex, we can break then down into smaller components that can be easily managed.

Code and Demo

Github: https://github.com/adisreyaj/ng-custom-form-elements
Demo: https://ng-custom-form-elements.vercel.app/

Connect with me

Do add your thoughts in the comments section.
Stay Safe ❤️