บริการแสดงท้องฟ้าปัจจุบันตามตำแหน่งโดยประมาณของคุณด้วย CSS Gradient

 (sky.dlazaro.ca)
4 คะแนน โดย GN⁺ 2025-08-10 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • ใช้ ที่อยู่ IP ของผู้ใช้เพื่อประมาณข้อมูลที่ตั้งปัจจุบันของตนเอง
  • แสดงผล สีและบรรยากาศของท้องฟ้า ให้เหมาะกับตำแหน่งนั้นโดยแสดงด้วย CSS gradient
  • สามารถดูผลลัพธ์ได้ทันทีเพียงเข้าถึงเว็บไซต์โดยไม่ต้องมีแผนที่หรือการป้อนข้อมูลที่ซับซ้อน
  • อินเทอร์เฟซที่เรียบง่ายและเบา ทำให้ทุกคนเข้าถึงได้ง่าย
  • ไม่ได้นำข้อมูลสภาพอากาศจริงมาคำนึงถึง โดยกำหนดสีตาม โซนเวลาและตำแหน่งดวงอาทิตย์จากตำแหน่งฐานะของผู้ใช้

ภาพรวมบริการ

  • เมื่อผู้ใช้เข้าถึงเว็บบริการนี้แล้ว ระบบจะประมาณตำแหน่งโดยประมาณปัจจุบัน (ละติจูด, ลองจิจูด) ของผู้ใช้จากที่อยู่ IP
  • ใช้ข้อมูลตำแหน่งที่ประมาณได้และเวลาท้องถิ่นในการคำนวณสีท้องฟ้าที่ขึ้นอยู่กับตำแหน่งและเวลาแห่งดวงอาทิตย์
  • สีของท้องฟ้าที่คำนวณแล้วจะเรนเดอร์เป็นพื้นหลังเว็บไซต์ในรูปแบบ CSS gradient เพื่อแสดงบรรยากาศของท้องฟ้าแบบเรียลไทม์
  • โดยไม่ต้องมีขั้นตอนการป้อนข้อมูลใดๆ เพิ่มเติม เพียงเข้าถึงเว็บไซต์โดยตรงจึงทำงานโดยอัตโนมัติ
โฆษณา

ฟังก์ชันและคุณสมบัติ

  • ไม่ต้องผ่านกระบวนการซับซ้อน เช่น แผนที่, weather API หรือการสมัครบัญชีผู้ใช้
  • การแสดงผลแบบ เรียลไทม์: สีของท้องฟ้าจะเปลี่ยนแปลงอย่างไดนามิกตามการเปลี่ยนแปลงโซนเวลาของตำแหน่งปัจจุบัน
  • ดำเนินการด้วย CSS gradient เท่านั้น จึงมอบประสบการณ์ผู้ใช้ที่รวดเร็วและเบา
  • ไม่ได้รวมข้อมูลสภาพอากาศรุนแรง, เมฆและฝนเข้าไป โดยใช้หลักการทำงานของอัลกอริทึมที่ยึดตาม มุมและเวลาเฉลี่ยของดวงอาทิตย์ เป็นหลัก

วัตถุประสงค์การใช้งานและความสำคัญ

  • เป็นเครื่องมือให้ข้อมูลภาพแบบง่าย ๆ ที่ไม่ซับซ้อนเหมือนแอปพยากรณ์อากาศหรือบริการแผนที่
  • มีศักยภาพสูงในการนำไปใช้เป็น งานกราฟิกบนเว็บ หรือโปรเจกต์ตัวอย่างส่วนบุคคล
  • เนื่องจากจัดหาคำใบ้เชิงภาพเฉพาะท้องถิ่นโดยอัตโนมัติ จึงเหมาะสำหรับการตอบคำถามทันทีว่า “แล้วท้องฟ้าที่นี่ตอนนี้เป็นอย่างไร”

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2025-08-10
ความคิดเห็นจาก Hacker News

  • ตอนที่ต้นเริ่มต้นอาชีพ ผมเคยทำงานพัฒนาซอฟต์แวร์นำทางแบบ 3D turn-by-turn ตอนหนึ่งและดูแลงานวาดท้องฟ้า

    • หัวหน้าบอกว่า “พอแบ่งเป็นสี่เหลี่ยมสีน้ำเงินตอนกลางวัน กับสี่เหลี่ยมสีเทาเข้มตอนกลางคืนก็จบ” แต่ผมอยากเห็นท้องฟ้าจริงที่เปลี่ยนตามสภาพแวดล้อม ละติจูด ลองจิจูด และเวลา จึงอิงงานวิจัยของ Preetham[ลิงก์] ทำโมเดลท้องฟ้าที่ยิ่งสมจริง

    • กลุ่มดาวเป็นตารางดาราศาสตร์แบบ hardcode และความเร็วในการประมวลผลก็ถือว่าดีพอ

    • แต่ชั้นบนกลับตกใจกับเอฟเฟกต์สมจริง เช่น ขอบฟ้าหม่นและมีโทนเหลือง และไม่พอใจกับงานผม “ท้องฟ้าของคู่แข่งเป็นสีน้ำเงิน” คำตอบ “ไปดูข้างนอกหน่อยสิ” ของผมก็ไม่ผ่าน

    • สุดท้าย ผมจึงลบทุกอย่างออกเหลือแค่มุมสี่เหลี่ยมสีน้ำเงิน

    • ประสบการณ์แบบนี้ทำให้ผมชอบไซต์แบบนี้มากขึ้นเมื่อเห็นมัน

    • มันทำให้ได้ตระหนักถึงความสำคัญของสเปกและการออกแบบมากขึ้น

      • สิ่งที่เข้าใจได้ทันทีมีความสำคัญ และรายละเอียดทางภาพมากเกินไปก็ยิ่งสร้างความสับสน
      • ถ้าท้องฟ้าดูไม่ใสสีน้ำเงินแบบตรง ๆ แต่ดูหม่นจาง ๆ ก็อาจสับสนว่ามันคือท้องฟ้าหรือหน้าเว็บที่ยังโหลดอยู่ ส่วนดาวก็เช่นกัน กลางคืนก็แทบไม่มีประโยชน์เชิงใช้งาน
      • เอฟเฟกต์สมจริงนี้เหมาะกับมุมมองดาวเคราะห์จริงแบบ Google Earth มากพอเหมาะ แต่ถ้าเป็นวิวสำหรับระบบนำทาง ความสำคัญสูงสุดคือความเรียบง่ายและความชัดเจน ความสมจริงรองลงมา

    • รู้เรื่องว่าเดิมเคยมีคนที่เคยทำงานด้วยกันใช้เวลามากเกินเหตุไปกับการทำ star system แบบ physics-based ในเกม Cobalt[ลิงก์]

      • หากมันก่อให้เกิดปัญหาด้าน usability ก็สามารถตัดออกได้ช่วงท้ายแน่นอน แต่ผมคิดว่าส่วนเล็ก ๆ พวกนี้สะสมกันแล้วช่วยยกระดับความสมบูรณ์ของผลงาน และสร้างความเพลิดเพลินให้ผู้ใช้ตอนสำรวจ

    • ด้วยมุมมองนี้ การเขียนโปรแกรมตอนเป็นงานอดิเรกอาจสนุกกว่าในฐานะอาชีพ

      • บางทีได้โอกาสทำของเท่ ๆ ในบริษัท แต่โดยทั่วไปมันผ่านได้ก็ต่อเมื่อ “คนบนกล่าวว่ามีงานวิจัยว่าการมีท้องฟ้าสมจริงยกระดับตัวชี้วัด OKR ได้ 0.1%”
      • อย่างไรก็ตามก็ยังมีพื้นที่เฉพาะที่ได้ทำสิ่งที่สนุกเสมอ นี่เป็นเหตุผลหนึ่งที่อุตสาหกรรมเกมถึงจ่ายไม่คุ้มกับความหลงใหลและเคร่งเครียดมาก

    • การที่ผู้บริหารมองข้ามความคิดสร้างสรรค์ของคนสร้างสรรค์เป็นภาพตัวอย่างคมชัดของการบริหารแบบไม่สมเหตุสมผล

    • อย่างน้อยก็น่าจะใส่เป็น Easter egg ได้บ้าง

      • ถ้าบอกว่าภาพของ Vincent Van Gogh ตรงพิกัดกลุ่มดาวจริง ๆ และท้าทายการจำลองเฉดสีท้องฟ้าจากแรงบันดาลใจนั้นได้ ก็น่าจะน่าสนใจกว่าครับ

  • เรากำลังปล่อยเซ็นเซอร์สำหรับติดตั้งด้านในหน้าต่างอยู่ เซ็นเซอร์นี้วัดสีท้องฟ้าด้วยมุมคอนเล็ก ๆ แล้วส่งผลลัพธ์ไปที่ skylight และ window fixture ภายในเพื่อจำลองแสงท้องฟ้าภายนอกภายในห้องให้ใกล้เคียงมากที่สุด[innerscene.com]

    • แม้ทำผ่านคอมพิวเตอร์จอได้ แต่เพราะใช้ RGB light ไม่ได้ใช้ full spectrum จึงมีขีดจำกัดที่แสงภายในไม่ค่อยสม่ำเสมอ
    • จุดอ่อนของโค้ดปัจจุบันคือยังไม่ได้รวมตัวแปรอย่างเมฆ หมอก ควัน ฯลฯ ไว้ในแบบจำลอง จึงอาจต่างกับทิวทัศน์จริงได้ (HN หลายคอมเมนต์ชี้ไว้)
    • ใช้ภาพดาวเทียมเรียลไทม์ช่วยเสริมได้บางส่วน แต่ทำให้แม่นยำได้เต็มที่ยาก ดังนั้นเราจึงพัฒนาเซ็นเซอร์เองในที่สุด
    • ตลาดมีเซ็นเซอร์ CCT อยู่แล้วหลายรุ่น แต่ปกติจะวัดได้เฉพาะทิศทาง + การกระเจิง + แสงสะท้อน โดยขีดจำกัดแถว ๆ 7,500K ในขณะที่ท้องฟ้าจริงสลับไปได้ถึง 40,000K
    • เขาแชร์แผนภาพที่แสดงการเปลี่ยนสีท้องฟ้าตามช่วงเวลา จากค่าที่วัดได้จริง และข้อมูลเพิ่มเติม[ลิงก์] [ภาพ]

  • เห็นใครพูดถึงแท็ก HTML meta http-equiv="Refresh" แล้วก็หันมาขำ

    • สมัยก่อนถ้าต้องการ auto refresh หน้าเว็บ นี่แทบเป็นทางเดียว
    • มองว่าโครงการนี้เป็นตัวอย่างที่ดีของ formal minimalism
    • โดยจริง ๆ http-equiv มีหน้าที่เหมือน header ของ HTTP เดิม ๆ และการส่ง header Refresh: 60 ก็ให้ผลเช่นเดียวกัน
    • ถ้าได้รู้จักฟังก์ชัน frameset คงแปลกใจกว่านี้อีก
    • ขอบคุณครับ และขอโทษด้วยนะ แต่สมัยที่ผมเกิดมานี้ setTimeout(() => location.reload(), ...) ก็ใช้กันกว้างแล้ว

  • ในฐานะนักพัฒนารุ่นเก่าที่ไม่ค่อยทันเว็บเทคโนโลยีล่าสุด ผมอยากรู้กลไกที่ทำให้โค้ดนี้ใช้งานได้ในชุด astro/cloudflare/wrangler

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

    • ดูเหมือน Cloudflare จะถูกหุ้มเข้าไปใน Astro ให้ป้อนไปเป็น latitude/longitude แล้ว แต่ไม่แน่ใจว่ามีการประมวลผลภายในอะไรอีก

    • ผมหาคู่มือมาแล้วแต่ยังไม่พบคำตอบชัด ๆ ขอคำอธิบายให้ละเอียดหน่อย

    • เหตุผลที่ดูเหมือนไม่มีการประมวลผลแยกชั้นคือมันทำงานราวกับเวทมนตร์จริง ๆ

      • Astro มี adapter สำหรับหลาย server runtime เช่น Vercel, Cloudflare, Netlify ฯลฯ ใช้ได้แบบ plug-and-play
      • adapter ของ Cloudflare จะเปิดเผย binding ต่าง ๆ ใน Astro.locals.runtime และใน binding ชื่อ cf จะมีค่านอกเหนือจากค่าคำขอ เช่น ละติจูด ลองจิจูดด้วย[ลิงก์ 1, ลิงก์ 2]
      • binding บางตัวถูก mock ใน local ตอนไม่ใช่สภาพแวดล้อม Cloudflare Worker

    • Cloudflare สามารถเปิดฟังก์ชันเพื่อแนบละติจูด/ลองจิจูดของผู้ใช้ (โดยประมาณจาก IP เป็นต้น) ลงใน HTTP header โดยอัตโนมัติได้[ลิงก์]

      • “การ transform แบบ managed นี้จะแนบข้อมูลเมือง ประเทศ ทวีป ละติจูด และลองจิจูดของผู้เยี่ยมชมลงใน request headers”

  • เปิดไซต์ไว้ 20 วินาทีเพื่อรอว่า ‘เมื่อไหร่จะเปลี่ยน’ แล้วนึกได้ชั่ววูบว่าตอนนี้เป็นเที่ยงคืนแล้ว

    • ตอนกลางคืนมันแค่หน้าแช่ดำ ๆ เลย แปลกใจว่าถ้ามีใครเก่ง ๆ เติมเพิ่มสักนิดคงจะดี

  • ผมเป็นผู้เขียน SunCalc พอเห็นว่ามีตัวอย่างการใช้โค้ดแบบนี้ก็รู้สึกยินดีมาก

    • โดยเฉพาะตัวเองว่า suncalc.net ตอนนี้มีปัญหา error เพราะ Google Maps API token หมดอายุแล้ว[suncalc.net]
      • คุณน่าจะรู้เรื่องเทคโนโลยีแผนที่ค่อนข้างดี เลยขอแนะนำเล็กน้อยพิจารณาย้ายไปใช้ Protomaps[ลิงก์]
    • ไม่ว่าจะเป็นผู้เขียนหรือผู้มีส่วนร่วม งานนี้ยอดเยี่ยมและน่ารักมาก ผมชอบมากและสนุกทุกครั้งที่เห็นเดโม

  • หน้าเว็บรีโหลด เปิด JS แล้วรีโหลดซ้ำ ๆ จนคิดไปเองว่าเซิร์ฟเวอร์คงล่มเพราะพุ่งโหลดเกิน

    • พออ่านคอมเมนต์แล้วจึงรู้ว่าหน้าจอดำเพราะข้างนอกเป็นกลางคืนในความเป็นจริง สุดท้ายตอนแรกมันทำงานปกติอยู่แล้ว

  • ลึกและละเอียดกว่าที่คิดมาก ใช้อยู่บนงานวิจัย[ลิงก์]

  • ผมยกโทรศัพท์มาคิดดูที่หน้าต่างแล้วเทียบกับท้องฟ้าจริงปัจจุบัน (ตอนนั้นท้องฟ้าแจ่มใส) ได้ผลตรงกันถึง 100% จนเรียกภรรยามาดูด้วย รู้สึกว่ามันสุดยอดมาก และยินดีด้วยครับ

  • ผมเป็นคนทำ ant.care[ลิงก์] เป้าหมายคือซิงก์ background sky ให้ตรงกับสภาพแวดล้อมจริง แต่ตอนนี้ยังทำได้แบบพื้นฐานมาก

    • วันหนึ่งอยากลองใช้วิธีนี้ดูอีกทางหนึ่ง ว่ายังจะทำทั้งหมดด้วย Rust/WASM หรือทำเฉพาะแกนหลักเป็น Rust แล้วปล่อยให้ JS/HTML จัดการส่วนอื่นอยู่