andy lapteff 0:16

The network engineer's role is changing as fast as the job market. A1 Labs is how you keep up. Hands-on labs with new technologies built for engineers who can't afford to fall behind. Show up, suit up, and level up in A1 Labs. Welcome to the Art of Network Engineering podcast. My name is Andy Labtef, and returning our favorite automation AI LLM guru, John Capabianco. How are you doing, buddy?

SPEAKER_01 0:44

Man, it's so good to be here in Munich with you. I was the first smiley face when you got out of your taxi here. My bags have arrived, so I have a fresh set of clothes after four days. Was it four days without uh I was wearing the same Cisco? I was wearing my Vibops shirt. It was a cool shirt to be stopped. Cool shirt, wandering around in the streets of Munich explaining to random people what Vibops is. What is the Vibops? Yeah.

andy lapteff 1:05

Just for the audience, I get out of my car after a very long trip. I didn't sleep on, blah, blah, blah. And as soon as I get out of the car, I hear your giggle. I look over John Center having a coffee set. I'm like, what a great introduction to getting here was you know, my friend giggling, saying hi, and come on over. So all right, so it's great to have you back. We're gonna do some cool stuff. I have heard of spec-driven development. I can't say I know what it is. I thought it was applying software development practices to what I've been doing, which is like coding in LLMs. Yeah.

SPEAKER_01 1:35

Is that kind of like it's like Vibe ops matured with some practices around it, right? So this was introduced to me. Well, it's been introduced maybe eight months ago from Microsoft and GitHub. And what we're looking at here is the spec kit, which we're gonna incorporate into Claude Code. So, spec driven development, you may have heard of test-driven development, which which kind of came out of the agile framework and the you know early DevOps days where you started writing small tests that failed, and then you adjusted as little code as possible to make it pass. This is an approach, and you're gonna see that build high-quality software faster, right? Instead of vibe coding every piece from scratch. Now, I'm gonna be up front. There's a lot more foreplay here, there's a lot more patience involved, and it takes about 40, 30 to 40 minutes to get through a project. But what I thought, Andy, was let's build a network-centric video game, right? And we can decide on what network thing we do, maybe quality of service or maybe subnitting. Let's do a subnetting video game.

andy lapteff 2:33

My first thought was we'll work a maintenance window. And if we break anything, like we fall into a pit of lava. You die if you break something in a maintenance window, but we'll we'll keep it simple.

SPEAKER_01 2:44

So um, we're gonna scroll down a little bit and take a look at what is spec driven development. We can keep going. So this is might be, you know, it might be interesting to read. Uh, SDD flips the script on traditional software development. For decades, code has been king where specifications were just scaffolding. We built and discarded once the real work of coding began. SDD changes this where the specifications become executable. Now let's take a step back. This is networking. This is the art of network engineering. What do you do for a network change? You gather requirements, right? You come up with maybe an implementation plan, maybe a test plan, maybe a rollback plan, maybe a success criteria plan. It's very close to what network engineers are already doing in their day-to-day job, right? We might not say specifications, we might call them requirements, but the business comes down with some requirements. We turn that into an architecture, we turn that into a high-level design, a low-level design. It mirrors that in a way.

andy lapteff 3:39

So that's what a spec specs are. This is the thing we need, and this is the plan to get there. Exactly.

SPEAKER_01 3:45

So, first thing we need to do is install the spec kit, install the specify CLI. So let's copy that first line of code here, the UV line. So we're gonna copy that, yeah, and then paste it in. And if this hopefully this doesn't give us any problems. Oh, hang on. See that XYZ? Just press the up arrow and delete the XYZ V XYZ thing. Yeah, yeah. Uh back to the at sign. Go back one more. One more. Yeah, try that. And that should grab the latest version. Okay, cool. So it's gonna install the spec kit. Now, what's neat, Andy, is you you've started to get the hang of git. So this will naturally get track our specs. So today we're probably going to have one specification, but let's say we wanted to improve it with a second specification. This will actually make a branch and track all of it for you.

andy lapteff 4:35

Question Is the specification to make the game?

SPEAKER_01 4:37

Yes. Is that okay? Yeah, yeah. Okay, so it's installed. Specify. So the C over here initialize a project.

SPEAKER_04 4:44

Yep.

SPEAKER_01 4:45

I would copy uh the first line there. Oh, gotcha. And instead of copilot for integration, we're gonna choose Claude. Okay. So we're gonna paste that in and change it from copilot to Claude. Good. Yep. Okay, cool. So we're gonna press enter and use the shell. You could choose PowerShell, but let's just use bash and see the next steps. So just see here. So go into your project folder. We're already in the project folder. If you click the little double files here, Andy.

andy lapteff 5:14

Are we done with this over here? No, not yet.

SPEAKER_01 5:16

Not yet. We're gonna follow that the whole time. So double click on the little files. See how we have a my project. And if you expand that, we have the Claud and Specify. So let's C D into my project here in the terminal. And we it's called My Project because we pasted in My Project. So we'll just roll with it. All right, so let's go back into the Git guide. Now, the very first thing we're gonna build, if you scroll down, is the constitution. Oh so establishing project principles. Now, I don't have a constitution where I live, right? We have a constitutional monarchy, but you have an American constitution. Honestly, if you're an American, use this to frame your constitution. These are guardrails, these are security principles, code quality, testing. Now, you know what I like to do, Andy? I like to use Claude Desktop to write my constitution. So you're gonna copy this line, go into Claude Desktop. Can I go in there? Yeah, and say I'm using the SDD to build a video game related to computer networking subnetting or whatever. I know, and you're if there's a lot of pressure because everyone's watching. For for computer networking. Simulate computer networking.

andy lapteff 6:25

I don't know. Is that bad?

SPEAKER_01 6:26

Um, let's be specific. Let's say a video game to uh uh to help people to help educate people about subnetting. Don't worry about the typos, it'll figure it out about uh people about subnetting. About subnetting. I would like you to help me build a constitution. Here is an example of a constitution, and then paste in the example that we just copied. Yeah, and then send that off. Hit send. Now, this is gonna take a couple seconds to generate the constitution, and then we're actually gonna start to build this video game. And and while we're doing this, let's take a look at the next step. So the next step, you're gonna use slash spec kit.specify to describe what you want to build. Focus on the what and the why, not things like I want it to be in Python or I want it to be in JavaScript or whatever. So we're just gonna take a second here and we can see that it's churning here. Let me grab the actual spec kit constitution template and it's gonna give us a spec kit constitution. Now, Andy, let's go back to VS Code and let's collapse the Claude folder and the specify folder. And what I would do is right-click on my project and say new file and call this constitution.md. This is John's own personal way of doing it. I like to keep my constitution and my spec and my plan as artifacts in the Git repo so that other people can see the exact code I use to build the video game. So in Claude Desktop, once we get the answer, yeah, we're gonna give this a little bit of time. This is gonna churn for a bit. We'll put that in the constitution. We're gonna put it in the constitution. And then down here, Andy, if you so let's launch Claude Code now. Uh uh down at the bottom in the terminal. Just type in um Claude Code. Why is everything in Markdown? Is that just like a machine readable? It's a mix between machine readable and human readable. Right. Yeah. It's and it allows for things like tables and bold and things like that.

andy lapteff 8:18

Like for instructions and and LLMs, people use markdown to give it away. And you're not gonna believe this.

SPEAKER_01 8:23

