DEV Community: Inamullah Khan

The Browser Boundary Model: APIs, CORS, Cookies, JSON, Files, and SEO

Inamullah Khan — Sat, 30 May 2026 22:04:26 +0000

Most developers understand CORS, cookies, JSON, redirects, file uploads, and browser storage separately.

The harder part is understanding how they interact as boundaries inside the browser.

The browser is not just where your UI runs. It is also a security boundary.

It decides:

Which requests are allowed

Which responses can be read

Which cookies travel

Which origins are trusted

Which files are accessible

Which data stays isolated

Which URLs become public or discoverable

This matters because many production bugs happen when teams treat the browser as “just the frontend.”

Example 1: CORS is not authorization

CORS controls whether a browser can read a cross-origin response.

It does not prove that the user is allowed to perform the action.

Your API still needs to verify:

Authentication

Authorization

Object ownership

Role permissions

Business rules

A successful preflight request does not mean the request is safe.

Example 2: Frontend route guards are not enough

A protected frontend route only hides UI.

It does not protect backend data.

If the API allows a user to request another user’s object, the frontend cannot fix that. The server must check access to the exact object being requested.

Example 3: Cookies and JSON cross boundaries differently

Cookies may be sent automatically depending on domain, path, SameSite, Secure, and credentials settings.

JSON is usually sent explicitly, but APIs can still leak sensitive fields if they return more data than the UI needs.

Both need boundary review.

Example 4: File uploads are real data boundaries

PDFs, images, CSVs, and JSON files can contain:

Metadata

Private records

Tokens

Malformed data

Embedded content

Unexpected payloads

A file upload is not just an input field. It is a data ingestion workflow.

Example 5: SEO also creates boundaries

Public URLs, canonical tags, redirects, sitemaps, and indexed pages decide what becomes discoverable.

A page, file, preview, or generated URL can become public even when the original workflow felt private.

A practical 5-question model

Before shipping a browser-based workflow, ask:

Which origin created this request or data?
Can credentials travel with it?
Who can read the response?
Does the server verify access to the exact object?
Where does the data persist after the workflow ends?

If these questions are unclear, the workflow needs more architecture review.

The browser is not just a client.

It is a boundary layer between users, APIs, files, cookies, storage, redirects, and public URLs.

Full guide:
https://www.toolsfam.com/blog/browser-boundary-model-api-cors-cookies-json-file-workflows

Explore practical browser tools:
https://www.toolsfam.com/tools

ToolsFam Go Is Live: A Privacy-First Chrome Side Panel Extension for Quick Browser Tools

Inamullah Khan — Fri, 29 May 2026 23:13:51 +0000

I just launched ToolsFam Go on the Chrome Web Store.

It is a lightweight Chrome extension that brings useful browser tools into the Chrome side panel.

You can install it here:

https://chromewebstore.google.com/detail/jafkmdidploplaanfdoioipmijkicpel

ToolsFam Go is part of the larger ToolsFam platform:

https://toolsfam.com

Why I built it

Most small browser tool tasks happen while you are already doing something else.

A developer may need to decode Base64 while debugging.
A marketer may need to clean a campaign URL.
A writer may need to format text.
A student may need to clean notes.
A creator may need a quick utility while publishing content.

The task itself is small, but the workflow is usually annoying.

You open a new tab, search for a tool, find a website, paste your content, complete the task, and then return to what you were doing.

That is too much friction for simple utility work.

The idea behind ToolsFam Go

ToolsFam Go is built around a simple workflow:

Keep small tools inside the Chrome side panel
Open larger tools on the full ToolsFam website
Reduce tab switching
Keep the interface lightweight
Follow a privacy-first direction

The goal is not to cram hundreds of tools into a small extension panel.

That usually creates a bad experience.

Small tools belong in the side panel.
Advanced tools need a proper full-page interface.

Why the Chrome side panel works well

The Chrome side panel is useful because it keeps tools near your current work.

You do not need to fully leave the page.
You do not need to open another messy utility site.
You do not need to keep searching for the same tools again and again.

For quick tasks, the side panel is a better place.

Privacy-first browser tools matter

A lot of people paste sensitive content into random online tools without thinking about it.

That content may include:

API responses
Internal notes
Draft copy
URLs
Customer data
Metadata
Encoded content

ToolsFam is being built around the idea that browser tools should avoid unnecessary uploads where possible.

Many small utility tasks can be handled locally in the browser. That is better for speed, trust, and user control.

Who it is for

ToolsFam Go is useful for:

Developers
SEO professionals
Marketers
Content creators
Students
Researchers
Everyday browser users

Anyone who uses small online tools during daily work can benefit from a cleaner workflow.

This is version one

The first version is intentionally focused.

