DEV Community: Imtiaz ali

Binary and Decimal Conversion: The Developer's Practical Guide (Not Just Theory)

Imtiaz ali — Thu, 16 Apr 2026 15:37:42 +0000

`---

description: "Understand binary-decimal conversion beyond textbook formulas — with real programming use cases, bitwise operation examples, IP subnetting, Unix permissions, and a free converter."
tags: JavaScript, beginners, computer science, webdev

Binary conversion is one of those topics that shows up in CS fundamentals and then seems to disappear from day-to-day work. Until it doesn't. And then you need to understand it properly, quickly, without wading through academic theory.

This guide is for working developers who need binary and decimal conversion for actual tasks: reading memory dumps, working with bitwise operators, debugging subnets, understanding file permissions. With a working converter at the end so you can verify every example.

The Core Concept in Two Minutes

Decimal (base 10): The number system you use every day. Each position is a power of 10.

plaintext 4 5 3 │ │ └── 3 × 10⁰ = 3 × 1 = 3 │ └────── 5 × 10¹ = 5 × 10 = 50 └────────── 4 × 10² = 4 × 100 = 400 ───── 453

Binary (base 2): Exactly the same structure, but each position is a power of 2 instead of 10.

`plaintext
1 1 0 1
│ │ │ └── 1 × 2⁰ = 1 × 1 = 1
│ │ └────── 0 × 2¹ = 0 × 2 = 0
│ └────────── 1 × 2² = 1 × 4 = 4
└────────────── 1 × 2³ = 1 × 8 = 8
───
13

So: 1101₂ = 13₁₀
`

That's the whole conversion. Multiply each bit by its positional power of 2, sum the results.

Two Methods for Manual Conversion

Method 1: Positional (Right to Left)

Start from the rightmost bit (position 0), multiply each bit by 2 raised to its position, add everything up.

Example: Convert 10110₂

Bit	Position	2ⁿ	Value
0	0	1	0
1	1	2	2
1	2	4	4
0	3	8	0
1	4	16	16

Sum: 0 + 2 + 4 + 0 + 16 = 22

Method 2: Double Dabble (Left to Right, Faster for Long Strings)

Start from the leftmost bit. For each bit: double the running total, add the current bit.

Example: Convert 10110₂

plaintext Start: 0 Bit 1: (0 × 2) + 1 = 1 Bit 0: (1 × 2) + 0 = 2 Bit 1: (2 × 2) + 1 = 5 Bit 1: (5 × 2) + 1 = 11 Bit 0: (11 × 2) + 0 = 22

Result: 22 ✓

This method is easier for mental arithmetic on longer binary strings because you never need to calculate large powers of 2.

Decimal to Binary: Division Method

Divide by 2 repeatedly, recording remainders. Read remainders bottom to top.

Example: Convert 45₁₀

`plaintext
45 ÷ 2 = 22 remainder 1 ← LSB (least significant bit)
22 ÷ 2 = 11 remainder 0
11 ÷ 2 = 5 remainder 1
5 ÷ 2 = 2 remainder 1
2 ÷ 2 = 1 remainder 0
1 ÷ 2 = 0 remainder 1 ← MSB (most significant bit)

Read bottom to top: 1 0 1 1 0 1

Result: 45₁₀ = 101101₂
`

Verify: 32 + 0 + 8 + 4 + 0 + 1 = 45 ✓

Where This Actually Matters in Real Development

1. Bitwise Operators

Every JavaScript, Python, C, and Java developer uses these — even if they don't think about the binary underneath.

`javascript
let a = 13; // binary: 1101
let b = 10; // binary: 1010

// AND: 1101 & 1010 = 1000 = 8
console.log(a & b); // 8

// OR: 1101 | 1010 = 1111 = 15
console.log(a | b); // 15

// XOR: 1101 ^ 1010 = 0111 = 7
console.log(a ^ b); // 7

// Left shift: 1101 << 1 = 11010 = 26
console.log(a << 1); // 26

