Posts tagged open source

Some links below are affiliate links, meaning I’ll earn a small commission (at no cost to you) if you decide to click through and make a purchase.

Coding

I just finished moving the source code for two components (react-inner-image-zoom and vue-inner-image-zoom by) into a monorepo. The goals were to simplify code sharing, centralize GitHub notifications, and eventually add support for new frameworks. A few observations from the process so far:

• webpack-dev-server is a very effective tool for creating development sandboxes for multiple frameworks when you don’t need a full web app.
• The release-it package has cured a lot of my publishing anxiety. I’m always worried about bumping packages accidentally or messing up tags and the dry run functionality really offers peace of mind. My monorepo needs are pretty specific so I’m using it on the command line instead of with a CI/CD but I’ll probably try to figure out a better integration later.
• If you, like me, use nvm to manage Node versions and want to use npm link to test a new package, make sure that both the package and test project are using the same Node version. Also, if you’re testing that a package installs correctly, it’s not a bad idea to delete node_modules and add a console.log just to be sure. And if that fails, this is a helpful Medium article on how to temporarily rollback and NPM package.
• This is awesome: BrowserStack offers free access to test open source projects and I’ve found it invaluable for QA on Microsoft Edge and Android devices. Plus, the application process is quick and easy.

Like most normal people, sometimes I’ll see an animation on TV or in a game and wonder if it could be re-created in CSS. Over at CodePen, I’m giving the some segments from the Severance season finale credits a try. I only have the desks animation so far but I think the elevator and some of the abstract line art could also be possible. I’ll probably do a full post if I finish those. In the meantime, check out this YouTube video for the source inspiration.

Design & Fonts

Got out at the L train Grand St stop for the first time since the pandemic and the mosaics there are fantastic. “Gratitudes off Grand” by artist Glendalys Medina is colorful and abstract and generally made me happy walking by.

Photo by Osheen Harruthoonyan from the MTA website

My font recommendation last month was Beauty Glitch by 177Studio. I love the distortion effect here to make the font look glitch-y. It can be downloaded for personal use at FontSpace or purchased on Creative Fabrica.

I also spent some time reading up on the fonts in Severance on the Severance Wiki Typography in Severance article and on Fonts in Use.

Books

Revisiting a few books I read last year since our reality now includes things like presidential memecoin rug pulls and cryptocurrency reserve quid pro quos propping up scams.

Easy Money: Cryptocurrency, Casino Capitalism, and the Golden Age of Fraud by Ben McKenzie and Jacob Silverman. Had to pick this up as a huge fan of both the OC and Gotham. It’s informative and well-researched but also super readable with an interesting side narrative around moving into journalism as an actor.

Number Go Up: Inside Crypto's Wild Rise and Staggering Fall by Zeke Faux. This book hits a little harder. It covers a lot of ground, you get an overview of various scams and shady characters, the rise and fall of Sam Bankman-Fried, and a lot of silly jargon. But what sets it apart is the deep dive into real world consequences in places like El Salvador, the Philippines, and (especially) Cambodia.

The Great Beanie Baby Bubble: Mass Delusion and the Dark Side of Cute by Zac Bissonnette. This book, along with Dan Olson’s classic video Line Goes Up – The Problem with NFTs, is all you really need to understand the NFT craze.

Podcasts

As a supportive spouse with no preexisting connection to any sports team, I’ve become a Mets fan out of household solidarity. And now I’m also a fan of Hits Different, New York’s only anti-math baseball podcast. What makes this the best sports podcast? The first episode of the season just came out and it opens with a discussion of the film Uptown Girls. The Mets are mentioned once in the first nine minutes and that’s while discussing the Olsen twins vehicle New York Minute.

This was reposted from my newsletter on Beehiiv. To get next month's by email, sign up below.

It's been a while but I finally published an update to the Vue Inner Image Zoom package. Version 3.0.0 adds an imgAttributes prop and removes srcSet, sizes, alt, and title since those are all image attributes. I also added type definitions and a CHANGELOG.

In addition, I released a Vanilla JS package called Inner Image Zoom with the same functionality but framework agnostic. A new demo site for Vue and Vanilla JS is up here. This is all part of a larger migration to get all versions into one monorepo so it's easier for me to keep track of and to share utilities. The next step is to move over React Inner Image Zoom and then maybe branch out to other frameworks like Angular or Svelte.

If you run into any issues, please let me know.

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.

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.

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.

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.

I don’t know about everybody else but my productivity technique during the coronavirus lockdown has been to start a ton of projects, get antsy in the middle, and then abandon them for something new. And also, despite a very low bar, to somehow post on here even less than before.

Now that we’re somewhere between five months and five years into this (time has no meaning anymore), it feels like maybe I should try following through on some of this stuff. As a small step in that direction, I just published an update to my react-inner-image-zoom package.

Version 1.1.1 includes a new drag option for moving zoomed images on non-touch devices (based on a user request!) plus minor styling and dependency updates. The demo and code example are here.

Hopefully checking one item off my list will get me moving on my other half-finished odds and ends.

In a previous post, I went over my process trying to develop a PostCSS plugin to make updating custom CSS for Google AMP easier. That plugin seems to be working okay (yay!) but since it’s not integrated into my Webpack build, there’s still a lot of manual work to be done and room for human error. 

So the next step was clearly to jump into learning Webpack plugins. I needed a plugin that could watch for CSS files created using the MiniCssExtractPlugin, filter out all the unnecessary styles, and create a new file just for AMP. The results are on GitHub. 

My build process is pretty simple so it’s very likely there are options or interactions I haven’t thought of. If you end up using it and notice any problems, let me know!   

I have mixed feelings about AMP but supporting it seems like the only way to get any traction in Google searches for my fonts so here we are.

When I was updating my site less frequently, manually copying and pasting the stylesheets and cleaning them up for AMP seemed perfectly reasonable. Lately though, I’ve been trying out new designs more often and it’s been too easy to accidentally forget and let the pages get out of sync. So I decided to try creating a PostCSS plugin to automate the process.

Thinking about the changes I was making by hand, I knew I wanted my plugin to filter out:

• Media queries for desktop breakpoints
• Non -webkit- vendor prefixes
• Specific block names or other prefixes (for BEM or other namespacing)

• !important flags
• -amp classes or i-amp tags

The PostCSS guidelines are pretty clear that a plugin should “do one thing, and do it well” and provide some examples using monorepos to handle more complex tasks. I’ve been meaning to work more with Lerna so this seemed like a good excuse. 

The result is the postcss-amplify plugin. You can check out Github for instructions on how to use it with your current PostCSS setup or I made a web interface for quick use. If you try it and notice anything weird, let me know in the comments or by submitting an issue. I think my next step will be to create a Webpack plugin to fully automate my build so keep an eye out for that.