40. An improved content projection experience with fallback content

In Angular 18 you will be able to specify fallback content for ng-content slots. This feature allows you to define default content within ng-content tags, if no content is projected into these slots then the specified default content will be displayed.

In previous versions this was also possible, but included a hacky workaround to make this work. This hack involves using a directive to check if the projected content is empty and then conditionally rendering the default content. This approach is not ideal as it requires additional code that's hard to read and can be error-prone.

 child.component.html content_paste
<ng-content select="[super-header]">
  <h1>Default Header</h1>
</ng-content>
<ng-content>
  <p>Default Content</p>
</ng-content>

 parent.component.html content_paste
<app-child>
  <div>Some content</div>
</app-child>

 rendered.html content_paste
<h1>Default Header</h1>
<div>Some content</div>

39. Take control of query parameterization in EF 9

In Entity Framework 9 we will have more control on how parameters and constants are used within the generated SQL queries. Using the two new methods EF.Parameter and EF.Constant you can decide on how the query parameters are generated, which is useful when you want to force or prevent query parameterization.

• EF.Parameter is used to indicate that the parameter should be used as a parameter in the generated SQL query.
• EF.Constant is used to indicate that the parameter should be used as an inline constant in the generated SQL query.

This feature makes it easier to manage the query plans that are created, and thus can help to improve the performance of your queries and application.

 content_paste
var blogs = await ctx.Set<Blog>()
    .Where(blog => blog.Title.Contains(EF.Parameter("entity framework")))
    .ToListAsync();

 content_paste
SELECT [b].[Id], [b].[Tags], [b].[Title]
FROM [Blog] AS [b]
WHERE [b].[Title] LIKE @__p_0_contains
WHERE [b].[Title] LIKE '%entity framework%' -- before using EF.Parameter

 content_paste
var blog = await ctx.Set<Blog>()
    .Where(blog => blog.Id == EF.Constant(id))
    .SingleAsync();

 content_paste
SELECT TOP(2) [b].[Id], [b].[Tags], [b].[Title]
FROM [Blog] AS [b]
WHERE [b].[Id] = 1
WHERE [b].[Id] = @__id_0 -- before using EF.Constant

For more information, see the "What's New in EF Core 9" documentation.

38. Improvements to `dotnet test` in .NET9

So far, the preview versions of .NET 9 have introduced two improvements to the dotnet test command.

• 💅 The output logs will use the new terminal logger by default, resulting in a better experience with more clearly arranged output. The terminal logger was introduced in .NET 8 as an opt-in alternative to the normal console logger. The new behavior uses the new terminal logger by default for environments that support this, and can be disabled using the --tl:off switch. For more information and the reasoning for this new behavior see Terminal logger is default
• 🏎️ Test projects that hit different Target Frameworks will be run in parallel. This means that you will receive the test results faster. By default the number of parallel processes will be the number of processors on the computer, it can also be configured using the -maxcpucount:N switch.

This results in a better experience for developers and faster feedback loops when running tests.

For more info about Unit Testing .NET 9 see the documentation.

37. Load testing

To measure is to know. As a developer, it's crucial to evaluate your system's capability for building robust and reliable software applications.

Load testing is a key aspect of this evaluation process. It helps you understand how your system performs under varying loads, from real-world loads to anticipated peak load conditions. By subjecting your system to different levels of load, you can identify potential performance bottlenecks, stability issues, and scalability concerns. This information is invaluable for optimizing your system, ensuring it can handle the expected user loads resulting in a positive user experience and preventing system failures under high loads.

Why is Load Testing Important? link

• Performance Optimization: Load testing helps identify the (maximum) operating capacity of an application, any bottlenecks or weak points in your system, and determine which element is causing degradation. This can help you optimize the performance of your application.
• Regression Testing: Load testing helps you to identify performance trends in your application. By introducing tests you can ensure that new features or changes do not negatively impact the performance of your application.
• Scalability Planning: Measuring is knowing. You can plan the infrastructure better when you know the number of users your application can handle and act accordingly.
• Improved User Experience: By ensuring that your application can handle expected user loads, you can provide a better user experience. Slow or unresponsive applications can lead to user dissatisfaction.

Why Invest Time in Load Testing? link

Investing time in load testing is a preventive measure to ensure system readiness and performance capability. It’s about being proactive rather than reactive. Without proper load testing, your application could fail spectacularly at the worst possible time - when there are maximum users on the system.

In conclusion, load testing is not just a one-time task but a crucial part of the continuous delivery process. It ensures that your application will perform well under pressure, providing a seamless experience for your users, and ultimately, contributing to the success of your software or application.

How to Perform Load Testing? link

There are several tools available for load testing, here are a few that I've used in the past:

• Bombardier: a simple CLI tool for load testing a single URL. Useful for quick tests, for example, to test the configured Rate limiting on an API. East to configure.
• Artillery: define test scenarios with various load phases using YAML. Artillery has a built-in Playwright engine. Easy to configure in your CI/CD pipeline.
• K6: write test scripts in JavaScript. It has a (paid) cloud service for running tests at scale. Easy to be added to your CI/CD pipeline. K6 has a useful browser extension to record user flows.
• Apache JMeter: for if you like a GUI to create and execute tests. A battle-tested tool.

36. SQL Temporal Tables

SQL Temporal Tables is a feature that allows you to keep a history of changes to a table without an effort. By enabling SYSTEM_VERSIONING on a table, SQL Server creates a history table and keeps track of changes to the table. This is useful for auditing purposes, or for tracking changes to data over time.

 content_paste
CREATE TABLE dbo.Person (
  [Id] UNIQUEIDENTIFIER NOT NULL,
  [Name] NVARCHAR(100) NOT NULL,
  [ValidFrom] DATETIME2 GENERATED ALWAYS AS ROW START,
  [ValidTo] DATETIME2 GENERATED ALWAYS AS ROW END,
  PERIOD FOR SYSTEM_TIME(ValidFrom, ValidTo),
  CONSTRAINT [PK_Person] PRIMARY KEY CLUSTERED (Id)
)
WITH (SYSTEM_VERSIONING = ON (HISTORY_TABLE = dbo.PersonHistory));

format_quote

Temporal tables (also known as system-versioned temporal tables) are a database feature that brings built-in support for providing information about data stored in the table at any point in time, rather than only the data that is correct at the current moment in time. Because it keeps a full history of data changes, it allows for easy point-in-time analysis.

This is useful for:

• Auditing all data changes and performing data forensics when necessary
• Reconstructing state of the data as of any time in the past
• Recovering from accidental data changes and application errors
• Insights to data trends

For more info see the documentation.

Temporal tables are supported by Entity Framework, as I've mentioned in my blog post Entity framework features I wish I knew earlier.

35. Creating a good-looking Windows Terminal

As a developer, I spend a "lot" of time in the terminal. I use it to run various other commands ranging from navigating to folders, running my environment, executing git commands, ...

I want my terminal to be a place that I enjoy spending time in. I want it to be a place where I can be productive.

With my daily driver, the Windows Terminal, I can make it look good and be productive at the same time. The Windows Terminal is highly customizable, and I make use the following tools to make it look good:

• Powershell: the default shell. The Windows terminal also supports other shells.
• Oh My Posh: Make use of one of the beautiful looking themes that are available (or create your own), and add "Segments" to add more information to your prompt. For example, the current git branch (including changes), the .NET/Node.js version, the current Spotify song, ...
• Nerd Fonts: to make sure that the icons are displayed correctly.
• Terminal-Icons: display icons to known directories and files to make the terminal more visually appealing.
• Predictive Intellisense: to get suggestions for commands => this boosts my productivity.

Some bonus tips:

• You can open multiple tabs and screens in the terminal.
• Use the Quake mode to open the terminal (which has the focus) on top of your screen with a hotkey.
• Via the settings, you can customize the colors (including the background) and shortcuts to your preference.

I hope this helps you to make your terminal a place where you enjoy spending time in. For more tips and tricks you can check out my blog How I've set up my new Windows development environment (2022), or one of Scott Hanselman's blog posts about customizing the Windows Terminal.

34. Rate limiting in ASP.NET

Rate limiting is a technique used to control the number of requests a client can make to a server. It is often used to prevent abuse of an API, e.g. to protect against denial-of-service attacks.

This feature is implemented as a middleware. To enable rate limiting in your application, add the rate limiter to the service collection, and then enable the middleware within the application.

To configure the rate limiter, you can use one of the built-in limiters to create policies, which can be applied to the whole application or to specific endpoints. The built-in limiters are the following (the descriptions are taken from the official documentation):

• Fixed Window Limiter: uses a fixed time window to limit requests. When the time window expires, a new time window starts and the request limit is reset.
• Sliding Window Limiter: similar to the fixed window limiter but adds segments per window. The window slides one segment each segment interval. The segment interval is (window time)/(segments per window).
• Token Bucket Limiter: similar to the sliding window limiter, but rather than adding back the requests taken from the expired segment, a fixed number of tokens are added each replenishment period. The tokens added each segment can't increase the available tokens to a number higher than the token bucket limit.
• Concurrency Limiter: limits the number of concurrent requests. Each request reduces the concurrency limit by one. When a request completes, the limit is increased by one. Unlike the other requests limiters that limit the total number of requests for a specified period, the concurrency limiter limits only the number of concurrent requests and doesn't cap the number of requests in a time period.

 content_paste
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRateLimiter(options =>
{
    /* Policy configuration here */
});
 
var app = builder.Build();
app.UseRateLimiter();
app.Run();

 content_paste
// Global configuration
builder.Services.AddRateLimiter(options =>
{
    options.GlobalLimiter = /* Implementation here */
});
 
// Specific endpoints (also works with MVC Controllers/Endpoints)
app.MapGet("/", () => Results.Ok("Hello world"))
     .RequireRateLimiting(Policy);
 

 content_paste
builder.Services.AddRateLimiter(_ => _
    .AddFixedWindowLimiter(policyName: "fixed", options =>
    {
        options.PermitLimit = myOptions.PermitLimit;
        options.Window = TimeSpan.FromSeconds(myOptions.Window);
        options.QueueProcessingOrder = QueueProcessingOrder.OldestFirst;
        options.QueueLimit = myOptions.QueueLimit;
    }));

 content_paste
builder.Services.AddRateLimiter(_ => _
    .AddSlidingWindowLimiter(policyName: "sliding", options =>
    {
        options.PermitLimit = myOptions.PermitLimit;
        options.Window = TimeSpan.FromSeconds(myOptions.Window);
        options.SegmentsPerWindow = myOptions.SegmentsPerWindow;
        options.QueueProcessingOrder = QueueProcessingOrder.OldestFirst;
        options.QueueLimit = myOptions.QueueLimit;
    }));

 content_paste
builder.Services.AddRateLimiter(_ => _
    .AddSlidingWindowLimiter(policyName: "token-bucket", options =>
    {
        options.TokenLimit = myOptions.TokenLimit;
        options.QueueProcessingOrder = QueueProcessingOrder.OldestFirst;
        options.QueueLimit = myOptions.QueueLimit;
        options.ReplenishmentPeriod = TimeSpan.FromSeconds(myOptions.ReplenishmentPeriod);
        options.TokensPerPeriod = myOptions.TokensPerPeriod;
        options.AutoReplenishment = myOptions.AutoReplenishment;
    }));

 content_paste
builder.Services.AddRateLimiter(_ => _
    .AddConcurrencyLimiter(policyName: concurrencyPolicy, options =>
    {
        options.PermitLimit = myOptions.PermitLimit;
        options.QueueProcessingOrder = QueueProcessingOrder.OldestFirst;
        options.QueueLimit = myOptions.QueueLimit;
    }));

See the documentation for more details and example implementations. For more examples I also encourage you to take a look at Maarten Balliauw's blog ASP.NET Core rate limiting middleware in .NET 7.

33. The Methods to Update an Array: Cheat Sheet

ECMAScript 2023 (ES2023 or ES14) introduces a fresh set of array instance methods to enhance the way arrays can be modified.

In total four new methods are added, toSorted() (vs sort()), toReversed() (vs reverse()), toSpliced() (vs splice()), and with (vs bracket notation). These methods use immutable operations on arrays, making it easier and more predictable to work with data without directly modifying the original array.

If you're use TypeScript, these methods are available in version 5.2.

Let's dive into these new methods, and at the same time refresh our knowledge for the existing methods.

 content_paste
/**
 * Sorts the array - by id
 * sort: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
 * toSorted: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toSorted
 */
update('sort', (persons) => persons.sort((a, b) => a.id - b.id));
update('sort immutable', (persons) => persons.toSorted((a, b) => a.id - b.id));
 
/**
 * Reverses the array
 * reverse: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse
 * toReversed: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toReversed
 */
update('reverse', (persons) => persons.reverse());
update('reverse immutable', (persons) => persons.toReversed());
 
/**
 * Changes an element in the array
 * bracket notation
 * toSpliced: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/with
 */
update('change (bracket notation)', (persons) => {
  persons[1] = { id: 9, name: 'Updated Person' };
  return persons;
});
update('with immutable', (persons) => persons.with(1, { id: 9, name: 'Updated Person' })); // 🎉 New in ES2023 (and TS 5.2)
 
/**
 * Changes the contents of the array - remove person at index 2 and 3, add new person at index 0
 * splice: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
 * toSpliced: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toReversed
 */
update('splice', (persons) => {
  console.log(persons.splice(2, 2)); // returns the deleted item
  console.log(persons.splice(0, 0, { id: 9, name: 'New Person' })); // returns the deleted item (empty in this case)
  return persons;
});
update('toSpliced immutable', (persons) =>
  persons.toSpliced(2, 2).toSpliced(0, 0, { id: 9, name: 'New Person' }),
); // 🎉 New in ES2023 (and TS 5.2)
 
/**
 * Removes the last element
 * pop: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop
 * slice: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
 */
update('pop', (persons) => {
  console.log(persons.pop()); // returns the deleted item
  return persons;
});
update('slice (remove last) immutable', (persons) => persons.slice(0, -1));
 
/**
 * Removes the first element
 * shift: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift
 * slice: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
 */
update('shift', (persons) => {
  console.log(persons.shift()); // returns the deleted item
  return persons;
});
update('slice (remove first) immutable', (persons) => persons.slice(1));
 
