DEV Community: jiebang-tools

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

Base64 Encoding in JavaScript: A Practical Guide with Real Examples

What Base64 Actually Does

The btoa() Trap

Encoding UTF-8 Strings (Browser)

Method 1: encodeURIComponent Trick

Method 2: TextEncoder (Modern)

Converting Images to Base64 (Data URLs)

Base64 in Node.js

Base64URL: The JWT Variant

Common Pitfalls

1. Base64 Is Not Encryption

2. Memory Issues with Large Files

3. Blocking the Main Thread

Quick Reference

Testing Base64 Quickly

Cron Expressions Demystified: A Practical Guide for Developers

The Five Fields

Common Patterns

The Step Operator Gotcha

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

Timezone Awareness

Testing Your Expressions

6-Field vs 5-Field Cron

Quick Reference Cheat Sheet

Final Tips

Linux Chmod Permissions: A Complete Guide with Visual Examples

Linux Chmod Permissions: A Complete Guide with Visual Examples

The Three-Tier Permission Structure

How to Calculate Numeric Permissions

Example: What does 755 mean?

Example: What does 644 mean?

Common Permission Reference Table

Understanding Symbolic Permissions

Symbolic Syntax with chmod

Special Permissions

Example: What is 4755?

Practical Tips

Quick Security Check

Standard Web Directory Permissions

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

Summary

The `btoa()` Trap