DEV Community: kandz

Deep Merging in JavaScript: How to Recursively Combine Objects Without Losing Nested Properties

kandz — Mon, 31 Aug 2026 07:54:44 +0000

In JavaScript and TypeScript application architecture, combining configurations, managing nested state states, or applying user overrides to default settings are standard requirements.

However, many developers still fall into the trap of using shallow copy mechanisms like Object.assign() or the object spread operator (...). When applied to nested objects, these approaches can lead to silent data loss, state mutations, and hard-to-track runtime bugs.

In this technical breakdown, we will analyze why shallow merging fails on nested structures, explore the mechanics of a recursive deep merge algorithm, and write a type-safe, non-any deep merge utility in TypeScript.

1. The Fallacy of Shallow Merging

Shallow copying only copies the top-level properties of an object. If a property is a reference type (like a nested object or array), only the reference pointer is copied—not the actual nested data.

Consider this common configuration scenario:

const defaultSettings = {
  theme: 'light',
  api: {
    endpoint: 'https://api.example.com',
    timeout: 5000
  }
};

const userOverrides = {
  api: {
    timeout: 10000
  }
};

// The Shallow Merge Trap
const mergedSettings = { ...defaultSettings, ...userOverrides };

console.log(mergedSettings);
/*
Output:
{
  theme: 'light',
  api: {
    timeout: 10000
  }
}
*/

Why did this fail?

Because the spread operator performed a shallow assignment, the nested api property on userOverrides completely overwrote the original api object on defaultSettings. As a result, the critical endpoint property was completely lost.

To combine nested properties rather than overwriting them, we must perform a Recursive Deep Merge.

2. The Mechanics of a Recursive Deep Merge Algorithm

A true deep merge algorithm must recursively traverse the object trees. If both objects share a key, the algorithm must evaluate the types of their respective values:

Both values are objects: Recursively call the merge function to combine their sub-properties.
Both values are arrays: Decide whether to concatenate them, keep unique elements, or overwrite with the new array.
Value types differ (or are primitives): Resolve the conflict by either keeping the original value or overwriting it based on a designated collision policy.

3. Writing a Type-Safe Deep Merge Utility in TypeScript

To ensure strict compiler compliance under modern TypeScript standards, we must avoid the forbidden any type and build a robust, structurally typed merging engine.

Here is the clean, type-safe implementation:

/**
 * Safe helper checking if an item is a non-null, non-array object
 */
function isObject(item: unknown): boolean {
  return typeof item === 'object' && item !== null && !Array.isArray(item);
}

/**
 * Recursively deep-merges two object trees securely
 * @param a The base target object
 * @param b The incoming override object
 * @param arrayStrategy How to handle array collisions ('concat' | 'unique' | 'replace')
 * @param conflictStrategy How to resolve primitive conflicts ('overwrite-b' | 'keep-a')
 */
function deepMerge(
  a: Record<string, unknown>,
  b: Record<string, unknown>,
  arrayStrategy: 'concat' | 'unique' | 'replace' = 'concat',
  conflictStrategy: 'overwrite-b' | 'keep-a' = 'overwrite-b'
): Record<string, unknown> {
  const result = { ...a };

  for (const key of Object.keys(b)) {
    const valA = a[key];
    const valB = b[key];

    if (isObject(valA) && isObject(valB)) {
      // Both are objects: recurse deeper
      result[key] = deepMerge(
        valA as Record<string, unknown>,
        valB as Record<string, unknown>,
        arrayStrategy,
        conflictStrategy
      );
    } else if (Array.isArray(valA) && Array.isArray(valB)) {
      // Both are arrays: apply array merging strategy
      if (arrayStrategy === 'concat') {
        result[key] = [...valA, ...valB];
      } else if (arrayStrategy === 'unique') {
        result[key] = Array.from(new Set([...valA, ...valB]));
      } else {
        result[key] = [...valB]; // replace
      }
    } else {
      // Primitive or mismatched types: apply conflict resolution
      if (valA !== undefined) {
        result[key] = conflictStrategy === 'keep-a' ? valA : valB;
      } else {
        result[key] = valB;
      }
    }
  }

  return result;
}

