[00:00] Assume Google will be training on whatever code and whatever's on your screen, so please be careful. But with that being said, click Stream Real-Time. We're going to select Text Output instead of Audio since we don't want it speaking code snippets, and we'll give it instructions of, I am creating a video tutorial so ignore anything I say that doesn't sound like I'm speaking directly to you. We are working on a standard Next.js and Tailwind project with TypeScript and your goal is to provide code snippets that I can copy and paste into my project and we'll review the changes after each code snippet provided. I always prefer creating new files and whenever creating a new file give me the terminal command to create that file.
[00:38] We want each file to be limited to about a hundred lines of code or less so that everyone can see what's going on on screen. We'll paste this in, collapse this, collapse this, collapse this, and we'll select a screen, an entire screen, and this screen, and share it. Then we're going to start dictating right away and it's already capturing my screen. So we'll say our goal is to recreate egghead.io into our demo project here and here's where we're going to copy and paste our code. So the first thing I'd like you to do is to create the layout of the entire project or layout of the entire page with the background colors, with the font setup, and everything so that as we create the components they'll fit right in.
[01:23] I can go ahead and show you some computed properties of various things on the page so you can get a better idea of what's going on. Let's start with the body and kind of click around a bit just so you have a better idea of what's happening on the page. All right it's already providing some code for me so let's start applying it. So it's going to create a layout file, copy and paste this command, and then we'll copy and paste this content. I'm going to command click here, paste, and then go into our page TSX.
[01:54] And now it's asking me to modify page TSX. I'm going to move this up to the right hand corner. Alright please print out the entirety of PageTSX for me to copy and paste just with the layout. So copy this, paste it, and then go over here and see where we're at. And okay let's start working on the header.
[02:13] Let's have our own header component and hero component. So this is separated well, but start with the header and create the header component and make sure that everything in the header is lined up appropriately so that things are on the left and things on the right. And I can go ahead and click on this for you to show you some of the properties of the header. Dig in a little bit. So maybe, I don't know if you can read the widths here, actually let me know if you can read the widths and we'll go from there.
[02:43] All right so I'm going to copy this command, paste it, we'll go to our header component. I'm ready for the header component code, please print it out. Copy, paste, and let's go back to our page TSX. Please update page TSX to use the header component. So I'm going to copy this and then paste it into our page TSX and that looks like it's at least working.
[03:06] The placement and some things are missing as far as topics and courses and whatnot. So go ahead and please fix the header component to have everything required. And from here on out I'm going to refer to you as Gemini. So if I say Gemini and give you a command please stop listening to me and start fulfilling what I'm asking for. Because you seem to be waiting around a lot.
[03:30] So Gemini please create the new header component based on what we need from the header here to match up with this header. So copy and paste this and check on it. Looks like we're doing a little bit better but Gemini please look at how this is formatted with things far on the right, things far on the left, and we'll inspect this for you. So if you can read how wide this is and basically look at what's going on in here. I don't know how quickly you can read this, but Gemini please recreate the header with the appropriate fonts and everything and give me the code that I can copy and paste into my header TSX.
[04:15] I'm going to copy this and paste it in and hopefully it looks a bit better. Let's compare. So what we have here is a header and you can see our nav section and the measurements and everything, which is way off from the measurements here. I don't want to get into too much detail because you're supposed to understand what's going on. And dig in, there's something going on here that allows all of this to be on the far left and all of this to be on the far right, whereas your current version is constrained to just the middle.
[04:51] So please fix that. Gemini, please fix the spacing of the header. Alright so I copied and pasted everything in there but the layout's still incorrect. Just for now, this seems to be getting slower and slower. I'm editing out how slow it's getting, but it started out super fast and as I'm going things are definitely slowing down.
[05:13] And it doesn't give me any indication of when it's thinking or when it's stopped recording my screen to take the next step. So my frustration is growing trying to figure out like there's not feedback in those aspects, nor that I can see on the UI. But with that being said let's just try and fill out the rest of the site. Please go ahead and create the next couple of sections here. So Command-Shift-C will open this, let me select this.
[05:39] So create this section here. I'll just highlight it and create a component for that so that it'll fit nicely underneath our hero section. Gemini, please do that. All right, so it looks like we ended on a something went wrong. This has happened the past couple of times I've tried.
[05:54] So we made it decently far based on this experiment. I'll keep digging in and seeing how far I can push this. I don't know if the dev tools are actually useful for what it's trying to do due to the font size constraints or if it's confusing it. And as much as I'd love for this to actually work well I'm feeling like you would get better results by having a process where you can quickly take screenshots, then dictate, then wait, then get a result, then take a screenshot and dictate and wait, rather than relying on the stream to try and figure out when you've stopped talking. But, this just released yesterday, the fact that it's slowing down and other issues are here, I imagine all that will get fixed over time and I am extremely excited about these possibilities.
