DEV Community: kandz

A Complete Free Angular Curriculum — 132 Chapters, From CLI to Zoneless Change Detection

kandz — Thu, 05 Nov 2026 18:31:01 +0000

Angular is a full framework—routing, forms, HTTP, dependency injection, and a build system all included. That's also why it's hard to learn: most tutorials only cover a slice.

I found a curriculum that covers the whole thing. 132 chapters, split into a clear progression.

It's on KandZ Tuts, and here's what's inside.

Foundations (1–18)

Introduction, environment setup, Angular CLI basics, project structure, components, templates and interpolation, the three binding directions, structural directives (*ngIf, *ngFor, *ngSwitch), the modern block syntax (@if, @for, @switch, @let), attribute directives, built-in pipes, custom pipes, component communication with @Input/@Output, the modern input(), output(), model() functions, lifecycle hooks, advanced lifecycle hooks, and view encapsulation.

Services, DI, and Routing (19–28)

Services and basic dependency injection, DI decorators and provider scopes, the inject() function, routing basics, route and query parameters, nested routes, lazy loading, route guards, resolvers, and route-level data with component input binding.

Forms and HTTP (29–38)

Reactive forms, FormArray and dynamic controls, template-driven forms, validation and custom validators, advanced dynamic and nested forms, custom form controls, HttpClient, interceptors, error handling, and logging/observability.

RxJS (39–46)

Observables, transformation and filtering operators, higher-order mapping operators (switchMap, mergeMap, concatMap), subjects and BehaviorSubject/ReplaySubject, combining streams, error handling in RxJS, multicasting and sharing, and advanced state patterns.

Signals (47–53)

Reactive primitives, computed signals, effects and side effects, signal-based components, signal interop with RxJS, advanced signal patterns, and the resource() and httpResource() APIs.

Advanced DI and Standalone (54–61)

DI in depth, providers and injection tokens, hierarchical injectors, provider recipes, advanced injection scopes, standalone components, standalone directives and pipes, and bootstrapping without NgModule.

Change Detection (62–65)

Default and OnPush, signals and manual control, Zone.js internals, and zoneless Angular.

Templates and Components (66–74)

Animations, advanced animations and route transitions, dynamic components, content projection, ViewChild/ViewChildren/ContentChild, HostBinding/HostListener, custom directives in depth, custom pipes in depth, and deferrable views with @defer.

SSR and Routing (75–80)

Angular Universal, hydration and SSR best practices, prerendering and SSG, router internals, advanced router features, and authentication/route protection.

State Management (81–85)

Services, NgRx, NgRx Effects and Entity, Component Store, and Signal Store.

UI and Platform (86–94)

i18n, i18n in depth, accessibility, Angular Material components and theming, Angular CDK, Web Components, PWAs, and service workers/offline support.

Performance (95–99)

Rendering and change detection, bundles and loading, lazy loading strategies, tree shaking and bundle analysis, and image/font optimization with NgOptimizedImage.

Testing and Tooling (100–110)

Jasmine/Karma unit tests, component and service tests, TestBed and DI, async and signal testing, Playwright E2E, Cypress E2E, Angular DevTools, debugging, Angular Language Service and IDE setup, environment configuration, and build optimizations and budgets.

Deployment and Architecture (111–122)

Static and SSR deployment, CI/CD and caching, monorepos with Nx, libraries and workspaces, micro-frontends, Angular Elements, security, OAuth/JWT, GraphQL, WebSockets, serverless, and AI integrations.

Internals and Migration (123–132)

The compiler and Ivy, schematics and custom generators, builders and custom CLI commands, migrating from AngularJS, migrating between Angular versions, migrating to the new control flow, upgrading legacy applications, real-world architecture patterns, a full capstone application, and a cheatsheet.

Why It's Worth Your Time

It teaches old and new side by side. You get *ngIf and @if, @Input and input(), NgModule and standalone. You learn what's current and what it replaced.
Signals and zoneless are treated as first-class. Chapters 47–53 and 65 cover the reactivity model Angular is actively moving toward.
It goes past application code. Ivy internals, schematics, custom CLI builders, and migration paths—the material usually found only in source code and conference talks.

Who Should Read It

Beginners: Start at Chapter 1 and read in order.
Experienced Angular devs: Use the table of contents as an audit. Jump to signals (47), zoneless (65), or httpResource (53) if those are gaps.

Link

Angular — KandZ Tuts

Free, no signup, 132 chapters.

If Angular felt too large to learn properly, this is the resource that makes the size manageable.

What Angular topics do you wish had better tutorials? Let me know in the comments.