We're going to get a bunch of artifacts in Markdown through this process. So let's just go ahead and set up the Andy. Just this is a fresh install of Claude code. So press enter. Do you have a key? Uh I have a subscription. Yeah, so do subscription. Okay, good. That worked. You're already logged in. What's an artifact? You said that it's gonna create artifacts. Yeah, we're gonna get a bunch of different markdown files and stuff and folders and everything. Okay, so if you press enter to continue, uh sure, recommended settings. Yes, I trust this folder. Okay, so now if you do slash spec or specify, see how we have all these uh spec kit, spec kit constitution, those are the commands we're gonna use. All right, so let's go see if we got a constitution yet from Claude Desktop. So I would just hit copy, but if you want to kind of check out some of this to get a sense of a lot, yeah, it's pretty big, but there's sort of core principles, correctness before everything else, and it talks about subnet math, and it talks about RFCs. And honestly, like you can read it or edit it, but I just hit copy and code quality, testing standards. I guess that's the magic of LLMs. Like, how did it do all this? Magic. So we gave it a template of an existing constitution, and based on our idea of a video game for Cedar or for subnetting, this is the constitution. So it went out and researched subnetting and plugged it in. And made it a constitution for our game. So you're gonna hit copy in the top corner there, and let's paste this into our constitution.md file. Can I just right-click that and paste or uh no, just drag this down a little bit so we can see the inside of the file. We're trying to get into here, right? Yeah, so then paste it in. There we go. That's what we want. So just paste. So just paste and save. Uh that what is that? Command S. Yeah, I think. Got my little dot there, good. And then let's go back to the GitHub. I want to make sure we get the command right. You should be able to do slash spec kit dot constitution.

andy lapteff 10:13

So don't grab this whole thing.

SPEAKER_01 10:15

No, no, scroll up a little bit. Yeah, so even if you just want to type in finish this spec kit dot dot constitution. Is it not highlighting that for you?

andy lapteff 10:26

Can I just scroll down and I screw your upgrade?

SPEAKER_01 10:28

You can try to type it in. So type spec kit dash constitution.

andy lapteff 10:31

What is it?

SPEAKER_01 10:32

Dash constitution. And you should be able to tab that out, maybe. And now say the constitution can be found in the constitution.md file.

andy lapteff 10:42

So I'm gonna write this out.

SPEAKER_01 10:43

Yeah, the constitution can be found in the local constitution.md file. Please build me a constitution for this video game. I know constitution md file.

andy lapteff 10:53

And then and then say you just got to the limits of my working memory.

SPEAKER_01 10:56

And then say, build me a constitution for this video game. So I have a question.

andy lapteff 11:00

Yeah, and then so we had it build us a constitution. Yeah.

SPEAKER_01 11:04

And now this is going to implement. See, I'm going to explore the project structure. I'm reading the relevant file. So this is the second constitution that we're creating or no? So three of the steps in the spec kit, Andy, constitution, specification, and planning require a prompt with it. So we use Claude Desktop to help generate the prompt that now Claude Code is using to build the constitution. So we have to be a little patient here. And through editing, the magic of editing, this might be a lot shorter. But these each of these steps is going to take a bit of churn. It's reading the source constitution file the user mentioned, the existing memory constitution, and the template. So now it's going to take that markdown file we had and apply a template to it. So it has everything it needs. The repo is already a get repo and with an initial commit, no action needed. Let me check the dependent templates for alignment before writing. And now it's going to go ahead and write the constitution. And this is super dry and boring. I know it doesn't seem very exciting, but once we get through these steps, the very last stepslash implement generates the code. So all we're doing here is building up. I don't think this is boring.

andy lapteff 12:14

What happens for me sometimes is I get lost in the steps. Yes. Like we created a constitution, but we didn't. We created a prompt for a constitution. Then we put it in our markdown, and then we told it to create a constitution based on the constitution and the markdown.

SPEAKER_01 12:27

There's a lot of recursion there.

andy lapteff 12:33

And kind of where I get lost in coding sometimes. And I guess recursion is the word for it. Like, you know, I did a markdown or I did a thing, and now I'm doing another thing. So I'm just saying out loud where I get lost.

SPEAKER_01 12:43

So it's asking here, do we want to overwrite?

andy lapteff 12:47

I would say yes to that. I just say yes to that.

SPEAKER_01 12:49

I don't know if that's good development or not. No, no, I would say yes to that.

andy lapteff 12:53

I wish I could make the yeses go away and just make it do whatever it wants.

SPEAKER_01 12:55

So constitution ratified, version 1.0. Here's the five core principles. Here's the dependent templates. Do you want me to run spec kit to commit the constitution now? Yeah, you can say commit it. That would be fine. Can I tab or do I gotta write it? You could tab that, I think. Yep, commit it. So now that constitution is part of this Git repository. You just say yes to this. Yes, and don't ask, I say. Yeah. So now let's go while this is churning. Let's generate our spec. So you see how this one here says the specifications build an application to help me organize my photos. And it's gonna say blah, blah, blah. So copy that line here. Yeah. And let's go back to Claude. Yeah, let's say yes to this thing. Aren't we already in Claude Desktop? Okay, next steps when you're ready. This is Claude Code. We want to go back to Claude Desktop. And now we're gonna say thank you. Oh. Here is an example of a specification. I love that you're thanking. I always thank. I know I can't help myself.

andy lapteff 13:53

I've never thanked. Listen, when they take over the world and the robots come, they're gonna be nice to you. They're gonna make me part of the governing human council.

SPEAKER_01 14:02

They'll keep me in the zoo with the other handful of humans. So thank you. Uh next, I need uh the specification for this video game. Here's an example spec. And then paste in what I grab. Now again, that's gonna churn a little bit. So I would close the X in the top corner here because we're all done with the constitution.

andy lapteff 14:26

So what do we just ask for?

SPEAKER_01 14:27

We ask so if you look at the GitHub steps, the very first step is to generate your constitution, your high-level guardrails. Then very next thing is the specify, which is what we're doing now, is the actual spec. So if you go back into VS Code, I would make a new file called spec.md. In the project, yeah. Is that the right place? Doing your markdowns. Yep. Now, if we go back to the process, Andy, after the spec, our next step is a plan. So a command to provide your tech stack and architectural choices. So if I want this to be a Python game, if I want it to be a based in a web browser game, our different architectural choices. But if you scroll up a little bit, there's an undocumented step we're going to do called clarify. So after we have our spec and our constitution, we can actually ask the LLM is there anything you need to clarify so far? Like, is everything clear to you, or do you have any questions to me, the human developer? That seems pretty amazing. It's really neat. And it'll ask you up to five questions like, okay, you didn't tell me whether or not this should be Python or JavaScript. Which framework would you like to use? That kind of interrogation.

andy lapteff 16:37

I have another question. The software that I've been developing in Cloud Code, I haven't been doing this. Should this be my new way forward for things I build?

SPEAKER_01 16:46

So I mean, me personally, I would say yes.

andy lapteff 16:49

Like this is more structured than what I've been doing. This seems better because I'm I'm following a coding framework.

SPEAKER_01 16:55

Well, and just wait until we get to some of the markdown that this is going to generate. It generates user stories, Andy, with functional requirements. And it's like it's a real software development thing.

andy lapteff 17:06

And this uh following a real software development thing will give us better code, better results, right?

SPEAKER_01 17:13

It's not just and the spec matches your intent always matches the code. We're very clear.

andy lapteff 17:20

Like our intent is very clear because of this.

SPEAKER_01 17:22

Right. And when we're done this exercise, other people who want to know how we built this video game can read the specs and the and the artifacts that we generate, right? So let's say the website you just made, like you don't have to start a project as spec driven, but you could finish it as spec driven.

andy lapteff 17:38

Well, what I've done is I ask Claude for a spec for something. Right. But that's it. Then I just say, okay, let's use a prompt I don't know if it's a spec or a prompt. Yeah, but you're pretty close. Yeah, you've created specs and it's marked down, right? Most of the time. This is like the problem. Like maybe I think I'd have to look. But I I'm like, yes, let's create a specification and then I feed that in and like, okay, let's build this, but I'm not following this framework. Right. I'm basically just giving whatever spec it created to itself again. Okay. All right, let's go do that. Pretty close. But this is better.

SPEAKER_01 18:09

It's a little more formal. Yeah. Okay, so here we go. I pulled the current spec template. One judgment call I had to make your prompt doesn't pin down the core gameplay loop. That's fine. So it's going to make a game that's a typing tutor like Duolingo, but for subnetting. Duolingo for subnetting sounds pretty kick-ass to me. Sounds really good. Yeah.

andy lapteff 18:29

The fact that we're going to open source this thing and people are going to steal it and make a million dollars makes me crazy. John, you and William and your open source nonsense.

SPEAKER_01 18:38

