Lately, I have been curious about the new “in vogue” Javascript framework: Vue.js (it’s a pleonasm, I know). I just needed a side-project idea to discover this new shiny toy everybody is talking about.
The idea of a project came while one night in a bar while sipping a good IPA with my fellow Advocate Josh. We were talking about the coming Solar Eclipse in the US, and where to go to see it.
Sadly, I did not personally plan to enjoy one of the many hippie gatheringhappening in Oregon the week of the eclipse. But I am sure I would be able to enjoy this rare phenomenon close to where I live in California.
With some basic googling I found the official NASA Website that is listing all the events organized in the country. Good news: Astronomers, Science Museums, and NASA facilities will be holding tons of event for everybody to enjoy the eclipse.
Unfortunately, the user experience on this NASA website was not super exciting. You would have to point and zoom on a Map to find the different events around you. I thought there should be a better and nicer way: that’s why I’ve built 🌚🌞.ws.
Provide a better search experience 🔍🗓
My primary goal was to offer a pleasant search experience, where people would put their location and the app will show events nearby.
When it comes to search, my tool of choice is Algolia. They offer APIs and SDKs to provide intuitive search in websites like Twitch, Product Hunt or Hacker News.
To be able to use their solution I needed to get all the events data. By checking the source code of NASA website, I’ve found the Google spreadsheet they were using to populate events on the map. I just had to download it and turn this file into JSON.
I created an events index on Algolia, where I would store all the events. To be able to perform a geo-based search I renamed the location field to _geoloc, and that was it. I could already search for events around a specific point on the globe with its latitude and longitude coordinates.
Then, instead of having a field where people will freely put their address, I have used Algolia Places. It’s a text field with auto completion on addresses or city names. This tool uses Open Street Map data so it’s pretty accurate.
Using this tool, users could start typing Saand the tool will suggest San Francisco. On a callback function the app will get all the info about this location, like it’s latitude and longitude, as well as its state or its postal code.
That’s how I got my first MVP running in few hours. Catching the change event on the input field, receiving the data about the location, perform a geo search on the event index and display the results.
Get local Eclipse circumstances 🌒🌘
I was pretty happy about my MVP, but I wanted to add more information regarding local circumstances of the eclipse. Wouldn’t be cool to know how long it will last? Or when will be the maximum?
Naively, I thought that the eclipse was happening everywhere at the same time. So I just had to take the date and convert it to local time zone.
Looks like I forgot my basic physics knowledge…
The Moon and the Earth are both moving at the same time, so the shadow of the Moon on Earth is also moving.
Check this animation to visualize it better:
NASA@nasaDid you know that you’ll need special solar filter glasses to view the solar #Eclipse2017 on Aug. 21? Learn more:… twitter.com/i/web/status/8…18:18 PM - 23 Jul 20171434
3043
So I had to find a way to get all those local circumstances as I could not guess them.
Well, if I am being 100% honest with you… I could… Through my research, I’ve learned about the Besselian elements. With some calculations, you can predict all the steps of an eclipse on any point on Earth. It sounds even more crazy when you realize that it was found in 1820 and that other civilizations have used similar techniques thousands of years ago.
The only documents I’ve found were full of endless equations, and I had no faith to deal with them in Javascript…
I finally discovered an API from the US Naval Observatory that would do that for me. This API is giving back the timing for the different phases of the eclipse as well as the magnitude, the sun azimuth, and some angles.
Once again my naively believed that with all this data, I had enough things to draw a beautiful visualization of the Moon shadow on the Sun.
https://medium.com/media/796beafd8fbafbb2d36171c22050f269/href
I tried during two days to find the right way of doing it. I used all the trigonometry I remembered from high school. My dream were full of crazy calculations. After many trials I could not get the results other websites were showing. I had to give up 😩.
If anybody has a clue, I would love to try and document a walk through on how to display an eclipse in SVG/CSS depending on latitude, longitude.
At the moment, visualizations are coming from Timeanddate.Finding a domain name 💻🔗
You can easily bet that all the nice domains for this particular events are squatted by people with business minds, giving you little information in the middle of many popup ads.
I tried variations around eclipse, events,US ; but I did not like anything…
Until a few days ago when Domainji got featured on Product Hunt.
That was it: I had to get an emoji domain! 🎉
I’ve learned a lot about punny codes, and decided to buy the simple🌚🌞.ws on i❤.ws.
Do you see how the Moon is looking at the Sun with appetite?
This is what’s happening during an eclipse.
Emoji domains are a pain when it comes to open graph tags. For example, Facebook OpenGraph debugger doesn’t recognize them as valid URLs. I had some fun times trying to debug this part of the website.
Vue experience👨💻👍
You remember I’ve started this post talking about Vue?
Yeah, so what about it?
To get started I read Matthias Hager’s tutorial, which gave me a pretty good base on how things were working. It was intuitive for the use case I had.
I did not cut my app into components, until I was sure that everything was working together.
I was happy to find a lot of resources and existing components like Places, Tooltip or Prerender (for opengraph tags). And I also got to discover Bulma CSS which is delightful to use compared to Bootstrap.
You can find the code of the project here : so if you have any comment on how to make it more “ Vuesque ” please let me know.
I hope you enjoyed this hack, feel free to through feedback and feature request.
Please enjoy the Eclipse safely!
Top comments (0)