Chris Burnell writes about the increasing ability of HTML to perform dynamic functions that were previously dependent on JavaScript. He highlights several modern features, such as popovers, dialog elements, and grouped details accordions, which allow for complex user interface behaviors directly through native browser attributes.
- The `popover` attribute manages light dismissals (Esc key) and top-layer positioning without extra scripting or z-index management.
- A shared `name` attribute on `<details>` elements creates a native accordion effect where opening one item closes others in the same group.
- New "invoker commands" like `command="show-popover"` allow buttons to control popovers and dialogs without JavaScript.
- The `hidden="until-found"` attribute allows content to be hidden but automatically revealed when a user searches for it using browser default search functions.
- While HTML offers many native components like `<datalist>` or `<meter>`, the author cautions that accessibility support and styling consistency vary significantly across browsers.
- The `popover` attribute manages light dismissals (Esc key) and top-layer positioning without extra scripting or z-index management.
- A shared `name` attribute on `<details>` elements creates a native accordion effect where opening one item closes others in the same group.
- New "invoker commands" like `command="show-popover"` allow buttons to control popovers and dialogs without JavaScript.
- The `hidden="until-found"` attribute allows content to be hidden but automatically revealed when a user searches for it using browser default search functions.
- While HTML offers many native components like `<datalist>` or `<meter>`, the author cautions that accessibility support and styling consistency vary significantly across browsers.
Google's web.dev guidance now advises developers to treat AI agents as a distinct audience alongside human visitors. As more users delegate goal-oriented tasks to AI, websites with complex hover states or shifting layouts may become functionally broken for these automated entities. The guide highlights that optimization for agents aligns closely with existing accessibility and semantic HTML best practices, making sites better for both humans and machines.
* Treating agents as a distinct visitor type
* How agents interpret websites via screenshots, raw HTML, and the accessibility tree
* Recommendations for using semantic HTML elements and maintaining stable layouts
* Introduction to WebMCP, a proposed web standard for agent-website interaction
* Treating agents as a distinct visitor type
* How agents interpret websites via screenshots, raw HTML, and the accessibility tree
* Recommendations for using semantic HTML elements and maintaining stable layouts
* Introduction to WebMCP, a proposed web standard for agent-website interaction
WebMCP is a new technology that allows AI agents to interact with web pages more directly. It works by turning web pages into MCP (Model Context Protocol) servers via a Chrome extension. This enables agents to understand and manipulate web content in a structured way, potentially improving efficiency and user experience.
The technology, backed by Google and Microsoft, is designed to work alongside human users, allowing them to ask agents questions about the page they are viewing. WebMCP uses a Declarative API for standard actions and an Imperative API for more complex tasks. Early experiments demonstrate the ability to query web pages and receive structured data back.
The technology, backed by Google and Microsoft, is designed to work alongside human users, allowing them to ask agents questions about the page they are viewing. WebMCP uses a Declarative API for standard actions and an Imperative API for more complex tasks. Early experiments demonstrate the ability to query web pages and receive structured data back.
Build Awesome's Kickstarter was cancelled/rescheduled after launch email issues, despite initial funding success. The author isn't against the project itself (replacing 11ty), but criticizes its monetization strategy, citing past failures. The article also notes the end of Eleventy/Font Awesome rebrand & suggests alternatives (Astro, Pelican, Zola, bashblog), advocating for support of smaller open-source projects & diversified contributions.
The article explains React as a reimagining of HTML for modern web development. It highlights the traditional separation between declarative HTML and powerful, yet complex, JavaScript. React bridges this gap by combining the declarative nature of HTML with the architectural capabilities of JavaScript through the use of components. These components are essentially JavaScript functions that return UI descriptions, enabling code reuse and simplifying maintenance. The article emphasizes the importance of organization (using files strategically) and purity in React components for predictable and debuggable applications.
This article explores replacing JavaScript functionality with native HTML and CSS for improved performance and reduced resource usage, focusing on accordions, autofilter inputs, modals, and offscreen navigation.
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.
Chrome 135 introduces new capabilities for providing declarative behaviour with the new command and commandfor attributes, enhancing and replacing the popovertargetaction and popovertarget attributes.
Explores the concept of functions in CSS, including arguments, defaults, returns, type-checking, and possible future use cases. Currently available in Chrome Canary behind an experimental flag.
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.
