Notes on Technology and Software Development | Kumar Abhishek

Google’s A2A Protocol and the MCP Paradigm: A New Era of Interoperable AI Agents | Notes

2025-04-12T14:53:50Z

Google has recently announced Agent2Agent (A2A), a new open protocol for AI systems. What exactly is A2A, and why is it significant for the AI industry? Furthermore, how does it relate to MCP—does it compete with or complement it?

What Are AI Agents and Agentic AI? §

Before diving deep, let’s quickly demystify the terms for those who may not be familiar.

AI agents are software programs powered by large language models or other AI techniques, designed to act autonomously or semi-autonomously to perform specific tasks. Unlike traditional software scripts that follow rigid instructions, agents are more goal-directed — they interpret intent, make decisions, access tools or APIs, and even communicate with other agents or systems to accomplish their objectives.

Agentic AI refers to this class of AI systems that exhibit characteristics like planning, tool use, memory, and collaboration. It’s the difference between a chatbot that just answers questions and a system that can, say, book a flight by comparing options, checking your calendar, and informing your manager — all by coordinating various subtasks across internal and external services.

This shift from passive assistants to proactive digital collaborators is what makes agentic AI such a transformative leap in enterprise software.

The Need for a Common Language in Agentic AI §

AI agents are becoming practical co-workers in our digital workplaces. But as these agentic AI systems proliferate, a new challenge emerges: how will all these agents talk to each other? In a single company you might have one AI assistant for customer support, another analyzing financial data, and yet another managing IT workflows. If each agent lives in a silo, we miss out on huge productivity gains. Agents need a shared language to collaborate across applications and data silos. In other words, interoperability isn’t just a “nice-to-have” – it’s critical for scaling autonomy and avoiding a tangle of one-off integrations.

To draw an analogy, imagine early computers before networking: powerful on their own, but isolated. It took the Internet’s common protocols (like HTTP and TCP/IP) to unlock collaborative potential among computers. Similarly, AI agents today need their own “internet of agents”. Each agent might be built by different vendors or frameworks, yet to work together they must speak a common protocol. Without open standards, we risk an “agent Babel” where valuable AI workers can’t understand each other. This is why industry leaders are racing to define protocols for agent interoperability; for a future where AI agents seamlessly collaborate regardless of origin.

Understanding the Model-Context-Protocol (MCP) Paradigm §

One pillar of this vision was laid by Anthropic with the Model Context Protocol (MCP). Think of MCP like a “USB-C port” for AI applications – a standardized plug-and-play interface connecting AI models to tools and data. In technical terms, MCP is an open standard that defines how external context (databases, APIs, file systems, etc.) is provided to language models or AI assistants. It creates a secure two-way channel between an AI model and its operating context — be it company data, third-party services, or user-specific information.

In the MCP paradigm, an AI agent isn’t an island; it’s a hub that can attach various tools and knowledge sources as context. For example, using MCP, a chatbot could query a CRM database or execute code via a standardized interface, regardless of who built that database connector. Anthropic’s vision was that by standardizing these interfaces, any large language model (LLM) can access a broad ecosystem of tools in a uniform way. This dramatically simplifies building complex agents: you can “plug in” new capabilities (like a Salesforce connector or a web browser tool) just as easily as plugging a new device into a USB-C port.

Crucially, MCP focuses on how an AI model uses tools and data – essentially the Model ↔ Context connection. What it doesn’t fully address is how multiple autonomous agents coordinate with each other. That’s where Google’s new protocol comes in, picking up the baton for the Protocol part of the Model-Context-Protocol triad.

Google’s Agent-to-Agent (A2A) Protocol: HTTP for AI Agents §

Enter Agent-to-Agent (A2A), Google’s newly released open protocol that fills the gap by standardizing how AI agents communicate with one another. A2A is exactly what it sounds like — a common language for agents to send messages, share information, and even delegate tasks amongst themselves. Just as HTTP enabled any web browser to talk to any web server, A2A promises that an agent built on Framework X can request help from an agent built on Framework Y, as long as both speak A2A.

