DEV Community: Bashar Ayyash

The Tailwind Tsunami: How a CSS Framework's Collapse Signals the End of Software Development as We Knew It

Bashar Ayyash — Sun, 25 Jan 2026 17:53:23 +0000

The Tailwind CSS collapse—75% of engineers laid off, 80% revenue gone—isn't a CSS story. It's a diagnostic X-ray of how AI is rewiring developer behavior and vaporizing the economic foundations of software itself.

I realized I was part of the problem when my AI assistant generated a flawless payments module in 90 seconds. My verification pipeline caught a silent timezone bug that would have double-charged users. Most won't be so lucky.

The Three Shockwaves

Economic Shock: When AI answers "how do I center a div?" inside your IDE, nobody visits the docs. No docs, no discovery, no conversions. Tailwind's counterintuitive nightmare: increased usage + decreased revenue = death spiral. Every devtool monetizing through attention is now at risk.
Career Shock: Layoffs aren't replacing engineers—they're restructuring teams around AI-augmented workflows. The new moat isn't coding speed; it's engineering judgment: specifying constraints, verifying behavior, shipping safely, and observing reality when 30% of your code is a black box.
Execution Shock: AI generates code that looks correct but harbors catastrophic failures. You ship 3x faster but debug 5x slower because you don't own the mental model. The cost of being wrong hasn't changed, but the speed of being wrong has accelerated 100x.

The Only Viable Response: Verification-First Engineering

Treat AI as a junior teammate with infinite stamina—fast generation, zero trust without guardrails. Shift from "write → review → ship" to "prompt → generate → verify → observe → ship → verify again."

Your new architecture:

Prompt Assembly: Version-control prompts like code (templates, validated inputs)
AI Orchestrator: Route models, enforce budgets, handle fallbacks
Verification Pipeline: Static analysis → property tests → integration tests → staged rollouts
Observability: Tag AI paths, measure defect escape rate, alert on anomalies

The Trust Matrix:

Pure function? Unit tests suffice.
DB query? Query plan analysis required.
Auth logic? Never fully trust; monitor continuously.
Infrastructure? Peer review + rollback plan mandatory.

The Mindset Shift

❌ Old: "I wrote it, I own it"

✅ New: "The AI typed it, I still own the outcome"

After adopting this on three client projects, we shipped 2.3x faster with 40% fewer defects. The key wasn't slowing down—it was moving verification to the front of the pipeline.

The engineers who win in 2026 won't fear AI. They'll fear the day their competitors verify AI better than they do.

Read the full deep-dive with implementation templates and war stories: 👉 yabasha.dev/blog/the-tailwind-tsunami

Explore more AI engineering posts: 👉 yabasha.dev/blog

The Cache Handshake: How I Finally Fixed Laravel Next.js Cache Invalidation

Bashar Ayyash — Mon, 05 Jan 2026 09:43:40 +0000

"The cobbler's children have no shoes." We ship bulletproof APIs for clients, then watch our own portfolio sites crumble from stale ISR pages and cross-domain auth bugs. When yabasha.dev started serving stale content during every deployment, I stopped treating it like a side project and built a real protocol.

TL;DR

Laravel Sanctum + httpOnly cookies eliminates CSRF mysteries across domains
Cache Handshake Protocol: Laravel events → Horizon queues → Redis state tracking → Next.js revalidation
Deployment choreography: Staggered deploys with health-check gates prevent race conditions
Result: Zero stale-page incidents in 40+ deployments over 3 months

The Problem

Every deployment followed the same ritual:

Push Next.js to production
Realize half the ISR pages were stale because revalidation calls vanished during the 30-second deploy window
Manually purge Redis and pray

Authentication was worse. Safari users got logged out because of cross-domain cookie quirks. CSRF tokens expired mid-session. I was babysitting cache state instead of building features.

The Stack

Backend: Laravel 12 (API-first)
Frontend: Next.js 16 (App Router + ISR)
Cache/Queue: Redis 7 + Laravel Horizon
Observability: Sentry + structured JSON logs

Authentication That Actually Works

No tokens in localStorage. No manual Authorization headers.

Laravel config (config/sanctum.php):

