 There we are. So let's go for the presentation. So my name is John MacMason. I'm interested in various aspects of helping developers contribute to the Jenkins project and particularly interested to everything that is creating friction. Hey, we see that we have Elizabeth joining us. Hey, hello. So I just made the presentation. And for the last thing, practical thing, I'm located in Brussels. So I'm just one hour later than you in the UK. Elizabeth, you're located in England too? No, I'm currently in Nigeria. Oh, okay. Oh, what time zone is that? So what time is it for you? Currently, now it's six minutes past two p.m. Okay, so we're on the same time. Okay. ZNAP is now at one o'clock. And Mark, I don't ask because he's way out of my working hours. It's very early for him. So coming back, so I've been interested in things that create friction for developers in one technology I came to was Gitpod. Gitpod is a solution for simplifying the setup of a development environment, having a lot of traction right now, and has a very interesting free tier. So one can already do. I like it. So I'm biased somehow. And what I use it most, and I hope that I will answer questions that you have. So I will show you a little bit what it is, what I do with it, do a short presentation of what I do, and then we'll open up to any questions or clarification you would like to have on that. Mark ZNAP and Elizabeth, is that okay? That's great for me. Yeah, that looks great for me too. Okay, good. I'll explain afterwards, put everything back in picture. I'm just going to start this. There we are. I did not prepare my environment, so that's a way. Okay. So what I want to show is very clearly, we have Jenkins.io. I have documentation, and I want to create something new, and I quickly show you what is the process. And I'm going to start a new blog post, for instance. So as I'm lazy, I have my shortcut for that. So first question, do you see my screen correctly? Should I make it larger? For me, this is great. Yes, please. I think you should make it larger. Okay, great. So larger is good then. Okay, so don't hesitate to interrupt. Why doesn't work? It doesn't help me do that there. Is this better? This is very big. Good to go like that. Yes, that's great. Filling the screen is. Yes, thank you. Right. Okay. So this is my fork of Jenkins.io. So forked from, so this is my work environment. This is the easiest way to start working. And the first thing that I do is, I have. John Mark, sorry, you offered to let us interrupt. Is it okay if I interrupt? Sure, definitely. Okay, so there's an indicator already that there's one action you need to take before you do any get pod stuff. Right below where your mouse is hovered, there's a line that says you're one commit behind Inframaster. Could you click that fetch upstream button? Yeah, sure. Thank you. Okay, that way. One of the crucial things for me is I need to stay up to date on my fork and that fetch upstream button does it. Okay, now back to you. Sure. No, no, no, that's very good. So I need to prepare that a little bit better. So about GitHub, there's some configuration to be done before, so you need to create your account. There's some automation and plugins that you can install. I skip all the setup part. We can discuss that afterwards. So here, everything is in place. What I do, I click on my get pod button. And what get pod will do, it starts the environment, asks me first what environment I want to use. So now, and while that's starting, I don't have a get pod button on my mine. And so that's part of the initial setup that you said we would look at, we would discuss later. Correct. Okay, thank you. So this is part as well explained. What is happening right now on the screen is that as I refreshed my fork, he's rebuilding everything and preparing everything automatically. And the rules how to do that is defined in a configuration file in the root of the project, meaning that every project that you want to use get pod on, the maintainer can but not has to have to, can configure it and say, well, this is the recommended way of using get pod. What I'm going to do, I'm not going to wait for the pre-built. We're already going to show otherwise I need to say too much nonsense. What's happening now, so the pre-built stuff is something that can happen in asynchronously. And here we paused that for a moment. It's creating a container and all the infrastructure in the cloud. So it starts all the tooling required. If you want to ask a question or so, you need to say it clearly. Yeah. So while this container image is being pulled, could you show us in another tab the contents of that get pod YAML file that you mentioned? Oh, it's already opening. Don't disrupt. It looks like you're talking about the IDE now. Yeah. I have here a step between, because I'm experimenting with IntelliJ, so it can go quicker than that. So I will open a browser editor, which is Visual Studio Code. This I'm going to, these messages. So I need to set up the window correctly. I put it that way. So this Visual Studio Code is running in the cloud. I have nothing installed on my laptop. I had, beside enabling Git pods, which is mainly configuration, I had nothing to do. I have everything ready and you recognize the regular editor functions. So in the terminal window, what I want to show you is the asynchronous process of preparing my environment. That's happening here. And in fact, to answer Mark's question, this here, the get pod.yaml is the configuration that the maintainer makes available to contributors and say, this is the way you want to do. Now here, I stopped that for a moment. No, I'll explain it afterwards. Let's skip that. But that is the preview. That was the preview. Yeah, it starts. But otherwise, I'm mixing you all over the place and I'm sorry. So explaining the Git pod configuration, this is something that the maintainer makes available. It has different parts. The part here, tasks, Mark, I'm getting into a rabbit hole. I'm sorry for that, but I'll make that quick. This is everything that's required to set up the environment. And this runs automatically. The tooling is in place, everything. This part here explains what are the visual studio code gadgets or plugins that I want to have available for me. And here I want to have the ASCII doctor integration. I could add, for instance, a plugin that I will do shortly for spell checks, which comes very handy. Somebody hinted me too good. So this is where I configure the visual studio code. This is just to say that my pods will expose data on port 4242. And this is, as you can see here, it started the preview and it makes it available on that port. This instruction here says it's available on the internet. We'll come back on that. I just tried to explain it a little bit. Let's go on with the demonstration. These are the ports that are open by my pods. The other ports are required for the IntelliJ integration. The one we're interested is the 4242. This is where the test environment is exposing the web server. No, Jean-Marc, how did you get that list of ports? Sometimes I get confused by the visual studio code interface. Did you hover over that thing on the bottom? I clicked. You see here, you have the list of ports that are exposed. I clicked on it. And that brings it up in the explorer in the top left. I can also reach there. It's a remote explorer. I select the port and here on the right, I can have different... So it shows the characteristic. I don't know what the others do. I click this one that makes... I want to open that port in the browser. And as you've seen here, this is... Hold on. Okay. So you have it. This is here. This is a pod or an instance in the cloud that's really for me and for this particular instance. And I believe you can make that available to others. But let's say this is a preview. And it uses this editor. And as you can see, this is the log file of what's happening. So each time I navigate in there, let's say we go to blog. Happy new year. For instance, when I go here, I see all the pages that have been served. So you have the web server interface. But we'll try it out and see how it works. So what do we have right now? We have an editor running in the cloud. So no resources used locally. It has a complete environment with the required tooling. And it started a private test instance of the website with a web server and exposed that on the internet. So I can access it that way. I can check later. Can I share that link as long as my pod is running? I believe we can have several people doing a preview. But it means that I'm ready now to do actual work. So I go on my other terminal sessions. It's not too noisy. So I have it here. And I'll start working. The first thing that I will do is I create a work branch. And I'll name that demo branch. So it is always the first thing that needs to be done. A good habit, never work or try to do anything on the master branch. So this is where I can do the change. I can decide if I commit them and push them to my GitHub repository. But this is a habit that I'm trying to have. So we're not going to create a new one because I'm lazy. I'm just going to modify the Happy New Year page, a blog post page. And we're going to see how that changes. So I go in content. So there you need to have a good understanding of the structure of the file system. And you need to know where the sources are located. So and this is the source. I'll make that smaller. So this is the source of the Happy New Year page. As you can see, the ASCII doctor integration is working, highlighting the different things. And it also has the automation for that, like Link and the various ASCII doctor automation for that, not the purpose of this presentation. I'm going to do a modification and say we're going to change the year and say 24. I explain you later why. So we made the change on it. And we're going to see if it reflects on here. And as you can see, this is a preview. It immediately took the modification I made here. It uncommitted anything. And you immediately see the change. I even going to hijack the, or not hijack, but I'm going to add myself. I think this is the name I'm known on. So I'm not sure that this is, and let's say I do a refresh of it. And I crashed. This is because this is nice. It crashed. Why? Because this is probably not known. So I have an error in it. Yeah. Go ahead, John Mark. In this case, this, what it was looking for, if you go back to that failure page, the failure page actually tells us what's failing. It's just painful to read. It says the file with personal information, content data, authors, markiweightspacejmsen.adoc is missing. It thinks that's a single author named markiweightspacejmsen. And therefore, so what is the actual use a different syntax to identify multiple authors. And I think it's authors colon rather than authors. So multiple authors. Right. Exactly. So authors. And then put us on two lines. Right. Now we'll see if I remembered the syntax correctly. And I do a refresh. And there've been cases in the past where I had to do a, I had to stop the compile that was running, stop the build that was running and started again. So this is something that I do. Now, what is very interesting here, you see the interactive process of trying out and having an immediate feedback. And this is very powerful with no installation required locally. This was my sales pitch. So what we're going to do here, I'm going to stop the compile bigger. So you see, so I interrupted the server. And I restart the run. And just need to do that. Now it duplicated it and we're going to see if my theory, so it's still starting up here. And we have P O N there. And it's so it's exactly the same. So here I'm, I'm, I'm really easy. I'm just going to see if this one refreshes there it is. So there it works. So what I've been mumbling in my beard was that it by default opens a new opens a new browser window for your preview. It's not necessary to do it because you can reuse the existing one. If you, if you're not sure of what you do, where just open it and just go, it's the navigation is quickly done. So this is how I edit the thing. So what I then could do, and this is just using the Visual Studio Code integration. So how do I commit? I can use the git interface here and do this is change. And this will be local to the pod going into too much detail again. But I'm going to commit that in my local thing. And I can now publish the branch, which I will not do because this is just a noise for that. But you can also do it from the command line. So you can do a git status here, nothing to do. And so you have all the required commands. I'm just wondering if git. So I assume that the file has not been saved yet. I'm not sure I understand why. Oh, did you commit? Oh, just to show that the git integration worked. Okay, I'm sorry. I missed the commit. Thank you. Okay. So this is the commit. So I just show you, I don't know how familiar everybody is with that. I just make a change there. So it works like that. This, by clicking here the plus, you do the equivalent of a git add. The change is staged. Here I create my commit message. And to do the actual commit, you do that with the check mark there. When you hover over the stage all changes, here I can unstage them. And this is the git integration in Visual Studio Code. Now you can do that with the regular commands here. You have a full git command line interface available here. So I'm going just to revert this. So I'm going to unstage that. So just showing here the git interface. And I'm going to discard the changes. And doing that. This is for the people that like their mouse or trackpad. But it's easy. Honestly, I use that interface very often. But depends how good you are at typing. And other people, everybody does it this way. So this was a short demonstration. I don't know what else. So this is the principle. Mark or Elizabeth, can you tell me, did you understand what I tried to show here, the principle? And do you have questions? So at least for me, I think I understood, but now the questions are around, how do I as an individual get to the point where it is as easy to start this kind of development as you did? So how do I get the git pod button in my GitHub account? Or how do I do other steps like that? Right. Okay. I'll cover that. Zena, do you have questions? Yes. So I think my question is also related to what Mark asked. And specifically on setting this up, is there any specification that my PC has to meet or do I need any configuration on my laptop before I'm able to do this setup, git pod setup and things like that? This is the good news of that. The only thing you need is the working modern browser. So I'm using Google Chrome. It works also with Firefox. On your machine, on your machine, there is only the browser. So, okay. Go ahead. All right. So based on what Zena just asked, I was also going to ask a question because I noticed that you are using a Mac with a Linux and not Windows. So does this, can this setup also work with a Windows PC or it's just for that course? So I think it even works on an iPad. That is the dumbest terminal that it exists. Now, without a keyboard, I would not be able to do any sensible work. But it works on a MacBook. It works on a Windows machine. It works on a Linux machine. There's no prerequisite. This is why I'm so excited by this technology. There's no requirement, no Docker container or tools to be installed. You just need your browser as a window into the pod. All right. Thank you very much. Thank you. Thank you. I have another question. You used Visual Studio Code for this presentation. Is that the only idea that is available on GitHub currently or are there other ideas that one could use for this development? Yes. Yes and no. So the easiest thing is, so this browser, but no, so this editor IDE works in the browser. So you have nothing to install. Nothing is required. But you're stuck with Visual Studio Code because they made the work of having a web version of their tool. They have in beta right now the IntelliJ integration. Now, this works a little bit different. It requires you to have the IntelliJ or another IDE installed on your machine. It's a pity that I cannot draw. But so what we've seen here, everything is in the cloud and you just use your web browser as a window to it. The other technique that you can use is that you have your IDE and it runs locally and you just open a command socket and it will send the commands via a tunnel. And so the editing will happen locally. All the compilation, the testing, and all that will run in the cloud. So you can run a local version of Visual Studio Code. There are hints that NetBeans works. IntelliJ, I tried it two days ago and it works only with the paid version, the ultimate. So it does not work with the community edition. So if you want to have the easy thing, you have to use Visual Studio Code on the web browser. Otherwise, you start to have potential issues. What IDE would you have been interested in? For me, Visual Studio Code is okay. I'm just asking for people who are not used to Visual Studio Code or who are used to other IDs like IntelliJ that you mentioned. Is there any option for that? But for me, Visual Studio Code is perfect. Okay. Good. Okay. For the other IDs, I'm experimenting it. I'm trying. They're mentioning several solutions for that. But it does not come out of the box. So I did not give up yet. And it's a very rich project. So they're changing at the fast pace. But the IntelliJ integration, they want to make money a bit. Then I'll stick Visual Studio Code then. Because for me, it's IntelliJ, Visual Studio Code or IntelliJ. But I think I still prefer Visual Studio Code because it's lighter. It's more lighter than IntelliJ. So most of the time I use Visual Studio Code. So that works for me. Yeah. So it's possible to run your personal copy of Visual Studio Code that you have on your laptop with all the tooling and settings that you have. So it's possible. I made that work. I don't have a demo ready for that. So that works. It makes the setup of the environment easier. Here, it each time needs to install and configure the plugins in the environment you have that I'm showing here, for instance. But here it works. I made Java development. And here I count maximum three minutes to set up everything for a Java project with everything required for the demo. So I can even... So when you're developing a plugin, I don't know how familiar you with that. But the Maven HPI run, you can make it run there. What else can I explain or tell you? Mark's question of how do we set it up? How do we integrate with GitHub? How do we have that GitHub icon showing GitHub? I tell you one thing. I forgot. So the honest answer. I made that in when was it? In October or November. And I'm an old man. So I need to go back on tape and reload that in my brain. You just follow the instructions. And there are a few tips that I can give. So if you're interested, I'm going to create a new account and take notes how it is. But the documentation from Gitpod is well done. You just experiment. And I can make a short checklist how to do that, Mark. John Mark, would you open the Gitpod.io site so that they can see how it looks and how it appears? Sure, definitely. Just making this broader. You don't want me to say that I'm old. I regularly tell my children they're not allowed to use the old word. That's not acceptable. So I just opened Gitpod and it opens by default on the workspace. A workspace is a pod with all the file system to run the environment. So what we're just running now is this one here. And I created 28 minutes ago. Here you don't see it, especially with the light. So these are the workspaces. So this is the account. And I'm going to talk about that. I didn't prepare that. So I don't know how to do that here. We'll work through the interface and so you'll see how it works. So this is the free tier open source one. And that means that you have 50 hours of running, of development environment running. So now the clock is ticking because I have this environment open. And you see here where I am standing. So I didn't use a lot during my holiday period. So I only used that. So 50 hours if you're working cleanly, this is okay. Now if you pay a little bit more than you have 100 hours and this is very, very comfortable. Now what you need to do is when you finished doing your work, I made the modification, you just close this window here. And this will shut down the environment, the workspace. It's done. It's enough to just close that browser tab. Yes. Now the bad habit is, oh, it's already 12 o'clock. I need to go downstairs and have lunch. If you leave your tab open, the clock continues ticking. Now it will wait, I think, for half an hour and it sees no activity. It will kill it. So there is a timeout. And if I haven't pushed my changes from the local copy that's there in the get pod workspace, they would be lost, I assume. They're lost. Exactly. So it's important that I remember to push, not just do the development and then close it thinking it will have saved it automatically. So I do a get commit and then a get push to push it up to my fork. Now this is because I want to stay in my free tier. So if I want to do that, now if rich people can go to the unlimited one and they don't need to care, they can keep it open. So just a little detail. So see when you're in unlimited and so on. This is well enough for especially for open source projects where you don't do it 50 hours. This is two weeks worth of full-time work. So this works well. You can have team plans that mean that you have a team integration. Integration, this is where the security is done. Where you associate, this is where the magic of associating your get pod account with GitHub. And it shows what are the permissions that it uses. So it's really well integrated in the GitHub security model. If you use a default and follow the instructions for setting it up, it makes sense. I made, you can also decide what are the repository that you allow to work with get pod with your account. Because your GitHub account has a lot of privileges. And so what I said, get pod is only allowed to work on my forked repo. So I cannot make any changes. I cannot access them. So you can tune it. References, preferences. This is where you can use the way you decide how it looks like. These are the desktop IDEs. So these are, and this is what I've been experimenting. I should remove that. And this is a new thing that I've heard about. I did not use. That means that you can upload your settings. So that is yet another reason not to use local IDE. And then we have here, these are projects. This is another gadget that they're offering. Is you can define here that it's, you know, the setup phase that we had at the beginning when I started the pod. You can have a process that will prepare that for you permanently. So each time there's a change on that commit is merged into it. It will prepare everything, store it on file. And when you start your Gitpod environment, we'll just copy it over and you win a couple of minutes like that. This is interesting when you have very, very large projects. So gadgets to make your life easier. So don't get bothered by that. So this is a problem when you start showing old settings and everything. It is, you're going too many details. So I hope I did not lose you. Mark's seen up in Elizabeth. So I was actually curious if we wanted to, if there are more topics that you wanted to go over, we should go over those, John Mark. But I wondered if we should ask Xenob or Elizabeth to share their screen and let's walk them through registering for Gitpod.io. Because I could do it, but I think I'm already registered. And so if either of them would be willing to be our test case here, we could have them share their screen and we could do a talk through with it. Just checking where I think this is getting started. So they have nice videos. So where is it explained how to register? Introduction. Now we can start. So I'm okay with that. I'm not sure they're willing. They may say no, they don't want to but they can. Actually, that's a really great idea, but I'm actually listening on mobile. Oh, okay. If you're on mobile, that won't work. All right, good. And Elizabeth, you're on your mobile too. I am on my PC, so I could use my name as a test case. Here, what you can do is, so what we can do is that I figure out what the entry point for it is. But you just go to Gitpod.io. You look a little bit in the documentation and what's there. And you just start, you create the account and it will work through. I found the experience super easy to do. Try that. If you get stuck, you have questions or you want that we organize a screen sharing session or something like that, just ping me. Okay, can I share my screen right now? Yes, I'm free to mine. Yes, go ahead. Thanks for my screen. So Gitpod.io was telling me that an error. This is, are you on a corporate network? Oh, I've been having lots of issues. Yeah, it looks like a network issue. Yeah, so in my case, it brings up a log into Gitpod dialogue when I go to Gitpod.io. Yeah. Now, I don't know. Yeah. So I think this looks like a proxy error or something like that. And it could be that that someone is defending you or, you know, if you're inside of a corporate environment or inside of a network, it could be that they're intentionally blocking. That's good to know for us because if it's often blocked, that would make it less effective for people who want to contribute. That's a good point, Mark. I didn't think that. I've been spoiled after five years outside. I don't think this is a network error because my other links are going properly. So I think it's not something that has to be a network. Elizabeth, are you using your office network or is this your personal? I'm using my personal network. I'm using my personal MiFi. I have my personal network here. Wow. Interesting. So I wonder if they've done a geographic blocking. It's just my PC and my phone that's connected to it. Nothing else is connected to it. It's my MiFi. I'm going to ask the people from Gitpod. So you're located in Nigeria, right? Yes, I am in Nigeria. Okay. I'll ping them and put you in copy of the mail to know if there's some geolocation. Do I drop my mail carefully to that subsequent? I think Mark has the mail. Yes, he does. And I think it's in the invitation. I'm just checking. Yes. I don't know how to pronounce your name. I'm sorry. Yes. Lisa Okalme. Is that correct? Lisa Okalme. Yes, Okalme. Yes, Lisa Okalme. Did I pronounce it correctly? I know it's hard, but I want to learn it. I want to learn it. So never been to Africa. So I don't know. So many things I need to learn. So if you'd like, I could certainly share my screen so that I'm not fully configured the way Jean-Marc is. That way, at least we've got a record of some steps that are used. Yeah. Yeah. And although I'm using my mobile, I was just able to register and connect to my GitHub account. I think I should also check with my mobile whether it should work. Great. Okay. Well, and we're almost out of time. So it's well suited. It actually worked on my mobile. Good. Okay. That's it. Right. So I need to figure out what happened. So here, I'll talk to the Gitpod people and put you in a copy of my mail. So we know about that. Probably we could have maybe like a screenshot of what's shown when you try to access it. So you could use that probably as a reference when talking to Gitpod people. I don't know if that would be useful. Yeah. I've taken your screen. I would share it via mail. Okay. Right. Well, we're going to see because I have a few contacts there. Now you understood that I like the product. I try not to be over enthusiastic about it. But I think there's really great there's music in there. So we but it's a pity it didn't work. Thank you so much. I also think like this looks really exciting. Coming from someone who knows how should I put tedious it can be trying to set up Jenkins.io locally run it and things like that, especially when you're dealing with Windows, I've gone through that pain and I was about to go through that pain again before Mark mentioned that there's something called Gitpod and I'm really excited to try this and not have to go through the stress of setting it up on my PC. So I think this is really great. Thank you so much. I'm pushing for that because I put myself in the position of students or people that it takes a lot of time to set up everything before even starting anything. And this is what I liked with Gitpod. Once it you have the base installed. Oh, I just want to change that and you fire it up five minutes done and your your is submit and this is what really said being a light went on and I'm I'm really excited for that. So Mark, the demo was unstructured. It was done with my guts. We like thank you so much. Right, we like visceral direct from the heart presentations. Well done, John Mark. Well done. Okay. So I tried to to write either a blog post or documentation or or material about that. What do you think about that, Mark? That would be great. For Elizabeth and for Xenob, we'll also we can use Docs Office Hours on Thursday to answer any questions. If you have questions, don't be shy about bringing a question there and saying, hey, I I'm having this problem or that problem and we'll talk about them. John Mark won't be available at that time. It's after his the end of his day. But I can I can do my best to help and we'll work it out together. Right. Yeah, we can work. So I'll see what I can do before then. Just try to use the documentation and see if I'm able to set it up on, you know, do something. And if not, then I'll bring you my questions. Thank you so much. And don't hesitate to put your experience, the problems you had to solve. And we put them in a pot in a pot, not a pot, a pot together. And so we can write a frequently asked questions for if other people want. Okay. Thank you very much, Mark. Thanks so much. So what a recording recording will likely be available in within the next 24 hours, if you need to refer back to it, I assume that all of you are okay that I post this publicly. I'm going to post it to community dot Jenkins.io so that people can look at it and see, hey, how do you do this? How do you do that? John Mark, thank you very, very much. It's been it's been a pleasure for me. All right. Bye, everybody. Okay. Bye. Bye, everybody.