Coding Intentionally for Scale with AI: Building Production AI with Claude Code & Cloudflare

Yeah last couple years have really been exciting, right? Because so much has happened in the world of AI, there's been so many advancements. We have so many kind of tools and things at our disposal that, you know, help us kind of bring our ideas to life. And so kind of the purpose of today is to share some of my experience, um, you know, both as a software engineer, but also as someone who uses AI every day and deploys, um, software to paying customers, um, that often times, you know, require tens of thousands, hundreds of thousands, millions of users to be able to use this and looking at it from the lens of someone who actually monetizes and commercializes the software that he builds. Um, and so I guess with that, I think we'll we'll kick it off here.

So I kind of wanted to start off with, um, talking about Gauls's law, um, which is pretty interesting. This was published back in 1975, but I really think that this strongly applies to the development cycle with AI today. And basically it says that every complex system must evolve from a simple system first.

And so when you think about vibe coding, and I'm gonna make some jabs at vibe coding through this because I'm really not a fan of that term, and, you know, it comes kind of really from the beginning of the title of this pres- presentation using the word intentional. And so vibe coding to me is, I've got this great idea, I'm going to throw it in the computer and spit something out. And really coding with intentionality or coding kind of according to how Gauls's law is arranged is there's a lot of careful planning. You're coming up with systems and processes and architecture, you know, before you even put anything into Claude code.

And I like to kind of jokingly illustrate this, right? You know, vibe coder, Claude, build me a beautiful app that does all the things and works perfectly. And, um, you know, three weeks later, you know, here's here's what you end up with kind of when you're when you're going down that road, right? And it just is a function of, you know, all of the things and planning, right? And so on the left, someone who's an intentional coder, and notice I don't even use the word AI in here, but just someone who's coding intentionally, you know, you're researching your architecture. You're actually thinking about how the database and the data structure needs to be designed. You're doing discovery with the different stakeholders or potential customers on what this thing's going to look like and what it's going to need to do. You're thinking about costs, um, vibe coding doesn't really think too much about costs and, you know, how that works on down the line, and just a lot of detailed planning and execution, you know, versus the spontaneity of things, right?

And so while, um, all of these things are taken into perspective for an intentional coder, um, you know, I be honest, I use AI in every step of the way. Um, it's kind of an accent to the work that I'm also doing and kind of where I'm also contributing to the process. Um, but one thing I really wanted to kind of point out here is that even the things that AI is kind of helping you design and architect up front, you're reviewing, you're critiquing, but I think most importantly, you're aware of everything. And I think that's where one of one of the words that gets left out in vibe coding is the awareness of what was actually built, designed, architected, all of that because, you know, you just threw it in and out you got something.

And basically prompt engineering does not replace planning. So, um, we see that a lot.

And really, you know, Gauls's law, exercise and practice, you know, really you're coming up with kind of your taking your idea, putting it down on paper, trying to come up with all the different features and options and things that this app, piece of software, you name it, should do. And to help you kind of back that off and come up with a simple version of that, you know, I zero-based budgeting's a business term, but basically it's trimming the fat. It's taking a look at all the different features, all the different things that you currently have thought of that would be great, nice to haves, and you're trimming it down to what is minimally necessary for that app, for its purpose. And that kind of gives you a simple starting spot to then build that, and then test the heck out of it, make sure everything's currently working kind of in that simplified model. And then you go to your feature bank and you start pulling new features in, building that, iterating it, testing it, continue adding to it, growing the thing, making it from a simple model to something that's more complex.

And you know, it's kind of a funny Instagram meme if you've if you've seen this little video, but, um, and actually pretty cool. There's a link to it down there, but, you know, that's how we end up with Brad Pitt at the end, right? So...

Um, so tonight's plan, um, so if you guys have your phones, you can scan this QR code. Um, basically it'll give you, uh, just a quick little sign-in. It's going to give you complete access to all of my slides. I'm going to be going over a ton of information pretty quickly. And I think a lot of it you're going to want to maybe leverage and use later on. I've got a lot of links and resources, and this is actually my company, Presentgage. So basically Presentgage, my AI co-presenter, has already learned everything I'm presenting, all of the resources, everything. You can ask it about it while we talk up here or, uh, down the road, um, but mo- more importantly, I wanted everyone here to basically be able to walk away with some content, some new material, some things to go investigate, um, and just to have resources in case you missed writing down a note or or what have you, right? So, um, so we're going to go over some things that I do kind of more on a commercialized enterprise level in t- in Claude code, some of the things you may have heard before, but, you know, I put a little bit different spin on things. Cloudflare's my baby. That's my stack, my go-to, the thing I use all day every day and will build everything all on. Um, so I'll introduce you to that if you maybe don't have some experience there, um, and then chat about some different front-end considerations for the front-end side of the things you might be building, the back-end considerations. Basically things that you have to tell Claude to do that, you know, get taken for granted a lot of the time when you're shipping software. And then the rest is up to you guys, go build stuff.

