DEV Community: kandz

Under the Hood: Building a 100% Client-Side CSV Deduplicator with Angular 18+ Signals

kandz — Mon, 10 Aug 2026 10:35:32 +0000

Tabular data cleaning is one of the most common prep steps in data engineering and business ops. However, pasting a CSV containing sensitive emails, customer IDs, or corporate financials into a third-party server poses massive security risks.

To solve this, we built a 100% client-side CSV Row Deduplicator on tools.kandz.me. By processing everything in the browser sandbox, your data never touches a server.

But parsing and deduplicating CSV format reliably in raw JavaScript is trickier than a simple string.split(','). Here is a deep dive into how it works under the hood.

1. The Core Architecture & Challenges

At first glance, splitting CSV lines seems trivial. But standard production CSVs present major parsing edge cases:

Quoted Values with Commas: A field like "Doe, John" shouldn't be split at the comma.
Header Preservation: The column names (first row) must remain at the top and never get removed as "duplicates," even if an identical row appears deep inside the dataset (e.g., if multiple CSV files were merged together).
Whitespace Variations: John Doe, john@example.com and John Doe,john@example.com (notice the space) should be evaluated as duplicate rows if white spaces are trimmed.

2. Breaking Down the Parser

To handle quoted cells containing commas, we implement a stateful parser loop instead of a basic .split(',').

function parseCSVLine(line: string): string[] {
  const result: string[] = [];
  let current = '';
  let inQuotes = false;

  for (let i = 0; i < line.length; i++) {
    const char = line[i];
    if (char === '"') {
      inQuotes = !inQuotes; // Toggle quotes state
    } else if (char === ',' && !inQuotes) {
      result.push(current);
      current = '';
    } else {
      current += char;
    }
  }
  result.push(current);
  return result;
}

3. Protecting the Header & Cleaning Merged Files

A major logical bug in naive deduplicators is how they handle the First Row is Header flag. If you shift the header row out of the array before processing, its key signature is never tracked. If an accidental duplicate of that header appears later in the body (very common when concatenating tables), it gets processed as a unique data row.

To fix this, we generate the key signature of the shifted header and add it to our seen tracking set before processing the body:

const seen = new Set<string>();

if (hasHeader && headersRow) {
  let headerKey = '';
  if (colIdx >= 0) {
    headerKey = isTrim ? headersRow[colIdx].trim() : headersRow[colIdx];
  } else {
    const cleanHeader = isTrim ? headersRow.map(c => c.trim()) : headersRow;
    headerKey = cleanHeader.join('|||');
  }
  seen.add(headerKey.toLowerCase());
}

This ensures any repeated headers inside the data rows are instantly stripped out, keeping only the true, anchored header at the top of the output.

4. Reactive State management with Angular Signals

We use Angular 18+ reactive Signals and computed properties to keep calculations fast and clean. When the user changes any parameter (such as toggling case-sensitivity or choosing to deduplicate by a specific column), the engine automatically recalculates the output without manual event listeners or dirty DOM rendering.

By using native input bindings ([value]="csvInput()" and custom target update events) we bypass standard latency, ensuring smooth performance even with large files.

5. Summary

By keeping everything client-side, we combine ultimate data privacy with rapid execution. If you need to clean up messy datasets, give the tool a run.

Try the live tool: tools.kandz.me/csv-deduplicator

Stop Uploading Proprietary Graphics to Cloud Image Resizers 🖼️🚀

kandz — Sat, 08 Aug 2026 10:15:26 +0000

When optimizing image sizes for web deployments, preparing blog screenshots, or cropping user avatars, pasting them into random online resizers is a common routine.

But there’s a major compliance and privacy catch.

If you are uploading product mockups, proprietary design assets, or sensitive screenshots to cloud-dependent resizers, you are leaking your private graphics and brand assets to third-party databases.

To prevent this data vulnerability, we built a 100% secure, browser-isolated HTML Canvas Image Resizer on tools.kandz.me.

👉 Try the Live Tool: https://tools.kandz.me/canvas-resizer

🧠 How It Works Under the Hood

This resizer processes your assets entirely on the client side. Here is the technical architecture that allows it to securely scale, crop, and convert image formats in local memory:

1. Zero-Upload Off-Screen Canvas Buffering

We bypass remote servers completely by allocating a virtual, off-screen HTML5 <canvas> element. When you drag and drop an image, the file is read as a local data URL and loaded into a native Image() element. Once the target dimensions are set, we draw the image directly onto the canvas:

const canvas = document.createElement('canvas');
canvas.width = targetWidth;
canvas.height = targetHeight;
const ctx = canvas.getContext('2d');

ctx.drawImage(rawImageElement, 0, 0, targetWidth, targetHeight);

2. Hardware-Accelerated Bicubic Resampling

To prevent pixelation, jagged lines, and blurring artifacts when reducing image dimensions, our engine utilizes the browser's hardware-accelerated, high-fidelity interpolation filters:

ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'high';

This forces the browser to apply advanced bicubic and bilinear resampling algorithms, computing a weighted average of adjacent pixel colors based on distance ratios to maintain crisp details and smooth gradients.

3. Format-Aware Binary Blobs

Exporting the resized image is handled by converting the off-screen canvas buffer directly into high-precision binary blobs using the native toBlob method:

canvas.toBlob((blob) => {
  const url = URL.createObjectURL(blob);
  link.href = url;
  link.click();
}, 'image/webp', 0.92);

This allows us to dynamically convert and compress images on the fly—exporting lossy JPEGs, lossless PNGs, or modern compressed WebPs with custom quality ratios, saving massive bandwidth on your servers.

🛠️ Give it a spin

Keep your private brand assets, interface mockups, and corporate screenshots secure on your own machine.

🔗 Link to Tool: https://tools.kandz.me/canvas-resizer

Why You Shouldn't Paste Production SQL Into Cloud Formaters 💾🚀

kandz — Thu, 06 Aug 2026 08:58:59 +0000

When optimizing slow-running database queries, pasting them into raw online formatters is a common routine.

But there’s a major compliance and security catch.

SQL queries are blueprints of your database architecture. They contain sensitive table definitions, index structures, column keys, and private schemas. Uploading these details to random cloud formatters is a massive security leak that exposes your backend topology.

