DEV Community: Daniel Trix Smith

Laravel Middleware Execution Order Explained: Why Your Middleware Runs in the Wrong Order

Daniel Trix Smith — Fri, 03 Jul 2026 06:15:44 +0000

Laravel middleware can be perfectly written and still behave unexpectedly.

You may notice authentication running too late, permission checks failing, tenant initialization not working, logging middleware missing important data, or custom middleware executing in an order you didn't expect.

In many cases, the middleware code itself is not the problem.

The real issue is middleware execution order.

Understanding how Laravel executes middleware is critical when building secure and scalable applications because every request passes through multiple layers before reaching your controller.

Common Symptoms

You may encounter problems such as:

Authenticated users being treated as guests
Permission middleware failing unexpectedly
Tenant information not being available
Request logging missing user details
Rate limiting triggering before authentication
Redirect loops after login
Middleware appearing to be ignored completely

These issues are often caused by middleware running in the wrong sequence.

How Laravel Processes a Request

A typical Laravel request follows this flow:

Browser

↓

Global Middleware

↓

Middleware Group (Web/API)

↓

Route Middleware

↓

Controller

↓

Response

↓

Browser

Each middleware layer can inspect, modify, allow, or block the request before it reaches your application logic.

Because of this, execution order matters.

Example Problem #1

Suppose you have two middleware:

Authenticate User
Log User Activity

Your logging middleware expects an authenticated user.

$user = auth()->user();

However, the log always shows null.

Why?

Because the logging middleware executes before authentication.

The solution is ensuring authentication middleware runs first so user information is available when logging occurs.

Example Problem #2

Multi-tenant applications often initialize tenant information through middleware.

TenantMiddleware

If another middleware accesses the database before tenant initialization, queries may use the wrong database connection.

This can lead to:

Incorrect data
Missing records
Security issues
Cross-tenant data exposure

Tenant initialization must execute before middleware that depends on tenant context.

Global Middleware

Global middleware runs on every request.

Examples include:

Maintenance mode
Request trimming
CORS handling
Proxy handling

Because these execute first, they should contain functionality required by the entire application.

Avoid placing authentication or business-specific logic in global middleware unless absolutely necessary.

Middleware Groups

Laravel provides middleware groups such as:

Web Group

Typically contains:

Session handling
CSRF protection
Cookie encryption
Error sharing
API Group

Typically contains:

API-specific middleware
Rate limiting
Request bindings

Choosing the wrong group can create unexpected behavior.

For example, using session-dependent middleware inside API routes may cause authentication issues.

Route Middleware

Route middleware executes only on routes where it is attached.

Example:

Route::middleware([
    'auth',
    'verified',
    'permission'
])->group(function () {

});

Laravel executes middleware in the order they are defined.

Changing the order can completely change application behavior.

Common Mistake #1

Permission middleware before authentication:

Route::middleware([
    'permission',
    'auth'
]);

The permission middleware attempts to check permissions before a user is authenticated.

Result:

Unauthorized errors
Null user exceptions
Incorrect redirects

Correct order:

Route::middleware([
    'auth',
    'permission'
]);

Common Mistake #2

Logging Before Authentication

Route::middleware([
    'log',
    'auth'
]);

The logging middleware cannot identify the user because authentication has not yet occurred.

Correct order:

Route::middleware([
    'auth',
    'log'
]);

Debugging Middleware Execution

One of the easiest ways to identify execution order problems is logging.

Example:

public function handle($request, Closure $next)
{
    logger('Auth Middleware');

    return $next($request);
}

Add similar logs to all middleware.

The log output immediately reveals the execution sequence.

Example output:

Tenant Middleware
Auth Middleware
Permission Middleware
Logging Middleware

This makes troubleshooting significantly easier.

Laravel 11 Middleware Registration

Laravel 11 introduced a cleaner middleware configuration approach.

Middleware is commonly registered within:

bootstrap/app.php

Incorrect registration may result in:

Middleware not executing
Alias not found errors
Routes bypassing protection

Always verify middleware aliases and configuration after creating new middleware.

Route Cache Issues

Another common cause of middleware problems is route caching.

You may update middleware configuration but continue seeing old behavior.

Clear caches after middleware changes:

php artisan route:clear
php artisan config:clear
php artisan cache:clear

