I’ve been working on a website for about a month now called streambuddies.com. It’s a fairly basic Twitch.TV stream viewing tool that makes it easy to see who’s online and jump between streams.
The app was a good introduction to a couple of different concepts for me. I thought it could be interesting to run through each of those here. This isn’t by any means full documentation of my code, but more of a run-through of what I learned in the process.
When I first thought of this project, I knew I would need to do a few specific things:
- Load content from the Twitch API
- Regularly re-check that API for updates (to update stream information, and see when people come online)
- Take the api result (a JSON object) and display the online and offline streams
I also initially planned on using Bootstrap for the majority of the stylesheet, but ultimately found the mobile-first nature not quite appropriate for a stream viewer (which is inherently hobbled by being dependent on Flash), and ended up spending a lot of time either overriding the bootstrap CSS, or working around it. The main Bootstrap feature still used in StreamBuddies was modals.js, which is used to prompt a user when no Twitch user loaded – be it through the query string or through cookies. The rest of the stylesheet is written in LESS, and compiled/minified using Grunt.
I also wanted to give kudos to CSS Tricks for providing some very useful code snippets during the process. Without CSS Tricks and StackOverflow, I probably wouldn’t have gotten off the ground on coding in general, let alone this project.
Working with the API
I started this project because I wanted a good reason to get used to using AJAX and working with external APIs. Twitch has a (mostly) great API that was well documented on GitHub, and given how much I watch Twitch, it seemed like a tool that I would actually use.
There are two core components to the Twitch API used by StreamBuddies. The first is, as you would guess, the “follows” API. This takes a Twitch username and returns a list of people followed by that name. When I saw this feature, I was a bit surprised. As it is now, I don’t feel like Twitch uses the information on who you follow very much, and for a long time it seemed like they barely acknowledged that this feature existed. So I was happy to find something that both gave me useful data, and could maybe serve a purpose that I don’t see many other tools filling at this time.
Designing the Layout
The stream page layout was based on a mix of SpeedRunsLive and the native Twitch stream. I liked the core concept of having the navigation and the chat on both sides of the screen. Having the stream list on the same level as the stream itself makes it easy to tell when someone comes online, which I’ve felt is never easy to see on either Twitch or on SRL.
Having the stream itself be as big as possible was a priority. I’m somebody who never likes to fullscreen Twitch, because then I lose the whole monitor. Instead, I’ll resize a window to the maximum size where it doesn’t interfere with whatever else I’m doing, and leave it in one place. As such, I needed the stream to easily adapt to whatever size I could afford to make it at that moment.
I’m still not sure if my implementation of this was the best. Basically, I use jQuery to determine the window’s current width, subtract the width of the chat and the stream viewer, and set the stream viewer to that width (and then set the height based on the aspect ratio * the width). I’m willing to bet there’s a simpler, non-JS way to solve this problem, but every non-JS solution I tried didn’t seem to work out quite right. That just left chat.
Twitch chat is a weird animal in itself. On some streams, the twitch chat is a valuable place for interaction with the streamer. On others, it’s a wall of Kappas, ASCII art, and memes. Having the ability to toggle chat was fundamental, both because of it’s sometimes-irritating nature, and because it takes up a significant amount of screen real estate. For some reason, finding a decent height/position for Twitch Chat was a challenge, until I said “screw it” and just tried making it nearly 100% of screen height. I personally prefer a chat that’s the same height as the stream (probably because I’ve spend so much time on SRL), but for this implementation, having it be the full height seemed to work best.
There’s still one issue with the design that I’d like to address, stemming from the nature of widescreen monitors. When you put boxes on the left and right sides of a monitor (as the stream list and twitch chat surround the stream on StreamBuddies), you make a center content area that’s a more narrow rectangle. For something like text, this is good – wide text boxes fatigue a reader. However, with video, you’re forced to use a horizontal rectangle.
As such, we end up with a horizontal rectangle in a both that is a vertical rectangle. That leads to a big chunk of the screen that’s wasted space. Twitch itself offsets this with the streamer’s profile, but that data doesn’t come in the API calls I’ve been doing. Initially, I was going to put some recommendations for other streams to follow in that space, but as I explain below, that feature didn’t seem to work out as planned.
Failed Addition: Recommendations
I could probably write an entire section on this part of the project, but since it never made it past a few failed commits on GitHub, it probably wouldn’t be too interesting to anybody but me.
In short, I wanted to see if I could create a recommendations engine based off of the Twitch follows/followers API. The rationale was that, if you look at who else follows someone you follow, you could use those people’s follow lists as “recommendations” to help you find other streams you may wish to follow. I’m sure there’s a more technical term for this type of search/recommendation, but it basically comes down to “a lot of people who like X also like Y, so since you like X, you probably would like Y.”
After some trial and error, I got a basic page together that would gather these data. However, there were two main problems.
It was slow as hell to do through the API. You literally need to query twitch hundreds of times per follow in order to get a list of recommendations. It generally took at least a minute to do a full run through of your follows, and required hundreds, if not thousands of queries. This could have been optimized a bit, but the second issue kept me from getting that far.
The findings were not that useful. I tested the function against my follower list and, aside from the people I already followed, I found almost no consensus on good recommendations. I only found a handful of people that surfaced more than a few times in the sample, and they didn’t seem like good fits to be recommended, at least at first glance. Somewhat discouraged by this underwhelming result, I’ve shelved this part of the project for the moment.
Writing this out now, I feel like this feature still has some potential. It’s just not as simple as I’d expected it to be, which happens plenty when working on a project like this. I suspect that putting more effort into selecting whom to sample, along with more efficient use of the twitch API, could at least make this practical, if not as easy to integrate as I’d hoped.