<?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>Forem: Timothy Adeleke</title>
    <description>The latest articles on Forem by Timothy Adeleke (@timadey).</description>
    <link>https://forem.com/timadey</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1785036%2F9d282e41-ba59-4050-ad7a-6a5f22d81940.jpeg</url>
      <title>Forem: Timothy Adeleke</title>
      <link>https://forem.com/timadey</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/timadey"/>
    <language>en</language>
    <item>
      <title>How I Fixed the dyld: Symbol not found Error After Updating PHP 8.4 in Laravel Herd (macOS Monterey)</title>
      <dc:creator>Timothy Adeleke</dc:creator>
      <pubDate>Sat, 10 Jan 2026 10:42:39 +0000</pubDate>
      <link>https://forem.com/timadey/how-i-fixed-the-dyld-symbol-not-found-error-after-updating-php-84-in-laravel-herd-macos-monterey-3jgd</link>
      <guid>https://forem.com/timadey/how-i-fixed-the-dyld-symbol-not-found-error-after-updating-php-84-in-laravel-herd-macos-monterey-3jgd</guid>
      <description>&lt;p&gt;If you’re using Laravel Herd on macOS Monterey (12.x), especially on an Intel Mac, and updated to PHP 8.4, you’ve probably run into this error:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;dyld: Symbol not found: (__ZNSt3__122__libcpp_verbose_abortEPKcz)
Referenced from: '/Users/macbook/Library/Application Support/Herd/bin/php84'
Expected in: '/usr/lib/libc++.1.dylib'
zsh: abort      php artisan serve --host localhost --port 8001
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;I updated Herd’s PHP to the latest release, and Laravel refused to run anything because PHP immediately crashed. Even php -v threw the same dyld error.&lt;/p&gt;

&lt;p&gt;After digging through GitHub issues and experimenting, I finally got it working. Here’s exactly what solved it for me.&lt;/p&gt;

&lt;p&gt;Original issue where this was discussed:&lt;br&gt;
&lt;a href="https://github.com/beyondcode/herd-community/issues/1600" rel="noopener noreferrer"&gt;See the original issue where this was discussed&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  What’s Actually Happening
&lt;/h2&gt;

&lt;p&gt;In short:&lt;/p&gt;

&lt;p&gt;Herd’s recent PHP 8.3/8.4 binaries are built against a newer C++ standard than what macOS Monterey’s libc++ provides.&lt;/p&gt;

&lt;p&gt;Lightroom-level errors like this aren’t framework issues — they’re runtime symbol mismatches between the binary and your OS.&lt;/p&gt;

&lt;p&gt;Monterey (12.x) simply doesn’t have the required symbols in &lt;code&gt;/usr/lib/libc++.1.dylib&lt;/code&gt;, so PHP crashes on start.&lt;/p&gt;
&lt;h2&gt;
  
  
  What Finally Worked for Me
&lt;/h2&gt;
&lt;h3&gt;
  
  
  Step 1 — Download a Compatible Herd PHP Build
&lt;/h3&gt;

&lt;p&gt;I used the Herd-provided PHP 8.4.15 x86 binaries, which are known to work on macOS Monterey:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://download.herdphp.com/8.4/8.4.15/php84-x86" rel="noopener noreferrer"&gt;https://download.herdphp.com/8.4/8.4.15/php84-x86&lt;/a&gt;&lt;br&gt;
&lt;a href="https://download.herdphp.com/8.4/8.4.15/php84-fpm-x86" rel="noopener noreferrer"&gt;https://download.herdphp.com/8.4/8.4.15/php84-x86&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;These are the exact files I replaced in my Herd installation.&lt;/p&gt;
&lt;h3&gt;
  
  
  Step 2 — Move Them Into Herd’s Bin Folder
&lt;/h3&gt;

&lt;p&gt;Replace the broken Herd binaries with these:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;mv ~/Downloads/php84-x86 ~/Library/Application\ Support/Herd/bin/php84
mv ~/Downloads/php84-fpm-x86 ~/Library/Application\ Support/Herd/bin/php84-fpm
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;At this point, Herd still showed PHP 8.4.16 in the UI — but the CLI told a different story once we fixed permissions.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 3 — Fix Permissions Properly
&lt;/h3&gt;

&lt;p&gt;This part is subtle — if you just do chmod +x, it might still fail quietly. What worked for me was:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;cd ~/Library/Application\ Support/Herd/bin
chmod 755 php84 php84-fpm
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That actually gave the binaries the correct execution rights.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 4 — Verify It’s Working
&lt;/h3&gt;

&lt;p&gt;Now when I ran:&lt;br&gt;
&lt;/p&gt;

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

&lt;/div&gt;



&lt;p&gt;I got:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;PHP 8.4.15 (cli) (built: Nov 21 2025 02:39:21) (NTS clang 15.0.0)
Copyright (c) The PHP Group
Built by Laravel Herd
Zend Engine v4.4.15
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;No dyld errors. Laravel runs. FPM starts. My apps serve just fine.&lt;/p&gt;

&lt;p&gt;A Few Notes From My Experience&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Herd’s UI version number may not immediately update, but don’t worry — the CLI version is what matters.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;You might need to restart Herd services if you were hitting 502 errors before.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;This same pattern works for older versions too (PHP 8.3 / 8.2). The binaries mentioned in the GitHub thread include links for them as well.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Here are the reference links from the thread:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;PHP 8.3.28 (x86 + FPM)
https://download.herdphp.com/8.3/8.3.28/php83-x86
https://download.herdphp.com/8.3/8.3.28/php83-fpm-x86

