Vueing With Weather Data

August 26, 2018

Check It Out

non-sharing

Tools

In preparation for an idea I’ve got for a website, I’ve been working on learning Vue. The result of that learning is a Forecast page for displaying some weather based on provided latitude and longitude coordinates. I wanted to run this page within a single page and had to modify how I wrote things because of it.

This project included a number of technologies, some I’ve had experience with, but a lot I haven’t:

  • Vue.js - Working with Vue, once you get the idea of it, wrap your head around how things interact, and stop using arrow functions for top level things, it’s quite nice to work with!
  • Vue Chart.js - A package for using Chart.js with Vue.
  • Dark Sky API - Awesome weather API that allows 1,000 free API calls per day. Only downside is that they don’t offer geocoding, but that may be something I work into my setup later. They also make available awesome animated and procedurally generated weather glyphs via Skycons.
  • Google Domains - I use Google for my domain registration and their DNS management. For this project I wanted to utilize a subdomain to front an API that I’ve set up in AWS. I tried some different solutions, but in the end utilizing some name server settings I was able to offload the rest of the config work to AWS. Along this journey I also stopped having Netlify manage my domain’s DNS in favor of pointing to them via a CNAM E and an A record.
  • AWS - Sigh. Oh, AWS, you can be so frustrating sometimes, but when you finally work, you’re pretty awesome, too. (Enterprise funsies aside) This project had me working with a number of products within the console.
    • Lambda - Serverless, woo! I’ve got an internal tool at Brightcove that runs in a few Lambda and makes some things really, really easy. For this project I’ve written a function in Go that wraps calls out to the Dark Sky API for me so that I’m not exposing my api key with them.
    • API Gateway - This is the other half to what makes working with Lambda so awesome. APIG gives you a really easy way to manage routing and hooking up to other AWS services. I’ve used this with my previously mentioned tool, but hadn’t gone through the work of setting up a custom domain name before. Setting up said custom domain was probably one of the most frustrating parts of this whole thing.
    • Route53 - Amazons DNS tool. It’s a crucial piece in getting everything sorted out.
    • Certificate Manager - Gotta get certs for my domain! A key note here is to make sure that if you’re setting up an Edge Optimized API that you create a certificate out of the us-east-1 region, otherwise you won’t be able to use it.
    • Cloudfront & S3 - CDN and storage. I ended up not needing to muck with these but in my journey to get things working, I did.
    • IAM - Account and permissions management. Can be really granular if you need it to be, but a basic admin setup was all I needed.

TODO

  • Create diagram of different players/tech involved.
  • Write about specific challenges I faced?
  • Add in rate limiting based on request data?
  • Add geocoding to my weather back end? I’d like to be able to take in city names instead of requiring lat/long.
  • Add in a drop down with some sample locations?
  • Add back in tabs and do hourly data for the current day?
  • Mobile polish:
    • Axis labels drop out so that text doesn’t overlap. Not sure I like this, but it may end up staying. If I modified it, I’d want to scale the text size and keep all labels.
    • Temperature data points - Need to try to manage each data point so that there’s no text overlap if possible.

Give the page a look here and let me know your thoughts!