DEV Community: jiebang-tools

Hashing in JavaScript: A Practical Guide to MD5, SHA-256, and SHA-512

jiebang-tools — Tue, 18 Aug 2026 02:51:40 +0000

Hashing in JavaScript: A Practical Guide to MD5, SHA-256, and SHA-512

Hashing is everywhere in software development — file integrity checks, password storage, digital signatures, data deduplication. But many developers only know how to "call a library" and run into trouble when implementing it in the browser.

This guide covers practical JavaScript implementations of common hash algorithms, including browser-native APIs, Node.js methods, file hashing, and real-world gotchas.

1. Browser-Native: SubtleCrypto

Modern browsers ship with the Web Crypto API, and SubtleCrypto lets you compute SHA hashes without any third-party library.

Basic Usage

async function sha256(message) {
  // 1. Encode string as UTF-8 bytes
  const msgBuffer = new TextEncoder().encode(message);

  // 2. Compute hash
  const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer);

  // 3. Convert ArrayBuffer to hex string
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  const hashHex = hashArray
    .map(b => b.toString(16).padStart(2, '0'))
    .join('');

  return hashHex;
}

sha256('Hello World').then(hash => {
  console.log(hash);
  // dffd6021bb2bd5b0af676290809ec3a53191dd81c7f70a4b28688a362182986f
});

Supported Algorithms

await crypto.subtle.digest('SHA-1', data);    // Deprecated
await crypto.subtle.digest('SHA-256', data);  // Most common
await crypto.subtle.digest('SHA-384', data);
await crypto.subtle.digest('SHA-512', data);

⚠️ Note: SubtleCrypto supports SHA family only. For MD5, you'll need a third-party library.

2. File Hashing in the Browser

Computing file hashes before upload is a common use case. Convert the File object to an ArrayBuffer:

async function hashFile(file, algorithm = 'SHA-256') {
  const buffer = await file.arrayBuffer();
  const hashBuffer = await crypto.subtle.digest(algorithm, buffer);

  return Array.from(new Uint8Array(hashBuffer))
    .map(b => b.toString(16).padStart(2, '0'))
    .join('');
}

document.querySelector('input[type="file"]').addEventListener('change', async (e) => {
  const file = e.target.files[0];
  if (!file) return;

  console.log(`File: ${file.name}`);
  console.log(`Size: ${(file.size / 1024 / 1024).toFixed(2)} MB`);

  const hash = await hashFile(file);
  console.log(`SHA-256: ${hash}`);
});

Large File Chunked Hashing

For files over 100MB, reading the entire file into memory can freeze the browser. Use chunked reading:

async function hashLargeFile(file, algorithm = 'SHA-256', chunkSize = 10 * 1024 * 1024) {
  const chunks = [];
  let offset = 0;

  while (offset < file.size) {
    const chunk = file.slice(offset, offset + chunkSize);
    const buffer = await chunk.arrayBuffer();
    chunks.push(new Uint8Array(buffer));
    offset += chunkSize;
  }

  // Merge all chunks — crypto.subtle.digest requires complete data
  const totalLength = chunks.reduce((acc, chunk) => acc + chunk.length, 0);
  const merged = new Uint8Array(totalLength);
  let position = 0;
  for (const chunk of chunks) {
    merged.set(chunk, position);
    position += chunk.length;
  }

  const hashBuffer = await crypto.subtle.digest(algorithm, merged);
  return Array.from(new Uint8Array(hashBuffer))
    .map(b => b.toString(16).padStart(2, '0'))
    .join('');
}

💡 Gotcha: crypto.subtle.digest() does NOT support incremental updates. You must pass the complete data. For true incremental hashing, use a library like spark-md5.

3. MD5 Implementation

Browsers don't natively support MD5, but many legacy systems still use it. spark-md5 is the recommended library — it supports incremental computation, perfect for large files:

import SparkMD5 from 'spark-md5';

// Simple string hash
function md5String(str) {
  return SparkMD5.hash(str);
}

// Large file incremental MD5
async function md5File(file, chunkSize = 2 * 1024 * 1024) {
  const blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
  const chunks = Math.ceil(file.size / chunkSize);
  let currentChunk = 0;
  const spark = new SparkMD5.ArrayBuffer();

  return new Promise((resolve, reject) => {
    const reader = new FileReader();

    reader.onload = (e) => {
      spark.append(e.target.result);
      currentChunk++;

      if (currentChunk < chunks) {
        loadNext();
      } else {
        resolve(spark.end());
      }
    };

    reader.onerror = reject;

    function loadNext() {
      const start = currentChunk * chunkSize;
      const end = Math.min(start + chunkSize, file.size);
      reader.readAsArrayBuffer(blobSlice.call(file, start, end));
    }

    loadNext();
  });
}

4. Hashing in Node.js

Node.js has a built-in crypto module — simpler and more flexible:

const crypto = require('crypto');

// String hash
function sha256(str) {
  return crypto.createHash('sha256').update(str, 'utf8').digest('hex');
}

function md5(str) {
  return crypto.createHash('md5').update(str, 'utf8').digest('hex');
}

// File hash with streams (great for large files!)
const fs = require('fs');

function hashFileStream(filePath, algorithm = 'sha256') {
  return new Promise((resolve, reject) => {
    const hash = crypto.createHash(algorithm);
    const stream = fs.createReadStream(filePath);

    stream.on('data', chunk => hash.update(chunk));
    stream.on('end', () => resolve(hash.digest('hex')));
    stream.on('error', reject);
  });
}

hashFileStream('./large-file.zip').then(hash => {
  console.log('SHA-256:', hash);
});

5. HMAC: Keyed-Hash Message Authentication Code

Regular hashing verifies data integrity. HMAC verifies message authenticity — both generation and verification require a secret key.

// Browser
async function hmacSha256(message, secret) {
  const encoder = new TextEncoder();
  const key = await crypto.subtle.importKey(
    'raw',
    encoder.encode(secret),
    { name: 'HMAC', hash: 'SHA-256' },
    false,
    ['sign']
  );

  const signature = await crypto.subtle.sign(
    'HMAC', key, encoder.encode(message)
  );

  return Array.from(new Uint8Array(signature))
    .map(b => b.toString(16).padStart(2, '0'))
    .join('');
}

// Node.js
function hmacSha256Node(message, secret) {
  return crypto
    .createHmac('sha256', secret)
    .update(message, 'utf8')
    .digest('hex');
}

Common use cases: Webhook signature verification, JWT token generation, API request tamper protection.

6. Common Pitfalls

Pitfall 1: Encoding Issues

// ❌ Wrong: passing a string directly to digest()
// crypto.subtle.digest requires a BufferSource

// ✅ Correct: encode with TextEncoder first
const data = new TextEncoder().encode('Hello');
const hash = await crypto.subtle.digest('SHA-256', data);

Pitfall 2: Case Sensitivity

