<?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: Kudzai Murimi</title>
    <description>The latest articles on DEV Community by Kudzai Murimi (@respect17).</description>
    <link>https://dev.to/respect17</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.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F981638%2F1394703d-8965-4066-99cd-a7a85d1f41ec.png</url>
      <title>DEV Community: Kudzai Murimi</title>
      <link>https://dev.to/respect17</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/respect17"/>
    <language>en</language>
    <item>
      <title>How to Write a Developer CV That Survives ATS and Still Reads Like a Human Wrote It</title>
      <dc:creator>Kudzai Murimi</dc:creator>
      <pubDate>Tue, 25 Aug 2026 06:18:03 +0000</pubDate>
      <link>https://dev.to/respect17/how-to-write-a-developer-cv-that-survives-ats-and-still-reads-like-a-human-wrote-it-4ilb</link>
      <guid>https://dev.to/respect17/how-to-write-a-developer-cv-that-survives-ats-and-still-reads-like-a-human-wrote-it-4ilb</guid>
      <description>&lt;p&gt;Most CV advice picks one side. Either you optimize for the applicant tracking system. Or you write for a human. You need both. A bot filters your CV first. A human decides later whether to call you.&lt;/p&gt;

&lt;h2&gt;
  
  
  What the ATS Actually Does
&lt;/h2&gt;

&lt;p&gt;It is not smart AI. It mostly parses your document into fields. Name. Contact info. Work history. Skills. Then it matches keywords against the job description. Here is what that means for you.&lt;/p&gt;

&lt;p&gt;Use standard section headers. Call them "Professional Experience" and "Education" and "Skills." Do not get creative with names like "My Journey." That can break the parser.&lt;/p&gt;

&lt;p&gt;Avoid tables. Avoid text boxes. Avoid multi column layouts. Many parsers read left to right and top to bottom. A two column layout can scramble your work history into nonsense.&lt;/p&gt;

&lt;p&gt;Match the language in the job posting. Do not just use your own words. If they say "Node.js" and you wrote "backend JavaScript," you might not match. Even if you clearly qualify.&lt;/p&gt;

&lt;p&gt;Save your CV as a .docx file or a text based PDF. Do not use an image based or heavily designed PDF. If you cannot select and copy the text yourself, the parser probably cannot either.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Makes a Human Want to Talk to You
&lt;/h2&gt;

&lt;p&gt;Once you pass the filter, the CV has a new job. It needs to convince a person you are worth thirty minutes of their day.&lt;/p&gt;

&lt;p&gt;Quantify your impact when you can. "Reduced page load time by 40 percent" beats "improved performance." No number to use? Describe the before and after instead.&lt;/p&gt;

&lt;p&gt;Start each bullet with what changed. Not what you were assigned. "Migrated the checkout flow to a queued job to eliminate timeout errors" tells a real story. "Responsible for checkout flow" does not.&lt;/p&gt;

&lt;p&gt;Cut anything you cannot back up. Skip vague lines like "great communicator" or "team player." Show it instead. Let your accomplishments prove it.&lt;/p&gt;

&lt;p&gt;Keep the length matched to your experience. Early career means one page. Deep into your career means two pages. Keep it tight. Do not write a full chronological diary.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Trap
&lt;/h2&gt;

&lt;p&gt;Do not over optimize for one reader at the other's expense. A CV stuffed with keywords reads like noise to a human. A CV written only for flow can get filtered before anyone sees it. The fix is not a trick. Write the true version of your experience. Use the words the industry uses. Use the words this job posting uses.&lt;/p&gt;

&lt;h2&gt;
  
  
  Do This Before Every Application
&lt;/h2&gt;

&lt;p&gt;Read the job posting slowly. Underline the specific technologies and responsibilities they name. Then check your CV against that list. Do not fabricate experience you don't have. Just make sure your real experience uses their words, not only your own. This one step fixes more rejections than any template swap.&lt;/p&gt;

</description>
      <category>cv</category>
      <category>remote</category>
      <category>career</category>
      <category>webdev</category>
    </item>
    <item>
      <title>The Remote Job Search Playbook for Developers Outside the US/EU</title>
      <dc:creator>Kudzai Murimi</dc:creator>
      <pubDate>Tue, 25 Aug 2026 06:15:57 +0000</pubDate>
      <link>https://dev.to/respect17/the-remote-job-search-playbook-for-developers-outside-the-useu-3njb</link>
      <guid>https://dev.to/respect17/the-remote-job-search-playbook-for-developers-outside-the-useu-3njb</guid>
      <description>&lt;h2&gt;
  
  
  The Remote Job Search Playbook for Developers Outside the US/EU
&lt;/h2&gt;

&lt;p&gt;Remote work opened the door for developers outside major tech hubs to compete for roles that used to be geographically gated. It also created a much bigger applicant pool for every posting. If you're searching from outside the US/EU, here's what actually affects your odds — beyond "just apply to more jobs."&lt;/p&gt;

&lt;h3&gt;
  
  
  Timezone overlap is a real filter, not a footnote
&lt;/h3&gt;

&lt;p&gt;A lot of "remote, worldwide" postings quietly mean "remote, but we need 4+ hours of overlap with our core team." Before you apply, check what timezone the company or their existing team is in. If you can genuinely offer a workable overlap, say so explicitly in your application — don't make a recruiter guess whether a 7-9 hour time difference is going to be a problem later.&lt;/p&gt;

&lt;h3&gt;
  
  
  Sourcing channels that actually produce interviews
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Recruiting-as-a-service platforms&lt;/strong&gt; (Rightfit-style agencies, Toptal, Turing) — they pre-filter for companies actively hiring remote and internationally, which saves you from applying into a black hole on a generic job board.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Company engineering blogs and changelogs&lt;/strong&gt; — companies that write publicly about their engineering tend to also be more remote-mature and less nervous about hiring outside their home country.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Referrals inside communities you're already part of&lt;/strong&gt; — dev.to, Discord servers for your stack, open-source project maintainers. A referral skips the "will this person actually work out remotely" anxiety that a cold application can't answer.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Direct outreach to smaller, funded startups&lt;/strong&gt; — they often can't afford local senior talent and are more open to global hiring than enterprise companies with rigid HR policy.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  What to lead with in your application
&lt;/h3&gt;

&lt;p&gt;Recruiters hiring internationally are quietly screening for risk: will this person disappear, will communication be a problem, will payment/compliance be a headache. Address these before they have to ask:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;State your availability and overlap hours plainly.&lt;/li&gt;
&lt;li&gt;Link to async-friendly proof of work — a deployed project, a GitHub history with real commit activity, a technical article. This substitutes for the "vibe check" an in-person interview would normally give them.&lt;/li&gt;
&lt;li&gt;If you've done contract/freelance work with international clients already, say so explicitly — it signals you already know how to work across time zones and payment rails.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  The payment/compliance reality
&lt;/h3&gt;

&lt;p&gt;Get familiar with how you'll actually get paid before it becomes a blocker mid-negotiation — platforms like Deel, Payoneer, or Wise exist specifically because cross-border payroll is messy. Knowing your own answer to "how do you want to be paid" makes you look more prepared, not more high-maintenance.&lt;/p&gt;

&lt;h3&gt;
  
  
  Compensation framing
&lt;/h3&gt;

&lt;p&gt;Salary ranges posted for a specific country's cost of living don't always translate cleanly, and currency conversion can make a number look smaller or larger than it actually is locally. Do the math in your own currency and cost of living before deciding a range is or isn't worth pursuing — a number that looks modest in USD can be very solid depending on where you live, and vice versa.&lt;/p&gt;

&lt;h3&gt;
  
  
  The uncomfortable truth
&lt;/h3&gt;

&lt;p&gt;You are competing against a genuinely global pool now, which means portfolio and communication quality matter more than they used to, because there's no in-person interview softening a rough resume. The upside is that a strong deployed project and a clear, well-written application travel just as far as being physically local ever did — this is the first time in tech history where that's fully true.&lt;/p&gt;

</description>
      <category>career</category>
      <category>developers</category>
      <category>remote</category>
      <category>ai</category>
    </item>
    <item>
      <title>Breaking Into Full-Stack Development Without a CS Degree: What Actually Worked for Me</title>
      <dc:creator>Kudzai Murimi</dc:creator>
      <pubDate>Tue, 25 Aug 2026 06:14:22 +0000</pubDate>
      <link>https://dev.to/respect17/breaking-into-full-stack-development-without-a-cs-degree-what-actually-worked-for-me-59g7</link>
      <guid>https://dev.to/respect17/breaking-into-full-stack-development-without-a-cs-degree-what-actually-worked-for-me-59g7</guid>
      <description>&lt;h1&gt;
  
  
  Breaking Into Full Stack Development Without a CS Degree: What Actually Worked for Me
&lt;/h1&gt;

&lt;p&gt;I didn't go through a computer science program. What I have instead is about seven years of shipping production code. I learned almost all of it from official documentation, open source repos, developer communities, and a lot of trial and error on real client work. If you're on that same path and wondering if it's enough, here's what actually moved the needle for me. And what turned out to be a waste of time.&lt;/p&gt;

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

&lt;p&gt;Building things that had to work, not things that looked good on a syllabus. Tutorial projects teach syntax. Client work teaches you what happens when a payment webhook fires twice. Or when your "simple" CRUD app suddenly needs to survive ten times the traffic you designed for. The fastest learning happened on real, slightly terrifying production systems. Not curated coursework.&lt;/p&gt;

&lt;p&gt;Reading source code and official docs before reaching for a course. Anyone can follow a video tutorial. Fewer people will sit with Laravel's own documentation. Or actually read through a library's source when the docs run out. That habit compounds. You stop depending on someone else pre chewing the material for you. And you get faster at picking up whatever stack a client happens to be using.&lt;/p&gt;

&lt;p&gt;Writing about what I learned. Technical writing forced me to actually understand things well enough to explain them. Not just well enough to copy paste them into working code. If you can't write a clear paragraph about why you chose NgRx over plain component state, you probably don't understand it as well as you think.&lt;/p&gt;

&lt;p&gt;Taking freelance and agency work early, even underpriced. Nobody hands a self taught developer a senior role on day one. What they will do is pay you to fix their bug. Or build their MVP. Or maintain their legacy app. That's your CS degree. It's just spread across a dozen small, real engagements instead of four years in one building.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Didn't Work
&lt;/h2&gt;

&lt;p&gt;Collecting certificates. They're fine as a signal that you sat through material. But nobody has ever hired me because of a certificate. Every real opportunity came from a portfolio piece, a referral, or a conversation where I could clearly explain a decision I made on a past project.&lt;/p&gt;