PHP 8.2.29 (x86 + FPM)
https://download.herdphp.com/8.2/8.2.29/php82-x86
https://download.herdphp.com/8.2/8.2.29/php82-fpm-x86
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>fix</category>
      <category>php</category>
      <category>laravel</category>
      <category>help</category>
    </item>
    <item>
      <title>You Learn Something Every Day While Coding, Then You Forget It</title>
      <dc:creator>Timothy Adeleke</dc:creator>
      <pubDate>Fri, 02 Jan 2026 15:03:42 +0000</pubDate>
      <link>https://forem.com/timadey/i-made-codedraft-proactive-54h6</link>
      <guid>https://forem.com/timadey/i-made-codedraft-proactive-54h6</guid>
      <description>&lt;p&gt;You learn something valuable every day while coding.&lt;br&gt;
And you lose it by tomorrow.&lt;/p&gt;

&lt;p&gt;That’s the real problem.&lt;/p&gt;

&lt;p&gt;Most developers don’t fail to write; they fail to remember.&lt;br&gt;
Insights disappear between commits, deadlines, and context switches.&lt;/p&gt;

&lt;p&gt;So I made CodeDraft proactive! &lt;/p&gt;

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

&lt;p&gt;Now it doesn’t wait for you to be disciplined.&lt;br&gt;
It watches your workflow and nudges you at the exact moment learning happens ⚡️&lt;/p&gt;

&lt;h2&gt;
  
  
  🌟 New Features
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. Intelligent Background The Monitoring
&lt;/h3&gt;

&lt;p&gt;CodeDraft now watches your activity (file saves, git commits) to identify "interesting" moments.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Try opening a source file&lt;/li&gt;
&lt;li&gt;Make a significant change (e.g., add a new function with &amp;gt;20 lines or add a try/catch block).&lt;/li&gt;
&lt;li&gt;Save the file.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Result: You should see a notification: "Interesting change detected. Capture this learning?"&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Git Commit Analysis
&lt;/h3&gt;

&lt;p&gt;When you commit code, CodeDraft analyses the message and changes.&lt;/p&gt;

&lt;p&gt;Here is how you can verify the changes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Stage some changes.&lt;/li&gt;
&lt;li&gt;Commit with a message containing keywords like fix, refactor, or feat (e.g., git commit -m "fix: resolve null pointer exception").&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Result: CodeDraft will prompt: "Significant commit detected: ... Capture this learning?"&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Status Bar Integration
&lt;/h3&gt;

&lt;p&gt;A new status bar item keeps you informed.&lt;/p&gt;

&lt;p&gt;👁️ (Eye Icon): CodeDraft is watching (0 pending captures).&lt;br&gt;
📓 (Notebook Icon) + Count: Shows how many learnings you've captured.&lt;br&gt;
Clicking: Quickly generates a draft from pending captures.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. Automated Reviews &amp;amp; Drafts
&lt;/h3&gt;

&lt;p&gt;Weekly Review: On Fridays at 5 PM (configurable), it reminds you to review your week's learnings.&lt;br&gt;
Draft Suggestion: Once you accumulate 5+ captures, it suggests generating a draft.&lt;/p&gt;

&lt;h3&gt;
  
  
  ⚙️ Configuration
&lt;/h3&gt;

&lt;p&gt;You can customise the proactive behaviour in VS Code settings (CodeDraft &amp;gt; Proactive):&lt;/p&gt;

&lt;p&gt;Try using CodeDraft for a day of normal work.&lt;br&gt;
Adjust the Notification Cooldown if you find it too chatty or too quiet.&lt;/p&gt;




&lt;h2&gt;
  
  
  📦 &lt;strong&gt;Quick Links&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Install&lt;/strong&gt;: &lt;a href="https://marketplace.visualstudio.com/items?itemName=Timadey.codedraft" rel="noopener noreferrer"&gt;VS Code Marketplace&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Contribute&lt;/strong&gt;: &lt;a href="https://github.com/Timadey/codedraft" rel="noopener noreferrer"&gt;GitHub Repository&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Report Issues&lt;/strong&gt;: &lt;a href="https://github.com/Timadey/codedraft/issues" rel="noopener noreferrer"&gt;GitHub Issues&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;&lt;em&gt;If you are just hearing about Codedraft, it is an intelligent coding extension that helps you turn your daily coding into publishable drafts for blogs or social media. Read more about it &lt;a href="https://dev.to/timadey/from-code-to-content-how-codedraft-automates-technical-writing-3f63"&gt;here&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;




</description>
      <category>programming</category>
      <category>vscode</category>
    </item>
    <item>
      <title>From Code to Content: How Codedraft automates Technical Writing</title>
      <dc:creator>Timothy Adeleke</dc:creator>
      <pubDate>Tue, 30 Dec 2025 13:21:49 +0000</pubDate>
      <link>https://forem.com/timadey/from-code-to-content-how-codedraft-automates-technical-writing-3f63</link>
      <guid>https://forem.com/timadey/from-code-to-content-how-codedraft-automates-technical-writing-3f63</guid>
      <description>&lt;p&gt;You just crushed a 3-hour debugging marathon. That algorithm? Finally working. Your coffee's gone cold, your focus is fried, and the last thing you want to do is open a blank document and write about it.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;So you don't.&lt;/strong&gt; &lt;/p&gt;

&lt;p&gt;And just like that, another valuable learning disappears into the void. 🦗&lt;/p&gt;

&lt;p&gt;If this sounds painfully familiar, you're not alone. As developers, we're problem-solving machines, but translating those "aha!" moments into written content? That's a completely different task, requiring a significant amount of our CPU. Context switching fatigue, the tyranny of the blank page, and the sheer exhaustion of trying to remember what you learned three commits ago, all add up to one thing: &lt;strong&gt;most technical posts never get written&lt;/strong&gt; &lt;em&gt;(or do they?)&lt;/em&gt; 😂&lt;/p&gt;