/**
 * Adds element(s) to the end of the array
 * push: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push
 * concat: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat
 */
update('push', (persons) => {
  console.log(persons.push({ id: 9, name: 'New Person' })); // returns the new length
  return persons;
});
update('concat immutable', (persons) => persons.concat({ id: 9, name: 'New Person' }));
 
/**
 * Adds element(s) to the start of the array
 * unshift: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift
 * toSpliced: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toSpliced
 */
update('unshift', (persons) => {
  console.log(persons.unshift({ id: 9, name: 'New Person' }, { id: 10, name: 'Other New Person' })); // returns the new length
  return persons;
});
update('toSpliced immutable', (persons) =>
  persons.toSpliced(0, 0, { id: 9, name: 'New Person' }, { id: 10, name: 'Other Person' }),
);
 
/**
 * Changes all elements within a range to a static value
 * fill: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill
 * ❌: has no immutable version
 */
update('fill', (persons) => persons.fill({ id: 9, name: 'New Person' }, 2, 4));
 
/**
 * Shallow copies part of this array to another location in the same array
 * copyWithin: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin
 * ❌: has no immutable version
 */
update('copyWithin', (persons) => persons.copyWithin(1, 2, 3));
 
// Helpers
function update(description: string, updater: (original: Person[]) => Person[]) {
  const original: Person[] = initPersons();
  const updated = updater(original);
  console.log(`[${description}]`, {
    updated,
    original,
  });
}
 
function initPersons(): Person[] {
  return [
    { id: 2, name: 'Mike Johnson' },
    { id: 1, name: 'Sarah Williams' },
    { id: 5, name: 'David Wilson' },
    { id: 4, name: 'Emily Davis' },
    { id: 3, name: 'Michael Johnson' },
  ];
}
type Person = { id: number; name: string };

For additional details, check out the MDN documentation. Besides the new mutable methods, the ES2023 also added the findLast, and findLastIndex methods for an easy lookup of the last element in an array.

A runnable example can be found in the following the TypeScript Playground.

32. Angular DevTools

The Angular DevTools is a browser extension that provides debugging and profiling capabilities for Angular applications. With the DevTools you can explore the component tree and investigate (and edit) the state of your components.

Using the profiler you can visualize the execution of Angular’s change detection and use this to identify performance bottlenecks.

This feature makes it easy to compare the different change detection strategies. The benefits of local change detection, which Rainer Hahnekamp explains in his blog Local Change Detection in Angular, will clearly be visible in the profiler.

31. Snapshot testing in C# with Verify

Why snapshot testing link

Snapshot testing is a powerful technique that allows you to compare the output of your code with a previously stored value, also known as a snapshot. This way, you create a quick feedback loop to easily detect any changes or regressions in your code without having to write complex assertions.

I like to write snapshot tests to compare the output of a (large or complex) contract against a pre-defined data model. This is often faster to write and easier to read (also by non-technical people) in comparison to writing a complex assertion with code.

How does it work link

Snapshot testing usually stores a previously generated output as a separate file. When the test case is re-executed it compares the new output (local, not included in git) against the stored file (which is included in git). If the new output matches the existing output the test will pass, otherwise the test will fail. When the latter is the case, you can either update the snapshot if the change is desired or investigate the change(s) if the output is unexpected.

Using Verify in C# link

For snapshot testing in C# you can use the Verify snapshot tool.

Verify is a simple library that you can use as a standalone tool, or you can use one of its opt-in integrations with popular testing frameworks, such as NUnit, xUnit, and MSTest. A killer feature is that Verify also provides a rich diffing tool (think of a git compare) to help you understand the differences between snapshots, including helpful "accept" and "reject" features to update the snapshots.

To write a snapshot test with Verify use one of the Verify methods within a test to return the model under test. By default it uses the fully qualified method name of the test case to create the existing output file (*.verified.*) and the newly generated file (*.received.*). Every time the test case is executed, the received file is re-created and compared with the verified file.

To make the managing of snapshots easier, you can make use of IDE plugins (ReSharper Plugin or Rider Plugin) or the dotnet cli tool.

As an example let's take a look at the following flow using Verify.

 Tests.cs content_paste
public class Tests
{
    [Test]
    public Task Person_matches_with_contract()
    {
        var person = new Person(7, "Tim", "Running");
        return Verify(person);
    }
}

 The initial file that is received content_paste
+ {
+    id: 7,
+    name: Tim,
+    hobby: Running,
+ }

 The compare between the received and existing files after a change content_paste
{
     id: 7,
     name: Tim,
-    hobby: Running
}

 Test outcome to accept or reject content_paste
Failed Person_matches_with_contract
Error Message:
   VerifyException
NotEqual:
  - Received: Tests.Person_matches_with_contract.received.txt
    Verified: Tests.Person_matches_with_contract.verified.txt
FileContent:
NotEqual:
Received: Tests.Person_matches_with_contract.received.txt
{
   Id: 7,
   Name: Tim
}
Verified: Tests.Person_matches_with_contract.verified.txt
{
  Id: 7,
  Name: Tim,
  Hobby: Running
}

30. Simplify Grouping Arrays in JavaScript with Object.groupBy()

Grouping an array of objects in JavaScript no longer needs to be complex. The new Object.groupBy() static method simplifies this task by allowing you to group elements based on string values returned by the callback function.

Previously, achieving this required manual grouping (using methods like reduce) or relying on external libraries like Lodash. However, with Object.groupBy(), you can achieve the same result in a more readable and concise manner.

Here are the key points:

• 💫 Functionality: group elements based on a specified string (object key or custom string).
• 💁 Browser Compatibility: available in modern browsers.
• 🛠️ TypeScript Support: included in v5.4-beta.

 content_paste
type Player = { name: string; team: string; yearsActive: number };
const players: Player[] = [
  {
    name: 'Player 1.1',
    team: 'Team One',
    yearsActive: 3,
  },
  {
    name: 'Player 1.2',
    team: 'Team One',
    yearsActive: 5,
  },
  {
    name: 'Player 2.1',
    team: 'Team Two',
    yearsActive: 1,
  },
  {
    name: 'Player 3.1',
    team: 'Team Three',
    yearsActive: 8,
  },
  {
    name: 'Player 3.2',
    team: 'Team Three',
    yearsActive: 2,
  },
];

 content_paste
const playersByTeam = Object.groupBy(players, (player) => {
  return player.team;
});

 content_paste
const playersByExperience = Object.groupBy(players, (player) => {
  // instead of creating groups based on a property
  // we can also return a generated group key
  return player.yearsActive <= 2 ? 'Rookies' : 'Veterans';
});

 content_paste
const playersByTeam = players.reduce(
  (group, player) => {
    if (group.hasOwnProperty(player.team)) {
      group[player.team] = [...group[player.team], player];
      return group;
    }
 
    group[player.team] = [player];
    return group;
  },
  {} as Record<string, Player[]>,
);

To explore and experiment with Object.groupBy(), check out the following TypeScript playground to see the code in action.

29. Entity Framework Include Filters

The location where you filter (included) entities is important, as it has a significant impact on the result set. Without knowing the details, it's easy to make assumptions and make a subtle mistake while filtering entities.

