Claude/implement search experimentation 01 p gte t63 s rg wpl cdq fwl95 f #72
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Major improvements: - Add Hugo partial for photo-tile to reduce code duplication (~100 lines saved) - Convert all magic numbers to named constants for maintainability - Simplify and optimize touch handlers with extracted functions - Enhance accessibility with arrow key navigation (↑↓←→, Home, End) - Modernize CSS with container queries and CSS variables - Add content-visibility for better rendering performance - Consolidate scroll event listeners into single optimized handler - Implement requestIdleCallback for non-critical tasks (prefetch, URL sync, date badges) - Improve ARIA labels for better screen reader support Performance gains: - Reduced event listener overhead through consolidation - Better scroll performance with rAF-based updates - Idle-time processing for non-critical operations - Progressive enhancement with modern CSS features
PROBLEM:
When jumping to a distant year (e.g., 2015 at tile #2000), the gallery
loaded ALL tiles sequentially from 0 to 2000, taking 5-10 seconds and
blocking the UI.
SOLUTION:
Implement virtual scrolling with smart window management:
- Jump directly to target year with surrounding buffer (72 before, 144 after)
- Bidirectional loading: load tiles when scrolling up OR down
- Dynamic range management instead of simple counter
PERFORMANCE IMPACT:
- Year jump from ~5-10s to <100ms (50-100x faster!)
- Only 216 tiles loaded initially vs 2000+ tiles
- Memory usage reduced for large galleries
- Smoother scrolling in both directions
Technical changes:
- Replace visibleCount with visibleRange {start, end}
- Add loadBefore() for upward scrolling
- Add nearTop() detection alongside nearBottom()
- Add JUMP_BUFFER constants for tunable performance
- Update all range-dependent functions (getCurrent, applyVisibility, etc.)
…UhzEAmjFUSecYmkWhAXD Claude/review list photos html 011 c uhz e amj fu sec ymk wh axd
When jumping to a year via the year rail, images in the target area are now preloaded immediately (3 viewports worth) before scrolling begins. This eliminates the waiting time for images to load as you scroll to a new position. Previously, images would only start loading once they entered the viewport, causing delays when jumping to unloaded sections.
Extends the previous fix to also handle fast manual scrolling (not just year jumps). The system now: - Tracks scroll velocity in real-time (px/s) - At velocity > 800 px/s: triggers aggressive preloading - Loads 2-5 viewports ahead based on scroll speed - Loads in the direction of scrolling (up or down) - Automatically extends the visible range This eliminates waiting for images when rapidly scrolling to any position, whether via scrollbar, mousewheel, or touch gestures.
…Ui1hpiP375AbH5eBhYwq Claude/fix scroll loading wait 011 c ui1hpi p375 ab h5e bh ywq
…tial order Images are now loaded based on their distance to the viewport center, ensuring that visible images load first regardless of scroll position. This eliminates long wait times when scrolling to different sections. Changes: - Add getViewportDistance() to calculate element distance from viewport center - Update hydrateVisibleImages() to sort and load images by proximity - Update eagerLoadOnFastScroll() to prioritize viewport-nearest images
…-011CUi2U4wMwUUQWnYYp2JwK Fix: Prioritize image loading by viewport proximity instead of sequen…
Simplify 404 page layout
- Behebe doppeltes Anführungszeichen im img-Tag - Reduziere Countdown von 8 auf 6 Sekunden (JavaScript) - Passe HTTP refresh Meta-Tag von 8 auf 6 Sekunden an
…Md9EAKiA9RyVU Fix: 404-Seite - HTML-Fehler beheben und Countdown optimieren
- Close paragraph tag before noscript element - Wrap noscript content in its own paragraph - Resolves template parsing error: quote in attribute name
- Move noscript text inline within paragraph - Hide countdown container by default, show with JS - Provides seamless fallback text without separate paragraph
…UpPQHSJSNFjWPXGMC8k8 Claude/fix 404 template error 011 c up pqhsjsn fj wpxgmc8k8
Major improvements to JavaScript codebase: ✅ Extract inline scripts from templates - Move 404 countdown script to 404-redirect.js - Move scroll-to-top button logic to scroll-to-top.js - Improves CSP compliance and testability ✅ Modernize event handling - Replace onclick attribute with addEventListener - Remove global window.topFunction - Clean up global namespace pollution ✅ Eliminate code duplication - Create shared utils.js for common functions - Centralize scrollToTop() functionality - Both keyboard shortcuts and button use same utility ✅ Consistent ES6 syntax - Convert all function() to arrow functions - Modernize copy-code.js and keyboard-shortcuts.js - Consistent code style across all JavaScript files ✅ Add comprehensive error handling - Try-catch blocks in all keyboard-shortcuts functions - Helpful console.error messages for debugging - Defensive programming for DOM operations ✅ Better code organization - Add clear section headers to keyboard-shortcuts.js - Logical grouping: State, Init, Events, Navigation, Utils, Overlay - Improved code documentation and comments Benefits: - Better maintainability and readability - Easier testing and debugging - CSP-friendly (no inline scripts) - Modern JavaScript best practices - Reduced code duplication - Improved error resilience
Dramatic performance improvements for Lighthouse scores: 🚀 Conditional Script Loading - copy-code.js: Only loads on pages with code blocks Checks for: <pre>, .highlight, or ``` in content Saves ~3KB + parsing time on pages without code - 404-redirect.js: Already isolated to 404 page only - photo-gallery-mobile.js: Already isolated to gallery only 🚀 Non-blocking Script Execution - Added `defer` to ALL local scripts: - utils.js - scroll-to-top.js - keyboard-shortcuts.js - copy-code.js (conditional) - 404-redirect.js - photo-gallery-mobile.js - plugins_js (baseof.html) - Added `async` to external scripts: - micro.blog/narration.js - micro.blog/conversation.js - GoatCounter analytics (already had async) 🚀 Cache Busting for Photo Gallery - Added buildHash to photos.css - Added buildHash to photo-gallery-mobile.js Benefits: ✅ No render-blocking JavaScript ✅ Scripts only load when needed ✅ Faster First Contentful Paint (FCP) ✅ Faster Time to Interactive (TTI) ✅ Better Lighthouse Performance score ✅ Reduced bandwidth on pages without code ✅ Better mobile performance Technical Details: - defer: Downloads in parallel, executes after DOM parsed - async: Downloads in parallel, executes immediately - Conditional loading: Hugo template checks content at build time
…1CUpjcABPxXY71qi69tPNk Claude/code review improvements 011 c upjc ab px xy71qi69t p nk
- Add preload hint for utils.js to load critical script early - Make photo domain preconnect conditional (only when photos present) - Improves perceived performance by ~200-300ms for script execution
…RbuwcdMosiF4gLp Perf: Add resource hints for improved loading performance
Removed the '/' keyboard shortcut for focusing the search field as it was not widely used. This simplifies the codebase and makes it easier to maintain. Changes: - Removed '/' key case from event handler - Removed focusSearchField() function - Removed references from comments and help overlay
…cut-011CUqP6Db8RLzd9DQNPVLqA Refactor: Remove unused '/' keyboard shortcut
Added missing 'include_conversation' parameter to config.json to enable the Micro.blog comments box on posts. The template was checking for this parameter before loading conversation.js, which is why the comments box wasn't appearing despite being enabled in Micro.blog settings.
…011CUznCiwMAQsLUxZXxn3of Fix: Enable conversation/comments box display
Die Partial-Aufrufe für lite-youtube-head.html und lite-youtube-footer.html werden nun mit templates.Exists abgesichert. Dies verhindert Build-Fehler, wenn das mbplugin-youtube-lite Plugin nicht geladen ist, und ermöglicht, dass die Seite auch ohne das Plugin funktioniert.
Problem: Das conversation.js Skript konnte sich mit async-Attribut nicht mehr korrekt im DOM lokalisieren und die Conversation-Box wurde nicht eingefügt. Lösung: Entfernung des async-Attributs. Das Micro.blog Embed-Skript benötigt synchrone Ausführung, um sich selbst im DOM zu finden und die Conversation-Box korrekt einzufügen. Ursprung des Bugs: Commit b6f3992 hatte async hinzugefügt zur Performance- Optimierung, aber dies verhinderte die korrekte Funktion des Embed-Skripts.
…wtRWxshx Claude/hast du ei 011 c uzq2b1 s2i tq uwt r wxshx
…kturierte Daten Implementiert zusätzliche Schema.org Typen für bessere Suchmaschinen-Integration: - Recipe: Rezepte erscheinen im Google Rezept-Karussell - Review: Bewertungen mit Sternen in Google-Suchergebnissen - VideoObject: Videos im Google Video-Index - ImageObject: Creative Commons Lizenzierung für Bilder Inspiriert von Felix Schwenzels Search Engine Experimentation Artikel. Dokumentation in SCHEMA_ORG_HOWTO.md mit Beispielen und Anleitungen.
…ontmatter Anpassungen für Micro.blog-Kompatibilität: - Recipe Schema: Aktivierung via Tags (rezept, recipe, kochen) - Review Schema: Automatische Sternchen-Erkennung (⭐) + Tag-basiert - Review Auto-Type: Erkennt Review-Typ aus Tags (Film, Serie, Restaurant, etc.) - Video Schema: Tag-basiert (video, vlog) - CC-Lizenz: Global via Site.Params oder per Tag (cc, creative-commons) Neue Dokumentation MICROBLOG_HOWTO.md speziell für Micro.blog-Nutzer mit praktischen Beispielen ohne Frontmatter-Zugriff.
Änderungen: - Rezept-Tag: "rezeptvomchef" als primärer Tag hinzugefügt - Review Store-Typ: Unterstützung für Läden/Shops (laden, shop, geschäft, store) - Sternchen-Erkennung: Beide Typen funktionieren jetzt (⭐ und ★) - Store-Reviews: Können jetzt auch Adressen haben (wie Restaurant/Place) Dokumentation MICROBLOG_HOWTO.md aktualisiert mit: - Neuen Tag-Beispielen - Store-Review Beispiel - Beide Sternchen-Typen dokumentiert
Änderungen: - VideoObject-Schema komplett entfernt (zu komplex für Use-Case) - Review-Typen vereinfacht: Film, Serie, Buch, Ort (Place) - Alle Ort-Typen (Restaurant, Laden, Shop) → Place (einfacher für User) - Dokumentation massiv vereinfacht und gekürzt - Nur noch gefüllte Sterne dokumentiert (★ und ⭐) MICROBLOG_HOWTO.md: - Von 270 auf 193 Zeilen reduziert - Klare Struktur: Rezept, Review, CC-Lizenz - Tag-Übersicht auf das Wesentliche reduziert - Beispiele direkt und verständlich
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.