(Image Credit: https://google.github.io/A2A)

What A2A Does: According to Google’s announcement, A2A enables agents to discover each other, communicate securely, and coordinate actions across different services and platforms. In practice, an agent makes itself discoverable by publishing a simple profile (a “public card”) over HTTP describing where it lives, what version it is, and what skills or APIs it offers. Think of this like an agent business card. Another agent can find this card and know how to talk to that agent – its location (URL), capabilities, and supported interaction patterns.

Critically, A2A doesn’t reinvent the wheel but builds on familiar web standards. The protocol leverages HTTP for requests, Server-Sent Events (SSE) for real-time updates, and JSON-RPC for structured calls. This means developers can integrate it into existing IT stacks with relative ease – your agents communicate over the same web technologies your apps already use. A2A supports different communication modes depending on the task: for quick back-and-forth it can use request/response or SSE streaming, and for long-running tasks it allows asynchronous workflows where one agent notifies another upon completion. In essence, it’s giving agents flexible “communication etiquette” suitable for everything from a brief question to an hours-long project hand-off.

Complements, Not Competes, with MCP: Google was careful to position A2A as complementary to Anthropic’s MCP, not a competing standard. The two protocols address different layers of the agent ecosystem. Recall our paradigm: Model, Context, Protocol. MCP standardizes how an agent (the model) fetches and leverages external tools/data (context). A2A standardizes how agents engage in dialogues and collaborations with each other (protocol). As Google’s blog put it, “A2A is an open protocol that complements Anthropic’s MCP, which provides helpful tools and context to agents”. You can imagine a future AI platform where MCP-enabled tool integrations and A2A-enabled agent conversations work in tandem to achieve complex tasks.

To make this concrete, Google’s documentation gives a great example of an auto repair shop scenario. In the shop, each mechanic is assisted by an AI agent with specialized tools: one agent can control a car lift or wrench via MCP (structured tool APIs). Now, when a customer arrives describing a rattle noise, multiple agents (the “employees”) need to collaborate: the diagnostics agent asks the inspection agent to take a photo of the wheel, then an ordering agent might contact a supplier agent to get a replacement part. All of this agent-to-agent dialogue – receiving the customer’s problem, asking follow-up questions (“How long has it been leaking?”), sharing findings, dividing tasks – is handled by A2A. Meanwhile, whenever an agent needs to use a specific tool (like adjusting the lift or querying inventory), that interaction runs through MCP. In short, MCP is for plugging an agent into its tools, whereas A2A is for plugging agents into each other. Together, they enable a multi-agent workflow greater than the sum of its parts.

Why Interoperability Is Critical (and Inevitable) §

From my perspective as a fintech technology and product architect, the rise of open agent protocols feels reminiscent of the fintech API revolution. In banking, we saw how standard interfaces (think open banking APIs or India’s UPI) unlocked innovation by letting disparate systems work together securely. Before UPI, each bank had its own payment interface – today, any app can transact with any bank through a unified protocol, spurring an explosion of fintech creativity. Agentic AI is at a similar crossroads: without interoperability, we’ll end up with walled gardens of AI agents that can’t leverage each other’s strengths. With interoperability, we enable an “open market” of AI services that can freely mix-and-match to solve problems.

Open standards also future-proof architectures. Enterprise tech history teaches us that proprietary integrations eventually yield to standardized ones – because standards lower the integration cost for everyone. A2A’s design, in fact, was driven by enterprise needs: companies don’t want to be locked into a single vendor’s agent ecosystem. Google launched A2A with support from 50+ tech partners across the industry (from Atlassian and Salesforce to Oracle and Infosys), reflecting a broad consensus that no one company will build all the best agents. Interoperability ensures you can deploy the best-in-class AI agents for each job and have them cooperate seamlessly. As the Google Cloud team put it, A2A gives your agents a “common, open language to collaborate – no matter which framework or vendor they are built on”. This universality is essential for businesses that run diverse applications across cloud environments.

There’s also an open-source ecosystem angle. An open protocol like A2A means that community-built agents and big enterprise agents can speak the same lingo. This breaks down the wall between proprietary enterprise AI and open-source AI projects. A startup or OSS project can focus on a niche agent (say, an expert code-debugger agent) and still plug it into a larger enterprise workflow via A2A. Likewise, an enterprise can benefit from community contributions without heavy custom integration. Open standards tend to create rich ecosystems: we saw this with HTTP (browsers, servers, RESTful APIs) and we’re likely to see it here. In the words of one analysis, protocols don’t just enable communication – they shape who builds what and how fast the ecosystem grows. By defining a clear contract for agent interaction, A2A lowers the barrier to entry for new agents and tools to join the party, whether developed by a tech giant or a lone developer.

A Quick JavaScript Demo: Agents Talking via A2A §

To illustrate how an agent might use A2A in practice, let’s consider a simplified JavaScript example. Suppose we have two agents: OrderAgent (handles orders) and InventoryAgent (manages stock levels). Each agent exposes an HTTP endpoint and a “card” describing its capabilities. Here’s a conceptual snippet demonstrating how one agent could discover another’s card and send a task request:

// Example agent "card" for the InventoryAgent (discovery metadata)
const inventoryAgentCard = {
  name: "InventoryAgent",
  version: "1.0.0",
  endpoint: "https://api.example.com/agents/inventory",  // base URL for agent
  skills: ["checkStock", "reserveItem", "updateStock"]   // capabilities offered
};
console.log("Discovered agent card:", inventoryAgentCard);

// OrderAgent wants to ask InventoryAgent to reserve an item
async function requestAgentTask(agentCard, action, params) {
  const url = `${agentCard.endpoint}/${action}`;  // e.g. https://.../reserveItem
  const res = await fetch(url, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(params)
  });
  return res.json(); // parse the JSON result from InventoryAgent
}

