Layer5 Newcomers, 24 Sep 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Layer5 Newcomers Meeting (Sept 24th, 2020)

Description

A Gatsby tutorial.

A

To verify I'll go, have a look, it won't happen from the next meeting. It should not.

A

um All right there's a link to the meeting minutes in the chat. Please to add your names to it.

A

A

um Hey josh, hey balance, um you are you ready with the tutorial.

B

C

D

Okay uh before they go ahead, I think I think uh gerald is new here, so you should just like do a quick introduction, so just.

A

D

With uh is that fine, if you could use audio or the chats throughout any any of.

E

Them, um I'm not sure exactly what I'm supposed to say, um but yeah, I'm I'm dragging my washer from zambia.

D

That's fine welcome.

D

A

Donald, uh where are you joining us from.

E

A

Oh great great, all right, welcome uh we'll start this at about a minute or two.

E

As we wait for more people to join, could could you also like give me uh sort of uh what the meeting is about and how often you have.

E

A

Oh yeah sure ruth, why don't you go ahead and explain it I'll, be speaking a lot anyway? Okay, that's fine.

D

Yeah, so um there are, this is a new commerce call sort of like it happens every thursday weekly. So we try to in this call, we try to introduce um the organization to you and tackle any issues you might be. Having for any question and you're.

C

Not having issues.

D

Sure you would look at that sure.

F

Helping hand from someone.

D

Oh, that, that's that's nice. We will look at it eventually by before the end of the call yeah. So we try to sort out any issue. We do um lead to a little tutorial, setting up mystery gcl and, most of the time, all always the calls are being recorded. So just in case you miss anyone.

D

You would be able to like go back and look at it, so it's just sort of like an onboarding, a an onboarding call for newcomers, newcomers every week. So that's um what happens so. um The the meeting minutes of I think shooty sent it and I'm going to send it again. So you can kindly just add your name- oh names already there, nice, okay, so that that's just it so in case you have any questions, please feel free to ask we. We would gladly.

F

Supposed to do some presentation today, right.

D

Yeah yeah, he said he. I I sent a message to him elia he said he's going to do it next week. I don't, I don't think he's ready yet.

A

uh So the issue here is that I created a big presentation and we're all very excited about it, but he had a work emergency and he sent his regards today's meeting he'll be presenting his presentation and his demo on nashville in the next meeting.

G

A

Have yep hey maya by the way, welcome to the meeting uh hey? I hope it's not too late for you this time.

F

Now today is a little better, but I'm uh once it the dst starts here it will be midnight, but still it's a high. You know it's instead of staying up at one, even if I finish by one I'm happy with that. So that's thank you once again to to all of you to making this happen. You should early. That's really appreciated.

A

No issues, no issues. Thank you for attending all right. um Well, it's seven months in we should start this all right! Welcome everybody! um We have a very exciting tutorial on gatsby today by josh and thanos, who have been actively working on the live, five ng project which runs in gatsby.

A

Moreover, to that we also have a small discussion on what we are going to do for the exciting new event coming up next month, which is octoberfest, prateek will be giving a um overlay and a small discussion on that, uh starting with pratik. Do you want to go ahead? Pratik.

H

I was just going to ask that, like how much have we have. We started because like uh requires uh us as a layer, 5 community to register beforehand, and it takes us 3 to 5 working days to get the event approved. So I was just thinking that we should start the application for the process for the octoberfest by now.

H

A

H

I actually didn't.

A

Know that you had to register for this.

H

Yeah yeah- I just did for one of my small community yesterday, so I know the whole process so like we are trying for me to do that stuff. Also I'll just register on behalf of on behalf of layer, 5.

A

uh All right, okay, um apart from the illustration process, we still have six days. I think so that should be good enough. Hopefully.

H

That's good enough.

A

I think we'll have to create some beginner specific issues to supply fodder for anybody who comes in.

F

Yes, I think you know.

D

F

