End of Another Year! … and a Minor Update to the Code School Profile Scraper

Code School Profile with LI Bullet

It’s hard to believe 2016 is already drawing to a close. It seems like just yesterday that I was writing about using PHP to search through my source code!

Though I wouldn’t call this an intractable problem, I did notice something annoying when looking at my Code School profile on the sidebar of this site.

Code School Profile with LI Bullet

Between the badges in the “Master Status” section, white dots had appeared! Upon inspecting these, I saw that these were the bullets on the list items that held the badges.

One article on Stack Overflow suggested that the CSS style for the tag for the unordered list that holds the list items should be include “list-style-type: none;”, but that seemed to have no effect.

After playing with the CSS a bit, I discovered that setting that property on the li tag instead fixed the problem.

Here is the corrected CSS code which updates the code from a past post:

<style>
#codeschool {
   border: 1px solid blue;
   text-align: center;
   vertical-align: middle;
}

#codeschool li {
   list-style-type: none;
}

.badge-img {
   display:block !important;
   margin-left: auto;
   margin-right: auto;
}

.pr-avatar {
   display:block;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 10px;
}
</style>

By implementing this minor change, the bullets disappeared, and the profile looks as it did originally.

Have a Merry Christmas and a Happy New Year!

Using PHP to Scrape the Report Card from a Code School Profile – Part 2

Earlier this week, I described how to use PHP to scrape the report card from a Code School profile. Now, it must be displayed. I chose to display mine in the sidebar of my blog. To do this, jQuery and CSS will be your friends. It’s pretty simple, and this isn’t the only way to do it. However, in this implementation, it is important that the name of the querystring parameter used in the PHP script (in this case, “nick”) matches the one in the jQuery function call below. Likewise, the id attribute of the div element must also match the one in the jQuery statement.

(Update: the CSS code below should be updated in accordance with this change to prevent bullets from appearing between the badges in the “Master Status” section.)



Well, that’s it. If you debug the client-side code on both your page and the Code School profile page, you’ll see that there are path elements in the Code School script that cause the partial opacity on uncompleted paths. This is presumably done with other JavaScripts and CSS on the Code School site. I haven’t tried bringing that functionality here as yet. Perhaps for another time…