Tuesday, 2 May 2017

Starting Weather App

Prep

Started with a Trello board listing user stories.
Broke down each one into as many considerations as necessary at this stage.

Decide ‘weather’ to use React.

Against

  • clearly overkill
  • very little state to manage
  • smallest scale app imaginable!
  • no frequent re-renders
  • overly complex

For

  • extensibility of app
  • better example for portfolio
  • I want to learn React!
  • I’m probably as good with it as vanilla web-dev
  • I want to

Decision

No. I will go for the simplest implementation possible at first. But I will think about how it would work with React, make notes relevant to that conversion, and consider a flashy show-off portfolio version at a later date.

Start

Presentation was my weak point in the quotes project. I plan to get my presentation defined first for this, with the assumption that the logical components will slot into it more easily than trying to design around functionality.

This is also consistent with a react-style approach.

Create a layout on codepen

Make a basic responsive framework by copying the settings from that earlier pen Piotr helped me with.

Basic frame

Uses a full screen solution from Stack Overflow. No idea if it’s ‘good’.

Key to maximise bg image was 100vh as the height of the div to which it was set:

.background {
   height: 100vh ;
   background-image: url('https://static.pexels.com/photos/38928/pexels-photo-38928.jpeg');
   background-size: cover;
}

Add placeholder boxes

Now at the point when I need to add placeholder boxes, values, it’s probably time to investigate the API to see what data I’ll have to play with. At minimum, I need:

-location
- prose description
- icon
- temperature display
- temperature button

temp display and button should be two components composed (keyboard shortcut for change unit as well as button? Two buttons - F and C? How to communicate best via the UI?)

conclude this section

  • Responsive background image is set via CSS and is injected by js. Ready to be acted upon by a function.
  • mobile-first approach stacks the info boxes vertically.
  • text size is responsive to the screen width.
  • values of location, weather and temperature are derived from a dummy JSON object - ready to receive actual API responses.

Start App Logic

I have already separated my values out into (what seems to me) well-defined variables.
I ought to be able to manipulate all the relevant aspects relatively easily once I am able to retrieve real data.

The current challenges are:

  • get the user’s location from their IP address (need to handle errors on this - add manual input via dropdown on fail? react starting to look good!)
  • parse location info and make API call

get location from IP

var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } 
   else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude; 
}

END OF DAY 1

Notes & follow-up actions

  • look up the inherit CSS property
  • use class or id for things like app and background? clearly unique elements
  • preferences for unicode display formats
Labels: , , , ,