Testing an NgRx project
How write maintainable NgRx tests within an Angular application
Stop 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 APIs
The simplicity of ASP.NET Endpoints
Keepings it simple with ASP.NET Endpoints and its dependency system
Maybe 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 simple
Pattern 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 UI
Solving 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)"
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 client
Getting 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 tests
How to patch an HTTP Response with Cypress
A brief post on how to patch a part of an incoming HTTP response
How 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 steps
Automagically optimize your images with Squoosh
Minify images as a pre-commit step with Squoosh, husky, and lint-staged
Environment variables with SvelteKit
A simple workaround to use environment variables in SvelteKit
A generic Angular template-driven validator
One validator to rule them all
A practical guide to Angular Template-Driven Forms
The things I looked up while learning the template-driven way
A new way to validate Angular Forms
Adding a layer on top of the Angular Forms API to declare useful and readable form validators
Argument of type 'interface' is not assignable to parameter of type 'interface'
A peculiar TypeScript error at compile time and how to solve it
Creating a new C# API: Validate incoming requests
Clean validation with MediatR, FluentValidation and the Problem Detail specification
Faster SQL Bulk Inserts With C#
Using SQL Bulk Copy to have a huge performance gain
Preload lazy-loaded modules based on user roles
Let's create a custom Angular preload strategy that loads all modules for the authenticated user
Nested 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 faster
Auto-focus a form control with an Angular directive
Give auto-focus to form controls with just a few lines of code
How 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 run
Finding 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-query
Making your application feel faster by prefetching data with NgRx
Utilize the NgRx Global Store cache to persist data before it's shown
Getting 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.
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 project
Why 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.
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 handy
Unlocking 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.
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.
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 VSCode
Reading 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 mind
Bending 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 accessibility
Exploring 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 selectors
Integrate 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 Immer
Data 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
Let your library automatically update with ng update
Required @Input() properties
How to create required input parameters
Parameterized NgRx Selectors
NgRx Selectors with Props
Normalizing state
A quick look at state normalization.