Posts

Comparing for Loop with ES6 forEach Method

Image
J avaScript is a client-side scripting language (forget Node.js). When writing code, we should be careful because our code is supposed to run on all devices rather than just gaming laptops or MacBooks. We should not give much load to the browser. ES6 a.k.a ES2015 introduced a lot of features especially the array functions forEach , map , filter , etc. Many people believe forEach is an alternative for the for loop. Is that true? Let’s check some facts. Before starting, let’s check what is for loop and what is forEach. For Loop For is a keyword, to create looping statements, just like while and do…while. JS engine can directly understand what it is. forEach forEach is a function defined in Array.prototype , just like all other functions. The engine can’t understand it directly. It needs to get the function definition in order to execute it. For vs forEach Choosing one over another will have huge impact on performance. When you have to deal with an array o
Post a Comment
Read more

Adding Facebook Pixel in Angular 8

Image
Pixel is a tracking tool by Facebook, which will help you to track visitors and their activities in your website/ app. It also helps you to target those visitors when you advertise on Facebook. An Angular app is a Single Page Application (SPA) Like Google Analytics, Facebook Pixel won't work with SPA by default. Step 1 : Create and Configure an Angular App Create an Angular App by running the command ng new SampleApp Type  y  when it prompts whether routing should be enabled or not and choose your preferred style format. This will create an Angular App "SampleApp" and install all the dependencies in it. Now let's add some pages and set routing in our app. We are creating 2 components,  home  and  test .  Type the following command to create 2 components ng g c home && ng g c test This will create 2 components  home  and  test  and also it'll update  app.module.ts . Now let's make some edits in  app-routing.mod
5 comments
Read more

Adding Google Analytics in Angular 8

Image
As we all know, Google Analytics is the most used site analytics tool. It helps developers and site admins to keep track of user activities in their website and also it offers many features for us to evaluate our site's performance. An Angular app is a Single Page Application (SPA) and Google Analytics isn't designed to work with Single Page Applications. Let's see how we can add Google Analytics in Angular Application. Step 1 : Create and Configure an Angular App Create an Angular App by running the command ng new SampleApp Type y  when it prompts whether routing should be enabled or not and choose your preferred style format. This will create an Angular App "SampleApp" and install all the dependencies in it. Now let's add some pages and set routing in our app. We are creating 2 components, home and test .  Type the following command to create 2 components ng g c home && ng g c test This will create 2 compone
2 comments
Read more

Deploying Angular 8 Universal App to Firebase with CircleCI (Part 2)

Image
This is the continuation of Deploying Angular 8 Universal App to Firebase with CircleCI (Part 1) Step 5 : Register on CircleCI It’s time to Sign up on CircleCI. 1.Go to circleci.com/dashboard 2.Click Set Up Project on SampleApp. 3.Now Choose Linux as Operating System and Node as Language. 4.Then click on Start Building. Step 6 : Add Firebase Token to CircleCI Since we want to deploy to Firebase from CircleCI, we need a Firebase token which will be used by CircleCI to authenticate to Firebase. Open CMD in our project folder and type the following command firebase login:ci This will open browser and you have to authorize Firebase CLI there again. After you authorize Firebase CLI, you will see a token in CMD. Copy the token. Now follow below steps to set the token as an environment variable in CircleCI. 1.Go to circleci.com/dashboard and click on the gear icon in SampleApp. 2.Navigate to Environment Variables tab and click Add Variable.
Post a Comment
Read more

Deploying Angular 8 Universal App to Firebase with CircleCI (Part 1)

Image
This is the first part of a tutorial which will teach you how to Deploy an Angular Universal App to Firebase via CircleCI. Here's a small introduction of things I mentioned here. Angular Angular is a TypeScript based open source web application framework led by the Angular Team at Google. Angular Universal Angular Universal is a server side rendering solution for Angular applications for SEO purposes. Firebase Firebase is a mobile and web application development platform developed by Firebase Inc in 2011, then acquired by Google in 2014. CircleCI CircleCI is a platform which provides continuous integration of code from multiple developers. Before you start These are the prerequisites. An Editor ( VS Code  is recommended). Download & Install  NodeJS . Install Angular CLI globally. Sign up on  Github . Install and configure a Github client to run git commands. Sign up on  CircleCI . To Install Angular CLI, run the following comman
1 comment
Read more

1 comment
Read more