Overview:

I'm excited to announce the release of Angular Agent Kit - a collection of AI coding agent skills designed specifically for Angular developers. This toolkit extends the capabilities of AI coding assistants like GitHub Copilot, Claude Code, Cursor, and Gemini CLI with deep Angular expertise.

What is Angular Agent Kit?​

Angular Agent Kit is a collection of skills that follow the Agent Skills specification. These skills are packaged instructions and scripts that extend AI agent capabilities, enabling them to provide expert-level guidance on Angular development.

The Problem It Solves​

As Angular applications grow in complexity, maintaining performance becomes increasingly challenging. Developers often struggle with:

• Change detection optimization - Understanding when to use OnPush strategy
• Bundle size management - Identifying and eliminating bloat
• Template performance - Writing efficient templates that don't cause unnecessary re-renders
• RxJS patterns - Avoiding memory leaks and implementing efficient async operations

While AI coding assistants are powerful, they sometimes lack the specialized Angular knowledge needed to provide optimal recommendations. Angular Agent Kit bridges this gap.

Available Skills​

angular-best-practices​

The flagship skill contains 45+ rules across 8 categories, prioritized by their impact on application performance:

Installation​

Getting started is simple with a single command:

npx skills add sajeetharan/angular-agent-kit

Usage Examples​

Once installed, skills are automatically available. Simply ask your AI assistant:

Review my Angular component for performance issues

Help me optimize change detection in this component

Optimize this Angular template for better performance

The AI agent will automatically leverage the Angular best practices rules to provide expert-level recommendations.

Compatibility​

Angular Agent Kit works with all major AI coding tools:

• GitHub Copilot - Works seamlessly in VS Code
• Claude Code - Full support for Claude's coding assistant
• Cursor - Enhanced Angular development experience
• Gemini CLI - Google's AI coding assistant
• Any other Agent Skills-compatible tools

Skill Structure​

Each skill in the kit follows a consistent structure:

• SKILL.md - Instructions that trigger skill activation
• AGENTS.md - Compiled rules that agents read
• rules/ - Individual rule files for easy maintenance
• metadata.json - Version and metadata information

Why I Built This​

As someone who works extensively with Angular and AI development tools, I noticed a gap between generic AI coding assistance and Angular-specific expertise. The rules in this kit are distilled from years of Angular development experience, official Angular documentation, and community best practices.

Acknowledgments​

This project was inspired by:

• Vercel's React Best Practices
• The Agent Skills specification
• Angular team's official documentation

Contributing​

Contributions are welcome! If you have Angular best practices that should be included, or improvements to existing rules, please check out the CONTRIBUTING.md file for guidelines.

Get Started Today​

Ready to supercharge your Angular development with AI-powered best practices?

1. Install the skill: npx skills add sajeetharan/angular-agent-kit
2. Open your Angular project
3. Ask your AI assistant for Angular optimization help

Check out the GitHub repository for more details and to star the project if you find it useful!

Have questions or feedback? Feel free to open an issue on GitHub or reach out to me on Twitter!

Overview:

I'm thrilled to introduce Angular Visual Storybook - an interactive learning resource that transforms complex Angular concepts into easy-to-understand visual infographics. Whether you're a beginner starting your Angular journey or an experienced developer looking for quick reference guides, this comprehensive collection has something for everyone.

What is Angular Visual Storybook?​

Angular Visual Storybook is a static website that provides a comprehensive visual guide to Angular development through 26 beautifully designed infographics. It's built with pure HTML5, CSS3, and JavaScript - no frameworks required! The project is perfect for visual learners and developers who prefer a structured, comprehensive approach to learning Angular.

🔗 Live Demo: sajeetharan.github.io/angular-graphic

🌟 Features​

• 📚 26 Comprehensive Topics - From Angular Overview to AI Integration
• 🎨 Beautiful Design - Modern, responsive UI with smooth animations
• 🔒 Image Protection - Multiple layers of protection to prevent unauthorized downloading
• 📱 Mobile Friendly - Fully responsive design that works on all devices
• ♿ Accessible - WCAG-compliant with keyboard navigation support
• 🚀 Performance Optimized - Fast loading with intersection observers and lazy loading
• 🔍 Search Functionality - Quick search through topics in the sidebar
• 📊 Progress Tracking - Visual progress bar as you scroll through content

Topics Covered​

The storybook covers all major Angular topics from the official Angular documentation:

🛠️ Technologies Used​

What makes this project special is its simplicity:

• Pure HTML5, CSS3, and JavaScript - No frameworks required!
• CSS Grid & Flexbox for responsive layouts
• Intersection Observer API for scroll detection
• Modern ES6+ JavaScript features

Quick Start​

Want to run it locally? It's incredibly simple:

# Clone the repository
git clone https://github.com/sajeetharan/angular-graphic.git
cd angular-graphic

# Using Python
python -m http.server 8000

# Or using Node.js
npx http-server

# Then visit http://localhost:8000

🔒 Image Protection Features​

The website implements multiple layers of image protection:

1. Right-Click Prevention - Context menu disabled on images
2. Drag-and-Drop Blocking - Images cannot be dragged
3. Keyboard Shortcut Blocking - Common save shortcuts are intercepted
4. CSS Protection - User-select and drag properties disabled
5. Visual Feedback - Warning overlay when protection is triggered
6. Mobile Long-Press Protection - Touch events handled to prevent saving

Why I Built This​

Learning Angular can be overwhelming with its extensive documentation and numerous concepts. I wanted to create a resource that:

• Simplifies complex concepts through visual representation
• Provides quick reference for experienced developers
• Offers an engaging learning experience for beginners
• Works offline once loaded - perfect for on-the-go learning

🎨 Customization​

The project is highly customizable. You can easily modify colors by editing CSS variables:

:root {
  --primary-color: #dd0031; /* Angular red */
  --secondary-color: #c3002f; /* Darker red */
  --accent-color: #0066ff; /* Blue accent */
}

Contributing​

Contributions are welcome! If you have ideas for new infographics or improvements:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes
4. Push to the branch
5. Open a Pull Request

🙏 Acknowledgments​

• Content structure inspired by angular.dev
• Infographics created for educational purposes
• Built with ❤️ for the Angular community

Get Started Today​

Ready to learn Angular visually?

• 🌐 Visit the live site: sajeetharan.github.io/angular-graphic
• 📦 Clone the repo: github.com/sajeetharan/angular-graphic

Have feedback or suggestions? Feel free to open an issue on GitHub or reach out to me on Twitter!

Overview :

In last November 2021, Cosmos DB team has announced support for patching documents with SQL API which was the top requested features in the user voice. This is a useful and long-awaited feature among users. Prior to this announcement the only way to change the stored document was to completely replace it. Users will be able to perform Partial updates with all the Cosmos DB SDKs ( JAVA, . Net , JS ) and also Cosmos DB REST API.

Use Case:

Let's look at a scenario of a dashboard application where user need to display the System and it's features. User has decided to use Cosmos DB as a database to store the data of a System and it's features. A sample document would look as follows.

{
    "ApplicationId": "App-01",
    "ApplicationName": "New Cosmos Client",
    "Description": "This shows the users and interactions",
    "IsDraft": 0,
    "IsSaved": 1,
    "Features": [
        {
            "SystemID": 1,
            "Features": [
                {
                    "FeatureID": 4,
                    "FeatureName": "Patch",
                    "IsActive": false
                },
                {
                    "FeatureID": 35,
                    "FeatureName": "Feature-a-2",
                    "IsActive": false
                },
                {
                    "FeatureID": 36,
                    "FeatureName": "test-feature-a-3",
                    "IsActive": true
                }
            ]
        }
    ],
    "id": "af3dfd7a-b7e9-4467-a2ca-9c6be7ad5b9f",
    "_rid": "S1xQAKKOTBABAAAAAAAAAA==",
    "_self": "dbs/S1xQAA==/colls/S1xQAKKOTBA=/docs/S1xQAKKOTBABAAAAAAAAAA==/",
    "_etag": "\"31003582-0000-0700-0000-6213cb6b0000\"",
    "_attachments": "attachments/",
    "_ts": 1645464427
}

Let's look at some of the scenarios where user needs to perform patch operations.

Patch Scenario 1:  Add a new record (JSON object) under Features parent array

JSON object to Add:

{
       "SystemID": 2,
       "Features": [
       {
          "FeatureID": 1,
          "FeatureName": "Reports",
          "IsActive": false
       }
     ]
 }

You can refer my previous blog on How to setup Rest Operations with Postman. Once you've configured the setup with the underlying database and container. Here we need to insert a new Object within the Features array, certainly we can leverage the Single Add Operation. And the sample request Body will be like,

