<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Goksel Yesiller</title>
    <description>The latest articles on DEV Community by Goksel Yesiller (@mryesiller).</description>
    <link>https://dev.to/mryesiller</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F910582%2F1f0a45df-f63d-4887-bf9a-408b3ba1942c.png</url>
      <title>DEV Community: Goksel Yesiller</title>
      <link>https://dev.to/mryesiller</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/mryesiller"/>
    <language>en</language>
    <item>
      <title>HTML Minifier: the privacy-first data tool that runs entirely in your browser</title>
      <dc:creator>Goksel Yesiller</dc:creator>
      <pubDate>Fri, 31 Jul 2026 07:29:13 +0000</pubDate>
      <link>https://dev.to/mryesiller/html-minifier-the-privacy-first-data-tool-that-runs-entirely-in-your-browser-318h</link>
      <guid>https://dev.to/mryesiller/html-minifier-the-privacy-first-data-tool-that-runs-entirely-in-your-browser-318h</guid>
      <description>&lt;p&gt;Every byte matters when optimizing web performance, but not every project has a build pipeline to strip unnecessary whitespace and developer comments from HTML. You might be staring at a bloated markup file from a legacy CMS or an exported prototype, needing to shave kilobytes off its size without installing a single dependency. The HTML Minifier on DevTools solves this friction point by offering an instant, browser-based minification engine that respects your code’s logic while slimming its payload.&lt;/p&gt;

&lt;h2&gt;
  
  
  What it is
&lt;/h2&gt;

&lt;p&gt;The HTML Minifier is a client-side tool that compresses HTML documents by removing characters browsers ignore: extraneous spaces, line breaks, indentation, and HTML comments. The page’s visual output remains unchanged. Because the entire process runs in your local browser, no code ever leaves your machine. That privacy-first approach aligns with the design of DevTools, a collection of over 200 free, signup-free utilities built for developers who value speed and security.&lt;/p&gt;

&lt;p&gt;This tool treats your markup with precision. It strips padding between tags, collapses consecutive whitespace inside text nodes, and discards non-functional comments. Content inside &lt;code&gt;&amp;lt;pre&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;code&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;textarea&amp;gt;&lt;/code&gt;, and &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt; tags remains untouched, preserving semantic whitespace. The result is a functionally identical HTML file that is substantially smaller—often by 10 to 30 percent—ready for production or further optimization.&lt;/p&gt;

&lt;h2&gt;
  
  
  How to use it
&lt;/h2&gt;

&lt;p&gt;The interface presents a clean split between an input panel and an output panel. Paste your raw HTML into the input area, and the minified version appears in real time. There are no configuration toggles or options; the tool applies sensible defaults that respect the specification.&lt;/p&gt;

&lt;p&gt;Consider a typical HTML snippet:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="c"&gt;&amp;lt;!-- Input HTML --&amp;gt;&lt;/span&gt;
&lt;span class="cp"&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;html&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
    &lt;span class="c"&gt;&amp;lt;!-- Metadata section --&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;title&amp;gt;&lt;/span&gt;Landing Page&lt;span class="nt"&gt;&amp;lt;/title&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;Welcome&lt;span class="nt"&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;

    &lt;span class="nt"&gt;&amp;lt;p&amp;gt;&lt;/span&gt;This is a paragraph with extra spaces.&lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;After pasting, the output instantly becomes:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="c"&gt;&amp;lt;!-- Minified output --&amp;gt;&lt;/span&gt;
&lt;span class="cp"&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt;&lt;span class="nt"&gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;&amp;lt;title&amp;gt;&lt;/span&gt;Landing Page&lt;span class="nt"&gt;&amp;lt;/title&amp;gt;&amp;lt;/head&amp;gt;&amp;lt;body&amp;gt;&amp;lt;h1&amp;gt;&lt;/span&gt;Welcome&lt;span class="nt"&gt;&amp;lt;/h1&amp;gt;&amp;lt;p&amp;gt;&lt;/span&gt;This is a paragraph with extra spaces.&lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&amp;lt;/body&amp;gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Line breaks vanish, indentation disappears, and the comment is discarded. The &lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/code&gt; stays intact, as do all tag names and attributes. Once you’ve reviewed the result, a single click copies the minified HTML to your clipboard.&lt;/p&gt;

&lt;p&gt;For documents with embedded CSS or JavaScript, the minifier preserves the structure inside &lt;code&gt;&amp;lt;style&amp;gt;&lt;/code&gt; and &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt; tags, ensuring inline logic remains untouched. You can safely compress a full page without breaking inline expressions or selectors.&lt;/p&gt;

&lt;h2&gt;
  
  
  When to reach for it
&lt;/h2&gt;

&lt;p&gt;This tool shines when you need quick, no-fuss minification without integrating libraries like html-minifier or setting up a bundler. It’s an ideal companion during prototyping, when you want to measure file size reductions before committing to a build pipeline. Legacy projects that predate Node.js or webpack benefit equally, as there’s nothing to install or configure.&lt;/p&gt;

&lt;p&gt;Its client-side processing makes it ideal for proprietary markup that can’t leave your machine; you stay in full control, in line with DevTools’ privacy-first ethos of never asking for sign‑up or account information. The tool can quickly sanitize CMS output full of inconsistent indentation, producing lean HTML for email templates or static site generators.&lt;/p&gt;

&lt;p&gt;Educators and technical writers will appreciate it as a visual aid for demonstrating what minification removes. By pasting a human‑readable document and observing the compressed output, learners grasp the tangible impact of these extra characters on file size and load time.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try it yourself
&lt;/h2&gt;

&lt;p&gt;Open the HTML Minifier on DevTools and paste a sample of your own markup—maybe a page template with nested elements and generous formatting. Notice how instant the transformation is and how the output panel reflects changes as you type. Try mixing in &lt;code&gt;&amp;lt;pre&amp;gt;&lt;/code&gt; blocks or inline &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt; tags to confirm their formatting stays intact while the surrounding code compresses.&lt;/p&gt;

&lt;p&gt;Include inline CSS and JavaScript to see that only structural whitespace is affected. Compare the original and minified character counts to quantify your savings. This hands‑on test will show you exactly how much bloat you can eliminate without any infrastructure overhead.&lt;/p&gt;

&lt;h2&gt;
  
  
  Related tools
&lt;/h2&gt;

&lt;p&gt;To build a complete front‑end optimization workflow, pair the HTML Minifier with &lt;a href="https://www.devtools.tools/css-js-minifier" rel="noopener noreferrer"&gt;CSS Minifier&lt;/a&gt; and &lt;a href="https://www.devtools.tools/css-js-minifier" rel="noopener noreferrer"&gt;JavaScript Minifier&lt;/a&gt;. Both operate under the same client‑side, no‑signup model, letting you compress entire site assets consistently. If your HTML embeds data in JSON, the &lt;a href="https://www.devtools.tools/json-formatter" rel="noopener noreferrer"&gt;JSON Formatter&lt;/a&gt; helps tidy or validate those snippets before minification. For inline assets, &lt;a href="https://www.devtools.tools/base64" rel="noopener noreferrer"&gt;Base64 Encoder&lt;/a&gt; converts images or fonts into data URIs that fit neatly into minified markup. Finally, &lt;a href="https://www.devtools.tools/text-statistics" rel="noopener noreferrer"&gt;Text Statistics&lt;/a&gt; gives you a quantitative look at your content’s metrics before and after compression, closing the optimization loop.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Try it: &lt;a href="https://www.devtools.tools/html-minifier" rel="noopener noreferrer"&gt;HTML Minifier on DevTools&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

</description>
      <category>devtools</category>
      <category>productivity</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Environment Variable Encoder/Decoder: a small tool that solves a specific problem</title>
      <dc:creator>Goksel Yesiller</dc:creator>
      <pubDate>Thu, 23 Jul 2026 13:49:14 +0000</pubDate>
      <link>https://dev.to/mryesiller/environment-variable-encoderdecoder-a-small-tool-that-solves-a-specific-problem-3j55</link>
      <guid>https://dev.to/mryesiller/environment-variable-encoderdecoder-a-small-tool-that-solves-a-specific-problem-3j55</guid>
      <description>&lt;p&gt;Managing environment variables across environments often means juggling incompatible formats, special character escapes, and a lingering worry about accidentally exposing secrets in shared configs. The Environment Variable Encoder/Decoder—part of a suite of 200+ free, no-signup browser tools—eliminates that friction by handling encoding, decoding, and formatting in one privacy-first utility.&lt;/p&gt;

&lt;h2&gt;
  
  
  What it is
&lt;/h2&gt;

&lt;p&gt;The Environment Variable Encoder/Decoder is a web-based tool that transforms standard &lt;code&gt;.env&lt;/code&gt; key-value pairs into encoded formats and structured outputs. It accepts plaintext input like &lt;code&gt;KEY=value&lt;/code&gt;, then applies configurable encodings—Base64, URL encoding, and other security-minded transformations—to the values. You can also feed it already-encoded strings to reverse the process on the fly.&lt;/p&gt;

&lt;p&gt;Under the hood, the tool processes entire blocks of variables at once, preserving speed for bulk operations. Output formatting adapts to your target: keep it as a &lt;code&gt;.env&lt;/code&gt; file, convert to JSON for application config, generate YAML for Kubernetes manifests, or export shell &lt;code&gt;export&lt;/code&gt; statements for scripts. A “Hide Value” toggle obscures sensitive data on screen during review, so you can validate structure without exposing secrets in a shared workspace. It’s not a vault, but a practical intermediary for reshaping variables before they reach a secrets manager or CI pipeline.&lt;/p&gt;

&lt;h2&gt;
  
  
  How to use it
&lt;/h2&gt;

&lt;p&gt;Paste your environment variables into the input area in &lt;code&gt;.env&lt;/code&gt; format—one &lt;code&gt;KEY=VALUE&lt;/code&gt; per line. The tool handles multi-line values and common edge cases (leading spaces, trailing comments), but expects a clean, parseable structure for best results.&lt;/p&gt;

&lt;p&gt;Choose an encoding: Base64 for portability or obscuring values in transit; URL encoding for connection strings containing &lt;code&gt;@&lt;/code&gt;, &lt;code&gt;/&lt;/code&gt;, &lt;code&gt;?&lt;/code&gt;, and other reserved characters that would break as query parameters.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight conf"&gt;&lt;code&gt;&lt;span class="c"&gt;# Plain input
&lt;/span&gt;&lt;span class="n"&gt;DATABASE_URL&lt;/span&gt;=&lt;span class="n"&gt;postgresql&lt;/span&gt;://&lt;span class="n"&gt;user&lt;/span&gt;:&lt;span class="n"&gt;pass&lt;/span&gt;@&lt;span class="n"&gt;localhost&lt;/span&gt;:&lt;span class="m"&gt;5432&lt;/span&gt;/&lt;span class="n"&gt;db&lt;/span&gt;
&lt;span class="n"&gt;API_KEY&lt;/span&gt;=&lt;span class="n"&gt;sk&lt;/span&gt;-&lt;span class="m"&gt;1234567890&lt;/span&gt;&lt;span class="n"&gt;abcdef&lt;/span&gt;
&lt;span class="n"&gt;JWT_SECRET&lt;/span&gt;=&lt;span class="n"&gt;mysecretkey123&lt;/span&gt;

&lt;span class="c"&gt;# With Base64 encoding applied
&lt;/span&gt;&lt;span class="n"&gt;DATABASE_URL&lt;/span&gt;=&lt;span class="n"&gt;cG9zdGdyZXNxbDovL3VzZXI6cGFzc0Bsb2NhbGhvc3Q6NTQzMi9kYg&lt;/span&gt;==
&lt;span class="n"&gt;API_KEY&lt;/span&gt;=&lt;span class="n"&gt;c2stMTIzNDU2Nzg5MGFiY2RlZg&lt;/span&gt;==
&lt;span class="n"&gt;JWT_SECRET&lt;/span&gt;=&lt;span class="n"&gt;bXlzZWNyZXRrZXkxMjM&lt;/span&gt;=
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Select an output format. Standard &lt;code&gt;.env&lt;/code&gt; with encoded values integrates directly into Docker automation. For a Node.js service reading &lt;code&gt;configuration.json&lt;/code&gt;, switch to JSON to get a ready-to-use object. The tool preserves key names exactly, transforming only the values, so downstream parsers remain unaffected.&lt;/p&gt;

&lt;p&gt;Enable “Hide Value” when you need to share screenshots or pair-program without revealing raw credentials. The tool masks the actual content but leaves the key names and encoded status visible, letting collaborators confirm that all variables were processed without seeing sensitive data.&lt;/p&gt;

&lt;h2&gt;
  
  
  When to reach for it
&lt;/h2&gt;

&lt;p&gt;Use the encoder when preparing configuration for containerized workloads where special characters in connection strings or certificates cause parsing errors. A Postgres URL with a complex password can break a Docker Compose file unless Base64-encoded first. The tool reduces that step to selecting an option, eliminating hand-crafted one-liners.&lt;/p&gt;

&lt;p&gt;It becomes essential during platform migrations. Moving from a legacy &lt;code&gt;.env&lt;/code&gt; setup to a Kubernetes ConfigMap often requires reformatting dozens of variables into YAML. Manually converting each line invites transposition mistakes; the tool’s bulk output eliminates that risk. Similarly, when your CI/CD runner expects JSON for its environment context, the tool generates syntactically valid JSON from your existing &lt;code&gt;.env&lt;/code&gt; file with no manual escaping.&lt;/p&gt;

&lt;p&gt;Reach for the decoder side when troubleshooting deployments. If a variable has passed through multiple encoding layers—say, Base64 inside a GitHub Actions secret—paste the encoded string to see the original value instantly. This speeds up debugging sessions where the immediate question is, “What did this resolve to?” rather than decoding each value by hand.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try it yourself
&lt;/h2&gt;

&lt;p&gt;Copy this sample database connection string, which includes characters that commonly cause trouble in unencoded configs:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight conf"&gt;&lt;code&gt;&lt;span class="n"&gt;DB_CONNECTION&lt;/span&gt;=&lt;span class="n"&gt;postgresql&lt;/span&gt;://&lt;span class="n"&gt;admin&lt;/span&gt;:&lt;span class="n"&gt;p&lt;/span&gt;@&lt;span class="n"&gt;ssw0rd&lt;/span&gt;!@&lt;span class="n"&gt;db&lt;/span&gt;.&lt;span class="n"&gt;example&lt;/span&gt;.&lt;span class="n"&gt;com&lt;/span&gt;:&lt;span class="m"&gt;5432&lt;/span&gt;/&lt;span class="n"&gt;production&lt;/span&gt;?&lt;span class="n"&gt;sslmode&lt;/span&gt;=&lt;span class="n"&gt;require&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Paste it into the tool, apply Base64 encoding, and see how the password’s special characters (&lt;code&gt;@&lt;/code&gt;, &lt;code&gt;!&lt;/code&gt;, &lt;code&gt;?&lt;/code&gt;) become a safe, portable string. Switch the output to JSON: the key stays the same while the value transforms, yielding a ready-to-use config object for applications that consume environment settings from a &lt;code&gt;.json&lt;/code&gt; file.&lt;/p&gt;

&lt;p&gt;For a more realistic test, feed in multiple variables of different types: an API token, a file path, a boolean toggle, and a connection string. Notice that the tool applies the same encoding uniformly, so you don’t end up with mixed representations. Finally, toggle on “Hide Value” to verify that you can still audit the variable names and counts without exposing the actual secrets.&lt;/p&gt;

&lt;h2&gt;
  
  
  Related tools
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://devtools.tools/json-formatter" rel="noopener noreferrer"&gt;JSON Formatter&lt;/a&gt; helps structure configuration data when you need to validate or pretty-print JSON output. &lt;a href="https://devtools.tools/docker-compose-builder" rel="noopener noreferrer"&gt;Docker Compose Builder&lt;/a&gt; pairs with encoded env vars to scaffold container definitions. &lt;a href="https://devtools.tools/gitignore-generator" rel="noopener noreferrer"&gt;Gitignore Generator&lt;/a&gt; ensures your &lt;code&gt;.env&lt;/code&gt; files stay out of version control. &lt;a href="https://www.devtools.tools/db-connection-string-builder" rel="noopener noreferrer"&gt;Database Connection String Builder&lt;/a&gt; creates the connection strings you might need to encode later. &lt;a href="https://devtools.tools/nginx-config-builder" rel="noopener noreferrer"&gt;NGINX Config Builder&lt;/a&gt; works with encoded variables when templating reverse-proxy settings in production deployments.&lt;/p&gt;

&lt;p&gt;P.S. All processing happens locally in your browser—no data leaves your machine.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Try it: &lt;a href="https://www.devtools.tools/env-encoder" rel="noopener noreferrer"&gt;Environment Variable Encoder/Decoder on DevTools&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

</description>
      <category>devtools</category>
      <category>productivity</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Gitignore Generator: a small tool that solves a specific problem</title>
      <dc:creator>Goksel Yesiller</dc:creator>
      <pubDate>Wed, 22 Jul 2026 11:38:05 +0000</pubDate>
      <link>https://dev.to/mryesiller/gitignore-generator-a-small-tool-that-solves-a-specific-problem-1h49</link>
      <guid>https://dev.to/mryesiller/gitignore-generator-a-small-tool-that-solves-a-specific-problem-1h49</guid>
      <description>&lt;p&gt;Every developer knows the frustration of accidentally pushing &lt;code&gt;node_modules&lt;/code&gt; or &lt;code&gt;.DS_Store&lt;/code&gt; to a shared repository. Handcrafting a &lt;code&gt;.gitignore&lt;/code&gt; from scratch is tedious, and assembling patterns from disparate sources often leads to gaps—especially when a single project spans multiple languages, frameworks, and operating systems. The Gitignore Generator, one of 200+ free browser tools from DevTools, sidesteps that hassle by merging vetted templates into a clean, commit-ready file. No signup, no data leaving your machine: a privacy-first utility that does one thing well.&lt;/p&gt;

&lt;h2&gt;
  
  
  What it is
&lt;/h2&gt;

&lt;p&gt;The Gitignore Generator is a straightforward web tool that creates tailored &lt;code&gt;.gitignore&lt;/code&gt; files by layering ignore patterns from established templates. Instead of cobbling together snippets from blog posts or GitHub gists, you select the components of your tech stack—languages, editors, operating systems—and the tool combines their standard exclusions into a single, organized document. It pulls patterns from community-maintained sources, covering everything from dependency caches and build artifacts to OS-specific detritus. Duplicate entries are automatically removed, so you won’t encounter redundant lines or conflicting rules.&lt;/p&gt;

&lt;p&gt;Because the generator runs entirely in the browser, your selections never hit a server. This aligns with the broader DevTools philosophy: 200+ free, no-login utilities that process data locally. The result is a lightweight, thorough tool that eliminates the mental overhead of constructing a &lt;code&gt;.gitignore&lt;/code&gt; manually.&lt;/p&gt;

&lt;h2&gt;
  
  
  How to use it
&lt;/h2&gt;

&lt;p&gt;The interface is deliberately uncluttered. Templates are grouped into intuitive categories: languages and frameworks (Node.js, React, Python, Go, Java), development environments (VSCode, JetBrains IDEs), and operating systems (macOS, Windows, Linux). Select options that match your project’s makeup. As you toggle, the output updates in real time, showing precisely which patterns will be included. The tool formats everything neatly, adding comment headers for each category so the file remains readable months later.&lt;/p&gt;

&lt;p&gt;Once you’re satisfied, copy the content and save it as &lt;code&gt;.gitignore&lt;/code&gt; in your repository root. There are no configuration dialogs, no hidden checkboxes—an immediate, local transformation of choices into patterns. For a Node.js project on macOS developed in VSCode, you might see:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# Node&lt;/span&gt;
node_modules/
npm-debug.log&lt;span class="k"&gt;*&lt;/span&gt;
yarn-debug.log&lt;span class="k"&gt;*&lt;/span&gt;
yarn-error.log&lt;span class="k"&gt;*&lt;/span&gt;
.pnpm-debug.log&lt;span class="k"&gt;*&lt;/span&gt;
&lt;span class="k"&gt;*&lt;/span&gt;.tsbuildinfo

&lt;span class="c"&gt;# macOS&lt;/span&gt;
.DS_Store
.AppleDouble
.LSOverride

&lt;span class="c"&gt;# VSCode&lt;/span&gt;
.vscode/&lt;span class="k"&gt;*&lt;/span&gt;
&lt;span class="o"&gt;!&lt;/span&gt;.vscode/settings.json
&lt;span class="o"&gt;!&lt;/span&gt;.vscode/tasks.json
&lt;span class="o"&gt;!&lt;/span&gt;.vscode/launch.json
&lt;span class="o"&gt;!&lt;/span&gt;.vscode/extensions.json
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That structure appears without any manual editing. The generator also resolves overlaps—duplicate patterns appear only once—so your final file stays lean.&lt;/p&gt;

&lt;h2&gt;
  
  
  When to reach for it
&lt;/h2&gt;

&lt;p&gt;This tool earns its keep when setting up a new repository or auditing an existing one. Bootstrapping a full-stack application—say, a React frontend with a Python API, built in WebStorm on Windows—often leaves you guessing about artifacts like &lt;code&gt;__pycache__/&lt;/code&gt;, &lt;code&gt;.pyc&lt;/code&gt;, or Windows thumbnail caches. The generator removes that uncertainty by pulling in all relevant templates at once. It’s equally useful for teams who want a consistent &lt;code&gt;.gitignore&lt;/code&gt; baseline across microservices, ensuring that every clone omits the same noise.&lt;/p&gt;

&lt;p&gt;As part of the DevTools suite of over 200 free browser utilities, you can reach for it alongside a JSON formatter or base64 encoder without leaving your workflow. There’s no registration wall—open the page, make your selections, and copy the result. This frictionless access makes it a natural part of project setup, whether you’re spinning up a weekend prototype or onboarding new developers into a larger codebase.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try it yourself
&lt;/h2&gt;

&lt;p&gt;Head to the Gitignore Generator and spend two minutes building a &lt;code&gt;.gitignore&lt;/code&gt; for your current project. Start with your primary language, then layer on your editor and operating system. Observe how the file evolves—you might notice patterns you hadn’t considered, like log directories or environment-specific configs that should stay local. Experiment with uncommon combinations: a Flutter app with Android Studio, or a Go microservice with VS Code Remote Containers. The tool adapts instantly, processing nothing remotely, so your selections remain private. As part of the DevTools collection of 200+ free, no-signup tools, it’s always ready to help you keep repositories clean with minimal ceremony.&lt;/p&gt;

&lt;h2&gt;
  
  
  Related tools
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/github/gitignore" rel="noopener noreferrer"&gt;GitHub’s Gitignore Templates&lt;/a&gt; is the canonical source for many patterns used by generators.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Try it: &lt;a href="https://www.devtools.tools/gitignore-generator" rel="noopener noreferrer"&gt;Gitignore Generator on DevTools&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

</description>
      <category>devtools</category>
      <category>productivity</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Password Strength Checker and the case for browser-side cryptography</title>
      <dc:creator>Goksel Yesiller</dc:creator>
      <pubDate>Mon, 20 Jul 2026 19:19:21 +0000</pubDate>
      <link>https://dev.to/mryesiller/password-strength-checker-and-the-case-for-browser-side-cryptography-3kkm</link>
      <guid>https://dev.to/mryesiller/password-strength-checker-and-the-case-for-browser-side-cryptography-3kkm</guid>
      <description>&lt;p&gt;Every developer knows the tension between enforcing strong password policies and preserving a smooth user experience. Overly complex rules push users toward predictable patterns; lax requirements leave applications exposed. The Password Strength Checker from DevTools offers a privacy-first, real-time way to evaluate and refine password strength without compromising user trust.&lt;/p&gt;

&lt;h2&gt;
  
  
  What it is
&lt;/h2&gt;

&lt;p&gt;The Password Strength Checker is a client-side security utility that instantly evaluates password complexity. Part of the DevTools collection of 200+ free browser tools, it analyzes length, character diversity, and common vulnerability patterns to produce a comprehensive strength score with specific, actionable recommendations.&lt;/p&gt;

&lt;p&gt;All analysis runs locally in your browser—no password data is ever stored, transmitted, or logged. The tool checks criteria such as minimum length, uppercase and lowercase letters, digits, symbols, and known weak patterns (e.g., “password123” or sequential characters). It then surfaces a clear breakdown of what your password gets right and where it falls short, helping both developers and end users understand the anatomy of a strong password.&lt;/p&gt;

&lt;h2&gt;
  
  
  How to use it
&lt;/h2&gt;

&lt;p&gt;Type or paste a password into the input field, and the analysis begins immediately. The interface updates in real time, displaying an overall strength score, a character composition breakdown, and targeted suggestions for improvement. You can experiment with different combinations to see how each change affects the rating—adding a single symbol or extending the length by a few characters can dramatically shift the score.&lt;/p&gt;

