Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Story of a side project built with vue.js

Story of a side project built with vue.js

In 2017 in the US we experienced a relatively rare phenomenon: a total solar eclipse that could be seen across the country.

The next event like this will happen in 2045, so we had to enjoy it.

There were hundreds of events organized all over the country. NASA was providing a map but it was not easy to navigate. So I built a nicer UI to it that would just be asking for your location and would filter events around you.

This was my first time building a vue app.
This talk talks about the tech behind the app.

Nicolas Grenié

February 20, 2019
Tweet

More Decks by Nicolas Grenié

Other Decks in Technology

Transcript

  1. STORY OF A SIDE PROJECT BUILT WITH VUE.JS .WS Ross

    Lake, in Northern Cascades National Park, Washington, 21st August 2017, NASA NICOLAS GRENIÉ @PICSOUNG
 DEVELOPER ADVOCATE
 TYPEFORM BOULDERJS
 20TH FEBRUARY
  2. @picsoung .WS WHY VUE? Started with Matthias Hager’s tutorial to

    build complete Vue.js application
 link
  3. @picsoung .WS VUEX TO THE RESCUE I did not use

    it properly in this project 
 
 Similar to Facebook’s flux
 Single source of truth
 Library for Actions, Mutations, Getters
  4. @picsoung .WS VUEX TO THE RESCUE I did not use

    it properly in this project 
 
 Similar to Facebook’s flux
 Single source of truth
 Library for Actions, Mutations, Getters
  5. @picsoung .WS USE NUXT ‣ I did not use it

    properly in this project ‣ Best practices packaged all together ‣ Comes with: ‣ Vuex ‣ Vue-router ‣ vue-méta ‣ Forces a pattern in project structure ‣ Intelligent routing ‣ SEO friendly ‣ And much more
  6. @picsoung .WS THE FLOW GET EVENTS GET LOCAL ECLIPSE CIRCUMSTANCES

    FIND VISUALIZATION "latlng": { "lat": 37.7792, "lng": -122.419 }
  7. @picsoung .WS GET EVENTS EVENTS INDEX GEOLOC SEARCH MATCHING EVENTS

    LISTS RENDER "latlng": { "lat": 37.7792, "lng": -122.419 }
  8. @picsoung .WS GET LOCAL ECLIPSE CIRCUMSTANCES "latlng": { "lat": 37.7792,

    "lng": -122.419 } Params: - date - height (default to 200) - coords API CALL
  9. @picsoung .WS GET LOCAL ECLIPSE CIRCUMSTANCES { "error":false, "apiversion":"2.0.0", "event":

    "Solar Eclipse of 2017 Aug. 21", "description": "Sun in Partial Eclipse at this Location", "day": 21, "month": 8, "year": 2017, "deltaT": "69.4s", "lat": "37.774889", "lon": "-122.419389", "height": "200m", "tz": "0", "local_data": [ { "phenomenon": "Eclipse Begins", "day": "21", "time": "16:01:30.3", "altitude": "28.7", "azimuth": "97.3", "position_angle": "296.5", "vertex_angle": "349.7" }, { "phenomenon": "Maximum Eclipse", "day": "21", "time": "17:15:12.7", "altitude": "42.8", "azimuth": "111.2" }, { "phenomenon": "Eclipse Ends", "day": "21", "time": "18:37:05.2", "altitude": "56.4", "azimuth": "134.2", "position_angle": "95.6", "vertex_angle": "131.0" } ], "duration": "2h 35m 34.9s", "magnitude": "0.801", "obscuration": "75.5%" }
  10. @picsoung .WS GET LOCAL ECLIPSE CIRCUMSTANCES ⚠ Time is in

    UTC0 ✅ Use TimezoneDB API find tmz
  11. @picsoung .WS GET LOCAL ECLIPSE CIRCUMSTANCES ⚠ Time is in

    UTC0 ⚠ Endpoint only supports HTTP ✅ Use TimezoneDB API find tmz
  12. @picsoung .WS GET LOCAL ECLIPSE CIRCUMSTANCES ⚠ Time is in

    UTC0 ⚠ Endpoint only supports HTTP ✅ Use TimezoneDB API find tmz ✅ Use AMZ API Gateway to proxy
  13. @picsoung .WS GET LOCAL ECLIPSE CIRCUMSTANCES ⚠ Time is in

    UTC0 ⚠ Endpoint only supports HTTP ✅ Use TimezoneDB API find tmz ✅ Use AMZ API Gateway to proxy ⚠ Site went down on launch day
  14. @picsoung .WS FIND VISUALIZATION ⚠ CSS using SVG shapes ⚠

    Attempts didn't look like others ⚠ Scrape SVG code from timeandate
  15. @picsoung .WS FIND VISUALIZATION ⚠ CSS using SVG shapes ⚠

    Attempts didn't look like others ⚠ Scrape SVG code from timeandate ⚠ <noscript> displays image
  16. @picsoung .WS FIND VISUALIZATION ⚠ CSS using SVG shapes ⚠

    Attempts didn't look like others ⚠ Scrape SVG code from timeandate ⚠ <noscript> displays image ✅ Scrape all images https://www.timeanddate.com/eclipse/in/usa
  17. @picsoung .WS FIND VISUALIZATION ⚠ CSS using SVG shapes ⚠

    Attempts didn't look like others ⚠ Scrape SVG code from timeandate ⚠ <noscript> displays image ✅ Add geoloc data ✅ Scrape all images https://www.timeanddate.com/eclipse/in/usa
  18. @picsoung .WS FIND VISUALIZATION ⚠ CSS using SVG shapes ⚠

    Attempts didn't look like others ⚠ Scrape SVG code from timeandate ⚠ <noscript> displays image ✅ Add geoloc data ✅ Create new Algolia index ✅ Scrape all images https://www.timeanddate.com/eclipse/in/usa
  19. @picsoung .WS FIND VISUALIZATION ⚠ CSS using SVG shapes ⚠

    Attempts didn't look like others ⚠ Scrape SVG code from timeandate ⚠ <noscript> displays image ✅ Add geoloc data ✅ Create new Algolia index ⚠ copyrights issues ✅ Scrape all images https://www.timeanddate.com/eclipse/in/usa
  20. @picsoung .WS OUTCOME ✅ Launched on PH - 13 157⬆

    ✅ Medium post - 569 569 ✅ Featured on Fastco August 7th 1600
  21. @picsoung .WS OUTCOME ✅ Launched on PH - 13 157⬆

    ✅ Medium post - 569 569 ✅ Featured on Lifehacker August 7th 3800 22k ✅ Featured on Fastco August 7th 1600
  22. @picsoung .WS OUTCOME ✅ Launched on PH - 13 157⬆

    ✅ Medium post - 569 569 ✅ Featured on Lifehacker August 7th 3800 22k ✅ Featured on Fastco August 7th 1600 ✅ SanLuisObispo.com
  23. @picsoung .WS OUTCOME ✅ 1 issue on algolia/places ✅ 1

    question on Astronomy StackExchange
  24. @picsoung .WS OUTCOME ✅ 1 issue on algolia/places ✅ 1

    question on Astronomy StackExchange ✅ Discussion with Time&Date API team
  25. @picsoung .WS OUTCOME ✅ 1 issue on algolia/places ✅ 1

    question on Astronomy StackExchange ✅ Discussion with Time&Date API team ✅ First experience with Vue.js
  26. @picsoung .WS OUTCOME ✅ 1 issue on algolia/places ✅ 1

    question on Astronomy StackExchange ✅ Discussion with Time&Date API team ✅ First experience with Vue.js ✅ First experience with Bulma CSS
  27. @picsoung .WS OUTCOME ✅ 1 issue on algolia/places ✅ 1

    question on Astronomy StackExchange ✅ Discussion with Time&Date API team ✅ First experience with Vue.js Emoji Domains ✅ First experience with Bulma CSS