Bulunduğunuz Konuma Göre Mevcut Gökyüzünü CSS Gradyanı Olarak Gösteren Servis

• Kullanıcının IP adresini kullanarak güncel yaklaşık konum bilgisini tahmin eder
• Bu konuma göre gökyüzü rengi ve atmosferini CSS gradyanı ile görselleştirir
• Ek bir harita veya karmaşık bir girdi olmadan yalnızca web sitesine girerek anında sonucu görebilirsiniz
• Arayüzün sade ve hafif olması nedeniyle herkesin kolayca erişebilmesi sağlanır
• Gerçek hava durumu bilgisini yansıtmaz; renkler konuma dayalı saat dilimi ve güneş konumuna göre belirlenir

---

Servis Özeti

• Bu web servisi, kullanıcının siteye giriş yaptığı anda yaklaşık konumunu (enlem, boylam) IP adresinden tahmin eder
• Tahmin edilen konum bilgisi ve yerel saat kullanılarak, güneşin konumu ve saat dilimine göre gökyüzünün renk tonu hesaplanır
• Hesaplanan gökyüzü rengi, web sitesi arka planını CSS gradyanı olarak oluşturarak gerçek zamanlı biçimde gökyüzü atmosferini gösterir
• Ek veri girişi gerektirmez; yalnızca web sitesine erişince otomatik olarak çalışır

Özellikler ve Nitelikler

• Harita, hava durumu API'si, hesap kaydı gibi karmaşık adımlar yoktur
• Gerçek zamanlı görselleştirme: Bulunduğunuz konumun saat dilimi değişimine göre gökyüzü rengi dinamik biçimde değişir
• Yalnızca CSS gradyanı ile uygulanır; bu da çok hızlı ve hafif bir kullanıcı deneyimi sunar
• Gerçek tehlikeli hava durumu, bulut ve yağış yansıtılmaz; temelde güneş açısı ve zaman odaklı bir algoritma uygulanır

Kullanım Amacı ve Önemi

• Hava durumu uygulamaları veya harita servisleri kadar karmaşık olmayan basit bir görsel bilgi sunma aracıdır
• Web tabanlı sanat çalışmaları veya kişisel demo projeleri için de yüksek kullanım değerine sahiptir
• Yerel olarak özelleştirilmiş görsel ipuçları otomatik olarak sunulur, bu nedenle ‘şu an burada gökyüzü nasıl olmalı’ sorusunu hızlıca yanıtlamak için uygundur

[GN⁺]

Hacker News yorumu

• Kariyerimin ilk yıllarında 3B turn-by-turn navigasyon yazılımı geliştirirken bir dönem gökyüzü çizme görevi bana düşmüştü

  • Kıdemli geliştiricim “Gündüzleri mavi, geceleri koyu gri bir kutu koymak yeter” dedi ama ben çevre, enlem, boylam ve zamana göre değişen gerçek bir gökyüzü görmek istediğimden Preetham makalesini [bağlantı] referans alıp gerçekçi bir gökyüzü modeli geliştirdim

  • Yıldızlar, elle kodlanmış bir astronomi haritasıydı; performansım da oldukça iyiydi

  • Ama üst yönetim, ufkun puslu ve sarımsı çıkmasını gerçekçi bulduğu için şaşırdı ve “rakiplerin gökyüzü mavi” diyerek işimi hoş karşılamadı; “dışarı bakın” dedim ama bu da karşılık bulmadı

  • Sonunda her şeyi silip sadece mavi bir kare bıraktım

  • Bu yüzden böyle siteleri gördüğümde gerçekten çok hoş olduklarını düşünüyorum

  • Bu deneyimle gereksinim ve tasarımın önemini daha iyi anladım

    • Hızlı anlaşılabilen alışkanlıklar önemlidir; fazlaca görsel detay ise sadece kafa karışıklığı doğurur
    • Gökyüzü mavi yerine puslu veya açık sarımsıysa bunun gerçek bir gökyüzü mü yoksa sayfa hâlâ yükleniyor mu olduğu karışabilir. Gece kullanımında da işlevsel bir yararı yok
    • Bu tür gerçekçi efektler Google Earth gibi gerçekçi gezegen görünümü için uygundur. Gerçekten yapılınca eğlenceli olur, ancak bir navigasyon görünümünde en önemli şey basitlik ve açıklıktır; pratiklik, gerçekçilikten önce gelir

  • Daha önce birlikte çalıştığım biri, Cobalt[bağlantı] oyununda yıldız sistemini fizik temelli uygulamak için fazlaca zaman harcadığını söylemişti

    • Kullanımda sorun yaratırsa bu tür unsurlar son aşamada çıkarılabilir ama bunlar birikince ürünün kalitesini artırır ve kullanıcının keşfetme zevkini artırır

  • Bu durumlarda programlama hobiden çok meslek olduğunda daha bunaltıcı olabiliyor

    • Bazen şirket içinde böyle şeyler yapma fırsatı doğsa da genelde ancak “gerçekçi gökyüzünün OKR metriklerini yüzde 0,1 yükselttiği” gibi bir bulgu olduğunda geçiyor
    • Ama her zaman eğlenceli işin yapılabileceği niş alanlar da var; bu yüzden oyun sektörü tutkuya kıyasla düşük ücretli ve aşırı mesailerle dolu

  • Yönetimin inovatif birinin yaratıcılığını görmezden gelişi, aptalca yönetişim kalıbının tipik örneğidir

  • En azından bir easter egg olarak eklenebilirdi diye düşündüm

    • Vincent van Gogh tablolarındaki yıldızların gerçek yıldız konumlarına kadar doğru olduğunu ve bu esinle gerçekçi gökyüzü renklerini yakalamaya çalıştığını anlatsaydı daha iyi olurdu

