💻 WebDev Calc

Small front-end jobs, done in seconds

Front-end work is full of little calculations that break your concentration. Checking whether a grey passes contrast. Remembering which favicon sizes actually matter. Writing the Open Graph tags so a shared link stops looking broken. Working out a box shadow that looks like it belongs on a real surface. None of it is difficult, but stopping to look up a formula or hunt for a generator you trust adds up over a day.

WebDevCalc collects those jobs into single-purpose tools that load fast and do one thing: a WCAG contrast checker, a robots.txt builder, a favicon set generator, meta tag and Open Graph generators, a CSS box shadow generator, and a viewport tag builder. Each tool sits alongside a written explanation of the standard behind it, so you can see why the output is correct instead of pasting it on faith.

Everything is grounded in published specifications rather than folklore. Contrast uses the WCAG ratio thresholds, the meta and social tags follow what the platforms actually parse, and the CSS tools follow the properties as specified. Where a rule comes from a source such as MDN, the W3C, or web.dev, the guide says so.

No accounts, no paywalls, and nothing to install. Everything runs in your browser and what you type stays on your machine. Pick a tool below, or read the developer guides for the longer explanations.