DEV Community: Michael Amachree The latest articles on DEV Community by Michael Amachree (@dev_michael). https://dev.to/dev_michael 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%2F595000%2Fed5ecff4-53c2-4e77-b328-c4e0709b4657.jpg DEV Community: Michael Amachree https://dev.to/dev_michael en DocShark: a local-first documentation MCP server for AI Michael Amachree Thu, 19 Mar 2026 10:39:23 +0000 https://dev.to/dev_michael/docshark-a-local-first-documentation-mcp-server-for-ai-ia9 https://dev.to/dev_michael/docshark-a-local-first-documentation-mcp-server-for-ai-ia9 <h2> DocShark: documentation for AI, served locally </h2> <p>Most AI tools are only as good as the documentation they can reach.<br> When the docs are spread across websites, rendered client-side, or buried behind a maze of pages, the context you get back is often incomplete or stale.</p> <p>That is the problem DocShark is built to solve.</p> <p>DocShark is a fast, local-first <a href="proxy.php?url=https://modelcontextprotocol.io/" rel="noopener noreferrer">Model Context Protocol</a> server that scrapes, indexes, and serves documentation from any website. It turns documentation into a local knowledge base that your AI tools can search instantly, without depending on a cloud service or an API key.</p> <p>Live site:<br> </p> <div class="crayons-card c-embed text-styles text-styles--secondary"> <div class="c-embed__content"> <div class="c-embed__body flex items-center justify-between"> <a href="proxy.php?url=https://dsharkd.svelte-apps.me/" rel="noopener noreferrer" class="c-link fw-bold flex items-center"> <span class="mr-2">dsharkd.svelte-apps.me</span> </a> </div> </div> </div> <p>GitHub: <a href="proxy.php?url=https://github.com/Michael-Obele/docshark" rel="noopener noreferrer">https://github.com/Michael-Obele/docshark</a></p> <h2> What DocShark does </h2> <p>At a high level, DocShark does four things well:</p> <ol> <li>Crawls documentation websites.</li> <li>Extracts the useful content and converts it to clean Markdown.</li> <li>Breaks pages into context-aware chunks.</li> <li>Makes the result searchable through MCP and the CLI.</li> </ol> <p>The result is a local documentation layer that works with coding agents, desktop clients, and terminal workflows.</p> <h2> Why I built it </h2> <p>There are already tools that can fetch docs, but many of them only work for a narrow source type or rely on heavier infrastructure.</p> <p>DocShark focuses on a simpler model:</p> <ul> <li>documentation websites, not just GitHub repos</li> <li>local storage, not a remote index</li> <li>SQLite FTS5, not a hosted search backend</li> <li>Bun-first tooling, not a large runtime stack</li> <li>MCP compatibility, so AI clients can use it directly</li> </ul> <p>That combination makes it useful both for individual developers and for people building agent workflows.</p> <h2> How DocShark compares </h2> <p>Context7 is the obvious comparison point because it also solves the "AI needs current documentation" problem. It is strong when you want a hosted documentation service that injects up-to-date library docs and examples into your prompt.</p> <p>DocShark takes a different path. It is better when you want to index real documentation websites, keep everything local, avoid API keys and rate limits, and use one tool for both MCP and CLI workflows.</p> <p>Here is the practical tradeoff:</p> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Tool</th> <th>Strengths</th> <th>Limitations</th> <th>Where DocShark wins</th> </tr> </thead> <tbody> <tr> <td>Context7</td> <td>Fresh version-specific docs, code examples, MCP integration, polished onboarding</td> <td>Cloud service, API key/rate-limit considerations, focused on supported libraries rather than arbitrary websites</td> <td>DocShark is better if you want a local-first index for any documentation site and no external dependency</td> </tr> <tr> <td>Docfork</td> <td>Broad library coverage, up-to-date docs, open source, easy access to software library docs</td> <td>Optimized for library documentation rather than arbitrary rendered documentation sites</td> <td>DocShark is better for crawling and indexing any docs website, including custom or rendered docs</td> </tr> <tr> <td>Deepcon</td> <td>Strong documentation retrieval for AI workflows, cloud-hosted convenience</td> <td>More service-oriented than local-first, and it is narrower in how you manage your own source set</td> <td>DocShark is better if you want to own the index and control exactly what gets crawled and stored</td> </tr> <tr> <td>GitMCP / GitHub repo tools</td> <td>Great for repository-centric docs and code browsing</td> <td>Best when the source of truth lives in GitHub, not when the docs are published on a separate site</td> <td>DocShark is better for public docs sites, rendered pages, and documentation that is not tied to one repo</td> </tr> <tr> <td>Per-library MCP servers</td> <td>Very targeted, often simple to set up for one project</td> <td>They do not scale well when you need to switch between many libraries</td> <td>DocShark is better as a single general-purpose server for multiple sources</td> </tr> </tbody> </table></div> <p>If you want the shortest summary: Context7 is a strong hosted documentation service, but DocShark is the better alternative for local-first workflows, broader website coverage, and users who want to keep the whole documentation layer under their control.</p> <h2> Core features </h2> <div class="crayons-card c-embed"> <h3> Any documentation site </h3> <p>DocShark is not limited to source repositories. It can crawl public documentation sites and index their rendered content, which makes it useful for modern docs that are built from multiple routes, dynamic pages, or generated content.</p> <h3> Smart extraction </h3> <p>The scraper is designed to pull out the main content and discard the noise. Navigation, sidebars, and other non-essential layout elements are removed so the indexed result is easier for an AI assistant to use.</p> <h3> Semantic chunking </h3> <p>Pages are split by heading structure so the search results preserve context. That matters because a search result is only useful if it still knows where it came from in the document.</p> <h3> SQLite + FTS5 search </h3> <p>DocShark uses SQLite with FTS5 for full-text search, which keeps the entire experience local and fast.</p> <p>That gives you:</p> <ul> <li>instant keyword search</li> <li>offline access once content is indexed</li> <li>no external search provider</li> <li>no dependency on cloud APIs</li> </ul> <h3> JS-rendered site support </h3> <p>Many docs sites are not simple static HTML pages.<br> DocShark supports rendered documentation sites, so it can work with sites that rely on JavaScript for content delivery.</p> <h3> Polite crawling </h3> <p>The crawler respects site structure and includes rate limiting and robots-aware behavior so it is safer to use against public documentation sites.</p> <h3> MCP server + CLI </h3> <p>DocShark exposes the same knowledge base through both an MCP server and a Bun-first CLI. That gives you two ways to work:</p> <ul> <li>agent integrations for AI tools</li> <li>direct terminal commands for indexing, searching, and maintenance </li> </ul> </div> <h2> The workflow </h2> <p>Using DocShark usually looks like this:</p> <h3> 1. Add a documentation site </h3> <p>Point DocShark at a docs URL to begin crawling:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>bunx docshark add https://svelte.dev/docs </code></pre> </div> <h3> 2. Search the indexed content </h3> <p>Once the content is indexed, you can search for the exact topic you need.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>bunx docshark search <span class="s2">"query syntax"</span> </code></pre> </div> <h3> 3. Connect your AI tool </h3> <p>Because DocShark speaks MCP, you can connect it to compatible clients and let the assistant query your documentation library directly.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight json"><code><span class="p">{</span><span class="w"> </span><span class="nl">"mcpServers"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nl">"docshark"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nl">"command"</span><span class="p">:</span><span class="w"> </span><span class="s2">"bunx"</span><span class="p">,</span><span class="w"> </span><span class="nl">"args"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">"-y"</span><span class="p">,</span><span class="w"> </span><span class="s2">"docshark"</span><span class="p">,</span><span class="w"> </span><span class="s2">"start"</span><span class="p">,</span><span class="w"> </span><span class="s2">"--stdio"</span><span class="p">]</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="p">}</span><span class="w"> </span></code></pre> </div> <h2> CLI features </h2> <p>DocShark includes a practical set of commands for day-to-day use:</p> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Command</th> <th>What it does</th> </tr> </thead> <tbody> <tr> <td><code>start</code></td> <td>Runs the MCP server in HTTP or STDIO mode</td> </tr> <tr> <td><code>add</code></td> <td>Adds a new documentation source and starts crawling</td> </tr> <tr> <td><code>rename</code></td> <td>Renames an existing library without changing content</td> </tr> <tr> <td><code>search</code></td> <td>Searches the indexed documentation</td> </tr> <tr> <td><code>list</code></td> <td>Lists indexed libraries and their status</td> </tr> <tr> <td><code>refresh</code></td> <td>Re-crawls an existing library</td> </tr> <tr> <td><code>remove</code></td> <td>Deletes a library and its indexed content</td> </tr> <tr> <td><code>get</code></td> <td>Returns the full markdown content for a page</td> </tr> <tr> <td><code>info</code></td> <td>Shows details and indexed pages for a library</td> </tr> <tr> <td><code>update</code></td> <td>Checks for or installs a newer Bun release</td> </tr> </tbody> </table></div> <p>That command surface makes the project useful even if you never connect it to an AI client.</p> <h2> MCP tools </h2> <p>On the protocol side, DocShark exposes a compact but useful toolset:</p> <ul> <li> <code>manage_library</code> to add, rename, refresh, inspect, or remove a library</li> <li> <code>search_docs</code> to search across indexed content</li> <li> <code>list_libraries</code> to inspect what is available</li> <li> <code>get_doc_page</code> to retrieve a full page in markdown form</li> </ul> <p>Those tools are designed to map naturally to how people actually work with documentation.</p> <h2> What is inside the stack </h2> <p>DocShark keeps the stack intentionally small:</p> <ul> <li>Bun for runtime and CLI execution</li> <li>SQLite for persistence</li> <li>FTS5 for search</li> <li>Readability.js for extracting the main content</li> <li>Turndown with GFM support for Markdown conversion</li> <li>Valibot for validation</li> <li>CAC for the CLI parser and command dispatch</li> <li>TMCP for the protocol server</li> <li>A shared library service that powers both the CLI and MCP server</li> </ul> <p>The current MCP surface is intentionally compact:</p> <ul> <li> <code>manage_library</code> for add, rename, refresh, inspect, and remove workflows</li> <li> <code>search_docs</code> for ranked search</li> <li> <code>list_libraries</code> for discovery</li> <li> <code>get_doc_page</code> for full-page retrieval</li> </ul> <p>That choice keeps the project local, fast, and easier to reason about than a larger server stack.</p> <h2> Who it is for </h2> <p>DocShark is a good fit if you:</p> <ul> <li>use AI coding assistants regularly</li> <li>want documentation access inside your editor or terminal</li> <li>work with documentation sites that are not simple markdown repos</li> <li>prefer local tools over hosted indexing services</li> <li>want one general-purpose MCP server instead of many per-library integrations</li> </ul> <h2> Try it out </h2> <p>If you want to see the project in action, open the live site and source repo above.</p> <p><a href="proxy.php?url=https://github.com/Michael-Obele/docshark" class="ltag_cta ltag_cta--branded" rel="noopener noreferrer">Star DocShark on GitHub</a> </p> <h2> Closing thought </h2> <p>DocShark is a small idea with a practical goal: make documentation available where AI tools already work, without handing your context over to a cloud service.</p> <p>If you spend time jumping between docs tabs, terminal commands, and assistant prompts, it is the kind of tool that quietly removes friction from the whole workflow.</p> bunjs typescript opensource ai What Your AI Chat History Says About Your Love Life (A Valentine’s Roast) Michael Amachree Sat, 14 Feb 2026 22:40:34 +0000 https://dev.to/dev_michael/what-your-ai-chat-history-says-about-your-love-life-a-valentines-roast-o6d https://dev.to/dev_michael/what-your-ai-chat-history-says-about-your-love-life-a-valentines-roast-o6d <p>It’s Valentine’s Day. The air is filled with the scent of roses, expensive chocolates, and the faint ozone smell of servers overheating.</p> <p>While everyone else is out having candlelit dinners, some of us are right here, staring at a blinking cursor, asking a Large Language Model why our CSS grid isn't centering. But have you ever stopped to think that your relationship with your AI might be a mirror for your actual romantic life?</p> <p>I took a look at the most common "AI conversation archetypes" among developers. Find your chat style below, and accept your diagnosis.</p> <h3> 1. The "Fix This Immediately" Typer </h3> <p><strong>The Logs:</strong></p> <blockquote> <p><em>"Error: undefined is not a function. Fix it."</em><br> <em>"Still broken. Try again."</em><br> <em>"Why did you import a library I don't have? REFOCUS."</em></p> </blockquote> <p><strong>The Diagnosis:</strong> <strong>The Toxic Ex.</strong><br> You don't want a partner; you want a miracle worker who can read your mind without you communicating your needs. You provide zero context, demand immediate results, and threaten to switch to a different model the second things get difficult. In relationships, you’re probably the one who says "I'm fine" when you are absolutely, cataclysmically <em>not</em> fine, and then gets mad when your partner doesn't guess why.</p> <p><strong>Prescription:</strong> touch grass (or at least add a "please").</p> <h3> 2. The Over-Explainer </h3> <p><strong>The Logs:</strong></p> <blockquote> <p><em>"Hi! Hope you're having a good processing cycle. So, I have this React component—it's a button, but not just any button, it represents the existential dread of the user. I want it to be blue, but like, a sad blue? Here is the entire history of the project since 2019 for context..."</em></p> </blockquote> <p><strong>The Diagnosis:</strong> <strong>The Stage 5 Clinger.</strong><br> You pour your heart out. You treat every prompt like a first date where you simply <em>must</em> explain your entire childhood trauma before the appetizers arrive. You crave deep connection and context, but you’re mostly just exhausting the token limit. In love, you’re sending 14-paragraph texts at 2 AM asking "What are we?" after one coffee date.</p> <p><strong>Prescription:</strong> Learn to summarize. Your AI (and your date) doesn't need to know about the legacy code from three years ago.</p> <h3> 3. The "Just Copy-Paste" trust fall </h3> <p><strong>The Logs:</strong></p> <blockquote> <p><em>"Write me a full auth system in Go."</em><br> <em>(User copies code without reading it)</em><br> <em>(User deploys to production)</em><br> <em>(Production crashes)</em><br> <em>"Why did you do this to me??"</em></p> </blockquote> <p><strong>The Diagnosis:</strong> <strong>The Hopeless Romantic.</strong><br> You fall in love fast and hard. You trust blindly. You see a snippet of code that looks vaguely correct, and you’re already planning the wedding (deployment). You ignore all the red flags (security vulnerabilities) because you just want it to <em>work</em> so bad. When it inevitably breaks your heart, you blame the universe instead of your lack of unit tests.</p> <p><strong>Prescription:</strong> Code review is a love language. Use it.</p> <h3> 4. The Gaslighter </h3> <p><strong>The Logs:</strong></p> <blockquote> <p><em>"Are you sure that's the syntax? Pretty sure it's not."</em><br> <em>"I think you're hallucinating. That library doesn't exist."</em><br> <em>(AI apologizes)</em><br> <em>"Actually, wait, you were right. But you should have been more confident."</em></p> </blockquote> <p><strong>The Diagnosis:</strong> <strong>The "It’s Complicated."</strong><br> You enjoy the power dynamic. You like testing boundaries. You don't actually want the answer; you want to see if you can trick the other party into slipping up. This is a relationship built on intellectual one-upmanship. It’s exhausting, it’s petty, and frankly, it’s why you’re spending Valentine's Day arguing with a non-sentient neural network about the efficacy of <code>var</code> vs <code>let</code>.</p> <p><strong>Prescription:</strong> Admit when you're wrong. It’s sexy.</p> <h3> 5. The "Prompt Engineer" Perfectionist </h3> <p><strong>The Logs:</strong></p> <blockquote> <p><em>"Act as a senior Rust engineer with 20 years of experience, a PhD in CompSci, and a penchant for dry humor. Analyze this function using the Socratic method..."</em></p> </blockquote> <p><strong>The Diagnosis:</strong> <strong>The Checklist Dater.</strong><br> You have a list of requirements for a partner that is longer than a webpack config file. You don't want a connection; you want a customized build. You spend more time tweaking your dating profile (prompt) than actually going on dates (coding). You are paralyzed by the idea that there might be a <em>slightly better</em> optimization out there.</p> <p><strong>Prescription:</strong> Sometimes <code>npm install</code> is good enough. Perfect is the enemy of "shipped."</p> <h3> So, who is your Valentine? </h3> <p>Whether you're treating your AI like a therapist, a junior dev, or a magical oracle, remember: at least the AI replies instantly and never judges you for eating pizza over the sink at 3 AM.</p> <p>Happy Valentine's Day, devs. May your commits be clean, your tests pass, and your deployment pipelines remain green. ❤️</p> watercooler humor productivity discuss Day 12: The Grand Finale & New App Launch! (Countdown Timer) Michael Amachree Wed, 31 Dec 2025 19:41:28 +0000 https://dev.to/dev_michael/day-12-the-grand-finale-new-app-launch-countdown-timer-4lfg https://dev.to/dev_michael/day-12-the-grand-finale-new-app-launch-countdown-timer-4lfg <p>🎄 <strong>Day 12 of 12 Days of Svelte Apps</strong> 🎄</p> <p>We made it! To celebrate the finale, we are launching a brand new mini-app today.</p> <p>🎁 <strong>Presenting: The Countdown Timer</strong></p> <p><strong>🔗 Start counting:</strong> <a href="proxy.php?url=https://svelte-apps.me/apps/countdown-timer" rel="noopener noreferrer">https://svelte-apps.me/apps/countdown-timer</a></p> <h2> Why we love countdowns </h2> <p>Did you know the first crowd countdown (in Times Square/NYC) only started in 1979? It's a surprisingly modern tradition.</p> <p>We love them because they mark a "genesis moment"—when time resets and anything feels possible.</p> <h2> Features </h2> <p>This new app lets you:</p> <ul> <li>Set a target date and time</li> <li>See a live, ticking breakdown of Days, Hours, Minutes, and Seconds</li> <li>Enjoy a distraction-free, beautiful interface</li> </ul> <h2> Thank You! </h2> <p>Thank you for following along with this 12-day series. We've explored everything from budget trackers to text summarizers.</p> <p>The Svelte MiniApps collection is open source and growing. If you want to contribute in 2025, come join us on GitHub!</p> <p><strong>Happy Holidays and a Happy New Year!</strong> 🥂</p> svelte sveltekit newyear launch Day 11: New Year, New Security (Password Generator) Michael Amachree Wed, 31 Dec 2025 19:40:03 +0000 https://dev.to/dev_michael/day-11-new-year-new-security-password-generator-1hah https://dev.to/dev_michael/day-11-new-year-new-security-password-generator-1hah <p>It’s <strong>Day 11</strong> of <strong>12 Days of Svelte Apps</strong> 🎄</p> <p>As we approach the New Year, it's the perfect time for a "Digital Deep Clean".</p> <p>Verify your backups, unsubscribe from spam, and <strong>update your weak passwords</strong>.</p> <p><strong>Fact:</strong> "123456", "password", and "admin" are still the most leaked passwords in 2024.</p> <p>Today's app: <strong>Random Password Generator</strong>.</p> <p><strong>🔗 Generate a key:</strong> <a href="proxy.php?url=https://svelte-apps.me/apps/random-password-generator" rel="noopener noreferrer">https://svelte-apps.me/apps/random-password-generator</a><br> <strong>💻 View the code:</strong> <a href="proxy.php?url=https://github.com/Michael-Obele/Svelte-MiniApps/tree/main/src/routes/apps/(app)/random-password-generator" rel="noopener noreferrer">https://github.com/Michael-Obele/Svelte-MiniApps/tree/main/src/routes/apps/(app)/random-password-generator</a></p> <h2> Why use this over a server-side tool? </h2> <p><strong>Privacy.</strong> </p> <p>This app runs entirely in your browser. The passwords generated never leave your device. There is no API call involved in the generation logic.</p> <h2> Features </h2> <ul> <li> <strong>Length Control</strong>: Go beyond 8 characters. Try 20+.</li> <li> <strong>Character Sets</strong>: Toggle symbols, numbers, upper/lowercase.</li> <li> <strong>One-click Copy</strong>: Grab it and paste it into your password manager.</li> </ul> <p>Start 2025 secure.</p> security svelte privacy webdev Day 10: Visualize Your 2024 Code Journey (GitHub Tracker) Michael Amachree Wed, 31 Dec 2025 19:38:57 +0000 https://dev.to/dev_michael/day-10-visualize-your-2024-code-journey-github-tracker-29k9 https://dev.to/dev_michael/day-10-visualize-your-2024-code-journey-github-tracker-29k9 <p>It’s <strong>Day 10</strong> of <strong>12 Days of Svelte Apps</strong> 🎄</p> <p>The end of the year is a time for reflection. For developers, that often means looking at our contribution graphs.</p> <p>Today's app is the <strong>GitHub Contribution Tracker</strong>, a tool to visualize and celebrate your open source activity.</p> <p><strong>🔗 Create your summary:</strong> <a href="proxy.php?url=https://svelte-apps.me/apps/github-contribution-tracker" rel="noopener noreferrer">https://svelte-apps.me/apps/github-contribution-tracker</a><br> <strong>💻 View the code:</strong> <a href="proxy.php?url=https://github.com/Michael-Obele/Svelte-MiniApps/tree/main/src/routes/apps/(app)/github-contribution-tracker" rel="noopener noreferrer">https://github.com/Michael-Obele/Svelte-MiniApps/tree/main/src/routes/apps/(app)/github-contribution-tracker</a></p> <h2> More Than Green Squares </h2> <p>While GitHub's profile graph is iconic, sometimes you want focused data:</p> <ul> <li>What was my longest streak?</li> <li>How many total contributions did I make?</li> <li>Which repos got the most love?</li> </ul> <h2> Built with SvelteKit </h2> <p>This app demonstrates fetching data from the GitHub GraphQL API server-side and rendering visual components with Svelte. It handles authentication and data visualization seamlessly.</p> <p>Share your stats in the comments! 👇</p> github svelte yearincode opensource Day 9: Smart Holiday Shopping & Travel (Currency Converter) Michael Amachree Wed, 31 Dec 2025 19:37:37 +0000 https://dev.to/dev_michael/day-9-smart-holiday-shopping-travel-currency-converter-dmb https://dev.to/dev_michael/day-9-smart-holiday-shopping-travel-currency-converter-dmb <p>It’s <strong>Day 9</strong> of <strong>12 Days of Svelte Apps</strong> 🎄</p> <p>Shopping globally for gifts? Planning a winter getaway?</p> <p>Don't guess with your money. Today's app is the <strong>Currency Converter</strong>.</p> <p><strong>🔗 Try it live:</strong> <a href="proxy.php?url=https://svelte-apps.me/apps/currency-converter" rel="noopener noreferrer">https://svelte-apps.me/apps/currency-converter</a><br> <strong>💻 View the code:</strong> <a href="proxy.php?url=https://github.com/Michael-Obele/Svelte-MiniApps/tree/main/src/routes/apps/(app)/currency-converter" rel="noopener noreferrer">https://github.com/Michael-Obele/Svelte-MiniApps/tree/main/src/routes/apps/(app)/currency-converter</a></p> <h2> real-time Rates </h2> <p>We hook into live exchange rate APIs to ensure you're getting current data, not last month's numbers. </p> <h2> Features </h2> <ul> <li> <strong>150+ Currencies</strong>: From AUD to ZAR.</li> <li> <strong>Instant Calculation</strong>: Reactivity in Svelte makes conversions feel immediate.</li> <li> <strong>Reverse Mode</strong>: Easily swap source and target currencies.</li> </ul> <p>Save your budget this holiday season by knowing exactly what you're spending.</p> svelte sveltekit travel opensource Day 8: Recipe Conversions Without the Panic (Unit Converter) Michael Amachree Wed, 31 Dec 2025 17:55:11 +0000 https://dev.to/dev_michael/day-8-recipe-conversions-without-the-panic-unit-converter-2hb6 https://dev.to/dev_michael/day-8-recipe-conversions-without-the-panic-unit-converter-2hb6 <p>It’s <strong>Day 8</strong> of <strong>12 Days of Svelte Apps</strong> 🎄</p> <p>Holiday cooking is fun… right up until the recipe switches units on you.</p> <ul> <li>cups vs milliliters</li> <li>ounces vs grams</li> <li>Fahrenheit vs Celsius</li> </ul> <p>So today’s mini-app is the <strong>Unit Converter</strong> — a clean, fast converter you can keep open while you cook.</p> <p><strong>🔗 Try it live:</strong> <a href="proxy.php?url=https://svelte-apps.me/apps/unit-converter" rel="noopener noreferrer">https://svelte-apps.me/apps/unit-converter</a><br> <strong>💻 View the code:</strong> <a href="proxy.php?url=https://github.com/Michael-Obele/Svelte-MiniApps/tree/main/src/routes/apps/(app)/unit-converter" rel="noopener noreferrer">https://github.com/Michael-Obele/Svelte-MiniApps/tree/main/src/routes/apps/(app)/unit-converter</a></p> <h2> What it does </h2> <p>The UI is intentionally simple:</p> <ol> <li>Pick a unit category (Volume, Temperature, Mass, etc.)</li> <li>Enter a value</li> <li>Choose “From” and “To” units</li> <li>Get a formatted result instantly</li> </ol> <p>It also includes a <strong>Swap</strong> button so you can flip the direction quickly, and a <strong>Clear</strong> action to reset the input.</p> <h2> What makes it feel good to use </h2> <ul> <li>Results are formatted cleanly (so you don’t get unreadable long decimals)</li> <li>It handles "same unit" conversions gracefully</li> <li>It supports a wide set of categories beyond cooking too (length, area, time, angle, data, energy, force, power, pressure)</li> </ul> <h2> A few holiday-friendly conversions to try </h2> <h3> Oven temperature </h3> <p>If your recipe says <strong>350°F</strong> but you’re using a °C oven, pick <strong>Temperature</strong> and convert.</p> <h3> Cups to milliliters </h3> <p>For recipes written in US cups, pick <strong>Volume</strong> and convert to mL for a measuring jug.</p> <h3> Ounces to grams </h3> <p>For baking (where precision matters), converting to grams can make measuring a lot easier.</p> <p>If you try it, post a conversion you used today (or a recipe you’re making) and tag me.</p> svelte sveltekit productivity opensource Day 7: Holiday Word of the Day (English Dictionary App) Michael Amachree Wed, 31 Dec 2025 17:42:56 +0000 https://dev.to/dev_michael/day-7-holiday-word-of-the-day-english-dictionary-app-51jm https://dev.to/dev_michael/day-7-holiday-word-of-the-day-english-dictionary-app-51jm <p>It’s <strong>Day 7</strong> of <strong>12 Days of Svelte Apps</strong> 🎄</p> <p>If you want a tiny holiday habit that takes less than a minute, try this:</p> <p><strong>Pick one word you heard today and look it up.</strong></p> <p>Maybe it’s from a carol, a Christmas movie, a family recipe, or a caption you’re writing.</p> <p>Today’s mini-app is the <strong>English Dictionary App</strong> — a clean word lookup tool that focuses on the stuff you actually want:</p> <ul> <li>clear definitions</li> <li>pronunciation (including audio when available)</li> <li>synonyms and antonyms</li> <li>examples and word origin (when provided)</li> </ul> <p><strong>🔗 Try it live:</strong> <a href="proxy.php?url=https://svelte-apps.me/apps/dictionary-app" rel="noopener noreferrer">https://svelte-apps.me/apps/dictionary-app</a><br> <strong>💻 View the code:</strong> <a href="proxy.php?url=https://github.com/Michael-Obele/Svelte-MiniApps/tree/main/src/routes/apps/(app)/dictionary-app" rel="noopener noreferrer">https://github.com/Michael-Obele/Svelte-MiniApps/tree/main/src/routes/apps/(app)/dictionary-app</a></p> <h2> What you get from one search </h2> <p>Type a word and hit <strong>Find Meaning</strong>.</p> <p>The results are organized so you can skim quickly:</p> <ul> <li>the word + phonetic spelling</li> <li>pronunciation buttons (tap to play)</li> <li>meanings grouped by part of speech (noun/verb/etc.)</li> <li>numbered definitions (with examples when available)</li> <li>a small set of synonyms/antonyms (deduped and kept readable)</li> </ul> <p>There’s also a <strong>Cached</strong> indicator when results come from cache — a nice detail when you’re searching the same word again.</p> <h2> Holiday words to try (starter pack) </h2> <ul> <li><code>merriment</code></li> <li><code>tinsel</code></li> <li><code>solstice</code></li> <li><code>carol</code></li> <li><code>yule</code></li> </ul> <h2> Why this is a great micro-app </h2> <p>It’s not trying to be a full language-learning platform. It’s a quick lookup tool with:</p> <ul> <li>a friendly empty state</li> <li>a solid loading experience (skeleton UI)</li> <li>a clear error state when a word isn’t found</li> </ul> <p>If you try it, reply with your <strong>holiday word of the day</strong>.</p> svelte sveltekit learning opensource Day 6: Christmas Emoji Challenge (Advanced Emoji Tools) Michael Amachree Wed, 31 Dec 2025 17:32:55 +0000 https://dev.to/dev_michael/day-6-christmas-emoji-challenge-advanced-emoji-tools-1cgj https://dev.to/dev_michael/day-6-christmas-emoji-challenge-advanced-emoji-tools-1cgj <p>It’s <strong>Day 6</strong> of <strong>12 Days of Svelte Apps</strong> 🎄</p> <p>Today we’re doing something fun: <strong>Advanced Emoji Tools</strong>.</p> <p><strong>🔗 Try it live:</strong> <a href="proxy.php?url=https://svelte-apps.me/apps/advanced-emoji-tools" rel="noopener noreferrer">https://svelte-apps.me/apps/advanced-emoji-tools</a><br> <strong>💻 View the code:</strong> <a href="proxy.php?url=https://github.com/Michael-Obele/Svelte-MiniApps/tree/main/src/routes/apps/(app)/advanced-emoji-tools" rel="noopener noreferrer">https://github.com/Michael-Obele/Svelte-MiniApps/tree/main/src/routes/apps/(app)/advanced-emoji-tools</a></p> <p>This one is built for speed: search emojis, transform text, and copy results instantly.</p> <h2> Challenge </h2> <p>Post a Christmas song in emojis and let people guess.</p> <p>Examples:</p> <ul> <li>🔔🔔🔔</li> <li>🎅🛷🌙</li> <li>❄️🏠🔥☕</li> </ul> <h2> What the app includes </h2> <ul> <li> <strong>Transform</strong>: emojify text (and reverse it)</li> <li> <strong>Search</strong>: type a keyword, hit enter, and grab the exact emoji you want</li> <li> <strong>Random</strong>: roll a random emoji when you need inspiration</li> <li> <strong>Check</strong>: see whether a word has an emoji equivalent</li> </ul> <p>The app makes it easy to search + copy emojis quickly — perfect for turning replies into little puzzles.</p> <h2> A few ready-to-post prompts </h2> <ul> <li>“Guess the movie”: 🧑‍🎄🏠🧱🪤</li> <li>“Holiday vibe check”: 🎄☕📚✨</li> <li>“Travel day”: ✈️🧳❄️</li> </ul> svelte fun opensource webdev Day 5: Festive QR Gift Tags (QR Code Generator) Michael Amachree Wed, 31 Dec 2025 17:31:39 +0000 https://dev.to/dev_michael/day-5-festive-qr-gift-tags-qr-code-generator-26n9 https://dev.to/dev_michael/day-5-festive-qr-gift-tags-qr-code-generator-26n9 <p>It’s <strong>Day 5</strong> of <strong>12 Days of Svelte Apps</strong> 🎄</p> <p>Today’s featured mini-app is the <strong>QR Code Generator</strong>.</p> <p><strong>🔗 Try it live:</strong> <a href="proxy.php?url=https://svelte-apps.me/apps/qr-code-generator" rel="noopener noreferrer">https://svelte-apps.me/apps/qr-code-generator</a><br> <strong>💻 View the code:</strong> <a href="proxy.php?url=https://github.com/Michael-Obele/Svelte-MiniApps/tree/main/src/routes/apps/(app)/qr-code-generator" rel="noopener noreferrer">https://github.com/Michael-Obele/Svelte-MiniApps/tree/main/src/routes/apps/(app)/qr-code-generator</a></p> <p>If you’ve never used QR codes beyond restaurant menus, here’s a holiday twist: <strong>QR gift tags</strong>.</p> <p>Instead of writing a long URL on a tag (or texting it later), you generate a QR once, download it, and print it.</p> <h2> What it can generate </h2> <p>The app includes three quick modes:</p> <ul> <li> <strong>Text/URL</strong>: any message or link</li> <li> <strong>Contact Card</strong>: generate a vCard-style QR for sharing contact details</li> <li> <strong>Social Links</strong>: bundle multiple links into one QR payload</li> </ul> <h2> 3 holiday uses (that feel a little magical) </h2> <p>1) <strong>Video greeting tag</strong>: link a short "Merry Christmas" video.<br> 2) <strong>Playlist gift</strong>: link a Spotify/Apple playlist.<br> 3) <strong>Photo album</strong>: link a shared album.</p> <p>Bonus idea: add a QR to a “coupon” gift ("One free coffee", "Movie night", "Car wash") and link it to a note or a digital card.</p> <h2> Quick how-to </h2> <ol> <li>Open the app</li> <li>Pick <strong>Text/URL</strong>, <strong>Contact Card</strong>, or <strong>Social Links</strong> </li> <li>Enter your info</li> <li>Download the QR code image</li> <li>Print it small and tape it to a tag 🎁</li> </ol> <p>Generate → download → print. That’s it.</p> svelte sveltekit productivity opensource 🚀 Boost Your Svelte DX: A Guide to the Vite Svelte Inspector Michael Amachree Wed, 31 Dec 2025 00:06:35 +0000 https://dev.to/dev_michael/boost-your-svelte-dx-a-guide-to-the-vite-svelte-inspector-2kim https://dev.to/dev_michael/boost-your-svelte-dx-a-guide-to-the-vite-svelte-inspector-2kim <p>Ever found yourself staring at a UI element in your browser, wondering exactly which component file it lives in?</p> <p>If you are using Svelte with Vite, there is a powerful tool designed to solve exactly that. Meet <strong><code>@sveltejs/vite-plugin-svelte-inspector</code></strong>.</p> <p>This plugin adds a DOM inspector directly to your browser during development. When enabled, you can hover over an element to see its file path and <strong>click to automatically open your code editor</strong> at that exact location.</p> <p>Here is how to set it up and customize it to fit your workflow.</p> <h2> 🛠️ The Setup </h2> <p>First, ensure you have <code>@sveltejs/vite-plugin-svelte</code> installed (it's a peer dependency).</p> <p>The inspector is actually built into the Svelte config logic. You don't usually need to install a separate package if you are on a recent version of Svelte/Vite, but you do need to enable it.</p> <h3> 1. Basic Enable </h3> <p>Open your <code>svelte.config.js</code> and simply set the inspector to <code>true</code> inside <code>vitePlugin</code>.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="c1">// svelte.config.js</span> <span class="k">export</span> <span class="k">default</span> <span class="p">{</span> <span class="na">vitePlugin</span><span class="p">:</span> <span class="p">{</span> <span class="na">inspector</span><span class="p">:</span> <span class="kc">true</span> <span class="p">}</span> <span class="p">};</span> </code></pre> </div> <h3> 2. Custom Configuration </h3> <p>If you want to change how you toggle the inspector or where the button sits, you can pass an object instead of a boolean.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="c1">// svelte.config.js</span> <span class="k">export</span> <span class="k">default</span> <span class="p">{</span> <span class="na">vitePlugin</span><span class="p">:</span> <span class="p">{</span> <span class="na">inspector</span><span class="p">:</span> <span class="p">{</span> <span class="na">toggleKeyCombo</span><span class="p">:</span> <span class="dl">'</span><span class="s1">alt-x</span><span class="dl">'</span><span class="p">,</span> <span class="na">showToggleButton</span><span class="p">:</span> <span class="dl">'</span><span class="s1">always</span><span class="dl">'</span><span class="p">,</span> <span class="na">toggleButtonPos</span><span class="p">:</span> <span class="dl">'</span><span class="s1">bottom-right</span><span class="dl">'</span> <span class="p">}</span> <span class="p">}</span> <span class="p">};</span> </code></pre> </div> <h2> 💡 Pro Tip: Personalize with Environment Variables </h2> <p>This is arguably the coolest feature. Inspector settings—like key combos—are often personal preferences. Your teammate might love <code>Alt-x</code>, but you might prefer <code>Cmd-Shift</code>.</p> <p>You shouldn't have to fight over the <code>svelte.config.js</code> file in Git.</p> <p>The inspector allows you to configure options via <strong>Environment Variables</strong> (shell or <code>.env</code> files). These take precedence over the config file!<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code><span class="c"># Set a custom key combo (unquoted string)</span> <span class="nv">SVELTE_INSPECTOR_TOGGLE</span><span class="o">=</span>alt-x <span class="c"># Pass a full JSON options object</span> <span class="nv">SVELTE_INSPECTOR_OPTIONS</span><span class="o">=</span><span class="s1">'{"holdMode": false, "toggleButtonPos": "bottom-left"}'</span> <span class="c"># Disable it completely for your machine</span> <span class="nv">SVELTE_INSPECTOR_OPTIONS</span><span class="o">=</span><span class="nb">false</span> </code></pre> </div> <h2> ⚙️ Configuration Reference </h2> <p>Here is a breakdown of the options you can tweak to make the inspector feel right for you.</p> <h3> Toggle &amp; Display </h3> <ul> <li> <strong><code>toggleKeyCombo</code></strong> (<code>string</code>): The shortcut to turn the inspector on/off.</li> <li> <em>Default:</em> <code>'alt-x'</code> </li> <li><p><em>Tip:</em> Use modifiers + key, like <code>control-shift-o</code>.</p></li> <li><p><strong><code>showToggleButton</code></strong> (<code>'always' | 'active' | 'never'</code>): Controls the on-screen UI button.</p></li> <li><p><em>Default:</em> <code>'active'</code> (shows only when inspector is on).</p></li> <li><p><strong><code>toggleButtonPos</code></strong> (<code>'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'</code>): Where the floating button appears.</p></li> <li><p><em>Default:</em> <code>'top-right'</code></p></li> <li><p><strong><code>holdMode</code></strong> (<code>boolean</code>): If <code>true</code>, the inspector is only active while you hold down the toggle keys. If <code>false</code>, the keys act as a switch.</p></li> <li><p><em>Default:</em> <code>true</code></p></li> </ul> <h3> Navigation &amp; Accessibility </h3> <p>You can navigate the DOM tree using your keyboard!</p> <ul> <li> <strong><code>navKeys</code></strong>:</li> <li> <code>parent</code>: 'ArrowUp'</li> <li> <code>child</code>: 'ArrowDown'</li> <li> <code>next</code>: 'ArrowRight' (next sibling)</li> <li><p><code>prev</code>: 'ArrowLeft' (previous sibling)</p></li> <li><p><strong><code>openKey</code></strong>: Key to open the editor.</p></li> <li><p><em>Default:</em> <code>'Enter'</code></p></li> <li><p><strong><code>escapeKeys</code></strong>: Keys to close the inspector.</p></li> <li><p><em>Default:</em> <code>['Backspace', 'Escape']</code></p></li> </ul> <h3> Styling </h3> <ul> <li> <strong><code>customStyles</code></strong> (<code>boolean</code>): Defaults to <code>true</code>. This injects styles when active.</li> <li>If you want to override the inspector's look, the <code>body</code> gets the class <code>svelte-inspector-enabled</code>, and the hovered element gets <code>svelte-inspector-active-target</code>.</li> </ul> <h2> 📝 Editor Support </h2> <p>The "Click-to-Open" magic relies on your editor being recognized.</p> <p>Standard editors (VS Code, WebStorm, etc.) are usually supported out of the box. However, if your editor isn't opening:</p> <ol> <li>Check the <a href="proxy.php?url=https://github.com/yyx990803/launch-editor#supported-editors" rel="noopener noreferrer">Supported Editors list</a>.</li> <li>Follow the <a href="proxy.php?url=https://github.com/yyx990803/launch-editor#custom-editor-support" rel="noopener noreferrer">Custom Editor instructions</a> if yours is obscure or requires a specific binary path.</li> </ol> <p>Happy debugging! 🐛➡️✨</p> <h3> 🔗 Reference </h3> <p>For the most up-to-date options and details, check out the <a href="proxy.php?url=https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/inspector.md" rel="noopener noreferrer">official documentation on GitHub</a>.</p> svelte vite webdev javascript Day 4: Plan the Holidays in Markdown (Markdown Editor) 📝 Michael Amachree Thu, 18 Dec 2025 23:06:38 +0000 https://dev.to/dev_michael/day-4-plan-the-holidays-in-markdown-markdown-editor-4app https://dev.to/dev_michael/day-4-plan-the-holidays-in-markdown-markdown-editor-4app <p>It’s <strong>Day 4</strong> of <strong>12 Days of Svelte Apps</strong> 🎄</p> <p>When things get hectic, Markdown keeps your plans:</p> <ul> <li>structured</li> <li>readable</li> <li>easy to reuse</li> <li>easy to share (or keep private)</li> </ul> <p>Today’s mini-app is a clean <strong>Markdown Editor</strong> powered by Carta-MD, with a preview that updates as you type.</p> <p><strong>🔗 Try it live:</strong> <a href="proxy.php?url=https://svelte-apps.me/apps/markdown-editor" rel="noopener noreferrer">https://svelte-apps.me/apps/markdown-editor</a><br> <strong>💻 View the code:</strong> <a href="proxy.php?url=https://github.com/Michael-Obele/Svelte-MiniApps/tree/main/src/routes/apps/(app)/markdown-editor" rel="noopener noreferrer">https://github.com/Michael-Obele/Svelte-MiniApps/tree/main/src/routes/apps/(app)/markdown-editor</a></p> <h2> Why Markdown works so well for holiday planning </h2> <p>You don’t need a complicated system — you need:</p> <ul> <li>headings to chunk your life into sections</li> <li>checkboxes for “done / not done”</li> <li>links for tickets, receipts, wishlists, and recipes</li> </ul> <p>Bonus: the editor auto-saves your content to localStorage, so you can close the tab and come back later without losing your work.</p> <h2> Copy/paste template </h2> <p>Paste this into the editor and customize it:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight markdown"><code> # Holiday Plan 🎄 ## Gifts <span class="p"> -</span> [ ] Finalize gift list <span class="p"> -</span> [ ] Order online gifts <span class="p"> -</span> [ ] Wrap gifts <span class="p"> -</span> [ ] Label + stash ## Dinner <span class="p"> -</span> [ ] Decide menu <span class="p"> -</span> [ ] Buy groceries <span class="p"> -</span> [ ] Prep dessert <span class="p"> -</span> [ ] Set cooking timeline ## Travel <span class="p"> -</span> [ ] Confirm bookings <span class="p"> -</span> [ ] Pack chargers <span class="p"> -</span> [ ] Print tickets / download passes </code></pre> </div> <h2> A couple quick Markdown tricks </h2> <ul> <li>Use <code>- [ ]</code> for tasks and <code>- [x]</code> for completed items.</li> <li>Add links inline: <code>[Recipe](https://example.com)</code>.</li> <li>Keep one “Notes” section at the bottom for last-minute ideas.</li> </ul> <p>That’s it. Simple structure beats complicated systems.</p> svelte sveltekit markdown webdev