JavaScript

Riley Hilliard
PRO
Riley Hilliard
Pro Student 17,346 Points

Treehouse Badges Website Widget

A few months ago I brought up a little static hack I made to show my treehouse badges on my personal website. Mark Flavin threw in some sweet jQuery to make the badges load automatically from my profile, and the team at treehouse showed us that user information is available in JSON, right off the profile pages! I've been working on a pretty massive website redesign on my personal page, and have implemented that widget in a couple creative ways. One is on the front page: http://rileyh.com and the other is in the sidebar on my blog pages: http://rileyh.com/blog/ If you are wondering how the arrangement re-organizes based on the device view, i wrote in some cool nth-child media queries. Thought I'd give it a share to the Treehouse community. I know Mark had a JS Fiddle of the code, but I forget the URL :-/ I think he made it a wordpress plugin as well, so maybe search for that if you are using wordpress.

I wanted to do this to my personal website. What would be the best way to do that?

51 Answers

Ethan Neff
Ethan Neff
27,048 Points

I got my hands dirty and made a similar module.

Team Treehouse Points

You can find the code on my codepen.io

Ricardo Diaz
Ricardo Diaz
30,406 Points

Like this look. Great for a resume site

Cath Ellis
Cath Ellis
10,379 Points

This looks great

Naya Moss
Naya Moss
9,892 Points

looks great! worked like a charm!

Riley Hilliard
Riley Hilliard
Pro Student 17,346 Points

This is awesome! Really dig the work on the pie chart using transforms and clips.

Erika Nielsen
Erika Nielsen
15,180 Points

This is perfect...you rock!

Paula Farrugia
Paula Farrugia
7,500 Points

Hi Ethan , I was trying to view your demo on codepen and it keeps saying that it couldnt connect, you have any idea why this would happen? Thanks!

Jacob Bergdahl
Jacob Bergdahl
29,019 Points

Paula, change the "http://" in the top of the JS code to "https://" and it should work!

Mister Moody
Mister Moody
28,138 Points

I had this working last spring, but its having issues at the moment!

Scott Baumbich
Scott Baumbich
18,279 Points

Ethan,

Any idea how I can get this code to work in Weebly? Not sure how to get the JS working properly, any advice would be appreciated.

Riley Hilliard
PRO
Riley Hilliard
Pro Student 17,346 Points

alt text 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!

Riley Hilliard
Riley Hilliard
Pro Student 17,346 Points

Thanks guys! Also a cool thing I have working here in the background is a PHP script I have running on a cron job that pulls my profiles json object every 24 hours and stores it (kinda cache's it -ish) on my server. The API response time of Treehouse is usually 2.5-4 seconds, so i figured this would speed things up and save your servers some time looking up my records with every page load. Now all the widgets use is your CDN to send the images over, and I've shaved close to 3 seconds (average) off the response time! Nick Pettit Ryan Carson Jeremy Jantz

James Barnett
James Barnett
37,529 Points

That's beautifully designed, it's probably my favorite online "report card".

James Barnett
James Barnett
37,529 Points

The next feature, I'd suggest is filter recent badges by category.

Riley Hilliard
PRO
Riley Hilliard
Pro Student 17,346 Points

Reportcard.js

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!

James Barnett
James Barnett
37,529 Points

You are showing 6 badges but in your list of "last few courses" you are only listing the names of 4 of them.

Riley Hilliard
Riley Hilliard
Pro Student 17,346 Points

The "last few" is not meant to be all the info from the latest badges displayed. Showing more than 4 written items starts to be a lot of text at the bottom, which is why i limited it.

James Barnett
James Barnett
37,529 Points

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

James Barnett
James Barnett
37,529 Points

I made a version that filter's badges by category version. Categories are the ones listed in the Library, Websites, Programming, Business, iOS Development, Android Development.

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

Mister Moody
Mister Moody
28,138 Points

James Barnett: I like the 'by category' Badge app, but I cant get your CodePen to work for me!

Riley Hilliard
PRO
Riley Hilliard
Pro Student 17,346 Points

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

Riley Hilliard
PRO
Riley Hilliard
Pro Student 17,346 Points

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?

Riley Hilliard
PRO
Riley Hilliard
Pro Student 17,346 Points

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

Riley Hilliard
PRO
Riley Hilliard
Pro Student 17,346 Points

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/

Patrick Bell
STAFF
Patrick Bell
Treehouse Staff

Very cool man! Thanks for sharing!

Riley Hilliard
PRO
Riley Hilliard
Pro Student 17,346 Points

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)

That is sweet! Thanks for sharing!

Awesome work!

Ryan Carson
STAFF
Ryan Carson
Treehouse Staff

Congrats Riley - awesome! :)

