Dev Fixes Ghost Audio and Race Condition Bugs in Next.js Retro Music Web App

·1 views

A developer working on English Music Nostalgia, a Next.js side project recreating retro music experiences, identified two recurring bugs during testing. The first issue caused ghost audio, where rapidly skipping songs or switching player modes left the previous track still playing alongside the new one. The second bug triggered a TypeError crash when users clicked Play or Next before the YouTube IFrame API had fully loaded on page initialization. To resolve both issues, the developer refactored the playback logic to include an explicit video stop call before loading a new track and added a pending song queue to handle actions made before the player was ready. A mounted-state check was also introduced to prevent callbacks from firing on unmounted components, stabilizing the overall playback lifecycle.

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)

Dev fixes 45% idle CPU drain in retro music app by reining in animation loops

A developer building a retro-themed music web app discovered that the browser tab was consuming 45% CPU and leaking roughly 15MB of memory per minute even when idle. Chrome DevTools profiling revealed that multiple canvas animation loops — powering dust particles, CRT scanlines, and an audio visualizer — were running at 60 frames per second regardless of whether music was paused or the tab was in the background. Compounding the problem, resizing the window or toggling modes stacked new requestAnimationFrame calls without cancelling the previous ones, while per-frame string allocations triggered constant garbage collection. The developer refactored the loops to pause whenever the tab is hidden or playback is stopped, using the browser's visibilitychange event and proper cleanup in React's useEffect. After the fix, idle CPU fell from 45% to under 1%, background-tab CPU dropped to zero, and memory usage stabilised.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

Next.js Hosting Costs Compared: Vercel, Netlify, Railway, and VPS in 2026

A detailed cost analysis published in August 2026 benchmarks five hosting platforms for a mid-traffic Next.js 15 site handling roughly 80,000 page views, 300,000 image transforms, and 4 GB of egress per month. Vercel Pro remains the fastest route to production but carries hidden costs, with image optimisation alone potentially reaching $1,500 monthly if caching is not configured carefully. Netlify's Core tier is more affordable at $19 per seat, though its 125,000 free function invocations can be tight for sites using ISR with frequent revalidation webhooks. Containerised options like Railway, Render, and Fly.io offer lower and more predictable bills ranging from $20 to $60 per month, though they require developers to manage their own image optimisation pipelines. A self-managed VPS on providers like Hetzner or DigitalOcean delivers the lowest cost at $25–$40 monthly but demands additional operational overhead from the development team.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

Developer Automates 12 iOS App Submissions Using App Store Connect API, No Login Needed

A developer managing 12 iOS apps has built a fully automated submission pipeline that removes the need for any human to log into App Store Connect. The system uses an App Store Connect API key — a .p8 file — which authenticates via JWT and never expires, eliminating the 2FA bottleneck that blocks bot-driven workflows. Submissions are handled by a Python script that iterates over all app IDs, allowing parallel review requests to run overnight without manual intervention. The developer notes a critical implementation trap: Apple's ES256 JWT requires raw r‖s byte encoding per RFC 7518, while Python's default crypto library returns DER format, silently causing 401 errors. The author credits this kind of environment-building — rather than increased personal effort — as the primary driver behind a reported 12× growth in monthly revenue.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

Slate brings shadcn-style UI components to Laravel Blade without React

Slate (electrik/slate) is an open-source Blade UI kit for Laravel that draws inspiration from shadcn, offering component-based design without requiring React or Vue. It uses Tailwind CSS v4, anonymous Blade components, owned design tokens, and includes first-class dark mode and Livewire-compatible forms. Unlike copy-paste CLI kits or heavy admin frameworks, Slate is installed as a single Composer package and does not dump files into the application. The kit also ships with an MCP server and llms.txt to help AI coding agents work accurately within Laravel-Blade projects. Currently in alpha (v3.0.0-alpha.4), Slate is available on Packagist and GitHub under the MIT license.

0 comments Read more at DEV Community