Links mentioned:
no links yet
Details automatically generated.

Speaker is going to speak for 5 minutes. They create the break in their database and starts the broadcast of the live video feed. Then they can start kicking the guests off if they want.

Speaker starts the break session. There's a chat in the questions and where they can start the speech recognition. Here they can see their video feed from camera and screen share. They can select the audio and the video and publish it to the stream.

  • break session
  • work session
  • break mode
  • green bar
  • archive link

Put the number of all changed since you hung around but those dreams everything and it turned around thought they need you.

Welcome back.

Welcome back, welcome back.

Welcome back.

You always could spy rare, welcome back and I smile way I think and I know what to see you again.

Learn to me Hey, what's going on?

Alright, welcome back to the second break session of this final Cipher of the day.


So hopefully you are all being productive, whatever, that you're working on.

I am actually writing a blog post or something.

So, been working on that little bit, try and do some research and stuff.

So yeah, cool.

All right, so I said that this Break sessions want to talk about the dashboard that I created for, until it dot works.

So, all right, so the okay, we will just talk about it.

Let me see you do.


Let me share my screen here.

Probably won't need any audio.

So now fair warning I am not a designer really like I me I make t-shirts every once in a while stuff but when it comes to the web I am very much function first and then figure out how I would like it to look.

So it's super bare-bones, kind of thing.

So, but yeah, we will just see.

All right.

So this is where we what we have now, right?

And so this is where I kind of run everything.

So I actually this is the web page.

I just have an opening into another tab so it's not like anything is going to get messed up.

Hopefully, so starting off here in the top like this is the most important thing.

So this button sets the overall live of the event, And so this is what makes the work session in the break sessions visible.

Otherwise, it would just be like, the next Cypher or something like that, and it has the date.

That's what would show up.

If that was set to false and then below that, you can see we have the current mode.

And right now, it's at the break, that's just to let me know that, all right?

It did switch over.

Because I mean I have like a multiple screens here on this laptop, and so I have what you see also here but just in case if I only have like one screen that would let me know that, oh hey, we're in break mode, you know, I am saying.

So that way I know you're seeing like the live video.

All right below that again.

Web component.

So this is the same timer that you see throughout the site and wherever there's like the date, that's in your local time.

That's a web component that I created.

So it's all one thing you can set when you want to go from date to a countdown timer.

So I have it for anything less than like an hour.

It will show a countdown, anything more.

It shows the actual date in your time zone.

So that way it's always Local to you.

Yeah, cool.

And then this is just a date picker.

Straight Out of the Box, just the regular date picker that comes with, you know, HTML which is kind of amazing.

And then this is how I set between the different modes, so, yeah, so worker brick.

So, what I do is like I will set the time for when I want it to count down to.

So, for example, whenever we finish the break sessions, I set it for 15 minutes after the next hour.

And then I set the mode to Work.

So that it knows to be into work mode until that time.

So, I always set the mode that I want to be in, and the deadline that is going to be until so if I am live, if, so if we're doing the break session, I will put I will set this to work and then I will set to 30 minutes after the hour since its 15-minute break sessions.


And then this it lets me know the status that was actually set because otherwise I wouldn't know if it actually worked.

So I have a thing and it will say like next session set.

All right.


And then these are the ciphers.

These are the two big sessions that happen on the day once a week.

I think there might be one so Tonya is asking in the chat room.

Is there a module in JavaScript that calculates the time until an event?

There might be because I think not sure, I think it's coming soon, so I am not sure exactly how, what you call it how Worldwide.

Is it kind of like how in use if it's in browsers and things, you know, so how compatible it is and So okay.

So in Python you have a date time Delta.

That's cool.

We have I don't think.

Again, I am not sure because the way I do it, I just calculate with the Unix Epoch time, or whatever, you know, the one time that is the same across everywhere.

And then, I use JavaScript to say what it is local to your area, and that's how I do it.

So I just calculate the to Epoch times and then just whatever it is to your local time or whatever.

Even though wait when you calculate it between two, Epoch time.

Doesn't matter wherever you are.

That's the same time.

So, It to show your local time, I use the universal one, and then just because we have, you can set local time and date through JavaScript.

So, it just takes the users.

I guess it's their IP address or something, and it determines your local time zone.

And there's automatically displayed the time depending on that timestamp.

Which is that the universal timestamp?

So it does all the time zone Corrections for you.

So it's pretty nifty, but we do have, I mean, there were different like what's the one that we kind of stopped using?

Because they really need it.

Oh, I forgot.

Oh, those are big brow.

There was a big JavaScript library that folks were using, but they were kind of using it just to kind of like, show local times.

But then like I said, Browser does it with now with in browser JavaScript?

I totally forgot.

Now it's been a while, and they even said, hey, you don't really need to use this anymore because there's more lightweight option.

So there're different libraries to do the time.

Delta like you said that's in Python, but I think they're going to be putting it in javascriptcore soon if not already but it hasn't been widely disseminated yet so yeah, but thanks.

Cool, python does a lot of cool stuff.

I know, I was looking into rust a little bit earlier at work to we're building something and rust.

Not rust.

Was it Ruby?

Ruby on Rails, does a lot of stuff we need to as well.

So yeah, it's pretty cool.

Alright so now we're the mouse is here though.

