From d957adf3ac06146423defc2f1b3eec6c9ac6a522 Mon Sep 17 00:00:00 2001 From: Amigo <49749100+aamigo@users.noreply.github.com> Date: Wed, 10 Jul 2019 16:13:22 +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 | 52 ++++++++++++++++++- 1 file changed, 50 insertions(+), 2 deletions(-) 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 4e591aa..560e186 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 @@ -33,7 +33,55 @@ Once you've done this forking of the main repository, you need to clone this rep ### Convention Builds By JCB -This is the convention and at this stage JCB builds that for you. I'm going to show you where it gets this convention. Because to follow this convention is really going to be very important if you're making new snippets for the Uikit v2 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. +This is the convention and at this stage JCB builds that for you. I'm going to show you where it gets this convention. Because to follow this convention is really going to be very important if you're making new snippets for the Uikit v2 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. 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 others will understand it as the most common naming convention. If you need help on that, you can open an issue and ask one of the admin to maybe give you a suggestion of what to call the library. [00:10:31](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m31s) The short end of it is please stick to the naming conventions. Don't change this Uikit to maybe to remove the space between Uikit and v2 or something like that. Because it will end up mismatching things and we want to avoid that from happening. 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 our offline developing environment. + +### Export Snippets - New Snippet, Changed Or Improved Snippet, Move A Snippet To A Different Type + +Now I'm going to go to JCB and I'm going to export three snippets. The one is a new snippet, the second is a changed or improved snippet, then the third is when you move a snippet to a different type. The one I'm going to target is [00:11:27](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m27s) FooTable. The FooTable snippet is at the moment in Layout. 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 FooTables snippets, but I'll leave that to some with you to do. The point is I'm going to move this one to the tables, because it is a table. So that'll be the one change I'm going to make then. I'm going to add one snippet [00:11:57](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m57s) to the Uikit v3. 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. First thing a FooTable, click on that, change it from Layout to Tables. I'm not going to make any other changes I'm just changing the Type. + +### Snippets Builds The File Name - Name - Library - Type + +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 want to change this name unless you are a hundred present 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 the 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 want to would try to avoid that. I realized this is going to what I'm doing here now is inevitably going to 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. I'm doing this more for demonstration. + +### Important: When Adding A Snippet - Add It To The Correct Library and Type, Give The Correct Name + +The 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. I hope you understand that how important this part is. Save and close. + +### Adding A New Snippet + +The next one I'm going to do is add a new snippet. Since I've done this recording a second time, I've already done that and this is a Accordion snippet. You'll see that I've basically [00:14:23](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m23s) set that Type it's a JavaScript snippet. The Name is an Accordion. The Library is Uikit v3. I look down these Types, I'm wondering if some one of the other guys won't be better at this identifying of the Types. 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=PLQRGFI8XtZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m51s) ideas better. I think there's a place called Collapse. Accordions could also fit under this Collapse. I know the first Accordion we added for Uikit v2 that is 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) I'll just add it under Collapse for now. Again I realize that this might be a difficult thing. What could help is going back to the actual library itself. This the link for it: https://getuikit.com/docs/accordion 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. That's why I'm not sure exactly where to place it now. Since Bootstrap 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. Save and close. There we go, we got now a very crazy risky change of a Type and a new snippet. + +### Improving A Snippet + +Let me take another Snippet and just make a little improvement to it. I think I would use this Uikit v 2 form snippet. I'm just going to 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. I'm ging to save it, save and close. I've made a change to FooTable, Form and Accordion. Those are the only ones I'm going to share. Now Accordion, 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. It's because it's phoning GitHub and trying to see if there isn't a snippet already with that relationship as I explained in a previous tutorial. 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 if that snippet wasn't already created and to avoid conflicts. That means if it doesn't find it, it adds your details which is set here in the Global options. As I explained in that tutorial you can add your details and you would get some 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 Blame Layout and your GitHub name will display there as recognition for your support. + +### Share Snippets + +Next thing share snippets. The reason I made it that it 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. 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) I'm going to go take the snippet /media/host/Dropbox/sandbox/joomla/tmp/snippets. and then I'm going to go and unzip it into that repository that we've cloned. Here we are in that folder(see video). I'm going to first unzip it. There are those three files(see video) that we want to make part of the repository. Like I said I clone the repository right into my user [00:19:23](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m23s) folder. Let us go to that folder. I'm going to cut this here. Cut and then paste it right into that folder. We are updating one file. It's asking if it is already contains a file? When you make an improvement on a file, you'll 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 FooTable, 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. 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 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 our 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) Obviously then it will become a discussion. This we'll demonstrate in the next tutorial. + +### Back To Command Line - git status To See What Happened + +Let's get back to command line. We can say git status to see what happened. We see one of has been modified and these two have been added(see video). The first thing we want to do is remove the one that we don't want. Because we have chosen to leave spaces within our file names, you'll need to put in the file name in quotations to ensure that it [00:21:10](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m10s) did not misunderstand what you doing. We will do a git rm(for remove), and then the file name 'FooTable - (Layout) FooTable.json'. You could click tab after typing FooTable about there and then Layout and it grab the name for you. Then click enter. It is removed it. + +### Commit Message + +If we do git status, we'll see that it's in the deleted area and you need to [00:21:45](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m45s) make a commit to explain what you've done. It's git commit -m "removed FooTable - (Layout) FooTable.json since I moved the FooTable snippet [00:22:00](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m00s) to the Tables type." We're not at this stage exactly sure what kind of conventions we going to 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. For now we'll just is keep it basic. I'm sure as the community develops 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. 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. + +### Adding A New File - Do git status - commit - git add + +The next thing here is we want to add these new files. We do git status, we'll see that file has been made part of the commit, or the branch or the local files of this clone. [00:23:18](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m18s) We want to add those two other files. The first one I'm going to target is adding the FooTable - (Table) FooTable.json which we just removed. Do git status. We've got that one added. We need to give it a commit message. 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 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 the wrong kind of code within those snippet files. We will at [00:24:25](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m25s) the pull request, we'll scrutinize those files and we will have to look through them to ensure that it won't make any system unstable. We basically got to police some of this to ensure that nothing gets merged into the master branch that will put every anyone at risk as much as far as we are able to prevent that. We're working with snippets, so it should be fine but just in case we want to be careful. 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 to merge it into the branch and to approve your pull request. + +### git commit message update + +The next commit message I'm just going to say git commit Message update the FooTable - (Layout) FooTable.json to FooTable - (Table) FooTable.json [00:25:33](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m33s) since it is more correct snippet type. That would then deal with that added file. + +### Add New Snippet - Accordion - git add + +Now we want to add the accordion which is the the new snippet. It's just git add and we can select the file name 'Uikit v3 - Collapse) Accordion.json'. There is a shortcut to this, it's when you use the .git.add and that's usually when you have lots of files and you just want to add them all. 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 add a bunch of snippets 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 it's good for us to take it one step at a time. We've added that file. We just got to add a commit message for it. I'm just going to say 'Added the accordion snippet for Uikit v3 as demonstration on how this should work.' [00:26:46](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m46s) Then just again sign off that commit. git status. We'll see we've got one file left and we already have three commits ahead of 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 update we made. We're going to first add the file git add 'Uikit v2 - (Layout) Form.json' and then add a commit message to explain what we did. git commit -m "Added usage paragraph to explain how to use the 'Uikit v2 - (Layout) Form.json'. 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, go Google this. Start signing your request. But at this stage it's not a requirement as I said. If we do git status we'll see that we are 4 commits ahead. + +### Configuring A Remote For A Fork + +This is where we want to do a few more things [00:28:06](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m06s) to your Forked and therefore cloned repository. We want to do something that will keep your repository in sync with the upstream. I'm just going to 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 configuring a remote that points to an upstream repository. Let's first look at that one. So this gives you a little explanation of what you should do. First: 'List the current configured remote repository for your fork' branches that you have. [00:28:56](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m56s) 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. It's going to say: 'Specify a new remote upstream repository that will be synced with the fork'. We'll use the original owner and the original repository name which in our case is the following. The original owner is [00:29:28](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m28s) vdm.io and the repository is Joomla-Component-Builder. To get that name, you could come here(Green Clone Button) and you could get the name vdm.io/Joomla-Component-Builder. [00:29:48](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m48s) ??? -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 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 +Copy the name. Going back to our tutorial. We will 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. Let's get the HTTP one which means that you should click HTTP here and then grab that version, 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