How to Make Iframes Responsive, Secure, and Fast

kandz — Thu, 05 Nov 2026 08:44:19 +0000

Embedding iframes is easy. Making them responsive, secure, and performant is hard.

You forget sandbox attributes. The aspect ratio breaks on mobile. It slows down your page load because it loads immediately.

Let's look at how to fix all three issues.

1. The Responsive Problem

By default, iframes use fixed widths and heights, which break on mobile devices.

The Modern Method: aspect-ratio

If you only need to support modern browsers, this is the cleanest and easiest method. You can use the CSS aspect-ratio property directly on the iframe.

.responsive-iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
}

The browser automatically calculates the correct height based on the width and the ratio.

The Legacy Method: Padding-Bottom Wrapper

Before aspect-ratio existed, developers used a clever CSS trick involving absolute positioning and percentage padding.

<div class="iframe-container">
  <iframe src="..." allowfullscreen></iframe>
</div>

.iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

To calculate the percentage: 9 divided by 16 equals 0.5625, or 56.25%.

2. The Security Problem

Iframes can be a major security risk. An iframe from an untrusted source can run scripts, redirect the top-level page, or access cookies.

The sandbox attribute restricts what the iframe can do. By default, it applies all restrictions. You can then selectively allow specific behaviors.

<iframe 
  src="https://example.com" 
  sandbox="allow-scripts allow-same-origin"
></iframe>

Never add allow-scripts and allow-same-origin together if the iframe is from a different domain—it allows the iframe to remove its own sandbox attribute.

3. The Performance Problem

If you have an iframe far down the page (like a map or an embedded video), you don't want it to load until the user scrolls to it.

The loading="lazy" attribute tells the browser to defer loading the iframe until it's near the viewport.

<iframe 
  src="https://example.com" 
  loading="lazy" 
  sandbox="allow-scripts"
></iframe>

This saves bandwidth and speeds up the initial page load.

Common Gotchas

allowfullscreen: If you are embedding a video, you must include allowfullscreen for the video player's fullscreen button to work.
Borders: By default, iframes have an ugly 3D border. Always add border: none; (or frameBorder="0").
Missing title: For accessibility, every iframe must have a title attribute explaining its content.

Prototyping Visually

Writing the responsive wrapper markup, calculating the aspect ratio percentages, and configuring the correct sandbox permissions by hand is tedious and easy to get wrong.

If you want to configure and embed responsive, secure iframes with sandbox permissions, lazy loading, and aspect ratio wrappers, I built a free HTML Iframe Code Builder.

Try it here

100% client-side. Nothing uploaded.

What's the hardest part of working with iframes for you? Let me know in the comments.

A Complete Free TypeScript Curriculum — 107 Chapters, From Basics to Compiler Internals

kandz — Wed, 04 Nov 2026 18:43:56 +0000

I've been looking for a TypeScript resource that doesn't stop halfway.

Most either cover the basics and quit, or assume you already know what a conditional type is. I found one that covers the full arc, and I wanted to share it.

It's on KandZ Tuts, and it's structured as 106 chapters plus a cheatsheet, split into five sections.

What's Inside

Foundations (1–18): Setup, CLI, tsconfig.json, primitives, arrays/tuples/enums, unions/intersections, aliases vs interfaces, functions and overloads, object types, inference, literal types, assertions, control flow narrowing, typeof/instanceof/in guards, user-defined predicates, discriminated unions, exhaustiveness checking, and unknown/any/never.

Intermediate (19–54): Classes, access modifiers, abstract classes, inheritance, getters/setters, static members, generics (functions, classes, interfaces, constraints, defaults), keyof/typeof/indexed access, mapped types, conditional types, infer, template literal types, the full utility-type toolkit (chapters 34–37), type composition, variance, structural vs nominal typing, covariance/contravariance/bivariance, branded types, recursive types, distributive conditional types, higher-kinded type patterns, type-level programming, and type-safe patterns (builders, fluent interfaces, immutability, event emitters, DI, state machines, API clients, Zod/io-ts validation).

Modules & Async (55–70): import/export, module resolution, path mapping, namespaces and declaration merging, .d.ts files, ambient declarations, publishing typed packages, @types and DefinitelyTyped, Promises and async/await typing, callbacks, event handlers and DOM, Node.js APIs, third-party libraries without types, error handling, Result/Either patterns, and typing JSON/unknown data.

Tooling & Advanced (71–87): Strict mode flags, compiler options in depth, project references, incremental builds, type-only imports/exports, isolatedModules and verbatimModuleSyntax, legacy and Stage 3 decorators, decorators in Angular and NestJS, mixins, the this type, function overloads in depth, assertion functions, the satisfies operator, const type parameters, and the using keyword with Disposable.

