FCC – Twitch TV Project

Finally finished this project! I started this project during a pair programming session before the holidays and then just got busy and never finished it.

This project required using Twitch.tv’s API. Working with API’s is always challenging, especially if the API is not well documented. Twitch’s API has a lot of documentation and there’s tons of information on how to get it to work in the FCC forums: https://forum.freecodecamp.com/t/how-to-use-the-twitchtv-api/19541. (This link is also included in the project bullet-points.)

The first step was reading the forum and getting the correct API URL.
Using this: https://wind-bow.gomix.me/ as the starting point.

After getting that URL, it became time to read the Twitch.tv API documentation to see how to get the information we want. I focused on a list showing my favorite channels, but you could also have focused on users or videos. Twitch documentation here: https://github.com/justintv/Twitch-API

Endpoint Description
GET /streams/:channel/ Get stream object
GET /streams Get stream object
GET /streams/featured Get a list of featured streams
GET /streams/summary Get a summary of streams
GET /streams/followed Get a list of streams user is following

The URL I used to make the API call became: https://wind-bow.gomix.me/twitch-api/streams/' + channelNames[i] with channel name being taken from an array of my favorite channels in a for loop

Once I got the URL down, I decided to build the front-end, just a basic skeleton of the page, and then focus on the JS. Wanting to use pure JavaScript, there was ALOT I had to learn. I read about making XMLHttpRequests to the API and how to handle the request response. I also read about jQuery’s .prepend() and .append() functions and how to translate their properties into JavaScript.

You can find my finished code here: https://github.com/sunsplat/fcc_twitch

Designing this project was super fun! I played around with Google’s Material Design by using Material Design Lite.

You just insert these links into the of your HTML and you have access to the classes and icons:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js">script>

To access the icons, go here: https://material.io/icons/

To read more about the purpose and Do’s and Don’t’s of each component in Material Design go here: https://material.io/guidelines/material-design/introduction.html

View my final project here: https://sunsplat.github.io/fcc_twitch/

Advertisements

Rails for Zombies | Code School

I just completed the Rails for Zombies by Codeschool. It’s a FANTASTIC way to learn how Rails 4 works. The professor Gregg Pollack is great at explaining the code and how models are connected to controllers to views. The course Rails for Zombies Redux is free, includes 5 lessons, and follows the following structure: video lesson, 4-5 exercises to practice what you learn, wrap-up video.

There’s exercises after every video lesson that let you practice what Gregg explains in the video so you can apply what you learned. I highly recommend watching the video lessons more than once and have a pen and paper in hand (or whatever you use to take notes) to write down his clear explanations.

Here are some screenshots:

ruby for zombies

rails for zombies

rails for zombies codeschool

After completing the course, you can add a completion badge to your LinkedIn profile. I highly recommend this course to anyone learning Rails, and especially for before tackling the Hartl tutorial.

Free Code Camp

A friend recommended a new free coding resource for learning full-stack development called Free Code Camp. I’ve been trying out their lessons the past two days to see how they are. I’m very impressed with their community, network, organization, and support. They don’t teach Ruby and Ruby on Rails, which is what I’ve been learning the past few months. Instead they focus more on JavaScript and Node.js.

This is what their curriculum looks like:

800 Hours of Practice:

    800 Hours of  Real World Work Experience:

  • 100-hour Nonprofit Project
  • 200-hour Nonprofit Project #1
  • 200-hour Nonprofit Project #2
  • 300-hour Nonprofit Project

I really love the idea that you can work on some real-world non-profit projects after you complete their lessons. It’s great to get real experience and add a project to your portfolio. I don’t know any other free or paid coding school that gives you such a great opportunity.

Their HTML and CSS portion was fairly easy to go through and it was a great review since I had learned it earlier in the year. Their jQuery and JavaScript lessons use Codecademy, so you will still need to go between the two websites. I’m currently going through the Free Code Camp JavaScript so we’ll see how their subsequent lessons fair.

Free Code Camp is also on LinkedIn as an education institute and they encourage you to add them to your LinkedIn profile. Also check out Free Code Camp on Github. They are also on Facebook. I joined the Atlanta chapter.