Chrome 150 adds focusgroup attribute to handle arrow-key navigation natively

·1 views

Chrome 150 has introduced a new HTML attribute called focusgroup that enables browsers to manage keyboard navigation within composite UI widgets such as listboxes, menus, tablists, and toolbars. Previously, developers had to manually write JavaScript to handle arrow-key roving focus, Home/End key jumps, and Tab exits for every such widget, often introducing bugs in the process. The attribute works by placing a single tab stop on the container element, with the browser automatically moving focus among child options via arrow keys. However, the movement axis defaults to the widget role's assumed visual orientation, meaning developers using non-standard layouts — such as horizontal listboxes — must override this manually. Notably, focusgroup is still only documented in an Open-UI explainer and has not yet been formally incorporated into the WHATWG HTML specification, so its design may still change.

Read the full story at DEV Community

This is an AI-generated summary. ShortSingh links to the original source for the complete article.

Discussion (0)

Developer Builds ChatGPT-Powered Telegram Bot That Auto-Mutes Toxic Users

Developer Thr0n38 has published a guide detailing how to build an asynchronous Python Telegram bot that uses the OpenAI API to moderate group chats in real time. Unlike traditional keyword-based bots, the system passes each message to ChatGPT with a strict prompt that instructs the model to respond with only 'BAN' or 'OK', minimizing token usage and latency. When a message is flagged as toxic, the bot deletes it — typically within 400 milliseconds — and temporarily restricts the offending user's ability to send messages, defaulting to a 15-minute cooldown. The architecture relies on a Telegram bot token and an OpenAI API key, and the bot must be granted admin rights within the target group to enforce deletions and restrictions. The guide positions this approach as a cost-effective, context-aware alternative to rule-based moderation for large communities such as gaming servers or group chats.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

Serving Markdown Alongside HTML Cuts AI Agent Token Costs by 83%

A developer blog, turva.dev, has documented how serving pages in both HTML and Markdown formats from the same URL dramatically reduces the token cost for AI agents reading web content. As of July 4, the site's homepage measured 10,320 tokens in HTML but only 1,723 in Markdown — an 83% reduction — despite no deliberate optimization work being done between measurements. The gap widened naturally as the site grew, because HTML accumulates navigation, metadata, and styling while Markdown carries only text and links. Between July 1 and July 4 alone, the HTML version grew by roughly 8% while the Markdown version slightly shrank. The token counts are independently verified by the startuphub.ai scanner, which measures both forms of any page it is directed at.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

How React Apps Use Axios Interceptors to Auto-Refresh JWT Tokens Securely

Enterprise React applications rely on a dual-token system — short-lived access tokens and longer-lived refresh tokens — to balance security with a seamless user experience. Access tokens are sent with every API request, while refresh tokens, stored in HttpOnly cookies, are used solely to obtain new access tokens once the current ones expire. Storing refresh tokens in HttpOnly cookies protects them from JavaScript-based XSS attacks, unlike localStorage which remains vulnerable. Axios interceptors centralize token management by automatically attaching access tokens to requests and silently refreshing them on receiving a 401 Unauthorized response, without any intervention from React Query. This architecture keeps authentication logic isolated within the Axios layer, allowing React Query hooks to remain focused purely on data fetching and improving overall code maintainability.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

Why Basic HTTP Error Handling Falls Short for LLM APIs in Production

Standard HTTP error handling proves inadequate for LLM APIs once systems hit real production failures, according to a developer analysis published on DEV Community. A 429 rate-limit response from an LLM provider can signal several distinct problems — including requests-per-minute caps, token limits, daily quotas, or provider-side throttling — each requiring a different operational response. Most SDKs identify that a request failed but leave applications to decide whether to retry, queue, switch models, or degrade gracefully. The author proposes a dedicated 'failure policy' layer that classifies provider-specific errors into internal categories and returns actionable decisions rather than raw status codes. This approach aims to bridge the gap between what code detects automatically and what engineers currently handle manually through post-incident runbooks.

0 comments Read more at DEV Community