&lt;p&gt;The tool also highlights common pitfalls like dictionary words or predictable sequences. For developers, this provides a fast way to prototype password validation logic or demonstrate security concepts to stakeholders. The visual feedback makes it easy to explain why a longer passphrase often outperforms a shorter, complex string.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Example of password strength criteria the tool might evaluate&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;passwordCriteria&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;length&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;password&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;=&lt;/span&gt; &lt;span class="mi"&gt;12&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;uppercase&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="se"&gt;[&lt;/span&gt;&lt;span class="sr"&gt;A-Z&lt;/span&gt;&lt;span class="se"&gt;]&lt;/span&gt;&lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;test&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;password&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
  &lt;span class="na"&gt;lowercase&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="se"&gt;[&lt;/span&gt;&lt;span class="sr"&gt;a-z&lt;/span&gt;&lt;span class="se"&gt;]&lt;/span&gt;&lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;test&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;password&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
  &lt;span class="na"&gt;numbers&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="se"&gt;\d&lt;/span&gt;&lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;test&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;password&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
  &lt;span class="na"&gt;symbols&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="se"&gt;[&lt;/span&gt;&lt;span class="sr"&gt;!@#$%^&amp;amp;*(),.?":{}|&amp;lt;&amp;gt;&lt;/span&gt;&lt;span class="se"&gt;]&lt;/span&gt;&lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;test&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;password&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
  &lt;span class="na"&gt;commonPatterns&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nf"&gt;isCommonPassword&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;password&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  When to reach for it
&lt;/h2&gt;

&lt;p&gt;This tool becomes essential during the design phase of user authentication systems. When implementing registration or password reset flows, you need to define validation rules that are both secure and user-friendly. The Password Strength Checker lets you test those rules interactively before writing any code, ensuring your policy aligns with modern standards without alienating users.&lt;/p&gt;

&lt;p&gt;It’s equally valuable for security training and onboarding. Instead of reciting abstract rules, you can show team members or clients how different password attributes contribute to overall strength. This hands-on approach often leads to better adoption of security practices than mandatory complexity requirements alone.&lt;/p&gt;

&lt;p&gt;If you’re auditing an existing password policy or comparing approaches (e.g., passphrases vs. random character strings), the tool provides objective, immediate feedback. Like all DevTools offerings, it requires no signup and runs entirely in your browser, making it a convenient, privacy-respecting option for quick security checks.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try it yourself
&lt;/h2&gt;

&lt;p&gt;Start by entering a simple password like “password123” to see how the tool identifies common weaknesses. Then gradually increase complexity—add uppercase letters, numbers, and symbols—and watch the strength score improve in real time. Try a passphrase such as “correct-horse-battery-staple” and compare its score to a shorter, more complex string. You’ll likely find that length and unpredictability matter more than sheer character variety.&lt;/p&gt;

&lt;p&gt;Use the tool to test edge cases for your application’s password policy. For instance, if you require a minimum of 8 characters with at least one digit and one symbol, see how the tool rates passwords that just meet those criteria versus those that exceed them. This can help you fine-tune your requirements to encourage stronger passwords without frustrating users.&lt;/p&gt;

&lt;p&gt;The Password Strength Checker is one of over 200 free tools available on DevTools. All tools run locally in your browser, with no signup, no ads, and no data collection—so you can test passwords, generate hashes, or format JSON without privacy concerns.&lt;/p&gt;

&lt;h2&gt;
  
  
  Related tools
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://devtools.tools/password-generator" rel="noopener noreferrer"&gt;Password Generator&lt;/a&gt; – Create strong, random passwords based on your specified length and character set requirements.&lt;br&gt;&lt;br&gt;
&lt;a href="https://devtools.tools/password-breach-checker" rel="noopener noreferrer"&gt;Password Breach Checker&lt;/a&gt; – Verify whether a password has appeared in known data breaches, using a privacy-preserving API.&lt;br&gt;&lt;br&gt;
&lt;a href="https://devtools.tools/hash-generator" rel="noopener noreferrer"&gt;Hash Generator&lt;/a&gt; – Generate cryptographic hashes (MD5, SHA-1, SHA-256, etc.) for password storage or data integrity checks.&lt;br&gt;&lt;br&gt;
&lt;a href="https://www.devtools.tools/bcrypt-generator" rel="noopener noreferrer"&gt;Bcrypt Generator Verifier&lt;/a&gt; – Specifically designed for password hashing, this tool creates and verifies bcrypt hashes with adjustable cost factors.&lt;br&gt;&lt;br&gt;
&lt;a href="https://www.devtools.tools/jwt-decoder" rel="noopener noreferrer"&gt;JWT Token Decoder&lt;/a&gt; – Decode and inspect JSON Web Tokens, often used for authentication and authorization.&lt;br&gt;&lt;br&gt;
&lt;a href="https://www.devtools.tools/totp-generator" rel="noopener noreferrer"&gt;TOTP 2FA Generator&lt;/a&gt; – Implement two-factor authentication by generating time-based one-time passwords, complementing strong password policies.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Try it: &lt;a href="https://www.devtools.tools/password-strength-checker" rel="noopener noreferrer"&gt;Password Strength Checker on DevTools&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

</description>
      <category>devtools</category>
      <category>productivity</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Password Generator and the case for browser-side cryptography</title>
      <dc:creator>Goksel Yesiller</dc:creator>
      <pubDate>Mon, 13 Jul 2026 08:05:18 +0000</pubDate>
      <link>https://dev.to/mryesiller/password-generator-and-the-case-for-browser-side-cryptography-2162</link>
      <guid>https://dev.to/mryesiller/password-generator-and-the-case-for-browser-side-cryptography-2162</guid>
      <description>&lt;p&gt;Every developer knows the friction of creating strong, unique passwords for dozens of services—only to have them rejected by arcane character requirements. The Password Generator from DevTools eliminates that frustration with a cryptographically secure, customizable approach that runs entirely in your browser. It’s part of a suite of over 200 free, privacy-first tools that require no signup and keep your data local.&lt;/p&gt;

&lt;h2&gt;
  
  
  What it is
&lt;/h2&gt;

&lt;p&gt;The Password Generator is a browser-based security tool that produces passwords and passphrases using the Web Crypto API’s &lt;code&gt;crypto.getRandomValues()&lt;/code&gt; method. Unlike generators that rely on &lt;code&gt;Math.random()&lt;/code&gt;—a pseudo-random function predictable with sufficient effort—this tool taps into the operating system’s entropy sources, delivering randomness suitable for cryptographic operations. The result is a credential that cannot be reproduced or guessed, even by someone who knows the exact generation parameters.&lt;/p&gt;

&lt;p&gt;Customization sits at the core of the tool. You control password length, character sets (lowercase, uppercase, numbers, symbols), and advanced filtering to exclude ambiguous or visually similar characters. A dedicated passphrase mode generates sequences of random words, offering an alternative that balances memorability with security. Because everything executes client-side, no password ever touches a server, aligning with DevTools’ privacy-first philosophy across its entire catalog.&lt;/p&gt;

&lt;h2&gt;
  
  
  How to use it
&lt;/h2&gt;

&lt;p&gt;The interface splits generation into two clear modes: Password and Passphrase. For a traditional password, drag the length slider to set the desired character count—anywhere from 8 to 128—then tick the checkboxes for the character types you want to include. The tool instantly recalculates the available character pool and displays the estimated entropy of your configuration.&lt;/p&gt;

&lt;p&gt;Advanced options give you finer control. Enable “Exclude ambiguous characters” to strip out easily confused glyphs like &lt;code&gt;0&lt;/code&gt;, &lt;code&gt;O&lt;/code&gt;, &lt;code&gt;I&lt;/code&gt;, and &lt;code&gt;l&lt;/code&gt;—a lifesaver when passwords must be manually typed. The stricter “Exclude similar characters” option removes additional lookalikes. For environments with rigid complexity rules, toggle “Require at least one character from each selected type” to guarantee the output meets policy without manual inspection. A single click on “Generate Password” produces a credential matching your specifications, ready to copy to the clipboard.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Simplified illustration of the cryptographic core&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;array&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Uint32Array&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;crypto&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getRandomValues&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;password&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Array&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;from&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;array&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;byte&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;charset&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;byte&lt;/span&gt; &lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="nx"&gt;charset&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;]).&lt;/span&gt;&lt;span class="nf"&gt;join&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;''&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Passphrase mode works similarly: choose the number of words, a separator character, and whether to capitalize or include numbers. The wordlist is drawn from a large, curated set, and the generator ensures sufficient entropy for most non-military applications. Like all DevTools, the generator operates without ads, trackers, or account requirements—just open the page and start creating.&lt;/p&gt;

&lt;h2&gt;
  
  
  When to reach for it
&lt;/h2&gt;

&lt;p&gt;Reach for this generator whenever you need credentials that must withstand offline brute-force attacks or when you cannot trust a third-party service to produce or store them. Setting up a new database user, generating API keys, seeding environment variables for CI/CD pipelines—these are moments where weak randomness can cascade into a security incident. Because the tool uses the same cryptographic primitives that underpin TLS and disk encryption, the output is appropriate for production systems.&lt;/p&gt;

&lt;p&gt;Development and testing workflows benefit enormously. When spinning up ephemeral environments, you often need dozens of unique, strong passwords for test accounts, service principals, or mock authentication servers. Manually inventing them is tedious and error-prone; reusing a single “test123” across environments is a dangerous shortcut. The generator lets you create compliant credentials in seconds, with the confidence that they mirror production-grade security.&lt;/p&gt;

&lt;p&gt;The character exclusion features prove their worth when dealing with legacy systems or hardware that impose odd input restrictions. If a mainframe terminal accepts only a subset of ASCII, or a kiosk application rejects certain symbols, you can tailor the output precisely. Similarly, organizations with detailed password policies—minimum entropy, mandatory character classes, forbidden sequences—can dial in the exact requirements and generate compliant passwords without trial and error.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try it yourself
&lt;/h2&gt;

&lt;p&gt;Visit the Password Generator and experiment with different configurations. Start with a 16-character password using all character types, then toggle the advanced filters to see how the output changes. Switch to passphrase mode and generate a five-word phrase with a hyphen separator; compare how that feels to remember versus a string of random symbols.&lt;/p&gt;

&lt;p&gt;For a deeper look, generate several passwords in quick succession and note that no two are alike—the cryptographic randomness guarantees uniqueness without any hidden state. The tool is free, requires no signup, and keeps everything local, so you can integrate it into your daily workflow without hesitation.&lt;/p&gt;

&lt;h2&gt;
  
  
  Related tools
&lt;/h2&gt;

&lt;p&gt;Pair the Password Generator with &lt;a href="https://devtools.tools/hash-generator" rel="noopener noreferrer"&gt;Hash Generator&lt;/a&gt; to create SHA-256 or MD5 hashes of your new credentials for storage or verification. Use &lt;a href="https://devtools.tools/uuid-generator" rel="noopener noreferrer"&gt;UUID Generator&lt;/a&gt; when you need unique identifiers alongside authentication tokens. For inspecting the JWTs that often accompany strong passwords in modern auth flows, the &lt;a href="https://devtools.tools/jwt-decoder" rel="noopener noreferrer"&gt;JWT Token Decoder&lt;/a&gt; decodes headers and payloads instantly.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Try it: &lt;a href="https://www.devtools.tools/password-generator" rel="noopener noreferrer"&gt;Password Generator on DevTools&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

</description>
      <category>devtools</category>
      <category>productivity</category>
      <category>webdev</category>
    </item>
    <item>
      <title>CSP Builder: a small tool that solves a specific problem</title>
      <dc:creator>Goksel Yesiller</dc:creator>
      <pubDate>Sat, 11 Jul 2026 10:00:13 +0000</pubDate>
      <link>https://dev.to/mryesiller/csp-builder-a-small-tool-that-solves-a-specific-problem-55ld</link>
      <guid>https://dev.to/mryesiller/csp-builder-a-small-tool-that-solves-a-specific-problem-55ld</guid>
      <description>&lt;p&gt;You’re deploying a new feature and need to lock down your site against cross-site scripting, but the Content Security Policy spec reads like ciphertext. A stray semicolon or a missing quote can silently break legitimate resources or leave a gaping hole an attacker will find in minutes. CSP Builder turns that friction into a fast visual configuration—no memorizing directive syntax, no guesswork, just a clean policy string ready for production.&lt;/p&gt;

&lt;h2&gt;
  
  
  What it is
&lt;/h2&gt;

&lt;p&gt;CSP Builder is a visual Content Security Policy generator, part of the DevTools collection of 200+ free browser utilities. Content Security Policy (CSP) is a critical web security standard that prevents XSS and code injection by telling the browser exactly which content sources to trust. Instead of writing raw policy strings, you compose directives through a form-based interface that enforces the correct syntax and catches common missteps as you go.&lt;/p&gt;