Why this structure is secure:

Strong Type Assertions: It uses structural record indexing (Record<string, unknown>) to protect the compiler against type-erasure.
Predictable Collisions: By separating array strategies and value conflicts, the algorithm avoids random reference changes or unexpected state mutations.

Interactive Playground

If you need to merge complex settings side-by-side, analyze conflicts, customize your array concatenation behaviors, and inspect the resulting JSON securely inside your local browser memory:

👉 JS Object Merging Utility on Kandz.me

How do you manage nested configurations in your frameworks? Let's discuss in the comments!

Writing Secure Shell Scripts: A Guide to Auditing and Sanitizing Unsafe Bash Code

kandz — Thu, 27 Aug 2026 10:58:13 +0000

Shell scripting remains the connective tissue of modern deployment pipelines, system administration, and container orchestration. Yet, despite its ubiquity, Bash is notoriously fragile. A single unquoted variable or a missing error handling flag can result in disastrous silent failures, partial script executions, or critical security vulnerabilities.

In this technical guide, we will analyze common, high-risk anti-patterns in Bash scripts, explain why standard shell environments fail silently, and demonstrate how to programmatically audit shell script structures for duplicate variables and unsafe parameters.

1. The High-Risk Anti-Patterns of Silent Bash Failures

By default, Bash execution engines are designed to be permissive. Unlike strict programming environments that throw exceptions and halt execution on errors, shell scripts will happily continue executing even if a key command fails or a variable is undefined.

Anti-Pattern A: Missing Safety Headers

Consider this snippet:

#!/bin/bash
TARGET_DIR=$1
rm -rf "$TARGET_DIR/*"

If this script is executed without arguments, TARGET_DIR remains an empty string. The shell expands the command to rm -rf /*, which will attempt to recursively delete the host machine's root directory.

Anti-Pattern B: Unquoted Variables and Word Splitting

When you reference a variable without wrapping it in double quotes (e.g., echo $FILE_NAME), the shell subjects the variable's value to Word Splitting and Pathname Expansion (Globbing) based on internal field separator (IFS) whitespace. If a file name contains spaces, the shell will treat it as multiple separate arguments, leading to unexpected behaviors or syntax failures in conditional tests.

2. Establishing a Strict Safety Standard

The first step in securing any shell script is to configure a defensive execution header using the set built-in utility.

#!/bin/bash
set -euo pipefail

Deconstructing the Safe Header Flags:

set -e (Exit Immediately): Tells the shell to terminate the script immediately if any command exits with a non-zero status code. This prevents silent cascades where later scripts run despite previous critical dependency failures.
set -u (Nounset): Treats any reference to an uninitialized or unbound variable as a fatal syntax error, instantly stopping execution (safeguarding against empty path expansions).
set -o pipefail (Pipeline Failures): Normally, a pipeline's exit status is only determined by the very last command. Using pipefail ensures that if any command in a pipeline fails (e.g., cat missing_file | grep 'pattern'), the entire pipeline returns a failing exit status.

3. Auditing Variables and Parameters in TypeScript

To help developers proactively scan their scripts for vulnerabilities before deploying them to production, we can write a client-side parser in TypeScript that audits variables and detects common anomalies like duplicate declarations or unsafe variable assignments.

Below is a robust, type-safe implementation of a static script scanner:

interface SanitizationReport {
  isValid: boolean;
  warnings: string[];
}

/**
 * Parses and audits raw Bash code for common vulnerabilities and duplicate assignments
 * @param scriptSource The raw shell script string to audit
 */
