GitHub Community, 27 Oct 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: GitHub Africa Meetup

Description

GitHub Meetup Africa brings developers from all over the continent to learn about game development, documentation, and tooling. Hear from experts in the field on how they use GitHub to build better software.

Speaker: Kelvin Omereshone
https://twitter.com/dominus_kelvin

Dominus Kelvin is a full-stack JavaScript engineer, technical writer, and speaker. He also loves teaching everything he learns.

Title: Level up your styling game with Tailwind CSS
Tailwind CSS is a modern way to style websites and web applications. In this talk, we will look at why Tailwind CSS makes it easy to style websites and the problem using Tailwind CSS will solve for you.

Speaker: Emmanuel Eboh
https://twitter.com/eo_eboh

Emmanuel Eboh is a Frontend Software Developer and Technical Writer using tools like JavaScript and React to promote open source technologies for everyone, irrespective of background.

Title: Building Cloud-Powered React Fullstack Apps With AWS Amplify

AWS Amplify is an open source JavaScript library provided by Amazon Web Services (AWS) that enables developers to build frontend, full-stack, and mobile applications with various cloud services. In this talk, I will go through the amazing features of Amplify with React as a frontend, such as: -converting Figma components to React code. - Data modeling - User interface Binding - Updating the user interface designs and contents from the command line - Connecting app with data backend - adding authentication feature (maybe) - the best practices using Amplify with React

A

A

Hi everyone good afternoon, good morning, good evening, former you're joining us from sorry. My video is not on today. I have like internet issues, but we're still going to go regardless and yeah. I do not have Martin's today, because Martin's Martin's um is busy as well so yeah. We we're welcome again to the GitHub Africa virtual Meetup.

A

um You can share on the live stream and you know get other people to join us, um as we have two amazing speakers with really really interesting topics. So, let's get started for today.

A

So my name is Ruth.

A

um I I still had Martin's here, because you know Martin's is my co-host and even though he's not here, I'm going to introduce Martin regardless, um so Martin's is uh an account executive at GitHub and he also loves crypto and that's his Twitter art and I am Ruth uh manupus, sauce, Advocates and GitHub star, and you can find me on Twitter I am so much active there.

A

So if you have any question about open source, it's on Twitter, so today we are um going to you know we have GitHub news um and then we have like two amazing speakers which I shared earlier. They are going to um be talking about two different, interesting things: uh Tailwind um CSS and you know, building um full stock react apps, so I am definitely um excited about that and after the speaker session would have.

A

uh You know, networking live session here on YouTube and eventually or maybe you would have kahoots games as well, which is always my interesting part.

A

So for the GitHub music I think we just have one thing like I know. We usually have like a lot of things to share like GitHub is always um you know doing stuff, but today um the the main news is: everybody has been preparing for GitHub universe, so you're going to hear a lot of news then- um and you can, you can still register um you can go to I know.

A

um Andrea would share the link to the um GitHub Universe, where you can do register on the YouTube live, so please um go register for GitHub universe and um would have there'll be a lot of news there and a lot of new things that you can learn about GitHub. So please do register and it's happening in November and stay stay tuned for that.

A

So let's go on to introduce our first speaker for today, um Kevin and Kevin is going to be um talking about. um You know: leveling up your styling game with um Tailwind CSS um Kevin is a full stock, um JavaScript engineer, a technical writer and a speaker. He also has a YouTube channel as well, and he also loves teaching everything he learned. So we're excited to learn a lot from Kevin today about you know: leveling up your styling game. Css has a lot of issues and we.

B

Definitely involved.

A

A lot from you Kevin, so I'll, let you take it away. Kevin.

C

Hello, can you hear me.

A

Yeah you're all good to go, sir. All.

B

C

Hello, everyone could you leave like a thumbs up? If you could hear me on the chat.

A

Thumbs up for me.

C

Okay, all right, so thank you, Ruth for the intro, so I'm gonna take it away from here. So, um let's start by me sharing my screen, so we could get right to it and see how we could all level up with Tailwind CSS, so I'm going to share my screen.

C

Okay, so can you see my screen foreign.

B

C

um Can you all hear me and see: okay, cool yeah, so yeah? Let's do this so I'll, probably gonna just go on like this.

C

So my talk is leveling up your styling game with steel, wind CSS and the subtitle is build any design directly in your markup all right. So my name is Kelvin. You could call me KO.

A

If you can you're not sharing the right screen, it.

C

C

uh Okay: okay, okay, got it sorry! Yeah I can't really see my uh how about now.

A

um Let's see, let's it's coming up, so you're sharing what you're sharing now is the um demo you want to do, and this is not your slide right. Yeah.

C

um I've already flipped over to the slide, I think it's gonna take a moment for you to show up and give it a while again.

C

Okay, I should stole my shirt again.

A

C

Is good software I'm? Sorry, it's good, yeah, yeah I know I, don't I, don't okay, um probably yeah. Let's just do it like that. So how about now it's still showing this or the screen and that's funny, because that's not what is on my monitor.

A

Yeah or you can see what's what's showing right, yeah.

C

But it's showing the wrong thing. So what I'm going to do? I'm going to just pick keynote itself, yeah.

A

C

I can share again when I want to do the demo. So sorry guys it's software, no worries uh is it. Is it live yet not.

A

C

How hard will it be to share a screen gee.

D

A

Slides, maybe I share from here then, when you want to do your demo, you know okay,.

C

um Then I would have to download the slides.

A

You know like link a link to it, maybe on Google sites or something.

C

No, it's it's on keynote. You cannot live. um Okay, hold up, I. Think I could give you a link.

C

Oh, this is not cool. Don't.

A

C

It's fine I, just I, don't like keeping people waiting. Sorry guys why I fixed up my slide.

