[{"_1":2,"_129":-5,"_130":-5},"loaderData",{"_3":4},"routes/editions.$slug",{"_5":6,"_28":29},"edition",{"_7":8,"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_24":25,"_26":27},"number",6,"title","Security Best Practices Every Developer Should Know","description","Essential security practices: authentication, authorization, XSS, CSRF, and protecting your applications.","date","2025-06-08","slug","security-best-practices","readingTime","9 min","topics",[21,22,23],"Security","Web Development","Best Practices","published",true,"content","\n# Security Best Practices Every Developer Should Know\n\nEdition #6 covers essential security practices every developer needs to implement.\n\n## Authentication vs Authorization\n\n### Authentication\n**Who are you?**\n\n```javascript\n// JWT-based authentication\nconst token = jwt.sign(\n { userId: user.id, email: user.email },\n process.env.JWT_SECRET,\n { expiresIn: '24h' }\n);\n```\n\n### Authorization\n**What can you do?**\n\n```javascript\n// Role-based authorization\nfunction requireRole(role) {\n return (req, res, next) => {\n if (!req.user || req.user.role !== role) {\n return res.status(403).json({ error: 'Forbidden' });\n }\n next();\n };\n}\n\napp.delete('/admin/users/:id', requireRole('admin'), deleteUser);\n```\n\n## Password Security\n\n### Hashing\n\n```javascript\nimport bcrypt from 'bcrypt';\n\n// Hash password\nconst saltRounds = 10;\nconst hashedPassword = await bcrypt.hash(password, saltRounds);\n\n// Verify password\nconst isValid = await bcrypt.compare(password, hashedPassword);\n```\n\n**Never:**\n- Store passwords in plain text\n- Use weak hashing (MD5, SHA1)\n- Use encryption instead of hashing\n\n## Cross-Site Scripting (XSS)\n\n### Reflected XSS\n\n```javascript\n// ❌ Vulnerable\napp.get('/search', (req, res) => {\n res.send(`

Results for: ${req.query.q}

`);\n});\n\n// ✅ Safe - escape user input\nimport { escape } from 'html-escaper';\n\napp.get('/search', (req, res) => {\n res.send(`

Results for: ${escape(req.query.q)}

`);\n});\n```\n\n### Stored XSS\n\n```javascript\n// ✅ Sanitize before storing\nimport DOMPurify from 'isomorphic-dompurify';\n\nconst cleanContent = DOMPurify.sanitize(userInput);\nawait db.posts.create({ content: cleanContent });\n```\n\n### React Protection\n\nReact escapes by default:\n\n```jsx\n// ✅ Safe\n

{userInput}

\n\n// ❌ Dangerous\n

\n```\n\n## Cross-Site Request Forgery (CSRF)\n\n### CSRF Tokens\n\n```javascript\nimport csrf from 'csurf';\n\nconst csrfProtection = csrf({ cookie: true });\n\napp.get('/form', csrfProtection, (req, res) => {\n res.render('form', { csrfToken: req.csrfToken() });\n});\n\napp.post('/submit', csrfProtection, (req, res) => {\n // Process form\n});\n```\n\n### SameSite Cookies\n\n```javascript\nres.cookie('session', token, {\n httpOnly: true,\n secure: true,\n sameSite: 'strict'\n});\n```\n\n## SQL Injection\n\n### Parameterized Queries\n\n```javascript\n// ❌ Vulnerable\nconst query = `SELECT * FROM users WHERE email = '${email}'`;\n\n// ✅ Safe - parameterized query\nconst query = 'SELECT * FROM users WHERE email = ?';\nconst users = await db.query(query, [email]);\n\n// ✅ Safe - ORM\nconst user = await User.findOne({ where: { email } });\n```\n\n## Content Security Policy (CSP)\n\n```javascript\napp.use((req, res, next) => {\n res.setHeader(\n 'Content-Security-Policy',\n \"default-src 'self'; \" +\n \"script-src 'self' 'unsafe-inline' https://trusted-cdn.com; \" +\n \"style-src 'self' 'unsafe-inline'; \" +\n \"img-src 'self' data: https:; \" +\n \"font-src 'self' data:; \" +\n \"connect-src 'self' https://api.example.com;\"\n );\n next();\n});\n```\n\n## Security Headers\n\n```javascript\nimport helmet from 'helmet';\n\napp.use(helmet());\n\n// Or manually:\napp.use((req, res, next) => {\n res.setHeader('X-Content-Type-Options', 'nosniff');\n res.setHeader('X-Frame-Options', 'DENY');\n res.setHeader('X-XSS-Protection', '1; mode=block');\n res.setHeader('Strict-Transport-Security', 'max-age=31536000; includeSubDomains');\n res.setHeader('Referrer-Policy', 'strict-origin-when-cross-origin');\n next();\n});\n```\n\n## API Security\n\n### Rate Limiting\n\n```javascript\nimport rateLimit from 'express-rate-limit';\n\nconst limiter = rateLimit({\n windowMs: 15 * 60 * 1000,\n max: 100,\n message: 'Too many requests'\n});\n\napp.use('/api/', limiter);\n```\n\n### API Keys\n\n```javascript\nfunction validateApiKey(req, res, next) {\n const apiKey = req.headers['x-api-key'];\n \n if (!apiKey || !isValidApiKey(apiKey)) {\n return res.status(401).json({ error: 'Invalid API key' });\n }\n \n next();\n}\n\napp.use('/api/', validateApiKey);\n```\n\n### OAuth 2.0\n\n```javascript\nimport passport from 'passport';\nimport { Strategy as GoogleStrategy } from 'passport-google-oauth20';\n\npassport.use(new GoogleStrategy({\n clientID: process.env.GOOGLE_CLIENT_ID,\n clientSecret: process.env.GOOGLE_CLIENT_SECRET,\n callbackURL: '/auth/google/callback'\n}, (accessToken, refreshToken, profile, done) => {\n // Find or create user\n return done(null, user);\n}));\n```\n\n## Input Validation\n\n```javascript\nimport { z } from 'zod';\n\nconst userSchema = z.object({\n email: z.string().email(),\n password: z.string().min(8),\n age: z.number().min(18).max(120)\n});\n\napp.post('/register', (req, res) => {\n try {\n const data = userSchema.parse(req.body);\n // Process validated data\n } catch (error) {\n return res.status(400).json({ error: error.errors });\n }\n});\n```\n\n## Environment Variables\n\n```javascript\n// ❌ Never commit secrets\n// config.js\nmodule.exports = {\n apiKey: 'sk_live_123456789'\n};\n\n// ✅ Use environment variables\n// .env (add to .gitignore)\nAPI_KEY=sk_live_123456789\n\n// config.js\nrequire('dotenv').config();\nmodule.exports = {\n apiKey: process.env.API_KEY\n};\n```\n\n## Dependency Security\n\n### Audit Dependencies\n\n```bash\nnpm audit\nnpm audit fix\n\n# Check for outdated packages\nnpm outdated\n```\n\n### Use Lock Files\n\n```bash\n# Commit these files\npackage-lock.json\nyarn.lock\npnpm-lock.yaml\n```\n\n### Automated Updates\n\n```yaml\n# dependabot.yml\nversion: 2\nupdates:\n - package-ecosystem: \"npm\"\n directory: \"/\"\n schedule:\n interval: \"weekly\"\n```\n\n## Session Management\n\n### Secure Session Configuration\n\n```javascript\nimport session from 'express-session';\n\napp.use(session({\n secret: process.env.SESSION_SECRET,\n resave: false,\n saveUninitialized: false,\n cookie: {\n secure: true, // HTTPS only\n httpOnly: true, // No JavaScript access\n maxAge: 3600000, // 1 hour\n sameSite: 'strict'\n }\n}));\n```\n\n### Session Timeout\n\n```javascript\nfunction checkSessionTimeout(req, res, next) {\n if (req.session.lastActivity) {\n const timeout = 30 * 60 * 1000; // 30 minutes\n if (Date.now() - req.session.lastActivity > timeout) {\n req.session.destroy();\n return res.status(401).json({ error: 'Session expired' });\n }\n }\n req.session.lastActivity = Date.now();\n next();\n}\n```\n\n## File Upload Security\n\n```javascript\nimport multer from 'multer';\nimport path from 'path';\n\nconst storage = multer.diskStorage({\n destination: './uploads/',\n filename: (req, file, cb) => {\n // Generate unique filename\n const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);\n cb(null, uniqueSuffix + path.extname(file.originalname));\n }\n});\n\nconst upload = multer({\n storage,\n limits: { fileSize: 5 * 1024 * 1024 }, // 5MB\n fileFilter: (req, file, cb) => {\n // Only allow images\n const allowedTypes = /jpeg|jpg|png|gif/;\n const extname = allowedTypes.test(path.extname(file.originalname).toLowerCase());\n const mimetype = allowedTypes.test(file.mimetype);\n \n if (mimetype && extname) {\n return cb(null, true);\n }\n cb(new Error('Only image files are allowed'));\n }\n});\n```\n\n## HTTPS/TLS\n\n```javascript\nimport https from 'https';\nimport fs from 'fs';\n\nconst options = {\n key: fs.readFileSync('private-key.pem'),\n cert: fs.readFileSync('certificate.pem')\n};\n\nhttps.createServer(options, app).listen(443);\n\n// Redirect HTTP to HTTPS\napp.use((req, res, next) => {\n if (!req.secure) {\n return res.redirect('https://' + req.headers.host + req.url);\n }\n next();\n});\n```\n\n## Security Checklist\n\n- [ ] All inputs validated and sanitized\n- [ ] Passwords properly hashed\n- [ ] HTTPS enforced\n- [ ] Security headers configured\n- [ ] CSRF protection implemented\n- [ ] SQL injection prevented\n- [ ] XSS prevention in place\n- [ ] Rate limiting configured\n- [ ] Dependencies regularly updated\n- [ ] Secrets in environment variables\n- [ ] Sessions properly managed\n- [ ] File uploads restricted\n- [ ] API endpoints protected\n- [ ] Error messages don't leak info\n\n## Conclusion\n\nSecurity is not optional. Build it in from day one, not as an afterthought!\n\nNext week: Modern CSS techniques!\n\nlwh\n","allEditions",[30,42,54,66,75,86,97,98,109,119],{"_7":31,"_9":32,"_11":33,"_13":34,"_15":35,"_17":36,"_19":37,"_24":25,"_26":41},12,"The Future of React: Server Components Deep Dive","Exploring React Server Components, streaming, and the future of React development. Plus tips on optimizing your React apps.","2025-07-20","future-of-react","8 min",[38,39,40],"React","Server Components","Performance","\n# The Future of React: Server Components Deep Dive\n\nWelcome to edition #12 of the newsletter! This week, we're diving deep into React Server Components and what they mean for the future of React development.\n\n## What Are Server Components?\n\nReact Server Components (RSC) represent a paradigm shift in how we think about React applications. Unlike traditional components that run on the client, Server Components execute on the server and stream their output to the client.\n\n### Key Benefits\n\n1. **Zero Bundle Size Impact** - Server Components don't ship JavaScript to the client\n2. **Direct Backend Access** - Access databases and APIs directly without creating endpoints\n3. **Automatic Code Splitting** - Better performance out of the box\n4. **Streaming** - Send content to users as it becomes ready\n\n## How They Work\n\n```jsx\n// app/PostList.server.jsx\nimport { db } from './db';\n\nexport default async function PostList() {\n const posts = await db.posts.findMany();\n \n return (\n

\n {posts.map(post => (\n \n ))}\n

\n );\n}\n```\n\nThis component runs entirely on the server. No database code is sent to the client!\n\n## Streaming and Suspense\n\nOne of the most powerful features is the ability to stream content:\n\n```jsx\nimport { Suspense } from 'react';\n\nexport default function Page() {\n return (\n

\n }>\n \n \n

\n );\n}\n```\n\nThe header and footer render immediately, while the post list streams in when ready.\n\n## Best Practices\n\n### 1. Use Server Components by Default\n\nStart with Server Components and only reach for Client Components when you need interactivity.\n\n### 2. Minimize Client Boundaries\n\nKeep the `\"use client\"` directive as close to the interactive leaves of your component tree as possible.\n\n### 3. Optimize Data Fetching\n\nFetch data where it's needed, not at the root of your application.\n\n```jsx\n// ✅ Good - fetch where needed\nasync function UserProfile({ userId }) {\n const user = await getUser(userId);\n return

{user.name}

;\n}\n\n// ❌ Bad - fetching at root and prop drilling\nfunction App() {\n const users = await getAllUsers();\n return ;\n}\n```\n\n## Performance Optimization Tips\n\n### Parallel Data Fetching\n\nServer Components enable parallel fetching at different levels:\n\n```jsx\nasync function Dashboard() {\n // These fetch in parallel!\n const userPromise = getUser();\n const postsPromise = getPosts();\n const statsPromise = getStats();\n \n const [user, posts, stats] = await Promise.all([\n userPromise,\n postsPromise,\n statsPromise\n ]);\n \n return (\n

\n \n \n \n

\n );\n}\n```\n\n### Smart Caching\n\nUse React's cache function for request-level memoization:\n\n```jsx\nimport { cache } from 'react';\n\nconst getUser = cache(async (id) => {\n return await db.user.findUnique({ where: { id } });\n});\n```\n\n## Real-World Use Cases\n\n### 1. Data-Heavy Dashboards\n\nPerfect for admin panels and dashboards that display lots of data without much interactivity.\n\n### 2. Content-Heavy Sites\n\nBlogs, documentation sites, and marketing pages benefit from the reduced bundle size.\n\n### 3. E-commerce Product Pages\n\nShow product details fast, with interactive elements only where needed.\n\n## Common Pitfalls to Avoid\n\n### Don't Mix Concerns\n\n```jsx\n// ❌ Bad - mixing server and client concerns\nasync function Component() {\n const data = await fetchData();\n const [state, setState] = useState(); // Error! Can't use hooks\n return

