Layer5 Newcomers, 29 Oct 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Layer5 Newcomers Meeting (Oct 29th, 2020)

Description

Welcome @growupboron! Jash Patel and @tanuj_agarwal22 deliver a tutorial on development in @gatsbyjs.

A

Hello, am I audible, hello, yep? You are all right, hey so hello there. So uh I'm sanko, ghost I'm currently in my third year of engineering and I've, been contributing to uh automotive grade linux, and I learned I like to learn new stuff. So right now uh I got to know about the layer, 5 project, the mystery.io project, and I look forward to you know actively contribute uh into the org yeah.

A

That's about it.

B

Yep, that's a pretty cool profile picture. You have there.

A

C

Yeah first one on that.

A

So basically I am a part of formula student team and we make this formula student, cars and yeah so yeah, that's about it! That's.

B

Nice actually right, uh yeah.

A

I am in uh institute of engineering technology. uh It's in patiala, uh india, yeah.

B

That's great, I'm only formula team in my college too, so high five, there.

A

Oh, that's nice yeah.

B

All right um romero, I think we had you in the community call but go ahead and do stuff.

D

Hello, everyone.

A

B

I was hoping for a little bit more of introduction. There.

D

Oh, my name is omero marin. I come from veracruz mexico. Currently I work as a back-end junior developer and well. What can I say about me? I, like video games, japanese cartoons and meeting new people.

B

You'll find a lot of team people here, I'm not sure very sure, about japanese cartoons, but definitely new people all right, uh moving forward, uh dori food. If I'm pronouncing that right, please correct me: if I'm not.

E

B

Sorry, I'm just calling out go ahead, perfect.

E

Okay, if you can hear me, okay, I'm bori put, you can call me uh save to chat name, I'm from thailand right now. I'm the senior the depth of engineer so, for my passion is looking for learning some new technology to apply for my job to improve some the practice for healthy people to make it make it better for liability. Yeah just doesn't for me. Thank.

E

B

That's nice. uh Welcome to the community, everybody is there anybody else who hasn't speaking up uh joshua you've been with us before right and ayush muscle.

F

Currently, a final engineering student from iit, kawadi and new to open source. This was introduced to by one of my friends who was like a part of this group and yeah, so they started two two issues. I guess and yeah looking forward to solving more of this.

B

F

B

Hey it's two shoes already. That's fast.

F

uh I mean two days I left for hacked ever finished tires.

G

B

uh Along with, are you steps anybody on the same boat?

B

I am participating this year as well.

B

All right, if you want to speak up, do go ahead. If you haven't spoken up and you're still looking for issues to work on signal will find you one and let's get you that t-shirt or that tree either one of the two uh joshua.

B

I think I think you've been on community meetings before. But do you want to go ahead and introduce yourself.

B

If you can hear me.

B

All right, uh I think, we'll circle back, um hey geralt, just.

B

C

Okay, thank you shorty for taking the intros and welcome everyone to this last meet up for so um for this month we've been running oktoberfest meetups every thursday in placement of our new commerce meeting. So today is the last october. Fest meet up, and thank you everyone for being there throughout joining in. Thank you so much so um let me just share my screen.

C

First off uh just give me a second.

B

uh There's a link to the meeting minutes and the same thing that you can see on screen right now. Hopefully, if you do not have access to it, please do speak up.

B

Please do signal in the chat on slack anywhere that you can and we'll get you access, because um getting access to this means that you have access to the five drive, which is really a very basic step, and you should have access to it if you are planning on working on any of the projects or learning about any of the projects, uh ruth I'm really sorry for interrupting. Go ahead.

C

No sure so um is my screen, visible yep all right. Okay, so, uh like I said, welcome everyone like this. This, the last october fest meet up then, after which we continue our new commerce meeting every thursday, so uh the first uh scene on the agenda today is uh me uh kelechi and pratik we are going to. I don't know if patrick is on the call I just going to give a short thank you note for being with us throughout all the meetings in october first this this month, so I think I'll go first.

C

So thanks every I've already said something eliabo thanks everyone for being, even though you're just joining the meeting for the first time. Thank you for for coming today. Thank you for attending for everyone that has attended and has given feedback and has helped with the tutorials. I'm really really very grateful because I know um through this meetup and people have, we have uh impacted on every every new command that has come in from oktoberfest.

C

I've been able to give tutorials, we run for the uh four okay. This is like the fifth or the fourth, the fourth october first meet up, so we've been able to run tutorials every every week and even today, being the last one. We also have like a tutorial on gatsby and working with layer. Five projects. There are five ng sites project, so uh thank you, everyone for being there. Thank you for taking up those issues. Thank you for being patient with the code reviews. Thank you for being patient with merging and everything.

C

Thank you for asking questions, also, and also thank you for feedback, because without feedback we wouldn't have full through with this. So thank you so much. We are really really grateful, so I think I think she's on the call, if you you could please uh say something here. Thank you.

H

Oh hi hi everyone.

H

um Can you hear me yeah sure you can? Oh great um okay. I think um ruth have said everything that I would want to say, um but then I I want to say a very big thank you to everyone. I've not been really um stable with the meetings, because I've had little issues that have been sorting out. I've been kind of preoccupied with other things, but then I had to make today's um meeting being the last oktoberfest meeting for 2020.

H

So very big. Thank you to everyone who participated your contributions, your prs and every other thing, and we hope you get the um the packs. If you have it. If, if you get an extra one, you can send it my way. I would appreciate it because I'm not really participating this year very well, then, thank you all and we love to keep seeing you in the layer, 5 community as you've noticed it's a very warm welcoming community.

H

We collaborate with every each and every one of um our contributors, and if you have issues or you get hiccups um during your contributions, you could heat up anybody or go to the um the sodium. What the um was this, uh this channel.

C

The new commerce channel yeah.

H

The one amiyah do you want amir created.

B

The support channel.

H

Yes, the support channel. Yes, you could go there and just drop your issues and will help you out insult them to the best of our ability. So in all, thank you. Thank you. Shiriti. Thank you rules for keeping up with the meetings. um Thank you everyone. Thank you. Thank you. Thank you. Thank you. I can't say thank you enough.

H

C

Thanks kilici, uh it's it's practical on the call.

C

G

H

C

No okay, so um in I'll just be for party, I think patrick um patrick started. This uh gave the idea of running a weekly meet up for oktoberfest and it was really great because uh we have like I said earlier. We have impacted lives and patik has done a lot. Seeing that this push is true, and I'm really I'm really happy about that. So before I go ahead with the next agenda, I want to uh say something: so we have um oktoberfest feedback form.

C

So since, since we have been able to help out, we want to know how we can improve. So please uh please, shooting! Please, could you post the link to the chat while I talk about it yeah so um now this for this feedback form is just a short form for you to tell us about your experience and how we can support you better in your future, open source endeavor. So if you navigate to this form, you see the form is pretty short. So it's not it's not.

C

There are no so much impute field, so it's very very short, so you just put in your name your email address, and you just give us a brief expansion of how your experience was with october first, but you didn't have to work with layer 5.

C

Then you just tell us what you learned with us and how we can how the five can support you better, like kelichi, also said that you, you feel free to join us uh to join the community, navigate to the new commerce channel, and we would we would sort out any any issues you might be, having feel free to stay in the community, because it's a really welcoming community and we do not mess up with your first time experience. No matter your level of expertise, you are welcome to keep contributing to their five.

C

So please uh go ahead and fill this form, and let us know how we can help you better, because I I think that that's what we are here to do help you contribute better to their five yeah. So um the next thing uh we we are going to be having a tutorial today, like I said, we've always had it there like every every of the meet up, so today, uh tanooge uh will be taking us through gatsby and working with. uh They are five ng sites projects.

C

uh Tanooch is eastern.

B

C

Okay, are you, are you set to go.

F

Yeah I'll just I'll just begin.

C

Okay, so I just stopped sharing so uh sanud you can take over thanks.

F

C

F

Is my screen visible.

C

Yes, it is yep.

F

Okay, so uh basically we are going to talk about the layer, 5 website and how we are working on the like. We are planning to move to our next generation website. That would be based on a react-based framework that is gatsby and for data content management. We would be using strap I uh so we have been successful in building uh almost uh all of the pages and all stuff, but yeah.

