DEV Community: Salim Chemes

Open URLs in Different Environments with Ease

Salim Chemes — Fri, 18 Oct 2024 13:54:46 +0000

Do you often need to open the same URL in different environments? I created a Chrome extension to simplify this process for you. With this extension, you can open the current URL in a new tab, replacing only the host URL while keeping the rest of the path intact.

When is this helpful?
This extension is particularly useful when you're working on localhost and need to open the exact same URL in another environment, such as a staging or production server.

Give it a try
https://chromewebstore.google.com/detail/open-environment-extensio/agnjjkhbkmdffjpgbcbbkkolakefjdjd

Generating text description from youtube link using Angular, Gemini and Netlify

Salim Chemes — Wed, 25 Sep 2024 17:55:53 +0000

In this post we will implement an application to generate ai description from a youtube link using:

angular with primeng for the ui
gemini to generate the description
netlify for ci/cd

Create app using angular cli

ng new angular-youtube-description

Add required dependencies

gemini

npm i @google/generative-ai

primeng

npm install primeng
in angular.json add

...
"styles": [
    "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
    "node_modules/primeng/resources/primeng.min.css",
    ...
]

and in styles.css add

@import "primeng/resources/themes/lara-light-blue/theme.css";
@import "primeng/resources/primeng.css";

Adding initial changes on app.component.ts

Let's start adding some changes into app.component.ts. Each property has a comment with an explanation

