Click here to subscribe to the newsletter and be the notified when a new blog post is available!

Running Nx Affected Commands in GitHub Actions

WWorking in an Nx monorepo over the last year has been really great. Sharing code between projects is really convenient. The only problem is that as you add more libraries and applications and projects, the time it takes to build or test applications grows as well. The good thing is that Nx monorepos come with a variety of commands that run on only portions of the codebase. For example, if your change only affects one library in your project, you can test just that library instead of the entire project. This is especially useful on your CI/CD server when you create pull requests. Tests can be run on the pull request branch, making sure that any new code is working and that it didn't break any previous portions of the app. In this post, we'll go over how to create a GitHub Action workflow to run the affected tests when a pull request is created.

Handling Falsy Values Emitted from Observables in Angular

In the last year or so, I've been fully embracing reactive programming in my Angular apps. That means goodbye subscribe and hello async pipe! It's been great, but there have been a couple times where the async pipe, in conjunction with the *ngIf structural directive, have not worked as I needed them to. The issue arises when the emitted value from the observable is falsy. When the emitted value is falsy, the *ngIf doesn't output the content on the screen. I understand why that happens, but many times the falsy value is a valid result and should be displayed. In this post, we'll cover an easy way to still use the async pipe and *ngIf, while still outputting falsy values.

Feature Flags in Angular

Many times when working on applications, especially with teams, multiple features are being worked on at the same time. They aren't all ready for deploy at the same time, though. At first blush, it seems like the only option is to hold off on deploys until everything is ready to go live, but there's no telling how long that could take. Also, in the meantime more features are added to the codebase. It's a never-ending cycle. But with feature flags, you can turn things off and on in different environments whenever you're ready. You can deploy to production at any time and just turn the feature flag off for a given part of the app.

Angular and Google Analytics

There are many times when we need to insert Google Analytics into our application to track what a user does or where they go in the application. Single page apps like Angular work differently, though, than a static site for example. This post will show you how to create a service that loads Google Analytics and sets up page view tracking for you.

Reactive Forms Benefits: Nested Form Groups

Many times when trying to collect data from users, the forms can get complex. It can be hard to know how to collect the data, and do so in the simplest manner, but I've found that reactive forms in Angular make it easier than I thought.

Objects in JavaScript

Objects are used in JavaScript applications all the time, and understanding how to create them, work with them, and use them is vital.

Nullish Coalescing Operator

The nullish coalescing operator is a relatively new operator in JavaScript. It's use is similar to the or operator, but with a minor difference that can be useful in many situations.

Using ng2-charts to Chart Date Based Data

Many Angular applications need to put data on a chart, and ng2-charts is a great option. There are several built in charts that just work. But you can also customize the charts quite a bit as well. In this post we'll learn how to chart your data by grouping it according to date.

Reactive Forms Benefits: Conditional Validation

Reactive forms in Angular have many benefits, but one that I've found especially useful is the fact that I can easily add or remove validation for a given field based on the value of another field. The simplicity of doing that allows us to create complex forms in a simpler manner.

Audio Recording Setup

A proper setup of the audio on your computer will make for great recording quality. Your listeners will hear nice crisp audio, and there won't be any fans or anything in the background. The great thing is you don't need to spend a fortune on equipment to get this quality. Using Audio Hijack and Loopback from Rogue Amoeba will help improve the quality of your sound output.

JavaScript Functions

Every JavaScript application uses functions. In this blog post we'll go over the basics of functions and arrow functions, providing default parameters to functions, passing named parameters to functions, and using the rest parameters in functions

JavaScript Loops

Any time we need to run the same code multiple times for a set of data, and don't want to just repeat the code over and over again, a loop is a perfect option. There are multiple types of loops, all of which accomplish a similar function but that go about it in a different manner.

JavaScript Comparison Operators

Comparison operators are frequently used in JavaScript applications, and are an important part of controlling the logic flow of the app. But if you don't have a good understanding of how they work you can run into a couple issues. Understanding strict comparisons and abstract comparisons is also really important, and in this article we'll cover both of these comparisons.

JavaScript Logical Operators

Logical operators are important in JavaScript applications. We constantly need to compare variables and do something based on that comparison. If some comparison is true, take path A; if it's false, take path B. If we don't understand the order of precedence of the logical operators, or don't fully understand the result of the comparisons, then we will spend lots of time debugging our application trying to follow the flow.