// Right shift: 1101 >> 1 = 0110 = 6
console.log(a >> 1); // 6
`

Left shift by 1 = multiply by 2. Right shift by 1 = integer divide by 2. This is why bit shifts are used for performance-critical arithmetic.

Real use case — checking if a number is even or odd without modulo:

`javascript
// Using bitwise AND with 1
// Even numbers always end in 0, odd numbers end in 1
function isEven(n) {
return (n & 1) === 0;
}

console.log(isEven(4)); // true (100 & 001 = 000)
console.log(isEven(7)); // false (111 & 001 = 001)
`

Real use case — feature flags with bitmasks:

`JavaScript
const PERMISSIONS = {
READ: 0b0001, // 1
WRITE: 0b0010, // 2
DELETE: 0b0100, // 4
ADMIN: 0b1000 // 8
};

let userPerms = PERMISSIONS.READ | PERMISSIONS.WRITE; // 0011 = 3

// Check if user has write permission
if (userPerms & PERMISSIONS.WRITE) {
console.log("User can write");
}

// Grant delete permission
userPerms |= PERMISSIONS.DELETE; // 0111 = 7

// Revoke write permission
userPerms &= ~PERMISSIONS.WRITE; // 0101 = 5
`

Bitmask permission systems are common in embedded systems, game development, and any context where memory efficiency matters.

2. Unix File Permissions

The chmod 755 you run every time you deploy? That's binary.

`shell
chmod 755 file.sh

7 = 111 = rwx (read, write, execute) — owner
5 = 101 = r-x (read, execute) — group

5 = 101 = r-x (read, execute) — others
`

The three octal digits (0–7) each represent a 3-bit binary number:

Bit 2 (4) = read
Bit 1 (2) = write
Bit 0 (1) = execute

So chmod 644 = 110 100 100 = owner can read/write, everyone else can only read. Makes perfect sense once you see the binary.

`bash

Common permission codes explained in binary:

777 = 111 111 111 = rwxrwxrwx (everyone full access)

755 = 111 101 101 = rwxr-xr-x (owner full, others read/exec)

644 = 110 100 100 = rw-r--r-- (owner read/write, others read)

600 = 110 000 000 = rw------- (owner read/write only)

3. IP Addresses and Subnetting

IPv4 addresses are 32-bit binary numbers, split into four 8-bit octets.

`plaintext
IP address: 192.168.1.100

Binary:
192 = 11000000
168 = 10101000
1 = 00000001
100 = 01100100

Full binary: 11000000.10101000.00000001.01100100
`

Subnet masks use this directly:

`plaintext
Subnet /24 = 24 ones followed by 8 zeros:
11111111.11111111.11111111.00000000
= 255.255.255.0

/25 = 11111111.11111111.11111111.10000000
= 255.255.255.128 (splits the last octet in half)
`

The / notation (CIDR) tells you how many leading 1s are in the mask. Understanding this in binary makes subnetting intuitive rather than mysterious.

4. Reading Memory Addresses and Hex

Hexadecimal is just a compact notation for binary. Every 4 bits = exactly 1 hex digit.

plaintext Binary: 1111 1010 Hex: F A → 0xFA = 250 decimal

When you see memory addresses like 0x7fff5fbff6b8, those hex digits each represent 4 binary bits. This is why hex dominates in debuggers, hex editors, and assembly — it's the most human-readable form of binary.

javascript // JavaScript handles all bases natively parseInt('1101', 2) // binary to decimal: 13 parseInt('FA', 16) // hex to decimal: 250 (13).toString(2) // decimal to binary: "1101" (250).toString(16) // decimal to hex: "fa"

5. Color Values in CSS/Design

RGB hex colors are binary at the bottom.

css /* #FF5733 */ FF = 11111111 = 255 (red channel, maximum) 57 = 01010111 = 87 (green channel) 33 = 00110011 = 51 (blue channel)

When designers talk about 8-bit color depth, they mean each channel is one byte (8 bits), allowing 256 values (0–255) per channel, and 256³ = 16.7 million possible colors.

The Important Values to Memorize