import { CommonModule } from '@angular/common';
import { Component, inject, OnInit, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { GoogleGenerativeAI } from '@google/generative-ai';
import { FormsModule } from '@angular/forms';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { take } from 'rxjs';
import { ButtonModule } from 'primeng/button';
import { InputTextModule } from 'primeng/inputtext';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,
    CommonModule,
    FormsModule,
    HttpClientModule,
    ButtonModule,
    InputTextModule
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent implements OnInit {
  generatedDescription = signal<string | undefined>(undefined); // to see the description response in the template
  videoUrl = signal<string | undefined>(undefined); // url we want to  send to gemini
  error = signal<string | undefined>(undefined); // to display an error in template when failing
  isLoading = signal<boolean | undefined>(undefined); // to display in template when waiting for gemini response
  #genAI: GoogleGenerativeAI | undefined; // to build a gemini model and generate content from prompt
  #youtubeApiKey: string | undefined = ''; // add youtube key required to get video data
  #geminiApiKey: string | undefined = ''; // add gemini key required to get gemini response
  #http = inject(HttpClient); // to make a request to youtube video so we can get title and description to send to gemini

  ngOnInit() {
    this.#genAI = new GoogleGenerativeAI(this.#geminiApiKey!);
  }

Generating required key for gemini

go to Google AI Studio.
login with your Google account.
create an API key.
once you get the key, assign it to #geminiApiKey in app.component.ts

Generating required key for youtube

follow this instructions https://developers.google.com/youtube/v3/getting-started
once you get the key, assign it to #youtubeApiKey in app.component.ts

Adding logic to get youtube video data and gemini response

getVideoDetails(videoUrl: string | undefined): we make a request to get youtube title and description so we can create gemini prompt. Since we need a videoId we added extractVideoId(url: string) to extract it from url

generateDescription(title: string, originalDescription: string): in this method we create prompt to request gemini. We need to specify a model as parameter, in this case we use 'gemini-pro'. Finally we execute generateContent to assign the response to generatedDescription signal so we can display it in the template

import { CommonModule } from '@angular/common';
import { Component, inject, OnInit, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { GoogleGenerativeAI } from '@google/generative-ai';
import { FormsModule } from '@angular/forms';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { take } from 'rxjs';
import { ButtonModule } from 'primeng/button';
import { InputTextModule } from 'primeng/inputtext';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,
    CommonModule,
    FormsModule,
    HttpClientModule,
    ButtonModule,
    InputTextModule
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent implements OnInit {
  generatedDescription = signal<string | undefined>(undefined);
  videoUrl = signal<string | undefined>(undefined);
  error = signal<string | undefined>(undefined);
  isLoading = signal<boolean | undefined>(undefined);
  #genAI: GoogleGenerativeAI | undefined;
  #youtubeApiKey: string | undefined = ''; // add youtube key required to get video data
  #geminiApiKey: string | undefined = ''; // add gemini key required to get gemini response);
  #http = inject(HttpClient);

  ngOnInit() {
    this.#genAI = new GoogleGenerativeAI(this.#geminiApiKey!);
  }

  getVideoDetails(videoUrl: string | undefined): void {
    this.error.set(undefined);
    const videoId = this.extractVideoId(videoUrl!);
    if (!videoId) {
      this.error.set('Invalid YouTube URL');
      return;
    }
    const url = `https://www.googleapis.com/youtube/v3/videos?part=snippet,contentDetails,statistics&id=${videoId}&key=${
      this.#youtubeApiKey
    }`;
    this.isLoading.set(true);
    this.#http
      .get(url)
      .pipe(take(1))
      .subscribe({
        next: (response: any) => {
          const videoData = response.items[0];
          this.generateDescription(
            videoData.snippet.title,
            videoData.snippet.description
          );
        },
        error: () => {
          this.isLoading.set(false);
          this.error.set('Unable to fetch video details');
        },
      });
  }

  private generateDescription(
    title: string,
    originalDescription: string
  ): void {
    const prompt = {
      input: `Generate a description for a YouTube video with the title: "${title}" and the following description: "${originalDescription}"`,
    };
    this.#genAI
      ?.getGenerativeModel({ model: 'gemini-pro' })
      .generateContent(prompt.input)
      .then((response: any) => {
        this.generatedDescription.set(
          response.response.candidates[0].content.parts[0]?.text
        );
        this.isLoading.set(false);
      })
      .catch(() => {
        this.isLoading.set(false);
        this.error.set('Unable to get response from Gemini AI model');
      });
  }

  private extractVideoId(url: string): string | null {
    const regex =
      /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
    const match = url.match(regex);
    return match ? match[1] : null;
  }
}

Updating template on app.component.html

<div class="app-container">
  <div class="app">
    <h1>Enter youtube video url</h1>
    <input
      type="text"
      pInputText
      [(ngModel)]="videoUrl"
      placeholder="Enter youtube video url"
    />
    <p-button
      type="submit"
      [disabled]="isLoading()"
      (click)="getVideoDetails(videoUrl())"
    >
      Get description
    </p-button>
    @if(isLoading()){
    <p class="loading">Generating description from youtube video...</p>
    } @else if(generatedDescription()){
    <p>{{ generatedDescription() }}</p>
    <p><i>Generated description by Gemini</i></p>
    } @if(error()){
    <p class="error">{{ error() }}</p>
    }
  </div>
</div>

Updating styles on app.component.css

.app-container {
  justify-content: center;
  align-items: center;
}

.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-inline: 20%;
}

p-button {
  margin-top: 20px;
}

input {
  width: 350px;
}

.error {
  color: red;
}

.loading {
  font-style: italic;
}

Deploying app using Netlify

We don't want to expose our keys in our code, so we will use @ngx-env/builder to add our keys in a .env file to finally create environment variables on Netlify portal
1 - npm i @ngx-env/builder and follow documentation
2 - update env.d.ts

declare interface Env {
  readonly NODE_ENV: string;
  // Replace the following with your own environment variables.
  NG_APP_YOUTUBE_API_KEY: string;
  NG_APP_GEMINI_API_KEY: string;
  [key: string]: any;
}

2 - add your key to .env file (IGNORE IT - DO NOT PUSH IT)

NG_APP_YOUTUBE_API_KEY=add your youtube api key here
NG_APP_GEMINI_API_KEY=add your gemini api key here

3 - update app.component.ts to use env variables

#youtubeApiKey: string | undefined = import.meta.env.NG_APP_YOUTUBE_API_KEY;
#geminiApiKey: string | undefined = import.meta.env.NG_APP_GEMINI_API_KEY;

4 - deploy to Netlify following these steps

5 - add environment variables in Netlify
Go to site configuration

6 - deploy your website

And that is it! Thanks for reading!

links:

deployed website: https://unrivaled-choux-3b74f5.netlify.app/
repo: https://github.com/salimchemes/angular-gemini
gemini: https://gemini.google.com/
@ngx-env/builder: https://www.npmjs.com/package/@ngx-env/builder
primeng: https://primeng.org/

ResizeObserver in Angular

Salim Chemes — Mon, 17 May 2021 10:48:37 +0000

In this post we will review how to implement ResizeObserver in Angular applications

What is ResizeObserver?
Based on the documentation

The ResizeObserver interface reports changes to the dimensions of an Element's content or border box, or the bounding box of an SVGElement.

So, our goal is know when our component is resized.

How can implement ResizeObserver in Angular?
We will use ng-web-apis/resize-observer

The documentation is pretty clear, so let's start with an example to see how this library works.

First thing to do is to add @ng-web-apis/common as dependency



npm i @ng-web-apis/common

Second is to add



npm i @ng-web-apis/resize-observer

and finally



npm install --save @types/resize-observer-browser

Now, let's start adding changes into our app.
Adding ResizeObserverModule into app.module.ts



import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ResizeObserverModule } from '@ng-web-apis/resize-observer';
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    ResizeObserverModule // adding library module
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Adding a section in app.component.html, to display resize changes.
Note we have waResizeBox="content-box", which is the default value. Possible values are content-box (the default), border-box, and device-pixel-content-box. Check the docs for more details.
waResizeObserver will allow us to react when the component is resized



<section>
    <h1 waResizeBox="content-box" (waResizeObserver)="onResize($event)">
        <div>
        width: {{this.width}}
        </div>
        <div>
        height: {{this.height}}
        </div>
        <span>
        domRectReadOnly: {{this.domRectReadOnly | json}}
        </span>
    </h1>
</section>

Creating onResize method in app.component.ts to assign resize event properties and display them in our template



import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  title = 'resize-observer';
  width: number = 0;
  height: number = 0;
  domRectReadOnly: DOMRectReadOnly | undefined;

  onResize(entry: ResizeObserverEntry[]) {
    this.width = entry[0].contentRect.width
    this.height = entry[0].contentRect.height;
    this.domRectReadOnly = entry[0].contentRect;
  }
}

