Twitch.tv Client (FCC Speedrun Project #10)

This wasn’t a project where I learned a lot of new material or experienced any huge successes. Looking back on it, though, after the fact… it showed me how much I have learned. Even since starting the Speedrun less than three weeks ago.

The finished product.

There were so many little things that I did this project, almost without thinking about them. Using promises, handling API requests, using JavaScript to grab and change elements on the screen… basic stuff, but it’s coming so much more naturally now than it did 2 weeks ago.

Reflections

There was really only one “new” thing that I did in this project. For the first time, I intentionally used ES6 code in my project, on the front end. I’ve been using ES6 in some of my server-side code, but I’ve been hesitant to use it on the front end. I don’t know which browsers and browser versions will run things correctly, and I still haven’t made the leap into figuring out polyfills and transpiling.

Which means that using ES6 might not be a good thing. I guess it’s only a matter of time before I bite the bullet and figure out how to use Babel. Or something.

Really, though — those newer features made coding easier and more enjoyable. Here are just a few:

Using the Fetch API:

Making an API request using ‘Fetch’.

This actually was a first for me. I’ve made API calls with jQuery before, and from a server using npm’s ‘request’ module. But my other Speedrun projects have all used the new XMLHttpRequest() syntax. This is so much nicer. Partly because it’s shorter. Mostly because you get a promise back.

And that means that you can do this:

Right out of the box, without having to convert callbacks to promises.

Playing with syntax:

And once I’d committed to using newer features anyway, there was no reason not to have some fun with them, right?

I used destructuring assignment to unpack an array of resolved promises:

Mostly the same picture as above.

And then used ‘let’ for block-scoping, just because I was too lazy to figure out whether I needed it. (I didn’t.)

And then I went and figured it out anyway…

I also used the new template literals to build HTML divs with user information:

Some day, when I learn React or Vue, I’ll have template literals in templates.

Final thoughts

Figuring out Babel (or another transpiler) definitely needs to go on my to-do list. In the mean time, with only a few days left before Phase 2 of the Speedrun, I think I’m going to bounce back to the API projects and try to finish those.

(Live demo for this project is available HERE. Code is HERE.)

Next up: Image Search Abstraction Layer.