Where is v5?

[rpearce]

Where is v5?

Hi, folx! Last year, I spent a couple of months trying all sorts of ideas out for v5 to solve various issues and make everything simpler and tinier, and I got burnt out and moved on to other things.

After my daughter was born last October, I briefly had some time where I revisited working on v5 and made good progress before the stress and lack of sleep made me feel awful for months.

I'm currently working on another project, Ramda Guide (it's a small, free book), and I'm making progress every day. Once I get that out the door, I will circle back to v5 as my top open source priority. It will be super simple to use, hyper-focused on images, accessible, and actually have quality zoomed images on iOS (ain't nobody doing that from what I can see).

What's that mean for v4?

That code has been abandoned for v5, but until v5 is released, I will make minor and patch updates to it if there are show-stopping issues.

---

Thanks for hanging in there with me!
Robert W. Pearce

[sunknudsen]

Hey Robert,

Thanks for the update and for creating image-zoom.

Having created image-zoom does not mean you are required to maintain the project forever (don't get me wrong, I am very thankful you have so far).

Life doesn't always make room for open source work... and one must not burn out. Congrats for your daughter btw!

I can empathize with you trying to not miss a beat... which is likely impossible. We're human after all.

❤️

[rpearce]

Thanks, @sunknudsen. Is it bad that I think about this every day? I'll get there, as I am a bit of a completionist, and there's pretty good usage of this, so I don't want to let peeople down.

Thank you for making it feel less of a burden.

[sunknudsen]

Is it bad that I think about this every day?

No, it's human and totally normal.

I'll get there, as I am a bit of a completionist, and there's pretty good usage of this, so I don't want to let peeople down.

If working on image-zoom makes you feel good, all good... If it has become a burden, well... not so good. Btw, thanks for sharing this thread publicly.

Too many people in open source burn out because of this kind of pressure. I wish I knew how to help, but I know more about computers than humans 🤓.

That said, thanks for all you have contributed (and might contribute in the future). In the meantime, you have my blessing to relieve my share of pressure (if any).

[rpearce]

Update: both my wife and my daughter have long-term illnesses now, so my time is limited when it comes to "what is the next open source thing I need to do?" We spent a week in the hospital with our daughter a couple of weeks ago and have been dealing with the medication she's on (that experience has gotten better recently). I'm not focused on this right now.

[rpearce]

Update: I'm looking at some small, incremental updates to first fix some accessibility issues like #259 and the modal not being accessibly done at all.

We still have the home health issues and went back to the hospital for our daughter, but helping folx using this helps me feel a little better.

[sunknudsen]

Thanks for the update @rpearce.

We still have the home health issues and went back to the hospital for our daughter, but helping folx using this helps me feel a little better.

Sending you guys some love. Heath is everything. 🤗

[rpearce]

Thanks a lot, @sunknudsen.

I have some potentially good ideas I'm working on here, but it takes time ⏲️ !

[rpearce]

Update: I've been working on the next major version, and it should keep the API mostly the same, but the internals will work very differently, and it's going to be 100% accessible and should have the ability to include captions.

The going is slow, though, with work, my wife and daughter having long-term illnesses, etc.

[sunknudsen]

Thanks for the update Robert! 🤗

[rpearce]

Update: I've had a breaktrough with resolving some outstanding scaling & performance issues in a v5 rewrite branch I'm working on. This includes mobile iOS!

I've also got some fantastic accessibility updates for the modal in there, as well, and the ability to correctly work with gatsby / nextjs / whatever image components, too.

I've only got this for the Uncontrolled component at present, but this means I can now move on to things like:

• Providing a higher-res image to use (API is WIP on that... I'd love to use srcset or sizes on an <img> or pick them out of a picture, but that may prove to be too complex)
• Providing a caption (API is WIP)
• more...

Referenced issues that are getting attention here:

• Combination of next/image with layout responsive #281
• Unable to save image #259
• "This site appears to use a scroll-linked positioning effect" issue on Firefox #265
• Should be able to append CSS classes #264
• Zoom (not unzoom) performance on iOS Safari is not good #227
• Smarter detection for image naturalWidth and naturalHeight #213
• Support choosing the best image to zoom (formerly "zoomImg") from a source set or something #166
• Ensure accessibility #164

[rpearce]

FYI that the v5-dev branch is under heavy development and will solve a ton of issues, makes this fully accessible, removes all dependencies, but also has a couple of notable breaking changes (some of which are up for discussion):

• Zooming images (svg, img, img inside picture or figure) is what this library is for. Zooming arbitrary things like <div>s won't be supported, but if that <div> has a background-image, some magic will happen with zooming the full image. That latter point involves a lot of math and measuring!
• I'm dropping focus-options-polyfill, for this is something that is now implemented in Safari in some fashion at present, and if folx want/need to polyfill it for Safari's sake, they can do so
• (up for debate) I'm planning on the JS only being outputted as ESModules
• (up for debate) I'm planning on setting "type": "module" in package.json

If any of these build decisions above will affect you negatively, please respond here, and we can chat about it.

cc @sunknudsen if you want to chat more about it here

[rpearce]

Update: here's a short video of an image gallery using <div>s, background-image, background-position, and background-size. The example comes with various aspect ratios to try, as well.

v5-bg.mp4

[rpearce]

And here's a short video of an image gallery using <img />, all the object-fit options, and whatever you want object-position to be:

v5-img.mp4

[rpearce]

Screencast updates I posted directly to issues:

• Support choosing the best image to zoom (formerly "zoomImg") from a source set or something #166 (comment)
• Smarter detection for image naturalWidth and naturalHeight #213 (comment)

I've also got the current build output down to three files whose total is 5.3kb (index.js is at 4.2kb without client minification...I'll optimize further later):

1. index.d.ts (type definitions)
2. index.js (all the JS in a single ESModule)
3. styles.css (CSS styles)

[rpearce]

For all the zero people following this, here's a demo of a couple of SVGs that are now working:

rmiz-svg-demo.mp4

SVG support involves a little bit more hackiness, but it's not that bad. There are still things to iron out, but at least we have a way of doing these things!

[sunknudsen]

Thanks for the updates… happy you are back at it. 🤓

[rpearce]

If anybody wants to play with the latest build, follow the directions here, #326 (comment), and check out the README in the v5-dev branch.

Additionally, if anybody has opinions on "type": "module" and ESModule-only output, please weigh in here! #328

[rpearce]

I've opened a Draft PR to start moving this along. I need to write some basic, happy path functionality tests and see if anbody can beta test!

npm install --save [email protected]

[rpearce]

This has been released as 5.0.0. Any new conversations should go into a new discussion.

[rpearce]

@lezan Can you tell me the steps to recreate this very simply, or even better: can you provide an example of how you're using it? A repo or online example?

If I have an example I can test, I can find a solution!

You may want to create a new issue, as well, with that info so others can track this.

[lezan]

Hello @rpearce sorry for the late reply, but I was out of town. I will provide you a repo online in a new issue! I just need a bit of time to wrap all the things.

[lezan]

Just for reference,
repo: https://github.com/lezan/zoom-test-gatsby
demo online: https://codesandbox.io/s/sharp-pike-fzr2ye?file=/src/pages/index.js

Going to create an issue soon.

[rpearce]

@lezan I've created an issue for you. I understand the issue, and I have a workaround for you in the issue: #347

[rpearce]

@lezan I've updated lezan/zoom-test-gatsby#1, and if you could give the 5.0.2-beta.0 version a test, that would be helpful. It's looking like it's good to go, but I'd like some extra validation.