I know I made the mistake numerous times, even not so long ago, and I'm sure I'm not the only one. That's why I decided to write this Bit, to raise awareness about the small but important details.

The following examples illustrate the difference between including filtered entities (using Where), and filtering entities after the include (using Any in this example) statement.

 content_paste
[
  {
    "FullName": "Tiffany Gerlach",
    "Addresses": [
      {
        "Street": "70 Delmer Ways",
        "ZipCode": "2377"
      },
      {
        "Street": "61 Trisha River",
        "ZipCode": "7470"
      }
    ]
  },
  {
    "FullName": "Milford Nader",
    "Addresses": [
      {
        "Street": "86 Feeney Pine",
        "ZipCode": "6560"
      },
      {
        "Street": "23 Hauck Run",
        "ZipCode": "3610"
      }
    ]
  }
]

The first example retrieves all persons and only includes the addresses matching the ZipCode predicate. Does not filter the "root" entity.

 content_paste
var persons = await dbContext.Set<Person>()
  .Include(p => p.Addresses.Where(a => a.ZipCode == "7470"))
  .ToListAsync();

 content_paste
[
  {
    "FullName": "iffany Gerlach",
    "Addresses": [
      {
        "Street": "61 Trisha River",
        "ZipCode": "7470"
      }
    ]
  },
  {
    "FullName": "Milford Nader",
    "Addresses": []
  }
]

The second example only retrieves persons that contain the specified ZipCode condition, with all their addresses. Filters the "root" entity, not the children.

 content_paste
var persons = await dbContext.Set<Person>()
  .Include(p => p.Addresses)
  .Where(p => p.Addresses.Any(a => a.ZipCode == "7470"))
  .ToListAsync();

 content_paste
[
  {
    "FullName": "Tiffany Gerlach",
    "Addresses": [
      {
        "Street": "70 Delmer Ways",
        "ZipCode": "2377"
      },
      {
        "Street": "61 Trisha River",
        "ZipCode": "7470"
      }
    ]
  }
]

28. Automatically verify that team rules are met using Architectural Tests

Every team has rules and agreements on how to write and structure code. In the best case, these are documented, and yes we all know that developers don't like to read documentation, also every team has its unwritten rules. Some of these rules carry over across teams e.g. best practices, while others do not and are team-specific e.g. a personal preference or some historical reason.

So how do you make sure that everyone including new team members follow the team's style? We already established that it's hard to stick to the rules using a wiki. Pair programming and pull requests do help, but this doesn't scale well. This also leaves room for inconsistencies.

Instead of a human verifying if the rules are followed, we need a way to automate this process. While doing so, the agreed team rules are set in stone and cannot be ignored or misinterpreted.

Teams already rely on automated tests to test the functional requirements (and probably the non-functional requirements) of the application. So why not include test cases to test if your team rules are met?

As a solution, we can resort to Architectural Tests. Architectural Tests are comparable to unit tests and are focused on the architecture as a way to enforce team rules and agreements.

Automating this process gives the same benefits as other tests, it saves time and shortens the feedback loop. And one needs to be the bad guy while (repeatedly) commenting on someone else's code. As a result, this widens the pit of success. The same rules apply to every team member, this greatly improves the consistency within your codebase.

Some good candidates that qualify to write Architectural Tests are:

• Naming rules
• Dependency rules (Namespace and Types)
• Folder/namespace structure rules
• Attribute-based rules

To write architecture tests we use the ArchUnitNET package (a port from the popular ArchUnit package in the Java ecosystem). Using its FluentAPI rules (tests) can be created to assert the structure of a system. When a test fails, it provides a descriptive and clear error message, in which you can also include a reason.

Some practical examples:

 content_paste
public class ArchituralTests
{
    private static readonly Architecture Architecture =
        new ArchLoader().LoadAssemblies(
            typeof(Domain.AssemblyReference).Assembly
        ).Build();
 
    [Test]
    public void Only_AggregateRoots_end_with_root_in_the_name()
    {
        IArchRule classesToEndWithRoot = Classes()
            .That()
            .ResideInNamespace("Domain")
            .And()
            .ImplementInterface(typeof(IAggegrateRoot))
            .Should()
            .HaveNameEndingWith("Root");
 
        IArchRule classesDontEndWithRoot = Classes()
            .That()
            .ResideInNamespace("Domain")
            .And()
            .HaveNameEndingWith("Root")
            .Should()
            .ImplementInterface(typeof(IAggegrateRoot))
            .Because("To prevent confusion, only aggregate roots can end with 'Root'.")
            .AndShould()
            .BeSealed();
 
        IArchRule rootRules = classesToEndWithRoot
                .And(classesDontEndWithRoot);
 
        rootRules.Check(Architecture);
    }
}

 content_paste
public class ArchituralTests
{
    private static readonly Architecture Architecture =
        new ArchLoader().LoadAssemblies(
            typeof(Domain.AssemblyReference).Assembly,
        ).Build();
 
    [Test]
    public void Core_doesnt_have_a_dependency_on_infrastructure()
    {
         IObjectProvider<IType> forbiddenLayer = Types()
             .That()
             .ResideInNamespace("Infrastructure")
             .As("Infrastructure Layer");
 
        TypesShouldConjunction violations = Types()
            .That()
            .ResideInAssembly(typeof(Domain.Domain).Assembly)
            .Should()
            .NotDependOnAny(forbiddenLayer);
 
        violations.Check(Architecture);
    }
}

 content_paste
public class ArchituralTests
{
    private static readonly Architecture Architecture =
        new ArchLoader().LoadAssemblies(
            typeof(Migrations.AssemblyReference).Assembly
        ).Build();
 
    [Test]
    public void Migrations_are_annotated_with_the_MigrationsAttribute_and_follow_the_agreed_upon_name_convention()
    {
        IArchRule migrationConventionRule = Classes()
            .That()
            .ResideInNamespace("Migrations.Migrations")
            .Should()
            .HaveAnyAttributes(typeof(FluentMigrator.MigrationAttribute))
            .Because("Otherwise the migration isn't run")
            .AndShould()
            .HaveFullName("^Migration_\\d{12}_[A-Za-z0-9_]+?$", true)
            .Because("The filename impacts the order of execution");
 
        migrationConventionRule.Check(Architecture);
    }
}

 content_paste
public class ArchituralTests
{
    private static readonly Architecture Architecture =
        new ArchLoader().LoadAssemblies(
            typeof(Domain.AssemblyReference).Assembly,
            typeof(WebApi.AssemblyReference).Assembly
        ).Build();
 
    [Test]
    public void Empty_classes_are_not_allowed()
    {
        var classesWithoutBody = Classes()
            .GetObjects(Architecture)
            .Where(clazz =>
            {
                return !clazz.GetFieldMembers().Any()
                       && !clazz.GetPropertyMembers().Any()
                       && clazz.GetMethodMembers().All(methodMember => methodMember.IsConstructor());
            });
 
        Assert.Multiple(() =>
        {
            foreach (var clazz in classesWithoutBody)
            {
                Assert.Fail($"The class '{clazz.Name}' doesn't have a body, did you forget to clean this up?");
            }
        });
    }
 