That's it. This is what happens when we resize the browser

Conclusions

We have reviewed what ResizeObserver is and how to implement it in Angular
ResizeObserver is one of the API's for Angular, take a look into this to find more

References

Angular app to understand rxjs operators

Salim Chemes — Wed, 17 Mar 2021 16:04:11 +0000

One of the most complicated things on reactive development is to understand how rxjs operators work.
It's is very common scenario to don't recognize which is the best operator to implement based on your needs.

The first step is to know the types. So before selecting an operator it was helpful for me identify to which type belongs to. You can take a look to the types here

There are many great resources to learn rxjs. Anyway, the best (probably the only) way to fully understand is practice, practice and more practice.

Instead of creating a post with examples and only theory content, I have created a simple app that allows you to navigate types and operators with code snippets.

This is what I've used to build the application:

netlify
github
ngx-highlightjs: code snippets
ngx-json-viewer: json formatter
docs: learnrxjs and rxjs
videos: Top 10 RxJs Operators in Angular

app link: https://awesome-sammet-a68543.netlify.app/

Disclaimer: I did not include all rxjs operators, just some of them. Some examples are in progress I will continue adding more details

Analyzing Angular bundle with Source Map Explorer

Salim Chemes — Thu, 11 Mar 2021 20:49:14 +0000

Performance matters, you probably already heard that before. Today, in FE applications we add tons of code to get our tasks done. In the meantime, we add modules, dependencies, functions, templates, directives, etc.

It is very important to have a clear picture of our applications so we can make improvements based on that.

In this post we will see how to include source-map-explorer into our Angular app.

What is source-map-explorer?
The source map explorer determines which file each byte in your minified code came from. It shows you an interactive tree-map visualization to help you debug where all the code is coming from.

Before starting I would like to recommend this video from Stephen Fluin, angular team member. You will find some very interesting concepts about how to measure and improve performance. Additionally, the video recommends source-map-explorer.

I have created a simple application with some dependencies and modules including. The app only lists the dependencies with repo and npm links.
The goal is to see how the map looks.

Disclaimer: this is not a real world app, so you will see more benefits of this tool on medium/big applications. Give it a try on your side!

ngx-moment
ngx-date-fns
angular-calendar
ngx-mask
ng-bootstrap

demo app

Install source-map-explorer
1- npm install source-map-explorer
2- on angular.json, make sure you have these 2 flags in true



"sourceMap": true, // this is to enable the source maps to get a better analysis
"namedChunks": true, // to get identify modules names and not use random numbers for lazy loading modules

3- ng build prod
4- On package.json, include this on scripts section (make sure you replace your app name after dist/)



"source-map-explorer": "source-map-explorer dist/your-angular-app-name/**/*.js"

5- npm run source-map-explorer

Let's see how it looks (yes, moment is heavy)

There is a dropdown that allows you to navigate chunks

And that it's! Let's wrap up with some conclusions

source-map-explorer is a very helpful tool to understand how your bundle is to then make improvements
there is another tool called webpack-bundle-analyzer (I wrote this post about it). The reason source-map-explorer is more accurate is because Angular has some features built on top of webpack. So to webpack-bundle-analyzer could misscategorize or missatribute some of the source code impacting the bundle result
bundle size is the most important thing to be aware in terms on performance. Before adding any new module/dependency, try to think on how this is going to impact on the bundle.

References

Thanks for reading!

Optimising Angular Performance with ngx-hover-preload

Salim Chemes — Sat, 30 Jan 2021 19:53:08 +0000

Some time ago I wrote this post to understand how to implement lazy loading and QuickLink as preloading strategy on Angular applications.

On this post, we will review a new preloading strategy called ngx-hover-preload.

