Guide to Open Source Contributions

so hi everyone in this video we're trying to contribute to an open source organization that comes to gsoc pretty frequently I'm trying to create a series where I'll just pick a project up and we'll do four things with it number one we look at all the existing vsoc projects and some future projects that this organization might have number two we'll try to set up the code of this organization locally number three will try to make an open source contribution number four I'll link a few issues and tricks and tips as to how you can solve some issues yourself few disclaimers please be very polite when you're trying to make an open source contribution and you have a lot of time six to eight months right now so go slow and steadily understand the code base and then maybe contribute when you're very comfortable with it all right then let's get right into it the organization for today is called the processing organization it's been coming in gsoc for around 12 years now in fact this is one of the organizations that I contributed to back in college the year that I was contributing to processing they did not make it to g-sac but luckily for me they were my backup organization my primary organization that year was Mozilla generally I've seen the trend that processing extremely active in g-soc so there's a good probability that they come into gsoc next year as well let's try to understand what they do and look at a bunch of their code base all right so this is the processing organization they have a bunch of small projects the ones that we'll be focusing on is this one called p5.js and a bunch of auxiliary libraries they have p5.js is sort of uh if you've heard of 3js it's like similar framework that lets you do things like creating games and a bunch of animations basically makes it easier for you to do visualizations and you can use it at not just the web using p5.js you can use it in Android they have the same sort of functions written in Python so you can create a python game and they're I think original implementation was in Java I could be wrong this processing native application was written in Java and was the first implementation of processing and they've ported this implementation into various languages one of them being p5.js the one that we will try to contribute to today so let's look at a few projects from processing last year if you look at the ideas list from last year and a bunch of projects that were chosen improving p5.js so this is in the library that we'll try to contribute to right friendly error systems and documentation most probably might be the same project p5.js see Yep looks like this in p5.js mobile and responsive design implementation of p5.js web editor so this is not in the p5.js project most probably but in this project the p5.js vibrator alrighty so luckily thankfully there were definitely a few projects in overall migrating VR library and adding images and markers to AR I don't know which project this was in let's see but seemed like a pretty sort of Hefty project to do I could be wrong just looking at the name if he feels fairly Hefty can't find the code all right let's move on p5.js p5.js.org site documentation and accessibility all right that might be a different over project um let's see so basically I found like oh there you go so basically I found a lot of projects in the p5.js ecosystem as I said they have a few projects processing in Java processing in Python Android but v5.js is the sort of common one when it comes to a Google summer of course they usually have a bunch of projects in them all right there's also a very nice project list that they have this page contains the ideas of how you can contribute to processing foundations work on processing if it adjusts so on and so forth let's look at a bunch of so as you can see they came to gstock in 2022 21 20 19 18 17. they also came in 2023 I think somewhere here they took a break which is when I applied um but let's see as you can see there are a bunch of ideas here already for example expanding prefab.js accessible outputs so as you can see it says we would like to build upon the current accessibility infrastructure which I think usually means to help the visually impaired or people who cannot hear well who navigate through a website let's look at a bunch of other projects there are a bunch of high priority ones although these feel like you'd have to understand their core rendering logic a little bit let's see if there's something more there are a bunch of projects in p5.js web editor I think this is the one that we just saw that came in she saw last year one very simple one to knock out of the park that I can see is internationalization and localization in the p5.js vibrator so maybe let's go to this project and try to contribute to it today so as I said this is step three where we are trying to contribute they have a bunch of projects that you can contribute to the one that we are contributing to today is p5.js web editor this is what the code looks like let's try to type deeper into understanding how they've built the thing that they have built here all right is a website for creating p5.js sketches so before that let me give some context as to what p5.js is back in the day it used to be a library that lets you do things like creating games animations things like these so if you look at their API let's look at a simple p5.js example clock so as you can see this clock has sort of been written using the p5.js library and all the animations that you see the tick sort of moving around happens through this code and this code sort of interpreted by the p5.js library so if you have p5.js library in your project like your HTML file and you've written all this JavaScript code it will be able to create something like this let's look at a basic example and let's try to run it maybe locally or on replit so there you go this is sort of a square that moves around based on where my mouse pointer is I think all right let's look at the code what does it say there is a draw function that sets the background to this gray color and if second mod 2 equal to 0 during every even numbered seconds or zero to four so on and so forth angle equal to angle plus Jitter sometimes they do that actually makes this guy rotate so U as the application developer just have to write this much logic and the p5.js library will sort of take care of rendering this Square on a canvas and this can be extended to adding lights more physics creating a ball that has gravity so on and so forth it's a very nice sort of Animation engine if you're trying to create games or things like this the thing that we're contributing to however is much simpler it's this thing called the p5.js editor which is a website similar to wraplet where you can go write some processing code which is basically code like this and then see your output on the right hand side so first step let's try to set this project up locally that's the most important thing First Step there is trying to clone the project so let's do that I'm going to copy this you should as well so let's open the terminal and try to clone this project foreign all right I've brought this project code locally what that means is whatever code you saw here in the project now exists on my machine and I've opened it in an ID of my choice The Next Step usually is to set up the project locally so you can make some changes and see that your changes are actually fixing the issues let's do that next let's look at the docs and what they say the editor is focused the P5 to JS editor is a website for creating p5.js sketches what are prefect.js sketches this thing right here with the focus on making code accessible and inclusive for artist designers education Educators beginners and anyone else so it's basically we'll see what it is when we set this up very soon Community get started make sure make your first sketch here so this is sort of the final website that we'll be able to set up locally the code for this website editor.p5js.org exists in this repository right here and I am trying to run it locally so I can make some changes to this code and be able to see those changes locally whenever I push my changes to GitHub and they deploy it to editor.p5js.org is when I will officially have made an open source contribution all right let's look at the setting up procedure refer to this documentation for setting up your environment let's click there manual installation Docker installation so there are two things you can do here for those of you who don't understand Docker Docker sort of lets you create this thing called a container and run all the code inside it so that your machine does not install a bunch of dependencies that you then have to get rid of after you lose the project or think of deleting the project so it's generally a good idea at least when you're starting out to run the project locally when you create a Docker container from a very high level understand this when you create a Docker container it self installs all the dependencies that you need and the right versions of it versus if you're trying to set this up locally you have to be on the sort of you have to install all the libraries in your local machine and then go from there which sort of becomes hard so it's generally a good idea that when you're starting to contribute and bringing the project up locally use Docker so your machine doesn't get bloated with dependencies that you might not need in the future all right what's the procedure there one thing you need to make sure is you have Docker and you have Docker compose installed very simple steps to follow go to the docker website just Google Docker install Ubuntu Max one and so forth and the other thing you have to install is Docker compose once you've installed both these things it should be able to Simply run this command that will sort of bring your container app and start the website basically how this runs under the hood is basically if you look at this Docker Dash compose Dash development.yaml this basically has all the code to basically describes okay bring up mongodb locally because that's the database that they use so if you look at this file from the very high level it says bring mongodb up locally how does it do that basically says there's this mongodb image somewhere on the internet that someone has posted just bring this up locally and start this in a container secondly start an application in the container the code of how to start it or whatever dependencies to install to start it exists in this thing called the docker file all right let me give you a very high level of what a Docker is so this is your machine and usually you have I have my code in this projects slash whatever P5 Dash editor folder but and usually before Docker was introduced the way you would run this is you would bring node.js npm whatever database you're using let's say mongodb on your machine run them independently so run a mongodb instance independently here in your machine and then bring node to your machine bring npm to your machine and then after you got rid of the project you still have mongodb you have to find it and delete it same for node and npm it brings a bunch of external dependencies that you may or may not need in the future into your machine question is how does it happen when you're using Docker and the answer is if this is your machine everything comes inside this thing called the docker container and whenever you get rid of the docker container you get rid of all the dependencies that you brought in so we will get all these dependencies in this case as well because the project sort of needs node npm and mongodb but they all get installed in a mini computer you could say inside your Big Mac computer so this is your Mac computer there's a mini computer running inside inside this mini computer you run node install node npm and mongodb you run mongodb and whenever you want to get rid of it you just kill the mini computer and all the dependencies all the things that you brought in sort of go away that's the high level benefit of using that's the high level benefit of using Docker when you're trying to set the project up locally the second good thing is you have to run a single command and there is a very long Docker file that contains what all is needed and what all needs to be installed to create this mini Machine versus if you're going down this route then you are manually installing node installing mongodb starting mongodb all that jazz versus in this case you run a single command and there are a bunch of files where you've clearly written okay this is how you get mongodb this is how you get node this is how you get npm and then Docker does its thing and gets the project up here in the docker container all right let's quickly look at the docker files and I'll explain a little bit what those are then let's just start the project locally and start contributing to it so there are two important files here one is this file the docker compose development.yaml it says what all Docker containers you need to run locally and in our case the answer is we need two Docker containers running locally one that should start a mongodb instance on our machine two that should start our main application which is the front end and back end of our p5.js editor this website right here how does it know where to install it from the answer is this thing right here image 4.4 is basically a Docker what's called image that's present in this thing called the docker Hub basically someone got all the code of mongodb compiled very well and pushed it somewhere on a place called the docker Hub and here we say bro pick mongodb from Docker Hub and start it in this container secondly start an app in the container and all the logic all the code for that specific container is in this Docker file it's not in Docker Hub that specific code isn't yet deployed to Docker Hub it's present locally in my machine you should pick all the code for this the main application from this Docker file so if I go to this Docker file if I look at it it basically has a bunch of verbose code that says okay this specific application needs to run on node.js version 16.14.2 so it basically gets a base node image from Docker Hub this thing right here so if I go to Docker Hub I can see a node Docker image it gets the specific version of node there this again has been created by a bunch of maintainers and inside this container that already has node installs specifically this version of node installed it does a bunch of things the important things it does is it builds the project copies the client copies the server and runs npm start so all these commands that you would have had to run locally on your machine are now running inside a Docker container and this file contains all the logic that will run inside the docker container so that when you go to this Docker compose.yaml it knows what to do when it starts the docker container we will see this very soon all right so let's do a quick recap of what Docker is and how it's used when you're setting up a project locally using Docker there is usually just one file that's important in the docker file in our case that Docker file looks something like this it has all the code that's written that in the pre-docker days I would have had to run locally on my machine so in the pre-docker days I would have first had to install node.js on my machine once I would have installed node.js I would have had to run npm install in that project after I would have run npm install I would have had to run npm rebuild node SAS then I would have had to run npm start to start the project look if you want to start it locally without Docker you can actually follow these steps and it will run without using Docker in fact if I go here to P5 JS web editor if I go to this documentation for setting up the manual install actually looks something like this it says install node.js which is similar to the first thing that's happening here inside the docker file install node.js after you clone the repo what does it tell you to do it says npm install that's exactly what's happening here in this step so all of these commands have been written in a long file and you can just use this file to start the project up locally in our case we need two things we need the project running we also need mongodb running which is why we create the compose file which lets you run multiple Docker containers together and that's this file right here so here we say Okay run a mongodb image I also have mongodb running locally and I don't have to bring mongodb to my machine and start in a different terminal this will start mongodb in a container cool high level of what Docker is and how it's used to start a project if you don't understand it it's fine you can either do the manual installation or you can simply use Docker to start the project up locally you don't have to understand how it works locally yet all right cool all right so the way to run it locally is usually there's a default Docker compose file which is this file right here this has almost the same things only this is meant for production we are running it locally so we are going to use Docker compose development the way to run the way to run the docker compose development file is Docker Dash compose Dash F Docker Dash compose development.yaml up what will this do this will go on to this file understand the containers that it needs to bring up that's what it's trying to create here so as you can see it says container mongodb running and container P5 JS vibrator recreate let's wait for it to start the container and then we'll proceed so as you can see it started two containers the mongodb container which is running and then the P5 JS vibrator container again where does this come from this comes from Docker Hub and starts mongodb locally where does this come from this picks up the files from this project and starts them in a Docker container where have I written all of this logic I have written all of this logic or things well the developers have written all that logic here in this top level Docker file so to start this second p5.js web editor container this was the file that was looked at and all these commands were run inside a container if I stop this what will happen is both the containers will go down and then I have to do some cleanup but it was very easy for me to start in a single command and then stop everything in a single command that's the benefit of using Docker all right let's bring it up again before you do that if you go through the readme it will tell you to do one more thing which is they have a top level dot env.example file it looks something like this and you need to copy this over into the dot EnV file and replace the right set of credentials in our case uh you don't have to replace anything because we're turning it locally but let's say if you are running mongodb on the cloud somewhere then you would have had to replace the mongodb URL uh for example here with your Cloud mongodb instance so this is the file that is usually changed when you copy your code over to production it contains all your configuration logic as to what DB to connect to what is the credentials for another backend service what is the credentials for example for mail gun to send out emails so on and so forth in our case when we're running it locally you don't have to make any changes all you have to do is copy over dot env.example.env then you're good to go so Docker compose up with the right file here and now if I wait for some time it should start front-end and back end for me locally and I think the port that it starts it on is let's see either eight thousand or eight thousand two all right so as you can see I have the p5.js web editor running locally it shows me the state here on the right this is development mode which is why I see this when we run it in production this sidebar sort of hides away this is just for debugging purposes because it lets you see the state of the application very well as you can see here it's basically sort of an editor similar to replit it lets you write p5.js code on the left and then you can see the preview on the right if I increase the height or the width of the canvas you can see the changes being propagated here let me increase the width and then decrease the height to 100 Maybe then as you can see I'm sorry decrease the width increase the height and those changes are propagated here so this is very similar to the plate only you can write HTML well specifically JavaScript code here on the left you can create files All That Jazz and this is the syntax to write an application using p5.js this is the place where you can preview your changes all right if I try to bring an example from here for example this angle example and paste it here I should hopefully see the rectangle on the right you don't see it completely but you get the idea you write P5 or JS cone on the left you see the output on the right now that we've brought the project up locally let's try to make a contribution just to confirm that we have plot the project up locally let's look for sketch files throughout our project I see the string in multiple places this is the one if I replace it with Sketch files 222 I should hopefully see that change being propagated here if I refresh as you can see sketch files 222 if I expand this you'll see the whole thing which means the project is running locally whatever changes I make here they propagate here which means let's say one of the issue was okay change this title from sketch files to um let's sketch something today then all you have to do is make the change here save this and then commit those changes push them to the website and then you're good to go you've made your first open source contribution but this is not a real issue so let's try to look at a real issue and try to solve it if I go to P5 dot JS web editor there are a bunch of open issues which means things that you should fix let's try to understand let's like look through a bunch of these and try to solve them foreign okay I think I found a beginner friendly issue very nice first issue that you can solve and even after I contribute as you can see there are a bunch of tasks so I'll try to solve one task and then you can pick up the rest let's look at what it says it says convert reap Legacy react class components to functional components it keeps the code base up to date and makes it easier for new contributors so this issue is so very similar to let's say this project wanted to migrate to typescript and when you do such a big migration you migrate file by file so you can basically break this down into a bunch of issues and convert JavaScript to typescript in various five so this issue basically is similar to let's say this project wanted to go from JavaScript to typescript you don't make that issue sort of on day 0 you slowly move each and every file to typescript so the goal here is in the past this project used Class components now it wants to use functional components it has migrated some components to the news format all the new components that they write are written in the new format but there are some that still exist in the old format so we have to fix all of those then convert them over to a functional component as you can see they've created a bunch of tasks here for example the overlay component needs to be converted from a class based component to the functional component if I look at the fix so this one was already fixed overlay one the ones that have a checkbox here have already been fixed the ones that don't still need some contributors to come and fix them if you look at the overlay component fix change if you go to overlay.jsx here as you can see so this used to be a class base component before now it is a functional component this is sort of the change that they made if you don't yet understand react this will be very weird if you've done react only the modern way then you understand this syntax okay this is how you create components you might not understand this syntax because this is how react used to be written a few years ago the goal is very simple given such an old type of component converted into a new type of component there are very subtle differences in how you used to write components before and after let me quickly explain them and then we can solve this issue the high level difference was how you access props and how you access state in functional components versus class based components so the way to access sort of props is something like this in class based components where you had a Constructor you would receive the props in the component and then you would bind them to this here and then later use them if you don't understand this don't worry about it let me show you a class based component right now we will convert it to a functional component and then we'll try to see the difference between the two let's look at a class base component here for example the search bar component let's go to our project locally let's try to open the search bar dot jsx file so yeah as you can see this file has a class search bar exchange at yank.component as I said this is how you used to write react components before but today it's sort of changed so as you can see this is a class Blaze component if you've written react anytime soon recently this is the way you write uh react component function search bar and then this returns whatever I div but as you can see here if you ignore all this logic above rather than returning HTML it sort of has a render function which returns HTML and rather than having State variables defined here for example in functional components this is how you usually Define State variables const search value set search value equal to use State whatever the way to do that when you had class based components was using something called the set State function so you would so you would call this dot set state with the state variables that you want to update and then you would use those values for example so tough here so the search value in this class B's component is a state variable and this is how you would set search value in the old component stack how do you set it today you use this is how you define the state variable and then this is how you sort of use the state variable and this is how you update the state variable now that I think of it this problem should actually be very easily solvable by an AI quite frankly I might I can just copy this and maybe paste this too chat.openia.com and it should be able to migrate it which sort of tells you how easy it is to do these things today back in the day it would require a lot of debugging which I guess it will today as well if you're trying to solve this but if I simply go here and say um convert to functional component please now the question is should we do this and the answer is you can if you understand everything if you don't understand everything uh then don't because you might make an AI base changed and then it will be very obvious it was an aibase changed and you know and if it's wrong then it's sort of your domain most probably developers maintenance are slightly finicky if you're using AI to code especially if if you're checking in wrong code um so make sure you're able to understand the whole change but I do feel this is a very simple thing for an AI to solve so it should most probably do the change correctly and then of course we will try to rectify it and make sure everything is working as expected all right it did give me the new component as you can see it's a function now and it isn't a class based component and it does have the state variable values that I discussed initially it converted so let's try to go through this at the top it carried the state variable which is a state variable that this class based component has as well as you can see this dot State equal to search value this dot props dot search term which means it is initialized with Search terms that comes from the props and as you can see here we say search value is initialized with the search term which comes from the props if you have not done react this might feel a little weird but hopefully if you don't react this part is fairly straightforward this part is Legacy so you don't need to understand it it's not used anymore but if you have to make such changes that you need to understand it um component will unmount which means whenever this component gets unmounted run this function how do you do this today you use an effect and then you return inside the effect the function that you have to call when the component unmounts so this part is similar to this part right here then they've defined a function here called handle reset search and we have defined the same function here this is the way you would Define member functions before this is how you define them now handle search change is is this function right here so the AI forgot one thing it did not uh it didn't Define this search change function this search change function isn't being used anywhere so the AI did not sort of converted which is fine and actually pretty good it decreases well a little bit it decreases in the bundle size because there was an unused function here and the AI was smart enough to understand it if you check this code in the developer will be happy or like the media will be happy that you removed some unused code from the sort of uh component okay this function same as this function and then finally this thing would render it and we return the HTML and then this is how you would use search value you would get it from this dot state and this is how we get search value now which is simply defined here at the top as a state variable so this mostly looks legit to me although I would like to test it so next let's first try to revert all our changes in search bar let's try to look at it on the website and how it looks then we will replace it and make sure that it looks the same works the same and then we will try to check our coding all right how can I see this on the main website there are a few ways I can see this guy's usage okay how it's being used let's see so it's about I don't see it being used anywhere okay there you go so collections.jsx uses the search bar component why does it choose it it simply exports it by connecting it to the state a little so let's try to see if this collection component is used anywhere and I do see it here all right let's copy this over and let's paste it maybe right uh here so let's try to put the search component here so that we can see how it looked before then we will make it our changes and make sure it looks the same and works the same the way to put it here is first let's see where is the code that renders this thing okay so it's actually sidebar dot title there you go so this is this fan that renders this thing right here if I replace this with high there I hopefully see hi there here it gives me a linked error let's do something like this I see either here now if I the component I can actually just put the search bar component maybe let's put the component component here sorry the collection component this thing right here which internally uses the search bar component the component that we're trying to change if I save this and refresh it gives me another lint error let's see uh so we should use single quotes here that's what it says all right save refresh there you go and as you can see in our sidebar we now have a nice search component that sort of works as we expect it to as you can see this action sort of changes anytime I make a change here we just need to make sure when we replace it with the new class base components the same thing happens all right time to join the code that we found on science GPT replace search bar.jsx with it and see if it works it gives me a bunch of linked errors I cannot fix these by hand so I'm hoping they have a script somewhere that lets me fix lint and they do indeed so all I have to do is run hopefully all I have to run is npm run lint fix and it will oh to do an npm install I think I need to use a different word all right so one thing you have to do for this to work is you have to use the 16.14.2 version of node.js this is one of the benefits of Docker now that we're running the npm Run lint fix command we're running this project sort of locally without a Docker which is why I have to do all these things of downgrading my node.js version because this project only works with version 16 of nodes yes um so one thing you have to do is downgrade the version of node.js 216 and then run npm run lintfix and this should just fix your search bar.jsx File specifically like the spacings and all that jazz that they expect once that happens you'll see that the file has been formatted correctly if I now go to localhost calling 8000 if I go here I see a very similar search bar most probably hopefully the same thing and if I make changes here I see them propagated here in state as well so seems like this is working as expected again let's try to push this to GitHub try to create a pull request and then try to compare what other changes that we made and if things look right all right so if I don't get status here and I try to first okay check out to a new branch fix Dash side not side perfect search bar one then here if I do a git add search 1.jsx get commit Dash m Ood search bar to be a functional component and then Fork the main repos so if I go to P5 JS web editor here I can click on the fork button and it will fall to the repository to my GitHub I've already done this once so if I go to github.com P5 js5 editor you see a fork of this project on my GitHub if I now the next thing I have to do is push my Branch to this code as you can see I already pushed a branch a few minutes ago the reason for this is this is the second time I'm shooting this part because the camera died so let's now go back here and then add a new origin git remote add origin 2 and then 0.8 to my fork okay this will be a space here and then get push origin to head that should push this branch over to my Fork and now if I refresh this it should give me a way to create a pull request so let me do that so here is when I'm requesting the maintenance that I've made a change please merge it I most probably will not create it so feel free to join this issue and then do it yourself you have to sort of follow a few things make sure npm run lint works correctly for you locally I think it will because we just ran lintfix before this which fixed all the link tissues so if you're an npm run lint most probably it will work next thing it says is make sure the tests are running locally so on npm run tests locally let me do that really quickly so make sure whenever you're making this change you to run these things locally and then only if they succeed do you create a pull request and here as you can see one test failed and the reason for that is I sort of added this collection to the sidebar component which shouldn't be the case so let me remove that chains I only added the chains for testing purposes so to see the search bar in the sidebar and the tests fail because you don't expect a search bar there and as you can see now if you're an npm contest it works which means this works the branch is uniquely named it is uniquely named it says HQ slash fix search bar one and then it is descriptively named and has an issue number for example it should say fixes the number of the issue which in this case is this issue right here let's see which was the issue this one right here so you should ideally put something like fixes this thing right here don't put this when you put fixes issue number eight and if this PR gets merged this issue will get Auto closed but this issue has a bunch of things to fix not just one so even if this thing is is merged you should not close this issue so maybe just write ref issue number rather than calling fixes issue number because this does not fix the whole issue it only fixes a part of the issue all right then create pull requests and you're good to go and I'm going to leave it as such let's just look at the changes one more time what did we do the search bar was defined as a react class based component we converted it to a function rather than getting props in the Constructor we get them here as arguments to the function we have a state variable here these guys had the state variable defined here in the class based function react component this is how you do or like create stick variables in a functional uh component component will unmount which means whenever this unmounted something had to run we ran that using this use effect right here throttled search change is a variable which is the same as this variable right here that we have defined below handle search chain was a function that we have defined here again the syntax is slightly different and how you are using State variables is different here you did this dot set State here you would do set search value and then finally this guy returns HTML this guy used to return HTML inside a render function this is how this guy used the state variable this is how we use a state variable that's the high level difference between Class based components and functional components and then you can just replicate this two from other components that are mentioned in this issue um again I wouldn't use an AI if you're still learning and secondly if you do use an AI please make sure you're rectifying all the issues correctly else if something small gets missed and uh it's very obvious that an AI did that specific thing if you have comments in there that seem very obviously written by an AI it doesn't leave a very nice impression so I would strongly urge uh for you to either fix it yourself if you're using AI make sure you Rectify everything make sure you test it locally make sure tests are succeeding locally lint is succeeding locally and only then create a cool request one issue I'm leaving you with is this one another issue I'm leaving you with is a slightly bigger issue which is this issue right here which says typescript support which is uh this editor only supports JavaScript for now replied as you might have known like support C plus plus Java every language out there so helping them add typescript support which means so that the end users can come here and write typescript code and not just JavaScript code would be a very impactful issue frankly mine is converted to a gstock project especially if you start to add a Java support your C plus support All That Jazz but this is a good issue to solve so that you are able to pave path to a gsock project in the future that is what I would do if I was you right now and there are some hints as to how you can succeed in doing this here might not be very straightforward but I would at least try working on this issue in the next few months so that there is a path for me to contribute to a project that adds Java support at C plus support as python support to this web-based IDE because as I said processing exists not just in JavaScript it has a python version it has a Java version so if you can bring that support to this web-based editor that's super impactful I think so although that seems fairly difficult to think of it but either way this is a pretty challenging issue I would solve this next however this is a slightly difficult issue to solve so maybe first try to solve a bunch of these and move a bunch of these over from class based components to functional components all right it's a very long video but hopefully it was helpful let me know what organization you want me to debug slash understand the code base solve an issue and set up locally in the next one and we can do that and see you in the next one bye bye

