HTML CSS JavaScript PubNub Draw App: Part 1
Key Takeaways
This video demonstrates how to build a live drawing app using HTML, CSS, JavaScript, and PubNub, enabling real-time shared drawing on an HTML canvas.
Full Transcript
Hey >> everyone, welcome on in. Happy Friday. We are going to continue with our HTML JavaScript CSS app that allows you to draw on my face. It's going to be a remote user. We We've done this before. This time though, I'm going to create an overlay at my face. I haven't made any plans. I don't know what the deal I don't know what the the strategy is that we're going to be using for that. I'm just going to try to build the app first, which we started with. You can see some of the code that we wrote yesterday. We're going to Yo, how's it going there? Ryan Cooler. Oh, Ryan Cool Robux, good to see you. Agony, welcome on in. Hey, Collab, good to see you first. Hey, you tried. Hey, quick fix, good to see you as well, bro. No, I know you almost made it. Hey, good to see you. Hey, Tubercio big brother, welcome on in. Good to see you. Hey, Ruchi. Yo, how's it going, everybody? Good to see you. Hello, pal. Welcome on in. We're going to continue with our HTML, JavaScript, CSS here. We got part of this working. Finally, your idea. Yeah, you did it. Yeah. Quick fix. Absolutely. Is this hard? It's going to be a little challenging. A little bit challenging. So, we got our X and Y yesterday. So, we know how to get our our characters there. Second like done. Thank you very much, Ruchi. Appreciate it. So, we need to make this work really well right here. That's going to be the idea. We got to make that work really well. Yo, hey, Ruchi. Thank you for the 100. I don't uh you sent it so early that the the notification system hasn't had time to warm up yet, so it didn't pop up. Thank you, Ruchi. My gratitude to you. Make a video game. Oh, we could. We could. Today, we're going to be making a draw app. We're going to make a draw app so that way you can see. We're going to draw and then it's going to transmit that over my face. We're going to try to make that work. You were the first like. Hey, quick fix. Thank you. You did. All right. Good to hear it. Let's see where we're at now. Where did we leave off? So, this is our whole screen here. So, we got our chords. Did we say the channel? What channel are we going to put this to? All right. Let's see if we can send this data. I also want the sequence ID message. So, what kind of payload do I want? I want my con message equals our X and then our Y and then our Z. Getting a little bit of dated there. Uh, and right when I clicked, hey, well, like the stream. Hey, Agony. Thank you very much. I appreciate it. You're wonderful. Stephen, your notification system warmed up. Please update. It's uh it's just Streamlabs. It's Streamlabs. Yo, Immortal. Good to see you. Happy Friday, Stephen in chat. Good to have you here. Welcome on in. Thank you. Thank you. Yo, Immortal with the hydrate. Hey. All right. Well, you know what? I got my water right here. So, can you see Can you see my water? How can you see it? Can you see it? Yeah, you can see it right there. Okay. Here we go. >> Yo, Len. Hey, Ruchi. Hey, it's warmed up now. Look at that. There we go. Hello, Lenam. Thank you very much, Ruchi. My gratitude's to you. Thank you. Thank you for the 100. You're wonderful. Just kidding. Wait, were you? All right. Oh, I All right. Here we go. Let's see if I can get her X and Y going Y. And we also need our sequence ID, right? Sequence ID. And then we also need to regenerate. So, let's do our let let ID. How about we just do that? Set that to zero right there. Little bit of zero right there. So, we can say our sequence is going well, not our sequence ID. We need our I Your sequence ID is fine. I think that's fine. Hey, how's it going there? Uh, Milana. Milana, welcome on in. Hey, wait, what is that? Oh, thumbs up. Hey, thank you for the thumbs up. Good morning. Good afternoon. Hey, Joe. Good to see you. Welcome on in. Going to code so fast before everything distracts you. I know. I know. Got to code. Got to code fast. Let's see if we can get our next song going here. All right, here we go. Sequence ID is going to be a sequence ID right there. sequence ID. Perfect. Okay, so that gives us our message and then yo Joe codes. Hey, good to see you over there on the purple Twitch app. Let's see how much code we can get going here. So, let me see if I can get our sequence ID here as well. And then I need to increment that. I need to increment that. Can I just increment it here? Why don't we just do that? We could just do that right there. We could also do some variable shadowing, right? const sequence ID equals sequence ID + 1. Can we do that? Is that something that we could do? Actually, I'm kind of curious if you could do that in JavaScript. Do you guys know? Can you do this in JavaScript right here? Can you do that? I don't know if you can do that. Yo, what's going there, Arsha Makta? Good to see you, Arsha Makta. Welcome on in. Happy Friday. Good to have you here. Is that going to work? Let's find out. Uh, unexpected ident. Oh, whoops. How about that? Is that better? Is that better? Oh, wait. No, we still got a problem. Okay. Uh, uh, reference card uh, sequence ID4 initialization. Okay. So, you know what? It is initialized. It is. It's right here. It's right here. It's initialized. See? Right there. Right there. It's initialized. Why is it not like that? Why can't you do variable shadowing in JavaScript? Can you not do that? Maybe it's cuz it's already predefined. So, reference cannot access sequence before initialization. Yeah, I initialized it right here. It's initialized right there. See, look. It's just being variable shattered. Ohoy. Hey, how's it going there, Nacho? He's back again. Loved your last stream. Learned a lot. Hey, great to hear it. Let's learn some more today. Let's do it. Let's learn more. Let's see if we can figure this out. So, apparently JavaScript doesn't support variable shadowing. So, that is something that won't work. All right. So, what I mean, it should be able to. How about we just say sequence equals sequence ID. How about that? Well, it's a little bit better now. Uh, what's your GPA? Wait. Hey, light person 5. Good to see you. Welcome on in. My GPA was very bad. It was very bad. It was It was below three. I'm not going to give you the specific answer. I don't know how much I can give you. I'm also Hey, it's late over there. Maybe remove the const. Oh, no. Oh, the const is fine. The const should be fine. Channels not defined. Oh, so now I've got another error here. Where is that at? Channel here. This is it. Like that. All right. There. Oh, error's gone. Hey, there we go. Looking good. Now, so the error the error account for chess. Hey, chess. I love that game. You're initializing by redeclaring it with a const. See, that's what I want to do. I want to do that. You can do that in Rust. Why can't I do that in in JavaScript? Let's go. Oh, we did it. Yeah. So, we figured it out. See, look. We just changed it. Says speaker. Wait, Zena. Uh, Zen. Yo, say speaker. Speaker. There you go. Yo, Facto Cow, what's happening? Good to see you. Welcome on in. Happy Friday. Good to have you here. We're going to be building HTML, JavaScript, CSS app that lets us draw on a canvas and then you can paint on my face. You'll be able to paint on my face. I'm looking forward to it. Say speaker. All right. You didn't like school either. Hey, I didn't either. Yeah, it was a lot of potential you applied to himself. You just didn't teach anything. So, you you were interested in Uh-huh. Yeah. They got to teach us something that's interesting is what you got to do. You got a little bit of interesting there. Bedrock server for Oh, hey Mox. Hey, quick fix. All right. Good to hear it. Get that Minecraft bedrock server going. All right. Let's see. All good here. Looks good. Now, I'm just going to double check if I can do No, no, no, no. Save. Save. I want to save this. Save. Double check. Double check. All right. Doesn't like that. It's not a fan. Okay, that's fine. No worries. However, this can't be a plus one. It has to be a plus plus like that. Yo, Icy Box. Good to see you. Olas, quick hello to all. Good to see you. Welcome on in. Yo, how's it going there, Leon? Hey, hope you are doing great. I encountering a problem on your web scraping app. Hey, okay. scrape lock authenticated websites through cookie header. How do I make the web automatically download the PDFs such that everyone would get the files without being directed to the web route? Okay, so the best thing to do is you can use a web browser first to figure out how to download that PDF. If you can download it with Chrome, what you can do is this is a pretty neat trick. Open up your dev console. Open up your dev console right here. Watch this. Your dev console here, right? So you can open this up here and then you go to network tab. You go to the network tab. You see all these resources. Find the one that's the PDF. Ready? Check this out. This is a neat thing that you can do. Find the one that's a PDF. You right click on the PDF. You click copy as curl. Copy as curl. Then that gives you all the headers and everything you need in order to download a PDF automatically with your web scraper. You're going to find out all the things that you need to know. I hope that gives you what you're looking for. Hey, let's go in there. Tourist eyes one. My brother Steven, good to see you. Welcome on in. Happy Friday. You don't like school at all? Me neither. Light person did not like school. I dropped out. I dropped out there. How everyone the troubles me? Yeah, it would be better if to do coding on your laptop. Right. There you go. That's what I did. That's what I did. Uh, all right. Sounds good, Doc. Sounds good. I see talking about protection over there. Okay. The software engineering skills cannot be underrated. They sure cannot. I They sure cannot. We can get everything done. We can achieve anything. Anything that you want to achieve, you can achieve, I think. Thanks, Leon. Absolutely. You learn a new thing today. Yeah. Copy curl. Copy curl. It's going to give you the answers. Yo, Nacho, what' you say over there? Uh, shared use shared folder that anyone in the house could share files with. Oh, yeah. From a device on the Wi-Fi. You thought I was a genius. Oh, wait. That was a I mean it's useful. It's a useful technique. It is. It's very ne it's very useful. All right, let's see where we leave this off out here, guys. Let's get going on this. Do we have a sequence ID? Yes, there we go. Sequence ID applied. And we are sending the data. Let's double check that that is working. I'm going to open up our network tab. Let me double check here. Yep. All right, that looks good to me. Hey, we're looking good there. Okay. So, what I need to do now is also receive data on that channel. And I've got multiple channels, right? So, I've got more than one. So, we need to receive the data there. Let's see if we can make that work, you guys. Let's see here. So, I want to grab in my receiver. Uh, we do we don't need that. We need the receiver here. Okay. So, receive paint events. And then we also need the user ID, right? So, let's do user ID. User ID. User ID. There we go. All right. Make sure we add that in there. And then we're going to put the XY there. Perfect. We got our metadata. Looking good. Do you code all day? Hey, Light Person 5. I mostly do. Yeah, mostly. I not all day really though. I talk to customers. I I walk I meet up with teams. Sometimes I've got various meetings throughout the day. Uh and I use Claude Code sometimes. Yep. Would love to know to make a draw app. Hey. All right. Good to hear. Ren Ocean. We're going to do that right now. That's what we're doing right now. We're getting our draw app going, you guys. Let's see here. Can we close that? No. No. I want that back. I want this. There we go. That's what I want right there. What was that error message? What is this right here? Attempt uh load failure. Oh, I Yeah, don't care about that. This reminds me of your P5JS days. P5? Wait, hold on. What is P5? I feel like I remember that. P5JS. What is this? A friendly tool for learning. What is this? A friendly tool for learning to code, make art. It's free and open source JavaScript library. Exclusively nurturing community. P5 welcomes artists, designers. Oh, wait. I didn't know this was a thing. Whoa, look at that right there. We learned something new. Hello, chat. What's going on in life? What's going on? Maybe GitHub off and parties. Wait, what do you mean? Best programming streamer. Hey, Phil. Good to see you. Welcome on in. Happy Friday. Thank you, Phil. You're back. You're back. Welcome back. Hello, Mr. JK, Mr. JK, good to see you. Welcome on in. Hello. Good to see you. Hello. How do you use Claude code? Do you understand the A code it provides? Yes. All the code it provides. Yes, absolutely I do. I do. I know what it's doing. I know what I want it to do. And I would build it the certain way. I have it build the way that I want it to build. For the most part, I give it freedom. I do. I give it a little bit of freedom. Where is our debug window here? There we go. Perfect. Okay, you're going to have a hackathon in 3 hours. Oh, hey, Linham. Nice. All right, sounds good. Enjoy enjoy the rest. That's uh that is a very short amount of rest to get in three just 3 hours is not a long a lot amount of time here. All right, so where are we leaving off here? So, we need to receive our paint events. So, we're going to say pubnob.subscribe pub nub.subscribe subscribe and we need to receive I believe our messages messages which is going to be a call back with our me our messages here messages I think right is this what we need to do is that what that looks like I think it might be I think it might be my first love GitHub and laptop small life chat you tell me about your small life wait what does that mean what do you mean about small life I'm Actually kind of curious. What do you mean small life? I don't understand. What does small life mean? All right. Where are we at here? Subscribe. Paint. Okay. Looking good. All right. Did we receive the data? Are we receiving data? That's what I need to check here real quick. Go to my network. Okay. Are we receiving data? It looks like we might be. Let me double check here. Let's go to stream. Stream. There it is. Hey, look at that. All right. Hey, how's it going there hater Omar? Good to see you. Welcome on in. Happy Friday. Good to have you here. Hi. Good to see you. All right. Lots of hells over there. All right. This is what I'm looking for you guys. This is great. I love this. All right. So, hey Sergio. Hello there engineers. Good to see you. We're doing HTML CSS JavaScript today to build a painting app. We're going to rewrite it from scratch. You saw Hey, how's going there Asha? Good to see you Ash. Hey, what's up? and Dar. Hello. Hello you guys. You guys are fantastic. Good to have you here. All right, let's see. Where did we leave off? So, we got our message. Let's do a console r.log. Let's look at the messages. I I just want to see what's inside of that real quick. Just a real We're just a little peek in there. A little peek in there. Yo, Ashford. Hey, Winnie. Good to see it. You must You missed Russ already. I know, right? Hey, we'll go back to Rust. We'll go back to Python at some point. We're going to do some hasll. Yeah, we're going to learn some HA hasll. I'm looking forward to that. We got a lot of things to do, you guys. We're using Java scripts. We would not You would not catch me using Java. No, no, no, no, no, no, no Java there. A place where we find peace. Oh, wait. A place where I find peace. Okay, let's see. What is that? So, you said your small life. Uh, playing video games probably. Yeah, play video games for peace. That's it. We have a pub and a sub in the same code. You got it. Yes, we do. It's self-pubbing and subbing cuz that's going to be where we're going to draw. We're going to draw this. You're going to see how fast the technology is. So, you can see it's going to be great. It's going to be fantastic. We also need to subscribe to a channel. Channel. Let's see here. We need to subscribe to multiple channels. Yeah, lock in. Hey, we're going to make it work. It's great to be back. Hey, good to see you again. You're trying to learn Python right now. A couple of books would be cool to watch a Python stream. We will go back to Python. We will. So, no Java. Got it. You got it, Winnie Root. You got it. No Java. Not going to happen here. Don't think so. All right. So, this is the paint events. This is going to be our coordinates. We're maybe going to do that. We're going to do the command separate. So, let's do channel.cords. Where is this at? I need this to match. This has to match here. Paste that. Okay. Looking good. Okay. Stream reload. Yeah, there we go. Let's see. Can I do a search on that filter? All right, let's see. Stream. Yeah. Yeah. Look at that. All right. Good, good, good. Let me double check. Can I get rid of that? Okay. I want to see just I need to I need to make the window a little bit bigger here for a second. Yes. Yes. That's what exactly I'm looking for. Okay, perfect. Perfect. You guys, yo. Hey, Kyle. Good to see you with the JavaScript, Rust, Python, and Vim. I love those. Those are my favorites. That is happiness right there. That's happiness. Looks cool. Can you talk about the PubNubs tech stack? Yes. So, we're a globally distributed message bus. Kubernetes. Uh we use uh Pingor for the load balancing. We have our own proprietary C and Rust distributed internal message bus that it broadcasts and replicates data across all the regions. Techstack. Um we have more there though. It's not just those things. We also use uh uh a truino for data processing. Uh we do we have Cassandra, some elastic, we've got Postgress, we've got so many different pieces of tech in there. If you're curious about one spec particular point, I can very much help you there. Everything that you see here on the screen for this section here and this section here as well. This these two the pub and sub are all 100% either C or Rust end to end maximum performance. Does PubM hackathons? Yes, we have. Yo, NASA fans, good to see it. Welcome on in. Happy Friday. Good to have you here. We do have hackathons. Winny, I don't think so. Uh, we've done hackathons externally before. Internally, we do hackathons all the time. Well, at least a couple times a year, so that counts as some of the time. Uh, let's see. Really thanks for talking about the curl part. H for scraping. Cool trick. It's a good trick cuz it will give you everything you need. All the headers and you can just copy and paste those. Oh, you're good to go. Not fans. Sorry, you're late to watch. Hey, you're good to go, Naz fans. Good to have you here. Hey, no worries. So, let's see. Where did we end off here? Let's go back to our console. Looking good. Okay, reload the page. Yes, that's what I'm looking for right there. All right. Now that we have all of our data being transmitted and being received, let me double check here. Let me hide that. Let's hide that so we don't Is this the only console we have there? Okay, good. The only console. Let's go here. Yeah, there we go. Now we can start collecting the events and have like a limit so we can do what do you call it? Um, we need we need to grow. We need we need a we need a data structure, you guys. We need a data structure for all the user events. a data structure for all the user events. Very cool. Thank you. Sounds like an awesome product. Hey, good to hear it. Thank you. Curious about the Kafka Kubernetes. Yes. Were you tempted to cloud serverless offering? We were data structure. Rah. Yeah, we got to do a data structure, you guys. All right. Uh a is a const. We need our something here. We need something something right there, you guys. Woohoo. Data. Yeah. Let's make it work. Let's make it work. All right. So uh let's say uh we we do use so we've got uh our Kafka which is not our full data pipeline right Kafka is too expensive for all the transactions going through the system so we only capture some of the events going through our system into our Kafka bus otherwise all of the messages going through our network are customcoded with Rust and Cafka is Java it's a JVM it's too expensive it's too expensive a Q point. Yeah, pretty much. Right. So, so some of the things that we need to do to process events downstream, we capture those events, put them into the Kafka and then subsystems will capture those events and then process them separately. Now, we cannot use that for a full data pipeline. Kafka is too expensive. So, we have to use another approach. We cannot use JVM. JVM too expensive. JVM. Yo, Elijah. Hey, Elijah. Thank you for subscribing. You join the right channel for software engineering. Good to have you here. Welcome on in. You joined the right channel for software engineering. Today we're building HTML, CSS, JavaScript to build a drawing app. Yo, Larry Cherry. Hey, Larry Cherry. Thank you for subscribing. Welcome on in. You joined the right channel for software engineering HTML, JavaScript, CSS today. Daniel Cohen. Yes. Hey, Daniel. How's it going, Daniel? What are you What are you working on that's fun these days? What exciting thing, Daniel, are you working on? I'm actually kind of curious. Let me know if you're if you want to tell me. You don't have to tell me there. There's no no expectations on that side. I'm just kind of curious if you have any any exciting things that you're working on right now. All right, we have to fix this here. We need a data structure, which is just going to be an object. There's only arrays and objects. So, I need to figure this out. We Let's pseudo Let's pseudo code this really quick. So, let's do a quick little pseudo code here. A smidgen of pseudo code. Exclamation point arrow there. Uh, wait, wait, wait. How do you close? Is this how you close it? Is that Wait, is that No, it is. It's It is this. Yeah. Why Why isn't it giving me the fun fancy arrows? Let's see here. Yeah. Oh, whatever. Whatever. We're fine. All right. Whatever. Okay. So, I need We need to do some pseudo code here. Uh, JavaScript, your favorite. Hey. Hey, KZA. Yes. Kza, we were doing some JavaScript. You just noticed the subtitles. Hey, they're pretty good. Yeah. Winnie ute. Is that going to work? Winnie ute. Winnie ute. It's not going to put it's not going to spell your name correctly, but at least there are subtitles. Yo, Mu, how's it going? When I was running all of your simulations, I learned to hate coding. Did you really? Wait, no. Coding is great. Don't forget to hit that like. Thank you, Joe. Appreciate it. Hey, Lynam, what is ISIS? What is that? What do you mean? What is? All right. Where we left off here on this side of the screen. So, we need to figure this out here. So uh when data received by uh a user right we need to uh add to draw dictionary and then we needs to append point sort by sequence id and then uh also cap it. We need to we need to slice it and then slice it. Sort by sequence ID and then slice by last 100 points. Okay. So when received add to draw dictionary and then we need to append point to a array uh to user array right sort resort it slice by last 100 points testing pressure fluidity rates surge rates parts failures etc. It got brutal. That sounds actually pretty brutal if you have to deal with that level of of it. What? Like what do you call um sensors? Sensor data, right? So it's a large stream of data that's coming in and you need to process it. Sorry, English is your mistake. Oh, any mistakes because you only have learned. Hey. Oh, good. Nasa fans, you I understand you pretty well. Sometimes you watch your streams and don't understand what you're saying. Oh, okay. That's no problem. Well, I'm glad to have you here, NASA fan. Would you start? Would sort be necessary because it comes in order anyway? Uh so you're you're right. It it however what if someone's hacking, right? What if someone's hacking? So we need to think about that. What if you are sending data and you're overwriting it? Right? What if you sent it out of order? What if another user intentionally sent it out of order? Right? We have to fix that. So I'm thinking about the hacks. Yo, Logan Stevens, good to see you. Welcome on in. Happy Friday. You're a big fan of Golang. Cool. For concurrent IoT data ingestion. Yes, I agree. Heard of async stuff in Rust. It's tricky. It is tricky. It very much is. So, unless you're using the most recent version and also if you're using Tokyo, Tokyo is very helpful. See? Oh, are you doing multi-pull cursor canvas? Yes. Yes. Hey, fractalc. Yes, that's what we're doing right now. We're going to be building it. We're going to be building it a little bit important. So, let's see. Sort sequence slice and then paint. Paint uh paint all uh we want to receive these things separate. And then we need to have like s some sort of like a run loop or maybe a game loop. So that way we get 60 frames a second, right? And then we paint everything. We paint everything and then we we clear the canvas and paint again. So paint clear, paint clear, paint clear. Right? So that's a separate loop. Okay. So we need a run loop here. We need to do a uh render loop. So we need a paint all uh draw points and then uh clear clear screen. Clear screen. Paint all draw points. Render loop right there. Yo, the Corey. Hey, welcome on in. Good to see you. Hey man. Oh, that's insightful. I never thought of that. Is it like replay attack? Yes, pretty. I mean, it's pretty. You could think of it like that. It's user injection. They're going to say, "Hey, here. Take take a look at this. I bet you weren't expecting this. What's it going to do? The screen could explode if I didn't take care of that. It seems like you move the camera's position." Oh, wait. Or my eyes are wrong. Hey, Nasifan, you're paying attention. How did you notice that? I didn't move it that much. I didn't move it that much. Okay. Nasopan. Nasopan. Yes. at NASA. Yes. Is it good? Is it good? Do you think it's a good yo? Hey, the Corey good. Thank you for saying hi again. Thank you for clicking the hello button. All right. So, let's see here. Let me see. So, this is what we have to do. We have to take care of these items here. All right. Looking good. Looking good. Okay. I am interested in implementing the tech here. Now, let's do this. All right. So, we need our user. Yeah, I need I need to name the dictionary something. You know that's cool about AI. I learned that's better. It is better. You think it's better? Okay, good to hear. Nice at Nazifan. Thank you. Thank you. So, you know what's cool about AI? You learned when you talk it reads your words as code, numbers it them mathematically, calculates the search, its vectors, space to retrieve data. mule. It's pretty neat tech, right? It's pretty neat. I'm into it. I I We've built it multiple times on stream before and we were successful. You're only just realizing that you have live subtitles. Oh, ABG. Yes, AGB. Yeah, they're fast because instant. We're Are you on a delay? Does it see Can you Does it look like a delay or does it look like we're like real time? Like how fast are we? Does it seem like it's fast? Whose skin are you wearing? Hey, Joy to up. Are you saying how old I am? Are you talking about my age over there? You're saying, "Hey, hold on. This guy's old." What? He's scary. He's scary looking. Joy to op. Good to have you here. Welcome on in. Okay. I am LA. Here we go. All right. Let's add in the dictionary. Thank you, Kyle. You know, there was a hugging face space called stable diffusion multiplayer, and people would generate one big canvas. It was amazing. Oh, Fractal Cow, that sounds like a good idea. I like that. Chill. Yes, absolutely. Hey, how's it going over there? Thank you for saying hello. No, subtitles are instant and just wondering if you have a deliberate delay in place so the subtitles can be computed and published to the video audio. Yes, it is synchronized with the video and audio. It is a a AGB. Yes, you got it. It is synchronized with the audio. It is. You got it. You figured it out. Hello. Hey, how's it going there? Uh, Mercen, wait. Mercia Joran. Wait, wait, let me say your name. Hold on one second. I'm going to see if you've got a good name here. One second. Go to channel. All right. Mercia Goran. Mercia Goran. Good to see you. Welcome on in. Hello. You moved the camera position up a bit. Yes, I moved it a little bit up. I'll probably mess with it a little bit more because it's up really high now. So, I'm going to try to cuz the thing is my monitor is right here and I didn't want it to like peer into the monitor. So, I had to make some adjustments. Is there a delay with stream? Uh, there is a slight there's a slight delay, but it should be fine. It should be fine. You guys might not notice. What's your first startup idea? My first startup idea was uh to build video games. That's right. I made video games. I did. I made some video games. My actual legit startup idea where I made money was called LT Sun. It was similar to Squarespace or Wix where you have an online Wizzywig editor. What you see is what you get. Wizzywig. Bet you don't know about Wizzywig. Ah, right there. Wizzywig. Right. So, it let users use a web browser to edit their website and I sold that. You notice the camera moved up. I Yes, good notice. You noticed. Well, thank you. Fun fact, you're no viewers are looking down on you. Actually, as a power dynamic factor effect, it's it's known as kalays. So, wait, Kyle, are you saying this is good? Uh, flip with So, the camera angle is uh is uh improved. Is it improved is what you're saying and nice how you notice the camera move up. Yeah. What tool are you using for the subtitles? Thank you for asking. Hey, it's a software technology that we wrote 8 years ago. If you are interested in adding this to your stream as well, you can add these subtitles live right here. It is on our Discord. If you are interested, Discord, I will copy and paste that over to our link share. Link share. There you go. If you're interested, there you go. Hey, video. Good to see you, DZ. Welcome on in. No eye. No eye level would be better. Or looking up. Looking up at you. Oh, Kyle. Okay. Okay. Flip this K. Thank you. I will change after stream. I'll change it after stream. Thank you, Kyle. You're good at answering qu questions. How was the move from 9 to5 to focusing on your own stuff? Pubn been streaming. Uh, well, it was natural. It was natural because it's been kind of doing that since a younger age. Link to link Discord in bio. Yes, link Discord is in bio. Thank you. It doesn't matter. Just psychology BS. Well, I want to do it the correct way. I want to I want to optimize it for the most benefit. Yeah, I want to optimize it for the benefit. So, Kyle, thank you for mentioning Thank you for mentioning. I want to optimize it. So, we're here. Okay, go back over here. Thank you, Kyle, for the Discord link. All right. Where do we go on our adventure? Eye level would be better or looking up at all. So, I'm going to change it to eye level. All right, I will. Okay, I'm going to do my best. The problem is I've got the monitor right here and so I need to figure out how to adjust it appropriately. Okay, draw on. So, let's see if we can get some of this code going here. All right, so this needs to be um user points. User points. I don't like that term. I don't I don't think that makes the most sense. User maybe what if we do user draw. Is that a little bit better? Something like that. And then that is our main our main canvas. You're already joined your Discord. Oh, nice fans. Yes, yes, yes, yes. I uh let's see here. Close this out. Yo, Ahmad, good to see you. Ahmed, welcome on in. Happy Friday. Good to have you here. Let's see. One second. I want to get my draw going. All right. So, we got our draw. We got our sequence ID that auto increments. Let's bring this over here. I think we'll lift that up there. Perfect. Okay. We got our pub nub over here. All right. Looking good. I'm going to bring this up here. So, that way it brings this. Now, we know what our canvas is. We know what our state data is. Keeping a little bit separate. User tracks. All right. I like it. Tracks. Thank you, Lenom. Thank you, Linham. What are your PC specs? All right, here we go. All right. H top. Here you go. So, we've got 16 core M series processor on the Mac. Little M series processor there. So, it's a good built-in GPU. I believe it's got around like 40 core GPU, something like that. And we got 128 gigs of RAM here. Get that going right one second. Here we go. Okay. Yeah, 128 gigs of RAM. 128. Here we go, you guys. Okay, la. Looking good on that. Okay. Resize pen. And then we'll go down. We'll say 1 2 3 4 5 6 7 8. There we go. Okay. So, now you can see my specs right there. 13 core 16. Yes. Asking for help. Wait. Uh, what do you mean asking for help? It How do you mean? It's just hardware. It's just hardware. That's a high-end PC. Pretty nice. It's pretty good. It's pretty good. It's It's um It's last I believe it's last year's model or maybe it's this. It's a It's a late It's a early year model. 100% 100% XJSK. A whole bunch of keystrokes there. All right. I don't know what you're saying. So, let's see going on over here. I want user tracks and then when we receive events. All right. So, what is what is the event here? Uh are these all individuals? They are. So, we just need to say message, not message, because we are especially appropriate here. Perfect. All right. Looking good. Perfect. How old are you? I'm in my 40s. I'm old now. Raising 134 million is crazy. Hey. Yeah. So, let's see here. Thank you for asking. My name is Steven Blum, CTO, co-founder at PubNub. Uh Todd Green is my co-founder. We started the company uh over a decade ago. We raised $134 million. Series E venture capital 1 billion devices on my network you guys joy 2 op good to have you here and since you saw the 134 million if you want I also have 68 patent claims granted I have them listed on my disc on my what do you call that LinkedIn here I have it's around here it's on my LinkedIn there's patents here we go patents perfect you can see all the patents here if you are interested you have any thermal problems No, actually, not even a little bit. The fan never turns on. I'm sure it's going very quietly, but I can never hear it. I never hear it. I never hear it, you guys. All right, let's go back over to our window. Here we go. Okay, perfect. IO overreacher. Wait, what do you mean? Eio overreacher. What do you mean? Canvas based. Hey. Yes, Nathnol. Hey, Nathnol. Good to see you. Welcome on back. Yes, this is canvas base. We're doing HTML canvas base here. So, we got our canvas right here. So, we're going to be doing what is it called? Fill uh stroke. We'll do is it stroke? No, it's a line path. I think it's a line path. And we're going to draw them for each user. So, we're going to create a four of we're going to implement this. We're going to add So, let's see. We need to add this here. Let's do let's create a separate function for this. So, let's grab a separate function. Um, let's go here. Where should we put this? So, the functions are defined. I can bring them to the bottom. Um, no. However, yeah, yeah, yeah, this is probably fine, I believe. Yeah. So, we'll say function um add user track and then we're going to have our message. And then we're going to call this so that way we can keep code clean and simple. Keep it just a smidge simple and clean. Yeah. So, we're going to say add user track message. There we go. And then double check this that we're grabbing everything correctly. So, that way we don't have to have like extra indentations there. Canvas. Yeah, there you go. Jookos. What language can you speak? English. There you go. One one language. However, from a programming language perspective, I know JavaScript, Python, Rust, Ruby, uh PHP, a little bit of Erlang. Not much Haskell. Uh we've got Pearl. Uh PHP if I didn't mention C, C, C++. Uh we can keep going. Yo Samuel, good to see you. Welcome on in. Yo, you're back. Good to have you here. You speak all the programming languages. There you go. You think to do begin path or something? Yes. Yes, that's what we're going to do. We're going to do that. I have some reference here from our previous our previous code here. So, we're going to have a line begin path. Hey. Hey. You know it. It's be begin path. Yeah. We'll have a line width. Uh and then we're going to do a move and line and a stroke. So, I need to see how we're going to do that. Uh let's see. Uh draw user coordinate begin path. So, we're going to have to figure this out. Uh we're going to have to figure this out. Basically, a genius in coding. Hey, we spent a lot of time practicing. We sure did. Mule. We don't have enough time to go through all the languages. You know, I know it's a lot of languages. It is. Don't worry though, they're all the same eventually. They have what do you call it? Uh flow control, loop, right? Loops and if statements, things like that. Variable assignment, expressions, and then common other patterns that you need, string manipulation, right? Uh buffering, data buffer manipulation, arrays, hashmaps, things like that. They're all the same. They're all the same. All right, let's see if we can grab this. I'm going to try to create a simpler version. So, I need to think how are we going to do this? So, we've got a begin path and then we're going to stroke the lines. So, where is this? Move two and line two. What's the difference? What's the difference between these two things? Do we know here? So, Google move to versus line two in canvas. Do uh canvas HTML. All right, let's take a look at this real quick. All right. Move to repositions the virtual pen to a new coordinates without drawing anything. Oh, hey. Okay. So, that makes a lot of sense. Perfect. Okay. So, then we'll use a move to. We'll use a move to per user. Okay. So, we do a move to and then a line to and then All right. So, for every user, we do a move to. All right. move two and then a line two and then we do a stroke when we're ready to draw. Hey, this is going to be neat. We're going to get some extreme performance here. I'm looking forward to this. Oh, it's going to be great. Do you have a penny drop moment when you can share through your learning process that made you see similarities between languages? Yeah. Uh, probably. Yeah. So, what was it? Um, C++ did not give you that, right? That was my first language. mistake to learn C++ as your first language because it's quite challenging. The next one is what did I learn next? Uh I think basic and that didn't click over. Maybe some visual basic there as well. And then uh with the dims, remember the dims, the dim. Cool is it? The penny drop moment would be JavaScript when I when I recognized that JavaScript and PHP were had similar things, right? String manipulation and JavaScript and PHP. That's the moment. That was it right there. That was the penny drop moment. How do you understand programming languages without a AI? Oh, hey, I didn't have that back then cuz when I did this, there was no AI. There was no AI that helped you build it. Not like back then in time you only know Java but writing and creating something is really hard for you. Well Nike because you are at a disadvantage. You have this technology called artificial intelligence code generation. It's a generative AI. It lets you build and write code without you having to do any work whatsoever. Well, I mean you have to sit in front of the computer and like wave your hand at it, right? Like beckon you beckon to the computer. Don't it it won't get easier unless you stop using AI. All right, that's it. What were floppy discs like? Hey, I remember that. Remember those? The floppy discs? Well, the floppy discs that we had were floppy. There were also like hard versions of floppy discs that were like 1 megabyte, like 1.34 megabytes. These like square discets. The floppy bite discets. They were still called floppies because the discs were floppy, but they had a hard outer shell like a Christmas tree. We need millions more like him. Hey, I was a bunch of people working on AI going over codes and they have AI write program itself. about 70 or so percent. They seem to mess up. They will mess up especially later in the context. So, it's floppy. Here we go. Craig Pauls. Yep. Floppy and stiff. Yep. I'm with you on that. Good to see you, Craig Pauls. Welcome on in. Happy Friday. Organ Trail. Yeah, I played that on floppy, too. That was in our library. There's no intelligence. AI people source code and make it overfitting inside the mega computers. You don't understand this. Probably overfitting. They are trying to make it so that way the generative output on the code is going to be as structured as possible in a way that works and compiles. It won't be as creative though. Using AI to write code is like hammer and a nail and brick. It will work but it's not optimized. You're right. You're absolutely right. It's like big It's like giant like Duplo blocks like huge dup Duplo blocks, right? You throw them down, they stack and they make a building. However, if you need to optimize something and build something very specific, they're going to struggle. Hey, do you remember me? Yo, Emanuel Garcia, of course I remember you. Good to have you here. Happy happy Friday. You play Minecraft. No, it's depend Minecraft. I'm of the Minecraft era. You're you're bad AI program 70% of itself with then when they review that code, some do not understand the code that they still instill in the code into the system. Wait, Mule, I understand a little bit what you're saying. You're saying that the AI is having a challenge on understanding its own code that it wrote itself. Is that what you're saying? Okay, let's see here. One second. Okay. Having AI write code is tedious. It needs constant feedbacks. Yeah, it is. It's It's a lot of um what do you call it? Uh uh a bunch of Hey, there we go. That's what I'm looking for. All right, babysitting. It's like babysitting. Yeah. All right. Where are we at here? Where we need to go to the next step here. HTML 5 canvas. So, we know line two and move to. So, let's append our points here. So, uh user tracks user tracks uh let's see uh ID. So, if uh let's see, wait, wait. Uh user ID equals message dot user ID. And then we're going to grab the sequence ID. uh we we um yes yes we'll grab the sequence ID and the in the cursor positions. So user id and then we say uh if user id in uh or or we should say not if not uh not user id in here then we need to uh make make it inside of it right so we need to make a new one let's grab that here inside inside Stephen check out my image on discord general sounds good is really hard yeah it is pretty tricky it is yo after a long time came back to your Hey Shoe Bam. Good to see you. Welcome on back. Good to have you here. Happy Friday. We're doing some more HTML and CSS today, you guys. Some JavaScript to build a drawing app that you'll be able to see on my face. You'll be able to draw on your face. Yo, battle chest. That's some OG right there. That is a That is a Look at that. What? Windows 3.0. Seriously, Microsoft Windows 3.0. Yo, thank you for the hydrate Joe. I needed that. You made your own little pub subsystem. Yo, Nathnol, that's fantastic. And you were wondering if now pubnub handles off. Yes, we do. Because then you can't have stateless server, right? O list. We still have stateless because it's through J JWT, right? So, you can still have a stateless system. It's done through message passing and and signatures. Yeah, O list works fine for something like this where users have the same permissions. Yeah. So, I am going to be adding in some O here. I will. We're going to add in a little bit of O. $15. Is it? That's expensive. That's some expensive. Little bit of spendy money there. Just a smidgen of expensive. What are we doing today? Yo, Raj. Today, we're going to be using HTML, JavaScript, CSS to build a canvas app that's going to be drawing on my face. We're going to draw on my face. Guys, when you open your Discord profile, I almost called you. Wait, did you? If you do, it will it'll start ringing. It'll start ringing on stream. Yo, anime artist, good to see it. Welcome on in. Happy Friday. Do you drink coffee? Always see you. Pure water. 100% water only, you guys. This is it. This is the only thing I drink. Only water. All right. Learning Python. We create Oh, hey, Nacho. All right. You're learning Python to write create your own textbased RPG. Hey, very nice. Track stats and quest and stuff. Nice. Very nice. What programming language are you using? This is JavaScript right now. We were doing we were using Rust for the past 2 weeks building a candle using Candle to write a variational autoenccoder which let us draw a picture of a cat right there. Remember that right there? Yep. I see the Discord. The Discord's happening. What will ring on live? It will. Yeah, it will. If you ring it, it'll ring live on on YouTube. Uh, what? Let's see. Next week is your last week at your current job. Oh, Soki. Hey, before the internship. All right. Good to hear. You're finishing a project in automated prompt optimization this week. Yo, Si, it's so cool to hear. Si, I love hearing your story and your updates. It's great to hear. I hope you're doing good and I'm looking forward to hearing about the adventure you're going to start here. Should we all just call him? If you do, it's just going to make the Discord ringing sound. Water greatly helps kidney function. Yeah, I needed that. I stopped drinking water so much, which was a mistake. Bro, you shouldn't have said that. Hey, you know what? I'm actually kind of curious to see if if anyone's going to do it. Oh, hey, Raj, you're calling. Is it ringing? It's ringing kind of. You can kind of hear it. You can kind of hear it here. Let me pause the audio. No. Okay, it knows because it's in streamer mode is enabled. Streamer mode is enabled, which means that it's not going to be as loud. Hey, it's Kyle. Kyle, what are you doing? Can you hear me? Wait, I can't hear you. I don't know if I can hear you or not. Does it ring? Hello. Hey, Sammy. How's it going? Hello. Welcome on in kind of. Yeah. All right. Is it Is it working? Well, oh, I can't hear you. It's a problem. >> Hello. >> Oh, hey, it's Kyle. I heard you. What's up? >> Oh, wait. You might not be able to hear me very well cuz Discord doesn't work with my my microphone setup very well. >> Yeah, I can hear you kind of. I need my Discord audio call is not very good. It's not. Gummy bear on Gummy Bear. Wait. Yo, Idy. Yo, how's it going there? Idty Poo Gaming. Good to see you. Welcome on in. Hey Kyle, it was good to good to chat with you for a bit. Uh I don't know if you could hear me or not. Audio and Discord is a challenge. How's it going there Sammy? Hello. Hello. You heard him. I know. I heard him too. Just a little bit. Yeah. You don't drink water anyway. Hey. All right. Please tell me. Wait. Sammy, tell you what. Uh what' you say? Uh what was that? The cat has a cool hello poster. Yeah, it does. It sure does. There's our cat poster from the other day. Do you know why AI was so bad at text whenever it used online service to turn it alien? I don't know specifically why. I don't know. It's text is uh the pattern for text had temporal effects that the the AI was not taking into account, right? Cuz it's got sequence and order. However, when it's looking at just patterns like this versus this, it uh it's less temporal related, right? It's more positional. Wait. Told you about what? Hey, Steven Harsh. Good to see you. I can't moderate this. Wait, you can't. Hey, Sammy. Sammy, what did you say? You said hello. I see you're saying hello. What did you say, though? I missed your checks. Sammy, can you say it again? Can you say it again, Sammy? What is the project about? Oh, hey Adesh. Hey, Adesh. Good to see you. We are building a canvas app with HTML, JavaScript, and CSS. I know there's a cat on the screen. Uh, that's not what we're actually dealing with right now. Uh, we're building JavaScript to write a canvas app that's going to draw a picture and allow you to draw on my face. You'll be able to draw on my face. It's going to take a while to build though. Just trying to make your own calculator and C++ is killing you. I know C++ C++ is a bit effort, right? So, that's what we're working on today, guys. If you're interested, it's a fancy mic. It is. I know it's a fancy mic. Discord is struggles with it. It's Friday. Uh, you are but you're it's Saturday. Oh. Oh, right. Wait, is it? So, for me it's 9:15 a.m. Pacific Daylight Time. Currently, it is Friday for me. Crazy. I've tried code along with you and I don't need begin path or even move to Oh, well, we're going I actually that's a good point. When do we need to do begin path? Do we? I think begin path is going to trigger an internal buffer to start. Then we draw and then we move to and we draw and we move to and we draw and we move to. So I think that's what we're going to do. Yo, Jennifer Brower. Hey, good to see you. Welcome on back. Good to have you here. Happy Friday. Welcome on in. You guys are awesome. Good to have you here. It's 2:00 a.m. Sydney, Australia. That's why. How's your pie? Yo, Shupam. Hey, thank you for becoming a member. Yo, whoa, thank you. Hey, you're wonderful. My gratitude to you. Welcome on in. Good to have you here. We're going to be building a lot more videos. That's the plan. We're going to try to make more videos for you guys. Thank you for becoming a member. Shoeam, you're wonderful. Still going to watch you anyway. Hey, Lenam. Thank you. Thank you for staying up late just for me over there in Sydney. 2 a.m. is very late. Jennifer Brower, absolutely. I remember you. Good to have you back. Welcome on in. Hello everyone. Happy Friday. Hey, Akuna Matata. Hey, Lion King. We got some Lion King over here. We are two weeks ago. Yes, it was. I remember Jennifer Brower. I absolutely remember that. Yeah, it's 1:00 a.m. You guys are up late. You were up very late right now. Yo, thank you for the water. All right, one second. It's Prague. It's 6:15 p.m. in Prague. Oh, all right. Hey, Nacho. Well, hey, at least it's regular daytime for you. Yeah, bro. This is boring. Hey, Jennifer Brower. I'm sorry. Oh, I didn't mean for that. Let's see. Bro, I was your member before then. I forgot to renew. Hey, thank you for becoming a member again. Thank you. It's 10:00 at night. No, it's not quite 10 there. Uh, it would in India it would be 9 uh 37. It's 9:37 there in India. Yeah, 9:37. All right, let's grab this back over here. Bring our terminal window back up. All right. Looking good. Looking good. Okay. I would love to add this user tracks in. We need to add in uh it's going to be a dictionary. No, it's an array. No, no, no, no, no, no, no, no, no. Uh, it needs to be a user ID. An array of dictionaries. User ID is an array of dictionaries. All right. Like that. So, we need to initialize the array of dictionaries. Bro, how do you how do you know? Uh because math, you're 12 and a half hour 12 and 1/2 hours ahead of my time. So, being 9:18 a.m. That means it's 9:38 p.m. for you. Easy. IST versus PDT tomorrow. Oh, NASA fans. Hey. Yeah, it's Saturday. Can you do one push-up real quick? It's my little bro's birthday. He wants I don't think it's his birthday. I don't know about that. You've been I I don't know. I don't know. I don't know. Um I I could but I'm wearing pajama pants and that would not be appropriate for stream. I need I need to I need to keep this workplace safe. You guys can We are jumping in Rust. Yeah, I know, right? We're from Rust. So now we're doing JavaScript. You got it. Hey, what's going there, Kyog? Wait, Kyogu. Hey, Kyogu. Good to see you. Welcome on in. Good to have you here. Math is pretty magical sometimes. Not going to lie, it sure is. On God. Hey, Jennifer Brower. I know what you're saying. Please. You'll have to It might You might be able to coax me. Uh though I don't want to ask for anything. There's no little burrow birthday buddy. I mean, no. I know, right? Are you smart in maths? No, I'm actually not. That's something that I didn't study as much. I know how to get my way around some calculus. Does that help? Linear algebra. I can do that. What are you making, sir? We are building an HTML, JavaScript, CSS app that's going to allow us to draw on the screen and then I'm going to give you a link which allows you to draw on my face. You'll be able to draw on my face. It's going to take us a little while to get ready to go. Jennifer Brower. I know, dude. That is a phrase. He He Now, don't break his arm with a push-up. I can do push-ups. I used to do 600 push-ups a week. I did. And then I was not gaining weight. I was losing weight, so I had to stop. So, I I It wasn't working out for me. I was I was doing it for three years. 600 push-ups per week. You're subbing and unliking all your videos. Oh, no. Jennifer Brower. No. No. Should I drop the buff, Stephen? Edit. Oh, right. I know what you're talking about. Yeah. Where I tried to show you my uh my arm. It's ready. All right. Show it if you're ready. If you're ready, we could do that. This is my favorite song. So, we have to wait till the end of the song, though. I like the song. All right, so user tracks. Let me reload this page here. All right, got an error. Uh, line 61 right here. Oh. Ah, my goodness, that was silly. You guys didn't tell me. All right, reload. No, still an error. Save. Uh, user ID equals message user ID. Okay, reload. No, it's not working. Okay, one second. Um, add user tracks. That should work. Okay. Why isn't it not console logging? I see why it's not console logging. It wasn't the push-ups. Wait, hold on. Oh, wait. Hold on. Wait, wait, wait. Uh, it's ready. Okay. Use smart on coding smart math mark 96 or A+. I don't know about that. I don't know. I'm not sure the nutrition. I sounds like calorie deficit and not enough complete proteins. Oh, I was proteiny. I was proteinpacked. I was eating double the amount of daily protein. Uh, do you ever think I'm going to electronics and and Arduinos? Oh, Samuel. Yeah. Yeah. Yeah. That's a lot of fun. Do the microcontrollers. It wasn't the push-ups, Joe. It must have been something. It must have been something. The good news is I've gained back weight. So, we're on track. We're on track. Do you ever think to go and So, uh, Samuel, yes, we could do that. I would think that would be a lot of fun. We could bring in some Arduinos and other things. Peace upon you, bro. Hey, Mr. Dark Detective. Thank you. Good to have you here. Uh, what was the console log before you do add user tracks, though? So, we are adding it here. Add user tracks. Console log. Save. Let me double check. Reload. Reload. There we go. All right. Now, we're looking good. Why does it stop? Cuz it's when I'm moving my cursor. I made a drawing app when I was an intern. Oh, Kyogu. Hey, really? It was really fun. Nice. That's what we're doing right now. We're going to make a drawing app and then it's going to draw on my face. It would be interesting to see you do an engineering sim build tech. Oh, that would be fun. Okay, we could absolutely do that. Absolutely. I can get like the second webcam up here and then you could see like my desk view and then we could uh do some maybe soldering or maybe just like little pins and things like that. Just a few pins. Yo, Lily loves snow. Good to see you. Welcome on back. Happy Friday. Can you stand up? I've never seen you uh stand up. I I mean, I'm gonna stand upish. Here we go. All right. Done. But I'm not going to show you below. Uh we're going to keep it workplace safe here. I've got pajama pants on. Uh let's see. Have you been in a deficit? Lose weight. 600 push-ups a week. You need to increase. Yes. Oh, yo, it did stop. One second. Console. It Oh, did it reload? It just cleared the entire screen. Oh, it's because there's too many. It's too It's It's too fast. That's why. It's the terminal. The terminal is updating. Yo, lots of the rust. There we go. No. Below the waist. Yep. I know. Exactly. Not going to happen. Uh, not going to happen. You got unsubed. Oh, Lily loves. Oh, no. Well, well, good to have you back. Also, sometimes I guess YouTube does that. I've heard about that happening, though. It's been like 5 years since I heard about that happening. You had to learn for personal reasons, Joe. Yeah, me too. Also interviews, you have uh your company, you have interest interviews. Yes. Yes. Yes. Yes. Uh let's see. Wait. Also interviews, you have poll with your company to interest interviews. I actually don't know what that means. I'm not sure. Buff Steven and meme Discord. All right. Memes. And where's our memes at? Here we go. Biff Steven. This it right there. Buff Steven. Okay. DTO at PubNub. Billions of devices connected over a billion devices connected on my network right now. >> Whoa, I need to bring my face back here. >> Look what interprets. >> Interpret matrix. >> I'll show you. >> Oh, whoa. >> You can barely see that >> from time ago. >> That's what computer programming arms look like. >> Oh, I remember this. You had a refollow on Twitch yesterday. Did you Joe? You have a KDP. I can send free bio link. What is KDP? >> Everything. We're >> Kyle. Thank you. Thank you for sharing that. Thank you, Kyle. Wait, you look bluff in your link pick. Do I really? Really? You think so? Uh, no. Well, maybe. I know. I don't know. See here. Where is this window at? Bring this back over here. There we go. All right. Cool. Crazy. Yeah. My two sisters is playing and playing slime. Lily loves snow. What is slime? What is slime? I don't know about that. The best thing about the stream is that you're so positive and excited to do what you do. Hey Ashe, thank you for saying yeah, it's a lot of fun. It's a lot of fun. You guys, what is KP? Bionic Blink asks set blueprint mu meal. I don't know what that is. What is that? What is that? What even is that? You just listened to the pubnub song this morning. You did. It cured depression. Isn't that great? Oh my goodness. Thank you. Hey, you know what? Shoe ham or a linen. Linen. Yes. Alenum. That is fantastic. Wait. I'll be back. All right. Sounds good. Lily loves snow. Can you add someone on Discord? Yeah. Like uh sure. Absolutely. It's better if you just uh try to add me though. I'm Steven LB I believe. Uh Steven LB on Discord I think. Maybe. I don't know what my user is. You'll find me. You'll find me. You'll know what I look like. All right. Add tracks. That's done. All right. Let me bring this out over here. All right. So, we need to get the user in there. And then we need to say uh user user. Here we go. D uh const say const user equals uh user tracks user ID. This should give me a reference to the item. And then I can say user.push uh push uh the message, I guess. I I suppose let's call this the the point. Maybe we'll call this the point. We could just call it the point, maybe. Uh I'm adding on Discord. Hey, not a fan. All right. Good to hear it. Uh it is an ebook blueprint. Oh, okay. Blink asset designed for people who nerve damage. Oh, where they can't blink, they have taped their eyes open. Really? I've not heard of that. That is pretty interesting. JavaScript today. Yeah, you know it. We're doing some JavaScript. That's right. Exactly. I'm going to change this up here really quick. I'm going to move it there so it's a little bit easier. Receive points. And then we got our data here. All right. Looking better. Let me make sure this still loads successfully. JavaScript today. What do you think of Ethiopians? I think they are uh we're all humans on the planet. What else do I don't know what to say about that. I I have no idea. What do you mean? I think Samuel, everyone is uh able to There's actually I've heard about this. All right. So, in uh a Africa right now, the nation uh the continent of Africa, there is a lot of growth and opportunity there right now. I've seen it. I've heard about it. There was several stories on my NPR. Hey, Chris, good to see you. Hello. Welcome on in. Good to have you here. Happy Friday. I just don't want to promote anything on myself, so I just called it KDP. Oh, mule. Well, you can do some self-promotion. Absolutely. Do you have advice for fresh graduates like me? It's really hard to find a job these days. Yes. All right. So, you have to use the trick. Are you ready? Kiyogu. Kyogu. If that's how you say your name, Kyogu. The trick for getting your first job is called the foot in the drawer. Foot in the door. It is a a subordinate role that is in the industry that you're looking to get into. So, it's not a programming role. It's a quality assurance. It could be tech support. It could be data cleaning, right? So, look for those kinds of roles. Try to get those roles. Uh, and if those roles aren't available, then try adjacent roles to those as much as you can. Yay. There we go. You have asthma now and you have a difficulty breathing. Oh, that's terrible. Nasa, let me tell Gemini what my real name is. All right, if you want. I think Gemini probably already knows. Gemini probably already knows your real name. They keep failing at making one due to the thermal heat problems. The design solves that, but think you definitely could advance it further. Playing around with the design. Absolutely. That sounds like a something that's always true. I think many of the cases that's always true. Thank you, sir Kiyoko. Absolutely. It is a trick. It does help. It doesn't guarantee a job. However, it makes it easier. It does. It gives you a better fighting chance. Someone knows my real name. Not a fan. I don't know. Oh, wait. My years at Aston Martin started a 3-week temp placement. Foot in the door for the win. Hey, there you go. See, Joe is proof. Joe's got proof for you right there. Joe's got a lot of proof. All right, you guys. Let's build this. Let's build this wonderful app here. Let's build it. All right. So, we got to push the message and then we need to slice it. Uh, how do we how do we update? I want to mutate in place the user slight. I want to mutate. So, where is this? Uh, user. Can we say that? I can't overwrite it though. I need to mutate it though. So, let's see here. Uh, Google for JavaScript mutate slice uh limit array 100 elements max. Good morning. A sa say a sane good to see you saying Satan welcome on back. Good to have you here. Happy Friday. Are you married Samuel Dubil? I am not married. Thank you for asking. So good morning my friend. My real name is my username. You my user YouTube name. Wait what do you mean? Go to channel. Let me check here you guys. It says fans NASA. Fans NASA. Oh NASA. Fans of NASA. Oh, fans of NASA. NASA fans. Oh, I've been calling you NASA fan, not NASA. National Aeronautics Space A something, right? What does NASA stand for? I don't know. Splice is what I want. I want splice array. That's splice. That's the That's what I'm wanting. Using array.length also truncates an item past the 100th element. I don't want to do that. Remove all the starting remove all items starting from index 100 to the end of the array. I don't know if I need splice. If length then splice it. Okay, splice 100. Okay, I this might be done on this. Okay, so this is what we want to do. Min min length 100. This is weird. Settings length directly is the fastest number of lengths. Okay, so I want to do this. Happy Friday, Saiyan Satan. Thank you. Just let me know. Uh, no. Look for Daki. Zaki. Oh, Zaki. Oh, got it. Okay. Use the technique known as know a guy. Hey, Nacho. No, a guy. There you go. That's the technique right there. You know a guy and you're good to go. Math min nums length. Uh, and then 100. So we say, okay, so I'm just going to do that. I'm just going to use this. All right, here we go. User length math men's n user.length 100. All right, truncate to 100 points only right there. Little bit of truncation. You guys just let me know. Oh, uh, the bionic blink assist build. Oh, hey. Bionic blink assist build parts list. Restoring natural eye movement and care. Beyond the blink. Living with the bionic ocular assistance is what is called for the book. Hey mule, good to know. Thank you for telling us the details. Just let me know if you ever want to mess around with it and I can send it to you. If you got a screen share or a screenshot or a photograph or something like that, send it on Discord. Yeah, send it on Discord. That would be great. What's your age? I am in my 40s. Deepo Bondi, I'm in my 40s. I'm old. You guys never a straight answer. Hey, Crunchy Biscuit. Only uh directional. Directional, right? Do Jim and I know your real name. It sure does. I told you. I told you it would. Somebody Oh, let's see. That sounds like a truncate the latest the the latest point instead of the Yes. See, Lynam, that's what I'm worried about. That's what I'm worried about. It's going to it's going to truncate all the futures. So, I don't want to do that. I want a different I want a Q. I want a push and then shift. So what I'm going to do is I'm going to do this differently. I'm going to say if uh if user.length and then we should so up here. So max line I'm going to set up max line con max line points. Wait, I got to do this different here. We got to do camelc case cuz it's JavaScript, right? We got to keep everything JavaScript. Camel case uh is 100. So max points, max track points. How about this? Max track points 100. And if it's bigger than the max track points, well, it says he's 42. That's pretty close. That's pretty close. NASA is that's what it stands for. It NASA stands for NASA National Aeronautics Space Agency, right? Is that what that is? Sounds like a truncate. Yes, Lynam. Thank you. How long have you been doing programming? I've been coding since 11. So that is over 30 years. I did the math on that. Over 30 years programming, you guys. My real name rare in USA. Zaki. Zaki. Yes. Hey, Cardinal. Good to see you. Welcome on in. Happy Friday. You never told anyone, but you unconfirmed, unsolicited, not scoped image generation in the Gemini made me turn off personal intelligence. There is the personal intelligence settings. That's right. Hey, Cardinal. Oh, it's good to have you here. If user.length is greater than the the what was it? Do we say uh max? I think it was called max. Yeah. So, say max reload max track points. Then I'm going to say user.shift. User.shift. Like that. All right. So, truncate only up to 100 points only. Like that. Right there. Keeping it easy. I think your age is 44. Hey, NASA fans. You're I'm going to say that you're close. I'm not going to say if you got it exactly. You might have. You never know. What's my first programming language? Uh see Kyu, it is C++. Welcome on in you guys. Good to have you here. Today we're building an HTML JavaScript CSS app that's going to allow you to draw on my face. And we're only getting started. We have a lot of work to do. Where is our next input at? There we go. Reload this. Looking good. Okay, happy about that. All right, and then let me remove. No, no, no. We'll keep that there for now. So, bring this back 100. Delete this. All right, so that'll truncate. And then we got our user point there. All right, user user turn truncate. Okay, looks good. National Aerionics and Space Administration. Oh, I was off. I thought it was agency. Oh, dang. Hey, BGX, thank you for subscribing and joining the right channel for software engineering. Welcome on in. Today we're building an HTML, CSS, and JavaScript app. That's going to be a drawing app. We're going to build the drawing app, you guys. Add user track. And then I need to create a render loop. Function uh render. So, we're going to have a render loop here. And then I need to go for next frame. I need to build I need to grab the next frame. Start with Gemini image generation. And then you get close to what you want. Go to chat GBT. It's a good approach. I'm with you there, Sergio. Yeah. You can do a fun things like Python where you do things like a subarray. Yeah, Python's got a really easy approach, right? So you can select the array and then you can use sub you can do slicing right here. So I can say 100, right? That'll give me what I'm looking for right there. Right there. Or maybe it's uh maybe it's a negative 100 like that. So that'll give me the last 100 elements. So then I can say like um my my array user equals user or something like that, right? That'll be a really nice approach that you can do that in Python. We could do that here too. I just would rather not. Yo, restart. Hello. Good to have you back. No, Google didn't kn know your age. Oh, Google knows my approximate age. You're nervous so much right now. It's insane. Hey, AW9. Why are you nervous? at a AW9 AW9. Why though? Why? Why nervous? Hey, Steven. Nice to see you again. Oh, wait. Maybe you already answered it. Uh, currently super busy. You had to rewrite an important part of the dissertation since your Kronos 2 uses. Hey, uh, that's right. Uh, the input engineered features instead of all 14. You're supposed to add all 14 in. You could subarrays slice negative 100. Yes, Lynam. Exactly. We could do that, too. We could do that, too. Sorry you're late. Hey, you're good. You're good to go. Hey, restart. You're fine. You're absolutely fine. Let me double check that I didn't make any errors. Okay, we're looking good. Okay, so I need to uh look up how to get the render loop. So, if I want to make a render loop, I need to get the next frame, right? I need to get the next frame. How do we do that? All right. So, uh get next next frame. So I can draw what do I want to draw a frame frame JavaScript uh render loop. What is that? There's like there's there's a way to do this. Uh I can do an interval. I could I don't want to do that. Request frame animation. There we go. This is what I want right here. Uh request the next frame to loop infinitely. M request animation frame. Where is this at? Is this it? Start the loop. Here we go. Okay. request the next frame indefinitely. Okay, so is this this is not recursion. This is function calling. Okay. Yo, helps enterprises. Good to see you. Welcome on in. Happy Friday. How are you, bro? I'm doing good. We're building an HTML CSS JavaScript app today that's going to be a drawing canvas app, a shared drawing canvas app that's going to let you draw my face. We're probably going to be able to draw my face starting maybe tomorrow or on Sunday. That's how long it's going to take us. Definitely need the Yeah, the slices cuz would only be the n minus 100. Hey linen, thank you for the Python. So, let's take a look at that real quick. So, Python. So, we're going to have an array here. 1 2 3. Let's do this. 1 2 3 and 4. And then if we do 3. Let's try that. It's only going to give us one of the elements. So, we have to put a colon in front. Nope. Maybe the colon at the end. There we go. Hey, like that. Hey, there you go. Yeah. So, we can say 100 here and it will give us everything up to 100, right? So, we could do just one. Get us the last one or the last two. Look at that right there. Thank you, Lenam. Basically have 14 securities and you need to construct the engineering features. Science jumps, the yang, the zang. Just realized that the current code uses only one security. Oh, so you got to get them to work with all of them. Was your cat project completed? It sure was. Hey, look at that. I left it up on screen for anyone who was interested to see if we could render the cat. We sure could. We did it, you guys. Basically, a set of engineering features, each security separate, then with one SQL database. Then you fed in the forecasting models right now at Starbucks. Oh, I guess this night would be tough. Hey, you know what? I you are on the right track, though. You've got all the components you need. You just need to add in the rest of the securities for your company, LT Sun. You founded it when you were 17. Yes, I sure did. And I was making profit. I was Can you show it live? Helps enterprises. Yeah, I could show that live really quick. One second. Did I still have it up here? Rust candle here. Cargo. Let me One second here. Uh, open this. All right. So, open out.png.png. There we go. Wait. Oh no, this is drawing my face. CD desktop. All right. Rust candle library. Open out.png. Here's the cat. Okay. So then we do a cargo run. Cargo run. There you go. And then see it starts off with noise, right? And then we load it again. This is a little more cat-like now. Yeah. A smidge more cat-like. There we go. That's what it is live. Right there. Here. I'll load it again. A little bit better. is the age matters when I make cooperative. What does that mean? Uh, what is coopertio? Is that like a business name? Yo, Raj, good to see you. Welcome on in. Happy Friday. Good to have you here. All right, let's see if we can get the cat loaded again. There we go. See, it's getting more and more cat-like. Well, I mean, it's basically good to go now, right? Cooperation. Uh, is age matters? Yeah, it does a little bit because it requires EQ and just communication style patterns, common understanding about working together and collaboration. Yay, W. Steven. Yeah, we did it. We did it. It took us a little bit of time and we got the cat eyes, too. Remember when it was just blurry? You couldn't even see it. The wind the way before time. The way before time, you guys. All right. So, I want to do the render. Here's the render loop. That's the render frame. So, I need to say request frame animation render. Is that it right there? Is that how that works? Is that a thing? Do you guys know right there? Is this a thing I got to do? Here we go. Right there. How much profit? How how much you profit at LT Sun? Uh, I was able to pay my bills. How about that? It didn't need a job. I didn't need a job. I paid my bills. After you're done complete, Raj, what do you mean? Uh, thank you for saying hi. After you're done complete. Oh, how long is it going to take? It'll take us probably two days. So, today and tomorrow is going to take and then we're going to get it working. Thanks for the motivation. Hey, absolutely, Dan. Uh, today also first stage assessment for the position at Saskuana. Wait, what is that? What's aana? Let's hope for the best at this point. Hey, hoping for the best. So, what is your youngest age to make cooperation? Uh, let me see. Uh, share the GitHub link, please. If you try to send a link, it won't show up on YouTube. YouTube blocks all links. My youngest age, probably 14, I would say that I actually did work. So, I actually had a job at 14. I was a cashier. I was So, you make LT son. You didn't work again. Uh, I did. I did. Yeah, I had jobs. I worked again. I did. See? Oh, hey Savon. Hey, Savon. Welcome on in. Good to see you. Stream only runs Monday through Thursday. Hey, we're every day now. Are you the founder of Auntu? Not of Auntu. Hey, how's it going there? Diverpur. Hey, Diverp. Good to see you. Happy Friday. We are building a HTML CSS JavaScript app. It's simple. Hey Savon, we're doing simple things today. It's going to be a drawing app. We're doing some drawing apps, you guys. We're going to draw the picture of whatever you want to draw on my face is what we're going to draw. You know, the founder of Iuntu in person. You do? No way. Young. Yeah. Been we've been professional. Simple enough. Yeah. Yep. Simple enough that you can understand. Absolutely. All right. Where are we at here? Let me bring my window up. You meant the CEO. Got it. Uh, yes. You know, Mark, you do. Wow. That's impressive. That is impressive. So, it's called request animation frame is what I want. Okay, let's bring this back over here. Request animation frame. Clear this out. Is that a thing? It sure is. All right. Request request animation frame. Render like that, right? Yeah. There we go. Looking good. Then we rerender it every time. Now we get the maximum frames per second without bursting it. Raj, I missed your message. What' you say, Raj? Oh yeah, I know. We suffered with my project link. Do you remember? Yeah, it won't show up. It won't show up. Are you the uh let's see uh if I missed your message, you guys just let me know. You worked in community contributor to Ubuntu. I remember Savon. I think you shared. SI is an American privately held trading and technology firm found in 1987. Oh, makes sense now. Yo, Mr. Dan's uh Dz. Thank you. Okay, Mr. Dz. Who's that? Nobody cares nowadays. It's all AI. The young internet. Yeah, I know, right? I know it's a thing. Share in Discord link. Oh, it's in Discord link. Yes, the GitHub link. Where'd you put it? Link. Share. Where's that at? I don't see it. General, maybe. Hey, Stephen. Did you check my website? Hey, Stephen. Hey. Uh, I did not. Are you on the Discord? You got to be on the Discord. Yo, Coder. Hey, Coder Himma. Hey, Coder Himmer. Thank you for subscribing and joining the right channel for software engineering. Today, we're building an HTML CSS JavaScript app that's going to let you draw in my face. We're going to try to make it work here, you guys. All right, there we go. Request frame, animation, render. All right. Now, we get our canvas and we're going to clear it and then we're going to update it. All right. So, render. We're going to get our context. Context. Render. We got our canvas. Do we have our canvas here? We do have our canvas. Where's that at? Where that at? Where that at? Canvas and context. Perfect. Perfect. All right. And then I need to say I'm actually kind of curious about this. Oh, uh CSS. All right. So, I want my What do you call that? the uh can the hashtag canvas is going to be a width and height of 100 uh I think right how do we do this how do we make it so it's perfectly aligned right so like this uh width is going to be 100 vertical width and height h ei ght I think that does the trick yeah we also need to say div canvas uh body and html has no padding or anything like That padding is zero. Margin zero. Like this. Like that. We got to make it good. We got to make it good, you guys. You think yesterday you didn't live on your profile for 19 minutes? I said, "Oh, I was late yesterday." I was I was late yesterday, you guys. I had a meeting in the morning. I had a meeting in the morning. So, I could not go I could not stream until later in the day. Interviews. Hey, work for until that's not impressive. Wait, wait. Uh, I'm telling to share the cat project LINK IN DISCORD. OH, RAJ. OKAY. At Raj. Ah, got it. Okay. Yes, I'll do that right now. Here we go. It is right here. It's not called a cat. It should be called cat. I probably should call it cat. All right. Link. Here we go. There you go. Raj. Raj for you. Hey, Mugafan. Welcome on in. Happy Friday, Mugafan. Good to have you here. You made it. Yo, Andrew. Hey, Andrew. Hello, welcome on in. Good to have you here. Happy Friday. Thanks, Joe. Very cool. Yo, sports Andrew. Hello. Hey, Raj. Thank you. Absolutely. Please tell, are you good at using AI? I am good at using AI. I am. I'm very good at it. Not only at using the Claude Code, C codeex, Gemini, Andy Gravity, you name it. Um, also good at making AI algorithm from scratch. Yo, hey, Coder Himma, thank you for not only subscribing, you gave us a hiding. Thank you for the hiding. My gratitude, too. You're wonderful. Good to have you here. You just came back from the the chillette. It's really good. We slimed in the pool and you enjoyed. Really good. All right. You swimmed in the pool is probably what you meant. Yeah. Yo, Dev Scope. What do you got over there? The Dev Scope. He's actually an AI wizard. Yay. There you go, Nacho. Thank you. the job interview and the disaster you went through. Collateral burnt you out. Collaterally it it burnt you out. A Savon that sounds rough. Also any advice on how to untangle the issue in the code. Uh I am more sure that Kronos repo that the cess pool of all the mistakes possible. Honestly, I don't know to resort how to fix it. So I need to see the code. I need to see where the problem was. And it's really more architectural, right? It's a web inspector. Oh, right. Hey, I remember this. Hey, this was I remember this. I saw that. This was fire at Rristar. That was cool. I saw it. I remember it. I remember it. What about tough one? Make an proper AI IDE at a level to complete against anti-gravity. Oh, hey Raj, you want to make a harness? Hey, you know who knows about harnesses more than anyone here in the channel today? It's RG I K5KW. That's Savon. Ask Savon at RG at you. Ask Ask them about harnesses. Savon knows because Savon made harnesses before they were a thing. Remember bed sheets? Yeah, I remember. For two hours or something. Hey, Mugafan. That's awesome. That's great to hear. And then you uh Wait, that didn't bring your PS4. Oh, you didn't. Oh, the PlayStation. You got to bring the PlayStation. Don't forget. And for some reason, in the house is full. We found some watermelon. Hey, there we go. Got that watermelon going, you guys. Looking good to me. Let's see if we can make some progress on our beautiful application here. Where's it at? Where's that at? Give me Nope. Nope. Not that. Not that I want. Please let me. There we go. That's what I'm looking for. Right there. All right. Watermelon is good. There you go. Community people building stuff in here. Yeah, that's what we're doing. There's so many people building technology in chat now, you guys. It's fantastic. Challenging you to make an IDE in live. Raj, we could we can make a TUI. We can make a terminal user interface that would be a harness that did software engineering. We could we certainly could. I'm with you on that for some reason. Okay. If I missed your chat, you guys let me know. I I a lot a lot threw by on the screen there. Yo, George. Hey, George. George, good to see you. Welcome on back. Happy Friday. Good to have you here. Hope you're popular soon. Hey, Lynam, thank you. Appreciate it. We're We're working on it. It's going to take a while. It's going to take a little while. We wrote a lot of code today, though. We go over a lot of code. So, let's try to reload this. Yeah. Look at that. How do you set the fill? How do you set context do fill equals uh let's see red green blue RGB. Let's do 00 0. Can we do that? I think we can. I think that might work. I don't know. No. Background fill. So background fill. Is that right? BG fill. No. Okay. Uh we're going to figure it out though. We're going to figure it out. Also, I'm curious to see if it's actually rendering. So it's console.log uh render. Double check that actually it's rendering. See? Yep, it's rendering. It's rendering. I see it. Render plus math.random. Om. So you can see it. I'm going to make it so you guys can see it, too. There you go. Render. It's occurring. There it goes. At 20 in 2025, make a small rocket. Wait, what do you mean? Uh, use TypeScript for with JJ JS for more efficient. It's not more efficient. It's less efficient. You might think it's more. It is actually less efficient cuz it's all through uh transpolation. It's not more efficient. You You want to use native You want to use native JavaScript. Most random thing you found was a Chile. I Well, I don't even What is Oh, that's a house, right? We learned that yesterday. I did the water spill thing. Yeah. And we did bring some candies. A All right. Good to hear it. I think I sent the repo in GitHub section in Discord. Yes, I remember. Oh, you did. I remember. You can res resend it, too. Feel free to resend. Less? What do you mean less? C is most efficient. C is the most efficient. Yes, absolutely. You're still working on teaching machine learning how to help. Hey. All right, Sergio. Good to hear it. Yo, Richard Rtherick, good to see you. Welcome on back. Happy Friday. Don't forget to drink water, you guys. There you go. Yes. Uh Raj I definitely saw isn't just like anti-gravity or claude code just just not terminal multiple agents switching and tokens. Yes. So it's actually not that hard. It just means that you have to build a loop that is a series of function calls and tool use. Basically you have to have the model evaluate itself. It's actually not that hard. It's not that hard. It's pretty straightforward. Context up. Phil style. Hey. Hey. Thank you. Let's try fill style. Hey. Thank you. Phil style. There we go. A is going to be dark back. Oh, nope. That didn't work. Why didn't that work? That should have worked. Yo, why is that not working? Oh, maybe because I'm not clear. Clear. So, I have to I have to like um It's actually clearing it. It's actually clearing it. It's not going to set the background. It's not going to set the background there. Is that JavaScript? It sure is. CS, you got it. Definitely JavaScript. If anyone wants to study harnesses in the future, Savon is the one. Deep Sea Carness, the one with the plugins. Wait, I heard lately somebody makes Script Cy and it turns JavaScript into a native binary. Super fast and resource optimized. Yes, Linen, we could do some script C. It's not production ready and it doesn't. It works in Wom in your browser. That actually is a good stream idea. Hey you guys, let's add that to our stream idea real quick. All right. Stream ideas. We're going to build with script C. Script C. Type script compile. Test. That's what we got to do. Some JavaScript there. Yo. Hey, Code. Herman. Uh, Coder Hemma, thank you very much for the gold coin. My gratitude to you. Thank you. Thank you very much. You're wonderful. Uh, there post. There it goes. All right. Use script C compiler to compile. Type script to binary wom. Yeah, some wom you guys right there. Make it looking good. I want this to be other post. Boom. Done. Idea added. Toasty like Mortal Kombat. Hey Muga Mugaf fan. I remember that Mortal Kombat Toasty resend and pinged. I hope I won't disturb. Yes. Uh, let's see. My heart is running right now. It's insane. Is it? Did you drink a lot of coffee? Are we building a web page today? Yes, we are. We Yeah, we are exploring technology now. Let's go. Hey, Lynam. Yes, Discord was giving you a hard time characteristic count. Let's see. Notification for Discord. Yes. Uh, fill rectangle. There we go. Now, Yay. Hey, thank you, Kyoga. All right. Let's grab that here. All right. Click, click, click. All right. Then we All right. Perfect. Save. Save. Save. Let's see if it makes the make the screen dark. The screen should be dark now, you guys. Here we go. Hey, there we go. Thank you very much. Yo, it's uh very interesting. See? Reload. Reload. Why is it not going 100 on that? That's weird. That's weird. Very weird. Okay, so the canvas should have been this, but it's not. I don't know why it's doing that. Width and height. Oh, vertical height. There we go. Now full screen dark. There we go. Kyoga. Yeah, thank you. We should play a little bit of Mortal Kombat. Hey, there we go. Don't forget to like the stream. Hey Joe, thank you for mentioning Raj, I missed your message. Thank you for mentioning. All right, so Raj, let's see here. What' you say? Can you make some day in live? What? Oh, sure. All right. So, let's also add that as a stream idea. So, make our own harness is what you're saying. All right. New post. All right. Make a coding harness from scratch. This will be AI oriented. Probably do Python. All right. So, build an AI code agent that writes code for you. We can make that right there. We know how to build that. We've done that before. You guys, wait. It can't be that '8s all over again. It is. It is the '8s all over again. It is. I know it's crazy. There you go, you guys. Do you use the modulus sign? Yes, I love the modulus. Mod mod is great. Mod is great. Proper AI IDE like anti-gravity or maybe better. Uh, we're going to be use I don't want to build an IDE. I I I mean, to build a user interface is really boring. It's so boring, actually. Wait, what if we built one in JavaScript? No, we can't do that because we need to save the files. I suppose we could, though. What if we build a web app? A web app harness. It'd be the first of its kind. You wouldn't need to download anything. You could code right there. What if we built that right there in the web browser? Wouldn't that be amazing? We could do it. What do you think? What do you think? I think that would be pretty great. I missed your message. Uh, you said I missed your message. I did. Let's see. Mugapan, you missed a message. Okay, Mugapan, you should play a little bit of Mortal Kombat. I saw it. I read them all. Uh, that's a great idea. All right, you like that one? Okay, so let's bring that back up over here. All right, so we should build in browser harness, right? Because uh no one else has done that yet. Absolute whammy. There we go. It's going to be online tui. There you go. Online tui. Super amazing. We've got the boats, you guys. We got the boats. Here we go. Making our way, you guys. All right. See your favorite AI harness. Which is it? Which is it? Uh, Codeex Claude. Probably add some cursor or anti-gravity/ other slash other. What's your favorite harness? I put a pro. I put a a poll in there. You'll make PubNub at 2010, right? You became CTO. Yep. Uh at 2026. Since the beginning. I started the company, you guys. I started the company with Todd Green. So, I am the co-founder and CTO. That means that I started the company as CTO. That's how you become CTO. You just create your own business and give yourself the title CTO. Boom. CTO. Easy. See, you mean live website? Yes. Exactly. Raj. Yes, Raj. Yes. Yes. Exactly. Exactly. You know it. I'm with you on that. Okay. So, you guys, I had a lot of fun. Let me commit this code here. Let me commit this code. Let's see. Get status. Get uh rm w. We don't need that file. Get status. Get add. Get commit. And then we're going to say uh canvas. We got our canvas. Canvas ready to receive events r e i eve v e events. There we go. Push domain or or extension. No, just a regular web page. You don't even need an extension. We could make an extension. That would actually be pretty cool. We could do that, too. Any gemini just give you so much tokens you mess around with. Hey, Len. Nice. Good to hear it. All right, you guys. Thank you so much for joining today. I do have to go. It seems like anti-gravity and others are more common. It's like free buff maybe in there. Thank you so much for joining today. I will be back tomorrow. We're going to spend more time on our Canvas app here. We're going to draw and you'll be able to draw on my face. It's going to be great. Bye, guys. You're leaving. I got to go. I have business to attend to. And didn't you just see right here? I'm CTO at PubNub. I've got to do stuff. I got to do stuff. You guys got to take care of things. And on Twitch, we'll try to do a raid. We'll try to do a raid on Twitch. You guys, uh, what already? I know. Hey, you got here late. You got here late. You're let's see. Yeah, got to be productive. You got it, Nacho. You got it. Web apps are fast and good. Yeah, you are. There we are. Have a nice day, Stephen. And I'll see you guys soon. Thank you so much for joining everyone. See you guys tomorrow. Bye, everybody. Try to make a good luck. Yo, try it out. Make it that. Good luck. Good luck, you guys. All right, sounds good. Wow. Teach us make it live and also make it open source. We will do nuts fence. Bye, guys. See you guys. Thank you so much, Stephen. Thank you, Joe Kiu. Kiyogu, thank you. Not a fan of Len, good to have you guys. Mule, good to see you as well. Bye, guys. Restar, why masle? Hey, I know, right? Don't worry, we'll be back tomorrow. 8:00 a.m. Around 8:00 a.m. Raid someone who speaks English this time. Okay. Hey, Joe. Yeah, we did Russian last time, right? Okay, we will. Bye, everybody. See you tomorrow.
Original Description
Building an HTML app that lets you draw on my face live on stream. JavaScript and PubNub will be used to enable live shared drawing on an HTML canvas
More on: AI Pair Programming
View skill →Related Reads
📰
📰
📰
📰
Why I Decided to Stop Using Claude Code
Dev.to · Leon Martin
AI Writes Code. Software Engineering Isn’t Coding.
Medium · Programming
I Vibe-Coded a Polymarket Tennis Market Watcher With One Prompt in Claude Code
Dev.to AI
Goodbye to Manual Code Review: The Vibe Coding Experiment Behind TenCirPauli
Dev.to AI
🎓
Tutor Explanation
DeepCamp AI