As you can imagine, the idea is to download our module once hover a routerlink. This new library was released on January by Minko Gechev. Let's take a look to see how it works.

(If you have any questions or concerns about what lazy loading and preloading strategy, just look at this.)

We will use a very simple app

list of dogs (with lazy loading)
list of cats (with lazy loading)

1- Add ngx-hover-preload

npm i ngx-hover-preload --save

2- Import HoverPreloadModule on app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HoverPreloadModule } from 'ngx-hover-preload';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, HoverPreloadModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

3- Define HoverPreloadStrategy preloading strategy on app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HoverPreloadStrategy } from 'ngx-hover-preload';

const routes: Routes = [
  {
    path: 'dogs',
    loadChildren: () => import('./dogs/dogs.module').then((m) => m.DogsModule),
  },
  {
    path: 'cats',
    loadChildren: () => import('./cats/cats.module').then((m) => m.CatsModule),
    data: {
      preload: false,
    },
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: HoverPreloadStrategy }),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

So as you can see on app-routing.module.ts, cats module has preload: false. It means that no preloading strategy will apply on it. Since dogs module does no have it, by default, preloading strategy will be applied. You can use preload flag to opt-in/opt-out.

4- Adds routerLink that points to the modules on templates (Dont Forget router-outlet)

<div>
  <a routerLink="">home</a>
</div>
<br />
<div>
  <a routerLink="dogs">dogs</a>
</div>
<br />
<div>
  <a routerLink="cats">cats</a>
</div>
<router-outlet></router-outlet>

Let's it see on action
Hover on dogs routerlink (preloading strategy enabled, module is downloaded)

Hover on cats routerlink (preloading strategy disabled, module is not downloaded)

Conclusion
With ngx-hover-preload library we can optimize the way we handle our Angular modules. This new preloading strategy can be very useful if you want to go an extra mile with performance improvements.

Thanks for reading

References

repo with 2 feature modules
- 1 with preload: true. By default, no need to set it(dogs).
- 1 with preload: false (cats)
ngx-hover-preload library by Minko Gechev

Angular hotkeys (we all love shortcuts!)

Salim Chemes — Mon, 07 Dec 2020 00:29:51 +0000

Let's review how to implement hotkeys (shortcuts) on Angular apps.

On this post, we will use a library called angular2-hotkeys.

First, we will walk through the implementation and some extra configuration tips to finally go over some pros and cons as part of a conclusion.

To understand better, we will create a simple app with

an input
a save button with a shortcut command+s/control+s (mac/win)

Installation
npm install angular2-hotkeys --save

Important
If you get this error

ERROR in ../node_modules/angular2-hotkeys/src/hotkeys.service.d.ts:9:16 - error TS2304: Cannot find name 'MousetrapInstance'.
9     mousetrap: MousetrapInstance;

There is a PR not merged yet with the fix.
Also, there is a workaround (it's on the repo used on this example) until the PR is merged and the new version is released: on devDependencies include
"@types/mousetrap": "1.6.3"

Update app.module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { HotkeyModule } from 'angular2-hotkeys';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CommonModule,
    ReactiveFormsModule,
    HotkeyModule.forRoot(), // adding HotkeysModule
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Creating a component and adding a shortcut to save in the constructor

  constructor(private hotkeysService: HotkeysService) {
    this.hotkeysService.add(
      new Hotkey(
        'command+s', // key combination
        (): boolean => { // callback function to execute after key combination
          this.save(); 
          return false; // prevent bubbling
        },
        ['INPUT', 'TEXTAREA', 'SELECT'], // allow shortcut execution in these html elements
        'save' // shortcut name
      )
    );
  }

As we can see, hotkeysService allows us to add a new HotKey shortcut. Let's take a look into the class structure

export declare class Hotkey {
    combo: string | string[];
    callback: (event: KeyboardEvent, combo: string) => ExtendedKeyboardEvent | boolean;
    allowIn?: string[];
    description?: string | Function;
    action?: string;
    persistent?: boolean;
    private formattedHotkey;
    static symbolize(combo: string): string;
    /**
     * Creates a new Hotkey for Mousetrap binding
     *
     * @param combo       mousetrap key binding
     * @param description description for the help menu
     * @param callback    method to call when key is pressed
     * @param action      the type of event to listen for (for mousetrap)
     * @param allowIn     an array of tag names to allow this combo in ('INPUT', 'SELECT', and/or 'TEXTAREA')
     * @param persistent  if true, the binding is preserved upon route changes
     */
    constructor(combo: string | string[], callback: (event: KeyboardEvent, combo: string) => ExtendedKeyboardEvent | boolean, allowIn?: string[], description?: string | Function, action?: string, persistent?: boolean);
    get formatted(): string[];
}

We included allowInput with INPUT in order to get our combo working even when we have focus on it. If we don't add it, since command+s is a browser shortcut to save the page, our shortcut will not be executed and instead, the save file prompt will appear (you can try removing allowIn parameter and trying to run the combo)

Now we will add a formGroup and some logic to support

command+s on Mac
control+s on Windows

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Hotkey, HotkeysService } from 'angular2-hotkeys';

