Saturday, September 5, 2026

PWA with Angular and React

PWA in Simple Words

A PWA (Progressive Web App) is a website that behaves more like a mobile app.

You can open it in the browser, install it on your device, and in many cases use parts of it
even with a weak or offline connection.

Why use a PWA?

For developers, the biggest benefit is simple:

One codebase, multiple devices.

A good PWA can give you:

Installable app experience
Faster loading
Offline support
Mobile and desktop support
Less maintenance

Angular

Angular makes PWA setup very easy:

ng add @angular/pwa

This adds the main PWA files like the manifest and service worker.

React

In React, you can use tools like:

npm install vite-plugin-pwa

This helps add service workers, caching, and install support.

Can we publish it to app stores?

Yes.

For Android:

PWA → Bubblewrap/TWA → .aab → Play Store

For iOS, tools like Capacitor can wrap your web app and prepare it for Xcode and the App Store.

Final thought

PWA is not the best choice for every app.

But for dashboards, e-commerce apps, booking systems, portals, and internal tools, it can save a lot of development time.

Build once. Maintain less. Reach more devices.

Tuesday, April 7, 2026

🚀 Agentic Framework 1.0 in .NET: The Power Combo of Semantic Kernel + AutoGen

The AI landscape is shifting fast—from simple prompt-response systems to autonomous, decision-making agents. If you're still building basic chatbots, you're already behind.

Enter Agentic Framework 1.0 in .NET—a practical evolution where Microsoft Semantic Kernel and AutoGen-style multi-agent orchestration come together to create intelligent, collaborative AI systems.

This isn’t just another framework. It’s a mindset shift.

🧠 What is an Agentic Framework?

An agentic framework is a system where AI agents:

Think (reason over tasks)
Act (execute tools/functions)
Collaborate (communicate with other agents)
Adapt (handle dynamic workflows)

Instead of one monolithic AI, you build a team of specialized agents.

⚙️ Why Combine Semantic Kernel + AutoGen?

Let’s be brutally honest:

Semantic Kernel alone → Great for plugins, orchestration, memory
❌ But weak in multi-agent collaboration out of the box
AutoGen-style systems → Excellent for agent-to-agent conversations
❌ But lack strong enterprise-grade integration and structured execution

👉 Combine them, and you fix each other’s weaknesses.

🧩 Architecture Overview

Here’s how Agentic Framework 1.0 typically looks:

                +----------------------+
                |   User / Trigger     |
                +----------+-----------+
                           |
                    +------v------+
                    |  Orchestrator|
                    +------+------+
                           |
        -----------------------------------------
        |                  |                    |
+-------v------+  +--------v--------+  +--------v--------+
| Planner Agent|  | Executor Agent  |  | Reviewer Agent  |
+--------------+  +-----------------+  +-----------------+
        |                  |                    |
        ----------- Communication Layer --------
                           |
                 +---------v----------+
                 | Semantic Kernel    |
                 | Plugins + Memory   |
                 +--------------------+

🔍 Core Components Explained

1. 🧭 Orchestrator (Brain)

This is your control layer.

Decides which agent to call
Manages workflow execution
Handles retries and failures

👉 Built using .NET + Semantic Kernel pipelines

2. 🤖 Agents (Specialists)

Instead of one AI doing everything poorly, split responsibilities:

🧠 Planner Agent

Breaks problem into steps
Uses reasoning (LLM)

⚡ Executor Agent

Calls APIs / tools
Uses Semantic Kernel plugins

🔍 Reviewer Agent

Validates output
Ensures quality

👉 This structure mimics real engineering teams. That’s why it works.

3. 🔌 Semantic Kernel (Execution Engine)

Semantic Kernel gives you:

Plugin system (functions as tools)
Memory (context persistence)
Prompt orchestration

Example:

var kernel = Kernel.CreateBuilder()
    .AddAzureOpenAIChatCompletion(...)
    .Build();

kernel.Plugins.AddFromType<WeatherPlugin>();