// Usage: OrderAgent reserving a laptop through InventoryAgent
(async () => {
  const result = await requestAgentTask(inventoryAgentCard, "reserveItem", { itemId: "Laptop-123", quantity: 1 });
  console.log("Task result:", result);
})();

In this snippet, the OrderAgent first retrieves the InventoryAgent’s card (which could be via a known registry or URL). The card tells us the InventoryAgent’s endpoint and what actions (skills) it supports. Then requestAgentTask constructs an HTTP POST to the InventoryAgent’s reserveItem action. The response (perhaps a confirmation or error) comes back as JSON.

This is a simplistic view, but it aligns with A2A’s fundamentals: agents expose endpoints for their skills, accept structured requests, and return results in a standard format. In a real A2A scenario, there would likely be authentication, error handling, and possibly asynchronous patterns (e.g. the request might immediately return a task ID and the InventoryAgent later pushes the completion result via callback or webhook). The key point is that with A2A, both agents adhere to a common contract for requests and responses. A developer could swap out either agent with a different implementation (another vendor or an open-source agent) and as long as it speaks A2A, the interaction will still work. This loose coupling is exactly what we want for scalable, modular AI systems.

How Does A2A Compare to Other Agent Frameworks? §

It’s important to distinguish A2A – an interoperability protocol – from the many frameworks that help build AI agents. In recent months we’ve seen a proliferation of agent frameworks and orchestration tools: Microsoft’s AutoGen, the open-source OpenAgents platform, LangChain’s LangGraph, OpenAI’s tools/plug-ins, and more.

These tools often work best within their own ecosystems or within the boundaries of a single application context. A2A, on the other hand, introduces a common communication layer that enables cross-platform, cross-framework agent interaction.

AutoGen provides a powerful multi-agent conversation framework in Python, but the agents typically operate within a predefined local environment. A2A allows those same agents to interface with external agents or services built using completely different tech stacks.
LangGraph brings structured orchestration and control over agent workflows. A2A could enhance it by allowing dynamic runtime collaboration with agents outside the graph.
OpenAgents simplifies deploying specialized agents but lacks built-in multi-agent collaboration support. With A2A, these agents can now communicate and delegate tasks to each other or external services.

In short, these frameworks are great for building agent capabilities and control flows. A2A is what helps those agents participate in a larger ecosystem. It doesn’t replace these tools—it amplifies them by enabling them to speak a shared protocol.

From Fintech Architecture to AI Agents: My Take §

As a technology architect and developer at Eko, where I’ve spent over a decade building low-code, extensible, and framework-driven applications & SaaS platforms for Fintech, we’re now applying similar architectural principles to AI. We have already been actively experimenting with the Model-Context-Protocol (MCP) to bring agentic AI into real-world business workflows.

MCP has helped us decouple tools and services from specific models or agent frameworks. Instead of binding a feature tightly to OpenAI or Anthropic or LangChain, we expose capabilities as reusable context interfaces that any compliant agent can access. This means we can test different LLMs or orchestrators side-by-side without rewriting business logic.

Interoperability protocols like MCP are helping us think beyond single-model capabilities. They’re laying the groundwork for a multi-agent, multi-model infrastructure that’s both future-proof and enterprise-ready.

From this vantage point, the emergence of open agent protocols like A2A and MCP feels very familiar. In fintech, we’ve seen how common protocols unlock ecosystems—UPI and open banking APIs are prime examples. When standards emerge, innovation accelerates. When they don’t, systems remain isolated and integration becomes costly. We’re witnessing a similar tipping point in AI.

Conclusion §

We’re entering a new era where AI agents will become foundational to how software operates and scales. But just like APIs enabled the SaaS explosion, open protocols like A2A and MCP will be essential to unlock agent-driven ecosystems.

These protocols make agents modular, interoperable, and composable—qualities every modern software architecture needs. They also create opportunities for businesses to innovate faster and for developers to build once and integrate everywhere.

If you’re building the future of intelligent systems, now’s the time to embrace standards that ensure your agents don’t just work—they work together.

References §

Read on abhi.am

TanStack Router – A Routing Library for TypeScript Applications | Notes

2022-12-21T07:38:37Z

A fully typesafe router with first-class search-param APIs and built-in caching, built for JS/TS, React, Preact, Solid, Vue and Svelte.

