SShortSingh.
TopTechnologyAI & MLStartupsProgrammingScienceBusinessFinanceCrypto & Web3World
Back to feed
Programming

Developer shares brutal lessons building a video speed tracker for online courses

0
·1 views

A developer building CourseSpeed, a browser extension for custom video playback speeds and learning analytics across platforms like Udemy, Coursera, and LinkedIn Learning, found the analytics far harder than the UI. Standard HTML5 video event listeners worked on some platforms but failed on others because modern learning platforms wrap video elements in custom players, throttle events, and dynamically recreate DOM nodes during navigation. Orphaned event listeners and synthetic events caused wildly inaccurate watch-time data, sometimes logging a 14-hour course as completed in 47 minutes. The developer replaced event listeners with a MutationObserver to detect video element swaps in real time, resolving the orphaned listener issue. A further complication emerged when Chrome's aggressive background-tab throttling of timers caused batched, inaccurate analytics pings whenever users switched tabs during playback.

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 ·

GPT-5.6 Launches with Three Pricing Tiers; Terra at $2.50 Suits Most Production Use

OpenAI has released GPT-5.6 as a three-tier model family — Sol, Terra, and Luna — each with distinct pricing and intended workloads, all sharing a 1.05 million token context window and a February 2026 knowledge cutoff. Sol, the flagship tier, costs $5 per million input tokens and $30 per million output tokens, while Terra is priced at half that rate and Luna targets high-volume, lower-cost tasks. A key pricing caveat applies to all tiers: any request exceeding 272,000 input tokens is billed at double the input rate and 1.5x the output rate for the entire request, which can nearly double cost estimates. OpenAI has flagged that GPT-5.6 is more prone than its predecessor to taking unintended actions in agentic coding scenarios, a consideration for production deployments. The API is publicly available for all three tiers, while ChatGPT access is still being rolled out gradually.

0 comments Read more at DEV Community
0
ProgrammingDEV Community ·

VigilOps CLI Filters Node.js CVE Alerts to Only Reachable Vulnerabilities

VigilOps is a free, open-source Node.js command-line tool designed to reduce alert fatigue caused by excessive CVE notifications. Many development teams receive vulnerability warnings for dependencies that are never actually executed in their codebase, burying genuine security risks in noise. Unlike tools such as Dependabot, VigilOps scans dependencies against the OSV.dev vulnerability database and surfaces only those vulnerabilities present in code that is actually called. The tool is aimed at maintainers and small development teams overwhelmed by irrelevant security alerts. It is publicly available on GitHub and can be run immediately via npx without installation.

0 comments Read more at DEV Community
0
ProgrammingDEV Community ·

MCP Billing Gateway lets developers monetize AI tool servers without writing billing code

A new open-source tool called MCP Billing Gateway allows developers to add monetization to their Model Context Protocol (MCP) servers without modifying any existing code. The gateway works as a reverse proxy, sitting in front of an MCP server and handling Stripe subscriptions, per-call credits, and cryptocurrency payments via the x402 standard. Callers without sufficient credits receive a 402 Payment Required response before the underlying server is even reached, keeping billing logic entirely separate. Developers typically spend two to four weeks building billing infrastructure from scratch, and the gateway aims to eliminate that overhead entirely. The project targets AI tool builders who are currently absorbing compute and API costs without a straightforward way to charge users.

0 comments Read more at DEV Community
0
ProgrammingDEV Community ·

React useObjectUrl Hook Prevents Memory Leaks in File Preview Components

A custom React hook called useObjectUrl, part of the @reactuses/core library, offers a streamlined way to generate and manage object URLs for file previews without memory leaks. The hook accepts a Blob, File, or MediaSource and returns a URL string, internally handling both URL.createObjectURL() and URL.revokeObjectURL() calls automatically. Memory leaks typically occur when developers forget to revoke object URLs after a component unmounts or when a file prop changes, causing browser memory usage to climb over time. The useObjectUrl hook addresses this by enclosing the revocation logic in a single audited useEffect cleanup, ensuring the URL is released on both prop changes and component unmounts. This approach replaces repetitive, error-prone lifecycle code that developers would otherwise need to maintain separately across multiple file-previewing components.

0 comments Read more at DEV Community
Developer shares brutal lessons building a video speed tracker for online courses · ShortSingh