Welcome to the blog!

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.

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

Download at Font Space or buy on Creative Fabrica.

March - Together of Love by goodigital

Download at 1001 Fonts or buy on Creative Fabrica.

June - Hot Dog by Toko Laris Djaja

Download at dafont or buy on Creative Fabrica.

July - Ducky Manly by Allmo Studio

Download at dafont or buy on Creative Fabrica.

August - Cherish Today by Sarid Ezra

Download at dafont or buy on Creative Fabrica.

September - Black Ground by Letterhend Studio

Download at FontSpace or buy on Creative Fabrica.

October - Organic Peach by Prioritype

Download at FontSpace or buy on Creative Fabrica.

November - Javatages by Good Java Studio

Download at dafont or buy on Creative Fabrica.

December - Fontanio by ArdyanaTypes

Download at FontSpace or buy at Creative Market.

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.

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.