Is perfectly fine, but prefix voice is very low for me. Oh ah sorry, for speaking, I generally get to recommend this away from the audio device.

H

That's all like, uh we just need to register and we need to make some issues uh which are october, fest related.

H

So that's all about the octoberfest and we need to give a location also like uh when I did yesterday. I had to put the city from my country so like I would. I would have asked that where should we put the location on which location should we conduct this from.

A

um I think that would be austin texas, I'm not sure confirmatory, but all right. That is something to do. um One thing more josh talent. Are there any beginner specific issues that could be probably made on the layer 5 ng front?

A

I know we already migrated the pages and everything. So that's.

H

I think yeah we can like. We still have scope.

I

For beginners removing a few things from the like landing page and like something related so like yeah, we could have some issues.

A

All right, um I guess we could probably have a google doc and brainstorm there for any small issues that you don't want to fix yourself or that you that can be converted possibly into issues either on the live, 5 ng front on the mastery front or any of the side projecting fronts.

A

Also or do have the.

D

A

To be beginner friendly like completely so.

H

No, it's not necessary actually, but yeah people who generally contribute are completely new to open source recommended that we should have a beginner's first approach when we are assigning something as an issue.

A

I actually remember participating in it last year, and I think the only new challenge for anybody who is new to the um entire fest in the entire event is to learn how to operate git and to how to work with it. A lot of them are quite invested into what they're doing and quite good, with what they're doing.

C

A

All right: let's, uh let's create a google doc and just brainstorm there and go forward with whatever ideas we come up with then uh also for the hacked registration uh pratik. Are you doing that or do you um just came up with the idea and want somebody else to do it.

H

I am open to doing it. I just did yesterday for one of my clubs, so I think they.

A

Sure I think you can go ahead and do it if you want any details or confused about any part of the um form like the location or something of that sort. Please do contact me I'll help you out.

C

Yeah, you sure.

A

All right: um well, I don't think we have any other newcomers in the call today. If not, I think we can go ahead with the tutorial uh josh talent. Please take the stage.

I

Yeah, like I'll just start with an intro what layer, 5g.

A

Sure do you want to share your screen.

I

Yeah I'll just share my screen.

A

I

I

Oh is my screen visible.

I

A

I

Okay, so, like beginning beginning with uh what do, what does layer 5 ng mean so currently what.

F

For momentarily, your voice was better now, it's again low.

I

Hello is it clear now.

A

Yep, it is, I think, you'll just have to speak into the mic, a bit more.

I

Yeah, okay, so uh currently, this is the layer 5 website that you can see in your like that. You can visit by just layer, five dot io and what we are building is. We are building a new next generation website that would be like faster and like a more more user friendly. We can say as compared to this current website and the new website is uh based on the react framework. That's gatsby and it will also include some features from strap.

I

I uh for content management so like this is the current progress in the layer, 5 ng website that you can see on my screen and for the code base.

I

Is my screen visible.

A

I

Yeah so like uh we don't have a separate repo for the layer, 5 ng code. uh What we do have exactly is the layer 5 dot io the current website code. You can find it in layer 5 in the master branch.

I

While for the next generation websites code, you will have to go to the layer, 5 ng branch that you can see here and that would be like a totally different code base that is currently catering to the layer, 5 ng website and moving further to like how you will be building and what all things you could uh like helping out or what, uh how you will be like. How can start up with this thing? I think thanos will take there from forward sure.

B

B

G

G

Is my screen visible?

G

F

uh What jash is basically telling us here, josh.

I

uh Yeah, so do you have a question? I mean.

F

Yeah, so my my question is what you are trying to like retrieve.

I

Yeah so like I'm just, I was just trying to give an intro of what layer, 5 ng, what layer, 5 ng means like layer, 5 ng is the next generation website for a layer, 5 and like it's currently under pro under construction, so like. If anyone wants to help or make some contributions or learn, react or gets me or anything related to that then yeah like uh they could reach out to us and like we can have some countries.

C

