The tool is the URL slug generator, and the slug generator is the smallest file in the collection, and the smallest file is what the pride is about. The file is one HTML document. The document does the job. The job is what the big framework would do with the build step, the bundle, and the node_modules, and the node_modules is what the slug does not have.
The small is the argument. The argument is the trust argument, because the small file is what the read audits, and the read takes a minute, and the minute is what the audit costs, and the audit cost is what the big tool does not offer, because the big tool's read is the source, and the source is a repository, and the repository is what the minute does not finish. The slug generator's read is the file, and the file is what the minute finishes, and the finishing is the trust, because the trust is what the read proves, and the read proves the small, and the small is what does the job. The section below is the tool in detail: the file, the logic, the read, and the other thirteen tools that follow the same size rule, because the size rule is what the collection is, and the slug is the smallest example of it.
The story is the one that happened, and the happened is the part the tutorial does not cover, because the tutorial is the smooth path and the story is the path with the specific date, the specific number, and the specific moment the decision was made. The tool in the story is the DevTools collection, 14 pure-HTML developer tools: converters, generators, and inspectors. Zero install, zero tracking, works offline., and the tool is the character that enters at the turning point, because the turning point is where the smooth path ended and the story began. The details below are the ones that were real, and the real is the part that makes the story the evidence, because the evidence is the part the reader checks, and the checks out is what the specific date is for.
The Clipboard Is the Handoff
The output of every tool goes to the clipboard, and the clipboard is the handoff to wherever the paste lands, and the lands is the editor, the ticket, the terminal, the chat. The handoff is the design decision that makes the tool a step in the workflow instead of a destination, because the destination tool is the tool you stare at, and the step tool is the tool that feeds the next step. The copy button is the motion, and the motion is the one that the mouse does or the keyboard shortcut does, and the two are the same handoff with different inputs. The paste is the other side, and the paste is the platform's, and the platform is the part the tool does not control, and the not-controlling is fine, because the tool's job is the produce and the produce is the clipboard content, and the clipboard-content is the part that is correct regardless of where it lands. The handoff is the reason the tool feels like the terminal's, because the terminal's native output is the stream, and the stream is what the clipboard is for.
The Inspector Family: Reading What You Cannot Parse in Your Head
Inspectors are for the artifacts that are structured but not human-readable at a glance. The Cron expression parser turns a schedule into a sentence and a visualization of when it fires. The JWT decoder splits a token into its header, payload, and signature, and shows you the claims — including the expiration, which is the answer to why is this failing now. The hash generator computes digests for text, which is the verification step after a download. The diff tool highlights the exact lines that differ between two versions of anything. The common thread: the artifact is right there in front of you, but reading it correctly takes a tool. The collection is that tool, for the artifacts every developer meets. The inspectors are the tools that save the most time per use, because the alternative is not a small cost — it is a wrong answer, and the wrong answer in a schedule or a token or a checksum is the kind of error that costs an hour to find. The inspector finds it in five seconds, which is the entire value proposition of the family.
What I Would Add Next, Honestly
Every collection has a backlog, and being honest about it is more useful than pretending the tool is finished. The candidates in order of value: more converter pairs — the remaining config formats are the obvious gaps; a date-time formatter to sit next to the schedule parser; and a language pass, because the site currently ships in one language while the problems it solves are universal. The candidates I am deliberately not doing: accounts, sync, and personalization. Those are the features that would turn a zero-trust tool into a trust decision, and they are the features that would add a server to a serverless site. The backlog is a list of converters and formatters. Everything else is a different product, and a different product is not the point. The honesty is the feature: the roadmap is short enough to read, the non-roadmap is named, and the reason for each no is the same reason the collection exists in the first place — the tool should stay small enough to trust, and every feature that does not serve that constraint is a feature the collection does not have. The absence is the policy.
14 Tools, One Tab, Zero Install
The collection is fourteen developer tools on a single page: a Cron expression parser, a YAML-to-JSON converter, a URL slug generator, an HTML-to-text converter, a QR code generator, an HTML entities encoder and decoder, a UUID generator, a password generator, a Lorem Ipsum generator, a hash generator for the SHA family, a Base64 encoder and decoder, a JWT decoder, a text diff tool, and a CSV-to-JSON converter. All of them are pure HTML and JavaScript. No install, no extension, no account, no build step. You open the page, you pick a tool, you use it, you close the tab. The design constraint that shaped everything: if a tool needs an install, it will not be used in the moment it is needed, and the moment it is needed is the only moment it matters. Fourteen tools, one tab, zero install — and each one does exactly one job, which is the constraint that makes the collection feel like a drawer of hand tools instead of a software suite. The drawer is the point.
The Privacy Argument: Your Data Never Leaves the Tab
The strongest feature of the collection is the one you never see: nothing is transmitted. Every conversion, generation, and inspection happens in your browser, on the page, with no server round trip. That matters most for the tools that handle sensitive input. The token decoder is the obvious example — you are pasting a live token, and a third-party decoder website is a token exfiltration service with a UI. In the local version, the token is decoded in your tab and stays there. The encoded-blob and hash tools are the same story: the input is processed client-side, and the only place your data exists is your machine. For a developer, this tool does not send my data anywhere is not a nice-to-have. It is the difference between a tool and a trust decision, and the collection was built so the trust decision is a one-time yes, made once, by reading the source, which is short enough to actually read. After that, every use is free of the decision. That is the privacy model in one sentence: decide once, by reading the code, and then never decide again.
The Search Bar Is Load-Bearing
The collection has a client-side search bar that filters the fourteen tool cards by name and description, and it is doing more work than it looks. In a fourteen-tool collection, the failure mode is not: the tool does not exist. It is: I do not remember the exact name, and I do not remember which of the three converters it was. The search bar turns that failure into a two-word query: yaml, hash, qr. The implementation is a few lines of JavaScript that filter the page, which is exactly the kind of feature that a framework-based site would treat as a component and a pure-HTML site treats as a paragraph of code. Small features, done without infrastructure, are the signature of the design: every line of the site earns its place, and the search bar is the line that earns the most, because it is the difference between finding the tool in two seconds and not finding it at all. The search is the index of the drawer, and a drawer without an index is a pile. The bar is the difference.
Why Pure HTML Is a Feature, Not a Limitation
Every tool in the collection is a single HTML file. No framework, no build step, no node_modules, no bundle. The consequence is that the tools are smaller than the README that describes them, they load instantly on any connection, they work in airplane mode, and they will still work when the current JavaScript framework of the moment has been abandoned. There is also a maintenance argument: a pure-HTML tool can be reviewed by anyone in the team, fixed with a text editor, and deployed by pushing a file. The build pipeline for the entire collection is a commit. In a category full of tools that need a runtime version and a package manager to run, the absence of both is not a compromise. It is the product. The tool should be as permanent as the problem it solves, and the problems — convert this, generate that, decode this — are as old as the formats themselves. The formats change slowly. The pure-HTML tools change with them, and nothing else in the stack has to change at all. That permanence is the feature.
The Generator Family: The Things You Should Never Type by Hand
The generators cover the values that are correct in exactly one way and painful to produce manually. UUIDs for test data and local development. Strong passwords, where the point is the entropy, not the memorability. QR codes for the URL you are about to hand someone at a demo. Placeholder text for the layout that has to exist before the design can be evaluated. URL slugs for the title you are about to publish, with the punctuation stripped and the casing fixed. Each generator is a small answer to a question that comes up dozens of times a year, and the cost of answering it without a tool is low individually and high in aggregate. The collection treats those small costs as the thing to eliminate. The generators are the least dramatic tools in the set and some of the most used, which is the pattern of the whole collection: the quiet tools carry the load, and the dramatic tools are the insurance you hope you never need but are glad is there.
Offline-First as a Feature, Not an Absence
The tools work without a network connection, and that is the most underrated property in the collection. Airplane mode: the converters still convert. A flaky office connection: the hash generator still hashes. A conference hall with no signal: the diff tool still diffs. The practical moments are specific and real — the deploy that is failing on a train, the token that needs decoding in a meeting room where the Wi-Fi is a joke, the config that needs converting while the VPN is down. An online-only tool is a tool that is unavailable exactly when the network is the thing that is broken. Offline-first is not a fallback mode. It is the difference between a tool that is always available and a tool that is available when the internet agrees. The property costs nothing to build — it is a consequence of the pure-HTML design — and it shows up in the moments that matter most, which are the moments when everything else in the stack is unavailable and the one thing you need is the small tool that does not need the network to be the thing you need. The offline tool is the last tool standing, and that is exactly where you want it.
The Fourteen Tools, Grouped by Job
The collection is fourteen tools, and the fourteen group into four jobs, and the jobs are the map that makes the collection navigable. The converters are the format collision job: the YAML to JSON, the CSV to JSON, the HTML to text, and the base64 in both directions, and the collision is the moment the data is in one shape and the next step needs another. The generators are the never-type-by-hand job: the UUID, the password, the QR code, the URL slug, the lorem ipsum, and the placeholder, and the never-type is the part that the hand-typing gets wrong, because the hand-typed UUID has the repeated section and the hand-typed password has the memorable pattern. The inspectors are the read-the-artifact job: the cron parser, the JWT decoder, the hash generator, and the text diff, and the artifact is the thing that is structured but not readable at a glance. The four jobs are the collection, and the collection is the tab.
Pairing the Browser Tools With the CLI Toolkit
The browser collection and the CLI tools cover the same developer day from two angles. In the terminal: the scaffolder generates the project, the secret scanner checks it, the git analytics measure the repository, the snippet manager stores the code that falls out. In the browser: the converters handle the format collisions, the generators produce the values, the inspectors decode the artifacts. The day is one continuous loop of mechanical problems, and the toolkit is the set of small answers to each of them. The two halves are independent — the browser tools do not need the CLI, and the CLI does not need the browser — but the pattern is the same in both: a specific, frequent, mechanical task, answered by a tool that does exactly that and nothing else. Collectively, they are a working theory of what a modern developer's toolkit should look like: small, single-purpose, zero-ceremony, and always available. The theory is not in the tools individually; it is in the set, and the set is the argument. Each tool is a sentence, and the toolkit is the paragraph that makes sense.
The takeaway
The story is the one that happened, and the happened is the part the generalization does not cover. the DevTools collection is the tool that was in the story: 14 pure-HTML developer tools: converters, generators, and inspectors. Zero install, zero tracking, works offline. The install line, for the reader who is at the story's beginning instead of its end, is Open https://wuchunjie00.github.io/devtools/, and the repository is https://github.com/wuchunjie00/devtools. The generalization the story supports is the one the reader can check against the specifics above, and the check is the part the anecdote does not offer, because the anecdote is the story without the date, and the date is what the story above has.
Top comments (0)