<?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: Bum Kom</title>
    <description>The latest articles on DEV Community by Bum Kom (@chieund).</description>
    <link>https://dev.to/chieund</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%2F127153%2Fc6da54bf-5c31-4d76-a0ad-7ae17e7aa211.jpeg</url>
      <title>DEV Community: Bum Kom</title>
      <link>https://dev.to/chieund</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/chieund"/>
    <language>en</language>
    <item>
      <title>VX Agents — the connectivity layer between AI agents and your business systems</title>
      <dc:creator>Bum Kom</dc:creator>
      <pubDate>Fri, 04 Sep 2026 17:26:00 +0000</pubDate>
      <link>https://dev.to/chieund/vx-agents-the-connectivity-layer-between-ai-agents-and-your-business-systems-5033</link>
      <guid>https://dev.to/chieund/vx-agents-the-connectivity-layer-between-ai-agents-and-your-business-systems-5033</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fwiel5nh5x75rxeyi8imb.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%2Fwiel5nh5x75rxeyi8imb.png" alt=" " width="799" height="401"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What is VX Agents?
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;VX Agents&lt;/strong&gt; is a platform for building AI agents that don't just &lt;em&gt;talk&lt;/em&gt; — they &lt;em&gt;do things&lt;/em&gt; in your real business systems, safely.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The connectivity layer between AI agents and your business systems.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;You connect the tools your business already runs on — your CRM, booking system, payment provider, analytics, social channels, or your own internal APIs — and VX Agents turns them into actions an AI agent can perform on your behalf. Customers (or your team) chat in plain language; the agent looks up an order, reschedules a booking, pulls a report, replies to a comment, and answers with a real result.&lt;/p&gt;

&lt;p&gt;It works from the built-in chat, an embeddable widget, and — for technical teams — from AI clients like &lt;strong&gt;Claude or ChatGPT through the Model Context Protocol (MCP)&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  The problem it solves
&lt;/h2&gt;

&lt;p&gt;AI models are good at understanding a request. The hard part has always been letting them act on it against real systems &lt;strong&gt;without handing over the keys&lt;/strong&gt;.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Your business systems don't speak "AI tool call."&lt;/li&gt;
&lt;li&gt;Wiring each one up by hand is slow and brittle.&lt;/li&gt;
&lt;li&gt;Giving an LLM unscoped access to production is a non-starter.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;VX Agents sits in the middle: it speaks to your systems on one side and to AI agents on the other, with permissions, authentication, and auditing built into the layer itself — not bolted on.&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%2Fbyy23qxlj8vpzhj2wvtl.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%2Fbyy23qxlj8vpzhj2wvtl.png" alt=" " width="799" height="397"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  How it works
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Connect&lt;/strong&gt; — Add a connection from the marketplace (Stripe, GitHub, Slack, Xero, Plaid, Google Analytics, Google Search Console, and more), connect a social account, or bring your own OpenAPI/GraphQL spec — including internal, legacy APIs.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;VX Agents generates tools&lt;/strong&gt; — Each connection becomes a set of scoped, named actions the agent can use.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;The agent acts&lt;/strong&gt; — In a conversation, the agent chains those actions to get real work done and replies with the outcome.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Everything is governed&lt;/strong&gt; — Credentials are stored encrypted and injected server-side, calls run behind an SSRF guard, and every action is audited under your organization, plan, and billing.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Because the tools live in the platform, the &lt;em&gt;same&lt;/em&gt; agent is available in the web chat, in an embedded widget on your site, and as an MCP server for external AI clients — one setup, every surface.&lt;/p&gt;




&lt;h2&gt;
  
  
  Safety by construction
&lt;/h2&gt;

&lt;p&gt;The thing that makes VX Agents more than a fancy HTTP client is that safety is part of the design, not a prompt hoping the model behaves:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Scoped tools&lt;/strong&gt; — an agent can only use what a connection actually exposes. A read-only connector (like the Verified Google Search Console template) simply has no write actions, so an agent &lt;em&gt;cannot&lt;/em&gt; change your configuration even if asked.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Server-side credentials&lt;/strong&gt; — tokens never reach the browser or the model; they're injected on the server at call time.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Guardrails baked in&lt;/strong&gt; — SSRF protection, tool-count limits, content locks on sensitive templates, and full audit logs.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Managed, Verified connectors&lt;/strong&gt; — curated templates with OAuth2 and declared scopes, reviewed before they carry the Verified badge.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Safety isn't the agent promising to be careful — it's the tool surface simply not containing the dangerous verbs.&lt;/p&gt;




&lt;h2&gt;
  
  
  Who it's for
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Business owners&lt;/strong&gt; who want customers to chat with their business systems — check an order, book a slot, get a quote — without building a bot from scratch.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Technical teams&lt;/strong&gt; who want to expose a CRM, booking, ERP, inventory, or internal API as &lt;strong&gt;secure MCP tools&lt;/strong&gt; for ChatGPT, Claude, and customer messaging channels.&lt;/li&gt;
&lt;/ul&gt;




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

&lt;p&gt;Perplexity — per agent or system-managed.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Protocol:&lt;/strong&gt; an MCP server per agent, so any MCP client can connect.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Infra:&lt;/strong&gt; containerized, with a controlled egress proxy for outbound calls.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Try it
&lt;/h2&gt;

&lt;p&gt;There's a free self-serve plan. The fastest way to feel the idea is to connect one thing — a SaaS API, a social account, or your own spec — and watch an agent actually use it.&lt;/p&gt;

&lt;p&gt;👉 &lt;strong&gt;&lt;a href="https://vxagents.net" rel="noopener noreferrer"&gt;vxagents.net&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
        &lt;div class="c-embed__cover"&gt;
          &lt;a href="https://www.youtube.com/@vxagents" class="c-link align-middle" rel="noopener noreferrer"&gt;
            &lt;img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fyt3.googleusercontent.com%2FV4Ie_uABNyRiIyHHdQF4xH6BL7ZTj6bk7RigLAI_SdZR19BxNN2PIS4OKVaCM7oDHU5XYJi6%3Ds900-c-k-c0x00ffffff-no-rj" height="900" class="m-0" width="900"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="c-embed__body"&gt;
        &lt;h2 class="fs-xl lh-tight"&gt;
          &lt;a href="https://www.youtube.com/@vxagents" rel="noopener noreferrer" class="c-link"&gt;
            
          &lt;/a&gt;
        &lt;/h2&gt;
          &lt;p class="truncate-at-3"&gt;
            Turn your business APIs into safe AI actions.
