DEV Community: Bum Kom

I built a beautiful Markdown Viewer for Chrome, VS Code, and Desktop — here's what I learned

Bum Kom — Fri, 20 Mar 2026 17:09:58 +0000

The Problem

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.

I wanted one tool that renders Markdown beautifully — everywhere I work.

The Solution: Markdown Viewer Premium 💎

A single React UI core, deployed as:

🌍 Chrome Extension — renders .md files directly in the browser
💻 VS Code Extension — replaces the default Markdown preview
🖥️ Desktop App — native app built with Tauri v2

Features

Syntax Highlighting (100+ Languages)

One-click copy button on every code block. Supports JavaScript, Python, Go, Rust, SQL, and 100+ more.

Mermaid Diagrams

Flowcharts, sequence diagrams, gantt charts, pie charts — all rendered natively. Click to expand fullscreen with zoom & pan controls.

Math & LaTeX

Render equations beautifully with KaTeX — inline and block math supported.

And More...

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

Tech Stack

The architecture is a monorepo with pnpm workspaces:

packages/
├── ui/                  # Shared React component library
├── chrome-extension/    # Chrome/Edge/Brave (Manifest V3)
├── vscode-extension/    # VS Code extension
└── desktop-app/         # Tauri v2 desktop app

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

Why Monorepo?

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

Challenges & Lessons Learned

1. Windows Line Endings Break Everything

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

Fix: content.split(/\r?\n/) instead of content.split('\n').

2. Tauri v2 Changed All the Event Names

Drag & drop wasn't working on the desktop app. Turns out Tauri v2 renamed all drag-drop events:

tauri://file-drop → tauri://drag-drop
tauri://file-drop-hover → tauri://drag-over
tauri://file-drop-cancelled → tauri://drag-leave

3. Print CSS is Harder Than You Think

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.

4. Shared Components Need Platform Detection

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

Try It Out

Platform	Link
🌍 Chrome / Edge / Brave	Chrome Web Store
💻 VS Code	VS Code Marketplace
🖥️ Desktop (Windows, macOS & Linux)	GitHub Releases
🌐 Website	markdown-viewer-premium-site.vercel.app

What's Next

AI Summary — summarize documents using Chrome's built-in AI
Presentation Mode — convert Markdown to slides
Advanced Search — full-text search with regex support

If you find this useful, I'd appreciate a ⭐ on the Chrome Web Store or VS Code Marketplace!

Built with ❤️ by Bumkom

I Built the Most Beautiful Markdown Viewer for Developers (And It's Free)

Bum Kom — Sun, 01 Feb 2026 14:25:31 +0000

Why is reading Markdown still so... ugly?
As developers, we live in Markdown. We write documentation, READMEs, notes, and blog posts in it. But whenever I opened a local
.md
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!).

I wanted something better. I wanted an experience that felt like reading a premium documentation site—something with:

✨ Beautiful Typography (Inter & JetBrains Mono)
🌫️ Glassmorphism UI
🌓 Perfect Dark Mode
📊 Rich Diagram Support
So, I built Markdown Viewer Premium, and I want to share how it transforms the way you view documentation.

The Problem with Default Viewers
Most browser extensions for Markdown are:

Outdated: Built years ago, using old styling.
Basic: Just standard HTML, no syntax highlighting or diagrams.
Ugly: No attention to whitespace, readability, or aesthetics.
Meet Markdown Viewer Premium 🚀
This isn't just a parser; it's a rendering engine designed for aesthetics and readability.

Key Features

🎨 Stunning "Glass" Aesthetics
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.
🧜‍♀️ Mermaid Diagrams with Zoomable Popup
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.
💻 Rich Code, Math & GFM Support
Syntax Highlighting: Beautiful updates for all major languages.
GFM Support: Full support for Task Lists [ ], Tables, and Strikethrough.
LaTeX Support: Write $ E = mc^2 $ and see it rendered instantly with KaTeX.
Copy Button: One-click copy for code snippets.
🖨️ Professional PDF Export
Need to share? Hit Ctrl+P (or Cmd+P) to export your beautifully rendered markdown as a clean, styled PDF.
🛠 Power User Tools
Raw View: Instant toggle between rendered view and raw markdown text.
Theme Switching: seamless Toggle between Light and Dark modes.
Smart TOC: Sticky table of contents for easy navigation.
🐙 Seamless GitHub Integration
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.

Why Use This?
I built this to fix the pain points of existing tools:

Readability: Most viewers ignore line height and typography. This one prioritizes them.
Completeness: It doesn't break on complex diagrams or math equations.
Speed: It loads instantly, even for large documents.
Try it out!
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.

Link to Chrome Web Store
https://chromewebstore.google.com/detail/markdown-viewer-premium/abnpdibfmmdcjhdakgjeiepimokkhjjo?authuser=0&hl=en
Let me know what you think in the comments! 👇