&lt;h2&gt;
  
  
  The Real Cost of Unwritten Content
&lt;/h2&gt;

&lt;p&gt;Here's what we lose when we don't write:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Personal growth&lt;/strong&gt;: Writing deepens understanding (rubber duck debugging, but permanent)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Career opportunities&lt;/strong&gt;: Your next job/client is googling problems you've solved&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Community impact&lt;/strong&gt;: Someone &lt;em&gt;right now&lt;/em&gt; is struggling with the exact problem you just conquered&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Compounding knowledge&lt;/strong&gt;: Future-you will forget today's insights&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The solution isn't "try harder" or "make time." &lt;strong&gt;The solution is capturing insights &lt;em&gt;while&lt;/em&gt; they're fresh, without leaving your flow state.&lt;/strong&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Introducing CodeDraft: Your Coding Companion That Writes &lt;em&gt;With&lt;/em&gt; You
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;CodeDraft&lt;/strong&gt; is a VS Code extension that transforms your development work into blog-ready drafts automatically. Think of it as a second brain that remembers everything you learned today, and helps you share it tomorrow.&lt;/p&gt;

&lt;h3&gt;
  
  
  🎯 What Makes CodeDraft Different
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;1. Zero Context Switching&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
CodeDraft lives in your sidebar. No new apps, no browser tabs, no "I'll write this up later." Capture insights with a hotkey and keep coding.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Intelligent Capture System&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Code snippets&lt;/strong&gt; (with automatic context, no more missing setup code)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Git commits&lt;/strong&gt; that tell a story ("Fixed debounce logic" → blog material)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Quick learning notes&lt;/strong&gt; for those "oh, THAT'S why it works" moments&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;3. AI-Powered Draft Generation&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Feed it your week's captures, and CodeDraft generates SEO-friendly titles and complete draft outlines. Works with local AI (Ollama) or cloud providers (OpenAI, Anthropic, Gemini).&lt;/p&gt;
&lt;h3&gt;
  
  
  🚀 Real Example: From Code to Content
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// You write this elegant solution:&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;debounce&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;func&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;wait&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;timeout&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="nx"&gt;args&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;clearTimeout&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;timeout&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nx"&gt;timeout&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;setTimeout&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;func&lt;/span&gt;&lt;span class="p"&gt;(...&lt;/span&gt;&lt;span class="nx"&gt;args&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="nx"&gt;wait&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="c1"&gt;// You commit: "Optimized search with debounce + cancellation"&lt;/span&gt;
&lt;span class="c1"&gt;// CodeDraft captures: snippet + commit + surrounding context&lt;/span&gt;

&lt;span class="c1"&gt;// Next day, you click "Generate Draft" →&lt;/span&gt;

&lt;span class="err"&gt;📝&lt;/span&gt; &lt;span class="nx"&gt;Draft&lt;/span&gt; &lt;span class="nx"&gt;Output&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
&lt;span class="err"&gt;#&lt;/span&gt; &lt;span class="nx"&gt;How&lt;/span&gt; &lt;span class="nx"&gt;I&lt;/span&gt; &lt;span class="nx"&gt;Fixed&lt;/span&gt; &lt;span class="nx"&gt;My&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt; &lt;span class="nx"&gt;App&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;s Performance with Smart Debouncing
## The Problem: Search Lagging on Every Keystroke
## The Solution: Debounce with Proper Cleanup
## Code Example &amp;amp; Explanation
## Key Lessons Learned
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;&lt;strong&gt;Boom.&lt;/strong&gt; You've got a framework. All you need is 15 minutes to flesh it out.&lt;/p&gt;


&lt;h2&gt;
  
  
  Who Needs CodeDraft? (Probably You)
&lt;/h2&gt;
&lt;h3&gt;
  
  
  ✍️ &lt;strong&gt;Engineers Building Their Brand&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;em&gt;"I know I should write, but by Friday I'm too burned out."&lt;/em&gt;&lt;br&gt;&lt;br&gt;
→ Let CodeDraft do the heavy lifting. You just polish and publish.&lt;/p&gt;
&lt;h3&gt;
  
  
  🛠️ &lt;strong&gt;Indie Hackers &amp;amp; Solo Developers&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;em&gt;"My audience craves behind-the-scenes content, but documenting kills my momentum."&lt;/em&gt;&lt;br&gt;&lt;br&gt;
→ Capture your build-in-public journey without stopping to write essays.&lt;/p&gt;
&lt;h3&gt;
  
  
  🌟 &lt;strong&gt;Open-Source Contributors&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;em&gt;"I spend hours explaining PRs in comments. Can't that be a blog post?"&lt;/em&gt;&lt;br&gt;&lt;br&gt;
→ Absolutely. CodeDraft turns your contributions into shareable technical narratives.&lt;/p&gt;


&lt;h2&gt;
  
  
  See It In Action: 3 Real Workflows
&lt;/h2&gt;
&lt;h3&gt;
  
  
  &lt;strong&gt;Scenario 1: The Weekend Side Project&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Saturday&lt;/strong&gt;: You build a Next.js blog with fancy API caching.&lt;br&gt;&lt;br&gt;