Integrations & Capstone (88–107): React, Vue, Angular, Node/Express, Deno/Bun, Jest/Vitest, ESLint/Prettier, bundlers (Vite, esbuild, webpack), migrating JS to TS, migrating between TS versions, compiler internals, custom transformers, LSP and editor integration, type-checking performance at scale, monorepos, publishing libraries, style guide, architecture patterns, a full type-safe capstone application, and a cheatsheet.

Why It's Worth Your Time

Three reasons:

The ordering is deliberate. Narrowing and type guards come before conditional types. Utility types get four chapters, not one table. You build the mental model before the advanced material.
It doesn't skip the tooling. Chapters 88–95 cover the framework and bundler integrations that most TypeScript tutorials ignore. If you've ever fought tsconfig.json in a monorepo, this is covered.
It goes past application code. Compiler internals, custom transformers, and the Language Server Protocol are the topics you usually only find in conference talks.

Who Should Read It

Beginners: Start at Chapter 1 and go in order. Don't skip.
Experienced developers: Use the table of contents as a checklist. Jump to variance (39), satisfies (85), or using (87) if those are gaps.

Link

TypeScript — KandZ Tuts

Free, no signup, no paywall.

If you've been meaning to learn TypeScript properly, or if you've been using it for years and know there are holes, this is the most complete free curriculum I've found.

What TypeScript topics do you wish had better tutorials? Let me know in the comments.

How to Format Git Log Output (And Stop Googling the Commands)

kandz — Wed, 04 Nov 2026 08:41:04 +0000

Git log is powerful, but the syntax is impossible to remember.

You want a clean graph, a custom date format, or a search by author—and you end up Googling it for the tenth time.

Let's look at how to get exactly what you want from your Git history.

The Shortest Possible Output

If you just want the author and date, you need to use the --format flag.

git log --format="%an %ad" --date=short

Let's break down what those flags do:

--format="%an %ad": %an is the author's name, and %ad is the author's date.
--date=short: This formats the date as YYYY-MM-DD.

Output:

Alice 2023-10-24
Bob 2023-10-23

Adding the Commit Hash

If you need the short commit hash for reference, add %h:

git log --format="%h %an %ad" --date=short

Output:

a1b2c3d Alice 2023-10-24
e4f5g6h Bob 2023-10-23

The `--oneline` Shortcut (And Its Limits)

Git has a built-in shortcut for a compact format:

git log --oneline

However, --oneline only includes the short hash and the commit message. It does not include the author or date. For that, you have to use the custom --format string above.

Visualizing the Graph

To see the branching history of your commits, add the --graph flag:

git log --graph --oneline --all

If you want to combine this with custom formatting, you can do it all in one command:

git log --graph --format="%h %an %ad %s" --date=short

Common Gotchas

Timezone: %ad uses the author's timezone. If you want a consistent timezone, use %cd (committer date) and set the TZ environment variable.
Long names: If a user has a long name, the output alignment can break. You can't easily truncate strings in the format flag without some complex string manipulation.

Building Complex Log Commands

While --format="%an %ad" is easy to remember, things get complicated when you want to add graph visualizers (--graph), filter by date (--since), or search by author (--author).

If you want to configure advanced Git log formatting interactively without memorizing all the flags, I built a free Git Log Commands Generator.

Try it here

100% client-side. Nothing uploaded.

What's your most-used git log command? Let me know in the comments.

React & Modern UI Stack

kandz — Tue, 03 Nov 2026 11:31:28 +0000

Intro

The React & Modern UI Stack path covers the essential frontend ecosystem and modern tooling roadmap, built directly on top of the Core Web Stack foundation.

Tutorials

00. Core Web Stack Path ✅
- Internet Beginner: ✅ Start Now — Learn how the web works, client-server architecture, and HTTP request-response cycles.
- HTML: ✅ Start Now — Master semantic markup, document structure, and web form fundamentals.
- CSS: ✅ Start Now — Build responsive layouts using modern styling, Flexbox, and CSS Grid.
- JavaScript: ✅ Start Now — Learn core programming concepts, DOM manipulation, asynchronous execution, and ES6+ features.
- Rest API: ✅ Start Now — Design and consume scalable web services using HTTP standards and JSON.
- Version Control ✅
  - Git: Start Now — Track changes, manage branches, handle merge conflicts, and maintain local project history.