&lt;p&gt;The tool treats each CSP directive—&lt;code&gt;default-src&lt;/code&gt;, &lt;code&gt;script-src&lt;/code&gt;, &lt;code&gt;style-src&lt;/code&gt;, &lt;code&gt;img-src&lt;/code&gt;, and more—as an independent row. For every directive, you pick sources from a curated list or type custom URLs. The output is a syntactically valid &lt;code&gt;Content-Security-Policy&lt;/code&gt; header that you can drop into your web server configuration or application middleware without further massaging.&lt;/p&gt;

&lt;p&gt;Because it lives entirely in the browser, the tool never sends your policy drafts anywhere; it’s a privacy-first utility that requires no signup.&lt;/p&gt;

&lt;h2&gt;
  
  
  How to use it
&lt;/h2&gt;

&lt;p&gt;The interface is built around a clear mapping of directives to resource types. Each row represents a directive: start with &lt;code&gt;default-src&lt;/code&gt; to set a baseline for all resource types, then override specific directives as needed. For each directive, quick-add buttons let you insert common source values like &lt;code&gt;'self'&lt;/code&gt; (same origin), &lt;code&gt;'none'&lt;/code&gt; (block everything), &lt;code&gt;'unsafe-inline'&lt;/code&gt; (allow inline scripts/styles), &lt;code&gt;'unsafe-eval'&lt;/code&gt; (allow dynamic code evaluation), and &lt;code&gt;data:&lt;/code&gt; or &lt;code&gt;https:&lt;/code&gt; schemes.&lt;/p&gt;

&lt;p&gt;To add an external CDN, type the origin into the source field—for example &lt;code&gt;https://cdn.example.com&lt;/code&gt;. You can stack multiple sources in a single directive; CSP Builder will join them with proper spacing. A live policy preview updates in real time so you always see the exact header string you’ll deploy.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight http"&gt;&lt;code&gt;&lt;span class="err"&gt;Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A toggle above the directives switches the policy mode between enforcement and report-only. Report-only (&lt;code&gt;Content-Security-Policy-Report-Only&lt;/code&gt;) logs violations to the browser console without blocking anything, which makes it the safest way to test a policy on a live site before you harden it. Once the violation reports show only expected activity, flip the toggle and deploy the enforced version.&lt;/p&gt;

&lt;p&gt;As part of the DevTools suite, you can reach CSP Builder instantly without leaving your browser. There’s no installation, no account, and nothing to export your policy drafts outside your machine.&lt;/p&gt;

&lt;h2&gt;
  
  
  When to reach for it
&lt;/h2&gt;

&lt;p&gt;CSP Builder excels when you need to create or tighten a Content Security Policy but don’t work with the spec frequently enough to write error-free headers from memory. Even seasoned developers waste time hunting down a forgotten &lt;code&gt;'unsafe-inline'&lt;/code&gt; that blocks their own UI. The tool removes that class of error by structuring the policy and validating source values as you type.&lt;/p&gt;

&lt;p&gt;It’s especially useful during security reviews or when retrofitting CSP onto an existing application. Instead of chasing down every single resource the frontend loads, you can start with a strict &lt;code&gt;default-src 'self'&lt;/code&gt; and incrementally add exceptions while observing the console in report-only mode. The visual layout makes it obvious when you’ve granted overly broad permissions—like allowing &lt;code&gt;https:&lt;/code&gt; for scripts instead of a specific domain—which helps you maintain a minimal, maintainable policy.&lt;/p&gt;

&lt;p&gt;Teams with developers who lack deep security expertise benefit from the tool’s guardrails. It acts as a pair-programmer who knows the RFCs, letting junior or full-stack engineers ship a base CSP that isn’t trivially bypassed. You still own the policy decisions, but the tool ensures the syntax survives a linting pass.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try it yourself
&lt;/h2&gt;

&lt;p&gt;Start with a restrictive baseline: set &lt;code&gt;default-src&lt;/code&gt; to &lt;code&gt;'self'&lt;/code&gt; and block everything else until you know what’s needed. Open your application in a browser and watch the DevTools console for CSP violation reports. Each blocked resource is a clue; add the corresponding source—a CDN domain, a font provider, a WebSocket endpoint—to the appropriate&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Try it: &lt;a href="https://www.devtools.tools/csp-builder" rel="noopener noreferrer"&gt;CSP Builder on DevTools&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

</description>
      <category>devtools</category>
      <category>productivity</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Unix Pipe Builder: a small tool that solves a specific problem</title>
      <dc:creator>Goksel Yesiller</dc:creator>
      <pubDate>Wed, 24 Jun 2026 13:34:45 +0000</pubDate>
      <link>https://dev.to/mryesiller/unix-pipe-builder-a-small-tool-that-solves-a-specific-problem-cib</link>
      <guid>https://dev.to/mryesiller/unix-pipe-builder-a-small-tool-that-solves-a-specific-problem-cib</guid>
      <description>&lt;p&gt;Building complex command-line pipelines often devolves into a cascade of syntax errors and unexpected outputs, even for experienced developers. The cognitive load of remembering flag combinations and debugging intermediate results can turn a straightforward log analysis into a frustrating exercise. The Unix Pipe Builder from DevTools addresses this friction directly, offering a visual workspace that transforms how you construct and reason about data processing chains.&lt;/p&gt;

&lt;h2&gt;
  
  
  What it is
&lt;/h2&gt;

&lt;p&gt;The Unix Pipe Builder is a visual pipeline constructor that eliminates the guesswork from chaining Unix commands. Instead of typing, backspacing, and retyping in a terminal, you assemble pipelines by connecting commands in a graphical interface, with the final command string generated automatically. The tool understands standard utilities—&lt;code&gt;grep&lt;/code&gt;, &lt;code&gt;awk&lt;/code&gt;, &lt;code&gt;sort&lt;/code&gt;, &lt;code&gt;uniq&lt;/code&gt;, &lt;code&gt;cut&lt;/code&gt;, and others—and lets you configure their options through form fields rather than memorizing flags.&lt;/p&gt;

&lt;p&gt;It ships with a library of presets for frequent data-wrangling tasks, such as counting errors in log files, extracting unique IP addresses, or identifying the largest files in a directory. These presets serve both as ready-to-run recipes and as learning aids that demonstrate how commands flow together. Because the tool is part of the DevTools collection—over 200 free browser utilities that require no signup and run entirely client-side—your data never leaves your machine and you’re never prompted for an account.&lt;/p&gt;

&lt;h2&gt;
  
  
  How to use it
&lt;/h2&gt;

&lt;p&gt;The pipeline builder occupies the central canvas. You can begin by selecting a preset from the dropdown or start with an empty pipeline. Presets like “Count errors in log” or “Top 5 URLs by count” instantly populate the builder with a sequence of commands configured for that scenario, giving you a working pipeline you can adjust.&lt;/p&gt;

&lt;p&gt;To create a pipeline from scratch, click “Add Command” and choose from the available Unix tools. For each command, you set its options via dropdowns and input fields. When adding a &lt;code&gt;grep&lt;/code&gt; step, for example, you can specify the pattern, toggle case-insensitivity, and choose between fixed strings or regular expressions—without typing any flags. The interface shows each command as a block in a flowing sequence, with arrows indicating how data passes from one step to the next.&lt;/p&gt;

&lt;p&gt;As you modify the pipeline, the equivalent command string updates in real time below the builder. A typical construction might look like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;cat &lt;/span&gt;access.log | &lt;span class="nb"&gt;grep&lt;/span&gt; &lt;span class="s2"&gt;"ERROR"&lt;/span&gt; | &lt;span class="nb"&gt;cut&lt;/span&gt; &lt;span class="nt"&gt;-d&lt;/span&gt;&lt;span class="s1"&gt;' '&lt;/span&gt; &lt;span class="nt"&gt;-f1&lt;/span&gt; | &lt;span class="nb"&gt;sort&lt;/span&gt; | &lt;span class="nb"&gt;uniq&lt;/span&gt; &lt;span class="nt"&gt;-c&lt;/span&gt; | &lt;span class="nb"&gt;sort&lt;/span&gt; &lt;span class="nt"&gt;-nr&lt;/span&gt; | &lt;span class="nb"&gt;head&lt;/span&gt; &lt;span class="nt"&gt;-5&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You can copy this line directly into your terminal. The visual layout also makes it easy to reorder steps, remove commands, or insert new ones without fear of breaking syntax. You stay focused on the logic of the transformation, not on escaping quotes or recalling the difference between &lt;code&gt;sort -n&lt;/code&gt; and &lt;code&gt;sort -nr&lt;/code&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  When to reach for it
&lt;/h2&gt;

&lt;p&gt;Reach for the Unix Pipe Builder whenever you face log analysis, file processing, or ad-hoc data exploration tasks but either lack fluency in pipeline syntax or want to prototype faster than typing allows. It’s invaluable for developers who work with the command line only occasionally—perhaps during deployment debugging or incident response—and find themselves repeatedly searching for flag details.&lt;/p&gt;

&lt;p&gt;Operations teams benefit from the presets in particular. Monitoring scenarios often demand quick pattern extraction from production logs, and the builder speeds up constructing a reliable pipeline without the overhead of maintaining a personal shell-script library. The tool also shines as a teaching instrument. By seeing commands physically connected, newcomers to the Unix philosophy internalize the composability of simple tools, building intuition they’ll carry back to the terminal.&lt;/p&gt;

&lt;p&gt;When the task involves sensitive data, the zero-server-upload design of DevTools ensures your pipeline configurations and sample data remain local. You can experiment with real log snippets without worrying about external exposure.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try it yourself
&lt;/h2&gt;

&lt;p&gt;Visit the &lt;a href="https://devtools.tools/unix-pipe-builder" rel="noopener noreferrer"&gt;Unix Pipe Builder&lt;/a&gt; and open the “Count errors in log” preset. Observe how the pipeline connects &lt;code&gt;cat&lt;/code&gt; → &lt;code&gt;grep&lt;/code&gt; → &lt;code&gt;cut&lt;/code&gt; → &lt;code&gt;sort&lt;/code&gt; → &lt;code&gt;uniq&lt;/code&gt; → &lt;code&gt;sort&lt;/code&gt; → &lt;code&gt;head&lt;/code&gt;, and note the options selected for each step. This concrete example reveals how these commands collaborate to aggregate and rank error occurrences.&lt;/p&gt;

&lt;p&gt;Next, replicate a task you do manually. If you often hunt for files over a certain size, build a pipeline that uses &lt;code&gt;find&lt;/code&gt;, &lt;code&gt;xargs&lt;/code&gt;, &lt;code&gt;ls&lt;/code&gt;, and &lt;code&gt;sort&lt;/code&gt; to surface the largest candidates. Tweak parameters and reorder steps to see how the data flow changes. Copy the generated command and test it with sample data in a safe directory. Once you’re comfortable, integrate the produced commands into scripts or monitoring routines—the builder accelerates prototyping, but the final command is pure, runnable Unix that works anywhere.&lt;/p&gt;

&lt;h2&gt;
  
  
  Related tools
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://devtools.tools/chmod-calculator" rel="noopener noreferrer"&gt;Chmod Calculator&lt;/a&gt; helps you calculate Linux file permissions when manipulating files within your pipelines. &lt;a href="https://www.devtools.tools/cron-builder" rel="noopener noreferrer"&gt;Cron Expression Builder&lt;/a&gt; lets you schedule generated commands to run automatically. &lt;a href="https://www.devtools.tools/env-encoder" rel="noopener noreferrer"&gt;Environment Variable Encoder/Decoder&lt;/a&gt; handles encoded values when your pipelines interact with environment variables.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Try it: &lt;a href="https://www.devtools.tools/unix-pipe-builder" rel="noopener noreferrer"&gt;Unix Pipe Builder on DevTools&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

</description>
      <category>devtools</category>
      <category>productivity</category>
      <category>webdev</category>
    </item>
    <item>
      <title>SQL Formatter: a data tool that earns its tab</title>
      <dc:creator>Goksel Yesiller</dc:creator>
      <pubDate>Mon, 22 Jun 2026 18:41:52 +0000</pubDate>
      <link>https://dev.to/mryesiller/sql-formatter-a-data-tool-that-earns-its-tab-246g</link>
      <guid>https://dev.to/mryesiller/sql-formatter-a-data-tool-that-earns-its-tab-246g</guid>
      <description>&lt;p&gt;Developers inheriting sprawling SQL codebases or revisiting queries from weeks earlier know the frustration: a dense, unformatted block that obscures joins, filters, and logical flow. Readable SQL isn’t cosmetic — it directly affects debugging speed, peer review accuracy, and long-term maintainability.&lt;/p&gt;

