DEV Community: Michael Herold

Grouped pagination in ActiveRecord

Michael Herold — Sat, 18 Aug 2018 14:00:49 +0000

Sometimes, designers will mock-up an extremely usable page that they’ve thought about and tested. Once they’re done and they bring it to you to implement, you look at it and think, “how on Earth can I do that efficiently?” One such case happened at work recently.

We were working on a “command center” of sorts where we show our customers a list of upgrades in various states. The design called for what looked like three different lists of records with each table consisting of records in a state. Since a customer can have potentially dozens of these records, we knew we wanted to paginate the page. The wrinkle in setup was that the pagination should consider the full list of records as the dataset, not each list individually. This caused us to wonder how we can efficiently implement grouped pagination in ActiveRecord.

Naive implementation

When presented with a mock, it’s sometimes difficult to fully understand the intended behavior. For example, take the following abstract mock. The blue represents “draft” posts, the green are “unpublished” posts, and the red are “published” posts¹.

Three groups of records, grouped by status

Upon first inspection, my pair and I saw three lists of records, each grouped by a headline that corresponds to a status. Arguably, the natural understanding of the pagination behavior on this mock is to paginate each set individually. When we translated that to controller logic, the naïve implementation looked something like this:

class PostsController < ApplicationController
  def index
    @drafts = Post.draft.page(params[:dp])
    @unpublished = Post.unpublished.page(params[:up])
    @published = Post.published.page(params[:pp])
  end
end

We questioned whether we understood the mock correctly since that seemed like it would be a challenging user experience. To make sure we understood it, we did our due diligence and reached out to the designer. It turned out that we should paginate the whole dataset, not each piece individually.

One dataset

We took the mock back for further review with our newfound understanding. A few minutes later, we sketched the following diagram:

The intended pagination scheme for the three groups

By treating the list as a single dataset, it was clear that each page can have multiple groups on it. However, it wasn’t necessarily true that each page has every group on it. Some might have all three, depending on the size of the query, but others might have only two of the statuses, or one!

Complicating things even further, we knew that the order was primarily dependent on the status of the post and we should sort each set of posts (grouped by status) by title. Clearly, we should run a single query and paginate off of that, like the following mock:

The resulting set of paged records, as shown on each page. Notice the complications due to the ordering and grouping.

We were initially stumped. How could we do this efficiently?

First attempts

Our first attempt to do this was in the database using the GROUP BY clause in SQL. GROUP BY is great for when you need to aggregate information for groups of records. However, we needed to treat the set as a single source so that we could paginate it. That’s not possible using GROUP BY.

After that, we tried to step back from doing anything fancy and use an ORDER BY clause. However, we thought back to the requirements: we must show the draft posts first, the unpublished posts second, and the published posts third. Since those three terms alphabetically sort in the order, “draft”, “published”, “unpublished,” we knew it wasn’t a straightforward query.

Grouped pagination

We thought a little harder about the problem. If we could somehow change the “status” field to a number, we could easily order the posts by that. With this thought, we reached for the CASE conditional expression to transform the status field into something we could use. Transforming the post status and ordering them by that calculated field using a SQL fragment looks the following:

class Post < ApplicationRecord
  def self.order_by_status
    clause =
      Arel.sql <<~SQL
        CASE "posts"."status"
        WHEN 'draft' THEN 0
        WHEN 'unpublished' THEN 1
        WHEN 'published' THEN 2
        ELSE 3
        END
      SQL

    order(clause)
  end
end

I prefer to use Arel nodes for this purpose to give me better error messages if something breaks, so we refactored to this form:

class Post < ApplicationRecord
  def self.order_by_status
    order(
        Arel::Nodes::Case
          .new(arel_table[:status])
          .when('draft').then(0)
          .when('unpublished').then(1)
          .when('published').then(2)
          .else(3)
    )
  end
end

Great! We had our posts grouped and ordered appropriately with a call to .order(:title). We could then plug it into the controller for viewing²:

class PostsController < ApplicationController
  def index
    @drafts = posts.select(&:draft?)
    @unpublished = posts.select(&:unpublished?)
    @published = posts.select(&:published?)
  end

  private

  def posts
    @posts ||=
      Post
      .order_by_status
      .order(:title)
      .page(params[:page])
  end
end

This single query³ was able to do what we needed it to do: grouped pagination. It gave us a unified dataset to paginate over, grouped by status, in the correct order for each group. The confusing logic was easily isolated behind the Post.order_by_status method and we test it in isolation to make sure future Rails upgrades don’t break the syntax or logic.