- VCS Hosting ✅
  - GitHub: ✅ Start Now — Host repositories, collaborate using Pull Requests, and automate workflows.
  - GitLab: ✅ Start Now — Manage projects, maintain codebases, and run integrated CI/CD pipelines.
- Package Managers ✅
  - npm: ✅ Start Now — Manage project dependencies, automate tasks with scripts, and publish packages.
  - Yarn: ✅ Start Now — Speed up package installations and manage locks efficiently.
  - pnpm: ✅ Start Now — Save disk space using a content-addressable store and strict dependency trees.
  - Bun: ✅ Start Now — Run TypeScript applications natively with an ultra-fast package manager and runtime.
01. TypeScript ✅: Start Now — Learn strongly typed JavaScript, interfaces, generics, and compiler configurations for scalable applications.
02. React ✅: Start Now — Master components, hooks, state management, and the virtual DOM.
03. Routing ✅
- React Router ✅: Start Now — The industry standard for declarative routing in React applications.
- TanStack Router ✅: Start Now — A modern, fully type-safe router with built-in data fetching capabilities.
04. Tailwind CSS ✅: Start Now — Build responsive, modern UIs quickly using a utility-first CSS framework.
05. State Management & Data Fetching ✅
- TanStack Query (React Query) ✅: Start Now — Manage server state, caching, synchronization, and data fetching with ease.
- Zustand ✅: Start Now — A small, fast, and scalable bearbones state-management solution for client state.
- Redux Toolkit ✅: Start Now — The recommended approach for writing Redux logic in larger, complex legacy applications.
06. Frameworks & SSR
- Next.js (App Router): Coming Soon — Build SEO-friendly, performant applications with server-side rendering (SSR) and static site generation (SSG).
- React Server Components (RSC): Coming Soon — Understand the new React architecture that enables rendering on the server and reduces bundle sizes.
07. Module Bundlers
- Vite: Coming Soon — Utilize an ultra-fast frontend build tool and dev server for a modern developer experience.
- esbuild: Coming Soon — Understand the extremely fast JavaScript bundler that powers Vite.
- Parcel: Coming Soon — A zero-configuration bundler focused on simplicity and developer ease.
08. Linters and Formatters
- Prettier: Coming Soon — Maintain a consistent, opinionated code format across your entire project.
- Eslint: Coming Soon — Find and fix problems in your JavaScript code based on custom rules.
- Biome: Coming Soon — An all-in-one ultra-fast formatter and linter tool aimed at replacing both Prettier and Eslint.
09. Forms & Validation
- React Hook Form: Coming Soon — Perform efficient form state management and validation with minimal re-renders.
- Zod: Coming Soon — A TypeScript-first schema declaration and validation library for parsing and validating data structures.
10. Testing
- Vitest: Coming Soon — A blazing-fast unit test framework compatible with Vite, aimed at replacing Jest.
- Playwright: Coming Soon — A comprehensive tool for reliable, cross-browser End-to-End (E2E) testing.
- Cypress: Coming Soon — A powerful E2E test runner that runs in the browser for a visual testing experience.
- Jest: Coming Soon — The traditional, widely-used test runner (consider Vitest for newer projects).
11. Web Security: Coming Soon — Learn essential security practices for frontend applications, including Cross-Site Scripting (XSS) prevention, Content Security Policy (CSP) implementation, and secure authentication handling.
12. Deployment
- GitHub Pages: Coming Soon — The simplest way to deploy static websites directly from a GitHub repository.
- Vercel: Coming Soon — The optimal platform for deploying Next.js applications, providing an excellent developer workflow and serverless functions.
- Netlify: Coming Soon — A modern cloud platform with continuous deployment and serverless capabilities for static and Jamstack sites.
- Cloudflare: Coming Soon — Utilize Cloudflare Pages for lightning-fast static and dynamic web deployments on a massive global edge network, perfect for modern frameworks.

How to Build a CSS Dropdown Menu That Doesn't Push Content Down

kandz — Tue, 03 Nov 2026 09:20:14 +0000

Building CSS dropdown menus is a classic struggle.

Hover states get stuck. Keyboard navigation breaks. Accessibility is forgotten. And if you don't position it right, the menu pushes all your page content down when it opens.

Let's fix the layout and the accessibility.

The Layout Problem

If your dropdown menu is in the normal document flow, making it visible (display: block) will expand the container's height. This pushes everything below it down.

To fix this, you need to take the dropdown out of the document flow using position: absolute.

/* The parent container must be relative */
.dropdown {
  position: relative;
  display: inline-block;
}

