Twitch Api + Check Your Own Channels!

I’m a little proud of this. Not only does it populate with three channels, you can use it to check any channels you want.

No database means I can’t make it save a channel list, but it’s functional and should work/look decent on any mobile device.

Any feedback would be greatly appreciated. (Don’t be scared to tell me it’s shit or that I fucked up - although constructive criticism is preferred)

Looks good and works well :slight_smile:

I only had a quick look at your code so forgive me if I’ve missed something but it looks as though you’ve written the same success callback function a few times? You could always just name the function the first time and call it when it’s needed rather than writing it every time :wink:

1 Like

That’s actually part of the ajax api call. If the ajax call is successful it grabs the data and does __________. One is an ajax call inside another because you have to make a separate call to do the online check. The other two are for the channel addition functionality, one for and one for keypress.enter. I’m sure there’s a way to combine the two but it’s always the last thing I do and I just create two separate functions because I know it works that way.

Just one quick thing–

I typed in a nonsense string in the check channel section and got a broken link and a status of “offline”

One of the required user stories of the challenge is: “I will see a placeholder notification if a streamer has closed their Twitch account (or the account never existed). You can verify this works by adding brunofin and comster404 to your array of Twitch streamers.”

Which I found to be totally obnoxious to deal with (especially if you don’t want to make too many API calls), but unfortunately is something you’ll have to deal with.

Oh, actually, I saw another thing.

One other issue worth considering is the appearance of the channel logos on small screens. Right now, one of your streamers is playing Final Fantasy XIV: Heavensward (makes me feel so old), and while this looks fine at larger screen sizes, around 300px width and under it starts to get wonky. Because the name of the game is long, it starts to stack vertically, and then the logo starts to shrink up into the upper left-hand corner of the white rectangle. Also, the name of the streamer and the name of the game start to overlap one another.

Sadly, I was trying to figure out how to fix this, and everything I did only made it worse. So you’re on your own there.

1 Like

I didn’t see that User Story, since it apparently didn’t exist when the challenge was initially made.

However, my version does read back an error message if you try to add a channel that doesn’t exist, which should count towards the User Story’s completion considering Twitch works off a system that says you either made an account or you didn’t. A placeholder notification for such a thing seems rather pointless and isn’t even utilized by Twitch’s own app.

The CSS issue is regrettable, but there’s no obligation to make any of these projects mobile-friendly and it only occurs in situations where someone is playing a game with an abnormally long name. The way to solve it would be to add another CSS level that makes everything just a bit smaller on screens under 300 pixels, but I see no reason to do so any further than I already have with the project. Of course if I were hired to create it that’d be another story, but I think what’s there works for the intended purpose. (Actually if I were hired to make it then it’d be given a separate layout entirely for smartphone-sized devices.)

Me and CSS have a hate-hate relationship. Design is my weakness but I also don’t think every developer has to be a designer - despite what the majority of would-be front end dev employers seem to be looking for. I much rather prefer working alongside a designer and after this front end certificate is done I’ll be pursuing a more back end dev route.

Thanks for pointing out the user story and I appreciate the criticism. I was concerned the title length would be an issue but “League of Legends” worked so I figure statistics is on my side. I’ll take off the Final fantasy streamer and most people will likely never run into the issue.

I’m glad to hear someone else saying this. I’ve been killing myself over the last week or so trying to weed out every little detail in my projects before I finish up the certification. On one hand, I see the value in making everything come together, but on the other hand, I feel like I’ve learned what I can from those early projects and I’m eager to get on to something else.

I don’t want to complain about FCC because it is 1) free and 2) an amazing resource/community, but that Twitch challenge is such a mess…

Anyway, best of luck going forward!

1 Like

I understand wanting to make something the best you possibly can and tweaking it as much as possible but, having worked for tech startups and tech-based companies, I also know that’s not how the real world works. Sometimes you have to take into consideration the ultimate objective, and that may mean launching with a few bugs or not having everything as picture perfect as you’d like it to be.

It’s a trap I see people in creative fields get stuck in often - and make no mistake, coding/programming is a creative field. Always do the best you can, but you have to move forward or be left behind. The main purpose of the Intermediate Projects is in their overall functionality - drawing from a variety of APIs, displaying and/or manipulating the information you pull in, and in general learning through practical application. The purpose is not to build some flashy web app that no one, no matter how good it is, will ever use.

Don’t get me wrong, I’ll be going back and touching up each project before submitting for the certificate too - the Twitch API project in particular could make a good portfolio piece if I deck it out - but right now the goal is getting it up and working. (Also I’m a little proud of mine because it does have some extra functionality that makes it useful to other people since they can look up their favorite streamers too ^^)

I started FCC on Dec 29th or so and intend to have my front end certificate by the end of the month. I’m essentially putting myself through my own bootcamp, trying to get up to snuff, get a coding/programming gig, and then get even better. In my eyes, FCC is a tool to do just that - nothing more, nothing less.

1 Like

It’s fast dude, and neat, it works perfectly on small devices as well. but I noticed something.
If you keep searching the same channel it keeps adding the same channel to the bottom of the stack. I also think if you could close the channels that you searched but didnt wanted it would be great, with a X or CLOSE button or something.

1 Like

I was initially going to do that until I realized without a database it would be a little pointless since even refreshing the page would reset it. That also makes the duplicate channel issue a bit of a moot point, considering most people wont even notice it’s possible and on refresh or revisiting it all resets.

You also can’t leave the page open indefinitely because once it pulls the data from the api, that’s it. If one of those channels goes online you’ll never know until you have the api recheck, which could technically be done because you can recheck/repopulate the same channel.

With a database and intent to add to the AppStore or Google Play, I’d definitely include that functionality. But with just codepen and an FCC project in mind, I chose to stop at the base addition functionality.