Projection: Showing Real Native UI Inside Capacitor and Cordova WebViews

·2 views

The author set out to bring native-looking UI into WebView apps built with Capacitor or Cordova, after web recreations of iOS 26's Liquid Glass fell short in refraction and touch response. Web content and native views run in separate rendering layers with different stacking and scrolling behavior, so they cannot easily share one screen. The solution, called Projection, temporarily swaps a native view for a captured image when it cannot be interacted with, such as while a web modal covers it or during scrolling. Native UI returns once it becomes interactive again, and the handoff is timed to avoid blank frames or duplicated translucent layers. Projection offers three display modes: live native UI, a projected image inside a DOM container, and an HTML fallback supplied by the plugin.

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)

The Candle: a browser ghost story powered by Gemma 4 and an open-weight model

A developer built The Candle, a browser-based haunted-room game entered in DEV's Hacktoberfest Open-Source AI Challenge, themed "Ghost in the Machine." Players blow into a microphone or hover the cursor to extinguish a candle, after which a ghost answers in the dark. Each of five ghosts has its own voice, backstory, and secret, and players unlock the house's story by picking reply options and questioning the right ghosts. Gemma 4, accessed through Backboard and OpenRouter, generates the ghosts' lines and reply choices, while ElevenLabs provides voices with a Piper fallback. The project is open source under the MIT license, with the code and a live demo available.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

AV1 Moves Closer to Practical Use in WebRTC Real-Time Streaming

Advances in AV1 video codec support have increased interest in its use for WebRTC-based real-time interactive streaming. Google's 2021 Chrome 90 release added an AV1 encoder aimed at low-bitrate video conferencing on modest CPUs, and Cisco began offering live AV1 encoding for shared video clips in Webex. Newer GPUs from Intel, AMD, and Nvidia, released in late 2022, can now handle live AV1 encoding even in fast-action gameplay. The codec promises substantial bitrate savings over H.264 and H.265 and is royalty-free, backed by the Alliance for Open Media. Its heavy computing demands have historically limited live use to low resolutions, a constraint that is now easing.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

Safe Archive Extraction Requires Validating the Final Resolved Path

Extracting archives can overwrite files outside the intended directory through crafted names, absolute paths, or links, a flaw often called Zip Slip. Checking filenames for '..' is insufficient because symlinks and hardlinks, including ones created by earlier members, can redirect writes. Developers should use the safe extraction filters or APIs their language and archive library provide, extract into a fresh, non-shared directory, and recheck the resolved destination after each link operation. Tests should confirm that malicious members are rejected before touching the filesystem, including cases where the destination already contains a symlink, and that size and file-count limits hold. The extractor's default policy should be reviewed and recorded, since defaults can change across releases.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

Developer Builds Claude Code SEO Skill, Finds Two Bugs in First Tests

A developer built a Claude Code skill that audits a single web page for on-page SEO basics such as title, meta description, canonical tags, robots directives, H1, JSON-LD and image alt text. The skill is a folder containing a SKILL.md file and a Python checker that uses only the standard library and outputs JSON for Claude to turn into a prioritized fix list. Its description names the specific checks and trigger conditions so it loads only when relevant, and it forbids claims about ranking impact. Testing on five real pages and one fake page revealed two bugs that surfaced on pages the developer expected to be safe.

0 comments Read more at DEV Community