/* The menu is absolute and hidden by default */
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%; /* Positions it right below the parent */
  left: 0;
  z-index: 100; /* Ensures it sits on top of other elements */
  background-color: white;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

Because the dropdown is absolute, the browser ignores its space when calculating the layout of the rest of the page.

The Accessibility Problem

Using display: none and display: block on :hover works for mice, but it breaks for keyboard users and screen readers.

If a keyboard user tabs into the menu, the dropdown won't appear because they aren't hovering.

The Fix: :focus-within

Instead of just :hover, you should trigger the menu when the parent or any child receives focus.

.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
  display: block;
}

This ensures the menu stays open when a user tabs through the links.

Better yet: opacity and visibility

Using display: none means CSS transitions won't work (elements can't transition from display: none to display: block). It also removes the content from the accessibility tree entirely.

A smoother, more accessible approach is to toggle visibility and opacity:

.dropdown-content {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s, visibility 0.2s;
}

.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
  visibility: visible;
  opacity: 1;
}

Common Gotchas

Z-Index: Dropdowns often appear behind other elements. Ensure the parent has a high enough z-index.
Hover Gaps: If there's a gap between the button and the menu, moving the mouse across the gap will close the menu. Add a transparent padding to bridge the gap.
Mobile: Hover doesn't exist on touch devices. You need a click-based JavaScript toggle for mobile menus.

The Visual Way

Writing multi-level CSS dropdowns, handling focus states, and ensuring accessibility is complex.

If you want to design, test, and export accessible multi-level CSS dropdown navigation menus visually, I built a free CSS Dropdown Menu Builder.

What it does:

Visually designs multi-level dropdowns
Handles hover and focus triggers
Exports accessible CSS

Try it here

100% client-side. Nothing uploaded.

What's the hardest part of building navigation menus for you? Let me know in the comments.

How to Convert TSV Data into TOML Configuration Files

kandz — Mon, 02 Nov 2026 08:40:46 +0000

Converting TSV spreadsheet data into a TOML config file by hand is a headache.

One wrong bracket and the whole file breaks. You forget a quote. The parser fails. You spend twenty minutes hunting for a missing ].

Let's look at why TOML is useful and how to convert your tabular data into it safely.

Why TOML?

