{"id":335,"date":"2025-01-05T11:08:00","date_gmt":"2025-01-05T11:08:00","guid":{"rendered":"https:\/\/willemprins.me\/?p=335"},"modified":"2025-02-22T18:36:17","modified_gmt":"2025-02-22T18:36:17","slug":"facebook-postdaten-als-personliche-musikalische-zeitmaschine-teil-2-2013-2019","status":"publish","type":"post","link":"https:\/\/willemprins.me\/de\/facebook-postdaten-als-personliche-musikalische-zeitmaschine-teil-2-2013-2019\/","title":{"rendered":"Facebook-Postdaten als pers\u00f6nliche musikalische Zeitmaschine – Teil 2 (2013-2019)"},"content":{"rendered":"\n

Dies ist der zweite und letzte Teil meiner Reise durch meinen eigenen Facebook-Verlauf, um eine Wiedergabeliste mit Musik zusammenzustellen, die ich in meiner Timeline geteilt habe. Teil 1 finden Sie hier<\/a>.<\/p>\n\n\n\n

Ich fand heraus, dass die Eintr\u00e4ge im HTML-Archiv meiner Facebook-Aktivit\u00e4ten nicht chronologisch sortiert waren<\/h2>\n\n\n\n

Wenn Sie Ihre Facebook-Daten herunterladen,<\/a> k\u00f6nnen Sie diese auf Ihrem Computer oder einem anderen Ger\u00e4t speichern oder Meta die Erlaubnis erteilen, eine Zip-Datei auf Ihr Google Drive oder Dropbox hochzuladen. Ich fand das sehr praktisch, denn so konnte ich die Daten einfach herunterladen, wann immer sie fertig waren, ohne ein Browserfenster ge\u00f6ffnet halten zu m\u00fcssen. Nach der Auswahl des Ziels w\u00e4hlt man das Format f\u00fcr den Download, wobei die Optionen HTML und JSON sind. Da ich haupts\u00e4chlich daran interessiert war, mein Archiv zu durchsuchen und nichts programmatisch damit zu tun, w\u00e4hlte ich HTML. <\/p>\n\n\n\n

Nach dem Entpacken des Archivs erhalten Sie eine gro\u00dfe Ordnerstruktur, die verschiedene Arten von Daten enth\u00e4lt. Bei HTML-Downloads enth\u00e4lt der Stammordner eine hilfreiche Datei start_here.html<\/strong>, die als Einstiegspunkt in das Archiv dient.
Der interessanteste Ordner mit der Bezeichnung your_facebook_activity<\/strong> ist auch der gr\u00f6\u00dfte: In meinem Fall enth\u00e4lt er 235 MB an HTML- und hochgeladenen Mediendateien. <\/p>\n\n\n\n

Als ich die HTML-Datei, die alle “Beitr\u00e4ge, Check-Ins, Fotos und Videos” enth\u00e4lt, durchbl\u00e4tterte, stellte ich fest, dass die Eintr\u00e4ge nicht chronologisch sortiert waren. Anstatt Beitr\u00e4ge aus dem Jahr 2013 zu finden, stolperte ich \u00fcber weitere <\/em>Beitr\u00e4ge und Status-Updates aus dem Jahr 2011, von denen ich dachte, dass ich sie bereits in meinem vorherigen Beitrag behandelt hatte! <\/p>\n\n\n\n

Ich habe eine L\u00f6sung gefunden, auf die altmodische Art.<\/h2>\n\n\n\n

Jetzt erinnerte ich mich an Wes Bos’ JavaScript-Kurs f\u00fcr Anf\u00e4nger<\/a>, dass es wirklich einfach ist, diese Art von Problemen in HTML-Dokumenten zu beheben, indem man JavaScript in der Konsole verwendet. Da alle Beitr\u00e4ge das gleiche Markup mit einer Datumszeichenkette in einem untergeordneten Element verwenden, dachte ich mir, dass es ziemlich einfach sein w\u00fcrde, die Eintr\u00e4ge nach dieser Zeichenkette zu sortieren. Aber mein JavaScript ist eingerostet, also war mein erster Gedanke, Google zu benutzen, um nachzuschauen, wie man in einer Vergleichsfunktion in einen Nachkommen hinabsteigt. <\/p>\n\n\n\n

Dabei stie\u00df ich auf einen Thread auf Stack Overflow<\/a>, in dem die akzeptierte Antwort noch keine M\u00f6glichkeit enthielt, ein Datum aus dem untergeordneten Knoten eines Elements zu extrahieren und auf der Grundlage dieser Werte zu vergleichen und zu sortieren. Ich hatte also die Wahl: mich in die Materie einarbeiten und mich mit der Art und Weise vertraut machen, wie JavaScript Werte aus dem DOM holt, oder… AI fragen.<\/p>\n\n\n\n

Claude bitten, eine scheinbar zuf\u00e4llig geordnete Liste von Beitr\u00e4gen und Aktualisierungen zu korrigieren<\/h2>\n\n\n\n

Als ich mich daran erinnerte, dass es in der Tat 2025 ist, wurde mir klar, dass ich das Problem auch mit einem KI-Agenten l\u00f6sen k\u00f6nnte. Dies war auch die perfekte Gelegenheit, um die kostenlose GitHub Copilot-Erweiterung<\/a> in Visual Studio Code auszuprobieren, die ich k\u00fcrzlich aktiviert hatte. Zu meiner \u00dcberraschung lieferte die erste Eingabeaufforderung, die ich an Claude Sonnet 3.5<\/a> weitergab, ein Ergebnis, das zur L\u00f6sung meines Problems ausreichte: <\/p>\n\n\n\n

\n

K\u00f6nnen Sie mir helfen, ein JS-Skript zu erstellen, das ich in der Browserkonsole ausf\u00fchren kann, um Elemente in einem Html-Dokument nach einer Datumszeichenfolge innerhalb eines Nachfolgeknotens jedes Elements zu sortieren.<\/p>\n<\/blockquote>\n\n\n\n

Der vorgeschlagene Code machte es sehr einfach, die Funktion gegen die Klassen, die ich im Archiv-Markup gefunden hatte, auszuf\u00fchren.<\/p>\n\n\n\n

Sehen Sie sich den Code an<\/summary>\n
function sortElementsByDate(parentSelector, dateSelector) { \/\/ Abrufen des \u00fcbergeordneten Elements const parent = document.querySelector(parentSelector); if (!parent) return; \/\/ Abrufen aller zu sortierenden Elemente const items = Array.from(parent.children); \/\/ Sortieren der Elemente anhand der Datumszeichenfolge items.sort((a, b) => { const dateA = new Date(a.querySelector(dateSelector)?.textContent || ''); const dateB = new Date(b.querySelector(dateSelector)?.textContent || ''); return dateB - dateA; \/\/ Absteigende Reihenfolge (neuestes zuerst) }); \/\/ Elemente in sortierter Reihenfolge neu anf\u00fcgen items.forEach(item => parent.appendChild(item)); } \/\/ Beispielverwendung: \/\/ sortElementsByDate('.container', '.date-field');<\/code><\/pre>\n<\/details>\n\n\n\n
F\u00fcr diejenigen, die sich daf\u00fcr interessieren, wie dieser Austausch zwischen mir und Claude aussah: hier ist ein Screenshot aus Visual Studio:<\/p>\n\n\n\n
\"Screenshot
Die L\u00f6sung meines Problems, von Claude in wenigen Sekunden generiert.<\/figcaption><\/figure>\n\n\n\n
R\u00fcckblickend auf eine unerwartet reibungslose und erfolgreiche Interaktion mit Claude<\/h2>\n\n\n\n
Ich war ein wenig schockiert, wie gut das funktioniert hat! Aus einer “KI wird uns die Arbeit wegnehmen”-Perspektive fand ich es beruhigend zu wissen, dass meine eigene Entwicklungserfahrung hier eine<\/em> Rolle spielte:<\/p>\n\n\n\n