How to tree shake / subset Font Awesome 5 icons

Learn how to tree shake FontAwesome 5 icons with Webpack.

The current FontAwesome 5 Free SVG JS file size is over 1mb. FontAwesome Pro is almost 3mb! There’s no way any single application will be using all of those awesome icons. I wouldn’t even say that they’re using a quarter of them. What does this mean? It means you’re having a user load over 1mb of icons only to use, at most, 80kb of them. No good. I am going to show you how to tree shake or subset the SVG icons only used in your app. (more…)

How to delete a remote Git branch

Deleting a remote Git branch is not as obvious as deleting a local branch. Following best practices when creating separate branches for each issue, you’ll end up with a lot of old branches both on local and remote Git repo. Here’s how to delete both remote and local branches. (more…)

Freebie: One element map markers with CSS and HTML only

One element map markers with CSS and HTML example
In one of my work projects, I needed to create one element map markers with CSS and HTML only to pin locations on a map with dynamic text. Thought I would share with you how to create written in SCSS for ease of color changes and copy/paste. (more…)

Purge local Git cache to reflect remote origin.

If you’re using a Git host (and you most likely are) you might have run into the problem where your local Git doesn’t update or show the changes after deleting a branch on your host. Even when using the git pull command. You need to purge local Git cache to reflect remote origin. (more…)

Web font loading in the modern web

Web font loading in the modern web is confusing. Ever since custom web fonts have become widely available the process of loading them have been a topic of debate.

The following outlines what I use and feel is a safe approach to web font loading on production sites. Due in part, because of the non-blocking asynchronous font loading and safe fall back called the Font Observer technique. (more…)

CSS Animated Underline Hover for Links


Create a CSS animated underline hover for a more unique hover underline than the boring default browsers with CSS only. (more…)