A

A

C

Okay so I think I know what I should do now it can drive and I should do it like.

B

C

C

You can see the screen right and you can see me.

A

Yeah I can't see yeah I can see now great. So let me let me just drop it just.

C

D

Finally, that's good yeah, we see you and we see your deck.

C

Yeah, it's it's gonna, take a lot of moving around to get done, but let's do it.

C

Okay, so yeah! Sorry about all that um I think we are at the point where it should work so level up your styling game with Tailwind CSS.

C

Okay, so my name is Kelvin I I'm, a full stack, JavaScript developer, I teach javascripts.com I'm a technical writer I built a tool for JavaScript development. That's called copy and that's my handbook. Follow me on Twitter for JavaScript tips. So.

C

So I want to start with saying: why do we.

B

C

Css all right, so we do CSS to make websites look pretty right, so you can imagine how something that is supposed to make website. Look pretty. How is it so hard? Yes, CSS is hard. You have to deal with things like consistency where you have like a shade of purple there and another shift in another place.

C

Just see all this website with a whole lot of padding issues and all that, because why CSS is hard, let's face it and there is the issue of maintainability if you're gonna work with CSS files- and you have a big project, it's going to be working with a lot of files, thousands of lines long and it's hard to maintain that also there's the issue of context.

C

Switching where you got to switch from your HTML to CSS, then, if you add to the mixed JavaScript it just it's just too much right, then you have to name things like your classes or IDs, and you know you shouldn't repeat IDs on the page. So it's it's just a whole lot of issue, then there's specificity where you are applying red but you're, seeing blue, because something else with a higher specificity with a higher order is actually overriding. Your changes.

C

So we're going to look at how we could solve all that cascading and you using exclamation mark important everywhere, because you're trying to override a star not a good practice, but we get to do it because why I want to get the job done, but we are fighting CSS and to top it off.

C

Sometimes, even though you have a style sheet, you do in lifestyle because you want to just quickly get the job out of to get the job done and you find yourself do you know, there's a lot of gymnastics in order to make CSS work and your site look pretty so, and always we're talking about poison to CSS at scale, because if it's just a simple Hello, World app, you wouldn't be worried about the CSS right.

C

No, but when you're going to work in the last project, like I've said you have to fight with CSS and don't tell me, the bootstrap is the answer, because there is a problem with Boost job right and let's look at the problem with bootstrap. The programmable bootstrate is for one.

C

You have similar looking websites, all right you if you, if I go to a boost job site I, would mostly be sure that Yep this is a bootstrap website and we don't want that right. We want our products to be unique and our branding to show for and not The Branding of the framework right. You have to fight bootstrap to customize it, and on top of that it comes with JavaScript and we have a lot of modern flavors of JavaScript.

C

We want to use, we have react, we have view we have um spelled, but bootstrap says yeah I'm going to come with my own JavaScript for some reason, and we don't want that.

C

So, let's level up right, let's change the CSS game, let's stop fighting CSS! So, let's stop wrangling bootstrap, let's level up, and to do that we are going to learn the Tailwind CSS way. Okay, so what is the Tailwind CSS way?

C

So if there's one thing you're going to take away from this talk, is that to tell when CSS way, favors a concept in object-oriented design that was made popular in the book called design patterns by the gang of four, and what's this concept, you should favor composition over inheritance all right. So what is composition in the context of Tailwind? It means reusable classes where Tailwind gives you this set of utility classes like classes that do one thing like you know, they will tell you that a function should be to do.

C

One thing I should do want to wear right. Tailwind gives you classes that do one thing and do that one thing really really well all right, but talk is cheap I'm going to show you how we can use Tailwind.

B

C

All right so I am going to stop the share and share my screen again.

C

um So sorry about this guys, it's just a lot of technicalities with uh stream here at the moment, so I'm going to share. Oh.

C

That is weird, so, let's see screen one and how that works.

D

C

Since he likes the screen a whole lot, let's do this again, so can you all see my screen? My code editor.

A

um So it's making you like, can you stop share and then share again.

C

Yeah I have stopped and I again stop showing.

C

Okay, okay, I think I got it now yeah, so can you can you see it.

A

Destroying your web um and then showing like you shouldn't, have a demo.

C

Half of the demo yeah yeah, how about why is it doing that? Should I close this one.

A

Yeah and then zoom in.

C

I'm already Zoom a lot zoom out rather zoom out, does that work.

A

Like Mickey English is hard so.

C

A

It's working now, yes, scroll.

C

It's working now.

A

Yeah I think so, but.

C

It's not showing you.

A

C

We can't see that hmm his name was going to be a little bit hard. So, okay, um hopefully you could see my screen. I really had to load one for this demo, but let's see how that goes so I'm going to create something, um just something basic right to just show off Tailwind a little bit so I'm going to start off with a thief.

C

So you know the div, the generic container, where we wrap everything, even though they are other semantic elements to use yeah that one so I'm going to do a class because still give us this sort of um utility classes and I forgot to mention I am in Tailwind play. You could assist that by play.twin css.com. You could even try this right now as I.

C

Do it all right so now I want to make this Diva Flex container Okay, so with CSS I have to go CSS Target, the div game call display flash, but we'll tell you when I just need to put the flex class in there all right and then what I want is that this element should take a minimum of the screen. You know in CSS you do a 100 vertical height, but I want this to be so. This is how you target like set okay, let this div take hope to the entire screen.

C

Then I want the flex to be a column all right, so this should be the like. I want all the shouts or the children to be stuck on top of each other. Then I want everything to be Center item Center and also justify Center.

C

Then I'm going to give it a BG Violet of 100, because I want a little bit.

B

C

um So you just you're just going to change the white up to this Violet looking stuff, which is really good. All right, then next, what I want to do I want to heading and I want it to be hello, GitHub, Africa, okay, now what I want to do with this heading is I if you've in most sites these days, you see this text gradient going on right. So let's achieve that with Tailwind.

C

So what I would do is I'm going to give it a class of BG gradient to write then text 5xl, because I want it to be really big and MD. uh So let's leave that one first I'm going to tell you all about that later then this I want you to be extra, bold, all right, but that doesn't do the magic yet right! So let me not I, don't know how how much of the scene the screen you could see. So let me make the classes for me so I'm going to do from Pink.

C

Sorry, if I can type today from Pink 500 and to violets 500, all right so yeah.

D

C

You're giving it a background, but that's not what you said right, yeah we'll get into it now. The magic is there's a BG clip text and yeah that's working right, but the text is still there. So what we need to do is to say the text should be transparent, so we see the background taking the place of the text and voila all right. So here we are you get to see this and all we did. We were still in our HTML folks, and that is just magical all right. So, let's, let's do something else.

C

Let's say we're gonna say um start styling like a subtext side like a pro and here we're gonna, do a class text Violet, 900 and text. So this means an extra large class and I'm going to show you how Tailwind really resolves all these inhibits. So I just want this one to be semi-fold and you could see the second ship we're building something that looks nice all right in our HTML right. We didn't need to go anywhere, we're just doing everything all right in our HTML. So next we're going to add just a link.

C

You know a call to action like we'll do normally so I'm going to say this. One should take you to the Tailwind css.com website and just going to be learn to win, and that's so because we still win by default. You have these CSS reset, so this is a button. If you look at it, we could over on it, but we can't.

C

But we can't um let me move Myself Away, so we can over on the button, but it's not looking really good right. So, let's make the button look a whole lot better. So I'm going to do like a class of the BG violet 400 I'm, going to give it a width of 12 and a height of 12..

C

Well, not let's not do that. Let's do something much more better, so I'm going to give it 900 here and.

C

Say 500 should look good. Okay, then I'm going to give the padding right and left, which is the PX class and padding up and down, which is top and bottom and we're going to give it text Excel. Make it front bold right, then this is the trick. I'm going to show you now you would say why don't we make the button White all right, that's good right, but it's more natural. When we give a lower opacity of this color, which is violet for the text color, so we could do text Violet.

C

Then we give it 100 and see how nice that looks right. That looks really really good. So we need to, let's give the button a shadow, all right so I'm going to move this down a bit I I.

B

C

Know how much of the screen you could see, but let's see so, let's give it the shadow of so with with them Tailwind. We could specify how much Shadow we want. You could see, there's the Last Shadow now, but but by default. This is a little bit of black shadow. Let's give it a valid looking Shadow, so we say shadow violet.

C

Okay, we give it about follow. It then give it 400. Now that is looking good, but we can up our button a little bit by making the button rounder. You know everybody likes a rounded button, so you could do rounded MD, oh yeah, and that's looking good, but you could see how all those the The Heading the subheading and the button are all close together.

C

Let's fix that up now, you might say: how do we do that until one simple we could do a space y or four or to whatever space you want, but I like four. It gives you this nice looking space. I really really really looks good all right. So with that we are having something on the screen. So by for my final demo, I'm going to make a floating button, you know that little floating button at the bottom, where you could, um where you could say, maybe put something like a help stuff.

C

That's what we're going to do so I'm, going to put just a question mark for the help and.

C

Then I'm going to give it a class of Fiji, violet, 400 and W, so the width couldn't specify the width here and the height of the button, because we want it to be the same width and height. So when we say rounded full it's going to show up. So that's what we have here already surrounded full, so you're going to see it's it's already rounded right, then the same thing we do for the text. Color we do valid. Let's give it.

C

um Let's give this one 50 and we could say the text should be Excel and the font should be bold and we could give shadow Excel all right. Then. What we'll need also is, since we want the button to be floated, we could just say fixed all right and now we could do since it's fixed.

C

We could do bottom. One then write one. So it's right there at the corner. I don't know if you could see that, but it's right there at the corner. Right now so- and let's say when we over on the button, let us change the color a little bit, so we say hover, BG, Violet and 500.. So now, when we hover, we get to see that and this our button over here we didn't really touch it that much so, let's give it the Hoover color just quickly and um yeah, and we are done so.

C

If I give it the overall, let's say: hover: PG, violet, um sorry, PG Violet, um let's say 700.

C

And yeah we have that, so you could do a bunch, we could transition and make sure the the change of the state is smooth. So could you do Transition all right and we could say it should transition just a color and to make it like longer so that we could notice it. I could do um eight thousand eight thousand milliseconds, which is one second and you get to see. Oh that's, nice! All right now, look! This is beautiful. Already right. We have a nice looking website with everything is here in the HTML.

C

So let's look at the stars being generated just a little bit, so you could see anytime, we apply. Styles still wind will check the HTML, your JavaScript, whatever project setup you have and then it's going to generate a static, CSS file for you, but it's going to optimize it so that all if you click like you could use a bunch of classes with the same name button. We just take one of those class and just upload it to that file. So you could ship it. So that's!

C

That's it so I'm going to share the link in the chat because I know you all definitely can see it properly, because I have issues with stuff, but we're telling player could share it. So you could see it and uh you get to see what I'm seeing that I'm making me say.

C

Oh you are nice and all that right, so I'm going to stop sharing this screen I'm going to go back to the slide, so we could wrap up so really sorry about your display stuff, but that does not change your awesomeness of telling okay I'm going to stop sharing now and share my slides again.

C

And uh Keynote Okay so yeah. So can you see my slide right now again?

C

If you can see my slide.

C

um Because someone acknowledge I can see my slide. Let me wrap up this.

