CSS Custom Highlight API lets you style text ranges without touching the DOM

·1 views

The CSS Custom Highlight API allows developers to visually highlight arbitrary text ranges using JavaScript-registered identifiers, without inserting wrapper elements into the DOM. A walkthrough by Sunkanmi Fafowora on Piccalilli demonstrates the API by pairing it with a text-shadow fallback for browsers that have not yet implemented it. On the JavaScript side, developers create a Highlight instance, define a standard DOM Range, and register both in the CSS.highlights registry. The corresponding CSS targets the named highlight via the ::highlight() pseudo-element, applying color and text-shadow declarations identical to those used in the HTML fallback. An @supports selector() check determines whether the browser supports the API, enabling a clean progressive enhancement without user-agent sniffing.

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)

Apache Kafka: what it is, when to use it, and its key trade-offs

Apache Kafka is an open-source distributed messaging system that stores data streams in a durable, ordered, and fault-tolerant manner. Messaging platforms like Kafka allow multiple systems to exchange information asynchronously through an intermediary, without services calling each other directly. Kafka stands out from traditional brokers such as RabbitMQ and SQS because messages persist after being consumed, making it well suited for high-volume, real-time scenarios like e-commerce order processing and IoT sensor networks. Among its main advantages are high throughput, real-time processing, resilience, and support for multiple simultaneous consumers. However, Kafka can be overkill for low-traffic applications and carries a steep learning curve along with significant configuration and operational complexity.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

Anthropic Engineer Advises Deleting Claude.md Files as Opus 5 Needs Far Fewer Instructions

Boris Cherny, the engineer behind Claude Code, told a Y Combinator audience that users should periodically delete their CLAUDE.md files, custom skills, and hooks to let Opus 5 demonstrate its improved capabilities. Anthropic itself removed over 80% of Claude Code's internal system prompt before shipping the new model, having found that most instructions were compensating for limitations in earlier versions that no longer exist. Cherny explained that Anthropic used a line-by-line ablation process to determine which prompt instructions still carried weight and which had become redundant scaffolding. Opus 5's broader instruction retrieval, built-in self-verification, and long-horizon task handling mean that instruction files tuned for Claude 4.x can behave erratically on the newer model even without any changes by the user. Developers are advised to audit existing instruction files, as much of their content likely addressed past model weaknesses rather than encoding genuinely necessary guidance.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

Developer audited a 5.5 GB AI dataset by downloading less than 1% of it

A developer discovered a 5.5 GB Chinese astrology AI training dataset on a popular repository and grew suspicious when the sample count of 518,400 matched a perfect nested loop formula rather than real observations. Using HTTP range requests, they downloaded only 48 MB — about 0.8% of the total — by fetching the ZIP central directory and targeted file shards. The audit revealed that the dataset's 781 data shards appeared algorithmically generated rather than empirically collected. More strikingly, a proprietary content library explicitly excluded from the open-source GitHub repo was found bundled inside the release archive, buried nearly 6 GB deep where few would look. The case highlights both a practical technique for sampling large archives cheaply and a cautionary note about assuming release contents match what a repository publicly discloses.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

How to Stream Live Browser Feeds from AI Agents to React Dashboards in Real Time

As AI agents grow capable of autonomously navigating web applications and executing transactions, monitoring them through text logs alone is no longer sufficient. Developers now need real-time visual feeds of what an AI agent is doing inside a headless browser, down to sub-100-millisecond latency. A streaming pipeline can be built by connecting a browser automation runner using tools like Playwright or Puppeteer to a React frontend via a WebSocket gateway. The architecture captures raw visual frames using Chrome DevTools Protocol's Page.startScreencast method, which is more efficient than screenshot polling loops. This approach is especially critical for use cases like AI governance dashboards, where human supervisors must instantly detect and halt unauthorized agent actions.

0 comments Read more at DEV Community