Menu

I built 61 dev tools without a framework — here's what I learned about HTML tokenization
📰

I built 61 dev tools without a framework — here's what I learned about HTML tokenization

DEV Community: html·Hemant Sharma·about 11 hours ago
#SRnsGk4B
#devto2#devto#dev#id#myid
Reading 0:00
15s threshold

The pitch is simple: tools4market.online is 61 browser-side dev tools — cron expression generator, JSON→CSV, HTML minifier, SVG optimizer, Markdown↔HTML, hash generator, text diff, email validator, robots.txt generator, and 50+ more. No login, no upload, no framework, no backend.

The interesting part is what I had to build to stay dependency-free:

1. A hand-written HTML tokenizer (~190 lines)

The HTML5 spec says

and <textarea> are RCDATA elements, but ONLY in the HTML namespace. Inside <svg>, they're normal elements. Get this wrong and a raw <title> inside an SVG silently swallows the rest of your page — which is exactly the bug I shipped and then spent a day finding.</p>

<p>The fix is a namespace context stack (html / svg / math). When you enter <svg>, push svg onto the stack; RCDATA/RAWTEXT rules apply only when the stack top is html. This is what the HTML5 spec calls "foreign content" handling.</p>

<p><strong>2.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.