...

;\n}\n```\n\n### Remember the Boundary\n\nClient Components can't import Server Components directly. Use composition:\n\n```jsx\n// ✅ Good\nfunction Layout({ children }) {\n return (\n \n {children} // Server Component passed as children\n \n );\n}\n```\n\n## Migration Strategy\n\nIf you're migrating an existing app:\n\n1. **Start at the leaves** - Convert non-interactive components first\n2. **Work up the tree** - Gradually move more components to the server\n3. **Measure performance** - Track bundle size and performance metrics\n4. **Iterate** - Don't try to convert everything at once\n\n## Looking Ahead\n\nServer Components are just the beginning. The React team is working on:\n\n- **Server Actions** - Mutations that run on the server\n- **Improved streaming** - Better progressive enhancement\n- **Better DevEx** - Tools to visualize the client/server boundary\n\n## Resources\n\n- [React Server Components RFC](https://github.com/reactjs/rfcs)\n- [Next.js App Router Docs](https://nextjs.org/docs)\n- [Patterns for Server Components](https://patterns.dev)\n\n## This Week's Challenge\n\nTry converting a data-fetching component in your app to a Server Component. Measure the bundle size difference!\n\n---\n\nThat's it for this edition! Next week, we'll explore Server Actions and how they simplify form handling and mutations.\n\nHave questions or feedback? Just hit reply!\n\nStay curious, \nlwh\n",{"_7":43,"_9":44,"_11":45,"_13":46,"_15":47,"_17":48,"_19":49,"_24":25,"_26":53},11,"TypeScript 5.5: What's New and Why It Matters","Breaking down the latest TypeScript features, performance improvements, and how they impact your daily development workflow.","2025-07-13","typescript-5-5","7 min",[50,51,52],"TypeScript","JavaScript","Developer Tools","\n# TypeScript 5.5: What's New and Why It Matters\n\nEdition #11 is all about TypeScript! Let's explore the latest features in TypeScript 5.5 and how they can improve your development workflow.\n\n## Type Predicate Inference\n\nOne of the biggest additions is improved type predicate inference. The compiler can now automatically infer type predicates in many cases:\n\n```typescript\n// Before: Manual type predicate\nfunction isString(value: unknown): value is string {\n return typeof value === 'string';\n}\n\n// After: Automatic inference!\nfunction isString(value: unknown) {\n return typeof value === 'string';\n // TypeScript infers: value is string\n}\n```\n\nThis makes your code cleaner and reduces boilerplate!\n\n## Const Type Parameters\n\nYou can now mark type parameters as `const` to infer the most specific type:\n\n```typescript\nfunction makeArray(arr: T[]) {\n return arr;\n}\n\nconst arr = makeArray([1, 2, 3]);\n// Type: readonly [1, 2, 3] (not number[])\n```\n\nThis is incredibly useful for creating type-safe configurations and constants.\n\n## Performance Improvements\n\nTypeScript 5.5 includes significant performance improvements:\n\n- **30% faster** on large codebases\n- **Reduced memory usage** for complex types\n- **Faster incremental builds**\n\n### Real-World Impact\n\nOn our production codebase:\n- Build time: 45s → 28s\n- Memory usage: 2.8GB → 1.9GB\n- IDE responsiveness: Noticeably snappier\n\n## Regular Expression Syntax Checking\n\nNew feature: TypeScript now checks regex syntax!\n\n```typescript\nconst regex1 = /[abc/; // Error: Unterminated character class\nconst regex2 = /(?test)/; // ✅ Valid named capture group\n```\n\nThis catches bugs at compile time instead of runtime.\n\n## Control Flow Narrowing Improvements\n\nBetter narrowing in more scenarios:\n\n```typescript\ntype Result = { success: true; data: T } | { success: false; error: string };\n\nfunction processResult(result: Result) {\n if (result.success) {\n console.log(result.data); // ✅ TypeScript knows data exists\n } else {\n console.log(result.error); // ✅ TypeScript knows error exists\n }\n}\n```\n\n## Practical Tips\n\n### 1. Update Your tsconfig.json\n\n```json\n{\n \"compilerOptions\": {\n \"target\": \"ES2022\",\n \"lib\": [\"ES2022\", \"DOM\"],\n \"module\": \"NodeNext\",\n \"moduleResolution\": \"NodeNext\",\n \"strict\": true,\n \"skipLibCheck\": true\n }\n}\n```\n\n### 2. Use Const Type Parameters for Config\n\n```typescript\nconst config = createConfig({\n api: {\n endpoint: \"https://api.example.com\",\n timeout: 5000,\n },\n} as const);\n\n// TypeScript knows exact values!\n```\n\n### 3. Leverage Type Predicate Inference\n\nRemove manual type predicates where possible. Let TypeScript do the work!\n\n## Migration Guide\n\n1. **Update TypeScript**: `npm install typescript@5.5`\n2. **Fix any new errors** (stricter checking may find bugs!)\n3. **Remove manual type predicates** where inference works\n4. **Benchmark performance** improvements\n\n## What's Next?\n\nThe TypeScript team is working on:\n- **Isolated declarations** for faster builds\n- **Better error messages** with suggestions\n- **Improved JSDoc support**\n\nThat's all for this edition. Happy typing!\n\nlwh\n",{"_7":55,"_9":56,"_11":57,"_13":58,"_15":59,"_17":60,"_19":61,"_24":25,"_26":65},10,"Building Scalable APIs: Lessons from Production","Real-world strategies for building APIs that scale. From rate limiting to caching, and everything in between.","2025-07-06","scalable-apis","10 min",[62,63,64],"API Design","Backend","Scalability","\n# Building Scalable APIs: Lessons from Production\n\nEdition #10! Today we're covering battle-tested strategies for building APIs that can handle scale.\n\n## The Foundation: Good Design\n\nBefore optimization, focus on solid API design:\n\n### RESTful Principles\n\n```\nGET /api/posts - List posts\nGET /api/posts/:id - Get single post\nPOST /api/posts - Create post\nPUT /api/posts/:id - Update post\nDELETE /api/posts/:id - Delete post\n```\n\n### Versioning\n\nAlways version your APIs:\n\n```\n/api/v1/posts\n/api/v2/posts\n```\n\n## Rate Limiting\n\nProtect your API from abuse:\n\n```javascript\nimport rateLimit from 'express-rate-limit';\n\nconst limiter = rateLimit({\n windowMs: 15 * 60 * 1000, // 15 minutes\n max: 100, // Limit each IP to 100 requests per windowMs\n message: 'Too many requests, please try again later.',\n});\n\napp.use('/api/', limiter);\n```\n\n### Tiered Rate Limits\n\nDifferent limits for different user tiers:\n\n```javascript\nconst limits = {\n free: { max: 100, windowMs: 15 * 60 * 1000 },\n pro: { max: 1000, windowMs: 15 * 60 * 1000 },\n enterprise: { max: 10000, windowMs: 15 * 60 * 1000 },\n};\n```\n\n## Caching Strategies\n\nCache at multiple levels:\n\n### 1. Application-Level Caching\n\n```javascript\nimport NodeCache from 'node-cache';\nconst cache = new NodeCache({ stdTTL: 600 });\n\nasync function getPosts() {\n const cached = cache.get('posts');\n if (cached) return cached;\n \n const posts = await db.posts.findMany();\n cache.set('posts', posts);\n return posts;\n}\n```\n\n### 2. HTTP Caching\n\nUse proper cache headers:\n\n```javascript\napp.get('/api/posts', (req, res) => {\n res.set({\n 'Cache-Control': 'public, max-age=300', // 5 minutes\n 'ETag': generateETag(data),\n });\n res.json(data);\n});\n```\n\n### 3. CDN Caching\n\nFor static or infrequently changing data, use a CDN.\n\n## Database Optimization\n\n### Indexing\n\nIndex frequently queried fields:\n\n```sql\nCREATE INDEX idx_posts_user_id ON posts(user_id);\nCREATE INDEX idx_posts_created_at ON posts(created_at DESC);\n```\n\n### Query Optimization\n\n```javascript\n// ❌ Bad - N+1 queries\nconst posts = await db.posts.findMany();\nfor (const post of posts) {\n post.author = await db.users.findUnique({ where: { id: post.userId } });\n}\n\n// ✅ Good - Single query with join\nconst posts = await db.posts.findMany({\n include: { author: true }\n});\n```\n\n## Pagination\n\nAlways paginate large datasets:\n\n```javascript\napp.get('/api/posts', async (req, res) => {\n const page = parseInt(req.query.page) || 1;\n const limit = parseInt(req.query.limit) || 20;\n const skip = (page - 1) * limit;\n\n const [posts, total] = await Promise.all([\n db.posts.findMany({ skip, take: limit }),\n db.posts.count(),\n ]);\n\n res.json({\n data: posts,\n pagination: {\n page,\n limit,\n total,\n totalPages: Math.ceil(total / limit),\n },\n });\n});\n```\n\n## Error Handling\n\nConsistent error responses:\n\n```javascript\nclass APIError extends Error {\n constructor(statusCode, message, details = {}) {\n super(message);\n this.statusCode = statusCode;\n this.details = details;\n }\n}\n\napp.use((err, req, res, next) => {\n if (err instanceof APIError) {\n return res.status(err.statusCode).json({\n error: {\n message: err.message,\n details: err.details,\n },\n });\n }\n \n // Unexpected errors\n console.error(err);\n res.status(500).json({\n error: { message: 'Internal server error' },\n });\n});\n```\n\n## Monitoring and Observability\n\nTrack key metrics:\n\n```javascript\nimport prometheus from 'prom-client';\n\nconst httpRequestDuration = new prometheus.Histogram({\n name: 'http_request_duration_seconds',\n help: 'Duration of HTTP requests in seconds',\n labelNames: ['method', 'route', 'status'],\n});\n\napp.use((req, res, next) => {\n const start = Date.now();\n res.on('finish', () => {\n const duration = (Date.now() - start) / 1000;\n httpRequestDuration.labels(req.method, req.route.path, res.statusCode).observe(duration);\n });\n next();\n});\n```\n\n## Real-World Checklist\n\n- [ ] API versioning implemented\n- [ ] Rate limiting configured\n- [ ] Caching strategy in place\n- [ ] Database queries optimized\n- [ ] Pagination for list endpoints\n- [ ] Consistent error handling\n- [ ] Monitoring and logging\n- [ ] Documentation (OpenAPI/Swagger)\n- [ ] Load testing performed\n- [ ] Security headers configured\n\n## Conclusion\n\nBuilding scalable APIs is about making smart decisions early and continuously optimizing based on real usage patterns.\n\nNext week: Web Performance in 2025!\n\nlwh\n",{"_7":67,"_9":68,"_11":69,"_13":70,"_15":71,"_17":18,"_19":72,"_24":25,"_26":74},9,"Web Performance in 2025: The Complete Guide","Modern techniques for blazing-fast websites. Core Web Vitals, image optimization, and performance monitoring.","2025-06-29","web-performance-2025",[40,22,73],"Optimization","\n# Web Performance in 2025: The Complete Guide\n\nWelcome to edition #9! Today we're diving into everything you need to know about web performance in 2025.\n\n## Core Web Vitals\n\nGoogle's Core Web Vitals are the foundation of modern web performance:\n\n### Largest Contentful Paint (LCP)\n\nMeasures loading performance. Should occur within 2.5 seconds.\n\n```javascript\n// Optimize LCP with preloading\n\n```\n\n### First Input Delay (FID)\n\nMeasures interactivity. Should be less than 100ms.\n\n```javascript\n// Use code splitting to reduce main thread work\nconst HeavyComponent = lazy(() => import('./HeavyComponent'));\n```\n\n### Cumulative Layout Shift (CLS)\n\nMeasures visual stability. Should be less than 0.1.\n\n```css\n/* Always specify dimensions for images */\nimg {\n width: 100%;\n height: auto;\n aspect-ratio: 16 / 9;\n}\n```\n\n## Image Optimization\n\nImages are often the biggest bottleneck:\n\n### Modern Formats\n\n```html\n