&lt;strong&gt;CodeDraft captures&lt;/strong&gt;: Your route refactoring + caching trick + deployment notes.&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Sunday&lt;/strong&gt;: CodeDraft suggests: &lt;em&gt;"How I Built a Blazing-Fast Blog in 8 Hours with Next.js"&lt;/em&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  &lt;strong&gt;Scenario 2: The Open-Source Hero&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Monday&lt;/strong&gt;: You merge a PR fixing a memory leak.&lt;br&gt;&lt;br&gt;
&lt;strong&gt;CodeDraft captures&lt;/strong&gt;: Commit history + code diffs + your diagnostic process.&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Tuesday&lt;/strong&gt;: AI generates: &lt;em&gt;"Hunting a Memory Leak in Production: A Node.js Detective Story"&lt;/em&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  &lt;strong&gt;Scenario 3: The Daily Grinder&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;All Week&lt;/strong&gt;: You fix bugs, refactor components, and learn small lessons.&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Friday&lt;/strong&gt;: Run &lt;code&gt;CodeDraft: Weekly Review&lt;/code&gt; → 3 potential blog posts appear.&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Choose one, spend 20 minutes editing, publish.&lt;/strong&gt;&lt;/p&gt;


&lt;h2&gt;
  
  
  Get Started in 3 Minutes (Seriously)
&lt;/h2&gt;
&lt;h3&gt;
  
  
  &lt;strong&gt;Step 1: Install the Extension&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;→ &lt;a href="https://marketplace.visualstudio.com/items?itemName=timadey.codedraft" rel="noopener noreferrer"&gt;Get CodeDraft on the VS Code Marketplace&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  &lt;strong&gt;Step 2: Choose Your AI (Local or Cloud)&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Option A: Local &amp;amp; Private&lt;/strong&gt; (Recommended for beginners)&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# Install Ollama&lt;/span&gt;
brew &lt;span class="nb"&gt;install &lt;/span&gt;ollama  &lt;span class="c"&gt;# or download from ollama.com&lt;/span&gt;

&lt;span class="c"&gt;# Run a model&lt;/span&gt;
ollama run llama3

&lt;span class="c"&gt;# In VS Code → Settings → "CodeDraft: AI Provider" → Select "Ollama"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Option B: Cloud AI&lt;/strong&gt; (OpenAI, Anthropic, Gemini)&lt;br&gt;&lt;br&gt;
Just add your API key in CodeDraft settings. Done.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Step 3: Capture &amp;amp; Create&lt;/strong&gt;
&lt;/h3&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Action&lt;/th&gt;
&lt;th&gt;Hotkey&lt;/th&gt;
&lt;th&gt;What It Does&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Capture code snippet&lt;/td&gt;
&lt;td&gt;
&lt;code&gt;Cmd+Shift+C&lt;/code&gt; (Mac) / &lt;code&gt;Ctrl+Shift+C&lt;/code&gt; (Win)&lt;/td&gt;
&lt;td&gt;Grabs selected code + context&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Add quick note&lt;/td&gt;
&lt;td&gt;&lt;code&gt;Cmd+Shift+L&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Jot down "why this works" insights&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Generate draft&lt;/td&gt;
&lt;td&gt;&lt;code&gt;Cmd+Shift+G&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Creates blog outline from captures&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;Pro Tip&lt;/strong&gt;: Start by capturing just &lt;em&gt;one&lt;/em&gt; interesting snippet today. See how it feels. You don't need a week's worth of data to get value.&lt;/p&gt;




&lt;h2&gt;
  
  
  This Is Open Source, And We Need You
&lt;/h2&gt;

&lt;p&gt;CodeDraft is &lt;strong&gt;fully open source&lt;/strong&gt; because the best developer tools are built &lt;em&gt;by&lt;/em&gt; developers, &lt;em&gt;for&lt;/em&gt; developers.&lt;/p&gt;

