DEV Community: Neeraj Singh

Global Error Handling in Angular

Neeraj Singh — Fri, 20 Dec 2024 03:56:48 +0000

To catch errors while subscribing to a service in Angular 17 and toggle the loading or other UI states, you can use the subscribe method of observables along with RxJS operators like catchError. Here’s a step-by-step approach:

Example:

1. Service call with a loading indicator:

Set a loading flag to true before starting the service call.
Subscribe to the service and handle success and error responses.
Reset the loading flag to false when the call completes (either on success or failure).

2. Handling errors:

Use the catchError operator inside the observable pipeline to catch and handle errors.
Optionally display a notification or error message using something like Toastr.

Sample Code:

import { Component } from '@angular/core';
import { MyService } from './my-service.service'; // Your service here
import { catchError } from 'rxjs/operators';
import { of } from 'rxjs';
import { ToastrService } from 'ngx-toastr'; // If you are using Toastr for notifications

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html'
})
export class MyComponent {
  loading = false;   // Flag to toggle loading indicator
  data: any = null;  // Variable to hold the service response data

  constructor(private myService: MyService, private toastr: ToastrService) { }

  getData() {
    this.loading = true;  // Start loading before the service call
    this.myService.getData()  // Call the service method
      .pipe(
        catchError((error) => {
          this.toastr.error('Failed to fetch data', 'Error');  // Show an error notification
          console.error(error);  // Log the error (optional)
          this.loading = false;  // Stop loading on error
          return of(null);  // Return an empty observable to prevent further issues
        })
      )
      .subscribe(
        (response) => {
          this.data = response;  // Handle successful response
          this.toastr.success('Data fetched successfully!', 'Success');  // Success notification
        },
        () => {
          this.loading = false;  // Stop loading on error (handled in catchError as well)
        },
        () => {
          this.loading = false;  // Stop loading on completion (either success or error)
        }
      );
  }
}

Key Points:

Loading Flag: The loading flag is used to show/hide the loading spinner. It is set to true before the service call and reset to false in both the error and completion callbacks.
Error Handling: The catchError operator is used to catch the error, handle it (e.g., log it, show a notification), and prevent the application from crashing. It returns an empty observable (of(null)) so that the subscription can complete.
Toastr Notification: The ToastrService is used to display notifications for success and error events. Adjust this based on your notification system if you're using something else.

This approach helps you maintain the loading state, catch errors, and gracefully handle both success and failure scenarios while keeping the UI responsive.

Image compression in Angular 15+ and .NET Core 7

Neeraj Singh — Fri, 20 Dec 2024 03:46:07 +0000

To edit and change the aspect ratio of an image in an Angular and .NET Core 7 application, you'll need to handle image manipulation on both the client side (Angular) and the server side (.NET Core 7). Here's a general approach:

1. Client-Side (Angular) - Adjusting Aspect Ratio Before Upload

You can allow the user to upload an image, adjust the aspect ratio on the client side, and then send the modified image to the .NET Core API.

Steps in Angular:

Use an HTML file field to select the image.
Use the HTML5 Canvas API to adjust the aspect ratio before sending the image to the server.
Convert the image to a base64 or a Blob to send it to the backend API.

Example Code:

<!-- HTML for file input -->
<input type="file" (change)="onFileSelected($event)" />
<canvas #canvas></canvas>

// Angular component
import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-image-resize',
  templateUrl: './image-resize.component.html',
})
export class ImageResizeComponent {
  @ViewChild('canvas', { static: false }) canvas: ElementRef<HTMLCanvasElement>;

  onFileSelected(event: any) {
    const file = event.target.files[0];
    if (file) {
      const img = new Image();
      const reader = new FileReader();

      reader.onload = (e: any) => {
        img.src = e.target.result;

        img.onload = () => {
          const ctx = this.canvas.nativeElement.getContext('2d');
          const desiredAspectRatio = 16 / 9; // Set desired aspect ratio

          // Resize logic
          const width = img.width;
          const height = img.height;
          const currentAspectRatio = width / height;

          let newWidth = width;
          let newHeight = height;

          if (currentAspectRatio > desiredAspectRatio) {
            // Crop width to match aspect ratio
            newWidth = height * desiredAspectRatio;
          } else if (currentAspectRatio < desiredAspectRatio) {
            // Crop height to match aspect ratio
            newHeight = width / desiredAspectRatio;
          }

          // Resize and draw the image to the canvas
          this.canvas.nativeElement.width = newWidth;
          this.canvas.nativeElement.height = newHeight;
          ctx?.drawImage(img, 0, 0, newWidth, newHeight);

          // Convert canvas back to Blob or base64 for upload
          this.canvas.nativeElement.toBlob((blob) => {
            // Send blob to the .NET Core backend
            this.uploadImage(blob);
          }, 'image/jpeg');
        };
      };
      reader.readAsDataURL(file);
    }
  }