If you’re a fan of TypeScript, you’ll be excited to hear about TanStack Router, a fully type-safe routing library for TypeScript applications.

Potential advantages of using TanStack Router:

Type safety for routes.
Autocomplete suggestions for routes.
First-class search parameter support: useful for storing state in a URL and sharing links.
Improved reliability by ensuring that routes are correctly defined and used.

Problem with routing §

One of the challenges with routing in any language is that routes are often defined in one place (e.g. a config file or a page-based system like React Router) and used in another (e.g. links in pages, redirects). This means that if you change a route in one place, you have to manually update it in all the other places where it’s used. This can lead to bugs and broken routing if you miss a change or misspell a route.

Type-safety to the recue! §

TanStack Router aims to solve this problem by providing type safety for routes. This means that the router is aware of all the different routes in your application, and it can give you autocomplete suggestions and flag errors if you misspell or use incorrect information for a route. This makes writing routes much easier and helps prevent issues with broken routing.

Support for Search Parameters §

TanStack Router also has first-class support for search parameters, which can be used to store state in a URL and share links. This can be particularly useful if you prefer to use search params over state variables for storing application state.

Other Features §

100% Typesafe
Built-in Caching
1st-class Search Param APIs
Nested/Layout Routes
Lightweight (10kb)
Parallel Route Loaders
Route Actions
and more…

Conclusion §

While TanStack Router is still in beta, it shows a lot of promise for improving the routing process in TypeScript applications. If you’re interested in giving it a try, be aware that there are currently some missing features and documentation, and the syntax is subject to change. However, the 100% TypeScript support and type safety make it worth keeping an eye on as it continues to develop.

Credits §

Youtube video: What Is TenStack Router And Why I Love It

Read on abhi.am

Fix WSL2 Connection Issue to Docker Daemon | Notes

2021-07-17T18:38:15Z

Recently while setting up docker for Hyperledger in WSL2, I got the following error:

====> hyperledger/fabric-peer:2.3.2
Cannot connect to the Docker daemon at tcp://localhost:2375. Is the docker daemon running?

After a quick research, it turns out that if you are upgrading from WSL1 to WSL2, Windows leaves behind a few legacy settings from WSL1 that causes this issue.

Here is the fix that worked for me:

Step 1: Check if you have the same issue §

In WSL2 terminal, run the command: docker info | head -15
You should see the following error: ERROR: Cannot connect to the Docker daemon at tcp://localhost:2375. Is the docker daemon running?

Step 2: Check if the fix works for you §

Run the command: unset DOCKER_HOST
Follow the previous step again. The error should be gone now.

Step 3: Make the fix permanent §

Edit the .bashrc script with: vi ~/.bashrc
Search for the line with DOCKER_HOST and comment it out like this:
# export DOCKER_HOST=tcp://localhost:2375
Save the file and reload the terminal settings with: source ~/.bashrc

Read on abhi.am

Set & persist Google DNS server in WSL2 | Notes

2021-07-10T08:15:48Z

Here is how you setup an alternative DNS server (like. Google DNS) on WSL2 and persist it between WSL restart:

Create the WSL config file (if it does not already exist): /etc/wsl.conf
Enter the following lines to preserve the DNS config between restarts:
```
[network]
generateResolvConf = false
```
Shutdown WSL and start again by running the following command in Windows terminal: wsl --shutdown
Edit (or, create) the file /etc/resolv.conf:
1. Comment any other line that starts with “nameserver”.
2. Enter the following lines:
```
nameserver 8.8.4.4
nameserver 8.8.8.8
```
Restart WSL again after running the following command in Windows terminal: wsl --shutdown

Read on abhi.am

Study Notes on Ethereum Virtual Machine (EVM) - The Basics | Notes

2021-05-29T06:24:39Z

Direct Links:
docs.soliditylang.org/en/v0.8.4/introduction-to-smart-contracts.html

Ethereum Accounts §

There are two types of Ethereum accounts:
- External Accounts
  - Users
  - Address = public key
- Contract Accounts
  - Smart Contracts (code)
  - Address generated when the contract is created (it is derived from the creator address and the number of transactions sent from that address, the so-called “nonce”).
EVM treats both types of accounts equally.
Every account has a persistent key-value store mapping 256-bit words to 256-bit words called storage.
Every account has a balance in Ether (in “Wei” to be exact, 1 ether is 10**18 wei) which can be modified by sending transactions that include Ether.

Ethereum Transactions §