TOML (Tom's Obvious, Minimal Language) is a configuration file format designed to be easy to read and write. It's heavily used in modern development:

Rust: Cargo.toml
Python: pyproject.toml
Hugo: Site configuration
Netlify: netlify.toml

Unlike JSON, TOML supports comments and is much easier for humans to read and edit manually.

The TSV to TOML Problem

TSV (Tab-Separated Values) is flat. It's just rows and columns. TOML is hierarchical. It has sections (tables) and key-value pairs.

If your TSV looks like this:

name    version description
my-app  1.0.0   A cool tool

You need to convert it to this:

[package]
name = "my-app"
version = "1.0.0"
description = "A cool tool"

Doing this manually means carefully typing brackets, adding quotes around strings, and ensuring the data types are correct. If you have 100 rows, it's a nightmare.

The Code Way (JavaScript)

If you're writing a script, you can parse the TSV and build a TOML string.

function tsvToToml(tsvString) {
  const lines = tsvString.trim().split('\n');
  const headers = lines[0].split('\t');
  const values = lines[1].split('\t');

  let toml = '[config]\n';

  headers.forEach((header, index) => {
    // Add quotes around string values
    toml += `${header} = "${values[index]}"\n`;
  });

  return toml;
}

This handles basic key-value pairs. But if your TSV represents nested data (e.g., multiple [tables]), the logic gets much more complex.

Common Gotchas

Data Types: TOML is strict about types. Strings need quotes ("value"), integers don't (123), and booleans are lowercase (true).
Special Characters: If your TSV data contains double quotes, you have to escape them in TOML (\").
Nested Tables: TOML uses [table.subtable] syntax. Flat TSV data doesn't easily map to this without custom logic.

The Visual Way

If you just need to convert a spreadsheet into a TOML config file without writing a custom script, I built a free TSV to TOML Converter.

What it does:

Converts TSV data into structured TOML
Handles nested configurations automatically
Outputs clean, human-readable format

Why it's useful:

No installation
No upload (100% client-side)
Saves you from typing brackets and quotes
Fast

Try It

TSV to TOML Converter

100% client-side. Nothing uploaded.

What's your preferred configuration format? Do you use TOML, YAML, or JSON? Let me know in the comments.

How to Replace Values in a JSON Array (Without Breaking It)

kandz — Sun, 01 Nov 2026 10:13:18 +0000

Replacing values in a JSON array depends on whether you know the exact index of the item or if you need to search for it based on a property.

Doing it wrong can mutate your original data or break the structure entirely. Let's look at the right way to do it.

1. Replacing by Index

If you know exactly which item in the array you want to change, you can target it directly by its index.

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" }
];

// Replace the second item entirely
users[1] = { id: 2, name: "Robert" };

2. Replacing a Property in an Object (using `map`)

If you want to keep the array structure but update a specific property across all items, use map(). This creates a new array, which is best practice if you want to avoid mutating the original data.

const updatedUsers = users.map(user => {
  if (user.id === 2) {
    return { ...user, name: "Robert" };
  }
  return user;
});

3. Finding and Replacing in Deeply Nested Arrays

If your JSON has arrays inside objects inside arrays, a simple .map() won't be enough. You need a recursive function to traverse the entire structure and replace the value wherever it's found.

function replaceDeep(obj, target, replacement) {
  if (Array.isArray(obj)) {
    return obj.map(item => replaceDeep(item, target, replacement));
  } else if (obj !== null && typeof obj === 'object') {
    const newObj = {};
    for (const key in obj) {
      newObj[key] = replaceDeep(obj[key], target, replacement);
    }
    return newObj;
  }

  // If the current value matches the target, replace it
  return obj === target ? replacement : obj;
}

Common Gotchas

Reference vs Value: If you are replacing objects, make sure you are creating a new object ({ ...obj }) rather than just modifying the reference, or you might accidentally mutate the original JSON.
Regex vs String: Simple .replace() only replaces the first match in a string. If you want to replace all occurrences, you need a global regex (/target/g).
Null values: Remember that typeof null === 'object', so you must check for obj !== null before recursing.

The Visual Way

Writing recursive scripts is fine for code, but if you just need to replace a specific value or pattern across a massive JSON payload once, writing a script is overkill.

If you want to find and batch replace targeted values, patterns, or data types across nested JSON visually, I built a free JSON Value Replacer.

Try it here

100% client-side. Nothing uploaded.

Have you ever accidentally mutated a JSON object and spent hours debugging it? Let me know in the comments.

How to Plot Data Using SVG on the Web

kandz — Sat, 31 Oct 2026 08:45:39 +0000

The "best" way to plot data using SVG depends on how much data you have and how much control you want over the visuals.

There are three main approaches, ranging from pure code to powerful libraries. Let's look at them.

1. D3.js (Maximum Control)

D3 is the industry standard for custom data visualization on the web. It doesn't render the chart for you; instead, it binds your data to the DOM and gives you helper functions to map values to SVG coordinates.

You use d3.line() to convert an array of data points into the d attribute of an SVG <path>.

const line = d3.line()
  .x(d => xScale(d.date))
  .y(d => yScale(d.value));

svg.append("path")
  .datum(data)
  .attr("d", line)
  .attr("stroke", "blue")
  .attr("fill", "none");

Best for: Highly customized, complex, or interactive visualizations.

2. Charting Libraries (Speed)

If you don't want to build axes, tooltips, and legends from scratch, use a library that outputs SVG.

Chart.js: Easy to use, great for standard charts (line, bar, pie).
Recharts (React): Built on top of D3, but uses React components so it fits perfectly into React apps.
ApexCharts: Great for interactive, modern-looking dashboards.

Best for: Standard dashboards where you need to move fast.

3. Vanilla SVG + JavaScript (For simple shapes)

If you just need to draw a simple line or a few polygons, you don't need a library. You can manipulate the SVG DOM directly.

const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
line.setAttribute("x1", "10");
line.setAttribute("y1", "10");
line.setAttribute("x2", "100");
line.setAttribute("y2", "100");
line.setAttribute("stroke", "black");
svg.appendChild(line);

Best for: Simple icons, static diagrams, or minimal custom graphics.

The Manual Coordinate Problem

Even if you use a library, you often need to hand-code specific SVG shapes (like custom polylines or annotations).

Calculating exact x and y coordinates for a polyline by hand is tedious. You write numbers, reload the browser, realize the line is off by 10 pixels, and repeat.

If you need to visually plot, adjust, and inspect SVG line or polyline vector coordinates with real-time markup export, I built a free SVG Line Coordinates Editor.

Try it here

100% client-side. Nothing uploaded.

What's your preferred library for data visualization? Let me know in the comments.

How to Add a Border in CSS Without Changing Element Size

kandz — Fri, 30 Oct 2026 08:34:05 +0000

Using CSS border is the standard way to outline an element. But it has a side effect that breaks layouts: borders add to the element's total width and height.

If you have a 100px wide div and add a 5px border, it suddenly becomes 110px wide. In a tight grid or flexbox layout, this causes elements to overflow or wrap unexpectedly.

You can fix this globally by setting box-sizing: border-box, but sometimes you need a border that doesn't take up any space at all, or you want multiple borders on a single element.

The solution is to use box-shadow.

The Problem with Borders

Here is a standard box:

.box {
  width: 100px;
  height: 100px;
  border: 2px solid blue;
}

Total width: 104px. Total height: 104px.

If you're positioning this element absolutely, or fitting it into a strict grid, those extra 4 pixels matter.

The Solution: Hard Box Shadows

A box-shadow is normally used for fuzzy drop shadows, but if you set the blur and spread values correctly, it acts as a solid border.

.shadow-border {
  width: 100px;
  height: 100px;
  /* x-offset | y-offset | blur | spread | color */
  box-shadow: 0 0 0 2px blue;
}

Total width: 100px. Total height: 100px.

Because shadows are drawn outside the box model and don't affect layout, the element's dimensions remain exactly 100x100.

The Inset Shadow

You can also use box-shadow to draw inside the element. Add the inset keyword.

.inner-shadow {
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.15);
}

