Modern Software Development - Angular, React, Javascript, Java, CI/CD and other stuff

You users don't like when there is no indication from the application about what is happening. For example when you are loading data from the API and user has no clue about what is happening. I like displaying a small loading icon somewhere at the top to keep the aware about the application state. To display a small loading indicator at the top of the screen for all API calls untill they return back we can write a small service, an interceptor and a component. I like something like the following Following is a very simple interceptor import {Injectable} from '@angular/core' ; import {HttpEvent, HttpEventType, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http' ; import {Observable} from 'rxjs' ; import { tap } from 'rxjs/operators' ; import {LoadingService} from './loading.service' ; @Injectable () export class LoadingInterceptor implements HttpInterceptor { constructor ( private loadingService : LoadingServ

Error handling is one of the most cruicial but neglected item of frontend development. There are number of errors that can happen on frontend and they are of different types. Following are different types of errors that our users can encounter Javascript errors e.g when you divide a number by a dynamic input and the input is 0 Errors in calling server APIs. I want to discuss the server errors in this article. When we call an API there can be several problems, for example on a login authentication form when you call your server API to authenticate user, you can have following possibilities The device has lost internet connection The code on server is not working properly You have made a typo in the API end point name The user account is not valid and server returns an error code or an error status All these scenarios must be handled and gracefully inform the user about the error with a suggestion to recover from the error state. Obviously you cannot write code in all

Recently I came across a requirement in which I had to implement a multi-column layout with Dynamic Data. At several places I had to present the data into two columns and at some other places in three or even four columns. But one thing was common which was my input. My input was always an array of some kind of objects. The application I was writing was an Angular7 based dashboard application with lots of different ways of presenting data. I used Material UI for theming and fontaewsome for icons. I had to present data in column layout similar to the following In some other places I had to break data into 3 or 4 columns. Plus the layout was different at all places. For example as in the following screenshot. There were several other places where I had to do the same but use different UI elements, colors and designs. My only option for all such screen was to either write a recursive template for each of them or use a nested loop e.g a nested *ngFor all these screens.

The answer to this question is both Yes and No. Similar to many other popular programming languages like Java, Typescript is also trying to combine best of both worlds for its users. Typescript is a multi-paradigm programming language and it is has influences from Object Oriented Programming as well as fucntional programming paradigm. One of the most important concept of functional paradigm is that the languages following this paradigm ensure that the applications builts using their type system are free of side-effects. Since Typescript interoperate with Javascript, it has lost some of its freedom and unlike pure functional languages like Haskell it cannot guarantee that our applications will be free from side-effects. Languages like Haskell ensure this through their type system. We can however use FP techniques to improve our type safety. For example look at the following code snippet findNumber (numbers: Number[], input: number): number { if(numbers.length == 0) { throw

Introduction Did you ever came across a situation when you created a really nice UI component for an application and wanted to use it in another application but both application were using an entirly different framework due to which it was difficult for you to port the component from one application to the other.  Web components are set of web APIs that allows you to create custom, reusable components for web applications. These custom components add in the HTML vacabulary and can be used in any Javascript library or framework. So they let developers easily extend HTML with new elements. Magic behind the elements So how are we as developers are enable to create new custom elements and use them anywhere we want. If you run your developer console and run following window.customElements You will find a bunch of properties and mathods. I am sure you have a clue about how you can extend your browser's html vacabulary. Defining a new HTML element Custom el

Have you ever felt the need of writing a component like the following <my-component> <div> Some text here </div> <div> Some text here </div> <div> Some text here </div> <div> Some text here </div> </my-component> Now your intention here is to have your custom component and keep having the additional html that you have written between statring and ending tags. If yes, then you are on the right place. Angular provides an element called ng-content which can used to write configurable components. This is called Component Projection, neaning the content that will be procvided inside the opening and closing brackets will be projected. It will be rendered inside a <ng-content> element. It means that you must include a <ng-content> tag somewhere in your components html template so that the provided content can be projected inside it. So your my-component should have a template like the following // myCompo

This is an angular element which is used to render HTML, it never gets displayed directly. It is used by structural directives like ngIf and ngFor. We can use them directly in some cases e.g when we want to reuse a template multiple times in our code. Suppose we have following code <ng-template> <p> Hello World! </p> </ng-template>  When it will run the code inside it will not get displayed. If you will inpect the HTML in your developer console you will see that the above will get replaced by a comment and you will find only following in its place. <!----> Now this doesn't make sense that angular is giving a component which just eats up your code and does nothing. This component is actually used to create a reusable template which can be accessd via a tempalte reference. It is used internally by angular to replace the structure directives with it and later at run time is converted into a comment. So for example if you have an ngFor in

Steps to deploy a simple web server on EC2 instance 1) Setup your AWS account Go to  https://aws.amazon.com  to create your new account. Your new account is the root user and have permissions to do absolutely anything with your account. It is always a good idea to create users with different permissions for you account. 2) Create new user with limited permissions. Login to use aws console and seach IAM (Identiy and access mangemnet). Click on users and click on "Addd User" button to add new user. Make sure that Programmatic access (Enables an access key ID and secret access key for the AWS API, CLI, SDK, and other development tools) checkbox is enabled. In the permissions area make sure to select following permissions AmazonEC2FullAccess AmazonS3FullAccess AmazonRDSFullAccess AmazonCloudWatchFullAccess IAMFullAccess Select a name for your permission group and finish the process. Note down the access key and secret, they will never appear in front of you again.