I'm kidding. It sounds really cool. Hey, it's not my code, it's our code. I'm a dot communist.

andy lapteff 18:45

Once you said Duolingo for subnetting, I'm like, oh my God, we could get rich. Why are we doing this publicly?

SPEAKER_01 18:50

Hey, you never know. You never know. You know, we actually, you know what we could do? We could build a service, a professional services layer on top of it. And the code is free, but the professional services cost.

andy lapteff 19:00

And I'm half joking, I had such a hard time learning subnetting. If this were useful and helpful to folks, right?

SPEAKER_01 19:05

Great. I know. So here we go. We have the spec, review and acceptance checklist, open questions to resolve. And see how it says use clarify?

SPEAKER_03 19:14

Yeah.

SPEAKER_01 19:15

So these are the things that's going to clarify. So what I would do is copy this, or actually just hit copy in the top corner. Okay. And then we're going to paste this into the spec file. Yeah. Spec.md and save it. And then we're going to do the same thing. So down here we're going to do slash spec or style slash spec kit dash specify. And you can tab that out and say this the specs are in the spec.md file for this video game, let's say. Okay, enter. And let's just okay. I'll start by handling pre-execution hooks, locating the spec source file. Let me read the spec file and the spec template. So and do you see this dot specify? If you expand that, all it is is a bunch of templates. See, there's a constitution template, a spec template, a plan template. It's those are markdown files. Over here, let's hit yes. We didn't, we're not in YOLO mode, so we have to answer all this. Yeah, go down and just say yes and don't ask again. So this is the specification, which is like a requirements for our video game, the specs that we want to guide the game. So we did the constitution first. This is the high-level guardrails. This is a little lower down. Yeah, just say yes and don't ask again. There's a way to do that where you say dangerously skip permissions or whatever. We should maybe we should have done that. Can I do that now or is it too late? Uh well, it's not too late. We would have to break out of Claude though. Here's what I want to show you. So if you collapse specify, this is when it starts to get real exciting, Nandy. Notice there's a new folder called specs. Expand that. Notice how it's 001 and it's called subnetting game. And you see how Git has changed us into a new branch called subnetting game? How do I know that? Because of this here. So it's handling all the version and source control for us. So what did it branch? We were in the main branch of Git, and it actually made a sub-branch.

andy lapteff 21:03

But there was nothing there yet?

SPEAKER_01 21:04

There was nothing there yet.

andy lapteff 21:05

So it branched nothing.

SPEAKER_01 21:06

And now it's right. It branched nothing to track our work inside of this Git branch.

andy lapteff 21:12

I thought you branched like the master, which was the yes. So we were in main, but there was nothing there, nothing in main.

SPEAKER_01 21:18

But it's fine. It's fine. It doesn't matter. No, it just wants to track all the work for this very specific spec under this very specific branch. Okay. So let's say we we said we wanted to add quality of service to this game.

andy lapteff 21:31

This is version control for the spec.

SPEAKER_01 21:33

Version control for the spec. Branching code remote. Not yet. Okay. But when we get the code generated, it will be in this branch. Okay. Thank you for bearing with me. Check this out. Click on the spec.md, not our spec.md, but this spec.md. Yep. And it's just a template right now. See how feature name and right? So it's just a template. Cloak's going to um populate that or answer these. Let me write the spec. So yes, it's going to change this whole markdown file to have all of our specifications for the game as soon as it's done uh churning here. How long would this have taken? Oh, by hand? Yes. Huh. Yeah. I mean insane. We would still be planning the game. Like we are planning the game right now, but you know, like to actually write a video game, like I mean, it might take you weeks to months to years, depending on your proficiency as a coder, right?

andy lapteff 22:25

Now you were a computer software major, right? Yeah. The quality of code that this generates, is it good?

SPEAKER_01 22:34

It's good, it works, it runs. Right. I feel like we've entered another introduced a layer of abstraction. Do you really need to read the code as a networker? Like if the game works. Do you know what I mean? Like when I pip when I pip install a package for Python.

andy lapteff 22:48

Well, there's a punch down thing that happens. Like, well, you don't understand what you're doing. That's the thing that I'm playing with in my head. Right. Well, I don't, but if it works, I mean, I guess there's security and vulnerabilities, but then there's a security thing that you can install that like looks for bones, which I've been doing.

SPEAKER_01 23:03

So okay, so let's maximize this screen. Actually, so it's actually a questions for us. Who is the primary audience here, Andy? Complete beginners, C C N A's, classroom. So this isn't that clarification thing. So the spec passes. Quality checks, but there's three deliberate needs clarification markers. So let's say complete beginners. Let's make this game for like very, very beginners. Oh, do we want IPv6 core and IPv6? Just IPv4? So let's do the second one. No, let's do the third one. Core and supernetting. Is that like CIDR? How does the learner enter answers? Free text, multiple choice, mix by tier. Let's do three mixed by tier. Review your answers, submit the answers. So if we if you want to look at this, it is the completed spec now. Notice how at the very top, feature specification no longer has square brackets. Subnetting learning game. So look at it's just like software developers do, Andy. User stories, functional requirements, why it's a priority. Right now, this the LLM is going to use as an input later when we say implement to generate the code. Look at this independent testing, acceptance scenarios, blah, blah, blah. Right? I don't understand testing. Do do we do we test it or it will test its own code? Yeah, so we don't have to test any of it. It's gonna test itself. Where does the testing happen? Let's check it out. So let's roll this back up again, the divider. And here's what Claude Code had to say. So here's your spec file in this branch, and we even gave you a checklist with requirements. See the checklist folder here? There's a checklist in here of requirements now. What I did, I adapted your authored spec into the spec kit template format, restructured a flat story into three prioritized, independently testable user stories. And here's what we get the question, topic, answer, the spec kit to commit the spec, you can just tab and let's commit it. Let's go ahead and do the clarify step just in case there's more clarifications needed. Yeah, and say yes and don't ask.

andy lapteff 25:10

I can't imagine you wouldn't clarify. That seems like a pretty good thing, right?

SPEAKER_01 25:13

Yeah. So I like to do that right now. So if you do /spec kit clarify, and there's no prompt here, you just say clarify, enter. And it's the LLM now is going to evaluate our constitution and our spec to suss out anything that it's unclear about. If anything, it needs clarity on. This is kind of like your junior, right? So I've given you the spec. Let me, you know, review it and come back to me with questions before you do anything else.

andy lapteff 25:40

This is crazy in the best way possible. Like this is like just I can't believe what I'm seeing happening in front of me. And I'm a broken record, but as someone who would never have had access to software development, I know. I would never have got to the point where I could do this.

SPEAKER_01 25:59

I know. And I want to give a special shout out. If so, if you're looking for more materials about spec driven, there's a few people in the community doing a lot around this. Um, one guy from Cisco, Jason Belk. I don't know if you've ever met Jason. Yeah, he actually had a session at Cisco Live in the catalog about this exact topic. So it's starting to you know make noise out there. Okay, so what defines mastery to unlock the next tier? So, how do we get to the next tier in the game? Streak of correct answers, a cumulative correct total, a past tier quiz checkpoint. I would say streak, right?

andy lapteff 26:30

Wouldn't that make sense?

SPEAKER_01 26:30