The post Grouped pagination in ActiveRecord appeared first on Michael Herold.

In the interest of not complicating this post with the intimate details of our domain, I decided to show the example using blog posts as the domain of understanding. All you need to know about that is that posts have a “title” and we store statuses as strings. ↩︎
In reality, we didn’t stop here. We extracted the result into a model using SimpleDelegator. This let us remove the grouping logic from the controller and the view. However, that’s not germane to this post, so I’m ignoring it. ↩︎
The use of select might have caught your eye. Since we needed to show the records on the page, it’s not a performance concern to select from the relation. Also, using #where has two problems. First, it removes the pagination. Second, it runs three queries instead of one. ↩︎

Using the double-splat operator in Ruby

Michael Herold — Fri, 17 Aug 2018 14:00:23 +0000

The double-splat operator is one of my favorite additions in Ruby 2.0. For some reason, the two little asterisks together make me happier than an optional Hash parameter in a method. Even so, outside of method definitions, I didn’t realize there was a use for the double-splat operator until I dug into a bug in Hashie. I liked the result enough that I wanted to take a quick minute and share what I found.

Related behavior in JavaScript

If you write any modern JavaScript, you might have seen the following pattern:

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return {
        ...state,
        visibilityFilter: action.filter
      };
    default:
      return state;
  }
}

That ... spread operator is really nice for creating new objects from others without modifying the originals. I really liked this when I built my first Redux-based JavaScript application because it removes a lot of the ceremony around Object.assign.

Sometimes you don’t yet have enough information to create an object. When that happens Hash is a great proxy for an object until you understand your domain a little better. I wanted the same behavior in Ruby for building up Hashes in these cases. For a while, I relied on Hash#merge, but then I saw this bug on Hashie.

Double-splat operator

To solve this problem, you can use the double-splat operator in a different way. Check out the following code:

def todo_app(state = initial_state, action)
  case action.type
  when SET_VISIBILITY_FILTER then { **state, visibility_filter: action.filter }
  else state
  end
end

This snippet works exactly the same way as the JavaScript version! I think that’s a really elegant answer to my original question.

Interestingly, if you compile down the instruction sequence for this code, you will see that it uses the C version of Hash#merge under the covers. I like that I’m getting the semantics of state.merge(visibility_filter: action.filter), but can express it in a way that my JavaScript-writing friends can easily understand.

If there’s one way to do something in Ruby, there’s probably at least one more. I think this is one of the reasons many people like Ruby: they can express their thoughts in the manner that is easiest for them.

That’s all I have for you today. Did you know about the double-splat operator in this case?

The post Using the double-splat operator in Ruby appeared first on Michael Herold.

Talking to yourself for self-teaching

Michael Herold — Thu, 16 Aug 2018 14:00:15 +0000

Do you ever talk to yourself? How about publicly? We, as a society, often make fun of our friends for talking to themselves. But self-talk can be a powerful technique for self-teaching something. As an exercise, I tried using a tweet storm to share how I was approaching relearning a numerical methods technique. This post is a recounting of why I did it and what I learned. I’ll also share whether I think I will do it again.

Background

For a little bit of background, I was a computer science and mathematics double-major during my undergrad education. I was very strong in computer science but not nearly as good at the mathematics. I’m embarrassed to say that I was sometimes the student that fell asleep in class (sorry about that, Prof. Baldwin!).

I really started to enjoy my maths classes as I grew older. By the time I was in graduate school, I found myself wishing I had spent more time on mathematics during undergrad. I began to see how all of the disparate concepts worked together.

One of the classes that I took in my junior or senior year of college was a numerical methods class. If you’ve ever learned about splines (or used them in Illustrator!) or interpolating functions, that’s the kind of thing you do with numerical methods.

I had been working on a problem in my head for a while on how to calculate the intersections of two lines for which you don’t know the function. Intersections are pretty simple when you have a function; you look for where the functions are equal. But for discrete functions you generate through surveys, I was struggling to come up with a general solution.

So I turned to my trusty numerical methods textbook.

The storm

One thing I remembered struggling with in undergrad is comprehension when reading my textbooks. I also remembered that it went better when talking about it with a classmate. My wife was out-of-town at a seminar, so I was home alone; what was I to do?

I turned to Twitter.

// Detect dark theme var iframe = document.getElementById('tweet-1029504464854638593-455'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1029504464854638593&theme=dark" }