Um, so really quickly, so, um, I kind of look at Claude AI models as, you know, your set of employees, and you're the CTO, you know, whether you're starting out as a basic software developer or super experienced, you know, really when you kind of put yourself in the driver's seat navigating and managing AI, you know, you kind of need to think of yourself as the CTO and start thinking about other things outside of just like, hey, is this function working? You know, is it returning, you know, the data that I need? But there's a lot of other other things out there. And so, um, anyway, so most of you probably know Claude just launched a new model a couple days ago called Claude Fable. Everybody everybody hear that or get to try it out at least? So, um, you know, I kind of rank these as, you know, who do I need that's best for the job, right? And so, you know, if I'm going to publish something to Cloudflare and maybe do a git push or a git commit, Fable's probably significantly overrated and costing you too much money. Maybe use a different model, a lower priced model for that. Um, but essentially these are your four your four people on your team here. And so some of the stuff that these guys have at their disposal, we know Claude MD skills, MCPs. Uh, I'm going to chat about agent teams. It's something that's not too well known, but you have to manually configure in Claude to leverage. Um, talking about unique agents, GitHub, worktrees hooks, and a few other things here. So...

Uh, Claude MD definitely is something that you need to spend a little bit of time setting up, um, in your, uh, Claude instance and also in your unique projects. And depending upon how deep and how big your projects get, in unique project directories as well. So, you know, Claude MD's essentially your special instruction list to give to Claude that it should abide by whenever it's running code for you. And one thing I want to point out about this because I've seen a lot, uh, of developers where their Claude MD looks like this. And so according to Claude, uh, Claude code, or Anthropic rather, the target size of a Claude MD file should be 200 lines or less. So should be very brief, succinct, very specific, but what Claude allows you to do with that MD file is bring additional instructions in and reference other files within that Claude MD. And so they actually have a very specific way to do that. You kind of at reference with a file structure. You can bring in, you know, maybe some some, uh, code examples, some other things. Um, but, you know, I also want to say that, you know, setting these things up in your specific project directories extremely important too if you've got certain features, certain aspects of the way things need to be coded or reviewed, um, you know, you can take it all the way down. I've got projects like Presentgage that have huge file directories. And so I've had to set up different Claude MDs even, you know, farther down the chain a little bit.

Skills MD, um, hopefully you're using Skills MD today. A lot of great companies that you might be coding with do have kind of pre-made skills that you're able to leverage. Um, but this is kind of in an interesting point about skills that I think a lot of people get wrong is that skills are not just an MD file, but skills are actually folders of instructions. And those folders, you can put in assets, resources, scripts, things that aren't just a markdown file. And so within your Skill MD, you can similar to the Claude MD, reference and import all of these different resources into the skill and leverage them so that you've got some very robust references and examples for skills to leverage. Skills again, very similar to Claude MD, kind of your top level skill file again should be super short and succinct. And the big reason for that is is every time you're running Claude code, Claude code is loading all of your skills into context. And so if you've got big giant skills like this, you're bloating your context in the front. S- Claude will navigate through kind of your skill reference directory tree to get all the other different assets and great stuff. So that's kind of, you know, just a a a note on folder structure. It's also a great way to save money making sure kind of that top level skill, uh, file reference is just lean, mean, and thin, um, and you're referencing things outside of it because they'll get pulled in at when they're needed.

Um, wanted to kind of also just take a step back and how I make some skills. Uh, so, you know, number one, I go and I look, you know, like Cloudflare, Cloudflare's got a fantastic skill, um, so that's easy. Don't have to make anything. But one that I've made that is, uh, really really effective and really good is actually a UI UX skill. Now, I know Claude's kind of got their front-end plugin that you can kind of just add, but I went way above and beyond this. And so what I actually did was I downloaded seven different books on UI UX best practices and basically combined all of those learnings into one single skill. And so kind of just trying to get you outside of the box a little bit of like, okay, where can I actually find skill resources or, you know, if I need Claude to be a professional in a certain area for something I'm developing, what are some of the types of resources I can use? Another one that I've done is going onto websites to the developer docs of the of the website or platform I might be making an integration for, and then actually typing in sitemap.html or dot you know, dash index, there's different variations of how sitemaps are kind of rendered today. But for someone for for a platform or app or something you might be trying to work with that doesn't have a a published set of stuff, rather than trying to go through and scrape every URL and and doc for that platform, if you pull up this sitemap, uh, XML file, it's going to list all of their URLs for that, uh, document reference. You can copy that, put that into let's say regular Claude, say, hey, scan everything, create a big giant markdown document of everything I need to know about all the integrations, the REST APIs, the OAuth token, whatever, and now you can create yourself a skill just based on the navigation file of, uh, whatever website, you know, uh, docs might be available.

And so, um, so yeah, so this is just kind of a a blank, um, you know, maybe prompt that I'd put into Claude as well, you know, taking all that information, tell Claude, you know, build a skill for this, leverage Claude skills. I usually when I'm building my own skills, I'll also reference the links, the developer docs to Claude skills. And my reason for that, I know they have a Claude code skills plugin, but that way I just am assuring myself that whatever version rolled out, new skill feature, XYZ, whatever is kind of getting taken for taken into consideration with that skill design.