I Built a Productivity "Command Center" for Chrome with React 19 & Glassmorphism 🚀

Bum Kom — Sat, 24 Jan 2026 13:23:28 +0000

The Problem: "New Tab" Chaos 🤯

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.
As a developer, I wanted my "New Tab" to be a sanctuary of focus—a place that helps me get back into the zone, not pull me out of it.
So, I built Work Dashboard. It's a premium, productivity-focused replacement for the Chrome New Tab page, designed with a sleek Glassmorphism aesthetic.

✨ The Features

Here is what makes it different from the hundreds of other dashboard extensions out there:

1. The "Flow State" Media Controller 🎧

I hate hunting through 50 open tabs just to pause Spotify or skip a YouTube ad.
Work Dashboard 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.

2. Glassmorphism Design System 🎨

I didn't want another flat, boring tool. I used Vanilla CSS Variables to build a dynamic, frosted-glass UI that adapts to your wallpaper.

Themes: Includes "Deep Dark" for coding late at night and "Nature" for a calming vibe.
Customization: Drag-and-drop widgets to build your perfect layout. ### 3. Developer-First Widgets 🛠
Live Status: See your unread Gmail count directly on the dashboard icon.
Quick Notes: A scratchpad for those "don't forget this" thoughts.
App Library: 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:
React 19: Leveraging the latest concurrent features for a snappy UI.
Vite: For an instant dev server and optimized distinct builds.
@dnd-kit: The best library standard for accessible drag-and-drop interfaces in React.
Chrome Extension APIs: Heavily utilizing chrome.tabs (for media control), chrome.topSites, and chrome.storage.sync 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. I'd love your feedback:
What is the one feature your current New Tab page is missing?
Do you prefer a minimal clock/greeting or a data-rich dashboard? Drop a comment below! 👇 #react #webdev #showcase #productivity Get it on Chrome Web Store

DailyLink - A Modern Link Curation Platform Built with Next.js & Supabase

Bum Kom — Tue, 06 Jan 2026 18:48:34 +0000

DailyLink - Your Daily Dose of Curated Links 🔗

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 DailyLink - a modern link curation platform that solves these exact problems.

🚀 What is DailyLink?

DailyLink is a sleek, community-driven platform where you can:

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

✨ Key Features

🔒 Personal Collections

Keep your links private or share them publicly. Perfect for researchers, developers, and content enthusiasts who want organized link management.

⚡ Smart Favorites System

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

🏷️ Tag Organization

Organize links with beautiful, rounded tags. Browse by categories or search across your entire collection instantly.

📱 Mobile-First Design

Fully responsive with a clean mobile interface including slide-out navigation and touch-optimized interactions.

🌐 Community Discovery

Explore links shared by other users. Find hidden gems and trending content in your areas of interest.

🛠️ Tech Stack

DailyLink is built with modern web technologies:

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

🎨 Design Philosophy

We focused on creating a clean, distraction-free experience:

Minimal UI that puts content first
Lightning-fast interactions with optimistic updates
Beautiful typography and consistent spacing
Intuitive navigation with URL-based routing
Accessibility-first approach

🌟 What Makes It Special?

1. Community-Driven Curation

Unlike traditional bookmarking tools, DailyLink encourages sharing quality content with the community.

2. Lightning Bolt System

The ⚡ favorite system creates better quality signals than traditional likes.

3. Guest-Friendly

Visitors can browse community content and tags without signing up, encouraging organic discovery.

4. Developer Experience

Built with TypeScript, proper error handling, and comprehensive linting for maintainable code.

🚀 Try It Out

Live Demo: dailylink.cc

Features to explore:

Browse community links without signing up
Create an account to start your personal collection
Try the lightning-fast search functionality
Explore content by tags and categories

🔮 What's Next?

We're planning exciting features:

Browser extension for one-click saving
API access for developers
Advanced analytics for link performance
Team collaboration features
RSS feed integration

💭 Lessons Learned

Building DailyLink taught us valuable lessons:

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

🤝 Get Involved

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.

Try it: dailylink.cc
Feedback: Share your thoughts in the comments below!

What's your favorite link curation tool? How do you organize your daily discoveries? Let's discuss in the comments! 👇

webdev #nextjs #supabase #typescript #productivity

GPT-4o Mini vs. Claude 3.5 Haiku: A Real-World Performance Comparison

Bum Kom — Mon, 22 Dec 2025 09:22:18 +0000

GPT-4o Mini vs. Claude 3.5 Haiku: A Real-World Performance Comparison

This report analyzes the performance of GPT-4o Mini (OpenAI) and Claude 3.5 Haiku (Anthropic) based on a live test conducted on December 22, 2024, using a dedicated comparison tool.
https://www.llmkit.cc/model-comparison/claude-3-5-haiku-20241022-vs-gpt-4o-mini