&lt;h2&gt;
  
  
  What it is
&lt;/h2&gt;

&lt;p&gt;SQL Formatter restructures raw SQL into clear, conventionally formatted code, running entirely in the browser. It applies consistent indentation, capitalisation of keywords, and logical line breaks — all without altering the query’s semantics. The formatter understands the syntax of all major database engines, including PostgreSQL, MySQL, SQL Server, and Oracle, so it preserves dialect-specific functions and operators rather than flattening them into a generic style.&lt;/p&gt;

&lt;p&gt;The tool is one of 200+ free browser utilities on DevTools. It processes all input entirely on your machine — no data ever leaves the browser, no account is required, and no analytics track your usage. That privacy-first design means you can safely format queries that contain proprietary business logic embedded in production SQL.&lt;/p&gt;

&lt;p&gt;The engine handles the full spectrum of SQL complexity: basic &lt;code&gt;SELECT&lt;/code&gt; statements, multi-table joins, Common Table Expressions (CTEs), correlated subqueries, window functions, and DML operations like &lt;code&gt;INSERT&lt;/code&gt; or &lt;code&gt;UPDATE&lt;/code&gt;. Because it parses the input rather than applying regular expressions, deeply nested constructs retain their hierarchy, with each subquery or CTE level indented to show ownership.&lt;/p&gt;

&lt;h2&gt;
  
  
  How to use it
&lt;/h2&gt;

&lt;p&gt;Paste any SQL fragment into the left-hand editor and the formatted result appears instantly in the output panel. A live preview updates as you switch formatting options, so you can tune the output without re-pasting.&lt;/p&gt;

&lt;p&gt;The primary configuration controls help you match your team’s conventions or personal preference:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Dialect&lt;/strong&gt;: selecting a specific database ensures that functions such as PostgreSQL’s &lt;code&gt;STRING_AGG&lt;/code&gt; or MySQL’s &lt;code&gt;GROUP_CONCAT&lt;/code&gt; are not inadvertently mangled, and that quoting rules (backticks vs. double quotes) follow the platform’s norms.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Indent width&lt;/strong&gt;: choose from 2 to 8 spaces; the default aligns with most SQL style guides.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Keyword case&lt;/strong&gt;: switch between uppercase and lowercase for reserved words like &lt;code&gt;SELECT&lt;/code&gt;, &lt;code&gt;FROM&lt;/code&gt;, and &lt;code&gt;WHERE&lt;/code&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Templates for common query patterns speed exploration: load a skeleton for a basic &lt;code&gt;SELECT&lt;/code&gt; with a &lt;code&gt;WHERE&lt;/code&gt; clause, a multi-table join with aggregation, a CTE, or a subquery-heavy statement, then modify it. The formatter re-indents your changes on the fly.&lt;/p&gt;

&lt;p&gt;For long, deeply nested queries the tool preserves the logical hierarchy. Consider the transformation of a real-world example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="c1"&gt;-- Before formatting&lt;/span&gt;
&lt;span class="k"&gt;select&lt;/span&gt; &lt;span class="n"&gt;u&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="n"&gt;u&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="k"&gt;count&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;o&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;id&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="n"&gt;order_count&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="n"&gt;users&lt;/span&gt; &lt;span class="n"&gt;u&lt;/span&gt; &lt;span class="k"&gt;left&lt;/span&gt; &lt;span class="k"&gt;join&lt;/span&gt; &lt;span class="n"&gt;orders&lt;/span&gt; &lt;span class="n"&gt;o&lt;/span&gt; &lt;span class="k"&gt;on&lt;/span&gt; &lt;span class="n"&gt;u&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;id&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;o&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;user_id&lt;/span&gt; &lt;span class="k"&gt;where&lt;/span&gt; &lt;span class="n"&gt;u&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;active&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="k"&gt;group&lt;/span&gt; &lt;span class="k"&gt;by&lt;/span&gt; &lt;span class="n"&gt;u&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="n"&gt;u&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;name&lt;/span&gt; &lt;span class="k"&gt;having&lt;/span&gt; &lt;span class="k"&gt;count&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;o&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;id&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt; &lt;span class="k"&gt;order&lt;/span&gt; &lt;span class="k"&gt;by&lt;/span&gt; &lt;span class="n"&gt;order_count&lt;/span&gt; &lt;span class="k"&gt;desc&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;-- After formatting&lt;/span&gt;
&lt;span class="k"&gt;SELECT&lt;/span&gt;
    &lt;span class="n"&gt;u&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;u&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="k"&gt;COUNT&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;o&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;id&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;AS&lt;/span&gt; &lt;span class="n"&gt;order_count&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;users&lt;/span&gt; &lt;span class="n"&gt;u&lt;/span&gt;
&lt;span class="k"&gt;LEFT&lt;/span&gt; &lt;span class="k"&gt;JOIN&lt;/span&gt; &lt;span class="n"&gt;orders&lt;/span&gt; &lt;span class="n"&gt;o&lt;/span&gt; &lt;span class="k"&gt;ON&lt;/span&gt; &lt;span class="n"&gt;u&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;id&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;o&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;user_id&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;u&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;active&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;
&lt;span class="k"&gt;GROUP&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;u&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;u&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;name&lt;/span&gt;
&lt;span class="k"&gt;HAVING&lt;/span&gt; &lt;span class="k"&gt;COUNT&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;o&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;id&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;
&lt;span class="k"&gt;ORDER&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="n"&gt;order_count&lt;/span&gt; &lt;span class="k"&gt;DESC&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Every column, &lt;code&gt;JOIN&lt;/code&gt; condition, and &lt;code&gt;GROUP BY&lt;/code&gt; field is laid out on its own line, making it trivial to spot which column is filtered, aggregated, or joined — even at a glance during a code review.&lt;/p&gt;

&lt;h2&gt;
  
  
  When to reach for it
&lt;/h2&gt;

&lt;p&gt;Code reviews benefit immediately. When teams adopt a uniform formatting style, reviewers stop mentally parsing inconsistent indentation and focus on the logic: are the join conditions correct? Does the &lt;code&gt;WHERE&lt;/code&gt; clause inadvertently filter rows that should remain? Consistently formatted code makes such questions visible.&lt;/p&gt;

&lt;p&gt;Database migration scripts — often dozens of SQL files evolving over years — need predictable structure to survive in version control. Formatting before committing ensures that &lt;code&gt;git diff&lt;/code&gt; shows only intentional changes rather than noise from whitespace and keyword casing. Later, when someone revisits a year-old migration to modify an index or add a column, the query’s intent is still immediately clear.&lt;/p&gt;

&lt;p&gt;Teams that maintain applications across multiple database platforms benefit from the dialect-aware formatting. A query originally written for MySQL can be reformatted using the PostgreSQL dialect before being ported, highlighting syntax differences that might otherwise cause hard-to-debug runtime errors.&lt;/p&gt;

&lt;p&gt;Inheriting a legacy codebase with inconsistent SQL style is another typical trigger. Instead of manually retouching hundreds of statements, you can batch-process them through the formatter — a step that establishes a consistent foundation before you start refactoring logic.&lt;/p&gt;

&lt;p&gt;Finally, performance tuning sessions rely on quick comprehension of query structure. Execution plans describe operators in terms of scans, seeks, and joins, and mapping those back to a well-formatted query lets you correlate a costly nested-loop join with the exact &lt;code&gt;JOIN&lt;/code&gt; clause that needs an index.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try it yourself
&lt;/h2&gt;

&lt;p&gt;The tool is available at &lt;a href="https://www.devtools.tools/sql-formatter" rel="noopener noreferrer"&gt;SQL Formatter&lt;/a&gt;. It runs entirely in the browser and takes about 30 seconds to try on a real workflow: paste a tangled query from your active project, adjust the dialect and indentation to your preference, and inspect the output. Because all processing stays local, even queries containing proprietary business logic never leave your laptop.&lt;/p&gt;

&lt;h2&gt;
  
  
  Related tools
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.devtools.tools/json-formatter" rel="noopener noreferrer"&gt;JSON Formatter&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.devtools.tools/xml-formatter" rel="noopener noreferrer"&gt;XML Formatter&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.devtools.tools/graphql-formatter" rel="noopener noreferrer"&gt;GraphQL Formatter&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;A few seconds of formatting today can save hours of debugging tomorrow.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Try it: &lt;a href="https://www.devtools.tools/sql-formatter" rel="noopener noreferrer"&gt;SQL Formatter on DevTools&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

</description>
      <category>devtools</category>
      <category>productivity</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Choosing the Right Model for Each Task in a Multi-Module AI Agent (Hermes Architecture)</title>
      <dc:creator>Goksel Yesiller</dc:creator>
      <pubDate>Mon, 22 Jun 2026 18:15:12 +0000</pubDate>
      <link>https://dev.to/mryesiller/choosing-the-right-model-for-each-task-in-a-multi-module-ai-agent-hermes-architecture-kgk</link>
      <guid>https://dev.to/mryesiller/choosing-the-right-model-for-each-task-in-a-multi-module-ai-agent-hermes-architecture-kgk</guid>
      <description>&lt;p&gt;AI agents are no longer built around a single monolithic model. The smarter approach — especially for feature-rich agents like Hermes — is &lt;strong&gt;task-based model orchestration&lt;/strong&gt;: routing each job to the model best suited for it. This improves both output quality and cost efficiency at the same time.&lt;/p&gt;

&lt;p&gt;In this guide, we map the full 2026 competitive landscape — Anthropic, OpenAI, Google, DeepSeek, Moonshot (Kimi), MiniMax, Alibaba (Qwen), and Xiaomi (MiMo) — to specific agent modules. The frame isn't geography. It's &lt;strong&gt;capability tier&lt;/strong&gt;: what does this task actually need, and what's the cheapest model that can reliably deliver it?&lt;/p&gt;




&lt;h2&gt;
  
  
  Why Task-Based Model Selection Matters
&lt;/h2&gt;

&lt;p&gt;Not all models are created equal. Some excel at sustained autonomous execution over hours, others at ultra-long context, others at fast low-cost classification. Treating every task as if it deserves your most powerful model is a common mistake that compounds into real waste at scale.&lt;/p&gt;

&lt;p&gt;The "one model fits all" approach causes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Unnecessary cost&lt;/strong&gt; — frontier models on tasks a balanced model handles fine&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Added latency&lt;/strong&gt; — large models are slower, even when a lighter one would suffice&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Missed quality&lt;/strong&gt; — some tasks genuinely need a specialist the default choice can't match&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The right question for every module in your agent: &lt;strong&gt;what capability tier does this task actually need?&lt;/strong&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  The Full Model Landscape by Tier
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Frontier Tier
&lt;/h3&gt;

&lt;p&gt;These are the models you reach for when reliability and sustained autonomous execution are non-negotiable. The gaps between them on most benchmarks are narrow enough that cost, data residency, and specific task fit often matter more than raw rank.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Claude Opus 4.8&lt;/strong&gt; (Anthropic, May 2026) is the leading model for long-horizon agentic work. It scores 69.2% on SWE-Bench Pro, is the only model to complete every case on the Super-Agent benchmark (beating GPT-5.5 at cost parity), and leads on Online-Mind2Web browser tasks at 84%. Its Dynamic Workflows feature fans out across hundreds of parallel subagents in a single session. Four times less likely than Opus 4.7 to let code flaws pass without flagging them — which matters enormously for unattended agent runs. $5 input / $25 output per million tokens.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;GPT-5.5&lt;/strong&gt; (OpenAI, April 2026) is OpenAI's strongest agentic coding model, leading Terminal-Bench 2.0 at 82.7%. Optimized specifically for multi-step workflows: plan, use tools, check work, navigate ambiguity, and keep going. Works well as both orchestrator and subagent in multi-agent systems. Priced around $8 input / $32 output per million tokens.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Gemini 3.5 Flash&lt;/strong&gt; (Google, May 2026) broke the traditional Pro/Flash quality hierarchy: it outperforms Gemini 3.1 Pro on agentic and coding benchmarks while running 4x faster. Scores 83.6% on MCP Atlas (best in class for agentic tool use), 76.2% on Terminal-Bench 2.1, and leads Finance Agent v2 at 57.9%. Natively multimodal: text, image, video, audio, PDF input. Its "thinking levels" (minimal to high) allow fine-grained cost/quality trade-offs in a single model. $1.50 input / $9 output per million tokens.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Gemini 3.1 Pro&lt;/strong&gt; (Google, February 2026) remains the strongest Gemini model for pure reasoning depth — 77.1% on ARC-AGI-2, 94.3% on GPQA Diamond. 1M token context, 64K output. Best when the task requires multi-step reasoning with ambiguous intermediate states or conflicting information that a faster model handles poorly. $2 input / $12 output per million tokens (≤200K context).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Kimi K2.6&lt;/strong&gt; (Moonshot AI, April 2026) leads SWE-Bench Pro at 58.6%, ahead of GPT-5.4 and Claude Opus 4.6. Agent Swarm mode supports 300 parallel sub-agents across 4,000 coordinated steps — purpose-built for Hermes-compatible multi-agent orchestration. Hallucination rate dropped from 65% (K2.5) to 39% (K2.6), a meaningful production-readiness improvement. $0.60 input per million tokens. API routes through Chinese servers; self-host for regulated workloads.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;DeepSeek-V4-Pro&lt;/strong&gt; (DeepSeek, April 2026) has 1.6T total parameters, a default 1M-token context window, and three reasoning modes. Matches Claude Opus 4.6 and GPT-5.4 on most benchmarks. The most cost-efficient frontier option at $0.145 input / $3.48 output per million tokens. Same data residency caveat as all Chinese API endpoints.&lt;/p&gt;




