My Favorite AI Tools for Building Angular Apps

AI is changing the way we build applications, and choosing the right tools can help you accomplish your goals in less time and with better results.

Introducing a11y-oracle: Testing That Goes Beyond Static Analysis

Introducing a11y-oracle, an open-source toolkit that uses the Chrome DevTools Protocol to test what screen readers announce, validate keyboard navigation and focus indicators, and automatically resolve axe-core's "Needs Review" results in your Playwright and Cypress tests.

Modernize Your Components: The Power of Signal Inputs and Outputs

This article explores the implementation and benefits of integrating Angular signals with component inputs and outputs, offering a more performant and reactive alternative to traditional decorators.

Angular and the Resource API

As signals become more popular and more widely used, the need for a smooth interaction between asynchronous API calls and the synchronous nature of signals has arisen. And that's where the Resource API comes in.

Angular and Copilot Coding Agents

Signals have been around in Angular for a while now. But if you are like me, you might still be unsure when or why to use them. Let's look at an example of when you can use signals instead of other options.

Angular Signals in Practice

Signals have been around in Angular for a while now. But if you are like me, you might still be unsure when or why to use them. Let's look at an example of when you can use signals instead of other options.

Control Flow Syntax in Angular

In Angular 17, new options for control flow syntax were added to Angular to conditionally show or hide content and to loop over arrays.

Bundle Size Improvements from Deferred Views in Angular

In Angular 17, a new feature was added that allows for fine grained control over when components will be loaded in your app.

Strongly Typed Reactive Forms in Angular

Type-safe forms provide a lot of security when working with reactive forms in your Angular application.

Full Stack Apps with Angular and NestJS in an Nx Monorepo

Many of the applications we need to build require a front end app that the user can interact with, and a back end application that handles the requests from the user. There are a lot of ways to build these applications, but the more unified you can build them the better it is for you as a developer.

Developing Angular Components with Cypress Component Tests

Developing UI components for our apps can be difficult. They require different inputs, or you may have to fill out a long form to see it, or have specific data come back from the API to see the component. But using a tool like Cypress’s component tests can simplify it by isolating the UI component so you can develop it without a lot of setup.

Functional CanDeactivate Guards in Angular

CanDeactivate guards in Angular can be very helpful in your app. Preventing users from leaving a route can keep the user from losing their progress on a form or something similar. Angular makes it easy with the CanDeactivate guard, and they’re even more straight-forward to write with the (not-so-new anymore) format of functional guards.

Analog: Angular's Metaframework

Many JavaScript frameworks have worked towards server side rendering and static site generation recently. React has Next and Gatsby, Vue has Nuxt. And now, Angular has Analog.

Angular Signals

For years now, Angular developers have been working with observables and state management libraries to make their applications reactive. Everyone has an opinion, and there have been a lot of different implementations. Recently, however, the Angular team released an official path forward for reactivity in Angular apps: Signals.

Standalone Angular & Nx

Standalone components, directives, and pipes are the future of Angular. Luckily, Nx works great with the new paradigm. However, if you’re like me, you may be a little overwhelmed with how to organize your project with standalone and Nx. I have been using Nx for years, and Angular for even longer, and wasn’t exactly sure what to do to get started. Once I got started, though, I found out it wasn’t all that bad.

Functional Route Guards in Angular

In Angular v14.2, functional route guards were introduced as a new way to protect parts of Angular applications. Previously, the only way to write route guards was by using class based guards. The class based guards worked fine, but required a lot of extra setup to be used.

Using Observables as Outputs

We constantly write components or directives that use `@Output`s to emit data to the host component. Traditionally, that’s done by using `EventEmitter` from `@angular/core`. But you can also emit changes using an `Observable`, and luckily you can do just that without any issues. In this article we’ll look at a use case for this situation, and how to implement and test the solution.

Installing Your PWA on iOS

The `@angular/pwa` package is a great way to get your app up and running as a PWA. All configuration is completed for you, and with little extra setup your users will be prompted to install the app...that is, if they are using Android.

Coding & AI: Open AI's Chat GPT

Like it or not, AI is becoming part of our life as developers. How will new tools like OpenAI's ChatGPT change how we code?

Custom Form Inputs with ControlValueAccessor

There are times when the default inputs available to us in the browser don’t meet our needs or need to be included in a reusable Angular component. You may want to create a custom checkbox or radio button, or just want to use a card with a button as a form input. In any of these situations, you can use the Control Value Accessor to allow an Angular component to communicate with your form. In this article, we’ll look at an example of using control value accessor.

Nx Conf 2022 Recap

