<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Forrester Terry</title>
    <description>The latest articles on DEV Community by Forrester Terry (@sweetpapa).</description>
    <link>https://dev.to/sweetpapa</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F988039%2F6b9991e3-2671-4e47-9db2-206846065c1e.jpeg</url>
      <title>DEV Community: Forrester Terry</title>
      <link>https://dev.to/sweetpapa</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/sweetpapa"/>
    <language>en</language>
    <item>
      <title>Your AI Coder Will Go Rogue If You Let It (Here's Some Tips to Stay in Control)</title>
      <dc:creator>Forrester Terry</dc:creator>
      <pubDate>Thu, 22 Jan 2026 05:37:04 +0000</pubDate>
      <link>https://dev.to/sweetpapa/your-ai-coder-will-go-rogue-if-you-let-it-heres-some-tips-to-stay-in-control-10pn</link>
      <guid>https://dev.to/sweetpapa/your-ai-coder-will-go-rogue-if-you-let-it-heres-some-tips-to-stay-in-control-10pn</guid>
      <description>&lt;h1&gt;
  
  
  Lessons from Building with AI Coding Assistants
&lt;/h1&gt;

&lt;p&gt;So I've been building a lot of stuff with AI coding assistants lately—like, a &lt;em&gt;lot&lt;/em&gt;. And one thing I keep running into is this: the AI will just... make decisions for you if you're not paying attention. Sometimes good ones! But sometimes it'll confidently march you right off a cliff.&lt;/p&gt;

&lt;p&gt;This isn't me hating on AI coding. I'm fully bought in at this point. But there's a difference between &lt;em&gt;using&lt;/em&gt; an AI coder and actually &lt;em&gt;directing&lt;/em&gt; one.&lt;/p&gt;

&lt;p&gt;Here's some stuff I've learned that might save you some headaches.&lt;/p&gt;




&lt;h2&gt;
  
  
  Challenge It When It Changes Your Approach
&lt;/h2&gt;

&lt;p&gt;AI coders have opinions. They'll make architecture decisions without asking you first, and if you're not watching closely, you might not even notice until way later.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Websocket Ambush
&lt;/h3&gt;

&lt;p&gt;I was building something using pipes—a deliberate choice for my use case. Somewhere mid-conversation, the AI just... switched to websockets. No "hey, should we consider this?" No discussion at all. It just started writing websocket code like we'd agreed on it.&lt;/p&gt;

&lt;p&gt;We hadn't agreed on anything.&lt;/p&gt;

&lt;p&gt;I had to stop and say "no, go back, I want pipes for this." And it did! Immediately! But if I hadn't caught it, I would've ended up with an architecture I didn't want.&lt;/p&gt;

&lt;h3&gt;
  
  
  The "Write Scripts to Disk" Thing
&lt;/h3&gt;

&lt;p&gt;Same project, different issue. The AI started writing executable scripts to disk as part of its solution. Technically functional? Sure. A good idea in most production environments? Absolutely not—that's a security red flag in a lot of contexts.&lt;/p&gt;

&lt;p&gt;I had to explicitly ban that approach before it became a problem.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The pattern:&lt;/strong&gt; AI optimizes for "does it work." You have to optimize for "is this appropriate for my situation"—security, compliance, maintainability, all that stuff that AI doesn't naturally think about.&lt;/p&gt;




&lt;h2&gt;
  
  
  Tell It to Do Its Own Testing
&lt;/h2&gt;

&lt;p&gt;This one saves me a bit of time: &lt;strong&gt;make the AI test its own code before giving it to you.&lt;/strong&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  The Bad Command Loop
&lt;/h3&gt;

&lt;p&gt;I kept getting commands and code that would fail. Copy, paste, error. Copy, paste, different error. Over and over. Basically the AI was using me as its test runner.&lt;/p&gt;

&lt;p&gt;Then it clicked—the AI can execute commands itself. It can iterate on its own. It can figure out what actually works before handing me something.&lt;/p&gt;

&lt;p&gt;So I told it: "Test this yourself first. Iterate until it works, then show me the solution."&lt;/p&gt;

&lt;p&gt;It actually worked!&lt;/p&gt;

&lt;p&gt;It ran through several failed attempts on its own, found something that actually worked, and gave me that. All that debugging time I would've spent? Gone. The AI did it for me.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The takeaway:&lt;/strong&gt; If you're testing code that keeps failing, ask yourself—could the AI have tested this itself? If yes, just tell it to do that. You're the architect, not the test runner.&lt;/p&gt;




&lt;h2&gt;
  
  
  Sometimes You Need Research, Not Code
&lt;/h2&gt;

&lt;p&gt;Sometimes the AI is stumbling because it doesn't have enough context. It's trying things, hitting walls, trying more things—and you're both stuck.&lt;/p&gt;

&lt;h3&gt;
  
  
  Using Another AI to Unblock the First One
&lt;/h3&gt;

&lt;p&gt;I had my AI coder grinding through a problem, throwing idea after idea at it. Nothing was sticking. We were both frustrated (yes, I personify it, don't judge me haha).&lt;/p&gt;

&lt;p&gt;Here's what I ended up doing: I opened a separate chat with Gemini Pro—not to write code, but just to talk through approaches. "Hey, I'm trying to do X. What are the proper patterns for this? What should I be thinking about?"&lt;/p&gt;

&lt;p&gt;Gemini did research from the web and gave me a solid breakdown of the right approach. I took that conversation and fed it to my AI coder.&lt;/p&gt;

&lt;p&gt;Instant clarity. It stopped flailing and just... did the thing.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why this works:&lt;/strong&gt; Your coding AI is optimized for implementation. Sometimes you need a "thinking" conversation before you can have a "building" conversation. Just like having your requirements figured out before you start designing or building.&lt;/p&gt;

&lt;p&gt;If you have access to Deep Research tools, those work great for this. Let the research tool go deep on the problem, then bring those findings back to your coder.&lt;/p&gt;




&lt;h2&gt;
  
  
  AI-Generated Deployment Scripts (Carefully!)
&lt;/h2&gt;

&lt;p&gt;Okay, this one needs a big warning label, but it's too useful not to mention.&lt;/p&gt;

&lt;p&gt;You can have your AI write helper scripts for cloud CLI commands—deployments, configuration, infrastructure setup. This saves a ton of time. &lt;strong&gt;But you absolutely have to review everything before running it.&lt;/strong&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Terraform Became My Friend
&lt;/h3&gt;

&lt;p&gt;I needed to set up a backend app—VM or Cloud Run, SSL certs, static IPs, load balancer stuff. Lots of moving pieces.&lt;/p&gt;

&lt;p&gt;I used Deep Research first to figure out the best approach. What's the right pattern? What services do I need? What order should things happen?&lt;/p&gt;

&lt;p&gt;Then I had the AI generate a Terraform script based on that research. The script pre-checked dependencies, let me input my variables cleanly, created everything in the right order, and actually worked on the first run.&lt;/p&gt;

&lt;p&gt;Honestly, this whole experience made me fall in love with Terraform. AI generating infrastructure-as-code plus Terraform's built-in safety features (&lt;code&gt;plan&lt;/code&gt; before &lt;code&gt;apply&lt;/code&gt;) is a really nice combo.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Giant Caveat
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;ALWAYS ALWAYS review deployment scripts before running them.&lt;/strong&gt; Check for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Destructive actions (&lt;code&gt;destroy&lt;/code&gt;, &lt;code&gt;delete&lt;/code&gt;, &lt;code&gt;rm -rf&lt;/code&gt; anything)&lt;/li&gt;
&lt;li&gt;Resource creation that might cost more than you expected&lt;/li&gt;
&lt;li&gt;Security group or IAM changes that could open holes&lt;/li&gt;
&lt;li&gt;Anything touching production data&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The AI doesn't understand the blast radius of infrastructure changes the way you do. It will happily generate a script that nukes your database if that's technically what you asked for.&lt;/p&gt;

&lt;p&gt;For bigger infrastructure stuff, Terraform is great specifically because it has built-in safety mechanisms. But even then—review the plan output before applying.&lt;/p&gt;




&lt;h2&gt;
  
  
  Always Review, Always Ask Why
&lt;/h2&gt;

&lt;p&gt;This is kind of the meta-lesson that wraps everything else together.&lt;/p&gt;

&lt;p&gt;AI coding assistants will give you code. Lots of it. Fast. The temptation is to just ship it and move on. Don't.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What reviewing actually means:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Actually read the code. Not skim—read. Does the logic make sense?&lt;/li&gt;
&lt;li&gt;Ask for reasoning. "Why did you use this approach?" is totally valid. If the AI can't explain it well, that's a red flag.&lt;/li&gt;
&lt;li&gt;Ask for documentation. Ask the AI to document how things work, or document design decisions etc. post development.&lt;/li&gt;
&lt;li&gt;Give feedback. "This is too complex" or "Can we simplify?" pushes it toward better solutions.&lt;/li&gt;
&lt;li&gt;Check the edges. AI is great at the happy path. It's often weak on error handling, edge cases, and security stuff.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Wrapping Up
&lt;/h2&gt;

&lt;p&gt;After doing a lot of AI-assisted development, my productivity has genuinely gone way up. But not because the AI replaced my thinking—because it amplified it.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The pattern that works:&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;You decide the approach.&lt;/strong&gt; AI implements it.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;You validate the output.&lt;/strong&gt; AI iterates based on your feedback.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;You catch the context-specific stuff.&lt;/strong&gt; AI doesn't know your infrastructure, your security requirements, or your users.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;You stay curious.&lt;/strong&gt; Ask why. Push back. Give direction.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;We're the architects.&lt;/p&gt;

</description>
      <category>programming</category>
      <category>ai</category>
      <category>agents</category>
      <category>beginners</category>
    </item>
    <item>
      <title>A.I. — The Amplifier: From Software Developer to Software Creator 🚀</title>
      <dc:creator>Forrester Terry</dc:creator>
      <pubDate>Tue, 20 Jan 2026 16:00:00 +0000</pubDate>
      <link>https://dev.to/sweetpapa/ai-the-amplifier-from-software-developer-to-software-creator-2nb9</link>
      <guid>https://dev.to/sweetpapa/ai-the-amplifier-from-software-developer-to-software-creator-2nb9</guid>
      <description>&lt;p&gt;A.I. will make the bad "badder", the rich richer, the poor poorer, the hopeful more hopeful, the doubtful more doubtful. It's given people the ability to do more with less—and less with more. It is the double-edged sword that is both blessing and curse.&lt;/p&gt;

&lt;p&gt;The question isn't &lt;em&gt;whether&lt;/em&gt; A.I. will be good or bad for humanity. It'll be both. We know this.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The real question is:&lt;/strong&gt; How much of a force multiplier will it be on the things that matter most? And where will that take us?&lt;/p&gt;




&lt;h2&gt;
  
  
  What I'm Seeing Out There 📊
&lt;/h2&gt;

&lt;p&gt;Let me be honest about what's happening in our industry right now.&lt;/p&gt;

&lt;p&gt;Junior developer roles have collapsed. Entry-level tech postings fell &lt;a href="https://www.hiringlab.org/" rel="noopener noreferrer"&gt;60% between 2022-2024&lt;/a&gt;, and Big Tech hired only 7% new grads in 2024. At the same time, the barrier to entry for &lt;em&gt;creating&lt;/em&gt; has never been lower. &lt;a href="https://suno.com" rel="noopener noreferrer"&gt;Suno&lt;/a&gt; has 12+ million users making music. Over 15 billion AI images have been generated. GitHub Copilot users complete tasks &lt;a href="https://github.blog/news-insights/research/research-quantifying-github-copilots-impact-on-developer-productivity-and-happiness/" rel="noopener noreferrer"&gt;55% faster&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;A.I. makes mistakes AND solves age-old math problems. It takes jobs and creates some. It's used to &lt;a href="https://www.thelancet.com/journals/lanonc/article/PIIS1470-2045(23)00298-X/fulltext" rel="noopener noreferrer"&gt;improve breast cancer detection throughput by 44%&lt;/a&gt;, and it's used in warfare and surveillance.&lt;/p&gt;

&lt;p&gt;Among all this -- it is the end of software developers as we knew them—and the start of something new: &lt;strong&gt;The Software Creator.&lt;/strong&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  ❓ "Should I Still Learn Software Development?"
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Short answer: Yes.&lt;/strong&gt; These tools are not bulletproof. Not even close.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fq08bybekbx41bapnpk9d.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fq08bybekbx41bapnpk9d.png" alt=" " width="800" height="480"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  What I've Learned About A.I. Capabilities
&lt;/h3&gt;

&lt;p&gt;I think of A.I. agents like employees I'm onboarding. Right now, A.I. performs at junior-to-mid level for routine, well-defined tasks—but falls &lt;em&gt;well below&lt;/em&gt; junior on complex system changes and architectural decisions.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Task Type&lt;/th&gt;
&lt;th&gt;AI Performance&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Single functions (&lt;a href="https://github.com/openai/human-eval" rel="noopener noreferrer"&gt;HumanEval&lt;/a&gt;)&lt;/td&gt;
&lt;td&gt;90-96% ✅&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Standard GitHub issues&lt;/td&gt;
&lt;td&gt;70-76% 🟡&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Complex real-world problems&lt;/td&gt;
&lt;td&gt;17-23% ❌&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;The breadth of knowledge is WIDE, but not DEEP. I learned this the hard way building an AI-powered chatbot for my team—the thing could answer simple questions beautifully, but the moment someone asked something that required understanding our specific infrastructure (or a tool call gave bad info), it would confidently hallucinate an answer that sounded perfect but was completely wrong.&lt;/p&gt;

&lt;p&gt;Additionally if you don't know how to ask, &lt;em&gt;"WHY are you doing it that way?"&lt;/em&gt; or better yet, &lt;em&gt;"WHOA, please don't do that, do this instead,"&lt;/em&gt; you'll get taken down a rabbit hole of confident failure.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Real Productivity Numbers (They're Messier Than You Think)
&lt;/h3&gt;

&lt;p&gt;You've probably heard "AI gets you 80% there." The data tells a more honest story.&lt;/p&gt;

&lt;p&gt;GitHub Copilot generates &lt;a href="https://github.blog/news-insights/research/survey-ai-wave-grows/" rel="noopener noreferrer"&gt;46% of code&lt;/a&gt; for active users, but the acceptance rate averages only &lt;strong&gt;30%&lt;/strong&gt;—meaning 70% of suggestions get rejected. &lt;a href="https://survey.stackoverflow.co/2025/" rel="noopener noreferrer"&gt;66% of developers&lt;/a&gt; say their top frustration is "AI solutions that are almost right, but not quite." And here's the kicker: a &lt;a href="https://metr.github.io/autonomy-evals-guide/elicitation-protocol/" rel="noopener noreferrer"&gt;METR randomized controlled trial&lt;/a&gt; found developers actually took &lt;strong&gt;19% longer&lt;/strong&gt; with AI—while &lt;em&gt;believing&lt;/em&gt; they were 20% faster. 🤯&lt;/p&gt;

&lt;p&gt;I've felt this myself. There's something intoxicating about watching code appear on your screen. You &lt;em&gt;feel&lt;/em&gt; productive. But then you spend an hour debugging something the AI introduced three suggestions ago, and you realize your "80% there" was actually "60% there with new bugs."&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Realistic ratio: 60/40 or 70/30.&lt;/strong&gt; That "last mile" is longer than it looks.&lt;/p&gt;




&lt;h2&gt;
  
  
  🛠️ What Should You Actually Learn?
&lt;/h2&gt;

&lt;p&gt;You don't need to know everything overnight. I didn't. I came into this field without a computer science degree and learned everything on the job over 11+ years. Buy tools for your garage as you need them—same principle here.&lt;/p&gt;

&lt;h3&gt;
  
  
  Start With the Foundations
&lt;/h3&gt;

&lt;p&gt;Learn the basics first: variables, functions, classes. These are universal to any modern language. Here's my unpopular opinion: build something simple &lt;em&gt;without&lt;/em&gt; A.I. first. That trial-and-error is what makes you stronger. It's what lets you recognize when the AI is leading you astray.&lt;/p&gt;

&lt;p&gt;And learn Git. Non-negotiable. This will be important for keeping your code and the A.I.'s code on track.&lt;/p&gt;

&lt;h3&gt;
  
  
  Then Build Your Stack
&lt;/h3&gt;

&lt;p&gt;Backend fundamentals matter—Firebase, Express/Node, Flask. Understand what an API &lt;em&gt;is&lt;/em&gt; and how to stand one up. If you're working with AI agents, TypeScript + Zod (or Pydantic for Python folks) become critical. Type definitions and data validation are how you keep AI-generated code from doing something unexpected at runtime.&lt;/p&gt;

&lt;p&gt;Pick up basic testing with Jest or pytest. Here's a common trick I practice: make the AI write tests, then make it run them. It's a forcing function for quality.&lt;/p&gt;

&lt;p&gt;Security basics should be non-negotiable too. Don't put secrets in frontend code (I've seen this more than I'd like to admit). Understand OAuth and auth flows. Use a secret manager.&lt;/p&gt;

&lt;h3&gt;
  
  
  Level Up When You're Ready
&lt;/h3&gt;

&lt;p&gt;Cross-platform frameworks like Electron, Capacitor, and Quasar open up new possibilities when you're ready for them. Docker is technically a "bonus" but honestly, just learn it. Your future self will thank you.&lt;/p&gt;




&lt;h2&gt;
  
  
  💼 "How Do I Get a Job?"
&lt;/h2&gt;

&lt;h3&gt;
  
  
  If You're Starting from Zero
&lt;/h3&gt;

&lt;p&gt;The barrier for entry is higher now. I won't sugarcoat that. But I've hired people, and I can tell you what actually moves the needle.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;First, build a real portfolio WITH A.I.&lt;/strong&gt; Release software on GitHub that's actually useful. Demonstrate you can go from idea to reality. But here's the crucial part: &lt;em&gt;understand it under the hood and be able to explain it.&lt;/em&gt; I've interviewed candidates who built impressive-looking projects but couldn't explain basic architectural decisions. That's a red flag.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Second, bring genuine enthusiasm.&lt;/strong&gt; I'll take someone who's green but humble and eager over someone excellent but difficult to work with every single time. Your soft skills matter more than ever in a world where AI can write code. The human stuff—collaboration, communication, judgment—that's your edge.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Third, develop AI skills beyond basic prompting.&lt;/strong&gt; Job postings for "prompt engineers" &lt;a href="https://www.hiringlab.org/" rel="noopener noreferrer"&gt;peaked in April 2023&lt;/a&gt; and have plateaued since. Basic prompting is table stakes now. What employers actually want is system design and architecture, MLOps and production deployment, LLM fine-tuning and RAG development, and critical evaluation of AI outputs.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv3cjzwqmw7igmxvcv0lc.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv3cjzwqmw7igmxvcv0lc.jpeg" alt=" " width="800" height="436"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Jobs mentioning AI skills pay a &lt;a href="https://www.cnbc.com/2024/03/04/employees-with-ai-skills-can-expect-a-25-percent-salary-premium.html" rel="noopener noreferrer"&gt;28% premium (~$18K/year)&lt;/a&gt;, rising to 43% for multiple AI skills.&lt;/p&gt;

&lt;h3&gt;
  
  
  If You're Mid-Level or Beyond
&lt;/h3&gt;

&lt;p&gt;&lt;del&gt;Move into management because those jobs are safer. Right???&lt;/del&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Nah.&lt;/strong&gt; The data actually shows middle managers comprised &lt;a href="https://www.revelio.com/" rel="noopener noreferrer"&gt;32% of 2023 layoffs&lt;/a&gt;, and companies like Microsoft, Amazon, and Meta are explicitly flattening org structures. "The Great Flattening" is real. I say this as someone in management—the title alone doesn't protect you.&lt;/p&gt;

&lt;p&gt;What actually works is becoming a force multiplier. Use A.I. to do an amazing job at what your employer cares about. I've built reports and automations that would have taken weeks and compressed them into days. That's the kind of thing that gets noticed.&lt;/p&gt;

&lt;p&gt;Learn the tools deeply. Explore, play around, but focus on what connects to your actual job. Build with A.I. agents—learn how to orchestrate them, multitask with them, and free up your time for the work that actually requires human judgment.&lt;/p&gt;

&lt;p&gt;Lead without the title. Technical design, mentorship, and judgment are human superpowers. No AI is going to sit down with a frustrated junior dev and help them work through impostor syndrome.&lt;/p&gt;

&lt;p&gt;This is what transforms you from Software Developer → &lt;strong&gt;Software Creator&lt;/strong&gt; → &lt;strong&gt;A.I. Orchestrator&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  🎮 How I Got Started with A.I.
&lt;/h2&gt;

&lt;p&gt;Here's roughly how my journey went:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Phase&lt;/th&gt;
&lt;th&gt;What I Learned&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;🎨 &lt;strong&gt;Image Gen&lt;/strong&gt;
&lt;/td&gt;
&lt;td&gt;Started with Stable Diffusion. Check out &lt;a href="https://flux-ai.io/" rel="noopener noreferrer"&gt;Flux&lt;/a&gt;, &lt;a href="https://deepmind.google/technologies/imagen-3/" rel="noopener noreferrer"&gt;Imagen&lt;/a&gt;, Midjourney&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;💬 &lt;strong&gt;Chatbots&lt;/strong&gt;
&lt;/td&gt;
&lt;td&gt;ChatGPT, Claude, Gemini. Learned context windows, tokens, prompting&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;🤖 &lt;strong&gt;Coding Agents&lt;/strong&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;a href="https://cursor.sh/" rel="noopener noreferrer"&gt;Cursor&lt;/a&gt;, &lt;a href="https://codeium.com/windsurf" rel="noopener noreferrer"&gt;Windsurf&lt;/a&gt;, Claude Code—AI edits code locally&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;🔧 &lt;strong&gt;Building Agents&lt;/strong&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;a href="https://www.crewai.com/" rel="noopener noreferrer"&gt;CrewAI&lt;/a&gt;, &lt;a href="https://www.langchain.com/" rel="noopener noreferrer"&gt;LangChain&lt;/a&gt;, MCP servers&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;🔬 &lt;strong&gt;Deep Research&lt;/strong&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;a href="https://deepmind.google/technologies/gemini/" rel="noopener noreferrer"&gt;Gemini Deep Research&lt;/a&gt;, NotebookLM for studying&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;🏠 &lt;strong&gt;Running Local&lt;/strong&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;a href="https://ollama.ai/" rel="noopener noreferrer"&gt;Ollama&lt;/a&gt;, vLLM, fine-tuning your own models, RAG&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Take it one step at a time. I spent months in each phase before moving to the next. You don't need all of this at once.&lt;/p&gt;




&lt;h2&gt;
  
  
  ⚠️ Real Talk: What's Coming
&lt;/h2&gt;

&lt;p&gt;I'd be crazy to tell you not to be concerned. A lot is changing. But here's how I think about it:&lt;/p&gt;

&lt;p&gt;A.I. amplifies what people already do—good and bad. People generally want everyone to be well off (so they can be well off too). And people don't like being squashed or oppressed.&lt;/p&gt;

&lt;p&gt;We're going to figure things out, as we have before. But it'll take work.&lt;/p&gt;

&lt;h3&gt;
  
  
  What About "The Next Big Thing"?
&lt;/h3&gt;

&lt;p&gt;You might hear about transformer alternatives, neurosymbolic AI, quantum computing integration. Here's my honest read on these:&lt;/p&gt;

&lt;p&gt;Transformer alternatives like hybrid models exist (Jamba, Granite 4.0), but transformers remain central. We're seeing augmentation, not replacement. Neurosymbolic AI produced impressive results with &lt;a href="https://deepmind.google/discover/blog/alphageometry-an-olympiad-level-ai-system-for-geometry/" rel="noopener noreferrer"&gt;AlphaGeometry&lt;/a&gt;, but no major LLM has shipped a general product yet. And quantum + AI? Jensen Huang estimates &lt;a href="https://www.nvidia.com/en-us/" rel="noopener noreferrer"&gt;15-30 years&lt;/a&gt; for "very useful" applications.&lt;/p&gt;

&lt;p&gt;These are &lt;strong&gt;research directions to watch&lt;/strong&gt;, not imminent paradigm shifts. Focus on what works today.&lt;/p&gt;




&lt;h2&gt;
  
  
  🎯 The Bottom Line
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Yes, still learn software development.&lt;/strong&gt; It's still worthwhile.&lt;/p&gt;

&lt;p&gt;But understand this: the role is transforming. The developers who thrive will be the ones who become &lt;strong&gt;creators&lt;/strong&gt;—people who can direct A.I. tools with expertise, know when to trust output and when to override, build entire systems (not just write code), and amplify their output through orchestration.&lt;/p&gt;

&lt;p&gt;Be kind to each other, and be kind to yourself. Be curious.&lt;/p&gt;

&lt;p&gt;The future will be great and problematic. You need to know how to spot deepfakes, understand security risks, and leverage the tools—otherwise you'll be pushed out.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;But you've got this.&lt;/strong&gt; 🤝&lt;/p&gt;




&lt;p&gt;&lt;em&gt;What's your experience with A.I. in your development workflow? Are you a skeptic, an enthusiast, or somewhere in between? Drop a comment below!&lt;/em&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>webdev</category>
      <category>career</category>
      <category>beginners</category>
    </item>
    <item>
      <title>I Have Bipolar II and I'm a Software Engineering Manager. Here's What Actually Works.</title>
      <dc:creator>Forrester Terry</dc:creator>
      <pubDate>Sun, 18 Jan 2026 17:00:00 +0000</pubDate>
      <link>https://dev.to/sweetpapa/i-have-bipolar-ii-and-im-a-software-engineering-manager-heres-what-actually-works-c14</link>
      <guid>https://dev.to/sweetpapa/i-have-bipolar-ii-and-im-a-software-engineering-manager-heres-what-actually-works-c14</guid>
      <description>&lt;p&gt;I've been in higher education IT for over 11 years. I've gotten "Exceptional Year" ratings. I manage a team of four devs and a portfolio of 20+ apps.&lt;/p&gt;

&lt;p&gt;I also have Bipolar II, diabetes, and I'm a recovering alcoholic — sober since 2020.&lt;/p&gt;

&lt;p&gt;If you're a dev managing your own stuff, this is for you. Not quite the “inspirational” version, but real nonetheless.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Real Version
&lt;/h2&gt;

&lt;p&gt;The performance reviews say things like "force multiplier" and "technical backbone." What they don't capture: the hypomanic phases where I'd fire off more ideas than anyone could implement, followed by crashes where getting out of bed felt impossible. The time I sent an apology email to my entire IT org while manic, outing myself as bipolar to hundreds of people. The years I used alcohol to manage what my brain wouldn't.&lt;/p&gt;

&lt;p&gt;When I got sober, I replaced drinking with work. Classic move, right? The dopamine hit of shipping code. The validation of being the guy who solves the "impossible" problems.&lt;/p&gt;

&lt;p&gt;Then I lost my brother. And somewhere in the grief, I realized I was going to burn out completely if I didn't change how I thought about all of this.&lt;/p&gt;




&lt;h2&gt;
  
  
  Your Health Isn't a Side Quest
&lt;/h2&gt;

&lt;p&gt;Here's what took me way too long to accept: managing my health isn't something I do &lt;em&gt;around&lt;/em&gt; my job. It IS the job. Everything else comes after. Especially more so as I stepped into leadership and became responsible for others.&lt;/p&gt;

&lt;p&gt;Bipolar and diabetes create this feedback loop — mood affects blood sugar, blood sugar wrecks mood, stress spikes everything. It's not a metaphor. It's just how the body works.&lt;/p&gt;

&lt;p&gt;I tried to brute-force through it for years. Push harder, sleep less, prove I could keep up. You know where that leads.&lt;/p&gt;




&lt;h2&gt;
  
  
  Spoon Theory, Basically
&lt;/h2&gt;

&lt;p&gt;If you don't know Spoon Theory: you start each day with limited "spoons" (energy units). Every task costs spoons. When they're gone, they're gone. Borrow from tomorrow and you pay interest in a crashed mood or spiked glucose.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F295376erygh9zabh4y9i.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F295376erygh9zabh4y9i.jpeg" alt=" " width="800" height="436"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;So I stopped organizing work by priority and started organizing by energy cost:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;High-energy stuff&lt;/strong&gt; (architecture, hard conversations) → morning when I'm sharp
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Medium stuff&lt;/strong&gt; (code reviews, meetings) → afternoon
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Low-energy stuff&lt;/strong&gt; (email, docs) → the valleys&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffpamr2f7b25tmalixowh.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffpamr2f7b25tmalixowh.jpeg" alt=" " width="800" height="436"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I built a hybrid system by literally just talking through my constraints with AI over a bunch of sessions. GTD for capturing everything, time blocking for structure, Pomodoro for pushing through fog. Nothing fancy. Just honest about what I'm actually working with.&lt;/p&gt;

&lt;p&gt;The key insight: &lt;strong&gt;rest isn't the opposite of work. It's what makes work possible.&lt;/strong&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Making Myself Less Necessary
&lt;/h2&gt;

&lt;p&gt;Here's the weird part: my limitations made me a better manager.&lt;/p&gt;

&lt;p&gt;When you can't be the hero pulling all-nighters, you build systems that don't need heroes. When you know a depressive episode could knock you out for days, you write documentation and processes that let your team function without you.&lt;/p&gt;

&lt;p&gt;Practically:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Reusable code libraries so we're not reinventing stuff
&lt;/li&gt;
&lt;li&gt;Documentation that's actually useful (AI memory, not bureaucracy)
&lt;/li&gt;
&lt;li&gt;Mentoring junior devs into mentors themselves
&lt;/li&gt;
&lt;li&gt;Automating the tedious stuff — CI/CD, release notes, deployments&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The goal is to make myself progressively less necessary. Sounds bad for career advancement, but actually? The good orgs reward people who elevate everyone around them, not people who hoard knowledge.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Humbling Part
&lt;/h2&gt;

&lt;p&gt;I gotta be honest: I've watched people who output less than me get more recognition. And a lot of the time, they deserved it.&lt;/p&gt;

&lt;p&gt;Because they were &lt;strong&gt;consistent&lt;/strong&gt;. &lt;strong&gt;Reliable&lt;/strong&gt;. They showed up steady every day.&lt;/p&gt;

&lt;p&gt;When you're managing Bipolar, consistency is hard. Hypomania feels productive but creates chaos. Depression tanks your reliability. Boom-and-bust might average to high output, but it's not the same as being someone people can count on.&lt;/p&gt;

&lt;p&gt;My work feedback survey shows I rate myself way harsher than my team does — like 2 out of 5 on stuff they score me 4.6. That gap is years of feeling like I had to compensate for my brain by being visibly exceptional.&lt;/p&gt;

&lt;p&gt;The truth: &lt;strong&gt;sustainable and reliable beats exceptional and erratic.&lt;/strong&gt; Every time.&lt;/p&gt;




&lt;h2&gt;
  
  
  Environment Matters More Than Salary
&lt;/h2&gt;

&lt;p&gt;I work in higher ed, not FAANG. Not where the big money is. This is intentional.&lt;/p&gt;

&lt;p&gt;I've had the same leadership for 11+ years and enjoy working with my directorl. When I've struggled — visibly — I wasn't managed out. I was supported. That kind of psychological safety is worth more than any salary bump I'd get jumping to a high-pressure gig.&lt;/p&gt;

&lt;p&gt;If you're managing chronic stuff, environment isn't a perk. It's infrastructure. The right manager, the right culture, the right flexibility — that's what makes everything else possible.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Short Version
&lt;/h2&gt;

&lt;p&gt;If you're a dev fighting similar battles:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Don’t pretend that you have the same resources as everyone else.&lt;/strong&gt; You don't. Build systems for your actual constraints.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Energy management &amp;gt; time management.&lt;/strong&gt; Know your peaks and valleys.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Rest is productive.&lt;/strong&gt; For real.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Make yourself less necessary.&lt;/strong&gt; Document, automate, mentor.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Consistency beats intensity.&lt;/strong&gt; 70% every day beats 150% half the time.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Environment is infrastructure.&lt;/strong&gt; A good manager isn't a luxury.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Your inner critic lies.&lt;/strong&gt; Get external feedback. Trust it more than the voice saying you're not enough.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Work can be an addiction too.&lt;/strong&gt; Ask me how I know.&lt;/li&gt;
&lt;/ol&gt;




&lt;p&gt;Work-life balance isn't a myth. For some of us, it's a survival strategy.&lt;/p&gt;

&lt;p&gt;I'm not writing this from the other side, all figured out. I'm in the middle, still managing the loops, still learning what sustainable looks like.&lt;/p&gt;

&lt;p&gt;But I'm still here doing my thing. Still shipping code. Still leading a team.&lt;/p&gt;

&lt;p&gt;If you're fighting similar stuff — you can do this.&lt;/p&gt;

&lt;p&gt;Not by pretending you don't have limits, but by building systems that work with them.&lt;/p&gt;

&lt;p&gt;That's not settling. That's engineering.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;If this resonates at all or made you think about something else, I'd love to hear from others.&lt;/em&gt;  &lt;/p&gt;

</description>
      <category>mentalhealth</category>
      <category>career</category>
      <category>careerdevelopment</category>
    </item>
    <item>
      <title>Part 1 : Building a Game in 30 Hours Using AI — Here's the Actual Timeline</title>
      <dc:creator>Forrester Terry</dc:creator>
      <pubDate>Fri, 16 Jan 2026 00:22:34 +0000</pubDate>
      <link>https://dev.to/sweetpapa/part-1-building-a-game-in-30-hours-using-ai-heres-the-actual-timeline-1dj5</link>
      <guid>https://dev.to/sweetpapa/part-1-building-a-game-in-30-hours-using-ai-heres-the-actual-timeline-1dj5</guid>
      <description>&lt;p&gt;What happens when you treat AI as a development partner instead of an autocomplete tool?&lt;/p&gt;

&lt;p&gt;I wanted to find out, so I ran an experiment: build a game as fast as possible, prioritizing speed and iteration over polish. No extensive planning phase. No detailed specs. Just prototyping at velocity to see what's actually possible.&lt;/p&gt;

&lt;p&gt;The result is &lt;a href="https://maglava.io" rel="noopener noreferrer"&gt;MagLava&lt;/a&gt;—a magnetic platformer where you swing between nodes to escape rising lava. Six development sessions. Roughly 30 hours of work. A published game with 25 levels, 7 language translations, and a desktop app.&lt;/p&gt;

&lt;p&gt;To be clear: this approach was the point of the experiment. For production software or anything beyond rapid prototyping, proper planning and testing remain essential (I plan to make a post around that later).&lt;/p&gt;

&lt;p&gt;But I wanted to stress-test the other extreme.&lt;/p&gt;

&lt;p&gt;Here's exactly how that broke down.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Commit Log
&lt;/h2&gt;

&lt;p&gt;I commit frequently using an AI tool that generates summaries after each task, so commit clusters map well to actual work sessions. I went through my git history and reconstructed the timeline:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Date&lt;/th&gt;
&lt;th&gt;Commits&lt;/th&gt;
&lt;th&gt;Estimated Time&lt;/th&gt;
&lt;th&gt;What Happened&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Dec 18&lt;/td&gt;
&lt;td&gt;2&lt;/td&gt;
&lt;td&gt;~1.5 hours&lt;/td&gt;
&lt;td&gt;Project scaffold, Vue + Phaser setup&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Dec 19&lt;/td&gt;
&lt;td&gt;3&lt;/td&gt;
&lt;td&gt;~2-3 hours&lt;/td&gt;
&lt;td&gt;Core magnetic polarity system&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Dec 20&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;27&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;~8-12 hours&lt;/td&gt;
&lt;td&gt;Complete movement redesign + 15 levels&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Dec 21&lt;/td&gt;
&lt;td&gt;9&lt;/td&gt;
&lt;td&gt;~4-6 hours&lt;/td&gt;
&lt;td&gt;Mobile controls, tutorials, PWA&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Dec 30&lt;/td&gt;
&lt;td&gt;13&lt;/td&gt;
&lt;td&gt;~5-7 hours&lt;/td&gt;
&lt;td&gt;Desktop app, music, polish&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Jan 15&lt;/td&gt;
&lt;td&gt;8&lt;/td&gt;
&lt;td&gt;~3-5 hours&lt;/td&gt;
&lt;td&gt;i18n (7 languages), expand to 25 levels&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;Total: ~25-35 hours across 6 sessions.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Notice the gaps. Nine days between Dec 21 and Dec 30. Sixteen days before the final session. The calendar says "one month of development." The reality is about a week of actual work, scattered across that month.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx2x40w5j1y4lod3ap2ky.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx2x40w5j1y4lod3ap2ky.png" alt="Gameplay" width="438" height="896"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What "AI-Assisted" Actually Meant
&lt;/h2&gt;

&lt;p&gt;The first day alone produced 6,555 lines of code—project structure, game config, menu systems, routing, storage services, the event bridge between Vue and Phaser. That's scaffolding I would have spent days on manually.&lt;/p&gt;

&lt;p&gt;But the surprising part wasn't the code generation. It was what else came out of the process.&lt;/p&gt;

&lt;p&gt;The promotional website with SEO, sitemaps, and structured data? AI-built. The full Electron desktop app with the level editor? Same story. The internationalization system supporting 7 languages? Implemented in a single session.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu74nz9unkecnwpa9bta0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu74nz9unkecnwpa9bta0.png" alt="I was able to build a cross platform level editor in less than a day" width="800" height="411"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I didn't set out to have AI handle all of these. They emerged because once you're in a flow state with an AI partner, the friction for "one more feature" drops dramatically. Adding a desktop build went from "future roadmap item" to "let's just do it this session."&lt;/p&gt;

&lt;h2&gt;
  
  
  The Method Behind the Numbers
&lt;/h2&gt;

&lt;p&gt;You might have heard the term "vibe coding"— in this case, staying in player mode and describing problems experientially rather than technically. That's what this looked like in practice. Here's an actual prompt from one of my sessions:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"game just freezes! I can't actually SEE the LAVA LINE!!! I WANA SEE THE LAVA line. And finally, we start way too close to the lava."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Typos, caps lock, frustration—all of it. I didn't calculate a pixel buffer. I expressed a feeling of unfairness. The AI translated "way too close" into a concrete fix: increasing the spawn buffer from 150 to 500 pixels above the lava line.&lt;/p&gt;

&lt;p&gt;This only works because emotion &lt;em&gt;is&lt;/em&gt; a valid technical spec when your goal is player experience. "This feels unfair" contains more design information than "adjust the Y-offset parameter."&lt;/p&gt;

&lt;h2&gt;
  
  
  Why the Timeline Matters
&lt;/h2&gt;

&lt;p&gt;I'm not claiming 30 hours is fast or slow. Game complexity varies wildly. What I am claiming is that this timeline was &lt;em&gt;possible&lt;/em&gt; because of how I worked, not just the tools I used.&lt;/p&gt;

&lt;p&gt;The traditional solo dev pipeline looks like this: plan extensively, build the architecture, implement features, then test. You front-load decisions before you have information.&lt;/p&gt;

&lt;p&gt;My pipeline inverted that. Build something immediately. Play it. Describe what feels wrong. Iterate. The AI handled the translation from "this sucks" to "here's the code change."&lt;/p&gt;

&lt;p&gt;Every system stayed disposable. Every change stayed focused and modular. When something wasn't working, I didn't defend it—I described a different vision and let it get rebuilt. That's hard to do when you've personally written every line. It's easy when you're directing rather than typing.&lt;/p&gt;

&lt;h2&gt;
  
  
  What the Numbers Don't Show
&lt;/h2&gt;

&lt;p&gt;The timeline looks clean in retrospect. It wasn't.&lt;/p&gt;

&lt;p&gt;Day 3—that massive 27-commit session—included throwing away the entire movement system I'd built on Day 2. The original concept was polarity-based climbing: red platforms attract, blue platforms repel. I built the whole thing. Then I played it and it felt indirect, frustrating, disconnected from what I actually wanted.&lt;/p&gt;

&lt;p&gt;So I described something different: "I want swinging. Like Spider-Man but with magnets."&lt;/p&gt;

&lt;p&gt;Within hours, the game had a completely new identity.&lt;/p&gt;

&lt;p&gt;That pivot—and one other major pivot that came later—are probably the reason MagLava works at all. But that's a longer story.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Next in this series:&lt;/strong&gt; The two pivots that almost killed the project, and why emotional prompts caught problems that specs would have missed.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;&lt;a href="https://maglava.io" rel="noopener noreferrer"&gt;Play MagLava&lt;/a&gt; | &lt;a href="https://sweetpapatech.itch.io/maglava" rel="noopener noreferrer"&gt;itch.io page&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;




&lt;p&gt;&lt;small&gt;&lt;strong&gt;Tech stack for the curious:&lt;/strong&gt; Vue 3 + Vite, Phaser 3, TypeScript, Electron for desktop, Firebase + itch.io for hosting, Claude (Opus via Claude Code CLI) for AI assistance.&lt;/small&gt;&lt;/p&gt;

</description>
      <category>gamedev</category>
      <category>ai</category>
      <category>webdev</category>
      <category>productivity</category>
    </item>
    <item>
      <title>Supercharging Your AI Agents with Pydantic: A Developer's Guide 🚀</title>
      <dc:creator>Forrester Terry</dc:creator>
      <pubDate>Fri, 28 Feb 2025 04:33:15 +0000</pubDate>
      <link>https://dev.to/sweetpapa/supercharging-your-ai-agents-with-pydantic-a-developers-guide-3hmk</link>
      <guid>https://dev.to/sweetpapa/supercharging-your-ai-agents-with-pydantic-a-developers-guide-3hmk</guid>
      <description>&lt;h2&gt;
  
  
  Table of Contents
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Introduction 👋&lt;/li&gt;
&lt;li&gt;
What is Pydantic and Why Should AI Developers Care? 🤔

&lt;ul&gt;
&lt;li&gt;The AI Agent's Output Problem 🤖💬&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

How Pydantic Makes AI Agents More Reliable 🛡️

&lt;ul&gt;
&lt;li&gt;1. Automatic Type Conversion&lt;/li&gt;
&lt;li&gt;2. Clear Error Messages&lt;/li&gt;
&lt;li&gt;3. Schema Generation for Guiding AI Outputs&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

Real-World Use Cases 🌍

&lt;ul&gt;
&lt;li&gt;OpenAI Function Calling + Pydantic&lt;/li&gt;
&lt;li&gt;Multi-Agent Systems (CrewAI)&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

Best Practices for Using Pydantic with AI Agents ✅

&lt;ul&gt;
&lt;li&gt;1. Start with a Clear Data Model&lt;/li&gt;
&lt;li&gt;2. Handle Validation Errors Gracefully&lt;/li&gt;
&lt;li&gt;3. Consider Re-Prompting When Validation Fails&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

A Simple Tutorial: Getting Started with Pydantic and AI 🏗️

&lt;ul&gt;
&lt;li&gt;Step 1: Define Your Pydantic Model&lt;/li&gt;
&lt;li&gt;Step 2: Create a Function to Get Recommendations from an AI&lt;/li&gt;
&lt;li&gt;Step 3: Use the Recommendation in Your Application&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

Advanced Tips and Tricks 🧠

&lt;ul&gt;
&lt;li&gt;Custom Validators for Domain-Specific Rules&lt;/li&gt;
&lt;li&gt;Nested Models for Complex Data&lt;/li&gt;
&lt;li&gt;Working with LangChain's Pydantic Output Parser&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;Conclusion 🎯&lt;/li&gt;

&lt;/ul&gt;

&lt;h2&gt;
  
  
  Introduction 👋
&lt;/h2&gt;

&lt;p&gt;Have you ever built an AI agent that sometimes returns unpredictable data structures? Or perhaps you've dealt with the frustration of parsing JSON from a language model only to have your application crash because a field was missing or had the wrong type?&lt;/p&gt;

&lt;p&gt;I've been there too! That's why today I want to talk about one of my favorite tools for taming the wild outputs of AI agents: &lt;strong&gt;Pydantic&lt;/strong&gt;!&lt;/p&gt;

&lt;p&gt;In this guide, I'll show you how Pydantic can transform your AI agent development from a game of chance into a reliable, robust process. Let's dive in! 🏊‍♂️&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Pydantic and Why Should AI Developers Care? 🤔
&lt;/h2&gt;

&lt;p&gt;Pydantic is a Python library for data validation that uses type annotations. Think of it as a bouncer for your data - it checks IDs (types) at the door and makes sure only the right data gets into your application.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;pydantic&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;BaseModel&lt;/span&gt;

&lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;User&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;BaseModel&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;str&lt;/span&gt;
    &lt;span class="n"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;int&lt;/span&gt;
    &lt;span class="n"&gt;is_active&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;bool&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;But why is this particularly useful for AI agents? Here's the thing:&lt;/p&gt;

&lt;p&gt;AI models (especially LLMs) are amazing at generating content, but they're not always precise about formatting. They might return JSON where a number is accidentally a string (&lt;code&gt;"42"&lt;/code&gt; instead of &lt;code&gt;42&lt;/code&gt;), or they might forget a field entirely. Without validation, these small inconsistencies can cause big problems downstream in your application.&lt;/p&gt;

&lt;h3&gt;
  
  
  The AI Agent's Output Problem 🤖💬
&lt;/h3&gt;

&lt;p&gt;Imagine asking an AI agent to return information about a product:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"name"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Super Widget"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"price"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"29.99"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"in_stock"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"true"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"features"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s2"&gt;"durable"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"lightweight"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Notice the issues? &lt;code&gt;price&lt;/code&gt; is a string instead of a float, and &lt;code&gt;in_stock&lt;/code&gt; is a string instead of a boolean. Your application might crash when it tries to do math with that price or make a decision based on the stock status.&lt;/p&gt;

&lt;p&gt;Pydantic to the rescue! It can automatically convert these types for you, so &lt;code&gt;"29.99"&lt;/code&gt; becomes &lt;code&gt;29.99&lt;/code&gt; (float) and &lt;code&gt;"true"&lt;/code&gt; becomes &lt;code&gt;True&lt;/code&gt; (boolean).&lt;/p&gt;

&lt;h2&gt;
  
  
  How Pydantic Makes AI Agents More Reliable 🛡️
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. Automatic Type Conversion
&lt;/h3&gt;

&lt;p&gt;Pydantic doesn't just validate - it tries to convert data to the right type when possible. This is perfect for AI outputs that are &lt;em&gt;almost&lt;/em&gt; correct.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;pydantic&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;BaseModel&lt;/span&gt;

&lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Product&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;BaseModel&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;str&lt;/span&gt;
    &lt;span class="n"&gt;price&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;float&lt;/span&gt;
    &lt;span class="n"&gt;in_stock&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;bool&lt;/span&gt;
    &lt;span class="n"&gt;features&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;list&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nb"&gt;str&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;

&lt;span class="c1"&gt;# Even though price and in_stock are strings, Pydantic will convert them
&lt;/span&gt;&lt;span class="n"&gt;product&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Product&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Super Widget&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; 
    &lt;span class="n"&gt;price&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;29.99&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; 
    &lt;span class="n"&gt;in_stock&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;true&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;features&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;durable&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;lightweight&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;product&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="c1"&gt;# Product(name='Super Widget', price=29.99, in_stock=True, features=['durable', 'lightweight'])
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  2. Clear Error Messages
&lt;/h3&gt;

&lt;p&gt;When validation fails, Pydantic tells you exactly what went wrong:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="k"&gt;try&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="nc"&gt;Product&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Broken Widget&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;price&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;expensive&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;in_stock&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="bp"&gt;True&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;features&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;strong&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;except&lt;/span&gt; &lt;span class="nb"&gt;Exception&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="n"&gt;e&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sa"&gt;f&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Error: &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;e&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="c1"&gt;# Error: 2 validation errors for Product
# price
#   Input should be a valid number, unable to parse string as a number [type=float_parsing, input_value='expensive', input_type=str]
# features
#   Input should be a valid list [type=list_type, input_value='strong', input_type=str]
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;These detailed errors make debugging so much easier when your AI agent returns unexpected data.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Schema Generation for Guiding AI Outputs
&lt;/h3&gt;

&lt;p&gt;One of my favorite Pydantic features for AI development is its ability to generate JSON schemas:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;Product&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;model_json_schema&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;
&lt;span class="c1"&gt;# {
#   "title": "Product",
#   "type": "object",
#   "properties": {
#     "name": {"title": "Name", "type": "string"},
#     "price": {"title": "Price", "type": "number"},
#     "in_stock": {"title": "In Stock", "type": "boolean"},
#     "features": {
#       "title": "Features",
#       "type": "array",
#       "items": {"type": "string"}
#     }
#   },
#   "required": ["name", "price", "in_stock", "features"]
# }
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You can use this schema to guide your AI model, especially if you're using function calling with OpenAI or similar features with other providers. This dramatically improves the chances of getting correctly formatted responses!&lt;/p&gt;

&lt;h2&gt;
  
  
  Real-World Use Cases 🌍
&lt;/h2&gt;

&lt;p&gt;Let's look at how developers are using Pydantic with AI agents in the wild:&lt;/p&gt;

&lt;h3&gt;
  
  
  OpenAI Function Calling + Pydantic
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;openai&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;OpenAI&lt;/span&gt;
&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;pydantic&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;BaseModel&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;Field&lt;/span&gt;

&lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;WeatherInfo&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;BaseModel&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="n"&gt;location&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;str&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Field&lt;/span&gt;&lt;span class="p"&gt;(...,&lt;/span&gt; &lt;span class="n"&gt;description&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;The city and state&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;temperature&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;float&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Field&lt;/span&gt;&lt;span class="p"&gt;(...,&lt;/span&gt; &lt;span class="n"&gt;description&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Current temperature in Celsius&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;condition&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;str&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Field&lt;/span&gt;&lt;span class="p"&gt;(...,&lt;/span&gt; &lt;span class="n"&gt;description&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Weather condition (sunny, cloudy, etc.)&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="c1"&gt;# Get the JSON schema for OpenAI
&lt;/span&gt;&lt;span class="n"&gt;function_def&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;name&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;get_weather&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;description&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Get the current weather in a location&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;parameters&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;WeatherInfo&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;model_json_schema&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="n"&gt;client&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;OpenAI&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="n"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;client&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;chat&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;completions&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;create&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="n"&gt;model&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;gpt-4-turbo&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;messages&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;
        &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;role&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;user&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;content&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;What&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;s the weather like in Boston?&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;],&lt;/span&gt;
    &lt;span class="n"&gt;functions&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;function_def&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
    &lt;span class="n"&gt;function_call&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;name&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;get_weather&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="c1"&gt;# Extract and validate the response
&lt;/span&gt;&lt;span class="n"&gt;function_response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;choices&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="n"&gt;message&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;function_call&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;arguments&lt;/span&gt;
&lt;span class="n"&gt;weather&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;WeatherInfo&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;model_validate_json&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;function_response&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sa"&gt;f&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;It&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;s &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;weather&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;temperature&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;°C and &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;weather&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;condition&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt; in &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;weather&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;location&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This approach has two benefits:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;The schema guides the AI to produce properly structured output&lt;/li&gt;
&lt;li&gt;Pydantic validates that output as an extra safety measure&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Multi-Agent Systems (CrewAI)
&lt;/h3&gt;

&lt;p&gt;In systems where multiple AI agents collaborate, consistent data structures are critical. Frameworks like CrewAI use Pydantic to ensure agents communicate properly:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;pydantic&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;BaseModel&lt;/span&gt;
&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;crewai&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;Agent&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;Task&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;Crew&lt;/span&gt;

&lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;ResearchReport&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;BaseModel&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="n"&gt;topic&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;str&lt;/span&gt;
    &lt;span class="n"&gt;key_findings&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;list&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nb"&gt;str&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
    &lt;span class="n"&gt;sources&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;list&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nb"&gt;str&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;

&lt;span class="c1"&gt;# Define a task with a Pydantic output schema
&lt;/span&gt;&lt;span class="n"&gt;research_task&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Task&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="n"&gt;description&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Research the latest advancements in quantum computing&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;expected_output&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;A structured research report with key findings and sources&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;output_pydantic&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;ResearchReport&lt;/span&gt;
&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="c1"&gt;# When the agent completes the task, CrewAI validates the output against the model
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Best Practices for Using Pydantic with AI Agents ✅
&lt;/h2&gt;

&lt;p&gt;After working with numerous AI projects, here are my top recommendations:&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Start with a Clear Data Model
&lt;/h3&gt;

&lt;p&gt;Define Pydantic models that capture exactly what you need from your AI agent. Be specific about types and constraints:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;typing&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;Optional&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;Literal&lt;/span&gt;
&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;pydantic&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;BaseModel&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;Field&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;conint&lt;/span&gt;

&lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;ProductRecommendation&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;BaseModel&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="n"&gt;product_name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;str&lt;/span&gt;
    &lt;span class="n"&gt;price_range&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;str&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Field&lt;/span&gt;&lt;span class="p"&gt;(...,&lt;/span&gt; &lt;span class="n"&gt;pattern&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sa"&gt;r&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;^\$\d+-\$\d+$&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;  &lt;span class="c1"&gt;# Ensure format like "$10-$20"
&lt;/span&gt;    &lt;span class="n"&gt;rating&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;conint&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;ge&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;le&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;  &lt;span class="c1"&gt;# Integer between 1-5
&lt;/span&gt;    &lt;span class="n"&gt;category&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;Literal&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;electronics&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;clothing&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;home&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;books&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;other&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
    &lt;span class="n"&gt;features&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;list&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nb"&gt;str&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Field&lt;/span&gt;&lt;span class="p"&gt;(...,&lt;/span&gt; &lt;span class="n"&gt;min_items&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;max_items&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;in_stock&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;bool&lt;/span&gt;
    &lt;span class="n"&gt;shipping_days&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;Optional&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nb"&gt;int&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="bp"&gt;None&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This detailed model serves as documentation and validation in one package.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Handle Validation Errors Gracefully
&lt;/h3&gt;

&lt;p&gt;Always wrap your Pydantic validation in try/except blocks:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="k"&gt;try&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="n"&gt;recommendation&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;ProductRecommendation&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;model_validate_json&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;ai_response&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="c1"&gt;# Use the structured data
&lt;/span&gt;&lt;span class="k"&gt;except&lt;/span&gt; &lt;span class="nb"&gt;Exception&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="n"&gt;e&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="c1"&gt;# Log the error
&lt;/span&gt;    &lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sa"&gt;f&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;AI output validation failed: &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;e&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

    &lt;span class="c1"&gt;# Possible strategies:
&lt;/span&gt;    &lt;span class="c1"&gt;# 1. Use a fallback approach
&lt;/span&gt;    &lt;span class="c1"&gt;# 2. Re-prompt the AI with the error details
&lt;/span&gt;    &lt;span class="c1"&gt;# 3. Apply some fixes and retry validation
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  3. Consider Re-Prompting When Validation Fails
&lt;/h3&gt;

&lt;p&gt;One powerful approach is to tell the AI exactly what went wrong and ask it to fix the response:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;get_validated_response&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;prompt&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;attempt&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="nf"&gt;range&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;  &lt;span class="c1"&gt;# Try up to 3 times
&lt;/span&gt;        &lt;span class="n"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;ai_model&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;generate&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;prompt&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

        &lt;span class="k"&gt;try&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
            &lt;span class="n"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;ProductRecommendation&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;model_validate_json&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;response&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
            &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;result&lt;/span&gt;
        &lt;span class="k"&gt;except&lt;/span&gt; &lt;span class="nb"&gt;Exception&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="n"&gt;e&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
            &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;attempt&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;  &lt;span class="c1"&gt;# Don't update prompt on the last attempt
&lt;/span&gt;                &lt;span class="n"&gt;prompt&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="sa"&gt;f&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="se"&gt;\n&lt;/span&gt;&lt;span class="s"&gt;Your previous response had validation errors: &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;e&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;. Please fix them and try again.&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;

    &lt;span class="c1"&gt;# If we get here, all attempts failed
&lt;/span&gt;    &lt;span class="k"&gt;raise&lt;/span&gt; &lt;span class="nc"&gt;ValueError&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Could not get valid response after multiple attempts&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This feedback loop helps the AI learn from its mistakes!&lt;/p&gt;

&lt;h2&gt;
  
  
  A Simple Tutorial: Getting Started with Pydantic and AI 🏗️
&lt;/h2&gt;

&lt;p&gt;Let's bring everything together with a simple tutorial. We'll create a movie recommendation agent that returns properly structured data:&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 1: Define Your Pydantic Model
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;pydantic&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;BaseModel&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;Field&lt;/span&gt;
&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;typing&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;List&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;Optional&lt;/span&gt;

&lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;MovieRecommendation&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;BaseModel&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="n"&gt;title&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;str&lt;/span&gt;
    &lt;span class="n"&gt;year&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;int&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Field&lt;/span&gt;&lt;span class="p"&gt;(...,&lt;/span&gt; &lt;span class="n"&gt;ge&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;1900&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;le&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;2030&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;genres&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;List&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nb"&gt;str&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Field&lt;/span&gt;&lt;span class="p"&gt;(...,&lt;/span&gt; &lt;span class="n"&gt;min_items&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;rating&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;float&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Field&lt;/span&gt;&lt;span class="p"&gt;(...,&lt;/span&gt; &lt;span class="n"&gt;ge&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mf"&gt;0.0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;le&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mf"&gt;10.0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;director&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;str&lt;/span&gt;
    &lt;span class="n"&gt;streaming_on&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;Optional&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;List&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nb"&gt;str&lt;/span&gt;&lt;span class="p"&gt;]]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="bp"&gt;None&lt;/span&gt;
    &lt;span class="n"&gt;description&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;str&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Field&lt;/span&gt;&lt;span class="p"&gt;(...,&lt;/span&gt; &lt;span class="n"&gt;max_length&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;500&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Step 2: Create a Function to Get Recommendations from an AI
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;get_movie_recommendation&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;genre_preference&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;mood&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;decade_preference&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="bp"&gt;None&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="c1"&gt;# Construct a prompt for the AI
&lt;/span&gt;    &lt;span class="n"&gt;prompt&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sa"&gt;f&lt;/span&gt;&lt;span class="sh"&gt;"""&lt;/span&gt;&lt;span class="s"&gt;
    Suggest a movie based on the following:
    Genre preference: &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;genre_preference&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;
    Mood: &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;mood&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;
    Decade preference: &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;decade_preference&lt;/span&gt; &lt;span class="ow"&gt;or&lt;/span&gt; &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;any&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;

    Return the recommendation as a JSON object with the following fields:
    - title: the movie title
    - year: the release year (1900-2030)
    - genres: list of genres
    - rating: rating out of 10
    - director: the director&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;s name
    - streaming_on: list of streaming platforms (if known) or null
    - description: brief description (max 500 chars)
    &lt;/span&gt;&lt;span class="sh"&gt;"""&lt;/span&gt;

    &lt;span class="c1"&gt;# In a real application, you'd call your AI model here
&lt;/span&gt;    &lt;span class="c1"&gt;# For demonstration, let's pretend we got this response:
&lt;/span&gt;    &lt;span class="n"&gt;ai_response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;"""&lt;/span&gt;&lt;span class="s"&gt;
    {
      &lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;title&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;: &lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;The Grand Budapest Hotel&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;,
      &lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;year&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;: 2014,
      &lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;genres&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;: [&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Comedy&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;, &lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Drama&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;, &lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Adventure&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;],
      &lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;rating&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;: 8.1,
      &lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;director&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;: &lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Wes Anderson&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;,
      &lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;streaming_on&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;: [&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;HBO Max&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;, &lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Disney+&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;],
      &lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;description&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;: &lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;A writer encounters the owner of an aging high-class hotel, who tells him of his early years serving as a lobby boy in the hotel&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;s glorious years under an exceptional concierge.&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;
    }
    &lt;/span&gt;&lt;span class="sh"&gt;"""&lt;/span&gt;

    &lt;span class="k"&gt;try&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="c1"&gt;# Parse and validate the AI response
&lt;/span&gt;        &lt;span class="n"&gt;recommendation&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;MovieRecommendation&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;model_validate_json&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;ai_response&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;recommendation&lt;/span&gt;
    &lt;span class="k"&gt;except&lt;/span&gt; &lt;span class="nb"&gt;Exception&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="n"&gt;e&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sa"&gt;f&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Error validating AI response: &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;e&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="c1"&gt;# In a real application, you might implement retry logic here
&lt;/span&gt;        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="bp"&gt;None&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Step 3: Use the Recommendation in Your Application
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;display_recommendation&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;recommendation&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="ow"&gt;not&lt;/span&gt; &lt;span class="n"&gt;recommendation&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Sorry, couldn&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;t generate a valid recommendation.&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;

    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="sa"&gt;f&lt;/span&gt;&lt;span class="sh"&gt;"""&lt;/span&gt;&lt;span class="s"&gt;
    🎬 &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;recommendation&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;title&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt; (&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;recommendation&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;year&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;) - &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;recommendation&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;rating&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;/10

    Directed by: &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;recommendation&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;director&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;
    Genres: &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;, &lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;join&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;recommendation&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;genres&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;

    &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;recommendation&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;description&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;

    &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="sa"&gt;f&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Available on&lt;/span&gt;&lt;span class="si"&gt;:&lt;/span&gt; &lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;, &lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;join&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;recommendation&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;streaming_on&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt; if recommendation.streaming_on else &lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="n"&gt;Streaming&lt;/span&gt; &lt;span class="n"&gt;info&lt;/span&gt; &lt;span class="ow"&gt;not&lt;/span&gt; &lt;span class="n"&gt;available&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;
    &lt;/span&gt;&lt;span class="sh"&gt;"""&lt;/span&gt;

&lt;span class="c1"&gt;# Get and display a recommendation
&lt;/span&gt;&lt;span class="n"&gt;user_genre&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;sci-fi&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;
&lt;span class="n"&gt;user_mood&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;thoughtful&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;
&lt;span class="n"&gt;user_decade&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;2010s&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;

&lt;span class="n"&gt;movie&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;get_movie_recommendation&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;user_genre&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;user_mood&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;user_decade&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;display_recommendation&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;movie&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Advanced Tips and Tricks 🧠
&lt;/h2&gt;

&lt;p&gt;Want to take your Pydantic + AI game to the next level? Here are some advanced techniques:&lt;/p&gt;

&lt;h3&gt;
  
  
  Custom Validators for Domain-Specific Rules
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;pydantic&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;BaseModel&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;Field&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;validator&lt;/span&gt;

&lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;TravelRecommendation&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;BaseModel&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="n"&gt;destination&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;str&lt;/span&gt;
    &lt;span class="n"&gt;best_months&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;list&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nb"&gt;str&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
    &lt;span class="n"&gt;budget_usd&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;int&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Field&lt;/span&gt;&lt;span class="p"&gt;(...,&lt;/span&gt; &lt;span class="n"&gt;gt&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

    &lt;span class="nd"&gt;@validator&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;best_months&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;check_valid_months&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;cls&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;months&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
        &lt;span class="n"&gt;valid_months&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;January&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;February&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;March&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;April&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;May&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;June&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; 
                      &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;July&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;August&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;September&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;October&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;November&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;December&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;

        &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;month&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="n"&gt;months&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
            &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;month&lt;/span&gt; &lt;span class="ow"&gt;not&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="n"&gt;valid_months&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
                &lt;span class="k"&gt;raise&lt;/span&gt; &lt;span class="nc"&gt;ValueError&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sa"&gt;f&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Invalid month: &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;month&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;months&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Nested Models for Complex Data
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Address&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;BaseModel&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="n"&gt;street&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;str&lt;/span&gt;
    &lt;span class="n"&gt;city&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;str&lt;/span&gt;
    &lt;span class="n"&gt;state&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;str&lt;/span&gt;
    &lt;span class="n"&gt;country&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;str&lt;/span&gt;
    &lt;span class="n"&gt;postal_code&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;str&lt;/span&gt;

&lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Contact&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;BaseModel&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;str&lt;/span&gt;
    &lt;span class="n"&gt;email&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;str&lt;/span&gt;
    &lt;span class="n"&gt;phone&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;Optional&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nb"&gt;str&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="bp"&gt;None&lt;/span&gt;
    &lt;span class="n"&gt;address&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;Address&lt;/span&gt;

&lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;BusinessListing&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;BaseModel&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;str&lt;/span&gt;
    &lt;span class="n"&gt;category&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;str&lt;/span&gt;
    &lt;span class="n"&gt;rating&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;float&lt;/span&gt;
    &lt;span class="n"&gt;contact&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;Contact&lt;/span&gt;
    &lt;span class="n"&gt;hours&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;dict&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nb"&gt;str&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nb"&gt;str&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Working with LangChain's Pydantic Output Parser
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;langchain.output_parsers&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;PydanticOutputParser&lt;/span&gt;
&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;langchain.prompts&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;PromptTemplate&lt;/span&gt;
&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;langchain.llms&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;OpenAI&lt;/span&gt;
&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;pydantic&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;BaseModel&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;Field&lt;/span&gt;

&lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;AmazonProduct&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;BaseModel&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;str&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Field&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;description&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;The product name&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;price&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;float&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Field&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;description&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;The product price in USD&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;rating&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;float&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Field&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;description&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Rating from 1-5&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;reviews&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;int&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Field&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;description&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Number of reviews&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="n"&gt;parser&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;PydanticOutputParser&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;pydantic_object&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;AmazonProduct&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="n"&gt;prompt&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;PromptTemplate&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="n"&gt;template&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Extract product information from this text:&lt;/span&gt;&lt;span class="se"&gt;\n&lt;/span&gt;&lt;span class="s"&gt;{text}&lt;/span&gt;&lt;span class="se"&gt;\n&lt;/span&gt;&lt;span class="s"&gt;{format_instructions}&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;input_variables&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;text&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
    &lt;span class="n"&gt;partial_variables&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;format_instructions&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;parser&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get_format_instructions&lt;/span&gt;&lt;span class="p"&gt;()}&lt;/span&gt;
&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="n"&gt;model&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;OpenAI&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;

&lt;span class="n"&gt;input_text&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;"""&lt;/span&gt;&lt;span class="s"&gt;
This amazing laptop is the MacBook Pro 16-inch, priced at $2,399. It has received 
excellent feedback from customers, with a 4.8 star rating based on 3,842 reviews.
&lt;/span&gt;&lt;span class="sh"&gt;"""&lt;/span&gt;

&lt;span class="n"&gt;output&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;model&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;prompt&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;format&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;text&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;input_text&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
&lt;span class="n"&gt;product&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;parser&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;parse&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;output&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Conclusion 🎯
&lt;/h2&gt;

&lt;p&gt;Pydantic is more than just a validation library - it's your AI agent's best friend! By defining clear data models and validating inputs and outputs, you can:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Make your AI applications more reliable&lt;/li&gt;
&lt;li&gt;Catch errors early before they cascade into bigger problems&lt;/li&gt;
&lt;li&gt;Guide your models to produce better-structured outputs&lt;/li&gt;
&lt;li&gt;Create self-documenting code that clearly specifies what data you expect&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The next time you're building an AI agent, take the time to define your data models with Pydantic. Your future self (and your users) will thank you!&lt;/p&gt;

&lt;p&gt;Have you used Pydantic with AI projects? Feel free to share your experiences in the comments!&lt;/p&gt;

</description>
      <category>python</category>
      <category>ai</category>
      <category>tutorial</category>
      <category>beginners</category>
    </item>
    <item>
      <title>TypeScript Fundamentals: A Beginner's Guide (2025) ✅</title>
      <dc:creator>Forrester Terry</dc:creator>
      <pubDate>Tue, 07 Jan 2025 02:33:01 +0000</pubDate>
      <link>https://dev.to/sweetpapa/typescript-fundamentals-a-beginners-guide-2025-3ej9</link>
      <guid>https://dev.to/sweetpapa/typescript-fundamentals-a-beginners-guide-2025-3ej9</guid>
      <description>&lt;p&gt;TypeScript has caused endless debates among developers. Some see it as a bureaucratic roadblock to the freedom of JavaScript, while others hail it as a beacon of light in the trenches of loosely typed code. Love it or hate it, TypeScript is here to stay — and once you get to know it, you might just find it’s not a burden but a blessing for your projects.&lt;/p&gt;

&lt;p&gt;In this series we will explore TypeScript and cover the basics -- as well as some tricks and troubleshooting tips.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Introduction
&lt;/h2&gt;

&lt;h3&gt;
  
  
  What is TypeScript?
&lt;/h3&gt;

&lt;p&gt;TypeScript is a statically typed superset of JavaScript that compiles to plain JavaScript. In simpler terms, it’s JavaScript with extra features that help you catch errors early and write better, more maintainable code.&lt;/p&gt;

&lt;p&gt;Think of TypeScript as a friendly assistant who double-checks your work before you submit it. It lets you:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Spot errors while you’re coding, not after you’ve deployed.&lt;/li&gt;
&lt;li&gt;Write code that’s easier to read and understand.&lt;/li&gt;
&lt;li&gt;Scale your projects without losing track of how things connect.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Why Use TypeScript?
&lt;/h3&gt;

&lt;p&gt;Let’s get practical. Why should you care about TypeScript when JavaScript already works?&lt;/p&gt;

&lt;h4&gt;
  
  
  Real Benefits:
&lt;/h4&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Catch Errors Early&lt;/strong&gt;: Avoid common pitfalls, like passing the wrong data type to a function.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;   &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
     &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="s2"&gt;`Hello, &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;!`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
   &lt;span class="p"&gt;}&lt;/span&gt;
   &lt;span class="nf"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;42&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Error: Argument of type 'number' is not assignable to parameter of type 'string'.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Autocompletion &amp;amp; Documentation&lt;/strong&gt;: Modern editors (like VS Code) provide rich autocomplete suggestions and documentation as you type.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Code Scalability&lt;/strong&gt;: TypeScript’s features shine in larger projects where maintaining consistency is key.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Improved Team Collaboration&lt;/strong&gt;: Clear types make it easier for team members to understand your code at a glance.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;I have found TypeScript to be particularly helpful for planning out bigger apps; understanding what types of data I will be dealing with and what data my functions take/return.&lt;/p&gt;

&lt;h3&gt;
  
  
  Prerequisites
&lt;/h3&gt;

&lt;p&gt;Before diving in, ensure you have basic JavaScript knowledge. You should be familiar with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Variables and data types (e.g., &lt;code&gt;let&lt;/code&gt;, &lt;code&gt;const&lt;/code&gt;, &lt;code&gt;string&lt;/code&gt;, &lt;code&gt;number&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;Functions&lt;/li&gt;
&lt;li&gt;Arrays and objects&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you’re not confident yet, take some time to review JavaScript basics.&lt;/p&gt;




&lt;h2&gt;
  
  
  2. Setting Up Your Environment
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Installing TypeScript
&lt;/h3&gt;

&lt;p&gt;TypeScript is a tool that requires installation to get started. With just a few steps, you can prepare your environment to begin coding in TypeScript. Here’s how to do it:&lt;/p&gt;

&lt;p&gt;To start using TypeScript, you’ll need Node.js installed. Once you have that:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Install TypeScript globally:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;   npm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;-g&lt;/span&gt; typescript
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Verify the installation:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;   tsc &lt;span class="nt"&gt;--version&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Setting Up VS Code
&lt;/h3&gt;

&lt;p&gt;VS Code is one of the most popular editors for TypeScript development. It provides a range of features and extensions that make coding easier and more efficient. Let’s set it up:&lt;/p&gt;

&lt;p&gt;VS Code is the go-to editor for TypeScript developers. Here’s how to set it up:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Install VS Code: &lt;a href="https://code.visualstudio.com/" rel="noopener noreferrer"&gt;Download here&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Add these helpful extensions:

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;ESLint&lt;/strong&gt;: For linting your TypeScript code.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Prettier&lt;/strong&gt;: For consistent code formatting.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;TypeScript Hero&lt;/strong&gt;: For improved productivity.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Creating Your First TypeScript Project
&lt;/h3&gt;

&lt;p&gt;Getting hands-on is the best way to learn TypeScript. This section guides you through setting up your first project, from creating files to running your code.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Create a new folder for your project and navigate into it:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;   &lt;span class="nb"&gt;mkdir &lt;/span&gt;typescript-starter
   &lt;span class="nb"&gt;cd &lt;/span&gt;typescript-starter
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Initialize a new project:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;   npm init &lt;span class="nt"&gt;-y&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Add TypeScript:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;   npm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;--save-dev&lt;/span&gt; typescript
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Create a &lt;code&gt;tsconfig.json&lt;/code&gt; file:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;   npx tsc &lt;span class="nt"&gt;--init&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Write your first TypeScript file:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;   &lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"console.log('Hello, TypeScript!');"&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; index.ts
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Compile and run:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;   npx tsc index.ts
   node index.js
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You’ve just written and compiled your first TypeScript program!&lt;/p&gt;




&lt;h2&gt;
  
  
  3. Basic Types Overview
&lt;/h2&gt;

&lt;p&gt;TypeScript’s power lies in its type system. Let’s explore some basic types:&lt;/p&gt;

&lt;h3&gt;
  
  
  Primitive Types
&lt;/h3&gt;

&lt;p&gt;Primitive types are the building blocks of TypeScript’s type system. They include basic data types like strings, numbers, and booleans. Here’s a quick look at how to use them:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;string&lt;/code&gt;&lt;/strong&gt;:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;   &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Alice&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;number&lt;/code&gt;&lt;/strong&gt;:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;   &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;25&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;boolean&lt;/code&gt;&lt;/strong&gt;:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;   &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;isStudent&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;boolean&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Advanced Types
&lt;/h3&gt;

&lt;p&gt;In addition to primitives, TypeScript supports more complex types like arrays, tuples, and special types like &lt;code&gt;any&lt;/code&gt; and &lt;code&gt;unknown&lt;/code&gt;. These types make your code flexible while maintaining safety.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Arrays&lt;/strong&gt;:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;   &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;scores&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;90&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;85&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;88&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Tuples&lt;/strong&gt;:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;   &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Alice&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;25&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;any&lt;/code&gt;&lt;/strong&gt; (use sparingly):
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;   &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;any&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Could be anything&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;unknown&lt;/code&gt;&lt;/strong&gt; (safer than &lt;code&gt;any&lt;/code&gt;):
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;   &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;unknown&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;void&lt;/code&gt;&lt;/strong&gt; (functions that return nothing):
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;   &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;logMessage&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
     &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
   &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;code&gt;null&lt;/code&gt; and &lt;code&gt;undefined&lt;/code&gt;:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;   &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;something&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
   &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;nothing&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;undefined&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;undefined&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  4. First Steps with Type Annotations
&lt;/h2&gt;

&lt;p&gt;Type Annotations in TypeScript allow developers to specify the type of a variable, parameter, or function return value. This ensures that the code adheres to a defined structure, making it easier to catch errors during development and maintain consistency throughout the project.&lt;/p&gt;

&lt;p&gt;As you write your code as you normally do, take note of the features below that you can integrate&lt;/p&gt;

&lt;h3&gt;
  
  
  Basic Variable Typing
&lt;/h3&gt;

&lt;p&gt;Set types for your variables so that they are always set to the right thing, and the rest of the app understands what they are.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;firstName&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Alice&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;30&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Function Parameter Typing
&lt;/h3&gt;

&lt;p&gt;Similarly, for functions you can define the types for the arguments, as well define the type for the return.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Note the 'number' keywords for each param&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; 
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Return Type Annotations
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Note the 'string' keyword at the end&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; 
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="s2"&gt;`Hello, &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;!`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Practical Example: User Profile
&lt;/h3&gt;

&lt;p&gt;TypeScript allows you to declare your own types to better structure and enforce rules in your code. By using &lt;code&gt;type&lt;/code&gt; or &lt;code&gt;interface&lt;/code&gt;, you can define custom types for objects, functions, or even unions. This not only makes your code more robust but also improves readability and consistency in larger projects.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kr"&gt;interface&lt;/span&gt; &lt;span class="nx"&gt;UserProfile&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;isActive&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;boolean&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;UserProfile&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Alice&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;25&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;isActive&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  5. Quick Start with Interfaces
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Basic Syntax
&lt;/h3&gt;

&lt;p&gt;Interfaces in TypeScript define the structure of objects, ensuring they have specific properties and types. This section shows you how to create and use them:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kr"&gt;interface&lt;/span&gt; &lt;span class="nx"&gt;User&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;User&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Bob&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;30&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Optional Properties
&lt;/h3&gt;

&lt;p&gt;Sometimes, not all properties in an object are required. TypeScript lets you define optional properties in interfaces to handle such cases gracefully.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kr"&gt;interface&lt;/span&gt; &lt;span class="nx"&gt;Product&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;price&lt;/span&gt;&lt;span class="p"&gt;?:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Product&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Notebook&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Readonly Properties
&lt;/h3&gt;

&lt;p&gt;Readonly properties are useful when you want to ensure certain values cannot be changed after they are set. Here’s how to use them in interfaces:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kr"&gt;interface&lt;/span&gt; &lt;span class="nx"&gt;Book&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;readonly&lt;/span&gt; &lt;span class="nx"&gt;title&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;myBook&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Book&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;title&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;TypeScript Handbook&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="c1"&gt;// myBook.title = "Another Title"; // Error: Cannot assign to 'title'.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Real-World Example: API Response
&lt;/h3&gt;

&lt;p&gt;Using interfaces to type API responses ensures you handle data from servers safely and effectively. Here’s a practical example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kr"&gt;interface&lt;/span&gt; &lt;span class="nx"&gt;ApiResponse&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;data&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;unknown&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;status&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  6. Practice Project: Building a Simple Todo List
&lt;/h2&gt;

&lt;p&gt;Practice is key to mastering TypeScript. In this project, you’ll create a simple todo list application that leverages the features you’ve learned so far:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Create a &lt;code&gt;Todo&lt;/code&gt; type:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;   &lt;span class="kr"&gt;interface&lt;/span&gt; &lt;span class="nx"&gt;Todo&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
     &lt;span class="nl"&gt;id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
     &lt;span class="nl"&gt;title&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
     &lt;span class="nl"&gt;completed&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;boolean&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
   &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Build a simple array of todos:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;   &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;todos&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Todo&lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
     &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;title&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Learn TypeScript&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;completed&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
   &lt;span class="p"&gt;];&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Add some functions to add todos and mark todos as complete:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;   &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;markAsComplete&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;todo&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Todo&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="nb"&gt;Boolean&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;bUpdated&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;
        &lt;span class="nx"&gt;todos&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;map&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;td&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="nx"&gt;Todo&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;td&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="nx"&gt;todo&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
                &lt;span class="nx"&gt;bUpdated&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;
                &lt;span class="nx"&gt;td&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;completed&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;
            &lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="p"&gt;})&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;bUpdated&lt;/span&gt;
   &lt;span class="p"&gt;}&lt;/span&gt;

   &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;addToDo&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;todo&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="nx"&gt;Todo&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="nb"&gt;Boolean&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nx"&gt;todos&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;todo&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
            &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`Added "&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;todo&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;title&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;"" to list!`&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
            &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Error adding to the todo object!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
            &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
   &lt;span class="p"&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  7. Next Steps
&lt;/h2&gt;

&lt;p&gt;That's it for now, hope you enjoyed this tutorial. I will be working on some additional tutorials to dig deeper into useful TypeScript features and use cases.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Coming Up Next&lt;/strong&gt;: Deep dive into TypeScript functions and advanced types.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Resources&lt;/strong&gt;:

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.typescriptlang.org/docs/" rel="noopener noreferrer"&gt;TypeScript Documentation&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://codesandbox.io/" rel="noopener noreferrer"&gt;CodeSandbox&lt;/a&gt; for practicing TypeScript online.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;Challenge&lt;/strong&gt;: Create a TypeScript interface for a blog post and use it to type-check a list of blog posts.&lt;/li&gt;

&lt;/ul&gt;

&lt;p&gt;See you next time! &lt;/p&gt;

</description>
      <category>javascript</category>
      <category>typescript</category>
      <category>tutorial</category>
      <category>beginners</category>
    </item>
    <item>
      <title>📦 How to Create, Publish, and Maintain a Node.js Package (in JavaScript and TypeScript)</title>
      <dc:creator>Forrester Terry</dc:creator>
      <pubDate>Mon, 06 Jan 2025 03:59:40 +0000</pubDate>
      <link>https://dev.to/sweetpapa/how-to-create-publish-and-maintain-a-nodejs-package-in-javascript-and-typescript-3jgn</link>
      <guid>https://dev.to/sweetpapa/how-to-create-publish-and-maintain-a-nodejs-package-in-javascript-and-typescript-3jgn</guid>
      <description>&lt;p&gt;Have you ever written a piece of code that could benefit other developers — or even your future self—over and over again? Perhaps it’s a utility function, a library, or a set of reusable tools you find yourself copying and pasting across multiple projects. &lt;/p&gt;

&lt;p&gt;This might be the perfect candidate for an NPM package!&lt;/p&gt;

&lt;p&gt;In this article, we’ll walk step-by-step through creating a simple Node.js package in both &lt;strong&gt;JavaScript&lt;/strong&gt; and &lt;strong&gt;TypeScript&lt;/strong&gt;, setting up best practices such as testing and versioning, and then publishing it to &lt;a href="https://www.npmjs.com/" rel="noopener noreferrer"&gt;npmjs.com&lt;/a&gt;. 🚀&lt;/p&gt;




&lt;h2&gt;
  
  
  Table of Contents
&lt;/h2&gt;

&lt;p&gt;1. Setting Up Your Project&lt;br&gt;&lt;br&gt;
2. Writing Your Package Code&lt;br&gt;&lt;br&gt;
3. Testing Your Package&lt;br&gt;&lt;br&gt;
4. Versioning Best Practices&lt;br&gt;&lt;br&gt;
5. Publishing Your Package&lt;br&gt;&lt;br&gt;
6. Common Features and Best Practices&lt;br&gt;&lt;br&gt;
7. Use Cases&lt;br&gt;&lt;br&gt;
8. Creating Scripts to Automate Common Tasks&lt;/p&gt;


&lt;h2&gt;
  
  
  1. Setting Up Your Project
&lt;/h2&gt;
&lt;h3&gt;
  
  
  1.1 Prerequisites
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Node.js&lt;/strong&gt; (v22.12.0 LTS is recommended as of January 2025, v18 LTS is the oldest version that is still maintained).
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;npm&lt;/strong&gt; (comes bundled with Node).&lt;/li&gt;
&lt;li&gt;A &lt;a href="https://www.npmjs.com/signup" rel="noopener noreferrer"&gt;&lt;strong&gt;npmjs.com&lt;/strong&gt; account&lt;/a&gt; for publishing your package.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;
  
  
  1.2 Initialize Your Project
&lt;/h3&gt;

&lt;p&gt;Create a new directory for your package:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;mkdir &lt;/span&gt;my-awesome-package
&lt;span class="nb"&gt;cd &lt;/span&gt;my-awesome-package
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Initialize a new Node.js project:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm init
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This command will ask several questions to help create a &lt;code&gt;package.json&lt;/code&gt; file, the heart of your Node.js package. Key fields to pay attention to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;name&lt;/strong&gt;: The name of your package (must be unique in the npm registry).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;version&lt;/strong&gt;: The version of your package, often starting at &lt;code&gt;1.0.0&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;description&lt;/strong&gt;: A brief explanation of your package.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;entry point&lt;/strong&gt;: The main file (often &lt;code&gt;index.js&lt;/code&gt; or &lt;code&gt;dist/index.js&lt;/code&gt;).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;author&lt;/strong&gt;: Your name or organization.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;license&lt;/strong&gt;: The license type (e.g., MIT).&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;You can skip the Q&amp;amp;A by running &lt;code&gt;npm init -y&lt;/code&gt; to get a default &lt;code&gt;package.json&lt;/code&gt; file.&lt;/p&gt;




&lt;h2&gt;
  
  
  2. Writing Your Package Code
&lt;/h2&gt;

&lt;p&gt;We’ll explore two approaches: &lt;strong&gt;plain JavaScript&lt;/strong&gt; and &lt;strong&gt;TypeScript&lt;/strong&gt;. Choose whichever suits your project needs—or maintain both if you like.&lt;/p&gt;

&lt;h3&gt;
  
  
  2.1 Plain JavaScript Version
&lt;/h3&gt;

&lt;p&gt;Create a file named &lt;code&gt;index.js&lt;/code&gt; in your project root:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// index.js&lt;/span&gt;

&lt;span class="cm"&gt;/**
 * Returns a greeting message
 * @param {string} name - The name to greet
 * @return {string} A greeting message
 */&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="s2"&gt;`Hello, &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;!`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// Export the function as a module&lt;/span&gt;
&lt;span class="nx"&gt;module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exports&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  2.2 TypeScript Version
&lt;/h3&gt;

&lt;h4&gt;
  
  
  2.2.1 Install and Initialize TypeScript
&lt;/h4&gt;

&lt;p&gt;Install Typescript as a development dependency:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;--save-dev&lt;/span&gt; typescript
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Initialize a &lt;code&gt;tsconfig.json&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx tsc &lt;span class="nt"&gt;--init&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  2.2.2 A Recommended tsconfig.json
&lt;/h4&gt;

&lt;p&gt;Replace the generated &lt;code&gt;tsconfig.json&lt;/code&gt; with a configuration tailored for your needs, here we configure for modern Node.js (v22.12.0 LTS):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"compilerOptions"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"target"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"ES2020"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;                        &lt;/span&gt;&lt;span class="err"&gt;//&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;Modern&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;JavaScript&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;features&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"module"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"CommonJS"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;                      &lt;/span&gt;&lt;span class="err"&gt;//&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;Node.js&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;module&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;system&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"rootDir"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"src"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;                          &lt;/span&gt;&lt;span class="err"&gt;//&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;Source&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;files&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;directory&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"outDir"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"dist"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;                          &lt;/span&gt;&lt;span class="err"&gt;//&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;Compiled&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;output&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;directory&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"strict"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;                            &lt;/span&gt;&lt;span class="err"&gt;//&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;Enable&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;all&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;strict&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;type-checking&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;options&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"esModuleInterop"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;                   &lt;/span&gt;&lt;span class="err"&gt;//&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;Better&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;compatibility&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;with&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;CommonJS&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;modules&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"skipLibCheck"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;                      &lt;/span&gt;&lt;span class="err"&gt;//&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;Skip&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;type&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;checking&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;of&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;declaration&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;files&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;for&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;faster&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;builds&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"forceConsistentCasingInFileNames"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="err"&gt;//&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;Enforce&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;consistent&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;file&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;name&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;casing&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"declaration"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;                       &lt;/span&gt;&lt;span class="err"&gt;//&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;Generate&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;.d.ts&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;files&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;for&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;type&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;definitions&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"declarationMap"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="w"&gt;                     &lt;/span&gt;&lt;span class="err"&gt;//&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;Generate&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;source&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;maps&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;for&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;declarations&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"include"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s2"&gt;"src/**/*"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"exclude"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s2"&gt;"node_modules"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"**/*.test.ts"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This ensures compatibility with modern JavaScript and enforces strict type-checking, improving code quality.&lt;/p&gt;

&lt;h4&gt;
  
  
  2.2.3 Create Your Source File
&lt;/h4&gt;

&lt;p&gt;Create a &lt;code&gt;src&lt;/code&gt; directory and add &lt;code&gt;index.ts&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// src/index.ts&lt;/span&gt;

&lt;span class="cm"&gt;/**
 * Returns a greeting message
 * @param name - The name to greet
 * @returns A greeting message
 */&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="s2"&gt;`Hello, &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;!`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  2.2.4 Update package.json
&lt;/h4&gt;

&lt;p&gt;We need to point &lt;code&gt;main&lt;/code&gt; at the compiled JavaScript file in &lt;code&gt;dist&lt;/code&gt;, and also specify where the type definitions live via the &lt;code&gt;"types"&lt;/code&gt; field. We’ll also add a &lt;code&gt;build&lt;/code&gt; script:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"name"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"my-awesome-package"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"version"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"1.0.0"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"description"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"A package that greets the user."&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"main"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"dist/index.js"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"types"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"dist/index.d.ts"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"scripts"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"tsc"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"test"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"jest"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"author"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Your Name"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"license"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"MIT"&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;By specifying &lt;code&gt;"types": "dist/index.d.ts"&lt;/code&gt;, consumers of your package automatically get the TypeScript definitions.&lt;/p&gt;

&lt;p&gt;Now, you can compile your TypeScript source by running:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm run build
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  3. Testing Your Package
&lt;/h2&gt;

&lt;p&gt;Testing is not mandatory for publishing but is highly recommended to ensure reliability. We’ll demonstrate using &lt;strong&gt;Jest&lt;/strong&gt; for both JavaScript and TypeScript.&lt;/p&gt;

&lt;h3&gt;
  
  
  3.1 Install Jest
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;--save-dev&lt;/span&gt; jest
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For TypeScript, also install &lt;code&gt;ts-jest&lt;/code&gt; and type definitions:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;--save-dev&lt;/span&gt; ts-jest @types/jest
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  3.2 Configure Jest (TypeScript Only)
&lt;/h3&gt;

&lt;p&gt;Initialize Jest with TypeScript support:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx ts-jest config:init
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This creates a &lt;code&gt;jest.config.js&lt;/code&gt; (or &lt;code&gt;jest.config.ts&lt;/code&gt;) file tailored for TypeScript. Typically, it might look like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// jest.config.js&lt;/span&gt;
&lt;span class="nx"&gt;module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exports&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;preset&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;ts-jest&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;testEnvironment&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;node&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  3.3 Write Your Tests
&lt;/h3&gt;

&lt;p&gt;Create a &lt;code&gt;test&lt;/code&gt; directory. Let’s name our test file &lt;code&gt;greet.test.js&lt;/code&gt; or &lt;code&gt;greet.test.ts&lt;/code&gt;, depending on your language choice.&lt;/p&gt;

&lt;h4&gt;
  
  
  3.3.1 JavaScript Test Example
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// test/greet.test.js&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;greet&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;../index&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Using JavaScript's require&lt;/span&gt;

&lt;span class="nf"&gt;test&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;returns a greeting with the given name&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Alice&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)).&lt;/span&gt;&lt;span class="nf"&gt;toBe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello, Alice!&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  3.3.2 TypeScript Test Example
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// test/greet.test.ts&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;greet&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;../src/index&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// or '../dist/index' after build&lt;/span&gt;

&lt;span class="nf"&gt;test&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;returns a greeting with the given name&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Alice&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)).&lt;/span&gt;&lt;span class="nf"&gt;toBe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello, Alice!&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  3.4 Update package.json for Testing
&lt;/h3&gt;

&lt;p&gt;Ensure your &lt;code&gt;package.json&lt;/code&gt; includes:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"scripts"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"tsc"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"test"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"jest"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now you can build and test your project via:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm run build
npm &lt;span class="nb"&gt;test&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  4. Versioning Best Practices
&lt;/h2&gt;

&lt;p&gt;Node packages typically follow &lt;a href="https://semver.org/" rel="noopener noreferrer"&gt;SemVer (Semantic Versioning)&lt;/a&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;MAJOR&lt;/strong&gt; for incompatible API changes.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;MINOR&lt;/strong&gt; for adding functionality in a backward-compatible manner.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;PATCH&lt;/strong&gt; for backward-compatible bug fixes.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Example: &lt;code&gt;1.0.0&lt;/code&gt; (Major.Minor.Patch)&lt;/p&gt;

&lt;p&gt;To increment your package version (and create a Git tag if you’re using Git):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm version patch   &lt;span class="c"&gt;# e.g., 1.0.0 -&amp;gt; 1.0.1&lt;/span&gt;
npm version minor   &lt;span class="c"&gt;# e.g., 1.0.1 -&amp;gt; 1.1.0&lt;/span&gt;
npm version major   &lt;span class="c"&gt;# e.g., 1.1.0 -&amp;gt; 2.0.0&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  5. Publishing Your Package
&lt;/h2&gt;

&lt;h3&gt;
  
  
  5.1 Log in to npm
&lt;/h3&gt;

&lt;p&gt;Before you can publish, authenticate with npm:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm login
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Enter your credentials and/or token. If you haven’t created an account yet, &lt;a href="https://www.npmjs.com/signup" rel="noopener noreferrer"&gt;sign up here&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Alternatively, you can setup your &lt;code&gt;.npmrc&lt;/code&gt; to handle the authentications:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;echo&lt;/span&gt; //registry.npmjs.org/:_authToken&lt;span class="o"&gt;=&lt;/span&gt;MY_TOKEN &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; ~/.npmrc
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You can change the registry path as needed, depending on your NPM repository instance. For instance, for GitHub you may do:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;echo&lt;/span&gt; //npm.pkg.github.com/:_authToken&lt;span class="o"&gt;=&lt;/span&gt;MY_TOKEN &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; ~/.npmrc
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  5.2 Publish
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;For a plain JavaScript package&lt;/strong&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm publish
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;For a TypeScript package&lt;/strong&gt;, build your code before publishing:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm run build
npm publish
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Your package is now live on the npm registry, and anyone can install it with:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install &lt;/span&gt;my-awesome-package
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If your package name is scoped (e.g., &lt;code&gt;@your-scope/my-awesome-package&lt;/code&gt;), you might need:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm publish &lt;span class="nt"&gt;--access&lt;/span&gt; public
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;(&lt;code&gt;--access public&lt;/code&gt; is required for scoped packages to be publicly available.)&lt;/p&gt;




&lt;h2&gt;
  
  
  6. Common Features and Best Practices
&lt;/h2&gt;

&lt;h3&gt;
  
  
  6.1 README.md
&lt;/h3&gt;

&lt;p&gt;A clear &lt;code&gt;README.md&lt;/code&gt; is essential for explaining your package. Include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Installation Instructions&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;  npm &lt;span class="nb"&gt;install &lt;/span&gt;my-awesome-package
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Basic Usage&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;  &lt;span class="c1"&gt;// JavaScript:&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;greet&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;my-awesome-package&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Alice&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; &lt;span class="c1"&gt;// Hello, Alice!&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;  &lt;span class="c1"&gt;// TypeScript:&lt;/span&gt;
  &lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;greet&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;my-awesome-package&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Alice&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; &lt;span class="c1"&gt;// Hello, Alice!&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Advanced Examples&lt;/strong&gt;: Show more use cases, configuration, or integration details.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;API Documentation&lt;/strong&gt;: If your package has multiple methods or classes, document them thoroughly.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  6.2 LICENSE
&lt;/h3&gt;

&lt;p&gt;Including a license clarifies how your package can be used. Define it in:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;A &lt;code&gt;LICENSE&lt;/code&gt; file at the root.
&lt;/li&gt;
&lt;li&gt;The &lt;code&gt;license&lt;/code&gt; field in &lt;code&gt;package.json&lt;/code&gt;.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  6.3 GitHub Repository
&lt;/h3&gt;

&lt;p&gt;While not strictly required, hosting your package on a platform like GitHub helps with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Collaboration&lt;/strong&gt; (issues, pull requests)
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Version Control&lt;/strong&gt; (Git tags, branches)
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Automated CI&lt;/strong&gt; (running tests on each commit)&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  6.4 Linting
&lt;/h3&gt;

&lt;p&gt;Use a linter like &lt;a href="https://eslint.org/" rel="noopener noreferrer"&gt;ESLint&lt;/a&gt; for consistent coding standards.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;--save-dev&lt;/span&gt; eslint
npx eslint &lt;span class="nt"&gt;--init&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Configure your lint rules, then run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm run lint
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  6.5 Continuous Integration (CI)
&lt;/h3&gt;

&lt;p&gt;For open-source or team projects, consider GitHub Actions, Travis CI, or similar. This ensures tests run automatically on every commit, increasing confidence and catching issues early.&lt;/p&gt;

&lt;h3&gt;
  
  
  6.6 Adding Dependencies and Managing Dependency Files
&lt;/h3&gt;

&lt;p&gt;As your package grows, you might need to incorporate other libraries or tools to enhance its functionality. Managing dependencies effectively ensures that your package remains robust, maintainable, and easy for others to use.&lt;/p&gt;

&lt;h4&gt;
  
  
  6.6.1. Adding Dependencies
&lt;/h4&gt;

&lt;p&gt;&lt;strong&gt;Dependencies&lt;/strong&gt; are packages required for your package to run correctly. &lt;strong&gt;DevDependencies&lt;/strong&gt; are packages needed only during development, such as testing frameworks or build tools.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;To add a runtime dependency&lt;/strong&gt;:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;  npm &lt;span class="nb"&gt;install &lt;/span&gt;lodash
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This command adds the &lt;code&gt;lodash&lt;/code&gt; library as a dependency and updates your &lt;code&gt;package.json&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"dependencies"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"lodash"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^4.17.21"&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;To add a development dependency&lt;/strong&gt;:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;  npm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;--save-dev&lt;/span&gt; eslint
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This adds &lt;code&gt;eslint&lt;/code&gt; as a devDependency:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"devDependencies"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"eslint"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^8.0.0"&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  6.6.2. Managing Dependency Files
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;&lt;code&gt;package.json&lt;/code&gt;&lt;/strong&gt;: This file lists all your dependencies and devDependencies. Ensure that all necessary packages are correctly listed to avoid missing dependencies during installation.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;&lt;code&gt;package-lock.json&lt;/code&gt;&lt;/strong&gt;: Automatically generated when you install dependencies, this file locks the versions of your dependencies to ensure consistent installations across different environments. &lt;strong&gt;Do not manually edit this file&lt;/strong&gt;; instead, let npm manage it.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  6.6.3. Best Practices
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Keep Dependencies Updated&lt;/strong&gt;: Regularly update your dependencies to incorporate the latest features and security patches. You can use tools like &lt;a href="https://www.npmjs.com/package/npm-check-updates" rel="noopener noreferrer"&gt;npm-check-updates&lt;/a&gt; to assist with this.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;  npm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;-g&lt;/span&gt; npm-check-updates
  ncu &lt;span class="nt"&gt;-u&lt;/span&gt;
  npm &lt;span class="nb"&gt;install&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Minimize Dependencies&lt;/strong&gt;: Only include packages that are essential for your package’s functionality. Fewer dependencies reduce the risk of conflicts and vulnerabilities.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Use Peer Dependencies When Appropriate&lt;/strong&gt;: If your package is a plugin or extension that relies on a host package (like React), specify it as a peer dependency to avoid version conflicts.&lt;br&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;  npm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;--save-peer&lt;/span&gt; react
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Update your &lt;code&gt;package.json&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"peerDependencies"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"react"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"^17.0.0"&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  6.6.4. Example: Adding a Dependency
&lt;/h4&gt;

&lt;p&gt;Suppose you want to use &lt;code&gt;axios&lt;/code&gt; for making HTTP requests in your package.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Install axios as a dependency&lt;/strong&gt;:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;   npm &lt;span class="nb"&gt;install &lt;/span&gt;axios
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Use axios in your code&lt;/strong&gt;:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;   &lt;span class="c1"&gt;// src/index.ts&lt;/span&gt;
   &lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;axios&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;axios&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

   &lt;span class="cm"&gt;/**
    * Fetches user data from an API
    * @param userId - The ID of the user
    * @returns User data
    */&lt;/span&gt;
   &lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;fetchUserData&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;userId&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="nb"&gt;Promise&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kr"&gt;any&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
     &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;axios&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`https://api.example.com/users/&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;userId&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
     &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
   &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  7. Use Cases
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Utility Packages&lt;/strong&gt;

&lt;ul&gt;
&lt;li&gt;E.g., date-formatting libraries to simplify working with dates.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;UI Components&lt;/strong&gt;

&lt;ul&gt;
&lt;li&gt;E.g., a set of React or Vue components published as a standalone package.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;CLI Tools&lt;/strong&gt;

&lt;ul&gt;
&lt;li&gt;E.g., command-line utilities for scaffolding projects or automating tasks.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Libraries for APIs&lt;/strong&gt;

&lt;ul&gt;
&lt;li&gt;E.g., wrappers for third-party APIs or microservices, making them easy to integrate with Node.js.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;




&lt;h2&gt;
  
  
  8. Creating Scripts to Automate Common Tasks
&lt;/h2&gt;

&lt;p&gt;To streamline your development workflow, it's beneficial to define custom scripts in your &lt;code&gt;package.json&lt;/code&gt;. These scripts can handle tasks like building, testing, deploying, and versioning your package with simple commands.&lt;/p&gt;

&lt;h3&gt;
  
  
  8.1. Benefits of Custom Scripts
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Automation&lt;/strong&gt;: Reduce manual steps by automating build and deployment processes.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Consistency&lt;/strong&gt;: Ensure that tasks are performed the same way every time.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Modularity&lt;/strong&gt;: Create reusable scripts that can be combined for complex workflows.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Efficiency&lt;/strong&gt;: Save time by chaining multiple commands into a single script.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  8.2. Example: Deploying to Development and Production
&lt;/h3&gt;

&lt;p&gt;Let's create two deployment scripts: &lt;code&gt;deploy:dev&lt;/code&gt; for development environments and &lt;code&gt;deploy:prod&lt;/code&gt; for production. These scripts will handle tasks such as building the project, tagging the Git repository, versioning, and deploying the package.&lt;/p&gt;

&lt;h4&gt;
  
  
  8.2.1. Defining the Scripts in &lt;code&gt;package.json&lt;/code&gt;
&lt;/h4&gt;

&lt;p&gt;Open your &lt;code&gt;package.json&lt;/code&gt; and add the following scripts under the &lt;code&gt;"scripts"&lt;/code&gt; section:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"scripts"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"tsc"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"test"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"jest"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"version"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"npm version patch"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"tag:dev"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"git tag -a v$(node -p &lt;/span&gt;&lt;span class="se"&gt;\"&lt;/span&gt;&lt;span class="s2"&gt;require('./package.json').version&lt;/span&gt;&lt;span class="se"&gt;\"&lt;/span&gt;&lt;span class="s2"&gt;) -m &lt;/span&gt;&lt;span class="se"&gt;\"&lt;/span&gt;&lt;span class="s2"&gt;Dev deployment v$(node -p &lt;/span&gt;&lt;span class="se"&gt;\"&lt;/span&gt;&lt;span class="s2"&gt;require('./package.json').version&lt;/span&gt;&lt;span class="se"&gt;\"&lt;/span&gt;&lt;span class="s2"&gt;)&lt;/span&gt;&lt;span class="se"&gt;\"&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"deploy:dev"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"npm run build &amp;amp;&amp;amp; npm run test &amp;amp;&amp;amp; npm run version &amp;amp;&amp;amp; npm run tag:dev &amp;amp;&amp;amp; git push &amp;amp;&amp;amp; git push --tags &amp;amp;&amp;amp; npm publish --tag dev"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"tag:prod"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"git tag -a v$(node -p &lt;/span&gt;&lt;span class="se"&gt;\"&lt;/span&gt;&lt;span class="s2"&gt;require('./package.json').version&lt;/span&gt;&lt;span class="se"&gt;\"&lt;/span&gt;&lt;span class="s2"&gt;) -m &lt;/span&gt;&lt;span class="se"&gt;\"&lt;/span&gt;&lt;span class="s2"&gt;Production deployment v$(node -p &lt;/span&gt;&lt;span class="se"&gt;\"&lt;/span&gt;&lt;span class="s2"&gt;require('./package.json').version&lt;/span&gt;&lt;span class="se"&gt;\"&lt;/span&gt;&lt;span class="s2"&gt;)&lt;/span&gt;&lt;span class="se"&gt;\"&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"deploy:prod"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"npm run build &amp;amp;&amp;amp; npm run test &amp;amp;&amp;amp; npm run version &amp;amp;&amp;amp; npm run tag:prod &amp;amp;&amp;amp; git push &amp;amp;&amp;amp; git push --tags &amp;amp;&amp;amp; npm publish"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  8.2.2. Breakdown of the Scripts
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;build&lt;/code&gt;&lt;/strong&gt;: Compiles the TypeScript code into JavaScript using the TypeScript compiler.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;test&lt;/code&gt;&lt;/strong&gt;: Runs the Jest test suite to ensure your package is working correctly.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;version&lt;/code&gt;&lt;/strong&gt;: Increments the patch version in &lt;code&gt;package.json&lt;/code&gt; following Semantic Versioning.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;tag:dev&lt;/code&gt; / &lt;code&gt;tag:prod&lt;/code&gt;&lt;/strong&gt;: Creates a Git tag corresponding to the current version for development or production deployments.&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;&lt;code&gt;deploy:dev&lt;/code&gt;&lt;/strong&gt;: &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Builds&lt;/strong&gt; the project.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Tests&lt;/strong&gt; the build.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Versions&lt;/strong&gt; the package.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Tags&lt;/strong&gt; the commit for a development deployment.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Pushes&lt;/strong&gt; the commits and tags to the remote repository.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Publishes&lt;/strong&gt; the package to npm with the &lt;code&gt;dev&lt;/code&gt; tag.&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;&lt;code&gt;deploy:prod&lt;/code&gt;&lt;/strong&gt;: Similar to &lt;code&gt;deploy:dev&lt;/code&gt; but publishes the package without a tag, making it the latest stable release.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  8.3. Running the Deployment Scripts
&lt;/h3&gt;

&lt;p&gt;With the scripts defined, deploying becomes straightforward:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Deploy to Development&lt;/strong&gt;:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;  npm run deploy:dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This command will build your project, run tests, increment the patch version, create a Git tag, push changes, and publish the package with the &lt;code&gt;dev&lt;/code&gt; tag.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Deploy to Production&lt;/strong&gt;:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;  npm run deploy:prod
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This command performs the same steps as &lt;code&gt;deploy:dev&lt;/code&gt; but publishes the package as the latest stable version without an additional tag.&lt;/p&gt;

&lt;h3&gt;
  
  
  8.4. Making Scripts Modular
&lt;/h3&gt;

&lt;p&gt;By breaking down tasks into smaller, reusable scripts (like &lt;code&gt;build&lt;/code&gt;, &lt;code&gt;test&lt;/code&gt;, &lt;code&gt;version&lt;/code&gt;, and tagging), you can compose complex workflows easily. This modularity allows you to maintain and update individual steps without affecting the entire deployment process.&lt;/p&gt;

&lt;p&gt;For example, if you need to change how the project is built, you only need to update the &lt;code&gt;build&lt;/code&gt; script without modifying the deployment scripts.&lt;/p&gt;

&lt;h3&gt;
  
  
  8.5. Additional Automation Tips
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Pre/Post Hooks&lt;/strong&gt;: Utilize npm's pre and post script hooks to run tasks automatically before or after specific scripts. For instance, you can add a &lt;code&gt;prepublishOnly&lt;/code&gt; script to ensure tests pass before publishing.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="w"&gt;  &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"scripts"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"prepublishOnly"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"npm run test &amp;amp;&amp;amp; npm run build"&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Environment Variables&lt;/strong&gt;: Manage different environments (development, staging, production) by using environment variables within your scripts or leveraging packages like &lt;a href="https://www.npmjs.com/package/cross-env" rel="noopener noreferrer"&gt;cross-env&lt;/a&gt; for cross-platform compatibility.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Error Handling&lt;/strong&gt;: Incorporate error handling in your scripts to halt the process if a critical step fails, ensuring that incomplete or faulty deployments do not occur.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  In Review
&lt;/h2&gt;

&lt;p&gt;Publishing an NPM package may feel daunting, but the fundamentals are straightforward:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Initialize your project with &lt;code&gt;npm init&lt;/code&gt;.
&lt;/li&gt;
&lt;li&gt;Write your code in either JavaScript or TypeScript (v5.7.2 recommended).
&lt;/li&gt;
&lt;li&gt;Add tests to ensure your package remains reliable.
&lt;/li&gt;
&lt;li&gt;Follow &lt;a href="https://semver.org/" rel="noopener noreferrer"&gt;SemVer&lt;/a&gt; for version management.
&lt;/li&gt;
&lt;li&gt;Publish your package with &lt;code&gt;npm publish&lt;/code&gt;.
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;By following these best practices you’ll have a package that is reliable, easy to maintain, and simple for others to consume. 💻  &lt;/p&gt;

</description>
      <category>javascript</category>
      <category>typescript</category>
      <category>npm</category>
      <category>beginners</category>
    </item>
    <item>
      <title>🚀 Tips for Every Level of Software Developer: How to Thrive in 2025</title>
      <dc:creator>Forrester Terry</dc:creator>
      <pubDate>Sun, 05 Jan 2025 19:21:54 +0000</pubDate>
      <link>https://dev.to/sweetpapa/tips-for-every-level-of-software-developer-how-to-thrive-in-2025-eha</link>
      <guid>https://dev.to/sweetpapa/tips-for-every-level-of-software-developer-how-to-thrive-in-2025-eha</guid>
      <description>&lt;h2&gt;
  
  
  Sections
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
Introduction: Why 2025?
&lt;/li&gt;
&lt;li&gt;
A.I. in 2025: A Quick Overview &lt;/li&gt;
&lt;li&gt;
Universal Core Principles
&lt;/li&gt;
&lt;li&gt;
🌱 Level 1: Learning to Code (Associate/Intern/Beginner)
&lt;/li&gt;
&lt;li&gt;
🎯 Level 2: Getting Your First Real Job/Gig (Junior Dev / Newbie Freelancer)
&lt;/li&gt;
&lt;li&gt;
📈 Level 3: Growing as a Developer (Mid-Level), Taking on More Responsibility
&lt;/li&gt;
&lt;li&gt;
⭐ Level 4: Becoming a Senior Developer, Leading Projects
&lt;/li&gt;
&lt;li&gt;
🏗️ Level 5: Architect of Systems, Leading Teams (Principal Engineer / Architect / Tech Lead / Eng Manager)
&lt;/li&gt;
&lt;li&gt;
👔 Level 6: Executive Roles (CTO / VP of Engineering / Director)
&lt;/li&gt;
&lt;li&gt;
Personal Branding &amp;amp; Portfolio-Building Tips
&lt;/li&gt;
&lt;li&gt;
Additional Tips for All Levels in 2025
&lt;/li&gt;
&lt;li&gt;
Conclusion &amp;amp; Final Thoughts
&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Introduction: Why 2025?
&lt;/h2&gt;

&lt;p&gt;📅 We’re standing at an interesting crossroads of &lt;strong&gt;A.I., quantum computing, robotics, and security&lt;/strong&gt;, where each new year accelerates the possibilities in tech. In 2025, developers of all levels will face new challenges: fully remote teams in multiple time zones, code-generation tools that can produce entire modules automatically, microservices that require advanced orchestration, and a heightened focus on data privacy and ethics. All the while, the technologies and tools will becoming increasingly more capable and impactful.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Why read this?&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;This articles tries to break down &lt;em&gt;practical tips&lt;/em&gt; by experience level, plus universal advice, so you can jump straight to what’s relevant for you—or get a sense of where you’re heading next in the world and career of software development. At minimum, hopefully you get some food for thought or validation of your current path.&lt;/p&gt;




&lt;h2&gt;
  
  
  A.I. in 2025: A Quick Overview
&lt;/h2&gt;

&lt;p&gt;🤖  A.I. is not just for data scientists anymore. From &lt;strong&gt;Large Language Models (LLMs)&lt;/strong&gt; assisting in code generation to &lt;strong&gt;computer vision&lt;/strong&gt; for advanced robotics, A.I. seeps into every domain. Here’s what to watch:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;AI-Assisted Code Review / Development&lt;/strong&gt;
Tools like GitHub’s built-in code analysis (powered by LLMs) can flag potential bugs or security issues automatically. Tools like Devin and Windsurf can write code for you.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Automated Testing&lt;/strong&gt;
Machine learning can identify edge cases you might never think of, generating test scenarios on the fly or even automating the testing process itself.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Computer Vision &amp;amp; Robotics&lt;/strong&gt;
Drones, automated factories, and self-driving systems are becoming more common, requiring devs who can integrate vision and language algorithms into everyday applications.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Personal “Agentic Systems”&lt;/strong&gt;
Think voice assistants or chat bots that &lt;em&gt;understand context&lt;/em&gt; deeply enough to handle user queries or even carry out tasks in your dev environment via API calls or scripts.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;More Capable Systems&lt;/strong&gt;
LLMs are becoming "smarter" and even smaller, allowing for more powerful tools to be built on top of them. Reasoning models such as o3 are reaching new benchmarks.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Suggestion:&lt;/strong&gt; To leverage A.I. &lt;em&gt;ethically&lt;/em&gt;—learn about model bias, data security, and compliance so you don’t ship harmful or vulnerable solutions.&lt;/p&gt;

&lt;h3&gt;
  
  
  Cool, Well and Good, but How Does This Affect Me?
&lt;/h3&gt;

&lt;p&gt;There are a few key things here:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Opportunities&lt;/strong&gt;: A.I. can automate repetitive tasks, freeing you up for more creative work. You can make entire one person businesses with the help of A.I.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Challenges&lt;/strong&gt;: You need to understand how to work &lt;em&gt;with&lt;/em&gt; A.I. tools, not just rely on them blindly. You need to know what their strengths and weaknesses are at this point.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Threats&lt;/strong&gt;: A.I. can also be misused or introduce new security risks. It is also going to take jobs.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Either as a consumer, investor, or employee -- A.I. will affect you.&lt;/p&gt;




&lt;h2&gt;
  
  
  Universal Core Principles
&lt;/h2&gt;

&lt;p&gt;💫 No matter where you are in your career, certain principles are golden:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Continuous Learning&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The tech world moves fast. Schedule weekly (or daily) “learning blocks” to stay ahead. Check out news, tutorials, or even a new language or framework.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Soft Skills &amp;amp; Communication&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Know how to articulate ideas, listen actively, and navigate conflicts. Emotional intelligence (EQ) is as critical as IQ.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Delivering Real Value&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Code that solves actual problems is &lt;em&gt;always&lt;/em&gt; more valued than code that’s just “cool.”&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Get Things Done&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Ship early, iterate often. Better to improve a shipped feature than over-engineer a never-released one.&lt;/li&gt;
&lt;li&gt;Focus on the must-do tasks first, then the nice-to-haves.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Security by Default&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Ransomware, data leaks, and compliance concerns (GDPR, CCPA, HIPAA) are not optional. Build security into your mindset from day one.&lt;/li&gt;
&lt;li&gt;Always think about how your code can be misused or exploited.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Burnout Is Real&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Set boundaries, take breaks, and safeguard your mental health. A sustainable pace beats sprints that end in exhaustion.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Networking &amp;amp; Collaboration&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The best opportunities often come through people — your next mentor, hiring manager, or co-founder might be at a local meetup or on Twitter/LinkedIn.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;




&lt;h2&gt;
  
  
  Level 1: Learning to Code (Associate/Intern/Beginner)
&lt;/h2&gt;

&lt;p&gt;🌱 You’re dipping your toes in the water, whether it’s via a bootcamp, university, or self-study.&lt;/p&gt;

&lt;h3&gt;
  
  
  Key Goals
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Master the Basics&lt;/strong&gt;: syntax, data structures, OOP vs. functional, REST APIs, etc.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Hands-On Projects&lt;/strong&gt;: build small things — try a tiny to-do app or a “guess the number” game.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Make Time to Practice&lt;/strong&gt;: daily or weekly coding sessions to build muscle memory.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Brief Real-World Example:
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Scenario&lt;/strong&gt;: You’re a complete beginner learning Python. You want to automate some tedious file organization at work.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;os&lt;/span&gt;
&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;shutil&lt;/span&gt;

&lt;span class="c1"&gt;# A mini-script to move images to an 'images' folder and text files to a 'docs' folder
&lt;/span&gt;&lt;span class="n"&gt;SOURCE_DIR&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;/Users/username/Downloads&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;
&lt;span class="n"&gt;IMAGE_DIR&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;/Users/username/Downloads/images&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;
&lt;span class="n"&gt;DOCS_DIR&lt;/span&gt;  &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;/Users/username/Downloads/docs&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;

&lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;file_name&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="n"&gt;os&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;listdir&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;SOURCE_DIR&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;file_name&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;endswith&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;.png&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="ow"&gt;or&lt;/span&gt; &lt;span class="n"&gt;file_name&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;endswith&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;.jpg&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
        &lt;span class="n"&gt;shutil&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;move&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;os&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;path&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;join&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;SOURCE_DIR&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;file_name&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="n"&gt;IMAGE_DIR&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;elif&lt;/span&gt; &lt;span class="n"&gt;file_name&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;endswith&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;.txt&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="ow"&gt;or&lt;/span&gt; &lt;span class="n"&gt;file_name&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;endswith&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;.pdf&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
        &lt;span class="n"&gt;shutil&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;move&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;os&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;path&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;join&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;SOURCE_DIR&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;file_name&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="n"&gt;DOCS_DIR&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You might fail a few times with path errors, but eventually, you get it working. You just &lt;em&gt;automated&lt;/em&gt; something tangible, and that keeps you motivated!&lt;/p&gt;

&lt;h3&gt;
  
  
  Modern Dev Practices to Explore:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Git &amp;amp; GitHub&lt;/strong&gt;: Basic version control is essential.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;No-Code Tools&lt;/strong&gt;: Zapier/Airtable to get a sense of what can be automated without writing everything from scratch. Combine with code via Webhooks or APIs. &lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Feature Flagging (Simple)&lt;/strong&gt;: Even at beginner level, toggling new features on/off in your small projects can teach you best practices early.&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Key Takeaway (L1)&lt;/strong&gt;: Learn by &lt;em&gt;doing&lt;/em&gt;. Don’t stress about perfection—celebrate small wins and keep pushing forward.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  Level 2: Getting Your First Real Job/Gig (Junior Dev / Newbie Freelancer)
&lt;/h2&gt;

&lt;p&gt;🎯 You’ve got some basics down, maybe a couple of small portfolio pieces. Now the big question: &lt;em&gt;“How do I break in?”&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Key Goals
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Real-World Experience&lt;/strong&gt;: internships, open-source projects, freelance gigs.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Understand the SDLC&lt;/strong&gt;: planning, coding, testing, code review, deployment.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Learn Collaboration&lt;/strong&gt;: communicating with team members, handling PR reviews, pair programming.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Example: The First Production Bug
&lt;/h3&gt;

&lt;p&gt;Imagine you’re a junior developer on an e-commerce site. A user reports they can’t add items to the cart. It’s your first “on-call” rotation.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What Happened?&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A small front-end validation script was recently changed. An unhandled &lt;code&gt;null&lt;/code&gt; value breaks the cart function for certain user sessions.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;How You Handled It&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Checked error logs, used Chrome DevTools to replicate the issue, &lt;em&gt;and&lt;/em&gt; asked a more senior dev to confirm your findings.
&lt;/li&gt;
&lt;li&gt;You pushed a quick fix, wrote a test case to prevent regressions, and documented it in the team Slack channel.&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;This real story (or a variation of it) happens daily in the dev world. Your ability to stay calm, troubleshoot effectively, and communicate is &lt;strong&gt;key&lt;/strong&gt;.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  Modern Dev Practices to Explore:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;CI/CD&lt;/strong&gt;: Tools like GitHub Actions or GitLab CI to automate testing and deployments.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Basic Infrastructure as Code (IaC)&lt;/strong&gt;: Even experimenting with Terraform or AWS CloudFormation for small setups.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;A/B Testing &amp;amp; Feature Flags&lt;/strong&gt;: Tools like LaunchDarkly let you deploy features to a small user subset first.&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Key Takeaway (L2)&lt;/strong&gt;: Gaining real experience and handling production issues are how you &lt;em&gt;really&lt;/em&gt; learn. Don’t fear failure; use it as a stepping stone.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  Level 3: Growing as a Developer (Mid-Level), Taking on More Responsibility
&lt;/h2&gt;

&lt;p&gt;📈 You can write code without constant supervision. You’re eager to learn more advanced concepts—maybe specialization or deeper system design.&lt;/p&gt;

&lt;h3&gt;
  
  
  Key Goals
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Deepen Expertise&lt;/strong&gt;: front-end frameworks, back-end architecture, data science, or security.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Work on Larger Projects&lt;/strong&gt;: multi-service or multi-team efforts.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Mentor Juniors&lt;/strong&gt;: share your knowledge, reinforce your own skills by teaching.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Core Modern Dev Practices:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Microservices Architecture&lt;/strong&gt;

&lt;ul&gt;
&lt;li&gt;Breaking monoliths into services. Familiarize yourself with Docker &amp;amp; Kubernetes.
&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;Feature Flagging &amp;amp; A/B Testing&lt;/strong&gt;

&lt;ul&gt;
&lt;li&gt;Deploy new functionality to a subset of users and measure results with real metrics.
&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;Edge Computing&lt;/strong&gt;

&lt;ul&gt;
&lt;li&gt;Offload certain tasks to the “edge” (CDN-level computations) to reduce latency for global users.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;




&lt;h4&gt;
  
  
  Level 3 Real-World Example: A/B Testing “Win”
&lt;/h4&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Scenario&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Your mid-level dev team wants to improve the checkout funnel for a SaaS product. You set up an &lt;strong&gt;A/B test&lt;/strong&gt; using LaunchDarkly (or a similar tool) where half of your traffic sees a new checkout UI and half sees the old.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Process&lt;/strong&gt;:  &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Hypothesis&lt;/strong&gt;: The new UI is cleaner and reduces friction, leading to higher conversions.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Implementation&lt;/strong&gt;: You hide the new checkout behind a feature flag, rolling it out to 10% of users initially.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Analysis&lt;/strong&gt;: After 2 weeks, the new UI shows a 7% lift in conversion.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Decision&lt;/strong&gt;: You roll it out to 100%, monitor logs for issues, and measure again.&lt;/li&gt;
&lt;/ol&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Result&lt;/strong&gt;: A safe, data-driven approach to improving a &lt;em&gt;core&lt;/em&gt; business metric. You’ve demonstrated not just coding skills, but also product thinking.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  Level 4: Becoming a Senior Developer, Leading Projects
&lt;/h2&gt;

&lt;p&gt;⭐ Now you’re the go-to person for technical decisions, mentoring other devs, and owning entire project life cycles.&lt;/p&gt;

&lt;h3&gt;
  
  
  Key Goals
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Big Picture Awareness&lt;/strong&gt;: how your code fits into revenue goals, user experience, compliance, etc.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Lead &amp;amp; Delegate&lt;/strong&gt;: assign tasks, trust your team, handle tough problems.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Advanced Security &amp;amp; Reliability&lt;/strong&gt;: from secure coding to robust logging &amp;amp; monitoring (SRE mindset).&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  A Quick Snippet: Senior Dev Do’s and Don’ts
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// DO: Write self-explanatory, properly commented/documented, maintainable code&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;calculateCartTotal&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// items = array of { price, quantity }&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;reduce&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;sum&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;sum&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;price&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;quantity&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// DON'T: Obfuscate logic or rely on "clever" hacks, no clear naming convention or comments for intent.&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;cCT&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;s&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;&lt;span class="k"&gt;for&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="k"&gt;in&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;&lt;span class="nx"&gt;s&lt;/span&gt;&lt;span class="o"&gt;+=&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;q&lt;/span&gt;&lt;span class="p"&gt;;}&lt;/span&gt;&lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;s&lt;/span&gt;&lt;span class="p"&gt;;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Do&lt;/strong&gt;: Name variables and functions clearly, handle edge cases, add comments for tricky parts.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Don’t&lt;/strong&gt;: Write “clever” code that only you can understand.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Modern Dev Practices
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Observability&lt;/strong&gt;: Tools like Datadog, Grafana, or Prometheus to track system performance in real time.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Ethical Hacking &amp;amp; Pen Testing&lt;/strong&gt;: Ensuring your apps are resilient against malicious attacks.&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Key Takeaway (L4)&lt;/strong&gt;: Balance being hands-on with letting your team learn and fail productively. Own projects, keep an eye on &lt;em&gt;security&lt;/em&gt;, &lt;em&gt;quality&lt;/em&gt;, and &lt;em&gt;business impact&lt;/em&gt;.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  Level 5: Architect of Systems, Leading Teams (Principal Engineer / Architect / Tech Lead / Eng Manager)
&lt;/h2&gt;

&lt;p&gt;🏗️ At this level, you’re shaping long-term technical strategy and building cohesive, scalable systems. You also spend more ( A LOT MORE ) time &lt;em&gt;developing people&lt;/em&gt; than writing code.&lt;/p&gt;

&lt;h3&gt;
  
  
  Key Goals
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Drive Strategy&lt;/strong&gt;: Align technical road maps with business objectives.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Develop &amp;amp; Empower Teams&lt;/strong&gt;: Mentorship, career growth plans, and performance feedback.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Optimize Processes&lt;/strong&gt;: Introduce coding standards, define architecture patterns, evaluate new tooling.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Modern Dev Practices
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Infrastructure as Code (IaC)&lt;/strong&gt;

&lt;ul&gt;
&lt;li&gt;Terraform, AWS CDK, or Azure Resource Manager to manage large infrastructures predictably.
&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;Continuous Deployment&lt;/strong&gt;

&lt;ul&gt;
&lt;li&gt;Pipelines that auto-deploy to production with safe rollbacks.
&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;Data Privacy &amp;amp; Compliance&lt;/strong&gt;

&lt;ul&gt;
&lt;li&gt;Ensuring your architecture respects GDPR, HIPAA, or industry-specific regulations.&lt;/li&gt;
&lt;li&gt;Not getting hacked or leaking data is a big deal... a really big deal.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Key Takeaway (L5)&lt;/strong&gt;: Your effectiveness is measured not by the lines of code you commit, but by how well the &lt;em&gt;system&lt;/em&gt; and the &lt;em&gt;team&lt;/em&gt; function under your guidance.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  Level 6: Executive Roles (CTO / VP of Engineering / Director)
&lt;/h2&gt;

&lt;p&gt;👔 You’re making decisions on technology, culture, and strategic direction that directly affect the company. Your role is less about coding and more about &lt;strong&gt;vision&lt;/strong&gt;, &lt;strong&gt;team-building&lt;/strong&gt;, and &lt;strong&gt;business outcomes&lt;/strong&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Key Goals
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Align Tech &amp;amp; Business Strategy&lt;/strong&gt;: Forecast trends, evaluate big bets on AI, automation, or expansion.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Lead Culture&lt;/strong&gt;: Attract top talent, retain them with a positive environment, and champion diversity and inclusion.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Manage Stakeholders&lt;/strong&gt;: Communicate with board members, investors, and other executives; remove roadblocks for your teams.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Example: Handling a Major Pivot
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Scenario&lt;/strong&gt;: The market for your main product is shrinking; your competitor is using advanced AI personalization. You must decide whether to pivot the entire dev team to adopt new AI-based features or maintain your existing stack.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Process&lt;/strong&gt;: Evaluate ROI, gather input from principal engineers, run small proofs-of-concept, and present findings to the board.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Outcome&lt;/strong&gt;: If the POC shows promise, you shift resources, re-train your engineers, and ensure a stable migration strategy over the next 6–12 months.&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Key Takeaway (L6)&lt;/strong&gt;: You’re the bridge between tech possibilities and business realities. vision, leadership, and the ability to make tough calls define you at this level.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  Personal Branding &amp;amp; Portfolio-Building Tips
&lt;/h2&gt;

&lt;p&gt;🎨 Whether you’re Level 1 or Level 6, &lt;strong&gt;personal branding&lt;/strong&gt; can amplify your opportunities:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Platform Recommendations&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Dev.to&lt;/strong&gt;: Great for sharing tutorials or insights.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;GitHub&lt;/strong&gt;: Keep your portfolio public, showcase open-source contributions.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;LinkedIn&lt;/strong&gt;: Maintain an up-to-date profile, share thought leadership posts.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Twitter / X&lt;/strong&gt;: Quick takes on industry trends, real-time networking.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;YouTube / Twitch&lt;/strong&gt;: Live coding sessions, tech discussions.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Reddit&lt;/strong&gt;: Sharing projects and getting... all types of feedback!
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Content Creation&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Write short articles on frameworks like &lt;strong&gt;Quasar&lt;/strong&gt;, &lt;strong&gt;Firebase&lt;/strong&gt;, or &lt;strong&gt;TypeScript&lt;/strong&gt; tips.
&lt;/li&gt;
&lt;li&gt;Make short videos explaining how you used &lt;strong&gt;CrewAI&lt;/strong&gt; (a hypothetical AI tool) for automated code reviews.
&lt;/li&gt;
&lt;li&gt;Show “before and after” examples of your code or architecture improvements.&lt;/li&gt;
&lt;li&gt;Focus on niche topics that you are passionate about or deal directly with to avoid competition in over-saturated areas.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Building a Developer Portfolio&lt;/strong&gt;  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Include 2–5 representative projects (not 20 half-done ones).
&lt;/li&gt;
&lt;li&gt;Clearly define: the &lt;strong&gt;problem&lt;/strong&gt;, &lt;strong&gt;your solution&lt;/strong&gt;, and &lt;strong&gt;impact&lt;/strong&gt; (metrics or user testimonials).
&lt;/li&gt;
&lt;li&gt;Use short videos or animated GIFs to demo features.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Pro Tip:&lt;/strong&gt; Even senior-level folks benefit from a personal portfolio to demonstrate technical leadership, architectural diagrams, or big wins.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  Additional Tips for All Levels in 2025
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;💡 Infrastructure as Code&lt;/strong&gt;: Reduces manual errors, improves reproducibility. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;💡 Feature Flagging, A/B Testing, Edge Computing&lt;/strong&gt;: Helps you deploy features safely and measure real impact at scale. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;💡 Stay Abreast of AI Tools&lt;/strong&gt;: Large Language Models, Computer Vision frameworks, and Automated Testing are evolving. Keep exploring new ones that align with your domain.  &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;💡 Emphasize Security and Privacy&lt;/strong&gt;: DevSecOps is not optional. Integrate security scanning into your CI/CD pipeline.  &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;💡 Interdisciplinary Knowledge&lt;/strong&gt;: Understanding product management, UX design, or data science can make you a more strategic dev.  &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;💡 Work-Life Integration&lt;/strong&gt;: Remote/hybrid setups can blur boundaries. Create a routine that keeps you effective &lt;em&gt;and&lt;/em&gt; sane.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;💡 Sometimes You Need to Say NO&lt;/strong&gt;: Over-committing leads to burnout. Learn to set boundaries and prioritize effectively.&lt;/p&gt;




&lt;h3&gt;
  
  
  My Personal Path
&lt;/h3&gt;

&lt;p&gt;For myself, I started out as a computer repair technician. I never actually thought I would program because it seemed really difficult. On the job, I started to learn how to create small scripts and tools that helped my desktop support team. I got a chance to do more development, and from there learned new things project by project. I went from Software Developer to Lead Developer to an Engineering Manager.&lt;/p&gt;

&lt;p&gt;My focus for the future is to become a subject matter expert on automating tasks and workflows with A.I., as well learning more about Web3 tools. There seems like there is going to be a lot of demand from businesses to automate more and more tasks, and I want to be a part of that.&lt;/p&gt;

&lt;p&gt;My career path was made possible by hard work, but vey much also by the help of mentors and peers who helped me along the way. Just as importantly, I took things one day at a time and tried to have fun along the way.&lt;/p&gt;

&lt;h2&gt;
  
  
  Final Thoughts
&lt;/h2&gt;

&lt;p&gt;🎬 Whether you’re writing your first “Hello World” or planning a multi-year AI roadmap at the C-suite level, &lt;strong&gt;2025&lt;/strong&gt; offers vast opportunities. The key to thriving is:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Continuous Learning &amp;amp; Adaptability&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Focus on Real-World Value&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Collaboration &amp;amp; Empathy&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Security &amp;amp; Ethical Responsibility&lt;/strong&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Each level demands new skills and perspectives — but they all build on the same foundations of consistent learning, delivering value, and fostering strong relationships. Share your progress, connect with mentors, and keep exploring emerging tools—from LLM-driven code reviews to microservices on the edge.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Action-able Idea&lt;/strong&gt;:&lt;br&gt;&lt;br&gt;
Pick one tip relevant to your level and apply it this week—whether it’s setting up a mini CI/CD pipeline, writing a Dev.to post, or scheduling a 1:1 with a teammate to discuss career growth.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Thanks for taking the time to read this&lt;/strong&gt;. Hopefully you found something useful here. If you have any questions or want to share your own career journey, feel free to comment below. I have a lot more to say about each level and some lessons learned, so I may make a series diving into each level more.&lt;/p&gt;

&lt;p&gt;Remember, the journey is as important as the destination. Enjoy the ride! Everything builds on top of each other, the wins and the misses.&lt;/p&gt;

&lt;p&gt;Happy Programming! And Happy New Year! 🎉&lt;/p&gt;

</description>
      <category>development</category>
      <category>careerdevelopment</category>
      <category>productivity</category>
      <category>resources</category>
    </item>
    <item>
      <title>Building an App with AI Pair Programming: Lessons from a 7-Hour Sprint</title>
      <dc:creator>Forrester Terry</dc:creator>
      <pubDate>Thu, 26 Dec 2024 13:40:10 +0000</pubDate>
      <link>https://dev.to/sweetpapa/building-an-app-with-ai-pair-programming-lessons-from-a-7-hour-sprint-kmc</link>
      <guid>https://dev.to/sweetpapa/building-an-app-with-ai-pair-programming-lessons-from-a-7-hour-sprint-kmc</guid>
      <description>&lt;p&gt;As developers, we're always looking for ways to improve our productivity and streamline our workflows. With the recent advances in AI (and my firm belief that these technologies will be game-changing), I decided to put these tools to the test in a real-world development scenario.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;My Goal: Build a full-stack AI-powered food tracking app PoC in just 7 hours. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The Result: It worked pretty well! But not without challenges.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Here's what I learned about using AI as a development buddy.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Project
&lt;/h2&gt;

&lt;p&gt;The goal was ambitious but focused: create a mobile app that lets users photograph their food and automatically log it to a food tracker using AI recognition. The tech stack included my go-to's: Quasar Framework (VueJS Framework), Google Firebase, and Capacitor (Mobile Dev Framework), with Google Gemini 2.0 Flash for AI inference. &lt;/p&gt;

&lt;p&gt;Nothing super fancy, but more than enough complexity to put AI assistance to the test.&lt;/p&gt;

&lt;h2&gt;
  
  
  The A.I. Tools
&lt;/h2&gt;

&lt;p&gt;I used a combination of AI tools to assist with different aspects of the project:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;ChatGPT (o1 Model)&lt;/strong&gt;: For high-level planning, requirements gathering, and general guidance&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Claude 3.5 Sonnet via WindSurf/Cascade&lt;/strong&gt;: For code generation and specific development tasks, I used a tool called WindSurf by Codeium. It is essentially an IDE built off Visual Studio Code with an A.I. code writer built in. It has direct access to files, and can quickly write and edit entire files with version control.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Google Gemini 2.0 Flash&lt;/strong&gt;: For image recognition and food classification. This model is super powerful and super cheap.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  The "AI as Dev Intern" Approach
&lt;/h2&gt;

&lt;p&gt;One of the most valuable insights I gained was thinking of AI as a junior developer or intern. This mental model completely changed how I approached the collaboration. Just as you wouldn't dump an entire project on a new intern's desk and expect perfect results, I learned to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Be explicit with instructions&lt;/li&gt;
&lt;li&gt;Break tasks into manageable chunks&lt;/li&gt;
&lt;li&gt;Review output and provide feedback&lt;/li&gt;
&lt;li&gt;Not expect too much at once&lt;/li&gt;
&lt;li&gt;Give guidance and direction when needed&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This approach led to better payoff, and worked better than treating the AI as either  "all-knowing" or "completely unreliable".&lt;/p&gt;

&lt;h2&gt;
  
  
  What Worked Well
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Planning and Requirements
&lt;/h3&gt;

&lt;p&gt;AI proved exceptionally helpful in the planning phase. I started with a rough project outline and used iterative prompts to refine it. For example, one of my initial prompts was:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Can you help me plan out making the following app in 7 hours:

&amp;lt;information about the app&amp;gt;

Detail out how long I should spend on each section, 
and revise my overall plan as needed.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This sparked a back-and-forth that helped crystallize the project scope and timeline, leading to a more realistic and detailed plan.&lt;/p&gt;

&lt;h3&gt;
  
  
  Documentation
&lt;/h3&gt;

&lt;p&gt;The AI tools excelled at generating and maintaining documentation. It could quickly create comprehensive markdown files and keep them updated as the project evolved. This freed up valuable time for actual development work.&lt;/p&gt;

&lt;h3&gt;
  
  
  Iterative Development
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg8awgc668yn79hu6h8qp.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg8awgc668yn79hu6h8qp.jpg" width="500" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Breaking down development into smaller, focused prompts proved highly effective. Instead of trying to generate entire components at once, I used a cascade of prompts, each building on the previous one. For example:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;First, setting up Firebase backend infrastructure&lt;/li&gt;
&lt;li&gt;Then, building the frontend boilerplate&lt;/li&gt;
&lt;li&gt;Following with specific features like the camera capture screen&lt;/li&gt;
&lt;li&gt;Finally, adding data processing and display functionality&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;A neat trick I found, was to have the A.I. keep notes of the progress and next steps, so it could have something to reference in between prompts. Since I was using WindSurf, I could use a "master prompt" to keep the conversation going. The master prompt would instruct the A.I. to refer back to the notes and add to them as it goes along writing code.&lt;/p&gt;

&lt;h3&gt;
  
  
  Bug Fixes and Post Development
&lt;/h3&gt;

&lt;p&gt;Another place where WindSurf shined was in bug fixes and post-development tasks. &lt;/p&gt;

&lt;p&gt;After testing my app out and noting some bugs, I passed my list to WindSurf and it could quickly identify and correct issues, and even generate test cases to ensure the fixes worked. This saved me a ton of time and effort.&lt;/p&gt;

&lt;p&gt;I had the following list of bugs, and only on a few occasions did I have to manually fix them:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight markdown"&gt;&lt;code&gt;x = Was fixed by AI
&lt;span class="p"&gt;-&lt;/span&gt; = Was fixed by me, assisted by AI
&lt;span class="p"&gt;*&lt;/span&gt; = Was not fixed by AI, I had to fix it myself
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;[x] &lt;strong&gt;BUG&amp;gt;&lt;/strong&gt; Camera goes blank after taking picture and hitting cancel (Web implementation)&lt;/li&gt;
&lt;li&gt;[x] &lt;strong&gt;BUG&amp;gt;&lt;/strong&gt; In the Detected Foods View If no foods are detected, list is blank, which is good, but we should show some sort of icon and text to explain that no foods have been added or detected&lt;/li&gt;
&lt;li&gt;[x] &lt;strong&gt;BUG&amp;gt;&lt;/strong&gt; In the Detected Foods View, it would be nice to add each Item (text title, confidence, delete button, select matching food drop down) better grouped to make it clear that all those elements are a part of the same food detection. This can be done via a q-card, some better styling, or whatever&lt;/li&gt;
&lt;li&gt;[ * ] &lt;strong&gt;BUG&amp;gt;&lt;/strong&gt; In the Detected Foods View, Select Matching food drop down does not reopen properly when attempting to open drop down for something added solely via search (rather than an item added via the camera)&lt;/li&gt;
&lt;li&gt;[x] &lt;strong&gt;BUG&amp;gt;&lt;/strong&gt; In the Detected Foods View, Cancel button should return user to Dashboard
debounceSearch should not fire if input is empty&lt;/li&gt;
&lt;li&gt;[-] &lt;strong&gt;FEATURE&amp;gt;&lt;/strong&gt;  Entry Submission (Backend) - Take IMG, and resize, crop, compress, etc to make the image fit nicely in a 128*128 square nicely. Create multiple sizes for image, and add links to images in the record for submission (along side imageUrl)&lt;/li&gt;
&lt;li&gt;[x] &lt;strong&gt;FEATURE&amp;gt;&lt;/strong&gt; Dashboard - Show IMG for each captured meal entry, loading appropriate size&lt;/li&gt;
&lt;li&gt;[x] &lt;strong&gt;FEATURE&amp;gt;&lt;/strong&gt; Add View Meal Page -&amp;gt; show all details and charts and stuff&lt;/li&gt;
&lt;li&gt;[x] &lt;strong&gt;FEATURE&amp;gt;&lt;/strong&gt; Add Edit Meal Functionality -&amp;gt; Bring back modal from Camera page view, but only use the modal. Do not start camera.&lt;/li&gt;
&lt;li&gt;[x] &lt;strong&gt;FEATURE&amp;gt;&lt;/strong&gt; Add Delete Meal Functionality&lt;/li&gt;
&lt;li&gt;[x] &lt;strong&gt;FEATURE&amp;gt;&lt;/strong&gt; History View Meals: Ability to view ALL MEAL entries, paginated, by day. Use Quasar Timeline -&amp;gt; have Meals button in menu goto this page. This page should show the same type of cards shown for meal entries on the IndexPage.vue&lt;/li&gt;
&lt;li&gt;[x] &lt;strong&gt;FEATURE&amp;gt;&lt;/strong&gt; History View Water: Ability to view ALL WATER entries, paginated, by day, Use Quasar timeline -&amp;gt; have Water button in menu goto this page. This page should show the same type of cards shown for water entries on the IndexPage.vue&lt;/li&gt;
&lt;li&gt;[x] &lt;strong&gt;BUG&amp;gt;&lt;/strong&gt; Water history Edit does not work&lt;/li&gt;
&lt;li&gt;[x] &lt;strong&gt;BUG&amp;gt;&lt;/strong&gt; Water history data is weird&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Challenges and Gotchas
&lt;/h2&gt;

&lt;p&gt;Not everything was smooth sailing. Some key challenges emerged:&lt;/p&gt;

&lt;h3&gt;
  
  
  File Editing Issues
&lt;/h3&gt;

&lt;p&gt;I discovered several limitations when it came to file modifications:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Open files sometimes got seemingly locked / became uneditable by WindSurf&lt;/li&gt;
&lt;li&gt;Longer conversations absolutely decreased the quality of code editing&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;NOTE: As of writing this, it seems the file lock/failed filed editing bug has been fixed in the latest version of WindSurf.&lt;/strong&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Context Management
&lt;/h3&gt;

&lt;p&gt;The quality of AI assistance degraded in longer conversations. I learned to start fresh conversations for new components and provide condensed context rather than trying to maintain one long session.&lt;/p&gt;

&lt;p&gt;As the code got longer and more complex, the AI struggled to keep up. I had to break down the tasks into smaller, more manageable chunks to maintain quality, or had to provide lots of details and context to keep the AI on track.&lt;/p&gt;

&lt;p&gt;Going off track would entail dropping features, erasing relevant code, or sometimes building the wrong thing entirely. This was a big time sink, and I had to be very careful to keep the AI on track or decide to code manually.&lt;/p&gt;

&lt;h3&gt;
  
  
  Knowing When to Code Manually
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9mvzqg1hlu6e84o842am.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9mvzqg1hlu6e84o842am.jpg" width="517" height="499"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Sometimes, doing it yourself is simply faster. Learning to recognize these moments saved considerable time and frustration. As noted in my development log: &lt;strong&gt;"When it works, it works well. When it doesn't, it can be a time sink."&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Best Practices That Emerged
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Git Commit Frequently&lt;/strong&gt;: Before having AI make significant changes, commit your current state. This provides an easy fallback if things go wrong.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Prepare Boilerplate Code&lt;/strong&gt;: Set up your project structure and basic configurations before engaging AI assistance. In my case, this meant:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Setting up Quasar/Vue CLI&lt;/li&gt;
&lt;li&gt;Configuring Firebase CLI and components&lt;/li&gt;
&lt;li&gt;Establishing basic project structure&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Clear and Detailed Prompting&lt;/strong&gt;: Be as specific as possible with your requirements. Include relevant context and examples. Spend as much time as you can in your requirements and design phase, and provide as much detail as possible. These notes and direction will not only help you execute on your project better, but it drastically improves the quality of the code generated by the AI.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Iterative Feedback&lt;/strong&gt;: Don't hesitate to correct or guide the AI. For example, when I received output that didn't quite match requirements, I provided specific feedback:&lt;br&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;That works pretty well, except a few things aren't working:
1. When I go to the home page (/) I get a blank screen
2. The Dashboard summary view doesn't show macro nutrient information
3. The water should be in cups
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This kind of specific feedback usually led to quick, accurate corrections.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Verdict
&lt;/h2&gt;

&lt;p&gt;Using AI absolutely accelerated development. While it required guidance and occasional correction, the combination of ChatGPT and Claude along with WindSurf allowed me to progress much further than I could have alone in the same time frame.&lt;/p&gt;

&lt;p&gt;That said, success required understanding both the capabilities and limitations of these tools. The key was finding the right balance between AI assistance and human expertise, using each where they excel.&lt;/p&gt;

&lt;h2&gt;
  
  
  Looking Forward
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhsfdq02kofihxe3cthfa.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhsfdq02kofihxe3cthfa.jpg" width="500" height="575"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This experiment suggests a future where AI tools become an integral part of the development workflow - for now, not replacing developers, but augmenting their capabilities. The key is learning to work with these tools effectively, understanding their strengths and limitations, and developing workflows that maximize their benefits while minimizing their drawbacks.&lt;/p&gt;

&lt;p&gt;For developers interested in incorporating AI into their workflow, I recommend starting small, establishing clear patterns of interaction, and gradually expanding AI's role as you become more comfortable with its capabilities and limitations.&lt;/p&gt;

&lt;p&gt;The tools are at the level of a junior developer, and soon with enough training data and iteration, they will be able to do much more. I can see these tools ultimately writing entire applications and handling the majority of the development process. Until the models can simulate a senior developer, we will still need human oversight and guidance.&lt;/p&gt;

&lt;h3&gt;
  
  
  Strengths:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Documentation&lt;/strong&gt;: Generating and maintaining documentation&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Minor Bug Fixes / Troubleshooting&lt;/strong&gt;: Identifying and correcting bugs&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Unit Testing&lt;/strong&gt;: Generating test cases and ensuring code quality&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Code Generation / Small Components&lt;/strong&gt;: Writing boilerplate code and basic components to get you started&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Planning and Requirements Gathering&lt;/strong&gt;: Outlining project scope and timeline&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Infrastructure Setup&lt;/strong&gt;: Configuring basic project structure and setup, with Terraform, Dockerfiles, etc.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Rapid Learning and Prototype Generation&lt;/strong&gt;: Quickly learning new frameworks and generating prototypes&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Weaknesses:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Complex Logic&lt;/strong&gt;: Handling intricate business logic or complex algorithms&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Design and UX&lt;/strong&gt;: Creating visually appealing interfaces or user experiences&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Writing Larger Components&lt;/strong&gt;: Writing complex modules or larger components end to end&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Context / Memory&lt;/strong&gt;: Maintaining context over long conversations or across multiple components&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Complex Debugging&lt;/strong&gt;: Troubleshooting complex issues or edge cases, often requires guidance to be useful&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Up to Date with Latest Tech&lt;/strong&gt;: Keeping up with the latest frameworks, libraries, and best practices&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I'm excited to see where this technology goes and how it will shape the future of software development.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Pictures!!!
&lt;/h2&gt;

&lt;p&gt;Here are some quick screenshots of the app I was able to build in 7 hours. It's not perfect, but it's a solid start!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjnkgvl3u5a9ju1gvkckk.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjnkgvl3u5a9ju1gvkckk.jpg" alt="Screenshot 1" width="800" height="1777"&gt;&lt;/a&gt;&lt;br&gt;
(Using Camera to Capture Food)&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiad6tvthsewmwfh09wjc.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiad6tvthsewmwfh09wjc.jpg" alt="Screenshot 2" width="800" height="1777"&gt;&lt;/a&gt;&lt;br&gt;
(Sending Image to AI for Food Recognition)&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr4lc329l8prxhz1fpbni.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr4lc329l8prxhz1fpbni.jpg" alt="Screenshot 3" width="800" height="1777"&gt;&lt;/a&gt; &lt;br&gt;
(Viewing Results - Adding Food to Tracker)&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1a6u6dd81hnm4q41r1d5.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1a6u6dd81hnm4q41r1d5.jpg" alt="Screenshot 4" width="800" height="1777"&gt;&lt;/a&gt;&lt;br&gt;
(Confirming Food Entry)&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxq8yxioxyiovw3ck1scp.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxq8yxioxyiovw3ck1scp.jpg" alt="Screenshot 5" width="800" height="1777"&gt;&lt;/a&gt;&lt;br&gt;
(Dashboard View)&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxlkpd7sjyfh3nvr0g0wx.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxlkpd7sjyfh3nvr0g0wx.jpg" alt="Screenshot 6" width="800" height="1777"&gt;&lt;/a&gt;&lt;br&gt;
(Food Entry View)&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Shameless, But Relevant Plug&lt;/strong&gt;: &lt;/p&gt;

&lt;p&gt;While I am still working on the food app mentioned in this post, I was able to finish another project quite quickly using WindSurf and A.I.&lt;/p&gt;

&lt;p&gt;If you're interested in an AI-powered Git CLI helper to make commit messages and release notes easier to maintain, check out &lt;a href="https://github.com/Sweet-Papa-Technologies/egit" rel="noopener noreferrer"&gt;eGit&lt;/a&gt;&lt;/p&gt;

</description>
      <category>development</category>
      <category>ai</category>
      <category>productivity</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Building A.I. Based Apps : A General Approach</title>
      <dc:creator>Forrester Terry</dc:creator>
      <pubDate>Sun, 14 Jul 2024 20:19:31 +0000</pubDate>
      <link>https://dev.to/sweetpapa/building-ai-based-apps-a-general-approach-1lem</link>
      <guid>https://dev.to/sweetpapa/building-ai-based-apps-a-general-approach-1lem</guid>
      <description>&lt;p&gt;In today's rapidly evolving tech landscape, developing applications powered by generative AI models, particularly Large Language Models (LLMs), has become an exciting frontier and a golden opportunity. LLMs are advanced AI systems trained on vast amounts of text data, capable of understanding and generating human-like text. They're the powerhouse behind many cutting-edge AI applications, from chatbots to content generators.&lt;/p&gt;

&lt;p&gt;As someone currently working on several AI apps, I've realized that having a structured process and understanding the common phases of AI application development can significantly boost your chances of success. This high-level guide details the order of operations and general steps involved in creating AI-powered applications.&lt;/p&gt;

&lt;h2&gt;
  
  
  The AI Application Development Lifecycle: An Overview
&lt;/h2&gt;

&lt;p&gt;My approach consists of five main phases: Input, Process, Quality Assurance, Deployment, and Output. Each phase plays a crucial role in creating a successful AI application. These stages are interconnected, forming a cycle of continuous improvement and refinement.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx0yvffeof6vup5vfnppe.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx0yvffeof6vup5vfnppe.png" alt="AI Application Development Lifecycle" width="800" height="711"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Let's dive into each phase, exploring key components, pro tips, and common challenges. To illustrate these concepts, we'll use a running example of building an AI-powered content recommendation system for a news website.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 1: Input (The Challenge)
&lt;/h3&gt;

&lt;p&gt;The journey begins with defining your challenge (the problem you're trying to solve) and gathering the relevant data.&lt;/p&gt;

&lt;h4&gt;
  
  
  Key Components:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Data Collection&lt;/strong&gt;: Identify and gather relevant data sources. This could include text corpora, databases, APIs, or web scraping. The key is to ensure your data is comprehensive and representative of the problem you're trying to solve.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Data Preparation&lt;/strong&gt;: Clean, format, and preprocess your data. This step is crucial for ensuring the quality of your model's input. Consider techniques like normalization, tokenization, and handling missing values.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Pro Tip&lt;/strong&gt;: Pay attention to data quality and potential biases at this stage. Your model is only as good as the data it's trained on.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Common Pitfall&lt;/strong&gt;: Overlooking data privacy and compliance issues. Always ensure you have the right to use the data you've collected.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example&lt;/strong&gt;: For our content recommendation system, we'd collect article data, user reading history, and engagement metrics from the news website's database.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Exercise&lt;/strong&gt;: Identify three potential data sources for your AI project. For each source, list possible challenges in data collection and preparation.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 2: Process (Secret Sauce)
&lt;/h3&gt;

&lt;p&gt;This is where the magic happens. You'll select and fine-tune your model, implement RAG, and develop your prompts or code.&lt;/p&gt;

&lt;h4&gt;
  
  
  Key Components:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Model Selection&lt;/strong&gt;: Choose the right LLM for your task. Consider factors like model size, specialization, and deployment requirements. Don't always go for the largest model – sometimes a smaller, more specialized model can outperform larger ones for specific tasks.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Fine-tuning&lt;/strong&gt;: Adapt the chosen model to your specific use case using domain-specific data. This can significantly improve performance on your particular task.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;RAG Implementation&lt;/strong&gt;: Implement Retrieval-Augmented Generation to enhance your model's knowledge and reduce hallucinations. This is particularly useful for tasks requiring up-to-date or specialized information.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Prompts/Code Development&lt;/strong&gt;: Craft effective prompts or develop code to interact with your model and process its outputs. Experiment with different prompt structures to find what works best for your use case.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Pro Tip&lt;/strong&gt;: Keep a versioning system for your models and prompts. This will help you track changes and revert if necessary.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Common Pitfall&lt;/strong&gt;: Overfitting the model to your training data, leading to poor generalization.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example&lt;/strong&gt;: For our recommendation system, we might choose a medium-sized LLM and fine-tune it on our news articles. We'd implement RAG to retrieve relevant article information and develop prompts that generate personalized recommendations.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Exercise&lt;/strong&gt;: Research three different LLMs that could be suitable for your project. Compare their strengths and weaknesses.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 3: Quality Assurance (The Validation)
&lt;/h3&gt;

&lt;p&gt;Before deployment, it's crucial to validate and refine your model's performance.&lt;/p&gt;

&lt;h4&gt;
  
  
  Key Components:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Output Validation&lt;/strong&gt;: Verify the accuracy, relevance, and safety of your model's outputs. Use a diverse set of test cases to ensure robust performance.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Scalability Testing&lt;/strong&gt;: Assess your application's performance under various loads and conditions. This helps identify potential bottlenecks before they become real-world problems.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Feedback Loop&lt;/strong&gt;: Implement mechanisms to continuously improve your application based on validation results and testing outcomes. This could involve automated systems or human-in-the-loop processes.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Pro Tip&lt;/strong&gt;: Don't skip this step! It's easier and cheaper to fix issues now than after deployment.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Common Pitfall&lt;/strong&gt;: Not testing for edge cases or unexpected inputs, leading to vulnerabilities in the live system.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example&lt;/strong&gt;: We'd test our recommendation system with a variety of user profiles and article types, ensuring it provides relevant recommendations across different scenarios. We'd also simulate high traffic to test scalability.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Exercise&lt;/strong&gt;: Design a test plan for your AI application. Include at least five different test cases that cover various aspects of your system's performance.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 4: Deployment
&lt;/h3&gt;

&lt;p&gt;This phase focuses on getting your AI application ready for real-world use.&lt;/p&gt;

&lt;h4&gt;
  
  
  Key Components:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Infrastructure Setup&lt;/strong&gt;: Choose and configure the right infrastructure for your application. This could involve cloud services, on-premises solutions, or a hybrid approach.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Security Implementation&lt;/strong&gt;: Ensure your application is secure. This includes data encryption, access controls, and compliance with relevant regulations (e.g., GDPR, HIPAA).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Performance Monitoring&lt;/strong&gt;: Set up systems to monitor your application's performance in real-time. This allows you to quickly identify and address any issues that arise.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Pro Tip&lt;/strong&gt;: Consider a phased rollout to minimize risks and gather real-world feedback gradually.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Common Pitfall&lt;/strong&gt;: Underestimating the computational resources required for your AI application, leading to performance issues.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example&lt;/strong&gt;: We might deploy our recommendation system on a cloud platform, implementing strict data protection measures. We'd set up monitoring dashboards to track recommendation accuracy and system performance.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Exercise&lt;/strong&gt;: Outline a deployment plan for your AI application. Include considerations for scaling, security, and monitoring.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 5: Output (The Business Value)
&lt;/h3&gt;

&lt;p&gt;This final phase is where your AI application delivers tangible results.&lt;/p&gt;

&lt;h4&gt;
  
  
  Key Components:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Content Generation&lt;/strong&gt;: Produce text, summaries, translations, or other forms of content that add value to your users or business processes.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Decision Support&lt;/strong&gt;: Develop systems that assist in decision-making processes, providing insights and recommendations based on data analysis.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Process Automation&lt;/strong&gt;: Create workflows that automate repetitive tasks or entire business processes, increasing efficiency and reducing errors.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Pro Tip&lt;/strong&gt;: Regularly assess the business impact of your AI application. Are you meeting the initial objectives? Are there unexpected benefits or challenges?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Common Pitfall&lt;/strong&gt;: Focusing too much on technical metrics and losing sight of real-world impact and user satisfaction.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example&lt;/strong&gt;: Our recommendation system would provide personalized article suggestions to users, potentially increasing engagement and time spent on the news website.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Exercise&lt;/strong&gt;: Define three key performance indicators (KPIs) for your AI application. How will you measure its success in delivering business value?&lt;/p&gt;

&lt;h2&gt;
  
  
  Resources for AI Application Development
&lt;/h2&gt;

&lt;p&gt;To help you on your journey of building AI-powered applications, here's a curated list of tools, services, and frameworks that can be invaluable at various stages of development. These resources are grouped by development phase to align with the structure of this guide.&lt;/p&gt;

&lt;h3&gt;
  
  
  How to Use This Resource List
&lt;/h3&gt;

&lt;p&gt;This list is not exhaustive, but it provides a solid starting point for each phase of your AI application development journey. Start with the tools that align with your current phase and gradually explore others as your project evolves. Remember, the best tools for your project will depend on your specific requirements, team expertise, and scalability needs.&lt;/p&gt;

&lt;h3&gt;
  
  
  Input Phase
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Data Collection and Preparation&lt;/strong&gt;:

&lt;ul&gt;
&lt;li&gt;Apache Spark: Powerful engine for large-scale data processing&lt;/li&gt;
&lt;li&gt;Pandas: Python library for data manipulation and analysis&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;

&lt;h3&gt;
  
  
  Process Phase
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Development Frameworks&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Quasar Framework (Vue.js): Perfect for cross-platform development&lt;/li&gt;
&lt;li&gt;React Native: Popular for cross-platform mobile app development&lt;/li&gt;
&lt;li&gt;Flutter: Google's UI toolkit for natively compiled applications&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;p&gt;&lt;strong&gt;Model Development and Training&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;PyTorch: Open source machine learning framework&lt;/li&gt;
&lt;li&gt;TensorFlow: Google's open-source platform for machine learning&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;p&gt;&lt;strong&gt;LLM Testing and Deployment&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;OLLAMA: Great for quick LLM testing and experimentation&lt;/li&gt;
&lt;li&gt;Hugging Face: Platform for sharing, discovering, and experimenting with ML models&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;

&lt;h3&gt;
  
  
  Quality Assurance Phase
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Testing and Monitoring&lt;/strong&gt;:

&lt;ul&gt;
&lt;li&gt;Prometheus: Monitoring system and time series database&lt;/li&gt;
&lt;li&gt;Grafana: Analytics and interactive visualization web application&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;

&lt;h3&gt;
  
  
  Deployment Phase
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Infrastructure and Backend&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Firebase: Comprehensive platform for building web and mobile applications&lt;/li&gt;
&lt;li&gt;AWS Amplify: Full stack development platform from Amazon&lt;/li&gt;
&lt;li&gt;Google Cloud Platform: Offers a wide range of services including AI and ML tools&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;p&gt;&lt;strong&gt;LLM Optimization and Deployment&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;TensorRT: NVIDIA's SDK for high-performance deep learning inference&lt;/li&gt;
&lt;li&gt;Google Vertex AI: End-to-end platform for deploying ML models at scale&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;

&lt;h3&gt;
  
  
  Output Phase
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;API Development&lt;/strong&gt;:

&lt;ul&gt;
&lt;li&gt;FastAPI: Modern, fast Python web framework for building APIs&lt;/li&gt;
&lt;li&gt;Express.js: Minimal and flexible Node.js web application framework&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;

&lt;h3&gt;
  
  
  Cross-Phase Tools
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Version Control and Collaboration&lt;/strong&gt;:

&lt;ul&gt;
&lt;li&gt;GitHub: Platform for version control and collaborative development&lt;/li&gt;
&lt;li&gt;DVC (Data Version Control): Version control system for machine learning projects&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Building AI applications with LLMs is an iterative process. As you progress through each phase, you'll likely find yourself cycling back, especially between Process and Quality Assurance, to refine and improve your application.&lt;/p&gt;

&lt;p&gt;Key takeaways from each step:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Input: Focus on data quality and representativeness&lt;/li&gt;
&lt;li&gt;Process: Choose the right model and fine-tune effectively&lt;/li&gt;
&lt;li&gt;Quality Assurance: Test thoroughly and implement feedback mechanisms&lt;/li&gt;
&lt;li&gt;Deployment: Prioritize security and scalability&lt;/li&gt;
&lt;li&gt;Output: Align with business objectives and measure real-world impact&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Remember, the key to success lies in continuous learning, experimentation, and adaptation. Start small, iterate quickly, and always keep your end users in mind. The field of AI is rapidly evolving, so stay curious and keep exploring new techniques and tools.&lt;/p&gt;

&lt;p&gt;Your journey in AI development starts now – what will you build?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Next Steps&lt;/strong&gt;: &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Define your AI application concept&lt;/li&gt;
&lt;li&gt;Identify your data sources&lt;/li&gt;
&lt;li&gt;Choose your initial tech stack from the resources list&lt;/li&gt;
&lt;li&gt;Start prototyping!&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Would be very interested to hear about other's experiences building applications around A.I. tooling, please feel free to comment with any stories, questions, or thoughts.&lt;/p&gt;

&lt;p&gt;Happy developing, everyone! &lt;/p&gt;

</description>
      <category>ai</category>
      <category>development</category>
      <category>productivity</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Building RoboPoll: A Journey with A.I., Quasar, and TypeScript</title>
      <dc:creator>Forrester Terry</dc:creator>
      <pubDate>Mon, 15 Jan 2024 00:23:35 +0000</pubDate>
      <link>https://dev.to/sweetpapa/building-robopoll-a-journey-with-ai-quasar-and-typescript-1dg9</link>
      <guid>https://dev.to/sweetpapa/building-robopoll-a-journey-with-ai-quasar-and-typescript-1dg9</guid>
      <description>&lt;h1&gt;
  
  
  Introduction
&lt;/h1&gt;

&lt;p&gt;I recently built a website using Quasar and Firebase and thought it would be fun to share what the process was like at a high level. The goal was to build an MVP version of the project and build it rapidly.&lt;/p&gt;

&lt;p&gt;This was my journey with &lt;a href="https://robopoll.org" rel="noopener noreferrer"&gt;RoboPoll&lt;/a&gt;, a ‘simple’ website that combines fun with data. RoboPoll is designed to engage users with AI-generated summaries of news and a variety of topics. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;About Me:&lt;/strong&gt;&lt;br&gt;
I have about 6 years of experience and am self taught. I’m familiar primarily with JavaScript and Python.&lt;/p&gt;

&lt;h1&gt;
  
  
  The Requirements and Design
&lt;/h1&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff4r5r8tm0rv2amxvwbc6.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff4r5r8tm0rv2amxvwbc6.jpg" alt=" " width="500" height="719"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This is how I planned out my work:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1) Initial Concept and PoC:&lt;/strong&gt; To play around with some ideas, I made a very simple PoC. I decided what I wanted to build and just slapped it together. As days progressed, I found flaws and considerations to note down. This PoC wasn't about adding components or making anything super stable, but about shaping the core identity of the app and figuring out what I wanted to build ultimately.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2) Requirements:&lt;/strong&gt; I began defining the app's requirements, carefully selecting features for the initial release (MVP) and planning subsequent versions. This approach prevented overwhelming myself with too many features at once. &lt;em&gt;&lt;strong&gt;I cannot stress enough, start with your requirements/design and really understand what you want/need to build before you seriously start putting down code.&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3) Design, Workflow and Wireframes:&lt;/strong&gt; Before diving into coding, I focused on the app's basic layout and feel. I drafted wireframes and detailed out workflows as step-by-step lists, ensuring a clear understanding of the functionalities needed. This stage was crucial in visualizing the end product and planning the implementation steps. It also helped me find anything I missed during requirements gathering.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4) High-Level Planning / Code Design:&lt;/strong&gt; The app's components included a frontend website, AI automation running on a separate machine, and Firebase as the backend. I drew flow charts to map out how these components interacted, providing a clear picture of the app’s infrastructure. At this point, I also figured out what under-the-hood code I would likely need for both the backend and web application. This typically involved detailing out various modules and potential functions with examples of the data being processed or passed.&lt;/p&gt;

&lt;h1&gt;
  
  
  Choosing the Tech Stack
&lt;/h1&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxbn4qzdrhhjmm2hqzt1v.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxbn4qzdrhhjmm2hqzt1v.jpg" alt=" " width="735" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;My suggestions with picking a tech stack for a project:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;make sure it works for what you need&lt;/li&gt;
&lt;li&gt;make sure it works well in general and is supported&lt;/li&gt;
&lt;li&gt;make sure you are comfortable with it. &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If all three are true, &lt;em&gt;&lt;strong&gt;then it is suitable&lt;/strong&gt;&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;My selected tech stack was:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;TypeScript &lt;/li&gt;
&lt;li&gt;Quasar Framework (VueJS)&lt;/li&gt;
&lt;li&gt;NodeJS (for automation tools)&lt;/li&gt;
&lt;li&gt;Ollama for LLM management and API&lt;/li&gt;
&lt;li&gt;Docker (for containerizing my backend apps - incase I want to them to the cloud)&lt;/li&gt;
&lt;li&gt;Firebase (backend cloud infrastructure - Firestore, Hosting, Storage, Authentication, Algolia plugin)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Reasons for Some of These Tech Choices:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;LLMs and Testing:&lt;/strong&gt; The concept of AI generating content was intriguing. I wanted to explore how to integrate LLMs into a service effectively. My hardware setup, consisting of one RTX 3060 and one RTX 3050 GPU, was suitable for running inference with 7B and 13B parameter models. I used Ollama to manage the deployment of the LLM due to the simplicity and nice out of the box configurations. Since the LLM does not need to be interacted with in real time, I chose to pick something off the shelf and simple.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Quasar Framework/VueJS:&lt;/strong&gt; My familiarity with Vue and the availability Quasar is why I chose Vue. Quasar offers cross-platform development ease, bringing together UI components and essential tools.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Ollama:&lt;/strong&gt; It simplified LLM management, allowing me to focus more on application development rather than the nuances of model management.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Docker:&lt;/strong&gt; Provided flexibility for backend automation, making it easy to shift operations between machines. Ollama is also offered as a Docker image, so this made bundling my backend app, and the Ollama runtime together easy.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Firebase:&lt;/strong&gt; Offers a robust and scalable backend solution, especially valuable for its cloud functions. They offer a free tier, which actually met most of my needs. I ultimately went with a Pay-As-You-Go plan for the deployment.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;TypeScript:&lt;/strong&gt; For a project of this scale, TypeScript's ability to define objects and return types is invaluable. It enhances organization and bug detection. This became very beneficial during refactors of code.&lt;/p&gt;

&lt;h1&gt;
  
  
  Development: Challenges and Solutions
&lt;/h1&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3he3hcaygxz1vtnt87dr.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3he3hcaygxz1vtnt87dr.jpg" alt=" " width="612" height="408"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Going through this project, there were a few things that I had to deal with:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Development Fatigue and Keeping Organized:&lt;/strong&gt; Managing workload and staying motivated was a challenge. Utilizing project management tools like Jira helped me maintain focus. Taking breaks when needed and tackling tasks one at a time kept the project manageable. When I would hit a brick wall, I would step away from the problem and return to it the next day.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;LLM Accuracy and Speed:&lt;/strong&gt; I employed multiple prompts to refine content quality. Testing different LLM models led me to choose dolphin-mistrial for its performance. Regularly adjusting LLM settings and prompts was key to achieving the desired output quality. I also tracked the performance and quality of output across different configurations to find the best one.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;App Complexity and Performance:&lt;/strong&gt; Balancing performance and complexity was important. I used Firebase for atomic transactions to ensure accuracy and scalability in features like the voting system. TypeScript played a significant role in managing the complexity, aiding in a modular and organized code structure so refactoring could be possible. For anything I was unsure about, I checked on Google and used ChatGPT.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;UX Focus:&lt;/strong&gt; User experience was paramount. I conducted testing with friends and family, which was invaluable. Their feedback drove many refinements, particularly in navigation and intuitive design. The focus on key features that users cared most about was essential in making the app more engaging.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Security:&lt;/strong&gt; I made sure to spend extra time focusing on secure implementations. Data sanitization and functionality abstraction via Cloud Functions was implemented. I also tried using a tool called ZAP to do penetration and fuzz testing. Firestore and Firebase storage rules are used to prevent unauthorized access to data. &lt;/p&gt;

&lt;h3&gt;
  
  
  Feature/Component Notes
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Polls and News Sections:&lt;/strong&gt; This was the heart of the app. The journey began here, with content populated through AI automation. Gradually, this section shaped the overall structure of the frontend.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;User Authentication:&lt;/strong&gt; Implemented smoothly with Firebase Authentication, enhancing user security and experience.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Comments, Save/Bookmark, Share Functionality:&lt;/strong&gt; Building a robust commenting system was a complex task. It involved user association, scalable comment loading, and an intuitive UI. Youtube comments were used as inspiration.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Basic Analytics and SEO:&lt;/strong&gt; Integration of Google Analytics provided insights into user behaviors, crucial for future enhancements.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Bug Reporting System:&lt;/strong&gt; This feedback loop is vital for continuous improvement and user engagement.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Letting Users Add Polls to the Queue:&lt;/strong&gt; A critical feature that underwent several iterations to ensure user engagement and interest.&lt;/p&gt;

&lt;h1&gt;
  
  
  Learning, Reflections, Next Steps
&lt;/h1&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwjnbvl2twixhc76id1pt.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwjnbvl2twixhc76id1pt.jpg" alt=" " width="577" height="433"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This project was a fun one. It taught me the importance of scalability, organization, and user-focused development. Docker and Firestore's advanced features were key learnings. Sharing the app and opening up to feedback, though initially daunting, proved to be incredibly valuable.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;&lt;strong&gt;Additionally, using ChatGPT to brainstorm on implementation approaches and help with generating dummy data worked very well. For design inspiration, I looked at similar sites or sites with similar features to get a starting point.&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;I opted not to write unit tests for this app, but highly suggest carefully selected unit tests for anything really serious.&lt;/p&gt;

&lt;p&gt;I'm now at a stage where user feedback will shape the app's future. My immediate goal is to gather insights from actual users and refine the app based on their experiences and suggestions. Things are very basic right now, and it would be great to learn more about what actual users care about.&lt;/p&gt;

&lt;h1&gt;
  
  
  Conclusion
&lt;/h1&gt;

&lt;p&gt;Building the app has been filled with fun, challenges, and continuous learning. It's been rewarding to see it come together and to explore the potential of LLMs in a real-world application. &lt;/p&gt;

&lt;p&gt;&lt;em&gt;The site likely has a lot of bugs, and at this point in the process the next focus would be lots of end to end testing and bug fixes.&lt;/em&gt; The summaries and LLM automations still need to be fine tuned as well.&lt;/p&gt;

&lt;p&gt;I invite you to check out &lt;a href="https://robopoll.org" rel="noopener noreferrer"&gt;RoboPoll&lt;/a&gt; though and let me know if you have any questions or feedback. &lt;/p&gt;

&lt;p&gt;Thank you for joining me on this adventure. Let me know your thoughts or opinions on finishing and structuring personal projects.&lt;/p&gt;

&lt;h3&gt;
  
  
  Some Quick Resources:
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://ollama.ai/" rel="noopener noreferrer"&gt;Ollama&lt;/a&gt; - used for running LLMs on my machine&lt;br&gt;
&lt;a href="https://openinterpreter.com/" rel="noopener noreferrer"&gt;OpenInterpreter&lt;/a&gt; - a neat project which allows you to run a ChatGPT like code environment on your own machine.&lt;br&gt;
&lt;a href="https://quasar.dev/" rel="noopener noreferrer"&gt;Quasar Framework&lt;/a&gt; - VueJS framework for making web, mobile, and desktop apps.&lt;br&gt;
&lt;a href="https://www.mediawiki.org/wiki/API:Main_page" rel="noopener noreferrer"&gt;Wikipedia API&lt;/a&gt; - Used to give the LLM data&lt;br&gt;
&lt;a href="https://newsdata.io/" rel="noopener noreferrer"&gt;News API | NewsData.io&lt;/a&gt; - API used to collect news&lt;/p&gt;

</description>
      <category>ai</category>
      <category>learning</category>
      <category>development</category>
      <category>typescript</category>
    </item>
    <item>
      <title>Idea: Using Decentralized Identities to Fight AI Threats and Shape Internet 3.0</title>
      <dc:creator>Forrester Terry</dc:creator>
      <pubDate>Thu, 30 Mar 2023 04:47:10 +0000</pubDate>
      <link>https://dev.to/sweetpapa/idea-using-decentralized-identities-to-fight-ai-threats-and-shape-internet-30-1fi6</link>
      <guid>https://dev.to/sweetpapa/idea-using-decentralized-identities-to-fight-ai-threats-and-shape-internet-30-1fi6</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjo18utslc7rhnfpbj6fz.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjo18utslc7rhnfpbj6fz.jpg" alt="Meme" width="500" height="619"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;With the rapid advancement of AI technologies, we will see an increase in internet threats and exploitations. I've been thinking about the future of the internet and how we can make it more secure, decentralized, and user-focused while mitigating the negative effects of AI.&lt;/p&gt;

&lt;p&gt;I thought of an idea where we could use Hyperledger Indy for decentralized identity (DID) management and basically create a new protocol that requires DIDs for auth. This is an extension of another idea I had around DIDs and blockchains.&lt;/p&gt;

&lt;p&gt;I'd love to get your thoughts and feedback on this, or if you know if any other ideas like this being explored!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Idea:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Create a new version of the hypertext transfer protocol that requires users to have a DID, managed through Hyperledger Indy. This DID would be checked for validity before allowing any transaction to go through, essentially creating a more secure and decentralized internet (Internet 3.0).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How It Addresses AI-driven Threats:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;It hinders AI-generated phishing attacks, as every request would require a valid DID.&lt;/li&gt;
&lt;li&gt;It thwarts AI-powered bots and fake accounts, as the DID requirement would make it challenging to create and maintain large-scale automated systems for malicious purposes.&lt;/li&gt;
&lt;li&gt;It makes A.I generated or altered content more traceable, as content creators and distributors would have associated DIDs, promoting accountability and authenticity. This could be paired with hashing content for tracking.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;Perceived&lt;/em&gt; Strengths:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Enhanced security and privacy through a robust PKI, selective disclosure, and zero-knowledge proofs.&lt;/li&gt;
&lt;li&gt;Decentralized and user-centric architecture.&lt;/li&gt;
&lt;li&gt;Greater interoperability and ease of integration with other web3 technologies.&lt;/li&gt;
&lt;li&gt;Encourages trust through transparent and tamper-proof DID management.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Foreseeable Weaknesses/Challenges:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Increased complexity for developers and users.&lt;/li&gt;
&lt;li&gt;Potential performance trade-offs due to the computational overhead of DID validation and zero-knowledge proofs.&lt;/li&gt;
&lt;li&gt;Adoption (browser vendors, web service providers, etc.).&lt;/li&gt;
&lt;li&gt;Scalability &lt;/li&gt;
&lt;li&gt;Educating users and businesses about the benefits and workings of the new protocol.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Opportunities:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Reduces reliance on centralized certificate authorities.&lt;/li&gt;
&lt;li&gt;Empowers users with more control over their data and identity.&lt;/li&gt;
&lt;li&gt;Fosters a more open and equitable internet ecosystem.&lt;/li&gt;
&lt;li&gt;Encourages the development of new web3 applications and services prioritizing security, privacy, and user empowerment.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So, what do you all think? Are there any major concerns or potential improvements I've missed? What do you think about the items I've outlined already?&lt;/p&gt;

&lt;p&gt;I'd love to hear your thoughts, especially if you have experience with Hyperledger Indy, DIDs, or web3 technologies!&lt;/p&gt;

</description>
      <category>web3</category>
      <category>webdev</category>
      <category>discuss</category>
      <category>blockchain</category>
    </item>
  </channel>
</rss>