Message that is sent from one account to another account (which might be the same or empty).
It can include binary data (payload) and Ether.
If the target account contains code, that code is executed and the payload is provided as input data.
If the target account is not set (the transaction does not have a recipient or the recipient is set to null), the transaction creates a new contract.
- the address of that contract is not the zero address, but an address derived from the sender and its number of transactions sent (the “nonce”).
- The payload of such a contract creation transaction is taken to be EVM bytecode and executed.
- The output data of this execution is permanently stored as the code of the contract.
- This means that in order to create a contract, you do not send the actual code of the contract, but in fact code that returns that code when executed.
- ⚠ While a contract is being created, its code is still empty. Because of that, you should not call back into the contract under construction until its constructor has finished executing.

Gas §

Gas price is set by the creator of the transaction.
- They have to pay gas_price * gas upfront from the sending account.
Any remaining gas after execution is refunded back to the sender account.
If all gas is used up before the transaction is complete, an out-of-gas exception is triggered and all modifications to the state are reverted.

Storage, Memory, and the Stack §

Storage
- Non-Volatile: persistent between function calls & transactions.
- It’s a key-value store that maps 256-bit words to 256-bit words.
- not possible to enumerate storage from within a contract.
- is comparatively costly to read, and even more to initialize and modify storage.
- Because of this cost, you should minimize what you store in persistent storage.
- Store data like derived calculations, caching, and aggregates outside of the contract.
- A contract can neither read nor write to any storage apart from its own.
Memory
- Volatile: fresh instance for each message call.
- it is linear and can be addressed at the byte level.
- reads are limited to a width of 256 bits.
- writes can be either 8 bits or 256 bits wide.
- Memory is expanded by a word (256-bit) when accessing (either reading or writing) a previously untouched memory word (i.e. any offset within a word).
- At the time of expansion, the cost in gas must be paid.
- Memory is more costly the larger it grows (it scales quadratically).
Stack
- all computations are performed on the stack.
- maximum size of 1024 elements and contains words of 256 bits.
- It is possible to copy one of the topmost sixteen elements to the top of the stack or swap the topmost element with one of the sixteen elements below it.
- All other operations take the topmost two (or one, or more, depending on the operation) elements from the stack and push the result onto the stack.
- it is possible to move stack elements to storage or memory to get deeper access to the stack.

Message Calls §

Contracts can call other contracts or send Ether to non-contract accounts by the means of message calls.
Message calls are like transactions, in fact, every transaction consists of a top-level message call which in turn can create further message calls.
Calls are limited to a depth of 1024, which means that for more complex operations, loops should be preferred over recursive calls.
Furthermore, only 63/64th of the gas can be forwarded in a message call, which causes a depth limit of a little less than one thousand in practice.

Delegatecall / Callcode and Libraries §

The delegatecall is a special variant of a message call.
code at the target address is executed in the context of the calling contract and msg.sender and msg.value do not change their values.
This means that a contract can dynamically load code from a different address at runtime.
Storage, current address, and balance still refer to the calling contract, only the code is taken from the called address.
This makes it possible to implement the “library” feature in Solidity.

Logs §

Specially indexed data structure that maps all the way up to the block level.
This feature called logs is used by Solidity to implement events.
Contracts cannot access log data after it has been created.
But they can be efficiently accessed from outside the blockchain.
Since some part of the log data is stored in bloom filters, it is possible to search for this data in an efficient and cryptographically secure way, so even “light clients” can still find these logs.

Create §

Contracts can even create other contracts using a special opcode (i.e. they do not simply call the zero address as a transaction would).
The only difference between these create calls and the normal message calls is that the payload data is executed, and the result stored as code, and the caller/creator receives the address of the new contract on the stack.

Deactivate and Self-destruct §

The only way to remove code from the blockchain is when a contract at that address performs the selfdestruct operation.
Remaining Ether stored at that address is sent to a designated target and then the storage and code is removed from the state.
It is potentially dangerous as if someone sends Ether to removed contracts, the Ether is forever lost.
If you want to deactivate your contracts, you should instead disable them by changing some internal state which causes all functions to revert. This makes it impossible to use the contract, as it returns Ether immediately.

Read on abhi.am

Use RegEx to split a string in Javascript (preserving separators) | Notes

2021-02-01T10:40:00Z

Use the Javascript split() function with a Positive Lookbehind Regular Expression to split a string while preserving the separators in the sub-strings:

split(/(?<=[<separator characters go here>])/)

What is Lookbehind? §

Lookbehind in regular-expression allows to match a pattern only when it follows the given lookbehind pattern (without actually matching it).

Syntax §

Positive lookbehind: (?<=Y)X matches X if there is Y before it.
Negative lookbehind: (?<!Y)X matches X if there is no Y before it.

One limitation is that Javascript only supports fixed length lookbehind patterns. So, you cannot use it to split by a separator pattern with variable length.

Demo §

See the Pen

Read on abhi.am

Easily show a range/gauge with HTML element | Notes

2021-02-01T06:40:00Z

Direct Links:
developer.mozilla.org/en-US/docs/Web/HTML/Element/meter

I really had no idea about the HTML <meter> element that can show a range of values, until I read this tweet by Álvaro Trigo 😃

Example: §

<meter min="0" max="100"
	low="30" high="80" optimum="60"
	value="70">

Result:

Note: The <meter> tag should not be used to show the progress of a task. Use the <progress> tag instead.

Read on abhi.am

Eleventy plugin for generating social images (using SVG) | Notes

2021-01-28T14:43:00Z

Direct Links:
github.com/manustays/eleventy-plugin-generate-social-images

While porting my website to 11ty, I wrote my own plugin to automatically generated social-sharing-images for my articles.

A social-sharing-image shows as a thumbnail for a website/blogpost when shared on social media.

This plugin generates such images automatically using the title of your blogposts/pages. For a live example, share this page on a social media like Twitter or LinkedIn!

Images are generated in PNG format in a standard 1200×628px size that is suitable for sharing with most social networks.

Why another plugin? §

I started with using Stephanie Eckles’s excellent plugin @11tyrocks/eleventy-plugin-social-images.
- She has written an excellent post about her plugin here.
- It uses HTML-based templating for easily configuring the social images.
- It uses a Puppeteer build script to generate images from the HTML template…
- I would recommend this plugin for most folks!
But, I ran into issues running Puppeteer with my WSL2 based dev setup.
I also wanted to keep the build process lighter (Puppeteer uses a headless Chrome to render and generate the screenshot).
Taking inspiration from another amazing plugin – 11ty’s Image Plugin – the idea was to efficiently generate the social images using SVG and then convert it into JPEG/PNG using Sharp!

Who is this plugin for? §

Want to automatically generate social-sharing-images for your Eleventy-based website (of course!)
Don’t want Puppeteer dependency
Want to use SVG to style your social images

Demo §

This is how it looks like configured for one of my blogposts:

How does the plugin work? §

Image is created using an SVG template. Users can configure the design or pass custom SVG snippets to be inserted.
Title text is wrapped by breaking it into multiple lines at a pre-configured max-length-per-line. This was necessary because SVG does not support text-wrapping natively and the Sharp library does not support <foreignObject>.
The title lines are sanitized and inserted into the SVG.
The SVG image is converted into PNG using the Sharp library.
Author image is superimposed onto the generated PNG using Sharp’s composite() function.

Installation & Usage §

See the latest installation and usage guide on this plugin’s Github page.

Note: For a complete implementation example, checkout my website on Github.

Read on abhi.am

Eleventy plugin for efficient CodePen embeds | Notes

2021-01-24T15:49:50Z

Direct Links:
github.com/manustays/eleventy-plugin-codepen-iframe

Yet another 11ty plugin to embed CodePens into you pages. The other plugins that I had seen use CodePen’s preferred Javascript based embeds. It requires loading an external Javascript (though, a small one) into your page. The Codepen embed Javascript finally creates an <iframe> anyway!

I wanted a more efficient solution for my blog by directly embedding the Pen’s iFrame; therefore I wrote this plugin.

Usage §

STEP 1: Install the plugin:

npm install --save-dev @manustays/eleventy-plugin-codepen-iframe

STEP 2: Include it in your `.eleventy.js` config file:

const embedCodePen = require("@manustays/eleventy-plugin-codepen-iframe");

module.exports = (eleventyConfig) => {
	eleventyConfig.addPlugin(embedCodePen, {
		tabs: "js,result"
	});
};

⚠ You’re only allowed one module.exports in your configuration file! If one already exists, copy the content of the above into your existing module.exports function.

STEP 3 – Use it in your templates like this:

{% CodePen "https://codepen.io/abhiweb/pen/wvzNaQM", "result", "220" %}

Config Options §

These options set the default values for embedded Pens. They can be overridden while embedding individual Pens.

Option	Type	Default	Description
tabs	string	“result”	Default comma-separated string of the tabs of the codepen to display
height	number	300	Default height of Pen iFrames
width	string	“100%”	Default width of Pen iFrames
theme	string	“dark”	Default theme for all Pens
user	string	“”	CodePen user-id to use if only Pen-id is provided
class	string	“codepen”	CSS classes to add to the iFrame

Demo §

Check it out live in my other post A Regular Expression to filter invalid names

Read on abhi.am

How to load third-party Javascript on demand | Notes

2021-01-22T05:35:00Z

A small script to dynamically (and, asynchronously) load third-party Javascript files on demand.