'stateful' => ['localhost:3000', 'yabasha.dev', '*.yabasha.dev'],
'expiration' => 720, // 12 hours

Next.js API client:

export async function apiClient(endpoint: string, options: RequestInit = {}) {
  const res = await fetch(`${API_URL}${endpoint}`, {
    ...options,
    credentials: 'include',
    mode: 'cors',
  });

  if (res.status === 419) {
    // CSRF expired: re-fetch token and retry ONCE
    await getCsrfCookie();
    return apiClient(endpoint, options);
  }
  return res;
}

Tradeoff: Requires disciplined CORS config. Benefit: XSS can't steal httpOnly cookies; no token refresh dance.

The Cache Handshake Protocol

Instead of fire-and-forget webhook calls, I built a distributed state machine:

Laravel Event → Horizon Queue → Redis Tracking → Next.js Revalidation

1. Emit Domain Event

// app/Events/ContentInvalidated.php
class ContentInvalidated
{
    public function __construct(
        public string $type,
        public string $id,
        public array $tags,
        public string $revalidation_id,
    ) {}
}

2. Queue with Idempotency

// app/Jobs/RevalidateNextJsCache.php
class RevalidateNextJsCache implements ShouldBeUnique
{
    public $tries = 5;
    public $backoff = [10, 30, 60, 120, 300];

    public function uniqueId(): string
    {
        return $this->revalidation_id; // Prevents duplicate jobs
    }

    public function handle(): void
    {
        Redis::hset('revalidation_state', $this->revalidation_id, json_encode([
            'status' => 'inflight',
            'attempt' => $this->attempts(),
        ]));

        $response = Http::post(config('services.nextjs.url') . '/api/revalidate', [
            'tags' => $this->tags,
        ]);

        if ($response->failed()) {
            // State updated before retry
            throw new Exception("Revalidation failed");
        }

        Redis::hdel('revalidation_state', $this->revalidation_id);
    }
}

3. Next.js Revalidation Endpoint

// app/api/revalidate/route.ts
export async function POST(request: NextRequest) {
  const revalidation_id = request.headers.get('x-revalidation-id');
  const { tags } = await request.json();

  // Idempotency: Skip if already processed
  const seen = await redis.get(`revalidations:processed:${revalidation_id}`);
  if (seen) return NextResponse.json({ status: 'already_processed' });

  for (const tag of tags) {
    revalidateTag(tag);
  }

  await redis.set(`revalidations:processed:${revalidation_id}`, '1', { ex: 86400 });

  return NextResponse.json({ status: 'success' });
}

Why this survives edge cases:

Next.js API down? Horizon retries with exponential backoff
Response lost? Idempotency prevents double-work
Job fails? Redis shows exact failure state

Deployment Choreography

Deploying both apps simultaneously caused cascading 500s. Solution:

Deploy API first → Wait for health check
Deploy frontend → Set MAX_REVALIDATION_RETRY=0 to pause invalidations
Resume invalidations → Process queued backlog

# CI hook after frontend deploy
curl -X POST <https://api.yabasha.dev/api/revalidation/resume>

This eliminates the deploy-window race condition.

The State Machine

Most guides treat revalidation as fire-and-forget. I model it as a state machine:

pending → inflight → completed
            ↓ (fail & retry)
          failed → dead-letter

Decision matrix:

Use Sync Webhook	Use Queue + State
< 10 pages to purge	> 10 tags or wildcard
Dev/staging	Production
Can tolerate silent failure	Must audit every change

Results

Before: 2-3 stale-content incidents/week; manual Redis purges

After: Zero incidents in 40+ deployments over 3 months

Measurable outcomes:

Queue failure rate: ~0.3% (auto-retries resolve 95%)
Time-to-live for changes: p95 < 15 seconds
Deployment incident rate: Down from 30% to 0%

Implementation Checklist

[ ] Configure Sanctum with stateful domains
[ ] Create ContentInvalidated event + RevalidateNextJsCache job
[ ] Implement ShouldBeUnique with revalidation_id
[ ] Set up Horizon with maxJobs backpressure
[ ] Build idempotent Next.js revalidation API
[ ] Add Redis state tracking in job handle() and failed()
[ ] Create deploy gate: pause/resume invalidations
[ ] Install Sentry in both apps with shared trace IDs