C

D

C

Okay, cool! Thank you, okay! So to wrap up um now you saw the power of utility CSS right and trust me, there's so much. We could do like I'm telling you I Style on my website, like this and I hope, no, a bunch of companies that do so and if you want to see like a really cool site visit telling css.com, that's that entail whether you could see how powerful it is. So what have we achieved with Tailwind?

C

So your Intel in the classes you have in your HTML they're like functions right and you know you call, you can define a function, one place which is which is following the dry principle, and you could use it anywhere. You want it right. So that's what the class design team with their apis! You can compose like Lego blocks, to build really powerful.

C

Usually, a P4 is always going to be a P4 right. It's going to apply padding for you could customize this based on your design system, but that's a little bit Advanced I suppose just trying to get our appearing on tailwind and you have a single source of Truth. So anytime you open the Tailwind project.

C

You don't need to say: okay, where are the CSS file, the CSS uh they're, not really in the HTML, but you have access to the CSS in your HTML, so you could just open the HTML I can see there's a P4 there, so that's solves the problem of whenever you're trying to to override the star that you doing a whole lot of stuff, but you could just do it from your HTML all right. So, let's say goodbye to important and it's dry think of it like a function all right. So what is the benefits?

C

Like you see how fast I was able to build the website? That's how fast still makes you okay and it's maintainable, because you have just a single source of truth. You don't have to worry about maintaining CSS and HTML or JavaScript.

C

Just the HTML, then it will teach you how to compose classes to build something unique and you've also improved your CSS, because in the play hotel, when you see anytime, we use a class still, it shows you the equivalent CSS that was generated, so you could look at it and improve your CSS knowledge and I wanted to show you how to build a specific type of the sharing stuff. I. Don't think I'm going to show you that, but I could post the the complete work on Twitter, so you get to catch it.

C

So you see how we could respond to yourself and I always say 10 says they make better CSS and by CS I'm, not saying the language, but what we just do is to start so when you use those things as you get better at CSS, so I like it so much I had said before in 2021. So you could see the likes on it to tell you that it's really really good all right. So.

D

C

That is it I'm. Sorry.

B

C

The technicalities with my talk, but that's it for live lobster with your CSA. Thank you.

A

Yeah no worries Kevin and there.

C

Were like a lot of.

A

Comments about um tailwind, and they also have like a.

D

Question from Jane, how do.

A

You deal with dark and white mode.

C

Okay yeah, so it's pretty pretty simple because, like I said so in terms, we have what's called modifiers right, so this attack on the Fire.

C

That will let you of Lifestyles when you want, when the system is Select mode and it's very smart, it could take to okay apply this down check the the scheme, the preference of the user. Is it dark or white and apply so don't need to do much on that and with the Tailwind dark modifier, you could apply it so I could show you that, but it's just going to take us a love to get that set up. Yes, definitely that's how you do it.

A

Yeah great uh you I, don't see any more questions, but your session was amazing and I'm sure other people will connect with you on Twitter and yeah says. Thank you for being awesome, regardless of the.

C

A

So much um yeah, thank you too. I hope you all learned something and you can connect later with Kevin to kind of learn more about um Tailwind CSS and how you can use it and resources as well. I think everyone also share his rights. um So we have our next speaker.

A

And Emmanuel is going to, you know, be talking about building Cloud powered react, um full staff apps with AWS amplify, um and the manual is a front-end software developer and technical writer using tools like JavaScript and react to promote open source Technologies for everyone, irrespective of their background, excited to have Emmanuel come chat with us at GitHub Africa virtual meetups, yeah um Emmanuel. If you can hear me.

E

Oh yeah well, I might have backstage I just come from yeah.

A

Yeah you're off this, your life, your.

B

A

E

A

A

I think uh Emmanuel is coming back up soon.

A

So um I don't know someone said they have another question um James. You can ask your question and.

A

Bring Uh Kevin back up to answer.

C

A

I, don't know how it gets ready, so James feel free to ask your question.

B

A

Also Kevin, you might want to maybe share like a link to your slides, yeah sure.

C

Sure I'm gonna I put it right now, so we could have it.

A

Okay, what we're waiting for James question.

A

um If anyone wants to speak at these meetups um you, we have like a cfp link, but you can, you know, apply you know, setting your topics and you know speak um at these meetups and we also we accept first times because we do not have to be. um You know very um experience to speak. Would definitely um once you hear from you so I'll share the cfp link as well. You can apply and you know anything about the web, anything about what you're building.

A

We would definitely love to hear you talk about them on the GitHub Africa retro makeup.

A

Okay, don't see! um Let me see if the question is up so I see um please: okay, there's one question from olatundi or Steven: we have the one from Steven, so we can bring up the one for my Latin baby class. So would you recommend to win over any CSS framework? Okay,.

C

Yeah, so the short answer is yes, the long answer is like I said. So there are a lot of CSA fragments like Celsius and shares scss less. We tell when you are as close to CSS as possible because you are using native CSS classes, so they are no magic. It's just you using this little tiny classes and it's fast. Okay and you don't have to maintain a CSS file.

C

You just have your HTML to maintain so I always recommend it, because it's simpler and it's powerful and I'm, not the only one that uses a bunch of folks agree with me, like you saw in the screenshot of the tweets I sent, so it's it's I would recommend it over any CSS framework. As of this time,.

A

Okay, great I, think um so another question: please any difference between scss and Tailwind from olatunde, okay,.

C

That's a great question so scss um it is CSS preprocessor, so Tailwind using something called post CSS, which is also a pre-processor, but these have been abstracted away, all the pre-processing to just output, normal CSS stuff, but with scss. You have to learn this syntax, which sometimes deviate from CSS, because you have the variables, but we already have custom properties in CSS right.

