Page 2

Optimizing Lodash imports with jscodeshift

Since the beginning of the year, I’ve spent a lot of time at work getting ready for Google Core Web Vitals-ageddon. Most of the techniques we’ve tried are fairly well-documented and I don’t want to retread the great advice and tutorials that are already out there (although I should put together a roundup of links). A few have required a little more investigation and experimentation, though, and those seemed worth writing up.

Remove unused JavaScript! Avoid enormous network payloads!

One easy trick for creating huge JavaScript bundles and making Google angry is importing the entire Lodash library when you only use a few methods. A lot has been written on Lodash and bundle sizes and best practices for imports (I’m partial to The Correct Way to Import Lodash Libraries - A Benchmark on BlazeMeter) but what I found lacking were tips on how to update an older, monolithic Rails app with inconsistent import patterns and the continual risk of unmanageable merge conflicts.

Enter jscodeshift.

jscodeshift is a toolkit that allows you to run codemods over JavaScript files and it was a lifesaver in this situation. According to the article above, direct imports are the way to go and jscodeshift makes it possible to instantly transform any files:

  • Importing the full library (import _ from 'lodash')
  • Importing methods from Lodash with curly brackets (import { name } from 'lodash')
  • Calling methods starting with _.

To get started with jscodeshift, run npm install -g jscodeshift to install it globally and follow along below.

Continue Reading

React Inner Image Zoom v2.0.0

Well. Apparently way back in July when I published react-inner-image-zoom v1.1.1, I announced it with a long intro about trying to get motivated during the lockdown and my hope that it would kick off a glorious new age of productivity.

That didn’t actually happen, but I’m sure it will now that we’re a year into lockdown and I actually finished v2.0.0 after putting it off for months.

So what do you need to know about the new version? It:

  • Refactors the code using React hooks so you’ll need React v16.8.0 or above to upgrade.
  • Renames the startsActive prop to zoomPreload.
  • Adds hideCloseButton and hideHint props to hide those elements. If the close button is hidden, zoom out will be triggered by tap on mobile.
  • Adds width, height, and hasSpacer props to make Lighthouse happy. The width and height will be added as attributes on the original image. If hasSpacer is true, those values will be used to get the original image’s aspect ratio and add a loading spacer to prevent cumulative layout shift.

If you find any bugs, be sure to submit an issue on Github.

Back to my very sporadic “monthly” font highlights. 

I’m really loving Together of Love by goodigital. It’s a really playful, hand drawn font with fun inner shapes and shading. Free for personal use only.

Download at 1001 Fonts.

The first three days of this year were still winter break and I certainly didn’t want to interrupt my lounging so here’s a first Monday of the month font rec.

That background image may be getting to me but Jagiq by twinletter is a hand drawn, kind of noodle-y feeling font. The family includes two versions but I definitely prefer the “Awesome” option (I mean, it’s right there in the name). You can try it free for personal use only.

Download at Font Space.

In all the excitement* of the election season, I haven’t spent nearly enough time downloading and sharing fonts. Hello Farmer by Nurf Designs is a handwritten, casual number and it’s free for personal use.

Download at Font Space

* overwhelming, all-consuming stress

New Variation on an Old Font

image

If you find yourself needing a slightly different version of a font, don’t hesitate to ask! A user email years ago is how Horseshoes entered the Horseshoes & Lemonade family and a recent request lead to Roundabout Fill Full (the name is a little clunky but Fill was already taken).

While I was creating the new option, I also made some kerning improvements across the family so download (or re-download) the whole package here.