function sanitizeBashScript(scriptSource: string): SanitizationReport {
  const warnings: string[] = [];
  const lines = scriptSource.split(/\r?\n/);
  const declaredVariables = new Set<string>();

  // Check for safety headers
  const firstLine = lines[0] ? lines[0].trim() : '';
  if (!firstLine.startsWith('#!')) {
    warnings.push('Warning: Missing standard Shebang header (e.g., #!/bin/bash).');
  }

  const scriptBody = scriptSource.replace(/#.*/g, ''); // Strip comments
  if (!scriptBody.includes('set -e') && !scriptBody.includes('set -o pipefail')) {
    warnings.push('Security Alert: Script lacks strict safety controls (e.g., "set -euo pipefail" is highly recommended).');
  }

  // Detect variable declarations and check for duplicates
  const variableDeclarationRegex = /^\s*([a-zA-Z_][a-zA-Z0-9_]*)\s*=/;

  for (let i = 0; i < lines.length; i++) {
    const line = lines[i].trim();

    // Ignore lines that are comments or empty
    if (line.startsWith('#') || line.length === 0) continue;

    const match = line.match(variableDeclarationRegex);
    if (match && match[1]) {
      const varName = match[1];
      if (declaredVariables.has(varName)) {
        warnings.push(`Line ${i + 1}: Variable "${varName}" is redeclared. Verify if this duplicate assignment was intentional.`);
      } else {
        declaredVariables.add(varName);
      }
    }

    // Flag dangerous patterns like unquoted directory removals
    if (line.includes('rm -rf') && /rm -rf\s+\$[a-zA-Z0-9_]+(\s|$)/.test(line)) {
      warnings.push(`Line ${i + 1}: Unsafe recursive removal detected. Variables in "rm -rf" should always be double-quoted to prevent root deletions.`);
    }
  }

  return {
    isValid: warnings.length === 0,
    warnings
  };
}

This secure script parser performs all structural inspections entirely client-side. Since no script payloads or deployment credentials are sent over the network, your server keys, database ports, and infrastructure parameters remain completely secure in your browser.

Interactive Playground

If you want to validate your Bash scripts, automatically audit variables, strip unsafe parameters, and copy sanitized script headers, feel free to try our free developer tool:

👉 Bash Script Sanitizer on Kandz.me

How do you secure your production shell scripts? Do you enforce strict linters in your CI/CD pipelines? Let's discuss in the comments!

Mastering CSS Grid: Visual Layout Prototyping with grid-template-areas

kandz — Sun, 23 Aug 2026 10:09:29 +0000

Designing responsive web layouts has historically been a balancing act of float properties, absolute position rules, and nested flexbox containers. While CSS Grid introduced a highly structured 2D grid model, many developers still rely on manual column and row span indices (grid-column: 1 / 3;).

If you are looking for a more declarative, semantic, and maintainable approach to responsive layouts, CSS Grid Template Areas (grid-template-areas) is the ultimate standard.

In this technical breakdown, we will deconstruct how named grid areas work, why they make media queries cleaner, and how to build a client-side visual grid layout editor in TypeScript.

1. The Power of Declarative Named Grid Areas

The grid-template-areas property allows you to define your layout using clear string templates. Each row in your grid is defined as a string, and each word inside that string represents a single grid cell.

Consider this classic "Holy Grail" grid layout configuration:

.grid-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-template-areas:
    "header  header  header"
    "sidebar main    main"
    "sidebar footer  footer";
  gap: 16px;
}

Instead of managing mathematical indices, we assign grid areas by name:

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

Key Architectural Benefits:

Self-Documenting Code: Your stylesheet visualizes the structural page layout directly.
Separation of Concerns: Your semantic HTML remains completely unaffected by layout changes.
Zero-Math Spans: The browser automatically handles merging and spanning boundaries based on adjacent matching names.
Empty Spacers Made Simple: To leave a cell completely empty, you simply use a dot (.) inside your template string (e.g., "header . sidebar").

