Building a Seamless Image Zoom Feature - RRU 265

model for software outsourcing. With Onvoid, clients can higher design and software development services and only pay once the task is delivered and improved.

afterwards and put damage back where it once was. So if you like that effect that Medium has and you want to have it on your website or on your rap application, today we're going to be talking about this library and some other things related to the creator of this library, So let me introduce him. But first, my name is Lucas Paganini, your host in the podcast, and joining me in today's episode is also the host Peter Ossa.

Hi everyone, now our very special guest that I was just mentioning the creator of this library, Robert Pierce, which is a software engineer working professionally for over thirteen years. We'll focus on JavaScript and typescript, but also interested in some other cool things such Haskell, Rust and of course, as all good developers are really nice, interesting functional programming. He was also a teacher at a few coding book camps and also spoke at meettubs conferences and has been

using reacts since twenty thirteen. He also contributes a lot to open source, so if you enjoy this library, make sure to check out his GitHub sponsor page and help him out so we can keep this awesome project up and running. Robert, thank you so much for being on the show.

what Medium was doing. And then as time went on and based on you know, what we could do in the browser, all the different things we have access to now, like you know, picture elements, and you know, all the different scenarios people might have with wanting to zoom divs with background images or you know objects fit and pain cover,

object position, all these different possibilities. You know, where the project is now is you know, it's drifted a little bit from how the exact one on Medium feels, but I think it still maintains the essence. Awesome. Yeah, that doesn't make sense.

that's one aspect of it. And the other aspect for me was, Hey, this hobby project that I thought was cool and that I kind of wanted for my own thing. Things started to become popular and then it not being you know, perfect or really exactly what I needed all the time, or maybe I didn't like some of the code, or I got more educated, I got more skilled at react or a JavaScript or was something. It started to be something that I knew people were going to look at,

and so I wanted it. I wanted to be proud of it, and so that's something that kept me coming back is like, this is a kind of like a like a people have like dot file gardens or like code gardens. This was my like react code garden that I is something that I could keep tending to and as I grew in skill, I could then apply that skill to the product. So yeah, I think having a supportive community of people that use it and want it

to get better. Plus you know, knowing that this is something that you're putting out into the world and wanting that to reflect you know, your skill and your attention to detail. I think those things made this project what it is today. I like that. I like that very much.

harder as people you know, you know, change jobs. Maybe they had an easier they have more time, more free time with their job before, maybe the new job is more demanding, maybe their life scenarios change, or maybe they just you know, they're not interested in contributing anymore. And so I've had a handful of people that have been over the over the years during different time periods we're super helpful with they're you know, testing things out, coming

up with ideas, contributing some code. But eventually that would kind of is allowed. But in a way that's okay, where it's like, okay, you know, we we got through this thing. I really appreciate your time. Thank you so much. You know, you're a contributor. You're in the read me and they all contributs section, and every now and then I might try to ping them on, you know, an issue or pull request and say, you know, hey, have

you experienced this as well? But you know, these things can be a little bit temporary, and so that's what I've tried to do, is like, if someone's asking a question, try to respond as immediately as I can. If I can't fix the issue for a long time, which is sometimes the case, you know, I'll try to check back in periodically and say, hey, I haven't forgotten about this. I haven't forgotten about you. The person who's right, you know, putting yourself out there to raise an issue online, and

so I'm trying to do that. I try to be kind to everyone, but it doesn't mean I can always solve the issue quickly, but I can respond quickly, and that I think that keeps people coming back. And I think open source projects that are clear with where the project is and where it's going, like is it active, is it? Is this something you're not going to fix? Can you just respond to them and just say, hey,

I don't have time for this right now. Stuff like that will I think be useful in maintaining some sort of community, even if that community isn't involved very often.

it was a few years ago. I had one or two issues get picked up, and I tried to write the issues as to make it as clear and plain as I could about what the issue is, where I think the problem or the solution may be in the code, what the expected outcome would be, And a few of those have been picked up, but right now, I mean it's mostly just me. I don't really have anyone to turn to. Even some people I still work with that have contributed to the project, you know, they've got other

things going on. So if an issue comes up, it's me. I can I can ask people. You know. What I do in the issues is if there's something that comes up, you know, I will ask them to please provide some sort of reproduce reproduction case, whether that's in code, sandbox or a project that they create, and if they don't do it, someone else might show up and do that

for them, which is really nice. And then I can interact and go back and forth with them or they can sort of figure out, you know, the best way is to set the issue up themselves in the issue, and then that really helps me save a lot of time and you know, dive in, find out what the problem is and say, oh, okay, all right, let's let's get it there. I'm fixing. Nice. Okay, let's oh sorry, sorry, Peter, go ahead. Yeah, yeah, that's nice.

