11. Angular Control Flow

The past week I cursed Angular a little bit because I just wanted to have a simple if-else condition within my HTML template. But, as you probably already know, we have to jump through a couple of hoops to get this working. The result is a not-so-easy-to-read template that's prone to errors.

Angular 17 changes that by providing a new (opt-in) way on how we write our templates. Instead of using the structural directives NgIf, NgFor, and NgSwitch, you'll be able to use the new @ syntax.

This change drastically improves the Developer's Experience;

• it's easier to read
• you don't have to import the directives
• it's less verbose since you don't have to create wrapper components e.g. ng-container.

As an example, let's take a look at my if-else condition and compare both solutions.

 content_paste
@if (ifCondition) {
<div>If template</div>
} @else if (elseIfCondition) {
<div>Else-if Template</div>
} @else {
<div>Else Template</div>
}

 content_paste
<ng-container *ngIf="ifCondition; else elseIfTemplate">
  <div>If template</div>
</ng-container>
 
<ng-template #elseIfTemplate>
  <ng-container *ngIf="elseIfCondition; else elseTemplate">
    <div>Else-if Template</div>
  </ng-container>
</ng-template>
 
<ng-template #elseTemplate>
  <div>Else Template</div>
</ng-template>

For completeness let's also take a look at the new syntaxes to iterate over a collection (*ngFor) and how to create a switch expression (*ngSwitch).

 content_paste
@for todo of todo; track item.id {
<li>{{ todo.description }}</li>
} @empty {
<li>Congratulations! You've conquered your to-do list.</li>
}

 content_paste
@switch (card.kind) { @case 'summary' {
<app-summary-card [card]="card" />
} @case 'image' {
<app-image-card [card]="card" />
} @default {
<app-simple-card [card]="card" />
} }

For more information see the Angular blog post Meet Angular’s New Control Flow.

10. Cypress to Playwright converters

Migrating from one test library to another can be a daunting task, but with the right tools, we can make it a smoother transition.

To help with this task I've encountered two similar tools that rewrite your Cypress code to its equivalent in Playwright.

The first of these tools is https://demo.playwright.dev/cy2pw/, and the second one https://ray.run/tools/cypress-to-playwright (you should also check out the blog on this website for more goodies!).

On the websites, you can simply paste your Cypress code, and you'll receive the test cases rewritten in Playwright ✨. Just like that.

These tools can be used for a couple of reasons:

• trying out Playwright without wasting time
• quickly see what the Playwright equivalent is of a code block
• rewrite a specific piece of code (think of a test that you aren't able to write properly, or don't know where to start), or even rewrite entire files
• motivate your team to try/use Playwright
• hit the ground running from day one

In short, the mentioned tools help you with the transition from Cypress to Playwright.

Side note: if you have a GitHub Copilot license you can also prompt your Copilot to migrate a test or file for you. In a small demo application, this worked out fine for me.

Here's a small example to give you an idea of a migration:

 cypress.test.ts content_paste
describe('example to-do app', () => {
  beforeEach(() => {
    cy.visit('https://example.cypress.io/todo')
  })
 
  it('displays two todo items by default', () => {
    cy.get('.todo-list li').should('have.length', 2)
    cy.get('.todo-list li').first().should('have.text', 'Pay electric bill')
    cy.get('.todo-list li').last().should('have.text', 'Walk the dog')
  })
 
  it('can add new todo items', () => {
    const newItem = 'Feed the cat'
    cy.get('[data-test=new-todo]').type(`${newItem}{enter}`)
    cy.get('.todo-list li')
      .should('have.length', 3)
      .last()
      .should('have.text', newItem)
  })
})

 playwright.test.ts content_paste
import { test, expect } from '@playwright/test';
 
test.describe('example to-do app', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('https://example.cypress.io/todo');
  });
 
  test('displays two todo items by default', async ({ page }) => {
    await expect(page.locator('.todo-list li')).toHaveCount(2);
    await expect(page.locator('.todo-list li').first()).toHaveText(
      'Pay electric bill'
    );
    await expect(page.locator('.todo-list li').last()).toHaveText(
      'Walk the dog'
    );
  });
 
  test('can add new todo items', async ({ page }) => {
    const newItem = 'Feed the cat';
    await page.locator('[data-test=new-todo]').fill(newItem);
    await page.locator('[data-test=new-todo]').press('Enter');
    await expect(page.locator('.todo-list li')).toHaveCount(3);
    await expect(page.locator('.todo-list li').last()).toHaveText(newItem);
  });
});

