<?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: Abidit Shrestha</title>
    <description>The latest articles on DEV Community by Abidit Shrestha (@abidit_shrestha_fefae4cee).</description>
    <link>https://dev.to/abidit_shrestha_fefae4cee</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%2F1511550%2F6f2d3000-d9fd-4884-be40-24d480279d1c.jpg</url>
      <title>DEV Community: Abidit Shrestha</title>
      <link>https://dev.to/abidit_shrestha_fefae4cee</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/abidit_shrestha_fefae4cee"/>
    <language>en</language>
    <item>
      <title>Building phi-guard-mcp: Catching PHI Leaks in AI-Generated Code</title>
      <dc:creator>Abidit Shrestha</dc:creator>
      <pubDate>Sun, 30 Aug 2026 16:15:28 +0000</pubDate>
      <link>https://dev.to/abidit_shrestha_fefae4cee/building-phi-guard-mcp-catching-phi-leaks-in-ai-generated-code-17m8</link>
      <guid>https://dev.to/abidit_shrestha_fefae4cee/building-phi-guard-mcp-catching-phi-leaks-in-ai-generated-code-17m8</guid>
      <description>&lt;h2&gt;
  
  
  The Problem Nobody's Watching
&lt;/h2&gt;

&lt;p&gt;Your AI coding agent just shipped a patient's diagnosis to OpenAI.&lt;/p&gt;

&lt;p&gt;The code worked. The tests passed. The PR got approved.&lt;/p&gt;

&lt;p&gt;Nobody noticed — because nothing was watching for it.&lt;/p&gt;

&lt;p&gt;This is a new class of mistake. Infrastructure scanners like Prowler check S3 bucket encryption, not whether your code interpolates &lt;code&gt;patient.name&lt;/code&gt; into a prompt. The FHIR MCPs help agents read clinical data — they don't check whether other code is leaking PHI into logs or analytics.&lt;/p&gt;

&lt;p&gt;The code is doing exactly what it was written to do. That's the problem.&lt;/p&gt;




&lt;h2&gt;
  
  
  What PHI Guard MCP Does
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;phi-guard-mcp&lt;/code&gt; is a local-first MCP server that catches PHI (protected health information) before it hits LLM calls, logs, or analytics events.&lt;/p&gt;