  uploadImage(blob: Blob) {
    const formData = new FormData();
    formData.append('file', blob, 'resized-image.jpg');

    // Make HTTP request to upload the image
    // this.httpClient.post('your-api-url', formData).subscribe();
  }
}

2. Server-Side (.NET Core 7) - Handling the Image

On the server side, you can receive the uploaded image, process it further if needed (e.g., validation, additional resizing), and save it.

Steps in .NET Core:

Receive the image using an API controller.
Use libraries like ImageSharp or SkiaSharp for image manipulation.

Example Code in .NET Core 7:

Install ImageSharp via NuGet:

dotnet add package SixLabors.ImageSharp --version 2.1.3

// .NET Core API Controller
[HttpPost("upload")]
public async Task<IActionResult> UploadImage(IFormFile file)
{
    if (file != null && file.Length > 0)
    {
        using var image = await Image.LoadAsync(file.OpenReadStream());

        // Resize the image if necessary
        int newWidth = 1920;
        int newHeight = (int)(newWidth / (16.0 / 9)); // Maintain 16:9 aspect ratio

        image.Mutate(x => x.Resize(newWidth, newHeight));

        // Save the image
        var savePath = Path.Combine("wwwroot", "uploads", "resized-image.jpg");
        await image.SaveAsync(savePath);

        return Ok(new { filePath = savePath });
    }

    return BadRequest("Invalid image file.");
}

3. Upload Flow

The user selects an image in Angular.
The image is resized or cropped on the client side using Canvas.
The modified image is uploaded to the .NET Core API.
The API processes the image (if necessary) and saves it.

4. Additional Considerations

Validation: Ensure the image meets size, format, and resolution requirements before resizing.
Error Handling: Implement error handling for failed uploads, invalid image formats, etc.
Image Storage: Choose appropriate storage, such as local file system, Azure Blob Storage, or AWS S3, for storing the resized images.

This setup allows you to change the aspect ratio of an image before uploading and handle it in .NET Core.

BONUS Content

Client-Server Flow

The user selects an image on the client side.
Angular resizes and compresses the image using the element and the toBlob method.
The compressed image is sent to the .NET Core backend via an HTTP POST request.
Optionally, the server can further compress or process the image and then save it.

Benefits of Client-Side Compression:

Reduces file size before sending to the server, which saves bandwidth.
Provides immediate feedback to users about image quality.

Benefits of Server-Side Compression:

Adds an extra layer of image handling, ensuring the image meets size and quality requirements.
Allows for bulk image processing after upload.
By using this approach, you can significantly reduce the image size on the client side and, if necessary, further compress it on the server side.

Minimal SEO in React JS - React Helmet

Neeraj Singh — Fri, 20 Dec 2024 03:34:39 +0000

Using react-helmet

1. Install the library:

npm install react-helmet

2. Update your component to use react-helmet:

import React from 'react';
import { Helmet } from 'react-helmet';

const App = () => {
    const appName = "Your Application Name";
    const dynamicPageTitle = `Welcome to ${appName}`;

    return (
        <div>
            <Helmet>
                <title>{dynamicPageTitle}</title>
            </Helmet>
            <h1>Welcome to {appName}</h1>
        </div>
    );
};

export default App;

3. Result:

The page title will dynamically update, and search engines will be able to pick it up when indexing.
Using JavaScript (document.title)
You can also directly set the title in the useEffect hook:

import React, { useEffect } from 'react';

const App = () => {
    const appName = "Your Application Name";

    useEffect(() => {
        document.title = `Welcome to ${appName}`;
    }, [appName]);

    return (
        <div>
            <h1>Welcome to {appName}</h1>
        </div>
    );
};

export default App;

Best Practices for SEO

Unique Titles: Ensure each page in your app has a unique and descriptive title.
Server-Side Rendering (SSR): If your app needs better SEO, consider using frameworks like Next.js, which support server-side rendering.
Meta Tags: Along with the title, update meta tags using react-helmet or other similar methods to include descriptions, keywords, and canonical URLs.

<Helmet>
    <title>{dynamicPageTitle}</title>
    <meta name="description" content="Description of the application or page" />
    <meta name="keywords" content="your, keywords, here" />
</Helmet>

These steps ensure your React app's title is dynamically updated and optimized for search engines like Google.

Azure AI 900 Exam: Understand AI Workloads in Azure

Neeraj Singh — Wed, 18 Dec 2024 06:13:57 +0000

1. Key AI Workloads on Azure

