Speaker 1: Hey, Welcome to React around Them the podcast really keep
Speaker 1: you updated on all things reacting label. This show is
Speaker 1: sponsored by ray Gun and produced by Top and Devs
Speaker 1: and Void. Top and Devs is very create Top and
Speaker 1: deves to get top and pay and recognition. We're working
Speaker 1: on interesting problems and making meaningful community contributions. And Void
Speaker 1: is a company that provides the most client friendly business
Speaker 1: model for software outsourcing. With Onvoid, clients can higher design
Speaker 1: and software development services and only pay once the task
Speaker 1: is delivered and improved.
Speaker 2: In today's episode, we will.
Speaker 1: Talk about React Medium image Zoom, which is a library
Speaker 1: that allows you to create the same effect that Medium
Speaker 1: pass with their images, that allows you to basically click
Speaker 1: on an image and it zooms up and takes up
Speaker 1: your entire screen in a battery nice animation, smooth animation,
Speaker 1: and then you can just go back to your navigation
Speaker 1: afterwards and put damage back where it once was. So
Speaker 1: if you like that effect that Medium has and you
Speaker 1: want to have it on your website or on your
Speaker 1: rap application, today we're going to be talking about this
Speaker 1: library and some other things related to the creator of
Speaker 1: this library, So let me introduce him. But first, my
Speaker 1: name is Lucas Paganini, your host in the podcast, and
Speaker 1: joining me in today's episode is also the host Peter Ossa.
Speaker 1: Hi everyone, now our very special guest that I was
Speaker 1: just mentioning the creator of this library, Robert Pierce, which
Speaker 1: is a software engineer working professionally for over thirteen years.
Speaker 1: We'll focus on JavaScript and typescript, but also interested in
Speaker 1: some other cool things such Haskell, Rust and of course,
Speaker 1: as all good developers are really nice, interesting functional programming.
Speaker 1: He was also a teacher at a few coding book
Speaker 1: camps and also spoke at meettubs conferences and has been
Speaker 1: using reacts since twenty thirteen. He also contributes a lot
Speaker 1: to open source, so if you enjoy this library, make
Speaker 1: sure to check out his GitHub sponsor page and help
Speaker 1: him out so we can keep this awesome project up
Speaker 1: and running. Robert, thank you so much for being on
Speaker 1: the show.
Speaker 2: Thanks for having me, Lucas.
Speaker 1: Awesome Robert. Let's just get to it, man. I try
Speaker 1: to give a really quick pitch about the library, but
Speaker 1: do you want to extend it a bit further? Are
Speaker 1: there any specific details about the library that I think
Speaker 1: it's relevant for our audience to be aware of before
Speaker 1: we dive into how you built it and how it works.
Speaker 2: Yeah, I think it's it's important to you know, talk
Speaker 2: about how a project that is, I guess eight years
Speaker 2: old now, you know, can drift a little bit. And
Speaker 2: so it started out trying to be a clone of
Speaker 2: what Medium was doing. And then as time went on
Speaker 2: and based on you know, what we could do in
Speaker 2: the browser, all the different things we have access to now,
Speaker 2: like you know, picture elements, and you know, all the
Speaker 2: different scenarios people might have with wanting to zoom divs
Speaker 2: with background images or you know objects fit and pain cover,
Speaker 2: object position, all these different possibilities. You know, where the
Speaker 2: project is now is you know, it's drifted a little
Speaker 2: bit from how the exact one on Medium feels, but
Speaker 2: I think it still maintains the essence. Awesome. Yeah, that
Speaker 2: doesn't make sense.
Speaker 1: And and that's a long time, like eighty years maintaining that.
Speaker 1: First off, congrats for maintaining, because a lot of open
Speaker 1: source projects they just get abandoned in a way shorter
Speaker 1: period of time. I do want to know, what do
Speaker 1: you think was the success of this project being maintained
Speaker 1: for so long? Were you able to find other maintainers?
Speaker 1: Are you the solo meting journey, Like, what advice could
Speaker 1: you give to other people thinking of maintaining or creating
Speaker 1: open source projects.
Speaker 2: That's a great question. So a bit of it so
Speaker 2: that it's too it's twofold. For me, I think it's
Speaker 2: partially the people who help contribute to it, which can
Speaker 2: take the form of just people using it and raising issues.
Speaker 2: I can take the form of people wanting to solve
Speaker 2: some of the issues, as well as some people who
Speaker 2: just have ideas that they think could could help and
Speaker 2: they are willing to talk that through with you. So
Speaker 2: that's one aspect of it. And the other aspect for
Speaker 2: me was, Hey, this hobby project that I thought was
Speaker 2: cool and that I kind of wanted for my own thing.
Speaker 2: Things started to become popular and then it not being
Speaker 2: you know, perfect or really exactly what I needed all
Speaker 2: the time, or maybe I didn't like some of the code,
Speaker 2: or I got more educated, I got more skilled at
Speaker 2: react or a JavaScript or was something. It started to
Speaker 2: be something that I knew people were going to look at,
Speaker 2: and so I wanted it. I wanted to be proud
Speaker 2: of it, and so that's something that kept me coming
Speaker 2: back is like, this is a kind of like a
Speaker 2: like a people have like dot file gardens or like
Speaker 2: code gardens. This was my like react code garden that
Speaker 2: I is something that I could keep tending to and
Speaker 2: as I grew in skill, I could then apply that
Speaker 2: skill to the product. So yeah, I think having a
Speaker 2: supportive community of people that use it and want it
Speaker 2: to get better. Plus you know, knowing that this is
Speaker 2: something that you're putting out into the world and wanting
Speaker 2: that to reflect you know, your skill and your attention
Speaker 2: to detail. I think those things made this project what
Speaker 2: it is today. I like that. I like that very much.
Speaker 1: Like think about it as a place where you can
Speaker 1: output your growth as a developer and kind of like
Speaker 1: look back onto it and keep rebuilding it, just literally
Speaker 1: rewriting it as you gain more and more knowledge and
Speaker 1: you feel that you are able to do a better job.
Speaker 2: I like that interesting.
Speaker 1: And but with regards to other contributors, were you able
Speaker 1: to like create this net and how is that or
Speaker 1: or is it actually mainly you.
Speaker 2: The main contributor. It's definitely mainly me, And I think
Speaker 2: that's something. So something that's important to remember over time
Speaker 2: is that, like when people get involved with open source projects,
Speaker 2: it might be. I mean, it might be on a
Speaker 2: one off basis, or you know, at best, it's probably
Speaker 2: on a temporary basis. You know, asking people to show
Speaker 2: up for something that they don't get paid for is
Speaker 2: a is a big ask, and it gets harder and
Speaker 2: harder as people you know, you know, change jobs. Maybe
Speaker 2: they had an easier they have more time, more free
Speaker 2: time with their job before, maybe the new job is
Speaker 2: more demanding, maybe their life scenarios change, or maybe they
Speaker 2: just you know, they're not interested in contributing anymore. And
Speaker 2: so I've had a handful of people that have been
Speaker 2: over the over the years during different time periods we're
Speaker 2: super helpful with they're you know, testing things out, coming
Speaker 2: up with ideas, contributing some code. But eventually that would
Speaker 2: kind of is allowed. But in a way that's okay,
Speaker 2: where it's like, okay, you know, we we got through
Speaker 2: this thing. I really appreciate your time. Thank you so much.
Speaker 2: You know, you're a contributor. You're in the read me
Speaker 2: and they all contributs section, and every now and then
Speaker 2: I might try to ping them on, you know, an
Speaker 2: issue or pull request and say, you know, hey, have
Speaker 2: you experienced this as well? But you know, these things
Speaker 2: can be a little bit temporary, and so that's what
Speaker 2: I've tried to do, is like, if someone's asking a question,
Speaker 2: try to respond as immediately as I can. If I
Speaker 2: can't fix the issue for a long time, which is
Speaker 2: sometimes the case, you know, I'll try to check back
Speaker 2: in periodically and say, hey, I haven't forgotten about this.
Speaker 2: I haven't forgotten about you. The person who's right, you know,
Speaker 2: putting yourself out there to raise an issue online, and
Speaker 2: so I'm trying to do that. I try to be
Speaker 2: kind to everyone, but it doesn't mean I can always
Speaker 2: solve the issue quickly, but I can respond quickly, and
Speaker 2: that I think that keeps people coming back. And I
Speaker 2: think open source projects that are clear with where the
Speaker 2: project is and where it's going, like is it active,
Speaker 2: is it? Is this something you're not going to fix?
Speaker 2: Can you just respond to them and just say, hey,
Speaker 2: I don't have time for this right now. Stuff like
Speaker 2: that will I think be useful in maintaining some sort
Speaker 2: of community, even if that community isn't involved very often.
Speaker 1: Yeah, that does make sense, like thinking about the people
Speaker 1: there are submitting issues and just using it as contributors
Speaker 1: as well. And in a way that that is very true,
Speaker 1: Like they're giving feedback on what they seem is missing,
Speaker 1: So in a way they're definitely contributing as well and
Speaker 1: helping you make better decisions for the future of the product.
Speaker 2: That's nice.
Speaker 1: Okay, I would like to get into the intricacies of
Speaker 1: how the code actually works. But before, Peter, do you
Speaker 1: have any anything you want to say?
Speaker 2: Question?
Speaker 1: Yeah?
Speaker 3: Well, I think I have one question on its on
Speaker 3: the basis of like maintain also like maintaining the open
Speaker 3: source project right too, or that maybe you're kind though
Speaker 3: primarily the meaningful enough for that, or like you have
Speaker 3: like you have into the prog that maybe, for example,
Speaker 3: if you are most available kind of like assign it to.
Speaker 2: So so like Yeah, I couldn't quite make out the
Speaker 2: full question, so I'll try to repeat it. Was it
Speaker 2: about if I'm too busy and assigning issues to other people? Yeah? Yeah, yeah,
Speaker 2: yeah yeah.
Speaker 3: Do you have like your system that helps you maybe
Speaker 3: if you're kind of engaged, maybe you can't actually work
Speaker 3: on that issue and connacally signed with so on like
Speaker 3: you have that.
Speaker 2: Yeah, I've not had too much luck with that. One
Speaker 2: thing I've tried before was during hactober Fest, but I
Speaker 2: think was it. I think it's Digital Ocean puts that
Speaker 2: on in October or yeah, in October. And I've you know,
Speaker 2: labeled some issues as hactober Fest before, and I think
Speaker 2: it was a few years ago. I had one or
Speaker 2: two issues get picked up, and I tried to write
Speaker 2: the issues as to make it as clear and plain
Speaker 2: as I could about what the issue is, where I
Speaker 2: think the problem or the solution may be in the code,
Speaker 2: what the expected outcome would be, And a few of
Speaker 2: those have been picked up, but right now, I mean
Speaker 2: it's mostly just me. I don't really have anyone to
Speaker 2: turn to. Even some people I still work with that
Speaker 2: have contributed to the project, you know, they've got other
Speaker 2: things going on. So if an issue comes up, it's me.
Speaker 2: I can I can ask people. You know. What I
Speaker 2: do in the issues is if there's something that comes up,
Speaker 2: you know, I will ask them to please provide some
Speaker 2: sort of reproduce reproduction case, whether that's in code, sandbox
Speaker 2: or a project that they create, and if they don't
Speaker 2: do it, someone else might show up and do that
Speaker 2: for them, which is really nice. And then I can
Speaker 2: interact and go back and forth with them or they
Speaker 2: can sort of figure out, you know, the best way
Speaker 2: is to set the issue up themselves in the issue,
Speaker 2: and then that really helps me save a lot of
Speaker 2: time and you know, dive in, find out what the
Speaker 2: problem is and say, oh, okay, all right, let's let's
Speaker 2: get it there. I'm fixing. Nice. Okay, let's oh sorry, sorry, Peter,
Speaker 2: go ahead. Yeah, yeah, that's nice.
Speaker 3: Actually, I think it's actually very common that we do
Speaker 3: like taking all this make sure that it's kind of
Speaker 3: community because and I it's actually kind of a very
Speaker 3: large amounts of working end to kind of you know,
Speaker 3: under the issues.
Speaker 2: I'm also kind of intact with the people placing the issues.
Speaker 3: So this is actually very as a I think probably
Speaker 3: you can actually even if you don't mind, maybe on
Speaker 3: the shoe maybe we can actually ask from assist and
Speaker 3: like people who come much of it to maintain a work.
Speaker 3: I don't make it's fun because I know that the
Speaker 3: kind of cool if maybe you have like like maybe.
Speaker 2: To maintaining as well.
Speaker 3: That yeah, to put home beyond your kind.
Speaker 1: Of yeah, yeah, for sure. Okay, let's get a bit
Speaker 1: into the intricacies of the code, because I think there
Speaker 1: are multiple different ways in which you could have coded that,
Speaker 1: especially now with view transitions, which are recently we're lending
Speaker 1: on Chrome. But I'm not sure if there already stable
Speaker 1: in all the browsers as well. But I'm sure that
Speaker 1: you didn't use that because the library exists for a
Speaker 1: very long time. I also don't even know if now
Speaker 1: that this exists, if it would be a better way
Speaker 1: to do this, or if it's better suited for other
Speaker 1: use cases. But yeah, I'd like to let's just go
Speaker 1: through how this is right now, and then we can
Speaker 1: even talk about if you if you have an urge,
Speaker 1: like an itch to refactor it even further now to
Speaker 1: adhere to modern.
Speaker 2: Technologies and stuff like that.
Speaker 1: But right now, how does it work?
Speaker 2: All right? So this this is gonna be some nitty
Speaker 2: gritty stuff. I'll start at the top. I'll start with like,
Speaker 2: what is actually happening. I do want to get to
Speaker 2: where the project eventually will go.
Speaker 4: But I think we'll say that for a minute. I
Speaker 4: think it's cool it involves web components, and we'll see.
Speaker 4: So the way that this works is based on the
Speaker 4: need of what it needs to do. So what it
Speaker 4: needs to do is if you're gonna if you're gonna
Speaker 4: put something on the screen that is clickable, So like
Speaker 4: if someone can click on it or tap on it,
Speaker 4: then it needs to also be accessible to a keyboard
Speaker 4: or other assistive device that can you know, focus through
Speaker 4: a page. Okay, so we need to be able to
Speaker 4: focus on it with a keyboard.
Speaker 2: We need to be able to set that up to
Speaker 2: be also screen reader accessible. And people have said to
Speaker 2: me in the past, they're like, well, why why are
Speaker 2: you doing all of this with modal Why are you
Speaker 2: doing all this stuff with keyboard? Like blind people with
Speaker 2: blindness don't Why would they want to enhance a you know,
Speaker 2: an image, Why would they want to make it bigger
Speaker 2: on the screen. And when I hear that, I politely
Speaker 2: inform people that's you know, it's not just people that
Speaker 2: are blind that use keyboards and screen readers, people with
Speaker 2: low visual acuity that could be cognitive, people with cognitive disabilities.
Speaker 2: There's many, many, many reasons why people might use other
Speaker 2: things than just a mouse. So the simplest, absolute simplest
Speaker 2: thing you could do is, okay, I click on that,
Speaker 2: and I you know, just transform that image that's on
Speaker 2: the screen right there and make it take up the
Speaker 2: whole screen. But you know, that's modal behavior. And so
Speaker 2: if someone we're trying to do this with a keyboard,
Speaker 2: or they were using with the screen reader and they
Speaker 2: were blind, you know, they might of that image still
Speaker 2: up taking up the whole screen, but they might be
Speaker 2: trying to navigate through everything that's behind it. So that's
Speaker 2: why it uses a modal. Modals have very a modal dialogue.
Speaker 2: You know, those are very specific rules where none of
Speaker 2: the content, none of the you know, input controls, anything
Speaker 2: behind that modal should not be available to a keyboard,
Speaker 2: screen reader, any assistant device. So okay, that means we
Speaker 2: need to be in a model now, so what do
Speaker 2: we need to do to get there. We've got an
Speaker 2: image and we want to make it seem like where
Speaker 2: we're taking that image and we're zooming it up to
Speaker 2: the you know, the viewport screen size. Well, how do
Speaker 2: we do that with a modal, because a modal is
Speaker 2: a separate element. What we do is take that original
Speaker 2: image and I'll get a little more deep into this
Speaker 2: in a second, but we take that image, we open
Speaker 2: a modal dialogue with that image inside the modal dialogue,
Speaker 2: so it's two different images. Now with the same source,
Speaker 2: you put it on top of where it is on
Speaker 2: the page, and then you scale it to the viewport. Now,
Speaker 2: there's some problems that you run into with this if
Speaker 2: you if you just try to you know, there's a
Speaker 2: little bit of math to figure out. Okay, well, it's
Speaker 2: the within the height looks at what are the dimensions
Speaker 2: of the image? Do I need to scale it more
Speaker 2: you know x, or more x or more y. But
Speaker 2: the problems get compounded by Safari and specifically iOS Safari.
Speaker 2: Both macros and iOS do this, but it's worse on iOS.
Speaker 2: If you start with an image that's small and you
Speaker 2: try to transform it above you know, transform scale you know,
Speaker 2: two three, four. Safari only have the image quality that
Speaker 2: was originally rendered. So even if you haven't a bigger
Speaker 2: image or a really really big image, if you render it
Speaker 2: really small, that's the best quality you're gonna get. So
Speaker 2: it scales up. Sorry, when you scale it up, you
Speaker 2: lose the quality. So it's a big problem if you're
Speaker 2: trying to have something that you know enhances the image
Speaker 2: makes it bigger. So instead, what you have to do
Speaker 2: to do all this is figure out in reverse how
Speaker 2: big it's going to get. When you're doing the zooming
Speaker 2: and you put the dialogue on top of the image,
Speaker 2: you scale the image down so between zero and one,
Speaker 2: and then as the animation goes, you eventually scale to
Speaker 2: a scale of one, and that scale of one is
Speaker 2: whatever is the biggest the image can get in the viewport.
Speaker 2: You also have to take into account what the maximum
Speaker 2: size of the image and make sure you don't scale
Speaker 2: beyond the maximum side of the image and make them blurry.
Speaker 2: So the image is eight hundred by eight hundred, but
Speaker 2: you're on a really big screen, the only one to
Speaker 2: zoom to that amount. So there's a lot of little
Speaker 2: things that go into it. But to wrap that initial
Speaker 2: bit back up, there's a dialogue that's invisible that gets
Speaker 2: put on the screen, and the image that we're zooming
Speaker 2: is put on top of the image that's underneath the dialogue,
Speaker 2: and then we scale it up to the viewport. And
Speaker 2: when you click on it again or press escape to
Speaker 2: get out of this modal experience, it does the opposite
Speaker 2: and puts it back down.
Speaker 1: I like the trouble shooting, like you explaining the problem
Speaker 1: and how you tackle it.
Speaker 2: A few questions. So first let's.
Speaker 1: Say that the image is very tall, so it's the
Speaker 1: height is very big. Do you always make it fit
Speaker 1: the viewboard or would you allow it to be scrollable
Speaker 1: once you once you zoom in, it always fits.
Speaker 2: It always fits the viewport, whatever that is. And so
Speaker 2: you know, whether that's a feature, I mean, that's what
Speaker 2: I made it to, but I mean whether that works
Speaker 2: for everyone or not is kind of up to them,
Speaker 2: but it is. It is a way to see one image,
Speaker 2: you know, that might be bigger than your viewport actually
Speaker 2: in the viewport, but you know, it's it just depends
Speaker 2: on what your use case is with that. And you know,
Speaker 2: there's a you know, there's a there's a use case
Speaker 2: where you scroll down and maybe you scroll past an
Speaker 2: image because it's you know, taller than your viewport and
Speaker 2: you've got a little bit of it in the window.
Speaker 2: You click on that, it comes down and it may actually,
Speaker 2: you know, if it's taller and wider, it may just
Speaker 2: shrink it so it fits into the viewport. But that's
Speaker 2: what it does, okay, okay.
Speaker 1: And the the thing that is actually being skilled up
Speaker 1: or down is just the image itself. Because the model,
Speaker 1: as you said, you you fix its dimensions because you
Speaker 1: can't think her the dimensions of the model. Uh it
Speaker 1: like you can, but then you would run into problems
Speaker 1: in a future situations. So you just fix the the
Speaker 1: dimensions of the model to be the entire view board,
Speaker 1: and then you just scal up the image that you
Speaker 1: duplicated and created inside the model.
Speaker 2: That's right. It also allows for when for pinching to
Speaker 2: zoom and panning around, so you've got to write this
Speaker 2: code for all that, because there's also code for you know,
Speaker 2: gesture like swiping as well as mouse wheel. And in
Speaker 2: the past, what I allowed for was when you would swipe,
Speaker 2: it would just scroll the page and you know, put
Speaker 2: the put the thing back, put the image back where
Speaker 2: it went to before. But that was a very difficult
Speaker 2: thing to achieve with the modal, with you know, the
Speaker 2: animation all this stuff. So what I've got now is
Speaker 2: the way that I think most models are supposed to work,
Speaker 2: where you disabled the body, the scroll on the body,
Speaker 2: and then if someone does a scrolling action, so if
Speaker 2: it's like a mouse wheel or gesture or something, it
Speaker 2: doesn't actually scroll anything, but it will make the the
Speaker 2: image on zoom that's the word I use on zoom.
Speaker 2: And then you can keep going about your business. On
Speaker 2: the page, you.
Speaker 1: Mentioned a few accessibility concerns and you mentioned like the
Speaker 1: ability to close on ask et cetera. How did you
Speaker 1: use the how did you create the model itself?
Speaker 2: The model element?
Speaker 1: Because we now have a dialogue element on HMO, I say, now,
Speaker 1: it's been there for a very long time, but I
Speaker 1: find that very few people actually use it, and a
Speaker 1: lot of people just create a div and put it
Speaker 1: on the as a child of the topmost element, sometimes
Speaker 1: the body itself, and then they position it whatsoever. Basically
Speaker 1: create a portal, right, and then you have to write
Speaker 1: all those accessibility stuff yourself from scratch.
Speaker 2: How is your approach?
Speaker 1: Did you use the div and created all the accessibility
Speaker 1: features from that or did you use a dialogue element?
Speaker 2: So my initial creation used I mean, going back to
Speaker 2: twenty sixteen, I wouldn't looked at the first handful of
Speaker 2: commits and I was doing a full React on dot
Speaker 2: render into you know, because now we have React do
Speaker 2: create portal, but create portal is essentially just saying, hey, document,
Speaker 2: create element div, add that dive to the body and
Speaker 2: put something inside of it. So that's what I was doing.
Speaker 2: But I was doing a React or sorry, React dot render.
Speaker 2: This might even be this was probably before React. It
Speaker 2: was just really like React dot render or React on
Speaker 2: that render the ad equivalences. It was rendering a whole
Speaker 2: new like React what do you call that React tree
Speaker 2: in essence, like an whole new React instance. And you know,
Speaker 2: over time I was I was using a div, and
Speaker 2: as I got more skilled and accessibility, I said, oh, okay,
Speaker 2: there's a bunch of rules here. We've got to figure
Speaker 2: this out. Because if you were just using a div,
Speaker 2: even if you use like you know, ari emodal true
Speaker 2: and roll equals dialogue on a dive, the browser is
Speaker 2: not gonna disable all of the content in the background.
Speaker 2: It's not going to hide it. So you could theoretically,
Speaker 2: you know, keep pressing tab and go down the screen,
Speaker 2: or you could use screen reader and read the content
Speaker 2: behind that, and so okay, so you've got to well,
Speaker 2: back then, what you had to do was conditionally go
Speaker 2: and put aria hidden on everything and tab index negative
Speaker 2: one on everything else, or create what's called a tab
Speaker 2: trap so that you could never tab outside of the model.
Speaker 2: Maybe it would wrap around, Well, there's not really there's
Speaker 2: not really anything to wrap around in this component. But anyway,
Speaker 2: that was a very big headache and I didn't do
Speaker 2: it right for a while. Eventually, when dialogue, when the
Speaker 2: dialogue elements became, you know, baseline generally available, I refactored
Speaker 2: to use that. But that comes with its own problems
Speaker 2: as well. So the dialogue element comes with like a
Speaker 2: placeholder overlay. It comes with its own overlay style. I
Speaker 2: don't know if it's different for browser, but it comes
Speaker 2: with some default browser style street So I didn't want
Speaker 2: that because I wanted to animate in my background. I
Speaker 2: didn't want it to be instant, so I wanted to
Speaker 2: animate in the background. I also found at the time,
Speaker 2: I think it's been it's improved a bit. If you
Speaker 2: didn't have role equals dialogue on the dialogue element, then
Speaker 2: not every browser screen reader combination would work quite like
Speaker 2: you wanted it to. Same thing with having arimodal true
Speaker 2: on there, but I mean you would need the rimodal
Speaker 2: true anyway. But the roll equals dialogue was something that
Speaker 2: needed to be added. So so I'm getting into the
Speaker 2: weeds here, but I am using the dialogue element now
Speaker 2: and I'm using a little bit of the of its
Speaker 2: internal on close. And also I think it's called it
Speaker 2: open modal or show modal, I think is what the
Speaker 2: the native API is for that. But yeah, I'm using
Speaker 2: a dialogue now and that you get all that stuff
Speaker 2: that I just talked about being a problem. You get
Speaker 2: almost all of that for free, which is great. You
Speaker 2: know with the back to the native style sheet overlay
Speaker 2: background color, but that is very simple. Like in the
Speaker 2: CSS for the project, I just disable that and I
Speaker 2: do my own sort of rendering in the component and
Speaker 2: state in the component to let me know when I
Speaker 2: should be animating something in and not transitioning something like
Speaker 2: the background in. So you can have like a white background,
Speaker 2: you can have a black background any color you want,
Speaker 2: and then that should animate in and that's all customizable
Speaker 2: if you want to change the CSS. Okay, a lot
Speaker 2: of that is just.
Speaker 1: We guess it doesn't depend a lot on React. So
Speaker 1: I wonder why didn't you separate it, or maybe already did.
Speaker 1: Why didn't in't you separated the core native functionalities in
Speaker 1: a native lib and then you just use that in
Speaker 1: the React lib because then you can also allow other
Speaker 1: frameworks to do it as well.
Speaker 2: So I spent a lot of time in maybe twenty
Speaker 2: twenty nineteen trying to do that. So I renamed the
Speaker 2: project from React Medium image Zone to just you know,
Speaker 2: get hub, Slack, our peers, image zoom, and I had
Speaker 2: a branch in there where I was, you know, doing
Speaker 2: it as a mono rico, so I was. My plan
Speaker 2: was to have a core Vanilla das library and then
Speaker 2: have React and get some of my friends that know
Speaker 2: view and you know, Angular and whatever to create rappers
Speaker 2: for it, so then you could have packages for each one.
Speaker 2: And now we've got the core functionality, which is all
Speaker 2: native stuff all sorted out, and then you've got wrappers
Speaker 2: for each each framework, each environment, whatever people need. That
Speaker 2: was a great plan and I started doing that and
Speaker 2: I thought I'd settled on an API, but it kind
Speaker 2: of fizzled out. I worked on it for a couple
Speaker 2: of weeks while on vacation, which was probably not how
Speaker 2: I should have spent my vacation, but it you know,
Speaker 2: maybe this was early twenty twenty. I forget it might
Speaker 2: have been. It might have been the beginning of covid,
Speaker 2: but you know that I worked on that, found an API,
Speaker 2: but then I ran into issues. The code was getting
Speaker 2: kind of ugly and it fell to the side, and
Speaker 2: I left it for a while. I came back and
Speaker 2: looked at it, and I just I wasn't satisfied. So
Speaker 2: I ring in with the.
Speaker 5: Project, back to React Medium Image Zoom, and what I
Speaker 5: wanted to do was fix a few things, add a
Speaker 5: few features, and then see where the project was and
Speaker 5: if it.
Speaker 2: Made sense and if I had the time. Then started
Speaker 2: thinking about something else, and I started to realize that
Speaker 2: I maybe just pure vanilla JS wasn't the way I
Speaker 2: wanted to go, and so I kind of held off
Speaker 2: on that. And I'll come back to that in just
Speaker 2: a second. So what I did is I started working.
Speaker 2: At the time, it was version four, and what version
Speaker 2: four did is very different than what it does right now.
Speaker 2: So what it does right now was kind of like
Speaker 2: is builds on top of version three. But version four
Speaker 2: I had this moment where I thought, wouldn't it be
Speaker 2: cool if whatever someone puts inside of the Zoom components
Speaker 2: we just zoomed that. It doesn't matter what it is, anything, texts,
Speaker 2: you know, gives that have shapes, whatever it is. Take
Speaker 2: the bounding box of that, what of that stuff that
Speaker 2: is inside the zoom component, you know, a child of
Speaker 2: the zoom component and just zoom that up to the top.
Speaker 2: My problem, My problem with that was, well, how do
Speaker 2: you have a button? Oh gosh? And so what I
Speaker 2: did is I put a button that covered the entire
Speaker 2: image so that when you click on it, you're clicking
Speaker 2: on a button. But then there was there was. I
Speaker 2: just had a bunch of issues that I ran into,
Speaker 2: and I wanted to directify these for this version five thing.
Speaker 2: And I wanted to also do something that I don't
Speaker 2: know if anyone else has done, which is support every
Speaker 2: type of support every type of image that you can
Speaker 2: think of, which is, like I said before, images with
Speaker 2: object fit, object position loading equals lazy doing. Uh was
Speaker 2: it a ACNC loading for it as well? You know
Speaker 2: divz that have a background image, background size, background position,
Speaker 2: you know, making sure that any picture with whatever the
Speaker 2: source is, figures, SPGs, you name it. I wanted all
Speaker 2: of these things to work because I wanted this for
Speaker 2: myself and I've seen other people asking about that in
Speaker 2: the past. So instead of just doing the vanilla thing,
Speaker 2: I readd this over a long period of time. In
Speaker 2: version five, I spent many nights. Unfortunately, you know, my
Speaker 2: wife will My wife said she'll listen to this, even
Speaker 2: though she doesn't care about programming. But I spent many nights,
Speaker 2: you know, after she went to bed on the couch,
Speaker 2: losing sleep, getting way less than I should, trying to
Speaker 2: figure out the math behind Okay, if I haven't image element,
Speaker 2: but I've got object fit contained, and the image is
Speaker 2: technically it looks like it's scaled down, and you know,
Speaker 2: like if you were to look at it in the
Speaker 2: Web Inspector, you would see, you know, like a blue
Speaker 2: box around the entire image element, but the actual thing
Speaker 2: you see is smaller within that. So I spent a
Speaker 2: lot of time trying to figure out the exact math
Speaker 2: that browsers use to scale that down based on a
Speaker 2: lot of different things, based on the image, the native
Speaker 2: sort of that was the natural width and height of
Speaker 2: the image. How much space does it have to work with?
Speaker 2: What is the object position? You know, object position can
Speaker 2: be pixels, it can be twenty five percent, seventy five percent,
Speaker 2: you name it. There's all these different scenarios. How do
Speaker 2: we put an image on top of that? In the
Speaker 2: moddle to scale that up and make it look like
Speaker 2: it's one seamless experience where you just click and it
Speaker 2: gets big and click again and it gets small. So
Speaker 2: spent a lot of time on that, and that's where
Speaker 2: I got to dispersion five. And now that things have
Speaker 2: kind of slowed down, I've got most of the features
Speaker 2: that I need. Some still some bugs here and there,
Speaker 2: but most of the features that I need. That's where
Speaker 2: I think is it good spot to start to stop
Speaker 2: and say, do I have the time to think about
Speaker 2: making this maybe into the web component? So yeah, I'm
Speaker 2: not there yet, but I have two young you know,
Speaker 2: two young daughters, and so I don't really have that time.
Speaker 2: And I have many other interests as well, for open
Speaker 2: source things and little tools that I want to exist.
Speaker 2: But that's where I am now.
Speaker 1: Yeah, that does make a lot of sense. I was
Speaker 1: actually asking it because I was personally interested because I
Speaker 1: use Angular a lot, and I really liked the library
Speaker 1: that you create them, and I think it's a it's
Speaker 1: a great project.
Speaker 2: It's like that.
Speaker 1: Thing that you can easily reuse.
Speaker 2: For other projects whatever, whatever.
Speaker 1: You have a place where you are showing images.
Speaker 2: I think most blocks could benefit from it.
Speaker 1: Honestly, they all could and should have this functionality. It's
Speaker 1: a really nice functionality. So I would love being a
Speaker 1: which you use this in other projects that are not
Speaker 1: React based, Yeah, I completely understand your your context, and honestly,
Speaker 1: just the fact that this exists in React, there's already
Speaker 1: a blessing on its own, so nothing to complain on that.
Speaker 1: Crazy to see to understand the complexity of it, right,
Speaker 1: because once you look at it, you think, okay, like
Speaker 1: I would be able to do it real quick, like
Speaker 1: a day's work, but then you see, oh no, there
Speaker 1: are so many details, like, oh my god, really hard
Speaker 1: to do that, really well. I also noticed, on the
Speaker 1: at least on the first storybook example, that the image
Speaker 1: already starts with the WIT fully expanded, And do you
Speaker 1: have a way to customize that so that it actually
Speaker 1: starts with the WIT that is being shown and then
Speaker 1: it expands from it, you know, like if you have
Speaker 1: an example where you're just showing a little window of it,
Speaker 1: then it starts with that, and as it grows, that
Speaker 1: expends the rest of the image, and once it closes,
Speaker 1: it closes the same way.
Speaker 2: Yeah, kind of, And it's it's not one hundred percent seamless.
Speaker 2: But so in the examples, there's a div image gallery
Speaker 2: where you can change the aspect ratio And this is
Speaker 2: on the storybook examples, and so you can change an
Speaker 2: athlete ratio from sixteen nine to four x three and
Speaker 2: that changes the shape of the you know, of the
Speaker 2: div that the image is a background image of. And
Speaker 2: what the way that it works is it figures out, okay,
Speaker 2: is it background size cover, is it background size contained?
Speaker 2: You name it? And then when it does the like
Speaker 2: consuming for a background uh background cover, Well, what it'll
Speaker 2: try to do is say, okay, is the image itself
Speaker 2: bigger than its container? If so, when we put that,
Speaker 2: when we put that, imagine a model on top, try
Speaker 2: to take that into account to represent exactly what the
Speaker 2: image in OA. So I don't have a way right
Speaker 2: now of unfurling like a flag unfurls, unfurling the edges
Speaker 2: as it zooms to get bigger. What it does right
Speaker 2: now is it puts the image on top of where
Speaker 2: that one is at the original sorry, with the original
Speaker 2: images like full dimensions. So let's say you've got a
Speaker 2: really really really tall image, but it's in a square
Speaker 2: and with background size cover, it will mean sorry, you
Speaker 2: might hear children in the background. Now, you know, instead
Speaker 2: of just zooming that, instead of just zooming that you know,
Speaker 2: displayed box that's on the screen, which is what I
Speaker 2: did in version four. What it does it will zoom
Speaker 2: the original image and make it try to make it
Speaker 2: look seamless. But what it does is it will if
Speaker 2: you've got that little box, it'll put the image on
Speaker 2: top of that box and then zoom it. If I
Speaker 2: had a way to sort of like I said, unfuril
Speaker 2: or like slowly reveal part of the image, then like
Speaker 2: I would, I would totally accept contributions for that to
Speaker 2: make it seem like it's just growing out from the box.
Speaker 2: That would be great. Alas I don't have the I
Speaker 2: don't have a good idea for how to do that.
Speaker 1: Reliably, gotcha, Yeah it does. It's way more complex when
Speaker 1: you when you say it all out with all the details.
Speaker 2: Yeah, okay, oh yeah. Many nights were lost to to
Speaker 2: just going cross I trying to figure out, you know,
Speaker 2: the the right calculation to make this MAW sense for
Speaker 2: every use case possible, which by the way, not everyone
Speaker 2: has that use case. And so another thing that would
Speaker 2: be good long term for this project is like right now,
Speaker 2: I think bundled and menified in jesip it's like four
Speaker 2: point eighty nine kilabytes. But that's to me is still
Speaker 2: too large. I would prefer to potentially have, well, I
Speaker 2: guess that's that's the whole package. That's the whole package.
Speaker 2: I would prefer to have different components that include increasing
Speaker 2: amounts of complexity, so that when you know you only
Speaker 2: have one base case, that's maybe I have a regular image,
Speaker 2: nothing special. I only want the code for that, so
Speaker 2: that tree shaking would eventually tree shake away everything that's
Speaker 2: that's not being used, so that you get the bare minimum,
Speaker 2: the bare minimum stuff that you need right now, the
Speaker 2: logic for figuring out all of the magic that goes
Speaker 2: into you know, like I said, the objects fit the
Speaker 2: background images. All of that is mixed in with the
Speaker 2: other code to try to figure out, Okay, what kind
Speaker 2: of image is it, how big do I make it
Speaker 2: on the screen, what other styles so I need to apply?
Speaker 2: What kind of transformal kind of scale? All of that
Speaker 2: is new together. I think it'd be really need eventually
Speaker 2: to separate all that so that people's actual bundle size
Speaker 2: and impact would just be less. I wouldn't. I wouldn't
Speaker 2: do those as like separate packages. I feel like that's
Speaker 2: a bit much, But if I could tree shake out everything,
Speaker 2: that would be awesome.
Speaker 1: Gotcha, gotcha? Okay, all right, dude, I'm really enjoying this
Speaker 1: conversation honestly, Like I am very curious about this, and
Speaker 1: I'm liking the intricacies of how you got to But
Speaker 1: I realize that we have been talking for more than
Speaker 1: forty minutes already, so I apologize the audience. I think
Speaker 1: you should maybe start wrapping up. Is there anything that
Speaker 1: you'd like to say before we start wrapping.
Speaker 2: Up in general about the about the project?
Speaker 1: Yeah, it could be about the project, like anything maybe
Speaker 1: that I didn't ask or we didn't cover, but that
Speaker 1: you feel is interesting enough they should be mentioned. Uh.
Speaker 2: I did just remember that I didn't answer your question
Speaker 2: about the transitions and stuff. I could answer that real quickly.
Speaker 2: I don't know how that would work accessibility wise. That's
Speaker 2: my only concern. I would love, for, like any for
Speaker 2: anything I make, for there to be some sort of
Speaker 2: native way to do that so that so that my
Speaker 2: project doesn't have to exist anymore. I think that that's
Speaker 2: not the end goal for some of my all of
Speaker 2: my works, is I want it to be made so
Speaker 2: that it's not needed anymore, because you know, maintaining something
Speaker 2: and it takes effort, it takes time. You know, it's
Speaker 2: an it's extra and extra dependency that someone has to
Speaker 2: maintain themselves and say, oh did Robert break something? Oh
Speaker 2: do I actually want this upgrade? You know, it's a
Speaker 2: lot of work overall. So if the if the browsers
Speaker 2: could come up with something, I doubt they I thought
Speaker 2: they would for this, But if they had something that
Speaker 2: would be great, if few transitions could solve this easily,
Speaker 2: I would happily, happily, you know, deprecate this and say
Speaker 2: it's in maintenance mode, but we're not. I don't know
Speaker 2: if it's very yet. Okay, yeah, that doesn't make sense.
Speaker 1: I think that's a that's a good end go. When
Speaker 1: you're creating something that you want to be flexible engineeric enough,
Speaker 1: it's going to be tough for browsers to actually implement
Speaker 1: it with the love of customization. That's like it's a
Speaker 1: very specific feature, but who knows. They have implemented a
Speaker 1: few niche stuff in the past that.
Speaker 2: Maybe it turns out. Yeah, man, okay, awesome.
Speaker 1: And Peter, do you have any questions, notes, anything else
Speaker 1: you want to say before start wrapping?
Speaker 2: Up.
Speaker 3: Yeah, so I think my question of the work components
Speaker 3: side too. I think I probably wanted to get an
Speaker 3: idea of why you actually use a web component, the
Speaker 3: aspect of it's maybe just for you as maybe for
Speaker 3: people in the wonder worlds components.
Speaker 2: How did that? Yeah, I think so. The reason I
Speaker 2: want to go with I think I want to go
Speaker 2: with a web component is I I hold this you know,
Speaker 2: potentially spicy idea close to my heart. That is, the
Speaker 2: further away you get from a core technology, the harder
Speaker 2: something is to maintain. And with a web component, what
Speaker 2: I see there is something that is you know, native
Speaker 2: to the web. You know, it's it's it's gotten a
Speaker 2: lot more support in the last couple of years. I
Speaker 2: think that if you think about web components not in
Speaker 2: the same way as you do a React component, where
Speaker 2: you've got you know, the tree of components that have
Speaker 2: render cycles and everything, but if you think of them
Speaker 2: as a decorator, something that you know, really enables progressive enhancement,
Speaker 2: then I think this is something that fits perfectly there
Speaker 2: where I've got an image, if I'm rendering something, rendering something,
Speaker 2: you know, on the server, I don't need all this
Speaker 2: extra stuff. I don't need all this extra stuff around
Speaker 2: but you know, clicking and zooming and all that. It's
Speaker 2: just an image. And if someone's got JavaScript disabled, which
Speaker 2: like I do for by default on every site I
Speaker 2: go to, I enable it if the site doesn't work.
Speaker 2: But for people that have JavaScript disabled, like, they shouldn't
Speaker 2: be you know, impacted negatively. So they should be able
Speaker 2: to use my imageym library or form or whatever you know,
Speaker 2: without extra passle. And so if I use this, if
Speaker 2: I make this into a web component, it can be
Speaker 2: something that you know, people fetch however they want through
Speaker 2: m PM, through a CDN whatever, And if they up
Speaker 2: their image in this web component, then they'll get that
Speaker 2: extra decoration, that extra functionality, but it's something that's not
Speaker 2: critical to how their do. Like, I don't want to
Speaker 2: make it, make a change and block somebody's you know,
Speaker 2: next build, or give them warnings or errors because you know,
Speaker 2: I included a document or a window reference, you know,
Speaker 2: that kind of thing. So I'd rather just be able
Speaker 2: to be applied to any framework anywhere. That's why I'm
Speaker 2: thinking about component. Yeah, I think it would.
Speaker 1: Be nice to have them, all right, men, So let's
Speaker 1: do a quick round of promos and then we can
Speaker 1: wrap it up. So you are a very humble person
Speaker 1: given all the work that you have put in out like,
Speaker 1: but I do think that maybe there could be something
Speaker 1: that we can promote from from what you're doing, at
Speaker 1: least your website. I think you have some really valuable
Speaker 1: content there. But yeah, is there anything that you'd like
Speaker 1: to promote to the audience, Maybe some material for an
Speaker 1: empty go look at on their own time.
Speaker 2: Yeah. Sure, So I've got to my website. The short
Speaker 2: ur l for it. It's just RWP dot I m and
Speaker 2: or Robert W. Pierce dot com. And you know, I
Speaker 2: I've got a number of a number of blog posts
Speaker 2: on there, from you know, Haskell to functional programming and
Speaker 2: JavaScript with Randa and you know, rewriting things like you know,
Speaker 2: like map functions and you know, like like a rate
Speaker 2: up prototype dot map and then going just off the
Speaker 2: rails with that. But most of the content I've written
Speaker 2: on there is because it's something that I've explained or
Speaker 2: had or worked too, you know, help level somebody else
Speaker 2: up on. And I thought, oh this, maybe not just
Speaker 2: write this down because I've explained this five times. So
Speaker 2: if somebody listening to this has you know, React, typescript, JavaScript, Bash,
Speaker 2: you know Haskell specifically Hackle, the static side generator, which
Speaker 2: my side is built with. If people have any you know,
Speaker 2: take a look at my side and say, well, I
Speaker 2: would love to know more about X. I have no clue,
Speaker 2: send me an email, you know, contact me somehow and
Speaker 2: I will. I'll write something up and we can make
Speaker 2: a blog post about it and you can read about
Speaker 2: it and we can share it with the world. So
Speaker 2: I'm I'm happy to share whatever I can and you know,
Speaker 2: learn a few things along the way myself. Awesome.
Speaker 1: Awesome, all right, yeah, and I do think there are
Speaker 1: a lot of interesting content out there that you created
Speaker 1: to would definitely recommend the audience to go check out
Speaker 1: some of your other posts. Whereas for me, I'm just
Speaker 1: gonna mention the two companies that produce the show. Again,
Speaker 1: So if you're interested in all the subjects besides React,
Speaker 1: Top and depths that has a lot of other podcasts
Speaker 1: as well. I host myself a podcast about a are
Speaker 1: but there are others as well, So definitely check out
Speaker 1: top and depths if you want to explore some other
Speaker 1: technology topics. And if you are a company or you
Speaker 1: know someone that is looking for staff augmentation or outsourcing
Speaker 1: particular project, would definitely recommend checking out on Void. Is
Speaker 1: you and v O I d like on the opposite
Speaker 1: Void dot com. They have this really interesting business model
Speaker 1: that is very very client from client friendly, Like clients
Speaker 1: don't have to pay by the hour, which tends to
Speaker 1: be a huge problem for them because things usually go
Speaker 1: over time and over budget and then they lose their predictability.
Speaker 2: But yeah, do definitely check out.
Speaker 1: On Void dot com if you're if you know someone
Speaker 1: that has the problems with traditional agency models and it's
Speaker 1: looking to explore something different.
Speaker 2: So yeah, to me, it's going to be just that,
Speaker 2: how about you, Peter?
Speaker 3: Also for me more see more, I just want to
Speaker 3: piece the course on what company since that was the
Speaker 3: idea of behind the packy as we are.
Speaker 2: I think my the.
Speaker 3: Course is about the building and like like simple projectism,
Speaker 3: it's loose leads, So yeah, I think it goes worre
Speaker 3: checking out since yeah, I think work Companies was just
Speaker 3: in this party. It's really really hopeful for the users
Speaker 3: actually have an idea of what the components. I'll usually
Speaker 3: help in developments.
Speaker 1: Yeah, awesome, awesome, all right, Uh well, Robert, thank you
Speaker 1: so much for taking the time to be here. We
Speaker 1: I mean, I really appreciate you taking up the time
Speaker 1: and the end of the day, you have a lot
Speaker 1: of other contents, so I feel free to hit me
Speaker 1: up whenever you want and we can schedule another one.
Speaker 2: I will. I will look you up.
Speaker 1: On LinkedIn and connect with you, so I feel free
Speaker 1: to reach me out there if you want to hop again.
Speaker 1: And yeah, man, really appreciate at the beginning you said
Speaker 1: this was your first podcast. I gotta say you handle
Speaker 1: it very well. I really like your genetics. I think
Speaker 1: you you're a great at this man, So yeah, do
Speaker 1: check out some others.
Speaker 2: I think you have the you have a.
Speaker 1: Way for this kind of of content and for the audience.
Speaker 2: Thank you so much for sticking with us for so long.
Speaker 2: This was definitely a long one. I hope you learned
Speaker 2: a lot from it. I know I did. Thanks a lot.