You don't need to memorize all 256-byte values. Just know the powers of 2:

Power	Value	Why It Matters
2⁰	1	Least significant bit
2¹	2	—
2²	4	—
2³	8	—
2⁴	16	One hex digit (0–F)
2⁷	128	Sign bit in signed 8-bit
2⁸	256	Values in one byte (0–255)
2¹⁰	1024	1 kilobyte ≠ 1000 bytes
2¹⁶	65536	Max unsigned 16-bit int
2³²	4,294,967,296	IPv4 address space

The fact that 1KB = 1024 bytes (not 1000) is because 1024 = 2¹⁰ — memory naturally falls on binary boundaries.

Quick Converter

For anything beyond mental arithmetic, use OurToolkit's Binary to Decimal Converter — it shows the full step-by-step working for every conversion, both directions. Good for verifying your manual work or learning the process.

Floating Point: The Edge Case Everyone Hits Eventually

One thing this guide hasn't covered: decimal fractions in binary.

JavaScript 0.1 + 0.2 === 0.3 // false in JavaScript (and every IEEE 754 language) 0.1 + 0.2 // 0.30000000000000004

This happens because 0.1 in binary is infinitely repeating — like 1/3 in decimal. The computer truncates it at 64 bits, leaving a tiny error. Multiply that error across many calculations and it compounds.

This is why you never compare floats with ===, why financial calculations use integers (cents, not dollars), and why BigDecimal exists in Java. It's binary's inability to represent some decimal fractions exactly.

Binary is elegant for integer math. It gets complicated the moment fractions enter the picture.