C

So there's no needs to have like a variable, so you have nesting, which is already going to be in CSS pretty pretty soon so SSA has too much overhead than Tailwind because you just need to grab the thing with CDN and immediately you are working with classes. So that's the big difference. Scss a lot of overhead with its own syntax, Tailwind syntax is just HTML classes. You already know.

A

Okay, great, thank you, um Kevin I, don't see! Let me see if there's any other question. um Okay, there's one more: uh what are your go-to resources for learning, um Tailwind, plugins.

C

Okay, so one thing I'd like to tell with team, for they are great with resources, so their YouTube awesome, like the videos, are always Top, Notch and also their documentation is also perfect. So some of the plugins like I use personally is my blog and my website is in Tailwind. So all I need to do is add a typography plugin that I just need to put a post class in my content and it Styles everything magically. So the heading the links are all style and you can customize them.

C

So the Tailwind talks, and also the YouTube, is perfect. I think I should give a link to it in the in the chats.

A

A

Okay, we're having a lot of technical issues today, yeah.

C

We're trying to.

A

C

Sorry about all that, it's really really it happens. Yeah I know so.

A

How did you, how did you, you know start using Tailwind I think maybe you want to share that story? I will.

C

Yeah, okay, so a shocker The, Moment, I, Saw, Tailwind I hated it and it's not just me. A lot of people was like what is this Abomination? You are adding the Styles in the HTML come on. That's why we have to support the files but yeah and.

A

Then you link the files later on I know when I used to like.

B

A

Says it's really sometimes I forget to link the file and then yeah right when you're, seeing over one hour, trying to look for the issue. Well, it did not link the files together.

C

Yeah, you see so I think so after that entire first impression, I read it because for me, like I always said, I want to understand the. Why of attack before I want to know how to use it. So I went on reading, I, read Adam, wasn't post a bunch of people post, but the good and the bad. Then I said: okay, let's try it and it clicked for me like how have we been styling all these years, because it makes sense right because the classes are not something new.

C

We always have classes, but let those classes do one thing and you piece them together. So it's it borrows from the principle of functional programming, where you use little little functions to do big things. So we tell when you little little classes to compose your UI and they are all custom like you, there's no UI, you can do with tailwind and it's just amazing. So that's how I got started from I hate it. So I love it. So you could see yeah um yeah so from Saw to call something like that. Yeah.

A

B

A

um Resources on your YouTube that you can.

C

A

Public YouTube channel, so okay.

C

A

C

Yeah, okay, so um I don't have a video on Tailwind, but I have a course coming up on Upland, which is still in for beginners, so yeah. So it's gonna be like a full thing, and hopefully we don't have all these issues I'm going to show you all how to do from easy to complex style, but in a beginner level. So if we don't get too much in the weeds and I also have a lot of Articles written in the sales guys blog I wish.

C

So many links to share I will share it, but you could. The dogs are great and the Tailwind YouTube is amazing as well.

A

Yeah, that's um so we have a question from okay.

B

A

On responsiveness.

C

Responsiveness until when yeah.

C

Responsiveness in telling is a breeze like I really wanted to show you all that, but I wasn't comfortable with you moving the screen because I find it very sweet demo guys so in Tailwinds. Before telling. If you want to do responsiveness, you have to learn CSS um media queries, I'll say it's simple, I know it's simple I've been in tech for a while, so it's simple, but for a beginner, no, you got to do at media. Then you know the weather.

C

It's going to be a mean or a Max too much, but we tell when we have what we call modifier Media or breakpoints modifier. So we have medium screen. So by default any class you apply in Tailwind is going to be assumed to be mobile. First like this, is the style I want to see on a mobile device. Then, if you want to go to live screen, you could do like MD colon, then, whatever style class you want.

C

So it's going to modify and say: okay, Tailwind use this one that does not have MD colon for mobile screens, but when you get to larger screens, apply this other style and it's a breeze like I, always start off from mobileing. So in fact, Tailwind taught me how to embrace mobile first because of how simple it was to make a responsive website in Thailand yeah. So those are my thoughts, it's great until end.

A

A

Deal with multiple classes, um I, really Define, okay,.

C

A

Yeah yeah yeah.

C

A

C

This is the drawback like I. Think I was in a Twitter war, the other day where people were like. No, the throwing classes are unmaintainable, but this is the thing you have several method to avoid that, if you can't stand the style you could use so your CSS could use a Tailwind um directive code at applies. You see at apply, they apply all those Styles in a class like so maybe you could do dot button and your open color base. Then you put as apply maybe put your padding whatever.

C

That makes up your button right so then you can now go to your HTML, copper, but I. Don't like that, because that defeats your purpose of Tailwind don't do that because these days we are in a component driven design right, so we're building components, You're Building, react, components, view components. So if you have a button, you just have a button.view or button.jss and put the style there, because you're not going to so you move all the classes in a single file so that class.

C

That file is responsible for that button and you're going to reuse the button. So you're not going to cop multiple classes so anytime, you need a button like that. You just use it all right, so I advise to abstract in the component level, and you might say what, if I'm, building a server that app yeah your templating engine also have passions. So your button could be a partial and all that, so it gives you desire to compose.

C

Youth are you here yeah my.

A

C

A

B

A

You so much um Kevin.

B

A

Lot of these questions and.

B

A

To Kevin on Twitter, if you have any um yeah I.

C

Could just put down here.

A

Ability great is that just.

B

A

The charts yeah.

C

That's it so I'm uploading, my slide. How are we getting um the other speaker up? Is this still disconnecting.

A

Yeah, it's so like it's going it's going off and on oh.

C

A

C

Think ah stream yard.

A

B

A

Let me see I, don't know why it's not so it's his audio is not um connecting so she needs like this. You need the audio to kind of like bring him up, but oh.

