This article details replacing HTMX with HMPL in a web project, highlighting HMPL's increased customization options and modern fetch implementation compared to HTMX's minimalistic approach. It provides code examples for simple and complex scenarios, a size comparison, and concludes that HMPL is a viable alternative for projects prioritizing functionality over minimal size.
This article details the creation of a simple, 50-line agent using Model Context Protocol (MCP) and Hugging Face's tools, demonstrating how easily agents can be built with modern LLMs that support function/tool calling.
1. **MCP Overview**: MCP is a standard API for exposing tools that can be integrated with Large Language Models (LLMs).
2. **Implementation**: The author explains how to implement a MCP client using TypeScript and the Hugging Face Inference Client. This client connects to MCP servers, retrieves tools, and integrates them into LLM inference.
3. **Tools**: Tools are defined with a name, description, and parameters, and are passed to the LLM for function calling.
4. **Agent Design**: An agent is essentially a while loop that alternates between tool calling and feeding tool results back into the LLM until a specific condition is met, such as two consecutive non-tool messages.
5. **Code Example**: The article provides a concise 50-line TypeScript implementation of an agent, demonstrating the simplicity and power of MCP.
6. **Future Directions**: The author suggests experimenting with different models and inference providers, as well as integrating local LLMs using frameworks like llama.cpp or LM Studio.
1. **MCP Overview**: MCP is a standard API for exposing tools that can be integrated with Large Language Models (LLMs).
2. **Implementation**: The author explains how to implement a MCP client using TypeScript and the Hugging Face Inference Client. This client connects to MCP servers, retrieves tools, and integrates them into LLM inference.
3. **Tools**: Tools are defined with a name, description, and parameters, and are passed to the LLM for function calling.
4. **Agent Design**: An agent is essentially a while loop that alternates between tool calling and feeding tool results back into the LLM until a specific condition is met, such as two consecutive non-tool messages.
5. **Code Example**: The article provides a concise 50-line TypeScript implementation of an agent, demonstrating the simplicity and power of MCP.
6. **Future Directions**: The author suggests experimenting with different models and inference providers, as well as integrating local LLMs using frameworks like llama.cpp or LM Studio.
An in-depth look at JavaScript fundamentals including hoisting, temporal dead zone, function declarations vs expressions, shallow vs deep copy, Object.assign, slice vs splice, forEach vs map, global execution context, polyfilling, map deep dive, and type coercion.
The author argues that constantly chasing the latest JavaScript frameworks can be unproductive and distracting from actual development. They suggest focusing on core programming skills and widely adopted frameworks.
Chrome 135 introduces new capabilities for providing declarative behaviour with the new command and commandfor attributes, enhancing and replacing the popovertargetaction and popovertarget attributes.
This article explores emerging JavaScript patterns anticipated to become significant in 2025, including Pattern Matching, Decorators, Module Federation, Proxy-Based Observables, and Immutable Data Patterns. Each pattern is discussed with its current status, importance, and potential impact on future web development.
The article explores principles and best practices of writing clean JavaScript code, emphasizing readability, maintainability, reusability, testability, and scalability. It covers topics such as meaningful variable names, object organization, function design, commenting, testing, and using modern JavaScript features.
The WebExtensions API reference provides detailed documentation on JavaScript APIs for developing web browser extensions. It covers browser API differences, usage examples, and a complete listing of JavaScript APIs available for extensions.
| API Name | Description |
|-----------------------|-------|
| `action` | Modify and listen to clicks on the browser toolbar button defined with the `action` manifest key. |
| `alarms` | Schedule code to run at a future time, similar to `setTimeout()` and `setInterval()`. |
| `bookmarks` | Interact with and manipulate the browser's bookmarking system. |
| `browserAction` | Modify attributes and listen to clicks on the toolbar button defined with the `browser_action` key. |
| `browserSettings` | Modify certain global browser settings using `BrowserSetting` objects. |
| `browsingData` | Clear data accumulated during browsing. |
| `captivePortal` | Determine the captive portal state of the user's connection. |
| `clipboard` | Copy items to the system clipboard (currently supports images). |
| `commands` | Listen for user-executed commands registered using the `commands` manifest.json key. |
| `contentScripts` | Register content scripts to be injected into web pages matching specified URL patterns. |
| `contextualIdentities`| Manage contextual identities: list, create, remove, update. |
| `cookies` | Get, set, and remove cookies, and be notified when they change. |
| `declarativeNetRequest`| Specify conditions and actions to handle network requests declaratively. |
| `devtools` | Interact with the browser's Developer Tools. |
| `dns` | Resolve domain names. |
| `dom` | Access special extension-only DOM features. |
| `downloads` | Interact with the browser's download manager. |
| `events` | Common types used by APIs that dispatch events. |
| `extension` | Utilities related to your extension, such as getting URLs to resources and extension settings. |
| `extensionTypes` | Common types used in other WebExtension APIs. |
| `find` | Find and highlight text in a web page. |
| `history` | Interact with the browser history. |
| `i18n` | Internationalize your extension, providing localized strings. |
| `identity` | Obtain OAuth2 authorization codes or access tokens. |
| `idle` | Determine when the user's system is idle, locked, or active. |
| `management` | Get information about installed add-ons. |
| `menus` | Add items to the browser's menu system. |
| `notifications` | Display notifications using the operating system's notification mechanism. |
| `omnibox` | Implement customized behavior for the browser's address bar. |
| `pageAction` | Modify attributes and listen to clicks on the address bar button defined with the `page_action` key. |
| `permissions` | Request extra permissions at runtime. |
| `pkcs11` | Enumerate PKCS #11 security modules and make them accessible as sources of keys and certificates. |
| `privacy` | Access and modify privacy-related browser settings. |
| `proxy` | Proxy web requests by intercepting and modifying them. |
| `runtime` | Access information about your extension and its environment. |
| `scripting` | Insert JavaScript and CSS into websites using two approaches. |
| `search` | Retrieve installed search engines and execute searches. |
| `sessions` | List and restore tabs and windows that were closed. |
| `sidebarAction` | Get and set properties of an extension's sidebar. |
| `storage` | Store and retrieve data, and listen for changes to stored items. |
| `tabs` | Interact with the browser's tab system. |
| `theme` | Get details of the browser's theme and update it. |
| `topSites` | Retrieve an array of frequently visited pages. |
| `types` | Define the `BrowserSetting` type for representing a browser setting. |
| `userScripts` | Register user scripts to manipulate webpages or provide new features. |
| `webNavigation` | Add event listeners for various stages of a navigation. |
| `webRequest` | Add event listeners for stages of making HTTP requests, including modification and cancellation. |
| `windows` | Interact with browser windows: get information, open, modify, and close them. |
| API Name | Description |
|-----------------------|-------|
| `action` | Modify and listen to clicks on the browser toolbar button defined with the `action` manifest key. |
| `alarms` | Schedule code to run at a future time, similar to `setTimeout()` and `setInterval()`. |
| `bookmarks` | Interact with and manipulate the browser's bookmarking system. |
| `browserAction` | Modify attributes and listen to clicks on the toolbar button defined with the `browser_action` key. |
| `browserSettings` | Modify certain global browser settings using `BrowserSetting` objects. |
| `browsingData` | Clear data accumulated during browsing. |
| `captivePortal` | Determine the captive portal state of the user's connection. |
| `clipboard` | Copy items to the system clipboard (currently supports images). |
| `commands` | Listen for user-executed commands registered using the `commands` manifest.json key. |
| `contentScripts` | Register content scripts to be injected into web pages matching specified URL patterns. |
| `contextualIdentities`| Manage contextual identities: list, create, remove, update. |
| `cookies` | Get, set, and remove cookies, and be notified when they change. |
| `declarativeNetRequest`| Specify conditions and actions to handle network requests declaratively. |
| `devtools` | Interact with the browser's Developer Tools. |
| `dns` | Resolve domain names. |
| `dom` | Access special extension-only DOM features. |
| `downloads` | Interact with the browser's download manager. |
| `events` | Common types used by APIs that dispatch events. |
| `extension` | Utilities related to your extension, such as getting URLs to resources and extension settings. |
| `extensionTypes` | Common types used in other WebExtension APIs. |
| `find` | Find and highlight text in a web page. |
| `history` | Interact with the browser history. |
| `i18n` | Internationalize your extension, providing localized strings. |
| `identity` | Obtain OAuth2 authorization codes or access tokens. |
| `idle` | Determine when the user's system is idle, locked, or active. |
| `management` | Get information about installed add-ons. |
| `menus` | Add items to the browser's menu system. |
| `notifications` | Display notifications using the operating system's notification mechanism. |
| `omnibox` | Implement customized behavior for the browser's address bar. |
| `pageAction` | Modify attributes and listen to clicks on the address bar button defined with the `page_action` key. |
| `permissions` | Request extra permissions at runtime. |
| `pkcs11` | Enumerate PKCS #11 security modules and make them accessible as sources of keys and certificates. |
| `privacy` | Access and modify privacy-related browser settings. |
| `proxy` | Proxy web requests by intercepting and modifying them. |
| `runtime` | Access information about your extension and its environment. |
| `scripting` | Insert JavaScript and CSS into websites using two approaches. |
| `search` | Retrieve installed search engines and execute searches. |
| `sessions` | List and restore tabs and windows that were closed. |
| `sidebarAction` | Get and set properties of an extension's sidebar. |
| `storage` | Store and retrieve data, and listen for changes to stored items. |
| `tabs` | Interact with the browser's tab system. |
| `theme` | Get details of the browser's theme and update it. |
| `topSites` | Retrieve an array of frequently visited pages. |
| `types` | Define the `BrowserSetting` type for representing a browser setting. |
| `userScripts` | Register user scripts to manipulate webpages or provide new features. |
| `webNavigation` | Add event listeners for various stages of a navigation. |
| `webRequest` | Add event listeners for stages of making HTTP requests, including modification and cancellation. |
| `windows` | Interact with browser windows: get information, open, modify, and close them. |
Explore seven powerful JavaScript Web APIs that can enhance your web development projects. These APIs include Screen Capture, Web Share, Intersection Observer, Clipboard, Screen Wake Lock, Screen Orientation, and Fullscreen APIs, each offering unique functionalities to create interactive and engaging websites.