MCPs, who's used, uh, an MCP server with Claude code? Okay, about half the room. So skills are kind of like the knowledge to build the house and then the MCP is the tools. And so a lot of companies again, Cloudflare, Google Dev Docs is a great one, um, but a lot of companies out there have, uh, MCP resources that when Claude is building something or when you're planning something with Claude code, it can reach out, leverage additional documentation resources. It can retrieve data, uh, from whatever it is that you might be building with, and bring that into context and help you build something better, smarter, faster. And MCPs I would say are kind of generally in three buckets. You have MCPs that will do code execution on whatever platform you might be working with, Stripe is a great example of that. You can spin up different products and prices and things if you connect the Stripe MCP to to Claude code or even Claude chat. Uh, data retrieval's a great one, uh, works, you know, great with like Supabase or, uh, PlanetScale, Cloudflare, those type of companies, it will also write functions and, you know, write tables and database schema and things like that. Um, then documentation's a great big one. Again I bring out the Google Dev Docs. I use Google Dev Docs quite a bit, you know, if I'm integrating like a, um, uh, an, uh, OAuth sign-in process to someone, you know, use their Gmail or a maps integration, things like that, or even, you know, integrating Gemini into different apps that, you know, might actually go into production. Everything that's that Google has to ship and every API doc is available in their MCP, so it's, you know, Google worthy to check out. Um, and then Cloudflare as well, so, and we'll get into Cloudflare here in a little bit.

This one's, um, not too well known, but and it's kind of hiding in the, uh, Claude docs and, you know, it was in a changelog, I don't know, a while back that came out. And so I've been using this ever since and I know that, you know, you can create your own agents and the Claude has subagents, and, you know, now even, you know, there's Ultra Code that, you know, brings in a whole bunch of different agents and kind of lists them around. Um, but specifically I use agent teams. And agent teams is unique, I'll show you a diagram a little more about how this works in a second. But agent teams is unique because it's a great way to kind of magnify context across whatever it is you're building, uh, also awareness, it leverages git worktrees. But the thing that must be done is you have to go into your claudesettings.json and actually copy and paste the Claude agent teams flag and set it to true because it's not there, it doesn't come when you download it. And so, um, there'll be a link in here when you download the presentation, it'll take you right to it with instructions. Um, but and it's a little small to see, but what's cool about this is that when you start executing your code or, you know, writing your code in agent teams, each team member is going to be basically listed down below. And I I can actually scroll into each team member, see what they're working on, change trajectory if I need to, go back to the team lead, message the team lead, hey, you know, I need to also execute this or, you know, review this code file. But specifically this is also a big feature is the teammates actually communicate with one another, versus subagents which just kind of run in their own blank silo. So, um, what's great, these guys don't step on each other, you can run them all in, uh, git worktrees so they all stay isolated, but they can all communicate together so that if something gets pumped out over here or, hey, I noticed an error on this thing, hey, check this out other teammate because that looks like in your area of operation, and it all shares all of the information of what everybody's working on back up to the team lead.

Um, but I set this up in my Claude MD and it basically is just I use plan mode a lot and we'll talk about that in a second, and I often times iterate multiple times through plan mode. But this prompt basically is going to take whatever plan Claude code generates and then segment that plan into an agent team. And on top of that, it is also being prompted so that every single agent team member in that code execution run should have a one-to-one member that's an audit team member. So whatever work this agent team member does, now a following team member comes in right behind it, checks all of the work, makes sure that everything is copasetic, you'd be surprised how much the audit team member catches when it runs through, and then finally merges everything back into whatever branch you're working on.

Unique agents, and this kind of also answers the gentleman's, uh, question in the back a little bit as well. Um, and so AI agents, you can obviously make your own specific AI agent, and you can also assign that unique agent to a team. I'm going to actually pick on my friend here, Jean. Uh, so Jean does mortgages for a living. And so I bring that up specifically because he's in a highly regulated industry that has a specific way about how you have to say things and that must be right on any kind of public documentation like a website or digital asset. And so Jean might have a mortgage compliance agent that checks everything that gets published to production for NMLS, licensing, whatever standards and making sure that everything is copasetic before it goes out the door. So, just one example, but there's a lot of great ways to kind of specifically use a unique agent, create it, and there's a link on the bottom how to do this.

So GitHub and GitHub worktrees, who here uses GitHub? Almost everybody. So GitHub is essentially your audit chain, your change log, uh, chain of events. Everything that you do should be committed in some form or fashion to your repository that you push up. Um, with agent teams and kind of in that prompt that I, uh, that I put in the beginning, each team member can work in its own siloed worktree that then gets merged together, added to your production code, and just great on documentation, great on rollback if you need it.

This is a biggie, um, and it's a little bit a function of the fact is, you know, like let's say Opus for instance, and even Fable, you know, Fable was starting to get trained what, maybe 6 months, a year ago, more? And so what npm libraries and versions were available at that time of the training? Ones that aren't as recent as today, right? And I would be I would bet that if anybody in the room here has built something recently in Claude code that's used React, and you haven't prompted Claude to use the latest npm version or library, you're probably using React 18, you're probably using at least one I've I've seen libraries be three versions down from the latest, uh, if I haven't actually prompted or talked to Claude about using the latest versions. And so, this is a great prompt again to add to your Claude MD to always use the lated latest version and essentially check frequently for updated versions because it's better code, something might be a security vulnerability, something might be a performance update. And so, this is important, this one's very important.

