DevBottle Blog

Announcements

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

Data & APIs

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.

Regex

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.

Data & APIs

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.

CSS

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.

Regex

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.

Data & APIs

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.

CSS

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.

Data & APIs

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.

Color & Accessibility

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.

SEO

How JSON-LD actually works: @context and @type, nesting vs @id references, @graph, generating it from data safely, and the validation errors developers hit most.

CSS

The px to rem formula, a ready-made conversion table, what changes when your root font size isn't 16px, and how to convert a whole stylesheet at once.

CSS

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

Regex

Build a regex one piece at a time: literals, character classes, quantifiers, anchors, groups, and lookaheads, testing a real pattern at every step.

SEO

Pick the right schema type, generate the JSON-LD, add it to your pages (plain HTML, WordPress, or a framework), validate it, and keep it accurate.

Color & Accessibility

Start from one brand color, pick a harmony, build tint and shade scales, assign roles as CSS variables, and check contrast before you ship.

Data & APIs

A practical routine for testing an endpoint: start with GET, add auth and content-type headers, send a body, read status codes, and diagnose CORS failures.

Design & Assets

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

Design & Assets

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.

CSS

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.

Announcements

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