joomla/Component-Builder
joomla/Component-Builder
38
23
Fork 11
Code Issues 81 Pull Requests Projects 4 Wiki Activity

Updated 047 Tutorial on forking JCB snippets so you can share your snippets with the rest of the Community (markdown)

Amigo 2019-08-09 16:06:32 +02:00
parent ad73dd3a48
commit 53b6222f5a
1 changed files with 47 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
047-Tutorial-on-forking-JCB-snippets-so-you-can-share-your-snippets-with-the-rest-of-the-Community.md

@ -44,70 +44,101 @@ Good practice: Every time you want to make a change then you need to follow a f
### Clone Repository Down To Your Own Developing Environment
[00:06:50](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m50s)
????
Once you've done this forking of the main repository, you need to clone this repository down to your own developing environment. That is what I'll do next. You would click on 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 would suggest using SSH as this is of course more secure. We'll just copy git@github.com:Llewellynvdm/Joomla-Component-Builder-Snippets.git and then I'm going to use my users home folder for now. 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 instead 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. First we going to clone it. I've cloned it and we now have a folder call Joomla-Component-Builder-Snippets. I'm going to change it into that folder [00:08:19](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m19s) with cd and a folder name: Joomla-Component-Builder-Snippets and there we go I'm in the folder and if I do ls - la we'll see all the files that was on GitHub in that folder. We want to change these files, but we're not going to change them directly. We're going to 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 want to make, even if you want to 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) You should check that if you export a snippet that it has three values always set. And those three values we'll 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, it's uppercase u and space lowercase v2, then Common with uppercase. [00:09:33](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m33s) (Common) is the type of snippet, then it's the name 'Animation' and obviously it is a json file.
Once you've done this forking of the main repository, you need to clone this repository down to your own developing environment. That is what I'll do next. You would click on 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 would suggest using SSH as this is of course more secure. We'll just copy git@github.com:Llewellynvdm/Joomla-Component-Builder-Snippets.git and then I'm going to use my users home folder for now. 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 instead 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. First we going to clone it. I've cloned it and we now have a folder call Joomla-Component-Builder-Snippets. I'm going to change it into that folder [00:08:19](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m19s) with cd and a folder name: Joomla-Component-Builder-Snippets and there we go I'm in the folder and if I do ls - la we'll see all the files that was on GitHub in that folder. We want to change these files, but we're not going to change them directly. We're going to 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 want to make, even if you want to 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) You should check that if you export a snippet that it has three values always set. And those three values we'll 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, it's uppercase u and space lowercase v2, then Common with uppercase. (Common) is the type of snippet, then it's the name 'Animation' and obviously it is a json file.
### 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. 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.
[00:09:40](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m40s)
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 to our offline developing environment.
### Export Snippets - New Snippet, Changed Or Improved Snippet, Move A Snippet To A Different Type
[00:10:59](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m59s)
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.
[00:12:24](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m24s)
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. 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
[00:13:23](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m23s)
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.
[00:14:06](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m06s)
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 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.
[00:16:20](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m20s)
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. Okay there we go. I'm going 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.
[00:18:12](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m12s)
Next thing share snippets. The reason I made it that it Compiles a zip file 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. 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
[00:20:39](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m39s)
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.
[00:21:34](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m34s)
If we do git status, we'll see that it's in the deleted area and you need to 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 that it's me.
### Adding A New File - Do git status - commit - git add
[00:23:03](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m03s)
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.
[00:25:19](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m19s)
The next commit message I'm just going to say git commit Message update the FooTable - (Layout) FooTable.json to FooTable - (Table) FooTable.json since it is more correct snippet type. That would then deal with that added file.
### Add New Snippet - Accordion - git add
[00:25:41](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m41s)
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) 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 HTTPS one which means that you should click HTTPS 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. 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. If we did that version we'll see it has this upstream there as well. That was just to add the remote or the upstream repository to the cloned version that you have here.
[00:28:03](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m03s)
### Syncing A Fork (See Video) [00:31:01](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m01s)
This is where we want to do a few more things 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) 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 HTTPS one which means that you should click HTTPS 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. 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. If we did that version we'll see it has this upstream there as well. That was just to add the remote or the upstream repository to the cloned version that you have here.
Now let's go see how to keep it in sync. It says that you would open the terminal and you would do git fetch upstream. It will pull down this and make sure that there is a branch called upstream master. Then you would check out 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 want to make sure that 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 avoid 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 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 when you are wanting to share with the community snippets. [00:32:23](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m23s) You must know how to merge your upstream with your master branch and ensure that you are up-to-date with that before making a push to your branch. I hope you understand. If you don't please Google it and do some homework to get your Git knowledge all freshened up and ready. I know we didn't make any changes to the master branch during this tutorial. [00:32:56](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m56s)
### Syncing A Fork (See Video)
[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. It says that you would open the terminal and you would do git fetch upstream. It will pull down this and make sure that there is a branch called upstream master. Then you would check out 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 want to make sure that 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 avoid 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 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 when you are wanting to share with the community snippets. [00:32:23](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m23s) You must know how to merge your upstream with your master branch and ensure that you are up-to-date with that before making a push to your branch. I hope you understand. If you don't please Google it and do some homework to get your Git knowledge all freshened up and ready. I know we didn't make any changes to the master branch during this tutorial.
### git fetch upstream - git checkout master - git merge upstream master
I can demonstrate the process of git fetch upstream and it will do that. But since I know that we didn't make any changes, in the end of the day we we will not be really seeing any great fireworks happening right now. 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. git checkout master is usually the branch that you're on but just to make sure you're already on the master branch. Then git merge upstream master. [00:33:44](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m44s) It says like now it's already up to date. If it wasn't it will merge those two branches with the changes you've made.
[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 make any changes, in the end of the day we we will not be really seeing any great fireworks happening right now. 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. git checkout master is usually the branch that you're on but just to make sure you're already on the master branch. Then git merge upstream master. [00:33:44](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfD[00:28:06](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m06s)zzlERLQgpMRE&t=00h33m44s) It says like now it's already up to date. If it wasn't it will merge those two branches with the changes you've made.
### git push - Everything You've Done Gets Pushed To Your Cloned Version On GitHub
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 want to push them to origin master. Everything you've done, all the commits you've 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) If we go to your version on GitHub and we refresh the page, it'll say: This branch is 4 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 in this tutorial is to get the snippets that you've changed, the contributions you want to 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 on vdm.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 make a pull request to merge 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. 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. Next tutorial we'll deal with the pull request.
[00:34:00](https://www.youtube.com/watch?v=0hgHeQVTLOk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m00s)
That's what you should do before you do the following: git push which will now take these changes you've made and you want to push them to origin master. Everything you've done, all the commits you've 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) If we go to your version on GitHub and we refresh the page, it'll say: This branch is 4 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 in this tutorial is to get the snippets that you've changed, the contributions you want to 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 on vdm.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 make a pull request to merge 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. 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. Next tutorial we'll deal with the pull request.