Speaker wants to update their website with the different events, but the meet up changed their api and it broke their cron job. Speaker wants to create a dashboard on their website to update their portfolio and events page. Speaker created a dashboard. It's built off of firebase. Speaker is going to focus on events first and then projects.

Speaker is back. Speaker wants to share a demo of a project they just completed. Speaker has created a website with a little animation next to the recorded video.

Speaker has a radio show, a custom-made audio player and portfolio projects. Speaker has done a lot of presentations since earlier this year. They also has a shop where they sell their designs. Speaker is going to two upcoming events in korea. Speaker's website was originally run on cron jobs. Now it's based on real-time updates. Speaker created cytotec down events and distills meetup. Com into just orlando based tech, meetups. Com.

Speaker has been talking about web components and how helpful they are in their presentations. Cory created a new framework to set all the components to work with react. Speaker wants to use it for a project. Speaker created two sets of tabs for their dashboard. Speaker explains to Speaker how the tabs are organised. Corey has set up a system where you can do light and dark themes. Speaker explains how it works.

Speaker wants to have two columns of information and a split panel. They will order the panel. Speaker is impressed with the features of the app. Speaker uses them for their example. Speaker has managed to update the event calendar within a week. They can set an empty event and it pre-fills it with a bunch of random events. Speaker has a new feature that allows them to save, edit and delete files. They would like someone to do something similar for projects. Speaker created an interface to check out the different events that they have coming up. Speaker is going to input all the information.

Speaker is able to get the measurements of different elements and then they can use that to calculate will how much space do i need for the panel and to do that they need to subtract the full height of the page. Speaker has created a full the 100. They are going to add more projects and presentations in the future. Speaker is adding a web component to another project and hopes to demo it in the next break session in the cipher. Cory is a big fan of web components. Speaker is a big fan of shoelace. Speaker is going to clean up around the van and work on a project, but when they come back for the final break they are going to take a look at an artist's website and listen to music.

• cron jobs
• distills meetup
• web components
• client height

Your dreams or your ticket I welcome back that same old place that you well then since you but those dreams everything, and they turn around We got him on the spot.

Welcome back, welcome back.

Welcome back.

Welcome back.

Welcome back.

Okay, what's going on y'all?

Welcome back.

You know what it is a stretch.

Oh wow, it's been time.

Goes by so quickly when you're trying to get stuff done, it's kind of amazing.

So let us go through the joints.

Let us go through this project.

I just completed, let me see here.

So I want to do a demo.

So Let me hold on.

Give me a second.

I will share my screen real quick.

Let me do this.

I am putting my site.

To hear.

Yes, that's it.

So that will be so you can check it out.

After the fact, it will be next to the recorded video and so here we go.

Okay, so this is my website, lifelong dot Dev, right?

And let me do a refresh because I am I like the intro.

A little animation.

I think that's kind of cool.

All right, so I have all these different sections here.

So there's like the blog which are just links to my devdas to.

So when that links but it pulls, my latest blog post from devdas to and so, so, yeah.

So you can see all the blog posts here.

What have you, right?

All right, cool.

So I am pulling from there.

Let us see.

So yeah.

So there's that Then I have the latest radio show here.

This is what happened yesterday to in the future.

My recording other artists and cool.

Oh, also, so I custom-made this audio player, right?

Go ahead.

So you can like, go ahead.

So I was kind of proud of that whole like, animations and stuff.

So, yeah.

All right.

And they can click to know more about the thing and then I have my portfolio projects.

Now this I need to update so this is kind of like older because I am created a bunch more project since then.

And if you want, you can see how it looks on mobile.

And you can view the project and I have like some like why I did it how I did it when I did it and like if there's anything next kind of questions, so I have a bunch of those on there.

Let us see.

So I need to add more and then also I have done a bunch more presentations since then as well.

And so yeah.

So this is from earlier this year, I have done a bunch more and so it's kind of like Oh and then also the shop.

And so I make like t-shirt designs and things.

So I have that here as well.

So it's kind of like a good way of like showing the different things I am into.

And so here also events that I am going to That's so you see.

He's like this one and this one coming up Jas, Kang Korea.

And so the map changes if you notice that Like going back and forth.

So this one going to land in Florida This one is in Seoul Korea, right?

So, but the thing was originally, okay, so the whole point Was that originally this site was run on cron jobs.

Right?

And so every like three hours I would pull the latest blog post the latest Radio Show, episode on the portfolio presentations shop.

Those were like pretty much static, right?

They pulled from a database that I created.

And on the events was also being pulled through cron jobs.

