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

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.

This post is for those who want to use html5 canvas for drawing. The canvas API now has built in methods to create lines with dashes. The method is called setLineDash. Following is the code sample to create dashed line. var canvas = document . getElementById ( "canvas" ); var ctx = canvas . getContext ( "2d" ); ctx . setLineDash ([ 5 , 3 ]); /*Dash width and spaces between dashes.*/ ctx . beginPath (); ctx . moveTo ( 0 , 100 ); ctx . lineTo ( 400 , 100 ); ctx . stroke (); If you want to draw lines having a custom style there is no methos in the API. But fortunately there is a way to achieve this. Following is a description about how I achieved this. You can set the stroke pattern on canvas context. Stroke pattern can be created using any image. You create image for your custom pattern and set strokeStyle of the context like the following: var linePattern; imageToUsedAsPattern.onload = function() { linePattern = context.createPattern(imageToU

You intercept an HTTP call when you want to make changes in the call before it can acutally leave your user's browser and take your request to the server. There are several use cases when you want to do this for example in an Angular1.2 based application we wanted to append API path prefix "api" in all calls. We used standard AngularJs $httpProvider to configure the interceptor. There are multiple other scenarios in which you may want to intercept http calls, for example: Adding authentication token to every request Modifying headers of each call according to your backend's needs Displaying a custom loading message on each request Handling API errors You can either use already available libraries in your project to intercept calls, but if you don't want to add another external dependency in your application, follow these simple steps to add one or more http interceptors in your application. Step 1: Write a class that extends HttpInterceptor interf