Image for post
Image for post

tldr;

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. In this article, you will learn one way of including it in your application.

Tailwind in Angular

One of the first things to know about Tailwind is that the main CSS file is huge. If you just shipped the full TailwindCSS file, your site would contain a lot of extra styles that will go unused. For example, I recently included Tailwind in a project and with the entire CSS file, the size was 3.53mb. After purging unused styles, the size of the included CSS file dropped to 10kb, or .2% of the original size. Now, this may not be the result in every application. The one I was working on was extremely small with only two pages. …


Image for post
Image for post

tldr;

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. Luckily there are tools to help with this in your Angular apps that make using SVG icons much easier than before.

SVG Icons

There are two ways to include SVG icons in your app. You can place a .svg image on the page, or the SVG’s XML code. The XML code is what allows you to change the display of the icon, and is my preferred way of doing it. The problem with the XML code method is that you have a big, complicated piece of XML in your HTML that doesn’t tell you what the icon is, and is prone to accidentally being changed. …


Image for post
Image for post

tldr;

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


Image for post
Image for post

tldr;

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. In this article, I’ll show you how to use the library in your Angular application to draw lines between two Angular elements.

Setup

To get started, you need to first install the npm package:

$ npm install…


Image for post
Image for post

tldr;

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.

Background

First, a little background on our workspace and how we deploy our apps. We build our apps with Google Cloud Build and put them in a Docker image. We then deploy those images on Google Cloud with Kubernetes. For a long time, we deployed every merge to master to our test environment. We then manually deployed to production by creating a tag prepended with prod_app_1 or prod_app_2. When Google Cloud Build is notified of one of those tags, the build is kicked off, the image created, and the app deployed. We decided, though, that we didn’t want to deploy all apps to test each time we merged into master. The decision was that we would tag affected apps in the same manner as production, but instead the tag would start with test. …


Image for post
Image for post

tldr;

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 didn’t break any previous portions of the app. …


Image for post
Image for post

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


tldr;

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. In this post, we’ll go over how to add feature flags to your app. We’ll look at a service that can be used in class files, a directive that you can add to HTML elements, and a guard to protect new routes in the application. …


tldr;

Angular content projection 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. The <ng-content> tag in an Angular component is what enables us to project content into our components. You can also select certain parts of the projected content by class, attribute, id, or tag and place it in a certain location inside the component if needed. …


tldr;

Sometimes we need to know the width of the browser window in our component’s class file. You could have a @HostListener in a component for the window's resize event, but you'd have to maintain the service, write tests to make sure it was working properly, handle observables correctly so there aren't memory leaks, etc. The Angular CDK's LayoutModule has a BreakpointObserver class that you can inject into a component, provide a breakpoint (or breakpoints) that you want to watch for, and it will emit each time you cross the threshold of a breakpoint (i.e. …

About

Preston Lamb

Full Stack JavaScript Developer | Angular | Node.js | www.prestonlamb.com | @plambweb

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store