Nx Conf 2022 is in the books, and it was great. The speakers were well prepared with practical examples of how to best use Nx to improve the maintainability and architecture of your applications. Here’s a brief overview of some of my favorite talks.

RxJS: defaultIfEmpty

RxJS pipelines are convenient ways to get work done in your applications. You can essentially tell the app the steps it needs to take, and it will go step by step through the pipeline. But what if one of the steps will potentially be empty, but you want the pipeline to continue? That’s where the defaultIfEmpty operator can come in handy. I recently learned about it when I had a similar situation, and it worked perfectly for me.

Astro + Angular

Astro is a relatively new, all-in-one framework with the goal of creating performant, content-focused websites. The great part is that while there is some new Astro specific syntax you can learn, you can also bring your own frontend. Until recently, Angular was the exception to that rule. But with the release of standalone components to the Angular framework, you can now pair Astro and Angular together.

Reusable Component Pieces with ngTemplate Outlet

ng-template, ng-container, and ngTemplateOutlet provide the ability to reuse content inside an Angular component. Understanding what’s going on and how to use these methods allows a developer to build what they want without needing to duplicate parts of the template.

Angular Lifecycle Hooks

Each Angular component has a lifecycle that lasts from the time the component is added to the page until it is removed from the page. There are several times to hook into the lifecycle, where you can run some code necessary for the component. We’ll look at a few of the most common hooks.

Angular Typed Reactive Forms

Reactive forms in Angular are a convenient way to manage your forms and react to changes made by the user. One issue with them has been that the value of the form has not been typed. Because of this, you could improperly access a value from a form and not know until runtime. Angular v14 introduces typed reactive forms, and removes this potential issue.

Angular Standalone Components

For years, Angular has been organized and built on top of modules. These modules grouped functionality inside your app. Components, pipes, services, and directives that had related purpose were grouped together and declared inside modules, which would need to be imported in another part of the app to be used. With standalone components, the reliance on modules can be lessened.

Git Worktrees In Use

Most of us use Git every day, but generally use only the features that we are familiar with and allow us to do our job. There's nothing wrong with this at all, but learning new tricks can take your productivity up a level! With that in mind, let me introduce you to Git Worktrees.

Shared Cypress Assets in an Nx Workspace

Many times Nx workspaces have multiple applications, and being able to share custom Cypress commands between the end to end test projects.

Authenticating Your App for Cypress Tests

Many Angular apps require the user to be authenticated before using the app. This can make writing and running Cypress end to end tests difficult. If your login flow requires you to leave the app to authenticate, the problem becomes even more difficult. This article will cover a solution to this problem and allow you to write your Cypress tests.

Detecting Idle Users in Your Angular App

Occasionally the applications we work on need to react in a particular way if the user is inactive for a certain amount of time. For example, if the user is inactive for 5 minutes a popup should appear and ask the user if they want to stay logged in or if they want to log out. In this article, we'll look at a way to do that in your Angular app.

Share Interfaces in Angular and NestJS with Nx

I'm a big fan of using Nx and having multiple apps in a single workspace, especially when the apps have a lot in common and a lot of code to share. This is especially helpful when dealing with interfaces for data that your Angular app deals with, and either gets from or sends to the server. In this article, we'll talk about how to share those interfaces between the front and back end.

Multi Step Forms in Angular

Forms with multiple steps are common in web applications, but they can be difficult to organize and manage the data. Using reactive forms in Angular, however, it can be less painful. In this article we'll take a look at one way to manage multi step forms in your Angular app.

Pros of NestJS for Angular Developers

As an Angular developer, I have been looking for a backend framework that helped me to be as efficient as possible. I've tried a few different Node frameworks, but my new favorite is definitely NestJS. From the beginning, I felt right at home with the way NestJS encourages you to organize your code, including with modules, HTTP interceptors, pipes, and more.

The New Angular Dev Tools!

They're here! After a long time of people hoping and asking for some dev tools to work with their Angular apps, there is now a new Chrome extension for Angular dev tools. The Angular team has worked really hard on this, and I'm excited to introduce you to it in this blog post.

Angular & Tailwind: Q&A

I recently led a workshop on Angular and Tailwind for ng-conf 2021. The purpose was to introduce Angular developers to Tailwind, including how to implement it in your app and how to use Tailwind. A couple weeks after the event an attendee reached out with a couple questions and I decided to write an article about it.

Manage Complex Reactive Forms in Angular

We've all had to manage complex forms in our Angular apps, and it can get messy really quickly. Making sure to use all that Angular has to offer for reactive forms helps make the experience better.

Run Code when You Leave Your Angular App

We have all seen and likely used the ngOnDestroy lifecycle hook. But did you know it doesn't fire when the browser tab is refreshed or closed or the URL is changed to a new page? What do you do if you need to do some cleanup when the entire Angular app is destroyed? It turns out to not be too hard, and you'll learn how in this post.

