https://jsokit.com/blog/tags/javascript/ Recent content in Javascript on JsonKit Blog Hugo en © 2025 JsonKit 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/ 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/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/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/text-deduplication-algorithms-from-set-to-efficient-implementation/ Wed, 06 May 2026 14:17:41 +0000 https://jsokit.com/blog/posts/text-deduplication-algorithms-from-set-to-efficient-implementation/ Text Deduplication Algorithms: From Set to Efficient Implementation Duplicate data is everywhere. Log analysis, user list cleaning, keyword extraction… the scenarios are endless. Let’s dive into several deduplication approaches and their performance characteristics. The Simplest Solution: Set Deduplication JavaScript’s Set is built for uniqueness: function dedupeLines(text) { const lines = text.split('\n') return [...new Set(lines)].join('\n') } One line. Done. But there are caveats: Order not guaranteed: Set doesn’t preserve insertion order (though modern JS engines mostly do) Case-sensitive: "Apple" and "apple" are treated as different items Empty lines: Blank lines get deduplicated too Order-Preserving Deduplication If you need to keep the original order, use Set + filter: https://jsokit.com/blog/posts/from-string-concatenation-to-parameterized-queries-building-a-safe-sql-builder/ Sat, 02 May 2026 13:32:23 +0000 https://jsokit.com/blog/posts/from-string-concatenation-to-parameterized-queries-building-a-safe-sql-builder/ From String Concatenation to Parameterized Queries: Building a Safe SQL Builder During a recent code review, I found this pattern scattered throughout the codebase: const sql = `SELECT * FROM users WHERE id = ${userId}` Convenient? Yes. Secure? Absolutely not. This is a textbook SQL injection vulnerability. If userId comes from user input and someone passes ' OR '1'='1, your entire users table is compromised. I decided to build a SQL query builder tool that generates common queries quickly while avoiding the security pitfalls of manual SQL writing. https://jsokit.com/blog/posts/set-operations-in-javascript-from-math-symbols-to-code/ Fri, 01 May 2026 17:59:48 +0000 https://jsokit.com/blog/posts/set-operations-in-javascript-from-math-symbols-to-code/ Set Operations in JavaScript: From Math Symbols to Code I used to write nested loops when comparing two lists—finding common items, merging with deduplication, calculating differences. The code was messy. Then I discovered JavaScript’s Set object, which is practically built for this. Mathematical Foundation Quick refresher: Union (A ∪ B): All elements in A or B Intersection (A ∩ B): Elements in both A and B Difference (A - B): Elements in A but not in B Symmetric Difference (A △ B): Elements in either A or B, but not both Mathematically, set elements are unique and unordered. https://jsokit.com/blog/posts/building-a-regex-tester-real-time-highlighting-and-performance-optimization/ Tue, 28 Apr 2026 15:26:37 +0000 https://jsokit.com/blog/posts/building-a-regex-tester-real-time-highlighting-and-performance-optimization/ Building a Regex Tester: Real-time Highlighting and Performance Optimization I was working on form validation recently, dealing with various regular expressions. Testing each regex change required a page refresh - too tedious. So I built my own regex tester. Here’s how it works. How Regex Engines Work JavaScript uses a backtracking regex engine. Think of it as “trial and error”: const regex = /a+b/ const text = 'aaab' // Engine execution: // 1. https://jsokit.com/blog/posts/understanding-radix-conversion-from-binary-to-hexadecimal-algorithms/ Sat, 25 Apr 2026 09:14:41 +0000 https://jsokit.com/blog/posts/understanding-radix-conversion-from-binary-to-hexadecimal-algorithms/ Understanding Radix Conversion: From Binary to Hexadecimal Algorithms While building a radix converter tool, I revisited the fundamentals of number base conversion. Although parseInt and toString handle most cases, understanding the underlying algorithms is crucial for dealing with edge cases. JavaScript Built-in Conversion The simplest approach uses JavaScript’s built-in methods. Number.prototype.toString(radix) converts decimal to any base: const num = 255 num.toString(2) // "11111111" (binary) num.toString(8) // "377" (octal) num.toString(16) // "ff" (hexadecimal) Reverse conversion uses parseInt(string, radix): https://jsokit.com/blog/posts/building-a-placeholder-image-generator-with-canvas-api-from-basics-to-performance/ Wed, 22 Apr 2026 17:56:14 +0000 https://jsokit.com/blog/posts/building-a-placeholder-image-generator-with-canvas-api-from-basics-to-performance/ Building a Placeholder Image Generator with Canvas API: From Basics to Performance As a frontend developer, I often need placeholder images: design assets aren’t ready, images are missing, or I’m building a quick prototype. I used to rely on services like placehold.co or picsum.photos, but network issues or specific style requirements led me to build my own. Canvas API Basics The core is the Canvas API. Here’s the simplest implementation: