joomla/Component-Builder

Table of Contents

GENERAL OVERVIEW OF HOW COMMUNITY SNIPPETS WORK

Added A Community Concept To Snippets In JCB
New Snippet Area
Local And Community Snippets
Contribute Snippets To The Community - Import Snippets That Is Been Added To The Community By Others
Important - Snippets Mapped The Same Way As Snippets in The Community
Area Called: Get Snippets
Helper Tutorials - Few Links And Shortcuts To Get Involved Sharing Snippets
What Happens When You Share Snippets?
Snippets - In Sync
Snippets - Out Of Date
Snippets - New
Snippets - Diverged
Snippets - Ahead
Bulk Tool
Description, Usage, Snippet, Who Contribute, View Blame
Snippets Used in Four Key Areas
When Details Not In Place - Say Dynamic Field

GENERAL OVERVIEW OF HOW COMMUNITY SNIPPETS WORK

Added A Community Concept To Snippets In JCB

00:00:00 (Click on these time links to see Youtube video)

This is a tutorial on the new Snippet Manager and how it works. We have added a community concept to the Snippets in JCB. Previously you could create your Snippets and then if you would create a Custom Admin View, a Site View, a Template or a Layout, you could access the Snippets through a dropdown. 00:00:25 Let me demonstrate that quickly. Now in a Site View, if I were to click on one of these Snippets, you will see it loads the Snippet. You can copy it, and can then place it in your code and so it is possible to load many Snippets.

New Snippet Area

