Категория
Web & HTTP
Все инструменты и статьи этой категории, собранные в одном месте.
Инструменты
Color contrast & format
Two colours in any CSS notation (named, hex, rgb, hsl, hwb, lab, lch, oklab, oklch, color()) and out come the WCAG contrast ratio with pass or fail at every level (AA and AAA, normal and large text, user interface components), a live preview, each colour converted to every notation with its relative luminance, and the nearest foreground that would pass each failing level. Pure arithmetic from the WCAG formulas and the CSS Color Level 4 sample code; nothing leaves the browser.
CSS selector tester
Paste HTML and one or more selectors (one per line) and see exactly which elements each selector matches: the elements highlighted in the parsed tree with their path and line, the count per selector, and its specificity counted per section 15 of Selectors Level 4. The HTML is parsed inertly with the same parser as the HTML structure explainer; the selectors are parsed and matched by Selectors Level 4's own rules (compound by compound, right to left), including :is(), :not(), :where(), :has(), :nth-child(An+B of S), attribute operators with the i and s flags, CSS escapes and the form-state pseudo-classes read from attributes. Invalid selectors are named with the position of the error; the pseudo-classes a static document cannot answer are marked. Checked against Chromium's querySelectorAll.
CSS specificity calculator
Paste one or more CSS selectors, or a whole stylesheet, and read each selector's specificity as the (A, B, C) triple of Selectors Level 4, every simple selector named with the column it adds to, the selectors ranked the way the cascade ranks them with ties called out, and the special cases spelled out: :where() counts for nothing, :is(), :not() and :has() take their most specific argument, :nth-child(of) adds its argument, the universal selector adds nothing, a repeated class counts twice, a legacy single-colon pseudo-element counts as one. With the reminder of the five things the cascade checks before specificity.
curl command builder
Pick any of the 27 protocols curl speaks, fill in protocol-aware fields, and get the exact command with every flag explained and safety warnings surfaced. The inverse of the HTTP request translator: that one reads a command, this one writes it.
curl command explainer
Paste a curl command and get it explained flag by flag, then translated to fetch, a raw HTTP request, HTTPie and Python. Nothing is sent and no request is run.
HTML structure & DOM explainer
Paste HTML and read the tree the HTML parser builds from it: every element, text node and comment with its line, the elements the parser created without a tag (html, head, body, tbody), the end tags it supplied, the formatting elements it split and the content it moved out of a table, with the document mode (quirks or not) and every parse error by the standard's own code and position. Then the findings: the DOCTYPE, the language, the title, the encoding, images without alternative text, links and buttons with no name, heading jumps, duplicate ids, controls without labels, obsolete elements and attributes, each tied to a sentence of the HTML Standard or WCAG 2.2. Parsing only: no script runs, nothing is fetched, nothing is rendered.
HTTP message decoder
Paste a raw HTTP/1.1 request or response and read it decoded: the request line or status line against the IANA registries, every field filed under the part of the specification that defines it, the framing decision RFC 9112 makes for the body (which of its eight rules applies, Content-Length against the bytes present, Transfer-Encoding overriding it, the chunks decoded one by one with their trailers), and the credentials and cookies the message carries, surfaced and masked. The decode-only half of an interception proxy's inspector: it never sends, replays or tampers.
HTTP request translator
Paste a raw HTTP/1.1 request and get the equivalent curl, fetch, HTTPie, Python and PowerShell. Nothing is sent and no request is run.
Meta, Open Graph & JSON-LD inspector
Paste a page, or just its head, and read everything it declares the way each standard reads it: the title and the character encoding by the HTML Standard, every meta element classified (the standard's own names, the WHATWG MetaExtensions registry, the pragma directives, the non-conforming ones), every link element with its rel tokens (canonical per RFC 6596, hreflang alternates, icons, manifest), the Open Graph object with its arrays and structured properties per ogp.me, the twitter:* card properties as registered, the robots and googlebot rules by Google's published list, the viewport, and every JSON-LD block parsed and outlined per JSON-LD 1.1. Forty-six findings, each quoting the sentence it rests on. Parsed inertly with parse5; nothing is fetched or executed.
Regex Toolkit
Test, explain, and debug regular expressions with live matches and a backtracking-risk check.
Sorting Algorithm Stepper
Paste a small list of numbers, pick a strategy - bubble, selection, insertion, merge, or quick - and watch the algorithm think: every comparison, every swap, one WHY line per move, with live comparison and write counters that make Big-O growth tangible.
URL Inspector
Dissect any URL into its named parts: scheme, host, port, path, query parameters, and fragment. Decodes percent-escapes and internationalized hosts, and flags credentials and other issues. Runs entirely in your browser.
Статьи
Reading a raw HTTP request, and turning it back into something you can run
A capture, a proxy log and an RFC example all hand you the same thing: a request line, some headers and maybe a body. Turning that back into a command you can run looks mechanical and has three traps - the URL is not in the message, some headers must not be copied, and the paste is usually a live credential.
ЧитатьHow a WebAssembly tool works: what runs, where it comes from, and what leaves the page
Most tools on this site are small pure functions written here and tested with golden vectors. A Python playground cannot be that: the thing you want is a real interpreter, and the honest way to give you one on a static site is CPython compiled to WebAssembly, downloaded by your browser and run in its sandbox. This article explains what changes when a tool runs third-party code: the download and why it waits for your consent, the Worker and why Stop is a termination, the Content Security Policy and what was measured against it, the pinned files and their digests, the wall clock, and which checks are the site's and which are the engine's. With the engine's own documentation cited for each claim.
ЧитатьHidden messages in HTTP headers: tributes, jokes and job offers in the overhead
HTTP lets a server add any header it likes, and for twenty years operators have used that freedom for things that are not protocol. After Terry Pratchett died in 2015, thousands of sites began sending X-Clacks-Overhead: GNU Terry Pratchett, a memorial built from a plot device in his own novel. Slashdot answered every request with a Futurama quote. Automattic and Airbnb hid job offers where only people reading headers would see them. A page cache announces itself with the Batman theme. Two status codes carry literary jokes into the standard itself. This article walks each case, cites the artefact, and says what the good ones have in common: they cost the reader nothing, they are true, and they are addressed to the people who look. It ends with how to read them yourself, and with this site's own.
ЧитатьColour contrast: the WCAG arithmetic, and the ten ways CSS spells a colour
Whether text can be read against its background is, in WCAG, a single number computed from two colours, and the computation is short enough to do by hand once. Here is the arithmetic (relative luminance, the ratio, the 4.5:1 and 3:1 thresholds and where they come from), followed by the notations CSS Color Level 4 lets you write a colour in, from #hex to oklch(), and why the newer ones make a failing pair easier to fix.
ЧитатьSpecificity, counted by the specification, and the five things the cascade checks first
Every stylesheet war ends in the same place: two rules want the same property on the same element and one of them wins. CSS decides with a short, exact procedure, and specificity is only its fifth step. Here is how Selectors Level 4 counts a selector into three numbers, what :is(), :where(), :not() and :nth-child(of) do to the count, the ten examples the specification itself gives, and the five criteria the cascade settles before it ever looks at specificity.
ЧитатьWhere an HTTP/1.1 message ends: Content-Length, chunked, and the eight rules
An HTTP/1.1 connection is a stream of bytes with messages laid end to end, and nothing marks where one stops except the rules both ends agree on. RFC 9112 gives eight of them, in order of precedence, and every request-smuggling attack of the last twenty years is two implementations applying a different one to the same bytes. Here are the rules, the chunked coding decoded by hand, what Content-Length promises, and what goes wrong when the promise and the bytes disagree.
ЧитатьHow the HTML parser repairs your markup, and why the repairs are the same in every browser
A browser never rejects HTML. Whatever you paste, a tree comes out, and the HTML Standard says exactly which tree: the elements the parser creates for you, the end tags it supplies, the formatting elements it splits, the content it lifts out of tables, the comments it makes of your typos, and the quirks mode it falls into without a DOCTYPE. The 52 named parse errors, the five repairs worth knowing by name, what view source and inspect element disagree about, and why WCAG 2.2 could drop its parsing criterion without lowering the bar.
ЧитатьHow a selector finds its elements: Selectors Level 4 read as a matching algorithm
A CSS selector is a question asked of a tree, and the specification says exactly how the question is answered: compound by compound, right to left, with the document language deciding what counts as the same name. Where case matters and where it does not, the seven attribute operators and the empty string that matches nothing, how siblings are counted, what :is(), :not(), :where() and :has() do to validity and specificity, which pseudo-classes a static document can never answer, and what browsers do with a selector that ends inside a bracket.
ЧитатьWhat a page head declares, and who reads each line
The head of an HTML page is written for machines, and each line is read by a different one under different rules: the browser reads the title, the encoding and the pragma directives by the HTML Standard; a search crawler reads description, robots and canonical by its own published documentation and by RFC 6596; a social platform reads Open Graph by ogp.me and twitter:* by a registry entry from 2023; a structured-data consumer reads JSON-LD by the W3C Recommendation. What each party requires, what it merely prefers, what is quietly ignored, and the handful of rules (one title, one description, UTF-8 once and early, exactly one identifying attribute per meta) that are errors rather than advice.
Читать