The JavaScript this Keyword

The this keyword in JavaScript is one of the most confusing parts of the language, but understanding how it works and to what it is referring is vital to writing applications with as few errors as possible.

JavaScript Variables: Value and Reference

JavaScript has two methods of storing data in the variables you declare: by value and by reference. It's important to understand how this works, because if you don't there can be unintended consequences of changing the data stored in the variables.

JavaScript Primitive Types

JavaScript has built-in, primitive types. The variables that you create have types, whether you know it or not. Understanding these primitive types and what's going on behind the scenes will help you understand how to better write your applications.

There's More to the JavaScript Console

We've probably all used console.log in our JavaScript projects. It's a nice, quick, convenient way to view the value of a variable or to see what's going on at a given time in the application. But there are many more options with the JavaScript console object that can help while working on your project.

JavaScript Variables: var and let and const

There are three ways to create variables in a JavaScript application: using var, using let, or using const. This will not be a post trying to convince you which one you should use, or arguing about what is best. It's just good to know about the differences and what it means when you use the different options.

JavaScript Variables: Scope and Hoisting

Creating variables in JavaScript is one of the most basic parts of the language. You probably do it all the time without even thinking twice about it. But if you truly understand how variables are scoped it can save you some issues in the long run, especially when you're getting started out. In this article, we'll cover all the basics with variable scope.

Angular State Management in RxJS Services

Most Angular applications need some amount of state management. In some applications, a state management library like NgRX or Akita might make sense. But many times you can probably get away with storing application state in RxJS services. We'll go over how to do this using RxJS BehaviorSubjects and Observables.

Angular Configuration on Netlify

Almost every Angular application needs some configuration to run. It may be as simple as the API URL, or information needed for authentication. And many times these values change from environment to environment. So what are the options for providing this configuration in Angular apps when the app is deployed on Netlify? We'll go over a few options in this post, and hopefully one option works for you!

Getting Started with Netlify Functions

JAMstack sites are great, due to their simplicity to develop and deploy. Static sites are also great for SEO, and load quickly providing a great user experience. But sometimes we need our sites to get data or do things. Until recently, I thought that once I crossed that threshold of needing to do something on the site, I needed to deploy an entire application. Then I learned about serverless functions; more specifically, I learned about Netlify's option of serverless functions. And let me just tell you, they're great.

Creating a Docker Image with GitHub Actions

GitHub Actions are a perfect way to set up workflows to build applications, Docker images, and similar things on git repo actions. Those actions could be pushes to a branch, pull request creations or merges, or release tags. In this case, we'll create a Docker image that can be used for Angular applications. This same process can work for any image and for any registry, however, and could be adapted for other applications as well.

Reactive Forms Benefits: Validators

Reactive forms are a great option for capturing user input in an Angular application. They provide for a lot more flexibility in validation and reacting to input from users. In this article, we'll look at how easy it is to add custom validation to inputs using reactive forms in Angular.

Why Use Nx for Monorepos

Nx, by the folks at Nrwl, is a tool that assists in creating Angular, React, and full stack applications using Nest.js. It's especially helpful when working in a monorepo. A monorepo is a single repository that contains multiple projects, many of which share code amongst themselves. It can be tricky to configure your monorepo, but Nx makes it much easier.

Flexible Caching and Refreshing with RxJS in Angular

RxJS makes it easy to cache API calls and share the data to different parts of your application, but some API calls require parameters that can change at some point. But that doesn't mean that we don't want to cache data when possible, or build a gigantic array of cached data. Using RxJS and a little bit of logic, we can cache the most recent call and replay it with multiple subscribers and still have the flexibility of passing new parameters.

RxJS Caching and Refreshing in Angular

Some of the calls made to APIs in our Angular apps don't need to be made every time we need the data. The response from the server could be cached and used for a time, saving calls to the database and improving responsiveness of the site. Combining a few different parts of RxJS makes it easy to do just this.

Content Projection in Angular

Content projection in Angular allows you to pass content (HTML, other Angular components) into another component, making it more reusable. It allows you to make more reusable components that focus more on functionality than on UI. Then you can use them in different applications with entirely different UIs.

Angular CDK's BreakpointObserver