👉 This is where actual work happens.

4. 🔄 AutoGen Pattern (Collaboration Layer)

AutoGen-style design enables:

Agent-to-agent messaging
Task handoffs
Debate & refinement loops

Example flow:

Planner → Executor → Reviewer → (feedback loop) → Executor

👉 This is what makes the system agentic, not just scripted.

🔥 Real Use Case

Let’s say you’re building an AI content creator:

Flow:

Planner Agent → "Write blog on .NET agents"
Executor Agent → Calls content generation plugin
Reviewer Agent → Improves SEO, grammar
Optional Loop → Refine until quality threshold met

👉 This is not a chatbot. This is an AI workflow system.

💡 Why This Matters for .NET Developers

If you're still stuck in CRUD APIs, here’s the truth:

That skill is getting commoditized
AI-integrated systems are the next high-paying layer

With Agentic Framework:

You move from API developer → AI system architect
You build products, not endpoints

⚠️ Hard Truths (Read Carefully)

Just knowing Semantic Kernel ≠ you understand AI systems
Copy-pasting GitHub examples won’t make you job-ready
If you don’t understand orchestration, you’ll build toy apps

👉 The real value is in:

Designing agent roles
Handling failure cases
Managing cost (token usage)
Building scalable workflows

🧪 Minimal Starter Strategy

Don’t overcomplicate:

Step 1:

Build a single agent using Semantic Kernel

Step 2:

Add 2nd agent (planner + executor)

Step 3:

Introduce feedback loop

Step 4:

Add memory + logging

👉 That’s your Agentic Framework v1.

🚀 Final Thoughts

Agentic Framework 1.0 in .NET is not a library—it’s a pattern.

By combining:

Semantic Kernel → execution + tools
AutoGen concepts → collaboration + intelligence

You unlock a system that behaves less like software… and more like a team.

Saturday, March 28, 2026

Azure AI models parameters Guide For optimize and safety

Monday, August 18, 2025

How to make Scheduler with Azure Queue using .net

I created Two methods one for schedule and log in db and second method is related to reschedule message.

Schedule and Reschedule Message

public async Task ScheduleAndLogEmailAsync( NotificationRequest notificationRequest, ScheduleType type,
    DateTime triggerTime,
    DateTime? auctionTime,
    CancellationToken cancellationToken = default)
{
     var MessageId = Guid.NewGuid();
     var sender = _serviceBusClient.CreateSender(_serviceBusConfig.EmailNotificationQueue);
     notificationRequest.MessageId = MessageId.ToString();
     var messageBody = JsonConvert.SerializeObject(notificationRequest);
     var serviceBusMessage = new ServiceBusMessage(messageBody);

    // Schedule the message and get its sequence number
    long sequenceNumber = 0;
    try
    {                
        sequenceNumber = await sender.ScheduleMessageAsync(serviceBusMessage, triggerTime, cancellationToken);
    }
    catch (Exception ex)
    {
        //TODO console error log here;
        var e = ex;
    }
 
     // Log the scheduled message in DB
     using var scope = _serviceScopeFactory.CreateScope();
     var dbContext = scope.ServiceProvider.GetRequiredService<DbContext>();
 
     var scheduledMessage = new ScheduleMessage
     {
         TypeId = type,
         MessageId = MessageId,
         AzureSequenceQueueId = sequenceNumber.ToString(),
         TriggerTime = triggerTime,
         AuctionTime = auctionTime,
         IsProcessed = false,
         NotificationRequestJson = messageBody
     };
 
     dbContext.ScheduleMessages.Add(scheduledMessage);
     await dbContext.SaveChangesAsync(cancellationToken);
}