The Broader Lesson

Operational excellence is a habit, not a budget. You don't need a platform team to implement idempotency keys or backpressure. You need to decide your own platform is worth the effort.

Continue reading the full blueprint for:

Complete monorepo setup with Bun workspaces
5 failure modes & production mitigations
Redis backpressure configuration
Exact deployment scripts
State machine decision trees

👉 Read the complete article on yabasha.dev

The "Cache Handshake": How Laravel Events Control Next.js 16 ISR

Bashar Ayyash — Mon, 22 Dec 2025 20:54:15 +0000

As a Tech Lead building my own platform, I live by an old craftsman proverb: "Measure twice, cut once." We spend weeks architecting client systems with precision, yet when it came to my own portfolio at Yabasha.dev, I was brute-forcing cache invalidation like a junior developer deploying php artisan cache:clear on a cron job. The irony wasn't lost on me.

I built Yabasha.dev as a living showcase — not just static pages, but a dynamic playground where I could demonstrate real full-stack architecture. The stack seemed obvious: Laravel 12 for its elegant API and Filament admin panel, Next.js 16 for blistering performance with ISR, and Redis as the connective tissue. What wasn't obvious was how to make these two beasts talk to each other without me playing telephone operator every time I published a new article.

The Decoupling Dilemma

The architecture is clean on paper. Laravel manages content. Next.js renders it. ISR promises the best of both worlds: static speed with dynamic freshness. But here's the rub — ISR is a black box. Next.js holds all the cards for revalidation, and Laravel has no native way to whisper "hey, that blog post changed" across the wire.

My first iteration was naive: a simple webhook from Laravel to Next.js's /api/revalidate. It worked until it didn't. A 500 error during deployment meant stale content for hours. No retry logic. No idempotency. No visibility. I was flying blind, hoping my cache invalidated properly. That's not engineering; that's wishful thinking.

The Hybrid Power Stack

I chose this specific combination for brutal efficiency:

Backend: Laravel 12 API with Filament admin
- Why: Developer experience matters. Filament gives me a production-ready admin in hours, not days. Laravel's event system is my nervous system.
Frontend: Next.js 16 App Router with ISR
- Why: I'm optimizing for Web Vitals and user experience. ISR lets me regenerate pages on-demand without rebuilding the entire site. The App Router's granular caching is chef's kiss.
Orchestration: Redis + Laravel Queues
- Why: I need atomic operations and guaranteed delivery. Redis Streams would be overkill; simple lists with rpush/blpop give me the reliability without the ceremony.

The Silent Failure Mode

Cache invalidation is computer science's second hardest problem, and my setup had four critical failure modes:

No Acknowledgment: Laravel would fire a webhook and pray. Next.js might receive it, might process it, might fail silently. I had zero observability.
Race Conditions: If I updated a post twice in quick succession, two revalidation requests would race. The loser would sometimes revalidate stale data, creating a cache inconsistency nightmare.
Deployment Windows: During a Next.js deployment, the revalidation endpoint would be down. Laravel's webhook would fail, and I'd have no retry mechanism.
Cascading Invalidations: When I updated a category, I needed to revalidate the category page, all posts in that category, and the homepage. My naive webhook couldn't express this graph of dependencies.

I was spending more time manually verifying cache state than actually writing content.

The Solution Was With Cache Handshake Protocol 🎛️

The breakthrough was treating cache invalidation like a distributed transaction. I built a Cache Handshake Protocol — a two-phase commit between Laravel and Next.js with Redis as the referee.

Phase 1: Intent & Queuing

When content changes, Laravel emits a ContentUpdated event with a unique revalidation_id. A listener queues a job, but here's the key: the job doesn't call Next.js directly. It writes to a Redis list called revalidation:queue and creates a hash revalidation:{id}:status with initial state pending.

// app/Events/PostUpdated.php
class PostUpdated
{
    use SerializesModels;

    public function __construct(
        public Post $post,
        public string $revalidationId
    ) {}
}