For more Playwright content, check out my blog posts about 🎭 Playwright.

9. Switch Exhaustiveness

How many times have you added a new option (enum, union, expression, ...) without updating all code paths? Did this result in unforeseen issues?

One of the reasons why I prefer switch statements over if-else conditions is that it supports exhaustiveness checks. This is incredibly useful because it ensures that no scenario is left unhandled, reducing the risk of unexpected bugs or runtime errors. It also shortens the feedback loop because your IDE immediately flags incomplete switch statements.

Personally, I also find a switch statement more readable in contrast to an if-else condition.

The Switch Exhaustiveness check is not enabled by default, so you'll have to enable it.

In C# applications the default behavior is that a non-exhaustive switch is a warning. To turn this into an error, configure the TreatWarningsAsErrors compiler option in your project(s). If you just want to treat specific warnings as an error, use the WarningAsErrors compiler option instead, which accepts warning numbers, e.g. <WarningsAsErrors>CS8509</WarningsAsErrors>.

Now, when a switch is not exhaustive, it results in a compilation error.

 ExampleProject.csproj content_paste
<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
 
    <!-- All warnings are errors -->
    <TreatWarningsAsErrors>true</TreatWarningsAsErrors>
 
    <!-- Only specific warnings are errors -->
    <WarningsAsErrors>CS8509</WarningsAsErrors>
  </PropertyGroup>
</Project>

 Example.cs content_paste
string Color(RGB input)
{
    return input switch
    {
        RGB.Red => "rgb(255, 0, 0)",
        RGB.Green => "rgb(0, 255, 0)",
        // RGB.Blue is not handled
    };
}
 
enum RGB { Red, Green, Blue };

 Output content_paste
The 'switch' expression does not handle all possible inputs (it is not exhaustive).
For example, the pattern 'RGB.Blue' is not covered.

For TypeScript applications, enable the switch-exhaustiveness-check ESLint rule. It's best to configure this rule as an error so it catches your attention.

Enabling the ESLint rule doesn't prevent the application from building. As an alternative, manually add a default case that turns into a compiler error when it detects a non-exhaustive switch. For this, you can use the never type. Now this will also result in a compiler error.

 .eslintrc. content_paste
module.exports = {
  "rules": {
    "@typescript-eslint/switch-exhaustiveness-check": "error"
  }
};

 example.ts content_paste
function color(input: RGB)
{
    switch (input) {
        case 'Red':
            return 'rgb(255, 0, 0)';
        case 'Green':
            return 'rgb(0, 255, 0)';
        // Blue is not handled
    }
}
 
type RGB = 'Red' | 'Green' | 'Blue'

 Output content_paste
Switch is not exhaustive.
Cases not matched: "Blue".

 example.ts content_paste
function color(input: RGB)
{
    switch (input) {
        case 'Red':
            return 'rgb(255, 0, 0)';
        case 'Green':
            return 'rgb(0, 255, 0)';
        // Blue is not handled
 
        default:
            // TS1360: Type  string  does not satisfy the expected type  never
            input satisfies never;
    }
}
 
type RGB = 'Red' | 'Green' | 'Blue'

8. The Evolution of C# Constructors

C# 12 introduces a new syntax to declare class constructors with Primary Constructors. That's why I thought that it's a good time to look back at the evolution of C# constructors. Starting from the most basic constructor that most of us are familiar with, to the newer variations that were added in latest the C# versions.

 Person.ts content_paste
public class Person
{
    public long Id { get; }
    public string Name { get; }
 
    public Person(int id, string name)
    {
        Id = id;
        Name = name;
    }
}

 Person.ts content_paste
public class Person
{
    public long Id { get; }
    public string Name { get; }
 
    public Person(int id, string name)
        => (Id, Name) = (id, name);
}

 Person.ts content_paste
