Dev Tools

Articles

Deep dives + practical guides; each article pairs with a tool on this site so you can try ideas as you read.

Image to PDF: The Complete Guide — JPG / PNG / HEIC Merge, Paper Sizes & Margins

7 min

Office expense reports, school assignments, signed contracts — merging photos into a single PDF is a daily need. "Image to PDF" sounds simple but has plenty of gotchas: will HEIC open, A4 vs Letter, N-up layout to save paper, will the printer crop margins. This guide uses our `image-to-pdf` tool as the worked example, covers each detail in one place, and runs entirely **client-side — your files never leave the browser**.

↳ /tools/image-to-pdf

Image to Base64: The Complete Guide — Data URIs, CSS Backgrounds, Email Inline

6 min

Embedding images directly into HTML / CSS / JSON — Base64 has been the front-end engineer's image-bundling tool for 15 years. But when does inlining actually help, and when does it hurt? What exactly is a Data URI? Why must email images be inline? This guide uses our `image-base64` tool as the worked example to clarify Base64's real use cases and avoid three classic misuses.

↳ /tools/image-base64

AI Token Counting: The Complete Guide — GPT / Claude / Gemini, Context Limits, Cost Saving

8 min

"Does my prompt fit?" "How much will it cost?" "Will I blow the context window?" — three questions every AI app developer has been asked by their PM. But OpenAI / Anthropic / Google all tokenize differently, and Chinese vs English tokens differ even more. This guide uses our `token-counter` tool as the worked example to break down real token-estimation logic, the cost comparison across 5 leading models, and 3 practical cost-saving techniques.

↳ /tools/token-counter

Mermaid Complete Guide: Flowchart / Sequence / Gantt / ER / Class — 7 Diagrams, Drop into GitHub

7 min

The worst part of drawing flowcharts isn't drawing — it's changing them. Lucidchart drag-and-drop, Excalidraw rebuilds — every requirement change starts over. **Mermaid describes diagrams in plain text**: version control, git diff, multi-person collaboration — all solved. This guide uses our `mermaid-editor` tool as the worked example, covering syntax for the 7 diagram types, 3 gotchas I've hit, and how it integrates with GitHub / Notion / Confluence.

↳ /tools/mermaid-editor

HEIC to JPG: The Complete Guide — Why iPhone Uses It, Windows Compatibility, Batch Tips

6 min

"I sent you photos but you can't open them?" — this conversation happens a million times a day between iPhone and Android / Windows users. **HEIC is Apple's default photo format since iOS 11** — better compression than JPG but worse compatibility. This guide covers HEIC's design rationale, when to convert to JPG, three batch conversion methods, and the details around preserving EXIF metadata.

↳ /tools/heic-to-jpg

JWT in depth: three segments, HS256 vs RS256, common pitfalls, safe storage

8 min

JWTs are the most widely adopted stateless authentication standard of the past decade — and one of the most frequently misused protocols on the OWASP Top 10. From a QA angle, understanding the structure is what turns vague "test auth" tickets into concrete security test cases.

↳ /tools/jwt

Regex in depth: capture groups, lookaround, catastrophic backtracking, cross-language differences

9 min

regex is something most engineers use daily but never feel fully fluent in. Here are the techniques I actually reach for after years of QA / SRE work — plus the real cases where my browser locked up because of one careless quantifier.

↳ /tools/regex

Selector in depth: CSS vs XPath, stable selector patterns, why Playwright's getByRole wins

7 min

The painful part of E2E automation isn't writing steps — it's selectors that break every other day. Here are the patterns that worked across years of writing, debugging, and migrating Selenium / Cypress / Playwright suites, plus why Playwright pushes role-based locators.

↳ /tools/selector

Reading percentiles: p95, p99, and Apdex in practice

6 min

When a QA or SRE team gets the first batch of load-test numbers, the question is always the same — "is this normal?" Here's how percentiles became the core of SLOs in industry, and how to read them.

↳ /tools/percentile

Taiwan test data in depth: national ID algorithm, business-number 7th-digit rule, Luhn credit cards

5 min

Doing QA in fintech, e-commerce, or government projects means generating volumes of test data — but using real personal data is a violation of PDPA / GDPR. This article covers why fake data is required, the Taiwan official checksum algorithms, and real QA scenarios where this data matters.

↳ /tools/tw-test-data