Hey guys, I’ve completed my Twitch.tv project…tell me what you think(Design Layout - Responsive - Code). Thanks in advance. 
------ Twitch.tv App
1 Like
I’ve never seen the Twitch app made with that accordion effect for the users before. Very neat! The only thing I would encourage you to change is the shake animation. It doesn’t add much visual excitement, and it definitely makes it harder to read. An accessibility issue to keep in mind is that some users (a very small minority, of course) have severe vestibular disorders and that sort of motion can make them dizzy or even sick!
@PortableStick Thanks a lot for the review. I wanted to do something different with the design and the idea popped into my head. And I agree on what you said about the shake animation and I’ve changed it.
1 Like
Offline users are shown as “undefined”! Actually, I also got the same problem in my twich.tv viewer. It was working good the day before.
I already spammed this in the “Let’s discuss” topic, but here you go:
4 Likes
Yea i was looking at it and saw the undefined. I was like huh? this was working all the time !..
Aaand I’m having trouble fixing mine. I posted here: http://forum.freecodecamp.com/t/lets-discuss-your-twitch-tv-app/6006/90?u=abdiviklas Can you spot anything? Thanks!
Set
dataType: "json"
instead of jsonp
1 Like
Hi man!
Listen, I have visited your pen and it works, I can see a full list of users. and then display those offline and those online. However…
-
when I click on those online it takes me to the twich page with an twitch url and then /username (which ever name it is I clicked on)… but it only shows a black screen…
-
This one is really silly but… I don´t understand what FCC wants us to do. Do they want us to go to twitch get registered as users, then suscribe or follow some channels and then build our web app using their api to pick up information about channels that our user is following?
Cheers
hey @fuecisia, im not sure why that happened, I checked again but its working fine now. To get twitch app to work properly now, you need a client id which you will be required to sign up (only just have to create an account) and register your app , upon registering you will get a client id you must then include in the headers of your request as they’ve instructed(but since that doesn’t work you will have to include the client id in the Url you use to make the call to the twitch API). Hope that made any sense.
Hi Azdrian,
Thank you very much for your reply. What you say makes sense. However I would like to reformulate my question. They are asking us to retrieve data from the twitch site though their api. For example if FCC is live or not. That is a fact that is completely independent of me following FCC channel or not. So, my question is… are they asking us to gather data related to our own user or do we only need the user in order to get the client ID? When we talk about the list of users online/offline… where does that list come from?? is it a list that we have to build by following channels?? (if that is the case, they could just have said so!).
On the other hand, just for your info, I have checked again and still get that black screen. It also happens when I try other guys´ web apps, so I think it is not your code but twitch’s.
cheers
PS: hey, I have found a very nice example of twitch web app from a guy also from FCC in Code pen. Looks great and does not get the black screen. The guy has definitively gone the extra mile with this challenge. You can check it out here https://s.codepen.io/CodesAndJazz/debug/pbkKQN . I have not seen into the code yet as I want to try by myself.
Ahh I understand where you coming from but FCC supplied us with an array of Twitch.tv usernames to work with.
Hint: Here's an array of the Twitch.tv usernames of people who regularly stream: ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]
With that being said, the list above can be use to build the Twitch.tv app that is independent of our user account on Twitch.tv. Our account only comes into play when we need to register our Twitch.tv app to get the client id for the app to work properly and that’s it.
From there you can make a request to the Twitch.tv API and as a result of that request,there will be a JSON object. But how do we know who’s offline and online? From the JSON object, Twitch.tv app will indicate (data.stream: null ) to represent usernames that offline and otherwise for online usernames.
$.ajax({
url: "twitch.tv API url here",
dataType:"jsonp",
success: function(data) {
if (data.stream === null){
$.ajax({
method: "GET",
url: "twitch.tv API url here",
dataType: "jsonp",
success: function(data) {
//do something here for offline users(for offline users you will have to make another request to get additional information e.g logo
and link to the respective usernames stream page)
}
});
}else{
//do something here for online users
}
});
This is basically a rough sketch of what’s needed to be done… hope it clear up things a bit.
I like what the guy done with his app he really went all out on that one…regarding the black screen, i agree it has to be an error on Twitch.tv side.
1 Like
Thanx again man!
I have seen that twitch has its problems and that the array of users provided by FCC is never live (in fact FCC is moving away from twitch according to themselves) I will try to use my own list.
Also, thank you very much for your example. It helps, even if I am going with vanilla Js instead of JQuery. I really want to learn to make XMLHttpRequest and then move on to rest apis and from there to back end databases
Update: I have seen a message in the forum that says that we should use a hard coded Json provided by FCC instead of the normal response from twitch. They are going to deprecate this challenge most probably. I wonder why APIs seem to work so bad… wikipedia´s api is hell on earth, and twitch… seems to be at least problematic. I guess we better get used to this kind of real life issues
1 Like
Oh alright I wasn’t aware of that, thanks for the heads up and I agree with you, some APIs are hard to work with but the APIs we used in our projects help us in terms of learning how to work and deal with issues we may come across using them. And you’re welcome man. i second that you want to start with vanilla Js, you will have a better understanding if and when you decide to use JQuery
Can’t get anything to work on this Twitch thing…I put a variety of combinations of:
if (data.stream === null)…and user=data.stream.channel.display_name (and other varieties)…
I get: Uncaught TypeError: Cannot read property ‘channel’ of null and ‘stream=null’ also not found…
just being a little general, but I checked the code from successful projects…nothing works…
How did you do twitch tv activation? Please tell me. I can’t do [twitch tv/activate] after installing it.