How to use the Dribbble API

One of the websites most commonly used by designers to showcase their work is most definitely Dribbble and most designers already have their shots on dribble so why not combine the best of both worlds and use the Dribbble Api and Jribbble to showcase the shots in your portfolio ?

In this article we’ll create a simple one page portfolio with some text, social links and your latest Dribbble shots that you can use as the basis for your next portfolio.

The HTML

Before we start with the actual content we need to include both jQuery and Jribbble and also a link to our stylesheet like so:

<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.jribbble-1.0.1.ugly.js"></script>

Since we only want some text, social links and a placeholder ul (which we will populate with jQuery later on) the markup will be quite minimal:

<section>
 <h1>Hello, my name is John Doe and this is my work</h1>
 <div class="social">
 <ul>
 <li><img src="img/Dribbble.png" alt="dribbble"/></li>
 <li><img src="img/Facebook.png" alt="facebook"/></li>
 <li><img src="img/Github.png" alt="github"/></li>
 <li><img src="img/google.png" alt="gplus"/></li>
 <li><img src="img/Twitter.png" alt="twitter"/></li>
 </ul>
 </div>
 <ul id="work"></ul>
 </section>

If you look at our page in the browser it’s still pretty empty, so let’s fill it with a little help from jQuery…

The JavaScript

Using  Jribbble is actually quite easy since it uses jQuery the syntax will be familiar to you.

Jribbble offers a lot of different methods we can use to grab data from Dribbble but the one we are interested in is getting a user’s shots by their username, so we have to use the function getShotsByPlayerId. This function takes 3 parameters, the first one is the username of the user we want , the second is the callback function you want to run when all the data is fetched from Dribbble and the third one is optional and it’s the paging options where you specify how many shots you want to see in each page.

$.jribbble.getShotsByPlayerId('dribbble', function (work) {
 // Callback code
 }, {page: 1, per_page: 8});

Using this parameter we are getting the shots from Dribbble and we are paginating them and only showing 8 shots on each page.

Now we need a way to go through all the pictures and append an li with the shot title and the image for each shot we have and for that we need is a foreach loop and our callback will look like this:

$.each(work.shots, function (i, shot) {
 $('#work').append('<li><h2>' + shot.title + '</h2><a href="' + shot.url + '"><img src="' + shot.image_teaser_url + '" alt="' + shot.title + '"></a></li> ');
 });

As you can see we just go through all the shots and for each one we add an li to the work ul and this li will also include a link to the Dribbble page for that image.

The full JavaScript code will look like this:

$.jribbble.getShotsByPlayerId('dribbble', function (work) {
 $.each(work.shots, function (x, shot) {
 $('#work').append('<li><h2>' + shot.title + '</h2><a href="' + shot.url + '"><img src="' + shot.image_teaser_url + '" alt="' + shot.title + '"></a></li> ');
 });
 }, {page: 1, per_page: 8});

And with only 7 lines of code we were able to create a fully functional portfolio that goes through the Dribbble API to get our latest shots with the title and link.

The problem so far is that it looks quite ugly and now with CSS we are going to change that…

The CSS

The CSS for this example will be quite simple, all that may seem a little new to you is the filter property but all that does in this case is add a little bit of a grayscale look to our images so that this way we can create an animation that makes the images pop out some more when we hover.

/*IMPORT FONTS*/
@import url(http://fonts.googleapis.com/css?family=Arvo:700);
@import url(http://fonts.googleapis.com/css?family=Sanchez);

/*GENERAL*/
body {
background: url(img/p1.png);
}
section {
width: 80%;
margin: auto;
}

/*TYPE*/
h1 {
font-family: 'Arvo';
color: #1C1C1C;
font-size: 48px;
width: 50%;
padding-left: 3%;
float: left;
}

h2 {
font-family: 'Sanchez';
color: #1C1C1C;
font-size: 18px;
font-weight: normal;
}

/*SOCIAL*/
.social {
width: 40%;
float: right;
}

.social ul {
list-style: none;
width: 50%;
margin-top: 50px;
float: right;
}

.social ul li {
width: 48px;
margin-right: 5px;
display: inline-block;
}

/*THE SHOTS*/
#work {
width: 100%;
margin: auto;
list-style: none;
clear: both;
}

#work li {
width: 20%;
margin-right:  2%;
display: inline-block;
margin-bottom: 2%;
}

/*IMAGE EFFECTS*/
#work li img {
border: 5px solid white;
-webkit-filter: grayscale(50%);
border-radius: 5px;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}

#work li img:hover {
-webkit-filter:grayscale(0);
box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

As you can see the CSS code from this is quite simple since the main focus of this article is to get you going with Jribbble.