Because I can! No, just kidding. I always thought about my personal GitHub page as informative as it can be. And not a page just like “Hello World! I am Pete an Interface Designer from Berlin and this is my blog”. No, my page should consist of content, that I provide and some dynamically generated content, provided by the GitHub API.
- Get the data
- Handle the data
- Nicer timestamps with moment.js
- Templating with underscore.js
- Displaying data in HTML
Get the Data
In my code, the function which handles the task to display my GitHub activities carries the sound full name
displayActivities. It receives two arguments. First is the username, the other is a DOM element selected with jQuery, that will later contain the activities as HTML code.
First of all, an AJAX call is made against GitHub’s User Event Stream
If the AJAX call is successful, the received data is limited to the latest five events. Each event is passed to the function
See the whole function here:
Handle the Data
The purpose of the function
parseActivityJSON is to uniform the event data and make it easier to handle. For example, there is some string split and concat going on, to build URLs to the repository or the repository owner.
At least the function returns an object, which can be imagined like this:
Before we follow this object returning back to the
displayActivities function, we take a look what happen to the timestamp.
Nicer timestamps with Moment.js
Of course, I could have just used the given format of the event’s timestamp, but I trying to create messages that can be read most human as possible. The right library for this job is moment.js, especially with its
The desired format can be defined in a kind of dictionary:
And later the given timestamp will be parsed with the
We can now return to the
displayActivities function with our nicely formatted activityObj.
Templating with Underscore.js
displayActivities our activityObj is directly passed into the
<%= VARIABLE %>
By looking at the type of the object, the
selectTemplate function picks the right template from the HTML.
Displaying Data in HTML
Finally the HTML of our activityObj returns to the
displayActivities function and is added to the activities array, which afterwards is joined and added to the containing DOM element.
I am a little proud of the outcome and I like the tool set. I just have scratched the capabilities of underscore.js, but even just for templating it is awesome. And the features of moment.js allow more than I used in this example.
I think there will be more to come!