Welcome to the blog!

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

Next.js and Tumblr as a CMS

Thought I would do a series of posts on moving my blog from a Tumblr-hosted and themed site to a Tumblr powered Next.js app.

You might reasonably ask, “Why would anyone want to do that when there are so many actual CMS options available?”.

In my case, it’s mostly sentimental. Way back when I was deciding whether to switch careers and try coding full time, I took a lot of freelance jobs converting PSDs to Tumblr themes and I’ve been using it ever since.

But, I finally wanted a little more control over my blog and a good excuse to experiment more with Next.js so I decided to mix it up just a little. Let’s dig into some of the decision making, adventures in data fetching, and general idiosyncrasies that come with using Tumblr as a CMS.


How To Set It Up

Starting at the beginning, the very first question was how to set everything up. Where should the site and the code live? How do you share the parts that need to be shared? It seems simple but there are a lot of options.

Keeping with the original Tumblr setup, I decided to create a new app for my blog instead of trying to integrate it with the rest of my site (which was already using Next.js). I wanted to use Vercel for hosting which meant I would just need to update my subdomain records once everything was up and running.

Since Tumblr templates are basically HTML files that include Tumblr’s custom blocks and variables, I’d never really shared much code between my blog and the rest of my site even though they look pretty similar. I had a small script to generate stylesheets but that was it. Using Next.js for both opened up the possibility of sharing React components, variables, and utilities in addition to CSS.

To figure out how to do that, I followed one article (6 Ways to Share React Components in 2020) to another (4 Git Submodules Alternatives You Should Know) and finally landed at Git subtree: the alternative to Git submodule for step-by-step instructions.

Any solution that required publishing components, individually or as a monorepo, seemed like overkill for a smallish, one dev project. Git subtrees provided a way to nest one repo as a subdirectory in others which was exactly what I wanted. I split out shared components like the header, footer, form elements, etc. into a separate repo, ran the commands from the tutorial above in my blog and site repos to hook it all up, and voila. No copying and pasting duplicate code between sections and no publishing to NPM or other third-parties.

So that’s the foundation, stay tuned for the next installment for data fetching and some actual code!

This font is so much fun it makes me want to drop all my in progress projects and spend more time playing around with color fonts. Anaglyph Isometric by Graphic Spirit is an OpenType-SVG font that’ll take you back to the classic, paper 3D glasses. And it’s free for personal use.

Download at Font Space or buy at Creative Market.

Switching things up a little and recommending a commercial use only font. Bushwhack by Vlad Derkach is a quirky, hand drawn serif. It’s all caps but the uppercase and lowercase are unique for more variety.

Buy at Creative Fabrica.

Font Release! Quintet

image

Well look at that, it’s a font I made for a change.

Quintet is a narrow, loopy font that tries to capture an old-timey, swing jazzy feel. It also comes with the instrument SVG illustrations I created for the poster images.

It’s free for personal use so go download it to try now. And definitely let me know if you run into any installation issues.

React Inner Image Zoom Version 3.0.0

React Inner Image Zoom version 3.0.0 went out earlier this week with a handful of bug fixes, test and build improvements, and one major change.

What’s the big thing to look out for? By popular demand, the imgAttributes prop was added to pass down (almost) any valid React img attributes in a single object instead of as individual props. That means scrSet, sizes, alt, and title are gone but in exchange you get all the data attributes and event handlers you could want. I haven’t submitted updated type definitions to DefinitelyTyped yet but I’ll try to get that done in the next few days.

This release also included a handy new Changelog so I would be remiss not include the official record here:

Changed

  • Replaced srcSet, sizes, alt, and title props with imgAttributes to set the original image’s attributes.
  • Show close button when moveType is set to “drag” on all breakpoints.
  • Switched from setTimeout to onTransitionEnd to check that zoomed image has finished fading out.

Added

  • This handy CHANGELOG.

Fixed

  • Added stopPropagation on touchmove to prevent events below fullscreen modal.

If you run into any bugs, please let me know in the GitHub issues.

A little late but I am going to recommend a font every month this year. 

I like the intentional, handdrawn imperfections in Markisa by Jetsmax Studio. It’s messy but in a good way. The font is free for personal use only but that free version comes with an extra outline variation and all possible characters.

Download at dafont or buy at Creative Fabrica.

All the Fonts I’ve Liked This Year

It’s the end of the year so here’s a roundup of all the fonts I’ve recommended in 2021. I know I’m missing a couple months so here’s hoping for the full twelve in 2022.

January - Jagiq by twinletter

Jagiq by twinletter poster

Download at Font Space or buy on Creative Fabrica.

March - Together of Love by goodigital

Together of Love by goodigital poster

Download at 1001 Fonts or buy on Creative Fabrica.

June - Hot Dog by Toko Laris Djaja

Hot Dog by Toko Laris Djaja poster

Download at dafont or buy on Creative Fabrica.

July - Ducky Manly by Allmo Studio

Ducky Manly by Allmo Studio poster

Download at dafont or buy on Creative Fabrica.

August - Cherish Today by Sarid Ezra

Cherish Today by Sarid Ezra poster

Download at dafont or buy on Creative Fabrica.

September - Black Ground by Letterhend Studio

Black Ground by Letterhend Studio poster

Download at FontSpace or buy on Creative Fabrica.

October - Organic Peach by Prioritype

Organic Peach by Prioritype poster

Download at FontSpace or buy on Creative Fabrica.

November - Javatages by Good Java Studio

Javatages by Good Java Studio poster

Download at dafont or buy on Creative Fabrica.

December - Fontanio by ArdyanaTypes

Fontanio by ArdyanaTypes poster

Download at FontSpace or buy at Creative Market.

I was feeling under the weather on Friday so I missed my regularly scheduled font recommendation day. Here’s a late one.

Fontanio by ArdyanaTypes has a cool, sixties, psychedelic feel that I’m really into. It’s free for personal use only. 

Download at FontSpace or buy at Creative Market.