C

Oh I see yeah sorry about that, so maybe it might be a streamier thing, because maybe we could try something next time. You know.

C

Yeah, okay, he's here now.

A

Is that Emmanuel.

C

B

Guys, okay, good.

C

A

um Would you try to share a screen monolith? Let's, let's finalize everything, uh okay, I think Emmanuel is off again.

D

Hey Ruth, the audio keeps called it just cuts off, and then it he's not allowed to present them, because I can't bring him on stage with without either a voice or video, so I don't think we're gonna be able to work out unless he has a solid connection. It sounds like it's more. A bandwidth problem than you know, like the platform is working. Fine, um it's just that. I think what he's reaching out from is not working.

A

Yeah, maybe we want to know, can you hear me now.

E

Yeah actually, what's going on here, it's um I, don't know. I I really can't tell what I really can't troubleshoot the issue here, because I can't seem to turn on my video and the audio just keeps going on and off so I. Don't.

A

Know I will try to present now if it's working, okay.

B

Let me just try that.

E

Can you see.

A

um Not yet okay, it's coming up! um So can you go to your slide? I think I see the charts just like um yeah.

C

A

When you present your slides or like slideshow or something if I just might show.

E

Oh yeah, sorry.

A

Okay, I think I would get off now to have Emmanuel I'm talking so.

A

Yeah go ahead: Emmanuel, okay, okay,.

E

um It seems your network broke up, Rose, yeah yeah.

A

You can go ahead like we see your slides now and you're off. So, okay.

E

Cool um so here's the thing I'm I'm trying to like um explain my slide, then I'm also cool at the same time and I'm not sure how to do that here. Okay,.

A

So so what happens? um Are you are you going to? um Are you going to share? What is the code? Why are you doing the code on your computer or on yeah.

E

Yeah I'm actually doing it on my computer here, hi.

A

Can you go, can you go out of the? Can you go back to your slide, like I think you can share your whole entire screen when you're sharing share it? That's great.

E

A

E

Me just retry something again because and it's giving me two options here. Sorry this is my first time using streaming.

A

E

I'm also used to it: okay,.

A

So when you see share screen um you can you can partition your screen and share like screen. One like I have two screens.

D

A

Entire screen and share either a window. So that's a chrome top, so you can pick in between the options.

A

So you have one one Chrome tab open and then your um your vs code open, so that when you want to share, shows you which one you have to share.

E

B

I, don't think I saw any of that, but I'm seeing.

E

um Share Google Slides, so let me just try it out.

A

E

A

We do without demo, if I think, if you can do without the demo. Okay.

E

B

E

And do something here and.

E

A

I tried to share not yet.

E

Oh, that's weird because.

A

I just I just shared it Google yeah, it's true now.

E

Oh cool yeah, okay, I'm, already I'm not really figured out a way to code alongside because this whole thing looks so crazy, but.

A

I'll just try.

E

A

Yeah, maybe one maybe you can share a video of the the movie town but I think we can go with the slide since we're having like a lot of issues, and we are also running okay.

E

Okay, cool, okay, um hello, everyone. My name is um I'm a software engineer with grind and I specialize in front-end engineering, although I can also double into the back end and a bit of cloud stops um so.

D

E

Working in Tech professionally for.

D

E

Year, close um yeah like professionally but I've done, the open source works and and all so yeah. This demo is going to be a quick one. Apologies that I can't code along like so frustrating like I, didn't expect this because I pray, you guys um I just get a hang of what I'm saying so. Yeah um building Cloud power um react apps with AWS Amplified.

E

um So here is a quick demo on how you can set up um any kind of wanted. Apps, not just react. You could use view you could use Anki like use any kind of front-end. um You could use swelt or um Amber JS. Anything so AWS amplifier is framework agnostic. Okay, so let me just go to my next slide.

E

um So what is AWS amplifier AWS amplifier is an open source, JavaScript library provided by Amazon.

D

E

Services, it doesn't AWS that enables developers to build front-end, full stack and mobile applications with various cloud services. Okay, so AWS amplify is like a subsection of the whole AWS package. um I'm sure most of us are familiar with some other packages on AWS such as AWS, Lambda, AWS, Incognito and stuff, like that. um So.

B

E

And try just one of those packages that comes with AWS, but guess what it's um especially for the front end in fact both front-end and back-end developers. This this is one of the easiest um ways to get you on board AWS, and you could just choose to work with this for now and there's a whole lot of awesome um features. Aws amplify offers so I'm just going to talk about that here.

E

So uh one of the one of the most amazing feature I find is the ability to convert your figma design into actual code using artificial intelligence. Now that sounds awesome right, like all you just need to do, um is connect your figma file, so let's say you're a front-end developer and um and you're trying to like speed up development process and um rather than quoting everything from scratch, you could um pick out the feed, Mark components.

E

You want to use from your female file, your female design and then um copy the link paste it on the AWS amplify console, and then it generates everything into actual code, whether reacts of view or angular, whatever framework you're using now, that's awesome like it generates it in a matter of seconds and then you can start worrying about um and other things in your app, maybe like functionalities and stuff, but it generates every UI for you now. That's that's productivity on the plus. So that's awesome now.

E

The second thing is: is it data modeling for your backend, so AWS amplify provides like a CMS for your front-end app. So let's say You're Building, something like a to-do, app the server-side power to do app or a Blog. So you could like set up um your data modeling for your back end. um Put your username. Let's say: You're Building A Blog to put that username ID email like that um set out every data model, configure it the way you want to be.

E

Do you want the data model to be um unique, one-to-one or two to two I'm sure the backend developers know what I'm talking about so AWS amplify provides a very easy to use graphical user interface for your data modeling now. Thirdly, another feature I found very interesting is, of course, since it provides the CMS. You should be able to bind this um CMS to your front-end framework.