&lt;h3&gt;
  
  
  Balanced Tier
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Claude Sonnet 4.6&lt;/strong&gt; (Anthropic) — The reliable daily driver. Strong instruction following, natural summarization, and structured writing. The default choice when you need quality without frontier prices.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Gemini 3 Flash&lt;/strong&gt; (Google) — Frontier-class at Flash cost. Achieves 78% on SWE-Bench Verified, outperforming Gemini 2.5 Pro. 3x faster than competitors at the same tier, per Artificial Analysis. $0.50 input / $3 output per million tokens. Strong multimodal support. The go-to balanced option for Google ecosystem builders.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Qwen3.5-397B-A17B&lt;/strong&gt; (Alibaba, February 2026) — 397B total, 17B active (Gated DeltaNet + MoE hybrid architecture). Leads on instruction following: 76.5 on IFBench, beating GPT-5.2 and far ahead of Claude on that benchmark. 201 language support. 256K native context, extendable to 1M. Delivered responses 6x faster than Claude Sonnet 4.6 in benchmarks while maintaining competitive quality. Apache 2.0, fully open-weight, runs on consumer hardware. Ideal for instruction-following, multilingual, and high-throughput summarization workloads.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Qwen3-Coder 480B-A35B&lt;/strong&gt; (Alibaba, July 2025) — Dedicated coding specialist, 70% code-focused training on 7.5T tokens, 480B total / 35B active, 256K context. The strongest purpose-built open-source coding model available for self-hosting.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;MiniMax-M2.5&lt;/strong&gt; (MiniMax, February 2026) — 80.2% on SWE-Bench Verified, 76.3% on BrowseComp. Handles Word, Excel, and PowerPoint file operations natively. 241 tokens/second — fastest in the MiniMax lineup. $0.15 input / $0.90 output per million tokens.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;MiniMax-M1&lt;/strong&gt; (MiniMax, June 2025) — The native long-context specialist. 1M-token context, consumes only 25% of the compute DeepSeek R1 needs at 100K token generation. When the binding constraint is context length — whole codebases, multi-document corpora, massive logs — M1 is the purpose-built choice.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;DeepSeek-V3.1&lt;/strong&gt; (DeepSeek) — Hybrid thinking/non-thinking generalist, 671B parameters (37B active), 128K context. Strong tool calling and agentic workflows at Chinese lab pricing.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;MiMo-V2.5-Pro&lt;/strong&gt; (Xiaomi, April 2026) — 1.02T total, 42B active, 1M context, MIT licensed. Ranked #1 open-source model for agentic capabilities by Artificial Analysis. Demonstrated 4.3-hour unassisted compiler build and 11-hour video editor creation with no human in the loop. $1 input per million tokens. Designed for long-horizon software engineering workloads.&lt;/p&gt;




&lt;h3&gt;
  
  
  Lightweight Tier
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Claude Haiku 4.5&lt;/strong&gt; (Anthropic) — Fast, cheap, reliable for routing, classification, and short-form generation. The proven default for the router layer.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Gemini 3.1 Flash-Lite&lt;/strong&gt; (Google) — 363 tokens/second output (45% faster than its predecessor), $0.25 input / $1.50 output per million tokens. Leads on latency-sensitive UI, intent classification, and high-volume summarization where time-to-first-token matters.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;DeepSeek-V4-Flash&lt;/strong&gt; (DeepSeek) — $0.14 input / $0.28 output per million tokens. The cheapest adequate lightweight option available. At this price, the cost argument for any other model at this tier is hard to make.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;MiMo-V2-Flash&lt;/strong&gt; (Xiaomi, December 2025) — 309B total, 15B active, 150 tokens/second, 256K context. $0.10 input / $0.30 output per million tokens. Strong reasoning at lightweight cost; scored 73.4% on SWE-Bench Verified. By April 2026, processing roughly 21% of all OpenRouter traffic.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Qwen3.5-9B&lt;/strong&gt; (Alibaba) — TAU2-Bench agent score of 79.1, BFCL-V4 function calling at 66.1. Runs on 8GB VRAM. The strongest local-deployment routing model, and a serious option for privacy-sensitive or air-gapped environments.&lt;/p&gt;




&lt;h2&gt;
  
  
  Module-to-Model Mapping for a Hermes Agent
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Module&lt;/th&gt;
&lt;th&gt;Frontier Options&lt;/th&gt;
&lt;th&gt;Balanced Options&lt;/th&gt;
&lt;th&gt;Lightweight Options&lt;/th&gt;
&lt;th&gt;Notes&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Web page summarization&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Gemini 3.1 Pro&lt;/td&gt;
&lt;td&gt;Claude Sonnet 4.6, Gemini 3 Flash, Qwen3.5&lt;/td&gt;
&lt;td&gt;DeepSeek-V4-Flash, MiMo-V2-Flash&lt;/td&gt;
&lt;td&gt;Cost/quality depends on page complexity and volume&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Vision / image analysis&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Claude Opus 4.8, Gemini 3.5 Flash&lt;/td&gt;
&lt;td&gt;Kimi K2.6 (MoonViT-3D), MiniMax-M3&lt;/td&gt;
&lt;td&gt;Qwen3.5 (early fusion vision)&lt;/td&gt;
&lt;td&gt;Gemini 3.5 Flash leads Finance Agent v2; Opus 4.8 leads browser tasks&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Context compression (50K+ tokens)&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;DeepSeek-V4-Pro&lt;/td&gt;
&lt;td&gt;MiniMax-M1, MiMo-V2.5-Pro&lt;/td&gt;
&lt;td&gt;—&lt;/td&gt;
&lt;td&gt;MiniMax-M1 uses 75% fewer FLOPs than DeepSeek R1 at 100K tokens&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Skill search / routing&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;—&lt;/td&gt;
&lt;td&gt;—&lt;/td&gt;
&lt;td&gt;Claude Haiku 4.5, DeepSeek-V4-Flash, Gemini 3.1 Flash-Lite, Qwen3.5-9B&lt;/td&gt;
&lt;td&gt;Keep the router cheap. It just needs to be fast and consistent&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Kanban / task decomposition&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Kimi K2.5, Claude Opus 4.8&lt;/td&gt;
&lt;td&gt;Claude Sonnet 4.6, Gemini 3 Flash, DeepSeek-V3.1&lt;/td&gt;
&lt;td&gt;—&lt;/td&gt;
&lt;td&gt;K2.5 if decomposition feeds directly into Agent Swarm execution&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Title generation&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;—&lt;/td&gt;
&lt;td&gt;—&lt;/td&gt;
&lt;td&gt;DeepSeek-V4-Flash, MiMo-V2-Flash, Gemini 3.1 Flash-Lite&lt;/td&gt;
&lt;td&gt;Any lightweight works; pick by cost&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Agentic coding / long-horizon tasks&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Claude Opus 4.8, GPT-5.5, Gemini 3.5 Flash&lt;/td&gt;
&lt;td&gt;Kimi K2.6, MiMo-V2.5-Pro, Qwen3-Coder 480B&lt;/td&gt;
&lt;td&gt;—&lt;/td&gt;
&lt;td&gt;Opus 4.8 for reliability; GPT-5.5 for terminal tasks; Gemini 3.5 Flash for speed+cost&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Math / formal reasoning&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;DeepSeek-R1-0528, DeepSeek-V4-Pro, GPT-5.5&lt;/td&gt;
&lt;td&gt;Qwen3.5, Gemini 3.1 Pro&lt;/td&gt;
&lt;td&gt;—&lt;/td&gt;
&lt;td&gt;DeepSeek leads on price-performance for STEM; Qwen3.5 strong on math too&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Multi-agent orchestration&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Claude Opus 4.8 (Dynamic Workflows), GPT-5.5 (Agents SDK), Kimi K2.6 (Agent Swarm), Gemini 3.5 Flash&lt;/td&gt;
&lt;td&gt;MiMo-V2.5-Pro&lt;/td&gt;
&lt;td&gt;—&lt;/td&gt;
&lt;td&gt;Architecture matters as much as model choice here (see below)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Multilingual / global audience&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;—&lt;/td&gt;
&lt;td&gt;Qwen3.5 (201 languages), Gemini 3.1 Pro&lt;/td&gt;
&lt;td&gt;—&lt;/td&gt;
&lt;td&gt;Qwen3.5 is the strongest open-weight multilingual model&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Office file tasks (Word, Excel, PPT)&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;—&lt;/td&gt;
&lt;td&gt;MiniMax-M2.5&lt;/td&gt;
&lt;td&gt;—&lt;/td&gt;
&lt;td&gt;Native file operation support, no extra tooling needed&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h2&gt;
  
  
  A Closer Look: Multi-Agent Orchestration
&lt;/h2&gt;

&lt;p&gt;All four frontier options take meaningfully different architectural approaches:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Claude Opus 4.8 + Dynamic Workflows&lt;/strong&gt; — Plan-execute-verify cycle with hundreds of parallel subagents per session. Best for structured, supervised workflows where the orchestrator checks results before reporting back. The honesty improvements make it less likely to report false progress in unattended runs.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;GPT-5.5 + OpenAI Agents SDK&lt;/strong&gt; — Supervisor/handoff pattern with clear specialist boundaries. Leads on Terminal-Bench 2.0 (82.7%), making it the strongest choice for command-line-heavy pipelines.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Kimi K2.6 + Agent Swarm&lt;/strong&gt; — 300 domain-specialized sub-agents, 4,000 coordinated steps, trained with PARL (Parallel Agent Reinforcement Learning). Best for research synthesis, large-scale code migrations, and document generation where the output is a finished artifact assembled from many parallel threads. Explicitly compatible with the Hermes Agent framework.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Gemini 3.5 Flash&lt;/strong&gt; — Optimized for parallel agentic execution loops, leads MCP Atlas (83.6%). Best when latency per step matters — in agentic loops with 10–20+ tool calls, its speed advantage compounds significantly.&lt;/p&gt;




&lt;h2&gt;
  
  
  Deep Dive: Web Page Summarization
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;High quality, nuanced content:&lt;/strong&gt; Claude Sonnet 4.6 or Gemini 3.1 Pro. Both handle ambiguous or poorly structured pages gracefully.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Speed and cost at scale:&lt;/strong&gt; DeepSeek-V4-Flash ($0.14/M) or MiMo-V2-Flash ($0.10/M) for high-volume pipelines. Qwen3.5 is compelling if instruction-following precision matters at that volume.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Very long pages (50K+ tokens):&lt;/strong&gt; MiniMax-M1 — its efficiency advantage at long sequences is the largest of any model in this tier.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Multilingual content:&lt;/strong&gt; Qwen3.5 covers 201 languages natively. Gemini models are also strong on multilingual.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Finance or structured data pages:&lt;/strong&gt; Gemini 3.5 Flash leads Finance Agent v2 (57.9%). Worth routing financial content there specifically.&lt;/p&gt;




&lt;h2&gt;
  
  
  Implementation Considerations
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;1. Tier the routing, not just the models.&lt;/strong&gt; A "summarization" task might be lightweight (a 500-word news article) or balanced (a 30-page technical PDF). Classify first, then route.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Keep the router cheap.&lt;/strong&gt; The routing decision itself should cost almost nothing. DeepSeek-V4-Flash, MiMo-V2-Flash, or Qwen3.5-9B at the router layer. Fast and consistent is the only requirement.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Handle data residency from day one.&lt;/strong&gt; DeepSeek, Kimi, MiniMax, MiMo, and Qwen managed APIs route through Chinese infrastructure. For regulated workloads (HIPAA, GDPR, SOC 2), these models are available as open weights under MIT or Apache 2.0. Self-hosting solves the residency problem but adds operational overhead. Gemini runs through Google Cloud with EU region options. Claude and GPT have established enterprise compliance postures.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. Don't ignore local deployment options.&lt;/strong&gt; Qwen3.5-9B runs on 8GB VRAM. Qwen3.6-27B runs on 24GB. For air-gapped, edge, or privacy-critical use cases, the Qwen family is the strongest locally-deployable option across the tier spectrum.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;5. Log model selection decisions.&lt;/strong&gt; If quality drops or costs spike, you need to trace which routing choice caused it. Model selection should be as observable as any other system event.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;6. Re-evaluate quarterly.&lt;/strong&gt; The release cadence from every lab covered here is fast. Treat routing config as a living document.&lt;/p&gt;




