DEV Community: Muhammad Shoaib

Preparing Images for Your Website: A 5-Minute Workflow

Muhammad Shoaib — Sun, 11 Oct 2026 14:02:37 +0000

Large images are still the most common reason a simple site scores badly on Core Web Vitals. You don't need Photoshop to fix it. Here is the workflow I use for blog and landing-page images.

1. Crop to the aspect ratio you actually display

If the layout shows a 16:9 hero, crop to 16:9 first with an image cropper. Shipping a tall photo and letting CSS hide most of it wastes bytes.

2. Resize to the rendered width (x2 for retina)

A hero rendered at 800px wide needs a 1600px source at most. Use a resize tool rather than serving the 4000px original from your phone.

3. Convert to a modern format

WebP is supported everywhere that matters and is usually 25–35% smaller than JPEG at the same quality. An image converter handles PNG/JPG/WebP in the browser.

4. Compress

Run the result through an image compressor. Quality 75–80 is usually indistinguishable from the original on screen.

5. Add real alt text

Describe what the image shows for screen-reader users. If you're stuck, an AI image caption generator gives a starting description you can edit.

Bonus

Set width and height attributes and use loading="lazy" for below-the-fold images to avoid layout shift. These five steps typically cut page weight by more than half.

Small Encoding and Formatting Tasks I Stopped Writing Scripts For

Muhammad Shoaib — Sun, 11 Oct 2026 14:02:14 +0000

Every developer has a folder of throwaway scripts: decode this Base64 blob, pretty-print that JSON, generate a password for a test account. Most of them are three lines long and get rewritten every few months. Here is the short list of jobs I now do in a browser tab instead, and when I still reach for code.

1. Pretty-printing and validating JSON

API responses copied out of logs are usually one long line. Pasting into a JSON formatter gives indentation and, more usefully, points at the exact position of a trailing comma or unquoted key. If you need the same transformation in CI, jq . is still the right answer, but for a one-off look the browser is faster.

2. Base64 encode / decode

Basic-auth headers, data URIs, JWT payload segments – they are all Base64. A Base64 encoder/decoder is quicker than remembering whether your shell's base64 wants -d or -D. Reminder: Base64 is encoding, not encryption; never treat it as a way to hide secrets.

3. Changing text case

Renaming a batch of constants from camelCase to SNAKE_CASE, or turning a heading into Title Case for docs? A case converter handles the whole block at once.

4. Test passwords

For seed data and local accounts I use a password generator with symbols on and length 16+. For production secrets use your password manager or openssl rand instead.

5. Number bases

Bit flags and colour values come up constantly. The hex calculator and binary calculator do arithmetic directly in those bases, which is handy when checking a mask.

When to keep the script

If the task runs more than once a week, or touches sensitive data, automate it locally. Browser tools are best for the quick, occasional look.

A Practical Statistics Cheat Sheet for A/B Tests (With Calculators)

Muhammad Shoaib — Sun, 11 Oct 2026 14:00:08 +0000

You shipped a variant, the dashboard shows a lift, and someone asks "is it significant?". Here is the minimum statistics you need to answer honestly, plus free calculators to check your numbers.

Before the test: sample size

Decide how many users each variant needs before you start, otherwise you will be tempted to stop as soon as the graph looks good. Plug your baseline conversion rate, the smallest lift you care about, and your desired confidence into a sample size calculator.

Describe the data

Means hide a lot. Look at the spread too:

Mean, median, mode, range for a quick summary.
Standard deviation to see how noisy the metric is.

After the test: is the difference real?

A p-value calculator tells you how surprising the result would be if there were no real difference. Below 0.05 is the common threshold, but it is a convention, not a law.
A confidence interval calculator is often more useful: "the lift is between +0.4% and +2.1%" says far more than "p = 0.03".

Common mistakes

Peeking daily and stopping early.
Testing ten metrics and reporting the one that "won".
Ignoring practical significance – a statistically real 0.1% lift may not be worth maintaining.

Run the numbers, write down the interval, and decide with the business context in mind.

5 Free Browser Tools I Use Daily as a Developer

Muhammad Shoaib — Sun, 11 Oct 2026 10:04:32 +0000

A few small utilities save me a surprising amount of time. None of these need an install or an account.

1. JSON formatter

Pasting a minified API response into a JSON formatter is the fastest way to spot a missing field or bad nesting.

2. Base64 encoder/decoder

Handy for debugging auth headers, data URIs and email payloads: Base64 encoder.

3. Case converter

Renaming variables between camelCase, snake_case and Title Case? A case converter does it in one paste.

4. Password generator

For test accounts and local secrets I use a random password generator that runs fully client-side.

5. Color picker

Grabbing HEX/RGB/HSL values for CSS: color picker.

All five live on Toolverse – every type of free online tool in one place: 340+ free calculators, PDF converters, image, text, developer and AI tools. No signup.

What small tools are in your daily kit?