@Component({
  selector: 'app-my-form-with-hot-keys',
  templateUrl: './my-form-with-hot-keys.component.html',
  styleUrls: ['./my-form-with-hot-keys.component.scss'],
})
export class MyFormWithHotKeysComponent implements OnInit {
  mac = 'command+s';
  win = 'ctrl+s';
  isMac = navigator.platform.includes('Mac');
  saveCommand = this.isMac ? this.mac : this.win;
  saveCommandTitle = this.isMac ? '⌘+s' : this.win;
  form: FormGroup;
  constructor(private hotkeysService: HotkeysService, private fb: FormBuilder) {
    this.hotkeysService.add(
      new Hotkey(
        this.saveCommand, //  key combination
        (): boolean => {
          // callback function to execute after key combination
          this.save();
          return false; // prevent bubbling
        },
        ['INPUT', 'TEXTAREA', 'SELECT'], // allow shortcut execution in these html elements
        'save' // shortcut name
      )
    );
  }

  ngOnInit(): void {
    this.configForm();
  }

  save() {
    alert(this.form.controls?.textValue?.value || 'no text');
  }

  private configForm() {
    this.form = this.fb.group({
      textValue: '',
    });
  }
}

adding the template

<div class="form" [formGroup]="form">
  <div class="title">hot keys</div>
  <div>
    <label for="textValue" class="text-label">Type some text</label>
    <input
      type="text"
      id="textValue"
      formControlName="textValue"
      class="input-form"
    />
  </div>
  <div>
    <button (click)="save()" title="{{ saveCommandTitle }}">save</button>
  </div>
</div>

Let's see how it looks so far

Nice! it's working, we can save clicking the save button or running the shortcut!

Cheatsheet
The library supports a cheatsheet with a list of all shortcuts registered in our app, the only thing we need to do is add

<hotkeys-cheatsheet></hotkeys-cheatsheet>

We will add it in app.component.html (we can pass a custom title)

<hotkeys-cheatsheet title="Hotkeys map"></hotkeys-cheatsheet>
<app-my-form-with-hot-keys></app-my-form-with-hot-keys>

By default, to see the cheatsheet, we need to press ?. We will override default values to see what else we can setup. You can check the comments added on each property.

For example, instead of using ? to show the cheatsheet, we will use a !

In app.module.ts, we will pass options using the interface IHotkeyOptions.

Important: Only shortcuts with description will appear in the cheatsheet. Look at this to see how the component works inside the library

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { HotkeyModule, IHotkeyOptions } from 'angular2-hotkeys';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MyFormWithHotKeysComponent } from './components/my-form-with-hot-keys/my-form-with-hot-keys.component';

const options: IHotkeyOptions = {
  disableCheatSheet: false, // disable the cheat sheet popover dialog? Default: false
  cheatSheetHotkey: '!', // key combination to trigger the cheat sheet. Default: '?'
  cheatSheetCloseEsc: true, // use also ESC for closing the cheat sheet. Default: false
  cheatSheetCloseEscDescription: 'hide hotkeys map', // description for the ESC key for closing the cheat sheet (if enabed). Default: 'Hide this help menu'
  cheatSheetDescription: 'show all hotkeys', // description for the cheat sheet hot key in the cheat sheet. Default: 'Show / hide this help menu'
};