Conditional Templates for Angular Components

One of the many benefits of working in Nx workspaces is the ability to share code between applications. In an Angular application, that means being able to share components between multiple applications. The problem is that different applications may have different design systems, even though the functionality is the same. I recently ran into this issue, and will go over a solution in this article.

Scully and Netlify CMS

Scully is great for building fast, static websites. If you have a technical background, adding content to the site is relatively easy. You can edit the HTML directly, or add new markdown files for new blog posts. But less technical users benefit from having a content management system to edit the content. Netlify provides a CMS option that you can use, and getting it set up with Scully is pretty straightforward.

Using Tailwind to Theme Your Angular App

One of Tailwind's best features is the ability to extend its color palette and other utility classes for your application. This functionality can be used to be able to dynamically change the theme of your Angular application. In this article, you'll look at how to create an Angular service that loads a theme as your app bootstraps.

Getting Started with Deno

Deno is a runtime for JavaScript and TypeScript, much like Node.js. It is built on modern web standards, with the same APIs that you have in the browser. It is new but its future is bright. In my new video course, you will get hands on experience so you can be ready to use Deno for your applications and projects.

Creating Custom Scully Plugins

Scully.io is a great tool for Angular developers. Its tagline is, "Scully makes building, testing and deploying JAMstack apps extremely simple." Essentially, you build your application in Angular and then Scully will take it and generate static HTML and CSS for you. Those assets can be deployed, and the end result is a high quality, blazing fast experience. In this post, we'll talk about how you can extend the default functionality of Scully to better suit your needs. Scully's plugin system makes adding that extra functionality much simpler than you may think, and you will learn how to create a plugin here.

Angular and Tailwind

TailwindCSS is one the most popular CSS frameworks on the market today. It makes building and styling modern sites easy by combining utility classes on your HTML elements. There is no set style with Tailwind like there are other CSS frameworks. It allows you to start from scratch and build the site exactly as you want.

Managing SVG Icons in Your Angular App

In the last couple years, SVG has become the preferred way of displaying icons in web applications. This is because SVGs can be scaled to any size without loss of quality, they can be changed to any color, and they can be animated. These are just a few of the benefits. The downside is that the SVG code is a little hard to manage and deal with in your application.

Introducing the @ngneat/dag Library

If you need to build a workflow of some sort, a good way to organize the model is by using a directed acyclic graph. DAG models can be used to store a lot of information, and they can be somewhat complicated. Essentially, the data is represented by vertices (which I call nodes throughout this article) and edges. The edges connect one node to another, and go from earlier to later in the sequence. This model works perfectly for building a workflow, and in this article you'll see how to use the @ngneat/dag library to manage a DAG model in your Angular application.

Using leader-line to Draw Lines Between Two Angular Components

Certain applications require a visual cue that two items are related. There are many ways to accomplish this effect, but one simple way is to use the leader-line NPM package. The package allows you to draw a line between two elements by just passing the elements to a constructor function. The library then takes over, allowing you to pass options for customization as well.

Deploying Nx Affected Apps from GitHub Actions

Having multiple apps in a Nx workspace is common and convenient, but when it's time to deploy the apps it can be difficult to only deploy the correct apps. Sure, you can deploy all the apps, but that's unnecessary and can cost more money by having CI/CD servers running for longer periods of time. If an app hasn't changed, it shouldn't be deployed. With Nx's tools, we can find out which apps are affected by a certain change, and only deploy those apps.

Running Nx Affected Commands in GitHub Actions

Working 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 did not break any previous portions of the app. In this post, we will 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.

: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 some hope. So hopefully this touches at least one person out there.

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.

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 different databases with your application and no need to rewrite the database access code.

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 running on my Mac using Docker. Here's a quick recap of how I did this.

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 do this, although it did take a little time to learn exactly how to do this. Hopefully by the end of this blog post you'll be able to do the same in your app.

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 to handle and display errors on HTTP calls, and didn't want to put the error handling on every single call I make. This is a quick example of how to implement this in your app.

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.

Vertical Centering HTML Elements

I don't 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 though, and hard to have other people come behind and know what's going on.

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 email saying they had released one last round of tickets and I could buy one if I wanted. I jumped at the chance, and man am I glad I did! Luckily for me, my work was willing to foot the bill, and in turn it gave me the chance to go learn a lot and get fired up about Angular 2.

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.

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 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, so I'm going through some of their tutorials on there.

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.

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 check that the apostrophes, quotation marks, and ampersands were replaced with the proper plain text or html code versions.

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.

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.

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.