# DevTools Surf - full tool index > Machine-readable digest of every tool on DevTools Surf. Each tool has a main entry plus optional deep-links into its Use Cases, Tips, and Fun Facts. Hosted at https://devtools.surf. ## JSON - [JSON Formatter](https://devtools.surf/tools/json-formatter/): Format and prettify JSON with syntax highlighting - [JSON Formatter - use cases](https://devtools.surf/tools/json-formatter/#use-cases): Prettify minified API responses for debugging; Format config files before committing to git; Clean up messy JSON from copy-paste; Validate and fix JSON from legacy systems - [JSON Formatter - tips](https://devtools.surf/tools/json-formatter/#tips): Paste relaxed JSON with comments, single quotes, or trailing commas - it auto-fixes them; Use the indent pills to switch between 2-space, 4-space, tab, or minified; Enable 'Sort... - [JSON Formatter - fun facts](https://devtools.surf/tools/json-formatter/#fun-facts): JSON was inspired by JavaScript object literals but is actually language-independent. - [JSON Validator](https://devtools.surf/tools/json-validator/): Validate JSON syntax and structure - [JSON Validator - tips](https://devtools.surf/tools/json-validator/#tips): It detects and auto-corrects common issues: comments, unquoted keys, trailing commas; Validation errors show the exact position of the problem; Pair with JSON Schema to validate... - [JSON Validator - fun facts](https://devtools.surf/tools/json-validator/#fun-facts): The JSON specification is only 10 pages long - one of the shortest data format specs ever written; JSON technically allows duplicate keys in objects, but the behavior is undefined... - [JSON Viewer](https://devtools.surf/tools/json-viewer/): Explore JSON data in a tree view - [JSON Viewer - use cases](https://devtools.surf/tools/json-viewer/#use-cases): Frontend devs inspecting API response payloads; QA engineers verifying nested JSON test fixtures; Backend devs exploring database document exports; DevOps engineers reviewing JSON... - [JSON Viewer - tips](https://devtools.surf/tools/json-viewer/#tips): Collapse deep nodes to focus on top-level keys; Use the search bar to locate nested values fast; Click any node to copy its path to clipboard - [JSON Viewer - fun facts](https://devtools.surf/tools/json-viewer/#fun-facts): Douglas Crockford published the JSON specification in 2002, originally deriving it from JavaScript's object literal syntax; JSON officially became an ECMA standard ECMA-404 in... - [JSON Stringify](https://devtools.surf/tools/json-stringify/): Convert JSON to escaped string representation - [JSON Stringify - use cases](https://devtools.surf/tools/json-stringify/#use-cases): Developers embedding JSON payloads in HTTP request bodies; Engineers preparing config strings for environment variables; Testers creating escaped JSON for CLI tool arguments;... - [JSON Stringify - tips](https://devtools.surf/tools/json-stringify/#tips): Use this to prepare JSON for embedding in code strings; Check the output for properly escaped quotes and newlines; Copy the stringified result directly into your source file - [JSON Stringify - fun facts](https://devtools.surf/tools/json-stringify/#fun-facts): JSON.stringify in JavaScript was first standardized in ECMAScript 5 2009, before that developers used custom serializers; JSON.stringify can accept a replacer function and a space... - [JSON Patch](https://devtools.surf/tools/json-patch/): Generate or apply RFC 6902 JSON Patch operations - [JSON Patch - use cases](https://devtools.surf/tools/json-patch/#use-cases): Generate minimal update payloads for PATCH API endpoints; Track configuration changes as auditable patch sequences; Apply incremental updates to large JSON documents efficiently;... - [JSON Patch - tips](https://devtools.surf/tools/json-patch/#tips): Generate RFC 6902 patch operations from two JSON documents; Apply a patch to transform a JSON document step by step; Validate patch operations before applying to production data - [JSON Patch - fun facts](https://devtools.surf/tools/json-patch/#fun-facts): RFC 6902 JSON Patch was published in April 2013, defining six operations: add, remove, replace, move, copy, and test; JSON Patch uses JSON Pointer RFC 6901 for path references,... - [JSON Diff](https://devtools.surf/tools/json-diff/): Compare two JSON documents and show structural differences - [JSON Diff - use cases](https://devtools.surf/tools/json-diff/#use-cases): Compare API responses between staging and production; Detect unexpected changes in configuration files; Validate data migration output against expected results; Review schema... - [JSON Diff - tips](https://devtools.surf/tools/json-diff/#tips): Compare two JSON payloads to find structural differences; Distinguish between added, removed, and modified fields; Use the diff output to create migration scripts between versions - [JSON Diff - fun facts](https://devtools.surf/tools/json-diff/#fun-facts): JSON comparison must handle type coercion carefully: the number 1 and the string '1' are different in JSON but equal in JavaScript's == operator; Comparing two 1MB JSON files... - [JSONPath Tester](https://devtools.surf/tools/jsonpath-tester/): Test JSONPath expressions against a JSON document - [JSONPath Tester - use cases](https://devtools.surf/tools/jsonpath-tester/#use-cases): Extract specific fields from complex API responses; Build and test data extraction queries for ETL pipelines; Debug webhook payloads by querying nested JSON structures; Prototype... - [JSONPath Tester - tips](https://devtools.surf/tools/jsonpath-tester/#tips): Test JSONPath expressions like $.store.book*.author live; Use recursive descent $.. to find keys at any depth; Filter array elements with expressions like ?@.price<10 - [JSONPath Tester - fun facts](https://devtools.surf/tools/jsonpath-tester/#fun-facts): JSONPath was proposed by Stefan Goessner in 2007 as the JSON equivalent of XPath for XML, though it was not standardized until RFC 9535 in 2024; The '$' root symbol in JSONPath... - [JSON Sort Keys](https://devtools.surf/tools/json-sort-keys/): Recursively sort all keys in a JSON document alphabetically - [JSON Sort Keys - use cases](https://devtools.surf/tools/json-sort-keys/#use-cases): Normalize JSON configs for cleaner git diffs; Prepare JSON for deterministic hashing or checksums; Standardize API response format documentation; Compare JSON payloads by... - [JSON Sort Keys - tips](https://devtools.surf/tools/json-sort-keys/#tips): Sort keys recursively through all nested objects; Use sorted JSON to get consistent diff output in version control; Compare two JSON files more easily after sorting both - [JSON Sort Keys - fun facts](https://devtools.surf/tools/json-sort-keys/#fun-facts): JSON keys are unordered by specification RFC 8259, meaning {"b":1,"a":2} and {"a":2,"b":1} are semantically identical; Python's json.dumps supports sort_keys=True natively, but... - [JSON Flatten / Unflatten](https://devtools.surf/tools/json-flatten/): Flatten nested JSON to dot-notation or unflatten back - [JSON Flatten / Unflatten - use cases](https://devtools.surf/tools/json-flatten/#use-cases): Explore deeply nested API responses by listing all paths; Convert nested configs to flat environment variable format; Generate documentation of all fields in a JSON schema;... - [JSON Flatten / Unflatten - tips](https://devtools.surf/tools/json-flatten/#tips): Flatten deep JSON to dot-notation for quick scanning; Unflatten dot-notation paths back to nested structure; Use the flattened output as a key list for documentation - [JSON Flatten / Unflatten - fun facts](https://devtools.surf/tools/json-flatten/#fun-facts): Dot-notation for nested objects originated in JavaScript property access syntax defined in the ECMAScript 1 specification in 1997; MongoDB uses dot-notation in queries to access... - [JSON Minifier](https://devtools.surf/tools/json-minifier/): Minify JSON with size statistics - [JSON Minifier - use cases](https://devtools.surf/tools/json-minifier/#use-cases): Reduce JSON config size before embedding in HTML pages; Minimize payload size for bandwidth-constrained mobile APIs; Compact JSON logs before archiving to save storage costs;... - [JSON Minifier - tips](https://devtools.surf/tools/json-minifier/#tips): See the byte savings percentage after minification; Compare original and minified sizes side by side; Use minified JSON to reduce API payload transfer size - [JSON Minifier - fun facts](https://devtools.surf/tools/json-minifier/#fun-facts): Removing whitespace from a typical pretty-printed JSON file can reduce its size by 20-40%, depending on nesting depth and key lengths; JSON was specified by Douglas Crockford in... - [JSON Merge / Deep Merge](https://devtools.surf/tools/json-merge/): Deep merge two JSON objects together - [JSON Merge / Deep Merge - use cases](https://devtools.surf/tools/json-merge/#use-cases): DevOps engineers combining environment-specific config overrides; Backend developers merging default and user settings objects; CI/CD pipelines assembling config from multiple... - [JSON Merge / Deep Merge - tips](https://devtools.surf/tools/json-merge/#tips): Preview the merge result before applying to production configs; Check array handling - deep merge can concatenate or replace arrays; Use this to combine partial config overrides... - [JSON Merge / Deep Merge - fun facts](https://devtools.surf/tools/json-merge/#fun-facts): Deep merge is not part of the JSON specification - RFC 7396 JSON Merge Patch was published in October 2014 to standardize shallow merge semantics; JavaScript's Object.assign only... - [JSON to JSON5](https://devtools.surf/tools/json5-converter/): Convert between strict JSON and relaxed JSON5 format - [JSON to JSON5 - use cases](https://devtools.surf/tools/json5-converter/#use-cases): Developers converting commented config files to strict JSON; Teams migrating between JSON and JSON5 for better readability; Build tool authors supporting relaxed JSON input... - [JSON to JSON5 - tips](https://devtools.surf/tools/json5-converter/#tips): Use JSON5 for config files that need inline comments; Convert JSON5 to strict JSON before sending to APIs; Trailing commas in JSON5 prevent common copy-paste errors - [JSON to JSON5 - fun facts](https://devtools.surf/tools/json5-converter/#fun-facts): JSON5 was created by Aseem Kishore in 2012 to address the most common complaints about JSON, especially the lack of comments and trailing commas; Douglas Crockford intentionally... - [NDJSON / JSONL Viewer](https://devtools.surf/tools/ndjson-viewer/): Parse and display newline-delimited JSON line by line - [NDJSON / JSONL Viewer - use cases](https://devtools.surf/tools/ndjson-viewer/#use-cases): Data engineers inspecting log files from streaming pipelines; ML engineers reviewing training data in JSONL format; Backend developers debugging Elasticsearch bulk API payloads;... - [NDJSON / JSONL Viewer - tips](https://devtools.surf/tools/ndjson-viewer/#tips): Click individual lines to inspect deeply nested fields; Filter lines by a key-value pair to find specific records; Validate that every line is valid JSON before processing - [NDJSON / JSONL Viewer - fun facts](https://devtools.surf/tools/ndjson-viewer/#fun-facts): NDJSON Newline Delimited JSON was popularized by tools like Apache Kafka and Elasticsearch's bulk API as a streaming-friendly alternative to JSON arrays; The JSONL format... - [JSON Path Finder](https://devtools.surf/tools/json-path-finder/): Enter JSON and a value to get every JSONPath that matches - [JSON Path Finder - use cases](https://devtools.surf/tools/json-path-finder/#use-cases): Finding the exact path to a value in a complex API response; Building jq filters by discovering where data lives in JSON; Debugging webhook payloads by searching for specific... - [JSON Path Finder - tips](https://devtools.surf/tools/json-path-finder/#tips): Enter a value to find every JSONPath that leads to it; Use the results to build precise jq or JSONPath queries; Paste large API responses to locate deeply nested values - [JSON Path Finder - fun facts](https://devtools.surf/tools/json-path-finder/#fun-facts): JSONPath was proposed by Stefan Goessner in 2007 as an XPath-like query language for JSON, inspired by XPath's ability to navigate XML documents; RFC 9535, published in February... - [Smart JSON Diff](https://devtools.surf/tools/diff-two-json/): Structural diff between two JSON docs with summary stats - [Smart JSON Diff - use cases](https://devtools.surf/tools/diff-two-json/#use-cases): Comparing staging and production API responses to spot differences; Reviewing configuration changes between deployment versions; Debugging unexpected data changes in webhook... - [Smart JSON Diff - tips](https://devtools.surf/tools/diff-two-json/#tips): Paste both JSON documents to see added, removed, and changed keys; Review the summary stats for a quick change overview; Use this to compare API responses between environments - [Smart JSON Diff - fun facts](https://devtools.surf/tools/diff-two-json/#fun-facts): JSON JavaScript Object Notation was formalized by Douglas Crockford in RFC 4627 in 2006, though it had been in informal use since 2001; The diff algorithm most commonly used in... - [JSON Escape String](https://devtools.surf/tools/json-escape-string/): Escape any text as a JSON-safe string with \n \t \uXXXX handling - [JSON Escape String - tips](https://devtools.surf/tools/json-escape-string/#tips): Escapes newlines, tabs, quotes, backslashes, and control chars; Produces a valid JSON string literal you can paste into any JSON value; Non-ASCII characters are also escaped to... - [JSON Escape String - fun facts](https://devtools.surf/tools/json-escape-string/#fun-facts): JSON.stringify handles ~18 different escape sequences, but only five \" \\ \n \r \t are common; JSON requires forward slashes to be optionally escapable \/ - a quirk inherited... - [JSON Unescape String](https://devtools.surf/tools/json-unescape-string/): Reverse JSON escape sequences back to raw text - [JSON Unescape String - use cases](https://devtools.surf/tools/json-unescape-string/#use-cases): Backend developers debugging double-encoded JSON strings in API responses; Frontend devs extracting readable text from escaped JSON log entries; Data engineers cleaning JSON... - [JSON Unescape String - tips](https://devtools.surf/tools/json-unescape-string/#tips): Paste a JSON-escaped string to get the raw text with real newlines and quotes; Handles \n, \t, \", and Unicode escapes like \u00e9 automatically; Use it to read double-encoded... - [JSON Unescape String - fun facts](https://devtools.surf/tools/json-unescape-string/#fun-facts): JSON requires only 4 characters to be escaped in strings: backslash, double quote, and control characters U+0000 through U+001F. - [JMESPath Tester](https://devtools.surf/tools/jmespath-tester/): Query JSON with JMESPath expressions + live result + examples - [JMESPath Tester - tips](https://devtools.surf/tools/jmespath-tester/#tips): Put the JMESPath expression on line 1 and JSON from line 2 onward; Use users*.name to project a field across an array; Bracket indexes 0, -1 are supported - [JMESPath Tester - fun facts](https://devtools.surf/tools/jmespath-tester/#fun-facts): JMESPath is used by the AWS CLI - every --query you've ever written is JMESPath syntax; JMESPath was created by James Saryerwinnie at Amazon and has official implementations in... ## HTML - [HTML Formatter](https://devtools.surf/tools/html-formatter/): Format and indent HTML code - [HTML Formatter - use cases](https://devtools.surf/tools/html-formatter/#use-cases): Frontend devs cleaning up auto-generated HTML markup; Designers reviewing CMS-exported HTML templates; Email developers formatting inline HTML newsletters; Students learning HTML... - [HTML Formatter - tips](https://devtools.surf/tools/html-formatter/#tips): Set your preferred indent size before formatting; Paste minified HTML to instantly see its structure; Use formatted output to spot unclosed or mismatched tags - [HTML Formatter - fun facts](https://devtools.surf/tools/html-formatter/#fun-facts): Tim Berners-Lee wrote the first HTML document in late 1991, containing just 18 tags; HTML5 was officially recommended by the W3C on October 28, 2014, after over 7 years of... - [HTML Pretty Print](https://devtools.surf/tools/html-pretty-print/): Pretty print HTML with color-coded output - [HTML Pretty Print - use cases](https://devtools.surf/tools/html-pretty-print/#use-cases): Developers presenting HTML snippets in documentation; Code reviewers reading formatted HTML pull requests; Technical writers embedding syntax-highlighted HTML in tutorials;... - [HTML Pretty Print - tips](https://devtools.surf/tools/html-pretty-print/#tips): Use color-coded output to distinguish tags from attributes; Toggle line numbers for easier code review discussions; Compare before and after to verify no content was altered - [HTML Pretty Print - fun facts](https://devtools.surf/tools/html-pretty-print/#fun-facts): Syntax highlighting was first popularized by the text editor Lexx in 1985 at IBM, initially for PL/I code; The HTML tag, introduced by Netscape in 1994, was never part of... - [HTML Validator](https://devtools.surf/tools/html-validator/): Validate HTML markup and structure - [HTML Validator - use cases](https://devtools.surf/tools/html-validator/#use-cases): Frontend devs ensuring cross-browser compatibility; SEO specialists fixing markup errors that hurt rankings; Accessibility engineers validating semantic HTML structure; QA teams... - [HTML Validator - tips](https://devtools.surf/tools/html-validator/#tips): Fix errors from top to bottom as early errors can cascade; Pay attention to accessibility warnings about ARIA attributes; Validate after every major template change to catch... - [HTML Validator - fun facts](https://devtools.surf/tools/html-validator/#fun-facts): The W3C Markup Validation Service was first launched in 1994 and has validated billions of documents since; HTML5 relaxed validation rules significantly, allowing unclosed

and... - [HTML Viewer](https://devtools.surf/tools/html-viewer/): Preview and inspect HTML in real-time - [HTML Viewer - use cases](https://devtools.surf/tools/html-viewer/#use-cases): Frontend devs previewing HTML email templates instantly; Designers checking HTML mockups without a local server; Content editors verifying HTML widget output visually; Students... - [HTML Viewer - tips](https://devtools.surf/tools/html-viewer/#tips): Preview your HTML to catch visual bugs before deploying; Inspect rendered elements to verify CSS is being applied; Test responsive behavior by resizing the preview panel - [HTML Viewer - fun facts](https://devtools.surf/tools/html-viewer/#fun-facts): The first web browser, WorldWideWeb later renamed Nexus, was also an HTML editor, created by Tim Berners-Lee in 1990; Mosaic, released in 1993, was the first browser to display... - [HTML Minify](https://devtools.surf/tools/html-minify/): Minify HTML by removing whitespace and comments - [HTML Minify - use cases](https://devtools.surf/tools/html-minify/#use-cases): Frontend devs reducing HTML payload for faster page loads; DevOps engineers optimizing static site build output; Performance engineers shaving milliseconds off Time to First Byte;... - [HTML Minify - tips](https://devtools.surf/tools/html-minify/#tips): Always keep a formatted backup before minifying; Check that inline scripts survive minification intact; Compare file sizes before and after to measure savings - [HTML Minify - fun facts](https://devtools.surf/tools/html-minify/#fun-facts): Google's homepage HTML is famously minified to under 100 KB, contributing to its sub-second load time; HTML minification typically reduces file size by 10-20%, and combined with... - [HTML to Plain Text](https://devtools.surf/tools/html-to-text/): Strip tags, decode entities, preserve paragraph breaks - [HTML to Plain Text - use cases](https://devtools.surf/tools/html-to-text/#use-cases): Content migrators extracting text from legacy HTML pages; Email developers previewing plain-text fallbacks for HTML emails; Developers stripping HTML tags from CMS content for... - [HTML to Plain Text - tips](https://devtools.surf/tools/html-to-text/#tips): Paste raw HTML and get clean text with paragraph breaks preserved; Entities like & and < are automatically decoded to real characters; Use it to extract readable content... - [HTML to Plain Text - fun facts](https://devtools.surf/tools/html-to-text/#fun-facts): HTML entities were introduced in HTML 2.0 1995. There are 2,231 named character references in the HTML5 specification, from & to ​; The

tag has been part of... ## XML - [XML Formatter](https://devtools.surf/tools/xml-formatter/): Format and prettify XML documents - [XML Formatter - use cases](https://devtools.surf/tools/xml-formatter/#use-cases): Java developers formatting Maven POM or Spring config files; Integration engineers reading SOAP service responses; DevOps engineers prettifying CI/CD pipeline XML configs; Data... - [XML Formatter - tips](https://devtools.surf/tools/xml-formatter/#tips): Choose between 2-space and 4-space indentation styles; Paste single-line XML to quickly reveal its hierarchy; Verify that CDATA sections are preserved after formatting - [XML Formatter - fun facts](https://devtools.surf/tools/xml-formatter/#fun-facts): XML 1.0 was published as a W3C Recommendation on February 10, 1998, derived from SGML which dates back to 1986; The XML specification was authored by a working group of 11 members... - [XML Minify](https://devtools.surf/tools/xml-minify/): Minify XML by removing whitespace - [XML Minify - use cases](https://devtools.surf/tools/xml-minify/#use-cases): Backend devs reducing SOAP message sizes for faster transmission; Mobile developers shrinking XML layout files in Android APKs; DevOps engineers compressing XML configs for... - [XML Minify - tips](https://devtools.surf/tools/xml-minify/#tips): Remove comments along with whitespace for maximum savings; Test that XML Schema validation still passes after minifying; Use minified XML when embedding payloads in API requests - [XML Minify - fun facts](https://devtools.surf/tools/xml-minify/#fun-facts): Enterprise SOAP messages can routinely exceed 1 MB, making XML minification critical for network performance; XML's verbose syntax uses 2-3x more bytes than equivalent JSON, which... - [XML Viewer](https://devtools.surf/tools/xml-viewer/): View XML in a structured tree format - [XML Viewer - use cases](https://devtools.surf/tools/xml-viewer/#use-cases): Backend devs exploring complex SOAP or REST XML responses; Data engineers inspecting XML feeds from third-party vendors; QA engineers verifying XML test data structure and values;... - [XML Viewer - tips](https://devtools.surf/tools/xml-viewer/#tips): Expand and collapse nodes to navigate large XML documents; Search within the tree to find specific elements or attributes; Click a node to see its full XPath for use in queries - [XML Viewer - fun facts](https://devtools.surf/tools/xml-viewer/#fun-facts): The largest XML file ever publicly documented was a 5.4 GB Open Street Map data export containing billions of nodes; XPath, the XML query language, was published as a W3C standard... - [XML Pretty Print](https://devtools.surf/tools/xml-pretty-print/): Pretty print XML with syntax highlighting - [XML Pretty Print - use cases](https://devtools.surf/tools/xml-pretty-print/#use-cases): Developers presenting XML configs in technical documentation; Architects reviewing XML schema definitions during design reviews; Support engineers sharing readable XML logs with... - [XML Pretty Print - tips](https://devtools.surf/tools/xml-pretty-print/#tips): Use syntax highlighting to spot mismatched opening and closing tags; Toggle between dark and light themes for comfortable reading; Line numbers help when referencing specific... - [XML Pretty Print - fun facts](https://devtools.surf/tools/xml-pretty-print/#fun-facts): The first XML editors with syntax highlighting appeared in the late 1990s, with tools like XMLSpy launching in 1999; XML color coding typically uses 4-5 distinct colors: elements,... - [XML Validator](https://devtools.surf/tools/xml-validator/): Validate XML syntax and well-formedness - [XML Validator - use cases](https://devtools.surf/tools/xml-validator/#use-cases): Integration engineers validating SOAP messages against WSDL schemas; Java developers checking Maven POM files for syntax errors; Data engineers ensuring XML feeds conform to... - [XML Validator - tips](https://devtools.surf/tools/xml-validator/#tips): Check well-formedness first before validating against a schema; Read error line numbers to pinpoint exact validation failures; Validate frequently during editing to catch issues... - [XML Validator - fun facts](https://devtools.surf/tools/xml-validator/#fun-facts): XML Schema Definition XSD became a W3C Recommendation in May 2001 and remains the most widely used XML validation language; A well-formed XML document must have exactly one root... - [XML Editor](https://devtools.surf/tools/xml-editor/): Edit XML with real-time validation and highlighting - [XML Editor - use cases](https://devtools.surf/tools/xml-editor/#use-cases): Developers editing Spring or Hibernate XML configuration files; Technical writers maintaining XML-based documentation projects; Integration engineers crafting SOAP request... - [XML Editor - tips](https://devtools.surf/tools/xml-editor/#tips): Watch for real-time validation errors as you type; Use auto-complete for closing tags to avoid mismatches; Toggle between tree view and source view as needed - [XML Editor - fun facts](https://devtools.surf/tools/xml-editor/#fun-facts): Altova XMLSpy, one of the earliest dedicated XML editors, was first released in 1999 and is still actively maintained; The Eclipse XML editor plugin was among the first free XML... - [XML Parser](https://devtools.surf/tools/xml-parser/): Parse XML and extract structured data - [XML Parser - use cases](https://devtools.surf/tools/xml-parser/#use-cases): Backend devs extracting data from third-party XML API responses; Data engineers transforming XML exports into structured datasets; Automation engineers parsing XML reports from... - [XML Parser - tips](https://devtools.surf/tools/xml-parser/#tips): Check parsed output for correct attribute-to-property mapping; Verify that repeated elements become arrays in the parsed result; Use the parsed tree to plan XPath or CSS selector... - [XML Parser - fun facts](https://devtools.surf/tools/xml-parser/#fun-facts): SAX Simple API for XML, the first event-driven XML parser, was developed by David Megginson in 1998 on the xml-dev mailing list; DOM parsing loads the entire XML document into... - [WSDL Formatter](https://devtools.surf/tools/wsdl-formatter/): Format WSDL Web Services Description Language files - [WSDL Formatter - use cases](https://devtools.surf/tools/wsdl-formatter/#use-cases): Integration engineers reading WSDL files to understand available SOAP services; Backend devs generating client stubs from formatted WSDL definitions; QA engineers reviewing WSDL... - [WSDL Formatter - tips](https://devtools.surf/tools/wsdl-formatter/#tips): Format WSDL to clearly see service, port, and binding sections; Use indentation to distinguish operations from their messages; Verify namespace declarations are preserved after... - [WSDL Formatter - fun facts](https://devtools.surf/tools/wsdl-formatter/#fun-facts): WSDL 1.1 was published by W3C in March 2001, co-authored by engineers from Microsoft, IBM, and Ariba; WSDL 2.0, finalized in June 2007, was a complete rewrite but saw limited... - [SOAP Formatter](https://devtools.surf/tools/soap-formatter/): Format SOAP XML messages - [SOAP Formatter - use cases](https://devtools.surf/tools/soap-formatter/#use-cases): Integration engineers debugging SOAP request and response messages; Backend devs formatting SOAP payloads for logging and troubleshooting; QA engineers comparing expected vs... - [SOAP Formatter - tips](https://devtools.surf/tools/soap-formatter/#tips): Format SOAP envelopes to clearly see Header and Body sections; Verify namespace prefixes are consistent throughout the message; Use formatting to spot missing required SOAP... - [SOAP Formatter - fun facts](https://devtools.surf/tools/soap-formatter/#fun-facts): SOAP was originally named Simple Object Access Protocol, but the acronym was dropped in SOAP 1.2 2003 since it was considered misleading; SOAP was first designed by Dave Winer,... - [XML Schema XSD Validator](https://devtools.surf/tools/xml-schema-validator/): Validate XML against basic XSD schema rules - [XML Schema XSD Validator - use cases](https://devtools.surf/tools/xml-schema-validator/#use-cases): Enterprise developers validating SOAP web service messages; Healthcare engineers verifying HL7/FHIR XML document compliance; Financial systems developers checking FpML transaction... - [XML Schema XSD Validator - tips](https://devtools.surf/tools/xml-schema-validator/#tips): Validate element nesting against complexType definitions; Check that required attributes are present on each element; Test with a minimal XML document first to isolate schema... - [XML Schema XSD Validator - fun facts](https://devtools.surf/tools/xml-schema-validator/#fun-facts): XML Schema Definition XSD became a W3C Recommendation in May 2001 - it replaced DTDs as the primary way to define XML document structure and data types; XSD 1.0 is one of the... ## YAML - [YAML Validator](https://devtools.surf/tools/yaml-validator/): Validate YAML syntax and structure - [YAML Validator - use cases](https://devtools.surf/tools/yaml-validator/#use-cases): DevOps engineers validating Kubernetes manifest files before applying; CI/CD engineers checking GitHub Actions or GitLab CI pipeline configs; Backend devs verifying Docker Compose... - [YAML Validator - tips](https://devtools.surf/tools/yaml-validator/#tips): Watch for tab characters, which are illegal in YAML syntax; Check indentation consistency across all nested levels; Validate before deploying to catch missing colons or dashes - [YAML Validator - fun facts](https://devtools.surf/tools/yaml-validator/#fun-facts): YAML originally stood for 'Yet Another Markup Language' but was renamed to 'YAML Ain't Markup Language' to emphasize its data focus; YAML 1.0 was first released in May 2004,... - [YAML Viewer](https://devtools.surf/tools/yaml-viewer/): View YAML in a structured tree format - [YAML Viewer - use cases](https://devtools.surf/tools/yaml-viewer/#use-cases): DevOps engineers exploring Kubernetes resource definitions visually; Backend devs inspecting application configuration hierarchies; SREs reviewing Prometheus or Alertmanager YAML... - [YAML Viewer - tips](https://devtools.surf/tools/yaml-viewer/#tips): Expand nested mappings to explore deeply structured configs; Search for specific keys to navigate large YAML files quickly; Use the tree view to understand inheritance and... - [YAML Viewer - fun facts](https://devtools.surf/tools/yaml-viewer/#fun-facts): Kubernetes adopted YAML as its primary configuration format in 2014, driving a massive surge in YAML usage across the industry; YAML supports anchors & and aliases * for reusing... - [YAML Formatter](https://devtools.surf/tools/yaml-formatter/): Format and prettify YAML documents - [YAML Formatter - use cases](https://devtools.surf/tools/yaml-formatter/#use-cases): DevOps engineers standardizing YAML formatting across team repos; Developers cleaning up messy Ansible playbook files; Platform engineers formatting Terraform YAML variable files;... - [YAML Formatter - tips](https://devtools.surf/tools/yaml-formatter/#tips): Set a consistent indent width of 2 spaces for YAML best practices; Format multi-line strings to use block scalar style for readability; Check that comments are preserved in the... - [YAML Formatter - fun facts](https://devtools.surf/tools/yaml-formatter/#fun-facts): YAML is a strict superset of JSON, meaning every valid JSON document is also a valid YAML document; The YAML specification version 1.2 is 86 pages long, making it one of the most... - [YAML Parser](https://devtools.surf/tools/yaml-parser/): Parse YAML and extract structured data - [YAML Parser - use cases](https://devtools.surf/tools/yaml-parser/#use-cases): Backend devs extracting values from complex YAML config files; DevOps engineers parsing Helm chart templates programmatically; Data engineers converting YAML data sources to... - [YAML Parser - tips](https://devtools.surf/tools/yaml-parser/#tips): Check that multi-document YAML files parse all documents correctly; Verify that anchors and aliases resolve to expected values; Review parsed output for unexpected type coercions... - [YAML Parser - fun facts](https://devtools.surf/tools/yaml-parser/#fun-facts): YAML supports multiple documents in a single file, separated by '---', a feature heavily used in Kubernetes and Jekyll; YAML parsers must handle 9 scalar styles: plain,... - [YAML Multi-Doc Splitter](https://devtools.surf/tools/yaml-multi-doc-splitter/): Split a multi-document YAML file into separate documents - [YAML Multi-Doc Splitter - use cases](https://devtools.surf/tools/yaml-multi-doc-splitter/#use-cases): Kubernetes engineers splitting Helm chart output into files; DevOps teams isolating resources from multi-doc manifests; CI pipelines processing individual YAML documents... - [YAML Multi-Doc Splitter - tips](https://devtools.surf/tools/yaml-multi-doc-splitter/#tips): Split Kubernetes manifests into individual resource files; Verify document boundaries with the --- separator count; Export individual documents for targeted kubectl apply - [YAML Multi-Doc Splitter - fun facts](https://devtools.surf/tools/yaml-multi-doc-splitter/#fun-facts): The YAML multi-document separator '---' was part of the original YAML 1.0 specification in 2004, designed for streaming multiple data structures over a single channel; Kubernetes... - [YAML Anchor Expander](https://devtools.surf/tools/yaml-anchor-expander/): Expand YAML anchors and aliases into plain YAML - [YAML Anchor Expander - use cases](https://devtools.surf/tools/yaml-anchor-expander/#use-cases): DevOps engineers debugging Docker Compose anchor references; CI/CD maintainers flattening complex GitLab CI YAML templates; Kubernetes operators resolving anchor-heavy Helm value... - [YAML Anchor Expander - tips](https://devtools.surf/tools/yaml-anchor-expander/#tips): Expand anchors to see the fully resolved YAML structure; Identify which aliases reference each anchor definition; Use expanded output to debug unexpected merge key behavior - [YAML Anchor Expander - fun facts](https://devtools.surf/tools/yaml-anchor-expander/#fun-facts): YAML anchors & and aliases * were part of the original YAML 1.0 specification in 2004, inspired by the reference system in YAML's predecessor, SML-DEV; The YAML merge key << is... ## CSS - [Minify CSS](https://devtools.surf/tools/css-minify/): Minify CSS by removing whitespace and comments - [Minify CSS - use cases](https://devtools.surf/tools/css-minify/#use-cases): Frontend devs reducing CSS bundle size for production builds; Performance engineers optimizing Core Web Vitals scores; DevOps engineers adding CSS minification to CI/CD build... - [Minify CSS - tips](https://devtools.surf/tools/css-minify/#tips): Remove comments and whitespace together for maximum file reduction; Test that all media queries survive minification intact; Compare rendered pages before and after to catch... - [Minify CSS - fun facts](https://devtools.surf/tools/css-minify/#fun-facts): CSS was proposed by Hakon Wium Lie on October 10, 1994, making it one of the oldest web standards still in active use; CSS minification typically reduces file size by 15-25%, and... - [CSS Beautifier](https://devtools.surf/tools/css-beautifier/): Beautify and format CSS code - [CSS Beautifier - use cases](https://devtools.surf/tools/css-beautifier/#use-cases): Frontend devs cleaning up minified CSS from production sites for editing; Designers reviewing CSS output from design-to-code tools; Legacy codebase maintainers reformatting old... - [CSS Beautifier - tips](https://devtools.surf/tools/css-beautifier/#tips): Set consistent property ordering like alphabetical or grouped; Expand shorthand properties to see all individual values; Use beautified CSS to audit for duplicate or conflicting... - [CSS Beautifier - fun facts](https://devtools.surf/tools/css-beautifier/#fun-facts): The first CSS specification CSS1 was published by the W3C on December 17, 1996, with only 53 properties; CSS now has over 500 distinct properties, with new ones being added... - [CSS Formatter](https://devtools.surf/tools/css-formatter/): Format CSS with proper indentation - [CSS Formatter - use cases](https://devtools.surf/tools/css-formatter/#use-cases): Frontend teams enforcing consistent CSS formatting across projects; Developers formatting CSS before committing to version control; Designers converting inline styles to properly... - [CSS Formatter - tips](https://devtools.surf/tools/css-formatter/#tips): Choose between single-line and multi-line rule formatting; Ensure consistent spacing around colons and semicolons; Format vendor-prefixed properties with proper alignment - [CSS Formatter - fun facts](https://devtools.surf/tools/css-formatter/#fun-facts): CSS Grid Layout, first proposed in 2011 by Microsoft, didn't achieve cross-browser support until 2017; The cascading in CSS refers to a priority algorithm with over 10 levels of... - [CSS Pretty Print](https://devtools.surf/tools/css-pretty-print/): Pretty print CSS with color coding - [CSS Pretty Print - use cases](https://devtools.surf/tools/css-pretty-print/#use-cases): Developers presenting CSS architecture in team meetings; Technical writers creating color-coded CSS examples for docs; Frontend mentors demonstrating selector specificity... - [CSS Pretty Print - tips](https://devtools.surf/tools/css-pretty-print/#tips): Use color coding to distinguish selectors from properties; Toggle between dark and light themes for screen comfort; Enable line numbers for referencing specific CSS rules in... - [CSS Pretty Print - fun facts](https://devtools.surf/tools/css-pretty-print/#fun-facts): The first browser to fully support CSS1 was Internet Explorer 5 for Mac, released in March 2000; CSS custom properties variables, specified in 2012, weren't widely supported until... - [CSS to LESS](https://devtools.surf/tools/css-to-less/): Convert CSS to LESS preprocessor syntax - [CSS to LESS - use cases](https://devtools.surf/tools/css-to-less/#use-cases): Frontend devs migrating vanilla CSS projects to LESS for variable support; Teams adopting LESS for a Bootstrap 3 based project; Developers adding nesting to flat CSS files for... - [CSS to LESS - tips](https://devtools.surf/tools/css-to-less/#tips): Review converted variables to ensure correct LESS @variable syntax; Check that nested selectors follow LESS nesting conventions; Verify that mixin usage was generated for repeated... - [CSS to LESS - fun facts](https://devtools.surf/tools/css-to-less/#fun-facts): LESS was created by Alexis Sellier in 2009, originally written in Ruby before being rewritten in JavaScript; LESS introduced CSS variables years before native CSS custom... - [CSS to SCSS](https://devtools.surf/tools/css-to-scss/): Convert CSS to SCSS preprocessor syntax - [CSS to SCSS - use cases](https://devtools.surf/tools/css-to-scss/#use-cases): Frontend teams migrating CSS to SCSS for better maintainability; Developers adding variables and mixins to existing CSS projects; Design system engineers converting CSS tokens to... - [CSS to SCSS - tips](https://devtools.surf/tools/css-to-scss/#tips): Check that color values are converted to SCSS $variables; Verify nested selectors use the SCSS & parent reference correctly; Review generated @mixin blocks for reusable pattern... - [CSS to SCSS - fun facts](https://devtools.surf/tools/css-to-scss/#fun-facts): SCSS Sassy CSS was introduced in Sass 3.0 May 2010 as a CSS-superset syntax, replacing the original indented Sass syntax; SCSS is the most popular CSS preprocessor, used by... - [CSS to SASS](https://devtools.surf/tools/css-to-sass/): Convert CSS to SASS syntax - [CSS to SASS - use cases](https://devtools.surf/tools/css-to-sass/#use-cases): Ruby developers using SASS with Rails asset pipeline; Teams preferring minimal syntax without braces and semicolons; Developers converting CSS for projects using the indented SASS... - [CSS to SASS - tips](https://devtools.surf/tools/css-to-sass/#tips): Note that SASS uses indentation instead of curly braces; Verify that semicolons are properly removed in the SASS output; Check that nested properties use SASS's namespace syntax - [CSS to SASS - fun facts](https://devtools.surf/tools/css-to-sass/#fun-facts): Sass Syntactically Awesome Stylesheets was created by Hampton Catlin in 2006, making it the oldest CSS preprocessor; The original Sass syntax was inspired by Haml, another... - [CSS to Stylus](https://devtools.surf/tools/css-to-stylus/): Convert CSS to Stylus syntax - [CSS to Stylus - use cases](https://devtools.surf/tools/css-to-stylus/#use-cases): Node.js developers using Stylus with Express or Koa projects; Teams wanting the most minimal CSS preprocessor syntax; Developers converting CSS for projects already using Stylus;... - [CSS to Stylus - tips](https://devtools.surf/tools/css-to-stylus/#tips): Verify that optional colons and semicolons are properly stripped; Check that CSS functions convert to Stylus built-in equivalents; Review converted mixins for Stylus's transparent... - [CSS to Stylus - fun facts](https://devtools.surf/tools/css-to-stylus/#fun-facts): Stylus was created by TJ Holowaychuk in 2010, the same developer who created Express.js for Node.js; Stylus is the most flexible CSS preprocessor, allowing you to omit colons,... - [Stylus to CSS](https://devtools.surf/tools/stylus-to-css/): Convert Stylus to standard CSS - [Stylus to CSS - use cases](https://devtools.surf/tools/stylus-to-css/#use-cases): Teams migrating away from Stylus to standard CSS for simplicity; Developers extracting compiled CSS from legacy Stylus projects; DevOps engineers removing Stylus build... - [Stylus to CSS - tips](https://devtools.surf/tools/stylus-to-css/#tips): Verify that Stylus mixins expand to standard CSS correctly; Check that variable references are resolved to actual values; Ensure conditional styles are flattened properly in the... - [Stylus to CSS - fun facts](https://devtools.surf/tools/stylus-to-css/#fun-facts): Stylus can operate without any punctuation at all, making it the most terse CSS preprocessor available; Stylus includes a built-in function library with over 40 color manipulation... - [Stylus to LESS](https://devtools.surf/tools/stylus-to-less/): Convert Stylus to LESS syntax - [Stylus to LESS - use cases](https://devtools.surf/tools/stylus-to-less/#use-cases): Teams migrating from Stylus to LESS for broader tooling support; Developers switching preprocessors to align with a LESS-based UI framework; Projects consolidating multiple... - [Stylus to LESS - tips](https://devtools.surf/tools/stylus-to-less/#tips): Verify that Stylus variables map to LESS @variable syntax; Check that Stylus conditionals convert to LESS guard mixins; Review nested selectors for proper LESS & parent references - [Stylus to LESS - fun facts](https://devtools.surf/tools/stylus-to-less/#fun-facts): LESS and Stylus both run on Node.js, making this conversion between two JavaScript-based preprocessors; LESS uses @ for variables while Stylus has no required prefix, requiring a... - [Stylus to SCSS](https://devtools.surf/tools/stylus-to-scss/): Convert Stylus to SCSS syntax - [Stylus to SCSS - use cases](https://devtools.surf/tools/stylus-to-scss/#use-cases): Teams migrating from Stylus to SCSS for better IDE support and tooling; Developers converting legacy Stylus code for SCSS-based design systems; Projects adopting SCSS to use... - [Stylus to SCSS - tips](https://devtools.surf/tools/stylus-to-scss/#tips): Verify that Stylus functions convert to SCSS @function syntax; Check that Stylus iteration converts to SCSS @each or @for loops; Ensure Stylus hash lookups map to SCSS map-get... - [Stylus to SCSS - fun facts](https://devtools.surf/tools/stylus-to-scss/#fun-facts): SCSS has significantly more community plugins and libraries than Stylus, which is a common reason for migration; Stylus's block-level expressions have no direct SCSS equivalent,... - [Stylus to SASS](https://devtools.surf/tools/stylus-to-sass/): Convert Stylus to SASS syntax - [Stylus to SASS - use cases](https://devtools.surf/tools/stylus-to-sass/#use-cases): Teams consolidating from Stylus to the original Sass indented syntax; Ruby developers preferring Sass syntax for consistency with Haml views; Developers migrating Stylus code to... - [Stylus to SASS - tips](https://devtools.surf/tools/stylus-to-sass/#tips): Both use indentation, so check that nesting depth is preserved; Verify that Stylus's implicit returns become explicit in SASS; Check that Stylus interpolation converts to SASS #{}... - [Stylus to SASS - fun facts](https://devtools.surf/tools/stylus-to-sass/#fun-facts): Both Stylus and indented Sass share indentation-based syntax, making this one of the most natural preprocessor conversions; Indented Sass was the original Sass syntax 2006,... - [LESS to CSS](https://devtools.surf/tools/less-to-css/): Convert LESS to standard CSS - [LESS to CSS - use cases](https://devtools.surf/tools/less-to-css/#use-cases): Teams removing LESS as a build dependency by converting to plain CSS; Developers extracting compiled CSS from LESS-based Bootstrap themes; Projects migrating to CSS custom... - [LESS to CSS - tips](https://devtools.surf/tools/less-to-css/#tips): Verify that all LESS variables are resolved to their final values; Check that LESS mixins are expanded inline in the CSS output; Ensure LESS guard expressions produce the correct... - [LESS to CSS - fun facts](https://devtools.surf/tools/less-to-css/#fun-facts): LESS can run directly in the browser via less.js, compiling stylesheets client-side without a build step; Twitter Bootstrap was originally built with LESS in 2011, making LESS the... - [LESS to SCSS](https://devtools.surf/tools/less-to-scss/): Convert LESS to SCSS syntax - [LESS to SCSS - use cases](https://devtools.surf/tools/less-to-scss/#use-cases): Teams following Bootstrap's migration path from LESS to SCSS; Developers adopting SCSS for better function and control-flow support; Projects standardizing on SCSS to access a... - [LESS to SCSS - tips](https://devtools.surf/tools/less-to-scss/#tips): Check that LESS @variables convert to SCSS $variables correctly; Verify that LESS .mixin calls become SCSS @include directives; Review LESS extend syntax for compatibility with... - [LESS to SCSS - fun facts](https://devtools.surf/tools/less-to-scss/#fun-facts): The migration from LESS to SCSS became widespread after Bootstrap 4 switched from LESS to SCSS in 2018; LESS uses @ for variables and SCSS uses $, because @ in SCSS is reserved... - [LESS to SASS](https://devtools.surf/tools/less-to-sass/): Convert LESS to SASS syntax - [LESS to SASS - use cases](https://devtools.surf/tools/less-to-sass/#use-cases): Teams preferring indented syntax while migrating from LESS; Ruby on Rails developers converting LESS stylesheets to Sass; Projects switching to Sass for integration with Sass's... - [LESS to SASS - tips](https://devtools.surf/tools/less-to-sass/#tips): Verify that LESS @imports convert to Sass @use or @import; Check that LESS arithmetic converts to Sass math module functions; Ensure LESS string interpolation maps to Sass #{}... - [LESS to SASS - fun facts](https://devtools.surf/tools/less-to-sass/#fun-facts): LESS's lazy evaluation means variables can be defined after use, while Sass evaluates variables strictly in order; The Sass indented syntax was inspired by Haml and CoffeeScript's... - [LESS to Stylus](https://devtools.surf/tools/less-to-stylus/): Convert LESS to Stylus syntax - [LESS to Stylus - use cases](https://devtools.surf/tools/less-to-stylus/#use-cases): Node.js teams switching from LESS to Stylus for tighter ecosystem integration; Developers wanting more concise syntax than LESS provides; Projects migrating to Stylus for its... - [LESS to Stylus - tips](https://devtools.surf/tools/less-to-stylus/#tips): Check that LESS @variables become unprefixed Stylus variables; Verify that LESS parametric mixins convert to Stylus functions; Ensure LESS namespace syntax maps to Stylus's block... - [LESS to Stylus - fun facts](https://devtools.surf/tools/less-to-stylus/#fun-facts): Stylus allows the most relaxed syntax of all preprocessors, so LESS code often becomes significantly shorter after conversion; LESS namespaces like #namespace > .mixin have no... - [SCSS to CSS](https://devtools.surf/tools/scss-to-css/): Convert SCSS to standard CSS - [SCSS to CSS - use cases](https://devtools.surf/tools/scss-to-css/#use-cases): Frontend devs compiling SCSS to ship production-ready CSS; Developers generating CSS from SCSS design system tokens; DevOps engineers building CSS output in CI/CD pipelines; Teams... - [SCSS to CSS - tips](https://devtools.surf/tools/scss-to-css/#tips): Verify that @use and @forward modules resolve correctly; Check that all SCSS partials are included in the compiled output; Ensure SCSS @each and @for loops expand to expected CSS... - [SCSS to CSS - fun facts](https://devtools.surf/tools/scss-to-css/#fun-facts): Dart Sass became the primary Sass implementation in 2019 after LibSass was officially deprecated; SCSS's @use module system, introduced in Dart Sass 1.23.0 2019, replaced the... - [SCSS to LESS](https://devtools.surf/tools/scss-to-less/): Convert SCSS to LESS syntax - [SCSS to LESS - use cases](https://devtools.surf/tools/scss-to-less/#use-cases): Teams migrating to LESS for projects requiring client-side compilation; Developers contributing to LESS-based open source projects; Projects downgrading preprocessor complexity... - [SCSS to LESS - tips](https://devtools.surf/tools/scss-to-less/#tips): Check that SCSS $variables convert to LESS @variables properly; Verify that @include becomes LESS .mixin call syntax; Review SCSS maps for compatible LESS data structure... - [SCSS to LESS - fun facts](https://devtools.surf/tools/scss-to-less/#fun-facts): LESS lacks native map data structures that SCSS has, so SCSS maps must be restructured during conversion; SCSS's @extend generates different output than LESS's :extend, which can... - [SCSS to SASS](https://devtools.surf/tools/scss-to-sass/): Convert SCSS to SASS syntax - [SCSS to SASS - use cases](https://devtools.surf/tools/scss-to-sass/#use-cases): Developers preferring minimal syntax for personal projects; Ruby teams wanting Sass syntax consistent with Haml and Slim templates; Open source contributors converting SCSS files... - [SCSS to SASS - tips](https://devtools.surf/tools/scss-to-sass/#tips): Verify that curly braces and semicolons are properly removed; Check that @include shortens to + in indented Sass syntax; Ensure multi-line selectors maintain correct indentation... - [SCSS to SASS - fun facts](https://devtools.surf/tools/scss-to-sass/#fun-facts): SCSS and indented Sass are both valid Sass languages, just with different syntax; they share the same compiler and features; The SCSS-to-Sass conversion is lossless, as both... - [SCSS to Stylus](https://devtools.surf/tools/scss-to-stylus/): Convert SCSS to Stylus syntax - [SCSS to Stylus - use cases](https://devtools.surf/tools/scss-to-stylus/#use-cases): Teams migrating to Stylus for Node.js-native build integration; Developers converting SCSS components for a Stylus-based project; Projects adopting Stylus for its expressive... - [SCSS to Stylus - tips](https://devtools.surf/tools/scss-to-stylus/#tips): Check that SCSS @mixin converts to Stylus's function syntax; Verify that SCSS map-get calls become Stylus hash lookups; Ensure SCSS interpolation #{} maps to Stylus {} or string... - [SCSS to Stylus - fun facts](https://devtools.surf/tools/scss-to-stylus/#fun-facts): Stylus's conditional assignment operator ?= has no SCSS equivalent, making reverse conversion harder than forward; SCSS's @content blocks mixin content injection translate to... - [SASS to CSS](https://devtools.surf/tools/sass-to-css/): Convert SASS to standard CSS - [SASS to CSS - use cases](https://devtools.surf/tools/sass-to-css/#use-cases): Developers shipping compiled CSS from Sass-based design systems; Ruby on Rails devs generating production stylesheets from Sass assets; Teams building CSS output from Sass for... - [SASS to CSS - tips](https://devtools.surf/tools/sass-to-css/#tips): Verify that indentation-based nesting compiles to correct CSS selectors; Check that Sass @import resolves partial files correctly; Ensure Sass placeholder selectors only appear... - [SASS to CSS - fun facts](https://devtools.surf/tools/sass-to-css/#fun-facts): Hampton Catlin proposed Sass in 2006, making it the first CSS preprocessor ever created; Sass introduced the concept of CSS nesting 18 years before CSS Nesting became a native... - [SASS to LESS](https://devtools.surf/tools/sass-to-less/): Convert SASS to LESS syntax - [SASS to LESS - use cases](https://devtools.surf/tools/sass-to-less/#use-cases): Teams converting Sass files for integration with LESS-based projects; Developers migrating Ruby project styles to a LESS-based frontend framework; Projects moving from Sass to... - [SASS to LESS - tips](https://devtools.surf/tools/sass-to-less/#tips): Check that Sass indentation converts to LESS's brace-based syntax; Verify that = mixin definitions become LESS .mixin patterns; Ensure + mixin includes convert to LESS .mixin calls - [SASS to LESS - fun facts](https://devtools.surf/tools/sass-to-less/#fun-facts): Sass's = and + shorthand for mixins has no equivalent in LESS, requiring expansion to full mixin syntax; LESS processes the entire stylesheet before applying rules, while Sass... - [SASS to SCSS](https://devtools.surf/tools/sass-to-scss/): Convert SASS to SCSS syntax - [SASS to SCSS - use cases](https://devtools.surf/tools/sass-to-scss/#use-cases): Teams modernizing legacy indented Sass to the more popular SCSS syntax; Developers converting Sass files to SCSS for better IDE support; Open source maintainers aligning with SCSS... - [SASS to SCSS - tips](https://devtools.surf/tools/sass-to-scss/#tips): Verify that curly braces and semicolons are properly added; Check that + mixin includes expand to @include directives; Ensure multi-line property values are correctly brace-wrapped - [SASS to SCSS - fun facts](https://devtools.surf/tools/sass-to-scss/#fun-facts): The Sass-to-SCSS conversion was so common that the Sass team built the sass-convert CLI tool specifically for this purpose; SCSS became the default Sass syntax around 2010, and... - [SASS to Stylus](https://devtools.surf/tools/sass-to-stylus/): Convert SASS to Stylus syntax - [SASS to Stylus - use cases](https://devtools.surf/tools/sass-to-stylus/#use-cases): Node.js developers converting Sass files for Stylus-based projects; Teams migrating to Stylus for its more powerful built-in functions; Developers switching from Sass to Stylus... - [SASS to Stylus - tips](https://devtools.surf/tools/sass-to-stylus/#tips): Both are indentation-based, so check nesting depth is correct; Verify that Sass's = and + become standard Stylus function calls; Check that Sass string operations convert to... - [SASS to Stylus - fun facts](https://devtools.surf/tools/sass-to-stylus/#fun-facts): Sass and Stylus are the only two major CSS preprocessors that support indentation-based syntax as their primary form; Stylus was partially inspired by Sass, but TJ Holowaychuk... - [CSS Grid Generator](https://devtools.surf/tools/css-grid-generator/): Generate grid-template CSS with custom cols, rows, and gap - [CSS Grid Generator - tips](https://devtools.surf/tools/css-grid-generator/#tips): Use fr units for proportional columns: 1fr 2fr 1fr; Set both gap and row/col gaps independently; grid-template-rows: repeat3, auto for repeating row sizes - [CSS Grid Generator - fun facts](https://devtools.surf/tools/css-grid-generator/#fun-facts): CSS Grid landed in Chrome in March 2017 - the same month in all four major browsers, a rare coordinated release; Grid's 'subgrid' feature took 6 additional years after Grid itself... - [CSS Border Builder](https://devtools.surf/tools/css-border-builder/): Build border CSS - width, style, color, radius, per-side control - [CSS Border Builder - use cases](https://devtools.surf/tools/css-border-builder/#use-cases): Frontend developers quickly generating border CSS with visual feedback; Designers prototyping card and container styles without writing code; CSS learners experimenting with... - [CSS Border Builder - tips](https://devtools.surf/tools/css-border-builder/#tips): Control each side independently for asymmetric border designs; Adjust border-radius to create rounded corners or pill-shaped elements; Preview the CSS output live as you change... - [CSS Border Builder - fun facts](https://devtools.surf/tools/css-border-builder/#fun-facts): CSS border-radius was first proposed in 2005 but wasn't widely supported until 2010 - before that, developers used corner images or JavaScript hacks for rounded corners; The CSS... - [CSS Text Shadow](https://devtools.surf/tools/css-text-shadow/): Build text-shadow with x, y, blur, color - includes neon/retro presets - [CSS Text Shadow - use cases](https://devtools.surf/tools/css-text-shadow/#use-cases): Web designers creating neon glow effects for landing page headlines; Frontend developers adding depth to typography with subtle drop shadows; Retro-themed site builders applying... - [CSS Text Shadow - tips](https://devtools.surf/tools/css-text-shadow/#tips): Use the neon preset for glowing text effects popular in retro designs; Stack multiple text-shadow values for complex layered shadow effects; Adjust blur radius to control shadow... - [CSS Text Shadow - fun facts](https://devtools.surf/tools/css-text-shadow/#fun-facts): CSS text-shadow was originally defined in CSS2 1998 but was removed in CSS2.1 because no browser implemented it - it was reintroduced in CSS3 and finally supported around 2009;... - [CSS Filter Builder](https://devtools.surf/tools/css-filter-builder/): Chain blur, brightness, contrast, hue-rotate, saturate, sepia - [CSS Filter Builder - use cases](https://devtools.surf/tools/css-filter-builder/#use-cases): Frontend developers applying image effects without a graphics editor; UI designers creating frosted-glass or blurred background overlays; Web developers building hover effects... - [CSS Filter Builder - tips](https://devtools.surf/tools/css-filter-builder/#tips): Chain multiple filters like blur, brightness, and contrast in sequence; Use hue-rotate to shift all colors in an image without editing the source; Apply sepia + contrast for a... - [CSS Filter Builder - fun facts](https://devtools.surf/tools/css-filter-builder/#fun-facts): CSS filters were inspired by SVG filter primitives - the CSS filter shorthand functions blur, brightness, etc. - [CSS Transform Builder](https://devtools.surf/tools/css-transform-builder/): Build transform - translate, rotate, scale, skew, 3D rotations - [CSS Transform Builder - use cases](https://devtools.surf/tools/css-transform-builder/#use-cases): Frontend developers building hover animations with visual transform previews; CSS animation engineers composing multi-step transform sequences; UI designers prototyping card flip... - [CSS Transform Builder - tips](https://devtools.surf/tools/css-transform-builder/#tips): Combine translate, rotate, and scale in one transform for complex animations; Use 3D rotations with perspective for depth effects on cards and panels; Preview skew values to... - [CSS Transform Builder - fun facts](https://devtools.surf/tools/css-transform-builder/#fun-facts): CSS transforms use matrix math under the hood - every translate, rotate, and scale operation is converted to a 4x4 transformation matrix before rendering; The transform-origin... - [CSS Glassmorphism](https://devtools.surf/tools/css-glassmorphism/): Generate frosted-glass UI - backdrop-filter blur + transparent bg - [CSS Glassmorphism - tips](https://devtools.surf/tools/css-glassmorphism/#tips): backdrop-filter works best over a colorful background image; Add -webkit-backdrop-filter for Safari/iOS support; Keep opacity between 0.1 and 0.25 for the sweet spot - [CSS Glassmorphism - fun facts](https://devtools.surf/tools/css-glassmorphism/#fun-facts): Glassmorphism was popularized by Apple's macOS Big Sur in 2020 and Microsoft's Fluent Design System before it; The backdrop-filter CSS property was first proposed in 2014 but... - [CSS Neumorphism](https://devtools.surf/tools/css-neumorphism/): Soft-UI box-shadow combinations - raised, inset, and flat modes - [CSS Neumorphism - tips](https://devtools.surf/tools/css-neumorphism/#tips): Needs a mid-tone background not pure white or black; Use light shadow + dark shadow of the same size on opposite sides; Inset mode creates the 'pressed' look - [CSS Neumorphism - fun facts](https://devtools.surf/tools/css-neumorphism/#fun-facts): The term 'neumorphism' was coined by Alexander Plyuto in a 2019 Dribbble post - it went viral overnight; Neumorphism has serious accessibility problems - the subtle shadows... - [CSS Button Styles](https://devtools.surf/tools/css-button-styles/): Modern button CSS - lift hover, shadow, colors, radius, padding - [CSS Button Styles - use cases](https://devtools.surf/tools/css-button-styles/#use-cases): Frontend developers generating production-ready button CSS quickly; Designers prototyping button styles with real-time visual preview; Design system engineers creating... - [CSS Button Styles - tips](https://devtools.surf/tools/css-button-styles/#tips): Customize hover lift and shadow for modern interactive button feedback; Adjust padding, radius, and colors to match your design system tokens; Preview the button live as you tweak... - [CSS Button Styles - fun facts](https://devtools.surf/tools/css-button-styles/#fun-facts): The first clickable button on the web was in 1993 when the HTML element was introduced in HTML 2.0, styled entirely by the browser's native OS theme;... - [CSS Tooltip Builder](https://devtools.surf/tools/css-tooltip-builder/): Pure-CSS tooltip from data-attr - top/bottom/left/right positions - [CSS Tooltip Builder - use cases](https://devtools.surf/tools/css-tooltip-builder/#use-cases): Frontend developers building accessible tooltips without JavaScript; UI designers prototyping tooltip styles and positions visually; Documentation teams adding contextual help... - [CSS Tooltip Builder - tips](https://devtools.surf/tools/css-tooltip-builder/#tips): Choose from top, bottom, left, or right tooltip positions; The tooltip uses a CSS data-attribute so no JavaScript is required; Customize arrow size, background color, and text... - [CSS Tooltip Builder - fun facts](https://devtools.surf/tools/css-tooltip-builder/#fun-facts): Pure CSS tooltips became possible with the attr function and ::before/::after pseudo-elements - before CSS3, all tooltips required JavaScript libraries like jQuery Tippy; The word... - [CSS Card Builder](https://devtools.surf/tools/css-card-builder/): Elevated card with hover-lift + shadow - fully customizable - [CSS Card Builder - use cases](https://devtools.surf/tools/css-card-builder/#use-cases): Frontend developers building card components with hover animations; Designers prototyping elevated card layouts for dashboards; Design system engineers defining card elevation... - [CSS Card Builder - tips](https://devtools.surf/tools/css-card-builder/#tips): Adjust the hover-lift distance to control the elevation animation effect; Customize shadow blur and spread for subtle or dramatic card depth; Set border-radius and padding to... - [CSS Card Builder - fun facts](https://devtools.surf/tools/css-card-builder/#fun-facts): The card UI pattern was popularized by Google's Material Design in 2014, but Pinterest's pin layout 2010 was one of the earliest mainstream implementations of card-based design;... - [CSS Form Styler](https://devtools.surf/tools/css-form-styler/): Style inputs, textareas, selects - focus ring, accent color, radius - [CSS Form Styler - use cases](https://devtools.surf/tools/css-form-styler/#use-cases): Frontend developers styling form inputs to match brand design systems; Designers prototyping form field styles with instant visual feedback; Accessibility engineers ensuring focus... - [CSS Form Styler - tips](https://devtools.surf/tools/css-form-styler/#tips): Customize focus ring color and width for accessible input highlighting; Set accent color to theme checkboxes and radio buttons consistently; Adjust border-radius to create rounded... - [CSS Form Styler - fun facts](https://devtools.surf/tools/css-form-styler/#fun-facts): Styling native HTML form elements was nearly impossible before CSS3 - developers routinely rebuilt selects, checkboxes, and radios entirely in JavaScript for visual consistency;... - [CSS Accordion Builder](https://devtools.surf/tools/css-accordion-builder/): Zero-JS accordion using

/ + CSS animation - [CSS Accordion Builder - use cases](https://devtools.surf/tools/css-accordion-builder/#use-cases): Frontend developers building FAQ sections without JavaScript dependencies; Content editors creating collapsible documentation sections; UI designers prototyping accordion styles... - [CSS Accordion Builder - tips](https://devtools.surf/tools/css-accordion-builder/#tips): Uses native HTML details/summary elements for zero-JavaScript interactivity; Customize the open/close animation timing and easing curve; Style the summary marker to match your... - [CSS Accordion Builder - fun facts](https://devtools.surf/tools/css-accordion-builder/#fun-facts): The HTML
and elements were first specified in HTML5 2014 and provide built-in disclosure widgets without any JavaScript - but CSS animation support came later;... - [CSS Tabs Builder](https://devtools.surf/tools/css-tabs-builder/): Accessible tab bar with aria-selected styling + bottom accent - [CSS Tabs Builder - use cases](https://devtools.surf/tools/css-tabs-builder/#use-cases): Frontend developers building accessible tab navigation with ARIA roles; Designers prototyping tab bar styles for settings and content panels; UI engineers creating consistent tab... - [CSS Tabs Builder - tips](https://devtools.surf/tools/css-tabs-builder/#tips): The generated tabs use aria-selected for proper accessibility semantics; Customize the bottom accent bar color and thickness for active tab indication; Adjust tab padding and... - [CSS Tabs Builder - fun facts](https://devtools.surf/tools/css-tabs-builder/#fun-facts): Tabbed interfaces were popularized by Apple's System 7 1991 control panels, but the concept originated from physical manila folder tabs used in filing cabinets since the 1890s;... - [CSS Modal Builder](https://devtools.surf/tools/css-modal-builder/): Native modal with backdrop blur + entrance animation - [CSS Modal Builder - use cases](https://devtools.surf/tools/css-modal-builder/#use-cases): Frontend developers building accessible modals with native dialog element; Designers prototyping modal animations and backdrop effects visually; UI engineers replacing JavaScript... - [CSS Modal Builder - tips](https://devtools.surf/tools/css-modal-builder/#tips): Uses the native HTML dialog element with built-in backdrop support; Customize backdrop blur and entrance animation for polished modal UX; The generated CSS includes proper focus... - [CSS Modal Builder - fun facts](https://devtools.surf/tools/css-modal-builder/#fun-facts): The HTML element was first proposed in 2010 but wasn't supported in all major browsers until 2022 - Safari was the last holdout, adding support in version 15.4; Before... - [CSS Checkbox Styler](https://devtools.surf/tools/css-checkbox-styler/): Custom checkbox with CSS-only checkmark - accent & size control - [CSS Checkbox Styler - use cases](https://devtools.surf/tools/css-checkbox-styler/#use-cases): Frontend developers replacing default browser checkboxes with branded styles; Designers creating custom checkbox designs for forms and settings; Accessibility engineers ensuring... - [CSS Checkbox Styler - tips](https://devtools.surf/tools/css-checkbox-styler/#tips): Control checkmark size and accent color for brand-consistent checkboxes; The custom checkbox uses CSS-only techniques - no JavaScript needed; Adjust the checkbox dimensions to... - [CSS Checkbox Styler - fun facts](https://devtools.surf/tools/css-checkbox-styler/#fun-facts): Native HTML checkbox styling was essentially impossible until CSS appearance: none gained browser support around 2020, allowing developers to fully override default OS styles; The... - [CSS Switch / Toggle](https://devtools.surf/tools/css-switch-toggle/): iOS-style toggle switch - slider moves on :checked - [CSS Switch / Toggle - use cases](https://devtools.surf/tools/css-switch-toggle/#use-cases): Frontend developers building iOS-style toggles without JavaScript; UI designers creating settings panels with on/off switch controls; Mobile web developers ensuring toggle... - [CSS Switch / Toggle - tips](https://devtools.surf/tools/css-switch-toggle/#tips): The toggle animates a slider on the checkbox :checked state change; Customize track and knob colors for both on and off states; Adjust the toggle size to meet mobile touch target... - [CSS Switch / Toggle - fun facts](https://devtools.surf/tools/css-switch-toggle/#fun-facts): The toggle switch UI pattern was popularized by Apple's iOS 1.0 in 2007, mimicking physical electrical switches - it became a universal mobile UI element within two years;... - [CSS Progress Bar](https://devtools.surf/tools/css-progress-bar/): Gradient progress bar with animated shimmer - accessible - [CSS Progress Bar - use cases](https://devtools.surf/tools/css-progress-bar/#use-cases): Frontend developers building accessible progress indicators for uploads; Designers prototyping loading states with animated shimmer effects; Dashboard builders creating visual... - [CSS Progress Bar - tips](https://devtools.surf/tools/css-progress-bar/#tips): The animated shimmer effect draws attention to active progress indicators; Customize gradient colors to match your brand's primary palette; Add aria-valuenow and aria-valuemax... - [CSS Progress Bar - fun facts](https://devtools.surf/tools/css-progress-bar/#fun-facts): Progress bars were first used in computing by Mitchell Model in his 1979 Ph.D. - [CSS Ribbon Builder](https://devtools.surf/tools/css-ribbon-builder/): Corner ribbon label using clip-path - content via data-ribbon attr - [CSS Ribbon Builder - use cases](https://devtools.surf/tools/css-ribbon-builder/#use-cases): E-commerce developers adding 'Sale' or 'New' badges to product cards; Marketing teams labeling featured content with corner ribbon banners; SaaS designers marking premium features... - [CSS Ribbon Builder - tips](https://devtools.surf/tools/css-ribbon-builder/#tips): The ribbon uses CSS clip-path for clean angled edges without images; Content is set via a data-ribbon attribute for easy text customization; Position the ribbon in any corner with... - [CSS Ribbon Builder - fun facts](https://devtools.surf/tools/css-ribbon-builder/#fun-facts): The CSS clip-path property replaced the old clip property deprecated in CSS2 and added support for shapes like polygon, circle, and ellipse - enabling ribbon angles without... - [CSS Avatar Builder](https://devtools.surf/tools/css-avatar-builder/): Circular/square avatar with initials, ring, image fallback - [CSS Avatar Builder - use cases](https://devtools.surf/tools/css-avatar-builder/#use-cases): Frontend developers building user profile avatar components with fallbacks; Designers prototyping avatar styles for comment sections and user lists; Chat application developers... - [CSS Avatar Builder - tips](https://devtools.surf/tools/css-avatar-builder/#tips): Set a fallback to user initials when the profile image fails to load; Adjust the ring color and width for online/offline status indicators; Switch between circular and... - [CSS Avatar Builder - fun facts](https://devtools.surf/tools/css-avatar-builder/#fun-facts): The word 'avatar' in computing was first used by Chip Morningstar and Randall Farmer in Lucasfilm's Habitat 1986, a pioneering online multiplayer environment; Gravatar Globally... - [CSS Flip Card](https://devtools.surf/tools/css-flip-card/): 3D hover-flip card using perspective + backface-visibility - [CSS Flip Card - use cases](https://devtools.surf/tools/css-flip-card/#use-cases): Frontend developers creating interactive product cards with flip reveals; E-learning designers building flashcard study interfaces; Portfolio developers showcasing project details... - [CSS Flip Card - tips](https://devtools.surf/tools/css-flip-card/#tips): Hover triggers a 3D Y-axis rotation revealing the back face content; Set perspective value to control the depth of the 3D flip effect; Use backface-visibility: hidden to prevent... - [CSS Flip Card - fun facts](https://devtools.surf/tools/css-flip-card/#fun-facts): CSS 3D transforms with perspective and backface-visibility were first implemented in WebKit in 2009, making flip cards possible without Flash for the first time; The... - [CSS Dropdown Builder](https://devtools.surf/tools/css-dropdown-builder/): Hover + focus-within dropdown - zero JS, animated - [CSS Dropdown Builder - use cases](https://devtools.surf/tools/css-dropdown-builder/#use-cases): Frontend developers building navigation dropdowns without JavaScript; Designers prototyping hover menu styles and animations visually; Accessibility engineers creating... - [CSS Dropdown Builder - tips](https://devtools.surf/tools/css-dropdown-builder/#tips): Uses hover and focus-within for keyboard-accessible dropdown behavior; Customize animation timing for smooth dropdown reveal transitions; No JavaScript required - the dropdown is... - [CSS Dropdown Builder - fun facts](https://devtools.surf/tools/css-dropdown-builder/#fun-facts): The CSS :focus-within pseudo-class, standardized in 2017, finally made pure CSS dropdowns keyboard-accessible - before that, hover-only dropdowns were inaccessible to keyboard... - [CSS Breadcrumb Builder](https://devtools.surf/tools/css-breadcrumb-builder/): Navigation breadcrumb with custom separator - /, >, arrow - [CSS Breadcrumb Builder - use cases](https://devtools.surf/tools/css-breadcrumb-builder/#use-cases): Frontend developers generating breadcrumb navigation CSS for content sites; E-commerce developers building category path breadcrumbs for product pages; Documentation site builders... - [CSS Breadcrumb Builder - tips](https://devtools.surf/tools/css-breadcrumb-builder/#tips): Choose from slash, angle bracket, or arrow separators between items; Customize separator character and spacing to match your navigation style; The last breadcrumb item is... - [CSS Breadcrumb Builder - fun facts](https://devtools.surf/tools/css-breadcrumb-builder/#fun-facts): Breadcrumb navigation is named after the fairy tale 'Hansel and Gretel' 1812 by the Brothers Grimm, where children dropped bread crumbs to find their way home; Jakob Nielsen's... - [CSS Arrow Generator](https://devtools.surf/tools/css-arrow-generator/): Pure-CSS arrow up/down/left/right using rotated borders - [CSS Arrow Generator - use cases](https://devtools.surf/tools/css-arrow-generator/#use-cases): Frontend developers creating directional indicators without icon libraries; UI designers building carousel navigation arrows in pure CSS; Tooltip builders adding pointer arrows to... - [CSS Arrow Generator - tips](https://devtools.surf/tools/css-arrow-generator/#tips): Arrows are created using rotated CSS borders - no images or SVGs needed; Choose from up, down, left, or right arrow directions; Adjust the border width and color to control arrow... - [CSS Arrow Generator - fun facts](https://devtools.surf/tools/css-arrow-generator/#fun-facts): The CSS border-rotation arrow technique uses a 45-degree rotated square with two visible borders - this trick was discovered by web developers around 2008 and remains widely used;... - [CSS Triangle Generator](https://devtools.surf/tools/css-triangle-generator/): Zero-element triangle using transparent borders - any direction - [CSS Triangle Generator - use cases](https://devtools.surf/tools/css-triangle-generator/#use-cases): Frontend developers creating dropdown arrow indicators without images; UI designers adding decorative triangular accents to section dividers; Tooltip builders generating CSS-only... - [CSS Triangle Generator - tips](https://devtools.surf/tools/css-triangle-generator/#tips): Triangles use the transparent border technique with zero width and height; Point the triangle in any direction by choosing which border carries the color; Use generated triangles... - [CSS Triangle Generator - fun facts](https://devtools.surf/tools/css-triangle-generator/#fun-facts): The CSS transparent-border triangle technique exploits how browsers render borders meeting at corners - each border forms a trapezoid, and setting width/height to zero creates... - [CSS Divider Builder](https://devtools.surf/tools/css-divider-builder/): Horizontal rule - solid/dashed/dotted or labeled OR, AND, etc - [CSS Divider Builder - use cases](https://devtools.surf/tools/css-divider-builder/#use-cases): Frontend developers creating styled section separators for content pages; Designers building labeled dividers for login forms with social OAuth options; UI engineers defining... - [CSS Divider Builder - tips](https://devtools.surf/tools/css-divider-builder/#tips): Choose solid, dashed, or dotted styles for different visual effects; Add a label like 'OR' or 'AND' centered on the divider line; Customize color and thickness to match your... - [CSS Divider Builder - fun facts](https://devtools.surf/tools/css-divider-builder/#fun-facts): The HTML
element horizontal rule has existed since HTML 2.0 1995 - it was originally rendered as a 3D beveled line in early Netscape and Internet Explorer browsers; Labeled... ## JavaScript - [JS Beautifier](https://devtools.surf/tools/js-beautifier/): Beautify and format JavaScript code - [JS Beautifier - use cases](https://devtools.surf/tools/js-beautifier/#use-cases): Frontend devs reformatting minified third-party library code for debugging; Code reviewers standardizing JavaScript formatting before reviewing PRs; Legacy codebase maintainers... - [JS Beautifier - tips](https://devtools.surf/tools/js-beautifier/#tips): Choose between Allman and K&R brace styles for your team standard; Set max line length to keep beautified code readable; Beautify minified vendor scripts to debug production issues - [JS Beautifier - fun facts](https://devtools.surf/tools/js-beautifier/#fun-facts): Brendan Eich created the first version of JavaScript in just 10 days in May 1995 at Netscape Communications; JSBeautifier.org, one of the first online JS formatting tools,... - [Javascript Pretty Print](https://devtools.surf/tools/js-pretty-print/): Pretty print JavaScript with syntax highlighting - [Javascript Pretty Print - use cases](https://devtools.surf/tools/js-pretty-print/#use-cases): Developers sharing syntax-highlighted JS snippets in presentations; Technical bloggers embedding pretty-printed JavaScript in articles; Mentors creating readable code walkthroughs... - [Javascript Pretty Print - tips](https://devtools.surf/tools/js-pretty-print/#tips): Use syntax highlighting to trace variable scope visually; Toggle line numbers for precise error reference in logs; Compare highlighted output against original to verify correctness - [Javascript Pretty Print - fun facts](https://devtools.surf/tools/js-pretty-print/#fun-facts): JavaScript is the most popular programming language on GitHub, used in over 20 million repositories as of 2024; The TC39 committee that governs JavaScript has released a new... ## Converters - [JSON to XML](https://devtools.surf/tools/json-to-xml/): Convert JSON data to XML format - [JSON to XML - use cases](https://devtools.surf/tools/json-to-xml/#use-cases): Backend devs converting JSON API responses for XML-based legacy systems; Integration engineers bridging JSON microservices with SOAP endpoints; Data engineers transforming JSON... - [JSON to XML - tips](https://devtools.surf/tools/json-to-xml/#tips): Specify a root element name to wrap the converted XML output; Check that JSON arrays map to repeated XML elements correctly; Verify that JSON null values are handled in the XML... - [JSON to XML - fun facts](https://devtools.surf/tools/json-to-xml/#fun-facts): JSON and XML have been competing data formats since the mid-2000s, with JSON overtaking XML in API usage by 2013; XML can represent data structures that JSON cannot, such as mixed... - [JSON to CSV](https://devtools.surf/tools/json-to-csv/): Convert JSON array to CSV format - [JSON to CSV - use cases](https://devtools.surf/tools/json-to-csv/#use-cases): Data analysts converting JSON API data for Excel analysis; Business users transforming JSON reports into spreadsheet format; Data scientists preparing JSON datasets for CSV-based... - [JSON to CSV - tips](https://devtools.surf/tools/json-to-csv/#tips): Flatten nested JSON objects before conversion for best results; Check that array values are properly delimited in CSV cells; Verify that commas within string values are properly... - [JSON to CSV - fun facts](https://devtools.surf/tools/json-to-csv/#fun-facts): CSV is one of the oldest data formats still in use, with its origins tracing back to IBM Fortran in 1972; Despite its simplicity, CSV has no universal standard; RFC 4180 2005 is... - [JSON to YAML](https://devtools.surf/tools/json-to-yaml/): Convert JSON to YAML format - [JSON to YAML - use cases](https://devtools.surf/tools/json-to-yaml/#use-cases): DevOps engineers converting JSON configs to YAML for Kubernetes manifests; Developers transforming JSON API schemas into YAML OpenAPI definitions; Platform engineers converting... - [JSON to YAML - tips](https://devtools.surf/tools/json-to-yaml/#tips): Review the YAML output for proper string quoting of special characters; Check that JSON nulls convert to YAML's null or ~ representation; Verify that deeply nested JSON translates... - [JSON to YAML - fun facts](https://devtools.surf/tools/json-to-yaml/#fun-facts): Converting JSON to YAML is technically lossless since YAML is a superset of JSON and supports all JSON data types; Kubernetes community tools like kustomize can accept both JSON... - [JSON to TSV](https://devtools.surf/tools/json-to-tsv/): Convert JSON array to Tab-Separated Values - [JSON to TSV - use cases](https://devtools.surf/tools/json-to-tsv/#use-cases): Data scientists converting JSON to TSV for bioinformatics tools; Analysts preparing JSON data for copy-pasting into spreadsheets; Researchers transforming JSON survey results into... - [JSON to TSV - tips](https://devtools.surf/tools/json-to-tsv/#tips): Verify that tab characters within values are properly escaped; Flatten nested objects before conversion for cleaner columns; Check column headers match the original JSON property... - [JSON to TSV - fun facts](https://devtools.surf/tools/json-to-tsv/#fun-facts): TSV is preferred over CSV in bioinformatics because biological data rarely contains tabs but often contains commas; The IANA registered the text/tab-separated-values MIME type in... - [JSON to String](https://devtools.surf/tools/json-to-string/): Convert JSON to escaped string format - [JSON to String - use cases](https://devtools.surf/tools/json-to-string/#use-cases): Backend devs embedding JSON payloads in database text columns; DevOps engineers storing JSON configs in environment variables; API developers nesting JSON strings inside outer... - [JSON to String - tips](https://devtools.surf/tools/json-to-string/#tips): Use this when embedding JSON inside other JSON string fields; Verify that unicode characters are properly escaped in the output; Check that the output can be parsed back to valid... - [JSON to String - fun facts](https://devtools.surf/tools/json-to-string/#fun-facts): JSON string escaping follows RFC 8259, which requires escaping only 6 characters: backslash, quote, and 4 control characters; Double-encoding JSON stringifying twice is a common... - [XML to JSON](https://devtools.surf/tools/xml-to-json/): Convert XML to JSON format - [XML to JSON - use cases](https://devtools.surf/tools/xml-to-json/#use-cases): Frontend devs converting XML API responses to JSON for JavaScript consumption; Mobile developers transforming XML feeds into JSON for app data layers; Backend devs migrating SOAP... - [XML to JSON - tips](https://devtools.surf/tools/xml-to-json/#tips): Check how XML attributes are represented in the JSON output; Verify that repeated XML elements become JSON arrays; Review the handling of XML mixed content and text nodes - [XML to JSON - fun facts](https://devtools.surf/tools/xml-to-json/#fun-facts): There is no single standard for XML-to-JSON conversion; at least 5 different conventions exist, including BadgerFish and Parker; XML attributes have no natural JSON equivalent, so... - [XML to CSV](https://devtools.surf/tools/xml-to-csv/): Convert XML data to CSV format - [XML to CSV - use cases](https://devtools.surf/tools/xml-to-csv/#use-cases): Data analysts converting XML reports into spreadsheet-friendly CSV format; Business intelligence teams transforming XML data feeds for Excel analysis; Data engineers flattening... - [XML to CSV - tips](https://devtools.surf/tools/xml-to-csv/#tips): Define which XML elements map to CSV columns before converting; Check that nested XML elements flatten correctly into CSV rows; Verify that XML namespaces don't create duplicate... - [XML to CSV - fun facts](https://devtools.surf/tools/xml-to-csv/#fun-facts): Converting XML to CSV requires flattening hierarchical data, which can result in data duplication for nested elements; XSLT 1.0 1999 was one of the earliest tools used to... - [XML to String](https://devtools.surf/tools/xml-to-string/): Convert XML to escaped string - [XML to String - use cases](https://devtools.surf/tools/xml-to-string/#use-cases): Backend devs embedding XML payloads in JSON API responses; Integration engineers storing SOAP messages in database text fields; DevOps engineers passing XML configs as string... - [XML to String - tips](https://devtools.surf/tools/xml-to-string/#tips): Verify that angle brackets are properly escaped in the output; Check that XML declarations and processing instructions are included; Ensure CDATA sections are handled correctly in... - [XML to String - fun facts](https://devtools.surf/tools/xml-to-string/#fun-facts): XML escaping requires converting 5 special characters: <, >, &, ", and ' to their entity references; CDATA sections in XML were designed specifically to avoid escaping, wrapping... - [XML to YAML](https://devtools.surf/tools/xml-to-yaml/): Convert XML to YAML format - [XML to YAML - use cases](https://devtools.surf/tools/xml-to-yaml/#use-cases): DevOps engineers converting XML configs to YAML for Kubernetes deployments; Developers transforming XML Spring configs to YAML application properties; Platform engineers migrating... - [XML to YAML - tips](https://devtools.surf/tools/xml-to-yaml/#tips): Check that XML attributes map to appropriate YAML keys; Verify that XML namespaces are preserved or stripped as desired; Review nested XML elements for correct YAML indentation... - [XML to YAML - fun facts](https://devtools.surf/tools/xml-to-yaml/#fun-facts): XML and YAML represent the same data model trees but with opposite verbosity: XML is explicit while YAML relies on whitespace; Converting XML to YAML is common in Kubernetes... - [RSS to JSON](https://devtools.surf/tools/rss-to-json/): Convert RSS/Atom feed to JSON format - [RSS to JSON - use cases](https://devtools.surf/tools/rss-to-json/#use-cases): Frontend devs building JSON-powered news feed widgets from RSS sources; Mobile developers consuming RSS feeds as JSON in native apps; Content aggregators transforming RSS feeds... - [RSS to JSON - tips](https://devtools.surf/tools/rss-to-json/#tips): Check that feed metadata like title and link are correctly mapped; Verify that all item entries appear in the JSON output array; Review date format handling across different RSS... - [RSS to JSON - fun facts](https://devtools.surf/tools/rss-to-json/#fun-facts): RSS 0.90 was created by Netscape in March 1999 for the My Netscape portal, originally standing for 'RDF Site Summary'; There are 7 different versions of RSS 0.90, 0.91, 0.92, 1.0,... - [YAML to JSON](https://devtools.surf/tools/yaml-to-json/): Convert YAML to JSON format - [YAML to JSON - use cases](https://devtools.surf/tools/yaml-to-json/#use-cases): DevOps engineers converting YAML configs to JSON for API submissions; Backend devs transforming YAML configs to JSON for JavaScript consumption; CI/CD engineers converting YAML... - [YAML to JSON - tips](https://devtools.surf/tools/yaml-to-json/#tips): Check that YAML anchors and aliases are resolved in the JSON output; Verify that YAML multi-line strings convert to single JSON strings; Review YAML tags for type information lost... - [YAML to JSON - fun facts](https://devtools.surf/tools/yaml-to-json/#fun-facts): YAML-to-JSON conversion is a lossy operation: YAML comments, anchors, and custom tags are discarded in JSON output; Many Kubernetes tools internally convert YAML to JSON before... - [YAML to XML](https://devtools.surf/tools/yaml-to-xml/): Convert YAML to XML format - [YAML to XML - use cases](https://devtools.surf/tools/yaml-to-xml/#use-cases): Java developers converting YAML configs to XML for legacy application servers; Integration engineers transforming YAML data for XML-based SOAP services; Enterprise devs converting... - [YAML to XML - tips](https://devtools.surf/tools/yaml-to-xml/#tips): Specify root element name for the generated XML document; Check that YAML lists convert to repeated XML elements correctly; Verify that YAML null values map to appropriate XML... - [YAML to XML - fun facts](https://devtools.surf/tools/yaml-to-xml/#fun-facts): YAML and XML are both used for configuration but in different ecosystems: YAML dominates DevOps while XML dominates enterprise Java; YAML's lack of a schema language means... - [YAML to CSV](https://devtools.surf/tools/yaml-to-csv/): Convert YAML array to CSV format - [YAML to CSV - use cases](https://devtools.surf/tools/yaml-to-csv/#use-cases): Data analysts converting YAML datasets into CSV for spreadsheet analysis; DevOps engineers exporting YAML inventory data to CSV for reporting; Product managers transforming YAML... - [YAML to CSV - tips](https://devtools.surf/tools/yaml-to-csv/#tips): Flatten nested YAML mappings before conversion for cleaner output; Verify that YAML sequences convert to individual CSV rows; Check that YAML's special values like ~ and null map... - [YAML to CSV - fun facts](https://devtools.surf/tools/yaml-to-csv/#fun-facts): YAML sequences arrays map naturally to CSV rows, but YAML mappings objects require key-to-column flattening; The 'Norway problem' in YAML can cause country code 'NO' to become... - [CSV to JSON](https://devtools.surf/tools/csv-to-json/): Convert CSV data to JSON format - [CSV to JSON - use cases](https://devtools.surf/tools/csv-to-json/#use-cases): Data scientists converting CSV datasets to JSON for web-based visualization; Backend devs importing CSV uploads as JSON for API processing; Frontend devs transforming CSV... - [CSV to JSON - tips](https://devtools.surf/tools/csv-to-json/#tips): Verify that the first CSV row is correctly used as JSON keys; Check that numeric strings are parsed as numbers, not strings; Review the handling of empty CSV cells in the JSON... - [CSV to JSON - fun facts](https://devtools.surf/tools/csv-to-json/#fun-facts): CSV-to-JSON conversion is one of the most common data transformations, with npm's csvtojson package getting over 2 million weekly downloads; Papa Parse, the most popular... - [CSV to XML](https://devtools.surf/tools/csv-to-xml/): Convert CSV data to XML format - [CSV to XML - use cases](https://devtools.surf/tools/csv-to-xml/#use-cases): Enterprise devs converting CSV exports for XML-based import systems; Integration engineers transforming CSV data feeds into XML for SOAP services; Data engineers converting CSV... - [CSV to XML - tips](https://devtools.surf/tools/csv-to-xml/#tips): Specify element names for rows and the root XML container; Check that CSV headers become valid XML element names; Verify that special characters in CSV are properly XML-escaped - [CSV to XML - fun facts](https://devtools.surf/tools/csv-to-xml/#fun-facts): CSV headers with spaces or special characters must be sanitized to create valid XML element names, which cannot start with numbers; XML's strict structure means CSV-to-XML... - [CSV to YAML](https://devtools.surf/tools/csv-to-yaml/): Convert CSV data to YAML format - [CSV to YAML - use cases](https://devtools.surf/tools/csv-to-yaml/#use-cases): DevOps engineers generating YAML configs from CSV-managed infrastructure data; Platform engineers converting CSV inventory lists to YAML for Ansible; Data teams transforming CSV... - [CSV to YAML - tips](https://devtools.surf/tools/csv-to-yaml/#tips): Verify that CSV numeric values maintain correct types in YAML; Check that special characters in CSV are properly handled in YAML; Review YAML output indentation for deeply nested... - [CSV to YAML - fun facts](https://devtools.surf/tools/csv-to-yaml/#fun-facts): Converting CSV to YAML can reduce file size compared to XML conversion since YAML uses indentation instead of closing tags; YAML's readable format makes CSV-to-YAML popular for... - [CSV to HTML](https://devtools.surf/tools/csv-to-html/): Convert CSV data to HTML table - [CSV to HTML - use cases](https://devtools.surf/tools/csv-to-html/#use-cases): Embedding spreadsheet data into blog posts or documentation; Creating HTML email tables from exported CSV reports; Converting analytics exports into web-ready dashboards; Building... - [CSV to HTML - tips](https://devtools.surf/tools/csv-to-html/#tips): Preview the generated table before copying to your site; Use the output with inline styles for email templates; Paste CSV directly from a spreadsheet for quick conversion - [CSV to HTML - fun facts](https://devtools.surf/tools/csv-to-html/#fun-facts): HTML tables were introduced in HTML 3.0 in 1995 and were originally the primary method for page layout before CSS; The CSV format dates back to the early 1970s and was first... - [String to JSON](https://devtools.surf/tools/string-to-json/): Parse stringified JSON back to formatted JSON - [String to JSON - use cases](https://devtools.surf/tools/string-to-json/#use-cases): Debugging double-encoded JSON from API gateway logs; Parsing stringified JSON payloads from message queues; Recovering readable data from escaped database exports; Inspecting... - [String to JSON - tips](https://devtools.surf/tools/string-to-json/#tips): Paste escaped JSON strings from log files directly; Use this to debug double-serialized API responses; Check the formatted output for unexpected nested strings - [String to JSON - fun facts](https://devtools.surf/tools/string-to-json/#fun-facts): JSON was specified by Douglas Crockford in 2001 and formalized as ECMA-404 in 2013; JSON does not support comments, which was an intentional design decision by Crockford to... - [String to XML](https://devtools.surf/tools/string-to-xml/): Parse stringified XML back to formatted XML - [String to XML - use cases](https://devtools.surf/tools/string-to-xml/#use-cases): Parsing escaped SOAP response bodies from application logs; Reading XML config strings stored in database columns; Debugging serialized XML in message broker payloads; Recovering... - [String to XML - tips](https://devtools.surf/tools/string-to-xml/#tips): Handles escaped angle brackets and encoded entities; Use this to recover XML from log file string dumps; Validate the parsed output structure after conversion - [String to XML - fun facts](https://devtools.surf/tools/string-to-xml/#fun-facts): XML 1.0 became a W3C Recommendation on February 10, 1998, making it over 25 years old; SGML, XML's parent language, was developed by Charles Goldfarb, Ed Mosher, and Ray Lorie at... - [BSON to JSON](https://devtools.surf/tools/bson-to-json/): Convert between BSON hex and JSON - [BSON to JSON - use cases](https://devtools.surf/tools/bson-to-json/#use-cases): Debug MongoDB wire protocol messages during driver development; Inspect raw BSON data from database exports; Convert BSON dumps to human-readable JSON for analysis; Validate BSON... - [BSON to JSON - tips](https://devtools.surf/tools/bson-to-json/#tips): Paste BSON hex strings to see the decoded JSON structure; Convert JSON to BSON hex for MongoDB wire protocol debugging; Inspect ObjectId timestamps embedded in BSON documents - [BSON to JSON - fun facts](https://devtools.surf/tools/bson-to-json/#fun-facts): BSON Binary JSON was created by MongoDB Inc. in 2009 and supports data types JSON lacks, including Date, Binary, and ObjectId; A MongoDB ObjectId is exactly 12 bytes: 4 bytes for... - [INI to JSON](https://devtools.surf/tools/ini-to-json/): Convert between INI config files and JSON - [INI to JSON - use cases](https://devtools.surf/tools/ini-to-json/#use-cases): DevOps engineers converting legacy Windows configs to JSON; Python developers bridging configparser and JSON-based systems; System administrators automating config format... - [INI to JSON - tips](https://devtools.surf/tools/ini-to-json/#tips): Preserve section headers as nested JSON keys for structure; Watch for duplicate keys - INI allows them but JSON does not; Use this to migrate legacy app configs to modern JSON... - [INI to JSON - fun facts](https://devtools.surf/tools/ini-to-json/#fun-facts): The INI file format dates back to the early 1980s and was popularized by Microsoft Windows 1.0 in 1985, predating both XML and JSON by decades; Python's configparser module, which... - [HCL Terraform to JSON](https://devtools.surf/tools/hcl-to-json/): Convert between HCL/Terraform config and JSON - [HCL Terraform to JSON - use cases](https://devtools.surf/tools/hcl-to-json/#use-cases): DevOps engineers generating Terraform configs programmatically; Platform teams validating infrastructure-as-code changes in CI; Cloud architects comparing Terraform modules across... - [HCL Terraform to JSON - tips](https://devtools.surf/tools/hcl-to-json/#tips): Validate Terraform blocks as JSON for programmatic editing; Use JSON output to compare Terraform configs across envs; Convert JSON back to HCL for human-readable pull requests - [HCL Terraform to JSON - fun facts](https://devtools.surf/tools/hcl-to-json/#fun-facts): HCL HashiCorp Configuration Language was created by Mitchell Hashimoto in 2014 specifically for HashiCorp tools - it combines the readability of YAML with the precision of JSON;... - [EDN to JSON](https://devtools.surf/tools/edn-to-json/): Convert between Clojure EDN and JSON formats - [EDN to JSON - use cases](https://devtools.surf/tools/edn-to-json/#use-cases): Clojure developers sharing data with JavaScript/Python services; Data engineers converting Datomic query results to JSON; Teams migrating from Clojure backends to polyglot... - [EDN to JSON - tips](https://devtools.surf/tools/edn-to-json/#tips): Map EDN keywords to JSON string keys automatically; Handle EDN sets by converting them to JSON arrays; Preserve EDN tagged literals as annotated JSON objects - [EDN to JSON - fun facts](https://devtools.surf/tools/edn-to-json/#fun-facts): EDN Extensible Data Notation was created by Rich Hickey as part of the Clojure ecosystem - it's essentially 'Clojure data literals as a format' and was formalized around 2012;... - [JSON to Go Struct](https://devtools.surf/tools/json-to-go-struct/): Convert JSON to Go struct definitions with json tags - [JSON to Go Struct - use cases](https://devtools.surf/tools/json-to-go-struct/#use-cases): Quickly scaffolding Go structs from a third-party API response; Converting JSON payloads to typed structs during backend development; Generating data models from sample API... - [JSON to Go Struct - tips](https://devtools.surf/tools/json-to-go-struct/#tips): Paste nested JSON to generate embedded struct definitions; Check that json tags use snake_case matching your API response; Review pointer types for optional fields that may be null - [JSON to Go Struct - fun facts](https://devtools.surf/tools/json-to-go-struct/#fun-facts): Go was publicly announced by Google on November 10, 2009, designed by Robert Griesemer, Rob Pike, and Ken Thompson; Go's struct tags - the backtick annotations like `json:"name"`... - [YAML to .env](https://devtools.surf/tools/yaml-to-env/): Flatten a YAML file to KEY=value lines - [YAML to .env - use cases](https://devtools.surf/tools/yaml-to-env/#use-cases): Converting Docker Compose config to environment variables for local dev; Flattening Kubernetes ConfigMap YAML into .env format; Migrating Spring Boot YAML config to environment... - [YAML to .env - tips](https://devtools.surf/tools/yaml-to-env/#tips): Nested YAML keys are flattened with underscore separators; Review the output for any sensitive values before committing; Use the result directly in your .env file or CI/CD secrets - [YAML to .env - fun facts](https://devtools.surf/tools/yaml-to-env/#fun-facts): YAML was first proposed in 2001 by Clark Evans, and its name originally stood for 'Yet Another Markup Language' before being changed to 'YAML Ain't Markup Language.'; The .env... - [.env to YAML](https://devtools.surf/tools/env-to-yaml/): Group dotted KEY_NAME pairs back into a YAML tree - [.env to YAML - use cases](https://devtools.surf/tools/env-to-yaml/#use-cases): Restructuring flat environment variables into a YAML config file; Creating Docker Compose configs from existing .env files; Generating Kubernetes ConfigMap YAML from deployment... - [.env to YAML - tips](https://devtools.surf/tools/env-to-yaml/#tips): Dotted key names like DB_HOST are grouped into nested YAML; Check the YAML output for correct indentation and nesting; Use this to reverse-engineer flat configs into structured... - [.env to YAML - fun facts](https://devtools.surf/tools/env-to-yaml/#fun-facts): YAML supports 63 scalar types out of the box in the 1.1 specification, including timestamps, binary, and null - far more than most developers realize; The most common YAML gotcha... - [JSON to Zod Schema](https://devtools.surf/tools/json-to-zod/): Derive a runtime-validatable Zod schema from a JSON sample - [JSON to Zod Schema - use cases](https://devtools.surf/tools/json-to-zod/#use-cases): Generating Zod schemas from API response samples for type-safe validation; Creating form validation schemas from existing JSON data structures; Building runtime type guards for... - [JSON to Zod Schema - tips](https://devtools.surf/tools/json-to-zod/#tips): Paste a JSON sample to generate a complete Zod schema; Review inferred types - numbers vs strings may need adjustment; Use the output directly in your TypeScript validation layer - [JSON to Zod Schema - fun facts](https://devtools.surf/tools/json-to-zod/#fun-facts): Zod was created by Colin McDonnell in 2020 and quickly became the most popular TypeScript-first schema validation library, surpassing 20 million weekly npm downloads by 2024;... - [JSON to .env](https://devtools.surf/tools/json-to-env/): Flatten a JSON object into UPPER_SNAKE KEY=value lines - [JSON to .env - use cases](https://devtools.surf/tools/json-to-env/#use-cases): DevOps engineers converting JSON config exports into .env file format; Developers bootstrapping local environment files from JSON API config responses; Platform teams transforming... - [JSON to .env - tips](https://devtools.surf/tools/json-to-env/#tips): Paste a JSON object to get UPPER_SNAKE_CASE key=value .env output; Nested objects are flattened with underscore-separated key paths; Copy the output directly into a .env file for... - [JSON to .env - fun facts](https://devtools.surf/tools/json-to-env/#fun-facts): The .env file convention was popularized by the Twelve-Factor App methodology 2011, which recommended storing config in environment variables, not code; The dotenv library for... - [.env to JSON](https://devtools.surf/tools/env-to-json/): Parse KEY=value lines with quotes + comments into a JSON object - [.env to JSON - use cases](https://devtools.surf/tools/env-to-json/#use-cases): Developers converting .env configs into JSON for application settings files; DevOps teams transforming environment files into JSON for API-based config services; Full-stack devs... - [.env to JSON - tips](https://devtools.surf/tools/env-to-json/#tips): Paste .env content with comments and quotes to get clean JSON output; Comments and blank lines are automatically stripped from the output; Quoted values preserve inner spaces and... - [.env to JSON - fun facts](https://devtools.surf/tools/env-to-json/#fun-facts): The .env file format has no official specification - each library dotenv, python-dotenv, direnv handles edge cases like multiline values and escaping differently; Docker Compose... - [JSON to TypeScript Types](https://devtools.surf/tools/json-to-typescript-types/): Infer TypeScript interfaces from JSON with deep nesting + optionals - [JSON to TypeScript Types - tips](https://devtools.surf/tools/json-to-typescript-types/#tips): The output is a single root interface; nested objects become inline types; Union types are inferred from arrays of mixed elements; null fields are marked optional with the ? - [JSON to TypeScript Types - fun facts](https://devtools.surf/tools/json-to-typescript-types/#fun-facts): TypeScript 4.1 added template-literal types, which let you derive string types from other string types at compile time; TypeScript's type system is Turing complete - you can... - [JSON to Python Dict](https://devtools.surf/tools/json-to-python-dict/): Convert JSON to a valid Python dict literal True/False/None - [JSON to Python Dict - use cases](https://devtools.surf/tools/json-to-python-dict/#use-cases): Python developers converting API JSON responses into Python dict literals; Django developers generating settings dictionaries from JSON configuration; Data scientists converting... - [JSON to Python Dict - tips](https://devtools.surf/tools/json-to-python-dict/#tips): Paste JSON to convert true/false/null to Python's True/False/None literals; String quoting is preserved and compatible with Python 3 syntax; Use the output directly in Python... - [JSON to Python Dict - fun facts](https://devtools.surf/tools/json-to-python-dict/#fun-facts): Python's True and False became keywords in Python 3 2008. In Python 2, True and False were built-in constants that could be reassigned - True = 0 was valid code; Python's None is... - [JSON to PHP Array](https://devtools.surf/tools/json-to-php-array/): Convert JSON to a PHP 5.4+ short-syntax associative array - [JSON to PHP Array - use cases](https://devtools.surf/tools/json-to-php-array/#use-cases): PHP developers converting JSON API docs into PHP array config files; Laravel developers generating array fixtures from JSON test data; WordPress plugin developers converting JSON... - [JSON to PHP Array - tips](https://devtools.surf/tools/json-to-php-array/#tips): Paste JSON to get PHP 5.4+ short array syntax with => key-value pairs; Nested objects become nested associative arrays automatically; Copy the output directly into PHP... - [JSON to PHP Array - fun facts](https://devtools.surf/tools/json-to-php-array/#fun-facts): PHP's short array syntax was added in PHP 5.4 2012, replacing the verbose array constructor. - [JSON to Ruby Hash](https://devtools.surf/tools/json-to-ruby-hash/): Convert JSON to a Ruby hash with symbol or string keys - [JSON to Ruby Hash - use cases](https://devtools.surf/tools/json-to-ruby-hash/#use-cases): Ruby developers converting JSON API responses into Ruby hash fixtures; Rails developers generating seed data from JSON exports; Backend devs pasting Ruby-compatible hash literals... - [JSON to Ruby Hash - tips](https://devtools.surf/tools/json-to-ruby-hash/#tips): Paste JSON to get a Ruby hash with symbol or string key formatting; Toggle between symbol keys :name and string keys 'name' for your preference; null is converted to Ruby's nil... - [JSON to Ruby Hash - fun facts](https://devtools.surf/tools/json-to-ruby-hash/#fun-facts): Ruby symbols :name are immutable, interned strings stored once in memory - using symbols as hash keys is faster than strings because comparison is by object ID; Ruby's hash rocket... - [JSON to Java Class](https://devtools.surf/tools/json-to-java-class/): Generate a POJO Java class with getters/setters from a JSON sample - [JSON to Java Class - use cases](https://devtools.surf/tools/json-to-java-class/#use-cases): Java developers generating model classes from JSON API response samples; Backend teams bootstrapping DTOs for Spring Boot REST controllers; Android developers creating POJO... - [JSON to Java Class - tips](https://devtools.surf/tools/json-to-java-class/#tips): Paste a JSON sample to auto-generate a Java POJO with getters and setters; Nested objects become separate inner classes automatically; Use the output as a starting point for... - [JSON to Java Class - fun facts](https://devtools.surf/tools/json-to-java-class/#fun-facts): The POJO Plain Old Java Object term was coined by Martin Fowler, Rebecca Parsons, and Josh MacKenzie in 2000 to give a name to regular Java objects vs EJBs; Java's getter/setter... - [JSON to Swift Struct](https://devtools.surf/tools/json-to-swift-struct/): Generate a Codable Swift struct from a JSON sample - [JSON to Swift Struct - use cases](https://devtools.surf/tools/json-to-swift-struct/#use-cases): iOS developers modeling REST API responses as structs; Swift backend engineers parsing JSON payloads in Vapor; Mobile teams migrating from manual JSON parsing to Codable;... - [JSON to Swift Struct - tips](https://devtools.surf/tools/json-to-swift-struct/#tips): Paste nested JSON to generate nested Codable structs automatically; Use optional fields for keys that may be null in your API responses; Check the generated CodingKeys enum for... - [JSON to Swift Struct - fun facts](https://devtools.surf/tools/json-to-swift-struct/#fun-facts): Swift's Codable protocol was introduced in Swift 4 2017, replacing the verbose NSJSONSerialization API that required manual key-path extraction; The name 'Swift' was chosen by... - [JSON to Kotlin Class](https://devtools.surf/tools/json-to-kotlin-class/): Generate a Kotlin data class from a JSON sample - [JSON to Kotlin Class - use cases](https://devtools.surf/tools/json-to-kotlin-class/#use-cases): Android developers deserializing API responses with Gson or Moshi; Backend engineers building Ktor or Spring Boot services; Data engineers creating type-safe models for JSON event... - [JSON to Kotlin Class - tips](https://devtools.surf/tools/json-to-kotlin-class/#tips): Nested JSON objects produce nested data classes with proper typing; Mark nullable fields with Kotlin's ? - [JSON to Kotlin Class - fun facts](https://devtools.surf/tools/json-to-kotlin-class/#fun-facts): Kotlin data classes automatically generate equals, hashCode, toString, and copy methods - saving roughly 80 lines of Java boilerplate per class; Kotlin was named after Kotlin... - [JSON to Rust Struct](https://devtools.surf/tools/json-to-rust-struct/): Generate a serde-compatible Rust struct from a JSON sample - [JSON to Rust Struct - use cases](https://devtools.surf/tools/json-to-rust-struct/#use-cases): Systems programmers parsing config files in CLI tools; WebAssembly developers serializing data between Rust and JavaScript; Backend engineers building high-performance API servers... - [JSON to Rust Struct - tips](https://devtools.surf/tools/json-to-rust-struct/#tips): The generated struct includes serde Serialize and Derive macros ready to use; Nested JSON objects become separate named structs with proper references; Add #serderename_all =... - [JSON to Rust Struct - fun facts](https://devtools.surf/tools/json-to-rust-struct/#fun-facts): Serde short for Serialize/Deserialize can process JSON at over 1 GB/s, making it one of the fastest JSON parsers in any language; Rust has been voted the 'most loved programming... - [JSON to C# Class](https://devtools.surf/tools/json-to-csharp-class/): Generate a C# class with properties + nullables from JSON - [JSON to C# Class - use cases](https://devtools.surf/tools/json-to-csharp-class/#use-cases): ASP.NET developers modeling request and response DTOs; Unity game developers parsing JSON save files or server configs; Enterprise teams generating classes for complex... - [JSON to C# Class - tips](https://devtools.surf/tools/json-to-csharp-class/#tips): Nullable reference types are generated for JSON fields that could be null; Paste complex nested JSON to get a full class hierarchy in one step; Use the output directly with... - [JSON to C# Class - fun facts](https://devtools.surf/tools/json-to-csharp-class/#fun-facts): C# was originally codenamed 'Cool' C-like Object Oriented Language before Microsoft's marketing team chose the musical name C# in 2000; System.Text.Json, introduced in .NET Core... - [JSON to Dart Class](https://devtools.surf/tools/json-to-dart-class/): Generate a Dart class with fromJson/toJson from a JSON sample - [JSON to Dart Class - use cases](https://devtools.surf/tools/json-to-dart-class/#use-cases): Flutter developers integrating REST APIs with type-safe models; Mobile teams sharing data classes between iOS and Android via Flutter; Dart backend developers building shelf or... - [JSON to Dart Class - tips](https://devtools.surf/tools/json-to-dart-class/#tips): Generated classes include fromJson factory and toJson method for Flutter use; Nested JSON produces separate Dart classes with proper type references; Use the output with Flutter's... - [JSON to Dart Class - fun facts](https://devtools.surf/tools/json-to-dart-class/#fun-facts): Dart was originally launched by Google in 2011 as a replacement for JavaScript, but found its true success as the language behind Flutter starting in 2017; Flutter's hot reload... - [JSON Schema to TypeScript](https://devtools.surf/tools/json-schema-to-typescript/): Convert a JSON Schema draft-07 document into TypeScript types - [JSON Schema to TypeScript - tips](https://devtools.surf/tools/json-schema-to-typescript/#tips): Supports draft-07 'type', 'properties', 'required', 'enum', and nested object schemas; String enums become union types of string literals; Use the title field to control the... - [JSON Schema to TypeScript - fun facts](https://devtools.surf/tools/json-schema-to-typescript/#fun-facts): JSON Schema draft-2020-12 is the current version but draft-07 is still the most widely deployed across tooling; JSON Schema was originally proposed in 2007 by Kris Zyp at Dojo... - [JSON to MongoDB Query](https://devtools.surf/tools/json-to-mongodb-query/): Convert flat key-value JSON into a MongoDB find query object - [JSON to MongoDB Query - use cases](https://devtools.surf/tools/json-to-mongodb-query/#use-cases): Backend developers quickly building MongoDB filters from sample documents; Database admins converting JSON exports into diagnostic queries; Full-stack engineers debugging document... - [JSON to MongoDB Query - tips](https://devtools.surf/tools/json-to-mongodb-query/#tips): Paste flat key-value JSON to instantly get a valid find filter object; Use the generated query directly in MongoDB Compass or the mongo shell; Combine multiple key-value pairs to... - [JSON to MongoDB Query - fun facts](https://devtools.surf/tools/json-to-mongodb-query/#fun-facts): MongoDB's name comes from 'humongous' - the database was designed from day one to handle massive, document-oriented datasets at scale; MongoDB's query language supports over 30... - [JSON to Query String](https://devtools.surf/tools/json-to-query-string/): Serialize a flat JSON object into a URL query string - [JSON to Query String - use cases](https://devtools.surf/tools/json-to-query-string/#use-cases): API developers converting JSON payloads to GET request params; Frontend devs serializing filter state into shareable URLs; Test automation engineers building parameterized test... - [JSON to Query String - tips](https://devtools.surf/tools/json-to-query-string/#tips): Paste a flat JSON object to instantly get a query string; Nested objects are not supported - flatten them first; Output is URL-encoded and ready for direct use in requests - [JSON to Query String - fun facts](https://devtools.surf/tools/json-to-query-string/#fun-facts): JSON was formalized by Douglas Crockford in 2001 and standardized as ECMA-404 in 2013, despite being based on a subset of JavaScript syntax from 1999; The... ## Images - [Sample Images](https://devtools.surf/tools/sample-images/): Download standard-size placeholder images or generate a custom size - [Sample Images - use cases](https://devtools.surf/tools/sample-images/#use-cases): Filling image slots in wireframes during early design phases; Testing responsive image behavior across breakpoints; Generating placeholder assets for frontend component libraries;... - [Sample Images - tips](https://devtools.surf/tools/sample-images/#tips): Choose from standard sizes like 1920x1080 or 800x600; Generate custom dimensions for specific design mockups; Download directly to use as placeholder assets in prototypes - [Sample Images - fun facts](https://devtools.surf/tools/sample-images/#fun-facts): The most common placeholder image service, placeholder.com, served over 8 billion images before shutting down in 2023; The 1920x1080 resolution Full HD was standardized by the... - [Image Converter](https://devtools.surf/tools/image-converter/): Convert images between PNG, JPEG, WebP and more - [Image Converter - use cases](https://devtools.surf/tools/image-converter/#use-cases): Converting marketing assets to WebP for faster page loads; Transforming screenshots from PNG to JPEG for documentation; Preparing images in multiple formats for HTML picture... - [Image Converter - tips](https://devtools.surf/tools/image-converter/#tips): Convert PNG to WebP for significantly smaller file sizes; Use JPEG for photographs and PNG for graphics with transparency; Check the output quality setting before converting lossy... - [Image Converter - fun facts](https://devtools.surf/tools/image-converter/#fun-facts): WebP was developed by Google and released in 2010, offering 25-34% smaller file sizes than JPEG at equivalent quality; The PNG format was created in 1996 as a patent-free... - [Bulk Image Converter](https://devtools.surf/tools/bulk-image-converter/): Convert multiple images at once to a chosen format - [Bulk Image Converter - use cases](https://devtools.surf/tools/bulk-image-converter/#use-cases): Optimizing an entire product image catalog for e-commerce; Converting design deliverables from PSD exports to web formats; Migrating a legacy site's image library to modern... - [Bulk Image Converter - tips](https://devtools.surf/tools/bulk-image-converter/#tips): Select all images at once to convert an entire folder in one step; Choose a single target format for consistent output across files; Use this for batch WebP conversion to optimize... - [Bulk Image Converter - fun facts](https://devtools.surf/tools/bulk-image-converter/#fun-facts): Google's PageSpeed Insights can penalize sites that serve images in legacy formats instead of WebP or AVIF; The average web page in 2024 contained over 1 MB of images, making bulk... - [Image Editor](https://devtools.surf/tools/image-editor/): Crop, annotate, draw, and add text to images - [Image Editor - use cases](https://devtools.surf/tools/image-editor/#use-cases): Annotating screenshots for QA bug reports with arrows and labels; Cropping sensitive data from screenshots before sharing; Adding text overlays to marketing images without... - [Image Editor - tips](https://devtools.surf/tools/image-editor/#tips): Use crop to remove sensitive information from screenshots; Add annotations with arrows and text for bug report clarity; Draw directly on images to highlight UI issues for teammates - [Image Editor - fun facts](https://devtools.surf/tools/image-editor/#fun-facts): Adobe Photoshop 1.0 was released on February 19, 1990, exclusively for Macintosh, and cost $895; The concept of image layers was introduced by Photoshop 3.0 in 1994 and... - [Aspect Ratio Calculator](https://devtools.surf/tools/aspect-ratio-calculator/): Calculate aspect ratios and resize dimensions proportionally - [Aspect Ratio Calculator - use cases](https://devtools.surf/tools/aspect-ratio-calculator/#use-cases): Calculating responsive image dimensions for CSS layouts; Sizing video thumbnails to platform-specific aspect ratios; Determining print dimensions while preserving digital... - [Aspect Ratio Calculator - tips](https://devtools.surf/tools/aspect-ratio-calculator/#tips): Lock one dimension to auto-calculate the other proportionally; Use common presets like 16:9 or 4:3 for standard screens; Calculate exact pixel dimensions for social media image... - [Aspect Ratio Calculator - fun facts](https://devtools.surf/tools/aspect-ratio-calculator/#fun-facts): The 16:9 aspect ratio was proposed by Dr. Kerns Powers in 1984 as a mathematical compromise between 4:3 and 2.35:1; The golden ratio 1.618:1 has been used in art and architecture... - [SVG Optimizer](https://devtools.surf/tools/svg-optimizer/): Minify and clean SVG markup by removing metadata and comments - [SVG Optimizer - use cases](https://devtools.surf/tools/svg-optimizer/#use-cases): Reducing icon SVG file sizes for faster page rendering; Cleaning Illustrator exports before adding to a design system; Optimizing inline SVGs to reduce HTML document size;... - [SVG Optimizer - tips](https://devtools.surf/tools/svg-optimizer/#tips): Remove editor metadata that bloats file size significantly; Check the visual output after optimization to verify fidelity; Strip unnecessary comments and empty groups from SVG... - [SVG Optimizer - fun facts](https://devtools.surf/tools/svg-optimizer/#fun-facts): SVG 1.0 became a W3C Recommendation in September 2001, but didn't gain broad browser support until the early 2010s; Unoptimized SVGs from tools like Illustrator can contain 40-60%... - [Favicon Generator](https://devtools.surf/tools/favicon-generator/): Generate a favicon pack from a single image or emoji - [Favicon Generator - use cases](https://devtools.surf/tools/favicon-generator/#use-cases): Generate all favicon sizes for a new web project; Create app icons from a logo for PWA manifest files; Quickly prototype a site identity using emoji favicons; Produce... - [Favicon Generator - tips](https://devtools.surf/tools/favicon-generator/#tips): Upload a single image to generate all required favicon sizes; Use an emoji as a quick favicon for prototypes; Download the full favicon pack including apple-touch-icon - [Favicon Generator - fun facts](https://devtools.surf/tools/favicon-generator/#fun-facts): The favicon was introduced by Internet Explorer 5 in March 1999, originally requiring a file named favicon.ico in the site's root directory; Modern browsers support favicons up to... - [Lorem Picsum Picker](https://devtools.surf/tools/picsum-picker/): Browse and download curated placeholder images - [Lorem Picsum Picker - use cases](https://devtools.surf/tools/picsum-picker/#use-cases): Add realistic placeholder images to UI mockups; Populate demo content in prototype applications; Generate random images for front-end layout testing; Fill CMS templates with... - [Lorem Picsum Picker - tips](https://devtools.surf/tools/picsum-picker/#tips): Browse curated placeholder images by category or style; Copy the image URL directly for use in mockups; Set custom dimensions to match your layout requirements - [Lorem Picsum Picker - fun facts](https://devtools.surf/tools/picsum-picker/#fun-facts): Lorem Picsum serves over 2 billion placeholder images per month, using photos sourced from the Unsplash library under their open license; The name 'Lorem Picsum' combines 'Lorem... - [Avatar / Initials Generator](https://devtools.surf/tools/avatar-generator/): Create initials-based SVG avatars from a name - [Avatar / Initials Generator - use cases](https://devtools.surf/tools/avatar-generator/#use-cases): Generate default avatars for user profiles in web apps; Create consistent placeholder avatars for design mockups; Build branded team member displays for company pages; Produce... - [Avatar / Initials Generator - tips](https://devtools.surf/tools/avatar-generator/#tips): Enter a name to auto-generate initials-based SVG avatars; Customize background colors to match your brand palette; Download as SVG for infinite scalability in any UI - [Avatar / Initials Generator - fun facts](https://devtools.surf/tools/avatar-generator/#fun-facts): Gravatar Globally Recognized Avatar launched in 2004 by Tom Werner and was acquired by Automattic WordPress in 2007, serving billions of avatar requests; SVG avatars render at any... - [Image Metadata Viewer](https://devtools.surf/tools/image-metadata-viewer/): Show EXIF / IPTC / XMP metadata from JPEG, PNG, HEIF - [Image Metadata Viewer - use cases](https://devtools.surf/tools/image-metadata-viewer/#use-cases): Verify photo authenticity by checking EXIF timestamps; Strip location data from images before publishing online; Audit copyright metadata in stock photography libraries; Extract... - [Image Metadata Viewer - tips](https://devtools.surf/tools/image-metadata-viewer/#tips): Upload a JPEG to view EXIF data including GPS coordinates; Check camera settings like ISO, aperture, and shutter speed; Detect embedded copyright and creator IPTC metadata - [Image Metadata Viewer - fun facts](https://devtools.surf/tools/image-metadata-viewer/#fun-facts): EXIF Exchangeable Image File Format was created by JEIDA in 1995 and stores up to 65,535 bytes of metadata per tag entry; Smartphone photos often contain GPS coordinates accurate... - [Base64 to Image](https://devtools.surf/tools/base64-image/): Encode an image to a data URL, or decode a data URL back to an image - [Base64 to Image - use cases](https://devtools.surf/tools/base64-image/#use-cases): Embed small icons directly in CSS to reduce HTTP requests; Include images inline in HTML email templates; Convert screenshots to data URLs for bug report embeds; Decode Base64... - [Base64 to Image - tips](https://devtools.surf/tools/base64-image/#tips): Drag and drop an image to encode it as a data URL; Paste a Base64 data URL to preview the decoded image; Copy the data URL for embedding directly in HTML or CSS - [Base64 to Image - fun facts](https://devtools.surf/tools/base64-image/#fun-facts): Base64 encoding increases file size by approximately 33% because it represents 3 bytes of binary data as 4 ASCII characters; Data URLs RFC 2397, published in 1998 were initially... - [Image Palette Extractor](https://devtools.surf/tools/image-palette-extractor/): Extract the dominant colors from an image - [Image Palette Extractor - use cases](https://devtools.surf/tools/image-palette-extractor/#use-cases): Extract brand colors from a client's existing logo or photos; Generate color schemes for website themes from hero images; Build dynamic UI themes that adapt to user-uploaded... - [Image Palette Extractor - tips](https://devtools.surf/tools/image-palette-extractor/#tips): Upload an image to extract the top dominant colors; Copy extracted colors as HEX, RGB, or HSL values; Use the palette to build a cohesive design color scheme - [Image Palette Extractor - fun facts](https://devtools.surf/tools/image-palette-extractor/#fun-facts): The median cut algorithm, commonly used for palette extraction, was published by Paul Heckbert in 1982 in the SIGGRAPH proceedings; Spotify uses album art palette extraction to... - [Image Resizer Batch](https://devtools.surf/tools/image-resizer-batch/): Resize and crop multiple images in the browser - [Image Resizer Batch - use cases](https://devtools.surf/tools/image-resizer-batch/#use-cases): Batch resize product photos for an e-commerce catalog; Prepare multiple image sizes for responsive web design; Crop screenshots to uniform dimensions for documentation; Generate... - [Image Resizer Batch - tips](https://devtools.surf/tools/image-resizer-batch/#tips): Drag multiple images for batch processing at once; Set exact dimensions or resize by percentage; Crop images to specific aspect ratios for social media - [Image Resizer Batch - fun facts](https://devtools.surf/tools/image-resizer-batch/#fun-facts): The bicubic interpolation algorithm used in image resizing was described by R.G. - [WebP to AVIF Converter](https://devtools.surf/tools/webp-avif-converter/): Convert images between WebP, AVIF, PNG, and JPEG in-browser - [WebP to AVIF Converter - use cases](https://devtools.surf/tools/webp-avif-converter/#use-cases): Optimize website images for faster page load times; Convert legacy JPEG assets to modern WebP format; Prepare AVIF images with JPEG fallbacks for progressive enhancement; Reduce... - [WebP to AVIF Converter - tips](https://devtools.surf/tools/webp-avif-converter/#tips): Convert PNG or JPEG to WebP for 25-35% smaller file sizes; Try AVIF for even better compression on photographic images; Compare visual quality between formats before choosing - [WebP to AVIF Converter - fun facts](https://devtools.surf/tools/webp-avif-converter/#fun-facts): WebP was developed by Google and released in 2010, based on the VP8 video codec's intra-frame compression technology; AVIF, based on the AV1 video codec, was finalized in 2019 and... - [Video Thumbnail Extractor](https://devtools.surf/tools/video-thumbnail/): Scrub a video and export a frame as a PNG or JPEG - [Video Thumbnail Extractor - use cases](https://devtools.surf/tools/video-thumbnail/#use-cases): Extract poster frames for video gallery displays; Create custom thumbnails for course or tutorial platforms; Generate preview images for video content management systems; Capture... - [Video Thumbnail Extractor - tips](https://devtools.surf/tools/video-thumbnail/#tips): Scrub through the video timeline to pick the perfect frame; Export the selected frame as PNG for lossless quality; Choose JPEG export for smaller thumbnail file sizes - [Video Thumbnail Extractor - fun facts](https://devtools.surf/tools/video-thumbnail/#fun-facts): YouTube generates 3 automatic thumbnail options for every uploaded video using an AI model that detects high-contrast, well-composed frames; Netflix reported that thumbnail images... - [Image Compressor](https://devtools.surf/tools/image-compressor/): Client-side JPEG compression with quality + scale sliders - no upload - [Image Compressor - use cases](https://devtools.surf/tools/image-compressor/#use-cases): Web developers optimizing images for faster page load times; Bloggers compressing photos before uploading to CMS platforms; Email marketers reducing image file sizes to avoid spam... - [Image Compressor - tips](https://devtools.surf/tools/image-compressor/#tips): All compression happens client-side - your images never leave the browser; Adjust the quality slider to find the optimal size-to-quality tradeoff; Use the scale slider to reduce... - [Image Compressor - fun facts](https://devtools.surf/tools/image-compressor/#fun-facts): JPEG compression was standardized in 1992 by the Joint Photographic Experts Group - at quality 75%, a typical photo is reduced to 10% of its original uncompressed size; JPEG uses... - [Image Grayscale](https://devtools.surf/tools/image-grayscale/): Desaturate any image - 0-100% grayscale, preview + download - [Image Grayscale - use cases](https://devtools.surf/tools/image-grayscale/#use-cases): Web designers creating monochrome hero images for minimalist layouts; Photographers previewing black-and-white versions of color photos; Print designers converting images for... - [Image Grayscale - tips](https://devtools.surf/tools/image-grayscale/#tips): Adjust the desaturation slider from 0 to 100% for partial grayscale effects; Preview the grayscale result before downloading the processed image; Use partial desaturation 50-70%... - [Image Grayscale - fun facts](https://devtools.surf/tools/image-grayscale/#fun-facts): True grayscale conversion weights RGB channels differently: 29.9% red, 58.7% green, 11.4% blue - matching the human eye's sensitivity curve defined by the ITU-R BT.601 standard;... - [Image Rotator](https://devtools.surf/tools/image-rotator/): Rotate an image by any angle - canvas re-fits to new bounds - [Image Rotator - use cases](https://devtools.surf/tools/image-rotator/#use-cases): Photographers fixing photo orientation from camera EXIF data mismatches; Web developers rotating user-uploaded images to correct orientation; Designers adjusting image angles for... - [Image Rotator - tips](https://devtools.surf/tools/image-rotator/#tips): Rotate by any arbitrary angle - not just 90-degree increments; The canvas automatically resizes to fit the rotated image bounds; Use 90 or 180 degree rotations to fix incorrectly... - [Image Rotator - fun facts](https://devtools.surf/tools/image-rotator/#fun-facts): Image rotation uses affine transformation matrices - a 2D rotation by angle applies the matrix cos , -sin ; sin , cos to every pixel coordinate; JPEG files store rotation metadata... - [Image Cropper](https://devtools.surf/tools/image-cropper/): Crop an image from left/top/right/bottom with % sliders - [Image Cropper - use cases](https://devtools.surf/tools/image-cropper/#use-cases): Social media managers cropping images to platform-specific aspect ratios; Web developers preparing hero images by removing unwanted edges; Photographers framing compositions... - [Image Cropper - tips](https://devtools.surf/tools/image-cropper/#tips): Use percentage-based sliders to crop from each side independently; Preview the crop region before downloading the final result; Crop from all four sides to precisely frame the... - [Image Cropper - fun facts](https://devtools.surf/tools/image-cropper/#fun-facts): The word 'crop' in image editing comes from printing terminology - typesetters would physically cut crop photo prints to fit column widths before pasting them onto layout boards;... - [Image Color Inverter](https://devtools.surf/tools/image-invert/): Invert every pixel's RGB - negative / X-ray effect - [Image Color Inverter - use cases](https://devtools.surf/tools/image-invert/#use-cases): Designers creating negative-effect images for artistic compositions; Developers generating dark mode icon variants by inverting light assets; Medical imaging students... - [Image Color Inverter - tips](https://devtools.surf/tools/image-invert/#tips): Invert creates a photographic negative by flipping each RGB channel; Use inversion to create dark mode variants of light illustrations; The effect is reversible - inverting an... - [Image Color Inverter - fun facts](https://devtools.surf/tools/image-invert/#fun-facts): Photographic negatives, where light and dark are inverted, were the basis of all film photography from 1841 Fox Talbot's calotype process until digital cameras replaced film in... - [Image Watermark](https://devtools.surf/tools/image-watermark/): Tile a text watermark across any image - opacity + angle control - [Image Watermark - use cases](https://devtools.surf/tools/image-watermark/#use-cases): Photographers protecting portfolio images from theft; Agencies watermarking client proofs before final approval; Bloggers branding hero images for social sharing; Legal teams... - [Image Watermark - tips](https://devtools.surf/tools/image-watermark/#tips): Adjust opacity to 15-25% for subtle branding; Use diagonal angles 30-45 deg to deter cropping; Preview tile density before downloading the result - [Image Watermark - fun facts](https://devtools.surf/tools/image-watermark/#fun-facts): Digital watermarking dates to 1993 when Andrew Tirkel and Charles Osborne published the first algorithms for embedding imperceptible marks in images; The term 'watermark'... - [ASCII Art Generator](https://devtools.surf/tools/ascii-art-generator/): Convert photos to ASCII art - dense / simple / block ramps - [ASCII Art Generator - use cases](https://devtools.surf/tools/ascii-art-generator/#use-cases): Developers adding ASCII banners to CLI tool startup; README authors embedding text-art logos in documentation; Designers creating retro-style visuals for marketing; Gamers... - [ASCII Art Generator - tips](https://devtools.surf/tools/ascii-art-generator/#tips): Use the dense ramp for photos with rich detail; Block mode works best for logos and icons; Resize large images down first for cleaner output - [ASCII Art Generator - fun facts](https://devtools.surf/tools/ascii-art-generator/#fun-facts): ASCII art predates personal computers - Bell Labs engineers used typewriters to create images as early as the 1960s; The classic Mona Lisa ASCII rendition by Kenneth Knowlton and... - [Image Blur](https://devtools.surf/tools/image-blur/): Apply canvas blur 0-40px - great for hero backgrounds - [Image Blur - use cases](https://devtools.surf/tools/image-blur/#use-cases): Frontend devs creating blurred hero section backgrounds; UI designers generating frosted-glass card backdrops; Content creators obscuring sensitive areas in screenshots; Marketers... - [Image Blur - tips](https://devtools.surf/tools/image-blur/#tips): Use 8-12px blur for readable text-over-image overlays; Apply 20-40px blur to create frosted-glass UI backgrounds; Download the blurred image as a low-weight hero placeholder - [Image Blur - fun facts](https://devtools.surf/tools/image-blur/#fun-facts): Gaussian blur is named after Carl Friedrich Gauss, whose 1809 normal distribution formula became the mathematical basis for the convolution kernel used in image processing;... - [Image Brightness / Contrast](https://devtools.surf/tools/image-brightness-contrast/): Adjust brightness, contrast, and saturation in one pass - [Image Brightness / Contrast - use cases](https://devtools.surf/tools/image-brightness-contrast/#use-cases): E-commerce sellers enhancing flat product photography; Social media managers batch-adjusting campaign images; Developers normalizing user-uploaded avatar brightness; Designers... - [Image Brightness / Contrast - tips](https://devtools.surf/tools/image-brightness-contrast/#tips): Bump contrast 10-20% to make flat product photos pop; Lower brightness with high saturation for moody visuals; Use the single-pass pipeline to avoid re-uploading - [Image Brightness / Contrast - fun facts](https://devtools.surf/tools/image-brightness-contrast/#fun-facts): The human eye can distinguish roughly 10 million colors but only about 30 shades of pure gray, which is why contrast adjustments feel more dramatic than brightness alone; The... - [Image Flip / Mirror](https://devtools.surf/tools/image-flip-mirror/): Horizontal or vertical mirror - or both - of any image - [Image Flip / Mirror - use cases](https://devtools.surf/tools/image-flip-mirror/#use-cases): Selfie photographers correcting mirror-reversed portraits; Designers creating symmetrical pattern tiles from one half; Developers flipping sprites for left/right game animations;... - [Image Flip / Mirror - tips](https://devtools.surf/tools/image-flip-mirror/#tips): Flip selfies horizontally to match mirror perception; Combine both axes for a 180-degree rotation effect; Use vertical flip to correct upside-down phone captures - [Image Flip / Mirror - fun facts](https://devtools.surf/tools/image-flip-mirror/#fun-facts): The mirror-image 'ambulance' lettering on emergency vehicles dates to the 1930s, designed so drivers see it correctly in their rearview mirrors; Da Vinci wrote his famous... ## Text / String - [URL Encoder](https://devtools.surf/tools/url-encoder/): Encode strings for safe URL usage - [URL Encoder - use cases](https://devtools.surf/tools/url-encoder/#use-cases): Encoding search queries for API URL construction; Sanitizing file names with spaces for download URLs; Preparing redirect URIs for OAuth callback parameters; Encoding... - [URL Encoder - tips](https://devtools.surf/tools/url-encoder/#tips): Encode query parameter values to handle special characters; Use this before embedding user input into URL strings; Verify the encoded output matches expected percent-encoding - [URL Encoder - fun facts](https://devtools.surf/tools/url-encoder/#fun-facts): Percent-encoding was defined in RFC 1738 in 1994 as part of the original URL specification by Tim Berners-Lee; The space character can be encoded as either %20 or + depending on... - [URL Decoder](https://devtools.surf/tools/url-decoder/): Decode percent-encoded URL strings - [URL Decoder - use cases](https://devtools.surf/tools/url-decoder/#use-cases): Reading encoded redirect chains in OAuth error debugging; Inspecting UTM tracking parameters in marketing campaign URLs; Decoding API error messages containing percent-encoded... - [URL Decoder - tips](https://devtools.surf/tools/url-decoder/#tips): Paste encoded URLs from browser address bars to read them; Decode multiple layers if the URL was double-encoded; Use this to inspect tracking parameters in marketing URLs - [URL Decoder - fun facts](https://devtools.surf/tools/url-decoder/#fun-facts): Browser address bars automatically decode percent-encoded URLs for display, but send the encoded version to servers; The longest valid URL varies by browser: Chrome supports up to... - [HTML Entity Encode](https://devtools.surf/tools/html-entity-encode/): Convert characters to HTML entities - [HTML Entity Encode - use cases](https://devtools.surf/tools/html-entity-encode/#use-cases): Escaping user-generated content before rendering in HTML; Preparing code snippets for display in blog posts; Encoding special characters in HTML email templates; Sanitizing... - [HTML Entity Encode - tips](https://devtools.surf/tools/html-entity-encode/#tips): Encode user input to prevent XSS in rendered HTML output; Convert special characters like < > & before embedding in pages; Use named entities for readability when hand-editing HTML - [HTML Entity Encode - fun facts](https://devtools.surf/tools/html-entity-encode/#fun-facts): HTML 4.0 defined 252 named character entities, while HTML5 expanded the list to over 2,200 named references; The & entity is the most commonly used HTML entity, required... - [HTML Entity Decode](https://devtools.surf/tools/html-entity-decode/): Convert HTML entities back to characters - [HTML Entity Decode - use cases](https://devtools.surf/tools/html-entity-decode/#use-cases): Extracting readable text from web scraping results; Cleaning over-encoded content migrated between CMS platforms; Converting HTML email source back to editable plain text;... - [HTML Entity Decode - tips](https://devtools.surf/tools/html-entity-decode/#tips): Decode entities from scraped web content to get plain text; Handle both named entities and numeric references automatically; Use this to clean CMS content that was over-escaped on... - [HTML Entity Decode - fun facts](https://devtools.surf/tools/html-entity-decode/#fun-facts): The   non-breaking space entity is the most misused HTML entity, often used for spacing instead of CSS margins; Numeric character references like — can represent any... - [JWT Decoder](https://devtools.surf/tools/jwt-decoder/): Decode and inspect JWT token header and payload - [JWT Decoder - tips](https://devtools.surf/tools/jwt-decoder/#tips): Paste the full JWT token - it automatically splits header, payload, and signature; Color-coded sections: red=header, purple=payload, blue=signature; Check the exp claim to see if... - [JWT Decoder - fun facts](https://devtools.surf/tools/jwt-decoder/#fun-facts): JWTs are not encrypted by default - anyone can decode the payload. - [Lorem Ipsum Generator](https://devtools.surf/tools/lorem-ipsum-generator/): Generate placeholder text in words, sentences, or paragraphs - [Lorem Ipsum Generator - use cases](https://devtools.surf/tools/lorem-ipsum-generator/#use-cases): Filling layout mockups to test typography and spacing; Generating dummy content for CMS theme development; Creating realistic text blocks for responsive design testing; Populating... - [Lorem Ipsum Generator - tips](https://devtools.surf/tools/lorem-ipsum-generator/#tips): Choose between words, sentences, or paragraphs for precision; Generate exact word counts for realistic content mockups; Copy output directly into design tools for typography... - [Lorem Ipsum Generator - fun facts](https://devtools.surf/tools/lorem-ipsum-generator/#fun-facts): Lorem Ipsum originates from 'De Finibus Bonorum et Malorum' by Cicero, written in 45 BC, with deliberate alterations; The standard Lorem Ipsum passage has been used since the... - [Word Counter](https://devtools.surf/tools/word-counter/): Count words, characters, sentences, paragraphs, and reading time - [Word Counter - use cases](https://devtools.surf/tools/word-counter/#use-cases): Verifying blog post length meets editorial guidelines; Checking character counts for meta descriptions under 160 chars; Estimating reading time for documentation pages; Counting... - [Word Counter - tips](https://devtools.surf/tools/word-counter/#tips): Check estimated reading time for blog posts and articles; Monitor character count for social media post limits; Use sentence count to gauge content complexity at a glance - [Word Counter - fun facts](https://devtools.surf/tools/word-counter/#fun-facts): The average adult reading speed is 238 words per minute, according to a 2019 meta-analysis by Marc Brysbaert; Twitter's 140-character limit was based on the 160-character SMS... - [Text Diff](https://devtools.surf/tools/text-diff/): Compare two text blocks and highlight differences - [Text Diff - use cases](https://devtools.surf/tools/text-diff/#use-cases): Comparing configuration files before and after deployment; Spotting differences between staging and production API responses; Reviewing translated content against the original... - [Text Diff - tips](https://devtools.surf/tools/text-diff/#tips): Compare config file versions to spot unintended changes; Paste two API responses side by side to find differences; Use the highlighted output to document changes in code reviews - [Text Diff - fun facts](https://devtools.surf/tools/text-diff/#fun-facts): The diff algorithm was published by Hunt and McIlroy in 1976 at Bell Labs and became the foundation for all modern diff tools; Git uses the Myers diff algorithm by default,... - [Case Converter](https://devtools.surf/tools/case-converter/): Convert between camelCase, snake_case, PascalCase, kebab-case, and more - [Case Converter - use cases](https://devtools.surf/tools/case-converter/#use-cases): Converting JavaScript camelCase variables to Python snake_case; Generating CSS class names from PascalCase component names; Transforming database column names for ORM field... - [Case Converter - tips](https://devtools.surf/tools/case-converter/#tips): Convert variable names between language naming conventions; Switch between camelCase and snake_case for API field mapping; Use kebab-case output for CSS class names and URL slugs - [Case Converter - fun facts](https://devtools.surf/tools/case-converter/#fun-facts): CamelCase was popularized by the Smalltalk programming language in the 1980s and later adopted by Java and JavaScript; Snake_case gets its name from the underscore characters... - [Line Sorter](https://devtools.surf/tools/line-sorter/): Sort lines alphabetically, numerically, reverse, shuffle, or dedupe - [Line Sorter - use cases](https://devtools.surf/tools/line-sorter/#use-cases): Alphabetizing dependency lists in package configuration files; Deduplicating email lists exported from multiple sources; Sorting log entries by timestamp for chronological... - [Line Sorter - tips](https://devtools.surf/tools/line-sorter/#tips): Deduplicate lines to remove exact repetitions instantly; Sort numerically for version numbers or ID lists; Shuffle lines to randomize test data or list ordering - [Line Sorter - fun facts](https://devtools.surf/tools/line-sorter/#fun-facts): The Unix sort command, first written by Ken Thompson in 1973, could handle files larger than available memory using merge sort; The fastest known comparison-based sorting... - [Regex Tester](https://devtools.surf/tools/regex-tester/): Test regex patterns with match highlighting and group extraction - [Regex Tester - tips](https://devtools.surf/tools/regex-tester/#tips): Flags like /g, /i, /m are supported; Named groups ?... are highlighted separately; Match count and group extractions shown in results - [Regex Tester - fun facts](https://devtools.surf/tools/regex-tester/#fun-facts): Regular expressions were invented by mathematician Stephen Kleene in the 1950s. - [String Escape / Unescape](https://devtools.surf/tools/string-escape/): Escape and unescape strings for JS, JSON, HTML, or SQL - [String Escape / Unescape - use cases](https://devtools.surf/tools/string-escape/#use-cases): Escaping user input strings before inserting into SQL queries; Preparing JSON string values containing special characters; Escaping HTML content for safe JavaScript string... - [String Escape / Unescape - tips](https://devtools.surf/tools/string-escape/#tips): Choose the target language before escaping for correct syntax; Escape SQL strings to prevent injection in manual queries; Toggle between escape and unescape modes with one click - [String Escape / Unescape - fun facts](https://devtools.surf/tools/string-escape/#fun-facts): SQL injection, first documented by Jeff Forristal in Phrack Magazine in 1998, remains in the OWASP Top 10 over 25 years later; The backslash escape character was introduced by the... - [Markdown Preview](https://devtools.surf/tools/markdown-preview/): Live preview rendered Markdown with syntax highlighting - [Markdown Preview - tips](https://devtools.surf/tools/markdown-preview/#tips): Supports GitHub-flavored Markdown; Code blocks get syntax highlighting; Tables, blockquotes, and task lists are supported - [Markdown Preview - fun facts](https://devtools.surf/tools/markdown-preview/#fun-facts): Markdown was created by John Gruber and Aaron Swartz in 2004. The original spec was intentionally minimal - less than 20 rules; There are over 30 distinct Markdown flavors in use... - [.env Validator](https://devtools.surf/tools/env-validator/): Validate .env files and flag missing values or duplicate keys - [.env Validator - use cases](https://devtools.surf/tools/env-validator/#use-cases): Validating environment files before deploying to production; Checking for missing variables when onboarding new developers; Auditing .env files for duplicate or conflicting key... - [.env Validator - tips](https://devtools.surf/tools/env-validator/#tips): Paste your .env file to instantly find missing values; Catch duplicate keys that may cause silent configuration bugs; Validate formatting to ensure no spaces around equal signs - [.env Validator - fun facts](https://devtools.surf/tools/env-validator/#fun-facts): The dotenv pattern was popularized by the Ruby gem 'dotenv' created by Brandon Keepers in 2012; The Twelve-Factor App methodology, published by Heroku co-founder Adam Wiggins in... - [Byte Counter](https://devtools.surf/tools/byte-counter/): Show byte size of text in UTF-8, UTF-16, and ASCII - [Byte Counter - use cases](https://devtools.surf/tools/byte-counter/#use-cases): Checking SMS message byte length for multi-part thresholds; Verifying database VARCHAR column capacity for Unicode text; Measuring HTTP header sizes against server limits;... - [Byte Counter - tips](https://devtools.surf/tools/byte-counter/#tips): Compare UTF-8 and UTF-16 sizes for the same string; Check byte size before storing text in fixed-length database columns; Verify payload size stays within API request limits - [Byte Counter - fun facts](https://devtools.surf/tools/byte-counter/#fun-facts): UTF-8 was designed by Ken Thompson and Rob Pike in September 1992 on a placemat at a New Jersey diner; A single emoji can take up to 28 bytes in UTF-8 when combining base... - [TOML Formatter](https://devtools.surf/tools/toml-formatter/): Format and validate TOML configuration files - [TOML Formatter - use cases](https://devtools.surf/tools/toml-formatter/#use-cases): Formatting Cargo.toml files for consistent Rust project style; Validating pyproject.toml before publishing Python packages; Cleaning up Hugo static site configuration files;... - [TOML Formatter - tips](https://devtools.surf/tools/toml-formatter/#tips): Format Cargo.toml files for consistent Rust project configs; Validate TOML syntax to catch missing brackets or quotes; Use this to clean up pyproject.toml before committing changes - [TOML Formatter - fun facts](https://devtools.surf/tools/toml-formatter/#fun-facts): TOML was created by Tom Preston-Werner GitHub co-founder in 2013; the name stands for 'Tom's Obvious, Minimal Language.'; TOML 1.0.0 was finally released on January 12, 2021,... - [Markdown Table Editor](https://devtools.surf/tools/markdown-table-editor/): Edit Markdown tables with a visual grid - add rows and align cells - [Markdown Table Editor - use cases](https://devtools.surf/tools/markdown-table-editor/#use-cases): Create data tables for README documentation quickly; Edit comparison tables for technical blog posts; Format API parameter tables for developer docs; Build feature comparison... - [Markdown Table Editor - tips](https://devtools.surf/tools/markdown-table-editor/#tips): Add rows and columns using the visual grid interface; Auto-align cell padding for cleaner Markdown source; Paste existing Markdown tables to edit them visually - [Markdown Table Editor - fun facts](https://devtools.surf/tools/markdown-table-editor/#fun-facts): Markdown tables are not part of John Gruber's original 2004 spec; they were added by PHP Markdown Extra in 2006 and later adopted by GitHub Flavored Markdown; GitHub Flavored... - [JWT to cURL](https://devtools.surf/tools/jwt-to-curl/): Generate a curl command that uses a JWT as the Authorization header - [JWT to cURL - use cases](https://devtools.surf/tools/jwt-to-curl/#use-cases): Quickly test authenticated API endpoints from the terminal; Share reproducible API calls with teammates for debugging; Generate cURL commands for API documentation examples; Test... - [JWT to cURL - tips](https://devtools.surf/tools/jwt-to-curl/#tips): Paste a JWT to generate a ready-to-use cURL command; Set the target URL and HTTP method for the generated command; Include custom headers alongside the Authorization Bearer token - [JWT to cURL - fun facts](https://devtools.surf/tools/jwt-to-curl/#fun-facts): JSON Web Tokens JWT were standardized in RFC 7519 in May 2015, authored by Michael Jones, John Bradley, and Nat Sakimura; A JWT has exactly three Base64url-encoded parts separated... - [Diff Viewer Side-by-Side](https://devtools.surf/tools/diff-viewer/): View unified or side-by-side diffs with syntax highlighting - [Diff Viewer Side-by-Side - use cases](https://devtools.surf/tools/diff-viewer/#use-cases): Review code changes before committing to version control; Compare configuration files across environments; Visualize database migration script differences; Share highlighted diffs... - [Diff Viewer Side-by-Side - tips](https://devtools.surf/tools/diff-viewer/#tips): Toggle between unified and side-by-side diff views; Use syntax highlighting to spot changes in code diffs; Paste two text blocks to generate an inline comparison - [Diff Viewer Side-by-Side - fun facts](https://devtools.surf/tools/diff-viewer/#fun-facts): The diff utility was first developed by Douglas McIlroy at Bell Labs in 1974 and shipped with the 5th Edition of Unix; The unified diff format showing + and - lines with @@... - [Environment Variable Diff](https://devtools.surf/tools/env-diff/): Compare two .env files and show added, removed, and changed variables - [Environment Variable Diff - use cases](https://devtools.surf/tools/env-diff/#use-cases): Catch missing environment variables before deployment; Compare staging and production environment configs; Audit environment variable changes during code review; Onboard new... - [Environment Variable Diff - tips](https://devtools.surf/tools/env-diff/#tips): Paste two .env files to see added, removed, and changed vars; Spot missing environment variables before deploying to staging; Compare local and production .env files side by side - [Environment Variable Diff - fun facts](https://devtools.surf/tools/env-diff/#fun-facts): The .env file convention was popularized by the twelve-factor app methodology published by Heroku engineers in 2011; The dotenv library for Node.js has over 35 million weekly... - [Unicode Normalizer](https://devtools.surf/tools/unicode-normalizer/): Normalize Unicode text between NFC, NFD, NFKC, and NFKD forms - [Unicode Normalizer - use cases](https://devtools.surf/tools/unicode-normalizer/#use-cases): Backend developers fixing string comparison bugs across locales; Data engineers deduplicating records with mixed Unicode forms; macOS/Windows cross-platform teams resolving... - [Unicode Normalizer - tips](https://devtools.surf/tools/unicode-normalizer/#tips): Use NFC for web content to ensure consistent rendering; Compare NFD and NFC to debug string matching failures; Apply NFKC to normalize fullwidth characters to ASCII - [Unicode Normalizer - fun facts](https://devtools.surf/tools/unicode-normalizer/#fun-facts): Unicode normalization was formalized in Unicode Technical Report #15, first published in 1999 - the four forms NFC, NFD, NFKC, NFKD handle the 'e with acute' problem differently;... - [Markdown Resume Builder](https://devtools.surf/tools/markdown-resume-builder/): Write a resume in Markdown and export to styled HTML or PDF - [Markdown Resume Builder - use cases](https://devtools.surf/tools/markdown-resume-builder/#use-cases): Building a clean developer resume with version-controlled Markdown; Quickly updating a CV before a job application deadline; Creating consistent resumes for a consulting team's... - [Markdown Resume Builder - tips](https://devtools.surf/tools/markdown-resume-builder/#tips): Use heading levels to separate sections like Experience and Skills; Preview the styled output before exporting to PDF; Keep each role description to 3-5 bullet points for... - [Markdown Resume Builder - fun facts](https://devtools.surf/tools/markdown-resume-builder/#fun-facts): The word 'resume' comes from the French word 'resumer' meaning 'to summarize,' and the document format became standard in the 1950s; Leonardo da Vinci is often credited with... - [Regex Cheatsheet](https://devtools.surf/tools/regex-cheatsheet/): Searchable reference of regex syntax with live examples - [Regex Cheatsheet - use cases](https://devtools.surf/tools/regex-cheatsheet/#use-cases): Looking up lookahead syntax while writing validation patterns; Referencing character class shortcuts during log file parsing; Teaching regex concepts to teammates with live... - [Regex Cheatsheet - tips](https://devtools.surf/tools/regex-cheatsheet/#tips): Use the search bar to find specific patterns like lookaheads; Click any example to see it highlighted in the live preview; Bookmark this page as a quick regex reference while... - [Regex Cheatsheet - fun facts](https://devtools.surf/tools/regex-cheatsheet/#fun-facts): Regular expressions were formalized by mathematician Stephen Cole Kleene in 1951 as part of his work on formal language theory; Ken Thompson implemented regex in the QED text... - [Unicode Escape](https://devtools.surf/tools/unicode-escape/): Escape non-ASCII chars as \uXXXX or decode them back - [Unicode Escape - use cases](https://devtools.surf/tools/unicode-escape/#use-cases): Debugging invisible zero-width characters in user-submitted text; Escaping non-ASCII characters for safe inclusion in JSON strings; Converting emoji to escape sequences for... - [Unicode Escape - tips](https://devtools.surf/tools/unicode-escape/#tips): Paste emoji or accented text to see their \uXXXX codes; Toggle between escape and unescape modes instantly; Use this to debug invisible Unicode characters in strings - [Unicode Escape - fun facts](https://devtools.surf/tools/unicode-escape/#fun-facts): Unicode 1.0 was published in October 1991 with 7,161 characters; as of Unicode 15.1 2023, it contains 149,813 characters covering 161 scripts; The \uXXXX escape syntax originated... - [Pronouncing Counter](https://devtools.surf/tools/pronouncing-counter/): Count syllables per word useful for copy + slugs - [Pronouncing Counter - use cases](https://devtools.surf/tools/pronouncing-counter/#use-cases): Checking that a new product name is easy to pronounce; Optimizing URL slugs for readability and memorability; Crafting marketing headlines with rhythmic syllable patterns;... - [Pronouncing Counter - tips](https://devtools.surf/tools/pronouncing-counter/#tips): Paste a word or phrase to see syllable counts per word; Use the results to craft catchy product names and taglines; Check slug readability by counting syllables in URL paths - [Pronouncing Counter - fun facts](https://devtools.surf/tools/pronouncing-counter/#fun-facts): The English language has approximately 15,000 possible syllable structures, far more than Japanese which has roughly 400; The longest monosyllabic English word is 'strengths' at 9... - [Readability Scorer](https://devtools.surf/tools/readability-scorer/): Flesch + grade-level estimate for any prose block - [Readability Scorer - use cases](https://devtools.surf/tools/readability-scorer/#use-cases): Ensuring developer documentation is accessible to junior engineers; Checking that marketing copy matches the target audience's reading level; Improving API documentation... - [Readability Scorer - tips](https://devtools.surf/tools/readability-scorer/#tips): Aim for a Flesch score of 60-70 for general web content; Check the grade level to match your target audience; Rewrite sentences flagged as complex to improve the score - [Readability Scorer - fun facts](https://devtools.surf/tools/readability-scorer/#fun-facts): The Flesch Reading Ease test was developed by Rudolf Flesch in 1948; the US Department of Defense adopted it in 1978 for all military manuals; The average American reads at a... - [Word Frequency Counter](https://devtools.surf/tools/word-frequency/): Rank words by frequency, stop-words filtered - [Word Frequency Counter - use cases](https://devtools.surf/tools/word-frequency/#use-cases): Analyze keyword density in blog posts and SEO content; Audit codebases for naming patterns and terminology consistency; Study writing style by comparing word distribution across... - [Word Frequency Counter - tips](https://devtools.surf/tools/word-frequency/#tips): Paste any text - articles, code, logs, or documents - to instantly see which words appear most often; Common stop words the, a, is, and are filtered by default so you see... - [Word Frequency Counter - fun facts](https://devtools.surf/tools/word-frequency/#fun-facts): Zipf's law predicts that the most frequent word in any natural language text appears roughly twice as often as the second most frequent, three times as often as the third, and so... - [Clipboard Cleaner](https://devtools.surf/tools/clipboard-cleaner/): Strip smart quotes, zero-widths, non-breaking spaces - [Clipboard Cleaner - use cases](https://devtools.surf/tools/clipboard-cleaner/#use-cases): Cleaning text pasted from Word docs before inserting into code; Removing invisible characters from copy-pasted stack traces; Stripping smart quotes from content before database... - [Clipboard Cleaner - tips](https://devtools.surf/tools/clipboard-cleaner/#tips): Paste text from Word or Google Docs to strip smart quotes; Check for zero-width characters that cause invisible bugs; Use this before pasting text into code editors or terminals - [Clipboard Cleaner - fun facts](https://devtools.surf/tools/clipboard-cleaner/#fun-facts): Zero-width space U+200B and zero-width non-joiner U+200C are invisible Unicode characters that have caused countless bugs in copy-pasted code; Smart quotes curly quotes were... - [Markdown TOC](https://devtools.surf/tools/markdown-toc/): Generate a table of contents from markdown headings - [Markdown TOC - use cases](https://devtools.surf/tools/markdown-toc/#use-cases): Generating navigation for long README files in open-source projects; Adding a table of contents to technical documentation; Creating clickable TOCs for wiki pages in team... - [Markdown TOC - tips](https://devtools.surf/tools/markdown-toc/#tips): Paste your full Markdown document to auto-generate a TOC; The TOC uses anchor links matching each heading's slug; Regenerate the TOC whenever you add or rename headings - [Markdown TOC - fun facts](https://devtools.surf/tools/markdown-toc/#fun-facts): GitHub automatically renders a table of contents for Markdown files with 2+ headings via a clickable icon, but many platforms still require manual TOCs; The Markdown specification... - [Whitespace Visualizer](https://devtools.surf/tools/whitespace-visualizer/): Render spaces, tabs, newlines, zero-widths as glyphs - [Whitespace Visualizer - use cases](https://devtools.surf/tools/whitespace-visualizer/#use-cases): Debugging YAML parse errors caused by mixed tabs and spaces; Identifying hidden characters in copy-pasted configuration files; Verifying consistent indentation in Python source... - [Whitespace Visualizer - tips](https://devtools.surf/tools/whitespace-visualizer/#tips): Paste suspicious text to reveal hidden spaces and tabs; Look for zero-width characters rendered as visible glyphs; Use this to debug indentation issues in YAML or Python files - [Whitespace Visualizer - fun facts](https://devtools.surf/tools/whitespace-visualizer/#fun-facts): The tab character was included in ASCII 1963 at position 9, originally designed to align text in columns on mechanical teletypewriters; Python's use of significant whitespace for... - [Line Deduper](https://devtools.surf/tools/line-deduper/): Remove duplicate lines, preserve order or sort - [Line Deduper - use cases](https://devtools.surf/tools/line-deduper/#use-cases): Removing duplicate entries from CSV data before import; Cleaning up repeated error messages in application log files; Deduplicating email lists before sending a newsletter... - [Line Deduper - tips](https://devtools.surf/tools/line-deduper/#tips): Choose between preserving original order or sorting the output; See the count of duplicate lines removed in the summary; Use this to clean up log files with repeated entries - [Line Deduper - fun facts](https://devtools.surf/tools/line-deduper/#fun-facts): The Unix 'uniq' command, which removes adjacent duplicate lines, was part of Version 3 Unix 1973 - but it requires input to be sorted first, unlike this tool; In data processing,... - [Hard Wrap](https://devtools.surf/tools/text-wrap/): Re-wrap prose to a fixed column width - [Hard Wrap - use cases](https://devtools.surf/tools/text-wrap/#use-cases): Wrapping commit messages to the conventional 72-column width; Formatting email text to comply with RFC line length limits; Reformatting documentation to a consistent column width;... - [Hard Wrap - tips](https://devtools.surf/tools/text-wrap/#tips): Set the column width to 72 for email-friendly formatting; Use 80 columns for code comments and commit messages; Preview the wrapped output before copying to your editor - [Hard Wrap - fun facts](https://devtools.surf/tools/text-wrap/#fun-facts): The 80-column standard dates back to IBM's 80-column punch card introduced in 1928, which remained the standard card format for over 50 years; RFC 2822 recommends email lines be... - [IETF Language Tag Validator](https://devtools.surf/tools/ietf-tag-validator/): Validate BCP 47 tag zh-Hant-TW - canonical form + regions - [IETF Language Tag Validator - use cases](https://devtools.surf/tools/ietf-tag-validator/#use-cases): i18n engineers validating language tags in translation config files; Frontend developers setting correct lang attributes in HTML documents; API developers validating... - [IETF Language Tag Validator - tips](https://devtools.surf/tools/ietf-tag-validator/#tips): Paste a BCP 47 tag like zh-Hant-TW to validate structure and region; Check the canonical form output to normalize inconsistent tag casing; Validate language tags before storing... - [IETF Language Tag Validator - fun facts](https://devtools.surf/tools/ietf-tag-validator/#fun-facts): BCP 47 Best Current Practice 47 combines RFC 5646 and RFC 4647 to define language tags. - [Line Deduper](https://devtools.surf/tools/line-dedupe/): Collapse duplicate lines, show occurrence counts - [Line Deduper - use cases](https://devtools.surf/tools/line-dedupe/#use-cases): Data engineers removing duplicate entries from ETL pipeline output; DevOps teams deduplicating repeated log messages before analysis; Developers cleaning up duplicated imports or... - [Line Deduper - tips](https://devtools.surf/tools/line-dedupe/#tips): Paste text with repeated lines to see unique entries and occurrence counts; Use it to clean up duplicated entries in CSV or config files; Check the count column to identify the... - [Line Deduper - fun facts](https://devtools.surf/tools/line-dedupe/#fun-facts): The Unix 'uniq' command, which removes duplicate adjacent lines, was part of the original Unix Version 3 1973 - line deduplication is a 50-year-old problem; The 'sort | uniq'... - [Safe Filename Generator](https://devtools.surf/tools/safe-filename-generator/): Strip accents + unsafe chars to filesystem-safe filename - [Safe Filename Generator - use cases](https://devtools.surf/tools/safe-filename-generator/#use-cases): Backend developers sanitizing user-uploaded filenames before storage; CMS developers generating URL-safe slugs from article titles; DevOps engineers normalizing build artifact... - [Safe Filename Generator - tips](https://devtools.surf/tools/safe-filename-generator/#tips): Paste any string with accents or special characters to get a safe filename; The output strips diacritics and replaces spaces with hyphens or underscores; Use it before... - [Safe Filename Generator - fun facts](https://devtools.surf/tools/safe-filename-generator/#fun-facts): Windows forbids 9 characters in filenames: < > : " / \ | ? * - while Linux only reserves / and the null byte, leading to cross-platform filename headaches; The maximum filename... - [ASCII Box Drawer](https://devtools.surf/tools/ascii-box-drawer/): Wrap any text in a Unicode box - great for READMEs - [ASCII Box Drawer - use cases](https://devtools.surf/tools/ascii-box-drawer/#use-cases): Developers adding decorative headers to README and documentation files; CLI tool builders framing output messages in terminal applications; DevOps engineers formatting alerts and... - [ASCII Box Drawer - tips](https://devtools.surf/tools/ascii-box-drawer/#tips): Paste any text to wrap it in a clean Unicode box border instantly; Use the output in README files for visually distinct section headers; Try multi-line text to see automatic width... - [ASCII Box Drawer - fun facts](https://devtools.surf/tools/ascii-box-drawer/#fun-facts): Unicode box-drawing characters U+2500-U+257F were inherited from the IBM PC Code Page 437 1981, which was used for text-mode UI in DOS applications; The box-drawing block contains... - [Text Reverser](https://devtools.surf/tools/text-reverser/): Reverse a string - emoji-safe operates on grapheme clusters - [Text Reverser - use cases](https://devtools.surf/tools/text-reverser/#use-cases): Developers testing Unicode-aware string functions in their applications; QA engineers verifying that text reversal preserves emoji and diacritical marks; Frontend devs creating... - [Text Reverser - tips](https://devtools.surf/tools/text-reverser/#tips): Paste text with emojis to see grapheme-safe reversal without broken characters; Use it to test palindrome strings or generate reversed display names; Check that compound emojis... - [Text Reverser - fun facts](https://devtools.surf/tools/text-reverser/#fun-facts): Naive string reversal in JavaScript split-reverse-join breaks emoji because emojis like flags are composed of 2-4 Unicode code points that must stay together; A grapheme cluster... - [Email Extractor](https://devtools.surf/tools/email-extractor/): Extract every unique email address from a blob of text - [Email Extractor - use cases](https://devtools.surf/tools/email-extractor/#use-cases): Sales teams extracting email addresses from copied web pages or documents; Recruiters pulling contact emails from resume text or job boards; Developers parsing email addresses... - [Email Extractor - tips](https://devtools.surf/tools/email-extractor/#tips): Paste a large text block to extract all unique email addresses at once; Results are deduplicated so each email appears only once; Use it on meeting notes or email threads to build... - [Email Extractor - fun facts](https://devtools.surf/tools/email-extractor/#fun-facts): The @ symbol in email was chosen by Ray Tomlinson in 1971 for ARPANET email because it was rarely used in names and already meant 'at' in English; The official email address... - [URL Extractor](https://devtools.surf/tools/url-extractor/): Extract every unique http/https URL from a blob of text - [URL Extractor - use cases](https://devtools.surf/tools/url-extractor/#use-cases): Researchers collecting all referenced URLs from academic papers or articles; QA testers extracting API endpoint URLs from documentation for testing; Content managers auditing... - [URL Extractor - tips](https://devtools.surf/tools/url-extractor/#tips): Paste any text blob to pull out all unique http and https URLs; Results are deduplicated even if the same URL appears multiple times; Use it on documentation or chat logs to... - [URL Extractor - fun facts](https://devtools.surf/tools/url-extractor/#fun-facts): Tim Berners-Lee invented URLs originally called URIs in 1994, defining the format in RFC 1738. - [Text Repeater](https://devtools.surf/tools/text-repeater/): Repeat text N times with a custom separator - newline, space, emoji - [Text Repeater - use cases](https://devtools.surf/tools/text-repeater/#use-cases): QA engineers generating repeated strings for input validation testing; Developers creating filler content for UI layout testing; Social media managers building decorative text... - [Text Repeater - tips](https://devtools.surf/tools/text-repeater/#tips): Set a custom separator like a newline or comma between repetitions; Use emoji separators to create decorative text dividers for social media; Generate test data by repeating... - [Text Repeater - fun facts](https://devtools.surf/tools/text-repeater/#fun-facts): The longest known repeated word in English literature is James Joyce's 'Bababadalgharaghtakamminarronnkonnbronntonnerronntuonnthunntrovarrhounawnskawntoohoohoordenenthurnuk' - a... - [Title Case Converter](https://devtools.surf/tools/title-case-converter/): Capitalize words - AP-style, keep small words lowercase unless first/last - [Title Case Converter - tips](https://devtools.surf/tools/title-case-converter/#tips): Follows AP style - keeps 'a, an, and, the, or' lowercase unless first or last; Works with any mix of punctuation and capitalisation; Great for converting headlines, sentence-case... - [Title Case Converter - fun facts](https://devtools.surf/tools/title-case-converter/#fun-facts): There are at least 5 competing title-case styles: AP, Chicago, MLA, APA, and NYT. - [Whitespace Normalizer](https://devtools.surf/tools/whitespace-normalizer/): Collapse runs of spaces/tabs, trim lines, drop consecutive blanks - [Whitespace Normalizer - use cases](https://devtools.surf/tools/whitespace-normalizer/#use-cases): Developers cleaning up code pasted from emails or chat apps; Writers normalizing text copied from PDFs with irregular spacing; DevOps engineers sanitizing log output before piping... - [Whitespace Normalizer - tips](https://devtools.surf/tools/whitespace-normalizer/#tips): Collapse multiple consecutive spaces into a single space instantly; Trim trailing whitespace from every line to clean up pasted code; Remove consecutive blank lines to tighten up... - [Whitespace Normalizer - fun facts](https://devtools.surf/tools/whitespace-normalizer/#fun-facts): There are 25 different whitespace characters in Unicode, including the zero-width space U+200B which is invisible but still counts as a character; The programming language... - [Tab to Space Converter](https://devtools.surf/tools/tab-space-converter/): Switch tabs to N spaces or N spaces back to tabs - [Tab to Space Converter - use cases](https://devtools.surf/tools/tab-space-converter/#use-cases): Teams enforcing consistent indentation across mixed-editor workflows; Open source contributors matching a project's .editorconfig settings; Code reviewers normalizing indentation... - [Tab to Space Converter - tips](https://devtools.surf/tools/tab-space-converter/#tips): Set the exact number of spaces per tab to match your project's style guide; Convert spaces back to tabs for codebases that prefer tab indentation; Paste code from different... - [Tab to Space Converter - fun facts](https://devtools.surf/tools/tab-space-converter/#fun-facts): The tabs vs. spaces debate dates back to the 1970s - a 2017 Stack Overflow analysis of 400,000 developers found that spaces users earned 8.6% more than tab users; Python's PEP 8... - [Line Break Converter](https://devtools.surf/tools/line-break-converter/): Normalize CRLF / LF / CR line endings across an entire file - [Line Break Converter - use cases](https://devtools.surf/tools/line-break-converter/#use-cases): DevOps engineers fixing shell scripts that break on Windows line endings; Cross-platform teams normalizing line endings before committing to Git; Data engineers cleaning CSV files... - [Line Break Converter - tips](https://devtools.surf/tools/line-break-converter/#tips): Detect whether your file uses CRLF, LF, or CR before converting; Convert Windows CRLF to Unix LF for shell scripts that fail on \r; Normalize mixed line endings that cause git... - [Line Break Converter - fun facts](https://devtools.surf/tools/line-break-converter/#fun-facts): CRLF \r\n dates back to mechanical teletypes: CR moved the print head to column 1, and LF advanced the paper one line - two separate physical operations; Git's core.autocrlf... - [Line Shuffler](https://devtools.surf/tools/line-shuffler/): Randomly shuffle every line in your input - Fisher-Yates, deterministic - [Line Shuffler - use cases](https://devtools.surf/tools/line-shuffler/#use-cases): Teachers randomizing student name lists for fair group assignments; QA engineers shuffling test cases to detect order-dependent bugs; Data scientists randomizing dataset rows... - [Line Shuffler - tips](https://devtools.surf/tools/line-shuffler/#tips): The Fisher-Yates algorithm ensures each permutation is equally likely; Shuffle test data lines to randomize input order for unbiased testing; Re-shuffle multiple times to verify... - [Line Shuffler - fun facts](https://devtools.surf/tools/line-shuffler/#fun-facts): The Fisher-Yates shuffle was originally described by Ronald Fisher and Frank Yates in 1938 using pencil and paper - the modern computer version was published by Richard... - [Syllable Counter](https://devtools.surf/tools/syllable-counter/): Count syllables per word - heuristic-based English estimator - [Syllable Counter - use cases](https://devtools.surf/tools/syllable-counter/#use-cases): Poets verifying syllable counts for haiku and metered verse; Content writers checking readability scores for marketing copy; ESL teachers creating pronunciation exercises with... - [Syllable Counter - tips](https://devtools.surf/tools/syllable-counter/#tips): Check word-by-word syllable counts to verify haiku line lengths; The heuristic works best for standard English words and names; Use it to estimate reading time based on syllable... - [Syllable Counter - fun facts](https://devtools.surf/tools/syllable-counter/#fun-facts): English syllable counting is notoriously hard for computers - the word 'fire' is one syllable in most dialects but two in Southern American English; The longest common English... - [Pig Latin Converter](https://devtools.surf/tools/pig-latin-converter/): Translate English text to pig latin - keeps case, punctuation intact - [Pig Latin Converter - use cases](https://devtools.surf/tools/pig-latin-converter/#use-cases): Developers testing internationalization by simulating pseudo-translations; Teachers creating fun language exercises for elementary students; Content creators adding playful text... - [Pig Latin Converter - tips](https://devtools.surf/tools/pig-latin-converter/#tips): Capitalization is preserved - 'Hello' becomes 'Ellohay' correctly; Punctuation stays attached to the end of each translated word; Words starting with vowels get 'way' appended... - [Pig Latin Converter - fun facts](https://devtools.surf/tools/pig-latin-converter/#fun-facts): Pig Latin dates back to at least 1869 - an article in Putnam's Magazine referenced 'hog Latin' as a children's language game played in American schoolyards; Thomas Jefferson... - [Bold Text Generator](https://devtools.surf/tools/bold-text-generator/): Turn regular text into unicode - works in bios, Slack, Discord - [Bold Text Generator - tips](https://devtools.surf/tools/bold-text-generator/#tips): Uses Unicode Mathematical Bold letters U+1D400 block; Works in Twitter bios, LinkedIn headlines, and Slack - no formatting needed; Screen readers may struggle - use real bold for... - [Bold Text Generator - fun facts](https://devtools.surf/tools/bold-text-generator/#fun-facts): Unicode has 7 complete mathematical font variants: Bold, Italic, Bold Italic, Script, Fraktur, Double-Struck, and Sans-Serif; The Mathematical Alphanumeric Symbols block... - [Italic Text Generator](https://devtools.surf/tools/italic-text-generator/): Turn regular text into unicode - copy/paste anywhere - [Italic Text Generator - use cases](https://devtools.surf/tools/italic-text-generator/#use-cases): Social media managers adding italic emphasis to Instagram bios; Designers creating styled text for platforms without formatting support; Marketers crafting eye-catching tweets... - [Italic Text Generator - tips](https://devtools.surf/tools/italic-text-generator/#tips): Copy the unicode italic output and paste it into any social media bio; Works in platforms that strip HTML/markdown but preserve unicode characters; Mix with regular text to create... - [Italic Text Generator - fun facts](https://devtools.surf/tools/italic-text-generator/#fun-facts): The mathematical italic unicode block U+1D434 onwards was added in Unicode 3.1 2001, originally intended for mathematical notation, not social media styling; Italic type was... - [Strikethrough Text Generator](https://devtools.surf/tools/strikethrough-text-generator/): Add combining-mark strike to any text - no markdown needed - [Strikethrough Text Generator - use cases](https://devtools.surf/tools/strikethrough-text-generator/#use-cases): Social media users crossing out text for humorous effect in bios; Chat users applying strikethrough in apps without markdown support; Content creators showing before/after text... - [Strikethrough Text Generator - tips](https://devtools.surf/tools/strikethrough-text-generator/#tips): Uses unicode combining characters so it works anywhere text is accepted; Paste the result into chat apps that don't support markdown strikethrough; Each character gets an... - [Strikethrough Text Generator - fun facts](https://devtools.surf/tools/strikethrough-text-generator/#fun-facts): The strikethrough combining character U+0336 is a Unicode combining mark that overlays a horizontal line through the preceding character without replacing it; Strikethrough text... - [Fancy Text Generator](https://devtools.surf/tools/fancy-text-generator/): 8 unicode style variants - bold, italic, script, fraktur, monospace and more - [Fancy Text Generator - tips](https://devtools.surf/tools/fancy-text-generator/#tips): 8 unicode font variants in one pass; Copy any line - it's already styled, no CSS needed; Perfect for social bios, gaming tags, or design mockups - [Fancy Text Generator - fun facts](https://devtools.surf/tools/fancy-text-generator/#fun-facts): The Unicode 'Blackletter' Fraktur block was added so mathematicians could keep writing Gothic style letters even in plain text; Zalgo text the 'glitchy' style works by stacking... - [Upside-Down Text](https://devtools.surf/tools/upside-down-text/): Flip text upside-down using unicode substitutions - p l - [Upside-Down Text - use cases](https://devtools.surf/tools/upside-down-text/#use-cases): Social media users creating attention-grabbing profile names; Pranksters flipping text in group chats for comedic effect; Designers testing text rendering with unusual unicode... - [Upside-Down Text - tips](https://devtools.surf/tools/upside-down-text/#tips): The entire string is reversed and each character is flipped for true upside-down effect; Works by mapping each letter to a unicode rotated equivalent; Great for attention-grabbing... - [Upside-Down Text - fun facts](https://devtools.surf/tools/upside-down-text/#fun-facts): Upside-down text uses characters from various Unicode blocks - for example, 'a' maps to U+0250 Latin Small Letter Turned A, originally designed for phonetic transcription; The... - [Small Caps Converter](https://devtools.surf/tools/small-caps-converter/): Convert normal text to s s - pure unicode, no CSS - [Small Caps Converter - use cases](https://devtools.surf/tools/small-caps-converter/#use-cases): Designers creating styled headings for social media without CSS; Writers formatting acronyms in typographically correct small caps; Brand managers maintaining consistent styled... - [Small Caps Converter - tips](https://devtools.surf/tools/small-caps-converter/#tips): Output uses unicode small capital letters, not CSS font-variant; Copy and paste the result into any platform that accepts plain text; Mix small caps with regular text for... - [Small Caps Converter - fun facts](https://devtools.surf/tools/small-caps-converter/#fun-facts): True typographic small caps have been used since the 15th century - early printers like Aldus Manutius used them for acronyms and proper nouns in body text; CSS font-variant:... - [Circled Text Generator](https://devtools.surf/tools/circled-text-generator/): Render letters + digits as unicode glyphs - [Circled Text Generator - use cases](https://devtools.surf/tools/circled-text-generator/#use-cases): Social media users creating decorative usernames and bios; Writers using circled numbers as bullet points in plain text; Designers adding visual flair to text in platforms without... - [Circled Text Generator - tips](https://devtools.surf/tools/circled-text-generator/#tips): Letters and digits are converted to their circled unicode equivalents; Output displays as enclosed characters in most modern fonts and platforms; Use circled numbers for ordered... - [Circled Text Generator - fun facts](https://devtools.surf/tools/circled-text-generator/#fun-facts): Circled numbers 1-20 were added to Unicode 1.1 in 1993, but circled letters weren't complete until Unicode 2.0 - they originated from Japanese industrial standards JIS; The... - [Square Text Generator](https://devtools.surf/tools/square-text-generator/): Render letters as unicode glyphs for banners and bios - [Square Text Generator - use cases](https://devtools.surf/tools/square-text-generator/#use-cases): Content creators building eye-catching social media banners; Streamers creating bold channel point names and chat commands; Marketers crafting attention-grabbing subject lines in... - [Square Text Generator - tips](https://devtools.surf/tools/square-text-generator/#tips): Letters render as filled square emoji-style glyphs for bold visibility; Perfect for creating banner-like text in social media headers; Digits and letters both have square unicode... - [Square Text Generator - fun facts](https://devtools.surf/tools/square-text-generator/#fun-facts): The squared latin letters U+1F130-U+1F149 were added in Unicode 6.0 2010 and are classified as 'Enclosed Alphanumeric Supplement' characters; These squared characters were... - [Superscript & Subscript](https://devtools.surf/tools/superscript-subscript/): Convert letters/digits to or script - CO, HO, x - [Superscript & Subscript - use cases](https://devtools.surf/tools/superscript-subscript/#use-cases): Scientists writing chemical formulas like HO and CO in plain text; Mathematicians expressing exponents like x without LaTeX rendering; Students formatting footnote references as... - [Superscript & Subscript - tips](https://devtools.surf/tools/superscript-subscript/#tips): Type chemical formulas like CO2 and get proper subscript CO output; Mathematical expressions like x2 become x with superscript digits; Not all letters have unicode super/subscript... - [Superscript & Subscript - fun facts](https://devtools.surf/tools/superscript-subscript/#fun-facts): Unicode superscript digits U+2070-U+2079 were among the earliest additions to Unicode 1.0 1991, driven by the need to represent mathematical exponents in plain text; The... - [Emoji Letter Mapper](https://devtools.surf/tools/emoji-letter-mapper/): Replace letters with regional-indicator and symbol emoji - [Emoji Letter Mapper - use cases](https://devtools.surf/tools/emoji-letter-mapper/#use-cases): Social media users creating spaced-out emoji letter text for posts; Discord server owners building decorative channel descriptions; Content creators making attention-grabbing text... - [Emoji Letter Mapper - tips](https://devtools.surf/tools/emoji-letter-mapper/#tips): Each letter is replaced with its regional indicator emoji equivalent; Combine with other unicode tools for layered text effects; Regional indicator pairs form country flag emoji -... - [Emoji Letter Mapper - fun facts](https://devtools.surf/tools/emoji-letter-mapper/#fun-facts): Regional indicator symbols U+1F1E6-U+1F1FF were added in Unicode 6.0 2010 - pairs of these characters combine to form country flag emoji e.g., U+1F1FA + U+1F1F8 = ; There are only... - [Vaporwave Text](https://devtools.surf/tools/vaporwave-text/): Convert ASCII to aesthetic letters - vaporwave vibes - [Vaporwave Text - use cases](https://devtools.surf/tools/vaporwave-text/#use-cases): Social media users creating aesthetic vaporwave-styled posts; Designers building retro-themed text for album art and posters; Content creators adding visual flair to Tumblr and... - [Vaporwave Text - tips](https://devtools.surf/tools/vaporwave-text/#tips): Converts ASCII characters to their fullwidth unicode equivalents; The stretched aesthetic works in any platform that supports unicode; Mix with regular text to create contrast and... - [Vaporwave Text - fun facts](https://devtools.surf/tools/vaporwave-text/#fun-facts): Fullwidth characters U+FF01-U+FF5E were originally created for East Asian typography where Latin characters needed to match the width of CJK ideographs in monospaced layouts; The... - [Cursed Text Generator](https://devtools.surf/tools/cursed-text-generator/): Stack combining marks above/below letters for a glitchy, cursed look - [Cursed Text Generator - use cases](https://devtools.surf/tools/cursed-text-generator/#use-cases): Social media users creating creepy or glitch-themed text for Halloween posts; Game developers testing text rendering edge cases with extreme combining marks; Internet culture... - [Cursed Text Generator - tips](https://devtools.surf/tools/cursed-text-generator/#tips): Stacking intensity controls how many combining marks pile on each character; More combining marks create a taller, more glitchy visual effect; Some platforms limit combining mark... - [Cursed Text Generator - fun facts](https://devtools.surf/tools/cursed-text-generator/#fun-facts): Cursed text exploits Unicode combining diacritical marks U+0300-U+036F - these were designed to stack accents on letters for languages like Vietnamese, not for visual chaos; The... - [Wide Text Generator](https://devtools.surf/tools/wide-text-generator/): Add spaces between every character for a stretched / wide look - [Wide Text Generator - use cases](https://devtools.surf/tools/wide-text-generator/#use-cases): Social media users creating dramatic spaced-out text for emphasis; Designers prototyping letterspace effects without CSS access; Content creators adding visual rhythm to... - [Wide Text Generator - tips](https://devtools.surf/tools/wide-text-generator/#tips): Adds a space between every character for a stretched-out look; Adjust the spacing width by choosing the separator character; Combine with uppercase for maximum dramatic effect in... - [Wide Text Generator - fun facts](https://devtools.surf/tools/wide-text-generator/#fun-facts): Letterspacing also called 'tracking' has been a typographic technique since the invention of movable type - printers physically inserted thin metal spacers between letters; In... ## Encoding - [Base64 Encode](https://devtools.surf/tools/base64-encode/): Encode text or files to Base64 - [Base64 Encode - use cases](https://devtools.surf/tools/base64-encode/#use-cases): Embed images inline in HTML/CSS; Send binary through JSON APIs; Obfuscate-but-not-encrypt debug payloads - [Base64 Encode - tips](https://devtools.surf/tools/base64-encode/#tips): Paste any text including multi-line content; Works for encoding API keys, config values, or binary data as text; Use URL-safe base64 when embedding in query strings - [Base64 Encode - fun facts](https://devtools.surf/tools/base64-encode/#fun-facts): Base64 encoding increases data size by ~33%. It uses 64 characters A-Z, a-z, 0-9, +, / to represent binary data; Base64 was first standardized in RFC 1421 1993 for Privacy... - [Base64 Decode](https://devtools.surf/tools/base64-decode/): Decode Base64 back to text or file - [Base64 Decode - use cases](https://devtools.surf/tools/base64-decode/#use-cases): Decoding Base64-encoded email attachments for inspection; Reading encoded JWT payloads without a full JWT decoder; Extracting binary files embedded as Base64 in JSON responses;... - [Base64 Decode - tips](https://devtools.surf/tools/base64-decode/#tips): Decode Base64 strings from API responses to read payloads; Detect whether the output is text or binary file content; Handle URL-safe Base64 variants with - and _ characters - [Base64 Decode - fun facts](https://devtools.surf/tools/base64-decode/#fun-facts): Base64 encoding was first defined in RFC 1421 in 1993 for Privacy Enhanced Mail PEM, predating its use on the web; Base64 increases data size by approximately 33% because it... - [Hash Generator](https://devtools.surf/tools/hash-generator/): Generate MD5, SHA-1, SHA-256, and SHA-512 hashes from text - [Hash Generator - tips](https://devtools.surf/tools/hash-generator/#tips): Toggle which algorithms to compute; Paste a hash in the verify box to check if it matches; Upload a file to hash its contents - [Hash Generator - fun facts](https://devtools.surf/tools/hash-generator/#fun-facts): SHA-256 produces a 256-bit hash. There are more possible SHA-256 hashes 2^256 than atoms in the observable universe ~10^80; MD5 was broken for collision resistance in 2004 by... - [Number Base Converter](https://devtools.surf/tools/number-base-converter/): Convert between decimal, hex, octal, and binary - [Number Base Converter - use cases](https://devtools.surf/tools/number-base-converter/#use-cases): Converting hex memory addresses for low-level debugging; Translating CSS hex colors to decimal RGB values; Understanding binary flag values in bitfield configurations; Converting... - [Number Base Converter - tips](https://devtools.surf/tools/number-base-converter/#tips): Convert hex color codes to decimal RGB values instantly; Use binary output to understand bitwise operations visually; Enter values with prefixes like 0x or 0b for automatic... - [Number Base Converter - fun facts](https://devtools.surf/tools/number-base-converter/#fun-facts): Hexadecimal notation was popularized by IBM in the 1960s for the System/360, replacing the octal system used by earlier machines; The binary number system was formalized by... - [Timestamp Converter](https://devtools.surf/tools/timestamp-converter/): Convert between Unix epoch, ISO 8601, and human-readable dates - [Timestamp Converter - tips](https://devtools.surf/tools/timestamp-converter/#tips): Click 'Now' to set the current time instantly; All fields sync bidirectionally - edit any one and the rest update; Toggle between seconds and milliseconds mode - [Timestamp Converter - fun facts](https://devtools.surf/tools/timestamp-converter/#fun-facts): Unix time started on January 1, 1970 the 'epoch'. The Year 2038 problem will occur when 32-bit timestamps overflow; The Unix epoch was chosen because it was a recent, round date... - [Base58/Base32/Base85](https://devtools.surf/tools/base58-encoder/): Encode and decode text in Base58, Base32, or Base85 - [Base58/Base32/Base85 - use cases](https://devtools.surf/tools/base58-encoder/#use-cases): Encode data for cryptocurrency address generation; Create compact identifiers safe for case-insensitive systems; Encode binary data for embedding in ASCII protocols; Generate... - [Base58/Base32/Base85 - tips](https://devtools.surf/tools/base58-encoder/#tips): Switch between Base58, Base32, and Base85 encoding modes; Use Base58 for human-friendly encoded strings without ambiguous characters; Decode encoded strings back to plaintext with... - [Base58/Base32/Base85 - fun facts](https://devtools.surf/tools/base58-encoder/#fun-facts): Base58 was invented by Satoshi Nakamoto for Bitcoin addresses, deliberately excluding 0, O, I, and l to avoid visual ambiguity; Base32 encoding uses only A-Z and 2-7, making it... - [Base64URL Encoder](https://devtools.surf/tools/base64url-encoder/): URL-safe base64 - + to - , / to _ , no padding - [Base64URL Encoder - use cases](https://devtools.surf/tools/base64url-encoder/#use-cases): Backend developers encoding JWT payloads for token generation; Frontend devs passing binary data safely in URL query parameters; API developers creating URL-safe identifiers from... - [Base64URL Encoder - tips](https://devtools.surf/tools/base64url-encoder/#tips): Use this instead of standard Base64 when encoding JWT segments or URL params; Check that the output has no +, /, or = characters for URL safety; Compare output with standard... - [Base64URL Encoder - fun facts](https://devtools.surf/tools/base64url-encoder/#fun-facts): Base64URL encoding is defined in RFC 4648 Section 5 2006, specifically designed to be safe in URLs and filenames by replacing + with - and / with _; JWTs use Base64URL not... - [Base64URL Decoder](https://devtools.surf/tools/base64url-decoder/): Decode URL-safe base64 back to UTF-8 text - [Base64URL Decoder - use cases](https://devtools.surf/tools/base64url-decoder/#use-cases): Developers decoding JWT segments to inspect claims without a full JWT debugger; Security analysts examining URL-encoded tokens in suspicious requests; QA engineers verifying that... - [Base64URL Decoder - tips](https://devtools.surf/tools/base64url-decoder/#tips): Paste a Base64URL string without padding and it decodes correctly; Use it to inspect the payload of a JWT token segment; Handles both padded and unpadded Base64URL input... - [Base64URL Decoder - fun facts](https://devtools.surf/tools/base64url-decoder/#fun-facts): Base64URL decoding must handle missing padding - some implementations crash on unpadded input, which is why many libraries add padding before decoding; The Base64 alphabet uses 64... - [Text to Binary](https://devtools.surf/tools/text-to-binary/): Convert UTF-8 text to 0/1 binary - or decode back - [Text to Binary - use cases](https://devtools.surf/tools/text-to-binary/#use-cases): CS students learning how text is represented in binary; Embedded developers inspecting raw byte-level data encoding; CTF players decoding binary-encoded challenge messages;... - [Text to Binary - tips](https://devtools.surf/tools/text-to-binary/#tips): Each ASCII character maps to exactly 8 binary digits; Toggle between encode and decode modes instantly; Use spaces between bytes for readable binary output - [Text to Binary - fun facts](https://devtools.surf/tools/text-to-binary/#fun-facts): The binary number system was formalized by Gottfried Wilhelm Leibniz in 1703, though he credited the ancient Chinese I Ching's hexagram system as inspiration; ASCII was first... - [Text to Hex](https://devtools.surf/tools/text-to-hex/): UTF-8 text to hexadecimal bytes - or decode hex back to text - [Text to Hex - use cases](https://devtools.surf/tools/text-to-hex/#use-cases): Security analysts inspecting hex-encoded payloads in logs; Firmware developers debugging raw memory dump values; Web developers converting color codes between formats; Network... - [Text to Hex - tips](https://devtools.surf/tools/text-to-hex/#tips): Each byte displays as exactly two hex characters; Hex is ideal for inspecting non-printable characters; Decode mode converts hex strings back to readable UTF-8 - [Text to Hex - fun facts](https://devtools.surf/tools/text-to-hex/#fun-facts): Hexadecimal notation became popular in computing in the 1960s because it maps perfectly to 4-bit nibbles - each hex digit represents exactly 4 binary bits; IBM System/360,... - [Text to Octal](https://devtools.surf/tools/text-to-octal/): UTF-8 text to octal digit sequences - or decode octal back - [Text to Octal - use cases](https://devtools.surf/tools/text-to-octal/#use-cases): Unix admins converting file permission values to text; CS students studying base-8 number system encoding; Legacy system maintainers reading octal-based data formats; Developers... - [Text to Octal - tips](https://devtools.surf/tools/text-to-octal/#tips): Each ASCII character maps to a 3-digit octal value; Octal is commonly used in Unix file permission notation; Decode octal sequences back to text for verification - [Text to Octal - fun facts](https://devtools.surf/tools/text-to-octal/#fun-facts): Octal was the dominant number base in early computing because the PDP-8 1965 and other DEC machines used 12-bit words that divided evenly into 4 octal digits; Unix file... - [ASCII85 Encoder](https://devtools.surf/tools/ascii85-encoder/): Adobe ASCII85 base85 for compact binary in PDF/PostScript payloads - [ASCII85 Encoder - use cases](https://devtools.surf/tools/ascii85-encoder/#use-cases): PDF developers encoding binary streams inside document files; PostScript programmers embedding images in print jobs; Data engineers choosing compact encoding for binary payloads;... - [ASCII85 Encoder - tips](https://devtools.surf/tools/ascii85-encoder/#tips): ASCII85 is 20% more compact than base64 encoding; Used natively in PDF and PostScript file formats; Wrap output in <~ and ~> delimiters for Adobe compatibility - [ASCII85 Encoder - fun facts](https://devtools.surf/tools/ascii85-encoder/#fun-facts): ASCII85 was developed by Paul Rutter for the btoa utility in 1984, encoding every 4 bytes of binary data into 5 ASCII characters - an 80% efficiency ratio; Adobe adopted ASCII85... ## Generators - [UUID Generator](https://devtools.surf/tools/uuid-generator/): Generate v4 UUIDs - single or bulk - [UUID Generator - tips](https://devtools.surf/tools/uuid-generator/#tips): Generate up to 100 UUIDs at once; Toggle uppercase or remove dashes for different formats; Each UUID has a copy button on hover - [UUID Generator - fun facts](https://devtools.surf/tools/uuid-generator/#fun-facts): UUID v4 uses 122 random bits, giving 5.3 x 10^36 possible values. - [ULID Generator](https://devtools.surf/tools/ulid-generator/): Generate sortable ULIDs Universally Unique Lexicographically Sortable IDs - [ULID Generator - use cases](https://devtools.surf/tools/ulid-generator/#use-cases): Generating time-sortable primary keys for distributed databases; Creating event IDs that naturally sort by creation time; Replacing UUIDs in systems that benefit from... - [ULID Generator - tips](https://devtools.surf/tools/ulid-generator/#tips): Generate multiple ULIDs at once for batch operations; ULIDs sort lexicographically by creation time automatically; Use ULIDs as database primary keys for time-ordered inserts - [ULID Generator - fun facts](https://devtools.surf/tools/ulid-generator/#fun-facts): ULID was proposed by Alizain Feerasta in 2016 as a sortable alternative to UUID, encoding a 48-bit timestamp and 80 bits of randomness; ULIDs use Crockford's Base32 encoding... - [Password Generator](https://devtools.surf/tools/password-generator/): Generate secure random passwords with custom rules - [Password Generator - use cases](https://devtools.surf/tools/password-generator/#use-cases): New account signups; API key roots; Database credential rotation - [Password Generator - tips](https://devtools.surf/tools/password-generator/#tips): Use 16+ characters for strong passwords; Enable 'Exclude ambiguous' to avoid confusing characters like 0/O and 1/l; Generate multiple passwords and pick the one you like - [Password Generator - fun facts](https://devtools.surf/tools/password-generator/#fun-facts): A 20-character password with mixed case, digits, and symbols would take ~7 octillion years to brute-force at 100 billion guesses per second; The most common password in data... - [cURL to Code](https://devtools.surf/tools/curl-to-code/): Convert cURL commands to fetch, axios, Python requests, and more - [cURL to Code - use cases](https://devtools.surf/tools/curl-to-code/#use-cases): Converting API documentation curl examples to production code; Translating browser-copied network requests into application code; Porting shell-script API calls to Python or... - [cURL to Code - tips](https://devtools.surf/tools/curl-to-code/#tips): Paste curl commands from browser DevTools network tab directly; Choose between fetch, axios, or Python requests output; Includes headers and body in the converted code snippet - [cURL to Code - fun facts](https://devtools.surf/tools/curl-to-code/#fun-facts): cURL was first released by Daniel Stenberg on March 20, 1998, and is now installed on over 10 billion devices worldwide; The name cURL stands for 'Client URL' and was originally... - [Cron Expression Parser](https://devtools.surf/tools/cron-expression-parser/): Describe cron expressions in plain English with next run times - [Cron Expression Parser - use cases](https://devtools.surf/tools/cron-expression-parser/#use-cases): Verify CI/CD pipeline schedules before deploying; Debug crontab entries that aren't firing when expected; Convert human-readable schedules into cron syntax for GitHub Actions or... - [Cron Expression Parser - tips](https://devtools.surf/tools/cron-expression-parser/#tips): Click any preset to fill common patterns like daily, hourly, or weekly; Edit individual fields minute, hour, day, month, weekday separately for precise control; See the next 10... - [Cron Expression Parser - fun facts](https://devtools.surf/tools/cron-expression-parser/#fun-facts): Cron was written by Ken Thompson for Unix in the 1970s. The name comes from Chronos, the Greek personification of time; The modern vixie-cron written by Paul Vixie in 1987 is... - [SQL Formatter](https://devtools.surf/tools/sql-formatter/): Format and prettify SQL queries - [SQL Formatter - use cases](https://devtools.surf/tools/sql-formatter/#use-cases): Formatting complex ORM-generated queries for debugging; Standardizing SQL style across a team's migration files; Making stored procedures readable during code review; Cleaning up... - [SQL Formatter - tips](https://devtools.surf/tools/sql-formatter/#tips): Format minified SQL queries for readable code reviews; Uppercase SQL keywords for consistent team style conventions; Paste complex joins to visually verify table relationships - [SQL Formatter - fun facts](https://devtools.surf/tools/sql-formatter/#fun-facts): SQL was originally called SEQUEL Structured English Query Language at IBM in 1974 but was renamed due to a trademark conflict; The SQL standard ISO 9075 has grown from 600 pages... - [GraphQL Formatter](https://devtools.surf/tools/graphql-formatter/): Format and prettify GraphQL queries and schemas - [GraphQL Formatter - use cases](https://devtools.surf/tools/graphql-formatter/#use-cases): Formatting auto-generated GraphQL queries for code review; Cleaning up schema definitions for API documentation sites; Prettifying copied queries from GraphQL playground tools;... - [GraphQL Formatter - tips](https://devtools.surf/tools/graphql-formatter/#tips): Format nested queries to clearly show field hierarchy; Clean up minified schema definitions for documentation; Validate query structure by checking for syntax errors - [GraphQL Formatter - fun facts](https://devtools.surf/tools/graphql-formatter/#fun-facts): GraphQL was developed internally at Facebook in 2012 by Lee Byron, Dan Schafer, and Nick Schrock, and open-sourced in 2015; Despite its name, GraphQL has no relation to graph... - [JSON Schema Generator](https://devtools.surf/tools/json-schema-generator/): Generate JSON Schema from a sample JSON object - [JSON Schema Generator - use cases](https://devtools.surf/tools/json-schema-generator/#use-cases): Generating validation schemas from existing API responses; Creating OpenAPI spec components from sample JSON payloads; Building form validation rules from backend data models;... - [JSON Schema Generator - tips](https://devtools.surf/tools/json-schema-generator/#tips): Paste a sample API response to auto-generate its schema; Review inferred types and add constraints like min/max manually; Use the generated schema for request validation middleware - [JSON Schema Generator - fun facts](https://devtools.surf/tools/json-schema-generator/#fun-facts): JSON Schema was first proposed by Kris Zyp in 2009 and reached its most recent stable draft 2020-12 after 11 years of evolution; JSON Schema is used by the OpenAPI Specification... - [TypeScript Interface Generator](https://devtools.surf/tools/ts-interface-generator/): Generate TypeScript interfaces from JSON data - [TypeScript Interface Generator - use cases](https://devtools.surf/tools/ts-interface-generator/#use-cases): Generating type-safe interfaces from REST API response samples; Creating TypeScript types for third-party API integrations; Bootstrapping type definitions for JSON configuration... - [TypeScript Interface Generator - tips](https://devtools.surf/tools/ts-interface-generator/#tips): Paste a JSON API response to generate matching interfaces; Review optional fields and adjust nullability as needed; Use the output as a starting point for strict type definitions - [TypeScript Interface Generator - fun facts](https://devtools.surf/tools/ts-interface-generator/#fun-facts): TypeScript was created by Anders Hejlsberg at Microsoft and publicly released on October 1, 2012, as version 0.8; Anders Hejlsberg also created Turbo Pascal and was the lead... - [Mock Data Generator](https://devtools.surf/tools/mock-data-generator/): Generate fake names, emails, addresses, and more in JSON or CSV - [Mock Data Generator - tips](https://devtools.surf/tools/mock-data-generator/#tips): Build your schema by clicking field type chips; Rename columns by editing the field names; Export as JSON, CSV, or SQL INSERT statements - [Mock Data Generator - fun facts](https://devtools.surf/tools/mock-data-generator/#fun-facts): The 'faker' libraries used to generate test data contain dictionaries of ~4,500 first names, ~2,000 last names, and ~500 company names; The original faker.js library was deleted... - [QR Code Generator](https://devtools.surf/tools/qr-code-generator/): Generate QR codes from text or URLs - [QR Code Generator - tips](https://devtools.surf/tools/qr-code-generator/#tips): Works with URLs, text, WiFi credentials, or vCards; Customize foreground and background colors; Adjust size up to 800px for print quality - [QR Code Generator - fun facts](https://devtools.surf/tools/qr-code-generator/#fun-facts): QR codes were invented in 1994 by Denso Wave for tracking car parts in manufacturing. - [Chmod Calculator](https://devtools.surf/tools/chmod-calculator/): Convert between symbolic and numeric Unix file permissions - [Chmod Calculator - use cases](https://devtools.surf/tools/chmod-calculator/#use-cases): Calculating deployment script permissions for CI/CD pipelines; Setting correct permissions for SSH key files 600 or 400; Converting symbolic permissions from ls -la output to... - [Chmod Calculator - tips](https://devtools.surf/tools/chmod-calculator/#tips): Toggle permission checkboxes to see the numeric value update; Convert between symbolic notation like rwxr-xr-x and 755; Verify directory permissions separately from file... - [Chmod Calculator - fun facts](https://devtools.surf/tools/chmod-calculator/#fun-facts): Unix file permissions were designed by Ken Thompson and Dennis Ritchie for the first version of Unix at Bell Labs in 1971; The sticky bit 1000 was originally used to keep programs... - [.gitignore Builder](https://devtools.surf/tools/gitignore-builder/): Build a .gitignore from curated language/framework templates - [.gitignore Builder - use cases](https://devtools.surf/tools/gitignore-builder/#use-cases): Bootstrap a .gitignore for a new project in seconds; Combine templates for polyglot or monorepo repositories; Update legacy .gitignore files with modern framework patterns; Ensure... - [.gitignore Builder - tips](https://devtools.surf/tools/gitignore-builder/#tips): Select your language and framework to get a tailored template; Combine multiple templates for monorepo setups; Preview the generated .gitignore before downloading - [.gitignore Builder - fun facts](https://devtools.surf/tools/gitignore-builder/#fun-facts): GitHub maintains the github/gitignore repository with over 160 language-specific templates, contributed by thousands of developers since 2010; Git introduced .gitignore support in... - [Unix Cron Visualizer](https://devtools.surf/tools/unix-cron-visualizer/): Visualize cron schedules as a timeline of next executions - [Unix Cron Visualizer - use cases](https://devtools.surf/tools/unix-cron-visualizer/#use-cases): Verify scheduled job timing before deploying to production; Debug why a cron job is not running at expected times; Plan maintenance window schedules with visual confirmation;... - [Unix Cron Visualizer - tips](https://devtools.surf/tools/unix-cron-visualizer/#tips): See the next 10 execution times for any cron expression; Validate complex expressions with day-of-week fields; Hover over each field to see which values are active - [Unix Cron Visualizer - fun facts](https://devtools.surf/tools/unix-cron-visualizer/#fun-facts): Cron was written by Ken Thompson for Unix Version 7 in 1979; the modern Vixie cron, written by Paul Vixie, became standard in 1987; The cron expression '* * * * *' fires every... - [Chmod to English](https://devtools.surf/tools/chmod-to-english/): Convert numeric chmod values to human-readable permission descriptions - [Chmod to English - use cases](https://devtools.surf/tools/chmod-to-english/#use-cases): Decode permission errors during server deployment; Document file permission requirements in setup guides; Teach new developers Unix permission fundamentals; Verify CI/CD script... - [Chmod to English - tips](https://devtools.surf/tools/chmod-to-english/#tips): Enter numeric codes like 755 to see who can read, write, execute; Learn the octal permission system through plain English output; Reverse-lookup: describe desired permissions to... - [Chmod to English - fun facts](https://devtools.surf/tools/chmod-to-english/#fun-facts): Unix file permissions were designed by Ken Thompson and Dennis Ritchie for the first Unix system at Bell Labs in 1971; The permission value 777 grants full access to everyone and... - [Privacy Policy Generator](https://devtools.surf/tools/privacy-policy-generator/): Generate a privacy policy from your app name, URL, and data practices - [Privacy Policy Generator - use cases](https://devtools.surf/tools/privacy-policy-generator/#use-cases): Generating a compliant privacy policy for a new SaaS launch; Creating a baseline policy for an indie app store submission; Updating data practices documentation after adding... - [Privacy Policy Generator - tips](https://devtools.surf/tools/privacy-policy-generator/#tips): Fill in all data practice checkboxes for completeness; Review the generated policy and customize sections for your needs; Update the policy whenever you add new third-party... - [Privacy Policy Generator - fun facts](https://devtools.surf/tools/privacy-policy-generator/#fun-facts): The EU's General Data Protection Regulation GDPR took effect on May 25, 2018, and can fine companies up to 4% of annual global turnover for violations; California's CCPA,... - [Crontab Generator](https://devtools.surf/tools/crontab-generator/): Build cron schedules visually with dropdowns for each field - [Crontab Generator - use cases](https://devtools.surf/tools/crontab-generator/#use-cases): Building cron schedules for nightly database backup jobs; Scheduling CI/CD pipeline runs without memorizing cron syntax; Setting up log rotation intervals for production servers;... - [Crontab Generator - tips](https://devtools.surf/tools/crontab-generator/#tips): Use the dropdown selectors instead of memorizing field positions; Preview the next 5 run times to verify your schedule; Copy the generated expression directly into crontab -e - [Crontab Generator - fun facts](https://devtools.surf/tools/crontab-generator/#fun-facts): Cron was written by Ken Thompson for Version 7 Unix in 1979 and has remained virtually unchanged in syntax for over 45 years; The name 'cron' comes from the Greek word 'chronos'... - [Random String Generator](https://devtools.surf/tools/random-string-generator/): Secure random strings - hex, base64, base58, symbols, custom length - [Random String Generator - tips](https://devtools.surf/tools/random-string-generator/#tips): Set charset=alnum|hex|HEX|base58|base64|numeric|alpha|symbols; Up to 500 strings per run, up to 512 chars each; base58 strips 0, O, I, l to avoid visual ambiguity - [Random String Generator - fun facts](https://devtools.surf/tools/random-string-generator/#fun-facts): base58 was invented for Bitcoin addresses - it's base64 minus the characters that look alike 0/O, 1/I/l and the non-alphanumeric +/ symbols; The Web Crypto API's getRandomValues... - [Fake Name Generator](https://devtools.surf/tools/fake-name-generator/): Bulk fake first+last names for test fixtures - famous tech names pool - [Fake Name Generator - use cases](https://devtools.surf/tools/fake-name-generator/#use-cases): QA engineers populating user tables for integration tests; Demo builders filling CRM dashboards with realistic data; Educators creating sample student rosters for teaching apps;... - [Fake Name Generator - tips](https://devtools.surf/tools/fake-name-generator/#tips): Generate in bulk to fill entire test fixture files; Names draw from a tech-famous pool for fun seed data; Copy output directly into JSON arrays for API mocks - [Fake Name Generator - fun facts](https://devtools.surf/tools/fake-name-generator/#fun-facts): The most common surname in the world is Wang, shared by over 92 million people in China alone according to a 2019 census analysis; The U.S. - [Fake Address Generator](https://devtools.surf/tools/fake-address-generator/): Bulk US-style fake addresses for seeding dev databases - [Fake Address Generator - use cases](https://devtools.surf/tools/fake-address-generator/#use-cases): Backend devs seeding local Postgres databases for testing; CI pipelines generating fresh address fixtures per build; Compliance teams testing address validation APIs safely; Demo... - [Fake Address Generator - tips](https://devtools.surf/tools/fake-address-generator/#tips): Use bulk mode to seed entire address tables at once; Output matches US postal format with ZIP+4 patterns; Pair with fake name generator for complete user records - [Fake Address Generator - fun facts](https://devtools.surf/tools/fake-address-generator/#fun-facts): The U.S. Postal Service processes about 425 million pieces of mail per day, making standardized address formats critical - the CASS system validates 160+ million addresses; ZIP... - [Fake Phone Generator](https://devtools.surf/tools/fake-phone-generator/): Bulk fake phone numbers in US / UK / E.164 formats - [Fake Phone Generator - use cases](https://devtools.surf/tools/fake-phone-generator/#use-cases): Mobile devs testing SMS verification flows with fake numbers; QA teams validating international phone format parsing; Salesforce admins populating sandbox contact records; Load... - [Fake Phone Generator - tips](https://devtools.surf/tools/fake-phone-generator/#tips): Switch between US, UK, and E.164 output formats; E.164 format ensures compatibility with Twilio and SMS APIs; Generate batches to stress-test phone validation logic - [Fake Phone Generator - fun facts](https://devtools.surf/tools/fake-phone-generator/#fun-facts): The ITU E.164 standard allows phone numbers up to 15 digits, but the shortest valid numbers are just 3 digits - emergency codes like 911 or 112; The 555 prefix 555-0100 to... - [Test Credit Card Generator](https://devtools.surf/tools/test-credit-card-generator/): Luhn-valid dev cards for Visa/MC/Amex/Discover/JCB/Diners - [Test Credit Card Generator - tips](https://devtools.surf/tools/test-credit-card-generator/#tips): Brand prefix determines the IIN range - Visa starts with 4, Mastercard 5, Amex 34/37; All numbers pass Luhn check but are NOT backed by real accounts; Never use these against... - [Test Credit Card Generator - fun facts](https://devtools.surf/tools/test-credit-card-generator/#fun-facts): The Luhn algorithm was patented in 1960 by Hans Peter Luhn of IBM. - [Test IBAN Generator](https://devtools.surf/tools/iban-test-generator/): Synthesize IBANs with valid ISO 13616 checksums per country - [Test IBAN Generator - use cases](https://devtools.surf/tools/iban-test-generator/#use-cases): Fintech developers testing cross-border payment forms; QA engineers validating IBAN format parsers per country; Banking app teams seeding test accounts with valid checksums;... - [Test IBAN Generator - tips](https://devtools.surf/tools/iban-test-generator/#tips): Select specific countries for region-accurate test IBANs; Generated checksums follow ISO 13616 mod-97 validation; Use these IBANs to test payment form validation logic - [Test IBAN Generator - fun facts](https://devtools.surf/tools/iban-test-generator/#fun-facts): IBAN was first introduced in 1997 by the European Committee for Banking Standards ECBS and later adopted as ISO 13616; today over 80 countries use it; The longest IBANs belong to... - [Test VIN Generator](https://devtools.surf/tools/vin-generator/): Random 17-char VINs with valid position-9 check digit - [Test VIN Generator - use cases](https://devtools.surf/tools/vin-generator/#use-cases): Auto dealership devs testing inventory management systems; Insurance app QA validating vehicle lookup integrations; DMV software teams generating test registration records;... - [Test VIN Generator - tips](https://devtools.surf/tools/vin-generator/#tips): Every generated VIN includes a valid position-9 check digit; Use these to test automotive form validation rules; VINs follow the 17-character ISO 3779 standard format - [Test VIN Generator - fun facts](https://devtools.surf/tools/vin-generator/#fun-facts): The modern 17-character VIN standard ISO 3779 was adopted in 1981 by the U.S. - [Barcode Generator](https://devtools.surf/tools/barcode-generator/): Generate CODE-128 barcode PNGs from any text - client-side canvas - [Barcode Generator - use cases](https://devtools.surf/tools/barcode-generator/#use-cases): Warehouse devs generating asset tracking labels; Retail teams creating product barcode sheets for inventory; Event organizers printing scannable ticket barcodes; Library systems... - [Barcode Generator - tips](https://devtools.surf/tools/barcode-generator/#tips): CODE-128 supports the full ASCII character set 0-127; Download barcode PNGs directly for label printing; All rendering happens client-side on HTML5 canvas - [Barcode Generator - fun facts](https://devtools.surf/tools/barcode-generator/#fun-facts): The first barcode patent was filed in 1952 by Norman Woodland and Bernard Silver, inspired by Morse code - they extended dots and dashes into thin and thick lines; The first... - [Data URI Generator](https://devtools.surf/tools/data-uri-generator/): Wrap any text or file contents into a base64 data: URI - [Data URI Generator - use cases](https://devtools.surf/tools/data-uri-generator/#use-cases): Frontend devs inlining small icons to reduce HTTP requests; Email template builders embedding images that survive forwarding; CSS authors embedding SVG backgrounds without... - [Data URI Generator - tips](https://devtools.surf/tools/data-uri-generator/#tips): Inline small icons as data URIs to eliminate HTTP requests; Keep data URIs under 32KB for optimal browser performance; Use for embedding SVGs directly in CSS background-image - [Data URI Generator - fun facts](https://devtools.surf/tools/data-uri-generator/#fun-facts): The data: URI scheme was formally defined in RFC 2397, published in August 1998 by Larry Masinter at Xerox PARC; Internet Explorer did not support data URIs until version 8 2009,... - [API Key Generator](https://devtools.surf/tools/api-key-generator/): Secure random API keys with prefix sk_, pk_, whsec_ - base62 or hex - [API Key Generator - use cases](https://devtools.surf/tools/api-key-generator/#use-cases): Backend devs generating secure keys for new API services; DevOps engineers provisioning keys for CI/CD pipeline auth; SaaS founders creating initial API credentials for beta... - [API Key Generator - tips](https://devtools.surf/tools/api-key-generator/#tips): Choose a prefix like sk_ or pk_ to signal key type; Switch between base62 and hex encoding for your stack; Generate multiple keys at once for multi-tenant setups - [API Key Generator - fun facts](https://devtools.surf/tools/api-key-generator/#fun-facts): Stripe popularized the sk_/pk_ prefix convention around 2011, making it easy to distinguish secret keys from publishable keys - now an industry standard; A 32-character base62 key... - [Bcrypt Demo Hash](https://devtools.surf/tools/bcrypt-generator/): Generate a bcrypt-style hash preview - configurable cost rounds 4-14 - [Bcrypt Demo Hash - use cases](https://devtools.surf/tools/bcrypt-generator/#use-cases): Backend devs previewing bcrypt output for documentation; Security engineers comparing cost factor timing tradeoffs; QA teams generating expected hash values for auth test suites;... - [Bcrypt Demo Hash - tips](https://devtools.surf/tools/bcrypt-generator/#tips): Cost factor 10 is the standard balance of speed and security; Higher cost rounds double computation time per increment; Use the output format to document expected hashes in tests - [Bcrypt Demo Hash - fun facts](https://devtools.surf/tools/bcrypt-generator/#fun-facts): Bcrypt was designed by Niels Provos and David Mazieres in 1999, based on the Blowfish cipher - it was specifically engineered to be slow to resist brute-force attacks; Each... - [Argon2 Demo Hash](https://devtools.surf/tools/argon2-generator/): Generate an argon2id PHC-formatted hash preview for docs / fixtures - [Argon2 Demo Hash - use cases](https://devtools.surf/tools/argon2-generator/#use-cases): Security engineers generating reference hashes for documentation; Auth system devs testing PHC-format hash parsing; DevOps teams tuning memory and iteration parameters for... - [Argon2 Demo Hash - tips](https://devtools.surf/tools/argon2-generator/#tips): Use argon2id variant for the best hybrid attack resistance; Adjust memory cost to match your server's RAM constraints; Output follows the PHC string format for direct storage - [Argon2 Demo Hash - fun facts](https://devtools.surf/tools/argon2-generator/#fun-facts): Argon2 won the Password Hashing Competition PHC in July 2015, beating 23 other submissions over a two-year evaluation by a panel of cryptography experts; Argon2id combines two... - [Shield Badge Generator](https://devtools.surf/tools/shield-badge-generator/): Build Shields.io README badges - label, message, color, logo, style - [Shield Badge Generator - use cases](https://devtools.surf/tools/shield-badge-generator/#use-cases): Open-source maintainers adding build status badges to READMEs; Package authors displaying download counts and version numbers; Teams showing code coverage percentages on project... - [Shield Badge Generator - tips](https://devtools.surf/tools/shield-badge-generator/#tips): Add a logo parameter for brand icons like npm or GitHub; Choose flat-square style for minimal README aesthetics; Preview the badge live before copying the Shields.io URL - [Shield Badge Generator - fun facts](https://devtools.surf/tools/shield-badge-generator/#fun-facts): Shields.io was created by Thaddee Tyl in 2013 and now serves over 1.5 billion badge images per month from its CDN; The project standardized badge formats across GitHub, replacing... - [README.md Generator](https://devtools.surf/tools/readme-md-generator/): Starter README template with title, description, install, usage, license - [README.md Generator - use cases](https://devtools.surf/tools/readme-md-generator/#use-cases): New project creators bootstrapping documentation from scratch; Open-source contributors standardizing project landing pages; Hackathon teams quickly generating presentable project... - [README.md Generator - tips](https://devtools.surf/tools/readme-md-generator/#tips): Fill in the template sections to avoid blank README syndrome; Include install and usage sections for contributor onboarding; Add a license section to clarify open-source terms... - [README.md Generator - fun facts](https://devtools.surf/tools/readme-md-generator/#fun-facts): GitHub added automatic README rendering in April 2009, but the convention of including a README file dates back to the 1970s in DEC PDP-10 software distributions; The .md... - [.editorconfig Generator](https://devtools.surf/tools/editorconfig-generator/): Tab/space indent, EOL, charset rules - one config for every editor - [.editorconfig Generator - use cases](https://devtools.surf/tools/editorconfig-generator/#use-cases): Teams enforcing consistent indent style across all editors; Open-source projects preventing formatting-only pull requests; Polyglot repos setting different indent rules per... - [.editorconfig Generator - tips](https://devtools.surf/tools/editorconfig-generator/#tips): Set root = true to prevent parent directory inheritance; Mix tab and space rules per file type in one config; Supports every major editor including VS Code and JetBrains - [.editorconfig Generator - fun facts](https://devtools.surf/tools/editorconfig-generator/#fun-facts): EditorConfig was created by Trey Hunner in 2011 to solve the 'tabs vs. - [.prettierrc Generator](https://devtools.surf/tools/prettier-config/): Build a Prettier config - semi, quote style, trailing comma, width - [.prettierrc Generator - use cases](https://devtools.surf/tools/prettier-config/#use-cases): Teams bootstrapping consistent formatting for new TypeScript projects; Open-source maintainers adding opinionated format configs to repos; Senior devs aligning prettier rules... - [.prettierrc Generator - tips](https://devtools.surf/tools/prettier-config/#tips): Set printWidth to 100 for modern widescreen monitors; Toggle trailingComma to 'all' for cleaner git diffs; Export as JSON or YAML depending on your project convention - [.prettierrc Generator - fun facts](https://devtools.surf/tools/prettier-config/#fun-facts): Prettier was created by James Long and first released in January 2017, quickly becoming the most popular code formatter with over 48 million weekly npm downloads; Prettier... - [.eslintrc Generator](https://devtools.surf/tools/eslint-config/): ESLint config for Node / TypeScript / React - commonjs output - [.eslintrc Generator - use cases](https://devtools.surf/tools/eslint-config/#use-cases): Frontend leads initializing lint configs for new React projects; Backend devs setting up Node.js linting with TypeScript support; Teams migrating from TSLint to ESLint with preset... - [.eslintrc Generator - tips](https://devtools.surf/tools/eslint-config/#tips): Select TypeScript preset to include @typescript-eslint rules; Add React plugin for JSX and hooks linting rules; Output is CommonJS format for maximum ESLint compatibility - [.eslintrc Generator - fun facts](https://devtools.surf/tools/eslint-config/#fun-facts): ESLint was created by Nicholas Zakas in June 2013 as a fully pluggable alternative to JSHint, which had limited extensibility; ESLint's plugin ecosystem has over 3,000 published... - [CHANGELOG.md Generator](https://devtools.surf/tools/changelog-md-generator/): Keep a Changelog starter with Unreleased + first version section - [CHANGELOG.md Generator - use cases](https://devtools.surf/tools/changelog-md-generator/#use-cases): Maintainers starting a changelog for their first public release; Release managers documenting breaking changes for major versions; Teams adopting Keep a Changelog format across... - [CHANGELOG.md Generator - tips](https://devtools.surf/tools/changelog-md-generator/#tips): Start with an Unreleased section for ongoing changes; Follow Keep a Changelog format for community recognition; Link version headers to git comparison URLs for traceability - [CHANGELOG.md Generator - fun facts](https://devtools.surf/tools/changelog-md-generator/#fun-facts): The 'Keep a Changelog' format was created by Olivier Lacan in 2014 and has been adopted by thousands of open-source projects as a de facto standard; Semantic Versioning SemVer,... - [LICENSE File Generator](https://devtools.surf/tools/license-file-generator/): MIT, Apache 2.0, BSD 3-Clause, GPL 3.0, Unlicense - year + holder - [LICENSE File Generator - tips](https://devtools.surf/tools/license-file-generator/#tips): MIT is the most permissive - recommended for open-source libraries; Apache 2.0 adds an explicit patent grant - good for corporate contributors; GPL 3.0 requires derivative works... - [LICENSE File Generator - fun facts](https://devtools.surf/tools/license-file-generator/#fun-facts): The MIT license has ~30% of all GitHub repos - by far the most popular open-source license; The 'BSD vs GPL' debate in the 1990s shaped the entire open-source movement. - [Dockerfile Generator](https://devtools.surf/tools/dockerfile-generator/): Multi-stage Dockerfile for Node / Python / Go - production-ready - [Dockerfile Generator - tips](https://devtools.surf/tools/dockerfile-generator/#tips): Multi-stage builds dramatically shrink final image size; The Node template uses npm ci for reproducible builds; The Go template uses distroless for minimal attack surface - [Dockerfile Generator - fun facts](https://devtools.surf/tools/dockerfile-generator/#fun-facts): Docker images are stored as tar archives of layer diffs - pulling an image downloads only the layers you don't already have locally; The Docker registry protocol is so simple that... - [docker-compose.yml Generator](https://devtools.surf/tools/docker-compose-generator/): Wire up api + postgres + redis + mongo into a single compose file - [docker-compose.yml Generator - use cases](https://devtools.surf/tools/docker-compose-generator/#use-cases): Backend devs scaffolding local development environments quickly; Microservice teams defining multi-container app stacks; DevOps engineers creating reproducible staging... - [docker-compose.yml Generator - tips](https://devtools.surf/tools/docker-compose-generator/#tips): Wire up api + postgres + redis in a single compose file; Set depends_on to control service startup ordering; Mount volumes for database persistence across restarts - [docker-compose.yml Generator - fun facts](https://devtools.surf/tools/docker-compose-generator/#fun-facts): Docker Compose was originally a separate Python project called Fig, created by Orchard Laboratories in 2013; Docker Inc. - [Makefile Generator](https://devtools.surf/tools/makefile-generator/): Language-aware Makefile for Node / Python / Go - install/dev/test/build - [Makefile Generator - use cases](https://devtools.surf/tools/makefile-generator/#use-cases): Go developers defining standard build/test/lint targets; Python teams wrapping virtualenv and pytest commands; Node.js projects creating shorthand for npm script chains; Polyglot... - [Makefile Generator - tips](https://devtools.surf/tools/makefile-generator/#tips): Select your language to get idiomatic build targets; Common targets include install, dev, test, and build; Use .PHONY declarations for non-file targets to avoid conflicts - [Makefile Generator - fun facts](https://devtools.surf/tools/makefile-generator/#fun-facts): Make was created by Stuart Feldman at Bell Labs in April 1976 - he wrote it in a weekend and it has remained fundamentally unchanged for nearly 50 years; GNU Make, the most widely... - [.gitignore Templates](https://devtools.surf/tools/gitignore-templates/): Combine templates - node, python, go, rust, java, macos, windows, vscode - [.gitignore Templates - use cases](https://devtools.surf/tools/gitignore-templates/#use-cases): New project creators generating comprehensive ignore rules instantly; Polyglot teams combining Node, Python, and Go ignore patterns; Open-source maintainers preventing IDE config... - [.gitignore Templates - tips](https://devtools.surf/tools/gitignore-templates/#tips): Combine multiple templates for polyglot repositories; Include OS-specific templates like macOS and Windows; Add IDE templates vscode, jetbrains for editor artifacts - [.gitignore Templates - fun facts](https://devtools.surf/tools/gitignore-templates/#fun-facts): GitHub maintains the official gitignore template repository github/gitignore with over 160,000 stars - it's one of the most-starred repos on the platform; Git's .gitignore support... - [Passphrase Generator EFF](https://devtools.surf/tools/passphrase-generator/): Memorable multi-word passphrases from a 300-word EFF-style list - [Passphrase Generator EFF - tips](https://devtools.surf/tools/passphrase-generator/#tips): Uses a 300-word EFF-style long list for memorability; 4 words 32 bits of entropy - good enough for most threat models; Add a digit and capitals for ~40 bits - [Passphrase Generator EFF - fun facts](https://devtools.surf/tools/passphrase-generator/#fun-facts): xkcd #936 'correct horse battery staple' popularized passphrases. ## Color - [Color Converter](https://devtools.surf/tools/color-converter/): Convert between HEX, RGB, HSL, OKLCH, and Tailwind colors - [Color Converter - tips](https://devtools.surf/tools/color-converter/#tips): Click the color picker or type a hex value; Shows HEX, RGB, RGBA, HSL, and CSS variable formats; Each format has its own copy button - [Color Converter - fun facts](https://devtools.surf/tools/color-converter/#fun-facts): The human eye can distinguish approximately 10 million different colors, but most monitors can only display about 16.7 million 24-bit color; Hex color codes were introduced in... - [Color Palette Generator](https://devtools.surf/tools/color-palette-generator/): Generate complementary, analogous, and triadic color palettes - [Color Palette Generator - use cases](https://devtools.surf/tools/color-palette-generator/#use-cases): Building design system color tokens from a primary brand color; Exploring complementary colors for accessible UI themes; Generating dark mode palettes based on existing light... - [Color Palette Generator - tips](https://devtools.surf/tools/color-palette-generator/#tips): Start with a brand color to generate matching palettes; Try triadic schemes for vibrant, high-contrast combinations; Use analogous palettes for harmonious, subtle color schemes - [Color Palette Generator - fun facts](https://devtools.surf/tools/color-palette-generator/#fun-facts): Color wheel theory was established by Isaac Newton in 1704 when he published 'Opticks' and arranged colors in a circle; The Pantone Matching System, created in 1963 by Lawrence... - [Contrast Checker](https://devtools.surf/tools/contrast-checker/): Check WCAG AA/AAA contrast ratio between two colors - [Contrast Checker - use cases](https://devtools.surf/tools/contrast-checker/#use-cases): Verifying brand colors meet WCAG accessibility requirements; Testing text readability on colored backgrounds for UI designs; Auditing existing websites for accessibility... - [Contrast Checker - tips](https://devtools.surf/tools/contrast-checker/#tips): Aim for 4.5:1 ratio minimum to meet WCAG AA standards; Test both large text and normal text contrast requirements; Check your color pairs against both AA and AAA compliance levels - [Contrast Checker - fun facts](https://devtools.surf/tools/contrast-checker/#fun-facts): WCAG 2.0 was published on December 11, 2008, establishing the 4.5:1 contrast ratio requirement that is now law in many countries; The contrast ratio formula uses relative... - [Gradient Generator](https://devtools.surf/tools/gradient-generator/): Design CSS/SVG gradients and export as CSS, SVG, or Figma tokens - [Gradient Generator - use cases](https://devtools.surf/tools/gradient-generator/#use-cases): Design hero section backgrounds for landing pages; Generate gradient tokens for design system libraries; Create branded gradient overlays for image components; Export gradient CSS... - [Gradient Generator - tips](https://devtools.surf/tools/gradient-generator/#tips): Add multiple color stops to create complex gradient effects; Export your gradient as CSS, SVG, or Figma design tokens; Adjust the gradient angle or switch between linear and radial - [Gradient Generator - fun facts](https://devtools.surf/tools/gradient-generator/#fun-facts): CSS gradients were first implemented by WebKit in 2008 using a proprietary syntax; the standard linear-gradient syntax was finalized in CSS3 in 2012; Instagram's iconic gradient... - [Color Contrast Matrix](https://devtools.surf/tools/color-contrast-matrix/): Test WCAG contrast ratios for every color pair in a palette - [Color Contrast Matrix - use cases](https://devtools.surf/tools/color-contrast-matrix/#use-cases): Auditing a design system palette for WCAG 2.1 compliance; Testing all color pairings before a brand refresh; Generating accessibility reports for client deliverables; Validating... - [Color Contrast Matrix - tips](https://devtools.surf/tools/color-contrast-matrix/#tips): Add your full brand palette to test all combinations at once; Look for AAA ratings for body text and AA for large headings; Export the matrix as a reference for your design system... - [Color Contrast Matrix - fun facts](https://devtools.surf/tools/color-contrast-matrix/#fun-facts): WCAG 2.0 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text, based on research by the W3C's Web Accessibility Initiative; Approximately 300 million... - [Hex to Tailwind](https://devtools.surf/tools/colors-to-tailwind/): Map a hex/rgb color to the nearest Tailwind class - [Hex to Tailwind - use cases](https://devtools.surf/tools/colors-to-tailwind/#use-cases): Mapping brand colors to the nearest Tailwind utility classes; Converting Figma design tokens to Tailwind-compatible values; Finding Tailwind equivalents during a CSS-to-Tailwind... - [Hex to Tailwind - tips](https://devtools.surf/tools/colors-to-tailwind/#tips): Paste any hex code to find the closest Tailwind color class; Compare the visual difference between your color and the match; Use the result to stay within Tailwind's design system... - [Hex to Tailwind - fun facts](https://devtools.surf/tools/colors-to-tailwind/#fun-facts): Tailwind CSS was created by Adam Wathan and first released in November 2017, growing from a side project into one of the most popular CSS frameworks; Tailwind's default color... - [Gradient to Code](https://devtools.surf/tools/gradient-to-code/): Translate a CSS gradient into SwiftUI, Android, and Flutter code - [Gradient to Code - use cases](https://devtools.surf/tools/gradient-to-code/#use-cases): Porting a web gradient design to a native iOS SwiftUI app; Converting CSS gradients to Flutter for cross-platform development; Maintaining consistent gradient styling across web... - [Gradient to Code - tips](https://devtools.surf/tools/gradient-to-code/#tips): Define your CSS gradient and get SwiftUI and Flutter equivalents; Adjust stop positions to fine-tune the gradient appearance; Compare the generated code across all three platforms... - [Gradient to Code - fun facts](https://devtools.surf/tools/gradient-to-code/#fun-facts): CSS gradients were first implemented by WebKit in 2008 using a proprietary syntax; the standard linear-gradient syntax wasn't finalized until 2012; SwiftUI's LinearGradient struct... - [Color Name Finder](https://devtools.surf/tools/color-name-finder/): Closest CSS named color to any hex Euclidean in RGB - [Color Name Finder - use cases](https://devtools.surf/tools/color-name-finder/#use-cases): Designers finding the closest CSS keyword for a brand hex color; Frontend devs replacing hex codes with readable named colors in prototypes; Accessibility testers quickly... - [Color Name Finder - tips](https://devtools.surf/tools/color-name-finder/#tips): Enter any hex code to find the closest CSS named color match; Use the Euclidean distance score to gauge how close the match is; Try it with brand colors to find memorable CSS... - [Color Name Finder - fun facts](https://devtools.surf/tools/color-name-finder/#fun-facts): CSS defines exactly 148 named colors, including 'rebeccapurple' #663399, added in 2014 as a tribute to Rebecca Meyer, daughter of CSS expert Eric Meyer; The original HTML... - [Color Scheme Generator](https://devtools.surf/tools/color-scheme-generator/): Complementary, analogous, triadic, tetradic & split-comp schemes from a base color - [Color Scheme Generator - tips](https://devtools.surf/tools/color-scheme-generator/#tips): Accepts #hex, rgb, and hsl inputs; Shows 10 schemes: complementary, analogous 30, triadic, tetradic, split-complement; Hue rotation keeps saturation and lightness constant - [Color Scheme Generator - fun facts](https://devtools.surf/tools/color-scheme-generator/#fun-facts): Color theory from Isaac Newton's 1704 'Opticks' gave us the first color wheel. - [Tailwind Color Palette](https://devtools.surf/tools/tailwind-color-palette/): Full Tailwind CSS v3 color palette - 18 families 11 shades, searchable - [Tailwind Color Palette - tips](https://devtools.surf/tools/tailwind-color-palette/#tips): 18 color families 11 shades 50-950; Filter by family name: blue, emerald, slate, etc; Each shade maps directly to bg-blue-500 / text-blue-500 utilities - [Tailwind Color Palette - fun facts](https://devtools.surf/tools/tailwind-color-palette/#fun-facts): Tailwind CSS v4 keeps the same 18 families but added a new OKLCH-based color engine for perceptually uniform shades; Tailwind's default palette was hand-tuned by Steve Schoger... - [Material Color Palette](https://devtools.surf/tools/material-color-palette/): Google Material 2014 palette - families with 50-900 + A100-A700 shades - [Material Color Palette - use cases](https://devtools.surf/tools/material-color-palette/#use-cases): Android developers selecting theme colors that follow Material guidelines; Web designers quickly referencing Google's official color palette; UI teams ensuring consistent color... - [Material Color Palette - tips](https://devtools.surf/tools/material-color-palette/#tips): Browse all 19 color families with shades from 50 lightest to 900 darkest; Accent shades A100-A700 are available for 16 of the 19 color families; Click any swatch to copy its hex... - [Material Color Palette - fun facts](https://devtools.surf/tools/material-color-palette/#fun-facts): Google's Material Design color system was launched in June 2014 and defines exactly 256 colors across 19 hue families plus 10 accent shades each; Material Design was created by... - [CSS Named Colors](https://devtools.surf/tools/css-named-colors/): All 147 CSS named colors with hex values - instantly searchable - [CSS Named Colors - use cases](https://devtools.surf/tools/css-named-colors/#use-cases): Frontend developers quickly looking up hex values for named CSS colors; Designers referencing the full named color list for rapid prototyping; Students learning CSS colors by... - [CSS Named Colors - tips](https://devtools.surf/tools/css-named-colors/#tips): Search by name to instantly find any of the 147 CSS named colors; Each color shows its hex equivalent for quick copy-paste into stylesheets; Browse by hue family to discover named... - [CSS Named Colors - fun facts](https://devtools.surf/tools/css-named-colors/#fun-facts): CSS named colors grew from 16 original HTML colors defined in HTML 3.2, 1997 to 147 when CSS3 adopted the X11 color list from the Unix windowing system; The color 'rebeccapurple'... - [Color Shades & Tints](https://devtools.surf/tools/color-shades-tints/): Generate 9 darker shades + 9 lighter tints from any base color - [Color Shades & Tints - use cases](https://devtools.surf/tools/color-shades-tints/#use-cases): Designers generating a complete shade scale from a single brand color; Frontend developers creating hover and active state color variations; Design system teams building... - [Color Shades & Tints - tips](https://devtools.surf/tools/color-shades-tints/#tips): Enter any base color to generate 9 darker shades and 9 lighter tints; Use the generated scale as a complete single-hue design token set; Copy individual shade hex values for hover... - [Color Shades & Tints - fun facts](https://devtools.surf/tools/color-shades-tints/#fun-facts): In color theory, a 'shade' is a color mixed with black while a 'tint' is mixed with white - these terms were formalized by Albert Munsell in his 1905 color system; Tailwind CSS... - [Complementary Colors](https://devtools.surf/tools/complementary-colors/): Find the opposite color on the wheel - 180 hue rotation - [Complementary Colors - use cases](https://devtools.surf/tools/complementary-colors/#use-cases): Designers finding high-contrast accent colors for UI elements; Brand teams selecting complementary secondary colors for logos; Artists choosing opposing colors for vibrant and... - [Complementary Colors - tips](https://devtools.surf/tools/complementary-colors/#tips): Enter a color to find its exact opposite on the 360-degree hue wheel; Complementary pairs create maximum contrast for call-to-action elements; Use the result as an accent color... - [Complementary Colors - fun facts](https://devtools.surf/tools/complementary-colors/#fun-facts): Complementary color theory was formalized by Michel Eugene Chevreul in 1839 in 'The Law of Simultaneous Contrast of Colours,' which influenced Impressionist painters; When you... - [Analogous Colors](https://devtools.surf/tools/analogous-colors/): Colors adjacent on the wheel 30 - gentle, harmonious palettes - [Analogous Colors - use cases](https://devtools.surf/tools/analogous-colors/#use-cases): UI designers creating soothing, cohesive color palettes for apps; Brand designers selecting harmonious multi-color identity systems; Illustrators choosing adjacent hues for... - [Analogous Colors - tips](https://devtools.surf/tools/analogous-colors/#tips): Results show colors within +/-30 degrees of your input on the color wheel; Analogous palettes feel harmonious and natural for UI backgrounds; Pair an analogous scheme with a... - [Analogous Colors - fun facts](https://devtools.surf/tools/analogous-colors/#fun-facts): Analogous color schemes are found extensively in nature - autumn leaves display yellows, oranges, and reds that sit adjacent on the color wheel; Johannes Itten's 1961 book 'The... - [Triadic Colors](https://devtools.surf/tools/triadic-colors/): Three colors equally spaced on the wheel 120 - vivid & balanced - [Triadic Colors - use cases](https://devtools.surf/tools/triadic-colors/#use-cases): Designers creating vibrant three-color palettes for brand identities; Game UI artists selecting balanced color sets for team indicators; Presentation designers choosing three... - [Triadic Colors - tips](https://devtools.surf/tools/triadic-colors/#tips): Three colors equally spaced at 120 degrees create a balanced vibrant palette; Use one triadic color as primary and the other two as accents; Triadic schemes work best when one... - [Triadic Colors - fun facts](https://devtools.surf/tools/triadic-colors/#fun-facts): The triadic color scheme is the basis of the RGB color model - red, green, and blue are exactly 120 degrees apart on the hue wheel, forming a perfect triad; Piet Mondrian's famous... - [Tetradic Colors](https://devtools.surf/tools/tetradic-colors/): Four colors at 90 - two complementary pairs for rich palettes - [Tetradic Colors - use cases](https://devtools.surf/tools/tetradic-colors/#use-cases): Dashboard designers needing four distinct category colors; Brand teams creating multi-color identity systems with rich variety; Data visualization engineers selecting four... - [Tetradic Colors - tips](https://devtools.surf/tools/tetradic-colors/#tips): Four colors at 90-degree intervals give you two complementary pairs; Balance the palette by letting one color dominate and using others sparingly; Tetradic schemes provide the... - [Tetradic Colors - fun facts](https://devtools.surf/tools/tetradic-colors/#fun-facts): Tetradic square color harmony provides the maximum number of hues while maintaining mathematical balance - it's used in 42% of top-grossing mobile game UIs; The CMYK printing... - [Monochromatic Colors](https://devtools.surf/tools/monochromatic-colors/): Single-hue palette - nine lightness steps at the same saturation - [Monochromatic Colors - use cases](https://devtools.surf/tools/monochromatic-colors/#use-cases): Designers building elegant single-hue design token scales; Brand teams creating depth and hierarchy with one color family; Accessibility engineers ensuring sufficient contrast... - [Monochromatic Colors - tips](https://devtools.surf/tools/monochromatic-colors/#tips): Generate nine lightness steps from a single hue at consistent saturation; Monochromatic palettes are inherently accessible with clear visual hierarchy; Use the output as a... - [Monochromatic Colors - fun facts](https://devtools.surf/tools/monochromatic-colors/#fun-facts): Monochromatic design has roots in the grisaille painting technique from the 15th century, where artists painted entire works using only shades of gray; Apple's iOS 7 redesign in... - [Random Color Generator](https://devtools.surf/tools/random-color-generator/): Bulk random colors hex/rgb/hsl - great for placeholders & mocks - [Random Color Generator - tips](https://devtools.surf/tools/random-color-generator/#tips): Pass a count 1-200; Each color is shown in hex + rgb + hsl; Great for placeholder palettes in design mockups - [Random Color Generator - fun facts](https://devtools.surf/tools/random-color-generator/#fun-facts): True random RGB generation produces muddy greens and browns most of the time. - [Color Mixer](https://devtools.surf/tools/color-mixer/): Blend 2+ colors using perceptual square-mean RGB not linear RGB mud - [Color Mixer - use cases](https://devtools.surf/tools/color-mixer/#use-cases): Designers blending brand colors to create harmonious midtones; Frontend developers computing intermediate colors for gradient steps; Artists finding the perceptual average of... - [Color Mixer - tips](https://devtools.surf/tools/color-mixer/#tips): Add two or more colors to blend them using perceptual square-mean RGB; Perceptual mixing avoids the muddy browns that linear RGB averaging creates; Experiment with different color... - [Color Mixer - fun facts](https://devtools.surf/tools/color-mixer/#fun-facts): Linear RGB averaging produces perceptually incorrect results because human vision responds logarithmically to light - gamma-corrected mixing better matches what our eyes expect;... - [Color Lighten / Darken](https://devtools.surf/tools/color-lighten-darken/): Shift a color's lightness by +/- N%, preserving hue & saturation - [Color Lighten / Darken - use cases](https://devtools.surf/tools/color-lighten-darken/#use-cases): Frontend developers creating hover and focus state color variants; Designers generating consistent light/dark mode color adjustments; Brand teams producing accessible contrast... - [Color Lighten / Darken - tips](https://devtools.surf/tools/color-lighten-darken/#tips): Shift lightness by a precise percentage while keeping hue and saturation intact; Use positive values to lighten and negative values to darken; Generate hover and pressed states by... - [Color Lighten / Darken - fun facts](https://devtools.surf/tools/color-lighten-darken/#fun-facts): SASS's lighten and darken functions operate in HSL space, which can produce unexpected saturation shifts - working in CIELAB avoids this perceptual inconsistency; The human eye is... - [Color Temperature Kelvin](https://devtools.surf/tools/color-kelvin-converter/): Convert 1000-40000K to an RGB approximation Tanner Helland formula - [Color Temperature Kelvin - use cases](https://devtools.surf/tools/color-kelvin-converter/#use-cases): Photographers simulating white balance adjustments in editing tools; Lighting designers previewing LED color temperatures before purchasing; Game developers implementing dynamic... - [Color Temperature Kelvin - tips](https://devtools.surf/tools/color-kelvin-converter/#tips): Enter a Kelvin temperature from 1000 to 40000 to see its RGB color; Use the output to simulate warm candlelight 1900K or cool daylight 6500K; The conversion uses the Tanner... - [Color Temperature Kelvin - fun facts](https://devtools.surf/tools/color-kelvin-converter/#fun-facts): The concept of color temperature comes from heating a theoretical 'black body' radiator - the color it emits at a given temperature in Kelvin defines that color temperature;... - [Pantone Reference](https://devtools.surf/tools/pantone-reference/): Search common Pantone PMS spot colors with sRGB approximations - [Pantone Reference - tips](https://devtools.surf/tools/pantone-reference/#tips): Search by PMS number e.g. 485 C or color name; sRGB values are approximate - for press use the official swatch book; Includes commonly-requested spot colors for brand identity work - [Pantone Reference - fun facts](https://devtools.surf/tools/pantone-reference/#fun-facts): Pantone sells their color library as annual subscription services - a single year costs ~$15/month per seat for the full digital library; Pantone's 'Color of the Year' has been... ## Networking - [IP Address Lookup](https://devtools.surf/tools/ip-address-lookup/): Parse and validate IPv4/IPv6 addresses and CIDR ranges - [IP Address Lookup - use cases](https://devtools.surf/tools/ip-address-lookup/#use-cases): Validating IP addresses in firewall rule configurations; Calculating subnet ranges for network infrastructure planning; Parsing CIDR blocks for cloud security group definitions;... - [IP Address Lookup - tips](https://devtools.surf/tools/ip-address-lookup/#tips): Validate both IPv4 and IPv6 address formats instantly; Parse CIDR notation to see the network range and host count; Check whether an address is in a private or public range - [IP Address Lookup - fun facts](https://devtools.surf/tools/ip-address-lookup/#fun-facts): IPv4's 32-bit address space provides 4,294,967,296 unique addresses, which were officially exhausted by IANA on February 3, 2011; IPv6 provides 340 undecillion 3.4 x 10^38... - [HTTP Status Reference](https://devtools.surf/tools/http-status-reference/): Quick lookup of HTTP status codes and their meanings - [HTTP Status Reference - use cases](https://devtools.surf/tools/http-status-reference/#use-cases): Looking up unfamiliar status codes from API error responses; Choosing correct status codes when designing REST API endpoints; Debugging unexpected HTTP responses in integration... - [HTTP Status Reference - tips](https://devtools.surf/tools/http-status-reference/#tips): Search by code number for instant meaning and description; Browse by category: 2xx success, 4xx client, 5xx server errors; Use this as a quick reference when debugging API... - [HTTP Status Reference - fun facts](https://devtools.surf/tools/http-status-reference/#fun-facts): HTTP status codes were defined in HTTP/1.0 RFC 1945 in 1996 by Tim Berners-Lee, Roy Fielding, and Henrik Frystyk Nielsen; The 418 'I'm a teapot' status code originated from an... - [DNS Record Explainer](https://devtools.surf/tools/dns-record-explainer/): Explain A, AAAA, CNAME, MX, TXT, SRV and other DNS records - [DNS Record Explainer - use cases](https://devtools.surf/tools/dns-record-explainer/#use-cases): Understanding DNS records when configuring a new domain; Learning the difference between A, AAAA, and CNAME records; Setting up MX records correctly for email service providers;... - [DNS Record Explainer - tips](https://devtools.surf/tools/dns-record-explainer/#tips): Look up any record type to see its purpose and format; Understand MX priority values for email routing configuration; Learn when to use CNAME vs A records for domain setup - [DNS Record Explainer - fun facts](https://devtools.surf/tools/dns-record-explainer/#fun-facts): The DNS was invented by Paul Mockapetris in 1983 RFC 882 and 883 to replace the single HOSTS.TXT file maintained by SRI International; The original HOSTS.TXT file required manual... - [WebSocket Frame Decoder](https://devtools.surf/tools/websocket-frame-decoder/): Decode WebSocket frame headers and payloads from hex - [WebSocket Frame Decoder - use cases](https://devtools.surf/tools/websocket-frame-decoder/#use-cases): Debugging WebSocket frame encoding in real-time applications; Analyzing raw WebSocket traffic captured from network inspectors; Verifying correct frame masking in custom WebSocket... - [WebSocket Frame Decoder - tips](https://devtools.surf/tools/websocket-frame-decoder/#tips): Paste hex-encoded frame data to decode headers and payload; Identify opcode to determine if the frame is text or binary; Check masking bit to verify client-to-server frame... - [WebSocket Frame Decoder - fun facts](https://devtools.surf/tools/websocket-frame-decoder/#fun-facts): The WebSocket protocol RFC 6455 was standardized in December 2011 after 3 years of development to replace long-polling techniques; WebSocket frames have a minimum overhead of just... - [Port Reference Lookup](https://devtools.surf/tools/port-reference-lookup/): Look up common services for any TCP/UDP port number - [Port Reference Lookup - use cases](https://devtools.surf/tools/port-reference-lookup/#use-cases): Identifying unknown services running on open ports during security audits; Verifying firewall rules reference the correct port numbers; Checking default database port numbers for... - [Port Reference Lookup - tips](https://devtools.surf/tools/port-reference-lookup/#tips): Search by port number to find the associated service; Look up well-known ports below 1024 for common protocols; Verify which services use TCP vs UDP or both - [Port Reference Lookup - fun facts](https://devtools.surf/tools/port-reference-lookup/#fun-facts): IANA maintains the official port number registry, with well-known ports 0-1023 requiring IETF approval for assignment; Port 80 was assigned to HTTP by Tim Berners-Lee in 1991,... - [MIME Type Lookup](https://devtools.surf/tools/mime-type-lookup/): Convert between file extensions and MIME types - [MIME Type Lookup - use cases](https://devtools.surf/tools/mime-type-lookup/#use-cases): Setting correct Content-Type headers for API file responses; Configuring web server MIME type mappings for static assets; Validating file upload types in backend middleware;... - [MIME Type Lookup - tips](https://devtools.surf/tools/mime-type-lookup/#tips): Search by file extension to find the correct Content-Type; Look up MIME types for proper API response headers; Verify multipart form data types for file upload endpoints - [MIME Type Lookup - fun facts](https://devtools.surf/tools/mime-type-lookup/#fun-facts): MIME Multipurpose Internet Mail Extensions was defined in RFC 1341 in 1992, originally for extending email beyond plain ASCII text; The application/octet-stream MIME type is the... - [Certificate Decoder](https://devtools.surf/tools/cert-decoder/): Decode X.509 PEM certificates into readable fields - [Certificate Decoder - use cases](https://devtools.surf/tools/cert-decoder/#use-cases): Checking SSL certificate expiration dates before renewal deadlines; Verifying SAN entries cover all required domain variations; Debugging TLS handshake failures by inspecting... - [Certificate Decoder - tips](https://devtools.surf/tools/cert-decoder/#tips): Paste a PEM certificate to see expiry date and issuer details; Check the Subject Alternative Names for covered domains; Verify the certificate chain and key usage extensions - [Certificate Decoder - fun facts](https://devtools.surf/tools/cert-decoder/#fun-facts): X.509 was first published in 1988 by the ITU-T as part of the X.500 directory services standard; Let's Encrypt, launched in April 2016, has issued over 4 billion certificates and... - [HPKP Generator](https://devtools.surf/tools/hpkp-generator/): Generate HTTP Public Key Pinning headers from a certificate - [HPKP Generator - use cases](https://devtools.surf/tools/hpkp-generator/#use-cases): Generating pin headers for legacy systems still using HPKP; Learning about public key pinning concepts for security audits; Creating HPKP report-only headers for certificate... - [HPKP Generator - tips](https://devtools.surf/tools/hpkp-generator/#tips): Extract the public key pin from your server certificate; Generate backup pins from your CA's intermediate certificate; Include a report-uri to monitor pinning violations in... - [HPKP Generator - fun facts](https://devtools.surf/tools/hpkp-generator/#fun-facts): HPKP RFC 7469 was published in April 2015 but deprecated by Chrome in 2018 due to the risk of site operators accidentally bricking their own sites; Google was the first major site... - [User-Agent Parser](https://devtools.surf/tools/user-agent-parser/): Parse browser, OS, device from a User-Agent string - [User-Agent Parser - use cases](https://devtools.surf/tools/user-agent-parser/#use-cases): Analyzing server logs to identify browser version distribution; Detecting bot crawlers in web traffic analytics; Debugging browser-specific rendering issues from error reports;... - [User-Agent Parser - tips](https://devtools.surf/tools/user-agent-parser/#tips): Paste a User-Agent string to identify browser and OS version; Detect mobile vs desktop devices from the parsed output; Identify bot traffic by recognizing crawler User-Agent... - [User-Agent Parser - fun facts](https://devtools.surf/tools/user-agent-parser/#fun-facts): User-Agent strings became notoriously convoluted because browsers historically pretended to be other browsers to receive compatible content; Chrome's User-Agent string includes... - [CORS Header Tester](https://devtools.surf/tools/cors-header-tester/): Analyze CORS response headers for misconfigurations and security issues - [CORS Header Tester - use cases](https://devtools.surf/tools/cors-header-tester/#use-cases): Debug cross-origin API errors during frontend development; Audit CORS headers for security review compliance; Verify preflight response configuration for PUT/DELETE methods; Test... - [CORS Header Tester - tips](https://devtools.surf/tools/cors-header-tester/#tips): Paste response headers to check for wildcard origin risks; Verify Access-Control-Allow-Methods covers your API methods; Detect missing Access-Control-Allow-Credentials... - [CORS Header Tester - fun facts](https://devtools.surf/tools/cors-header-tester/#fun-facts): CORS Cross-Origin Resource Sharing was first proposed in 2004 and standardized as a W3C Recommendation in January 2014; The CORS preflight OPTIONS request was designed to protect... - [CIDR Calculator](https://devtools.surf/tools/cidr-calculator/): Calculate network address, broadcast, host range from CIDR notation - [CIDR Calculator - use cases](https://devtools.surf/tools/cidr-calculator/#use-cases): Plan VPC subnets for AWS or GCP cloud deployments; Calculate usable host ranges for network documentation; Verify firewall rules reference the correct IP ranges; Design IP... - [CIDR Calculator - tips](https://devtools.surf/tools/cidr-calculator/#tips): Enter a CIDR block to see the full host range instantly; Compare subnet sizes by adjusting the prefix length; View the broadcast and network addresses for any subnet - [CIDR Calculator - fun facts](https://devtools.surf/tools/cidr-calculator/#fun-facts): CIDR Classless Inter-Domain Routing was introduced in 1993 via RFC 1519 to slow the exhaustion of IPv4 addresses by replacing classful networking; A /32 subnet contains exactly... - [HTTP Header Analyzer](https://devtools.surf/tools/http-header-analyzer/): Analyze HTTP headers for security, caching, and best practices - [HTTP Header Analyzer - use cases](https://devtools.surf/tools/http-header-analyzer/#use-cases): Audit production response headers for security compliance; Debug caching issues by analyzing Cache-Control directives; Verify CORS and CSP headers before deployment; Check for... - [HTTP Header Analyzer - tips](https://devtools.surf/tools/http-header-analyzer/#tips): Paste full response headers to get a security audit summary; Check for missing security headers like CSP and HSTS; Identify caching misconfigurations from Cache-Control values - [HTTP Header Analyzer - fun facts](https://devtools.surf/tools/http-header-analyzer/#fun-facts): HTTP/1.0 RFC 1945, 1996 defined only 16 header fields; today there are over 90 registered HTTP headers in the IANA registry; The X- prefix for custom headers was deprecated by RFC... - [MAC Address Lookup OUI](https://devtools.surf/tools/mac-address-lookup/): Identify the manufacturer from a MAC address OUI prefix - [MAC Address Lookup OUI - use cases](https://devtools.surf/tools/mac-address-lookup/#use-cases): Network admins identifying unknown devices on corporate networks; Security analysts tracing device manufacturers in traffic logs; IoT developers verifying hardware vendor... - [MAC Address Lookup OUI - tips](https://devtools.surf/tools/mac-address-lookup/#tips): Enter just the first 6 hex digits for OUI manufacturer lookup; Use colons, hyphens, or no separators - all formats work; Cross-reference unknown devices on your network by vendor - [MAC Address Lookup OUI - fun facts](https://devtools.surf/tools/mac-address-lookup/#fun-facts): The IEEE has assigned over 40,000 OUI Organizationally Unique Identifier prefixes - Apple alone holds more than 600 OUI blocks for its devices; MAC addresses are 48 bits long,... - [HTTP Method Reference](https://devtools.surf/tools/http-method-reference/): Quick reference for all HTTP methods with use cases and safety info - [HTTP Method Reference - use cases](https://devtools.surf/tools/http-method-reference/#use-cases): Checking whether PUT or PATCH is appropriate for an API endpoint; Reviewing HTTP method safety properties during API design; Teaching junior developers the difference between POST... - [HTTP Method Reference - tips](https://devtools.surf/tools/http-method-reference/#tips): Check the idempotency column to pick the right method for retries; Review safety info to understand which methods modify server state; Use the search bar to quickly find a... - [HTTP Method Reference - fun facts](https://devtools.surf/tools/http-method-reference/#fun-facts): HTTP/1.0 RFC 1945, 1996 defined only GET, HEAD, and POST - methods like PUT, DELETE, and PATCH came later with HTTP/1.1 and RFC 5789; The PATCH method was not part of the original... - [Query String Builder](https://devtools.surf/tools/query-string-builder/): Build ?k=v&k=v strings from key=value lines - repeating keys OK - [Query String Builder - use cases](https://devtools.surf/tools/query-string-builder/#use-cases): Frontend devs constructing complex API request URLs; QA testers building URLs with multiple filter parameters; Backend devs debugging query string parsing edge cases; API... - [Query String Builder - tips](https://devtools.surf/tools/query-string-builder/#tips): Enter key=value pairs one per line for fast building; Duplicate keys are preserved for multi-value parameters; Output is automatically URL-encoded for safe pasting - [Query String Builder - fun facts](https://devtools.surf/tools/query-string-builder/#fun-facts): The query string format key=value&key=value was defined in RFC 3986 2005 by Tim Berners-Lee, though the convention existed informally since the earliest web forms in 1993; The... - [Basic Auth Generator](https://devtools.surf/tools/basic-auth-generator/): Base64-encode user:pass into an HTTP Basic Authorization header - [Basic Auth Generator - use cases](https://devtools.surf/tools/basic-auth-generator/#use-cases): Backend devs generating auth headers for internal API testing; DevOps engineers configuring webhook authentication headers; QA testers setting up Authorization headers in Postman;... - [Basic Auth Generator - tips](https://devtools.surf/tools/basic-auth-generator/#tips): Paste username and password to get the full header value; Output includes the base64-encoded user:pass format; Copy the Authorization header directly into API requests - [Basic Auth Generator - fun facts](https://devtools.surf/tools/basic-auth-generator/#fun-facts): HTTP Basic Authentication was defined in the original HTTP/1.0 specification RFC 1945 in 1996, making it one of the oldest web authentication schemes still in use; Basic Auth... - [Bearer Token Builder](https://devtools.surf/tools/bearer-token-builder/): Wrap a raw token in HTTP Authorization + curl + fetch snippets - [Bearer Token Builder - use cases](https://devtools.surf/tools/bearer-token-builder/#use-cases): Frontend devs building authenticated fetch calls from JWTs; API testers generating curl commands for protected endpoints; Mobile developers setting up token-based API... - [Bearer Token Builder - tips](https://devtools.surf/tools/bearer-token-builder/#tips): Paste a raw JWT or API token to get ready-made snippets; Output includes curl, fetch, and raw header formats; Use the curl snippet to test authenticated endpoints quickly - [Bearer Token Builder - fun facts](https://devtools.surf/tools/bearer-token-builder/#fun-facts): Bearer tokens were standardized in RFC 6750 2012 as part of the OAuth 2.0 framework, replacing the more complex OAuth 1.0 signature-based authentication; The word 'Bearer' in the... - [HTTP Header Builder](https://devtools.surf/tools/http-header-builder/): Compose request headers - output as curl flags and fetch options - [HTTP Header Builder - use cases](https://devtools.surf/tools/http-header-builder/#use-cases): API developers composing complex request headers for testing; Frontend devs generating fetch options for authenticated requests; DevOps engineers building curl commands for... - [HTTP Header Builder - tips](https://devtools.surf/tools/http-header-builder/#tips): Add multiple headers and export as curl flags at once; Include Content-Type and Accept headers for API calls; Output provides both curl flags and fetch options objects - [HTTP Header Builder - fun facts](https://devtools.surf/tools/http-header-builder/#fun-facts): HTTP headers were part of the original HTTP/0.9 specification in 1991, but Tim Berners-Lee's first design had no headers at all - just a raw GET request and HTML response; The X-... - [Subnet Calculator v2](https://devtools.surf/tools/subnet-calculator-v2/): CIDR to subnet mask, network, broadcast, first/last host, host count - [Subnet Calculator v2 - tips](https://devtools.surf/tools/subnet-calculator-v2/#tips): Input format: 192.168.1.0/24; /31 and /32 are supported for point-to-point links; The wildcard mask is useful for ACL entries in Cisco IOS - [Subnet Calculator v2 - fun facts](https://devtools.surf/tools/subnet-calculator-v2/#fun-facts): The famous 10.0.0.0/8 'private' range reserves 16.7 million addresses per network - more than the entire public IPv4 internet had in 1985; CIDR Classless Inter-Domain Routing... - [IPv6 Expander](https://devtools.surf/tools/ipv6-expander/): Expand ::abbreviated IPv6 and also emit the canonical compressed form - [IPv6 Expander - use cases](https://devtools.surf/tools/ipv6-expander/#use-cases): Network engineers debugging abbreviated IPv6 addresses in configs; DevOps teams expanding shorthand addresses for firewall rules; Security analysts normalizing IPv6 addresses for... - [IPv6 Expander - tips](https://devtools.surf/tools/ipv6-expander/#tips): Paste abbreviated :: addresses to see the full 128-bit form; Output shows both expanded and canonical compressed formats; Use expanded form when debugging firewall and routing... - [IPv6 Expander - fun facts](https://devtools.surf/tools/ipv6-expander/#fun-facts): IPv6 was standardized in RFC 2460 in December 1998, driven by the looming exhaustion of IPv4's 4.3 billion addresses - IPv6 provides 340 undecillion 3.4 x 10^38 addresses; The ::... - [IPv4 to IPv6 Mapper](https://devtools.surf/tools/ipv4-ipv6-converter/): IPv4-mapped IPv6 address ::ffff:a.b.c.d - RFC 4291 representation - [IPv4 to IPv6 Mapper - use cases](https://devtools.surf/tools/ipv4-ipv6-converter/#use-cases): Network engineers configuring dual-stack server sockets; DevOps teams setting up IPv4-compatible rules in IPv6 firewalls; Backend developers handling mixed-protocol client... - [IPv4 to IPv6 Mapper - tips](https://devtools.surf/tools/ipv4-ipv6-converter/#tips): Enter an IPv4 address to get its ::ffff: mapped IPv6 form; Output follows the RFC 4291 IPv4-mapped representation; Use mapped addresses for dual-stack network configurations - [IPv4 to IPv6 Mapper - fun facts](https://devtools.surf/tools/ipv4-ipv6-converter/#fun-facts): IPv4-mapped IPv6 addresses ::ffff:0:0/96 were defined in RFC 4291 2006 to allow IPv6 applications to communicate with IPv4 hosts without protocol translation; The dual-stack... - [RFC Lookup](https://devtools.surf/tools/rfc-lookup/): Search 25+ foundational RFCs by number, title, or topic - [RFC Lookup - tips](https://devtools.surf/tools/rfc-lookup/#tips): Search by number e.g. 9110 or topic e.g. http; All RFCs link directly to rfc-editor.org; Includes only the core RFCs still in force - [RFC Lookup - fun facts](https://devtools.surf/tools/rfc-lookup/#fun-facts): The first RFC, RFC 1 'Host Software' was published on April 7, 1969 by Steve Crocker - before ARPANET even had two nodes connected; RFC 2324 'Hyper Text Coffee Pot Control... - [Well-Known Ports](https://devtools.surf/tools/well-known-ports/): 40+ standard TCP/UDP ports - search by number, service, or keyword - [Well-Known Ports - tips](https://devtools.surf/tools/well-known-ports/#tips): Range 0-1023 is 'well-known' per IANA; requires root to bind on Unix; Search by port number, service name, or any keyword in the notes; Many common dev ports are listed 3000,... - [Well-Known Ports - fun facts](https://devtools.surf/tools/well-known-ports/#fun-facts): Port 22 SSH was registered by Tatu Ylnen in 1995 - he emailed IANA saying 'we'd like port 22' and they just... gave it to him; Port 80 HTTP was assigned by Tim Berners-Lee in... ## PDF - [Sample PDFs](https://devtools.surf/tools/sample-pdfs/): Download ready-made sample PDFs of various sizes and page counts - [Sample PDFs - use cases](https://devtools.surf/tools/sample-pdfs/#use-cases): Test file upload limits with PDFs of known sizes; Verify PDF rendering in custom viewer implementations; Populate demo environments with realistic document content; Load-test... - [Sample PDFs - tips](https://devtools.surf/tools/sample-pdfs/#tips): Download PDFs of specific sizes for upload testing; Choose from various page counts for pagination testing; Use sample PDFs to test your PDF viewer implementation - [Sample PDFs - fun facts](https://devtools.surf/tools/sample-pdfs/#fun-facts): PDF Portable Document Format was created by Adobe co-founder John Warnock in 1993 as part of the Camelot project to make documents portable across systems; PDF became an open ISO... - [PDF Merger](https://devtools.surf/tools/pdf-merger/): Merge multiple PDFs into a single document - [PDF Merger - use cases](https://devtools.surf/tools/pdf-merger/#use-cases): Combine invoice pages into a single document for filing; Merge contract sections from different authors; Assemble multi-chapter ebooks from individual PDF chapters; Create... - [PDF Merger - tips](https://devtools.surf/tools/pdf-merger/#tips): Drag and drop multiple PDFs to combine them in order; Reorder files before merging to set the page sequence; Merge scanned documents with cover pages into a single PDF - [PDF Merger - fun facts](https://devtools.surf/tools/pdf-merger/#fun-facts): PDF supports incremental updates, meaning merged PDFs preserve each original file's internal cross-reference table as a new revision layer; The PDF specification defines over... - [PDF Splitter](https://devtools.surf/tools/pdf-splitter/): Split a PDF by page ranges - [PDF Splitter - use cases](https://devtools.surf/tools/pdf-splitter/#use-cases): Extract specific chapters from large technical manuals; Split multi-page scans into individual document files; Share single pages from contracts without exposing full content;... - [PDF Splitter - tips](https://devtools.surf/tools/pdf-splitter/#tips): Specify page ranges like 1-3, 5, 8-10 to extract; Split a large PDF into individual chapter files; Extract a single page for quick sharing or printing - [PDF Splitter - fun facts](https://devtools.surf/tools/pdf-splitter/#fun-facts): PDF page trees use a B-tree structure internally, allowing efficient random access to any page without reading the entire file; The largest known PDF file was a 19-billion-pixel... - [PDF Compressor](https://devtools.surf/tools/pdf-compressor/): Reduce PDF file size in the browser - [PDF Compressor - use cases](https://devtools.surf/tools/pdf-compressor/#use-cases): Reduce PDF size before emailing to meet attachment limits; Optimize scanned documents for web upload portals; Compress archived PDFs to save cloud storage costs; Prepare... - [PDF Compressor - tips](https://devtools.surf/tools/pdf-compressor/#tips): Check the compression ratio after processing your PDF; Balance quality vs. file size with compression level settings; Compress before emailing to stay under attachment size limits - [PDF Compressor - fun facts](https://devtools.surf/tools/pdf-compressor/#fun-facts): PDF files often contain unused objects, duplicate fonts, and uncompressed images - removing these alone can reduce size by 30-60%; The FlateDecode filter in PDF uses the DEFLATE... - [Markdown to PDF](https://devtools.surf/tools/markdown-to-pdf/): Write or paste Markdown and export it as a downloadable PDF - [Markdown to PDF - use cases](https://devtools.surf/tools/markdown-to-pdf/#use-cases): Generate printable documentation from Markdown source files; Create shareable PDF reports from technical notes; Export meeting notes or specs as professional PDF documents;... - [Markdown to PDF - tips](https://devtools.surf/tools/markdown-to-pdf/#tips): Write or paste Markdown and export it instantly as PDF; Preview the rendered Markdown before generating the PDF; Use headings and code blocks for well-structured PDF output - [Markdown to PDF - fun facts](https://devtools.surf/tools/markdown-to-pdf/#fun-facts): The first Markdown-to-PDF pipeline typically runs Markdown through HTML, then uses a headless browser or wkhtmltopdf to render the PDF; Pandoc, the universal document converter... - [Invoice Generator](https://devtools.surf/tools/invoice-generator/): Create professional invoices from line items and export as PDF - [Invoice Generator - use cases](https://devtools.surf/tools/invoice-generator/#use-cases): Freelancers generating client invoices without accounting software; Creating one-off invoices for consulting side projects; Producing PDF receipts for expense report... - [Invoice Generator - tips](https://devtools.surf/tools/invoice-generator/#tips): Add multiple line items with quantity and unit price; Include your company logo for a professional look; Double-check the tax rate before exporting to PDF - [Invoice Generator - fun facts](https://devtools.surf/tools/invoice-generator/#fun-facts): The oldest known invoice dates to around 3200 BCE in Mesopotamia, inscribed on a clay tablet recording a sale of barley; The term 'invoice' derives from the French word 'envois'... - [TXT to PDF](https://devtools.surf/tools/txt-to-pdf/): Convert a plain text file into a downloadable PDF - [TXT to PDF - use cases](https://devtools.surf/tools/txt-to-pdf/#use-cases): Package README files as printable PDFs; Convert server logs into shareable reports; Archive notes or transcripts with consistent formatting; Send plain-text drafts to reviewers... - [TXT to PDF - tips](https://devtools.surf/tools/txt-to-pdf/#tips): Paste or upload any .txt file - the content is rendered as a clean A4 PDF; Text is wrapped automatically to fit the page margin; For structured output, use Markdown to PDF instead - [TXT to PDF - fun facts](https://devtools.surf/tools/txt-to-pdf/#fun-facts): Plain text files predate the PDF specification by more than 20 years - they first became standardized with ASCII in 1963; A text file uses roughly 1 byte per character, while the... - [HTML to PDF](https://devtools.surf/tools/html-to-pdf/): Paste HTML or upload an .html file and export as PDF - [HTML to PDF - use cases](https://devtools.surf/tools/html-to-pdf/#use-cases): Convert landing pages into portable PDFs for clients; Turn HTML emails or receipts into archive-friendly PDFs; Export blog posts for offline reading; Quickly preview styled... - [HTML to PDF - tips](https://devtools.surf/tools/html-to-pdf/#tips): Upload an .html file or paste raw HTML markup; The tag is used as the PDF title when present; Styles are stripped - text flow is preserved as a clean PDF - [HTML to PDF - fun facts](https://devtools.surf/tools/html-to-pdf/#fun-facts): HTML-to-PDF pipelines power most invoice, ticket, and receipt generation in modern SaaS - from Stripe to Shopify; The term 'print stylesheet' predates CSS media queries: browsers... - [DOCX to PDF](https://devtools.surf/tools/docx-to-pdf/): Convert a Word .docx document into a PDF - [DOCX to PDF - use cases](https://devtools.surf/tools/docx-to-pdf/#use-cases): Share Word documents with users who don't have Office installed; Archive contracts or proposals as uneditable PDFs; Email documents in a format that looks identical on every... - [DOCX to PDF - tips](https://devtools.surf/tools/docx-to-pdf/#tips): Drop in a .docx file - the Word document's text content is rendered as a PDF; Works entirely in your browser, no data leaves your machine; Complex layouts columns, floating images... - [DOCX to PDF - fun facts](https://devtools.surf/tools/docx-to-pdf/#fun-facts): A .docx file is actually a ZIP archive containing XML - you can rename it to .zip and unzip it to inspect the pieces; The Office Open XML format DOCX became an ISO/IEC standard... - [ODT to PDF](https://devtools.surf/tools/odt-to-pdf/): Convert an OpenDocument Text file into a PDF - [ODT to PDF - use cases](https://devtools.surf/tools/odt-to-pdf/#use-cases): Distribute LibreOffice documents to users on any platform; Archive ODT files as PDFs for long-term compatibility; Convert collaborative .odt drafts into shareable PDFs; Preview... - [ODT to PDF - tips](https://devtools.surf/tools/odt-to-pdf/#tips): Upload an OpenDocument Text file .odt from LibreOffice or OpenOffice; The tool runs fully client-side - nothing is uploaded; Styled headings and paragraphs are preserved as clean... - [ODT to PDF - fun facts](https://devtools.surf/tools/odt-to-pdf/#fun-facts): OpenDocument Format ODF became an ISO/IEC standard 26300 in 2006, two years before the competing OOXML format from Microsoft; An .odt file is a ZIP archive containing content.xml,... - [RTF to PDF](https://devtools.surf/tools/rtf-to-pdf/): Convert a Rich Text .rtf file into a PDF - [RTF to PDF - use cases](https://devtools.surf/tools/rtf-to-pdf/#use-cases): Convert legacy RTF documents into modern PDFs; Archive WordPad or TextEdit notes as shareable documents; Preview RTF attachments from email without opening an office suite;... - [RTF to PDF - tips](https://devtools.surf/tools/rtf-to-pdf/#tips): Upload a Rich Text Format .rtf file from Word, TextEdit, or WordPad; Text content is extracted and rendered into a PDF - formatting is simplified; Embedded images and tables are... - [RTF to PDF - fun facts](https://devtools.surf/tools/rtf-to-pdf/#fun-facts): RTF was created by Microsoft in 1987 as a cross-platform alternative to binary .doc - it is plain ASCII with curly-brace control groups; Microsoft stopped updating the RTF... - [CSV to PDF](https://devtools.surf/tools/csv-to-pdf/): Render a CSV table into a landscape PDF - [CSV to PDF - use cases](https://devtools.surf/tools/csv-to-pdf/#use-cases): Turn CSV exports into shareable reports; Send tabular data to non-technical recipients; Archive spreadsheet data in an uneditable format; Preview CSV content in a cleanly... - [CSV to PDF - tips](https://devtools.surf/tools/csv-to-pdf/#tips): Paste CSV or upload a .csv file - the first row is treated as a header; Output is rendered in landscape orientation to fit wide tables; Long cell values are truncated to fit the... - [CSV to PDF - fun facts](https://devtools.surf/tools/csv-to-pdf/#fun-facts): CSV is not a single standard - RFC 4180 formalized it only in 2005, decades after it had become ubiquitous in data interchange; The separator in CSV varies by locale: many... - [JSON to PDF](https://devtools.surf/tools/json-to-pdf/): Pretty-print JSON and export as a readable PDF - [JSON to PDF - use cases](https://devtools.surf/tools/json-to-pdf/#use-cases): Archive API responses for compliance audits; Attach config snapshots to support tickets; Export JSON data for stakeholders who prefer PDFs; Preview and share structured data... - [JSON to PDF - tips](https://devtools.surf/tools/json-to-pdf/#tips): Paste JSON content - it is pretty-printed with 2-space indent before rendering; Use this to archive API responses or config snapshots as PDFs; Invalid JSON is rejected with an... - [JSON to PDF - fun facts](https://devtools.surf/tools/json-to-pdf/#fun-facts): Pretty-printed JSON is roughly 20-40% larger than minified JSON - most of the extra bytes are indentation; The JSON spec does not define a maximum nesting depth - some parsers set... - [EPUB to PDF](https://devtools.surf/tools/epub-to-pdf/): Convert an EPUB ebook any version into a PDF - [EPUB to PDF - use cases](https://devtools.surf/tools/epub-to-pdf/#use-cases): Convert public-domain ebooks from Project Gutenberg to PDFs; Print your EPUB library for offline reading; Send an ebook sample to a reviewer who prefers PDFs; Archive EPUB... - [EPUB to PDF - tips](https://devtools.surf/tools/epub-to-pdf/#tips): Upload any non-DRM EPUB file - chapters are read in spine order; The ebook title from OPF metadata is used as the PDF title page; Embedded fonts and complex layouts are flattened... - [EPUB to PDF - fun facts](https://devtools.surf/tools/epub-to-pdf/#fun-facts): An EPUB file is a ZIP archive containing XHTML chapters, an OPF manifest, and optional NCX/NAV navigation files; EPUB 3 introduced support for embedded video, audio, and... - [MOBI / AZW to PDF](https://devtools.surf/tools/mobi-to-pdf/): Convert Kindle MOBI, AZW, or PRC ebooks into a PDF non-DRM - [MOBI / AZW to PDF - use cases](https://devtools.surf/tools/mobi-to-pdf/#use-cases): Rescue non-DRM MOBI ebooks from an old Kindle library; Convert free AZW samples to PDFs for reading on non-Kindle devices; Extract plain text from legacy PRC ebooks; Migrate a... - [MOBI / AZW to PDF - tips](https://devtools.surf/tools/mobi-to-pdf/#tips): Works with classic MOBI, PRC, AZW, and AZW3 Kindle files - but only if DRM-free; KF8-only files newer Kindle format may return empty text; The tool parses PalmDOC LZ77 compression... - [MOBI / AZW to PDF - fun facts](https://devtools.surf/tools/mobi-to-pdf/#fun-facts): The MOBI format was created by Mobipocket in 2000 and was acquired by Amazon in 2005 as the foundation for Kindle; AZW is essentially MOBI with optional DRM; AZW3 KF8 adds modern... - [FB2 to PDF](https://devtools.surf/tools/fb2-to-pdf/): Convert a FictionBook .fb2 ebook into a PDF - [FB2 to PDF - use cases](https://devtools.surf/tools/fb2-to-pdf/#use-cases): Convert FB2 downloads from public-domain libraries to PDFs; Preview FB2 samples without a specialized FictionBook reader; Archive your FB2 collection in a widely compatible... - [FB2 to PDF - tips](https://devtools.surf/tools/fb2-to-pdf/#tips): FB2 is an XML-based ebook format popular in Russia and Eastern Europe; Book metadata title, author is read from the <title-info> block; Upload a raw .fb2 file - FB2.ZIP archives... - [FB2 to PDF - fun facts](https://devtools.surf/tools/fb2-to-pdf/#fun-facts): FictionBook FB2 was created in 2004 by Dmitry Gribov and is one of the simplest ebook formats - a single XML file with no zip wrapper; FB2 includes rich structured metadata such... - [CBZ to PDF](https://devtools.surf/tools/cbz-to-pdf/): Convert a comic book archive .cbz into an image PDF - [CBZ to PDF - use cases](https://devtools.surf/tools/cbz-to-pdf/#use-cases): Read comics on devices that only support PDF; Merge a scanned manga collection into portable PDFs; Print digital comics for physical archival; Share a CBZ series with readers who... - [CBZ to PDF - tips](https://devtools.surf/tools/cbz-to-pdf/#tips): CBZ files are just ZIP archives full of images - the tool reads them in alphabetical order; Each image becomes a single PDF page, scaled to fit A4; Works for most CBZ comic and... - [CBZ to PDF - fun facts](https://devtools.surf/tools/cbz-to-pdf/#fun-facts): CBZ and CBR use the same image ordering convention as scanners: alphabetical sort with zero-padded page numbers page-001, page-002; The CBZ format Comic Book ZIP emerged in the... - [PDF to TXT](https://devtools.surf/tools/pdf-to-txt/): Extract plain text content from a PDF document - [PDF to TXT - use cases](https://devtools.surf/tools/pdf-to-txt/#use-cases): Extract content from PDFs for re-use in a doc or email; Feed PDF text into search indexes or LLM prompts; Migrate content out of legacy PDF archives; Audit PDFs for sensitive... - [PDF to TXT - tips](https://devtools.surf/tools/pdf-to-txt/#tips): Works best on PDFs created from Word, LaTeX, or browsers - scanned PDFs return no text; Pages are separated in the output by '---' markers; DRM-protected PDFs cannot be extracted - [PDF to TXT - fun facts](https://devtools.surf/tools/pdf-to-txt/#fun-facts): PDF text is stored as strings with positional hints - not as paragraphs, which is why extracted text often needs reflowing; Every PDF font can remap characters via a CMap, so the... - [PDF to Images ZIP](https://devtools.surf/tools/pdf-to-images/): Extract embedded images from a PDF and download as a ZIP - [PDF to Images ZIP - use cases](https://devtools.surf/tools/pdf-to-images/#use-cases): Recover photos from a scanned PDF; Turn an image-based PDF back into a CBZ-style archive; Bulk-extract illustrations from a technical manual; Salvage embedded graphics from a... - [PDF to Images ZIP - tips](https://devtools.surf/tools/pdf-to-images/#tips): Best for PDFs containing embedded photos or scans e.g. CBZ-converted books, invoice scans; Output is a ZIP of JPEGs in document order; Pure vector PDFs diagrams, charts return no... - [PDF to Images ZIP - fun facts](https://devtools.surf/tools/pdf-to-images/#fun-facts): PDFs store embedded JPEGs as raw DCTDecode streams - you can often copy them byte-for-byte without re-encoding; Most scanned PDFs are just wrappers around a sequence of JPEG-2000... ## API / Config - [REST Handler](https://devtools.surf/tools/rest-handler/): Lightweight REST client - collections, env vars, history, format converter cURL / Collection JSON / REST Handler YAML - [REST Handler - use cases](https://devtools.surf/tools/rest-handler/#use-cases): Backend developers testing API endpoints during development; QA engineers building reusable API test collections; DevOps teams debugging webhook integrations with history... - [REST Handler - tips](https://devtools.surf/tools/rest-handler/#tips): Organize requests into collections for reusable API workflows; Use environment variables to switch between dev and prod endpoints; Import cURL commands directly to build requests... - [REST Handler - fun facts](https://devtools.surf/tools/rest-handler/#fun-facts): Postman, the most popular REST client, started as a Chrome extension in 2012 by Abhinav Asthana and grew to a $5.6 billion valuation by 2021 with over 25 million users; REST... - [OpenAPI Viewer](https://devtools.surf/tools/openapi-viewer/): Browse endpoints, schemas, and operations from an OpenAPI 3 spec - [OpenAPI Viewer - use cases](https://devtools.surf/tools/openapi-viewer/#use-cases): Explore third-party API endpoints during integration work; Review API schema changes in pull request reviews; Generate quick API documentation for internal microservices; Onboard... - [OpenAPI Viewer - tips](https://devtools.surf/tools/openapi-viewer/#tips): Paste an OpenAPI 3 spec to browse all endpoints visually; Expand schemas to inspect request and response models; Filter operations by HTTP method or tag for quick navigation - [OpenAPI Viewer - fun facts](https://devtools.surf/tools/openapi-viewer/#fun-facts): The OpenAPI Specification was originally called Swagger, created by Tony Tam in 2011; it was donated to the Linux Foundation's OpenAPI Initiative in 2015; OpenAPI 3.0, released in... - [Swagger to Collection JSON](https://devtools.surf/tools/swagger-to-collection/): Convert an OpenAPI / Swagger spec into a Collection JSON v2.1 payload - [Swagger to Collection JSON - use cases](https://devtools.surf/tools/swagger-to-collection/#use-cases): Import API specs into Postman for interactive testing; Generate API test collections from Swagger documentation; Share runnable API collections with QA teams; Convert OpenAPI... - [Swagger to Collection JSON - tips](https://devtools.surf/tools/swagger-to-collection/#tips): Upload a Swagger/OpenAPI spec to get Collection JSON output; Use the collection to import endpoints into API testing tools; Verify all endpoints are included after conversion - [Swagger to Collection JSON - fun facts](https://devtools.surf/tools/swagger-to-collection/#fun-facts): Collection JSON v2.1, used by Postman, can represent complex request chains including pre-request scripts and test assertions; Postman was created by Abhinav Asthana in 2012 as a... - [package.json Analyzer](https://devtools.surf/tools/package-json-analyzer/): Detect duplicate dependencies and common issues - [package.json Analyzer - use cases](https://devtools.surf/tools/package-json-analyzer/#use-cases): Audit project dependencies for duplicate packages; Detect miscategorized dev vs production dependencies; Validate package.json structure before publishing to npm; Review... - [package.json Analyzer - tips](https://devtools.surf/tools/package-json-analyzer/#tips): Upload package.json to detect duplicate or conflicting deps; Spot devDependencies that should be regular dependencies; Identify missing or malformed required fields - [package.json Analyzer - fun facts](https://devtools.surf/tools/package-json-analyzer/#fun-facts): The package.json format was introduced by npm creator Isaac Z. - [Dockerfile Linter](https://devtools.surf/tools/dockerfile-linter/): Check Dockerfiles against common best practices - [Dockerfile Linter - use cases](https://devtools.surf/tools/dockerfile-linter/#use-cases): Validate Dockerfiles before building production images; Catch security issues like running containers as root; Optimize Docker layer caching for faster CI/CD builds; Enforce... - [Dockerfile Linter - tips](https://devtools.surf/tools/dockerfile-linter/#tips): Paste your Dockerfile to check against best practice rules; Fix common issues like missing USER directives; Identify inefficient layer ordering that slows builds - [Dockerfile Linter - fun facts](https://devtools.surf/tools/dockerfile-linter/#fun-facts): Docker was released as open source by Solomon Hykes on March 13, 2013, and reached 1 billion container pulls on Docker Hub within two years; Each RUN instruction in a Dockerfile... - [Kubernetes Manifest Validator](https://devtools.surf/tools/k8s-manifest-validator/): Validate required fields in Kubernetes YAML manifests - [Kubernetes Manifest Validator - use cases](https://devtools.surf/tools/k8s-manifest-validator/#use-cases): Validate manifests before applying to production clusters; Catch missing resource limits that cause pod evictions; Review Helm template output for correctness; Enforce Kubernetes... - [Kubernetes Manifest Validator - tips](https://devtools.surf/tools/k8s-manifest-validator/#tips): Paste YAML manifests to validate required fields; Check for common misconfigurations like missing resource limits; Validate label selectors match between services and deployments - [Kubernetes Manifest Validator - fun facts](https://devtools.surf/tools/k8s-manifest-validator/#fun-facts): Kubernetes was originally developed at Google as 'Project Borg' later 'Seven of Nine' and open-sourced on June 7, 2014; A Kubernetes manifest must specify apiVersion, kind, and... - [Mock Server Config Generator](https://devtools.surf/tools/mock-server-config/): Generate stub responses from a JSON Schema - [Mock Server Config Generator - use cases](https://devtools.surf/tools/mock-server-config/#use-cases): Generate mock API responses for frontend development; Create stub services for integration testing in CI; Prototype API contracts before backend implementation begins; Simulate... - [Mock Server Config Generator - tips](https://devtools.surf/tools/mock-server-config/#tips): Provide a JSON Schema to auto-generate stub responses; Customize status codes and response headers in the config; Use generated configs with mock server tools like WireMock - [Mock Server Config Generator - fun facts](https://devtools.surf/tools/mock-server-config/#fun-facts): JSON Schema draft-04 was first published in 2013, and the latest draft 2020-12 added features like $dynamicRef and unevaluatedProperties; Martin Fowler coined the term 'service... ## Date / Time - [Timezone Converter](https://devtools.surf/tools/timezone-converter/): Convert a date-time between multiple timezones - [Timezone Converter - use cases](https://devtools.surf/tools/timezone-converter/#use-cases): Scheduling meetings across distributed international teams; Converting server UTC timestamps to local time for debugging; Planning deployment windows across multiple geographic... - [Timezone Converter - tips](https://devtools.surf/tools/timezone-converter/#tips): Convert meeting times across multiple timezones at once; Use UTC as the reference point for server-side timestamps; Account for daylight saving time shifts in your conversions - [Timezone Converter - fun facts](https://devtools.surf/tools/timezone-converter/#fun-facts): Time zones were first proposed by Sir Sandford Fleming in 1879 after missing a train in Ireland due to a printed schedule error; There are currently 38 distinct UTC offsets in use... - [Duration Calculator](https://devtools.surf/tools/duration-calculator/): Calculate the duration between two dates or times - [Duration Calculator - use cases](https://devtools.surf/tools/duration-calculator/#use-cases): Calculating sprint durations for agile project planning; Computing SLA response times from incident timestamps; Measuring elapsed time between deployment events; Determining... - [Duration Calculator - tips](https://devtools.surf/tools/duration-calculator/#tips): Enter two dates to see the exact duration between them; View results in multiple units: days, hours, minutes, seconds; Use this to calculate project timeline spans accurately - [Duration Calculator - fun facts](https://devtools.surf/tools/duration-calculator/#fun-facts): The ISO 8601 duration format e.g., P3Y6M4DT12H30M5S was standardized in 1988 and is used by many programming language date libraries; A tropical year is actually 365.24219 days,... - [Age Calculator](https://devtools.surf/tools/age-calculator/): Calculate exact age in years, months, and days from a birthdate - [Age Calculator - use cases](https://devtools.surf/tools/age-calculator/#use-cases): Testing age verification logic for registration forms; Calculating user ages for COPPA or GDPR compliance checks; Verifying eligibility dates for age-restricted features;... - [Age Calculator - tips](https://devtools.surf/tools/age-calculator/#tips): Enter a birthdate to see exact age in years, months, and days; Accounts for leap years in the calculation automatically; Use this to verify age-related validation logic in your... - [Age Calculator - fun facts](https://devtools.surf/tools/age-calculator/#fun-facts): People born on February 29 leap day technically have a birthday only once every 4 years; as of 2024, roughly 5 million people share this birthday; The oldest verified person ever... - [Working Day Calculator](https://devtools.surf/tools/working-day-calculator/): Count business days between two dates excluding weekends - [Working Day Calculator - use cases](https://devtools.surf/tools/working-day-calculator/#use-cases): Estimating project delivery dates excluding weekends; Calculating SLA deadlines in business days for support tickets; Planning sprint schedules accounting for non-working days;... - [Working Day Calculator - tips](https://devtools.surf/tools/working-day-calculator/#tips): Excludes weekends automatically from the day count; Use this to calculate project delivery date estimates; Count business days between milestones for SLA tracking - [Working Day Calculator - fun facts](https://devtools.surf/tools/working-day-calculator/#fun-facts): The five-day work week became standard in the U.S. after Henry Ford adopted it for Ford Motor Company in 1926; In 2022, Iceland completed the world's largest trial of a four-day... - [Week Number Lookup](https://devtools.surf/tools/week-number-lookup/): Find the ISO week number for any date - [Week Number Lookup - use cases](https://devtools.surf/tools/week-number-lookup/#use-cases): Aligning sprint numbers with ISO week numbers for planning; Generating weekly report headers with correct week identifiers; Mapping manufacturing batch codes to ISO week... - [Week Number Lookup - tips](https://devtools.surf/tools/week-number-lookup/#tips): Enter any date to find its ISO 8601 week number instantly; Note that ISO weeks start on Monday, not Sunday; Check which year an ISO week belongs to at year boundaries - [Week Number Lookup - fun facts](https://devtools.surf/tools/week-number-lookup/#fun-facts): ISO 8601 defines week 1 as the week containing the first Thursday of January, which can cause the last days of December to fall in week 1 of the next year; The ISO week numbering... - [Date Offset Calculator](https://devtools.surf/tools/date-offset/): Add/subtract days, weeks, months, years with weekday result - [Date Offset Calculator - use cases](https://devtools.surf/tools/date-offset/#use-cases): Calculating project deadlines by adding business days to a start date; Finding expiration dates for certificates or subscriptions; Computing SLA due dates for support ticket... - [Date Offset Calculator - tips](https://devtools.surf/tools/date-offset/#tips): Enter a start date and add days, weeks, or months at once; Check the weekday result to avoid scheduling on weekends; Use negative offsets to calculate past dates from a reference - [Date Offset Calculator - fun facts](https://devtools.surf/tools/date-offset/#fun-facts): The Gregorian calendar, introduced by Pope Gregory XIII in October 1582, skipped 10 days to correct the drift accumulated under the Julian calendar; A date exactly 10,000 days... - [Cron Humanizer](https://devtools.surf/tools/cron-humanizer/): Explain a cron expression in English + show the next 5 run times - [Cron Humanizer - use cases](https://devtools.surf/tools/cron-humanizer/#use-cases): DevOps engineers verifying cron schedules before deploying to production; Backend developers debugging why a scheduled job runs at unexpected times; SREs translating inherited... - [Cron Humanizer - tips](https://devtools.surf/tools/cron-humanizer/#tips): Paste your crontab line to see the next 5 scheduled run times; Use the English translation to verify complex expressions like 0 */6 * * 1-5; Check edge cases like February 30th or... - [Cron Humanizer - fun facts](https://devtools.surf/tools/cron-humanizer/#fun-facts): The cron daemon was created by Ken Thompson for Unix Version 7 in 1979. - [Date Format Converter](https://devtools.surf/tools/date-format-converter/): Show the same instant in ISO, RFC-2822, epoch, DD/MM/YYYY and more - [Date Format Converter - tips](https://devtools.surf/tools/date-format-converter/#tips): Accepts ISO 8601, RFC 2822, epoch seconds, epoch millis; All output formats shown at once - no need to switch modes; UTC times are displayed - check your timezone for local... - [Date Format Converter - fun facts](https://devtools.surf/tools/date-format-converter/#fun-facts): ISO 8601 dates sort alphabetically into chronological order, which is why they're the de-facto standard for filenames and logs; The ISO 8601 standard also defines week numbering -... - [Countdown Timer Builder](https://devtools.surf/tools/countdown-timer-builder/): Build a live <div>-and-JS countdown to any ISO target timestamp - [Countdown Timer Builder - use cases](https://devtools.surf/tools/countdown-timer-builder/#use-cases): Marketing teams building product launch countdown pages; Event organizers embedding live countdowns in landing pages; E-commerce devs creating flash sale timer widgets; Educators... - [Countdown Timer Builder - tips](https://devtools.surf/tools/countdown-timer-builder/#tips): Set the target timestamp in ISO 8601 format for precision; Copy the generated HTML/JS snippet into any web page; The countdown updates live in the browser via setInterval - [Countdown Timer Builder - fun facts](https://devtools.surf/tools/countdown-timer-builder/#fun-facts): The JavaScript Date object, which powers browser countdowns, counts milliseconds since January 1, 1970 Unix epoch and will overflow its 32-bit integer limit on January 19, 2038;... - [Pomodoro Timer Planner](https://devtools.surf/tools/pomodoro-timer/): Plan a 25/5 Pomodoro session with long break - outputs a timeline - [Pomodoro Timer Planner - tips](https://devtools.surf/tools/pomodoro-timer/#tips): Francesco Cirillo's original Pomodoro technique uses 25/5/15 intervals; Four work blocks + three short breaks = one 'pomodoro set'; Take the long break after completing a full set... - [Pomodoro Timer Planner - fun facts](https://devtools.surf/tools/pomodoro-timer/#fun-facts): Cirillo invented the Pomodoro Technique as a university student in the late 1980s, using a tomato-shaped kitchen timer pomodoro = 'tomato' in Italian; Research shows that 52... - [ICS Calendar Event Generator](https://devtools.surf/tools/ics-event-generator/): Build a standards-compliant .ics event file - import to any calendar - [ICS Calendar Event Generator - use cases](https://devtools.surf/tools/ics-event-generator/#use-cases): Event organizers distributing calendar invites via download links; Marketing teams creating 'Add to Calendar' buttons for webinars; HR departments sharing company holiday... - [ICS Calendar Event Generator - tips](https://devtools.surf/tools/ics-event-generator/#tips): Fill in start, end, and summary for a valid .ics file; The generated file imports into Google, Apple, and Outlook; Add RRULE fields for recurring event definitions - [ICS Calendar Event Generator - fun facts](https://devtools.surf/tools/ics-event-generator/#fun-facts): The iCalendar format .ics was standardized in RFC 2445 in November 1998, and later updated as RFC 5545 in 2009 - it remains the universal calendar interchange format; The... - [ISO 8601 Duration Parser](https://devtools.surf/tools/iso-duration-parser/): Parse P3Y6M4DT12H30M5S into years, months, weeks, days, time - [ISO 8601 Duration Parser - use cases](https://devtools.surf/tools/iso-duration-parser/#use-cases): API developers parsing ISO 8601 durations from YouTube or Azure; Backend devs converting duration strings to human-readable formats; DevOps engineers interpreting interval fields... - [ISO 8601 Duration Parser - tips](https://devtools.surf/tools/iso-duration-parser/#tips): Paste a full ISO 8601 duration like P3Y6M4DT12H30M5S; Output breaks down years, months, days, hours, minutes, seconds; Use the T separator to distinguish date from time components - [ISO 8601 Duration Parser - fun facts](https://devtools.surf/tools/iso-duration-parser/#fun-facts): ISO 8601 duration format was first published in 1988 and uses the 'P' prefix for 'period' - making P1Y2M3D mean '1 year, 2 months, 3 days.'; YouTube's Data API v3 returns video... - [Date Range Generator](https://devtools.surf/tools/date-range-generator/): List every date between start and end - step N days/weeks/months - [Date Range Generator - use cases](https://devtools.surf/tools/date-range-generator/#use-cases): Data analysts generating date series for time-series charts; Backend devs creating test fixtures with sequential timestamps; Finance teams listing business days between reporting... - [Date Range Generator - tips](https://devtools.surf/tools/date-range-generator/#tips): Set step to 7 days for weekly date sequences; Use month steps for fiscal quarter boundary calculations; Copy the date list directly into spreadsheet or test data - [Date Range Generator - fun facts](https://devtools.surf/tools/date-range-generator/#fun-facts): The Gregorian calendar, adopted in 1582 by Pope Gregory XIII, corrected the Julian calendar's drift by skipping 10 days - October 4 was directly followed by October 15;... - [Weekday Calendar](https://devtools.surf/tools/weekday-calendar/): Render a month-at-a-glance calendar grid - YYYY-MM input - [Weekday Calendar - use cases](https://devtools.surf/tools/weekday-calendar/#use-cases): Project managers visualizing sprint timelines month by month; Developers checking what day of the week a release date falls on; HR teams planning shift schedules around weekday... - [Weekday Calendar - tips](https://devtools.surf/tools/weekday-calendar/#tips): Enter a YYYY-MM value to render any month grid instantly; Use the grid to plan sprint schedules and deadlines visually; Navigate between months to compare weekday distributions - [Weekday Calendar - fun facts](https://devtools.surf/tools/weekday-calendar/#fun-facts): The 7-day week has no astronomical basis - it was adopted from the Babylonian calendar around 600 BCE and spread through Roman and later Christian traditions; The ISO 8601... ## Security / Crypto - [JWT Encoder](https://devtools.surf/tools/jwt-encoder/): Encode a JWT token from header, payload, and secret - [JWT Encoder - use cases](https://devtools.surf/tools/jwt-encoder/#use-cases): Creating test JWTs for local API development and debugging; Generating mock auth tokens for integration test suites; Encoding custom claims for JWT-based feature flag systems;... - [JWT Encoder - tips](https://devtools.surf/tools/jwt-encoder/#tips): Set the algorithm and secret to generate a signed JWT; Include standard claims like exp, iat, and sub in the payload; Test your encoding against the expected token format - [JWT Encoder - fun facts](https://devtools.surf/tools/jwt-encoder/#fun-facts): JWT RFC 7519 was authored by Michael Jones, John Bradley, and Nat Sakimura and published in May 2015; JWTs are not encrypted by default; the payload is merely Base64URL-encoded,... - [Bcrypt Hash Tester](https://devtools.surf/tools/bcrypt-hash-tester/): Generate bcrypt hashes and verify passwords against hashes - [Bcrypt Hash Tester - use cases](https://devtools.surf/tools/bcrypt-hash-tester/#use-cases): Testing password hashing during authentication system development; Verifying bcrypt hash compatibility across backend services; Comparing hash output at different cost factors for... - [Bcrypt Hash Tester - tips](https://devtools.surf/tools/bcrypt-hash-tester/#tips): Generate hashes with different cost factors to compare speed; Verify a plaintext password against an existing bcrypt hash; Use cost factor 12 as a balance between security and... - [Bcrypt Hash Tester - fun facts](https://devtools.surf/tools/bcrypt-hash-tester/#fun-facts): Bcrypt was designed by Niels Provos and David Mazieres in 1999, based on the Blowfish cipher by Bruce Schneier; Bcrypt's adaptive cost factor means you can increase hashing time... - [HMAC Generator](https://devtools.surf/tools/hmac-generator/): Generate HMAC signatures using SHA-256, SHA-512, and more - [HMAC Generator - use cases](https://devtools.surf/tools/hmac-generator/#use-cases): Verifying webhook signatures from payment providers like Stripe; Signing API requests for services requiring HMAC authentication; Generating message authentication codes for data... - [HMAC Generator - tips](https://devtools.surf/tools/hmac-generator/#tips): Choose SHA-256 for general-purpose webhook signature verification; Use SHA-512 for higher security requirements in API signing; Paste the secret key and message to generate the... - [HMAC Generator - fun facts](https://devtools.surf/tools/hmac-generator/#fun-facts): HMAC was published in RFC 2104 in 1997 by Mihir Bellare, Ran Canetti, and Hugo Krawczyk, and its security proof remains unbroken; HMAC-SHA256 is used by AWS Signature Version 4 to... - [Password Strength Analyzer](https://devtools.surf/tools/password-strength-analyzer/): Analyze password strength with entropy and crack-time estimates - [Password Strength Analyzer - use cases](https://devtools.surf/tools/password-strength-analyzer/#use-cases): Testing password policy enforcement before deploying to production; Educating users about password strength through visual feedback; Auditing existing password requirements... - [Password Strength Analyzer - tips](https://devtools.surf/tools/password-strength-analyzer/#tips): Check entropy bits to understand mathematical password strength; Review crack-time estimates for different attack scenarios; Look for patterns like keyboard walks or common... - [Password Strength Analyzer - fun facts](https://devtools.surf/tools/password-strength-analyzer/#fun-facts): The zxcvbn algorithm, created by Dan Wheeler at Dropbox in 2012, estimates password strength by modeling real-world attack patterns; The most common password worldwide in 2023 was... - [TOTP / 2FA Generator](https://devtools.surf/tools/totp-generator/): Generate time-based one-time passwords from a secret key - [TOTP / 2FA Generator - tips](https://devtools.surf/tools/totp-generator/#tips): The code auto-refreshes when the 30-second period expires; The circular timer shows remaining validity time; Use this to verify your TOTP secret is configured correctly - [TOTP / 2FA Generator - fun facts](https://devtools.surf/tools/totp-generator/#fun-facts): TOTP codes change every 30 seconds by default. The algorithm RFC 6238 uses HMAC-SHA1 with the current time divided by the period as the counter; Google Authenticator originally... - [SAML Response Decoder](https://devtools.surf/tools/saml-decoder/): Decode Base64-encoded SAML responses into readable XML - [SAML Response Decoder - use cases](https://devtools.surf/tools/saml-decoder/#use-cases): Debugging SSO login failures by inspecting SAML assertions; Verifying identity provider attribute mappings during integration; Extracting user claims from SAML responses for... - [SAML Response Decoder - tips](https://devtools.surf/tools/saml-decoder/#tips): Paste Base64-encoded SAML responses to decode the XML; Inspect assertion attributes for correct user claim mapping; Check the signature and certificate references for validity - [SAML Response Decoder - fun facts](https://devtools.surf/tools/saml-decoder/#fun-facts): SAML 2.0 was published in March 2005 by OASIS and remains the dominant SSO protocol in enterprise environments over 19 years later; A single SAML response can contain multiple... - [OAuth PKCE Generator](https://devtools.surf/tools/oauth-pkce-generator/): Generate code_verifier, code_challenge, and state for OAuth PKCE flows - [OAuth PKCE Generator - use cases](https://devtools.surf/tools/oauth-pkce-generator/#use-cases): Generating PKCE parameters for single-page application OAuth flows; Testing OAuth authorization code flow with PKCE in development; Creating code challenge pairs for mobile app... - [OAuth PKCE Generator - tips](https://devtools.surf/tools/oauth-pkce-generator/#tips): Generate a fresh code_verifier and code_challenge pair per flow; Use S256 challenge method instead of plain for security; Copy the state parameter to prevent cross-site request... - [OAuth PKCE Generator - fun facts](https://devtools.surf/tools/oauth-pkce-generator/#fun-facts): PKCE RFC 7636 was published in September 2015 and was originally designed to protect mobile apps from authorization code interception; The acronym PKCE is pronounced 'pixy' and... - [SSH Key Fingerprint](https://devtools.surf/tools/ssh-key-fingerprint/): Calculate the fingerprint of an SSH public key - [SSH Key Fingerprint - use cases](https://devtools.surf/tools/ssh-key-fingerprint/#use-cases): Verifying SSH key identity when adding keys to remote servers; Matching fingerprints between local keys and GitHub account keys; Auditing authorized_keys files for unknown key... - [SSH Key Fingerprint - tips](https://devtools.surf/tools/ssh-key-fingerprint/#tips): Paste your public key to calculate its SHA-256 fingerprint; Compare fingerprints to verify key identity during SSH setup; Use this to match keys listed in authorized_keys files - [SSH Key Fingerprint - fun facts](https://devtools.surf/tools/ssh-key-fingerprint/#fun-facts): SSH was invented by Tatu Ylonen in 1995 after a password-sniffing attack on his university network in Finland; OpenSSH switched from MD5 to SHA-256 fingerprints by default in... - [CSR Decoder](https://devtools.surf/tools/csr-decoder/): Decode PEM-encoded Certificate Signing Requests - [CSR Decoder - use cases](https://devtools.surf/tools/csr-decoder/#use-cases): Verifying CSR contents before submitting to a certificate authority; Checking that SANs include all required domains and subdomains; Auditing key size and algorithm in CSRs for... - [CSR Decoder - tips](https://devtools.surf/tools/csr-decoder/#tips): Paste a PEM-encoded CSR to view the embedded certificate details; Verify the Common Name and SANs before submitting to a CA; Check the key algorithm and size meet your CA's... - [CSR Decoder - fun facts](https://devtools.surf/tools/csr-decoder/#fun-facts): Certificate Signing Requests use PKCS#10 format, defined in RFC 2986, first published in 2000 by RSA Laboratories; A CSR contains the public key but not the private key, ensuring... - [Secrets Scanner](https://devtools.surf/tools/secrets-scanner/): Scan text/code for leaked API keys, tokens, and credentials - [Secrets Scanner - tips](https://devtools.surf/tools/secrets-scanner/#tips): Paste entire files - it scans line by line; Detects AWS keys, GitHub tokens, Stripe keys, JWTs, and more; Results show severity and line numbers - [Secrets Scanner - fun facts](https://devtools.surf/tools/secrets-scanner/#fun-facts): GitHub scans over 200 million commits per year for leaked secrets. - [RSA Keypair Generator](https://devtools.surf/tools/rsa-keypair-generator/): Generate RSA public/private keypairs in PEM format - [RSA Keypair Generator - use cases](https://devtools.surf/tools/rsa-keypair-generator/#use-cases): Backend developers generating keys for JWT token signing; DevOps engineers creating SSH keypairs for server access; Security engineers setting up mTLS certificate authentication;... - [RSA Keypair Generator - tips](https://devtools.surf/tools/rsa-keypair-generator/#tips): Use 2048-bit minimum key size for production security; Download the private key immediately - it cannot be recovered; Generate separate keypairs for development and production use - [RSA Keypair Generator - fun facts](https://devtools.surf/tools/rsa-keypair-generator/#fun-facts): RSA was invented in 1977 by Ron Rivest, Adi Shamir, and Leonard Adleman at MIT - though Clifford Cocks at GCHQ independently discovered a similar system in 1973 but it remained... - [JWT Timeline](https://devtools.surf/tools/jwt-timeline/): Decode JWT + show iat / nbf / exp as ISO + delta from now - [JWT Timeline - use cases](https://devtools.surf/tools/jwt-timeline/#use-cases): Backend developers debugging expired token errors in API responses; Security engineers verifying token lifetimes comply with security policies; DevOps teams troubleshooting clock... - [JWT Timeline - tips](https://devtools.surf/tools/jwt-timeline/#tips): Paste a JWT to see iat, nbf, and exp as readable ISO timestamps; Check the delta from now to see if a token is expired or not yet valid; Use it to debug token lifetime issues in... - [JWT Timeline - fun facts](https://devtools.surf/tools/jwt-timeline/#fun-facts): JWT timestamps use Unix epoch seconds seconds since January 1, 1970, not milliseconds - a common source of bugs when JavaScript's Date.now returns milliseconds; The 'nbf' not... - [AES Encrypt / Decrypt](https://devtools.surf/tools/aes-encrypt-decrypt/): AES-256-GCM encryption with authenticated ciphertext iv:tag:body - [AES Encrypt / Decrypt - tips](https://devtools.surf/tools/aes-encrypt-decrypt/#tips): Uses AES-256-GCM - authenticated encryption; Output format: iv:tag:ciphertext all base64; Any key length is accepted; it's SHA-256'd to 32 bytes internally - [AES Encrypt / Decrypt - fun facts](https://devtools.surf/tools/aes-encrypt-decrypt/#fun-facts): AES Rijndael was selected by NIST in 2001 after a 5-year public competition. - [ROT13 Cipher](https://devtools.surf/tools/rot13-cipher/): Classic Caesar-13 substitution - encrypt and decrypt are the same op - [ROT13 Cipher - use cases](https://devtools.surf/tools/rot13-cipher/#use-cases): Forum users encoding spoilers in discussion threads; Developers testing basic cipher and string manipulation logic; CTF participants decoding beginner-level cryptography... - [ROT13 Cipher - tips](https://devtools.surf/tools/rot13-cipher/#tips): Apply ROT13 twice to get back the original text; Use it to hide puzzle spoilers in plain-text forums; ROT13 is its own inverse - one operation encrypts and decrypts - [ROT13 Cipher - fun facts](https://devtools.surf/tools/rot13-cipher/#fun-facts): ROT13 became popular on Usenet in the 1980s as a way to hide spoilers and offensive jokes - the rec.humor group was one of its earliest adopters; ROT13 is a special case of the... - [Caesar Cipher](https://devtools.surf/tools/caesar-cipher/): Shift letters by any N positions 26 - enc/dec with custom shift - [Caesar Cipher - tips](https://devtools.surf/tools/caesar-cipher/#tips): shift=3 is the 'classic' Caesar shift Julius Caesar used; shift=13 gives ROT13 - decryption is the same operation; Only touches letters; numbers and punctuation pass through... - [Caesar Cipher - fun facts](https://devtools.surf/tools/caesar-cipher/#fun-facts): Caesar is recorded using shift=3 in Suetonius's 'Life of Julius Caesar' AD 121. - [Vigenre Cipher](https://devtools.surf/tools/vigenere-cipher/): Polyalphabetic cipher using a keyword - stronger than Caesar - [Vigenre Cipher - tips](https://devtools.surf/tools/vigenere-cipher/#tips): Provide a key=WORD parameter; Same key encrypts and decrypts with op=dec; Non-letter characters are preserved punctuation, numbers, spaces - [Vigenre Cipher - fun facts](https://devtools.surf/tools/vigenere-cipher/#fun-facts): The Vigenre cipher was considered unbreakable for 300 years - it earned the nickname 'le chiffre indchiffrable' in 19th-century France; Charles Babbage broke the Vigenre cipher... - [Atbash Cipher](https://devtools.surf/tools/atbash-cipher/): Hebrew alphabet substitution - AtoZ, BtoY - self-inverse - [Atbash Cipher - use cases](https://devtools.surf/tools/atbash-cipher/#use-cases): Cryptography students studying classical cipher history; Puzzle designers creating multi-layer encoding challenges; CTF competitors recognizing and decoding Atbash-encrypted... - [Atbash Cipher - tips](https://devtools.surf/tools/atbash-cipher/#tips): Atbash is self-inverse: encode and decode are the same; Only alphabetic characters are substituted; numbers pass through; Combine with other ciphers for layered encoding puzzles - [Atbash Cipher - fun facts](https://devtools.surf/tools/atbash-cipher/#fun-facts): The Atbash cipher originates from ancient Hebrew cryptography, with its name derived from the first, last, second, and second-to-last Hebrew letters: Aleph-Tav-Beth-Shin; Atbash... - [Rail Fence Cipher](https://devtools.surf/tools/rail-fence-cipher/): Transposition cipher in a zig-zag pattern across N rails - enc/dec - [Rail Fence Cipher - use cases](https://devtools.surf/tools/rail-fence-cipher/#use-cases): Cryptography students learning transposition cipher mechanics; CTF competitors solving multi-layer cipher challenges; Puzzle game developers implementing classic encryption... - [Rail Fence Cipher - tips](https://devtools.surf/tools/rail-fence-cipher/#tips): Increase rail count for stronger transposition scrambling; Two rails produce a simple odd/even character interleave; Switch between encrypt and decrypt modes to verify output - [Rail Fence Cipher - fun facts](https://devtools.surf/tools/rail-fence-cipher/#fun-facts): The Rail Fence cipher was used during the American Civil War by both Union and Confederate forces as a quick field encryption method; Unlike substitution ciphers, the Rail Fence... ## Web / Frontend - [Meta Tags / OG Previewer](https://devtools.surf/tools/meta-tag-previewer/): Preview how meta tags and OpenGraph data appear on social platforms - [Meta Tags / OG Previewer - use cases](https://devtools.surf/tools/meta-tag-previewer/#use-cases): Previewing social share cards before publishing blog posts; Verifying Open Graph images render correctly on Facebook and LinkedIn; Checking meta descriptions fit within Google... - [Meta Tags / OG Previewer - tips](https://devtools.surf/tools/meta-tag-previewer/#tips): Preview how your page appears in Google, Twitter, and Facebook; Check og:image dimensions meet platform recommendations; Verify title and description lengths avoid truncation on... - [Meta Tags / OG Previewer - fun facts](https://devtools.surf/tools/meta-tag-previewer/#fun-facts): The Open Graph protocol was created by Facebook in 2010, and its og: prefix stands for 'Open Graph.'; Twitter Cards were introduced in 2012 and use their own twitter: meta tag... - [Tailwind to CSS](https://devtools.surf/tools/tailwind-to-css/): Convert Tailwind CSS classes to vanilla CSS properties - [Tailwind to CSS - use cases](https://devtools.surf/tools/tailwind-to-css/#use-cases): Learning CSS equivalents of unfamiliar Tailwind utility classes; Converting Tailwind components to vanilla CSS during framework migration; Generating CSS snippets for email... - [Tailwind to CSS - tips](https://devtools.surf/tools/tailwind-to-css/#tips): Paste Tailwind classes to see the generated CSS properties; Use this to learn what each utility class does under the hood; Convert component styles when migrating away from... - [Tailwind to CSS - fun facts](https://devtools.surf/tools/tailwind-to-css/#fun-facts): Tailwind CSS was created by Adam Wathan and released in November 2017, pioneering the utility-first CSS methodology; Tailwind CSS v3.0 introduced Just-in-Time compilation by... - [HTML to React JSX](https://devtools.surf/tools/html-to-jsx/): Convert HTML to valid React JSX syntax - [HTML to React JSX - use cases](https://devtools.surf/tools/html-to-jsx/#use-cases): Converting HTML templates to React components during migration; Transforming design tool HTML exports into valid JSX syntax; Adapting HTML snippets from documentation into React... - [HTML to React JSX - tips](https://devtools.surf/tools/html-to-jsx/#tips): Converts class to className and for to htmlFor automatically; Handles self-closing tags and boolean attributes for React; Paste HTML from design tools to get React-ready JSX... - [HTML to React JSX - fun facts](https://devtools.surf/tools/html-to-jsx/#fun-facts): JSX was created by Facebook and introduced alongside React in 2013; it was initially criticized for 'mixing HTML with JavaScript.'; JSX is not valid JavaScript; it requires a... - [HTML to Markdown](https://devtools.surf/tools/html-to-markdown/): Convert HTML content to Markdown format - [HTML to Markdown - use cases](https://devtools.surf/tools/html-to-markdown/#use-cases): Migrating CMS blog content to static site generators like Hugo; Converting HTML documentation to Markdown for GitHub wikis; Preparing web content for Markdown-based knowledge... - [HTML to Markdown - tips](https://devtools.surf/tools/html-to-markdown/#tips): Convert blog posts from CMS HTML to Markdown for static sites; Preserves heading hierarchy and link formatting accurately; Use this to prepare content for Markdown-based... - [HTML to Markdown - fun facts](https://devtools.surf/tools/html-to-markdown/#fun-facts): Markdown was created by John Gruber and Aaron Swartz in 2004 with the goal of being readable as plain text without rendering; CommonMark, an effort to standardize Markdown, was... - [SVG to React Component](https://devtools.surf/tools/svg-to-react/): Convert SVG markup into a React component - [SVG to React Component - use cases](https://devtools.surf/tools/svg-to-react/#use-cases): Converting icon SVGs into reusable React components; Transforming Figma SVG exports into prop-driven React icons; Building an icon library with dynamically colorable SVG... - [SVG to React Component - tips](https://devtools.surf/tools/svg-to-react/#tips): Converts SVG attributes to JSX-compatible camelCase props; Wraps the SVG in a functional React component automatically; Handles xmlns and viewBox attributes for proper React... - [SVG to React Component - fun facts](https://devtools.surf/tools/svg-to-react/#fun-facts): React components for SVGs became popular after the Create React App team added SVG component imports in version 2.0 2018; SVGR, the most popular SVG-to-React tool, was created by... - [CSS Unit Converter](https://devtools.surf/tools/css-unit-converter/): Convert between px, rem, em, vw, vh, and other CSS units - [CSS Unit Converter - use cases](https://devtools.surf/tools/css-unit-converter/#use-cases): Converting pixel-based designs to rem units for accessibility; Translating Figma pixel values to responsive CSS units; Calculating viewport units for full-screen hero section... - [CSS Unit Converter - tips](https://devtools.surf/tools/css-unit-converter/#tips): Set your base font size to get accurate rem conversions; Convert px to rem for scalable, accessible typography; Use vw/vh conversions for responsive viewport-based layouts - [CSS Unit Converter - fun facts](https://devtools.surf/tools/css-unit-converter/#fun-facts): The rem unit was introduced in CSS3 and stands for 'root em,' always relative to the html element's font size; The default browser font size of 16px has remained unchanged since... - [robots.txt Validator](https://devtools.surf/tools/robots-txt-validator/): Validate robots.txt syntax and check for common issues - [robots.txt Validator - use cases](https://devtools.surf/tools/robots-txt-validator/#use-cases): Validate robots.txt before deploying a new website; Debug why search engines are not indexing certain pages; Audit crawler access rules during an SEO migration; Ensure staging... - [robots.txt Validator - tips](https://devtools.surf/tools/robots-txt-validator/#tips): Check for syntax errors that could block search engine crawlers; Validate that your sitemap directive URL is correct; Test specific user-agent rules against known crawlers - [robots.txt Validator - fun facts](https://devtools.surf/tools/robots-txt-validator/#fun-facts): The robots.txt standard was proposed by Martijn Koster in June 1994 and has never become an official RFC, yet every major search engine respects it; Google officially documented... - [Sitemap XML Validator](https://devtools.surf/tools/sitemap-validator/): Validate sitemap.xml structure and check for common issues - [Sitemap XML Validator - use cases](https://devtools.surf/tools/sitemap-validator/#use-cases): SEO specialists auditing sitemap coverage before site launches; Web developers verifying sitemap generation in CMS builds; Marketing teams ensuring new landing pages appear in... - [Sitemap XML Validator - tips](https://devtools.surf/tools/sitemap-validator/#tips): Check for URLs exceeding the 50,000 entry limit per sitemap; Validate lastmod dates are in W3C Datetime format; Ensure the sitemap index file references all child sitemaps - [Sitemap XML Validator - fun facts](https://devtools.surf/tools/sitemap-validator/#fun-facts): The Sitemaps protocol was jointly created by Google, Yahoo, and Microsoft in 2006 and submitted to sitemaps.org - a rare moment of cooperation among search engine rivals; A single... - [RSS/Atom Feed Validator](https://devtools.surf/tools/rss-feed-validator/): Validate RSS 2.0 and Atom feed XML structure - [RSS/Atom Feed Validator - use cases](https://devtools.surf/tools/rss-feed-validator/#use-cases): Publishers verifying feed validity before submitting to aggregators; Podcast developers validating iTunes-compatible RSS feeds; Blog developers testing auto-generated Atom feed... - [RSS/Atom Feed Validator - tips](https://devtools.surf/tools/rss-feed-validator/#tips): Check for required channel elements like title and link; Validate date formats match RFC 822 for RSS 2.0 feeds; Test Atom feeds for proper xmlns namespace declarations - [RSS/Atom Feed Validator - fun facts](https://devtools.surf/tools/rss-feed-validator/#fun-facts): RSS was originally created by Ramanathan V. Guha at Netscape in 1999 as 'RDF Site Summary' - the acronym has meant at least three different things over its history; The RSS vs... - [CSS Box Shadow Builder](https://devtools.surf/tools/css-box-shadow-builder/): Generate CSS box-shadow values from parameters - [CSS Box Shadow Builder - use cases](https://devtools.surf/tools/css-box-shadow-builder/#use-cases): Generate CSS for card hover effects and elevated UI components; Build neumorphic soft UI designs with inset and outset shadow combinations; Create Material Design elevation... - [CSS Box Shadow Builder - tips](https://devtools.surf/tools/css-box-shadow-builder/#tips): Add multiple shadow layers to create realistic depth and soft ambient lighting effects; Toggle inset for inner shadows - useful for pressed-button states and input field styling;... - [CSS Box Shadow Builder - fun facts](https://devtools.surf/tools/css-box-shadow-builder/#fun-facts): Box shadows are one of the most expensive CSS properties to render. - [CSS Clip-Path Builder](https://devtools.surf/tools/css-clip-path-builder/): Generate CSS clip-path polygon values - [CSS Clip-Path Builder - use cases](https://devtools.surf/tools/css-clip-path-builder/#use-cases): Frontend developers creating non-rectangular section dividers; Designers building diagonal hero sections and geometric layouts; UI engineers implementing custom avatar shapes for... - [CSS Clip-Path Builder - tips](https://devtools.surf/tools/css-clip-path-builder/#tips): Start with preset shapes like circles and triangles to learn; Use percentage values for responsive clip paths; Combine clip-path with transitions for reveal animations - [CSS Clip-Path Builder - fun facts](https://devtools.surf/tools/css-clip-path-builder/#fun-facts): CSS clip-path evolved from the SVG clipPath element - the CSS property was first specified in the CSS Masking Module Level 1 draft in 2012; The polygon function in clip-path can... - [Flexbox Playground](https://devtools.surf/tools/flexbox-playground/): Generate CSS flexbox layouts from property combinations - [Flexbox Playground - tips](https://devtools.surf/tools/flexbox-playground/#tips): Click property pills to change layout instantly; Add or remove items to test wrapping behavior; The CSS output updates in real-time - [Flexbox Playground - fun facts](https://devtools.surf/tools/flexbox-playground/#fun-facts): Flexbox CSS Flexible Box Layout became a W3C Candidate Recommendation in 2012 but wasn't widely supported until 2015-2016; The flexbox spec went through 3 completely different... - [Cubic Bezier Editor](https://devtools.surf/tools/cubic-bezier-editor/): Generate CSS cubic-bezier timing functions from control points - [Cubic Bezier Editor - use cases](https://devtools.surf/tools/cubic-bezier-editor/#use-cases): Animators fine-tuning easing curves for UI transitions; Frontend developers matching design system motion specifications; UX engineers creating custom easing for... - [Cubic Bezier Editor - tips](https://devtools.surf/tools/cubic-bezier-editor/#tips): Drag control points to see real-time animation preview; Match common presets like ease-in-out before customizing; Export the cubic-bezier value directly into your CSS file - [Cubic Bezier Editor - fun facts](https://devtools.surf/tools/cubic-bezier-editor/#fun-facts): Bezier curves were independently developed by Pierre Bezier at Renault and Paul de Casteljau at Citroen in the early 1960s for designing automobile body shapes; CSS cubic-bezier... - [Accessibility Auditor](https://devtools.surf/tools/a11y-auditor/): Check HTML for common accessibility issues ARIA, alt text, headings - [Accessibility Auditor - use cases](https://devtools.surf/tools/a11y-auditor/#use-cases): Frontend developers auditing components before pull requests; QA teams running accessibility checks as part of test suites; Designers validating that HTML matches accessible... - [Accessibility Auditor - tips](https://devtools.surf/tools/a11y-auditor/#tips): Check all images for meaningful alt text descriptions; Verify heading levels follow a logical h1-h6 hierarchy; Ensure ARIA roles match their interactive element behavior - [Accessibility Auditor - fun facts](https://devtools.surf/tools/a11y-auditor/#fun-facts): The Web Content Accessibility Guidelines WCAG 1.0 were published by the W3C in 1999 - WCAG 2.0 followed in 2008, and WCAG 2.2 was released in October 2023; An estimated 1.3... - [Structured Data Tester](https://devtools.surf/tools/structured-data-tester/): Validate JSON-LD schema.org structured data - [Structured Data Tester - use cases](https://devtools.surf/tools/structured-data-tester/#use-cases): SEO specialists implementing rich snippets for search visibility; E-commerce developers adding Product schema for Google Shopping; Content publishers validating Article and FAQ... - [Structured Data Tester - tips](https://devtools.surf/tools/structured-data-tester/#tips): Validate required properties for each schema.org type; Test the JSON-LD output against Google's Rich Results requirements; Check for missing @context and @type declarations first - [Structured Data Tester - fun facts](https://devtools.surf/tools/structured-data-tester/#fun-facts): Schema.org was launched in June 2011 as a collaboration between Google, Bing, Yahoo, and Yandex - it defines over 800 types and 1,400 properties for structured data; JSON-LD was... - [OpenGraph Image Debugger](https://devtools.surf/tools/og-image-debugger/): Validate OpenGraph meta tags and preview how URLs appear when shared - [OpenGraph Image Debugger - use cases](https://devtools.surf/tools/og-image-debugger/#use-cases): Verifying social previews before launching a marketing page; Debugging why shared links show broken images on Slack; QA-testing OpenGraph tags across multiple social platforms;... - [OpenGraph Image Debugger - tips](https://devtools.surf/tools/og-image-debugger/#tips): Paste any URL to preview its Twitter and Facebook cards; Check for missing og:image dimensions that cause cropping; Validate that og:title stays under 60 characters for best... - [OpenGraph Image Debugger - fun facts](https://devtools.surf/tools/og-image-debugger/#fun-facts): The OpenGraph protocol was introduced by Facebook in 2010 at their f8 developer conference, turning any web page into a 'rich object' in a social graph; Twitter Cards launched in... - [Sitemap Generator](https://devtools.surf/tools/sitemap-generator/): Generate sitemap.xml from a list of URLs with priority and frequency - [Sitemap Generator - use cases](https://devtools.surf/tools/sitemap-generator/#use-cases): Generating sitemaps for a new website before submitting to Google Search Console; Creating XML sitemaps for static sites without CMS plugins; Updating sitemap priority values... - [Sitemap Generator - tips](https://devtools.surf/tools/sitemap-generator/#tips): Set higher priority values for your most important pages; Use weekly or daily changefreq for frequently updated content; Paste URLs one per line for bulk sitemap generation - [Sitemap Generator - fun facts](https://devtools.surf/tools/sitemap-generator/#fun-facts): The Sitemaps protocol was jointly adopted by Google, Yahoo, and Microsoft Bing in November 2006 as a shared standard at sitemaps.org; A single sitemap.xml file can contain at most... - [Favicon Checker](https://devtools.surf/tools/favicon-checker/): Validate favicon HTML tags and preview all icon sizes - [Favicon Checker - use cases](https://devtools.surf/tools/favicon-checker/#use-cases): Verifying favicon setup before launching a new website; Debugging why a site shows a blank tab icon in Chrome; Checking apple-touch-icon renders correctly on iOS home screens;... - [Favicon Checker - tips](https://devtools.surf/tools/favicon-checker/#tips): Verify all required sizes: 16x16, 32x32, and apple-touch-icon; Check that your favicon renders clearly at the smallest 16px size; Validate the HTML link tags match your actual... - [Favicon Checker - fun facts](https://devtools.surf/tools/favicon-checker/#fun-facts): The favicon was introduced by Internet Explorer 5 in 1999 as 'favorites icon' - a 16x16 ICO file placed in the site root as favicon.ico; Modern browsers support SVG favicons,... - [px to rem Table](https://devtools.surf/tools/px-rem-table/): Generate a pixel-to-rem scale table for a chosen base size - [px to rem Table - use cases](https://devtools.surf/tools/px-rem-table/#use-cases): Converting pixel-based Figma designs to rem-based CSS values; Building a responsive type scale for a design system; Creating a quick-reference card for frontend team onboarding;... - [px to rem Table - tips](https://devtools.surf/tools/px-rem-table/#tips): Set your base font size to match your CSS root font-size; Use the table as a reference when converting design mockups; Print or bookmark the generated table for quick access - [px to rem Table - fun facts](https://devtools.surf/tools/px-rem-table/#fun-facts): The rem unit was introduced in CSS3 and stands for 'root em' - it is always relative to the root element's font-size, unlike em which is relative to the parent; The default... - [URL Parser](https://devtools.surf/tools/url-parser/): Break a URL into scheme, host, path, query, fragment - [URL Parser - use cases](https://devtools.surf/tools/url-parser/#use-cases): Debugging redirect URLs with complex query parameters; Extracting individual URL components for routing logic; Validating URL structure before storing in a database; Parsing deep... - [URL Parser - tips](https://devtools.surf/tools/url-parser/#tips): Paste a full URL to see scheme, host, path, query, and fragment; Identify query parameters at a glance in the parsed output; Use this to debug malformed URLs in API integrations - [URL Parser - fun facts](https://devtools.surf/tools/url-parser/#fun-facts): The URL specification RFC 1738 was published by Tim Berners-Lee in December 1994, defining the format that billions of people use daily; The maximum practical URL length is about... - [Query String to JSON](https://devtools.surf/tools/query-string-to-json/): Turn ?a=1&b=foo into a flat JSON object - [Query String to JSON - use cases](https://devtools.surf/tools/query-string-to-json/#use-cases): Converting URL query parameters to JSON for API request bodies; Debugging OAuth callback URLs by parsing their query parameters; Extracting UTM tracking parameters from marketing... - [Query String to JSON - tips](https://devtools.surf/tools/query-string-to-json/#tips): Paste a full query string starting with ? or just key=value pairs; Nested bracket notation like ab=1 is parsed into objects; Use the JSON output to build request payloads in code - [Query String to JSON - fun facts](https://devtools.surf/tools/query-string-to-json/#fun-facts): Query strings were part of the original URL specification RFC 1738, 1994 and are separated from the path by the '?' character, a convention unchanged for 30 years; The maximum... - [Cookie Parser](https://devtools.surf/tools/cookie-parser/): Parse Cookie / Set-Cookie header into name=value + attribute list - [Cookie Parser - use cases](https://devtools.surf/tools/cookie-parser/#use-cases): Backend developers debugging Set-Cookie headers in API responses; Security engineers auditing cookie attributes for session management; QA testers verifying cookie settings across... - [Cookie Parser - tips](https://devtools.surf/tools/cookie-parser/#tips): Paste a raw Set-Cookie header to see all attributes parsed separately; Check the SameSite and Secure flags in the parsed output for security; Use it to compare multiple cookies... - [Cookie Parser - fun facts](https://devtools.surf/tools/cookie-parser/#fun-facts): The Set-Cookie header was first specified in RFC 2109 1997 by Netscape, but browsers diverged so much that a new RFC 6265 was needed in 2011; A single Set-Cookie header can only... - [HTTP Header Inspector](https://devtools.surf/tools/http-header-inspector/): Pretty-print raw HTTP headers with inline meanings - [HTTP Header Inspector - use cases](https://devtools.surf/tools/http-header-inspector/#use-cases): Frontend developers debugging failed API requests in the browser; Backend developers verifying correct response headers for caching and CORS; Security auditors checking for... - [HTTP Header Inspector - tips](https://devtools.surf/tools/http-header-inspector/#tips): Paste raw HTTP headers to see inline explanations for each one; Look for security headers like X-Content-Type-Options in the output; Use it to compare request and response headers... - [HTTP Header Inspector - fun facts](https://devtools.surf/tools/http-header-inspector/#fun-facts): HTTP/1.1 headers are plain text key-value pairs separated by CRLF - HTTP/2 compresses them using HPACK, reducing header overhead by up to 85%; The User-Agent header string has... ## Data / SQL - [CSV Viewer](https://devtools.surf/tools/csv-viewer/): View CSV data in a sortable, filterable table - [CSV Viewer - use cases](https://devtools.surf/tools/csv-viewer/#use-cases): Previewing exported database tables without opening Excel; Exploring API response data saved in CSV format; Quickly filtering large log files exported as CSV; Reviewing data... - [CSV Viewer - tips](https://devtools.surf/tools/csv-viewer/#tips): Sort columns by clicking headers to explore data quickly; Filter rows to find specific entries in large datasets; Paste CSV directly from clipboard for instant table rendering - [CSV Viewer - fun facts](https://devtools.surf/tools/csv-viewer/#fun-facts): CSV files have no official maximum size limit, but Excel can only open CSVs with up to 1,048,576 rows the row limit since Excel 2007; The CSV format predates personal computers;... - [CSV to SQL INSERT](https://devtools.surf/tools/csv-to-sql-insert/): Generate SQL INSERT statements from CSV data - [CSV to SQL INSERT - use cases](https://devtools.surf/tools/csv-to-sql-insert/#use-cases): Seed a dev database from a spreadsheet export; Migrate legacy CSV data into a relational database; Generate test fixture INSERTs from sample data; Convert analytics exports into... - [CSV to SQL INSERT - tips](https://devtools.surf/tools/csv-to-sql-insert/#tips): Wrap string columns in quotes for safe INSERT output; Set a custom table name before generating statements; Use batch mode to group rows into multi-value INSERTs - [CSV to SQL INSERT - fun facts](https://devtools.surf/tools/csv-to-sql-insert/#fun-facts): The SQL INSERT statement was part of the original SQL specification published by IBM in 1974, making it over 50 years old; CSV format was first used on IBM Fortran systems in... - [SQL to CSV Fixture](https://devtools.surf/tools/sql-to-csv/): Convert SQL INSERT statements to CSV format - [SQL to CSV Fixture - use cases](https://devtools.surf/tools/sql-to-csv/#use-cases): Extract test data from production SQL dumps; Create CSV fixtures from migration scripts; Convert seed files to spreadsheet-friendly format; Share database snapshots with... - [SQL to CSV Fixture - tips](https://devtools.surf/tools/sql-to-csv/#tips): Paste multiple INSERT statements at once for bulk conversion; Check the header row matches your expected column order; Use the output directly as a test fixture file - [SQL to CSV Fixture - fun facts](https://devtools.surf/tools/sql-to-csv/#fun-facts): RFC 4180 formally standardized the CSV format in 2005, over 30 years after it was first used in practice; The term 'fixture' in software testing originates from manufacturing,... - [TSV to CSV](https://devtools.surf/tools/tsv-csv-converter/): Convert between tab-separated and comma-separated values - [TSV to CSV - use cases](https://devtools.surf/tools/tsv-csv-converter/#use-cases): Convert spreadsheet clipboard data to CSV for scripts; Prepare TSV bioinformatics data for CSV-based pipelines; Switch between delimiters for different import tools; Clean up... - [TSV to CSV - tips](https://devtools.surf/tools/tsv-csv-converter/#tips): Preview the delimiter detection before converting; Handle fields with embedded tabs or commas correctly; Copy TSV directly from a spreadsheet for instant conversion - [TSV to CSV - fun facts](https://devtools.surf/tools/tsv-csv-converter/#fun-facts): TSV is the default export format for Google Sheets when using the IMPORTDATA function, not CSV; The tab character U+0009 was one of the original ASCII control characters defined... - [CSV Schema Validator](https://devtools.surf/tools/csv-schema-validator/): Validate CSV data against a column schema definition - [CSV Schema Validator - use cases](https://devtools.surf/tools/csv-schema-validator/#use-cases): Data engineers validating ETL pipeline output before loading; Analysts checking uploaded CSV files against expected schemas; API developers verifying CSV export format... - [CSV Schema Validator - tips](https://devtools.surf/tools/csv-schema-validator/#tips): Define column types like string, number, date for strict checks; Set required columns to catch missing fields in uploads; Add regex patterns for custom validation on specific... - [CSV Schema Validator - fun facts](https://devtools.surf/tools/csv-schema-validator/#fun-facts): CSV predates personal computers - IBM used comma-separated values on Fortran punch cards in the early 1960s, though the format wasn't standardized until RFC 4180 in 2005; RFC 4180... - [SQL to Prisma Schema](https://devtools.surf/tools/sql-to-prisma/): Convert SQL CREATE TABLE statements to Prisma schema - [SQL to Prisma Schema - use cases](https://devtools.surf/tools/sql-to-prisma/#use-cases): Backend developers migrating legacy SQL databases to Prisma ORM; Full-stack teams bootstrapping Prisma schemas from existing tables; Database architects converting SQL DDL for... - [SQL to Prisma Schema - tips](https://devtools.surf/tools/sql-to-prisma/#tips): Map SQL foreign keys to Prisma relation decorators accurately; Check that column defaults translate to @default annotations; Verify index and unique constraints carry over to the... - [SQL to Prisma Schema - fun facts](https://devtools.surf/tools/sql-to-prisma/#fun-facts): Prisma was founded in 2016 in Berlin by Johannes Schickling - it evolved from Graphcool, a GraphQL backend-as-a-service, into a standalone ORM for Node.js and TypeScript; Prisma's... - [CSV Column Remapper](https://devtools.surf/tools/csv-column-remapper/): Rename, reorder, or drop columns in CSV data - [CSV Column Remapper - use cases](https://devtools.surf/tools/csv-column-remapper/#use-cases): Data analysts standardizing column names across multiple sources; Privacy engineers removing PII columns before data sharing; ETL developers mapping vendor CSV formats to internal... - [CSV Column Remapper - tips](https://devtools.surf/tools/csv-column-remapper/#tips): Preview column mapping before applying to large datasets; Chain multiple renames in a single operation for efficiency; Drop sensitive columns like email or SSN before sharing data - [CSV Column Remapper - fun facts](https://devtools.surf/tools/csv-column-remapper/#fun-facts): Column renaming is one of the most common data wrangling operations - a 2020 Kaggle survey found that data scientists spend 45% of their time on data cleaning and preparation; The... - [CSV Validator with Schema](https://devtools.surf/tools/csv-validator-schema/): Validate CSV data against column type definitions - [CSV Validator with Schema - use cases](https://devtools.surf/tools/csv-validator-schema/#use-cases): Data engineers enforcing type safety on CSV pipeline inputs; Analysts validating survey data exports against expected formats; API developers checking CSV upload conformance... - [CSV Validator with Schema - tips](https://devtools.surf/tools/csv-validator-schema/#tips): Define type constraints like integer, float, date per column; Set nullable flags to catch unexpected empty cells; Add min/max range checks for numeric columns - [CSV Validator with Schema - fun facts](https://devtools.surf/tools/csv-validator-schema/#fun-facts): CSV validation became critical after the 2010s data science boom - a 2019 study found that 50% of data science project failures were due to data quality issues, not algorithm... - [SQL Identifier Caser](https://devtools.surf/tools/sql-case-mapper/): Convert SQL identifiers between snake, camel, and Pascal case - [SQL Identifier Caser - use cases](https://devtools.surf/tools/sql-case-mapper/#use-cases): Convert database column names to match application naming conventions; Map API response fields between snake_case backends and camelCase frontends; Prepare SQL schema identifiers... - [SQL Identifier Caser - tips](https://devtools.surf/tools/sql-case-mapper/#tips): Paste SQL column names or identifiers - each line is converted independently; Choose between snake_case, camelCase, and PascalCase output styles; Handles mixed separators:... - [SQL Identifier Caser - fun facts](https://devtools.surf/tools/sql-case-mapper/#fun-facts): SQL is case-insensitive for keywords by convention, but identifier casing varies wildly: PostgreSQL folds unquoted names to lowercase, MySQL depends on the OS file system, and... - [Column Extract](https://devtools.surf/tools/column-extract/): Pull the Nth whitespace-delimited column from each line - [Column Extract - use cases](https://devtools.surf/tools/column-extract/#use-cases): Extracting process IDs from ps aux output without writing awk commands; Pulling specific columns from CSV data during quick analysis; Isolating IP addresses from log file lines... - [Column Extract - tips](https://devtools.surf/tools/column-extract/#tips): Specify the column number to extract from whitespace-delimited text; Use this like a visual awk '{print $N}' command; Paste command output to quickly isolate a specific field - [Column Extract - fun facts](https://devtools.surf/tools/column-extract/#fun-facts): AWK, the language this tool mimics, was created by Alfred Aho, Peter Weinberger, and Brian Kernighan at Bell Labs in 1977 - the name is their initials; The 'cut' command in Unix,... ## AI / Modern Dev - [Token Counter](https://devtools.surf/tools/token-counter/): Estimate token count for OpenAI and Anthropic models - [Token Counter - use cases](https://devtools.surf/tools/token-counter/#use-cases): Estimate API costs before sending large prompts; Optimize system prompts to stay under token limits; Compare token efficiency across different LLM providers; Budget context window... - [Token Counter - tips](https://devtools.surf/tools/token-counter/#tips): Compare token counts across GPT-4 and Claude models side by side; Paste your full system prompt to estimate per-request cost; Check if your context fits within the model's token... - [Token Counter - fun facts](https://devtools.surf/tools/token-counter/#fun-facts): GPT-4's tiktoken BPE tokenizer uses roughly 100,000 tokens in its vocabulary, compared to about 50,000 in GPT-2's tokenizer; The word 'tokenization' in NLP was borrowed from... - [Prompt Template Renderer](https://devtools.surf/tools/prompt-template-renderer/): Render prompt templates with variable substitution - [Prompt Template Renderer - use cases](https://devtools.surf/tools/prompt-template-renderer/#use-cases): Build reusable prompt libraries for team workflows; Test prompt variations with different variable inputs; Prepare parameterized prompts for API automation; Document prompt... - [Prompt Template Renderer - tips](https://devtools.surf/tools/prompt-template-renderer/#tips): Define variables with {{name}} syntax for substitution; Test edge cases by swapping variable values quickly; Preview the final rendered prompt before sending to an API - [Prompt Template Renderer - fun facts](https://devtools.surf/tools/prompt-template-renderer/#fun-facts): Prompt engineering became a recognized job title in 2023, with salaries reaching $300,000 at major AI companies; The Mustache template syntax {{ }} was created by Chris Wanstrath... - [Markdown to Slack/Discord](https://devtools.surf/tools/markdown-to-slack/): Convert Markdown to Slack mrkdwn or Discord formatting - [Markdown to Slack/Discord - use cases](https://devtools.surf/tools/markdown-to-slack/#use-cases): Format README content for Slack announcements; Convert documentation snippets for Discord bot messages; Prepare release notes for cross-platform distribution; Reformat blog drafts... - [Markdown to Slack/Discord - tips](https://devtools.surf/tools/markdown-to-slack/#tips): Convert bold and italic syntax to Slack's mrkdwn format; Preview how links render in Slack vs Discord formatting; Handle code blocks which differ between Markdown and Slack - [Markdown to Slack/Discord - fun facts](https://devtools.surf/tools/markdown-to-slack/#fun-facts): Slack's mrkdwn format uses *bold* single asterisks instead of Markdown's **bold** double asterisks, catching many users off guard; Discord adopted a near-complete Markdown... - [Embedding Distance Calculator](https://devtools.surf/tools/embedding-distance/): Calculate cosine similarity between two text embedding vectors - [Embedding Distance Calculator - use cases](https://devtools.surf/tools/embedding-distance/#use-cases): ML engineers evaluating semantic search result quality; NLP researchers comparing sentence similarity across models; RAG developers tuning retrieval thresholds for AI chatbots;... - [Embedding Distance Calculator - tips](https://devtools.surf/tools/embedding-distance/#tips): Cosine similarity near 1.0 means vectors are semantically aligned; Compare multiple vectors to find the closest semantic match; Normalize vectors to unit length before computing... - [Embedding Distance Calculator - fun facts](https://devtools.surf/tools/embedding-distance/#fun-facts): Cosine similarity was first used in information retrieval by Gerard Salton's SMART system at Cornell in the 1960s, decades before modern embeddings existed; OpenAI's... - [Markdown to Slack mrkdwn](https://devtools.surf/tools/slack-mrkdwn/): Convert GitHub-flavor markdown to Slack's mrkdwn - [Markdown to Slack mrkdwn - use cases](https://devtools.surf/tools/slack-mrkdwn/#use-cases): Converting README snippets for posting in Slack channels; Preparing formatted announcements from Markdown drafts; Translating GitHub PR descriptions into Slack-readable messages;... - [Markdown to Slack mrkdwn - tips](https://devtools.surf/tools/slack-mrkdwn/#tips): Bold syntax converts from **text** to *text* automatically; Links convert from texturl to <url|text> format; Preview the mrkdwn output before pasting into Slack - [Markdown to Slack mrkdwn - fun facts](https://devtools.surf/tools/slack-mrkdwn/#fun-facts): Slack's markup language is called 'mrkdwn' without the vowels and intentionally differs from standard Markdown in several ways, including using single asterisks for bold; Slack... ## Fun / Niche - [Emoji / Unicode Lookup](https://devtools.surf/tools/emoji-unicode-lookup/): Search emoji by name and show Unicode codepoints - [Emoji / Unicode Lookup - tips](https://devtools.surf/tools/emoji-unicode-lookup/#tips): Search by keyword: 'heart', 'fire', 'rocket'; Paste an emoji to see its Unicode codepoints; Results show all matching keywords - [Emoji / Unicode Lookup - fun facts](https://devtools.surf/tools/emoji-unicode-lookup/#fun-facts): There are over 3,600 emoji in Unicode 15.0. The most-used emoji worldwide is the 'Face with Tears of Joy' though 'Red Heart' is catching up; Emoji originated in 1999 from... - [NATO Phonetic Alphabet](https://devtools.surf/tools/nato-phonetic/): Convert text to NATO phonetic alphabet spelling - [NATO Phonetic Alphabet - use cases](https://devtools.surf/tools/nato-phonetic/#use-cases): Spell out serial numbers or codes over the phone; Generate phonetic callsigns for gaming or roleplay; Create voice-friendly scripts for customer support teams; Verify critical... - [NATO Phonetic Alphabet - tips](https://devtools.surf/tools/nato-phonetic/#tips): Spell out confirmation codes for phone support clarity; Use the output directly in voice communication scripts; Convert mixed alphanumeric strings for radio readback - [NATO Phonetic Alphabet - fun facts](https://devtools.surf/tools/nato-phonetic/#fun-facts): The current NATO phonetic alphabet was finalized in 1956 after extensive testing across 31 nations to ensure cross-language intelligibility; The word 'Alpha' replaced 'Able' and... - [Morse Code to Text](https://devtools.surf/tools/morse-code/): Convert text to Morse code and back - [Morse Code to Text - use cases](https://devtools.surf/tools/morse-code/#use-cases): Encode secret messages for escape rooms or puzzles; Learn Morse code patterns for amateur radio certification; Add Morse Easter eggs to apps or websites; Decode historical... - [Morse Code to Text - tips](https://devtools.surf/tools/morse-code/#tips): Use the audio playback to hear the dot-dash pattern; Toggle between International and American Morse variants; Copy the encoded output for embedding in designs or games - [Morse Code to Text - fun facts](https://devtools.surf/tools/morse-code/#fun-facts): Samuel Morse sent the first telegraph message 'What hath God wrought' on May 24, 1844, between Washington D.C. - [Roman Numeral Converter](https://devtools.surf/tools/roman-numeral-converter/): Convert between Roman numerals and decimal numbers - [Roman Numeral Converter - use cases](https://devtools.surf/tools/roman-numeral-converter/#use-cases): Format copyright years for film and broadcast credits; Convert chapter or section numbers for formal documents; Validate Roman numeral input in educational software; Generate... - [Roman Numeral Converter - tips](https://devtools.surf/tools/roman-numeral-converter/#tips): Enter values up to 3999 for standard Roman numeral output; Validate Roman numeral strings for correct subtractive notation; Use the converter for movie copyright year formatting - [Roman Numeral Converter - fun facts](https://devtools.surf/tools/roman-numeral-converter/#fun-facts): Romans had no symbol for zero; the concept of zero was introduced to Europe from Indian mathematics via Arabic scholars around the 12th century; The Super Bowl used Roman numerals... - [Number to Words](https://devtools.surf/tools/number-to-words/): Convert numbers to written English words - [Number to Words - use cases](https://devtools.surf/tools/number-to-words/#use-cases): Generate written amounts for financial document templates; Build accessibility features that read numbers aloud; Create invoices with amounts in words for legal compliance;... - [Number to Words - tips](https://devtools.surf/tools/number-to-words/#tips): Handle decimals and negative numbers in the conversion; Use the output for check-writing or financial documents; Convert large numbers to verify correct spoken form - [Number to Words - fun facts](https://devtools.surf/tools/number-to-words/#fun-facts): In the US, checks require the dollar amount written in words as a fraud prevention measure, a practice dating back to the 18th century; The English word for 10^100 is 'googol,'... - [Leet Speak to Plain](https://devtools.surf/tools/leet-speak/): Convert text to/from 1337 speak - [Leet Speak to Plain - use cases](https://devtools.surf/tools/leet-speak/#use-cases): Generate stylized usernames for gaming profiles; Decode leet speak messages found in logs or forums; Create fun text transformations for social media posts; Test text filters and... - [Leet Speak to Plain - tips](https://devtools.surf/tools/leet-speak/#tips): Choose between basic and advanced leet substitution levels; Decode leet text from forums or social media posts; Preview multiple leet variants for the same input text - [Leet Speak to Plain - fun facts](https://devtools.surf/tools/leet-speak/#fun-facts): Leet speak 1337 originated in 1980s BBS culture as a way to bypass text filters and mark elite status among hackers; The word 'leet' itself derives from 'elite,' and early BBS... - [Slug Generator](https://devtools.surf/tools/slug-generator/): Generate URL-friendly slugs from text - [Slug Generator - use cases](https://devtools.surf/tools/slug-generator/#use-cases): Generate SEO-friendly URLs from blog post titles; Create consistent route paths for CMS content; Build URL-safe identifiers for product catalog pages; Normalize user-generated... - [Slug Generator - tips](https://devtools.surf/tools/slug-generator/#tips): Preview how special characters and accents get stripped; Generate multiple slug variants from the same title; Check slug length to stay within URL best practices - [Slug Generator - fun facts](https://devtools.surf/tools/slug-generator/#fun-facts): The term 'slug' comes from newspaper publishing, where a short identifier was used to track articles through the production process; Google recommends URLs with 3-5 words in the... - [Zero-Width Character Detector](https://devtools.surf/tools/zero-width-detector/): Find and highlight invisible zero-width characters in text - [Zero-Width Character Detector - use cases](https://devtools.surf/tools/zero-width-detector/#use-cases): Debug string comparison failures caused by invisible characters; Detect watermarked text copied from protected documents; Clean pasted content before inserting into databases;... - [Zero-Width Character Detector - tips](https://devtools.surf/tools/zero-width-detector/#tips): Paste suspicious text to reveal hidden zero-width characters; Check for zero-width joiners that affect text rendering; Scan copy-pasted code for invisible characters causing bugs - [Zero-Width Character Detector - fun facts](https://devtools.surf/tools/zero-width-detector/#fun-facts): Zero-width characters U+200B, U+200C, U+200D, U+FEFF are invisible but occupy space in strings, breaking comparisons and regex matches; Zero-width characters have been used for... - [Smart Quotes Fixer](https://devtools.surf/tools/smart-quotes-fixer/): Replace curly/smart quotes with straight quotes and vice versa - [Smart Quotes Fixer - use cases](https://devtools.surf/tools/smart-quotes-fixer/#use-cases): Fix JSON parse errors caused by curly quotes from docs; Prepare code snippets copied from blog posts or PDFs; Normalize quotes in content before database insertion; Convert... - [Smart Quotes Fixer - tips](https://devtools.surf/tools/smart-quotes-fixer/#tips): Batch-replace curly quotes from Word or Google Docs pastes; Toggle between converting to straight or smart quotes; Preview all replacements before applying the fix - [Smart Quotes Fixer - fun facts](https://devtools.surf/tools/smart-quotes-fixer/#fun-facts): Smart quotes curly quotes were introduced with early Macintosh typesetting in 1984; before that, typewriters only had straight quotes; Microsoft Word's AutoCorrect has been... - [Text Similarity Scorer](https://devtools.surf/tools/text-similarity-scorer/): Calculate similarity between two text strings Levenshtein, Jaccard - [Text Similarity Scorer - use cases](https://devtools.surf/tools/text-similarity-scorer/#use-cases): Tune fuzzy search thresholds for product catalogs; Evaluate duplicate detection accuracy in data pipelines; Compare OCR output against ground truth text; Test string matching... - [Text Similarity Scorer - tips](https://devtools.surf/tools/text-similarity-scorer/#tips): Compare Levenshtein and Jaccard scores for different perspectives; Test fuzzy matching thresholds for search implementations; Paste two strings to quantify how different they are - [Text Similarity Scorer - fun facts](https://devtools.surf/tools/text-similarity-scorer/#fun-facts): Vladimir Levenshtein published his edit distance algorithm in 1965, originally for correcting deletion and insertion errors in binary codes; Paul Jaccard introduced his similarity... - [ISBN/IBAN/Luhn Validator](https://devtools.surf/tools/isbn-iban-validator/): Validate ISBN, IBAN, and credit card numbers Luhn check - [ISBN/IBAN/Luhn Validator - use cases](https://devtools.surf/tools/isbn-iban-validator/#use-cases): Validate book ISBNs in library management systems; Check credit card numbers before submitting payment forms; Verify IBAN formats for international wire transfers; Test e-commerce... - [ISBN/IBAN/Luhn Validator - tips](https://devtools.surf/tools/isbn-iban-validator/#tips): Validate ISBN-10 and ISBN-13 with automatic format detection; Check credit card numbers with the Luhn algorithm instantly; Verify IBAN structure including country-specific length... - [ISBN/IBAN/Luhn Validator - fun facts](https://devtools.surf/tools/isbn-iban-validator/#fun-facts): The Luhn algorithm was patented by IBM scientist Hans Peter Luhn in 1960 US Patent 2,950,048 and is now used on virtually every credit card worldwide; ISBN-13 replaced ISBN-10 on... - [ASCII Table Reference](https://devtools.surf/tools/ascii-table-reference/): Browse the full ASCII table with decimal, hex, and character values - [ASCII Table Reference - use cases](https://devtools.surf/tools/ascii-table-reference/#use-cases): Look up hex codes for embedded system programming; Reference control characters when debugging serial protocols; Find decimal values for ASCII art generation scripts; Teach... - [ASCII Table Reference - tips](https://devtools.surf/tools/ascii-table-reference/#tips): Search by character, decimal value, or hex code; Filter to show only printable or control characters; Copy any character's hex or decimal value with one click - [ASCII Table Reference - fun facts](https://devtools.surf/tools/ascii-table-reference/#fun-facts): ASCII was published as a standard ASA X3.4 in 1963 and defines exactly 128 characters, of which 33 are non-printable control codes; The ASCII code for 'A' is 65 0x41, and the... - [Bionic Reading Converter](https://devtools.surf/tools/bionic-reading/): Bold the first half of each word for faster reading - [Bionic Reading Converter - use cases](https://devtools.surf/tools/bionic-reading/#use-cases): Students speed-reading research papers and textbooks; Developers scanning lengthy API documentation quickly; Content creators previewing text in bionic format for readers;... - [Bionic Reading Converter - tips](https://devtools.surf/tools/bionic-reading/#tips): Adjust the bold ratio to find your optimal reading speed; Try bionic reading on dense technical documentation first; Copy the converted text for use in note-taking apps - [Bionic Reading Converter - fun facts](https://devtools.surf/tools/bionic-reading/#fun-facts): Bionic Reading was patented by Swiss typographer Renato Casutt in 2022 - it guides eyes by bolding initial word fragments, creating artificial fixation points; Speed reading... - [Anagram Finder](https://devtools.surf/tools/anagram-finder/): Check if two strings are anagrams and show letter frequency - [Anagram Finder - use cases](https://devtools.surf/tools/anagram-finder/#use-cases): Puzzle enthusiasts verifying crossword and word game answers; Teachers creating educational word exercises for students; Game developers validating anagram mechanics in word... - [Anagram Finder - tips](https://devtools.surf/tools/anagram-finder/#tips): Compare letter frequency charts to understand near-anagrams; Try multi-word anagram inputs for phrase comparisons; Use this to verify word puzzle solutions instantly - [Anagram Finder - fun facts](https://devtools.surf/tools/anagram-finder/#fun-facts): The word 'anagram' itself comes from the Greek 'anagrammatismos,' and the practice dates back to at least the 3rd century BCE by Greek poet Lycophron; The longest single-word... - [Braille to Text](https://devtools.surf/tools/braille-converter/): Convert text to Braille Unicode characters and back - [Braille to Text - use cases](https://devtools.surf/tools/braille-converter/#use-cases): Accessibility engineers testing Braille display compatibility; Educators creating Braille learning materials digitally; Designers including Braille representations in inclusive UX... - [Braille to Text - tips](https://devtools.surf/tools/braille-converter/#tips): Verify Grade 1 Braille output for letter-by-letter accuracy; Copy Unicode Braille characters for use in accessible documents; Test both directions to ensure round-trip conversion... - [Braille to Text - fun facts](https://devtools.surf/tools/braille-converter/#fun-facts): Louis Braille invented his tactile writing system in 1824 at age 15, adapting Charles Barbier's 'night writing' military code into a simpler 6-dot cell system; Unicode Braille... - [Color Blindness Simulator](https://devtools.surf/tools/color-blindness-simulator/): Simulate how hex colors appear under different color blindness types - [Color Blindness Simulator - use cases](https://devtools.surf/tools/color-blindness-simulator/#use-cases): UI designers verifying color palettes are accessible to all users; Frontend developers testing button states for color-blind users; Game designers ensuring critical gameplay cues... - [Color Blindness Simulator - tips](https://devtools.surf/tools/color-blindness-simulator/#tips): Test all three major types: protanopia, deuteranopia, tritanopia; Compare simulated colors side-by-side with originals; Ensure sufficient contrast remains under each simulation - [Color Blindness Simulator - fun facts](https://devtools.surf/tools/color-blindness-simulator/#fun-facts): Approximately 8% of men and 0.5% of women of Northern European descent have some form of color vision deficiency - deuteranomaly reduced green sensitivity is the most common type;... - [User Input Fuzzer](https://devtools.surf/tools/user-input-fuzzer/): Generate edge-case test inputs for form validation testing - [User Input Fuzzer - use cases](https://devtools.surf/tools/user-input-fuzzer/#use-cases): QA engineers generating edge-case inputs for form testing; Security testers probing input validation with malicious payloads; Frontend developers stress-testing input field... - [User Input Fuzzer - tips](https://devtools.surf/tools/user-input-fuzzer/#tips): Test with Unicode edge cases like zero-width joiners; Include SQL injection and XSS payloads in your test suite; Generate boundary-length strings to test max-length validation - [User Input Fuzzer - fun facts](https://devtools.surf/tools/user-input-fuzzer/#fun-facts): Fuzz testing was invented by Barton Miller at the University of Wisconsin in 1989 when he noticed line noise on a dial-up connection crashing Unix utilities; Google's OSS-Fuzz... - [Palindrome Checker](https://devtools.surf/tools/palindrome-checker/): Test if text reads the same forward & backward - [Palindrome Checker - use cases](https://devtools.surf/tools/palindrome-checker/#use-cases): Testing solutions for palindrome coding interview questions; Validating string reversal logic in algorithm implementations; Creating palindrome puzzles for educational coding... - [Palindrome Checker - tips](https://devtools.surf/tools/palindrome-checker/#tips): The checker ignores case and spaces for flexible matching; Try full sentences to test for palindromic phrases; Use this to validate palindrome-related coding challenges - [Palindrome Checker - fun facts](https://devtools.surf/tools/palindrome-checker/#fun-facts): The longest single-word palindrome in English is 'tattarrattat,' coined by James Joyce in Ulysses 1922 to imitate the sound of a knock on a door; The word 'palindrome' comes from... - [Haiku Counter](https://devtools.surf/tools/haiku-counter/): Check a poem fits the 5-7-5 syllable pattern - [Haiku Counter - use cases](https://devtools.surf/tools/haiku-counter/#use-cases): Verifying syllable counts when composing haiku for creative projects; Checking haiku submissions for a poetry contest or writing class; Testing syllable-counting algorithms... - [Haiku Counter - tips](https://devtools.surf/tools/haiku-counter/#tips): Enter three lines to verify the 5-7-5 syllable pattern; The counter highlights which lines exceed or fall short; Try different word choices until each line matches perfectly - [Haiku Counter - fun facts](https://devtools.surf/tools/haiku-counter/#fun-facts): The 5-7-5 syllable structure of haiku was established by the Japanese poet Matsuo Basho in the 17th century, though the form evolved from earlier renga poetry; In Japanese, haiku... - [Emoji Counter](https://devtools.surf/tools/emoji-counter/): Count and group emoji present in any text - [Emoji Counter - use cases](https://devtools.surf/tools/emoji-counter/#use-cases): Analyzing emoji usage patterns in customer support chat logs; Auditing social media posts for consistent emoji branding; Counting emoji in survey responses for sentiment analysis;... - [Emoji Counter - tips](https://devtools.surf/tools/emoji-counter/#tips): Paste any text to see a frequency breakdown of each emoji; Use this to audit emoji usage in social media content; Identify which emoji appear most often in user feedback - [Emoji Counter - fun facts](https://devtools.surf/tools/emoji-counter/#fun-facts): The first emoji set was created by Shigetaka Kurita in 1999 for NTT DoCoMo in Japan, consisting of 176 12x12 pixel icons; As of Unicode 15.1, there are 3,782 emoji in the... - [Zalgo Text](https://devtools.surf/tools/zalgo-generator/): Corrupt normal text with diacritical fury for fun - [Zalgo Text - use cases](https://devtools.surf/tools/zalgo-generator/#use-cases): Creating creepy text effects for Halloween marketing campaigns; Testing how applications handle excessive Unicode combining marks; Generating glitch-art text for creative design... - [Zalgo Text - tips](https://devtools.surf/tools/zalgo-generator/#tips): Adjust the intensity slider for more or less diacritical chaos; Copy the output for spooky social media posts or Halloween themes; Use sparingly - screen readers cannot interpret... - [Zalgo Text - fun facts](https://devtools.surf/tools/zalgo-generator/#fun-facts): Zalgo text works by stacking Unicode combining diacritical marks U+0300 to U+036F above and below base characters, exploiting the Unicode rendering engine; The Zalgo meme... - [SpongeBob Case](https://devtools.surf/tools/spongebob-case/): aLtErNaTiNg cAsE gEnErAtOr - memes only - [SpongeBob Case - use cases](https://devtools.surf/tools/spongebob-case/#use-cases): Developers adding humor to code review comments and pull request descriptions; Slack users expressing sarcasm in team channels during standup; Social media managers creating meme... - [SpongeBob Case - tips](https://devtools.surf/tools/spongebob-case/#tips): Paste any text and get instant alternating case meme output; Copy the result directly into Slack or Discord for maximum effect; Try longer sentences for more dramatic mocking tone - [SpongeBob Case - fun facts](https://devtools.surf/tools/spongebob-case/#fun-facts): The SpongeBob mocking meme originated from a 2017 screenshot of the episode 'Little Yellow Book' Season 9, 2012 showing SpongeBob imitating a chicken; Alternating case text was... - [Dice Roller](https://devtools.surf/tools/dice-notation-roller/): Roll standard RPG dice notation - 3d6+2, 2d20-1, mixed - [Dice Roller - use cases](https://devtools.surf/tools/dice-notation-roller/#use-cases): Tabletop RPG players rolling dice during online game sessions; Game developers testing probability distributions for combat mechanics; Math teachers demonstrating probability... - [Dice Roller - tips](https://devtools.surf/tools/dice-notation-roller/#tips): Type 3d6+2 to roll three six-sided dice and add a modifier of 2; Use mixed notation like 2d20+1d4 for complex RPG attack rolls; Check individual die results alongside the total... - [Dice Roller - fun facts](https://devtools.surf/tools/dice-notation-roller/#fun-facts): Dice notation NdX was popularized by Dungeons & Dragons in 1974, created by Gary Gygax and Dave Arneson. - [Age on Other Planets](https://devtools.surf/tools/age-in-planets/): Convert your Earth age to Mercury, Venus, Mars, Jupiter even Pluto - [Age on Other Planets - use cases](https://devtools.surf/tools/age-in-planets/#use-cases): Science educators teaching orbital mechanics to students; Space enthusiasts exploring planetary period comparisons; Party hosts creating fun age conversation starters; Astronomy... - [Age on Other Planets - tips](https://devtools.surf/tools/age-in-planets/#tips): Enter your Earth age to see your age on all 8 planets; Pluto's orbital period means you might be less than 1 Pluto-year old; Compare inner planet ages to see how fast Mercury... - [Age on Other Planets - fun facts](https://devtools.surf/tools/age-in-planets/#fun-facts): One year on Mercury is just 88 Earth days, so a 30-year-old Earthling would be about 124 Mercury years old; A year on Neptune lasts 164.8 Earth years - meaning Neptune has... - [Coin Flip Simulator](https://devtools.surf/tools/coin-flip-simulator/): Flip a fair coin N times - tallies + raw sequence. Optional seed. - [Coin Flip Simulator - tips](https://devtools.surf/tools/coin-flip-simulator/#tips): Deterministic when you pass a seed - reproducible for demos; Tallies include the raw H/T sequence so you can verify fairness; Use count=10000 to check the law of large numbers in... - [Coin Flip Simulator - fun facts](https://devtools.surf/tools/coin-flip-simulator/#fun-facts): A 2007 Stanford study found real coin flips aren't actually 50/50 - they're biased ~51% toward the starting face because of the flip's rotation; The longest recorded streak of... - [Random List Picker](https://devtools.surf/tools/random-list-picker/): Pick a winner from a list - shows the full shuffled order too - [Random List Picker - use cases](https://devtools.surf/tools/random-list-picker/#use-cases): Team leads picking random reviewers for code review assignments; Teachers selecting random students for classroom participation; Raffle organizers drawing winners from a... - [Random List Picker - tips](https://devtools.surf/tools/random-list-picker/#tips): Paste items one per line to enter your options list; The full shuffled order is shown alongside the winner; Re-run to get a fresh random pick each time - [Random List Picker - fun facts](https://devtools.surf/tools/random-list-picker/#fun-facts): True randomness in computers is surprisingly hard - most random pickers use pseudorandom number generators PRNGs seeded by system entropy sources like mouse movements; The... - [Decision Wheel](https://devtools.surf/tools/decision-wheel/): Spin a wheel of N options and get the top 5 picks in random order - [Decision Wheel - use cases](https://devtools.surf/tools/decision-wheel/#use-cases): Teams choosing where to go for lunch from a list of restaurants; Party hosts running game-night decision wheels for activities; Streamers engaging audiences with interactive... - [Decision Wheel - tips](https://devtools.surf/tools/decision-wheel/#tips): Add up to N options and spin for ranked top-5 results; The wheel animation adds suspense to group decisions; Re-spin for a completely new random ordering each time - [Decision Wheel - fun facts](https://devtools.surf/tools/decision-wheel/#fun-facts): The concept of a 'wheel of fortune' dates to ancient Rome, where the Rota Fortunae symbolized the unpredictable nature of fate - it appears in Boethius's 524 AD 'Consolation of... - [Fantasy Name Generator](https://devtools.surf/tools/fantasy-name-generator/): Generate fantasy/elvish-style names for characters, towns, NPCs - [Fantasy Name Generator - use cases](https://devtools.surf/tools/fantasy-name-generator/#use-cases): Tabletop RPG game masters naming NPCs on the fly; Fantasy authors brainstorming character names for novels; Video game developers generating placeholder names for NPCs;... - [Fantasy Name Generator - tips](https://devtools.surf/tools/fantasy-name-generator/#tips): Generate names for characters, towns, and NPCs in bulk; Elvish-style phonetics create authentic fantasy flavor; Regenerate until you find names that fit your setting - [Fantasy Name Generator - fun facts](https://devtools.surf/tools/fantasy-name-generator/#fun-facts): J.R.R. Tolkien, a philologist, created over 15 constructed languages for Middle-earth - his Elvish names like 'Galadriel' follow rigorous phonological rules he developed over... - [Compound Word Finder](https://devtools.surf/tools/compound-word-finder/): Split compound words rainbow to rain+bow, moonlight to moon+light - [Compound Word Finder - use cases](https://devtools.surf/tools/compound-word-finder/#use-cases): ESL students learning English compound word structure; Copywriters analyzing word composition for brand naming; Linguists studying morphological patterns in compound formation;... - [Compound Word Finder - tips](https://devtools.surf/tools/compound-word-finder/#tips): Enter a compound word to see its component parts split; Works with common English compounds like moonlight and rainbow; Use it to verify whether a word is truly a compound or not - [Compound Word Finder - fun facts](https://devtools.surf/tools/compound-word-finder/#fun-facts): English has three types of compound words: closed football, hyphenated well-known, and open ice cream - the distinction is largely based on convention, not grammar rules; German... - [Word Scrambler](https://devtools.surf/tools/word-scrambler/): Typoglycemia-style scramble: keep first+last letter, shuffle middle - [Word Scrambler - use cases](https://devtools.surf/tools/word-scrambler/#use-cases): Teachers creating reading comprehension exercises for students; Puzzle designers generating word-scramble game content; Linguists demonstrating how human pattern recognition... - [Word Scrambler - tips](https://devtools.surf/tools/word-scrambler/#tips): First and last letters stay fixed while the middle shuffles; Demonstrates the typoglycemia reading phenomenon; Paste full sentences for a complete scrambled paragraph - [Word Scrambler - fun facts](https://devtools.surf/tools/word-scrambler/#fun-facts): The 'typoglycemia' effect - reading scrambled words easily when first and last letters are correct - went viral via a 2003 internet meme falsely attributed to Cambridge University... ## Developer Utilities - [Collection JSON to cURL](https://devtools.surf/tools/collection-to-curl/): Convert Collection JSON v2.1 requests into cURL one-liners - [Collection JSON to cURL - use cases](https://devtools.surf/tools/collection-to-curl/#use-cases): Convert Postman collections to portable shell scripts; Generate cURL commands for CI/CD pipeline API calls; Share API requests with teams that do not use Postman; Create... - [Collection JSON to cURL - tips](https://devtools.surf/tools/collection-to-curl/#tips): Paste a Collection JSON payload to get cURL one-liners; Each request in the collection becomes a separate cURL command; Copy generated commands directly into terminal or scripts - [Collection JSON to cURL - fun facts](https://devtools.surf/tools/collection-to-curl/#fun-facts): cURL supports over 25 protocols including HTTP, FTP, SMTP, and MQTT, making it one of the most versatile network transfer tools ever created; The cURL project has received... - [Git Diff to HTML](https://devtools.surf/tools/git-diff-to-html/): Convert unified git diff output to syntax-highlighted HTML - [Git Diff to HTML - use cases](https://devtools.surf/tools/git-diff-to-html/#use-cases): Embed highlighted diffs in technical blog posts; Create code review reports for compliance documentation; Generate visual changelogs for release notes pages; Include diff... - [Git Diff to HTML - tips](https://devtools.surf/tools/git-diff-to-html/#tips): Paste a unified diff to generate syntax-highlighted HTML; Use the output in code review documentation or blog posts; Customize the color scheme to match your site theme - [Git Diff to HTML - fun facts](https://devtools.surf/tools/git-diff-to-html/#fun-facts): The unified diff format uses '+' for additions and '-' for deletions, with @@ hunk headers showing line number ranges from both files; GitHub renders over 2 billion diffs per day... - [Regex Visualizer](https://devtools.surf/tools/regex-visualizer/): Visualize regex patterns as a readable railroad diagram text - [Regex Visualizer - use cases](https://devtools.surf/tools/regex-visualizer/#use-cases): Visualize complex regex patterns for code review; Debug regex matching issues with a clear structural view; Document regex validation rules for team onboarding; Teach regex... - [Regex Visualizer - tips](https://devtools.surf/tools/regex-visualizer/#tips): Paste a regex pattern to see it as a readable railroad diagram; Identify greedy vs lazy quantifiers in the visual output; Spot potential backtracking issues in complex patterns - [Regex Visualizer - fun facts](https://devtools.surf/tools/regex-visualizer/#fun-facts): Regular expressions were invented by mathematician Stephen Kleene in 1951 as a notation for describing 'regular languages' in automata theory; Railroad diagrams also called syntax... - [Makefile Explainer](https://devtools.surf/tools/makefile-explainer/): Parse a Makefile and explain each target and its dependencies - [Makefile Explainer - use cases](https://devtools.surf/tools/makefile-explainer/#use-cases): Understand unfamiliar Makefiles in inherited codebases; Document build targets for team reference; Debug build failures by tracing target dependency chains; Onboard new... - [Makefile Explainer - tips](https://devtools.surf/tools/makefile-explainer/#tips): Paste a Makefile to see each target explained in plain English; Understand dependency chains between build targets; Identify phony targets and their purposes in the build - [Makefile Explainer - fun facts](https://devtools.surf/tools/makefile-explainer/#fun-facts): Make was created by Stuart Feldman at Bell Labs in April 1976 and remains one of the oldest build tools still in daily use; GNU Make, the most widely used implementation, was... - [Shell Script Linter](https://devtools.surf/tools/shell-script-linter/): Check shell scripts for common issues and bad practices - [Shell Script Linter - use cases](https://devtools.surf/tools/shell-script-linter/#use-cases): Validate deployment scripts before running in production; Catch quoting errors that cause silent data corruption; Ensure shell scripts are POSIX-compatible across platforms;... - [Shell Script Linter - tips](https://devtools.surf/tools/shell-script-linter/#tips): Paste a shell script to check for common pitfalls; Catch unquoted variables that cause word splitting bugs; Identify non-portable bashisms in supposedly POSIX scripts - [Shell Script Linter - fun facts](https://devtools.surf/tools/shell-script-linter/#fun-facts): ShellCheck, the most popular shell linter, was created by Vidar Holen in 2012 and has over 100 unique checks for bash, sh, dash, and ksh; The Bourne shell sh was written by... - [GitHub Actions Visualizer](https://devtools.surf/tools/github-actions-visualizer/): Parse a GitHub Actions workflow and show job/step dependencies - [GitHub Actions Visualizer - use cases](https://devtools.surf/tools/github-actions-visualizer/#use-cases): DevOps engineers debugging slow CI/CD pipeline bottlenecks; Team leads reviewing workflow PRs for dependency correctness; Platform engineers optimizing parallel job execution; New... - [GitHub Actions Visualizer - tips](https://devtools.surf/tools/github-actions-visualizer/#tips): Collapse long workflows to focus on failing jobs; Check for circular dependencies between job steps; Use the graph view to spot parallelizable jobs - [GitHub Actions Visualizer - fun facts](https://devtools.surf/tools/github-actions-visualizer/#fun-facts): GitHub Actions launched in October 2018 and became generally available in November 2019, quickly becoming the most popular CI/CD platform on GitHub; A single GitHub Actions... - [HAR File Viewer](https://devtools.surf/tools/har-file-viewer/): Parse and summarize HTTP Archive HAR files - [HAR File Viewer - use cases](https://devtools.surf/tools/har-file-viewer/#use-cases): Frontend developers diagnosing slow page load times; QA engineers documenting network failures in bug reports; Security auditors reviewing API calls for data leaks; Performance... - [HAR File Viewer - tips](https://devtools.surf/tools/har-file-viewer/#tips): Sort entries by response time to find slow requests; Filter by MIME type to isolate API calls from assets; Check the waterfall timing to spot blocking requests - [HAR File Viewer - fun facts](https://devtools.surf/tools/har-file-viewer/#fun-facts): The HAR HTTP Archive format was standardized by the W3C Web Performance Working Group in 2012, based on work by Jan Odvarko of Mozilla; A single page load on a modern website can... - [API Response Mocker](https://devtools.surf/tools/api-response-mocker/): Generate mock API JSON responses from a URL + method description - [API Response Mocker - use cases](https://devtools.surf/tools/api-response-mocker/#use-cases): Frontend developers building UIs before the backend is ready; QA engineers creating deterministic test fixtures; Mobile developers working offline with simulated endpoints;... - [API Response Mocker - tips](https://devtools.surf/tools/api-response-mocker/#tips): Specify response status codes to test error handling; Include nested objects for realistic mock structures; Define array lengths to simulate paginated responses - [API Response Mocker - fun facts](https://devtools.surf/tools/api-response-mocker/#fun-facts): The concept of mock objects in testing was formalized in a 2000 paper by Tim Mackinnon, Steve Freeman, and Philip Craig at XP2000; JSON became the dominant API response format... - [GraphQL Query Builder](https://devtools.surf/tools/graphql-query-builder/): Generate GraphQL queries from a schema definition - [GraphQL Query Builder - use cases](https://devtools.surf/tools/graphql-query-builder/#use-cases): Frontend developers building queries from unfamiliar schemas; Mobile developers optimizing data fetching with precise field selection; API consumers exploring available types and... - [GraphQL Query Builder - tips](https://devtools.surf/tools/graphql-query-builder/#tips): Select only the fields you need to minimize response size; Add variables for dynamic values instead of hardcoding them; Nest related types to build efficient single-request queries - [GraphQL Query Builder - fun facts](https://devtools.surf/tools/graphql-query-builder/#fun-facts): GraphQL was created internally at Facebook by Lee Byron, Nick Schrock, and Dan Schafer in 2012 and open-sourced in 2015 - it was built to solve mobile app data fetching problems;... - [OpenAPI to TypeScript](https://devtools.surf/tools/openapi-to-typescript/): Generate TypeScript interfaces from an OpenAPI schema - [OpenAPI to TypeScript - use cases](https://devtools.surf/tools/openapi-to-typescript/#use-cases): Frontend teams generating type-safe API client code; Backend developers ensuring API contracts match implementations; SDK authors automating client library generation from specs;... - [OpenAPI to TypeScript - tips](https://devtools.surf/tools/openapi-to-typescript/#tips): Generate interfaces for request bodies and response types; Use readonly modifiers for immutable response properties; Include enum types from OpenAPI string enumerations - [OpenAPI to TypeScript - fun facts](https://devtools.surf/tools/openapi-to-typescript/#fun-facts): OpenAPI started as Swagger, created by Tony Tam at Wordnik in 2011 - SmartBear acquired it in 2015 and donated the specification to the Linux Foundation as OpenAPI; The OpenAPI... - [Diff Patch Applier](https://devtools.surf/tools/diff-patch-applier/): Apply a unified diff patch to source text - [Diff Patch Applier - use cases](https://devtools.surf/tools/diff-patch-applier/#use-cases): Developers applying code review patches to local branches; Open-source maintainers testing contributor-submitted patches; CI systems applying hotfix patches during emergency... - [Diff Patch Applier - tips](https://devtools.surf/tools/diff-patch-applier/#tips): Verify context lines match before applying the patch; Check the line offset if the patch fails to apply cleanly; Use unified diff format with 3 lines of context for best results - [Diff Patch Applier - fun facts](https://devtools.surf/tools/diff-patch-applier/#fun-facts): The unified diff format was created by Wayne Davison in 1990 and became the default in GNU diff 2.0 - it replaced the older context diff format with a more compact notation; Larry... - [GraphQL Introspection to SDL](https://devtools.surf/tools/graphql-introspection-to-sdl/): Convert GraphQL introspection JSON to SDL schema - [GraphQL Introspection to SDL - use cases](https://devtools.surf/tools/graphql-introspection-to-sdl/#use-cases): API developers converting runtime schemas to version-controlled SDL files; Security auditors documenting API surface area from introspection; Migration teams recreating schemas... - [GraphQL Introspection to SDL - tips](https://devtools.surf/tools/graphql-introspection-to-sdl/#tips): Paste the full introspection JSON including the __schema key; Compare generated SDL against your source schema for drift; Use the SDL output to initialize schema-first development - [GraphQL Introspection to SDL - fun facts](https://devtools.surf/tools/graphql-introspection-to-sdl/#fun-facts): GraphQL introspection is a built-in feature of the spec - every compliant server must respond to the __schema query, which is both powerful and a security consideration; Many... - [HTTP Request Replayer](https://devtools.surf/tools/http-request-replayer/): Generate fetch/axios/curl code from raw HTTP request text - [HTTP Request Replayer - use cases](https://devtools.surf/tools/http-request-replayer/#use-cases): Developers reproducing bugs from raw HTTP request logs; QA engineers converting captured requests into automated test scripts; Security testers replaying modified requests for... - [HTTP Request Replayer - tips](https://devtools.surf/tools/http-request-replayer/#tips): Paste raw HTTP requests from browser DevTools network tab; Choose between fetch, axios, or curl output formats; Include headers and body to generate complete replay code - [HTTP Request Replayer - fun facts](https://devtools.surf/tools/http-request-replayer/#fun-facts): The curl command-line tool was first released by Daniel Stenberg in 1998 and now runs on over 10 billion installations worldwide, including cars, TVs, and game consoles; The Fetch... - [cURL to fetch](https://devtools.surf/tools/curl-to-fetch/): Convert a curl command into a JS fetch call - [cURL to fetch - use cases](https://devtools.surf/tools/curl-to-fetch/#use-cases): Converting API documentation curl examples to frontend fetch code; Translating Postman-exported curl commands to JavaScript; Porting backend API test scripts to browser-based... - [cURL to fetch - tips](https://devtools.surf/tools/curl-to-fetch/#tips): Paste a curl command with headers to get a complete fetch call; Check that authentication headers are properly converted; Review the generated options object for method and body... - [cURL to fetch - fun facts](https://devtools.surf/tools/curl-to-fetch/#fun-facts): cURL was first released by Daniel Stenberg on March 20, 1998, and its name stands for 'Client URL' - it now supports over 25 protocols; The Fetch API was introduced as a modern... - [Git Log Parser](https://devtools.surf/tools/git-log-parser/): Parse git log output into structured JSON - [Git Log Parser - use cases](https://devtools.surf/tools/git-log-parser/#use-cases): Generating structured changelogs from raw git log output; Analyzing commit frequency patterns for team retrospectives; Extracting commit metadata for automated release notes;... - [Git Log Parser - tips](https://devtools.surf/tools/git-log-parser/#tips): Paste raw git log output to get structured JSON with metadata; Use the parsed output to build changelogs or commit analytics; Include --stat output to capture file change... - [Git Log Parser - fun facts](https://devtools.surf/tools/git-log-parser/#fun-facts): Git was created by Linus Torvalds in April 2005 and was self-hosting within just 4 days of development - the first commit is dated April 7, 2005; The Linux kernel repository... - [HTTP to cURL Builder](https://devtools.surf/tools/http-curl-builder/): Build a curl command from method, URL, headers & body fields - [HTTP to cURL Builder - use cases](https://devtools.surf/tools/http-curl-builder/#use-cases): Building curl commands for API testing without memorizing flags; Generating curl scripts for CI/CD health check endpoints; Creating reproducible API requests for bug reports;... - [HTTP to cURL Builder - tips](https://devtools.surf/tools/http-curl-builder/#tips): Select the HTTP method first, then add headers as key-value pairs; Add a JSON body for POST/PUT requests with one click; Copy the generated curl command directly to your terminal - [HTTP to cURL Builder - fun facts](https://devtools.surf/tools/http-curl-builder/#fun-facts): The -X flag in curl to specify the HTTP method was added in curl 7.1 2000; before that, curl would infer the method from other options; cURL supports over 25 protocols including... - [SemVer Bump](https://devtools.surf/tools/semver-bump/): Compute next major / minor / patch / prerelease - [SemVer Bump - use cases](https://devtools.surf/tools/semver-bump/#use-cases): Determining the next version number before a package release; Verifying correct semver bumps in CI/CD release pipelines; Previewing prerelease version strings for beta... - [SemVer Bump - tips](https://devtools.surf/tools/semver-bump/#tips): Enter a version to see the next major, minor, and patch bumps; Check prerelease output for alpha and beta versioning; Use this to verify version bumps before publishing packages - [SemVer Bump - fun facts](https://devtools.surf/tools/semver-bump/#fun-facts): Semantic Versioning SemVer was created by Tom Preston-Werner, co-founder of GitHub, and formalized in the SemVer 2.0.0 specification in 2013; The SemVer spec states that version... - [Apache/Nginx Log Parser](https://devtools.surf/tools/apache-log-parser/): Parse combined log format lines into JSON host, status, UA - [Apache/Nginx Log Parser - use cases](https://devtools.surf/tools/apache-log-parser/#use-cases): SREs parsing access logs to identify traffic spikes and error patterns; Security analysts extracting IP addresses and user agents from log files; DevOps engineers converting raw... - [Apache/Nginx Log Parser - tips](https://devtools.surf/tools/apache-log-parser/#tips): Paste combined log format lines to get structured JSON output; Check the parsed status codes to quickly find 4xx and 5xx errors; Use the User-Agent field to identify bot traffic... - [Apache/Nginx Log Parser - fun facts](https://devtools.surf/tools/apache-log-parser/#fun-facts): The Combined Log Format originated with NCSA HTTPd in 1993 and was adopted by Apache in 1995. ## Game Dev - [Unity C# Class Generator](https://devtools.surf/tools/unity-class-generator/): Generate Unity MonoBehaviour, ScriptableObject, or Editor scripts from a template - [Unity C# Class Generator - use cases](https://devtools.surf/tools/unity-class-generator/#use-cases): Game developers scaffolding new MonoBehaviour components quickly; Unity beginners learning proper class structure and conventions; Tool developers generating Editor scripts for... - [Unity C# Class Generator - tips](https://devtools.surf/tools/unity-class-generator/#tips): Select MonoBehaviour for game objects with Update loops; Use ScriptableObject for shared data assets like item configs; Add SerializeField attributes to expose private fields in... - [Unity C# Class Generator - fun facts](https://devtools.surf/tools/unity-class-generator/#fun-facts): Unity was founded by David Helgason, Nicholas Francis, and Joachim Ante in 2004 in Copenhagen - the engine was originally called 'Over the Edge Entertainment.'; MonoBehaviour,... - [Unity Prefab Inspector](https://devtools.surf/tools/unity-prefab-inspector/): Parse and display Unity .prefab YAML structure in a readable format - [Unity Prefab Inspector - use cases](https://devtools.surf/tools/unity-prefab-inspector/#use-cases): Unity developers debugging prefab serialization issues; Technical artists tracing component references in complex prefabs; Version control users resolving merge conflicts in... - [Unity Prefab Inspector - tips](https://devtools.surf/tools/unity-prefab-inspector/#tips): Search for specific component GUIDs to trace references; Expand nested prefab hierarchies to find override values; Compare prefab YAML before and after changes to spot differences - [Unity Prefab Inspector - fun facts](https://devtools.surf/tools/unity-prefab-inspector/#fun-facts): Unity switched to YAML-based prefab serialization in Unity 3.5 2012, replacing binary format - this enabled version control diffing but made prefab files much larger; Unity's YAML... - [Sprite Sheet Calculator](https://devtools.surf/tools/sprite-sheet-calculator/): Calculate frame dimensions, UV coords, and animation timing from sprite sheet parameters - [Sprite Sheet Calculator - use cases](https://devtools.surf/tools/sprite-sheet-calculator/#use-cases): 2D game developers calculating frame positions in sprite sheets; Animators determining timing for sprite-based character animations; Web developers building CSS sprite animations... - [Sprite Sheet Calculator - tips](https://devtools.surf/tools/sprite-sheet-calculator/#tips): Enter total sheet dimensions and frame count to get UV coords; Calculate animation duration from frame count and target FPS; Account for padding pixels between frames to avoid... - [Sprite Sheet Calculator - fun facts](https://devtools.surf/tools/sprite-sheet-calculator/#fun-facts): Sprite sheets date back to the early 1980s arcade era - the original Super Mario Bros. - [Game Math Calculator](https://devtools.surf/tools/game-math-calculator/): Calculate vectors, distances, dot products, lerp, and common game math operations - [Game Math Calculator - use cases](https://devtools.surf/tools/game-math-calculator/#use-cases): Game programmers calculating distances between game entities; AI developers computing direction vectors for NPC pathfinding; Physics programmers debugging collision detection... - [Game Math Calculator - tips](https://devtools.surf/tools/game-math-calculator/#tips): Use dot product to check if two vectors face the same direction; Calculate lerp values between 0-1 for smooth interpolation; Normalize direction vectors before calculating... - [Game Math Calculator - fun facts](https://devtools.surf/tools/game-math-calculator/#fun-facts): Linear interpolation lerp is the most-used function in game development - John Carmack once said every game programmer writes lerp within their first week; The dot product... - [Game Color Palette Generator](https://devtools.surf/tools/color-palette-game/): Generate game-ready color palettes with hex, RGB, and normalized float values - [Game Color Palette Generator - use cases](https://devtools.surf/tools/color-palette-game/#use-cases): Game artists generating consistent color themes for game worlds; Indie developers creating retro-inspired limited color palettes; Shader programmers converting hex colors to float... - [Game Color Palette Generator - tips](https://devtools.surf/tools/color-palette-game/#tips): Export normalized 0-1 float values for direct shader use; Generate complementary palettes for enemy vs. player theming; Test palette contrast ratios for UI readability in-game - [Game Color Palette Generator - fun facts](https://devtools.surf/tools/color-palette-game/#fun-facts): The NES could only display 25 colors simultaneously from a palette of 54 - game artists had to be incredibly creative with limited color budgets; Color theory in games follows the... - [Tilemap Data Generator](https://devtools.surf/tools/tilemap-generator/): Generate 2D tilemap arrays for grid-based games from a visual text grid - [Tilemap Data Generator - use cases](https://devtools.surf/tools/tilemap-generator/#use-cases): Level designers prototyping 2D game levels from text grids; Indie developers generating tilemap arrays for simple game engines; Game jam participants quickly creating level data... - [Tilemap Data Generator - tips](https://devtools.surf/tools/tilemap-generator/#tips): Define tile types with single characters for easy grid editing; Export as 2D arrays for direct use in game engine tile systems; Add collision layer data alongside visual tile IDs - [Tilemap Data Generator - fun facts](https://devtools.surf/tools/tilemap-generator/#fun-facts): Tile-based games date back to 1979's Ultima by Richard Garriott, which used character tiles on Apple II - the concept became the foundation of JRPGs and strategy games; The... - [Damage Formula Calculator](https://devtools.surf/tools/damage-formula-calculator/): Calculate RPG damage with attack, defense, crit, elemental modifiers - [Damage Formula Calculator - use cases](https://devtools.surf/tools/damage-formula-calculator/#use-cases): RPG developers balancing combat damage curves across levels; Game designers testing difficulty scaling with different stats; Tabletop RPG creators validating homebrew damage... - [Damage Formula Calculator - tips](https://devtools.surf/tools/damage-formula-calculator/#tips): Adjust defense scaling to prevent damage from going negative; Test critical hit multipliers at various attack/defense ratios; Add elemental modifiers to see type advantage... - [Damage Formula Calculator - fun facts](https://devtools.surf/tools/damage-formula-calculator/#fun-facts): The damage formula in the original Pokemon games uses a complex equation with 8 variables including a random factor between 0.85 and 1.0 - creating the variance players feel in... - [Loot Table Generator](https://devtools.surf/tools/loot-table-generator/): Generate weighted loot drop tables with probability calculations - [Loot Table Generator - use cases](https://devtools.surf/tools/loot-table-generator/#use-cases): Game designers creating balanced item drop probability tables; RPG developers implementing tiered rarity systems; Mobile game developers designing gacha/loot box distributions;... - [Loot Table Generator - tips](https://devtools.surf/tools/loot-table-generator/#tips): Set rarity weights - common items need much higher weight values; Calculate expected drops per 100 kills for balance verification; Add pity timer mechanics by adjusting weights... - [Loot Table Generator - fun facts](https://devtools.surf/tools/loot-table-generator/#fun-facts): Diablo 1996 by Blizzard North popularized randomized loot drops in action RPGs - its loot tables were inspired by roguelike games dating back to Rogue 1980; The 'pity timer'... - [Shader Uniform Generator](https://devtools.surf/tools/shader-uniform-generator/): Generate GLSL/HLSL uniform declarations from parameter descriptions - [Shader Uniform Generator - use cases](https://devtools.surf/tools/shader-uniform-generator/#use-cases): Graphics programmers scaffolding shader parameter declarations; Game developers converting material properties to shader uniforms; Technical artists setting up custom shader... - [Shader Uniform Generator - tips](https://devtools.surf/tools/shader-uniform-generator/#tips): Group uniforms by update frequency - per-frame vs. per-object; Use vec4 padding for uniform buffer alignment requirements; Add descriptive comments for each uniform's expected... - [Shader Uniform Generator - fun facts](https://devtools.surf/tools/shader-uniform-generator/#fun-facts): GLSL OpenGL Shading Language was introduced with OpenGL 2.0 in 2004, replacing the ARB assembly language - it was designed by 3Dlabs engineer John Kessenich; The term 'uniform' in... - [Game Resolution Scaler](https://devtools.surf/tools/game-resolution-scaler/): Calculate render resolutions, aspect ratios, and DPI for different platforms - [Game Resolution Scaler - use cases](https://devtools.surf/tools/game-resolution-scaler/#use-cases): Game developers planning multi-platform resolution targets; Mobile developers calculating DPI-aware render resolutions; QA teams verifying aspect ratio support across display... - [Game Resolution Scaler - tips](https://devtools.surf/tools/game-resolution-scaler/#tips): Calculate render resolution at different DPI scale factors; Check ultrawide aspect ratios like 21:9 for proper letterboxing; Compare platform targets side by side for consistent... - [Game Resolution Scaler - fun facts](https://devtools.surf/tools/game-resolution-scaler/#fun-facts): The 16:9 aspect ratio became the standard in 2009 when it was adopted by all major monitor manufacturers - before that, 4:3 and 16:10 competed for dominance; Nintendo Switch... - [FPS to Frame Time Converter](https://devtools.surf/tools/fps-ms-converter/): Convert between FPS and milliseconds per frame with performance budgets - [FPS to Frame Time Converter - use cases](https://devtools.surf/tools/fps-ms-converter/#use-cases): Game programmers budgeting CPU and GPU time per frame; Performance engineers diagnosing frame time spikes and hitches; Technical directors setting frame rate targets for new... - [FPS to Frame Time Converter - tips](https://devtools.surf/tools/fps-ms-converter/#tips): Remember: 60 FPS means only 16.67ms per frame budget; Subtract engine overhead to find your actual render budget; Compare 30, 60, and 120 FPS targets for platform planning - [FPS to Frame Time Converter - fun facts](https://devtools.surf/tools/fps-ms-converter/#fun-facts): The human eye can perceive differences up to approximately 150-240 FPS in controlled studies - the myth that 'the eye can only see 30 FPS' has been thoroughly debunked; John... - [Easing Function Generator](https://devtools.surf/tools/easing-function-generator/): Generate easing functions in C#, GLSL, JS with visual curve preview - [Easing Function Generator - use cases](https://devtools.surf/tools/easing-function-generator/#use-cases): Game developers implementing smooth camera and UI transitions; Animation programmers choosing easing curves for character movement; Frontend developers generating easing functions... - [Easing Function Generator - tips](https://devtools.surf/tools/easing-function-generator/#tips): Preview the curve shape before copying the easing function; Choose ease-out for UI elements entering the screen naturally; Export to your target language - C#, GLSL, or JavaScript - [Easing Function Generator - fun facts](https://devtools.surf/tools/easing-function-generator/#fun-facts): Robert Penner published his famous easing equations in 2001 in his book 'Programming Macromedia Flash MX' - these 30+ functions remain the foundation of animation easing across... - [Game Event System Generator](https://devtools.surf/tools/game-event-system-generator/): Generate event bus / observer pattern boilerplate for Unity, Godot, or JS - [Game Event System Generator - use cases](https://devtools.surf/tools/game-event-system-generator/#use-cases): Game developers implementing decoupled communication between systems; Unity developers generating type-safe event systems for gameplay; Godot developers scaffolding signal-based... - [Game Event System Generator - tips](https://devtools.surf/tools/game-event-system-generator/#tips): Choose between typed events and string-based event names; Add event priority levels for ordered listener execution; Include unsubscribe patterns to prevent memory leaks - [Game Event System Generator - fun facts](https://devtools.surf/tools/game-event-system-generator/#fun-facts): The Observer pattern was formally documented by the Gang of Four in their 1994 'Design Patterns' book, but the concept dates back to Smalltalk's Model-View-Controller from 1979;... - [State Machine Generator](https://devtools.surf/tools/state-machine-generator/): Generate finite state machine code from state/transition definitions - [State Machine Generator - use cases](https://devtools.surf/tools/state-machine-generator/#use-cases): Game AI programmers defining NPC behavior state transitions; UI developers managing complex multi-step form workflows; Game developers implementing character animation state... - [State Machine Generator - tips](https://devtools.surf/tools/state-machine-generator/#tips): Define all valid state transitions to catch illegal state changes; Add entry and exit actions to each state for side effects; Generate a state diagram to visualize the machine... - [State Machine Generator - fun facts](https://devtools.surf/tools/state-machine-generator/#fun-facts): Finite state machines were formalized by Warren McCulloch and Walter Pitts in their 1943 paper on neural networks - the concept predates modern computers; The game AI in Pac-Man... - [Platformer Physics Calculator](https://devtools.surf/tools/platformer-physics-calculator/): Calculate jump height, gravity, velocity for platformer feel - [Platformer Physics Calculator - use cases](https://devtools.surf/tools/platformer-physics-calculator/#use-cases): Indie developers tuning jump feel for 2D platformer prototypes; Game designers calculating gravity values from desired jump arcs; Physics programmers balancing air control and... - [Platformer Physics Calculator - tips](https://devtools.surf/tools/platformer-physics-calculator/#tips): Set jump height and duration - gravity is calculated automatically; Test variable jump height by adjusting gravity on button release; Tune coyote time for forgiving... - [Platformer Physics Calculator - fun facts](https://devtools.surf/tools/platformer-physics-calculator/#fun-facts): Super Mario Bros. 1985 uses asymmetric jump physics - gravity is stronger when falling than rising, creating the 'floaty rise, snappy fall' feel that became the gold standard; The... - [Asset Bundle Size Estimator](https://devtools.surf/tools/asset-bundle-size-estimator/): Estimate build sizes for textures, audio, meshes across platforms - [Asset Bundle Size Estimator - use cases](https://devtools.surf/tools/asset-bundle-size-estimator/#use-cases): Mobile game developers estimating build sizes for store limits; Technical artists optimizing texture budgets across quality tiers; Build engineers planning asset bundle download... - [Asset Bundle Size Estimator - tips](https://devtools.surf/tools/asset-bundle-size-estimator/#tips): Compare compressed vs uncompressed sizes for each asset type; Check texture sizes at different compression formats like ASTC; Estimate total build size across target platforms... - [Asset Bundle Size Estimator - fun facts](https://devtools.surf/tools/asset-bundle-size-estimator/#fun-facts): A single 4096x4096 uncompressed RGBA texture uses 64 MB of memory - ASTC compression at 4x4 block size reduces this to approximately 4 MB, a 16x reduction; Unity's addressable... ## Animation / CSS - [CSS Keyframe Generator](https://devtools.surf/tools/css-keyframe-generator/): Generate @keyframes animations from step definitions - [CSS Keyframe Generator - use cases](https://devtools.surf/tools/css-keyframe-generator/#use-cases): Frontend developers creating entrance and exit animations; UI designers prototyping motion design in pure CSS; Email developers building animations that work without JavaScript;... - [CSS Keyframe Generator - tips](https://devtools.surf/tools/css-keyframe-generator/#tips): Define at least three keyframe stops for smooth animations; Use transform properties instead of top/left for GPU acceleration; Add animation-fill-mode: forwards to persist the... - [CSS Keyframe Generator - fun facts](https://devtools.surf/tools/css-keyframe-generator/#fun-facts): CSS @keyframes were introduced in the CSS Animations Level 1 specification, first drafted in 2009 - WebKit Safari was the first browser to implement them with the -webkit- prefix;... - [Loading Spinner Generator](https://devtools.surf/tools/loading-spinner-generator/): Generate CSS-only loading spinners and progress indicators - [Loading Spinner Generator - use cases](https://devtools.surf/tools/loading-spinner-generator/#use-cases): Frontend developers adding loading states to async operations; UI designers creating branded spinner components; Mobile web developers building lightweight loading indicators;... - [Loading Spinner Generator - tips](https://devtools.surf/tools/loading-spinner-generator/#tips): Keep spinner size proportional to the content area it covers; Use CSS custom properties for easy theme color changes; Add aria-label for screen reader accessibility on spinners - [Loading Spinner Generator - fun facts](https://devtools.surf/tools/loading-spinner-generator/#fun-facts): The spinning loading indicator was popularized by Apple's macOS 'spinning beach ball' officially the 'spinning wait cursor', which first appeared in Mac OS X 10.0 in 2001;... - [Skeleton Screen Generator](https://devtools.surf/tools/skeleton-screen-generator/): Generate shimmer skeleton placeholder CSS for loading states - [Skeleton Screen Generator - use cases](https://devtools.surf/tools/skeleton-screen-generator/#use-cases): Frontend developers implementing loading states for content cards; Mobile app developers creating smooth perceived-instant page loads; Design system teams standardizing loading... - [Skeleton Screen Generator - tips](https://devtools.surf/tools/skeleton-screen-generator/#tips): Match skeleton shapes to the actual content layout closely; Use subtle animation speed - 1.5-2 seconds per shimmer cycle; Apply border-radius to skeleton blocks for a polished look - [Skeleton Screen Generator - fun facts](https://devtools.surf/tools/skeleton-screen-generator/#fun-facts): Skeleton screens were popularized by Facebook's mobile app around 2014 - Luke Wroblewski coined the term and advocated for them as superior to traditional loading spinners; A 2018... - [Hover Effect Generator](https://devtools.surf/tools/hover-effect-generator/): Generate CSS hover effects for buttons, cards, and links - [Hover Effect Generator - use cases](https://devtools.surf/tools/hover-effect-generator/#use-cases): Frontend developers adding interactive feedback to UI components; Designers prototyping button and card interactions in CSS; E-commerce developers creating engaging product card... - [Hover Effect Generator - tips](https://devtools.surf/tools/hover-effect-generator/#tips): Use transform: scale for subtle grow effects on hover; Add will-change: transform for smoother GPU-accelerated hovers; Keep hover transitions under 300ms for responsive-feeling UI - [Hover Effect Generator - fun facts](https://devtools.surf/tools/hover-effect-generator/#fun-facts): The CSS :hover pseudo-class was introduced in CSS2 in 1998, but early implementations in IE6 only supported :hover on anchor <a> elements, leading to creative workarounds; Touch... - [CSS Transition Playground](https://devtools.surf/tools/css-transition-playground/): Build and preview CSS transitions with property, duration, and easing controls - [CSS Transition Playground - use cases](https://devtools.surf/tools/css-transition-playground/#use-cases): Frontend developers fine-tuning transition timing for UI polish; Designers experimenting with duration and easing combinations; Component library authors documenting transition... - [CSS Transition Playground - tips](https://devtools.surf/tools/css-transition-playground/#tips): Combine multiple properties in a single transition declaration; Use different durations per property for staggered effects; Test ease, ease-in-out, and linear to find the right... - [CSS Transition Playground - fun facts](https://devtools.surf/tools/css-transition-playground/#fun-facts): CSS transitions were first proposed by Dave Hyatt at Apple in 2007 and implemented in WebKit - they became a W3C Working Draft in 2009 as part of CSS3; The default CSS transition... - [Text Animation Generator](https://devtools.surf/tools/text-animation-generator/): Generate typewriter, fade-in, bounce, and other text animations - [Text Animation Generator - use cases](https://devtools.surf/tools/text-animation-generator/#use-cases): Landing page developers creating engaging hero text animations; Portfolio developers building attention-grabbing introductions; Marketing teams adding animated headlines to... - [Text Animation Generator - tips](https://devtools.surf/tools/text-animation-generator/#tips): Use animation-delay to stagger letter-by-letter reveals; Set appropriate speeds - typewriter works best at 50-100ms per char; Combine multiple effects like fade-in with slide-up... - [Text Animation Generator - fun facts](https://devtools.surf/tools/text-animation-generator/#fun-facts): The typewriter effect in web design dates back to early JavaScript in the late 1990s using document.write - modern CSS-only versions use steps timing and overflow tricks; The... - [Scroll Animation Generator](https://devtools.surf/tools/scroll-animation-generator/): Generate CSS scroll-triggered animation code with IntersectionObserver - [Scroll Animation Generator - use cases](https://devtools.surf/tools/scroll-animation-generator/#use-cases): Frontend developers adding scroll-reveal animations to sections; Marketing sites building parallax and progressive disclosure effects; Portfolio developers creating engaging... - [Scroll Animation Generator - tips](https://devtools.surf/tools/scroll-animation-generator/#tips): Set threshold to 0.2 to trigger when 20% of element is visible; Use transform: translateY for smooth scroll-reveal effects; Add rootMargin to trigger animations slightly before... - [Scroll Animation Generator - fun facts](https://devtools.surf/tools/scroll-animation-generator/#fun-facts): The IntersectionObserver API was proposed by Google engineer Eric Bidelman and shipped in Chrome 51 in 2016, replacing costly scroll event listeners that caused jank; Before... - [Particle Effect Generator](https://devtools.surf/tools/particle-effect-generator/): Generate CSS-only particle animations confetti, snow, stars - [Particle Effect Generator - use cases](https://devtools.surf/tools/particle-effect-generator/#use-cases): Frontend developers adding celebration effects to success states; Marketing developers creating seasonal page decorations; Game UI developers building CSS-only ambient background... - [Particle Effect Generator - tips](https://devtools.surf/tools/particle-effect-generator/#tips): Limit particle count to under 50 for smooth CSS-only performance; Randomize animation-delay and duration for natural movement; Use pointer-events: none so particles don't block... - [Particle Effect Generator - fun facts](https://devtools.surf/tools/particle-effect-generator/#fun-facts): Particle systems were introduced to computer graphics by William Reeves at Lucasfilm in 1983 for the Genesis effect in Star Trek II: The Wrath of Khan; CSS-only particles use... - [Gradient Animation Generator](https://devtools.surf/tools/gradient-animation-generator/): Generate animated gradient backgrounds with CSS - [Gradient Animation Generator - use cases](https://devtools.surf/tools/gradient-animation-generator/#use-cases): Web designers creating eye-catching hero section backgrounds; SaaS landing page developers building premium visual polish; Creative developers implementing mood-setting ambient... - [Gradient Animation Generator - tips](https://devtools.surf/tools/gradient-animation-generator/#tips): Use background-size larger than 100% to enable smooth panning; Limit gradient stops to 3-4 colors for clean animations; Set animation duration to 5-15 seconds for subtle... - [Gradient Animation Generator - fun facts](https://devtools.surf/tools/gradient-animation-generator/#fun-facts): CSS gradients were first implemented by WebKit in 2008 using a proprietary syntax - the standardized linear-gradient syntax wasn't finalized until 2012 after three different... - [Button Animation Generator](https://devtools.surf/tools/button-animation-generator/): Generate animated button styles with ripple, glow, and morphing effects - [Button Animation Generator - use cases](https://devtools.surf/tools/button-animation-generator/#use-cases): Frontend developers building interactive form submit buttons; Component library authors creating reusable animated button primitives; Mobile web developers adding touch-friendly... - [Button Animation Generator - tips](https://devtools.surf/tools/button-animation-generator/#tips): Add a ripple effect origin at the click point for material feel; Use box-shadow transitions for glow effects instead of borders; Keep morphing animations under 400ms to feel snappy - [Button Animation Generator - fun facts](https://devtools.surf/tools/button-animation-generator/#fun-facts): Google's Material Design ripple effect, introduced in 2014, was inspired by the physical world - ink spreading on paper. ## Calculators - [Basic Calculator](https://devtools.surf/tools/basic-calculator/): Evaluate math expressions with +, -, *, /, parentheses, and functions - [Basic Calculator - use cases](https://devtools.surf/tools/basic-calculator/#use-cases): Quick arithmetic during code reviews without leaving the browser; Evaluating nested math expressions from API documentation; Verifying formula outputs when debugging financial... - [Basic Calculator - tips](https://devtools.surf/tools/basic-calculator/#tips): Use parentheses to control order of operations; Chain multiple expressions separated by semicolons; Try built-in functions like sqrt, pow, and abs - [Basic Calculator - fun facts](https://devtools.surf/tools/basic-calculator/#fun-facts): The equals sign = was invented by Welsh mathematician Robert Recorde in 1557 because he was tired of writing 'is equal to' repeatedly; The order of operations PEMDAS was... - [Percentage Calculator](https://devtools.surf/tools/percentage-calculator/): Calculate percentages, discounts, tips, and markup - [Percentage Calculator - use cases](https://devtools.surf/tools/percentage-calculator/#use-cases): Calculating discount amounts for e-commerce feature testing; Figuring out tip splits at team lunch outings; Computing markup percentages for pricing engine validation; Determining... - [Percentage Calculator - tips](https://devtools.surf/tools/percentage-calculator/#tips): Switch between modes for discount, tip, and markup; Enter the original and final values to find percent change; Use the tip calculator mode for quick dining math - [Percentage Calculator - fun facts](https://devtools.surf/tools/percentage-calculator/#fun-facts): The percent sign % evolved from a shorthand for 'per cento' in 15th-century Italian manuscripts, gradually losing the words until only the symbol remained; Sales tax was first... - [Unit Converter](https://devtools.surf/tools/unit-converter-calc/): Convert length, weight, temperature, speed, and data units - [Unit Converter - use cases](https://devtools.surf/tools/unit-converter-calc/#use-cases): Converting API response sizes from bytes to megabytes; Translating design specs between px, pt, and mm; Converting server temperatures from Fahrenheit to Celsius; Switching... - [Unit Converter - tips](https://devtools.surf/tools/unit-converter-calc/#tips): Toggle between metric and imperial with one click; Use the temperature tab for Celsius-Fahrenheit conversions; Convert data units like MB to GB for storage calculations - [Unit Converter - fun facts](https://devtools.surf/tools/unit-converter-calc/#fun-facts): NASA's Mars Climate Orbiter was lost in 1999 because one team used metric units while another used imperial, costing $125 million; The kilogram was redefined in 2019 using the... - [Loan / EMI Calculator](https://devtools.surf/tools/loan-calculator/): Calculate monthly payments, total interest, and amortization - [Loan / EMI Calculator - use cases](https://devtools.surf/tools/loan-calculator/#use-cases): Estimating monthly payments before committing to a car loan; Comparing mortgage scenarios when buying a first home; Projecting total interest paid over different loan terms;... - [Loan / EMI Calculator - tips](https://devtools.surf/tools/loan-calculator/#tips): Adjust the term slider to see how duration affects total interest; Review the amortization table for month-by-month breakdowns; Compare two scenarios by changing the interest rate - [Loan / EMI Calculator - fun facts](https://devtools.surf/tools/loan-calculator/#fun-facts): The concept of charging interest on loans dates back to ancient Sumer around 3000 BCE, where barley and silver were lent at regulated rates; The 30-year fixed-rate mortgage became... - [Number Formatter](https://devtools.surf/tools/number-formatter/): Any number to grouped, compact, scientific, hex, binary, percent - [Number Formatter - use cases](https://devtools.surf/tools/number-formatter/#use-cases): Frontend developers formatting currency and statistics for display; Data analysts converting between number representations for debugging; Embedded developers checking hex and... - [Number Formatter - tips](https://devtools.surf/tools/number-formatter/#tips): Enter any number to see grouped, compact, scientific, and hex formats at once; Use locale-aware formatting to preview how numbers appear in different regions; Convert between... - [Number Formatter - fun facts](https://devtools.surf/tools/number-formatter/#fun-facts): The comma as a thousands separator is used in the US and UK, but many European countries use a period - Germany writes 1.000,50 where the US writes 1,000.50; IEEE 754... - [Tip Calculator](https://devtools.surf/tools/tip-calculator/): Quick tip + per-person split - US-style 15/18/20/22% presets - [Tip Calculator - use cases](https://devtools.surf/tools/tip-calculator/#use-cases): Diners quickly calculating fair tips at restaurants; Travelers computing tips in US-tipping-culture establishments; Group meal organizers splitting bills with proper tip included;... - [Tip Calculator - tips](https://devtools.surf/tools/tip-calculator/#tips): Use the 15/18/20/22% presets for fast US-style tipping; Split the total evenly across your party size; Adjust tip percentage manually for custom amounts - [Tip Calculator - fun facts](https://devtools.surf/tools/tip-calculator/#fun-facts): Tipping in America became widespread after the Civil War, when wealthy Americans adopted the European practice - by 1900, it was expected in most restaurants; The standard US tip... - [BMI Calculator](https://devtools.surf/tools/bmi-calculator/): Body mass index with WHO categories - metric or imperial - [BMI Calculator - tips](https://devtools.surf/tools/bmi-calculator/#tips): BMI = weight kg / height m - or use unit=imperial for inches/pounds; The WHO cutoffs aren't perfect - athletes often classify as 'overweight'; Consider waist-to-height ratio as a... - [BMI Calculator - fun facts](https://devtools.surf/tools/bmi-calculator/#fun-facts): BMI was invented by Belgian mathematician Adolphe Quetelet in the 1830s - it was never meant to be a medical metric, just a population statistic; The BMI categories underweight,... - [Mortgage Calculator](https://devtools.surf/tools/mortgage-calculator/): Monthly payment + total interest for any loan amount, rate, term - [Mortgage Calculator - tips](https://devtools.surf/tools/mortgage-calculator/#tips): Rate is entered as APR e.g. 6.5 for 6.5%; Term is in years; most US mortgages are 30 or 15; Total interest can exceed the principal on 30-year loans - [Mortgage Calculator - fun facts](https://devtools.surf/tools/mortgage-calculator/#fun-facts): The modern 30-year fixed mortgage was invented by the US federal government via the HOLC in 1933 - before then, most mortgages were 5-year balloon loans; In Japan, some banks... - [Compound Interest Calculator](https://devtools.surf/tools/compound-interest-calculator/): Future value with configurable compounding + monthly contributions - [Compound Interest Calculator - tips](https://devtools.surf/tools/compound-interest-calculator/#tips): n is the number of compounding periods per year 12 = monthly, 365 = daily; Monthly contributions are added at the start of each month; The earnings line separates principal +... - [Compound Interest Calculator - fun facts](https://devtools.surf/tools/compound-interest-calculator/#fun-facts): The 'Rule of 72' is a shortcut: divide 72 by your annual rate to get doubling time. - [Discount Calculator](https://devtools.surf/tools/discount-calculator/): Final price after % off - plus total savings - for quick shopping math - [Discount Calculator - use cases](https://devtools.surf/tools/discount-calculator/#use-cases): Shoppers calculating final price during sales events; E-commerce developers testing price display after promotions; Retail managers computing markdown savings for inventory... - [Discount Calculator - tips](https://devtools.surf/tools/discount-calculator/#tips): Enter price and percentage to see final cost instantly; Total savings amount is displayed alongside the final price; Chain multiple discounts by applying them sequentially - [Discount Calculator - fun facts](https://devtools.surf/tools/discount-calculator/#fun-facts): The concept of percentage-based discounts dates to the late 19th century when department stores like Macy's pioneered 'marked-down' pricing to attract urban shoppers; Black... - [Sales Tax Calculator](https://devtools.surf/tools/sales-tax-calculator/): Add any % sales tax to a subtotal - breakdown + grand total - [Sales Tax Calculator - use cases](https://devtools.surf/tools/sales-tax-calculator/#use-cases): Freelancers calculating invoiced totals with local tax rates; E-commerce devs testing tax calculation logic for checkout; Small business owners computing sales tax for manual... - [Sales Tax Calculator - tips](https://devtools.surf/tools/sales-tax-calculator/#tips): Enter subtotal and tax rate for an instant grand total; The breakdown shows tax amount separately from the base; Adjust the rate for different state or country tax rules - [Sales Tax Calculator - fun facts](https://devtools.surf/tools/sales-tax-calculator/#fun-facts): Five U.S. states have no state sales tax: Alaska, Delaware, Montana, New Hampshire, and Oregon - though Alaska allows local municipalities to impose their own; The highest... - [Gas Mileage Calculator](https://devtools.surf/tools/gas-mileage-calculator/): MPG + L/100km + km/L - US or metric units in one calculator - [Gas Mileage Calculator - use cases](https://devtools.surf/tools/gas-mileage-calculator/#use-cases): Road trippers calculating fuel costs between destinations; Fleet managers tracking vehicle efficiency across a car pool; Automotive reviewers comparing MPG between test vehicles;... - [Gas Mileage Calculator - tips](https://devtools.surf/tools/gas-mileage-calculator/#tips): Enter distance and fuel used to get MPG, L/100km, and km/L; Toggle between US and metric units in one calculator; Compare results to EPA estimates for your vehicle model - [Gas Mileage Calculator - fun facts](https://devtools.surf/tools/gas-mileage-calculator/#fun-facts): The first EPA fuel economy estimates were mandated by the Energy Policy and Conservation Act of 1975, driven by the 1973 oil crisis that quadrupled gas prices; L/100km is the... - [Bill Splitter](https://devtools.surf/tools/bill-splitter/): Split a bill evenly with tip + optional per-person rounding kitty - [Bill Splitter - use cases](https://devtools.surf/tools/bill-splitter/#use-cases): Friend groups splitting restaurant tabs evenly with tip; Roommates dividing shared household expense receipts; Travel companions splitting hotel and activity costs; Office teams... - [Bill Splitter - tips](https://devtools.surf/tools/bill-splitter/#tips): Enter the total, number of people, and tip percentage; The rounding kitty handles leftover cents from even splits; Adjust tip before splitting for accurate per-person amounts - [Bill Splitter - fun facts](https://devtools.surf/tools/bill-splitter/#fun-facts): Splitting bills evenly is a well-studied problem in behavioral economics - research shows uneven eaters subsidized by even splits leads to the 'free-rider' problem at group... - [GPA Calculator](https://devtools.surf/tools/gpa-calculator/): Compute unweighted 4.0 GPA from course | grade | credits lines - [GPA Calculator - use cases](https://devtools.surf/tools/gpa-calculator/#use-cases): College students calculating cumulative GPA after each semester; High school students tracking unweighted GPA for applications; Academic advisors verifying student standing... - [GPA Calculator - tips](https://devtools.surf/tools/gpa-calculator/#tips): Enter each course as course name | grade | credits; Standard 4.0 scale: A=4, B=3, C=2, D=1, F=0; Add all courses for a semester to get cumulative GPA - [GPA Calculator - fun facts](https://devtools.surf/tools/gpa-calculator/#fun-facts): The 4.0 GPA scale was popularized by Yale University in the 1960s, though letter grades themselves were first used by Mount Holyoke College in 1897; A weighted GPA can exceed 4.0... - [Temperature Converter](https://devtools.surf/tools/temperature-converter/): Convert C / F / K / Rankine all at once - paste any of them - [Temperature Converter - use cases](https://devtools.surf/tools/temperature-converter/#use-cases): Engineers converting between Kelvin and Celsius for scientific data; Travelers converting local weather forecasts between F and C; HVAC technicians checking temperature readings... - [Temperature Converter - tips](https://devtools.surf/tools/temperature-converter/#tips): Paste any value in C, F, K, or Rankine to convert all at once; Absolute zero 0 K is displayed as a reference point; Use Kelvin for scientific and engineering calculations - [Temperature Converter - fun facts](https://devtools.surf/tools/temperature-converter/#fun-facts): The Fahrenheit scale was invented by Daniel Gabriel Fahrenheit in 1724 - he set 0 degrees as the temperature of a brine solution and 96 degrees as human body temperature; The... ## Audio - [Sample Audio Files](https://devtools.surf/tools/sample-audio/): Download forest-ambience clips in WAV, MP3, Opus, FLAC, AAC, WebM - [Sample Audio Files - use cases](https://devtools.surf/tools/sample-audio/#use-cases): Testing audio format support in a web media player; Providing sample files for audio processing pipeline development; Comparing codec quality and file sizes for streaming... - [Sample Audio Files - tips](https://devtools.surf/tools/sample-audio/#tips): Download clips in multiple formats to test your audio pipeline; Use the WAV files for lossless quality testing scenarios; Try different formats to compare file sizes and quality - [Sample Audio Files - fun facts](https://devtools.surf/tools/sample-audio/#fun-facts): The WAV format was introduced by Microsoft and IBM in 1991 as part of the Resource Interchange File Format RIFF specification; MP3 was developed by the Fraunhofer Institute in... - [Audio Converter](https://devtools.surf/tools/audio-converter/): Convert between WAV, MP3, Opus, AAC and more - 100% in-browser - [Audio Converter - use cases](https://devtools.surf/tools/audio-converter/#use-cases): Converting podcast recordings from WAV to MP3 for distribution; Transcoding audio files for cross-browser web player compatibility; Reducing audio file sizes before uploading to a... - [Audio Converter - tips](https://devtools.surf/tools/audio-converter/#tips): All conversion happens in your browser - no files are uploaded; Select the output format and bitrate before converting; Convert WAV to MP3 to reduce file size by up to 90% - [Audio Converter - fun facts](https://devtools.surf/tools/audio-converter/#fun-facts): The MP3 patent held by Fraunhofer expired in April 2017, making the format completely free to use - though AAC and Opus had already surpassed it technically; WebAssembly used by... - [Audio Merger](https://devtools.surf/tools/audio-merger/): Join multiple clips back-to-back into one track - [Audio Merger - use cases](https://devtools.surf/tools/audio-merger/#use-cases): Combining intro, body, and outro clips for podcast episodes; Merging multiple voice recordings into a single audio file; Joining sound effect layers into a composite audio track;... - [Audio Merger - tips](https://devtools.surf/tools/audio-merger/#tips): Drag files to reorder clips before merging them; All clips must share the same sample rate for best results; Preview the merged result before downloading the final file - [Audio Merger - fun facts](https://devtools.surf/tools/audio-merger/#fun-facts): Audio concatenation is one of the simplest operations in digital signal processing - for uncompressed formats, it is literally appending raw sample bytes; Professional DAWs... - [Audio Editor](https://devtools.surf/tools/audio-editor/): Trim, fade, amplify, change speed - all client-side - [Audio Editor - use cases](https://devtools.surf/tools/audio-editor/#use-cases): Trimming silence from the beginning and end of voice recordings; Adding fade effects to music clips for presentation backgrounds; Adjusting playback speed for lecture recordings... - [Audio Editor - tips](https://devtools.surf/tools/audio-editor/#tips): Use the waveform display to visually select trim points; Apply fade-in and fade-out to avoid audio click artifacts; Adjust speed without re-uploading - everything runs client-side - [Audio Editor - fun facts](https://devtools.surf/tools/audio-editor/#fun-facts): The fade-in and fade-out effect dates back to radio broadcasting in the 1920s, where engineers would physically rotate a potentiometer to smoothly adjust volume; Audacity, the... ## Cheatsheets - [Git Cheatsheet](https://devtools.surf/tools/cheatsheet-git/): Everyday Git commands - setup, commit, branch, remote, undo - [Git Cheatsheet - use cases](https://devtools.surf/tools/cheatsheet-git/#use-cases): Looking up the syntax for interactive rebase during code cleanup; Finding the right command to undo a mistaken commit; Referencing remote branch commands during team... - [Git Cheatsheet - tips](https://devtools.surf/tools/cheatsheet-git/#tips): Search by keyword to quickly find the command you need; Review the undo section before running destructive commands; Bookmark this page for quick access during daily development - [Git Cheatsheet - fun facts](https://devtools.surf/tools/cheatsheet-git/#fun-facts): Git was created by Linus Torvalds in just 10 days in April 2005 after the Linux kernel project lost access to the proprietary BitKeeper version control system; The name 'git' is... - [Docker Cheatsheet](https://devtools.surf/tools/cheatsheet-docker/): Docker + Compose commands for images, containers, volumes, Dockerfile - [Docker Cheatsheet - use cases](https://devtools.surf/tools/cheatsheet-docker/#use-cases): Quickly finding the command to exec into a running container; Referencing docker-compose syntax during multi-service setup; Looking up volume mount flags for persistent storage... - [Docker Cheatsheet - tips](https://devtools.surf/tools/cheatsheet-docker/#tips): Use the Compose section for multi-container workflow commands; Check the volume commands before deleting persistent data; Search for Dockerfile directives to optimize your builds - [Docker Cheatsheet - fun facts](https://devtools.surf/tools/cheatsheet-docker/#fun-facts): Docker was released as open source by Solomon Hykes at PyCon in March 2013 and reached 1 billion container downloads within 3 years; Docker containers share the host OS kernel,... - [Regex Cheatsheet](https://devtools.surf/tools/cheatsheet-regex/): Character classes, quantifiers, anchors, groups, flags - [Regex Cheatsheet - use cases](https://devtools.surf/tools/cheatsheet-regex/#use-cases): Quickly looking up lookahead and lookbehind syntax differences; Referencing quantifier behavior during log parsing scripts; Finding the right character class shorthand for data... - [Regex Cheatsheet - tips](https://devtools.surf/tools/cheatsheet-regex/#tips): Search by category: anchors, quantifiers, or character classes; Review the flags section for global and case-insensitive options; Use the groups reference when building complex... - [Regex Cheatsheet - fun facts](https://devtools.surf/tools/cheatsheet-regex/#fun-facts): Regular expressions were invented by mathematician Stephen Kleene in 1951 and first implemented in a computer by Ken Thompson in 1968; The POSIX standard defines two regex... - [Markdown Cheatsheet](https://devtools.surf/tools/cheatsheet-markdown/): CommonMark + GitHub-flavored Markdown syntax at a glance - [Markdown Cheatsheet - use cases](https://devtools.surf/tools/cheatsheet-markdown/#use-cases): Looking up table syntax when writing documentation; Referencing task list checkboxes for GitHub issue templates; Finding the correct image embedding syntax for README files;... - [Markdown Cheatsheet - tips](https://devtools.surf/tools/cheatsheet-markdown/#tips): Check the GitHub-flavored extensions for task lists and tables; Review the link syntax section for reference-style links; Use the code block reference for syntax-highlighted... - [Markdown Cheatsheet - fun facts](https://devtools.surf/tools/cheatsheet-markdown/#fun-facts): Markdown was created by John Gruber with contributions from Aaron Swartz and published on March 19, 2004, as a plain-text formatting syntax; CommonMark, an effort to standardize... - [Vim Cheatsheet](https://devtools.surf/tools/cheatsheet-vim/): Modal editing essentials - modes, motions, edits, files - [Vim Cheatsheet - use cases](https://devtools.surf/tools/cheatsheet-vim/#use-cases): Looking up motion commands when editing files on remote servers; Referencing register commands for advanced copy-paste workflows; Finding window split shortcuts for side-by-side... - [Vim Cheatsheet - tips](https://devtools.surf/tools/cheatsheet-vim/#tips): Start with the modes section to understand insert vs normal mode; Learn the motion commands first - they combine with operators; Check the undo section before making large file... - [Vim Cheatsheet - fun facts](https://devtools.surf/tools/cheatsheet-vim/#fun-facts): Vim was created by Bram Moolenaar in 1991 as an improved clone of Bill Joy's vi editor 1976 - the name stands for 'Vi IMproved.'; Bram Moolenaar maintained Vim for over 30 years... - [Bash / Shell Cheatsheet](https://devtools.surf/tools/cheatsheet-bash/): Navigation, text processing, pipes, processes, scripting basics - [Bash / Shell Cheatsheet - use cases](https://devtools.surf/tools/cheatsheet-bash/#use-cases): Looking up loop syntax when writing deployment scripts; Referencing text processing commands for log file analysis; Finding process management commands during server... - [Bash / Shell Cheatsheet - tips](https://devtools.surf/tools/cheatsheet-bash/#tips): Check the pipes section for combining commands effectively; Review text processing commands like grep, sed, and awk; Use the scripting section for conditional and loop syntax - [Bash / Shell Cheatsheet - fun facts](https://devtools.surf/tools/cheatsheet-bash/#fun-facts): Bash Bourne Again SHell was written by Brian Fox for the GNU Project in 1989 as a free replacement for the Bourne shell sh from 1979; The pipe operator | was invented by Douglas... - [SQL Cheatsheet](https://devtools.surf/tools/cheatsheet-sql/): SELECT, JOIN, aggregates, window functions, upsert - [SQL Cheatsheet - use cases](https://devtools.surf/tools/cheatsheet-sql/#use-cases): Looking up window function syntax for complex reporting queries; Referencing JOIN types when optimizing slow database queries; Finding upsert syntax differences between PostgreSQL... - [SQL Cheatsheet - tips](https://devtools.surf/tools/cheatsheet-sql/#tips): Check the JOIN section to pick the right join type; Review window functions for advanced analytics queries; Use the aggregates section for GROUP BY and HAVING patterns - [SQL Cheatsheet - fun facts](https://devtools.surf/tools/cheatsheet-sql/#fun-facts): SQL was developed at IBM by Donald Chamberlin and Raymond Boyce in 1974, originally called SEQUEL Structured English Query Language; The name was changed from SEQUEL to SQL due to... - [kubectl Cheatsheet](https://devtools.surf/tools/cheatsheet-kubectl/): Inspect, logs, apply, scale, context switching for Kubernetes - [kubectl Cheatsheet - use cases](https://devtools.surf/tools/cheatsheet-kubectl/#use-cases): Quickly finding the command to tail pod logs during incident response; Looking up context-switching syntax when managing multiple clusters; Referencing resource scaling commands... - [kubectl Cheatsheet - tips](https://devtools.surf/tools/cheatsheet-kubectl/#tips): Use the context section to switch between clusters safely; Check the logs commands for debugging pod failures; Review the apply and scale commands for deployment management - [kubectl Cheatsheet - fun facts](https://devtools.surf/tools/cheatsheet-kubectl/#fun-facts): Kubernetes was open-sourced by Google on June 7, 2014, based on their internal Borg system that had managed containers at scale since 2003; The name Kubernetes comes from Greek,... - [npm / yarn / pnpm Cheatsheet](https://devtools.surf/tools/cheatsheet-npm/): Install, run, audit across all three package managers - [npm / yarn / pnpm Cheatsheet - use cases](https://devtools.surf/tools/cheatsheet-npm/#use-cases): Comparing install commands when switching between package managers; Looking up audit commands to scan for vulnerable dependencies; Finding the right workspace command for monorepo... - [npm / yarn / pnpm Cheatsheet - tips](https://devtools.surf/tools/cheatsheet-npm/#tips): Compare equivalent commands across npm, yarn, and pnpm; Check the audit section for security vulnerability scanning; Review the workspace commands for monorepo management - [npm / yarn / pnpm Cheatsheet - fun facts](https://devtools.surf/tools/cheatsheet-npm/#fun-facts): npm was created by Isaac Schlueter in 2010 and is now the world's largest software registry with over 2.5 million packages; Yarn was released by Facebook in October 2016 to... - [TypeScript Cheatsheet](https://devtools.surf/tools/cheatsheet-typescript/): Types, generics, utility types, narrowing, tsconfig essentials - [TypeScript Cheatsheet - use cases](https://devtools.surf/tools/cheatsheet-typescript/#use-cases): Looking up utility type syntax when defining complex interfaces; Referencing generic constraint patterns for reusable library code; Finding type narrowing techniques for union... - [TypeScript Cheatsheet - tips](https://devtools.surf/tools/cheatsheet-typescript/#tips): Use the utility types section for Partial, Pick, and Omit; Review the narrowing section for type guard patterns; Check the generics section for constrained type parameters - [TypeScript Cheatsheet - fun facts](https://devtools.surf/tools/cheatsheet-typescript/#fun-facts): TypeScript was created by Anders Hejlsberg also creator of C# and Turbo Pascal at Microsoft and publicly released on October 1, 2012; TypeScript's type system is Turing-complete,... - [CSS Flexbox Cheatsheet](https://devtools.surf/tools/cheatsheet-flexbox/): Container + item props, common patterns centered, sidebar, sticky footer - [CSS Flexbox Cheatsheet - use cases](https://devtools.surf/tools/cheatsheet-flexbox/#use-cases): Looking up alignment properties when centering elements vertically; Referencing flex shorthand values for responsive card layouts; Finding the right combination of properties for... - [CSS Flexbox Cheatsheet - tips](https://devtools.surf/tools/cheatsheet-flexbox/#tips): Start with the container props: display, direction, and wrap; Check the common patterns section for centered and sidebar layouts; Review the align-items vs align-content... - [CSS Flexbox Cheatsheet - fun facts](https://devtools.surf/tools/cheatsheet-flexbox/#fun-facts): CSS Flexbox reached Candidate Recommendation status in 2012 after 3 major syntax revisions - the original 2009 spec used display: box with completely different properties; The... - [CSS Grid Cheatsheet](https://devtools.surf/tools/cheatsheet-grid/): Template, placement, auto-fit, named areas, holy grail - [CSS Grid Cheatsheet - use cases](https://devtools.surf/tools/cheatsheet-grid/#use-cases): Looking up grid-template syntax for complex page layouts; Referencing auto-fit and minmax for responsive column grids; Finding named area syntax for semantic layout definitions;... - [CSS Grid Cheatsheet - tips](https://devtools.surf/tools/cheatsheet-grid/#tips): Use the named areas section for readable page layouts; Check auto-fit vs auto-fill for responsive column behavior; Review the placement shortcuts for spanning rows and columns - [CSS Grid Cheatsheet - fun facts](https://devtools.surf/tools/cheatsheet-grid/#fun-facts): CSS Grid was championed by Microsoft's Rachel Andrew and Jen Simmons and shipped in all major browsers by October 2017 - a remarkably coordinated rollout; The grid-template-areas... - [Tailwind CSS Cheatsheet](https://devtools.surf/tools/cheatsheet-tailwind/): Layout, spacing, colors, variants, and pro tricks - [Tailwind CSS Cheatsheet - use cases](https://devtools.surf/tools/cheatsheet-tailwind/#use-cases): Finding the right spacing class during rapid UI prototyping; Looking up responsive breakpoint prefixes for mobile-first design; Referencing color class names when implementing a... - [Tailwind CSS Cheatsheet - tips](https://devtools.surf/tools/cheatsheet-tailwind/#tips): Search by CSS property to find the matching Tailwind class; Check the variants section for hover, focus, and responsive prefixes; Review the spacing scale for consistent margin... - [Tailwind CSS Cheatsheet - fun facts](https://devtools.surf/tools/cheatsheet-tailwind/#fun-facts): Tailwind CSS v1.0 was released in May 2019, and by 2024 it had become the second most popular CSS framework after Bootstrap, with over 80,000 GitHub stars; Tailwind's JIT... - [Python Cheatsheet](https://devtools.surf/tools/cheatsheet-python/): Collections, comprehensions, dataclasses, useful stdlib modules - [Python Cheatsheet - use cases](https://devtools.surf/tools/cheatsheet-python/#use-cases): Looking up dictionary comprehension syntax for data transformation; Referencing dataclass decorators when building data models; Finding pathlib methods for cross-platform file... - [Python Cheatsheet - tips](https://devtools.surf/tools/cheatsheet-python/#tips): Check the comprehensions section for list, dict, and set patterns; Review the dataclasses section for modern class definitions; Use the stdlib section for commonly needed built-in... - [Python Cheatsheet - fun facts](https://devtools.surf/tools/cheatsheet-python/#fun-facts): Python was created by Guido van Rossum and first released on February 20, 1991 - its name comes from Monty Python's Flying Circus, not the snake; Python's 'import this' Easter egg... - [JavaScript ES2020+ Cheatsheet](https://devtools.surf/tools/cheatsheet-javascript/): Destructuring, nullish, async, modern array methods, gotchas - [JavaScript ES2020+ Cheatsheet - use cases](https://devtools.surf/tools/cheatsheet-javascript/#use-cases): Frontend devs refreshing on modern JS destructuring syntax; Code reviewers checking if a pattern uses idiomatic ES2020+; Backend Node.js developers adopting nullish coalescing and... - [JavaScript ES2020+ Cheatsheet - tips](https://devtools.surf/tools/cheatsheet-javascript/#tips): Use the search bar to jump to a specific ES2020+ feature; Bookmark sections on nullish coalescing for quick reference; Compare destructuring patterns side by side with examples - [JavaScript ES2020+ Cheatsheet - fun facts](https://devtools.surf/tools/cheatsheet-javascript/#fun-facts): JavaScript was created by Brendan Eich in just 10 days in May 1995, originally named Mocha, then LiveScript; The nullish coalescing operator ?? - [React Hooks Cheatsheet](https://devtools.surf/tools/cheatsheet-react-hooks/): State, memo, effects, context, custom hooks, newer APIs - [React Hooks Cheatsheet - use cases](https://devtools.surf/tools/cheatsheet-react-hooks/#use-cases): React beginners learning when to use useState vs useReducer; Senior devs reviewing newer hook APIs like useId and useSyncExternalStore; Teams establishing hook conventions for... - [React Hooks Cheatsheet - tips](https://devtools.surf/tools/cheatsheet-react-hooks/#tips): Scan the custom hooks section for reusable abstraction ideas; Check the useEffect cleanup patterns to avoid memory leaks; Review the useMemo vs useCallback comparison to pick the... - [React Hooks Cheatsheet - fun facts](https://devtools.surf/tools/cheatsheet-react-hooks/#fun-facts): React Hooks were introduced at React Conf 2018 by Sophie Alpert and Dan Abramov, shipping in React 16.8 February 2019; The Rules of Hooks exist because React tracks hook state by... - [Nginx Cheatsheet](https://devtools.surf/tools/cheatsheet-nginx/): Reverse proxy, static + SPA fallback, HTTPS, ops commands - [Nginx Cheatsheet - use cases](https://devtools.surf/tools/cheatsheet-nginx/#use-cases): DevOps engineers configuring reverse proxies for microservices; Full-stack devs setting up HTTPS for staging environments; SREs writing Nginx configs for static file serving and... - [Nginx Cheatsheet - tips](https://devtools.surf/tools/cheatsheet-nginx/#tips): Copy the reverse proxy block and adjust upstream and port values; Use the HTTPS section to set up Let's Encrypt with certbot; Check the SPA fallback snippet for single-page app... - [Nginx Cheatsheet - fun facts](https://devtools.surf/tools/cheatsheet-nginx/#fun-facts): Nginx was created by Igor Sysoev in 2004 to solve the C10K problem - handling 10,000 concurrent connections on a single server; As of 2024, Nginx powers over 34% of all websites,... - [SSH Cheatsheet](https://devtools.surf/tools/cheatsheet-ssh/): Keys, connect, port forwarding, ~/.ssh/config, file transfer - [SSH Cheatsheet - use cases](https://devtools.surf/tools/cheatsheet-ssh/#use-cases): Junior devs setting up SSH keys for GitHub for the first time; DevOps engineers configuring jump hosts and bastion access; Backend developers creating SSH tunnels to remote... - [SSH Cheatsheet - tips](https://devtools.surf/tools/cheatsheet-ssh/#tips): Copy the ~/.ssh/config template to avoid typing long commands; Use the port forwarding section for secure database tunnels; Check the key generation command for Ed25519 best... - [SSH Cheatsheet - fun facts](https://devtools.surf/tools/cheatsheet-ssh/#fun-facts): SSH was invented by Tatu Ylonen in 1995 at Helsinki University of Technology after a password-sniffing attack on the university network; The default SSH port 22 was chosen by... - [tmux Cheatsheet](https://devtools.surf/tools/cheatsheet-tmux/): Sessions, windows, panes, copy mode for persistent terminals - [tmux Cheatsheet - use cases](https://devtools.surf/tools/cheatsheet-tmux/#use-cases): Remote developers keeping long-running builds alive over SSH; SREs monitoring multiple server logs in split panes simultaneously; Data engineers running overnight ETL jobs in... - [tmux Cheatsheet - tips](https://devtools.surf/tools/cheatsheet-tmux/#tips): Start with the session commands to keep processes alive after disconnect; Use the pane splitting shortcuts to build a multi-panel workspace; Check the copy mode bindings for... - [tmux Cheatsheet - fun facts](https://devtools.surf/tools/cheatsheet-tmux/#fun-facts): tmux was created by Nicholas Marriott and first released in 2007 as a BSD-licensed replacement for GNU Screen, which dates back to 1987; The prefix key Ctrl-b was chosen to avoid... - [cURL Cheatsheet](https://devtools.surf/tools/cheatsheet-curl/): HTTP from the CLI - methods, headers, auth, timing, retries - [cURL Cheatsheet - use cases](https://devtools.surf/tools/cheatsheet-curl/#use-cases): Backend devs testing REST endpoints without leaving the terminal; QA engineers scripting automated API smoke tests in CI pipelines; DevOps teams debugging webhook payloads with... - [cURL Cheatsheet - tips](https://devtools.surf/tools/cheatsheet-curl/#tips): Use the timing flags section to debug slow API responses; Copy the auth header examples for Bearer and Basic patterns; Check the retry and redirect options for resilient scripts - [cURL Cheatsheet - fun facts](https://devtools.surf/tools/cheatsheet-curl/#fun-facts): cURL was first released by Daniel Stenberg in 1998; the name stands for 'Client URL.' Stenberg still maintains it as of 2024; cURL supports over 25 protocols including HTTP, FTP,... - [Makefile Cheatsheet](https://devtools.surf/tools/cheatsheet-makefile/): Rule basics, variables, pattern rules, and make invocations - [Makefile Cheatsheet - use cases](https://devtools.surf/tools/cheatsheet-makefile/#use-cases): C/C++ developers managing compilation and linking steps; DevOps engineers creating shortcut commands for Docker and deploy workflows; Go developers using Make as a task runner for... - [Makefile Cheatsheet - tips](https://devtools.surf/tools/cheatsheet-makefile/#tips): Check the variable syntax section for = vs := differences; Use pattern rules to avoid repeating similar build targets; Copy the .PHONY declaration to prevent conflicts with file... - [Makefile Cheatsheet - fun facts](https://devtools.surf/tools/cheatsheet-makefile/#fun-facts): Make was created by Stuart Feldman at Bell Labs in 1976, making it one of the oldest build tools still in widespread use today; Makefiles require actual tab characters for... - [HTTP Headers Cheatsheet](https://devtools.surf/tools/cheatsheet-http-headers/): Request + response headers and a caching decision tree - [HTTP Headers Cheatsheet - use cases](https://devtools.surf/tools/cheatsheet-http-headers/#use-cases): Frontend devs debugging CORS and caching issues in the browser; API developers setting correct Content-Type and Accept headers; DevOps engineers configuring CDN cache policies... - [HTTP Headers Cheatsheet - tips](https://devtools.surf/tools/cheatsheet-http-headers/#tips): Use the caching decision tree to pick the right Cache-Control value; Compare request vs response headers in the side-by-side layout; Search for specific headers like... - [HTTP Headers Cheatsheet - fun facts](https://devtools.surf/tools/cheatsheet-http-headers/#fun-facts): HTTP/1.0 1996 had only 16 defined headers; HTTP/1.1 1997 expanded this to 46. - [LLM Prompting Cheatsheet](https://devtools.surf/tools/cheatsheet-llm-prompting/): Techniques that actually help LLM output; anti-patterns to skip - [LLM Prompting Cheatsheet - use cases](https://devtools.surf/tools/cheatsheet-llm-prompting/#use-cases): Developers integrating LLM APIs and optimizing prompt quality; Product managers writing system prompts for AI-powered features; Content creators refining prompts for consistent... - [LLM Prompting Cheatsheet - tips](https://devtools.surf/tools/cheatsheet-llm-prompting/#tips): Check the anti-patterns section to avoid common prompting mistakes; Use the structured output techniques for reliable JSON responses; Review the chain-of-thought section for... - [LLM Prompting Cheatsheet - fun facts](https://devtools.surf/tools/cheatsheet-llm-prompting/#fun-facts): The term 'prompt engineering' barely existed before 2020; Google Trends shows near-zero search volume until GPT-3's release in June 2020; Chain-of-thought prompting, published by... - [JWT Cheatsheet](https://devtools.surf/tools/cheatsheet-jwt/): Structure, standard claims, algorithms, do/don't - [JWT Cheatsheet - use cases](https://devtools.surf/tools/cheatsheet-jwt/#use-cases): Backend devs implementing stateless authentication for REST APIs; Security engineers auditing JWT configurations for token theft risks; Mobile developers understanding token... - [JWT Cheatsheet - tips](https://devtools.surf/tools/cheatsheet-jwt/#tips): Review the algorithm comparison to choose between HS256 and RS256; Check the standard claims table for iss, sub, aud, and exp usage; Use the do/don't section to avoid common JWT... - [JWT Cheatsheet - fun facts](https://devtools.surf/tools/cheatsheet-jwt/#fun-facts): JWT RFC 7519 was authored by Michael B. Jones at Microsoft and published in May 2015, building on the earlier JSON Web Signature JWS spec; A JWT has exactly three... - [PostgreSQL Cheatsheet](https://devtools.surf/tools/cheatsheet-postgres/): psql meta-commands, JSONB, indexing, EXPLAIN - [PostgreSQL Cheatsheet - use cases](https://devtools.surf/tools/cheatsheet-postgres/#use-cases): DBAs quickly looking up psql shortcuts during troubleshooting; Backend devs writing performant JSONB queries for semi-structured data; Data analysts using EXPLAIN to optimize slow... - [PostgreSQL Cheatsheet - tips](https://devtools.surf/tools/cheatsheet-postgres/#tips): Copy the psql meta-commands for quick table and schema inspection; Use the EXPLAIN ANALYZE examples to diagnose slow queries; Check the JSONB operators section for document-style... - [PostgreSQL Cheatsheet - fun facts](https://devtools.surf/tools/cheatsheet-postgres/#fun-facts): PostgreSQL traces its origins to the POSTGRES project at UC Berkeley, led by Michael Stonebraker starting in 1986. ## Info / Guides - [Docker Basics](https://devtools.surf/tools/info-docker-basics/): What containers are, why they're useful, first run, common pitfalls - [Docker Basics - use cases](https://devtools.surf/tools/info-docker-basics/#use-cases): Junior developers understanding containers for the first time; Students setting up consistent development environments across machines; Backend devs learning to containerize a... - [Docker Basics - tips](https://devtools.surf/tools/info-docker-basics/#tips): Read the 'first run' section before installing Docker Desktop; Check the common pitfalls list to avoid volume mount mistakes; Review the container vs VM comparison to understand... - [Docker Basics - fun facts](https://devtools.surf/tools/info-docker-basics/#fun-facts): Docker was released by Solomon Hykes at PyCon 2013 as an internal tool from dotCloud. - [SEO Basics for Developers](https://devtools.surf/tools/info-seo-basics/): Technical SEO, on-page signals, structured data, what to skip - [SEO Basics for Developers - use cases](https://devtools.surf/tools/info-seo-basics/#use-cases): Frontend developers adding meta tags and structured data to React apps; Indie hackers optimizing their SaaS landing pages for organic traffic; Full-stack devs ensuring server-side... - [SEO Basics for Developers - tips](https://devtools.surf/tools/info-seo-basics/#tips): Focus on the technical SEO checklist before writing any content; Use the structured data section to add JSON-LD schema markup; Check the 'what to skip' list to avoid wasting time... - [SEO Basics for Developers - fun facts](https://devtools.surf/tools/info-seo-basics/#fun-facts): Google processes over 8.5 billion searches per day as of 2024, making organic search the largest single source of website traffic worldwide; The term 'Search Engine Optimization'... - [REST API Basics](https://devtools.surf/tools/info-rest-api-basics/): HTTP verbs, status codes, resource naming, common gotchas - [REST API Basics - use cases](https://devtools.surf/tools/info-rest-api-basics/#use-cases): Junior developers designing their first CRUD API endpoints; Frontend devs understanding proper HTTP verb and status code usage; Tech leads establishing API naming conventions for... - [REST API Basics - tips](https://devtools.surf/tools/info-rest-api-basics/#tips): Study the HTTP verb table to match CRUD operations correctly; Use the status code reference for proper error response design; Check the resource naming section for URL path... - [REST API Basics - fun facts](https://devtools.surf/tools/info-rest-api-basics/#fun-facts): REST was defined by Roy Fielding in his 2000 PhD dissertation at UC Irvine - the same person who co-authored the HTTP/1.1 specification; The original REST dissertation never... - [Next.js App Router Basics](https://devtools.surf/tools/info-nextjs-app-router-basics/): File conventions, server vs client, data fetching, snags - [Next.js App Router Basics - use cases](https://devtools.surf/tools/info-nextjs-app-router-basics/#use-cases): React developers migrating from Pages Router to App Router; Full-stack devs understanding server vs client component boundaries; Teams evaluating Next.js for a new project's... - [Next.js App Router Basics - tips](https://devtools.surf/tools/info-nextjs-app-router-basics/#tips): Read the server vs client component section before writing any code; Check the file conventions list for layout.tsx and loading.tsx usage; Review the data fetching patterns to... - [Next.js App Router Basics - fun facts](https://devtools.surf/tools/info-nextjs-app-router-basics/#fun-facts): Next.js was created by Guillermo Rauch and first released by Vercel then ZEIT in October 2016 with just 6 pages of documentation; The App Router, introduced in Next.js 13 October... - [Connect Your Site to Google](https://devtools.surf/tools/info-google-setup/): Search Console, GA4, Tag Manager, Ads - end-to-end setup order - [Connect Your Site to Google - use cases](https://devtools.surf/tools/info-google-setup/#use-cases): Indie developers launching a site and setting up analytics from scratch; Marketing teams needing developers to wire up Tag Manager correctly; Startup founders connecting Search... - [Connect Your Site to Google - tips](https://devtools.surf/tools/info-google-setup/#tips): Follow the setup order: Search Console first, then GA4, then Tag Manager; Use the verification methods list to pick the easiest DNS option; Check the Ads linking section only... - [Connect Your Site to Google - fun facts](https://devtools.surf/tools/info-google-setup/#fun-facts): Google Search Console originally Webmaster Tools, launched 2006 processes data from over 200 million active websites registered with the service; GA4 replaced Universal Analytics... - [Git Basics First Hour](https://devtools.surf/tools/info-git-basics/): Mental model, first workflow, daily loop, undo cookbook - [Git Basics First Hour - use cases](https://devtools.surf/tools/info-git-basics/#use-cases): Complete beginners making their first commit and push; Self-taught developers filling gaps in their Git mental model; Bootcamp students learning the stage-commit-push daily... - [Git Basics First Hour - tips](https://devtools.surf/tools/info-git-basics/#tips): Start with the mental model section to understand staging vs commits; Use the undo cookbook for common mistakes like amending and resetting; Follow the daily loop workflow to... - [Git Basics First Hour - fun facts](https://devtools.surf/tools/info-git-basics/#fun-facts): Linus Torvalds created Git in April 2005 - he wrote the first working version in just 10 days after a licensing dispute with BitKeeper; The name 'Git' is British slang for an... - [Kubernetes Basics](https://devtools.surf/tools/info-kubernetes-basics/): Pods, deployments, services, YAML, when to reach for k8s - [Kubernetes Basics - use cases](https://devtools.surf/tools/info-kubernetes-basics/#use-cases): Backend developers evaluating whether their project needs Kubernetes; DevOps engineers learning Pod and Deployment fundamentals; Platform teams understanding Services and... - [Kubernetes Basics - tips](https://devtools.surf/tools/info-kubernetes-basics/#tips): Read the 'when to reach for k8s' section before adopting it; Study the Pod-Deployment-Service hierarchy in order; Check the YAML examples to understand required fields and labels - [Kubernetes Basics - fun facts](https://devtools.surf/tools/info-kubernetes-basics/#fun-facts): Kubernetes Greek for 'helmsman' was created by Google engineers Joe Beda, Brendan Burns, and Craig McLuckie, open-sourced in June 2014; Kubernetes was inspired by Google's... - [GraphQL vs REST](https://devtools.surf/tools/info-graphql-vs-rest/): When each wins, and the hidden costs of GraphQL at scale - [GraphQL vs REST - use cases](https://devtools.surf/tools/info-graphql-vs-rest/#use-cases): Architects deciding between GraphQL and REST for a new API layer; Mobile developers evaluating GraphQL to reduce over-fetching on slow networks; Teams with existing REST APIs... - [GraphQL vs REST - tips](https://devtools.surf/tools/info-graphql-vs-rest/#tips): Read the 'when each wins' section to match your project's needs; Check the hidden costs analysis before choosing GraphQL for a new API; Compare the data fetching patterns for... - [GraphQL vs REST - fun facts](https://devtools.surf/tools/info-graphql-vs-rest/#fun-facts): GraphQL was developed internally at Facebook in 2012 by Lee Byron, Nick Schrock, and Dan Schafer, originally to power the Facebook mobile news feed; Facebook open-sourced GraphQL... - [WebSockets Basics](https://devtools.surf/tools/info-websockets-basics/): Lifecycle, browser API, when to use, production gotchas - [WebSockets Basics - use cases](https://devtools.surf/tools/info-websockets-basics/#use-cases): Frontend devs building real-time chat or notification features; Game developers implementing low-latency multiplayer communication; FinTech engineers streaming live price feeds to... - [WebSockets Basics - tips](https://devtools.surf/tools/info-websockets-basics/#tips): Study the connection lifecycle before implementing reconnection logic; Check the production gotchas for load balancer and proxy pitfalls; Use the 'when to use' decision chart vs... - [WebSockets Basics - fun facts](https://devtools.surf/tools/info-websockets-basics/#fun-facts): The WebSocket protocol RFC 6455 was standardized in December 2011, ending years of hacky workarounds like long-polling and hidden iframes; A WebSocket connection starts as an HTTP... - [OAuth 2.0 Flows Explained](https://devtools.surf/tools/info-oauth2-flows/): Auth code + PKCE, client credentials, device, token types, scopes - [OAuth 2.0 Flows Explained - use cases](https://devtools.surf/tools/info-oauth2-flows/#use-cases): Backend devs implementing Google or GitHub social login; Mobile developers securing API access with PKCE authorization flow; Platform teams designing OAuth scopes for third-party... - [OAuth 2.0 Flows Explained - tips](https://devtools.surf/tools/info-oauth2-flows/#tips): Start with Auth Code + PKCE for any browser-based application; Check the token types section to understand access vs refresh tokens; Use the flow decision tree to pick the right... - [OAuth 2.0 Flows Explained - fun facts](https://devtools.surf/tools/info-oauth2-flows/#fun-facts): OAuth 2.0 RFC 6749 was published in October 2012 by Eran Hammer, who later resigned from the project calling it 'the road to hell' due to committee compromises; PKCE Proof Key for... - [TLS / HTTPS Basics](https://devtools.surf/tools/info-tls-https-basics/): Handshake, certs, Let's Encrypt, hardening to A+ - [TLS / HTTPS Basics - use cases](https://devtools.surf/tools/info-tls-https-basics/#use-cases): DevOps engineers setting up HTTPS for production web servers; Full-stack developers understanding certificate chains and pinning; Security teams hardening TLS configurations to... - [TLS / HTTPS Basics - tips](https://devtools.surf/tools/info-tls-https-basics/#tips): Follow the Let's Encrypt setup steps for free automated certificates; Check the hardening checklist to reach an A+ rating on SSL Labs; Review the handshake diagram to understand... - [TLS / HTTPS Basics - fun facts](https://devtools.surf/tools/info-tls-https-basics/#fun-facts): TLS 1.0 was published in 1999 as an upgrade to Netscape's SSL 3.0. TLS 1.3 RFC 8446, August 2018 reduced the handshake from 2 round trips to just 1; Let's Encrypt, launched in... - [Core Web Vitals](https://devtools.surf/tools/info-core-web-vitals/): LCP, INP, CLS - what they are, how to fix, how to measure - [Core Web Vitals - use cases](https://devtools.surf/tools/info-core-web-vitals/#use-cases): Frontend devs optimizing Lighthouse scores for SEO and UX; Performance engineers diagnosing slow LCP from large hero images; E-commerce teams reducing CLS to improve conversion... - [Core Web Vitals - tips](https://devtools.surf/tools/info-core-web-vitals/#tips): Focus on LCP first since it has the largest impact on perceived speed; Use the CLS fixes section to eliminate layout shift from images and ads; Check the measurement tools list... - [Core Web Vitals - fun facts](https://devtools.surf/tools/info-core-web-vitals/#fun-facts): Google introduced Core Web Vitals in May 2020 and made them a ranking signal in June 2021, directly linking UX metrics to search rankings; INP Interaction to Next Paint replaced... - [CORS Explained](https://devtools.surf/tools/info-cors-explained/): Same-origin rule, simple vs preflight, server headers, gotchas - [CORS Explained - use cases](https://devtools.surf/tools/info-cors-explained/#use-cases): Frontend devs debugging 'No Access-Control-Allow-Origin' browser errors; Backend developers configuring CORS headers for API endpoints; Full-stack teams setting up local dev... - [CORS Explained - tips](https://devtools.surf/tools/info-cors-explained/#tips): Read the simple vs preflight request distinction to debug 403 errors; Check the server header examples for your specific backend framework; Use the gotchas section to fix... - [CORS Explained - fun facts](https://devtools.surf/tools/info-cors-explained/#fun-facts): The same-origin policy was introduced by Netscape Navigator 2.0 in 1995 to prevent malicious scripts from reading data from other domains; CORS Cross-Origin Resource Sharing was... - [Cookies vs localStorage vs sessionStorage](https://devtools.surf/tools/info-cookies-storage/): Lifetime, security, cross-tab, cookie attributes, anti-patterns - [Cookies vs localStorage vs sessionStorage - use cases](https://devtools.surf/tools/info-cookies-storage/#use-cases): Frontend developers choosing between cookies and localStorage for auth tokens; Security engineers auditing cookie attributes for CSRF protection; Mobile web devs understanding... - [Cookies vs localStorage vs sessionStorage - tips](https://devtools.surf/tools/info-cookies-storage/#tips): Use the comparison table to pick the right storage for your use case; Check the cookie attributes section for SameSite and Secure flags; Review the anti-patterns list to avoid... - [Cookies vs localStorage vs sessionStorage - fun facts](https://devtools.surf/tools/info-cookies-storage/#fun-facts): HTTP cookies were invented by Lou Montulli at Netscape in 1994 to solve the shopping cart problem - HTTP had no way to remember state between requests; The localStorage API was... - [Monorepos Turbo / Nx / pnpm](https://devtools.surf/tools/info-monorepos/): When to monorepo, tool choice, pitfalls - [Monorepos Turbo / Nx / pnpm - use cases](https://devtools.surf/tools/info-monorepos/#use-cases): Engineering leads evaluating monorepo migration for multi-package projects; Platform teams choosing between Turborepo and Nx for build orchestration; DevOps engineers optimizing... - [Monorepos Turbo / Nx / pnpm - tips](https://devtools.surf/tools/info-monorepos/#tips): Read the 'when to monorepo' section before restructuring your codebase; Compare Turbo, Nx, and pnpm workspaces to match your stack; Check the pitfalls section for CI cache and... - [Monorepos Turbo / Nx / pnpm - fun facts](https://devtools.surf/tools/info-monorepos/#fun-facts): Google's monorepo holds over 2 billion lines of code across 86 TB, managed by a custom tool called Piper - it may be the largest single code repository in history; Turborepo was... - [Redis Basics](https://devtools.surf/tools/info-redis-basics/): Data types, caching pattern, operational commands, pitfalls - [Redis Basics - use cases](https://devtools.surf/tools/info-redis-basics/#use-cases): Backend developers implementing API response caching layers; DevOps engineers setting up session storage for horizontally scaled apps; Real-time app developers using Redis Pub/Sub... - [Redis Basics - tips](https://devtools.surf/tools/info-redis-basics/#tips): Start with the caching pattern section for the most common use case; Check the data types overview to pick the right structure for your data; Review the operational commands for... - [Redis Basics - fun facts](https://devtools.surf/tools/info-redis-basics/#fun-facts): Redis was created by Salvatore Sanfilippo antirez in 2009. The name stands for 'Remote Dictionary Server.'; Redis can handle over 100,000 SET operations per second on a single... - [PostgreSQL Basics](https://devtools.surf/tools/info-postgres-basics/): Why Postgres, first queries, unique features, beginner mistakes - [PostgreSQL Basics - use cases](https://devtools.surf/tools/info-postgres-basics/#use-cases): Beginners choosing their first production database for a web app; MySQL developers curious about Postgres-specific features and advantages; Students learning SQL fundamentals with... - [PostgreSQL Basics - tips](https://devtools.surf/tools/info-postgres-basics/#tips): Start with the first queries section to learn SELECT, INSERT, and UPDATE; Check the unique features list to see what sets Postgres apart from MySQL; Review the beginner mistakes... - [PostgreSQL Basics - fun facts](https://devtools.surf/tools/info-postgres-basics/#fun-facts): PostgreSQL's MVCC Multi-Version Concurrency Control means readers never block writers and writers never block readers - a key advantage over MySQL's InnoDB locking; PostgreSQL is... - [CI/CD with GitHub Actions Basics](https://devtools.surf/tools/info-github-actions/): Anatomy, minimal workflow, triggers, secrets, deploy gotchas - [CI/CD with GitHub Actions Basics - use cases](https://devtools.surf/tools/info-github-actions/#use-cases): Developers setting up automated testing on pull requests; DevOps engineers building deployment pipelines for staging and production; Open-source maintainers automating release and... - [CI/CD with GitHub Actions Basics - tips](https://devtools.surf/tools/info-github-actions/#tips): Study the workflow YAML anatomy before writing your first action; Use the secrets section to safely inject API keys and credentials; Check the deploy gotchas list for environment... - [CI/CD with GitHub Actions Basics - fun facts](https://devtools.surf/tools/info-github-actions/#fun-facts): GitHub Actions was launched in October 2018 for CI/CD, just 7 months after Microsoft acquired GitHub for $7.5 billion in June 2018; GitHub provides 2,000 free CI/CD minutes per... - [Serverless vs Containers vs VMs](https://devtools.surf/tools/info-serverless-vs-containers/): Where each wins; when serverless bites - [Serverless vs Containers vs VMs - use cases](https://devtools.surf/tools/info-serverless-vs-containers/#use-cases): Architects choosing compute platforms for new microservice deployments; Startup CTOs evaluating serverless to minimize infrastructure management; DevOps teams deciding between... - [Serverless vs Containers vs VMs - tips](https://devtools.surf/tools/info-serverless-vs-containers/#tips): Read the 'where each wins' matrix to match workload to platform; Check the cold start analysis for latency-sensitive applications; Review the cost comparison to understand when... - [Serverless vs Containers vs VMs - fun facts](https://devtools.surf/tools/info-serverless-vs-containers/#fun-facts): AWS Lambda, launched in November 2014, was the first major serverless compute platform. It originally supported only Node.js with a 60-second timeout; A typical AWS Lambda cold... - [Microservices vs Monolith](https://devtools.surf/tools/info-microservices-vs-monolith/): Default to monolith; when to split; the modular-monolith middle path - [Microservices vs Monolith - use cases](https://devtools.surf/tools/info-microservices-vs-monolith/#use-cases): Startup founders deciding on initial architecture for a new product; Engineering leads evaluating when to split a growing monolith; Platform teams designing bounded contexts for... - [Microservices vs Monolith - tips](https://devtools.surf/tools/info-microservices-vs-monolith/#tips): Start with the 'default to monolith' argument before considering splitting; Check the modular monolith section for the pragmatic middle ground; Review the splitting criteria to... - [Microservices vs Monolith - fun facts](https://devtools.surf/tools/info-microservices-vs-monolith/#fun-facts): Martin Fowler and James Lewis coined the term 'microservices' in a March 2014 blog post, though the architectural style had been practiced at Netflix and Amazon since 2009;... - [DNS Basics](https://devtools.surf/tools/info-dns-basics/): Record types, resolution, debugging, common snags - [DNS Basics - use cases](https://devtools.surf/tools/info-dns-basics/#use-cases): Developers setting up custom domains for web applications; DevOps engineers debugging DNS resolution failures in production; Full-stack devs configuring MX records for custom... - [DNS Basics - tips](https://devtools.surf/tools/info-dns-basics/#tips): Use the record types table to distinguish A, AAAA, CNAME, and MX records; Check the debugging section for dig and nslookup command examples; Review the common snags list for TTL... - [DNS Basics - fun facts](https://devtools.surf/tools/info-dns-basics/#fun-facts): The Domain Name System was invented by Paul Mockapetris in 1983 RFC 882/883, replacing a single HOSTS.TXT file that was manually distributed to every computer on ARPANET; There... - [Load Balancing Basics](https://devtools.surf/tools/info-load-balancing/): L4 vs L7, algorithms, health checks, failure modes - [Load Balancing Basics - use cases](https://devtools.surf/tools/info-load-balancing/#use-cases): DevOps engineers configuring Nginx or HAProxy for backend services; Platform teams designing high-availability architectures with failover; Backend developers understanding sticky... - [Load Balancing Basics - tips](https://devtools.surf/tools/info-load-balancing/#tips): Compare L4 vs L7 load balancing to pick the right layer for your needs; Check the health check configuration to avoid routing to dead backends; Review the failure modes section to... - [Load Balancing Basics - fun facts](https://devtools.surf/tools/info-load-balancing/#fun-facts): Round-robin DNS was the earliest form of load balancing, used by NCSA in 1995 to distribute traffic for the first popular web server; L7 application layer load balancers can... - [Caching Strategies](https://devtools.surf/tools/info-caching-strategies/): Where to cache, patterns, invalidation, common bugs - [Caching Strategies - use cases](https://devtools.surf/tools/info-caching-strategies/#use-cases): Backend developers implementing Redis caching for database queries; Frontend engineers configuring HTTP cache headers for static assets; Platform teams designing multi-layer... - [Caching Strategies - tips](https://devtools.surf/tools/info-caching-strategies/#tips): Start with the 'where to cache' hierarchy: browser, CDN, app, database; Check the invalidation patterns to avoid serving stale data; Review the common bugs section for cache... - [Caching Strategies - fun facts](https://devtools.surf/tools/info-caching-strategies/#fun-facts): Phil Karlton's famous quote - 'There are only two hard things in Computer Science: cache invalidation and naming things' - dates to the early 1990s at Netscape; CDN caching can... - [Observability: Logs, Metrics, Traces](https://devtools.surf/tools/info-observability/): Three pillars, RED/USE metrics, OpenTelemetry, tooling - [Observability: Logs, Metrics, Traces - use cases](https://devtools.surf/tools/info-observability/#use-cases): SREs building dashboards with RED metrics for service health; Backend developers adding distributed tracing to microservice architectures; DevOps teams choosing between Datadog,... - [Observability: Logs, Metrics, Traces - tips](https://devtools.surf/tools/info-observability/#tips): Start with the three pillars overview: logs, metrics, and traces; Check the RED and USE method sections for choosing the right metrics; Review the OpenTelemetry setup guide for... - [Observability: Logs, Metrics, Traces - fun facts](https://devtools.surf/tools/info-observability/#fun-facts): The term 'observability' comes from control theory, coined by Rudolf E. Kalman in 1960. - [SemVer & Dependency Hygiene](https://devtools.surf/tools/info-semver-dependencies/): Version ranges, lockfile, update strategy, supply-chain hygiene - [SemVer & Dependency Hygiene - use cases](https://devtools.surf/tools/info-semver-dependencies/#use-cases): Developers understanding the difference between ^ and ~ version ranges; DevOps engineers setting up automated dependency update tools like Renovate; Security teams auditing npm... - [SemVer & Dependency Hygiene - tips](https://devtools.surf/tools/info-semver-dependencies/#tips): Check the version range syntax to understand ^, ~, and exact pinning; Review the lockfile section to know when to commit and when to regenerate; Use the supply-chain hygiene... - [SemVer & Dependency Hygiene - fun facts](https://devtools.surf/tools/info-semver-dependencies/#fun-facts): Semantic Versioning SemVer was formalized by Tom Preston-Werner GitHub co-founder in 2009 as a specification to solve 'dependency hell.'; The npm registry surpassed 3 million... ## Optional - [llms.txt](https://devtools.surf/llms.txt): Compact tool index without deep-links. - [Sitemap](https://devtools.surf/sitemap.xml): Canonical URL list for every page. - [Privacy policy](https://devtools.surf/privacy/): What we collect and why. - [Pricing](https://devtools.surf/payments/): Credit packs and subscriptions.