F

We still lack many of the features and design parts so I'll just uh give you a walkthrough of like uh how we are uh working on it. So this is the current layer 5 website that you could see on the screen. You could visit the website by layer, five dot io, and uh so this website was initially.

F

This website is initially based on uh jkyle based website and like, as you can see, it does uh have good, uh colors and all stuff, but still uh we we had to like as the layer as layer 5 was expanding and we would be having more number of pages and all stuff. So we need to move to something dynamic along with also improving the uh designs and stuff. So we are moving on to the next generation website. uh So I'll just uh show you, the repo of the lyrify website.

F

Yeah, so this is the layer, 5 website and it's been deployed from from over here. So for the next generation website, the layer, 5 ng website, you can find the code in a branch at the same repo. uh So here you can see there is a branch called layer, 5 ng.

F

So the thing is, the master branch holds the code for the currently deployed website, that is, layer, 5 dot io, while the site we are working upon layer, 5 ng, the code is stored in the branch name layer 5g. So if you switch over to this branch, you will be seeing that it's totally a different code base and you'll see gatsby and all those files over here.

F

Okay, so now like for currently uh to monitor how much of work is done or like uh what is the status of the next generation website? uh You can always go to uh layer, 5, ng.net life dot, app. So like we are deployed. We have deployed this website on netlife and all the uh changes as occur. They gets reflected on this website.

F

So this is the next generation website that we now that I thanos and many of other contributors from this uh community have been working upon since long and I'll. Just give you a walkthrough of all the uh things and like the most important is uh the as I talked about is the dynamic part.

F

uh So as if you aren't aware of gatsby I'll just uh like to comment that uh gets me use this graphql queries uh to uh extract and like publish each pages and all such stuff. For this thing and uh moving on, we do have many uh many places where we use this. We exploit this uh feature of graphql queries. Let it be the community members or the projects so like each of this has been created dynamically using the uh graphql query and also, as I discussed, the use of a content management system called strappy.

F

So uh our next agenda is to link this website to strappy, so as to fetch all the data uh and like uh the data, would be put on up to that uh server, and it would be fetch from over there so like it would be more user-friendly uh site to like enter data and move forward with it and uh yeah. So like moving on to the website.

F

F

Like are there any questions up till.

I

Now you can find the unmute button. I have a question when you said um graph using the ar. Are you talking about uh it's built on the graph database graph db? It's probably a dumb question, but is that what you're referring to or are you referring to uh api framework.

F

Yeah yeah yeah api framework graphql is an api framework yeah exactly.

I

F

Yeah, so I will also have a look on to the code uh and so like you can even get a brief idea of like how what the syntax is for graphql and all such things. So like I'll. Just move on to the code for.

F

Now uh yeah so again, I'll just ask is mr invisible there yep yeah, thank you uh so basically, most of the uh development thing or the pages or components or as you all know, that it's a react-based framework, so it also builds upon components and all those things so like most of these things will be finding in the source folder. So this is the root directory for the layer file folder. Once you clone it and inside the source folder.

F

You will find this folders names, collections and pages and sections and all stuff, uh and also we do have some important files to notice. That's gets me node and gatsby configure so I'll. Just uh briefly explain and explain the importance of each file and like what is used in what purpose I'll just map it with the website as well.

I

Are you using a visual studio code here.

F

Yeah yeah yeah, it's visual studio, cool.

I

You know this is java you're using uh visual studio code interest, great okay, yeah man. After my own heart.

F

So as as the as we focused more upon the blogs or the members and all these things so I'll begin with that, and for that the folder will be concerned about is the collections folder. uh So uh basically, gatsby is uh like gatsby. What gets me does is it. uh It has an additional feature of rendering mdx files.

F

So uh I guess you all would be aware of md files, uh the markdown files that even github uses for readme and all those things, so mdx is just an extension of markdown files with uh the ability to incorporate react components in it. uh I'll just show you a demo of uh like an example of an mdx file yeah. So this is an example of an mdx file, so this is very much similar to the a markdown file.

F

If you, if you could notice and also you can also import components and images very much similar to react and then use them at any uh any point in the documenty code. So this is the m. This is the like. A basic idea of what an mdx file looks like it's: a combination of react, components and markdown.