&lt;h3&gt;
  
  
  🛠️ &lt;strong&gt;Ways to Contribute&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Not a coder?&lt;/strong&gt; No problem!&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🐛 Report bugs or suggest features (&lt;a href="https://github.com/Timadey/codedraft/issues" rel="noopener noreferrer"&gt;GitHub Issues&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;📖 Improve documentation (first-time contributors welcome!)&lt;/li&gt;
&lt;li&gt;📣 Share your experience (tweet, blog, or just tell a friend)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Love to code?&lt;/strong&gt; Even better! There are still a log of things needed to make this a perfect extension.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🚀 Help build v0.2.0 features (proactive capture, more AI providers)&lt;/li&gt;
&lt;li&gt;🔌 Create integrations (Medium, Dev.to, Hashnode auto-publish)&lt;/li&gt;
&lt;li&gt;🧪 Write tests (we need more coverage)&lt;/li&gt;
&lt;li&gt;🌍 Add internationalisation support&lt;/li&gt;
&lt;li&gt;Create a plugin for JetBrains&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Check out our &lt;a href="https://github.com/Timadey/codedraft/blob/main/CONTRIBUTING.md" rel="noopener noreferrer"&gt;Contributing Guide&lt;/a&gt;&lt;/strong&gt; (first-time OSS contributors encouraged!)&lt;/p&gt;

&lt;h3&gt;
  
  
  💡 &lt;strong&gt;Roadmap Sneak Peek&lt;/strong&gt; (Help Us Build It)
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;✅ v0.1.1: Reactive capture (current version)&lt;/li&gt;
&lt;li&gt;🚧 v0.2.0: &lt;strong&gt;Proactive capture&lt;/strong&gt; (automatically detect "interesting" commits)&lt;/li&gt;
&lt;li&gt;🔮 v0.3.0: One-click publishing to Dev.to/Medium&lt;/li&gt;
&lt;li&gt;🔮 v0.4.0: Team collaboration features&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Want to influence what I build next?&lt;/strong&gt; &lt;a href="https://github.com/Timadey/codedraft" rel="noopener noreferrer"&gt;Star the repo&lt;/a&gt; and drop your ideas in Discussions.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Bottom Line: Write More by Writing Less
&lt;/h2&gt;

&lt;p&gt;You're not lazy for not writing. You're just human. Context switching is brutal, and traditional blogging tools weren't designed for developers who live in their editor.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;CodeDraft flips the script&lt;/strong&gt;: Instead of forcing writing into your workflow, it makes your workflow &lt;em&gt;generate&lt;/em&gt; writing.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Try it this week:&lt;/strong&gt;
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Install CodeDraft (2 minutes)&lt;/li&gt;
&lt;li&gt;Capture just one snippet or commit (30 seconds)&lt;/li&gt;
&lt;li&gt;Generate a draft next Friday (5 minutes)&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;If you're still sceptical, that's fair. But what if, by this time next month, you've published 3 posts without "making time" to write?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Your move.&lt;/strong&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  📦 &lt;strong&gt;Quick Links&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Install&lt;/strong&gt;: &lt;a href="https://marketplace.visualstudio.com/items?itemName=Timadey.codedraft" rel="noopener noreferrer"&gt;VS Code Marketplace&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Contribute&lt;/strong&gt;: &lt;a href="https://github.com/Timadey/codedraft" rel="noopener noreferrer"&gt;GitHub Repository&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Report Issues&lt;/strong&gt;: &lt;a href="https://github.com/Timadey/codedraft/issues" rel="noopener noreferrer"&gt;GitHub Issues&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;&lt;strong&gt;Built with ❤️ for developers who deserve better content tools.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;P.S. — If CodeDraft helps you publish even ONE post you wouldn't have written otherwise, please star the repo. It helps other devs discover the tool, and it genuinely makes my day. Thank you.&lt;/em&gt; 🙏&lt;/p&gt;

</description>
      <category>documentation</category>
      <category>contentwriting</category>
    </item>
    <item>
      <title>Help, My Laravel API Call is Ghosting Me: A 503 Horror Story</title>
      <dc:creator>Timothy Adeleke</dc:creator>
      <pubDate>Mon, 29 Dec 2025 10:39:50 +0000</pubDate>
      <link>https://forem.com/timadey/help-my-laravel-api-call-is-ghosting-me-a-503-horror-story-40m4</link>
      <guid>https://forem.com/timadey/help-my-laravel-api-call-is-ghosting-me-a-503-horror-story-40m4</guid>
      <description>&lt;p&gt;We’ve all been there. It’s a quiet Tuesday, you’ve got your coffee, and you’re integrating a simple API—in my case, Monnify. You use the Laravel Http facade because you’re a sophisticated, modern developer. You wrap it in a try-catch because you have "best practices" tattooed on your soul.&lt;/p&gt;

&lt;p&gt;Then, you hit "Send."&lt;/p&gt;

&lt;p&gt;The Result: A cold, hard 503 Service Unavailable. No stack trace. No error log. Just a white screen of death and a feeling of profound betrayal.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Mystery of the "Black Hole"
&lt;/h2&gt;

&lt;p&gt;I started peppering my code with logger() calls like I was leaving breadcrumbs in a dark forest.&lt;/p&gt;

&lt;p&gt;logger("I am here") — Logged.&lt;/p&gt;

&lt;p&gt;logger("About to call API") ...Logged.&lt;/p&gt;

&lt;p&gt;$response = Http::post(...)&lt;/p&gt;

&lt;p&gt;logger("I survived!") ... NOT LOGGED.`&lt;/p&gt;

&lt;p&gt;My code wasn't just failing; it was vanishing into a sub-atomic wormhole. The catch block? Ignored. The finally block? A myth. My server (Nginx/Litespeed) was basically looking at PHP, seeing it hang, and saying, "You’re taking too long to find yourself, I’m calling it," and killing the process.&lt;/p&gt;

&lt;p&gt;The Usual Suspects (aka "What Killed My Script")&lt;br&gt;
After three hours of investigative surgery, I found the three villains behind this 503 phantom, especially common when working on legacy systems:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. The "Named Argument" Snobbery&lt;/strong&gt;&lt;br&gt;
I was using -&amp;gt;retry(3, 100, throw: true). Here’s the kicker: Named arguments are a Laravel 10+ / PHP 8.0+ luxury. If your server is running an older version, this isn't just a bug—it’s a Fatal Syntax Error. Because it's a syntax error inside the logic, the script dies before it even tries to run.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. The \Exception vs \Throwable Feud&lt;/strong&gt;&lt;br&gt;
Standard catch (\Exception $e) is like a bouncer who only checks IDs. If your script hits a Fatal Error or a Type Error (common in legacy version mismatches), it walks right past that bouncer. You need catch (\Throwable $e)—the bouncer who does full-body frisks.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Guzzle is "Ghosting" You&lt;/strong&gt;&lt;br&gt;
Sometimes, the Guzzle library (which powers Laravel's Http) and your server’s SSL certificates just don't get along. They get stuck in a handshake that lasts forever, eventually triggering a server-side timeout that returns a 503 before PHP can even complain.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Solution: Going "Old School" with Pure cURL
&lt;/h2&gt;

&lt;p&gt;When the high-level "magic" of a framework starts acting like a cursed relic, you go back to the basics. I swapped the fancy Http facade for Pure PHP cURL.&lt;/p&gt;

&lt;p&gt;cURL doesn't care about your framework's feelings. It’s the "Old Man" of the web—it just works. By using cURL, I could set strict CONNECTTIMEOUT and TIMEOUT settings, forcing the script to fail loudly instead of hanging silently.&lt;/p&gt;

&lt;p&gt;If the facade fails you, remember your roots.:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&lt;/code&gt;`&lt;br&gt;
    $ch = curl_init();&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode(['nin' =&amp;gt; $nin]));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
    'Content-Type: application/json',
    'Authorization: Bearer ' . $token
]);

// Tell the server: "If you don't hear back in 10s, scream."
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 10); 
curl_setopt($ch, CURLOPT_TIMEOUT, 20);

$result = curl_exec($ch);

