Layanan yang Menampilkan Langit Saat Ini di Lokasi Perkiraan Anda dengan Gradient CSS

• Menggunakan alamat IP pengguna untuk memperkirakan informasi lokasi saat ini
• Menampilkan warna dan suasana langit yang sesuai lokasi tersebut dalam bentuk visualisasi gradien CSS
• Tanpa peta terpisah atau input rumit, hasil dapat dilihat langsung setelah mengunjungi situs web
• Antarmuka yang sederhana dan ringan sehingga mudah diakses oleh siapa saja
• Tidak mencerminkan informasi cuaca nyata, melainkan menentukan warna terutama berdasarkan zona waktu berbasis lokasi dan posisi matahari

---

Ikhtisar Layanan

• Layanan web ini memperkirakan lokasi kasar (lintang dan bujur) pengguna saat mengakses berdasarkan alamat IP
• Dengan memanfaatkan informasi lokasi yang diperkirakan dan waktu setempat, layanan ini menghitung nuansa warna langit berdasarkan posisi matahari dan zona waktu
• Warna langit yang dihitung dirender ke latar belakang situs web dalam format CSS gradient untuk menampilkan suasana langit secara real-time
• Tanpa proses input data tambahan, layanan ini otomatis berfungsi saat situs web diakses

Fitur dan Karakteristik

• Tidak ada proses kompleks seperti peta, API cuaca, atau pendaftaran akun
• Visualisasi real-time: warna langit berubah secara dinamis mengikuti perubahan zona waktu lokasi saat ini
• Diimplementasikan hanya dengan CSS gradient, sehingga memberikan pengalaman pengguna yang sangat cepat dan ringan
• Tidak memperhitungkan informasi cuaca berbahaya, awan, dan curah hujan secara langsung, dan secara default menerapkan algoritme yang berfokus pada sudut matahari dan waktu

Tujuan dan Signifikansi Penggunaan

• Merupakan alat penyedia informasi visual sederhana, tidak sekompleks aplikasi cuaca atau layanan peta
• Nilai pemanfaatannya tinggi juga untuk proyek seni berbasis web atau demonstrasi pribadi
• Karena secara otomatis menyajikan petunjuk visual yang terlokalisasi, cocok untuk cepat menjawab rasa penasaran ‘bagaimana kondisi langit di sini sekarang’

[GN⁺]

Komentar Hacker News

• Ketika di awal karier saat mengerjakan perangkat lunak navigasi 3D turn-by-turn, aku ingat pernah menangani bagian menggambar langit

  • Seniorku pernah bilang, "Kalau siang cukup warna biru, malam cukup kotak abu-abu tua," tapi aku ingin melihat langit nyata yang berubah sesuai kondisi, lintang, bujur, dan waktu, jadi aku mengimplementasikan model langit realistis dengan merujuk paper Preetham[tautan]

  • Konstelasi dibuat dari tabel astronomi yang di-hardcode, dan performanya pun cukup baik

  • Namun manajemen terkejut melihat efek realistis seperti horizon yang buram dan kekuningan, lalu tak suka dengan hasil kerjaku sambil berkata, "langit pesaing itu biru," dan jawaban "lihat saja keluar" pun tidak menyentuh

  • Akhirnya semuanya dihapus, tersisa hanya kotak biru

  • Berkat pengalaman ini, aku merasa situs semacam ini terlihat sangat keren

  • Dari situ aku sadar pentingnya spesifikasi dan desain

    • Konvensi yang langsung dipahami penting, terlalu banyak detail visual malah menambah kebingungan
    • Kalau langit tidak biru, melainkan buram atau pucat, orang bisa bingung apakah itu langit atau halaman yang belum selesai dimuat. Begitu juga bintang-bintang; di malam hari mereka juga tidak punya fungsi praktis
    • Efek realistis seperti ini cocok untuk planet view yang sebenarnya seperti Google Earth. Memang seru kalau dibuat, tetapi untuk view navigasi yang berguna, kesederhanaan dan kejelasan adalah yang terpenting. Praktis lebih diutamakan daripada realistis

  • Pernah ada rekan kerja yang menghabiskan terlalu banyak waktu membuat sistem bintang berbasis fisika di game Cobalt[tautan]

    • Kalau berdampak pada usability, elemen-elemen ini bisa dipangkas di fase final, tapi aku rasa elemen kecil yang terakumulasi seperti ini meningkatkan kelengkapan hasil dan menambah keseruan menjelajah dari sisi pengguna

  • Dalam kasus begini, programming terasa lebih membosankan kalau jadi pekerjaan dibanding jadi hobi

    • Kadang datang peluang melakukan hal keren di kantor, tapi umumnya lolos hanya kalau ada hasil riset seperti "langit realistis menaikkan metrik OKR sebesar 0,1%"
    • Tapi selalu ada niche di mana bisa berkarya menyenangkan, jadi masuk akal kenapa industri game terkenal bergaji minim tapi kerja brutal meski penuh passion

  • Ini contohnya manajemen yang mengabaikan kreativitas inovator dan tipikal contoh manajemen yang absurd

  • Kupikir setidaknya ini bisa dimasukkan sebagai Easter egg

    • Kalau dia bilang bahwa lukisan Vincent van Gogh memang memuat posisi bintang secara akurat lalu mengaitkan tantangan mereproduksi warna langit realistis dari inspirasi itu, tentu akan lebih baik