    [Test]
    public void Models_always_have_an_empty_internal_constructor()
    {
        var modelsWithoutCtor = Classes()
            .That()
            .ResideInNamespace("Models")
            .GetObjects(Architecture)
            .Where(clazz =>
            {
                var internalCtors = clazz.Constructors.Where(c => c.Visibility == Visibility.Internal);
                return !internalCtors.Any() || internalCtors.All(c => c.Parameters.Count() != 0);
            });
 
        Assert.Multiple(() =>
        {
            foreach (var model in modelsWithoutCtor)
            {
                Assert.Fail($"Make sure that '{model.Name}' has an empty constructor it's serializable.");
            }
        });
    }
}

While I was writing this Bit I also noticed Milan Jovanović created two videos (How To Create Better .NET Applications with Architecture Tests and How to Write Architecture Tests for the Clean Architecture) on Architectural Tests using a similar library NetArchTest. Both libraries serve the same purpose, and have a similar Fluent API, but are different in some small details e.g. in the way they assert the rules.

A little side note, there isn't a lot of documentation about both of these libraries and this will require some trial and error while writing your first architectural tests, at least this was the case for myself.

27. Generate code with NSwag using the OpenAPI Specification

I was always skeptical about code generation tools using the OpenAPI specification. But recently, I decided to give it another go, and surprisingly it was a positive experience!

My use case was an integration with a 3rd party, instead of writing all the DTO models and endpoints manually I resorted to NSwag to generate an HTTP client (including all of its dependencies) for me. You can also use this for code that you own.

NSwag provides different methods for generating code, ranging from a manual operation to an automated way. Besides C# HTTP Clients, it also supports the generation of C# Models/Controllers, as well as TypeScript clients for most front-end technologies, e.g. Angular.

• NSwagStudio: a Windows Desktop application to import an OpenAPI specification, and configure the parameters to generate the output file. Based on the configuration you can generate a client and/or save the configuration to an NSwag configuration document (*.nswag.json), which can be used later again with the intent to regenerate the client.

• A CommandLine Tool with commands to generate code based on an NSwag configuration document (which is created with NSwagStudio)

 content_paste
#          👇 created with NSwagStudio
nswag run ./petstore.nswag.json /runtime:Net70
# There's currently an issue with using Net80

• NSwag.MSBuild to incorporate the generation process during a build (this also uses the NSwag config file)

 content_paste
<PropertyGroup>
  <RunPostBuildEvent>OnBuildSuccess</RunPostBuildEvent>
</PropertyGroup>
 
<Target Name="NSwag" AfterTargets="PostBuildEvent" Condition=" '$(Configuration)' == 'Debug' ">
  <Exec WorkingDirectory="$(ProjectDir)" EnvironmentVariables="ASPNETCORE_ENVIRONMENT=Development" Command="$(NSwagExe_Net70) run nswag.json /variables:Configuration=$(Configuration)" />
</Target>

• NSwag.CodeGeneration.CSharp, a NuGet package to generate code using C#. There's also a TypeScript equivalent NSwag.CodeGeneration.TypeScript to generate TypeScript code.

 content_paste
using NSwag;
using NSwag.CodeGeneration.CSharp;
 
await GenerateCSharpClient("https://petstore.swagger.io/v2/swagger.json", "PetStoreClient");
 
static async Task GenerateCSharpClient(string openApiLocation, string className)
{
    var document = await OpenApiDocument.FromUrlAsync(openApiLocation);
    var settings = new CSharpClientGeneratorSettings
    {
        UseBaseUrl = false,
        ClassName = className,
        GenerateClientInterfaces = true,
        CSharpGeneratorSettings =
        {
            Namespace = "HttpClients",
        },
    };
 
    var generator = new CSharpClientGenerator(document, settings);
    var generatedCode = generator.GenerateFile();
 
    var path = $"../../../{settings.CSharpGeneratorSettings.Namespace}/{settings.ClassName}";
    var file = new FileInfo(path);
    file.Directory.Create();
    await File.WriteAllTextAsync(file.FullName, generatedCode);
}

All of these gives you a working C# HTTP Client, including the needed models, interfaces, ... as output.

 Generated.cs content_paste
[System.CodeDom.Compiler.GeneratedCode("NSwag", "14.0.2.0 (NJsonSchema v11.0.0.0 (Newtonsoft.Json v13.0.0.0))")]
public partial interface IPetStoreClient
{
    /// <param name="cancellationToken">A cancellation token that can be used by other objects or threads to receive notice of cancellation.</param>
    /// <summary>
    /// Add a new pet to the store
    /// </summary>
    /// <param name="body">Pet object that needs to be added to the store</param>
    /// <exception cref="ApiException">A server side error occurred.</exception>
    System.Threading.Tasks.Task AddPetAsync(Pet body, System.Threading.CancellationToken cancellationToken);
 
    /// <param name="cancellationToken">A cancellation token that can be used by other objects or threads to receive notice of cancellation.</param>
    /// <summary>
    /// Find pet by ID
    /// </summary>
    /// <remarks>
    /// Returns a single pet
    /// </remarks>
    /// <param name="petId">ID of pet to return</param>
    /// <returns>successful operation</returns>
    /// <exception cref="ApiException">A server side error occurred.</exception>
    System.Threading.Tasks.Task<Pet> GetPetByIdAsync(long petId, System.Threading.CancellationToken cancellationToken);
 
    ...
}

Tip

There's also the .NET Core Global Tool Microsoft.dotnet-openapi to generate HTTP clients using the OpenAPI specification. Internally it uses NSwag for the generation. From my limited experience with it, it isn't as versatile as the toolkit that NSwag provides, NSwag is also better documented. But, dotnet openapi definitely something to keep an eye out for in the future.

 content_paste
dotnet openapi add url https://petstore.swagger.io/v2/swagger.json --code-generator NSwagCSharp --output-file petstore.swagger.json
dotnet openapi refresh --updateProject ./MyProject.csproj https://petstore.swagger.io/v2/swagger.json

The add will also create an OpenApiReference within the project, which is +/- the same as adding an OpenAPI specification via Visual Studio. Because of this, it can also be interpreted by Visual Studio, and the generated client can be viewed and refreshed via the UI.

26. Use Zod to parse Unknown Data

How many times was there an issue within your application because you trusted data that you don't control (e.g. incoming data), or worse, how many times did the application entirely crash because of it? Thinking back, was this easy to detect and could it have been prevented?

Instead of trusting the data that you don't own, it's better to guard yourself against unexpected cases. Using zod it becomes an easy task to detect unexpected data structures and act accordingly.

format_quote

Zod is a TypeScript-first schema declaration and validation library. I'm using the term "schema" to broadly refer to any data type, from a simple string to a complex nested object.
Zod is designed to be as developer-friendly as possible. The goal is to eliminate duplicative type declarations. With Zod, you declare a validator once and Zod will automatically infer the static TypeScript type. It's easy to compose simpler types into complex data structures.

Because an example says more than words, let's revise and refactor an example from my latest blog post Multiple releases using the same, but configurable, Angular Standalone Application build. In the blog post, the environment configuration is defined as a JSON structure and is assigned to an instance at run-time. This can go horribly wrong when the interface and the JSON model aren't in sync anymore, e.g. after updating the model but not the JSON file.

 environment-config.ts content_paste
