Page 11

A few months back I posted a list of page speed related links I’d collected while working on an extremely slow page and promised JavaScript and CSS related follow-ups. So here’s a start:

BundlePhobia
This is really handy for checking out how big your modules actually are.

babel-plugin-transform-react-remove-prop-types
If you’re using React, do you really need PropTypes in your production build?

Third Party Web
A nice rundown the usage and impact of popular third-party libraries.

How to Load Third-Party Scripts Dynamically in JavaScript
If you have to use one of the third-party libraries listed above, see if you can add it dynamically (can it be lazy loaded, is it used in a modal, etc.). This is a good tutorial that also gives an example for React.

Improving third-party web performance at The Telegraph
Another great article on third-party scripts. Especially enjoyed the parts about getting buy in from other teams and monitoring tag managers.

You Might Not Need Lodash
First, make sure you’re importing Lodash methods individually. Next, double check that you even need those methods now that ES6 is the norm.

You Might Not Need jQuery
Eventually getting rid of jQuery is the big dream at work.

You Might Not Need JavaScript
Honestly, can’t hurt.

I haven’t posted anything in a while because I’ve been so, so close to finishing a couple projects I’ve been working. And now the first one is actually done!

I just uploaded my latest font Thornback. It’s a slightly messy, hand-drawn sans-serif that you can try out or put to personal use for free.

Download it here.

P.S. The name was inspired by this tweet:

Omg I just found out that spinster used to be reserved for women 23-26 and that after you turned 26 if you were unmarried you became a…. THORNBACK. How fucking great is that name!?

— Sophia Benoit (@1followernodad) March 13, 2019

I just published my first NPM package!

It’s a fairly simple module to add a height based JavaScript fallback for -webkit-line-clamp on browsers that don’t support it (i.e., Firefox and IE). I came across a case at work where we needed cross-browser line clamping with different line counts depending on the breakpoint and with consistent rendering even with web fonts on mobile devices. We tried a few existing JS truncation libraries but sometimes you want the CSS to do the heavy lifting.

The module is called Clamps (because my names are often Futurama inspired) and you can check it out on NPM or Github.

Hit me up with all your issues; they’re still new and exciting to me!