Ein Service, der den aktuellen Himmel am ungefähren Standort als CSS-Gradient darstellt

 (sky.dlazaro.ca)
4 Punkte von GN⁺ 2025-08-10 | 1 Kommentare | Auf WhatsApp teilen
  • Die IP-Adresse des Nutzers wird genutzt, um den aktuellen ungefähren Standort zu ermitteln
  • Die passende Himmelfarbe und Atmosphäre wird als CSS-Gradient visualisiert
  • Ohne separate Karte oder komplizierte Eingaben ist das Ergebnis sofort ersichtlich, sobald die Website aufgerufen wird
  • Die Benutzeroberfläche ist einfach und leicht, sodass sie von jedem leicht genutzt werden kann
  • Es werden keine echten Wetterdaten berücksichtigt; die Farben werden basierend auf zeitzonen- und sonnenstandsbezogenen Standortdaten festgelegt

Service-Übersicht

  • Wenn dieser Webdienst aufgerufen wird, wird der ungefähre Standort des Nutzers (Breitengrad, Längengrad) anhand der IP-Adresse geschätzt
  • Mithilfe der geschätzten Standortdaten und der lokalen Uhrzeit werden die Himmelstöne anhand der Sonnenposition und Zeitzone berechnet
  • Die berechneten Himmelstöne werden als CSS-Gradient im Website-Hintergrund gerendert und stellen die aktuelle Himmelstimmung in Echtzeit dar
  • Ohne separate Dateneingabe startet der Dienst automatisch, sobald die Website aufgerufen wird

Funktionen und Merkmale

  • Es gibt keine komplexen Schritte wie Karten, Wetter-APIs oder die Registrierung eines Benutzerkontos
  • Echtzeit-Visualisierung: Die Himmelstöne ändern sich dynamisch mit den Zeitzonenwechseln des aktuellen Standorts
  • Umgesetzt ausschließlich mit CSS-Gradianten, wodurch ein sehr schnelles und leichtes Nutzungserlebnis entsteht
  • Es werden keine Echtzeit-Wetterwarnungen, Wolken oder Niederschlagsdaten einbezogen; standardmäßig wird ein Algorithmus verwendet, der sich auf den Sonnenwinkel und die Uhrzeit konzentriert