• Kami sedang meluncurkan sensor yang dipasang di dalam sisi jendela. Sensor ini mengukur warna langit dari sudut konus kecil dan mengirim hasilnya ke solusi skylight serta window fixture indoor untuk mereproduksi suasana langit yang sama di dalam ruangan[innerscene.com]

  • Secara teori ini juga bisa diimplementasikan lewat monitor komputer, tetapi karena tidak memakai spektrum penuh dan hanya memakai sumber cahaya RGB, batasannya adalah pencahayaan indoor jadi tidak merata
  • Kekurangan kode saat ini adalah variabel seperti awan, haze, dan asap tidak terakomodasi, jadi dapat berbeda dari lanskap luar (seperti yang dikritik banyak komentar HN)
  • Citra satelit real-time bisa mengatasinya sebagian, tetapi karena sulit menjadi sepenuhnya akurat, akhirnya kami mengembangkan sensor sendiri
  • Di pasar sudah ada banyak sensor CCT, namun umumnya hanya mengukur directional + scattered + reflected light dengan batas sekitar 7500K, sementara langit nyata bisa berubah hingga 40.000K
  • Mereka berbagi gambar plot yang menunjukkan bagaimana warna langit berubah berdasarkan waktu dari pengukuran sensor nyata, serta informasi tambahan[gambar] [tautan]

• Menyebut tag HTML meta http-equiv="Refresh" membuatku tertawa

  • Dulu kalau halaman perlu auto refresh, memang tak ada cara lain

  • Aku melihat proyek ini sebagai contoh sempurna formal minimalism

  • Sebenarnya arti http-equiv adalah header HTTP serupa, mengirim header Refresh: 60 juga memberi efek yang sama

  • Nanti kalau tahu fitur frameset, kamu akan makin kaget lagi

  • Terima kasih! Dan maaf, saat aku lahir, idiom setTimeout(() => location.reload(), ...) sudah luas dipakai

• Sebagai pengembang generasi lama yang kurang akrab dengan teknologi web terbaru, aku penasaran mekanisme kerja kombinasi astro/cloudflare/wrangler berikut

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

  • Sepertinya fitur cloudflare dibungkus di Astro untuk memberi latitude/longitude, jadi aku ingin tahu apakah ada proses internal

  • Sudah cari-cari dokumentasi tapi tak dapat jawaban tegas, jadi mohon penjelasan detail

  • Kenapa proses internalnya terlihat tidak ada karena betul-betul berfungsi seolah-olah magic

    • Astro menyediakan adapter untuk berbagai runtime server seperti Vercel, Cloudflare, Netlify, dan sangat plug-and-play
    • Adapter Cloudflare mengekspos berbagai binding ke Astro.locals.runtime, dan di antara itu ada binding cf yang menyimpan berbagai nilai request seperti latitude, longitude, dan lain-lain[tautan1, tautan2]
    • Beberapa binding dimock secara lokal ketika bukan di lingkungan Cloudflare Worker

  • Cloudflare bisa diaktifkan untuk otomatis menambahkan latitude/longitude pengguna (secara kasar berbasis IP atau cara lain) ke HTTP header[tautan]

    • "Transformasi terkelola ini melampirkan informasi kota, negara, benua, latitude, dan longitude pengunjung ke HTTP request header"

• Aku menunggu 20 detik setelah membuka situs sambil berpikir, 'kapan berubah?', lalu sadar rupanya sekarang tengah malam

  • Di malam hari memang jadi layar hitam polos; aku pikir akan lebih baik kalau ada orang yang lebih cerdik yang menambahkan sesuatu

• Aku adalah penulis SunCalc. Aku senang melihat contoh pemakaian kodenya dipakai seperti ini

  • Ngomong-ngomong, suncalc.net lagi error karena token Google Maps API-nya expired[suncalc.net]

    • Kamu terlihat paham teknologi peta, jadi aku kasih saran kecil: pertimbangkan migrasi ke Protomaps[tautan]

  • Entah penulisnya siapa, entah kontributor, karya ini tetap keren; aku sangat suka dan senang melihat demo seperti ini

• Aku sempat refresh halaman, mengaktifkan JS, dan mengulang lagi sampai akhirnya kupikir servernya tidak bisa muncul karena beban berat

  • Setelah baca komentar, baru sadar bahwa layar hitam itu karena di luar memang malam, jadi awalnya sebenarnya jalan dengan baik

• Implementasinya jauh lebih detail dari dugaanku, berbasis paper penelitian[tautan]

• Aku cek di ponsel sambil ditempelkan di jendela; 100% cocok dengan langit nyata saat ini (sedang cerah), jadi aku panggil istri untuk menunjukkan. Aku benar-benar mengaguminya. Selamat!

• Aku pembuat ant.care[tautan], dengan tujuan sinkronisasi langit background ke lingkungan nyata, tapi sejauh ini baru sangat sederhana

  • Suatu saat aku ingin mencoba pendekatan ini juga. Masih ragu apakah semua dikerjakan dengan Rust/WASM, atau cuma inti logiknya dengan Rust lalu sisanya di JS/HTML