Reach out to you, josh.

I

Yeah so like you can reach out to me, or we both are like working on it uh since uh around one and a half months, so yeah you can like reach out to any openness, sean richard.

G

G

Back the contributing instructions in the.

F

Your voice is very low man.

G

Is this better.

A

Yeah, it's much better.

G

A

Is better okay.

G

So you can find the instructions in the contributing.md file in the layer, 5 ng branch, so I'll just show.

B

You through and walk through.

G

F

G

When you switch over to the layer, 5 layer, 5 ng branch, you will.

A

See a completely.

G

Completely different website so before it was all jackal based now it is completely react-based and running on top of gatsby. So now, after that, to install the dependencies, all the instructions are mentioned in the contributing.md file, so we have created a simple make file which makes it easier to run the commands. I would say so after cloning. The repo. The first thing you would do is install the mpa you need to uh before you install the dependencies.

G

You need three things installed: node.js npm and the gatsby cli. All things are pretty simple to install. You just need to do a google search to install them uh after, after installing all all three of them, uh you install you install the.

F

Your voice is very low man.

G

Yeah speak on into the mic. Is this better yeah? It's better now yeah after this, the first thing you do is install the dependencies by running make system labs make set of lips after that, after doing so for me, it will finish quickly. I think, because I have all the dependencies installed.

G

I'm just closing it, so it doesn't take time now, after that, you can. What you can do is directly run, make site command.

G

If you do the make site command the the local build of the repo will launch in the local 8000 branch, so.

F

What was the first company executed.

G

uh Make set of lips.

F

G

Yeah, it is, it is mentioned in the contributing dot family dog.

A

F

G

A

You'll find all the commands in the contributing guide.

B

G

Running the site on in the local, uh currently all the contents in the home page are just similar contents. We need to update those uh after that. The I I'll move on to how you can create a page in for uh in guide's way.

G

So the sb makes us it's pretty easier to create a new page, so you can just go to the pages folder.

G

And create a new file, let's say I'm creating a file called new new page.js.

G

And then there are many web components of it is completely react-based, so everything is com modularized. So there are many pre-made components. If you look at any of the current pages, let's say I am looking at the news page.

G

You can ignore this. For now this is just a graphql query. We'll come back to that later, the you can see that there is a. They are using many components which are pre-made so like I will just copy this and all right.

G

G

Foreign, if I do so now, I will go back to my chrome.

G

F

So, just a quick question that the the particular code which you added there is that the javascript code, that's a react code. I look my apologies if I'm asking the stupid question, because I'm not from web development background.

B

Yeah, so let me just go back to that.

G

So uh what a react does is they follow the syntax of their own? They call it jsx. Basically, it's a combination of javascript and html, so this looks like an html code, but actually it's written inside javascript so react passes it in its own and creates a single page application.

G

Does this make sense.

F

So yeah, I'm able to hear you, I think, there's genuine some problem with your audio, but anyway, we'll still carry on what you're saying is that it looks like html, but it's not actually html. It's a javascript, and that is because of the virtual react framework is that yeah.

G

F

G

So now, if you remember, I created a page called new. If I go to that url.

G

What I can see is this footer is added because I imported the footer component and this hello world is present because I just wrote hello world to just show it so creating a page is pretty easy in gatsby.

G

You just need to create a page inside the pages directory and you can write any gsx there and it will create the page for you now.

G

There are some things like blog posts and news news articles that we post, which are available inside the collection directory.

G

You can now suppose. Let me share it.

G

This is the layer 5 in this site, design spec. You can find it in the website's channel this, I think, print on the pins there. You can check it out, uh so there are some things like blog post in layer uh that we are my main things that the blog post we have migrated most most of them. So this is the after migrating all the blog posts. So.

G

Creating a blog post is much simpler, you can, what you can do is just.

G

Go to the collection folder inside the blog post, you'll find all the blogs listed and there is a sample block. What you can do is create a copy of this and make a file with the format dates, slash the title of the verb. It doesn't have to be this, but you're just basically keeping it for consistency.