2. Responsive UI Design via Simple Media Queries

One of the greatest advantages of named grid areas is the ease of responsive design. Instead of restructuring your HTML document structure, or changing multiple columns and rows spans on individual elements, you only need to redefine the grid-template-areas property on the parent grid container.

Here is how you redefine the same template structure on mobile devices:

@media (max-width: 768px) {
  .grid-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}

The browser handles repositioning the elements seamlessly.

3. Designing a Client-Side Grid Layout Painter in TypeScript

To help developers build and experiment with these configurations, we developed a local client-side visual painter.

We can model the grid states reactively in TypeScript. By representing the grid canvas as a flat array of cell tags corresponding to [rowsCount * colsCount], users can click cells to change their area assignments in real-time.

Here is the core logic to compile the CSS string and distinct selectors:

/**
 * Compiles a flat grid array into compliant CSS grid-template-areas strings
 * @param cells Array of area strings (e.g., ['header', 'header', 'main', ...])
 * @param rows Total rows in the layout
 * @param cols Total columns in the layout
 */
function compileGridTemplate(cells: string[], rows: number, cols: number): string {
  let areaRows: string[] = [];

  for (let i = 0; i < rows; i++) {
    const rowSlice = cells.slice(i * cols, (i + 1) * cols);
    const rowStr = rowSlice.map((cell) => (cell === 'empty' ? '.' : cell)).join(' ');
    areaRows.push(`    "${rowStr}"`);
  }

  return areaRows.join('\n');
}

/**
 * Extracts unique class area selectors for layout structures
 */
function getDistinctSelectors(cells: string[]): string[] {
  return Array.from(new Set(cells)).filter((c) => c !== '.' && c !== 'empty');
}

This model compiles the grid definitions instantly inside your browser's private memory sandbox. This ensures maximum privacy, so your custom structures and designs are never sent to external servers.

Interactive Playground

If you want to visually paint layouts, customize dimensions, define custom brush tools, and copy ready-to-use CSS and HTML, feel free to try our free developer tool:

👉 CSS Grid Template Areas Visualizer on Kandz.me

How do you manage your CSS Grid structures? Do you prefer manual span properties or named areas? Let's discuss in the comments!

Measuring Code Quality: Building a Client-Side JavaScript Complexity & Maintainability Analyzer

kandz — Wed, 19 Aug 2026 08:24:35 +0000

As codebases scale under aggressive product cycles, functions can easily become bloated with deeply nested loops and excessive conditional branches. This increases technical debt and makes unit testing much harder.

To help developers audit their code hygiene instantly and securely, we built a JS Code Complexity Analyzer running completely client-side. Here is a technical breakdown of how we calculated McCabe's Cyclomatic Complexity, mapped maximum nesting depths, and approximated the industry-standard Maintainability Index in the browser.

1. The Mathematics of Cyclomatic Complexity

Developed by Thomas J. McCabe in 1976, Cyclomatic Complexity measures the number of linearly independent execution paths through a program's source code.

Rather than loading a heavy Abstract Syntax Tree (AST) parser in the browser, our engine performs a highly efficient, regex-based token scan. The algorithm starts with a baseline complexity score of 1. For each decision node or branching point detected in the code, the score increases by 1.

We scan lines for the following branching patterns (while ignoring matches found inside comments):

Conditional branches: if, case
Loop structures: for, while
Error handling: catch
Logical operators: &&, ||
Ternary operators: ?

A higher score indicates more independent paths, warning developers that the function requires more unit tests to cover all execution conditions.

2. Scanning Maximum Nesting Depth

Nesting depth measures how deeply control structures are layered inside one another. High complexity with flat nesting is often manageable, but deeply nested code is notoriously hard to read.

Our engine calculates the maximum nesting depth by scanning the brace-balance ({ and }) of the code block sequentially. It tracks the current nesting depth in real-time, recording the maximum depth reached during the lexical scan.