I

And that replaces uh the traditional md photo. This does.

F

Yeah, so uh this is most commonly used in like uh currently for gatsby or uh some other frameworks, but yeah it will. It will be potential to replace md files soon.

G

Cool. Thank you.

F

Yeah uh so yeah so now I'll just if, as I just discussed about what an mdx file is now we'll be moving on to the uh so, if, as you can see, there are a number of folders here- that's blog books, carriers, events, landscape members projects, so each of this folder contains the collection of data for each of those section.

F

Let's say: if it is a blog, then it does contains all the blog posts that you had uh that you had seen in the website uh and if you look into the projects, then it would contain all the projects and uh such things. So basically, uh this is the collections.

F

Folder is basically used for uh storing those files that have been dynamically uh used by graphql queries and then rendered upon by mdx parsers and all those things and we'll also show a demo like how to write down a an mdx file for any uh section or even how to add a section uh in our you know in uh very soon so.

F

So like for now, we'll move ahead from the collections part and we'll get back to it. uh uh The next one is the components, so the components are like very much uh similar to components you can find in any uh framework, let it be react or view, or this would be very much similar. This is just javascript and css files, and you can also use the already made packages for those things.

F

So these are like uh the most com, the commonly used uh things that could be like put together and like we can just uh reduce the redundancy of the code by just having a single uh word to represent it in many other pages, and the code remains stored in the components folder.

F

The next one is the pages section yeah. So this is also a very important part in the website, because uh in in a gatsby website, in the pages section, whatever the files are, they directly get created as an individual page on the website.

F

Let's say it's: the books, dot js so like uh this books.js contains the code for what, whatever is to be deployed, deployed on the let's say, url slash books. So this this this page does not to be need to be created or something you just need to write code and it will automatically get deployed on the root directory and slash the name of the file. So if it's books.js, it would be a url, let's say layer5ng.com books and similarly, all those pages.

F

So here I'll just move uh to the projects, I'll just uh try to explain how we are using mdx and graphql queries along with them.

I

Can I ask you one more question.

F

I

Yeah this is steve. um You can probably see that uh anyway. uh My question is: um can anybody um download a branch and then, uh supposing they had some value to add uh they could what communicate it to you and to uh lee and to uh some other uh key members of the team or how does that work?

I

Yeah, I mean. Obviously I can download your branch right.

E

I

The current branch- and, if I have some input, uh just ask it to the group, uh put it on um uh uh chat, or uh I mean uh slack. What's it called, I haven't, run black. Yes, we have a couple of channels here.

F

Yeah so there's a channel for uh the websites, that's the website's channel, where all the discussion related to uh this, along with other two or three websites uh go on also like. If you, if you want to like uh address any issue and have opened up like have made some changes, then what you can do is like. If you don't wish to notify on slack, you can directly just like make the changes in your local branch and you can open up a pr against the layer, 5 ng branch of the repo of the website repo.

F

So as I in the beginning, I showed the the different branches, that's the master, and there is also branch name layer, 5 ng. So just a thing to look upon is like when you open up when you open up a pr, you have to just change the address of the head head head branch to layer, 5 ng. It would be by default master. So if you switch it to layer, 5 ng, the pull request would be open for the layer, 5 ng website and like after merging.

F

The changes will also be reflected only to the layer, 5g branch.

I

So that is your method of uh the request. What you're calling uh did you call it a pr that is the method to request uh your entry or your whatever to be uh included.

J

Yeah yeah exactly.

I

And then lee or you or.

J

Any of the maintenance.

I

Who led the last meeting uh would uh do a sanity check on it?.

G

I

Do you have jenkins, or what do you.

G

G

We use github actions and natalie to check.

B

Stephen, uh what do you mean by how do you check check what exactly.

I

Well, if, if it's valid I mean because you don't.

B

Want it um so any changes that you make will be uh reviewed by the rapper maintainer and anybody else that can who is working on the project we use netlify to do a demo or a static demo of the site, which you can see with any pr that you make. Any changes that you will make in the pair will be shown in that particular demo.

B