G

Nothing uh if you don't.

F

Your voice is low, man, make sure you're very close to the loudspeaker.

A

Yup understand.

G

Like if you can, you can uh create a new blog post. What I was saying was by just creating a new folder and inside the folder. You can create a file called index.mdx and what mdx is is basically like the md4 md files that are present for the readme, that are the readme files present in the github repos.

G

It is almost the same thing plus you can also write the code. You can also write jsx inside it, so it is. The combination of react react plus md4 md. So if I go, if I check out one of the blog posts, these are the predefined things we call. This is called the front matter and like this is the title of the block, the subtitle date, author, etc.

G

You need to fill this on in all of the blog posts that you want to create it. If some something is something doesn't fit, you can just remove it and it will not make a difference now inside.

G

One thing that you should do always is uh import. This blog wrapper component. This is this is the component which you need to import it base. It contains the styles that we have defined for each blogs so like. If I go to a blog which contains styles like this.

G

Yeah so like, I am importing lots of images here and I'm and using it here. So this is basically how you would write a react code just inside an empty format, and you can also write mb how you would write the md files. You can also write in normal way. It doesn't have to be html the only you can also find how to write this instructions in the design spec, which I I'll show this design spec I'll I'll also share the link of this. It is also present in the website's channel now.

G

One one thing that uh anyone would want like to is: they can help us migrate, the news page. So there are lots of news pages which are news, articles which are present, uh and we have currently migrated just one of them. You can use that as a reference, and there is also a sample news. Article I'll show that also.

G

This is the sample news article, you just create a copy of this and there are our instructions- management. How you can use this.

G

uh You just create a copy of this and write all, and you can just most of the things you can just copy from the existing newest articles and it will automatically create those news, articles and list them in the page. You just change the published, equals false to true and it will be listed.

G

uh That's pretty much it. I think. If anyone.

A

G

A

A

If anybody has any questions, please do feel free to ask.

A

You have two of the best people working on the project, so now would be the perfect time.

A

All right um thanos: could you also explain a bit more about the left, 50 project or what we're exactly attempting to do.

G

G

So what we are trying to do is migrate everything present here into that site, uh so it's more easier to work with than it is. It is more pleasing I would say so.

G

We are using gatsby for this because it is as this thing they were 1000 times faster than any other framework present there yeah.

A

Scroll down for like one second to the.

G

uh Subscribe box.

I

uh Yeah this subscribe.

A

G

I think that is uh javascript doing.

B

huh Okay, so yeah.

G

The current progress is that we have migrated all the blogs part. We have configured it and we just need to add the individual blogs. Then we.

A

G

Added some blog migrated some projects, one of them smp- were migrated, and I think there is a pr open for three more project which I think will be more than one or two days.

G

Apart from that, we have migrate. The books.

G

G

And I think we have migrated recently done is.

A

G

Then there are many more pages like the workshop page is left to be done. uh The about me about us page is left. Then there is a contact page. I think, and you need to fill the home page if anyone likes to get more deeply involved with casb and graphql in general.

G

This would be a great website, a great project for you to do so.

A

D

A

This would probably be more appropriate on the websites, but um do we have any small tasks on the project that could be passed on to somebody or that could be turned into issues as we got already on the side.

I

uh Yes uh has opened an uh issue for the uh blog. uh The arrow has to be like moved to the right part of each of every blog and uh yeah, so that can be a very good first issue.

G

Apart from that, anyone can pick up the news up migrate. The news part I can create an issue for that today, and there are, I think, nine or ten news articles. So there are lots of news articles and that would be a complete start with this project.

A

A

H

Hi, uh maybe I can take up that the migration of news- and I just want to ask one thing- that we have one section for adding a blog in that new website like if someone knew.

H

Someone is writing a blog, he has to go through the or he can directly write over there submit from there on the website.

G

You mean directly go into the website and post a blog there, yeah.