Claude code as well has essentially, you know, they say hooks, but it's like webhooks. So if you've ever set up an automation in something where there's a trigger and an event, that's essentially what a Claude code hook is. And there's over 30 places for you to choose from where you might want to insert something. Uh, the the plugin that I built has a commit, uh, hook. So it knows at what what point in this workflow that Claude cycles through when you're actually coding, where to fire a commit and when not to. Um, one thing I do with Claude code as well and my personal instances is I have several of these hooks that actually fire off to a database of what's been done, you know, what's been completed, um, what prompt was used, what decision was made, these kind of things and I kind of create a long change history on just my internal usage in Claude. But something for you to take a look at, Claude can help you configure these hooks and do things with them. But, you know, just think of things that, you know, you might be manually telling Claude to do repetitively, and it might be a signal for you to think of, hey, maybe a Claude code hook would work here.

Plan mode, plan mode is where I always start. So despite all of like the discovery and research and user stories and everything I end up, you know, feeding into this, if I'm going in to do something net new, I always start with a plan because it'll it allows me to kind of read what Claude's going to execute on and and it gives me that opportunity to be able to say, no, I don't quite like that, change this, add this. Oh, I forgot one thing, let's add this in here. And a lot of times what my development cycle looks like is plan mode, edit, plan mode, edit it, plan mode, edit it, and I go back through several loops. And if I'm starting a project from scratch, a lot of times I stay right here potentially for a couple days, just getting the plan exactly where I want, how I want, before I actually get in and execute it.

Um, you know, I I just put this up here, you know, pay attention to the change logs. I have a little auto- automation, and you can set it up really easily, so I get Slack every time Claude code updates. Um, kind of a cool one, it just updated, so now subagents can now spawn their own subagents up to five levels deep. So, now we're just kind of building the fan out even even more broadly. Um, and so, you know, pay attention to it just because you might see something in there that, hey, I want to read about that, learn a little more, it'll help me build stuff faster, smarter, cheaper.

So I kind of spoiled it. So I'm a I'm a huge Cloudflare junkie. I mean, I've been building different things in Cloudflare for I think about 10 years now. Um, you know, and since they rolled out their developer platform and workers and all the other goodies beyond that, um, it just bl- it really in my mind, you know, when you compare all of these words against the competitors that you or alternatives that you have to build on, I think it bests them in every every single way. Um, and, um, one is for us, and especially for AI, it's extremely developer friendly, and you can spin things up in Cloudflare extremely fast. Um, it's a very easy to get things connected with Claude code and make Claude code a complete Cloudflare expert when you're building things. Um, every API period on every single product that they offer and every single endpoint is available in their Cloudflare MCP, so it gives you just an extremely robust tool to be able to build, as well as, you know, the authored skills to kind of go along with that. In terms of agents, I know that, you know, we're all probably dabbling a little bit in the agent world, Cloudflare is absolutely the go-to agentic like building platform today. The amount of tools and resources available, they even throw an agents week, I should have put a link in here, but that would be something great to Google is Cloudflare Agents week, uh, just came out, I think a a month ago. They released 12 or 15 new products specific to building agents, uh, within, you know, their their ecosystem. And at the end of the day, um, you know, when you compare costs, especially production level commercialized apps, they best everybody. Um, this is only a handful of the, I don't know, 100 products, 100 different resources Cloudflare has, but, you know, a worker is essentially a serverless function. And so when you deploy to a worker, you're deploying it to 330 locations around the globe, um, that all run just super fast. Um, I deploy my front-end websites and frameworks to that. I also run API gateways and back-ends to process things, you know, call other APIs, etc. R2 is their storage. So, you know, think image storage, video, think blobs of code, documents, you name it, you have it. You know, where R2 bests everybody else is they have zero egress fees. So meaning all you have to do is pay to basically house it in storage there. You don't have to pay to retrieve it. So if you have 10 million people go on and grab the same photo out of your R2 bucket, you're not paying for that traffic. Um, KV, key-value pair, so microsecond data reads, great for caching, authentication. They have, uh, long, um, uh, it you know, about 60 seconds to propagate for write, so again this is more for read heavy, um, operations. D1 is their full database SQLite platform, um, that also has, um, um, um, what's the what's the term there? Uh, basically, you know, multi-reads so, you know, it can read that database from all 330, uh, endpoints across the Cloudflare network. If you're already using an existing database provider, it has Hyperdrive, which allows you to use connection pooling that stays open so instead of having to ping for this and ping for that and ping for this and ping for that, it just stays open in this big open pipeline and is extremely robust and fast. Durable objects, super cool platform, basically a stateful serverless function. So where those are great, think about a chat app and maybe you have multiple chat rooms per chat, you would have a durable object per each chat room that remembers state and has its own D1 database associated to that durable object. So, um, just helps you kind of with a- atomicity of your data storage and speed, super fast. The durable object spins up kind of closest to where it's needed, so especially if you're building something across the country or the globe, you can have multiple durable objects all over the place, very close to the user.