&lt;p&gt;Waiting to feel ready. I never felt ready. The gap between self taught and professional isn't a knowledge threshold you cross. It's a body of shipped work you accumulate. Start billable work earlier than feels comfortable.&lt;/p&gt;

&lt;p&gt;Studying algorithms in isolation, disconnected from anything I was building. Data structures and algorithms matter. But grinding them with no applied context is one of the slowest ways to learn them. They stuck a lot better once I hit an actual performance problem that a better data structure solved.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Real Difference Maker
&lt;/h2&gt;

&lt;p&gt;Nobody on a hiring panel has ever asked me where I studied. They've asked me to walk through a decision on a real project. Why Laravel over a plain PHP framework. Why I chose to denormalize a specific table. How I debugged a flaky third party API integration. A CS degree can hand you vocabulary for those conversations. Shipped, explainable work hands you the actual substance.&lt;/p&gt;

&lt;p&gt;If you're self taught and stuck comparing yourself to a traditional path, stop comparing credentials. Start counting shipped, working systems you can talk through in detail. That's the real currency in this field.&lt;/p&gt;

</description>
      <category>career</category>
      <category>learning</category>
      <category>softwaredevelopment</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Using AI in Your Job Search: What Actually Helps vs What Looks Lazy to Recruiters</title>
      <dc:creator>Kudzai Murimi</dc:creator>
      <pubDate>Tue, 25 Aug 2026 06:12:49 +0000</pubDate>
      <link>https://dev.to/respect17/using-ai-in-your-job-search-what-actually-helps-vs-what-looks-lazy-to-recruiters-lna</link>
      <guid>https://dev.to/respect17/using-ai-in-your-job-search-what-actually-helps-vs-what-looks-lazy-to-recruiters-lna</guid>
      <description>&lt;p&gt;Almost everyone uses AI in their job search now. Whether they admit it or not. The real gap is not between people who use AI and people who don't. It is between people who use it to sharpen their real experience, and people who let it generate a generic version of them. A recruiter can spot that fake version in the first paragraph.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Actually Helps
&lt;/h2&gt;

&lt;p&gt;Tailoring your CV language to a specific posting. Feed a job description and your real experience to an AI tool. Ask it to flag mismatched terms. Maybe they say "Node.js" and you wrote "backend JavaScript." This is a fast and useful pass. Just make sure you are only adjusting words for experience you already have. Do not invent experience you don't have.&lt;/p&gt;

&lt;p&gt;Rehearsing interview answers out loud. Ask an AI tool to play a skeptical interviewer. Let it push back on your answers. This surfaces the gaps in how you explain your own work. Better to find those gaps now than in front of a real interviewer.&lt;/p&gt;

&lt;p&gt;Summarizing and organizing your own scattered notes. Maybe you have a messy pile of past projects and metrics and accomplishments. AI is good at helping you turn that into clear, quantified bullet points. The substance is still yours. It just helps you find the clearest way to say it.&lt;/p&gt;

&lt;p&gt;Researching a company or role fast. Get a quick organized summary of a company's product, recent news, and likely tech stack before an interview. This saves real time over digging through their blog and LinkedIn by hand.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Looks Lazy, and Often Is
&lt;/h2&gt;

&lt;p&gt;Sending an unedited generic AI written cover letter. Recruiters read hundreds of these. A cover letter with no specific detail about the company or the role or your actual experience reads as exactly what it is. Usually within the first two sentences. It signals you didn't care enough to personalize it.&lt;/p&gt;

&lt;p&gt;Fabricating experience or skills you don't have. AI will happily write confident sentences about a technology you've never touched. The interview will find that gap fast. It damages trust far more than an honest answer would. Something like "I haven't used that specifically, but here's an adjacent thing I have done."&lt;/p&gt;

&lt;p&gt;Using AI generated answers word for word in a live interview. Some candidates try to have AI generate answers in real time during interviews. This is against most companies' policies. It also produces answers that don't sound like a real person who did the work. Interviewers notice the gap between a polished answer and someone who can't naturally follow up on it.&lt;/p&gt;

&lt;p&gt;Mass applying without reading the posting. AI makes it easy to blast out fifty near identical applications an hour. That is not a strategy. That is noise. It usually gets a worse response rate than fewer, genuinely tailored applications. Generic submissions are the easiest ones for a human or an ATS to filter out.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Actual Line
&lt;/h2&gt;

&lt;p&gt;AI is genuinely useful anywhere it helps you present your real experience more clearly and faster. It becomes a liability the moment it starts generating experience or opinions or answers that aren't actually yours. Interviews are built to find that gap. Finding it costs you a lot more trust than skipping AI ever would.&lt;/p&gt;

&lt;p&gt;The best use of these tools in a job search is not writing your story for you. It is helping you tell your own story faster and more clearly than you could alone.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>career</category>
      <category>resume</category>
    </item>
    <item>
      <title>TrendHub: I Was Tired of Checking Six Sites a Day, So I Built One Feed Instead</title>
      <dc:creator>Kudzai Murimi</dc:creator>
      <pubDate>Mon, 24 Aug 2026 13:13:23 +0000</pubDate>
      <link>https://dev.to/respect17/trendhub-i-was-tired-of-checking-six-sites-a-day-so-i-built-one-feed-instead-3n71</link>
      <guid>https://dev.to/respect17/trendhub-i-was-tired-of-checking-six-sites-a-day-so-i-built-one-feed-instead-3n71</guid>
      <description>&lt;p&gt;Every morning looked the same for me. dev.to, then Hacker News, then Stack Overflow's hot questions, then Product Hunt, then Lobsters, then Mastodon if I had the energy left. Six tabs. Six different ranking systems. Six different "what's hot right now" signals. No way to tell if the same story was blowing up on more than one of them at once.&lt;/p&gt;

&lt;p&gt;So I built &lt;strong&gt;TrendHub&lt;/strong&gt;. It is a single unified feed that pulls what's trending across &lt;strong&gt;dev.to, Hacker News, Stack Overflow, Product Hunt, Lobsters, and Mastodon&lt;/strong&gt;. It ranks everything on one comparable scale. I can read it like one site instead of six.&lt;/p&gt;

&lt;p&gt;The problem was never that any one platform was bad. The problem is that trend checking had become a tax on my attention. This is my attempt to get that time back. And to make it something other developers could use too.&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fk3yts1ve8dblgvhtl95k.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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fk3yts1ve8dblgvhtl95k.png" alt=" " width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What TrendHub Actually Does
&lt;/h2&gt;

&lt;p&gt;At its core, TrendHub is a fetch and rank pipeline. Background jobs pull the latest posts from each source on their own schedule. They normalize each post's engagement signal, reactions, points, votes, favourites, whatever that platform measures, onto a common 0 to 100 trending score. Then everything drops into one feed you can scan in a few minutes.&lt;/p&gt;

&lt;h2&gt;
  
  
  Features
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Unified, ranked feed.&lt;/strong&gt; Every post from every source lands in one timeline. Sorted by a trending score, not by which tab you happened to open first.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Per platform toggles.&lt;/strong&gt; Don't care about Product Hunt today? Flip it off in the sidebar. Preferences save per user. Your feed stays exactly the way you like it.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Search, tags, and time range filters.&lt;/strong&gt; Search matches both post titles and tags. You can restrict the feed to the last day, the last week, or all time.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Cross platform duplicate detection.&lt;/strong&gt; Sometimes the same story trends on both Hacker News and Lobsters at once. It happens more than you'd think. TrendHub tags it "also trending on" instead of showing it to you twice.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Trending velocity, the rising fire icon.&lt;/strong&gt; Posts don't just get a static score. They get a velocity indicator based on how their score moved since the last fetch. You can spot what's accelerating, not just what's already popular.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Bookmarks and hide or dismiss.&lt;/strong&gt; Save something to read later. Hide a post you're not interested in. Hidden posts stay hidden until you choose to bring them back.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Daily digest email.&lt;/strong&gt; Opt in and get a daily rollup of what's trending sent to your inbox. No login required to stay in the loop.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Personal RSS feed export.&lt;/strong&gt; Every user gets their own token based RSS URL. Your filtered, ranked feed can slot into whatever feed reader you already use.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Keyboard shortcuts.&lt;/strong&gt; j and k to navigate. o to open. b to bookmark. x to hide. Built for people who'd rather not touch the mouse.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Dark mode.&lt;/strong&gt; Because it's a developer tool. Developer tools ship in dark mode.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Per post share menu.&lt;/strong&gt; Share to X, Facebook, LinkedIn, Reddit, WhatsApp, email, or just copy the link. Straight from the feed.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Source health panel.&lt;/strong&gt; A small sidebar panel shows the last fetch time and status per platform. You always know how fresh the data is. And if a source's API is having a bad day.&lt;/p&gt;

&lt;h2&gt;
  
  
  Under the Hood
&lt;/h2&gt;

&lt;p&gt;TrendHub is built on &lt;strong&gt;Laravel 10, Inertia.js, Vue 3, and Tailwind CSS&lt;/strong&gt;. Postgres runs in production. SQLite runs for local development. Each source has its own dedicated fetcher class. A scoring service normalizes engagement metrics across wildly different scales. A Hacker News point is not a Mastodon favourite. A grouping service handles the cross platform duplicate matching.&lt;/p&gt;

&lt;p&gt;It's deployed on Render, running as a single web service with a managed Postgres database.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try It
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Live:&lt;/strong&gt; &lt;a href="https://trend-hub-204c.onrender.com" rel="noopener noreferrer"&gt;trend-hub-204c.onrender.com&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It runs on a free tier. If it's been quiet for a while, the first load might take 30 to 50 seconds to wake back up. That's not a bug. Just a cold start. Register an account. It's instant, no email verification loop. Toggle platforms on and off to make it yours.&lt;/p&gt;

&lt;p&gt;What's the trend checking equivalent of "context switching fatigue" in your own workflow? Do you have a tool for it, or are you still juggling tabs like I was? I'd love to hear what I'm missing.&lt;/p&gt;

</description>
      <category>showdev</category>
      <category>webdev</category>
      <category>laravel</category>
      <category>vue</category>
    </item>
    <item>
      <title>RTK Query Made Easy for Beginners 🎓 (With Real-Life Analogies)</title>
      <dc:creator>Kudzai Murimi</dc:creator>
      <pubDate>Sun, 12 Jul 2026 12:09:21 +0000</pubDate>
      <link>https://dev.to/respect17/rtk-query-made-easy-for-beginners-with-real-life-analogies-2kl6</link>
      <guid>https://dev.to/respect17/rtk-query-made-easy-for-beginners-with-real-life-analogies-2kl6</guid>
      <description>&lt;p&gt;If you've ever felt intimidated by Redux Toolkit Query (RTK Query), you're not alone. The docs &lt;a href="https://redux-toolkit.js.org/tutorials/rtk-query" rel="noopener noreferrer"&gt;https://redux-toolkit.js.org/tutorials/rtk-query&lt;/a&gt; assume you already know what a "reducer" or "middleware" is — but what if you're brand new to this?&lt;/p&gt;

