DevBottle Blog

Guides

Eight tools covering JSON formatting, base64 encoding, color conversion, color blindness simulation, and CSS animation. What each does and when to reach for it.

Guides

There are a dozen free JSON formatters online. The basics match everywhere; the differences are error handling, privacy, and what they reveal about your data.

Guides

Regex101, Regexr, and a few others all test patterns in the browser. They differ in real ways: depth, language support, and what you're actually trying to do.

Guides

Postman is the standard for sustained API work but overkill for a quick check. Here's what to use when you want to test an API without installing anything.

Guides

CSS gradients are image values that need no image file. Here's how the three gradient types work, with working examples and syntax you can write by hand.

Guides

Regex in JavaScript becomes second nature once you think in patterns instead of memorizing syntax. A practical reference with real use cases, not toy examples.

Guides

Most APIs send JSON minified and unreadable. Here's how to format it, what to do when it won't parse, and the most common errors that trip people up.

Guides

The difference between px, rem, and em isn't just syntax; it changes how your layout responds to user and browser settings. Here's when each unit matters.

Guides

Base64 converts binary to ASCII text so it travels safely through text-only systems. Here's when that helps and when the overhead makes it the wrong choice.

Guides

Colors that feel wrong usually break one of a few rules. Here's the color theory that's actually useful: harmony rules, palette structure, and accessibility.

Guides

Schema markup tells search engines what your content is, an article, FAQ, or product, making pages eligible for rich results. Here's how to implement it right.

Guides

Every Figma design comes in pixels; accessible sites use rem. Here's the formula, when it matters, and how to batch-convert a whole stylesheet in one paste.

Guides

Three CSS visual editors that replace the guesswork: build gradients, configure flexbox and grid layouts, and design borders, all with one-click output.

Guides

Regex clicks once you see it applied to real problems. This covers the patterns you'll actually use, from email validation to URL matching and log parsing.

Guides

Schema markup makes your pages eligible for FAQ boxes, breadcrumbs, and rich snippets in Google. Here's how JSON-LD works and which types are worth adding.

Guides

Good color choices follow rules, not instinct. Complementary, analogous, and triadic schemes each have logic. Use it to build a palette that actually works.

Guides

Quick API tests don't need a 200MB install. Send GET, POST, PUT, and authenticated requests from your browser and inspect responses, with no client setup.

Guides

Generic Latin is useless when designing a developer portal or API docs. Placeholder text that reads like technical writing gets you more useful feedback.

Guides

SVGs from Figma and Illustrator often carry 60% junk data. Here's what bloats them, what's safe to strip, and how to cut 30-70% with no quality loss.

Guides

Build CSS shadows visually, generate typography scales from math ratios, check WCAG color contrast, and extract above-the-fold CSS. All free, all in-browser.

Guides

Browser-based tools for developers and designers: JSON formatter, regex tester, CSS generators, and a color palette builder. Free, no account, all client-side.