DEV Community: kandz

CSS Box Shadow Layers: How to Create Realistic Depth

kandz — Thu, 08 Oct 2026 05:48:45 +0000

One box-shadow is easy. Layering multiple shadows to create real depth? That's where it gets messy.

A single shadow looks flat and artificial. Real-world shadows have multiple penumbras — closer to the object, darker and sharper; further away, softer and lighter.

In this guide, we'll break down how to stack shadows properly, why layering works, and the gotchas that trip most developers up.

The Basic Syntax

box-shadow: offset-x offset-y blur spread color;

Value	Purpose
`offset-x`	Horizontal shift
`offset-y`	Vertical shift
`blur`	Softness of the shadow
`spread`	Expands or shrinks the shadow
`color`	Shadow color (use rgba for opacity)

A simple example:

.card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

This creates a subtle elevation effect.

Layering Multiple Shadows

The real power comes from stacking shadows. Separate each layer with a comma:

.card {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.07),
    0 2px 4px rgba(0, 0, 0, 0.07),
    0 4px 8px rgba(0, 0, 0, 0.07),
    0 8px 16px rgba(0, 0, 0, 0.07);
}

Each layer adds depth. The cumulative effect looks like real elevation.

Why Layering Works

Real-world shadows aren't a single blur. They're a gradient of penumbras.

By stacking shadows with increasing blur and offset, you simulate physical behavior. The result is smooth, realistic, and professional.

Inset Shadows

Add inset to place the shadow inside the element:

.pressed {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

Useful for:

Input fields
Pressed buttons
Neumorphic designs

Common Gotchas

Issue	Fix
Too harsh	Use rgba with low opacity
Clips at edges	Set `overflow: visible` on parent
Performance	Reduce blur and layers on mobile
Dark mode	Use dark rgba, not pure black

Performance Considerations

Layered shadows can impact rendering performance, especially on mobile devices. Keep these in mind:

Limit layers — 3-4 shadows is usually enough
Reduce blur radius on mobile
Avoid animating shadows — expensive repaints
Use will-change: box-shadow sparingly

Prototyping Visually

Writing layered shadows by hand is tedious. You guess values, reload, adjust, repeat.

I built a free CSS Box Shadow Layers Designer that lets you stack shadows visually and copy the CSS instantly.

👉 tools.kandz.me/box-shadow-layers

100% client-side. Nothing uploaded.

What's your approach to elevation shadows? Do you layer them or use a single shadow? Let me know in the comments.

CSS Clip-Path: Cropping Images to Any Shape

kandz — Thu, 01 Oct 2026 06:26:15 +0000

CSS clip-path is one of the most underused properties in modern web design. It lets you crop any element — images, divs, text — into circles, polygons, ellipses, or fully custom shapes without touching the original asset.

The problem? Writing polygon coordinates by hand is tedious. You guess each point. You reload. You adjust. You guess again.

In this guide, we'll break down how clip-path works, the different shape functions, and how to prototype shapes without losing your mind.

What is clip-path?

clip-path creates a clipping region. Anything inside the region is visible. Anything outside is hidden.

.clipped {
  clip-path: circle(50% at 50% 50%);
}

The element stays the same size. The image data stays intact. Only the visible area changes.

The Four Shape Functions

1. `circle()`

Creates a circular clip.

.circle {
  clip-path: circle(50% at 50% 50%);
}

50% — the radius
at 50% 50% — the center point

You can also use absolute units:

.circle {
  clip-path: circle(100px at center);
}

2. `ellipse()`

Creates an oval clip.

.ellipse {
  clip-path: ellipse(40% 60% at 50% 50%);
}

The two values are the horizontal and vertical radii.

3. `inset()`

Creates a rectangular clip with optional rounded corners.

.inset {
  clip-path: inset(10% 20% 10% 20% round 20px);
}

Order: top, right, bottom, left. The round keyword adds border-radius to the clip.

4. `polygon()`

The most powerful option. You define every vertex.

.triangle {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

Each pair of values is an x/y coordinate. The shape is drawn by connecting them in order.

Real-World Use Cases

Use Case	Shape
Circular avatars	`circle(50%)`
Hexagonal cards	`polygon()` with 6 points
Diagonal section dividers	`polygon()` with 4 points
Custom image masks	Any polygon
Star ratings	`polygon()` with 10 points

The Hard Part: Polygon Coordinates

A simple triangle is easy. A hexagon is manageable. A 12-point star? You're guessing.

The typical workflow looks like this:

Write polygon coordinates
Save
Reload browser
Realize one point is off
Adjust
Reload
Repeat

This is slow, frustrating, and error-prone.

Animating Clip-Path

clip-path is animatable. You can transition between shapes:

.card {
  clip-path: circle(30% at 50% 50%);
  transition: clip-path 0.5s ease;
}

.card:hover {
  clip-path: circle(70% at 50% 50%);
}

The browser interpolates between the two shapes — but only if both use the same function and the same number of points.

Common gotcha: You can't animate from circle() to polygon(). They must match.

Browser Support

clip-path is widely supported in modern browsers. polygon(), circle(), and ellipse() work in Chrome, Firefox, Safari, and Edge.

Older browsers may need the -webkit- prefix:

.clipped {
  -webkit-clip-path: circle(50%);
  clip-path: circle(50%);
}

Prototyping Visually

If you're building shapes regularly, writing coordinates by hand doesn't scale. You need a visual editor that:

Shows the image with draggable handles
Updates the clip-path live
Exports clean CSS

I built a free CSS Clip-Path Image Cropper that does exactly this. Load an image, drag points, choose between polygon/circle/ellipse, and copy the CSS.

👉 https://tools.kandz.me/clip-path-cropper

100% client-side. Nothing uploaded.

What's your experience with clip-path? Do you use it for simple shapes or complex masks? Let me know in the comments.

How to Filter CSV Columns Without Writing Code

kandz — Thu, 24 Sep 2026 08:33:54 +0000

CSV files are everywhere. Export from a database, download from a dashboard, grab from an API — it's always CSV.

The problem: most CSV files have more columns than you need.

You open it in Excel. You scroll. You select columns. You delete. You reorder. You export. Every single time.

Let's fix that.

Understanding CSV Structure

A CSV file is plain text. Each line is a row. Commas separate columns.

name,age,city,salary
John,28,NYC,50000
Jane,32,LA,62000

The first row is the header — it tells you what each column represents. Everything after is data.

The Manual Way (Don't Do This)

Open CSV in spreadsheet app
Find the columns you want
Delete the ones you don't
Reorder if needed
Export
Repeat next time

This works once. It's painful at scale.

The Code Way

Python with pandas:

import pandas as pd

df = pd.read_csv('data.csv')
filtered = df[['name', 'salary']]
filtered.to_csv('filtered.csv', index=False)

JavaScript with PapaParse:

import Papa from 'papaparse';

const result = Papa.parse(csvText, { header: true });
const filtered = result.data.map(row => ({
  name: row.name,
  salary: row.salary
}));

Both work. Both require setup.

The No-Code Way

I built a free CSV Column Filter that runs entirely in your browser.

What it does:

Load any CSV file
See all columns
Select, deselect, and reorder visually
Export clean CSV instantly

Why it's useful:

No installation
No upload (100% client-side)
Works with any CSV
Fast

Common Gotchas

Issue	Fix
Column names with spaces	Quote them
Empty cells	Watch for column shift
Line endings	Handle `\r\n` vs `\n`
BOM at start	Strip it before parsing

Try It

https://tools.kandz.me/csv-column-filter

What's your CSV workflow? Do you filter columns often? Let me know in the comments.

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:

👉 https://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:

👉 https://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

DEV Community: kandz

CSS Box Shadow Layers: How to Create Realistic Depth

The Basic Syntax

Layering Multiple Shadows

Why Layering Works

Inset Shadows

Common Gotchas

Performance Considerations

Prototyping Visually

CSS Clip-Path: Cropping Images to Any Shape

What is clip-path?

The Four Shape Functions

1. circle()

2. ellipse()

3. inset()

4. polygon()

Real-World Use Cases

The Hard Part: Polygon Coordinates

Animating Clip-Path

Browser Support

Prototyping Visually

How to Filter CSV Columns Without Writing Code

Understanding CSV Structure

The Manual Way (Don't Do This)

The Code Way

The No-Code Way

Common Gotchas

Try It

Understanding CSS Flexbox Wrap

What flex-wrap Does

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

The align-content Trap

wrap-reverse Explained

Testing Flexbox Wrap Visually

Understanding SVG ViewBox Coordinates

What is a ViewBox?

The Two Coordinate Systems

Moving the ViewBox

Zooming with ViewBox

The preserveAspectRatio Attribute

Finding Coordinates in Practice

Converting TSV to YAML: A Guide to Reliable Data Serialization

1. Understanding TSV and YAML

2. The Parsing Problem

3. Converting TSV to YAML

4. Edge Cases to Handle

5. Common Use Cases

6. Client-Side Processing

Interactive Tool

Designing UI Depth: Mastering the Physics of CSS Glassmorphism

1. Backdrop Blurring: Filter vs. Backdrop-Filter

Why this fails:

2. Simulating Specular Reflection with Borders

3. The Role of Shadow and Contrast

4. Programmatic RGBA Hex Mapping

Interactive Playground

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

1. The Fallacy of Shallow Merging

Why did this fail?

2. The Mechanics of a Recursive Deep Merge Algorithm

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

Why this structure is secure:

Interactive Playground

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

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

Anti-Pattern A: Missing Safety Headers

Anti-Pattern B: Unquoted Variables and Word Splitting

2. Establishing a Strict Safety Standard

Deconstructing the Safe Header Flags:

3. Auditing Variables and Parameters in TypeScript

Interactive Playground

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

1. The Power of Declarative Named Grid Areas

Key Architectural Benefits:

2. Responsive UI Design via Simple Media Queries

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

Interactive Playground

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

1. The Mathematics of Cyclomatic Complexity

2. Scanning Maximum Nesting Depth

1. `circle()`

2. `ellipse()`

3. `inset()`

4. `polygon()`