-
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 out 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 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 data between 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.
-
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 selectors
How can I select an entity from the store by its id?
-
Normalizing state
A quick look at state normalization.