Essentially, most fonts (apart from monospaced fonts) use proportional spacing, which means that each character takes up a different amount of horizontal space. This can lead to numbers looking uneven and misaligned, especially when they’re displayed in a tabular format.

Here’s what it looks like.

This creates issues when numbers change, let’s say in clocks or counters, the text/numbers shifts horizontally, which can be visually jarring. In other words, it will cause a layout shift, which is not a good user experience.

To fix this issue, you can use the font-variant-numeric CSS property (which I recently stumbled upon) with the value tabular-nums.

This will force all the numbers in the font to take up the same amount of horizontal space, creating a more uniform and visually appealing look. Once this property is applied, the numbers behave like monospaced digits, even in proportional fonts.

I’ve created a CodePen demo to show you how it works.

See the Pen Tabular Numbers Demo by Amit Merchant (@amit_merchant) on CodePen.

Now, you might be wondering, what are all the places where this can be useful?

Well, here are a few examples:

• Clocks and timers
• Financial tables
• Analytics dashboards
• Scoreboards
• Any place where numbers are displayed in a tabular format

Also, this property is supported in all modern browsers, so you can safely use it in your projects without worrying about compatibility issues.

Read more about the font-variant-numeric property on MDN Web Docs.

Essentially, the Laravel AI SDK abstracts away the complexities of working with AI models (such as OpenAI, Anthropic, Gemini, Mistral, Ollama, and more) and provides a seamless experience for developers to leverage AI in their applications. It supports various AI services, including natural language processing, image recognition, and more.

You can check this page to learn how to get started with the Laravel AI SDK and explore its features. In this article, though, I want to share some real-world examples of how you can use the Laravel AI SDK in your applications.

• Mining user data for insights
• Code Review Bot for PRs (GitHub / GitLab Integration)
• Personalized Learning / Quiz System for an EdTech App
• In closing

Mining user data for insights

The simplest use case of the Laravel AI SDK is to mine user data for insights. For instance, you can use the SDK to analyze user models and related data to extract valuable insights.

For instance, you can use the User + Order Eloquent models as context for your AI queries.

Here’s an AccountAssistant assistant class that uses the Laravel AI SDK to analyze user data and provide insights:

// app/Ai/Agents/AccountAssistant.php

namespace App\Ai\Agents;

use App\Models\User;
use App\Models\Order;
use Laravel\Ai\Contracts\Agent;
use Laravel\Ai\Contracts\Conversational;
use Laravel\Ai\Promptable;
use Stringable;

class AccountAssistant implements Agent, Conversational
{
    use Promptable;

    public function __construct(public User $user) {}

    public function instructions(): Stringable|string
    {
        return 'You are an assistant helping a customer with their account and recent orders.';
    }

    public function messages(): iterable
    {
        // You might combine past chat messages from a History model,
        // but you can also “prime” the conversation with DB data:
        $orders = Order::where('user_id', $this->user->id)
            ->latest()
            ->limit(5)
            ->get()
            ->map(fn ($order) => "- #{$order->id} ({$order->status}) total {$order->total}");

        return [
            // System / context message built from Eloquent:
            new \Laravel\Ai\Messages\Message(
                'system',
                "Here are the user's 5 most recent orders:\n".$orders->implode("\n")
            ),
        ];
    }
}

And then use it like this:

$assistant = \App\Ai\Agents\AccountAssistant::make(user: $user);

$response = $assistant->prompt('Where is my last order?');

return (string) $response;

In this example, the AccountAssistant class implements the Agent and Conversational interfaces provided by the Laravel AI SDK. The instructions method provides context for the AI model, while the messages method retrieves the user’s recent orders from the database and formats them as a system message.

When you call the prompt method with a user query (e.g., “Where is my last order?”), the AI model will analyze the provided context and generate a response based on the user’s recent orders.

Code Review Bot for PRs (GitHub / GitLab Integration)

You can use the SDK to build an internal “AI reviewer” that comments on pull requests in your Laravel monorepo.

At a high level:

• When a PR is opened or updated, your CI pipeline (or a small Laravel service) fetches the diff and key files.

• You create an agent like CodeReviewer whose instructions() explain your team’s standards: coding style, architecture rules, security expectations, performance guidelines, etc.

• In prompt(), you pass a structured prompt: a short summary of the PR, the diff, and maybe a list of changed files as attachments (e.g. Files\Document::fromString($diff, 'text/plain')).

