DEV Community: kandz

Understanding CSS Flexbox Wrap

kandz — Thu, 17 Sep 2026 07:33:00 +0000

Flexbox is one of those things that seems simple until it doesn't work. You set flex-wrap: wrap and expect items to wrap. Then they don't. Or they wrap but leave weird gaps. Or wrap-reverse flips things in ways you didn't expect.

Let's break down how flex-wrap actually works.

What flex-wrap Does

By default, flexbox tries to fit everything on a single line. flex-wrap controls what happens when items exceed the container width.

The three values:

Value	Behavior
`nowrap` (default)	All items on one line. Overflow if needed.
`wrap`	Items break into multiple lines.
`wrap-reverse`	Same as wrap, but lines stack in reverse order.

Why Items Don't Wrap (Even with flex-wrap: wrap)

The most common problem: you set flex-wrap: wrap but items still overflow.

The cause: min-width: auto on flex items.

By default, flex items refuse to shrink below their content's natural width. A long word, an image, or a fixed-width element can force the item wider than its container.

The fix:

.flex-item {
  min-width: 0;
}

This allows items to shrink so wrapping can occur.

The align-content Trap

If you have a fixed height on the container and use flex-wrap: wrap, you might see unexpected gaps between rows.

The cause: align-content defaults to stretch, which distributes lines evenly to fill the container's height.

The fix:

.flex-container {
  align-content: flex-start;
}

wrap-reverse Explained

wrap-reverse does exactly what it says: wraps in reverse. The cross-start and cross-end directions are swapped. This is useful for:

Bottom-up layouts
Certain animation effects
Right-to-left wrapping

But it's confusing because the visual order doesn't match the DOM order.

Testing Flexbox Wrap Visually

If you want to see how wrap, wrap-reverse, and alignment constraints distribute items without writing code, I built a free CSS Flexbox Wrap Simulator. It runs 100% client-side:

👉 tools.kandz.me/flexbox-wrap

What's your biggest flexbox frustration? Let me know in the comments.

Understanding SVG ViewBox Coordinates

kandz — Sun, 13 Sep 2026 09:44:20 +0000

Debugging SVG viewBox coordinates by hand is a nightmare.

You open an SVG file. You need to know where a specific shape sits. You start counting pixels. You guess. You're wrong. You start over.

Let's fix that.

What is a ViewBox?

The viewBox attribute defines the coordinate system for an SVG. It has four values:

viewBox="min-x min-y width height"

For example, viewBox="0 0 100 100" means the SVG uses a 100x100 coordinate system starting from (0,0).

The Two Coordinate Systems

SVG has two coordinate systems working together:

External size — controlled by width/height attributes or CSS
Internal coordinate system — defined by viewBox

When you set viewBox="0 0 100 100" on an SVG that's 200x200px, the 100x100 user unit area is stretched to fit the 200x200 viewport. Each user unit becomes 2 screen pixels.

Moving the ViewBox

Changing the min-x and min-y values moves the viewBox within the canvas. As one Stack Overflow user explained:

"Conceptualize the viewBox as defining a transparent window in an opaque layer above the SVG canvas. When altering the viewBox attribute, you move the 'window' to the right without affecting the canvas — so your graphics move left relative to the 'window'."

Zooming with ViewBox

The width and height values control zoom. If your viewport is 300px wide but your viewBox width is 600px, you're seeing 600px of canvas squeezed into 300px — that's zooming out.

The preserveAspectRatio Attribute

When the viewBox aspect ratio doesn't match the viewport, preserveAspectRatio controls how the content is scaled and positioned. The default is xMidYMid meet which centers the content and ensures the entire viewBox is visible.

Finding Coordinates in Practice

When you're editing an SVG, you often need to know the exact coordinates of a shape within the viewBox. The <circle> has cx and cy. The <path> has raw coordinate data. The <rect> has x, y, width, and height.

Finding those values manually is tedious. And when transforms are involved, it gets worse.