And, so I was using pretty much all the events I was going to we're all meetups, and so I would get them from meetup.com.

Let me go to that site.

And, so I have a meetup.com, I would go basically everything.

Since I add this to the list as well.

Oh, meetup.com has an API that I was using.

So I was, oh, I also have this other site That kind of like distills meetup.com into just Orlando based Tech, meetups right.

And, so I created this cytotec down events That has a list of a bunch of different groups.

You can roll and oh groups.

And so, like, under upcoming, I would go through them.

Like okay.

Let us see what's coming up and then sign up through that, right?

So, let me since I have this healing for this, in the side as well.

And this links So and again, this is like one of the project.

I don't even have on my site and I create.

So it's been a while since I updated my sight.

And so since I am going to be doing more traveling, I wanted to be able to update my website with the different events because I am not sure how long ago, but I think meet up change their API because it basically broke my Cron job.

Pulling events.

And so it never populates with a new event.

Even though I said I was going to events.

So it was until recently maybe like a couple of weeks ago where I had some time to like, why is this not working?

And I found out that they changed before.

It was like a rest endpoint.

Now I believe they changed like a graph ql and point so it kind of broke everything I had.

So I took that opportunity be like, well, I haven't been going to a lot of meetups at least a lot of events that are on meet up, right?

I have been going to different conferences and doing workshops and stuff in different places.

And, so I was like, well, let me This opportunity to create a way for me to be able to update my website.

My events page, and so I have always wanted to create like a back-end, like a dashboard to be able to update the certain things.

Like I said, the portfolio, the presentations and events now.

So last week was like, all right, let me get this started.

And so this is what I came up with.

So this is like a dashboard that I created, right?

And, so I want to kind of talk about what it is.

I used to make it, and so I could pretty much all my projects.

It's built off of Firebase so let me add this link.

Too here.

All right, and so I use it for like, the hosting the database.

And there's a these functions where the kind of like servers like little serverless servers.

I don't know.

So I am using Firebase for the underlying like infrastructure of my sight and so you can see here.

So again, the things I am going to be focusing on first, the events, and then eventually I am going to do projects.

So I am going to list all the project and be able to add Projects, and then presentations.

But I am starting off with events since that's kind of like what I am going to be doing.

And, so I made it with and shouts to Corey Lavista.

I have been talking about shoelace for minute and because in my presentations I talked about web components and how helpful they are and shoelace is a very good example of that utility, right?

And so, I always here.

So yeah.

So like it worked well Frameworks of their web components and Cory took an extra step since react doesn't fully support web components.

They created a whole new, like, set all the components to work with react, right?

And so there's a lot of cool stuff in here.

And, so I have been kind of like playing around sounds like you know what?

This would be a good time to actually use it and see how it, you know.

And like, you know, I have been talking about, it's time to actually have a project, I can use it on and so, right here.

So one thing like Tabs are like a lot to work with, right?

I have been doing like on the site, this site here, I created these tabs here.

And they can be a lot to kind of put together and the way I had envisioned, for my dashboard was going to be like two sets of tabs.

So the one for the main stuff and then for the stuff inside of the main stuff, right?

So like here you can add an event or edit events and so it lists all the different events.

And so if I wanted to add an event, so these tabs come from here.

They were called Taps tab group of think.

And so you see here, you're the tabs.

So they have it like the regular across the top.

You can do tabs on the bottom.

And then tabs on the side, so they call it start on the left side.

Pretty cool.

And then tabs on the right or the end.

And what's really cool is they have the source code basically as you can pretty much just copy and paste this into your project and you will have this And The Styling is kind of taken care of also and it's enabled.

The way.

Corey has it set up is that you can do light?

There's like a light theme in a dark thing and so you can list those and it's pretty cool.

So a lot of cool stuff.

So, yeah.

So you get all that built in and you just put in like SL tab group.

Alright, let us take a look at the actual, so you wrap your whole, so all the different tabs.

You rap in the Esso group so you have the tabs and then you have the panels for the tabs and so pretty straightforward.

It's awesome.

So, another thing that I used was that, alright, I was like cool, I got the tabs great, but I want to be able to have two columns of information, right?

And so as I was going to do it myself like Flex and everything.

But I saw that Corey, so I want This is so you can see that it gets resized.

So this is pretty cool, sounds like that's awesome.

I want that and it's because I was scrolling through here and I saw the panel, I will go order.

The cold panel is like SL panel, split panel, And so it's right here.

And again, the give you all sort of like demos and examples that you can set for it.

And, so I was like, even can do vertical if you want and yeah, so there's a lot of stuff you can do is pretty amazing.