To fix this risk, we built a 100% secure, browser-isolated SQL Formatter & Query Optimizer on tools.kandz.me.

👉 Try the Live Tool: https://tools.kandz.me/sql-formatter-optimizer

🧠 How It Works Under the Hood

This optimizer evaluates queries completely on the client side. Here is the technical architecture that allows it to securely beautify schemas and run query performance heuristics:

1. Regex Token-Based Beautifier

Instead of sending SQL blocks to remote parsers, our engine tokenizes queries line-by-line using a regex clause boundary. It matches major clauses (e.g., SELECT, FROM, WHERE, LEFT JOIN, ON, AND) and formats them on-the-fly:

const clauses = ['SELECT', 'FROM', 'WHERE', 'LEFT JOIN', 'ON', 'AND'];
clauses.forEach((clause) => {
  const regex = new RegExp(`\\b\${clause}\\b`, 'gi');
  clean = clean.replace(regex, `\n\${clause}`);
});

It then dynamically indents nested statements (like AND or ON operators) to create beautiful, highly readable visual layouts.

2. Sargability Heuristics & Index Alerts

The optimizer runs local heuristics to scan for index-bypassing database bottlenecks:

Uncapped SELECTs: Warns when LIMIT thresholds are missing, preventing massive datasets from crashing browser buffers.
Non-Sargable WHERE Functions: Detects functions applied to column filters (e.g. WHERE YEAR(created_at) = 2026) which prevent B-tree index usage. It suggests date range rewrites:

  WHERE created_at >= '2026-01-01' AND created_at <= '2026-12-31'

Leading Wildcard Scans: Flags leading wildcard queries (e.g. LIKE '%search%') which trigger slow, linear full-table scans ($O(N)$) and bypass standard index structures ($O(\log N)$).

3. Automatic CREATE INDEX Compilation

When the parser identifies joining keys (in JOIN ON) or filters (in WHERE clauses), it automatically filters out standard primary keys (like id) and compiles targeted index commands:

CREATE INDEX idx_user_id ON table_name(user_id);

This gives backend developers a copy-ready DDL script to instantly boost database query speeds.

🛠️ Give it a spin

Keep your private database schemas and log audits secure on your own machine.

🔗 Link to Tool: https://tools.kandz.me/sql-formatter-optimizer

Why You Shouldn't Paste Private Logs Into Cloud Regex Testers 🔍

kandz — Tue, 04 Aug 2026 10:09:52 +0000

When debugging a complex regular expression—whether you're parsing user emails, server transaction logs, or customer database records—having a visual tester is essential.

But there is a major security catch.

Most popular online regex tools stream your raw test data straight to remote backends for compilation. If you are testing patterns against real production logs, you are leaking sensitive user data and credentials to third-party databases.

To prevent this data vulnerability, we built a 100% secure, browser-isolated JS Regex Match Visualizer on tools.kandz.me.

👉 Try the Live Tool: https://tools.kandz.me/regex-visualizer

🧠 How It Works Under the Hood

This visualizer runs strictly within your browser's private memory sandbox. Here is the technical architecture that allows it to securely render and inspect matches on the fly:

1. Dynamic Local Compilation

We compile your regex inputs using standard browser JavaScript engines, bypassing external server API runs completely. The regex is instantiated with selected modifier flags:

let flags = '';
if (flagGlobal) flags += 'g';
if (flagIgnoreCase) flags += 'i';
if (flagMultiline) flags += 'm';

const regex = new RegExp(pattern, flags);

2. HTML-Escaped Highlight Tokenizer

Rendering visual highlights securely is critical. If we injected raw matches directly as HTML, it would trigger Cross-Site Scripting (XSS) errors.

To ensure complete safety, our parser first sanitizes the entire source string. It then calculates the exact offset coordinates of each match, wraps the matched indices in highlighted <span> blocks, and trusts the final computed string:

// Safely wraps matched coordinate slices
result += `<span class="bg-indigo-100 rounded cursor-pointer border-b-2" onclick="window.dispatchRegexMatchClick(${idx})">${escapeHtml(m.fullText)}</span>`;

3. Global Event Dispatching

We mapped dynamic click listeners onto individual highlighted DOM spans. Clicking any highlighted match in your browser triggers a global scoped callback that immediately inspects and displays that match's specific capture groups ($1, $2, etc.) in the active panel—making large data array audits incredibly fast.

🛠️ Keep Your Log Audits Secure

Protect your database dumps and user logs from external API tracking. Try the visualizer on your local machine:

🔗 Link to Tool: https://tools.kandz.me/regex-visualizer

Stop Writing Laravel Migrations by Hand. Convert Raw SQL Instantly! 🚀

kandz — Sun, 02 Aug 2026 18:06:08 +0000

If you are migrating a legacy application to Laravel, setting up local databases from existing production SQL dumps, or converting raw DDL to PHP schemas—you know the pain.

Translating raw CREATE TABLE statements into Laravel's fluent Blueprint migrations by hand is tedious, slow, and highly prone to syntax typos.

To solve this developer bottleneck, we built a 100% local, instant SQL Schema to Laravel Migration Converter on tools.kandz.me.

👉 Try the Live Tool: https://tools.kandz.me/sql-laravel

🧠 How It Works Under the Hood

This converter is built strictly on browser-first Web APIs. It parses database layouts and translates schemas on the fly without ever exposing your sensitive schema models to a backend database:

1. DDL Pattern-Matching Parser

Our core parsing pipeline reads the raw SQL string line-by-line using a regex DDL tokenizer.

Table Extraction: It identifies database table labels using the CREATE TABLE matching syntax:

  const tableMatch = rawSql.match(/CREATE\s+TABLE\s+`?([a-zA-Z0-9_]+)`?/i);

Type Mapping Dictionary: It loops through column declarations, strips backticks, and maps common SQL database types (and constraints) directly into Laravel’s corresponding schema methods:
- VARCHAR(255) NOT NULL UNIQUE ➔ $table->string('column', 255)->unique();
- BIGINT AUTO_INCREMENT PRIMARY KEY ➔ $table->id();
- TINYINT(1) or BOOLEAN ➔ $table->boolean('column');

2. Automatic Modifier Chaining