The plan is to improve the extension step by step with better mini tools, cleaner search, smoother UI, and stronger integration with the main ToolsFam platform.

The long-term goal is to make ToolsFam a trusted privacy-first browser tools platform.

Read the full launch post

I wrote a more detailed launch post here:

https://toolsfam.com/blog/toolsfam-go-chrome-extension-privacy-first-browser-tools

Explore ToolsFam

Main site:

https://toolsfam.com

Chrome extension:

https://chromewebstore.google.com/detail/jafkmdidploplaanfdoioipmijkicpel

The hidden logic behind JSON, CSV, PDFs, images, APIs, and text files

Inamullah Khan — Thu, 28 May 2026 23:57:41 +0000

Developers touch files all day, but many bugs come from treating files as simpler than they are.

A file is not just content.

It is content plus structure.

That structure decides how browsers, APIs, servers, databases, and apps read it.

Here are the practical file-format lessons worth remembering in 2026.

Extensions are not conversion

Renaming data.csv to data.txt may change how it looks in your file manager, but it does not rewrite the file.

Same with image.jpg to image.png.

Real conversion changes the internal representation.

Bad assumption:
“The extension changed, so the format changed.”

Better assumption:
“The extension is only a hint. The content still needs to be checked.”

Content-Type matters

When working with APIs or file uploads, Content-Type can decide whether the receiver knows how to parse the body.

Common examples:

application/json
text/plain
text/csv
image/png
image/jpeg
application/pdf

If an API expects JSON but receives the wrong content type, it may reject the request or parse it incorrectly.

JSON fails loudly because it is strict

Common JSON breakpoints:

Trailing commas
Single quotes
Missing braces
Invalid nesting
Comments inside JSON
Copied smart quotes
Wrong value types
Hidden characters

A clean JSON workflow:

Format
Validate
Check schema expectations
Remove tokens or secrets
Then share or send

ToolsFam JSON formatter:
https://www.toolsfam.com/tools/json-formatter

CSV fails quietly because apps reinterpret it

CSV bugs can be worse than JSON bugs because they may not throw obvious errors.

Watch for:

IDs converted to scientific notation
Phone numbers losing leading zeros
Date formats changing
Commas splitting columns
Encoding issues
Blank columns changing imports

Before importing CSV into production data, inspect a sample first.

PDFs are containers

A PDF may contain text, images, fonts, annotations, forms, metadata, and restrictions.

A scanned PDF is often just images.
A text-based PDF is usually searchable.
A compressed PDF may lose image quality.
A public PDF may expose metadata.

Do not treat every PDF the same.

APIs are structured file exchange

An API request has the same kind of hidden logic:

Method
Headers
Auth
Body format
Encoding
Status code
Response type

Before debugging business logic, inspect the raw request and response.

ToolsFam API Playground:
https://www.toolsfam.com/tools/api-playground

Text encoding is still a real issue

UTF-8 is common, but encoding bugs still happen when moving data between old systems, spreadsheets, PDFs, websites, and regional tools.

Symptoms:

Broken characters
Question marks
Invisible symbols
Weird punctuation
Failed imports
Unexpected whitespace

A practical checklist before using any online file tool:

What type of file is this really?
What am I trying to do: convert, compress, clean, validate, or preview?
Does it contain private data?
Can this be processed locally in the browser?
Did I verify the output?
Did I keep the original?

The main idea:

File bugs are usually not random. They come from hidden structure.

Once you understand that structure, debugging gets easier.

Full ToolsFam guide:
https://www.toolsfam.com/blog/hidden-logic-everyday-files-guide

Tools:
https://www.toolsfam.com/tools

Your Browser Is Becoming Your Daily Productivity OS

Inamullah Khan — Sun, 24 May 2026 20:55:52 +0000

The browser used to be where we opened websites.

Now it is where we work.

Developers test APIs in it.
Marketers check SEO in it.
Students clean text in it.
Creators compress images in it.
Teams convert files, format JSON, preview metadata, and finish small tasks without installing anything.

That shift is important.

The browser is becoming the default workbench for everyday utility tasks.

Why this matters

Most people do not want to install a separate app just to:

Format JSON
Validate an API response
Convert CSV to JSON
Resize an image
Decode a URL
Generate a UUID
Check a timestamp
Convert Markdown to HTML
Preview SEO metadata
Clean copied text

These are not big software tasks.

They are small workflow tasks.

You are already working. Something gets messy. You need a quick tool. You fix it. You move on.

That is why browser-based tools are becoming part of daily productivity.

The browser is already open

A browser tool has one major advantage:

It is already where the user is.

No installation.
No heavy setup.
No switching context.
No opening a full desktop app for a tiny task.

For simple utility work, that matters.

