WEBVTT 1 00:00:05.360 --> 00:00:08.800 Hey, Welcome to React around Them the podcast really keep 2 00:00:08.839 --> 00:00:12.519 you updated on all things reacting label. This show is 3 00:00:12.560 --> 00:00:15.759 sponsored by ray Gun and produced by Top and Devs 4 00:00:15.880 --> 00:00:18.800 and Void. Top and Devs is very create Top and 5 00:00:18.839 --> 00:00:21.239 deves to get top and pay and recognition. We're working 6 00:00:21.280 --> 00:00:25.800 on interesting problems and making meaningful community contributions. And Void 7 00:00:26.440 --> 00:00:30.559 is a company that provides the most client friendly business 8 00:00:30.640 --> 00:00:36.479 model for software outsourcing. With Onvoid, clients can higher design 9 00:00:36.560 --> 00:00:40.679 and software development services and only pay once the task 10 00:00:40.799 --> 00:00:42.799 is delivered and improved. 11 00:00:43.640 --> 00:00:45.840 In today's episode, we will. 12 00:00:45.719 --> 00:00:49.759 Talk about React Medium image Zoom, which is a library 13 00:00:49.840 --> 00:00:53.039 that allows you to create the same effect that Medium 14 00:00:53.159 --> 00:00:57.399 pass with their images, that allows you to basically click 15 00:00:57.439 --> 00:00:59.840 on an image and it zooms up and takes up 16 00:00:59.840 --> 00:01:06.000 your entire screen in a battery nice animation, smooth animation, 17 00:01:06.280 --> 00:01:08.599 and then you can just go back to your navigation 18 00:01:08.719 --> 00:01:13.159 afterwards and put damage back where it once was. So 19 00:01:13.239 --> 00:01:16.079 if you like that effect that Medium has and you 20 00:01:16.159 --> 00:01:18.239 want to have it on your website or on your 21 00:01:18.280 --> 00:01:21.799 rap application, today we're going to be talking about this 22 00:01:22.120 --> 00:01:25.760 library and some other things related to the creator of 23 00:01:25.840 --> 00:01:29.280 this library, So let me introduce him. But first, my 24 00:01:29.359 --> 00:01:32.319 name is Lucas Paganini, your host in the podcast, and 25 00:01:33.560 --> 00:01:37.719 joining me in today's episode is also the host Peter Ossa. 26 00:01:39.439 --> 00:01:43.959 Hi everyone, now our very special guest that I was 27 00:01:44.040 --> 00:01:49.079 just mentioning the creator of this library, Robert Pierce, which 28 00:01:49.680 --> 00:01:53.760 is a software engineer working professionally for over thirteen years. 29 00:01:53.840 --> 00:01:57.599 We'll focus on JavaScript and typescript, but also interested in 30 00:01:57.599 --> 00:02:03.159 some other cool things such Haskell, Rust and of course, 31 00:02:03.480 --> 00:02:07.519 as all good developers are really nice, interesting functional programming. 32 00:02:08.120 --> 00:02:11.400 He was also a teacher at a few coding book 33 00:02:11.400 --> 00:02:15.439 camps and also spoke at meettubs conferences and has been 34 00:02:15.599 --> 00:02:20.400 using reacts since twenty thirteen. He also contributes a lot 35 00:02:20.479 --> 00:02:22.639 to open source, so if you enjoy this library, make 36 00:02:22.680 --> 00:02:26.639 sure to check out his GitHub sponsor page and help 37 00:02:26.719 --> 00:02:29.520 him out so we can keep this awesome project up 38 00:02:29.520 --> 00:02:32.120 and running. Robert, thank you so much for being on 39 00:02:32.159 --> 00:02:32.520 the show. 40 00:02:34.280 --> 00:02:36.280 Thanks for having me, Lucas. 41 00:02:36.919 --> 00:02:41.680 Awesome Robert. Let's just get to it, man. I try 42 00:02:41.719 --> 00:02:44.919 to give a really quick pitch about the library, but 43 00:02:46.080 --> 00:02:48.639 do you want to extend it a bit further? Are 44 00:02:48.680 --> 00:02:52.319 there any specific details about the library that I think 45 00:02:52.360 --> 00:02:55.680 it's relevant for our audience to be aware of before 46 00:02:55.719 --> 00:02:59.479 we dive into how you built it and how it works. 47 00:03:01.479 --> 00:03:04.960 Yeah, I think it's it's important to you know, talk 48 00:03:05.000 --> 00:03:08.719 about how a project that is, I guess eight years 49 00:03:08.719 --> 00:03:11.639 old now, you know, can drift a little bit. And 50 00:03:11.680 --> 00:03:13.960 so it started out trying to be a clone of 51 00:03:14.000 --> 00:03:16.520 what Medium was doing. And then as time went on 52 00:03:16.680 --> 00:03:19.639 and based on you know, what we could do in 53 00:03:19.639 --> 00:03:23.039 the browser, all the different things we have access to now, 54 00:03:23.199 --> 00:03:28.120 like you know, picture elements, and you know, all the 55 00:03:28.120 --> 00:03:32.319 different scenarios people might have with wanting to zoom divs 56 00:03:32.319 --> 00:03:36.960 with background images or you know objects fit and pain cover, 57 00:03:37.479 --> 00:03:41.520 object position, all these different possibilities. You know, where the 58 00:03:41.520 --> 00:03:44.159 project is now is you know, it's drifted a little 59 00:03:44.159 --> 00:03:46.800 bit from how the exact one on Medium feels, but 60 00:03:47.879 --> 00:03:50.800 I think it still maintains the essence. Awesome. Yeah, that 61 00:03:50.840 --> 00:03:51.599 doesn't make sense. 62 00:03:51.680 --> 00:03:55.719 And and that's a long time, like eighty years maintaining that. 63 00:03:56.400 --> 00:04:00.479 First off, congrats for maintaining, because a lot of open 64 00:04:00.520 --> 00:04:03.719 source projects they just get abandoned in a way shorter 65 00:04:03.840 --> 00:04:08.439 period of time. I do want to know, what do 66 00:04:08.479 --> 00:04:12.560 you think was the success of this project being maintained 67 00:04:12.560 --> 00:04:15.479 for so long? Were you able to find other maintainers? 68 00:04:15.520 --> 00:04:18.319 Are you the solo meting journey, Like, what advice could 69 00:04:18.319 --> 00:04:23.439 you give to other people thinking of maintaining or creating 70 00:04:23.879 --> 00:04:25.160 open source projects. 71 00:04:25.399 --> 00:04:29.199 That's a great question. So a bit of it so 72 00:04:29.199 --> 00:04:32.279 that it's too it's twofold. For me, I think it's 73 00:04:32.319 --> 00:04:36.160 partially the people who help contribute to it, which can 74 00:04:36.240 --> 00:04:39.120 take the form of just people using it and raising issues. 75 00:04:39.639 --> 00:04:42.360 I can take the form of people wanting to solve 76 00:04:42.399 --> 00:04:44.920 some of the issues, as well as some people who 77 00:04:45.000 --> 00:04:47.879 just have ideas that they think could could help and 78 00:04:47.959 --> 00:04:50.199 they are willing to talk that through with you. So 79 00:04:50.279 --> 00:04:53.680 that's one aspect of it. And the other aspect for 80 00:04:53.800 --> 00:04:57.360 me was, Hey, this hobby project that I thought was 81 00:04:57.399 --> 00:04:59.959 cool and that I kind of wanted for my own thing. 82 00:05:00.000 --> 00:05:04.759 Things started to become popular and then it not being 83 00:05:05.720 --> 00:05:09.399 you know, perfect or really exactly what I needed all 84 00:05:09.439 --> 00:05:11.399 the time, or maybe I didn't like some of the code, 85 00:05:11.480 --> 00:05:16.800 or I got more educated, I got more skilled at 86 00:05:16.879 --> 00:05:20.160 react or a JavaScript or was something. It started to 87 00:05:20.160 --> 00:05:23.839 be something that I knew people were going to look at, 88 00:05:24.920 --> 00:05:26.600 and so I wanted it. I wanted to be proud 89 00:05:26.639 --> 00:05:29.439 of it, and so that's something that kept me coming 90 00:05:29.480 --> 00:05:31.439 back is like, this is a kind of like a 91 00:05:31.560 --> 00:05:34.480 like a people have like dot file gardens or like 92 00:05:34.560 --> 00:05:39.040 code gardens. This was my like react code garden that 93 00:05:39.120 --> 00:05:41.759 I is something that I could keep tending to and 94 00:05:41.839 --> 00:05:45.519 as I grew in skill, I could then apply that 95 00:05:45.560 --> 00:05:50.279 skill to the product. So yeah, I think having a 96 00:05:50.560 --> 00:05:53.000 supportive community of people that use it and want it 97 00:05:53.040 --> 00:05:56.480 to get better. Plus you know, knowing that this is 98 00:05:56.519 --> 00:05:58.839 something that you're putting out into the world and wanting 99 00:05:58.879 --> 00:06:02.879 that to reflect you know, your skill and your attention 100 00:06:02.920 --> 00:06:05.920 to detail. I think those things made this project what 101 00:06:06.040 --> 00:06:09.000 it is today. I like that. I like that very much. 102 00:06:09.120 --> 00:06:13.319 Like think about it as a place where you can 103 00:06:14.160 --> 00:06:17.560 output your growth as a developer and kind of like 104 00:06:17.759 --> 00:06:22.480 look back onto it and keep rebuilding it, just literally 105 00:06:22.759 --> 00:06:26.360 rewriting it as you gain more and more knowledge and 106 00:06:26.439 --> 00:06:28.959 you feel that you are able to do a better job. 107 00:06:29.720 --> 00:06:30.959 I like that interesting. 108 00:06:32.199 --> 00:06:38.279 And but with regards to other contributors, were you able 109 00:06:38.319 --> 00:06:42.759 to like create this net and how is that or 110 00:06:43.199 --> 00:06:44.800 or is it actually mainly you. 111 00:06:45.040 --> 00:06:49.959 The main contributor. It's definitely mainly me, And I think 112 00:06:49.959 --> 00:06:53.079 that's something. So something that's important to remember over time 113 00:06:53.160 --> 00:06:56.959 is that, like when people get involved with open source projects, 114 00:06:57.360 --> 00:06:59.519 it might be. I mean, it might be on a 115 00:06:59.720 --> 00:07:03.160 one off basis, or you know, at best, it's probably 116 00:07:03.199 --> 00:07:05.800 on a temporary basis. You know, asking people to show 117 00:07:05.879 --> 00:07:09.360 up for something that they don't get paid for is 118 00:07:09.399 --> 00:07:12.639 a is a big ask, and it gets harder and 119 00:07:12.680 --> 00:07:15.839 harder as people you know, you know, change jobs. Maybe 120 00:07:15.879 --> 00:07:19.000 they had an easier they have more time, more free 121 00:07:19.000 --> 00:07:21.800 time with their job before, maybe the new job is 122 00:07:21.879 --> 00:07:25.560 more demanding, maybe their life scenarios change, or maybe they 123 00:07:25.639 --> 00:07:30.160 just you know, they're not interested in contributing anymore. And 124 00:07:30.199 --> 00:07:33.160 so I've had a handful of people that have been 125 00:07:33.879 --> 00:07:37.920 over the over the years during different time periods we're 126 00:07:38.160 --> 00:07:42.319 super helpful with they're you know, testing things out, coming 127 00:07:42.399 --> 00:07:46.839 up with ideas, contributing some code. But eventually that would 128 00:07:46.920 --> 00:07:50.279 kind of is allowed. But in a way that's okay, 129 00:07:50.800 --> 00:07:52.879 where it's like, okay, you know, we we got through 130 00:07:52.920 --> 00:07:56.680 this thing. I really appreciate your time. Thank you so much. 131 00:07:56.839 --> 00:07:59.160 You know, you're a contributor. You're in the read me 132 00:07:59.279 --> 00:08:02.560 and they all contributs section, and every now and then 133 00:08:02.600 --> 00:08:06.920 I might try to ping them on, you know, an 134 00:08:06.920 --> 00:08:09.000 issue or pull request and say, you know, hey, have 135 00:08:09.040 --> 00:08:14.279 you experienced this as well? But you know, these things 136 00:08:14.920 --> 00:08:17.839 can be a little bit temporary, and so that's what 137 00:08:17.839 --> 00:08:20.160 I've tried to do, is like, if someone's asking a question, 138 00:08:20.600 --> 00:08:23.319 try to respond as immediately as I can. If I 139 00:08:23.319 --> 00:08:25.160 can't fix the issue for a long time, which is 140 00:08:25.199 --> 00:08:27.480 sometimes the case, you know, I'll try to check back 141 00:08:27.480 --> 00:08:29.839 in periodically and say, hey, I haven't forgotten about this. 142 00:08:29.959 --> 00:08:33.679 I haven't forgotten about you. The person who's right, you know, 143 00:08:34.279 --> 00:08:37.440 putting yourself out there to raise an issue online, and 144 00:08:37.480 --> 00:08:38.919 so I'm trying to do that. I try to be 145 00:08:39.039 --> 00:08:42.559 kind to everyone, but it doesn't mean I can always 146 00:08:42.559 --> 00:08:45.200 solve the issue quickly, but I can respond quickly, and 147 00:08:45.240 --> 00:08:47.519 that I think that keeps people coming back. And I 148 00:08:47.559 --> 00:08:53.519 think open source projects that are clear with where the 149 00:08:53.559 --> 00:08:55.679 project is and where it's going, like is it active, 150 00:08:56.600 --> 00:08:58.879 is it? Is this something you're not going to fix? 151 00:09:00.039 --> 00:09:01.960 Can you just respond to them and just say, hey, 152 00:09:02.039 --> 00:09:04.519 I don't have time for this right now. Stuff like 153 00:09:04.559 --> 00:09:08.120 that will I think be useful in maintaining some sort 154 00:09:08.159 --> 00:09:11.279 of community, even if that community isn't involved very often. 155 00:09:12.039 --> 00:09:14.360 Yeah, that does make sense, like thinking about the people 156 00:09:14.360 --> 00:09:17.600 there are submitting issues and just using it as contributors 157 00:09:17.639 --> 00:09:21.960 as well. And in a way that that is very true, 158 00:09:22.000 --> 00:09:24.840 Like they're giving feedback on what they seem is missing, 159 00:09:24.879 --> 00:09:28.080 So in a way they're definitely contributing as well and 160 00:09:28.320 --> 00:09:32.000 helping you make better decisions for the future of the product. 161 00:09:32.519 --> 00:09:33.240 That's nice. 162 00:09:33.639 --> 00:09:38.120 Okay, I would like to get into the intricacies of 163 00:09:38.200 --> 00:09:42.320 how the code actually works. But before, Peter, do you 164 00:09:42.360 --> 00:09:45.039 have any anything you want to say? 165 00:09:45.519 --> 00:09:45.799 Question? 166 00:09:46.279 --> 00:09:46.480 Yeah? 167 00:09:46.600 --> 00:09:49.360 Well, I think I have one question on its on 168 00:09:50.000 --> 00:09:56.559 the basis of like maintain also like maintaining the open 169 00:09:56.639 --> 00:10:00.279 source project right too, or that maybe you're kind though 170 00:10:00.759 --> 00:10:04.960 primarily the meaningful enough for that, or like you have 171 00:10:05.120 --> 00:10:09.679 like you have into the prog that maybe, for example, 172 00:10:10.440 --> 00:10:13.200 if you are most available kind of like assign it to. 173 00:10:13.240 --> 00:10:19.480 So so like Yeah, I couldn't quite make out the 174 00:10:19.480 --> 00:10:22.159 full question, so I'll try to repeat it. Was it 175 00:10:22.200 --> 00:10:27.360 about if I'm too busy and assigning issues to other people? Yeah? Yeah, yeah, 176 00:10:27.399 --> 00:10:27.799 yeah yeah. 177 00:10:27.840 --> 00:10:30.679 Do you have like your system that helps you maybe 178 00:10:31.000 --> 00:10:35.240 if you're kind of engaged, maybe you can't actually work 179 00:10:35.279 --> 00:10:38.360 on that issue and connacally signed with so on like 180 00:10:38.919 --> 00:10:39.320 you have that. 181 00:10:40.159 --> 00:10:44.799 Yeah, I've not had too much luck with that. One 182 00:10:44.840 --> 00:10:48.320 thing I've tried before was during hactober Fest, but I 183 00:10:48.320 --> 00:10:50.360 think was it. I think it's Digital Ocean puts that 184 00:10:50.399 --> 00:10:55.679 on in October or yeah, in October. And I've you know, 185 00:10:55.759 --> 00:10:58.919 labeled some issues as hactober Fest before, and I think 186 00:10:58.960 --> 00:11:01.360 it was a few years ago. I had one or 187 00:11:01.360 --> 00:11:04.320 two issues get picked up, and I tried to write 188 00:11:04.320 --> 00:11:09.080 the issues as to make it as clear and plain 189 00:11:09.120 --> 00:11:11.720 as I could about what the issue is, where I 190 00:11:11.720 --> 00:11:15.440 think the problem or the solution may be in the code, 191 00:11:16.120 --> 00:11:18.559 what the expected outcome would be, And a few of 192 00:11:18.600 --> 00:11:21.159 those have been picked up, but right now, I mean 193 00:11:21.200 --> 00:11:24.360 it's mostly just me. I don't really have anyone to 194 00:11:24.360 --> 00:11:28.039 turn to. Even some people I still work with that 195 00:11:28.120 --> 00:11:31.240 have contributed to the project, you know, they've got other 196 00:11:31.279 --> 00:11:35.120 things going on. So if an issue comes up, it's me. 197 00:11:35.799 --> 00:11:39.120 I can I can ask people. You know. What I 198 00:11:39.159 --> 00:11:41.639 do in the issues is if there's something that comes up, 199 00:11:42.480 --> 00:11:44.840 you know, I will ask them to please provide some 200 00:11:44.879 --> 00:11:49.720 sort of reproduce reproduction case, whether that's in code, sandbox 201 00:11:50.039 --> 00:11:53.480 or a project that they create, and if they don't 202 00:11:53.480 --> 00:11:55.679 do it, someone else might show up and do that 203 00:11:55.720 --> 00:11:57.759 for them, which is really nice. And then I can 204 00:11:57.799 --> 00:12:00.519 interact and go back and forth with them or they 205 00:12:00.559 --> 00:12:04.440 can sort of figure out, you know, the best way 206 00:12:04.480 --> 00:12:07.039 is to set the issue up themselves in the issue, 207 00:12:07.200 --> 00:12:09.960 and then that really helps me save a lot of 208 00:12:10.039 --> 00:12:14.159 time and you know, dive in, find out what the 209 00:12:14.200 --> 00:12:16.799 problem is and say, oh, okay, all right, let's let's 210 00:12:16.840 --> 00:12:22.639 get it there. I'm fixing. Nice. Okay, let's oh sorry, sorry, Peter, 211 00:12:23.039 --> 00:12:25.240 go ahead. Yeah, yeah, that's nice. 212 00:12:25.279 --> 00:12:28.279 Actually, I think it's actually very common that we do 213 00:12:28.639 --> 00:12:31.279 like taking all this make sure that it's kind of 214 00:12:31.320 --> 00:12:35.559 community because and I it's actually kind of a very 215 00:12:35.639 --> 00:12:38.000 large amounts of working end to kind of you know, 216 00:12:39.080 --> 00:12:40.039 under the issues. 217 00:12:40.159 --> 00:12:43.399 I'm also kind of intact with the people placing the issues. 218 00:12:43.440 --> 00:12:47.200 So this is actually very as a I think probably 219 00:12:47.519 --> 00:12:50.879 you can actually even if you don't mind, maybe on 220 00:12:51.000 --> 00:12:54.200 the shoe maybe we can actually ask from assist and 221 00:12:54.320 --> 00:12:56.200 like people who come much of it to maintain a work. 222 00:12:56.279 --> 00:12:59.879 I don't make it's fun because I know that the 223 00:13:00.639 --> 00:13:03.679 kind of cool if maybe you have like like maybe. 224 00:13:05.360 --> 00:13:07.399 To maintaining as well. 225 00:13:07.519 --> 00:13:10.519 That yeah, to put home beyond your kind. 226 00:13:10.360 --> 00:13:15.399 Of yeah, yeah, for sure. Okay, let's get a bit 227 00:13:15.440 --> 00:13:18.679 into the intricacies of the code, because I think there 228 00:13:18.679 --> 00:13:21.159 are multiple different ways in which you could have coded that, 229 00:13:21.279 --> 00:13:25.519 especially now with view transitions, which are recently we're lending 230 00:13:25.519 --> 00:13:28.120 on Chrome. But I'm not sure if there already stable 231 00:13:28.360 --> 00:13:32.039 in all the browsers as well. But I'm sure that 232 00:13:32.120 --> 00:13:34.120 you didn't use that because the library exists for a 233 00:13:34.200 --> 00:13:36.639 very long time. I also don't even know if now 234 00:13:36.639 --> 00:13:39.440 that this exists, if it would be a better way 235 00:13:39.480 --> 00:13:42.480 to do this, or if it's better suited for other 236 00:13:42.639 --> 00:13:45.639 use cases. But yeah, I'd like to let's just go 237 00:13:45.799 --> 00:13:47.960 through how this is right now, and then we can 238 00:13:48.039 --> 00:13:52.000 even talk about if you if you have an urge, 239 00:13:52.279 --> 00:13:55.840 like an itch to refactor it even further now to 240 00:13:56.120 --> 00:13:57.360 adhere to modern. 241 00:13:57.039 --> 00:13:58.399 Technologies and stuff like that. 242 00:13:58.440 --> 00:13:59.799 But right now, how does it work? 243 00:14:00.000 --> 00:14:03.200 All right? So this this is gonna be some nitty 244 00:14:03.240 --> 00:14:05.639 gritty stuff. I'll start at the top. I'll start with like, 245 00:14:05.879 --> 00:14:08.799 what is actually happening. I do want to get to 246 00:14:09.240 --> 00:14:10.720 where the project eventually will go. 247 00:14:10.799 --> 00:14:12.360 But I think we'll say that for a minute. I 248 00:14:12.440 --> 00:14:16.240 think it's cool it involves web components, and we'll see. 249 00:14:16.720 --> 00:14:22.840 So the way that this works is based on the 250 00:14:22.879 --> 00:14:25.399 need of what it needs to do. So what it 251 00:14:25.440 --> 00:14:28.240 needs to do is if you're gonna if you're gonna 252 00:14:28.279 --> 00:14:32.320 put something on the screen that is clickable, So like 253 00:14:32.320 --> 00:14:34.159 if someone can click on it or tap on it, 254 00:14:34.720 --> 00:14:38.840 then it needs to also be accessible to a keyboard 255 00:14:39.000 --> 00:14:42.919 or other assistive device that can you know, focus through 256 00:14:42.919 --> 00:14:45.720 a page. Okay, so we need to be able to 257 00:14:45.759 --> 00:14:46.919 focus on it with a keyboard. 258 00:14:46.960 --> 00:14:51.000 We need to be able to set that up to 259 00:14:51.080 --> 00:14:56.399 be also screen reader accessible. And people have said to 260 00:14:56.440 --> 00:14:59.000 me in the past, they're like, well, why why are 261 00:14:59.039 --> 00:15:00.879 you doing all of this with modal Why are you 262 00:15:00.919 --> 00:15:04.080 doing all this stuff with keyboard? Like blind people with 263 00:15:04.159 --> 00:15:09.120 blindness don't Why would they want to enhance a you know, 264 00:15:09.159 --> 00:15:10.840 an image, Why would they want to make it bigger 265 00:15:10.840 --> 00:15:15.480 on the screen. And when I hear that, I politely 266 00:15:15.519 --> 00:15:19.720 inform people that's you know, it's not just people that 267 00:15:19.759 --> 00:15:22.960 are blind that use keyboards and screen readers, people with 268 00:15:23.000 --> 00:15:27.360 low visual acuity that could be cognitive, people with cognitive disabilities. 269 00:15:27.639 --> 00:15:31.960 There's many, many, many reasons why people might use other 270 00:15:32.080 --> 00:15:36.039 things than just a mouse. So the simplest, absolute simplest 271 00:15:36.039 --> 00:15:39.720 thing you could do is, okay, I click on that, 272 00:15:40.120 --> 00:15:44.039 and I you know, just transform that image that's on 273 00:15:44.080 --> 00:15:46.120 the screen right there and make it take up the 274 00:15:46.159 --> 00:15:52.399 whole screen. But you know, that's modal behavior. And so 275 00:15:52.440 --> 00:15:54.320 if someone we're trying to do this with a keyboard, 276 00:15:54.879 --> 00:15:56.639 or they were using with the screen reader and they 277 00:15:56.799 --> 00:16:01.279 were blind, you know, they might of that image still 278 00:16:01.399 --> 00:16:03.679 up taking up the whole screen, but they might be 279 00:16:03.759 --> 00:16:07.720 trying to navigate through everything that's behind it. So that's 280 00:16:07.759 --> 00:16:13.120 why it uses a modal. Modals have very a modal dialogue. 281 00:16:13.559 --> 00:16:16.360 You know, those are very specific rules where none of 282 00:16:16.399 --> 00:16:21.519 the content, none of the you know, input controls, anything 283 00:16:21.639 --> 00:16:25.879 behind that modal should not be available to a keyboard, 284 00:16:25.919 --> 00:16:29.679 screen reader, any assistant device. So okay, that means we 285 00:16:29.720 --> 00:16:33.000 need to be in a model now, so what do 286 00:16:33.039 --> 00:16:35.279 we need to do to get there. We've got an 287 00:16:35.279 --> 00:16:38.120 image and we want to make it seem like where 288 00:16:38.440 --> 00:16:41.480 we're taking that image and we're zooming it up to 289 00:16:41.679 --> 00:16:45.679 the you know, the viewport screen size. Well, how do 290 00:16:45.679 --> 00:16:47.159 we do that with a modal, because a modal is 291 00:16:47.159 --> 00:16:52.679 a separate element. What we do is take that original 292 00:16:52.679 --> 00:16:56.559 image and I'll get a little more deep into this 293 00:16:56.600 --> 00:17:01.000 in a second, but we take that image, we open 294 00:17:01.000 --> 00:17:06.079 a modal dialogue with that image inside the modal dialogue, 295 00:17:06.079 --> 00:17:09.119 so it's two different images. Now with the same source, 296 00:17:10.079 --> 00:17:11.880 you put it on top of where it is on 297 00:17:11.920 --> 00:17:18.400 the page, and then you scale it to the viewport. Now, 298 00:17:18.440 --> 00:17:20.599 there's some problems that you run into with this if 299 00:17:20.640 --> 00:17:23.599 you if you just try to you know, there's a 300 00:17:23.680 --> 00:17:26.119 little bit of math to figure out. Okay, well, it's 301 00:17:26.160 --> 00:17:28.680 the within the height looks at what are the dimensions 302 00:17:28.680 --> 00:17:30.680 of the image? Do I need to scale it more 303 00:17:31.240 --> 00:17:35.000 you know x, or more x or more y. But 304 00:17:35.640 --> 00:17:42.079 the problems get compounded by Safari and specifically iOS Safari. 305 00:17:42.599 --> 00:17:46.279 Both macros and iOS do this, but it's worse on iOS. 306 00:17:46.839 --> 00:17:49.920 If you start with an image that's small and you 307 00:17:50.000 --> 00:17:56.039 try to transform it above you know, transform scale you know, 308 00:17:56.160 --> 00:18:01.920 two three, four. Safari only have the image quality that 309 00:18:02.000 --> 00:18:04.680 was originally rendered. So even if you haven't a bigger 310 00:18:04.680 --> 00:18:07.279 image or a really really big image, if you render it 311 00:18:07.359 --> 00:18:11.720 really small, that's the best quality you're gonna get. So 312 00:18:11.799 --> 00:18:15.440 it scales up. Sorry, when you scale it up, you 313 00:18:15.519 --> 00:18:18.720 lose the quality. So it's a big problem if you're 314 00:18:18.720 --> 00:18:21.640 trying to have something that you know enhances the image 315 00:18:21.680 --> 00:18:26.359 makes it bigger. So instead, what you have to do 316 00:18:25.920 --> 00:18:30.559 to do all this is figure out in reverse how 317 00:18:30.559 --> 00:18:33.359 big it's going to get. When you're doing the zooming 318 00:18:33.359 --> 00:18:35.559 and you put the dialogue on top of the image, 319 00:18:36.160 --> 00:18:39.359 you scale the image down so between zero and one, 320 00:18:41.200 --> 00:18:45.000 and then as the animation goes, you eventually scale to 321 00:18:45.079 --> 00:18:48.119 a scale of one, and that scale of one is 322 00:18:49.039 --> 00:18:52.559 whatever is the biggest the image can get in the viewport. 323 00:18:53.240 --> 00:18:55.440 You also have to take into account what the maximum 324 00:18:55.440 --> 00:18:58.200 size of the image and make sure you don't scale 325 00:18:58.279 --> 00:19:01.960 beyond the maximum side of the image and make them blurry. 326 00:19:02.799 --> 00:19:04.759 So the image is eight hundred by eight hundred, but 327 00:19:04.799 --> 00:19:07.920 you're on a really big screen, the only one to 328 00:19:08.000 --> 00:19:10.440 zoom to that amount. So there's a lot of little 329 00:19:10.440 --> 00:19:13.720 things that go into it. But to wrap that initial 330 00:19:13.759 --> 00:19:17.319 bit back up, there's a dialogue that's invisible that gets 331 00:19:17.319 --> 00:19:20.839 put on the screen, and the image that we're zooming 332 00:19:20.960 --> 00:19:23.960 is put on top of the image that's underneath the dialogue, 333 00:19:24.359 --> 00:19:26.680 and then we scale it up to the viewport. And 334 00:19:26.720 --> 00:19:29.160 when you click on it again or press escape to 335 00:19:29.200 --> 00:19:33.400 get out of this modal experience, it does the opposite 336 00:19:33.559 --> 00:19:34.359 and puts it back down. 337 00:19:35.000 --> 00:19:39.599 I like the trouble shooting, like you explaining the problem 338 00:19:39.640 --> 00:19:40.599 and how you tackle it. 339 00:19:42.000 --> 00:19:44.599 A few questions. So first let's. 340 00:19:44.440 --> 00:19:50.359 Say that the image is very tall, so it's the 341 00:19:50.480 --> 00:19:56.119 height is very big. Do you always make it fit 342 00:19:56.759 --> 00:20:01.480 the viewboard or would you allow it to be scrollable 343 00:20:01.680 --> 00:20:04.279 once you once you zoom in, it always fits. 344 00:20:04.400 --> 00:20:07.440 It always fits the viewport, whatever that is. And so 345 00:20:09.599 --> 00:20:12.400 you know, whether that's a feature, I mean, that's what 346 00:20:12.799 --> 00:20:15.200 I made it to, but I mean whether that works 347 00:20:15.200 --> 00:20:18.079 for everyone or not is kind of up to them, 348 00:20:18.119 --> 00:20:22.519 but it is. It is a way to see one image, 349 00:20:23.640 --> 00:20:25.519 you know, that might be bigger than your viewport actually 350 00:20:25.559 --> 00:20:29.319 in the viewport, but you know, it's it just depends 351 00:20:29.359 --> 00:20:34.000 on what your use case is with that. And you know, 352 00:20:34.160 --> 00:20:36.440 there's a you know, there's a there's a use case 353 00:20:36.440 --> 00:20:38.559 where you scroll down and maybe you scroll past an 354 00:20:38.559 --> 00:20:41.000 image because it's you know, taller than your viewport and 355 00:20:41.000 --> 00:20:42.680 you've got a little bit of it in the window. 356 00:20:42.799 --> 00:20:45.400 You click on that, it comes down and it may actually, 357 00:20:45.480 --> 00:20:48.039 you know, if it's taller and wider, it may just 358 00:20:48.559 --> 00:20:50.920 shrink it so it fits into the viewport. But that's 359 00:20:50.960 --> 00:20:53.160 what it does, okay, okay. 360 00:20:55.160 --> 00:20:59.319 And the the thing that is actually being skilled up 361 00:20:59.599 --> 00:21:02.640 or down is just the image itself. Because the model, 362 00:21:02.680 --> 00:21:07.400 as you said, you you fix its dimensions because you 363 00:21:07.599 --> 00:21:10.759 can't think her the dimensions of the model. Uh it 364 00:21:11.079 --> 00:21:13.559 like you can, but then you would run into problems 365 00:21:13.680 --> 00:21:18.480 in a future situations. So you just fix the the 366 00:21:18.519 --> 00:21:21.000 dimensions of the model to be the entire view board, 367 00:21:21.400 --> 00:21:24.960 and then you just scal up the image that you 368 00:21:25.039 --> 00:21:27.559 duplicated and created inside the model. 369 00:21:27.960 --> 00:21:32.759 That's right. It also allows for when for pinching to 370 00:21:32.920 --> 00:21:36.119 zoom and panning around, so you've got to write this 371 00:21:36.920 --> 00:21:41.160 code for all that, because there's also code for you know, 372 00:21:41.640 --> 00:21:47.039 gesture like swiping as well as mouse wheel. And in 373 00:21:47.079 --> 00:21:51.000 the past, what I allowed for was when you would swipe, 374 00:21:51.400 --> 00:21:55.839 it would just scroll the page and you know, put 375 00:21:55.880 --> 00:21:58.960 the put the thing back, put the image back where 376 00:21:58.960 --> 00:22:02.880 it went to before. But that was a very difficult 377 00:22:02.880 --> 00:22:06.440 thing to achieve with the modal, with you know, the 378 00:22:06.480 --> 00:22:10.279 animation all this stuff. So what I've got now is 379 00:22:10.319 --> 00:22:12.839 the way that I think most models are supposed to work, 380 00:22:13.400 --> 00:22:16.160 where you disabled the body, the scroll on the body, 381 00:22:17.359 --> 00:22:20.440 and then if someone does a scrolling action, so if 382 00:22:20.440 --> 00:22:26.519 it's like a mouse wheel or gesture or something, it 383 00:22:26.559 --> 00:22:32.279 doesn't actually scroll anything, but it will make the the 384 00:22:32.359 --> 00:22:36.440 image on zoom that's the word I use on zoom. 385 00:22:36.720 --> 00:22:38.799 And then you can keep going about your business. On 386 00:22:38.799 --> 00:22:40.000 the page, you. 387 00:22:40.039 --> 00:22:43.319 Mentioned a few accessibility concerns and you mentioned like the 388 00:22:43.359 --> 00:22:50.880 ability to close on ask et cetera. How did you 389 00:22:51.000 --> 00:22:55.480 use the how did you create the model itself? 390 00:22:55.640 --> 00:22:56.400 The model element? 391 00:22:56.519 --> 00:23:01.400 Because we now have a dialogue element on HMO, I say, now, 392 00:23:01.480 --> 00:23:04.400 it's been there for a very long time, but I 393 00:23:04.519 --> 00:23:08.359 find that very few people actually use it, and a 394 00:23:08.400 --> 00:23:11.359 lot of people just create a div and put it 395 00:23:11.400 --> 00:23:15.079 on the as a child of the topmost element, sometimes 396 00:23:15.079 --> 00:23:18.880 the body itself, and then they position it whatsoever. Basically 397 00:23:18.880 --> 00:23:21.960 create a portal, right, and then you have to write 398 00:23:21.960 --> 00:23:25.119 all those accessibility stuff yourself from scratch. 399 00:23:25.400 --> 00:23:26.519 How is your approach? 400 00:23:26.640 --> 00:23:30.759 Did you use the div and created all the accessibility 401 00:23:30.759 --> 00:23:34.920