\n```\n\n### Lazy Loading\n\n```html\n $\"Description\"$ \n```\n\n### Responsive Images\n\n```html\n\n```\n\n## JavaScript Optimization\n\n### Code Splitting\n\n```javascript\n// Route-based splitting\nconst Home = lazy(() => import('./routes/Home'));\nconst About = lazy(() => import('./routes/About'));\n\nfunction App() {\n return (\n }>\n \n } />\n } />\n \n \n );\n}\n```\n\n### Tree Shaking\n\nEnsure your bundler can eliminate dead code:\n\n```javascript\n// ✅ Good - Named imports enable tree shaking\nimport { Button } from 'ui-library';\n\n// ❌ Bad - Default imports include everything\nimport UILibrary from 'ui-library';\n```\n\n## Caching Strategies\n\n### Service Workers\n\n```javascript\nself.addEventListener('fetch', (event) => {\n event.respondWith(\n caches.match(event.request).then((response) => {\n return response || fetch(event.request);\n })\n );\n});\n```\n\n### HTTP Caching\n\n```javascript\n// Set cache headers\nres.setHeader('Cache-Control', 'public, max-age=31536000, immutable');\n```\n\n## Performance Monitoring\n\n### Real User Monitoring (RUM)\n\n```javascript\nimport { onCLS, onFID, onLCP } from 'web-vitals';\n\nonCLS(console.log);\nonFID(console.log);\nonLCP(console.log);\n```\n\n### Performance API\n\n```javascript\nconst perfData = performance.getEntriesByType('navigation')[0];\nconsole.log('DOM Content Loaded:', perfData.domContentLoadedEventEnd);\nconsole.log('Load Complete:', perfData.loadEventEnd);\n```\n\n## Font Optimization\n\n### Font Display Strategy\n\n```css\n@font-face {\n font-family: 'CustomFont';\n src: url('/fonts/custom.woff2') format('woff2');\n font-display: swap; /* Show fallback first */\n}\n```\n\n### Variable Fonts\n\nUse variable fonts to reduce file count:\n\n```css\n@font-face {\n font-family: 'Inter';\n src: url('/fonts/Inter-Variable.woff2') format('woff2');\n font-weight: 100 900;\n}\n```\n\n## Critical CSS\n\nExtract and inline critical CSS:\n\n```html\n\n\n```\n\n## Resource Hints\n\n### Preconnect\n\n```html\n\n```\n\n### DNS Prefetch\n\n```html\n\n```\n\n### Prefetch\n\n```html\n\n```\n\n## Performance Budget\n\nSet and enforce performance budgets:\n\n```javascript\n// webpack.config.js\nmodule.exports = {\n performance: {\n maxAssetSize: 244000,\n maxEntrypointSize: 244000,\n hints: 'error'\n }\n};\n```\n\n## Testing Tools\n\n- **Lighthouse** - Automated audits\n- **WebPageTest** - Detailed performance analysis\n- **Chrome DevTools** - Real-time debugging\n- **Bundle Analyzer** - Visualize bundle size\n\n## Quick Wins Checklist\n\n- [ ] Enable compression (gzip/brotli)\n- [ ] Minify CSS, JS, and HTML\n- [ ] Optimize and compress images\n- [ ] Implement lazy loading\n- [ ] Use a CDN\n- [ ] Enable HTTP/2 or HTTP/3\n- [ ] Reduce third-party scripts\n- [ ] Implement caching strategies\n- [ ] Use modern image formats\n- [ ] Minimize main thread work\n\n## Conclusion\n\nPerformance is not a one-time task—it's an ongoing commitment. Monitor, measure, and iterate!\n\nNext week: Docker for developers!\n\nlwh\n",{"_7":76,"_9":77,"_11":78,"_13":79,"_15":80,"_17":18,"_19":81,"_24":25,"_26":85},8,"Docker for Developers: Beyond the Basics","Advanced Docker patterns, multi-stage builds, and production-ready containerization strategies.","2025-06-22","docker-advanced",[82,83,84],"Docker","DevOps","Containers","\n# Docker for Developers: Beyond the Basics\n\nEdition #8 takes you beyond Docker basics into advanced patterns and production strategies.\n\n## Multi-Stage Builds\n\nReduce image size dramatically:\n\n```dockerfile\n# Build stage\nFROM node:20-alpine AS builder\nWORKDIR /app\nCOPY package*.json ./\nRUN npm ci\nCOPY . .\nRUN npm run build\n\n# Production stage\nFROM node:20-alpine\nWORKDIR /app\nCOPY --from=builder /app/dist ./dist\nCOPY --from=builder /app/node_modules ./node_modules\nCOPY package*.json ./\nEXPOSE 3000\nCMD [\"node\", \"dist/index.js\"]\n```\n\nThis pattern keeps your production image small and secure.\n\n## Docker Compose for Development\n\n```yaml\nversion: '3.8'\nservices:\n app:\n build: .\n ports:\n - \"3000:3000\"\n volumes:\n - .:/app\n - /app/node_modules\n environment:\n - DATABASE_URL=postgresql://postgres:password@db:5432/myapp\n depends_on:\n - db\n \n db:\n image: postgres:15-alpine\n environment:\n - POSTGRES_PASSWORD=password\n - POSTGRES_DB=myapp\n volumes:\n - postgres_data:/var/lib/postgresql/data\n\nvolumes:\n postgres_data:\n```\n\n## Build Optimization\n\n### Layer Caching\n\nOrder matters! Put changing files last:\n\n```dockerfile\n# ✅ Good - dependencies cached separately\nCOPY package*.json ./\nRUN npm ci\nCOPY . .\n\n# ❌ Bad - cache invalidated on any file change\nCOPY . .\nRUN npm ci\n```\n\n### .dockerignore\n\nExclude unnecessary files:\n\n```\nnode_modules\nnpm-debug.log\n.git\n.env\ndist\ncoverage\n```\n\n## Health Checks\n\n```dockerfile\nHEALTHCHECK --interval=30s --timeout=3s --start-period=5s \\\n CMD node healthcheck.js || exit 1\n```\n\n```javascript\n// healthcheck.js\nconst http = require('http');\n\nconst options = {\n host: 'localhost',\n port: 3000,\n path: '/health',\n timeout: 2000\n};\n\nhttp.get(options, (res) => {\n if (res.statusCode === 200) {\n process.exit(0);\n } else {\n process.exit(1);\n }\n}).on('error', () => {\n process.exit(1);\n});\n```\n\n## Security Best Practices\n\n### Non-Root User\n\n```dockerfile\nFROM node:20-alpine\nRUN addgroup -g 1001 -S nodejs\nRUN adduser -S nodejs -u 1001\nUSER nodejs\n```\n\n### Scan for Vulnerabilities\n\n```bash\ndocker scan myapp:latest\n```\n\n### Minimal Base Images\n\n```dockerfile\n# Use Alpine for smaller attack surface\nFROM node:20-alpine\n\n# Or use distroless\nFROM gcr.io/distroless/nodejs20-debian11\n```\n\n## Development vs Production\n\n### Development Dockerfile\n\n```dockerfile\nFROM node:20\nWORKDIR /app\nCOPY package*.json ./\nRUN npm install\nCOPY . .\nCMD [\"npm\", \"run\", \"dev\"]\n```\n\n### Production Dockerfile\n\n```dockerfile\nFROM node:20-alpine AS builder\nWORKDIR /app\nCOPY package*.json ./\nRUN npm ci --only=production\nCOPY . .\nRUN npm run build\n\nFROM node:20-alpine\nWORKDIR /app\nCOPY --from=builder /app/dist ./dist\nCOPY --from=builder /app/node_modules ./node_modules\nUSER node\nCMD [\"node\", \"dist/index.js\"]\n```\n\n## Volume Management\n\n### Named Volumes\n\n```bash\ndocker volume create app_data\ndocker run -v app_data:/data myapp\n```\n\n### Bind Mounts for Development\n\n```bash\ndocker run -v $(pwd):/app myapp\n```\n\n## Networking\n\n### Custom Networks\n\n```bash\ndocker network create app_network\ndocker run --network app_network --name db postgres\ndocker run --network app_network --name api myapp\n```\n\n## Docker BuildKit\n\nEnable for better performance:\n\n```bash\nexport DOCKER_BUILDKIT=1\ndocker build .\n```\n\n### Build Secrets\n\n```dockerfile\n# syntax=docker/dockerfile:1\nFROM node:20-alpine\nRUN --mount=type=secret,id=npm_token \\\n echo \"//registry.npmjs.org/:_authToken=$(cat /run/secrets/npm_token)\" > .npmrc && \\\n npm ci && \\\n rm .npmrc\n```\n\n```bash\ndocker build --secret id=npm_token,src=.npm_token .\n```\n\n## Logging\n\n### JSON Logging\n\n```javascript\nconst logger = {\n info: (msg, meta = {}) => console.log(JSON.stringify({ level: 'info', msg, ...meta })),\n error: (msg, meta = {}) => console.error(JSON.stringify({ level: 'error', msg, ...meta }))\n};\n```\n\n### Log Driver Configuration\n\n```yaml\nservices:\n app:\n logging:\n driver: json-file\n options:\n max-size: \"10m\"\n max-file: \"3\"\n```\n\n## Resource Limits\n\n```yaml\nservices:\n app:\n deploy:\n resources:\n limits:\n cpus: '0.5'\n memory: 512M\n reservations:\n memory: 256M\n```\n\n## Common Pitfalls\n\n1. **Large image sizes** - Use multi-stage builds\n2. **Running as root** - Always use non-root users\n3. **Outdated base images** - Regularly update\n4. **Exposed secrets** - Never commit secrets\n5. **No health checks** - Always implement health checks\n\n## Production Checklist\n\n- [ ] Multi-stage builds implemented\n- [ ] Running as non-root user\n- [ ] Health checks configured\n- [ ] Logs going to stdout/stderr\n- [ ] Resource limits set\n- [ ] Security scanning automated\n- [ ] .dockerignore optimized\n- [ ] Environment variables externalized\n- [ ] Secrets management in place\n- [ ] Monitoring and alerting configured\n\n## Conclusion\n\nDocker is powerful, but with power comes responsibility. Follow these patterns for reliable, secure containers!\n\nNext week: Git workflows that actually work!\n\nlwh\n",{"_7":87,"_9":88,"_11":89,"_13":90,"_15":91,"_17":36,"_19":92,"_24":25,"_26":96},7,"Git Workflows That Actually Work in Teams","Practical Git strategies for team collaboration. From branching models to commit conventions.","2025-06-15","git-workflows",[93,94,95],"Git","Version Control","Team Collaboration","\n# Git Workflows That Actually Work in Teams\n\nEdition #7 covers practical Git workflows for effective team collaboration.\n\n## Branching Strategies\n\n### Git Flow\n\nTraditional but effective for release-based workflows:\n\n```bash\n# Main branches\nmain (production)\ndevelop (integration)\n\n# Supporting branches\nfeature/* (new features)\nrelease/* (release preparation)\nhotfix/* (production fixes)\n```\n\n### GitHub Flow\n\nSimpler, great for continuous deployment:\n\n```bash\nmain (always deployable)\nfeature/* (short-lived feature branches)\n```\n\n### Trunk-Based Development\n\nFor high-velocity teams:\n\n```bash\n# Everyone commits to main\nmain\n\n# Use feature flags for incomplete features\nif (featureFlags.newDesign) {\n return ;\n}\n```\n\n## Commit Conventions\n\n### Conventional Commits\n\n```bash\n(): \n\n\n\n

}>\n \n \n Loading comments...}>\n \n \n \n );\n}\n```\n\n## Parallel Routes\n\n```\napp/\n dashboard/\n @analytics/\n page.js\n @revenue/\n page.js\n layout.js\n page.js\n```\n\n```jsx\n// app/dashboard/layout.js\nexport default function Layout({ children, analytics, revenue }) {\n return (\n <>\n {children}\n

