How to include an Angular Project within .NET Aspire
Learn how to add and configure your Angular application in a .NET Aspire Application Host.
Testing Deferrable Views with Angular Testing Library
Let's expore the new API's of Angular Testing Library (v14.5.0) to see how we can easily test deferrable views.Wolverine embraces Observability
In this post, I'm showing how easy it is to enable the Observability features of Wolverine. This matters (a lot) because it gives us insights into the core of the application and its overall state.How to fully leverage Wolverine with its HTTP package
Taking the next step to keep the architecture and the codebase simple with Wolverine. In this blog post, we'll take a look at the WolverineFx.HTTP package to make the interaction with HTTP requests easier.Wolverine is for the developers
Keep your codebase simple by introducing Wolverine. As you'll notice in this blog post, Wolverine helps to reduce complexity and brings a lot of functionality without the hassle and the noise.Merging your Playwright sharded reports into a single HTML report
Playwright v1.37 introduces a new `merge-reports` command. In this blog post we'll see how leverage this command to create a single test report from different sharded test reports. The result is one page containing all of your test results.Implementing a Feature Flag-based Endpoint Filter
Keep your Minimal API route handlers clean and compact by implementing a reusable feature flag-based endpoint filter.A cheat sheet to migrate from Moq to NSubstitute
A quick reference to help the migration from Moq to NSubstitute.How to globally register Injection Tokens within the Angular TestBed
Provide global Injection Tokens within the Angular TestBed once to keep your test setups simple and DRY.Translating Exceptions into Problem Details Responses
In this post, we'll take a look at the newly introduced IExceptionHandler in ASP.NET Core 8. We'll implement an exception handler that translates exceptions into Problem Details using the Problem Details Service. The result is a standardized and better experience for your API consumers.Entity framework features I wish I knew earlier
Some useful built-in Entity Framework features that I discovered along the way.Configuring angular-auth-oidc-client with the new functional APIs
Recently the angular-auth-oidc-client library (v16) introduced new APIs to configure the library in a functional way. In this blog post, I'll show you how to use them.Playwright API testing with zod
In this post we'll create a custom Playwright matcher to validate the shape of the response body using the zod library. This way, we make sure that the contract between the front-end application and the API is valid.Treat your .NET Minimal API Endpoint as the application layer
Leverage the power of Minimal APIs to treat your endpoint as the application layer. This has several benefits, but I find the biggest one being the simplicity of it.How the new UI mode improves the Playwright experience
I find that Playwright offers a great testing experience, and the new UI mode makes it even better. In this blog post, we'll take a look at the UI mode and see how it improves the overall experience.Refactor your .NET HTTP Clients to Typed HTTP Clients
A summary of why and how you should refactor your HTTP clients to the typed HTTP client version in .NET.Fixing Angular Standalone Components that have a circular dependency
Luckily there's a function called `forwardRef` to solve a circular dependency between two Angular Standalone Components. A use case for this is a recursive component that renders its parent component.Prevent a Hangfire job from running when it is already active
Concurrency in recurrent jobs can cause race condition issues. However, we can prevent such problems by queuing new jobs when the same job is still pending. This approach helps to manage the job execution and avoids issues that may arise when multiple instances of the same job are active at the same time. In this post we'll see how we can ensure that only one instance of the job is running at any given time, thus preventing conflicts and ensuring a reliable job execution.Let's make our SPA more secure by consuming a Duende BFF with Angular
Let's take a look at how shifting the auth responsibility from a front-end application to a Backend For Frontend (BFF) affects our Angular applications.The different retry APIs from Playwright
You probably already know the built-in retry mechanism for locators and matchers, but are you already familiar with the retry and polling APIs? Let's take a look at the different retry APIs that Playwright has to offer, and when to use them.Let's make our SPA more secure by setting up a .NET BFF with Duende and Auth0
To improve the security of our Single Page Applications, let's ditch the access tokens in the browser and make the Backend for Frontend (BFF) responsible for the authentication process using the Authorization Code flow with PKCE. To achieve this, we'll use the Duende.BFF NuGet package and let it communicate with Auth0.Include attachments to your Playwright report
To save us some time in the process to verify that a file is correct, let's automate the actions to download a file and add it to the Playwright test report for easy access.You can now return unmapped types from raw SQL select statements with Entity Framework 8
Entity Framework 8 brings a new feature allowing us to execute and return unmapped types from SQL select statements. In this blog post we'll take a quick look at how we can accomplish this, and why this is an important tool to have in your toolkit.Create and run Playwright test sets using tags and grep
At some point in time you'll want to run a subset of your tests. Organizing your tests with Playwright test tags helps you to do this in a clean way. Using tags allows you to target specific tests in specific scenarios, and can help to scale your pipeline(s).Revamped: Authentication with Playwright
Playwright (v1.31) introduces a new feature to make the authentication process easier. This approach unifies the authentication flow with the rest of the test cases, and more importantly makes it possible to test with different user roles.Angular standalone components and Angular Testing Library make component tests easier
Standalone components give you a better foundation to build on, as your Angular component becomes less affected by its internals. It doesn't matter if the component has its own template, or if it's using child components. This makes your test cases less brittle than before with Angular Modules. To interact with the component we're still using the Angular Testing Library because it provides useful utilities to interact and query the component.Invoke the Azure DevOps API from within your Azure DevOps pipeline
Using the Azure DevOps API to automatically add reviewers to an Azure DevOp Pull Request from within the CI pipeline.Get easy access to Angular route and query parameters with zod
Using zod's coerse method to easily access route and query parameters in Angular.I tried the Angular Standalone migration, and here is the result
Let's migrate an Angular application using @NgModules to the standalone API. For this task, we use the automatic schematic that's available in Angular v15.2.0-next.2. We also take a look at the manual steps that are required to fully migrate the application to use the new functional APIs.Improve your test experience with Playwright Soft Assertions
Take advantage of soft assertions in Playwright to improve your test experience and reduce the amount of time spent on fixing bugs. Soft assertions allow that multiple assertions can fail in a single test, rather than stopping the test execution after the first failure.Adding OpenTelemetry to an Angular Application
How to register the OpenTelemetry web packages to automatically create traces and send them to a backend. The result is a helpful dashboard containing insights about the Angular application.Consuming SQL Functions with Entity Framework
Using DbFunctions is a method to use database-specific functions in your Entity Framework queries. They allow you to take advantage of features that are specific to a particular database provider, such as SQL Server and use them in your Entity Framework queries in a provider-agnostic way. As an example, let's use the SOUNDEX SQL function.Using Angular Testing Library with Test Harnesses
In most cases, I write tests for Angular components without using Test Harnesses, but finding the correct element(s) is not always straightforward. Here, Test Harnesses play a part in easily finding and interacting with those components that can't be queried. Using Test Harnesses is also a good practice into keeping your tests readable and resilient to changes.Intercepting HTTP Requests with Playwright
Intercepting HTTP requests is a useful feature, let's take a look at how you can intercept an HTTP request with Playwright and discuss some of the possibilities.Assertion Scopes, the one FluentAssertions feature you didn't know you needed
A simple trick to increase your productivity and testing experience.You should take advantage of the improved NgRx APIs
NgRx isn't what it used to be. Take advantage of the updated APIs to improve your code base. The result is a more maintainable code base that is easier to read and navigate.Playwright in an Azure DevOps Pipeline
Creating a pipeline to run TypeScript Playwright tests in Azure DevOps.Testing localization with Playwright
Testing your translation logic and localization with PlaywrightHow to disable githooks in an Azure DevOps YAML Pipeline
How to disable githooks in an Azure DevOps YAML PipelineWatch out what you expose with Angular Interceptors
Your Angular Interceptor might leak sensitive data to the outside world. Here's how to prevent that.Using Geolocation in Playwright tests
Before the application gets access to the location of the user, the user receives a prompt asking for permission to share their location. This is not different in Playwright tests. In this blog post, we see how to handle this prompt for your Playwright tests.Using zod-fixture with MSW to generate mocked API responses
Did you know that you could quickly set up a mocked API with the use of zod-fixture and MSW?How zod-fixture can help with your test setups
Don't waste your energy and time by manually creating test fixtures, use zod-fixture to make this process a breeze.Keep your Playwright tests structured with steps
Leverage the Playwright test.step function to divide your tests into logical steps. These steps create a well-organized summary in the Playwright report and have the benefit that tests become more readable and easier to maintain, especially when a failed test is displayed in the Playwright report.New in Entity Framework 7: Bulk Operations with ExecuteDelete and ExecuteUpdate
Exploring the new `ExecuteDelete` and `ExecuteUpdate` methods that were introduced in Entity Framework.Using an Azure DevOps Pull Request Template to remind your team about the Definition of Done
Making the team aware of the Definition of Done each time a Pull Request is created.How to upload files with Playwright
Uploading files with Playwright is easy!Get access to the deployed Azure Static Webb App URL within your GitHub Workflow
How to run your Playwright tests against your Azure Static Web App preview environment, which is build and deployed with the Azure/static-web-apps-deploy GitHub Action.Exploring the new output caching middleware
Taking a closer look at the capability of the new output caching middleware in .NET 7Why we should verify HTTP response bodies, and why we should use zod for this
Let's explore zod together and see it can be useful to create a safer enviroment by parsing HTTP response bodies..NET Debugging Tips
A collection of tips for debugging .NET applications.Enable shell scripts for the JetBrains Toolbox App
How to open your JetBrains IDEs that are installed via the JetBrains Toolbox directly from the command line.Feature Flags in .NET, from simple to more advanced
Let's implement a naive feature flag, refactor the code with the .NET Feature Management API, and to top things off, the Azure Feature Management Feature is thrown into the mix to tweak the feature flags dynamically without having an impact on the users.Specify your Node.js version for the Azure Static Web App GitHub Action
Learn how to specify the Node.js version for the Azure/static-web-apps-deploy GitHub action.Tye, starting and running multiple APIs with a single command
Using Tye to run your local development environment.Using Playwright test shards in combination with a job matrix to improve your CI speed
Utilizing a matrix within your GitHub workflow to create a "test shard matrix" is a major improvement to your CI. This practice can cut the time in half (or better) to run your Playwright test suite.How to stay up-to-date
Continuous learning is an essential part of your career, let's take a look at how you can do your best to keep growing.Directory.Packages.props, a solution to unify your NuGet package versions
The Consolidate view is dead, long live `Directory.Packages.props`. Use the `Directory.Packages.props` file to define your NuGet package versions in a single file.Proof of concept: ngx-query-state
A hassle-free way to fetch data and render the current state of the HTTP request.Flush state with an NgRx meta-reducer
A snippet on how to remove a specific slice within the NgRx state object.Trying out OData for the first time
What advantages does OData bring and why should we use it?Fast and easy authentication with Playwright
Using the global setup feature from Playwright to authenticate a test user and reuse its authentication state throughout your test suite.Use Angular directives to extend components that you don't own
Angular directives allow us to extend components without changing their internal code. This is useful to bring a consistent UX to 3rd party components. The directive can be configured to always be applicable, or can be used in an opt-in or opt-out basis.Writing your first Playwright test
Setting up playwright and "writing" a first test only takes a few minutes!TIL params inheritance strategy to always have access to parent route info
Configure the Angular router to always have access to the parent route data from within the child route.Be proactive when you join an Angular project
Tips to help improve the shape of an older Angular codebase.Single Component Angular Modules and Component Tests go hand in hand
Say no to brittle tests with SCAMsWriting a performant client-side filter with [hidden] and trackBy
Creating a better user experience with the hidden benefit of the hidden attribute.How I've set up my new Windows development environment in 2022
Configuring a new Windows machine with ease for full-stack .NET and Angular developmentConfiguring Azure Application Insights in an Angular application
Creating a wrapper around the Application Insights SDK to easily consume it in an Angular applicationTesting an NgRx project
How write maintainable NgRx tests within an Angular applicationStop misusing TypeScript type assertions
Don't create a false sense of security by overusing type assertions, instead use type annotations and return types.Refactor Functional Tests to support Minimal Web APIs
Some small changes that are needed to create application instances in Functional Tests for Minimal Web APIsThe simplicity of ASP.NET Endpoints
Keepings it simple with ASP.NET Endpoints and its dependency systemMaybe it's time to rethink our project structure with .NET 6
Challenging the status quo with some thoughts on the new .NET Minimal Web API to keep code simplePattern Matching Examples in C#
Some basic and more advanced examples of pattern matching in C#.Building incremental views with XState Parallel States
How to load data from different sources without blocking the UISolving Angular slow renders with NgRx selectors
Prepare your (view)models before they reach the component to make them faster and easier to render.Using the .NET CLI to restore packages from a private NuGet feed
A fix for "Response status code does not indicate success: 401 (Unauthorized)"Reduce memory usage of .NET services on a single machine
A snippet on how to configure your project to reduce its memory consumption when multiple services are hosted on one server.Prevent a .NET API from adding cache headers to unsuccessful requests
Implementing custom cache middleware to prevent non-200 responses from being cached by a clientGetting the most value out of your Angular Component Tests
How I write my Angular Component Tests with the Angular Testing Library.Why I stopped worrying about test setups by using AutoFixture
A model is always changing, but that shouldn't be the concern of your testsHow to patch an HTTP Response with Cypress
A brief post on how to patch a part of an incoming HTTP responseHow to set up a dynamic CI/CD pipeline with GitHub Actions
Learn how to create a single workflow that runs on multiple environments with conditional stepsAutomagically optimize your images with Squoosh
Minify images as a pre-commit step with Squoosh, husky, and lint-stagedEnvironment variables with SvelteKit
A simple workaround to use environment variables in SvelteKitA generic Angular template-driven validator
One validator to rule them allA practical guide to Angular Template-Driven Forms
The things I looked up while learning the template-driven wayA new way to validate Angular Forms
Adding a layer on top of the Angular Forms API to declare useful and readable form validatorsArgument of type 'interface' is not assignable to parameter of type 'interface'
A peculiar TypeScript error at compile time and how to solve itCreating a new C# API: Validate incoming requests
Clean validation with MediatR, FluentValidation and the Problem Detail specificationFaster SQL Bulk Inserts With C#
Using SQL Bulk Copy to have a huge performance gainPreload lazy-loaded modules based on user roles
Let's create a custom Angular preload strategy that loads all modules for the authenticated userNested NgRx Entity State
How to manage nested state with multiple NgRx entity adapters.Process your list in parallel to make it faster in .NET
Lessons learned while refactoring a process to make a migration from one system to another system fasterAuto-focus a form control with an Angular directive
Give auto-focus to form controls with just a few lines of codeHow to make your Azure DevOps CI/CD pipeline faster
Make your CI/CD pipeline smarter and only build (and release) what's modified to optimize a runFinding that C# memory leak
Tracking the cause of my first memory leak written in C# (that I know of)The benefits of adding rx-query to your Angular project
Highlighting the functional and technical advantages by using rx-queryMaking your application feel faster by prefetching data with NgRx
Utilize the NgRx Global Store cache to persist data before it's shownGetting to know SQL Server Extended Events
How to convert your SQL Profiler template to an XEvent template.SQL Server Profiler, underused and undervalued
How to use the SQL Server Profiler as a utility knife to get a better understanding of your system.A use case for the RxJS expand operator
How I used the expand operator to create a retry functionality in rx-query.Show stacktrace when dotnet core API doesn't start
A snippet on how to get a stacktrace when a .NET Api fails to start.Testing RxJS streams with rxjs-for-await
How does rxjs-for-await compare to other approaches when it comes to testing RxJS streams, and what I like about these tests.Using MSW (Mock Service Worker) in an Angular project
Using MSW to mock your server in an Angular projectWhy writing integration tests on a C# API is a productivity booster
Time-consuming tasks that can be prevented with integration tests.Making sure you're using the correct query
Keeping your Angular Testing Library tests maintainable by using its new features.Polling with a NgRx Effect
A snippet on how to poll a service by using a NgRx Effect.Consistency over motivation
Eliminate motivation as a factor to get things done, find your rhythm, and just (start to) do.The initial developer experience while trying out Deno for the first time
Some notes from my first experience with Deno while writing a minimal API server.Don't commit focused tests
Prevent an accidental commit by using a linter.TIL: URLSearchParams
From my experience dealing with query strings was harder than it should be. But with URLSearchParams and URL it's actually pretty easy to do!An experiment, using the global NgRx Store as a local store
Getting to know the internals of NgRx to make a local component store happen.I like my components big
Creating sub-components comes with a cost. So what do I think of before creating a new component, because if a component passes the x lines of code isn't a valid reason.The difference between the canActivate and canActivateChild guards
How do the canActivate and canActivateChild guards work in Angular and how to these guards compare?Migrating a TSLint Rule to ESLint with @typescript-eslint
The most important pointers you need to know before migrating your TSLint rules to ESLint rules.How to not create your RxJS Observables
Do not reassign an Observable, instead wrap it in another Observable.How to test your C# Web API
How to use functional testing to have confidence in the code you ship.Generated tests with XState and Cypress
Let's explore how we can stop writing tests and at the same time be more confident in the code we write. We do this by using the new XState test package, in combination with Cypress and Testing Library.Make your C# applications faster with LINQ joins
If you don't watch out your C# application might suddenly perform badly. As a solution, we can limit the number of operations with a LINQ Join.Setting up Cypress with axe for accessibility
Having an accessible website is important. With the combination of Cypress and axe you can verify that your website is accessible, with only 2 extra lines of code.Flagged enum, why and how
Let's take a look at what a flagged enum is and when these can be handyUnlocking reactivity with Svelte and RxJS
I keep being surprised by how reactive Svelte feels. In this article, we take a glance at the Svelte internals to see how Svelte accomplishes this. This is important if we want to use RxJS in Svelte.Help Angular to make your application faster
Learn what we did to make our Angular application snappier.Destructure an object to remove a property
A snippet on use destructuring to remove a property from an object in an immutable way.How to test Svelte components
Writing Svelte component tests with the Svelte Testing Library is simple. Let's take a look at the setup to get you started!Print CSS with Angular
If you're using Angular, there's a good chance that you're using a component-based architecture. We can use this architecture to our advantage. Instead of creating one big print stylesheet with some selectors, which becomes unmanageable complex when you have to support multiple printable pages. We can move some of the layout back to the components.NgRx creator functions 101
The createAction creator function opened opportunities in the NgRx world. With it came two other creator functions, createReducer and createEffect. Let's take a look at what's so special about it and why it's important.Managing different slices of the same NgRx state
In this article, we'll iterate over an implementation to introduce multiple independent instances of a NgRx store slice. In an application, these instances can be represented by a tab-like interface. To come to a solution we'll use the Angular Router, NgRx Effects, and NgRx Router Store. We'll also see meta-reducers, helper reducer functions, and smart and dumb components.Multiple service calls from an Effect
A snippet on how to invoke multiple service calls within a single NgRx Effect.Google Maps is now an Angular component
The Angular Component pearl-lullaby (v9.0.0-rc.0) release introduces the second official @angular/component component, a Google Maps component. In this post, we take a look at getting started with the Google Maps component.Use the new Angular Clipboard CDK to interact with the clipboard
The new Angular Material release brings us a new CDK clipboard module to interact with the clipboard. In this post, we'll explore how to use the new Clipboard CDK by going over some examples.Reseed your database with Cypress
By using a Cypress task it's possible to run code JavaScript code in Node.js. We can leverage this API to reseed a database with data we're in control of. Having control over the data allows us to write specific and isolated scenarios to run tests against.Good testing practices with 🦔 Angular Testing Library
The Angular Testing Library provides utility functions to interact with Angular components, in the same way as a user would. This brings more maintainability to our tests, gives us more confidence that our component does what it's supposed to do, and it improves the accessibility which is better for our users. All these benefits, plus you'll see that it's fun to write tests in this way.Guarding your Angular modules 💂
A lot of Angular modules need to be imported with a static forRoot() function, via this function it allows us to configure the module. But sometimes we make the mistake to use the forRoot function more than once throughout an application. We might not notice it when this happens but often it is the cause of unexpected behavior, which is sadly hard to debug. In this post, we'll look into a solution.A little trick with Angular forms and directives 🃏
Imagine having a form that you want to use at multiple places inside your application. The form will have the same layout but the validation will be different. In our case, this form is used in a procedure and in each step of the procedure the form gets more restrictive. Can you keep it DRY? We had this problem and came up with the following solution.My love letter to XState and statecharts ♥
I discovered XState a year ago, I already had encountered state machines and statecharts before but I missed the point. Now a year further, I'm here to tell you that these are worth looking into and that XState is a the library to get you started. For me, the most important points to use XState or statecharts would be that it's declarative and explicit, it's hard to create invalid state. The nice extra's that you get with it, is the tooling around it and the portability across frameworks.Don't miss out on css variables
At first when I heard of css variables, I was a bit skeptical. Why would anyone use it if there are extension languages as scss, sass, less and stylus. After several years, I stated to notice more and more peoples using it, writing about it and talking about it. I was missing out on something... After a while of using it, I was hooked.Writing a dev.to blog post with VSCode
Writing and publishing a dev.to blog post directly within VSCodeReading Code Coverage
An intro to code coverage, how to read it, and how to make use of it in your workflow.Build once deploy to multiple environments 🚀
In our quest to build a twelve-factor app where we build once and deploy to multiple environment we encountered some problems, but we managed to solve them. Read here how we did it.Jump start your developer career with these 13 tips
I believe that to become a better engineer it all comes down to practice, practice and more practice. Especially when you just started your career. The problem is that when you're just getting started, there is much more to it than just writing lines of code.Working with Angular forms in an enterprise environment
At our company, we struggled with Angular Forms at the start. This is because we dived in head first, without talking about how we would want to use it throughout our projects. This post shows how we're currently using Angular Forms to be more productive.Social media cards with Vue and Gridsome
It's easy to create metadata tags with Gridsome, I was so happy with it that I wanted to write this post 😃. There is also a page in the docs on how to create metadata tags, but let's translate the theory into a real world example.Common and easy-to-make mistakes when you’re new to NgRx
Writing and refactoring FizzBuzz in NgRx with maintainability in mindBending TSLint to your needs
Using the power of TSLint in an unconventional way to create rxjs-operator-counter.Keeping browser tabs in sync using localStorage, NgRx, and RxJS
We’re going to take a look at how we can keep the state in sync when a user has multiple tabs open.Semantically release your Angular library
I’m taking you along in my journey towards a fully automated process for releasing a library! Using CircleCI and the semantic-release.Test for accessibility and help millions of people
Essential tools for maximum accessibilityExploring Drag and Drop with the new Angular Material CDK
Drag and Drop is a new feature in the new Angular Material CDK. Let’s explore it together!Sharing NgRx state between Angular modules is peanuts
A dive into NgRx selectorsIntegrate Jest into an Angular application and library
Follow me in this play-by-play guide and let's integrate Jest within your Angular project!Let's have a chat about Actions and Action Creators within NgRx
I think it's time you and I talk a bit about action creators. But before we get into action creators let's first start with actions.Start using ngrx/effects for this
You're probably only using ngrx/effects to handle the communication to an external source by triggering an effect with a NgRx action. But you can do more.How I test my NgRx selectors
Let us explore which methods I'm using to test my NgRx selectors.Introducing ngx-testing-library
An adapter around dom-testing-library to provide lightweight utility functions to test Angular components.Simple state mutations in NGXS with Immer
A follow-up post of "Clean NgRx reducers using Immer". But this time we're using NGXS as our state management library.Clean NgRx reducers using Immer
Declutter your reducers with ImmerData synchronization in multiple clients
Often when working with a CRUD heavy application you find yourself or someone else asking the question, what should be done when multiple users are using the same screens at the same time.ng update: the setup
Within 5 minutes you can automagically have your library upgraded when a user runs the ng update command.Required @Input() properties
How to create required input parametersParameterized NgRx Selectors
NgRx Selectors with PropsNormalizing state
A quick look at state normalization.