so hi everyone in this video we&#39;re trying to contribute to an open source organization that comes to gsoc pretty frequently I&#39;m trying to create a series where I&#39;ll just pick a project up and we&#39;ll do four things with it number one we look at all the existing vsoc projects and some future projects that this organization might have number two we&#39;ll try to set up the code of this organization locally number three will try to make an open source contribution number four I&#39;ll link a few issues and tricks and tips as to how you can solve some issues yourself few disclaimers please be very polite when you&#39;re trying to make an open source contribution and you have a lot of time six to eight months right now so go slow and steadily understand the code base and then maybe contribute when you&#39;re very comfortable with it all right then let&#39;s get right into it the organization for today is called the processing organization it&#39;s been coming in gsoc for around 12 years now in fact this is one of the organizations that I contributed to back in college the year that I was contributing to processing they did not make it to g-sac but luckily for me they were my backup organization my primary organization that year was Mozilla generally I&#39;ve seen the trend that processing extremely active in g-soc so there&#39;s a good probability that they come into gsoc next year as well let&#39;s try to understand what they do and look at a bunch of their code base all right so this is the processing organization they have a bunch of small projects the ones that we&#39;ll be focusing on is this one called p5.js and a bunch of auxiliary libraries they have p5.js is sort of uh if you&#39;ve heard of 3js it&#39;s like similar framework that lets you do things like creating games and a bunch of animations basically makes it easier for you to do visualizations and you can use it at not just the web using p5.js you can use it in Android they have the same sort of functions written in Python so you can create a python game and they&#39;re I think original implementation was in Java I could be wrong this processing native application was written in Java and was the first implementation of processing and they&#39;ve ported this implementation into various languages one of them being p5.js the one that we will try to contribute to today so let&#39;s look at a few projects from processing last year if you look at the ideas list from last year and a bunch of projects that were chosen improving p5.js so this is in the library that we&#39;ll try to contribute to right friendly error systems and documentation most probably might be the same project p5.js see Yep looks like this in p5.js mobile and responsive design implementation of p5.js web editor so this is not in the p5.js project most probably but in this project the p5.js vibrator alrighty so luckily thankfully there were definitely a few projects in overall migrating VR library and adding images and markers to AR I don&#39;t know which project this was in let&#39;s see but seemed like a pretty sort of Hefty project to do I could be wrong just looking at the name if he feels fairly Hefty can&#39;t find the code all right let&#39;s move on p5.js p5.js.org site documentation and accessibility all right that might be a different over project um let&#39;s see so basically I found like oh there you go so basically I found a lot of projects in the p5.js ecosystem as I said they have a few projects processing in Java processing in Python Android but v5.js is the sort of common one when it comes to a Google summer of course they usually have a bunch of projects in them all right there&#39;s also a very nice project list that they have this page contains the ideas of how you can contribute to processing foundations work on processing if it adjusts so on and so forth let&#39;s look at a bunch of so as you can see they came to gstock in 2022 21 20 19 18 17. they also came in 2023 I think somewhere here they took a break which is when I applied um but let&#39;s see as you can see there are a bunch of ideas here already for example expanding prefab.js accessible outputs so as you can see it says we would like to build upon the current accessibility infrastructure which I think usually means to help the visually impaired or people who cannot hear well who navigate through a website let&#39;s look at a bunch of other projects there are a bunch of high priority ones although these feel like you&#39;d have to understand their core rendering logic a little bit let&#39;s see if there&#39;s something more there are a bunch of projects in p5.js web editor I think this is the one that we just saw that came in she saw last year one very simple one to knock out of the park that I can see is internationalization and localization in the p5.js vibrator so maybe let&#39;s go to this project and try to contribute to it today so as I said this is step three where we are trying to contribute they have a bunch of projects that you can contribute to the one that we are contributing to today is p5.js web editor this is what the code looks like let&#39;s try to type deeper into understanding how they&#39;ve built the thing that they have built here all right is a website for creating p5.js sketches so before that let me give some context as to what p5.js is back in the day it used to be a library that lets you do things like creating games animations things like these so if you look at their API let&#39;s look at a simple p5.js example clock so as you can see this clock has sort of been written using the p5.js library and all the animations that you see the tick sort of moving around happens through this code and this code sort of interpreted by the p5.js library so if you have p5.js library in your project like your HTML file and you&#39;ve written all this JavaScript code it will be able to create something like this let&#39;s look at a basic example and let&#39;s try to run it maybe locally or on replit so there you go this is sort of a square that moves around based on where my mouse pointer is I think all right let&#39;s look at the code what does it say there is a draw function that sets the background to this gray color and if second mod 2 equal to 0 during every even numbered seconds or zero to four so on and so forth angle equal to angle plus Jitter sometimes they do that actually makes this guy rotate so U as the application developer just have to write this much logic and the p5.js library will sort of take care of rendering this Square on a canvas and this can be extended to adding lights more physics creating a ball that has gravity so on and so forth it&#39;s a very nice sort of Animation engine if you&#39;re trying to create games or things like this the thing that we&#39;re contributing to however is much simpler it&#39;s this thing called the p5.js editor which is a website similar to wraplet where you can go write some processing code which is basically code like this and then see your output on the right hand side so first step let&#39;s try to set this project up locally that&#39;s the most important thing First Step there is trying to clone the project so let&#39;s do that I&#39;m going to copy this you should as well so let&#39;s open the terminal and try to clone this project foreign all right I&#39;ve brought this project code locally what that means is whatever code you saw here in the project now exists on my machine and I&#39;ve opened it in an ID of my choice The Next Step usually is to set up the project locally so you can make some changes and see that your changes are actually fixing the issues let&#39;s do that next let&#39;s look at the docs and what they say the editor is focused the P5 to JS editor is a website for creating p5.js sketches what are prefect.js sketches this thing right here with the focus on making code accessible and inclusive for artist designers education Educators beginners and anyone else so it&#39;s basically we&#39;ll see what it is when we set this up very soon Community get started make sure make your first sketch here so this is sort of the final website that we&#39;ll be able to set up locally the code for this website editor.p5js.org exists in this repository right here and I am trying to run it locally so I can make some changes to this code and be able to see those changes locally whenever I push my changes to GitHub and they deploy it to editor.p5js.org is when I will officially have made an open source contribution all right let&#39;s look at the setting up procedure refer to this documentation for setting up your environment let&#39;s click there manual installation Docker installation so there are two things you can do here for those of you who don&#39;t understand Docker Docker sort of lets you create this thing called a container and run all the code inside it so that your machine does not install a bunch of dependencies that you then have to get rid of after you lose the project or think of deleting the project so it&#39;s generally a good idea at least when you&#39;re starting out to run the project locally when you create a Docker container from a very high level understand this when you create a Docker container it self installs all the dependencies that you need and the right versions of it versus if you&#39;re trying to set this up locally you have to be on the sort of you have to install all the libraries in your local machine and then go from there which sort of becomes hard so it&#39;s generally a good idea that when you&#39;re starting to contribute and bringing the project up locally use Docker so your machine doesn&#39;t get bloated with dependencies that you might not need in the future all right what&#39;s the procedure there one thing you need to make sure is you have Docker and you have Docker compose installed very simple steps to follow go to the docker website just Google Docker install Ubuntu Max one and so forth and the other thing you have to install is Docker compose once you&#39;ve installed both these things it should be able to Simply run this command that will sort of bring your container app and start the website basically how this runs under the hood is basically if you look at this Docker Dash compose Dash development.yaml this basically has all the code to basically describes okay bring up mongodb locally because that&#39;s the database that they use so if you look at this file from the very high level it says bring mongodb up locally how does it do that basically says there&#39;s this mongodb image somewhere on the internet that someone has posted just bring this up locally and start this in a container secondly start an application in the container the code of how to start it or whatever dependencies to install to start it exists in this thing called the docker file all right let me give you a very high level of what a Docker is so this is your machine and usually you have I have my code in this projects slash whatever P5 Dash editor folder but and usually before Docker was introduced the way you would run this is you would bring node.js npm whatever database you&#39;re using let&#39;s say mongodb on your machine run them independently so run a mongodb instance independently here in your machine and then bring node to your machine bring npm to your machine and then after you got rid of the project you still have mongodb you have to find it and delete it same for node and npm it brings a bunch of external dependencies that you may or may not need in the future into your machine question is how does it happen when you&#39;re using Docker and the answer is if this is your machine everything comes inside this thing called the docker container and whenever you get rid of the docker container you get rid of all the dependencies that you brought in so we will get all these dependencies in this case as well because the project sort of needs node npm and mongodb but they all get installed in a mini computer you could say inside your Big Mac computer so this is your Mac computer there&#39;s a mini computer running inside inside this mini computer you run node install node npm and mongodb you run mongodb and whenever you want to get rid of it you just kill the mini computer and all the dependencies all the things that you brought in sort of go away that&#39;s the high level benefit of using that&#39;s the high level benefit of using Docker when you&#39;re trying to set the project up locally the second good thing is you have to run a single command and there is a very long Docker file that contains what all is needed and what all needs to be installed to create this mini Machine versus if you&#39;re going down this route then you are manually installing node installing mongodb starting mongodb all that jazz versus in this case you run a single command and there are a bunch of files where you&#39;ve clearly written okay this is how you get mongodb this is how you get node this is how you get npm and then Docker does its thing and gets the project up here in the docker container all right let&#39;s quickly look at the docker files and I&#39;ll explain a little bit what those are then let&#39;s just start the project locally and start contributing to it so there are two important files here one is this file the docker compose development.yaml it says what all Docker containers you need to run locally and in our case the answer is we need two Docker containers running locally one that should start a mongodb instance on our machine two that should start our main application which is the front end and back end of our p5.js editor this website right here how does it know where to install it from the answer is this thing right here image 4.4 is basically a Docker what&#39;s called image that&#39;s present in this thing called the docker Hub basically someone got all the code of mongodb compiled very well and pushed it somewhere on a place called the docker Hub and here we say bro pick mongodb from Docker Hub and start it in this container secondly start an app in the container and all the logic all the code for that specific container is in this Docker file it&#39;s not in Docker Hub that specific code isn&#39;t yet deployed to Docker Hub it&#39;s present locally in my machine you should pick all the code for this the main application from this Docker file so if I go to this Docker file if I look at it it basically has a bunch of verbose code that says okay this specific application needs to run on node.js version 16.14.2 so it basically gets a base node image from Docker Hub this thing right here so if I go to Docker Hub I can see a node Docker image it gets the specific version of node there this again has been created by a bunch of maintainers and inside this container that already has node installs specifically this version of node installed it does a bunch of things the important things it does is it builds the project copies the client copies the server and runs npm start so all these commands that you would have had to run locally on your machine are now running inside a Docker container and this file contains all the logic that will run inside the docker container so that when you go to this Docker compose.yaml it knows what to do when it starts the docker container we will see this very soon all right so let&#39;s do a quick recap of what Docker is and how it&#39;s used when you&#39;re setting up a project locally using Docker there is usually just one file that&#39;s important in the docker file in our case that Docker file looks something like this it has all the code that&#39;s written that in the pre-docker days I would have had to run locally on my machine so in the pre-docker days I would have first had to install node.js on my machine once I would have installed node.js I would have had to run npm install in that project after I would have run npm install I would have had to run npm rebuild node SAS then I would have had to run npm start to start the project look if you want to start it locally without Docker you can actually follow these steps and it will run without using Docker in fact if I go here to P5 JS web editor if I go to this documentation for setting up the manual install actually looks something like this it says install node.js which is similar to the first thing that&#39;s happening here inside the docker file install node.js after you clone the repo what does it tell you to do it says npm install that&#39;s exactly what&#39;s happening here in this step so all of these commands have been written in a long file and you can just use this file to start the project up locally in our case we need two things we need the project running we also need mongodb running which is why we create the compose file which lets you run multiple Docker containers together and that&#39;s this file right here so here we say Okay run a mongodb image I also have mongodb running locally and I don&#39;t have to bring mongodb to my machine and start in a different terminal this will start mongodb in a container cool high level of what Docker is and how it&#39;s used to start a project if you don&#39;t understand it it&#39;s fine you can either do the manual installation or you can simply use Docker to start the project up locally you don&#39;t have to understand how it works locally yet all right cool all right so the way to run it locally is usually there&#39;s a default Docker compose file which is this file right here this has almost the same things only this is meant for production we are running it locally so we are going to use Docker compose development the way to run the way to run the docker compose development file is Docker Dash compose Dash F Docker Dash compose development.yaml up what will this do this will go on to this file understand the containers that it needs to bring up that&#39;s what it&#39;s trying to create here so as you can see it says container mongodb running and container P5 JS vibrator recreate let&#39;s wait for it to start the container and then we&#39;ll proceed so as you can see it started two containers the mongodb container which is running and then the P5 JS vibrator container again where does this come from this comes from Docker Hub and starts mongodb locally where does this come from this picks up the files from this project and starts them in a Docker container where have I written all of this logic I have written all of this logic or things well the developers have written all that logic here in this top level Docker file so to start this second p5.js web editor container this was the file that was looked at and all these commands were run inside a container if I stop this what will happen is both the containers will go down and then I have to do some cleanup but it was very easy for me to start in a single command and then stop everything in a single command that&#39;s the benefit of using Docker all right let&#39;s bring it up again before you do that if you go through the readme it will tell you to do one more thing which is they have a top level dot env.example file it looks something like this and you need to copy this over into the dot EnV file and replace the right set of credentials in our case uh you don&#39;t have to replace anything because we&#39;re turning it locally but let&#39;s say if you are running mongodb on the cloud somewhere then you would have had to replace the mongodb URL uh for example here with your Cloud mongodb instance so this is the file that is usually changed when you copy your code over to production it contains all your configuration logic as to what DB to connect to what is the credentials for another backend service what is the credentials for example for mail gun to send out emails so on and so forth in our case when we&#39;re running it locally you don&#39;t have to make any changes all you have to do is copy over dot env.example.env then you&#39;re good to go so Docker compose up with the right file here and now if I wait for some time it should start front-end and back end for me locally and I think the port that it starts it on is let&#39;s see either eight thousand or eight thousand two all right so as you can see I have the p5.js web editor running locally it shows me the state here on the right this is development mode which is why I see this when we run it in production this sidebar sort of hides away this is just for debugging purposes because it lets you see the state of the application very well as you can see here it&#39;s basically sort of an editor similar to replit it lets you write p5.js code on the left and then you can see the preview on the right if I increase the height or the width of the canvas you can see the changes being propagated here let me increase the width and then decrease the height to 100 Maybe then as you can see I&#39;m sorry decrease the width increase the height and those changes are propagated here so this is very similar to the plate only you can write HTML well specifically JavaScript code here on the left you can create files All That Jazz and this is the syntax to write an application using p5.js this is the place where you can preview your changes all right if I try to bring an example from here for example this angle example and paste it here I should hopefully see the rectangle on the right you don&#39;t see it completely but you get the idea you write P5 or JS cone on the left you see the output on the right now that we&#39;ve brought the project up locally let&#39;s try to make a contribution just to confirm that we have plot the project up locally let&#39;s look for sketch files throughout our project I see the string in multiple places this is the one if I replace it with Sketch files 222 I should hopefully see that change being propagated here if I refresh as you can see sketch files 222 if I expand this you&#39;ll see the whole thing which means the project is running locally whatever changes I make here they propagate here which means let&#39;s say one of the issue was okay change this title from sketch files to um let&#39;s sketch something today then all you have to do is make the change here save this and then commit those changes push them to the website and then you&#39;re good to go you&#39;ve made your first open source contribution but this is not a real issue so let&#39;s try to look at a real issue and try to solve it if I go to P5 dot JS web editor there are a bunch of open issues which means things that you should fix let&#39;s try to understand let&#39;s like look through a bunch of these and try to solve them foreign okay I think I found a beginner friendly issue very nice first issue that you can solve and even after I contribute as you can see there are a bunch of tasks so I&#39;ll try to solve one task and then you can pick up the rest let&#39;s look at what it says it says convert reap Legacy react class components to functional components it keeps the code base up to date and makes it easier for new contributors so this issue is so very similar to let&#39;s say this project wanted to migrate to typescript and when you do such a big migration you migrate file by file so you can basically break this down into a bunch of issues and convert JavaScript to typescript in various five so this issue basically is similar to let&#39;s say this project wanted to go from JavaScript to typescript you don&#39;t make that issue sort of on day 0 you slowly move each and every file to typescript so the goal here is in the past this project used Class components now it wants to use functional components it has migrated some components to the news format all the new components that they write are written in the new format but there are some that still exist in the old format so we have to fix all of those then convert them over to a functional component as you can see they&#39;ve created a bunch of tasks here for example the overlay component needs to be converted from a class based component to the functional component if I look at the fix so this one was already fixed overlay one the ones that have a checkbox here have already been fixed the ones that don&#39;t still need some contributors to come and fix them if you look at the overlay component fix change if you go to overlay.jsx here as you can see so this used to be a class base component before now it is a functional component this is sort of the change that they made if you don&#39;t yet understand react this will be very weird if you&#39;ve done react only the modern way then you understand this syntax okay this is how you create components you might not understand this syntax because this is how react used to be written a few years ago the goal is very simple given such an old type of component converted into a new type of component there are very subtle differences in how you used to write components before and after let me quickly explain them and then we can solve this issue the high level difference was how you access props and how you access state in functional components versus class based components so the way to access sort of props is something like this in class based components where you had a Constructor you would receive the props in the component and then you would bind them to this here and then later use them if you don&#39;t understand this don&#39;t worry about it let me show you a class based component right now we will convert it to a functional component and then we&#39;ll try to see the difference between the two let&#39;s look at a class base component here for example the search bar component let&#39;s go to our project locally let&#39;s try to open the search bar dot jsx file so yeah as you can see this file has a class search bar exchange at yank.component as I said this is how you used to write react components before but today it&#39;s sort of changed so as you can see this is a class Blaze component if you&#39;ve written react anytime soon recently this is the way you write uh react component function search bar and then this returns whatever I div but as you can see here if you ignore all this logic above rather than returning HTML it sort of has a render function which returns HTML and rather than having State variables defined here for example in functional components this is how you usually Define State variables const search value set search value equal to use State whatever the way to do that when you had class based components was using something called the set State function so you would so you would call this dot set state with the state variables that you want to update and then you would use those values for example so tough here so the search value in this class B&#39;s component is a state variable and this is how you would set search value in the old component stack how do you set it today you use this is how you define the state variable and then this is how you sort of use the state variable and this is how you update the state variable now that I think of it this problem should actually be very easily solvable by an AI quite frankly I might I can just copy this and maybe paste this too chat.openia.com and it should be able to migrate it which sort of tells you how easy it is to do these things today back in the day it would require a lot of debugging which I guess it will today as well if you&#39;re trying to solve this but if I simply go here and say um convert to functional component please now the question is should we do this and the answer is you can if you understand everything if you don&#39;t understand everything uh then don&#39;t because you might make an AI base changed and then it will be very obvious it was an aibase changed and you know and if it&#39;s wrong then it&#39;s sort of your domain most probably developers maintenance are slightly finicky if you&#39;re using AI to code especially if if you&#39;re checking in wrong code um so make sure you&#39;re able to understand the whole change but I do feel this is a very simple thing for an AI to solve so it should most probably do the change correctly and then of course we will try to rectify it and make sure everything is working as expected all right it did give me the new component as you can see it&#39;s a function now and it isn&#39;t a class based component and it does have the state variable values that I discussed initially it converted so let&#39;s try to go through this at the top it carried the state variable which is a state variable that this class based component has as well as you can see this dot State equal to search value this dot props dot search term which means it is initialized with Search terms that comes from the props and as you can see here we say search value is initialized with the search term which comes from the props if you have not done react this might feel a little weird but hopefully if you don&#39;t react this part is fairly straightforward this part is Legacy so you don&#39;t need to understand it it&#39;s not used anymore but if you have to make such changes that you need to understand it um component will unmount which means whenever this component gets unmounted run this function how do you do this today you use an effect and then you return inside the effect the function that you have to call when the component unmounts so this part is similar to this part right here then they&#39;ve defined a function here called handle reset search and we have defined the same function here this is the way you would Define member functions before this is how you define them now handle search change is is this function right here so the AI forgot one thing it did not uh it didn&#39;t Define this search change function this search change function isn&#39;t being used anywhere so the AI did not sort of converted which is fine and actually pretty good it decreases well a little bit it decreases in the bundle size because there was an unused function here and the AI was smart enough to understand it if you check this code in the developer will be happy or like the media will be happy that you removed some unused code from the sort of uh component okay this function same as this function and then finally this thing would render it and we return the HTML and then this is how you would use search value you would get it from this dot state and this is how we get search value now which is simply defined here at the top as a state variable so this mostly looks legit to me although I would like to test it so next let&#39;s first try to revert all our changes in search bar let&#39;s try to look at it on the website and how it looks then we will replace it and make sure that it looks the same works the same and then we will try to check our coding all right how can I see this on the main website there are a few ways I can see this guy&#39;s usage okay how it&#39;s being used let&#39;s see so it&#39;s about I don&#39;t see it being used anywhere okay there you go so collections.jsx uses the search bar component why does it choose it it simply exports it by connecting it to the state a little so let&#39;s try to see if this collection component is used anywhere and I do see it here all right let&#39;s copy this over and let&#39;s paste it maybe right uh here so let&#39;s try to put the search component here so that we can see how it looked before then we will make it our changes and make sure it looks the same and works the same the way to put it here is first let&#39;s see where is the code that renders this thing okay so it&#39;s actually sidebar dot title there you go so this is this fan that renders this thing right here if I replace this with high there I hopefully see hi there here it gives me a linked error let&#39;s do something like this I see either here now if I the component I can actually just put the search bar component maybe let&#39;s put the component component here sorry the collection component this thing right here which internally uses the search bar component the component that we&#39;re trying to change if I save this and refresh it gives me another lint error let&#39;s see uh so we should use single quotes here that&#39;s what it says all right save refresh there you go and as you can see in our sidebar we now have a nice search component that sort of works as we expect it to as you can see this action sort of changes anytime I make a change here we just need to make sure when we replace it with the new class base components the same thing happens all right time to join the code that we found on science GPT replace search bar.jsx with it and see if it works it gives me a bunch of linked errors I cannot fix these by hand so I&#39;m hoping they have a script somewhere that lets me fix lint and they do indeed so all I have to do is run hopefully all I have to run is npm run lint fix and it will oh to do an npm install I think I need to use a different word all right so one thing you have to do for this to work is you have to use the 16.14.2 version of node.js this is one of the benefits of Docker now that we&#39;re running the npm Run lint fix command we&#39;re running this project sort of locally without a Docker which is why I have to do all these things of downgrading my node.js version because this project only works with version 16 of nodes yes um so one thing you have to do is downgrade the version of node.js 216 and then run npm run lintfix and this should just fix your search bar.jsx File specifically like the spacings and all that jazz that they expect once that happens you&#39;ll see that the file has been formatted correctly if I now go to localhost calling 8000 if I go here I see a very similar search bar most probably hopefully the same thing and if I make changes here I see them propagated here in state as well so seems like this is working as expected again let&#39;s try to push this to GitHub try to create a pull request and then try to compare what other changes that we made and if things look right all right so if I don&#39;t get status here and I try to first okay check out to a new branch fix Dash side not side perfect search bar one then here if I do a git add search 1.jsx get commit Dash m Ood search bar to be a functional component and then Fork the main repos so if I go to P5 JS web editor here I can click on the fork button and it will fall to the repository to my GitHub I&#39;ve already done this once so if I go to github.com P5 js5 editor you see a fork of this project on my GitHub if I now the next thing I have to do is push my Branch to this code as you can see I already pushed a branch a few minutes ago the reason for this is this is the second time I&#39;m shooting this part because the camera died so let&#39;s now go back here and then add a new origin git remote add origin 2 and then 0.8 to my fork okay this will be a space here and then get push origin to head that should push this branch over to my Fork and now if I refresh this it should give me a way to create a pull request so let me do that so here is when I&#39;m requesting the maintenance that I&#39;ve made a change please merge it I most probably will not create it so feel free to join this issue and then do it yourself you have to sort of follow a few things make sure npm run lint works correctly for you locally I think it will because we just ran lintfix before this which fixed all the link tissues so if you&#39;re an npm run lint most probably it will work next thing it says is make sure the tests are running locally so on npm run tests locally let me do that really quickly so make sure whenever you&#39;re making this change you to run these things locally and then only if they succeed do you create a pull request and here as you can see one test failed and the reason for that is I sort of added this collection to the sidebar component which shouldn&#39;t be the case so let me remove that chains I only added the chains for testing purposes so to see the search bar in the sidebar and the tests fail because you don&#39;t expect a search bar there and as you can see now if you&#39;re an npm contest it works which means this works the branch is uniquely named it is uniquely named it says HQ slash fix search bar one and then it is descriptively named and has an issue number for example it should say fixes the number of the issue which in this case is this issue right here let&#39;s see which was the issue this one right here so you should ideally put something like fixes this thing right here don&#39;t put this when you put fixes issue number eight and if this PR gets merged this issue will get Auto closed but this issue has a bunch of things to fix not just one so even if this thing is is merged you should not close this issue so maybe just write ref issue number rather than calling fixes issue number because this does not fix the whole issue it only fixes a part of the issue all right then create pull requests and you&#39;re good to go and I&#39;m going to leave it as such let&#39;s just look at the changes one more time what did we do the search bar was defined as a react class based component we converted it to a function rather than getting props in the Constructor we get them here as arguments to the function we have a state variable here these guys had the state variable defined here in the class based function react component this is how you do or like create stick variables in a functional uh component component will unmount which means whenever this unmounted something had to run we ran that using this use effect right here throttled search change is a variable which is the same as this variable right here that we have defined below handle search chain was a function that we have defined here again the syntax is slightly different and how you are using State variables is different here you did this dot set State here you would do set search value and then finally this guy returns HTML this guy used to return HTML inside a render function this is how this guy used the state variable this is how we use a state variable that&#39;s the high level difference between Class based components and functional components and then you can just replicate this two from other components that are mentioned in this issue um again I wouldn&#39;t use an AI if you&#39;re still learning and secondly if you do use an AI please make sure you&#39;re rectifying all the issues correctly else if something small gets missed and uh it&#39;s very obvious that an AI did that specific thing if you have comments in there that seem very obviously written by an AI it doesn&#39;t leave a very nice impression so I would strongly urge uh for you to either fix it yourself if you&#39;re using AI make sure you Rectify everything make sure you test it locally make sure tests are succeeding locally lint is succeeding locally and only then create a cool request one issue I&#39;m leaving you with is this one another issue I&#39;m leaving you with is a slightly bigger issue which is this issue right here which says typescript support which is uh this editor only supports JavaScript for now replied as you might have known like support C plus plus Java every language out there so helping them add typescript support which means so that the end users can come here and write typescript code and not just JavaScript code would be a very impactful issue frankly mine is converted to a gstock project especially if you start to add a Java support your C plus support All That Jazz but this is a good issue to solve so that you are able to pave path to a gsock project in the future that is what I would do if I was you right now and there are some hints as to how you can succeed in doing this here might not be very straightforward but I would at least try working on this issue in the next few months so that there is a path for me to contribute to a project that adds Java support at C plus support as python support to this web-based IDE because as I said processing exists not just in JavaScript it has a python version it has a Java version so if you can bring that support to this web-based editor that&#39;s super impactful I think so although that seems fairly difficult to think of it but either way this is a pretty challenging issue I would solve this next however this is a slightly difficult issue to solve so maybe first try to solve a bunch of these and move a bunch of these over from class based components to functional components all right it&#39;s a very long video but hopefully it was helpful let me know what organization you want me to debug slash understand the code base solve an issue and set up locally in the next one and we can do that and see you in the next one bye bye

Transcript for:Guide to Open Source Contributions

Transcript for:
Guide to Open Source Contributions