Apart from that, any uh changes that you're trying to make will be essentially reviewed by the repo maintainer and anybody else working on the project who will be asked to review it. Does that make sense.

I

It does uh one more question: um do you have a uh change order, management or a excel document, or a project, microsoft project, of what you're trying to accomplish from beginning to end, or is this more like an agile thing where you're just uh going uh going along.

B

uh No, we do have a pretty certain plan of what we we hope to achieve, um hopefully not show the deadline yet, but we definitely have a plan. We definitely have a site overview talk, but you can actually go see if you want to.

I

Yeah and I'm not being fair, because I haven't uh gone through all the links, because you guys have like five or six different key links and documents, including the meeting minutes as well as the intro document. I think those are probably the two key things.

B

uh Sure for any particular meeting, those are the key things.

I

Yeah yeah, so I will I'll shut up now and I will go through that and thank you no issues. You are the girl that I was talking about who, uh uh with the knowledge from my last participate.

B

uh It's nice to meet you then stephen, I'm shrithi. I should really introduce myself at the start of these meetings. uh Go ahead, josh! Really, sorry to interrupt. You.

F

Yeah no problem yeah, I'm sorry uh so I'll just add up on to that to close the discussion uh that like, if you also have any doubts, we do have a uh websites call on every monday, uh like what's the pacific time, shriti.

B

F

B

F

For eight times central time, you can also join us on the websites call. It would be very similar to this call, but the uh discussion would be on progress of how we have what we have achieved in the last week and we can also help of help or anyone. If anyone is facing an issue in uh making some changes over there.

I

Is that called the the uh layer five developers meeting? Is that what that is? Yeah.

B

That's the left.

F

Website's called.

B

Josh go ahead, I'll paste it in the chat.

F

Yeah, thank you. uh So this uh we'll just have a look on how a query looks like a graphql query looks like and like what are the key functionalities of it. uh So basically it's very much similar to a json format. If you could relate like uh all the like.

F

All the layers or all the uh levels are just uh uh syntactically very much similar to like how we write json, how we read data in a json form uh so like let's say there are the nodes and after inside nodes we do have id and front matter and again inside front matter. We do have title so it will be, uh it will be a uh so like it can be accessed by nodes, dot, id dot or nodes, dot, front metal, dot, title and uh similar.

F

uh So I'll just do uh uh I'll. Just uh explain like what we are trying to achieve over here. So let's say, as this is the projects.js, so we uh we wish to uh showcase all the projects for this on this page. uh So this is the all mdx.

F

uh So what it will do is like whatever mdx files are present on this repo, it will uh just extract those and then it will add a filter on the uh fields and collections. So, as you all said already saw that the it is the the root level, it's named the collection so inside the collection it would equate to projects so like uh in the collections all of those uh folders.

F

uh Only the projects folder uh would be accessed from now, and then there is another filter, that's front matter and inside that that's published and equals to true. So let's say there's projects and there are five projects currently, but this is an simple project I have created like for people to just look into. So, as you can see here, the in this is the front mat. This is this is what we are referring to as the front matter. uh So here you can see the uh published attribute or uh that's uh assigned false.

F

So as it is false, it won't the it won't be displayed, and on the other side, let's say if there is another project and it's published true, so it's very much uh like you can easily relate to those things uh pretty easy and uh you can move forward with it.

F

uh Yeah so, and next we'll uh just uh this is all these are all those things that we will be using. That's the title and the thumbnail and uh so like this is the exact structure of what, whatever the fields that are present in front matter and that would be extracted along with those. So, let's say again, we'll just uh have a quick look so yeah.

F

So there is, uh there is a field name title: there is a field name thumbnail published and uh these three things, so uh that would be extracted for each of those projects and yeah.

F

So after those, so this is this all is extracted into the data and then it would be passed on to another uh component or, let's say section: that is the project page and you can see it has been imported from the sections slash project grid, so we'll just move on to sections slash, project grid, yeah and uh yeah. So here you can find it like. The data that we extracted in that file through the graphql query will be using that data over here to showcase on the individual p in the grid. Page.

F

Let's say uh the data head, like from the data all mdx and the nodes and all those stuff will like we'll move on to the inner layer of the uh structure. And then we do have two things that is front matter and fields. So as we saw that in I'll just.