let currentDepth = 0;
let maxDepth = 0;

for (let i = 0; i < code.length; i++) {
  if (code[i] === '{') {
    currentDepth++;
    if (currentDepth > maxDepth) {
      maxDepth = currentDepth;
    }
  } else if (code[i] === '}') {
    currentDepth = Math.max(0, currentDepth - 1);
  }
}

3. Approximating the Maintainability Index

The Maintainability Index is an industry-standard metric (ranging from 0% to 100%) indicating how easy the code is to support and modify. The classic formula balances Halstead Volume, Cyclomatic Complexity, and Source Lines of Code (SLOC).

Our engine calculates a highly reliable approximation of this index using a logarithmic scale:

$$\text{Maintainability Index} = 171 - (3.5 \times \ln(\text{Complexity})) - (0.23 \times \text{Complexity}) - (16.2 \times \ln(\text{SLOC}))$$

Excellent Maintainability: Scores above 75% (low complexity, short, clean).
Moderate Maintainability: Scores between 50% and 75%.
Low Maintainability: Scores below 50% (high complexity, deep nesting, long lines).

4. Interactive Sandbox & Security Hygiene

The tool displays these metrics on a responsive dashboard:

McCabes Complexity Score: Classified by risk ratings (Low Risk < 10, Moderate Risk 10–15, High Risk > 15).
Nesting Depth Counter: Flags blocks nested too deeply.
SLOC Breakdown: Tracks actual Source Lines of Code, comments, and blank spacer lines.

Transmitting proprietary enterprise code, server router functions, or security scripts to external servers poses a severe privacy risk. By executing all static analysis, regex parsing, and index math locally inside your browser's private sandbox memory, your configurations remain completely secure.

Test your custom JavaScript routines, analyze nested loops, and check your complexity scores:

👉 Test the Live Tool: https://tools.kandz.me/code-complexity

Building a High-Performance, Client-Side JSON Diff Checker Using Dynamic Programming (LCS)

kandz — Sat, 15 Aug 2026 10:34:04 +0000

Comparing nested JSON configuration files across builds or API revisions is a constant necessity in backend development. While standard text diffing utilities exist, semantic JSON comparison requires robust syntax validation combined with clean line-by-line alignment.

To solve this, we built a secure, client-side JSON Diff Checker that parses, formats, and compares JSON documents locally. Here is a technical breakdown of how we engineered its dynamic programming comparison engine and why local validation matters.

The Architecture: JSON Parsing + LCS Line Mapping

A high-fidelity JSON diff utility cannot simply run a raw text string comparison; doing so would highlight harmless differences like varying spacing or reordered properties as false positives. Our engine operates in two clean phases:

Phase 1: Semantic Standardizing

First, both inputs are parsed safely via standard browser JSON libraries. This step validates JSON well-formedness, capturing trailing commas, mismatched braces, or double-quote syntax warnings. Once parsed, the objects are compiled back into formatted string arrays with standard 2-space indentation. This standardizes whitespace and makes comparison line-by-row predictable.

Phase 2: Longest Common Subsequence (LCS)

Second, we run a dynamic programming LCS algorithm over the standardized line arrays to find the shortest edit path. Here is how the recursive traceback matrix computes the state of each line:

// Dynamic programming matrix initialization
const dp: number[][] = Array(n + 1).fill(0).map(() => Array(m + 1).fill(0));

for (let i = 1; i <= n; i++) {
  for (let j = 1; j <= m; j++) {
    if (leftLines[i - 1] === rightLines[j - 1]) {
      dp[i][j] = dp[i - 1][j - 1] + 1;
    } else {
      dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
    }
  }
}

By traversing the completed matrix, the engine identifies exactly which formatted lines were added (+), removed (-), or kept unchanged (➔), mapping precise line numbers to both columns.

Core Symmetrical Design & Features