• Pencerenin içine takılan bir sensör geliştiriyoruz. Bu sensör, gökyüzünün rengini dar bir koni açısıyla ölçüp sonucu skylight ve iç mekân window fixture sistemlerine göndererek içerde aynı gökyüzü tonunu yeniden üreten bir çözümdür[innerscene.com]

  • Bunu bir bilgisayar ekranında da göstermek mümkün ama RGB ışık kaynağı yerine tam spektrumu kullanmadığı için iç mekân aydınlatması homojen olmuyor
  • Dahası, mevcut kodda bulut, sis, duman gibi değişkenlerin hesaba katılmaması nedeniyle gerçek dış görüntüyle farklılık oluşabilir; bunu birçok HN yorumu işaret etti
  • Gerçek zamanlı uydu görüntüsüyle kısmen tamamlanabilir ama tamamen doğru olması zor olduğu için nihayet kendi sensörümüzü geliştirdik
  • Piyasada farklı CCT sensörleri zaten var; çoğu yön, saçılma ve yansıma ışığını ölçerek yaklaşık 7500K’de kalıyor, oysa gerçek gökyüzü 40.000K’a kadar değişebiliyor
  • Gerçek sensör ölçümlerinde zaman içinde gökyüzü renginin nasıl değiştiğini gösteren bir grafik[görsel] ve ek bilgiler[bağlantı] paylaştık

• meta http-equiv="Refresh" HTML etiketinin geçtiğini görünce gülümserim

  • Eskiden sayfa otomatik yenilenmesi gerekirse bunun dışında başka bir yol yoktu

  • Bu projenin “formal minimalist” yaklaşımının parlak bir örneği olduğunu düşünüyorum

  • Aslında "http-equiv"nun rolü aynı HTTP başlığını taşımaktır; “Refresh: 60” başlığını göndermek aynı etkiyi bırakır

  • frameset özelliğini öğrenirseniz daha da şaşırırdım

  • Teşekkür ederim! Ama özür dilerim, doğduğumda setTimeout(() => location.reload(), ...) zaten oldukça yaygındı

• En yeni web teknolojilerini bilmeyen bir eski kuşak geliştirici olarak, astro/cloudflare/wrangler kombinasyonunda aşağıdaki kodun nasıl çalıştığını merak ediyorum

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

  • Cloudflare özelliği astro’da sarmalanarak enlem/boylamı veriyormuş gibi görünüyor ama hangi içsel işleme uygulandığını öğrenmek istiyorum

  • Dokümanlara bakmama rağmen net bir cevap bulamadım, detaylı açıklama rica ederim

  • İçsel bir işleme görünmüyor olması tamamen sihir gibi davranmasından

    • Astro, Vercel, Cloudflare, Netlify gibi birden çok sunucu çalışma zamanı için adaptör sağlar ve bu da basit bir plug-and-play yaklaşımıyla gelir
    • Cloudflare adaptörü çeşitli binding’leri Astro.locals.runtime içinde açığa çıkarır; bunların içinde cf binding’inde enlem, boylam gibi çeşitli istek değerleri bulunur[bağlantı1, bağlantı2]
    • Bazı binding’ler Cloudflare Workers ortamında olmadığında yerel olarak mock’lanır

  • Cloudflare’de kullanıcının enlem ve boylamını (yaklaşık IP tabanlı veya başka bir yöntemle) HTTP başlıklarına otomatik ekleyen bir özelliği etkinleştirebilirsiniz[bağlantı]

    • “Bu yönettiğimiz transformasyon, ziyaretçinin şehir, ülke, kıta, enlem ve boylam bilgilerini HTTP istek başlıklarına ekler”

• Siteyi açtıktan sonra 20 saniye boyunca “ne zaman değişecek?” diye bekledim ama sonra bunun şu an saat 00:00 olduğunu anladım

  • Gece olunca sadece siyah bir ekran çıkıyor; keşke daha zeki biri bunu biraz daha iyi eklerdi

• SunCalc’ın yazarıyım. Kodumun bu amaçla kullanılmasını görmek beni gerçekten mutlu etti

  • Ayrıca suncalc.net, Google Maps API token süresi dolduğu için hata veriyormuş[suncalc.net]

    • Harita konusunda bilginiz iyi görünüyor, küçük bir öneri olarak Protomaps[bağlantı] ile geçişi düşünün

  • Yazar mısınız, katkıda bulunan mısınız bilmiyorum; yine de çok iyi bir iş, gerçekten çok sevdim. Bu tür demoları izlemek keyif veriyor

• Sayfayı yeniledim, JS’yi açtım, tekrar yeniledim... sonunda sunucu aşırı yüklenince açılmıyor sanmıştım

  • Yorumları okuduğumda ekranın siyah olmasının dışarıda gece olduğu için olduğunu anladım ve aslında en baştan beri çalıştığını gördüm

• Beklediğimden de çok daha detaylı bir uygulama. Araştırma makalesine [bağlantı] dayalı

• Telefona bakıp pencereye doğrultunca gerçek gökyüzü (şu an açık) ile yüzde 100 aynıydı; eşimi bile çağırıp gösterdim ve övdüm. Gerçekten harikaydı, tebrikler

• ant.care[bağlantı] yapan biriyim. Hedefimiz arka plan gökyüzünü gerçek ortamla senkronize etmekti ama şimdiye kadar oldukça sade bir şekilde yaptık

  • İleride bunu da bu şekilde uygulamak istiyorum. Rust/WASM ile her şeyi mi kuralım, yoksa yalnızca çekirdeği Rust ile yapıp geri kalanı JS/HTML’ye mi bırakalım, bunu henüz tartışıyoruz