&lt;p&gt;This article explains RTK Query using everyday analogies, so by the end you'll actually &lt;em&gt;understand&lt;/em&gt; what's happening instead of just copy-pasting code.&lt;/p&gt;

&lt;p&gt;Let's build a tiny app that shows a list of students from a server. 🧑‍🎓&lt;/p&gt;

&lt;h2&gt;
  
  
  The Big Picture
&lt;/h2&gt;

&lt;p&gt;Imagine our school website asks a server:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Can I have the list of students?"&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;And the server replies:&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="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"id"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&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;"John"&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;span class="nl"&gt;"id"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&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;"Mary"&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;RTK Query is the tool that handles that entire conversation for you — asking, waiting, and remembering the answer — so you don't have to write &lt;code&gt;fetch()&lt;/code&gt; calls by hand.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 1: Project Structure
&lt;/h2&gt;

&lt;p&gt;Here's what our project will look like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;src/
    App.jsx
    main.jsx
    store.js
    services/
        studentApi.js
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Think of it like a school: the &lt;strong&gt;School&lt;/strong&gt; is your app, the &lt;strong&gt;Classroom&lt;/strong&gt; is your store, and the &lt;strong&gt;Students&lt;/strong&gt; are your data. Everything has its own place.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 2: Install Redux Toolkit
&lt;/h2&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; @reduxjs/toolkit react-redux
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This gives you RTK Query for free — it's built right into &lt;code&gt;@reduxjs/toolkit&lt;/code&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 3: Create the API Service
&lt;/h2&gt;

&lt;p&gt;Create &lt;code&gt;src/services/studentApi.js&lt;/code&gt;:&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="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;createApi&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;fetchBaseQuery&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="s2"&gt;@reduxjs/toolkit/query/react&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;studentApi&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;createApi&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;reducerPath&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;studentApi&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;

  &lt;span class="na"&gt;baseQuery&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;fetchBaseQuery&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;baseUrl&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;https://jsonplaceholder.typicode.com/&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="na"&gt;endpoints&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;builder&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="na"&gt;getStudents&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;builder&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;query&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
      &lt;span class="na"&gt;query&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;users&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="p"&gt;}),&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useGetStudentsQuery&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;studentApi&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Let's break down every part of this, piece by piece.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;code&gt;createApi&lt;/code&gt; and &lt;code&gt;fetchBaseQuery&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;Think of building a toy car — first you need your tools: a hammer, a screwdriver, a spanner. &lt;code&gt;createApi&lt;/code&gt; and &lt;code&gt;fetchBaseQuery&lt;/code&gt; are your tools for building an API layer.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;code&gt;reducerPath&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;Think of a cupboard with labelled shelves — one for books, one for toys, one for shoes. &lt;code&gt;reducerPath: "studentApi"&lt;/code&gt; tells Redux: &lt;em&gt;store all the student information on the "studentApi" shelf.&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;code&gt;baseQuery&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;Imagine your friend lives at &lt;strong&gt;12 Green Street&lt;/strong&gt;. Every time you visit, you start from that same address. &lt;code&gt;baseQuery&lt;/code&gt; works the same way — it's the address every request starts from:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight http"&gt;&lt;code&gt;&lt;span class="err"&gt;https://jsonplaceholder.typicode.com/
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  &lt;code&gt;endpoints&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;Think of a restaurant menu: Pizza, Burger, Chicken, Juice — each dish is a menu item. In our app, each &lt;em&gt;endpoint&lt;/em&gt; is one thing we can ask the server for: Get Students, Get Teachers, Delete Student, and so on.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;code&gt;builder.query()&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;This means &lt;strong&gt;"I only want to READ."&lt;/strong&gt; It's like asking your teacher, "Can I see today's attendance list?" — you're not changing anything, just looking.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;code&gt;query: () =&amp;gt; "users"&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;This tells RTK Query which path to visit. It joins the base URL and this path together:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;https://jsonplaceholder.typicode.com/  +  users
=  https://jsonplaceholder.typicode.com/users
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That's the actual address it fetches.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 4: Add the API to Your Store
&lt;/h2&gt;

&lt;p&gt;Create &lt;code&gt;store.js&lt;/code&gt;:&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="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;configureStore&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="s2"&gt;@reduxjs/toolkit&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&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;studentApi&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="s2"&gt;./services/studentApi&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;store&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;configureStore&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;reducer&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;studentApi&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;reducerPath&lt;/span&gt;&lt;span class="p"&gt;]:&lt;/span&gt; &lt;span class="nx"&gt;studentApi&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;reducer&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;

  &lt;span class="na"&gt;middleware&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;getDefaultMiddleware&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt;
    &lt;span class="nf"&gt;getDefaultMiddleware&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nf"&gt;concat&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;studentApi&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;middleware&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;p&gt;Imagine your teacher asks, "Where should I keep the student register?" You say, "Put it in this cupboard." That's the &lt;strong&gt;reducer&lt;/strong&gt; — it decides where the data lives.&lt;/p&gt;

&lt;p&gt;Now imagine a school messenger: the teacher says, "Take this letter to Class 4," and the messenger delivers it. That messenger is the &lt;strong&gt;middleware&lt;/strong&gt; — it carries requests to the server and brings the response back.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 5: Wrap Your App with Provider
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Provider&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="s2"&gt;react-redux&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&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;store&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="s2"&gt;./store&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Provider&lt;/span&gt; &lt;span class="na"&gt;store&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;store&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;App&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nc"&gt;Provider&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Think of electricity. Without it, your TV, fridge, and computer don't work. &lt;code&gt;Provider&lt;/code&gt; supplies the Redux store to your entire app — without it, nothing connects.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 6: Use the Hook
&lt;/h2&gt;

&lt;p&gt;Inside &lt;code&gt;App.jsx&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useGetStudentsQuery&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="s2"&gt;./services/studentApi&lt;/span&gt;&lt;span class="dl"&gt;"&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;App&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="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="nx"&gt;isLoading&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;error&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useGetStudentsQuery&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;data&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Hello&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The moment &lt;code&gt;useGetStudentsQuery()&lt;/code&gt; runs, RTK Query automatically says "Hello server, can I have the students?" — no &lt;code&gt;fetch()&lt;/code&gt;, no &lt;code&gt;axios()&lt;/code&gt;. It's all handled for you.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 7: Understanding &lt;code&gt;data&lt;/code&gt;
&lt;/h2&gt;

&lt;p&gt;Imagine asking your mom, "Can I have some apples?" and she hands you a bag of 🍎🍎🍎. That bag is your &lt;code&gt;data&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;For our app, &lt;code&gt;console.log(data)&lt;/code&gt; might print:&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="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"id"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&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;"Leanne Graham"&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;span class="nl"&gt;"id"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&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;"Ervin Howell"&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;h2&gt;
  
  
  Step 8: Understanding &lt;code&gt;isLoading&lt;/code&gt;
&lt;/h2&gt;

&lt;p&gt;Imagine ordering pizza. Before it arrives, you're waiting — that's &lt;code&gt;isLoading&lt;/code&gt;. While it's on the way, &lt;code&gt;isLoading&lt;/code&gt; is &lt;code&gt;true&lt;/code&gt;. The moment it arrives, &lt;code&gt;isLoading&lt;/code&gt; becomes &lt;code&gt;false&lt;/code&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 9: Showing a Loading State
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;isLoading&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="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;h1&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Loading...&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;h1&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Users see "Loading..." until the server responds.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 10: Understanding &lt;code&gt;error&lt;/code&gt;
&lt;/h2&gt;

&lt;p&gt;If the internet drops or the server fails to respond, &lt;code&gt;error&lt;/code&gt; will contain details about what went wrong:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&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="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;h1&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Something went wrong.&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;h1&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Step 11: Rendering the Students
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;data&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;student&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="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;h2&lt;/span&gt; &lt;span class="na"&gt;key&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;student&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;student&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;h2&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;))&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If the server returns John and Mary, the screen shows:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;John
Mary
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  What's Actually Happening Behind the Scenes?
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;👦 React: I need students.
      ↓
📞 RTK Query: I'll ask the server.
      ↓
🌐 Server: Here are the students.
      ↓
📦 RTK Query: I'll save them.
      ↓
👦 React: Thank you! I'll show them.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You never wrote &lt;code&gt;fetch()&lt;/code&gt;. You never managed a loading flag by hand. You never stored the response yourself. RTK Query handled all of it.&lt;/p&gt;

&lt;h2&gt;
  
  
  One More Superpower: Caching
&lt;/h2&gt;

&lt;p&gt;Imagine your teacher asks, "What's 2 + 2?" You answer "4." A minute later she asks again — you already know the answer, so you don't need to think about it again.&lt;/p&gt;

&lt;p&gt;RTK Query behaves the same way:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;First time:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;React → Server → Data → Saved in cache
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Second time:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;React → Cache ✅ (no new server request)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This makes your app noticeably faster and cuts down on unnecessary network traffic.&lt;/p&gt;

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

&lt;p&gt;That's the entire mental model of RTK Query:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Define&lt;/strong&gt; your API with &lt;code&gt;createApi&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Register&lt;/strong&gt; it in your store (reducer + middleware)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Provide&lt;/strong&gt; the store to your app&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Consume&lt;/strong&gt; it with an auto-generated hook&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Let it cache&lt;/strong&gt; so repeat requests are instant&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Once this clicks, learning mutations (adding, updating, deleting data) is easy — they follow the exact same pattern, just with &lt;code&gt;builder.mutation()&lt;/code&gt; instead of &lt;code&gt;builder.query()&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Happy coding! 🚀&lt;/p&gt;

</description>
      <category>react</category>
      <category>redux</category>
      <category>javascript</category>
      <category>web</category>
    </item>
    <item>
      <title>REST vs GraphQL vs tRPC in 2026</title>
      <dc:creator>Kudzai Murimi</dc:creator>
      <pubDate>Wed, 17 Jun 2026 20:24:20 +0000</pubDate>
      <link>https://dev.to/respect17/rest-vs-graphql-vs-trpc-in-2026-52dm</link>
      <guid>https://dev.to/respect17/rest-vs-graphql-vs-trpc-in-2026-52dm</guid>
      <description>&lt;p&gt;Every new project. Same argument.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Let's use REST, everyone knows REST."&lt;br&gt;
"Actually, GraphQL would be cleaner here."&lt;br&gt;
"Have you looked at tRPC? It's basically magic if you're on TypeScript."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;This debate has been happening in Slack channels and architecture meetings for years. In 2026, we finally have enough real-world data to end it.&lt;/p&gt;

