DEV Community: Vo Viet Hoang

Bridging Print and Screen: Building a Client-Side CMYK to RGB Color Converter

Vo Viet Hoang — Sun, 20 Sep 2026 13:57:57 +0000

Hey DEV community! 👋

In frontend engineering, UI design, and digital publishing, maintaining visual identity across both physical print assets and screen interfaces is a recurring challenge.

Print materials rely on the subtractive CMYK color space (Cyan, Magenta, Yellow, Key/Black), while digital monitors emit light through the additive RGB model (Red, Green, Blue). When translating brand palettes into CSS stylesheets or canvas assets, developers frequently need to convert between these two models.

To make this workflow quick, private, and accessible, I developed a responsive, entirely browser-based CMYK to RGB Converter. In this post, we will examine the underlying mathematics of color transformation and implement a clean, bidirectional JavaScript routine.

Additive vs. Subtractive Color Spaces

Before writing the conversion algorithms, let us review how these two spaces handle color wavelengths:

RGB (Additive Model): Designed for electronic displays (monitors, mobile devices). Colors are produced by emitting light. Combining Red, Green, and Blue at full power yields white light. Values range from 0 to 255 for each channel.
CMYK (Subtractive Model): Used for physical offset printing. Ink pigments absorb specific light frequencies and reflect the rest. Layering all four inks at full density produces a dark shade. Channel values range from 0 to 100.

Because physical ink absorption differs from light emission, mathematical conversions serve as geometric approximations to maintain design alignment.

The Mathematics of Color Conversion

1. CMYK to RGB Formula

To convert CMYK values (scaled from 0 to 100) into RGB integers (0 to 255), we apply the following equations:

R = 255 \times (1 - C /100) \times (1 - K /100)

G = 255 \times (1 - M /100) \times (1 - K /100)

B = 255 \times (1 - Y /100) \times (1 - K /100)

The calculated values are rounded to the nearest whole integer between 0 and 255.

2. RGB to CMYK Formula

To perform the reverse operation, we first normalize the RGB values to unit fractions:

R^{'} = \frac{R}{255}, G^{'} = \frac{G}{255}, B^{'} = \frac{B}{255}

Next, we extract the Key (Black) component by taking the complement of the maximum channel value:

K = 1 - max (R^{'}, G^{'}, B^{'})

The remaining ink channels are calculated relative to the remaining light:

C = \frac{1 - R ^{'} - K}{1 - K}, M = \frac{1 - G ^{'} - K}{1 - K}, Y = \frac{1 - B ^{'} - K}{1 - K}

(Note: When $K = 1$ representing pure black, C, M, and Y are assigned to 0 to prevent division-by-zero errors).

JavaScript Implementation

Below is the clean, self-contained JavaScript implementation for bidirectional color transformation:

/**
 * Translates CMYK percentages to RGB values.
 * @param {number} c - Cyan (0-100)
 * @param {number} m - Magenta (0-100)
 * @param {number} y - Yellow (0-100)
 * @param {number} k - Key/Black (0-100)
 * @returns {object} Object containing {r, g, b}
 */
function cmykToRgb(c, m, y, k) {
    const r = Math.round(255 * (1 - c / 100) * (1 - k / 100));
    const g = Math.round(255 * (1 - m / 100) * (1 - k / 100));
    const b = Math.round(255 * (1 - y / 100) * (1 - k / 100));
    return { r, g, b };
}

/**
 * Translates RGB integers to CMYK percentages.
 * @param {number} r - Red (0-255)
 * @param {number} g - Green (0-255)
 * @param {number} b - Blue (0-255)
 * @returns {object} Object containing {c, m, y, k}
 */
function rgbToCmyk(r, g, b) {
    const rPrime = r / 255;
    const gPrime = g / 255;
    const bPrime = b / 255;

    const k = 1 - Math.max(rPrime, gPrime, bPrime);
    if (k === 1) {
        return { c: 0, m: 0, y: 0, k: 100 };
    }

    const c = Math.round(((1 - rPrime - k) / (1 - k)) * 100);
    const m = Math.round(((1 - gPrime - k) / (1 - k)) * 100);
    const y = Math.round(((1 - bPrime - k) / (1 - k)) * 100);

    return { c, m, y, k: Math.round(k * 100) };
}

/**
 * Converts RGB components into a standard Hexadecimal color string.
 */
function rgbToHex(r, g, b) {
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
}

Client-Side Security & Data Privacy

Converting proprietary color guidelines should not require transmitting palette values across networks.

By processing the calculations strictly in the browser:

Zero Network Calls: Conversions take place in local memory.
Instant Dynamic Previews: Changing an input slider or number field renders the color swatch in real time without lag.
One-Click Export: Quickly copy both rgb(r, g, b) and #HEX strings for direct inclusion in CSS stylesheets.

If you need a reliable, client-side utility to translate print palettes to screen color codes, feel free to try the live tool:

👉 Explore the Live Tool: CMYK to RGB Color Conversion Utility - Vo Viet Hoang

Let's Connect!

How do you manage color consistency between print design files and web development deliverables in your team?

Feel free to share your thoughts in the comments below! Happy coding! 🚀

Parsing Video Captions: Building a Secure Client-Side ASS to SRT Converter

Vo Viet Hoang — Tue, 08 Sep 2026 13:41:35 +0000

Hey DEV community! 👋

When distributing video content globally, providing highly compatible caption files is an essential step to ensure broad audience engagement. While the ASS (Advanced SubStation Alpha) format offers rich stylization—including precise coordinate offsets, nested typography effects, and dynamic kinetic movement—it introduces major compatibility challenges.

Most consumer-grade media players, web-based video controls, and streaming networks require the simpler, clean, and lightweight SRT (SubRip) format.

To automate this workflow without relying on server-side conversions, I built an entirely browser-based ASS to SRT Subtitle Converter in vanilla JavaScript. In this post, we will inspect the architectural differences between these formats and look at how to implement a secure, local parsing utility.

Format Specifications: ASS vs. SRT

Before writing the parser, we must analyze the structural patterns of both formats.

1. ASS (Advanced SubStation Alpha)

ASS is a multi-section, text-based format containing comprehensive styling dictionaries and scripting headers. The actual dialogue events are stored under the [Events] block:

[Events]
Format: Layer, Start, End, Style, Actor, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:01:12.45,0:01:15.90,Default,,0,0,0,,Welcome to our latest {\b1}video production tutorial{\b0}!

2. SRT (SubRip)

SRT is a basic flat-file structure containing sequential numbering, start/end timestamps separated by the --> token, and unstyled text blocks:

1
00:01:12,450 --> 00:01:15,900
Welcome to our latest video production tutorial!

Under the Hood: The Interpolation and Sanitation Pipeline

To translate ASS into SRT, our client-side engine performs two main operations:

1. Timestamp Conversion

ASS tracks timing in centiseconds (1/100 of a second), whereas SRT relies on milliseconds (1/1000 of a second). The converter implements this conversion:

Milliseconds (ms) = Centiseconds (CS) \times 10

Hours, minutes, and seconds are padded with leading zeros to maintain the standard double-digit layout required by the SRT specification.

2. Tag Sanitation

We use regular expressions to strip out formatting overrides (like {\b1}, {\pos(100,200)}, or font details) to ensure universal hardware compatibility:

Styling Tag Removal: Removes everything within curly brackets: text.replace(/\{[^}]*\}/g, '')
Line Break Normalization: Translates alignment breaks into standard Unix line breaks: text.replace(/\\N|\\n/gi, '\n')

JavaScript Parser Implementation

Below is the clean, self-contained JavaScript utility that splits, validates, and decodes the raw inputs:

/**
 * Converts a raw ASS subtitle string into clean SRT format.
 * @param {string} assInput - The raw ASS text file content
 * @returns {string} The converted SRT output
 */
function convertAssToSrt(assInput) {
    if (!assInput) return '';

    const lines = assInput.split('\n');
    let srtContent = [];
    let subtitleNumber = 1;
    let inEventsSection = false;

    for (const line of lines) {
        const trimmedLine = line.trim();

        if (trimmedLine === '[Events]') {
            inEventsSection = true;
            continue;
        }
        if (trimmedLine.startsWith('[') && trimmedLine !== '[Events]') { 
            inEventsSection = false;
        }

        if (inEventsSection && trimmedLine.startsWith('Dialogue:')) {
            const parts = trimmedLine.split(',');
            if (parts.length < 10) continue; 

            const assStartTime = parts[1].trim();
            const assEndTime = parts[2].trim();

            // Recombine the remaining elements in case dialogue contains commas
            const assText = parts.slice(9).join(','); 

            const srtStartTime = formatAssTimeToSrt(assStartTime);
            const srtEndTime = formatAssTimeToSrt(assEndTime);
            const cleanText = assText.replace(/\{[^}]*\}/g, '').replace(/\\N|\\n/gi, '\n').trim();

            if (cleanText) { 
                srtContent.push(subtitleNumber.toString());
                srtContent.push(`${srtStartTime} --> ${srtEndTime}`);
                srtContent.push(cleanText);
                srtContent.push(''); // Empty line separator
                subtitleNumber++;
            }
        }
    }

    if (srtContent.length === 0) {
        throw new Error("No dialogue events discovered. Ensure your subtitle contains an [Events] section.");
    }

    return srtContent.join('\n').trim();
}

/**
 * Translates ASS time format (H:MM:SS.CS) to SRT format (HH:MM:SS,ms)
 */
function formatAssTimeToSrt(assTime) {
    const parts = assTime.split(':');
    let h = parseInt(parts[0], 10);
    let m = parseInt(parts[1], 10);
    let s_cs = parseFloat(parts[2]); 

    let s = Math.floor(s_cs);
    let cs = Math.round((s_cs - s) * 100); 
    let ms = cs * 10; 

    h = h.toString().padStart(2, '0');
    m = m.toString().padStart(2, '0');
    s = s.toString().padStart(2, '0');
    ms = ms.toString().padStart(3, '0');

    return `${h}:${m}:${s},${ms}`;
}

Client-Side Security and Privacy

Many free online converters process your subtitle files on remote servers. When translating unreleased films, private lectures, or company product videos, this network exposure introduces unnecessary data risks.

By executing the regex cleaning and timing interpolation entirely on the client side:

No Database Logging: Your raw text strings remain strictly within your local browser memory and are flushed instantly when the page is reset.
Universal Offline Support: Once the tool page is loaded, the converter operates without any internet connectivity.

Try the Live Utility

I have integrated this client-side transcoder directly into my online toolbox. If you need a private, rapid way to flatten your caption files and remove styling tags for universal hardware compatibility, feel free to use it:

👉 Live Link: Online ASS to SRT Subtitle Converter - Vo Viet Hoang

Let's Connect!

How do you handle subtitle standardization and localized video distributions in your development pipeline? Do you write command-line scripts or use browser utilities?

Let let me know in the comments section below! Happy coding! 🚀

String Allocation Pitfalls: How to Convert Java Char to String Efficiently

Vo Viet Hoang — Fri, 04 Sep 2026 14:17:55 +0000

Hey DEV community! 👋

Converting a single primitive char to a String object in Java is a task we encounter almost daily. Whether we are parsing character streams, building text strings dynamically, or logging individual symbols, we often need to transform these types.

However, behind this simple operation lies a significant difference in memory footprints. When executed millions of times inside intense loops or heavy execution flows, selecting the wrong conversion method can lead to excessive garbage collector pressure due to temporary object allocations.

In this post, we will do a deep-dive into how the JVM handles these types in memory, examine how modern compilers optimize concatenation under the hood, and review standard best practices for efficient transformations.

Memory Overhead: Stack vs. Heap Allocation

To understand why conversion efficiency matters, we must analyze how these data types are structured in memory.

1. Primitive Char Allocation

A primitive char in Java is a 16-bit Unicode value stored directly on the stack:

16 bits = 2 bytes

It is extremely lightweight, requires no object references, and has zero garbage collection overhead.

2. String Object Overhead

A String is an immutable object whose header and data reside on the heap. On a standard 64-bit JVM with Compressed OOPs (Ordinary Object Pointers), a String object (excluding the actual backing character array) requires:

12 bytes (header) + 4 bytes (hash field) + 4 bytes (array reference) + 4 bytes (alignment padding) = 24 bytes

Plus, the backing character array itself requires an additional array object header (16 bytes) and the actual character data (2 bytes). Thus, converting a single char to a String allocates approximately 42 bytes of heap memory to store a value that originally fit in just 2 bytes of stack memory.

Compiler Analysis of Conversion Methods

Java provides three common ways to perform this conversion. Let us examine how the compiler and runtime handle each of them.

1. `String.valueOf(char)`

This is the standard static utility provided by the String class.

Code:

char ch = 'A';
String str = String.valueOf(ch);

Under the Hood: In modern JDKs, this method delegates to a package-private constructor, which copies the character into a single-element backing array. It is highly direct and avoids redundant wrappers.

2. `Character.toString(char)`

This method calls the static factory of the Character wrapper class.

Code:

char ch = 'B';
String str = Character.toString(ch);

Under the Hood: In modern compiler implementations, this method simply redirects to String.valueOf(char). It offers excellent readability as it explicitly defines your intent.

3. String Concatenation (`"" + char`)

This method relies on empty string concatenation as syntax shortcut.

Code:

char ch = 'C';
String str = "" + ch;

Under the Hood: The compilation of this statement depends heavily on your target Java version:
- Java 8 and earlier: The compiler translates this into a standard StringBuilder chain: new StringBuilder().append("").append(ch).toString(). This creates multiple temporary object allocations on each call, which is highly inefficient inside loops.
- Java 9 and later: The compiler utilizes invokedynamic instructions delegating to StringConcatFactory.makeConcatWithTemplate(). While this is much more efficient than manual StringBuilder instantiation, it still incurs lookup and bootstrapping overhead compared to direct static utilities.

Best Practices for High-Performance Workloads

Avoid Concatenation in Loops: Never use "" + ch inside loops or repetitive workflows. Prefer String.valueOf(ch) or Character.toString(ch).
Leverage Pre-allocated Builders: If you are assembling multiple characters sequentially, do not perform individual conversions. Instead, instantiate a single StringBuilder and append the characters directly before extracting the final string:

   StringBuilder sb = new StringBuilder();
   for (char ch : charArray) {
       sb.append(ch); // Appends the primitive directly, minimizing heap allocations
   }
   String result = sb.toString();

Secure, Browser-Side Code Generation

To assist developers in quickly generating boilerplate templates and evaluating simulated results, I built a lightweight, strictly browser-based Java Char to String Converter.

The conversion logic and code previews are generated entirely inside your local browser memory. No data is sent over the network, ensuring complete privacy for your code parameters.

👉 Try the Live Tool: Java Char to String Converter - Vo Viet Hoang

Let's Connect!

What is your standard approach for primitive-to-object conversions in your Java applications? Do you write explicit static method calls or rely on concatenation shortcuts for casual logging?

Let me know in the comments section below! Happy coding! 🚀

Building a Client-Side Number to Words Converter: A Lesson in Structural Parsing

Vo Viet Hoang — Fri, 04 Sep 2026 08:15:07 +0000

Hey DEV community! 👋

In software engineering, text processing, and administrative workflows, we often need to transform raw numerical data into grammatically correct English words. This task is common when auto-generating invoices, creating formalized transactional records, or formatting ledger summaries.

While converting small numbers is straightforward, parsing extremely large values and handling decimals requires a clean, recursive segmentation approach. Moreover, doing this on the client side ensures that sensitive logistical and transactional figures never leave the user's browser.

In this post, we will walk through the algorithmic logic of scale division and look at a clean, vanilla JavaScript implementation to handle this transformation strictly locally.

The Algorithmic Structure of Numerical Scales

Converting numbers into words requires dividing the standard base-10 numerical sequence into manageable chunks. In English, numbering scales follow a periodic three-digit pattern (Ones, Tens, Hundreds), which is repeated across scale suffixes (Thousand, Million, Billion, etc.).

Our algorithm implements a sliding scale division. For any given input, we process the value in modulo-1000 chunks:

Chunk = Value (mod 1000)

We then update the remaining value by moving to the next scale index:

Next Value = ⌊ \frac{Value}{1000} ⌋

This approach lets us isolate each three-digit segment, convert it to words using simple array mappings, and append the correct scale designation (like thousand or million) before moving to the next block.

Client-Side JavaScript Implementation

Below is the structured, modular JavaScript function that handles the conversion. It is designed to process the integer portion through modular division, while supporting optional currency formatting or decimal point representations:

/**
 * Converts a positive integer into written English words.
 * @param {number} num - The positive integer to convert
 * @returns {string} The written representation
 */
function toEnglishWords(num) {
    if (num === 0) return 'zero';

    const ones = ['', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen'];
    const tens = ['', '', 'twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety'];
    const scales = ['', 'thousand', 'million', 'billion', 'trillion'];

    let words = [];
    let scaleIdx = 0;

    while (num > 0) {
        let chunk = num % 1000;
        if (chunk > 0) {
            let chunkWords = [];
            let hundreds = Math.floor(chunk / 100);
            let remainder = chunk % 100;

            if (hundreds > 0) {
                chunkWords.push(ones[hundreds] + ' hundred');
            }

            if (remainder > 0) {
                if (remainder < 20) {
                    chunkWords.push(ones[remainder]);
                } else {
                    let tenDigit = Math.floor(remainder / 10);
                    let oneDigit = remainder % 10;
                    chunkWords.push(tens[tenDigit] + (oneDigit > 0 ? '-' + ones[oneDigit] : ''));
                }
            }

            let chunkStr = chunkWords.join(' ');
            if (scales[scaleIdx]) {
                chunkStr += ' ' + scales[scaleIdx];
            }
            words.unshift(chunkStr);
        }
        num = Math.floor(num / 1000);
        scaleIdx++;
    }

    return words.join(' ');
}

Key Technical Aspects:

Sub-20 Array Mapping: Numbers from 1 to 19 have unique English designations, so they are mapped directly to a flat array.
Hyphenation Rule: Numbers from 21 to 99 are joined with a hyphen (e.g., twenty-five) to follow standard English writing conventions.
Memory Optimization: By managing parsing entirely within local variables, the utility handles large scales smoothly without page latency.

Ensuring User Privacy and Safety

Many online web calculators send your form inputs back to their servers. When dealing with raw invoicing figures or database records, this is an unnecessary security risk.

By executing the string formatting entirely in local browser memory:

No Database Logging: Your values are processed temporarily and discarded when the fields are reset.
Lightweight Performance: Standard JS array operations require minimal resources, keeping the page loading footprint tiny.

Designing a Clean Web Utility

The converter layout organizes user input and output fields using simple, responsive elements:

Interactive Inputs: A text area that automatically ignores non-numeric characters to ensure clean data streams.
Dynamic Format Selector: An optional configuration to format the output with standard currency subunits (like US Dollars and Cents).
Instant Output Card: Displays the parsed string in real time with proper capitalization.

If you are looking for a reliable, browser-based tool to convert numerical records into formal text strings, feel free to try the live utility:

👉 Live Link: Online Number to Words Converter

Let's Connect!

What is your preferred approach for formatting technical strings and logistical logs in your development workflows? Do you rely on local command-line tools or keep a directory of secure browser utilities?

Let's discuss in the comments below! Happy coding! 🚀

Building a Client-Side Byte to String Decoder with Unicode Support

Vo Viet Hoang — Sat, 29 Aug 2026 06:26:59 +0000

Hey DEV community! 👋

When debugging network streams, parsing custom file formats, or inspecting database buffers, we often extract data as raw arrays of numbers rather than human-readable text. This data typically presents itself as raw byte sequences formatted in either decimal or hexadecimal notation.

While there are online decoders available, pasting raw byte sequences into third-party sites that process data on their backend databases introduces an unnecessary data privacy risk.

To solve this, I designed a lightweight, entirely browser-based Byte to String Converter that decodes raw byte sequences locally using standard JavaScript APIs.

In this post, we will look at how bytes map to character encodings and implement a client-side JavaScript utility to decode them safely.

The Structure of a Byte

In modern computing, a byte is the basic unit of digital information, consisting of an 8-bit sequence:

1 byte = 8 bits

Because each bit represents a binary state (0 or 1), a single byte can represent:

2^{8} = 256 states

This translates to numeric values spanning from:

Decimal (Base 10): Range of $[0, 255]$
Hexadecimal (Base 16): Range of $[00, FF]$

When we render characters on a screen, we rely on character encoding tables (such as ASCII or UTF-8) to map these numerical byte values back to their original symbolic representations.

Navigating Encodings: ASCII vs. UTF-8

The reconstruction process depends entirely on the encoding format used:

ASCII: A basic 7-bit standard where each character maps to exactly one byte. It covers basic English letters, numbers, and core control characters. For example, the decimal value 72 maps to the uppercase letter 'H'.
UTF-8: A variable-length encoding format that utilizes between 1 and 4 bytes per character. This structure allows UTF-8 to represent emojis, mathematical notations, and diverse language scripts. Our browser utility parses byte sequences using UTF-8 to maintain compatibility with modern web standards.

JavaScript Implementation

To build a secure, browser-based decoder, we can utilize the native TextDecoder API alongside Uint8Array.

Below is the clean, self-contained JavaScript utility that splits, validates, and decodes raw inputs in both decimal and hexadecimal formats:

/**
 * Decodes raw byte sequences into a UTF-8 text string.
 * @param {string} byteInput - The raw string of bytes (space/comma separated)
 * @param {string} format - 'decimal' or 'hex'
 * @returns {string|null} The decoded string, or null if validation fails
 */
function decodeBytesToString(byteInput, format = 'decimal') {
    if (!byteInput) return '';

    try {
        // Split input by whitespaces or commas and filter empty items
        const parts = byteInput.trim().split(/[\s,]+/).filter(p => p !== '');
        const byteValues = [];

        for (const part of parts) {
            let byteValue;

            if (format === 'decimal') {
                byteValue = parseInt(part, 10);
                if (isNaN(byteValue) || byteValue < 0 || byteValue > 255) {
                    throw new Error(`Invalid decimal value: ${part} (must be 0-255)`);
                }
            } else {
                byteValue = parseInt(part, 16);
                if (isNaN(byteValue) || byteValue < 0 || byteValue > 255 || !/^[0-9a-fA-F]{1,2}$/.test(part)) {
                    throw new Error(`Invalid hexadecimal value: ${part} (must be 00-FF)`);
                }
            }
            byteValues.push(byteValue);
        }

        // Consolidate the parsed integers into a fast-access Uint8Array
        const uint8Array = new Uint8Array(byteValues);

        // Decode the byte array back into standard UTF-8 text
        return new TextDecoder('utf-8').decode(uint8Array);

    } catch (error) {
        console.error("Decoding error:", error.message);
        return null;
    }
}

Why this is a reliable design:

Strict Browser Execution: The TextDecoder API processes the values in local browser memory. No data packages are transmitted across external networks.
Input Validation: The code verifies that every parsed integer falls within the valid range of 0 to 255 before loading it into the array, avoiding potential runtime exceptions.

Designing a Minimalist Interface

The utility is organized with a clean, responsive layout designed for quick operation:

Dual Display areas: An input textarea for raw bytes and a read-only textbox for decoded text, allowing users to paste and view results instantly.
Format Selector Toggle: Clean radio buttons to switch between Decimal and Hexadecimal modes.
Instant Copy Integration: A convenient button to copy the reconstructed string to the local clipboard.

If you are looking for a secure, browser-based tool to inspect raw byte arrays without risking data exposure, feel free to try the live tool:

👉 Live Link: Convert Byte to String Online

Let's Connect!

What is your preferred method for inspecting raw byte streams and network packages in your local workflow? Do you write custom python parsing scripts, use terminal utility helpers, or rely on browser-based tools?

Let me know in the comments section below! Happy coding! 🚀

Building a Client-Side Binary to Decimal Converter with Interactive Mathematical Breakdown

Vo Viet Hoang — Thu, 27 Aug 2026 02:07:33 +0000

Hey DEV community! 👋

In computer science, low-level networking, and firmware development, converting between binary (base-2) and decimal (base-10) numerical bases is a frequent task. Whether you are inspecting subnet masks, analyzing hardware register flags, or debugging bitwise operations, understanding the translation steps is highly useful.

While there are many base-conversion utilities online, many of them rely on server-side processing or page refreshes. When you are auditing proprietary code strings or network configurations, you want utility tools that execute strictly on your local device.

To address this, I used AI-guided development to build a responsive, entirely client-side Binary to Decimal Converter that displays an interactive, step-by-step mathematical derivation for every calculation.

In this post, we will walk through the underlying base-conversion mathematics and look at a clean, vanilla JavaScript implementation that you can easily integrate into your own toolbox.

The Mathematics of Numeral Conversion

Before diving into the code, let's look at the basic math formulas that govern bidirectional conversions between base-2 and base-10.

1. Binary to Decimal (Base-2 to Base-10)

Binary is a positional numbering scheme where each digit (bit) corresponds to a power of 2, starting from index 0 on the far right.

The mathematical formula to compute the decimal value is:

Decimal = (d_{n} \times 2^{n}) + (d_{n - 1} \times 2^{n - 1}) + \dots + (d_{1} \times 2^{1}) + (d_{0} \times 2^{0})

Where $d$ represents the bit value (0 or 1) and $n$ is the index position (counted from right to left, starting at 0).

For example, to convert binary 10110 to decimal:

$(1 \times 2^{4}) = 16$
$(0 \times 2^{3}) = 0$
$(1 \times 2^{2}) = 4$
$(1 \times 2^{1}) = 2$
$(0 \times 2^{0}) = 0$
Sum: $16 + 0 + 4 + 2 + 0 = 22$

2. Decimal to Binary (Base-10 to Base-2)

To perform the reverse conversion, we use successive division by 2 and track the remainders:

Divide the decimal integer by 2.
Record the remainder (0 or 1).
Use the integer quotient for the next division step.
Repeat this sequence until the quotient is 0.
Reading the remainders in reverse order (bottom to top) yields the final binary representation.

Standard JavaScript Implementation

Below is the clean, modular JavaScript logic that performs both conversion directions. It also collects the arithmetic steps dynamically so they can be displayed to the user:

/**
 * Converts a binary string to a decimal number with detailed steps.
 * @param {string} binaryStr - The binary digits (0 and 1 only)
 * @returns {object|null} Object containing decimal value and calculation steps
 */
function binaryToDecimal(binaryStr) {
    // Validate that the input contains only 0s and 1s
    if (!/^[01]+$/.test(binaryStr)) return null;

    let sum = 0;
    const steps = [];

    for (let i = 0; i < binaryStr.length; i++) {
        // Read bits from right to left
        const bit = parseInt(binaryStr[binaryStr.length - 1 - i], 10);
        const weight = Math.pow(2, i);
        const term = bit * weight;
        sum += term;

        steps.push(`(${bit} × 2^${i}) = ${bit} × ${weight} = ${term}`);
    }

    return {
        decimalValue: sum,
        steps: steps // Array of calculations from right to left
    };
}

/**
 * Converts a positive decimal integer to a binary string with detailed steps.
 * @param {number|string} decimalInput - The positive decimal integer
 * @returns {object|null} Object containing binary string and division steps
 */
function decimalToBinary(decimalInput) {
    let num = parseInt(decimalInput, 10);
    if (isNaN(num) || num < 0) return null;

    let tempNum = num;
    const steps = [];
    let binaryResult = '';

    if (tempNum === 0) {
        binaryResult = '0';
        steps.push('0 ÷ 2 = 0 remainder 0');
    } else {
        while (tempNum > 0) {
            const remainder = tempNum % 2;
            const quotient = Math.floor(tempNum / 2);
            steps.push(`${tempNum} ÷ 2 = ${quotient} remainder ${remainder}`);
            tempNum = quotient;
        }
        binaryResult = num.toString(2);
    }

    return {
        binaryValue: binaryResult,
        // Reverse division steps to show calculation from beginning to end
        steps: steps.reverse()
    };
}

Ensuring Utility Stability & Accuracy

When handling mathematical conversions in client-side scripts, we must manage standard computing constraints:

Handling Floating-Point Limits: Web execution engines utilize double-precision floating-point numbers conforming to standard specifications. Safe integer operations are generally reliable within the range of $2^{53} - 1$ .
Safe Input Thresholds: To prevent potential performance lag or display rendering inconsistencies in the browser, the interface is designed to support input lengths up to 31 binary bits. This threshold is suitable for standard 32-bit integer operations and avoids precision errors.
Pure Client-Side Execution: The calculations and conversion operations are handled strictly on your local device. No data packages are sent across external networks, ensuring a private environment for your configurations or codebases.

Designing a Modern, Non-Bloated Interface

The layout of the utility focuses on simple, responsive alignment using standard design elements:

Dual Text Areas: Independent blocks for binary input and decimal output, making it straightforward to paste variables and read results instantly.
Instant Calculation Feedback: The conversion routine runs dynamically as you input data, updating both the output field and the mathematical breakdown panel immediately.
Dynamic Step-by-Step Box: Below the input fields, a dedicated display panel presents the arithmetic sequence, mapping active powers of 2 for binary or dividing quotients for decimal.

If you are looking for a rapid, secure way to transform bases with clear mathematical explanations, feel free to try the live tool:

👉 Live Link: Binary to Decimal Converter

Let's Connect!

What is your preferred method for numeral base conversions in your daily development setup? Do you write quick bash aliases, use native programming language shells, or rely on browser-based utility tools?

Let me know in the comments section below! Happy coding! 🚀

Building a Client-Side N-gram Utility for Text Structure and Phrase Audit

Vo Viet Hoang — Wed, 26 Aug 2026 06:47:25 +0000

Hey DEV community! 👋

When writing technical documentation, user guides, or long-form informational articles, maintaining a clear and engaging reading style is highly important. However, as writers, we often fall into repetitive phrasing habits without realizing it.

Traditional word counters only track isolated, single words. To evaluate multi-word phrases and understand the flow of our writing, we need a different approach. This is where an N-gram analysis becomes highly useful.

To provide a safe and private solution for content editors, I built a lightweight, entirely client-side N-gram Analyzer.

In this post, we will explore the technical implementation of this utility, how to handle text segmentation in JavaScript, and why local browser processing is a reliable choice for data privacy.

What is an N-gram?

In computational linguistics and text processing, an N-gram is a contiguous sequence of $n$ items (usually words) from a given sample of text.

A Unigram represents single words ($n=1$).
A Bigram represents two-word phrases ($n=2$).
A Trigram represents three-word phrases ($n=3$).
A 4-gram represents four-word phrases ($n=4$).

Analyzing these combinations helps developers and content creators identify repetitive phrases, evaluate vocabulary diversity, and check if the thematic distribution of a document aligns with its target focus.

The Client-Side Approach: Privacy and Data Isolation

Many online text tools process user inputs on backend servers. This setup introduces a significant privacy risk if you are analyzing sensitive internal documentation, unpublished drafts, or proprietary code comments.

By executing the lexical parsing entirely within the user's browser, we keep the processing local. The text never travels across the network, and there are no external database logs. The local device handles the entire operation.

Implementing the N-gram Extraction in JavaScript

Let's look at the core logic. To build an N-gram extractor, the utility must perform three key tasks:

Clean the Input: Remove standard punctuation marks to ensure consistent word matching.
Segment into Words: Split the text into individual words while supporting standard character sets.
Build the Map: Use a sliding window to slice the word array into sequences of size $N$ and count their occurrences.

Here is the clean JavaScript implementation:

/**
 * Extracts N-grams from a raw text string.
 * @param {string} text - The input prose to analyze
 * @param {number} n - The length of the phrase (1 for Unigram, 2 for Bigram, etc.)
 * @param {number} minOccurrence - Filter out phrases appearing less than this threshold
 * @returns {Array} Sorted array of [phrase, count] pairs
 */
function extractNgrams(text, n, minOccurrence = 2) {
    if (!text) return [];

    // Clean text: remove standard punctuation and split into lowercase words
    // The regular expression supports accented characters and common diacritics
    const words = text.toLowerCase()
        .replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "")
        .match(/\b[\w\u00C0-\u024F\u1E00-\u1EFF]+\b/g) || [];

    const totalWords = words.length;
    if (totalWords < n) return [];

    const ngramsMap = {};

    // Sliding window algorithm
    for (let i = 0; i <= totalWords - n; i++) {
        const gram = words.slice(i, i + n).join(" ");
        ngramsMap[gram] = (ngramsMap[gram] || 0) + 1;
    }

    // Filter by minimum occurrence and sort by frequency in descending order
    return Object.entries(ngramsMap)
        .filter(([_, count]) => count >= minOccurrence)
        .sort((a, b) => b[1] - a[1]);
}

Code Explanation:

Text Normalization: We convert the text to lowercase so that capitalized words at the beginning of sentences match their lowercase counterparts in the body text.
Unicode Compatibility: The character range \u00C0-\u1EFF in the regular expression ensures that accented characters in various languages are processed correctly, avoiding broken words.
The Sliding Window: The loop moves forward one word at a time. It slices a segment of length n, joins the words with a single space, and increments the frequency counter in our map object.

Designing the User Experience

To make the utility practical and accessible, the frontend layout is built with standard, responsive grid components:

Flexible Text Area: A roomy input box where users can paste their text blocks.
Adjustable Parameters: Dropdown selectors to change the $N$ parameter (from Unigram to 4-gram) and a numeric input to set the minimum occurrence threshold.
Structured Results Table: A dynamic display showing the rank of each phrase, the raw text sequence, the exact frequency count, and the percentage representation relative to the entire document.

This design enables content editors to quickly identify if specific phrases appear too frequently, allowing them to vary their vocabulary before publishing.

Try the Live Utility

I have integrated this private text analyzer directly into my site as part of a collection of utility scripts. If you need a rapid, secure way to audit your writing patterns or inspect document structures without any backend tracking, feel free to use it:

👉 Live Link: Online N-gram Analyzer

Let's Connect!

How do you approach text analysis and readability reviews in your development workflow? Do you write local script setups, or do you rely on text-processing utilities in your terminal?

Feel free to share your thoughts and suggestions in the comments section below. Let's keep learning together! 🚀

How I "Vibe-Coded" a Privacy-First, Client-Side Base64 Tool (Deep-Dive into Unicode Handling in JS)

Vo Viet Hoang — Wed, 26 Aug 2026 06:32:33 +0000

Hey DEV community! 👋

As developers, we handle Base64 encoding and decoding almost daily—whether we're debugging API payloads, formatting authorization headers, or embedding small graphic assets directly into stylesheets.

However, many online translation utilities process your inputs on their backend servers. If you are dealing with sensitive configuration parameters, internal logs, or keys, pasting that data into a third-party web tool is a clear data privacy risk.

To solve this, I decided to "vibe-code" a lightweight, strictly browser-based, privacy-oriented Base64 Encoder & Decoder.

In this post, we will look at how this utility was built using AI assistance and vanilla JavaScript, along with the core logic to handle common encoding pitfalls.

What is "Vibe Coding"?

For those unfamiliar with the term, vibe coding is the practice of leveraging modern generative AI models to handle the bulk of the standard layout and event listeners, while you focus on the core logic, user experience, and privacy requirements.

Instead of writing every CSS class and event listener manually, I guided an AI assistant to generate a clean, responsive layout using a standard grid framework, while ensuring that the core translation logic resides strictly in the user's browser.

The Pitfall of Traditional JS Base64 (and How to Fix It)

If you have ever used native JavaScript btoa() and atob() functions, you might know they struggle with Unicode/UTF-8 characters (like emojis or non-Latin scripts).

Running this in your console will throw an error:

btoa("Xin chào! 🚀"); // Throws "Uncaught DOMException"

To resolve this during the development process, the utility implements modern TextEncoder and TextDecoder APIs. This approach converts strings into binary byte arrays before encoding them, avoiding exceptions.

The Client-Side Implementation

Here is the clean JavaScript snippet used for bidirectional encoding and decoding:

function processBase64(action, inputValue) {
    try {
        if (action === 'encode') {
            if (!inputValue) return '';
            // Convert plain text string into UTF-8 bytes
            const utf8Bytes = new TextEncoder().encode(inputValue);

            // Convert byte array into a binary string representation
            const base64String = btoa(String.fromCharCode.apply(null, utf8Bytes));
            return base64String;
        } else {
            if (!inputValue) return '';
            // Decode Base64 string back into a binary string
            const binaryString = atob(inputValue);

            // Map binary string back to an array of bytes
            const bytes = new Uint8Array(binaryString.length);
            for (let i = 0; i < binaryString.length; i++) {
                bytes[i] = binaryString.charCodeAt(i);
            }

            // Decode bytes back into a standard Unicode string
            const decodedString = new TextDecoder().decode(bytes);
            return decodedString;
        }
    } catch (e) {
        console.error("Conversion error. Please check your input format.");
        return null;
    }
}

Layout & User Experience

The interface is structured to make conversion quick and straightforward:

Local Processing: The utility runs strictly on your local device. No data is sent to a server.
Dual-Column Design: A split layout separating "Plain Text" on one side and "Base64 String" on the other.
One-Click Copy: Convenient buttons to copy the output text directly to your clipboard.

If you need a rapid, private way to encode or decode text strings without server tracking, feel free to use this utility:

👉 Live Link: Online Base64 Decoder and Encoder

Let's Connect!

How do you handle day-to-day text formatting and decoding in your workflow? Do you write quick local terminal aliases, or do you prefer to use lightweight browser-based utilities?

Let me know in the comments below! Happy coding! 🚀

How I Vibe-Coded a Fast Client-Side Keyword Density Analyzer for SEO Content

Vo Viet Hoang — Fri, 21 Aug 2026 02:18:43 +0000

Hey DEV community! 👋

When optimizing content for SEO, analyzing keyword density is a daily routine. However, sending long drafts to third-party servers raises privacy concerns, and many existing tools are overly clunky.

To solve this, I vibe-coded a lightweight Keyword Density Analyzer that runs 100% locally in your browser.

🛠️ Key Technical Highlights:

100% Client-Side Processing: Tokenization and term frequency calculations happen entirely in the browser using pure JavaScript. Your draft content never leaves your machine.
Instant Text Analysis: Provides real-time breakdown of 1-word, 2-word, and 3-word phrase frequencies to ensure natural content flow without keyword stuffing.
Vibe Coding Workflow: Used LLM prompts to quickly implement clean text-sanitization regex, word-stemming logic, and dynamic array sorting for frequency output.

💡 Vibe Coding Insight:

Handling edge cases in text parsing (like filtering stop words, punctuation, and Unicode characters) can get tedious. Prompting the AI to isolate regex sanitization into pure helper functions saved a ton of boilerplate time while keeping client-side performance lightning fast.

🔗 Check it out & Feedback:

I'd love to hear your thoughts on the UI or any additional NLP features you'd like to see!

👉 Live Demo: Keyword Density Analyzer

What tools or scripts do you use to analyze text performance in your workflow?

How I Vibe-Coded a 100% Client-Side JSON-LD Schema Generator for Technical SEO

Vo Viet Hoang — Tue, 18 Aug 2026 03:53:20 +0000

Hey DEV community! 👋

As an SEO specialist, I generate JSON-LD structured data daily. Most existing online tools are either clunky, full of ads, or send data back to servers unnecessarily.

To solve this, I vibe-coded a lightweight JSON-LD Schema Generator that runs 100% in the browser.

🛠️ Key Technical Highlights:

Zero Backend Storage: 100% client-side JavaScript processing. User inputs never touch a server, ensuring complete data privacy and zero latency.
Instant Validation & Formatting: Generates clean, ready-to-copy JSON-LD markup for Articles, Local Businesses, and WebSites on the fly.
Vibe Coding Workflow: Used LLM prompting to handle complex Schema object structures, nested properties, and clean dynamic UI updates.

💡 Vibe Coding Lesson Learned:

Structuring valid JSON-LD schemas requires strict syntax adherence to Google’s guidelines. Prompting the AI to strictly manage state array inputs for nested attributes (like author, publisher, or address) saved hours of manual boilerplate coding.

🔗 Try it out & Share Feedback:

I’d love to get feedback on UI performance, edge-case bugs, or Schema types you'd like to see added!

👉 Live Demo: JSON-LD Schema Generator

What Schema types or SEO micro-tools do you rely on most in your development workflow?

How I Vibe-Coded a Fast Client-Side Word Counter Tool using AI

Vo Viet Hoang — Sat, 15 Aug 2026 07:34:15 +0000

Hey DEV community! 👋

I wanted to share a quick project I built using AI-assisted development (Vibe Coding): a lightweight, real-time Online Word Counter Tool.

As an SEO specialist, I often need quick text analysis (word count, reading time, character limits). Instead of using bloated third-party sites, I decided to build one using pure JS/PHP with AI guidance.

💡 Key Features Built:

Real-time word, character, sentence, and paragraph counting.
Estimated reading & speaking time calculations.
Clean, fast, and 100% client-side text processing.

🛠️ What I Learned (Vibe Coding Perspective):

Regex handling: Fine-tuning word breaking algorithms for edge cases (hyphenated words, special symbols, multi-language characters).
DOM performance: Ensuring smooth typing without lag when processing large documents (>10,000 words).

🔗 Check it out & Feedback:

I’d love for you to try it out and let me know if you run into any bugs or have feature ideas!

👉 Live Demo: Online Word Counter Tool

Feedback on UI/UX or code optimization is warmly welcomed! What micro-tools are you guys building with AI lately?

Hello DEV! How I'm Blending Technical SEO with Vibe Coding to Build Tools

Vo Viet Hoang — Fri, 14 Aug 2026 03:18:20 +0000

Hey DEV Community! 👋

I'm Hoang, a Technical SEO Specialist and Web Builder.

I'm fascinated by the intersection of search engines, web technology, and AI. While I don't come from a formal Software Engineering background, I’ve been heavily leveraging AI-assisted development (Vibe Coding) to build custom web applications, utility tools, and micro-platforms.

🛠️ What I'm currently working on:

SEO & Entity Optimization: Deep diving into Schema markup, web infrastructure, and Knowledge Graphs.
Building Micro-Tools: Creating custom PHP scripts, automated quiz systems, and web utilities powered by modern AI LLMs.
Server Management: Migrating and optimizing web apps directly on Nginx setups for maximum performance.

💡 Why I'm here:

I joined DEV.to to share my journey as a non-traditional developer using AI tools to bring ideas to life fast, learn from experienced engineers, and discuss technical SEO best practices.

Looking forward to connecting, sharing ideas, and learning with everyone here! Feel free to say hi or drop a line below! 🚀

DEV Community: Vo Viet Hoang

Bridging Print and Screen: Building a Client-Side CMYK to RGB Color Converter

Additive vs. Subtractive Color Spaces

The Mathematics of Color Conversion

1. CMYK to RGB Formula

2. RGB to CMYK Formula

JavaScript Implementation

Client-Side Security & Data Privacy

Let's Connect!

Parsing Video Captions: Building a Secure Client-Side ASS to SRT Converter

Format Specifications: ASS vs. SRT

1. ASS (Advanced SubStation Alpha)

2. SRT (SubRip)

Under the Hood: The Interpolation and Sanitation Pipeline

1. Timestamp Conversion

2. Tag Sanitation

JavaScript Parser Implementation

Client-Side Security and Privacy

Try the Live Utility

Let's Connect!

String Allocation Pitfalls: How to Convert Java Char to String Efficiently

Memory Overhead: Stack vs. Heap Allocation

1. Primitive Char Allocation

2. String Object Overhead

Compiler Analysis of Conversion Methods

1. String.valueOf(char)

2. Character.toString(char)

3. String Concatenation ("" + char)

Best Practices for High-Performance Workloads

Secure, Browser-Side Code Generation

Let's Connect!

Building a Client-Side Number to Words Converter: A Lesson in Structural Parsing

The Algorithmic Structure of Numerical Scales

Client-Side JavaScript Implementation

Key Technical Aspects:

Ensuring User Privacy and Safety

Designing a Clean Web Utility

Let's Connect!

Building a Client-Side Byte to String Decoder with Unicode Support

The Structure of a Byte

Navigating Encodings: ASCII vs. UTF-8

JavaScript Implementation

Why this is a reliable design:

Designing a Minimalist Interface

Let's Connect!

Building a Client-Side Binary to Decimal Converter with Interactive Mathematical Breakdown

The Mathematics of Numeral Conversion

1. Binary to Decimal (Base-2 to Base-10)

2. Decimal to Binary (Base-10 to Base-2)

Standard JavaScript Implementation

Ensuring Utility Stability & Accuracy

Designing a Modern, Non-Bloated Interface

Let's Connect!

Building a Client-Side N-gram Utility for Text Structure and Phrase Audit

What is an N-gram?

The Client-Side Approach: Privacy and Data Isolation

Implementing the N-gram Extraction in JavaScript

Code Explanation:

Designing the User Experience

Try the Live Utility

Let's Connect!

How I "Vibe-Coded" a Privacy-First, Client-Side Base64 Tool (Deep-Dive into Unicode Handling in JS)

What is "Vibe Coding"?

The Pitfall of Traditional JS Base64 (and How to Fix It)

The Client-Side Implementation

Layout & User Experience

Let's Connect!

How I Vibe-Coded a Fast Client-Side Keyword Density Analyzer for SEO Content

🛠️ Key Technical Highlights:

💡 Vibe Coding Insight:

🔗 Check it out & Feedback:

How I Vibe-Coded a 100% Client-Side JSON-LD Schema Generator for Technical SEO

🛠️ Key Technical Highlights:

💡 Vibe Coding Lesson Learned:

🔗 Try it out & Share Feedback:

How I Vibe-Coded a Fast Client-Side Word Counter Tool using AI

💡 Key Features Built:

🛠️ What I Learned (Vibe Coding Perspective):

🔗 Check it out & Feedback:

Hello DEV! How I'm Blending Technical SEO with Vibe Coding to Build Tools

1. `String.valueOf(char)`

2. `Character.toString(char)`

3. String Concatenation (`"" + char`)