# DevTools Surf — full tool index > A machine-readable digest of every tool on DevTools Surf. Each entry includes the tool's description, recommended use cases, tips for getting the most out of it, and one fun fact — generated for AI crawlers and LLM retrieval systems. Generated: 2026-04-22T21:13:36.260Z Tools: 543 · Categories: 28 --- ## JSON ### [JSON Formatter](https://devtools.surf/tools/json-formatter/) Format and prettify JSON with syntax highlighting **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 **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 keys' to alphabetize all object keys recursively **Fun facts:** - JSON was inspired by JavaScript object literals but is actually language-independent. Douglas Crockford popularized it in 2001. - The entire JSON grammar can be expressed in just 6 railroad diagrams — it is one of the simplest data formats ever designed. - JSON does not support comments by design. Crockford removed them because people were using comments to hold parsing directives, which broke interoperability. *Tags:* format, prettify, indent --- ### [JSON Validator](https://devtools.surf/tools/json-validator/) Validate JSON syntax and structure **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 structure, not just syntax **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 — different parsers handle them differently. - ECMA-404, the JSON standard, was approved in just 3 months — the fastest ECMA standard ever ratified. *Tags:* validate, lint, check --- ### [JSON Viewer](https://devtools.surf/tools/json-viewer/) Explore JSON data in a tree view **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 config files quickly **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 **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 October 2013 and an ISO standard (ISO/IEC 21778) in 2017. - Despite its name, JSON is language-independent and has parsers available in over 60 programming languages. *Tags:* view, tree, explore --- ### [JSON Stringify](https://devtools.surf/tools/json-stringify/) Convert JSON to escaped string representation **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 - Backend devs storing JSON inside database text columns **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 **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 argument, making it surprisingly versatile for filtering and formatting. - The maximum nesting depth for JSON.stringify in V8 is approximately 9,000 levels before hitting a stack overflow. *Tags:* stringify, escape, string --- ### [JSON Patch](https://devtools.surf/tools/json-patch/) Generate or apply RFC 6902 JSON Patch operations **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 - Build undo/redo systems using reversible patch operations **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 **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, where '/foo/0' means the first element of the 'foo' array. - The 'test' operation in JSON Patch acts as a precondition check, failing the entire patch if the expected value does not match. *Tags:* json, patch, rfc6902 --- ### [JSON Diff](https://devtools.surf/tools/json-diff/) Compare two JSON documents and show structural differences **Use cases:** - Compare API responses between staging and production - Detect unexpected changes in configuration files - Validate data migration output against expected results - Review schema changes between API versions **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 **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 element-by-element can involve millions of comparisons, making efficient tree-diff algorithms essential. - RFC 7396 (JSON Merge Patch) provides a simpler alternative to JSON Patch but cannot represent explicit null deletions or array modifications. *Tags:* json, diff, compare --- ### [JSONPath Tester](https://devtools.surf/tools/jsonpath-tester/) Test JSONPath expressions against a JSON document **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 jq-style filters for command-line JSON processing **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)] **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 was chosen to mirror XPath's '/' root, providing a familiar navigation paradigm for XML developers. - JSONPath's filter expressions [?(...)] allow inline boolean logic, making it possible to query JSON like a database without SQL. *Tags:* json, jsonpath, query --- ### [JSON Sort Keys](https://devtools.surf/tools/json-sort-keys/) Recursively sort all keys in a JSON document alphabetically **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 eliminating key order differences **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 **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 JavaScript's JSON.stringify does not, requiring manual implementation. - Canonical JSON formats like JCS (RFC 8785) mandate sorted keys to enable deterministic hashing and digital signatures. *Tags:* json, sort, keys, alphabetical --- ### [JSON Flatten / Unflatten](https://devtools.surf/tools/json-flatten/) Flatten nested JSON to dot-notation or unflatten back **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 - Prepare hierarchical data for flat-file or CSV export **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 **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 nested document fields, making flattened keys directly usable as Mongo query paths. - Flattening a 10-level deep JSON object can reveal hundreds of leaf paths, making it invaluable for understanding complex API responses. *Tags:* json, flatten, unflatten, dot-notation --- ### [JSON Minifier](https://devtools.surf/tools/json-minifier/) Minify JSON with size statistics **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 - Prepare minified JSON for URL query parameters or cookies **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 **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 2001 and formalized as ECMA-404 in 2013, deliberately designed to be a minimal data format. - HTTP compression (gzip/brotli) applied after minification typically achieves 70-90% total size reduction compared to pretty-printed JSON. *Tags:* json, minify, compress, size --- ### [JSON Merge / Deep Merge](https://devtools.surf/tools/json-merge/) Deep merge two JSON objects together **Use cases:** - DevOps engineers combining environment-specific config overrides - Backend developers merging default and user settings objects - CI/CD pipelines assembling config from multiple partial files - Data engineers consolidating JSON records from different sources **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 with defaults **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 performs shallow merging, which led to lodash's _.merge() becoming one of the most downloaded npm functions, with over 40 million weekly downloads. - The difference between deep merge and shallow merge has caused countless production bugs — Kubernetes kubectl apply uses a strategic three-way merge to handle this complexity. *Tags:* json, merge, deep, combine --- ### [JSON ↔ JSON5](https://devtools.surf/tools/json5-converter/) Convert between strict JSON and relaxed JSON5 format **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 formats - Code reviewers verifying JSON5 configs produce valid JSON output **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 **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 excluded comments from JSON because he saw them being used for parsing directives, which he considered an abuse of the format. - JSON5 is a strict subset of ECMAScript 5.1 — every valid JSON5 document is also valid JavaScript, which is not true for standard JSON due to Unicode edge cases. *Tags:* json, json5, convert, relaxed --- ### [NDJSON / JSONL Viewer](https://devtools.surf/tools/ndjson-viewer/) Parse and display newline-delimited JSON line by line **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 - DevOps engineers parsing structured container log output **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 **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 processes files line by line, enabling streaming of multi-gigabyte datasets that would crash parsers trying to load a single JSON array into memory. - BigQuery, AWS Athena, and Snowflake all natively support NDJSON/JSONL as an import format, making it the de facto standard for data lake ingestion. *Tags:* ndjson, jsonl, newline, viewer --- ### [JSON Path Finder](https://devtools.surf/tools/json-path-finder/) Enter JSON and a value to get every JSONPath that matches **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 field values - Locating configuration values in deeply nested JSON config files **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 **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 2024, finally standardized JSONPath as an IETF specification after 17 years of informal use. - The root element in JSONPath is denoted by '$', borrowing the convention from XPath's '/' root selector but adapted for JSON's object model. *Tags:* json, jsonpath, search --- ### [Smart JSON Diff](https://devtools.surf/tools/diff-two-json/) Structural diff between two JSON docs with summary stats **Use cases:** - Comparing staging and production API responses to spot differences - Reviewing configuration changes between deployment versions - Debugging unexpected data changes in webhook payloads - Validating database migration outputs by diffing before and after snapshots **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 **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 programming was published by Eugene Myers in 1986 in the paper 'An O(ND) Difference Algorithm and Its Variations.' - JSON has only 6 data types (string, number, object, array, boolean, null), yet it became the dominant data interchange format, surpassing XML by 2013 in API usage. *Tags:* json, diff --- ### [JSON Escape String](https://devtools.surf/tools/json-escape-string/) Escape any text as a JSON-safe string with \n \t \uXXXX handling **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 \uXXXX for maximum safety **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 from its use inside would break HTML parsing. - The U+2028 (line separator) and U+2029 (paragraph separator) characters are valid in JSON strings but invalid in JavaScript — a mismatch that wasn't fixed until ES2019. *Tags:* json, escape, string --- ### [JSON Unescape String](https://devtools.surf/tools/json-unescape-string/) Reverse JSON escape sequences back to raw text **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 string fields before loading into databases - QA testers verifying that API responses contain correctly escaped content **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 strings from API responses **Fun facts:** - JSON requires only 4 characters to be escaped in strings: backslash, double quote, and control characters U+0000 through U+001F. Forward slash escaping is optional. - The \uXXXX escape sequence in JSON uses UTF-16 encoding — characters outside the Basic Multilingual Plane (like emojis) need surrogate pairs: two \uXXXX sequences. - Douglas Crockford discovered JSON in 2001 by observing that JavaScript object literal syntax could serve as a data interchange format — he 'found' it rather than invented it. *Tags:* json, unescape, string --- ### [JMESPath Tester](https://devtools.surf/tools/jmespath-tester/) Query JSON with JMESPath expressions + live result + examples **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 **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 Python, Go, JavaScript, Java, PHP, Ruby, Lua, and Rust. - Unlike JSONPath, JMESPath has a formal ABNF grammar specification, making it one of the few JSON query languages with deterministic behavior across implementations. *Tags:* json, jmespath, query --- ## HTML ### [HTML Formatter](https://devtools.surf/tools/html-formatter/) Format and indent HTML code **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 structure through readable output **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 **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 development. - The longest-running HTML specification debate was over the tag's alt attribute requirements, spanning nearly a decade. *Tags:* format, html, indent --- ### [HTML Pretty Print](https://devtools.surf/tools/html-pretty-print/) Pretty print HTML with color-coded output **Use cases:** - Developers presenting HTML snippets in documentation - Code reviewers reading formatted HTML pull requests - Technical writers embedding syntax-highlighted HTML in tutorials - Frontend mentors demonstrating HTML structure to students **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 **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 any W3C specification and was deprecated in 2013. - Modern browsers can parse and render a simple HTML page in under 50 milliseconds on average hardware. *Tags:* pretty, print, html --- ### [HTML Validator](https://devtools.surf/tools/html-validator/) Validate HTML markup and structure **Use cases:** - Frontend devs ensuring cross-browser compatibility - SEO specialists fixing markup errors that hurt rankings - Accessibility engineers validating semantic HTML structure - QA teams running automated HTML checks in CI pipelines **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 regressions **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

  • tags as valid markup. - A 2023 HTTP Archive study found that the average web page contains 25 HTML validation errors. *Tags:* validate, html, lint --- ### [HTML Viewer](https://devtools.surf/tools/html-viewer/) Preview and inspect HTML in real-time **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 experimenting with HTML and seeing live results **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 **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 images inline with text, revolutionizing HTML rendering. - Modern browser rendering engines like Blink process over 1,000 CSS properties per element during layout. *Tags:* view, preview, html --- ### [HTML Minify](https://devtools.surf/tools/html-minify/) Minify HTML by removing whitespace and comments **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 - Mobile developers minimizing HTML for bandwidth-constrained users **Tips:** - Always keep a formatted backup before minifying - Check that inline scripts survive minification intact - Compare file sizes before and after to measure savings **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 gzip compression can achieve 70-80% reduction. - The first HTML minification tools appeared around 2004, driven by the growing importance of page load performance. *Tags:* minify, compress, html --- ### [HTML → Plain Text](https://devtools.surf/tools/html-to-text/) Strip tags, decode entities, preserve paragraph breaks **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 search indexing - Data engineers cleaning scraped HTML for NLP and text analysis pipelines **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 from email HTML templates **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 HTML since Tim Berners-Lee's original 1991 specification — it is one of only 18 tags in the very first version of HTML. - Plain text extraction from HTML is a deceptively hard problem — libraries like Mozilla's Readability (used in Firefox Reader View) use heuristics to handle edge cases. *Tags:* html, text, strip --- ## XML ### [XML Formatter](https://devtools.surf/tools/xml-formatter/) Format and prettify XML documents **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 analysts inspecting XML data exports from legacy systems **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 **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 led by Jon Bosak of Sun Microsystems. - XML namespaces, introduced in 1999, solved element naming conflicts but remain one of XML's most confusing features. *Tags:* format, xml, prettify --- ### [XML Minify](https://devtools.surf/tools/xml-minify/) Minify XML by removing whitespace **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 deployment packages - API developers minimizing XML payloads for bandwidth-limited clients **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 **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 partly drove JSON's popularity after 2005. - The Android build system processes thousands of XML layout files, where minification measurably speeds up APK builds. *Tags:* minify, compress, xml --- ### [XML Viewer](https://devtools.surf/tools/xml-viewer/) View XML in a structured tree format **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 - Technical writers reviewing XML-based documentation formats like DITA **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 **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 in November 1999 alongside XSLT 1.0. - XML's tree structure directly inspired the Document Object Model (DOM), first standardized by the W3C in 1998. *Tags:* view, tree, xml --- ### [XML Pretty Print](https://devtools.surf/tools/xml-pretty-print/) Pretty print XML with syntax highlighting **Use cases:** - Developers presenting XML configs in technical documentation - Architects reviewing XML schema definitions during design reviews - Support engineers sharing readable XML logs with customers - Trainers creating syntax-highlighted XML examples for workshops **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 elements in code reviews **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, attributes, values, comments, and processing instructions. - Pretty-printed XML can be 3-5x larger than its minified form due to added whitespace and line breaks. *Tags:* pretty, print, xml --- ### [XML Validator](https://devtools.surf/tools/xml-validator/) Validate XML syntax and well-formedness **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 agreed-upon schemas - DevOps engineers validating XML deployment descriptors before releases **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 early **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 element, a rule that trips up many beginners. - RELAX NG, an alternative to XSD, was designed by James Clark and Murata Makoto and became an ISO standard in 2003. *Tags:* validate, xml, lint --- ### [XML Editor](https://devtools.surf/tools/xml-editor/) Edit XML with real-time validation and highlighting **Use cases:** - Developers editing Spring or Hibernate XML configuration files - Technical writers maintaining XML-based documentation projects - Integration engineers crafting SOAP request payloads by hand - Configuration managers editing application server XML descriptors **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 **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 editors with schema-aware auto-completion, launching around 2002. - Modern XML editors can validate documents against schemas at speeds exceeding 10,000 elements per second. *Tags:* edit, xml, editor --- ### [XML Parser](https://devtools.surf/tools/xml-parser/) Parse XML and extract structured data **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 testing frameworks - Mobile developers consuming XML-based RSS or Atom feeds **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 queries **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 memory, while SAX parsing uses constant memory regardless of document size. - The Expat XML parser library, written in C by James Clark in 1998, remains one of the fastest XML parsers available today. *Tags:* parse, xml, extract --- ### [WSDL Formatter](https://devtools.surf/tools/wsdl-formatter/) Format WSDL (Web Services Description Language) files **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 contracts for API testing - Architects documenting web service interfaces for team reference **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 formatting **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 adoption as REST APIs had already gained popularity. - A single enterprise WSDL file can define hundreds of operations and exceed 10,000 lines, making formatting essential. *Tags:* wsdl, soap, format --- ### [SOAP Formatter](https://devtools.surf/tools/soap-formatter/) Format SOAP XML messages **Use cases:** - Integration engineers debugging SOAP request and response messages - Backend devs formatting SOAP payloads for logging and troubleshooting - QA engineers comparing expected vs actual SOAP message structures - Support engineers making SOAP error responses readable for analysis **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 elements quickly **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, Don Box, Bob Atkinson, and Mohsen Al-Ghosein at Microsoft in 1998. - Despite REST's dominance, SOAP remains widely used in banking and healthcare, where WS-Security provides enterprise-grade encryption. *Tags:* soap, xml, format --- ### [XML Schema (XSD) Validator](https://devtools.surf/tools/xml-schema-validator/) Validate XML against basic XSD schema rules **Use cases:** - Enterprise developers validating SOAP web service messages - Healthcare engineers verifying HL7/FHIR XML document compliance - Financial systems developers checking FpML transaction formats - Government contractors validating NIEM-conformant XML exchanges **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 errors **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 longest W3C specifications ever published, spanning three parts and over 400 pages — its complexity led to alternatives like RELAX NG by James Clark. - Despite JSON's dominance in APIs, XML Schema remains critical in industries like healthcare (HL7 FHIR), finance (FpML), and government (NIEM) where strict typing is required. *Tags:* xml, xsd, schema, validate --- ## YAML ### [YAML Validator](https://devtools.surf/tools/yaml-validator/) Validate YAML syntax and structure **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 file syntax - Platform engineers validating Helm chart values files **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 **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, created by Clark Evans, Ingy dot Net, and Oren Ben-Kiki. - The 'Norway problem' in YAML refers to how unquoted 'NO' is parsed as boolean false, which caused real bugs in country code lists. *Tags:* validate, yaml, lint --- ### [YAML Viewer](https://devtools.surf/tools/yaml-viewer/) View YAML in a structured tree format **Use cases:** - DevOps engineers exploring Kubernetes resource definitions visually - Backend devs inspecting application configuration hierarchies - SREs reviewing Prometheus or Alertmanager YAML rule files - Data engineers viewing structured YAML data pipeline configs **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 override patterns **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 data, a feature many developers don't know exists. - A single Kubernetes cluster can contain thousands of YAML manifests totaling hundreds of thousands of lines. *Tags:* view, tree, yaml --- ### [YAML Formatter](https://devtools.surf/tools/yaml-formatter/) Format and prettify YAML documents **Use cases:** - DevOps engineers standardizing YAML formatting across team repos - Developers cleaning up messy Ansible playbook files - Platform engineers formatting Terraform YAML variable files - Technical writers creating readable YAML examples for documentation **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 formatted output **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 complex data serialization format specs. - YAML's indentation-based syntax was inspired by Python, reflecting the early 2000s trend toward whitespace-significant languages. *Tags:* format, yaml, prettify --- ### [YAML Parser](https://devtools.surf/tools/yaml-parser/) Parse YAML and extract structured data **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 internal structures - Automation engineers reading YAML-based test fixture definitions **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 like booleans **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, single-quoted, double-quoted, literal block, folded block, and 4 flow variants. - The PyYAML library, one of the most popular YAML parsers, was first released in 2006 and has been downloaded over 1 billion times. *Tags:* parse, yaml, extract --- ### [YAML Multi-Doc Splitter](https://devtools.surf/tools/yaml-multi-doc-splitter/) Split a multi-document YAML file into separate documents **Use cases:** - Kubernetes engineers splitting Helm chart output into files - DevOps teams isolating resources from multi-doc manifests - CI pipelines processing individual YAML documents separately - Platform engineers extracting specific resources from bundles **Tips:** - Split Kubernetes manifests into individual resource files - Verify document boundaries with the --- separator count - Export individual documents for targeted kubectl apply **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 is the largest consumer of multi-document YAML files — a typical Helm chart can contain 10-30 documents in a single rendered output. - YAML also supports a document end marker '...' which is rarely used but technically required to signal the end of a document before directives in the next. *Tags:* yaml, split, multi-doc, document --- ### [YAML Anchor Expander](https://devtools.surf/tools/yaml-anchor-expander/) Expand YAML anchors and aliases into plain YAML **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 files - Developers understanding inherited properties in anchored configs **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 **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 not actually part of the core YAML spec — it's defined in a separate type repository and some parsers don't support it, causing subtle cross-platform bugs. - Docker Compose's x- extension fields combined with YAML anchors became the standard pattern for DRY service definitions, reducing duplication in multi-service configurations. *Tags:* yaml, anchor, alias, expand --- ## CSS ### [Minify CSS](https://devtools.surf/tools/css-minify/) Minify CSS by removing whitespace and comments **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 pipelines - Mobile web developers minimizing stylesheets for 3G network users **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 minification bugs **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 major sites like Facebook save megabytes of bandwidth daily through it. - CSSNano, one of the most popular CSS minifiers, can perform over 30 different optimization transformations on a single file. *Tags:* minify, compress, css --- ### [CSS Beautifier](https://devtools.surf/tools/css-beautifier/) Beautify and format CSS code **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 for modern standards - Code reviewers reading beautified CSS to spot redundant rules **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 rules **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 through the CSS Working Group's modular specification process. - The CSS Zen Garden, launched in 2003 by Dave Shea, demonstrated CSS's power by styling one HTML page in hundreds of ways. *Tags:* beautify, format, css --- ### [CSS Formatter](https://devtools.surf/tools/css-formatter/) Format CSS with proper indentation **Use cases:** - Frontend teams enforcing consistent CSS formatting across projects - Developers formatting CSS before committing to version control - Designers converting inline styles to properly formatted stylesheets - Students learning CSS structure through well-indented examples **Tips:** - Choose between single-line and multi-line rule formatting - Ensure consistent spacing around colons and semicolons - Format vendor-prefixed properties with proper alignment **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 specificity, including the !important override. - Flexbox went through 3 major syntax revisions (2009, 2011, 2012) before reaching its current stable specification. *Tags:* format, css, indent --- ### [CSS Pretty Print](https://devtools.surf/tools/css-pretty-print/) Pretty print CSS with color coding **Use cases:** - Developers presenting CSS architecture in team meetings - Technical writers creating color-coded CSS examples for docs - Frontend mentors demonstrating selector specificity visually - Bloggers embedding syntax-highlighted CSS in tutorial posts **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 reviews **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 2016 when all major browsers adopted them. - A single CSS selector can theoretically have infinite specificity through repeated class chaining like .a.a.a.a. *Tags:* pretty, print, css --- ### [CSS to LESS](https://devtools.surf/tools/css-to-less/) Convert CSS to LESS preprocessor syntax **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 better organization - Legacy project maintainers introducing preprocessor features incrementally **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 patterns **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 properties were specified, using the @ prefix syntax. - Bootstrap 3 used LESS as its preprocessor before switching to SASS in Bootstrap 4, released in 2018. *Tags:* convert, css, less --- ### [CSS to SCSS](https://devtools.surf/tools/css-to-scss/) Convert CSS to SCSS preprocessor syntax **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 SCSS variables - Full-stack devs adopting SCSS in a Rails or Angular project **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 extraction **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 approximately 77% of developers who use preprocessors according to the State of CSS 2023 survey. - The SCSS syntax was specifically designed so that every valid CSS file is also a valid SCSS file, easing migration. *Tags:* convert, css, scss --- ### [CSS to SASS](https://devtools.surf/tools/css-to-sass/) Convert CSS to SASS syntax **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 style - Frontend devs migrating from verbose CSS to concise SASS syntax **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 **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 indentation-based language created by Hampton Catlin. - Sass was initially implemented in Ruby, then ported to C/C++ (LibSass) in 2012, and finally to Dart (Dart Sass) in 2016. *Tags:* convert, css, sass --- ### [CSS to Stylus](https://devtools.surf/tools/css-to-stylus/) Convert CSS to Stylus syntax **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 - Frontend devs preferring Python-like indentation-based styling **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 mixin syntax **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, semicolons, braces, and even the comma in selectors. - Stylus has a unique 'transparent mixin' feature where regular properties can be overridden to act as mixins automatically. *Tags:* convert, css, stylus --- ### [Stylus to CSS](https://devtools.surf/tools/stylus-to-css/) Convert Stylus to standard 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 dependencies from pipelines - Frontend devs converting Stylus components to CSS modules **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 output **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 functions like lighten(), darken(), and saturate(). - The Stylus project was maintained by the Node.js community after TJ Holowaychuk stepped back from open source around 2014. *Tags:* convert, stylus, css --- ### [Stylus to LESS](https://devtools.surf/tools/stylus-to-less/) Convert Stylus to LESS syntax **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 preprocessor syntaxes into one - Frontend teams standardizing on LESS for consistency across repos **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 **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 syntax transformation during conversion. - Both LESS and Stylus support lazy evaluation of variables, unlike SCSS which uses imperative variable scoping. *Tags:* convert, stylus, less --- ### [Stylus to SCSS](https://devtools.surf/tools/stylus-to-scss/) Convert Stylus to SCSS syntax **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 popular frameworks like Bourbon or Susy - Frontend teams standardizing on SCSS as the industry-standard preprocessor **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() calls **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, requiring manual restructuring during conversion. - The Compass framework for Sass/SCSS provided hundreds of ready-made mixins, something Stylus's ecosystem never fully matched. *Tags:* convert, stylus, scss --- ### [Stylus to SASS](https://devtools.surf/tools/stylus-to-sass/) Convert Stylus to SASS syntax **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 Sass for Dart Sass compatibility - Projects switching to Sass for its more established community support **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 #{} syntax **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), predating Stylus (2010) by four years. - Despite syntactic similarities, Sass uses = for mixins and + for includes, while Stylus uses transparent function calls. *Tags:* convert, stylus, sass --- ### [LESS to CSS](https://devtools.surf/tools/less-to-css/) Convert LESS to standard 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 properties from LESS variables - DevOps engineers simplifying build pipelines by eliminating preprocessors **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 conditional 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 preprocessor of choice for millions of projects. - LESS's JavaScript implementation can compile a 10,000-line stylesheet in under 100 milliseconds on modern hardware. *Tags:* convert, less, css --- ### [LESS to SCSS](https://devtools.surf/tools/less-to-scss/) Convert LESS to SCSS syntax **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 larger ecosystem of tools - Frontend teams switching from LESS to SCSS for native @use module support **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 SCSS @extend **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 for at-rules like @media and @import. - Both LESS and SCSS compile to identical CSS output, so migration is purely a developer experience change. *Tags:* convert, less, scss --- ### [LESS to SASS](https://devtools.surf/tools/less-to-sass/) Convert LESS to SASS syntax **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 math module - Developers wanting minimal syntax after using LESS's verbose style **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 #{} syntax **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 philosophy of minimal, whitespace-significant code. - LESS's JavaScript functions have no direct Sass equivalent, requiring a Dart Sass plugin or manual rewrite. *Tags:* convert, less, sass --- ### [LESS to Stylus](https://devtools.surf/tools/less-to-stylus/) Convert LESS to Stylus syntax **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 powerful built-in function library - Teams consolidating preprocessors in a Stylus-based codebase **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 approach **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 direct Stylus equivalent and require restructuring. - Both LESS and Stylus were created within a year of each other (2009-2010) during the CSS preprocessor boom. *Tags:* convert, less, stylus --- ### [SCSS to CSS](https://devtools.surf/tools/scss-to-css/) Convert SCSS to standard 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 migrating away from SCSS to modern CSS with native nesting **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 rules **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 global @import to avoid namespace pollution. - A large SCSS codebase like Bootstrap 5 compiles to over 10,000 lines of CSS from approximately 4,000 lines of SCSS. *Tags:* convert, scss, css --- ### [SCSS to LESS](https://devtools.surf/tools/scss-to-less/) Convert SCSS to LESS syntax **Use cases:** - Teams migrating to LESS for projects requiring client-side compilation - Developers contributing to LESS-based open source projects - Projects downgrading preprocessor complexity from SCSS to LESS - Frontend teams aligning with a LESS-based component library **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 alternatives **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 cause subtle styling differences. - Despite SCSS's popularity, LESS still powers many enterprise projects due to its simpler learning curve. *Tags:* convert, scss, less --- ### [SCSS to SASS](https://devtools.surf/tools/scss-to-sass/) Convert SCSS to SASS syntax **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 to a project's Sass standard - Teams migrating to indented Sass for reduced visual clutter **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 levels **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 syntaxes support identical features and compile to the same CSS output. - The sass-convert tool, bundled with Dart Sass, can automatically convert between SCSS and indented Sass syntax. *Tags:* convert, scss, sass --- ### [SCSS to Stylus](https://devtools.surf/tools/scss-to-stylus/) Convert SCSS to Stylus syntax **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 built-in function library - Frontend devs switching to Stylus for more flexible syntax options **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 concat **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 Stylus's {block} placeholder syntax. - Stylus's postfix conditionals (color red if dark) offer syntactic sugar that SCSS cannot express in a single line. *Tags:* convert, scss, stylus --- ### [SASS to CSS](https://devtools.surf/tools/sass-to-css/) Convert SASS to standard 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 static site deployments - Designers compiling Sass prototypes into standalone CSS files **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 via @extend **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 browser feature in 2023. - The indented Sass syntax has fewer characters per line than SCSS, averaging 30% fewer keystrokes for equivalent code. *Tags:* convert, sass, css --- ### [SASS to LESS](https://devtools.surf/tools/sass-to-less/) Convert SASS to LESS syntax **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 LESS for browser-based compilation needs - Frontend teams aligning with LESS for Bootstrap 3 compatibility **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 **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 processes line by line, affecting variable scoping. - Both Sass and LESS were inspired by the desire to add programming-like features to CSS, but took fundamentally different approaches. *Tags:* convert, sass, less --- ### [SASS to SCSS](https://devtools.surf/tools/sass-to-scss/) Convert SASS to SCSS syntax **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 as the community standard - New team members converting unfamiliar Sass to SCSS for readability **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 **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 most modern Sass documentation uses SCSS examples exclusively. - Converting from indented Sass to SCSS is fully lossless; no features or behaviors change during the transformation. *Tags:* convert, sass, scss --- ### [SASS to Stylus](https://devtools.surf/tools/sass-to-stylus/) Convert SASS to Stylus syntax **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 for Express.js middleware support - Projects consolidating on Stylus for a unified Node.js toolchain **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 Stylus equivalents **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 added features like postfix conditionals that Sass lacks. - Both Sass and Stylus support operator overloading for color and unit arithmetic, unlike LESS. *Tags:* convert, sass, stylus --- ### [CSS Grid Generator](https://devtools.surf/tools/css-grid-generator/) Generate grid-template CSS with custom cols, rows, and gap **Tips:** - Use fr units for proportional columns: 1fr 2fr 1fr - Set both gap and row/col gaps independently - grid-template-rows: repeat(3, auto) for repeating row sizes **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 to reach full browser support (2023) — it allows nested grids to align with their parent's tracks. - CSS Grid was championed by Jen Simmons and Rachel Andrew, whose years of advocacy and demos were instrumental in convincing browser vendors to prioritize implementation. *Tags:* css, grid, layout --- ### [CSS Border Builder](https://devtools.surf/tools/css-border-builder/) Build border CSS — width, style, color, radius, per-side control **Use cases:** - Frontend developers quickly generating border CSS with visual feedback - Designers prototyping card and container styles without writing code - CSS learners experimenting with border properties interactively - UI engineers building consistent border tokens for design systems **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 width, style, and color **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 border shorthand property can combine width, style, and color in one declaration, but border-radius must always be declared separately — a quirk from the CSS2 spec. - Before CSS3, creating a 1px border that looked consistent across browsers was notoriously difficult — IE6's box model included borders in the element's width calculation. *Tags:* css, border, style --- ### [CSS Text Shadow](https://devtools.surf/tools/css-text-shadow/) Build text-shadow with x, y, blur, color — includes neon/retro presets **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 80s-style text glow effects - UI designers prototyping embossed or letterpress text styles visually **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 softness from sharp to diffused **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. - The famous 'letterpress' text effect — a subtle 1px white shadow below dark text — was one of the most popular CSS text-shadow techniques in the Web 2.0 era (2005-2010). - Multiple text-shadow values are rendered in back-to-front order, meaning the first shadow in your comma-separated list appears on top of all subsequent shadows. *Tags:* css, text-shadow, typography --- ### [CSS Filter Builder](https://devtools.surf/tools/css-filter-builder/) Chain blur, brightness, contrast, hue-rotate, saturate, sepia **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 that shift image color and contrast - Photographers previewing CSS filter combinations for web gallery displays **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 quick vintage photo effect in pure CSS **Fun facts:** - CSS filters were inspired by SVG filter primitives — the CSS filter shorthand functions (blur, brightness, etc.) are actually convenience wrappers around SVG filter operations. - The backdrop-filter property, a sibling of filter, enables frosted-glass effects but wasn't supported in Firefox until version 103 (July 2022), over 6 years after Chrome. - CSS filters are GPU-accelerated in most browsers, meaning applying blur() or brightness() triggers hardware compositing — but stacking too many filters can cause frame drops on mobile. *Tags:* css, filter, image --- ### [CSS Transform Builder](https://devtools.surf/tools/css-transform-builder/) Build transform() — translate, rotate, scale, skew, 3D rotations **Use cases:** - Frontend developers building hover animations with visual transform previews - CSS animation engineers composing multi-step transform sequences - UI designers prototyping card flip and rotation effects interactively - Web developers generating transform CSS for page transition animations **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 create parallelogram shapes for decorative elements **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 property defaults to the center of the element (50% 50%), but changing it to a corner produces dramatically different rotation and scale effects. - CSS 3D transforms with perspective were first demonstrated by WebKit in 2009, enabling the iconic 'cover flow' effect that Apple popularized in iTunes and iOS. *Tags:* css, transform, animation --- ### [CSS Glassmorphism](https://devtools.surf/tools/css-glassmorphism/) Generate frosted-glass UI — backdrop-filter blur + transparent bg **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 **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 Safari was the only browser to support it for 5 years — Chrome didn't ship it until 2019. - Glassmorphism requires compositing the background through a blur kernel, which can drop mobile frame rates by 30-50% if overused on low-end devices. *Tags:* css, glassmorphism, backdrop --- ### [CSS Neumorphism](https://devtools.surf/tools/css-neumorphism/) Soft-UI box-shadow combinations — raised, inset, and flat modes **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 **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 provide insufficient contrast for users with low vision, which is why it rarely appears in production apps. - Neumorphism is essentially a revival of skeuomorphism (mimicking real-world materials) but using only light and shadow instead of textures and gradients. *Tags:* css, neumorphism, soft-ui --- ### [CSS Button Styles](https://devtools.surf/tools/css-button-styles/) Modern button CSS — lift hover, shadow, colors, radius, padding **Use cases:** - Frontend developers generating production-ready button CSS quickly - Designers prototyping button styles with real-time visual preview - Design system engineers creating standardized button component tokens - CSS learners exploring how different properties affect button appearance **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 each property value **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. - Material Design's 'ripple effect' button, introduced in 2014, uses a radial gradient pseudo-element animation — it became one of the most replicated CSS button patterns. - A/B testing studies consistently show that button color affects click-through rates by 10-20%, with red and orange buttons outperforming blue and green in most e-commerce contexts. *Tags:* css, button, ui --- ### [CSS Tooltip Builder](https://devtools.surf/tools/css-tooltip-builder/) Pure-CSS tooltip from data-attr — top/bottom/left/right positions **Use cases:** - Frontend developers building accessible tooltips without JavaScript - UI designers prototyping tooltip styles and positions visually - Documentation teams adding contextual help text to complex form fields - Accessibility engineers creating keyboard-focusable tooltip patterns **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 color for brand consistency **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 'tooltip' originated from Microsoft's early 1990s UI guidelines, describing small text labels that appeared when hovering over toolbar icons in Windows 3.1. - Studies show tooltips improve task completion rates by 15-25% in complex interfaces, but tooltips that appear in less than 200ms are perceived as 'jumpy' and distracting. *Tags:* css, tooltip, hover --- ### [CSS Card Builder](https://devtools.surf/tools/css-card-builder/) Elevated card with hover-lift + shadow — fully customizable **Use cases:** - Frontend developers building card components with hover animations - Designers prototyping elevated card layouts for dashboards - Design system engineers defining card elevation tokens and styles - Web developers generating reusable card CSS for content-heavy pages **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 match your design system's spacing scale **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. - Card-based layouts reduce cognitive load by 23% compared to list views, according to a 2016 Nielsen Norman Group study on content scanning patterns. - The CSS box-shadow property can accept unlimited comma-separated shadow layers, enabling designers to create realistic multi-layer elevation effects with a single property. *Tags:* css, card, ui --- ### [CSS Form Styler](https://devtools.surf/tools/css-form-styler/) Style inputs, textareas, selects — focus ring, accent color, radius **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 indicators meet WCAG 2.4.7 requirements - Full-stack developers generating consistent cross-browser form CSS **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 or pill-shaped input fields **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. - The CSS accent-color property, added to browsers in 2021, was the first standard way to theme native checkboxes, radios, and range inputs without JavaScript replacement. - A 2019 Baymard Institute study found that 18% of e-commerce checkout abandonments were caused by confusing form design — proper input styling directly impacts conversion rates. *Tags:* css, form, input --- ### [CSS Accordion Builder](https://devtools.surf/tools/css-accordion-builder/) Zero-JS accordion using

    / + CSS animation **Use cases:** - Frontend developers building FAQ sections without JavaScript dependencies - Content editors creating collapsible documentation sections - UI designers prototyping accordion styles for settings and preference panels - Accessibility engineers ensuring accordions work with screen readers natively **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 design system's icon set **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. - Before
    /, accordion UIs required JavaScript event listeners and DOM manipulation — jQuery UI's Accordion widget (2007) was the de facto solution for over a decade. - Animating the
    element's content height is still tricky in 2024 because content inside goes from display:none to block — CSS interpolate-size may finally solve this. *Tags:* css, accordion, details --- ### [CSS Tabs Builder](https://devtools.surf/tools/css-tabs-builder/) Accessible tab bar with aria-selected styling + bottom accent **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 components for design systems - Web developers generating accessible tabbed interfaces for documentation sites **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 spacing to fit your content width requirements **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. - WAI-ARIA's tabpanel pattern requires specific keyboard navigation: arrow keys to move between tabs, and Tab key to enter the panel content — most custom implementations get this wrong. - A 2018 NN/g study found that horizontal tabs outperform vertical tabs for navigation efficiency, but vertical tabs are 17% faster when there are more than 7 items. *Tags:* css, tabs, navigation --- ### [CSS Modal Builder](https://devtools.surf/tools/css-modal-builder/) Native modal with backdrop blur + entrance animation **Use cases:** - Frontend developers building accessible modals with native dialog element - Designers prototyping modal animations and backdrop effects visually - UI engineers replacing JavaScript modal libraries with native HTML solutions - Product teams creating confirmation dialogs with consistent brand styling **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 trapping and escape key handling **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 , developers used z-index stacking, fixed positioning, and focus-trap JavaScript — libraries like Bootstrap Modal and React Modal handled millions of daily modal opens. - Studies show that modal dialog boxes have a 40% higher engagement rate than inline content, but unsolicited modals (like newsletter popups) increase bounce rates by 30%. *Tags:* css, modal, dialog --- ### [CSS Checkbox Styler](https://devtools.surf/tools/css-checkbox-styler/) Custom checkbox with CSS-only checkmark — accent & size control **Use cases:** - Frontend developers replacing default browser checkboxes with branded styles - Designers creating custom checkbox designs for forms and settings - Accessibility engineers ensuring custom checkboxes maintain keyboard navigation - Mobile developers building touch-friendly checkbox targets with proper sizing **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 meet touch target size guidelines **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 checkmark symbol (✓) originates from the Roman letter 'V' for 'veritas' (truth) — it has been used as a mark of approval since at least the 17th century. - Apple's Human Interface Guidelines recommend a minimum 44x44 pixel touch target for checkboxes on mobile — most default browser checkboxes are only 13x13 pixels. *Tags:* css, checkbox, form --- ### [CSS Switch / Toggle](https://devtools.surf/tools/css-switch-toggle/) iOS-style toggle switch — slider moves on :checked **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 switches meet touch target guidelines - Design system engineers defining toggle component tokens and variants **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 requirements **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-only toggle switches work by hiding the native checkbox with opacity: 0 and styling a label's ::before and ::after pseudo-elements as the track and knob. - A 2015 NN/g study found that toggle switches should only be used for settings that take immediate effect — using them for deferred-save settings confuses 32% of users. *Tags:* css, switch, toggle --- ### [CSS Progress Bar](https://devtools.surf/tools/css-progress-bar/) Gradient progress bar with animated shimmer — accessible **Use cases:** - Frontend developers building accessible progress indicators for uploads - Designers prototyping loading states with animated shimmer effects - Dashboard builders creating visual progress tracking for multi-step workflows - UI engineers defining progress bar component styles for design systems **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 attributes for screen reader accessibility **Fun facts:** - Progress bars were first used in computing by Mitchell Model in his 1979 Ph.D. thesis, but they became mainstream with early Macintosh file copy dialogs in 1984. - Studies show that progress bars with animated shimmer effects are perceived as 16% faster than static bars showing the same progress, even when actual time is identical. - Brad Myers' 1985 paper 'The Importance of Percent-Done Progress Indicators' was the first academic study proving that progress feedback reduces perceived wait time by up to 40%. *Tags:* css, progress, bar --- ### [CSS Ribbon Builder](https://devtools.surf/tools/css-ribbon-builder/) Corner ribbon label using clip-path — content via data-ribbon attr **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 with 'Pro' or 'Beta' ribbons - Frontend developers generating clip-path ribbon CSS without manual math **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 a simple class name change **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 images. - Corner ribbons were originally created using rotated absolutely-positioned elements with overflow hidden — the clip-path approach reduces the required CSS from ~40 lines to ~10. - The ribbon UI pattern originated from physical retail 'corner fold' stickers on product packaging — it was one of the first skeuomorphic patterns adopted in web design around 2008. *Tags:* css, ribbon, badge --- ### [CSS Avatar Builder](https://devtools.surf/tools/css-avatar-builder/) Circular/square avatar with initials, ring, image fallback **Use cases:** - Frontend developers building user profile avatar components with fallbacks - Designers prototyping avatar styles for comment sections and user lists - Chat application developers creating presence-indicating avatar rings - Design system engineers defining avatar size and shape variant tokens **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 rounded-square shapes to match your design **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 Recognized Avatar), launched in 2004, generates default avatars from email hashes — it serves over 100 billion avatar requests per year as of 2023. - The standard avatar size in most design systems is 40px for inline mentions, 48px for list items, and 80-120px for profile headers — a convention established by early social networks. *Tags:* css, avatar, profile --- ### [CSS Flip Card](https://devtools.surf/tools/css-flip-card/) 3D hover-flip card using perspective + backface-visibility **Use cases:** - Frontend developers creating interactive product cards with flip reveals - E-learning designers building flashcard study interfaces - Portfolio developers showcasing project details on card back faces - UI designers prototyping 3D card interactions for image galleries **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 the back face from showing through **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 backface-visibility property has only two values (visible and hidden) and was specifically designed for 3D card-flip scenarios — it has almost no other practical use case. - Flash-based card flip animations were a staple of early 2000s web design — when Steve Jobs refused to support Flash on iPhone in 2010, CSS 3D transforms became the only path forward. *Tags:* css, flip, 3d --- ### [CSS Dropdown Builder](https://devtools.surf/tools/css-dropdown-builder/) Hover + focus-within dropdown — zero JS, animated **Use cases:** - Frontend developers building navigation dropdowns without JavaScript - Designers prototyping hover menu styles and animations visually - Accessibility engineers creating keyboard-navigable dropdown patterns - Web developers generating lightweight dropdown CSS for simple sites **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 entirely CSS-driven **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 users. - Dropdown menus in web design originated from desktop OS menu bars — the first web implementations in the late 1990s used nested
      lists styled with CSS, a pattern still used today. - Suckerfish Dropdowns, published by Patrick Griffiths and Dan Webb in A List Apart (2003), was the first widely adopted pure CSS dropdown technique and influenced a generation of menus. *Tags:* css, dropdown, menu --- ### [CSS Breadcrumb Builder](https://devtools.surf/tools/css-breadcrumb-builder/) Navigation breadcrumb with custom separator — /, >, arrow **Use cases:** - Frontend developers generating breadcrumb navigation CSS for content sites - E-commerce developers building category path breadcrumbs for product pages - Documentation site builders creating section-level navigation indicators - SEO engineers implementing breadcrumb structured data with matching styles **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 automatically styled as the current page **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 2007 usability study found that breadcrumbs are used by less than 10% of website visitors, yet removing them increased user confusion by 35% in deep site hierarchies. - Google began showing breadcrumb trails in search results in 2009, replacing long URLs with structured navigation paths — making breadcrumb markup an SEO best practice. *Tags:* css, breadcrumb, navigation --- ### [CSS Arrow Generator](https://devtools.surf/tools/css-arrow-generator/) Pure-CSS arrow (up/down/left/right) using rotated borders **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 popup elements - Developers generating lightweight arrow icons for accordion toggles **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 size and appearance **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 arrows are actually rotated squares where two adjacent borders are visible and two are transparent, creating the illusion of a pointed chevron. - Before CSS transforms, developers created arrows using the same transparent-border trick used for CSS triangles — rotating a bordered element was a later, cleaner approach. *Tags:* css, arrow, icon --- ### [CSS Triangle Generator](https://devtools.surf/tools/css-triangle-generator/) Zero-element triangle using transparent borders — any direction **Use cases:** - Frontend developers creating dropdown arrow indicators without images - UI designers adding decorative triangular accents to section dividers - Tooltip builders generating CSS-only pointer triangles for popups - Web developers replacing image-based arrow icons with pure CSS shapes **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 as tooltip pointers or decorative shape accents **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 triangles. - This triangle trick was first documented by Chris Coyier on CSS-Tricks in 2009 and became one of the most-referenced CSS techniques in web development history. - Modern CSS offers clip-path: polygon() as an alternative to border triangles, but the border trick remains more widely used because it has 100% browser support dating back to IE6. *Tags:* css, triangle, shape --- ### [CSS Divider Builder](https://devtools.surf/tools/css-divider-builder/) Horizontal rule — solid/dashed/dotted or labeled (OR, AND, etc) **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 divider component styles for design systems - Web developers replacing default HR styling with branded separators **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 design system tokens **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 dividers (like 'OR' between login options) became a widespread pattern after OAuth social login buttons gained popularity around 2010-2012. - The CSS border-style property supports 10 values including groove, ridge, inset, and outset — all remnants of the 3D-beveled UI aesthetic popular in the Windows 95 era. *Tags:* css, divider, hr --- ## JavaScript ### [JS Beautifier](https://devtools.surf/tools/js-beautifier/) Beautify and format JavaScript code **Use cases:** - Frontend devs reformatting minified third-party library code for debugging - Code reviewers standardizing JavaScript formatting before reviewing PRs - Legacy codebase maintainers cleaning up inconsistently formatted JS files - Students learning JavaScript by reading well-formatted code examples **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 **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, launched around 2007 and popularized browser-based code formatting. - Prettier, the opinionated code formatter, was released by James Long in 2017 and now formats over 20 languages beyond JavaScript. *Tags:* beautify, format, js --- ### [Javascript Pretty Print](https://devtools.surf/tools/js-pretty-print/) Pretty print JavaScript with syntax highlighting **Use cases:** - Developers sharing syntax-highlighted JS snippets in presentations - Technical bloggers embedding pretty-printed JavaScript in articles - Mentors creating readable code walkthroughs for junior developers - Documentation authors including formatted JS examples in API guides **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 **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 edition of ECMAScript every year since 2015 (ES6). - V8, Chrome's JavaScript engine, can compile and execute JavaScript at speeds approaching native C++ for certain operations. *Tags:* pretty, print, js --- ## Converters ### [JSON to XML](https://devtools.surf/tools/json-to-xml/) Convert JSON data to XML format **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 datasets for XML-consuming ETL pipelines - Enterprise devs adapting JSON configs for XML-based application servers **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 output **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 content (text interleaved with elements) and attributes. - The XML specification is 33 pages long, while the JSON specification fits on a single printed page. *Tags:* convert, json, xml --- ### [JSON to CSV](https://devtools.surf/tools/json-to-csv/) Convert JSON array to CSV format **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 ML tools - Marketing teams converting JSON analytics exports for pivot tables **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 escaped **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 the closest thing to an official specification. - Excel can import CSV files with up to 1,048,576 rows and 16,384 columns, matching its worksheet limits. *Tags:* convert, json, csv --- ### [JSON to YAML](https://devtools.surf/tools/json-to-yaml/) Convert JSON to YAML format **Use cases:** - DevOps engineers converting JSON configs to YAML for Kubernetes manifests - Developers transforming JSON API schemas into YAML OpenAPI definitions - Platform engineers converting Terraform JSON outputs to YAML configs - SREs converting JSON monitoring configs to YAML for Prometheus **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 to correct YAML indentation **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 and YAML, but YAML is overwhelmingly preferred for readability. - YAML's flow style syntax (using braces and brackets) is identical to JSON syntax, making inline conversion trivial. *Tags:* convert, json, yaml --- ### [JSON to TSV](https://devtools.surf/tools/json-to-tsv/) Convert JSON array to Tab-Separated Values **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 tab-delimited files - Backend devs generating TSV exports for legacy data import systems **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 names **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 1993, making TSV one of the earliest registered text formats. - TSV files are directly pasteable into spreadsheet applications, as tabs naturally align with cell boundaries. *Tags:* convert, json, tsv --- ### [JSON to String](https://devtools.surf/tools/json-to-string/) Convert JSON to escaped string format **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 envelopes - Frontend devs preparing JSON data for HTML data attributes **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 **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 source of API bugs, creating strings like '{\"key\":\"value\"}'. - The maximum length of a JSON string is limited only by available memory, though most parsers cap at 2 GB. *Tags:* convert, json, string --- ### [XML to JSON](https://devtools.surf/tools/xml-to-json/) Convert XML to JSON format **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 services to JSON-based REST APIs - Data engineers converting XML data exports to JSON for modern pipelines **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 **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 converters typically prefix them with '@' or create nested objects. - The shift from XML to JSON APIs accelerated in 2006 when major services like Twitter and Flickr added JSON endpoints. *Tags:* convert, xml, json --- ### [XML to CSV](https://devtools.surf/tools/xml-to-csv/) Convert XML data to CSV format **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 exports for loading into relational databases - Researchers converting XML dataset dumps into CSV for statistical tools **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 column names **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 transform XML into flat formats like CSV. - The loss of hierarchy when converting XML to CSV is sometimes called 'impedance mismatch' in data engineering. *Tags:* convert, xml, csv --- ### [XML to String](https://devtools.surf/tools/xml-to-string/) Convert XML to escaped 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 parameters in scripts - API developers embedding XML in multipart request bodies **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 the escaped 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 raw text in . - XML strings can contain any Unicode character except the null character (U+0000), which is banned by the XML specification. *Tags:* convert, xml, string --- ### [XML to YAML](https://devtools.surf/tools/xml-to-yaml/) Convert XML to YAML format **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 build configs to YAML CI/CD pipelines - SREs converting XML monitoring configs to YAML for modern observability tools **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 depth **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 migrations, where legacy XML configs are replaced with YAML manifests. - YAML's lack of attribute syntax means XML attributes must be converted to regular key-value pairs during transformation. *Tags:* convert, xml, yaml --- ### [RSS to JSON](https://devtools.surf/tools/rss-to-json/) Convert RSS/Atom feed to JSON format **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 for JSON-based APIs - Data engineers ingesting RSS feeds into JSON-based data pipelines **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 feed versions **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, 2.0, and two 0.91 variants), leading to a format called 'Really Simple Syndication' or 'RDF Site Summary'. - Google Reader, the most popular RSS reader, was shut down on July 1, 2013, but RSS usage has seen a revival since 2020. *Tags:* convert, rss, json --- ### [YAML to JSON](https://devtools.surf/tools/yaml-to-json/) Convert YAML to JSON format **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 pipeline configs to JSON for debugging - Developers generating JSON Schema from YAML-defined data models **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 during JSON conversion **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 processing, since the API server only accepts JSON. - YAML supports 3 boolean representations (true/True/TRUE), all of which map to JSON's single 'true' value. *Tags:* convert, yaml, json --- ### [YAML to XML](https://devtools.surf/tools/yaml-to-xml/) Convert YAML to XML format **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 configs to XML for Java EE deployments - Data engineers bridging YAML-configured pipelines with XML-consuming systems **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 representations **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 converting to XML's XSD-validated world can require manual schema creation. - Both YAML and XML support Unicode, but XML requires explicit encoding declarations while YAML defaults to UTF-8. *Tags:* convert, yaml, xml --- ### [YAML to CSV](https://devtools.surf/tools/yaml-to-csv/) Convert YAML array to CSV format **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 feature flags into CSV for tracking - QA engineers converting YAML test configurations to CSV for test matrices **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 correctly **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 'false' in CSV output if not properly quoted. - YAML's support for multiple data types (dates, booleans, numbers) requires careful handling during CSV conversion. *Tags:* convert, yaml, csv --- ### [CSV to JSON](https://devtools.surf/tools/csv-to-json/) Convert CSV data to JSON format **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 spreadsheet exports for JavaScript apps - Data engineers converting CSV data lake exports to JSON for NoSQL databases **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 output **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 JavaScript CSV parser, can process a 1 GB CSV file in under 30 seconds in Node.js. - The lack of data types in CSV means converters must infer types, which can incorrectly parse zip codes like '07001' as number 7001. *Tags:* convert, csv, json --- ### [CSV to XML](https://devtools.surf/tools/csv-to-xml/) Convert CSV data to XML format **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 files to XML for legacy ETL pipelines - Business analysts preparing CSV data for XML-consuming reporting tools **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 **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 conversion always increases file size, typically by 2-4x due to opening and closing tags. - The first widely-used CSV-to-XML tools appeared in the early 2000s as enterprises migrated flat files to XML-based data interchange. *Tags:* convert, csv, xml --- ### [CSV to YAML](https://devtools.surf/tools/csv-to-yaml/) Convert CSV data to YAML format **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 datasets to YAML for readable test fixtures - Product teams converting CSV feature matrices to YAML configuration files **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 converted data **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 generating configuration files from spreadsheet-managed data. - CSV-to-YAML conversion tools must decide between generating a sequence of mappings or a mapping of sequences. *Tags:* convert, csv, yaml --- ### [CSV to HTML](https://devtools.surf/tools/csv-to-html/) Convert CSV data to HTML table **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 static site content from CSV data sources **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 **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 supported by IBM Fortran compilers in 1972. - RFC 4180, published in 2005, was the first formal specification of the CSV format despite decades of widespread use. *Tags:* convert, csv, html --- ### [String to JSON](https://devtools.surf/tools/string-to-json/) Parse stringified JSON back to formatted 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 serialized JSON stored in environment variables **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 **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 prevent misuse as a configuration format. - The JSON specification is one of the shortest standards documents at just 10 pages in its ECMA-404 form. *Tags:* convert, string, json --- ### [String to XML](https://devtools.surf/tools/string-to-xml/) Parse stringified XML back to formatted 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 formatted XML from CI/CD pipeline outputs **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 **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 IBM in the 1970s. - The XML specification requires that every document have exactly one root element, a rule inherited from SGML. *Tags:* convert, string, xml --- ### [BSON ↔ JSON](https://devtools.surf/tools/bson-to-json/) Convert between BSON hex and 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 encoding in custom MongoDB client implementations **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 **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 timestamp, 5 bytes for random value, and 3 bytes for an incrementing counter. - BSON documents have a maximum size of 16 megabytes in MongoDB, a limit chosen to prevent any single document from consuming excessive RAM. *Tags:* bson, json, mongodb --- ### [INI ↔ JSON](https://devtools.surf/tools/ini-to-json/) Convert between INI config files and JSON **Use cases:** - DevOps engineers converting legacy Windows configs to JSON - Python developers bridging configparser and JSON-based systems - System administrators automating config format migrations - Developers parsing php.ini or my.cnf into structured data **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 format **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 parses INI files, was part of the Python standard library since Python 1.5 released in 1998. - Git's configuration system (.gitconfig) uses an INI-like format, meaning every developer with Git installed interacts with INI-style files daily. *Tags:* ini, json, config, convert --- ### [HCL (Terraform) ↔ JSON](https://devtools.surf/tools/hcl-to-json/) Convert between HCL/Terraform config and JSON **Use cases:** - DevOps engineers generating Terraform configs programmatically - Platform teams validating infrastructure-as-code changes in CI - Cloud architects comparing Terraform modules across environments - Automation scripts that need to read and modify Terraform state **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 **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. - Terraform supports both HCL (.tf) and JSON (.tf.json) natively, making bidirectional conversion a built-in design feature of the language. - HCL2, released with Terraform 0.12 in 2019, added first-class expressions and for-each loops, making it a near-programming language rather than just a config format. *Tags:* hcl, terraform, json, convert --- ### [EDN ↔ JSON](https://devtools.surf/tools/edn-to-json/) Convert between Clojure EDN and JSON formats **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 architectures - API developers bridging EDN-based services with JSON consumers **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 **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. - Unlike JSON, EDN natively supports sets, keywords, symbols, and tagged elements — making it more expressive but also harder to map losslessly to JSON. - Datomic, the immutable database created by Rich Hickey, uses EDN as its native query and transaction format, making EDN-to-JSON conversion essential for integrating with non-Clojure systems. *Tags:* edn, clojure, json, convert --- ### [JSON → Go Struct](https://devtools.surf/tools/json-to-go-struct/) Convert JSON to Go struct definitions with json tags **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 responses for a new Go service - Creating strongly-typed request bodies for Go HTTP client code **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 **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"` — were inspired by Java annotations but are resolved at runtime via reflection. - The encoding/json package in Go's standard library was one of the first packages written, reflecting JSON's importance in modern APIs. *Tags:* json, go, struct, convert --- ### [YAML → .env](https://devtools.surf/tools/yaml-to-env/) Flatten a YAML file to KEY=value lines **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 variables - Extracting config values from Ansible playbooks into shell scripts **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 **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 file convention was popularized by the Twelve-Factor App methodology published by Heroku in 2011, which advocates storing config in environment variables. - Docker Compose introduced YAML-based service configuration in 2014, making YAML-to-env conversion a common DevOps task. *Tags:* yaml, env, convert --- ### [.env → YAML](https://devtools.surf/tools/env-to-yaml/) Group dotted KEY_NAME pairs back into a YAML tree **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 secrets - Converting legacy shell exports into structured application config **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 format **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 is that 'NO' and 'yes' are parsed as booleans, not strings, in YAML 1.1 — a source of countless bugs in CI configs. - YAML was designed to be a human-friendly data serialization format and is a strict superset of JSON, meaning every valid JSON file is also valid YAML. *Tags:* env, yaml, convert --- ### [JSON → Zod Schema](https://devtools.surf/tools/json-to-zod/) Derive a runtime-validatable Zod schema from a JSON sample **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 incoming webhook payloads - Scaffolding tRPC input schemas from example request bodies **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 **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. - Unlike JSON Schema, Zod schemas are executable TypeScript code that provides both compile-time types and runtime validation from a single source of truth. - The name 'Zod' is a reference to General Zod from Superman — its logo features a stylized 'Z' inspired by the character. *Tags:* json, zod, schema --- ### [JSON → .env](https://devtools.surf/tools/json-to-env/) Flatten a JSON object into UPPER_SNAKE KEY=value lines **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 secrets manager output into env var format - Backend developers migrating configuration from JSON files to environment variables **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 local development **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 Node.js, created by Scott Motte in 2013, has over 35 million weekly npm downloads — it's one of the most depended-on packages in the ecosystem. - Environment variables have been part of Unix since Version 7 (1979). The convention of UPPER_SNAKE_CASE for env vars comes from C preprocessor macro naming conventions. *Tags:* json, env, convert --- ### [.env → JSON](https://devtools.surf/tools/env-to-json/) Parse KEY=value lines (with quotes + comments) into a JSON object **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 importing .env variables into JSON-based configuration systems - Platform engineers converting environment configs for Terraform or Pulumi input **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 special characters correctly **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 adopted .env files in version 1.7 (2016), automatically loading variables from a .env file in the project root — standardizing the convention further. - The JSON specification (RFC 7159, by Douglas Crockford) requires all keys to be quoted strings — unlike JavaScript objects, which allow unquoted keys. *Tags:* env, json, convert --- ### [JSON → TypeScript Types](https://devtools.surf/tools/json-to-typescript-types/) Infer TypeScript interfaces from JSON with deep nesting + optionals **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 ? modifier **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 implement a full calculator or even a chess engine entirely within the type system. - Anders Hejlsberg, creator of TypeScript, also created Turbo Pascal, Delphi, and C# — four of the most influential programming languages in history. *Tags:* json, typescript, types --- ### [JSON → Python Dict](https://devtools.surf/tools/json-to-python-dict/) Convert JSON to a valid Python dict literal (True/False/None) **Use cases:** - Python developers converting API JSON responses into Python dict literals - Django developers generating settings dictionaries from JSON configuration - Data scientists converting JSON test fixtures into Python test data - Backend devs pasting Python-compatible dict literals into REPL sessions **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 scripts or Django settings files **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 a singleton object — there is only one None instance in memory. The 'is' operator checks identity, which is why 'x is None' is preferred over 'x == None'. - JSON's null, true, and false are case-sensitive lowercase; Python's None, True, and False are capitalized — this mismatch is the most common reason for JSON parse errors in Python. *Tags:* json, python, dict --- ### [JSON → PHP Array](https://devtools.surf/tools/json-to-php-array/) Convert JSON to a PHP 5.4+ short-syntax associative 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 settings into PHP arrays - Backend teams migrating JSON configuration into PHP config format **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 configuration or fixture files **Fun facts:** - PHP's short array syntax ([]) was added in PHP 5.4 (2012), replacing the verbose array() constructor. It took the PHP community years to stop using the old syntax. - PHP arrays are actually ordered hash maps — they maintain insertion order and support both integer and string keys in the same array, unlike most other languages. - PHP was created by Rasmus Lerdorf in 1994 as a set of CGI scripts called 'Personal Home Page Tools.' It now powers over 77% of websites with a known server-side language. *Tags:* json, php, array --- ### [JSON → Ruby Hash](https://devtools.surf/tools/json-to-ruby-hash/) Convert JSON to a Ruby hash with symbol or string keys **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 into IRB sessions - QA engineers creating Ruby test data from JSON configuration files **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 and booleans remain lowercase **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 syntax (=>) was the only option until Ruby 1.9 (2007) introduced the JavaScript-like colon syntax ({ name: 'value' }) for symbol keys. - Yukihiro 'Matz' Matsumoto designed Ruby in 1993 to be 'a language more powerful than Perl and more object-oriented than Python.' Ruby on Rails (2004) drove its mass adoption. *Tags:* json, ruby, hash --- ### [JSON → Java Class](https://devtools.surf/tools/json-to-java-class/) Generate a POJO Java class with getters/setters from a JSON sample **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 classes for Gson or Moshi deserialization - Enterprise developers generating Java data classes from JSON schema documents **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 Jackson or Gson deserialization **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 convention comes from the JavaBeans specification (1996), which required methods named getX()/setX() for property access in visual builder tools. - Project Lombok, a popular Java library, can auto-generate getters, setters, and constructors with annotations — reducing boilerplate by up to 80% in POJO-heavy codebases. *Tags:* json, java, pojo --- ### [JSON → Swift Struct](https://devtools.surf/tools/json-to-swift-struct/) Generate a Codable Swift struct from a JSON sample **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 - Cross-platform developers sharing data models between iOS and macOS **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 snake_case to camelCase mapping **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 Chris Lattner partly because swifts are fast birds — the white-throated needletail can reach speeds of 170 km/h. - Before Codable, most iOS developers relied on third-party libraries like SwiftyJSON or ObjectMapper, which collectively had over 40,000 GitHub stars. *Tags:* json, swift, codable --- ### [JSON → Kotlin Class](https://devtools.surf/tools/json-to-kotlin-class/) Generate a Kotlin data class from a JSON sample **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 streams - Mobile teams replacing verbose Java POJOs with concise data classes **Tips:** - Nested JSON objects produce nested data classes with proper typing - Mark nullable fields with Kotlin's ? syntax for safe API parsing - Copy the generated class directly into your Android Studio project **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 Island near St. Petersburg, Russia, following the tradition of Java being named after the Indonesian island. - Google announced Kotlin as a first-class Android language at Google I/O 2017, and by 2020 over 70% of the top 1,000 Android apps used it. *Tags:* json, kotlin, data-class --- ### [JSON → Rust Struct](https://devtools.surf/tools/json-to-rust-struct/) Generate a serde-compatible Rust struct from a JSON sample **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 with Actix or Axum - Embedded developers deserializing sensor data from JSON-over-MQTT **Tips:** - The generated struct includes serde Serialize and Derive macros ready to use - Nested JSON objects become separate named structs with proper references - Add #[serde(rename_all = "camelCase")] if your JSON uses camelCase keys **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 language' in Stack Overflow's developer survey every year from 2016 through 2023 — an eight-year streak. - Rust's ownership model eliminates data races at compile time, meaning serde structs are automatically thread-safe without runtime locks. *Tags:* json, rust, serde --- ### [JSON → C# Class](https://devtools.surf/tools/json-to-csharp-class/) Generate a C# class with properties + nullables from JSON **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 SOAP-to-REST migrations - Blazor developers typing API responses for client-side rendering **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 System.Text.Json or Newtonsoft.Json **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 3.0 (2019), is up to 2x faster than Newtonsoft.Json for serialization because it uses Span and avoids allocations. - Anders Hejlsberg, the creator of C#, also created Turbo Pascal and was the lead architect of Delphi before joining Microsoft. *Tags:* json, csharp, class --- ### [JSON → Dart Class](https://devtools.surf/tools/json-to-dart-class/) Generate a Dart class with fromJson/toJson from a JSON sample **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 dart_frog server applications - Freelancers rapidly prototyping Flutter apps from existing API documentation **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 http package for type-safe API calls **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 feature can reflect Dart code changes in under 1 second, making fromJson/toJson classes immediately testable during development. - Dart compiles to ARM machine code for mobile, JavaScript for web, and x86 for desktop — all from the same codebase and the same data classes. *Tags:* json, dart, flutter --- ### [JSON Schema → TypeScript](https://devtools.surf/tools/json-schema-to-typescript/) Convert a JSON Schema draft-07 document into TypeScript types **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 generated interface name **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 Foundation and took 13 years to reach a stable specification. - OpenAPI 3.1 (2021) was the first version to achieve full JSON Schema compatibility — previous versions used a restricted subset that caused constant developer frustration. *Tags:* json-schema, typescript, types --- ### [JSON → MongoDB Query](https://devtools.surf/tools/json-to-mongodb-query/) Convert flat key-value JSON into a MongoDB find() query object **Use cases:** - Backend developers quickly building MongoDB filters from sample documents - Database admins converting JSON exports into diagnostic queries - Full-stack engineers debugging document lookups in MongoDB Compass - Data analysts constructing ad-hoc queries from JSON-formatted requirements **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 build compound AND query filters **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 comparison and logical operators, but the simple equality filter {key: value} handles roughly 60% of real-world queries. - MongoDB was first released in 2009 by 10gen (now MongoDB Inc.) and reached a $4 billion IPO valuation when it went public on NASDAQ in October 2017. *Tags:* json, mongodb, query --- ### [JSON → Query String](https://devtools.surf/tools/json-to-query-string/) Serialize a flat JSON object into a URL 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 URLs - Backend devs migrating POST body parameters to query strings **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 **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 application/x-www-form-urlencoded MIME type used for query strings is the default encoding for HTML forms and dates back to HTML 2.0 (RFC 1866, 1995). - The qs npm library, which handles nested JSON-to-query-string conversion, receives over 60 million weekly downloads — one of npm's most depended-upon packages. *Tags:* json, query, url --- ## Images ### [Sample Images](https://devtools.surf/tools/sample-images/) Download standard-size placeholder images or generate a custom size **Use cases:** - Filling image slots in wireframes during early design phases - Testing responsive image behavior across breakpoints - Generating placeholder assets for frontend component libraries - Creating sample content for CMS demo environments **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 **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 ATSC in 1987 but didn't become mainstream until the late 2000s. - The term 'lorem ipsum' placeholder text was first used alongside placeholder images in the 1960s typesetting industry. *Tags:* image, placeholder, sample --- ### [Image Converter](https://devtools.surf/tools/image-converter/) Convert images between PNG, JPEG, WebP and more **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 elements - Batch-converting legacy BMP files to modern web formats **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 formats **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 alternative to GIF after Unisys began enforcing LZW patent licensing. - JPEG was standardized in 1992 by the Joint Photographic Experts Group and remains the most widely used image format on the web. *Tags:* image, convert --- ### [Bulk Image Converter](https://devtools.surf/tools/bulk-image-converter/) Convert multiple images at once to a chosen format **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 formats - Preparing multiple hero images for responsive srcset attributes **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 an entire site **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 optimization one of the highest-impact performance wins. - AVIF, based on the AV1 video codec, was standardized in 2019 and offers up to 50% better compression than WebP. *Tags:* image, convert, bulk --- ### [Image Editor](https://devtools.surf/tools/image-editor/) Crop, annotate, draw, and add text to images **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 Photoshop - Drawing attention to UI changes in pull request descriptions **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 **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 revolutionized digital image editing. - Browser-based image editors use the HTML5 Canvas API, introduced in 2004 by Apple for Safari's Dashboard widgets. *Tags:* image, crop, edit, paint --- ### [Aspect Ratio Calculator](https://devtools.surf/tools/aspect-ratio-calculator/) Calculate aspect ratios and resize dimensions proportionally **Use cases:** - Calculating responsive image dimensions for CSS layouts - Sizing video thumbnails to platform-specific aspect ratios - Determining print dimensions while preserving digital proportions - Planning responsive grid layouts with consistent image ratios **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 specs **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 since ancient Greece and influenced early photography composition. - Instagram originally only supported 1:1 square images until 2015, when it added support for landscape and portrait formats. *Tags:* aspect, ratio, resize, dimensions --- ### [SVG Optimizer](https://devtools.surf/tools/svg-optimizer/) Minify and clean SVG markup by removing metadata and comments **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 - Preparing SVG assets for icon font or sprite sheet generation **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 exports **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% redundant metadata and editor-specific attributes. - SVGO, the most popular SVG optimization library, was created by Kir Belevich in 2012 and is used by most build tools today. *Tags:* svg, optimize, minify, clean --- ### [Favicon Generator](https://devtools.surf/tools/favicon-generator/) Generate a favicon pack from a single image or emoji **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 apple-touch-icon variants for iOS home screen bookmarks **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 **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 512x512 pixels for PWA icons, a massive increase from the original 16x16 pixel ICO format. - The ICO file format can contain multiple image sizes in a single file, which is why favicon.ico files are often 10-50KB despite being tiny images. *Tags:* favicon, icon, image --- ### [Lorem Picsum Picker](https://devtools.surf/tools/picsum-picker/) Browse and download curated placeholder images **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 sample imagery during development **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 **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 Ipsum' (placeholder text) with 'picsum' (a play on 'picture'), following the lorem tradition. - Placeholder image services emerged in 2010, with placehold.it being one of the first, generating solid-color rectangles with dimensions overlaid. *Tags:* picsum, placeholder, image --- ### [Avatar / Initials Generator](https://devtools.surf/tools/avatar-generator/) Create initials-based SVG avatars from a name **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 initials icons for contact list interfaces **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 **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 resolution without pixelation, making them ideal for retina displays at any scale from 16px to 512px. - The two-letter initials convention for avatars was popularized by Google's Material Design guidelines in 2014 as the default user representation. *Tags:* avatar, initials, svg --- ### [Image Metadata Viewer](https://devtools.surf/tools/image-metadata-viewer/) Show EXIF / IPTC / XMP metadata from JPEG, PNG, HEIF **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 camera settings for photography learning and comparison **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 **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 to within 3 meters, raising significant privacy concerns when shared online. - The XMP (Extensible Metadata Platform) standard was created by Adobe in 2001 and is now an ISO standard (ISO 16684-1:2012). *Tags:* exif, iptc, xmp, metadata --- ### [Base64 ↔ Image](https://devtools.surf/tools/base64-image/) Encode an image to a data URL, or decode a data URL back to an 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 image strings found in API responses **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 **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 designed for embedding small resources like icons to reduce HTTP requests. - Browsers typically limit data URL sizes: Chrome allows up to 2MB, while older versions of Internet Explorer capped them at 32KB. *Tags:* base64, data-url, image --- ### [Image Palette Extractor](https://devtools.surf/tools/image-palette-extractor/) Extract the dominant colors from an image **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 content - Create mood boards with accurate colors from reference photos **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 **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 dynamically color its Now Playing screen, adapting the UI to each album cover. - The human eye can distinguish approximately 10 million colors, but most images use fewer than 256 truly dominant colors. *Tags:* palette, dominant, color, image --- ### [Image Resizer (Batch)](https://devtools.surf/tools/image-resizer-batch/) Resize and crop multiple images in the browser **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 social media image variants from a single source **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 **Fun facts:** - The bicubic interpolation algorithm used in image resizing was described by R.G. Keys in 1981 and remains the default in most image editors. - Social media platforms require wildly different image sizes: Instagram posts need 1080x1080, Twitter cards need 1200x628, and LinkedIn banners need 1584x396. - Browser-based image processing using Canvas API can resize images at over 100 megapixels per second on modern hardware. *Tags:* image, resize, crop, batch --- ### [WebP ↔ AVIF Converter](https://devtools.surf/tools/webp-avif-converter/) Convert images between WebP, AVIF, PNG, and JPEG in-browser **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 image storage costs by batch-converting to efficient formats **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 **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 typically achieves 50% smaller files than JPEG at equivalent quality. - Safari was the last major browser to add WebP support, finally shipping it in iOS 14 and macOS Big Sur in September 2020. *Tags:* webp, avif, convert --- ### [Video Thumbnail Extractor](https://devtools.surf/tools/video-thumbnail/) Scrub a video and export a frame as a PNG or JPEG **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 specific frames for video documentation or storyboards **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 **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 drive 82% of viewer focus when browsing, making thumbnail selection a significant factor in content discovery. - The first video ever uploaded to YouTube, 'Me at the zoo' by Jawed Karim on April 23, 2005, used a manually chosen thumbnail. *Tags:* video, thumbnail, frame --- ### [Image Compressor](https://devtools.surf/tools/image-compressor/) Client-side JPEG compression with quality + scale sliders — no upload **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 filters - Designers preparing web-optimized assets without Photoshop **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 dimensions and file size simultaneously **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 Discrete Cosine Transform (DCT) to convert pixel blocks into frequency components — human eyes are less sensitive to high-frequency details, so those are compressed most aggressively. - Google's PageSpeed Insights penalizes uncompressed images — a 2018 HTTP Archive study found that images account for 50% of total page weight on the median website. *Tags:* compress, jpeg, optimize --- ### [Image Grayscale](https://devtools.surf/tools/image-grayscale/) Desaturate any image — 0–100% grayscale, preview + download **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 single-color publication printing - UI developers generating disabled or placeholder state image variants **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%) for a muted, vintage photo aesthetic **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. - The first digital grayscale image was scanned in 1957 by Russell Kirsch at the National Bureau of Standards — a 176x176 pixel photo of his infant son, now in the Smithsonian. - Instagram's original 'Inkwell' filter (2010) was essentially a grayscale conversion with slight contrast boost — it was one of the app's first and most popular filters. *Tags:* grayscale, desaturate --- ### [Image Rotator](https://devtools.surf/tools/image-rotator/) Rotate an image by any angle — canvas re-fits to new bounds **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 creative compositions and layouts - Content editors straightening crooked scans of documents and receipts **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 oriented photos **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 in EXIF orientation tags (values 1-8), meaning a photo can appear rotated differently in different viewers without the actual pixels changing. - The HTML Canvas 2D API's rotate() method was standardized in 2006 and enables client-side image rotation at speeds exceeding 60 frames per second on modern devices. *Tags:* rotate, image --- ### [Image Cropper](https://devtools.surf/tools/image-cropper/) Crop an image from left/top/right/bottom with % sliders **Use cases:** - Social media managers cropping images to platform-specific aspect ratios - Web developers preparing hero images by removing unwanted edges - Photographers framing compositions tighter without re-shooting - Content creators trimming screenshots to focus on relevant UI sections **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 subject of your image **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. - The rule of thirds, the most common cropping guideline, was first described by painter John Thomas Smith in 1797 in his book 'Remarks on Rural Scenery'. - Social media platforms each require different crop ratios: Instagram uses 1:1 and 4:5, Twitter uses 16:9, and LinkedIn banners use 4:1 — a headache for multi-platform content creators. *Tags:* crop, image --- ### [Image Color Inverter](https://devtools.surf/tools/image-invert/) Invert every pixel's RGB — negative / X-ray effect **Use cases:** - Designers creating negative-effect images for artistic compositions - Developers generating dark mode icon variants by inverting light assets - Medical imaging students experimenting with X-ray contrast inversion - QA testers verifying that inverted images round-trip correctly in image pipelines **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 inverted image restores the original **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 the 2000s. - In medical imaging, X-rays are traditionally displayed as inverted images (white bones on black) because radiologists found this contrast easier to read in the 1895 first X-ray images. - CSS filter: invert(1) achieves the same pixel inversion effect in the browser, and is commonly used as a quick-and-dirty dark mode technique for legacy websites. *Tags:* invert, negative --- ### [Image Watermark](https://devtools.surf/tools/image-watermark/) Tile a text watermark across any image — opacity + angle control **Use cases:** - Photographers protecting portfolio images from theft - Agencies watermarking client proofs before final approval - Bloggers branding hero images for social sharing - Legal teams marking confidential document screenshots **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 **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' originates from 13th-century Italian papermakers who used wire molds to impress translucent marks into wet paper pulp. - Digimarc, founded in 1995, was the first company to offer commercial invisible watermarking and now tracks billions of media assets worldwide. *Tags:* watermark, brand --- ### [ASCII Art Generator](https://devtools.surf/tools/ascii-art-generator/) Convert photos to ASCII art — dense / simple / block ramps **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 generating avatar art for forum signatures **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 **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 Leon Harmon in 1966 was one of the first computer-generated artworks exhibited in a gallery. - The .NFO file scene of the 1990s BBS era elevated ASCII art to a subculture, with groups like ACiD and iCE competing in monthly art packs. *Tags:* ascii, art --- ### [Image Blur](https://devtools.surf/tools/image-blur/) Apply canvas blur (0–40px) — great for hero backgrounds **Use cases:** - Frontend devs creating blurred hero section backgrounds - UI designers generating frosted-glass card backdrops - Content creators obscuring sensitive areas in screenshots - Marketers producing depth-of-field effects for product photos **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 **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. - Apple's 'frosted glass' UI effect, introduced in iOS 7 (2013), popularized heavy background blur and spawned CSS backdrop-filter adoption across the web. - A single-pass box blur applied three times closely approximates a Gaussian blur — a trick Ken Perlin documented that became standard in real-time rendering. *Tags:* blur, image --- ### [Image Brightness / Contrast](https://devtools.surf/tools/image-brightness-contrast/) Adjust brightness, contrast, and saturation in one pass **Use cases:** - E-commerce sellers enhancing flat product photography - Social media managers batch-adjusting campaign images - Developers normalizing user-uploaded avatar brightness - Designers boosting saturation on muted stock photos **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 **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 Levels dialog in Adobe Photoshop 1.0 (1990) was one of the first GUI tools to let users adjust brightness and contrast via a histogram. - LCD monitors typically ship with contrast ratios of 1000:1, while modern OLED screens achieve over 1,000,000:1, making contrast calibration critical for accurate editing. *Tags:* brightness, contrast, saturate --- ### [Image Flip / Mirror](https://devtools.surf/tools/image-flip-mirror/) Horizontal or vertical mirror — or both — of any image **Use cases:** - Selfie photographers correcting mirror-reversed portraits - Designers creating symmetrical pattern tiles from one half - Developers flipping sprites for left/right game animations - Print designers mirroring layouts for iron-on transfer art **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 **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 notebooks in mirror script — left-handed writing that reads normally only when reflected — across over 7,000 pages. - CSS transform: scaleX(-1) became the standard web approach for flipping elements, replacing the older IE-only filter: FlipH from the early 2000s. *Tags:* flip, mirror --- ## Text / String ### [URL Encoder](https://devtools.surf/tools/url-encoder/) Encode strings for safe URL usage **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 internationalized domain name path segments **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 **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 context; %20 is used in paths while + is used in query strings. - RFC 3986 (2005) defines 84 'unreserved' characters that never need encoding, including A-Z, a-z, 0-9, hyphen, period, underscore, and tilde. *Tags:* url, encode, percent --- ### [URL Decoder](https://devtools.surf/tools/url-decoder/) Decode percent-encoded URL strings **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 paths - Understanding encoded deep link URLs from mobile applications **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 **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 2,083 characters, while most servers limit to 8,192 bytes. - Punycode, used for internationalized domain names, converts Unicode to ASCII and was standardized in RFC 3492 in 2003. *Tags:* url, decode, percent --- ### [HTML Entity Encode](https://devtools.surf/tools/html-entity-encode/) Convert characters to HTML entities **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 database text fields for safe web display **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 **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 whenever a literal ampersand appears in HTML content. - Character entity references were part of SGML long before HTML; they date back to the 1986 ISO 8879 standard. *Tags:* html, entity, encode, escape --- ### [HTML Entity Decode](https://devtools.surf/tools/html-entity-decode/) Convert HTML entities back to characters **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 - Processing RSS feed content that contains encoded entities **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 export **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 Unicode character, enabling all 149,813 assigned code points. - The HTML5 parser defines special handling for 'ambiguous ampersands' to maintain backward compatibility with malformed pages. *Tags:* html, entity, decode, unescape --- ### [JWT Decoder](https://devtools.surf/tools/jwt-decoder/) Decode and inspect JWT token header and payload **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 the token has expired **Fun facts:** - JWTs are not encrypted by default — anyone can decode the payload. The signature only verifies the token wasn't tampered with. - The JWT specification (RFC 7519) was authored by Microsoft employees and published in 2015, but the format was already in wide use by 2013. - The 'none' algorithm in JWT headers has caused numerous security vulnerabilities — many libraries now reject it by default to prevent signature bypass attacks. *Tags:* jwt, token, decode, auth --- ### [Lorem Ipsum Generator](https://devtools.surf/tools/lorem-ipsum-generator/) Generate placeholder text in words, sentences, or paragraphs **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 database seed files with placeholder content **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 testing **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 1500s when an unknown printer scrambled the text for a type specimen book. - A 2014 study found that lorem ipsum placeholder text can actually reduce stakeholder feedback quality by 30% compared to real draft copy. *Tags:* lorem, ipsum, placeholder, dummy --- ### [Word Counter](https://devtools.surf/tools/word-counter/) Count words, characters, sentences, paragraphs, and reading time **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 words in academic abstracts with strict limits **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 **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 limit, minus 20 characters reserved for the username. - The longest word in the English language, at 189,819 letters, is the full chemical name of the protein titin. *Tags:* word, count, character, reading --- ### [Text Diff](https://devtools.surf/tools/text-diff/) Compare two text blocks and highlight differences **Use cases:** - Comparing configuration files before and after deployment - Spotting differences between staging and production API responses - Reviewing translated content against the original source text - Auditing changes in legal documents or policy updates **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 **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, published by Eugene Myers in 1986, which finds the shortest edit script. - The first version control system, SCCS, was created by Marc Rochkind at Bell Labs in 1972 and relied heavily on diff. *Tags:* diff, compare, merge, text --- ### [Case Converter](https://devtools.surf/tools/case-converter/) Convert between camelCase, snake_case, PascalCase, kebab-case, and more **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 mapping - Creating URL-friendly slugs from title case headings **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 **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 resembling a snake slithering between words. - PascalCase is named after the Pascal programming language (1970) by Niklaus Wirth, which used it for type identifiers. *Tags:* case, camel, snake, pascal, kebab --- ### [Line Sorter](https://devtools.surf/tools/line-sorter/) Sort lines alphabetically, numerically, reverse, shuffle, or dedupe **Use cases:** - Alphabetizing dependency lists in package configuration files - Deduplicating email lists exported from multiple sources - Sorting log entries by timestamp for chronological analysis - Randomizing quiz questions or survey answer choices **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 **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 algorithm has O(n log n) time complexity, proven optimal by a 1972 information-theoretic argument. - Fisher-Yates shuffle, used for randomizing lists, was originally described in 1938 by Ronald Fisher and Frank Yates using pencil and paper. *Tags:* sort, lines, dedupe, shuffle --- ### [Regex Tester](https://devtools.surf/tools/regex-tester/) Test regex patterns with match highlighting and group extraction **Tips:** - Flags like /g, /i, /m are supported - Named groups (?...) are highlighted separately - Match count and group extractions shown in results **Fun facts:** - Regular expressions were invented by mathematician Stephen Kleene in the 1950s. The term 'regex' wasn't coined until decades later. - Some regex patterns can take exponential time to evaluate — a phenomenon called 'catastrophic backtracking' that has caused real-world outages at Cloudflare and Stack Overflow. - Perl's regex engine was so influential that most modern regex flavors are called 'Perl-compatible' (PCRE), even in languages that have nothing else to do with Perl. *Tags:* regex, regexp, test, match --- ### [String Escape / Unescape](https://devtools.surf/tools/string-escape/) Escape and unescape strings for JS, JSON, HTML, or SQL **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 embedding - Sanitizing log messages containing control characters **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 **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 C programming language in 1972 and adopted by nearly every language since. - JSON requires only two characters to be escaped: the backslash and the double quote, plus control characters below U+0020. *Tags:* escape, unescape, string, sanitize --- ### [Markdown Preview](https://devtools.surf/tools/markdown-preview/) Live preview rendered Markdown with syntax highlighting **Tips:** - Supports GitHub-flavored Markdown - Code blocks get syntax highlighting - Tables, blockquotes, and task lists are supported **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 today. CommonMark was created in 2014 to standardize the core syntax after years of fragmentation. - GitHub processes over 2 billion Markdown files. Their flavor (GFM) added tables, task lists, and strikethrough — features missing from the original spec. *Tags:* markdown, preview, render, md --- ### [.env Validator](https://devtools.surf/tools/env-validator/) Validate .env files and flag missing values or duplicate keys **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 definitions - Verifying .env.example completeness against actual .env files **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 **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 2011, established environment variables as the standard for configuration. - A 2023 GitGuardian report found that over 10 million secrets were exposed in public GitHub repositories that year alone. *Tags:* env, dotenv, validate, config --- ### [Byte Counter](https://devtools.surf/tools/byte-counter/) Show byte size of text in UTF-8, UTF-16, and ASCII **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 - Estimating bandwidth for real-time text streaming applications **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 **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 characters, skin tone modifiers, and zero-width joiners. - ASCII uses exactly 7 bits per character, but UTF-8 is backward-compatible, encoding the same 128 characters in one byte each. *Tags:* byte, size, utf8, encoding --- ### [TOML Formatter](https://devtools.surf/tools/toml-formatter/) Format and validate TOML configuration files **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 - Standardizing Netlify or Cloudflare Pages deployment configs **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 **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, after 8 years of development and community feedback. - Rust's Cargo package manager adopted TOML for its manifest format (Cargo.toml) in 2014, making it the language's de facto config format. *Tags:* toml, format, config, validate --- ### [Markdown Table Editor](https://devtools.surf/tools/markdown-table-editor/) Edit Markdown tables with a visual grid — add rows and align cells **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 matrices for project proposals **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 **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 Markdown (GFM) was formally specified as a CommonMark extension in 2017, standardizing table syntax across millions of repositories. - Markdown table alignment (using colons in the separator row) was inspired by textile markup's alignment syntax from the early 2000s. *Tags:* markdown, table, grid --- ### [JWT to cURL](https://devtools.surf/tools/jwt-to-curl/) Generate a curl command that uses a JWT as the Authorization header **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 expiration handling by replaying requests **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 **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 by dots: header, payload, and signature — no more, no less. - The cURL command-line tool was first released by Daniel Stenberg on March 20, 1998, and now handles over 10 billion daily requests worldwide. *Tags:* jwt, curl, auth --- ### [Diff Viewer (Side-by-Side)](https://devtools.surf/tools/diff-viewer/) View unified or side-by-side diffs with syntax highlighting **Use cases:** - Review code changes before committing to version control - Compare configuration files across environments - Visualize database migration script differences - Share highlighted diffs in pull request documentation **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 **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 @@ markers) was introduced by Wayne Davison in 1990 and became the git default. - Git's diff algorithm is based on Eugene Myers' 1986 paper 'An O(ND) Difference Algorithm,' which finds the shortest edit script. *Tags:* diff, compare, side-by-side, unified --- ### [Environment Variable Diff](https://devtools.surf/tools/env-diff/) Compare two .env files and show added, removed, and changed variables **Use cases:** - Catch missing environment variables before deployment - Compare staging and production environment configs - Audit environment variable changes during code review - Onboard new developers by showing required local env vars **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 **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 downloads on npm, making it one of the most depended-upon packages. - Environment variables in Unix date back to Version 7 Unix (1979), introduced as part of the Bourne shell by Stephen Bourne. *Tags:* env, diff, compare, variables --- ### [Unicode Normalizer](https://devtools.surf/tools/unicode-normalizer/) Normalize Unicode text between NFC, NFD, NFKC, and NFKD forms **Use cases:** - Backend developers fixing string comparison bugs across locales - Data engineers deduplicating records with mixed Unicode forms - macOS/Windows cross-platform teams resolving filename mismatches - Search engineers normalizing user queries for consistent indexing **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 **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. - The character 'fi' can be represented as one codepoint (U+FB01, the fi ligature) or two (f + i) — NFKD decomposes ligatures while NFC preserves them, causing silent search failures. - Apple's macOS filesystem (APFS) stores filenames in NFD form, while Windows uses NFC — this mismatch causes cross-platform file sync bugs that have plagued Dropbox and Git for years. *Tags:* unicode, normalize, nfc, nfd --- ### [Markdown Resume Builder](https://devtools.surf/tools/markdown-resume-builder/) Write a resume in Markdown and export to styled HTML or PDF **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 bios - Exporting a styled PDF resume from plain text for recruiters **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 readability **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 writing the first known resume in 1482, a letter to the Duke of Milan listing his engineering abilities. - Applicant tracking systems (ATS) parse resumes using keyword matching — Markdown's clean structure often parses better than heavily formatted PDFs. *Tags:* resume, cv, markdown, pdf --- ### [Regex Cheatsheet](https://devtools.surf/tools/regex-cheatsheet/) Searchable reference of regex syntax with live examples **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 examples - Quickly finding the correct flag for case-insensitive matching **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 coding **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 editor in 1968, which later influenced grep — whose name stands for 'globally search for a regular expression and print.' - Perl's regex engine, introduced in 1987, became so influential that most modern regex flavors are described as 'Perl-compatible' (PCRE). *Tags:* regex, cheatsheet, reference --- ### [Unicode Escape](https://devtools.surf/tools/unicode-escape/) Escape non-ASCII chars as \uXXXX or decode them back **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 cross-platform compatibility - Identifying hidden Unicode characters causing string comparison failures **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 **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 in Java 1.0 (1996) and was later adopted by JavaScript, JSON, Python, and many other languages. - The Unicode Consortium assigns code points up to U+10FFFF, giving a theoretical maximum of 1,114,112 possible characters. *Tags:* unicode, escape, decode --- ### [Pronouncing Counter](https://devtools.surf/tools/pronouncing-counter/) Count syllables per word (useful for copy + slugs) **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 - Evaluating brand name candidates for international pronunciation **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 **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 letters — one syllable despite its length. - The Carnegie Mellon Pronouncing Dictionary (CMUdict) contains over 134,000 words with their phonetic transcriptions and is widely used in NLP for syllable counting. *Tags:* syllables, pronounce, text --- ### [Readability Scorer](https://devtools.surf/tools/readability-scorer/) Flesch + grade-level estimate for any prose block **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 for non-native English speakers - Validating that legal terms of service meet plain-language requirements **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 **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 7th-8th grade level, which is why most major newspapers target that readability score. - Amazon requires Kindle book descriptions to score at least 50 on the Flesch scale, and US insurance policies must score above 40 by law in many states. *Tags:* readability, flesch, writing --- ### [Word Frequency Counter](https://devtools.surf/tools/word-frequency/) Rank words by frequency, stop-words filtered **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 documents - Extract key themes from survey responses and user feedback **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 meaningful content words - Results are ranked by count and include percentage of total words for quick analysis **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 on. - The word 'the' accounts for about 7% of all words in English text — making it the single most common word by a wide margin. - Word frequency analysis was one of the first techniques used to crack substitution ciphers. During WWII, frequency analysis helped Bletchley Park cryptanalysts break Enigma-encrypted messages. *Tags:* frequency, words, analysis --- ### [Clipboard Cleaner](https://devtools.surf/tools/clipboard-cleaner/) Strip smart quotes, zero-widths, non-breaking spaces **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 insertion - Sanitizing text from PDFs before using in configuration files **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 **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 introduced in early desktop publishing in the 1980s and are encoded differently from straight quotes, causing syntax errors in code. - The non-breaking space (U+00A0) is intentionally used in French typography before punctuation marks like colons and semicolons, but causes havoc in programming. *Tags:* clean, clipboard, text --- ### [Markdown TOC](https://devtools.surf/tools/markdown-toc/) Generate a table of contents from markdown headings **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 knowledge bases - Building navigation for Markdown-based static site content **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 **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 by John Gruber (2004) never included a table of contents feature — it remains an extension provided by various processors. - Anchor links in Markdown TOCs work by converting headings to lowercase slugs, replacing spaces with hyphens and stripping special characters. *Tags:* markdown, toc --- ### [Whitespace Visualizer](https://devtools.surf/tools/whitespace-visualizer/) Render spaces, tabs, newlines, zero-widths as glyphs **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 code - Detecting zero-width characters in user-submitted form data **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 **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 block structure was inspired by ABC, a language Guido van Rossum worked on at CWI in the Netherlands in the 1980s. - The 'tabs vs spaces' debate was quantified in a 2017 Stack Overflow survey: 41% of developers preferred tabs, while 43% preferred spaces. *Tags:* whitespace, debug --- ### [Line Deduper](https://devtools.surf/tools/line-deduper/) Remove duplicate lines, preserve order or sort **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 campaign - Removing redundant lines from hosts files or blocklists **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 **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, deduplication can reduce storage requirements by 40-60% for typical log files and datasets with repeated entries. - The concept of deduplication became critical in data centers around 2005, when NetApp and Data Domain popularized inline dedup for backup storage. *Tags:* dedupe, lines --- ### [Hard Wrap](https://devtools.surf/tools/text-wrap/) Re-wrap prose to a fixed column width **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 - Preparing plain text content for terminal-based email clients **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 **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 no longer than 78 characters (with a hard limit of 998), which is why 72-column wrapping is common for commit messages. - Git commit messages conventionally wrap at 72 columns because git log indents by 4 spaces, and 72 + 4 + 4 = 80 — fitting the traditional terminal width. *Tags:* wrap, column, text --- ### [IETF Language Tag Validator](https://devtools.surf/tools/ietf-tag-validator/) Validate BCP 47 tag (zh-Hant-TW) — canonical form + regions **Use cases:** - i18n engineers validating language tags in translation config files - Frontend developers setting correct lang attributes in HTML documents - API developers validating Accept-Language headers from client requests - CMS developers ensuring locale codes match BCP 47 standards **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 them in i18n config files **Fun facts:** - BCP 47 (Best Current Practice 47) combines RFC 5646 and RFC 4647 to define language tags. It supports over 8,000 languages from the ISO 639 registry. - The subtag registry maintained by IANA contains over 9,000 entries including languages, scripts, regions, and variants — it is updated roughly every 2-4 weeks. - The longest valid BCP 47 tag can theoretically exceed 35 characters, like 'sl-Latn-IT-nedis' (Slovenian, Latin script, Italy, Nadiza dialect). *Tags:* bcp47, locale, i18n --- ### [Line Deduper](https://devtools.surf/tools/line-dedupe/) Collapse duplicate lines, show occurrence counts **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 dependency lists in config files - QA testers comparing test output files for unexpected duplicate results **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 most frequently repeated lines **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' pipeline is one of the most common Unix command combinations. In 2019, GNU coreutils added 'sort -u' as a combined shortcut. - Hash-based deduplication (using a Set or HashMap) runs in O(n) time, while sort-based dedup runs in O(n log n) — but the hash approach uses more memory. *Tags:* dedupe, lines, text --- ### [Safe Filename Generator](https://devtools.surf/tools/safe-filename-generator/) Strip accents + unsafe chars → filesystem-safe filename **Use cases:** - Backend developers sanitizing user-uploaded filenames before storage - CMS developers generating URL-safe slugs from article titles - DevOps engineers normalizing build artifact names in CI pipelines - Content managers converting Unicode titles into safe download filenames **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 programmatically saving user-uploaded file names **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 length on most filesystems is 255 bytes (ext4, NTFS, APFS), but this is bytes not characters — a single emoji can use up to 4 bytes in UTF-8. - The FAT32 filesystem, still used on USB drives, limits filenames to 255 UTF-16 code units and is case-insensitive, causing silent collisions on case-sensitive systems. *Tags:* filename, slug, sanitize --- ### [ASCII Box Drawer](https://devtools.surf/tools/ascii-box-drawer/) Wrap any text in a Unicode box (┌─┐) — great for READMEs **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 status messages in plain-text reports - Open-source maintainers creating visually appealing ASCII banners **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 adjustment to the longest line **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 128 characters covering single, double, and mixed-weight lines in all directions — enough to draw complex tables and borders. - Before Unicode, each platform had its own box-drawing characters — CP437 (DOS), Mac Roman, and ISO 8859 all used different code points, causing garbled displays. *Tags:* ascii, box, text --- ### [Text Reverser](https://devtools.surf/tools/text-reverser/) Reverse a string — emoji-safe (operates on grapheme clusters) **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 mirrored text effects for UI experiments - Internationalization engineers validating grapheme handling in different locales **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 like flags and skin-tone variants stay intact **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 is what humans perceive as a single character — the family emoji (👨‍👩‍👧‍👦) is actually 7 code points joined by zero-width joiners. - The Unicode standard defines grapheme cluster boundaries in UAX #29, which is updated with each Unicode version — the rules span over 40 pages of specification. *Tags:* reverse, text --- ### [Email Extractor](https://devtools.surf/tools/email-extractor/) Extract every unique email address from a blob of text **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 from log files or user feedback forms - Marketing teams building email lists from event registration text dumps **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 a contact list quickly **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 specification (RFC 5321/5322) allows surprisingly complex local parts — technically, "john..doe"@example.com is valid with quoted strings. - There are approximately 4.5 billion email addresses worldwide as of 2024, with the average office worker receiving 121 emails per day according to a Radicati Group study. *Tags:* email, extract, regex --- ### [URL Extractor](https://devtools.surf/tools/url-extractor/) Extract every unique http/https URL from a blob of text **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 links in page copy before publication - Developers parsing URLs from log files or configuration dumps **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 collect all referenced links **Fun facts:** - Tim Berners-Lee invented URLs (originally called URIs) in 1994, defining the format in RFC 1738. The maximum practical URL length is about 2,000 characters due to browser limits. - The longest valid URL ever tested in production was over 100,000 characters in Apache — though no browser would display it, the HTTP spec technically has no maximum length. - The most visited URL in history is google.com, which receives over 8.5 billion visits per day. The first ever URL was info.cern.ch, created by Berners-Lee in 1991. *Tags:* url, extract, regex --- ### [Text Repeater](https://devtools.surf/tools/text-repeater/) Repeat text N times with a custom separator — newline, space, emoji **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 borders and dividers - Security testers crafting long repeated inputs for boundary testing **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 placeholder strings hundreds of times **Fun facts:** - The longest known repeated word in English literature is James Joyce's 'Bababadalgharaghtakamminarronnkonnbronntonnerronntuonnthunntrovarrhounawnskawntoohoohoordenenthurnuk' — a 100-letter word in Finnegans Wake (1939). - In computing, the Unix 'yes' command repeats the letter 'y' indefinitely and was written by Ken Thompson — it's been part of Unix since 1973. - Buffer overflow attacks historically exploited text repetition, sending thousands of repeated characters to overwrite memory — the Morris Worm of 1988 was one of the first. *Tags:* repeat, text --- ### [Title Case Converter](https://devtools.surf/tools/title-case-converter/) Capitalize words — AP-style, keep small words lowercase unless first/last **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 paragraphs, and blog titles **Fun facts:** - There are at least 5 competing title-case styles: AP, Chicago, MLA, APA, and NYT. Each one capitalises a slightly different set of short words. - The word 'the' is the most common English word, appearing in ~7% of all text — and title case rules for it vary by every style guide. - German capitalizes all nouns (not just proper nouns), making German title-case algorithms fundamentally different from English ones. *Tags:* case, title --- ### [Whitespace Normalizer](https://devtools.surf/tools/whitespace-normalizer/) Collapse runs of spaces/tabs, trim lines, drop consecutive blanks **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 to analysis tools - Content editors removing extra whitespace from CMS-exported HTML **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 copied text or logs **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 Whitespace, created in 2003 by Edwin Brady and Chris Morris, uses only spaces, tabs, and line feeds as its entire instruction set. - Git's 'git diff --check' specifically warns about trailing whitespace because it causes unnecessary merge conflicts and clutters version history. *Tags:* whitespace, normalize --- ### [Tab ↔ Space Converter](https://devtools.surf/tools/tab-space-converter/) Switch tabs to N spaces or N spaces back to tabs **Use cases:** - Teams enforcing consistent indentation across mixed-editor workflows - Open source contributors matching a project's .editorconfig settings - Code reviewers normalizing indentation before comparing file diffs - Instructors standardizing student code submissions for grading tools **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 sources and unify indentation in one click **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 style guide mandates 4 spaces per indentation level, while Go's gofmt tool enforces tabs — making the debate language-dependent. - The ASCII tab character (0x09) was originally designed for typewriters in the 1960s to align columns in tabular data, hence the name 'tabulator key'. *Tags:* tab, space, indent --- ### [Line Break Converter](https://devtools.surf/tools/line-break-converter/) Normalize CRLF / LF / CR line endings across an entire file **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 exported from mixed operating systems - Web developers ensuring consistent line breaks in deployment config files **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 diff noise **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 setting was created because Windows uses CRLF while Unix/macOS uses LF, causing thousands of phantom diffs in cross-platform repositories. - Classic Mac OS (pre-2001) used CR (\r) alone as its line ending — when Apple switched to macOS (Unix-based), they adopted LF, making CR-only files a relic. *Tags:* line-break, crlf, lf --- ### [Line Shuffler](https://devtools.surf/tools/line-shuffler/) Randomly shuffle every line in your input — Fisher-Yates, deterministic **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 before train/test splitting - Game developers shuffling question banks or card decks for gameplay **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 results differ each run **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 Durstenfeld in 1964. - A naive shuffle that swaps each element with a random position produces biased results — the Fisher-Yates algorithm is O(n) and provably uniform. - There are n! possible permutations of n lines — for just 20 lines, that's 2,432,902,008,176,640,000 (about 2.4 quintillion) possible arrangements. *Tags:* shuffle, random, lines --- ### [Syllable Counter](https://devtools.surf/tools/syllable-counter/) Count syllables per word — heuristic-based English estimator **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 breakdowns - Lyricists matching syllable patterns to musical rhythms and beats **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 complexity **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 word by syllables is 'antidisestablishmentarianism' at 12 syllables — but medical terms like 'pneumonoultramicroscopicsilicovolcanoconiosis' reach 19. - The Flesch-Kincaid readability formula, used by the U.S. military since 1978, relies heavily on syllable count per word to estimate text difficulty. *Tags:* syllable, text, count --- ### [Pig Latin Converter](https://devtools.surf/tools/pig-latin-converter/) Translate English text to pig latin — keeps case, punctuation intact **Use cases:** - Developers testing internationalization by simulating pseudo-translations - Teachers creating fun language exercises for elementary students - Content creators adding playful text transformations to social posts - QA teams generating pseudo-localized strings to test UI text rendering **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 instead of moving letters **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 reportedly wrote letters in a Pig Latin-like cipher, and the game has been referenced in Mark Twain's works from the 1880s. - Despite its name, Pig Latin has no connection to actual Latin — it's a simple English word game based on phonemic manipulation of initial consonant clusters. *Tags:* pig-latin, fun --- ### [Bold Text Generator](https://devtools.surf/tools/bold-text-generator/) Turn regular text into unicode 𝐛𝐨𝐥𝐝 — works in bios, Slack, Discord **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 accessibility **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 (U+1D400–U+1D7FF) was added in Unicode 3.1 (2001) specifically for mathematical notation, not for social media styling. - Some platforms like Instagram strip Unicode mathematical symbols in certain fields, which is why bold text sometimes 'disappears' after posting. *Tags:* bold, unicode, fancy --- ### [Italic Text Generator](https://devtools.surf/tools/italic-text-generator/) Turn regular text into unicode 𝑖𝑡𝑎𝑙𝑖𝑐 — copy/paste anywhere **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 with unicode italic typography - Forum users adding emphasis in plain-text-only comment sections **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 emphasis without formatting support **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 invented by Aldus Manutius in Venice around 1500 to mimic cursive handwriting and fit more text on a page, reducing printing costs. - Unicode contains over 149,000 characters as of version 15.0 (2022), including multiple complete alphabets in italic, bold, script, and other mathematical styles. *Tags:* italic, unicode, fancy --- ### [Strikethrough Text Generator](https://devtools.surf/tools/strikethrough-text-generator/) Add combining-mark s̶t̶r̶i̶k̶e̶ to any text — no markdown needed **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 edits visually - Developers testing how combining unicode characters render in their UI **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 individual combining mark for true cross-platform support **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 in legal documents indicates deleted language — this convention dates back to handwritten contracts where ink lines crossed out old terms. - HTML's and tags serve different semantic purposes: means 'no longer relevant' while means 'removed from the document' — a distinction from the HTML5 spec. *Tags:* strikethrough, unicode --- ### [Fancy Text Generator](https://devtools.surf/tools/fancy-text-generator/) 8 unicode style variants — bold, italic, script, fraktur, monospace and more **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 **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 combining diacritical marks — Unicode allows unlimited combining characters on a single base character. - The circled letters style (Ⓐ Ⓑ Ⓒ) was originally added to Unicode for Japanese industrial standards, not for decorative text generation. *Tags:* fancy, unicode, fonts --- ### [Upside-Down Text](https://devtools.surf/tools/upside-down-text/) Flip text upside-down using unicode substitutions — ǝpɐɯ ʞlıɯ **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 characters - Content creators adding visual novelty to YouTube comments and forum posts **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 text in social media posts and comments **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 International Phonetic Alphabet (IPA) contains many 'turned' letters that double as upside-down text substitutes — linguists accidentally enabled a meme format. - Not all letters have perfect unicode upside-down equivalents — 'f' and 'q' use approximations, which is why some flipped text looks slightly imperfect. *Tags:* upside-down, unicode, fun --- ### [Small Caps Converter](https://devtools.surf/tools/small-caps-converter/) Convert normal text to sᴍᴀʟʟ ᴄᴀᴘs — pure unicode, no CSS **Use cases:** - Designers creating styled headings for social media without CSS - Writers formatting acronyms in typographically correct small caps - Brand managers maintaining consistent styled text across platforms - Developers testing unicode small capital rendering in font stacks **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 typographic contrast in bios **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: small-caps scales down uppercase glyphs, but unicode small caps (U+1D00 block) are distinct characters with their own designed shapes. - The Chicago Manual of Style recommends small caps for abbreviations like AD, BC, AM, and PM — a convention dating back to traditional book typography. *Tags:* small-caps, unicode --- ### [Circled Text Generator](https://devtools.surf/tools/circled-text-generator/) Render letters + digits as ⒸⒾⓇⒸⓁⒺⒹ unicode glyphs **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 rich formatting - Teachers creating visually distinct labels in plain-text worksheets **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 lists in plain-text environments **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 circled latin letters occupy Unicode block U+24B6 to U+24E9, originally included for compatibility with East Asian teletext and broadcast systems. - Some circled characters like (1) through (20) have 'negative' filled variants where the circle is solid and the number is white — added in Unicode 2.0. *Tags:* circled, unicode, fancy --- ### [Square Text Generator](https://devtools.surf/tools/square-text-generator/) Render letters as 🅂🅀🅄🄰🅁🄴🄳 unicode glyphs for banners and bios **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 plain text - Gamers creating distinctive clan tags and profile decorations **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 equivalents **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 originally designed for TV broadcast closed captioning systems in Japan and Korea before becoming social media decoration. - The negative squared variants (filled background) are technically emoji and may render differently across operating systems — Apple, Google, and Microsoft each have unique designs. *Tags:* square, unicode, fancy --- ### [Superscript & Subscript](https://devtools.surf/tools/superscript-subscript/) Convert letters/digits to ˢᵘᵖᵉʳ or ₛᵤᵦ script — CO₂, H₂O, x² **Use cases:** - Scientists writing chemical formulas like H₂O and CO₂ in plain text - Mathematicians expressing exponents like x² without LaTeX rendering - Students formatting footnote references as superscript numbers - Developers embedding mathematical notation in code comments **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 variants — check output carefully **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 superscript letters available in Unicode are incomplete — only a, e, h, i, j, k, l, m, n, o, p, r, s, t, u, v, w, x, y have official superscript forms. - Subscript notation for chemical formulas was standardized by Jons Jacob Berzelius in 1814 — before that, chemists used alchemical symbols and varying notation systems. *Tags:* superscript, subscript, unicode --- ### [Emoji Letter Mapper](https://devtools.surf/tools/emoji-letter-mapper/) Replace letters with regional-indicator and symbol emoji **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 for YouTube thumbnails - Gamers crafting unique display names using emoji characters **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 — single letters show as boxed letters **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 26 regional indicator symbols, one per English letter — they were designed specifically by the Unicode Consortium for ISO 3166-1 country codes. - Flag emoji are the only Unicode characters that require two code points to form a single visible glyph — this 'ligature' behavior is unique in the Unicode standard. *Tags:* emoji, letters, fun --- ### [Vaporwave Text](https://devtools.surf/tools/vaporwave-text/) Convert ASCII to ｆｕｌｌｗｉｄｔｈ aesthetic letters — vaporwave vibes **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 Twitter posts - Musicians styling band names and track titles with fullwidth characters **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 visual emphasis **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 vaporwave aesthetic originated around 2010 on internet forums, combining 1980s nostalgia, Japanese culture, and early internet imagery — the text style became iconic by 2012. - Fullwidth latin characters occupy exactly the same horizontal space as a single Chinese/Japanese/Korean character — this 1:1 width matching was their original design purpose. *Tags:* vaporwave, fullwidth, aesthetic --- ### [Cursed Text Generator](https://devtools.surf/tools/cursed-text-generator/) Stack combining marks above/below letters for a glitchy, cursed look **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 enthusiasts generating Zalgo text for memes and copypasta - QA testers stress-testing text input fields with heavily modified unicode **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 rendering — test your target platform first **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 'Zalgo' text meme, which cursed text is based on, originated on the Something Awful forums around 2004 and is named after a creepypasta horror entity. - There is no technical limit to how many combining marks can attach to a single base character in Unicode — some cursed text generators stack 50+ marks per letter. *Tags:* cursed, glitch, unicode --- ### [Wide Text Generator](https://devtools.surf/tools/wide-text-generator/) Add spaces between every character for a stretched / wide look **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 plain-text social posts - Marketers creating attention-grabbing headlines in email subject lines **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 headings **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 traditional German typography, letterspacing (Sperrschrift) was the standard method for emphasis in Fraktur typefaces, since italic Fraktur did not exist. - CSS letter-spacing was one of the original CSS1 properties defined in 1996, but the wide text unicode trick bypasses CSS entirely by inserting literal space characters. *Tags:* wide, spaced, text --- ## Encoding ### [Base64 Encode](https://devtools.surf/tools/base64-encode/) Encode text or files to Base64 **Use cases:** - Embed images inline in HTML/CSS - Send binary through JSON APIs - Obfuscate-but-not-encrypt debug payloads **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 **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 Enhanced Mail (PEM) — the same format used for SSL certificates today. - The '=' padding at the end of base64 strings exists because the input must be divisible by 3 bytes; padding fills the gap when it's not. *Tags:* base64, encode, binary --- ### [Base64 Decode](https://devtools.surf/tools/base64-decode/) Decode Base64 back to text or file **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 - Debugging data URIs containing Base64-encoded images **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 **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 encodes 3 bytes of binary into 4 ASCII characters. - The 64-character alphabet uses A-Z, a-z, 0-9, + and /, chosen because they are all printable in every character encoding. *Tags:* base64, decode, binary --- ### [Hash Generator](https://devtools.surf/tools/hash-generator/) Generate MD5, SHA-1, SHA-256, and SHA-512 hashes from text **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 **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 Chinese researcher Xiaoyun Wang, who found collisions in under an hour on a standard PC. - Git uses SHA-1 for commit hashes. After the SHAttered attack in 2017, Git began migrating to SHA-256 — a transition still underway. *Tags:* hash, md5, sha, checksum --- ### [Number Base Converter](https://devtools.surf/tools/number-base-converter/) Convert between decimal, hex, octal, and binary **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 Unix permission octals for chmod verification **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 detection **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 Gottfried Wilhelm Leibniz in 1703, though he credited ancient Chinese I Ching as inspiration. - Octal (base-8) was common in early computing because the PDP-8 and other machines used 12-bit words divisible into four 3-bit groups. *Tags:* number, hex, octal, binary, decimal --- ### [Timestamp Converter](https://devtools.surf/tools/timestamp-converter/) Convert between Unix epoch, ISO 8601, and human-readable dates **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 **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 when Unix was being developed — not for any astronomical or historical reason. - GPS time started on January 6, 1980 and does not account for leap seconds, so it is currently 18 seconds ahead of UTC. *Tags:* timestamp, epoch, unix, iso, date --- ### [Base58/Base32/Base85](https://devtools.surf/tools/base58-encoder/) Encode and decode text in Base58, Base32, or Base85 **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 human-readable tokens that avoid confusing characters **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 one click **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 case-insensitive and ideal for systems that cannot handle mixed-case strings. - Base85 (Ascii85) was developed for the btoa utility on early Unix systems and is used internally by Adobe's PostScript and PDF formats. *Tags:* base58, base32, base85, encode, decode --- ### [Base64URL Encoder](https://devtools.surf/tools/base64url-encoder/) URL-safe base64 — + → - , / → _ , no padding **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 binary hashes - Security engineers encoding cryptographic signatures for URL transport **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 Base64 to see the character substitutions **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 standard Base64) for all three segments — header, payload, and signature — to ensure tokens are safe in URL query parameters. - Standard Base64 adds = padding to make output a multiple of 4 characters; Base64URL omits padding because the decoder can infer the original length. *Tags:* base64, base64url, encode --- ### [Base64URL Decoder](https://devtools.surf/tools/base64url-decoder/) Decode URL-safe base64 back to UTF-8 text **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 API tokens contain expected payload data - Backend devs debugging Base64URL-encoded webhook signatures **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 automatically **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 characters (A-Z, a-z, 0-9, and two symbols) because 64 = 2^6, allowing each character to represent exactly 6 bits of data. - Base64 encoding expands data by approximately 33% — every 3 bytes of input become 4 characters of output, which is why it's not suitable for large binary files. *Tags:* base64, base64url, decode --- ### [Text ↔ Binary](https://devtools.surf/tools/text-to-binary/) Convert UTF-8 text to 0/1 binary — or decode back **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 - Teachers demonstrating character encoding fundamentals **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 **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 published as a standard in 1963 by the American Standards Association, defining 128 characters in 7-bit binary codes. - Modern computers process binary at speeds exceeding 5 GHz — meaning over 5 billion binary operations per second on a single core. *Tags:* binary, ascii --- ### [Text ↔ Hex](https://devtools.surf/tools/text-to-hex/) UTF-8 text to hexadecimal bytes — or decode hex back to text **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 engineers reading hex-encoded packet captures **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 **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, released in 1964, was one of the first computer architectures to standardize hexadecimal display in memory dumps, replacing octal. - HTML color codes (#FF5733) use hexadecimal because 256 shades per channel (00-FF) map cleanly to one byte, giving 16.7 million possible colors. *Tags:* hex, ascii --- ### [Text ↔ Octal](https://devtools.surf/tools/text-to-octal/) UTF-8 text to octal digit sequences — or decode octal back **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 debugging octal escape sequences in strings **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 **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 permissions (chmod 755) use octal because three permission bits (read/write/execute) map perfectly to a single octal digit from 0 to 7. - The C programming language's octal literal prefix (0) has caused countless bugs — 010 equals 8 in decimal, not 10 — leading Python 3 to require the explicit 0o prefix. *Tags:* octal, ascii --- ### [ASCII85 Encoder](https://devtools.surf/tools/ascii85-encoder/) Adobe ASCII85 (base85) for compact binary in PDF/PostScript payloads **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 - Developers comparing encoding efficiency versus base64 **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 **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 (renaming it Ascii85) for PostScript and PDF, where binary data must be transmitted through 7-bit-clean channels. - The 'z' shortcut in ASCII85 represents four zero bytes as a single character — a simple but effective compression for data with many null sequences. *Tags:* ascii85, base85 --- ## Generators ### [UUID Generator](https://devtools.surf/tools/uuid-generator/) Generate v4 UUIDs — single or bulk **Tips:** - Generate up to 100 UUIDs at once - Toggle uppercase or remove dashes for different formats - Each UUID has a copy button on hover **Fun facts:** - UUID v4 uses 122 random bits, giving 5.3 x 10^36 possible values. You'd need to generate 1 billion UUIDs per second for 85 years to have a 50% chance of collision. - UUID v7 (RFC 9562, 2024) embeds a Unix timestamp in the first 48 bits, making UUIDs sortable by creation time while staying globally unique. - Microsoft calls UUIDs 'GUIDs' (Globally Unique Identifiers) — they are identical in format but the name stuck in the Windows ecosystem. *Tags:* uuid, guid, generate, random --- ### [ULID Generator](https://devtools.surf/tools/ulid-generator/) Generate sortable ULIDs (Universally Unique Lexicographically Sortable IDs) **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 lexicographic ordering - Building audit logs with inherently chronological identifiers **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 **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 (excluding I, L, O, U) to avoid ambiguity and offensive words in generated IDs. - Unlike UUIDv4, ULIDs are monotonically sortable, meaning database indexes remain efficient without random page splits. *Tags:* ulid, generate, sortable, id --- ### [Password Generator](https://devtools.surf/tools/password-generator/) Generate secure random passwords with custom rules **Use cases:** - New account signups - API key roots - Database credential rotation **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 **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 breaches is still '123456' — used by over 23 million accounts in the 2019 Have I Been Pwned dataset. - NIST's 2024 guidelines recommend password length over complexity — a 16-character lowercase passphrase is stronger than an 8-character 'complex' password. *Tags:* password, generate, random, secure --- ### [cURL to Code](https://devtools.surf/tools/curl-to-code/) Convert cURL commands to fetch, axios, Python requests, and more **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 JavaScript projects - Generating SDK-specific code from Postman curl exports **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 **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 spelled 'urlget' before being renamed in version 4.0. - cURL supports over 25 protocols including HTTP, FTP, SMTP, LDAP, and even Gopher, a protocol from 1991. *Tags:* curl, fetch, axios, convert, http --- ### [Cron Expression Parser](https://devtools.surf/tools/cron-expression-parser/) Describe cron expressions in plain English with next run times **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 Kubernetes CronJobs - Preview next run times across daylight saving boundaries **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 scheduled runs in your local timezone to verify the expression does what you expect **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 still the default cron daemon on most Linux distributions today. - Cron has no built-in concept of timezone — jobs run in the system's local time, which has caused countless bugs during daylight saving transitions. *Tags:* cron, schedule, parse, explain --- ### [SQL Formatter](https://devtools.surf/tools/sql-formatter/) Format and prettify SQL queries **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 ad-hoc analytics queries before sharing results **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 **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 in SQL-92 to over 4,400 pages in SQL:2023. - Edgar F. Codd published his relational model paper in 1970, but it took until 1979 for Oracle to release the first commercial SQL database. *Tags:* sql, format, prettify, query --- ### [GraphQL Formatter](https://devtools.surf/tools/graphql-formatter/) Format and prettify GraphQL queries and schemas **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 - Standardizing query formatting across a frontend codebase **Tips:** - Format nested queries to clearly show field hierarchy - Clean up minified schema definitions for documentation - Validate query structure by checking for syntax errors **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 databases; the 'Graph' refers to the application data graph it models. - The GraphQL specification is maintained by the GraphQL Foundation under the Linux Foundation, which took over governance in 2019. *Tags:* graphql, format, prettify, query --- ### [JSON Schema Generator](https://devtools.surf/tools/json-schema-generator/) Generate JSON Schema from a sample JSON object **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 - Documenting API contracts by inferring schemas from examples **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 **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 (formerly Swagger) to define request and response body structures. - The $ref keyword in JSON Schema enables schema composition, allowing reuse of type definitions across an entire API specification. *Tags:* json, schema, generate, validate --- ### [TypeScript Interface Generator](https://devtools.surf/tools/ts-interface-generator/) Generate TypeScript interfaces from JSON data **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 files - Converting JSON fixture data into reusable interface contracts **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 **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 architect of C#, making him one of the most influential language designers. - TypeScript became the 4th most popular language on GitHub by 2023, up from 10th place in 2017. *Tags:* typescript, interface, generate, json --- ### [Mock Data Generator](https://devtools.surf/tools/mock-data-generator/) Generate fake names, emails, addresses, and more in JSON or CSV **Tips:** - Build your schema by clicking field type chips - Rename columns by editing the field names - Export as JSON, CSV, or SQL INSERT statements **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 by its creator Marak Squires in January 2022 in protest over open-source funding — the community forked it as @faker-js/faker. - Synthetic data generation is now a $1.5 billion industry. Companies use it not just for testing but to train ML models when real data has privacy constraints. *Tags:* mock, fake, data, generate, faker --- ### [QR Code Generator](https://devtools.surf/tools/qr-code-generator/) Generate QR codes from text or URLs **Tips:** - Works with URLs, text, WiFi credentials, or vCards - Customize foreground and background colors - Adjust size up to 800px for print quality **Fun facts:** - QR codes were invented in 1994 by Denso Wave for tracking car parts in manufacturing. They can store up to 7,089 numeric characters. - QR codes have built-in error correction — they can still be read even when up to 30% of the code is damaged or obscured. - The largest QR code ever created covered 36,100 square meters on a rooftop in China and was scannable from an airplane. *Tags:* qr, code, generate, barcode --- ### [Chmod Calculator](https://devtools.surf/tools/chmod-calculator/) Convert between symbolic and numeric Unix file permissions **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 numeric - Configuring web server file permissions for uploads directories **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 permissions **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 in swap space for faster loading; today it prevents file deletion in shared directories. - The SUID bit (4000) allows a program to run with the permissions of the file owner, which is how the passwd command can modify /etc/shadow. *Tags:* chmod, permissions, unix, linux --- ### [.gitignore Builder](https://devtools.surf/tools/gitignore-builder/) Build a .gitignore from curated language/framework templates **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 IDE-specific files are excluded across team members **Tips:** - Select your language and framework to get a tailored template - Combine multiple templates for monorepo setups - Preview the generated .gitignore before downloading **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 version 1.5.0 (February 2007); before that, developers used .git/info/exclude or global excludes. - The most common .gitignore mistake is adding node_modules/ after it has already been committed — git rm --cached is required to fix it. *Tags:* gitignore, git, template --- ### [Unix Cron Visualizer](https://devtools.surf/tools/unix-cron-visualizer/) Visualize cron schedules as a timeline of next executions **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 - Document recurring task schedules for operations runbooks **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 **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 minute, executing a job 525,600 times per year. - The @reboot special string in cron, which runs a job once at startup, was a Vixie cron extension and is not part of the POSIX standard. *Tags:* cron, visualize, timeline, schedule --- ### [Chmod → English](https://devtools.surf/tools/chmod-to-english/) Convert numeric chmod values to human-readable permission descriptions **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 permissions match security policies **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 get the number **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 is often called 'the lazy developer's chmod' by sysadmins. - The sticky bit (1000) was originally used to keep program text in swap space for faster loading; today it prevents users from deleting others' files in /tmp. *Tags:* chmod, permissions, english, readable --- ### [Privacy Policy Generator](https://devtools.surf/tools/privacy-policy-generator/) Generate a privacy policy from your app name, URL, and data practices **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 analytics - Producing a GDPR-ready policy for a European market expansion **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 integrations **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, effective January 1, 2020, was the first comprehensive US state privacy law, giving consumers the right to know what data is collected about them. - The average privacy policy is around 4,000 words long and takes roughly 18 minutes to read, according to a 2019 study by Comparitech. *Tags:* privacy, policy, legal, gdpr --- ### [Crontab Generator](https://devtools.surf/tools/crontab-generator/) Build cron schedules visually with dropdowns for each field **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 - Creating monitoring check schedules for DevOps alerting systems **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 **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' meaning time, fitting its role as a time-based job scheduler. - The most common cron mistake is forgetting that the day-of-week field uses 0 for Sunday in most implementations, though some use 7. *Tags:* crontab, cron, schedule, visual --- ### [Random String Generator](https://devtools.surf/tools/random-string-generator/) Secure random strings — hex, base64, base58, symbols, custom length **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 **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() uses the OS CSPRNG (/dev/urandom on Linux, BCryptGenRandom on Windows), making browser-generated random strings cryptographically secure. - A random 22-character base62 string has ~131 bits of entropy — comparable to a UUID v4's 122 bits but without the dashes and fixed format. *Tags:* random, string, generate --- ### [Fake Name Generator](https://devtools.surf/tools/fake-name-generator/) Bulk fake first+last names for test fixtures — famous tech names pool **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 - Privacy researchers replacing PII in production data exports **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 **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. Census Bureau's 2010 Frequently Occurring Surnames list contains 162,253 unique last names — the basis for many fake name generators. - John Smith is the most common full name in the English-speaking world, appearing in test databases so often that some systems explicitly filter it out. *Tags:* fake, name, test --- ### [Fake Address Generator](https://devtools.surf/tools/fake-address-generator/) Bulk US-style fake addresses for seeding dev databases **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 environments displaying realistic shipping forms **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 **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 codes were introduced by the USPS in 1963; the acronym stands for 'Zone Improvement Plan' and the five-digit system divided the country into 43,000 zones. - The longest street name in the United States is 'Jean Baptiste Point du Sable Lake Shore Drive' in Chicago, renamed in 2021 at 45 characters. *Tags:* fake, address, seed --- ### [Fake Phone Generator](https://devtools.surf/tools/fake-phone-generator/) Bulk fake phone numbers in US / UK / E.164 formats **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 testers generating thousands of unique phone entries **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 **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 555-0199) is reserved by NANPA specifically for fictional use in movies, TV, and testing, ensuring no real subscriber is called. - The first transatlantic phone call was made on January 7, 1927, between New York and London, costing $75 for three minutes — about $1,300 in today's money. *Tags:* fake, phone --- ### [Test Credit Card Generator](https://devtools.surf/tools/test-credit-card-generator/) Luhn-valid dev cards for Visa/MC/Amex/Discover/JCB/Diners **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 production payment processors — you'll get blocklisted **Fun facts:** - The Luhn algorithm was patented in 1960 by Hans Peter Luhn of IBM. The patent expired in 1977 which is why every payment system uses it now. - Credit card numbers aren't random — the first 6 digits (IIN/BIN) identify the issuing bank, and the last digit is always the Luhn check digit. - Stripe's test card number 4242 4242 4242 4242 is so famous it has its own Wikipedia mention and is occasionally found hardcoded in production systems. *Tags:* credit-card, luhn, test --- ### [Test IBAN Generator](https://devtools.surf/tools/iban-test-generator/) Synthesize IBANs with valid ISO 13616 checksums per country **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 - Compliance testers verifying SEPA transaction routing logic **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 **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 Jordan and Malta at 30 characters, while Norway has the shortest at just 15 characters. - The check digit calculation uses modular arithmetic (mod 97) — the same algorithm can validate an IBAN in a single division operation with 100% reliability. *Tags:* iban, test, banking --- ### [Test VIN Generator](https://devtools.surf/tools/vin-generator/) Random 17-char VINs with valid position-9 check digit **Use cases:** - Auto dealership devs testing inventory management systems - Insurance app QA validating vehicle lookup integrations - DMV software teams generating test registration records - Automotive API builders seeding mock vehicle databases **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 **Fun facts:** - The modern 17-character VIN standard (ISO 3779) was adopted in 1981 by the U.S. NHTSA, replacing a patchwork of manufacturer-specific numbering systems. - Position 9 of every VIN is a check digit computed using a weighted sum and modulo-11 algorithm — it's the only position that can be the letter X (representing 10). - The letters I, O, and Q are permanently excluded from VINs to avoid confusion with the digits 1 and 0. *Tags:* vin, vehicle, test --- ### [Barcode Generator](https://devtools.surf/tools/barcode-generator/) Generate CODE-128 barcode PNGs from any text — client-side canvas **Use cases:** - Warehouse devs generating asset tracking labels - Retail teams creating product barcode sheets for inventory - Event organizers printing scannable ticket barcodes - Library systems generating book identification labels **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 **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 product scanned with a UPC barcode was a 10-pack of Wrigley's Juicy Fruit gum at a Marsh supermarket in Troy, Ohio on June 26, 1974. - CODE-128, created by Computer Identics in 1981, encodes data at the highest density of any 1D barcode — up to 50% more compact than Code 39. *Tags:* barcode, code128 --- ### [Data URI Generator](https://devtools.surf/tools/data-uri-generator/) Wrap any text (or file contents) into a base64 data: URI **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 external files - Single-page app devs bundling tiny assets into JavaScript **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 **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), and even then limited them to 32KB — a restriction that persisted for years. - A base64-encoded data URI is approximately 33% larger than the original binary file because base64 encodes every 3 bytes as 4 ASCII characters. *Tags:* data-uri, base64 --- ### [API Key Generator](https://devtools.surf/tools/api-key-generator/) Secure random API keys with prefix (sk_, pk_, whsec_) — base62 or hex **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 users - Security teams rotating compromised keys with fresh replacements **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 **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 has approximately 190 bits of entropy, making brute-force attacks computationally infeasible even with modern hardware. - GitHub's secret scanning program, launched in 2018, checks every public commit against known API key formats and has revoked millions of accidentally exposed keys. *Tags:* api-key, secret --- ### [Bcrypt Demo Hash](https://devtools.surf/tools/bcrypt-generator/) Generate a bcrypt-style hash preview — configurable cost rounds (4-14) **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 - Technical writers documenting password storage implementations **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 **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 increment of the bcrypt cost factor doubles the computation time: cost 10 takes ~100ms, cost 12 takes ~400ms, and cost 14 takes ~1.6 seconds on typical hardware. - Bcrypt internally truncates passwords at 72 bytes — a limitation that led to the development of alternatives like Argon2 for handling longer passphrases. *Tags:* bcrypt, hash, password --- ### [Argon2 Demo Hash](https://devtools.surf/tools/argon2-generator/) Generate an argon2id PHC-formatted hash preview for docs / fixtures **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 production - Compliance officers verifying password hashing meets OWASP standards **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 **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 variants: Argon2i (side-channel resistant) and Argon2d (GPU-resistant), offering the best protection against both attack classes. - OWASP recommends Argon2id with a minimum of 19MB memory, 2 iterations, and 1 degree of parallelism as of their 2023 password storage cheat sheet. *Tags:* argon2, hash --- ### [Shield Badge Generator](https://devtools.surf/tools/shield-badge-generator/) Build Shields.io README badges — label, message, color, logo, style **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 landing pages - Developers branding side projects with custom labeled badges **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 **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 dozens of ad-hoc badge services with a single, consistent specification. - Shields.io supports over 300 service integrations — from npm download counts to code coverage — all rendered as SVGs for crisp display at any resolution. *Tags:* badge, shield, readme --- ### [README.md Generator](https://devtools.surf/tools/readme-md-generator/) Starter README template with title, description, install, usage, license **Use cases:** - New project creators bootstrapping documentation from scratch - Open-source contributors standardizing project landing pages - Hackathon teams quickly generating presentable project docs - Engineering managers templating README standards across teams **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 upfront **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 extension for Markdown was popularized by GitHub around 2008; John Gruber and Aaron Swartz created Markdown in 2004 as a human-readable text format. - A 2018 study by GitHub found that repositories with README files receive 30% more contributions on average than those without one. *Tags:* readme, markdown, docs --- ### [.editorconfig Generator](https://devtools.surf/tools/editorconfig-generator/) Tab/space indent, EOL, charset rules — one config for every editor **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 language - DevOps engineers standardizing line endings for cross-OS teams **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 **Fun facts:** - EditorConfig was created by Trey Hunner in 2011 to solve the 'tabs vs. spaces' debate across teams by letting the repository dictate formatting rules. - Over 30 editors and IDEs natively support .editorconfig files, including VS Code (built-in since 2019), Vim, Emacs, Sublime Text, and all JetBrains IDEs. - The EditorConfig specification intentionally keeps its feature set minimal — it handles indent style, size, EOL, charset, and trailing whitespace, nothing more. *Tags:* editorconfig, indent --- ### [.prettierrc Generator](https://devtools.surf/tools/prettier-config/) Build a Prettier config — semi, quote style, trailing comma, width **Use cases:** - Teams bootstrapping consistent formatting for new TypeScript projects - Open-source maintainers adding opinionated format configs to repos - Senior devs aligning prettier rules across a monorepo - Code reviewers eliminating style debates with automated formatting **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 **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 intentionally offers minimal configuration options — its philosophy is that arguments about code style waste more time than any particular style saves. - Prettier supports 17 languages out of the box including JavaScript, TypeScript, CSS, HTML, JSON, Markdown, YAML, and GraphQL. *Tags:* prettier, format --- ### [.eslintrc Generator](https://devtools.surf/tools/eslint-config/) ESLint config for Node / TypeScript / React — commonjs output **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 generation - CI pipeline builders adding auto-generated lint configs to repos **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 **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 npm packages, making it the most extensible JavaScript linting tool ever built. - The migration from .eslintrc to eslint.config.js (flat config) began in ESLint v8.21 (2022) and became the default in v9, the biggest API change in the project's history. *Tags:* eslint, lint --- ### [CHANGELOG.md Generator](https://devtools.surf/tools/changelog-md-generator/) Keep a Changelog starter with [Unreleased] + first version section **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 all repositories - Product managers tracking feature additions between releases **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 **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), which changelogs typically reference, was formalized by Tom Preston-Werner (GitHub co-founder) in his SemVer 2.0.0 specification in 2013. - Conventional Commits, a specification for structured commit messages that auto-generate changelogs, was first published in 2017 and is used by Angular, Vue, and Electron. *Tags:* changelog, semver --- ### [LICENSE File Generator](https://devtools.surf/tools/license-file-generator/) MIT, Apache 2.0, BSD 3-Clause, GPL 3.0, Unlicense — year + holder **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 to also be GPL (copyleft) **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. Linux chose GPL, while FreeBSD chose BSD — and Apple built macOS on top of FreeBSD's permissive code. - The WTFPL (Do What The F*** You Want To Public License) is a real OSI-recognized license created by French programmer Sam Hocevar in 2004. *Tags:* license, mit, apache --- ### [Dockerfile Generator](https://devtools.surf/tools/dockerfile-generator/) Multi-stage Dockerfile for Node / Python / Go — production-ready **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 **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 you can download an image with just curl commands — no Docker client needed. - Alpine Linux, the most popular Docker base image, is only 5 MB because it uses musl libc and BusyBox instead of glibc and GNU coreutils. *Tags:* docker, dockerfile --- ### [docker-compose.yml Generator](https://devtools.surf/tools/docker-compose-generator/) Wire up api + postgres + redis + mongo into a single compose file **Use cases:** - Backend devs scaffolding local development environments quickly - Microservice teams defining multi-container app stacks - DevOps engineers creating reproducible staging environments - Bootcamp students setting up full-stack projects without manual installs **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 **Fun facts:** - Docker Compose was originally a separate Python project called Fig, created by Orchard Laboratories in 2013; Docker Inc. acquired it in 2014 and renamed it. - Docker Compose V2, rewritten in Go and integrated as a Docker CLI plugin, replaced the standalone docker-compose binary in 2022. - The docker-compose.yml format has gone through three major specification versions (1, 2, and 3), with version 3 optimized for Docker Swarm orchestration. *Tags:* docker-compose, services --- ### [Makefile Generator](https://devtools.surf/tools/makefile-generator/) Language-aware Makefile for Node / Python / Go — install/dev/test/build **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 repos providing a unified build interface across languages **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 **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 used implementation, was written by Richard Stallman and Roland McGrath in 1988 and remains the default build tool on most Unix systems. - Makefiles require actual tab characters for recipe indentation — spaces will cause a syntax error. This design decision from 1976 still trips up developers today. *Tags:* makefile, build --- ### [.gitignore Templates](https://devtools.surf/tools/gitignore-templates/) Combine templates — node, python, go, rust, java, macos, windows, vscode **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 files from leaking - DevOps engineers excluding build artifacts and environment files **Tips:** - Combine multiple templates for polyglot repositories - Include OS-specific templates like macOS and Windows - Add IDE templates (vscode, jetbrains) for editor artifacts **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 was added in Git 1.5.0 (2007); before that, developers had to use .git/info/exclude or core.excludesfile for ignore patterns. - The gitignore pattern syntax supports negation (!) allowing you to ignore everything in a directory except specific files — a feature many developers don't know exists. *Tags:* gitignore, templates --- ### [Passphrase Generator (EFF)](https://devtools.surf/tools/passphrase-generator/) Memorable multi-word passphrases from a 300-word EFF-style list **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 **Fun facts:** - xkcd #936 'correct horse battery staple' popularized passphrases. The EFF later published the modern 7776-word Diceware list used by everyone today. - The original Diceware method (1995) used physical dice rolls to select words — 5 dice per word, giving exactly 7776 (6^5) possible words per position. - A 6-word Diceware passphrase has ~77 bits of entropy, roughly equivalent to a 12-character random password with mixed case, digits, and symbols. *Tags:* passphrase, password, eff --- ## Color ### [Color Converter](https://devtools.surf/tools/color-converter/) Convert between HEX, RGB, HSL, OKLCH, and Tailwind colors **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 **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 HTML 2.0 (1995). The original HTML spec only supported 16 named colors like 'aqua' and 'fuchsia'. - The OKLCH color space, now supported in CSS, is perceptually uniform — meaning equal numeric steps produce equal perceived color differences. *Tags:* color, hex, rgb, hsl, convert --- ### [Color Palette Generator](https://devtools.surf/tools/color-palette-generator/) Generate complementary, analogous, and triadic color palettes **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 theme colors - Creating consistent color schemes for data visualization charts **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 **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 Herbert, standardized color communication with over 1,800 spot colors. - Approximately 8% of men and 0.5% of women have some form of color vision deficiency, affecting about 300 million people worldwide. *Tags:* color, palette, generate, scheme --- ### [Contrast Checker](https://devtools.surf/tools/contrast-checker/) Check WCAG AA/AAA contrast ratio between two colors **Use cases:** - Verifying brand colors meet WCAG accessibility requirements - Testing text readability on colored backgrounds for UI designs - Auditing existing websites for accessibility compliance - Choosing accessible link colors that stand out from body text **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 **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 luminance, which weights green at 71.52%, red at 21.26%, and blue at only 7.22% to match human vision. - An estimated 1.3 billion people worldwide live with some form of visual impairment, making contrast compliance a significant accessibility concern. *Tags:* contrast, wcag, accessibility, a11y --- ### [Gradient Generator](https://devtools.surf/tools/gradient-generator/) Design CSS/SVG gradients and export as CSS, SVG, or Figma tokens **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 for email template backgrounds **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 **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 logo, designed by Ian Spalter in 2016, uses a radial gradient blending purple, magenta, orange, and yellow. - SVG gradients support spreadMethod attributes (pad, reflect, repeat) that CSS gradients do not, offering more tiling flexibility. *Tags:* gradient, css, svg, figma --- ### [Color Contrast Matrix](https://devtools.surf/tools/color-contrast-matrix/) Test WCAG contrast ratios for every color pair in a palette **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 dark mode color combinations meet contrast requirements **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 docs **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 people worldwide have color vision deficiency, making contrast ratios critical for inclusive design. - The contrast ratio formula compares relative luminance values using a formula defined in WCAG 2.0, ranging from 1:1 (no contrast) to 21:1 (black on white). *Tags:* contrast, wcag, matrix, accessibility --- ### [Hex → Tailwind](https://devtools.surf/tools/colors-to-tailwind/) Map a hex/rgb color to the nearest Tailwind class **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 migration - Ensuring color consistency when integrating third-party design assets **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 palette **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 palette contains 22 color families with 11 shades each (50-950), totaling 242 named color values. - The Tailwind color palette was redesigned from scratch for v2.0 (2020) by Steve Schoger, using perceptually uniform color spacing for better aesthetics. *Tags:* color, tailwind, nearest --- ### [Gradient → Code](https://devtools.surf/tools/gradient-to-code/) Translate a CSS gradient into SwiftUI, Android, and Flutter 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 and mobile apps - Translating designer-provided CSS into Android Jetpack Compose 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 side by side **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 was introduced with SwiftUI at WWDC 2019, replacing the more verbose CAGradientLayer from Core Animation. - Flutter uses a Gradient class that maps closely to the CSS model, but its coordinate system uses Alignment values from -1.0 to 1.0 instead of angles. *Tags:* gradient, swiftui, flutter --- ### [Color Name Finder](https://devtools.surf/tools/color-name-finder/) Closest CSS named color to any hex (Euclidean in RGB) **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 identifying color names for documentation - Developers choosing memorable color names for theming and design tokens **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 approximations **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 specification (1993) included only 16 named colors inherited from the Windows VGA palette — the full 148 list was standardized in CSS3. - The Euclidean distance in RGB space is not perceptually uniform — two colors with the same numeric distance can look very different to the human eye. *Tags:* color, css, name --- ### [Color Scheme Generator](https://devtools.surf/tools/color-scheme-generator/) Complementary, analogous, triadic, tetradic & split-comp schemes from a base color **Tips:** - Accepts #hex, rgb(), and hsl() inputs - Shows 10 schemes: complementary, analogous ±30, triadic, tetradic, split-complement - Hue rotation keeps saturation and lightness constant **Fun facts:** - Color theory from Isaac Newton's 1704 'Opticks' gave us the first color wheel. The 12-segment wheel we use today was refined by Johann Wolfgang von Goethe in 1810. - The complementary color scheme (opposite sides of the wheel) creates maximum contrast — it's why blue/orange is the most common movie poster color combination. - Triadic color schemes are used by nearly every major fast food brand (McDonald's: red/yellow, Burger King: red/yellow/blue) because they are simultaneously vibrant and balanced. *Tags:* color, scheme, palette --- ### [Tailwind Color Palette](https://devtools.surf/tools/tailwind-color-palette/) Full Tailwind CSS v3 color palette — 18 families × 11 shades, searchable **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 **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 (Refactoring UI) — each shade was individually adjusted rather than algorithmically generated. - The 500 shade in each Tailwind family is designed to be the 'base' color that works on both white and dark backgrounds without accessibility issues. *Tags:* tailwind, palette, colors --- ### [Material Color Palette](https://devtools.surf/tools/material-color-palette/) Google Material 2014 palette — families with 50–900 + A100–A700 shades **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 usage across Material-based products - Frontend developers copying hex values for Material UI component themes **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 value for immediate use in code **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 Matias Duarte, who previously designed webOS for Palm — the card-based UI metaphor carried over from Palm to Android. - The Material palette was scientifically calibrated so that the 500 shade of each color family serves as the primary brand color with guaranteed WCAG contrast ratios. *Tags:* material, palette, google --- ### [CSS Named Colors](https://devtools.surf/tools/css-named-colors/) All 147 CSS named colors with hex values — instantly searchable **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 browsing the complete named palette - Technical writers referencing official color names in style documentation **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 colors you might not know exist **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' (#663399) was added to CSS in 2014 as a tribute to Rebecca Meyer, the six-year-old daughter of CSS expert Eric Meyer, who passed away from brain cancer. - Some CSS named colors are confusingly different from their real-world namesakes — 'darkgray' (#A9A9A9) is actually lighter than 'gray' (#808080) in the CSS specification. *Tags:* css, named, colors --- ### [Color Shades & Tints](https://devtools.surf/tools/color-shades-tints/) Generate 9 darker shades + 9 lighter tints from any base color **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 consistent lightness ramps for UI tokens - Accessibility engineers testing contrast ratios across shade variations **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 states and UI depth layers **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 generates 10-step shade scales (50-950) for each color using a perceptual lightness curve, not simple linear interpolation with black and white. - The human eye can distinguish approximately 10 million different colors, but most design systems use only 8-12 lightness steps per hue to maintain visual consistency. *Tags:* shade, tint, palette --- ### [Complementary Colors](https://devtools.surf/tools/complementary-colors/) Find the opposite color on the wheel — 180° hue rotation **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 dynamic compositions - Web developers creating attention-grabbing call-to-action button 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 against your primary brand color **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 stare at a red square for 30 seconds then look at white paper, you see a cyan afterimage — your eyes naturally produce the complementary color through cone fatigue. - The color wheel used for complementary colors was first published by Sir Isaac Newton in 1704 in 'Opticks,' mapping the visible spectrum into a circle. *Tags:* complementary, color, wheel --- ### [Analogous Colors](https://devtools.surf/tools/analogous-colors/) Colors adjacent on the wheel (±30°) — gentle, harmonious palettes **Use cases:** - UI designers creating soothing, cohesive color palettes for apps - Brand designers selecting harmonious multi-color identity systems - Illustrators choosing adjacent hues for naturalistic landscape art - Web designers building gradient backgrounds from neighboring 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 neutral gray for balanced page layouts **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 Art of Color' systematized analogous harmony as one of seven fundamental color contrast types taught at the Bauhaus school. - Studies in environmental psychology show that analogous color schemes in interior design reduce perceived stress by 12-18% compared to complementary high-contrast schemes. *Tags:* analogous, color, palette --- ### [Triadic Colors](https://devtools.surf/tools/triadic-colors/) Three colors equally spaced on the wheel (120°) — vivid & balanced **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 distinct but harmonious slide colors - Poster artists selecting bold triadic combinations for maximum visual impact **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 color dominates and others accent **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 'Composition' paintings from the 1920s use a near-triadic scheme of red, yellow, and blue — the three primary colors in traditional theory. - The Superman costume uses a triadic color scheme (red, blue, yellow), deliberately chosen in 1938 by Joe Shuster to stand out on newsprint comic pages. *Tags:* triadic, color, palette --- ### [Tetradic Colors](https://devtools.surf/tools/tetradic-colors/) Four colors at 90° — two complementary pairs for rich palettes **Use cases:** - Dashboard designers needing four distinct category colors - Brand teams creating multi-color identity systems with rich variety - Data visualization engineers selecting four balanced chart series colors - Game designers choosing four player or faction colors for multiplayer UIs **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 richest variety of any color harmony type **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 model uses a near-tetradic relationship: cyan, magenta, yellow, and black occupy roughly 90-degree intervals on the hue wheel (plus black for depth). - Josef Albers' 1963 book 'Interaction of Color' demonstrated how tetradic color relationships shift perception — the same color looks different depending on its four-color context. *Tags:* tetradic, square, color --- ### [Monochromatic Colors](https://devtools.surf/tools/monochromatic-colors/) Single-hue palette — nine lightness steps at the same saturation **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 within a single hue - Minimalist UI designers crafting clean interfaces with tonal variation **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 complete set of design tokens for a single brand color **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 2013 heavily featured monochromatic UI elements, sparking a trend that influenced flat design systems across the entire tech industry. - The Munsell color system (1905) was the first to systematically separate hue, value (lightness), and chroma — making monochromatic scales a formal concept in color science. *Tags:* monochromatic, palette --- ### [Random Color Generator](https://devtools.surf/tools/random-color-generator/) Bulk random colors (hex/rgb/hsl) — great for placeholders & mocks **Tips:** - Pass a count 1–200 - Each color is shown in hex + rgb + hsl - Great for placeholder palettes in design mockups **Fun facts:** - True random RGB generation produces muddy greens and browns most of the time. Designers use 'golden ratio' hue spacing for visually pleasing random palettes. - The golden ratio method for random colors uses a hue increment of ~137.5° (360° / φ), which maximizes the visual distance between consecutively generated colors. - There are only ~17 million possible hex colors (#000000–#FFFFFF), but the human eye can only distinguish about 1 million of them under ideal conditions. *Tags:* random, color, generator --- ### [Color Mixer](https://devtools.surf/tools/color-mixer/) Blend 2+ colors using perceptual square-mean RGB (not linear RGB mud) **Use cases:** - Designers blending brand colors to create harmonious midtones - Frontend developers computing intermediate colors for gradient steps - Artists finding the perceptual average of multiple reference colors - Design system engineers generating token colors from primary palette blends **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 combinations to find unexpected new hues **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. - The science of color mixing dates to 1855 when James Clerk Maxwell demonstrated that any color could be created by mixing three primary lights in different proportions. - Perceptual color spaces like CIELAB (created in 1976) were specifically designed so that equal numerical distances correspond to equal perceived color differences. *Tags:* mix, blend, color --- ### [Color Lighten / Darken](https://devtools.surf/tools/color-lighten-darken/) Shift a color's lightness by +/- N%, preserving hue & saturation **Use cases:** - Frontend developers creating hover and focus state color variants - Designers generating consistent light/dark mode color adjustments - Brand teams producing accessible contrast pairs from a single base color - CSS developers replacing SASS lighten/darken with pre-computed hex values **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 lightening or darkening a base color **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 more sensitive to lightness changes than to hue changes — a 10% lightness shift is far more noticeable than a 10-degree hue rotation. - The Web Content Accessibility Guidelines (WCAG 2.1) require a minimum 4.5:1 contrast ratio, which typically means at least a 40% lightness difference between text and background. *Tags:* lighten, darken, color --- ### [Color Temperature (Kelvin)](https://devtools.surf/tools/color-kelvin-converter/) Convert 1000–40000K to an RGB approximation (Tanner Helland formula) **Use cases:** - Photographers simulating white balance adjustments in editing tools - Lighting designers previewing LED color temperatures before purchasing - Game developers implementing dynamic time-of-day lighting systems - Smart home engineers mapping color temperature sliders to RGB LED values **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 Helland formula for accurate approximation **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. - Standard daylight is defined as 6504K (CIE Illuminant D65), which is the reference white point used in the sRGB color space and virtually all computer monitors. - Tanner Helland published his color temperature algorithm in 2012, fitting a curve to CIE data with less than 1% error — it's now used in hundreds of open-source projects. *Tags:* kelvin, temperature, color --- ### [Pantone Reference](https://devtools.surf/tools/pantone-reference/) Search common Pantone PMS spot colors with sRGB approximations **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 **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 announced every December since 2000. The selection process involves a secret committee that analyzes trends across fashion, film, and technology. - In 2022, Adobe removed Pantone colors from Photoshop and Illustrator behind a paywall — designers were furious when their files suddenly showed black where Pantone colors used to be. *Tags:* pantone, pms, spot --- ## Networking ### [IP Address Lookup](https://devtools.surf/tools/ip-address-lookup/) Parse and validate IPv4/IPv6 addresses and CIDR ranges **Use cases:** - Validating IP addresses in firewall rule configurations - Calculating subnet ranges for network infrastructure planning - Parsing CIDR blocks for cloud security group definitions - Verifying IPv6 address format in DNS AAAA record entries **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 **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) addresses, enough for roughly 670 quadrillion addresses per square millimeter of Earth's surface. - The private IP ranges 10.0.0.0/8, 172.16.0.0/12, and 192.168.0.0/16 were reserved by RFC 1918 in 1996. *Tags:* ip, address, cidr, validate --- ### [HTTP Status Reference](https://devtools.surf/tools/http-status-reference/) Quick lookup of HTTP status codes and their meanings **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 testing - Training junior developers on proper HTTP status code usage **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 responses **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 April Fools' joke RFC 2324 in 1998, defining the Hyper Text Coffee Pot Control Protocol. - Status code 451 'Unavailable for Legal Reasons' was approved in 2015, named after Ray Bradbury's novel Fahrenheit 451. *Tags:* http, status, code, reference --- ### [DNS Record Explainer](https://devtools.surf/tools/dns-record-explainer/) Explain A, AAAA, CNAME, MX, TXT, SRV and other DNS records **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 - Debugging TXT record syntax for SPF and DKIM email authentication **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 **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 updates and was distributed via FTP; by 1983 it had become unmanageable with the growing internet. - The longest allowed DNS name is 253 characters total, with each label limited to 63 characters, as defined in RFC 1035. *Tags:* dns, record, explain --- ### [WebSocket Frame Decoder](https://devtools.surf/tools/websocket-frame-decoder/) Decode WebSocket frame headers and payloads from hex **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 implementations - Inspecting binary protocol messages in IoT device communication **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 compliance **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 2 bytes for small payloads, compared to HTTP's typical 700+ bytes of headers per request. - The masking requirement for client-to-server frames was added to prevent cache poisoning attacks on transparent HTTP proxies. *Tags:* websocket, ws, frame, decode --- ### [Port Reference Lookup](https://devtools.surf/tools/port-reference-lookup/) Look up common services for any TCP/UDP port number **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 connection configuration - Looking up registered ports for microservice deployment planning **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 **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, while port 443 was assigned to HTTPS in 1994. - There are 65,535 available TCP and UDP ports per IP address, with ports 49152-65535 designated as dynamic/ephemeral ports. *Tags:* port, tcp, udp, reference --- ### [MIME Type Lookup](https://devtools.surf/tools/mime-type-lookup/) Convert between file extensions and MIME types **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 - Looking up media types for Content-Type negotiation in APIs **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 **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 default for unknown binary files, effectively meaning 'download this, don't display it.' - There are over 1,500 registered MIME types with IANA, but application/json wasn't officially registered until RFC 4627 in 2006. *Tags:* mime, extension, content-type --- ### [Certificate Decoder](https://devtools.surf/tools/cert-decoder/) Decode X.509 PEM certificates into readable fields **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 fields - Auditing intermediate certificate chain completeness **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 **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 made HTTPS free for everyone. - The first SSL certificate was issued by Netscape in 1994, and a single certificate could cost over $1,000 per year at that time. *Tags:* cert, x509, pem, ssl, tls --- ### [HPKP Generator](https://devtools.surf/tools/hpkp-generator/) Generate HTTP Public Key Pinning headers from a certificate **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 monitoring - Studying deprecated security headers for compliance documentation **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 production **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 to deploy public key pinning in 2011, using a proprietary mechanism before HPKP was standardized. - Certificate Transparency (CT) logs, proposed by Google in 2013, largely replaced HPKP as a more practical approach to preventing mis-issued certificates. *Tags:* hpkp, pin, security, header --- ### [User-Agent Parser](https://devtools.surf/tools/user-agent-parser/) Parse browser, OS, device from a User-Agent string **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 - Parsing User-Agent headers for conditional feature detection **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 patterns **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 'Mozilla/5.0' and 'Safari' despite being neither, a legacy of the 'browser compatibility wars.' - Google proposed freezing the User-Agent string in 2020 with User-Agent Client Hints (UA-CH) to reduce fingerprinting surface. *Tags:* user-agent, browser, os, parse --- ### [CORS Header Tester](https://devtools.surf/tools/cors-header-tester/) Analyze CORS response headers for misconfigurations and security issues **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 setup before connecting a new frontend domain **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 misconfigurations **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 legacy servers that never expected cross-origin requests from browsers. - Setting Access-Control-Allow-Origin to '*' with credentials is forbidden by the spec — browsers silently reject such responses. *Tags:* cors, headers, security, cross-origin --- ### [CIDR Calculator](https://devtools.surf/tools/cidr-calculator/) Calculate network address, broadcast, host range from CIDR notation **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 allocation schemes for multi-tenant environments **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 **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 one IP address, while a /0 represents the entire IPv4 address space of 4,294,967,296 addresses. - The last unallocated IPv4 /8 blocks were distributed by IANA on February 3, 2011, marking the official exhaustion of the IPv4 free pool. *Tags:* cidr, subnet, network, ip --- ### [HTTP Header Analyzer](https://devtools.surf/tools/http-header-analyzer/) Analyze HTTP headers for security, caching, and best practices **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 information leakage in Server and X-Powered-By headers **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 **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 6648 in 2012, but X-Forwarded-For and X-Requested-With remain ubiquitous. - The Strict-Transport-Security (HSTS) header was standardized in RFC 6797 in 2012 after being pioneered by PayPal to prevent SSL stripping attacks. *Tags:* http, header, security, analyze --- ### [MAC Address Lookup (OUI)](https://devtools.surf/tools/mac-address-lookup/) Identify the manufacturer from a MAC address OUI prefix **Use cases:** - Network admins identifying unknown devices on corporate networks - Security analysts tracing device manufacturers in traffic logs - IoT developers verifying hardware vendor assignments - Help desk staff identifying device types from DHCP lease tables **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 **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, providing 281 trillion unique addresses — the format was defined in the original 1980 Ethernet specification by DEC, Intel, and Xerox. - The 'locally administered' bit (second least significant bit of the first byte) lets organizations create private MAC addresses — Apple uses this for Wi-Fi privacy starting with iOS 14. *Tags:* mac, address, oui, manufacturer --- ### [HTTP Method Reference](https://devtools.surf/tools/http-method-reference/) Quick reference for all HTTP methods with use cases and safety info **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 and PUT - Referencing allowed methods when configuring CORS headers **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 specific HTTP method **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 HTTP spec; it was added in March 2010 via RFC 5789 to support partial resource updates. - There are exactly 9 standard HTTP methods defined across the core RFCs: GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE, and PATCH. *Tags:* http, method, get, post, reference --- ### [Query String Builder](https://devtools.surf/tools/query-string-builder/) Build ?k=v&k=v strings from key=value lines — repeating keys OK **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 integrators assembling webhook callback URLs with metadata **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 **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 maximum URL length varies by browser — Chrome supports up to 2MB, while Internet Explorer famously limited URLs to 2,083 characters. - The '+' sign in query strings represents a space (from HTML form encoding), while %20 is the URI-standard encoding — this inconsistency still causes bugs today. *Tags:* query, url, params --- ### [Basic Auth Generator](https://devtools.surf/tools/basic-auth-generator/) Base64-encode user:pass into an HTTP Basic Authorization header **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 - Developers authenticating against private Docker registries **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 **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 transmits credentials as base64 — not encryption — meaning it's only secure over HTTPS. Despite this, it remains widely used for internal APIs and CI/CD webhooks. - The colon (:) is the only character that cannot appear in a Basic Auth username because it serves as the delimiter between username and password in the encoded string. *Tags:* auth, basic, http --- ### [Bearer Token Builder](https://devtools.surf/tools/bearer-token-builder/) Wrap a raw token in HTTP Authorization + curl + fetch snippets **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 integrations - DevOps engineers scripting authenticated health check requests **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 **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 header means 'whoever bears this token gets access' — similar to a bearer bond in finance, possession alone grants authority. - JSON Web Tokens (JWTs), the most common bearer token format, consist of exactly three base64url-encoded segments separated by dots — header, payload, and signature. *Tags:* auth, bearer, jwt --- ### [HTTP Header Builder](https://devtools.surf/tools/http-header-builder/) Compose request headers — output as curl flags and fetch options **Use cases:** - API developers composing complex request headers for testing - Frontend devs generating fetch options for authenticated requests - DevOps engineers building curl commands for monitoring scripts - Backend devs debugging CORS by inspecting required headers **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 **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- prefix for custom headers (X-Request-ID) was deprecated by RFC 6648 in 2012, but it remains so common that most developers still use it by convention. - HTTP/2, standardized in 2015, compresses headers using HPACK encoding, reducing header overhead by 85-88% compared to HTTP/1.1's plain-text format. *Tags:* http, headers --- ### [Subnet Calculator (v2)](https://devtools.surf/tools/subnet-calculator-v2/) CIDR → subnet mask, network, broadcast, first/last host, host count **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 **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) replaced the old Class A/B/C system in 1993 — without it, IPv4 addresses would have been exhausted by 2000. - The /32 subnet mask assigns exactly one IP address. It's commonly used in cloud environments for host routes and loopback interfaces. *Tags:* subnet, cidr, network --- ### [IPv6 Expander](https://devtools.surf/tools/ipv6-expander/) Expand ::abbreviated IPv6 and also emit the canonical compressed form **Use cases:** - Network engineers debugging abbreviated IPv6 addresses in configs - DevOps teams expanding shorthand addresses for firewall rules - Security analysts normalizing IPv6 addresses for log correlation - Students learning IPv6 address structure and compression rules **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 rules **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 :: abbreviation in IPv6 can only appear once per address and represents one or more groups of consecutive 16-bit zero blocks. - Google reported that IPv6 adoption reached 45% of its global traffic by 2024, up from just 1% in 2012 — adoption has accelerated due to mobile carrier deployments. *Tags:* ipv6, expand --- ### [IPv4 → IPv6 Mapper](https://devtools.surf/tools/ipv4-ipv6-converter/) IPv4-mapped IPv6 address (::ffff:a.b.c.d) — RFC 4291 representation **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 connections - Cloud architects planning IPv4-to-IPv6 migration strategies **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 **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 approach — running IPv4 and IPv6 simultaneously — was recommended by the IETF over tunneling, and most modern operating systems enable it by default. - As of 2024, approximately 40% of the top 1000 websites support IPv6, but over 99% of internet domains still have IPv4 addresses configured. *Tags:* ipv4, ipv6, mapped --- ### [RFC Lookup](https://devtools.surf/tools/rfc-lookup/) Search 25+ foundational RFCs by number, title, or topic **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 **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 Protocol' (HTCPCP) is an April Fools' joke that defined HTTP status code 418 'I'm a teapot' — which is now implemented in most web frameworks. - There are over 9,500 published RFCs as of 2024. They are never updated in place — a new RFC is published to obsolete or update an existing one. *Tags:* rfc, ietf, reference --- ### [Well-Known Ports](https://devtools.surf/tools/well-known-ports/) 40+ standard TCP/UDP ports — search by number, service, or keyword **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, 5173, 11434) **Fun facts:** - Port 22 (SSH) was registered by Tatu Ylönen 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 1991. Before that, the World Wide Web used port 2784 during its CERN development phase. - Ports 49152–65535 are 'ephemeral' ports — your OS randomly picks one for each outgoing TCP connection, which is why 'netstat' shows so many high-numbered ports. *Tags:* ports, iana, tcp --- ## PDF ### [Sample PDFs](https://devtools.surf/tools/sample-pdfs/) Download ready-made sample PDFs of various sizes and page counts **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 document processing pipelines with varied inputs **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 **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 standard (ISO 32000-1) in 2008, ending Adobe's proprietary control over the format after 15 years. - The smallest valid PDF file is approximately 67 bytes, containing just the minimal required PDF structure with no visible content. *Tags:* pdf, sample, download, placeholder --- ### [PDF Merger](https://devtools.surf/tools/pdf-merger/) Merge multiple PDFs into a single document **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 submission packets by combining forms and attachments **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 **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 1,000 pages of format details in ISO 32000-2:2020, making it one of the most complex document standards. - Adobe Acrobat, the first commercial PDF editor, was released on June 15, 1993, at a price of $695 for the full version. *Tags:* pdf, merge, combine --- ### [PDF Splitter](https://devtools.surf/tools/pdf-splitter/) Split a PDF by page ranges **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 - Break apart combined reports for department-specific distribution **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 **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 map of the Earth created by NASA, weighing in at over 2 gigabytes. - PDF 2.0 (ISO 32000-2, published in 2017) introduced page-level output intents, allowing different color profiles per page in a single document. *Tags:* pdf, split, pages --- ### [PDF Compressor](https://devtools.surf/tools/pdf-compressor/) Reduce PDF file size in the browser **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 submission-ready PDFs for size-restricted forms **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 **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 algorithm (RFC 1951), the same compression used in ZIP files and PNG images. - Gmail's attachment limit is 25MB, and Outlook's is 20MB — PDF compression is often the difference between a sendable and unsendable document. *Tags:* pdf, compress, size --- ### [Markdown → PDF](https://devtools.surf/tools/markdown-to-pdf/) Write or paste Markdown and export it as a downloadable 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 - Convert README files to PDF for offline distribution **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 **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 created by John MacFarlane in 2006, was one of the first tools to support Markdown-to-PDF conversion. - GitHub renders Markdown in over 100 million repositories, making it the most widely used lightweight markup language in the world. *Tags:* markdown, pdf, export, convert --- ### [Invoice Generator](https://devtools.surf/tools/invoice-generator/) Create professional invoices from line items and export as PDF **Use cases:** - Freelancers generating client invoices without accounting software - Creating one-off invoices for consulting side projects - Producing PDF receipts for expense report documentation - Small agencies billing clients with itemized project deliverables **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 **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' meaning 'things sent,' referring to a list of goods dispatched. - E-invoicing became mandatory in Italy in 2019, making it the first EU country to require all B2B invoices be electronic. *Tags:* invoice, pdf, billing, receipt --- ## 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) **Use cases:** - Backend developers testing API endpoints during development - QA engineers building reusable API test collections - DevOps teams debugging webhook integrations with history tracking - Frontend developers inspecting API responses before UI integration **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 faster **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 (Representational State Transfer) was defined by Roy Fielding in his 2000 doctoral dissertation at UC Irvine — Chapter 5 of his thesis describes the six REST constraints. - The curl command-line tool was first released by Daniel Stenberg on March 20, 1998 and now ships pre-installed on Windows 10, macOS, and most Linux distributions. *Tags:* rest, api, http, curl, collection, client, request, response --- ### [OpenAPI Viewer](https://devtools.surf/tools/openapi-viewer/) Browse endpoints, schemas, and operations from an OpenAPI 3 spec **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 new developers by visualizing the full API surface **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 **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 July 2017, introduced components/schemas to replace definitions, and added support for callbacks and links. - Over 75% of REST APIs in enterprise use OpenAPI specs for documentation, according to SmartBear's 2023 State of APIs report. *Tags:* openapi, swagger, api --- ### [Swagger to Collection JSON](https://devtools.surf/tools/swagger-to-collection/) Convert an OpenAPI / Swagger spec into a Collection JSON v2.1 payload **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 specs for use in automated API testing pipelines **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 **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 Chrome extension and grew to over 30 million users by 2023. - The OpenAPI-to-Postman converter must handle parameter serialization styles (matrix, label, form) that differ between the two formats. *Tags:* swagger, openapi, collection --- ### [package.json Analyzer](https://devtools.surf/tools/package-json-analyzer/) Detect duplicate dependencies and common issues **Use cases:** - Audit project dependencies for duplicate packages - Detect miscategorized dev vs production dependencies - Validate package.json structure before publishing to npm - Review dependency health during security audits **Tips:** - Upload package.json to detect duplicate or conflicting deps - Spot devDependencies that should be regular dependencies - Identify missing or malformed required fields **Fun facts:** - The package.json format was introduced by npm creator Isaac Z. Schlueter in 2010 and now defines the structure of over 3 million npm packages. - The 'left-pad' incident in March 2016 — where an 11-line npm package was unpublished and broke thousands of builds — led to npm preventing package un-publishing. - A typical React application's node_modules folder contains 800-1,200 packages, many of which are transitive dependencies the developer never directly installed. *Tags:* package.json, npm, analyze --- ### [Dockerfile Linter](https://devtools.surf/tools/dockerfile-linter/) Check Dockerfiles against common best practices **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 standards across engineering teams **Tips:** - Paste your Dockerfile to check against best practice rules - Fix common issues like missing USER directives - Identify inefficient layer ordering that slows builds **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 creates a new layer; combining commands with && can reduce image size by hundreds of megabytes. - The Hadolint Dockerfile linter, inspired by ShellCheck, has over 80 rules and parses the Dockerfile AST for structural analysis. *Tags:* docker, dockerfile, lint --- ### [Kubernetes Manifest Validator](https://devtools.surf/tools/k8s-manifest-validator/) Validate required fields in Kubernetes YAML manifests **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 best practices in CI/CD pipelines **Tips:** - Paste YAML manifests to validate required fields - Check for common misconfigurations like missing resource limits - Validate label selectors match between services and deployments **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 metadata at minimum — omitting any of these causes the API server to reject the resource. - The Kubernetes API server validates manifests against OpenAPI schemas, supporting over 60 resource types in the core API alone. *Tags:* kubernetes, k8s, manifest, validate --- ### [Mock Server Config Generator](https://devtools.surf/tools/mock-server-config/) Generate stub responses from a JSON Schema **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 third-party API responses during development **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 **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 virtualization' in 2011 to describe mock servers that simulate dependent services during testing. - WireMock, one of the most popular mock server tools, was created by Tom Akehurst in 2012 and has been downloaded over 15 million times. *Tags:* mock, server, schema, stub --- ## Date / Time ### [Timezone Converter](https://devtools.surf/tools/timezone-converter/) Convert a date-time between multiple timezones **Use cases:** - Scheduling meetings across distributed international teams - Converting server UTC timestamps to local time for debugging - Planning deployment windows across multiple geographic regions - Calculating deadline times for global content publication **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 **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 worldwide, including unusual ones like UTC+5:45 (Nepal) and UTC+8:45 (Eucla, Australia). - China spans five geographical time zones but uses a single official time (UTC+8), meaning sunrise in western China can occur as late as 10 AM. *Tags:* timezone, convert, utc, time --- ### [Duration Calculator](https://devtools.surf/tools/duration-calculator/) Calculate the duration between two dates or times **Use cases:** - Calculating sprint durations for agile project planning - Computing SLA response times from incident timestamps - Measuring elapsed time between deployment events - Determining contract or license period lengths **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 **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, which is why we need leap years and why the Gregorian calendar skips 3 leap years every 400 years. - The Unix epoch (January 1, 1970, 00:00:00 UTC) is the reference point for most computer time calculations worldwide. *Tags:* duration, time, difference, between --- ### [Age Calculator](https://devtools.surf/tools/age-calculator/) Calculate exact age in years, months, and days from a birthdate **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 - Computing exact ages for HR and payroll systems **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 apps **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 was Jeanne Calment of France, who lived 122 years and 164 days (1875-1997). - In South Korea's traditional age system, babies were considered 1 year old at birth; the country officially switched to international age counting in June 2023. *Tags:* age, birthday, years, date --- ### [Working Day Calculator](https://devtools.surf/tools/working-day-calculator/) Count business days between two dates (excluding weekends) **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 - Computing payment due dates for net-30 business day terms **Tips:** - Excludes weekends automatically from the day count - Use this to calculate project delivery date estimates - Count business days between milestones for SLA tracking **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 work week with 2,500 workers and reported maintained or improved productivity. - The concept of 'business days' varies globally: in many Middle Eastern countries, the work week runs Sunday through Thursday. *Tags:* business, working, days, weekday --- ### [Week Number Lookup](https://devtools.surf/tools/week-number-lookup/) Find the ISO week number for any date **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 timestamps - Scheduling recurring tasks aligned with ISO week boundaries **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 **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 system was standardized in 1988 and is widely used in European business and manufacturing for production planning. - A year can have either 52 or 53 ISO weeks; years with 53 weeks occur roughly every 5-6 years. *Tags:* week, number, iso, calendar --- ### [Date Offset Calculator](https://devtools.surf/tools/date-offset/) Add/subtract days, weeks, months, years with weekday result **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 workflows - Determining sprint end dates when planning agile iterations **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 **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 from January 1, 2000 is May 18, 2027 — date offset math often reveals surprisingly distant or close dates. - The Unix epoch (January 1, 1970) was chosen somewhat arbitrarily by early Unix developers and has since become the universal reference point for computing timestamps. *Tags:* date, offset --- ### [Cron Humanizer](https://devtools.surf/tools/cron-humanizer/) Explain a cron expression in English + show the next 5 run times **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 crontab entries into human-readable schedules - Data engineers confirming ETL job timing across different timezones **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 day-of-week vs day-of-month conflicts **Fun facts:** - The cron daemon was created by Ken Thompson for Unix Version 7 in 1979. The modern Vixie cron (by Paul Vixie, 1987) is still the default on most Linux distros. - Cron expressions use 5 fields (minute, hour, day, month, weekday), but some systems like Quartz add a 6th field for seconds and a 7th for year. - The '@reboot' cron shorthand runs a job once at system startup — it was added by Vixie cron and is not part of the original POSIX specification. *Tags:* cron, schedule, datetime --- ### [Date Format Converter](https://devtools.surf/tools/date-format-converter/) Show the same instant in ISO, RFC-2822, epoch, DD/MM/YYYY and more **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 equivalents **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 — week 1 is the week containing the first Thursday of January, which occasionally puts January 1st in 'week 53' of the previous year. - RFC 2822 date format requires day-of-week abbreviations (Mon, Tue...) but most parsers accept dates without them — the spec says they're optional for parsing but required for generation. *Tags:* date, format, convert --- ### [Countdown Timer Builder](https://devtools.surf/tools/countdown-timer-builder/) Build a live
      -and-JS countdown to any ISO target timestamp **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 building exam deadline countdown displays **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 **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. - The first website countdown timer is believed to have appeared for the Y2K millennium event in 1999, when thousands of sites displayed days/hours/minutes to January 1, 2000. - requestAnimationFrame, introduced in 2011, replaced setInterval for smooth countdown animations — it syncs updates to the display's refresh rate (typically 60fps). *Tags:* countdown, timer --- ### [Pomodoro Timer Planner](https://devtools.surf/tools/pomodoro-timer/) Plan a 25/5 Pomodoro session with long break — outputs a timeline **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 of four **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 minutes of work followed by 17 minutes of break is the most productive ratio — slightly different from the classic 25/5 Pomodoro split. - The Pomodoro Technique book was self-published by Cirillo and remained freely available as a PDF until 2013, which helped it become one of the most popular productivity methods worldwide. *Tags:* pomodoro, timer, focus --- ### [ICS Calendar Event Generator](https://devtools.surf/tools/ics-event-generator/) Build a standards-compliant .ics event file — import to any calendar **Use cases:** - Event organizers distributing calendar invites via download links - Marketing teams creating 'Add to Calendar' buttons for webinars - HR departments sharing company holiday schedules as .ics files - Conference organizers letting attendees import session schedules **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 **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 VCALENDAR container format was influenced by vCard, the electronic business card standard — both use the same 'V' prefix naming convention from Versit Consortium (1996). - Google Calendar, Apple Calendar, and Microsoft Outlook all natively support .ics files, making it the only calendar format with true cross-platform interoperability. *Tags:* ics, calendar --- ### [ISO 8601 Duration Parser](https://devtools.surf/tools/iso-duration-parser/) Parse P3Y6M4DT12H30M5S into years, months, weeks, days, time **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 from cloud provider APIs - Data analysts decoding duration columns in analytics exports **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 **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 durations in ISO 8601 format (e.g., PT4M13S for a 4-minute 13-second video), surprising many developers who encounter it for the first time. - The ISO 8601 duration format can also express durations as start/end datetime pairs or as start/duration pairs, though the PnYnMnD form is by far the most common. *Tags:* iso8601, duration --- ### [Date Range Generator](https://devtools.surf/tools/date-range-generator/) List every date between start and end — step N days/weeks/months **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 periods - Scheduler builders populating calendar slots across date spans **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 **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. - Calculating date ranges across months is surprisingly complex because months have 28, 29, 30, or 31 days — no simple arithmetic formula works for all cases. - The JavaScript Temporal API, reaching Stage 3 in TC39 in 2023, was designed specifically to fix the pain of date range calculations that Date/Moment.js handle poorly. *Tags:* date, range, iterator --- ### [Weekday Calendar](https://devtools.surf/tools/weekday-calendar/) Render a month-at-a-glance calendar grid — YYYY-MM input **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 patterns - Teachers generating printable monthly calendar grids for classes **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 **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 standard defines Monday as day 1 of the week, while the U.S. convention starts weeks on Sunday — a difference that causes endless localization bugs. - February 2026 is notable because it starts on a Sunday and ends on a Saturday, filling the calendar grid perfectly with no wasted rows — this happens roughly every 11 years. *Tags:* calendar, month --- ## Security / Crypto ### [JWT Encoder](https://devtools.surf/tools/jwt-encoder/) Encode a JWT token from header, payload, and secret **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 - Building sample tokens for API documentation examples **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 **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, so sensitive data should never be stored without JWE. - The jwt.io debugger, maintained by Auth0, receives over 3 million monthly visits, making it the most popular JWT tool on the web. *Tags:* jwt, encode, token, auth --- ### [Bcrypt Hash Tester](https://devtools.surf/tools/bcrypt-hash-tester/) Generate bcrypt hashes and verify passwords against hashes **Use cases:** - Testing password hashing during authentication system development - Verifying bcrypt hash compatibility across backend services - Comparing hash output at different cost factors for tuning - Validating password migration from legacy hashing algorithms **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 performance **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 as hardware gets faster, unlike fixed-speed algorithms like MD5. - At cost factor 12, a single bcrypt hash takes about 250ms to compute, making brute-force attacks impractical even with modern GPUs. *Tags:* bcrypt, hash, password, verify --- ### [HMAC Generator](https://devtools.surf/tools/hmac-generator/) Generate HMAC signatures using SHA-256, SHA-512, and more **Use cases:** - Verifying webhook signatures from payment providers like Stripe - Signing API requests for services requiring HMAC authentication - Generating message authentication codes for data integrity checks - Testing HMAC implementations during security library development **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 instantly **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 authenticate every API request made to Amazon Web Services. - The 'H' in HMAC stands for 'Hash-based,' and the algorithm works by hashing the message twice with the key in different paddings. *Tags:* hmac, signature, sha, hash --- ### [Password Strength Analyzer](https://devtools.surf/tools/password-strength-analyzer/) Analyze password strength with entropy and crack-time estimates **Use cases:** - Testing password policy enforcement before deploying to production - Educating users about password strength through visual feedback - Auditing existing password requirements against NIST guidelines - Comparing passphrase vs random character password effectiveness **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 substitutions **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 still '123456,' used by over 4.5 million accounts according to NordPass research. - A truly random 12-character password using all character types has approximately 79 bits of entropy, requiring centuries to brute-force. *Tags:* password, strength, entropy, zxcvbn --- ### [TOTP / 2FA Generator](https://devtools.surf/tools/totp-generator/) Generate time-based one-time passwords from a secret key **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 **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 stored TOTP secrets unencrypted on the device — it wasn't until 2023 that Google added cloud backup with encryption. - TOTP is being gradually replaced by passkeys (FIDO2/WebAuthn), which are phishing-resistant because the credential is bound to the specific website domain. *Tags:* totp, 2fa, otp, authenticator --- ### [SAML Response Decoder](https://devtools.surf/tools/saml-decoder/) Decode Base64-encoded SAML responses into readable XML **Use cases:** - Debugging SSO login failures by inspecting SAML assertions - Verifying identity provider attribute mappings during integration - Extracting user claims from SAML responses for troubleshooting - Auditing SAML configuration during security compliance reviews **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 **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 assertions, each with different authentication contexts and attribute statements. - Despite the rise of OpenID Connect, an estimated 60% of enterprise SSO implementations still rely on SAML as of 2024. *Tags:* saml, decode, sso, xml --- ### [OAuth PKCE Generator](https://devtools.surf/tools/oauth-pkce-generator/) Generate code_verifier, code_challenge, and state for OAuth PKCE flows **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 authentication - Debugging PKCE verification failures in OAuth server logs **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 forgery **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 stands for Proof Key for Code Exchange. - OAuth 2.1 (draft) mandates PKCE for all OAuth clients, not just mobile apps, making it a universal security requirement. *Tags:* oauth, pkce, state, authorization --- ### [SSH Key Fingerprint](https://devtools.surf/tools/ssh-key-fingerprint/) Calculate the fingerprint of an SSH public key **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 fingerprints - Confirming key fingerprints during SSH host verification prompts **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 **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 version 6.8, released in March 2015. - GitHub shows SSH key fingerprints in your account settings, making this tool useful for matching local keys to your GitHub profile. *Tags:* ssh, key, fingerprint, public --- ### [CSR Decoder](https://devtools.surf/tools/csr-decoder/) Decode PEM-encoded Certificate Signing Requests **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 compliance policies - Debugging certificate issuance failures caused by malformed CSRs **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 requirements **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 the certificate authority never has access to your private key material. - Modern CAs require a minimum 2048-bit RSA key or 256-bit ECDSA key in CSRs; 1024-bit keys were deprecated in 2013. *Tags:* csr, certificate, pem, decode --- ### [Secrets Scanner](https://devtools.surf/tools/secrets-scanner/) Scan text/code for leaked API keys, tokens, and credentials **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 **Fun facts:** - GitHub scans over 200 million commits per year for leaked secrets. In 2023, they detected over 100 million leaked credentials in public repositories. - The average cost of a leaked credential that gets exploited is $4.45 million according to IBM's 2023 Cost of a Data Breach report. - AWS access keys are the most commonly leaked secret type on GitHub, followed by Google API keys and Slack webhooks. *Tags:* secrets, scan, api-key, leak --- ### [RSA Keypair Generator](https://devtools.surf/tools/rsa-keypair-generator/) Generate RSA public/private keypairs in PEM format **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 - Developers configuring OAuth2 with asymmetric key verification **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 **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 classified. - The largest RSA key ever factored was 829 bits (RSA-250) in February 2020, requiring 2,700 CPU core-years of computation across research institutions. - PEM format stands for 'Privacy Enhanced Mail' — it was defined in RFC 1421-1424 in 1993 for email encryption but became the de facto standard for storing cryptographic keys. *Tags:* rsa, keypair, generate, pem --- ### [JWT Timeline](https://devtools.surf/tools/jwt-timeline/) Decode JWT + show iat / nbf / exp as ISO + delta from now **Use cases:** - Backend developers debugging expired token errors in API responses - Security engineers verifying token lifetimes comply with security policies - DevOps teams troubleshooting clock skew issues between microservices - QA testers checking that token expiry matches the configured TTL **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 OAuth and API authentication **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 before) claim is often overlooked but is critical for tokens issued slightly before the recipient's clock — clock skew of 30-60 seconds is common. - JWTs with no 'exp' claim never expire, which is a security risk. OWASP recommends access tokens expire in 5-15 minutes and refresh tokens in 7-30 days. *Tags:* jwt, auth, token --- ### [AES Encrypt / Decrypt](https://devtools.surf/tools/aes-encrypt-decrypt/) AES-256-GCM encryption with authenticated ciphertext (iv:tag:body) **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 **Fun facts:** - AES (Rijndael) was selected by NIST in 2001 after a 5-year public competition. It's approved for TOP SECRET data in US government systems. - AES operates on 128-bit blocks regardless of key size. The key size (128, 192, or 256 bits) only changes the number of encryption rounds (10, 12, or 14). - Intel added dedicated AES-NI hardware instructions in 2010, making AES encryption essentially 'free' on modern CPUs — about 1 cycle per byte. *Tags:* aes, encrypt, gcm --- ### [ROT13 Cipher](https://devtools.surf/tools/rot13-cipher/) Classic Caesar-13 substitution — encrypt and decrypt are the same op **Use cases:** - Forum users encoding spoilers in discussion threads - Developers testing basic cipher and string manipulation logic - CTF participants decoding beginner-level cryptography challenges - Teachers demonstrating substitution ciphers in CS courses **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 **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 with a shift of 13; since the English alphabet has 26 letters, applying it twice returns the original text. - The Unix command 'tr A-Za-z N-ZA-Mn-za-m' has been the canonical one-liner for ROT13 since the early BSD distributions in the 1980s. *Tags:* rot13, cipher, fun --- ### [Caesar Cipher](https://devtools.surf/tools/caesar-cipher/) Shift letters by any N positions (±26) — enc/dec with custom shift **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 unchanged **Fun facts:** - Caesar is recorded using shift=3 in Suetonius's 'Life of Julius Caesar' (AD 121). It was considered unbreakable for ~1500 years until al-Kindi invented frequency analysis. - ROT13 (Caesar shift of 13) was widely used on Usenet in the 1980s to hide spoilers and offensive jokes — it's its own inverse because the English alphabet has 26 letters. - The Caesar cipher has only 25 possible keys, making it trivially breakable by trying all of them — a technique called 'brute force' that takes seconds by hand. *Tags:* caesar, shift, cipher --- ### [Vigenère Cipher](https://devtools.surf/tools/vigenere-cipher/) Polyalphabetic cipher using a keyword — stronger than Caesar **Tips:** - Provide a key=WORD parameter - Same key encrypts and decrypts with op=dec - Non-letter characters are preserved (punctuation, numbers, spaces) **Fun facts:** - The Vigenère cipher was considered unbreakable for 300 years — it earned the nickname 'le chiffre indéchiffrable' in 19th-century France. - Charles Babbage broke the Vigenère cipher around 1854 but never published his work. Friedrich Kasiski independently published the same method in 1863 and got the credit. - The Vigenère cipher is actually a series of Caesar ciphers with different shifts — the key determines which Caesar shift to use for each letter position. *Tags:* vigenere, cipher, key --- ### [Atbash Cipher](https://devtools.surf/tools/atbash-cipher/) Hebrew alphabet substitution — A↔Z, B↔Y — self-inverse **Use cases:** - Cryptography students studying classical cipher history - Puzzle designers creating multi-layer encoding challenges - CTF competitors recognizing and decoding Atbash-encrypted flags - History enthusiasts exploring biblical code references **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 **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 appears in the Bible — the Book of Jeremiah uses it to encode 'Babel' as 'Sheshach' (Jeremiah 25:26), making it one of the oldest known ciphers in recorded history. - Like ROT13, Atbash is an involution — applying it twice restores the original text — because the substitution A-Z, B-Y is perfectly symmetrical. *Tags:* atbash, cipher --- ### [Rail Fence Cipher](https://devtools.surf/tools/rail-fence-cipher/) Transposition cipher in a zig-zag pattern across N rails — enc/dec **Use cases:** - Cryptography students learning transposition cipher mechanics - CTF competitors solving multi-layer cipher challenges - Puzzle game developers implementing classic encryption schemes - Security educators demonstrating differences between substitution and transposition **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 **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 is a transposition cipher — it rearranges character positions without changing the characters themselves. - With N rails and a message of length L, the Rail Fence cipher produces a pattern that repeats every 2(N-1) characters, making frequency analysis ineffective but pattern analysis straightforward. *Tags:* rail-fence, transposition --- ## Web / Frontend ### [Meta Tags / OG Previewer](https://devtools.surf/tools/meta-tag-previewer/) Preview how meta tags and OpenGraph data appear on social platforms **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 search result limits - Testing Twitter Card markup for correct summary or large image display **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 social **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 namespace separate from Open Graph. - Google typically displays 50-60 characters of a title tag and 150-160 characters of a meta description in search results. *Tags:* meta, opengraph, twitter, seo, preview --- ### [Tailwind → CSS](https://devtools.surf/tools/tailwind-to-css/) Convert Tailwind CSS classes to vanilla CSS properties **Use cases:** - Learning CSS equivalents of unfamiliar Tailwind utility classes - Converting Tailwind components to vanilla CSS during framework migration - Generating CSS snippets for email templates that cannot use Tailwind - Debugging Tailwind styles by inspecting the underlying CSS output **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 **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 default, reducing build times from minutes to milliseconds. - Despite initial skepticism, Tailwind became the most popular CSS framework on GitHub by 2023, surpassing Bootstrap in stars. *Tags:* tailwind, css, convert, utility --- ### [HTML → React JSX](https://devtools.surf/tools/html-to-jsx/) Convert HTML to valid React JSX syntax **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 projects - Converting server-rendered HTML partials to client-side React components **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 instantly **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 transpilation step, originally through JSTransform and now through Babel or SWC. - The className attribute exists because 'class' is a reserved keyword in JavaScript, a constraint inherited from ECMAScript 3 (1999). *Tags:* html, jsx, react, convert --- ### [HTML → Markdown](https://devtools.surf/tools/html-to-markdown/) Convert HTML content to Markdown format **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 bases - Transforming HTML emails into readable Markdown archives **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 documentation **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 launched in 2014 by Jeff Atwood (Stack Overflow co-founder) and John MacFarlane. - GitHub Flavored Markdown (GFM) adds tables, task lists, and strikethrough to standard Markdown and was formalized in 2017. *Tags:* html, markdown, convert --- ### [SVG → React Component](https://devtools.surf/tools/svg-to-react/) Convert SVG markup into a React component **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 components - Migrating SVG sprite sheets to individual React components **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 rendering **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 Greg Berge in 2017 and is used internally by Create React App. - Inline SVG in React allows dynamic styling and animation through props, which is impossible with img tags or CSS background images. *Tags:* svg, react, component, convert --- ### [CSS Unit Converter](https://devtools.surf/tools/css-unit-converter/) Convert between px, rem, em, vw, vh, and other CSS units **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 layouts - Converting legacy px stylesheets to modern rem-based systems **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 **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 the early days of CSS in the mid-1990s. - The CSS ch unit, based on the width of the '0' character, was introduced to help size input fields for expected character counts. *Tags:* css, unit, px, rem, convert --- ### [robots.txt Validator](https://devtools.surf/tools/robots-txt-validator/) Validate robots.txt syntax and check for common issues **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 environments block search engine indexing **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 **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 its robots.txt parser as open source in 2019 (github.com/google/robotstxt), revealing how Googlebot interprets the spec. - A missing robots.txt file returns a 404 to crawlers, which most search engines interpret as 'crawl everything' rather than 'crawl nothing.' *Tags:* robots, seo, validate, crawl --- ### [Sitemap XML Validator](https://devtools.surf/tools/sitemap-validator/) Validate sitemap.xml structure and check for common issues **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 sitemaps - DevOps engineers validating sitemap output in CI/CD pipelines **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 **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 sitemap XML file can contain at most 50,000 URLs and must not exceed 50 MB uncompressed — larger sites must use sitemap index files. - Google's John Mueller has confirmed that lastmod dates in sitemaps are only trusted when they accurately reflect actual content changes — padding dates is detected and ignored. *Tags:* sitemap, xml, seo, validate --- ### [RSS/Atom Feed Validator](https://devtools.surf/tools/rss-feed-validator/) Validate RSS 2.0 and Atom feed XML structure **Use cases:** - Publishers verifying feed validity before submitting to aggregators - Podcast developers validating iTunes-compatible RSS feeds - Blog developers testing auto-generated Atom feed output - Content platforms debugging feed parsing errors from subscribers **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 **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 Atom rivalry split the web syndication community in the early 2000s — Atom 1.0 was published as RFC 4287 in 2005 by the IETF as a more rigorous alternative. - Despite being declared dead multiple times, RSS saw a major resurgence during 2020-2023 as developers and writers moved to newsletters and indie web platforms. *Tags:* rss, atom, feed, validate --- ### [CSS Box Shadow Builder](https://devtools.surf/tools/css-box-shadow-builder/) Generate CSS box-shadow values from parameters **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 shadows with multiple layers - Design subtle drop shadows for modals, popovers, and floating elements **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 - Adjust blur radius and spread separately: blur softens edges while spread controls shadow size **Fun facts:** - Box shadows are one of the most expensive CSS properties to render. Using will-change: transform can help browsers optimize shadow animations. - CSS box-shadow was first proposed in CSS2 (1998) but wasn't reliably implemented across browsers until CSS3 in 2011. - Material Design's elevation system uses up to 3 layered box shadows per element to simulate realistic depth and light direction. *Tags:* css, box-shadow, builder, visual --- ### [CSS Clip-Path Builder](https://devtools.surf/tools/css-clip-path-builder/) Generate CSS clip-path polygon values **Use cases:** - Frontend developers creating non-rectangular section dividers - Designers building diagonal hero sections and geometric layouts - UI engineers implementing custom avatar shapes for user profiles - Creative developers building interactive shape-based navigation **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 **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 accept any number of points, enabling complex shapes — some developers have created entire illustrations using only clip-path polygons. - Before clip-path, developers used the deprecated CSS clip property (from CSS 2.1, 1998), which only supported rectangular clipping regions. *Tags:* css, clip-path, polygon, builder --- ### [Flexbox Playground](https://devtools.surf/tools/flexbox-playground/) Generate CSS flexbox layouts from property combinations **Tips:** - Click property pills to change layout instantly - Add or remove items to test wrapping behavior - The CSS output updates in real-time **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 syntaxes (2009, 2011, 2012) before settling on the current one — more rewrites than any other CSS module. - Flexbox was designed for one-dimensional layouts (row OR column). CSS Grid was created later for two-dimensional layouts (rows AND columns simultaneously). *Tags:* flexbox, css, layout, playground --- ### [Cubic Bezier Editor](https://devtools.surf/tools/cubic-bezier-editor/) Generate CSS cubic-bezier timing functions from control points **Use cases:** - Animators fine-tuning easing curves for UI transitions - Frontend developers matching design system motion specifications - UX engineers creating custom easing for micro-interactions - Game UI developers crafting smooth menu transition effects **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 **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() is restricted to exactly two control points, while general Bezier curves can have any number — this constraint keeps browser animation calculations efficient. - Chrome DevTools has had a built-in cubic-bezier editor since 2014, but many developers still don't know they can click on timing function values to visually edit them. *Tags:* cubic-bezier, easing, animation, timing --- ### [Accessibility Auditor](https://devtools.surf/tools/a11y-auditor/) Check HTML for common accessibility issues (ARIA, alt text, headings) **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 design specs - Compliance officers verifying WCAG conformance for legal requirements **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 **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 billion people worldwide experience significant disability — the WebAIM Million study found that 96.3% of home pages had detectable WCAG 2 failures in 2023. - Section 508 of the US Rehabilitation Act was amended in 2017 to adopt WCAG 2.0 AA as the federal standard, making accessibility a legal requirement for government websites. *Tags:* accessibility, a11y, aria, audit --- ### [Structured Data Tester](https://devtools.surf/tools/structured-data-tester/) Validate JSON-LD schema.org structured data **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 - Web developers debugging why rich results are not appearing **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 **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 created by Manu Sporny and Dave Longley and became a W3C Recommendation in 2014 — Google officially recommends it over Microdata and RDFa for structured data. - Websites with valid structured data can see up to 30% higher click-through rates due to rich snippets like star ratings, FAQs, and recipe cards appearing in search results. *Tags:* schema.org, json-ld, structured, seo --- ### [OpenGraph Image Debugger](https://devtools.surf/tools/og-image-debugger/) Validate OpenGraph meta tags and preview how URLs appear when shared **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 - Ensuring blog posts display rich previews when shared on LinkedIn **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 display **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 2012 as Twitter's own metadata standard, but most sites now include both OG and Twitter meta tags for full coverage. - LinkedIn truncates og:title at 120 characters and og:description at 150, while Facebook allows up to 95 characters for titles in feed. *Tags:* opengraph, og, social, preview, debug --- ### [Sitemap Generator](https://devtools.surf/tools/sitemap-generator/) Generate sitemap.xml from a list of URLs with priority and frequency **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 during an SEO audit - Building sitemaps for multi-language sites with hreflang attributes **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 **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 50,000 URLs and must not exceed 50 MB uncompressed, per the protocol specification. - Google processes over 130 trillion pages but sitemaps still help by signaling which pages you consider most important for crawling. *Tags:* sitemap, xml, seo, generate --- ### [Favicon Checker](https://devtools.surf/tools/favicon-checker/) Validate favicon HTML tags and preview all icon sizes **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 - Auditing icon sizes for Progressive Web App manifest compliance **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 file paths **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, which scale perfectly to any size and can even respond to dark mode via CSS media queries. - Apple introduced the apple-touch-icon in 2007 with the original iPhone, requiring a 57x57 PNG for home screen bookmarks. *Tags:* favicon, icon, check, preview --- ### [px ↔ rem Table](https://devtools.surf/tools/px-rem-table/) Generate a pixel-to-rem scale table for a chosen base size **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 - Verifying rem calculations when debugging responsive layouts **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 **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 browser font-size is 16px in all major browsers, making 1rem equal to 16px unless overridden — a standard since the mid-1990s. - The em unit gets its name from typography, where it originally referred to the width of the capital letter 'M' in a given typeface. *Tags:* px, rem, scale --- ### [URL Parser](https://devtools.surf/tools/url-parser/) Break a URL into scheme, host, path, query, fragment **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 links to verify scheme and path segments **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 **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 2,048 characters in Internet Explorer, though the HTTP spec (RFC 7230) imposes no limit. - The '#' fragment identifier in URLs is never sent to the server — it is processed entirely by the client browser, a design choice from the original spec. *Tags:* url, parse --- ### [Query String → JSON](https://devtools.surf/tools/query-string-to-json/) Turn ?a=1&b=foo into a flat JSON object **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 URLs - Transforming search filter URLs into structured data for logging **Tips:** - Paste a full query string starting with ? or just key=value pairs - Nested bracket notation like a[b]=1 is parsed into objects - Use the JSON output to build request payloads in code **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 query string length varies by server: Apache defaults to 8,190 characters, while Nginx allows up to 4,096 by default. - The application/x-www-form-urlencoded content type, used for query strings, was defined in the HTML 2.0 spec (RFC 1866) in 1995. *Tags:* querystring, json --- ### [Cookie Parser](https://devtools.surf/tools/cookie-parser/) Parse Cookie / Set-Cookie header into name=value + attribute list **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 different environments - Frontend developers understanding which cookies are accessible via document.cookie **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 from different response headers **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 set one cookie — to set multiple cookies, the server must send multiple Set-Cookie headers in the same response. - The HttpOnly flag, introduced by Microsoft in IE 6 SP1 (2002), prevents JavaScript from reading a cookie, mitigating most XSS-based session theft. *Tags:* cookie, http, parser --- ### [HTTP Header Inspector](https://devtools.surf/tools/http-header-inspector/) Pretty-print raw HTTP headers with inline meanings **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 missing headers like HSTS and CSP - DevOps engineers inspecting headers returned by CDN and proxy layers **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 side by side **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 become absurdly long over decades because browsers append compatibility tokens — most modern UA strings exceed 100 characters. - The Referer header was intentionally misspelled in the original HTTP specification (RFC 1945, 1996). The typo was preserved for backward compatibility. *Tags:* http, headers, inspect --- ## Data / SQL ### [CSV Viewer](https://devtools.surf/tools/csv-viewer/) View CSV data in a sortable, filterable table **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 migration files before importing into databases **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 **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; it was used in the 1960s and 1970s for data exchange between mainframe systems. - Despite its simplicity, CSV has no standard way to represent null values; empty fields, 'NULL,' and 'N/A' are all used interchangeably. *Tags:* csv, view, table, sort, filter --- ### [CSV → SQL INSERT](https://devtools.surf/tools/csv-to-sql-insert/) Generate SQL INSERT statements from CSV data **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 warehouse-ready SQL **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 **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 1972, predating personal computers by over a decade. - A single PostgreSQL INSERT with a VALUES list can handle up to 1,000 rows before some drivers start chunking automatically. *Tags:* csv, sql, insert, generate --- ### [SQL → CSV Fixture](https://devtools.surf/tools/sql-to-csv/) Convert SQL INSERT statements to CSV format **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 non-technical stakeholders **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 **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, where a fixture holds a workpiece in a known position. - SQL INSERT parsing must handle escaped quotes, NULL literals, and multi-line values, making it deceptively complex. *Tags:* sql, csv, fixture, convert --- ### [TSV ↔ CSV](https://devtools.surf/tools/tsv-csv-converter/) Convert between tab-separated and comma-separated values **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 mixed-delimiter data files from legacy systems **Tips:** - Preview the delimiter detection before converting - Handle fields with embedded tabs or commas correctly - Copy TSV directly from a spreadsheet for instant conversion **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 in 1963. - Bioinformatics tools like BLAST and BED format use TSV exclusively because biological data rarely contains tabs. *Tags:* tsv, csv, convert, tab --- ### [CSV Schema Validator](https://devtools.surf/tools/csv-schema-validator/) Validate CSV data against a column schema definition **Use cases:** - Data engineers validating ETL pipeline output before loading - Analysts checking uploaded CSV files against expected schemas - API developers verifying CSV export format consistency - QA teams automating data quality checks on batch imports **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 columns **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 is only 7 pages long and still leaves ambiguities — there's no universal agreement on whether CSV should use commas, semicolons, or tabs as delimiters. - Excel's CSV handling varies by locale — European versions often use semicolons instead of commas because commas are used as decimal separators in many European countries. *Tags:* csv, schema, validate, columns --- ### [SQL → Prisma Schema](https://devtools.surf/tools/sql-to-prisma/) Convert SQL CREATE TABLE statements to Prisma schema **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 Node.js projects - Developers reverse-engineering database schemas into type-safe models **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 schema **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 schema language (PSL) was designed to be database-agnostic — a single schema file can target PostgreSQL, MySQL, SQLite, MongoDB, or SQL Server with a one-line change. - The Prisma Migrate engine generates SQL migration files that are human-readable and version-controlled, bridging the gap between schema-first and migration-first workflows. *Tags:* sql, prisma, schema, convert --- ### [CSV Column Remapper](https://devtools.surf/tools/csv-column-remapper/) Rename, reorder, or drop columns in CSV data **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 schemas - Researchers reformatting survey data exports for analysis tools **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 **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 pandas rename() function processes millions of rows in milliseconds because it only changes metadata, not the underlying data — a design choice from Wes McKinney's 2008 creation. - GDPR's 'data minimization' principle (Article 5) requires dropping unnecessary personal data columns before processing — making column remapping a legal compliance tool. *Tags:* csv, column, rename, reorder --- ### [CSV Validator with Schema](https://devtools.surf/tools/csv-validator-schema/) Validate CSV data against column type definitions **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 before processing - Database admins pre-validating bulk import files for type mismatches **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 **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 problems. - The W3C published a CSV on the Web standard (CSVW) in 2015 that includes a metadata vocabulary for describing CSV schemas — but adoption remains low outside government data portals. - IBM's Data Quality Suite found that bad data costs US businesses $3.1 trillion annually — simple schema validation on CSV imports can prevent a significant portion of these errors. *Tags:* csv, validate, schema, types --- ### [SQL Identifier Caser](https://devtools.surf/tools/sql-case-mapper/) Convert SQL identifiers between snake, camel, and Pascal case **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 for ORM model generation - Standardize inconsistent column naming in legacy databases **Tips:** - Paste SQL column names or identifiers — each line is converted independently - Choose between snake_case, camelCase, and PascalCase output styles - Handles mixed separators: underscores, hyphens, spaces, and existing camelCase are all detected automatically **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 Oracle folds to uppercase. - The snake_case convention became dominant in SQL because early databases were limited to uppercase letters and underscores — camelCase wasn't distinguishable without case sensitivity. - Ruby on Rails popularized automatic snake-to-camel conversion in 2004 with ActiveRecord, which maps snake_case database columns to camelCase Ruby attributes — a pattern now standard in most ORMs. *Tags:* sql, case, identifier --- ### [Column Extract](https://devtools.surf/tools/column-extract/) Pull the Nth whitespace-delimited column from each line **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 for security review - Extracting filenames from ls -l output for batch processing **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 **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, an alternative to awk for column extraction, was introduced in System III Unix (1982) and supports both delimiter and character-based fields. - AWK was so influential that it inspired Perl, which Larry Wall designed in 1987 partly to combine the capabilities of awk, sed, and shell scripting. *Tags:* awk, column, data --- ## AI / Modern Dev ### [Token Counter](https://devtools.surf/tools/token-counter/) Estimate token count for OpenAI and Anthropic models **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 usage for RAG applications **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 limit **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 compiler theory, where lexical analysis breaks source code into tokens. - Claude's tokenizer can represent common English words as single tokens, but a single emoji may consume 2-4 tokens. *Tags:* token, count, openai, anthropic, gpt --- ### [Prompt Template Renderer](https://devtools.surf/tools/prompt-template-renderer/) Render prompt templates with variable substitution **Use cases:** - Build reusable prompt libraries for team workflows - Test prompt variations with different variable inputs - Prepare parameterized prompts for API automation - Document prompt templates for non-technical teammates **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 **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 of GitHub in 2009 and inspired countless template engines. - Research from Microsoft in 2023 showed that structured prompt templates can improve LLM accuracy by up to 30% on reasoning tasks. *Tags:* prompt, template, render, variables --- ### [Markdown → Slack/Discord](https://devtools.surf/tools/markdown-to-slack/) Convert Markdown to Slack mrkdwn or Discord formatting **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 for team Slack channels **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 **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 implementation in 2017, making it one of the largest Markdown deployments outside of GitHub. - John Gruber published the original Markdown specification in 2004 with the explicit goal of being readable as plain text. *Tags:* markdown, slack, discord, convert --- ### [Embedding Distance Calculator](https://devtools.surf/tools/embedding-distance/) Calculate cosine similarity between two text embedding vectors **Use cases:** - ML engineers evaluating semantic search result quality - NLP researchers comparing sentence similarity across models - RAG developers tuning retrieval thresholds for AI chatbots - Data scientists clustering documents by embedding proximity **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 distances **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 text-embedding-ada-002 produces 1,536-dimensional vectors — each dimension captures a subtle aspect of meaning that humans cannot individually interpret. - The 'king - man + woman = queen' analogy from Mikolov's 2013 Word2Vec paper demonstrated that vector arithmetic could capture semantic relationships, launching the embedding revolution. *Tags:* embedding, cosine, similarity, vector --- ### [Markdown → Slack mrkdwn](https://devtools.surf/tools/slack-mrkdwn/) Convert GitHub-flavor markdown to Slack's 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 - Adapting documentation excerpts for Slack-based team updates **Tips:** - Bold syntax converts from **text** to *text* automatically - Links convert from [text](url) to format - Preview the mrkdwn output before pasting into Slack **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 was launched in August 2013 and reached 10 million daily active users by 2019; its message formatting has remained largely unchanged since launch. - The Markdown language was created by John Gruber and Aaron Swartz in 2004, while Slack's mrkdwn variant appeared nearly a decade later with its own quirks. *Tags:* slack, markdown, convert --- ## Fun / Niche ### [Emoji / Unicode Lookup](https://devtools.surf/tools/emoji-unicode-lookup/) Search emoji by name and show Unicode codepoints **Tips:** - Search by keyword: 'heart', 'fire', 'rocket' - Paste an emoji to see its Unicode codepoints - Results show all matching keywords **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 Shigetaka Kurita at NTT DoCoMo in Japan. The original set had just 176 12x12 pixel icons. - A single emoji like a family group can be composed of up to 7 Unicode codepoints joined by zero-width joiners (ZWJ), making string length calculations tricky. *Tags:* emoji, unicode, search, codepoint --- ### [NATO Phonetic Alphabet](https://devtools.surf/tools/nato-phonetic/) Convert text to NATO phonetic alphabet spelling **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 identifiers in aviation or military contexts **Tips:** - Spell out confirmation codes for phone support clarity - Use the output directly in voice communication scripts - Convert mixed alphanumeric strings for radio readback **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 'Bravo' replaced 'Baker' from the earlier Joint Army/Navy alphabet used in World War II. - Each NATO code word was chosen so that it would be understood by speakers of English, French, and Spanish with minimal confusion. *Tags:* nato, phonetic, alphabet, spelling --- ### [Morse Code ↔ Text](https://devtools.surf/tools/morse-code/) Convert text to Morse code and back **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 telegraph transcripts for research **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 **Fun facts:** - Samuel Morse sent the first telegraph message 'What hath God wrought' on May 24, 1844, between Washington D.C. and Baltimore. - The distress signal SOS (··· --- ···) was adopted internationally in 1906, chosen not as an acronym but because it is easy to transmit and recognize. - Morse code is still used by amateur radio operators today, and the US Navy only stopped requiring Morse proficiency in 1999. *Tags:* morse, code, convert, text --- ### [Roman Numeral Converter](https://devtools.surf/tools/roman-numeral-converter/) Convert between Roman numerals and decimal numbers **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 properly formatted outline numbering for legal docs **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 **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 from Super Bowl V (1971) through Super Bowl XLVIII, briefly switching to Arabic numerals for Super Bowl 50. - The largest standard Roman numeral is MMMCMXCIX (3999); values above 4000 historically required a vinculum (overline) notation. *Tags:* roman, numeral, convert, number --- ### [Number → Words](https://devtools.surf/tools/number-to-words/) Convert numbers to written English 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 - Convert numeric data for text-to-speech applications **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 **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,' coined in 1920 by 9-year-old Milton Sirotta, nephew of mathematician Edward Kasner. - The short scale (billion = 10^9) is used in the US and UK, while the long scale (billion = 10^12) is still used in much of continental Europe. *Tags:* number, words, text, convert --- ### [Leet Speak ↔ Plain](https://devtools.surf/tools/leet-speak/) Convert text to/from 1337 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 content moderation systems **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 **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 sysops granted '31337' access levels to trusted users. - Google has a full leet speak interface: searching from 'Google 1337' (google.com/intl/xx-hacker/) translates the entire UI into leet. *Tags:* leet, 1337, text, convert --- ### [Slug Generator](https://devtools.surf/tools/slug-generator/) Generate URL-friendly slugs from text **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 titles into clean permalinks **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 **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 slug for optimal SEO, as overly long URLs get truncated in search results. - WordPress popularized the term 'permalink slug' in 2003, making it standard vocabulary for web developers worldwide. *Tags:* slug, url, seo, permalink --- ### [Zero-Width Character Detector](https://devtools.surf/tools/zero-width-detector/) Find and highlight invisible zero-width characters in text **Use cases:** - Debug string comparison failures caused by invisible characters - Detect watermarked text copied from protected documents - Clean pasted content before inserting into databases - Find hidden characters in code that break compilation **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 **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 text watermarking — embedding invisible unique identifiers to track document leaks. - The zero-width joiner (U+200D) is what makes compound emojis work, joining separate emoji into family, flag, and skin-tone sequences. *Tags:* zero-width, invisible, unicode, detect --- ### [Smart Quotes Fixer](https://devtools.surf/tools/smart-quotes-fixer/) Replace curly/smart quotes with straight quotes and vice versa **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 typographic quotes for plain-text email formatting **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 **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 auto-converting straight quotes to smart quotes since Word 97, causing headaches for developers ever since. - In JSON, smart quotes are invalid syntax and will cause parse errors, making this a common source of bugs when pasting from documents. *Tags:* quotes, smart, curly, straight --- ### [Text Similarity Scorer](https://devtools.surf/tools/text-similarity-scorer/) Calculate similarity between two text strings (Levenshtein, Jaccard) **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 algorithms for deduplication systems **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 **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 coefficient in 1901 to compare the flora of different Alpine regions in Switzerland. - Spell checkers typically suggest corrections for words within a Levenshtein distance of 2, which covers 95% of common typos. *Tags:* similarity, levenshtein, compare, text --- ### [ISBN/IBAN/Luhn Validator](https://devtools.surf/tools/isbn-iban-validator/) Validate ISBN, IBAN, and credit card numbers (Luhn check) **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 checkout validation logic during development **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 rules **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 January 1, 2007, because the 10-digit system was running out of available numbers in several language groups. - IBAN lengths vary by country: Norway uses 15 characters while Malta uses 31, making format validation country-dependent. *Tags:* isbn, iban, luhn, credit-card, validate --- ### [ASCII Table Reference](https://devtools.surf/tools/ascii-table-reference/) Browse the full ASCII table with decimal, hex, and character values **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 students character encoding fundamentals interactively **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 **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 difference between uppercase and lowercase letters is exactly 32, enabling case conversion with a single bit flip. - The DELETE character (127/0x7F) was assigned the highest code so that it could be punched as all-holes on paper tape, effectively erasing any character. *Tags:* ascii, table, reference, hex --- ### [Bionic Reading Converter](https://devtools.surf/tools/bionic-reading/) Bold the first half of each word for faster 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 - Accessibility researchers testing alternative reading aids **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 **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 research from Keith Rayner at UMass Amherst showed the average reader fixates on a word for 200-250 milliseconds, and bionic formatting claims to reduce this. - The concept draws from the saccade-fixation model of reading — our eyes don't move smoothly but jump between fixation points 7-9 characters apart on average. *Tags:* bionic, reading, bold, speed --- ### [Anagram Finder](https://devtools.surf/tools/anagram-finder/) Check if two strings are anagrams and show letter frequency **Use cases:** - Puzzle enthusiasts verifying crossword and word game answers - Teachers creating educational word exercises for students - Game developers validating anagram mechanics in word games - Writers checking character name anagrams for hidden meanings **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 **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 anagram pair in English is 'cinematographer' and 'megachiropteran' (a type of bat), both containing 15 letters. - In the 17th century, scientists like Galileo and Robert Hooke published discoveries as anagrams to establish priority without revealing findings prematurely. *Tags:* anagram, letters, word, puzzle --- ### [Braille ↔ Text](https://devtools.surf/tools/braille-converter/) Convert text to Braille Unicode characters and back **Use cases:** - Accessibility engineers testing Braille display compatibility - Educators creating Braille learning materials digitally - Designers including Braille representations in inclusive UX projects - Developers generating Unicode Braille for accessible notifications **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 fidelity **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 patterns occupy the block U+2800 to U+28FF, covering all 256 possible combinations of an 8-dot Braille cell — added in Unicode 3.0 in 1999. - There are over 180 different Braille codes worldwide — Unified English Braille (UEB), adopted internationally in 2013, attempted to standardize English Braille across countries. *Tags:* braille, text, convert, accessibility --- ### [Color Blindness Simulator](https://devtools.surf/tools/color-blindness-simulator/) Simulate how hex colors appear under different color blindness types **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 are distinguishable - Data visualization engineers checking chart color accessibility **Tips:** - Test all three major types: protanopia, deuteranopia, tritanopia - Compare simulated colors side-by-side with originals - Ensure sufficient contrast remains under each simulation **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. - John Dalton published the first scientific paper on color blindness in 1794, describing his own condition — color blindness was called 'Daltonism' in many languages for over a century. - The Ishihara color blindness test, created by Shinobu Ishihara in 1917, uses 38 plates of colored dots and remains the most widely used screening test over 100 years later. *Tags:* color, blindness, simulate, accessibility --- ### [User Input Fuzzer](https://devtools.surf/tools/user-input-fuzzer/) Generate edge-case test inputs for form validation testing **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 handling - Mobile developers testing text input rendering with exotic Unicode **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 **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 project, launched in 2016, has found over 10,000 bugs across 1,000+ open-source projects by running continuous fuzzing on cloud infrastructure. - The 'Big List of Naughty Strings' on GitHub, created by Max Woolf, contains over 500 strings known to cause problems — including the infamous 'null', 'undefined', and 'drop table' entries. *Tags:* fuzz, test, input, edge-case --- ### [Palindrome Checker](https://devtools.surf/tools/palindrome-checker/) Test if text reads the same forward & backward **Use cases:** - Testing solutions for palindrome coding interview questions - Validating string reversal logic in algorithm implementations - Creating palindrome puzzles for educational coding workshops - Checking DNA sequences for palindromic patterns in bioinformatics **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 **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 the Greek 'palindromos,' meaning 'running back again,' and was first used in English around 1629. - The Finnish word 'saippuakivikauppias' (a soapstone seller) at 19 letters is the longest known single-word palindrome in everyday use in any language. *Tags:* palindrome, text --- ### [Haiku Counter](https://devtools.surf/tools/haiku-counter/) Check a poem fits the 5-7-5 syllable pattern **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 against known haiku patterns - Writing commit message haiku for fun developer culture **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 **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 counts 'morae' (sound units) rather than syllables — a distinction that makes English 5-7-5 haiku slightly longer than Japanese originals. - The shortest poem accepted as a haiku in English is a single word by Cor van den Heuvel: 'tundra' — though it breaks the traditional 5-7-5 form. *Tags:* haiku, poetry, syllables --- ### [Emoji Counter](https://devtools.surf/tools/emoji-counter/) Count and group emoji present in any text **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 - Detecting emoji spam in user-generated content moderation **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 **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 standard, including skin tone and gender variants — up from the original 176. - The 'Face with Tears of Joy' emoji was named Oxford Dictionaries' Word of the Year in 2015, the first time a pictograph received the honor. *Tags:* emoji, count --- ### [Zalgo Text](https://devtools.surf/tools/zalgo-generator/) Corrupt normal text with diacritical fury for fun **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 projects - Stress-testing text rendering in web and mobile applications **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:** - 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 originated from a 2004 Something Awful forum post about a fictional eldritch entity that corrupts everything it touches. - Some websites and apps strip combining characters to prevent Zalgo text from breaking layouts — Discord, for example, limits the number of combining marks. *Tags:* zalgo, fun, text --- ### [SpongeBob Case](https://devtools.surf/tools/spongebob-case/) aLtErNaTiNg cAsE gEnErAtOr — memes only **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 content for brand engagement - Friends settling debates with maximum passive-aggressive energy **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 **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 used on early internet forums and BBS systems in the 1990s, long before it became associated with SpongeBob or sarcasm. - Twitter reported a 75% spike in SpongeBob meme engagement during May 2017, the month the Mocking SpongeBob meme went viral on Reddit and Twitter. *Tags:* case, meme, fun --- ### [Dice Roller](https://devtools.surf/tools/dice-notation-roller/) Roll standard RPG dice notation — 3d6+2, 2d20-1, mixed **Use cases:** - Tabletop RPG players rolling dice during online game sessions - Game developers testing probability distributions for combat mechanics - Math teachers demonstrating probability concepts with interactive dice rolls - Board game designers prototyping mechanics with custom dice expressions **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 for transparency **Fun facts:** - Dice notation (NdX) was popularized by Dungeons & Dragons in 1974, created by Gary Gygax and Dave Arneson. The d20 became the game's most iconic die. - A standard 7-die RPG set (d4, d6, d8, d10, d10%, d12, d20) was standardized by TSR in the late 1970s and hasn't changed in over 45 years. - Mathematically fair dice must have faces that are congruent — this limits fair dice to 5 Platonic solids (d4, d6, d8, d12, d20) plus special shapes like d10. *Tags:* dice, rpg, random --- ### [Age on Other Planets](https://devtools.surf/tools/age-in-planets/) Convert your Earth age to Mercury, Venus, Mars, Jupiter … even Pluto **Use cases:** - Science educators teaching orbital mechanics to students - Space enthusiasts exploring planetary period comparisons - Party hosts creating fun age conversation starters - Astronomy students calculating relative planetary year lengths **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 orbits **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 completed only one full orbit since its discovery in 1846. - Pluto was reclassified as a 'dwarf planet' by the International Astronomical Union on August 24, 2006, but its 248-year orbital period still makes for fun age calculations. *Tags:* age, planet, fun --- ### [Coin Flip Simulator](https://devtools.surf/tools/coin-flip-simulator/) Flip a fair coin N times — tallies + raw sequence. Optional seed. **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 action **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 consecutive heads in a fair coin flip experiment is 36, achieved by statistician Karl Pearson's assistant in 1900 after 24,000 flips. - Cryptographically secure random number generators (CSPRNGs) produce better randomness than physical coin flips — real coins have manufacturing imperfections that introduce bias. *Tags:* coin, random --- ### [Random List Picker](https://devtools.surf/tools/random-list-picker/) Pick a winner from a list — shows the full shuffled order too **Use cases:** - Team leads picking random reviewers for code review assignments - Teachers selecting random students for classroom participation - Raffle organizers drawing winners from a participant list - Agile teams randomly assigning daily standup speaking order **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 **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 Fisher-Yates shuffle algorithm, published in 1938 and computerized by Richard Durstenfeld in 1964, is the standard O(n) method for generating unbiased random permutations. - JavaScript's Math.random() uses the xorshift128+ algorithm in V8 (Chrome/Node.js) — it's fast but not cryptographically secure, which is fine for picking raffle winners. *Tags:* random, picker, raffle --- ### [Decision Wheel](https://devtools.surf/tools/decision-wheel/) Spin a wheel of N options and get the top 5 picks in random order **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 random selections - Product managers prioritizing backlog items with a fun spin **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 **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 Philosophy.' - The TV show 'Wheel of Fortune' premiered in 1975 and is the longest-running syndicated game show in U.S. history, with over 8,000 episodes aired. - Modern web spinning wheels use CSS transforms with cubic-bezier easing functions to simulate realistic deceleration physics — the outcome is determined before the animation begins. *Tags:* decision, random --- ### [Fantasy Name Generator](https://devtools.surf/tools/fantasy-name-generator/) Generate fantasy/elvish-style names for characters, towns, NPCs **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 - World-builders naming towns and landmarks for campaign maps **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 **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 decades. - Gary Gygax, co-creator of Dungeons & Dragons (1974), compiled early random name tables by mixing syllables from Finnish, Welsh, and Polynesian languages. - The most popular fantasy name generator websites collectively receive over 10 million monthly visits, driven largely by D&D's resurgence during the COVID-19 pandemic. *Tags:* fantasy, name, rpg --- ### [Compound Word Finder](https://devtools.surf/tools/compound-word-finder/) Split compound words (rainbow → rain+bow, moonlight → moon+light) **Use cases:** - ESL students learning English compound word structure - Copywriters analyzing word composition for brand naming - Linguists studying morphological patterns in compound formation - Crossword puzzle creators decomposing words for clue design **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 **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 is famous for extremely long compound words — the longest official one, Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz (63 letters), was a real law repealed in 2013. - The Oxford English Dictionary contains over 60,000 compound words, and new ones are coined constantly — 'doomscrolling' and 'deskercise' are recent additions. *Tags:* compound, word, english --- ### [Word Scrambler](https://devtools.surf/tools/word-scrambler/) Typoglycemia-style scramble: keep first+last letter, shuffle middle **Use cases:** - Teachers creating reading comprehension exercises for students - Puzzle designers generating word-scramble game content - Linguists demonstrating how human pattern recognition works - Social media users creating shareable brain-teaser posts **Tips:** - First and last letters stay fixed while the middle shuffles - Demonstrates the typoglycemia reading phenomenon - Paste full sentences for a complete scrambled paragraph **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 research. - Actual research by Keith Rayner et al. (2006) showed that typoglycemia only works well for short words; words over 7 letters with scrambled middles significantly slow reading speed. - The human brain processes about 200-300 words per minute during normal reading, using pattern recognition rather than letter-by-letter decoding — which is why mild scrambling still works. *Tags:* scramble, puzzle --- ## Developer Utilities ### [Collection JSON → cURL](https://devtools.surf/tools/collection-to-curl/) Convert Collection JSON v2.1 requests into cURL one-liners **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 reproducible API test scripts from collection exports **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 **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 contributions from over 2,400 developers since its inception in 1998. - Collection JSON v2.1 can encode authentication, headers, body, and pre-request scripts — but cURL conversion typically extracts only the HTTP essentials. *Tags:* collection, curl, convert, http --- ### [Git Diff → HTML](https://devtools.surf/tools/git-diff-to-html/) Convert unified git diff output to syntax-highlighted 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 visualizations in presentation slides **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 **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 across pull requests, issues, and commit views. - The first syntax-highlighting diff tool was likely xxdiff, created by Martin Blais in 2001, which offered a three-way visual merge. *Tags:* git, diff, html, highlight --- ### [Regex Visualizer](https://devtools.surf/tools/regex-visualizer/) Visualize regex patterns as a readable railroad diagram (text) **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 concepts using interactive visual diagrams **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 **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 diagrams) were popularized by Niklaus Wirth in the 1970s for documenting the Pascal programming language. - Catastrophic backtracking in regex caused a global Cloudflare outage on July 2, 2019, taking down millions of websites for 27 minutes. *Tags:* regex, visualize, railroad, diagram --- ### [Makefile Explainer](https://devtools.surf/tools/makefile-explainer/) Parse a Makefile and explain each target and its dependencies **Use cases:** - Understand unfamiliar Makefiles in inherited codebases - Document build targets for team reference - Debug build failures by tracing target dependency chains - Onboard new contributors to complex build systems **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 **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 written by Richard Stallman and Roland McGrath, first released in 1988. - Makefiles use tabs (not spaces) for indentation — a deliberate choice by Feldman who later called it 'one of the worst design decisions in Unix.' *Tags:* makefile, explain, target, build --- ### [Shell Script Linter](https://devtools.surf/tools/shell-script-linter/) Check shell scripts for common issues and bad practices **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 - Review CI/CD pipeline scripts for reliability issues **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 **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 Stephen Bourne at Bell Labs in 1979; Bash (Bourne Again Shell) was created by Brian Fox for GNU in 1989. - Unquoted variables in shell scripts are the single most common source of bugs, responsible for path injection, word splitting, and glob expansion issues. *Tags:* shell, bash, lint, script --- ### [GitHub Actions Visualizer](https://devtools.surf/tools/github-actions-visualizer/) Parse a GitHub Actions workflow and show job/step dependencies **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 contributors understanding complex multi-job workflows **Tips:** - Collapse long workflows to focus on failing jobs - Check for circular dependencies between job steps - Use the graph view to spot parallelizable jobs **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 workflow can contain up to 256 jobs, and each job can run up to 1,000 API requests per hour. - The 'needs' keyword in GitHub Actions was inspired by Makefile dependency graphs, a concept dating back to Stuart Feldman's 1976 Make utility at Bell Labs. *Tags:* github, actions, workflow, ci --- ### [HAR File Viewer](https://devtools.surf/tools/har-file-viewer/) Parse and summarize HTTP Archive (HAR) files **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 engineers analyzing third-party script impact **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 **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 generate a HAR file with over 200 entries, sometimes exceeding 10 MB in size. - HAR files can accidentally contain sensitive data like cookies and auth tokens — the spec includes a 'comment' field to flag redacted entries. *Tags:* har, http, archive, network --- ### [API Response Mocker](https://devtools.surf/tools/api-response-mocker/) Generate mock API JSON responses from a URL + method description **Use cases:** - Frontend developers building UIs before the backend is ready - QA engineers creating deterministic test fixtures - Mobile developers working offline with simulated endpoints - Technical writers generating example responses for API docs **Tips:** - Specify response status codes to test error handling - Include nested objects for realistic mock structures - Define array lengths to simulate paginated responses **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 around 2012, overtaking XML — despite Douglas Crockford specifying JSON back in 2001. - Netflix's Polly.js, released in 2018, popularized recording and replaying HTTP interactions for frontend testing. *Tags:* api, mock, response, json --- ### [GraphQL Query Builder](https://devtools.surf/tools/graphql-query-builder/) Generate GraphQL queries from a schema definition **Use cases:** - Frontend developers building queries from unfamiliar schemas - Mobile developers optimizing data fetching with precise field selection - API consumers exploring available types and relationships - Backend developers prototyping resolver logic from query shapes **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 **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. - Unlike REST, a single GraphQL query can replace dozens of API calls — Facebook reported that switching to GraphQL reduced mobile data usage by up to 50% in some cases. - The GraphQL specification is maintained by the GraphQL Foundation under the Linux Foundation, with companies like Shopify, GitHub, and Twitter as major adopters. *Tags:* graphql, query, schema, build --- ### [OpenAPI → TypeScript](https://devtools.surf/tools/openapi-to-typescript/) Generate TypeScript interfaces from an OpenAPI schema **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 - Full-stack teams sharing types between server and client codebases **Tips:** - Generate interfaces for request bodies and response types - Use readonly modifiers for immutable response properties - Include enum types from OpenAPI string enumerations **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 3.1 specification, released in 2021, achieved full alignment with JSON Schema, resolving years of subtle incompatibilities between the two standards. - TypeScript's type system is Turing-complete — you can technically encode a full OpenAPI schema as a type-level program, which projects like ts-rest and zodios exploit. *Tags:* openapi, typescript, generate, interface --- ### [Diff Patch Applier](https://devtools.surf/tools/diff-patch-applier/) Apply a unified diff patch to source text **Use cases:** - Developers applying code review patches to local branches - Open-source maintainers testing contributor-submitted patches - CI systems applying hotfix patches during emergency deployments - Documentation teams applying text corrections from diff files **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 **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 Wall created the 'patch' utility in 1985 — it became so essential to open-source development that it was one of the first tools installed on any Unix system. - Git internally stores commits as snapshots, not diffs — the diff is computed on-the-fly, which is why git can show diffs between any two commits almost instantly. *Tags:* diff, patch, apply, unified --- ### [GraphQL Introspection → SDL](https://devtools.surf/tools/graphql-introspection-to-sdl/) Convert GraphQL introspection JSON to SDL schema **Use cases:** - API developers converting runtime schemas to version-controlled SDL files - Security auditors documenting API surface area from introspection - Migration teams recreating schemas from legacy GraphQL endpoints - DevOps engineers generating schema docs from running services **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 **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 production APIs disable introspection to prevent schema leakage — Apollo Server has it off by default in production since Apollo Server 4, released in 2022. - SDL (Schema Definition Language) was not part of the original GraphQL spec — it was added in the June 2018 specification update after widespread community adoption. *Tags:* graphql, introspection, sdl, schema --- ### [HTTP Request Replayer](https://devtools.surf/tools/http-request-replayer/) Generate fetch/axios/curl code from raw HTTP request text **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 penetration testing - API debuggers generating shareable reproduction steps from traffic **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 **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 API was introduced in 2015 as a modern replacement for XMLHttpRequest — unlike XHR, it uses Promises and was designed by the WHATWG rather than the W3C. - Axios, created by Matt Zabriskie in 2014, became the most popular HTTP client library on npm by offering automatic JSON parsing and request interception that fetch lacked. *Tags:* http, request, replay, fetch --- ### [cURL → fetch()](https://devtools.surf/tools/curl-to-fetch/) Convert a curl command into a JS fetch() call **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 integration tests - Migrating shell-based API calls to a Node.js application **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 fields **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 replacement for XMLHttpRequest and became a living standard through the WHATWG in 2015. - cURL is installed on virtually every Unix system and has been downloaded over 10 billion times, making it one of the most widely deployed software packages ever. *Tags:* curl, fetch, convert --- ### [Git Log Parser](https://devtools.surf/tools/git-log-parser/) Parse git log output into structured JSON **Use cases:** - Generating structured changelogs from raw git log output - Analyzing commit frequency patterns for team retrospectives - Extracting commit metadata for automated release notes - Building contribution dashboards from parsed git history **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 information **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 contains over 1.2 million commits from more than 20,000 contributors, making it one of the largest Git repositories in existence. - Git's name is British slang for an unpleasant person — Linus Torvalds joked he names all his projects after himself. *Tags:* git, log, parse --- ### [HTTP → cURL Builder](https://devtools.surf/tools/http-curl-builder/) Build a curl command from method, URL, headers & body fields **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 - Assembling complex multi-header curl commands for webhook testing **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 **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 FTP, SMTP, LDAP, and even Gopher — not just HTTP. - The curl project has received contributions from over 2,800 developers and fixes an average of 60+ bugs per release cycle. *Tags:* curl, http --- ### [SemVer Bump](https://devtools.surf/tools/semver-bump/) Compute next major / minor / patch / prerelease **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 distributions - Validating version increments during pull request reviews **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 **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 0.y.z is for initial development and anything may change at any time — the public API should not be considered stable. - npm adopted SemVer as its versioning standard from the very beginning, and the ~ and ^ range operators in package.json are SemVer-aware. *Tags:* semver, version --- ### [Apache/Nginx Log Parser](https://devtools.surf/tools/apache-log-parser/) Parse combined log format lines into JSON (host, status, UA…) **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 logs into structured JSON for Elasticsearch - Developers debugging specific HTTP status codes from server access logs **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 in your logs **Fun facts:** - The Combined Log Format originated with NCSA HTTPd in 1993 and was adopted by Apache in 1995. Nginx uses the same format by default, ensuring tool compatibility. - A single busy web server can generate over 1 GB of access logs per day — log rotation (logrotate) was created to prevent disk space exhaustion. - The Common Log Format (CLF) has 7 fields; the Combined format adds Referer and User-Agent, making it the de facto standard for web server analytics. *Tags:* log, apache, nginx --- ## Game Dev ### [Unity C# Class Generator](https://devtools.surf/tools/unity-class-generator/) Generate Unity MonoBehaviour, ScriptableObject, or Editor scripts from a template **Use cases:** - Game developers scaffolding new MonoBehaviour components quickly - Unity beginners learning proper class structure and conventions - Tool developers generating Editor scripts for custom inspectors - Game designers creating ScriptableObject data containers for balancing **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 Inspector **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's base component class, derives from Behaviour > Component > Object — this deep inheritance chain is why Unity moved toward ECS (Entity Component System) in 2018. - Unity C# scripts are compiled by either Mono or IL2CPP — IL2CPP converts C# to C++ before native compilation, improving performance by 1.5-3x on mobile platforms. *Tags:* unity, csharp, class, monobehaviour --- ### [Unity Prefab Inspector](https://devtools.surf/tools/unity-prefab-inspector/) Parse and display Unity .prefab YAML structure in a readable format **Use cases:** - Unity developers debugging prefab serialization issues - Technical artists tracing component references in complex prefabs - Version control users resolving merge conflicts in prefab YAML - Build engineers auditing prefab structure for optimization **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 **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 format uses a custom tag system (e.g., !u!1 for GameObject, !u!4 for Transform) that maps to internal class IDs — there are over 200 documented class IDs. - Nested prefabs, one of Unity's most requested features, finally shipped in Unity 2018.3 after years of development — previously, prefab-in-prefab workflows required third-party solutions. *Tags:* unity, prefab, yaml, inspect --- ### [Sprite Sheet Calculator](https://devtools.surf/tools/sprite-sheet-calculator/) Calculate frame dimensions, UV coords, and animation timing from sprite sheet parameters **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 from image atlases - Mobile game developers optimizing texture atlas UV coordinates **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 bleeding **Fun facts:** - Sprite sheets date back to the early 1980s arcade era — the original Super Mario Bros. (1985) fit all character animations into a single 256x256 pixel sheet. - TexturePacker, created by Andreas Loew in 2010, became the industry standard for sprite sheet packing — its algorithm can achieve 95%+ packing efficiency using MaxRects. - UV coordinates (U for horizontal, V for vertical) originated in 3D rendering terminology from the 1970s — letters U and V were chosen because X, Y, Z were already used for 3D space. *Tags:* sprite, sheet, animation, frames --- ### [Game Math Calculator](https://devtools.surf/tools/game-math-calculator/) Calculate vectors, distances, dot products, lerp, and common game math operations **Use cases:** - Game programmers calculating distances between game entities - AI developers computing direction vectors for NPC pathfinding - Physics programmers debugging collision detection math - Shader developers verifying lighting calculation vectors **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 distances **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 determines the angle between vectors — a positive value means they point roughly the same direction, zero means perpendicular, negative means opposite. - The cross product, essential for 3D game math, was formalized by Josiah Willard Gibbs at Yale in 1881 — the same mathematician who founded vector analysis. *Tags:* vector, math, distance, lerp --- ### [Game Color Palette Generator](https://devtools.surf/tools/color-palette-game/) Generate game-ready color palettes with hex, RGB, and normalized float values **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 uniforms - UI designers building in-game HUD color systems **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 **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 same principles as film — warm colors (red, orange) signal danger or aggression, while cool colors (blue, green) indicate safety or healing. - Shader languages use normalized floats (0.0-1.0) instead of 0-255 integers for colors because GPU hardware natively operates on floating-point values in the rendering pipeline. *Tags:* color, palette, game, shader --- ### [Tilemap Data Generator](https://devtools.surf/tools/tilemap-generator/) Generate 2D tilemap arrays for grid-based games from a visual text grid **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 from sketches - Educators teaching 2D game development with grid-based maps **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 **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 original Legend of Zelda (1986) used only 256 unique 8x8 pixel tiles to build the entire overworld — the same tiles were reused with different palettes for variety. - Tiled, the open-source map editor created by Thorsten Gunkel in 2008, became the de facto standard for 2D tilemaps with its TMX format supported by most game engines. *Tags:* tilemap, grid, 2d, level --- ### [Damage Formula Calculator](https://devtools.surf/tools/damage-formula-calculator/) Calculate RPG damage with attack, defense, crit, elemental modifiers **Use cases:** - RPG developers balancing combat damage curves across levels - Game designers testing difficulty scaling with different stats - Tabletop RPG creators validating homebrew damage formulas - QA testers verifying combat math matches design specifications **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 calculations **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 battles. - Final Fantasy's damage formulas have evolved dramatically — FF1 (1987) used simple subtraction, while FF12 (2006) uses a quadratic formula that makes stat scaling exponential. - The concept of 'effective HP' (HP multiplied by defense factor) was formalized by the theorycrafting community in World of Warcraft around 2005-2006. *Tags:* damage, rpg, formula, combat --- ### [Loot Table Generator](https://devtools.surf/tools/loot-table-generator/) Generate weighted loot drop tables with probability calculations **Use cases:** - Game designers creating balanced item drop probability tables - RPG developers implementing tiered rarity systems - Mobile game developers designing gacha/loot box distributions - Tabletop RPG dungeon masters generating random treasure tables **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 after N attempts **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' mechanic, patented by Blizzard in 2016 for Hearthstone card packs, guarantees a rare drop after a certain number of attempts to reduce frustration. - Gacha game loot tables are legally regulated in several countries — Japan's kompu gacha (complete gacha) was banned in 2012, and China requires published drop rates since 2017. *Tags:* loot, drop, probability, rpg --- ### [Shader Uniform Generator](https://devtools.surf/tools/shader-uniform-generator/) Generate GLSL/HLSL uniform declarations from parameter descriptions **Use cases:** - Graphics programmers scaffolding shader parameter declarations - Game developers converting material properties to shader uniforms - Technical artists setting up custom shader inputs for visual effects - Engine developers generating uniform buffer layouts for rendering **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 range **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 shader programming means a value that stays constant across all vertices/fragments in a single draw call — it comes from the mathematical concept of uniform distribution. - HLSL was created by Microsoft for DirectX 9 in 2002 — despite being competitors, GLSL and HLSL are syntactically similar enough that cross-compilation tools like SPIRV-Cross can convert between them. *Tags:* shader, glsl, hlsl, uniform --- ### [Game Resolution Scaler](https://devtools.surf/tools/game-resolution-scaler/) Calculate render resolutions, aspect ratios, and DPI for different platforms **Use cases:** - Game developers planning multi-platform resolution targets - Mobile developers calculating DPI-aware render resolutions - QA teams verifying aspect ratio support across display types - Console developers optimizing resolution for performance budgets **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 quality **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 renders most games at 720p in handheld mode and 1080p when docked — dynamic resolution scaling adjusts frame-by-frame to maintain 30 or 60 FPS targets. - Apple's Retina displays, introduced with iPhone 4 in 2010 at 326 PPI, forced game developers to support 2x and 3x asset scaling, doubling and tripling texture memory requirements. *Tags:* resolution, aspect, dpi, platform --- ### [FPS ↔ Frame Time Converter](https://devtools.surf/tools/fps-ms-converter/) Convert between FPS and milliseconds per frame with performance budgets **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 projects - VR developers ensuring consistent 90 FPS for motion sickness prevention **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 **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 Carmack's id Software pioneered 60 FPS gameplay with Quake III Arena in 1999, when most games targeted 30 FPS — this standard persists in competitive gaming today. - At 120 FPS, each frame has only 8.33ms to render — this is why PS5 and Xbox Series X games that target 120 FPS often reduce resolution or visual fidelity significantly. *Tags:* fps, frametime, performance, budget --- ### [Easing Function Generator](https://devtools.surf/tools/easing-function-generator/) Generate easing functions in C#, GLSL, JS with visual curve preview **Use cases:** - Game developers implementing smooth camera and UI transitions - Animation programmers choosing easing curves for character movement - Frontend developers generating easing functions for web animations - Technical artists tuning interpolation curves for visual effects **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 **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 all platforms. - The word 'tween' comes from 'in-betweening,' a term from traditional animation where junior artists drew the frames between key poses — Disney formalized this workflow in the 1930s. - Easing functions are mathematically just polynomial curves — ease-in-cubic is simply t^3, while ease-in-out-cubic splices two cubic curves together at the midpoint. *Tags:* easing, tween, animation, curve --- ### [Game Event System Generator](https://devtools.surf/tools/game-event-system-generator/) Generate event bus / observer pattern boilerplate for Unity, Godot, or JS **Use cases:** - Game developers implementing decoupled communication between systems - Unity developers generating type-safe event systems for gameplay - Godot developers scaffolding signal-based architecture patterns - Indie developers reducing spaghetti code with structured event flow **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 **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. - Unity's built-in UnityEvent system uses serialized function references — while convenient for designers, it's roughly 5-7x slower than C# delegates for performance-critical code. - The event bus pattern in game development is sometimes called the 'God object anti-pattern' when overused — experienced developers scope events to specific systems to maintain debuggability. *Tags:* event, observer, pattern, system --- ### [State Machine Generator](https://devtools.surf/tools/state-machine-generator/) Generate finite state machine code from state/transition definitions **Use cases:** - Game AI programmers defining NPC behavior state transitions - UI developers managing complex multi-step form workflows - Game developers implementing character animation state machines - Backend developers generating state machines for order processing **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 before coding **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 (1980) uses a simple FSM with four states — Chase, Scatter, Frightened, and Eaten — creating the illusion of intelligent ghost behavior with minimal logic. - Statecharts, an extension of FSMs by David Harel in 1987, added hierarchy and concurrency — they directly inspired libraries like XState, which has over 25,000 GitHub stars. *Tags:* state, machine, fsm, ai --- ### [Platformer Physics Calculator](https://devtools.surf/tools/platformer-physics-calculator/) Calculate jump height, gravity, velocity for platformer feel **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 fall speed ratios - Game jam developers quickly setting up satisfying movement physics **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 edge-of-platform jumps **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 term 'coyote time' comes from Wile E. Coyote running off cliffs — it gives players a few extra frames to jump after leaving a platform edge, typically 6-10 frames (100-167ms). - Celeste's developer Matt Thorson shared that the game uses over 10 physics assists including coyote time, jump buffering, and corner correction — all invisible to players but essential to feel. *Tags:* platformer, physics, jump, gravity --- ### [Asset Bundle Size Estimator](https://devtools.surf/tools/asset-bundle-size-estimator/) Estimate build sizes for textures, audio, meshes across platforms **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 strategies - Producers tracking content size budgets across development milestones **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 simultaneously **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 asset system, released in 2019, enabled on-demand asset downloading — some mobile games reduced initial install size from 2 GB to under 100 MB using this approach. - The Google Play Store enforces a 200 MB APK size limit (increased from 100 MB in 2022), and Apple's App Store warns users about downloads over 200 MB on cellular — making size estimation critical. *Tags:* bundle, size, texture, audio, asset --- ## Animation / CSS ### [CSS Keyframe Generator](https://devtools.surf/tools/css-keyframe-generator/) Generate @keyframes animations from step definitions **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 - Marketing developers adding attention-grabbing hero animations **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 final state **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. - The 12 Principles of Animation from Disney's 1981 book 'The Illusion of Life' directly influence CSS animation design — squash, stretch, and anticipation all apply to UI motion. - Hardware-accelerated CSS animations using transform and opacity can run at 60fps on the compositor thread, while animations on layout properties like width trigger expensive repaints. *Tags:* css, keyframes, animation, generate --- ### [Loading Spinner Generator](https://devtools.surf/tools/loading-spinner-generator/) Generate CSS-only loading spinners and progress indicators **Use cases:** - Frontend developers adding loading states to async operations - UI designers creating branded spinner components - Mobile web developers building lightweight loading indicators - Component library authors providing accessible spinner primitives **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 **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. - Research by Nielsen Norman Group found that users perceive a delay as acceptable under 1 second — spinners should appear after 1 second and be replaced by skeleton screens after 2-3 seconds. - CSS-only spinners became practical after CSS3 animations shipped in all major browsers around 2012-2013, eliminating the need for animated GIF spinners that were common since the 1990s. *Tags:* spinner, loading, css, animation --- ### [Skeleton Screen Generator](https://devtools.surf/tools/skeleton-screen-generator/) Generate shimmer skeleton placeholder CSS for loading states **Use cases:** - Frontend developers implementing loading states for content cards - Mobile app developers creating smooth perceived-instant page loads - Design system teams standardizing loading patterns across products - UX engineers reducing bounce rates on content-heavy pages **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 **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 study by Bill Chung found that skeleton screens reduced perceived load time by up to 31% compared to blank screens and spinners in user perception tests. - LinkedIn, YouTube, and Slack all use skeleton screens — the shimmer effect creates an illusion of progress that reduces user anxiety during loading, leveraging the 'progress bar' psychological effect. *Tags:* skeleton, shimmer, loading, placeholder --- ### [Hover Effect Generator](https://devtools.surf/tools/hover-effect-generator/) Generate CSS hover effects for buttons, cards, and links **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 effects - Portfolio developers building visually impressive link animations **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 **Fun facts:** - The CSS :hover pseudo-class was introduced in CSS2 in 1998, but early implementations in IE6 only supported :hover on anchor () elements, leading to creative workarounds. - Touch devices don't have a true hover state — CSS4's @media (hover: hover) query, reaching full browser support around 2020, lets developers detect hover capability. - The 'hover intent' pattern, popularized by Brian Cherne's jQuery plugin in 2007, waits for the mouse to settle before triggering hover effects, preventing accidental activations. *Tags:* hover, effect, css, transition --- ### [CSS Transition Playground](https://devtools.surf/tools/css-transition-playground/) Build and preview CSS transitions with property, duration, and easing controls **Use cases:** - Frontend developers fine-tuning transition timing for UI polish - Designers experimenting with duration and easing combinations - Component library authors documenting transition specifications - UX engineers optimizing perceived performance of state changes **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 feel **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 timing function is 'ease' (cubic-bezier(0.25, 0.1, 0.25, 1.0)), not 'linear' — many developers don't realize their transitions are already eased. - CSS transitions only animate between two states (A to B), while CSS animations can define multiple keyframe steps — this fundamental difference determines which tool to use. *Tags:* transition, css, easing, playground --- ### [Text Animation Generator](https://devtools.surf/tools/text-animation-generator/) Generate typewriter, fade-in, bounce, and other text animations **Use cases:** - Landing page developers creating engaging hero text animations - Portfolio developers building attention-grabbing introductions - Marketing teams adding animated headlines to campaign pages - Presentation developers creating slide-like text reveal effects **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 for impact **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 steps() timing function in CSS, perfect for typewriter effects, was inspired by traditional animation's 'held frames' technique where drawings are shown for multiple frames. - Kinetic typography — animated text as an art form — originated in the 1959 Alfred Hitchcock film 'North by Northwest' with Saul Bass's animated title sequence. *Tags:* text, animation, typewriter, fade --- ### [Scroll Animation Generator](https://devtools.surf/tools/scroll-animation-generator/) Generate CSS scroll-triggered animation code with IntersectionObserver **Use cases:** - Frontend developers adding scroll-reveal animations to sections - Marketing sites building parallax and progressive disclosure effects - Portfolio developers creating engaging scroll-driven storytelling - Landing page developers implementing lazy-load animation patterns **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 elements appear **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 IntersectionObserver, scroll-triggered animations required listening to the scroll event — which fires up to 60 times per second, often causing the main thread to lag. - The CSS scroll-timeline property, reaching browsers in 2023-2024, enables scroll-linked animations entirely in CSS without any JavaScript or IntersectionObserver. *Tags:* scroll, animation, intersection, reveal --- ### [Particle Effect Generator](https://devtools.surf/tools/particle-effect-generator/) Generate CSS-only particle animations (confetti, snow, stars) **Use cases:** - Frontend developers adding celebration effects to success states - Marketing developers creating seasonal page decorations - Game UI developers building CSS-only ambient background effects - Event site developers adding festive confetti and sparkle effects **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 interactions **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 dozens of animated pseudo-elements and box-shadows — while GPU-accelerated, they can't match Canvas or WebGL particles which handle 10,000+ elements easily. - The confetti.js library by Kiril Vatev became a viral GitHub project because developers realized that adding confetti to success states increased user satisfaction measurably. *Tags:* particle, confetti, snow, css --- ### [Gradient Animation Generator](https://devtools.surf/tools/gradient-animation-generator/) Generate animated gradient backgrounds with CSS **Use cases:** - Web designers creating eye-catching hero section backgrounds - SaaS landing page developers building premium visual polish - Creative developers implementing mood-setting ambient backgrounds - Brand designers maintaining dynamic yet on-brand color transitions **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 background motion **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 syntax iterations. - Animating the background-position of an oversized gradient is more performant than animating background-color, because position changes can be GPU-composited while color changes cannot. - Stripe's famous animated gradient header, introduced around 2016, inspired thousands of imitators — it uses a large gradient background animated with CSS keyframes at 400% background-size. *Tags:* gradient, animation, background, css --- ### [Button Animation Generator](https://devtools.surf/tools/button-animation-generator/) Generate animated button styles with ripple, glow, and morphing effects **Use cases:** - Frontend developers building interactive form submit buttons - Component library authors creating reusable animated button primitives - Mobile web developers adding touch-friendly button feedback - E-commerce developers improving add-to-cart button engagement **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 **Fun facts:** - Google's Material Design ripple effect, introduced in 2014, was inspired by the physical world — ink spreading on paper. The original implementation required JavaScript to track click coordinates. - CSS :active state animations have existed since CSS2 (1998), but most button animations remained JavaScript-only until CSS transitions and animations gained full browser support around 2013. - The 'morphing button' pattern — where a button transforms into a loading spinner or success checkmark — was popularized by UI designers on Dribbble around 2015-2016. *Tags:* button, animation, ripple, glow --- ## Calculators ### [Basic Calculator](https://devtools.surf/tools/basic-calculator/) Evaluate math expressions with +, -, *, /, parentheses, and functions **Use cases:** - Quick arithmetic during code reviews without leaving the browser - Evaluating nested math expressions from API documentation - Verifying formula outputs when debugging financial calculations - Converting between number systems during hardware projects **Tips:** - Use parentheses to control order of operations - Chain multiple expressions separated by semicolons - Try built-in functions like sqrt, pow, and abs **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 standardized in the early 1900s, though mathematicians debated grouping rules for centuries before. - The first electronic general-purpose calculator, ENIAC, weighed 30 tons and consumed 150 kilowatts of power in 1945. *Tags:* calculator, math, expression, evaluate --- ### [Percentage Calculator](https://devtools.surf/tools/percentage-calculator/) Calculate percentages, discounts, tips, and markup **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 change between deployment metrics **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 **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 introduced in West Virginia in 1921, making percentage calculations a daily necessity for Americans. - The concept of compound interest — percentages on percentages — was described by Luca Pacioli in his 1494 book 'Summa de Arithmetica'. *Tags:* percentage, discount, tip, markup --- ### [Unit Converter](https://devtools.surf/tools/unit-converter-calc/) Convert length, weight, temperature, speed, and data units **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 between miles and kilometers for geolocation features **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 **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 Planck constant, ending its 130-year dependence on a physical platinum-iridium cylinder in Paris. - There are exactly 1,852 meters in a nautical mile, derived from one minute of arc along a meridian of the Earth. *Tags:* unit, convert, length, weight, temperature --- ### [Loan / EMI Calculator](https://devtools.surf/tools/loan-calculator/) Calculate monthly payments, total interest, and amortization **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 - Validating financial calculation logic in a fintech application **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 **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 standard in the US after the Federal Housing Administration was created in 1934 during the Great Depression. - The formula for EMI (Equated Monthly Installment) uses the same compound interest math that Jacob Bernoulli explored in 1683. *Tags:* loan, emi, mortgage, interest, payment --- ### [Number Formatter](https://devtools.surf/tools/number-formatter/) Any number → grouped, compact, scientific, hex, binary, percent **Use cases:** - Frontend developers formatting currency and statistics for display - Data analysts converting between number representations for debugging - Embedded developers checking hex and binary values during hardware work - International teams previewing locale-specific number formatting **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 decimal, hexadecimal, binary, and percentage in one step **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 double-precision floating point (used by JavaScript) can exactly represent integers up to 2^53 (9,007,199,254,740,992) — beyond that, precision is lost. - Scientific notation was formalized by Rene Descartes in the 17th century, but the modern E notation (1.5E+10) was popularized by early FORTRAN compilers in the 1950s. *Tags:* number, format, locale --- ### [Tip Calculator](https://devtools.surf/tools/tip-calculator/) Quick tip + per-person split — US-style 15/18/20/22% presets **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 - Service industry workers verifying customer tip calculations **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 **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 range has crept upward over decades: 10% was generous in the 1950s, 15% became the norm by the 1980s, and 20% is now considered standard in 2024. - Japan, South Korea, and China generally consider tipping insulting or unnecessary — attempting to tip in many Japanese restaurants will result in staff chasing you down to return the money. *Tags:* tip, restaurant --- ### [BMI Calculator](https://devtools.surf/tools/bmi-calculator/) Body mass index with WHO categories — metric or imperial **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 complementary measure **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, normal, overweight, obese) were standardized by the WHO in 1995. Before that, 'overweight' started at BMI 27.8 for men and 27.3 for women. - Quetelet's original formula used height^2 for mathematical simplicity, but research shows height^2.5 would be more accurate — taller people are systematically penalized by the standard formula. *Tags:* bmi, health --- ### [Mortgage Calculator](https://devtools.surf/tools/mortgage-calculator/) Monthly payment + total interest for any loan amount, rate, term **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 **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 offer 100-year mortgages that can be passed down through generations — the longest mortgage terms in the world. - The amortization formula used by every mortgage calculator was developed by actuaries in the 18th century and hasn't changed since — it's one of the oldest financial formulas still in daily use. *Tags:* mortgage, loan --- ### [Compound Interest Calculator](https://devtools.surf/tools/compound-interest-calculator/) Future value with configurable compounding + monthly contributions **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 + contributions from pure growth **Fun facts:** - The 'Rule of 72' is a shortcut: divide 72 by your annual rate to get doubling time. At 8% a year, money doubles every 9 years. - Albert Einstein allegedly called compound interest 'the eighth wonder of the world' — though there's no verified source for this quote, it appeared in print as early as 1916. - Continuous compounding (the mathematical limit as compounding periods approach infinity) uses the formula Pe^(rt), where e is Euler's number ~2.71828. *Tags:* compound, interest, savings --- ### [Discount Calculator](https://devtools.surf/tools/discount-calculator/) Final price after % off — plus total savings — for quick shopping math **Use cases:** - Shoppers calculating final price during sales events - E-commerce developers testing price display after promotions - Retail managers computing markdown savings for inventory reports - Budget-conscious consumers comparing deals across stores **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 **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 Friday, the biggest US discount shopping day, generated $9.8 billion in online sales in 2023 according to Adobe Analytics — a 7.5% increase over 2022. - The psychological 'left-digit effect' means $9.99 feels significantly cheaper than $10.00 to consumers, even though the difference is just one cent — a pricing trick dating to the 1880s. *Tags:* discount, shopping --- ### [Sales Tax Calculator](https://devtools.surf/tools/sales-tax-calculator/) Add any % sales tax to a subtotal — breakdown + grand total **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 invoices - Accountants verifying tax amounts on receipts and statements **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 **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 combined sales tax rate in the U.S. is in Tacoma, Washington at 10.25%, while the global maximum belongs to Hungary at 27% VAT. - Sales tax was first introduced in the United States by West Virginia in 1921, during the post-World War I economic downturn, and quickly spread to other states. *Tags:* sales-tax, shopping --- ### [Gas Mileage Calculator](https://devtools.surf/tools/gas-mileage-calculator/) MPG + L/100km + km/L — US or metric units in one 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 - Eco-conscious drivers monitoring their fuel consumption trends **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 **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 standard fuel efficiency metric in Europe and Canada, while the U.S. uses MPG — they are inversely related, which makes mental conversion tricky. - The most fuel-efficient non-electric production car ever made was the 2000 Honda Insight (first generation), achieving 70 MPG combined on the highway. *Tags:* mpg, mileage, fuel --- ### [Bill Splitter](https://devtools.surf/tools/bill-splitter/) Split a bill evenly with tip + optional per-person rounding kitty **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 dividing group lunch orders fairly **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 **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 dinners. - Venmo, launched in 2009, was originally created by Andrew Kortina and Iqram Magdon-Ismail specifically to solve the pain of splitting restaurant bills between friends. - The Dutch phrase 'going Dutch' (each paying their own share) dates to the 17th century and was originally a British insult implying Dutch people were too cheap to treat others. *Tags:* split, bill --- ### [GPA Calculator](https://devtools.surf/tools/gpa-calculator/) Compute unweighted 4.0 GPA from course | grade | credits lines **Use cases:** - College students calculating cumulative GPA after each semester - High school students tracking unweighted GPA for applications - Academic advisors verifying student standing calculations - Scholarship applicants confirming they meet minimum GPA thresholds **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 **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 because AP and honors courses typically add 0.5 to 1.0 extra points — some students graduate with GPAs above 5.0. - Many graduate programs set a minimum GPA of 3.0 for admission, but the average GPA of admitted students has been rising — a phenomenon called 'grade inflation' that started in the 1960s. *Tags:* gpa, school --- ### [Temperature Converter](https://devtools.surf/tools/temperature-converter/) Convert C / F / K / Rankine all at once — paste any of them **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 across unit systems - Physics students solving thermodynamics problems with mixed units **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 **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 Kelvin scale, defined by Lord Kelvin in 1848, starts at absolute zero (-273.15 C) where all molecular motion theoretically ceases. - The Rankine scale, used in some US engineering fields, is essentially Fahrenheit shifted to absolute zero — 0 Rankine equals 0 Kelvin, or -459.67 degrees Fahrenheit. *Tags:* temperature, celsius, fahrenheit --- ## Audio ### [Sample Audio Files](https://devtools.surf/tools/sample-audio/) Download forest-ambience clips in WAV, MP3, Opus, FLAC, AAC, WebM **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 optimization - Using reference audio for automated testing of transcription services **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 **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 Germany and standardized as ISO/IEC 11172-3 in 1993, revolutionizing digital music distribution. - The Opus codec, standardized in RFC 6716 (2012), is considered the best general-purpose audio codec, outperforming MP3 and AAC at all bitrates. *Tags:* audio, samples, download --- ### [Audio Converter](https://devtools.surf/tools/audio-converter/) Convert between WAV, MP3, Opus, AAC and more — 100% in-browser **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 CMS - Converting between formats for mobile app asset preparation **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% **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 many in-browser converters) can run FFmpeg-based audio processing at near-native speed directly in the browser. - AAC (Advanced Audio Coding) was designed as the successor to MP3 and was adopted by Apple for iTunes in 2003, becoming the default format for the iPod. *Tags:* audio, convert, mp3, wav --- ### [Audio Merger](https://devtools.surf/tools/audio-merger/) Join multiple clips back-to-back into one track **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 - Assembling audiobook chapters into complete section files **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 **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 (Digital Audio Workstations) like Pro Tools process audio at 96kHz or 192kHz sample rates, but 44.1kHz remains the CD standard since 1980. - The first digital audio workstation, Soundstream's editing system, was built in 1977 by Thomas Stockham and could splice audio non-destructively. *Tags:* audio, merge, join, concat --- ### [Audio Editor](https://devtools.surf/tools/audio-editor/) Trim, fade, amplify, change speed — all client-side **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 or podcasts - Amplifying quiet audio tracks without installing desktop software **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 **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 most popular free audio editor, was first released in 2000 by Dominic Mazzoni and Roger Dannenberg at Carnegie Mellon University. - The Web Audio API, which enables browser-based audio editing, became a W3C Recommendation in June 2021 after 10 years of development. *Tags:* audio, trim, fade, edit --- ## Cheatsheets ### [Git Cheatsheet](https://devtools.surf/tools/cheatsheet-git/) Everyday Git commands — setup, commit, branch, remote, undo **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 collaboration - Onboarding new developers with a concise Git command reference **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 **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 British slang for a foolish person — Torvalds said: 'I'm an egotistical bastard, and I name all my projects after myself.' - Over 100 million developers use GitHub (as of 2024), making Git the most widely adopted version control system in history. *Tags:* git, version-control, reference --- ### [Docker Cheatsheet](https://devtools.surf/tools/cheatsheet-docker/) Docker + Compose commands for images, containers, volumes, Dockerfile **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 configuration - Reviewing Dockerfile best practices during image optimization **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 **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, making them up to 100x faster to start than traditional virtual machines. - The Docker whale logo is named 'Moby Dock' and was designed in 2013 — the containers on its back represent the shipping container metaphor. *Tags:* docker, containers, devops --- ### [Regex Cheatsheet](https://devtools.surf/tools/cheatsheet-regex/) Character classes, quantifiers, anchors, groups, flags **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 validation - Reviewing regex flag options when writing search-and-replace patterns **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 capture patterns **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 flavors: Basic Regular Expressions (BRE) and Extended Regular Expressions (ERE), which differ in metacharacter escaping. - Catastrophic backtracking in regex can cause a single pattern to take exponential time — the Cloudflare outage on July 2, 2019, was caused by exactly this bug. *Tags:* regex, regular-expression, pattern --- ### [Markdown Cheatsheet](https://devtools.surf/tools/cheatsheet-markdown/) CommonMark + GitHub-flavored Markdown syntax at a glance **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 - Reviewing footnote and definition list syntax for technical writing **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 fenced blocks **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 Markdown, launched in 2014 after years of inconsistencies between Markdown implementations — GitHub adopted it in 2017. - GitHub Flavored Markdown (GFM) added tables, task lists, and strikethrough to the original spec, and processes over 200 million Markdown files in repositories. *Tags:* markdown, md, docs --- ### [Vim Cheatsheet](https://devtools.surf/tools/cheatsheet-vim/) Modal editing essentials — modes, motions, edits, files **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 file editing - Reviewing macro recording syntax for repetitive editing tasks **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 changes **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 until his passing in August 2023; the project is now community-maintained. - The :wq command (write and quit) has been typed billions of times, and 'how to exit vim' remains one of Stack Overflow's most viewed questions with over 3 million views. *Tags:* vim, neovim, editor --- ### [Bash / Shell Cheatsheet](https://devtools.surf/tools/cheatsheet-bash/) Navigation, text processing, pipes, processes, scripting basics **Use cases:** - Looking up loop syntax when writing deployment scripts - Referencing text processing commands for log file analysis - Finding process management commands during server troubleshooting - Reviewing file permission commands during security hardening **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 **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 McIlroy at Bell Labs in 1973 and is considered one of Unix's most important innovations. - Bash is the default shell on most Linux distributions and was macOS's default until Catalina (2019), when Apple switched to zsh due to licensing concerns. *Tags:* bash, shell, linux --- ### [SQL Cheatsheet](https://devtools.surf/tools/cheatsheet-sql/) SELECT, JOIN, aggregates, window functions, upsert **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 and MySQL - Reviewing aggregate functions when building dashboard analytics **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 **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 a trademark conflict with Hawker Siddeley, a British aircraft company. - PostgreSQL has been in continuous development since 1986, originally called POSTGRES by Michael Stonebraker at UC Berkeley. *Tags:* sql, postgres, mysql --- ### [kubectl Cheatsheet](https://devtools.surf/tools/cheatsheet-kubectl/) Inspect, logs, apply, scale, context switching for Kubernetes **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 during traffic spikes - Reviewing rollout commands when deploying new application versions **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 **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, meaning 'helmsman' or 'pilot' — the seven-spoked wheel in its logo represents the original codename 'Project Seven.' - kubectl (pronounced 'cube-control' or 'cube-C-T-L') processes over 5 billion API calls daily across the world's Kubernetes clusters. *Tags:* kubernetes, k8s, devops --- ### [npm / yarn / pnpm Cheatsheet](https://devtools.surf/tools/cheatsheet-npm/) Install, run, audit across all three package managers **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 package linking - Referencing publish commands when releasing packages to the registry **Tips:** - Compare equivalent commands across npm, yarn, and pnpm - Check the audit section for security vulnerability scanning - Review the workspace commands for monorepo management **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 address npm's speed and security issues — it introduced lockfiles, which npm later adopted as package-lock.json. - pnpm (performant npm) saves disk space by using a content-addressable store and hard links, reducing node_modules duplication by up to 70%. *Tags:* npm, yarn, pnpm --- ### [TypeScript Cheatsheet](https://devtools.surf/tools/cheatsheet-typescript/) Types, generics, utility types, narrowing, tsconfig essentials **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 type handling - Reviewing tsconfig options when setting up a new project **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 **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, meaning you can implement any computation at the type level — developers have built entire games in TypeScript types. - As of 2024, TypeScript is used by over 78% of JavaScript developers according to the State of JS survey, up from 21% in 2017. *Tags:* typescript, ts, types --- ### [CSS Flexbox Cheatsheet](https://devtools.surf/tools/cheatsheet-flexbox/) Container + item props, common patterns (centered, sidebar, sticky footer) **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 a sticky footer - Reviewing flex-wrap behavior for responsive grid-like layouts **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 distinction **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 justify-content: space-evenly value was not in the original Flexbox spec; it was added later and still isn't supported in some older browsers. - Flexbox was specifically designed for one-dimensional layouts (row OR column), while CSS Grid handles two-dimensional layouts — they are meant to be complementary. *Tags:* css, flexbox, layout --- ### [CSS Grid Cheatsheet](https://devtools.surf/tools/cheatsheet-grid/) Template, placement, auto-fit, named areas, holy grail **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 - Reviewing subgrid support for nested grid alignment **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 **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 property lets you define layouts using ASCII art-like named regions, making it one of the most visual CSS features ever created. - CSS Grid was proposed by Microsoft and first implemented in Internet Explorer 10 (2012) with a prefixed -ms- syntax before the standard was finalized. *Tags:* css, grid, layout --- ### [Tailwind CSS Cheatsheet](https://devtools.surf/tools/cheatsheet-tailwind/) Layout, spacing, colors, variants, and pro tricks **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 design mockup - Reviewing dark mode variant syntax for theme implementation **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 and padding values **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 (Just-in-Time) engine, introduced in v2.1 (2021), generates only the CSS classes you actually use, reducing build sizes by up to 95%. - The Tailwind CSS configuration file can generate over 17 million unique class combinations when considering all variants, but JIT ensures only used classes are output. *Tags:* tailwind, css, utility --- ### [Python Cheatsheet](https://devtools.surf/tools/cheatsheet-python/) Collections, comprehensions, dataclasses, useful stdlib modules **Use cases:** - Looking up dictionary comprehension syntax for data transformation - Referencing dataclass decorators when building data models - Finding pathlib methods for cross-platform file operations - Reviewing collections module classes for efficient data structures **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 modules **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 prints 'The Zen of Python' by Tim Peters, which includes 19 aphorisms (the 20th was intentionally left blank). - Python overtook JavaScript as the most popular language on GitHub in 2024, driven largely by the explosive growth of AI and machine learning projects. *Tags:* python, py, reference --- ### [JavaScript (ES2020+) Cheatsheet](https://devtools.surf/tools/cheatsheet-javascript/) Destructuring, nullish, async, modern array methods, gotchas **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 optional chaining - Bootcamp grads building muscle memory for async/await patterns **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 **Fun facts:** - JavaScript was created by Brendan Eich in just 10 days in May 1995, originally named Mocha, then LiveScript. - The nullish coalescing operator (??) was officially added in ES2020, solving a decade-old problem with falsy-value checks using ||. - Optional chaining (?.) was proposed in 2017 but took three years to reach Stage 4 and ship in ES2020. *Tags:* javascript, js, es2020 --- ### [React Hooks Cheatsheet](https://devtools.surf/tools/cheatsheet-react-hooks/) State, memo, effects, context, custom hooks, newer APIs **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 code review standards - Freelancers quickly referencing context and memo patterns mid-project **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 right one **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 call order — calling hooks conditionally breaks this internal linked list. - useReducer was inspired by Redux reducers, but Redux creator Dan Abramov actually joined the React team before hooks shipped. *Tags:* react, hooks, frontend --- ### [Nginx Cheatsheet](https://devtools.surf/tools/cheatsheet-nginx/) Reverse proxy, static + SPA fallback, HTTPS, ops commands **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 caching - Developers deploying React or Vue SPAs with proper fallback routing **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 deployments **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, making it the most-used web server ahead of Apache. - Nginx uses an asynchronous event-driven architecture instead of threads, which is why it handles high concurrency with minimal RAM. *Tags:* nginx, reverse-proxy, web-server --- ### [SSH Cheatsheet](https://devtools.surf/tools/cheatsheet-ssh/) Keys, connect, port forwarding, ~/.ssh/config, file transfer **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 databases - Sysadmins managing multi-server SSH config files efficiently **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 practices **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 Ylonen because it sat between telnet (port 23) and ftp (port 21), both of which SSH aimed to replace. - Ed25519 keys, based on Daniel J. Bernstein's Curve25519, are 256 bits but provide security equivalent to a 3072-bit RSA key. *Tags:* ssh, remote, security --- ### [tmux Cheatsheet](https://devtools.surf/tools/cheatsheet-tmux/) Sessions, windows, panes, copy mode for persistent terminals **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 persistent sessions - Developers pairing remotely by sharing a tmux session **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 scrollback and text selection **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 conflicting with Emacs (Ctrl-a) and GNU Screen (also Ctrl-a) default bindings. - tmux sessions survive SSH disconnections because the server process runs as a daemon — it was one of the first terminal multiplexers to use a client-server architecture. *Tags:* tmux, terminal, multiplexer --- ### [cURL Cheatsheet](https://devtools.surf/tools/cheatsheet-curl/) HTTP from the CLI — methods, headers, auth, timing, retries **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 verbose output - Security researchers inspecting HTTP headers and TLS handshakes **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 **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, SMTP, LDAP, and even Gopher — a pre-web protocol from 1991. - The cURL project has received over 300 CVE security reports since its creation, making it one of the most audited open-source tools in history. *Tags:* curl, http, cli --- ### [Makefile Cheatsheet](https://devtools.surf/tools/cheatsheet-makefile/) Rule basics, variables, pattern rules, and make invocations **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 build and test scripts - Teams standardizing common project commands across repositories **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 names **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 indentation — spaces cause silent failures. This design decision has frustrated developers for nearly 50 years. - Stuart Feldman received the ACM Software System Award in 2003 for Make, sharing the honor with tools like Unix, TCP/IP, and the World Wide Web. *Tags:* make, makefile, build --- ### [HTTP Headers Cheatsheet](https://devtools.surf/tools/cheatsheet-http-headers/) Request + response headers and a caching decision tree **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 with proper headers - Security engineers hardening responses with CSP and HSTS 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 Content-Security-Policy by name **Fun facts:** - HTTP/1.0 (1996) had only 16 defined headers; HTTP/1.1 (1997) expanded this to 46. Today there are over 100 registered IANA HTTP headers. - The X- prefix for custom headers was officially deprecated in RFC 6648 (2012) because too many 'experimental' headers became permanent standards. - The Cache-Control header replaced the simpler Expires header from HTTP/1.0 and supports 15+ directives including stale-while-revalidate. *Tags:* http, headers, cache --- ### [LLM Prompting Cheatsheet](https://devtools.surf/tools/cheatsheet-llm-prompting/) Techniques that actually help LLM output; anti-patterns to skip **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 tone and format - Data scientists evaluating prompt strategies for classification tasks **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 complex reasoning tasks **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 Wei et al. at Google Brain in January 2022, improved math reasoning accuracy by up to 50% on benchmarks. - Few-shot prompting was demonstrated in the GPT-3 paper (Brown et al., 2020), showing that examples in the prompt could replace fine-tuning entirely. *Tags:* llm, ai, prompt --- ### [JWT Cheatsheet](https://devtools.surf/tools/cheatsheet-jwt/) Structure, standard claims, algorithms, do/don't **Use cases:** - Backend devs implementing stateless authentication for REST APIs - Security engineers auditing JWT configurations for token theft risks - Mobile developers understanding token refresh and expiry flows - DevOps teams configuring JWT validation in API gateway policies **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 security mistakes **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 Base64URL-encoded parts separated by dots — header, payload, and signature — making it safe for URLs without encoding. - The 'none' algorithm in JWT has caused numerous security vulnerabilities; many libraries now reject it by default after high-profile exploits in 2015-2017. *Tags:* jwt, auth, token --- ### [PostgreSQL Cheatsheet](https://devtools.surf/tools/cheatsheet-postgres/) psql meta-commands, JSONB, indexing, EXPLAIN **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 report queries - DevOps engineers checking index and vacuum status commands **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 queries **Fun facts:** - PostgreSQL traces its origins to the POSTGRES project at UC Berkeley, led by Michael Stonebraker starting in 1986. 'Postgre-SQL' was renamed in 1996. - PostgreSQL's JSONB type, added in version 9.4 (2014), can be indexed with GIN indexes, making it competitive with document databases like MongoDB. - PostgreSQL supports over 40 data types natively, including arrays, ranges, geometric types, network addresses, and even full-text search vectors. *Tags:* postgres, postgresql, psql --- ## Info / Guides ### [Docker Basics](https://devtools.surf/tools/info-docker-basics/) What containers are, why they're useful, first run, common pitfalls **Use cases:** - Junior developers understanding containers for the first time - Students setting up consistent development environments across machines - Backend devs learning to containerize a Node.js or Python application - Bootcamp instructors teaching infrastructure fundamentals **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 the difference **Fun facts:** - Docker was released by Solomon Hykes at PyCon 2013 as an internal tool from dotCloud. The company later renamed itself to Docker, Inc. - Docker containers share the host kernel, making them up to 50x faster to start than virtual machines — typically under 1 second. - The Docker Hub registry surpassed 13 billion image pulls per month by 2023, making it the largest container image registry in the world. *Tags:* docker, containers, beginner --- ### [SEO Basics for Developers](https://devtools.surf/tools/info-seo-basics/) Technical SEO, on-page signals, structured data, what to skip **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 rendering works for crawlers - Marketing-adjacent devs understanding technical vs on-page SEO **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 on outdated tactics **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' was first used by Webstep Marketing Agency in 1997, just two years after the first web search engines appeared. - Google's Core Web Vitals became an official ranking signal in June 2021, directly tying frontend performance to search visibility. *Tags:* seo, search, ranking --- ### [REST API Basics](https://devtools.surf/tools/info-rest-api-basics/) HTTP verbs, status codes, resource naming, common gotchas **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 their team - Students learning API design patterns for computer science coursework **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 conventions **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 mentions JSON; early REST APIs used XML exclusively. JSON adoption began around 2006 with the rise of AJAX. - HTTP status code 418 'I'm a teapot' was defined in RFC 2324 (April 1, 1998) as an April Fools' joke but persists in many HTTP libraries today. *Tags:* rest, api, http --- ### [Next.js App Router Basics](https://devtools.surf/tools/info-nextjs-app-router-basics/) File conventions, server vs client, data fetching, snags **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 architecture - Frontend devs learning file-based routing and nested layouts **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 avoid client-side waterfalls **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 2022), was a complete rewrite of the routing system, replacing the Pages Router after 6 years. - React Server Components, which the App Router is built on, were first previewed by the React team in December 2020 but took over two years to stabilize. *Tags:* nextjs, react, app-router --- ### [Connect Your Site to Google](https://devtools.surf/tools/info-google-setup/) Search Console, GA4, Tag Manager, Ads — end-to-end setup order **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 Console to monitor organic visibility - Freelancers setting up the full Google stack for client websites **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 after GA4 is fully configured **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 on July 1, 2023, ending a 10-year run. The migration was one of the largest forced analytics platform changes ever. - Google Tag Manager was launched in 2012 and now handles tag deployment for over 30 million websites, reducing developer dependency for marketing teams. *Tags:* google, analytics, search-console --- ### [Git Basics (First Hour)](https://devtools.surf/tools/info-git-basics/) Mental model, first workflow, daily loop, undo cookbook **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 workflow - Designers or PMs who need basic Git literacy for collaboration **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 build consistent Git habits **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 unpleasant person. Torvalds joked: 'I name all my projects after myself.' - Git stores snapshots of the entire file tree, not diffs. This design choice is why branching and merging are nearly instantaneous. *Tags:* git, version-control, beginner --- ### [Kubernetes Basics](https://devtools.surf/tools/info-kubernetes-basics/) Pods, deployments, services, YAML, when to reach for k8s **Use cases:** - Backend developers evaluating whether their project needs Kubernetes - DevOps engineers learning Pod and Deployment fundamentals - Platform teams understanding Services and networking basics - CTOs assessing Kubernetes adoption costs vs simpler alternatives **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 **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 internal system Borg, which had been managing billions of containers per week inside Google since 2003. - The abbreviation K8s replaces the 8 letters between K and s — a convention called a numeronym, also used in i18n (internationalization) and a11y (accessibility). *Tags:* kubernetes, k8s, beginner --- ### [GraphQL vs REST](https://devtools.surf/tools/info-graphql-vs-rest/) When each wins, and the hidden costs of GraphQL at scale **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 considering a partial GraphQL migration - CTOs assessing long-term maintenance costs of GraphQL at scale **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 mobile vs web clients **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 in 2015 and transferred governance to the GraphQL Foundation (under the Linux Foundation) in 2018. - The N+1 query problem is GraphQL's most common performance trap — tools like DataLoader (created by Facebook in 2016) were built specifically to solve it. *Tags:* graphql, rest, api --- ### [WebSockets Basics](https://devtools.surf/tools/info-websockets-basics/) Lifecycle, browser API, when to use, production gotchas **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 trading dashboards - IoT developers pushing sensor data to web dashboards in real time **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 SSE and polling **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 request with an Upgrade header — the server responds with status 101 (Switching Protocols) to complete the handshake. - WebSocket frames have only 2-14 bytes of overhead per message, compared to hundreds of bytes for HTTP headers, making them ideal for high-frequency data. *Tags:* websocket, realtime, api --- ### [OAuth 2.0 Flows Explained](https://devtools.surf/tools/info-oauth2-flows/) Auth code + PKCE, client credentials, device, token types, scopes **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 API access - Security engineers auditing token storage and refresh mechanisms **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 grant for your client type **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 Code Exchange, RFC 7636) was originally designed for mobile apps in 2015 but is now recommended for all public clients including SPAs. - The implicit flow, once the standard for SPAs, was formally deprecated by the OAuth Security Best Current Practice draft in 2019 due to token leakage risks. *Tags:* oauth, auth, security --- ### [TLS / HTTPS Basics](https://devtools.surf/tools/info-tls-https-basics/) Handshake, certs, Let's Encrypt, hardening to A+ **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 prevent downgrade attacks - Startup founders getting free HTTPS certificates via Let's Encrypt **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 certificate validation flow **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 April 2016 by the EFF and Mozilla, has issued over 4 billion certificates and drove HTTPS adoption from 40% to over 95% of web traffic. - The Heartbleed bug (CVE-2014-0160) in OpenSSL affected an estimated 17% of all HTTPS servers worldwide and led to the creation of the Core Infrastructure Initiative. *Tags:* tls, https, ssl --- ### [Core Web Vitals](https://devtools.surf/tools/info-core-web-vitals/) LCP, INP, CLS — what they are, how to fix, how to measure **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 rates - SEO specialists translating Web Vitals data into developer action items **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 for lab vs field data differences **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 FID (First Input Delay) as a Core Web Vital in March 2024, measuring all interactions instead of just the first one. - A 2017 Google study found that as page load time goes from 1s to 3s, bounce probability increases by 32%; from 1s to 5s, it increases by 90%. *Tags:* performance, seo, web-vitals --- ### [CORS Explained](https://devtools.surf/tools/info-cors-explained/) Same-origin rule, simple vs preflight, server headers, gotchas **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 proxies to avoid CORS issues - Security engineers auditing overly permissive wildcard CORS policies **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 credentialed request cookie issues **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 standardized as a W3C Recommendation in January 2014 after years of workarounds like JSONP. - A CORS preflight is an OPTIONS request the browser sends automatically — it was designed to protect legacy servers that never expected cross-origin requests. *Tags:* cors, browser, http --- ### [Cookies vs localStorage vs sessionStorage](https://devtools.surf/tools/info-cookies-storage/) Lifetime, security, cross-tab, cookie attributes, anti-patterns **Use cases:** - Frontend developers choosing between cookies and localStorage for auth tokens - Security engineers auditing cookie attributes for CSRF protection - Mobile web devs understanding sessionStorage behavior across tabs - Full-stack devs implementing remember-me functionality with proper cookie flags **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 storing sensitive data in localStorage **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 standardized in HTML5 (2009) with a 5 MB limit per origin — roughly 2.5 million characters of UTF-16 text. - The SameSite cookie attribute, first implemented by Chrome in 2016, became 'Lax' by default in Chrome 80 (February 2020) to mitigate CSRF attacks. *Tags:* cookies, storage, browser --- ### [Monorepos (Turbo / Nx / pnpm)](https://devtools.surf/tools/info-monorepos/) When to monorepo, tool choice, pitfalls **Use cases:** - Engineering leads evaluating monorepo migration for multi-package projects - Platform teams choosing between Turborepo and Nx for build orchestration - DevOps engineers optimizing CI pipelines for monorepo caching - Frontend teams sharing UI components across multiple apps in one repo **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 dependency hoisting issues **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 created by Jared Palmer in 2021 and acquired by Vercel just 5 months later for an undisclosed sum. - pnpm (performant npm), created by Zoltan Kochan in 2017, uses a content-addressable store that can save up to 70% of disk space compared to npm. *Tags:* monorepo, turbo, nx --- ### [Redis Basics](https://devtools.surf/tools/info-redis-basics/) Data types, caching pattern, operational commands, pitfalls **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 for message broadcasting - Data engineers using sorted sets for leaderboards and rate limiting **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 monitoring memory and connections **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 instance because all operations run in a single-threaded event loop with in-memory data. - Redis Labs rebranded to Redis Inc. in 2023 and changed the license from BSD to dual-license (RSALv2/SSPL) in March 2024, sparking community forks like Valkey. *Tags:* redis, cache, key-value --- ### [PostgreSQL Basics](https://devtools.surf/tools/info-postgres-basics/) Why Postgres, first queries, unique features, beginner mistakes **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 a professional-grade database - Startup CTOs evaluating Postgres vs managed database services **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 section to avoid common schema design errors **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 the only major open-source database to support both ACID transactions and native JSON/JSONB, bridging relational and document-store paradigms. - Stack Overflow's 2023 Developer Survey ranked PostgreSQL as the most-wanted and most-admired database for the second consecutive year. *Tags:* postgres, database, beginner --- ### [CI/CD with GitHub Actions (Basics)](https://devtools.surf/tools/info-github-actions/) Anatomy, minimal workflow, triggers, secrets, deploy gotchas **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 changelog generation - Teams adding code quality checks like linting and type checking to CI **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 and artifact pitfalls **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 month for public repositories and 500 minutes for free-tier private repos. - The GitHub Actions marketplace has over 20,000 community-built actions, from code linting to Kubernetes deployments to Slack notifications. *Tags:* github-actions, ci, cd --- ### [Serverless vs Containers vs VMs](https://devtools.surf/tools/info-serverless-vs-containers/) Where each wins; when serverless bites **Use cases:** - Architects choosing compute platforms for new microservice deployments - Startup CTOs evaluating serverless to minimize infrastructure management - DevOps teams deciding between ECS/Fargate and Lambda for event-driven workloads - Engineering managers estimating infrastructure costs at different traffic scales **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 becomes expensive **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 start adds 100-500ms of latency; provisioned concurrency (launched 2019) eliminates this but costs 3-4x more. - VMs provide the strongest isolation (hardware-level), containers share the kernel (OS-level), and serverless functions share the runtime — each trades isolation for efficiency. *Tags:* serverless, containers, infra --- ### [Microservices vs Monolith](https://devtools.surf/tools/info-microservices-vs-monolith/) Default to monolith; when to split; the modular-monolith middle path **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 service extraction - CTOs assessing team structure alignment with architectural boundaries **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 know when microservices actually help **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. - Amazon's 2002 mandate from Jeff Bezos — that all teams must communicate through service interfaces — is widely considered the origin story of microservice architecture. - A 2020 study by InfoQ found that 63% of organizations using microservices reported increased operational complexity, often underestimating the 'distributed systems tax.' *Tags:* architecture, microservices, monolith --- ### [DNS Basics](https://devtools.surf/tools/info-dns-basics/) Record types, resolution, debugging, common snags **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 email domains - Site reliability engineers understanding DNS TTL and caching behavior **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 and propagation delay issues **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 are exactly 13 root DNS server addresses (A through M), operated by 12 organizations. Due to anycast, the actual number of physical servers exceeds 1,700. - The maximum length of a fully qualified domain name (FQDN) is 253 characters, and each label (between dots) can be at most 63 characters. *Tags:* dns, networking --- ### [Load Balancing Basics](https://devtools.surf/tools/info-load-balancing/) L4 vs L7, algorithms, health checks, failure modes **Use cases:** - DevOps engineers configuring Nginx or HAProxy for backend services - Platform teams designing high-availability architectures with failover - Backend developers understanding sticky sessions for stateful applications - SREs planning capacity and choosing load balancing algorithms for traffic spikes **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 plan for load balancer outages **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 inspect HTTP headers, cookies, and URL paths — enabling features like sticky sessions and A/B testing at the routing level. - The 'thundering herd' problem occurs when a load balancer's health check marks a backend as healthy and all queued requests rush to it simultaneously. *Tags:* load-balancer, networking, scaling --- ### [Caching Strategies](https://devtools.surf/tools/info-caching-strategies/) Where to cache, patterns, invalidation, common bugs **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 for high-traffic APIs - SREs diagnosing cache hit ratios and stale data in production systems **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 stampede and thundering herd issues **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 reduce origin server load by 60-90%. Cloudflare reported in 2023 that it serves over 57 million HTTP requests per second from cache globally. - The write-through vs write-behind (write-back) distinction originated in CPU cache design in the 1960s and was later adopted for application-level caching patterns. *Tags:* cache, performance --- ### [Observability: Logs, Metrics, Traces](https://devtools.surf/tools/info-observability/) Three pillars, RED/USE metrics, OpenTelemetry, tooling **Use cases:** - SREs building dashboards with RED metrics for service health - Backend developers adding distributed tracing to microservice architectures - DevOps teams choosing between Datadog, Grafana, and OpenTelemetry stacks - On-call engineers using correlated logs and traces to debug production incidents **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 vendor-neutral instrumentation **Fun facts:** - The term 'observability' comes from control theory, coined by Rudolf E. Kalman in 1960. It entered software engineering vocabulary around 2017 via Charity Majors at Honeycomb. - OpenTelemetry, formed in 2019 by merging OpenCensus (Google) and OpenTracing (CNCF), is now the second most active CNCF project after Kubernetes. - Google's Dapper paper (2010) introduced distributed tracing to the industry and directly inspired open-source tools like Zipkin (2012) and Jaeger (2017). *Tags:* observability, monitoring, sre --- ### [SemVer & Dependency Hygiene](https://devtools.surf/tools/info-semver-dependencies/) Version ranges, lockfile, update strategy, supply-chain hygiene **Use cases:** - Developers understanding the difference between ^ and ~ version ranges - DevOps engineers setting up automated dependency update tools like Renovate - Security teams auditing npm packages for known vulnerabilities - Tech leads establishing dependency update policies for engineering teams **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 checklist to audit third-party packages **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 packages in 2024, making it the largest software package registry in the world — over 3x the size of PyPI. - The event-stream supply-chain attack in November 2018 injected malicious code into a package with 2 million weekly downloads, stealing cryptocurrency wallet keys. *Tags:* semver, dependencies, npm ---