Get Twitchy

If you haven’t checked it out, https://www.freecodecamp.com is awesome.  It’s a great collection of challenges and projects that lead you down the path to software development enlightenment.  And – spoiler coming here – it’s all free!  If you’re even a tiny bit self-motivated, this is a very useful resource for learning to program.

One of the projects is to create a Twitch.tv ‘status’ app.  Take a list of streamer usernames and use the Twitch api to display their status.  If active, show what they’re doing.  Each listing should also have a link to their stream.

Sounded like a perfect place to practice some Angular.  Binding the UI to the data received from the api is kind of a perfect use case, no?  I was familiar with the basics, so I really tried to focus on Angular best practices.  Using services and factories to manipulate the data, instead of doing it directly in the controller.

Using a tool like codepen (http://www.codepen.io) is a great way to rapidly get up and running, as well as experiment with different aspects of the Angular app.  I could quickly set up the app the ‘bad’ way (everything in the controller), get it working, then refactor out the logic and data into services and factories.  Codepen also let me practice some other problem solving skills- it’s a great tool, but the ease of use can also cause some issues with other tools (Twitch’s api doesn’t like you accessing from a frame, and Angular routes had a little trouble with that as well, also- you can’t really use the templateUrl option in Angular with Codepen), but those minor negatives were far outweighed by the positives.

I’ve still got some work to do, though I did submit the app as ‘finished’.  I found myself playing and tweaking and changing every little thing- realized that this process could probably go on forever- and called it good.  Confession: I still manipulate the DOM in a controller in a couple places.  It just works, and it’s so familiar from the jquery days.  I’ll kick the habit eventually, but for now, that security blanket stays!  Confession 2: I still don’t really get how angular-animate works.  I can get simple show/hide use cases to work, but anything more complicated sends me running back to element.style.  Confession 3: I absolutely Googled the code for the css3 transitions on different views.  I made tweaks to get it looking as I wanted, but definitely stood on the backs of some people much smarter than I for that aspect.

Want to tear the project apart?  Tell me how bad it is?  Check it out at http://codepen.io/joedriscoll79/full/BKJQNa/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s