📦 Snippet Vault

🔍
Folders
Tags:

⌨️ Keyboard Shortcuts

New snippetN
Search/
Favorite toggleF
Copy code⌘ + C (when not in editor)
Dashboard1
Editor2
Delete snippetBackspace
DuplicateD
Export allE
Help?
Close/BackEsc
Navigate list↑ / ↓
Tab in editorTab

Syntax Highlighting: 15 languages supported

JavaScript, TypeScript, Python, HTML, CSS, SQL, Bash, JSON, Go, Rust, Java, C/C++, Ruby, PHP, YAML

`; const blob = new Blob([html],{type:'text/html'}); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = `${s.title.replace(/[^a-zA-Z0-9]/g,'-')}.html`; a.click(); toast('Exported as HTML'); } // ============ IMPORT/EXPORT ============ function exportAll() { const data = {snippets:state.snippets,folders:state.folders,exported:new Date().toISOString()}; const blob = new Blob([JSON.stringify(data,null,2)],{type:'application/json'}); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = `snippet-vault-${new Date().toISOString().slice(0,10)}.json`; a.click(); toast('Exported!'); } function importAll(e) { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = (ev) => { try { const data = JSON.parse(ev.target.result); if (data.snippets) { const existIds = new Set(state.snippets.map(s=>s.id)); let added = 0; data.snippets.forEach(s => { if (!existIds.has(s.id)) { state.snippets.push(s); added++; } }); if (data.folders) { const existF = new Set(state.folders.map(f=>f.id)); data.folders.forEach(f => { if (!existF.has(f.id)) state.folders.push(f); }); } save(); render(); toast(`Imported ${added} new snippets`); } } catch(err) { toast('Invalid JSON file'); } }; reader.readAsText(file); e.target.value = ''; } // ============ SYNTAX HIGHLIGHTING ============ function highlightCode(code, lang) { const e = esc(code); const rules = { javascript: [ [/\b(const|let|var|function|return|if|else|for|while|do|switch|case|break|continue|new|this|class|extends|import|from|export|default|async|await|try|catch|throw|finally|typeof|instanceof|in|of|yield|void|delete|null|undefined|true|false|NaN|Infinity)\b/g,'keyword'], [/(\/\/.*$)/gm,'comment'], [/(\/\*[\s\S]*?\*\/)/g,'comment'], [/(`(?:\\.|[^`])*`)/g,'string'], [/('(?:\\.|[^'])*')/g,'string'], [/("(?:\\.|[^"])*")/g,'string'], [/\b(\d+\.?\d*(?:e[+-]?\d+)?)\b/g,'number'], [/\b([A-Z][a-zA-Z0-9]*)\b/g,'type'], [/(=>|===|!==|==|!=|<=|>=|&&|\|\||[+\-*/%]=?)/g,'operator'], ], typescript: null, // inherits JS python: [ [/\b(def|class|return|if|elif|else|for|while|break|continue|import|from|as|try|except|finally|raise|with|yield|lambda|pass|None|True|False|and|or|not|in|is|global|nonlocal|assert|del|async|await|self)\b/g,'keyword'], [/(#.*$)/gm,'comment'], [/('''[\s\S]*?'''|"""[\s\S]*?""")/g,'string'], [/('(?:\\.|[^'])*')/g,'string'], [/("(?:\\.|[^"])*")/g,'string'], [/\b(\d+\.?\d*(?:e[+-]?\d+)?)\b/g,'number'], [/\b([A-Z][a-zA-Z0-9_]*)\b/g,'type'], [/@(\w+)/g,'func'], ], html: [ [/(<\/?)([\w-]+)/g, (m,p1,p2) => `${p1}${p2}`], [/\b([\w-]+)(=)/g, (m,p1,p2) => `${p1}${p2}`], [/("(?:\\.|[^"])*")/g,'string'], [/('(?:\\.|[^'])*')/g,'string'], [/(<!--[\s\S]*?-->)/g,'comment'], ], css: [ [/(\/\*[\s\S]*?\*\/)/g,'comment'], [/([.#][\w-]+)/g,'func'], [/([\w-]+)\s*:/g, (m,p1) => `${p1}:`], [/('(?:\\.|[^'])*')/g,'string'], [/("(?:\\.|[^"])*")/g,'string'], [/\b(\d+\.?\d*)(px|em|rem|%|vh|vw|s|ms|deg|fr)?\b/g,'number'], [/(@[\w-]+)\b/g,'keyword'], [/\b(important|inherit|initial|unset|none|auto|flex|grid|block|inline|relative|absolute|fixed|sticky)\b/g,'keyword'], ], sql: [ [/\b(SELECT|FROM|WHERE|AND|OR|NOT|INSERT|INTO|VALUES|UPDATE|SET|DELETE|CREATE|TABLE|ALTER|DROP|JOIN|INNER|LEFT|RIGHT|OUTER|ON|AS|ORDER|BY|GROUP|HAVING|LIMIT|OFFSET|UNION|ALL|DISTINCT|IN|BETWEEN|LIKE|IS|NULL|EXISTS|CASE|WHEN|THEN|ELSE|END|COUNT|SUM|AVG|MAX|MIN|INDEX|PRIMARY|KEY|FOREIGN|REFERENCES|DEFAULT|CONSTRAINT|CASCADE|TRIGGER|VIEW|GRANT|REVOKE|BEGIN|COMMIT|ROLLBACK)\b/gi,'keyword'], [/(--.*$)/gm,'comment'], [/(\/\*[\s\S]*?\*\/)/g,'comment'], [/('(?:\\.|[^'])*')/g,'string'], [/\b(\d+\.?\d*)\b/g,'number'], ], bash: [ [/\b(if|then|else|elif|fi|for|while|do|done|case|esac|in|function|return|local|export|source|alias|unalias|echo|printf|read|set|unset|shift|exit|cd|pwd|ls|cp|mv|rm|mkdir|chmod|chown|grep|sed|awk|find|cat|head|tail|sort|wc|curl|wget|git|npm|node|python|pip|docker|sudo|apt|brew|yarn)\b/g,'keyword'], [/(#.*$)/gm,'comment'], [/("(?:\\.|[^"])*")/g,'string'], [/('(?:\\.|[^'])*')/g,'string'], [/(\$\{?\w+\}?)/g,'func'], [/\b(\d+)\b/g,'number'], ], json: [ [/("(?:\\.|[^"])*")\s*:/g, (m,p1) => `${p1}:`], [/:\s*("(?:\\.|[^"])*")/g, (m,p1) => `: ${p1}`], [/\b(true|false|null)\b/g,'keyword'], [/\b(-?\d+\.?\d*(?:e[+-]?\d+)?)\b/g,'number'], ], go: [ [/\b(func|package|import|return|if|else|for|range|switch|case|default|break|continue|go|defer|chan|select|type|struct|interface|map|var|const|nil|true|false|make|new|len|cap|append|copy|delete|close|panic|recover)\b/g,'keyword'], [/(\/\/.*$)/gm,'comment'], [/(\/\*[\s\S]*?\*\/)/g,'comment'], [/("(?:\\.|[^"])*")/g,'string'], [/(`(?:\\.|[^`])*`)/g,'string'], [/\b(\d+\.?\d*)\b/g,'number'], [/\b(string|int|int64|float64|bool|byte|error|any)\b/g,'type'], ], rust: [ [/\b(fn|let|mut|const|if|else|for|while|loop|match|return|use|mod|pub|struct|enum|impl|trait|where|self|Self|super|crate|as|in|ref|move|async|await|unsafe|dyn|type|true|false|None|Some|Ok|Err)\b/g,'keyword'], [/(\/\/.*$)/gm,'comment'], [/(\/\*[\s\S]*?\*\/)/g,'comment'], [/("(?:\\.|[^"])*")/g,'string'], [/\b(\d+\.?\d*(?:_\d+)*)\b/g,'number'], [/\b(i32|i64|u32|u64|f32|f64|bool|str|String|Vec|Option|Result|Box|Rc|Arc)\b/g,'type'], ], java: [ [/\b(public|private|protected|static|final|abstract|class|interface|extends|implements|new|return|if|else|for|while|do|switch|case|break|continue|try|catch|finally|throw|throws|import|package|this|super|void|null|true|false|instanceof|synchronized|volatile|transient|native|enum)\b/g,'keyword'], [/(\/\/.*$)/gm,'comment'], [/(\/\*[\s\S]*?\*\/)/g,'comment'], [/("(?:\\.|[^"])*")/g,'string'], [/\b(\d+\.?\d*[dDfFlL]?)\b/g,'number'], [/\b(int|long|float|double|boolean|char|byte|short|String|Integer|Long|Double|Float|Boolean|List|Map|Set|Array|Object|Class|System|Math)\b/g,'type'], [/@(\w+)/g,'func'], ], c: [ [/\b(if|else|for|while|do|switch|case|break|continue|return|goto|typedef|struct|union|enum|sizeof|static|extern|const|volatile|register|inline|void|NULL|true|false|include|define|ifdef|ifndef|endif|pragma)\b/g,'keyword'], [/(\/\/.*$)/gm,'comment'], [/(\/\*[\s\S]*?\*\/)/g,'comment'], [/("(?:\\.|[^"])*")/g,'string'], [/('(?:\\.|[^'])')/g,'string'], [/\b(\d+\.?\d*[uUlLfF]*)\b/g,'number'], [/(#\w+)/g,'func'], [/\b(int|char|float|double|long|short|unsigned|signed|size_t|FILE|void)\b/g,'type'], ], ruby: [ [/\b(def|end|class|module|if|elsif|else|unless|while|until|for|do|begin|rescue|ensure|raise|return|yield|require|include|extend|attr_accessor|attr_reader|attr_writer|puts|print|nil|true|false|self|super|new|then|and|or|not|in|when|case)\b/g,'keyword'], [/(#.*$)/gm,'comment'], [/("(?:\\.|[^"])*")/g,'string'], [/('(?:\\.|[^'])*')/g,'string'], [/\b(\d+\.?\d*)\b/g,'number'], [/(:\w+)/g,'func'], [/(@\w+)/g,'property'], ], php: [ [/\b(function|class|return|if|else|elseif|for|foreach|while|do|switch|case|break|continue|new|echo|print|require|include|use|namespace|public|private|protected|static|const|var|null|true|false|array|isset|empty|unset|die|exit|try|catch|throw|finally|abstract|interface|extends|implements|trait|yield|match)\b/g,'keyword'], [/(\/\/.*$)/gm,'comment'], [/(#.*$)/gm,'comment'], [/(\/\*[\s\S]*?\*\/)/g,'comment'], [/("(?:\\.|[^"])*")/g,'string'], [/('(?:\\.|[^'])*')/g,'string'], [/(\$\w+)/g,'func'], [/\b(\d+\.?\d*)\b/g,'number'], ], yaml: [ [/(#.*$)/gm,'comment'], [/^(\s*[\w.-]+)(\s*:)/gm, (m,p1,p2) => `${p1}${p2}`], [/("(?:\\.|[^"])*")/g,'string'], [/('(?:\\.|[^'])*')/g,'string'], [/\b(true|false|null|yes|no|on|off)\b/gi,'keyword'], [/\b(\d+\.?\d*)\b/g,'number'], ], }; rules.typescript = rules.javascript; rules.cpp = rules.c; const langRules = rules[lang]; if (!langRules) return e; // Token-based highlighting to avoid nested spans const tokens = []; let working = e; langRules.forEach(rule => { const [regex, cls] = rule; if (typeof cls === 'function') return; // skip function-based rules for simple pass working = working.replace(regex, (match, ...groups) => { if (typeof cls === 'function') return cls(match, ...groups); return `${match}`; }); }); // Handle function-based rules langRules.forEach(rule => { if (typeof rule[1] === 'function') { working = working.replace(rule[0], rule[1]); } }); return working; } function esc(s) { return String(s).replace(/&/g,'&').replace(//g,'>').replace(/"/g,'"'); } // ============ LINE NUMBERS ============ function updateLineNumbers() { const editor = document.getElementById('codeEditor'); const ln = document.getElementById('lineNumbers'); const lines = editor.value.split('\n').length; ln.innerHTML = Array.from({length:lines},(_,i)=>`
${i+1}
`).join(''); } // ============ HELPERS ============ function timeAgo(iso) { const d = new Date(iso); const s = Math.floor((Date.now()-d)/1000); if (s<60) return 'just now'; if (s<3600) return Math.floor(s/60)+'m ago'; if (s<86400) return Math.floor(s/3600)+'h ago'; if (s<604800) return Math.floor(s/86400)+'d ago'; return d.toLocaleDateString(); } function toast(msg) { const el = document.getElementById('toast'); el.textContent = msg; el.classList.add('show'); setTimeout(()=>el.classList.remove('show'),2000); } function toggleHelp() { document.getElementById('helpOverlay').classList.toggle('show'); } // ============ EVENT LISTENERS ============ document.getElementById('titleInput').addEventListener('input', (e) => { const s = getActive(); if (s) { s.title = e.target.value; s.updated = new Date().toISOString(); save(); renderList(); } }); document.getElementById('codeEditor').addEventListener('input', (e) => { const s = getActive(); if (s) { s.code = e.target.value; s.updated = new Date().toISOString(); save(); updateLineNumbers(); } }); document.getElementById('codeEditor').addEventListener('scroll', () => { document.getElementById('lineNumbers').scrollTop = document.getElementById('codeEditor').scrollTop; }); document.getElementById('codeEditor').addEventListener('keydown', (e) => { if (e.key === 'Tab') { e.preventDefault(); const ta = e.target; const start = ta.selectionStart, end = ta.selectionEnd; ta.value = ta.value.substring(0,start) + ' ' + ta.value.substring(end); ta.selectionStart = ta.selectionEnd = start + 2; ta.dispatchEvent(new Event('input')); } }); document.getElementById('notesInput').addEventListener('input', (e) => { const s = getActive(); if (s) { s.notes = e.target.value; s.updated = new Date().toISOString(); save(); } }); document.getElementById('tagInput').addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); const s = getActive(); const v = e.target.value.trim(); if (s && v && !s.tags.includes(v)) { s.tags.push(v); s.updated = new Date().toISOString(); save(); e.target.value = ''; render(); } } }); document.getElementById('searchInput').addEventListener('input', (e) => { state.search = e.target.value; renderList(); }); document.getElementById('folderNameInput').addEventListener('keydown', (e) => { if (e.key === 'Enter') saveFolder(); if (e.key === 'Escape') closeFolderModal(); }); // Global keyboard shortcuts document.addEventListener('keydown', (e) => { const tag = e.target.tagName; const inInput = tag==='INPUT'||tag==='TEXTAREA'||tag==='SELECT'; // Esc closes modals if (e.key === 'Escape') { if (document.getElementById('helpOverlay').classList.contains('show')) { toggleHelp(); return; } if (document.getElementById('folderModal').classList.contains('show')) { closeFolderModal(); return; } if (inInput) { e.target.blur(); return; } } if (inInput) return; if (e.key === 'n' || e.key === 'N') { e.preventDefault(); newSnippet(); } if (e.key === '/') { e.preventDefault(); document.getElementById('searchInput').focus(); } if (e.key === 'f' || e.key === 'F') { e.preventDefault(); toggleFav(); } if (e.key === 'd' || e.key === 'D') { e.preventDefault(); duplicateSnippet(); } if (e.key === 'e' || e.key === 'E') { e.preventDefault(); exportAll(); } if (e.key === '?') { e.preventDefault(); toggleHelp(); } if (e.key === '1') { e.preventDefault(); setView('editor'); } if (e.key === '2') { e.preventDefault(); setView('dashboard'); } if (e.key === 'Backspace') { e.preventDefault(); deleteSnippet(); } // Arrow navigation if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault(); const items = document.querySelectorAll('.snippet-item'); if (!items.length) return; let idx = -1; items.forEach((el,i) => { if (el.classList.contains('active')) idx = i; }); if (e.key === 'ArrowDown') idx = Math.min(idx+1, items.length-1); else idx = Math.max(idx-1, 0); items[idx].click(); items[idx].scrollIntoView({block:'nearest'}); } }); // ============ SEED DATA ============ function seedDemo() { const folders = [ {id:'all',name:'All Snippets',emoji:'📁'}, {id:'favorites',name:'Favorites',emoji:'⭐'}, {id:'f-react',name:'React',emoji:'⚛️'}, {id:'f-api',name:'API & Backend',emoji:'🔌'}, {id:'f-utils',name:'Utilities',emoji:'🔧'}, {id:'f-css',name:'CSS Tricks',emoji:'🎨'}, {id:'f-sql',name:'SQL Queries',emoji:'🗄️'}, {id:'f-devops',name:'DevOps',emoji:'🚀'}, {id:'f-python',name:'Python',emoji:'🐍'}, ]; const snippets = [ { id:crypto.randomUUID(), title:'React useDebounce Hook', language:'typescript', folder:'f-react', tags:['hook','performance','debounce'], favorite:true, usageCount:12, notes:'Custom hook for debouncing values. Great for search inputs.', code:`import { useState, useEffect } from 'react'; function useDebounce(value: T, delay: number): T { const [debouncedValue, setDebouncedValue] = useState(value); useEffect(() => { const handler = setTimeout(() => { setDebouncedValue(value); }, delay); return () => { clearTimeout(handler); }; }, [value, delay]); return debouncedValue; } export default useDebounce; // Usage: // const debouncedSearch = useDebounce(searchTerm, 300); // useEffect(() => { fetchResults(debouncedSearch); }, [debouncedSearch]);` }, { id:crypto.randomUUID(), title:'Express Error Handler Middleware', language:'javascript', folder:'f-api', tags:['express','error-handling','middleware'], favorite:true, usageCount:8, notes:'Centralized error handling for Express APIs. Catches all errors.', code:`// Error handler middleware — must be last app.use() const errorHandler = (err, req, res, next) => { console.error(\`[\${new Date().toISOString()}] \${err.stack}\`); const statusCode = err.statusCode || 500; const message = err.isOperational ? err.message : 'Internal server error'; res.status(statusCode).json({ success: false, error: message, ...(process.env.NODE_ENV === 'development' && { stack: err.stack }) }); }; // Custom AppError class class AppError extends Error { constructor(message, statusCode = 500) { super(message); this.statusCode = statusCode; this.isOperational = true; Error.captureStackTrace(this, this.constructor); } } module.exports = { errorHandler, AppError }; // Usage: // app.use(errorHandler); // throw new AppError('Not found', 404);` }, { id:crypto.randomUUID(), title:'Python FastAPI Auth Dependency', language:'python', folder:'f-python', tags:['fastapi','auth','jwt','dependency'], favorite:false, usageCount:5, notes:'Reusable JWT authentication dependency for FastAPI routes.', code:`from fastapi import Depends, HTTPException, status from fastapi.security import HTTPBearer, HTTPAuthorizationCredentials import jwt from datetime import datetime security = HTTPBearer() SECRET_KEY = "your-secret-key" ALGORITHM = "HS256" async def get_current_user( credentials: HTTPAuthorizationCredentials = Depends(security) ): """Validate JWT token and return current user.""" token = credentials.credentials try: payload = jwt.decode(token, SECRET_KEY, algorithms=[ALGORITHM]) if payload.get("exp") and datetime.utcnow().timestamp() > payload["exp"]: raise HTTPException( status_code=status.HTTP_401_UNAUTHORIZED, detail="Token expired" ) return payload except jwt.InvalidTokenError: raise HTTPException( status_code=status.HTTP_401_UNAUTHORIZED, detail="Invalid token" ) # Usage: # @app.get("/protected") # async def protected_route(user=Depends(get_current_user)): # return {"user": user}` }, { id:crypto.randomUUID(), title:'CSS Grid Auto-Fit Cards', language:'css', folder:'f-css', tags:['grid','responsive','cards','layout'], favorite:true, usageCount:15, notes:'Responsive card grid that auto-fits without media queries.', code:`.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; padding: 1.5rem; } .card { background: var(--card-bg, #fff); border-radius: 12px; padding: 1.5rem; border: 1px solid var(--border, #e2e8f0); transition: transform 0.2s, box-shadow 0.2s; } .card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); } /* Skeleton loading state */ .card.loading { .card-title, .card-text { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 4px; color: transparent; } } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }` }, { id:crypto.randomUUID(), title:'PostgreSQL Upsert with Returning', language:'sql', folder:'f-sql', tags:['postgres','upsert','conflict','returning'], favorite:false, usageCount:7, notes:'Insert or update pattern with conflict handling. Returns the final row.', code:`-- Upsert: Insert or update on conflict INSERT INTO users (email, name, updated_at) VALUES ('aj@mvp.cafe', 'Aman Jha', NOW()) ON CONFLICT (email) DO UPDATE SET name = EXCLUDED.name, updated_at = NOW() RETURNING id, email, name, created_at, updated_at; -- Bulk upsert with values list INSERT INTO metrics (date, metric_name, value) VALUES ('2026-05-01', 'signups', 42), ('2026-05-01', 'revenue', 1500), ('2026-05-02', 'signups', 58) ON CONFLICT (date, metric_name) DO UPDATE SET value = EXCLUDED.value RETURNING *; -- Conditional upsert (only update if new value > old) INSERT INTO high_scores (user_id, score) VALUES (123, 9500) ON CONFLICT (user_id) DO UPDATE SET score = EXCLUDED.score WHERE EXCLUDED.score > high_scores.score RETURNING *;` }, { id:crypto.randomUUID(), title:'Docker Multi-Stage Build (Node)', language:'bash', folder:'f-devops', tags:['docker','multi-stage','node','production'], favorite:true, usageCount:6, notes:'Production-optimized Docker build. ~80% smaller than naive approach.', code:`# Multi-stage Docker build for Node.js # Stage 1: Build FROM node:20-alpine AS builder WORKDIR /app COPY package*.json ./ RUN npm ci --only=production && \\ cp -R node_modules /tmp/node_modules && \\ npm ci COPY . . RUN npm run build # Stage 2: Production FROM node:20-alpine AS runner WORKDIR /app ENV NODE_ENV=production # Non-root user RUN addgroup --system --gid 1001 nodejs && \\ adduser --system --uid 1001 app COPY --from=builder --chown=app:nodejs /tmp/node_modules ./node_modules COPY --from=builder --chown=app:nodejs /app/dist ./dist COPY --from=builder --chown=app:nodejs /app/package.json ./ USER app EXPOSE 3000 HEALTHCHECK --interval=30s --timeout=3s \\ CMD wget --no-verbose --tries=1 --spider http://localhost:3000/health || exit 1 CMD ["node", "dist/server.js"]` }, { id:crypto.randomUUID(), title:'Zustand Store with Persist', language:'typescript', folder:'f-react', tags:['zustand','state','persist','store'], favorite:false, usageCount:4, notes:'Zustand store with localStorage persistence and TypeScript.', code:`import { create } from 'zustand'; import { persist, devtools } from 'zustand/middleware'; interface AppState { user: { name: string; email: string } | null; theme: 'light' | 'dark'; notifications: number; setUser: (user: AppState['user']) => void; toggleTheme: () => void; incrementNotifications: () => void; clearNotifications: () => void; } export const useAppStore = create()( devtools( persist( (set) => ({ user: null, theme: 'dark', notifications: 0, setUser: (user) => set({ user }), toggleTheme: () => set((state) => ({ theme: state.theme === 'light' ? 'dark' : 'light', })), incrementNotifications: () => set((state) => ({ notifications: state.notifications + 1, })), clearNotifications: () => set({ notifications: 0 }), }), { name: 'app-store' } ) ) ); // Usage: // const { user, theme, setUser } = useAppStore(); // const theme = useAppStore((s) => s.theme); // selective` }, { id:crypto.randomUUID(), title:'Fetch with Retry & Timeout', language:'javascript', folder:'f-utils', tags:['fetch','retry','timeout','resilience'], favorite:true, usageCount:10, notes:'Production-grade fetch wrapper with exponential backoff, timeout, and abort.', code:`async function fetchWithRetry(url, options = {}) { const { retries = 3, backoff = 300, timeout = 10000, ...fetchOpts } = options; for (let attempt = 0; attempt <= retries; attempt++) { const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), timeout); try { const response = await fetch(url, { ...fetchOpts, signal: controller.signal, }); clearTimeout(timeoutId); if (!response.ok) { // Don't retry 4xx errors (except 429) if (response.status < 500 && response.status !== 429) { throw new Error(\`HTTP \${response.status}: \${response.statusText}\`); } throw new Error(\`HTTP \${response.status}\`); } return response; } catch (error) { clearTimeout(timeoutId); if (attempt === retries) throw error; const delay = backoff * Math.pow(2, attempt); console.warn(\`Retry \${attempt + 1}/\${retries} in \${delay}ms: \${error.message}\`); await new Promise((r) => setTimeout(r, delay)); } } } // Usage: // const res = await fetchWithRetry('/api/data', { retries: 3, timeout: 5000 }); // const data = await res.json();` }, { id:crypto.randomUUID(), title:'Git Aliases — Power User', language:'bash', folder:'f-devops', tags:['git','alias','productivity'], favorite:false, usageCount:3, notes:'Add to ~/.gitconfig [alias] section. The ones I actually use daily.', code:`# Add to ~/.gitconfig under [alias] [alias] # Quick status s = status -sb # Pretty log (my favorite) lg = log --oneline --graph --decorate --all -20 ll = log --pretty=format:'%C(yellow)%h%C(reset) %s %C(blue)<%an>%C(reset) %C(green)(%cr)%C(reset)' -20 # Commit shortcuts cm = commit -m ca = commit --amend --no-edit cam = commit -am # Branch management co = checkout cb = checkout -b bd = branch -d bD = branch -D # Stash ss = stash save sp = stash pop sl = stash list # Undo undo = reset --soft HEAD~1 nuke = reset --hard HEAD~1 unstage = reset HEAD -- # Diff d = diff --stat dc = diff --cached # Push/Pull p = push pf = push --force-with-lease pl = pull --rebase # Cleanup merged branches cleanup = "!git branch --merged | grep -v '\\*\\|main\\|master\\|develop' | xargs -n 1 git branch -d" # Who did what who = shortlog -sne` }, { id:crypto.randomUUID(), title:'React usePrevious Hook', language:'typescript', folder:'f-react', tags:['hook','previous','state','ref'], favorite:false, usageCount:2, notes:'Track previous value of state/props. Useful for comparison effects.', code:`import { useRef, useEffect } from 'react'; function usePrevious(value: T): T | undefined { const ref = useRef(); useEffect(() => { ref.current = value; }, [value]); return ref.current; } export default usePrevious; // Usage: // const [count, setCount] = useState(0); // const prevCount = usePrevious(count); // // useEffect(() => { // if (prevCount !== undefined && count > prevCount) { // console.log('Count increased!'); // } // }, [count, prevCount]);` }, { id:crypto.randomUUID(), title:'Supabase Row-Level Security', language:'sql', folder:'f-sql', tags:['supabase','rls','security','postgres'], favorite:false, usageCount:4, notes:'Common RLS patterns for multi-tenant SaaS. Used in UTMStamp.', code:`-- Enable RLS on table ALTER TABLE signatures ENABLE ROW LEVEL SECURITY; -- Users can only see their org's data CREATE POLICY "Users see own org signatures" ON signatures FOR SELECT USING (org_id = auth.jwt() ->> 'org_id'); -- Users can insert for their org CREATE POLICY "Users insert own org signatures" ON signatures FOR INSERT WITH CHECK (org_id = auth.jwt() ->> 'org_id'); -- Only admins can delete CREATE POLICY "Admins can delete" ON signatures FOR DELETE USING ( org_id = auth.jwt() ->> 'org_id' AND (auth.jwt() ->> 'role') = 'admin' ); -- Service role bypasses RLS (for server-side ops) -- Use supabase.auth.admin or service_role key -- Useful: Check current user's claims SELECT auth.uid(); SELECT auth.jwt() ->> 'email'; SELECT auth.jwt() ->> 'role';` }, { id:crypto.randomUUID(), title:'Python Dataclass with Validation', language:'python', folder:'f-python', tags:['dataclass','validation','python3.10'], favorite:false, usageCount:1, notes:'Modern Python dataclass with __post_init__ validation.', code:`from dataclasses import dataclass, field from datetime import datetime from typing import Optional import re @dataclass class User: email: str name: str role: str = "member" created_at: datetime = field(default_factory=datetime.utcnow) tags: list[str] = field(default_factory=list) metadata: Optional[dict] = None def __post_init__(self): # Email validation if not re.match(r'^[\\w.-]+@[\\w.-]+\\.\\w+$', self.email): raise ValueError(f"Invalid email: {self.email}") # Role validation valid_roles = {"admin", "member", "viewer"} if self.role not in valid_roles: raise ValueError(f"Role must be one of {valid_roles}") # Normalize self.email = self.email.lower().strip() self.name = self.name.strip() @property def display_name(self) -> str: return f"{self.name} ({self.role})" def to_dict(self) -> dict: return { "email": self.email, "name": self.name, "role": self.role, "created_at": self.created_at.isoformat(), "tags": self.tags, } # Usage: # user = User(email="aj@mvp.cafe", name="Aman Jha", role="admin") # print(user.display_name) # "Aman Jha (admin)"` }, { id:crypto.randomUUID(), title:'Nginx Reverse Proxy + SSL', language:'bash', folder:'f-devops', tags:['nginx','ssl','proxy','production'], favorite:false, usageCount:3, notes:'Production nginx config with SSL, headers, rate limiting.', code:`# /etc/nginx/sites-available/myapp upstream backend { server 127.0.0.1:3000; keepalive 64; } # Rate limiting limit_req_zone $binary_remote_addr zone=api:10m rate=10r/s; server { listen 80; server_name app.example.com; return 301 https://$server_name$request_uri; } server { listen 443 ssl http2; server_name app.example.com; # SSL (certbot) ssl_certificate /etc/letsencrypt/live/app.example.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/app.example.com/privkey.pem; ssl_protocols TLSv1.2 TLSv1.3; # Security headers add_header X-Frame-Options "SAMEORIGIN" always; add_header X-Content-Type-Options "nosniff" always; add_header Strict-Transport-Security "max-age=31536000" always; # Gzip gzip on; gzip_types text/plain application/json application/javascript text/css; location /api/ { limit_req zone=api burst=20 nodelay; proxy_pass http://backend; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } location / { root /var/www/app/dist; try_files $uri $uri/ /index.html; expires 1d; } }` }, { id:crypto.randomUUID(), title:'CSS Dark Mode Toggle', language:'css', folder:'f-css', tags:['dark-mode','theme','css-variables','toggle'], favorite:false, usageCount:6, notes:'Complete dark/light mode with CSS variables. No JS flash on load.', code:`/* System preference + manual override */ :root { --bg: #ffffff; --bg-secondary: #f8f9fa; --text: #1a1a2e; --text-secondary: #6b7280; --border: #e5e7eb; --accent: #3b82f6; --card: #ffffff; --shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } /* Dark theme */ [data-theme="dark"], @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0d1117; --bg-secondary: #161b22; --text: #e6edf3; --text-secondary: #8b949e; --border: #30363d; --accent: #58a6ff; --card: #161b22; --shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } } /* Apply everywhere */ body { background: var(--bg); color: var(--text); transition: background 0.3s, color 0.3s; } /* No-flash: add this inline in */ /*