046 General overview of how community snippets work

I would like to give you a tutorial on the new snippet manager and how it works 00:00:07 We are very excited to announce that We have added a community concept To the Snippets In JCB Previously You could create your own Snippets And then If you would to create a custom admin View A site view a template Or a layout 00:00:25 You could access the snippets Through a drop down Let me demonstrate that quickly So now in a site view If I were to click on one of these Snippets You see it loads The snippet here You can copy it from here And You can then place it in your code 00:00:44 And so It is possible to actually load many Snippets Now currently We already looking here at the new Snippets Area You see that now We have the type of the snippet First Then the name of the snippet And then the library 00:01:04 The snippet belongs to Once you've selected the snippet again and updates here The name of the snippet The type of snippet And the library it belongs to And usually this library is a link It'll open you to the actual documentation on that library's website of the specific snippet So that's all as it used to be nothing fancy nothing much different Yet There is a major change 00:01:32 Taken place Because now We have what is known as local Snippets And then community snippets We have Actually enlarge the Snippets area So that you can contribute to the community Snippets And also import From those Snippets that is been added to the community By others 00:01:56 Now how does that exactly work Well Snippets that already exist Are usually Snippets that either I made or Someone else and They already have What is known as a contributor The name of the contributor it's email address web adress and so forth So when you create a snippet 00:02:19 We will use your details To actually create this contribution So if we open an existing snippet And you go to the contribution area you'd see that there is names in these Fields If there aren't any names Then Well that means the update didn't do exactly what it should have done And when you Go to the Snippets area 00:02:46 Where you get Snippets I'll show you that in a moment There is a place for you to actually update all the contributor names And so be sure to have their names actually in the database The reality is these details should actually be in there already If they are not Well it's not a snippet you made so you don't need to really worry about it These details only really apply when you wanna share a snippet And all when you wanna improve a snippet and then we will add the correct details in any way So really it's not to be worried about But here you'll see how the contributed details 00:03:25 Are Dealt with We are using your company details that is set in the global options you could click this button to get there Under the company tab of the JCB for the new Snippets you create You cannot change the contributed details after snippet That already exist At this time via this area So that is a simple heads Up This area is really only for The management of the community Snippets 00:03:52 If you're not gonna be contributing then this doesn't even matter at all What is important though Is that your snippet be Mapped the same way As the Snippets in the community For example if the grid UI kit version 2 is called layout Then don't change it Because it will then behave like a new snippet and not like an existing one 00:04:17 You see because the community Uses the name The library and the type To build The filename The file names Well we'll look at that also as we go along What I mean by file name For now all you really need to know Is it there are a bunch of Snippets already in your component 00:04:38 These snippets were shipped with Joomla Component Builder You know So it It means that Really this is how it was By Default But we now have an area called Get Snippets Now If you are one of those who like to get your name out there and want to 00:04:58 Become you know involved in the JCB community and have others know about you and so forth Well this is the ideal time to do that If you share a snippet So let say you created this snippet for example Then you would click on Share Snippets or you could take more than one doesn't need to be only one You take and you Clicks share Snippets This will then create a package let me show you So we see that it's created a package it's placed it In this folder 00:05:33 And you got a few helper tutorials here to actually get you going So if you wanna learn well this tutorial I'm making now will be This link here And if you wanna learn More about Git It's this one here And if you Want to know how the forking is gonna work then it's this And if you wanna know how to do pull request it It will be this one 00:05:55 And if there's any issues you can open an issue on GitHub So this really gives you a sort of a few links and shortcuts To actually get Involved in sharing Snippets What happens when you've share the snippet If someone Clicks on Get Snippets Then they will see your name If that That specific snippet 00:06:18 Comes up So let me 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 buy Ajax it's getting all the Snippets From GitHub And it's building a little page for you There we go 00:06:38 It's just loaded the whole bunch of Snippets The first view shows you all the current Snippets In the JCB community Snippets Repository You can go to this repository by Simply clicking on this GitHub link here It will take you there You can see which of these Snippets are ready in sync It's called EQUAL You click on this here It show you what EQUAL means 00:07:05 In sync with your local Snippets so it has little Mark here saying it's a local snippet And it is in sync If you don't want to know more about when is a snippet Considered equal Then click on this little button here And also you that like I've said Then if there is a snippet out of date let's say someone Contributed to the community on a specific snippet let's say it this snippet here Someone saw ok if we If we open the snippet They they saw this little snippet and they thought you know we could do better and they improved on it 00:07:41 And then shared 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 be blank like now But if there is Snippets that are out of date They all show up here Then there is the new tab Now the new tab Well that could be a little bit misleading 00:08:01 Because in this example that I'm giving you I went and I deleted a snippet from my Database And since that snippet already exists in the community It realize the system Then detects ok well that snippet isn't here so it must be new That's how it basically worked out that little Some Now you could click on this Get snippet And it will automatically It says here 00:08:28 Are you sure would like to add this new JCB community snippet to your local Snippets you says yeah ok And then it goes to GitHub Gets the snippet and moves it to your Database And Boom You done So now this snippet is no longer new if you click here you'll see its oh no new snippets It is now also been added locally Then diverged Snippets is where There is a discrepancy in both the creation date as well as the Modified date 00:08:58 And then those snippets will show up here 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've realized oh that changes hasn't been good there's been a better You know Just to return back to the old Community version Then you would come here to the head I made a little change to this Pacific snippet 00:09:23 And they'll tell you that the snippet is ahead and if you click on it They'll show you What that would mean You can then click on get snippet To really revert Back to the old one and that's what it will tell you Oh sure you would like to update your local snippet with the older JCB community snippet So you can say no I like my new snippet I don't want to update in just ignore it But if you wanna go back then that there is this option 00:09:51 To do so If this is a good snippet You might wanna consider sharing it with the rest of us An and that would be to actually Be to actually do the sharing snippet And go through those tutorials in knowing how that works There is sometimes a situation where a specific one of The community Might be very enthusiastic 00:10:13 And he contributes let's say 300 new Snippets to the community Snippets Repository Now that would mean that you know you wanna click on every one of those snippets get snippet get snippet that might be very Tedious So we added this little bulk tool Now the bulk tool is able to Detect whether there are new Snippets And whether they are ahead Snippets Or whether you just wanted Just update all of them with this this just get all Snippets 00:10:42 And so If there isn't any diverged or any outdated Snippets it will also not be able to do that So here instead of clicking it one at a time you could just click on this and I'll just update all of them for you And you're done But if you like me and you wanna know exactly what's going on You could go here you could read the description Ok there's no description See the usage See how the snippet itself looks like And if you really like what you see 00:11:12 You might even want to look at who contributed the snippet That 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 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 you know place this contribution Contributor's name Instead We will let them show up in the blame view so there is a view 00:11:46 Which is called the blame View The blame view shows you who changed what part of the code And when So whenever there is an improvement on any of the Snippets The GitHub repository tools will help us sort of show you Who made those changes So that's how they will be recognised for their contributions is via the blame Where is if you contribute new Snippets to the JCB community You will actually end up having your details show up here And have people be able to click on this link 00:12:17 And actually go to the website you put up as your website So it's an ideal way of getting yourself out there in the JCB community And at the same time sharing good snippets with the rest of us and make make our life easier I suppose Anyway and so That is the really looking at the Get Snippets Community area And we're excited about this we hope that this will really faster a lot of Participation And that it will Improve JCB constantly because as you know 00:12:52 Snippets are used in these Four key areas custom admin views Site view templates layouts And These areas Are what really the customer sees right the one that uses the component So we wanna always be sure to have the latest and Most Stable Snippets ready in available For everyone using JCB 00:13:16 So once you have actually Imported The new snippet you were able to see it at the end of your Snippets So this one is now the latest one we've actually Imported If you open the snippet You see that contributed details are already in place And so these contributed details will be updated as you add new Snippets If for some reason these Details are not 00:13:41 In place it will say Dynamic value let me show you there Please create a new one Like this So It says Dynamic field When you have created your snippet I'm just gonna do a Simple Test here to illustrate this Ok so it's obviously 00:14:03 A test And you click save oh missed a value And you click save It will first Search the JCB snippet repository to see if there really is a snippet with this kind of a relationship Between the name the type and the library If it doesn't exist It will go to your Global area like explained 00:14:31 And they will get your details And dynamically added in to The the snippet So there we go Its obviously found my details and put it in there So that is how this details get set When you create a snippet a new one It will fall back to your details 00:14:51 If that snippets name Type and library relationship doesn't already exist in the JCB Community Now if for some reason It does exist It will actually Take the initial contributors details and add that in there That's how it works at this stage maybe there is better ways but For now this is how we will start at least And I'm sure it will evolve and change as we go along until we are able to actually 00:15:22 satisfy all and everyone's needs I think that's enough of an overview Of how everything works So you've Seen how to use the Snippets in your components You've seen how to Start initial steps of sharing a snippet You simply select them like I showed you Obviously Only when you have improved on it or whether you've created new ones will you ever wanna do that 00:15:48 And then you click on Share snippet and gives you a package And Then on that it Let me just show you again On that it has a Few tutorials like Tutorials I'm forking the JCB Snippets And Tutorial making a pull request These two tutorials would be quite key 00:16:11 For you to understand what would be this next steps And getting your Snippets Into the JCB community Well thank you for watching And Yeah Until next time