public async Task ReschedulePendingMessagesAsync(ScheduleType scheduleType, TimeSpan newOffset, CancellationToken cancellationToken = default)
{
    using var scope = _serviceScopeFactory.CreateScope();
    var dbContext = scope.ServiceProvider.GetRequiredService<DbContext>();
    var sender = _serviceBusClient.CreateSender(_serviceBusConfig.EmailNotificationQueue);

    var now = DateTime.UtcNow;

    var pendingMessages = await dbContext.ScheduleMessages
        .Where(x => x.TypeId == scheduleType && !x.IsProcessed && x.Time.HasValue && x.TriggerTime > now)
        .ToListAsync(cancellationToken);

    foreach (var message in pendingMessages)
    {
        var newTriggerTime = message.Time.Value - newOffset;

        // Skip if new trigger time is in the past
        if (newTriggerTime <= DateTime.UtcNow)
            continue;
        // Cancel old scheduled message
        if (long.TryParse(message.AzureSequenceQueueId, out long oldSequenceId))
        {
            try
            {
                await sender.CancelScheduledMessageAsync(oldSequenceId, cancellationToken);
            }
            catch (Exception ex)
            {
                // If already executed or cannot be cancelled, continue silently
                Console.WriteLine($"[Reschedule] Failed to cancel scheduled message with SequenceId: {oldSequenceId}. Reason: {ex.Message}");
            }
        }

        // Reschedule with new trigger time
        var serviceBusMessage = new ServiceBusMessage(message.NotificationRequestJson);
        var newSequenceId = await sender.ScheduleMessageAsync(serviceBusMessage, newTriggerTime, cancellationToken);

        // Update DB
        message.AzureSequenceQueueId = newSequenceId.ToString();
        message.TriggerTime = newTriggerTime;
    }

    await dbContext.SaveChangesAsync(cancellationToken);
}

2. While Process=>

Code Snippet

	private async Task ProcessMessageAsync(ProcessMessageEventArgs args)
    {
    var sequenceId = args.Message.SequenceNumber.ToString();
    if (!string.IsNullOrEmpty(notificationRequest.MessageId))
    {
        // Convert string to Guid
        Guid messageIdGuid;
        if (Guid.TryParse(notificationRequest.MessageId, out messageIdGuid))
        {
            var scheduledRecord = await dbContext.ScheduleMessages
                .FirstOrDefaultAsync(m => m.MessageId == messageIdGuid); 
            if (scheduledRecord != null)
            {
                scheduledRecord.AzureSequenceQueueId = sequenceId;
                scheduledRecord.IsProcessed = true;
                dbContext.ScheduleMessages.Update(scheduledRecord);
                await dbContext.SaveChangesAsync();
            }
        }
        else
        {
            Console.WriteLine("Invalid MessageId format.");
        }
    	}
    }
    <br>

Friday, August 1, 2025

How to Do Cross-Browser Testing on Windows — Including Safari via Playwright

To test follow few steps:

Step 1. Install node
Step 2. create Folder and run these commands

commands

    1. npm init -y 
    2. npm install playwright 
    3. npx playwright install 
    4. npx playwright open -b webkit

Step 3. update package.json 's scripts

package.json

    "scripts": {
    "test:chrome": "npx playwright test --headed --browser=chromium",
    "test:firefox": "npx playwright test --headed --browser=firefox",
    "test:safari": "npx playwright test --headed --browser=webkit"
  }

Step 4. create Test folder in above folder and create file with name browser.test.ts and add below code

browser.test.ts

   import { test } from '@playwright/test'
test.use({
  ignoreHTTPSErrors: true,
});

test('test browser', async ({ page }) => {
  // point this to wherever you want
  await page.goto('http://localhost:4200/')

  // keep browser open
  await page.pause()
})

Step 5. run command npm run test:safari

Friday, July 18, 2025

How to Highlight a Link of Side Nav When It Has Multiple Child Links in Angular

🔗 How to Highlight a Link When It Has Multiple Child Links in Angular

When building a sidebar in Angular, you might want to highlight a parent link when any of its child routes are active. Angular’s routerLinkActive only works for single routes — so here’s a quick 2-step solution using a custom directive.

Step 1: Create a custom directive
Write a directive that checks the current URL against a list of child links and adds an active class if any match.