@NgModule({
  declarations: [AppComponent, MyFormWithHotKeysComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CommonModule,
    ReactiveFormsModule,
    HotkeyModule.forRoot(options), // adding options instance when registering module
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Finally, typing ! the cheatsheet is displayed

Conclusions
Pros

The library is easy to implement and offers some handy features
Cheatsheet is cool!

Cons

Last release was on march this year and even there are some PRs with important fixes including angular 8+ support the release is still pending

Thanks for reading! If you like this post, give it a 🦄 ❤️ 🔖.

References

Husky hooks in Angular 🐶

Salim Chemes — Mon, 23 Nov 2020 15:19:40 +0000

What is husky?
Husky prevents push/commit changes to our repo that are not desired like tests failing or not well formatted files. If we try to commit something that is not correct, 🐶 will say: Woof!

How it works?

npm install husky --save-dev
adds your hooks into package.json ```javascript

// package.json
{
"husky": {
"hooks": {
"pre-commit": "npm test",
"pre-push": "npm test",
"...": "..."
}
}
}


**How husky can help us and what are we going to cover on this post?**
* Run Prettier and avoid not well formatted files
* Run tests and make sure all of them pass before pushing

**What is Prettier?**
Prettier formats our code in order to have an unified pattern for the project files. 

**How it Works?**
You need to install the dependency and follow the next steps:
* `npm i prettier --save-dev`
* adds .prettierrc to let your editor know that you are using Prettier
* adds .prettierignore to exclude files to be formatted

We have Prettier running in our project so let's adds our first hook

**Hook #1: Prettier**
First of all we need to install
* `npm install --save-dev pretty-quick husky`
* adds a pre-commit hook on package.json
```javascript


// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  }
}

That's all, now we are going to see if it works

I will add some extra spaces in a app.component.html (could be any file)

Finally I will commit to see what happens

Nice! Prettier pre-hook fixed my file (no extra spaces anymore)

You can also use Prettier Visual Code extension and setup the IDE to format the code when saving files. But it will work just locally and you will need this configuration in all developer computers from your team. If for some reason any developer does not have this setup, some not formatted code could be pushed generating posible merge conflicts.

Hook #2: Running tests
This one is very simple, we will prevent commits with unit test failing. The only thing we need to do is add an extra sentence in our pre-commit hook (note that we are running the test headless to don't open any browser)



// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged && ng test --watch=false --browsers=ChromeHeadless
    }
  }
}

Let's make a test fail and try to commit

Since there is a failing test, I am not able to commit.
Let's fix the test and try again.

Conclusions

Husky hooks are helpful to have a standard way to commit/push code
Prettier will format the code for us avoiding merge conflicts and helping us to get our project files more clean and organised
You can add as many hooks as you want, in this post we just reviewed 2 but could be more

References

Thanks for reading!

Analyzing Angular bundle with Webpack Bundle Analyzer

Salim Chemes — Mon, 05 Oct 2020 00:05:27 +0000

Angular, and every modern web application, includes dependencies to makes our life easier. Even most of them are optimised, this is not free at all. Every dependency we add is going to increase our bundle.

We don't want to re-invent the wheel, but I think before adding more stuff to our bundle we should ask before:

Is this exactly what I need?
How is going to impact the bundle?

Another important thing to consider is that we should implement lazy-loading as much as we can in order to split our code better and improve the performance. You can take a look to this post for more details.

So, what is this post about? We will review webpack-bundle-analyzer, a tool to see what is inside of our bundle. It will create an interactive treemap visualization of the contents of all your bundles. We can navigate the map to identify what can be removed/optimized

Steps to install

 npm install --save-dev webpack-bundle-analyzer

 ng build --stats-json

 npx webpack-bundle-analyzer dist/your-project-name/stats.json

Note that after dist/ you need to set your project name, I am using an example project including some extra dependencies to be reviewed on the map. In a real world app, you will probably have more dependencies and modules to analyze

After running the last command line you will have this

This is how the map looks

Now let's navigate moment js, as you can see, moment is not a small dependency

Finally we can look for a specific module

Conclusions
webpack-bundle-analyzer is a very useful tool to

Get a big picture of our project
Identify dependencies that can be replaced with small ones
Identify big modules and split them in smaller pieces

References

webpack-bundle-analyzer

Optimising Angular Performance with Lazy loading and Quicklink

Salim Chemes — Mon, 17 Aug 2020 13:33:06 +0000

Performance is one of the most important things on any app.

Mostly when working on large projects, we will have multiple routes, complex business rules and a lot of code for sure.

By default, Angular compiles all our code in a single file called main.js. In small projects this is probably fine, but we usually work on enterprise applications so instead of having a single file, we can create one js for each feature module and download it when the route is invoked.

Let's see the difference between default loading and lazy loading feature modules

Angular provides lazy-loading to help us to achieve this goal. In this post we will

Implement lazy-loading feature modules
Implement ngx-quicklink: router preloading strategy which automatically downloads the lazy-loaded modules associated with all the visible links on the screen (any routerLink found will be downloaded). This is not part of Angular, it's a library written by Minko Gechev.

Let's get started with our example, a simple app with 2 feature modules

list of dogs
list of cats

 ng new lazy-loading-quicklink

Now, we are going to create the first feature module with lazy loading

ng generate module dogs --route dogs --module app.module

as result we have

created new dogs.module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { DogsRoutingModule } from './dogs-routing.module';
import { DogsComponent } from './dogs.component';

@NgModule({
  declarations: [DogsComponent],
  imports: [CommonModule, DogsRoutingModule],
})
export class DogsModule {}

created new dogs-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { DogsComponent } from './dogs.component';

const routes: Routes = [{ path: '', component: DogsComponent }];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class DogsRoutingModule {}

