# Amit Merchant

A blog on PHP, JavaScript, and more

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## Build an AI Agent with Real-Time Web Search in JavaScript

DevFeed: [Build an AI Agent with Real-Time Web Search in JavaScript](<https://devfeed.tech/articles/build-an-ai-agent-with-real-time-web-search-in-javascript-20469.md>)

Original publisher: [Read original article](<https://www.amitmerchant.com/building-web-searching-ai-agent-javascript/>)

Author: Amit Merchant

Published: 2026-08-14T00:00:00Z

Content type: tutorial

Language: en

Sources: [Amit Merchant](<https://devfeed.tech/sources/amit-merchant.md>)

Topics: [AI Agent](<https://devfeed.tech/topics/ai-agent.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [real-time](<https://devfeed.tech/topics/real-time.md>), [Web](<https://devfeed.tech/topics/web.md>), [Large Language Model](<https://devfeed.tech/topics/llm.md>), [Google Search](<https://devfeed.tech/topics/google-search.md>)

Tags: [ai-agent](<https://devfeed.tech/tags/ai-agent.md>), [google-search](<https://devfeed.tech/tags/google-search.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [large-language-models-llms](<https://devfeed.tech/tags/large-language-models-llms.md>), [programming](<https://devfeed.tech/tags/programming.md>), [real-time](<https://devfeed.tech/tags/real-time.md>), [tutorial](<https://devfeed.tech/tags/tutorial.md>), [web](<https://devfeed.tech/tags/web.md>)

### AI overview

This tutorial explains how to build a small JavaScript AI agent that decides when it needs web search, retrieves Google search results through SearchApi, and uses those results to formulate an answer. It also explains tool calling and the agent loop.

### Source excerpt

Large language models (LLMs) are great at answering questions, but they have an important limitation: they don't inherently have access to what's happening on the web right now.

## WebMCP in Chrome (A 101 Guide)

DevFeed: [WebMCP in Chrome (A 101 Guide)](<https://devfeed.tech/articles/webmcp-in-chrome-a-101-guide-20477.md>)

Original publisher: [Read original article](<https://www.amitmerchant.com/webmcp-in-chrome-101/>)

Author: Amit Merchant

Published: 2026-07-23T00:00:00Z

Content type: tutorial

Language: en

Sources: [Amit Merchant](<https://devfeed.tech/sources/amit-merchant.md>)

Topics: [Model Context Protocol](<https://devfeed.tech/topics/model-context-protocol.md>), [AI Agent](<https://devfeed.tech/topics/ai-agent.md>), [browser](<https://devfeed.tech/topics/browser.md>), [web applications](<https://devfeed.tech/topics/web-applications.md>)

Tags: [agents](<https://devfeed.tech/tags/agents.md>), [ai](<https://devfeed.tech/tags/ai.md>), [browser](<https://devfeed.tech/tags/browser.md>), [guide](<https://devfeed.tech/tags/guide.md>), [mcp](<https://devfeed.tech/tags/mcp.md>), [model-context-protocol](<https://devfeed.tech/tags/model-context-protocol.md>), [web-applications](<https://devfeed.tech/tags/web-applications.md>)

### AI overview

This guide explains WebMCP as a browser-based implementation of the Model Context Protocol. It describes how web applications can expose standardized tools, resources, and prompts to AI agents, enabling structured interaction without relying on DOM automation or screen scraping.

### Source excerpt

MCP (Model Context Protocol). At this point, you might have come across this term if you've worked with any kind of AI agent. But if you still haven't, here's a quick refresher on what it is and why it's important.

## From Feature Branches to Agent Branches ft. Antigravity

DevFeed: [From Feature Branches to Agent Branches ft. Antigravity](<https://devfeed.tech/articles/from-feature-branches-to-agent-branches-ft-antigravity-20470.md>)

Original publisher: [Read original article](<https://www.amitmerchant.com/from-feature-branches-to-agent-branches-featuring-antigravity/>)

Author: Amit Merchant

Published: 2026-06-20T00:00:00Z

Content type: opinion

Language: en

Sources: [Amit Merchant](<https://devfeed.tech/sources/amit-merchant.md>)

Topics: [Git](<https://devfeed.tech/topics/git.md>), [Development](<https://devfeed.tech/topics/development.md>), [AI Development](<https://devfeed.tech/topics/ai-development.md>)

Tags: [ai](<https://devfeed.tech/tags/ai.md>), [antigravity](<https://devfeed.tech/tags/antigravity.md>), [coding](<https://devfeed.tech/tags/coding.md>), [git](<https://devfeed.tech/tags/git.md>), [workflow](<https://devfeed.tech/tags/workflow.md>)

### AI overview

The article explains how Antigravity's interface for Git worktrees changed the author's view of them from a convenience feature into a useful way to organize and isolate multiple development tasks. It describes using separate worktrees, or "agent branches," for individual features and tasks.

### Source excerpt

When people talk about AI coding tools, the conversation usually revolves around models, prompts, context windows, and agent capabilities. That's usually what grabs the headlines.

## Using a CSS Property to Keep Changing Numbers Aligned in Proportional Fonts

DevFeed: [Using a CSS Property to Keep Changing Numbers Aligned in Proportional Fonts](<https://devfeed.tech/articles/one-css-property-that-makes-numbers-look-instantly-better-20471.md>)

Original publisher: [Read original article](<https://www.amitmerchant.com/one-css-property-that-makes-numbers-look-instantly-better/>)

Author: Amit Merchant

Published: 2026-03-05T00:00:00Z

Content type: tutorial

Language: en

Sources: [Amit Merchant](<https://devfeed.tech/sources/amit-merchant.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [User Experience](<https://devfeed.tech/topics/user-experience.md>)

Tags: [compatibility](<https://devfeed.tech/tags/compatibility.md>), [css](<https://devfeed.tech/tags/css.md>), [development](<https://devfeed.tech/tags/development.md>), [fonts](<https://devfeed.tech/tags/fonts.md>), [user-experience](<https://devfeed.tech/tags/user-experience.md>)

### AI overview

This tutorial explains how proportional spacing can make changing numbers appear uneven or shift horizontally. It presents a CSS property that gives digits equal horizontal widths, improving alignment in clocks, counters, tables, dashboards, and similar interfaces.

### Source excerpt

When you're working with fonts, especially for displaying numbers, there's something called proportional spacing that can make a huge difference in how your numbers look when they're animated.

## Real-world examples of using Laravel AI SDK

DevFeed: [Real-world examples of using Laravel AI SDK](<https://devfeed.tech/articles/real-world-examples-of-using-laravel-ai-sdk-20474.md>)

Original publisher: [Read original article](<https://www.amitmerchant.com/real-world-exmples-using-laravel-api-sdk/>)

Author: Amit Merchant

Published: 2026-02-07T00:00:00Z

Content type: tutorial

Language: en

Sources: [Amit Merchant](<https://devfeed.tech/sources/amit-merchant.md>)

Topics: [Laravel](<https://devfeed.tech/topics/laravel.md>), [vercel ai sdk](<https://devfeed.tech/topics/vercel-ai-sdk.md>), [Artificial Intelligence](<https://devfeed.tech/topics/ai.md>), [AI Models](<https://devfeed.tech/topics/ai-models.md>), [API](<https://devfeed.tech/topics/api.md>), [Code review](<https://devfeed.tech/topics/code-review.md>), [Database](<https://devfeed.tech/topics/database.md>), [GitHub](<https://devfeed.tech/topics/github.md>), [GitLab](<https://devfeed.tech/topics/gitlab.md>)

Tags: [ai](<https://devfeed.tech/tags/ai.md>), [ai-models](<https://devfeed.tech/tags/ai-models.md>), [api](<https://devfeed.tech/tags/api.md>), [applications](<https://devfeed.tech/tags/applications.md>), [code-review](<https://devfeed.tech/tags/code-review.md>), [database](<https://devfeed.tech/tags/database.md>), [github](<https://devfeed.tech/tags/github.md>), [gitlab](<https://devfeed.tech/tags/gitlab.md>), [laravel](<https://devfeed.tech/tags/laravel.md>), [natural-language-processing](<https://devfeed.tech/tags/natural-language-processing.md>), [pipeline](<https://devfeed.tech/tags/pipeline.md>), [pull-requests](<https://devfeed.tech/tags/pull-requests.md>), [sdk](<https://devfeed.tech/tags/sdk.md>), [structured-output](<https://devfeed.tech/tags/structured-output.md>)

### AI overview

This tutorial presents practical ways to use the Laravel AI SDK in Laravel applications. It covers analyzing user data with Eloquent models as context, building an AI code review bot that integrates with GitHub or GitLab pull requests, and creating a personalized learning or quiz system for an EdTech app.

### Source excerpt

The Laravel team recently released the Laravel AI SDK that provides a simple and elegant way to integrate AI capabilities into your Laravel applications. The SDK offers a clean and intuitive API that allows developers to easily interact with AI models and services.

## Add UI sounds in your web apps in a heartbeat

DevFeed: [Add UI sounds in your web apps in a heartbeat](<https://devfeed.tech/articles/add-ui-sounds-in-your-web-apps-in-a-heartbeat-20468.md>)

Original publisher: [Read original article](<https://www.amitmerchant.com/add-ui-sounds-in-your-web-apps-in-hearbeat/>)

Author: Amit Merchant

Published: 2026-01-15T00:00:00Z

Content type: tutorial

Language: en

Sources: [Amit Merchant](<https://devfeed.tech/sources/amit-merchant.md>)

Topics: [web applications](<https://devfeed.tech/topics/web-applications.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [ui](<https://devfeed.tech/topics/ui.md>), [Usability](<https://devfeed.tech/topics/usability.md>), [API](<https://devfeed.tech/topics/api.md>), [HTML](<https://devfeed.tech/topics/html.md>)

Tags: [apps](<https://devfeed.tech/tags/apps.md>), [audio](<https://devfeed.tech/tags/audio.md>), [html](<https://devfeed.tech/tags/html.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [javascript-api](<https://devfeed.tech/tags/javascript-api.md>), [ui](<https://devfeed.tech/tags/ui.md>), [usability](<https://devfeed.tech/tags/usability.md>), [user-experience](<https://devfeed.tech/tags/user-experience.md>), [web](<https://devfeed.tech/tags/web.md>), [web-apps](<https://devfeed.tech/tags/web-apps.md>)

### AI overview

This tutorial explains how to add interface sounds to web applications using the open-source SND JavaScript library. It covers predefined HTML classes, three audio kits, a JavaScript API, and audio sprites for handling playback.

### Source excerpt

I was reading the article Sounds on The Web by Raphael Salaja the other day. The article explains the importance of sounds in web applications and how integrating them just enough can dramatically enhance user experience by providing feedback and improving usability.

## How to Create a Water Ripple Text Effect with SVG Filters

DevFeed: [How to Create a Water Ripple Text Effect with SVG Filters](<https://devfeed.tech/articles/svg-filters-are-just-amazing-20475.md>)

Original publisher: [Read original article](<https://www.amitmerchant.com/svg-filters-are-just-amazing/>)

Author: Amit Merchant

Published: 2026-01-12T00:00:00Z

Content type: tutorial

Language: en

Sources: [Amit Merchant](<https://devfeed.tech/sources/amit-merchant.md>)

Topics: [SVG](<https://devfeed.tech/topics/svg.md>), [SVG animations in CSS](<https://devfeed.tech/topics/svg-animations-in-css.md>), [CSS](<https://devfeed.tech/topics/css.md>), [HTML](<https://devfeed.tech/topics/html.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [css](<https://devfeed.tech/tags/css.md>), [effect](<https://devfeed.tech/tags/effect.md>), [filter](<https://devfeed.tech/tags/filter.md>), [guide](<https://devfeed.tech/tags/guide.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [html](<https://devfeed.tech/tags/html.md>), [svg](<https://devfeed.tech/tags/svg.md>)

### AI overview

This tutorial explains how to create a water ripple effect on text using SVG filters and CSS. It covers defining the target element, configuring filter primitives for noise and turbulence, adjusting their parameters, and applying the filter in CSS.

### Source excerpt

So, lately, I have been exploring Haley Park's website and it's pretty cute and well designed. What caught my attention, though, was this water ripple effect on one of the text snippets.

## The new clamp() function in PHP 8.6

DevFeed: [The new clamp() function in PHP 8.6](<https://devfeed.tech/articles/the-new-clamp-function-in-php-8-6-20476.md>)

Original publisher: [Read original article](<https://www.amitmerchant.com/the-clamp-function-in-php-86/>)

Author: Amit Merchant

Published: 2025-12-12T00:00:00Z

Content type: tutorial

Language: en

Sources: [Amit Merchant](<https://devfeed.tech/sources/amit-merchant.md>)

Topics: [PHP 8.6](<https://devfeed.tech/topics/php-8-6.md>), [PHP](<https://devfeed.tech/topics/php.md>), [Development](<https://devfeed.tech/topics/development.md>), [configuration](<https://devfeed.tech/topics/configuration.md>)

Tags: [development](<https://devfeed.tech/tags/development.md>), [function](<https://devfeed.tech/tags/function.md>), [php](<https://devfeed.tech/tags/php.md>), [php-8-6](<https://devfeed.tech/tags/php-8-6.md>), [range](<https://devfeed.tech/tags/range.md>), [web-development](<https://devfeed.tech/tags/web-development.md>)

### AI overview

This tutorial introduces the clamp() function planned for PHP 8.6. It explains how the function constrains a value to an inclusive minimum and maximum, including its behavior when the value is outside the range and when the bounds are invalid. It also covers named parameters and practical use cases such as user input, UI sliders, pagination, rate limiting, dates, geometry, and lexicographic strings.

### Source excerpt

You know how sometimes you want to ensure that a value stays within a specific range? Maybe you're working with user input, configuration values, or any scenario where you need to enforce boundaries.

## Partial Function Application is coming in PHP 8.6

DevFeed: [Partial Function Application is coming in PHP 8.6](<https://devfeed.tech/articles/partial-function-application-is-coming-in-php-8-6-20473.md>)

Original publisher: [Read original article](<https://www.amitmerchant.com/partial-function-application-php-86/>)

Author: Amit Merchant

Published: 2025-12-05T00:00:00Z

Content type: tutorial

Language: en

Sources: [Amit Merchant](<https://devfeed.tech/sources/amit-merchant.md>)

Topics: [PHP](<https://devfeed.tech/topics/php.md>), [PHP 8.6](<https://devfeed.tech/topics/php-8-6.md>), [Code](<https://devfeed.tech/topics/code.md>), [servers](<https://devfeed.tech/topics/servers.md>)

Tags: [argument](<https://devfeed.tech/tags/argument.md>), [authorization](<https://devfeed.tech/tags/authorization.md>), [callback](<https://devfeed.tech/tags/callback.md>), [closure](<https://devfeed.tech/tags/closure.md>), [function](<https://devfeed.tech/tags/function.md>), [http](<https://devfeed.tech/tags/http.md>), [parameter](<https://devfeed.tech/tags/parameter.md>), [php](<https://devfeed.tech/tags/php.md>), [php-8-6](<https://devfeed.tech/tags/php-8-6.md>), [request](<https://devfeed.tech/tags/request.md>), [types](<https://devfeed.tech/tags/types.md>)

### AI overview

This tutorial introduces Partial Function Application in PHP 8.6. It explains how placeholders create pre-configured Closures, covers multiple holes, named and variadic arguments, and shows a practical example for adding an Authorization header to HTTP requests.

### Source excerpt

Ever reach for a simple callback and end up writing a tiny novella--an arrow function stuffed with types, reordered parameters, and boilerplate just to pass one value through?

## One CSS Trick to Eliminate Scrollbar Layout Shifts

DevFeed: [One CSS Trick to Eliminate Scrollbar Layout Shifts](<https://devfeed.tech/articles/one-css-trick-to-eliminate-scrollbar-layout-shifts-20472.md>)

Original publisher: [Read original article](<https://www.amitmerchant.com/one-css-trick-to-eliminate-scrollbar-layout-shifts/>)

Author: Amit Merchant

Published: 2025-11-28T00:00:00Z

Content type: tutorial

Language: en

Sources: [Amit Merchant](<https://devfeed.tech/sources/amit-merchant.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [css](<https://devfeed.tech/tags/css.md>), [layout](<https://devfeed.tech/tags/layout.md>), [visibility](<https://devfeed.tech/tags/visibility.md>), [web-development](<https://devfeed.tech/tags/web-development.md>)

### AI overview

The article explains how scrollbar appearance can change available content width and cause layout shifts. It recommends using the CSS scrollbar-gutter property to reserve scrollbar space and keep layouts consistent when content overflows or visibility changes.

### Source excerpt

When a webpage's content exceeds the viewport height, browsers typically introduce a vertical scrollbar. This can lead to layout shifts, especially when navigating between pages or toggling content visibility, as the presence or absence of the scrollbar alters the available width for content.