public class Person
{
    public required long Id { get; init; }
    public required string Name { get; init; }
}

 Person.ts content_paste
public class Person(long id, string name)
{
    public long Id { get; } = id;
    public string Name { get; } = name;
}

7. Simplified Node.js Version Management with fnm

Are you working on multiple projects that each require a different Node.js version, and are you tired of juggling between them? Then I've got the right tool for you, fnm (Fast Node Manager).

fnm is a Node.js version manager that allows you to install and switch between different Node.js versions on the fly.

What I especially like about fnm, compared to similar version managers, is that it provides a seamless experience by automatically switching to the correct version when it detects a .node-version (or .nvm) file in your project's directory.

For example, let's say you have two projects, awesome-project and great-project, and each of them requires a different Node.js version:

 content_paste
cd ./awesome-project
> Can\'t find an installed Node version matching v18.16.x.
> Do you want to install it? answer [y/n]: y
> Installing Node v18.16.1 (x64)
> Using Node v18.16.1

 content_paste
cd ./great-project
> Using Node v16.13.2

In the preceding example, fnm automatically switched to the correct Node.js version for each project. Because awesome-project requires a Node.js version that isn't installed yet, we received a prompt asking if we want to install it.

To set the Node.js version for a project, create a .node-version file in your project's directory and add the version number to it:

 .node-version content_paste
18

Other helpful fnm commands are install, use, default, and current:

 content_paste
# Install a new Node.js version
fnm install 18

 content_paste
# Set the default Node.js version
# (used when no .node-version file is found)
fnm default 18

 content_paste
# Use the specified Node.js version for the current shell
fnm use 18

 content_paste
# Log the current Node.js version
fnm current
> v18.16.1

Bonus: GitHub Codespaces is great to use for switching between multiple project configurations that require bigger changes, when you just need a clean environment to work in, or to quickly test something out. You can easily create a new Codespace while working (or using an existing Codespace for reviewing) for changes that have a big impact on your environment, e.g. an upgrade of an SDK, such as .NET, Node.js, ...

6. Git Log Heatmap

Use git log to create a heatmap of the files that have been changed the most frequently within a repository. This is useful to identify the files that most likely need a closer look. For example, the file contains too much logic and should be split up into multiple files, it contains hot code paths that change frequently, or maybe it's a file with a history of many fixes.

The following git log command returns a list of files (excluding json and lock files) that have been changed within the last 6 months, sorted by the number of changes.

 content_paste
git log --since 6.months.ago --pretty=format: --name-only `
    | Where-Object { ![string]::IsNullOrEmpty($_) } `
    | ?{$_ -notmatch ".(json|lock)$" } `
    | Sort-Object `
    | Group-Object `
    | Sort-Object -Property Count -Descending `
    | Select-Object -Property Count, Name -First 25

 content_paste
git log --since 6.months.ago --pretty=format: --name-only  \
    | sed '/^\s*$/'d \
    | grep -v -E '*\.(json|lock)$' \
    | sort \
    |  uniq -c \
    |  sort -nr  \
    | head -n 25

5. Raw SQL Queries for Unmapped Types in Entity Framework 8

Entity Framework 8 has a new feature that allows you to execute raw SQL queries against the database and return results as unmapped types. To use this feature, use the new SqlQuery method on the Database property of your DbContext instance.

This feature is useful when you want your query to return a specific type for a specific purpose. For example, in many cases you don't need/want the overhead of returning your full-blown entity for search queries. Instead, you want a optimized entity (e.g. a DTO) that only contains the data you need for that specific purpose. Usually this results in a faster query and less data transferred over the wire.

See my blog post You can now return unmapped types from raw SQL select statements with Entity Framework 8 for more info about this new feature.

 SELECT QUERY TO RETRIEVE A COLLECTION content_paste
var customers  = await dbContext.Database
    // 👇 Map to a unmapped type
    .SqlQuery<CustomerDto>(
        $"""
            SELECT
                c.Id as CustomerId,
                c.FirstName,
                a.Street
            FROM dbo.Customers c
            JOIN dbo.Addresses a ON c.Id = a.CustomerId
            """
    )
    .ToListAsync();

 SELECT QUERY TO RETRIEVE A COLLECTION content_paste