I

Yeah, and where is your error checking, I assume you have error, checking that if you're missing a parameter, uh it doesn't all just crash right. um You have some error. Checking is that in the routines that are in the javascripts.

F

Yeah yeah present in uh like we'll move on to gets big config very soon and we'll see, like all the exceptions or errors that we'll be finding over there. Thank you yeah.

F

So uh the thing is like, as you saw inside, there was a front matter and then thumbnail, so thumbnail basically uh represented the url for the image and so basically uh we'll be having an image tag and we'll be using, as I said, frenchmen dot thumbnail on to uh just use the data that was extracted and similarly we'll be using front method, dot title to use the title, and uh this will just uh basically create create an entire project page with grids and all of those data would be extracted from the collections folder inside the uh and the projects folder inside.

F

So this is how basically a dynamic thing works in gets b using the graphql queries, and this uh very this is very similar uh similar way. uh We have also uh used this same things in let's say members or events or books or blogs. So whenever there is a collection of such data and like it keeps on adding upon like a daily or weekly, so we do use collections and like we don't have to anyhow change the uh code of the page, and we just have to add that extra section. So this is also.

F

This can also be linked to like jack kyle. If you have knowledge of jekyll, it's also very similar to that there also we do have a rendering of md files and this thing, but here we have an advantage of using react components as well and yeah. So the sections part is also pretty much clear. So it is also very much similar to components.

F

But these are, we can say, one time use components, so we don't list them into components, but we do make a separate folder and we lose them under sections, and these are the templates yeah. So now what we talked about was for an uh grid grid view or like to just list down all of those uh data. But let's say we want to create individual pages for each of the those like.

F

Let's say we did have four projects inside the projects folder, so the thing we discussed was to create a grid view and list all the four projects in a single panel, but.

F

Are you asking something stephen.

F

Just one moment yeah uh so now for individual pages. Let's say we want to also create an individual page for each of the project with more details, so there will be using so here we do have a project single dot, js and it's also very much uh similar to a graphql query, but uh we'll be looking into the gets b, config and gatsby node. For this part, uh yeah so gets b.

F

Node is uh this is the like, uh let's say settings for this gatsby website, and here we do have so uh this uh the create. This is the create pages function, let's say and it it is used for creating individual pages. So let's say there is the project post template, so we are extract. We are using the uh template named the project single.js that we had just look and then we'll be uh yeah. So then we'll what we'll be doing is uh uh another part is to extract all the projects.

F

So here we are extracting all the projects uh from all the nodes uh or whatever. The collection are equals to projects that will be extracting and what we'll be doing is we'll just map both of those things and create a page. So here what we are doing is we will take all the data, that is the project object and then for each of the project, in that we will create a page. So for this page uh we do have a path and we do have a template on which the page is built.

F

So this is the template that we just saw. It was been extracted by project dot, js and this projects is the data, so this will create an individual page for each of the project and uh also, uh let's be config. So this will just make the address available and like it will link uh the uh the folder to that uh url, so uh yeah. So that's the uh discuss and I think uh we can move on to the nodes for uh uh demo. If it's possible, is it possible to have a demo for this.

G

I don't think so. My net is horrible at the moment.

F

Yeah no issues then like we can move forward with this even and I'll just uh explain a few more things so like we'll now move so like is. Are there any doubts regarding the code like, I think, we'll be now moving on to back to github and we'll see a few things over.

F

F

uh Was I audible when I asked to ask that question or there were no doubts? Yes,.

B

You were anybody any.

B

Questions one time opportunity, I'm kidding of course, uh but go ahead, be a little vocal. Ask your questions. It's a much easier process to do that here than on slack.

B

um Go ahead, judge them.

F

Yeah, we'll just have a look at the website again and the github repo.

F

uh Yeah so like we'll just off we'll just begin with mapping all those things that we saw. uh So this is the projects. Let's see, this is the projects, so, as you saw, there was a projects of projects.js file under the uh pages section, and so you also notice over here that this is the website url and slash projects. You find this page, and this was uh the grid one and like for individual pages.

F