&lt;p&gt;Spoiler: there's no winner. But there is a right answer for &lt;em&gt;your&lt;/em&gt; project — and it takes about 60 seconds to figure out.&lt;/p&gt;

&lt;h2&gt;
  
  
  The 30-Second Summary
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;/th&gt;
&lt;th&gt;REST&lt;/th&gt;
&lt;th&gt;GraphQL&lt;/th&gt;
&lt;th&gt;tRPC&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Best for&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Public APIs&lt;/td&gt;
&lt;td&gt;Complex data, many clients&lt;/td&gt;
&lt;td&gt;TypeScript full-stack&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Learning curve&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Low&lt;/td&gt;
&lt;td&gt;High&lt;/td&gt;
&lt;td&gt;Medium&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Type safety&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Manual&lt;/td&gt;
&lt;td&gt;Generated&lt;/td&gt;
&lt;td&gt;Built-in&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;CDN caching&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;✅ Excellent&lt;/td&gt;
&lt;td&gt;❌ Painful&lt;/td&gt;
&lt;td&gt;✅ Good&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Non-TS support&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;✅ Any language&lt;/td&gt;
&lt;td&gt;✅ Any language&lt;/td&gt;
&lt;td&gt;❌ TypeScript only&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Hidden cost&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Versioning debt&lt;/td&gt;
&lt;td&gt;Query complexity tooling&lt;/td&gt;
&lt;td&gt;TS monorepo required&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  REST: Old But Not Dead
&lt;/h2&gt;

&lt;p&gt;REST still powers over 80% of public APIs and that's not changing anytime soon. Here's why it's still the default for most teams:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Every language has an HTTP client. Your Python service, your mobile app, your third-party partner — they all speak REST without any special setup.&lt;/li&gt;
&lt;li&gt;CDN caching works out of the box. &lt;code&gt;GET /products/123&lt;/code&gt; can be cached at the edge. That's free performance most teams leave on the table with other approaches.&lt;/li&gt;
&lt;li&gt;It's debuggable in a browser tab. That matters more than people admit.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;The real cost no one talks about:&lt;/strong&gt; versioning. Every breaking change means a new endpoint, a deprecation timeline, and years of maintaining &lt;code&gt;/v1&lt;/code&gt; alongside &lt;code&gt;/v2&lt;/code&gt;. REST's hidden cost is API versioning maintenance — and it compounds over time.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Use REST when:&lt;/strong&gt; you're building a public API, third-party integrations, webhooks, or anything consumed by clients you don't control.&lt;/p&gt;

&lt;h2&gt;
  
  
  GraphQL: Powerful, But You're Going to Pay For It
&lt;/h2&gt;

&lt;p&gt;GraphQL solves a real problem. When your frontend needs exactly 7 fields from a user object, 3 fields from their orders, and 2 fields from their subscription — REST makes you do 3 round trips or build a bespoke endpoint. GraphQL lets the client ask for exactly what it needs in one request.&lt;/p&gt;

&lt;p&gt;GraphQL achieves 28% lower latency for complex queries that would otherwise require multiple REST calls. For mobile apps and data-heavy dashboards, that's meaningful.&lt;/p&gt;

&lt;p&gt;But here's what the tutorials leave out: at scale, GraphQL requires query complexity analysis, persisted queries, depth limiting, and specialized monitoring tools — an infrastructure tax that's real and often overlooked.&lt;/p&gt;

&lt;p&gt;GraphQL adoption has surged 340% since 2023, yet 93% of development teams still rely on REST. The growth is real. So is the operational overhead.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Use GraphQL when:&lt;/strong&gt; you have a complex data graph, multiple client types (web, mobile, third-party) with very different data needs, and a team willing to invest in the tooling.&lt;/p&gt;

&lt;h2&gt;
  
  
  tRPC: The Quiet Game-Changer For TypeScript Teams
&lt;/h2&gt;

&lt;p&gt;tRPC is the youngest of the three and the least understood outside TypeScript circles. Here's the pitch: you define your API procedures on the server, and the client calls them with full type inference — no schemas, no code generation, no extra build steps.&lt;/p&gt;

&lt;p&gt;tRPC appears in 15% of full-stack job listings and climbing fast, almost exclusively in listings that also mention TypeScript and Next.js. That's a telling pattern.&lt;/p&gt;

&lt;p&gt;The developer experience is genuinely different. Rename a server function and your IDE instantly tells you every place the client calls it. Change a return type and TypeScript catches every consumer that breaks. No GraphQL complexity, no OpenAPI code generation — just pure TypeScript type inference.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The hard limit:&lt;/strong&gt; tRPC only works when client and server share a TypeScript codebase. The moment you need a mobile app, a third-party integration, or a Python service calling your API — you need REST or a separate layer.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Use tRPC when:&lt;/strong&gt; your entire stack is TypeScript, you're in a monorepo, and all your clients are your own frontend.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Real Answer: Most Production Apps Use All Three
&lt;/h2&gt;

&lt;p&gt;Here's the truth nobody puts in their REST vs GraphQL blog posts: most production systems use more than one.&lt;/p&gt;

&lt;p&gt;The typical 2026 SaaS stack looks like this:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Public API&lt;/strong&gt; (for partners, webhooks, SDKs) → &lt;strong&gt;REST&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Your own frontend&lt;/strong&gt; (Next.js, React) → &lt;strong&gt;tRPC or GraphQL&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Service-to-service&lt;/strong&gt; (internal microservices) → &lt;strong&gt;REST or gRPC&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This isn't over-engineering. It's matching the right tool to the right consumer.&lt;/p&gt;

&lt;h2&gt;
  
  
  The 60-Second Decision Framework
&lt;/h2&gt;

&lt;p&gt;Answer these three questions:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Who consumes this API?&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;External developers or partners → REST&lt;/li&gt;
&lt;li&gt;Only your own TypeScript frontend → tRPC&lt;/li&gt;
&lt;li&gt;Multiple client types with wildly different data needs → GraphQL&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;2. Do you control all the clients?&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Yes, and they're all TypeScript → tRPC&lt;/li&gt;
&lt;li&gt;No → REST or GraphQL&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;3. How complex is your data?&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Simple CRUD → REST or tRPC&lt;/li&gt;
&lt;li&gt;Deeply relational, clients need flexible queries → GraphQL&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Stop picking based on what's trending. Pick based on who's consuming your API and what they actually need.&lt;/p&gt;

