NASA is great. They’re one of the top scientific research organizations on the planet, and they share so much of their data. In fact, they even expose an API to fetch images from Curiosity, Opportunity, and Spirit - the three main Mars Rovers. A team of researchers have taken this dataset one step further and made available 6,737 images from Curiosity, tagged with categories.
As it turns out, you can’t come across 6,737 images from Mars, tagged with categories, and not make a searching site. So that’s exactly what I did. I knew this wouldn’t be hard, but going into this I knew I wanted to use this simple mini-project to learn a new skill.
For those who don’t know me, at the time of writing I’ve used Bootstrap 4 for almost every web project I’ve ever done to date. Now, I’m not one of those weirdos who doesn’t add some custom CSS - but I certainly let Bootstrap do a lot of my styling. Everyone knows what Bootstrap looks like, it’s so distinctive. I wanted something that had the functionality of Bootstrap, but with a nicer design and ideally some cool modern features.
I started by looking into Tailwind CSS. It seems really cool, but it wasn’t quite involved enough for me. Then, while browsing GitHub one day I came across Halfmoon UI. It was exactly what I had been looking for, similar features to Bootstrap, but more features (I love the built in Dark Mode), better customization, modern, and, perhaps most importantly, a better look and feel.
So, I decided to use Halfmoon. Originally, I was planning to try out React for this project too, but decided against it for a few reasons.
- I didn’t want this to need to build, like React does in most cases.
- Even if I did use React with any sort of build, I wanted to be able to use JSX. And as you’d expect making JSX work in the browser is a real pain, even with Babel.
- I wanted this project to be done in no more than a day
So, with that in mind, I (reluctantly) added the jQuery CDN Link to my
<head> block. Before you tell me jQuery is dead (because it is), just back up and read those points above. I’d worked with jQuery before, it runs nicely in the browser, and I can write HTML just as a string and have it render. Speed wasn’t a concern for this project.
With that in hand, I went and wrote the code. I won’t go into too much details about how it works (it’s super simple), but in a nutshell I have a Node app that takes the data and puts it into a JSON format, then the browser fetches the JSON, creates a
<select> for the categories, populates said element with options, then waits for it to change. When it changes, it loads the relevant images. Due to there being just over 1300 images tagged (duplicate or very similar images are excluded from the tags), I didn’t want to load them all at once. So, I made it load just 15 by default then added a button to load 15 more.
It’s probably still a bit buggy, but for now it’s good enough. Check it out - https://velocity23.github.io/mars-images.