Create and Connect MCP servers, OpenAPI tools, WhatsApp, Instagram, Messenger, SMS, web chat, and legacy systems so AI agents can complete approved workflows for customers and teams.

          &lt;/p&gt;
        &lt;div class="color-secondary fs-s flex items-center"&gt;
            &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.youtube.com%2Fs%2Fdesktop%2Ff82dea74%2Fimg%2Ffavicon.ico" width="48" height="48"&gt;
          youtube.com
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;If you're working on the "AI agents meet real systems" problem too, I'd love to compare notes in the comments — especially on how you think about permissions and auditability once an agent can touch production.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>mcp</category>
      <category>saas</category>
      <category>automation</category>
    </item>
    <item>
      <title>I built a beautiful Markdown Viewer for Chrome, VS Code, and Desktop — here's what I learned</title>
      <dc:creator>Bum Kom</dc:creator>
      <pubDate>Fri, 20 Mar 2026 17:09:58 +0000</pubDate>
      <link>https://dev.to/chieund/i-built-a-beautiful-markdown-viewer-for-chrome-vs-code-and-desktop-heres-what-i-learned-27cd</link>
      <guid>https://dev.to/chieund/i-built-a-beautiful-markdown-viewer-for-chrome-vs-code-and-desktop-heres-what-i-learned-27cd</guid>
      <description>&lt;h2&gt;
  
  
  The Problem
&lt;/h2&gt;

&lt;p&gt;Every developer reads Markdown daily — READMEs, docs, notes. But the default rendering is... boring. Raw GitHub files look plain. VS Code's built-in preview is basic. And if you want Mermaid diagrams or LaTeX math? Good luck.&lt;/p&gt;

&lt;p&gt;I wanted one tool that renders Markdown beautifully — everywhere I work.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Solution: Markdown Viewer Premium 💎
&lt;/h2&gt;

&lt;p&gt;A single React UI core, deployed as:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🌍 &lt;strong&gt;Chrome Extension&lt;/strong&gt; — renders &lt;code&gt;.md&lt;/code&gt; files directly in the browser&lt;/li&gt;
&lt;li&gt;💻 &lt;strong&gt;VS Code Extension&lt;/strong&gt; — replaces the default Markdown preview&lt;/li&gt;
&lt;li&gt;🖥️ &lt;strong&gt;Desktop App&lt;/strong&gt; — native app built with Tauri v2&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Faf5xgmt3zz33yhewh1va.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%2Faf5xgmt3zz33yhewh1va.png" alt="Overview" width="800" height="429"&gt;&lt;/a&gt;&lt;/p&gt;

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

&lt;h3&gt;
  
  
  Syntax Highlighting (100+ Languages)
&lt;/h3&gt;

&lt;p&gt;One-click copy button on every code block. Supports JavaScript, Python, Go, Rust, SQL, and 100+ more.&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%2Fgoy3wrx4f5lunototh7w.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%2Fgoy3wrx4f5lunototh7w.png" alt="Code Blocks" width="800" height="431"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Mermaid Diagrams
&lt;/h3&gt;

&lt;p&gt;Flowcharts, sequence diagrams, gantt charts, pie charts — all rendered natively. Click to expand fullscreen with zoom &amp;amp; pan controls.&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%2F7m4ddnnenzx9jz96laok.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%2F7m4ddnnenzx9jz96laok.png" alt="Mermaid Flowchart" width="800" height="430"&gt;&lt;/a&gt;&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%2Fcmm4jzoz3uggelta02bm.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%2Fcmm4jzoz3uggelta02bm.png" alt="Mermaid Fullscreen" width="800" height="430"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Math &amp;amp; LaTeX
&lt;/h3&gt;

&lt;p&gt;Render equations beautifully with KaTeX — inline and block math supported.&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%2F93qiujgthnqn3hyc1ijg.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%2F93qiujgthnqn3hyc1ijg.png" alt="Math LaTeX" width="800" height="429"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  And More...
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;GitHub Alerts&lt;/strong&gt; — NOTE, TIP, IMPORTANT, WARNING, CAUTION blocks&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Table of Contents&lt;/strong&gt; — auto-generated with active section tracking&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Dark / Light Theme&lt;/strong&gt; — toggle with system preference support&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Image Lightbox&lt;/strong&gt; — click to zoom with pan controls&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;PDF &amp;amp; DOC Export&lt;/strong&gt; — clean output with one click&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Keyboard Shortcuts&lt;/strong&gt; — navigate, toggle theme, print&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Auto-Update&lt;/strong&gt; — desktop app checks for updates on startup&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhr4x83tdmzmw4sh7eo16.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%2Fhr4x83tdmzmw4sh7eo16.png" alt="Tables" width="800" height="430"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Tech Stack
&lt;/h2&gt;

&lt;p&gt;The architecture is a &lt;strong&gt;monorepo with pnpm workspaces&lt;/strong&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;packages/
├── ui/                  # Shared React component library
├── chrome-extension/    # Chrome/Edge/Brave (Manifest V3)
├── vscode-extension/    # VS Code extension
└── desktop-app/         # Tauri v2 desktop app
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;UI&lt;/strong&gt;: React 19, TypeScript, Tailwind CSS&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Markdown&lt;/strong&gt;: react-markdown, remark-gfm, rehype-katex&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Diagrams&lt;/strong&gt;: Mermaid&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Math&lt;/strong&gt;: KaTeX&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Code&lt;/strong&gt;: react-syntax-highlighter (Prism)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Desktop&lt;/strong&gt;: Tauri v2 with auto-updater&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Build&lt;/strong&gt;: Vite, pnpm workspaces&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Lint&lt;/strong&gt;: ESLint + typescript-eslint&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Why Monorepo?
&lt;/h3&gt;