Standard database modifiers like DEFAULT values or nullability are captured by scanning line contexts. If NOT NULL is absent, the parser automatically appends the fluent nullable chain:

$table->string('bio')->nullable();

It also checks for typical timestamp fields and appends $table->timestamps(); automatically if missing, ensuring compliance with modern Laravel standards.

3. 100% Client-Side Privacy Sandbox

Database schemas and index names represent the blueprint of your system's architecture—uploading DDL files to external servers introduces huge security risks.

Our converter uses 100% local browser execution. The entire parsing loop and PHP class generation run exclusively inside your browser's private memory thread. Your schema definitions never leave your device.

🛠️ Give it a spin

Accelerate your migration workflows and stop translating database columns manually.

🔗 Link to Tool: https://tools.kandz.me/sql-laravel

Let me know your feedback in the comments, and if there are specific complex custom database constraints (like foreign key lookups) you would like me to add support for next!

Stop Uploading Proprietary Binaries to Cloud Hex Viewers

kandz — Fri, 31 Jul 2026 11:19:22 +0000

When you are debugging binary structures, analyzing network packets, or checking compiled firmware artifacts, a solid Hex Viewer is an essential tool.

But there’s a massive security catch.

Many popular online hex dumpers require you to upload your files to their remote servers. If your binaries contain proprietary code, credentials, embedded API keys, or private salts, you are leaking your secrets to the cloud.

To fix this risk, I wanted a secure, robust alternative that runs completely in a local memory sandbox.

Say hello to the Binary File Hex Viewer on tools.kandz.me.

👉 Use the Live Tool: https://tools.kandz.me/hex-viewer

🧠 How It Works Under the Hood

Unlike traditional cloud converters, this app processes everything client-side. Here is the core architecture that makes it work smoothly and securely in the browser:

1. Zero-Upload Sandbox with `FileReader`

We completely bypass remote servers by using the browser's native HTML5 FileReader API. When you load a binary file, we execute:

reader.readAsArrayBuffer(file);

This transfers the raw bytes directly into the client's local memory space as a static Uint8Array. No network packets containing your file ever leave your device.

2. Dynamic Endianness Decoding via `DataView`

Reconstructing multi-byte numbers (like Int32 or Float32) from contiguous bytes is notoriously tricky because different processor architectures store data differently (Little Endian vs. Big Endian).

To solve this, the byte inspector utilizes JavaScript's low-level DataView API. Because we point the view directly at our localized array buffer, we can perform instant endianness flips simply by toggling a boolean argument:

// Little Endian
const littleVal = dataView.getFloat32(offset, true);

// Big Endian
const bigVal = dataView.getFloat32(offset, false);

3. Protecting the DOM with Chunking

Trying to render a 1MB binary file as individual DOM tables will immediately freeze your browser's paint cycles.

To ensure a smooth 60fps experience, the layout operates on a pagination model driven by modern reactivity. Instead of rendering the full array, we calculate a dynamic slice based on a small chunk size (e.g., 512 bytes):

const pageStart = currentPage * pageSize;
const currentChunk = fileBuffer.slice(pageStart, pageStart + pageSize);

This keeps the rendered element tree incredibly small, ensuring instant load times and lightweight touch scrolling on mobile viewports.

🛠️ Give it a spin

Keep your files where they belong—on your own machine. Try the viewer for yourself and see how easy it is to analyze binary layouts:

🔗 https://tools.kandz.me/hex-viewer

Let me know your feedback in the comments, and what primitive types or endian formats you'd like decoded next!

Data Serialization: The Mechanics of List Delimiter Conversion and String Wrapping

kandz — Wed, 29 Jul 2026 09:30:22 +0000

In database administration, backend development, and systems auditing, one of the most common manual bottlenecks is preparing raw, unformatted datasets for software imports or SQL queries. Whether handling log exports, spreadsheet columns, or raw text blocks, developers must frequently restructure plain-text boundaries.

This process is governed by the principles of Data Serialization and Tokenization.

Let's explore the mechanics of delimiter parsing, the performance advantages of linear deduplication, and how to build a highly optimized, client-side list-reformatting engine.

1. The Anatomy of plain-text Delimiters

In computer science, a delimiter is a sequence of one or more characters used to specify the boundary between separate, independent regions in a plain-text stream. Standard delimiters include:

Newlines (\n or \r\n): Used primarily to separate database rows or spreadsheet records.
Commas (,): The universal separator for CSV files.
Semicolons (;): Common in European localized data exports.
Spaces (): Used to delimit command-line arguments or token streams.

The Wrapping Challenge (SQL Arrays)

If you copy a column of 100 usernames from a spreadsheet, they arrive separated by newlines:

user_1
user_2
user_3

To run a query against these users in SQL (e.g., using an IN clause), you cannot paste them as-is. You must convert them into a comma-separated list and wrap each string token in single quotes:

'user_1', 'user_2', 'user_3'

Applying these quote wrappers and re-delimiting thousands of items manually is highly tedious and prone to missing-character syntax errors.

2. Algorithmic Data Cleaning and Sanitization

An optimized delimiter converter must perform three sequential operations on a raw string:

Step 1: Tokenization (Splitting)

The raw string is split into an array of tokens based on the designated input delimiter. To handle multiple carriage return standards across Windows and Unix filesystems, newline splitting should normalize \r\n and \n:

const tokens = rawInput.split(/\r?\n/);

Step 2: Sanitization (Trimming & Deduplication)

Trimming: Stripping leading and trailing whitespace from each token prevents trailing-space bugs in downstream database indices.
Deduplication: In database auditing, ensuring unique keys is vital. We can filter out duplicates in linear time $O(N)$ using a JavaScript Set data structure:
```
const uniqueTokens = Array.from(new Set(tokens.map(t => t.trim()).filter(t => t.length > 0)));
```

Step 3: Wrapping & Re-assembling

Each unique, sanitized token is wrapped in the user's chosen quote style (single quotes, double quotes, or square brackets) and joined back together using the target output delimiter.

3. Implementing the Re-Formatter in TypeScript

Here is a clean, non-recursive TypeScript function that processes, sanitizes, wraps, and re-delimits any raw list dataset:

function reformatList(
  input: string,
  inputDelim: string,
  outputDelim: string,
  wrapStyle: 'none' | 'single' | 'double' | 'bracket',
  trim: boolean,
  deduplicate: boolean
): string {
  if (!input.trim()) return '';

  let tokens = input.split(inputDelim);

  if (trim) {
    tokens = tokens.map(t => t.trim());
  }

  tokens = tokens.filter(t => t.length > 0);

  if (deduplicate) {
    tokens = Array.from(new Set(tokens));
  }

  const wrapped = tokens.map(token => {
    if (wrapStyle === 'single') return `'${token}'`;
    if (wrapStyle === 'double') return `"${token}"`;
    if (wrapStyle === 'bracket') return `[${token}]`;
    return token;
  });

  const joinSeparator = outputDelim === '\n' ? '\n' : `${outputDelim} `;
  return wrapped.join(joinSeparator);
}

4. Absolute Client-Side Privacy for Database Exports

Database exports, server logs, and user lists regularly contain highly sensitive, proprietary information—including usernames, internal emails, server IP logs, or system keys. Uploading these raw lists to cloud-logged remote text formatters presents severe data privacy and compliance risks.

We enforce a strict 100% Client-Side Privacy Law across our tool suite. All string splits, token sanitizations, and quote-wrapping operations execute locally within your browser's private memory sandbox. No data ever traverses the network, keeping your database logs and corporate lists secure.

Format your datasets privately: List Delimiter Converter - Kandz.me

The Trigonometry of Oblique Spaces: Solving Triangles with the Law of Sines and Cosines in Code

kandz — Mon, 27 Jul 2026 10:25:03 +0000

In computer graphics, spatial mapping, navigation, and structural engineering, the triangle represents the fundamental geometric simplex. While solving right-angled triangles requires only basic Pythagorean theorems and standard trigonometric ratios (sine, cosine, tangent), solving oblique (non-right) triangles requires more advanced algebraic models.

To resolve these structures, we must implement the Law of Sines and the Law of Cosines in code.

Let's break down the mathematical formulations for solving oblique triangles, handle the complex "Ambiguous Case" of trigonometry, and write clean, constant-time algorithms to resolve any triangle's dimensions.

1. The Trigonometric Foundations of Oblique Solvers

A triangle consists of three sides ($a, b, c$) and three opposing angles ($A, B, C$).

          C
         / \
      b /   \ a
       /     \
      A-------B
          c

To solve a triangle means to calculate all unknown dimensions when given at least three known parameters (with at least one of those parameters being a side).

Methodology A: The Law of Cosines (SSS & SAS)

The Law of Cosines is a generalization of the Pythagorean theorem. It is used to resolve triangles when we are given three sides (SSS) or two sides and their enclosed angle (SAS).

The formula states:
$$c^2 = a^2 + b^2 - 2ab \cdot \cos(C)$$

To find an angle when given three sides (SSS), we can rewrite the equation as:
$$\cos(C) = \frac{a^2 + b^2 - c^2}{2ab}$$
$$C = \arccos\left(\frac{a^2 + b^2 - c^2}{2ab}\right)$$

In programming, we must convert degrees to radians before passing values to native trigonometric functions, and convert the returned radians back to degrees:
$$\text{Radians} = \text{Degrees} \times \frac{\pi}{180}$$

Methodology B: The Law of Sines (ASA & AAS)

The Law of Sines establishes a constant ratio between the length of a triangle's sides and the sine of their opposing angles:
$$\frac{a}{\sin(A)} = \frac{b}{\sin(B)} = \frac{c}{\sin(C)}$$

This is used to resolve triangles when we are given two angles and a side (ASA or AAS). If we know two angles, the third angle is easily found since the sum of internal angles in a Euclidean triangle is always 180°:
$$C = 180^{\circ} - A - B$$

Once all angles are known, we can calculate any missing side:
$$a = b \cdot \frac{\sin(A)}{\sin(B)}$$

Methodology C: The Ambiguous Case (SSA)

The most mathematically complex scenario is the Side-Side-Angle (SSA) configuration, where we are given two sides ($a, b$) and a non-enclosed angle ($A$).

Depending on the relationship between side $a$, side $b$, and the height $h = b \cdot \sin(A)$, the system can yield:

Zero Solutions: If $a < h$ (the side is too short to reach the base line).
One Solution: If $a \ge b$ or $a = h$.
Two Solutions (The Ambiguous Case): If $h < a < b$. In this scenario, two entirely different triangles can be formed with the same given parameters—one acute and one obtuse.

An oblique solver must calculate both possible configurations, alerting the user to this dual-coordinate state.

2. Implementing the Solver in TypeScript

Here is a clean TypeScript function that parses and solves a Side-Angle-Angle (AAS) triangle, converting degrees and utilizing the Law of Sines:

interface TriangleResult {
  a: number;
  b: number;
  c: number;
  A: number;
  B: number;
  C: number;
  area: number;
  perimeter: number;
}

function solveAAS(
  knownSideValue: number,
  opposingAngleDeg: number,
  secondAngleDeg: number
): TriangleResult {
  const degToRad = Math.PI / 180;
  const radToDeg = 180 / Math.PI;

  const A = opposingAngleDeg;
  const B = secondAngleDeg;
  const C = 180 - A - B;

  const a = knownSideValue;

  const sinA = Math.sin(A * degToRad);
  const sinB = Math.sin(B * degToRad);
  const sinC = Math.sin(C * degToRad);

  const b = a * (sinB / sinA);
  const c = a * (sinC / sinA);

  const perimeter = a + b + c;

  // Area calculated using Heron's formula
  const s = perimeter / 2;
  const area = Math.sqrt(s * (s - a) * (s - b) * (s - c));

  return {
    a: Number(a.toFixed(4)),
    b: Number(b.toFixed(4)),
    c: Number(c.toFixed(4)),
    A: Number(A.toFixed(2)),
    B: Number(B.toFixed(2)),
    C: Number(C.toFixed(2)),
    area: Number(area.toFixed(4)),
    perimeter: Number(perimeter.toFixed(4))
  };
}

3. Client-Side Security for Engineering and CAD Specifications