AI gateway, which is really awesome. And so if you're building applications that are then also going onto use AI in some other former stream, one of the things that I've found is how much is this thing going to cost? And so basically what Cloudflare has given us is a is a gateway where you would pipe all of your AI calls through, and it's going to monitor cost, it's going to monitor the prompts that go in, the prompts that go out. It's going to give you an opportunity to install guardrails so if someone's a little wacky and, you know, maybe you shouldn't be responding with your AI to this certain prompt, it can flag those or not, you know, uh, message those back. It can also cache AI prompts and responses, so if the same question gets asked twice, that second question doesn't need to go out to AI and cost you money to return an answer. It's already got it stored and available to return. Um, I mentioned agents, so they have a full agents SDK, um, that uh, one that I just recently built is actually a uh, voice agent that answers my business line. And it's, um, I don't know, I would say 3 to 500 milliseconds in term of latency and it seems like it's an extremely robust conversation, but it also is connected to my Google calendar, and if someone tries to book an appointment, it'll actually book it live with them, then go send them a text message, a follow-up email, that kind of deal. Um, and so all of that was built on the Cloudflare stack, and then uh, as a gentleman up front here mentioned, uh, full DNS routing, um, and just lots lots more things. One thing I will say that's not on here is so Cloudflare does also have several robust AI models that they host locally on their platform. So instead of having to jump to Cloudflare and then jump to another model, you can actually just keep it straight here on Cloudflare. And like the phone system I just mentioned, I'm using Gemma 4 as kind of like the the authority figure in that conversation, and Gemma 4 is installed locally on Cloudflare, and that's one of the ways that I'm able to get such quick latency in, uh, conversation turns back.

And so, yeah, it's simple. You know, go to Cloudflare, set up a free account. Wrangler is their CLI. So, uh, there's docs a docs link here on the bottom, so, you know, just install Wrangler in your CLI, authenticate, and then go into Claude code and say, hey, install the Cloudflare MCP, install the Cloudflare skills, and you're ready to rock and roll on Cloudflare. It's that that easy.

And then here's a list of docs if you downloaded the presentation slide for all of the different products I mentioned.

And so as we kind of transition here into kind of front-end and back-end best practices, um, just kind of wanted to call to attention that, you know, a lot of us are have, you know, gravitated toward either maybe the green area in our software development, the orange area, some of us might be in the middle, but, you know, we don't extend too far out, obviously AI helps us very much kind of extend beyond our boundaries and maybe, you know, where we're familiar or where we're comfortable out or what we like to do. Um, but AI's not perfect and AI isn't, you know, all knowing of all the different things that AI needs to do in a project that might include a front-end and a back-end and authentication and everything. And so, it's important to have some um, some vernacular, some knowledge that, you know, we can actually talk to Claude code about when we're coding and when we're planning so that the important things are being taken into consideration.

Um, going back to Jean's question a little bit earlier, this is generally kind of my process when I'm designing front end. And this has recently changed because, um, Claude rolled out kind of their version of Lovable. So if you go to claude.ai and you go forward slash design, um, it's also it's it's not available in the actual Claude downloaded app, but you can also reach it on claude.ai in your browser. So, it's very much kind of a I would say a Lovable competitor, but I think it does a great job and it really is only purpose is for design. It's not trying to wire up databases and everything else, it's just strictly trying to get you what the front end of whatever it is you're working on is supposed to look like. So, um, so my process generally starts in the regular Claude AI chat either maybe using research or just doing some competitive analysis. Especially if I'm building a website or maybe an interface, I like to have Claude kind of go out research things, see what's out there and available, you know, what things already exist, you know, try not to recreate the wheel, that kind of stuff. I also use Claude AI chat to help me come up with some of my site copy, you know, some of the copywriting, those kind of things, and I'll take whatever Claude AI gives me and then that's when I'll put it into the design, um, maybe put some things into brand colors if I'm working with a client, or maybe coming up with some fresh designs, that kind of thing. Claude AI design will walk you through that pretty quickly. What I do like about it as it's got a pretty decent kind of discovery process, so when you first prompt it, it's going to go in, think about everything, if you've added files and whatnot it's going to read it, but then it's going to start asking you questions about what it is you're trying to build and do and help you to kind of, you know, narrow down the focus and the look and feel and everything. And once I've got that design mock-up and the pages that I want to build and the templates and, you know, some of the general theme aspects built out, then I'll have it export and put that into Claude code and the CLI and kind of take it from there.