Different libraries may return hex in different cases. Always normalize:

function compareHash(h1, h2) {
  return h1.toLowerCase() === h2.toLowerCase();
}

Pitfall 3: SubtleCrypto Requires Secure Context

crypto.subtle is only available under HTTPS or localhost. It will be undefined on plain HTTP pages.

if (typeof crypto !== 'undefined' && crypto.subtle) {
  // Safe to use
} else {
  // Need HTTPS or a polyfill
}

Pitfall 4: Never Hash Passwords Directly

MD5/SHA-256 of passwords are vulnerable to rainbow table attacks and GPU brute force. Always use salt + slow hash:

async function hashPassword(password, salt) {
  const encoder = new TextEncoder();
  const keyMaterial = await crypto.subtle.importKey(
    'raw', encoder.encode(password), 'PBKDF2', false, ['deriveBits']
  );

  return crypto.subtle.deriveBits(
    {
      name: 'PBKDF2',
      salt: encoder.encode(salt),
      iterations: 100000,
      hash: 'SHA-256'
    },
    keyMaterial,
    256
  );
}

For production, use bcrypt, scrypt, or Argon2.

Pitfall 5: MD5 Performance on Large Files

Don't use a pure-JS MD5 implementation for large files — it's slow. Use spark-md5 with chunked incremental mode, or Node.js built-in crypto.createHash('md5').

7. Algorithm Selection Guide

Use Case	Recommended Algorithm	Notes
File integrity check	SHA-256	Most common, fast, secure enough
Password storage	bcrypt/Argon2	Salt + slow hash, never MD5/SHA
Digital signatures	SHA-256 + RSA	Or SHA-384 for higher security
Data dedup/cache keys	MD5/SHA-1	Acceptable for non-security uses
HMAC signatures	HMAC-SHA256	API signing, webhook verification
Blockchain	SHA-256	Bitcoin standard
Legacy compatibility	MD5	Non-security purposes only

Tool Recommendation

If you need to quickly compute hashes for text or files, try the free online hash calculator — supports MD5, SHA-1, SHA-256, SHA-384, and SHA-512. All computation happens in your browser; no data is uploaded to any server.

Source code: github.com/jiebang-tools/tools

Summary

Use crypto.subtle.digest() in browsers for SHA — no libraries needed
MD5 requires a third-party library (spark-md5) or Node.js built-in crypto
Use chunked + incremental hashing for large files to avoid memory issues
SubtleCrypto requires HTTPS (except localhost)
Never store passwords with plain hashes — always use salt + slow hash (bcrypt/Argon2)
Use HMAC for message authentication, not plain hashing

Happy coding! 🚀

HTML Entity Encoding in JavaScript: A Practical Guide with Real Examples

jiebang-tools — Tue, 11 Aug 2026 02:49:51 +0000

If you've ever seen & or < on a webpage and wondered what they mean, or had your site vulnerable to XSS because of unescaped user input — this guide is for you.

HTML entity encoding is one of those fundamentals that separates developers who know security basics from those who don't. Let's break it down.

What Are HTML Entities?

HTML entities are a way to represent special characters in HTML documents. Some characters have special meaning in HTML — like < which starts a tag, or & which begins an entity reference. To display these characters literally, you need to encode them.

Common HTML entities:

Character	Entity	Description
`<`	`<`	Less-than, tag delimiter
`>`	`>`	Greater-than, tag delimiter
`&`	`&`	Ampersand, entity delimiter
`"`	`"`	Double quote
`'`	`'`	Single quote (numeric)
(space)	` `	Non-breaking space

You can also use numeric encoding:

Decimal: < for <
Hexadecimal: < for <

Encoding in JavaScript

JavaScript doesn't have a built-in HTML encoding function (escape() is deprecated and doesn't handle HTML entities). But we have several reliable approaches.

Method 1: String Replacement

The simplest approach — replace the 5 critical characters identified by OWASP:

function escapeHTML(str) {
  const escapeMap = {
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#39;'
  };
  return str.replace(/[&<>"']/g, char => escapeMap[char]);
}

const userInput = '<script>alert("XSS")</script>';
const safe = escapeHTML(userInput);
// Result: &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;

This covers all characters that matter for XSS prevention.

Method 2: DOM API

Leverage the browser's built-in escaping:

function escapeHTML(str) {
  const div = document.createElement('div');
  div.textContent = str;
  return div.innerHTML;
}

const safe = escapeHTML('<img src=x onerror=alert(1)>');
// Result: &lt;img src=x onerror=alert(1)&gt;

How it works: textContent assignment doesn't parse HTML, and innerHTML reading automatically converts special characters to entities.

Decoding HTML Entities

function unescapeHTML(str) {
  const div = document.createElement('div');
  div.innerHTML = str;
  return div.textContent;
}

const decoded = unescapeHTML('&lt;hello&gt; &amp; &quot;world&quot;');
// Result: <hello> & "world"

Security warning: The innerHTML decoding approach has potential XSS risks. In production, always pair with a sanitizer like DOMPurify.

textContent vs innerHTML: The Core Distinction

This is web security 101:

const el = document.getElementById('output');
const userInput = '<script>alert("XSS")</script>';

// ❌ Dangerous: parses <script> as actual HTML
el.innerHTML = userInput;

// ✅ Safe: renders as plain text, auto-escaped
el.textContent = userInput;

Rule: Always prefer textContent for displaying user input. Only use innerHTML when you genuinely need to render HTML structure — and only after sanitizing.

Common Pitfalls (and How to Avoid Them)

1. Double Encoding

const encoded = escapeHTML('<div>');
// Result: &lt;div&gt;

// Accidentally encoding again
const doubleEncoded = escapeHTML(encoded);
// Result: &amp;lt;div&amp;gt;  ← Page shows &lt;div&gt; instead of <div>

Fix: Encode once, when data enters HTML context. Decode once, when reading back.

2. Unescaped Attribute Values

// ❌ Dangerous: user input can break out of the attribute
const html = `<a href="${userInput}">Link</a>`;
// If userInput = '" onclick="alert(1)', attribute injection!

// ✅ Correct: encode attribute values too
const html = `<a href="${escapeHTML(userInput)}">Link</a>`;

3. JavaScript Protocol in URLs

// Even with encoded attributes, this attack vector remains
const url = 'javascript:alert(1)';

// ✅ Validate the protocol
function safeURL(url) {
  return /^https?:\/\//.test(url) ? url : '#';
}

4. Server-Side vs Client-Side

// No DOM API in Node.js
// Option 1: Use the `he` library
import { encode, decode } from 'he';
const encoded = encode('<script>');
// Result: &lt;script&gt;

// Option 2: String replacement (same as Method 1)

Practical Example: Safe Comment Rendering

function renderComment(username, content) {
  const safeName = escapeHTML(username);
  const safeContent = escapeHTML(content);
  const time = new Date().toLocaleString('en-US');

  return `
    <div class="comment">
      <span class="author">${safeName}</span>
      <span class="time">${time}</span>
      <p class="content">${safeContent}</p>
    </div>
  `;
}

// Even malicious input is rendered as harmless text
renderComment('hacker', '<img src=x onerror=alert(document.cookie)>');
// The onerror handler never fires

Quick Reference Table

Scenario	Recommended Approach	Notes
Plain text rendering	`textContent`	Auto-escaped, safest
Building HTML strings	`escapeHTML()`	Manual 5-char replacement
Decoding entities	`DOMParser` or `he` library	Watch for XSS
Node.js environment	`he` library	No DOM available
Rich text rendering	DOMPurify + `innerHTML`	Must use a sanitizer

Summary

HTML entity encoding is the first line of defense against XSS — escape & < > " '
Always prefer textContent for user input — it's inherently safe
When building HTML strings, you must manually escape — including attribute values
Be cautious when decoding — pair with DOMPurify in production
In Node.js, use the he library

If you want to test HTML entity encoding interactively, I've built a free online HTML entity encoder/decoder tool — 100% client-side, your data never leaves your browser.

Found this helpful? Follow me for more practical JavaScript guides. Questions? Drop a comment below!

URL Encoding & Decoding in JavaScript: A Practical Guide with Real Examples

jiebang-tools — Tue, 04 Aug 2026 02:50:32 +0000

If you've ever seen %20 in a URL and wondered what it means, or had your app crash because a user's name contained a & symbol, you're in the right place. URL encoding is one of those fundamentals that every web developer needs to understand — but few truly master.

In this guide, we'll break down how URL encoding works, when to use encodeURIComponent vs encodeURI, and how to handle edge cases that trip up even experienced developers.

What Is URL Encoding?

URLs can only contain a limited set of ASCII characters: letters, digits, and a few special characters like -, _, ., and ~. Anything outside this set — spaces, Chinese characters, emojis, even some punctuation — must be percent-encoded.

The encoding replaces each unsafe character with % followed by two hexadecimal digits representing the character's byte value in UTF-8.

For example:

Space → %20
& → %26
中 → %E4%B8%AD
🎉 → %F0%9F%8E%89

JavaScript's Built-in Encoding Functions

JavaScript provides two main functions for URL encoding, and choosing the wrong one is a common source of bugs.

`encodeURI`

Use this when you want to encode a complete URL. It preserves characters that have special meaning in URLs, such as :, /, ?, #, &, and =.

const url = 'https://example.com/search?q=hello world&lang=zh';
const encoded = encodeURI(url);
// Result: https://example.com/search?q=hello%20world&lang=zh

Notice that ://, ?, and & are preserved — only the space was encoded.

`encodeURIComponent`

Use this when you want to encode a single component of a URL, like a query parameter value. This function encodes everything except A-Z, a-z, 0-9, -, _, ., !, ~, *, ', (, and ).

const param = 'hello world & goodbye';
const encoded = encodeURIComponent(param);
// Result: hello%20world%20%26%20goodbye

Here, the & is encoded to %26 — exactly what you want when building query strings.

The Golden Rule

Use encodeURIComponent for individual parameter values. Use encodeURI only when encoding an entire URL that's already well-formed.

Building Query Strings Safely

Here's a pattern I use in production code:

function buildQueryString(params) {
  return Object.entries(params)
    .map(([key, value]) => 
      `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
    )
    .join('&');
}

const qs = buildQueryString({
  search: 'JavaScript 教程',
  page: 2,
  filter: 'price < 100 & in stock'
});
// Result: search=JavaScript%20%E6%95%99%E7%A8%8B&page=2&filter=price%20%3C%20100%20%26%20in%20stock

This ensures every key and value is independently encoded, preventing injection issues.

Decoding URLs

JavaScript also provides two corresponding decode functions:

`decodeURI`

Decodes a string that was encoded with encodeURI. It won't decode characters like %2F (which represents /) because / is a valid URL character.

const encoded = 'https://example.com/search?q=hello%20world';
const decoded = decodeURI(encoded);
// Result: https://example.com/search?q=hello world

`decodeURIComponent`

Decodes a string that was encoded with encodeURIComponent. It will decode everything.

const encoded = 'hello%20world%20%26%20goodbye';
const decoded = decodeURIComponent(encoded);
// Result: hello world & goodbye

Common Pitfalls (and How to Avoid Them)

1. Double Encoding

This happens when you encode a value that's already been encoded:

const url = 'https://example.com/?q=hello%20world';
const bad = encodeURI(url);
// Result: https://example.com/?q=hello%2520world  ← The % got encoded!

const good = encodeURI('https://example.com/?q=hello world');
// Result: https://example.com/?q=hello%20world  ← Correct

Fix: Always encode raw values, never re-encode.

2. Mixing Up the Two Functions

// ❌ Wrong: encodeURI won't encode & so your parameter value gets split
const url = `https://api.example.com?name=${encodeURI('Tom & Jerry')}`;
// Result: https://api.example.com?name=Tom%20&%20Jerry  ← The & breaks the query string!

// ✅ Correct: use encodeURIComponent for parameter values
const url = `https://api.example.com?name=${encodeURIComponent('Tom & Jerry')}`;
// Result: https://api.example.com?name=Tom%20%26%20Jerry  ←

3. Forgetting About `+` for Spaces

In application/x-www-form-urlencoded (used in form POST data), spaces are encoded as + instead of %20. JavaScript's encodeURIComponent uses %20, which is valid in URLs but not in form data.

// For form data, replace %20 with +
const formData = encodeURIComponent('hello world').replace(/%20/g, '+');
// Result: hello+world

Or use URLSearchParams, which handles this automatically:

const params = new URLSearchParams({ name: 'hello world' });
params.toString();
// Result: name=hello+world

Modern Alternative: URLSearchParams

For most use cases, URLSearchParams is the cleanest approach:

const params = new URLSearchParams({
  search: 'JavaScript 指南',
  page: '1',
  sort: 'desc'
});

const queryString = params.toString();
// Result: search=JavaScript+%E6%8C%87%E5%8D%97&page=1&sort=desc

const url = `https://example.com/search?${queryString}`;

Benefits:

Automatically encodes keys and values
Handles + for spaces correctly
Provides methods like .get(), .set(), .append(), .has()
Well-supported in all modern browsers and Node.js

Practical Example: Building an API Request

Let's put it all together with a real-world example:

async function searchProducts(query, filters) {
  const params = new URLSearchParams({
    q: query,
    ...filters
  });

  const response = await fetch(`https://api.example.com/products?${params}`);

  if (!response.ok) {
    throw new Error(`API error: ${response.status}`);
  }

  return response.json();
}

// Usage
searchProducts('无线耳机', { 
  min_price: '100', 
  max_price: '500',
  category: '数码 & 电子'  // The & is safely encoded
}).then(console.log);

Quick Reference Table

Character	`encodeURI`	`encodeURIComponent`
Space	`%20`	`%20`
`&`	`&`	`%26`
`=`	`=`	`%3D`
`?`	`?`	`%3F`
`/`	`/`	`%2F`
`#`	`#`	`%23`
`中`	`%E4%B8%AD`	`%E4%B8%AD`

Summary

Use encodeURIComponent for individual query parameter values
Use encodeURI only for complete URLs that are already well-formed
Prefer URLSearchParams for building query strings in modern code
Never double-encode — always encode raw values
For form POST data, spaces should be + not %20

If you want to test URL encoding/decoding interactively, I've built a free online URL encoder/decoder tool that supports UTF-8 and handles all edge cases. It's 100% client-side — your data never leaves your browser.

Found this helpful? Follow me for more practical JavaScript guides. Questions? Drop a comment below!

Building a Secure Password Generator in JavaScript: A Practical Guide

jiebang-tools — Tue, 28 Jul 2026 02:53:35 +0000

Password breaches happen every year, and weak passwords are the low-hanging fruit for attackers.

Why Password Strength Matters

Password Type	Example	Crack Time
6-digit numeric	123456	Instant
16 chars mixed	aR7$kM3!pX9#nL2@	~trillions of years

The core of password strength is entropy — essentially, randomness.

The Three Pillars of Secure Password Generation

1. Random Source Quality

// ❌ Insecure: Math.random() is pseudo-random
const weakPassword = Math.random().toString(36).slice(2);

// ✅ Secure: crypto.getRandomValues() uses OS-level randomness
const array = new Uint32Array(1);
crypto.getRandomValues(array);

2. Character Space

Character Set	Count
Digits	10
All combined	94

3. Frontend vs Backend Generation

Frontend generation is safer — the password never travels over the network.

Comparing Password Solutions

Browser Built-in Generators

Pros: Free, auto-fill
Cons: Not customizable, sync breach risk

Password Managers (1Password, Bitwarden, KeePass)

Pros: All-in-one management
Cons: Master password = single point of failure

Online Password Generators

Pros: Free, no installation, customizable
Cons: Must verify the tool runs client-side only

Command Line

openssl rand -base64 16
head -c 16 /dev/urandom | xxd -p

How to Tell if an Online Tool is Safe

Check 1: Watch Network Requests

Open F12 → Network. A client-side tool should have zero network requests.

Check 2: Inspect Source Code

// Good: Uses Web Crypto API
crypto.getRandomValues(array);

// Dangerous: Calls backend
fetch("/api/generate-password");

Building a Secure Generator

class SecurePasswordGenerator {
    constructor(options = {}) {
        this.length = options.length || 16;
        this.useUppercase = options.useUppercase ?? true;
        this.useLowercase = options.useLowercase ?? true;
        this.useNumbers = options.useNumbers ?? true;
        this.useSymbols = options.useSymbols ?? true;
        this.excludeAmbiguous = options.excludeAmbiguous ?? false;
    }

    buildCharset() {
        let charset = "";
        if (this.useUppercase) charset += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        if (this.useLowercase) charset += "abcdefghijklmnopqrstuvwxyz";
        if (this.useNumbers) charset += "0123456789";
        if (this.useSymbols) charset += "!@#$%^&*()_+-=[]{}|;:,.<>?";
        if (this.excludeAmbiguous) {
            charset = charset.split("")
                .filter(c => !"Il1O0o".includes(c)).join("");
        }
        return charset;
    }

    generate() {
        const charset = this.buildCharset();
        const password = new Array(this.length);
        const randomValues = new Uint32Array(this.length);
        crypto.getRandomValues(randomValues);
        for (let i = 0; i < this.length; i++) {
            password[i] = charset[randomValues[i] % charset.length];
        }
        // Fisher-Yates shuffle
        for (let i = password.length - 1; i > 0; i--) {
            const j = randomValues[i] % (i + 1);
            [password[i], password[j]] = [password[j], password[i]];
        }
        return password.join("");
    }
}

Key points:

crypto.getRandomValues() instead of Math.random()
Fisher-Yates shuffle for position randomization
Ambiguous character exclusion for readability

Calculating Password Entropy

Entropy = length × log2(charset_size)

Configuration	Entropy (16 chars)	Rating
Digits only	53 bits	Weak
All ASCII	105 bits	Excellent

NIST recommends minimum 80 bits. Aim for 100+ for high security.

Use a Ready-Made Tool

👉 Online Password Generator - JieBang Tools

Runs entirely in browser, no server requests, supports custom length and character types.

Summary

Three non-negotiable rules:

Secure random source (Web Crypto API)
No network transmission (client-side only)
Customizable parameters

Password security starts with refusing weak passwords.

JSON Formatting in JavaScript: A Practical Guide with Real Examples

jiebang-tools — Tue, 21 Jul 2026 03:00:02 +0000

JSON Formatting in JavaScript: A Practical Guide with Real Examples

JSON is everywhere in modern web development. But working with messy, unformatted JSON is a nightmare. This guide covers everything from basic formatting to advanced techniques with real code examples.

Why JSON Formatting Matters

If you've ever debugged an API response that looks like this:

{"name":"John","age":30,"address":{"street":"123 Main St","city":"NYC"},"hobbies":["reading","coding","hiking"]}

You know the pain. Now compare it with properly formatted JSON:

{
  "name": "John",
  "age": 30,
  "address": {
    "street": "123 Main St",
    "city": "NYC"
  },
  "hobbies": [
    "reading",
    "coding",
    "hiking"
  ]
}

Night and day. Proper formatting makes JSON readable, debuggable, and maintainable.

JavaScript's Built-in JSON Methods

`JSON.stringify()` with Indentation

The most common way to format JSON in JavaScript:

const data = {
  name: "John",
  age: 30,
  address: {
    street: "123 Main St",
    city: "NYC"
  }
};

// Basic usage (no formatting)
const compact = JSON.stringify(data);
// {"name":"John","age":30,"address":{"street":"123 Main St","city":"NYC"}}

// Pretty print with 2-space indentation
const pretty = JSON.stringify(data, null, 2);
// {
//   "name": "John",
//   "age": 30,
//   "address": {
//     "street": "123 Main St",
//     "city": "NYC"
//   }
// }

The third argument controls indentation:

2 — 2 spaces (most common)
4 — 4 spaces (classic style)
"\t" — tab character

`JSON.parse()` with Validation

Always wrap JSON.parse() in try-catch:

function safeParse(jsonString) {
  try {
    return JSON.parse(jsonString);
  } catch (e) {
    console.error('Invalid JSON:', e.message);
    return null;
  }
}

// Good
safeParse('{"name":"John"}'); // { name: "John" }

// Bad JSON handled gracefully
safeParse('{name: "John"}'); // null (keys must be quoted)

The Replacer Function: Selective Formatting

The second argument of JSON.stringify() is a replacer. It can filter or transform data:

const user = {
  name: "John",
  password: "secret123",
  email: "john@example.com",
  token: "abc-xyz-123"
};

// Filter out sensitive fields
const safe = JSON.stringify(user, (key, value) => {
  if (['password', 'token'].includes(key)) {
    return undefined; // omit from output
  }
  return value;
}, 2);

// {
//   "name": "John",
//   "email": "john@example.com"
// }

This is extremely useful when logging API responses — you don't want passwords or tokens in your logs.

Common JSON Formatting Pitfalls

1. Trailing Commas

// ❌ This will throw SyntaxError
JSON.parse('{"a": 1, "b": 2,}');

// ✅ Remove trailing comma
JSON.parse('{"a": 1, "b": 2}');

2. Single Quotes

// ❌ Invalid JSON
JSON.parse("{'name': 'John'}");

// ✅ Use double quotes
JSON.parse('{"name": "John"}');

3. Comments in JSON

// ❌ Standard JSON does not support comments
// JSON.parse('{"a": 1 /* comment */}');  // SyntaxError

// ✅ Use JSON5 if you need comments (requires library)
// Or strip comments before parsing:
function stripComments(str) {
  return str.replace(/\/\*[\s\S]*?\*\/|\/\/.*/g, '');
}

4. NaN, Infinity, and undefined

const data = { a: NaN, b: Infinity, c: undefined, d: null };

JSON.stringify(data);
// '{"a":null,"b":null,"d":null}'

// NaN and Infinity become null
// undefined is omitted entirely
// null stays as null

This can cause subtle bugs when round-tripping data through JSON.

Working with Large JSON Files

For large JSON payloads, formatting can consume significant memory:

// For large datasets, consider streaming parsers
// Example using the 'stream-json' npm package:

// const pipeline = require('stream.pipeline');
// const streamJson = require('stream-json');
// const {chain} = require('stream-chain');

// For smaller datasets, format on demand:
function formatIfNeeded(jsonString, maxSize = 100000) {
  if (jsonString.length < maxSize) {
    return JSON.stringify(JSON.parse(jsonString), null, 2);
  }
  return jsonString; // Skip formatting for very large payloads
}

Validating JSON Structure

A practical validation function:

function validateJSON(jsonString) {
  try {
    const parsed = JSON.parse(jsonString);
    return { valid: true, data: parsed };
  } catch (e) {
    // Extract position from error message
    const posMatch = e.message.match(/position (\d+)/);
    const position = posMatch ? parseInt(posMatch[1]) : -1;

    return {
      valid: false,
      error: e.message,
      position: position,
      context: position > 0
        ? jsonString.slice(Math.max(0, position - 20), position + 20)
        : null
    };
  }
}

// Usage
const result = validateJSON('{"name": "John",}');
console.log(result);
// {
//   valid: false,
//   error: "Unexpected token } in JSON at position 18",
//   position: 18,
//   context: '"John",}'
// }

Quick Formatting Without Code

When you just need to format JSON quickly — debugging an API response, checking a config file, or validating a webhook payload — you don't always want to write code. I keep a JSON Formatter tool bookmarked for exactly this purpose. It handles formatting, validation, minification, and tree view — all in the browser, no data sent to any server.

Summary

Technique	Use Case
`JSON.stringify(data, null, 2)`	Pretty print in code
Replacer function	Filter sensitive data
`JSON.parse()` in try-catch	Safe parsing
Validation function	Detailed error reporting
Online formatter	Quick debugging

Key takeaways:

Always use try-catch with JSON.parse()
Use the replacer function to strip sensitive data before logging
Remember that undefined, NaN, and Infinity don't survive JSON round-trips
For quick formatting, keep an online tool handy

JSON formatting is a small thing that saves hours of debugging. Get it right early and your future self will thank you.

What's your favorite JSON tip? Share it in the comments below!

JSON Formatting in JavaScript: A Practical Guide with Real Examples

jiebang-tools — Tue, 14 Jul 2026 02:55:44 +0000

JSON is everywhere in modern web development. But working with messy, unformatted JSON is a nightmare. This guide covers everything from basic formatting to advanced techniques with real code examples.

Why JSON Formatting Matters

If you've ever debugged an API response that looks like this:

{"name":"John","age":30,"address":{"street":"123 Main St","city":"NYC"},"hobbies":["reading","coding","hiking"]}

You know the pain. Now compare it with properly formatted JSON:

{
  "name": "John",
  "age": 30,
  "address": {
    "street": "123 Main St",
    "city": "NYC"
  },
  "hobbies": [
    "reading",
    "coding",
    "hiking"
  ]
}

Night and day. Proper formatting makes JSON readable, debuggable, and maintainable.

JavaScript's Built-in JSON Methods

`JSON.stringify()` with Indentation

The most common way to format JSON in JavaScript:

const data = {
  name: "John",
  age: 30,
  address: {
    street: "123 Main St",
    city: "NYC"
  }
};

// Basic usage (no formatting)
const compact = JSON.stringify(data);
// {"name":"John","age":30,"address":{"street":"123 Main St","city":"NYC"}}

// Pretty print with 2-space indentation
const pretty = JSON.stringify(data, null, 2);
// {
//   "name": "John",
//   "age": 30,
//   "address": {
//     "street": "123 Main St",
//     "city": "NYC"
//   }
// }

The third argument controls indentation:

2 — 2 spaces (most common)
4 — 4 spaces (classic style)
"\t" — tab character

`JSON.parse()` with Validation

Always wrap JSON.parse() in try-catch:

function safeParse(jsonString) {
  try {
    return JSON.parse(jsonString);
  } catch (e) {
    console.error('Invalid JSON:', e.message);
    return null;
  }
}

// Good
safeParse('{"name":"John"}'); // { name: "John" }

// Bad JSON handled gracefully
safeParse('{name: "John"}'); // null (keys must be quoted)

The Replacer Function: Selective Formatting

The second argument of JSON.stringify() is a replacer. It can filter or transform data:

const user = {
  name: "John",
  password: "secret123",
  email: "john@example.com",
  token: "abc-xyz-123"
};

// Filter out sensitive fields
const safe = JSON.stringify(user, (key, value) => {
  if (['password', 'token'].includes(key)) {
    return undefined; // omit from output
  }
  return value;
}, 2);

// {
//   "name": "John",
//   "email": "john@example.com"
// }

This is extremely useful when logging API responses — you don't want passwords or tokens in your logs.

Common JSON Formatting Pitfalls

1. Trailing Commas

// ❌ This will throw SyntaxError
JSON.parse('{"a": 1, "b": 2,}');

// ✅ Remove trailing comma
JSON.parse('{"a": 1, "b": 2}');

2. Single Quotes

// ❌ Invalid JSON
JSON.parse("{'name': 'John'}");

// ✅ Use double quotes
JSON.parse('{"name": "John"}');

3. Comments in JSON

// ❌ Standard JSON does not support comments
// JSON.parse('{"a": 1 /* comment */}');  // SyntaxError

// ✅ Use JSON5 if you need comments (requires library)
// Or strip comments before parsing:
function stripComments(str) {
  return str.replace(/\/\*[\s\S]*?\*\/|\/\/.*/g, '');
}

4. NaN, Infinity, and undefined

const data = { a: NaN, b: Infinity, c: undefined, d: null };

JSON.stringify(data);
// '{"a":null,"b":null,"d":null}'

// NaN and Infinity become null
// undefined is omitted entirely
// null stays as null

This can cause subtle bugs when round-tripping data through JSON.

Working with Large JSON Files

For large JSON payloads, formatting can consume significant memory:

// For large datasets, consider streaming parsers
// Example using the 'stream-json' npm package:

// const pipeline = require('stream.pipeline');
// const streamJson = require('stream-json');
// const {chain} = require('stream-chain');

// For smaller datasets, format on demand:
function formatIfNeeded(jsonString, maxSize = 100000) {
  if (jsonString.length < maxSize) {
    return JSON.stringify(JSON.parse(jsonString), null, 2);
  }
  return jsonString; // Skip formatting for very large payloads
}

Validating JSON Structure

A practical validation function:

function validateJSON(jsonString) {
  try {
    const parsed = JSON.parse(jsonString);
    return { valid: true, data: parsed };
  } catch (e) {
    // Extract position from error message
    const posMatch = e.message.match(/position (\d+)/);
    const position = posMatch ? parseInt(posMatch[1]) : -1;

    return {
      valid: false,
      error: e.message,
      position: position,
      context: position > 0
        ? jsonString.slice(Math.max(0, position - 20), position + 20)
        : null
    };
  }
}

// Usage
const result = validateJSON('{"name": "John",}');
console.log(result);
// {
//   valid: false,
//   error: "Unexpected token } in JSON at position 18",
//   position: 18,
//   context: '"John",}'
// }

Quick Formatting Without Code

Summary

Technique	Use Case
`JSON.stringify(data, null, 2)`	Pretty print in code
Replacer function	Filter sensitive data
`JSON.parse()` in try-catch	Safe parsing
Validation function	Detailed error reporting
Online formatter	Quick debugging

Key takeaways:

Always use try-catch with JSON.parse()
Use the replacer function to strip sensitive data before logging
Remember that undefined, NaN, and Infinity don't survive JSON round-trips
For quick formatting, keep an online tool handy

JSON formatting is a small thing that saves hours of debugging. Get it right early and your future self will thank you.

What's your favorite JSON tip? Share it in the comments below!

Base64 Encoding in JavaScript: A Practical Guide with Real Examples

jiebang-tools — Tue, 07 Jul 2026 02:53:05 +0000

Base64 is everywhere in web development — JWT tokens, image data URLs, API payloads, HTTP Basic auth headers. But if you've ever tried to btoa() a Chinese string and gotten an error, you know it's not as straightforward as it looks.

This guide covers the common pitfalls and practical patterns I've learned from working with Base64 in production JavaScript applications.

What Base64 Actually Does

Base64 converts binary data into ASCII text using 64 printable characters (A-Z, a-z, 0-9, +, /). Every 3 bytes of input becomes 4 characters of output, which means the encoded result is about 33% larger than the original.

This encoding exists because many protocols (email, HTTP, JSON) were designed for text, not binary. Base64 bridges that gap.

The `btoa()` Trap

The native btoa() function works perfectly for ASCII:

btoa("Hello World"); // "SGVsbG8gV29ybGQ="
atob("SGVsbG8gV29ybGQ="); // "Hello World"

But try encoding anything with non-Latin1 characters:

btoa("你好世界");
// Uncaught DOMException: Failed to execute 'btoa' on 'Window':
// The string to be encoded contains characters outside of the Latin1 range.

This trips up anyone working with internationalized content. The fix depends on your JavaScript environment.

Encoding UTF-8 Strings (Browser)

Method 1: encodeURIComponent Trick

The classic approach — escape Unicode characters first, then encode:

function encodeBase64(str) {
  return btoa(encodeURIComponent(str).replace(
    /%([0-9A-F]{2})/g,
    (_, p1) => String.fromCharCode('0x' + p1)
  ));
}

function decodeBase64(b64) {
  return decodeURIComponent(
    atob(b64).split('').map(
      c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
    ).join('')
  );
}

encodeBase64("你好世界"); // "5L2g5aW977yM5LiW55WM"
decodeBase64("5L2g5aW977yM5LiW55WM"); // "你好世界"

Method 2: TextEncoder (Modern)

Cleaner and more readable:

function encodeBase64Unicode(str) {
  const bytes = new TextEncoder().encode(str);
  let binary = '';
  bytes.forEach(b => binary += String.fromCharCode(b));
  return btoa(binary);
}

function decodeBase64Unicode(b64) {
  const binary = atob(b64);
  const bytes = new Uint8Array(binary.length);
  for (let i = 0; i < binary.length; i++) {
    bytes[i] = binary.charCodeAt(i);
  }
  return new TextDecoder().decode(bytes);
}

Both methods work. I prefer TextEncoder for readability, but the encodeURIComponent approach has wider browser support if you're targeting older environments.

Converting Images to Base64 (Data URLs)

Embedding small images as Base64 data URLs eliminates HTTP requests:

function fileToDataUrl(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

// Usage: preview an uploaded image
input.addEventListener('change', async (e) => {
  const dataUrl = await fileToDataUrl(e.target.files[0]);
  previewImg.src = dataUrl; // data:image/jpeg;base64,/9j/4AAQ...
});

When to use this: Icons under 4KB, single-use graphics, or when you need a self-contained HTML file.

When NOT to use this: Large images. A 2MB photo becomes a ~2.6MB string in your HTML, blocking rendering and bloating memory.

Base64 in Node.js

Node.js handles UTF-8 natively via Buffer:

// Encode
const encoded = Buffer.from('你好世界', 'utf-8').toString('base64');
// "5L2g5aW977yM5LiW55WM"

// Decode
const decoded = Buffer.from(encoded, 'base64').toString('utf-8');
// "你好世界"

Much simpler than the browser. If you're doing Base64 work on the server, Node.js is painless.

Base64URL: The JWT Variant

JWT tokens use Base64URL, not standard Base64. The differences:

Standard Base64	Base64URL
`+`	`-`
`/`	`_`
`=` padding	No padding

// Convert standard Base64 to Base64URL
function toBase64Url(b64) {
  return b64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
}

// Convert back
function fromBase64Url(b64url) {
  let b64 = b64url.replace(/-/g, '+').replace(/_/g, '/');
  while (b64.length % 4) b64 += '=';
  return b64;
}

If you're building or parsing JWTs, getting this wrong will cause silent authentication failures that are incredibly hard to debug.

Common Pitfalls

1. Base64 Is Not Encryption

This bears repeating: Base64 is encoding, not encryption. Anyone can decode it. Never use it to "protect" passwords, API keys, or sensitive data. Use proper encryption (AES, RSA) for that.

2. Memory Issues with Large Files

A 10MB video file becomes a ~13MB string. In the browser, this string lives in memory as a JavaScript string (UTF-16), so actual memory usage could be ~26MB. Processing multiple large files this way can crash tabs.

Solution: Use Blob and URL.createObjectURL() for large files instead of Base64.

3. Blocking the Main Thread

Encoding a large file synchronously will freeze the UI. Move it to a Web Worker:

// worker.js
self.onmessage = (e) => {
  const reader = new FileReaderSync();
  const result = reader.readAsDataURL(e.data.file);
  self.postMessage(result);
};

// main.js
const worker = new Worker('worker.js');
worker.postMessage({ file: largeFile });
worker.onmessage = (e) => {
  console.log('Done:', e.data.substring(0, 50) + '...');
};

Quick Reference

// Browser: ASCII only
btoa("Hello");           // "SGVsbG8="
atob("SGVsbG8=");        // "Hello"

// Browser: UTF-8 (use TextEncoder)
const bytes = new TextEncoder().encode("你好");
btoa(String.fromCharCode(...bytes)); // "5L2g5aW9"

// Node.js: UTF-8 native
Buffer.from('你好', 'utf-8').toString('base64'); // "5L2g5aW9"

// Base64URL (for JWT)
btoa(str).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');

// File to Data URL
new FileReader().readAsDataURL(file);

// HTTP Basic Auth header
'Basic ' + btoa('user:pass');

Testing Base64 Quickly

When debugging, you often need to quickly encode or decode a Base64 string without writing code. An online Base64 encoder/decoder handles UTF-8 correctly and shows both standard and URL-safe variants — useful when you're comparing JWT payloads or debugging API responses.

The key takeaway: Base64 is simple in concept but has enough edge cases (UTF-8, URL-safe variants, memory) that it's worth understanding the underlying mechanics rather than just copy-pasting btoa() calls.

If you found this helpful, I maintain a collection of 170+ free browser-based developer tools — all processing happens client-side, no data uploaded to servers. Check out the Base64 encoder/decoder or browse the full tools directory.

Cron Expressions Demystified: A Practical Guide for Developers

jiebang-tools — Tue, 23 Jun 2026 02:52:18 +0000

If you've ever set up a scheduled job, you've probably encountered cron expressions. They look cryptic at first glance — 0 30 9 * * MON-FRI — but once you understand the pattern, they're surprisingly logical.

This guide breaks down cron syntax from scratch, covers common gotchas, and shows you how to test your expressions before putting them in production.

The Five Fields

A standard cron expression has five fields separated by spaces:

┌───────────── minute (0–59)
│ ┌───────────── hour (0–23)
│ │ ┌───────────── day of month (1–31)
│ │ │ ┌───────────── month (1–12)
│ │ │ │ ┌───────────── day of week (0–7, where 0 and 7 are Sunday)
│ │ │ │ │
* * * * *

Each field accepts:

Exact values: 5 (at minute 5)
Ranges: 1-15 (from 1 to 15)
Steps: */5 (every 5 units)
Lists: 1,15,30 (at 1, 15, and 30)
Asterisk: * (every possible value)

Common Patterns

Expression	Meaning
`* * * * *`	Every minute
`/5 * * *`	Every 5 minutes
`0 * * * *`	Every hour, on the hour
`0 9 * * *`	Every day at 9:00 AM
`0 9 * * MON`	Every Monday at 9:00 AM
`0 0 1 * *`	First day of every month at midnight
`0 0 1 1 *`	January 1st at midnight (yearly)
`30 4 * * SUN`	Every Sunday at 4:30 AM

The Step Operator Gotcha

*/15 in the minute field means "every 15th minute starting from 0" — so it fires at 0, 15, 30, 45. It does not mean "15 minutes after the last run."

This matters when you combine steps with ranges:

0-30/15 * * * * → fires at minutes 0, 15, 30
*/15 * * * * → fires at minutes 0, 15, 30, 45

Day-of-Month vs Day-of-Week: The OR Logic

This trips up a lot of people. When you specify both day-of-month and day-of-week, cron uses OR logic, not AND.

0 9 15 * FRI means "9 AM on the 15th OR every Friday," not "9 AM on Friday the 15th."

If you need AND logic, you have to add a conditional check inside your script:

0 9 15 * * [ "$(date +\%u)" = "5" ] && your_command

Timezone Awareness

Cron runs in the system's local timezone by default. In containerized environments, this is often UTC. If your cron job needs to fire at 9 AM Shanghai time (UTC+8), you'd write 0 1 * * * in UTC.

Pro tip: Always document the timezone your cron expressions are set in. Future-you will thank present-you.

Testing Your Expressions

Before deploying a cron job, always verify the next few run times. You can use an online cron expression parser to quickly see when your expression will fire — no mental math required.

This is especially useful for complex expressions like 0 9 1-7 * MON (first Monday of every month... or is it? Remember the OR logic!)

6-Field vs 5-Field Cron

Some systems (like Spring's @Scheduled or AWS EventBridge) use a 6-field format with seconds:

┌──────── seconds (0–59)
│ ┌──────── minute (0–59)
│ │ ┌──────── hour (0–23)
│ │ │ ┌──────── day of month (1–31)
│ │ │ │ ┌──────── month (1–12)
│ │ │ │ │ ┌──────── day of week (0–7)
│ │ │ │ │ │
* * * * * *

AWS EventBridge also uses ? for "no specific value" in either day-of-month or day-of-week (you must use ? in one of them when the other is specified). Make sure you know which format your system expects.

Quick Reference Cheat Sheet

# Every 10 minutes
*/10 * * * *

# Every weekday at 9:30 AM
30 9 * * MON-FRI

# First day of each quarter at midnight
0 0 1 1,4,7,10 *

# Every 6 hours
0 */6 * * *

# Last day of month (requires script support)
0 0 28-31 * * [ "$(date +\%d -d tomorrow)" = "01" ] && your_command

Final Tips

Start simple. Get your schedule working with a basic expression first, then add complexity.
Always test. Parse the next 5–10 fire times before committing.
Document your intent. A comment like # Runs every Monday at 9 AM Shanghai time (1 AM UTC) prevents misinterpretation.
Watch for DST. Daylight saving time shifts can cause jobs to skip or fire twice.
Use locks. If a job might overlap with itself, use a lock file or distributed lock to prevent concurrent runs.

Cron expressions aren't hard — they're just unfamiliar. Once you internalize the five-field pattern and the OR logic between day fields, you'll rarely need to look up the syntax again.

If you want to quickly validate a cron expression and see the next run times, try the free Cron Expression Parser — paste your expression and get instant results.

Linux Chmod Permissions: A Complete Guide with Visual Examples

jiebang-tools — Tue, 16 Jun 2026 02:48:44 +0000

Linux Chmod Permissions: A Complete Guide with Visual Examples

Linux file permissions are essential knowledge for every developer, but what do 777, 755, and 644 actually mean? How do you read rwxr-xr-x? This guide explains everything from basics to advanced tricks.

The Three-Tier Permission Structure

Every Linux file has three permission groups for three types of users:

Role	Symbol	Meaning
Owner	u (user)	The file creator
Group	g (group)	Members of the same user group
Others	o (others)	Everyone else

Each permission group has three operations:

Operation	Symbol	Number
Read	r	4
Write	w	2
Execute	x	1

How to Calculate Numeric Permissions

Add up the numbers for each group, then combine all three groups.

Example: What does 755 mean?

Owner: 7 = 4(r) + 2(w) + 1(x) = Read, write, execute ✓
Group: 5 = 4(r) + 0(w) + 1(x) = Read and execute ✓
Others: 5 = 4(r) + 0(w) + 1(x) = Read and execute ✓

Example: What does 644 mean?

Owner: 6 = 4(r) + 2(w) + 0(x) = Read and write ✓
Group: 4 = 4(r) + 0(w) + 0(x) = Read only ✓
Others: 4 = 4(r) + 0(w) + 0(x) = Read only ✓

Common Permission Reference Table

Numeric	Symbolic	Typical Use Case
777	rwxrwxrwx	Temp directories (not recommended for production)
755	rwxr-xr-x	Executable files, website directories
644	rw-r--r--	Regular files, config files
700	rwx------	Private scripts, SSH directories
600	rw-------	SSH private keys, sensitive configs
444	r--r--r--	Read-only files
000	---------	No permissions at all

Understanding Symbolic Permissions

Symbolic permissions use 9 characters, grouped in threes:

rwx r-x r-x
├──┤ ├──┤ ├──┤
 Owner Group Others

Symbolic Syntax with chmod

# Add execute permission for owner
chmod u+x script.sh

# Remove write permission for group and others
chmod go-w config.yml

# Set all permissions at once
chmod u=rwx,g=rx,o=rx script.sh

Special Permissions

Beyond rwx, there are three special permission bits:

Special	Numeric	Symbolic	Purpose
SUID	4	u+s	Execute as file owner
SGID	2	g+s	Execute as file group
Sticky	1	o+t	Only owner can delete files

Example: What is 4755?

4 = SUID bit set
755 = Owner has rwx, group and others have rx

Common in /usr/bin/passwd - lets regular users run it as root to change passwords.

Practical Tips

Quick Security Check

# Find files with overly permissive permissions
find /var/www -perm 777 -type f

# Find SUID files (potential security risk)
find / -perm -4000 -type f

Standard Web Directory Permissions

# Directories: 755
find /var/www -type d -exec chmod 755 {} \;

# Files: 644
find /var/www -type f -exec chmod 644 {} \;

Don't Want to Calculate Manually? Use an Online Tool

Converting between numeric and symbolic permissions is error-prone, especially with special bits. I use an online Chmod calculator - just check the boxes and it auto-generates the command:

👉 Chmod Permission Calculator - Jiebang Tools

Check permissions → Auto-generate chmod 755 file command → Copy and use directly.

Summary

What You Want	Command
Make script executable	`chmod +x script.sh`
Protect config file	`chmod 600 config.yml`
Set web directory	`chmod 755 /var/www`
Set SUID bit	`chmod 4755 /usr/bin/cmd`
Batch set directories	`find . -type d -exec chmod 755 {} \;`

Remember: Use minimum permissions necessary, never use 777 by default. Security first!

DEV Community: jiebang-tools

Hashing in JavaScript: A Practical Guide to MD5, SHA-256, and SHA-512

Hashing in JavaScript: A Practical Guide to MD5, SHA-256, and SHA-512

1. Browser-Native: SubtleCrypto

Basic Usage

Supported Algorithms

2. File Hashing in the Browser

Large File Chunked Hashing

3. MD5 Implementation

4. Hashing in Node.js

5. HMAC: Keyed-Hash Message Authentication Code

6. Common Pitfalls

Pitfall 1: Encoding Issues

Pitfall 2: Case Sensitivity

Pitfall 3: SubtleCrypto Requires Secure Context

Pitfall 4: Never Hash Passwords Directly

Pitfall 5: MD5 Performance on Large Files

7. Algorithm Selection Guide

Tool Recommendation

Summary

HTML Entity Encoding in JavaScript: A Practical Guide with Real Examples

What Are HTML Entities?

Encoding in JavaScript

Method 1: String Replacement

Method 2: DOM API

Decoding HTML Entities

textContent vs innerHTML: The Core Distinction

Common Pitfalls (and How to Avoid Them)

1. Double Encoding

2. Unescaped Attribute Values

3. JavaScript Protocol in URLs

4. Server-Side vs Client-Side

Practical Example: Safe Comment Rendering

Quick Reference Table

Summary

URL Encoding & Decoding in JavaScript: A Practical Guide with Real Examples

What Is URL Encoding?

JavaScript's Built-in Encoding Functions

encodeURI

encodeURIComponent

The Golden Rule

Building Query Strings Safely

Decoding URLs

decodeURI

decodeURIComponent

Common Pitfalls (and How to Avoid Them)

1. Double Encoding

2. Mixing Up the Two Functions

3. Forgetting About + for Spaces

Modern Alternative: URLSearchParams

Practical Example: Building an API Request

Quick Reference Table

Summary

Building a Secure Password Generator in JavaScript: A Practical Guide

Why Password Strength Matters

The Three Pillars of Secure Password Generation

1. Random Source Quality

2. Character Space

3. Frontend vs Backend Generation

Comparing Password Solutions

Browser Built-in Generators

Password Managers (1Password, Bitwarden, KeePass)

Online Password Generators

Command Line

How to Tell if an Online Tool is Safe

Check 1: Watch Network Requests

Check 2: Inspect Source Code

Building a Secure Generator

Calculating Password Entropy

Use a Ready-Made Tool

Summary

JSON Formatting in JavaScript: A Practical Guide with Real Examples

JSON Formatting in JavaScript: A Practical Guide with Real Examples

Why JSON Formatting Matters

JavaScript's Built-in JSON Methods

JSON.stringify() with Indentation

JSON.parse() with Validation

The Replacer Function: Selective Formatting

Common JSON Formatting Pitfalls

1. Trailing Commas

`encodeURI`

`encodeURIComponent`

`decodeURI`

`decodeURIComponent`

3. Forgetting About `+` for Spaces

`JSON.stringify()` with Indentation

`JSON.parse()` with Validation

`JSON.stringify()` with Indentation

`JSON.parse()` with Validation

The `btoa()` Trap