I started a “tweet storm,” or chain of tweets that form a longer thought. Each tweet was either an excerpt of my reading or single thought about the words. This made me slow down and analyze what I was thinking. It was really effective at this. Since I had to explain the concepts to myself in order to write them down, I managed to look at each though from multiple angles.

There was also, I admit, some entertainment value in blathering to myself on the internet.

Was it effective?

I’m not sure how effective it was. I definitely understood the concept better than I did the first time I learned it. I also received some feedback from two of my undergrad professors that I was looking into the wrong concept (hi, Dave and John!).

I think the exercise was a good one. I enjoy reading train-of-thought style pieces from others. I wonder if anyone else found it useful? I received some good feedback from two friends that it was interesting. But is “interesting” a success?

The next time I’m thinking about something like this, I might try it again … but only if I’m home alone!

Have you ever talked to yourself on the internet? How did it go?

The post Talking to yourself for self-teaching appeared first on Michael Herold.

Senior developers: Can you recommend your path?

Michael Herold — Wed, 15 Aug 2018 14:13:18 +0000

One of the duties I have at work is to mentor some of the Rails developers on our team. I enjoy this immensely, yet struggle with at the same time. In a previous life, I wanted to be a professor and help people learn computer science and programming. I became jaded with academia, so left it and have been working in the software industry ever since. However, I still have that urge to teach, which is why I enjoy mentoring so much. My struggles with mentoring come from my long background in software development. I have been programming in some form since I was nine years old and have been paid for programming since I was eighteen. As such, I have somewhere between 13-22 years of experience across myriad different computer-related backgrounds. I spent the majority of my waking hours from the age of fourteen to the present building my skillset. Can I really ask more junior developers to do the same? How on Earth do I reconcile that when suggesting ways to improve to my colleagues?

Others ask this too

I've been thinking about this for two years, ever since I started at Flywheel and joined a team with a range of skill level. Prior to that, I worked at small companies where I was the only engineer or where all of the engineers were senior. I long thought this was something that only I struggled with (hah, hubris!) and didn't really know where to look for advice. Then, in the span of a single week¹, two Twitter threads popped up discussing this exact issue!

Charity Majors asked herself why she deliberately tells people to focus on things other than work instead of her own path of spending many hours working on computers. Charity struggles with this throughout the thread and wrestles with the impulse to tell people that they need to put the time in to get better. While some part of her feels that way, another part wants to nurture a life outside of work for her colleagues. I empathize with Charity because I have the same internal struggle.

Similarly, Alice Goldfuss shared how she worked herself ragged in overtime just so she felt that she was doing well enough to avoid being fired. This is, obviously, not a good place in which to find yourself. Feeling like you are running on an advancement treadmill just to maintain your current position is an indicator that something failed somewhere in the chain. This, specifically, is what I would like to avoid in my mentoring.

Work-life balance

I fundamentally believe that a work-life balance is important to have. You're more effective in your work when you unplug for a while and do something else. But, to this day, I don't practice this. Through numerous side projects, open source contributions, and endless reading about my craft, I am, in Charity's words, not a "moderate creature." Software design and construction is and has always been what I enjoy doing. I love to figure out how to build something that communicates its purpose and solves a real problem for people. That must be my manifestation of the "maker gene" that you hear people talk about.

But I can't -- and won't -- for my immoderation on those who I mentor. It's unreasonable to pressure others to follow this path. My near-obsession with my craft has not been without cost through my life. To this day, I find myself getting grumpy when I don't spend enough time designing and building. This affects both my wife and my coworkers, albeit in different ways. I can't really recommend this path to anyone, but I also struggle to see another solution.

Questions

How can I reconcile my two halves? I know that I wouldn't be where I am in my profession without my immoderation. I also know that I want to help my colleagues grow in a balanced way. These two sides are the balancing act that I, myself, have to play. Each time I find myself starting to recommend a path that I would enjoy due to my craft being a large part of my identity, I check what I'm going to say. Usually, I find a better way to approach it, but it's difficult work.

Do you struggle with this problem? Have you come up with ways to manage the temptation to disrupt your colleagues' work-life balance in the interest of advancement? If so, please leave a comment and share your story!

The post Senior developers: Can you recommend your path? appeared first on Michael Herold.

This was two months ago and I'm just now writing this. Crack reporter, I am not. ↩︎

Does Phoenix make database CRUD too easy?

Michael Herold — Tue, 14 Aug 2018 14:48:14 +0000

