Andreas Plahn Blog

To show current repo, rootfolder and active git branch in window title:

Open settings.json -> F1 -> Open User settings (JSON) -> and edit/insert this:

"window.title": "${dirty} ${activeRepositoryName} - ${rootName} [${activeRepositoryBranchName}]",

Run Azurite in Windows

Azurite is an emulator for Azure blob, queue and table that can be used in a local development environment.

“Newer” Visual Studio installations should include this emulator. Whether it has started correctly or works as expected is hidden in mist.

So, I use these files to start azurite emulator from my Windows desktop.
If the default azurite ports in use, the related processes are automatically stopped.

Prerequisites: install Azurite to c:\azurite
Put the following 2 files in c:\azurite folder and create a shortcut for azurite.bat on your window desktop:

c:\azurite\azurite.bat:

@echo off
pwsh -NoLogo -NoProfile -File "C:\azurite\azurite.ps1"
pause

c:\azurite\azurite.ps1:

# --- Settings ---

# --- The path where azurite is installed
$azuriteRoot = 'C:\azurite'
$portsToFree = 10000, 10001, 10002   # Blob, Queue, Table

# --- Go to working folder ---
Set-Location -Path $azuriteRoot

# --- Show Azurite version ---
Write-Host "Running Azurite Version:" (azurite -v)

# --- Function: stop whatever is listening on specified ports ---
function Stop-ListeningProcessesOnPorts {
    param([int[]]$Ports)

    foreach ($p in $Ports) {
        try {
            # Find listeners on the port
            $conns = Get-NetTCPConnection -LocalPort $p -State Listen -ErrorAction SilentlyContinue
            if (-not $conns) {
                Write-Host "Port $p is free."
                continue
            }

            # Stop each owning process
            foreach ($c in $conns) {
                try {
                    $proc = Get-Process -Id $c.OwningProcess -ErrorAction Stop
                    Write-Host "Found process '$($proc.ProcessName)' (PID $($proc.Id)) already listening on port $p, shutting it down..."
                    Stop-Process -Id $proc.Id -Force
                }
                catch {
                    Write-Warning "Failed to stop PID $($c.OwningProcess) on port $p. $_"
                }
            }
        }
        catch {
            Write-Warning "Could not query listeners on port $p. $_"
        }
    }
}

# --- Kill ports if needed ---
Write-Host "-----------------------------"
Write-Host "Checking ports needed by Azurite:" 
Stop-ListeningProcessesOnPorts -Ports $portsToFree
Write-Host "-----------------------------"

# --- Start Azurite ---
azurite -l $azuriteRoot -d (Join-Path $azuriteRoot 'debug.log')

# --- Keep window open after Azurite exits ---
Read-Host "Press Enter to exit"

Docs:

https://learn.microsoft.com/en-us/azure/storage/common/storage-use-azurite

https://learn.microsoft.com/en-us/azure/storage/common/storage-install-azurite

Gridify .NET dynamic linq library

Gridify is a dynamic LINQ library designed to simplify converting strings into LINQ queries. It offers exceptional performance and ease of use, making it effortless to apply filtering, sorting, and pagination using text-based data.

Features

Here are some notable features of Gridify:

Fast and user-friendly
Supports filtering, sorting, and pagination
Enables conversion from strings to LINQ queries
Supports nested queries and sub-collections
Allows mapping from strings to objects
Supports query compilation
Supports DocumentDBs
Compatible with collection indexes
Custom operators
Can be used with any collection that supports LINQ
Compatible with object-mappers like AutoMapper
Compatible with ORMs, particularly Entity Framework
Supports Elasticsearch DSL query
Javascript/Typescript gridify-client

alirezanet.github.io/Gridify/guide/

FlexQuery.NET | Flexible querying for .NET REST APIs

FlexQuery.NET Turn your API into a secure, composable query engine Flexible querying for .NET IQueryable — filtering, sorting, paging, projection, validation, and security
flexquery.vercel.app/

A collection of ready to use Copilot Agent instructions

If you are using Agent in mode in Github Copilot, some of these instructions will serve you great:
https://github.com/github/awesome-copilot/tree/main/agents