And so I use that for this.

And then the buttons are also really nice.

So I use the buttons here.

So it's pretty much almost anything that you want to build like for me in my example, like a dashboard is pretty much here and it all works out, they have an import input as well, but I was using spelt and for some reason I couldn't figure out, I didn't dig too deep into it, but I wasn't able to figure out how to do the data binding, and so I am sure it's probably something I am missing because it's probably some sort of like event or sometimes.

They will listen To update it, but I just went with the regular inputs for right now, but got it all done within a week, which is kind of amazing.

And, so I can like, input the date here and everything and I can also set an empty event.

So for like to be like announced.

So if I am not going to an event for a while, I can put like an empty event and so you see TBA and it pre-fill Fills it with a bunch of just like random, not random, but specific like Orlando.

And so since I live in Orlando, it just says to be announced.

And at the map, goes to Orlando with a lot of like different TBA stuff and a message saying, hey, I haven't signed up for any events.

Yes, I am not going anywhere.

And so, yeah, and then I am able to just save it.

I can set it as a feature, and if I do that, that's what this is.

This is the feature here.

And so it sets the date and the image.

Let us see.

And then I can clear it out and then if I am under the edit, I am able to like delete it.

Also, and yeah.

And then I can select the different events here and pull them up and edit them if I need to and yeah that's pretty much it.

And someone do something similar for like projects where I can all my different side, projects would be easier for me to put it here and said right now I am doing it directly to the database which is kind of pain.

So just for me it's a lot easier to have like an interface that I can use and check it all out and then presentations as well.

But for right now, Pretty good.

So I am going to input all the different events that I have coming up.

And yeah, yeah.

So that's pretty much it supercool.

Oh, another thing.

So I was like, I said, I created this using us felt and smelt as this thing that I have been using recently for like sizing because right here, I knew this was going to be a long panel.

So I wanted to be able to not have it.

Have to scroll, the whole page up.

I was wanted to this panel or this panel depending on.

If it's long enough to just sit here, I don't want the whole page, the scroll.

And so for me to do that because for me, like determining the heights of stuff, like, depending on other things, on other sides is a lot.

I always mess it up and so, it's felt.

I am able to get the measurements of different Elements.

And then I can use that to calculate will how much space do I need?

So, to be able to get the panel height that I wanted.

I need to know the height of this part here and then I can subtract the full height of the page which could change from this height which doesn't change and then use that to get the height that I need for the panel and to do that.

It's kind of like a lot of (JavaScript) and it's kind of pain.

But it's felt does that make a little bit easier with this whole bind and so you can bind the client with the client height, the offset with an offset height and so you get those Dimensions without needing to do a bunch of (JavaScript).

And so you just bind it to the element that you want to get the height of.

And so that's pretty much what I did.

I just wanted to get the height of this.

Here.

And, so I was able to like, all right, this is the full The 100 and I just need to track that and a little bit more padding, and I was able to make it work, which is a pretty cool.

I don't know.

I thought that was kind of awesome.

So shout this felt always doing good things.

Alright, so that is done.

I felt good about it in the future.

I am going to add more projects and presentations and things, but for right now the events are what's coming up and I wanted to be able to add that.

And with this, again, shouts to Cory.

For shoelace.

It's help speed up a lot of stuff.

You know me.

And so yeah web components for the win again big fan of web components so yeah I think that's going to be it so again just want to share that.

I am also adding another component from here to another project, so I am going to do work on that today and then hopefully get it done to demo that in the next break session in the cipher happening.

Her on today.

So if you want to figure, you want to check that out.

You can sign up for the cipher.

That's happening later today.

All right, and again, it's under subscribe and I think that's it.

So cool.

Stop screen, share and yeah.

So big fan of shoelace.

If you know of any other like UI web component like libraries, let me know.

I am always on the hunt but shoelace does a lot of good stuff.

And so I am a big fan.

All right, cool, that's it.

Let me get you all back to work.

Let us see here, I am not doing.

All right, not too bad.

Like I am getting stuff, done feels good, feeling good today.

Then get some laundry started.

I am going to clean up around the van, I am going to work on that project like I said earlier.

So, but when we come back for the final break session, going to take a look at an artist's website, listening to music watching videos, maybe you become a fan.

Alright, so again, thanks for hanging out.

Get you all back to work and sharing the screen.

So this is a track called.

Thank you, bye.

Anthony Cruz.

AKA a butter.

Yeah.

Thanks for hanging out.

So 15 minutes after the hour and see you.

Then I wish you much productivity.

Thanks again for hanging out.

See you.