Welcome to the blog!

Not sure where to start? Here are some of my most active tags:

Vue Inner Image Zoom v2

As promised, now that migrating is easier I’ve updated my Vue Inner Image Zoom component to support Vue 3. If you’re still on Vue 2 and want to use the component, just make sure to install it as vue-inner-image-zoom@1.1.1.

I also updated the demos site to remove the lazy loading example since vue-lazyload isn’t compatible with Vue 3 (I’m open to any suggestions for replacements) and switched from vue-slick-carousel to Swiper both for compatibility and because it’s my preferred carousel library.

If I broke anything and you run into any new bugs, please report them on the GitHub issues page.

Vue 3.1 - Official Migration Build from Vue 2 to 3 - This Dot Labs

Introduction A few weeks ago, the Vue core team released the first minor version of Vue 3 (release notes here). This latest release of Vue brought a number of…...

When Vue 3 was initially released, I tried to muddle through upgrading from Vue 2 but couldn’t really tell if I was doing it right and eventually put it aside. But the new migration build released with v3.1 changed all that and this overview from This Dot Labs is great.

The only things I would add to their comprehensive guide are: 1) if you’re using ESLint you may need to update your eslint-plugin-vue version and config and 2) if you’re using Jest for tests this Stack Overflow answer might be helpful.

Keep an eye out for Vue 3 support for the Vue Inner Image Zoom component!

The Facebook Files, a Podcast Series

The Facebook Files, an investigative podcast series, dives into an extensive array of internal Facebook documents that provide an unparalleled look inside the social media giant....

The Wall Street Journal is pretty bad most of the time and their op-ed page is embarrassing for everyone involved but the Facebook Files podcast is fantastic. Whatever you may have suspected Facebook of getting up to, the reality is almost always so much worse.

The Mysterious Case of Emotion and “exports is not defined”

Thought I’d share a bug I ran into a while back that sent me on a Poirot style investigation full of red herrings and unexpected culprits.

This is tangentially related to my recent page speed woes at work. We’d started using Emotion for CSS-in-JS in our component library and, combined with lazy and conditional component loading, it helped with some of the “Reduce unused CSS” warnings we were seeing in Lighthouse.

So adding Emotion as a styling option in our main codebase seemed like an obvious choice. We’d already installed @emotion/core (v10) when we started importing from our component library which meant it should be a quick, two-step process: 1) running yarn add @emotion/babel-preset-css-prop and 2) adding it to our babel.config.js presets after @babel/preset-react. I followed those steps, ran Webpack, and promptly got the error “ReferenceError: exports is not defined”.

Weird.

Continue Reading

fontdata: typeface name check

Designing a new typeface and wondering if the name is already taken?...

In the past I’ve relied on my fonts either being so old that all the names were still available or having slightly odd names that no one else wanted but as the number of fonts increases it’s nice to have way to double check if a name is taken already. 

Moving a Node App from Google Compute Engine to DigitalOcean

This site can

There’s nothing like trying to deploy a minor site update and having your VM hang while SSHing 75% of the time, give up mid-build the other 25%, and then fall apart completely when you try to restart it. Since all I remember about setting up a Google Compute Engine Node instance in the first place is that it took me a while and wasn’t particularly intuitive, this seemed like a good opportunity to try a new host. I’m running a commercial Next.js site with a custom server so after browsing around DigitalOcean seemed like the best option.

And it was actually pretty painless!

Of course, it would be even quicker with a step-by-step guide so here’s a reference for my future self or anyone else who wants it.

My guide for migrating a Node app to DigitalOcean (this may vary a little depending on your site):

  1. Sign up for DigitalOcean and create a Droplet using NodeJS 1-Click App. Poking around the DigitalOcean Community questions, I ran into some talk about additional installations for production but my Droplet came with Nginx, PM2, and optional Let’s Encrypt for SSL out of the box so those discussions may be a little out of date.
  2. Add the new IPv4 address to MongoDB Atlas. DigitalOcean provides instructions for getting started with your Droplet but I wound up skipping around a bit. Since I already had a MongoDB database set up, I completely ignored their section on creating a new one. To use an existing database, just remember to log in to MongoDB Atlas and add your new IP address (using port 22) to the IP Address List under Network Access.
  3. Clone your repo. Using ssh root@0.0.0.0 (replacing the zeros with your IP address), ssh into your Droplet and clone your repo.
  4. Copy environmental variable files, assets, etc. From outside your Droplet, use scp -r /path/on/computer root@0.0.0.0:/path/on/droplet (replacing the paths and zeros) to copy any necessary files that weren’t included in the repo.
  5. Start your app. Back in the Droplet, start with a good old yarn install. Then, for a Next.js site, run yarn build followed by sudo NODE_ENV=production -u nodejs pm2 start server.js to start a custom server. This is also a good time to jump back to the DigitalOcean instructions for shutting down the starter app with sudo -u nodejs pm2 delete hello and saving your PM2 process list with sudo -u nodejs pm2 save.
  6. Create an Nginx configuration. I added “read up on everything Nginx can do” to my todo list but for now I have a pretty simple config with basic asset caching in my /etc/nginx/sites-enabled/ directory. You can view the file in this Gist but keep in mind it’s pretty tailored to my SSL setup. Whether you alter my example, the DigitalOcean default, or start fresh, make sure to 1) switch the root setting to something like /root/your-site/.next/pages; for Next.js and 2) update the proxy_pass to use your app’s port (8443 in my example). Restart with sudo systemctl restart nginx.
  7. Point your domain to the new IPv4 address. How you do this will depend on your DNS host but you’ll want to complete the migration by updating your A name to point to your new IP address.

There it is in seven steps. The first run through took a bit of trial and error but hopefully this will speed things up next time.

Getting a font recommendation in before the first Friday of the month is over. Organic Peach by Prioritype is a handwritten font with a fun kind of blobby feel to it and it’s free for personal use.

Download at FontSpace or buy on Creative Fabrica.

Mastering the :nth-child | CSS3 pseudo classes and :nth-child ranges

This site was down for a couple weeks and it really brought home just how often I visit. I was reduced to looking up archived versions on the Wayback Machine, a circumstance which I’d chalk up to its being a very thorough guide to :nth-child and my brain refusing to memorize how to write negative ranges no matter how often I use them. 

I’m surprised I’ve never linked to it before but it’s back now and I promise never to take it for granted again.