📊 Comparison Summary

The test utilized the prompt: "Hello, how are you?".

Metric	GPT-4o Mini (MegaLLM)	Claude 3.5 Haiku (Anthropic)	Winner
Response Time	1,925ms	1,327ms	🏆 Claude 3.5 Haiku
Cost per Request	$0.0000315	$0.00024	🏆 GPT-4o Mini
Tokens Used	42	40	Tie
Context Window	128K	200K	🏆 Claude 3.5 Haiku

🚀 Speed & Performance

Claude 3.5 Haiku is the clear winner for performance-critical applications.

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

💰 Cost Efficiency

GPT-4o Mini is the budget-friendly leader, being significantly more affordable for high-volume tasks.

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

🧠 Capabilities & Context

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

🎯 Final Verdict

Choose GPT-4o Mini if:

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

Choose Claude 3.5 Haiku if:

✅ Speed is critical for a snappy user experience.
✅ You need a larger 200K context window for massive documents.
✅ You prioritize response quality and nuance over raw operational cost.

Results generated using LLMKit comparison tool.

🧰 I Built LLMKit: A Complete Toolkit for Testing LLM APIs

Bum Kom — Fri, 19 Dec 2025 18:50:05 +0000

Tired of switching between Postman, documentation, and code editors when testing LLM APIs? I built a solution. 🚀

🤔 The Problem

As a developer working with AI integrations, I was constantly:

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

✨ The Solution: LLMKit

I built a Next.js app that handles everything in one place:

Feature	Description
🔍 Model Database	50+ LLM models with specs and pricing
⚡ Provider Comparison	Test same model across different APIs
💻 Code Generator	Auto-generate JavaScript, Python, cURL
🧪 API Tester	Test directly in browser with metrics
🔗 Shareable URLs	Share configs via URL parameters

🛠️ Tech Stack

Built with modern technologies:

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

🔥 Key Features

1. Smart Code Generation

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.

2. Shareable Configurations

Share your exact testing setup via URL parameters. Perfect for team collaboration and documentation.

3. Performance Tracking

Real-time metrics including response time, token usage, and cost estimation for every API call.

📚 What I Learned

Key Insights from Building LLMKit

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

🚧 Challenges Solved

CORS issues → Next.js API routes as proxy
API key security → Client-side only with warnings
Mobile UX → Tab-based navigation for small screens

📊 Results

✅ Free to use - No signup required

✅ 50+ models supported across providers

✅ Mobile responsive - Works on any device

✅ Real-time metrics - Response time, tokens, cost

🎯 Try It Out

🔗 Live Demo: https://llmkit.cc

Perfect for:

API developers testing integrations
Teams comparing model performance
Startups evaluating AI providers
Anyone learning LLM APIs

🔮 What's Next?

[ ] User authentication & saved configs
[ ] Team collaboration features
[ ] API usage analytics
[ ] Streaming response support

Built this because I needed it. Turns out other developers did too!

What tools do you use for API testing? 👇

Crawler Web dev.to using Colly when learning Golang

Bum Kom — Tue, 01 Nov 2022 15:54:56 +0000

I would like to recommend a website of mine that I made during my Golang learning.
My website http://techdaily.info is for learning golang language.
Besides crawling dev.to, I also crawl some other websites like freecodecamp.com, medium.com, hashnode.com, logrocket.com, infoq.com
So I built a website that specializes in crawling other sites
some technology that i used.

Golang
Colly
Nginx
Service
Docker
Mysql
Run action deploy to server
Cronjob daily crawl

Build Run Local

Change file app_example.yaml to app.yaml

cp app_example.yaml app.yaml

Build Docker

docker-compose up --build

Install package Golang

docker-compose exec crawl go mod tidy

Folder vendor

docker-compose exec crawl go mod vendor

Run Crawl

docker-compose exec crawl go run cmd/main.go

Use air autoload

docker-compose exec crawl air -c .air.conf

Deploy

Run file makefile build project into folder bin

make copy_template build_app_web build_app_crawl

Create Services in run in background

Create Service and Run App Web

sudo nano /lib/systemd/system/app_web.service

Copy Content

[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

sudo systemctl enable app_web
sudo systemctl start app_web
sudo systemctl status app_web

Run App Crawl

./app_crawl

Add CronTab

crontab -e

add cron time

*/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

Reload cron run

sudo service cron reload

Website

http://techdaily.info/

https://github.com/chieund/crawl

Awesome about Golang Learning

Bum Kom — Tue, 01 Nov 2022 15:26:22 +0000

List about awesome golang

Tutorial
Framework Golang web Gin, Echo, Fiber, Beego
Project Structure template
Clear Code
Source Example
Algorithms
Video
Ebooks

https://github.com/chieund/golang_learning