https://jsokit.com/blog/tags/api/ Recent content in Api 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/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/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/string-escape-implementation-from-regex-replacement-to-unicode-handling/ Sun, 03 May 2026 17:58:01 +0000 https://jsokit.com/blog/posts/string-escape-implementation-from-regex-replacement-to-unicode-handling/ String Escape Implementation: From Regex Replacement to Unicode Handling Dealing with user input strings often causes problems when special characters break JSON parsing. Newlines, quotes, backslashes - they all need proper handling. So I built a string escape tool and here’s what I learned. The Essence of Escaping Escaping means converting special characters into escape sequences. For example, the newline character \n (ASCII 10) becomes two characters: \ and n. https://jsokit.com/blog/posts/from-windowscreen-to-devicepixelratio-a-complete-guide-to-browser-screen-apis/ Thu, 30 Apr 2026 16:17:27 +0000 https://jsokit.com/blog/posts/from-windowscreen-to-devicepixelratio-a-complete-guide-to-browser-screen-apis/ From window.screen to devicePixelRatio: A Complete Guide to Browser Screen APIs While building a responsive layout debugger, I dove deep into browser screen APIs. Beyond the common screen.width, there’s a lot more to explore. Here’s what I learned. Core API: The screen Object The window.screen object provides rich screen information: interface ScreenInfo { width: number // Physical screen width (pixels) height: number // Physical screen height (pixels) availWidth: number // Available width (minus taskbar) availHeight: number // Available height (minus taskbar) colorDepth: number // Color depth (usually 24 or 32-bit) pixelDepth: number // Pixel depth (usually equals colorDepth) orientation: string // Screen orientation (landscape-primary, etc. https://jsokit.com/blog/posts/understanding-robotstxt-from-scratch-the-gatekeeper-for-search-engine-crawlers/ Thu, 30 Apr 2026 13:08:50 +0000 https://jsokit.com/blog/posts/understanding-robotstxt-from-scratch-the-gatekeeper-for-search-engine-crawlers/ Understanding robots.txt from Scratch: The Gatekeeper for Search Engine Crawlers Last week, while investigating indexing issues on our website, I discovered that Google had indexed our /api/ endpoints and /admin/ login pages. This was embarrassing—sensitive paths shouldn’t be crawled. The root cause? We didn’t have a robots.txt file configured. This made me realize that many developers only have a superficial understanding of robots.txt. Today, let’s dive into this seemingly simple file that actually hides many nuances. https://jsokit.com/blog/posts/rest-api-documentation-generator-from-manual-maintenance-to-one-click-automation/ Wed, 29 Apr 2026 17:07:25 +0000 https://jsokit.com/blog/posts/rest-api-documentation-generator-from-manual-maintenance-to-one-click-automation/ REST API Documentation Generator: From Manual Maintenance to One-Click Automation Every backend developer knows this pain: the API changed but the docs didn’t; new team members stare at outdated documentation in confusion; during integration, parameter descriptions turn out to be the exact opposite of actual behavior. Manually maintaining API docs is not only time-consuming—it’s inherently prone to drifting out of sync with the code. Let’s talk about how a REST API documentation generator solves this problem, and dive into the technical implementation details. https://jsokit.com/blog/posts/random-data-generator-mock-data-best-practices-and-implementation-details/ Sat, 25 Apr 2026 15:03:10 +0000 https://jsokit.com/blog/posts/random-data-generator-mock-data-best-practices-and-implementation-details/ Random Data Generator: Mock Data Best Practices and Implementation Details Creating test data manually is fine for a few records, but generating 100 test entries? That’s torture. During a recent project, I hit a wall: the backend API wasn’t ready, but the frontend needed data for debugging. QA needed edge cases. Demos required realistic user data. So I built a random data generator and dove into mock data best practices. 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: https://jsokit.com/blog/posts/browser-side-ocr-with-tesseractjs-a-webassembly-text-recognition-journey/ Sun, 19 Apr 2026 11:26:42 +0000 https://jsokit.com/blog/posts/browser-side-ocr-with-tesseractjs-a-webassembly-text-recognition-journey/ Browser-Side OCR with Tesseract.js: A WebAssembly Text Recognition Journey I recently needed to add image-to-text functionality to a project. Instead of calling a backend OCR API, I decided to go with a pure frontend solution for privacy and offline support. After diving into Tesseract.js, here’s what I learned. How OCR Actually Works OCR (Optical Character Recognition) transforms image pixels into text. The traditional pipeline: Preprocessing: Grayscale, binarization, noise reduction, skew correction Text detection: Find text regions in the image Character segmentation: Split continuous text into individual characters Feature extraction: Extract feature vectors for each character Character recognition: Match against trained models Tesseract is Google’s open-source OCR engine, originally written in C++.