10 cheat sheets, 5 ready-to-use templates, and a complete automation workflow guide. Built by the team behind 125+ free tools.
Scroll down to access all 16 resources. We also sent a copy to your inbox.
16 hand-crafted resources for modern developers
Every modern JS feature in one page. Destructuring, async/await, optional chaining, pattern matching, and more.
Conversion-optimized HTML/CSS template with dark mode, responsive grid, trust sections, and CTA patterns.
Visual reference for every Flexbox and Grid property. Includes common layout patterns and responsive breakpoints.
Step-by-step guide to automating 10 common business tasks. Includes decision trees and tool recommendations.
Beyond the basics: interactive rebase, cherry-pick, bisect, worktrees, and advanced recovery commands.
Production-ready Node.js API template with auth, validation, error handling, rate limiting, and OpenAPI docs.
50 battle-tested regex patterns for emails, URLs, phone numbers, dates, passwords, and data extraction.
5 responsive HTML email templates for welcome, newsletter, product update, transactional, and re-engagement.
Every status code explained with real-world context. When to use 201 vs 200, 401 vs 403, 502 vs 503.
JOINs visualized, window functions, CTEs, indexes, query optimization tips, and common anti-patterns.
Admin dashboard HTML/CSS with sidebar nav, data tables, charts placeholder, stat cards, and dark/light mode.
Container lifecycle, networking, volumes, docker-compose patterns, multi-stage builds, and troubleshooting.
3-tier pricing page template with toggle, feature comparison, FAQ accordion, and psychological anchoring.
Utility types, generics, conditional types, mapped types, template literals, and type inference patterns.
CSP, CORS, HSTS, and every security header with copy-paste configs for Nginx, Apache, and Cloudflare.
OAuth 2.0, JWT, API keys, session tokens — when to use each, implementation patterns, and security tradeoffs.
The most useful modern JavaScript features on one page.
// Optional Chaining + Nullish Coalescing
const name = user?.profile?.name ?? 'Anonymous';
// Array.at() — negative indexing
const last = arr.at(-1);
// Object.groupBy()
const grouped = Object.groupBy(users, u => u.role);
// Promise.withResolvers()
const { promise, resolve, reject } = Promise.withResolvers();
// Temporal API (replacing moment.js)
const now = Temporal.Now.zonedDateTimeISO();
const tomorrow = now.add({ days: 1 });
// Pattern Matching (Stage 3)
match (response) {
when ({ status: 200, body }) => handleSuccess(body),
when ({ status: 404 }) => handleNotFound(),
when ({ status }) if (status >= 500) => handleError(),
}
// Decorators
@logged @cached
class UserService {
@validate
async getUser(id) { ... }
}
// Using declarations (auto-cleanup)
using file = await openFile('data.csv');
// file automatically closed when scope exits
// Structured Clone (deep copy)
const copy = structuredClone(original);
// Iterator Helpers
const names = users.values()
.filter(u => u.active)
.map(u => u.name)
.take(10)
.toArray();
Visual mental model for the two most important CSS layout systems.
/* ═══ FLEXBOX ═══ */
.flex-container {
display: flex;
flex-direction: row | column; /* main axis */
justify-content: center; /* main axis alignment */
align-items: center; /* cross axis alignment */
gap: 16px; /* spacing between items */
flex-wrap: wrap; /* allow wrapping */
}
.flex-item {
flex: 1; /* grow to fill */
flex: 0 0 300px; /* fixed width, no grow/shrink */
align-self: flex-end; /* override alignment */
order: -1; /* reorder visually */
}
/* ═══ GRID ═══ */
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
/* Named areas */
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
.grid-item {
grid-column: span 2; /* span 2 columns */
grid-area: header; /* place in named area */
}
/* ═══ COMMON PATTERNS ═══ */
/* Holy Grail Layout */
.layout { display: grid; grid-template: auto 1fr auto / 200px 1fr 200px; min-height: 100vh; }
/* Sticky Footer */
body { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; }
/* Card Grid */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
/* Centering */
.center { display: grid; place-items: center; }
Go beyond push/pull/commit. These commands save hours of debugging.
# ═══ UNDO & RECOVERY ═══ git reflog # See ALL history (even deleted commits) git reset --soft HEAD~1 # Undo last commit, keep changes staged git restore --source=HEAD~3 file.js # Restore file from 3 commits ago git stash push -m "wip feature" # Named stash git stash pop # Apply & remove latest stash git cherry-pick abc123 # Apply specific commit to current branch # ═══ REBASE & HISTORY ═══ git rebase -i HEAD~5 # Squash/reorder last 5 commits git commit --fixup=abc123 # Mark as fixup for commit git rebase -i --autosquash # Auto-squash fixup commits git log --oneline --graph --all # Visual branch history # ═══ DEBUGGING ═══ git bisect start # Binary search for bug git bisect bad # Current commit has bug git bisect good v1.0 # This version was clean # Git will checkout middle commits for you to test git blame -L 10,20 file.js # Who changed lines 10-20 # ═══ ADVANCED ═══ git worktree add ../hotfix main # Work on 2 branches simultaneously git diff --stat main...feature # Changes since branch diverged git log --all --oneline -- file.js # All commits touching a file git shortlog -sn --no-merges # Contributor leaderboard
Copy-paste patterns that work in every language.
// Email
/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
// URL (http/https)
/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&\/\/=]*)/
// Phone (international)
/^\+?[1-9]\d{1,14}$/
// Strong Password (8+ chars, upper, lower, digit, special)
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/
// IPv4
/^(?:(?:25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d\d?)$/
// Hex Color
/^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/
// Date (YYYY-MM-DD)
/^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/
// Slug
/^[a-z0-9]+(?:-[a-z0-9]+)*$/
// HTML Tags (strip)
/<[^>]*>/g
// Credit Card (basic)
/^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|3[47][0-9]{13})$/
Quick reference with real-world context.
200 OK — Success. Return data. 201 Created — Resource created (POST). Return it + Location header. 204 No Content — Success but nothing to return (DELETE). 301 Moved Perm. — URL changed forever. Search engines update. 302 Found — Temporary redirect. Keep bookmarks. 304 Not Modified — Use cached version. Saves bandwidth. 400 Bad Request — Client sent garbage. Show validation errors. 401 Unauthorized — Not logged in. Show login form. 403 Forbidden — Logged in but no permission. Show error. 404 Not Found — Resource doesn't exist. Show helpful 404 page. 405 Method Not OK — Wrong HTTP method (POST to GET-only endpoint). 409 Conflict — Resource conflict (duplicate email, version mismatch). 422 Unprocessable — Valid JSON but business logic rejects it. 429 Too Many Req. — Rate limited. Include Retry-After header. 500 Server Error — Our fault. Log it, alert team, show sorry page. 502 Bad Gateway — Upstream server down. Usually infrastructure. 503 Unavailable — Maintenance or overloaded. Include Retry-After.
JOINs, window functions, CTEs — the patterns you use every day.
-- ═══ JOINS (visual) ═══
-- INNER: only matching rows from both tables
-- LEFT: all from left + matching from right (NULL if no match)
-- RIGHT: all from right + matching from left
-- FULL: all from both (NULLs where no match)
SELECT u.name, COUNT(o.id) as orders
FROM users u
LEFT JOIN orders o ON o.user_id = u.id
GROUP BY u.id
HAVING COUNT(o.id) > 5;
-- ═══ WINDOW FUNCTIONS ═══
SELECT name, department, salary,
RANK() OVER (PARTITION BY department ORDER BY salary DESC) as dept_rank,
salary - LAG(salary) OVER (ORDER BY hire_date) as salary_diff,
SUM(salary) OVER (PARTITION BY department) as dept_total
FROM employees;
-- ═══ CTEs (Common Table Expressions) ═══
WITH monthly_revenue AS (
SELECT DATE_TRUNC('month', created_at) AS month, SUM(amount) AS revenue
FROM orders WHERE status = 'paid'
GROUP BY 1
)
SELECT month, revenue,
revenue - LAG(revenue) OVER (ORDER BY month) AS growth
FROM monthly_revenue;
Container management, networking, and troubleshooting.
# ═══ CONTAINERS ═══ docker run -d -p 3000:3000 --name app myimage docker exec -it app sh # Shell into container docker logs -f app # Follow logs docker stats # Resource usage (live) docker inspect app | jq '.[0].NetworkSettings' # ═══ IMAGES ═══ docker build -t myapp:v1 . docker build --target production . # Multi-stage: specific target # Multi-stage Dockerfile (production pattern): # FROM node:20-alpine AS deps # WORKDIR /app # COPY package*.json ./ # RUN npm ci --only=production # FROM node:20-alpine # COPY --from=deps /app/node_modules ./node_modules # COPY . . # CMD ["node", "server.js"] # ═══ COMPOSE ═══ docker compose up -d # Start all services docker compose logs -f web # Follow one service docker compose exec db psql -U postgres docker compose down -v # Stop + remove volumes # ═══ CLEANUP ═══ docker system prune -a # Remove ALL unused docker volume prune # Remove unused volumes
Copy-paste into your Nginx, Apache, or Cloudflare config.
# ═══ NGINX ═══ add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:;" always; add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload" always; add_header X-Content-Type-Options "nosniff" always; add_header X-Frame-Options "SAMEORIGIN" always; add_header Referrer-Policy "strict-origin-when-cross-origin" always; add_header Permissions-Policy "camera=(), microphone=(), geolocation=()" always; # ═══ .HTACCESS (Apache) ═══ Header always set X-Content-Type-Options "nosniff" Header always set X-Frame-Options "SAMEORIGIN" Header always set Strict-Transport-Security "max-age=63072000; includeSubDomains" Header always set Referrer-Policy "strict-origin-when-cross-origin" Header always set Content-Security-Policy "default-src 'self'" # ═══ META TAGS (HTML fallback) ═══ <meta http-equiv="Content-Security-Policy" content="default-src 'self'"> <meta http-equiv="X-Content-Type-Options" content="nosniff">
When to use what — and the security tradeoffs of each.
/* ═══ JWT (JSON Web Tokens) ═══ * Best for: SPAs, mobile apps, microservices * Pros: Stateless, scalable, no DB lookups * Cons: Can't revoke individual tokens easily */ // Access token: short-lived (15min), in memory // Refresh token: long-lived (7d), HttpOnly cookie Authorization: Bearer eyJhbGciOiJIUzI1NiIs... /* ═══ API Keys ═══ * Best for: Server-to-server, public APIs * Pros: Simple, good for rate limiting per client * Cons: No user context, hard to rotate */ X-API-Key: sk_live_abc123def456 /* ═══ OAuth 2.0 ═══ * Best for: Third-party access, "Login with Google" * Flows: Authorization Code (web), PKCE (mobile/SPA) * Never use: Implicit flow (deprecated, insecure) */ /* ═══ Session Tokens ═══ * Best for: Traditional server-rendered apps * Pros: Easy to revoke, server controls everything * Cons: Needs session store, doesn't scale as easily */ Set-Cookie: session=abc123; HttpOnly; Secure; SameSite=Strict
The types you'll use in every TypeScript project.
// ═══ BUILT-IN UTILITY TYPES ═══
Partial<User> // All props optional
Required<User> // All props required
Readonly<User> // All props readonly
Pick<User, 'id'|'name'> // Only specified props
Omit<User, 'password'> // All except specified
Record<string, User> // Dictionary type
Extract<T, U> // Types in T assignable to U
Exclude<T, U> // Types in T NOT assignable to U
NonNullable<T> // Remove null & undefined
ReturnType<typeof fn> // Return type of function
Parameters<typeof fn> // Parameter types as tuple
Awaited<Promise<T>> // Unwrap promise type
// ═══ CUSTOM PATTERNS ═══
// Deep Partial
type DeepPartial<T> = { [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K] };
// Branded Types (prevent mixing IDs)
type UserId = string & { __brand: 'UserId' };
type OrderId = string & { __brand: 'OrderId' };
// Discriminated Union
type Result<T> = { ok: true; data: T } | { ok: false; error: string };
// Template Literal Types
type Route = `/${string}`;
type EventName = `on${Capitalize<string>}`;
Conversion-optimized structure. Just customize the content.
<!-- Hero --> <section class="hero"> <span class="badge">New</span> <h1>Your headline with <span class="gradient">key benefit</span></h1> <p>Supporting copy. Address the pain, show the solution.</p> <a href="#pricing" class="cta-primary">Get Started Free</a> <div class="trust-bar">Trusted by 1,000+ teams</div> </section> <!-- Social Proof → Features → Pricing → FAQ → Final CTA -->
Production-ready Express setup with auth, validation, and error handling.
// server.js — Express API boilerplate
const express = require('express');
const helmet = require('helmet');
const rateLimit = require('express-rate-limit');
const cors = require('cors');
const app = express();
app.use(helmet());
app.use(cors({ origin: process.env.ALLOWED_ORIGINS?.split(',') }));
app.use(express.json({ limit: '10kb' }));
app.use(rateLimit({ windowMs: 15 * 60 * 1000, max: 100 }));
// Routes
app.use('/api/v1/users', require('./routes/users'));
app.use('/api/v1/auth', require('./routes/auth'));
// Global error handler
app.use((err, req, res, next) => {
console.error(err.stack);
res.status(err.status || 500).json({
error: { message: err.message, code: err.code || 'INTERNAL_ERROR' }
});
});
app.listen(process.env.PORT || 3000);
Works in Gmail, Outlook, Apple Mail. Dark mode compatible.
<!-- Responsive email — tested on 50+ clients -->
<table role="presentation" width="100%" style="max-width:600px;margin:0 auto">
<tr><td style="padding:40px 24px;text-align:center">
<h1 style="font-size:24px;color:#1a1a2e">Welcome!</h1>
<p style="font-size:16px;color:#666;line-height:1.6">
Thanks for signing up. Here's what to do next:
</p>
<a href="#" style="display:inline-block;padding:14px 28px;
background:#6366f1;color:#fff;border-radius:8px;
font-weight:600;text-decoration:none">Get Started</a>
</td></tr>
</table>
Admin dashboard layout with sidebar, stats cards, and data table.
<div class="dashboard">
<aside class="sidebar">
<nav>
<a href="#" class="active">Dashboard</a>
<a href="#">Analytics</a>
<a href="#">Users</a>
<a href="#">Settings</a>
</nav>
</aside>
<main class="content">
<div class="stats-grid">
<div class="stat-card">
<span class="label">Revenue</span>
<span class="value">$12,450</span>
<span class="trend up">+12.5%</span>
</div>
<!-- More cards... -->
</div>
<table class="data-table">...</table>
</main>
</div>
<style>
.dashboard { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sidebar { background: #111; padding: 24px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.stat-card { padding: 20px; background: #1a1a2e; border-radius: 12px; }
</style>
3-tier pricing with psychological anchoring built in.
<div class="pricing-grid">
<div class="plan">
<h3>Starter</h3>
<div class="price">$9<span>/mo</span></div>
<ul><li>5 projects</li><li>Basic analytics</li></ul>
<a href="#" class="btn-outline">Get Started</a>
</div>
<div class="plan popular"> <!-- Highlighted -->
<span class="badge">Most Popular</span>
<h3>Pro</h3>
<div class="price"><s>$49</s> $29<span>/mo</span></div>
<ul><li>Unlimited projects</li><li>Advanced analytics</li><li>Priority support</li></ul>
<a href="#" class="btn-primary">Start Free Trial</a>
</div>
<div class="plan">
<h3>Enterprise</h3>
<div class="price">$99<span>/mo</span></div>
<ul><li>Everything in Pro</li><li>Custom integrations</li><li>Dedicated support</li></ul>
<a href="#" class="btn-outline">Contact Sales</a>
</div>
</div>
Each workflow saves 2-5 hours per week. Sorted by impact.
1. EMAIL FOLLOW-UPS
Trigger: New lead form submission
Action: Send personalized follow-up sequence (Day 0, 2, 5, 8)
Tool: Mailchimp / SendGrid + Zapier
Saves: 5 hrs/week
2. INVOICE GENERATION
Trigger: Project marked complete
Action: Generate PDF invoice, send to client, log in spreadsheet
Tool: Google Sheets + Apps Script
Saves: 3 hrs/week
3. SOCIAL MEDIA SCHEDULING
Trigger: Blog post published
Action: Create 5 social posts (Twitter, LinkedIn, FB), schedule over 2 weeks
Tool: Buffer / Later + RSS trigger
Saves: 4 hrs/week
4. CUSTOMER ONBOARDING
Trigger: Payment received
Action: Create project folder, send welcome email, add to CRM, schedule kickoff
Tool: Zapier / Make multi-step zap
Saves: 2 hrs/week
5. REPORT GENERATION
Trigger: Monday 8 AM (weekly)
Action: Pull data from analytics, format into PDF, email to stakeholders
Tool: Google Apps Script + Data Studio
Saves: 3 hrs/week
6. LEAD QUALIFICATION
Trigger: New form submission
Action: Score lead (company size, budget, urgency), route to appropriate rep
Tool: Zapier + Google Sheets scoring formula
Saves: 2 hrs/week
7. FILE BACKUP
Trigger: Daily at midnight
Action: Sync project files to cloud backup, verify integrity, alert on failure
Tool: rclone + cron + Slack webhook
Saves: 1 hr/week (prevents catastrophic loss)
8. CONTENT REPURPOSING
Trigger: New blog post
Action: Extract key points, create tweet thread, LinkedIn post, email snippet
Tool: AI API + scheduling tool
Saves: 3 hrs/week
9. ERROR MONITORING
Trigger: Server error (5xx) detected
Action: Log details, create ticket, alert team via Slack, auto-restart if possible
Tool: UptimeRobot + Slack + PagerDuty
Saves: 2 hrs/week (prevents revenue loss)
10. MEETING NOTES
Trigger: Calendar event ends
Action: Transcribe recording, extract action items, send summary to attendees
Tool: Otter.ai / Fireflies + email
Saves: 2 hrs/week
NexTool Pro includes premium templates, automation workflows, and 100+ AI prompts — all in one package.
Get NexTool Pro — $29