import { z } from 'zod';
 
export const environmentConfigSchema = z.object({
  apiUrl: z.string().min(1),
});
export type EnvironmentConfig = z.infer<typeof environmentConfigSchema>;

 main.ts content_paste
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { createAppConfig } from './app/app.config';
import { environmentConfigSchema } from './app/environment-config';
 
fetch('./assets/environment-config.json')
  .then((resp) => resp.json())
  .then((config) => {
    const environmentConfig = environmentConfigSchema.parse(config);
    //    ^? { apiUrl: string }
    bootstrapApplication(AppComponent, createAppConfig(environmentConfig));
  });

Before the application is bootstrapped, the config is parsed and when the apiUrl isn't present in config file (or is empty), the following error is thrown in a clean and concise format that contains all the necessary information.

 content_paste
ZodError: [
  {
    "code": "too_small",
    "minimum": 1,
    "type": "string",
    "inclusive": true,
    "exact": false,
    "message": "String must contain at least 1 character(s)",
    "path": [
      "apiUrl"
    ]
  }
]

Using this example, we see the benefits that Zod brings to a team:

• Eliminates Duplicative Type Declarations: With Zod, you declare a schema once and Zod can infer the static TypeScript type.
• Ensures Data Consistency: Zod helps ensure that the data your team works with is consistent and adheres to the defined schema.
• Enhances Developer Experience: using Zod simplifies the process of validating and parsing data, instead of introducing a big blob of messy code to validate objects, Zod streamlines and unifies this process making development easier and more efficient.

Other scenarios where Zod is useful involve other parts in a codebase that interacts with the "outside world", such as HTTP responses, URL parameters, CLI input, and it can even be useful for form validation.

As you can see, it's usually data that the application receives, or in other words data that you don't control, that needs to be parsed before it can be safely accessed/used.

While Zod is small in size (8kb minified + zipped), the only caveat is that it cannot be threeshaken. If that's a requirement there are a couple of alternatives inspired by Zod, e.g. Valibot.

If you're interested, take a look at the Zod articles on my blog. Here you will see more use cases, such as generating test data using zod-fixture.

25. New in Entity Framework 8: Primitive collection properties

Starting from EF 8, EF automatically stores a collection of primitive values directly in a column (as JSON), whereas previously a separate table was required.

To query data, the OPENJSON table-valued function is used. This creates a rowset view of the JSON data, which can be compared as a "normal" relational table, and can thus be queried as you're used to.

A use case for using primitive collection properties is to save a data collection that's retrieved via its parent. If you need to query this set, it's probably better to store the collection in a seperate table. This allows you to create indecies in order to optimize search-based scenarios, that otherwise isn't possible using a JSON column.

Let's explore how this translates into code and SQL.

 content_paste
public class Person
{
    public required Guid Id { get; init; }
    public required int[] LuckyNumbers { get; init; }
}
 
/*
  CREATE TABLE [dbo].[Persons](
    [Id] [uniqueidentifier] NOT NULL,
    [LuckyNumbers] [nvarchar](max) NOT NULL,
    CONSTRAINT [PK_Persons] PRIMARY KEY CLUSTERED ([Id] ASC)
  )
*/

 content_paste
var person = new Person
{
    Id = Guid.NewGuid(),
    LuckyNumbers = [1, 3, 5, 7]
};
 
dbContext.Add(person);
dbContext.SaveChanges();
 
/*
  exec sp_executesql N'SET IMPLICIT_TRANSACTIONS OFF;
  SET NOCOUNT ON;
  INSERT INTO [dbo].[Persons] ([Id], [LuckyNumbers])
  VALUES (@p0, @p1);
  ',N'@p0 uniqueidentifier,@p1 nvarchar(4000)',
  @p0='691dbfdd-62b3-43f5-a9bb-498985ac7952',
  @p1=N'[1,3,5,7]'
*/

 content_paste
+--------------------------------------+--------------+
| Id | LuckyNumbers |
+--------------------------------------+--------------+
| 691dbfdd-62b3-43f5-a9bb-498985ac7952 | [1,3,5,7] |
+--------------------------------------+--------------+

 content_paste
var persons = dbContext.Set<Person>()
  .Where(p => p.LuckyNumbers.Contains(3))
  .ToList();
 
/*
  SELECT [p].[Id], [p].[LuckyNumbers]
  FROM [dbo].[Persons] AS [p]
  WHERE 3 IN (
    SELECT [l].[value]
    FROM OPENJSON([p].[LuckyNumbers])
    WITH ([value] int '$') AS [l]
  )
*/

For more info and new features introced in EF 8 see the documentation.

24. Improve your development tasks with Windows Dev Drive

If you know me, you know that I like to fully optimize my workflow, and a Dev Drive helps to improve it.

A Dev Drive is a virtual drive (using the ReFS technology) that speeds up file-related tasks. This makes it ideal for many daily development related jobs such as building applications, installing packages, running test suites, and so on.

I find that this is the ideal time of the year to make changes before hitting the ground again because you'll benefit from this for the rest of the upcoming year. That's why I recommend you to take a look at a Dev Drive, since it just takes a moment to set up a Dev Drive on Windows.

Here's a comparison after migrating my projects and cache locations (for NuGet and npm) to a Dev Drive. As you can notice, all of the commands that I use frequently have improved by 20% to 25%.

Check it out and see the difference for yourself!

I also found Maarten Balliauw's blog Test-Driving Windows 11 Dev Drive for .NET helpful and easy to follow, it also contains useful scripts to automate the migration.

For more Windows tips and tricks to improve your development workflow, see How I've set up my new Windows development environment in 2022.

23. Optimize your bundle size with source-map-explorer

Recently I was able to reduce the initial load of our Angular application from 2.8MB to 750kb (a 75% reduction!) in just a few minutes.

Using source-map-explorer I was able to detect eagerly loaded modules that should've been lazy loaded, and dependencies that could be moved or removed.

If you want to optimize your bundle size, run the following command (replace PROJECT-NAME) and analyze the main.js file to start your investigation.

 content_paste
npx source-map-explorer ./dist/PROJECT-NAME/*.js

This command should open a new browser window with the output details in which you can see all the included dependencies (from your own or 3rd parties).

Make sure that you've built your project with source-maps enabled. If that's not the case, either update your source map configation, or pass the --source-map option flag to the Angular build command.

For the next step, explore the remaining files and be attentive to what can be trimmed down.

22. Simpler code with Using Declarations

The using declaration is a feature (introduced in C# 8.0) that allows you to declare a disposable object with the using keyword.

The lifetime of a using local will extend to the end of the scope in which it is declared. The using locals will then be disposed in the reverse order in which they are declared.

I prefer this syntax compared to the "older" using statements because it's easier to read and follow. You no longer have to create scope blocks with curly brackets (and the accompanying indentation(s)) to dispose objects.

 UsingDeclarion content_paste
int CountOccurences(string fileName, string word)
{
    using var fileStream = new FileStream(fileName, FileMode.Open);
    using var reader = new StreamReader(fileStream);
    /* Logic here */
}

 UsingStatement.cs content_paste
int CountOccurences(string fileName, string word)
{
    using (var fileStream = new FileStream(fileName, FileMode.Open))
    {
        using (var reader = new StreamReader(fileStream))
        {
           /* Logic here */
        }
    }
}

