By
@urged-st
A brutalist new tab page with a NASA-powered background switcher. Pulls today's Astronomy Picture of the Day or a random shot from NASA's Image and Video Library, forces it through greyscale and high contrast, and pairs it with a big central clock, quick search, and a saved link dock.
I built CTRL-T, a brutalist custom new tab page with a NASA-powered background switcher. You can flip between a flat block colour, today's Astronomy Picture of the Day, or a random shot pulled from NASA's Image and Video Library, alongside a big central clock, a search bar, and a quick-link dock. The trickiest part was realising that Chrome disables alert, prompt, and confirm on any page that overrides the new tab, which meant my link-adding button silently did nothing until I swapped it for an inline form instead. I'm proud of how the NASA photos still fit the raw, high-contrast look of the page despite being real photography, since every image gets forced through greyscale and heavy contrast so it never clashes with the rest of the design. If you're testing it, know that the quick links save to your own browser's local storage rather than anywhere shared, so nobody else visiting the page will see the links you add, and the demo NASA key it ships with has a low hourly rate limit, so the background switcher might briefly fail if you hammer it too many times in a row. To bypass this, fork/clone the repo and add your own key, which you can get for free almost instantly online.
clamp() for its font size, so it scales from 220px on desktop down to a readable size on narrow screens without spilling off the edge.setInterval. + ADD button called window.prompt() to grab a label and URL, and it worked fine in a normal browser tab. Problem is, Chrome strips out alert, prompt, and confirm entirely on pages that override the new tab, which is the whole point of this project. Clicking the button just did nothing. Fixed it by swapping the prompt for an inline form that toggles open under the dock. Two fields, a save button, done. It fits the brutalist look better too. Native browser dialogs are rounded and soft, which was never going to match this page. Andddd we’re done! Well, almost. Still gotta deploy this one.
Added the search bar first. Nothing fancy really, it just grabs whatever you type and redirects to a Google search on submit. The part I actually spent time on was making the input box not look like a default browser input, with a thick border, no rounding etc.
Then added the quick links dock. Links get stored in localStorage so they persist between sessions, no backend needed. Clicking “+ ADD” pops a prompt for a label and a URL, and I added a little × next to each link chip so you can remove one without having to clear the whole list.
Small thing I had to handle: people are pretty lazy about typing full URLs, so if someone just types “github.com” instead of “https://github.com” the script will prepend the https for them.
Kept both of these hidden on narrow screens (under 640px) so the clock still gets to be the main character on mobile instead of fighting for space lol.
Nothing here needed the NASA APIs, so this stage was mostly just about layout discipline, keeping the same border-heavy brutalist language consistent as I add new blocks.
What’s next? Clock’s already working in the background from my webOS testing, so next devlog is probably the full assembly plus whatever polish the layout needs once everything’s on screen at once.
This seemed like a cool mission so I decided to try knock this out in a few hours.
I’ve started by adding some styling from the beginning of the project so I don’t have to do it later.
I ALSO added APOD and NASA.lib connectivity through their respective NASA APIs, so you can switch backgrounds to either the picture of the day, or a random image from NASA.lib, where it chooses a random query out of nebula, galaxy, supernova, mars, black hole, aurora, and picks a random image out of that category.
Setting this up wasn’t too hard as I have worked with NASA’s APIs before multiple times, specifically the Neows and SBDB.
One thing i did have to consider, is that APOD sometimes returns videos, so I added a bail script:
infoText.textContent = `MODE: APOD — TODAY IS A VIDEO (${data.title.toUpperCase()}), NO IMAGE`;
so rather than failing it tells the user that no image is available… maybe I will change this to integrate vids or gifs though who knows.
The real hard part which I spent a while on was the CSS, as while it looks simple it took a log of adjustment to get the true brutalist look I wanted.
Most astro-related sites are eloquent and fancy, I plan for this one to be quite a harsh and concrete style page.
What next? I’ll probably make the search bar and maybe add a quick links section.
