frontpage.
newsnewestaskshowjobs

Made with ♥ by @iamnishanth

Open Source @Github

Open in hackernews

Show HN: The current sky at your approximate location, as a CSS gradient

https://sky.dlazaro.ca
250•dlazaro•4h ago
For HTML Day 2025 [1], I made a web service that displays the current sky at your approximate location as a CSS gradient. Colours are simulated on-demand using atmospheric absorption and scattering coefficients. Updates every minute, without the use of client-side JavaScript.

Source code and additional information is available on GitHub: https://github.com/dnlzro/horizon

[1] https://html.energy/html-day/2025/index.html

Comments

stephenlf•3h ago
Fantastic. I’ve always wondered why the sky wasn’t blue around the horizon. Fascinating stuff.
verandaguy•3h ago
There's two main reasons for this:

- First and most impactful: as the earth curves down and away from the observer's horizon, your line of sight goes through a thicker slice of the atmosphere.

Looking straight up you might have 100km of atmosphere until space (the distance is made up here, but I'm using the Kármán line as an arbitrary ruler), but looking out towards the horizon (assuming a perfectly spherical Earth), it's much, much more than that 100km, so the light will scatter off of (and/or be filtered by, depending on angle and time of day) more particles in the atmosphere, affecting the colour of the sky.

- The compounding factor here is if there are environmental factors that boost the particle count in the air, and especially particles that'd stay in lower layers of the atmosphere. Where I am, we've been dealing with wildfire smoke of varying strengths for a few weeks. Today's gentle enough, but it's bad enough that my gradient goes from rgb(115, 160, 207) at the top of the sky to rgb(227, 230, 227) at the horizon (which is shockingly accurate).

throwanem•3h ago
> the little-known meta http-equiv="Refresh" HTML tag

Oh, don't mind me, I'll just be over here in the corner laughing ruefully as my bones crumble to dust: back when I started, if you wanted a page to refresh on its own, this was the only way.

Beautiful work! A splendid example of formal minimalism at its best.

dlazaro•3h ago
Thank you! And umm, not to make you feel ancient, but I think I wasn't even alive yet when `setTimeout(() => location.reload(), ...)` first became widely available.
throwanem•1h ago
Oh, don't worry about it at all, and I don't just mean in my own case. Every generation learns to age graciously or otherwise, partly through experience, and for me it's a regular source of joy to see you young 'uns independently rediscover things I long since quit bothering to remember.
phatskat•41m ago
Honestly it’s kind of cute, I had all but forgotten about http-equiv
skrebbel•42m ago
I can’t wait till they hear about framesets
mintplant•35m ago
Of course, the "http-equiv" means that this tag is supposed to stand in for an equivalent HTTP header, so you could accomplish the same by sending a "Refresh: 60" header :)
throwanem•8m ago
Sure, if you wanted to deal with configuring Apache. Or getting your hosting provider to do that. If you knew to ask, and didn't mind waiting, and your hosting provider knew how...
nnnnico•3h ago
incredible <3 not much else to say
siva7•3h ago
how i missed this small hn posts. thanks
hoppp•3h ago
Seems to work :)
ryandrake•3h ago
Awesome. I remember much earlier in my career I was working on a 3D turn-by-turn navigation software, and one of my tasks was to draw the sky in the background. The more senior guy on the team said, just draw a blue rectangle during the day and a dark gray one at night and call it job done. Of course, I had to do it the hard way, so I looked up the relevant literature on sky rendering based on the environment, latitude, longitude, time of day and so on, which at the time was Preetham[1] ("A Practical Analytic Model for Daylight"), and built a fully realistic sky model for the software. I even added prominent stars based on a hard-coded ephemeris table. It was quite fast, too.

Well, the higher ups of course hated it, they were confused as to why the horizon would get hazy, yellowish, and so on. "Our competitors' skies are blue!" They didn't like "Use your eyes and look outside" as an answer.

Eventually, I was told to scrap it and just draw a blue rectangle :(

All that to say, nice job on the site!

1: https://courses.cs.duke.edu/cps124/fall01/resources/p91-pree...

j_bum•3h ago
Fun (but not fun) story :)
netsharc•3h ago
Not even as an easter egg?

You could've sold it with telling them Vincent Van Gogh's paintings had the location of stars accurately, you were inspired by those paintings to reproduce the sky color accurately.

darknavi•2h ago
A past coworker who worked on Cobalt[1] told me that they spent entirely too much time implementing stars in the sky of the game with some amount of real(ish) star system physics behind them.

I can understand people removing polish things like that if there are usability concerns, but those small things add up to a lot in an end product and are a joy to find and explore.

1: https://en.wikipedia.org/wiki/Cobalt_(video_game)

