SShortSingh.
Back to feed

How to build a drift-free fullscreen countdown timer using vanilla JavaScript

0
·1 views

A developer building a fullscreen countdown timer for blankscreen.io found that the standard setInterval approach causes time drift, especially in background tabs. To fix this, they used performance.now() with requestAnimationFrame to measure actual elapsed time instead of counting ticks. The Screen Wake Lock API was integrated to prevent devices from sleeping mid-countdown, with a visibility change listener to re-request the lock if the tab is backgrounded. Rather than loading an external audio file, a synthesized two-tone alarm was generated on demand using the Web Audio API, avoiding autoplay policy issues. The article shares reusable code snippets for each of these three techniques as progressive enhancements for any browser-based timer project.

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 to Test MySQL 8.4 Compatibility on AWS RDS Before a Blue/Green Cutover

AWS RDS Blue/Green Deployments offer a near-zero-downtime path for upgrading MySQL 8.0 instances to MySQL 8.4, the current Long Term Support release. However, the Green environment is read-only by design, which limits per-application compatibility testing before the final switchover. This becomes a significant obstacle when a single RDS instance hosts multiple projects with different upgrade readiness timelines. A workaround involves layering a snapshot-based test instance on top of the Blue/Green setup, allowing teams to validate each application individually against MySQL 8.4. Once all projects are confirmed compatible, a single coordinated switchover can be executed with minimal downtime.

0
ProgrammingDEV Community ·

Doom Runs Inside a Transformer Model Without Any Training

Researchers have managed to run the classic Doom game renderer inside a transformer neural network, using the Phi-3 architecture as the base model. Rather than training the network, a compiler was used to directly set the model's weights. This means the transformer executes Doom's renderer through autoregressive generation, with no machine learning training involved whatsoever. The project, published on ood.dev, demonstrates an unconventional use of transformer architecture as a programmable computational substrate.

0
ProgrammingDEV Community ·

Pontmore PR #12 Adds Direct Escrow Invocation Standard to PIP-01 Protocol

Developer merged PR #12 into the Pontmore protocol repository on August 11, 2026, extending the PIP-01 Escrow Descriptor to support standalone escrow service invocation without requiring a swap state machine. The update was driven by Issue #11, which called for a defined way for applications to create, fund, release, and cancel escrows directly between parties. The revised descriptor includes an optional service block specifying transport, authentication via Nostr public keys, canonical operations, funding models, and release decision formats. The patch also addressed structural vulnerabilities uncovered during implementation, including cross-instance replay attacks, funding-phase timeout enforcement, and mutual-consent deadlock scenarios. The changes establish a self-contained wire contract anchored by a normative OpenAPI schema, making the protocol more interoperable for financial applications built on Bitcoin and Lightning.

0
ProgrammingDEV Community ·

Hidden hreflang-switcher mismatch left 1,474 dead links undetected across 737 pages

A web developer discovered 1,474 broken internal links spread across 737 pages of their own site, all caused by a mismatch between hreflang tags and the site's language switcher navigation. The hreflang tags correctly marked certain pages as English-only, but the language switcher unconditionally displayed Chinese language buttons on every page, pointing users to URLs that returned 404 errors. The bug evaded all standard automated checks because the pages themselves returned HTTP 200 responses and the hreflang configuration was technically valid. The root cause was two independent systems answering the same question — whether a page exists in Chinese — with conflicting answers. The fix involved making the language switcher consult the same English-only page list already used by the hreflang generator, eliminating all dead links in a single change.

How to build a drift-free fullscreen countdown timer using vanilla JavaScript · ShortSingh