It inserts a <script> tag in the head to load the script.
Checks if a <script> tag already exists with the same source to avoid duplicate script tags.
- I use it with a Web Component based library where another component may already have loaded the script.
Callbacks after successful or failed load.
Note: I also use a retry logic (that removes and re-attaches the script tag) to avoid temporary network failures. I have not included it here for simplicity.

/**
 * @param {string} src The URL of the script.
 * @callback onLoadSuccessCallback Callback when script is loaded successfully.
 * @callback onLoadErrorCallback Callback when the script fails to load.
 */
function loadScript(src, onLoadSuccessCallback, onLoadErrorCallback) {
	if (!src) {
		console.error("Error: missing src");
		return;
	}

	// Check if the script is already loaded
	if (document.querySelector('script[src="' + src + '"]')) {
		// Script already loaded...
		console.warn("Script Already Loaded. Skipping: ", src);
		onLoadSuccessCallback();
	} else {
		// Script not already leaded; load script...
		// Create script tag
		const js = document.createElement('script');
		js.src = src;
		js.setAttribute("async", "");

		// Setup success callback
		if (onLoadSuccessCallback) {
			js.onload = onLoadSuccessCallback;
		}

		// Setup error callback
		if (onLoadErrorCallback) {
			js.onerror = onLoadErrorCallback;
		}

		// Add the script tag to <head>
		document.head.appendChild(js);
	}
};

Use it like this:

loadScript('url/or/path/to/script.js', () => {
	console.log("Script loaded");
	// Do something with the script.
}, () => {
	console.error("Script load failed");
	// Handle error.
});

Read on abhi.am

Recover anything in git with 'git reflog' | Notes

2021-01-18T13:26:00Z

Direct Links:
gitready.com/intermediate/2009/02/09/reflog-your-safety-net

To recover from almost anything in git, even if you have done a git reset --hard origin/main and lost all your last commits, use the following command:

git reflog

From the official documents:

Reference logs, or “reflogs”, record when the tips of branches and other references were updated in the local repository. Reflogs are useful in various Git commands, to specify the old value of a reference. For example, HEAD@{2} means “where HEAD used to be two moves ago”… This command manages the information recorded in the reflogs.

It gives the historical info like this:

$ git reflog
c5f76d2 (HEAD -> beta) HEAD@{0}: pull origin main: Fast forward
0e373cb HEAD@{1}: commit: Updated base styles
b7aece4 HEAD@{2}: commit: Updated README
eff2f57 HEAD@{3}: commit: Added shortURL filter
...

The first 7-characters (sha-id) are the beginning of the SHA1 for that commit. You can use this to recover any lost data from that point in history.

For example, to apply our last commit back into the code base (sha-id = 0e373cb), we can merge it back with the command:

git merge 0e373cb

We can do other stuff as well, like checkout, cherry-pick or use git show to see the diff.

Read on abhi.am

A Regular Expression to filter invalid names | Notes

2021-01-17T15:38:00Z

A regular expression that can be used as a basic filter to detect invalid names.

I use it in an Indian context. May not be useful for others.
Use it with an ‘i’ RegEx flag to ignore case.
Filters out spelling mistakes & gibberish entries; but not all invalid entries!
Similarly useful for other English nouns as well, and not just names.
Useful for quick frontend validation in scenarios where users may tap gibberish to quickly skip a mandatory ‘name’ parameter.

^(?!(?:(?:([a-z]) *\1(?: *\1)*)|(?:.*?(?:(?:(?:^|[^d])([a-z])\2\2)|(?:d([a-df-z])\3\3)).*)|(?:.*?([a-z]{3,})\4\4).*|(?:.*(?:^|[^a-z])[^aeiou \.]{4,}(?:$|[^a-z]).*))$)(?:[a-z]+\.? ){0,2}[a-z]+$

Logic §

Allows up to three words (first & last name).
Allows abbreviations (ending in ‘.’) in all but the last word.
Rejects repetition of any subset of characters.
Uses rules of pronounceable English syllables to filter bad entries (based on my limited research):
1. A consonant cannot be consecutively repeated.
2. A vowel cannot be consecutively repeated more than twice.
  1. Exception: e that can be repeated thrice for certain Indian names, for example, those ending with ‘deee’.
… (more to be updated soon)

Note:
I had written this long back by analyzing invalid entries made in a fin-tech app used by agents to make entries on behalf of other customers. I will update the exact logic and describe parts of the regex soon!

Test it here & get a sample code in Javascript:

See the Pen

Read on abhi.am

Fastest Google Fonts | Notes

2021-01-16T17:38:37Z

Direct Links:
csswizardry.com/2020/05/the-fastest-google-fonts
css-tricks.com/how-to-load-fonts-in-a-way-that-fights-fout-and-makes-lighthouse-happy