zarzavat•1h ago
You should have added a duck.
jbverschoor•1h ago
Whipping down the innovator with the stupidity whip. Great management
teaearlgraycold•6m ago
To be honest I don’t think anyone wants that kind of functionality - maybe in the satellite view but not in the vector map.
ianbicking•3h ago
I'm around so much wildfire smoke lately that my sky expectations have changed...

I wonder what it would take to account for weather?

craftkiller•2h ago
That'd be a pretty large introduction of a dependency. The sky can be calculated with just lat/lon and the current date+time. Adding in weather would mean querying some external weather service.
nisten•3h ago
i put my laptop next to the window and it was spot on wtf

what got me the most is opening chrome dev tools and seeing nothing there

nhinck3•3h ago
Opened this up and sat there for a good 20 seconds waiting for something to happen... only to remember it's midnight here.
dlazaro•2h ago
Maybe someone smarter than me could add stars to the night sky, so it's not just black.
mlhpdx•3h ago
Which direction am I looking? Deeper blue to the north.
dlazaro•2h ago
It's always facing the sun (although it doesn't include the sun itself).
i_love_retros•3h ago
Curious why a celebration of HTML needed a full stack javascript framework?
dlazaro•2h ago
A server is needed to calculate the sun's position from latitude + longitude + time, and then render the gradient. I could use HTML templating in some other language/framework, but I used Astro because that's what I'm familiar with and it's very easy to deploy to Cloudflare Pages.
nnnnico•1h ago
it's beautiful. btw, could this be all done in client side js? didnt look at the implementation, probably server is used to resolve location?
wonger_•58m ago
(not author) from the source:

  const { latitude = "0", longitude = "0" } = Astro.locals.runtime.cf || {};
To do it client-side, you would probably have to call some less-reputable IP geolocation service, or settle for navigator.geolocation which has a permission popup
ascorbic•29m ago
Astro is a great way to write HTML
dlazaro•5m ago
I'm sure that's your totally unbiased opinion ;)
djoldman•2h ago
@dlazaro, I believe that style={{backgroundColor: bottom}} is not needed in:

    <body style={{backgroundColor: bottom}}> </body>
is not needed.
dlazaro•2h ago
I actually included that so the tab and status bars are themed on iOS/Safari. Here's someone else's writeup on that: https://medium.com/@evkirkiles/coloring-the-webkit-browser-b...
peterldowns•2h ago
That's a cool thing to know, thanks for sharing. Great job on the sky site!
jhardy54•2h ago
Super neat. Looking forward to checking out your implementation and learning about this!
gdubs•2h ago
Well, that's delightful. Works really well here in the Pacific Northwest :)
esafak•2h ago
More sophisticated than I expected. It relies on a research paper: https://github.com/ebruneton/precomputed_atmospheric_scatter...
101008•2h ago
Put my phone against the window and I had to call over my wife to come to check it: it matches 100% (clear sky right now). It's amazing, congratulations
xattt•2h ago
This would be an awesome background for a smart home dash!
mushufasa•1h ago
would love this to be a desktop background -- linux or macOS
nathandaly•24m ago
I just did some googling and found at least one app to do exactly this on Android. This is now my phone background!!