Einsatzgebiet und Bedeutung

  • Ein Werkzeug für eine einfache visuelle Informationsbereitstellung ohne die Komplexität von Wetter-Apps oder Kartendiensten
  • Es hat einen hohen Nutzen als webbasiertes Artwork oder für persönliche Demo-Projekte
  • Da automatisch lokalisierte visuelle Hinweise bereitgestellt werden, ist es gut geeignet, die Frage zu klären, wie der Himmel an diesem Ort gerade aussieht

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2025-08-10
Hacker News Kommentare

  • In den frühen Jahren meiner Karriere, als ich an einer 3D-Turn-by-Turn-Navigationssoftware gearbeitet habe, erinnere ich mich daran, dass ich für das Zeichnen des Himmels zuständig war

    • Mein Vorgesetzter meinte, „Tagsüber einfach ein Blau-, nachts ein dunkelgraues Quadrat“ würde reichen, aber ich wollte einen Himmel sehen, der sich je nach Wetter, Breite, Länge und Uhrzeit verändert, deshalb habe ich auf Basis der Preetham-Studie [Link] ein realistisches Himmelsmodell implementiert

    • Die Sternbilder wurden über eine hartkodierte Sternkarte generiert, und die Performance war dabei auch ziemlich gut

    • Auf der Management-Ebene war man jedoch irritiert über realistische Effekte wie einen nebligen, gelblichen Horizont, und sie mochten meine Arbeit nicht, weil der „Himmel des Konkurrenten blau ist“; mein Argument „Sieh einfach selbst nach draußen“ kam bei ihnen überhaupt nicht an

    • Am Ende habe ich alles entfernt und nur noch ein blaues Quadrat übriggelassen

    • Durch diese Erfahrung empfinde ich solche Seiten immer als richtig großartig

    • Deshalb habe ich gelernt, wie wichtig Spezifikationen und Design sind

      • Eine direkt verständliche Konvention ist entscheidend, während zu viele visuelle Details eher für Verwirrung sorgen
      • Wenn der Himmel nicht blau ist, sondern trüb oder milchig wirkt, kann man ihn nicht sofort von einem noch ladenden Screen unterscheiden. Für Sterne gilt ähnlich: Nachts haben sie keinen klaren funktionalen Zweck
      • Solche realistischen Effekte passen zu einer realen Planetenansicht wie Google Earth. Bei einer echten Navigationsansicht ist jedoch Einfachheit und Klarheit am wichtigsten. Praktikabilität hat Vorrang vor Realismus

    • Vor einiger Zeit hörte ich von einem ehemaligen Kollegen, der beim Spiel Cobalt [Link] sehr viel Zeit dafür verbracht hat, ein physikalisch basiertes Sternsystem zu implementieren

      • Wenn die Usability leidet, kann man solche Elemente am Ende noch entfernen, aber ich glaube, genau diese kleinen Details summieren sich und erhöhen die Ergebnisqualität und machen die Erkundung für Nutzer:innen spannender

    • In solchen Fällen ist Programmierung als Beruf eher langweilig als als Hobby

      • Manchmal bekommt man im Unternehmen die Chance, so etwas Beeindruckendes zu bauen, aber im Allgemeinen wird es nur dann wirklich freigegeben, wenn ein Ergebnis wie „Realistischer Himmel erhöht die OKR-Metrik um 0,1 %“ nachweisbar ist
      • Es gibt aber immer auch Nischen mit echter Spaßarbeit, und deshalb ist die Spielebranche trotz aller Leidenschaft oft schlecht bezahlt und von Überlastung geprägt

    • Das ist ein typisches Beispiel für absurdes Management: Führungskräfte, die die Kreativität von Innovatoren ignorieren

    • Ich hätte gedacht, dass man das mindestens als Easter Egg hätte einbauen können

      • Es wäre schöner gewesen, wenn er gesagt hätte, dass Vincent van Goghs Gemälde die Sternpositionen exakt wiedergeben und aus genau dieser Inspiration heraus versucht wurde, realistische Himmelsfarben nachzubilden

  • Wir stellen gerade einen Sensor vor dem Fenster bereit. Dieser Sensor misst die Himmel-Farbe mit einem kleinen Kegelwinkel und sendet das Ergebnis an Skylight sowie an Indoor-Window-Fixtures, um dieselbe Himmelsausstrahlung im Innenraum zu reproduzieren [innerscene.com]

    • Man könnte es auch auf einem Computermonitor umsetzen, aber ohne Vollspektrum statt RGB-Lichtquellen ist das Innenlicht ungleichmäßig, das ist die Grenze
    • Zudem ist der aktuelle Code nicht in der Lage, Variablen wie Wolken, Dunst oder Rauch zu berücksichtigen, wodurch Abweichungen zum echten Ausblick entstehen können (von vielen HN-Kommentaren hervorgehoben)
    • Mit Echtzeit-Satellitenbildern lässt sich das teilweise ergänzen, aber vollständige Genauigkeit ist schwierig, daher haben wir letztlich unseren eigenen Sensor entwickelt
    • Auf dem Markt gibt es bereits verschiedene CCT-Sensoren, die typischerweise nur gerichtetes + diffuses + reflektiertes Licht messen und bei etwa 7500 K enden, während der reale Himmel bis auf 40.000 K schwankt
    • Wir haben ein Plot-Bild beigefügt, das zeigt, wie sich die Himmelsfarbe nach Tageszeit aus echten Sensorwerten verändert, sowie zusätzliche Infos [Bild], [Link]

  • Als ich den HTML-Tag meta http-equiv="Refresh" gesehen habe, musste ich schmunzeln

    • Früher war das die einzige Methode, wenn eine Seite automatisch neu geladen werden musste

    • Für mich ist dieses Projekt ein hervorragendes Beispiel für formalen Minimalismus

    • In Wirklichkeit erfüllt http-equiv denselben Zweck wie ein HTTP-Header; der Senden des Headers Refresh: 60 hat denselben Effekt

    • Ich denke, man wäre noch erstaunter gewesen, wenn man die Frameset-Funktion gekannt hätte

    • Danke dafür! Aber nur zur Vollständigkeit: Als ich geboren wurde, wurde setTimeout(() => location.reload(), ...) bereits breit eingesetzt

  • Als alter Webentwickler, der nicht die neuesten Webtechnologien kennt, frage ich mich, wie dieser Code in der Kombination aus astro/cloudflare/wrangler funktioniert

    • const { latitude = "0", longitude = "0" } = Astro.locals.runtime.cf || {};

    • Es wirkt, als würde Cloudflare-Funktionalität in Astro gekapselt, um Breiten- und Längengrad bereitzustellen; ich würde gern verstehen, welche interne Verarbeitung dahintersteht

    • Ich habe mir die Doku angeschaut, aber keine klare Antwort gefunden, deshalb bitte ich um eine genauere Erklärung

    • Der Grund, warum man keine separate interne Verarbeitung sieht, ist, dass es in der Praxis quasi wie Magie funktioniert

      • Astro bietet mehrere Adapter für Server-Runtimes wie Vercel, Cloudflare und Netlify, und ist einfach als Plug-and-Play-Lösung aufgesetzt
      • Der Cloudflare-Adapter macht verschiedene Bindings in Astro.locals.runtime verfügbar, darunter das cf-Binding, das verschiedene Request-Werte wie Breiten- und Längengrad enthält [Link1, Link2]
      • Manche Bindings werden lokal gemockt, falls keine Cloudflare-Worker-Umgebung vorhanden ist

    • Bei Cloudflare kann man eine Funktion aktivieren, die die Nutzer-Breiten-/Längengrad (ungefähr IP-basiert oder auf andere Weise) automatisch in HTTP-Header schreibt [Link]

      • „Diese verwaltete Transformation fügt Stadt-, Länder-, Kontinents-, Breiten- und Längengrad-Informationen zu den HTTP-Request-Headern hinzu“

  • Ich habe die Seite geöffnet und 20 Sekunden gewartet, um zu sehen, wann sie sich ändert ... da wurde mir klar, dass gerade Mitternacht war

    • Nachts wird nur ein tiefschwarzer Bildschirm angezeigt, ich hätte mir gewünscht, dass jemand dort noch etwas Clevereres ergänzt

  • Ich bin der SunCalc-Autor. Es macht mich wirklich glücklich, mein Code-Beispiel in genau diesem Kontext zu sehen

    • Nebenbei: suncalc.net liefert derzeit wegen eines abgelaufenen Google Maps API-Tokens einen Fehler [suncalc.net]

      • Da du dich gut mit Kartentechnologien auskennst, empfehle ich als kleinen Vorschlag die Migration zu Protomaps [Link]

    • Ob er Autor oder Mitwirkender ist, weiß ich nicht; egal, es ist eine tolle Sache, und ich liebe solche Demos

  • Ich habe die Seite neu geladen, JS aktiviert und erneut neu geladen und dachte schließlich, der Server wäre überlastet und würde nicht mehr hochkommen

    • Erst nach dem Lesen der Kommentare wurde mir klar, dass der schwarze Bildschirm schlicht daran lag, dass es draußen Nacht ist, und dass es eigentlich von Anfang an korrekt funktionierte

  • Er ist deutlich ausgefeilter als erwartet. Die Implementierung basiert auf einer Forschungsarbeit [Link]

  • Ich habe es direkt mit dem Handy am Fenster getestet und es stimmte zu 100 % mit dem echten (gerade klaren) Himmel überein, sodass ich sogar meine Frau dazu geholt habe, um es zu zeigen. Wirklich beeindruckend – wirklich großartig. Glückwunsch!

  • Ich bin der Entwickler hinter ant.care [Link]; das Ziel war, den Hintergrundhimmel mit der realen Umgebung zu synchronisieren, aber bisher wurde das nur sehr schlicht umgesetzt

    • Irgendwann möchte ich diese Methode auch ausprobieren, entweder alles in Rust/WASM umzusetzen oder nur den Kern in Rust zu implementieren und den Rest JS/HTML zu überlassen