In terms of like what my front-end stack looks like, um, this is kind of just over years of trial and error and kind of where I've landed. Um, so Cloudflare actually recently acquired a company called Astro. Astro's awesome, um, basically allows you to ship front-end websites and platforms with minimal to no JavaScript at all in the code. Um, it all so allows you to have what's called React islands. So it still gives you portions and places within that, you know, that web property that is actually natively using React and has a whole bunch of of the React SPA functionality, but it's nested inside of a static website. Um, Tailwind CSS also, that's kind of my choice for design, look and feel, all that good stuff. Um, Cloudflare still today has two options, but I think they're going to be deprecating one of them, and that's Cloudflare Pages. That was kind of their batteries included website platform to go ship everything to. I I launch everything on Cloudflare workers because they've kind of mentioned in documentation that it will likely be replacing pages, and so just good to good to start out with best practices and not have to convert something later on. Um, Astro also has a very robust docs MCP. So again, you you tie Cloudflare's MCP and skill with Astro docs, and then, you know, Tailwind's pretty well known by Claude. I I've created my own Tailwind CSS skill regardless, but basically, you know, you package those together, you've got a great front end for public-facing web web properties. Logged in, um, that's when I'll just use regular React, um, but again, if you remember the prompt from earlier, make sure you're using your uh, import libraries and npm's latest so you're getting the latest version of React and all this other good stuff.

For front end as well, this is kind of a new um, a new gadget we'll say, it's owned by Cloudflare and it's basically you put your web property in here and it scans through 10 or 15 different things to see if that web asset's agent ready. And it will give you an audited list of all the things that you need to add, and in fact it'll also give you a Claude code prompt on what you need to add to that website so that agents, you know, chat GPT, making it an MCP available, there's a a number of different things. If you're an e-commerce site, you know, X402, the whole nine yards, so, uh, just a great tool, it's free, you go on, takes 30 seconds, you get a prescription of exactly how to improve the agent readiness of the website. And it's important because, you know, if any of you have used Google Search Console over the years, you've likely seen your organic traffic there dwindle because things are, you know, being shown in generative search and, you know, all those things and so this just helps you to maximize your opportunities there.

A few notes on front-end performance. Uh, Google Lighthouse I find very important. Um, and, you know, specifically it will give you a nice readout of all the things that need to be critiqued to get the thing to 100. If you're using Astro on your front end, you're likely going to appear in the high 90s regardless, um, but there's still always room for improvement. Claude's also great because Google Chrome has an MCP, and I don't know if many of you knew that or not, but connecting your Google Chrome MCP to Claude code now gives Claude code a set of eyeballs, allows it to go through and, you know, help QA, check performance, check for browser console errors, those kind of things. Uh, compression standards, so, um, you know, Gzip is kind of like the legacy compression standard, then they rolled out Brotli, and then Cloudflare has been working on a project called Z Standard. And so Z Standard takes Brotli basically and puts it on steroids, and it's a simple page rule to enable within your Cloudflare account if you're hosting there, but it basically just minimizes the compression ratio of the website and it's extremely un- fast to unpack on the browser. Um, just helps speed up your web delivery, helps you to um, reduce file sizes, those kind of things. I I've nitpicked on this one for years, and um, it's because I've worked with marketing teams, and marketing teams love to include web assets and images on their website that are this big for something that needs to be this big. And so you have all of that extra bandwidth and, you know, website uh, uh, image size that's being delivered that's unnecessary. And so, you know, making sure you've got appropriately sized uh, images, preferably in a WebP format, um, and you know, make sure for SEO you're including your alt text, your title text in those images, it matters. Google says it matters. Um, Astro also is cool because it will actually go through, scan every image in your web website and co- auto-convert it for you for web to WebP, um, when you do a build. Fonts, make sure you're hosting your fonts locally and from your own files and not via CDN. Again Astro's cool, when you build it will actually download all your any kind of outsource uh, outside fonts, bring them into the local directory so that they're served. It's just so that when the web page loads, it's not having to load additional URLs to go find the font and bring it in. And then just again, you know, avo- especially on a public-facing site, you know, avoid CDN libraries, so just these are some things that help speed things up.

Anybody familiar with HSTS? Cool, two guys. Um, HTTP Strict Transport Security. So, bottom line is that it just makes the site render a little faster and more securely, and it makes sure that all of the URLs and if you configure the the rules properly, that all subdomains, all everything if it's loaded in a browser, have to be loaded via SSL. You can't just HTTP it. And Cloudflare again, easy, you flip one switch, you've got HSTS on your site, but you're not done. That's step one. Step two is is you have to go to this website down here, hstspreload.org, and then submit your website to HSTS preload. And what happens is is Google, Mozilla, Safari, all of the browsers actually download and install all of the URLs that are on this list natively, so it's completely impossible to bypass. So when you try to go to a website that's got HSTS enabled and has been properly submitted, it immediately loads uh, via SSL. Benefit for performance is, this is typically how things run is you put something into your browser, you know, exponentialimpact.com, and a browser has to reach out to the server, see if it's secure or not, and then return it back to the browser to tell the browser how it then needs to negotiate with the server. With HSTS, it's already done because it's loaded in your browser. And it's loaded in everybody's browser, rather. So, it gives you a little speed, gives you a security uh, up-tick, and um, yeah, simple and easy.