SELECT
       c.Id as CustomerId,
       c.FirstName,
       a.Street
FROM dbo.Customers c
JOIN dbo.Addresses a ON c.Id = a.CustomerId

 Select Query with a parameter within the where clause content_paste
var customers = await dbContext.Database
    .SqlQuery<CustomerDto>(
        $"""
            SELECT
                c.Id as CustomerId,
                c.FirstName,
                a.Street
            FROM dbo.Customers c
            JOIN dbo.Addresses a ON c.Id = a.CustomerId
            --                             👇 Use parameters in your query
            WHERE c.FirstName like '%' + {customerName} + '%'
            """
    )
    .ToListAsync();

 Select Query with a parameter within the where clause content_paste
exec sp_executesql N'SELECT
       c.Id as CustomerId,
       c.FirstName,
       a.Street
FROM dbo.Customers c
JOIN dbo.Addresses a ON c.Id = a.CustomerId
--                             👇 Parameterized
WHERE c.FirstName like ''%'' + @p0 + ''%''
',N'@p0 nvarchar(4000)',@p0=N'ali'

 Select Query using LINQ to retrieve a single entity content_paste
var customer = await dbContext.Database
    .SqlQuery<CustomerDto>(
        $"""
            SELECT
                c.Id as CustomerId,
                c.FirstName,
                a.Street
            FROM dbo.Customers c
            JOIN dbo.Addresses a ON c.Id = a.CustomerId
            """
    )
    // 👇 SqlQuery returns a IQueryable<TResult> so you can use LINQ as well
    .SingleOrDefaultAsync(c => c.CustomerId == customerId);

 Select Query using LINQ to retrieve a single entity content_paste
exec sp_executesql N'SELECT TOP(2) [c].[CustomerId], [c].[FirstName], [c].[Street]
FROM (
    SELECT
        c.Id as CustomerId,
        c.FirstName,
        a.Street
    FROM dbo.Customers c
    JOIN dbo.Addresses a ON c.Id = a.CustomerId
) AS [c]
--                       👇 LINQ filters also are parameterized
WHERE [c].[CustomerId] = @__customerId_1',N'@__customerId_1 int',@__customerId_1=1

4. Big List of Naughty Strings

Does your application correctly handle all kinds of input correctly? Do you need some inspiration to test your application with some edge/special cases?

Look no further, the Big List of Naughty Strings is here to help you! There are different sets of inputs, from the boring "Reserved Strings" and "Special Characters" cases to the more interesting variants like "(Server and Client) Injections", "Unicode fonts", "Known CVEs and Vulnerabilities", "Special Filenames", and more.

Take a look at the repository and start copy-pasting some of the strings in your application, or use one of the libraries (e.g. NaughtyStrings for .NET, or blns for Node.js ) to automate this process.

Fun fact: I couldn't generate the banner for this bit (in various tools) because it contained a few naughty strings that broke the export.

For the entire set see big-list-of-naughty-strings/blns.txt, here's a small sample:

 big-list-of-naughty-strings.txt content_paste
null
0,,0

<foo val=“bar” />
찦차를 타고 온
❤️ 💜 💛 💚 💙
⒯⒣⒠ 𝒒𝒖𝒊𝒄𝒌 𝕓𝕣𝕠𝕨𝕟 𝖋𝖔𝖝 𝖏𝖚𝖒𝖕𝖘 𝕠𝕧𝕖𝕣 𝕥𝕙𝕖 𝖑𝖆𝖟𝖞 ｄｏｇ
(｡◕ ∀ ◕｡)
<img src=x onerror=alert(2) />
'; EXEC sp_MSForEachTable 'DROP TABLE ?'; --
{{ "".__class__.__mro__[2].__subclasses__()[40]("/etc/passwd").read() }}
h̖̯͓o̝͙̖͎̱̮ ҉̺̙̞̟͈W̷̼̭a̺̪͍į͈͕̭͙̯̜t̶̼̮s̘͙͖̕ ̠̫̠B̻͍͙͉̳ͅe̵h̵̬͇̫͙i̹͓̳̳̮͎̫̕n͟d̴̪̜̖ ̰͉̩͇͙̲͞ͅT͖̼͓̪͢h͏͓̮̻e̬̝̟ͅ

