DEV Community: ZahrionTech

How Much Does Custom Software Development Cost in 2026? (An Honest Breakdown)

ZahrionTech — Thu, 08 Oct 2026 15:27:01 +0000

I run a custom software agency — ZahrionTech — and this is the question I get asked most, usually in the first five minutes of a call. So here is the honest answer: it depends, but not as vaguely as people think. There are real, typical ranges, and once you know them you can spot a bad quote a mile away.

Everything below is approximate. Your actual price depends on scope, region, and who builds it. Treat these as planning numbers, not promises.

Typical ranges by project type

Landing page / marketing site: $2,000–$8,000
A polished multi-page site with a CMS, contact forms, and basic SEO setup. Goes up with custom design, animations, or multiple languages.

MVP web application: $25,000–$80,000
A working product with user accounts, a database, and a few core features — the classic startup MVP. The wide range is almost entirely scope: three features or twelve?

Custom CRM / ERP / internal tools: $50,000–$200,000+
Business systems live or die on workflow complexity and integrations. Connecting to your existing accounting software, warehouse system, or payment provider is where the hours go.

Mobile app (iOS + Android): $30,000–$150,000+
One shared codebase (React Native, Flutter) sits at the lower end; fully native apps with offline mode, push, and hardware features sit at the top.

What drives the cost up

Vague requirements. "Build me something like Uber" is not a spec. Every ambiguity gets priced in as risk.
Integrations. Each third-party system (payments, CRMs, legacy databases) adds design, testing, and maintenance surface.
Custom design. Templates are cheap; bespoke UX with real user research is not — but it is often the difference between software people tolerate and software they love.
Compliance. Healthcare, finance, and anything handling children's data adds security and audit work you cannot skip.

What drives the cost down

A tight, written scope. The single biggest cost saver. If you can describe exactly what v1 does and does not include, quotes get sharper immediately.
Starting with an MVP. Ship the smallest version that delivers value, learn from real users, then invest in v2.
Off-the-shelf where it doesn't matter. Auth, payments, email delivery — solved problems. Custom code should go where your business is actually different.

Fixed-price vs. hourly

Fixed-price is comforting: you know the number upfront. It works when the scope is genuinely fixed — and punishes you when it is not, because every change becomes a renegotiation.

Hourly (or weekly sprints) fits projects where you are still discovering what to build. You pay for flexibility. The honest version of this model comes with demos every week or two so you can see exactly what your money bought.

Neither is a scam. The scam is a model that does not match your project's uncertainty.

Freelancer vs. agency vs. in-house

Who builds it changes the number as much as what gets built:

Freelancers are the cheapest per hour, great for well-defined pieces of work. The risk is bandwidth — one person can get sick, disappear, or simply be fully booked when you need a fix.
Agencies cost more but bring a team: design, development, QA, and project management under one roof. For anything you cannot fully spec yourself, that structure pays for itself.
In-house looks expensive until you factor in year two and three. If software is your product, owning the team eventually wins. If software supports your business, outsourcing usually wins.

Most small and mid-size businesses I talk to land on an agency for the initial build and a light retainer afterward.

How to set your budget

Work backward from value, not forward from features. If the software saves your team 20 hours a week, price that time for a year — that is roughly what the project is worth to you. Then sanity-check it against the ranges above. If the value is $30k and the quotes are $80k, either descope to an MVP or reconsider whether custom software is the answer. An honest vendor will tell you when the answer is "don't build this."

Red flags in cheap quotes

A quote far below everyone else's. It is not efficiency; it is missing scope. You will pay the difference in change orders — or in a rebuild.
No questions about your business. If a vendor quotes without understanding what the software must achieve, they are quoting a guess.
No mention of maintenance. Software needs hosting, updates, and fixes. A quote with no post-launch plan is a quote for abandonware.
"We own the code" terms. You should own what you pay for. Full stop.

The cheapest software is the software you only pay for once. A realistic budget, a clear scope, and a partner who asks hard questions upfront will save you more than any discount ever will.

How to Build a Word Counter in JavaScript (Live Character, Word, and Reading-Time Counts)

ZahrionTech — Thu, 08 Oct 2026 15:25:41 +0000