E

um Let's say your react framework, so AWS automatically binds it for you, and then um that means your server side, which is your data. Modeling, is automatically deployed to the AWS console where you can manage your server side, um anything regarding your server side and then um it binds it to the UI for you now. Everything is there, so easy trust me now.

E

Fourthly, um you can update your UI and any content within it from either your local projects, which is connected to the console um I'm going to show you guys that and then you could also update it from the console itself. So you have two options depending on which is more suitable for you and then. Lastly, we.

B

D

E

How authentication can be a pain in the ass um for developers, so AWS amplifier provides very easy Authentication um for your apps, so everything is all set up for you, um both several side, authentication or client side of the education. So these are the perks. Now, let's go so I was hoping I created this slide as more of a guide. Why I code along, but somehow things didn't go as planned.

E

um So, oh, my God, like um I, was really hoping to.

A

Yeah I'm, sorry about that, maybe something you can do is you can share like um the code demo and put um switch it like we tweet it so that people okay, but.

E

E

Why don't I stop sharing this slide, then? Let's, let me see if I can share or maybe like.

A

E

A

A window um what.

E

A

If, if you want to tripod just that, we are out of time too, okay, okay, so you can just walk, walk us through and then would like. um You can share like a demo one with widgets, okay, yeah.

E

Okay, that's fine! um As soon as the slide went off, try.

A

E

Again, all right, let me just oh it's back. Thank you.

A

Yeah I can see it.

E

All right, let me just walk you guys through um quickly, so um here's what you're gonna do um I.

D

Promise I'm going to like.

E

Put out a detailed um explanation of this whole stuff, but just for a start to onboard everyone um go to um go to AWS studio console. You could just search it out on your browser and then to take it to like a link. Just start it on your brother. To give you a result, the very first result um you see, AWS amplify studio, console now.

B

E

Have an AWS account: don't worry if you already have fine and good, but you don't actually need an account to get started. Okay now.

B

When you log into the.

E

Studio, um it's gonna bring out um a UI where you can choose any framework. You want um I'm sure majority of front-end developers use react, but a very significant portion of people also use view or angular. So it's framework agnostic. So you have an option to choose any framework. You want. Okay, now.

B

After choosing your framework, now you.

E

Have two awesome options now I would recommend um The Next Step, which is a quick start option like a template to like where everything is all set up for you, um basic data modeling for a Blog and the template is actually for a Blog just get you um acquainted with AWS amplifier, so it's so easy to use. So I'll recommend going with the first option, which is the Quick Start option.

E

D

Latter option is.

E

um You choosing to build your app from scratch. Okay, so if you're just getting started, go with the quick start option that will get that will like create a templates for you, um usually a blocked template. That's what you're going to see there um where basic data modeling is set up for you and all that. So when you choose the quick start option, um it's going to take you to a data modeling UI, um which is all set up for you containing ID username.

E

You know any any kind of all those basic data modeling for a typical blog right. Now, all you just need to do is deploy it you're, going to see a button there, which you say, deploy now it's going to deploy it straight to the AWS um console. Now. At this point, you need to create an AWS account now.

B

E

Gives you one year free tier usage, so you don't have to worry. um You don't have to worry about um paying anything so.

B

You have free one-year.

E

Usage um for AWS, so at that point, but if you already have an account you just need to sign in so once you deploy it's going to prompt it's going to prompt you to either sign in or sign up depending on, if you have an account or not now here um after signing in um you're, going to see a button which will tell you to test your app locally by setting up amplify CLI on your local front-end project. Now let me explain this part. Okay, now um what you just did um in the previous steps.

E

Is you set up a back end for your front-end projects? Now you already, um you already created, let's say a react project on your local PC. You know um local computer um with the whole MPX create react app or whatever you use to create a react app, for instance, and everything is all set up now all you need to do is um connect, and all you need to do is install amplify command line interface. Now, what amplifies here like those is that it enables you to connect with the AWS console connect.

B

Your local projects.

E

Or your local repository to the AWS console now um you're going to see the command. um Why you go through the process? The command is going to be shown to you, um you just copy the command and then um paste the command on your. um um What's it called on your command line, and then it will install the amplify CLI on your project or even globally, on your laptop okay.

E

D

E

Done um you're going to see a set of other commands which I was hoping to go through, um which would enable you to make changes from your local project and automatically reflect on the console, and all that now you collecting the amplifier CLI means your app is now Cloud powered by AWS. Okay, so you have two options. You could either make changes from your local app and then push it. Just like you do your normal git pull and git push stuff, that's just how it works with the amplify CLI.

E

So it's not really anything crazy or anything new. So when you once you do that, you can choose to edit from your local distance and then push it right or you could choose to edit from the console itself either way it's still going to sync. So that's like one awesome thing here, like everything is going to sink between now. Yes, um like I, mentioned earlier, one of the cool features of AWS, amplifying the ability to generate figma designs into actual code.

E

Everything is all set up for you and one beautiful thing: I love about the um whole project. Is that number one. It is open source. Like you go to the gate of repository AWS amplifier, you could join the Discord Community, it is completely open source and then, secondly, the documentation is so user friendly and beginner friendly. So you're not really gonna have a tough time trying to understand everything. The documentation is well written and everything. Everything is just so seamless and trust me. You don't need to pay anything like I said earlier.

E

um You are entitled to a one year, free tier account um which AWS give to you and you.

D

Might just want to like play along play around with.

E

Everything and trust me this. This enables you to build not just faster as a developer, but also with a whole bunch of tools available to you now there's something called amplify UI, so you might just want to like take that down um amplify UI. What all it does is that it provides you with um an.

