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

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

Adding jQuery, Bootstrap 4 and additional jQuery plugins to Laravel 5.5

It seems jQuery has been becoming less and less relevant in the front end world as Laravel 5.5 makes adding jQuery, Bootstrap 4 and it’s plugins a bit obscure with little to no documentation on how to compile them with Laravel Mix. The solution I found is the easiest way to maintain Bootstrap 4, jQuery and jQuery plugins on your Laravel 5.5 application. (more…)