Azure supports a variety of AI workloads through its services. These are the primary categories to focus on:

a. Machine Learning Workloads

Tasks: Training, deploying, and managing ML models.
Azure Services:
Azure Machine Learning (Azure ML)
Azure Databricks
Cognitive Services Custom Vision

Use Cases:
Predictive analytics
Forecasting
Image classification
NLP-based sentiment analysis

b. Conversational AI

Tasks: Building bots and conversational interfaces.
Azure Services:
Azure Bot Service
Language Studio
Speech-to-Text and Text-to-Speech

Use Cases:
Chatbots for customer support
Voice-enabled virtual assistants

c. Cognitive Services

Tasks: Using pre-built AI APIs to integrate intelligence into apps.
Azure Services:
Vision (Computer Vision, Custom Vision, Face API)
Language (Text Analytics, Translator)
Speech (Speech Recognition, Synthesis)
Decision (Personalizer, Anomaly Detector)

Use Cases:
OCR and document analysis
Sentiment analysis
Speech-enabled applications

d. AI at the Edge

Tasks: Running AI models on edge devices for real-time insights.
Azure Services:
Azure IoT Edge
Azure Percept

Use Cases:
Industrial IoT
Smart cameras
Real-time object detection

2. Core Considerations for AI Solutions

a. Data Preparation

Key Concepts:
Data collection, cleaning, and preprocessing.
Ensuring balanced datasets to avoid bias.
Secure and compliant storage with Azure Blob or Azure Data Lake.

Best Practices:
Use Azure Data Factory for ETL processes.
Leverage Azure Synapse Analytics for data integration.

b. Model Selection and Training

Key Concepts:
Understanding supervised, unsupervised, and reinforcement learning.
Using pre-built models (e.g., Cognitive Services) versus custom ML models.

Best Practices:
Train models in Azure ML with AutoML or custom pipelines.
Monitor performance metrics like accuracy, recall, precision.

c. Deployment and Integration

Key Concepts:
Deploying models as REST APIs using Azure ML or Azure Functions.
Ensuring scalability with Azure Kubernetes Service (AKS).

Best Practices:
Use Azure API Management for secure API endpoints.
Optimize for latency using edge deployments with Azure IoT Edge.

d. Security and Compliance

Key Concepts:
Ensuring data protection and model security.
Compliance with standards like GDPR, HIPAA, or ISO.

Best Practices:
Use Azure Key Vault for managing sensitive keys and credentials.
Leverage Azure Security Center for threat detection.

e. Monitoring and Maintenance
Key Concepts:
Tracking model performance post-deployment.
Handling model drift and retraining.

Best Practices:
Set up alerts with Azure Monitor.
Use Azure ML’s model management capabilities for versioning and retraining.

3. Certification-Specific Tips

*Understand Azure AI Services: * Study documentation for Cognitive Services, Azure ML, and Azure Bot Service.
Hands-on Experience: Practice building, deploying, and scaling AI solutions in Azure.

Ethical AI: Learn Azure's Responsible AI principles, including fairness, transparency, and accountability.
Case Studies and Scenarios: Review real-world applications of AI on Azure to connect theory with practice.

Sample Exams: Familiarize yourself with question patterns and time management.

Prepare and Practice For Exam

By focusing on these AI workloads and considerations, you'll be well-prepared to design and manage AI solutions on Azure while meeting the certification's requirements.

Correct Way to Implement RTL in React Js

Neeraj Singh — Wed, 18 Dec 2024 06:07:53 +0000

Install RTL-Support Libraries

Install the necessary packages for managing RTL layout:

npm install rtlcss postcss-rtl

Update CSS/SCSS Styles

Use postcss-rtl for automatic conversion of styles.
Modify your CSS files to include logical properties like margin-inline-start and avoid hardcoded left/right styles.

Configure PostCSS for RTL

Add a PostCSS configuration in your project:

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-rtl': {},
  },
};

Detect Language Direction Use a utility function to detect and apply dir="rtl":

const isRTL = (lang) => ['ar', 'he'].includes(lang); document.documentElement.dir = isRTL(language) ? 'rtl' : 'ltr';

Dynamic Language Switching

Use a state management library (e.g., Redux, Context API) to toggle between ltr and rtl.

Test with RTL-Languages

Use Chrome DevTools to force RTL mode for testing.

Common Guidelines
Use Constants for Alignment: Define alignment constants:

const ALIGN_START = isRTL ? 'right' : 'left';
const ALIGN_END = isRTL ? 'left' : 'right';

Test Early and Often: Validate UI components for both LTR and RTL layouts.
Leverage Tools for Translation: Use services like Google Translate for preliminary translations and hire native speakers for accuracy.