Blog

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

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.

:focus-within

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...