(I used this, but it does leave a small "please purchase" banner at the top, until you pay: https://play.google.com/store/apps/details?id=com.nuko.livew...)

DonHopkins•1h ago
Why doesn't it respect dark mode??? ;)
8n4vidtmkvmk•44m ago
Wait a few hours
cosmicgadget•1h ago
That is awesome but now I want to check what my SF bros see when they look up.
cgijoe•1h ago
Ooh, how about this as a live desktop wallpaper!
SeanAnderson•52m ago
Oh nice, this is actually something I very specifically wanted for https://ant.care/! I was trying to have the background sky for the ant farm be reflective of the user's current environment, but I didn't do anything more than a naïve approach. Maybe I'll work on adopting your approach at some point :) Still a bit torn on if the whole thing should be Rust/WASM or just the core simulation in Rust and defer as much as possible to JS/HTML.
michelreij•49m ago
Beautiful, thank you!
card_zero•30m ago
Useful, saves me looking at the thing.
mourner•8m ago
Author of Suncalc here — this is exactly the kind of stuff I love to see my code being used in, thanks for sharing!
sheerun•5m ago
Bit darker blues, please!

Mexico to US Livestock Trade halted due to Screwworm spread

https://www.usda.gov/about-usda/news/press-releases/2025/07/09/secretary-rollins-takes-decisive-action-and-shuts-down-us-southern-border-ports-livestock-trade-due
183•burnt-resistor•3h ago•139 comments

Show HN: The current sky at your approximate location, as a CSS gradient

https://sky.dlazaro.ca
250•dlazaro•4h ago•51 comments

Long-term exposure to outdoor air pollution linked to increased risk of dementia

https://www.cam.ac.uk/research/news/long-term-exposure-to-outdoor-air-pollution-linked-to-increased-risk-of-dementia
113•hhs•4h ago•30 comments

OpenFreeMap survived 100k requests per second

https://blog.hyperknot.com/p/openfreemap-survived-100000-requests
189•hyperknot•4h ago•53 comments

Simon Willison's Lethal Trifecta Talk at the Bay Area AI Security Meetup

https://simonwillison.net/2025/Aug/9/bay-area-ai/
65•vismit2000•2h ago•17 comments

Quickshell – building blocks for your desktop

https://quickshell.org/
135•abhinavk•4d ago•23 comments

Empire of the Absurd: A Brief History of the Absurdities of the Soviet Union

https://laurivahtre.ee/empire-of-the-absurd/
33•Maro•1h ago•15 comments

A CT scanner reveals surprises inside the 386 processor's ceramic package

https://www.righto.com/2025/08/intel-386-package-ct-scan.html
14•robin_reala•24m ago•1 comments

ChatGPT Agent – EU Launch

https://help.openai.com/en/articles/11752874-chatgpt-agent
27•Topfi•1h ago•6 comments

Accessibility and the Agentic Web

https://tetralogical.com/blog/2025/08/08/accessibility-and-the-agentic-web/
6•edent•57m ago•3 comments

ESP32 Bus Pirate 0.5 – A Hardware Hacking Tool That Speaks Every Protocol

https://github.com/geo-tp/ESP32-Bus-Pirate
27•geo-tp•2h ago•2 comments

Cordoomceps – replacing an Amiga's brain with Doom

https://mjg59.dreamwidth.org/73001.html
19•naves•3d ago•2 comments

MCP's Disregard for 40 Years of RPC Best Practices

https://julsimon.medium.com/why-mcps-disregard-for-40-years-of-rpc-best-practices-will-burn-enterprises-8ef85ce5bc9b
26•yodon•2h ago•6 comments

Don Knuth on ChatGPT(07 April 2023)

https://cs.stanford.edu/~knuth/chatGPT20.txt
4•b-man•28m ago•1 comments

Jan – Ollama alternative with local UI

https://github.com/menloresearch/jan
109•maxloh•7h ago•58 comments

Testing Bitchat at the music festival

https://primal.net/saunter/testing-bitchat-at-the-music-festival
11•alexcos•3d ago•4 comments

The dead need right to delete their data so they can't be AI-ified, lawyer says

https://www.theregister.com/2025/08/09/dead_need_ai_data_delete_right/
104•rntn•4h ago•69 comments

End-User Programmable AI

https://queue.acm.org/detail.cfm?id=3746223
9•tosh•2h ago•0 comments

Ratfactor's Illustrated Guide to Folding Fitted Sheets

https://ratfactor.com/cards/fitted-sheets
54•zdw•5h ago•8 comments

Car has more than 1.2M km on it – and it's still going strong

https://www.cbc.ca/news/canada/nova-scotia/1985-toyota-tercel-high-mileage-1.7597168
142•Sgt_Apone•3d ago•185 comments

I want everything local – Building my offline AI workspace

https://instavm.io/blog/building-my-offline-ai-workspace
952•mkagenius•23h ago•256 comments

Sandstorm- self-hostable web productivity suite

https://sandstorm.org/
125•nalinidash•11h ago•25 comments

The current state of LLM-driven development

http://blog.tolki.dev/posts/2025/08-07-llms/
3•Signez•1h ago•0 comments

Partially Matching Zig Enums

https://matklad.github.io/2025/08/08/partially-matching-zig-enums.html
127•ingve•8h ago•81 comments

Tribblix – The Retro Illumos Distribution

http://www.tribblix.org/
83•bilegeek•10h ago•23 comments

Breaking the Sorting Barrier for Directed Single-Source Shortest Paths

https://arxiv.org/abs/2504.17033
85•pentestercrab•12h ago•3 comments

A SPARC makes a little fire

https://www.leadedsolder.com/2025/08/05/sparcstation-scsi-termination-fix-magic-smoke.html
83•zdw•4d ago•11 comments

60% of medal of honor recipients are Irish or Irish-American

https://en.wikipedia.org/wiki/List_of_Irish-American_Medal_of_Honor_recipients
60•physarum_salad•2h ago•29 comments

Why Wisconsin's county highways are lettered, not numbered (2019)

https://www.wpr.org/transportation/why-wisconsins-county-roads-are-lettered-not-numbered
31•kaladin-jasnah•3d ago•27 comments

Tor: How a military project became a lifeline for privacy

https://thereader.mitpress.mit.edu/the-secret-history-of-tor-how-a-military-project-became-a-lifeline-for-privacy/
378•anarbadalov•1d ago•179 comments