The architecture argument is that the server is the incident surface, and the incident surface is what the client-side tool removes. The removing is the no-server. The no-server is where the incident cannot happen, and the cannot-happen is the security model.
The server's incident is what the history shows. The showing is the breach. The breach is where the server's data is. The data is what the user sent. The sent is the request. The request is the log. The log is what the breach reads. The client-side tool's incident is the file. The file is the read. The read is what the user does. The doing is not the incident, because the incident is where the data leaves, and the leaving is what the tab does not do. The JWT example is where the argument gets concrete. The token goes to the server decoder and the token is in the server's log. The token goes to the tab decoder and the token is in the tab, and the tab is what closes, and the closing is where the token is gone from. The section below is the architecture in detail: the server's surface, the client's surface, the JWT in both, and the model the collection follows, because the model is the security, and the no-server is the model.
The security section reads like an audit, because it is one: the asset, the threat, the control, and the residual risk, in that order, and the order is the part the fear-based security writing skips, because the skip is what makes the fear do the arguing. The asset here is the data the workflow touches, and the touches is the part that the DevTools collection changes, because the changes is 14 pure-HTML developer tools: converters, generators, and inspectors. Zero install, zero tracking, works offline.. The threat is the specific one for this workflow, and the specific is the part the section names before it names the control, because the named threat is what the control answers. The residual risk is stated at the end, because the stated residual is the part that makes the rest of the section the honest one.
What the Collection Is Not
The collection is not an account, and the no-account is the part that the onboarding is zero, because the zero is the part that the first use is the use, and the use is the part that the registration does not gate. The collection is not a service, and the no-service is the part that the uptime is the browser's, because the browser's is the part that the user already has, and the already-has is the dependency that is not added. The collection is not a tracker, and the no-tracker is the part that the analytics is the user's own curiosity, because the curiosity is the part that the counter would measure, and the measure is the part that the counter's server would store, and the store is the part that the no-service does not have. The collection is not a framework, and the no-framework is the part that the build step is the read, because the read is the part that the file is. The four no's are the design, and the design is the part that the collection is, and the is is the tab that works in the air.
The Search Bar Is the Interface
The search bar at the top is the interface to the collection, and the interface exists because the failure mode of a tool page is the remembering-the-tool-but-not-the-name moment. The two-word query filters the cards, and the filter is the part that keeps the matching tools visible while the non-matching fade, and the visible is the part that the tab is designed for, because the tab is the working set and the working set is what the search narrows to. The search matches the description as well as the name, and the description match is the part that catches the query that describes the job instead of the tool, because the developer types the job, and the job is what the description says, and the description-says is the match. The search is the reason the fourteen tools are one tab instead of fourteen bookmarks, and the one-tab is the part that the bookmark manager did not solve, because the bookmark is the tool and the search is the job, and the job is what the developer has.
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.
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.
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.
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.
Who It Is For, and Who It Is Not
The collection is for the developer who hits a format problem and wants the answer in five seconds, not a five-minute search. It is for the two-in-the-morning token decode, the conference-room QR code, the config conversion on a flaky connection. It is not for the team that needs shared workspaces, audit logs, and admin controls — that is a different category of product with a different trust model. It is not for the power user who wants a plugin ecosystem or a macro system — the tools are deliberately one-job-each. And it is not a replacement for a real IDE or a real debugger; it is the set of small, standalone answers that sit next to those tools. The right frame is a drawer of hand tools: each one small, each one specific, and the drawer is the point. Knowing who it is not for is as useful as knowing who it is for, because the wrong user does not get a bad experience — they get an experience that is missing the features they came for, and the missing features are the named ones, the deliberate absences. The collection is honest about its edge, and the edge is the design.
The Pairs: Tools That Work Better Together
The tools are better in pairs, and the pairs are the workflows that the single tool view misses, because the pair is the job and the job is what the developer has. The debugging pair is the base64 decoder and the text diff: the decode turns the blob into the text, and the diff turns the two texts into the difference, and the difference is the bug. The verification pair is the JWT decoder and the hash generator: the decode shows the claims, and the hash confirms the payload, and the confirms is the signature check. The config pair is the YAML converter and the JSON formatter: the convert changes the shape, and the format makes it readable, and the readable is the config that the review reads. The pairs are the reason the collection is a tab instead of a set of bookmarks, because the bookmark is the tool and the pair is the workflow, and the workflow is what the tab keeps open for, and the keeps-open is the part that the search bar serves.
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.
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.
GitHub Pages: Hosting That Costs Nothing and Owes Nothing
The collection lives on static hosting, and that is a deliberate infrastructure decision with a specific shape. No server to pay for, no uptime to manage, no scaling to think about, no vendor lock-in beyond the repository itself. The site is static files in a git repository, and the entire operational model is: commit, push, done. When a tool needs a fix, the fix is a pull request, reviewable like any other code. When the collection needs to move, it is a repository, portable by definition. The tradeoff is real — static hosting means no server-side features, no accounts, no personalization — but every one of those absences is a feature in this design. The hosting is boring on purpose, because the boring infrastructure is the part that is still there in five years. The subscription-based tool you loved last year is the cautionary tale: the tool was good, the hosting model was not, and the tool died with the business model. The static page has no business model to die. It has a repository, and the repository is the model.
The takeaway
The security section ends where the architecture ends: at the boundary the tool does not cross. the DevTools collection is 14 pure-HTML developer tools: converters, generators, and inspectors. Zero install, zero tracking, works offline., installed with Open https://wuchunjie00.github.io/devtools/, source at https://github.com/wuchunjie00/devtools. The boundary is the part the threat model respects, because the respects is the control, and the control is the part the residual risk is measured against. The reader who runs the tool runs the boundary, and the runs is the part the claim becomes the behavior, and the behavior is what the security section is for, because the for is the practice, and the practice is the habit with the check in it.
Top comments (0)