Forem: Priya jain

Page Titles in Angular - Guide 🚀

Priya jain — Sun, 04 Aug 2024 14:55:20 +0000

Page title is a piece of text you can see on a tab in your browser next to favicon. Setting good page title enhancing the user's navigation experience and SEO.

Static Method

1. Componenet based -

The simplest way to set a page title in Angular is by using the Title service provided by @angular/platform-browser. This service allows you to set the document title dynamically.

import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {

  constructor(private titleService: Title) { }

  ngOnInit(): void {
    this.titleService.setTitle('Home - MyApp');
  }
}

Problem

Limited Scalability: Using the static approach works for small apps only.
Not Centralized: This method is not scalable and not centralized.
Maintenance Overhead: If you change the way you want to show the title, application-level changes are required.

2. Route based title

From angular version 14, we can update the page title more easily.
Angular expose us to the optional title property in the route definition.

const routes: Routes = [
  { path: 'home', component: HomeComponent, title: 'Home Page' }, // defined a title prop
];

However, passing static strings isn’t a convenient way and we often need to create title based on some dynamic value.

Dynamic Method

For dynamic page titles, we have two options:

1. Component Level

Below Anglar 14, You can dynamically set the title within your components by using the Title service and subscribing to route data changes. This method involves writing custom logic in each component that needs a dynamic title.

Here's how you can do it:

Inject the Title and ActivatedRoute services:
Subscribe to the route data and set the title:

const routes: Routes = [
  { path: 'home', component: HomeComponent, data: {title: 'Home Page'} }, // defined a title prop
];

import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { filter, map } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  constructor(private titleService: Title, private router: Router) {}

  ngOnInit() {
    this.router.events
      .pipe(
        filter(event => event instanceof NavigationEnd),
        map(() => {
          let route: ActivatedRoute = this.router.routerState.root;
          while (route.firstChild) {
            route = route.firstChild;
          }
          return route.snapshot.data['title'];
        })
      )
      .subscribe((title: string) => {
        if (title) {
          this.titleService.setTitle(`My App - ${title}`);
        }
      });
  }
}

Explanation:

Injecting Services: We inject the Title and Router services.
Subscribing to Router Events: We subscribe to the NavigationEnd event to detect when navigation has finished.
Retrieving Route Data: We traverse the activated route tree to get the deepest child route's data and extract the title property.
Setting the Title: We use the TitleService to set the document's title.

Key Points:

Location: This logic resides in the root component (AppComponent).
Routing Events: It listens to routing events (NavigationEnd) and updates the title based on the route data.
Title Setting: The title is set using TitleService within the component.
Flexibility: This approach is straightforward and easy to understand but can become cumbersome if you need to apply it across multiple components or routes.

2. Custom TitleStrategy

A more scalable approach is to use a custom TitleStrategy. This allows you to centralize and standardize how titles are set across your application. Here's how you can implement this:

Creating a Custom Title Strategy
First, create a custom TitleStrategy class:

import { Injectable } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { TitleStrategy, RouterStateSnapshot } from '@angular/router';

@Injectable({
  providedIn: 'root',
})
export class CustomTitleStrategy extends TitleStrategy {
  constructor(private titleService: Title) {
    super();
  }

  updateTitle(snapshot: RouterStateSnapshot): void {
    const title = this.buildTitle(snapshot);
    if (title !== undefined) {
      this.titleService.setTitle(`My App - ${title}`);
    }
  }
}

Configuring the Router
Next, configure the router to use this custom strategy:

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
     { provide: TitleStrategy, useClass: CustomTitleStrategy },
  ],
});

Key Points:

Location: The title handling logic is abstracted away from the components and encapsulated in a service (CustomTitleStrategy).
Routing Events: It automatically hooks into the Angular router’s lifecycle.
Title Setting: The title is set using TitleService within the CustomTitleStrategy.
Flexibility: This approach is more modular and reusable. It centralizes the title management logic, making it easier to maintain and extend. ### 3. Using Resolvers to set page titles

In this case Angular allows us to pass a resolver to dynamically create a title. Let’s create a title resolver to display product name as a title on details page:

 const productNameTitleResolver: ResolveFn<string> = (
  route: ActivatedRouteSnapshot,
): string => {
  const productId = route.paramMap.get('id');
  return productId ? inject(ProductsService).getById(productId).name : '';
};

export const ROUTES: Routes = [
  {
    path: 'products',
    component: ProductsComponent,
    title: 'Products',
    children: [
      {
        path: ':id',
        component: ProductDetailsComponent,
        title: productNameTitleResolver
      },
    ],
  },
  {
    path: 'cart',
    component: CartSummaryComponent,
    title: 'Cart Summary'
  },
];

The title resolver can be used like any other resolver, allowing you to inject dependencies, perform some logic, or return an Observable or Promise the returns the page title string.

Conclusion