A

G

You have to make a pr.

G

Yeah thinking to do that using strappy in the future uh after migrating. So in that you can directly use scrappy to write the block.

H

Like uh we can have a like form like thing, your voice is gone.

D

H

Sorry, my knight is not working. I think network is making some problem.

A

Your audible logo end.

G

G

Yeah, what I was saying was that currently you have to make a pr, but in the future we are, we will use a something called strappy.

H

I think I am also saying of that that we can do that thing.

A

And it's could you explain what strappy is? This called would probably be directed to anybody who wants to start out with gatsby, so this could be a good explanation.

G

Yeah, it is basically content management system kind of like wordpress but simpler.

G

I think the temporary deployment we had is down currently, so I cannot show that there must be a demo here somewhere.

G

B

G

I cannot find demo here so what strappy does it? It will give you a kind of like a form, not a form like uh like in a file you all the things you can do in a md amd file. You can write it using strappy and it will automatically update the site kind of like how you were telling a form, but with much more power. The problem with form would be.

G

You cannot position the images according to your wish, and there are some blogs which contain a code snap snippets, so that those.

H

Have to be added and not exactly format, to make, or something like that feature that, because of that, we don't have to make a pr and merging that that thing can be removed from the posting a blog.

H

These steps are, I agree, yeah.

G

Yeah yeah, I agree, that's why we are looking at strappy to make it easier.

H

A

All right um is there anything that needs to else that needs to be explained with respect to the i5 entry project that anybody could possibly need to get started or to work in it on any aspect of it.

G

Yeah yeah there is much uh the deeper stuff would be specifically gatsby related, which are the graphql queries I'll show an example.

G

I'll explain what this graph this graphql query, does so.

G

Like this example in this newspaper, uh we have typed subtitle date, also blog and some other things. So what this graphql variable does is this this there is a call. There is a something called new all mdx. It will fetch all the mdx files that are present in the news that news folder and having published equals to true, in that it will fetch the title of the page, the date author, the external url and the thumbnail of the page, and I am using that in the new stage.

G

So let me show it in this news grid. How I am using this is that, after fetching, all the data it is kind of like an is the alternative to jason, I think uh it was created by facebook. I think I don't remember correctly uh it. The github api is also based in this. Based on this, you, you fetch all the queries during build time, so what it does, it will fetch everything when the site is building and not when the site actually loads. So it is request poster in that extract.

E

G

So using the fetching all the information from the front end, I'm using that inside this card component, like I am you using the thumbnail for the image, the title, the author, these are specifically gatsby related stuff.

G

You need to write if you watch a couple of you, read the documentation or watch a couple of tutorials on youtube. It's pretty simple: to get your head get started.

H

Yeah I have but yeah. I have understanding of guidespan.

H

Graphql on it like for acquiring uh like news and blogs, so we are using graphql for fetching.

G

C

A

All right: well, this is kind of like a one-on-one class. So if anybody wants to ask anything, go right ahead, you won't find a better time.

H

Nothing much I was just working on the landscaping page. It is a pretty big one. I need to make the timeline and I'm not very good, with styling and all stuff.

H

So that's how I'm doing like I'm almost done I'll get.

C

A

All right, great.

A

Well, if nobody else has any questions.

A

A

Just let me share my screen. um Stop sharing. Thank you.

A

All right, if nobody else, has any questions, uh I'd like to just like to add that well, whoever wants to work with any particular domain, any particular task. There are a list of questions here. All you need to do is comment to the dock. Doc signaling your interest.

A

If you don't want to do it in a this public way, you can ping anybody in slack anybody who doesn't call today or any of the community managers or anybody working on english. I'm sure they'll help you out um for any particular projects. Well, now would be the best time to speak up. If you don't, if you aren't already working on it, otherwise, that's it! That's it for today's call. Thank you for coming in everybody.

A

Thank you, josh for the tutorial.

D

Yeah. Thank you.

D

D

D