very long time. I also don't even know if now that this exists, if it would be a better way to do this, or if it's better suited for other use cases. But yeah, I'd like to let's just go through how this is right now, and then we can even talk about if you if you have an urge, like an itch to refactor it even further now to adhere to modern.

a page. Okay, so we need to be able to focus on it with a keyboard.

on the screen. And when I hear that, I politely inform people that's you know, it's not just people that are blind that use keyboards and screen readers, people with low visual acuity that could be cognitive, people with cognitive disabilities. There's many, many, many reasons why people might use other

things than just a mouse. So the simplest, absolute simplest thing you could do is, okay, I click on that, and I you know, just transform that image that's on the screen right there and make it take up the whole screen. But you know, that's modal behavior. And so if someone we're trying to do this with a keyboard, or they were using with the screen reader and they were blind, you know, they might of that image still up taking up the whole screen, but they might be

trying to navigate through everything that's behind it. So that's why it uses a modal. Modals have very a modal dialogue. You know, those are very specific rules where none of the content, none of the you know, input controls, anything behind that modal should not be available to a keyboard, screen reader, any assistant device. So okay, that means we need to be in a model now, so what do

we need to do to get there. We've got an image and we want to make it seem like where we're taking that image and we're zooming it up to the you know, the viewport screen size. Well, how do we do that with a modal, because a modal is a separate element. What we do is take that original image and I'll get a little more deep into this in a second, but we take that image, we open a modal dialogue with that image inside the modal dialogue,

so it's two different images. Now with the same source, you put it on top of where it is on the page, and then you scale it to the viewport. Now, there's some problems that you run into with this if you if you just try to you know, there's a little bit of math to figure out. Okay, well, it's the within the height looks at what are the dimensions of the image? Do I need to scale it more you know x, or more x or more y. But the problems get compounded by Safari and specifically iOS Safari.

Both macros and iOS do this, but it's worse on iOS. If you start with an image that's small and you try to transform it above you know, transform scale you know, two three, four. Safari only have the image quality that was originally rendered. So even if you haven't a bigger image or a really really big image, if you render it really small, that's the best quality you're gonna get. So it scales up. Sorry, when you scale it up, you

lose the quality. So it's a big problem if you're trying to have something that you know enhances the image makes it bigger. So instead, what you have to do to do all this is figure out in reverse how

big it's going to get. When you're doing the zooming and you put the dialogue on top of the image, you scale the image down so between zero and one, and then as the animation goes, you eventually scale to a scale of one, and that scale of one is whatever is the biggest the image can get in the viewport. You also have to take into account what the maximum size of the image and make sure you don't scale beyond the maximum side of the image and make them blurry.

So the image is eight hundred by eight hundred, but you're on a really big screen, the only one to zoom to that amount. So there's a lot of little things that go into it. But to wrap that initial bit back up, there's a dialogue that's invisible that gets put on the screen, and the image that we're zooming is put on top of the image that's underneath the dialogue,

and then we scale it up to the viewport. And when you click on it again or press escape to get out of this modal experience, it does the opposite and puts it back down.

on what your use case is with that. And you know, there's a you know, there's a there's a use case where you scroll down and maybe you scroll past an image because it's you know, taller than your viewport and you've got a little bit of it in the window. You click on that, it comes down and it may actually, you know, if it's taller and wider, it may just shrink it so it fits into the viewport. But that's what it does, okay, okay.

animation all this stuff. So what I've got now is the way that I think most models are supposed to work, where you disabled the body, the scroll on the body, and then if someone does a scrolling action, so if it's like a mouse wheel or gesture or something, it doesn't actually scroll anything, but it will make the the image on zoom that's the word I use on zoom. And then you can keep going about your business. On the page, you.

This might even be this was probably before React. It was just really like React dot render or React on that render the ad equivalences. It was rendering a whole new like React what do you call that React tree in essence, like an whole new React instance. And you know, over time I was I was using a div, and as I got more skilled and accessibility, I said, oh, okay, there's a bunch of rules here. We've got to figure

this out. Because if you were just using a div, even if you use like you know, ari emodal true and roll equals dialogue on a dive, the browser is not gonna disable all of the content in the background.

It's not going to hide it. So you could theoretically, you know, keep pressing tab and go down the screen, or you could use screen reader and read the content behind that, and so okay, so you've got to well, back then, what you had to do was conditionally go and put aria hidden on everything and tab index negative one on everything else, or create what's called a tab trap so that you could never tab outside of the model. Maybe it would wrap around, Well, there's not really there's

not really anything to wrap around in this component. But anyway, that was a very big headache and I didn't do it right for a while. Eventually, when dialogue, when the dialogue elements became, you know, baseline generally available, I refactored to use that. But that comes with its own problems as well. So the dialogue element comes with like a

placeholder overlay. It comes with its own overlay style. I don't know if it's different for browser, but it comes with some default browser style street So I didn't want that because I wanted to animate in my background. I didn't want it to be instant, so I wanted to animate in the background. I also found at the time, I think it's been it's improved a bit. If you didn't have role equals dialogue on the dialogue element, then not every browser screen reader combination would work quite like

you wanted it to. Same thing with having arimodal true on there, but I mean you would need the rimodal true anyway. But the roll equals dialogue was something that needed to be added. So so I'm getting into the weeds here, but I am using the dialogue element now and I'm using a little bit of the of its internal on close. And also I think it's called it open modal or show modal, I think is what the the native API is for that. But yeah, I'm using a dialogue now and that you get all that stuff

that I just talked about being a problem. You get almost all of that for free, which is great. You know with the back to the native style sheet overlay background color, but that is very simple. Like in the CSS for the project, I just disable that and I do my own sort of rendering in the component and state in the component to let me know when I should be animating something in and not transitioning something like

the background in. So you can have like a white background, you can have a black background any color you want, and then that should animate in and that's all customizable if you want to change the CSS. Okay, a lot of that is just.

And now we've got the core functionality, which is all native stuff all sorted out, and then you've got wrappers for each each framework, each environment, whatever people need. That was a great plan and I started doing that and I thought I'd settled on an API, but it kind of fizzled out. I worked on it for a couple of weeks while on vacation, which was probably not how I should have spent my vacation, but it you know, maybe this was early twenty twenty. I forget it might

have been. It might have been the beginning of covid, but you know that I worked on that, found an API, but then I ran into issues. The code was getting kind of ugly and it fell to the side, and I left it for a while. I came back and looked at it, and I just I wasn't satisfied. So I ring in with the.

is builds on top of version three. But version four I had this moment where I thought, wouldn't it be cool if whatever someone puts inside of the Zoom components we just zoomed that. It doesn't matter what it is, anything, texts, you know, gives that have shapes, whatever it is. Take the bounding box of that, what of that stuff that is inside the zoom component, you know, a child of the zoom component and just zoom that up to the top. My problem, My problem with that was, well, how do

you have a button? Oh gosh? And so what I did is I put a button that covered the entire image so that when you click on it, you're clicking on a button. But then there was there was. I just had a bunch of issues that I ran into, and I wanted to directify these for this version five thing. And I wanted to also do something that I don't know if anyone else has done, which is support every type of support every type of image that you can think of, which is, like I said before, images with

object fit, object position loading equals lazy doing. Uh was it a ACNC loading for it as well? You know divz that have a background image, background size, background position, you know, making sure that any picture with whatever the source is, figures, SPGs, you name it. I wanted all of these things to work because I wanted this for myself and I've seen other people asking about that in the past. So instead of just doing the vanilla thing, I readd this over a long period of time. In

version five, I spent many nights. Unfortunately, you know, my wife will My wife said she'll listen to this, even

though she doesn't care about programming. But I spent many nights, you know, after she went to bed on the couch, losing sleep, getting way less than I should, trying to figure out the math behind Okay, if I haven't image element, but I've got object fit contained, and the image is technically it looks like it's scaled down, and you know, like if you were to look at it in the Web Inspector, you would see, you know, like a blue box around the entire image element, but the actual thing

you see is smaller within that. So I spent a lot of time trying to figure out the exact math that browsers use to scale that down based on a lot of different things, based on the image, the native sort of that was the natural width and height of the image. How much space does it have to work with? What is the object position? You know, object position can be pixels, it can be twenty five percent, seventy five percent, you name it. There's all these different scenarios. How do

we put an image on top of that? In the moddle to scale that up and make it look like it's one seamless experience where you just click and it gets big and click again and it gets small. So spent a lot of time on that, and that's where I got to dispersion five. And now that things have kind of slowed down, I've got most of the features that I need. Some still some bugs here and there,

but most of the features that I need. That's where I think is it good spot to start to stop and say, do I have the time to think about making this maybe into the web component? So yeah, I'm not there yet, but I have two young you know, two young daughters, and so I don't really have that time. And I have many other interests as well, for open source things and little tools that I want to exist. But that's where I am now.

Crazy to see to understand the complexity of it, right, because once you look at it, you think, okay, like I would be able to do it real quick, like a day's work, but then you see, oh no, there are so many details, like, oh my god, really hard

to do that, really well. I also noticed, on the at least on the first storybook example, that the image already starts with the WIT fully expanded, And do you have a way to customize that so that it actually starts with the WIT that is being shown and then it expands from it, you know, like if you have an example where you're just showing a little window of it, then it starts with that, and as it grows, that expends the rest of the image, and once it closes, it closes the same way.

You name it? And then when it does the like consuming for a background uh background cover, Well, what it'll try to do is say, okay, is the image itself bigger than its container? If so, when we put that, when we put that, imagine a model on top, try to take that into account to represent exactly what the image in OA. So I don't have a way right now of unfurling like a flag unfurls, unfurling the edges

as it zooms to get bigger. What it does right now is it puts the image on top of where that one is at the original sorry, with the original images like full dimensions. So let's say you've got a really really really tall image, but it's in a square and with background size cover, it will mean sorry, you might hear children in the background. Now, you know, instead of just zooming that, instead of just zooming that you know, displayed box that's on the screen, which is what I

did in version four. What it does it will zoom the original image and make it try to make it look seamless. But what it does is it will if you've got that little box, it'll put the image on top of that box and then zoom it. If I had a way to sort of like I said, unfuril or like slowly reveal part of the image, then like I would, I would totally accept contributions for that to make it seem like it's just growing out from the box.

That would be great. Alas I don't have the I don't have a good idea for how to do that.

guess that's that's the whole package. That's the whole package. I would prefer to have different components that include increasing amounts of complexity, so that when you know you only have one base case, that's maybe I have a regular image,

nothing special. I only want the code for that, so that tree shaking would eventually tree shake away everything that's that's not being used, so that you get the bare minimum, the bare minimum stuff that you need right now, the logic for figuring out all of the magic that goes into you know, like I said, the objects fit the

background images. All of that is mixed in with the other code to try to figure out, Okay, what kind of image is it, how big do I make it on the screen, what other styles so I need to apply? What kind of transformal kind of scale? All of that is new together. I think it'd be really need eventually to separate all that so that people's actual bundle size and impact would just be less. I wouldn't. I wouldn't

do those as like separate packages. I feel like that's a bit much, But if I could tree shake out everything, that would be awesome.

project doesn't have to exist anymore. I think that that's not the end goal for some of my all of my works, is I want it to be made so that it's not needed anymore, because you know, maintaining something and it takes effort, it takes time. You know, it's an it's extra and extra dependency that someone has to maintain themselves and say, oh did Robert break something? Oh do I actually want this upgrade? You know, it's a

lot of work overall. So if the if the browsers could come up with something, I doubt they I thought they would for this, But if they had something that would be great, if few transitions could solve this easily, I would happily, happily, you know, deprecate this and say it's in maintenance mode, but we're not. I don't know if it's very yet. Okay, yeah, that doesn't make sense.

lot more support in the last couple of years. I think that if you think about web components not in the same way as you do a React component, where you've got you know, the tree of components that have render cycles and everything, but if you think of them as a decorator, something that you know, really enables progressive enhancement, then I think this is something that fits perfectly there where I've got an image, if I'm rendering something, rendering something,

you know, on the server, I don't need all this extra stuff. I don't need all this extra stuff around but you know, clicking and zooming and all that. It's just an image. And if someone's got JavaScript disabled, which like I do for by default on every site I go to, I enable it if the site doesn't work. But for people that have JavaScript disabled, like, they shouldn't be you know, impacted negatively. So they should be able to use my imageym library or form or whatever you know,

without extra passle. And so if I use this, if I make this into a web component, it can be something that you know, people fetch however they want through m PM, through a CDN whatever, And if they up their image in this web component, then they'll get that extra decoration, that extra functionality, but it's something that's not

critical to how their do. Like, I don't want to make it, make a change and block somebody's you know, next build, or give them warnings or errors because you know, I included a document or a window reference, you know, that kind of thing. So I'd rather just be able to be applied to any framework anywhere. That's why I'm thinking about component. Yeah, I think it would.

rails with that. But most of the content I've written on there is because it's something that I've explained or had or worked too, you know, help level somebody else up on. And I thought, oh this, maybe not just write this down because I've explained this five times. So if somebody listening to this has you know, React, typescript, JavaScript, Bash, you know Haskell specifically Hackle, the static side generator, which

my side is built with. If people have any you know, take a look at my side and say, well, I would love to know more about X. I have no clue, send me an email, you know, contact me somehow and I will. I'll write something up and we can make a blog post about it and you can read about it and we can share it with the world. So I'm I'm happy to share whatever I can and you know, learn a few things along the way myself. Awesome.

as well. I host myself a podcast about a are but there are others as well, So definitely check out top and depths if you want to explore some other technology topics. And if you are a company or you know someone that is looking for staff augmentation or outsourcing particular project, would definitely recommend checking out on Void. Is you and v O I d like on the opposite

Void dot com. They have this really interesting business model that is very very client from client friendly, Like clients don't have to pay by the hour, which tends to be a huge problem for them because things usually go over time and over budget and then they lose their predictability.