By the way here is the entire repo for this:
https://github.com/github/awesome-copilot

And the offical webpage:
https://awesome-copilot.github.com/

Angular – update npm packages and audit errors tips & tricks

Background – vulnerable package warning

If you get npm install / npm audit warnings similar to below:
(Angular package dependency error)

npm audit report
vite  6.2.0 - 6.2.3
Severity: moderate
Vite has a `server.fs.deny` bypassed for `inline` and `raw` with `?import` query - https://github.com/advisories/GHSA-4r4m-qw57-chr8
fix available via `npm audit fix`
node_modules/vite
  @angular/build  19.2.1 - 19.2.5 || 20.0.0-next.0 - 20.0.0-next.3
  Depends on vulnerable versions of vite
  node_modules/@angular/build
    @angular-devkit/build-angular  19.2.1 - 19.2.5 || 20.0.0-next.0 - 20.0.0-next.3
    Depends on vulnerable versions of @angular/build
    node_modules/@angular-devkit/build-angular

Bump all packages to latest possible using npm-check-updates

Use the npm-check-updates command to get a list of recommended version updates for all npm packages in the project. This might mean breaking changes if major versions are found.

In Angular project root (where the package.json file is) run:
npx npm-check-updates --peer --upgrade
This will list all dependencies that have newer versions than what’s in your package.json.
It will also check peer dependencies of installed packages and filter updates to compatible versions, then modifies your package.json with the latest versions.

Delete package-lock.json

Install the updated packages:

npm install --force
npm audit fix --force

Now your package.json and node_modules are fully in sync with the latest possible versions.
Verify application still works.

More info: https://www.npmjs.com/package/npm-check-updates

Bump packages in a more controlled manner

Get a list of possible target version numbers:
npx npm-check-updates --peer
(is just a dry run wont change anything)

A recommended approach is to update all “Angular” type of packages first and then any “non Angular packages”.
In Angular project root edit package.json:

Bump all packages with the word “angular” in them to the latest version number (see output from the npm-check-updates command). See this example:

Then run:
npm install
-> might get dependency errors, cant install

npm install --force
-> forces the install of angular packages
In the above mentioned scenario (just bump angular packages) this works.

As a second step; repeat this for all non-angular packages.

Package.json version interval handling

Whats the difference between ~ and ^ in the acceptable version “interval” value in package.json?
See:
https://stackoverflow.com/questions/22343224/whats-the-difference-between-tilde-and-caret-in-package-json

value	desc
`~version`	Approximately equivalent to version, i.e., only accept new patch versions See npm semver – Tilde Ranges
`^version`	Compatible with version, i.e., accept new minor and patch versions See npm semver – Caret Ranges
`version`	Must match version exactly
`>version`	Must be greater than version
`>=version`	Must be equal or greater than version
`<version`	Must be lesser than version
`<=version`	Must be equal or lesser than version
`1.2.x`	1.2.0, 1.2.1, etc., but not 1.3.0
`*`	Matches any version
`latest`	Obtains latest release

The above list is not exhaustive. Other version specifiers include GitHub urls and GitHub user repo’s, local paths and packages with specific npm tags

Official Docs

Angular Aria • Overview • Angular

What is Angular Aria?

Building accessible components seems straightforward, but implementing them according to the W3C Accessibility Guidelines requires significant effort and accessibility expertise.

Angular Aria is a collection of headless, accessible directives that implement common WAI-ARIA patterns. The directives handle keyboard interactions, ARIA attributes, focus management, and screen reader support. All you have to do is provide the HTML structure, CSS styling, and business logic!

angular.dev/guide/aria/overview

Setup Tailwind in Angular

Tailwind CSS is a utility-first CSS framework that can be used to build modern websites without ever leaving your HTML. This guide will walk you through setting up Tailwind CSS in your Angular project.

angular.dev/guide/tailwind

Seamless data fetching with httpResource | Angular Blog

The resource API makes it possible to expose results of asynchronous operations as signals. For most applications, developers make HTTP requests for the data their applications need. We recognize this and have built a new API to help facilitate this primary use case — introducing httpResource 🎉.
blog.angular.dev/seamless-data-fetching-with-httpresource-71ba7c4169b9