Treehouse Badges Website Widget

I got my hands dirty and made a similar module.

You can find the code on my codepen.io

Alrighty folks, time for another update! I have my latest work on the badges widget uploaded on my site (at the bottom), however I do not have a walk through for this code yet. This version of the badges widget is a lot more complicated than the previous one and I am not sure I will be writing a walk through for it (because it would be too long), but rather I think I'll just open source it after I refactor it a ton to be more simple to use (like a jQuery Plugin). Thanks to everyone that's been following the project thus far, and to those who have contributed to it!

Alright, hammered the post out this morning: How to make a Treehouse Badges Widget

Updated Reportcard.js yesterday. It Has new CSS spinners, and also now calculates it's font and badge sizes based on it's parent element rather than the bootstrap span* class. This is so that the widget doesnt have to be dependent on bootstrap like it was before, so it should be more compatible with wherever you might want to place it.

I also removed the course percentage bars. I felt they weren't really that relevant to display, and may refactor a future version to have an interactive doughnut pie chart option instead.

If you would like to see a feature added, come participate in the open source github project and put in a feature request in the 'issues' area, or fork the project and do your own thang with it!

Riley Hilliard - I liked the idea of your widget, but I wanted to make a 2 tweaks. It shows the 12 most recently earned badges and has a CSS tooltip.

Here's how it looks.

Here's the codepen: http://codepen.io/jamesbarnett/pen/fcugz

Alright everyone, got the job offer and now have a couple weeks before I start, so I'll be working on the "how to make a treehouse badge widget" post starting Monday, woOo! Stoked to finally have the time to start writing all this up :D

This isn't working. Both of them.

Tommy Morgan Ryan Carson Faye Bridge Been getting a lot of emails the last couple days about reportcard.js not working. It looks like Treehouse shut down their public API, which is breaking the widget. Will the API no longer be public?

The issue with reportcard.js was Treehouse changed their API to be behind SSL, so the API is now https:// instead of http://. I updated http://reportcard.rileyh.com/ with these changes, so pulling down the new .js file should fix issues with the widget

Jeremiah Shore Although I wasn't involved in the wordpress widget, I would imagine the slowness is probably because it makes a API request to treehouse before loading the page. This would block the server from returning the page until the request from treehouse completes, which can take seconds. I made an open source jquery plugin that uses async AJAX to load the data from Treehouse, so the jQuery plugin won't block your sites loading time. Additionally it caches that treehosue API request, which will make the widget load instantly on successive page loads, and also saves the Treehouse API some unneeded requests. You can find that, along with instructions on how to install it at: http://reportcard.rileyh.com/

This is so super awesome!

Very cool man! Thanks for sharing!

Whoa, that is rad!

That's slick!

Thanks! This could actually be a pretty cool lesson too. Building some kind of AJAX widget to read 3rd party JSON. Would be awesome to be able to incorporate a users own information like their badges etc. I think people could get stoked on that. (I did, haha)

Nice!

That is sweet! Thanks for sharing!

Awesome work!

Congrats Riley - awesome! :)

Personally I think showing all the badges in the sidebar lead to an extermely cluttered looking site.

For the sidebar, I'd have a "what I learned this week" widget, with the badges from the various sites that you've acquired in the last 7 days.

Also create a summary with some stats.

• Total number of badges earned on
• Site member since
• Badges per week average

You can do it for all sites culmalative as well as break it down by site.

Then have another page where someone can see of of your badges

@James Barnett, really stoked on the input. Yeah, I was thinking the sidebar was looking a bit cramped, especially with the codeschool and codecademy badges not being able to fit together all that well (one of the reasons I didn't include those on the front page). I never even thought of pulling membership data like 'total badges', or 'member since'. Forsure on my list of things to do next for the widget! Thanks

Hi Riley, Love this! I wouldn't mind know how all of this was done. I have some ideas on how I can use something similar to this on my personal website.

The badges do look a little over whelming at first but I love this design. Kudos dude!

@Suleiman yeah, I've been playing around with a lot of different styles. At least for the front page i wanted them to be large, because a lot of the design is "Big Content" (if that makes sense) But I am still playing around with different designs for the sidebar. Already started pulling in some of the functionality James Barnett suggested with the badge totals etc. I think I may end up shrinking the icon sizes to maybe fit in more of a 300px X 300px box, but that takes a bit to redesign, especially with the nth-child responsive offsetting being kind of a hassel to re-do. Getting closer to being finished though!

@Riley it looks and works superbly. Any chance of a write up on how to get he badges from he various sites loading up? ;)