Many "middleware not working" reports are actually cache-related issues.

Best Practices

✔ Keep middleware focused on a single responsibility

✔ Authenticate users before authorization checks

✔ Initialize tenant context before database access

✔ Use logging while debugging execution order

✔ Clear caches after middleware changes

✔ Avoid placing business logic inside middleware

✔ Test middleware independently

✔ Review route groups carefully

Final Thoughts

Middleware execution order is one of the most overlooked parts of Laravel development.

A middleware can be written perfectly, registered correctly, and still fail because another middleware runs before or after it.

Whenever middleware behaves unexpectedly, don't just inspect the code.

Inspect the execution order.

In many cases, the fix is not rewriting the middleware—it's simply placing it in the correct position within the request lifecycle.

One Laravel Feature That Can Save You From Duplicate Payments and Race Conditions

Daniel Trix Smith — Thu, 02 Jul 2026 21:59:42 +0000

Imagine this:

A user clicks the "Pay Now" button twice.

Or two requests hit your API at the exact same time.

Without proper protection, you might:

❌ Charge the customer twice.
❌ Create duplicate orders.
❌ Oversell inventory.
❌ Corrupt important data.

Many developers try to solve this with:

JavaScript button disabling
Validation rules
Unique checks

These improve the user experience—but they don't solve concurrency.

A better solution is to combine Laravel's database transactions with locking.

DB::transaction(function () use ($orderId) {
    $order = Order::where('id', $orderId)
        ->lockForUpdate()
        ->first();
    if ($order->status !== 'pending') {
        return;
    }
    $order->update([
        'status' => 'paid',
    ]);
});

lockForUpdate() ensures that while one request is processing the order, every other concurrent request waits until the transaction completes.

For distributed systems, Laravel also provides cache locks:

Cache::lock("order:{$orderId}", 10)->block(5, function () {
    // Process payment safely
});

The biggest lesson?

Validation protects your inputs.

Locks protect your data.

Knowing when to use each is what separates production-ready applications from applications that only work in development.

What's your preferred strategy for handling race conditions in Laravel?

Laravel #PHP #Backend #SoftwareEngineering #WebDevelopment #Programming #Concurrency #Database #Architecture

Advanced HTML Lazy Loading: Complete Guide to Faster Websites and Better Performance

Daniel Trix Smith — Mon, 09 Mar 2026 19:17:32 +0000

Introduction

Website speed is one of the most important factors for SEO, user experience, and performance optimization. When a web page loads, it often downloads many resources like images, videos, iframes, and scripts, even if the user never scrolls to them.

This is where Lazy Loading becomes extremely useful.

Lazy loading allows a website to delay loading non-critical resources until they are actually needed, usually when the user scrolls near them.

Benefits

Faster page load time
Reduced bandwidth usage
Better SEO ranking
Improved Core Web Vitals
Better user experience

What is Lazy Loading?

Lazy loading is a performance optimization technique where resources are loaded only when they are needed instead of loading everything immediately when the page opens.

Without Lazy Loading

Page Load → Image1 → Image2 → Image3 → Image4 → Image5

With Lazy Loading

Page Load → Image1
Scroll → Image2
Scroll → Image3
Scroll → Image4

Native Lazy Loading in HTML

Modern browsers support built-in lazy loading using the loading attribute.

Syntax

<img src="image.jpg" loading="lazy" alt="Example Image">

Example

<img 
src="mountain.jpg" 
alt="Beautiful Mountain"
width="800"
height="500"
loading="lazy">

Attribute Values

Value	Meaning
lazy	Load when needed
eager	Load immediately
auto	Browser decides

Lazy Loading for Iframes

You can also lazy load embedded content like YouTube videos or maps.

<iframe
src="https://www.youtube.com/embed/video-id"
loading="lazy"
width="600"
height="400">
</iframe>

Useful for:

YouTube videos
Google Maps
Social media embeds
External widgets

Lazy Loading Using JavaScript (Advanced)

Before native support existed, developers implemented lazy loading using JavaScript.

HTML Setup

<img 
data-src="photo.jpg"
class="lazy-image"
alt="Nature Image">

JavaScript Example