\n {analytics}\n {revenue}\n

\n \n );\n}\n```\n\n## Intercepting Routes\n\n```jsx\n// app/photos/[id]/page.js\nexport default function PhotoPage({ params }) {\n return ;\n}\n\n// app/photos/(..)photos/[id]/page.js (intercept)\nexport default function PhotoModal({ params }) {\n return ;\n}\n```\n\n## Server Actions\n\n```jsx\n// app/actions.js\n'use server';\n\nexport async function createPost(formData) {\n const title = formData.get('title');\n const content = formData.get('content');\n \n const post = await db.posts.create({\n data: { title, content }\n });\n \n revalidatePath('/blog');\n redirect(`/blog/${post.slug}`);\n}\n\n// app/new-post/page.js\nimport { createPost } from './actions';\n\nexport default function NewPost() {\n return (\n

\n \n

\n      <button type=\"submit\">Create</button>\n    </form>\n  );\n}\n```\n\n## Migration Checklist\n\n- [ ] Move `_app.js` to `app/layout.js`\n- [ ] Convert pages to `page.js` files\n- [ ] Update dynamic routes structure\n- [ ] Replace `getServerSideProps` with async Server Components\n- [ ] Replace `getStaticProps` with `generateStaticParams`\n- [ ] Update API routes to Route Handlers\n- [ ] Convert metadata from `Head` to `metadata` export\n- [ ] Add loading states with `loading.js`\n- [ ] Add error boundaries with `error.js`\n- [ ] Update navigation to use `next/navigation`\n- [ ] Test all routes thoroughly\n- [ ] Update TypeScript types\n\n## Common Pitfalls\n\n### 1. Using Hooks in Server Components\n\n```jsx\n// ❌ Error\nexport default async function Page() {\n  const [state, setState] = useState(); // Can't use hooks!\n  const data = await fetchData();\n  return <div>{data}</div>;\n}\n\n// ✅ Solution: Mark as client component\n'use client';\n\nexport default function Page() {\n  const [state, setState] = useState();\n  return <div>...</div>;\n}\n```\n\n### 2. Serialization Issues\n\n```jsx\n// ❌ Can't pass functions as props from Server to Client\n<ClientComponent onClick={() => {}} />\n\n// ✅ Define function in client component\n<ClientComponent /> // Define onClick inside ClientComponent\n```\n\n### 3. Importing Client Components\n\n```jsx\n// ❌ Server Component importing Client Component\nimport ClientButton from './ClientButton'; // Has 'use client'\n// Can't use hooks here because ClientButton makes this a client component\n\n// ✅ Use composition\nexport default function ServerComponent({ children }) {\n  return <div>{children}</div>;\n}\n```\n\n## Performance Tips\n\n1. **Keep Server Components** as much as possible\n2. **Use Suspense** for progressive loading\n3. **Enable caching** with `fetch` options\n4. **Optimize images** with `next/image`\n5. **Use `loading.js`** for instant feedback\n\n## Resources\n\n- [Next.js App Router Docs](https://nextjs.org/docs)\n- [Migration Guide](https://nextjs.org/docs/app/building-your-application/upgrading)\n- [Server Components RFC](https://github.com/reactjs/rfcs)\n\n## Conclusion\n\nThe App Router is a significant improvement. Take it step by step, and you'll love the new features!\n\nNext week: Modern CSS techniques!\n\nlwh\n","actionData","errors"]
</article></body></html>