I built a word counter last month while working on a small writing tool, and it turned out to be one of those deceptively simple features. Counting characters is trivial. Counting words correctly — handling double spaces, line breaks, tabs, pasted text from Word — takes a little more care than most tutorials show.

Here is the approach I settled on, with working code you can drop into any page.

The HTML

Nothing fancy: a textarea and a few stat placeholders.

<textarea id="text" rows="8" placeholder="Paste or type your text here..."></textarea>

<div id="stats">
  <p>Words: <span id="words">0</span></p>
  <p>Characters: <span id="chars">0</span></p>
  <p>Characters (no spaces): <span id="charsNoSpaces">0</span></p>
  <p>Sentences: <span id="sentences">0</span></p>
  <p>Reading time: <span id="readingTime">—</span></p>
</div>

Counting words without the classic bug

The naive approach is text.split(' ').length. That breaks the moment someone types two spaces in a row, hits enter, or pastes content with tabs — every extra whitespace character gets counted as a word.

The fix is to split on any run of whitespace with a regex, then throw away empty strings:

function countWords(str) {
  const trimmed = str.trim();
  if (trimmed === '') return 0;
  return trimmed.split(/\s+/).length;
}

\s+ matches spaces, tabs, newlines, and any combination of them, so "hello world\n\nfoo" correctly counts as 3 words instead of 6. The trim() handles the edge case where the text starts or ends with whitespace, which would otherwise produce a phantom empty entry.

Characters and sentences

Character counts are straightforward, but writers usually want two numbers: with spaces and without. Job applications and publishing platforms often ask for one or the other.

function countChars(str) {
  return str.length;
}

function countCharsNoSpaces(str) {
  return str.replace(/\s/g, '').length;
}

Sentences are a heuristic — abbreviations like "Mr." will fool any simple splitter — but splitting on sentence-ending punctuation and dropping empties gets you close enough for a writing aid:

function countSentences(str) {
  if (str.trim() === '') return 0;
  return str
    .split(/[.!?]+/)
    .map(s => s.trim())
    .filter(s => s.length > 0)
    .length;
}

Reading time

Most readability research lands around 200–250 words per minute for average adult readers. I use 200 as a conservative default:

function readingTime(wordCount, wpm = 200) {
  if (wordCount === 0) return '—';
  const minutes = wordCount / wpm;
  if (minutes < 1) return 'less than 1 min';
  return `${Math.ceil(minutes)} min`;
}

Wiring it up live

Listen to the input event so counts update as the user types or pastes. For a textarea this small, running the counts directly in the handler is fine — no debounce needed unless you are also doing something expensive like syntax highlighting.

const textarea = document.getElementById('text');

textarea.addEventListener('input', () => {
  const value = textarea.value;
  const words = countWords(value);

  document.getElementById('words').textContent = words;
  document.getElementById('chars').textContent = countChars(value);
  document.getElementById('charsNoSpaces').textContent = countCharsNoSpaces(value);
  document.getElementById('sentences').textContent = countSentences(value);
  document.getElementById('readingTime').textContent = readingTime(words);
});

One thing worth testing: paste a chunk of text copied from a PDF or a Word document. That is where naive counters fall apart (ligatures, non-breaking spaces, soft hyphens), and where the \s+ split earns its keep. If you want to go further, normalize the input first with str.normalize() and replace non-breaking spaces (\u00A0) with regular ones.

A note on performance: debouncing

For a plain textarea, running the counts on every input event is fine — these are microsecond operations on typical text. But if your counter lives inside a rich editor, or you are also running spellcheck, syntax highlighting, or autosave on each keystroke, wrap the handler in a debounce so it only fires after the user pauses:

function debounce(fn, ms = 150) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), ms);
  };
}

textarea.addEventListener('input', debounce(updateCounts));

150ms is the sweet spot: short enough that the numbers feel live, long enough to skip the work while someone is mid-word.

Handling messy pasted text

The real world pastes ugly text. Content copied from PDFs and Word documents often contains non-breaking spaces (\u00A0), which \s in JavaScript does match — good — but also soft hyphens (\u00AD) and zero-width characters that can glue words together or split them invisibly. If your counter needs to be robust, normalize first:

function normalize(str) {
  return str
    .normalize()                    // unify unicode forms
    .replace(/[-]/g, '') // strip zero-width chars
    .replace(/ /g, ' ');       // nbsp -> regular space
}

Run normalize() on the value before counting, and your word count will survive the worst copy-paste jobs your users can throw at it.

When you don't want to build it

This is a fun 30-minute exercise, and I recommend it if you are learning DOM manipulation. But if you just need a quick count for an essay, a product description, or a meta description you are drafting, building your own is overkill — a free online word counter gives you words, characters, sentences, and reading time instantly, with nothing to install.

URL Encoding Explained: encodeURIComponent vs encodeURI (and a Free Online Tool)

ZahrionTech — Mon, 05 Oct 2026 13:24:03 +0000

Every developer building URLs from user input eventually meets percent-encoding: spaces become %20, ampersands become %26, and so on. JavaScript gives you two built-in functions for this — encodeURIComponent and encodeURI — and mixing them up is one of the most common sources of broken links and double-encoded query strings. Let's sort it out.

What URL encoding actually does

URLs may only contain a limited set of characters. Everything else must be percent-encoded: replaced with % followed by its UTF-8 byte values in hexadecimal. For example:

a space becomes %20
& becomes %26
? becomes %3F
é becomes %C3%A9

JavaScript performs this for you with two global functions.

`encodeURIComponent` — for a single piece of a URL

encodeURIComponent() escapes everything except A-Z a-z 0-9 - _ . ! ~ * ' ( ). It's designed for encoding one value — a query parameter, a path segment, a fragment — before you drop it into a URL:

const search = "hello world & goodbye";
const url = `https://example.com/search?q=${encodeURIComponent(search)}`;
console.log(url);
// https://example.com/search?q=hello%20world%20%26%20goodbye

Note how the & inside the value is encoded to %26, so it can't be mistaken for a parameter separator.

`encodeURI` — for a whole URL

encodeURI() is meant for encoding an entire URI. It leaves the reserved characters that give a URL its structure untouched — ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) # — and only encodes things like spaces and non-ASCII characters:

encodeURI("https://example.com/a b?x=1&y=2");
// "https://example.com/a%20b?x=1&y=2"

The space is fixed, but ?, &, and = keep working as URL syntax.

The rule of thumb

Situation	Use
Encoding one query parameter or path segment	`encodeURIComponent`
Encoding a full URL that already has structure	`encodeURI`
Decoding them back	`decodeURIComponent` / `decodeURI`

The classic mistake is encoding a whole URL with encodeURIComponent:

encodeURIComponent("https://example.com/?q=a b");
// "https%3A%2F%2Fexample.com%2F%3Fq%3Da%20b" — broken!

The : and / characters are structural — encoding them destroys the URL.

Beware double encoding

Encoding an already-encoded string produces garbage: %20 becomes %2520. This usually happens when a value passes through two layers (e.g., your code encodes it and the HTTP library encodes it again). The fix is to encode exactly once, at the boundary where you assemble the URL.

The modern alternative: `URLSearchParams`

For query strings, the URLSearchParams API handles encoding for you and is usually the cleanest choice:

const params = new URLSearchParams({ q: "hello world", tag: "a&b" });
console.log(params.toString());
// "q=hello+world&tag=a%26b"

One quirk to know: URLSearchParams encodes spaces as + (the application/x-www-form-urlencoded convention), while encodeURIComponent produces %20. Both are valid in query strings, and servers decode either form. decodeURIComponent does not turn + back into a space, though — so pair it with encodeURIComponent output, not with form-encoded strings.

When you'd rather not write code

If you just need to encode or decode a string quickly, the free URL encoder/decoder on Toolstack does it instantly in your browser — no signup, everything runs client-side so your data never leaves your device. Useful for one-off fixes like an API key with special characters in a query string.

Takeaways

encodeURIComponent is for individual values; encodeURI is for whole URLs.
Never encode a full URL with encodeURIComponent — it will escape the : and / that hold the URL together.
Encode exactly once to avoid double encoding (%2520).
For query strings, consider URLSearchParams, which encodes for you.
For quick one-offs, a free online URL encoder/decoder gets it done without any setup.

How to Validate and Format JSON in JavaScript (and a Free Tool That Does It Instantly)

ZahrionTech — Mon, 05 Oct 2026 13:23:20 +0000

Working with JSON in JavaScript means dealing with one constant problem: is this string actually valid JSON, and how do I make it readable? Whether you're debugging an API response or hand-writing a config file, here are the essential techniques.

Validating JSON with `try/catch`

JSON.parse() throws a SyntaxError when the input isn't valid JSON, so the standard way to validate is to wrap it in try/catch:

function isValidJSON(str) {
  try {
    JSON.parse(str);
    return true;
  } catch {
    return false;
  }
}

isValidJSON('{"name": "Ada"}');        // true
isValidJSON('{"name": "Ada",}');      // false — trailing comma
isValidJSON("{'name': 'Ada'}");         // false — single quotes aren't valid JSON

Common culprits for invalid JSON: trailing commas, single-quoted strings, comments, and unquoted keys. All are fine in JavaScript object literals, but none are legal in JSON.

Getting the parsed value and error details

A plain boolean isn't always enough. Return the parsed value or the error message instead:

function validateJSON(str) {
  try {
    const data = JSON.parse(str);
    return { valid: true, data, error: null };
  } catch (err) {
    return { valid: false, data: null, error: err.message };
  }
}

const result = validateJSON('{"a": 1');
console.log(result.valid); // false
console.log(result.error); // something like "Expected ',' or '}' after property value..."

Note: exact SyntaxError messages differ between engines (V8, SpiderMonkey, JavaScriptCore), so don't parse the message text programmatically — only rely on the fact that it throws.

Pretty-printing with `JSON.stringify`

The third argument to JSON.stringify controls indentation:

const data = { name: "Ada", languages: ["JavaScript", "Rust"], active: true };

JSON.stringify(data);           // compact, one line
JSON.stringify(data, null, 2);  // pretty-printed with 2 spaces
JSON.stringify(data, null, "\t"); // indented with tabs

A combined validate-and-format helper

Put it together into one utility you can drop into any project:

function formatJSON(str, indent = 2) {
  try {
    return JSON.stringify(JSON.parse(str), null, indent);
  } catch (err) {
    throw new Error(`Invalid JSON: ${err.message}`);
  }
}

console.log(formatJSON('{"b":2,"a":1}'));
// {
//   "b": 2,
//   "a": 1
// }

For large payloads, JSON.stringify with indentation is fast enough for anything you'd reasonably display, and you can always fall back to the compact form for storage or network transfer.

When you just want it done in your browser

If you'd rather paste and click than write a script, the free JSON validator on Toolstack validates and formats JSON instantly right in your browser — no signup, and everything runs client-side so your data never leaves your device. Handy for quickly checking API responses or config files without opening your editor.

Takeaways

JSON.parse() inside try/catch is the canonical way to validate JSON in JavaScript.
Never rely on the exact text of the SyntaxError message — it varies by engine.
JSON.stringify(value, null, 2) pretty-prints any value in one line of code.
For quick one-off checks, a free online JSON validator gets the job done without any setup.

How to Convert HEIC to JPG in the Browser (No Uploads, 100% Private)

ZahrionTech — Mon, 05 Oct 2026 12:25:29 +0000

What is HEIC, and why does it exist?

HEIC (High Efficiency Image Container) is the default photo format on iPhones since iOS 11. Built on the HEVC/H.265 codec, it stores photos at roughly half the file size of JPEG at similar quality, and a single HEIC file can even hold live photos, bursts, and depth data.

The problem is compatibility. Many Windows PCs, older Android phones, and plenty of web services still can't open HEIC files. Browser support is patchy as well: Safari handles HEIC natively, but Chrome and Firefox generally don't. So converting HEIC to JPG remains a daily chore for a lot of people.

A small client-side approach in JavaScript

The cleanest pattern for an in-browser converter is a short pipeline:

Let the user pick a file with an <input type="file"> (accept .heic).
Decode the HEIC bytes to a bitmap (with a WASM HEVC decoder, e.g. via a library like heic2any).
Paint the bitmap onto a <canvas>.
Re-encode as JPEG with canvas.toBlob('image/jpeg', quality) and offer the download.

async function convertHeicToJpg(file) {
  // 1. Decode HEIC to an ImageBitmap using your chosen decoder
  const bitmap = await decodeHeic(file);

  // 2. Paint it onto a canvas
  const canvas = document.createElement('canvas');
  canvas.width = bitmap.width;
  canvas.height = bitmap.height;
  canvas.getContext('2d').drawImage(bitmap, 0, 0);

  // 3. Re-encode as JPEG at 90% quality
  return new Promise((resolve) =>
    canvas.toBlob(resolve, 'image/jpeg', 0.9)
  );
}

Because everything runs in the page, the photo never leaves the user's device: no uploads, no server-side copies, no waiting in an upload queue.

Don't want to build it yourself?

If you just need a quick conversion rather than your own implementation, try its free HEIC to JPG converter: drop a photo on the homepage, convert it in the browser, and download the JPG. No signup and no uploads — files stay on your machine, exactly like the client-side pipeline above.

That's the part worth remembering: whenever a tool can do the work locally in your browser, there's no reason to hand your photos to a server first.

How to Encode Files to Base64 in JavaScript (FileReader API)

ZahrionTech — Mon, 05 Oct 2026 12:01:29 +0000

If you've ever needed to send an image inside a JSON payload or embed a tiny icon directly in your HTML, you've probably run into Base64. Most tutorials show how to Base64-encode strings with btoa(), but encoding a file — an actual image, PDF, or font chosen through an <input type="file"> — is a different and very practical skill.

In this tutorial, you'll learn how to turn any user-selected file into a Base64 string using the browser's FileReader API, strip out the raw Base64 payload when that's all you need, and put the result to work by embedding a small image with zero extra network requests.

The FileReader API in 30 seconds

FileReader is a built-in browser API for reading the contents of File or Blob objects asynchronously. The method we care about is readAsDataURL(file). It reads the file and hands you back a data URL — a string shaped like this:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...

A data URL packs three things into one string: the MIME type (image/png), the declared encoding (base64), and the actual Base64-encoded bytes after the comma.

Step 1: Reading a file with readAsDataURL

Here is a minimal example. Drop it into an HTML file with a file input:

<input type="file" id="picker" accept="image/*">
<pre id="output"></pre>

<script>
  const picker = document.getElementById('picker');
  const output = document.getElementById('output');

  picker.addEventListener('change', () => {
    const file = picker.files[0];
    if (!file) return;

    const reader = new FileReader();

    reader.onload = (event) => {
      output.textContent = event.target.result; // the data URL
    };

    reader.onerror = () => {
      console.error('Could not read file:', reader.error);
    };

    reader.readAsDataURL(file);
  });
</script>

The key detail: FileReader is asynchronous. Register onload before calling readAsDataURL, because reader.result is null until the read finishes. And always handle onerror, so a failed read doesn't fail silently.

Step 2: Extracting just the Base64 payload

Often you don't want the whole data URL — maybe your API expects the raw Base64 string. The payload is everything after the first comma:

const dataUrl = event.target.result;
const base64Payload = dataUrl.split(',')[1];

If you prefer to be explicit about the header format, you can split on the encoding marker instead:

const [header, base64Payload] = dataUrl.split(';base64,');
console.log(header);        // "data:image/png"
console.log(base64Payload); // "iVBORw0KGgo..."

Both approaches work. Either way, guard against unexpected input — if the split doesn't produce two parts, the value wasn't a data URL.

A practical example: embedding a small image

Data URLs shine for small assets: icons, logos, or thumbnails you want available instantly with no extra HTTP request. This complete example reads an image and shows a live preview by using the data URL directly as the image source:

<input type="file" id="picker" accept="image/*">
<img id="preview" alt="preview" style="max-width: 300px; display: block;">

<script>
  const picker = document.getElementById('picker');
  const preview = document.getElementById('preview');

  picker.addEventListener('change', () => {
    const file = picker.files[0];
    if (!file) return;

    if (file.size > 100 * 1024) {
      alert('Pick an image under 100 KB for this demo.');
      return;
    }

    const reader = new FileReader();
    reader.onload = (event) => {
      preview.src = event.target.result; // data URL works as an image source
    };
    reader.readAsDataURL(file);
  });
</script>

Pick a small PNG and it appears immediately — no upload, no server round trip.

A few things to watch out for

Size overhead. Base64 inflates data by about 33%. A 100 KB image becomes roughly a 133 KB string. Fine for icons; terrible for photo galleries — use real file hosting for large assets.
Memory. A giant data URL sits in memory as one big string. Avoid reading multi-megabyte files this way in production code.
Strings vs. files. btoa() and atob() handle text; FileReader handles files and binary data. Mixing them up is the most common beginner mistake — btoa() throws on characters outside the Latin-1 range.
Decoding back. To turn a data URL back into a downloadable file, fetch(dataUrl).then(res => res.blob()) is a handy one-liner.

Wrapping up

The pattern is always the same: create a FileReader, listen for load, call readAsDataURL, then use the data URL whole or split off the payload after the comma. With that one pattern, you can preview uploads instantly, inline small assets, and build file-handling features without any backend.

And when you just need to quickly encode or decode a Base64 string by hand — no code, no file picker — a free online tool like ToolStack's Base64 encoder and decoder does it right in your browser with no signup, and everything stays private on your machine.

Happy coding!

Base64URL Explained: Encoding Data for URLs and JWTs

ZahrionTech — Mon, 05 Oct 2026 01:37:23 +0000

You've probably seen Base64 before — those long strings of letters, numbers, +, /, and = padding. It works fine in many places, but the moment you drop that string into a URL or a filename, things break. + turns into a space, / looks like a path separator, and = confuses query strings.

That's exactly the problem Base64URL solves.

What is Base64URL?

Base64URL is a variant of Base64 designed for contexts where encoded data must survive inside URLs, filenames, or cookies without any escaping. It keeps the same core idea — representing binary data as printable ASCII text — but swaps out the two problematic characters and drops the padding:

+ becomes -
/ becomes _
= padding is omitted

So where standard Base64 might produce a+b/c==, the Base64URL version of the same data is a-b_c. Same information, safe to paste anywhere.

Where you'll meet it

The most common place developers run into Base64URL is JSON Web Tokens (JWTs). A JWT has three parts separated by dots — header, payload, and signature — and each part is Base64URL-encoded. If you've ever pasted a token into a debugger to inspect its payload, you were decoding Base64URL.

It also shows up in OAuth state parameters, PKCE code challenges, WebAuthn attestation data, and anywhere else binary data needs to travel inside a URL.

Encoding and decoding in JavaScript

The browser's built-in btoa() and atob() only handle standard Base64. Converting to and from Base64URL is just a character swap — here are two small helpers:

// Standard Base64 -> Base64URL
function toBase64Url(base64) {
  return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
}

// Base64URL -> Standard Base64 (then decode)
function fromBase64Url(base64url) {
  let base64 = base64url.replace(/-/g, '+').replace(/_/g, '/');
  // Restore the missing padding
  base64 += '='.repeat((4 - base64.length % 4) % 4);
  return atob(base64);
}

// Example: round-trip some text
const encoded = toBase64Url(btoa('hello world')); // "aGVsbG8gd29ybGQ"
console.log(fromBase64Url(encoded));              // "hello world"

The padding trick works because Base64 always operates in groups of four characters, so you can reliably re-add the missing = signs before decoding. That's why Base64URL can safely leave them out.

Decoding a JWT payload

Reading a token's claims is a handy real-world use of this. Take the middle segment of a JWT and run it through fromBase64Url:

function decodeJwtPayload(token) {
  const payload = token.split('.')[1];
  return JSON.parse(fromBase64Url(payload));
}

// Example
const token = 'eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyIjoiemFocmlvbiJ9.signature';
console.log(decodeJwtPayload(token)); // { user: 'zahrion' }

One important reminder: decoding a payload is not the same as verifying it. Anyone can read the claims — only checking the signature proves the token is authentic.

Wrapping up

Base64URL is a small but important detail: the same Base64 alphabet, minus the characters that break URLs. If you're debugging tokens, inspecting OAuth flows, or just curious what an encoded string actually says, a quick decoder saves you the manual character-swapping. I keep ToolStack Tools bookmarked for exactly that — it's a free, no-signup Base64 encoder and decoder that runs entirely in your browser, so pasting in a token or an encoded string stays private.

How to Decode Base64 in JavaScript (and a Free Tool That Does It Instantly)

ZahrionTech — Mon, 05 Oct 2026 01:17:04 +0000

Base64 shows up everywhere in JavaScript work: API tokens, data URLs for images, email attachments, even the odd query parameter. The browser ships with built-in functions to handle it, but there's one classic pitfall that trips up beginners and veterans alike. Let's walk through the correct way to decode (and encode) Base64 in JavaScript.

The basics: `atob()` and `btoa()`

Every modern browser (and Node.js) provides two global functions:

btoa() — binary to ASCII: encodes a string into Base64
atob() — ASCII to binary: decodes a Base64 string back into a plain string

const encoded = btoa("Hello, world!");
console.log(encoded); // SGVsbG8sIHdvcmxkIQ==

const decoded = atob(encoded);
console.log(decoded); // Hello, world!

That works great — until you try anything outside plain ASCII.

The UTF-8 pitfall

btoa() only accepts characters in the Latin1 range (code points 0–255). Pass in an emoji or any accented character and it throws an InvalidCharacterError:

btoa("héllo 🌍"); // ❌ throws InvalidCharacterError

And atob() has the mirror problem: it returns a string where each character is a single byte, so multi-byte UTF-8 sequences come back garbled:

atob("aMOpbGxvIPCfjI0="); // ❌ mojibake instead of "héllo 🌍"

The correct way: `TextEncoder` / `TextDecoder`

The fix is to convert through UTF-8 bytes explicitly. Here's a robust pair of helpers:

function base64Encode(str) {
  const bytes = new TextEncoder().encode(str); // string → UTF-8 bytes
  let binary = "";
  bytes.forEach((b) => (binary += String.fromCharCode(b)));
  return btoa(binary);
}

function base64Decode(b64) {
  const binary = atob(b64); // Base64 → raw bytes as string
  const bytes = Uint8Array.from(binary, (c) => c.charCodeAt(0));
  return new TextDecoder().decode(bytes); // UTF-8 bytes → string
}

base64Encode("héllo 🌍"); // aMOpbGxvIPCfjI0=
base64Decode("aMOpbGxvIPCfjI0="); // héllo 🌍 ✅

A practical example: decoding a JWT payload

JSON Web Tokens store their payload as Base64url-encoded JSON. Here's how to peek at one safely in the browser console:

function decodeJwtPayload(token) {
  const base64url = token.split(".")[1];
  const base64 = base64url.replace(/-/g, "+").replace(/_/g, "/");
  const binary = atob(base64);
  const bytes = Uint8Array.from(binary, (c) => c.charCodeAt(0));
  return JSON.parse(new TextDecoder().decode(bytes));
}

Drop any unsigned JWT into that and you'll get its claims back as an object — handy when debugging API auth.

Don't want to write code every time?

For quick one-off decoding — pasting a token from a log file, checking a data URL, or sanity-checking an API response — it's faster to just use a tool. You can try it instantly at ToolStack Tools, a free Base64 decoder and encoder that runs entirely in your browser with no signup.

Recap

Use btoa() / atob() for plain ASCII strings.
Route through TextEncoder / TextDecoder whenever non-ASCII text is possible.
For JWTs, remember to convert Base64url back to standard Base64 first.

Happy decoding! 🎉

How We Structure a Small-Business CRM Database (Tables You'll Actually Need)

ZahrionTech — Sun, 04 Oct 2026 01:14:00 +0000

Most small-business CRMs fail not from bad code but from a messy database. Here is the minimal table structure we start with for a custom CRM — it covers 90% of businesses.

The core tables

contacts — every person you do business with:

id, full_name, phone, email, company, created_at

deals — one row per potential sale:

id, contact_id, title, value, stage (new / contacted / quoted / won / lost), created_at, updated_at

activities — every call, visit or follow-up:

id, deal_id, type, notes, happened_at, next_follow_up

products — what you sell:

id, name, price

deal_items — which products belong to which deal:

id, deal_id, product_id, quantity

Why this shape works

One contact can have many deals; one deal has many activities. Nothing is duplicated.
The stage column on deals drives the whole sales pipeline view — move a deal from "quoted" to "won" and your reports update themselves.
next_follow_up on activities is the single most valuable field: it powers the daily "who do I call today" list that stops leads going cold.

What we add later

Only when the business asks: user roles, email templates, invoice tables, and integrations with accounting tools. Start small, grow on demand.

We build custom CRM systems like this at ZahrionTech for small businesses in the USA, UK and worldwide — shaped around how the team actually works. More at https://zahriontech.com/

Build a Simple POS Billing Page with HTML, CSS and JavaScript

ZahrionTech — Sun, 04 Oct 2026 00:37:56 +0000

In a small retail shop, a fast billing screen beats a heavy app. Here is a minimal point-of-sale billing page you can run in any browser — no frameworks needed.

1. The layout

Two columns: product buttons on the left, the running bill on the right.

<div class="pos">
  <div class="products">
    <button data-name="Milk" data-price="120">Milk — 120</button>
    <button data-name="Bread" data-price="90">Bread — 90</button>
    <button data-name="Eggs" data-price="250">Eggs — 250</button>
  </div>
  <div class="bill">
    <h2>Bill</h2>
    <ul id="items"></ul>
    <p>Total: <strong id="total">0</strong></p>
    <button onclick="window.print()">Print receipt</button>
  </div>
</div>

2. Adding items with JavaScript

const items = document.getElementById('items');
const totalEl = document.getElementById('total');
let total = 0;

document.querySelectorAll('.products button').forEach(btn => {
  btn.addEventListener('click', () => {
    const li = document.createElement('li');
    li.textContent = `${btn.dataset.name} — ${btn.dataset.price}`;
    items.appendChild(li);
    total += Number(btn.dataset.price);
    totalEl.textContent = total;
  });
});

3. Why this pattern works

Every sale is one click — cashiers never touch a keyboard.
The bill is plain DOM, so window.print() gives you a receipt with zero dependencies.
Prices live in data-* attributes, so the same page works for any product list you render server-side.

4. Going further

A production version adds a product database, discount and tax rules, offline support, and end-of-day sales reports.

At ZahrionTech we build exactly that kind of custom POS software for retail stores, restaurants and salons — this demo is the same idea, production-hardened. More at https://zahriontech.com/

DEV Community: ZahrionTech

How Much Does Custom Software Development Cost in 2026? (An Honest Breakdown)

Typical ranges by project type

What drives the cost up

What drives the cost down

Fixed-price vs. hourly

Freelancer vs. agency vs. in-house

How to set your budget

Red flags in cheap quotes

How to Build a Word Counter in JavaScript (Live Character, Word, and Reading-Time Counts)

The HTML

Counting words without the classic bug

Characters and sentences

Reading time

Wiring it up live

A note on performance: debouncing

Handling messy pasted text

When you don't want to build it

URL Encoding Explained: encodeURIComponent vs encodeURI (and a Free Online Tool)

What URL encoding actually does

encodeURIComponent — for a single piece of a URL

encodeURI — for a whole URL

The rule of thumb

Beware double encoding

The modern alternative: URLSearchParams

When you'd rather not write code

Takeaways

How to Validate and Format JSON in JavaScript (and a Free Tool That Does It Instantly)

Validating JSON with try/catch

Getting the parsed value and error details

Pretty-printing with JSON.stringify

A combined validate-and-format helper

When you just want it done in your browser

Takeaways

How to Convert HEIC to JPG in the Browser (No Uploads, 100% Private)

What is HEIC, and why does it exist?

A small client-side approach in JavaScript

Don't want to build it yourself?

How to Encode Files to Base64 in JavaScript (FileReader API)

The FileReader API in 30 seconds

Step 1: Reading a file with readAsDataURL

Step 2: Extracting just the Base64 payload

A practical example: embedding a small image

A few things to watch out for

Wrapping up

Base64URL Explained: Encoding Data for URLs and JWTs

What is Base64URL?

Where you'll meet it

Encoding and decoding in JavaScript

Decoding a JWT payload

Wrapping up

How to Decode Base64 in JavaScript (and a Free Tool That Does It Instantly)

The basics: atob() and btoa()

The UTF-8 pitfall

The correct way: TextEncoder / TextDecoder

A practical example: decoding a JWT payload

Don't want to write code every time?

Recap

How We Structure a Small-Business CRM Database (Tables You'll Actually Need)

The core tables

Why this shape works

What we add later

Build a Simple POS Billing Page with HTML, CSS and JavaScript

1. The layout

2. Adding items with JavaScript

3. Why this pattern works

4. Going further

`encodeURIComponent` — for a single piece of a URL

`encodeURI` — for a whole URL

The modern alternative: `URLSearchParams`

Validating JSON with `try/catch`

Pretty-printing with `JSON.stringify`

The basics: `atob()` and `btoa()`

The correct way: `TextEncoder` / `TextDecoder`