Instant Syntax Diagnostics: If either JSON input is malformed, the visualizer halts gracefully, displaying clear syntax error messages and pinpointing the structural issue.
Symmetrical Layout Sizing: Built with a 5-column control console on the left (for source payloads and presets) and a 7-column highlight scrollbox on the right (height restricted to 450px) to maintain a perfectly balanced layout.
Log Snapping with Custom Names: Includes an editable configuration label so you can save your compared datasets with distinct names (e.g., "User Profile Verification") directly to your local History Log.

Try out the interactive comparison sandbox, paste your configurations, and test the dynamic alignment yourself:

👉 Test the Live Tool: https://tools.kandz.me/json-diff

Visualizing the JavaScript Call Stack & Event Loop: A Deep Dive Into Runtime Mechanics

kandz — Fri, 14 Aug 2026 09:23:44 +0000

How does single-threaded JavaScript handle asynchronous tasks without blocking the main execution thread? The answer lies in the orchestration of the Call Stack, Web APIs, the MicroTask Queue, the Callback (MacroTask) Queue, and the Event Loop.

To help developers and students master these runtime operations, we built an interactive, step-by-step visualizer running completely client-side. Here is a technical breakdown of how the engine works, how we modeled its stages, and how you can use it to debug complex asynchronous execution patterns.

The Architecture of the JavaScript Runtime

Under the hood, JavaScript engines (such as V8 or SpiderMonkey) run on a single main thread. To execute code synchronously and asynchronously, the runtime coordinates five distinct components:

The Call Stack (LIFO): Tracks active function execution contexts. When a function is called, its frame is pushed to the top of the stack. When it completes, it is popped off.
Web APIs / Platform Environment: Handles background, asynchronous operations like DOM events, fetch requests, and setTimeout timers.
The MicroTask Queue: A high-priority FIFO (First-In, First-Out) queue that stores callbacks from resolved Promises (e.g., .then() handlers) and MutationObservers.
The Callback Queue (MacroTask Queue): A lower-priority FIFO queue storing callbacks from completed timers (like setTimeout or setInterval) and network handshakes.
The Event Loop: A continuous ticking mechanism that monitors the Call Stack. Once the stack is completely empty, it drains the entire MicroTask Queue before pulling a single callback from the MacroTask Queue.

Modeling Asynchronous Priority (The Classic Interview Question)

One of the most common JavaScript interview questions tests the priority of microtasks over macrotasks:

console.log("Start");
setTimeout(() => console.log("Timeout"), 0);
Promise.resolve().then(() => console.log("Promise"));
console.log("End");

What is the execution order? Our visualizer models this step-by-step:

Synchronous Execution: console.log("Start") and console.log("End") are pushed directly to the Call Stack and execute instantly.
setTimeout Registration: setTimeout is called. The 0ms timer triggers instantly, and the browser transfers cb_Timeout directly to the Callback Queue (MacroTask).
Promise Registration: Promise.resolve() resolves instantly. The .then() handler registers cb_Promise into the high-priority MicroTask Queue.
The Stack Clears: Once the synchronous script finishes, the Call Stack becomes empty.
MicroTask Execution: The Event Loop ticks. It prioritizes the MicroTask Queue, pulling cb_Promise onto the stack. It prints "Promise".
MacroTask Execution: Only after the MicroTask Queue is completely drained does the Event Loop pull cb_Timeout from the Callback Queue. It prints "Timeout".

This results in the correct sequence: Start ➔ End ➔ Promise ➔ Timeout.

Core Visualizer Features

We built this simulator with several interactive debugging controls to make tracing these transitions intuitive:

High-Fidelity Step Navigation: Step forward or backward through execution frames manually to analyze the exact state change of every queue.
Auto-Playback Control: Adjust simulation speeds from 500ms to 3500ms to watch the queues animate and update dynamically.
Synchronized Code Highlighting: The editor panel highlights the active line of code corresponding to the frame currently executing in the Call Stack.
Live Interactive Terminal: A simulated console prints logs in real-time as execution frames are processed.