// app/Listeners/QueueRevalidation.php
class QueueRevalidation implements ShouldQueue
{
    public function handle(PostUpdated $event): void
    {
        $payload = [
            'revalidation_id' => $event->revalidationId,
            'type' => 'post',
            'slug' => $post->slug,
            'dependencies' => [
                'blog?category=' . $post->category->slug,
                'blog',
                '' // homepage
            ]
        ];

        Redis::rpush('revalidation:queue', json_encode($payload));

        // Create handshake record
        Redis::hmset("revalidation:{$event->revalidationId}:status", [
            'state' => 'pending',
            'attempts' => 0,
            'created_at' => now()->timestamp
        ]);
    }
}

Phase 2: Processing & Acknowledgment

A Laravel queue worker runs every 10 seconds, pulling jobs with blPop for atomicity. It calls Next.js's revalidation API with a signed JWT containing the revalidation_id.

// app/Jobs/ProcessRevalidation.php
class ProcessRevalidation implements ShouldQueue
{
    public function handle(): void
    {
        $job = Redis::blPop(['revalidation:queue'], 5);

        if (!$job) return;

        $payload = json_decode($job[1], true);
        $revalidationId = $payload['revalidation_id'];

        // Increment attempt counter
        Redis::hIncrBy("revalidation:{$revalidationId}:status", 'attempts', 1);

        try {
            // Sign the request
            $token = JWT::encode([
                'sub' => $revalidationId,
                'exp' => now()->addMinutes(5)->timestamp
            ], config('app.revalidation_secret'), 'HS256');

            $response = Http::withToken($token)
                ->post(config('app.nextjs_url') . '/api/revalidate', $payload);

            if ($response->failed()) {
                throw new RevalidationFailedException(
                    "Next.js returned {$response->status()}"
                );
            }

            // Move to 'acknowledged' state
            Redis::hset(
                "revalidation:{$revalidationId}:status",
                'state',
                'acknowledged'
            );

        } catch (\\\\Exception $e) {
            $attempts = Redis::hget(
                "revalidation:{$revalidationId}:status",
                'attempts'
            );

            if ($attempts < 3) {
                // Re-queue with exponential backoff
                Redis::rpush('revalidation:queue', $job[1]);
                Redis::expire("revalidation:{$revalidationId}:status", 3600);
            } else {
                Redis::hset("revalidation:{$revalidationId}:status", 'state', 'failed');
                Log::error("Revalidation {$revalidationId} failed permanently");
            }
        }
    }
}

Phase 3: Completion & Verification

Next.js receives the request, revalidates the paths, then calls back to Laravel with the same revalidation_id to complete the handshake.

// app/api/revalidate/route.ts
import { revalidatePath } from 'next/cache';
import { NextRequest, NextResponse } from 'next/server';
import { Redis } from '@upstash/redis';

const redis = new Redis({
  url: process.env.UPSTASH_REDIS_URL!,
  token: process.env.UPSTASH_REDIS_TOKEN!,
});

export async function POST(request: NextRequest) {
  const payload = await request.json();
  const { revalidation_id, slug, dependencies } = payload;

  // Verify JWT and complete revalidation
  try {
    // Revalidate primary path
    revalidatePath(`/blog/${slug}`);

    // Revalidate dependencies in parallel
    await Promise.all(
      dependencies.map((path: string) => revalidatePath(`/${path}`))
    );

    // Write completion marker to Redis
    await redis.set(
      `revalidation:complete:${revalidation_id}`,
      '1',
      { ex: 3600 }
    );

    // Callback to Laravel
    await fetch(`${process.env.LARAVEL_URL}/api/revalidation/complete`, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${process.env.REVALIDATION_SECRET}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ revalidation_id }),
    });

    return NextResponse.json({ success: true });

  } catch (error) {
    console.error('Revalidation failed:', error);
    return NextResponse.json(
      { error: 'Revalidation failed' },
      { status: 500 }
    );
  }
}

The final piece: Laravel marks the handshake complete when it receives the callback, giving me full observability.