When you're building front-end public websites, structured data especially now more than ever is extremely important. This is basically the JSON-LD code that kind of rides in the background and the head section of the website. And, you know, you include things like, you know, business name, phone number, address, one that's extremely important is same as, the same as property in those, you know, Facebook, LinkedIn, maybe another website, maybe a news article, some other business listing, etc. It essentially gives Google and search engines and chat GPT a knowledge graph all about all of your website, and it gives it a source to then connect the dots on some of these disparate properties together. What I've noticed is taking websites that let's say don't have structured data and especially don't have same as, and then implementing it, and then you Google that company or whatever website, you start seeing all the search results of all the things that you've listed in your same as below. Now a best practice when you're doing structured data, um, Yoast actually came up with this if any of you guys are web WordPress familiar, but they came up with kind of an at graph type for when implementing this, I included an article. It's just so that essentially if you put your website in the schema validator and you see all these different disparate schema entries, it's making sure that all of the schema on your website is one cohesive graph, readable, interconnected, making more sense again to search engines, to AI, to LLMs, etc. So I put an article uh, put a URL for um, the validator and then also just some of the Google docs on structured data for best practices because, you know, showing up on Google's not a bad thing.

Semantic HTML very important, and Claude doesn't do it unless you tell it to. Um, you know, basically on the left, you see the div soup, it really has no context in terms of the HTML that's written in the page. And so, prompting Claude code to leverage semantic HTML thoroughly throughout your web property so that it knows what's a header, a nav, a main section, a sidebar, an article, those kind of things. There's about 100 different semantic HTML properties, but these help significantly again just with, you know, LLMs, AI, learning your website better, and Google crawling it better, Bing crawling it better.

Um, transitioning into front-end back-end, um, this is kind of the general I would say architecture that I use when I'm developing with Cloudflare, and when I'm using a front-end and a back-end. And so, you know, the front-end worker we just talked about, your general website, which, you know, your xyz.com. And then I've got a back-end gateway worker that's receiving all of the requests from the front-end and then processing it to other services and resources, usually hosted on Cloudflare, but there might be outside, uh, fetch or HTTP calls as well. But what's great about doing it this way is it allows you to set up a, you know, front-end URL at your domain, an API route on your domain because if you make a a subdomain route, you've got to essentially do a new DNS lookup, this mitigates that. Gives it a secure pathway then to connect to any of your other services, and these are not HTTP, these are bound- bindings. So, there's zero latency from calling a worker or your database or your storage or your whatever, your AI gateway from this gateway worker, zero latency between that call. And so it's extremely secure. One other thing I like about this model is there's at least one degree of separation between your database and your assets between the public-facing website, uh, just a security best practice.

So back-end code quality, important. Um, you know, some of us I think have used maybe ES lint or Prettier over the years. Um, a great new option is called Biome, which basically takes both models uh, into consideration together. Um, and so ES lint, um, you know, if you've ever typed code or seen code and you see all those red underline underneath code because something's wrong or there's some type of typo or something, ES lint is essentially your code checker. Um, when I'm using Cloudflare, um, I do everything in TypeScript. TypeScript is fantastic again because you actually have to meet a certain set of guidelines for there not to be any errors within your code and that it's actually typing things to a string or a number, um, giving it a little bit more substance and some guardrails to kind of code against. When you're using TypeScript and when you're telling Claude code to use TypeScript, tell it to use strict mode. That's basically the smallest lens, you know, that allows things to slip through so it's extremely tight. There's a it's stupid. In TypeScript, there's something called an any type, which basically will let a string, a number, a truthy falsy, you know, a boolean, uh, float through, negates the entire purpose of TypeScript. So tell Claude code, no any types in my code so that everything is properly typed. Um, Cloudflare just made a recent acquisition as well, they bought Vitest and Vite. Um, so now, um, all of the testing modules that you might be using or tests that you're having Claude code write for you on your codebase uh, through Vitest is going to be owned by Cloudflare, um, and updated by Cloudflare. Um, but I use Vitest a lot when I'm writing tests and making sure that my code is good and clean and doing the things I want. Um, database schema, you know, making sure you've got a mechanism to kind of audit your database schema versus all of your function names and all of your function resources. When your codebases start getting extremely big, Claude likes to invent names for table columns especially and so, um, just having a database schema file locally that Claude can access helps you to ensure that you're not going to have an error when someone submits that million dollar lead form on your website. Basic software developer stuff, don't repeat yourself. Something I end up prompting Claude code at some point after I've been building a while, uh, in a project, is I go back through and I say, hey, let's look for opportunities to optimize our uh, codebase and use principles of DRY, do not repeat yourself. And it will inevitably find lots of lines of code to consolidate down, modularize, containerize, whatever you want to call it, uh, but basically simplify your codebase and at the end of the day, the simpler your codebase is, the less Claude has to sift through and the less context it has to use to try to figure out what it's got to do. Separation of concerns, basic uh, database practice, and basic, you know, kind of function practice, you know, making sure you're not lumping everything that your app needs to do in one single function, you've got separation of concerns across the different aspects and operations and things that's happening. And then one last thing with Cloudflare, um, they offer a great like global secrets score, uh, store. So, um, you know, if you need a place to store your Anthropic API, um, key or some key that's used across a lot of products, or projects, you've got a place to put that where it's accessible uh, multiple projects. And then you've also got worker secrets so that you can kind of save API keys and other things just in unique directories and workers.

