Page 12

My font recommendation this week is one of my own!

From time to time I’ll go through and clean up/expand on some of my older fonts. This time I took an all caps font with mixed textured/non-textured styling and a) gave it a lowercase alphabet b) split it up into separate regular and plain styles, and c) added additional characters to support more languages.

As always, please let me know if you run into any installation errors.

Get more details here.

Generally when I post about programming it’s because I’ve finally found a solution to something that has been driving me crazy, some problem with a lot of documentation to read through and not a lot of Stack Overflow answers (and if they do exists, the use case is always a little off). This is no exception!

First, why would you want to combine React and Ruby gems? In my case, I thought it was the simple, lazy path. Way back when, the site I work for was built using will_paginate for all pagination. I recently ran into a case where I needed to include that pagination in a React app. It wasn’t for anything fancy, the links and logic needed to match the rest of site. So, trying to re-create the gem magic in React seemed like overkill compared to creating a partial with the code, generating an HTML string using the Rails render_to_string method, and sending it to React to dangerouslySetInnerHTML.

Well, it turns out will_paginate uses the url_for method and it was not happy to be called without the request data (undefined method `host’ for nil:NilClass?!) it uses to build urls. After a lot of hunting around, I came across this pull request to get will_paginate working with mountable engines that seemed adaptable. My helper accepts the request from the controller and pulls out the necessary fields to send with it’s own instance of url_for. 

module WillPaginateHelper
  class StringLinkRenderer < WillPaginate::ActionView::LinkRenderer
    protected

    def url(page)
      @base_url_params ||= begin
        url_params = merge_get_params(default_url_params)
        url_params[:only_path] = true
        merge_optional_params(url_params)
      end

      url_params = @base_url_params.dup
      add_current_page_param(url_params, page)

      if @options[:url_builder]
        @options[:url_builder].call(url_params)
      else
        @template.url_for(url_params)
      end
    end
  end

  def will_paginate_string(collection = nil, options = {}, request = nil)
    params = {
      :host => request[:host],
      :controller => request[:controller],
      :action => request[:action]
    }

    unless request.query_parameters.empty?
      request.query_parameters.each do |k, v|
        params[k] = v
      end
    end

    options.merge!(
      :renderer => WillPaginateHelper::StringLinkRenderer,
      :url_builder => ->(params) { Rails.application.routes.url_for(params) },
      :params => params
    )

    will_paginate(collection, options)
  end
end

(GitHub Gist)

Then, in the partial that is being rendered to a string, it’s possible to call will_paginate_string(collection, options, request) and the results can be sent as a JSON response to render in React.

Admittedly, Rails isn’t my strong suit so I’d be interested to hear if I missed some easier way to do this.

I just signed up to write for a new campaign on Postcards to Voters (yay! Florida vote by mail enrollment!) so I’ve been going through some of the cards I sent out during the 2018 elections.

In addition to providing something concrete to do when the news gets too depressing, it’s also a pretty good way to volunteer for people who are into fonts or hand lettering. If you’re like me and have trouble staying motivated when it comes to brainstorming ideas, this is a great way to try things out with some actual content to work with. Plus, it feels great when the candidates your write for win.

It’s super easy to get started, just go the site, sign up, and send in a photo of one postcard to get approved.

One of my recent projects at work was a rewrite/redesign for blog pages that averaged page speed indexes (indices?) in the 90000s. The upside is that I managed to accumulate a lot of helpful articles and resources on the topic of web performance. These links cover general tips and asset handling. I have other lengthy lists of bookmarks dealing specifically with optimizing CSS and JavaScript that I’ll try to sort through later.

General

Front-End Performance Checklist 2018
It’s likely this will be replaced by a 2019 checklist in the next few days but for the time being, it’s an extremely comprehensive guide to planning, improving, and maintaining your page performance. 

Progressive Tooling
A handy, well-organized collection of third-party tools.

Using Preload and Prefetch in Your HTML to Load Assets

Fonts

In my case, we were too worried about the possibility of a flash of unstyled text to really optimize our fonts (*sigh*). If you have more leeway, these are good reads. Also, if you’re loading web fonts from a third-party (Cloud.typography, Typekit, etc.), always double check that you aren’t loading font weights that you never use! 

A Comprehensive Guide To Font Loading Strategies

Web Font Optimization at NerdWallet

Images

lazysizes
I’ve been using this lightweight lazyloading plugin. It automatically handles dynamic content which has been really useful.   

Responsive Images: If you’re just changing resolutions, use srcset.
Good introduction to using srcset for image sizing.

SVGOMG
Optimize everything! Even SVGs.