3. Http Files

.http files are a simple way to quickly invoke your API endpoints because you don't have to leave your IDE to use a separate tool. I use it regularly when I'm building a new feature.

You can commit this file to your repository so that your teammates can also make use of it!

HTTP files are supported by most IDEs (for Visual Studio Code, you'll have to install the REST Client extensions), the only caveat is that the variables syntax is (currently) different between Visual Studio products and JetBrains products.

Here's an example of a .http file for a Todo API:

 todoitems.http content_paste
@base=https://localhost:5167
 
### Create a new item
 
POST {{base}}/todoitems
Content-Type: application/json
 
{
  "name":"walk dog",
  "isComplete":false
}
 
### Get All items
 
GET {{base}}/todoitems
 
### Update item
 
PUT {{base}}/todoitems/1
Content-Type: application/json
 
{
  "id": 1,
  "name":"walk dog",
  "isComplete": true
}
 
### Delete item
 
DELETE {{base}}/todoitems/1

For more information, check out the documentation for the various IDEs:

• Visual Studio
• Visual Studio Code (HTTP extension)
• JetBrains Rider
• JetBrains WebStorm

2. Angular Input enhancements

The Angular 16 release adds useful enhancements to the @Input decorator. We can make an input required, we can transform the input value, and we can bind inputs route data (parameters, query parameters, and the route data property).

We can transform the input value by providing a transform method, which is invoked with the input value. Angular already provides the numberAttribute and booleanAttribute transform methods, but you can also implement your own.

 child.component.ts content_paste
import { Input, numberAttribute, booleanAttribute } from '@angular/core';
 
@Component()
export class ChildComponent {
  // Required when a parent component renders this component
  // <child-component [componentParam]="parameterValue" />
  // If the param is not provided, this turns into the following compile error
  // Required input 'param' from component ChildComponent must be specified.
  @Input({ required: true })
  componentParam = '';
 
  // Parameter based on the :paramKey route parameter
  // /child-route/abc
  @Input()
  paramKey = '';
 
  // Parameter based on the :paramKey query parameter ?queryId
  // /child-route/abc?queryId=123
  // When the query parameter is not provided, or is not a number
  // then the fallback value (3) is assigned to the property
  @Input({
    transform: (value: unknown) => numberAttribute(value, 3),
  })
  queryId = 0;
 
  // Parameter based on the data `dataParam` property of the route
  // data: { dataParam: { layout: 'medium' } }
  @Input()
  dataParam?: { layout: string };
}

To be able to bind the route data to component inputs, you need to configure the Angular router by including the new withComponentInputBinding().

 app.config.ts content_paste
import { ApplicationConfig } from '@angular/core';
import { provideRouter, withComponentInputBinding } from '@angular/router';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(
      [
          {
            path: 'child-route/:paramKey',
            loadComponent: () =>
              import('./child/child.component').then((mod) => mod.ChildComponent),
            data: {
              dataParam: { layout: 'medium' },
            },
          }
      ],
      // 👇 Add this line to enable component input binding
      withComponentInputBinding(),
    ),
  ],
};

1. Tools to keep your NPM dependencies up-to-date

You can use the default npm commands npm outdated (check the registry to see if any packages are currently outdated) and npm update (update all the packages listed to the latest version, respecting the semver constraints of both your package and its dependencies).

 content_paste
# list packages respecting semver
npm outdated
# update package.json
npm outdated --save
# update and install packages
npm update

But, to get a more detailed and prettier overview of the dependencies, you resort to the CLI tool 🥦 taze, which also works for monorepos.

 content_paste
# list packages respecting semver
npx taze
# include major versions
npx taze major
# write to package.json
npx taze -w

The Visual Studio Code users among us can install the NPM extension to get a nice sidebar with the package information (and quick actions to update them). Just take a little glance at the sidebar to see if there are any updates available.

 content_paste
code --install-extension idered.npm --force
code-insiders --install-extension idered.npm --force

Follow me

You can find me on Twitter, LinkedIn, and GitHub.

Support me

I appreciate it if you would support me if have you enjoyed this post and found it useful, thank you in advance.