Browser and Device Testing - Live Coding with Jesse

Key Takeaways

Hey everybody, it's Jesse and today I'm sick. So I apologize if uh I'm a little bit harder to hear today or a little out of it. But uh I don't have time to be sick because we got to launch this site. So the site's going to launch tomorrow. We need to do some testing. I'm going to test using browser stack and also with a device. So, I have uh the Pixel XL and I'm just I have it connected uh directly to my iMac and we're going to use Dev Tools and test on the device. I did want to show you how to test simulate an iPhone uh with Xcode, but I tried to start it two minutes ago and it wanted me to download extra stuff for it to work. So, that's not going to happen. So, sorry about that. Ideally, for it's better if you actually have a phone, an iPhone to test it on if you can get a hold of one. I found the simulator isn't always accurate, the the Xcode simulator. So, some other people that I I work with have phones. So, I'm just going to borrow one of their phones later on uh and test because based on the analytics for some of our other sites, a lot of users are going to be uh on an iPhone. So, the browsers that we need to worry about most based on the analytics are Chrome, which we should be fine in Chrome. We've been developing it in Chrome the whole way. So, I'm not as worried about that. And Safari, specifically mobile Safari, which I always have problems with on my list of least favorite browsers. Mobile Safari might be worse than Internet Explorer for me. So, I mean, at least worse than Internet Explorer 11. We we will try out Internet Explorer 11. I don't think I'm going to bother with Edge because uh our analytics show it's such a small percentage of our users are are using Edge. It's probably not a good use of our time at this point. If I had more time, I'd maybe give it a try. Uh so let's get started with some testing. Oh, hey everybody. I just looked at the the live chat. Some people saying hello. Um, I have a question for for all of you. Uh, if I'm having an issue with one of my other sites, so I'm going to throw this out there and you all can think about it and comment or direct message me or something if you have a good answer. I'm using I have an app where users have to log in. I'm using Ozero for authentication. It's one of the magic link login. So, they get an email with a link. when they click the link, they're logged in and it saves everything in the browser's local storage and they're supposed to stay logged in unless they actually log themselves out with the log out button. So, I'm having two problems. One, users keep getting logged out and they're saying that they haven't tried to log out. They can't remember what um they can't remember ever like running some type of program that would have logged them out like cleared out all their local storage. So basically they're getting logged out for no apparent reason and I haven't been able to recreate the issue. I' I've tried probably dozens of times. I've gone to, you know, different computers that the actual computers where it's happening for the users and I can't get it to happen again. And then the other issue is when they try to log back in and have that that magic link sent to them again, they're not seeing the emails. I'm using Send Grid for emails. In the Send Grid Analytics, it says that the emails are actually delivered, but they're not they're not showing up in their inbox or in the junk mail folders for these people. So just just want to know if anybody is using either send grid or ozero or both of them together. If you've had any issues like that uh especially issues with local storage being cleared out randomly uh from the browser or with emails you some some people just not getting emails on the same system. I'm on the same email system and I I tested it earlier. I got the email within a minute. Uh, so I don't know what the issue is. So, sorry for the little uh sidebar there. Uh, let's get back to the testing. So, basically, the first thing I want to do is show you how to set up the a mobile device for testing. So, there's not a lot you have to do actually on the phone. So, I'm not going to show you the the phone part of it. Uh but uh you can look it up. It's usually it's it's pretty easy. You'd have to go into uh your settings into your advanced settings and there's like a developer mode. Uh I think you have to click on the version number uh in settings like seven times. It's really weird. I'm This is for Android, by the way. So uh I you can hook up an iPhone and and do debugging as well. Uh, but it's a different since I don't have an iPhone right now. Uh, I'm not going to go over that. Maybe we'll do it uh in a different video. So, basically, you have to enable developer options, and you do that by I can't remember exactly what you click because I've already done it, but I think it's like the Android version number when you go into settings and about, and you have to click it, I think, seven times. And then it'll ask you, do you want to enable developer options? Yes. And then you have this extra thing in your menu, uh, this extra item. So, you can go into there and enable USB debugging. So, that's what you want. You want to be able to enable USB debugging. So, if you have an Android, you want to do this, Google enable USB debugging on Android. Uh, and it'll it'll let you know exactly what the steps are since I can't I'm I'm almost positive that the way I described it is how it went, but it's been so long since I've done it. I can't be sure. So, you'll probably want to double check. I don't have the link right now. Um, so sorry if I if I have time and I remember, which I probably won't, uh, I'll throw the link in the description. Uh, normally I would throw the link in, but I'm just really pressed for time to get this site launched. So now I'm going to show you how to link up your device. So if you open up DevTools, okay, which you can just uh click on inspect anywhere and that'll open up DevTools for you. Uh let me How's the font on DevTools? Do I need to make it bigger? Let me know. All right. Somebody in the live chat said it's not the Android version number, it's the compilation number or something like that. I I think you're right. I can't remember. It was some some number in there. I know that's not great uh information, but uh I'm I'm you'll be able to find it. It's the information is really easy to find. If you want like a step by step, uh if you go to Udacity, they actually show you this in in one of their courses. They have like um a link to a video. It's their course on um uh and like mobile is it responsive images something like that. Sorry, that's not good advice either. U so let me make this bigger and move this up here so you can see what's going on. Okay, so we have uh someone in the live chat saying we do need it bigger. Okay, that's probably as big as I can make it without blocking out stuff that we need to see. So, all I've done is I've connected my my phone to the computer. So, I have um for this phone, it's it's one of like the USBC. So, I have a connector that's just a regular USB on one end and then a new USBC on the other end going into my phone. So, that's plugged in. I've enabled USB debugging on my phone. Now, I just open DevTools and I go I click on this. It's it probably won't be uh clicked on by default. Discover USB devices. When I do that, then it brings up this pixel. So, I can see it over here and it'll actually if you click it, it'll show you uh open windows that you have. I've done one other step since we're developing this locally. If you're not testing a site locally, if you're testing a site that's available, you know, online from a normal URL, you can skip this step. But since we have a local server running, we want to match up the ports. So, I've just used localhost 8080. This first number uh is for my phone. The second one is what port we're running it on. So I'm actually running this local server on port 3000. So I just I added a rule when I entered these two numbers in. Now when I go on my phone to localhost 8080, I can actually see the development site. I know you guys can't see it. Uh, I was trying to I have a program that let me share my phone screen, but for some reason it wasn't working. I kind of think that because I'm using the ports, it's like one of the ports that that was also using, and so I messed it up. Uh, but I didn't really have time to troubleshoot. So now that you're linked up, you can go I can go into my pixel and see I have it's saying the port forwarding is working and I want to inspect. Let's enter URL. So you can I can enter this localhost 8080 and click open. And this should have worked. I guess not. There we go. It just took a second. But see, it on my phone it just opened it. And now I can see that tab here, that localhost 880. Now I can hit inspect. Okay. And now my inspector It's taking a second to load, but now this section once it loads, this section will actually correspond to what's on my phone. So, the cool thing is now if I go over and change some styles here, it'll show up on my phone in real time. So, I can test it out. It's a little bit nicer than just kind of shrinking your your window. Uh because you get to, you know, really see like how if you have, let's say, some type of scroll tracking or click function or something, you you can see how it is with the touch. Uh I know you can simulate some of this uh with DevTools. Uh but if you have a device, you don't have to have every device. if you just get one device and try things out on it, it's really worthwhile. Uh so in general, I just, you know, click around and see uh see what's working, what's not working. So there's definitely some delay. Uh so just a heads up on that. Uh, every time I go to click on a link, it doesn't refresh right away. There's there's a delay. So, you're clicking. All right. So, I'm not going to spend a lot of time on that. I just wanted to show you how to set that up because I didn't get the uh screen sharing working. So, it'd be really boring for you all to have me describe to you what I'm seeing on my mobile. Uh the next way I'm going to test is with browser stack. So I have this somewhere. Where did I put it? Okay, here it is. Okay, so we have make sure the port. Sorry, I'm I'm just checking the uh the live chat for a second. Make sure I Okay, it looks like there's we don't have any questions or anything. Everybody's still following. All right, so I'm going to go in here into uh browser stack. Now, I can I normally just use Xcode since I'm on a Mac and I test directly on my Mac instead of going into uh browser stack. But since I have have to install updates before that'll work, let's go in. Uh we'll just try this iPhone 6S. I don't have a lot of uh like really good analytics data on the actual type of iPhone devices actual size. I don't know. My screen is maybe 27. Um, sorry, I just lost my train of thought. If you're just joining and you missed at the beginning, I apologize in advance. I'm really not feeling well. So, the the stream's going to be a little bit a little bit off. I'm just not going to be as as on top of things as I normally would be. So, you have to wait. This is browser stack is is pretty good. Hey, this is it. Actually saved the last site I I looked at on here. Um or probably not me. This is uh somebody we share an account uh me and another developer. So uh that's probably site he was testing. So basically I I have a phone here. I don't know if I can make this bigger. So I'm sorry if this is uh small. It it looks small for me. So, um, I'll just give you kind of an an idea of how to do this. Now, some things on browser stack allow you to do port forwarding. Last time I used this, which is within the last few months, you could not do it with the iPhones. So, I'm not going to try to do it right now. Uh, you can do it, I think, with Windowsbased things, uh, Windowsbased browsers. Uh, so you might want to check that out. That would also be cool. So, in this case, I'm just going to go to our test URL. Uh, and it's it's pretty much up to date. There's a couple of things I did that I didn't push to the uh to the server yet, but for the most part, test.catics.com. Let's see. Okay, it's not it's not working. Let me go back here and see if it's working on on my browser. Okay, wow, it is working. Let me refresh one more time. Good thing we're testing. Uh let's try to go to maybe one of the interior pages. See if we have better luck. No. All right. Now we can open dev tools here. So let's open dev tools and see what we're getting. Can't find variable in it. Expect identifier this card. All right, let's see where this is at. It's possible. Uh, it's not showing me. Let's see. I want to go try. It looks like it's not even loading. I want to check to make sure. Okay, it is loading our our app our app.js. Okay. Okay. It's loading two of them. All right. So, what did it say? Line 21. this this card team card click [Music] handler. Okay. Yeah, in the live chat somebody asked, "Is browser stack free?" There is a free trial. It doesn't let you do a lot though. Uh so yeah, this is not a free tool. Um yeah, you can use Xcode to simulate an iPhone on your computer for free if you have uh a Mac. So, I would normally I I like to use that better than trying to simulate iPhones and browser stack. Uh, and then if you have a device, the actual physical device, of course, you can test with that. But I think probably what's happening with the iPhone and I'll need to um I'm going to test this with an actual device uh just so it's a little bit faster for me after I update Xcode. Probably what's happening and I don't know why this this slipped my mind before is I'm using a lot of uh things from ES6. I don't know what the coverage is on mobile Safari for ES6. It's possible that that's messing some of this this up. Um I don't know. We'll see. Yeah, cuz the first the first time I use something that's ES6 is at line 21 and I'm using let instead of there and that's the first error we got. So, I'm guessing mobile Safari does not support let. So, I'll have to use Babel and transpile that into uh ES5 code and then try again on an iPhone. But what we can do is try to go I don't think I have a page that isn't using uh some type of ES6. We can transpile real quick and do it. I mean we have um that might be worthwhile worthwhile to do. So, if you've never used ES6 or Babel before, let's try it out. Okay, so you need to let's see, let me grab all of my app.js. So basically this JavaScript that you're writing in your components you're fine with. It's going to be uh automatically transpiled. But since we imported this app.js file from our previous static site and we just brought it in and have it in the static folder, I next doesn't automatically transpile that for you. That's something I'd have to set up um probably as an npm script in the package JSON file. So, I have not set that up yet. I've set it up in a previous project. At some point, I'm probably just going to copy that code into there. Uh, but I haven't done it yet. So, what we can do now is just kind of manually transpile this just so that we can uh do some testing. So, I've just copied this in on this side. And you can see I'm using Let me uh make this bigger. I'll make this whole thing bigger. Okay. So on this side we have some ES6 stuff. So we have let uh what else we have? I'm probably using const in some places too. Uh I'm using template literal syntax. Uh so we go over to this side and we can see that let has been changed into uh to ver. And I'm not going to look for the template literal syntax, but if you basically what it would do is just use regular quotation marks and uh you know your plus signs uh mixed in with your variables. So your file is going to be a little bit bigger after you do this, but older browsers will be able to use it. So I'm just going to copy this for now. [Music] And let's see what the best way is to do this. I uh I'm just going to I'm just going to go and paste this all in and overwrite this file for now because we have this this saved. So, let me let me just throw this in another file just to save it. Okay, just in case we need to go back. Okay, so let's save and we're going to go over. I'm going to put this on the server really quick. It should take probably two minutes. Okay, I'll let you guys see this. I I showed everybody yesterday, but just in case uh you don't know how I'm putting things on the server right now. Uh this is the Let's see if Let's make this a bit bigger. Okay, so this is my local machine. I'm just going to do a get commit. So, we're just going to transfer on Digital Ocean. Uh, and now I'm in. So, you see I'm It looks different. I have username, uh, Jesse. Now, we're going to go into our folder and we're going to stop stop our our app for just a minute. We'll do a get pool and we'll do we'll do a build Soon as this builds over, we'll just start up our server again and then we're good to go with our testing. We can go right back in now. We shouldn't get the errors from the ES6 stuff. So, sorry I didn't think of that beforehand. I just been working on a lot of other stuff today and I did not think about it. Okay, so uh Patrick in the live chat says, "Can I use says mobile Safari should support let since late last year?" Okay. Well, I'm not sure what the problem was then. I mean, we're definitely getting an error on the uh the line that I first used let with. So, I'm not actually I don't remember what version of Safari I was testing with browser stack. It's possible that I was testing an older version. We'll go back in and see what the version is. All right. So, now our build is ready and we start everything up and we should be good to go. So, let's go back over here and let's try Oops. Let's try to go back. All right. And it works. So, I'm not sure what what the problem was for sure. I think it was let and this is probably just an older version of Safari. But now, at least we can scroll down. Let me see if I can make this bigger. Hm. All right. It says device is already at actual size. So I guess it's not. Okay. So this is browsers iOS 9. So this is Safari and and iOS version 9. So what's the newest one? Is it is 10. Okay. Nice. You guys you already got me covered in the live chat. Support for uh for let which is an ES6 thing starts in version 10.2. Okay. And uh somebody mentioned something about the Ozero stuff. Uh I don't want to interrupt right now. So towards the end I'm going to come back to that. Uh thanks for for mentioning that. Um, I'll just say for now, uh, I'm not using an iframe to log out. All I'm the log out is basically I just clear local storage when they click the button. Okay, but people were saying that they're not clicking the button and the local storage is still being cleared. When I go to check their their browsers, there's nothing in local storage, but I can't get it to clear on, you know, just on its own again. I I I can't recreate the problem. Okay. So, I'm going to scroll around a little bit. I realize this is super small. Yeah. And I don't I don't know how to uh to make this bigger except to I can zoom into the site itself. Let's see if I can zoom in here. All right. Okay. So, the uh you know, just the the zoom from the uh touchpad uh on an I uh an like the iMac magic touchpad works. Okay, so we got a little bigger here. So, I'm just going to scroll. You don't get like the the real feeling of scrolling. I'm, you know, I'm using my touchpad to scroll. Uh but we can do some some clicking around. Okay, so that works. Uh yeah, it's a little bit weird to try to get the touch the touch stuff down. I keep like accidentally clicking where I don't want to click or like double clicking when I don't want to see it keeps Maybe it's Maybe it's because I zoomed in. Let me zoom out again and see if I if it's better. Uh, that's it. Yeah, I can't win. If we zoom in, the uh the clicking doesn't work. So, how about this? I'm going to scroll just quickly. See if I can find something that looks weird. And then if I do, I'll scroll in on that. I want to try out the sidenav and the links. So, we'll try out this link. Okay, that worked. That was cool. That was actually really fast. Okay, I'm going to take I'm actually going to take the images out on mobile and just have uh the title up here because uh they won't look as good on mobile anyway, and I don't I don't want to kill people's data plans by having them load uh images when they're not necessary. All right, so this these sections are actually going to change. So, I'm not that worried about it now. I'm just I have some different content I need to put in. Okay, so these cards look good on mobile. Everything works. These I still need to edit these images to make them all square and the same. So, right now I'm looking for items that I um I don't already know about that need changed. All right. So, I am interested in this. Okay. So, that does work. If Let me zoom in here and show you what's going on with this. So, this gave me some problems this morning. Some people have super long titles and they won't fit on the card. So, it they were wrapping below and adding another line or sometimes two lines. And then, of course, the text was spilling out of the bottom of this card. Uh, so the the solution would have been, okay, well, let's just make the card bigger. But the problem is I don't have great quality images to work with. So some of the images I have are already less than 100 pixels by 100 pixels. And so that's what I have here. These are 100 by 100 pixels. So I wanted to keep this and keep this 100 pixels in height. So I settled on this, which I don't really like this solution, but I just don't have time to mess with it more right now. So I decided actually on a horizontal scroll. So you can scroll over and see the rest of uh the title. So on larger screens, this isn't an issue. U if you think of another uh solution, somebody said uh truncate in the live chat. Yeah, I I could possibly truncate it and then when you click it, let me show you what happens when you click. When you click it, it comes up with a modal and gives you a lot more information. on the person. So, I could possibly truncate and then have the full title in the modal. I've thought about that. I'll have to I don't know if I'll have time to do that before we launch, but I'm going to put that on my my list. Uh I have a Trello board that's keeping track of everything since I'm zoomed in. It's not letting me click out. There we go. So, um, yeah, that probably is going to be the best thing. Just truncate this, limit it to a certain number of characters, and then have the full one, uh, be in the in the modal. So, I like that advice. Yeah, actually, that's that's what I did. Overflow-wise, scroll. Somebody mentioned change the font size. I don't know. The font's already small. Well, I could probably make it smaller and get away with it. At least on on mobile. There's there's just a lot of overflow. Um, yeah. I just I wish some of these titles weren't quite so long. And it's not just one or two. I mean, there are like quite a few of these that have the super long titles. So, I am eventually going to change this. For now, this is probably how it's going to look for launch since we're launching tomorrow. Uh, let me check to make sure this works. Oops. Maybe it's not working. Let's see. Am I getting an error? Okay, when I click this, it should open. And it's not opening on this phone. Let me uh refresh really quick. Wow. Oh, that's not refresh. That's switch. It looked like the refresh button, but it's really not. Okay. So, let me There we go. Let me find I'll have to use the refresh button on the device just to see what's going on. Okay, that did work. Let's go back. I've put in um like client side routing. Now I'm going to go back into teams to see if it works. So the thing with client side routing, if you watch yesterday, we went over problems that you would might have with jQuery. Okay. And I think this is an issue. So normally like I would initialize this this click handler to open these and the document. ready function for jQuery, but it's not going to fire. Like, if we're just doing client side routing and there's no page refresh, that function is never going to fire again. So, the first time it fires, it'll be on a different page. It won't actually see those sections. So, it it won't have anything to grab on to to uh um to watch. So what we have to do is instead use like component uh component did mount and then call it in there. So we pull it out of document.ready. We put it in a separate function that's available globally and then we call it from within our component when it mounts. So for some reason either I forgot to do that for this or I did it and it's not working. So I need to add that to the list. So I'll show you how I keep track of all these things. So I go over here I have my Trello board. So, I'll just put it over here and say um fix um section handler for teams for uh teams with client side routing and I'm going to estimate that's going to take one pomodoro cycle. That's what this one is. One 25 minute cycle. Okay. Somebody else uh Hberto in the live chat says they like the overflow ellipsus option. Uh yeah, I think that'll look that'll look okay. We'll pro I'll probably end up going with that at some point. And all right. So now that that bug is it's tracked. I'll get to it. Uh let's let's move on. I'm actually doing a similar thing in another page. So I really want to see if it's working on the other page and did I do it differently on the two different pages. So we're going to go over to courses and let's see if it works here. All right, it doesn't. So, I'm having the same issue on both these pages. So, let's just go back and add for teams and courses. Okay. All right. So, good thing this is a small site. We're already halfway through it. Let's check out the events page. See what's going on here. Not a lot. We have That's not bad. Uh maybe it could use some padding changes, but it's it it doesn't look too bad. That text looks hard to read on that background, doesn't it? This uh Let me zoom in. Maybe it's just the the zoom. So, I will uh try to zoom. Now it's Now it's broke and I Let me lock the frame of origin. YouTube.com. Oh, the YouTube has the YouTube inbed messed this up. See if we can. Well, it looks like I've frozen my my test here. So, maybe if I can't get this to work again, we'll switch and test something else and then come back to this one. Okay, so that's frozen. So, let's let's switch over now uh just for a minute and I'll show you what Let's check out. We'll do Windows 10 and let's check out Internet Explorer 11. Uh hopefully I won't have to worry about supporting this for very much longer. Um but you could see I always have issues within Internet Explore 11 and mobile Safari. Uh, a lot of the issues I know about beforehand, so I can I can edit my my code to make sure that I I fix them. But you can see like I was using uh flexbox to vertical align things. See, it's not working in Internet Explorer 11. So, you have to set up alternate styles for Internet Explorer 11. some padding or something as we scroll down. At least this works. And let's go go to the homepage and see how this is going. Oh, what do we have here? Okay, so for some reason the images aren't loading. I'll have to check that out. We can [Music] also we can inspect, but the inspector is not is not great for this. So you kind of have to have a lot of patience. to inspect things when you're working with older browsers. It said it may take a few minutes to start. I don't think I want to wait a few minutes. Let's just let's just go to team. Now, we're also using Oh, man. Look at that. Wow. So, that scroll bar shows up because even though we're not actually there's no overflow, that scroll bar still shows up. That's no good. All right, I'm gonna have to figure out if there's a way to hide the scroll bar in Internet Explorer 111. And I don't want to spend too much time. I'm going to give myself one uh Pomodoro session. So, one 25m minute period because I if I can't find the answer quickly, I'll probably it'll be a waste of time. I don't have all that time right now. So, I kind of think that you can't hide these, but we'll see. Maybe maybe there's a way. I know you could do more with scroll bars in like earlier versions of Internet Explorer. I remember making like neon uh green colored scroll bars uh maybe like 15 years ago or something. Uh but I haven't done that for a while and I don't know if you can still do it. Uh let's go to the news page and I just want to see if Okay, so that's that routing that uh parameterized routing that we had set up. It's definitely working and that's good. Let's check our resources. Okay. Uh, let's see. I want to see if these tabs Wow, the scroll is like not great on this. Okay. Just want to see. No, this isn't working. So, our um our tabs are not working. So, let's put this Oops. So, as expected, Internet Explorer 11 is giving us some some issues. It doesn't matter what you do. It's your site's never going to look as good in Internet Explorer 11 as it will in modern browsers. Uh, I mean, unless your site's really simple, it might look exactly the same, but uh, you just can't take advantage of all the same things that you normally would, uh, would be able to in a modern browser. So, we're not going to try to make this site exactly the same. Uh, the percentage of our users that are on Internet Explorer 11 is really small. If the issues were like a really a big deal, like major functionality and um and UI issues, then you can just put a message. I hate to do this, but sometimes you have to you can just put up a message up that detects the browser and says, you know, hey, if you're using Internet Explorer, you're not going to have a great experience. And then provide a link to download, you know, some newer browsers. You don't even have to write that code yourself. There's already some plugins that'll just do it for you. So, I'm going to check uh the live chat real quick. Uh because I just wanted to show you how I'm doing my testing. I think it's probably a little bit boring to watch me go through here uh and and just find the errors and log them. I'm not actually fixing anything right now, so I don't want to spend a ton of time on it. I'm going to check the live chat quickly and then I have a video another video from syntax con with uh some advice for new programmers and uh this this video is from Kimr Kraton. Uh she was an excellent speaker. She was one of like the the keynote uh speakers at the conference and um she's actually not a coder but she speaks at a ton of uh coding conferences and uh it was great. If you ever have a chance to see her speak or watch one of her videos, I recommend it. It's like uh she has nice like perspective on like mentoring and company culture. Uh so it's really um really kind of cool stuff you don't usually hear at tech conferences. Okay, so let me check. Okay, so I was getting some people talking about the question I asked at the beginning about Ozero and uh in the emails and stuff. Somebody says, "Could there be a problem with SMTP?" Uh it's possible. Okay, so I did mention uh how to do the Android testing and someone in the live chat said it the tutorial on how to do that is in the responsive design for images course on Udacity. That's a free course. I did go through that course. Uh I recommend it. I learned a lot of stuff and a lot of the things in there are still very relevant even though the course is I don't know probably a couple years old at this point. I can't remember when it came out officially, but uh the things that I learned in that course are still still relevant. Someone mentioned that they don't develop for Edge, but it can be surprisingly compatible. Yeah, I had a lot of hope for Edge, uh but it's just not a lot of people aren't using it based on my analytics for my sites. It's very small percentage of people. So that's why I don't usually test things on Edge. It's just not worth the time for, you know, for like 1% of the the users. Okay. Oh, okay. Someone mentioned materialize does have the truncate class. That's right. I forgot about that. So, there is the truncate class. The only I'll have to see how they do it uh on with materialize. Um I know there was actually some like CSS truncation that can go on, but I don't know what the browser support is. But that's a good uh that's a good point. I'm definitely going to um gonna check that out. Okay, someone said they had uh slow connection. They couldn't see the title bar. Uh sorry about that. Oh, nice. Okay, John Hansen, thank you very much. he uh threw in some of the uh CSS uh to be able to hide um the scroll bar. So, that definitely saves me some time and uh I I need some time savers here. So, uh I I really appreciate that. Uh Patrick asked uh says, "You're estimating a Pomodoro cycles. Do you use a Pomodoro clock while you work?" I do. Uh so, I use a Pomodoro clock. I'll um let me show you the one I use. I use just a super simple um web- based one. So this is tomato timer. So it's really bare bones. I can do pomo session of 25 minutes, a short break of 5 minutes or a long break of 10. I usually go 5 minutes between cycles. Every four cycles I do a 10-minute break. And uh I just use this. I like it at, you know, runs right in the browser, so it's easy. I've tried out some apps before that have more features, but usually I don't use any of the other features, so it just kind of clutters things. So, I'm using this right now. At some point, I'd like to actually build my own uh and customize it to exactly what I need. Uh, but I don't have time for that right now. Maybe one day. Okay. Uh, Paul asks, "How is he sliding the full screens left and right?" Uh, I'm on a Mac. So, yeah. So, if you're using um the touchpad for your Mac on a laptop or on a desktop and you use three fingers and swipe it, uh, then that'll that'll change it. So, this is just a three-finger swipe. So, it's super helpful. There is a way to make that work on Windows. Uh it's you have to download a program and set it up, but I'm pretty sure you can get a similar thing on Windows. Um I I mean I don't know what you obviously wouldn't probably wouldn't be using a touchpad on Windows desktop, but there would be probably some type of key. I think there's a key combination like control some there's some like uh key combo that can do this on a Mac as well if you don't want to use the the swipes. Okay. So, I got through the live chat. If you have anything else to ask, go ahead. I'll check it one more time after I I play this video. Uh, but let me get get the video going. This one's a little bit longer. Uh, Kim had a lot of good advice, so this will be a few minutes. Uh, most of the other videos have been like a minute or less. Uh, so let me bring in I'll bring this in and let's make it full screen and let me let me play this. Uh hopefully the audio is is works. There's at one point at the end of this I think there's some background noise. So uh I hope you'll be able to hear this. And um once again this is this is Kim Kraton uh from Syntax Climb. Hello everyone. I am Kim Kraton and you can find me on Twitter at Kimraton 1 and that's k i m c r a y t o n1. I am here at syntac um conference and um one of the things that I'm supposed to say what technology I'm excited about. First first of all let me tell you what I do. I am a community engineer which means I help community efforts. I help people in the technology space um embrace change um become more inclusive and divers diverse when it comes to people of um various backgrounds become more welcoming. So I do a lot of writing, podcasting, blogging, speaking, all those things on community efforts. So that's what where I um excel. Um I also run a a website and Slack channel. Um you can find it on um Twitter at jrdev mentoring and that's a junior dev mentoring um website. So please join. There are a lot of mentors on the slack channel looking for people to help out. And so um the one technology I'm really interested in I'm really interested in AI and VR. I'm just really finding it very exciting. a friend. They I went to their house and they had set it up in their house and I spent two hours playing this freaking VR system and by the time I was done I was pouring down sweat but I had so much fun. So I'm really interested in seeing how that technology is going to advance where it will be less about the the gear and more accessible to other people and how they're using it in um just in everyday life. That would be very interesting to see how um AI AI and um augmented reality let me tell I mean AR augmented reality and virtual reality are going to be used um in just everyday lives. And so the one thing I would tell newbies one of the pieces of advice because I speak on this all the time is about mentoring. So everybody to become junior dev ready. It's virtually impossible for most people to become junior get ready with without a mentor just for the simple fact that this is like the wild west. There is no there is no defined path for this. If you want to be a doctor, there's a defined path. If you want to be a dentist, there's a defined path. If you want to be an educator, there's a defined path. If you want to be a developer, you can be a taxiderermist yesterday and wake up today and decide you want to be a developer and can learn everything you need to learn to be a developer. So, there's no defined path. And without somebody more senior to help guide what you're doing, you often find yourself down those rabbit holes or feeling really discouraged. And so mentors really help. But I want to give you some advice on how to get a mentor. Mentoring is all about relationships. So if you want a mentor, don't go to somebody say, "Hey, I need a mentor. This is what I want to learn." That's not how that works. Um you want somebody who's going to invest in you and your success. And that only happens if they cares if they care about you. and the only way they're going to care about you is if um they have a relationship with you. So find ways to volunteer in your community, find ways to ask um find ways to ask how can I help before you ask them to help you. And what happens is you'll find that um they'll come to you. They'll see they'll start asking you, hey, what are you working on? How can I help? And then it becomes they become your advocate. And that's what you want. You want your first job to come from your network. You don't want to get your first job because it was posted on a website. You want to be there, somebody thinking about you before they even post that job. You want you be the candidate before that job is even posted. So the best way to do that is to build your relationships and get you a mentor. Thank you. All right. So hopefully that was helpful to some of you. Uh I know I um uh I think a mentor would be really helpful. I didn't really have I I kind of had a mentor uh but uh it was more in like in general um uh like digital marketing so search engine optimization and SEO like copywriting and things uh so I never really had like a programmer mentor and uh even now um I you know I already have a full-time job doing this I can still see the value in having a mentor and um I've I've been able to be like somewhat of a mentor mentor to uh to some uh some of the students here who are interested uh in in programming and uh it's uh it's it's awesome. I think you know I can see whenever I help people out they can they get through things a lot faster than I got through things because I can point them to a resource that I know is good. uh I I know the problems that they'll probably run into before they do. So whereas it would take me a long time and I would work through some resources that weren't very helpful before I found the right ones, uh you know, if if if you're mentoring someone, you can help them get through that faster. Or if you're seeking out a mentor, they can help you get through that faster. Uh so you just don't waste your time uh going down deadend paths. uh people that have been doing this for for longer have a much better idea of of the big picture and uh can can direct you uh to where you need to go and what you need to learn. So, good advice from from Kim. And um I don't see All right, we don't have any other questions in the live chat. So, I'm going to get to work. Tomorrow, we're going to launch this site. So, the video it might already be launched by the time I do the video tomorrow. I'm hoping it is. Uh maybe I'll have to just stay up late tonight and tomorrow and get it launched tomorrow night, but hopefully it'll be ready enough to launch. Thanks for all your help. Uh I know you all put in some some really good advice. Uh just, you know, I asked a lot of questions of you uh this time around. Uh and I really really appreciate that. Uh hopefully when I do these live streams, we can learn from each other uh and your projects will get better and so will mine. Thanks so much for watching and I'll be back tomorrow.