Let's say if we click on the individual one, then each of the pages is created, so this one has been created by the later part. We discussed uh that's the gatsby config and the uh in that part and like this one has been created by the pages in the the file in the pages and the sections part so like. I think you can like very much relate or of to both of those things like this. One is just to list down those things and like uh this one is to create an individual page for them.

F

So also you have. You would have noticed that in each of those mdx file, uh the initial part was a front matter and then, uh after that, you also saw some code with react, based components and extra data. So uh the only the front matter is being used for those cards here and the the remaining data has been only used for the individual pages uh over here.

F

And moving on to a few other things I'll just uh yeah. So this is the blogs part.

F

I don't I, I think so like it's pretty much clear of regarding the how we are creating those uh grids and individual pages. So let's say now we'll be moving uh like how you can contribute to this thing and like we'll just talk a bit about that. So let's say yeah so I'll, just again repeat for those who have missed so there are two branches: one is master, that would be the default branch and the other one is layer, 5 ng, which stores the code for the the website.

F

We are the next generation website that we are working upon, and so, if you move to the issues section, you will find the issues with uh ng prefix or with an uh tag a label named layer 5g. So those issues are related to the new next generation website and the remaining issues are for the current website so like here and again, you'll find one one more issue here and such things.

F

So let's say we'll be uh we talk about the enhance the partners, page issue yeah, so uh the this is the issue and like uh you, after this issue, you'll be creating a pull request. So there is a pull request for this issue as well yeah. So this is the pull request.

F

uh So let's say the contributor has opened up a pull request so uh on to stefan's question like what are the checks and all those things so we'll just uh have a demo on those parts. So let's say these are the these are the basic checks.

F

So there is a dco check that is to sign off your commits because, like uh there is to be authenticity of like who has been made the changes to those files- and this is just uh it will be just it- will just link your email address, and it will just say that yeah you have done those commits and for future references. We can have an uh data for that, and uh this is the netlify deploy preview. So what it does basically is: whenever you open a pull request uh it will.

F

It will push all those changes to uh netlify and like it will create a separate preview for it. So, like you can also visit that preview and also uh see if the changes you had been working on uh are also like visible properly and also the maintainers.

F

Without having much to look on to the code, they can also have a look on to the preview and see if the issue has been addressed. So, let's say if we open up this deploy preview, so we'll just compare both the uh so this is the uh the current website, and this is the preview for this website. So the work was to be done upon the partners page. So here is the partners page and for this one.

F

Yeah, so this is the this: both are the partner speed. So, as you can see, the current changes haven't been merged, yet in the repo or in the branch. But still you can have a look on how it will display after those gets merged by the deploy preview part we are, we have incorporated in every pr, so this this is the page that was uh before the pull request by that contributor and uh we'll we were.

F

We were to work upon that and after the contributor made a few changes it um just like there were a few styling changes and such stuff, and now we do have something like this, so the basically my my intent behind showing this was like. uh We do have deploy preview.

F

So let's say: if any anyone has created an issue and any contributor opens up a pr, then uh you can also have a look on how it will look after being get merged and those things those things yeah so and also after you create an appear, there will be so yeah. This is the thing I was talking about. You will have to open up a pr against the layer.

F

5 ng branch uh for uh that issue because, uh like when you open up a pr it would automatically uh like it would uh by default, show creating a pr against the master branch. So there you will have to just uh let's. Let me see if I can just demo.

E

F

Yeah, so uh this is so like here we do have options of like uh what is the base reference or the base base uh branch where you want to create an issue. So here you will have your your repo slash your branch, and here you will be having layer, 5, slash, layer, 5, ng branch, and this way you can create an issue to the layer. 5 ng branch and the code in the master branch remains intact. From that.

F

And other uh things I'll, just uh like the things you will have to look upon is like uh the yeah. So we do have like. Let's say: if you open up an issue, we do have contributing uh contribution guides available yeah. So like let's say, if you look up look upon an issue and you want to work upon that, then there are so for each issue template you will find two things that are the layer, 5 contributing instructions and layer, 5 ng contributing instructions.

F

So whatever be the issue, you just read about it. If you have any doubts- and you can just move upon that uh with your pr and also you can ping any one of us, let it be me or tanoj or lee, or anyone who is working on the website. So you can also move on jump onto the website's channel and ask anyone doubts over there.

