Forem: Mahdi BEN RHOUMA

Fix Supabase Auth Session Not Persisting After Refresh

Mahdi BEN RHOUMA — Wed, 15 Apr 2026 10:22:09 +0000

Fix Supabase Auth Session Not Persisting After Refresh

Fix Supabase Auth Session Not Persisting After Refresh Next.js 14

Supabase auth sessions mysteriously disappearing after page refresh is one of the most frustrating issues indie developers face when building Next.js applications. You implement authentication, everything works perfectly—until the user refreshes the page and suddenly they're logged out. As covered in our Supabase Authentication & Authorization Patterns, authentication is critical to any application, and session persistence is fundamental to good user experience.

In this guide, I'll show you exactly why this happens and how to fix it in 5 minutes with tested code examples that work with Next.js 14 and Supabase v2.

Why Supabase Sessions Disappear After Refresh

The root cause is how Next.js handles server-side rendering and client-side hydration. When you refresh a page in Next.js 14 with the App Router, the following happens:

Server renders the page - The server doesn't have access to browser cookies by default
Client hydrates - React takes over on the client side
Session check fails - If the session isn't properly passed from server to client, it appears lost

The issue occurs because Supabase stores session tokens in cookies, but Next.js Server Components don't automatically read these cookies unless you explicitly configure them to do so.

Common Misconceptions

"Supabase is broken" - No, it's a Next.js configuration issue
"I need to use localStorage" - Actually, cookies are more secure and work better with SSR
"This only happens in development" - It happens in production too if not fixed properly

Step-by-Step Solution

Step 1: Create Server-Side Supabase Client

First, create a server-side Supabase client that properly reads cookies:

// lib/supabase/server.ts
import { createServerClient, type CookieOptions } from '@supabase/ssr'
import { cookies } from 'next/headers'

export function createClient() {
  const cookieStore = cookies()

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        get(name: string) {
          return cookieStore.get(name)?.value
        },
        set(name: string, value: string, options: CookieOptions) {
          try {
            cookieStore.set({ name, value, ...options })
          } catch (error) {
            // The `set` method was called from a Server Component.
            // This can be ignored if you have middleware refreshing
            // user sessions.
          }
        },
        remove(name: string, options: CookieOptions) {
          try {
            cookieStore.set({ name, value: '', ...options })
          } catch (error) {
            // The `delete` method was called from a Server Component.
            // This can be ignored if you have middleware refreshing
            // user sessions.
          }
        },
      },
    }
  )
}

Step 2: Create Client-Side Supabase Client

Create a separate client for browser-side operations:

// lib/supabase/client.ts
import { createBrowserClient } from '@supabase/ssr'

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )
}

Step 3: Add Middleware for Session Refresh

Create middleware to automatically refresh sessions on every request:

// middleware.ts
import { createServerClient, type CookieOptions } from '@supabase/ssr'
import { NextResponse, type NextRequest } from 'next/server'

export async function middleware(request: NextRequest) {
  let response = NextResponse.next({
    request: {
      headers: request.headers,
    },
  })

  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        get(name: string) {
          return request.cookies.get(name)?.value
        },
        set(name: string, value: string, options: CookieOptions) {
          request.cookies.set({
            name,
            value,
            ...options,
          })
          response = NextResponse.next({
            request: {
              headers: request.headers,
            },
          })
          response.cookies.set({
            name,
            value,
            ...options,
          })
        },
        remove(name: string, options: CookieOptions) {
          request.cookies.set({
            name,
            value: '',
            ...options,
          })
          response = NextResponse.next({
            request: {
              headers: request.headers,
            },
          })
          response.cookies.set({
            name,
            value: '',
            ...options,
          })
        },
      },
    }
  )

  // Refresh session if expired - required for Server Components
  await supabase.auth.getUser()

  return response
}

export const config = {
  matcher: [
    '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
  ],
}

Step 4: Use Server Client in Server Components

In your Server Components, use the server client:

// app/dashboard/page.tsx
import { createClient } from '@/lib/supabase/server'
import { redirect } from 'next/navigation'

export default async function DashboardPage() {
  const supabase = createClient()

  const { data: { user } } = await supabase.auth.getUser()

  if (!user) {
    redirect('/login')
  }

  return (
    <div>
      <h1>Welcome, {user.email}</h1>
      <p>Your session persists across refreshes!</p>
    </div>
  )
}

Step 5: Use Client Client in Client Components

In Client Components, use the browser client:

'use client'

import { createClient } from '@/lib/supabase/client'
import { useEffect, useState } from 'react'

export function UserProfile() {
  const [user, setUser] = useState(null)
  const supabase = createClient()

  useEffect(() => {
    const getUser = async () => {
      const { data: { user } } = await supabase.auth.getUser()
      setUser(user)
    }

    getUser()

    // Listen for auth changes
    const { data: { subscription } } = supabase.auth.onAuthStateChange(
      (_event, session) => {
        setUser(session?.user ?? null)
      }
    )

    return () => subscription.unsubscribe()
  }, [])

  if (!user) return <div>Loading...</div>

  return <div>Logged in as: {user.email}</div>
}

Working Code Examples

Complete Authentication Flow

Here's a complete example showing sign-in with session persistence:

// app/login/page.tsx
'use client'

import { createClient } from '@/lib/supabase/client'
import { useRouter } from 'next/navigation'
import { useState } from 'react'

export default function LoginPage() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [loading, setLoading] = useState(false)
  const router = useRouter()
  const supabase = createClient()

  async function handleLogin(e: React.FormEvent) {
    e.preventDefault()
    setLoading(true)

    const { data, error } = await supabase.auth.signInWithPassword({
      email,
      password,
    })

    if (error) {
      alert(error.message)
      setLoading(false)
      return
    }

    // Session is automatically stored in cookies
    router.push('/dashboard')
    router.refresh() // Refresh to update Server Components
  }

  return (
    <form onSubmit={handleLogin}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
        required
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
        required
      />
      <button type="submit" disabled={loading}>
        {loading ? 'Signing in...' : 'Sign In'}
      </button>
    </form>
  )
}

Protected Route Pattern

// app/protected/page.tsx
import { createClient } from '@/lib/supabase/server'
import { redirect } from 'next/navigation'

export default async function ProtectedPage() {
  const supabase = createClient()

  const { data: { user } } = await supabase.auth.getUser()

  if (!user) {
    redirect('/login')
  }

  // User is authenticated, session persists
  return (
    <div>
      <h1>Protected Content</h1>
      <p>This page requires authentication</p>
      <p>User: {user.email}</p>
    </div>
  )
}

Common Mistakes

Mistake #1: Using only client-side Supabase client - This doesn't work with Server Components. You need both server and client implementations.
Mistake #2: Not implementing middleware - Without middleware, sessions won't refresh automatically and will expire, causing users to be logged out.
Mistake #3: Mixing server and client clients - Always use the server client in Server Components and the browser client in Client Components. Mixing them causes hydration errors.
Mistake #4: Not calling router.refresh() after login - After authentication, you need to refresh the router to update Server Components with the new session.
Mistake #5: Forgetting to handle cookie errors - The try-catch blocks in the server client are essential because Server Components can't set cookies directly.

FAQ

Why does my session disappear after refresh?

This happens when Next.js Server Components don't have access to the session cookies. The solution is to create a proper server-side Supabase client that reads cookies using Next.js's cookies() function and implement middleware to refresh sessions.

How often should I refresh the session?

Supabase automatically refreshes sessions when they're about to expire (default is 1 hour). The middleware handles this automatically on every request, so you don't need to manually refresh sessions.

What's the difference between server and client Supabase clients?

The server client uses Next.js's cookies() function to read/write cookies and works in Server Components. The browser client uses browser APIs and works in Client Components. You need both for a complete Next.js 14 App Router application.

Can I use localStorage instead of cookies?

While you can use localStorage, cookies are recommended because they work with Server Components, are more secure (httpOnly), and automatically handle session refresh. localStorage only works on the client side.

Do I need to install additional packages?

Yes, you need @supabase/ssr package which provides the createServerClient and createBrowserClient functions. Install it with: npm install @supabase/ssr

Supabase Auth Redirect Not Working Next.js App Router Solution
Handle Supabase Auth Errors in Next.js Middleware
Implement Supabase Magic Link Auth in Next.js 15
Build Protected Routes in Next.js 15 with Supabase

Conclusion

Session persistence in Next.js 14 with Supabase requires proper setup of both server and client Supabase clients, plus middleware to handle session refresh. The key is understanding that Server Components need explicit cookie access, which the @supabase/ssr package provides.

Follow the steps above, and your users will stay logged in across page refreshes. The middleware automatically handles session refresh, and the dual-client approach works seamlessly with Next.js's hybrid rendering model.

Test your implementation by logging in, refreshing the page, and verifying the user remains authenticated. If you encounter issues, double-check that your middleware is running and that you're using the correct client in each context.

Originally published at https://iloveblogs.blog

Fitness for Developers: Combating Desk Life

Mahdi BEN RHOUMA — Tue, 14 Apr 2026 10:21:26 +0000

Fitness for Developers: Combating Desk Life

Sitting is the new smoking, but you still have deadlines to meet. Here's how to stay healthy without sacrificing your coding productivity—practical fitness strategies designed for the realities of developer life.

Related reading: Check out our guides on home office setup and ergonomics for long sessions for complementary health tips.

The Developer Health Crisis

The Brutal Statistics

86% of developers spend their entire workday sitting
54% report chronic back or neck pain
68% experience eye strain and headaches
42% have gained 20+ pounds since starting their career
31% report anxiety or depression related to sedentary lifestyle

The Compound Effect

Year 1: Occasional back pain, slight weight gain
Year 3: Chronic pain, noticeable fitness decline
Year 5: Serious health issues, reduced energy
Year 10+: Metabolic syndrome, cardiovascular problems

The good news: Small, consistent changes can reverse most of these effects.

The Minimum Effective Dose

The 20-20-20 Rule (Enhanced)

Every 20 minutes: Look at something 20 feet away for 20 seconds
Enhancement: Stand up and do 20 bodyweight squats

Why it works: Breaks the sitting cycle, improves circulation, maintains muscle activation

The Pomodoro Fitness Hack

25 minutes focused work: Deep coding session
5 minute break: Movement break (not scrolling your phone)

Movement options:

Walk around the office/house
Do desk stretches
Climb stairs
Do jumping jacks
Practice deep breathing

The 1% Rule

Improve your health by just 1% each day:

Take the stairs instead of elevator
Park further away
Stand during phone calls
Do pushups during code compilation
Walk to lunch instead of ordering delivery

Desk Setup That Doesn't Destroy You

Monitor Position

Eye level: Top of screen at or slightly below eye level
Distance: Arm's length away (20-26 inches)
Angle: Slight tilt back (10-20 degrees)
Multiple monitors: Primary monitor directly in front, secondary at slight angle

Chair Ergonomics

Seat height: Feet flat on floor, thighs parallel to ground
Back support: Lumbar support maintains natural spine curve
Armrests: Elbows at 90 degrees, shoulders relaxed
Seat depth: 2-3 inches between seat edge and back of knees

Keyboard and Mouse

Keyboard height: Elbows at 90 degrees, wrists straight
Mouse position: Same level as keyboard, close to body
Wrist support: Minimal padding, maintain neutral wrist position
Consider: Ergonomic keyboards, vertical mice, trackballs

Standing Desk Strategy

Don't stand all day: Alternate between sitting and standing
Start small: 15-30 minutes at a time
Anti-fatigue mat: Reduces leg strain
Footrest: Allows position changes
Monitor adjustment: Screen should be higher when standing

Exercise That Fits Your Schedule

The 7-Minute Scientific Workout

Research-backed routine that provides maximum benefit in minimum time:

Jumping jacks (30 seconds)
Wall sits (30 seconds)
Push-ups (30 seconds)
Abdominal crunches (30 seconds)
Step-ups (30 seconds)
Squats (30 seconds)
Triceps dips (30 seconds)
Plank (30 seconds)
High knees running (30 seconds)
Lunges (30 seconds)
Push-up rotation (30 seconds)
Side planks (30 seconds each side)

Rest: 10 seconds between exercises
Total time: 7 minutes
Frequency: 3-4 times per week

Desk Exercises (No Sweat Required)

Neck stretches:

Chin tucks (10 reps)
Neck rotations (5 each direction)
Side neck stretches (hold 15 seconds each)

Shoulder and upper back:

Shoulder blade squeezes (10 reps)
Shoulder rolls (10 forward, 10 backward)
Doorway chest stretches (hold 30 seconds)

Lower back and hips:

Seated spinal twists (10 each direction)
Hip flexor stretches (hold 30 seconds each)
Seated figure-4 stretch (hold 30 seconds each leg)

Legs and glutes:

Calf raises (20 reps)
Seated leg extensions (10 each leg)
Glute squeezes (hold 5 seconds, 10 reps)

The Commute Workout

Walking/Biking to work: Best option if possible
Public transport: Stand instead of sitting, get off one stop early
Driving: Park further away, do car stretches at red lights
Remote work: Take a "fake commute" walk before and after work

Nutrition for Sustained Energy

The Developer's Dilemma

Common problems:

Skipping meals during deep work sessions
Relying on caffeine and sugar for energy
Mindless snacking while coding
Ordering unhealthy takeout due to time constraints

Meal Prep for Coders

Sunday prep session (1-2 hours):

Cook proteins in bulk (chicken, fish, beans)
Prepare vegetables (wash, chop, roast)
Make grab-and-go snacks
Portion out meals for the week

Easy meal formulas:

Breakfast: Protein + healthy fat + complex carb
Lunch: Lean protein + vegetables + whole grain
Dinner: Similar to lunch, lighter portion
Snacks: Protein + fiber (nuts, Greek yogurt, fruit)

Hydration Strategy

The problem: Forgetting to drink water during focused work
The solution:

Large water bottle at your desk
Set hourly hydration reminders
Herbal teas for variety
Limit caffeine to morning hours

Hydration goals:

8-10 glasses of water daily
More if you drink coffee/tea
Monitor urine color (pale yellow is ideal)

Brain Food for Better Code

Foods that enhance cognitive function:

Blueberries: Improve memory and focus
Fatty fish: Omega-3s for brain health
Nuts and seeds: Healthy fats and protein
Dark chocolate: Improves concentration (in moderation)
Green tea: L-theanine for calm focus

Foods that crash your energy:

Sugary snacks and drinks
Refined carbohydrates
Heavy, greasy meals
Excessive caffeine

Sleep Optimization for Developers

The Screen Time Problem

Blue light exposure from screens disrupts circadian rhythms and melatonin production.

Solutions:

Blue light filtering glasses
f.lux or Night Shift on devices
No screens 1 hour before bed
Dim lighting in evening

Sleep Hygiene for Night Owls

Many developers are natural night owls, but you still need quality sleep:

Consistent schedule: Same bedtime and wake time, even on weekends
Cool, dark room: 65-68°F, blackout curtains, eye mask
Comfortable mattress: Invest in quality sleep surface
No caffeine after 2 PM: Caffeine has a 6-hour half-life

The Power Nap Strategy

When you're stuck on a problem, a 20-minute nap can be more effective than another cup of coffee:

10-20 minutes: Refreshing without grogginess
Quiet, dark space: Even your car works
Set an alarm: Longer naps cause sleep inertia
Best timing: 1-3 PM (natural energy dip)

Mental Health and Stress Management

The Impostor Syndrome Workout

Exercise reduces anxiety and builds confidence:

Physical accomplishments translate to mental resilience
Endorphins improve mood naturally
Regular exercise improves sleep quality
Physical challenges provide perspective on coding challenges

Stress-Busting Techniques

Deep breathing (4-7-8 technique):

Inhale for 4 counts
Hold for 7 counts
Exhale for 8 counts
Repeat 4 times

Progressive muscle relaxation:

Tense and release muscle groups
Start with toes, work up to head
Hold tension for 5 seconds, release for 10
Great for end-of-day wind-down

Mindfulness meditation:

Start with 5 minutes daily
Use apps like Headspace or Calm
Focus on breath or body sensations
Improves focus and reduces stress

Building Sustainable Habits

The Habit Stack Method

Attach new habits to existing routines:

After I sit down at my desk → I adjust my monitor height
After I finish a coding session → I do 10 pushups
After I eat lunch → I take a 10-minute walk
After I close my laptop → I do neck stretches

The 2-Minute Rule

Make habits so easy you can't say no:

Can't do a full workout? Do 2 minutes
Can't meal prep? Wash one vegetable
Can't meditate for 20 minutes? Do 2 minutes
Can't walk for an hour? Walk around the block

Tracking and Accountability

What gets measured gets managed:

Use fitness apps or wearables
Track workouts in a simple spreadsheet
Join developer fitness communities online
Find an accountability partner at work

Technology Solutions

Fitness Apps for Developers

Workout apps:

Seven: 7-minute workouts
Nike Training Club: Free workouts
Freeletics: Bodyweight training
Sworkit: Customizable routines

Habit tracking:

Habitica: Gamified habit building
Streaks: Simple habit tracking
Way of Life: Color-coded day tracking

Ergonomics and breaks:

Stretchly: Break reminders
Time Out: Forced break software
Workrave: RSI prevention
Stand Up!: Standing reminders

Wearable Technology

Fitness trackers can motivate movement:

Step counting and movement reminders
Heart rate monitoring during exercise
Sleep quality tracking
Stress level monitoring

Smart watches add convenience:

Workout tracking without phone
Quick fitness app access
Breathing reminders
Activity competitions with friends

Creating a Developer-Friendly Gym Routine

The Minimalist Approach

3 days per week, 45 minutes each:

Day 1: Upper body

Push-ups or bench press
Pull-ups or rows
Overhead press
Planks

Day 2: Lower body

Squats or leg press
Deadlifts or hip hinges
Lunges or step-ups
Calf raises

Day 3: Full body circuit

Burpees
Mountain climbers
Jumping jacks
Bodyweight squats

Home Gym Essentials

Minimal equipment, maximum results:

Resistance bands (versatile, portable)
Adjustable dumbbells (space-efficient)
Yoga mat (for stretching and bodyweight exercises)
Pull-up bar (doorway or wall-mounted)
Foam roller (for recovery)

Gym Alternatives

Don't like traditional gyms?

Rock climbing (problem-solving + fitness)
Martial arts (discipline + self-defense)
Dance classes (fun + cardio)
Hiking (nature + exercise)
Swimming (low-impact, full-body)

The ROI of Developer Fitness

Productivity Benefits

Regular exercise improves:

Focus and concentration: Better attention span for complex problems
Memory and learning: Faster skill acquisition and retention
Creativity: Enhanced problem-solving abilities
Energy levels: Sustained performance throughout the day
Stress resilience: Better handling of deadlines and pressure

Career Benefits

Healthy developers:

Take fewer sick days
Have more energy for side projects
Perform better in interviews
Advance faster in their careers
Have longer, more sustainable careers

Financial Benefits

Health is wealth:

Lower healthcare costs
Reduced sick leave
Higher earning potential
Longer career lifespan
Better quality of life

Getting Started: Your 30-Day Plan

Week 1: Foundation

Set up ergonomic workspace
Start 20-20-20 rule
Take daily 10-minute walks
Do basic desk stretches

Week 2: Movement

Add 7-minute workout 3x/week
Increase walking to 15 minutes
Practice good posture habits
Start hydration tracking

Week 3: Optimization

Meal prep one day
Add strength exercises
Improve sleep hygiene
Try stress management techniques

Week 4: Integration

Establish consistent routine
Track progress and adjust
Plan for long-term sustainability
Celebrate your improvements

The Long Game

Fitness for developers isn't about becoming a bodybuilder—it's about sustainable health practices that enhance your coding career and quality of life.

Start small, be consistent, and focus on progress over perfection. Your future self (and your code) will thank you.

The best workout is the one you'll actually do. The best diet is the one you can stick to. The best health routine is the one that fits your developer lifestyle.

Your body is the hardware that runs your mind. Keep it maintained, and it will serve you well for decades of coding to come.

Further Reading:

Mayo Clinic on Sedentary Lifestyle - Medical guidance on combating desk-bound health risks
CDC Physical Activity Guidelines - Official exercise recommendations for adults
Learn more about our editorial team and how we research our health content.

Originally published at https://iloveblogs.blog

Facebook Outage March 3, 2026: What Happened and Why

Mahdi BEN RHOUMA — Mon, 13 Apr 2026 10:52:01 +0000

Facebook Outage March 3, 2026: What Happened and Why

On March 3, 2026, Facebook experienced a significant outage that left millions of users unable to access the platform. By 5 PM, over 10,000 users had reported access issues on Downdetector.com, with many turning to Twitter to share their frustrations. Here's what we know about the incident and what it teaches us about infrastructure reliability.

The Incident

Timeline

5:00 PM (17:00) - Users begin reporting access issues

First reports appear on Downdetector.com
Users unable to load Facebook feed
Mobile app and web interface affected

5:15 PM - Reports spike to 10,000+

Downdetector shows widespread outage
Twitter fills with complaints
#FacebookDown trends globally

Ongoing - No official statement from Meta

Users left in the dark about cause
No ETA provided
Speculation runs rampant on social media

What We Know

Scope of Impact

Reported Issues: 10,000+ on Downdetector (likely much higher)
Affected Services: Facebook web and mobile app
Geographic Spread: Global (reports from multiple countries)
Duration: Ongoing at time of reporting

User Reports

Users reported:

Unable to load Facebook feed
Login failures
Slow loading times
Error messages when accessing the platform
Mobile app crashes

Official Response

As of the time of reporting, Meta had not released an official statement explaining the outage. This is typical during active incidents—companies focus on resolution rather than communication. However, transparency is crucial for maintaining user trust.

Common Causes of Large-Scale Outages

While the exact cause of this Facebook outage remains unknown, here are the most common causes of large-scale social media outages:

1. Database Failures

Impact: Complete service unavailability
Cause: Database server crash, corruption, or overload
Duration: 30 minutes to several hours
Example: 2021 Facebook outage (6+ hours)

Database failures are catastrophic because they affect all services that depend on data access. If the primary database goes down and failover systems don't work, the entire platform becomes inaccessible.

2. DNS Issues

Impact: Users can't reach the service
Cause: DNS server failure or misconfiguration
Duration: 5-30 minutes
Example: 2016 Dyn DDoS attack

DNS translates domain names (facebook.com) to IP addresses. If DNS fails, users can't reach the service even if servers are running.

3. Load Balancer Failures

Impact: Uneven traffic distribution, cascading failures
Cause: Load balancer crash or misconfiguration
Duration: 15-60 minutes
Example: Various cloud provider outages

Load balancers distribute traffic across servers. If they fail, traffic concentrates on a few servers, causing them to crash.

4. Deployment Bugs

Impact: Service crashes after deployment
Cause: Bad code pushed to production
Duration: 5-30 minutes (if caught quickly)
Example: 2019 Facebook outage

A single bad deployment can bring down an entire service. This is why companies use canary deployments and automated rollbacks.

5. DDoS Attacks

Impact: Service overwhelmed by traffic
Cause: Malicious traffic flood
Duration: Minutes to hours
Example: 2016 Dyn attack affected Twitter, Netflix, etc.

DDoS attacks flood services with traffic, exhausting resources and making the service unavailable to legitimate users.

6. Infrastructure Provider Issues

Impact: Entire data center goes down
Cause: Cloud provider outage
Duration: 30 minutes to several hours
Example: AWS, Google Cloud, Azure outages

If a service relies on a single cloud provider and that provider has an outage, the service goes down.

Lessons for Developers

1. Build Redundancy

// ❌ Bad: Single point of failure
const database = connectToDatabase('primary-db.example.com');

// ✅ Good: Multiple replicas with failover
const database = connectToDatabase({
  primary: 'primary-db.example.com',
  replicas: [
    'replica-1.example.com',
    'replica-2.example.com'
  ],
  failover: true
});

2. Implement Circuit Breakers

// ✅ Good: Circuit breaker pattern
class CircuitBreaker {
  private failures = 0;
  private lastFailureTime = 0;
  private state: 'closed' | 'open' | 'half-open' = 'closed';

  async call(fn: () => Promise<any>) {
    if (this.state === 'open') {
      if (Date.now() - this.lastFailureTime > 60000) {
        this.state = 'half-open';
      } else {
        throw new Error('Circuit breaker is open');
      }
    }

    try {
      const result = await fn();
      this.onSuccess();
      return result;
    } catch (error) {
      this.onFailure();
      throw error;
    }
  }

  private onSuccess() {
    this.failures = 0;
    this.state = 'closed';
  }

  private onFailure() {
    this.failures++;
    this.lastFailureTime = Date.now();
    if (this.failures > 5) {
      this.state = 'open';
    }
  }
}

3. Monitor Everything

// ✅ Good: Comprehensive monitoring
const monitoring = {
  // Application metrics
  trackRequestLatency: (endpoint: string, duration: number) => {
    if (duration > 1000) {
      console.warn(`Slow request: ${endpoint} took ${duration}ms`);
    }
  },

  // Infrastructure metrics
  trackDatabaseLatency: (query: string, duration: number) => {
    if (duration > 100) {
      console.warn(`Slow query: ${query} took ${duration}ms`);
    }
  },

  // Error tracking
  trackError: (error: Error, context: any) => {
    console.error('Error:', error, context);
    // Send to error tracking service
  },

  // Uptime monitoring
  trackUptime: (service: string, isUp: boolean) => {
    console.log(`${service} is ${isUp ? 'up' : 'down'}`);
  }
};

4. Graceful Degradation

// ✅ Good: Graceful degradation
async function getPostsWithComments() {
  try {
    // Try to get posts with comments
    const posts = await fetchPostsWithComments();
    return posts;
  } catch (error) {
    console.warn('Failed to fetch posts with comments, degrading...');

    // Fallback: Get posts without comments
    try {
      const posts = await fetchPosts();
      return posts.map(p => ({ ...p, comments: [] }));
    } catch (error) {
      console.error('Failed to fetch posts');

      // Fallback: Return cached data
      return getCachedPosts();
    }
  }
}

5. Communicate During Outages

// ✅ Good: Status page updates
const statusPage = {
  updateStatus: (status: 'operational' | 'degraded' | 'down', message: string) => {
    // Update status page
    // Notify users via email, SMS, push notification
    // Post on social media
    console.log(`Status: ${status} - ${message}`);
  },

  postIncident: (title: string, description: string, impact: string) => {
    // Create incident post
    // Notify stakeholders
    console.log(`Incident: ${title}`);
  }
};

What Facebook Should Do

Immediate Actions

Acknowledge the issue - Post on status page and social media
Provide updates - Every 15-30 minutes with progress
Investigate root cause - Identify what went wrong
Implement fix - Deploy solution and verify
Monitor closely - Watch for cascading failures

Post-Incident Actions

Publish post-mortem - Explain what happened
Share lessons learned - What will prevent this in future
Outline improvements - Specific changes to infrastructure
Apologize to users - Acknowledge impact
Offer compensation - If appropriate (ad credits, etc.)

The Bigger Picture

This outage highlights a critical reality: even the largest tech companies experience downtime. Facebook has some of the best engineers and infrastructure in the world, yet outages still happen.

Why Outages Happen

Complexity - Modern systems have thousands of interdependent components
Scale - Serving billions of users amplifies any failure
Velocity - Rapid deployment increases risk of bugs
Cascading failures - One failure triggers others
Human error - Mistakes happen despite best practices

The Cost of Downtime

For a company like Facebook:

Revenue loss - Millions per hour (lost ad impressions)
User churn - Some users switch to competitors
Brand damage - Trust eroded
Stock impact - Investors lose confidence
Employee stress - Teams work around the clock to fix

Lessons for All Developers

Whether you're building a startup or working at a major tech company, this outage teaches important lessons:

Redundancy is essential - Single points of failure will fail
Monitoring is critical - You can't fix what you don't see
Communication matters - Users want to know what's happening
Testing is vital - Test failover and disaster recovery regularly
Preparation pays off - Have incident response plans ready

Conclusion

The Facebook outage on March 3, 2026, is a reminder that infrastructure reliability is hard. Even with unlimited resources and world-class engineers, outages happen. The key is preparing for them: build redundancy, monitor everything, communicate clearly, and have a plan to recover quickly.

For developers building applications, this outage should inspire you to invest in reliability. Your users depend on your service being available. Make it a priority.

We'll update this post as more information becomes available about the cause and resolution of the outage.

Update: Check back for official statements from Meta and detailed post-mortem analysis.

Originally published at https://iloveblogs.blog

The Ethics of AI: A Developer's Responsibility

Mahdi BEN RHOUMA — Sun, 12 Apr 2026 09:52:19 +0000

The Ethics of AI: A Developer's Responsibility

"Move fast and break things" used to be the mantra. But when the "things" you might break are democracies, individual privacies, or social fabrics, speed shouldn't be the only variable.

Related reading: See our articles on the future of AI in software development and AI coding assistants for more AI insights.

The Black Box Problem

Modern Deep Learning models are opaque. We know the input and the output, but the "why" often escapes even the creators.

