SShortSingh.
TopTechnologyAI & MLStartupsProgrammingScienceBusinessFinanceCrypto & Web3World
Back to feed
Programming

Document Picture-in-Picture API lets browsers float full web widgets, not just videos

0
·1 views

The Document Picture-in-Picture API allows developers to open a floating, always-on-top browser window containing a full HTML document — complete with custom CSS and JavaScript — rather than just a video player. Triggered via window.documentPictureInPicture.requestWindow(), the API accepts options for dimensions and initial placement, and limits each page to one floating window at a time. A tutorial by Daniel Schwarz on CSS-Tricks demonstrates the feature using a stock ticker widget that 'teleports' from the main page into the floating window. Developers must manually clone stylesheets into the new document, as it launches empty, and CSS relying on parent or ancestor context may break without adjustments. Browser support is currently partial — Chrome and Firefox 151 support the API, while Safari does not — so feature detection is recommended before shipping.

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)

Log in to join the discussion and vote.

Log in

Related stories

0
ProgrammingDEV Community ·

How One Bad Internship Built a Framework for Vetting Campus Job Offers

A software engineering student in Bangalore accepted a campus placement at a small startup without researching the company, later finding himself the sole IT employee managing over six hours of solo development work nightly alongside college. He left the internship five days before his semester six finals, citing no mentorship, shifting requirements from a non-technical founder, and no new hires. Reflecting on the experience, he identified the 30-minute window between a campus recruitment presentation and the application deadline as the most critical decision point in a placement season. He subsequently built a personal screening framework that involves reading job descriptions critically, checking whether the tech stack is realistic for a fresher, and verifying that role titles accurately reflect actual responsibilities. His key finding is that vague or inflated job descriptions often signal a poor fit, and that rejecting mismatched opportunities before applying is far less costly than discovering problems after acceptance.

0 comments Read more at DEV Community
0
ProgrammingDEV Community ·

Syncline Links Session Replays Directly to Backend Traces via Shared Trace IDs

Debugging a failed OTP delivery took an engineering team two days because their session replay tool and backend tracing tool operated independently, forcing manual timestamp matching across tabs. The core problem was that neither tool could see what the other recorded, leaving the root cause hidden in the gap between them. Syncline is a new observability tool that addresses this by embedding W3C traceparent IDs directly into the session replay stream at the exact frame each network request fires, linking frontend actions to backend spans without relying on clock synchronization. The browser SDK patches fetch and XHR to generate trace IDs, while the backend requires only a single OpenTelemetry environment variable pointing to Syncline's endpoint. The tool also inverts the standard sampling model, forcing sampled=1 whenever a session is being recorded so that critical bug replays are never left without corresponding backend spans.

0 comments Read more at DEV Community
0
ProgrammingDEV Community ·

Developer Releases Loop Engine, an Open-Source Rust CLI for AI-Driven Code Workflows

A developer has released Loop Engine, an open-source command-line tool written in Rust that automates a multi-step AI coding workflow against local repositories. Unlike typical AI coding demos that stop at code generation, Loop Engine runs a full plan-edit-verify-review-reflect cycle, only marking a task complete when file changes exist, tests pass, and a reviewer approves. The tool uses OpenRouter to access AI models, allowing a different model to handle each phase of the workflow. To prevent silent overwrites, the engine employs optimistic concurrency, confirming a file has not changed between the time it was read and when it is written. Loop Engine is publicly available on GitHub and can be installed as a single binary via Cargo, with support for both paid and free OpenRouter models.

0 comments Read more at DEV Community
0
ProgrammingDEV Community ·

PHP-Casbin Lets Developers Fix Object-Level Access Flaws With One Line of Code

A common web security flaw called Broken Object Level Authorization (BOLA) allows users to access other people's data simply by manipulating resource IDs in URLs or API requests. Many development teams address this by scattering ownership checks across controllers, which creates fragile, hard-to-maintain code that is prone to gaps. PHP-Casbin offers an alternative by accepting full PHP objects directly into its enforcement engine, enabling attribute-based access control (ABAC) at the data level rather than just the route level. Developers can define ownership and business rules in a single configuration file, replacing repetitive if-else logic with a single enforce() call per endpoint. This approach centralizes authorization logic, reduces the risk of missed checks on new routes, and keeps business logic separate from permission handling.

0 comments Read more at DEV Community