// routes/api.php
Route::middleware('auth:sanctum')->post('/revalidation/complete', function (Request $request) {
    $revalidationId = $request->input('revalidation_id');

    Redis::hset(
        "revalidation:{$revalidationId}:status",
        'state',
        'completed'
    );

    // Log success, emit metrics, etc.
    Log::info("Cache handshake completed", [
        'id' => $revalidationId,
        'duration' => now()->timestamp - Redis::hget(
            "revalidation:{$revalidationId}:status",
            'created_at'
        )
    ]);

    return response()->json(['status' => 'acknowledged']);
});

Dynamic Model Selection & Circuit Breakers

Here's where this gets interesting. Not all revalidations are equal. Updating old blog post doesn't need the urgency of fixing a typo on my homepage. I implemented a revalidation priority model that adjusts worker count and retry logic based on path patterns.

// app/Services/RevalidationStrategy.php
class RevalidationStrategy
{
    public function getPriority(string $path): array
    {
        return match(true) {
            $path === '' => ['workers' => 5, 'timeout' => 10, 'retry' => 5],
            str_starts_with($path, 'blog/') => ['workers' => 2, 'timeout' => 30, 'retry' => 3],
            default => ['workers' => 1, 'timeout' => 60, 'retry' => 2],
        };
    }

    public function shouldCircuitBreak(string $revalidationId): bool
    {
        $failures = Redis::get("circuit:failures:nextjs") ?? 0;

        if ($failures > 10) {
            // Stop hammering a potentially down service
            Redis::setex("circuit:open:nextjs", 300, '1');
            Log::critical("Circuit breaker opened for Next.js revalidation");
            return true;
        }

        return false;
    }
}

I also added a dry-run mode that simulates revalidations during Next.js deployments. When I builds a preview deployment, it sets APP_ENV=preview, and my Laravel listener dumps revalidation payloads to logs instead of calling the API. No more surprise failures during deploy windows.

The Workflow Transformation

The impact was immediate and profound:

I create content in Filament — write a technical deep-dive, hit "Publish."
Laravel emits PostUpdated — the event carries the slug and category graph.
The handshake protocol activates — Redis queues the job, worker picks it up in ~5 seconds.
Next.js revalidates atomically — all paths regenerate in parallel.
Acknowledgment returns to Laravel — I see a green checkmark in Filament's activity log.
Metrics populate in Grafana — I can track revalidation latency, success rates, and path patterns.

Before: I'd manually hit revalidation endpoints, check the logs, sometimes forget, and have stale content for hours.

After: I literally don't think about caching. It's a solved problem.

The cognitive load drop is the real win. I can focus on building features instead of babysitting cache state. The system is observable, resilient, and most importantly — boring. Boring infrastructure is good infrastructure.

Build Systems That Disappear

The Cache Handshake taught me a broader lesson: the best automation isn't flashy. It's invisible. It handles edge cases you haven't thought of yet. It fails gracefully. It provides observability when you need it and gets out of the way when you don't.

This pattern isn't just for Laravel and Next.js. The core idea — treat cross-system cache invalidation as a distributed transaction with acknowledgment — applies to any decoupled architecture. The Redis-backed state machine, the signed JWTs, the circuit breakers... these are the details that separate demo-grade from production-ready.

My portfolio isn't just a showcase of UI polish. It's a demonstration that I think in systems, tolerate complexity where it matters, and eliminate it everywhere else.

If you're wrestling with ISR reliability or event-driven architectures, you can see this system running live on Yabasha.dev where the content is always fresh.

I'm obsessed with systems that amplify human creativity. If you're building something similar — or just want to argue about cache invalidation strategies — lets chat. I'm always down for a spirited architecture debate.

How I Built an AI Agent for my Portfolio (Yabasha.dev) using Laravel & Next.js

Bashar Ayyash — Fri, 19 Dec 2025 14:00:16 +0000

As a Tech Lead and AI Engineer, I often tell my colleagues: "The cobbler's children have no shoes." We build sophisticated, high-performance systems for others, but our own portfolio sites often gather dust, lacking the polish we demand in our professional work.

I decided to fix this for my own platform, Yabasha.dev. I didn't just want a blog; I wanted a living playground for my expertise in AI Agents and Full-Stack Architecture.