In 2014, the Phoenix framework emerged onto the web development scene as a fast, productive, and concurrent solution for the modern web. Its focus was on massive concurrency, thanks to the power of the Elixir language and Erlang's BEAM virtual machine. The original branding stressed the productive aspect, positioning the framework against the venerable king of productivity, Ruby on Rails. Those who are familiar with Rails will see a lot of inspiration from Rails. The way Phoenix auto-reloads code in development mode makes it just as easy to use as Rails. The router grammar requires a good squint to see the difference between the two. This inspiration certainly makes for a quick learning experience for Rails developers. But I wonder: at what cost? Does Phoenix make it too easy to structure your application like a Rails application? Is this convenience to the detriment of using the full power and expressivity of Elixir?

Phoenix in the early days

Originally, the core team clearly optimized Phoenix for productivity and similarity to Rails. There were modules that were called "models" that you were encouraged to treat similarly to Rails models. Concerns were mixed in the model modules (say that three times fast) between querying, persistence, and business logic. The first application that I spiked out in these days looked a lot like a Rails application, despite reading through Programming Phoenix. I understood that I should start to split business logic out into separate applications and only use Phoenix as the web interface to the application. However, the umbrella application concept put me into an "architecture astronaut" mode and I could either ignore it and "be productive" or endlessly spin my wheels.

I admit, many of my problems in Phoenix prior to the 1.3 release likely stemmed from my simultaneously learning Elixir and Phoenix; I didn't know enough of either to be very effective with the toolset. Compounded by the fact that I was only using it on side projects, I wanted to continue to build and grow my skills rather than take the time to design my application as a piece of software first and a web interface second. I think this is often the same problem that people have early on in their Rails days: they want to build and "ship stuff," not deliberately build maintainable software.

Contexts and Domain-Driven Design

With the release of v1.3.0, Phoenix radically shifted the way the default generators worked. In his Lonestar ElixirConf 2017 keynote, Chris McCord described the new default architecture for Phoenix applications, which revolved around contexts. Based in Domain-Driven Design, contexts (or, as people are loath to say, bounded contexts) give a place for your business logic to live and define the interface between different components of your system. Does your application have a system of accounts with many bits of logic around them? Okay, those likely belong in an Accounts context. Are you interfacing with social media as a facet of your business? Great, you probably should have a SocialMedia context.

Contexts are a great first step toward wrangling the architecture of a Phoenix application. Instead of a Phoenix-is-your-architecture structure, you can move toward a semblance of loosely connected pieces that work together. These form natural boundaries between the components of your application. The boundaries can later be used as seams by which you can slice-and-dice your application into several smaller pieces, should that be something that you need to do. The Phoenix maintainers made the decision to change the default generators to use this design pattern for structuring your application and it was a very positive move. However, the part that I worry about is that they chose a specific piece of the default Phoenix stack as the interface between different contexts: Ecto, the database Domain-Specific Language (DSL) and interface language.

An Ecto-based architecture

