Page 3

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.

Liking this font feels really on brand for me. 

Cute Meow by HansCo is free for personal use, cat-themed display font.

Download at dafont.

Getting to know Vue (with a new image zoom component you can use)

Apologies for the title. It’s groan worthy and, I assume, has been done many times before but once it was in my head I couldn’t get it out. As penance, please accept the Vue Inner Image Zoom open source component.

I spend most of my time writing React so I thought it might be fun to give Vue.js a try. As a starter project, I decided to rewrite the React Inner Image Zoom component and accompanying demo pages using Vue. All of the functionality is the same, zoom with drag to explore on mobile and dragging or hover panning on desktop. Optional fullscreen on mobile and responsive image support. Since Vue isn’t my first language, if you use it and notice any egregious best practices missteps please let me know.

Installation details are available at NPM or Github. Demos are here

And if you’re wondering what I thought of Vue, here are a few observations:

  • It’s pretty easy to learn the basics. The new syntax took a little getting used to but it didn’t take too long to port over a component.
  • I really like Vue CLI and how easy it is to customize things like linting and testing.
  • One thing I missed was built in portal support (but it sounds like that might be included in the next version!).
  • For some reason my biggest sticking point was figuring out how to render code snippets as strings. It turned out to be fairly simple but it took me forever to even Google the right terms.