@suleiman, yeah forsure! Mark Flavin worked on a large part of the JQuery backend that loads the badges automatically that I've built off of, so I'm not sure if there might be a good way for us to write something up together so he gets some credit too? But yeah, I have a few Articles in the mental que including a general review of Treehouse and then i could write up an explanatory walk through on setting up the treehouse website badge.

Wow! I want something like this on my portfolio! A write up would be greatly appreciated. Impressive work guys :)

@Emily, I definitely have plans on writing a how-to, but my schedule just got really slammed, so it may be a few days before I can get around to it. Stay tuned! :)

Still tuned in!

Me too :) Whenever you are ready dude.

Awesome plugin! One question, how do I get the badge to link to the badge info on the treehouse website? If I hover over it I can see the title but I can't click to link. Thanks!!

So sorry I havnt been able to write this up yet. I've been fielding a bunch of job offers and life's been a bit hectic (good problems) I'll try my best to get this on github and do a installation writeup sometime next week.

@Riley - You have no obligation or commitment to us regarding this. If you are busy, that's good. Whenever you are redy feller :)

Congratulations Riley!

Looking forward to the post :)

Freaky deaky doo doo this is awesome. I look forward to using your awesome skills that pay the bills for my own personal benefit.

@Riley Congrats on the new job! :)

I am actually looking forward to this! Maybe this is something that can be applied to the bonus content area. In that we can have how to guides like this widget added to give Gold Members more of an incentive to remain members. Just a thought though.

Congrats on the new job Riley!

Riley Hilliard - Now that's what I call a well executed tutorial. I just skimmed through it, but it looks like a pretty solid explanation.

@Riley - Kudos to you man! :) The write up was perfect. Thank you.

I seriously recommend that this get put up on the Blog hint hint :P

Thanks guys! And if you use this on your site, dont forget to show everyone. I'd be stoked to have a look at how everyone adapts it to their sites :)

Here is a quick add to my website. I wanted to add some animation to the images though using animate.css but I will probably do that after some careful thought.

Black Lion Media - about

Thanks so much for this Riley, just installed it to my site here http://www.karlmoss.com (still a work in progress mind).

All I need to do now is earn some more badges!

Thanks again, Karl

Awesome Karl Moss!

Very cool - if you have a bunch of badges you will want to go ahead and make a static variable for data.badges.length else each time the loop runs it having to recalculate the length adding a bit of overhead.

Jack Sharpe I worked on your points display code a bit. Just forked it and wrote some JS that sorts the points object to be arranged by highest number of points in a category, so that the bar displays in highest -> lowest point totals. Check it out here: http://codepen.io/rileyhilliard/pen/ntixr Thanks for the head start on the code. I have a few other ideas I may throw at it when I have some free time in the future.

Little cool update to the project that I will make a GitHub repo + instructions on how to implement. So I have been noticing that the response time on the treehouse json API is usually around 3-4 seconds (kinda long). As a consequence the badges load pretty slowly. I started thinking about how it is also pretty unnecessary to make a new request to the treehouse badges json API on every page that a visitor visits, calling that 3-4 second load time again. SO I decided to make a stellar PHP script that calls my treehouse profile json object and write the response to an internal file on my server called 'treehouse.json' and then wrote a cron job to execute that script every 24 hours. Now my badges call an internal file (treehouse.json) instead of teamtreehouse.com/rileyhilliard.json. This has literally cut the load time by 75%+ , and is also probably saving the treehouse servers some unneeded calc time when searching for my badges & points! Pretty cool. I'll pack everything up later next week so everyone can start having a look at how it works.

Way cool report card project. Thanks for sharing!

Thanks for sharing at Github! Excellent work.

Hi, can anyone advise how this could be embedded onto a wordpress site? Thanks.

Cath Ellis Because it is a jQuery plugin, as long as the wordpress site has jQuery on it, it'll work. If you want it in a widget, just go to the widgets section, select the 'text/html' widget, add in the HTML hooks shown on the demo site, and then add the jQuery code needed in your main js file. You may need to play around with the CSS a bit to get it to fit your site best.

You can also add it anywhere on your site as long as you have the correct HTML hooks and jQuery code loaded, it will build itself automatically on the page.

http://reportcard.rileyh.com/instructions.html

excellent craftmenship, very bright, and congrats on all future endeavors. Code looks beautiful, if only it worked on my site. :(

Hi Riley. I tried and could not get it to work. these are the steps i took i forked and cloned the repo reportcard and then went to edit the html file and added the instructions outlined on the link you provided. After I completed the last step of adding my treehouse username to the html file I found that I was not able to save the repo. What am I doing wrong? please help