https://jsokit.com/blog/tags/html/ Recent content in Html on JsonKit Blog Hugo en © 2025 JsonKit Mon, 11 May 2026 15:05:34 +0000 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/from-regex-to-ast-building-a-markdown-to-html-parser/ Tue, 14 Apr 2026 15:16:01 +0000 https://jsokit.com/blog/posts/from-regex-to-ast-building-a-markdown-to-html-parser/ From Regex to AST: Building a Markdown to HTML Parser I needed a Markdown to HTML converter for a developer toolbox project. My first thought was to use marked.js, but then I realized — the core logic isn’t that complex. Why not implement it myself and learn how parsers work? Why Not Use an Existing Library? marked.js is powerful, but has some drawbacks: Large bundle size: 40KB minified, overkill for basic features Over-engineered: Supports GFM, tables, footnotes — I just need headings, lists, code blocks Black box: Hard to debug when something goes wrong A custom implementation is under 100 lines of core code, and you learn parser fundamentals. https://jsokit.com/blog/posts/html-formatter-implementation-from-string-parsing-to-indentation-reconstruction/ Wed, 18 Feb 2026 17:46:16 +0000 https://jsokit.com/blog/posts/html-formatter-implementation-from-string-parsing-to-indentation-reconstruction/ HTML Formatter Implementation: From String Parsing to Indentation Reconstruction Tool link: https://jsokit.com/tools/html-format Introduction In web development, the readability of HTML code directly impacts team collaboration efficiency. Poorly indented code gives headaches to future maintainers. There are many HTML formatters on the market, but how do they work under the hood? This article dives deep into the core algorithms and implementation details of HTML formatting. Core Principle: Two-Phase Processing HTML formatting is essentially a “parse → reconstruct” process: https://jsokit.com/blog/posts/html-entity-encoding-from-xss-prevention-to-character-escaping-implementation/ Tue, 17 Feb 2026 13:57:34 +0000 https://jsokit.com/blog/posts/html-entity-encoding-from-xss-prevention-to-character-escaping-implementation/ HTML Entity Encoding: From XSS Prevention to Character Escaping Implementation Building a content management system recently, I needed to safely display user-submitted text on pages. Direct rendering? XSS attacks await. Escape everything? Garbage output. That’s where HTML entity encoding comes in. What Are HTML Entities HTML entities represent special characters using specific character sequences. For example, < becomes <, > becomes >. These seemingly cryptic strings solve two core problems: https://jsokit.com/blog/posts/app-store-screenshot-generator-technical-implementation-from-html2canvas-to-high-quality-export/ Thu, 22 Jan 2026 17:19:17 +0000 https://jsokit.com/blog/posts/app-store-screenshot-generator-technical-implementation-from-html2canvas-to-high-quality-export/ App Store Screenshot Generator: Technical Implementation from html2canvas to High-Quality Export Published: May 7, 2026 at 01:35 Why Do You Need an App Store Screenshot Generator? When developers submit apps to the App Store or Google Play, they must provide device screenshots as promotional materials. App Store requires iPhone screenshots at 1320×2868 (9:20 aspect ratio), while Google Play demands 1080×1920 (9:16). Manually creating these screenshots is time-consuming—you need to design backgrounds, adjust device frames, position text, and export multiple sizes.