I think a streak would make the most sense. But that's a good question. So it asks us five, it's gonna ask five questions here. Okay, so what defines mastery? Streak of correct answers. And now it's gonna ask us question two of the uh okay, so let me integrate that into the spec now. And you see how it's green? Yeah, it's added that to the specification, and then the red removes is that yeah, okay. So then when we go to build the game, now the game knows okay, to move to the next level, they've got to get three answers correct or whatever in a row. Huh. So, what's question two? How does the game teach a concept before testing it? A brief lesson, explanations only, work example, and then practice. I would say just the recommended, right? Number one, recommended, we can go with that. And honestly, anyone at home, rewind to the start and install the same things that we've done and build your own video game, build your own network video game. Don't do subnetting, do uh routing, do BGP as a video game, OSPF of as a video game, open source it, make it a better world for everyone else, leave something behind for the next generation to learn from. I would have loved to learn subnetting from a video game. Yeah, I was doing it from flashcards and handwriting cedar calculations and workbooks. Okay, so is there a time pressure or is it speed only? Measure, I would say measure passively. Let's not make this a chat a time challenge. Yeah, I can remember writing out the binary and the it was not right. And it was like remember they gave you a page of I a page of different IP addresses and you had to do each one of them. First usable, last usable, last top, yeah, last top broadcast. And the end minus two and all that stuff. Yeah. I almost quit over subnetting. So when I went to my I went to an IP routing boot camp after I'd passed switch. So my my generation of CCNP was route, switch, t shoot, and I passed switch, and the routing instructor Andy was like, What are you doing here? I go, I don't understand. He goes, Well, you've passed switch, that's the hard one. If you can do the switching and the binary and the subnetting and the spanning tree, routing's just next tops, dude. You'll be just fine. And he was kind of right. That the routing book was twice as big because you had a whole section on EIGRP, a whole section on OSPF. Anyway, okay, so what's the next one here? When does it switch from multiple choice to free text? Let's just go per concept. We can do with the recommended setting, and then we'll have one last question to clarify, and we'll move on to the next step, which is planning.

andy lapteff 28:55

I had such a hard time with those old MP exams. I found route harder than I thought it would because route's intuitive for some reason to me. And I failed that one a couple times too. I had a hell I learned a ton studying for those three exams, but man, I it was painful.

SPEAKER_01 29:09

It was tough. I got hung up on C CNA Data Center of all things. I failed the second of two, like three times, and I was like getting really desperate, like telling to my wife, like, I don't think I'm ever gonna pass C CNA data center. I've been studying this thing and writing tests for like a year to get that, right? Okay, so we're all set. It's clarified everything. Hit tab and commit the the clarifications. Okay, so now the next step is plan. And let's go back to uh our GitHub folder over in the um yes and scroll down, and we're gonna do the same thing uh except for plan. Now listen, plan provides your tech stack and the architectural choices. So hit copy there, and we're gonna add a little bit to this. So let's go to Claude Desktop. Oh, and don't forget to hit yes here on this this thing. Claude Desktop. Again, I would say thanks for the spec. Thanks. The next step is planning. Here is an example of a plan, and don't hit don't send it yet, and then paste in the plan. Press enter now, but this is my but might be what we get. Use vanilla HTML, CSS, and JavaScript as much as possible. Images are not uploaded anywhere, metadata is stored in SQL. So this is where we actually get into like, I'd like this to be a JavaScript-based game that's in the web browser, I'd like it to be a Python game that's at the CLI. We get to choose our our framework and our architecture here. And for the interest of time, let's just go here into VS Code and do /spec kit, and we're looking for plan this time, and then just space and say, this should be a um, this should be a basic HTML CSS JavaScript game in the browser. No, you didn't break it. We're gonna be okay. So you see here now we have a new plan file. Right now it's just an empty template, but you can click on that. And now we're sort of starting to get like this, Andy. We're we're working down the funnel to implement where we get code, but right now it's gonna break it into the technical specs on how to make CSS JavaScript in a web browser.

andy lapteff 31:50

So we created the constitution which gave us guardrails, and then we created the spec. Yep, which is like where the stories and all that stuff came from, right? Yep. And then we clarified to make sure it had no classification.

SPEAKER_01 32:03

And it asked some good questions, which I wouldn't have thought of. Yep. And now we're breaking it down into plans. This, by the way, Andy, plan is the last step that requires a prompt. So the next two steps, you see how they just say tasks and implement?

SPEAKER_03 32:18

Yeah.

SPEAKER_01 32:18

You don't need to type any prompts there. So the first three constitution spec plan, you feed it a prompt. And look at check it out. The user resolved, the answer, the text stack, basic HTML, CSS, JavaScript in a browser. I've read the spec and constitution and context. So now, really soon, all of these placeholders in the template will be filled in with the plans the the Claude Code has come up with. So we see some red, some green. It's adding some changes here, no constitution violations. Good. And I hope this doesn't take too much longer. We're okay for time. Eric Cho has entered the chat. Eric Cho is here.

andy lapteff 32:54

Eric, come on over. You guys remember Mr. Rogers where the neighbors would come in? Hi Eric, hey, buddy.

SPEAKER_00 32:59

I figure I'd need to step in, otherwise, John would just keep on talking.

andy lapteff 33:04

So nice to see you. What's up, man? It's been a day. See? Yeah.

unknown 33:08

Don't worry, save your time.

SPEAKER_01 33:10

Okay, so implementation plans, subnetting learning game, v1, and this is now all filled in the plan. All right. Now this is gonna break it down. Phase one, data model, contracts, quick start. So those three, see how it says phase one? So check it out. It's gonna generate the data model and a few other artifacts that implement is gonna use to build this video game. So we have a data model. Now you can actually click on the data model. I'm not sure if it's finished building it, but this is the data model for this subnet game. So remember earlier you were asking me how long this would take to build by hand. Just the data model might take a few days to model the data. So now we've got contracts, a new folder. And if you expand that, we have an engine md, which is the subnet engine. And this MD file explains persistence. See, it's building all the things that the LLM is going to use to actually spit out code at the end of all this.

andy lapteff 34:06

Question. Yeah. If I just asked, like a dum-dum, hey, build me a game and teach me subnetting. Yeah. Does it do all this on the back end and I'm just not seeing it? Like, would it have built all this out, but I wouldn't be aware of it? Like, how would Claw build a game if I didn't tell it to do all this?

SPEAKER_01 34:24

It it you would just so you wouldn't get any of these artifacts or any of this structure. It would like be vibe coding. Yeah, it'd go, Yeah, sure, here you go. Here's a hundred lines of Python, Andy. This would be a subnetting game. Might work, might not. Might be cool, might not. This is much more constrained.

andy lapteff 34:40

It's it's more polished, it's more mature, driven by the requirements. It's almost like somebody thought it would be smart.

SPEAKER_01 34:49

Have you ever been in that tough meeting where you've got business folks and network folks and and and the whole, and you're just like, listen, do you have requirements? What are your requirements? I can't just build a network without knowing what the requirements are, right? So this is a really cool way to do things. Okay, so let's do the commit. And it's sort of broken down. There's a bit of a recap on what it did. So I would just say yes, and then it tells us run spec kit tasks to generate the tasks from these artifacts. And they're dependency-ordered tasks. Let's just do yes here again. Okay. Next is to run the tasks, to turn these artifacts into a dependency-ordered tasks.md organized by user story, which is phase one, phase two, phase three. So you can build and validate the MVP first. So just press enter. There's no prompt required for tasks. Good news, everybody, we're on the second last step, the penultimate step, before we get to implement. And then once we implement, we're going to get all kinds of code and a working minimum viable product.

andy lapteff 35:58

I have never used penultimate in a sentence. That was impressive. Does that mean the second to the last sentence? Second to the last. That's right. You said penultimate, and I thought of the Madagascar Penguins. At one point, one of them says penultimate, and it's hilarious. I don't even know why.

SPEAKER_01 36:11

That might be where I picked it up from.

andy lapteff 36:13

Well, it's a very good use of it. I'm now going to use penultimate.

SPEAKER_01 36:16

So I used to read comic books, and there was always like, you know, book 11 of 12 is the penultimate chapter in Spider-Man's story or whatever, right? Now I know. The other thing I want everyone to be aware of is that this is uh, as you might imagine, a lot heavier token consumption, Andy.

andy lapteff 36:32

You were just reading my mind. I was gonna ask you about token economy and yeah, the token economy account, you're probably not gonna do this. Probably not. I don't know if the $20 a month at this current rate would be able to handle this.

SPEAKER_01 36:44

I would just be careful with your tokens. Now, you don't have to use Opus, right? You can connect Claude with Gemma 4 or an open source model, and then the token usage is irrelevant. Okay, so let's click on the tasks file here just to take a quick peek on what that looks like. Yeah, see, so tests, and it's gonna do the test, the organization, the format, the path conventions, shared infrastructure, like all this stuff that you don't need that we don't need to think about. All right, check it out. We're ready to go. Run implement to execute the tasks. Let's do the commit. So I just say yes, and then we're gonna run into implement.

andy lapteff 37:23

Do you do anything different in your workflow to um be thoughtful about token usage, or do you just throw money at it? Because the reason the reason I'm asking, there's like a caveman thing where you can talk to it like a caveman and you get better, but I don't know if it works. I don't know if it's any good.

SPEAKER_01 37:36

I I do have to be conscious of my token spend. Yeah, you know, I I had a $380 Gemini bill out of the blue, and I didn't know where it went. I didn't know what I was doing that cost me that much money. It was hard to explain to my family. Like suddenly I got a bill like, oh, I was using VO3 to make videos, and I didn't realize there were $8 a video, and I made 30 videos, and suddenly I've got a $300 bill, right?

andy lapteff 37:57

Yeah, can you limit it like you did with cloud, like the spending limits? You can put caps and limits and warnings, and yeah, yeah.

SPEAKER_01 38:03

I've just got shock value. And I was I it was excited. It was it was a you've been a first adopter, like you've been a yeah, pioneer with a lot of it. So that was okay. So let's I wouldn't worry about analyze here. Oh, don't do that. Let's just skip analyze for now and go to implement. Let's just go right to implement. Analyze is kind of like another interactive phase where it will so is it run spec implement? Yeah, implement. So let's minimize this spec folder here, Andy. And you're not gonna believe this. What we're gonna start to get is code now. Code. Now, did you have to know anything other than what we wanted to build to get started here? Nope. Right? No. Now check this out, and pretty soon we're gonna start to get folders like source folders and things like that. Yes and don't ask again.

andy lapteff 38:48

Yes to all the things. YOLO, baby, YOLO. So I pay a hundred a month for Macs or whatever it is. Yeah, I can't get a bill higher than that. No, you can't, right? Right. Whatever you were, you were only like a usage-based thing at the time, yeah. Usage-based API-based, yeah. Right. Which is tricky to figure out. I was looking into that and like, well, maybe I'll just do this. And uh you're trying to figure out the economy, like which way to go. I know. But I guess just having that capped amount monthly, whatever I do, I won't get it.

SPEAKER_01 39:13

Yeah, you can kind of mix and match. Like for most of this, you could use Gemma 4, and then the very last implement step switch to a more capable model, you know, like kind of pick and choose. So it's asking us npm packages aren't installed. How should I run the test coverage? Should I proceed with implement? Let's do one. I would press enter and it's gonna go ahead and install the node.js kit that it needs for the JavaScript, and that's fine. That's why it's asking you because it it wanted to know if it was okay to install a couple things.

andy lapteff 39:40

You know what's funny with like the cost and tokens, it'll be like a day or two I'll go by that I don't use the tool. And I'm like, oh damn. I know. Like I gotta like, yeah, you know, I gotta use it every day to get my value, right? But I have no idea. I don't really look at the usage, I haven't hit it since I went to Macs, but I was hitting it at the tier under.

SPEAKER_01 39:56

So can you scroll up a little bit? It's telling us something here. We've hit a bit of a problem here. Uh I can't install node myself, but you can install this. Okay, can you highlight this curl command?

andy lapteff 40:08

Yeah. Do I start with the uh just after the bang?

SPEAKER_01 40:12

Yeah, right here. Copy that and then let's open a new terminal. Just hit plus here, Andy.

andy lapteff 40:18

Uh does it tell us to put it in the new terminal?

SPEAKER_01 40:20

Well, we don't want to break out of that Claude thing. So now just paste that in and see if that installs node. Things go off the rails, of course, at the very last step, but this is just because node's not installed in this machine.

SPEAKER_03 40:30

Right there.

SPEAKER_01 40:30

Yeah, and then I would do the same here. Bring this line back. Thanks for your patience, everyone. We're we're just spaces man. It's just a node install issue. I just press enter. Let's try that. Okay, there we go. Awesome. Close your terminal to restart NVM or fuse the following. Okay, so go back into the original terminal and scroll all the way to the bottom. Say, can you check for node now? Still no node. Says enter. Yes, say yes.

andy lapteff 40:57

So it's doing so much other work for us. Why can't it install what it needs? It should be able to.

SPEAKER_01 41:02

It should be able to for whatever reason. Press enter there. Okay, see, NVM is installed and working, but no node is downloaded yet. Let me try to finish the node install via and so press enter, yes. It is trying to work it itself out now. It's gonna try to install this stuff for us. I appreciate that. I really appreciate that. Especially things like node packages. I'm not the biggest JavaScript developer. Some of that gets a little bit gonna keep hitting yes. Yeah, I would. I can almost smell the tokens burning. Oh, wait, that's the fire I made. Okay, so now it's running. Notice what we got up here, Andy? Source files, styles, tests. So Claude GitHub specify were part of our install. Specs is part of our spec driven, but source styles and tests is code. Those are folders that are gonna hold code. Once this is done cooking, and I don't know how long this is gonna take, implement is the longest of the phases. Call it five minutes, six minutes. We'll see. Time for me to use the restroom. Time for you to use the restroom, and we might edit this out and trim it down. But what's neat is at the very end of this, we're gonna be able to launch a subnetting video game in a browser. That is the whole point of this outcome. Now, we've done this in an hour on the fly. Andy's literally never done this before. We're trying, we didn't prep for this at all. It was like, let's just do it, man. So you can do this. That's the exciting thing. There is a little foreplay. There is a, you know, you need to devote 45 minutes to an hour of your time, or like you don't have to do all these sequentially. Let's say you do the first three steps, then you go have lunch and you come back and you resume the steps after lunch or whatever. There's a lot of ways to break up the monotony of it. But look at all this stuff we're getting: testing configs, JSON files, package files, index.html, uh styles, source code. So it just wrote, like it said, it wrote 200 lines of CSS for us. So let's hit yes here, Andy. And because it installed Node, it's actually going to test and regression test the code it wrote. So it writes the code, it tests the code, and it gives us a runtime environment to run it in the browser. And you're looking at two network engineers doing this together. We haven't launched Python, we haven't written a single line of code. Everything has been in Markdown. Markdown is kind of the universal language between humans and LLMs.

andy lapteff 43:19

Thank you for referring to me as a network engineer. The longer I'm in marketing, I don't know if I lose my network engineer card at some point. So I keep doing this to for street cred. You know, I'm trying to do technical things, right?

SPEAKER_01 43:30

But it's funny. Some people have said, like, I've turned my back on my networking history and I'm an AI engineer now, right? And it's like, well, I mean, we we've re we all reinvent ourselves, right? So Scott Robon said it best, it's all additive.

andy lapteff 43:42

Right. Your networking knowledge is there, right? Right, right, right. Because I like, you know, I'm gonna give up on all the networking stuff to learn this coding. Like, no, no, no, no, no, it's all additive, it doesn't go away.

SPEAKER_01 43:52

So we're in phase two now, foundational engine test first. I'll write the failing, and it does TDD. It's so neat. I'm gonna write failing tests, then fix the code. So SDD actually uses test-driven development. That is neat. I didn't realize that. It's actually writing failed tests and then it's gonna fix the code. See VI test? Yeah, inner, yes, again. Sorry. So we're actually testing all the code and uh we're getting real close here. We've only been cooking for about three minutes. I know it feels like a longer.

andy lapteff 44:23

So the things I've built, I don't think I've tested the code.

SPEAKER_01 44:25

I think if it works, I'm happy. Right. Or as a vibe coder, you have to say, okay, it looks pretty good. Can you generate a bunch of tests for me now and test the code? Right? You can do that through vibe coding. It's a built-in feature of this. So I'm implementing the engine, and these are tasks 11 through 15. So now if you expand source here and engine and just grab a random file addresses. So look at this code we did not have to write, right? I mean, you've lost me on line 12, right? Like I'm not a JavaScript programmer. I mean, I could break, I could do this. I'm I I can read JavaScript, but the whole point is we did not have to do any of this ourselves, right?

andy lapteff 45:08

Me, bro.

SPEAKER_01 45:10

Right? Is this not crazy? Listen, this is all magic to me. And there's a subnet.js, so it's actually been and there's our index, which is awesome, which means we're getting really close because we got the index.js file, so we're pretty close here to having a functional MVP of our video game.