Responsibility: Developers must prioritize Explainable AI (XAI). Users deserve to know why a loan was denied or a resume rejected.

Data Bias is Code Bias

AI learns from historical data, and history is full of prejudice. If we feed these biases into our models, we amplify them at scale.

Actionable Steps:

Audit Datasets: Scrutinize training data for representation gaps.
Fairness Metrics: Test models against diverse demographic groups before deployment.
Human-in-the-Loop: meaningful human oversight for high-stakes decisions.

Privacy in the Age of Inference

It's not just about what data you collect, but what you can infer. AI can predict health conditions, political leanings, or future locations from seemingly innocuous metadata.

The Fix:

Privacy by Design: Minizimize data collection.
Federated Learning: Train models on devices without moving user data to central servers.

The Dual-Use Dilemma

Powerful AI tools can be used for creativity or deception (Deepfakes).

Conclusion:
We are the architects of this new intelligence. It is not enough to ask "Can we build this?" We must relentlessly ask "Should we build this, and how do we make it safe?"

Further Reading:

AI Ethics Guidelines by IEEE - Industry standards for ethical AI development
Partnership on AI - Multi-stakeholder organization advancing responsible AI
Learn more about our editorial team and how we research our AI ethics content.

Explore more articles in our AI Integration series:

AI Integration for Next.js + Supabase Applications - Complete guide covering all aspects
More related articles coming soon

Originally published at https://iloveblogs.blog

The Ultimate Ergonomics Guide: Saving Your Back, 8 Hours at a Time

Mahdi BEN RHOUMA — Sat, 11 Apr 2026 09:50:56 +0000

The Ultimate Ergonomics Guide: Saving Your Back, 8 Hours at

We spend 1/3 of our lives in bed and another 1/3 in a chair. You probably bought a nice mattress. Start treating your chair with the same respect.

Related reading: See our articles on setting up your home office and fitness for developers for more insights.

The 90-90-90 Rule

When sitting:

Elbows should be at 90 degrees.
Hips should be at 90 degrees.
Knees should be at 90 degrees (feet flat on the floor).

If your feet dangle, get a footrest. Ideally, your keyboard should be at elbow height so your wrists remain neutral.

Monitor Height Matters

The top of your monitor/screen should be at or slightly below eye level.

Too low? Tech neck (forward head posture).
Too high? Dry eyes (you blink less looking up) and neck strain.

Standing Desks: Not a Magic Bullet

Standing all day is just as bad as sitting all day (hello, varicose veins).
The Goal: Movement.

Sit for 45 mins.
Stand for 15 mins.
Walk for 5 mins.

The 20-20-20 Rule for Eyes

Every 20 minutes, look at something 20 feet away for 20 seconds. Digital eye strain is real, and it kills your focus.

Conclusion

You only get one spine. Optimizing your setup isn't an expense; it's an investment in your career longevity.

Further Reading:

OSHA Computer Workstation Guidelines - Official workplace ergonomics standards from the Occupational Safety and Health Administration.
Cornell University Ergonomics Web - Research-based ergonomic guidelines and workstation setup recommendations from Cornell's Human Factors and Ergonomics Research Group.
Learn more about our editorial team and how we research our content.

Originally published at https://iloveblogs.blog

Edge Computing: Why Your App Should Think Locally

Mahdi BEN RHOUMA — Fri, 10 Apr 2026 10:13:25 +0000

Edge Computing: Why Your App Should Think Locally

Forget the Cloud, Get Closer!

Ever marvel at the responsiveness of a self-driving car as it navigates a busy intersection, making split-second decisions? Or perhaps you've witnessed the proactive nature of a smart factory, identifying potential equipment failures before they lead to costly downtime? These are not mere technological advancements; they represent a paradigm shift in how we process and interact with data, moving away from centralized cloud solutions and embracing the power of edge computing.

Related reading: See our articles on the future of AI in software development and building with AI APIs for related technology insights.

Edge computing, in essence, is about processing data where it's created – at the "edge" of the network, rather than sending it all the way to a distant cloud. Think of it as distributing intelligence, giving local devices the ability to analyze and react to information in real-time. It's like having a local branch office handle immediate tasks while headquarters manages the big picture.

The promise is tantalizing: quicker responses, smoother experiences, and the ability to unlock entirely new technological possibilities.

The "Aha!" Moment: Where Did This Idea Come From?

The Early Seeds

The concept of edge computing isn't entirely new. Recall the early days of the internet, when loading a simple webpage could feel like an eternity. Content Delivery Networks (CDNs) emerged in the 90s as a solution, strategically caching content closer to users, reducing latency and improving website performance. This can be considered the primordial form of "edge."

Mobile's Contribution

Mobile technology also played a crucial role. As mobile devices became more sophisticated, they faced limitations in processing power and battery life. To overcome these constraints, early mobile systems offloaded tasks to "surrogate servers," essentially extending the device's capabilities by leveraging nearby resources.

The Evolution of Terms

Terms like "cloudlets" (mini-clouds nearby) and "fog computing" (a cloudy layer at the edge) began to circulate, each representing a slightly different approach to distributing computing resources.

The Perfect Storm

The true catalyst for edge computing's rise was the confluence of two powerful forces:

The IoT Explosion: Billions of smart devices generating vast amounts of data
The 5G Revolution: Ultra-fast speeds and low latency creating perfect conditions

This combination made "thinking locally" not just a good idea, but an absolute necessity.

Why Going Local is a Game-Changer: The Power of the Edge

Speed Demon (Latency Reduction)

In scenarios where every millisecond counts, the reduction in latency offered by edge computing is critical. Autonomous vehicles, for example, cannot afford delays in processing sensor data. Similarly, real-time patient monitoring systems require immediate analysis to detect and respond to critical events.

Real Impact: Reducing latency from 100ms to 1ms can mean the difference between life and death in medical applications.

Bandwidth Buddy (Efficiency & Cost Savings)

By processing data locally, edge computing significantly reduces the amount of data that needs to be transmitted over the internet. This not only alleviates network congestion but also lowers bandwidth costs, especially for applications that generate large volumes of data.

Cost Benefits:

Reduced data transmission costs
Lower cloud storage requirements
Decreased network infrastructure strain

Security Superhero & Privacy Protector

Processing sensitive data locally can enhance security and privacy. By keeping data within a controlled environment, organizations can reduce the risk of interception or unauthorized access during transit.

Security Advantages:

Data stays within local perimeter
Reduced attack surface during transmission
Better compliance with data sovereignty laws

Reliability Rock Star

Edge devices can continue operating even when the internet connection is disrupted, providing a level of resilience that is not possible with cloud-based systems. This is particularly important for critical infrastructure and industrial applications.

Real-World Magic (Applications)

The possibilities are vast:

Smart Factories: Predictive maintenance and real-time quality control prevent costly downtime.

Healthcare: Remote patient monitoring and personalized medicine deliver life-saving insights instantly.

Retail: Personalized shopping experiences and optimized inventory management enhance customer satisfaction.

Gaming & AR/VR: Immersive and lag-free gaming and augmented reality experiences become truly seamless.

The Bumps in the Road: Why Everyone Isn't on the Edge (Yet!)

Despite its immense potential, edge computing faces several challenges that prevent universal adoption.

The Price Tag

Deploying and maintaining edge infrastructure can be expensive, requiring significant upfront investment in hardware and software. Organizations must weigh the costs against the benefits carefully.

"It's Complicated"

Managing a distributed network of edge devices can be complex, requiring specialized skills and expertise. The complexity increases exponentially with the number of edge nodes.

Security's Sprawl

The proliferation of edge devices increases the attack surface, making it more challenging to secure the overall system. Each edge device becomes a potential entry point for malicious actors.

"Wild West" Standards

The lack of standardized protocols and frameworks can hinder interoperability between different edge systems, creating vendor lock-in and integration challenges.

The Talent Gap

There is a shortage of skilled professionals with the expertise to design, deploy, and manage edge computing solutions. This skills gap is slowing adoption across industries.

The Data Deluge at the Edge

Managing the massive amounts of data generated at the edge requires robust data management and analytics capabilities, which can be overwhelming for organizations unprepared for the scale.

Looking Ahead: The Edge of Tomorrow

The future of edge computing is bright, with several exciting trends on the horizon.

AI Gets Local

Artificial intelligence is increasingly being deployed at the edge, enabling devices to make intelligent decisions in real-time without relying on cloud connectivity. This "AI at the Edge" revolution is transforming everything from smartphones to industrial equipment.

6G & Beyond

Next-generation wireless technologies like 6G will further enhance the capabilities of edge computing, enabling new applications such as:

Immersive XR experiences with zero latency
Hyper-connected smart cities
Real-time holographic communications

Smart Hybrids

Cloud and edge computing will increasingly work in tandem, with edge handling real-time processing and cloud providing large-scale data analytics and storage. This hybrid approach offers the best of both worlds.

Automation is Key

Automation tools and platforms will simplify the management of distributed edge systems, making it easier to deploy and scale edge applications without requiring extensive technical expertise.

Greener Computing

Efforts are underway to develop more energy-efficient edge devices and solutions, reducing the environmental impact of edge computing while maintaining performance benefits.

New Frontiers

The applications of edge computing are constantly expanding:

Autonomous Drones & Delivery: Ultra-fast decisions for flying robots navigating complex environments.

Precision Agriculture: Hyper-local crop monitoring for healthier food production and sustainable farming.

Digital Twins: Creating virtual copies of real-world objects that update in real-time at the edge, enabling predictive maintenance and optimization.

Smart Cities: Traffic optimization, environmental monitoring, and public safety systems that respond instantly to changing conditions.

Is Your App Ready to Think Locally?

Edge computing is transforming the way we interact with technology, bringing intelligence and processing power closer to the point of interaction. This shift represents more than just a technical evolution—it's a fundamental reimagining of how we design and deploy applications.

Key Considerations for Developers

Architecture Redesign: Applications need to be redesigned to take advantage of distributed processing capabilities.

Data Strategy: Determine what data should be processed locally versus in the cloud.

Security Planning: Implement robust security measures for distributed edge nodes.

Scalability Planning: Design systems that can scale across multiple edge locations.

The Competitive Advantage

Organizations that embrace edge computing early will gain significant competitive advantages:

Faster, more responsive applications
Reduced operational costs
Enhanced user experiences
New revenue opportunities

While challenges remain, the benefits of edge computing are undeniable. The future is distributed, and understanding edge computing is essential for staying ahead in an increasingly connected world.

The question isn't whether edge computing will become mainstream—it's whether your application will be ready to embrace its local brain when the time comes.

As we move toward a world of billions of connected devices, real-time AI, and immersive experiences, edge computing isn't just an option—it's becoming a necessity. The apps that think locally will be the ones that win globally.

Further Reading:

AWS Edge Computing - Amazon's comprehensive edge computing solutions and documentation
Cloudflare Workers Documentation - Leading edge computing platform for developers
Learn more about our editorial team and how we research our technology content.

This article is part of our comprehensive Deploying Next.js + Supabase to Production guide.

Frequently Asked Questions

Is Your App Ready to Think Locally?

Explore more articles in our Deployment & DevOps series:

Deploying Next.js + Supabase to Production - Complete guide covering all aspects
More related articles coming soon

Originally published at https://iloveblogs.blog

7 Dog Training Mistakes That Make Behavior Worse

Mahdi BEN RHOUMA — Thu, 09 Apr 2026 10:19:45 +0000

7 Dog Training Mistakes That Make Behavior Worse

Most dog behavior problems aren't caused by "bad dogs"—they're caused by well-meaning owners making common training mistakes. After working with thousands of dogs and their families, I've seen the same errors repeated over and over, often making problems worse instead of better.

Related reading: Check out our guides on cat behavior problems and choosing the right pet for more pet care insights.

Why Dog Training Mistakes Happen

The Root Causes

Inconsistent information:

Conflicting advice from different sources
Outdated training methods still being taught
Social media "quick fixes" that don't work
Well-meaning but incorrect advice from friends

Human nature working against us:

We want immediate results (dogs learn gradually)
We apply human logic to dog behavior
We give up too quickly when methods don't work instantly
We accidentally reward bad behavior

Lack of understanding:

Not knowing how dogs actually learn
Misreading dog body language
Expecting dogs to generalize training too quickly
Not considering the dog's individual personality

The cost of mistakes:

Behavior problems get worse over time
Dogs become confused and stressed
Trust between dog and owner breaks down
Some dogs end up surrendered to shelters

Mistake #1: Inconsistent Rules and Commands

What This Looks Like

Different family members, different rules:

Mom says "no jumping," Dad allows it
Kids let dog on furniture, parents don't
One person uses "sit," another uses "sit down"
Inconsistent enforcement of boundaries

Changing rules based on mood:

Allowing begging when you're eating something tasty
Letting dog sleep in bed sometimes but not others
Being strict when stressed, lenient when relaxed

Why This Backfires

Dogs thrive on consistency and clear expectations. When rules constantly change:

Dogs become confused about what's expected
They test boundaries more frequently
Training progress slows dramatically
Anxiety and stress increase

The Right Way

Step 1: Family Meeting

Discuss and agree on all house rules
Write down commands everyone will use
Decide on consequences for breaking rules
Post rules where everyone can see them

Step 2: Consistent Commands

Use these exact words:
- "Sit" (not "sit down" or "sit please")
- "Stay" (not "wait" or "hold on")
- "Come" (not "come here" or "get over here")
- "Down" (not "lie down" or "lay down")
- "Off" (not "down" or "get off")

Step 3: 100% Consistency

Rules apply 24/7, regardless of circumstances
Every family member enforces the same rules
Visitors are informed of house rules
No exceptions, even when dog is "being cute"

How to Fix Inconsistency

Week 1: Establish clear rules and commands
Week 2: Practice consistent enforcement
Week 3: Address any confusion with extra training
Week 4: Maintain consistency long-term

Timeline: Most dogs adapt to consistent rules within 2-3 weeks.

Mistake #2: Using Punishment and Dominance

What This Looks Like

Outdated "alpha" methods:

Alpha rolls (forcing dog onto back)
Scruff shaking
Yelling or intimidation
"Showing the dog who's boss"

Punishment-based training:

Shock collars for basic training
Hitting or physical corrections
Rubbing nose in accidents
Withholding food or water

Why This Backfires

Modern animal behavior science has debunked dominance theory:

Dogs don't see humans as "pack leaders"
Punishment creates fear, not respect
Fearful dogs are more likely to bite
Stress interferes with learning
Damages the human-dog bond

Real consequences:

Increased aggression
Anxiety and fearfulness
Suppressed warning signals (dog may bite without warning)
Reduced willingness to try new behaviors
Behavioral problems often get worse

The Right Way

Positive reinforcement training:

Reward good behavior immediately
Ignore or redirect unwanted behavior
Use treats, praise, and play as rewards
Focus on teaching what you want, not punishing what you don't

How to redirect instead of punish:

Instead of: Yelling "NO!" when dog jumps
Try: Turn away, ignore jumping, reward when four paws are on ground

Instead of: Scolding for chewing shoes
Try: Redirect to appropriate chew toy, praise for chewing toy

Instead of: Punishing for pulling on leash
Try: Stop moving when dog pulls, reward loose leash walking

Building trust:

Be patient and consistent
Celebrate small victories
End training sessions on a positive note
Make training fun for both of you

Success Timeline

Week 1: Dog may be confused by new approach
Week 2: Dog starts responding to positive methods
Week 3: Noticeable improvement in behavior
Month 2: Strong foundation of trust and cooperation

Mistake #3: Inadequate or Inconsistent Exercise

What This Looks Like

Not enough physical exercise:

One short walk per day
Only letting dog out in backyard
Skipping exercise on busy days
Thinking small dogs don't need much exercise

Not enough mental stimulation:

No puzzle toys or training games
Same routine every day
No new experiences or environments
Leaving dog alone with nothing to do for hours

Why This Backfires

"A tired dog is a good dog" - this saying exists for a reason:

Excess energy leads to destructive behavior
Bored dogs create their own entertainment (usually destructive)
Lack of stimulation causes anxiety and stress
Pent-up energy makes training much harder

Common problems from inadequate exercise:

Excessive barking
Destructive chewing
Hyperactivity and inability to settle
Attention-seeking behaviors
Difficulty focusing during training

The Right Way

Physical exercise requirements:

High-energy breeds (Border Collie, Australian Shepherd, Jack Russell):
- 2+ hours of vigorous exercise daily
- Running, hiking, fetch, agility

Medium-energy breeds (Golden Retriever, Beagle, Cocker Spaniel):
- 1-2 hours of moderate exercise daily
- Walks, swimming, play sessions

Low-energy breeds (Bulldog, Basset Hound, Pug):
- 30-60 minutes of gentle exercise daily
- Short walks, indoor play

Mental stimulation ideas:

Puzzle feeders and treat-dispensing toys
Hide treats around the house
Teach new tricks weekly
Rotate toys to maintain novelty
Practice obedience in new locations

How to Tire Out Your Dog

Step 1: Morning Exercise (20-30 minutes)

Brisk walk or jog
Fetch in the yard
Treadmill training for bad weather

Step 2: Mental Challenges (15-20 minutes)

Training session with treats
Puzzle toys during meals
Hide and seek games

Step 3: Evening Activity (20-30 minutes)

Another walk or play session
Social time with family
Calm activities before bed

Exercise Troubleshooting

"I don't have time for long walks":

Use a treadmill or hire a dog walker
Try high-intensity activities (fetch is more tiring than walking)
Mental stimulation can substitute for some physical exercise

"My dog is still hyper after exercise":

You may need more mental stimulation
Some dogs need a cool-down period
Consider if your dog is overtired (yes, this happens)

"Bad weather prevents outdoor exercise":

Indoor activities: stairs, hallway fetch, treadmill
Mental games: training, puzzle toys, hide treats
Dog daycare or indoor dog parks

Mistake #4: Poor Timing of Rewards and Corrections

What This Looks Like

Delayed rewards:

Praising dog 30 seconds after they sit
Giving treats after dog has moved on to different behavior
Waiting until you find treats in your pocket

Delayed corrections:

Scolding dog for accident you found hours later
Correcting jumping after dog has already stopped
Addressing behavior problems days after they happen

Rewarding the wrong behavior:

Giving attention when dog is demanding it
Treating dog to "calm them down" when they're excited
Petting dog when they're fearful (reinforcing fear)

Why This Backfires

Dogs live in the moment:

They associate rewards/corrections with whatever they're doing RIGHT NOW
A 3-second delay is too long for most dogs to make the connection
Delayed feedback confuses dogs about what behavior you want

Accidental reinforcement:

You might be rewarding the behavior that happened just before the treat
Dogs repeat behaviors that get them attention (even negative attention)
Inconsistent timing makes training much slower

The Right Way

Perfect timing rules:

Reward within 1-2 seconds of desired behavior
Use a marker word ("Yes!" or clicker) to mark exact moment
Have treats ready before starting training
Practice your timing without the dog first

How to Improve Your Timing

Step 1: Use a Marker

Dog sits → Immediately say "Yes!" → Give treat
Dog comes when called → "Yes!" the moment they turn toward you → Treat when they arrive

Step 2: Be Prepared

Keep treats in your pocket during training
Have rewards ready before asking for behavior
Use praise as immediate reward, treat as secondary reward

Step 3: Practice

Start with easy behaviors dog already knows
Focus on marking the exact moment of correct behavior
Gradually work up to more complex behaviors

Common timing mistakes:

Wrong: Dog sits, stands up, then you say "good sit" and give treat
Right: Dog sits → "Yes!" immediately → treat while still sitting

Wrong: Dog comes running, you wait until they reach you to praise
Right: Dog turns toward you when called → "Yes!" immediately → praise and treat when they arrive

Timing Training Exercise

Practice this daily for one week:

Ask dog to sit
The moment their bottom touches ground, say "Yes!"
Immediately give treat
Repeat 10 times
Notice how much faster your dog responds with good timing

Mistake #5: Not Understanding Dog Body Language

What This Looks Like

Misreading stress signals:

Thinking panting always means dog is happy
Interpreting lip licking as "being cute"
Missing signs that dog is overwhelmed
Pushing training when dog is showing stress

Misunderstanding play vs. aggression:

Allowing "play" that's actually bullying
Not recognizing when dog is uncomfortable
Missing warning signs before dog snaps
Confusing excitement with aggression

Ignoring calming signals:

Not recognizing when dog is trying to de-escalate
Continuing interaction when dog shows avoidance
Missing subtle "no" signals from dog

Why This Backfires

Dogs communicate constantly:

They're always telling us how they feel
Ignoring their signals leads to bigger problems
Stressed dogs can't learn effectively
Misunderstandings damage trust

Escalation happens gradually:

Dogs give many warnings before biting
Each ignored signal makes the next one stronger
Eventually dogs may skip warnings and go straight to biting

The Right Way

Learn to read stress signals:

Early stress signs:
- Lip licking when not hungry
- Yawning when not tired
- Panting when not hot/exercised
- Avoiding eye contact
- Moving slowly or freezing

Moderate stress signs:
- Excessive shedding
- Drooling
- Trembling
- Hiding or trying to escape
- Displacement behaviors (scratching, sniffing ground)

Severe stress signs:
- Growling or snapping
- Rigid body posture
- Whale eye (showing whites of eyes)
- Raised hackles
- Aggressive posturing

Calming signals dogs use:

Turning head away
Sniffing the ground
Yawning
Play bow
Sitting or lying down
Moving slowly

How to Respond to Stress Signals

Step 1: Stop what you're doing

Don't continue training if dog is stressed
Give dog space and time to calm down
Remove stressors from environment

Step 2: Help dog feel safe

Use calm, quiet voice
Avoid direct eye contact
Let dog approach you rather than approaching them
Offer high-value treats from a distance

Step 3: Adjust your approach

Break training into smaller steps
Reduce distractions in environment
Use higher-value rewards
Shorten training sessions

Body Language Training Exercise

Week 1: Observe your dog for 10 minutes daily, noting all body language
Week 2: Practice recognizing stress signals during training
Week 3: Adjust your training based on dog's body language
Week 4: Help others learn to read your dog's signals

Mistake #6: Expecting Too Much Too Fast

What This Looks Like

Unrealistic timelines:

Expecting puppy to be housetrained in a week
Getting frustrated when dog doesn't learn trick in one session
Thinking dog should generalize training immediately
Expecting perfect behavior in all situations after basic training

Skipping steps:

Teaching "stay" for 10 minutes before mastering 10 seconds
Expecting recall in dog park before mastering it at home
Training in distracting environments before dog knows basics
Moving to advanced tricks before mastering basic commands

All-or-nothing thinking:

Thinking dog "knows" command if they do it sometimes
Getting frustrated by inconsistent performance
Not understanding that learning is gradual
Expecting same performance in all environments

Why This Backfires

Learning is gradual:

Dogs need many repetitions to form habits
Each new environment requires re-learning
Stress and excitement interfere with performance
Consistency takes time to develop

Frustration hurts training:

Dogs pick up on human frustration
Stress makes learning harder for both dog and human
Impatience leads to shortcuts that don't work
Giving up too early prevents success

The Right Way

Realistic training timelines:

Basic commands (sit, stay, come):
- 2-4 weeks for reliable performance at home
- 2-3 months for performance in distracting environments
- 6+ months for truly reliable performance everywhere

Housetraining:
- 4-6 months for most puppies
- 1-2 years for small breeds
- Adult dogs: 2-4 weeks if no medical issues

Complex behaviors:
- 3-6 months for solid foundation
- 1+ years for advanced training
- Lifetime of maintenance and practice

The 3 D's of training:

Duration: How long dog holds behavior
Distance: How far away you can be
Distraction: How many distractions dog can ignore

Only work on ONE "D" at a time:

Master 5-second stay, then work on distance
Master stay across room, then add distractions
Never increase all three at once

How to Set Realistic Goals

Step 1: Break behaviors into tiny steps

Teaching "stay":
Week 1: 1-2 seconds, right in front of dog
Week 2: 3-5 seconds, right in front of dog
Week 3: 5-10 seconds, right in front of dog
Week 4: 10 seconds, take one step back
Week 5: 10 seconds, take two steps back
...and so on

Step 2: Practice in easy environments first

Master behavior at home before trying outside
Start in quiet room, gradually add distractions
Practice when dog is calm and focused
End sessions on successful note

Step 3: Celebrate small victories

Acknowledge every improvement
Don't focus on what dog can't do yet
Remember that progress isn't always linear
Some days will be better than others

Patience Training Exercise

For one week, focus only on celebrating what your dog DOES right:

Notice every small improvement
Reward attempts, not just perfect performance
Keep training sessions short (5-10 minutes)
End each session with something dog does well

Mistake #7: Giving Up Too Early

What This Looks Like

Switching methods constantly:

Trying new training method every week
Giving up on technique after few days
Constantly searching for "quick fixes"
Not giving any method enough time to work

Inconsistent practice:

Training intensively for a week, then stopping
Only training when problems occur
Skipping training sessions regularly
Not practicing learned behaviors

Expecting linear progress:

Getting discouraged by temporary setbacks
Thinking dog has "forgotten" training after bad day
Not understanding that learning has ups and downs
Giving up during normal learning plateaus

Why This Backfires

Dogs need consistency:

Frequent method changes confuse dogs
Each new approach requires starting over
Inconsistent practice leads to inconsistent results
Dogs need time to form habits

Learning isn't linear:

All learning involves plateaus and setbacks
Dogs have good days and bad days
Progress often happens in sudden jumps after plateaus
Giving up during plateau means missing breakthrough

The Right Way

Commit to methods for minimum time periods:

Give any training method at least 3-4 weeks
Practice consistently during that time
Track progress to see gradual improvements
Only change methods if truly not working after adequate trial

Understand normal learning patterns:

Week 1: Dog is confused, inconsistent performance
Week 2: Some improvement, still inconsistent
Week 3: More consistent, but not reliable
Week 4: Good performance in familiar environments
Week 6: Reliable performance at home
Week 8: Starting to generalize to new environments
Week 12: Solid, reliable behavior in most situations

How to Stay Motivated

Step 1: Track progress

Keep training journal
Note small improvements daily
Take videos to see progress over time
Celebrate milestones

Step 2: Focus on the process

Enjoy training sessions with your dog
Focus on building relationship, not just results
Remember that training is ongoing, not destination
Find joy in small daily improvements

Step 3: Get support

Join training classes for motivation
Connect with other dog owners
Work with professional trainer if needed
Remember that everyone struggles sometimes

Commitment Exercise

Choose one behavior to work on for the next month:

Practice 5-10 minutes daily
Track progress in journal
Don't change methods for full month
Notice how consistency improves results

How to Avoid These Mistakes

Create a Training Plan

Step 1: Assess current situation

What behaviors need work?
What mistakes are you currently making?
What's your dog's learning style?
What are your realistic goals?

Step 2: Choose methods and stick to them

Research positive training methods
Commit to trying method for at least one month
Get whole family on board with approach
Consider professional help if needed

Step 3: Set up for success

Have treats and rewards ready
Choose quiet training environment
Keep sessions short (5-15 minutes)
End on positive note

Step 4: Track progress

Keep simple training log
Note what works and what doesn't
Celebrate small improvements
Adjust approach based on results

When to Get Professional Help

Consider a professional trainer if:

You're not seeing progress after 4-6 weeks
Dog shows aggression or fear
You feel overwhelmed or frustrated
Family members disagree on training methods
Dog has specific behavioral issues (separation anxiety, reactivity)

How to choose a trainer:

Look for positive reinforcement methods
Ask about certifications (CCPDT, KPA, etc.)
Observe a class before signing up
Ask for references from other clients
Avoid trainers who use dominance or punishment

Frequently Asked Questions

Q: How long does it take to fix training mistakes?
A: It depends on how long the mistakes have been happening and which mistakes you're making. Simple issues like inconsistent commands can be fixed in 2-3 weeks. More complex problems like fear from punishment-based training may take 3-6 months to fully resolve. The key is consistency with the correct approach.

Q: My dog was doing well but suddenly regressed. What happened?
A: Regression is normal in dog training. Common causes include: changes in routine, new stressors, adolescence (6-18 months), or simply needing more practice. Don't panic - go back to basics, increase rewards, and be patient. Most regressions resolve within 1-2 weeks with consistent training.

Q: Is it too late to fix mistakes with an older dog?
A: It's never too late! While puppies learn faster, adult dogs can absolutely learn new behaviors and unlearn bad habits. Older dogs often have better attention spans and are less distracted than puppies. The process may take longer, but the results are just as good with patience and consistency.

Q: How do I get my family to be consistent with training?
A: Hold a family meeting to discuss and agree on rules and commands. Write everything down and post it where everyone can see. Practice commands together so everyone uses the same technique. Consider having one person lead training initially, then teach others. Consistency is crucial - even one person allowing bad behavior can undermine progress.

Q: What if positive training doesn't work for my dog?
A: If positive training isn't working, you're likely making one of these mistakes: poor timing, inconsistent practice, unrealistic expectations, or not using high enough value rewards. Before giving up, try: better treats, shorter sessions, easier environments, or professional help. True positive training works for virtually all dogs when done correctly.

Q: How do I know if I'm rewarding at the right time?
A: Use a marker word like "Yes!" or a clicker to mark the exact moment your dog does the right behavior, then give the treat. If your dog seems confused about what earned the reward, your timing needs work. Practice with simple behaviors your dog already knows to improve your timing skills.

Q: My dog only listens when I have treats. Is this bad?
A: This is normal in early training! Gradually reduce treat frequency by rewarding every other time, then every third time, etc. Replace some treats with praise, petting, or play. Eventually, your dog will respond reliably with only occasional treats. Don't eliminate rewards completely - even well-trained dogs need occasional reinforcement.

Q: How do I train my dog when I'm frustrated?
A: Don't train when you're frustrated - dogs pick up on your emotions and it makes learning harder. Take a break, do something calming, then return to training when you're in a better mindset. If you're consistently frustrated, the training approach may not be right for you and your dog. Consider getting professional help.

Conclusion

Most dog training problems stem from these seven common mistakes. The good news? They're all fixable with the right approach:

Key takeaways:

Consistency is more important than perfection
Positive methods work better than punishment
Dogs need adequate exercise and mental stimulation
Good timing makes training much more effective
Learning your dog's body language prevents problems
Realistic expectations prevent frustration
Persistence pays off - don't give up too early

Your action plan:

Identify which mistakes you're currently making
Choose one mistake to focus on first
Implement the correct approach consistently
Track your progress for motivation
Be patient - change takes time
Get professional help if needed

Remember: there are no "bad dogs," only dogs whose needs aren't being met or who haven't been taught what we want them to do. With patience, consistency, and the right approach, almost any behavior problem can be improved.

Further Reading:

Association of Professional Dog Trainers - Find certified positive trainers
American Kennel Club Training Resources - Evidence-based training advice
Learn more about our editorial team and how we research our articles.

Originally published at https://iloveblogs.blog

The First 30 Days: Dog Training Essentials

Mahdi BEN RHOUMA — Wed, 08 Apr 2026 10:13:49 +0000

The First 30 Days: Dog Training Essentials

Bringing a new dog home is exciting, but the first 30 days are critical for establishing rules, boundaries, and a bond. Consistency is the golden rule of dog training.

Related reading: See our articles on top dog breeds for active families and choosing the right pet for more insights.

1. Potty Training 101

Schedule: Take them out first thing in the morning, after meals, after naps, and before bed.
High Praise: When they go outside, throw a party. Treats, "Good dog!", lots of excitement.
No Punishment: If accidents happen inside, clean it up without a fuss. Punishing after the fact only confuses them.

2. Basic Commands: The Big Three

Sit: The foundation of impulse control.
Stay: Essential for safety (e.g., preventing them from bolting out the door).
Recall (Come): potentially life-saving. always reward a successful recall, never use it to punish.

3. Crate Training

A crate is not a cage; it's a safe den.

Make it comfortable with blankets.
Feed meals in the crate to create positive associations.
Never use the crate as punishment.

4. Socialization

Exposing your dog to new people, places, and sounds in a positive way is crucial, especially for puppies.

Controlled Meetings: Don't just throw them into a dog park. Start with one-on-one playdates.
Positive Reinforcement: Pair scary new things (like garbage trucks or vacuums) with high-value treats.

Conclusion

Training takes patience. There will be good days and bad days. But putting in the work now will result in a well-behaved, confident, and happy member of the family for years to come.

Further Reading:

AKC Dog Training Resources - The American Kennel Club's comprehensive training guides and expert advice.
ASPCA Dog Training Tips - Science-based training methods from America's leading animal welfare organization.
Learn more about our editorial team and how we research our content.

Originally published at https://iloveblogs.blog

Docker Development Environment Setup: Complete Guide 2026

Mahdi BEN RHOUMA — Tue, 07 Apr 2026 10:12:27 +0000

Docker Development Environment Setup: Complete Guide 2026

Setting up Docker for development can transform your workflow, but getting it right takes some know-how. After years of helping teams containerize their applications, I've learned what actually works in real-world development.

Related reading: Check out our guides on TypeScript migration and remote work setup for more development insights.

Why Docker for Development?

The Real Benefits

Consistency across environments:

"Works on my machine" becomes "works everywhere"
Same environment for all team members
Identical dev, staging, and production setups

Faster onboarding:

New developers productive in minutes, not days
No complex installation instructions
One command to start everything

Isolation and cleanup:

Multiple projects without conflicts
Easy to tear down and rebuild
No leftover dependencies cluttering your system

Production parity:

Catch environment-specific bugs early
Test with production-like services
Smooth deployment process

When Docker Makes Sense

Perfect for:

Full-stack applications with multiple services
Projects with complex dependencies
Teams with different operating systems
Microservices architectures

Skip Docker if:

Building simple static sites
Working solo on small scripts
Learning a new language (native install is simpler)
Your team has zero Docker experience and tight deadlines

Prerequisites

Before diving in, make sure you have:

Required:

Docker Desktop installed (download here)
Basic command line knowledge
A code editor (VS Code recommended)

Helpful:

Understanding of your application's architecture
Familiarity with environment variables
Basic networking concepts

System requirements:

8GB RAM minimum (16GB recommended)
20GB free disk space
Windows 10/11 Pro, macOS 10.15+, or Linux

How to Set Up Docker for Development

Step 1: Install Docker Desktop

macOS:

## Using Homebrew
brew install --cask docker

## Or download from docker.com
## Start Docker Desktop from Applications

Windows:

## Download Docker Desktop from docker.com
## Enable WSL 2 backend during installation
## Restart your computer

Linux (Ubuntu/Debian):

## Install Docker Engine
curl -fsSL https://get.docker.com -o get-docker.sh
sudo sh get-docker.sh

## Add your user to docker group
sudo usermod -aG docker $USER

## Install Docker Compose
sudo apt-get install docker-compose-plugin

Verify installation:

docker --version
docker compose version

Step 2: Create Your First Dockerfile

Let's start with a Node.js application:

## Dockerfile
FROM node:20-alpine

## Set working directory
WORKDIR /app

## Copy package files
COPY package*.json ./

## Install dependencies
RUN npm ci

## Copy application code
COPY . .

## Expose port
EXPOSE 3000

## Start application
CMD ["npm", "run", "dev"]

Key concepts:

FROM: Base image to build from
WORKDIR: Sets the working directory inside container
COPY: Copies files from host to container
RUN: Executes commands during build
CMD: Command to run when container starts

Step 3: Add Docker Compose

Create docker-compose.yml for multi-service setup:

version: '3.8'

services:
  app:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - /app/node_modules
    environment:
      - NODE_ENV=development
      - DATABASE_URL=postgresql://user:password@db:5432/myapp
    depends_on:
      - db
      - redis
    command: npm run dev

  db:
    image: postgres:16-alpine
    ports:
      - "5432:5432"
    environment:
      - POSTGRES_USER=user
      - POSTGRES_PASSWORD=password
      - POSTGRES_DB=myapp
    volumes:
      - postgres_data:/var/lib/postgresql/data

  redis:
    image: redis:7-alpine
    ports:
      - "6379:6379"

volumes:
  postgres_data:

Start your environment:

docker compose up

Step 4: Enable Hot Reload

For Node.js with nodemon:

## Dockerfile.dev
FROM node:20-alpine

WORKDIR /app

COPY package*.json ./
RUN npm ci

## Install nodemon globally
RUN npm install -g nodemon

COPY . .

EXPOSE 3000

CMD ["nodemon", "src/index.js"]

Update docker-compose.yml:

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile.dev
    volumes:
      - .:/app
      - /app/node_modules
    environment:
      - CHOKIDAR_USEPOLLING=true

For React/Vite:

services:
  frontend:
    build: ./frontend
    ports:
      - "5173:5173"
    volumes:
      - ./frontend:/app
      - /app/node_modules
    environment:
      - VITE_API_URL=http://localhost:3000
    command: npm run dev -- --host

Step 5: Configure Environment Variables

Create .env file:

## .env
NODE_ENV=development
DATABASE_URL=postgresql://user:password@db:5432/myapp
REDIS_URL=redis://redis:6379
API_KEY=your-api-key-here

Update docker-compose.yml:

services:
  app:
    env_file:
      - .env
    environment:
      - NODE_ENV=${NODE_ENV}
      - DATABASE_URL=${DATABASE_URL}

Important: Add .env to .gitignore!

Step 6: Set Up Debugging

VS Code launch configuration (.vscode/launch.json):

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Docker: Attach to Node",
      "port": 9229,
      "address": "localhost",
      "localRoot": "${workspaceFolder}",
      "remoteRoot": "/app",
      "protocol": "inspector"
    }
  ]
}

Update Dockerfile for debugging:

CMD ["node", "--inspect=0.0.0.0:9229", "src/index.js"]

Update docker-compose.yml:

services:
  app:
    ports:
      - "3000:3000"
      - "9229:9229"

Step 7: Optimize Build Performance

Use .dockerignore:

node_modules
npm-debug.log
.git
.env
.DS_Store
dist
build
coverage

Multi-stage builds for production:

## Build stage
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

## Production stage
FROM node:20-alpine
WORKDIR /app
COPY --from=builder /app/dist ./dist
COPY --from=builder /app/node_modules ./node_modules
COPY package*.json ./
EXPOSE 3000
CMD ["node", "dist/index.js"]

Layer caching:

## Copy package files first (changes less frequently)
COPY package*.json ./
RUN npm ci

## Copy source code last (changes frequently)
COPY . .

Common Development Patterns

Full-Stack Application

version: '3.8'

services:
  frontend:
    build: ./frontend
    ports:
      - "3000:3000"
    volumes:
      - ./frontend:/app
      - /app/node_modules
    environment:
      - REACT_APP_API_URL=http://localhost:4000

  backend:
    build: ./backend
    ports:
      - "4000:4000"
    volumes:
      - ./backend:/app
      - /app/node_modules
    environment:
      - DATABASE_URL=postgresql://user:password@db:5432/myapp
    depends_on:
      - db

  db:
    image: postgres:16-alpine
    environment:
      - POSTGRES_USER=user
      - POSTGRES_PASSWORD=password
      - POSTGRES_DB=myapp
    volumes:
      - postgres_data:/var/lib/postgresql/data

volumes:
  postgres_data:

Microservices Setup

version: '3.8'

services:
  api-gateway:
    build: ./services/gateway
    ports:
      - "8080:8080"
    depends_on:
      - auth-service
      - user-service

  auth-service:
    build: ./services/auth
    environment:
      - JWT_SECRET=${JWT_SECRET}
      - DATABASE_URL=${AUTH_DB_URL}

  user-service:
    build: ./services/users
    environment:
      - DATABASE_URL=${USER_DB_URL}

  message-queue:
    image: rabbitmq:3-management
    ports:
      - "5672:5672"
      - "15672:15672"

Useful Docker Commands

Daily Development

## Start services
docker compose up

## Start in background
docker compose up -d

## Stop services
docker compose down

## Rebuild and start
docker compose up --build

## View logs
docker compose logs -f app

## Execute command in running container
docker compose exec app npm install package-name

## Open shell in container
docker compose exec app sh

Debugging and Maintenance

## List running containers
docker ps

## List all containers
docker ps -a

## View container logs
docker logs container-name

## Inspect container
docker inspect container-name

## Remove stopped containers
docker container prune

## Remove unused images
docker image prune

## Remove everything (careful!)
docker system prune -a

Database Operations

## Access PostgreSQL
docker compose exec db psql -U user -d myapp

## Run migrations
docker compose exec app npm run migrate

## Seed database
docker compose exec app npm run seed

## Backup database
docker compose exec db pg_dump -U user myapp > backup.sql

## Restore database
docker compose exec -T db psql -U user myapp < backup.sql

Troubleshooting Common Issues

Port Already in Use

Error: Bind for 0.0.0.0:3000 failed: port is already allocated

Solution:

## Find process using port
lsof -i :3000  # macOS/Linux
netstat -ano | findstr :3000  # Windows

## Kill the process or change port in docker-compose.yml
ports:
  - "3001:3000"

Volume Permission Issues

Error: EACCES: permission denied

Solution:

## Add user in Dockerfile
RUN addgroup -g 1000 appuser && \
    adduser -D -u 1000 -G appuser appuser

USER appuser

Slow Performance on macOS/Windows

Problem: File sync is slow with volumes

Solution:

## Use delegated or cached mode
volumes:
  - .:/app:delegated
  - /app/node_modules

Or use Docker volumes instead:

volumes:
  - app_data:/app

volumes:
  app_data:

Container Keeps Restarting

Check logs:

docker compose logs app

Common causes:

Application crashes on startup
Missing environment variables
Database not ready (add healthcheck)

Solution with healthcheck:

services:
  db:
    image: postgres:16-alpine
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U user"]
      interval: 5s
      timeout: 5s
      retries: 5

  app:
    depends_on:
      db:
        condition: service_healthy

Best Practices

Security

Don't run as root:

RUN addgroup -g 1000 appuser && \
    adduser -D -u 1000 -G appuser appuser
USER appuser

Use specific image versions:

## Bad
FROM node:latest

## Good
FROM node:20.11-alpine

Scan for vulnerabilities:

docker scan your-image:tag

Performance

Minimize layers:

## Bad
RUN apt-get update
RUN apt-get install -y package1
RUN apt-get install -y package2

## Good
RUN apt-get update && \
    apt-get install -y package1 package2 && \
    rm -rf /var/lib/apt/lists/*

Use alpine images:

FROM node:20-alpine  # ~40MB
## vs
FROM node:20  # ~900MB

Maintainability

Document your setup:

## README.md

## Development Setup

1. Install Docker Desktop
2. Copy `.env.example` to `.env`
3. Run `docker compose up`
4. Access app at http://localhost:3000

## Common Commands

- `docker compose up` - Start services
- `docker compose down` - Stop services
- `docker compose logs -f` - View logs

Use make for common tasks:

## Makefile
.PHONY: up down logs shell test

up:
    docker compose up -d

down:
    docker compose down

logs:
    docker compose logs -f

shell:
    docker compose exec app sh

test:
    docker compose exec app npm test

Frequently Asked Questions

Q: Should I use Docker for development or just production?
A: Use Docker for both. Development with Docker ensures your local environment matches production, catching environment-specific bugs early. The initial setup time pays off quickly with consistent environments across your team.

Q: How do I handle database migrations in Docker?
A: Run migrations as part of your startup script or as a separate service. Add a migration command to your docker-compose.yml: docker compose exec app npm run migrate. For production, run migrations before deploying new code.

Q: Why is my Docker container so slow on macOS?
A: File system performance with volumes can be slow on macOS. Use :delegated or :cached flags on volumes, or use named volumes instead of bind mounts for node_modules and other frequently accessed directories.

Q: How do I debug inside a Docker container?
A: Expose the debug port (9229 for Node.js) in docker-compose.yml and use your IDE's remote debugging feature. VS Code has excellent Docker debugging support with the Docker extension.

Q: Should I commit my docker-compose.yml to git?
A: Yes, commit docker-compose.yml but not .env files. Create a .env.example with dummy values for documentation. Each developer creates their own .env from the example.

Q: How do I update dependencies in a Docker container?
A: Run docker compose exec app npm install package-name to install in the running container, or rebuild with docker compose up --build after updating package.json locally.

Q: What's the difference between CMD and ENTRYPOINT?
A: CMD provides default arguments that can be overridden. ENTRYPOINT defines the main command that always runs. Use CMD for development (easy to override) and ENTRYPOINT for production (consistent behavior).

Q: How do I share my Docker setup with the team?
A: Commit Dockerfile, docker-compose.yml, and .dockerignore to git. Create a .env.example file. Document setup steps in README.md. Consider using a Makefile for common commands.

Conclusion

Docker transforms development from "works on my machine" to "works everywhere." The key is starting simple and adding complexity only when needed.

Your action plan:

Install Docker Desktop
Create a basic Dockerfile
Add docker-compose.yml for services
Enable hot reload for your framework
Document the setup for your team

The initial setup takes time, but you'll save hours every week with consistent environments and faster onboarding.

Further Reading:

Docker Official Documentation - Comprehensive Docker guide
Docker Compose Documentation - Multi-container applications
Learn more about our editorial team and how we research our articles.

Explore more articles in our Deployment & DevOps series:

Deploying Next.js + Supabase to Production - Complete guide covering all aspects
More related articles coming soon

Advanced Docker Networking

Multi-Container Communication

# docker-compose.yml with networking
version: '3.8'

services:
  app:
    build: .
    ports:
      - "3000:3000"
    environment:
      - DATABASE_URL=postgresql://user:password@db:5432/myapp
      - REDIS_URL=redis://redis:6379
    depends_on:
      - db
      - redis
    networks:
      - app-network

  db:
    image: postgres:15
    environment:
      - POSTGRES_USER=user
      - POSTGRES_PASSWORD=password
      - POSTGRES_DB=myapp
    volumes:
      - postgres_data:/var/lib/postgresql/data
    networks:
      - app-network

  redis:
    image: redis:7-alpine
    networks:
      - app-network

  # Service discovery example
  api:
    build: ./api
    environment:
      - APP_HOST=app
      - APP_PORT=3000
    depends_on:
      - app
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

volumes:
  postgres_data:

Custom Network Configuration

# Advanced networking with custom DNS
version: '3.8'

services:
  app:
    build: .
    networks:
      app-network:
        ipv4_address: 172.20.0.2
        aliases:
          - myapp.local
          - api.local

  db:
    image: postgres:15
    networks:
      app-network:
        ipv4_address: 172.20.0.3
        aliases:
          - database.local

networks:
  app-network:
    driver: bridge
    ipam:
      config:
        - subnet: 172.20.0.0/16

Production-Ready Patterns

Health Checks

# docker-compose.yml with health checks
version: '3.8'

services:
  app:
    build: .
    healthcheck:
      test: ["CMD", "curl", "-f", "http://localhost:3000/health"]
      interval: 30s
      timeout: 10s
      retries: 3
      start_period: 40s

  db:
    image: postgres:15
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U user"]
      interval: 10s
      timeout: 5s
      retries: 5

Resource Limits

# docker-compose.yml with resource constraints
version: '3.8'

services:
  app:
    build: .
    deploy:
      resources:
        limits:
          cpus: '1'
          memory: 512M
        reservations:
          cpus: '0.5'
          memory: 256M

  db:
    image: postgres:15
    deploy:
      resources:
        limits:
          cpus: '2'
          memory: 1G
        reservations:
          cpus: '1'
          memory: 512M

Debugging in Docker

Node.js Debugging

# docker-compose.yml with debug port exposed
version: '3.8'

services:
  app:
    build: .
    ports:
      - "3000:3000"
      - "9229:9229"  # Node.js debug port
    environment:
      - NODE_OPTIONS=--inspect=0.0.0.0:9229
    command: node --inspect=0.0.0.0:9229 server.js

VS Code Debug Configuration

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Docker Node Debug",
      "type": "node",
      "request": "attach",
      "port": 9229,
      "address": "localhost",
      "restart": true,
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

Database Debugging

# Connect to PostgreSQL in Docker
docker compose exec db psql -U user -d myapp

# View logs
docker compose logs -f db

# Execute SQL directly
docker compose exec db psql -U user -d myapp -c "SELECT * FROM users;"

Performance Optimization

Layer Caching

# Dockerfile optimized for layer caching
FROM node:18-alpine

WORKDIR /app

# Copy package files first (changes less frequently)
COPY package*.json ./

# Install dependencies
RUN npm ci

# Copy source code (changes frequently)
COPY . .

# Build
RUN npm run build

# Production stage
FROM node:18-alpine
WORKDIR /app
COPY --from=0 /app/node_modules ./node_modules
COPY --from=0 /app/.next ./.next
COPY --from=0 /app/package*.json ./

EXPOSE 3000
CMD ["npm", "start"]

Volume Performance on macOS

# docker-compose.yml with optimized volumes
version: '3.8'

services:
  app:
    build: .
    volumes:
      # Use delegated for one-way sync (app → host)
      - .:/app:delegated

      # Use cached for two-way sync with caching
      - ./src:/app/src:cached

      # Use named volume for node_modules (faster)
      - node_modules:/app/node_modules

      # Exclude directories
      - /app/node_modules
      - /app/.next

volumes:
  node_modules:

Monitoring and Logging

Centralized Logging

# docker-compose.yml with logging driver
version: '3.8'

services:
  app:
    build: .
    logging:
      driver: "json-file"
      options:
        max-size: "10m"
        max-file: "3"
        labels: "service=app"

  db:
    image: postgres:15
    logging:
      driver: "json-file"
      options:
        max-size: "10m"
        max-file: "3"
        labels: "service=database"

View Logs

# View all logs
docker compose logs

# Follow logs in real-time
docker compose logs -f

# View logs for specific service
docker compose logs -f app

# View last 100 lines
docker compose logs --tail=100

# View logs with timestamps
docker compose logs -t

Common Issues and Solutions

Port Already in Use

# Find process using port
lsof -i :3000

# Kill process
kill -9 <PID>

# Or use different port in docker-compose.yml
ports:
  - "3001:3000"

Slow File System on macOS

# Use named volumes instead of bind mounts
version: '3.8'

services:
  app:
    build: .
    volumes:
      # Instead of: - .:/app
      # Use named volume:
      - app_data:/app
      - node_modules:/app/node_modules

volumes:
  app_data:
  node_modules:

Out of Disk Space

# Clean up unused images
docker image prune

# Clean up unused containers
docker container prune

# Clean up everything
docker system prune -a

# Check disk usage
docker system df

Testing in Docker

Run Tests in Container

# docker-compose.yml with test service
version: '3.8'

services:
  app:
    build: .
    environment:
      - NODE_ENV=development

  test:
    build: .
    command: npm test
    environment:
      - NODE_ENV=test
    depends_on:
      - db
    volumes:
      - .:/app

  db:
    image: postgres:15
    environment:
      - POSTGRES_DB=test

Run Tests

# Run tests once
docker compose run test

# Run tests with coverage
docker compose run test npm run test:coverage

# Run specific test file
docker compose run test npm test -- auth.test.ts

Best Practices Checklist

□ Use .dockerignore to exclude unnecessary files
□ Use multi-stage builds for smaller images
□ Pin base image versions (not latest)
□ Run as non-root user in production
□ Use environment variables for configuration
□ Set resource limits
□ Add health checks
□ Use named volumes for persistent data
□ Commit docker-compose.yml to git
□ Create .env.example for documentation
□ Use specific versions for dependencies
□ Optimize layer caching
□ Use Alpine images for smaller size
□ Implement proper logging
□ Test in production-like environment

Conclusion

Docker development environments transform how teams work together. The initial setup investment pays dividends through consistency, faster onboarding, and fewer "works on my machine" problems.

Start simple with a basic docker-compose.yml, then gradually add complexity as your needs grow. Use the patterns in this guide to build a development environment that scales with your team.

Remember: the best Docker setup is one your team actually uses. Keep it simple, document it well, and iterate based on feedback.

Originally published at https://iloveblogs.blog

Digital Detox Retreats: A Growing Trend

Mahdi BEN RHOUMA — Mon, 06 Apr 2026 10:16:05 +0000

Digital Detox Retreats: A Growing Trend

In a world where the average person checks their phone 96 times per day, a counter-movement is gaining momentum. Digital detox retreats—where participants pay premium prices to surrender their devices—are booming.

Related reading: See our guides on mindfulness for stress management and social media's mental health impact for related wellness insights.

The Paradox of Paying to Disconnect

The Numbers Don't Lie

$3,000-$8,000: Average cost for a week-long digital detox retreat
300%: Growth in digital wellness retreats since 2020
72%: Participants who report lasting behavior changes
89%: Retreat-goers who are high earners in tech or finance

What You're Actually Buying

It's not just about removing phones. These retreats offer:

Structured environments that make disconnection easier
Alternative activities to fill the digital void
Community support from like-minded individuals
Professional guidance on sustainable tech habits
Accountability that's hard to create alone

Who's Checking Out?

The Typical Participant

Tech Workers: Ironically, the people building our digital world are the most eager to escape it.

Executives: High-stress professionals seeking mental clarity and better decision-making.

Parents: Wanting to model healthy tech habits for their children.

Students: Overwhelmed by social media pressure and academic stress.

The Breaking Point Stories

Sarah, Software Engineer: "I realized I was checking Slack at 2 AM and couldn't remember the last time I read a book."

Marcus, Marketing Director: "My 5-year-old asked why I loved my phone more than him. That was my wake-up call."

Lisa, College Student: "Instagram was making me miserable, but I couldn't stop scrolling. I needed external help."

What Actually Happens at These Retreats

The Surrender Ritual

Most retreats begin with a device surrender ceremony:

Phones locked in individual safes
Participants receive analog alternatives (paper maps, physical books)
Emergency contact protocols established
Withdrawal symptoms acknowledged and normalized

Daily Structure

Morning: Meditation, journaling, nature walks
Midday: Workshops on mindfulness and digital wellness
Afternoon: Physical activities, creative pursuits, skill-building
Evening: Group discussions, analog entertainment, early sleep

The Curriculum

Mindfulness training to recognize digital impulses
Cognitive behavioral techniques for breaking habits
Time management without digital tools
Communication skills for face-to-face interaction
Hobby development to replace screen time

The Science Behind Digital Overwhelm

What Constant Connectivity Does to Your Brain

Dopamine Dysregulation: Constant notifications create addiction-like patterns
Attention Fragmentation: Multitasking reduces cognitive performance by 40%
Sleep Disruption: Blue light and mental stimulation affect circadian rhythms
Anxiety Amplification: FOMO and comparison culture increase stress hormones

The Withdrawal is Real

Participants commonly experience:

Phantom vibrations from missing phones
Anxiety spikes when unable to check messages
Boredom intolerance without constant stimulation
Social awkwardness in device-free conversations

Different Flavors of Digital Detox

Luxury Wilderness Retreats

Location: Remote mountains, forests, or beaches
Focus: Nature immersion and outdoor activities
Price: $5,000-$10,000 per week
Clientele: Executives and high earners

Mindfulness-Based Programs

Location: Meditation centers and monasteries
Focus: Buddhist or secular mindfulness practices
Price: $2,000-$5,000 per week
Clientele: Spiritually-minded individuals

Adventure-Based Detox

Location: National parks and adventure destinations
Focus: Physical challenges and outdoor skills
Price: $3,000-$7,000 per week
Clientele: Active professionals seeking excitement

Family-Friendly Options

Location: Resorts and camps designed for families
Focus: Reconnecting with family members
Price: $4,000-$8,000 for a family of four
Clientele: Parents wanting to model healthy habits

The Business of Disconnection

Market Growth

The digital wellness industry is projected to reach $18 billion by 2027, driven by:

Increasing awareness of tech addiction
Corporate wellness programs
Mental health prioritization
Post-pandemic lifestyle reassessment

Key Players

Camp Grounded: Adult summer camp with strict no-phone policies
Digital Detox: Luxury retreats in exotic locations
Unplugged: Weekend retreats in cabins without WiFi
Off the Grid: Adventure-based programs with digital fasting

Corporate Programs

Companies like Google, Facebook, and Goldman Sachs now offer:

Digital wellness workshops for employees
Sponsored retreat attendance as benefits
Device-free meeting policies in offices
Mindfulness training programs

The Skeptics' Perspective

"Just Turn Off Your Phone"

Critics argue that paying thousands for what you can do for free is:

Privilege signaling rather than genuine wellness
Avoiding root causes of digital dependency
Temporary solutions that don't address systemic issues
Missing the point of technology's benefits

The Rebound Effect

Studies show that 60% of participants return to previous usage patterns within 3 months without ongoing support.

What Actually Works Long-Term

Sustainable Strategies from Successful Participants

Gradual Reduction: Slowly decreasing usage rather than cold turkey
Environmental Design: Creating phone-free zones at home
Replacement Activities: Developing engaging offline hobbies
Social Support: Finding communities that support digital wellness
Professional Help: Working with therapists specializing in tech addiction

The Integration Challenge

The most successful retreat graduates:

Set specific boundaries rather than complete avoidance
Use technology intentionally rather than habitually
Maintain offline relationships and activities
Regular check-ins with retreat communities or coaches

DIY Digital Detox: Retreat Principles at Home

Create Your Own Structure

Week 1: Awareness tracking (log all device usage)
Week 2: Boundary setting (no phones during meals)
Week 3: Replacement activities (pick up old hobbies)
Week 4: Social support (involve family/friends)

Essential Elements

Physical barriers (phone charging stations outside bedrooms)
Time boundaries (no screens after 9 PM)
Alternative activities (books, puzzles, exercise)
Accountability partners (friends or family members)
Regular reflection (journaling about the experience)

The Future of Digital Wellness

Emerging Trends

AI-Powered Wellness: Apps that learn your patterns and suggest breaks
Corporate Integration: More companies offering digital wellness benefits
Preventive Education: Schools teaching healthy tech habits early
Technology Solutions: Tools designed to promote mindful usage

The Irony

The most successful digital wellness programs often use technology to help people use technology better—apps that track usage, block distracting sites, or remind users to take breaks.

Is It Worth the Investment?

For Whom It Makes Sense

High earners who can afford it without financial stress
Severe cases where self-directed efforts have failed
People seeking community around digital wellness
Those needing accountability and professional guidance

Alternatives to Consider

Local meditation groups and mindfulness classes
Camping trips with friends who share wellness goals
Therapy specifically focused on technology addiction
Gradual self-directed digital wellness programs

The Bigger Picture

Digital detox retreats are a symptom of a larger cultural shift. We're beginning to recognize that constant connectivity comes with real costs—to our attention, relationships, and mental health.

Whether you pay for a luxury retreat or create your own digital boundaries, the goal is the same: intentional technology use that serves your life rather than controlling it.

The fact that people are willing to pay thousands to disconnect reveals how difficult it's become to do so on our own. But it also shows that we're finally taking digital wellness seriously.

The question isn't whether you need a digital detox—it's how you'll create sustainable boundaries in an increasingly connected world.

Further Reading:

Center for Humane Technology - Resources on building a healthier relationship with technology
Digital Wellness Institute - Research and certification in digital wellness
Learn more about our editorial team and how we research our wellness content.

Originally published at https://iloveblogs.blog

Design Systems: Building for Scale

Mahdi BEN RHOUMA — Sun, 05 Apr 2026 09:49:05 +0000

Design Systems: Building for Scale

Design systems have evolved from nice-to-have style guides to essential infrastructure for modern product teams. Here's how to build systems that scale with your organization while maintaining design quality.

Related reading: See our articles on UX psychology and user behavior and AI coding assistants for related development insights.

What Makes a Design System Work

Beyond Style Guides

Traditional style guides: Static documentation of colors, fonts, and spacing
Modern design systems: Living ecosystems of reusable components, patterns, and principles

The key difference: Design systems are built for implementation, not just documentation.

The Three Pillars

Design Tokens: The atomic elements (colors, typography, spacing)
Component Library: Reusable UI building blocks
Documentation: Guidelines, principles, and usage patterns

Building Your Foundation: Design Tokens

Color Systems That Scale

Semantic naming over descriptive:

❌ blue-500, red-300
✅ primary-600, error-light

Why semantic naming works:

Easier to rebrand or theme
Clear intent and usage
Consistent across platforms
Accessible by default

Typography Hierarchies

Modular scale approach:

Base: 16px
Scale: 1.25 (Major Third)
Sizes: 12px, 16px, 20px, 25px, 31px, 39px, 49px

Responsive typography:

Fluid scaling between breakpoints
Consistent line heights and spacing
Optimized for readability across devices

Spacing Systems

8-point grid system:

All spacing increments of 8px (8, 16, 24, 32, 40, 48...)
Consistent vertical rhythm
Easier developer handoff
Better alignment across components

Component Architecture

Atomic Design Methodology

Atoms: Basic HTML elements (buttons, inputs, labels)
Molecules: Simple component groups (search form, navigation item)
Organisms: Complex UI sections (header, product grid, footer)
Templates: Page-level layouts and structures
Pages: Specific instances with real content

Component API Design

Good component APIs are:

Predictable: Similar props work similarly across components
Flexible: Support common use cases without being overly complex
Composable: Can be combined to create new patterns
Accessible: Built-in ARIA attributes and keyboard navigation

Example: Button Component

// Flexible but not overwhelming
<Button 
  variant="primary" 
  size="large" 
  disabled={loading}
  leftIcon={<SaveIcon />}
  onClick={handleSave}
>
  Save Changes
</Button>

// Variants: primary, secondary, ghost, danger
// Sizes: small, medium, large
// States: default, hover, active, disabled, loading

Documentation That Developers Actually Use

Living Documentation

Interactive examples: CodeSandbox or Storybook integration
Copy-paste code: Ready-to-use snippets
Do's and don'ts: Visual examples of proper usage
Accessibility notes: ARIA requirements and keyboard interactions

Usage Guidelines

When to use: Clear criteria for component selection
Variations: All available props and configurations
Content guidelines: Voice, tone, and messaging standards
Responsive behavior: How components adapt across screen sizes

Design Principles

Clear principles guide decisions:

Clarity over cleverness: Simple, understandable interfaces
Consistency over customization: Predictable patterns
Accessibility first: Inclusive design from the start
Performance matters: Fast, lightweight components

Implementation Strategies

Technology-Agnostic Tokens

Design tokens in JSON:

{
  "color": {
    "primary": {
      "50": "#f0f9ff",
      "500": "#3b82f6",
      "900": "#1e3a8a"
    }
  },
  "spacing": {
    "xs": "4px",
    "sm": "8px",
    "md": "16px"
  }
}

Generate platform-specific code:

CSS custom properties
Sass variables
JavaScript objects
iOS/Android resources

Component Libraries

React example with TypeScript:

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  children: React.ReactNode;
  onClick?: () => void;
}

export const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  size = 'md',
  disabled = false,
  children,
  onClick
}) => {
  return (
    <button
      className={`btn btn--${variant} btn--${size}`}
      disabled={disabled}
      onClick={onClick}
    >
      {children}
    </button>
  );
};

Multi-Platform Consistency

Web: React, Vue, Angular component libraries
Mobile: React Native, Flutter, or native implementations
Design: Figma, Sketch, or Adobe XD libraries
Documentation: Storybook, Docusaurus, or custom sites

Governance and Adoption

Design System Team Structure

Core team responsibilities:

Maintain component library and tokens
Create documentation and guidelines
Review and approve new patterns
Support adoption across teams

Contributor model:

Product teams propose new components
Design system team reviews and refines
Collaborative implementation and testing
Shared ownership of quality and consistency

Measuring Success

Adoption metrics:

Percentage of products using the system
Component usage across applications
Design-to-development handoff time
Consistency scores in design reviews

Quality metrics:

Accessibility compliance rates
Performance benchmarks
User satisfaction scores
Developer experience feedback

Change Management

Versioning strategy:

Semantic versioning for breaking changes
Migration guides for major updates
Deprecation warnings and timelines
Backward compatibility when possible

Communication channels:

Regular office hours for questions
Slack channels for quick support
Monthly newsletters with updates
Quarterly roadmap reviews

Common Pitfalls and Solutions

Over-Engineering Early

The problem: Building too many components before understanding needs
The solution: Start with the most common patterns, expand based on actual usage

Lack of Designer-Developer Collaboration

The problem: Designers and developers working in silos
The solution: Joint design system team with shared tools and processes

Inconsistent Implementation

The problem: Teams interpreting guidelines differently
The solution: Automated testing, linting, and clear code examples

Resistance to Adoption

The problem: Teams preferring custom solutions
The solution: Make the design system easier to use than building from scratch

Tools and Technologies

Design Tools

Figma: Collaborative design with component libraries and auto-layout
Sketch: Traditional design tool with symbol libraries
Adobe XD: Design and prototyping with component states
Framer: Design tool with code component integration

Development Tools

Storybook: Component development and documentation
Chromatic: Visual testing and review workflows
Style Dictionary: Design token transformation
Lerna/Nx: Monorepo management for multi-package systems

Documentation Platforms

Docusaurus: Documentation sites with MDX support
GitBook: Collaborative documentation with design integration
Notion: All-in-one workspace for team collaboration
Custom solutions: Tailored documentation experiences

Advanced Patterns

Theming and Customization

CSS custom properties for theming:

:root {
  --color-primary: #3b82f6;
  --color-surface: #ffffff;
  --spacing-unit: 8px;
}

[data-theme="dark"] {
  --color-primary: #60a5fa;
  --color-surface: #1f2937;
}

Component variants:

Brand-specific styling
Product-specific modifications
Accessibility-focused alternatives
Experimental design explorations

Micro-Interactions and Animation

Consistent motion principles:

Easing curves and timing functions
Entrance and exit animations
Loading and state transitions
Hover and focus interactions

Animation tokens:

{
  "animation": {
    "duration": {
      "fast": "150ms",
      "normal": "300ms",
      "slow": "500ms"
    },
    "easing": {
      "ease-out": "cubic-bezier(0, 0, 0.2, 1)",
      "ease-in": "cubic-bezier(0.4, 0, 1, 1)"
    }
  }
}

Accessibility Integration

Built-in accessibility features:

ARIA attributes and roles
Keyboard navigation patterns
Focus management and indicators
Screen reader optimizations

Accessibility testing:

Automated testing with axe-core
Manual testing with screen readers
Color contrast validation
Keyboard-only navigation testing

The Future of Design Systems

AI-Powered Design Systems

Automated component generation: AI creating components from design mockups
Intelligent suggestions: Recommending existing components for new designs
Accessibility scanning: Automated detection and fixing of accessibility issues
Performance optimization: AI-driven component optimization

Design-to-Code Workflows

Figma to code: Automated component generation from design files
Design tokens sync: Real-time synchronization between design and code
Visual regression testing: Automated detection of design inconsistencies
Component usage analytics: Data-driven decisions about component evolution

Cross-Platform Evolution

Universal design systems: Single system spanning web, mobile, and desktop
Platform-specific optimizations: Tailored experiences while maintaining consistency
Voice and conversational interfaces: Design systems for non-visual interactions
AR/VR design patterns: Spatial design system considerations

Getting Started: Your Design System Roadmap

Phase 1: Foundation (Months 1-2)

Audit existing designs and identify patterns
Define design principles and brand guidelines
Create basic design tokens (colors, typography, spacing)
Build 5-10 core components (button, input, card, etc.)

Phase 2: Expansion (Months 3-6)

Add complex components and patterns
Create comprehensive documentation
Implement in first product or application
Establish governance and contribution processes

Phase 3: Scale (Months 6-12)

Roll out across multiple products and teams
Add advanced features (theming, animations)
Implement automated testing and quality checks
Measure adoption and iterate based on feedback

Phase 4: Optimization (Year 2+)

Advanced patterns and micro-interactions
Cross-platform expansion
AI-powered enhancements
Community contributions and ecosystem growth

The Business Case

Quantifiable Benefits

Development efficiency: 30-50% faster feature development
Design consistency: 90%+ reduction in design inconsistencies
Maintenance costs: 60% reduction in UI bug reports
Onboarding time: 40% faster new team member productivity

Strategic Advantages

Brand consistency: Cohesive experience across all touchpoints
Scalability: Faster expansion into new products and markets
Quality assurance: Higher baseline quality for all user interfaces
Innovation focus: More time for unique features and experiences

Conclusion

Design systems are not just about consistency—they're about enabling teams to build better products faster. The initial investment in creating a robust design system pays dividends in development speed, design quality, and user experience consistency.

Start small, think big, and iterate based on real usage. The best design systems evolve with their organizations, balancing consistency with flexibility, and enabling creativity within a structured framework.

Your design system should feel like a superpower for your team, not a constraint. When done right, it becomes the foundation that enables your organization to build exceptional user experiences at scale.

Further Reading:

Material Design by Google - Google's comprehensive design system documentation
W3C Web Accessibility Guidelines - Official accessibility standards for design systems
Learn more about our editorial team and how we approach design content.

Explore more articles in our Advanced Patterns series:

Complete Guide to Building SaaS with Next.js and Supabase - Complete guide covering all aspects
More related articles coming soon

Originally published at https://iloveblogs.blog

Deploying Next.js + Supabase to Production

Mahdi BEN RHOUMA — Sat, 04 Apr 2026 09:48:54 +0000

Deploying Next.js + Supabase to Production

Deploying to production is more than pushing code—it's about reliability, performance, and maintainability. This comprehensive guide covers everything you need to deploy Next.js + Supabase applications with confidence.

Why Proper Deployment Matters

Reliability:

Zero-downtime deployments
Automatic rollbacks on failure
Health checks and monitoring

Performance:

Edge deployment for low latency
Optimized builds
CDN for static assets

Maintainability:

Automated CI/CD pipelines
Environment management
Database migrations

1. Deployment Platforms Overview

Vercel (Recommended)

Pros:

Built by Next.js creators
Zero-config deployment
Automatic HTTPS
Edge network
Preview deployments
Free tier available

Best For: Next.js applications, indie developers, startups

Netlify

Pros:

Simple deployment
Good free tier
Edge functions
Form handling

Best For: Static sites, JAMstack applications

AWS (Advanced)

Pros:

Full control
Scalable
Many services

Cons:

Complex setup
Higher cost
Steeper learning curve

Best For: Enterprise applications, specific requirements

Self-Hosted

Pros:

Complete control
Cost-effective at scale

Cons:

Requires DevOps expertise
Maintenance overhead

Best For: Large applications, specific compliance needs

2. Vercel Deployment

Initial Setup

## Install Vercel CLI
npm i -g vercel

## Login
vercel login

## Deploy
vercel

Project Configuration

// vercel.json
{
  "buildCommand": "npm run build",
  "devCommand": "npm run dev",
  "installCommand": "npm install",
  "framework": "nextjs",
  "regions": ["iad1"],
  "env": {
    "NEXT_PUBLIC_SUPABASE_URL": "@supabase-url",
    "NEXT_PUBLIC_SUPABASE_ANON_KEY": "@supabase-anon-key"
  }
}

Automatic Deployments

Connect GitHub repository:

Go to Vercel dashboard
Click "New Project"
Import Git repository
Configure build settings
Deploy

Every push to main branch triggers deployment.

Related: Deploy Next.js Supabase App to Vercel Production, Configure Custom Domain for Next.js on Vercel

3. Environment Configuration

Environment Variables

## .env.local (development)
NEXT_PUBLIC_SUPABASE_URL=http://localhost:54321
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-local-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-local-service-key

## Production (set in Vercel dashboard)
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-prod-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-prod-service-key

Environment-Specific Configuration

// lib/config.ts
export const config = {
  supabase: {
    url: process.env.NEXT_PUBLIC_SUPABASE_URL!,
    anonKey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
  },
  app: {
    url: process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000',
    env: process.env.NODE_ENV,
  },
  features: {
    analytics: process.env.NODE_ENV === 'production',
    debug: process.env.NODE_ENV === 'development',
  },
}

Vercel Environment Variables

Set in Vercel dashboard:

Go to Project Settings
Click "Environment Variables"
Add variables for Production, Preview, Development
Redeploy to apply changes

Related: Implement Environment Variables Best Practices Next.js, Deploy Next.js 15 to Vercel Without Environment Variable Errors

4. Database Migrations

Supabase CLI Setup

## Install Supabase CLI
npm install supabase --save-dev

## Initialize Supabase
npx supabase init

## Link to remote project
npx supabase link --project-ref your-project-ref

Create Migrations

## Create new migration
npx supabase migration new add_posts_table

-- supabase/migrations/20260216000000_add_posts_table.sql
CREATE TABLE posts (
  id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
  title TEXT NOT NULL,
  content TEXT,
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Enable RLS
ALTER TABLE posts ENABLE ROW LEVEL SECURITY;

-- RLS policies
CREATE POLICY "Users can view own posts"
  ON posts FOR SELECT
  USING (auth.uid() = user_id);

CREATE POLICY "Users can create posts"
  ON posts FOR INSERT
  WITH CHECK (auth.uid() = user_id);

Apply Migrations

## Apply to local database
npx supabase db push

## Apply to production
npx supabase db push --db-url "postgresql://..."

Migration Best Practices

-- ✅ Good: Reversible migrations
CREATE TABLE posts (...);

-- Add rollback in separate file
-- supabase/migrations/20260216000001_rollback_posts.sql
DROP TABLE IF EXISTS posts;

-- ✅ Good: Add columns with defaults
ALTER TABLE posts ADD COLUMN status TEXT DEFAULT 'draft';

-- ❌ Bad: Breaking changes without migration path
ALTER TABLE posts DROP COLUMN important_field;

Related: Handle Database Migrations in Production Supabase, Supabase Database Schema Design for SaaS Applications

5. CI/CD Pipelines

GitHub Actions

## .github/workflows/deploy.yml
name: Deploy to Production

on:
  push:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Install dependencies
        run: npm ci

      - name: Run tests
        run: npm test

      - name: Run linter
        run: npm run lint

      - name: Type check
        run: npm run type-check

  deploy:
    needs: test
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          vercel-args: '--prod'

Database Migration in CI/CD

## .github/workflows/migrate.yml
name: Database Migration

on:
  push:
    branches: [main]
    paths:
      - 'supabase/migrations/**'

jobs:
  migrate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Supabase CLI
        uses: supabase/setup-cli@v1

      - name: Run migrations
        run: npx supabase db push --db-url ${{ secrets.DATABASE_URL }}

Related: Set Up CI/CD Pipeline for Next.js with GitHub Actions, Deploy Next.js Supabase App to Vercel Production

6. Monitoring and Logging

Error Tracking with Sentry

npm install @sentry/nextjs

// sentry.client.config.ts
import * as Sentry from "@sentry/nextjs"

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  tracesSampleRate: 1.0,
  environment: process.env.NODE_ENV,
})

// sentry.server.config.ts
import * as Sentry from "@sentry/nextjs"

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  tracesSampleRate: 1.0,
  environment: process.env.NODE_ENV,
})

Application Logging

// lib/logger.ts
type LogLevel = 'info' | 'warn' | 'error'

export function log(level: LogLevel, message: string, meta?: any) {
  const timestamp = new Date().toISOString()

  const logEntry = {
    timestamp,
    level,
    message,
    ...meta,
  }

  if (process.env.NODE_ENV === 'production') {
    // Send to logging service
    fetch('/api/logs', {
      method: 'POST',
      body: JSON.stringify(logEntry),
    })
  } else {
    console[level](logEntry)
  }
}

Performance Monitoring

// lib/monitoring.ts
export function trackPerformance(metric: string, value: number) {
  if (process.env.NODE_ENV === 'production') {
    // Send to analytics
    fetch('/api/metrics', {
      method: 'POST',
      body: JSON.stringify({ metric, value, timestamp: Date.now() }),
    })
  }
}

// Usage
const start = Date.now()
await fetchData()
trackPerformance('data_fetch_time', Date.now() - start)

Related: Monitor Next.js Application Performance in Production, Set Up Error Tracking with Sentry in Next.js

7. Custom Domain Configuration

Add Domain to Vercel

Go to Project Settings → Domains
Add your domain (e.g., example.com)
Configure DNS records:

Type: A
Name: @
Value: 76.76.21.21

Type: CNAME
Name: www
Value: cname.vercel-dns.com

SSL Certificate

Vercel automatically provisions SSL certificates via Let's Encrypt.

Redirect Configuration

// next.config.mjs
export default {
  async redirects() {
    return [
      {
        source: '/:path*',
        has: [
          {
            type: 'host',
            value: 'www.example.com',
          },
        ],
        destination: 'https://example.com/:path*',
        permanent: true,
      },
    ]
  },
}

Related: Configure Custom Domain for Next.js on Vercel, Deploy Next.js Supabase App to Vercel Production

8. Scaling Strategies

Horizontal Scaling

Vercel automatically scales based on traffic:

Serverless functions scale independently
Edge functions deployed globally
Static assets served from CDN

Database Scaling

-- Add indexes for frequently queried columns
CREATE INDEX idx_posts_user_id ON posts(user_id);
CREATE INDEX idx_posts_created_at ON posts(created_at DESC);

-- Use connection pooling
-- Configure in Supabase dashboard: Database → Connection Pooling

Caching Strategy

// app/posts/page.tsx
async function getPosts() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 60 }, // Revalidate every 60 seconds
  })
  return res.json()
}

Edge Functions

// app/api/edge/route.ts
export const runtime = 'edge'

export async function GET(request: Request) {
  // Runs on edge, close to users
  return new Response('Hello from the edge!')
}

Related: Next.js Edge Runtime vs Node Runtime When to Use, Supabase Database Query Optimization

9. Disaster Recovery

Database Backups

Supabase automatically backs up your database:

Point-in-time recovery (PITR) available on Pro plan
Daily backups retained for 7 days
Manual backups via CLI

## Create manual backup
npx supabase db dump -f backup.sql

## Restore from backup
psql -h db.your-project.supabase.co -U postgres -d postgres -f backup.sql

Rollback Strategy

## Rollback to previous deployment (Vercel)
vercel rollback

## Rollback database migration
npx supabase migration down

Health Checks

// app/api/health/route.ts
import { createClient } from '@/lib/supabase/server'

export async function GET() {
  try {
    const supabase = createClient()

    // Check database connection
    const { error } = await supabase.from('posts').select('count').limit(1)

    if (error) throw error

    return Response.json({ status: 'healthy' })
  } catch (error) {
    return Response.json({ status: 'unhealthy', error: error.message }, { status: 500 })
  }
}

10. Security Best Practices

Environment Variables

// ✅ Good: Server-side only
const serviceKey = process.env.SUPABASE_SERVICE_ROLE_KEY

// ❌ Bad: Exposed to client
const serviceKey = process.env.NEXT_PUBLIC_SERVICE_KEY

API Rate Limiting

// lib/rate-limit.ts
import { Ratelimit } from '@upstash/ratelimit'
import { Redis } from '@upstash/redis'

const ratelimit = new Ratelimit({
  redis: Redis.fromEnv(),
  limiter: Ratelimit.slidingWindow(10, '10 s'),
})

export async function checkRateLimit(identifier: string) {
  const { success } = await ratelimit.limit(identifier)
  return success
}

CORS Configuration

// middleware.ts
export function middleware(request: Request) {
  const response = NextResponse.next()

  response.headers.set('Access-Control-Allow-Origin', 'https://iloveblog.blog')
  response.headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE')

  return response
}

Security Headers

// next.config.mjs
export default {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'X-Frame-Options',
            value: 'DENY',
          },
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
          {
            key: 'Referrer-Policy',
            value: 'origin-when-cross-origin',
          },
        ],
      },
    ]
  },
}

Related: Implement API Rate Limiting in Next.js Applications, Implement Environment Variables Best Practices Next.js

11. Common Deployment Issues

Build Errors

Problem: Module not found after deploy

Solution:

## Clear cache and rebuild
rm -rf .next node_modules
npm install
npm run build

Environment Variable Issues

Problem: Environment variables not available

Solution:

Ensure variables are set in Vercel dashboard
Prefix client-side variables with NEXT_PUBLIC_
Redeploy after adding variables

Database Connection Issues

Problem: Can't connect to Supabase

Solution:

// Check connection pooling settings
const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
  {
    db: {
      schema: 'public',
    },
    auth: {
      persistSession: true,
    },
  }
)

Related: Fix Next.js Build Error Module Not Found After Deploy, Deploy Next.js 15 to Vercel Without Environment Variable Errors

12. Deployment Checklist

Pre-Deployment

[ ] All tests passing
[ ] Linter passing
[ ] Type checking passing
[ ] Environment variables configured
[ ] Database migrations ready
[ ] Security headers configured
[ ] Error tracking setup
[ ] Performance monitoring setup

Deployment

[ ] Deploy to staging first
[ ] Run smoke tests
[ ] Check error logs
[ ] Verify database migrations
[ ] Test critical user flows
[ ] Monitor performance metrics

Post-Deployment

[ ] Verify production deployment
[ ] Check error rates
[ ] Monitor performance
[ ] Test from different locations
[ ] Verify SSL certificate
[ ] Check custom domain
[ ] Monitor database performance

Frequently Asked Questions (FAQ)

What is the best platform to deploy Next.js with Supabase?

Vercel is the recommended platform for Next.js applications. It's built by the Next.js team, offers zero-config deployment, automatic HTTPS, preview deployments for pull requests, and global edge network distribution. The free tier is generous for indie developers.

How do I handle environment variables in production?

Set environment variables in your deployment platform's dashboard (Vercel, Netlify, etc.). Use NEXT_PUBLIC_ prefix for client-side variables. Never commit secrets to Git. Use different values for development, staging, and production environments.

Should I run database migrations before or after deployment?

Run migrations before deployment in a separate step. Use Supabase CLI with npx supabase db push in your CI/CD pipeline. Test migrations in staging first, and always create rollback migrations for safety.

How do I implement zero-downtime deployments?

Use platforms like Vercel that support atomic deployments. They deploy to new infrastructure, run health checks, then switch traffic. If deployment fails, traffic stays on the old version. Always test in staging first.

What monitoring should I set up for production?

Implement error tracking (Sentry), performance monitoring (Vercel Analytics), uptime monitoring (UptimeRobot), and database monitoring (Supabase Dashboard). Set up alerts for critical errors, high response times, and downtime.

How do I handle database backups?

Supabase automatically backs up your database daily (retained for 7 days on free tier, longer on paid plans). Pro plan includes Point-in-Time Recovery (PITR). Create manual backups before major migrations using npx supabase db dump.

Should I use connection pooling in production?

Yes, always enable connection pooling for production. It prevents connection limit errors under load and improves performance. Enable it in Supabase Dashboard → Database → Connection Pooling and use the pooled connection string.

How do I rollback a failed deployment?

On Vercel, use vercel rollback or rollback via dashboard. For database migrations, run your rollback migration with npx supabase migration down. Always test rollback procedures in staging.

What security headers should I configure?

Configure X-Frame-Options (DENY), X-Content-Type-Options (nosniff), Referrer-Policy (origin-when-cross-origin), and Content-Security-Policy. Use next.config.js headers() function to set these for all routes.

How do I optimize build times in CI/CD?

Cache node_modules and .next directories, use npm ci instead of npm install, enable Turbopack for faster builds, and run tests in parallel. Consider using GitHub Actions cache or Vercel's built-in caching.

Should I use preview deployments?

Yes, preview deployments are essential for testing changes before production. They create a unique URL for each pull request, allowing you to test features, run E2E tests, and get stakeholder approval before merging.

How do I handle secrets in CI/CD?

Use your CI/CD platform's secrets management (GitHub Secrets, GitLab CI/CD variables). Never commit secrets to Git. Use different secrets for staging and production. Rotate secrets regularly.

What's the best way to monitor database performance?

Use Supabase Dashboard's Query Performance tab to identify slow queries. Monitor connection count, query execution time, and database size. Set up alerts for high CPU usage or connection limits.

How do I implement health checks?

Create a /api/health endpoint that checks database connectivity, external service availability, and critical functionality. Use this endpoint for uptime monitoring and deployment verification.

Complete Guide to Building SaaS with Next.js and Supabase
Next.js Performance Optimization for Indie Developers
Supabase Authentication & Authorization Patterns
Set Up CI/CD Pipeline for Next.js with GitHub Actions

Conclusion

Deploying to production is a critical step in your application's lifecycle. With Vercel and Supabase, you get a powerful, scalable infrastructure without managing servers.

Focus on these key areas: automated deployments, proper environment configuration, database migrations, monitoring, and security. Start simple, then add complexity as needed.

Ship with confidence. Deploy today.

Originally published at https://iloveblogs.blog

Forem: Mahdi BEN RHOUMA

Fix Supabase Auth Session Not Persisting After Refresh

Fix Supabase Auth Session Not Persisting After Refresh

Fix Supabase Auth Session Not Persisting After Refresh Next.js 14

Why Supabase Sessions Disappear After Refresh

Common Misconceptions

Step-by-Step Solution

Step 1: Create Server-Side Supabase Client

Step 2: Create Client-Side Supabase Client

Step 3: Add Middleware for Session Refresh

Step 4: Use Server Client in Server Components

Step 5: Use Client Client in Client Components

Working Code Examples

Complete Authentication Flow

Protected Route Pattern

Common Mistakes

FAQ

Why does my session disappear after refresh?

How often should I refresh the session?

What's the difference between server and client Supabase clients?

Can I use localStorage instead of cookies?

Do I need to install additional packages?

Related Articles

Conclusion

Fitness for Developers: Combating Desk Life

Fitness for Developers: Combating Desk Life

The Developer Health Crisis

The Brutal Statistics

The Compound Effect

The Minimum Effective Dose

The 20-20-20 Rule (Enhanced)

The Pomodoro Fitness Hack

The 1% Rule

Desk Setup That Doesn't Destroy You

Monitor Position

Chair Ergonomics

Keyboard and Mouse

Standing Desk Strategy

Exercise That Fits Your Schedule

The 7-Minute Scientific Workout

Desk Exercises (No Sweat Required)

The Commute Workout

Nutrition for Sustained Energy

The Developer's Dilemma

Meal Prep for Coders

Hydration Strategy

Brain Food for Better Code

Sleep Optimization for Developers

The Screen Time Problem

Sleep Hygiene for Night Owls

The Power Nap Strategy

Mental Health and Stress Management

The Impostor Syndrome Workout

Stress-Busting Techniques

Building Sustainable Habits

The Habit Stack Method

The 2-Minute Rule

Tracking and Accountability

Technology Solutions

Fitness Apps for Developers

Wearable Technology

Creating a Developer-Friendly Gym Routine

The Minimalist Approach

Home Gym Essentials

Gym Alternatives

The ROI of Developer Fitness

Productivity Benefits

Career Benefits

Financial Benefits

Getting Started: Your 30-Day Plan

Week 1: Foundation

Week 2: Movement

Week 3: Optimization

Week 4: Integration

The Long Game

Facebook Outage March 3, 2026: What Happened and Why

Facebook Outage March 3, 2026: What Happened and Why

The Incident

Timeline

What We Know