D

E

Of accessible um themes or templates that you can easily generate into code and use in your projects now, that's awesome, that's the part of the package so amplify UI. Does that you could, if you search it on your um browser, it's going to pop out amplify UI and it's very free to use. uh It gives you a whole bunch of template that you can generate using AI into actual code and all that and um another thing I would like to point out. I hope, I'm, not missing.

E

Any basic stuff here um hold on a bit: um okay, okay, okay, okay, okay,.

E

um This would be just a Beat Just to be.

B

E

E

Hold on a bit sorry so.

D

E

So it also offers you analytics for your project, so this is very good for production level applications, whether you're using it for production, available applications or practice personal projects. um You have access to the analytics, which gives you um user traffic um and all that form of analytics that you need for your app. So everything is available on the amplifier Studio, which is the console or sort of like the back end for your project, so everything is completely Cloud powered and on the last note, AWS amplify offers you hosting and the ocean is free for.

D

E

D

Aws amplify offers you.

E

um Hosting for your projects, uh I know that, like automatically your project is hosted. Of course um you could also choose to use third party hosting like on Netflix or virtual or any other third party hosting um it's all up to you, but I recommend you host with AWS amplify.

E

um Everything is all set up because it sings very well um with everything. So the like I said earlier: the documentation is so user friendly and so beginner friendly, so you're not going to have a problem understanding anything and it comes with an array of advanced options. Also such as steaming um like you want to implement a dark mode or light mode, so um there are components for that that helps you generate it into actual code. So you have a whole bunch of components provided um by amplifier UI.

E

So if you just choose um copy and paste the link to that figma component copy and paste it to your um amplify studio and automatically it generates everything into actual code which will reflect in your local project, like everything is just so seamless and all that so I recommend um we all give it a try and I can bet 9 out of ten times.

E

You're gonna love um this product and because it's basically making you more productive, more faster and, of course, giving you more options in one package and the good thing is you have one year, free, TR usage and then subsequently. Subsequently, um the payment process is not so expensive. So it's something to consider um for both the front end and back-end developers, and you get to use full stack. Apps seamlessly right.

E

um Just like makes GS, for instance, offers you um ability to build full stack applications in one package right um from the API routes to the front end, and all that same.

D

E

The benefit thing about amplifier is that it not just provides you with a backend server. It also provides you with a database which is called dynamodb and I'm about DBZ um database that was created by Amazon um to be used here and, like everything, is just in one package. So it's definitely something um to use and, of course, a new skill added to your portfolio, which is AWS amplifier and, as we all know, everything about technology industry is moving towards. The cloud platforms like like.

B

They say cloud is.

E

The future, so um this would be a good way to onboard yourself with um Cloud providers like AWS uh and it's very friendly for front-end developers and back-end developers, so you it doesn't get really crazy. So that's it. um If you have questions, I will try to answer everything to the best of my ability. um Ruth.

A

Yeah great, um thank you Mano I'm! Really! So sorry you couldn't do the demo um I really love. Would you like tweet it out and I also share it um as well? Let me see if I have their questions here.

A

So you just have the comment. You have a comment from sugar. It says it's easier or better to host with AWS Amplified. So it's easier to connect with whatever Version Control you're using yeah.

B

A

B

A

Else prefers um Azure, though over it's obvious Amplified. We get that that was under that comment as well.

A

Great I do not see any questions, please. If you have questions for Emmanuel about AWS Amplified, if you can, you know ask in the comments. um Do you have like where people can reach out to you as well? Maybe you want to share that as okay.

E

A

um Someone wanted your slides too, someone wanted even to the slide, so you want to share that as well. Yeah.

E

D

A

Okay, I, don't see any questions. Okay, someone.

A

There's no question at the moment, so um okay yep would paste the link to your slides in the comment section in YouTube, um so yeah. Thank you so much for your presentation and regardless of the technical issues, you still did great. um So thank you.

A

um Everyone for you know dropping in you had like some technical issues, but people still stayed till the end. So we are really excited that you got to hear from Emmanuel and also got here from Kevin and, like I said we have this Meetup monthly, but next month is GitHub universe, so we won't be having a meet up next month, for hopefully from December would have like another meet up.

A

So you can, you know, sign up to be one of our speakers because um you know send us a cfp and then we can bring you up to speak under on the meet up. So thank you. Everyone for joining today and we'll see you all in December or maybe we'll have one final one before before the end of the year, but yeah I see one question is AWS is Amplified CLI the same with Firebase it manually, Play Store. Here, oh.

E

Yeah I'm here um no um amplify CLI, it's comes from AWS amplifier right, which is um under the parent company of AWS right now, Firebase comes from Google, so there are two different things and they kind of do the same thing, but not exactly the same thing. Firebase Firebase is majorly known as a back end as a service um so which you can use to create, um of course, the CMS authentication even hosting, and all that's what Firebase does and of course Firebase is um framework agnostic.

E

You can connect with any funnel framework, but AWS amplifier is more than just a backend as a service. Aws amplifier provides um AI assisted tools such as figma to react, figma.

B

E

All that, but for now sorry, for now it just supports react when it comes to generating feedback designs code. Only react is supported in that regard, but works are being done to make that possible with other front-end Frameworks like View and angular, but for now um generating figma.

B

E

To actual code is only supported in react, okay, so AWS amplify offers. You.

B

E

Tools and and even more like the features, are just so awesome. um It offers you theming um for your apps and, of course, every other thing, so it's more than just a backend as a service um as compared to Firebase. That's that's like the difference and, of course, fire business from Google. um It always applies for me. Aws.

A

Okay, great, thank you for your question and thank you every thank you Emmanuel for also answering um so thank you. Everybody for joining, we'll, see you all in December or next year, all right.