if (curl_errno($ch)) {
    logger()-&amp;gt;error("CURL Error: " . curl_error($ch));
}

curl_close($ch);
return $result;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

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

&lt;h2&gt;
  
  
  The Moral of the Story
&lt;/h2&gt;

&lt;p&gt;Don't let your framework gaslight you. If your logs stop mid-sentence and your server starts throwing 503s:&lt;/p&gt;

&lt;p&gt;Stop trusting \Exception and start catching \Throwable.&lt;/p&gt;

&lt;p&gt;Check your syntax compatibility. (Named arguments will ruin your life on older PHP versions).&lt;/p&gt;

&lt;p&gt;Bypass the magic (very important!). If the Http facade is hanging, use curl. It’s not "giving up," it’s "&lt;strong&gt;taking control.&lt;/strong&gt;"&lt;/p&gt;

&lt;p&gt;Now, go fix those APIs and get some sleep. You’ve earned it!&lt;/p&gt;

</description>
      <category>laravel</category>
      <category>php</category>
      <category>learning</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Why Dev.to API is the Easiest Way to Add a Blog Section to Your React Portfolio</title>
      <dc:creator>Timothy Adeleke</dc:creator>
      <pubDate>Fri, 26 Dec 2025 17:03:31 +0000</pubDate>
      <link>https://forem.com/timadey/why-devto-api-is-the-easiest-way-to-add-a-blog-section-to-your-react-portfolio-bmj</link>
      <guid>https://forem.com/timadey/why-devto-api-is-the-easiest-way-to-add-a-blog-section-to-your-react-portfolio-bmj</guid>
      <description>&lt;p&gt;When building a React portfolio, one common challenge is adding a dynamic blog section without the hassle of setting up a backend or managing content manually. As a developer, I wanted a solution that was lightweight, easy to implement, and required minimal maintenance. That’s where the &lt;strong&gt;Dev.to API&lt;/strong&gt; came in.  &lt;/p&gt;

&lt;p&gt;Dev.to offers a straightforward RESTful API that allows you to fetch your published articles directly into your portfolio. The best part? No authentication is required for public articles, making it a plug-and-play solution. This approach saved me hours of work compared to building a blog section from scratch or integrating a headless CMS.  &lt;/p&gt;

&lt;p&gt;In this post, I’ll walk you through how I implemented a dynamic blog section in my React portfolio using the Dev.to API. By the end, you’ll have a clear roadmap to replicate this in your own project.  &lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Section 1: Understanding the Codebase Architecture&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Before diving into the implementation, let’s break down the project structure and key files involved.  &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Project Structure&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Here’s how the relevant parts of my React portfolio are organized:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;src/  
├── components/  
│   ├── Blog.jsx          # Main component for fetching and displaying articles  
│   └── BlogModal.jsx     # Modal component to display full article content  
└── package.json          # Dependencies like react-markdown  
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  &lt;strong&gt;Key Files and Changes&lt;/strong&gt;
&lt;/h4&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;Blog.jsx&lt;/code&gt;&lt;/strong&gt;: This is the heart of the integration. It fetches articles from the Dev.to API, manages state, and renders a list of articles.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;BlogModal.jsx&lt;/code&gt;&lt;/strong&gt;: A modal component that displays the full content of an article when a user clicks on it.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;package.json&lt;/code&gt;&lt;/strong&gt;: I added &lt;code&gt;react-markdown&lt;/code&gt; to parse and render the Markdown content from Dev.to articles.
&lt;/li&gt;
&lt;/ol&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Dependencies&lt;/strong&gt;
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;fetch&lt;/code&gt;&lt;/strong&gt;: Built-in JavaScript function for making API requests.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;react-markdown&lt;/code&gt;&lt;/strong&gt;: Library to render Markdown content as HTML.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;lucide-react&lt;/code&gt;&lt;/strong&gt;: For icons used in the UI (e.g., loading spinners or modal close buttons).
&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Section 2: Implementing the Dev.to API Integration&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Now, let’s dive into the code. The core of this implementation lies in fetching articles from the Dev.to API and displaying them in the portfolio.  &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Step 1: Fetching Articles from Dev.to API&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;The first step is to fetch your articles using the Dev.to API. I created a &lt;code&gt;fetchArticles&lt;/code&gt; function in &lt;code&gt;Blog.jsx&lt;/code&gt; to handle this.  &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Code Example&lt;/strong&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="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;fetchArticles&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`https://dev.to/api/articles?username=timadey`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
        &lt;span class="nf"&gt;setArticles&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &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="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Error fetching articles:&lt;/span&gt;&lt;span class="dl"&gt;'&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;finally&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nf"&gt;setLoading&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;From &lt;code&gt;useEffect&lt;/code&gt; callback in &lt;code&gt;src/components/Blog.jsx&lt;/code&gt;&lt;/em&gt;  &lt;/p&gt;

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