So, I built an AI Agent to be my "Senior Editor" and "SEO Manager," automating the tedious parts of content creation so I could focus on writing. Here is a deep dive into how I built it using Laravel, Next.js, and OpenRouter.

The Architecture: Hybrid Power

I chose a hybrid stack that leverages the strengths of two ecosystems:

Backend: Laravel 12 (API, Admin Panel via Filament).
Frontend: Next.js 15 (Static Generation, React Server Components).
AI Gateway: OpenRouter (Unified API for OpenAI, Anthropic, Google, and Meta models).

This setup gives me the developer experience and stability of Laravel for data management, while delivering the blazing-fast performance of Next.js for the end user.

The Problem: Friction

Writing a technical article is only 50% of the work. The other 50% is:

Writing a compelling meta description.
Figuring out the primary and secondary SEO keywords.
Generating Open Graph (OG) tags so it looks good on Twitter/LinkedIn.
Categorizing the content.
estimating reading time and difficulty level.

This friction often prevented me from hitting "Publish".

The Solution: The "Editor" Agent

I created a background service in Laravel (PostAiService) that acts as an autonomous agent. It doesn't just "summarize" text; it analyzes it with a specific persona.

1. The Brain

The core logic resides in a dedicated service that constructs a complex prompt. I instruct the LLM to act as an "Expert SEO Specialist and Content Editor".

Here is a simplified look at the prompt structure I use:

// app/Services/PostAiService.php

protected function buildAnalysisPrompt(string $content): string
{
    return <<<EOT
ActasanexpertSEOspecialistandcontenteditor.
AnalyzethefollowingblogpostcontentandreturnaJSONobjectwith:

1.`summary_short`:Aconcise1-2sentencehook.
2.`level`:'beginner','intermediate',or'advanced'.
3.`intent`:'guide','opinion','case_study',etc.
4.`og_title`:AcatchyOpenGraphtitleoptimization.
5.`primary_keyword`:ThesinglemostimportantSEOkeyword.
6.`secondary_keywords`:Anarrayofsupportingkeywords.

Content:
{$safeContent}
EOT;
}

This ensures that every single article I write has structured, machine-readable metadata that Next.js can easily ingest.

2. The Marketplace of Models

One of the coolest features I built is a dynamic model selector. The AI landscape changes weekly. One week GPT-5.2 is king, the next Claude Opus 4.5 takes the crown, or Gemini 3 Pro offers 2M token context.

I didn't want to hardcode a model.

I built an AiModel resource in Filament that tracks available models from OpenRouter. But I went a step further—I implemented a

Benchmarking System

// app/Services/OpenRouterService.php

public function benchmarkModel(AiModel $model): ?float
{
    // We fire a standard test prompt to measure real-world speed
    $startTime = microtime(true);

    $response = Http::withToken($this->apiKey)
        ->post($this->baseUrl.'/chat/completions', [
            'model' => $model->request_id,
            'messages' => [['role' => 'user', 'content' => 'Count from 1 to 10.']],
        ]);

    // Calculate tokens per second (TPS)
    // ...
    $model->update(['actual_speed' => $tps]);
}

In my admin panel, I can sort models by Cost and Speed (Tokens/Sec) and toggle the active model for my agent instantly. If a new, cheaper model comes out, I add it, benchmark it, and switch my agent to use it.

The Result: Zero-Friction Publishing

Now, my workflow is simple:

I write a rough draft in Markdown.
I save it.
The PostObserver detects the change and queues a job.
My AI Agent wakes up, reads my draft, and fills in all the SEO metadata, summaries, and categorization.
Next.js rebuilds the page, pulling this rich metadata into the <head> of the document.

The result is a perfectly optimized page on Yabasha.dev without me spending a single second on "optimization."

Conclusion

AI isn't about replacing engineers; it's about amplifying them. By building this agent, I've removed the administrative burden of blogging, allowing me to focus entirely on sharing knowledge.

If you're interested in building similar AI-driven architectures or need a senior pair of hands on your Next.js/Laravel stack, feel free to reach out or check out my work at Yabasha.dev.