document.addEventListener("DOMContentLoaded", function () {

let lazyImages = document.querySelectorAll(".lazy-image");

let observer = new IntersectionObserver(function(entries, observer) {

entries.forEach(function(entry) {

if (entry.isIntersecting) {

let img = entry.target;
img.src = img.dataset.src;
img.classList.remove("lazy-image");

observer.unobserve(img);

}

});

});

lazyImages.forEach(function(img) {
observer.observe(img);
});

});

This approach uses the Intersection Observer API, which is efficient and modern.

Lazy Loading Background Images

Sometimes images are used inside CSS backgrounds.

HTML

<div class="lazy-bg" data-bg="background.jpg"></div>

JavaScript

let lazyBackgrounds = document.querySelectorAll(".lazy-bg");

let observer = new IntersectionObserver(entries => {

entries.forEach(entry => {

if(entry.isIntersecting){

let element = entry.target;
element.style.backgroundImage = "url(" + element.dataset.bg + ")";
observer.unobserve(element);

}

});

});

lazyBackgrounds.forEach(bg => observer.observe(bg));

Benefits of Lazy Loading

1. Faster Page Speed

Only necessary resources load first.

2. Better SEO

Search engines favor fast websites.

3. Reduced Bandwidth

Users download fewer files.

4. Better Mobile Experience

Mobile networks benefit greatly from lazy loading.

Best Practices for Lazy Loading

Always Define Width and Height

<img src="image.jpg" loading="lazy" width="600" height="400">

This prevents layout shift issues.

Avoid Lazy Loading Above-the-Fold Images

Hero images should load immediately.

Bad example:

<img src="hero.jpg" loading="lazy">

Correct:

<img src="hero.jpg" loading="eager">

Lazy Loading vs Eager Loading

Feature	Lazy Loading	Eager Loading
Load time	Delayed	Immediate
Performance	Faster	Slower
Bandwidth	Lower	Higher
Use case	Images, videos	Hero images

When Should You Use Lazy Loading?

Use lazy loading for:

Blog images
Product galleries
Advertisements
Embedded videos
Comment sections
Infinite scrolling pages

Avoid lazy loading for:

Website logo
Hero banner
Above-the-fold images

Simple Working Example

<!DOCTYPE html>
<html>
<head>
<title>Lazy Loading Example</title>
</head>

<body>

<h1>Lazy Loading Images</h1>

<img src="image1.jpg" loading="lazy" alt="Image 1">
<img src="image2.jpg" loading="lazy" alt="Image 2">
<img src="image3.jpg" loading="lazy" alt="Image 3">

</body>
</html>

Conclusion

Lazy loading is one of the most effective techniques for improving website performance.

By combining:

Native HTML lazy loading
Intersection Observer API
Proper SEO practices

you can significantly improve page speed, user experience, and search engine rankings.

Author Tip:

Always test lazy loading using Google Lighthouse or PageSpeed Insights to measure performance improvements.

Advanced HTML: Using Markup to Control State, Behavior, and UX

Daniel Trix Smith — Mon, 09 Feb 2026 17:42:29 +0000

Most developers assume state = JavaScript.

That assumption is wrong.

Modern HTML already controls state transitions, interaction flow, and user intent — silently, efficiently, and reliably.

Advanced developers don’t fight this.

They design with it.

HTML Already Knows User Intent

Before JavaScript runs, the browser understands:

Click intent
Navigation intent
Submission intent
Focus intent
Cancel intent

<button type="submit">Save</button>
<button type="reset">Reset</button>
<button type="button">Cancel</button>

Each button has built-in behavior.

Overriding this with JavaScript removes accessibility and expected UX.

State Exists Without Variables

HTML can express state declaratively.

<details>
  <summary>Show advanced options</summary>
  <p>Hidden content</p>
</details>

No JavaScript.

No bugs.

No framework state.

Focus Is a Native State Machine

<form>
  <input required>
  <button>Submit</button>
</form>

The browser:

Manages focus
Handles validation
Communicates errors
Prevents invalid submission

This is real UI logic — already implemented.

Navigation Is Built-in State

<a href="#pricing">See pricing</a>

You get:

Scroll position
Browser history
Shareable URLs
Zero JS cost

HTML navigation scales better than custom routers.

Forms Control Application Flow

A form defines:

Entry point
Exit point
Validation rules
Submission lifecycle

<form method="post">
  <input name="email" required>
  <button>Continue</button>
</form>

JavaScript should enhance this — not replace it.

Real State Attributes Matter

<input disabled>
<input readonly>
<input hidden>

These states affect:

Accessibility
Keyboard navigation
Screen readers
Browser behavior

CSS-only states are invisible to assistive tech.

The DOM Is a State Tree

<button aria-expanded="true">

Attributes describe state, communicate intent, and integrate with CSS and JS.

JavaScript Is an Upgrade Layer

Advanced HTML mindset:

HTML defines structure and state
CSS defines appearance
JS upgrades interaction

If JS fails, the app still works.

Final Thought

HTML is not passive.

It controls behavior, manages state, and defines user flow.

If your app collapses without JavaScript, your HTML is doing nothing.

Advanced developers let the browser work for them.

Advanced HTML: Powerful Features Most Developers Underuse

Daniel Trix Smith — Sun, 08 Feb 2026 16:06:31 +0000

Advanced HTML: Features Every Frontend Developer Should Master

HTML is often underestimated as a “basic” language, but modern HTML is powerful enough to solve many problems without heavy JavaScript or external libraries. Mastering advanced HTML leads to better performance, accessibility, and maintainability.

This article explores advanced HTML concepts that are practical and production-ready.

Semantic HTML for Meaningful Structure

Semantic elements describe the purpose of content, not just its appearance.

<header></header>
<nav></nav>
<main></main>
<section></section>
<article></article>
<aside></aside>
<footer></footer>

Benefits:

Improved accessibility for screen readers
Better SEO
Cleaner and more readable CSS
Easier long-term maintenance

Native Modals with `<dialog>`

HTML provides a built-in modal solution.

<dialog id="confirmDialog">
  <h3>Confirm Action</h3>
  <p>Are you sure you want to continue?</p>
  <button onclick="confirmDialog.close()">Cancel</button>
</dialog>

<button onclick="confirmDialog.showModal()">Open Dialog</button>

Benefits:

Keyboard support by default
Focus management handled by the browser
No external JavaScript required

Advanced Form Validation Without JavaScript

HTML form validation is more powerful than many developers realize.

<input type="email" required>
<input type="password" minlength="8">
<input type="number" min="1" max="100">

Pattern-based validation:

<input type="text" pattern="[A-Za-z]{3,}" title="At least 3 alphabetic characters"/>

Toggle Interfaces Using `<details>` and `<summary>`

Ideal for FAQs and accordion-style content.

<details>
  <summary>What is Advanced HTML?</summary>
  <p>It refers to using modern, semantic, and native HTML features effectively.</p>
</details>

Benefits:

Accessible by default
SEO-friendly
No JavaScript needed

Responsive Images with `<picture>`

Serve the best image format and size per device.

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Responsive image">
</picture>

Benefits:

Improves loading speed
Reduces bandwidth usage
Works across different devices

Custom Data Attributes (`data-*`)

Store metadata directly in HTML.

<button data-user-id="25" data-role="editor">
  Edit Profile
</button>

Access in JavaScript:

button.dataset.userId

Accessibility (A11y) Best Practices

<label for="username">Username</label>
<input id="username" type="text">

<button aria-label="Close menu">✕</button>

Rules:

Prefer native elements over custom ones
Use proper heading order (h1 → h6)
Avoid clickable <div> elements

Reusable Markup with `<template>`

Templates are not rendered until activated by JavaScript.

<template id="cardTemplate">
  <div class="card">
    <h3></h3>
    <p></p>
  </div>
</template>

Benefits:

Useful for dynamic content without frontend frameworks
Keeps DOM cleaner and lighter

Native Lazy Loading

Improve performance using a single attribute.

<img src="photo.jpg" loading="lazy" alt="Lazy loaded image">
<iframe src="video.html" loading="lazy"></iframe>

Important Metadata Tags

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Advanced HTML techniques for modern web development">

Benefits:

Impacts SEO and UX
Ensures proper scaling on all devices
Helps with social previews

Conclusion

Advanced HTML is about:

Leveraging native browser features
Writing semantic and accessible markup
Reducing unnecessary JavaScript
Building faster and more maintainable websites