A developer should not need a heavy app just to inspect JSON.
A marketer should not need a full SEO suite just to preview a title.
A student should not need a document editor just to clean copied notes.
A founder should not need design software just to prepare a simple image.

Good browser tools remove friction.

What makes a browser tool actually useful?

A browser tool should not feel like a toy.

A useful tool should:

Open fast
Have a clean interface
Make the main action obvious
Give readable output
Support copy, download, reset, and reuse
Work well on desktop and mobile
Avoid unnecessary clutter
Solve a real workflow

The best tools do not try to look complicated.

They make the task feel simple.

Speed is the product

For small tools, speed is not just a performance metric.

Speed is the product.

If a JSON formatter lags, the user notices.
If an API tester hides the request button, the user notices.
If a file converter makes output hard to download, the user notices.
If keyboard navigation breaks, the user notices.

People use small tools because they want to save time.

So the tool itself cannot become another task.

Common workflows that belong in the browser

Here are some workflows that make sense in a browser tools workspace.

JSON and API debugging

Developers constantly need to format, validate, inspect, compare, minify, and convert JSON.

Useful ToolsFam tools:

JSON Formatter: https://www.toolsfam.com/tools/json-formatter
JSON Validator: https://www.toolsfam.com/tools/json-validator
JSON Viewer: https://www.toolsfam.com/tools/json-viewer
API Playground: https://www.toolsfam.com/tools/api-playground
Developer utilities

Small developer tasks happen all day:

Generate UUIDs
Encode or decode URLs
Generate hashes
Check Unix timestamps
Format SQL
Format XML
Convert Markdown to HTML

Useful ToolsFam tools:

UUID Generator: https://www.toolsfam.com/tools/uuid-generator
Hash Generator: https://www.toolsfam.com/tools/hash-generator
URL Encoder: https://www.toolsfam.com/tools/url-encoder
Base64 Encoder: https://www.toolsfam.com/tools/base64-encoder
Unix Timestamp: https://www.toolsfam.com/tools/unix-timestamp
SEO and content cleanup

Not every SEO task needs a large platform.

Sometimes you just need to:

Check a title
Preview a meta description
Clean a URL
Format copied content
Convert Markdown
Prepare a post faster

That kind of small workflow belongs in the browser.

A better daily workflow

A clean browser-first workflow looks like this:

Search for the exact tool you need
Paste safe sample data or select a file
Run the task
Review the output clearly
Copy, download, or reuse the result
Bookmark the tool if you use it often

That is the direction we are building with ToolsFam.

ToolsFam is a browser-based tools platform for JSON, APIs, PDFs, images, SEO, text, data conversion, developer utilities, and everyday productivity.

Explore all tools:
https://www.toolsfam.com/tools

The bigger picture

The browser is no longer just where work is viewed.

It is where more work gets finished.

Desktop apps still matter for advanced workflows. But for small daily utility tasks, the browser is becoming the natural place to work.

The best version of this is not cluttered or overloaded.

It is fast, clean, searchable, responsive, and useful.

Takeaway

The next productivity upgrade may not be another big app.

It may be a cleaner browser workflow.

Open the tool.
Do the task.
Copy the result.
Move on.

Full blog post:
https://www.toolsfam.com/blog/browser-productivity-os-daily-tools

ToolsFam tools:
https://www.toolsfam.com/tools

Tags: webdev, productivity, tools, javascript

JPG vs PNG vs WebP vs AVIF: Which Image Format Should You Use in 2026?

Inamullah Khan — Sat, 23 May 2026 18:59:30 +0000

Image format choices still matter.

A bad choice can make a site slower, blur screenshots, break transparency, or create files that are much larger than needed.

In 2026, the practical choices are usually:

JPG
PNG
WebP
AVIF

Each one has a different job.

Quick answer

Use JPG when compatibility matters.

Use PNG for screenshots, transparency, and sharp graphics.

Use WebP as the default for most web images.

Use AVIF when you want stronger compression and your audience/platform supports it well.

JPG

JPG is still useful for photos and compatibility-first workflows.

Good for:

simple photos
email attachments
older CMS/platform support
cases where transparency is not needed

Avoid JPG for:

logos
screenshots with text
transparent images
repeated editing
PNG

PNG is lossless and supports transparency.

Good for:

screenshots
UI graphics
transparent images
diagrams
sharp text-heavy visuals

The downside is file size. Large PNGs can slow down a website fast.

WebP

WebP is usually the best modern default for websites.

Good for:

blog covers
product images
thumbnails
compressed screenshots
transparent web graphics
general website assets

If you are replacing large JPG or PNG files, WebP is often the first format to try.

AVIF

AVIF can provide very strong compression.

Good for:

large hero images
landing pages
photo-heavy websites
performance-focused pages

But check your workflow and audience before using AVIF everywhere. WebP is still easier as a general default.

Practical checklist

Before uploading an image:

Is it a photo, screenshot, logo, or transparent graphic?
Does it contain small text?
Does it need transparency?
Is it going on a website?
Will it affect page speed?
Does your platform support the format?
Does it still look good after compression?
ToolsFam workflow

For everyday image and conversion tasks, you can use ToolsFam:

https://www.toolsfam.com/tools

A useful workflow:

Choose the right format.
Convert the image.
Compress if needed.
Rename the file clearly.
Add useful alt text when publishing.
Takeaway

WebP is the practical default for most web images in 2026.

AVIF is great when compression matters most.

PNG is still useful for transparent and sharp graphics.

JPG is still useful when compatibility matters.

Choose based on the image purpose, not hype.

Tags: webdev, seo, productivity, tools

Local-First Browser Tools: What You Should Not Upload Online

Inamullah Khan — Fri, 22 May 2026 23:08:04 +0000

Online tools are useful.

You paste JSON, format code, convert files, clean text, test an API, or compress an image without installing anything.

But there is one habit developers should avoid:

Pasting or uploading sensitive data into random tools.

The problem

A simple debugging task can accidentally expose private data.

Examples:

API keys in config JSON
JWTs in request headers
Customer emails in logs
Private source code
Bank details in PDFs
Internal IDs in CSV files
Hidden metadata inside images

The issue is not that online tools are always bad.

The issue is that not every task needs an upload.

What local-first means

A local-first browser tool tries to process your input directly in your browser.

Good candidates:

JSON formatting
JSON validation
URL encoding
UUID generation
Text cleanup
Code formatting
CSV/JSON previewing
Simple data conversion

For these tasks, you often do not need to send data to a server.

What not to paste or upload

Avoid putting these into unknown online tools:

API keys
Access tokens
Refresh tokens
JWTs
Private keys
Customer data
Internal logs
Payroll files
Contracts
Bank statements
Private PDFs
Private repository code

A good rule:

If the data would be painful to leak, do not paste it casually.

Safer workflow

Before using a formatter, converter, or viewer:

Classify the data.
Remove real secrets.
Replace customer values with placeholders.
Use local/browser-based tools where possible.
Only upload files when the task truly requires it.
Use trusted services for sensitive work.
Clear local history if the tool stores previous inputs.
ToolsFam workflow

For common browser utility tasks, we are building ToolsFam around fast and clean workflows:

JSON tools
API tools
PDF tools
Image tools
SEO tools
Security tools
Text tools
Data converters

ToolsFam tools: https://www.toolsfam.com/tools

For example, if your API response has a JSON syntax issue, start by formatting and validating a sanitized version instead of pasting real production data.

Takeaway

Online tools are useful. The safer habit is knowing what should stay local.

If the task is simple, prefer browser-based processing.
If the data is sensitive, sanitize it first.
If upload is required, use a service you trust.

How to Fix Invalid JSON Errors Online

Inamullah Khan — Thu, 21 May 2026 22:37:19 +0000

How to Fix Invalid JSON Errors Online

Invalid JSON usually comes from small syntax mistakes.

The most common ones are:

trailing commas
single quotes instead of double quotes
missing quotes around object keys
unclosed brackets
comments inside JSON
extra commas

Example of invalid JSON

{
  "name": "ToolsFam",
  "type": "Browser tools",
}

The problem is the trailing comma after the last property.

Fixed version

{
  "name": "ToolsFam",
  "type": "Browser tools"
}

Another common mistake is using JavaScript object syntax instead of JSON:

{
  name: "ToolsFam"
}

Valid JSON requires double quotes around keys:

{
  "name": "ToolsFam"
}

Simple workflow

Paste your JSON into a validator.
Check the line where the error appears.
Fix quotes, commas, brackets, or comments.
Format the JSON after it becomes valid.
Test it again before using it in an API request.

I wrote the full guide here:

How to Fix Invalid JSON Errors Online

DEV Community: Inamullah Khan

The Browser Boundary Model: APIs, CORS, Cookies, JSON, Files, and SEO

ToolsFam Go Is Live: A Privacy-First Chrome Side Panel Extension for Quick Browser Tools

Why I built it

The idea behind ToolsFam Go

Why the Chrome side panel works well

Privacy-first browser tools matter

Who it is for

This is version one

Read the full launch post

Explore ToolsFam

The hidden logic behind JSON, CSV, PDFs, images, APIs, and text files

Your Browser Is Becoming Your Daily Productivity OS

JPG vs PNG vs WebP vs AVIF: Which Image Format Should You Use in 2026?

Local-First Browser Tools: What You Should Not Upload Online

How to Fix Invalid JSON Errors Online

How to Fix Invalid JSON Errors Online

Example of invalid JSON

Fixed version

Simple workflow

Useful tools