SShortSingh.
Back to feed

Developer Tutorial: Build a Browser-Based AI Posture Monitor Using MediaPipe and React

0
·16 views

A developer tutorial published on DEV Community walks readers through building a real-time posture monitoring tool using MediaPipe Pose, TensorFlow.js, and React. The system uses a device's webcam via WebRTC to detect body landmarks and calculates the neck angle between the ear and shoulder to identify forward head posture. When the calculated angle falls below a set threshold, the app triggers a local browser notification to alert the user. All processing happens entirely within the browser, meaning no images or data are sent to external servers. The tutorial targets developers with basic React knowledge and aims to address the common problem of poor posture during long hours at a computer.

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 ·

MeshCtx v3.131 Ships Full Hebrew RTL Support Across 11 Languages With CI Testing

MeshCtx, an open-core AGPLv3 memory layer for AI agents, released version 3.131 featuring complete Hebrew right-to-left language support as its headline addition, bringing the app to 11 fully localized languages. The implementation covered 1,458 server-side translation keys, 270 landing-page keys, and 66 chat keys, alongside RTL behavioral fixes for icons, progress bars, and directional UI elements across 10 affected pages. The team addressed installer-level bugs in the Windows NSIS packager and ensured macOS OS-level language pickers matched the app's actual capabilities. A regression test suite of 3,790 passing tests includes 278 i18n-specific checks, with E2E tests asserting real RTL behavior rather than merely confirming font loading. The release also introduced per-language health badges in the UI, making translation gaps visible and assignable to community contributors.

0
ProgrammingDEV Community ·

Developer finds 6% silent failure rate in Anthropic Batch API after 1,842 jobs

A developer running an AI-powered mock interview platform discovered that 112 out of 1,842 jobs submitted via Anthropic's Batch API over 30 days returned no usable result, a 6.1% silent failure rate. The failures included 71 errors, 24 expired requests, and 17 responses that appeared successful but contained truncated JSON due to hitting token limits. The root cause was a coding assumption that a batch status of 'ended' meant all requests had succeeded, when it only means Anthropic finished processing — including jobs it abandoned. Results must be evaluated individually by checking each request's result type, as succeeded, errored, expired, and canceled outcomes all require separate handling. Despite the reliability issues, the developer noted the Batch API halved their monthly AI costs from $209 to $104, making it viable for non-urgent, background workloads.

0
ProgrammingDEV Community ·

Back-of-the-Envelope Math: How Engineers Estimate Server Needs Before Building

Back-of-the-envelope estimation is a technique used in system design to convert vague requirements into concrete figures — such as queries per second, storage volume, and bandwidth — before any architecture decisions are made. The approach prioritizes order-of-magnitude accuracy over precision, since knowing whether a system must handle 100 or 100,000 requests per second fundamentally changes its design. Key reference benchmarks help speed up the process: a typical application server handles hundreds to low thousands of requests per second, while a relational database on solid hardware can manage thousands of simple queries per second. Engineers are advised to calculate traffic in daily totals first, then convert to per-second figures, while accounting for peak-to-average traffic ratios of roughly 2–5x to avoid under-provisioning during high-load periods. Storage estimates often reveal surprising scale early on, with even small per-item data sizes accumulating to hundreds of gigabytes annually at millions of daily events — frequently triggering infrastructure decisions before raw request volume does.

0
ProgrammingDEV Community ·

Study Ranks 13 Website Builders on MCP Tool Design Quality for AI Agents

A research article published on September 19, 2026, by author Nokka evaluated how well 13 website-building and CMS platforms design their Model Context Protocol (MCP) tools for AI agents. MCP is an open standard that allows AI agents to communicate with external software using a shared language, meaning tool design quality directly affects how accurately an AI selects and executes actions. The study scored 11 platforms against eight criteria drawn from Anthropic engineering guidelines and official MCP safety documentation, covering areas such as tool naming, permission scope, data readability, and separation of read and write operations. WordPress.com ranked as the strongest example, consolidating over 60 operations into a single structured tool with mandatory confirmation parameters for any write or delete action. Framer was excluded for having no MCP support, while Squarespace was only partially assessed due to its limited preview-stage implementation.