&lt;p&gt;It runs entirely on your machine over stdio. No network calls. No telemetry. No data ever leaves your environment.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Two tools:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;scan_code&lt;/code&gt; — Walks your repo and flags lines where a sensitive identifier (patient, diagnosis, mrn, ssn, dob) appears on the same line as a risky sink (openai, anthropic, console.log, logger, .track())&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;redact_suggest&lt;/code&gt; — Takes any raw text and returns a redacted version with PHI replaced by placeholders&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Example:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"text"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Patient John Doe (MRN-12345), DOB: 01/01/1980"&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;"redacted"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Patient [NAME] ([MRN]), [DOB]"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"detected"&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="p"&gt;{&lt;/span&gt;&lt;span class="nl"&gt;"type"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"mrn"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"value"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"MRN-12345"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"confidence"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mf"&gt;0.9&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="nl"&gt;"type"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"dob"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"value"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"01/01/1980"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"confidence"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mf"&gt;0.85&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="nl"&gt;"type"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"name"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"value"&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 Doe"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"confidence"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mf"&gt;0.8&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="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;
  
  
  What It Catches
&lt;/h2&gt;

&lt;p&gt;PHI Type    Confidence  Example Matches&lt;br&gt;
SSN 0.95    123-45-6789&lt;br&gt;
MRN 0.90    MRN-12345, MRN: 12345&lt;br&gt;
DOB 0.85    01/01/1980, born 3/14/75&lt;br&gt;
Name    0.80    Patient John Doe&lt;br&gt;
Phone   0.75    555-867-5309&lt;br&gt;
Email   0.70    &lt;a href="mailto:jane.roe@example.com"&gt;jane.roe@example.com&lt;/a&gt;&lt;br&gt;
The patterns are deliberately narrow. A false positive that trains someone to ignore the tool is worse than a missed match.&lt;/p&gt;

&lt;p&gt;Tested Against Real Leak Patterns&lt;br&gt;
6/6 planted leaks detected across 5 different sinks (OpenAI, Anthropic, Sentry, Winston, PostHog/analytics)&lt;/p&gt;

&lt;p&gt;0 false positives across 5 clean-code fixtures&lt;/p&gt;

&lt;p&gt;Scans .ts, .js, .tsx, .jsx, .py, .go&lt;/p&gt;

&lt;p&gt;Skips node_modules, dist, build, .next, .turbo, and dotfiles&lt;/p&gt;
&lt;h2&gt;
  
  
  What This Is Not
&lt;/h2&gt;

&lt;p&gt;Not a HIPAA certification or legal compliance guarantee — it's a linter-grade signal, not an audit&lt;/p&gt;

&lt;p&gt;Not a competitor to Prowler or AWS Config — those scan infrastructure, this reads source code&lt;/p&gt;

&lt;p&gt;Not a hosted service — it runs entirely on your machine, no BAA required&lt;/p&gt;
&lt;h2&gt;
  
  
  How to Use It
&lt;/h2&gt;

&lt;p&gt;Installation:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;-g&lt;/span&gt; phi-guard-mcp
With Claude Code: Add .mcp.json to your project root:
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"mcpServers"&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;"phi-guard"&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;"command"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"node"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"args"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s2"&gt;"/absolute/path/to/phi-guard-mcp/dist/index.js"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="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="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;Command Line:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;phi-guard-mcp
Then ask your AI agent:

&lt;span class="s2"&gt;"Scan this repo for PHI leaks in prompts and logs"&lt;/span&gt;

or

&lt;span class="s2"&gt;"Redact this text: 'Patient John Doe (MRN-12345) was admitted on 1980-01-01'"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Why I Built This
&lt;/h2&gt;

&lt;p&gt;This came from watching AI agents write code that ships patient data into prompts, logs, and analytics — with total confidence, because nothing was watching for it.&lt;/p&gt;

&lt;p&gt;The gap I saw was real: no existing tool catches this. The code works. Tests pass. PRs get approved. But patient.diagnosis just went to OpenAI.&lt;/p&gt;

&lt;p&gt;So I built the thing I wished existed.&lt;/p&gt;

&lt;h2&gt;
  
  
  Links
&lt;/h2&gt;

&lt;p&gt;GitHub: github.com/Abidit/phi-guard-mcp&lt;/p&gt;

&lt;p&gt;npm: npmjs.com/package/phi-guard-mcp&lt;/p&gt;

&lt;p&gt;MCP Registry: mcpservers.org/servers/abidit/phi-guard-mcp&lt;/p&gt;

&lt;p&gt;MIT licensed. Open source. Free to use, forever.&lt;/p&gt;

&lt;p&gt;Feedback welcome, especially if you're building in healthtech or working on AI safety.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>healthcare</category>
      <category>opensource</category>
      <category>mcp</category>
    </item>
    <item>
      <title>The bug I "fixed" that taught me more from being closed than merged</title>
      <dc:creator>Abidit Shrestha</dc:creator>
      <pubDate>Fri, 28 Aug 2026 01:25:18 +0000</pubDate>
      <link>https://dev.to/abidit_shrestha_fefae4cee/the-bug-i-fixed-that-taught-me-more-from-being-closed-than-merged-3p91</link>
      <guid>https://dev.to/abidit_shrestha_fefae4cee/the-bug-i-fixed-that-taught-me-more-from-being-closed-than-merged-3p91</guid>
      <description>&lt;p&gt;A few weeks ago I opened a PR on a large open-source design system to fix a contrast issue I'd spotted in dark mode — a text/background color pairing that failed WCAG AA. I patched it, added regression tests, and got an initial approval. Then the maintainer reversed course, and eventually the PR was closed outright. Here's what happened, and why I think it was the right call.&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%2Fvt7i7ndw0j16nnod3710.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%2Fvt7i7ndw0j16nnod3710.png" alt="Before and after contrast comparison — 4.27:1 failing WCAG AA versus 4.37 to 10.57:1 passing WCAG AA" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  The bug
&lt;/h3&gt;

&lt;p&gt;The component in question used &lt;code&gt;light-dark()&lt;/code&gt; set inline to switch colors between light and dark mode. In dark mode, the contrast ratio between the text and background token pairing was below the 4.5:1 threshold for WCAG AA. My fix bumped it into a 4.37–10.57:1 range depending on state — a clear improvement, and it got an initial approval.&lt;/p&gt;

&lt;h3&gt;
  
  
  Where it went sideways
&lt;/h3&gt;

&lt;p&gt;Before merging, the reviewer went back and actually traced the token pairing across the rest of the system — and found the same underlying tokens failed contrast in &lt;em&gt;several light-mode themes too&lt;/em&gt;, not just dark mode. A second component using the identical token pairing had the same latent bug.&lt;/p&gt;

&lt;p&gt;The problem: my fix lived inside one component (&lt;code&gt;Avatar.tsx&lt;/code&gt;). A &lt;code&gt;light-dark()&lt;/code&gt; call set at the component level can only ever resolve one branch per color scheme. It fixed the specific failure I'd noticed, but it structurally &lt;em&gt;couldn't&lt;/em&gt; reach the other failures, because they lived in other components consuming the same broken token pair. Patching one consumer left every other consumer of that token exactly as broken as before.&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%2F0fdabj4hilymejdljrzu.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%2F0fdabj4hilymejdljrzu.png" alt="Diagram showing one shared design token flowing into three components — Avatar.tsx, AvatarGroupOverflow.tsx, and Kbd.tsx — each inheriting the same contrast bug" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  The actual fix — and why it wasn't mine to make
&lt;/h3&gt;

&lt;p&gt;The reviewer's conclusion was that this needed to be fixed at the &lt;strong&gt;design token definition&lt;/strong&gt; itself, not in any individual component. That's the only place a fix propagates to every consumer and every theme at once, instead of playing whack-a-mole component by component.&lt;/p&gt;

&lt;p&gt;A few days later, the PR was formally closed with a note that color-token and palette changes are now being coordinated as owner-led accessibility work, rather than through parallel, uncoordinated implementation PRs from individual contributors — and pointed toward a tracking issue for the broader initiative.&lt;/p&gt;

&lt;p&gt;They also linked a separate, already-merged PR that added a lint rule forbidding &lt;code&gt;light-dark()&lt;/code&gt; in component source going forward — codifying the exact anti-pattern my PR had (accidentally) demonstrated.&lt;/p&gt;

&lt;h3&gt;
  
  
  What I took away from this
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;A locally correct fix can still be the wrong fix.&lt;/strong&gt; My patch genuinely improved contrast for the case I tested. It was still wrong, because it solved the instance instead of the root cause, and would have left the system with two different fixes to the same underlying problem living in two different places.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Look for the shape of the bug, not just the instance.&lt;/strong&gt; The real signal was asking "does anything else in this codebase depend on the same token pairing?" — which is a question about the system, not the component. That question is what turned a one-line fix into a systemic finding.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Getting your PR closed isn't the same as being wrong.&lt;/strong&gt; The maintainer was explicit that the &lt;em&gt;finding&lt;/em&gt; was correct and valuable — the fix itself was closed on architectural grounds, not because it was broken. Open source review, done well, is about protecting the health of the whole system even when it costs an individual contribution its merge.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;A closed PR can still be a good outcome.&lt;/strong&gt; The findings led to a lint rule preventing the anti-pattern going forward, and to color-token ownership being reorganized into a single coordinated effort instead of scattered fixes. That's a better long-term result than my one component getting a green checkmark.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;If you're contributing to a large open-source codebase for the first time: it's worth getting comfortable with the idea that "correct and closed" is a completely normal outcome, and often a sign the review process is doing exactly what it's supposed to.&lt;/p&gt;

</description>
      <category>a11y</category>
      <category>opensource</category>
      <category>css</category>
      <category>webdev</category>
    </item>
    <item>
      <title>I built the first eSewa and Khalti MCP servers — here's how</title>
      <dc:creator>Abidit Shrestha</dc:creator>
      <pubDate>Sun, 05 Apr 2026 15:13:21 +0000</pubDate>
      <link>https://dev.to/abidit_shrestha_fefae4cee/i-built-the-first-esewa-and-khalti-mcp-servers-heres-how-2d76</link>
      <guid>https://dev.to/abidit_shrestha_fefae4cee/i-built-the-first-esewa-and-khalti-mcp-servers-heres-how-2d76</guid>
      <description>&lt;p&gt;The Model Context Protocol (MCP) lets Claude AI interact with external tools and APIs. I just shipped the first MCP servers for Nepal's two biggest payment gateways: eSewa and Khalti.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why this matters
&lt;/h2&gt;

&lt;p&gt;Nepal's digital payment landscape is booming. eSewa has over 8 million users and dominates the market, while Khalti is the second-largest payment gateway. But until now, there was no way for Claude to interact with these systems programmatically. If you're building an AI-powered app that needs to process payments in Nepal, you were stuck writing custom integrations.&lt;/p&gt;

&lt;h2&gt;
  
  
  What these servers do
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;esewa-mcp&lt;/strong&gt; exposes three tools:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;esewa_initiate_payment&lt;/code&gt; – Start a transaction&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;esewa_verify_payment&lt;/code&gt; – Confirm a payment succeeded&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;esewa_get_transaction_status&lt;/code&gt; – Check payment status anytime&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;khalti-mcp&lt;/strong&gt; exposes three tools:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;khalti_initiate_payment&lt;/code&gt; – Create a payment request&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;khalti_lookup_payment&lt;/code&gt; – Retrieve payment details&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;khalti_verify_payment&lt;/code&gt; – Verify transaction completion&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Both work directly with the official APIs and sandbox environments for safe testing.&lt;/p&gt;

&lt;h2&gt;
  
  
  The interesting technical challenge: eSewa's HMAC signature
&lt;/h2&gt;

&lt;p&gt;Here's where it got tricky. eSewa uses HMAC-SHA256 signatures to authorize requests, but the fields &lt;strong&gt;must be signed in exact order&lt;/strong&gt;: &lt;code&gt;total_amount,transaction_uuid,product_code&lt;/code&gt;. Sign them out of order and the payment fails silently. This tight coupling between field order and cryptography meant I had to be surgical about how the signature is computed. Any deviation — even a typo in field names — breaks the whole flow.&lt;/p&gt;

&lt;h2&gt;
  
  
  Getting started
&lt;/h2&gt;

&lt;p&gt;Install either server with a single command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx &lt;span class="nt"&gt;-y&lt;/span&gt; esewa-mcp
npx &lt;span class="nt"&gt;-y&lt;/span&gt; khalti-mcp
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then add to Claude Desktop config:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"mcpServers"&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;"khalti"&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;"command"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"npx"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"args"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s2"&gt;"-y"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"khalti-mcp"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"env"&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;"KHALTI_SECRET_KEY"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"your_secret_key"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"KHALTI_ENVIRONMENT"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"sandbox"&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;"esewa"&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;"command"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"npx"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"args"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s2"&gt;"-y"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"esewa-mcp"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"env"&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;"ESEWA_MERCHANT_CODE"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"EPAYTEST"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"ESEWA_PRODUCT_CODE"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"EPAYTEST"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"ESEWA_SECRET_KEY"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"your_secret_key"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"ESEWA_ENVIRONMENT"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"sandbox"&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="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;Then just ask Claude naturally:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Initiate a Khalti payment for NPR 500, order ID invoice-001"&lt;/p&gt;

&lt;p&gt;"Verify eSewa transaction UUID abc-123"&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  A testing tip
&lt;/h2&gt;

&lt;p&gt;Both eSewa and Khalti provide sandbox environments with free test credentials — no real money involved. I built these servers to use sandbox by default so you can develop safely.&lt;/p&gt;

&lt;h2&gt;
  
  
  What's next
&lt;/h2&gt;

&lt;p&gt;These are production-ready v1.0.1. If you're building AI-powered commerce for Nepal, check the repo and open an issue.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;npm:&lt;/strong&gt; &lt;a href="https://www.npmjs.com/package/khalti-mcp" rel="noopener noreferrer"&gt;khalti-mcp&lt;/a&gt; · &lt;a href="https://www.npmjs.com/package/esewa-mcp" rel="noopener noreferrer"&gt;esewa-mcp&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;GitHub:&lt;/strong&gt; &lt;a href="https://github.com/Abidit/eSewa-Khalti-mcp" rel="noopener noreferrer"&gt;https://github.com/Abidit/eSewa-Khalti-mcp&lt;/a&gt;&lt;/p&gt;

</description>
      <category>claude</category>
      <category>mcp</category>
      <category>ai</category>
    </item>
    <item>
      <title>I'm a Senior Software Engineer. I Had No Business Writing Courses. I Did It Anyway.</title>
      <dc:creator>Abidit Shrestha</dc:creator>
      <pubDate>Wed, 25 Mar 2026 09:04:23 +0000</pubDate>
      <link>https://dev.to/abidit_shrestha_fefae4cee/im-a-senior-software-engineer-i-had-no-business-writing-courses-i-did-it-anyway-ih2</link>
      <guid>https://dev.to/abidit_shrestha_fefae4cee/im-a-senior-software-engineer-i-had-no-business-writing-courses-i-did-it-anyway-ih2</guid>
      <description>&lt;h2&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%2F42klvimwcyn5fs0evmk7.png" alt="Brick Breaker game built with vanilla JavaScript by Abidit Shrestha, running in a browser with a paddle, ball, and colored brick grid on a white canvas" width="800" height="599"&gt;
&lt;/h2&gt;

&lt;p&gt;Let me be upfront about something: I am not a teacher.&lt;/p&gt;

&lt;p&gt;I'm a senior software engineer. I write code for a living. I've shipped production systems, reviewed thousands of pull requests, and debugged things that had no right being as broken as they were. But explaining concepts to beginners, structuring a curriculum, deciding what order to teach things in — that is a completely different skill, and I had almost none of it when I started.&lt;/p&gt;

&lt;p&gt;I now have six published courses on Programiz, including a full JavaScript game development skill track. Here's the honest story of how that happened.&lt;/p&gt;




&lt;h2&gt;
  
  
  The opportunity I almost didn't take
&lt;/h2&gt;

&lt;p&gt;When Programiz approached me about building a JavaScript skill track, my first instinct was to say it wasn't really my thing. I'd written some small articles and blog posts over the years, but a full course? Multiple courses? That felt like someone else's job.&lt;/p&gt;

&lt;p&gt;I took it anyway.&lt;/p&gt;

&lt;p&gt;Not because I was confident. Because I was curious whether I could do something I'd never done before — and because I had tools available that didn't exist a few years ago.&lt;/p&gt;




&lt;h2&gt;
  
  
  How I actually built it
&lt;/h2&gt;

&lt;p&gt;I want to be honest about this part because I think a lot of people gloss over it: I used Cursor and Claude heavily throughout this process. Not to replace my thinking, but to do things I couldn't do efficiently on my own.&lt;/p&gt;

&lt;p&gt;Here's what that actually looked like:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Structuring the curriculum&lt;/strong&gt; — I'd describe what I wanted students to be able to do at the end, and use Claude to stress-test the sequencing. Does this concept need to come before that one? Is there a gap here? Having something to push back against is faster than staring at a blank page.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Building the reference code&lt;/strong&gt; — The Brick Breaker capstone project has a &lt;code&gt;Ball&lt;/code&gt; class, a &lt;code&gt;Paddle&lt;/code&gt; class, a &lt;code&gt;Brick&lt;/code&gt; class, a &lt;code&gt;Game&lt;/code&gt; class. Getting that code to a point where it was genuinely &lt;em&gt;teachable&lt;/em&gt; — clean variable names, strict separation between &lt;code&gt;update()&lt;/code&gt; and &lt;code&gt;draw()&lt;/code&gt;, no shortcuts that would confuse a beginner — took iteration. Cursor was open the entire time.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Drafting explanations&lt;/strong&gt; — Writing for beginners is harder than writing for peers. I'd draft an explanation, and use Claude to tell me where it assumed too much prior knowledge. Then I'd rewrite it.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Reviewing my own work&lt;/strong&gt; — This one surprised me the most. Having an outside read on a draft — even an AI one — catches things you stop seeing after the fifth revision.&lt;/p&gt;

&lt;p&gt;None of this felt like cheating. It felt like having a very patient, very fast collaborator who never got tired of my questions.&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%2Fg0atqp2yaybvimhg5ai9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg0atqp2yaybvimhg5ai9.png" alt="JavaScript Brick class from Brick Breaker course project by Abidit Shrestha,&lt;br&gt;
        showing the launch method with angle calculation" width="770" height="490"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Where I almost stopped
&lt;/h2&gt;

&lt;p&gt;About three weeks into the first course, I hit a wall.&lt;/p&gt;

&lt;p&gt;I was trying to write a comprehensive ES6 fundamentals module — arrow functions, destructuring, modules, iterators, the works. I wanted it to be complete. I wanted to cover everything. The review process destroyed me. Every pass surfaced new gaps, new things I hadn't explained well enough, new topics that felt incomplete without adding three more topics.&lt;/p&gt;

&lt;p&gt;I almost quit at that point. Not because the material was too hard, but because I was approaching it wrong.&lt;/p&gt;

&lt;p&gt;The shift that saved the project: I stopped trying to be complete and started asking a different question. &lt;em&gt;Which of these concepts actually shows up in the game we're building?&lt;/em&gt; If a concept didn't have a clear home in the Brick Breaker capstone, it didn't belong in the course. That constraint made every decision easier and every chapter tighter.&lt;/p&gt;

&lt;p&gt;The lesson I'd pass on to anyone trying something similar: &lt;strong&gt;plan in chunks, not in coverage&lt;/strong&gt;. Pick a concept, find two or three real places it gets used, teach it through those. Don't try to give a complete picture on the first pass. Completeness is the enemy of clarity.&lt;/p&gt;




&lt;h2&gt;
  
  
  What the track looks like now
&lt;/h2&gt;

&lt;h2&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%2Fl187p3kcj3pg98f8ryl2.png" alt="Build Games with Vanilla JS skill track on Programiz, authored by Abidit Shrestha, showing six JavaScript courses including Whack A Mole, Canvas Foundations, and Brick Breaker with JavaScript" width="800" height="511"&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Build Games with Vanilla JS&lt;/strong&gt; is live on Programiz as Skill Track 2. Six courses:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Game Logic with JavaScript&lt;/strong&gt; — variables, conditionals, functions, scope through a game-thinking lens&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Whack A Mole&lt;/strong&gt; — a DOM and events mini-project early, so students get a win before the harder content&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Modern JavaScript Essentials&lt;/strong&gt; — ES6 features placed &lt;em&gt;after&lt;/em&gt; the first mini-project, not before, so students have context for why they matter&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Canvas Foundations&lt;/strong&gt; — the &lt;code&gt;&amp;lt;canvas&amp;gt;&lt;/code&gt; API: drawing, animation loops, input, collision detection&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Brick Breaker with JavaScript&lt;/strong&gt; — the capstone where every concept from the track lands in one real project&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Rapid Build with Claude Code&lt;/strong&gt; — a standalone weekend course on building and deploying an app with AI tools&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The sequencing isn't accidental. Whack A Mole sits before the ES6 module because abstract syntax makes more sense after you've already built something. Canvas Foundations only teaches what shows up in Brick Breaker. Every decision was made by working backward from the capstone.&lt;/p&gt;




&lt;h2&gt;
  
  
  What I know now that I didn't know then
&lt;/h2&gt;

&lt;p&gt;Writing a course as a senior engineer is humbling in a specific way. The technical part is fine — I know JavaScript well. The hard part is that knowing something deeply and being able to &lt;em&gt;teach&lt;/em&gt; it are not the same skill at all.&lt;/p&gt;

&lt;p&gt;Teaching forced me to find the edges of my own understanding. If I couldn't explain &lt;em&gt;why&lt;/em&gt; the ball position needs to be corrected before the velocity reverses — not just that it does — I didn't actually understand it as well as I thought.&lt;/p&gt;

&lt;p&gt;I also learned that AI tools don't lower the bar for this kind of work. They raise what's possible for one person working alone. The courses exist in the form they do because I could iterate faster, get feedback faster, and catch mistakes faster than I could have otherwise. The judgment calls — what to include, what to cut, how to sequence — were still mine.&lt;/p&gt;




&lt;h2&gt;
  
  
  Why I'm writing this
&lt;/h2&gt;

&lt;p&gt;I'm not writing this to tell you AI makes everything easy. It doesn't.&lt;/p&gt;

&lt;p&gt;I'm writing this because I'm a senior engineer who grabbed an opportunity outside his comfort zone, used every tool available, got humbled by it, figured it out, and shipped something real. If that's the kind of person you want to follow — someone who moves toward hard things and works out how to do them — then stick around.&lt;/p&gt;

&lt;p&gt;There's more coming.&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%2Fy0crp0wnxv3z4m8yr362.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy0crp0wnxv3z4m8yr362.jpg" alt="Abidit Shrestha, senior software engineer and JavaScript course author at Programiz" width="800" height="1067"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Abidit Shrestha is a senior software engineer and course author at Programiz, where he builds JavaScript learning tracks. Follow him on &lt;a href="https://dev.to"&gt;Dev.to&lt;/a&gt; and &lt;a href="https://medium.com" rel="noopener noreferrer"&gt;Medium&lt;/a&gt; for more.&lt;/em&gt;&lt;/p&gt;




</description>
      <category>ai</category>
      <category>javascript</category>
      <category>webdev</category>
      <category>programming</category>
    </item>
    <item>
      <title>Discovery: The Hidden Bug Killing Learning Platforms</title>
      <dc:creator>Abidit Shrestha</dc:creator>
      <pubDate>Mon, 29 Dec 2025 14:12:01 +0000</pubDate>
      <link>https://dev.to/abidit_shrestha_fefae4cee/discovery-the-hidden-bug-killing-learning-platforms-2nik</link>
      <guid>https://dev.to/abidit_shrestha_fefae4cee/discovery-the-hidden-bug-killing-learning-platforms-2nik</guid>
      <description>&lt;p&gt;For a long time, we believed learners struggled because problems were hard.&lt;/p&gt;

&lt;p&gt;Turns out, many never even reached the problem.&lt;/p&gt;

&lt;p&gt;While working on Guided Projects at Programiz PRO, we started sitting in clarity sessions and talking directly to users. Not surveys. Not analytics. Real conversations.&lt;/p&gt;

&lt;p&gt;One pattern kept repeating:&lt;/p&gt;

&lt;p&gt;users weren’t stuck — they were &lt;strong&gt;lost&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;They didn’t ask for new features.&lt;/p&gt;

&lt;p&gt;They asked things like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;“Where do I start?”&lt;/li&gt;
&lt;li&gt;“What should I do next?”&lt;/li&gt;
&lt;li&gt;“Is this part of the course?”&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That’s when it became clear:&lt;/p&gt;

&lt;p&gt;learning friction often starts &lt;em&gt;before&lt;/em&gt; learning begins.&lt;/p&gt;

&lt;h3&gt;
  
  
  Features don’t matter if they’re invisible
&lt;/h3&gt;

&lt;p&gt;We had content.&lt;/p&gt;

&lt;p&gt;We had projects.&lt;/p&gt;

&lt;p&gt;We had structure.&lt;/p&gt;

&lt;p&gt;But poor discovery made them irrelevant.&lt;/p&gt;

&lt;p&gt;No amount of complexity or polish can fix that.&lt;/p&gt;

&lt;h3&gt;
  
  
  From assumptions to conversations
&lt;/h3&gt;

&lt;p&gt;Instead of guessing, we shifted focus:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;User interviews&lt;/li&gt;
&lt;li&gt;Clarity sessions&lt;/li&gt;
&lt;li&gt;Observing hesitation, not just clicks&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The insights were uncomfortable — and incredibly valuable.&lt;/p&gt;

&lt;h3&gt;
  
  
  What we changed
&lt;/h3&gt;

&lt;p&gt;Our focus moved from “adding more” to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Clearer entry points&lt;/li&gt;
&lt;li&gt;Stronger learning flow&lt;/li&gt;
&lt;li&gt;Reducing cognitive load early&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Because when users know &lt;em&gt;where&lt;/em&gt; to begin, they’re far more likely to finish.&lt;/p&gt;

&lt;h3&gt;
  
  
  The bigger lesson
&lt;/h3&gt;

&lt;p&gt;Learning platforms don’t fail because content is weak.&lt;/p&gt;

&lt;p&gt;They fail because the path isn’t obvious.&lt;/p&gt;

&lt;p&gt;And the only way to see that?&lt;/p&gt;

&lt;p&gt;Talk to users. Watch them struggle. Listen carefully.&lt;/p&gt;

&lt;p&gt;That shift has changed how we build — and how we think about learning.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>ai</category>
      <category>programming</category>
      <category>interview</category>
    </item>
    <item>
      <title>Turning Complex Algorithms into Interactive Visual Stories: My Journey</title>
      <dc:creator>Abidit Shrestha</dc:creator>
      <pubDate>Wed, 27 Aug 2025 14:58:08 +0000</pubDate>
      <link>https://dev.to/abidit_shrestha_fefae4cee/turning-complex-algorithms-into-interactive-visual-stories-my-journey-3l0j</link>
      <guid>https://dev.to/abidit_shrestha_fefae4cee/turning-complex-algorithms-into-interactive-visual-stories-my-journey-3l0j</guid>
      <description>&lt;p&gt;When I started working on algorithm visualizers at &lt;strong&gt;Programiz&lt;/strong&gt;, I didn’t think much about making them interactive. But after tackling a few problems, I realized: algorithms are &lt;strong&gt;stories&lt;/strong&gt;, and everyone learns better when they can see the story unfold.&lt;/p&gt;




&lt;h2&gt;
  
  
  🎬 Act I: The Stack That Stunned a Professor
&lt;/h2&gt;

&lt;p&gt;The easy part was coding a rough version. The &lt;em&gt;hard&lt;/em&gt; part? Polishing it until anyone could follow the story just by watching.&lt;/p&gt;

&lt;p&gt;When we finally showed it to a university professor (a Programiz customer), his reaction was priceless.  &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“This makes debugging and teaching so much easier. You can pause, play, and see exactly what’s happening in every step.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;That’s when it hit me: &lt;strong&gt;visualization isn’t about code. It’s about clarity.&lt;/strong&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  🎬 Act II: The Queue That Fooled My Brain
&lt;/h2&gt;

&lt;p&gt;Queues are simple, right? FIFO. Done. No visualizer needed.&lt;/p&gt;

&lt;p&gt;Wrong.&lt;/p&gt;

&lt;p&gt;I made queue elements &lt;strong&gt;slide from right to left&lt;/strong&gt; (like an array on wheels). Suddenly, everyone &lt;em&gt;got it&lt;/em&gt; without me saying a word.&lt;/p&gt;

&lt;p&gt;The tricky bit was &lt;strong&gt;dequeue&lt;/strong&gt;. Animations don’t like disappearing acts. It was Stack Pop all over again. After some wrestling with it, I got the motion flowing.&lt;/p&gt;

&lt;p&gt;When I demoed it, the professor pointed out something fascinating:  &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“This left-to-right flow actually matches how our brain tracks objects naturally.”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Turns out, even human cognition agreed with FIFO. 🧠&lt;/p&gt;




&lt;h2&gt;
  
  
  🎬 Act III: Knapsack — My First Big Heist
&lt;/h2&gt;

&lt;p&gt;The infamous &lt;strong&gt;0/1 Knapsack Problem.&lt;/strong&gt; Students fear it. Developers avoid it.&lt;/p&gt;

&lt;p&gt;I built a &lt;strong&gt;Knapsack Visualizer&lt;/strong&gt; that doesn’t just solve it but lets you:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Step through decision-making at each subproblem
&lt;/li&gt;
&lt;li&gt;Watch dynamic programming build the table live
&lt;/li&gt;
&lt;li&gt;Actually see &lt;em&gt;optimal substructure&lt;/em&gt; and &lt;em&gt;overlapping subproblems&lt;/em&gt; in action&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This project taught me: &lt;em&gt;building is easy, polishing is hard.&lt;/em&gt;&lt;br&gt;&lt;br&gt;
Animations, UI, logic, storytelling — I had to touch every piece.&lt;/p&gt;

&lt;p&gt;But the final result? A tool I wish I had when I first learned DP.&lt;/p&gt;




&lt;h2&gt;
  
  
  🎬 Act IV: Coin Change in 3 Days
&lt;/h2&gt;

&lt;p&gt;And then came my fastest build: the &lt;strong&gt;Coin Change Visualizer&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;From scratch to production in &lt;strong&gt;just 3 working days.&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
This wasn’t speed for speed’s sake. It was proof that with the right process, clarity, and focus, even complex algorithms can be made intuitive.&lt;/p&gt;

&lt;p&gt;Tested on all ages — from students to professors — it clicked instantly. No blank stares. No groans. Just “aha” moments.&lt;/p&gt;




&lt;h2&gt;
  
  
  🌍 Why This Matters
&lt;/h2&gt;

&lt;p&gt;Algorithms don’t have to be intimidating walls of logic.&lt;br&gt;&lt;br&gt;
With the right design and engineering, they become &lt;strong&gt;stories people can watch, follow, and remember.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;That’s what we’re building at &lt;strong&gt;Programiz&lt;/strong&gt;: tools that lower barriers, make learning intuitive, and give anyone the confidence to say, &lt;em&gt;“I understand this.”&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;For me personally, this journey wasn’t just engineering — it was proof of what happens when creativity and execution meet.&lt;/p&gt;




&lt;h2&gt;
  
  
  🚀 Closing Thoughts
&lt;/h2&gt;

&lt;p&gt;If you’ve known me, maybe you didn’t expect me to go this deep into building algorithmic visualizers. Surprise 😉&lt;/p&gt;

&lt;p&gt;If you didn’t know me before, now you do:&lt;br&gt;&lt;br&gt;
I build things that turn complexity into clarity.&lt;br&gt;&lt;br&gt;
I make algorithms human.&lt;br&gt;&lt;br&gt;
And I’m just getting started.&lt;/p&gt;

&lt;p&gt;🔗 Try one of the visualizers here: &lt;a href="https://app.programiz.pro/code-visualizer/dsa?type=knapsack" rel="noopener noreferrer"&gt;KnapSack Visualizer&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;💬 I’d love to hear your thoughts:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;What algorithm should I tackle next?
&lt;/li&gt;
&lt;li&gt;What’s the one concept you wish had a visualizer when you first learned it?
&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  DataStructures #DynamicProgramming #Visualization #SoftwareEngineering #EdTech #Programiz #OpenToWork #NepalDevelopers
&lt;/h1&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>beginners</category>
      <category>career</category>
    </item>
  </channel>
</rss>