&lt;h2&gt;
  
  
  Cost Reference
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Model&lt;/th&gt;
&lt;th&gt;Tier&lt;/th&gt;
&lt;th&gt;Input $/1M&lt;/th&gt;
&lt;th&gt;Output $/1M&lt;/th&gt;
&lt;th&gt;Standout Strength&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Claude Opus 4.8&lt;/td&gt;
&lt;td&gt;Frontier&lt;/td&gt;
&lt;td&gt;$5.00&lt;/td&gt;
&lt;td&gt;$25.00&lt;/td&gt;
&lt;td&gt;Agentic reliability, unattended runs&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;GPT-5.5&lt;/td&gt;
&lt;td&gt;Frontier&lt;/td&gt;
&lt;td&gt;~$8.00&lt;/td&gt;
&lt;td&gt;~$32.00&lt;/td&gt;
&lt;td&gt;Terminal tasks, agentic coding&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Gemini 3.5 Flash&lt;/td&gt;
&lt;td&gt;Frontier&lt;/td&gt;
&lt;td&gt;$1.50&lt;/td&gt;
&lt;td&gt;$9.00&lt;/td&gt;
&lt;td&gt;MCP tool use, Finance Agent, multimodal&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Gemini 3.1 Pro&lt;/td&gt;
&lt;td&gt;Frontier&lt;/td&gt;
&lt;td&gt;$2.00&lt;/td&gt;
&lt;td&gt;$12.00&lt;/td&gt;
&lt;td&gt;Deep reasoning, ARC-AGI-2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Kimi K2.6&lt;/td&gt;
&lt;td&gt;Frontier&lt;/td&gt;
&lt;td&gt;$0.60&lt;/td&gt;
&lt;td&gt;~$2.50&lt;/td&gt;
&lt;td&gt;Agentic coding, Agent Swarm&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;DeepSeek-V4-Pro&lt;/td&gt;
&lt;td&gt;Frontier&lt;/td&gt;
&lt;td&gt;$0.145&lt;/td&gt;
&lt;td&gt;$3.48&lt;/td&gt;
&lt;td&gt;STEM, math, long-context&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Claude Sonnet 4.6&lt;/td&gt;
&lt;td&gt;Balanced&lt;/td&gt;
&lt;td&gt;$3.00&lt;/td&gt;
&lt;td&gt;$15.00&lt;/td&gt;
&lt;td&gt;Instruction following, summarization&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Gemini 3 Flash&lt;/td&gt;
&lt;td&gt;Balanced&lt;/td&gt;
&lt;td&gt;$0.50&lt;/td&gt;
&lt;td&gt;$3.00&lt;/td&gt;
&lt;td&gt;Balanced coding + speed&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Qwen3.5-397B&lt;/td&gt;
&lt;td&gt;Balanced&lt;/td&gt;
&lt;td&gt;~$0.50&lt;/td&gt;
&lt;td&gt;~$2.00&lt;/td&gt;
&lt;td&gt;Multilingual, instruction following&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;MiMo-V2.5-Pro&lt;/td&gt;
&lt;td&gt;Balanced&lt;/td&gt;
&lt;td&gt;$1.00&lt;/td&gt;
&lt;td&gt;—&lt;/td&gt;
&lt;td&gt;Long-horizon agentic, open-weight&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;MiniMax-M2.5&lt;/td&gt;
&lt;td&gt;Balanced&lt;/td&gt;
&lt;td&gt;$0.15&lt;/td&gt;
&lt;td&gt;$0.90&lt;/td&gt;
&lt;td&gt;Office tasks, long-context&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;MiniMax-M1&lt;/td&gt;
&lt;td&gt;Balanced&lt;/td&gt;
&lt;td&gt;$0.40&lt;/td&gt;
&lt;td&gt;$2.20&lt;/td&gt;
&lt;td&gt;Ultra-long context efficiency&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;DeepSeek-V3.1&lt;/td&gt;
&lt;td&gt;Balanced&lt;/td&gt;
&lt;td&gt;~$0.27&lt;/td&gt;
&lt;td&gt;~$1.10&lt;/td&gt;
&lt;td&gt;General tasks, tool calling&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Claude Haiku 4.5&lt;/td&gt;
&lt;td&gt;Lightweight&lt;/td&gt;
&lt;td&gt;$0.80&lt;/td&gt;
&lt;td&gt;$4.00&lt;/td&gt;
&lt;td&gt;Routing, classification&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Gemini 3.1 Flash-Lite&lt;/td&gt;
&lt;td&gt;Lightweight&lt;/td&gt;
&lt;td&gt;$0.25&lt;/td&gt;
&lt;td&gt;$1.50&lt;/td&gt;
&lt;td&gt;High-volume, latency-critical&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;DeepSeek-V4-Flash&lt;/td&gt;
&lt;td&gt;Lightweight&lt;/td&gt;
&lt;td&gt;$0.14&lt;/td&gt;
&lt;td&gt;$0.28&lt;/td&gt;
&lt;td&gt;Cheapest routing option&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;MiMo-V2-Flash&lt;/td&gt;
&lt;td&gt;Lightweight&lt;/td&gt;
&lt;td&gt;$0.10&lt;/td&gt;
&lt;td&gt;$0.30&lt;/td&gt;
&lt;td&gt;Cheapest overall, 73.4% SWE-bench&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Qwen3.5-9B (local)&lt;/td&gt;
&lt;td&gt;Lightweight&lt;/td&gt;
&lt;td&gt;self-hosted&lt;/td&gt;
&lt;td&gt;self-hosted&lt;/td&gt;
&lt;td&gt;Best local deployment option&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;The most capable AI agents aren't the ones running everything through the biggest model. They're the ones that are smart about which model handles which job.&lt;/p&gt;

&lt;p&gt;The competitive landscape has expanded dramatically. Google's Gemini family is now a serious contender at every tier, with Gemini 3.5 Flash punching above its nominal "Flash" position on agentic tasks. Alibaba's Qwen series brings the strongest multilingual capability and the most credible path to local/edge deployment. Xiaomi's MiMo arrived fast and is already processing a significant fraction of real-world API traffic.&lt;/p&gt;

&lt;p&gt;The decision framework is simple: &lt;strong&gt;frontier for quality-critical autonomous work, balanced for volume tasks, lightweight for routing and short-form generation.&lt;/strong&gt; Geography doesn't enter into it. Capability, cost, and data residency constraints do.&lt;/p&gt;

&lt;p&gt;Build the routing config thoughtfully, log everything, and revisit it quarterly. The landscape will look different again.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>agents</category>
      <category>hermes</category>
      <category>architecture</category>
    </item>
    <item>
      <title>Diff Checker: a small tool that solves a specific problem</title>
      <dc:creator>Goksel Yesiller</dc:creator>
      <pubDate>Mon, 22 Jun 2026 09:51:33 +0000</pubDate>
      <link>https://dev.to/mryesiller/diff-checker-a-small-tool-that-solves-a-specific-problem-766</link>
      <guid>https://dev.to/mryesiller/diff-checker-a-small-tool-that-solves-a-specific-problem-766</guid>
      <description>&lt;p&gt;Code reviews, configuration changes, and debugging sessions demand precise understanding of what changed between two versions of text. Manual comparison of large blocks of code or configuration files is error-prone, and version control diffs don’t always provide a quick, focused view for sharing or verifying changes outside a repository.&lt;/p&gt;

&lt;h2&gt;
  
  
  What it is
&lt;/h2&gt;

&lt;p&gt;Diff Checker is a browser-based text comparison tool that performs line-by-line analysis of two text blocks and highlights differences with color-coded visual indicators. It processes text entirely in the browser—part of the 200+ free tools on DevTools—meaning no data is uploaded or stored, a privacy‑first design.&lt;/p&gt;

&lt;p&gt;The interface uses a split‑pane layout: original text on the left, modified text on the right. As you paste or type, the comparison engine recalculates the diff in real time, marking added, removed, and changed segments so differences are immediately clear.&lt;/p&gt;

&lt;p&gt;Several configuration options tailor the analysis. Toggling whitespace sensitivity ignores differences in indentation or blank lines, useful when comparing code from teams with different formatting conventions. Case sensitivity can be turned off for text where capitalization inconsistencies are irrelevant. A swap button reverses the comparison direction with a single click, handy when the assignment of “original” and “modified” is accidentally reversed.&lt;/p&gt;

&lt;h2&gt;
  
  
  How to use it
&lt;/h2&gt;

&lt;p&gt;Paste the original text into the left panel and the modified version into the right panel. The diff view updates instantly, so you don’t need to press a button to see changes.&lt;/p&gt;

&lt;p&gt;For code, the process is straightforward. Drop a baseline function on the left:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;calculateTotal&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;total&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;item&lt;/span&gt; &lt;span class="k"&gt;of&lt;/span&gt; &lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;total&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;price&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;total&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And the updated version on the right:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;calculateTotal&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;taxRate&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;total&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;item&lt;/span&gt; &lt;span class="k"&gt;of&lt;/span&gt; &lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;total&lt;/span&gt; &lt;span class="o"&gt;+=&lt;/span&gt; &lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;price&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;taxRate&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;round&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;total&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The tool highlights the signature change, the modified calculation, and the rounding addition, giving you an unambiguous map of the edit.&lt;/p&gt;

&lt;p&gt;Use the comparison options to narrow the focus. Enable “Ignore whitespace” when comparing code from editors with different indentation styles. Disable “Case sensitive” when reviewing prose or identifiers where case differences aren’t meaningful. If you’ve placed the newer version in the left panel, use the swap button to reverse the direction.&lt;/p&gt;

&lt;h2&gt;
  
  
  When to reach for it
&lt;/h2&gt;

&lt;p&gt;Developers reach for Diff Checker during code reviews when they need to isolate the exact lines that changed between file versions. Instead of scrolling through a full diff in a terminal, they can paste two snippets and see only the relevant modifications, making it easier to discuss the scope and intent of an update.&lt;/p&gt;

&lt;p&gt;Configuration file management benefits from the same precision. Deploying across staging, production, and local environments often means verifying that environment‑specific configs match expectations. The tool highlights missing variables, altered API endpoints, or differing feature flags, preventing deployment mistakes.&lt;/p&gt;

&lt;p&gt;Database schema comparisons gain clarity from the side‑by‑side layout when reviewing migration scripts or table definitions. The line‑level analysis makes added columns, modified constraints, or changed data types immediately visible, reducing the risk of overlooking a breaking change.&lt;/p&gt;

&lt;p&gt;Documentation updates—README files, API docs, inline comments—also become simpler with a visual diff. Technical writers and developers can compare versions to confirm that all additions are correct and nothing important was accidentally removed.&lt;/p&gt;

&lt;p&gt;Finally, debugging workflows that involve log dumps, error stacks, or data extracts demand spotting subtle differences between two outputs. Diff Checker surfaces those differences without forcing an engineer to scan thousands of lines manually.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try it yourself
&lt;/h2&gt;

&lt;p&gt;The tool is available at &lt;a href="https://devtools.tools/diff-checker" rel="noopener noreferrer"&gt;diff-checker&lt;/a&gt;. It runs entirely in the browser, processes data locally, and takes about 30 seconds to test on a real diff—no signup, no tracking, no installation.&lt;/p&gt;

&lt;h2&gt;
  
  
  Related tools
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://devtools.tools/json-formatter" rel="noopener noreferrer"&gt;JSON Formatter&lt;/a&gt; – Format and validate JSON data with syntax highlighting and error detection, also processing everything in the browser.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://devtools.tools/xml-formatter-validator" rel="noopener noreferrer"&gt;XML Formatter Validator&lt;/a&gt; – Clean up and validate XML documents with proper indentation and structure verification.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://devtools.tools/yaml-validator" rel="noopener noreferrer"&gt;YAML Validator&lt;/a&gt; – Validate YAML syntax and structure with detailed error reporting and formatting options, ensuring configuration files remain clean and ready for comparison.&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;&lt;em&gt;Try it: &lt;a href="https://www.devtools.tools/diff-checker" rel="noopener noreferrer"&gt;Diff Checker on DevTools&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