Try out the interactive simulation, step through custom asynchronous examples, and analyze the execution loops yourself:

👉 Test the Live Visualizer: https://tools.kandz.me/call-stack-visualizer

Under the Hood: Building an Interactive CSS Cubic Bezier Curve Designer

kandz — Wed, 12 Aug 2026 05:01:04 +0000

In modern UI/UX development, animations dictate how organic and responsive digital interfaces feel. Linear transitions feel static and industrial because physical objects in the real world do not instantly accelerate and decelerate at uniform speeds. Instead, high-quality, professional user interfaces rely on non-linear motion paths that simulate physical characteristics like momentum, friction, and elasticity.

To help web developers design and visualize these parameters, we built the CSS Animation Timing Function Curve Designer on tools.kandz.me. Here is a deep dive into the math, layout challenges, and browser rendering models that power it under the hood.

1. The Mathematics of Cubic Bezier Curves

A standard CSS transition timing function uses a Cubic Bezier curve defined by four coordinate control points: the anchor start (0, 0), the anchor end (1, 1), and two independent control handles P1 (x1, y1) and P2 (x2, y2).

While the horizontal time-axis coordinates (x1 and x2) must strictly remain within the bounds of 0 and 1 to prevent temporal paradoxes (which is why our sliders enforce this range), the vertical progress-axis coordinates (y1 and y2) are unbound.

By setting values less than 0 or greater than 1 (for example, cubic-bezier(0.68, -0.6, 0.32, 1.6)), developers can simulate spring-like elastic motion. This forces the element to physically overshoot its landing coordinates before bouncing back, producing a beautiful elastic effect natively.

2. Drawing the Curve with Vector SVG

To display the active Bezier curve in real-time, our engine maps the user's 0..1 coordinates onto a responsive 150x150 SVG drawing canvas.

Using an SVG cubic path command (C), we can plot the mathematical curve natively. To accommodate elastic easing coordinates where y goes below 0 or above 1, we map the vertical bounds onto a padded height coordinate scale:

curveSvgPath = computed((): string => {
  const x1 = this.x1() * 150;
  const y1 = 150 - ((this.y1() + 1) * 75); // Map -1..2 range onto 0..150 height
  const x2 = this.x2() * 150;
  const y2 = 150 - ((this.y2() + 1) * 75);

  return `M 0 112.5 C ${x1} ${y1}, ${x2} ${y2}, 150 37.5`;
});

This dynamically updates the SVG vector path on every slider event, drawing the exact motion curve alongside turquoise and pink coordinate anchor points.

3. GPU-Accelerated Animation Preview: Transitioning left vs. translateX

A major challenge during development was making sure the visual physics simulator worked accurately and responsively across different viewport sizes.

Initially, we tried toggling arbitrary Tailwind CSS classes using translateX percentages. However, we ran into a classic CSS transform limitation: percentage values inside translateX are calculated relative to the width of the animated element itself (32px), not the parent track container.

To resolve this, we transitioned the absolute left property instead. In absolute positioning, percentage values are calculated relative to the parent container's width. This allows the animated box to travel from the far left of its track (left: 4px) to the exact far right (left: calc(100% - 36px)) responsively on both mobile and 4K displays.

We then inject the custom compiled CSS ruleset into a safe dynamic style tag inside the DOM:

.easing-box-animated {
  transition: left 1.2s cubic-bezier(0.25, 0.25, 0.75, 0.75);
}

This ensures that the browser uses hardware-accelerated rendering pipelines to run the side-by-side transition preview at a smooth 60fps.

4. Try it out

Mastering motion physics doesn't have to require manual coordinate guesswork. Try out the designer, test your curves against the linear reference block, and copy clean CSS transitions instantly.

Try the live tool: tools.kandz.me/css-timing-designer

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!