• The agent uses structured output to return something like:

  • summary: overall explanation of changes

  • issues: list of problems with severity and file/line hints

  • suggestions: refactors or tests to add

• Your Laravel app then maps that output to actual comments on the PR via the Git hosting API.

This leverages agents, attachments, and structured output, but in a domain (code review automation) not explicitly shown in the docs.

Personalized Learning / Quiz System for an EdTech App

Imagine you’re building an online course platform and want smarter, adaptive practice for students.

You could use the AI SDK to:

• Generate personalized quizzes from course content

When a student finishes a lesson, call an agent like QuizGenerator with:

• Instructions: “You are an exam coach. Generate questions only from the given lesson content, aligned to this student’s weaknesses.”

• Messages: include a summary of what the student just studied, plus their past quiz results.

• Attachments: lesson notes or slides as Files\Document::fromStorage(...).The agent uses structured output to return a schema like:You then persist these questions in your quizzes and quiz_questions tables.

• Adapt difficulty using conversation context

Implement Conversational or RemembersConversations so the agent can see previous attempts, topics the student struggled with, and feedback given. The next quiz can intentionally focus on weak areas or gradually increase difficulty.

• Explain answers on demand

A second agent, AnswerExplainer, takes the student’s wrong answer and the original question as prompt, and returns a tailored explanation (“why B is wrong and C is right”), again via structured output so you can show explanations, hints, and follow‑up questions cleanly in your UI.

• Enhance with embeddings and reranking

• Use Embeddings + whereVectorSimilarTo to find the most relevant paragraphs in your course material for each question.

• Use Reranking to reorder candidate questions so the most relevant and appropriate ones are presented first.

This gives you an adaptive learning system built entirely on top of the Laravel AI SDK primitives: agents, structured output, files/attachments, conversation memory, embeddings, and reranking.

In closing

These are just a few examples of how you can use the Laravel AI SDK in real-world applications. The SDK provides a lot of flexibility and power (such as remembering conversations and middleware), allowing you to build intelligent features that can enhance user experience and provide valuable insights.

Whether you’re mining user data, automating code reviews, or creating personalized learning experiences, the Laravel AI SDK has you covered.

It’s a really well-written piece that I highly recommend you to read. But I was wondering what they are using under the hood to add these sounds since the article itself doesn’t mention any libraries or tools. So, like always, I dug the source code, and I found there’s this magic library called SND (also open-source) is being used to add these sounds.

Now, it’s pretty interesting because SND is a tiny JavaScript library that makes it super easy to add UI sounds to your web applications. It provides a simple API to play sounds for various UI interactions like button clicks, notifications, warnings, errors, and more.

And as the article title suggests, it literally takes just a “heartbeat” to add sounds to your web apps with SND.

SND takes an interesting approach to use the sounds where once the library is included in your app, you just need to add predefined classes to the HTML elements where you want the sounds to be played.

SND lets you choose from three audio kits, all of which have different sound signatures: sine, piano, and industrial

So, for instance, you can include the SND library with the sine kit like this:

<script src="https://cdn.jsdelivr.net/gh/snd-lib/snd-lib@v1.2.4/dist/browser/snd.js?kit=01"></script>

Here, the kit=01 query parameter indicates that we want to use the sine kit. Similarly, you can use kit=02 for the piano kit and kit=03 for the industrial kit.

Next, if you want to play a click sound when a button is clicked, you just need to add the class snd__button to the button element like this:

<button class="snd__button">Click Me</button>

And the button starts playing a click sound on every click, just like that. No additional JavaScript code is needed!

Here’s a CodePen demo that I created to showcase how SND works.

See the Pen SND lib demo for UI sounds by Amit Merchant (@amit_merchant) on CodePen.

The good thing here is that even on repeated clicks, the sound plays without any delay or interruption. All the nitty-gritty of handling audio playback is taken care of by the library itself.

Also, if you want finer-grained control over the sounds, you can use the JavaScript API provided by SND. For example, you can play a sound programmatically like this:

const snd = new Snd();

snd.load(Snd.KITS.SND01).then(() => {
  // you can add listeners to UI events:
  document.getElementById("btn").addEventListener("click", () => {
    // snd.play(Snd.SOUNDS.CELEBRATION);
    snd.playNotification();
  });
});

One more thing I noticed about SND is that it uses something called audio sprites (like image stripes) to optimize the loading and playback of sounds. Instead of loading individual sound files for each UI interaction, SND combines multiple sounds into a single audio file (sprite) and plays specific segments of that file as needed. This approach reduces the number of HTTP requests and improves performance.

Overall, I’m quite impressed with SND and would definitely consider using it in my future web projects that require UI sounds.

Here’s what it looks like.

As you can see, the text features a beautiful water ripple effect. I dug through the source code and found out that it’s done using the SVG filters!

So, I learned a bit about SVG filters, and here’s what I found out.

SVG filters are a powerful way to apply graphical effects to SVG elements. They can also be applied to HTML elements using the filter CSS property. Without SVG filters, achieving complex visual effects like the water ripple effect would require using images or complex JavaScript animations.

To recreate the water ripple effect, first, define the element you want to apply the effect to. In this case, it’s a simple paragraph with the text “Breathe”.

<p class="ripple-text">
    Breathe
</p>

Next, define the SVG filter that you want to apply.

<svg style="position: absolute; width: 0px; height: 0px; pointer-events: none;">
    <filter id="water-ripple">
        <feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="2" result="ripple">
            <animate attributeName="baseFrequency" dur="10s" values="0.02;0.05;0.02" repeatCount="indefinite"></animate>
        </feTurbulence>
        <feDisplacementMap in="SourceGraphic" in2="ripple" scale="5"></feDisplacementMap>
    </filter>
</svg>

As you can tell, we can define a filter using the <filter> element with id water-ripple.

Inside the filter, we use two filter primitives:

• The <feTurbulence> element - It’s used to create a noise texture, which is then animated to simulate the water ripple effect.
• The <feDisplacementMap> element - It’s used to apply the turbulence effect to the text.

There are a bunch of parameters on these filters that you can tweak to achieve different effects.

For instance, in the <feTurbulence> element, we set the type to fractalNoise, which creates a fractal noise pattern. The baseFrequency controls the frequency of the noise, and numOctaves controls the complexity of the noise.

Similarly, for the <feDisplacementMap> element, the in attribute specifies the input image (in this case, the original text), and the in2 attribute specifies the turbulence effect created by <feTurbulence>. The scale attribute controls the amount of displacement applied to the text.

Also, the SVG is hidden from viewing by setting its width and height to 0 and positioning it absolutely.

Fun fact: The fe in the filter primitive names stands for “filter effect”.

Finally, apply the filter to the text by using the id of the filter in the CSS.