Master HTML, and your overall frontend skills will improve automatically.

Discussion

Which advanced HTML feature do you find most useful in real-world projects?

You Can Use an HTML Input Outside

Daniel Trix Smith — Tue, 03 Feb 2026 04:30:00 +0000

When I first learned HTML forms, I believed one rule was absolute:

All inputs must be inside a <form> tag.

Turns out… that’s not completely true.

HTML actually allows inputs outside the form element, and there’s a clean reason why this feature exists. I discovered this while working on a layout where moving the input inside the form would break the design.

What We All Know

Let me explain it in simple words, with real examples.

Normally, we write forms like this:

<form action="/submit" method="post">
  <input type="text" name="username">
  <button type="submit">Submit</button>
</form>

✔ Everything is inside the <form>
✔ Works perfectly
✔ Easy to understand

So why would HTML allow anything else?

The Problem: Layout Comes First Sometimes

In real projects:

Inputs may live inside cards
Buttons may be in headers or footers
Forms may span multiple UI sections

Forcing everything inside

can:

Break CSS layouts
Make components harder to reuse
Create ugly HTML structures

HTML solved this problem quietly.

The Hidden Feature: form Attribute 🔥

HTML inputs support a special attribute:

form="form_id"

This allows an input to belong to a form even when it’s outside of it.

Example: Input Outside the Form (But Still Submits)

<form id="userForm" action="/submit" method="post">
  <button type="submit">Submit</button>
</form>

<input
  type="text"
  name="username"
  placeholder="Enter username"
  form="userForm">

What’s happening here?

The <input> is outside the <form>

The form="userForm" links it to the form

When you submit the form → the input value is sent

🤯 Yes, it works.

HTML has more flexibility than we think.
Sometimes the best features are the quiet ones—added not for beginners, but for real-world problems.

Have you ever struggled with form layouts because of HTML structure?
Or did you already know about the form attribute?

I’d love to hear how you handle complex forms 👇

DEV Community: Daniel Trix Smith

Laravel Middleware Execution Order Explained: Why Your Middleware Runs in the Wrong Order

How Laravel Processes a Request

Route Cache Issues

Best Practices

Final Thoughts

One Laravel Feature That Can Save You From Duplicate Payments and Race Conditions

Laravel #PHP #Backend #SoftwareEngineering #WebDevelopment #Programming #Concurrency #Database #Architecture

Advanced HTML Lazy Loading: Complete Guide to Faster Websites and Better Performance

Introduction

Benefits

What is Lazy Loading?

Without Lazy Loading

With Lazy Loading

Native Lazy Loading in HTML

Syntax

Example

Attribute Values

Lazy Loading for Iframes

Lazy Loading Using JavaScript (Advanced)

HTML Setup

JavaScript Example

Lazy Loading Background Images

HTML

JavaScript

Benefits of Lazy Loading

1. Faster Page Speed

2. Better SEO

3. Reduced Bandwidth

4. Better Mobile Experience

Best Practices for Lazy Loading

Always Define Width and Height

Avoid Lazy Loading Above-the-Fold Images

Lazy Loading vs Eager Loading

When Should You Use Lazy Loading?

Simple Working Example

Conclusion

Advanced HTML: Using Markup to Control State, Behavior, and UX

HTML Already Knows User Intent

State Exists Without Variables

Focus Is a Native State Machine

Navigation Is Built-in State

Forms Control Application Flow

Real State Attributes Matter

The DOM Is a State Tree

JavaScript Is an Upgrade Layer

Final Thought

Advanced HTML: Powerful Features Most Developers Underuse

Advanced HTML: Features Every Frontend Developer Should Master

Semantic HTML for Meaningful Structure

Native Modals with <dialog>

Advanced Form Validation Without JavaScript

Toggle Interfaces Using <details> and <summary>

Responsive Images with <picture>

Custom Data Attributes (data-*)

Accessibility (A11y) Best Practices

Reusable Markup with <template>

Native Lazy Loading

Important Metadata Tags

Conclusion

Discussion

You Can Use an HTML Input Outside

Native Modals with `<dialog>`

Toggle Interfaces Using `<details>` and `<summary>`

Responsive Images with `<picture>`

Custom Data Attributes (`data-*`)

Reusable Markup with `<template>`