Looking at the new Snippets Area, the type of the Snippet may be seen, then the name of the Snippet and then the library the snippet belongs to. 00:01:04 Once you have selected the Snippet it again updates: the name of the Snippet(text truncate), the type of Snippet(Common), and the library it belongs to(see more details(UitKit v2). Usually, this library is a link, it will open the actual documentation on that library's website of the specific Snippet, all as it used to be.

Local And Community Snippets

Yet there are major changes taken place because we have what is known as local Snippets, and then community Snippets. We have enlarged the Snippets area so that you can contribute to the community Snippets, and also import from those Snippets that have been added to the community by others.

Contribute Snippets To The Community - Import Snippets That Is Been Added To The Community By Others

Now how does that exactly work? Well, Snippets that already exist are Snippets that either I made or someone else and they already have what is known as a contributor. The name of the contributor, its email address, web address and so forth. When you create a Snippet we will use your details to create this contribution. 00:02:19 If we open an existing Snippet and go to the contribution area, you would see that there are names in these Fields. If there are not any names then that means the update did not do exactly what it should have done. When you go to the Snippets area where you get Snippets, there is a place for you to update all the contributor names. 00:02:46 Make sure to have their names in the Database. These details should be in there already. If they are not, it is not a Snippet you have made, do not worry about it. These details only apply when you want to share a Snippet or when you want to improve a Snippet and then we will add the correct details in any way. Here you'll see 'How Contributed Details Work' are dealt with. 00:03:25 We are using the company details that are set in the global 'Options'. Click the 'Option' button to get there under the company tab of the JCB for the new Snippets you create. The Contributed Details of the Snippet cannot be changed that already exists via this area. So that is a simple heads up. This area is only for the management of the community Snippets. If you are not going to be contributing then this does not even matter at all.

Important - Snippets Mapped The Same Way As Snippets in The Community

What is important though is that your Snippet is mapped the same way as the Snippets in the community. For example if the Name: Grid, Library: UiKit v2 is called Type: Layout then do not change it because it will then behave like a new Snippet and not like an existing one. 00:04:17 Because the community uses the Name, the Library, and the Type to build the Filename. All you need to know is there are a bunch of Snippets already in your component. 00:04:38 These snippets were shipped with Joomla Component Builder. This is how it was by default.

Area Called: Get Snippets

There is an area called 'Get Snippets'. If you would like to get your name out there and want to become involved in the JCB community this is the ideal opportunity to do that through sharing a Snippet. Say, for instance, you have created 'Article Snippet', then you can click on 'Share Snippets' or you may take more than one, it should not necessarily be only one. You can click 'Share Snippets'. This will then create a package. It is placed in this Path folder(/media/host/Dropbox/sandbox/joomla/tmp/snippets.zip.)

There are a few helper tutorials. For example, If you want to get help from this tutorial which I am presenting now; Use this link: https://www.youtube.com, and if you want to learn more about Git, it is this one: https://www.udemy.com/git-quick-start/, and if you want to know how the forking is going to work, then it is this: https://www.youtube.com. How to do a pull request, it will be this one: https://www.youtube.com 00:05:55 If there are any issues you can open an issue on GitHub: https://github.com/vdm-io/Joomla-Component-Builder-Snippets/issues. This gives you a few links and shortcuts to get involved in sharing Snippets.

What happens when the Snippet is shared? If someone clicks on 'Get Snippets', then they will see your name if that specific Snippet comes up. To illustrate that: If we click on Get Snippets it might take a moment depending on how many Snippets are in the repository at this stage because it is getting all the Snippets via Ajax from GitHub and it is building a small page. 00:06:38 It has just loaded the whole bunch of Snippets. The first view shows all the current Snippets in the JCB community Snippets Repository. Go to this repository by simply clicking on this GitHub link.

Snippets - In Sync

You can see which of these Snippets are already In Sync. It is called EQUAL. It shows what EQUAL means when you click on it. That it is in Sync with your Local snippets. It has little right mark saying it is a Local snippet and it is In Sync. If you do want to know more about when is a snippet is considered EQUAL then click on this little EQUAL button.

Snippets - Out Of Date

Then if there is a Snippet Out of Date. For instance, someone contributed to the community on a specific snippet. For instance, this Snippet Uitkit v2-(Common) Alert. If someone sees that we have opened the Snippet, they see this little snippet(see video) and feel, that they can improve on it, and share it with the community. Then that Snippet will end up in the 'Out of Date tab'. If there is no 'Out of Date Snippets', then all will be blank. But if any Snippets are 'Out of Date', they will all show up.

Snippets - New

Then there is the New tab. Now the New tab could be a little bit misleading because, in this example, I went and deleted a Snippet from my Database. Since that Snippet already exists in the community, the system then detects that the snippet is not here so it must be new. Now you could click on this Get Snippet and it will say: 00:08:28 'Are you sure you would like to add this new JCB community snippet to your local snippets'? You say: 'OK'. Then it goes to GitHub, gets the snippet and moves it to your Database. You are done. This Snippet is no longer New. If you click New you will see no New Snippets. It has also been added locally.

Snippets - Diverged

Then 'Diverged Snippets' is where there is a discrepancy in both the creation date as well as the modified date. Those snippets will show up in 'Diverged' and they can be updated in the same way. If you have made a change to a Snippet in your local environment and then you have realized that the changes have not been good, it is better to revert to the old Community version.

Snippets - Ahead

Then go to 'Ahead'. A little change has been made to this specific Snippet. They will tell you that the Snippet is 'Ahead' and if you click on it, they will show you what that means. You can then click on Get snippet, to revert to the old one, and that is what it will indicate. 'Are you sure you would like to update your local snippet to this older JCB community snippet?' You can say, 'Cancel'. I like the new snippet I do not want to update it and just ignore it. But if you want to return, then there is this option to do so. 00:09:51 If this is a good Snippet you might want to consider sharing it with the rest of us. That would be to do the sharing snippet and go through those tutorials in knowing how that works.

Bulk Tool

There is sometimes a situation where a specific person of the community might be very enthusiastic and he contributes 300 new snippets to the community Snippets Repository. Now that would mean that you want to click on every one of those 'Get Snippets', that might be very tedious. So this small Bulk tool had been added. The Bulk tool can detect whether there are New snippets and whether they are 'Ahead' snippets or whether you just wanted to update all of them with this 'Just Get All Snippets'. 00:10:42 If there is not any Diverged or any Out of Date Snippets, it will also not be able to do that. Instead of clicking it one at a time you could just click on 'Revert All Ahead Snippets' and it will just update all of them and you are done.

Description, Usage, Snippet, Who Contribute, View Blame

There is a 'Description' if you like to look at it. There is 'Usage'. See how the Snippet itself looks like. If you like what you see, you might even want to look at who contributed the Snippet. 00:11:12That brings up an important and yet interesting concept. We have decided that when you contribute a new snippet your name and details will end up here('who contributed the snippet'). Like I explained earlier when we looked at the contributor area. Yet when someone makes minor contributions to the snippet, we will not necessarily change or replace this 'Contributor's' name. Instead, we will let them show up in the blame view. There is a view which is called the 'Blame View'. 00:11:46 The Blame View shows who changed what part of the code and when. Whenever there is an improvement made on any of the Snippets, the GitHub Repository tools will help us to know who made those changes. So they will be recognized for their contributions via the 'Blame View'. Where, if you contribute new Snippets to the JCB community, your details be displayed and make it possible to click on this link 'Vast Development Method'(Please follow on video) and go to the website you had put up.00:12:17 It is an ideal way to expose yourself in the JCB community and at the same time to share good snippets. We hope that this will really foster a lot of participation and that it will improve JCB constantly.

Snippets Used in Four Key Areas

Snippets are used in these four key areas Custom Admin Views, Site Views, Templates, Layouts. These areas are what the customer sees, the one that uses the component. We want to be always sure to have the latest and most stable Snippets ready and available for everyone using JCB. 00:13:16 Once you have imported the new snippet you will be able to see it at the end of your Snippets. 'Navbar' is now the latest one that has been imported. If the snippet is opened, you will see the contributed details are already in place and so these contributed details will be updated as you add new Snippets.

When Details Not In Place - Say Dynamic Field

If for some reason these details are not in place it will say, Dynamic field. For example, if a new one is created. It says, 'Dynamic field'. When you have created a snippet, A simple test is done to illustrate this. 00:14:03 If you click save, it will first search the JCB Snippet Repository to see if there is a snippet with this kind of a relationship between the Name, the Type and the Library. If it does not exist it will go to your Global area like explained and they will get your details and dynamically add it into the snippet. 00:14:31 It found my details and put it in there. That is how these details get set when you create a new snippet, it will fall back to your details if that Snippets Name, Type and Library relationship does not already exist in the JCB community.00:14:51 Now if for some reason it does exist it will take the initial contributors' details and add that in there.

You have seen how to use the Snippets in your components and how to start initial steps of sharing a snippet. You simply select them as I showed you. Only when you have improved on it or whether you've created new ones will you ever want to do that. 00:15:48 Then you click on Share Snippet and it gives you a package. It has a few tutorials like tutorials on forking JCB Snippets and making a pull request. These two tutorials are quite key to understand what would be the next steps and getting your Snippets into the JCB community.