So now these are the ciphers, these are two big sections of the day that we do these.

So they're like three our events that happen, and so I can take Look.

So again, all these.

So this one is our current one.

And so since it's already happening is less than an hour.

It shows the time like the countdown time but these are more than an hour.

So that's why they show the actual date.

If you to see this, it would look different on yours because it would be to your local computer, but to your timezone.

So, yeah, so you can see America in New York.

That's the time zone I am in but yes.

So, all these are the same web component just with different end times.

Like the deadlines something?


All right.

So then I can remove them.

If need be, I can add them again.

It's just the same HTML date, picker, shouted, input tag super powerful.

All right, so that's that one.

And then to see the notifications.

So what I can do is Select what I did before.

So like this is this one, I can select it and it will bring the selected.

David upcoming Cypher here, and I am able to fill out these forms and then this is what you get.

If you sign up for notifications, this is where I send I set it up to be sent.

All right.


So that's that and then the sessions are what we're doing now.

So this is like the break session.

I am not going to do too much with this because I think it may override the one that we have now and mess everything up.

So this right here is where the chat shows up with a chat in the questions and where I can actually start the speech recognition.

Up here is where like I can see my video feed from my camera and screen share.

And if anybody else joins I can see them there as well.

So it's kind of like my little dashboard where I can see what's happening.

And then here I can select the audio and the video and I publish it to the stream and then I was having the issue before where my mic was cutting out for some reason, so add this Audio Level.

So I see like a Green bar go up and down every time I speak, I think that helps making sure that my audio is going through.

And then here's what I can start and stop the screen share, here is a timer.

So, let us say, if somebody wanted to do a lightning talk or what have you, right with that, when the person joins we both can see that timer.

So I can set say like, oh, okay.

You're going to speak for five minutes.

Let go say now, press that and It's the five minutes or if it's 10 minutes, I can do that.

It just adds five minutes to the thing, so I can add five more minutes or 10 more minutes if need be.

So that's what that does.


This is where I create the break in our database.

So all the information about the brake goes to the database and it gives me the ID there.

So it sets everything up.

And then I am able to start the broadcast of the live video feed.

So that's what you're seeing.

And then also that's and I can stop it.

And then here is if I had any guests, the guests would show up here like their name and then I can like kick them off if anything so you know like and their session also if you know yes that's that cool.

Now I need to work on making it so that it all fits properly because before like I said, I was just putting stuff everywhere.

I don't need to be functional.

And then I will talk about the form later.

You know, I will work on the form later so but right now I just kind of want to get a feel for where I think things should be.

So as time goes on I probably move things around and stuff, so I wanted to you know, make it a little bit better for my workflow to be able to see certain things at certain times when I need them.

So yeah, that's where we're at now.

So All right, cool and then here is if you run, he's doing a show and tell stuff you it will pop up here.

Like if you submit you want to do a show and tell it was it pop up in pending and then I will be able to select one of them and see what it is that you want to talk about and who it is that wants to talk about it.


And then if I deny it shows up here and then I can always go back on the denials and stuff and then the approved ones and then same thing for tutorials.

If you see a tutorial that you thought was super, Cooling ones added, that's where you will be able to do that.

And then I will say like, all right, cool, I will add it.

And then, you know, it will save it's active or what have you.

So yeah, that's pretty much it right now.

As time goes on.

I am sure.

I will be adding more stuff.

We're taking things out.

Did I do the show The View edit sessions?

So these are all the different sessions that have happened already and so, I can actually select.

So, let us go with one.

Okay, let us go with.

No, this is the one that's actually happening.

Now let us go with the one that we just had and so here you can see like so the archive link, I double back.

I double back up these videos.

So I will put like the very final archive link here.

The thumbnail, that was generated.

Automatically and it for whatever reason wasn't generate automatically, I will be able to generate it from that archive link by clicking this button and it shoots off, something to the back end and it does a bunch of stuff.

Then here's the video that I have uploaded to Vimeo, so I have like access to make sure if it wasn't there.

I would also be able to upload a video from that archive link the highlights are you know, like when you're pressing the add a clip it will show up here.

So just in case if it didn't go through, I would be able to restart it.

So it will actually create it and then you can like I see here, you can view it and then this stuff is for the symbol.

And so these are the like the IDS that I get back from it and so that way I can able, I am able to get the video details with show up here.

And then I can take all of that.

And then I can update it or I could delete the session, and that's what I pretty much it.

So that's where I am at now and I will probably be adding more stuff to it as well as the need arises and stuff and taking some things that if I don't need them.

So yeah, so that's it.

So just a little peek into the behind-the-scenes stuff of what's Happening you know, while we're all working on stuff.

So Yeah, so I thank you all once again for hanging out.

I am going to set that timer now so that it will be 15 minutes after the hour.

And then we will get back to work.

All right, cool.

Thank you.


Once again, for hanging out, hopefully, whatever it is that you're working on, you're making some progress.

And again, if you need any help, send out a Jaco if you want to show anything cool, sign up for show and tell and then if you have no clue what you want to do, there're a tutorials.

All right, so again, thank you all for hanging out, and I am going to share the screen so that we can Be out of here.

So again, thank you all very much to all right.


Going to get back to work now.

Thanks y'all.

I want to see.