Setting page titles in Angular can greatly enhance user experience and SEO. For small applications, using the Title service in individual components might suffice. However, for larger applications, adopting a custom TitleStrategy provides a scalable and centralized solution for managing page titles.

By understanding and implementing these techniques, you can ensure that your Angular application provides a consistent and dynamic browsing experience for users while also reaping the benefits of improved search engine optimization.

Additionally, I got to learn a new pattern in design called the Strategy Pattern while working on the CustomTitleStrategy. I will write my next article on this topic.

Happy Coding 🙂

Git Stash - Instant Code Pause Button ⏸️ (Illustrated)

Priya jain — Sat, 24 Feb 2024 12:47:31 +0000

Introduction

Imagine you're in the middle of working on a new feature for your project when suddenly, you need to fix a critical bug. This is where git stash comes in handy.

git stash lets you temporarily set aside the changes you've made so you can deal with urgent matters without losing your progress or making messy commits. It's like hitting a pause button on your code changes, allowing you to switch tasks smoothly.

In this article, we'll walk you through how to use Git Stash in simple terms. Whether you're new to Git or just looking to streamline your workflow, mastering Git Stash will help you work smarter and more efficiently.

Understanding Git Stash

git stash comes with few key concepts:

1.Stash Stack:

Git Stash operates with a stack-based model, where stashed changes are stored in a stack-like structure. This means that you can stash changes multiple times, creating a stack of stashed states that can be popped or applied in a last-in, first-out (LIFO) manner.

2.Stashed Changes:

When you stash changes using Git, Git takes the modified tracked files in your working directory and saves them to a special area called the stash. This action reverts the tracked files to their clean state, allowing you to perform other operations or switch branches without carrying the unfinished changes.

Basic Commands

1. Store Uncommitted Changes

git stash
# store with message
git stash push -m "⚠️ changes in file3.js"

Stash the changes in your working directory with an optional descriptive message.

WIP On priya – priya is just a branch name like any other branch and WIP stands for Work In Progress. "WIP on priya" means that stash@{0} was created on the branch "priya".
fb7804 add head line – fb7804 is a Commit hash and add head line is a commit message. At that time of stash creation, fb7804 add head line is the latest commit. ### 2. Retrieving Stashed Changes Apply the most recent stashed changes to your working directory and remove them from the stash stack.

git stash pop

git stash pop stash@{3}

If we want to re-apply the changes from a different stash, we should pass its identifier as the last argument to the respective commands.

3. Stash multiple changes

4. Listing Stashed Changes

Display a list of stashed changes along with their corresponding stash IDs and descriptions.

git stash list

6. Don't remove changes from stash

If we don't want our changes to be removed from the stash after applying it on the branch, we can use the following command

git stash apply

This command can be used to apply the same changes on multiple branches.

5. Viewing Stashed Changes

Display a list of stashed changes along with their corresponding stash IDs and descriptions.

#git stash show -p stash@{n}

git stash show stash@{0}

6. Stash specific file

We can make use of the --patch flag while running the git stash command that instructs Git not to stash everything that is modified instead it will iterate through all the changes and ask whether we want to stash it or not.

git stash push -m "description" --patch

This command provides granularity in choosing which changes to stash, enabling developers to selectively stash specific modifications while keeping others intact.

7. Create a branch from the stash

Sometimes, the changes stashed might be substantial enough to warrant further development on a dedicated branch. Git facilitates this process by allowing the creation of a new branch directly from a stash.

git stash branch branch_name stash@{n}

8. Removing changes from stash

#git stash drop stash@{n}
git stash drop stash@{0}

Conclusion

By leveraging Git Stash, developers can seamlessly switch tasks, tackle urgent issues, and experiment with code variations without cluttering their commit history or sacrificing efficiency.
Embrace Git Stash as your go-to code pause button, empowering you to navigate the complexities of software development with ease and precision.

Happy Coding 👩‍💻

GREP - A Practical Guide 🚀

Priya jain — Sun, 11 Feb 2024 11:47:28 +0000

Problem:
As a developer, you need to efficiently search through log files to find specific API requests or errors, but manually scanning through the logs is time-consuming and error-prone.

Solution:
Utilize the grep command in the terminal to search for API requests within log files.

Examples are mostly based on API logs but can be used with any file.
If you want to go throw all commands live - Git Clone Terminal/Grep

#Basics of Grep 📝

The basic syntax for grep is:

grep "pattern" file

where:
pattern is the regular expression you want to search for
file is the name of the file you want to search

Grep works on all Unix-like systems.

Grep will print each line in the file that matches the regular expression.

By default, grep is case-sensitive, so "gnu" is different from "GNU" or "Gnu." You can make it ignore capitalization with the --ignore-case option.

1. Search for a pattern within a file

# grep "search pattern" path/to/file
grep "error" api_server.log

2. Search stdin for lines that do match a pattern

Many times we want to pipe Grep with another command.

# cat path/to/file | grep "search_pattern"
cat api_server.log | grep error

3. Search pattern in multiple files in the current directory with .txt extension

cd logs
# grep "search pattern" *.txt
grep ERROR *.txt

Most Important Flags 🚩

`-i`

Grep default is case-sensitive. Use this flag to make it search case-insensitive.

grep error api_server.log -i

`-v`

Invert the match, print all lines where the pattern does not match.

grep INFO api_server.log -v

`-w`

Search for the whole word. Sometimes there is a relative pattern match but we want an exact word. In that case, this flag is useful.

grep INFO api_server.log -w

`-n`

Show line numbers along with matching lines.

grep POST api_server.log -n

`-l`

Find file names that match the pattern.

#grep "pattern" *.ext -l 
grep ERROR *.txt -l

`-R`

If you only know the folder name and it contains subdirectories, you must retrieve all file names and then search recursively within the directories.

grep ERROR -l -R

`-o`

Only print the matching part of the line (not the whole line)

grep "Internal Server Error" api_server.log -o

`-c`

Let's say you have one deprecated API now you want to track how many users still use it throw logs. This flag will return the count.

grep "/api/v1/deprecated" api_server.log -c
# In multiple files
grep "/api/v1/deprecated" ./logs/*.txt -c

`-E`

Interpret the pattern as an extended regular expression.

grep -E "user_id=[0-9]{4}" api_server.log

Line Context Search 🔍

`-A`: (Lines Above)

To display the line containing the error and the line directly preceding it, you can use -A 1:
Example:

`-B`: (Lines Below)

Continuing from the previous example, to display the line containing the error and the line directly following it, you can use -B 1:
Example:

`-C`: (Lines Containing)

To display the line containing the error and the lines directly above and below it, you can use -C 1:
Example:

# Real Life Examples 💡

If you're not familiar with REGEX, I'll explain it next.

Codebase Exploration:

I know we have a vs-code search. But searching through the terminal creates a great impression 😎

grep -r "getUserById" ./

Parsing and Extracting Information

grep -o -E "User: (\w+) performed action: (\w+)" user_log.log

This command uses a regular expression to capture user names and their corresponding actions.

User: Alice performed action: login
User: Bob performed action: view_profile
User: Alice performed action: post_comment
User: Charlie performed action: login
User: Alice performed action: view_profile
User: Bob performed action: post_comment

Pipe with another command to extract data

docker ps | grep -oE '^[0-9a-f]+'

This will output a list of container IDs for all running Docker containers.

f9e5f041b25a
2ab9d3fc5f8e

# Advance REGEX Search 🧠

Search for any four consecutive digits in api_server.log

grep -E "user_id=[0-9]{4}" api_server.log

Matching Words Starting with 'A' or 'B':

grep -E '\b[A-Ba-b]\w+\b' api_server.log

Match either/or

grep '400\|500' api_server.log|

Bonus Tip ✨

If you have big files:
Ripgrep is much faster than grep.

# Install
sudo apt-get install ripgrep
#or
brew install ripgrep
# Syntax 
rg <search_pattern> <filename>

Blog Link

https://www.priya.today/blogs/grep

Conclusion

In conclusion, grep is a powerful tool that enables users to search, filter, and manipulate text data efficiently from the command line. Mastering grep can significantly enhance productivity and streamline text processing tasks in the terminal environment.

Happy Coding 👩‍💻

Forem: Priya jain

Page Titles in Angular - Guide 🚀

Static Method

1. Componenet based -

Problem

2. Route based title

Dynamic Method

1. Component Level

2. Custom TitleStrategy

Conclusion

Git Stash - Instant Code Pause Button ⏸️ (Illustrated)

Introduction

Understanding Git Stash

1.Stash Stack:

2.Stashed Changes:

Basic Commands

1. Store Uncommitted Changes

3. Stash multiple changes

4. Listing Stashed Changes

6. Don't remove changes from stash

5. Viewing Stashed Changes

6. Stash specific file

7. Create a branch from the stash

8. Removing changes from stash

Conclusion

GREP - A Practical Guide 🚀

#Basics of Grep 📝

1. Search for a pattern within a file

2. Search stdin for lines that do match a pattern

3. Search pattern in multiple files in the current directory with .txt extension

Most Important Flags 🚩

-i

-v

-w

-n

-l

-R

-o

-c

-E

Line Context Search 🔍

-A: (Lines Above)

-B: (Lines Below)

-C: (Lines Containing)

# Real Life Examples 💡

Codebase Exploration:

Parsing and Extracting Information

Pipe with another command to extract data

# Advance REGEX Search 🧠

Search for any four consecutive digits in api_server.log

Matching Words Starting with 'A' or 'B':

Match either/or

Bonus Tip ✨

Blog Link

Conclusion

`-i`

`-v`

`-w`

`-n`

`-l`

`-R`

`-o`

`-c`

`-E`

`-A`: (Lines Above)

`-B`: (Lines Below)

`-C`: (Lines Containing)