Every now and then we need to know the width of the browser window in our Angular component's class. We could write our own service to watch the resize event on the window, but the Angular team has us covered with a service in the CDK library. In this post we'll talk about how to use the service as well as when we might want to use it.

Unit Testing in Angular

Unit testing in Angular is an important part of the development process. If you're writing components, services, directives, etc and not writing unit tests to accompany them, you're setting yourself up for trouble. What happens when you refactor a function and accidentally break something? You go to production with that bug and then have to rush to fix it. But if you have comprehensive unit tests, you'll know about the bug and will be able to fix it well before going to production.

Directives and AfterViewInit

Angular's attribute directives are a great option for altering the output of an HTML element, but what happens when the content in the HTML element is output using interpolation? If not done correctly, the code inside the Angular directive will have been executed when there was not yet any text in the element. In this blog post, we'll explain this problem in more depth and will go over the solution to the problem.

Getting Started with Angular PWAs -- Part 2

After getting your PWA up and running, there are a couple techniques that come in handy when presenting information or updates to the user. This article will cover how to listen for app updates and present an option to the user to update, as well as presenting the user with an option to install the PWA on their device.

Getting Started with Angular PWAs -- Part 1

Progressive Web Apps are the future of providing a great mobile experience for users while at the same time not having to duplicate code by maintaining native app codebases along with a web application codebase. Even better news is how simple Angular has made it to get going in developing a PWA.

Getting Started with Angular Elements

Reusing code across projects is the goal, right? Write the code once, use it wherever you want, regardless of the framework or project. Angular elements is perfect for just this situation. Build components in a familiar manner, and then use it in your JAM stack app, React app, Wordpress Site, etc. Doesn't matter, just use it.

Intro to Testing in Angular

Testing in Angular is an important piece of the pie. But it's been overlooked by me. I've decided to change that this year. This is the start of that journey.

Get started with Angular Grid in 5 minutes

A quick tutorial on how to integrate Angular grid component from ag-Grid with Angular framework.

Using OnPush Change Detection and Updating the UI

Using the OnPush change detection strategy can bring great performance benefits to our application. But using this strategy instead of the default strategy changes how those components update their UI. Understanding how this works can save you a lot of headaches and problems.

Using Angular Route Guards to Limit Access by Roles

Many times we want to restrict access to our application based on a role that the user has. This is a perfect use case for Angular route guards. So how do you do that with Angular route guards? Calling the server in a route guard is easy enough, but getting the list of roles that need to be required is the tricky part.

Loading App Configuration in the APP_INITIALIZER

Loading runtime configuration in an Angular app can be a tricky problem to solve, but it's vital to be able to change the configuration of your app without having to rebuild the application. Many languages and frameworks already provide easy ways to do this, and now here's an easy way to do the same thing in your Angular applications.

App Config Editor Project

Announcing: a reusable starter project for adding and editing configuration for your apps, which can be stored in a database and loaded in your application. This gives you the ability to add/edit configuration as you need it, without having to store it in a file and keep track of the files on the server, etc.

ES6 Code in an Angular Project

If you're writing JavaScript that's outside your Angular project, and want to include it, you might first be inclined to use ES6 syntax and methods. You might even be able to get away with it when you're in development mode. But once you try and do a production build of your application, a confusing error is going to appear. One of the plugins used in the production build process only wants ES5 JavaScript, and the error messaging is a little vague.

TemplateRefs in Angular

Angular provides a great way to use the functionality of a component from a component library, but provide your own components to display anything that needs to display. It allows the component library to do all the logic, with the display half of the implementation of component coming by the developer who's using the library component.

Global Error Handling in Angular

The Angular JS Framework provides different ways for you as the developer to handle errors that occur in your application. Two of those ways are providing an ErrorHandler and providing an HttpInterceptor. You can handle errors here, and do different things with those errors.


The CSS pseudo class :focus-within is perfect for styling child elements of a parent container when the parent or any children receive focus.

ngGirls and ng-conf 2018

I’ve had a crazy 6 weeks since ng-conf, but man it was great this year. This was my third year, and it was probably the best year I’ve been. It gets better and better each year. One of the best parts was ngGirls on the Tuesday before the conference started....

Angular, Node, and Auth0