</description>
      <category>devtools</category>
      <category>productivity</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Lorem Ipsum Generator: a small tool that solves a specific problem</title>
      <dc:creator>Goksel Yesiller</dc:creator>
      <pubDate>Mon, 22 Jun 2026 09:49:38 +0000</pubDate>
      <link>https://dev.to/mryesiller/lorem-ipsum-generator-a-small-tool-that-solves-a-specific-problem-55ac</link>
      <guid>https://dev.to/mryesiller/lorem-ipsum-generator-a-small-tool-that-solves-a-specific-problem-55ac</guid>
      <description>&lt;p&gt;Placeholder text is necessary scaffolding in web development, but ubiquitous Lorem ipsum can lead to design monotony and disconnect from project context. Developers building mockups, prototypes, or content-heavy interfaces often need filler text that matches the tone of the target application without introducing distracting Latin.&lt;/p&gt;

&lt;h2&gt;
  
  
  What it is
&lt;/h2&gt;

&lt;p&gt;The Lorem Ipsum Generator is a browser-based tool that produces placeholder text in multiple styles, moving beyond classical Latin pseudo-text. It offers distinct variants: traditional Lorem ipsum, Hipster Ipsum with artisanal terminology, Corporate Speak filled with business jargon, and Pirate Ipsum with nautical themes. Each style maintains readability while providing vocabulary that aligns with the spirit of a given project.&lt;/p&gt;

&lt;p&gt;The generator is part of DevTools, a privacy-first collection of 200+ free browser tools where all processing happens locally—no signup, no tracking. Developers can configure generation parameters to specify the number of paragraphs, total word count, and whether to start with the familiar “Lorem ipsum dolor sit amet” opening. The output is plain text ready for pasting into HTML, design files, or CMS entries.&lt;/p&gt;

&lt;h2&gt;
  
  
  How to use it
&lt;/h2&gt;

&lt;p&gt;The interface is a straightforward form: select a text style from the dropdown, then set the number of paragraphs or words you need. The tool generates the text instantly and provides a one-click copy button.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="c"&gt;&amp;lt;!-- Example output structure when pasting into HTML --&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"content-area"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;p&amp;gt;&lt;/span&gt;Leverage agile frameworks to provide a robust synopsis for high level overviews...&lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;p&amp;gt;&lt;/span&gt;Iterative approaches to corporate strategy foster collaborative thinking...&lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For typical workflows, 1–3 paragraphs suffice for article previews or body content. Headlines work well with 5–15 words, while navigation elements often need only 2–5 words. The quick copy functionality streamlines populating multiple content areas.&lt;/p&gt;

&lt;p&gt;Different styles suit different contexts: Corporate Speak makes business application mockups feel authentic, Hipster Ipsum fits creative or lifestyle projects, and Pirate Ipsum adds character to gaming or entertainment interfaces during development. Because the tool runs entirely in the browser, there is no server round-trip to slow the generation loop.&lt;/p&gt;

&lt;h2&gt;
  
  
  When to reach for it
&lt;/h2&gt;

&lt;p&gt;This generator is valuable during several development phases. Frontend engineers building responsive layouts need varied text lengths to test content reflow across breakpoints. Generating text that matches the project’s tone helps stakeholders and clients visualize the final product without distraction from foreign-language filler.&lt;/p&gt;

&lt;p&gt;UI/UX designers benefit from contextually appropriate placeholder content in prototypes and wireframes. Instead of generic Latin that can confuse non-technical reviewers, themed text maintains the project’s atmosphere during presentations and usability walkthroughs.&lt;/p&gt;

&lt;p&gt;The tool also supports CMS development, where developers need realistic text volumes to test pagination, search indexing, and content display components. Different text styles often surface layout issues that uniform Lorem ipsum might hide, such as word-break problems with unconventional vocabulary or line-length variation from corporate jargon.&lt;/p&gt;

&lt;p&gt;API documentation and testing scenarios frequently require placeholder content that demonstrates various text lengths and styles, making this generator useful for creating comprehensive test datasets. The privacy-first design means no placeholder text ever leaves the browser—important when working in environments with strict data policies.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try it yourself
&lt;/h2&gt;

&lt;p&gt;The Lorem Ipsum Generator is available at &lt;a href="https://www.devtools.tools/lorem-generator" rel="noopener noreferrer"&gt;lorem-ipsum-generator&lt;/a&gt;. It runs entirely in the browser and takes about 30 seconds to try on a real workflow—no setup, account, or data sharing required.&lt;/p&gt;

&lt;h2&gt;
  
  
  Related tools
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Mock Data Generator&lt;/strong&gt; – Creates structured test data including names, addresses, and other realistic content for development and testing. &lt;a href="https://devtools.tools/mock-data-generator" rel="noopener noreferrer"&gt;mock-data-generator&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Slug Generator&lt;/strong&gt; – Converts titles and phrases into URL-friendly slugs, useful alongside placeholder text when building routing or CMS structures. &lt;a href="https://devtools.tools/slug-generator" rel="noopener noreferrer"&gt;slug-generator&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;When placeholder text aligns with a project’s tone, it stops being a distraction and becomes a subtle part of the design process.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Try it: &lt;a href="https://www.devtools.tools/lorem-generator" rel="noopener noreferrer"&gt;Lorem Ipsum Generator on DevTools&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

</description>
      <category>devtools</category>
      <category>productivity</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Dockerfile Builder: a small tool that solves a specific problem</title>
      <dc:creator>Goksel Yesiller</dc:creator>
      <pubDate>Sun, 21 Jun 2026 23:51:51 +0000</pubDate>
      <link>https://dev.to/mryesiller/dockerfile-builder-a-small-tool-that-solves-a-specific-problem-4o9e</link>
      <guid>https://dev.to/mryesiller/dockerfile-builder-a-small-tool-that-solves-a-specific-problem-4o9e</guid>
      <description>&lt;p&gt;Dockerfiles that pass a casual build check can still fail silently in production when they lack proper layer caching, run as root, or omit health checks. For teams without a dedicated container specialist, arriving at an optimized, secure configuration often means multiple rounds of scanning, tweaking, and rebuilding — time that could go into shipping features.&lt;/p&gt;

&lt;h2&gt;
  
  
  What it is
&lt;/h2&gt;

&lt;p&gt;Dockerfile Builder is an interactive configuration tool that generates production-grade Dockerfiles following current best practices. Rather than editing text directly, developers select a runtime environment — Node.js, Python, Go, Rust, Nginx, Ruby, Java, Deno, or Bun — and the tool constructs a multi-stage build, layer caching strategy, health check, and non‑root user setup tailored to that stack.&lt;/p&gt;

&lt;p&gt;The output is a complete Dockerfile with inline comments that explain the rationale behind each instruction, from choosing slim base images to ordering &lt;code&gt;COPY&lt;/code&gt; commands for cache efficiency. The builder automatically splits dependency installation and application code across stages, reducing final image size without manual tweaking. It appends a &lt;code&gt;HEALTHCHECK&lt;/code&gt; instruction that common orchestrators can query, and it generates the &lt;code&gt;USER&lt;/code&gt; directive and associated permission changes so the container never runs as root. Every generated file follows patterns aligned with the OWASP container security guidelines and Docker official image best practices.&lt;/p&gt;

&lt;p&gt;The tool runs entirely in the browser — no uploads, no signup, no tracking — part of the DevTools collection of 200+ free browser tools for engineers. All configuration stays local, so proprietary project details never leave the machine.&lt;/p&gt;

&lt;h2&gt;
  
  
  How to use it
&lt;/h2&gt;

&lt;p&gt;Start by selecting your application’s runtime. The interface immediately picks an appropriate slim base image (for example, &lt;code&gt;node:18-alpine&lt;/code&gt; for a Node.js service) and suggests common patterns for that ecosystem.&lt;/p&gt;

&lt;p&gt;Next, define the build stage. Specify the builder base image version, working directory, and the files to copy first for layer caching. For a Node.js project, you might select &lt;code&gt;package.json&lt;/code&gt; and &lt;code&gt;package-lock.json&lt;/code&gt; and set the build command to &lt;code&gt;npm ci --only=production&lt;/code&gt;. The tool uses this to place dependency installation before source code, maximizing cache reuse:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight docker"&gt;&lt;code&gt;&lt;span class="c"&gt;# Builder stage — generated example&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s"&gt;node:18-alpine&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="k"&gt;AS&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s"&gt;builder&lt;/span&gt;
&lt;span class="k"&gt;WORKDIR&lt;/span&gt;&lt;span class="s"&gt; /app&lt;/span&gt;
&lt;span class="k"&gt;COPY&lt;/span&gt;&lt;span class="s"&gt; package*.json ./&lt;/span&gt;
&lt;span class="k"&gt;RUN &lt;/span&gt;npm ci &lt;span class="nt"&gt;--only&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;production
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Move to the final stage. Choose the production base image (often the same slim variant), a working directory, and which artifacts to copy from the builder stage. Add environment variables, set the exposed port, and specify the start command. The generator structures the copy step to avoid dragging development-only dependencies into the final image.&lt;/p&gt;

&lt;p&gt;Toggle the health check option and provide the endpoint your application exposes (e.g., &lt;code&gt;/health&lt;/code&gt; on port 3000). The builder inserts the appropriate &lt;code&gt;HEALTHCHECK&lt;/code&gt; instruction with retry and interval defaults that you can tune. The security toggle creates a dedicated system user and sets file ownership, so the container’s runtime user is never &lt;code&gt;root&lt;/code&gt;. The final generated Dockerfile can be copied, downloaded, or edited directly in the browser.&lt;/p&gt;

&lt;h2&gt;
  
  
  When to reach for it
&lt;/h2&gt;

&lt;p&gt;Reach for Dockerfile Builder when containerizing a greenfield service and you want a secure, optimized baseline without spending an afternoon on Dockerfile research. It’s equally useful for teams that deploy containerized workloads only occasionally — the generated comments help maintainers understand the configuration months later.&lt;/p&gt;

&lt;p&gt;The tool addresses a specific gap in existing Docker tooling: interactive, visual configuration with immediate feedback. Unlike IDE snippets or static templates, it enforces best practices (multi-stage builds, non‑root user, health checks) by default rather than leaving them as optional checkboxes. That makes it a quick standardization layer when an organization wants every new service to ship with uniform security and observability patterns, regardless of the original author’s Docker experience.&lt;/p&gt;

&lt;p&gt;Use it as a learning aid when ramping up on containerization. Because every line includes an explanatory comment — why &lt;code&gt;COPY&lt;/code&gt; comes before &lt;code&gt;RUN npm install&lt;/code&gt;, why Alpine images are selected, how the &lt;code&gt;--from=builder&lt;/code&gt; syntax works — the output doubles as reference material. When a project’s needs outgrow the generator, the resulting Dockerfile remains a readable foundation that can be extended by hand.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try it yourself
&lt;/h2&gt;

&lt;p&gt;The tool is available at &lt;a href="https://devtools.tools/dockerfile-builder" rel="noopener noreferrer"&gt;dockerfile-builder&lt;/a&gt;. It runs entirely in the browser, so you can generate a best‑practice Dockerfile in about 30 seconds without creating an account or installing anything. Select a runtime, walk through the stages, and get a deployable configuration you can inspect or copy directly.&lt;/p&gt;

&lt;h2&gt;
  
  
  Related tools
&lt;/h2&gt;

&lt;p&gt;For managing secrets and configuration values in container environments, the &lt;a href="https://devtools.tools/env-encoder-decoder" rel="noopener noreferrer"&gt;Environment Variable Encoder/Decoder&lt;/a&gt; helps encode and decode base64 strings without leaving the browser. The &lt;a href="https://devtools.tools/gitignore-generator" rel="noopener noreferrer"&gt;Gitignore Generator&lt;/a&gt; builds tailored &lt;code&gt;.gitignore&lt;/code&gt; files that include Docker‑specific entries like &lt;code&gt;.dockerignore&lt;/code&gt; and generated build artifacts, keeping repositories clean. Teams building test data for containerized services often combine the Dockerfile Builder with the &lt;a href="https://devtools.tools/mock-data-generator" rel="noopener noreferrer"&gt;Mock Data Generator&lt;/a&gt;, which produces realistic datasets for development and staging environments.&lt;/p&gt;

&lt;p&gt;A well-structured Dockerfile doesn’t just build — it communicates intent to every engineer who touches it down the line.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Try it: &lt;a href="https://www.devtools.tools/dockerfile-builder" rel="noopener noreferrer"&gt;Dockerfile Builder on DevTools&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

</description>
      <category>devtools</category>
      <category>productivity</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