&lt;p&gt;The key insight: &lt;strong&gt;all three platforms render the same Markdown&lt;/strong&gt;. By sharing a single &lt;code&gt;@mdp/ui&lt;/code&gt; package, every bug fix and feature improvement ships to Chrome, VS Code, and Desktop simultaneously.&lt;/p&gt;

&lt;h2&gt;
  
  
  Challenges &amp;amp; Lessons Learned
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. Windows Line Endings Break Everything
&lt;/h3&gt;

&lt;p&gt;The Table of Contents wasn't working on Windows. After hours of debugging, the culprit was &lt;code&gt;\r\n&lt;/code&gt; line endings. The heading regex &lt;code&gt;^(#{1,6})\s+(.+)$&lt;/code&gt; doesn't match when lines end with &lt;code&gt;\r&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Fix:&lt;/strong&gt; &lt;code&gt;content.split(/\r?\n/)&lt;/code&gt; instead of &lt;code&gt;content.split('\n')&lt;/code&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Tauri v2 Changed All the Event Names
&lt;/h3&gt;

&lt;p&gt;Drag &amp;amp; drop wasn't working on the desktop app. Turns out Tauri v2 renamed all drag-drop events:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;tauri://file-drop&lt;/code&gt; → &lt;code&gt;tauri://drag-drop&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;tauri://file-drop-hover&lt;/code&gt; → &lt;code&gt;tauri://drag-over&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;tauri://file-drop-cancelled&lt;/code&gt; → &lt;code&gt;tauri://drag-leave&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  3. Print CSS is Harder Than You Think
&lt;/h3&gt;

&lt;p&gt;Exporting to PDF from dark theme resulted in a black page. The fix required carefully overriding every CSS variable while preserving Mermaid diagram colors and code block styling.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. Shared Components Need Platform Detection
&lt;/h3&gt;

&lt;p&gt;The DOC export uses &lt;code&gt;Blob&lt;/code&gt; download in Chrome but needs Tauri's native file dialog on desktop. Solution: detect &lt;code&gt;window.__TAURI_INTERNALS__&lt;/code&gt; and dynamically import Tauri APIs.&lt;/p&gt;

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

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Platform&lt;/th&gt;
&lt;th&gt;Link&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;🌍 Chrome / Edge / Brave&lt;/td&gt;
&lt;td&gt;&lt;a href="https://chromewebstore.google.com/detail/markdown-viewer-premium/abnpdibfmmdcjhdakgjeiepimokkhjjo" rel="noopener noreferrer"&gt;Chrome Web Store&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;💻 VS Code&lt;/td&gt;
&lt;td&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=bumkom.markdown-viewer-premium" rel="noopener noreferrer"&gt;VS Code Marketplace&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;🖥️ Desktop (Windows, macOS &amp;amp; Linux)&lt;/td&gt;
&lt;td&gt;&lt;a href="https://github.com/chieund/markdown-viewer-premium-site/releases/tag/v1.0.2" rel="noopener noreferrer"&gt;GitHub Releases&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;🌐 Website&lt;/td&gt;
&lt;td&gt;&lt;a href="https://markdown-viewer-premium-site.vercel.app" rel="noopener noreferrer"&gt;markdown-viewer-premium-site.vercel.app&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

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

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;AI Summary&lt;/strong&gt; — summarize documents using Chrome's built-in AI&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Presentation Mode&lt;/strong&gt; — convert Markdown to slides&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Advanced Search&lt;/strong&gt; — full-text search with regex support&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;If you find this useful, I'd appreciate a ⭐ on the &lt;a href="https://chromewebstore.google.com/detail/markdown-viewer-premium/abnpdibfmmdcjhdakgjeiepimokkhjjo" rel="noopener noreferrer"&gt;Chrome Web Store&lt;/a&gt; or &lt;a href="https://marketplace.visualstudio.com/items?itemName=bumkom.markdown-viewer-premium" rel="noopener noreferrer"&gt;VS Code Marketplace&lt;/a&gt;!&lt;/p&gt;