What binary-related bugs have you hit in the wild? The floating point one gets everyone at least once — drop your story in the comments.
`

5 Free Developer Tools I Keep Open Every Day (No Account Required)

Imtiaz ali — Tue, 14 Apr 2026 10:44:38 +0000

There's a category of tools that exists between "I'll just write this myself" and "I need a full SaaS subscription for this." They're small, specific, browser-based utilities that solve one thing really well — no signup, no subscription, no friction.

These are five I've settled on after trying dozens. They cover the tasks that recur across frontend and backend work, as well as general web maintenance: redirects, sitemaps, text encoding, number conversion, and text transformation.

HTACCESS Redirect Generator

The situation: You're migrating a site, cleaning up URL structure, or enforcing HTTPS. You need .htaccess redirect rules, and you don't want to hand-write Apache mod_rewrite syntax from memory (or risk a 500 error from a typo).

The tool: OurToolkit HTACCESS Redirect Generator

Enter the old URL, the new URL, and choose 301/302/303/307 — it generates the correct Apache code. That's it.

# What the tool generates for a simple 301:
RewriteEngine On
RewriteCond %{HTTP_HOST} ^example\.com$ [NC]
RewriteRule ^old-page\.html$ /new-page [R=301,L]

What I actually use it for:

Site migrations (the bulk of my .htaccess usage)
HTTP → HTTPS rules when my hosting control panel doesn't handle it automatically
Cleaning up old URLs after a CMS switch from WordPress to something static

Why it saves time: The difference between Redirect (mod_alias) and RewriteRule (mod_rewrite) matters for query string handling. Getting that wrong silently breaks things. The generator handles the distinction correctly and includes comments explaining what each line does.

2. XML Sitemap Validator

The situation: You've generated or updated your sitemap and you want to make sure it's actually valid before submitting to Google Search Console. Search Console's error messages are vague — it's better to catch issues before submission.

The tool: OurToolkit XML Sitemap Validator

Paste your sitemap XML or enter a URL. It checks for:

Missing or incorrect namespace (xmlns="http://www.sitemaps.org/schemas/sitemap/0.9")
Relative URLs in <loc> (should always be absolute)
HTTP URLs on HTTPS sites
Wrong <lastmod> date format (must be YYYY-MM-DD)
Unclosed tags
Unescaped & characters in URLs
Files over the 50,000 URL limit

The most common error I see in the wild is developers including noindex pages in sitemaps — which sends Google a contradictory signal ("index this page" in the sitemap vs. "don't index this page" in the meta tag). The validator catches this and explains the issue.

Why this matters: A broken sitemap doesn't announce itself. Your site keeps running, Google keeps crawling — but it's potentially missing pages because the sitemap it's relying on has parsing errors. This tool gives you peace of mind in about 30 seconds.

3. Binary to Decimal Converter (with Working Shown)

The situation: You're working with bitwise operators, reading a memory dump, debugging IP subnetting, or checking Unix permissions in octal. You need to convert between number bases and you want to understand the calculation, not just see the output.

The tool: OurToolkit Binary to Decimal Converter

The differentiator here is that it shows the step-by-step multiplication table for every conversion — so you can see why 1101₂ = 13₁₀, not just that it does.

Binary: 1 1 0 1
        │ │ │ └── 1 × 2⁰ = 1
        │ │ └──── 0 × 2¹ = 0
        │ └────── 1 × 2² = 4
        └──────── 1 × 2³ = 8
                         ───
                          13

Converts both ways: decimal → binary shows the division-by-2 method step by step.

What I actually use it for:

Verifying my mental math when working with bitmask permissions
Teaching junior devs why 255.255.255.0 = /24 in CIDR notation
Checking octal values for chmod commands

4. Base64 Encoder/Decoder

The situation: You're dealing with Basic Auth headers, embedding images in CSS/HTML, reading JWT tokens, or working with data URIs. Base64 encoding appears constantly in web development and there's no built-in browser tool for it.

The tool: OurToolkit Base64 Encoder/Decoder

Paste text or a data string, click encode or decode, copy the result. Handles both standard Base64 and URL-safe Base64 (which replaces + with - and / with _, important for JWT and URL contexts).

Real workflow I use this for:

# Generate a Basic Auth header value manually
echo -n "username:password" | base64
# dXNlcm5hbWU6cGFzc3dvcmQ=

# Then set it as:
Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=

The browser tool is faster than switching to a terminal when I'm already in the browser debugging a request.

Also useful for: Inspecting JWT tokens by decoding the payload section (the middle part between the dots) — though be aware the tool won't verify the signature, just decode the payload.

5. Fancy Text / Unicode Text Generator

The situation: This one sounds frivolous, but it has a legitimate developer use case — LinkedIn posts and Twitter/X threads. Plain text in a wall of text feeds gets ignored. Bold Unicode characters in key phrases genuinely increase engagement because they stand out before a reader decides whether to read.

The tool: OurToolkit Fancy Text Generator

50+ Unicode font styles — bold, italic, bold italic, Gothic, monospace, double-struck, small caps, and more. The monospace style in particular is useful for tech content where you want to signal "this is code-related" in a context that doesn't support markdown formatting (LinkedIn doesn't render markdown in posts).

What this actually is technically: The "bold" and "italic" aren't CSS — they're completely different Unicode code points from the Mathematical Alphanumeric Symbols block (U+1D400 range). This is why they persist across copy-paste: the characters themselves carry the appearance.

The accessibility caveat: Screen readers read these characters by their Unicode names ("Mathematical Bold Capital H...") rather than the letters they represent. Don't use Unicode bold for content that needs to be accessible — announcements, calls to action, critical information. Use it for decorative headers and visual hierarchy only.

What Makes These Worth Bookmarking

The common thread: they all work in the browser without an account. No OAuth, no email confirmation, no free trial that expires. The output appears instantly and you can copy it immediately.

For the tools I use occasionally (sitemap validator, HTACCESS generator), the no-login requirement is essential — I don't want to recover a password for a tool I use once a month. For the ones I use frequently (base64, binary conversion), it's about speed: open a tab, paste, copy, close.

The full toolkit — all 100+ tools — is at ourtoolkit.online. Most of it is exactly what you'd expect: image converters, SEO tools, calculators, developer utilities. But the five above are the ones I've genuinely settled into as daily/weekly habits.

What are your go-to browser-based tools? I'm always looking for things in this category — drop your favourites in the comments.
`