Patch Url : [https://account/dbs/dbName/colls/Patch/docs/id of the document](https://account/dbs/dbName/colls/Patch/docs/id of the document) and the header "x-ms-documentdb-partitionkey" is set to the partition key value which is the "ApplicationId" "App-01". And we need to specify the path as "/Features/-"

On a successful response, in the backend you will see that a new Object that is shown above will be added to the Features array.

Patch Scenario 2:  Update the Application Description in the root Object to "Testing Patch with REST API"

Patch Scenario 3:  Update only a specific Feature object in array for a given Features parent object like FeatureName . Let's assume if we need to update the Object at the 0th index and then update the First Features Object,

Patch Scenario 4 : Perform all the above operations as a single request

Since Partial document update supports up to 10 operations in a single request, all the above operations can be merged. User needs to combine all the operations as one as below,

{
   "operations":[
     {
         "op":"replace",
         "path":"/Features/0/Features/0/FeatureName",
         "value":"Patch Testing"
    },
    {
         "op":"set",
         "path":"/Description",
         "value":"Testing Patch with REST API"
    },
    {
    "op":"add",
    "path":"/Features/-",
    "value":{
       "SystemID": 2,
       "Features": [
           {
               "FeatureID": 1,
               "FeatureName": "Reports",
               "IsActive": false
           }
       ]
    }
   }
 ]
}

Hope these samples help you to perform different operations at different path using Cosmos Rest API. Cheers!

Overview:​

As a Developer, If you have a requirement to have list of work items which are approved to be displayed in a Grid View. You would tend to query for all approved work items and display them in the grid, one point to note is that since the amount of approved work items might grow over time, hence loading the data would get slower and slower due to having to download more items. In general, this is where pagination comes into play in front end development, which means you don't need to necessarily download all records, just download a page of records at a time. If you are using Cosmos DB as a backend, this feature is supported out of the box via the use of Continuation Token. Cosmos DB SDKs utilize a continuation strategy when managing the results returned from the queries.

Pagination with @Azure/cosmos SDK:​

One of the frequent questions I have come across on forums is on How to Implement Pagination with @azure/cosmos SDK with JavaScript. With this post , I wanted to keep it simple and add a very minimal quick start on how to implementation pagination with .js SDK. You can follow the steps given in the repository.

Prerequisites:​

• Create a CosmosDB Account of type SQL API and database named 'javascript' and collection named 'products'
• Insert the data 'ProductsData.json' to CosmosDB using the Data Migration Tool

execute.ts is the start point of the application which invokes the CallPagination method defined in the pagination.service.ts.

import dotenv from "dotenv"
import { Helper } from './helper';
import PaginationService from './pagination.service';

dotenv.config()

const cosmosDB = new Helper();
const pageMod = new PaginationService(cosmosDB);


const callPagination = async () => {
    const result = await pageMod.executeSample(2, "")
    console.log({
        data: result.result,
        dataLength: result.result.length,
        hasMoreResult: result.hasMoreResults,
        contToken: result.continuationToken
    });
};

callPagination();

Implementation is really simple as we are passing a simple query that has more than 40 records and we set the pageLimit as 5 which is the max number of items to be returned in single call.

 public async executeSample(
    pageLimit: number = 5,
    contToken: string = ""
  ): Promise<{
    result: Array<any>;
    hasMoreResults: boolean;
    continuationToken: string;
  }> {
    const sqlQuery =
      `SELECT * from products where products.CategoryName = "Bikes, Road Bikes"`
    console.log({ sqlQuery })

    const { result, hasMoreResults, continuationToken } =
      await this.cosmosHelper.queryContainerNext(
        {
          query: sqlQuery
        },
        {
          maxItemCount: pageLimit,
          continuationToken: contToken
        },
        process.env.CONTAINER_NAME
      );

    return {
      result: result || [],
      hasMoreResults: hasMoreResults || false,
      continuationToken: continuationToken || "",
    };
  }

You can access the whole sample from this link.

Steps to Run the application​

• Clone the Repository
• Run npm install
• Replace the environment COSMOS_ENDPOINT,COSMOS_KEY,COSMOS_DATABASE_NAME,CONTAINER_NAME in the .env file
• Run npm start run the application

Hope this helps someone who wants to implement Pagination with JavaScript. Cheers!

Hello folks!

Azure Data Lake is a big data solution which allows organizations to ingest multiple data sets covering structured, unstructured, and semi-structured data into an infinitely scalable data lake enabling storage, processing, and analytics. It enables users to build their own customized analytical platform to fit any analytical requirements in terms of volume, speed, and quality.

In the context of above, the book "Cloud Scale Analytics with Azure Data Services" book is your guide to learning all the features and capabilities of Azure data services for storing, processing, and analyzing data (structured, unstructured, and semi-structured) of any size. You will explore key techniques for ingesting and storing data and perform batch, streaming, and interactive analytics

The book also shows you how to overcome various challenges and complexities relating to productivity and scaling. Next, you will be able to develop and run massive data workloads to perform different actions. Using a cloud based big data-modern data warehouse–analytics setup, you will also be able to build secure, scalable data estates for enterprises. Finally, you will not only learn how to develop a data warehouse but also understand how to create enterprise-grade security and auditing big data programs.

By the end of this Azure book, you will have learned how to develop a powerful and efficient analytical platform to meet enterprise needs.

WIN YOUR FREE COPY​

Enter your details and Click Submit to enter our monthly prize draw. Take your chance to receive one of the 10 free copies as give away.