21. 👋 Hello @ngrx/signals

Exciting news for Angular developers!

With the release of Angular Signals, the NgRx team - especially Marko Stanimirović who came up with the idea and did the heavy lifting - built a new state management solution that provides a reactive state management solution and a set of utilities for Angular Signals.

@ngrx/signals consists of two big blocks and includes multiple smaller convenient Lego blocks to make working with state simple and intuitive.

• The signalState utility method provides a lightweight solution that manages state in a concise and minimalistic manner;
• While signalStoreprovides a full-blown state management solution (with optional plugins, e.g. Entity Management);

These tools provide an opinionated, but flexible, development experience to build your application.

Check out the v17 blog post for more info, or the in-depth blog posts from the Angular Architects team!

 counter.component.ts content_paste
import { Component } from '@angular/core';
import { signalState, patchState } from '@ngrx/signals';
 
@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    Count: {{ state.count() }}
 
    <button (click)="increment()">Increment</button>
    <button (click)="decrement()">Decrement</button>
    <button (click)="reset()">Reset</button>
  `,
})
export class CounterComponent {
  state = signalState({ count: 0 });
 
  increment() {
    patchState(this.state, (state) => ({ count: state.count + 1 }));
  }
 
  decrement() {
    patchState(this.state, (state) => ({ count: state.count - 1 }));
  }
 
  reset() {
    patchState(this.state, { count: 0 });
  }
}

 counter.store.ts content_paste
import { computed } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { interval } from 'rxjs';
import {
  signalStore,
  withState,
  patchState,
  withComputed,
  withHooks,
  withMethods,
} from '@ngrx/signals';
 
export const CounterStore = signalStore(
  withState({ count: 0 }),
  withComputed(({ count }) => ({
    doubleCount: computed(() => count() * 2),
  })),
  withMethods(({ count, ...store }) => ({
    increment() {
      patchState(store, { count: count() + 1 });
    },
    decrement() {
      patchState(store, { count: count() - 1 });
    },
  })),
  withHooks({
    onInit({ increment }) {
      interval(2_000)
        .pipe(takeUntilDestroyed())
        .subscribe(() => increment());
    },
    onDestroy({ count }) {
      console.log('count on destroy', count());
    },
  }),
);

 counter.component.ts content_paste
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { CounterStore } from './counter.store';
 
@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <p>Count: {{ store.count() }}</p>
    <p>Double Count: {{ store.doubleCount() }}</p>
 
    <button (click)="store.increment()">Increment</button>
    <button (click)="store.decrement()">Decrement</button>
  `,
  providers: [CounterStore],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class CounterComponent {
  readonly store = inject(CounterStore);
}

20. Use jq to query and manipulate JSON data

jq is a lightweight command-line tool to quickly process your JSON data. I mainly use it to search (grep) and select specific fields of a JSON file, but it can also be used to transform (sed) and process (awk) the data. Of course, the output is also nicely formatted.

If this peaks your interest head over to the download page.

 data.json content_paste
{
  "persons": [
    {
      "id": 1,
      "name": "Bob"
    },
    {
      "id": 2,
      "name": "Alice"
    }
  ],
  "lastModified": "2023-11-26"
}

 content_paste
jq .lastModified data.json
 
> "2023-11-26"

 content_paste
jq .persons[1]
> {
    "id": 2,
    "name": "Alice"
  }

 content_paste
jq .persons.[].name data.json
 
> "Bob"
> "Alice"

 content_paste
jq .persons[0].id, .lastModified data.json
 
> 1
> "2023-11-26"

While these examples are simple and are using a local data source, you can feed data to jq using the pipe (|) operator.

 content_paste
curl 'https://api.github.com/repos/jqlang/jq/commits?per_page=5' | jq '.'

Make sure to check out the tutorial and the playground to also learn how to fully take advantage of jq by transforming and filtering JSON data.

19. NuGet Central Package Management

When you've worked in a mono-repository that contains multiple C# projects, you've probably felt the pain of maintaining NuGet dependencies. Updating packages to a newer version, keeping versions in sync across different projects, removing outdated dependencies, ...

With Central Package Management (CPM) this daunting task becomes easier to manage. By creating a file Directory.Packages.props within the root of the project, all NuGet package references can be defined with their corresponding version.

Next, the version of the package references that are defined within the project (.csproj) files can be removed.

 Directory.Packages.props content_paste
<Project>
  <PropertyGroup>
    <!-- Enable Central Package Management -->
    <ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
  </PropertyGroup>
  <ItemGroup>
    <!-- Notice that this uses a PackageVersion (and not a PackageReference) -->
    <PackageVersion Include="PackageOne" Version="4.0.7" />
    <PackageVersion Include="PackageTwo" Version="5.0.0" />
    <PackageVersion Include="PackageThree" Version="2.1.0" />
  </ItemGroup>
</Project>

 ProjectOne.csproj content_paste
<Project Sdk="Microsoft.NET.Sdk">
    <ItemGroup>
-        <PackageReference Include="PackageOne" Version="4.0.7" />
+        <PackageReference Include="PackageOne" />
    </ItemGroup>
</Project>

The result is a file that contains the single source of truth when it comes to your package versions.

You can still override versions for one-off cases, or subdivide this file into multiple files. For more info about CPM, see the documentation.

18. Pretty TypeScript types

I learned this trick from Matt Pocock, and I've seen the power by seeing Marko Stanimirović using it in the NgRx codebase. Because I think that we'll see more usage of this, I wanted to make a bit out of it.

You've probably already encountered TypeScript types where you scratch your head and think "What does this even mean?". From my own experience, this can happen when you interact with complex types from 3rd party packages.

Using the following Prettify utility type, which you need to create yourself, some of the types will become more readable.

 content_paste
type Prettify<T> = {
  [K in keyof T]: T[K];
} & {};

Prettify takes a generic parameter T and maps over its keys using a mapped type to essentially create a new type that has the same properties as T.

The unwrapping of object properties turns resolved types that were previously difficult to comprehend, into types that become easier to read and understand.

Let's take a look at an example to make this clear:

 content_paste
type Person = { name: string };
type Address = { street: string };
 
type PersonWithAddressV1 = Person & Address;
//   ^? PersonWithAddressV1 = Person & Address
 
type PersonWithAddressPrettified = Prettify<Person & Address>;
//   ^? PersonWithAddressPrettified = { name: string; street: string; }

 content_paste
type PrimaryAddress = { type: 'Primary'; street: string };
type SecondaryAddress = { type: 'Secondary'; street: string };
 
type AddressV1 = PrimaryAddress | SecondaryAddress;
//   ^? AddressV1 = PrimaryAddress | SecondaryAddress
 
type AddressPrettified = Prettify<PrimaryAddress | SecondaryAddress>;
//   ^? AddressPrettified= { type: 'Primary'; street: string } | { type: 'Secondary'; street: string }

With a small modification, it can also unwrap child properties.

 content_paste
type Prettify<T> = {
  [K in keyof T]: Prettify<T[K]>;
} & {};

For more info see Matt's blog The Prettify Helper.

17. Edit and send HTTP requests directly from the Browser DevTools