F

I think that would be enough from my side. I spoke around 55 minutes.

C

Thank you so much, but though that was really exhaustive and even even though I do not write gatsby, I actually lent it a lot yeah. So thank you so much for that tutorial. It was really awesome. So um are there any questions? If you have any questions, hopefully, please feel free to ask.

I

Well, you drop us at uh kubernetes, that's like the million dollar uh thing, but I will go through the documentation. This gives me a a reason to do that. Thank you. Thank you. Excellent job, great job. Thank you.

F

uh Yeah, so I'll just uh conclude, so apart yeah, if you don't uh have expertise in react or like, if you feel you want to work on jcal based websites, even we do have uh websites, let's say the mastery dot io or the smp spec dot io. uh So those repos also you could find easily on the layer file organization. So this is the measuring dot, io and.

F

I think smp spec should be somewhere yeah, so this is for the smp spec. So if you want to contribute to those websites, also like the websites is not only the website channel is not only for the layer, 5 ng part or also not only. The calls are also not only for the end layer.

F

5G part, it's open for all the websites discussion, so you can also uh work upon if you want to work on the mastery website or the smp website, or we're also having an incorporating an another website, learn layer, 5 inside the layer, 5 website soon and yeah. So basically, you can just move on to any of those things where you want to work upon and so like.

F

uh If you want to explore, react and gatsby, you can always jump on your finger and, like don't be afraid, if you get stuck anywhere we'll be happy to help.

C

You thank you so much, but though.

C

Can you, okay, you could stop sharing.

E

Yeah yeah I'll.

C

Just yeah, so please, if you have any question as regards the website, there's the website channel on slack. You could go there and you share your questions or whatever issue you may be facing so um and also this meeting is recorded. So you can also um check it out later and pick up some stuff if uh it was too fast for you to catch up.

C

So is my screen visible.

E

C

Okay, thanks so uh I'll still put up a reminder. Again, I talked about the the oktoberfest feedback form, so we really appreciate feedback and please you can navigate here and uh fill this form which talks about it's just it's a very short form, so not much detail. So you just share your experience with us contributing to october 1st, and they are five and what you learned and how we can support you better and also um see this is the last. Like I said earlier, this is the last um um continuously.

C

Every thursday we hold the new commerce meeting, where we still handle issues and sometimes talk about, um we take tutorials too, so feel free to keep coming to those to those meetings, and you can. We still have like two days. I think, two days to the end of oktoberfest right. So it's not it's not too late to uh complete the four pull requests.

C

Then also we have our community meeting. You could uh navigate to this area to check our community committee meeting and all other links, uh and also we have uh an open source question here. Let me just navigate there.

C

Okay, so yeah we have an open source questionnaire that whatever tutorial you want to, you want to see happen. You could come here and like feel this uh questionnaire and some other questions which are here. You could come fill it in and let us know how we can save you uh better in layer five. So um thanks everyone for really attending. We are almost like one minute over. Thank you so much for attending.

C

Oh okay, shoot. He won't say something thanks. uh Could you scroll down.

B

C

B

C

Oh it's the last minute. You know.

B

C

I went over overhead.

B

No, you are at the perfect spot, although.

C

I

B

About older tutorials you'll find the list here. You'll find also find the list on the actual face page on the layer, 5 site. A link has been added to today's leading minutes, um ruth if you scroll down a little bit more tiny bit.

B

Okay, eat perfect uh you'll, see a t-rolls list, uh an introduction to contributing to mastery by the day um get by ruth our host today and another one of gatsby by josh anthony that was an older one. Today was the uh expanded version that you just witnessed.

B

You'll also find other resources on the hack to the fest page. um If you want- or those are not enough- and you want to come back with us for tutorials- join us for the same meeting same time next week and we'll have other tutorials for you.

C

uh Back to you, that's all I wanted to add: okay, okay, thank you sriti for that input. So thank you. Everyone and we'll see you um our next meeting, so you can also make it for the community meeting happening on friday. uh Thank you. So much for attending and bye everyone.

C

B

See you guys next.

B

B