Civil engineers, surveyors, and CAD draftsmen regularly calculate precise triangle dimensions for proprietary structures, land plots, or mechanical designs. Submitting these specific measurements, coordinate boundaries, or spatial specs to external cloud-logged tools presents substantial corporate intellectual property risks.

We enforce a strict 100% Client-Side Privacy Law across our tool suite. Every trigonometric evaluation, radian conversion, and area calculation is computed locally inside your browser's RAM. No spatial parameters are ever transmitted over the network, keeping your engineering designs and CAD assets secure.

Solve triangle dimensions privately: Triangle (Trigonometry) Solver - Kandz.me

The Mathematics of Value Decay: Modeling Asset Depreciation Schedules in Code

kandz — Sat, 25 Jul 2026 15:00:52 +0000

In enterprise resource planning (ERP), corporate finance, and system engineering, tracking how physical hardware assets lose value over time is a core operational requirement. Whether managing server racks, office buildings, or vehicle fleets, companies must account for this decay on their balance sheets.

This process is governed by specific mathematical algorithms collectively known as Asset Depreciation.

Let's break down the mathematical formulations behind three standard depreciation methodologies (Straight-Line, Declining Balance, and Sum-of-the-Years' Digits), write clean code to model their schedules, and discuss the security advantages of client-side computing.

1. The Mathematical Models of Depreciation

Every depreciation model operates on three base parameters:

Asset Cost ($C$): The initial purchase value of the asset.
Salvage Value ($S$): The estimated residual value of the asset at the end of its useful life.
Useful Life ($L$): The expected duration of the asset's service, typically measured in years.

The depreciable base represents the total value to be depreciated over the asset's life:
$$\text{Depreciable Base} = C - S$$

Methodology A: Straight-Line (Constant Linear Decay)

Straight-Line is the simplest and most common depreciation model. It assumes that the asset loses an identical, constant value on every interval of its useful life.

The annual depreciation rate ($R$) is constant:
$$R = \frac{1}{L}$$

The annual depreciation expense ($D$) is calculated as:
$$D = (C - S) \times R = \frac{C - S}{L}$$

Methodology B: Declining Balance (Exponential Decay)

Declining Balance is an accelerated depreciation method. It writes off a higher percentage of the asset's value in the early years of its useful life, mimicking physical assets like vehicles, which lose value rapidly immediately after purchase.

It applies a constant depreciation factor ($F$, commonly $2.0$ for Double Declining Balance) to the remaining book value at the start of each year ($B_y$).

The annual depreciation rate is:
$$R = \frac{F}{L}$$

For any year $y$:
$$D_y = B_y \times R$$
$$B_{y+1} = B_y - D_y$$

Note: The asset's book value cannot depreciate below its salvage value ($S$). The final year's calculation must be capped to ensure the final book value matches $S$ exactly.

Methodology C: Sum-of-the-Years' Digits (Accelerated Non-Linear Decay)

Sum-of-the-Years' Digits (SYD) is another accelerated method, but unlike Declining Balance, it uses a variable fraction that decreases linearly on each interval.

First, we calculate the sum of the digits of the useful years ($SYD$):
$$\text{SYD} = 1 + 2 + 3 + \dots + L = \frac{L \times (L + 1)}{2}$$

For any active year $y$ (from $1$ to $L$), the remaining useful life of the asset is:
$$\text{Remaining Life} = L - y + 1$$

The annual depreciation expense ($D_y$) is:
$$D_y = (C - S) \times \frac{\text{Remaining Life}}{\text{SYD}}$$

2. Implementing the Algorithms in TypeScript

We can model these three mathematical decay tracks cleanly in a single, non-recursive TypeScript loop that generates a complete annual depreciation schedule:

interface ScheduleRow {
  year: number;
  expense: number;
  totalDepreciation: number;
  bookValue: number;
}

function calculateDepreciationSchedule(
  cost: number,
  salvage: number,
  life: number,
  method: 'straight-line' | 'declining-balance' | 'syd',
  factor = 2.0
): ScheduleRow[] {
  const schedule: ScheduleRow[] = [];
  let bookValue = cost;
  let totalDepreciation = 0;
  const depreciableBase = cost - salvage;

  if (method === 'straight-line') {
    const annualExpense = depreciableBase / life;
    for (let y = 1; y <= life; y++) {
      totalDepreciation += annualExpense;
      bookValue -= annualExpense;
      schedule.push({
        year: y,
        expense: Number(annualExpense.toFixed(2)),
        totalDepreciation: Number(totalDepreciation.toFixed(2)),
        bookValue: Number(Math.max(salvage, bookValue).toFixed(2))
      });
    }
  } else if (method === 'syd') {
    const sydSum = (life * (life + 1)) / 2;
    for (let y = 1; y <= life; y++) {
      const remainingLife = life - y + 1;
      const annualExpense = depreciableBase * (remainingLife / sydSum);
      totalDepreciation += annualExpense;
      bookValue -= annualExpense;
      schedule.push({
        year: y,
        expense: Number(annualExpense.toFixed(2)),
        totalDepreciation: Number(totalDepreciation.toFixed(2)),
        bookValue: Number(Math.max(salvage, bookValue).toFixed(2))
      });
    }
  } else if (method === 'declining-balance') {
    const rate = factor / life;
    for (let y = 1; y <= life; y++) {
      let annualExpense = bookValue * rate;

      // Ensure we do not depreciate below salvage value
      if (bookValue - annualExpense < salvage) {
        annualExpense = bookValue - salvage;
      }

      if (y === life) {
        annualExpense = bookValue - salvage;
      }

      totalDepreciation += annualExpense;
      bookValue -= annualExpense;
      schedule.push({
        year: y,
        expense: Number(annualExpense.toFixed(2)),
        totalDepreciation: Number(totalDepreciation.toFixed(2)),
        bookValue: Number(Math.max(salvage, bookValue).toFixed(2))
      });
    }
  }

  return schedule;
}

3. Client-Side Security for Corporate Financial Audits

Corporate physical asset inventories, capital budgets, and salvage projections represent highly sensitive, proprietary financial plans. Uploading raw procurement data, server purchase costs, or hardware lifespans to cloud-logged web forms exposes your corporate balance sheets and infrastructure budgets to tracking and data harvesting risks.

