My Twitch.tv app gave me a twitch
5 days of promises, arrays, loops, and hell.
In case you’re not familiar with the Twitch.tv viewer from the FreeCodeCamp curriculum, here are the user stories it needs to fulfill:
- I can click the status output and be sent directly to the Free Code Camp’s Twitch.tv channel.
- I can see whether Free Code Camp is currently streaming on Twitch.tv. I added several other users to this requirement
- If a Twitch user is currently streaming, I can see additional details about what they are streaming.
- I will see a placeholder notification if a streamer has closed their Twitch account (or the account never existed).
Additionally I am using this project to practice the following:
- Vanilla JS (No jQuery)
- CSS, Flexbox if needed for responsiveness (No Bootstrap)
I have been relying on bootstrap a bit too much for my designs, using most of their default classes (like wells) and only modifying colors etc. And jQuery needs to stop, if I’m even going to really understand JS.
I actually started the twitch.tv app about two weeks ago after a cohort member had some issues using the API. I helped him find the workaround provided by FCC, and started delving into the API format and response just for fun. I had been playing around on codepen, and even got the right data to add itself to the document body. Then I made a fatal mistake…I asked for help on the forum.
So, which I was trying to figure out how to remove function declarations from my loops, I opened a pandora’s box with this .fetch() nonsense.
I spent quite a lot of effort going down the wrong path, trying to create two arrays which contained users that either were or were not streaming. I reached out to the cohort and confused the heck out of some poor souls, and even kept one up past his bedtime.
In the above snippet, I am trying to push a username into either online or offline depending on whether or not the user is streaming. For async reasons, this don’t work so good. Eventually someone got it working, sort of, using the Promise.all() technique, which I had read and forgotten about! This would wait until all of the promises have returned before proceeding to the next step. The best advice I got was to ditch the arrays altogether, and add the items to the DOM as they come. My entire design scheme, if you can call it that, was introducing a lot of unnecessary problems. Oops.
After getting chastised by the one-and-only P1xt, I moved my work off of the ‘pen and into Atom, my best frenemy (FYI Medium recognizes frenemy as a word). Started again using git with github pages to host. +1
There are two things to check for each user in the array:
- Is the user a REAL user (not a deleted/nonexistent account)
2. If the user is real, is the user streaming right now or offline?
But, I don’t want to be messing around with multiple arrays, etc. So I decided just to add each user as a <div> to the DOM, with their name as ID (for looking up) and with a class either online, offline, or nonexistent. So this is what I’m staring down, before really looking at my HTML layout or any styles. Oh, and my whole page is 1 function which is great…
Unfortunately I’ve got a whole chain of thens on my hands now, though I am also seeing some good places for code refactorization. I also got some good practice in with arrow functions, thanks to some cheerleading from Vampiire => => =>
I spent some time refactoring my code into different functions each with its own task, and then modified the code to include access to a user’s hyperlink. I for some reason, decided it would be a good idea to use flexbox in my layout. Spent an hour or two with http://flexboxfroggy.com/ practicing, before deciding how my layout would be.
After getting tired of layouts, I added some functionality to display users according to online/offline/all, this was a fairly straightforward task after looking up the relevant JS commands to obtain all elements of a certain class.
After this, I was feeling a bit burnt out by the whole project. At this point, I’ve satisfied all of the user stories, except for the bonus one (ability to search/filter the users). I might come back and add it later, but for now I’m considering it done!
Live version can be found here
Onward!
