Dịch vụ hiển thị bầu trời hiện tại tại vị trí gần đúng của bạn bằng CSS gradient

 (sky.dlazaro.ca)
4 điểm bởi GN⁺ 2025-08-10 | 1 bình luận | Chia sẻ qua WhatsApp
  • Sử dụng địa chỉ IP của người dùng để ước tính thông tin vị trí hiện tại
  • Trực quan hóa và biểu diễn dưới dạng CSS gradient với màu sắc và bầu không khí bầu trời phù hợp với vị trí tương ứng
  • Có thể kiểm tra kết quả ngay lập tức chỉ bằng việc truy cập website, mà không cần bản đồ riêng hay thao tác nhập liệu phức tạp
  • Vì giao diện đơn giản và nhẹ nên ai cũng có thể tiếp cận dễ dàng
  • Không phản ánh thông tin thời tiết thực tế; màu sắc được quyết định dựa trên múi giờ theo vị trí và vị trí của mặt trời

Tổng quan dịch vụ

  • Dịch vụ web này, khi người dùng truy cập, ước tính vị trí gần đúng hiện tại của người dùng (vĩ độ, kinh độ) từ địa chỉ IP
  • Dựa trên thông tin vị trí ước tính và thời gian địa phương, tính toán màu sắc bầu trời theo vị trí Mặt Trời và múi giờ
  • Màu bầu trời đã tính được được render thành nền trang web theo định dạng CSS gradient, để hiển thị không khí bầu trời theo thời gian thực
  • Không cần bất kỳ quá trình nhập liệu nào; chỉ cần truy cập website là hoạt động tự động
Quảng cáo

Tính năng và đặc điểm

  • Không có các bước phức tạp như bản đồ, API thời tiết hay đăng ký tài khoản
  • Trực quan hóa thời gian thực: màu bầu trời thay đổi linh hoạt theo biến thiên múi giờ theo thời điểm tại vị trí hiện tại
  • CSS gradient là phương thức duy nhất để triển khai, mang lại trải nghiệm người dùng rất nhanh và nhẹ
  • Không phản ánh thông tin thời tiết thực tế như mây hay mưa; về cơ bản áp dụng thuật toán tập trung vào góc mặt trời và thời gian

Mục đích sử dụng và ý nghĩa

  • Là một công cụ cung cấp thông tin trực quan đơn giản không phức tạp như ứng dụng thời tiết hay dịch vụ bản đồ
  • Có giá trị ứng dụng cao cả như một tác phẩm nghệ thuật web hoặc dự án demo cá nhân
  • Cung cấp gợi ý trực quan được địa phương hóa tự động, phù hợp để nhanh chóng giải quyết sự tò mò về việc “bây giờ bầu trời ở đây ra sao”

Bài viết liên quan

1 bình luận

 
GN⁺ 2025-08-10
Ý kiến Hacker News

  • Tôi còn nhớ hồi đầu sự nghiệp, khi làm phần mềm định vị 3D turn-by-turn, tôi từng được giao việc vẽ bầu trời.

    • Một người sếp nói rằng “ban ngày chỉ cần xử lý thành hình vuông xanh, ban đêm thành hình vuông xám đậm là xong”, nhưng tôi muốn nhìn thấy bầu trời thực sự thay đổi theo môi trường, vĩ độ, kinh độ và thời gian nên đã tham chiếu bài báo của Preetham [liên kết] để triển khai mô hình bầu trời chân thực.

    • Các chòm sao được lấy từ một bảng thiên văn hardcode, và hiệu năng xử lý cũng khá tốt.

    • Nhưng cấp trên lại hơi hoang mang trước các hiệu ứng thực tế như chân trời mờ và hơi vàng, cho rằng “trời của đối thủ lại xanh” và không hài lòng với sản phẩm của tôi; câu trả lời “cứ đi nhìn ngoài trời” của tôi lại không đi vào đâu cả.

    • Cuối cùng tôi xóa gần như mọi thứ và chỉ giữ lại hình vuông màu xanh.

    • Nhờ trải nghiệm đó, khi nhìn các trang như vậy tôi thấy nó thật đẹp.

    • Từ đó tôi hiểu rõ tầm quan trọng của spec và thiết kế.

      • Các quy ước cần dễ hiểu ngay lập tức; quá nhiều chi tiết trực quan đôi khi chỉ làm tăng sự lẫn lộn.
      • Nếu bầu trời không còn xanh mà lại mờ hoặc lờ mờ, người dùng có thể bối rối không biết đó có phải bầu trời hay trang web vẫn đang tải. Đêm đến thì như vậy cũng không có mục đích chức năng.
      • Những hiệu ứng chân thực kiểu này phù hợp với góc nhìn hành tinh thật như Google Earth. Đúng là thú vị khi làm nó, nhưng với góc nhìn cho mục đích điều hướng thì điều quan trọng nhất vẫn là sự đơn giản và rõ ràng. Tính thực dụng ưu tiên hơn tính thực tế.

    • Trước đây tôi có người làm cùng cũng kể rằng họ đã bỏ quá nhiều thời gian để cài đặt hệ thống sao dựa trên vật lý trong trò chơi Cobalt [liên kết].

      • Nếu vấn đề nằm ở khả năng sử dụng thì có thể cắt bớt mấy thứ này khi gần chốt, nhưng tôi nghĩ chính những chi tiết vụn vặt này cộng dồn lại sẽ nâng độ hoàn thiện và khiến người dùng thấy thú vị khi khám phá.

    • Trong trường hợp này, lập trình lại có vẻ chán hơn khi làm nghề so với khi làm để vui.

      • Thỉnh thoảng có cơ hội làm được những thứ như vậy trong công ty, nhưng về cơ bản chỉ khi trên đó ra được nghiên cứu kiểu “bầu trời thực tế giúp tăng OKR lên 0,1%” thì mới được duyệt.
      • Tuy nhiên vẫn luôn có những ngách luôn có chỗ cho thứ thú vị, nên ngành game luôn bị gắn với mức lương thấp, công việc quá tải bất chấp niềm đam mê lớn.

    • Hình ảnh này là ví dụ điển hình về ban giám đốc coi thường sự sáng tạo của người đổi mới.

    • Tối thiểu thì đâu phải họ đã có thể chèn cái này làm Easter egg rồi.

      • Nếu họ nói rằng các bức tranh của Vincent Van Gogh đã phản chiếu chính xác vị trí các chòm sao, rồi từ cảm hứng đó cố gắng tái hiện màu trời chân thực hơn, thì sẽ hay hơn.

  • Chúng tôi đang phát hành cảm biến lắp ở mặt trong cửa sổ. Nó đo màu bầu trời theo một góc nón nhỏ, rồi truyền dữ liệu đó đến skylight và window fixture trong nhà để tái tạo cùng sắc trời trong nội thất [innerscene.com].

    • Có thể làm bằng màn hình máy tính, nhưng do dùng ánh sáng RGB thay vì toàn dải quang phổ nên ánh sáng trong nhà không đều là hạn chế rõ rệt.
    • Ngoài ra, trong mã hiện tại không có biến như mây, sương mù, khói nên có thể khác với thực tế bên ngoài (điểm này nhiều comment trên HN đã chỉ ra).
    • Có thể bổ sung một phần bằng ảnh vệ tinh thời gian thực, nhưng vì không thể hoàn toàn chính xác nên chúng tôi đích thân phát triển cảm biến riêng.
    • Trên thị trường đã có nhiều cảm biến CCT, nhưng thường chỉ đo được hướng + tán xạ + ánh sáng phản xạ và chỉ tới khoảng 7500K, trong khi bầu trời thật có thể lên đến 40.000K.
    • Họ chia sẻ hình ảnh plot cho thấy bầu trời thay đổi theo thời gian trong ngày từ dữ liệu đo của cảm biến thực [hình ảnh], cùng thông tin bổ sung [liên kết].

  • Khi thấy nhắc tới thẻ HTML meta http-equiv="Refresh", tôi bật cười.

    • Trước đây, nếu cần tự động refresh trang, đây gần như là cách duy nhất.

    • Dự án này giống như một ví dụ xuất sắc của formal minimalism.

    • Thật ra ý nghĩa của http-equiv là header HTTP tương đương, nên gửi thêm header Refresh: 60 cũng cho hiệu ứng tương tự.

    • Sẽ càng bất ngờ nếu bạn tìm hiểu về frameset.

    • Cảm ơn bạn! Xin lỗi, nhưng khi tôi sinh ra thì setTimeout(() => location.reload(), ...) đã rất phổ biến rồi.

  • Với tư cách là một developer “thế hệ trước” không biết nhiều web kỹ thuật mới, tôi tò mò về cách đoạn code dưới đây hoạt động với combo astro/cloudflare/wrangler:

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

    • Có vẻ Cloudflare được wrap vào astro để cung cấp latitude/longitude như vậy, nên tôi muốn biết có xử lý bên trong nào không.

    • Tôi cũng đã đọc docs rồi nhưng không thấy câu trả lời rõ ràng, nên rất mong được giải thích kỹ.

    • Nguyên nhân không thấy xử lý nội bộ là vì nó hoạt động gần như giống “ma thuật”.

      • Astro cung cấp nhiều adapter cho server runtime như Vercel, Cloudflare, Netlify... theo kiểu plug-and-play.
      • Adapter Cloudflare expose nhiều binding vào Astro.locals.runtime, trong đó binding cf chứa nhiều request values như latitude, longitude, ... [liên kết1, liên kết2]
      • Một số binding sẽ được mock ở môi trường local khi không phải trong Cloudflare-Worker.

    • Trên Cloudflare có thể bật tính năng tự động thêm latitude/longitude của người dùng vào header HTTP của request dựa trên IP hoặc các phương thức khác [liên kết].

      • “Managed transform này sẽ đính kèm thông tin thành phố, quốc gia, lục địa, latitude, longitude của người truy cập vào HTTP request headers”.

  • Tôi đã mở trang và chờ 20 giây để xem “nó đổi khi nào”, rồi đột nhiên nhận ra giờ đã sang nửa đêm.

    • Ban đêm chỉ xuất hiện màn hình đen, nên cứ nghĩ gì đó thì muốn có người khôn ngoan thêm vào cho hay hơn.

  • Tôi là tác giả SunCalc. Nhìn thấy ví dụ sử dụng code của mình như thế này khiến tôi thật sự vui.

    • Lưu ý là suncalc.net đang lỗi vì token Google Maps API hết hạn [suncalc.net]

      • Bạn có vẻ quen công nghệ bản đồ, nên tôi gợi ý nhẹ nhàng cân nhắc migrate sang Protomaps [liên kết].

    • Tác giả? Contributor? Dù sao đi nữa, đây là một tác phẩm đẹp và tôi thực sự thích; thấy các demo kiểu này tôi thấy vui.

  • Tôi cứ refresh lại, bật JS rồi refresh liên tục, đến mức tưởng rằng do server quá tải nên nó không hiển thị.

    • Đọc comment mới hiểu màn hình đen vì ngoài trời đã tối rồi, nên hóa ra nó làm việc ổn từ đầu.

  • Việc triển khai tinh vi hơn tôi nghĩ. Dựa trên paper nghiên cứu [liên kết].

  • Tôi áp vào cửa kính bằng điện thoại và thấy khớp 100% với bầu trời ngoài trời thật (hiện tại trong lành), rồi gọi vợ tới để khoe. Thật tuyệt vời, tôi nghĩ vậy. Xin chúc mừng.

  • Tôi làm ant.care [liên kết]; mục tiêu là đồng bộ bầu trời nền với môi trường thực tế, nhưng giờ mới chỉ làm cực kỳ đơn giản.

    • Một ngày nào đó muốn áp dụng cách này vào đây. Vẫn đang băn khoăn nên làm toàn bộ bằng Rust/WASM hay làm phần lõi bằng Rust rồi phần còn lại cho JS/HTML.