Can someone take a look at my Twitch.tv Api project and help me figure out why my content is not fitting it’s parent div, and how to make it resopnsive? Thank you!
https://codepen.io/tsjohns9/pen/yoBERg?editors=1111
Nevermind I fixed it
My image isn’t that responsive so if anyone can help out on that I would appreciate it.
Your more serious problem is that you’re using async: false, which is deprecated. Check in the browser console and you’ll see something like the following:
[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help, check https://xhr.spec.whatwg.org/.
Basically, it locks up the user’s entire browser until all the requests are complete.
There are a few ways around this, depending on the exact results you want. Probably the simplest one would be to change your for loop into a recursive loop, with the next iteration in the success callback.
This would be more-or-less just as fast as your current implementation (but without locking up the browser). However, it would still require waiting on the previous request to be returned before sending the next one.
A faster way of getting all the data back would be to keep the for loop but make it async. One disadvantage is that this prevents you from using i for anything useful in your callbacks, because the loop will finish executing before you get any data back (so i will always be channelUrls.length + 1). Again, there are several ways around this, but probably the most obvious is to switch out any of those variables with equivalent data found only in the relevant response. In this case, it’d mean taking the channel name from data._links.channel, perhaps using a regex to get only the part you need.
1 Like