andy lapteff 45:28

Eric, do you have an opinion on this stuff? LLMs and using AI to code, and because you're like hardcore coder guy. I feel bad that you're sitting here waiting for us. So here, talk into a talk into a microphone while we're vibing.

SPEAKER_00 45:40

No, yeah. So I I definitely I definitely think this is uh this is magic to me as well. Um, like John, I don't I don't do a lot. Of JavaScript and I don't feel like I don't get stuck now, right, John? Um, I don't know, I don't know if you feel the same way, but essentially, you know, whatever it is, if I'm writing a book, uh, writing a chapter, if I'm writing some code, or if I have some ideas to generate some brainstorming, I used to have these uh writer's block or or you know, coder's block, or just uh procrastination, whatever you want to call it. I just kind of sit behind and I usually have to just gun through it, right? Like I usually I used to just have to say sit in front of a blank page for for maybe two Pomodorous or like I go get someone, whatever it is, right? Like, so I have these gaps where I'm not productive, but I know it's the necessary path toward productivity. But but nowadays I don't I don't feel like get stuck anymore because the AI would certainly give you something, it may not be correct, right? It may not be the perfect one, but it'll give you something, and from there you can just say, Oh, you idiot, like you know, it's it's this feeling's not getting hurt, but you know, I I feel like I don't get stuck anymore. And that's the main feeling I've had for the last, you know, maybe year and a half, two years of actively using AI all the time. So, so yeah, back to you, Mike. So instead of staring at the blank page, you have something you can iterate on.

SPEAKER_01 47:02

I I read this quote that said, now after vibe coding, I don't have four unfinished projects, I've got 140 unfinished projects. Right? Okay, so let's hit okay. I know we're getting really, really close here. I've been trying to keep an eye on it. Uh so you can let's maximize this, Andy. We're all done with the GitHub stuff in the background. And I just want to see, okay, so let me read the current line numbers. Uh, do you want to scroll up just a little bit? Let's see what the last bit of text it was saying here is. Let's go up a little bit more. Subnet test.js. It's fixing some things from the tests.

andy lapteff 47:34

How does it know what to test? I guess that's just stuff that I'd have to go to computer science school for, right?

SPEAKER_01 47:39

Like unit testing, regression testing. There's a couple different things that it's probably doing for testing.

andy lapteff 47:45

They're just like testing frameworks that exist and it knows how to like test code.

SPEAKER_01 47:49

Yeah, it's using this framework called VI test, which I don't know much about, but it tends to use VI test quite a bit. So let's hit proceed. And it can't test while it's coding. No, it writes the code and then it regressions and then it tests after, right? So let's press okay. Seven minutes of implement. Like I said, we should be getting close. It usually takes seven to ten minutes of this very last step because it's doing so much. Yeah, it's generating all the tests, it's generating all the code, it's testing all the code, and it even though so the variable length subnet mask wasn't tested, so it just tested variable length subnet mask. Kind of cool. So let's continue. And this is sort of what bothers me a little bit of some of the negative anti-AI stuff. It's bad code, it's slop, it's this testing it, it's testing itself, it's writing tests, it's doing tests. So in the five or six things I've created, I haven't tested any of it. Right. And and it was fine though. Well, it was, but to give you more reassurance, if we wanted to move this to production, or if you and I wanted to make the duolingo for subnetting and make some money on the side, we'd really want to know that the code was tested, right?

andy lapteff 48:53

Now that I see this, I can almost understand the people who know more than I do. Like this is garbage, you're not doing but the amount of testing and and work that someone something is doing going through this. I don't know how you could trash you can trash me for vibing and not testing anything. Like right, I think that's fair because I don't know enough yet. But dude, this has been-I mean, it's testing the hell out of the code.

SPEAKER_01 49:17

I know, and it's actually it's still finding little things that it's fixing, and it says it's pretty close. It said that there were three outstanding tests that it needed to write. So we're down to three tests here, and because it's all in this Git repo, all the tests are available, right? So if you don't trust this thing, you could actually go over all of the code and see what it tested, how it tested it, what the spec was. It's all here bared laid bare for everyone who wants to make this game better or try it on their own.

andy lapteff 49:46

You just read my mind. How would we share this? Let's say this is a useful thing, and like, oh great, I wish I had this like when I was studying. Do you just leave it on the repo and tell people it's there? Do you can you publish it to a website?

SPEAKER_01 49:58

Like, yeah, so this little button here. I wouldn't put it on our website. I'm just gonna go. No, but you're gonna put it on your GitHub. Yeah, and then but you gotta tell people it's there. It's on this GitHub repo. Okay, check this out. On the repo, they'll have all these files locally. So you can just clone, launch, and play the game. Launch, play. And you know what we could do, Andy? As a second spec, maybe next time you have some time. I'd like to turn this video game into a web hosted game on Google Cloud or Amazon Cloud or Azure or whatever.

andy lapteff 50:24

So that you don't have to clone it, it's just move it to the cloud. Well, that's where I was going with this. We can't just present a front end to the game on like our website.

SPEAKER_01 50:31

You we could we could. That could be the next thing we vibe code. It's great. I know the game works. Now I want to host it on this website, right? Right? And let this do it for you. Do you like Google Cloud? Is that your I like Google deployment of choice? Yeah, Google Run. Because you can take your Git repo and Google Run will like build your code for you and put it up on the web. I also found it very inexpensive. Seven to fifteen cents to host a simple website a day kind of thing. Not bad. It's not bad.

andy lapteff 50:57

Have you heard of like Fly I.O. Like there's these other services that I think you can deploy things in, right? Right. I have a hard time. There's a lot of parsing, yeah. Like which I asked the LLM, like, where should I host this thing? And it's like, oh, for reasons and fly IO, and it's a Python data that's like containerized. So this is I don't know. So that's probably what I'll do. But I I know that people like, I mean, there's so many clouds you could put it in.

SPEAKER_01 51:19

Yeah. I I'm just comfortable with the Google, the Google ecosystem. And Google Run was fun. I wanted to try it. I have a chess game hosted up on Google Run. Okay, come on, let's finish these tests and let's give us our game. It's gotta be there. So Google Runs the name of the product. Yeah, their cloud product thing. Yeah. Engine. Okay, check it out. Engine at 100 comp. So let's do yes and don't ask. But if you scroll up, I thought it said something about 100% complete. Engine at 100% coverage. 51 tests. 51 tests are green. Type check clean. Foundation two is complete. Phases one and two are done. I'm gonna commit this. And now we're on to the last phase. So yes. And again, we included the testing as part of this. We could have skipped all these tests and just jumped right to let me see the game and let me try the game. I didn't realize it would take this extra couple minutes, but we're we're almost there, everyone. All gates are green after formatting. Yes. Okay, so now it's gonna commit the game. Check it out. So go down, yes, and commit.

andy lapteff 52:21

Isn't it funny that we're apologizing that it took an hour to do like a year's worth of work?

SPEAKER_01 52:25

I know, I know, right? I know. And then we've brought thousands of people who are gonna watch this into the new code.

andy lapteff 52:31

Guys, this would have taken two years before. I'm sorry it took an hour.

SPEAKER_01 52:34

I know, I know, I know. So that's funny. So all the code's been pushed, and now we're just waiting for the instructions on how to play the game. Did it make a readme? Can we scroll down here on the folders on the side? Okay, not yet. All right. We may have how do you know it was pushed? Is that what this is? Yeah, all the files are gone. So that means they've all been pushed up to uh gotcha. I think you maybe you need to click that up arrow and that'll push it up to your GitHub. Yeah, there you go. Yeah, allow Lapra 13. Fail to authenticate. Weird. I got the whole 2FA thing. Is that like uh uh we can we can deal with that? We'll commit to getting this up on GitHub by the end of the session, everyone. So what is it doing here? It's accomplishing. All gate screen. Now onto phase three. So phase three is the last phase. We're very close, everyone. Do you want to scroll up a little bit? Let's just read what it said it's gonna do here. First, I'll refactor the engine's answer normalization into the shared, and then build generational grading content session and the user interface, the UI. So, okay, if we scroll all the way to the bottom, now it's the US one tests written first, starting with the generational grading tests. So a bunch of more testing. We're getting really, really close. I'm really excited to see what this video game is gonna look like and uh how it can help people. Okay, engine generation and grading is green. Now let's do the game layer and the game controllers. So we're really close. I know this is taking 20 minutes instead of 10. I'm good, man. Uh now that so honestly, I when I'm doing this, I'm like, enter, go get a coffee, enter, alt tab over to my email, enter, do some doom scrolling or whatever, right? This is not typically how it's done where you sit and stare at the thing. Right.

andy lapteff 54:16

So I'm thinking of my son too, when I I know that he has less patience than I do. Right. At his age. So I'll probably talk to him and say, hey, what would you know, do you want to make a game? Yeah. I'll work on like the spec stuff with him. Like, oh, well, what do you want to do? What do you think? Blah, blah, blah. And then I can go through this for him. Right. I'll show him, like, oh, look, a lot of work happened. Right. It was an hour, and I didn't want you to have to sit here and because he doesn't have that kind of patience right now. Right. But he can see, like, oh, we created something with a tool that did a thing, yeah, which is pretty amazing. Yeah. And if he gets excited, maybe he would want to sit in for five minutes of the process next time. Like, oh, you could do this, buddy, if if this if you're into this. If you're not, cool.

SPEAKER_01 54:57

Now, the other neat thing that you can do with this, particularly for video games, is um tie in the image generation feature, like from OpenAI or Gemini or whatever, who can make images, AI images, yeah, and tell it to use that tool to generate the assets for the video game. So this video game is gonna look pretty plain and janky. It doesn't have, yeah. But you could like use AI to generate the actual assets for the game. So could we have incorporated that into our spec? Yeah, so even or another spec is to say, okay, the base game is great, let's reskin it with open AI generated assets or something, right? But like go through this whole process. I don't know. Quad can't join generate images. They're they've they've really focused on coding, which I think is why they're doing so well, is because they didn't go as wide, right? Yeah, open AI tried to be everything for everyone, and they had Sora and a few other things, and I'm still paying for it. Yeah, it was my first. I still have it. I know, I have it too.

andy lapteff 55:55

I think I could probably cancel and still get what I need out of it.

SPEAKER_01 55:57

Yeah, I sort of bounce, like I still use it. I do too, I do too.

andy lapteff 56:01

But I almost wonder if the free tier would get me by, but I just feel like it was my first.

SPEAKER_01 56:06

I know, I know.

andy lapteff 56:07

So I feel like, ah, let me, you know, I'm using it, let me pay a new.

SPEAKER_01 56:10

It's kind of like after you get Disney Plus and Amazon Prime that you keep Netflix around, right? Right. Exactly.

andy lapteff 56:16

Why do I have Netflix? I don't know. I think my in-laws use it, but I've always had it.

SPEAKER_01 56:21

Right, right, right. Okay, now let's run the full test end to end. Wrong test answer submitted. Okay, so it's it's still fixing some subnetting.

andy lapteff 56:31

I'm fascinated by the testing aspect. I probably will never understand what's happening because coding is just so out of my wheelhouse. Like, I don't understand code, let alone what's testing. The more you see it, yeah, the more you're exposed to it. I think it'll, you know, like it'll actually. Is it syntax? Like well again, like I have questions that can't be answered simply, right? Right, right.

SPEAKER_01 56:54

It's testing a lot of things, Andy, and you don't know all 77 tests are green. Engine 100%, overall type and lint. Okay, so I believe the game has been fully tested. Press enter again.

andy lapteff 57:09

But it said all tests were green earlier, like 50 something. So I wonder if it found something later.

SPEAKER_01 57:13

It's missed January.js isn't fully. So it's looking for some gaps in the test coverage here, which I'm good with. I know. Like I'd love to know the game is 100% tested. You know, you know why? Because that kid who does the subnet game and it tells him the wrong answer, that's on us. Yep. Do you know what I mean? It's not on the AI. Yeah. So I love that it's fully tested. It's actually testing some answers and testing some scenarios before it just presents us a game that you know, for education, you've got to be right.

andy lapteff 57:44

If you don't test or if something misses, like is that how bugs get out?

SPEAKER_01 57:48

Bugs get out, memory release, things crash, security vulnerabilities. There's all kinds of stuff that could happen with untested code, right? Really stringent testing should limit and then eliminate those bugs and those gaps. Yeah, exactly.

andy lapteff 58:02

Which is more reliable software, it'll break less often, do weird stuff.

SPEAKER_01 58:06

And also makes this whole approach more adoptable and more like popular because it's not like I don't know, vibe coding can get it wrong and it's not testing. And it's this is a little more formal, right? And I've always thought if it's good enough for Microsoft, right? Like if it's good, if this process is good enough for Microsoft and GitHub, I think it's good enough for me to make a little net, you know, subnet video.

andy lapteff 58:30

I was gonna ask you, why do you say that? But it's because GitHub is are they owned?

SPEAKER_01 58:34

Yeah, Microsoft's own get owns GitHub now, but I'm just and is this testing suite part of Microsoft? Um, more at the Python level or JavaScript level. So four gaps remaining. You know what we could do, Andy, the next time we get a chance, actually type it in right now. Ask it, am I able just to play the game to test it and see it? Because this testing might go on for another 20 minutes, and I don't want to keep us all here for that long. I know you've had a really long day, and this episode's building up to a climax, and I want to get there. And and now it should intercept this. I'll finish the last coverage fixes, then get your game running in a browser. Okay, even it's like, okay, I'm getting there. I'm getting there. Don't rush me, bro. Don't rush me, bro. Okay, it's really like gonna fix those last couple things. It didn't care that I wanted to just play the game. Yeah, press enter one more time. I mean, this isn't bothering me. You know what's funny? Look at the syntax of this like command to run. Like that syntax, just learning how to do that as a testing is like weeks of reading testing books and software and there's people who understand that and take that in, right? Like, coverage is at 100%. There's one real source error to fix too. It's really obsessed with fixing the test. Like it's really wants to give us a good game here.

andy lapteff 59:56

Hey, let me know if you want me to stop pressing. No, I want you to just press yes.

SPEAKER_01 1:00:00

No, I would be like, yes, yes, yes, yes, yes. So 25 minutes of implement and probably 20 minutes of the three other or four or five other phases together coming up on probably an hour, right? Is it about an hour we've been doing this? Yep. Okay, cool, cool. Engine it's 100%. Uh, there's three linting errors left. Let me fix them. Okay.

andy lapteff 1:00:21

What's an engine? Is that what makes the game?

SPEAKER_01 1:00:23

It's like the core of the game engine. Yeah, yeah.

andy lapteff 1:00:25

I don't know anything about gaming.

SPEAKER_01 1:00:26

I would love to have learned how to write code for video games. You know, when you talk here about like the Unreal Engine and some of these video game studios and stuff.

andy lapteff 1:00:34

So is that just different languages, different like you know coding? It's different syntax. Were you a gamer? Are you a gamer? Not anymore.

SPEAKER_01 1:00:43

What did you play on? Like my son has an Xbox, he loves it. I've got a PS5. I'm waiting for the Wolverine game to come out. That looks pretty good. But you weren't like a PC gamer, right? That's the same thing. Yeah, I used to play World of Warcraft and all that stuff. Yeah. Okay, do the down arrow. Yes. It looks like it wants to launch the game here. Okay. Now let me start a local server. So that's running on my machine, right? Here says what you'll see. So go to local. Click, can you click on that? Actually, open up a new browser and go to localhost 8000 or click on this link here. Drum roll, please. Oh my god, is it gonna happen? So you can drag this down. It's opened up in VS Code as a browser. Subnet trainer, learn IPv4 one step at a time. Binary and decimal explains it. Start practice. Uh-oh. Uh-oh. The two of us being tested. We can stop the recording now.

andy lapteff 1:01:28

One, eight, sixteen, thirty-two, sixty-four. Oh my god. I hate math.

SPEAKER_01 1:01:33

I'm gonna so the last one, so two, four, six, eight.