&lt;p&gt;The teams that ship fast in 2026 aren't the ones who picked the right framework. They're the ones who stopped arguing about it.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Which are you currently using — and would you pick the same if you started over today? Drop it in the comments.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;`&lt;/p&gt;

</description>
      <category>api</category>
      <category>webdev</category>
      <category>javascript</category>
      <category>discuss</category>
    </item>
    <item>
      <title># 10 VS Code Extensions Every Developer Needs in 2026</title>
      <dc:creator>Kudzai Murimi</dc:creator>
      <pubDate>Wed, 17 Jun 2026 19:13:52 +0000</pubDate>
      <link>https://dev.to/respect17/-10-vs-code-extensions-every-developer-needs-in-2026-and-some-unpopular-opinions-fmn</link>
      <guid>https://dev.to/respect17/-10-vs-code-extensions-every-developer-needs-in-2026-and-some-unpopular-opinions-fmn</guid>
      <description>&lt;p&gt;Before we start — a warning.&lt;/p&gt;

&lt;p&gt;This isn't one of those lists where I throw 25 extension logos at you and call it a day. There are over 50,000 extensions in the VS Code marketplace. Most of them are garbage. Some duplicate features that are already built in. Some haven't been updated since 2021 and are silently slowing your editor down right now.&lt;/p&gt;

&lt;p&gt;This list is 10. Intentionally. Because a bloated extension setup is its own kind of technical debt.&lt;/p&gt;

&lt;p&gt;Let's get into it — opinions included.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. ESLint — Non-Negotiable
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;The take:&lt;/strong&gt; If you're writing JavaScript or TypeScript without ESLint running in your editor, you're just sending bugs to code review instead of catching them yourself.&lt;/p&gt;

&lt;p&gt;ESLint enforces your project's coding rules in real-time, flags problems as you type, and saves your team hours of review comments on things a machine should be catching. It's been around forever and it's still irreplaceable.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Unpopular opinion:&lt;/strong&gt; Most developers have ESLint installed but misconfigured. Default rules are nearly useless. The value comes from setting up rules that match your actual project. If you haven't touched your &lt;code&gt;.eslintrc&lt;/code&gt; in six months, you're not really using ESLint.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Prettier — Just Let It Format Your Code
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;The take:&lt;/strong&gt; Code formatting debates are a waste of everyone's time. Tabs vs spaces, semicolons or not, single quotes or double — none of it matters as long as the whole team is consistent. Prettier enforces consistency automatically on save. End of discussion.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Unpopular opinion:&lt;/strong&gt; If your team is still arguing about formatting in 2026, that's a culture problem, not a tooling problem. Install Prettier, set &lt;code&gt;"editor.formatOnSave": true&lt;/code&gt;, and move on to actual work.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. GitLens — Git Blame That Doesn't Make You Leave the Editor
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;The take:&lt;/strong&gt; GitLens is the most downloaded Git extension for VS Code for a reason. Inline blame annotations showing who changed each line and when, interactive commit graphs, file history — all without leaving your editor. The free tier covers everything most developers will ever need.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Unpopular opinion:&lt;/strong&gt; If your first reaction to a bug is "whose fault is this?" rather than "how do we fix this?", GitLens will make you a better developer or a more toxic teammate. Depends entirely on you.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Error Lens — Errors Where You Actually Look
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;The take:&lt;/strong&gt; By default, VS Code shows errors in the Problems panel at the bottom of the screen. Nobody is looking at the bottom of the screen. Error Lens moves error messages inline, right next to the line that caused them. It sounds minor. It's not. Once you use it, going back feels broken.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Unpopular opinion:&lt;/strong&gt; This should be VS Code's default behavior. The fact that it's an extension in 2026 is a minor embarrassment for Microsoft.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. GitHub Copilot — But Not For the Reason You Think
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;The take:&lt;/strong&gt; GitHub Copilot is the most widely adopted AI coding assistant in VS Code. It does more than autocomplete now — it writes full functions, generates tests, and handles natural language to code. For repetitive code, boilerplate, and "I know what I want but don't want to type it" moments, it's genuinely fast.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Unpopular opinion:&lt;/strong&gt; Copilot is making junior developers worse at problem-solving and senior developers lazier about documentation. The productivity gain is real. The skill atrophy is also real. Use it intentionally, not reflexively. And always read what it generates before you ship it — 45% of AI-generated code contains at least one security vulnerability.&lt;/p&gt;

&lt;h2&gt;
  
  
  6. Thunder Client — Because Postman Got Too Big for Its Own Good
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;The take:&lt;/strong&gt; Thunder Client is a lightweight REST API client built directly into VS Code. Test your endpoints without leaving your editor, without opening another app, without waiting for Postman to load.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Unpopular opinion:&lt;/strong&gt; Postman in 2026 is bloatware. What started as a simple API testing tool is now a platform with workspaces, teams, flows, and a pricing page with four tiers. Thunder Client does 90% of what most developers actually need in a fraction of the weight. If you're still defaulting to Postman out of habit, try Thunder Client for a week.&lt;/p&gt;

&lt;h2&gt;
  
  
  7. Tailwind CSS IntelliSense — If You're Using Tailwind, This Is Mandatory
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;The take:&lt;/strong&gt; Autocomplete, syntax highlighting, and linting for Tailwind classes directly in your editor. Hovering over a class shows you the exact CSS it generates. This extension makes Tailwind actually pleasant to write.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Unpopular opinion:&lt;/strong&gt; Tailwind itself is still controversial and that's fine. But if your team has decided to use it, not having this extension is just self-inflicted pain. Arguments about whether Tailwind is good belong in a different article.&lt;/p&gt;

&lt;h2&gt;
  
  
  8. Path Intellisense — The Smallest Extension With the Highest Return
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;The take:&lt;/strong&gt; Autocompletes file paths as you type import statements. That's it. It's tiny, it's fast, and it eliminates an entire category of annoying errors — the ones where you typed &lt;code&gt;../components/Button&lt;/code&gt; when you meant &lt;code&gt;../../components/Button&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Unpopular opinion:&lt;/strong&gt; This is the most underrated extension on this list. Nobody talks about it. Everyone who installs it wonders how they lived without it.&lt;/p&gt;

&lt;h2&gt;
  
  
  9. Docker — If Containers Are Part of Your Workflow
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;The take:&lt;/strong&gt; The official Docker extension for VS Code lets you manage containers, images, volumes, and networks directly from the editor. Build, run, inspect logs, and exec into containers without touching the terminal for Docker commands.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Unpopular opinion:&lt;/strong&gt; If you're running Docker in 2026 without this extension, you're memorizing commands you don't need to memorize. That mental space could go toward something more interesting.&lt;/p&gt;

&lt;h2&gt;
  
  
  10. VS Code Icons — Last On The List, Not Least
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;The take:&lt;/strong&gt; Replaces VS Code's default file icons with a comprehensive set that makes different file types visually distinct at a glance. Python files look different from JavaScript files. Config files are obvious. It sounds cosmetic. It's actually a real time saver when navigating large projects.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Unpopular opinion:&lt;/strong&gt; Developers who dismiss visual organization as "unimportant" are the same ones who spend 10 seconds finding a file they've opened before. Your environment shapes how you work. Make it work for you.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Extensions That Didn't Make the List (And Why)
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Bracket Pair Colorizer&lt;/strong&gt; — VS Code has had built-in bracket pair colorization since 2021. You don't need the extension anymore.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Auto Close Tag / Auto Rename Tag&lt;/strong&gt; — Built into VS Code for HTML and JSX. Check your settings before installing.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Live Share&lt;/strong&gt; — Great concept, unstable in practice. If you're pair programming regularly, a purpose-built tool handles it better.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;indent-rainbow&lt;/strong&gt; — Pretty. Doesn't solve a real problem. Skip it.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  The Rule Behind This List
&lt;/h2&gt;

&lt;p&gt;Before you install any extension, ask yourself three things:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Does VS Code already do this natively?&lt;/li&gt;
&lt;li&gt;When was the last update? (Anything not updated in 12+ months is a risk)&lt;/li&gt;
&lt;li&gt;Will I actually use this daily, or is it just satisfying to install?&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;A tight extension setup makes VS Code fast, focused, and actually pleasant to work in. Every extension you add is a trade-off. Make them deliberately.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Which extensions am I wrong about? Drop it in the comments — I want the pushback.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>vscode</category>
      <category>productivity</category>
      <category>webdev</category>
      <category>discuss</category>
    </item>
    <item>
      <title># Python vs JavaScript in the AI Era: Which One Should You Actually Learn?</title>
      <dc:creator>Kudzai Murimi</dc:creator>
      <pubDate>Wed, 17 Jun 2026 16:58:50 +0000</pubDate>
      <link>https://dev.to/respect17/-python-vs-javascript-in-the-ai-era-which-one-should-you-actually-learn-3e09</link>
      <guid>https://dev.to/respect17/-python-vs-javascript-in-the-ai-era-which-one-should-you-actually-learn-3e09</guid>
      <description>&lt;p&gt;Let's get the obvious out of the way first.&lt;/p&gt;

&lt;p&gt;Both languages are thriving. Both are in high demand. And if someone tells you one is dead or irrelevant, they're wrong.&lt;/p&gt;

&lt;p&gt;But the AI era has quietly shifted how these two languages are used — who uses them, for what, and where the opportunities are heading. If you're picking up a new skill, switching stacks, or just trying to understand the current landscape, this breakdown is for you.&lt;/p&gt;

&lt;p&gt;No fluff. Real numbers. Honest take.&lt;/p&gt;

&lt;h2&gt;
  
  
  First, Where Things Stand in 2026
&lt;/h2&gt;

&lt;p&gt;The data tells an interesting story — because both languages are winning, just in different arenas.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;JavaScript&lt;/strong&gt; still holds the top spot for overall usage. According to the 2026 Stack Overflow Developer Survey, 62.3% of all developers used JavaScript in the past year — a position it has held since 2013. That's remarkable consistency.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Python&lt;/strong&gt;, meanwhile, just pulled off something historic. For the first time in a decade, Python overtook JavaScript as the number-one language on GitHub by pull request volume. Python pull requests grew 48% year over year — driven almost entirely by AI, machine learning, and data science workloads. It now sits at #1 on the TIOBE index with the largest lead over a second-ranked language in the index's 23-year history.&lt;/p&gt;

&lt;p&gt;So JavaScript is everywhere. Python is growing faster than it ever has. Both are true at the same time.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Each Language Actually Does Best
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Python: The Language of AI
&lt;/h3&gt;

&lt;p&gt;There's no polite way to say this — if you want to work &lt;em&gt;in&lt;/em&gt; AI, Python is not optional. It's the default.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;71% of all generative AI projects on GitHub are written in Python&lt;/li&gt;
&lt;li&gt;AI project repositories on Python grew 50.7% year over year&lt;/li&gt;
&lt;li&gt;PyTorch, TensorFlow, Hugging Face, LangChain, scikit-learn — the entire ML stack is Python-first&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This isn't a coincidence or community preference. Python's clean syntax, dynamic typing, and rich ecosystem of scientific libraries made it the natural home for researchers and data scientists years ago. That early adoption created a flywheel that now powers the entire AI industry.&lt;/p&gt;

&lt;p&gt;If you're building models, training neural networks, working with data pipelines, or doing anything research-adjacent — Python is where you live.&lt;/p&gt;

&lt;h3&gt;
  
  
  JavaScript: The Language of the Web (and Increasingly AI Products)
&lt;/h3&gt;

&lt;p&gt;JavaScript's dominance comes from a simple fact: it's the only language that runs natively in the browser. Nothing has changed that, and nothing is likely to soon.&lt;/p&gt;

&lt;p&gt;But what's interesting in 2026 is how JavaScript has adapted to the AI era rather than been left behind by it. Developers are building AI-powered products with JavaScript every day — calling LLM APIs, integrating AI features into full-stack apps, building the interfaces that users actually interact with.&lt;/p&gt;

&lt;p&gt;The framework ecosystem is thriving too. React remains dominant. Next.js continues to mature. The JavaScript/TypeScript ecosystem now accounts for over 4.5 million active developers.&lt;/p&gt;

&lt;p&gt;Python may power the brain. JavaScript builds the face.&lt;/p&gt;

&lt;h2&gt;
  
  
  The AI Era Breakdown: What Each Is Actually Used For
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Category&lt;/th&gt;
&lt;th&gt;Python&lt;/th&gt;
&lt;th&gt;JavaScript&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Training ML models&lt;/td&gt;
&lt;td&gt;✅ Dominant&lt;/td&gt;
&lt;td&gt;❌ Rarely used&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Data science &amp;amp; analysis&lt;/td&gt;
&lt;td&gt;✅ Primary choice&lt;/td&gt;
&lt;td&gt;❌ Limited tooling&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;AI research&lt;/td&gt;
&lt;td&gt;✅ Industry standard&lt;/td&gt;
&lt;td&gt;❌ Not applicable&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Building AI APIs&lt;/td&gt;
&lt;td&gt;✅ Strong (FastAPI, Flask)&lt;/td&gt;
&lt;td&gt;✅ Strong (Node.js)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;AI-powered web apps&lt;/td&gt;
&lt;td&gt;⚠️ Backend only&lt;/td&gt;
&lt;td&gt;✅ Full stack&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Browser-based AI features&lt;/td&gt;
&lt;td&gt;❌ Not possible&lt;/td&gt;
&lt;td&gt;✅ Only option&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Automation &amp;amp; scripting&lt;/td&gt;
&lt;td&gt;✅ Excellent&lt;/td&gt;
&lt;td&gt;✅ Good with Node&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;General web development&lt;/td&gt;
&lt;td&gt;⚠️ Limited frontend&lt;/td&gt;
&lt;td&gt;✅ Dominant&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  Career Paths: Where the Jobs Are
&lt;/h2&gt;

&lt;p&gt;This is where the choice gets personal.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Python opens doors to:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Machine Learning Engineer&lt;/li&gt;
&lt;li&gt;Data Scientist&lt;/li&gt;
&lt;li&gt;AI Engineer&lt;/li&gt;
&lt;li&gt;Backend Developer (API-focused)&lt;/li&gt;
&lt;li&gt;Automation Engineer&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These roles tend to be highly specialized and increasingly well-compensated. Python AI roles are increasingly bundled with cloud architecture skills (AWS, Azure) and data ethics knowledge — companies aren't just looking for coders anymore; they're looking for "AI architects."&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;JavaScript opens doors to:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Frontend Developer&lt;/li&gt;
&lt;li&gt;Full-Stack Engineer&lt;/li&gt;
&lt;li&gt;Backend Engineer (Node.js)&lt;/li&gt;
&lt;li&gt;AI Integration Developer&lt;/li&gt;
&lt;li&gt;Product Engineer&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;JavaScript's strength is versatility. A solid JavaScript developer can own an entire product from database to user interface. With TypeScript now the fastest-growing language on GitHub (up 66% year over year), that ecosystem is only getting more robust.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Honest "Which Should I Learn" Answer
&lt;/h2&gt;

&lt;p&gt;Here's the thing — the right answer depends entirely on what you want to &lt;em&gt;build&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Learn Python if:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You want to work in AI, ML, or data science&lt;/li&gt;
&lt;li&gt;You're drawn to research, automation, or backend data work&lt;/li&gt;
&lt;li&gt;You want to be at the center of where the industry is heading&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Learn JavaScript if:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You want to build web products people actually use&lt;/li&gt;
&lt;li&gt;You enjoy full-stack development and seeing your work in a browser&lt;/li&gt;
&lt;li&gt;You want maximum flexibility across frontend, backend, and product work&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Learn both if:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You want to build AI-powered web applications end-to-end (this is increasingly the most valuable skill combination in the market)&lt;/li&gt;
&lt;li&gt;Python handles your AI logic and API layer, JavaScript builds everything users see&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The developers getting the most interesting opportunities right now aren't the ones who went deep on one language in isolation. They're the ones who can sit at the intersection — building AI features that actually ship into real products.&lt;/p&gt;

&lt;h2&gt;
  
  
  A Thought Before You Decide
&lt;/h2&gt;

&lt;p&gt;Both languages have survived long enough to prove they're not going anywhere. JavaScript has held the top usage spot for over a decade. Python just had its biggest year ever.&lt;/p&gt;

&lt;p&gt;The AI era didn't kill one of them. It gave each one a clearer purpose.&lt;/p&gt;

&lt;p&gt;Pick the one that fits where you want to go. Then get really good at it.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Which camp are you in — Python, JavaScript, or both? Drop it in the comments. I'd genuinely love to see where this community lands.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>python</category>
      <category>javascript</category>
      <category>ai</category>
      <category>beginners</category>
    </item>
    <item>
      <title>The 'Prompt' Is Not a Skill? I Disagree , Here's What 6 Months of AI Development Taught Me</title>
      <dc:creator>Kudzai Murimi</dc:creator>
      <pubDate>Wed, 17 Jun 2026 16:31:26 +0000</pubDate>
      <link>https://dev.to/respect17/the-prompt-is-not-a-skill-i-disagree-heres-what-6-months-of-ai-development-taught-me-53io</link>
      <guid>https://dev.to/respect17/the-prompt-is-not-a-skill-i-disagree-heres-what-6-months-of-ai-development-taught-me-53io</guid>
      <description>&lt;p&gt;I almost scrolled past that post.&lt;/p&gt;

&lt;p&gt;You've probably seen it. Someone argues that "prompting" is just clever wording — a parlor trick that anyone can pick up in an afternoon. That real developers shouldn't waste time thinking about it.&lt;/p&gt;

&lt;p&gt;I used to half-agree with them.&lt;/p&gt;

&lt;p&gt;Then I spent six months building real products with AI at the core, and my opinion completely changed.&lt;/p&gt;

&lt;h2&gt;
  
  
  Let's Be Honest About Where This Take Comes From
&lt;/h2&gt;

&lt;p&gt;The argument usually goes something like this:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Prompting is just typing in plain English. It's not like learning algorithms or system design. It'll be automated away anyway."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;And I get it. On the surface, prompting &lt;em&gt;looks&lt;/em&gt; trivial. You type something, the model responds. How hard can it be?&lt;/p&gt;

&lt;p&gt;Here's the thing — the same argument was made about Google Search in 2002. "It's just typing words into a box." But we now know that knowing &lt;em&gt;how&lt;/em&gt; to search — what terms to use, how to evaluate results, how to iterate — separates people who find answers in 30 seconds from those who give up after 5 minutes.&lt;/p&gt;

&lt;p&gt;Prompting is search. Just for intelligence instead of links.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Actually Learned After 6 Months
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. Bad prompts don't fail loudly — they fail silently
&lt;/h3&gt;

&lt;p&gt;This one surprised me the most.&lt;/p&gt;

&lt;p&gt;When you write bad code, you usually get an error. The program crashes. Something breaks visibly.&lt;/p&gt;

&lt;p&gt;When you write a bad prompt, the AI gives you a confident, well-structured, completely wrong answer. And if you're not careful, you ship it.&lt;/p&gt;

&lt;p&gt;Learning to write prompts that surface uncertainty, expose assumptions, and force the model to "show its work" — that is absolutely a skill. It took me weeks to get right.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Prompt structure changes outcomes more than prompt length
&lt;/h3&gt;

&lt;p&gt;Early on, I thought better prompts meant longer prompts. More context, more detail, more examples.&lt;/p&gt;

&lt;p&gt;That's only half true.&lt;/p&gt;

&lt;p&gt;What actually matters is &lt;em&gt;structure&lt;/em&gt;. Separating the role from the task from the constraints. Telling the model what format you want the output in. Specifying what you &lt;em&gt;don't&lt;/em&gt; want as clearly as what you do.&lt;/p&gt;

&lt;p&gt;A 3-line structured prompt consistently outperformed my 15-line rambling ones. That intuition doesn't come naturally — you develop it through practice and failure.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Domain knowledge makes prompts dramatically better
&lt;/h3&gt;

&lt;p&gt;Here's where the "it's just English" argument falls apart completely.&lt;/p&gt;

&lt;p&gt;Two people can type the same words to an AI and get very different results — because one of them knows the domain and one doesn't.&lt;/p&gt;

&lt;p&gt;A developer who understands REST API design will write prompts that produce cleaner, more realistic API schemas. A data analyst who knows SQL will prompt their way to better queries. Knowledge shapes how you frame problems, what edge cases you think to mention, what output you know to reject.&lt;/p&gt;

&lt;p&gt;Prompting doesn't replace expertise. It &lt;em&gt;multiplies&lt;/em&gt; it.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. Iteration is the real skill
&lt;/h3&gt;

&lt;p&gt;The people I've seen get the most out of AI tools aren't the ones who write perfect prompts on the first try. They're the ones who iterate fast and intelligently.&lt;/p&gt;

&lt;p&gt;They know when to push back on an output. They know how to reframe a question when the first answer misses the mark. They build mental models of what kinds of tasks AI handles well and where it consistently falls short.&lt;/p&gt;

&lt;p&gt;That's not luck. That's a learned skill.&lt;/p&gt;

&lt;h2&gt;
  
  
  "But It'll Be Automated Away"
&lt;/h2&gt;

&lt;p&gt;Maybe. Eventually.&lt;/p&gt;

&lt;p&gt;But so will a lot of things. The question is: what do you do &lt;em&gt;right now&lt;/em&gt;, with the tools that exist &lt;em&gt;right now&lt;/em&gt;?&lt;/p&gt;

&lt;p&gt;Right now, the gap between a developer who prompts well and one who doesn't is massive. I've seen it in code review speed, in the quality of generated tests, in how quickly someone can go from idea to working prototype.&lt;/p&gt;

&lt;p&gt;Dismissing that gap because the skill might become easier in five years is like refusing to learn Git in 2010 because "version control will probably get simpler someday."&lt;/p&gt;

&lt;h2&gt;
  
  
  What "Getting Good at Prompting" Actually Looks Like
&lt;/h2&gt;

&lt;p&gt;In case you're wondering what to actually practice, here's what moved the needle for me:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Write prompts like you're briefing a smart intern, not commanding a robot.&lt;/strong&gt; Context, goal, constraints, format.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Use negative instructions.&lt;/strong&gt; "Don't include boilerplate" is sometimes more powerful than describing what you do want.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Ask the model to reason before it answers.&lt;/strong&gt; "Think step by step" isn't a magic spell — it's a structural cue that changes how the model processes the problem.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Build a personal library of prompt patterns&lt;/strong&gt; that work for your specific use cases. Treat them like reusable functions.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Study failures.&lt;/strong&gt; When a prompt produces a bad result, figure out &lt;em&gt;why&lt;/em&gt;. That's where the real learning happens.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  The Honest Conclusion
&lt;/h2&gt;

&lt;p&gt;Prompting is not a &lt;em&gt;replacement&lt;/em&gt; for software engineering skills. It doesn't substitute for system design, data structures, or deep domain knowledge.&lt;/p&gt;

&lt;p&gt;But it is a genuine skill that lives alongside those things. One that compounds with your existing expertise. One that, if you ignore it, will quietly slow you down while the people around you move faster.&lt;/p&gt;

&lt;p&gt;Six months ago I thought prompting was a shortcut.&lt;/p&gt;

&lt;p&gt;Now I think it's a craft.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;What's your experience been? Have you found prompting makes a difference in your day-to-day work? Drop it in the comments — I'm genuinely curious where people land on this.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>productivity</category>
      <category>webdev</category>
      <category>discuss</category>
    </item>
    <item>
      <title>5 Claude AI Pro Features Developers Are Obsessed With in 2026</title>
      <dc:creator>Kudzai Murimi</dc:creator>
      <pubDate>Fri, 29 May 2026 08:36:57 +0000</pubDate>
      <link>https://dev.to/respect17/5-claude-pro-features-developers-are-obsessed-with-in-2026-45ba</link>
      <guid>https://dev.to/respect17/5-claude-pro-features-developers-are-obsessed-with-in-2026-45ba</guid>
      <description>&lt;p&gt;You know that feeling when a tool clicks and suddenly you're 3x faster? That's what's happening right now in dev communities with Claude Pro.&lt;/p&gt;

&lt;p&gt;This isn't about autocomplete or suggestions anymore. The latest Claude Pro features are fundamentally changing how developers work—from solo builders shipping features in hours instead of days, to engineering teams automating entire workflows.&lt;/p&gt;

&lt;p&gt;Here are the &lt;strong&gt;5 Claude Pro features&lt;/strong&gt; every developer should know about in 2026.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Claude Code: The AI Junior Developer You've Been Waiting For
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;This is the headline feature.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Claude Code isn't just an autocomplete. It's an actual coding agent that:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Reads your entire codebase&lt;/strong&gt; and understands your architecture&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Writes full features&lt;/strong&gt; from requirements&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Runs tests&lt;/strong&gt; to validate code&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Debugs errors&lt;/strong&gt; with reasoning&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Refactors files&lt;/strong&gt; across repos&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Creates pull requests&lt;/strong&gt; ready to review&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Executes terminal commands&lt;/strong&gt; directly&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It behaves like a junior developer who knows your project inside and out.&lt;/p&gt;

&lt;h3&gt;
  
  
  What developers love most
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;"I can describe a feature in natural language and Claude Code builds it, tests it, and creates a PR. The code actually works on the first try 80% of the time."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Huge productivity boost&lt;/strong&gt; for Laravel, React, Next.js, Node.js, Python&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Excellent at large codebases&lt;/strong&gt; (understands context across 50+ files)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Strong reasoning for debugging&lt;/strong&gt; (knows the stack trace, follows the logic)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Perfect for "implement this feature" prompts&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Best use cases
&lt;/h3&gt;

&lt;p&gt;✓ Fixing bugs (1-2 hour bugs → 5 minutes)&lt;br&gt;
✓ Database migrations (write schema, tests, seeds)&lt;br&gt;
✓ Writing APIs (OpenAPI specs → working endpoints)&lt;br&gt;
✓ Generating test suites (coverage gaps → full test files)&lt;br&gt;
✓ Repo-wide refactors (rename, restructure, patterns)&lt;br&gt;
✓ DevOps automation (Docker, CI/CD scripts)&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
**Pro tip:** Start with "read my codebase structure" to let Claude map your project, then ask for specific features.



## 2. Artifacts: Ship UIs Without Leaving Chat

**This is the feature that makes prototyping instant.**

Artifacts turn Claude into a mini app builder. In the same chat, you get:

- **Live previews** of React components
- **Interactive dashboards** (fully functional)
- **HTML/CSS pages** you can download immediately
- **Diagrams** (flowcharts, architecture, ERD)
- **Markdown docs** formatted and ready
- **Visual tools** (calculators, generators, trackers)

Everything renders in an **editable, downloadable workspace** inside Claude.

### Why developers actually use this

Instead of:
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Claude: "Here's the code for a dashboard. Copy it into your React project..."&lt;br&gt;
You: &lt;em&gt;copies, debugging imports, fighting dependencies for 30 min&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
You get:
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Claude: &lt;em&gt;renders interactive dashboard with live data&lt;/em&gt;&lt;br&gt;
You: &lt;em&gt;sees it working instantly, tweaks it in the editor, downloads it&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
### Real examples from production

- **Admin dashboards** (user management, analytics, settings)
- **Landing pages** (fully styled, responsive, SEO-ready)
- **Quick prototypes** (for client demos or internal tools)
- **SaaS mockups** (onboarding flows, payment pages)
- **Component generation** (reusable form builders, tables)
- **Living documentation** (interactive API docs)

Frontend teams have cut prototyping time by 70%.



## 3. MCP: Claude Connects to Your Entire Development Stack

**This transforms Claude from a chat tool into an automation agent.**

MCP (Model Context Protocol) lets Claude directly connect to:

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

&lt;/div&gt;



&lt;p&gt;GitHub          → Create/update issues, open PRs, inspect code&lt;br&gt;
Databases       → Query production data, generate migrations&lt;br&gt;
Notion          → Read docs, update wikis, create changelogs&lt;br&gt;
Slack           → Send alerts, read threads, update status&lt;br&gt;
APIs            → Call your backend, fetch real-time data&lt;br&gt;
IDE tools       → Debug locally, run commands, inspect logs&lt;br&gt;
Custom systems  → Your internal tools, dashboards, services&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
Through **standardized connectors** Claude can orchestrate workflows.

### What this actually means

You can:

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

&lt;/div&gt;



&lt;p&gt;"Check the last 10 production logs and create a GitHub issue &lt;br&gt;
with the error pattern. Post a summary to #engineering."&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
Claude does all of it—reads logs → finds pattern → creates issue → posts update.

### Startup builders are already doing this

- **Generating reports** from databases on a schedule
- **Updating GitHub issues** from Slack conversations
- **Automating DevOps tasks** (deployments, rollbacks, monitoring)
- **Building internal tooling** that talks to multiple systems
- **Game engine control** (Godot MCP has 162 tools—Claude can build 3D games autonomously)

MCP is why some teams now think of Claude as an "engineering assistant" not a "chat tool."

## 4. Huge Context Window: Understand Your Entire Codebase at Once

**This changes everything about how Claude reasons about your code.**

Claude Pro's large context window means you can paste:

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

&lt;/div&gt;



&lt;p&gt;✓ Entire repositories (100+ files)&lt;br&gt;
✓ Multiple service boundaries&lt;br&gt;
✓ Architecture documentation&lt;br&gt;
✓ API specifications&lt;br&gt;
✓ Database schemas&lt;br&gt;
✓ Production logs&lt;br&gt;
✓ Test suites&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
**All at once. Without losing context.**

### Why this matters

**Before:** Ask Claude about a bug → limited to a single file → misses root cause
**After:** Show entire codebase → Claude sees the full dependency chain → finds the real bug in 10 seconds

### Practical benefits

Claude can now:

- **Understand project architecture** (sees design patterns across files)
- **Maintain coding consistency** (notices your style, applies it everywhere)
- **Reason across services** (understands microservice interactions)
- **Debug complex systems** (follows the call stack across 50 files)

### This is crucial for

- Laravel monoliths (10k+ lines of interconnected code)
- Enterprise applications (complex dependency trees)
- Next.js full-stack apps (frontend + API + database all in context)
- Microservices (reasoning across service boundaries)

**Result:** Developers with large codebases see the biggest productivity gains.



## 5. Extended Thinking + Agent Workflows: Let Claude Think Harder

**This is Claude's secret superpower.**

Extended thinking lets Claude engage in **deeper reasoning** for complex problems:

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

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Analyze the problem (read code, logs, specs)&lt;/li&gt;
&lt;li&gt;Create a plan (break it into steps)&lt;/li&gt;
&lt;li&gt;Write implementation (generate code)&lt;/li&gt;
&lt;li&gt;Test thoroughly (run tests, catch errors)&lt;/li&gt;
&lt;li&gt;Fix issues (debug, refactor)&lt;/li&gt;
&lt;li&gt;Summarize changes (explain what happened)
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
Claude chains these together **autonomously** without you steering.

### When developers use this

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

&lt;/div&gt;



&lt;p&gt;"Our Next.js app has weird caching issues on the production API. &lt;br&gt;
Debug this end-to-end and fix it."&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
Claude thinks through:
- Request flow (client → server → database)
- Cache layers (browser, CDN, app-level)
- Race conditions (concurrent requests)
- Timing issues (stale data)
- Real fix (not a band-aid)

Then delivers: code changes + test cases + deployment notes.

### Best for

- Complex debugging (race conditions, memory leaks, timing bugs)
- Architecture planning (designing new systems)
- System design (scaling strategies, performance optimization)
- Automation pipelines (multi-step workflows)
- AI coding agents (letting Claude run autonomously)

---

## The Ultimate Claude Pro Stack for Maximum Productivity

Here's what the fastest developers are using right now:

| Feature | What It Does | Your Win |
|---------|-------------|----------|
| **Claude Code** | Full coding agent | Build features 3-5x faster |
| **Artifacts** | Live app builder | Prototype in seconds |
| **MCP** | Connect everything | Automate entire workflows |
| **Large Context** | Understand everything | No more context switching |
| **Extended Thinking** | Deep reasoning | Solve hard problems autonomously |

**Combined effect:** An AI engineer + app generator + automation assistant in one workflow.

---

## Real Productivity Wins (From Actual Developers)

### Backend engineer (Laravel)
&amp;gt; "Used to take 4 hours to build an API. Claude Code does it in 20 minutes with tests."

### Frontend engineer (React)
&amp;gt; "Artifacts let me ship interactive prototypes same-day. Used to take 2-3 days to build mockups."

### DevOps engineer
&amp;gt; "MCP + extended thinking handles deployment automation I'd normally spend a week on."

### Startup founder
&amp;gt; "I'm shipping full features alone. Claude Code handles the coding, Artifacts for landing pages, MCP for automation. Feels like I have a small team."



## How to Get Started Right Now

### Step 1: Start with Claude Code
Ask Claude:
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;"Read my codebase structure and tell me what you find."&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Then:
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;"Build [feature name]. Here's what I want..."&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
### Step 2: Use Artifacts for UI
Next time you need a component, dashboard, or prototype:
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;"Build me a [thing]. I need [requirements]."&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Grab the code directly from the rendered artifact.

### Step 3: Connect MCP (Optional but powerful)
Link Claude to:
- Your GitHub repo (issue + PR automation)
- Your database (query, generate migrations)
- Your Slack (notifications, updates)

### Step 4: Try Extended Thinking for Complex Problems
When you have a hard bug or design challenge:
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;"Debug this [problem]. Think through it step-by-step."&lt;/p&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;


## The Bottom Line

In 2026, Claude Pro isn't a copilot anymore. It's:

✅ **Claude Code** = AI engineer  
✅ **Artifacts** = App builder  
✅ **MCP** = Automation agent  
✅ **Large Context** = Codebase understanding  
✅ **Extended Thinking** = Problem solver  

Together? You ship faster than teams twice your size.

The developers getting the most value are the ones combining these features. Start with Claude Code. Add Artifacts. Then explore MCP for automation.

Your productivity will thank you.


**Have you tried any of these features? What's your biggest productivity win so far? Drop it in the comments—I'm curious what's working for your team.**

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

&lt;/div&gt;

</description>
      <category>claude</category>
      <category>ai</category>
      <category>development</category>
      <category>productivity</category>
    </item>
    <item>
      <title>How I Use AI to Code 10x Faster (With Real Examples)</title>
      <dc:creator>Kudzai Murimi</dc:creator>
      <pubDate>Sat, 28 Mar 2026 11:28:25 +0000</pubDate>
      <link>https://dev.to/respect17/how-i-use-ai-to-code-10x-faster-with-real-examples-13fd</link>
      <guid>https://dev.to/respect17/how-i-use-ai-to-code-10x-faster-with-real-examples-13fd</guid>
      <description>&lt;p&gt;I'm not exaggerating when I say AI changed how I write code.&lt;/p&gt;

&lt;p&gt;Not because it writes everything for me — but because it eliminates the parts of coding that used to slow me down the most: staring at boilerplate, Googling the same errors, writing repetitive tests, and trying to understand unfamiliar concepts from scratch.&lt;/p&gt;

&lt;p&gt;I use four tools daily: &lt;strong&gt;GitHub Copilot, ChatGPT, Claude, and Cursor&lt;/strong&gt;. Each one has a specific role in my workflow. Here's exactly how I use them — with before/after examples.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Writing Boilerplate Code — GitHub Copilot
&lt;/h2&gt;

&lt;p&gt;Boilerplate is the biggest time thief in any project. Form requests, controllers, service classes, migrations — it's all necessary but mentally draining to write from scratch.&lt;/p&gt;

&lt;p&gt;GitHub Copilot handles this inside my editor before I even finish typing.&lt;/p&gt;

&lt;h3&gt;
  
  
  Before AI
&lt;/h3&gt;

&lt;p&gt;Writing a Laravel form request used to look like this: open a new file, remember the method names, type out every rule manually, look up validation syntax I half-remember…&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="c1"&gt;// I'd write this entirely by hand — slowly&lt;/span&gt;
&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;StorePaymentRequest&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nc"&gt;FormRequest&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;authorize&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="kt"&gt;bool&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="p"&gt;}&lt;/span&gt;

    &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;rules&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="kt"&gt;array&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
            &lt;span class="s1"&gt;'amount'&lt;/span&gt;    &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s1"&gt;'required|numeric|min:1'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="s1"&gt;'reference'&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s1"&gt;'required|string|max:100'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="s1"&gt;'gateway'&lt;/span&gt;   &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s1"&gt;'required|in:ozow,yoco'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="p"&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;
  
  
  After AI (Copilot)
&lt;/h3&gt;

&lt;p&gt;Now I just type the class name and a comment describing what I want:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Form request for processing a payment — amount, reference, gateway&lt;/span&gt;
&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;StorePaymentRequest&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nc"&gt;FormRequest&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Copilot fills in the rest instantly ✅&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Copilot suggests the full class — rules, messages, even custom error messages — based on context from the rest of my project. I review, adjust, and move on in seconds.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Debugging Errors — ChatGPT
&lt;/h2&gt;

&lt;p&gt;When I hit an error I don't immediately understand, ChatGPT is the first place I go. Not Stack Overflow. Not Google.&lt;/p&gt;

&lt;p&gt;I paste the error + the relevant code and ask: &lt;em&gt;"What's causing this and how do I fix it?"&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Before AI
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SQLSTATE[42S22]: Column not found: 1054 Unknown column
'payments.user_id' in 'where clause'
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;I'd spend 10–20 minutes checking migrations, re-reading docs, and Googling the exact error hoping someone had the same setup.&lt;/p&gt;

&lt;h3&gt;
  
  
  After AI (ChatGPT)
&lt;/h3&gt;

&lt;p&gt;I paste the error with my model and migration, and get a precise explanation back:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;"Your &lt;code&gt;payments&lt;/code&gt; table migration doesn't include a &lt;code&gt;user_id&lt;/code&gt; column, but your Eloquent model has a &lt;code&gt;belongsTo(User::class)&lt;/code&gt; relationship that's trying to query it. Add the column to your migration or check that you're running the latest migration."&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Fix: add this to your payments migration&lt;/span&gt;
&lt;span class="nv"&gt;$table&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;foreignId&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'user_id'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;constrained&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;cascadeOnDelete&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;What used to take 20 minutes now takes 2. The difference isn't just speed — it's that I understand &lt;em&gt;why&lt;/em&gt; something broke, not just how to patch it.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Writing Tests — Claude
&lt;/h2&gt;

&lt;p&gt;Writing tests is something most developers know they should do more of — and don't, because it's time-consuming and repetitive.&lt;/p&gt;

&lt;p&gt;I use Claude specifically for test generation because it's excellent at understanding context across a whole file and writing thorough, meaningful tests.&lt;/p&gt;

&lt;h3&gt;
  
  
  Before AI
&lt;/h3&gt;

&lt;p&gt;Writing a test for a payment controller meant manually thinking through every scenario:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="c1"&gt;// I'd write one test, maybe two, and move on&lt;/span&gt;
&lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;test_payment_is_processed_successfully&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nv"&gt;$response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nv"&gt;$this&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;post&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'/pay'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'amount'&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'gateway'&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s1"&gt;'yoco'&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;
    &lt;span class="nv"&gt;$response&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;assertRedirect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'/success'&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;
  
  
  After AI (Claude)
&lt;/h3&gt;

&lt;p&gt;I paste my controller and ask: &lt;em&gt;"Write PHPUnit tests for this controller covering success, failure, validation errors, and invalid gateway."&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Claude generates full coverage automatically&lt;/span&gt;

&lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;test_payment_succeeds_with_valid_data&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nv"&gt;$response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nv"&gt;$this&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;post&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'/pay'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
        &lt;span class="s1"&gt;'amount'&lt;/span&gt;    &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;500&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="s1"&gt;'reference'&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s1"&gt;'INV-001'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="s1"&gt;'gateway'&lt;/span&gt;   &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s1"&gt;'yoco'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="p"&gt;]);&lt;/span&gt;

    &lt;span class="nv"&gt;$response&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;assertRedirect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;route&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'payment.success'&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
    &lt;span class="nv"&gt;$this&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;assertDatabaseHas&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'payments'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'reference'&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s1"&gt;'INV-001'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'status'&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s1"&gt;'paid'&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;test_payment_fails_validation_without_amount&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nv"&gt;$response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nv"&gt;$this&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;post&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'/pay'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'gateway'&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s1"&gt;'yoco'&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;
    &lt;span class="nv"&gt;$response&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;assertSessionHasErrors&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="s1"&gt;'amount'&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;test_payment_rejects_invalid_gateway&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nv"&gt;$response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nv"&gt;$this&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;post&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'/pay'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'amount'&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'gateway'&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s1"&gt;'stripe'&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;
    &lt;span class="nv"&gt;$response&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;assertSessionHasErrors&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="s1"&gt;'gateway'&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;function&lt;/span&gt; &lt;span class="n"&gt;test_payment_handles_gateway_failure_gracefully&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nc"&gt;Http&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;fake&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;
        &lt;span class="s1"&gt;'online.yoco.com/*'&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nc"&gt;Http&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="nf"&gt;response&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="s1"&gt;'error'&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s1"&gt;'Declined'&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="mi"&gt;400&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
    &lt;span class="p"&gt;]);&lt;/span&gt;

    &lt;span class="nv"&gt;$response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nv"&gt;$this&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;post&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'/pay'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
        &lt;span class="s1"&gt;'amount'&lt;/span&gt;    &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="s1"&gt;'reference'&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s1"&gt;'INV-002'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="s1"&gt;'gateway'&lt;/span&gt;   &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s1"&gt;'yoco'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="p"&gt;]);&lt;/span&gt;

    &lt;span class="nv"&gt;$response&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;assertRedirect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;route&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'payment.error'&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;p&gt;Four solid tests in under a minute. Before AI, I might have written one and told myself I'd come back to it.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Understanding New Concepts — Cursor + ChatGPT
&lt;/h2&gt;

&lt;p&gt;Instead of reading through entire documentation pages, I use &lt;strong&gt;Cursor&lt;/strong&gt; (which has AI built directly into the editor) to explain code inline, and &lt;strong&gt;ChatGPT&lt;/strong&gt; to teach me concepts with examples tailored to my stack.&lt;/p&gt;

&lt;h3&gt;
  
  
  After AI (ChatGPT)
&lt;/h3&gt;

&lt;p&gt;I asked: &lt;em&gt;"Explain Laravel Pipeline to me like I'm a developer who knows Laravel but has never used Pipeline. Show me a real example using payment processing."&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="c1"&gt;// ChatGPT explained it with an example I could use directly&lt;/span&gt;

&lt;span class="nv"&gt;$result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;app&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nc"&gt;Pipeline&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="n"&gt;class&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;send&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$paymentData&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;through&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;
        &lt;span class="nc"&gt;ValidatePaymentData&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="n"&gt;class&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="nc"&gt;CheckForDuplicateTransaction&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="n"&gt;class&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="nc"&gt;ChargeGateway&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="n"&gt;class&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="nc"&gt;SendConfirmationEmail&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="n"&gt;class&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="nf"&gt;thenReturn&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Understanding that took me 5 minutes instead of 45.&lt;/p&gt;

&lt;h3&gt;
  
  
  Cursor — Inline Code Explanation
&lt;/h3&gt;

&lt;p&gt;When I open an unfamiliar file, I highlight confusing code in Cursor and ask it to explain inline:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="c1"&gt;// I highlighted this line and asked Cursor: "what does this do?"&lt;/span&gt;
&lt;span class="nv"&gt;$order&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;loadMissing&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="s1"&gt;'payments'&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="k"&gt;fn&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$q&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nv"&gt;$q&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="nf"&gt;where&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;'status'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'paid'&lt;/span&gt;&lt;span class="p"&gt;)]);&lt;/span&gt;

&lt;span class="c1"&gt;// Cursor explained:&lt;/span&gt;
&lt;span class="c1"&gt;// "loadMissing() lazy-loads the 'payments' relationship only if it hasn't&lt;/span&gt;
&lt;span class="c1"&gt;//  been loaded already. The closure filters it to only load paid payments,&lt;/span&gt;
&lt;span class="c1"&gt;//  preventing unnecessary queries if the relation is already in memory."&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;No context switching. No browser tabs. The explanation comes to where I'm working.&lt;/p&gt;

&lt;h2&gt;
  
  
  How These Tools Fit Together
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Task&lt;/th&gt;
&lt;th&gt;Tool&lt;/th&gt;
&lt;th&gt;Role&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Boilerplate&lt;/td&gt;
&lt;td&gt;GitHub Copilot&lt;/td&gt;
&lt;td&gt;Generating code &amp;amp; scaffolding&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Debugging&lt;/td&gt;
&lt;td&gt;ChatGPT&lt;/td&gt;
&lt;td&gt;Quick fixes &amp;amp; error explanations&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Testing&lt;/td&gt;
&lt;td&gt;Claude&lt;/td&gt;
&lt;td&gt;Deep logic &amp;amp; edge case coverage&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Inline Help&lt;/td&gt;
&lt;td&gt;Cursor&lt;/td&gt;
&lt;td&gt;Understanding existing code&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Learning&lt;/td&gt;
&lt;td&gt;ChatGPT&lt;/td&gt;
&lt;td&gt;Learning new concepts deeply&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  ⚠️ The One Thing to Remember
&lt;/h2&gt;

&lt;p&gt;AI makes you faster, not infallible.&lt;/p&gt;

&lt;p&gt;I've had Copilot suggest code that looked right but had a subtle security flaw. I've had ChatGPT confidently give me outdated API syntax. Always review what AI generates — especially anything touching security, payments, or data.&lt;/p&gt;

&lt;p&gt;Use it as a &lt;strong&gt;fast, knowledgeable pair programmer&lt;/strong&gt; — not as the final word.&lt;/p&gt;

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

&lt;p&gt;If you're not using AI in your development workflow yet, you're spending time you don't need to spend.&lt;/p&gt;

&lt;p&gt;The developers who will stand out in the next few years aren't the ones who avoid AI. They're the ones who know how to use it well.&lt;/p&gt;

&lt;h2&gt;
  
  
  💬 Working on an app and need help?
&lt;/h2&gt;

&lt;p&gt;I specialize in Laravel applications, API integrations, and payment gateway setups (Ozow, Yoco, and more).&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>githubcopilot</category>
      <category>ai</category>
    </item>
  </channel>
</rss>