.ripple-text {
    filter: url(#water-ripple);
    font-size: 3rem;
    font-weight: bold;
}

And that’s it! You now have a beautiful water ripple effect applied to your text using SVG filters.

I found this cool SVG filter playground where you can experiment with different filter primitives and see the effects in real-time. You can stack multiple filter primitives, change their parameters, and create complex effects.

And if you want to learn more about SVG filters, check out the MDN documentation on SVG filters for a comprehensive guide on how to use them.

In scenarios like these, having a built-in function to clamp values can be incredibly useful. Well, good news! PHP 8.6 will be introducing a new function called clamp() that does exactly that.

• What is the clamp() function?
• Clamp with named parameters
• Real-world use cases
• Conclusion

What is the clamp() function?

PHP 8.6’s clamp() function allows you to restrict a value to be within a specified minimum and maximum range. If the value is less than the minimum, it returns the minimum; if it’s greater than the maximum, it returns the maximum; otherwise, it returns the value itself.

Here’s the signature of the function:

clamp ( mixed $value, mixed $min, mixed $max ) : mixed

As you can tell, clamp takes three arguments, a $value, $min, and $max, then checks if $value is within the bounds of $min and $max (both inclusive).

• If $value is less than $min, it returns $min.
• If $value is greater than $max, it returns $max.
• If $value is between $min and $max, it returns $value.

It throws a ValueError if min > max or if min/max are NAN.

Here’s a simple example of how it works:

$value1 = clamp(15, 10, 20); // Returns 15
$value2 = clamp(5, 10, 20);  // Returns 10
$value3 = clamp(25, 10, 20); // Returns 20

Fun fact: A long time ago, I wrote a custom clamp function in PHP as a utility function for my projects.

Clamp with named parameters

The clamp function becomes even more straight-forward with named parameters and re-ordering of the arguments.

$brightness = clamp(min: 0, value: $brightness, max: 100);

Real-world use cases

Here are some practical scenarios where the clamp() function can come in handy.

User input: keep a percentage between 0 and 100

$percentage = clamp($percentage, 0, 100);

UI sliders: constrain a volume setting between 0 and 10

$volume = clamp($volume, 0, 10);

Pagination: bound page number between the first and last page

$page = clamp((int)$_GET['page'] ?? 1, 1, $totalPages);

Rate limiting: prevent burst count from exceeding a ceiling

$requests = clamp($requests, 0, $maxBurst);

Dates: ensure a booking date falls within an allowed window

$date = new DateTimeImmutable($input);
$start = new DateTimeImmutable('2025-08-15');
$end   = new DateTimeImmutable('2025-09-15');
$clamped = clamp($date, $start, $end); // returns start/end/date accordingly

Geometry: restrict an angle between 0 and 90

$angle = clamp($angle, 0, 90);

Strings (lexicographic): keep a tag between “c” and “g”

$tag = clamp($tag, "c", "g");

Conclusion

The clamp() function in PHP 8.6 is a simple yet powerful addition that can help you manage values effectively by enforcing boundaries. Whether you’re dealing with user input, configuration settings, or any scenario where you need to ensure values stay within a specific range, clamp() provides a clean and efficient solution.

Read more about the clamp() function in this RFC.

Well, it looks like PHP 8.6 is set to make our lives easier with the introduction of Partial Function Application.

• What is Partial Function Application?
• A real-world example
• Common PFA patterns
• In closing

What is Partial Function Application?

Partial Function Application in PHP 8.6 will let you write a “pre‑configured” callable by calling a function with some arguments and using placeholders for the rest. Instead of executing, PHP returns a Closure whose parameter list is auto‑derived from the missing parts.

Placeholders are:

• ? for “exactly one argument here”
• … for “forward any remaining arguments”

Here’s a basic example of how it works.

function add4(int $a, int $b, int $c, int $d): int 
{
    return $a + $b + $c + $d;
}

// Fill some now, leave one for later:
$f = add4(1, ?, 3, 4);
// Equivalent to:
$f = static fn(int $b): int => add4(1, $b, 3, 4);

echo $f(2); // 1+2+3+4 = 10

As you can see in the example above, we created a new callable $f by partially applying the add4 function with some arguments and using a placeholder for the missing argument. We can then call $f with the remaining argument to get the final result.

You can also call PFA an extension of first-class callables.

You can leave multiple holes as well.

$f = add4(1, ?, 3, ?);
// Equivalent:
$f = static fn(int $b, int $d): int => add4(1, $b, 3, $d);

echo $f(5, 7); // 1+5+3+7 = 16

And “Everything else” with …

$f = add4(1, ...);
// Equivalent:
$f = static fn(int $b, int $c, int $d): int => add4(1, $b, $c, $d);

echo $f(2, 3, 4); // 10

With PFA, callbacks become concise and intention-revealing. No more boilerplate arrow functions just to rearrange or fix arguments. Just plug in ? and … where needed, and PHP does the rest.

$strings = ['hello world', 'hello there'];

// Without PFA (verbose):
$result = array_map(static fn(string $s): string => str_replace('hello', 'hi', $s), $strings);

// With PFA:
$result = array_map(str_replace('hello', 'hi', ?), $strings);
// Each element is fed into the ? at the $subject position.

It’s also pipe operator-friendly.

$foo
  |> array_map(strtoupper(...), ?)
  |> array_filter(?, is_numeric(...));
// Right side of the pipe needs a unary callable; PFA supplies it concisely.

Named arguments and order.

function stuff(int $i, string $s, float $f, Point $p, int $m = 0): string { /* ... */ }

// Named values out of order still work:
$c = stuff(?, ?, f: 3.5, p: $point);
// Closure expects (int $i, string $s)

// Named placeholders define their own parameter order:
$c = stuff(s: ?, i: ?, p: ?, f: 3.5);
// Closure expects (string $s, int $i, Point $p)

Variadic functions.

function things(int $i, ?float $f = null, Point ...$points) { /* ... */ }

// Keep variadic open:
$c = things(1, 3.14, ...);
// Closure expects (Point ...$points)

// Force exact count (variadic becomes required slots):
$c = things(?, ?, ?, ?);
// Closure expects (int $i, ?float $f, Point $points0, Point $points1)

You can also implement Thunk functions easily with PFAs.

function expensive(int $a, int $b, Point $c) { /* heavy work */ }

// Prefill all, delay execution:
$thunk = expensive(3, 4, $pt, ...); // Closure with zero required params

// Later:
$result = $thunk();

You cannot partially apply constructors (new). Instead, you can use static methods or factory functions.

$maker = Widget::make(?, size: 10); // OK
$new = new Widget(?, 10);           // Compile error

A real-world example

Here’s a more practical example of using PFA where we want to add headers to an HTTP request. We can prefill the header name and value, leaving the request array to be provided later.

function addHeader(array $req, string $name, string $value): array 
{
  $req['headers'][$name] = $value; 
  
  return $req;
}

// Hole for the request; prefill header name/value
$withAuth = addHeader(?, 'Authorization', 'Bearer TOKEN');

$req = ['url' => '/me', 'headers' => []];
$req = $withAuth($req);

This way, we create a reusable callable $withAuth that adds the Authorization header to any request array we provide later.

Common PFA patterns

Here are quick patterns that can be associated with PFAs.

• Unary callback: array_map(in_array(?, $allowed, strict: true), $input)
• Fill “from the left,” leave rest: stuff(1, 'two', …)
• Named setup, leave rest: stuff(f: 3.14, s: 'two', …)
• First‑class callable (degenerate case): func(…)

In closing

Partial Function Application will be a powerful addition to PHP 8.6 that can significantly reduce boilerplate and improve code clarity when working with callbacks. By allowing you to pre-configure functions with placeholders, PFA makes it easy to create concise, intention-revealing callables without the need for verbose arrow functions.

Read more about Partial Function Application in the official RFC.

For instance, I faced this issue in one of my apps where once the content overflows, the scrollbar appears, causing the text in the textarea to shift leftwards.

To address this issue, you can use the scrollbar-gutter CSS property, which allows you to reserve space for the scrollbar, preventing layout shifts when it appears or disappears.

More specifically, you can set the scrollbar-gutter property to stable on the body element (or any other container element) to ensure that space for the scrollbar is always reserved.

In my case, I added this to the textarea element itself.

textarea {
  scrollbar-gutter: stable;
}

This way, the layout remains consistent regardless of whether the scrollbar is present or not. This can be seen in the following GIF, where the content of the textarea doesn’t shift when the scrollbar appears.

The scrollbar-gutter property is a fairly new addition to CSS and is supported (since December 2024) in most modern browsers. So, you can confidently use it to enhance the user experience on your web pages.

The experimental (and fairly new) corner-shape property changes all that by letting us define the actual shape of an element’s corners directly in CSS. Squircles! I’m looking at you.

With a single declaration, we can turn convex curves into concave scoops, carve precise notches, or dial in superellipse geometry, while borders, shadows, and backgrounds follow the cut. It’s progressive enhancement in the truest sense: a new layer of polish, no hacks required.

• What is the corner-shape property?
• How it differs from border-radius
• Some examples
• What about fallbacks?
• Best practices

What is the corner-shape property?

The corner-shape is an experimental CSS shorthand that defines the actual shape of a box’s corners within the area established by border-radius.

It can use keywords like round, scoop, bevel, notch, square, squircle, or a numeric superellipse() function. Backgrounds, borders, outlines, shadows, overflow, and backdrop-filter will follow the defined corner shape.

.box {
  width: 200px;
  height: 200px;
  border-radius: 32px;
  corner-shape: squircle;
}

One thing to keep in mind is that the property only has an effect when a non‑zero border-radius is present. Without it, the corners will remain square regardless of the corner-shape value.

And like many CSS properties, corner-shape is a shorthand that can accept up to four values to define different shapes for each corner individually.

.box {
    corner-top-left-shape: scoop;
    corner-top-right-shape: notch;
    corner-bottom-right-shape: squircle;
    corner-bottom-left-shape: round;

    /* or using the shorthand */
    corner-shape: scoop notch squircle round;
}

It supports smooth animation between shapes because keywords map to superellipse() equivalents, and browsers constrain opposite corners to avoid overlap.

How it differs from border-radius

The border-radius sets the corner’s size (how far it rounds). While the corner-shape sets the corner’s geometry (what kind of curve or cut it is).

For instance, border-radius: 30px with corner-shape: round behaves like classic rounded corners. Changing to scoop inverts the curve into a concave cut; bevel draws a straight chamfer; notch creates an inset; squircle makes superellipse-style corners—all while the radius still controls extent.

Apart from this, corner-shape: round matches the normal border-radius look; corner-shape: square effectively cancels the rounding even if a radius is set.

Some examples

Here’s a graphic showing different corner-shape values applied to boxes with the same border-radius.

As you can tell, each shape gives a distinct visual style while respecting the same radius size. This opens up new design possibilities without complex SVGs or masks.

Try this CodePen in a latest Chromium-based browser to see it in action.

Also, try this website to play around with different corner-shape values interactively: squircle.style

What about fallbacks?

Since corner-shape is still experimental (currently only available in Chrome 139 and above or similar Chromium forks) and not widely supported yet, it’s important to provide fallbacks for browsers that don’t recognize it and make it a progressive enhancement.

Here are safe, production-ready patterns to use corner-shape with a border-radius fallback. The idea: write classic border-radius first, then layer corner-shape inside @supports so unsupported browsers keep the rounded corners.

Basic keyword shape fallback

.card {
  /* Fallback everyone supports */
  border-radius: 24px;

  /* Only apply corner-shape where supported */
  @supports (corner-shape: round) {
    /* round is the default; use a different shape */
    corner-shape: scoop; /* concave corners */
  }
}

Per-corner values with fallback

.badge {
  border-radius: 16px; /* fallback */
}

@supports (corner-shape: bevel) {
  .badge {
    /* TL, TR, BR, BL shapes (clockwise) */
    corner-shape: bevel notch round squircle;
  }
}

Using superellipse() with fallback

.panel {
  border-radius: 32px; /* fallback */
}

@supports (corner-shape: superellipse(4)) {
  .panel {
    corner-shape: superellipse(4); /* squircle-like */
  }
}

Progressive enhancement inside @supports selector block

/* default styles */
.box {
  border-radius: 20px;           /* fallback */
  background: white;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  border: 1px solid #e6e6e6;
}

/* enhance where supported */
@supports (corner-shape: notch) {
  .box {
    corner-shape: notch;
  }
}

Some engines may support keywords but not the function. Query the specific thing you rely on:

.card { border-radius: 28px; }

@supports (corner-shape: scoop) {
  .card { corner-shape: scoop; }
}

/* If you need the numeric control, guard the function separately */
@supports (corner-shape: superellipse(6)) {
  .card { corner-shape: superellipse(6); }
}

Best practices

Here are some tips for using corner-shape effectively:

• Order matters: Always declare border-radius first, then corner-shape inside @supports. Unsupported browsers ignore the @supports block and keep the radius.

• Dependency: corner-shape only has an effect when border-radius is non-zero. Keep a radius in your fallback.

• Resetting: corner-shape: square effectively removes rounding; do not use it if you want a rounded fallback.

• Animation fallbacks: If you animate corner-shape, also include a non-animated border-radius experience, or animate border-radius as a simpler fallback.

• Granular queries: If you target logical shorthands (e.g., corner-start-start-shape), guard those in @supports too, since support may differ from the main shorthand.

• Server-side rendering/theming: Prefer simple keyword shapes for broader compatibility; reserve superellipse() for environments where you’ve verified support.

To fix these issues, PHP 8.5 introduces a standardized API so URIs/URLs are parsed, normalized, modified, and compared consistently with the relevant specs.

PHP now ships two immutable classes for parsing and working with addresses.

• Uri\Rfc3986\Uri: follows RFC 3986 (generic URIs, strict validation, optional normalization, percent‑decoding where safe)

• Uri\WhatWg\Url: follows WHATWG URL (browser behavior, IDNA/Unicode hosts, parse‑time transformations, soft/hard errors)

Both support parsing, resolving relative references, getting/setting components, comparing, and serializing.

• What’s the difference between the two classes?
• How these classes work?
• A real-world example
• In closing

What’s the difference between the two classes?

The classes differ in the specifications they implement and how they handle parsing, normalization, and error reporting.

• RFC 3986 accepts URIs (may be scheme‑less), is strict on invalid characters, and offers “raw” vs “normalized‑decoded” views.

• WHATWG only handles URLs (needs a scheme), auto‑normalizes on parse, keeps percent‑encoding in most components, and reports soft errors.

How these classes work?

These classes provide a clean, object-oriented way to work with URIs and URLs. You can create instances by parsing strings, access individual components, modify them immutably, and serialize back to strings.

Here’s how you can use them to parse and safely validate a URL.

use Uri\Rfc3986\Uri;
use Uri\WhatWg\Url;

$rfc = Uri::parse("https://example.com/path?x=1");   // Uri or null
$whatwg = Url::parse("https://example.com/path?x=1"); // Url or null

$bad = Uri::parse("invalid uri");                     // null (strict failure)
$errors = [];
$bad2 = Url::parse(" invalid url", null, $errors);    // null with soft/hard error details

WHATWG surfaces soft errors while still succeeding:

use Uri\WhatWg\Url;

$soft = [];
$url = new Url(" https://example.org", null, $soft);
echo $url->toAsciiString(); // https://example.org
// $soft[0]->type === UrlValidationErrorType::InvalidUrlUnit

Here’s how you can fetch URL components components (RFC raw vs normalized‑decoded).

use Uri\Rfc3986\Uri;

$u = new Uri("https://%61pple:p%61ss@ex%61mple.com:433/foob%61r?%61bc=%61bc#%61bc");

echo $u->getRawHost();     // ex%61mple.com
echo $u->getHost();        // example.com

echo $u->getRawPath();     // /foob%61r
echo $u->getPath();        // /foobar

echo $u->getRawUserInfo(); // %61pple:p%61ss
echo $u->getUserInfo();    // apple:pass

WHATWG returns a single normalized view for most components and keeps encoding:

use Uri\WhatWg\Url;

$w = new Url("HTTPS://%61pple:p%61ss@ex%61mple.com:433/foob%61r?%61bc=%61bc#%61bc");

echo $w->getScheme();      // https
echo $w->getUsername();    // %61pple
echo $w->getPath();        // /foob%61r
echo $w->getQuery();       // %61bc=%61bc

IDNA and Unicode hosts (WHATWG only)

use Uri\WhatWg\Url;

$w = new Url("https://🐘.com");
echo $w->getAsciiHost();   // xn--go8h.com
echo $w->getUnicodeHost(); // 🐘.com

Here’s how you can recompose the URL components back into a string.

RFC raw vs normalized:

use Uri\Rfc3986\Uri;

$u = new Uri("HTTPS://EXAMPLE.com");
echo $u->toRawString(); // HTTPS://EXAMPLE.com
echo $u->toString();    // https://example.com

WHATWG ASCII vs Unicode:

use Uri\WhatWg\Url;

$w = new Url("HTTPS://////你好你好.com");
echo $w->toAsciiString();   // https://xn--6qqa088eba.com/
echo $w->toUnicodeString(); // https://你好你好.com/

You can also check equality between two URIs/URLs.

By default, fragments are excluded.

use Uri\Rfc3986\Uri;
use Uri\WhatWg\Url;

$u1 = new Uri("https://example.COM#foo");
$u2 = new Uri("https://EXAMPLE.COM");
var_dump($u1->equals($u2)); // true

$w1 = new Url("https:////example.COM/");
$w2 = new Url("https://EXAMPLE.COM");
var_dump($w1->equals($w2)); // true

Include fragments when you need strict match:

use Uri\Rfc3986\Uri;

$u = new Uri("https://example.com#foo");
var_dump(
    $u->equals(
        new Uri("https://example.com"), 
        Uri\ComparisonMode::IncludeFragment
    )
); 
// false

You may like → Everything that is coming in PHP 8.5

A real-world example

Here’s a simple redirect-and-validate example using the new URI API.

Redirect HTTP to HTTPS and safely keep the path and query:

use Uri\Rfc3986\Uri;
use Uri\UriComparisonMode;

// Imagine this comes from an incoming request URL you need to validate and normalize
$incoming = "http://Example.COM/products/list?page=1&sort=price%2Bdesc";

// 1) Parse and validate strictly (RFC 3986)
$uri = Uri::parse($incoming);
if ($uri === null) {
    http_response_code(400);
    exit("Bad URL");
}

// 2) Normalize for consistent routing/logging (lowercase host, clean path)
$normalized = $uri->toString(); // https://example.com/... once we change scheme below
error_log("Normalized request: " . $normalized);

// 3) Enforce HTTPS by immutably changing just the scheme
$secure = $uri->withScheme("https");

// 4) Preserve path and query exactly as provided (safe for caches/signing)
$target = $secure->toString(); // normalized RFC 3986 string

// 5) Compare ignoring fragment (default) to avoid duplicate redirects
if (!$secure->equals($uri, UriComparisonMode::ExcludeFragment)) {
    header("Location: " . $target, true, 301);
    exit;
}

// Continue serving the HTTPS request...

In closing

Standards compliance fixes subtle bugs and security issues, like the parsing confusion exploited when FILTER_VALIDATE_URL disagrees with a client that follows RFC 3986.

The clear, immutable API reduce surprises; normalized views help routing/caching, while raw views preserve exact bytes for signing or proxying. WHATWG alignment matches browser behavior, including Unicode domains and automatic percent‑encoding.

You can read more about the new URI/URL API in the official RFC.

Until now, achieving these effects required complex calc() expressions or JavaScript, often leading to brittle solutions. But with the new CSS progress() function, you can express these relationships cleanly and intuitively.

With the new CSS progress() function, you can express “how far” the viewport width has moved between a minimum and maximum size, and map that directly to opacity.

The progress function returns how far a value is between two bounds.

Here’s what the function definition looks like:

progress(<value>, <start>, <end>)

Here, <value> is the current value you want to evaluate, <start> is the minimum bound, and <end> is the maximum bound. The function returns a number between 0 and 1, where 0 means the value is at or below the start, and 1 means it’s at or above the end. Values in between are represented as a decimal between 0 and 1.

Where can you use it?

You can use progress() wherever you need a normalized 0–1 value from mixed units. You can treat progress() as a unit-agnostic “interpolator” for responsive and state-driven effects. Common scenarios include:

• Visual polish tied to viewport size: fade images, adjust blur, tweak letter-spacing, or scale components as 100vw moves between small and large breakpoints, without media queries.

• Adaptive layout thresholds: smoothly ramp padding, gap, border-radius, or container width between min/max sizes so UI densifies on small screens and breathes on large ones.

• Dynamic spacing and alignment: adjust margins, padding, or alignment based on viewport size to create a more fluid and responsive layout.

• Scroll and view-based choreography: combine with scroll-driven animations or animation-timeline to map element opacity, transform, or filter intensity to how far a section has scrolled into view.

• Component states and data-driven styling: map numeric CSS variables (e.g., a rating 0–100, audio volume 0–1, or battery level in px) to opacity, color stops, or thickness, even when inputs use different units.

• Fluid typography and readability: blend font-size, word/letter-spacing, and line-height as the viewport changes for better legibility; tune text-shadow or background-overlay strength to maintain contrast.

• Theme transitions: interpolate between two colors using color-mix or relative color syntax, using progress() as the mixing ratio for smooth dark/light adjustments across sizes.

• Micro-interactions without JS: subtle scale/tilt on cards, emphasis rings via outline-width, or highlight intensity via filter: brightness, all tied to a single progress() range.

• Performance-friendly fallbacks: when calc() can’t mix units, progress() bridges px, rem, vw so you can clamp the result and avoid complex JS or custom properties gymnastics.

Fun fact: The progress() function is similar to the smoothstep() functions in shaders and game engines, which is used to interpolate values smoothly between two points. Languages like GLSL, HLSL, and Unity’s ShaderLab have had this function for years.

A practical example

Here’s a practical snippet that fades the image from fully visible on large screens to slightly transparent on small screens.

.hero img {
  /* As viewport goes from 1200px down to 480px, opacity eases from 1 to 0.4 */
  opacity: clamp(0.4, 1 - progress(100vw, 480px, 1200px) * 0.6, 1);
}

In this example:

• At widths ≤ 480px, progress(100vw, 480px, 1200px) is 0, so opacity is 1 − 0 × 0.6 = 1.
• At widths ≥ 1200px, progress is 1, so opacity is 1 − 1 × 0.6 = 0.4.
• Between those, it smoothly interpolates, even though 100vw is in viewport units and the bounds are in pixels — a key advantage over calc().

Another real-world use: scale a card slightly as the viewport grows, without media queries:

.card {
  transform: scale(calc(1 + progress(100vw, 360px, 1024px) * 0.05));
}

Here, the card scales from 1.00 at 360px to about 1.05 at 1024px, giving a subtle, device-size-aware polish.

I put together the above examples in this CodePen so you can see them in action.

See the Pen The progress() function example by Amit Merchant (@amit_merchant) on CodePen.

Browser support

As of today, the CSS progress() function is available in modern Chromium browsers and Safari 26. Firefox does not currently list support for progress() in its CSS value functions yet.

So, you can fallback to using clamp() or calc() in scenarios where you need to support Firefox, for now (e.g., clamp(calc((value-start)/(end-start)), 0, 1) where units permit).