andy lapteff 1:01:37

Yeah, 56.

SPEAKER_01 1:01:38

I don't know. So it'd be 64, 32, 32, and 16, and 8 and 1. So it should end in a 9. No, am I wrong?

andy lapteff 1:01:49

I'm gonna say 114.

SPEAKER_01 1:01:50

Okay. Correct answer. So it's telling us not quite, and it explains it all next. So now look at a different way. Type the whole number. Okay, we we don't need to show everyone how bad we are at subnetting in our in our later ages, but is this not cool? We've just built a fully functional subnet trainer, free to the community. Anybody can do it. We didn't write a single line of code. Look at all the artifacts we have. We know it's fully tested. So let's go ahead and commit these in here. Click on this.

andy lapteff 1:02:20

What's cool, John, is I never would have been able to do this.

SPEAKER_01 1:02:23

No, me neither. Me neither. Honestly, I would not have been able to do this.

andy lapteff 1:02:27

There was a subnet game, it's on a website somewhere, whatever that subnetting exercises.whatever was that we used to use in CCNA. Yes. And I guess somebody made that without this, took them forever, and it's there. I'm amazed by this. Like, not to minimize, like, oh, okay, it's over. Like, look at this stuff. Like, we just people could use this to learn subnetting.

SPEAKER_01 1:02:45

I know.

andy lapteff 1:02:45

That's amazing.

SPEAKER_01 1:02:46

I know. Like, and and and to your earlier point about the hello world, right? It's not a like, it's an exciting message message to network engineers or people in general. I'm not trying to minimize learning code, I'm not saying that's not important, but people have lives. People, some of us are older and we've done networking and we've been asked to learn programming and take three years of our life to learn a new skill. We can achieve really amazing things now with just our ideas, you know, and our intent. We just explained that we wanted to subnet calculator as a video game, right?

andy lapteff 1:03:19

And and I want to clearly state I don't think they're mutually exclusive, meaning, yes, I can do this, but I'm also about to sit in like 16 hours of Python and coding and GitHub stuff in the next couple of days. So it's it's not like oh, one or the other. Right. Now, that being said, I could spend the next three years learning Python and never be able to do this. Right. So it's both, maybe. Right. Like, look at all the cool stuff I can do, but I'm a technical person. I've struggled with Python and I really want to understand the basics, and I don't. And that's something I want to do now, or before like I had to and didn't right. So it's both, probably.

SPEAKER_01 1:03:54

So let's just type in a message up here, you know, uh working game and then hit commit. We'll take this offline. Oh, that's what's going on. Okay, hit cancel here. All right, so we'll figure it out. So let's stop the recording. Thank you. Oh, we have to end the show. We gotta end the show. We gotta end the show. Can't just die.

andy lapteff 1:04:12

That's the that's the Irish goodbye, they call that. I expect more of my Canadian polite friends here that the Irish guys just disappear at a party. So this is awesome. Thank you for walking us through this. At the risk of repeating myself, I am excited to be living through a time that we can do some really amazing things that previously were out of reach for me. I get all the feelings about all the things. So this isn't us saying, like, this is what you should do and abandon everything else. This is just another example of what you can do with this tooling. If you don't want to, don't. Right. I think this is amazing. I'm gonna work on this with my son. I would like to continue to make cool stuff. And if you want to make cool stuff, this is another way you can do it. I love that you showed me the spec driven development too. I think this is much better than anything I would have vibed, and I am gonna default to this. I don't think an hour or an hour and a half of time to build something that is high quality and rigorously tested is a bad thing. Like, I know I can give an hour and a half of my life to create better code.

SPEAKER_01 1:05:14

And and think, and and and I'm sure you've started thinking of internal projects and internal things at your job that this might be able to apply for. There's so much. And the only other thing I want to mention is that I can't think of a better starting off point. Like if I was day one in AI, I've never done vibe coding, I I don't know what cloud code is, I don't know what an MCP server is. We didn't do any MCP servers today, right? We installed the simple extension for Cloud Code or Copilot or Gemini or whatever. This is universal. We initialized our folder to say you're a spec folder, and then we ran through the seven steps, right?

andy lapteff 1:05:52

This is so I feel I just realized this and then we'll end the show. I think the reason I love the LLM stuff, I don't even know what to call it anymore, AI L L M machine learning. But the reason I love it so much is I feel like there is a teacher with me the whole time explaining things, clarifying, and I don't get that from a Python textbook. Right. I don't I didn't get that in C at Temple University in Philadelphia. Like it was just here's the stuff, right? Learn it. And if you don't, so I feel like something is holding my hand as I learn. This isn't me not learning things. This is something going, okay, here's I mean, not necessarily here. This is pretty intense, but I could just go and say, hey, I want to learn Python. Can you help me? Yeah. And just talk it out. And there's three models you can do that with. Like it's a teacher at your fingertips.

SPEAKER_01 1:06:38

Is that we built a subnet game, for example, right? Yeah. You might want to go home and build a learn Python game. Right. That's well, how about that, right?

andy lapteff 1:06:46

And and we're of an age. This didn't exist when we were this didn't exist eight months ago. Eight months ago, let alone when I was 18 or 22, or like trying to learn this.

SPEAKER_01 1:06:56

You know, would my story and my narrative Stack Overflow and open up a question, and someone would close it as a duplicate issue or call me a dummy because I didn't know that already, or shame me, right?

andy lapteff 1:07:07

I am just having an epiphany that when I was in college getting my ass handed to me with calculus and C, I did not have access. I had one college professor that was busy and couldn't spend endless time with me going at my pace so that I could learn at my pace. Right. This tooling to me is that in a sense. I have a full-time teacher that can walk me through things. So you can learn anything you want. And I love this, and I'm very excited. Thank you so much for doing this again with us. I love what you're doing. I'm sorry people give you a hard time about any of this. I understand why people feel threatened. I'm not a hundred percent like, I don't know what's coming. And are we all gonna be batteries in the matrix? Is there gonna be universal stuff? Like, are all the jobs gonna go away? I have no idea.

SPEAKER_01 1:07:55

You know, history's been pretty kind to me. I consciously made a career pivot into AI uh three years ago. Because well, because I was because of what it did, how it made me feel, how it made me feel, and the opportunity I think I saw at the time.

andy lapteff 1:08:12

Was there a thing you did that you were like, holy sh like, whoa, yeah.

SPEAKER_01 1:08:16

The the something when I sent like show interfaces to an LLM and it just told me these three interfaces are not healthy, and I didn't have to write the Python to do that. That was like your light bulb, like, wait a minute, something's happening now. Yeah, yeah. And uh, what better way to learn than gamify the subject? And we just showed you how to do that, right? So, this episode has a lot of layers to it. So take your time, and you know us. Reach out to Andy, reach out to me. He did his first one now. I bet you in two weeks, he'll probably have 10 or 15 of these things going, right?

andy lapteff 1:08:47

It's up on GitHub, it's a public reho.

SPEAKER_01 1:08:50

Play the game, make the game better. And uh thanks for joining us from Munich.

andy lapteff 1:08:55

Thanks for being here. It's been a pleasure for all things Art of NetEns. Check out our Linktree at Linktree forward slash Art of NetEnd. Check out our shiny new website at the usual place, artofnetworkengineering.com. There's a really cool resources section that we're adding all kinds of cool stuff to, things you can learn. It's mostly free. There's communities. If there's anything missing or wrong in there, submit an issue in GitHub. Do a pull. I don't even know if I'm saying it right. Yes, do a pull request or a PR. Send them a PR. Yes, send me a PR, send me an issue, we'll get it fixed. We can do this together. As always, thank you so much for watching and listening, and we'll catch you next time on the Art of Network Engineering podcast. Hey folks, if you like what you heard today, please subscribe to our podcast and your favorite podcatcher. You can find us on socials at Art of NetEng, and you can visit Linktree forward slash Art of NetEng for links to all of our content, including the A1 merch store and our virtual community on Discord called It's All About the Journey. You can see our pretty faces on our YouTube channel named the Art of Network Engineering. That's youtube.com forward slash Art of NetEnge. Thanks for listening.