updated app-routing.module.ts including new dogs routing (note that lazy loading is in place)

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'dogs',
    loadChildren: () => import('./dogs/dogs.module').then((m) => m.DogsModule),
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

created new dogs.component

Another important step is to include router-outlet in the app.component.html to be able to perform routing actions


<div>
  <a routerLink="">home</a>
</div>
<div>
  <a routerLink="dogs">dogs</a>
</div>
<router-outlet></router-outlet>

So, we have our feature module, let's now implement ngx-quicklink

npm i ngx-quicklink --save

Once it's done, we need to update app.module.ts to import QuicklinkModule


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { QuicklinkModule } from 'ngx-quicklink';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, QuicklinkModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Next step is to set the preloadingStrategy on app-routing.module.ts


import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { QuicklinkStrategy } from 'ngx-quicklink';

const routes: Routes = [
  {
    path: 'dogs',
    loadChildren: () => import('./dogs/dogs.module').then((m) => m.DogsModule),
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: QuicklinkStrategy }),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

We have defined preloadingStrategy in our routing module, it means when routerLink="dogs" is rendered, dogs module will be downloaded before hand.

Here we have some screenshots to show what is going on

routerLink is rendered

dogs feature module is downloaded

In case you don't want to prefetch a route, you can set preload:false


const routes: Routes = [
  {
    path: 'dogs',
    loadChildren: () => import('./dogs/dogs.module').then((m) => m.DogsModule),
    data: {
      preload: false,
    },
  },
];

In that case, feature module will be downloaded once you access to the route and not before.

Conclusion
Lazy loading is a great technique to enhance performance splitting the code. If we want to go one step forward, ngx-quicklink helps us to improve even more adding prefetching feature modules. It's not hard to implement and performance result are much better.

Thanks for reading

References

repo with 2 feature modules
- 1 with preload: true. By default, no need to set it(dogs).
- 1 with preload: false (cats)
lazy loading docs
ngx-quicklink library by Minko Gechev
Tools for fast Angular applications

How to implement ngrx-router-store

Salim Chemes — Tue, 16 Jun 2020 18:45:44 +0000

Nowadays NgRx is a very popular framework mostly used when having an app with complex/shared state.
This is the list of packages offered by the framework today:

Store: RxJS powered state management for Angular apps, inspired by Redux.
Store Devtools: Instrumentation for @ngrx/store enabling time-travel debugging.
Effects: Side effect model for @ngrx/store.
Router Store: Bindings to connect the Angular Router to @ngrx/store.
Entity: Entity State adapter for managing record collections.
NgRx Data: Extension for simplified entity data management.
NgRx Component: Extension for fully reactive, fully zone-less applications.
ComponentStore: Standalone library for managing local/component state.
Schematics: Scaffolding library for Angular applications using NgRx libraries.

For more details you can check the docs

In this post, we will implement Router Store, step by step.

Why do we need Router Store? Basically to link the routing with the NgRx store. Every time the router changes, an action will be dispatched and will update the store through a reducer.

We will divide the implementation in 4 steps, with an example of a list of movies and series:

1. Add required dependencies
2. Update app.module.ts
3. Create router reducer and Custom Router State Serializer
4. Create a selector and subscribe from a component

1. Add required dependencies
npm install @ngrx/router-store --save

2. Update app.module.ts
We need to



 import { StoreRouterConnectingModule } from '@ngrx/router-store';

We import StoreRouterConnectingModule to connect RouterModule with StoreModule, which has a serializer class named CustomSerializer, we will cover this in step #3



    StoreRouterConnectingModule.forRoot({
      serializer: CustomSerializer,
    }),

Assuming we have already implemented the Store and StoreDevtoolsModule, this is how our app.module.ts looks



import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StoreRouterConnectingModule } from '@ngrx/router-store';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MoviesDetailComponent } from './pages/movies-detail/movies-detail.component';
import { MoviesComponent } from './pages/movies/movies.component';
import { SeriesDetailComponent } from './pages/series-detail/series-detail.component';
import { SeriesComponent } from './pages/series/series.component';
import { CustomSerializer } from './store/custom-serializer';
import { reducers } from './store/index';

@NgModule({
  declarations: [
    AppComponent,
    MoviesComponent,
    SeriesComponent,
    SeriesDetailComponent,
    MoviesDetailComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    StoreModule.forRoot(reducers),
    StoreDevtoolsModule.instrument({
      maxAge: 25, // Retains last 25 states
      logOnly: true, // Restrict extension to log-only mode
    }),
    StoreRouterConnectingModule.forRoot({
      serializer: CustomSerializer,
    }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

3. Create router reducer and Custom Router State Serializer
Let's create CustomSerializer class we set in app.module.ts, we want to just return some params and not the entire snapshot object to avoid possible performance issues



import { Params, RouterStateSnapshot } from '@angular/router';
import { RouterStateSerializer } from '@ngrx/router-store';

export interface RouterStateUrl {
  url: string;
  params: Params;
  queryParams: Params;
}

export class CustomSerializer implements RouterStateSerializer<RouterStateUrl> {
  serialize(routerState: RouterStateSnapshot): RouterStateUrl {
    let route = routerState.root;

    while (route.firstChild) {
      route = route.firstChild;
    }

    const {
      url,
      root: { queryParams },
    } = routerState;
    const { params } = route;

    // Only return an object including the URL, params and query params
    // instead of the entire snapshot
    return { url, params, queryParams };
  }
}

And finally we add our router reducer



import { ActionReducerMap } from '@ngrx/store';
import * as fromRouter from '@ngrx/router-store';
import { routerReducer } from '@ngrx/router-store';

export interface StoreRootState {
  router: fromRouter.RouterReducerState<any>;
}
export const reducers: ActionReducerMap<StoreRootState> = {
  router: routerReducer,
};

4. Create a selector and subscribe from a component
We have it all set, the last step is to add a selector and subscribe to it from a component
Creating a selector



import * as fromRouter from '@ngrx/router-store';
import { createSelector } from '@ngrx/store';
import { StoreRootState } from '.';

export const getRouterState = (state: StoreRootState) => state.router;

export const getCurrentRouteState = createSelector(
  getRouterState,
  (state: fromRouter.RouterReducerState) => state.state
);

Subscribing from a component



import { Component, OnDestroy, OnInit } from '@angular/core';
import { select, Store } from '@ngrx/store';
import { series } from 'src/app/app.constants';
import { StoreRootState } from 'src/app/store';
import { getCurrentRouteState } from 'src/app/store/selectors';

@Component({
  selector: 'app-series-detail',
  templateUrl: './series-detail.component.html',
  styleUrls: ['./series-detail.component.scss'],
})
export class SeriesDetailComponent implements OnInit, OnDestroy {
  seriesId: string;
  series;
  private subscriptions: { [key: string]: any } = {};

  constructor(private store: Store<StoreRootState>) {}

  ngOnInit(): void {
    this.subscriptions.routerSelector = this.store
      .pipe(select(getCurrentRouteState))
      .subscribe((route: any) => {
        const seriesId = route.params.seriesId;
        this.series = series.find((series) => series.id === seriesId);
      });
  }

  ngOnDestroy(): void {
    this.subscriptions.routerSelector.unsubscribe();
  }
}

The coding part is done, let's see how the example works

This is how the store looks when the app starts

Let's navigate to the series list and see what happens in the store

One more navigation to notice that route state has changed, including url and params

Thanks for reading!

References

Deploying Angular app with Netlify in 3 steps

Salim Chemes — Sun, 10 May 2020 15:54:41 +0000

Netlify is a great platform to build/deploy any kind of web applications (not just Angular).
It's very useful when you need to deploy your app fast and easy.

I found it handy to have demos or examples running when writing posts or when I need to have some coding working and live (not just local), but Netlify is not just for that, it is a very powerful platform.

We can deploy our Angular app following these steps:
1. Create your angular project on github (could also be on bitbucket/gitlab)
2. Log in into Netlify, look for your repo and setup the build options
3. Deploy the new web site created!

Let's start

1. Create you angular project on github (could also be on bitbucket/gitlab)

ng new my-angular-app

Create a repo on github and push your code.

2. Log in into Netlify, look for your repo and setup the build options

Log in https://www.netlify.com/
Clic on New site from Git
Select Github as provider
After authorization, we will see the list of available repositories to pick.

If my-angular-app repo is not on the list, we need to provide access from github. (If you see your repo, you can skip this step).

Clic on the highlighted link "Configure the Netlify app on GitHub".
We will be redirected to github to look for our missing repository

Now we can see my-angular-app
As part of build options setup, this is what we need:
1. build command: we build our code in prod mode
2. publish directory: location of build files (UPDATE: add /browser to publish directory)

3. Deploy the new web site created

After clic on Deploy site, the first build is triggered and deploy is in progress

Finally, we have our site running

Let's go to the site list to see one we have just created

Clic on our site, and then on the url provided by Netlify

That's all! site deployed and running!

Conclusions

Netlify provides a lot of cool features and tools, this post is just to demo how to deploy fast with Angular but there is a lot more to work with.
Other Netlify features

Custom domains
Functions with AWS Lambda
Identity
Forms
Large Media
Split Testing
Analytics

References

github repo (nothing special here)
Netlify site running: https://focused-bhaskara-dee416.netlify.app/