Complete history of the Pop Song Chord Book development
navigator.wakeLock) across the Scrolling Chord Timeline. While playing or syncing along with a song, mobile devices (including Android Google Play TWA app and mobile web browsers) will keep the screen active and prevent dimming or sleep timeouts.allow="autoplay; screen-wake-lock" on embedded timeline iframes to grant screen wake lock delegation in modal viewports.videos/Add9-ArpeggioLick2.mp4) at the bottom of Lick No. 2 (Octave Rocking Pop Lick & Run) in Beginner Keyboard Lesson 8.sitemap.xml and the sitemap generator script to output clean URLs without .html extensions, eliminating 301 redirect warnings in Google Search Console.<link rel="canonical">, Open Graph, and Twitter tags across root pages (/beginner-lessons, /songlist, /band, /teacher, /student, etc.) to point directly to clean URLs.[E5+G5] ➔ D5 ➔ C5 ➔ [G4+C5]), and a descending scalar rundown to Middle C (F4 ➔ E4 ➔ D4 ➔ C4).o6M76WJCMJQ).y=68) and streamlined labels to RH 1, RH 2, and RH 5 to eliminate text clipping and overlap.videos/Add9-ArpeggioLick.mp4).beginner-lessons.html which previously linked to /index.html (causing infinite redirect errors). Songs now link directly to /songlist.html?artist=...&title=....js/app.js to recognize artist and title query parameters on load and automatically search, match, and open the interactive song modal and scrolling chords.beginner-lessons.html to open songs instantly when embedded inside the dashboard iframe without reloading, and fall back to full standalone songbook navigation with URL parameters.index.html to catch any incoming links with song query parameters and route them immediately to the player.sitemap.xml to index all individual songs and artist pages for search engines.☰) positioned at top-right of the Virtual Keyboard.🏠 Root / 🔄 Smooth) and 3-stage scaling (100%, 150%, 200%) inside the popup menu.songlist.html so individual genres can be toggled ON/OFF (allowing users to disable specific genres like Country) with instant synchronization across the Filters modal.100% / 200%) on the virtual keyboard overlay for the scrolling chords timeline.env(safe-area-inset-top) padding strictly to the mobile .song-detail-modal overlay container. The modal sheet cards sit below the camera cutout without modifying internal header grid dimensions or button positioning.env(safe-area-inset-top) header change from v3.364. The inset value on Galaxy A55 was ~40px, causing the header grid to expand and action buttons to fall out of place. The camera overlap issue remains open and needs a different approach.env(safe-area-inset-top) to the song detail header padding and grid row height so the song title and thumbnail are pushed below the front-camera cutout on edge-to-edge Android phones (e.g. Samsung Galaxy A55). On phones without a camera cutout the inset is 0px, so nothing changes for those users.transform: translateY(-10px) so it provides cleaner clearance from the background chord boxes without altering the position of any content, rotating taglines, or action buttons below it..launch-badge-tag: Les 1, Les 2, etc.) on the Beginner Guitar launcher card index to use the exact same vibrant purple/magenta gradient (linear-gradient(135deg, #7c3aed 0%, #db2777 100%)) as the Keyboard / Piano lessons.white-space: nowrap and flex-shrink: 0 to .lesson-tag across beginner guitar and piano lesson modules, ensuring pills like "LES 1" never wrap into 2 lines regardless of category text length or screen size..hero-tagline spans) so that Googlebot, Bing, and AI search engines index every keyword and phrase across all 5 taglines while preserving smooth visual transitions.linear-gradient(135deg, #7c3aed 0%, #db2777 100%)) as the Piano Beginner Lessons for consistent curriculum visual identity across all instruments.✏️ Text toggle button alongside 🎡 Circle and 🎹 Linear in the chord editing widget.✏️ Text mode or taps directly into a chord text field.Icon-192x192.jpg and high-resolution assets) to display next to website listings in Google Search results and browser tabs./favicon.ico (16x16, 32x32, 48x48), favicon-48x48.png (Google Search Favicon standard), favicon-96x96.png, Icon-192x192.jpg, images/pwa_icon_192.png, and apple-touch-icon.png (180x180).<link rel="icon"> and <link rel="shortcut icon"> headers.js/app.js and js/ui/AuthModal.js to immediately hide the initial loading overlay whenever authentication fails or the login modal is displayed.js/app.js for setupFilters() and updateSetlistSelect() when loaded on index.html.songlist.html so it covers 100% of the viewport from the first frame before JavaScript runs, preventing any initial page or sidebar flash. Updated all asset and script tag version query parameters to v3.324 to force mobile browsers to immediately fetch the newest code and styles..well-known/assetlinks.json with Google Play App Signing SHA-256 fingerprints to verify domain ownership for deep linking in Google Play Console.Am - F - G - Em. Added a visual tip block referencing the Simplify button to guide users when chord transitions are challenging.playPatternDemo and playInversionDemo. Now both functions ensure that the PianoAudioPlayer is fully initialized on the very first click, resolving intermittent silence issues.users/{uid}/preferences/lessonProgress). Once all 5 lessons are marked complete, a celebratory "🏅 All Lessons Completed!" banner appears at the top of the lessons list, showing all earned badges.dropTarget was undefined.overflow-x: hidden to html/body to keep the mobile viewport steady and prevent horizontal overflow/shifting.verify-email.html to act as a custom password reset action handler, supporting resetPassword mode and providing validation inputs.info@popsongchordbook.com on the account deletion page (account-remove.html).account-remove.html) to prevent text alignment breakages caused by nested block element formatting.account-remove.html containing steps to request account deletion, along with data deletion and retention specifications, to comply with Google Play Console requirements./privacy.html, covering data collection, GDPR rights, children's privacy, and third-party services — required for Google Play Store submission.!important was overriding the inline style for hiding the button. Integrated the class-based .hidden toggle logic to guarantee the button is hidden when the session is inactive.band.html) to align with sidebar navigation.bandMembers node (updated during join/create), preventing empty presence lists and restoring correct online/offline statuses for everyone.#bandCountdownOverlay) was missing from the timeline page, causing the countdown to run silently in the background with no visual feedback.eventId so each action is correctly deduplicated — previously consecutive events with similar timestamps were silently dropped.initTime guard so sync events written before the current page load are always ignored, preventing accidental auto-play when opening the timeline.background-color in HTML and calling the button colour update synchronously in the constructor, before async Firebase init completes.(Intro 1), (Chorus 1), etc.) from being prepended inside the imported chord block content. Only the actual chords are imported, keeping the blocks clean.(2x)) and implemented line-level progression deduplication to omit trailing non-adjacent chord blocks.ultraCompress() to choose the shortest possible pattern block when multiple repeating options cover the same total chord count (e.g. compressing repetitive sequences to their smallest blocks with higher multipliers, like A Em Em D 4x instead of A Em Em D A Em Em D 2x).FacebookGroups.html with a "New Members" view. Authorized admins can now view a complete history of registered users, sort them dynamically by headers, and delete members directly.artist: prefix filter navigation. When selecting an artist from the Artists overview, the search term is now prefixed to enable top-left Back button routing. Clicking the Back button now successfully takes the user back to the Artists Overview list of all artists, and clicking it again returns to the default All Songs view.D* -> D) so chords representing single strums are not ignored. Stripped sequence deduplication in compression, allowing repeating patterns to output multiplier suffixes (e.g. G C 2x and Em C G D 2x) instead of discarding them. Implemented automatic capo-aware transposition up to concert pitch so imported capo shapes display in correct concert pitch for Piano users.js-store) before breaking, allowing it to correctly fall back to subsequent proxies if Cloudflare intercepts a request. Added custom error messages detecting Cloudflare challenge pages and instructing the user to click the search link and copy-paste the URL manually. Added api.cors.lol as a third proxy fallback.Cadd9, display identical key sizes and alignment as narrower chords like D and G, resolving layout stretching and cramming issues completely.Ammaj9) chord. Mapped the custom open-position fingering for guitar (["x", 0, 6, 5, 0, 0]) and implemented dynamic minor-major 9th (mmaj9) interval parsing for the virtual piano overlay.br tags) to prevent paragraph collapsing when pasted into Gmail, Outlook, or native Mail applications.?v=${Date.now()}) to the visual connection guide image links across both teacher share and student invitation templates, forcing email providers' image proxies (such as Google Image Proxy) to fetch the freshly updated image rather than a stale cached version.jared@vanhensen.nl..force-hidden rules to successfully override the instrument layout styles, resolving the menu toggle functionality..hidden class (display: none !important), successfully overriding the CSS display: flex !important conflict.GuitarChordTrainer.html) instead of the default Keyboard/Piano Chord Trainer (ChordTrainer.html).2 and 3 as in Am2 or C3) are now stripped from the chord names to show standard guitar diagrams (e.g., Am2 -> Am), while keeping the inversion/numbers for Keyboard mode, and preserving sus2 and add chord formats for both instruments.sidebar.css had no explicit line-height on .nav-item, so items inherited line-height: 1.6 from styles.css on songlist pages but the browser-default ~1.2 on ChordTrainer pages. This made each nav item ~7px shorter on the trainer pages, compressing the full nav group by ~56px and creating the visible shift. Fixed by adding line-height: 1.6 explicitly to .nav-item in sidebar.css so item height is consistent across all pages..app-sidebar from overflow-y: auto to overflow-y: hidden as an additional safeguard against any future scrollbar-related layout flicker in the fixed sidebar.?view= URL parameter immediately as the sidebar renders, before async JS runs.songlist2.html to render visual grids of Artists and Genres on click, enabling unified playlist filtering and seamless, responsive side navigation.600px) to be highly compact, reducing spacing and padding throughout the header, artist/title card, audio, and play/test mode buttons to maximize vertical workspace for the fretboard..overview-chord-card and .overview-chord-diagram card dimensions globally, and updated #chordOverviewGrid to use a tighter grid of repeat(auto-fill, minmax(120px, 1fr)) with 12px spacing. This fits many more chords onto the overview screen without layout breaking.recreateChordsBtn test button from GuitarChordTrainer.html, keeping the interface focused solely on the interactive chord diagrams.BACK button directly into the bottom action row to reclaim valuable vertical space and prevent fretboard clipping on mobile screens.💡 hint button, and shortened "CHECK SHAPE" and "SKIP CHORD" labels to CHECK and SKIP, creating a clean, single-row mobile layout.💡) from the mobile header actions when in Recreate (Practice) mode, guaranteeing a pure fretboard challenge from memory.0.85rem, recovering precious vertical and horizontal whitespace on smaller screens.📋, which dynamically switches to a guitar 🎸 when active, and updated all Recreate Chords buttons with matching icons.--hud-top-offset), leaving a clear space for the bar numbers (e.g. Bar 90, Bar 94) to be fully visible at all times.--hud-top-offset CSS variable to adjust the Lyrics HUD position in real-time.🌐 Beginner setlist right below the virtual 🌐 Public Songs setlist for a more natural layout order.BEGINNER to clean camelcase Beginner.🌐 Public Songs setlist could disappear from the dropdown during dynamic Firebase loads.(🔒 Public) text suffix from the BEGINNER setlist in the dropdown, retaining just the premium globe icon (🌐 BEGINNER).BEGINNER setlist available to all users. Regular users have read-only access with clear visual indicators (🌐/🔒), while the admin (jared@vanhensen.nl) has full write/edit access managed securely via Firebase.manifest.json with official App ID, detailed description, and high-resolution screenshots for better Store visibility and installation experience.
TypeError in the Profile Modal. The application now correctly handles cases where the profile modal elements are missing from the page (such as on the landing page), preventing initialization crashes.
TypeError in the Song Detail Modal initialization. Added robust safety checks to ensure the application remains stable even on pages where specific modal elements are missing.
mobile-web-app-capable meta tag, ensuring continued premium performance on mobile browsers.
add9 and maj7 are now fully stripped to their root/minor triads, making practice sessions more beginner-friendly.
!important flag.
default_songs.js file. New users now start with a clean library referencing the public database, resulting in faster initial page loads (saving >3MB bandwidth).
color-scheme: light) to prevent mobile browsers like Samsung Browser from applying unwanted color inversion.
.hidden class-based visibility logic.
onlyPublic filter state.
songRequests storage and retrieval.
this.publicSongsListeners not being initialized in the FirebaseManager constructor. Calling .has() on undefined caused a silent TypeError that crashed the entire enableSync() call, meaning the real-time public songs listener was never registered.
onPublicSongsChange method from FirebaseManager that was causing ambiguity. The obsolete single-argument version conflicted with the correct two-argument implementation.
publicSongs cache after saving to Firebase.
publicSongsListeners cleanup to the signOut() method to prevent stale listeners from running after a user logs out.
this.firebaseManager assignment in the SongDetailModal constructor. The property was accessed in handlePublishSong() but never stored on the class instance, causing the "Publish This Song Online" button to fail with an error even when logged in.
is-mobile-view) to bypass flaky CSS media queries on high-resolution mobile devices. This fixes layout issues where buttons would overlap with the title.
?debug=true to the URL, helping troubleshoot screen scaling and DPR issues.