DevBottle Blog

Guides

Eight tools covering JSON formatting, base64 encoding, color format conversion, color blindness simulation, and CSS animation. Here's what each one does and when to reach for it.

Guides

There are a dozen free JSON formatters online. The basics are the same everywhere. The differences show up in error handling, privacy, and what information the tool actually surfaces about your data.

Guides

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

Guides

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

Guides

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

Guides

Regular expressions in JavaScript become second nature once you stop memorizing syntax and start thinking in patterns. Here's a practical reference with real use cases, not toy examples.

Guides

JSON shows up everywhere, but most APIs send it 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 preferences and browser settings. Here's when each unit actually matters.

Guides

Base64 converts binary data to ASCII text so it can travel safely through systems that only handle text. Here's when that's actually useful and when the overhead makes it the wrong choice.

Guides

Color choices that feel wrong usually break one of a few specific rules. Here's the color theory that's actually useful in practice: harmony rules, palette structure, and accessibility from the start.

Guides

Schema markup tells search engines what your content actually is -- an article, an FAQ, a product -- and makes your pages eligible for rich results in search. Here's how to implement it correctly.

Guides

Every Figma design comes in pixels. Accessible websites use rem. Here's the formula, when it actually matters, and how to batch-convert an entire stylesheet in one paste.

Guides

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

Guides

Regex syntax clicks once you see it applied to real problems. This covers the patterns you'll actually use -- email validation, URL matching, log parsing -- with examples you can test immediately.

Guides

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

Guides

Good color choices follow rules, not instinct. Complementary, analogous, and triadic schemes all have logic behind them. Here's how to apply that logic 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, inspect responses, and debug issues without setting up a client.

Guides

Generic Latin is useless when you're designing a developer portal or API docs. Placeholder text that looks like real technical writing helps stakeholders give much more useful feedback.

Guides

SVG files from Figma and Illustrator often carry 60% unnecessary data. Here's what bloats them, what you can safely strip, and how to get 30-70% smaller files with no visual loss.

Guides

Build CSS shadow effects visually, generate typography scales from mathematical ratios, check WCAG color contrast, and extract above-fold CSS for performance. All free, all run in the browser.

Guides

A collection of browser-based tools for developers and designers: JSON formatter, regex tester, CSS generators, color palette builder, and more. Free, no account, everything runs client-side.