 Welcome. This is the Sheikot Africa Contributon 2022 screenshot updates projects inside Jenkins. We're grateful that you're here. This is being recorded and it'll be available from community.jankens.io after the recording has been uploaded to YouTube. So, I'm Mark Wait, grateful to have the miracle here with us and Soma as well, wanted to use this as a chance to talk about how we approach the project. It's a great chance miracle and Soma for you both to ask questions. Don't be shy about if I'm talking you need to just speak right up and say but Mark, and and that's don't be shy at all because otherwise I'll just keep talking and that won't help you nearly as much as you can ask questions. So, so first is, we started with, we start with an blog post to announce the project and I think it's now visible. Let's check it to see. No, not yet. So, the caching system still is. Oh, come on silly thing. There it is. Okay, so here's the blog post. And this blog post talks about each of you. Thanks for sharing your so nafisa here and then Soma here and miracle here. Thanks very much for sharing your pictures. If these pictures are not the ones you want. Let me know and we can fix that I, I think I got everybody's approval to use those pictures and so thanks very much for letting us. All right. The project is also listed here under screenshot updates. So when we open that you'll see this same document that I started sharing. And, and this is where I want to spend most of our time today to talk about this, and let you ask questions we go through various ideas and hey how are we going to approach this, etc. Okay. So I've already we've already completed the biography and photo piece. Go ahead. No, I wasn't saying anything. Okay, great. All right. So. So the, the big picture here is that the Jenkins project is doing a number of user interface improvements. It did several of them in the most recent release in March. And there are even more coming. And so this, let's see, so I should put it, I should describe this here with more changes coming expected in the June 2022 LTS release. The documentations, the screenshots need to be updated to show the current user interface so the Jenkins site has pictures in it in some places and we want to update those screenshots. So I think, and this is one for us to discuss. I think we actually want you to take the pictures to take the screenshots from the most recent Jenkins release which is visible as one example here at weekly. This is Jenkins.io, and you can install your own to to see Jenkins but this is how it looks right now on the most recent weekly release, whereas if we look at the release that was just delivered, these are, let's put them both at 275 is good. You see, the look is a little different in the older one, the one that I'm showing now compared to the newer one. And I think what we ought to have you do is take screenshots using the most recent weekly release. So what you would do then in these instructions it, it talks about your task preparation you install Java Java, and we would prefer Java 11. And that you can actually run and now it's actually this one I think we actually Oh, these links are wrong and I think you had told me that hadn't you that we need to make this adoptium net. Let me fix that link. And other platforms and versions we want to see, and you'll be able to choose which ones you want you want to use eclipse temeran. The old the that other link might work but temeran is the version that we prefer in the Jenkins project so you go here and you choose Java, let's see, version 11. And then what you and your operating system maybe you're running Windows, and then you would download either the zip file of the MSI and stall it on your computer now if you're a 64 bit computer you can use X64. An older Windows computer you use X 32. And by older I mean, probably five years or more old. So most Windows computers now are sold with when with 64 bit. Any questions so far on that step on getting Java installed. No, I already have installed. Very good. Excellent. Okay, and I need to update this to show that it should say this version there. So then the next step is to install Apache Maven. And you may not actually need Apache Maven but I need to update that text to be 3.5 for this project for the screenshot updates project it may not be required, but we'll we'll have to see. Okay, then, then the other steps can treat connect to the contributon channel on Slack you've done that register for a Jenkins account so miracle I believe we've confirmed that you've done that, or that you're in progress. So my have you been able to register for a Jenkins account. So my you're still you may be muted. Okay. You say you think she may have dropped to be loser. I mean, that's okay. Okay, that's fine. So we'll continue. We've got a number of things to review here just to be ready. So let's just go ahead and continue. So, register for a Jenkins account, and then use the installing Jenkins instructions to install Jenkins now. In this case, I think for the two of you. It may be better if you install using the war files technique, because you're going to need to be doing things you may be having to do more things with this, then, then the convenience of using the, the windows install technique. Miracle are you running on windows or on Linux or on Mac OS or something different. On Linux, Linux. Okay, good. Then you can use the Linux instructions. If you is your Linux a Debian Ubuntu or a Red Hat or Fedora, which version is it. Oh, very good. Okay, then you can just follow these instructions here. I'm using the Mac OS. Can I use the war files or should I go through the Mac OS question. Either either is fine. I don't have experience with Mac OS. I know that the war file technique works, but if you would prefer to try to use the Mac OS installer. I don't have time to do that either one works. I would use the weekly, rather than the, rather than the, the, the LTS because you're going to need to, to use, see the most recent user interface. Okay. Okay. Very good so that's great. We've got one on Mac OS and one on Linux that that gives us a nice positive benefit. Thanks very much. As you do that installation, you should be sure you install the recommended plugins and then install Jenkins Blue Ocean. And I should probably include a link here to the Jenkins documentation about Blue Ocean so that you're you can read about it. Dear, dear, dear, none of those are what I want. Maybe it's here. Oh, I know. Sub projects. It is. Just to be there. Okay, so I'll just have to go find my hang on. Yes, there it is good. Okay, so this site will give you an overview of Blue Ocean, in case you need to learn more about it. Okay, then I've got some bad instructions here that I need to correct so this step number six says ensure that you can fork a Jenkins CI plugin repository for the screenshot updates project. I don't want you to fork the Jenkins CI repository. We want you to fork the, the documentation repository. So, let me go. Yes, so this link is what it means to fork so this one gives you a tutorial on what the concept is. So that link really doesn't need to change. But maybe what we should do is this let's change this thing to just say the word fork. So that you know that that's what it's finding. And then here your documentation repository, right, because that one is where you where you're going to do your work. Okay, so the documentation repository is here. Now do for each of you do you have some past experience with GitHub or is this your first time using GitHub. I don't know. Okay, good. So, so I think I did interpret that both of you then have some experience with GitHub. Yes. Yeah, excellent. Very good. Okay. So. All right, and now what's what you'll be doing when you do this fork of the documentation repository, you then look at your own. So when I do it, for instance, if I click fork over here in the top right hand corner, and whoops, why did it do that I say fork and usually it pops up. Fork already exists there we go they've changed the UI a little bit. So, that's interesting. Alright, so but if I go to my fork of that. Whoops, here we go my fork. No, really, I meant my fork. Okay, I'll edit the URL like that. This is my fork and you'll see here in the top left hand corner it shows what I forked from. So, so this is my copy of it. And I'm a little bit out of date so I'm going to fetch the upstream upstream commits and now I'm current. And this is for you this will be your working copy, you'll, you'll make your changes in this copy and propose them as pull requests. Now, then these other steps are just to help you become familiar with Jenkins would encourage you to do those steps. Now, then after you've completed those steps those are good warm up steps because as you as you experiment with those things. You'll learn more about it and that will help you be ready to then look at the Jenkins documentation and start identifying places where screenshots need to be updated. So when we actually start the project. The first task is identify outdated screenshots in the documentation and create a list of them. So I think the way we would have you do that is we'll work from a Google sheet listing the URL of the pages, and then we'll sit together and prioritize them we think we should work on this page and this page. And that feel comfortable to you as a way of prioritizing those so we'll first do a collection where we collect the list of pages that that have images that we think are outdated. Okay, you're saying we we could check for the images, then the outdated images, then have them in the dog in the dog file. That's correct. Yes, that is so I was going to do an example of that and create this sheet for us together so that we've got the sheet and it'll be linked right here in this page. So that if you're okay that I create the sheet. So we'll just say use the Google sheet. So I think what we should do then is let's go here to Jenkins she go to Africa contribute on. We look here in projects and screenshot update. So what we need is a new sheet created and shared there so the two of you should be able to see this sheet outdated screenshots. And what I would propose we do is sit call it the page and the URL. And maybe we put, maybe actually here in the middle because that URL probably be long we put priority. And so what we'll do here is page will be the title me let's just call it that page title. And that is our way of deciding which things we should work on first, and then URL is the actual location of the page where we have the picture that needs to be updated. And so now let's go looking for a screenshot that needs to be updated. Actually, I guess, before we do that, could I have the two of you both confirm that you can read this sheet that I just created. Copy, let's see, copy that link and I'm going to paste it into the chat window here. So Soma and miracle could you both confirm that you can open that sheet. So you'll find it in the zoom chat window. I can also paste it into slack that may help as well. Also pasted it in slack. So that was one good. Okay, I can. Okay, that's too great. Thank you. All right, so now let's go find a page with a picture. And I admit that I'm going to do a little bit of cheating here. And my cheating technique is I'm going to let GitHub help me find pages with pictures didn't help nearly the way I'd hope it would. So GitHub will let me search for the word image. And yet it didn't find okay now I've got to do a different search. So this is my local copy of. Yeah, and there it is. Okay, so this is my, I clone this repository locally to my own computer just for my work for working purposes. And now I could use get grep. And now let's make that text big enough for you to actually read it. So I could, I could have searched the documentation and found these images or, and that's that's perfectly valid but I can also use this get grep command. Looking for the word image colon. And let's look at it. It's L. And it says things like, Oh, guess what, here are pages that have images in them blog posts and more blog posts. And if we look for the word book. Here is a page here pages that have references to the book so I can do searches using get grep. And if I just do content slash doc it will limit the searches there so here are some already some files that have have images in them for us to evaluate do we need to change any of these. And so, so this proved to me yes there are images here and they're all sorts of places that have images. And now we need to go look to see which of those need to be updated now a good choice is hey the tutorials probably need to be updated, right, anything in tutorials is a good choice so let's, let's look now with get grep minus L. These are just the file names. So we build a Java app with Maven has a picture in it. As does build a node JS and a Python app so let's go look at those pages. And, and so does the Hello World at tour so those are places where we can go look so I'm now going to look in tutorials on the Jenkins website so Jenkins documentation tutorials. So here in the using build tool section is build a Java app with Maven. So when I open that this hints to me that there's some picture in this and I need to decide, does that picture need to be updated. Ah, here we go. So here's a picture. Here's another picture. It looks like oh and here's another picture and another and another. So there are several pictures here that we would need to follow the steps of this of this tutorial. So do what it says. Hey, do this do this do this, and then compare the image. When we go to each of these steps and see is the image I see on my screen the same as the picture that's here. Does that seem clear to the two of you and how to approach it. Yes. I'm a bit confused about how you, you were able to check, check for the, the files to look for the images. You said you search for images on GitHub and didn't really find what you needed the other terminal you opened. I don't think I get how you did that. Very good question let's go through those steps together, if that's okay because this will be a good one for you to, to understand how that process works from the very beginning so on your computer either Linux or macOS. You might change to a temporary directory. And you might change to someplace where you're going to do work I'm going to change to a directory named TMP. And now we, I could say, if you have GH installed. I could just say GH repo clone Jenkins CI slash Jenkins dot or no Jenkins sorry it's not here. Let's, let's do it all the way. Let's go to the Jenkins dot IO repository. And the way I find that this is this is kind of fun actually the way I find that is I'm down at the bottom of every one of these pages. There is a reporter problem link and an improve this page if I click improve this page it will take me right to this repository. I actually want to improve it so I'm just going to take that piece off. Here I am this is the repository I'm going to use the code button over here to copy the URL to the GitHub repository so I just, again I click the green code button I click the copy button and now I have that. And now I can say get clone that. What it's going to do is clone the repository. And this copy of the repository that it's cloned will let me do work. One of the things that I can do once this phone is finished is I'll be able to use get grab to search it. So we'll let this keep keep copying data. So, in my directory now. I have a file folder called Jenkins.io. Here's Jenkins.io. And this is where I can now do searches with get grab. And that tells me all the files that contain the word image followed by the literal colon care. Did did that set of steps help. Okay, so, so now get grab has these really nice additional features like I can tell it to look through only a subset. So I'm going to only look through the dog. So content dog book here the here's the subset. And that found this. Oh, look, here's this file that I mentioned. And I could open that file like this. And see some of the text in it. Okay, here's this. If you're a dot Java developer who uses Maven. Now, in order to find that exact page on Jenkins.io. One easy way to do it is open the page and search for that text. I okay I entered that it offered exactly one page and I found it. So just choose some text from the page and search for it, and you'll usually find the page immediately. So then down at the bottom of this is just to be sure I got it improve this page takes me right to that page. In in the source code and I could actually make edits right here if I wanted to know I prefer to edit locally because it's easier for me but the two of you might choose. Hey, where's that image colon thing and here it is. Here's a picture embedded in this in this documentation. Question so far. No, no. Okay. So then back to the. So we've, we've been through the task we're trying to do the task of identify screenshots and we've, I think we've found one right because there are probably screenshots on this page that need to be changed. So, I'm going to note this and put it into my spreadsheet. I'm going to go ahead and mute the one telephone that joint I think that may be nafisa. So nafisa you've been muted, I'll unmute you periodically just to double check. So that the page title that we were using was build a Java app with Maven. So I've entered the title. Priority so I'm going to leave that blank for now and we've got the URL to the page. So now we could do the same thing with other pages there. And the idea is let's find those places. For instance, this tutorial for installing Jenkins on AWS. Oh, that one maybe may have important things to fix. And so again, I'm going to search for it. You will launch an EC to instance, I'm going to search for that text. So searching for that text you will launch an EC to instance so here it is. And we scan through this page. Okay that's an AWS screenshot so that's probably not changed by Jenkins. This is an AWS screenshot more AWS more, more, more. These are all AWS pictures so nothing here yet to change. Install Jenkins using putty that's nothing we need to change. Okay, here's a Jenkins screenshot this one will probably find is not going to change but and this one however might. So we've just identified another page that needs to go in our list of screenshots to be considered. Any questions on that step. Great. Okay. And we just keep going through that. So the two of you can work through that exercise. Part of this will also help familiarize you with the Jenkins documentation so you get a little chance to read the documentation. So this is what it says and explore it. So this is, this is the relatively easier step of, let's go find all the things that need to be updated. After doing that. We're going to have to switch to the next task which is is certainly going to take us more more challenge will be. We decide how to divide the work between us and maybe what we should say is prioritize the pages in combination with Mark wait. Lisa. So that work on highest priority pages first. And so in this case we might enter okay I think the tutorial is priority one and the Jenkins on AWS is priority 30. So we would tend to work on one before 30. Now that may not be our ultimate prioritization but that's that's what I do. You have a question. Yes please. Um, when will I didn't find the three shots to be updated if it's just on the tutorials. No no no it's anywhere in the documentation so let's let's look at some others so for instance here there's a security page that has an image in it. It's a helper documentation with us something in it. And so we may need to look at that page and decide should will it need to be updated. So if I search for that text. This is an image there on thankfully this image probably does not need to be updated because it's not related to the Jenkins UI. But we have to look at all the pages, at least all the pages content slash dog. Did that answer your question. Okay. We've got a lot of background noise. I'm going to double check. Okay, got it. background noise has stopped. Okay, thanks. Another example, we've got the using documentation here so doc book using search box. And here, every page in Jenkins has a search box and it's top right. So if I search for that. There's the page. And this image certainly will need to be done again. It's hard because it's very difficult to read. So and because it's, it's wrong. This image is in fact, this thing that says enable auto free refresh no longer exists hasn't existed for years. So, so this page definitely needs an update so we would put this page in the list as well. And the page title is search box. Okay, so reasonably comfortable with this process the process of collecting the places where the images are used. Okay, then, then the next step will prioritize, and then we're actually going to start doing the work and this is where the doing the work what I would assume you'll do is, put another column in here. owner. And maybe we would say, okay, for this one, we're going to put. How about we said, we're going to put miracle for the first and soma for the second. And that may not be what we ultimately do but the idea was miracle you would take some and soma would take some, and you put your name in there and say, I'm doing this one, I'm doing this one. And then you would go to work on actually sim creating the same situation that was done for this image and taking the screenshot and proposing it as a replacement. So that I think is the more complicated task. And this is the place where your skills will really come in. So, for instance, let's take this one. Here is the unlock Jenkins page screen. This was the first image we saw. And, and what you'll do is you'll you're going to see oh I need to run that first image so I am going to run Jenkins locally. In my case, I need to. I need to have a local copy of Jenkins so I am going to. I'm going to download a copy of Jenkins. Now I'm going to cheat a little because you will you will go here to download it. You will click the download and you'll choose the weekly release over here and you'll download it. And maybe mine's fast enough to do that. Oh yeah, that's not bad. So in my downloads folder. Here we see. Sorry, I have to show you this there downloads folder there's Jenkins dot war. The Jenkins war file is the thing that I'm going to run so I'm going to in my command window or on your Mac, you would do it from a terminal and on Linux from a terminal. I'm going to change to the downloads directory and say Java minus Java minus minus version first. Yeah, I'm running Java 11 Java minus jar Jenkins dot war. It's going to run Jenkins for me locally and I will try to get that same page that is shown on the UI edit copy. Okay, so remembering that the page was right where it was. Oh, this. Okay, here's the page I was trying to get the unlock Jenkins page and getting started. So when I open local host or 8080. There's that page. Now, I need to get a screenshot of that. And let's first look is this any different than what's in the documentation. The documentation looks like this. This page that's pretty much the same. Isn't it does that look very different to the two of you. I don't see much difference there. So I'm going to say that doesn't need to be changed. Does that seem okay to the two of you. Okay, so not going to waste the time to create an updated screenshot for that. But I think I'm going to need other things later so I'm going to continue here. And now let's keep going through these others so display the console. Stopping and restarting. Okay, now here's one where it says, During the during this creation of this demo application, this screenshot may need to be visited. And in order to do that, I have to do an awful lot of steps in the tutorial. I'm going to start those steps now, and I would do those steps go through them. And try to get to this point to see if this screenshot needs to be updated. I happen to know that this one doesn't need to be updated. And as we continue through, I think the rest of these on this page don't need updates either. So I think we've confirmed that this one did not need any change. So I would make a note over here. No change needed. We're going to do the same in weekly as screenshots. So that would complete the first task. And now we go looking for others so maybe we're going to say miracles going to take the search box as the next task. So, back here this all this is still running so it's going to be a little bit. But what I do is try to get to the same location as this describes this search box every page in Jenkins has a search box that's that you search box that's that you get to your destination quickly. So let's go see here. I have to answer. I typed wrong. Okay, and it says I'm ready to use it. Here's that search box now look how different this picture of the search box is that one compared to this one. Look in this top right hand corner you see how different that search box is compared to this compared to this picture. So we need a new screenshot of that search box. And I've been taking a technique I have Google Chrome, and I installed a tool called go full page that lets me take screenshots of web pages. You might want to do that if you'd like. So let me make a note in our document here that you could consider that it's free. I actually paid them a little extra so that I can get some features in it but it's free for your use. So if we go here. Mark captures his screens. In Google Chrome with go full page. If you if you want to try the same thing you're welcome. Let me see if I can find the link to that. There we go. And there are certainly plenty of other ways to do screenshots of web pages right. This is only one suggestion that you might consider you're welcome to do whatever works for you to get the screenshots capture. I'm going to actually use this captured screenshot and I'm going to do some editing on my copy because it makes it easy for me so I'm going to go ahead and crop this image. Oh, except you know what it took away my username there and that's not the right size so I made a mistake. I need to do this is this screenshot again. That is too small of a picture because I want the user's name to be visible there as well. So let's fix my mistake by using a wider screenshot like that. Yeah, that's a good choice. So now back to go full page. And I'm now going to edit now again you don't have to use go full page you could use whatever technique you'd like to capture a screenshot. I happen to like go full page because it's right inside my web browser and. Sorry I didn't hear you could you ask that question again. I can yes go ahead. I'm asking does does go full page save them on the browser. It will it will actually I will have to save it to my computer so right now I'm editing editing it on inside my browser so when I say done cropping. If I download and export download PNG, it will download the picture to my local file system. And here it is locally on my computer so now I have a locally. Did that answer your question. So did that answer. Yes, it did. So now the challenge is, I've got a local screenshot here, but it's got a name that isn't the right file name. I have to set the correct file name so that I can upload it to to the to as a poll request to the to the repository. And the way I do that is I've got to go find that file name. So, okay, so here we have this and one way to find the file name of the image is to view the page source. And if we look here for the image tag. Where is my where is image. Oh, it's isn't I am G. No. Oh, it's SVG. Interesting. No, I'm looking for an image. Where would it be. Okay, partial drop down drop down. Where's all of our text, keep going. Okay, search box is Oh, here we go. I'm G is the thing I was looking for. Okay, so. And so what this says is the file that is associated with this is in a directory named double dots double dots resources using search box dot png. So I really want to name this file box dot png. And now I need to get that file into a place where I can use it to some to make a change to that file in my development environment. In my case, it's easy for me if I do it this way. Let's get a. I'm going to copy it from my development my windows computer where I usually sit to the place where I do my my documentation development. And you won't have to do this because you'll do documentation development on your local computer in my case, I do my documentation development on a Linux computer. Okay, so now I want to find box dot png and there it is. Content doc book resources using search box dot png. So I did that with this get LS files command because it makes it easy to search the list of all files. Now the file that I uploaded I put in my home directory. So I'm just going to do a move that file into this location. Now when I say get status it's going to tell me one file has been changed. That's my new updated file, and that's the thing I want to include in a poll request. Now, in my case, I have some things that I like to use to optimize images. I wonder if we ought to have the two of you also do run image optimization. What do you think would you be willing to add an additional step here in our instructions to optimize the images. Okay, so I use this script. And I'm just going to bring it up here I it's been a long time since I did anything with this. Oh yes here we go. I use this right here. This is an awful lot. Let me just paste that somewhere I'm going to, I'm going to paste that entire thing, or I'll, I'll provide it to you separately because this has some convenience things in it which make it much easier. It, it uses the PNG crush program to make that uses a script. It uses the PNG crush program. So if you're okay with that I'll just put it at the end of this document on a new page, and then you can decide if you want to copy that script on to your local computer or do something else with it. Here we go, just a minute. That is an awful lot of script isn't it. Wow. And we want it in a career new and make it maybe. And you're both being very patient as I do this kind of thing. Thank you. Okay, so, so there's the script that I use in case it helps you. Okay, so I have a question do we just copy and paste the script into a terminal. Yeah, into into any file on your computer where you can run it. Mark places has the script on his computer. In a file, optimize, optimize.sh and runs it with the command. And you could do it however works best for you but this is, this is how I do it. Yeah, that address your question. Okay, so once we have the, once we have the scripts, pasted the images would be optimized. That's correct, right. So by running this script. What it did was it. It looked at the file at this file and said, Oh, hey, here's a way I can improve this file. So if I, if I were to do a comparison. Let's copy that other file up again, the file after image optimization and before so after optimization it's 2800 bytes. Before it was 5000 bytes. So we saved almost half the size of the file by running the optimizer. And by doing that that also improves the, the Google page rank algorithm because Google gives better page ranks to pages that are using optimized images instead of non optimized images. So by your optimizing the images, you're also helping us achieve better Google page rank on our documentation pages. So I apologize that I've gone on and on and on here. We need to check to see what are you. I think we should plan to meet again for further discussion after you've had some time to do the startup tasks. Would you like to meet later this week would you like to meet early next week. For me. Okay. Well, and if if early next week works great for you that's great for me if you need later this week, or two or three days into the project you find that hey you'd like to meet sooner. Just ask in Slack, and I can do a separate session, as needed. Okay, with us planning to meet next week at the same time I'll put a calendar item on the agenda, invite you all. And we'll do this, this kind of thing again. Sorry to the terror. Go ahead, Nafisa. Yeah, I thought this supposed to be a weekly thing. Isn't it. It can be absolutely I would like it to be a weekly thing. I don't know if that's looking for and so much should we make it a weekly thing. So, I think that would be easier. I'm a need less than a week though. So, as we go. Yes, you can always ask questions on Slack in case you need guidance. But when we want to have four meetings like this, I'm suggesting you have it the same time, same day, every week. If that's okay with you two, actually. Yeah, that would be okay. But if we need meetings, more meetings as we go. Yes, you can always request. Absolutely, so would be happy to meet with you Wednesday or Thursday, even Friday, if, if any of those help you happy to help, because in this early startup phase, you may very quickly go through the the steps and realize, oh, I need more help. And realize, oh, I need more help. Then let's, let's do a quick call will record it that way it's available for anybody who wants to see it. And they can, they can, you'll get what you need and others will get help as well. Great. And I apologize, I have to end because I've got to, I've, I've run over and I've got to get to a work, work meeting, but thank you. I'll make the recording available and I'll post a link to the recording page on our on on Slack and on community dot Jenkins dot IO. Okay, thank you very much. Thank you. All right, and Nafisa was this meeting time okay for you where we're still within. All right. So we'll talk to each other for sure in Slack. And we'll exchange messages there and then we will meet again next week. Thanks everybody. Thank you. Bye.