If you want to visualize viewBox boundaries and extract shape coordinates without guessing, I built a free tool that does exactly this:

👉 tools.kandz.me/svg-viewbox-finder

What's your experience with SVG viewBox? Do you find it intuitive or confusing? Let me know in the comments.

Converting TSV to YAML: A Guide to Reliable Data Serialization

kandz — Wed, 09 Sep 2026 08:41:51 +0000

When working with configuration management systems like Ansible, Kubernetes, or Docker Compose, YAML is the standard. But data often starts in spreadsheets, CSV exports, or tab-separated values (TSV) from databases.

Manually converting TSV to YAML is error-prone. A single misplaced tab, an unescaped colon, or a missing hyphen can break your entire configuration.

In this guide, I'll walk through how to convert TSV data to YAML reliably.

1. Understanding TSV and YAML

TSV (Tab-Separated Values) is a simple file format where each row is a record and columns are separated by tabs. It's commonly exported from Excel, Google Sheets, and SQL databases.

YAML (YAML Ain't Markup Language) is a human-readable data serialization format. It uses indentation to represent hierarchy, making it ideal for configuration files.

The challenge: TSV is flat. YAML is hierarchical. Converting between them requires mapping columns to nested structures.

2. The Parsing Problem

A naive TSV parser splits each line by tabs. But this breaks when data contains:

Empty fields
Values with tabs inside strings
Lines with inconsistent column counts
Quoted strings with embedded separators

The correct approach:

function parseTSV(csvData: string): string[][] {
  const lines = csvData.split('\n');
  const result = [];

  for (const line of lines) {
    if (!line.trim()) continue;
    const row = line.split('\t');
    result.push(row.map(cell => cell.trim()));
  }

  return result;
}

3. Converting TSV to YAML

Once parsed, the transformation is straightforward:

function convertToYAML(tsvData: string): string {
  const rows = parseTSV(tsvData);
  if (rows.length === 0) return '';

  const headers = rows[0];
  const records = rows.slice(1);

  const yamlObj = records.map(row => {
    const obj = {};
    headers.forEach((header, index) => {
      obj[header] = row[index] || '';
    });
    return obj;
  });

  return YAML.stringify(yamlObj);
}

4. Edge Cases to Handle

Issue	Solution
Empty rows	Skip them
Inconsistent columns	Fill missing values with empty strings
Special characters	Escape in YAML
Large datasets	Process in chunks to avoid memory issues

5. Common Use Cases

Kubernetes ConfigMaps – Converting spreadsheet data into ConfigMap YAML
Ansible Inventory – Mapping host data to inventory YAML
Docker Compose – Building compose files from service tables
Database Seed Data – Exporting data to YAML fixtures

6. Client-Side Processing

All parsing and conversion runs locally in your browser. Your data never leaves your device. This is critical when working with:

Configuration files containing secrets
Production database exports
Internal project data

Interactive Tool

If you regularly convert TSV to YAML, I built a free tool that handles all these cases automatically:

👉 TSV to YAML Converter – http://tools.kandz.me/tsv-to-yaml

What's your use case for converting TSV to YAML? Drop it in the comments.

Designing UI Depth: Mastering the Physics of CSS Glassmorphism

kandz — Fri, 04 Sep 2026 07:44:38 +0000

User interface paradigms continuously swing between flat minimalism and layered skeuomorphism. The rise of Glassmorphism — which simulates a translucent, frosted-glass pane floating over high-contrast background vectors — has emerged as a major design trend. When designed correctly, glassmorphism creates a beautiful sense of visual hierarchy, layering, and specular depth.

However, writing production-ready glassmorphic CSS rules is not as simple as lowering element opacity. It requires a precise coordination of background refractions, border reflections, and drop shadow depths.

In this technical guide, we will deconstruct the underlying CSS physics of glassmorphic layers, address critical cross-browser rendering quirks, and look at how to prototype these styles in code.

1. Backdrop Blurring: Filter vs. Backdrop-Filter

The foundational element of glassmorphism is refraction — the bending of light as it passes through glass. In CSS, developers often confuse the standard filter property with backdrop-filter.

/* This is NOT glassmorphism */
.broken-glass-container {
  filter: blur(12px);
  background: rgba(255, 255, 255, 0.2);
}

Why this fails:

The standard filter: blur() property applies graphical filter adjustments directly to the element itself and all of its nested DOM children. This means any paragraph text, headers, or buttons inside the card will also be blurred, rendering your copy completely illegible.

To achieve frosted glass refraction, you must use the modern backdrop-filter property:

/* This is true glassmorphism */
.frosted-glass-card {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari Vendor Prefix */
}

The backdrop-filter property applies the blurring effect strictly to the underlying graphical layers visible behind the element, keeping the overlay content, typography, and interactive buttons razor-sharp.

Cross-Browser Note: Always declare -webkit-backdrop-filter alongside backdrop-filter. iOS Safari and macOS Safari still require the vendor prefix to render backdrop filters correctly.

2. Simulating Specular Reflection with Borders

In physical spaces, glass is bounded by a specular reflection — a subtle, high-contrast gleam of light bouncing off the bevel or edge of the sheet. Without this specular highlight, glassmorphism cards look like flat, semi-opaque boxes with no physical boundaries.

We can simulate this reflection in CSS by adding a thin, semi-transparent border using rgba color stops:

.frosted-glass-card {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  /* Specular Highlight Edge */
  border: 1px solid rgba(255, 255, 255, 0.25);
}

This 1px border establishes a clean, bright, translucent edge that separates the card from busy background graphics, regardless of whether the background is dark or light.

3. The Role of Shadow and Contrast

Glassmorphic elements only look convincing when there is something to distort behind them. If you place a frosted-glass card over a flat, solid-colored background, the backdrop blur has nothing to refract, and the element simply looks like a flat grey or white box.

To make the refraction pop, you must design with contrast:

Place glass cards over bright, high-contrast, multi-colored gradients or organic geometric shapes.
Implement a soft, diffuse box-shadow on the card to create physical elevation:

.frosted-glass-card {
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
}

4. Programmatic RGBA Hex Mapping

When building design tools, allowing users to select solid colors via standard HTML <input type="color"> pickers requires converting those hex values into raw rgba() parameters programmatically in order to map custom opacity sliders.

Here is a type-safe TypeScript implementation that handles the translation of 3-digit and 6-digit hex values securely:

/**
 * Safely converts hexadecimal strings and alpha opacity into compliant RGBA parameters
 * @param hex The raw color string (e.g. "#ffffff" or "#fff")
 * @param alpha The opacity modifier between 0 and 1
 */
function hexToRgba(hex: string, alpha: number): string {
  let clean = hex.trim().replace('#', '');

  // Expand 3-digit hex shorthands (e.g. "fff" -> "ffffff")
  if (clean.length === 3) {
    clean = clean.split('').map((char) => char + char).join('');
  }

  const num = parseInt(clean, 16);
  if (isNaN(num)) {
    return `rgba(255, 255, 255, ${alpha})`; // Safe fallback
  }

  const r = (num >> 16) & 255;
  const g = (num >> 8) & 255;
  const b = num & 255;

  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}

This converter ensures all properties run 100% locally in your browser's private memory sandbox [1]. Since no assets or styles are ever sent to an external server, your local design schemes and configurations remain completely secure [1].

Interactive Playground

If you want to visually adjust backdrop blurs, slide opacities, customize borders, and copy production-ready CSS and HTML across different high-contrast canvas backdrops:

👉 CSS Glassmorphism Card Designer on Kandz.me [1]

What are your thoughts on glassmorphism? Do you find backdrop blurs performant on mobile web rendering engines? Let's discuss in the comments!

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