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 :(
This is why specifications are important, and why design is important.
The reality is that we have certain conventions that are immediately understandable, and that too much visual complexity results in confusion rather than clarity.
If the sky is hazy white when I expect it to be blue, I'm confused as to whether it's the sky or if the map is still loading. It's adding cognitive complexity for no reason. Stars similarly serve no functional purpose at night.
What you built sounds great for an actual planetary view like Google Earth. And it sounds fun to build. But it's an anti-feature for a navigation view. When you're navigating, simplicity and clarity are paramount. Not realism.
Though sometimes the higher ups might not be the same as (or understand) the actual audience.
In this case the higher ups may have been confused due to, say, looking at the app while indoors (and from the perspective of "let's judge this developer's work"), while the actual users would see it in a vehicle alongside the real sky (and from the perspective of "let's see how easy this is to match up with reality").
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.
It sounds like the developer spent a lot of time implementing something that nobody wanted. Drawing the sky accurately may be cool, but it wasn't required in this case. It's also not innovation. It's been done before.
This is like if you were renovating your house and the drywall guy spends a huge amount of time building up round corners, but you just wanted regular square corners. Then on some drywall forum they're bitching about how "all clients are stupid" or something.
I've been in the developer's shoes. I've also been in the manager's shoes.
It's not that simple. There's possibly better ways to deal with it, but for safety-critical stuff (like a navigation display in a vehicle), simple is much, much better. In many cases, there's actually laws and liability stuff involved.
I once spent six months, developing an "un-asked-for" WiFi control app for a digital camera, and had it nuked. It worked much better than the shipping app (which was enjoying a richly-deserved one-star rating in the app store).
The considerations had a lot to do with the corporate Process (note the capital "P"), which I sidelined. I thought I could do better, but the people with the hands on the brake, thought different. I didn't kiss the right rings. That's a very real consideration in any corporation.
As a manager, however, I did go to bat for employees that displayed initiative. In some cases, I was successful. In some cases, not so much.
There's so much decision making in companies that comes down to some dingus in management decided that it would Be Bad On Purpose. Fighting that battle is something you can try a few times in your career if you want, but it usually leads to burnout or a resume generating event.
A foundational, core theme about making commercial software, that repeats over and over and I slowly got accustomed to is: companies really don't want these kinds of micro-innovations. 90% of companies are just looking at their competitors, making a checklist out of those products, and asking engineers to check the boxes and go home. They don't care about little details, about craftsmanship and polish, about lint warnings, about "oh, that's a nice touch," or even quality beyond "will the customer return the product?" They just want people to poop out software as fast as possible so everyone can get bonuses and drive around on their jetskis on Saturday.
If you're the kind of developer who likes to "sand and finish the back side of the cabinet," either you need to find a very rare, special company, or do it at home as a hobby.
But it's exactly the thing that makes software "delightful". It's also a huge boost to the developer's appreciation, motivation, productivity, care for the product.
But yeah, if you only care about checking the feature boxes.. Go ahead, make shit software with miserable people, but be sure to prepare to go out of business.
The point is a real skybox is not great for satnav software. It's probably actually worse than a stylised mode, with a predictable colour background for anything that's going to sit on top of it.
> They don't care about little details, about craftsmanship and polish, about lint warnings, about "oh, that's a nice touch," or even quality beyond "will the customer return the product?"
I worked at large companies, and there are reasons beyond that. I've been on the both sides of this fence.
Senior engineers feel the pain of supporting all these features. You created a new streaming API prototype that provides a gradual response, progressively displaying details of the 3D model? Great. But it's 15000 lines of dense code without a lot of explanation. Who is going to support it once you leave the company? Is it secure? How does it work with kiosk-type browsers? Can you write a formal proposal so we can start the review process?
Oh, I see that you're already leaving the company :(
And that's also why startups are often so much more successful initially. They just don't care about the long-term support and YOLO a lot of functionality.
This is a wildly unprofessional attitude. Programmers are craft(wo)men. They employ their craft toward creating things people pay them to create.
We aren't painting sistine chapels, we are running the plumbing in the sistine chapels basement. The job doesn't exist to give you emotional fulfillment. A mason doesn't insist that a client who needs a warehouse must pay him to spend a week detailing corbelled brick cornices. He makes a CMU wall, in the cheapest and most efficient way that still gets the job done.
It's profoundly disrespectful when we build monuments to our own ego instead of just getting the work done and it speaks to a professional immaturity of the highest order. That was one of the hardest lessons I learned as a fresh engineer and I see so often others that are just learning it. Sometimes people never learn it.
> We aren't painting sistine chapels, we are running the plumbing in the sistine chapels basement.
Sure, but in plumbing - or any trade - there is a huge spectrum of quality of work. Tons of little details add up that confer the person’s skill level to anyone checking it out in the future.
> It's profoundly disrespectful when we build monuments to our own ego instead of just getting the work done and it speaks to a professional immaturity of the highest order.
When I insist that something must be done a certain way, it’s not for my ego, it’s because I know that a year from now, I will be called upon to fix it during an incident if I don’t do it right this time. I am so absolutely sick of hacky bandaids being thrown on the ever-increasing pile of tech debt. To me, it’s profoundly disrespectful when product tells engineering that yet again, they will not yield time to fix the backlog, and to ship New Feature X.
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.
The thing here is programming the job can be much more dull than programming the hobby. Occasionally (twice a decade) there can be a collision where you get to do something really cool like that at work. The higher ups want a realistic sky because their market research said it'll boost an OKR by 10 basis points. And then you are in luck!
That said there are niches where jobs let you do cool stuff all the time. Hard to find. Probably why gaming jobs are notoriously underpaid and overworked.
I’ve had similar issues at work where people really overdo something and it’s difficult. On one hand you never want to kill that joy and passion someone has. That’s a great characteristic. But projects have scopes and too often instructions like “just draw a blue rectangle” get ignored.
> Yep, if you have to draw the Sun, you better draw it yellow.
This one always gets me in how dirty the sky must have been "back in the day" in order for people to see a yellow sun. I've never looked into what gas would be needed to make the sun look yellow, but it must have been hell to breathe.
Nah, the ancient Egyptians, and other cultures, depicted the sun a lot, and never made it white. Red, quite often, gold, very frequently - warm colors. If you paint a white sun people say it's the moon.
Ironically, I'm in the South of England wih clear blue sky, and the site thinks I have a much darker and beautiful reddish sunset. Im fairness, it's probably only out by an hour if that.
> 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.
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 :)
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...
> Second, in many environments (managed hosting etc.) there is not an easy way (or indeed a way at all) of adding headers to responses.
It's getting better. Most serverless hosts (including Cloudflare, which this site uses) follow the (req: Request) => Response pattern, which by definition allows sending headers.
What are you talking about. Any non-static hosting will let you specify headers with a plain php function. Any baseline shared hosting offers that kind of control and has done so for the past 20+ years.
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...and was willing to do it, a condition I forgot to add in my last comment here, but which applies equally there. (User-provided .htaccess files were the source of a number of relatively high-profile early CVEs, as I recall. Apache grew a number of options for trusting their content, and I want to say before very long you could not rely on anything working past simple HTTP-Basic credential management.)
Oldschool shared web hosting was a shockingly deprived environment by modern standards, which is why my Linode account turned old enough a few months ago to buy a drink in a bar: $20 a month in 2004 was amply worth gaining a degree of control over web server configuration which is broadly the default assumption now.
Since I was also administering some shared web hosting in my own right at the time - partially overlapping with my web design work targeting shared hosting, since some customers preferred to BYO - I don't blame admins for being difficult to work with; we all had good reason to be, with the afterthought security typically was everywhere in those days. But you begin perhaps to see why bypassing the whole rigamarole with a hint to the client was attractive.
but that was the point of the dot file to allow vhosts to change the default server settings without needing access to the root config. maybe they weren't designed specifically for vhosts, but that was my main use of them.
Yes. If the main Apache config was set up to allow it to read a dotfile, and if configured not to ignore the options you wanted to use, that is what the dotfile did. That's why, if you wanted an option easily portable across hosting providers, you used the meta tag instead. Which is my point, and my only point, and not really up for debate by some pettifogging rando with nothing better to fill a Saturday night.
Wtf, seriously. I was just asking. Sorry if that resulted in me pissing in your cheerios. Just because a question was asked doesn’t mean it was challenging your knowledge. I was just asking to clarify based on personal experience. If you don’t have time for questions or feel personally slighted that someone would have the gall to question the written word of the almighty throwanem, then posting on the internet is probably something you stop doing
It isn't a question of "challenging [my] knowledge," it's a question of you acting like kind of a jerk. I realize you don't see yourself as the one starting an argument here, and I have observed your manners likewise lacking on many occasions on this website before. Your opinion of the matter is not well qualified. You're being an ass. Knock it off.
I realize you're probably not accustomed to being called on your lousy behavior. I doubt you will need to become so. But just for once, here we are. You don't bother to find out what you're talking about before you speak and then you want your hand held on points that were already clarified, had you but bothered to catch up. I don't tolerate that in candidates, I won't tolerate it in colleagues, and I see no very pressing reason to tolerate it here.
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.
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.
Suggestion for the author, I don't think there are any outdoor places where the sky is black. I don't know that gray would be any better. Stars? Some night clouds? or maybe even still a gradient?
I was just thinking about how to slice up a star map projection, and apply it as an overlay. I don’t do such things often enough to do it quickly, although I can imagine how it could be achieved. I’d imagine someone working in game dev probably could whip up a mechanism for applying coordinates to a star map fairly quickly, but realizing it in pure CSS would probably require exporting all the slices to a folder as SVG squares that are labeled with coordinates, and then using a bit of JS to stitch it all together in the rendered page.
I wrote a simple web-based night sky viewer a while ago [1], which renders the 750 brightest stars from coordinates in a data file (along with the moon). It uses D3.js to do fully client-side SVG-based rendering for interactive use, but it could be simplified to render server side to an SVG file. I think the main complication is that by adding stars, a projection needs to be decided on, and you'd need to consider the aspect ratio of the browser window.
As an old-timer who's not up on all the latest whiz-bang web stuff, I have to ask what is the astro/cloudflare/wrangler magic that allows the following to work:
I gather you're using some cloudflare feature wrapped in astro to provide lat/long but I don't see the actual plumbing that gets it to you (and I did try to spelunk through a decent amount of documentation to find it). Can you elaborate?
There is no visible plumbing because it kinda is magic! Astro provides adapters for different server runtimes (e.g., Vercel, Cloudflare, Netlify), and it's basically just plug and play. The Cloudflare adapter exposes a bunch of bindings [1] through `Astro.locals.runtime`, which can be accessed during each request. The `cf` binding contains incoming request properties [2], including latitude and longitude.
These bindings (or at least some of them) are also mocked when developing locally, in a non-Cloudflare-Workers environment.
Any ideas on how to do this without the Cloud flare magic, so entirely in the client?
Just based on time will suffice, with latitude approximated to somewhere such as London?
You can enable a feature in Cloudflare which will inject the approximate user's lat/lng (based on their IP (and other factors?)) as an HTTP header added to the original request:
"This Managed Transform adds HTTP request headers with location information for the visitor's IP address, such as city, country, continent, longitude, and latitude."
Yeah, I think I last updated that website even before I released the first version of Leaflet. Life is very hectic at the moment, but I do really want to get to it sooner than later and modernize everything.
Very cool. We are launching a sensor that mounts on the inside of your window and measure the sky color for a small cone of the sky and transmits this to our skylight and window fixtures inside (see innerscene.com) so they can replicate exactly the same thing indoors. You could potentially use a computer monitor to do this, but it generally doesn't provide great light due to using RGBs instead of wide-spectrum sources.
One issue with the current code is it doesn’t model clouds, haze, or smoke so the rendered sky can differ from what you see outside (numerous HN comments notice this). You can partially correct for this by using semi-realtime satellite imaging but hard to get super accurate which is what pushed us to develop our own sensor. There are various CCT sensors on the market already but they only measure directional+diffuse+reflected light which is typically ~7500k but the sky color goes up to 40,000k.
I refreshed the page, enabled js, refreshed again and again and finally I gave up thinking it is not loading because it was hugged to death. While reading the comments here it dawned on me that it was just a black background because it is night outside and the paged worked fine from the start...
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
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.
This might be a stupid question, but is it the background of https://html.energy/html-day/2025/index.html that shows the current sky? I am a bit confused since neither the post or the github repo says so outright.
Edit: I think its this link: https://sky.dlazaro.ca/
OP - put it in the HN post and first on your github repo! Good work.
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.
Very cool! Might be interesting to combine this with cloud data or sunset forecast data from Sunsethue to create some sort of sky/sunset simulation. Well done!
Very cool, though I opened it at night so it's just black. Is there a way to adjust the time it renders to see what it would look like at different times?
I'll have to check this out tomorrow. I can tell you that black is not very accurate for my current conditions (midnight in Manhattan) but curious to see how it does in the day!
This project looks amazing and fun. However, the website did not seem to take the cloudy weather at my current location into account, which is a bit of a disappointment.
21pm in The Netherlands, the sky is a clear blue down to a baby pink right now, however the app shows a black to dark red. Other people are saying it matches exactly for their location so maybe there's some sort of bug?
Is this all done server side? I was shocked to inspect the page to discover zero js or even a stylesheet. Not so much as a single div. Very impressive.
- 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).
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.
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
Depending on how "approximate" is acceptable, I've found that using timezone names can be a good proxy for location. As most users have their timezones set correctly it's more consistent and private than IP or GPS.
I've made a library for my own use cases that does this (https://github.com/mcteamster/virgo), but it's also pretty straightforward to parse the city/state name out of the timezone and look it up somewhere.
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...
This is why specifications are important, and why design is important.
The reality is that we have certain conventions that are immediately understandable, and that too much visual complexity results in confusion rather than clarity.
If the sky is hazy white when I expect it to be blue, I'm confused as to whether it's the sky or if the map is still loading. It's adding cognitive complexity for no reason. Stars similarly serve no functional purpose at night.
What you built sounds great for an actual planetary view like Google Earth. And it sounds fun to build. But it's an anti-feature for a navigation view. When you're navigating, simplicity and clarity are paramount. Not realism.
> This is why specifications are important, and why design is important.
Also the phrase "know your audience". No sense in casting pearls before the swine.
Though sometimes the higher ups might not be the same as (or understand) the actual audience.
In this case the higher ups may have been confused due to, say, looking at the app while indoors (and from the perspective of "let's judge this developer's work"), while the actual users would see it in a vehicle alongside the real sky (and from the perspective of "let's see how easy this is to match up with reality").
Ah, I see the confusion. You think the users are the dev's audience! /s
I suppose this is the lesson OP learned!
I wish more people knew it. So many times frustration of the system is directed at devs. They couldn't figure out X? Why is Z feature so shit? Etc.
That's a management thumbprint on the deliverable.
Also, any fanciness you add in your product is something you need to then maintain. Even after the developer that built it leaves the company.
Oh come now. You are being no fun.
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)
The last thing you want is to receive a message from Neil Degrasse Tyson about how wrong your sky was
https://duckduckgo.com/?t=ffab&q=neil+degrasse+tyson+gives+j...
And pointed out Jon Stewart's globe spinned backward
Cobalt was a really interesting game, too bad it never got any fame
I identify so much with your sentiment and this type of overthinking overbuilding .
Whipping down the innovator with the stupidity whip. Great management
It sounds like the developer spent a lot of time implementing something that nobody wanted. Drawing the sky accurately may be cool, but it wasn't required in this case. It's also not innovation. It's been done before.
This is like if you were renovating your house and the drywall guy spends a huge amount of time building up round corners, but you just wanted regular square corners. Then on some drywall forum they're bitching about how "all clients are stupid" or something.
I've been in the developer's shoes. I've also been in the manager's shoes.
It's not that simple. There's possibly better ways to deal with it, but for safety-critical stuff (like a navigation display in a vehicle), simple is much, much better. In many cases, there's actually laws and liability stuff involved.
I once spent six months, developing an "un-asked-for" WiFi control app for a digital camera, and had it nuked. It worked much better than the shipping app (which was enjoying a richly-deserved one-star rating in the app store).
The considerations had a lot to do with the corporate Process (note the capital "P"), which I sidelined. I thought I could do better, but the people with the hands on the brake, thought different. I didn't kiss the right rings. That's a very real consideration in any corporation.
As a manager, however, I did go to bat for employees that displayed initiative. In some cases, I was successful. In some cases, not so much.
There's so much decision making in companies that comes down to some dingus in management decided that it would Be Bad On Purpose. Fighting that battle is something you can try a few times in your career if you want, but it usually leads to burnout or a resume generating event.
A foundational, core theme about making commercial software, that repeats over and over and I slowly got accustomed to is: companies really don't want these kinds of micro-innovations. 90% of companies are just looking at their competitors, making a checklist out of those products, and asking engineers to check the boxes and go home. They don't care about little details, about craftsmanship and polish, about lint warnings, about "oh, that's a nice touch," or even quality beyond "will the customer return the product?" They just want people to poop out software as fast as possible so everyone can get bonuses and drive around on their jetskis on Saturday.
If you're the kind of developer who likes to "sand and finish the back side of the cabinet," either you need to find a very rare, special company, or do it at home as a hobby.
But it's exactly the thing that makes software "delightful". It's also a huge boost to the developer's appreciation, motivation, productivity, care for the product.
But yeah, if you only care about checking the feature boxes.. Go ahead, make shit software with miserable people, but be sure to prepare to go out of business.
The point is a real skybox is not great for satnav software. It's probably actually worse than a stylised mode, with a predictable colour background for anything that's going to sit on top of it.
> They don't care about little details, about craftsmanship and polish, about lint warnings, about "oh, that's a nice touch," or even quality beyond "will the customer return the product?"
I worked at large companies, and there are reasons beyond that. I've been on the both sides of this fence.
Senior engineers feel the pain of supporting all these features. You created a new streaming API prototype that provides a gradual response, progressively displaying details of the 3D model? Great. But it's 15000 lines of dense code without a lot of explanation. Who is going to support it once you leave the company? Is it secure? How does it work with kiosk-type browsers? Can you write a formal proposal so we can start the review process?
Oh, I see that you're already leaving the company :(
And that's also why startups are often so much more successful initially. They just don't care about the long-term support and YOLO a lot of functionality.
This is a wildly unprofessional attitude. Programmers are craft(wo)men. They employ their craft toward creating things people pay them to create.
We aren't painting sistine chapels, we are running the plumbing in the sistine chapels basement. The job doesn't exist to give you emotional fulfillment. A mason doesn't insist that a client who needs a warehouse must pay him to spend a week detailing corbelled brick cornices. He makes a CMU wall, in the cheapest and most efficient way that still gets the job done.
It's profoundly disrespectful when we build monuments to our own ego instead of just getting the work done and it speaks to a professional immaturity of the highest order. That was one of the hardest lessons I learned as a fresh engineer and I see so often others that are just learning it. Sometimes people never learn it.
> We aren't painting sistine chapels, we are running the plumbing in the sistine chapels basement.
Sure, but in plumbing - or any trade - there is a huge spectrum of quality of work. Tons of little details add up that confer the person’s skill level to anyone checking it out in the future.
> It's profoundly disrespectful when we build monuments to our own ego instead of just getting the work done and it speaks to a professional immaturity of the highest order.
When I insist that something must be done a certain way, it’s not for my ego, it’s because I know that a year from now, I will be called upon to fix it during an incident if I don’t do it right this time. I am so absolutely sick of hacky bandaids being thrown on the ever-increasing pile of tech debt. To me, it’s profoundly disrespectful when product tells engineering that yet again, they will not yield time to fix the backlog, and to ship New Feature X.
Haha it sounds you applied the opposite of the YAGNI principle building this.
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.
You should have added a duck.
I understood that reference
The thing here is programming the job can be much more dull than programming the hobby. Occasionally (twice a decade) there can be a collision where you get to do something really cool like that at work. The higher ups want a realistic sky because their market research said it'll boost an OKR by 10 basis points. And then you are in luck!
That said there are niches where jobs let you do cool stuff all the time. Hard to find. Probably why gaming jobs are notoriously underpaid and overworked.
I’ve had similar issues at work where people really overdo something and it’s difficult. On one hand you never want to kill that joy and passion someone has. That’s a great characteristic. But projects have scopes and too often instructions like “just draw a blue rectangle” get ignored.
Totally. It was a harsh but needed lesson on the realities of getting work done in a commercial environment.
Yep, if you have to draw the Sun, you better draw it yellow. If you have to draw a cloudless day sky, you better draw it blue.
That doesn't apply to every single instance of those, but if the sky isn't the focus of your application, a realistic one is just a distraction.
> Yep, if you have to draw the Sun, you better draw it yellow.
This one always gets me in how dirty the sky must have been "back in the day" in order for people to see a yellow sun. I've never looked into what gas would be needed to make the sun look yellow, but it must have been hell to breathe.
Nah, the ancient Egyptians, and other cultures, depicted the sun a lot, and never made it white. Red, quite often, gold, very frequently - warm colors. If you paint a white sun people say it's the moon.
The walls were black for a reason in big cities. All those chimneys and coal everywhere.
Ironically, I'm in the South of England wih clear blue sky, and the site thinks I have a much darker and beautiful reddish sunset. Im fairness, it's probably only out by an hour if that.
Maybe it is out by an hour due to BST.
Fun (but not fun) story :)
To be honest I don’t think anyone wants that kind of functionality - maybe in the satellite view but not in the vector map.
> 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.
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 :)
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...
Not sure what you are on about. Adding an HTTP header to a request is one of the easiest things to do.
I think you are the one who doesn't know what they are on about.
First, the header must be added to the response, not the request.
Second, in many environments (managed hosting etc.) there is not an easy way (or indeed a way at all) of adding headers to responses.
> Second, in many environments (managed hosting etc.) there is not an easy way (or indeed a way at all) of adding headers to responses.
It's getting better. Most serverless hosts (including Cloudflare, which this site uses) follow the (req: Request) => Response pattern, which by definition allows sending headers.
What are you talking about. Any non-static hosting will let you specify headers with a plain php function. Any baseline shared hosting offers that kind of control and has done so for the past 20+ years.
is that something that could have be done in the dot file for server override? what was it, .htaccess or something?
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...and was willing to do it, a condition I forgot to add in my last comment here, but which applies equally there. (User-provided .htaccess files were the source of a number of relatively high-profile early CVEs, as I recall. Apache grew a number of options for trusting their content, and I want to say before very long you could not rely on anything working past simple HTTP-Basic credential management.)
Oldschool shared web hosting was a shockingly deprived environment by modern standards, which is why my Linode account turned old enough a few months ago to buy a drink in a bar: $20 a month in 2004 was amply worth gaining a degree of control over web server configuration which is broadly the default assumption now.
Since I was also administering some shared web hosting in my own right at the time - partially overlapping with my web design work targeting shared hosting, since some customers preferred to BYO - I don't blame admins for being difficult to work with; we all had good reason to be, with the afterthought security typically was everywhere in those days. But you begin perhaps to see why bypassing the whole rigamarole with a hint to the client was attractive.
but that was the point of the dot file to allow vhosts to change the default server settings without needing access to the root config. maybe they weren't designed specifically for vhosts, but that was my main use of them.
Yes. If the main Apache config was set up to allow it to read a dotfile, and if configured not to ignore the options you wanted to use, that is what the dotfile did. That's why, if you wanted an option easily portable across hosting providers, you used the meta tag instead. Which is my point, and my only point, and not really up for debate by some pettifogging rando with nothing better to fill a Saturday night.
Wtf, seriously. I was just asking. Sorry if that resulted in me pissing in your cheerios. Just because a question was asked doesn’t mean it was challenging your knowledge. I was just asking to clarify based on personal experience. If you don’t have time for questions or feel personally slighted that someone would have the gall to question the written word of the almighty throwanem, then posting on the internet is probably something you stop doing
It isn't a question of "challenging [my] knowledge," it's a question of you acting like kind of a jerk. I realize you don't see yourself as the one starting an argument here, and I have observed your manners likewise lacking on many occasions on this website before. Your opinion of the matter is not well qualified. You're being an ass. Knock it off.
I realize you're probably not accustomed to being called on your lousy behavior. I doubt you will need to become so. But just for once, here we are. You don't bother to find out what you're talking about before you speak and then you want your hand held on points that were already clarified, had you but bothered to catch up. I don't tolerate that in candidates, I won't tolerate it in colleagues, and I see no very pressing reason to tolerate it here.
Ever tried doing it in nginx? You'll find `add_header` doesn't work at all the way you think it does.
And it doesn't allow overrides in dotfiles since that's not performant or secure.
There was also server[-side] push:
https://www.oreilly.com/openbook/cgi/ch06_06.html
I can’t wait till they hear about framesets
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.
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.
Honestly it’s kind of cute, I had all but forgotten about http-equiv
Opened this up and sat there for a good 20 seconds waiting for something to happen... only to remember it's midnight here.
Suggestion for the author, I don't think there are any outdoor places where the sky is black. I don't know that gray would be any better. Stars? Some night clouds? or maybe even still a gradient?
https://www.google.com/search?sca_esv=58e7983bf9f21fcd&udm=2...
Maybe someone smarter than me could add stars to the night sky, so it's not just black.
I was just thinking about how to slice up a star map projection, and apply it as an overlay. I don’t do such things often enough to do it quickly, although I can imagine how it could be achieved. I’d imagine someone working in game dev probably could whip up a mechanism for applying coordinates to a star map fairly quickly, but realizing it in pure CSS would probably require exporting all the slices to a folder as SVG squares that are labeled with coordinates, and then using a bit of JS to stitch it all together in the rendered page.
I wrote a simple web-based night sky viewer a while ago [1], which renders the 750 brightest stars from coordinates in a data file (along with the moon). It uses D3.js to do fully client-side SVG-based rendering for interactive use, but it could be simplified to render server side to an SVG file. I think the main complication is that by adding stars, a projection needs to be decided on, and you'd need to consider the aspect ratio of the browser window.
[1] https://github.com/mpetroff/nightsky
Very cool concept. Would be great if there’s an option to tweak the gradient before copying, so devs can match it exactly to their design needs.
As an old-timer who's not up on all the latest whiz-bang web stuff, I have to ask what is the astro/cloudflare/wrangler magic that allows the following to work:
I gather you're using some cloudflare feature wrapped in astro to provide lat/long but I don't see the actual plumbing that gets it to you (and I did try to spelunk through a decent amount of documentation to find it). Can you elaborate?There is no visible plumbing because it kinda is magic! Astro provides adapters for different server runtimes (e.g., Vercel, Cloudflare, Netlify), and it's basically just plug and play. The Cloudflare adapter exposes a bunch of bindings [1] through `Astro.locals.runtime`, which can be accessed during each request. The `cf` binding contains incoming request properties [2], including latitude and longitude.
These bindings (or at least some of them) are also mocked when developing locally, in a non-Cloudflare-Workers environment.
[1] https://developers.cloudflare.com/workers/wrangler/api/#supp...
[2] https://developers.cloudflare.com/workers/runtime-apis/reque...
Any ideas on how to do this without the Cloud flare magic, so entirely in the client? Just based on time will suffice, with latitude approximated to somewhere such as London?
Great explanation; thanks.
You can enable a feature in Cloudflare which will inject the approximate user's lat/lng (based on their IP (and other factors?)) as an HTTP header added to the original request:
https://developers.cloudflare.com/network/ip-geolocation/
"This Managed Transform adds HTTP request headers with location information for the visitor's IP address, such as city, country, continent, longitude, and latitude."
Author of Suncalc here — this is exactly the kind of stuff I love to see my code being used in, thanks for sharing!
Hey, small note that your excellent https://suncalc.net/ is showing an error due to the Google Maps API token having expired.
I know that you deeply know map tech :-) but if I may make a suggestion - you might consider switching from Google Maps to Protomaps? https://github.com/protomaps/protomaps-leaflet
Cheers
Yeah, I think I last updated that website even before I released the first version of Leaflet. Life is very hectic at the moment, but I do really want to get to it sooner than later and modernize everything.
Author or contributor? Great work, by the way, I love such shows
Wrote it 14 years ago! https://github.com/mourner/suncalc/ It's a bit neglected but I'll do some upkeep shortly...
Very cool. We are launching a sensor that mounts on the inside of your window and measure the sky color for a small cone of the sky and transmits this to our skylight and window fixtures inside (see innerscene.com) so they can replicate exactly the same thing indoors. You could potentially use a computer monitor to do this, but it generally doesn't provide great light due to using RGBs instead of wide-spectrum sources.
One issue with the current code is it doesn’t model clouds, haze, or smoke so the rendered sky can differ from what you see outside (numerous HN comments notice this). You can partially correct for this by using semi-realtime satellite imaging but hard to get super accurate which is what pushed us to develop our own sensor. There are various CCT sensors on the market already but they only measure directional+diffuse+reflected light which is typically ~7500k but the sky color goes up to 40,000k.
Here is a plot showing the color of the sky as it changes during the day from real sensor readings. Each one is 30s apart, so it change change quickly. https://www.innerscene.com/built_pages/cs_specsheet/cct/cct_...
A bit more info as well: https://www.innerscene.com/SpecHelp/CircadianSky/cct/cct.htm...
More sophisticated than I expected. It relies on a research paper: https://github.com/ebruneton/precomputed_atmospheric_scatter...
I refreshed the page, enabled js, refreshed again and again and finally I gave up thinking it is not loading because it was hugged to death. While reading the comments here it dawned on me that it was just a black background because it is night outside and the paged worked fine from the start...
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
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.
This would be an awesome background for a smart home dash!
It would be awesome for a fake window in a basement
Should anyone appreciate it, this Shortcut for your iOS/iPadOS device will set your wallpaper to the current sky based on this nice tool:
https://www.icloud.com/shortcuts/c8ba254a0272453cbe39357b144...
Just make sure that your last (or only) iDevice Home Screen is set to type “image”.
It’s way too dark for this time of year at this time of day here at 60 degrees north.
But it looked very cool earlier today when it matched!
This might be a stupid question, but is it the background of https://html.energy/html-day/2025/index.html that shows the current sky? I am a bit confused since neither the post or the github repo says so outright.
Edit: I think its this link: https://sky.dlazaro.ca/ OP - put it in the HN post and first on your github repo! Good work.
This reminds of of a web page that did this for Ithaca NY circa 1995. The page was a static hardcoded shade of grey.
Not often does a project make me think "adorable", and it's a compliment. Just lovely.
Tid bits like this are why HN is still the best corner of the internet most of the time.
This is really cool. I’ll probably see if I can make it my new tab background in Chromium.
Ooh, how about this as a live desktop wallpaper!
Same!
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
Useful, saves me looking at the thing.
I'm around so much wildfire smoke lately that my sky expectations have changed...
I wonder what it would take to account for weather?
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.
Very cool! Might be interesting to combine this with cloud data or sunset forecast data from Sunsethue to create some sort of sky/sunset simulation. Well done!
Very cool, though I opened it at night so it's just black. Is there a way to adjust the time it renders to see what it would look like at different times?
Would be cool if it considered current weather conditions. The sky is presently much grayer than what the site showed me.
I'll have to check this out tomorrow. I can tell you that black is not very accurate for my current conditions (midnight in Manhattan) but curious to see how it does in the day!
This project looks amazing and fun. However, the website did not seem to take the cloudy weather at my current location into account, which is a bit of a disappointment.
This is really cool! And from skimming your code, TIL about Math.hypot!
would love this to be a desktop background -- linux or macOS
I use a built-in MacOS wallpaper called Solar Gradients[1]
It looks very similar!
[1]: https://youtu.be/0mf8YaWN5qE?t=1m21s
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...)
21pm in The Netherlands, the sky is a clear blue down to a baby pink right now, however the app shows a black to dark red. Other people are saying it matches exactly for their location so maybe there's some sort of bug?
during the day it was good here, now that it is night it's a bit off for me too
Ok this is incredible, it was exactly right, I did a double take!
That is awesome but now I want to check what my SF bros see when they look up.
Is this all done server side? I was shocked to inspect the page to discover zero js or even a stylesheet. Not so much as a single div. Very impressive.
I have been meaning to do it for ages! I got as far as finding a paper on the topic and reading it and then forgetting all about it. Nice work.
@dlazaro, I believe that style={{backgroundColor: bottom}} is not needed in:
is not needed.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...
That's a cool thing to know, thanks for sharing. Great job on the sky site!
Wow, this works in chrome on Android as well
Today I learned! Thanks
Ahhh you’re not taking light pollution into account!
Fantastic. I’ve always wondered why the sky wasn’t blue around the horizon. Fascinating stuff.
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).
sunsetting in the monroe, wa area. only a month left to live out here, gonna miss it dearly
I like this, but I’m newly concerned about the unitary horizon.
Well, that's delightful. Works really well here in the Pacific Northwest :)
Feels like this would be great for fake skylights…
Looks pretty Carolina blue to me. Good job.
Which direction am I looking? Deeper blue to the north.
It's always facing the sun (although it doesn't include the sun itself).
Neat tool, would love to be able to set the location when the registered IP location isn’t accurate.
that is really cool, thanks for sharing
incredible <3 not much else to say
Bit darker blues, please!
Why doesn't it respect dark mode??? ;)
Wait a few hours
Beautiful, thank you!
Curious why a celebration of HTML needed a full stack javascript framework?
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.
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?
(not author) from the source:
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 popupDepending on how "approximate" is acceptable, I've found that using timezone names can be a good proxy for location. As most users have their timezones set correctly it's more consistent and private than IP or GPS.
I've made a library for my own use cases that does this (https://github.com/mcteamster/virgo), but it's also pretty straightforward to parse the city/state name out of the timezone and look it up somewhere.
Astro is a great way to write HTML
I'm sure that's your totally unbiased opinion ;)
I was a fan of Astro long before I became a maintainer. That's why I joined!
Works in Hawaii.
Even at sunrise?
Seems to work :)
how i missed this small hn posts. thanks
Super neat. Looking forward to checking out your implementation and learning about this!