Our Asset Depreciation Calculator enforces our strict 100% Client-Side Privacy Law. All calculation loops, matrix schedule builds, and rounding operations execute locally within your browser's private memory sandbox. No data ever traverses the network, keeping your corporate hardware inventories and balance sheets completely confidential.

Audit your hardware assets securely: Asset Depreciation Calculator - Kandz.me

Mapping Human Biology: The Bitwise Boolean Algebra of Blood Transfusion Compatibility

kandz — Thu, 23 Jul 2026 11:21:39 +0000

While blood transfusion is fundamentally a medical procedure, its underlying compatibility rules can be modeled as a directed graph or represented elegantly using bitwise Boolean algebra.

Instead of writing complex, nested conditional loops (if/else) to check if Blood Type X can donate to Blood Type Y, we can represent human blood antigens as a 3-bit binary array and determine compatibility using a single bitwise operation.

Let's explore the mathematics of ABO and Rh antigen matching, the Boolean matrix of transfusions, and how to write clean, constant-time compatibility algorithms.

1. The Antigen Vector Space

Human red blood cells are classified by the presence or absence of specific inherited proteins (antigens) on their cell membranes. The primary typing systems are the ABO system (A and B antigens) and the Rh system (D antigen).

We can model this as a 3-dimensional vector space where each dimension is a binary flag (0 or 1):

Bit 0 ($2^0$): Presence of A antigen (1 = Present, 0 = Absent)
Bit 1 ($2^1$): Presence of B antigen (1 = Present, 0 = Absent)
Bit 2 ($2^2$): Presence of D (Rh) antigen (1 = Present, 0 = Absent)

Using this 3-bit binary mask, we can map the 8 primary human blood types to integer values from 0 to 7:

Blood Type	Rh (Bit 2)	B (Bit 1)	A (Bit 0)	Binary Mask	Integer Value
O-	0	0	0	`000`	0
A-	0	0	1	`001`	1
B-	0	1	0	`010`	2
AB-	0	1	1	`011`	3
O+	1	0	0	`100`	4
A+	1	0	1	`101`	5
B+	1	1	0	`110`	6
AB+	1	1	1	`111`	7

2. The Transfusion Compatability Equation

The fundamental rule of blood transfusion safety is that a recipient’s immune system will attack any foreign antigen it does not already possess.

Therefore, a donor is only compatible with a recipient if the donor has zero antigens that the recipient lacks.

If we represent the donor's antigen mask as $D$ and the recipient's antigen mask as $R$, compatibility requires that for every bit index $i$:
$$\text{If } D_i = 1 \text{ then } R_i \text{ must be } 1$$

Logically, this means:
$$\text{Compatible} = \neg (D_i \land \neg R_i)$$

In computer science, we can express this entire evaluation across all three bits simultaneously using a single bitwise operation in constant time $O(1)$:

const isCompatible = (donorMask & ~recipientMask) === 0;

Let’s trace a few cases using this bitwise logic:

Case A: Donor is O- (`000`), Recipient is A+ (`101`)

Invert Recipient: ~101 = 010 (in 3-bit space)
Bitwise AND: 000 & 010 = 000
Check: 000 === 0 is True (O- can safely donate to A+).

Case B: Donor is A+ (`101`), Recipient is B- (`010`)

Invert Recipient: ~010 = 101
Bitwise AND: 101 & 101 = 101
Check: 101 === 0 is False (A+ cannot donate to B-).

This algebraic representation eliminates the need for nesting loops and accurately models the biochemical reality of antigen matching.

3. Modeling the Directed Graph

If we map these compatibilities as a directed network where a directed edge $E(D, R)$ exists only if $D$ can donate to $R$, the network forms a partially ordered set (poset):

       [AB+] (Universal Recipient)
       / │ \
     [A+]│ [B+]
     / \ │ / \
   [A-] [O+] [B-]
     \  / \  /
     [O-] (Universal Donor)

O- (000) sits at the absolute bottom of the graph. Having no antigens, it has out-degree edges pointing to all nodes (Universal Donor).
AB+ (111) sits at the absolute top of the graph. Possessing all antigens, it has in-degree edges arriving from all nodes (Universal Recipient).

4. Absolute Client-Side Biometric Privacy

Biological and medical metrics represent highly sensitive personal information. Uploading your specific blood typing profiles, family compatibility checks, or biometric configurations to server-dependent online calculators introduces major tracking and data-profiling vulnerabilities.

Our Blood Donor Compatibility Calculator enforces a strict 100% Client-Side Privacy Law. All bitwise calculations, directed graph mappings, and compatibility checks execute locally inside your browser's temporary memory (RAM). No biometric metrics are ever transmitted over the network, keeping your health audits secure.

Evaluate your compatibility securely: Blood Donor Compatibility Calculator - Kandz.me

The Physics of UI Depth: CSS Box-Shadow Vectors and GPU Compositing Pipelines

kandz — Tue, 21 Jul 2026 11:19:16 +0000

Modern user interfaces use elevation and shadows to establish a visual hierarchy of layers. On a flat 2D screen, this depth is an optical illusion created by simulating light source projections and shadow scattering.

While generating a drop shadow in CSS is as simple as typing box-shadow, under the hood, the browser's rendering engine executes complex coordinate vector translations and expensive pixel convolution passes.

Let's break down the mathematics behind CSS depth calculations, the performance costs of rasterizing shadows, and how to optimize shadow animations for hardware acceleration.

1. The Coordinate Calculus of a Drop Shadow

A standard CSS box-shadow property is declared as:

box-shadow: <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;

To map this to a physical lighting model, we can treat the screen as an $(x, y)$ coordinate plane where a virtual light source is positioned at some vector direction relative to the UI element.

The Offset Vector $(dx, dy)$

The horizontal and vertical offsets determine the shadow's direction and indicate the relative angle of the light source. If the light source is located at an angle $\theta$ relative to the camera vector, the offsets are computed as:
$$dx = d \cdot \cos(\theta)$$
$$dy = d \cdot \sin(\theta)$$
where $d$ represents the physical extrusion distance of the element from the background plane.

The Blur Radius ($r$) and Gaussian Approximation

The blur radius determines the softness of the shadow's edges. In physics, this is known as the penumbra—the partially shaded outer region of a shadow where the light source is only partially blocked.