&lt;ul&gt;
&lt;li&gt;The &lt;code&gt;fetch&lt;/code&gt; function retrieves articles from &lt;code&gt;https://dev.to/api/articles?username=[your-username]&lt;/code&gt;. Replace &lt;code&gt;[your-username]&lt;/code&gt; with your Dev.to username.
&lt;/li&gt;
&lt;li&gt;The response is parsed as JSON and stored in the &lt;code&gt;articles&lt;/code&gt; state using &lt;code&gt;setArticles&lt;/code&gt;.
&lt;/li&gt;
&lt;li&gt;Error handling ensures the component remains robust, and the loading state is updated accordingly.
&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Step 2: Rendering Articles in the UI&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Once the articles are fetched, they’re rendered in a list format. Here’s a snippet of how I mapped over the &lt;code&gt;articles&lt;/code&gt; array:&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="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;articles&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;article&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="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="nx"&gt;key&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;article&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="nx"&gt;className&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;blog-card&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;h3&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;article&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;title&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/h3&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;article&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;description&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/p&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;onClick&lt;/span&gt;&lt;span class="o"&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;openModal&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;article&lt;/span&gt;&lt;span class="p"&gt;)}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Read&lt;/span&gt; &lt;span class="nx"&gt;More&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&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;&lt;strong&gt;Explanation&lt;/strong&gt;:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Each article is displayed as a card with its title, description, and a "Read More" button.
&lt;/li&gt;
&lt;li&gt;Clicking "Read More" opens the &lt;code&gt;BlogModal&lt;/code&gt; component, which fetches and displays the full article content.
&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Step 3: Displaying Full Article Content in a Modal&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;The &lt;code&gt;BlogModal.jsx&lt;/code&gt; component uses &lt;code&gt;react-markdown&lt;/code&gt; to render the article’s Markdown content:&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="nx"&gt;ReactMarkdown&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react-markdown&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;  

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;BlogModal&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;article&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;onClose&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="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="nx"&gt;className&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;modal&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;onClick&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;onClose&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Close&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;ReactMarkdown&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;article&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;body_markdown&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/ReactMarkdown&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&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;&lt;strong&gt;Explanation&lt;/strong&gt;:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;ReactMarkdown&lt;/code&gt; converts the &lt;code&gt;body_markdown&lt;/code&gt; field from the Dev.to API into rendered HTML.
&lt;/li&gt;
&lt;li&gt;The modal includes a close button to enhance user experience.
&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Section 3: Development Notes and Best Practices&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;While implementing this feature, I kept a few best practices in mind:  &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Error Handling&lt;/strong&gt;: Always include error handling in API calls to prevent the app from crashing.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Loading States&lt;/strong&gt;: Use a loading spinner or message to indicate when articles are being fetched.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Pagination&lt;/strong&gt;: If you have many articles, consider implementing pagination using Dev.to’s &lt;code&gt;page&lt;/code&gt; and &lt;code&gt;per_page&lt;/code&gt; query parameters.
&lt;/li&gt;
&lt;/ol&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Implementation Summary&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Adding a dynamic blog section to your React portfolio using the Dev.to API is simpler than you might think. By leveraging the API’s straightforward structure and combining it with React’s state management, you can create a seamless and maintainable solution.  &lt;/p&gt;

&lt;p&gt;Here’s a quick recap of the steps:  &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Fetch articles from the Dev.to API in &lt;code&gt;Blog.jsx&lt;/code&gt;.
&lt;/li&gt;
&lt;li&gt;Render the articles as cards in the UI.
&lt;/li&gt;
&lt;li&gt;Use &lt;code&gt;react-markdown&lt;/code&gt; to display full article content in a modal.
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;With this approach, you avoid the overhead of building a blog from scratch while still showcasing your writing directly in your portfolio. Give it a try—you’ll be surprised at how easy it is!  &lt;/p&gt;

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

</description>
      <category>portfolio</category>
      <category>devto</category>
    </item>
    <item>
      <title>Enriching Code Context with Git Diffs for Smarter Developer Tools</title>
      <dc:creator>Timothy Adeleke</dc:creator>
      <pubDate>Fri, 26 Dec 2025 14:23:12 +0000</pubDate>
      <link>https://forem.com/timadey/enriching-code-context-with-git-diffs-for-smarter-developer-tools-2850</link>
      <guid>https://forem.com/timadey/enriching-code-context-with-git-diffs-for-smarter-developer-tools-2850</guid>
      <description>&lt;p&gt;Ever wished your IDE could “remember” your recent changes and use them to help you code smarter, not harder? As developers, we’re constantly juggling context—what we changed, why we changed it, and how it fits into the larger codebase. In fast-paced or large projects, this context often slips through the cracks, leading to inefficiencies, bugs, or missed opportunities for optimisation.  &lt;/p&gt;

&lt;p&gt;Think about it: How many times have you forgotten the reasoning behind a recent change, only to revisit it later with a blank slate? Traditional tools treat code as static, ignoring the dynamic nature of development. But what if we could enrich our tools with Git diff context, making them more intuitive and proactive? Let’s explore how leveraging Git diffs can transform the way we code.  &lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;I. The Challenge: Bridging the Gap Between Code and Context&lt;/strong&gt;
&lt;/h3&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;The Problem: Static Tools in a Dynamic World&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;I encountered this problem while building &lt;strong&gt;&lt;a href="https://github.com/Timadey/codedraft" rel="noopener noreferrer"&gt;Codedraft&lt;/a&gt;&lt;/strong&gt;, an opensource VSCode extension that helps software engineers turn their coding learnings into blog drafts, helping them maintain a consistent technical writing habit.&lt;/p&gt;