This creates a recessed, "pushed-in" look, useful for input fields or pressed buttons.

Layering Multiple Borders

The real power of box-shadow is that it accepts a comma-separated list. You can stack multiple borders on a single element.

.multi-border {
  box-shadow: 
    0 0 0 2px blue,
    0 0 0 4px red,
    0 0 0 6px green;
}

This creates three distinct borders without adding a single wrapper div.

Common Gotchas

Border Radius: Box shadows follow the border-radius of the element. If your element is round, your shadow borders will be round.
Clipping: If the parent container has overflow: hidden, the outer shadow borders will get clipped and disappear.
Accessibility: Focus states using box-shadow are fine visually, but make sure they are distinct enough for keyboard users.

Prototyping Visually

Writing shadow borders by hand is tricky. You have to guess the spread and offset values, and one typo makes the border look fuzzy instead of crisp.

If you want to design and test multi-layered borders using CSS box-shadow without altering the box model, I built a free CSS Shadow Borders Designer.

What it does:

Designs crisp, multi-layered borders using box-shadow
Previews them without altering DOM dimensions
Exports clean CSS instantly

Try it here

100% client-side. Nothing uploaded.

Do you use box-shadow for borders, or do you rely on border and box-sizing? Let me know in the comments.

Core Web Stack

kandz — Thu, 29 Oct 2026 10:37:03 +0000

Intro

The Core Web Stack path covers the essential foundation required to design, build, and deploy modern web applications. From understanding basic web protocols and standard client-side markup to building REST APIs, managing source code with version control, and handling package dependencies, this roadmap provides a complete developer toolkit.

Tutorials

01. Internet Beginner ✅: Start Now — Learn how the web works, including client-server architecture, HTTP request-response cycles, and basic networking concepts.
02. HTML ✅: Start Now — Master semantic markup, document structure, accessibility standards, and web form fundamentals.
03. CSS ✅: Start Now — Build responsive layouts using modern styling, Flexbox, CSS Grid, and custom properties.
04. JavaScript ✅: Start Now — Learn core programming concepts, DOM manipulation, asynchronous execution, and modern ES6+ features.
05. REST API ✅: Start Now — Design, consume, and secure scalable web services using HTTP standards and JSON data formats.
06. Version Control ✅
- Git ✅: Start Now — Track changes, manage branches, handle merge conflicts, and maintain clean project histories locally.
- VCS Hosting (Choose one of the following; GitHub is recommended):
  - GitHub ✅: Start Now — Host repositories, collaborate using Pull Requests, conduct code reviews, and automate workflows.
  - GitLab ✅: Start Now — Manage projects, maintain codebases, run integrated CI/CD pipelines, and manage private registries.
07. Package Managers ✅ (Choose one of the following; npm is recommended)
- npm ✅: Start Now — Manage project dependencies, automate tasks with scripts, handle versioning, and publish packages.
- Yarn ✅: Start Now — Speed up package installations, manage locks efficiently, and utilize workspaces.
- pnpm ✅: Start Now — Save disk space and boost performance using a content-addressable store and strict dependency trees.
- Bun ✅: Start Now — Run JavaScript/TypeScript applications natively with an ultra-fast, all-in-one package manager and runtime toolkit.

JavaScript String Concatenation: `+` vs Template Literals vs .join()

kandz — Thu, 29 Oct 2026 08:50:47 +0000

The "best" way to concatenate strings in JavaScript depends on what you're doing, but for modern JavaScript, template literals are usually the cleanest and most readable option.

Let's break down the three main methods, their performance, and when to use each.

1. Template Literals (ES6+)

Use backticks and ${} to embed variables directly into a string.

const firstName = "Alice";
const lastName = "Smith";
const greeting = `Hello, ${firstName} ${lastName}!`;

This is generally the best approach because it's readable, avoids messy quote escaping, and allows for multi-line strings without special characters.

2. The `+` Operator

The classic way. It works fine for simple combinations but gets messy fast.

const greeting = "Hello, " + firstName + " " + lastName + "!";

If you have lots of variables or need to mix single and double quotes, it becomes hard to read.

3. Array `.join()`

Best for concatenating a large list of items or when building strings in a loop.

const words = ["Hello", firstName, lastName];
const greeting = words.join(" ") + "!";

This is highly performant for large datasets because you aren't creating a new string in memory with every single concatenation operation.

Performance Considerations

In older browsers, + was slow for large loops because strings are immutable. Every time you concatenate, it creates a new string in memory. Array .join() was the standard performance fix.

However, modern JavaScript engines (like V8 in Chrome and Node.js) have optimized the + operator using "ropes" (a data structure that defers string copying). In most modern environments, template literals and + are fast enough for everyday use.

When to use which

Template literals: Default choice for 99% of cases.
+ operator: Simple, single-line combinations.
.join(): Huge loops or building strings from arrays.

Converting Legacy Code

If you're modernizing a codebase, converting old + concatenations to template literals makes the code much easier to read. But doing it by hand for hundreds of lines is error-prone—it's easy to miss a backtick or a dollar sign.

If you want to quickly convert standard string concatenation into ES6 template literals (or vice versa), I built a free JS String Concatenation Utility.

Try it here

100% client-side. Nothing uploaded.

What's your go-to method for string concatenation? Do you use template literals exclusively, or do you still use +? Let me know in the comments.

DEV Community: kandz

A Complete Free Angular Curriculum — 132 Chapters, From CLI to Zoneless Change Detection

Foundations (1–18)

Services, DI, and Routing (19–28)

Forms and HTTP (29–38)

RxJS (39–46)

Signals (47–53)

Advanced DI and Standalone (54–61)

Change Detection (62–65)

Templates and Components (66–74)

SSR and Routing (75–80)

State Management (81–85)

UI and Platform (86–94)

Performance (95–99)

Testing and Tooling (100–110)

Deployment and Architecture (111–122)

Internals and Migration (123–132)

Why It's Worth Your Time

Who Should Read It

Link

How to Make Iframes Responsive, Secure, and Fast

1. The Responsive Problem

2. The Security Problem

3. The Performance Problem

Common Gotchas

Prototyping Visually

A Complete Free TypeScript Curriculum — 107 Chapters, From Basics to Compiler Internals

What's Inside

Why It's Worth Your Time

Who Should Read It

Link

How to Format Git Log Output (And Stop Googling the Commands)

The Shortest Possible Output

Adding the Commit Hash

The --oneline Shortcut (And Its Limits)

Visualizing the Graph

Common Gotchas

Building Complex Log Commands

React & Modern UI Stack

Intro

Tutorials

How to Build a CSS Dropdown Menu That Doesn't Push Content Down

The Layout Problem

The Accessibility Problem

Common Gotchas

The Visual Way

How to Convert TSV Data into TOML Configuration Files

Why TOML?

The TSV to TOML Problem

The Code Way (JavaScript)

Common Gotchas

The Visual Way

Try It

How to Replace Values in a JSON Array (Without Breaking It)

1. Replacing by Index

2. Replacing a Property in an Object (using map)

3. Finding and Replacing in Deeply Nested Arrays

Common Gotchas

The Visual Way

How to Plot Data Using SVG on the Web

1. D3.js (Maximum Control)

2. Charting Libraries (Speed)

3. Vanilla SVG + JavaScript (For simple shapes)

The Manual Coordinate Problem

How to Add a Border in CSS Without Changing Element Size

The Problem with Borders

The Solution: Hard Box Shadows

The Inset Shadow

Layering Multiple Borders

Common Gotchas

Prototyping Visually

Core Web Stack

Intro

Tutorials

JavaScript String Concatenation: `+` vs Template Literals vs .join()

1. Template Literals (ES6+)

2. The + Operator

3. Array .join()

Performance Considerations

When to use which

The `--oneline` Shortcut (And Its Limits)

2. Replacing a Property in an Object (using `map`)

2. The `+` Operator

3. Array `.join()`