Did you know you can use the browser DevTools (in Microsoft Edge and Firefox) to edit and send network requests?

This little trick can save you some time. Instead of manually reproducing a request, or copying the request via the network tab, you can right-click a network request to edit the URL, headers, body, etc, and resend the edited request! 🚀

16. How are the TypeScript Partial and Required types implemented?

I find it important to know how the most-used TypeScript utility types are implemented. Here, we see the implementation of the Partial (all properties of a type are optional) and Required (all properties of a type are required) types. Knowing this is essential because it allows you to customize or create a new behavior for your use cases.

• keyof Person generates a union of the keys of Person, so keyof Person results in "id" | "name".
• [key in keyof Person] iterates over each key in that union.
• Person[key] is the type of the property in Person associated with the key, so "id" is a number, and "name" is a string.
• The ? modifier makes the property optional (used for the Partial type), while the -? modifier removes the optional modifier from the property, making it required (used for the Required type).

 partial.ts content_paste
type Person = { id: number, name: string }
 
// 🪄 Use the ? modifier to make a property optional
type PersonPartial = { [key in keyof Person]?: Person[key] };
const person: PersonPartial = { name: 'Tim' }
// ^? { id?: number | undefined; name?: string | undefined }
 
// 🔁 Refactor into a generic type
type GenericPartial<T> = { [key in keyof T]?: T[key] };
const person: GenericPartial<Person> = { name: 'Tim' }
// ^? { id?: number | undefined; name?: string | undefined }
 
// Use the built-in Partial Type:
// Constructs a type with all properties of Type
// set to optional. This utility will return a type that represents
// all subsets of a given type.
const person: Partial<Person> = { name: 'Tim' }
// ^? { id?: number | undefined, name?: string | undefined }

 required.ts content_paste
type Person = { id?: number, name?: string }
 
// 🪄 Use the -? modifuer to make a property required
// (by removing the optional ? modifier)
type PersonRequired = { [key in keyof Person]-?: Person[key] };
const person: PersonRequired = { id: 3, name: 'Tim' }
// ^? { id: number; name: string }
 
// 🔁 Refactor into a generic type
type GenericRequired<T> = { [key in keyof T]-?: T[key] };
const person: GenericRequired<Person> = { id: 3, name: 'Tim' }
// ^? { id: number; name: string }
 
// Use the built-in Required Type:
// Constructs a type consisting of
// all properties of Type set to required.
const person: Required<Person> = { id: 3, name: 'Tim' }
// ^? { id: number, name: string }

15. Bulk updates in Entity Framework

Use bulk updates to update entities with a single command (without the need of the change tracker).

The entities will not be loaded into memory, which results in more efficient updates and deletes.

For more info, see my blog post "New in Entity Framework 7: Bulk Operations with ExecuteDelete and ExecuteUpdate", or the documentation.

 content_paste
// Use ExecuteDeleteAsync to delete entities
await context.Set<CartItem>()
  .ExecuteDeleteAsync();
 
// Use Where as a filter to find specific entities (to delete or update)
await context.Set<CartItem>()
  .Where(c => c.Sku == "ABC")
  .ExecuteDeleteAsync();
 
// Use ExecuteUpdateAsync to update entities
await context.Set<CartItem>()
  .ExecuteUpdateAsync(s =>
    // Use SetProperty with a fixed value to update a property
    s.SetProperty(p => p.Amount, 100)
  );
 
await context.Set<CartItem>()
  .Where(c => c.Amount == 2)
  .ExecuteUpdateAsync(s =>
    // Use SetProperty to update a property using its current value
    s.SetProperty(p => p.Amount, v => v.Amount + 1)
  );

14. How to quickly open a GitHub repository within an IDE

As developers, we read more code than we write.

We don't only read our own code that we wrote ourselves, or the code from our project, but we also come in contact with code from 3rd parties.

Personally, I like to browse through code to learn or to investigate a behavior or problem that I encountered. While doing so it's useful to be in a comfort zone where you already know how to navigate within the code base to find the thing that you're looking for.

The GitHub interface has improved in the last couple of years, but it isn't the same as using an IDE. An IDE has the advantage that it's smarter. It can, for example, show all the references, go to the implementation with a simple click, and more.

To have that familiar IDE experience without having to clone or download the repository locally, which can be time-consuming especially if you don't have all the dependencies installed, there are a few options.

Here are the ones that I like to use, to quickly open a codebase within a web-editor to have that familiar IDE experience. As a side note: all of them are powered by Visual Studio Code.

• use https://github.dev/USERNAME/REPOSITORY_NAME (or simply press the . key in a repository, or in a Pull Request) to open up a lightweight Visual Studio Code in the browser. This is useful to navigate and edit code, but you won't be able to execute scripts/commands.
• use https://stackblitz.com/github/USERNAME/REPOSITORY_NAME to open the codebase within StackBlitz. Useful to play with some code or to quickly test something out. Focused on Node.js environments. StackBlitz also has a specific Pull Request explorer via pr.new.
• use https://codesandbox.io/s/github/USERNAME/REPOSITORY_NAME (or append box to the github url => https://githubbox.com/USERNAME/REPOSITORY_NAME) to open the codebase within CodeSandbox. Similar to StackBlitz but supports more languages. Codesandbox also has a GitHub Action to quickly review a Pull Request.
• use GitHub Codespaces to create a dev environment, it's also possible to open this environment locally in your favorite IDE. Codespaces can do everything that you can do locally.

13. New in C# 12: Collection expressions

Creating collections becomes simpler in C# 12 using collection expressions. We can also make use of the spread operator .. to copy the values from a collection.

 content_paste
-Log(new[] { "one", "two", "three" });
 
+Log(["one", "two", "three"]);
 
+string[] values = ["one", "two", "three"];
+Log([.. values, "four", .. (string[])["five", "six"]]);
 
void Log(string[] values) {}

More info can be found in the documentation.

12. Polyglot Notebooks

As developers, we sometimes need an isolated environment or a testing sandbox. For example, to reproduce a problem, or to share a snippet with a team member.

This is already possible using online REPLs e.g. TypeScript playground and .NET fiddle, or we can resort to web containers for example GitHub Codespaces or Stackblitz.

The problem that I encounter with these tools is that I often forget or lose previously created proof of concepts, or that it's hard to share them with my team.

That's not the case with Polyglot Notebooks.

Using notebooks has the following benefits:

• testing, creating an isolated sandbox to test something out
• easy to share, can be committed to git
• enhances collaboration, can be used by all team members
• integration, can be integrated within your environment, e.g. connect to a database

Some use cases where notebooks can be useful:

• can serve as an interactive documentation tool
• can include runnable snippets to automate tasks
• teaching/onboarding interactivity makes it more fun
• an offline REPL alternative

Get the Polyglot Notebooks Visual Studio Code extension in the marketplace.

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 todos; track todo.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" />
    }
}

To already try out the new Control Flow feature before it's officialy released, update the angular compiler options within the TypeScript configuration file. Add the _enabledBlockTypes property, and add the blocks you want to use within your application.

 tsconfig.json content_paste
{
  "angularCompilerOptions": {
    "_enabledBlockTypes": ["if", "switch", "for", "defer"]
  }
}

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)
  })
})