Because of the decision to use Ecto as the boundary between generated contexts, that is the natural direction that people will take when learning Phoenix. Ecto is a wonderful library and very fun to work with. It helps you to be more thoughtful about your database design. You have to design queries since you don't get a lot for "free" like in Rails' ActiveRecord. Ecto also removes many of the ways that you can accidentally hamstring yourself (I'm looking at you, N+1 queries!). Its thoughtful architecture makes you be explicit about what you want from a query. However, because Ecto is a database library, that means that the coordination of work between your contexts is fundamentally coupled to interacting with a database.

There is nothing inherently wrong with this decision. If you are making a simple CRUD application, this pattern will serve you well and will help you move quickly. However, how many "simple CRUD applications" continue to stay simple? How many of them continue to be CRUD applications? Every web app that I've ever worked on has increasingly gravitated away from the happy place where you are building a "glorified spreadsheet". As time goes on, more and more of your business logic has nothing to do with CRUD and has everything to do with munging that data. The business logic is happier without knowing it works with a database.

Alternatives?

This mild existential crisis that I had with the architecture of my Elixir/Phoenix application was spurred by reading an excellent commentary on building a Multi-User Dungeon (MUD) in Erlang and the thought and care that the author put into designing a process-based architecture for the application. It made me wonder: is Ecto really the best choice for the interface "language" between contexts? Is there something else we should use that gives us the nice affordances of Ecto.Changesets and their validation, but doesn't intrinsically tie us to the database?

I have considered using Formex as the mediation point between contexts. It interfaces well with Phoenix.HTML and is pretty lightweight in what you need to know to use it for interacting with the application. I have also considered rolling my own way of doing things, but that usually isn't the wise choice. I'm wondering if anyone else out there has thought about this? Do you have any way of breaking the tie between your traditional database and your application? I'd love to hear from you in the comments!

The post Does Phoenix make database CRUD too easy? appeared first on Michael Herold.

Finding Rails migrations

Michael Herold — Mon, 13 Aug 2018 17:19:07 +0000

Sometimes, I find myself working across several branches helping different teammates with their stories. Often, these branches use Rails migrations to easily manage the database changes that need to be made to support the work. This means that I end up running migrations from many different branches. Because I am human, I often forget to roll those migrations back before switching branches. When a destructive migration has to happen as part of a branch, it leaves me in a situation where I have several migrations that I need to roll back at any given time. In addition, they might be interleaved with migrations that exist on the master branch if it's a longer-running branch.

Missing Rails migrations

When I have database migrations that I want to track across branches, I use rails db:migrate:status to see what the status is for every migration that exists on my current branch. However, when I have run migrations that haven't been merged into the master branch, that leaves me with output that looks like this:

   up     20180301163041  Add chocolate chips to the cookies
   up     20180302132931  ********** NO FILE **********
   up     20180302161231  Remove the egg from the recipe
   up     20180306171402  Change flour to almond flour

I find myself wondering, "where did migration 201803021132931 come from? Is it something I need to roll back for my current task?" When this happens, I need a way to figure out what the missing migrations do in order to track what work I need to do when I switch contexts. To solve this problem, I created a small Git extension, called git-find-migration.

New workflow

My workflow now for tracking these migrations across branches is as follows:

I change to the upstream/master branch on Git. This gives me the context for the current state of what is running in production (n.b. I don't actually check out upstream/master, but I sync my local copy of master with it).
Then, I run g fm -l to list any migrations that have been run, but I am missing on the branch (n.b. I use a function called g and aliased git-find-migration to fm to make this easier to type).
For each migration that I am missing, I copy the timestamp, then run g fm <timestamp> to see the name of the file in my Git repository.
Once I know the name of the file, I run git log --all -- db/migration/<migration_file> to see the context for that file.

This workflow allows me to easily make decisions to handle the migration. Sometimes, the migration is an old one that has since been pruned from the repository (not a suggested tactic, might I add!) and it's fine. Sometimes, it's something that I should roll back to continue my work. In that case, I check out the branch with the migration and run a rails db:migrate:down VERSION=<timestamp> to roll it back¹.

Shortcomings

I could likely still make some improvements to this workflow. For example, I currently limit my script to searching for only a single timestamp at once. This was because I didn't want to figure out how to write the Git query that could find more than one. Perhaps that would speed along the process when I have several migrations that I need to roll back. This happens a lot when we're working on a multistage, backwards-compatible, destructive change.

Even with these shortcomings, the new workflow serves me well. Feel free to download the script if this sounds interesting! Do you have any techniques for managing migrations across multiple branches?

The post Finding Rails migrations appeared first on Michael Herold.

You always make sure your migrations can be rolled back, don't you? ↩︎

Creating a subset font

Michael Herold — Mon, 04 May 2015 12:27:52 +0000

Using custom font faces on a web page introduces several potential issues. Most commonly, these issues manifest in one of two types of problem: the dreaded “flash of unstyled text” (FOUT) or “flash of invisible text” (FOIT); or poor initial render time due to font faces specified in blocking calls to outside services. By placing only a subset font in the critical render path, you can reduce the amount of FOUT/FOIT and speed up the initial render performance.

However, the creation of a subset font is not described anywhere that I found. This post discusses how I went about creating a subset font, the tools I used, and some thoughts on what exactly you should subset in your font.

Zach Leatherman (@zachleat) has talked a lot about font loading strategies lately. While I understood the theory of the posts, I ran into a very simple problem when trying to figure out how to implement it: I had no idea how to create a subset font. I wanted to try his idea of a “flash of faux text,” but I had no idea how to create a subset font.

I spent a while looking into it and figured out a way to make one. This post goes through the method that I used and some background about what exactly you do when subsetting a font.

What is a font?

A font is essentially a list of glyphs specified by addresses. If you are familiar with the ASCII table, you might remember that the letter A corresponds to the number 45. That is, A is at the address 45. The font creator then encodes this list in one of the font formats:

Embedded OpenType (EOT)
OpenType Font (OTF)
TrueType Font (TTF)
Web Open Font Face (WOFF)
Web Open Font Face 2 (WOFF2)

At its heart, each of these formats is just a table of addresses and glyphs. There are some niceties like anti-alias hinting and ligatures that are available in different formats, but the table is what I am interested in.

What is a subset font?

Fonts with a small alphabet like Noto Sans in Balinese might only have ~47 glyphs, but if you need a font with the full Chinese-Japanese-Korean (CJK) glyph set you might be looking at hundreds or thousands of glyphs.

A subset font tries to avoid this by only including the glyphs that are essential to show the most important content on a page. If you’re writing an English language website, you might only include the English alphabet and Arabic numerals: a total of 62 characters.

The resulting file size of the subset font will be substantially smaller than the full-blown font. Currently on this site, I use a subset of the Noto Sans font for my website’s initial render. The subset font in the WOFF file format is 7.4KB on disk while the full font is 190KB. That’s a savings of 96.1% for the subset font.

How can I create one?

There are many tools out there (both open- and closed-source) for working with fonts. The one that I used to create my subset font is a Python library called fonttools. It has a few command-line utilities for manipulating font files. pyftsubset is the tool for subsetting and optimizing fonts.

There are myriad options available in this tool. In the interest of brevity, I only cover the options that I use in creating the subset font.

I want to take a moment to mention that you should only do this with a font that you have permission to modify. In the case of this article, I modify the Noto Sans font from Google under the SIL Open Font License. This license allows modification and redistribution, much like the MIT License for open source code.

Next, I list the command that I used, then discuss the options.

$ pyftsubset NotoSans-Regular.ttf \
    --unicodes="U+0020,U+0041-005A,U+0061-007A" \
    --layout-features="" \
    --flavor="woff" \
    --output-file="NotoSansSubset.woff"

First, the NotoSans-Regular.ttf file is the font file that I started from.

Next, I specify the glyphs to include in the subset font using the --unicodes option. I include only the Latin alphabet (i.e. the standard alphabet used when writing in English) and the space character. These correspond to the following Unicode addresses:

U+0020 is the standard space
U+0041-005A are the capital letters
U+0061-007A are the lowercase letters

After that, I list the layout features I include in the font using the --layout-features option. These are things like ligatures that make the font more readable at the cost of file size. I commit a cardinal sin here and opt for none of them due to how I plan to use the font. Because I intend the page to only show this subset font as a “flash of faux text” I feel that leaving out the niceties is okay.

Because of its relative space efficiency and wide availability of 88.13% on Can I Use, I pick WOFF as the file format for the font using the --flavor option. The subset tool can only output WOFF or WOFF2, but you can take the resulting file into another tool to get a TrueType or OpenType font if you want.

Lastly, I save the resulting file as NotoSansSubset.woff using the --output-file option.

What tradeoffs are there?

Subset fonts give you a smaller file to download to display most of the important text on a page before the full fonts download. This means that you have to play a balancing game between font size and features.

In an ideal world, you would serve web fonts that only contain the glyphs that you use on the first page, then rely on the full web font download afterward. However, if you want to serve up a static web page, this becomes tedious because you have to create a subset font for each page on your website. This means that it might be better to include more glyphs than you need on a page to cover a broader set of pages; basically, increasing the glyph count at the cost of a larger file size.

The flip side of this is that you’re essentially forcing your visitors to download a glyph set twice: once in the subset font and once in the full web font. This is the crux of the balancing act. You don’t want to serve up more glyphs than is necessary because you want to cut the amount of repetitive data over the wire.

I think a practical solution is to create one subset font that roughly follows the Pareto principle: cover 80% of the content on a first render. Distilling this down to a glyph count, I think that when writing English a good subset font will include only the alphabet (or perhaps the alphabet and numerals).

Including only the alphabet allows the site visitor to start reading at the earliest moment. He or she might notice some missing punctuation or numbers, but your page is still understandable without it. You might disagree, so pick your own subset using a different set of rules!

Wrap up

Now you know what a subset font is and how to create one. Subset fonts are simple in concept but it’s not immediately clear how to create one. By using tools like fonttools, you can make it easy to subset your own fonts.

Subset fonts are one small optimization to make in your web performance strategy. By sending a smaller number of glyphs along the critical render path of your website, you can improve the time to first render and avoid the problems of a “flash of invisible text” or “flash of unstyled text” by using the subset font to show a “flash of faux text”.

However, subset fonts are only one piece of the puzzle for this technique. Doing this requires some client-side logic to do the font replacement. The next post in this series will discuss a strategy for doing this that I learned from the writings of Zach Leatherman.

The post Creating a subset font appeared first on Michael Herold.