&lt;p&gt;Built with ❤️ by &lt;a href="https://github.com/chieund" rel="noopener noreferrer"&gt;Bumkom&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>opensource</category>
      <category>react</category>
      <category>productivity</category>
    </item>
    <item>
      <title>I Built the Most Beautiful Markdown Viewer for Developers (And It's Free)</title>
      <dc:creator>Bum Kom</dc:creator>
      <pubDate>Sun, 01 Feb 2026 14:25:31 +0000</pubDate>
      <link>https://dev.to/chieund/i-built-the-most-beautiful-markdown-viewer-for-developers-and-its-free-4km6</link>
      <guid>https://dev.to/chieund/i-built-the-most-beautiful-markdown-viewer-for-developers-and-its-free-4km6</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fff04ynbea7a1gz50fto3.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%2Fff04ynbea7a1gz50fto3.png" alt=" " width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Why is reading Markdown still so... ugly?&lt;br&gt;
As developers, we live in Markdown. We write documentation, READMEs, notes, and blog posts in it. But whenever I opened a local &lt;br&gt;
.md&lt;br&gt;
 file in my browser, I was greeted with the same raw, unstyled text or a 90s-style HTML render that looked like it was designed by a backend engineer in 1998 (no offense, backend friends!).&lt;/p&gt;

&lt;p&gt;I wanted something better. I wanted an experience that felt like reading a premium documentation site—something with:&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%2Fbbhjwuxy9p8qzu2gsvjw.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%2Fbbhjwuxy9p8qzu2gsvjw.png" alt=" " width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;✨ Beautiful Typography (Inter &amp;amp; JetBrains Mono)&lt;br&gt;
🌫️ Glassmorphism UI&lt;br&gt;
🌓 Perfect Dark Mode&lt;br&gt;
📊 Rich Diagram Support&lt;br&gt;
So, I built Markdown Viewer Premium, and I want to share how it transforms the way you view documentation.&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%2Fjlsdxrqh6gkyjq0qp0vj.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%2Fjlsdxrqh6gkyjq0qp0vj.png" alt=" " width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The Problem with Default Viewers&lt;br&gt;
Most browser extensions for Markdown are:&lt;/p&gt;

&lt;p&gt;Outdated: Built years ago, using old styling.&lt;br&gt;
Basic: Just standard HTML, no syntax highlighting or diagrams.&lt;br&gt;
Ugly: No attention to whitespace, readability, or aesthetics.&lt;br&gt;
Meet Markdown Viewer Premium 🚀&lt;br&gt;
This isn't just a parser; it's a rendering engine designed for aesthetics and readability.&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%2Fhpuv2lbn97aosd4xbx2g.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%2Fhpuv2lbn97aosd4xbx2g.png" alt=" " width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Key Features&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;🎨 Stunning "Glass" Aesthetics&lt;br&gt;
I spent a lot of time tweaking the CSS variables (using Tailwind) to get that perfect "frosted glass" look. The sidebar, table of contents, and code blocks all have a subtle transparency that blurs the background, giving it a modern OS feel.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;🧜‍♀️ Mermaid Diagrams with Zoomable Popup&lt;br&gt;
Markdown Viewer Premium automatically renders Mermaid diagrams into clear SVGs. Click any diagram to open it in a zoomable lightbox—perfect for complex flowcharts that need inspection.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;💻 Rich Code, Math &amp;amp; GFM Support&lt;br&gt;
Syntax Highlighting: Beautiful updates for all major languages.&lt;br&gt;
GFM Support: Full support for Task Lists [ ], Tables, and Strikethrough.&lt;br&gt;
LaTeX Support: Write $ E = mc^2 $ and see it rendered instantly with KaTeX.&lt;br&gt;
Copy Button: One-click copy for code snippets.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;🖨️ Professional PDF Export&lt;br&gt;
Need to share? Hit Ctrl+P (or Cmd+P) to export your beautifully rendered markdown as a clean, styled PDF.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;🛠 Power User Tools&lt;br&gt;
Raw View: Instant toggle between rendered view and raw markdown text.&lt;br&gt;
Theme Switching: seamless Toggle between Light and Dark modes.&lt;br&gt;
Smart TOC: Sticky table of contents for easy navigation.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;🐙 Seamless GitHub Integration&lt;br&gt;
Directlypaste a GitHub file URL (blob or raw), and the viewer will automatically fetch and render it. No need to download the file first. Perfect for reading documentation directly from repositories.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Why Use This?&lt;br&gt;
I built this to fix the pain points of existing tools:&lt;/p&gt;

&lt;p&gt;Readability: Most viewers ignore line height and typography. This one prioritizes them.&lt;br&gt;
Completeness: It doesn't break on complex diagrams or math equations.&lt;br&gt;
Speed: It loads instantly, even for large documents.&lt;br&gt;
Try it out!&lt;br&gt;
I built this to scratch my own itch, but I think you'll love it too. If you care about the aesthetics of your tools, give it a try.&lt;/p&gt;

&lt;p&gt;Link to Chrome Web Store&lt;br&gt;
&lt;a href="https://chromewebstore.google.com/detail/markdown-viewer-premium/abnpdibfmmdcjhdakgjeiepimokkhjjo?authuser=0&amp;amp;hl=en" rel="noopener noreferrer"&gt;https://chromewebstore.google.com/detail/markdown-viewer-premium/abnpdibfmmdcjhdakgjeiepimokkhjjo?authuser=0&amp;amp;hl=en&lt;/a&gt;&lt;br&gt;
Let me know what you think in the comments! 👇&lt;/p&gt;

</description>
      <category>markdown</category>
      <category>mermaid</category>
      <category>latex</category>
      <category>productivity</category>
    </item>
    <item>
      <title>I Built a Productivity "Command Center" for Chrome with React 19 &amp; Glassmorphism 🚀</title>
      <dc:creator>Bum Kom</dc:creator>
      <pubDate>Sat, 24 Jan 2026 13:23:28 +0000</pubDate>
      <link>https://dev.to/chieund/i-built-a-productivity-command-center-for-chrome-with-react-19-glassmorphism-3jbm</link>
      <guid>https://dev.to/chieund/i-built-a-productivity-command-center-for-chrome-with-react-19-glassmorphism-3jbm</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgrva3vlzlbmlefxbt0s0.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%2Fgrva3vlzlbmlefxbt0s0.png" alt="Work Dashboard Preview" width="800" height="411"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The Problem: "New Tab" Chaos 🤯
&lt;/h2&gt;

&lt;p&gt;We open new tabs hundreds of times a day. Usually, it's just a blank page or a cluttered default screen filled with distracting news feeds.&lt;br&gt;
As a developer, I wanted my "New Tab" to be a &lt;strong&gt;sanctuary of focus&lt;/strong&gt;—a place that helps me get back into the zone, not pull me out of it.&lt;br&gt;
So, I built &lt;strong&gt;Work Dashboard&lt;/strong&gt;. It's a premium, productivity-focused replacement for the Chrome New Tab page, designed with a sleek &lt;strong&gt;Glassmorphism&lt;/strong&gt; aesthetic.&lt;/p&gt;

&lt;h2&gt;
  
  
  ✨ The Features
&lt;/h2&gt;

&lt;p&gt;Here is what makes it different from the hundreds of other dashboard extensions out there:&lt;/p&gt;

&lt;h3&gt;
  
  
  1. The "Flow State" Media Controller 🎧
&lt;/h3&gt;

&lt;p&gt;I hate hunting through 50 open tabs just to pause Spotify or skip a YouTube ad. &lt;br&gt;
&lt;strong&gt;Work Dashboard&lt;/strong&gt; integrates a universal media controller right on the home screen. It connects to your active media tabs so you can control playback without leaving your current context.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Glassmorphism Design System 🎨
&lt;/h3&gt;

&lt;p&gt;I didn't want another flat, boring tool. I used &lt;strong&gt;Vanilla CSS Variables&lt;/strong&gt; to build a dynamic, frosted-glass UI that adapts to your wallpaper.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;Themes&lt;/strong&gt;: Includes "Deep Dark" for coding late at night and "Nature" for a calming vibe.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Customization&lt;/strong&gt;: Drag-and-drop widgets to build your perfect layout.
### 3. Developer-First Widgets 🛠&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Live Status&lt;/strong&gt;: See your unread Gmail count directly on the dashboard icon.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Quick Notes&lt;/strong&gt;: A scratchpad for those "don't forget this" thoughts.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;App Library&lt;/strong&gt;: Quick access to the tools we actually use: GitHub, Figma, Vercel, Notion, and Linear.
## 🏗 Under the Hood (Tech Stack)
Building a Chrome Extension in 2026 requires a modern toolchain. Here is what I chose:&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;React 19&lt;/strong&gt;: Leveraging the latest concurrent features for a snappy UI.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Vite&lt;/strong&gt;: For an instant dev server and optimized distinct builds.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;@dnd-kit&lt;/strong&gt;: The best library standard for accessible drag-and-drop interfaces in React.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Chrome Extension APIs&lt;/strong&gt;: Heavily utilizing &lt;code&gt;chrome.tabs&lt;/code&gt; (for media control), &lt;code&gt;chrome.topSites&lt;/code&gt;, and &lt;code&gt;chrome.storage.sync&lt;/code&gt; to keep settings persistent across devices.
## 🚀 What's Next?
I am currently finalizing the first public release for the Chrome Web Store. The goal is to keep it lightweight, privacy-focused, and incredibly fast.
&lt;strong&gt;I'd love your feedback:&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;  What is the &lt;em&gt;one feature&lt;/em&gt; your current New Tab page is missing?&lt;/li&gt;
&lt;li&gt;  Do you prefer a minimal clock/greeting or a data-rich dashboard?
Drop a comment below! 👇
#react #webdev #showcase #productivity
&lt;a href="https://chromewebstore.google.com/detail/work-dashboard/dcfgfmcdkcamhigabnjiadelcdegnmdh?authuser=0&amp;amp;hl=en" rel="noopener noreferrer"&gt;Get it on Chrome Web Store&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>react</category>
      <category>javascript</category>
      <category>webdev</category>
    </item>
    <item>
      <title>DailyLink - A Modern Link Curation Platform Built with Next.js &amp; Supabase</title>
      <dc:creator>Bum Kom</dc:creator>
      <pubDate>Tue, 06 Jan 2026 18:48:34 +0000</pubDate>
      <link>https://dev.to/chieund/dailylink-a-modern-link-curation-platform-built-with-nextjs-supabase-o9g</link>
      <guid>https://dev.to/chieund/dailylink-a-modern-link-curation-platform-built-with-nextjs-supabase-o9g</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsc2o908g5iu63h4uurw1.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%2Fsc2o908g5iu63h4uurw1.png" alt=" " width="800" height="376"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  DailyLink - Your Daily Dose of Curated Links 🔗
&lt;/h1&gt;

&lt;p&gt;Ever found yourself bookmarking dozens of interesting links only to forget about them later? Or wished you could discover quality content curated by a community of like-minded people? Meet &lt;strong&gt;DailyLink&lt;/strong&gt; - a modern link curation platform that solves these exact problems.&lt;/p&gt;

&lt;h2&gt;
  
  
  🚀 What is DailyLink?
&lt;/h2&gt;

&lt;p&gt;DailyLink is a sleek, community-driven platform where you can:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Save &amp;amp; organize&lt;/strong&gt; your favorite links with smart tagging&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Discover quality content&lt;/strong&gt; shared by the community&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Curate with lightning-fast favorites&lt;/strong&gt; (⚡ instead of ❤️)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Search &amp;amp; filter&lt;/strong&gt; through your collection effortlessly&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  ✨ Key Features
&lt;/h2&gt;

&lt;h3&gt;
  
  
  🔒 Personal Collections
&lt;/h3&gt;

&lt;p&gt;Keep your links private or share them publicly. Perfect for researchers, developers, and content enthusiasts who want organized link management.&lt;/p&gt;

&lt;h3&gt;
  
  
  ⚡ Smart Favorites System
&lt;/h3&gt;

&lt;p&gt;Instead of traditional "likes," we use lightning bolts (⚡) to indicate quality content. It's faster, more intuitive, and creates better curation signals.&lt;/p&gt;

&lt;h3&gt;
  
  
  🏷️ Tag Organization
&lt;/h3&gt;

&lt;p&gt;Organize links with beautiful, rounded tags. Browse by categories or search across your entire collection instantly.&lt;/p&gt;

&lt;h3&gt;
  
  
  📱 Mobile-First Design
&lt;/h3&gt;

&lt;p&gt;Fully responsive with a clean mobile interface including slide-out navigation and touch-optimized interactions.&lt;/p&gt;

&lt;h3&gt;
  
  
  🌐 Community Discovery
&lt;/h3&gt;

&lt;p&gt;Explore links shared by other users. Find hidden gems and trending content in your areas of interest.&lt;/p&gt;

&lt;h2&gt;
  
  
  🛠️ Tech Stack
&lt;/h2&gt;

&lt;p&gt;DailyLink is built with modern web technologies:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Frontend&lt;/strong&gt;: Next.js 16 + React 19 + TypeScript&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Styling&lt;/strong&gt;: Tailwind CSS + shadcn/ui components&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Backend&lt;/strong&gt;: Supabase (PostgreSQL + Auth + RLS)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Deployment&lt;/strong&gt;: Vercel with edge functions&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Analytics&lt;/strong&gt;: Google Analytics integration&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  🎨 Design Philosophy
&lt;/h2&gt;

&lt;p&gt;We focused on creating a &lt;strong&gt;clean, distraction-free experience&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Minimal UI&lt;/strong&gt; that puts content first&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Lightning-fast interactions&lt;/strong&gt; with optimistic updates&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Beautiful typography&lt;/strong&gt; and consistent spacing&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Intuitive navigation&lt;/strong&gt; with URL-based routing&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Accessibility-first&lt;/strong&gt; approach&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  🌟 What Makes It Special?
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. &lt;strong&gt;Community-Driven Curation&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Unlike traditional bookmarking tools, DailyLink encourages sharing quality content with the community.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. &lt;strong&gt;Lightning Bolt System&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;The ⚡ favorite system creates better quality signals than traditional likes.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. &lt;strong&gt;Guest-Friendly&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Visitors can browse community content and tags without signing up, encouraging organic discovery.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. &lt;strong&gt;Developer Experience&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Built with TypeScript, proper error handling, and comprehensive linting for maintainable code.&lt;/p&gt;

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

&lt;p&gt;&lt;strong&gt;Live Demo&lt;/strong&gt;: &lt;a href="https://dailylink.cc" rel="noopener noreferrer"&gt;dailylink.cc&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Features to explore&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Browse community links without signing up&lt;/li&gt;
&lt;li&gt;Create an account to start your personal collection&lt;/li&gt;
&lt;li&gt;Try the lightning-fast search functionality&lt;/li&gt;
&lt;li&gt;Explore content by tags and categories&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  🔮 What's Next?
&lt;/h2&gt;

&lt;p&gt;We're planning exciting features:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Browser extension&lt;/strong&gt; for one-click saving&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;API access&lt;/strong&gt; for developers&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Advanced analytics&lt;/strong&gt; for link performance&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Team collaboration&lt;/strong&gt; features&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;RSS feed integration&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  💭 Lessons Learned
&lt;/h2&gt;

&lt;p&gt;Building DailyLink taught us valuable lessons:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;URL routing &amp;gt; Tab navigation&lt;/strong&gt; for better UX and shareability&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Community features&lt;/strong&gt; drive engagement more than private-only tools&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Mobile-first design&lt;/strong&gt; is crucial for modern web apps&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Supabase RLS&lt;/strong&gt; makes secure multi-tenant apps surprisingly simple&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;TypeScript&lt;/strong&gt; catches so many bugs before they reach production&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  🤝 Get Involved
&lt;/h2&gt;

&lt;p&gt;DailyLink is live and ready for your feedback! Whether you're a developer interested in the technical implementation or a user looking for better link management, we'd love to hear from you.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Try it&lt;/strong&gt;: &lt;a href="https://dailylink.cc" rel="noopener noreferrer"&gt;dailylink.cc&lt;/a&gt;&lt;br&gt;
&lt;strong&gt;Feedback&lt;/strong&gt;: Share your thoughts in the comments below!&lt;/p&gt;




&lt;p&gt;&lt;em&gt;What's your favorite link curation tool? How do you organize your daily discoveries? Let's discuss in the comments! 👇&lt;/em&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  webdev #nextjs #supabase #typescript #productivity
&lt;/h1&gt;

</description>
      <category>nextjs</category>
      <category>supabase</category>
      <category>typescript</category>
      <category>webdev</category>
    </item>
    <item>
      <title>GPT-4o Mini vs. Claude 3.5 Haiku: A Real-World Performance Comparison</title>
      <dc:creator>Bum Kom</dc:creator>
      <pubDate>Mon, 22 Dec 2025 09:22:18 +0000</pubDate>
      <link>https://dev.to/chieund/gpt-4o-mini-vs-claude-35-haiku-a-real-world-performance-comparison-d43</link>
      <guid>https://dev.to/chieund/gpt-4o-mini-vs-claude-35-haiku-a-real-world-performance-comparison-d43</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwc1ub156ol1ipnkwobr8.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%2Fwc1ub156ol1ipnkwobr8.png" alt=" " width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  GPT-4o Mini vs. Claude 3.5 Haiku: A Real-World Performance Comparison
&lt;/h1&gt;

&lt;p&gt;This report analyzes the performance of &lt;strong&gt;GPT-4o Mini&lt;/strong&gt; (OpenAI) and &lt;strong&gt;Claude 3.5 Haiku&lt;/strong&gt; (Anthropic) based on a live test conducted on December 22, 2024, using a dedicated comparison tool.&lt;br&gt;
&lt;a href="https://www.llmkit.cc/model-comparison/claude-3-5-haiku-20241022-vs-gpt-4o-mini" rel="noopener noreferrer"&gt;https://www.llmkit.cc/model-comparison/claude-3-5-haiku-20241022-vs-gpt-4o-mini&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  📊 Comparison Summary
&lt;/h2&gt;

&lt;p&gt;The test utilized the prompt: &lt;em&gt;"Hello, how are you?"&lt;/em&gt;.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Metric&lt;/th&gt;
&lt;th&gt;GPT-4o Mini (MegaLLM)&lt;/th&gt;
&lt;th&gt;Claude 3.5 Haiku (Anthropic)&lt;/th&gt;
&lt;th&gt;Winner&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Response Time&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;1,925ms&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;1,327ms&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;🏆 Claude 3.5 Haiku&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Cost per Request&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;$0.0000315&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;$0.00024&lt;/td&gt;
&lt;td&gt;🏆 GPT-4o Mini&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Tokens Used&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;42&lt;/td&gt;
&lt;td&gt;40&lt;/td&gt;
&lt;td&gt;Tie&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Context Window&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;128K&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;200K&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;🏆 Claude 3.5 Haiku&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&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%2Fkfrfbl32tg30n200cyb4.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%2Fkfrfbl32tg30n200cyb4.png" alt=" " width="800" height="402"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🚀 Speed &amp;amp; Performance
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Claude 3.5 Haiku&lt;/strong&gt; is the clear winner for performance-critical applications.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;It delivered a response in &lt;strong&gt;1,327ms&lt;/strong&gt;, making it approximately &lt;strong&gt;31% faster&lt;/strong&gt; than GPT-4o Mini.&lt;/li&gt;
&lt;li&gt;This low latency makes it ideal for real-time applications and chat interfaces where user experience is a top priority.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  💰 Cost Efficiency
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;GPT-4o Mini&lt;/strong&gt; is the budget-friendly leader, being significantly more affordable for high-volume tasks.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;It was &lt;strong&gt;87% cheaper&lt;/strong&gt; per request in our test ($0.0000315 vs $0.00024).&lt;/li&gt;
&lt;li&gt;Input pricing is 85% lower ($0.00015/1K tokens), and output pricing is 88% lower ($0.0006/1K tokens) than Claude 3.5 Haiku.&lt;/li&gt;
&lt;li&gt;For a high-volume service (10 million requests), GPT-4o Mini would cost roughly $315, whereas Claude 3.5 Haiku would reach $2,400.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  🧠 Capabilities &amp;amp; Context
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Claude 3.5 Haiku&lt;/strong&gt; offers a larger &lt;strong&gt;200K context window&lt;/strong&gt;, making it superior for processing long documents or complex analysis.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;GPT-4o Mini&lt;/strong&gt; provides a &lt;strong&gt;128K context window&lt;/strong&gt; but includes additional features like &lt;strong&gt;vision capabilities&lt;/strong&gt; and &lt;strong&gt;function calling&lt;/strong&gt; support.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  🎯 Final Verdict
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Choose &lt;strong&gt;GPT-4o Mini&lt;/strong&gt; if:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;✅ &lt;strong&gt;Cost is the primary concern&lt;/strong&gt; (ideal for high-volume automation).&lt;/li&gt;
&lt;li&gt;✅ You need &lt;strong&gt;vision capabilities&lt;/strong&gt; or robust &lt;strong&gt;function calling&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;✅ A 128K context window meets your project requirements.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Choose &lt;strong&gt;Claude 3.5 Haiku&lt;/strong&gt; if:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;✅ &lt;strong&gt;Speed is critical&lt;/strong&gt; for a snappy user experience.&lt;/li&gt;
&lt;li&gt;✅ You need a larger &lt;strong&gt;200K context window&lt;/strong&gt; for massive documents.&lt;/li&gt;
&lt;li&gt;✅ You prioritize &lt;strong&gt;response quality&lt;/strong&gt; and nuance over raw operational cost.&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;&lt;em&gt;Results generated using &lt;a href="https://llmkit.cc" rel="noopener noreferrer"&gt;LLMKit&lt;/a&gt; comparison tool.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>llm</category>
      <category>performance</category>
    </item>
    <item>
      <title>🧰 I Built LLMKit: A Complete Toolkit for Testing LLM APIs</title>
      <dc:creator>Bum Kom</dc:creator>
      <pubDate>Fri, 19 Dec 2025 18:50:05 +0000</pubDate>
      <link>https://dev.to/chieund/i-built-llmkit-a-complete-toolkit-for-testing-llm-apis-50eb</link>
      <guid>https://dev.to/chieund/i-built-llmkit-a-complete-toolkit-for-testing-llm-apis-50eb</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy01e8gkh2jsbi65wvcn6.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%2Fy01e8gkh2jsbi65wvcn6.jpg" alt=" " width="800" height="409"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Tired of switching between Postman, documentation, and code editors when testing LLM APIs? I built a solution.&lt;/em&gt; 🚀&lt;/p&gt;

&lt;h2&gt;
  
  
  🤔 The Problem
&lt;/h2&gt;

&lt;p&gt;As a developer working with AI integrations, I was constantly:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Testing Claude on different providers (Anthropic vs third-party)&lt;/li&gt;
&lt;li&gt;Writing the same API code over and over&lt;/li&gt;
&lt;li&gt;Comparing model responses manually
&lt;/li&gt;
&lt;li&gt;Sharing configurations via screenshots 😅&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  ✨ The Solution: LLMKit
&lt;/h2&gt;

&lt;p&gt;I built a &lt;strong&gt;Next.js app&lt;/strong&gt; that handles everything in one place:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Feature&lt;/th&gt;
&lt;th&gt;Description&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;🔍 &lt;strong&gt;Model Database&lt;/strong&gt;
&lt;/td&gt;
&lt;td&gt;50+ LLM models with specs and pricing&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;⚡ &lt;strong&gt;Provider Comparison&lt;/strong&gt;
&lt;/td&gt;
&lt;td&gt;Test same model across different APIs&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;💻 &lt;strong&gt;Code Generator&lt;/strong&gt;
&lt;/td&gt;
&lt;td&gt;Auto-generate JavaScript, Python, cURL&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;🧪 &lt;strong&gt;API Tester&lt;/strong&gt;
&lt;/td&gt;
&lt;td&gt;Test directly in browser with metrics&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;🔗 &lt;strong&gt;Shareable URLs&lt;/strong&gt;
&lt;/td&gt;
&lt;td&gt;Share configs via URL parameters&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  🛠️ Tech Stack
&lt;/h2&gt;

&lt;p&gt;Built with modern technologies:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Framework&lt;/strong&gt;: Next.js 14 with App Router&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Language&lt;/strong&gt;: TypeScript for type safety&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Styling&lt;/strong&gt;: Tailwind CSS + Shadcn/ui components&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Theme&lt;/strong&gt;: Professional dark/light mode with orange accents&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  🔥 Key Features
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. Smart Code Generation
&lt;/h3&gt;

&lt;p&gt;Automatically generates production-ready API integration code in JavaScript, Python, and cURL formats. Just select your model and provider, and get copy-paste ready implementations.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Shareable Configurations
&lt;/h3&gt;

&lt;p&gt;Share your exact testing setup via URL parameters. Perfect for team collaboration and documentation.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Performance Tracking
&lt;/h3&gt;

&lt;p&gt;Real-time metrics including response time, token usage, and cost estimation for every API call.&lt;/p&gt;

&lt;h2&gt;
  
  
  📚 What I Learned
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Key Insights from Building LLMKit&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Start simple&lt;/strong&gt; - Over-engineered state management initially&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Mobile matters&lt;/strong&gt; - More mobile users than expected
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;TypeScript saves time&lt;/strong&gt; - Caught bugs early in development&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;User feedback is gold&lt;/strong&gt; - Early testers revealed UX issues&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  🚧 Challenges Solved
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;CORS issues&lt;/strong&gt; → Next.js API routes as proxy&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;API key security&lt;/strong&gt; → Client-side only with warnings&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Mobile UX&lt;/strong&gt; → Tab-based navigation for small screens&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  📊 Results
&lt;/h2&gt;

&lt;p&gt;✅ &lt;strong&gt;Free to use&lt;/strong&gt; - No signup required&lt;br&gt;&lt;br&gt;
✅ &lt;strong&gt;50+ models&lt;/strong&gt; supported across providers&lt;br&gt;&lt;br&gt;
✅ &lt;strong&gt;Mobile responsive&lt;/strong&gt; - Works on any device&lt;br&gt;&lt;br&gt;
✅ &lt;strong&gt;Real-time metrics&lt;/strong&gt; - Response time, tokens, cost  &lt;/p&gt;

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

&lt;p&gt;🔗 &lt;strong&gt;Live Demo&lt;/strong&gt;: &lt;a href="https://llmkit.cc" rel="noopener noreferrer"&gt;https://llmkit.cc&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Perfect for:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;API developers testing integrations&lt;/li&gt;
&lt;li&gt;Teams comparing model performance&lt;/li&gt;
&lt;li&gt;Startups evaluating AI providers
&lt;/li&gt;
&lt;li&gt;Anyone learning LLM APIs&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  🔮 What's Next?
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;[ ] User authentication &amp;amp; saved configs&lt;/li&gt;
&lt;li&gt;[ ] Team collaboration features&lt;/li&gt;
&lt;li&gt;[ ] API usage analytics&lt;/li&gt;
&lt;li&gt;[ ] Streaming response support&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;&lt;em&gt;Built this because I needed it. Turns out other developers did too!&lt;/em&gt; &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What tools do you use for API testing?&lt;/strong&gt; 👇&lt;/p&gt;

</description>
      <category>ai</category>
      <category>webdev</category>
      <category>llm</category>
      <category>llmkit</category>
    </item>
    <item>
      <title>Crawler Web dev.to using Colly when learning Golang</title>
      <dc:creator>Bum Kom</dc:creator>
      <pubDate>Tue, 01 Nov 2022 15:54:56 +0000</pubDate>
      <link>https://dev.to/chieund/golang-crawl-the-website-devto-use-the-learning-4a93</link>
      <guid>https://dev.to/chieund/golang-crawl-the-website-devto-use-the-learning-4a93</guid>
      <description>&lt;p&gt;I would like to recommend a website of mine that I made during my Golang learning.&lt;br&gt;
My website &lt;a href="http://techdaily.info"&gt;http://techdaily.info&lt;/a&gt; is for learning golang language.&lt;br&gt;
Besides crawling dev.to, I also crawl some other websites like freecodecamp.com, medium.com, hashnode.com, logrocket.com, infoq.com&lt;br&gt;
So I built a website that specializes in crawling other sites&lt;br&gt;
some technology that i used.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Golang&lt;/li&gt;
&lt;li&gt;Colly&lt;/li&gt;
&lt;li&gt;Nginx&lt;/li&gt;
&lt;li&gt;Service&lt;/li&gt;
&lt;li&gt;Docker&lt;/li&gt;
&lt;li&gt;Mysql&lt;/li&gt;
&lt;li&gt;Run action deploy to server&lt;/li&gt;
&lt;li&gt;Cronjob daily crawl&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  Build Run Local
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Change file app_example.yaml to app.yaml
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;cp app_example.yaml app.yaml
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Build Docker
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker-compose up --build
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Install package Golang
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker-compose exec crawl go mod tidy
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Folder vendor
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker-compose exec crawl go mod vendor
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Run Crawl
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker-compose exec crawl go run cmd/main.go
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Use air autoload
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker-compose exec crawl air -c .air.conf
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  Deploy
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Run file makefile build project into folder bin
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;make copy_template build_app_web build_app_crawl
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  Create Services in run in background
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Create Service and Run App Web
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sudo nano /lib/systemd/system/app_web.service
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Copy Content
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[Unit]
Description=App Web

[Service]
Type=simple
Restart=always
RestartSec=5s
WorkingDirectory=/root/actions-runner/crawl/crawl/crawl/bin
ExecStart=/root/actions-runner/crawl/crawl/crawl/bin/app_web

[Install]
WantedBy=multi-user.target
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sudo systemctl enable app_web
sudo systemctl start app_web
sudo systemctl status app_web
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Run App Crawl
&lt;/h2&gt;



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

&lt;/div&gt;



&lt;h2&gt;
  
  
  Add CronTab
&lt;/h2&gt;



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

&lt;/div&gt;



&lt;h3&gt;
  
  
  add cron time
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;*/60 * * * * /root/actions-runner/crawl/crawl/crawl/bin/app_crawl crawl-article
*/20 * * * * /root/actions-runner/crawl/crawl/crawl/bin/app_crawl crawl-article-detail
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Reload cron run
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sudo service cron reload
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Website
&lt;/h2&gt;

&lt;p&gt;&lt;a href="http://techdaily.info/"&gt;http://techdaily.info/&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;&lt;a href="https://www.buymeacoffee.com/bumkom"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Vf1pJosK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://www.buymeacoffee.com/assets/img/custom_images/yellow_img.png" alt="&amp;quot;Buy Me A Coffee&amp;quot;" width="170" height="37"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/chieund/crawl"&gt;https://github.com/chieund/crawl&lt;/a&gt;&lt;/p&gt;

</description>
      <category>go</category>
      <category>nginx</category>
      <category>crawler</category>
      <category>colly</category>
    </item>
    <item>
      <title>Awesome about Golang Learning</title>
      <dc:creator>Bum Kom</dc:creator>
      <pubDate>Tue, 01 Nov 2022 15:26:22 +0000</pubDate>
      <link>https://dev.to/chieund/awesome-about-golang-learning-4pcb</link>
      <guid>https://dev.to/chieund/awesome-about-golang-learning-4pcb</guid>
      <description>&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--k84-TTzL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ura95keif8czpn85gts0.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--k84-TTzL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ura95keif8czpn85gts0.jpeg" alt="Image description" width="302" height="167"&gt;&lt;/a&gt;&lt;br&gt;
List about awesome golang&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Tutorial&lt;/li&gt;
&lt;li&gt;Framework Golang web Gin, Echo, Fiber, Beego&lt;/li&gt;
&lt;li&gt;Project Structure template&lt;/li&gt;
&lt;li&gt;Clear Code&lt;/li&gt;
&lt;li&gt;Source Example&lt;/li&gt;
&lt;li&gt;Algorithms&lt;/li&gt;
&lt;li&gt;Video&lt;/li&gt;
&lt;li&gt;Ebooks&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://github.com/chieund/golang_learning"&gt;https://github.com/chieund/golang_learning&lt;/a&gt;&lt;/p&gt;

</description>
      <category>go</category>
      <category>algorithms</category>
      <category>leetcode</category>
      <category>ebooks</category>
    </item>
  </channel>
</rss>