Idemp- idempotency. There we go. Who's heard of that? Great. Super important, especially when you're dealing with data, especially if you're dealing in like e-commerce or, you know, email or chat, communication, anything that's got an opportunity to create duplicates. So basically what the example here is is someone goes on your website and tries to order something, order goes through, but then they put the exact same order through right again, maybe they double click the button or something silly and that order goes back through, creates a duplicate, creates a duplicate, and creates a duplicate. And so essentially it serializes all the data going inside your database and makes sure that it's actually truly unique and actually should be written to the database. And if it finds that hey, this is actually a duplicate, you get to save all of the server resources on actually the write and the response there and just return a cash replay instead. And so, idempotency, is a um, just another thing to kind of mention to Claude code, you know, about your data and your data submission and everything, making sure that you've got some type of mechanism to uh, course correct and help with this because it, um, it gets important, and it also gets expensive especially as the scale of your website magnifies.

General back-end database architecture, you know, I think when I first, you know, came out of cold uh, code school, it was like throw everything into the database, in one big database and, you know, now especially something with Cloudflare, Cloudflare allows you to have 50,000 D1 databases spun up at one time. Um, and then durable objects on top of that greatly magnifies that. And so I just kind of throw this up here because instead of trying to throw the entire globe into one single database, well maybe maybe California needs its own database, maybe Nevada needs its own database, or even, you know, a city level, how can you make your data more atomic, more granularized? I brought up the chat uh, example earlier, you know, each chat room might have its own durable object, aka it's got its own stateful persistence, you know, D1 attached to it. Um, and benefits of doing things this way too is databases generally live in one spot. And so, when you have multiple databases and you've kind of made a little a- atomicity out of everything, you can have databases that can be read closer to, you know, the origin of where the the request is coming from, excuse me. Um, and then, you know, speed, security, that kind of thing, just allows you to have a little more greater uh, separation of concerns.

A few notes on optimization, you know, once you've got the great big database and everything set up and configured, make sure that you're setting up indexes for, you know, all of the queries, especially the most frequently used queries. Um, SQLite / Cloudflare D1 uses a tool called Pragma, which will help you kind of identify your most common database queries and then help you set indexes for those. Indexes are essentially caches of um, database calls, right? And so instead of having to re-look up the same stuff over and over and over again, that sits in cache, it optimizes it, uses way less um, resources.

Now this one especially, Claude code's very bad at because it loves to pump this out, and pretty much every web tool I've used, or or AI builder tool I've used, does the same thing. And there are called N+1 queries. So essentially, uh, a project uh, recently worked on was a uh, uh, national CRM, a custom CRM for a client. And, kind of just after some of the initial work done, you know, I'm going in and looking at the network resources in Google Chrome uh, console, and every single record is just a database ping, you know, going through the worker just bing, bing, bing, bing, bing, bing, bing, bing, bing, bing, bing, bing, bing, bing, bing, bing, you know, just loading up. And so, especially with apps that have a lot of data, have to do a lot of database intensive stuff, you can batch a lot of that together into a single database call so that it runs server side, runs once, comes back versus constant back and forth between your front-end, back-end, and database. Uh, read replication, if you've got stuff that needs to render fast, basically it's a way of duplicating your database all across the world and having a closer version of it near you for when it's read. Um, limiting use of select all, you know, if you're in SQL. Um, you know, select all just calls every single column, you know, for that database to mine it through so if you can narrow as much and limit select all as much as possible, and then connection pooling as well, just a way to kind of keep the connection between your database and your back-end open so you've got a constant pipeline of data going back and forth.

Um, a little bit on docs, you know, Postman's pretty great, you know, when it gets to that stage of having to document your API and have a a living resource somewhere. Swagger's uh, kind of new, um, they're using the OpenAPI standard with basically self-contracting and documenting endpoints. And so it's kind of cool when you've got uh, your REST endpoints and everything throughout your code, you essentially make comments throughout and then Swagger goes through, reads the comments and creates your docs for you. Um, so if you actually have to do uh, documentation on any kind of code or routes that you've done, kind of a neat tool.

Observability, bottom line, slow equals expensive, and so, um, you know, observability isn't just for errors, going and finding what's wrong, but it's also going in and finding out how long it took something to run. Uh, because again time on the clock is essentially time and money out of your pocket. And so, part of why you want to build, you know, separation of concerns, build atomically, have multiple points of observability so that you can go in and look at a specific component and see that oh, that one's running 10 times slower than everything else here and we need to go in and optimize this piece and get things moving faster. Uh, Cloudflare again has some great observability tools, uh, in the dashboard via their MCP, uh, but also you can run things live via a tail worker. So basically, you can run your code here and then have it documented in the CLI over here, every single action and process that runs and have Claude code audit that process and audit log for you.

So we're going to go by these, uh, one by one, no, I'm ge- I'm kidding. Um, so basically just wanted to give you kind of a glossary of things to consider when you're doing a front-end and a back-end. And so these are all things you can throw into Claude or go and research. I would actually recommend just skimming it, see like, oh, I never heard of that, let me go look at it. Um, but they are important, they're things that Claude code often times doesn't do for you, and it requires a little bit of prompting. And then same thing for the back-end here. So...

And you guys are coders, so you should know what that says.

Go build stuff. Thank you.