आपके अनुमानित स्थान के आधार पर वर्तमान आकाश को CSS Gradient में दिखाने वाली सेवा

• उपयोगकर्ता के IP पते का उपयोग करके वर्तमान स्थान का अनुमान लगाया जाता है
• उस स्थान के अनुसार आकाश के रंग और माहौल को CSS Gradient के रूप में विजुअलाइज़ करके दिखाया जाता है
• किसी अलग Map या जटिल इनपुट की जरूरत बिना ही सिर्फ वेबसाइट खोलकर तुरंत परिणाम देखना संभव होता है
• इंटरफेस सरल और हल्का होने के कारण कोई भी आसानी से इसे इस्तेमाल कर सकता है
• वास्तविक मौसम जानकारी इसमें शामिल नहीं की गई है, यह स्थान-आधारित टाइमज़ोन और सूर्य की स्थिति को आधार बनाकर रंग तय करता है

---

सेवा का अवलोकन

• यह वेबसाइट सेवा जब उपयोगकर्ता इसमें एक्सेस करता/करती है, तो IP address से अनुमानित वर्तमान स्थान (latitude, longitude) तय करती है
• अनुमानित स्थान और स्थानीय समय का उपयोग करके, सूर्य की स्थिति और समय क्षेत्र के आधार पर आकाश के रंगों की गणना की जाती है
• गणना किए गए रंगों को CSS Gradient फ़ॉर्मेट में वेबसाइट के बैकग्राउंड के रूप में render करके, real-time में आकाश का मूड दिखाया जाता है
• किसी अलग डेटा इनपुट की प्रक्रिया के बिना, सिर्फ वेबसाइट पर आने पर यह अपने-आप काम करने लगती है

फीचर्स और विशेषताएँ

• Map, मौसम API और account sign-up जैसी जटिल प्रक्रियाएँ मौजूद नहीं हैं
• रीयलटाइम विज़ुअलाइज़ेशन लागू: वर्तमान स्थान के समय क्षेत्र बदलाव के साथ आकाश का रंग गतिशील रूप से बदलता है
• सिर्फ CSS Gradient पर आधारित होने से बहुत तेज़ और हल्का user experience मिलता है
• वास्तविक गंभीर मौसम डेटा, cloud और बारिश आदि को इसमें शामिल नहीं किया जाता, बुनियादी तौर पर सूर्य कोण और समय-केंद्रित algorithm इस्तेमाल की जाती है

उपयोग उद्देश्य और महत्त्व

• यह मौसम ऐप या map सेवा की तरह जटिल नहीं, बल्कि सरल दृश्यात्मक जानकारी देने वाला टूल है
• वेब-आधारित आर्टवर्क या व्यक्तिगत demo project के लिए भी इसकी उपयोगिता ऊँची है
• लोकलाइज़्ड विज़ुअल संकेत अपने-आप उपलब्ध कराता है, इसलिए ‘यहाँ अभी आसमान कैसा होगा?’ जैसी जिज्ञासा जल्दी दूर करने के लिए उपयुक्त है

[GN⁺]

Hacker News टिप्पणियाँ

• जब मैं करियर की शुरुआत में 3D turn-by-turn navigation software बना रहा था, मुझे याद है कि आकाश की रेंडरिंग का काम मेरे पास था

  • एक सीनियर ने कहा था, “दिन में बस नीला और रात में डार्क-ग्रे स्क्वायर डाल दो, बस काम खत्म” लेकिन मैं वास्तविक sky को environment, latitude, longitude और समय के हिसाब से बदलते हुए सही तरीके से दिखाना चाहता था, इसलिए मैंने Preetham पेपर [लिंक] देखकर realistic sky model implement किया

  • constellations के लिए मैंने hardcoded astronomy table use किया था और performance भी काफी अच्छी थी

  • लेकिन ऊपर के लोगों को horizon का धुंधला/पीला दिखना जैसी वास्तविकता से जुड़े effects देखकर अजीब लगा; उनका मानना था कि “competitor का sky तो नीला है,” और मेरा काम उन्हें पसंद नहीं आया, मेरा जवाब “बस बाहर जाकर देखो” भी काम नहीं आया

  • अंत में मैंने सब हटाकर सिर्फ़ नीला स्क्वायर छोड़ दिया

  • शायद इसी वजह से ऐसे साइट को देखकर सच में लगता है कि कितना खूबसूरत है

  • इसी अनुभव से मैंने spec और design की अहमियत समझी

    • तुरंत समझ आने वाली conventions बहुत important होती हैं, ज़्यादा visual detail अक्सर उल्टा confuse कर देती है

    • अगर sky नीला न होकर धुंधला या फीका पीला दिखे तो यूज़र को शक हो सकता है कि यह sky है या अभी page loading में है; stars के साथ भी रात में functional purpose practically कोई नहीं होता

    • ये realistic effects Google Earth जैसे वास्तविक planet view में ठीक बैठते हैं। वास्तविक दृश्य में बनाना मज़ेदार है, लेकिन navigation view के लिए simplicity और clarity ही सबसे मायने रखती है। Practicality को realism से ज्यादा प्राथमिकता देनी चाहिए

    • पहले मैंने साथ काम करने वाले किसी व्यक्ति को Cobalt [लिंक] गेम में star system को physics-based तरीके से implement करने में बहुत समय खर्च करते हुए सुना

      • अगर usability में issue आए तो आख़िरी चरण में ऐसे फीचर्स हटाए जा सकते हैं, पर ऐसे छोटे-छोटे additions मिलकर product की completeness बढ़ाते हैं और उपयोगकर्ता के लिए exploration का fun बढ़ाते हैं

    • इस केस में मुझे programming job के रूप में अधिक बोरिंग लगती है बनिस्बत hobby के

      • कभी-कभी कंपनी में ऐसा कुछ cool करने का मौका मिल जाता है, लेकिन आमतौर पर केवल वही चीज़ पास होती है जब कोई research बताती है कि “realistic sky ने OKR metric को 0.1% बढ़ाया”
      • लेकिन ऐसी niches भी हैं जहाँ fun काम होता है, शायद इसी वजह से gaming industry में passion के बावजूद low-paid और overworked environment बना रहता है

    • मैनेजमेंट का innovators की creativity को ignore करना गलत प्रबंधन का क्लासिक उदाहरण है

    • कम से कम इसे Easter egg के रूप में तो जोड़ा जा सकता था

      • यदि बताते कि Vincent Van Gogh की paintings में actual star positions को भी अच्छी तरह मैप किया गया था, और उसी inspiration से वास्तविक sky colors replicate करने की कोशिश की गई, तो यह बेहतर लगता

• हम एक sensor लॉन्च कर रहे हैं जो खिड़की के अंदर install होता है। यह sensor sky का रंग छोटे cone angle से मापकर परिणाम Skylight और इनडोर window fixture को भेजता है ताकि अंदर वही sky light recreate की जा सके [innerscene.com]

  • इसे computer monitor पर implement किया जा सकता है, लेकिन RGB light source की वजह से full spectrum नहीं मिल पाता और indoor light consistent नहीं बनती
  • दूसरा issue ये है कि current code में cloud, fog, smoke जैसी variables नहीं हैं, इसलिए वास्तविक बाहर के दृश्य से बदलाव हो सकता है (कई HN comments ने यही point किया)
  • real-time satellite image से कुछ हद तक सुधार हो सकता है, लेकिन पूर्ण सटीकता कठिन थी, इसलिए अंततः हमने अपना sensor बना लिया
  • मार्केट में पहले से कई CCT sensors मौजूद हैं, लेकिन आमतौर पर वे सिर्फ़ directionality + scattering + reflected light ही measure करते हैं और सीमा लगभग 7500K तक है, जबकि वास्तविक आकाश लगभग 40,000K तक बदलता है
  • वास्तविक सेंसर माप से अलग-अलग समय पर sky color कैसे बदलता है, यह दिखाने वाला plot image भी share किया [छवि] और अतिरिक्त जानकारी भी [लिंक]

• जब किसी ने meta http-equiv="Refresh" HTML टैग का उल्लेख किया, तो हँसी आ गई

  • पुराने समय में page auto-refresh चाहिए होता था तो यही तरीका था

  • यह project मुझे formal minimalism का शानदार उदाहरण लगता है

  • सच में http-equiv का मतलब भी यही है कि यह समान HTTP header की तरह काम करता है; Refresh: 60 header भेजने पर भी वही effect मिलता है

  • frameset (फ्रेमसेट) feature दिखे तो शायद और भी ज़्यादा हैरानी होगी

  • Thanks! और sorry, लेकिन जब मैं पैदा हुआ था तब भी setTimeout(() => location.reload(), ...) पहले से ही widely used था

• मैं आज के नए web tech से अनजान एक old generation developer हूँ, इसलिए astro/cloudflare/wrangler के साथ नीचे दिया code कैसे काम करता है, यह समझना चाहता हूँ

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

  • लगता है Cloudflare की functionality astro में wrap होकर latitude/longitude दे रही है; अंदर किस तरह की processing होती है, यह जानना चाहता हूँ

  • docs खोजीं लेकिन clear जवाब नहीं मिला, तो थोड़ा विस्तार से समझाइए

  • अलग से कोई internal process दिख न पाने का कारण शायद यही है क्योंकि यह almost जादू जैसा लगता है

    • Astro कई server runtimes के लिए adapters देता है—Vercel, Cloudflare, Netlify आदि—और ये सरल प्लग-एंड-प्ले स्टाइल में काम करते हैं
    • Cloudflare adapter Astro.locals.runtime में कई bindings expose करता है, और इनमें से cf binding में request से संबंधित कई values (जैसे latitude और longitude) होते हैं [लिंक1, लिंक2]
    • कुछ bindings Cloudflare-Worker environment न होने पर local में mock की जाती हैं

  • Cloudflare पर user की latitude/longitude (लगभग IP-based या अन्य तरीके से) को HTTP headers में auto-जोड़ने की सुविधा वाले managed transform को enable किया जा सकता है [लिंक]

    • “यह managed transform visitor के city, country, continent, latitude और longitude को HTTP request headers में जोड़ देता है"

• मैंने site खुलने के बाद करीब 20 सेकंड तक “कब बदलता है” इसलिए इंतज़ार किया, फिर अचानक याद आया कि अभी अभी midnight है

  • रात में बस काला स्क्रीन आता है; काश कोई थोड़ी smarter logic जोड़ देता

• मैं SunCalc का लेखक हूँ। मेरा code ऐसे उपयोग में देखकर सच में खुशी होती है

  • वैसे अभी suncalc.net पर Google Maps API token expire होने से error आ रहा है [suncalc.net]

    • तुम्हें map tech का अच्छा knowledge है, इसलिए एक छोटा सुझाव: Protomaps [लिंक] पर migration पर विचार कर सकते हैं

  • लेखक हों या contributor, काम सच में शानदार है और ऐसा demo देखकर मज़ा आता है

• मैंने page refresh किया, JS enable किया, फिर बार-बार refresh करके सोचा कि शायद server overloaded होकर नहीं खुल रहा

  • comments पढ़ने के बाद ही समझ आया कि काला स्क्रीन इसलिए था क्योंकि बाहर रात थी; यानी शुरू से ही सही चल रहा था

• अपेक्षा से कहीं ज्यादा refined implementation है। यह research paper [लिंक] पर आधारित है

• मैंने मोबाइल फोन को खिड़की पर रखकर टेस्ट किया; अभी का आसमान साफ होने के कारण 100% match मिला। अपनी पत्नी को भी बुलाकर दिखाया और बताया। सच में शानदार काम, बधाई हो

• मैं ant.care [लिंक] बनाने वाला हूँ। लक्ष्य था background sky को वास्तविक environment से sync करना, लेकिन अभी हमने इसे अभी तक बहुत simple तरीके से ही implement किया है

  • शायद कभी इस तरीके को भी आज़माना चाहूँगा। अभी सोच रहा हूँ कि पूरा काम Rust/WASM में करूँ या सिर्फ़ core Rust में और बाकी JS/HTML में छोड़ दूँ