To render this softness, browser engines (such as Chromium’s Blink or WebKit) apply a convolution filter to the rasterized shape. While the ideal physical model uses a Gaussian Blur filter—which calculates new pixel values based on a normal distribution curve—doing so in real-time is highly CPU-intensive.

Instead, browser engines approximate a Gaussian Blur using a triple box blur algorithm. A box blur computes the average color value of a pixel’s neighbors within a square sliding window. By applying this simple box filter three times sequentially, the engine achieves a smooth, Gaussian-like curve at a fraction of the computational cost:
$$\text{Standard Deviation} (\sigma) \approx r \cdot \frac{\sqrt{3}}{2}$$

2. The GPU Rendering Pipeline: Why Shadows are Expensive

When a browser renders a page, it progresses through a strict pipeline: DOM/CSSOM ➜ Layout ➜ Paint ➜ Composite.

Applying a box-shadow directly impacts the Paint and Composite stages, making it one of the most computationally expensive CSS properties.

[DOM/CSSOM Changes] 
       │
       ▼
   [Layout] (Calculates geometry sizing)
       │
       ▼
   [Paint] (Rasterizes elements into bitmap layers) ──► [Convolutes Shadows via CPU/GPU]
       │
       ▼
 [Composite] (Layers blended together by GPU)

The Cost of Rasterization

Before an element is drawn to the screen, the rendering engine must rasterize it—converting vector instructions into pixel bitmaps. To draw a shadow, the engine:

Creates an alpha-mask copy of the element's border geometry.
Expands the mask using the spread-radius value.
Applies the triple box blur convolution across the expanded mask.
Colors the mask with your shadow color and draws it at the $(dx, dy)$ offset coordinates behind the element.

Because this blur calculation must run across a large sliding window of pixels, highly blurred, large shadows require significant memory bandwidth. If the shadow is applied to an element that triggers a repaint (such as during text input or hover states), the browser must recalculate this blur convolution on every single frame.

3. Optimizing Shadow Animations for the Compositor Thread

Animating box-shadow directly (e.g., changing the blur or offset on hover) is a common web performance bottleneck. It forces the browser to re-rasterize and repaint the shadow layer on the main thread for every frame of the transition, causing visible frame drops on mobile devices and low-spec hardware.

To achieve fluid, 60fps animations, you must bypass the Paint stage and offload the animation entirely to the GPU's Compositor Thread, which only handles layers that are already painted.

The Optimization: Layer Opacity Blending

Instead of transition-animating the box-shadow property itself, you can paint two static layers and transition the opacity of the top layer instead. The GPU can blend layer opacities extremely fast without triggering a repaint.

/* Optimized Depth Animation */
.card {
  position: relative;
  background: #ffffff;
}

/* Base Shadow Layer (Low Elevation) */
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: opacity 0.3s ease;
}

/* Hover Shadow Layer (High Elevation) */
.card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 8px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  opacity: 0; /* Hidden by default */
  transition: opacity 0.3s ease;
}

/* GPU-accelerated transition */
.card:hover::after {
  opacity: 1;
}

By utilizing pseudo-elements, the browser pre-rasterizes both shadow states once. On hover, the GPU simply adjusts the alpha opacity blend between the two static layer bitmaps, avoiding any expensive on-the-fly blur convolutions.

4. Secure, Local-First UI Development

When prototyping UI depth and shadow levels, front-end developers regularly enter strict design palette values and system specifications. Sending these styling layouts or design tokens to third-party, server-dependent generators poses corporate data privacy risks.

We developed our CSS Box Shadow Generator to run entirely client-side. By utilizing local browser memory (RAM) to parse and render vector dimensions, your styling configurations never traverse the network, keeping your interface design tokens secure.

Prototyping soft shadows, flat offsets, or inset depths can be performed with absolute local security.

Try the tool: CSS Box Shadow Generator - Kandz.me

Demystifying LLM Tokenizers: Building a Client-Side Token and API Cost Calculator

kandz — Sun, 19 Jul 2026 11:08:14 +0000

If you are building applications with large language models (LLMs) like OpenAI's GPT-4o, Anthropic's Claude 3.5, or Google's Gemini 1.5, you quickly realize that LLMs do not read words.

Instead, they process text in chunks called tokens.

Because LLM providers charge you on a pay-per-token basis (split between input and output tokens), keeping a precise, real-time audit of your prompt tokenization is vital to prevent development budgets from ballooning.

Here is how tokenization works under the hood, the rule-of-thumb mathematics behind prompt cost estimation, and how to build a 100% private, client-side tokenizer calculator in your browser.

What is a Token?

In natural language processing (NLP), tokens are the basic atomic units of text parsed by the model's neural network.

Instead of splitting text by letters (too slow and lacking semantic meaning) or by complete words (too many unique words to map in a vocabulary), modern LLMs use an algorithm called Byte Pair Encoding (BPE).

BPE splits words into common sub-word fragments. For example:

The word "unbelievable" might be tokenized into three parts: ["un", "believ", "able"].
Highly common short words (like "the" or "and") typically count as a single token.

The Rule of Thumb Math:

While exact tokenization depends on the specific encoder used (such as OpenAI's cl100k_base or o200k_base), statistical linguistic averages provide a highly reliable standard for English text:

1 Token $\approx$ 4 characters of text.
1 Token $\approx$ 0.75 words (or 100 words $\approx$ 133 tokens).

The Mathematics of API Cost Estimation

To estimate the cost of an LLM completion request, you must evaluate input and output pricing separately, as providers charge significantly more for output generation (due to the autoregressive, sequential processing required to generate next-tokens).

The mathematical model is formulated as:

$$\text{Total Cost} = \left(\frac{\text{Input Tokens}}{1,000,000} \times \text{Input Price per 1M}\right) + \left(\frac{\text{Output Tokens}}{1,000,000} \times \text{Output Price per 1M}\right)$$

For example, if you run a prompt containing 10,000 input tokens and generate 2,000 output tokens on a model priced at $2.50/1M input and $10.00/1M output (like GPT-4o):

Input Cost: $(10,000 / 1,000,000) \times \$2.50 = \$0.025$
Output Cost: $(2,000 / 1,000,000) \times \$10.00 = \$0.020$
Total Cost: $\$0.025 + \$0.020 = \$0.045$

Estimating Tokens in Client-Side JavaScript

While fully-featured libraries like tiktoken exist, importing large WASM-compiled dictionaries into a lightweight web page is heavy. For a rapid, zero-dependency client-side estimate, we can write an optimized BPE-approximation parser:

function estimateTokens(text) {
  if (!text) return 0;

  // 1. Clean and normalize spaces
  const cleaned = text.trim().replace(/\s+/g, ' ');
  if (!cleaned) return 0;

  // 2. Count words and characters
  const words = cleaned.split(' ');
  const charCount = cleaned.length;

  // 3. Apply standard weighted regression
  // Each space is 1 token. Alphanumeric blocks average 4 characters.
  const wordTokens = words.length * 1.33;
  const charTokens = charCount / 4.0;

  // Take the mathematical average of both estimates for high-tolerance accuracy
  return Math.ceil((wordTokens + charTokens) / 2);
}

// Example usage:
const prompt = "Please format this dataset into a clean JSON array.";
console.log(estimateTokens(prompt)); // Estimates ~13 tokens

Why Client-Side Privacy is Vital for Prompt Auditing

When developing software, engineers routinely paste their active system instructions, proprietary source code, database schemas, or raw user drafts into online token counters to check costs.

Pasting these private drafts into server-logged public calculators is a major security risk. It exposes your intellectual property, system designs, or client data to external databases.

At KandZ Tools, we enforce a strict 100% Client-Side Privacy Law. Your prompt drafts, tokenizations, and pricing models are calculated exclusively inside your browser's temporary memory (RAM). No data is ever transmitted to external servers, keeping your system architectures completely confidential.

Audit your AI development budgets privately: https://tools.kandz.me/ai-cost-calculator

DEV Community: kandz

Under the Hood: Building a 100% Client-Side CSV Deduplicator with Angular 18+ Signals

1. The Core Architecture & Challenges

2. Breaking Down the Parser

3. Protecting the Header & Cleaning Merged Files

4. Reactive State management with Angular Signals

5. Summary

Stop Uploading Proprietary Graphics to Cloud Image Resizers 🖼️🚀

🧠 How It Works Under the Hood

1. Zero-Upload Off-Screen Canvas Buffering

2. Hardware-Accelerated Bicubic Resampling

3. Format-Aware Binary Blobs

🛠️ Give it a spin

Why You Shouldn't Paste Production SQL Into Cloud Formaters 💾🚀

🧠 How It Works Under the Hood

1. Regex Token-Based Beautifier

2. Sargability Heuristics & Index Alerts

3. Automatic CREATE INDEX Compilation

🛠️ Give it a spin

Why You Shouldn't Paste Private Logs Into Cloud Regex Testers 🔍

🧠 How It Works Under the Hood

1. Dynamic Local Compilation

2. HTML-Escaped Highlight Tokenizer

3. Global Event Dispatching

🛠️ Keep Your Log Audits Secure

Stop Writing Laravel Migrations by Hand. Convert Raw SQL Instantly! 🚀

🧠 How It Works Under the Hood

1. DDL Pattern-Matching Parser

2. Automatic Modifier Chaining

3. 100% Client-Side Privacy Sandbox

🛠️ Give it a spin

Stop Uploading Proprietary Binaries to Cloud Hex Viewers

🧠 How It Works Under the Hood

1. Zero-Upload Sandbox with FileReader

2. Dynamic Endianness Decoding via DataView

3. Protecting the DOM with Chunking

🛠️ Give it a spin

Data Serialization: The Mechanics of List Delimiter Conversion and String Wrapping

1. The Anatomy of plain-text Delimiters

The Wrapping Challenge (SQL Arrays)

2. Algorithmic Data Cleaning and Sanitization

Step 1: Tokenization (Splitting)

Step 2: Sanitization (Trimming & Deduplication)

Step 3: Wrapping & Re-assembling

3. Implementing the Re-Formatter in TypeScript

4. Absolute Client-Side Privacy for Database Exports

The Trigonometry of Oblique Spaces: Solving Triangles with the Law of Sines and Cosines in Code

1. The Trigonometric Foundations of Oblique Solvers

Methodology A: The Law of Cosines (SSS & SAS)

Methodology B: The Law of Sines (ASA & AAS)

Methodology C: The Ambiguous Case (SSA)

2. Implementing the Solver in TypeScript

3. Client-Side Security for Engineering and CAD Specifications

The Mathematics of Value Decay: Modeling Asset Depreciation Schedules in Code

1. The Mathematical Models of Depreciation

Methodology A: Straight-Line (Constant Linear Decay)

Methodology B: Declining Balance (Exponential Decay)

Methodology C: Sum-of-the-Years' Digits (Accelerated Non-Linear Decay)

2. Implementing the Algorithms in TypeScript

3. Client-Side Security for Corporate Financial Audits

Mapping Human Biology: The Bitwise Boolean Algebra of Blood Transfusion Compatibility

1. The Antigen Vector Space

2. The Transfusion Compatability Equation

Let’s trace a few cases using this bitwise logic:

Case A: Donor is O- (000), Recipient is A+ (101)

Case B: Donor is A+ (101), Recipient is B- (010)

3. Modeling the Directed Graph

4. Absolute Client-Side Biometric Privacy

The Physics of UI Depth: CSS Box-Shadow Vectors and GPU Compositing Pipelines

1. The Coordinate Calculus of a Drop Shadow

The Offset Vector $(dx, dy)$

The Blur Radius ($r$) and Gaussian Approximation

2. The GPU Rendering Pipeline: Why Shadows are Expensive

The Cost of Rasterization

3. Optimizing Shadow Animations for the Compositor Thread

The Optimization: Layer Opacity Blending

4. Secure, Local-First UI Development

Demystifying LLM Tokenizers: Building a Client-Side Token and API Cost Calculator

What is a Token?

The Rule of Thumb Math:

1. Zero-Upload Sandbox with `FileReader`

2. Dynamic Endianness Decoding via `DataView`

Case A: Donor is O- (`000`), Recipient is A+ (`101`)

Case B: Donor is A+ (`101`), Recipient is B- (`010`)