Step 1: Directive Code

import { Directive, ElementRef, Input, OnDestroy, OnInit, Renderer2 } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { filter } from 'rxjs/operators';
@Directive({
  selector: '[activeLinks]'
})
export class ActiveLinksDirective implements OnInit, OnDestroy {
  @Input() activeLinks: string[] = [];
  @Input() activeClass = 'active';
  private sub!: Subscription;
  constructor(
    private router: Router,
    private el: ElementRef,
    private renderer: Renderer2
  ) {}
  ngOnInit(): void {
    // Subscribe to router events
    this.sub = this.router.events
      .pipe(filter(event => event instanceof NavigationEnd))
      .subscribe((event) => {
        this.updateActiveClass();
      });
    
    // Initial check
    this.updateActiveClass();
  }
  ngOnDestroy(): void {
    if (this.sub) {
      this.sub.unsubscribe();
    }
  }
  private updateActiveClass(): void {
    
    if (!this.activeLinks || this.activeLinks.length === 0) {
      return;
    }
    const currentUrl = this.router.url;
    let isActive = false;
    // Check each active link for exact match
    for (const link of this.activeLinks) {
      
      // Exact match (including query parameters)
      if (currentUrl === link) {
        isActive = true;
        break;
      }
      
      // Decoded exact match (in case of encoded URLs)
      const decodedCurrentUrl = decodeURIComponent(currentUrl);
      const decodedLink = decodeURIComponent(link);
      if (decodedCurrentUrl === decodedLink) {
        isActive = true;
        break;
      }
    }
    // Apply or remove the active class
    if (isActive) {
      this.renderer.addClass(this.el.nativeElement, this.activeClass);
    } else {
      this.renderer.removeClass(this.el.nativeElement, this.activeClass);
    }
  }

Step 2: Use it in your template
On your parent menu link, pass the list of child URLs to the directive.

Step 2: Template Code

 <a mat-list-item  
               routerLink="/dashboard/add-product"
               [activeLinks]="['/dashboard/add-product',
               '/dashboard/product?productType=1',
               '/dashboard/product?productType=2',
               '/dashboard/product?productType=3'
               ]"
               >
               <span class="material-symbols-outlined">calendar_add_on</span>
              <span *ngIf="sideBarOpen">Add Product</span>
            </a>

✅ Works with multiple child links, query parameters, and is easy to reuse.

✅ This blog is written by TechJourney with Gagan, sharing practical Angular tips for developers.

Tuesday, July 1, 2025

Create Search Functionality using 2 steps using pipe in Angular

To Implement Search Functionality without writing code in ts file

Step1: Create a Pipe using below code.

Code Of Search Filter Pipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'searchByFilter'
})
export class SearchByFilterPipe implements PipeTransform {
  transform(items: any[], searchText: string, fieldName: string): any[] {
    if (!items) return [];
    if (!searchText) return items;
    searchText = searchText.toLowerCase();
    return items.filter(item => item[fieldName]?.toLowerCase().includes(searchText));
  }
}

Step2: write below code where you want to implement search like in drop down.

Code Snippet

						<div>
                            <mat-label class="font-semibold">Select Company*</mat-label>
                            <mat-form-field class="w-1/3">
                                <mat-select formControlName="companyId"
                                    (selectionChange)="onOrganizationChange($event.value)"
                                    placeholder="Select Company">
                                    <mat-form-field >
                                        <input matInput  placeholder="Search Company" #searchInput />
                                    </mat-form-field>
                                    <mat-option *ngFor="let org of organizationsData | searchByFilter:searchInput.value:'organizationName'" [value]="org.organizationId">
                                        {{ org.organizationName }}
                                    </mat-option>
                                </mat-select>
                            </mat-form-field>
                        </div>

In above code we use just

<input matInput placeholder="Search Company" #searchInput /><br>
based on referece variable we took input and pass to pipe | searchByFilter:searchInput.value:'organizationName'"