From 26bc6f4af29316a14543196626a41f5bd12f767d Mon Sep 17 00:00:00 2001 From: Amigo <49749100+aamigo@users.noreply.github.com> Date: Tue, 9 Jul 2019 13:59:13 +0200 Subject: [PATCH] Updated 047 Tutorial on forking JCB snippets so you can share your snippets with the rest of the Community (markdown) --- ...snippets-with-the-rest-of-the-Community.md | 20 ++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/047-Tutorial-on-forking-JCB-snippets-so-you-can-share-your-snippets-with-the-rest-of-the-Community.md b/047-Tutorial-on-forking-JCB-snippets-so-you-can-share-your-snippets-with-the-rest-of-the-Community.md index b98cc01..8a1fa19 100644 --- a/047-Tutorial-on-forking-JCB-snippets-so-you-can-share-your-snippets-with-the-rest-of-the-Community.md +++ b/047-Tutorial-on-forking-JCB-snippets-so-you-can-share-your-snippets-with-the-rest-of-the-Community.md @@ -1 +1,19 @@ -Now that we've given you a general overview of how things work in the new snippet manager I would like to Take You The Next Step and that is [00:00:11](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m11s) Showing you how to take shared snippets And Basically Share them There are two things that should be done one is You need to fork The JCB community Snippets On GitHub so you'll need a GitHub account [00:00:32](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m32s) The second thing Is once you Done that You would export the Snippets here that you would like to contribute And you will add it To this Repository that you forked and cloned down to your developing environment And you would make commit messages on every change that you are Intending to make The second thing you would then do Although there are few steps in each of these [00:01:03](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m03s) Things the second thing is that you would then Make a pull request So this tutorial I'm just gonna focus on the first Few things you need to do And that is just to get you Basically ready All the things you need to do until the very point when you are now ready to actually do a pull request Ok so now There are three things that I suspect we can do one is to improve an Already existing snippet [00:01:36](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m36s) And then contribute that to the community The second thing is to move an existing snippet To a new type this isn't something I hope will happen often but it can't happen That a snippet is in a specific type that is not the best suit for it And You might wanna suggest us changing that So that would be a second thing And the third one Would be to actually add a whole new snippet completely So I think I'm just gonna demonstrate all three of those [00:02:11](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m11s) And then we'll see how that all plays Out Until the very point where we are now ready to make a pull request Ok so first thing First We need a Repository And we need to understand git Now if you do not know git this tutorial is not gonna cover that You need to do your homework And study up on git [00:02:34](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m34s) When you do an export of a package for example if I were to click here on these three here and Click share Snippets You see that it ends up showing you a bunch of links here and one of them is quick start for git On udemy now this link here I just searched on Google found it I didn't actually watch it myself I hope it's not bad If you got a better one Please share it On on the issue somewhere and we'll improve this link even if you've got your own and you would like us to promote your [00:03:10](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m10s) Tutorials on git sure Why not We will support those who support Our community Very gladly The reality is You need to get some Your head around some of the git basics So that you can actually do A [00:03:26](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m26s) Fork of the JCB Snippets on GitHub And then make a pull request So this Video here is the one I'm busy making so it will end up that being that link how to fork the JCB Snippets and get all this done And then after that I'll be making this video So we'll get to that in a moment Ok Now [00:03:49](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m49s) You need an account on GitHub And so I'm just gonna use my own account And Simply go and Fork the repository and use that as demonstration So needless to say I've got an account I've gone through all those hoops And now I'm simply gonna fork this repository To get to this repository It's this URL up here Another way to get here [00:04:16](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m16s) Is You go to get Snippets And then the moment it's finish loading there is a link that you can click which will take you To the GitHub repository and it's this link over here so we could click that And as you see we end up at the same place Good So you could either just Follow this URL up here all good just use that link But you wanna get to Joomla component builder snippets And I suppose [00:04:47](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m47s) Since everybody that wants to contribute will need to fork it I suspect this number here will change And of course well this repository is like 6 days old I haven't even finished the ReadMe So there will be a lot of changes to this Repository and it will improve So the first thing you do is click on this button here and forked repository This will then ask you to select Where you want to fork it if you belong to organizations whatever but then Obviously by then I don't need to explain to you how it works But if for some reason you don't then you select your personal or whatever organization [00:05:27](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m27s) You want the fork to appear in And then it will basically To copy this repository For you Ok so now it's busy doing that I'm basically just copying it into my personal Account Now Good practice Every time you wanna make a change Then [00:05:48](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m48s) You need to follow a few steps In Having this repository in sync With the What we call upstream repository this VDM.io Joomla component builder Snippets This is what we call the upstream or the master branch or whatever you wanna call it this is the main branch the one that is being used inside of JCB yours isn't directly being used So whatever changes you make here would not necessarily affect us at all [00:06:20](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m20s) But you obviously want to Commit your changes to your branch And then Make a pull request To the upstream branch Where you would like to share this with the community So that's Sort of a quick explanation we'll do this slowly I'm not gonna do the pull request Now in this tutorial [00:06:42](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m42s) But I'll take you all the way up to the wall and then we will get the ladder out and finish that in the next tutorial Okay so once you've done this forking of the main Repository You need to clone this repository down Do your own developing environment And So that is what I'll do next You would click on this Clone and Depending on how you've got git set up on your developing environment [00:07:14](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m14s) Again those tutorials you'll need to do before coming here You would select either SSH or https I I would suggest using SSH as this is of course more secure But ok So we'll just copy that and then we go To I'm just gonna use my My users home folder for now So here I am in the command line I'm running Linux so if you're using Windows [00:07:47](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m47s) You'll need to watch tutorials on how to do git in Windows You might end up using a tool intead of command line But if you did that you'll also be having had watched Tutorials to help you sort of understand what I'm doing Ok So first thing first we gonna clone it let's get that done So I've cloned it And we now have a folder Call Joomla component Builders snippets So I'm gonna change into that folder now [00:08:19](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m19s) Just with CD and a folder name and there we go I'm in the folder And if I do ls - la we'll basically see all the files That was on GitHub now in that folder Now we wanna change these files But we're not gonna change them directly We're gonna use JCB to do the dirty work for us Because we might have issues with the scapeing and all kinds of things that can go wrong So just to have good convention Whatever changes you wanna make even if you wanna add files or new libraries whatever You do it in JCB and you do the export package [00:09:01](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m01s) And you should check that if you export a snippet That it has three Values always set And that does three values Well we'll obviously scrutinize it when you make a pull request But that those name conventions be standard It's quite important as you can see this we've got the library name Uikit And it's uppercase u and space lowercase v2 And then Common with uppercase [00:09:33](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m33s) And that is the type of snippet And then it's the name And obviously to json file So This is the convention And at this stage JCB builds that for you And I'm gonna show you where it gets this convention Because to follow this Convention is what's really gonna be very important If you're making new snippets For the Uikit version 2 library [00:09:58](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m58s) You need to ensure that your Version 2 naming in your system is the same as it is here And if you are adding a new library that isn't already in our repository Then you need to make sure that you use The naming as found well As others will understand it as most common The most common naming convention And obviously if you need help on that you can open an issue and ask one of the admin Do you know Maybe give you a suggestion of what [00:10:31](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m31s) To call the library But The Long end the short end of it is Please stick to the naming conventions Don't change this Uikit To maybe . . . remove the space here or something like that Because it will end up Just mismatching things and we want to avoid that from happening Ok so first thing we've done we've forked a repository and we've now cloned it [00:10:56](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m56s) to offline developing environment And now I'm going to go to get sorry to JCB And I'm gonna export those three snippets the one is a new snippet The second is a changed or improved snippet And in the third is when you actually move a snippet to a different type The one I'm gonna target here Is let me see I Think it's it's not showing here now Oh here it this [00:11:27](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m27s) Foo table The foo table snippet Is at the moment in layout I think there is a better Type for this snippet and I know the snippet isn't At this stage maybe the best We could add some more foo tables snippets but I'll leave that to some with you to do The point is I'm gonna move this one To the tables because it is a table right So that'll be the one change I'm gonna make then I'm gonna add one snippet [00:11:57](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m57s) To the Uikit version 3 Since those snippets are still coming I'll just add one as demonstration and then I'll make a little change To one of these Snippets just for demonstration okay great let me do that Okay first thing a foo table click on that one Change it from layout to tables I'm not gonna make any other changes I'm just changing the type And this brings us to those three values that must always be set And shouldn't change unless it's really seriously necessary the one is the name You wouldn't wanna change this name unless you are a hundred sure it should be changed [00:12:41](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m41s) Because in effect it will create a new snippet Because the way the snippets work it builds the file name With name The library and the type those three components together makes up the file name so changing any of those will in effect create a new snippet And create a duplicate And that's really what I wanna would try to avoid that And I realised This is gonna what I'm doing here now is inevitably gonna cause that [00:13:14](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m14s) And I think it will show you why it's not a good thing to do it But so I'm doing this more really for demonstration And so the ideal reality is that when we add a snippet we add it to the correct library and type And give it the correct name From the start and that we don't need to change those three again If we do Most of the time I would expect That your pull request will be rejected Because this will mess up many conventions and cause Many duplicates across the system [00:13:49](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m49s) In other developers' environment where they would import this new snippet And yet end up having two of the same snippets Okay I've said enough about that I hope you understand that how important this part is So let's go ahead save and close The next one I'm gonna do Is basically add a new snippet now since I've done this recording a second time now I've already done that and this is a accordion snippet here So you'll see that I've basically [00:14:23](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m23s) Set that it's a JavaScript snippet It's an accordion It's you Uikit Version 3 I look down these types I'm wonder if some one of the other guys won't be better at this identifying of the types So I might even Not be the guy to make the call on this I really am open to some With better perspective who maybe knows these libraries assorting [00:14:51](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m51s) ideas better I think there's a place called What is it Collapse Yeah collapse Accordions could also fit other under this Collapse I suppose let me do that I know the first accordion we added for Uikit version 2 That is actually found on the JavaScript But then we didn't have these many types [00:15:17](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m17s) So I'll just add it under this Collapse for now Again I realise that this might be a difficult thing And What could help is going back to the actual library itself This This is the The link for it And to try and see how they Organized it and that's the problem [00:15:40](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m40s) Uikit Didn't Give more breakdown besides calling it components So it's only called a component it doesn't Specifically added into a type whereas Bootstrap is doing a little better at that So that's why I'm not sure exactly where to place it now Since Bootstrap Actually adds it under Collapse [00:16:07](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m07s) I think we won't go wrong to do the same So save and close There we go we got now A very crazy risky change of a type And a new snippet now let me take another Snippet and just make a little improvement to it I think I would use this Uikit version 2 Form snippet I'm just gonna add some usage information to it [00:16:37](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m37s) Okay there we go And I'm gonna save it save and close So now I've made a change Basically two This one This one and that one and So those are the only ones I'm actually going to share This one when I created it it added my details As the Contributor [00:17:00](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m00s) Which if you created a snippet it will add your details you will notice when you create a new snippet It takes a while before it's finish saving and it's because it's actually phoning GitHub And trying to see if there isn't a snippet Already with that Relationship as I explained in a previous tutorial And that takes a while and I'm still wondering if that's the best idea If we should continue doing that I'm open for [00:17:28](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m28s) Suggestions But at this stage we're just trying to confirm that That's snippet Wasn't already created And to avoid conflicts Now That means if it doesn't find it it adds your details which is set here in the option Global options And as I explained in that tutorial You can add your details and you would get some you know exposure out there in the community [00:17:55](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m55s) With your details there With these that I've just changed The contributor will stay the same But your name will come in on the plain Layout And your GitHub name will display there as recognition for your support Okay so now and next thing share snippets Now the reason I made it that it actually compiles a zip File [00:18:23](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m23s) is because it's easier to move around We could argue that we might want to just have it zip Or move Rather move the Files right into your local cloned folder And so I am thinking at this stage maybe We should add a switch here in the global options That could make you choose it to do this or the other depending on what is most convenient for you [00:18:52](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m52s) So I'm gonna go take the snippet And then I'm gonna go and basically unzip it into That Repository that we've cloned So here we are in that folder I'm gonna first on zip it right here There there is those three files That we want to make part of the repository Now like I said I Actually clone the repository right into my user [00:19:23](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m23s) Folder So let us go to that folder Just gonna cut this here Cut And then paste It right into that folder Now we are updating one file So it's asking it already contains this file Now so when you make an improvement on a file you'll obviously have to replace it [00:19:49](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m49s) So we click replace Now that you've Added those two new files And you have Replaced one of them The third one You'll see that we now have this Foo table The tables version And we have it also [00:20:09](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m09s) at the layout version now one of them needs to go We don't want duplicates So you have to remove this one but Don't remove it via the The Interface Use git To remove the file So that you can also add a message So that when you make your pull request and we see their files removed that we'll know why you did it [00:20:32](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m32s) And obviously then it will become a discussion And this we'll demonstrate in the next tutorial Okay so let's get back to command line Here we are we can say git Status to see what happened and we see wow ok one of been modified and these two have been added The first thing we wanna do is remove the one that we don't want Now because we have chosen to leave spaces within our file names You'll need to In put the file name in quotations To ensure that it actually you know [00:21:10](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m10s) Not misunderstand what you doing So we will go do a git rm for remove And then the file name So You could click tab after typing foo table about there and then lay out and it Well basically grab the name for you And then click enter So it is removed it if we now and do git status we'll see that it's in the deleted Area and you need to actually [00:21:45](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m45s) Make a commit to Explain what you've done so it's git Commit m And removed table layout Since I Moved the Foo table snippet [00:22:00](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m00s) to tables To the tables type So We're not at this stage exactly sure How we are going to What kind of conventions we gonna follow with these commit messages There are reasons to have a few conventions here I just haven't had time to sort of get my head around it so for now we'll just is keep it basic But I'm sure as to community develop these things will become more [00:22:27](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m27s) Explained and so if you need help we'll most probably have some documentation up At some stage to get you to know how to Correctly do a commit message I mean just what you should say first and what you shouldn't say and those kind of things Okay so I've got a key that signs off every commit I make You may not have that don't worry about it it's not really compulsory at this stage It's just the way I can make sure that everybody knows [00:22:59](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m59s) That it's me Okay Now The next thing here is we wanna Add these new file so if we do git Status we'll see that now that file has been Made part of the commit At the branch or the local files of this clone [00:23:18](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m18s) And we wanna add those two other files The first one I'm gonna target Is adding the foo table which we just removed So git Status Oops Okay so now we've got that one added And we need to give it a commit message Now I understand When we are doing such [00:23:47](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m47s) a dangerous thing as moving a snippet to another type I would expect us to actually make a commit message for every Step of what we're doing But if you're adding like whole new library and you got like 300 new snippets that you're contributing I wouldn't mind you adding all of that on the one commit message Just making sure that the it was exported via Joomla's component Builder So that we don't have You know the wrong kind of code within those snippet files And obviously we will at [00:24:25](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m25s) Pull request we'll scrutinize those files and we will have to look through them to ensure That it won't make any one system unstable And so we basically got to police some of this to do ensure that nothing gets you know Merged into the master branch That will put every anyone at risk as much as as far as we are able to To prevent that we wanna do that Well we're working with snippets so it should be fine but just in case we wanna be careful So when you're making changes to one specific snippet And you're not really like doing [00:25:03](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m03s) Many at a time I think be as detailed as you can in your commit messages Because the more we know of what you're doing I think the easier it will be too merge it into The branch and to basically approve your pull request So the next commit message I'm just gonna say Git commit Message update the foo table layout foo table dot json to foo table Table Foo table dot json [00:25:33](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m33s) since it is more correct snippet type Okay so that would then Deal with that added file Now we want to add the accordion which is the the new snippet So it's just git add and we can select the file name There is a shortcut to this It's when you use the dot git dot add and that's usually when you have lots of files and you just wanna add them all so it's like I explained if you doing a whole bunch of snippets for a specific library I would suggest doing library per library instead of just mixing them all up [00:26:10](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m10s) Because if we target a library and just add a bunch of stuff that's for it And then have a commit message just for that then we could explain that within the commit message That it's for the specific library and so forth Because usually with new libraries You know it's good for us too sort of take it one step at a time so now we've added that file now just got to add a commit message for it I'm just gonna say added the Accordion snippet For Uikit Version 3 as demonstration On how this should work [00:26:46](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m46s) Okay and then just again Sign off that Commit Git status We'll see okay we've got one file left and we already three commits Ahead Of our Our Branch that we have Cloned [00:27:10](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m10s) So just this last file which is the You know the update we made So We're gonna first add the file And then add a commit message To explain what we did Added the users paragraph to explain how to use the Uikit version 3 layout form Yeah I think just writing out the file name like that is Clear enough [00:27:38](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m38s) And enter again just sign off on that Again if you don't have Keys to then It's good go Google this Start signing your request But at this stage it's not a requirement as I said Okay if we do git status now we'll see that we are four commits ahead Now this is here where We wanna do a few more things [00:28:06](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m06s) To your Commit or sorry to your Your Forked And therefore cloned repository what we wanna do something that will keep Your Repository in sync with the upstream So I'm just gonna go and Google this quickly This is a very helpful document [00:28:31](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m31s) We first need to do this configure a remote that points to an upstream repository So let's first look at that one So this gives you a little explanation Of you know what you should do So First you'd basically List the current Remote branches That you have [00:28:56](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m56s) So I've done that and it shows that I've got this git or the origin And it's the fetched and the pushed Remote branches Now It's gonna say specify a new remote upstream repository that will be in sync with this fork So we'll use the original owner and the original repository Name Which In our case is the following The original owner is this [00:29:28](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m28s) VDM Dot io and The repository is this one So to get that name You could come here And Yeah think you could get This name here There we go That part [00:29:48](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m48s) copy So going back to our tutorial We will now type the Git and I suppose you'll have to get the https version Since you will not have permission to Work with the SSH version So let's get the http one Which basically means that you should click http here And then grab that version just copy it And [00:30:16](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m16s) Control Shift v will paste it in Into command line or some Command lines even gives you this option to paste With a mouse Okay so now we got that there And we press enter So it's now Typo Let me try again [00:30:37](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m37s) I didn't add remote add So it was looking for a file Okay there we go now if we did that version we'll see now It has this upstream there as well Okay so that was just to add the remote or the upstream Repository to the cloned Version that you have here [00:31:01](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m01s) Now let's go see how to keep it in sync So here it says that you would open the terminal And you would do git fetch upstream And it will basically pull down This And make sure that there is a branch called upstream Master then you would checkout master And switch to the master branch and do merge upstream master Which if while you were busy doing the snippets improvements and things [00:31:30](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m30s) And there's been commits to the master branch You wanna make sure That you Actually before pushing all this upstream Before making a pull request that you first merge The already changes from the master branch Into your branch and then make your commits on top of that This will help to try and avoid You not having specific commits in your branch I know it gets a little bit complicated [00:32:01](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m01s) but If you get stuck We will most of the times be able to just help you Figure this out again But like I explained in the beginning To know how to work with git Is really your responsibility So that You when you are wanting to communicate or sorry to Share with the community snippets [00:32:23](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m23s) You know how to first make a pull Request a sorry merge Your upstream with your master branch And ensure that you are up-to-date with that before making a push to your branch and Yes I hope you understand anyway if you don't please Google it and do some homework to get you Git Knowledge all freshened up and ready Now I know we didn't make any changes to the master branch during this tutorial So [00:32:56](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m56s) I can demonstrate the process of Git Fetch Upstream And it will do that But since I know that we didn't actually make any changes In the end of the day We we will not be Really seeing any Great fireworks happening right now And I suppose some of you will experience it a little different [00:33:22](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m22s) Especially if there's been changes to the upstream while you have been working So Git checkout master It's usually the branch that you're on but just to make sure You're already on the master branch Then Git Merge Oops I missed out the git there [00:33:44](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m44s) Merge upstream master And it says like now it's already up to date If it wasn't it will actually Merge those two branches With the changes you've made Now That's what you should do before you do the following Git push [00:34:09](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m09s) Which will now take these changes you've made And you wanna push them to origin origin master Now Everything you've done All the commits you made all the commit messages the files you removed All of that now gets pushed up To your cloned version On GitHub [00:34:36](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m36s) So if we go to your version now on GitHub And we just refresh the page It'll say This branch is for commits ahead of VDM-io master Which means you are now ready To make a pull request A pull request is what we will deal with in the next tutorial So everything we've done so far and this tutorial is to get the snippets that you've changed the contributions You wanna make Into the branch that you forked [00:35:10](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m10s) And to do it in a way that you're not completely out of sync With the master branch Which is living Basically on VDM dot IO Joomla component Builder snippets This is the master branch that you forked So you've got those commits in your forked branch And now you want to actually make A pull request To much these changes you've made into that master branch [00:35:36](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m36s) So that it will eventually become available To the whole community of JCB Okay thank you for watching If you have any issues Please Google Do research Git is an amazing technology and The quicker you can Get your hands on it and Become [00:35:59](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m59s) Comfortable with working with it the better Okay Next tutorial we'll deal with the pull request +# FORKING JCB SNIPPETS SO YOU CAN SHARE YOUR SNIPPETS WITH THE REST OF THE COMMUNITY + + +Now that we've given you a general overview of how things work in the new Snippet Manager, I would like you to take the next step and that is [00:00:11](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m11s) showing you how to take shared snippets and share them. + +### Fork JCB Community Snippets On GitHub, Export Snippets You like To Contribute, Make Pull Request + +There are two things that should be done. One is you need to fork the JCB community Snippets on GitHub so you'll need a GitHub account. [00:00:32](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m32s) The second thing is once you've done that, you would export the Snippets that you would like to contribute and you will add it to the Repository that you forked and cloned down to your developing environment and you would make commit messages on every change that you are intending to make. The second thing you would then do although there are few steps in each of these [00:01:03](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m03s) things. The second thing is that you would then make a pull request. + +### 1. Improving Existing Snippet 2. Move Existing Snippet To New Type 3. To Add A whole New Snippet Completely + +In this tutorial I'm going to focus on the first few things you need to do and that is just to get you ready. All the things you need to do until the very point when you are now ready to do a pull request. There are three things that I suspect we can do. One is to improve an already existing snippet [00:01:36](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m36s) And then contribute that to the community. The second thing is to move an existing snippet to a new type. This isn't something I hope will happen often, but it can happen that a snippet is in a specific type that is not the best suit for it. You might want to suggest to us changing that. The third one would be to add a whole new snippet completely. I'm just going to demonstrate all three of those [00:02:11](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m11s) and then we'll see how that all plays out until the very point where we are ready to make a pull request. + +### Need To Do Homework And Study Git on Udemy - Use Links + +First we need a repository and we need to understand Git. If you do not know Git this tutorial is not going to cover that you need to do your homework and study up on Git. [00:02:34](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m34s) When you do an export of a package for example if I were to click on these three Grid, Panel and Block and click Share Snippets, you will see that it ends up showing you a bunch of links. + +???? +One of them is quick start for git on udemy. now this link here I just searched on Google found it I didn't actually watch it myself I hope it's not bad If you got a better one Please share it On on the issue somewhere and we'll improve this link even if you've got your own and you would like us to promote your [00:03:10](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m10s) Tutorials on git sure Why not We will support those who support Our community Very gladly The reality is You need to get some Your head around some of the git basics So that you can actually do A [00:03:26](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m26s) Fork of the JCB Snippets on GitHub And then make a pull request. So this Video here is the one I'm busy making so it will end up that being that link how to fork the JCB Snippets and get all this done. And then after that I'll be making this video So we'll get to that in a moment. Ok Now [00:03:49](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m49s) You need an account on GitHub And so I'm just gonna use my own account And Simply go and Fork the repository and use that as demonstration So needless to say I've got an account I've gone through all those hoops And now I'm simply gonna fork this repository To get to this repository It's this URL up here Another way to get here [00:04:16](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m16s) Is You go to get Snippets And then the moment it's finish loading there is a link that you can click which will take you To the GitHub repository and it's this link over here so we could click that And as you see we end up at the same place Good So you could either just Follow this URL up here all good just use that link But you wanna get to Joomla component builder snippets And I suppose [00:04:47](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m47s) Since everybody that wants to contribute will need to fork it I suspect this number here will change And of course well this repository is like 6 days old I haven't even finished the ReadMe So there will be a lot of changes to this Repository and it will improve So the first thing you do is click on this button here and forked repository This will then ask you to select Where you want to fork it if you belong to organizations whatever but then Obviously by then I don't need to explain to you how it works But if for some reason you don't then you select your personal or whatever organization [00:05:27](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m27s) You want the fork to appear in And then it will basically To copy this repository For you Ok so now it's busy doing that I'm basically just copying it into my personal Account Now Good practice Every time you wanna make a change Then [00:05:48](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m48s) You need to follow a few steps In Having this repository in sync With the What we call upstream repository this VDM.io Joomla component builder Snippets This is what we call the upstream or the master branch or whatever you wanna call it this is the main branch the one that is being used inside of JCB yours isn't directly being used So whatever changes you make here would not necessarily affect us at all [00:06:20](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m20s) But you obviously want to Commit your changes to your branch And then Make a pull request To the upstream branch Where you would like to share this with the community So that's Sort of a quick explanation we'll do this slowly I'm not gonna do the pull request Now in this tutorial [00:06:42](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m42s) But I'll take you all the way up to the wall and then we will get the ladder out and finish that in the next tutorial Okay so once you've done this forking of the main Repository You need to clone this repository down Do your own developing environment And So that is what I'll do next You would click on this Clone and Depending on how you've got git set up on your developing environment [00:07:14](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m14s) Again those tutorials you'll need to do before coming here You would select either SSH or https I I would suggest using SSH as this is of course more secure But ok So we'll just copy that and then we go To I'm just gonna use my My users home folder for now So here I am in the command line I'm running Linux so if you're using Windows [00:07:47](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m47s) You'll need to watch tutorials on how to do git in Windows You might end up using a tool intead of command line But if you did that you'll also be having had watched Tutorials to help you sort of understand what I'm doing Ok So first thing first we gonna clone it let's get that done So I've cloned it And we now have a folder Call Joomla component Builders snippets So I'm gonna change into that folder now [00:08:19](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m19s) Just with CD and a folder name and there we go I'm in the folder And if I do ls - la we'll basically see all the files That was on GitHub now in that folder Now we wanna change these files But we're not gonna change them directly We're gonna use JCB to do the dirty work for us Because we might have issues with the scapeing and all kinds of things that can go wrong So just to have good convention Whatever changes you wanna make even if you wanna add files or new libraries whatever You do it in JCB and you do the export package [00:09:01](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m01s) And you should check that if you export a snippet That it has three Values always set And that does three values Well we'll obviously scrutinize it when you make a pull request But that those name conventions be standard It's quite important as you can see this we've got the library name Uikit And it's uppercase u and space lowercase v2 And then Common with uppercase [00:09:33](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m33s) And that is the type of snippet And then it's the name And obviously to json file So This is the convention And at this stage JCB builds that for you And I'm gonna show you where it gets this convention Because to follow this Convention is what's really gonna be very important If you're making new snippets For the Uikit version 2 library [00:09:58](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m58s) You need to ensure that your Version 2 naming in your system is the same as it is here And if you are adding a new library that isn't already in our repository Then you need to make sure that you use The naming as found well As others will understand it as most common The most common naming convention And obviously if you need help on that you can open an issue and ask one of the admin Do you know Maybe give you a suggestion of what [00:10:31](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m31s) To call the library But The Long end the short end of it is Please stick to the naming conventions Don't change this Uikit To maybe . . . remove the space here or something like that Because it will end up Just mismatching things and we want to avoid that from happening Ok so first thing we've done we've forked a repository and we've now cloned it [00:10:56](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m56s) to offline developing environment And now I'm going to go to get sorry to JCB And I'm gonna export those three snippets the one is a new snippet The second is a changed or improved snippet And in the third is when you actually move a snippet to a different type The one I'm gonna target here Is let me see I Think it's it's not showing here now Oh here it this [00:11:27](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m27s) Foo table The foo table snippet Is at the moment in layout I think there is a better Type for this snippet and I know the snippet isn't At this stage maybe the best We could add some more foo tables snippets but I'll leave that to some with you to do The point is I'm gonna move this one To the tables because it is a table right So that'll be the one change I'm gonna make then I'm gonna add one snippet [00:11:57](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m57s) To the Uikit version 3 Since those snippets are still coming I'll just add one as demonstration and then I'll make a little change To one of these Snippets just for demonstration okay great let me do that Okay first thing a foo table click on that one Change it from layout to tables I'm not gonna make any other changes I'm just changing the type And this brings us to those three values that must always be set And shouldn't change unless it's really seriously necessary the one is the name You wouldn't wanna change this name unless you are a hundred sure it should be changed [00:12:41](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m41s) Because in effect it will create a new snippet Because the way the snippets work it builds the file name With name The library and the type those three components together makes up the file name so changing any of those will in effect create a new snippet And create a duplicate And that's really what I wanna would try to avoid that And I realised This is gonna what I'm doing here now is inevitably gonna cause that [00:13:14](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m14s) And I think it will show you why it's not a good thing to do it But so I'm doing this more really for demonstration And so the ideal reality is that when we add a snippet we add it to the correct library and type And give it the correct name From the start and that we don't need to change those three again If we do Most of the time I would expect That your pull request will be rejected Because this will mess up many conventions and cause Many duplicates across the system [00:13:49](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m49s) In other developers' environment where they would import this new snippet And yet end up having two of the same snippets Okay I've said enough about that I hope you understand that how important this part is So let's go ahead save and close The next one I'm gonna do Is basically add a new snippet now since I've done this recording a second time now I've already done that and this is a accordion snippet here So you'll see that I've basically [00:14:23](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m23s) Set that it's a JavaScript snippet It's an accordion It's you Uikit Version 3 I look down these types I'm wonder if some one of the other guys won't be better at this identifying of the types So I might even Not be the guy to make the call on this I really am open to some With better perspective who maybe knows these libraries assorting [00:14:51](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m51s) ideas better I think there's a place called What is it Collapse Yeah collapse Accordions could also fit other under this Collapse I suppose let me do that I know the first accordion we added for Uikit version 2 That is actually found on the JavaScript But then we didn't have these many types [00:15:17](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m17s) So I'll just add it under this Collapse for now Again I realise that this might be a difficult thing And What could help is going back to the actual library itself This This is the The link for it And to try and see how they Organized it and that's the problem [00:15:40](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m40s) Uikit Didn't Give more breakdown besides calling it components So it's only called a component it doesn't Specifically added into a type whereas Bootstrap is doing a little better at that So that's why I'm not sure exactly where to place it now Since Bootstrap Actually adds it under Collapse [00:16:07](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m07s) I think we won't go wrong to do the same So save and close There we go we got now A very crazy risky change of a type And a new snippet now let me take another Snippet and just make a little improvement to it I think I would use this Uikit version 2 Form snippet I'm just gonna add some usage information to it [00:16:37](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m37s) Okay there we go And I'm gonna save it save and close So now I've made a change Basically two This one This one and that one and So those are the only ones I'm actually going to share This one when I created it it added my details As the Contributor [00:17:00](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m00s) Which if you created a snippet it will add your details you will notice when you create a new snippet It takes a while before it's finish saving and it's because it's actually phoning GitHub And trying to see if there isn't a snippet Already with that Relationship as I explained in a previous tutorial And that takes a while and I'm still wondering if that's the best idea If we should continue doing that I'm open for [00:17:28](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m28s) Suggestions But at this stage we're just trying to confirm that That's snippet Wasn't already created And to avoid conflicts Now That means if it doesn't find it it adds your details which is set here in the option Global options And as I explained in that tutorial You can add your details and you would get some you know exposure out there in the community [00:17:55](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m55s) With your details there With these that I've just changed The contributor will stay the same But your name will come in on the plain Layout And your GitHub name will display there as recognition for your support Okay so now and next thing share snippets Now the reason I made it that it actually compiles a zip File [00:18:23](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m23s) is because it's easier to move around We could argue that we might want to just have it zip Or move Rather move the Files right into your local cloned folder And so I am thinking at this stage maybe We should add a switch here in the global options That could make you choose it to do this or the other depending on what is most convenient for you [00:18:52](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m52s) So I'm gonna go take the snippet And then I'm gonna go and basically unzip it into That Repository that we've cloned So here we are in that folder I'm gonna first on zip it right here There there is those three files That we want to make part of the repository Now like I said I Actually clone the repository right into my user [00:19:23](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m23s) Folder So let us go to that folder Just gonna cut this here Cut And then paste It right into that folder Now we are updating one file So it's asking it already contains this file Now so when you make an improvement on a file you'll obviously have to replace it [00:19:49](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m49s) So we click replace Now that you've Added those two new files And you have Replaced one of them The third one You'll see that we now have this Foo table The tables version And we have it also [00:20:09](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m09s) at the layout version now one of them needs to go We don't want duplicates So you have to remove this one but Don't remove it via the The Interface Use git To remove the file So that you can also add a message So that when you make your pull request and we see their files removed that we'll know why you did it [00:20:32](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m32s) And obviously then it will become a discussion And this we'll demonstrate in the next tutorial Okay so let's get back to command line Here we are we can say git Status to see what happened and we see wow ok one of been modified and these two have been added The first thing we wanna do is remove the one that we don't want Now because we have chosen to leave spaces within our file names You'll need to In put the file name in quotations To ensure that it actually you know [00:21:10](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m10s) Not misunderstand what you doing So we will go do a git rm for remove And then the file name So You could click tab after typing foo table about there and then lay out and it Well basically grab the name for you And then click enter So it is removed it if we now and do git status we'll see that it's in the deleted Area and you need to actually [00:21:45](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m45s) Make a commit to Explain what you've done so it's git Commit m And removed table layout Since I Moved the Foo table snippet [00:22:00](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m00s) to tables To the tables type So We're not at this stage exactly sure How we are going to What kind of conventions we gonna follow with these commit messages There are reasons to have a few conventions here I just haven't had time to sort of get my head around it so for now we'll just is keep it basic But I'm sure as to community develop these things will become more [00:22:27](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m27s) Explained and so if you need help we'll most probably have some documentation up At some stage to get you to know how to Correctly do a commit message I mean just what you should say first and what you shouldn't say and those kind of things Okay so I've got a key that signs off every commit I make You may not have that don't worry about it it's not really compulsory at this stage It's just the way I can make sure that everybody knows [00:22:59](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m59s) That it's me Okay Now The next thing here is we wanna Add these new file so if we do git Status we'll see that now that file has been Made part of the commit At the branch or the local files of this clone [00:23:18](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m18s) And we wanna add those two other files The first one I'm gonna target Is adding the foo table which we just removed So git Status Oops Okay so now we've got that one added And we need to give it a commit message Now I understand When we are doing such [00:23:47](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m47s) a dangerous thing as moving a snippet to another type I would expect us to actually make a commit message for every Step of what we're doing But if you're adding like whole new library and you got like 300 new snippets that you're contributing I wouldn't mind you adding all of that on the one commit message Just making sure that the it was exported via Joomla's component Builder So that we don't have You know the wrong kind of code within those snippet files And obviously we will at [00:24:25](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m25s) Pull request we'll scrutinize those files and we will have to look through them to ensure That it won't make any one system unstable And so we basically got to police some of this to do ensure that nothing gets you know Merged into the master branch That will put every anyone at risk as much as as far as we are able to To prevent that we wanna do that Well we're working with snippets so it should be fine but just in case we wanna be careful So when you're making changes to one specific snippet And you're not really like doing [00:25:03](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m03s) Many at a time I think be as detailed as you can in your commit messages Because the more we know of what you're doing I think the easier it will be too merge it into The branch and to basically approve your pull request So the next commit message I'm just gonna say Git commit Message update the foo table layout foo table dot json to foo table Table Foo table dot json [00:25:33](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m33s) since it is more correct snippet type Okay so that would then Deal with that added file Now we want to add the accordion which is the the new snippet So it's just git add and we can select the file name There is a shortcut to this It's when you use the dot git dot add and that's usually when you have lots of files and you just wanna add them all so it's like I explained if you doing a whole bunch of snippets for a specific library I would suggest doing library per library instead of just mixing them all up [00:26:10](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m10s) Because if we target a library and just add a bunch of stuff that's for it And then have a commit message just for that then we could explain that within the commit message That it's for the specific library and so forth Because usually with new libraries You know it's good for us too sort of take it one step at a time so now we've added that file now just got to add a commit message for it I'm just gonna say added the Accordion snippet For Uikit Version 3 as demonstration On how this should work [00:26:46](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m46s) Okay and then just again Sign off that Commit Git status We'll see okay we've got one file left and we already three commits Ahead Of our Our Branch that we have Cloned [00:27:10](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m10s) So just this last file which is the You know the update we made So We're gonna first add the file And then add a commit message To explain what we did Added the users paragraph to explain how to use the Uikit version 3 layout form Yeah I think just writing out the file name like that is Clear enough [00:27:38](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m38s) And enter again just sign off on that Again if you don't have Keys to then It's good go Google this Start signing your request But at this stage it's not a requirement as I said Okay if we do git status now we'll see that we are four commits ahead Now this is here where We wanna do a few more things [00:28:06](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m06s) To your Commit or sorry to your Your Forked And therefore cloned repository what we wanna do something that will keep Your Repository in sync with the upstream So I'm just gonna go and Google this quickly This is a very helpful document [00:28:31](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m31s) We first need to do this configure a remote that points to an upstream repository So let's first look at that one So this gives you a little explanation Of you know what you should do So First you'd basically List the current Remote branches That you have [00:28:56](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m56s) So I've done that and it shows that I've got this git or the origin And it's the fetched and the pushed Remote branches Now It's gonna say specify a new remote upstream repository that will be in sync with this fork So we'll use the original owner and the original repository Name Which In our case is the following The original owner is this [00:29:28](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m28s) VDM Dot io and The repository is this one So to get that name You could come here And Yeah think you could get This name here There we go That part [00:29:48](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m48s) copy So going back to our tutorial We will now type the Git and I suppose you'll have to get the https version Since you will not have permission to Work with the SSH version So let's get the http one Which basically means that you should click http here And then grab that version just copy it And [00:30:16](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m16s) Control Shift v will paste it in Into command line or some Command lines even gives you this option to paste With a mouse Okay so now we got that there And we press enter So it's now Typo Let me try again [00:30:37](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m37s) I didn't add remote add So it was looking for a file Okay there we go now if we did that version we'll see now It has this upstream there as well Okay so that was just to add the remote or the upstream Repository to the cloned Version that you have here [00:31:01](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m01s) Now let's go see how to keep it in sync So here it says that you would open the terminal And you would do git fetch upstream And it will basically pull down This And make sure that there is a branch called upstream Master then you would checkout master And switch to the master branch and do merge upstream master Which if while you were busy doing the snippets improvements and things [00:31:30](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m30s) And there's been commits to the master branch You wanna make sure That you Actually before pushing all this upstream Before making a pull request that you first merge The already changes from the master branch Into your branch and then make your commits on top of that This will help to try and avoid You not having specific commits in your branch I know it gets a little bit complicated [00:32:01](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m01s) but If you get stuck We will most of the times be able to just help you Figure this out again But like I explained in the beginning To know how to work with git Is really your responsibility So that You when you are wanting to communicate or sorry to Share with the community snippets [00:32:23](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m23s) You know how to first make a pull Request a sorry merge Your upstream with your master branch And ensure that you are up-to-date with that before making a push to your branch and Yes I hope you understand anyway if you don't please Google it and do some homework to get you Git Knowledge all freshened up and ready Now I know we didn't make any changes to the master branch during this tutorial So [00:32:56](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m56s) I can demonstrate the process of Git Fetch Upstream And it will do that But since I know that we didn't actually make any changes In the end of the day We we will not be Really seeing any Great fireworks happening right now And I suppose some of you will experience it a little different [00:33:22](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m22s) Especially if there's been changes to the upstream while you have been working So Git checkout master It's usually the branch that you're on but just to make sure You're already on the master branch Then Git Merge Oops I missed out the git there [00:33:44](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m44s) Merge upstream master And it says like now it's already up to date If it wasn't it will actually Merge those two branches With the changes you've made Now That's what you should do before you do the following Git push [00:34:09](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m09s) Which will now take these changes you've made And you wanna push them to origin origin master Now Everything you've done All the commits you made all the commit messages the files you removed All of that now gets pushed up To your cloned version On GitHub [00:34:36](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m36s) So if we go to your version now on GitHub And we just refresh the page It'll say This branch is for commits ahead of VDM-io master Which means you are now ready To make a pull request A pull request is what we will deal with in the next tutorial So everything we've done so far and this tutorial is to get the snippets that you've changed the contributions You wanna make Into the branch that you forked [00:35:10](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m10s) And to do it in a way that you're not completely out of sync With the master branch Which is living Basically on VDM dot IO Joomla component Builder snippets This is the master branch that you forked So you've got those commits in your forked branch And now you want to actually make A pull request To much these changes you've made into that master branch [00:35:36](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m36s) So that it will eventually become available To the whole community of JCB Okay thank you for watching If you have any issues Please Google Do research Git is an amazing technology and The quicker you can Get your hands on it and Become [00:35:59](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m59s) Comfortable with working with it the better Okay Next tutorial we'll deal with the pull request