This blog post covers implementing Auth0's authentication into an Angular and Node.js application, including using Auth0's Management API to get a user profile and update a user's profile.

If I Can Do It, You Can Too!

I’ve tried to write this post multiple times. I could never find the right way to word it though, or felt like nobody would care. But I was thinking about how my career has gone so far, and how lucky I feel, that I want to give one other person...

Dockerizing Your Angular App

Docker is a great way to ship production code, and working with it and Angular can be confusing. This post will teach you how to put your Angular app, built with the Angular CLI, into a Docker image which can be run in production.

Authentication with Angular and Sails

I recently had to convert an application from using session-based authentication, managed by passport and Sails.js on the server, to JWT authentication. This is a quick breakdown of the steps used to accomplish this. Angular Let’s start on the Angular side of the application. So for authentication, we need our...

Finding an Object in an Array with Waterline

Sails.js is one of my favorite Node frameworks. There are a lot of built in advantages that make getting up and running quick, easy, and painless. One of the benefits is the ORM/ODM that it comes with, Waterline. There are a lot of adapters that allow you to use many...

Installing SQL Server for Docker

SQL Server is a powerful database option to use, but up until recently it’s not been possible to use it unless you were on a Windows machine. Well, that’s changed (along with many other Microsoft products). This week at work I decided to finally jump in and get SQL Server...

Configuring Angular Services

This week I needed to turn an Angular module into an npm package that I could import into multiple projects. The tough part was that in this module, there was a service that posts to a URL which needed to be configured. Luckily, Angular provides a pretty simple way to...

Angular HTTP Error Interceptors

Angular 4.3 introduced HTTP interceptors. This gives you the ability to handle every outgoing http call and every incoming response, all in one spot. Most of the examples I’ve seen out there cover the first, with each call having an authentication token attached to the call. I needed a way...

Why Sails.js?

Today I got the opportunity to give a presentation at Dev Mountain in Provo, UT on why you should use Sails.js, an MVC framework for Node. There are a lot of reasons, but I wanted to share some of my favorites. Blueprints One feature of Sails that is really useful...

Vertical Centering HTML Elements

I dont’ know how many of you have tried to vertically center HTML elements before, but it can be a big pain in the butt. A coworker had once given me some hints and a couple of CSS classes that I could use to achieve it. It really wasn’t easy...

ngConf 2016 Recap

Last week I attended my first ever developer conference. Or any conference, for that matter. ng-conf 2016 was a blast! I happened to get a chance to buy a ticket late, way after I thought I’d even have a chance at attending. At the beginning of April I got an...

React.js Tutorial Recap

Today I finished my first beginner tutorial on React.js from Pluralsight. It was a pretty simple app, where you have the numbers 1-9, and you have to choose the proper numbers that add up to the number of stars that show up. The game ends when you use all your...

Getting Data with React.js

This lesson in the React.js tutorial I’m doing focused on getting data from the GitHub API and displaying it, dealing with user input, and looping through an array of items and outputting them. Getting Data Getting the data was actually quite simple, by using jQuery to make a $.get call...

Getting Started with React.js

I decided I really needed to start learning React.js. It’s the big thing these days, and I don’t want to get too far behind, so I’m starting to get on the bandwagon. I still have access to Pluralsight, which has been great so far for other stuff I’ve been doing,...

Sublime Text 3 Setup

The more I use Sublime Text, the more convinced I am that it’s the best text editor there is. It’s just so powerful, has so many plugins, and offers users so many more options than other editors. I read through @wesbos’s book, Sublime Text Power User, and my developing life...

ST3 ASCII Replacer Plugin

I wrote my first Sublime Text 3 Plugin! Granted, it’s nothing overly complicated, but it will save me a lot of time. I spend a lot of time copying and pasting text from Photoshop mockups, or from e-mails, or whatever it may be. I would then always forget to double...

AngularJS and Firebase

I recently found a pretty cool new piece of web development technology: Firebase. You can read more on their site, but basically Firebase is a way to instantly sync data across devices. If you make a change on your computer, it instantly shows up on your phone. They take care...

AngularJS Services

I wrote my first AngularJS service today. It was nothing big, I was just trying to keep from repeating code on every screen. On the site, an alert shows up after a user adds or updates a record. Angular-ui-bootstrap was giving me most of the functionality I wanted, but it...