James Barnett
James Barnett
37,529 Points

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

Riley Hilliard
PRO
Riley Hilliard
Pro Student 17,346 Points

@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

Ricardo Diaz
Ricardo Diaz
30,406 Points

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.

Suleiman Leadbitter
Suleiman Leadbitter
14,847 Points

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

Riley Hilliard
PRO
Riley Hilliard
Pro Student 17,346 Points

@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!

Suleiman Leadbitter
Suleiman Leadbitter
14,847 Points

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

Riley Hilliard
PRO
Riley Hilliard
Pro Student 17,346 Points

@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.

Emily Young
Emily Young
18,258 Points

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

Riley Hilliard
PRO
Riley Hilliard
Pro Student 17,346 Points

@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! :)

Suleiman Leadbitter
Suleiman Leadbitter
14,847 Points

Me too :) Whenever you are ready dude.

Lisa Abbate
Lisa Abbate
1,851 Points

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!!

Riley Hilliard
PRO
Riley Hilliard
Pro Student 17,346 Points

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.

Suleiman Leadbitter
Suleiman Leadbitter
14,847 Points

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

Suleiman Leadbitter
Suleiman Leadbitter
14,847 Points

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

Ryan Carson
STAFF
Ryan Carson
Treehouse Staff

@Riley Congrats on the new job! :)

Ricardo Diaz
Ricardo Diaz
30,406 Points

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!

James Barnett
James Barnett
37,529 Points

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.

Suleiman Leadbitter
Suleiman Leadbitter
14,847 Points

@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

Riley Hilliard
PRO
Riley Hilliard
Pro Student 17,346 Points

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 :)

Ricardo Diaz
Ricardo Diaz
30,406 Points

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

Mark Flavin
Mark Flavin
10,199 Points

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.

Riley Hilliard
PRO
Riley Hilliard
Pro Student 17,346 Points

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.

Jack Sharpe
Jack Sharpe
3,658 Points

Sounds good Riley Hilliard I will keep an eye on it and if you would like to maybe do some work together on something then catch me on twitter @jack_sharpe or let me know on here. i am all open ears to ideas :)

Riley Hilliard
PRO
Riley Hilliard
Pro Student 17,346 Points

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.

James Barnett
James Barnett
37,529 Points

You can also use a curl one liner to grab the json file and run it every 24 hours use a cronjob.

Lisa Wagner
PRO
Lisa Wagner
Pro Student 13,702 Points

Way cool report card project. Thanks for sharing!

Michael Key
PRO
Michael Key
Pro Student 2,369 Points

Thanks for sharing at Github! Excellent work.

Riley Hilliard
Riley Hilliard
Pro Student 17,346 Points

Thanks! If you have the widget on your site, I'd love to take a look :)

Cath Ellis
Cath Ellis
10,379 Points

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

Riley Hilliard
PRO
Riley Hilliard
Pro Student 17,346 Points

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

Jeremiah Shore
Jeremiah Shore
Java Web Development Techdegree Student 21,616 Points

I'm impressed at how massive this thread is; lots of good info to be found here. I came across this because I am/was using the Official Treehouse Badges widget for Wordpress. I wanted to share that I ran into some issues with optimization when using it. Anyone else retrieving the badge images might find the same if they run their site through some performance tests. I used GTmetrix for my results.

All badge images are scaled down by the widget's css. The defaults are somewhere around 100px x 100px. However, their actual sizes are considerably larger. For my recent badges, some are 1250 x 1363, and the smaller are 300 x 327. The file sizes aren't that bad, about 39KB for one of the larger images. I think a bit of the slowdown is coming from the CSS calculations when the pages are being rendered. Some interesting info about that in the performance section of the Google Developers site.

My site is really simple right now, so my page loads are pretty quick. If I remove the badges widget I get a 1.6s load time. However, if I enable it—and make no other changes—I get a 3.9s load time. 2.3s is a lot of extra load time for what are likely to be not-so-prominent images!

In the end the trade-off isn't really that bad. My real motivation in posting this was my original confusion at how this simple widget was causing such a noticeable slowdown. The badges add bit of flair and color to my site, but I might not end up using them, at least not in a sidebar how I originally intended. Glad I got to learn something new along the way!

If anyone is interested in seeing my site for reference it is http://jeremiahshore.net/. As of now it is still a work in progress. I'm not trying to be a master FEWD, just trying to look good and create an outlet to build future opportunities.

P.S. - Riley Hilliard , I like your site! The front page story brings back some not so fond memories of the dial-up I endured until I left for college lol. Your .activate-hover spans are a cool idea, but it looks like something might have changed or broken their functionality from what it likely was originally. I hope that helps!

Oleg Kuperman
Oleg Kuperman
2,187 Points

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