Preconnect to Google Font server.
Use preload to asynchronously load the font fast on supported browsers.
In the link to the main font stylesheet:
- Set media=print on the stylesheet to stop loading it during page load.
- On page load, set media=all on stylesheet (using Javascript) to load the font.
As a fallback for browsers where Javascript is disabled, include a normal link to the stylesheet within <noscript> tag.

Here is a recommended snippet:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  rel="preload"
  as="style"
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" />
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
  media="print"
  onload="this.media='all'" />
<noscript>
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" />
</noscript>

Read on abhi.am

How we built the Connect web app – Part 1 – Breaking from our past

2016-08-04T14:33:37Z

This is a ~~series of~~ posts about my adventure with an exciting project at Eko: connect.eko.in, the progressive web app enabling Eko‘s merchants to make payments and other financial transactions.

The Past §

About eight years ago, Eko introduced the simplest of all interfaces to bring banking, payments and other financial transactions to the masses: by dialing numbers on a basic mobile phone. But as the smartphones and laptops grew in popularity with our merchants, we introduced other smart applications. One of them was a simple web portal for money remittance called “Connect”:

The website was immediately successful with our partner merchants, thanks mostly to its simple three-pane interface for transferring money to any bank account in India.

In the three years of it’s existence, the old Connect portal had already been used to transact for more than 6 billion dollars.

But soon, money remittance service was not enough. We wanted to introduce more services. The only problem was that our engineers had to individually design and build interfaces for these new services. And we realized…

we had to manually design and code each page/interface separately. The process was too slow!
the three-pane interface was only suitable for the remittance workflow
we needed a different interface for different services

And, as a solution, us lazy folks at Eko came up again with our common mantra:

generalize and automate!

Breaking From The Past §

So, we came up with the following solution:

The Interaction Framework: to generalize all the financial services (transactions) supported by our platform into interactions that take place between two or more entities. For example, a money transfer is an interaction between two bank/wallet accounts. Over this generalization, we defined requests, responses, parameters, complex validations, interaction relationships, interaction flows, dynamic behavior, etc. This became our Interaction Framework!
A Progressive Web App: to build a progressive web app and automate the process of providing new services by leveraging the Interaction-Framework. We decided to use Google Polymer (which was still in beta, back then) and build custom web components purely on the front-end web technologies.
An API Backend: to design a backend service on Node.js that would be totally decoupled from the front-end app.

Read on abhi.am

Notes on Technology and Software Development | Kumar Abhishek

Google’s A2A Protocol and the MCP Paradigm: A New Era of Interoperable AI Agents | Notes

What Are AI Agents and Agentic AI? §

The Need for a Common Language in Agentic AI §

Understanding the Model-Context-Protocol (MCP) Paradigm §

Google’s Agent-to-Agent (A2A) Protocol: HTTP for AI Agents §

Why Interoperability Is Critical (and Inevitable) §

A Quick JavaScript Demo: Agents Talking via A2A §

How Does A2A Compare to Other Agent Frameworks? §

From Fintech Architecture to AI Agents: My Take §

Conclusion §

References §

TanStack Router – A Routing Library for TypeScript Applications | Notes

Problem with routing §

Type-safety to the recue! §

Support for Search Parameters §

Other Features §

Conclusion §

Credits §

Fix WSL2 Connection Issue to Docker Daemon | Notes

Step 1: Check if you have the same issue §

Step 2: Check if the fix works for you §

Step 3: Make the fix permanent §

Set & persist Google DNS server in WSL2 | Notes

Study Notes on Ethereum Virtual Machine (EVM) - The Basics | Notes

Ethereum Accounts §

Ethereum Transactions §

Gas §

Storage, Memory, and the Stack §

Message Calls §

Delegatecall / Callcode and Libraries §

Logs §

Create §

Deactivate and Self-destruct §

Use RegEx to split a string in Javascript (preserving separators) | Notes

What is Lookbehind? §

Syntax §

Demo §

Easily show a range/gauge with HTML element | Notes

Example: §

Result:

Eleventy plugin for generating social images (using SVG) | Notes

Why another plugin? §

Who is this plugin for? §

Demo §

How does the plugin work? §

Installation & Usage §

Eleventy plugin for efficient CodePen embeds | Notes

Usage §

STEP 1: Install the plugin:

STEP 2: Include it in your .eleventy.js config file:

STEP 3 – Use it in your templates like this:

Config Options §

Demo §

How to load third-party Javascript on demand | Notes

Recover anything in git with 'git reflog' | Notes

A Regular Expression to filter invalid names | Notes

Logic §

Fastest Google Fonts | Notes

How we built the Connect web app – Part 1 – Breaking from our past

The Past §

Breaking From The Past §

STEP 2: Include it in your `.eleventy.js` config file: