Code Notes: FCC - twitch viewer II

13:00
Day two, and my clarity and resolve is already under assault!

I got a little bogged down into how to display an svg logo (abandoned now), and I find myself dithering over whether to have 2 cumulative filters for online status (on, off, both) or just 3 separate filters.

I guess this is appropriate since it’s part of the UI, which is the phase I’m working in. But at the moment I seem to be mocking up the mockup, still identifying which things I need to include for functional purposes and unsure how they fall out of the API responses.

Writing this helps. I’ll push on with bare-bones component placeholders and not worry about styling for now.

Next I’ll have a pass at the API call and see if I it feels like I’m on the right track.

13:37

Templated the userBox in html. In addition to the container box there are at least three subcomponents. I don’t really want to have to write all those createElement statements in the render function, so for the next 20 minutes I’m going to look into html templates.

13:56
Watched this.
Should I have a go?! Why not!

14:51

OK. This seems to work now:

copied the underscore.js dev file into my project folder
referenced it in the script
used the code under the video in the link above to create my template:

  render() {
    let userHTML = _.template(
      '<div class="userBox">' +
        '<img class="avatar" />' +
        '<div class="userText"><%= userName %></div>' +
        '<img class="statusIcon" />' +
      '</div>'
    );

  let toAppendString = '';

  for (i=0; i < data.accounts.length ; i++) {
  toAppendString += userHTML(data.accounts[i]);
}  document.getElementById('container').insertAdjacentHTML('beforeend', toAppendString);
  }

So, what it does is make a string then iterate over the data object appending variants on the template, then renders the whole block as HTML. Wonder if that’ll cause me problems later? Oh, well, for now it’s happy days!

Apart from using _js, the only new thing here is the insertAdjacentHTML method. I suppose I ought to look into the spec later.

15:20

So, feels pretty good. Major lessons include:

don’t be scared of new things (when’ll that sink in?)
timeboxing might help me not be scared to try but also not dive too deep on first attempt
(spec) have something I’m confident I can be successful at as a back up before trying something dodgy?

Now I’m going to polish up the UI a bit since I’m reasonably confident I can work with what I have so far.

Todo

check insertAdjacentHTML spec
read the _js source code please
figure out, if I’m using _js, I might as well make the most of it so what else can I do with it?

Sunday, 28 May 2017

FCC - twitch viewer II

Todo