&lt;p&gt;Most developer tools treat code as a snapshot in time. They lack awareness of &lt;em&gt;how&lt;/em&gt; the code evolved or &lt;em&gt;why&lt;/em&gt; certain changes were made. This disconnect leads to tools that feel out of touch with the developer’s workflow. For example, consider a tool that suggests refactorings without knowing what you’ve recently changed—it might propose changes you’ve already implemented or miss opportunities to align with your current work.  &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;The Technical Trade-off: Metadata vs. Diffs&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Initially, I thought Git metadata would solve this problem. After all, Git provides commit hashes, messages, and timestamps. But here’s the catch: metadata only tells you &lt;em&gt;that&lt;/em&gt; something changed, not &lt;em&gt;what&lt;/em&gt; changed.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;commit&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;repo&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getCommit&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;hash&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Returns metadata, not the diff&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This approach falls short because it lacks granularity. To build smarter tools, we need to understand the actual changes—the diffs—not just the high-level metadata.  &lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;II. The Solution: Leveraging Git Diffs for Richer Context&lt;/strong&gt;
&lt;/h3&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Approach: Fetching Diffs Directly&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;The key to bridging this gap is to fetch Git diffs directly. Diffs provide a detailed view of what changed, line by line, making them a goldmine for context-aware tools. To achieve this, I wrote a helper function that runs Git commands via subprocesses.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="nf"&gt;runGitCommand&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;args&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;[],&lt;/span&gt; &lt;span class="nx"&gt;cwd&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="nb"&gt;Promise&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Promise&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;reject&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="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;exec&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;child_process&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;command&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;`git &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;args&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;join&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt; &lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

        &lt;span class="nf"&gt;exec&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;command&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;cwd&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="na"&gt;error&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;any&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;stdout&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
                &lt;span class="nf"&gt;reject&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="k"&gt;return&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
            &lt;span class="p"&gt;}&lt;/span&gt;
            &lt;span class="nf"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;stdout&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;p&gt;This function allows us to execute Git commands programmatically, retrieving diffs for specific commits or ranges.  &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Application: Integrating Diffs into Developer Tools&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;With diffs in hand, we can enrich tools in countless ways. For example, consider a tool that generates learning notes from code changes. By including the diff context, the notes become more meaningful and actionable.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="nf"&gt;formatCaptureForPrompt&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;capture&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;CaptureItem&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;text&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;`### &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;capture&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;notes&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Learning Point&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;\n\n`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;capture&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;code&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;text&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="s2"&gt;`**File:** &lt;/span&gt;&lt;span class="se"&gt;\`&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;capture&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;code&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;filePath&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="se"&gt;\`&lt;/span&gt;&lt;span class="s2"&gt;\n`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;capture&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;context&lt;/span&gt;&lt;span class="p"&gt;?.&lt;/span&gt;&lt;span class="nx"&gt;functionName&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nx"&gt;text&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="s2"&gt;`**Function:** &lt;/span&gt;&lt;span class="se"&gt;\`&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;capture&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;context&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;functionName&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="se"&gt;\`&lt;/span&gt;&lt;span class="s2"&gt;\n`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="nx"&gt;text&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="s2"&gt;`\n&lt;/span&gt;&lt;span class="se"&gt;\`\`\`&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;capture&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;code&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;language&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;\n&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;capture&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;code&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;snippet&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;\n&lt;/span&gt;&lt;span class="se"&gt;\`\`\`&lt;/span&gt;&lt;span class="s2"&gt;\n\n`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="nx"&gt;text&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="s2"&gt;`**My notes:** &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;capture&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;notes&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;\n`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;capture&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;context&lt;/span&gt;&lt;span class="p"&gt;?.&lt;/span&gt;&lt;span class="nx"&gt;diff&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;text&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="s2"&gt;`\n**Git Diff Context:**\n&lt;/span&gt;&lt;span class="se"&gt;\`\`\`&lt;/span&gt;&lt;span class="s2"&gt;diff\n&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;capture&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;context&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;diff&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;substring&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;)}${&lt;/span&gt;&lt;span class="nx"&gt;capture&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;context&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;diff&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;1000&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="se"&gt;\n&lt;/span&gt;&lt;span class="s1"&gt;... [diff truncated]&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;''&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;\n&lt;/span&gt;&lt;span class="se"&gt;\`\`\`&lt;/span&gt;&lt;span class="s2"&gt;\n`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;text&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;Here, the diff is included as part of the context, providing a clear picture of what changed and why.  &lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;III. Real-World Impact: Smarter Tools, Happier Developers&lt;/strong&gt;
&lt;/h3&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Example Use Case: Context-Aware Code Reviews&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Imagine a code review tool that highlights not just the changes but also the context behind them. By integrating diffs, reviewers can see the evolution of the code, making it easier to understand the intent behind changes.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="nf"&gt;getCommitDiff&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;hash&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="nb"&gt;Promise&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kr"&gt;string&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;repo&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getRepository&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;repo&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;null&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;runGitCommand&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;show&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;hash&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="nx"&gt;repo&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;rootUri&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;fsPath&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`Git error (commit diff &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;hash&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;):`&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="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="kc"&gt;null&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;This function fetches the diff for a specific commit, enabling tools to display granular changes alongside code reviews.  &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;strong&gt;Beyond Code Reviews: Proactive Suggestions&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Diffs can also power proactive suggestions. For instance, a tool could detect patterns in recent changes and suggest refactorings or optimisations. By understanding the context of changes, these suggestions become more relevant and less intrusive.  &lt;/p&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;IV. Key Insights and Takeaways&lt;/strong&gt;
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Metadata Isn’t Enough:&lt;/strong&gt; While Git metadata is useful, it lacks the granularity needed for context-aware tools. Diffs provide the missing piece.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Subprocesses Are Your Friend:&lt;/strong&gt; Running Git commands via subprocesses is a straightforward way to fetch diffs programmatically.
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Context Is King:&lt;/strong&gt; Enriching tools with diff context makes them more intuitive and aligned with the developer’s workflow.
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;By leveraging Git diffs, we can build smarter, more proactive tools that feel like an extension of the developer’s mind. Whether it’s code reviews, learning tools, or refactoring suggestions, diff context bridges the gap between static code and dynamic development.  &lt;/p&gt;

&lt;p&gt;So, the next time you’re building a developer tool, ask yourself: &lt;em&gt;How can I use diffs to make this tool more context-aware?&lt;/em&gt; Your users—and your future self—will thank you.&lt;/p&gt;

</description>
      <category>git</category>
      <category>tooling</category>
      <category>extensions</category>
    </item>
  </channel>
</rss>
