https://jsokit.com/blog/categories/tutorial/ Recent content in Tutorial on JsonKit Blog Hugo en © 2025 JsonKit Tue, 12 May 2026 16:16:32 +0000 https://jsokit.com/blog/posts/xml-formatter-building-a-parser-with-state-machine/ Tue, 12 May 2026 16:16:32 +0000 https://jsokit.com/blog/posts/xml-formatter-building-a-parser-with-state-machine/ XML Formatter: Building a Parser with State Machine Dealing with minified XML from third-party APIs is painful. Most online tools are either bloated or can’t handle special nodes like CDATA and comments. So I built my own. Here’s how it works. The Core: No Native API for XML Unlike JSON where JSON.parse + JSON.stringify does the job in two lines, XML has no native formatting API. You have to parse the string yourself, identify tags, attributes, and text content, then reformat. https://jsokit.com/blog/posts/word-counter-unicode-handling-and-regex-edge-cases-in-mixed-chinese-english-text/ Tue, 12 May 2026 15:16:32 +0000 https://jsokit.com/blog/posts/word-counter-unicode-handling-and-regex-edge-cases-in-mixed-chinese-english-text/ Word Counter: Unicode Handling and Regex Edge Cases in Mixed Chinese-English Text Writing articles, tweets, documentation—you always need to count words. Many word counters exist, but when mixing Chinese and English, the results are often wrong. The culprit? Improper Unicode character handling and regex edge cases. The Core Logic of Word Counting 1. Character Count Seems simple—just text.length, right? Not quite. const text = "Hello 世界" console.log(text.length) // 8, correct But here’s the catch—Emoji and special characters: https://jsokit.com/blog/posts/from-handshake-to-heartbeat-building-a-websocket-online-testing-tool/ Mon, 11 May 2026 16:42:42 +0000 https://jsokit.com/blog/posts/from-handshake-to-heartbeat-building-a-websocket-online-testing-tool/ From Handshake to Heartbeat: Building a WebSocket Online Testing Tool Recently, I was developing a real-time chat feature with WebSocket on the backend. Debugging was painful—browser DevTools’ Network panel shows WebSocket frames, but it’s not intuitive. So I built an online testing tool and documented the implementation process. WebSocket Connection Lifecycle WebSocket isn’t just a simple TCP socket—it has a complete handshake and state management mechanism: const ws = new WebSocket('wss://example. https://jsokit.com/blog/posts/browser-based-web-screenshots-from-getdisplaymedia-api-to-canvas-implementation/ Mon, 11 May 2026 15:05:34 +0000 https://jsokit.com/blog/posts/browser-based-web-screenshots-from-getdisplaymedia-api-to-canvas-implementation/ Browser-Based Web Screenshots: From getDisplayMedia API to Canvas Implementation I recently built a web screenshot tool, thinking it’d be straightforward. Spoiler: I hit several gotchas. Here’s what I learned, in case you’re tackling the same problem. Choosing a Screenshot Approach There are three common approaches for web screenshots: Server-side - Use Puppeteer/Playwright to render and capture on the server html2canvas - Frontend library that converts DOM to Canvas getDisplayMedia API - Native browser screen capture API Each has trade-offs: https://jsokit.com/blog/posts/uuid-generator-algorithms-from-v1-to-v4-implementation/ Sun, 10 May 2026 17:07:26 +0000 https://jsokit.com/blog/posts/uuid-generator-algorithms-from-v1-to-v4-implementation/ UUID Generator Algorithms: From v1 to v4 Implementation Building a distributed system recently, I needed globally unique IDs. Started with auto-increment database IDs, then hit a wall with sharding—different databases would generate conflicting IDs. After some research, I went with UUID. Here’s what I learned. What is UUID? UUID (Universally Unique Identifier) is a 128-bit unique identifier, typically shown as a 36-character string: 550e8400-e29b-41d4-a716-446655440000 The format is 8-4-4-4-12, separated by hyphens. https://jsokit.com/blog/posts/url-encoding-decoded-from-percent-signs-to-encodeuricomponent/ Sun, 10 May 2026 11:42:34 +0000 https://jsokit.com/blog/posts/url-encoding-decoded-from-percent-signs-to-encodeuricomponent/ URL Encoding Decoded: From Percent Signs to encodeURIComponent Last week, I was debugging a payment callback where URL parameters were double-encoded, causing order ID parsing failures. It turned out many developers still treat URL encoding as just “throw encodeURIComponent at it.” Let me break down the actual mechanics and implementation details. The Essence: Percent-Encoding URL encoding is officially called “percent-encoding.” The rule is straightforward: non-ASCII and special characters are represented as %XX, where XX is the character’s hexadecimal ASCII value. https://jsokit.com/blog/posts/unit-converter-from-floating-point-precision-to-temperature-offsets/ Sat, 09 May 2026 17:52:56 +0000 https://jsokit.com/blog/posts/unit-converter-from-floating-point-precision-to-temperature-offsets/ Unit Converter: From Floating-Point Precision to Temperature Offsets I recently needed to convert between inches and centimeters for a project. Wrote a quick formula, but the result didn’t match the design specs—that’s when I realized unit conversion isn’t as simple as it looks. Basic Conversion: The Base Unit Method The obvious approach is direct formulas: // Inch to centimeter const inchToCm = (inch) => inch * 2.54 // Centimeter to inch const cmToInch = (cm) => cm / 2. https://jsokit.com/blog/posts/how-llm-token-counting-works-building-a-client-side-token-estimator/ Sat, 09 May 2026 14:41:07 +0000 https://jsokit.com/blog/posts/how-llm-token-counting-works-building-a-client-side-token-estimator/ How LLM Token Counting Works: Building a Client-Side Token Estimator Every time you call a GPT or Claude API, you’re paying by the token. But what exactly is a token, and how do you estimate token counts without loading a 500MB tokenizer model into your browser? Let’s break down the algorithm behind the Token Counter tool, and why a simple heuristic can get you surprisingly close to the real count. https://jsokit.com/blog/posts/javascript-timezone-conversion-from-unix-timestamps-to-iana-identifiers/ Fri, 08 May 2026 17:18:37 +0000 https://jsokit.com/blog/posts/javascript-timezone-conversion-from-unix-timestamps-to-iana-identifiers/ JavaScript Timezone Conversion: From Unix Timestamps to IANA Identifiers Recently built a cross-timezone meeting scheduler and stepped into quite a few timezone pitfalls. Let me share what I learned about JavaScript timezone handling. The Essence: Unix Timestamps Have No Timezone Here’s a core concept: timestamps are timezone-agnostic. const now = Date.now() // 1714838400000 - milliseconds since UTC 1970-01-01 // Beijing: 2024-05-04 20:00:00 // New York: 2024-05-04 08:00:00 // Same timestamp, different displays No matter where you are on Earth, Date. https://jsokit.com/blog/posts/unix-timestamp-pitfalls-a-complete-guide-to-timestamp-conversion/ Fri, 08 May 2026 10:48:36 +0000 https://jsokit.com/blog/posts/unix-timestamp-pitfalls-a-complete-guide-to-timestamp-conversion/ Unix Timestamp Pitfalls: A Complete Guide to Timestamp Conversion Last week, I was debugging a production issue. The logs were filled with numbers like 1745678901. Our new intern looked confused: “What are these?” I said, “Unix timestamps.” He asked, “How do I convert them to human-readable time?” That question made me realize timestamp conversion is trickier than I thought. What is a Unix Timestamp? A Unix timestamp is the number of seconds since January 1, 1970, 00:00:00 UTC.