Font Loading Performance for Single-Page Applications

If you’ve ever worked in a project architected as a single-page application, the following pattern may look familiar:

<!doctype html>
<title>My Application</title>
<div id="app"></div>
<script src=""></script>
<script src=""></script>
    React.createElement( 'span', null, 'Hello World' ),
    document.getElementById( 'app' )

Note the empty div element. While this example uses React, most any of the common JavaScript frameworks will follow this convention of mounting an application into some root container element. It’s not until the application code has loaded and computed the rendered result that anything is shown on the page.

If an application uses custom fonts, there’s an interesting side-effect of this loading procedure which we might not anticipate. Presumably in an effort to optimize network requests of unused assets, Chrome will not load a font file if there is not any text in the page which uses that font. Even if we declare the fonts used in a CSS @font-face rule, a font file will not be requested until after the initial rendering of the application. This is due to the fact that, until that point, there’s effectively no text shown anywhere in the page.

This has the unfortunate effect of introducing what is known as a “flash of unstyled text”, where the text in an application may be shown using a fallback font until the font has finished loading.

Ideally, if we know that our application will render text, we would want the font to be loaded as early in the page lifecycle as possible.

Continue reading

Back to Basics: A Possible Future Without JavaScript Build Tools

As someone who spends the majority of their time working in a modern front-end JavaScript tech stack, it may be surprising to hear that I’m often disillusioned by the rate of churn in our development workflows. But for me, it’s not the near-daily introduction of new libraries. In fact, I find this perpetual inventiveness to be inspiring. No; instead, it’s that we push ourselves further and further away from anything resembling a shared baseline of knowledge. For each new paradigm we layer into our stack, we too easily overlook its broader human impact as a barrier to entry, a prerequisite of knowledge unique to our project.

Continue reading

TypeScript Tooling for Your JavaScript Projects

When evaluating TypeScript, it’s usually considered as an investment into the language itself. For this reason, and despite all its merits, some developers might be inclined to dismiss it altogether out of a lack of interest in learning a new syntax, or a worry to impose that requirement onto others as part of your onboarding workflow.

But even if you’re determined to use plain-ol’ JavaScript in your projects, it’s worth considering the tooling that TypeScript offers. I suspect that many developers would be surprised to find they can achieve the benefits of type safety without leaving the comfort of JavaScript.

There are many reasons why one should or shouldn’t adopt TypeScript into their workflows. This blog post isn’t concerned with convincing you one way or the other. Instead, I’ll focus on demonstrating how you can benefit from TypeScript tooling even if you choose not to adopt the language itself.

Continue reading

Publishing Small npm Libraries with Rollup

Over the past few months, I’ve published a number of Node modules aimed at implementing a very minimal and focused set of features. In doing so, I’ve made a point to take special care in keeping the size of the code as small as possible; ideally a kilobyte or less in size when minified. Not only does this force me to think of the simplest solution, it importantly reduces the burden on applications in using it, especially when it’s bundled to be served on the web. There are a number of techniques I’ve employed toward this goal, and for the purpose of this post I’ll focus on the module bundler: Rollup.

Continue reading

Regimen: A workout progression planning web app


Regimen is a side-project I’ve been building off-and-on for the past few months. It’s a web app that I’d originally created for myself out of frustration for the lack of options in helping me plan my workouts. Specifically, most weightlifting routines offer some form of downloadable Excel spreadsheet, but these are cumbersome to work with when at the gym. I found myself either fumbling with the Google Sheets app on my phone, or printing a paper copy of the spreadsheet – neither was a great solution.

Continue reading