• Stars
    star
    304
  • Rank 137,274 (Top 3 %)
  • Language
    JavaScript
  • License
    ISC License
  • Created over 14 years ago
  • Updated over 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A JavaScript library for the Dribbble API

Jribbble Build Status

A JavaScript library for the Dribbble API

The Oauth Process

To use Jribbble, you must obtain a valid Oauth access token. For help getting a token and live examples, see the guide at https://jribbble.glitch.me

Getting Jribbble

Jribbble is available on npm or by direct download.

npm install jribbble

or direct download:

Using Jribbble

Jribbble works will all public scoped methods of the Dribbble API.

<body>
  <script src="/path/to/jribbble.min.js"></script>
  <script>
    jribbble.shots({token: "<your_oauth_access_token>"}, function(shotsArray) {
      console.log(shotsArray); // The JSON from the API Request.
    });
  </script>
</body>

Refer to the Dribbble V2 API Docs for details on response objects.

Setting your access token

Before you can use any of Jribbble's methods, you must set your Dribbble app's client access token. If you do not have a token, follow the setup guide on https://jribbble.glitch.me

You can set the token as an option of any method call as shown in the examples {token: "<your_oauth_access_token>"}, or you can set it with jribbble.setToken:

jribbble.setToken(token)

Description: Sets the required Dribbble access_token

Parameters:

  • token - required String Your Dribbble access_token from the Oauth handshake process

Using setToken is optional. It’s probably most useful if you’re calling multiple jribbble methods on a single page.

Example usage:

jribbble.setToken("123456789");

Available methods

Methods that will only work with Dribbble-approved apps

Note: You will need to contact Dribbble support to get an approved app, Jribbble can't approve apps.

Shots

jribbble.shots(id, options, callback)

Description: Gets your shots or a single shot by id.

Parameters:

  • id - optional String or Number A shot id
  • options - optional Object Key:value pairs. Valid keys include token, page, and per_page
  • callback - Function Will receive a single argument. An single shot object if an id was provided, an array of shot objects if no id provided.

Example usage:

// Get a list of your shots and display them in the DOM.
jribbble.shots({token: "<your_oauth_access_token>"}, function(shotsArray) {
  document.querySelector(".dribbble-shots").innerHTML = shotsArray.reduce(function(html, shot) {
    return html + '<li><a href="'+  shot.html_url + '" target="_blank"><img src="' + shot.images.normal + '"></a></li>';
  }, "");
});
// Get a single shot by id and display it as an `img` in the DOM.
jribbble.shots("2055068", {token: "<your_oauth_access_token>"}, function(shotObject) {
  docment.getElementById("shot").innerHTML = '<img src="' + shot.images.normal + '">';
});
// Get the second page of your shots at 12 per page and display them in the DOM.
jribbble.shots({token: "<your_oauth_access_token>", page: 2, per_page: 12}, function(shotsArray) {
  document.querySelector(".dribbble-shots").innerHTML = shotsArray.reduce(function(html, shot) {
    return html + '<li><a href="'+  shot.html_url + '" target="_blank"><img src="' + shot.images.normal + '"></a></li>';
  }, "");
});

See the Dribbble API Docs for Shots for the full response object.

User

jribbble.user(options, callback)

Description: Gets the current user based on the access_token.

Parameters:

  • callback - Function Will receive a single argument. An single shot object if an id was provided, an array of shot objects if no id provided.

Example usage:

// Get your profile information and display it in the DOM
jribbble.user({ token: "your_oauth_access_token" }, function(userObj) {
  var html = [
    '<img src="' + userObj.avatar_url + '">',
    '<h3>' + userObj.name + '</h3>',
    '<h4>' + userObj.bio + '</h4>',
    '<p>Location: ' + userObj.location + '</p>'
  ];
  document.getElementById("user").innerHTML = html.join("");
});

See the Dribbble API Docs for User for the full response object.

Projects

jribbble.projects(options, callback)

Description: Gets the current users projects

Example usage:

// Get a list of your projects and display them in the DOM.
jribbble.projects({token: "your_oauth_access_token"}, function(projectsArray) {
  document.querySelector(".dribbble-projects").innerHTML = projectsArray.reduce(function(html, project) {
    return html + '<li><h4>' + project.name + '</h4><p>' + project.description + '</p></li>';
  }, "");
});

See the Dribbble API Docs for Projects for the full response object.

Likes

Note: This will only work for Dribbble-approved applications.

jribbble.likes(options, callback)

Description: Gets the current users likes

Example usage:

jribbble.likes({token: "your_oauth_access_token"}, function(likesArray) {
  // Do cool stuff with response
});

See the Dribbble API Docs for Likes for the full response object.

Popular

Note: This will only work for Dribbble-approved applications.

jribbble.popular(options, callback)

Description: Gets a list of popular shots

Example usage:

jribbble.popular({token: "your_oauth_access_token"}, function(shotsArray) {
  // Do cool stuff with response
});

See the Dribbble API Docs for popular shots for the full response object.

Pagination

Methods that get a list of items can use pagination as described in the Dribbble Docs

You can provide page and per_page via the options object of Jribbble methods.

Example

jribbble.shots({page: 2, per_page: 13}, function(shotsArray) {});

Contributing

Jribbble is open source. Issues and pull requests gladly accepted.

Install development dependencies:

npm install

Tests

For PRs to be accepted, all tests must pass. They in Travis for all PRs. There are two options to run tests locally.

Watch all files and rerun tests on change:

npm run test-watch

Run all tests once:

npm test

Using Jribbble locally

We don't have any type of built in setup for this. To work locally, I create a file in the root directory sandbox.html. This file is ignored by git. In there I add HTML as an end-user would, expect I point to the src version of Jribbble to test new changes as I'm working.

I view sandbox.html in a browser using a Python server:

python -m http.server

Building Jribbble

Jribbble includes a Makefile that includes a build task. The task copies the jribbble.js source to the /dist directory–adding the version number and build date–and creates a minified version of it using UglifyJS2.

To build Jribbble you'll need UglifyJS2:

npm install uglify-js -g

then from the root directory run

make

More Repositories

1

js-osx-app-examples

Example OS X applications written in JavaScript.
953
star
2

icon-stamper

A Sketch Plugin for creating multiple sizes of iOS icons
501
star
3

day-player

A Sketch Plugin for creating placeholder images from online services.
JavaScript
391
star
4

colorme

Visualize CSS Color Functions?
JavaScript
316
star
5

css-shaky-animation

Shits shakin' yo
CSS
286
star
6

css-true-titles

CSS Title Sequence in the style of True Detective
CSS
80
star
7

skribbble

Sketch plugins for getting shots and info from Dribbble
JavaScript
50
star
8

themanfromhollywood

CSS Kinetic typography experiment
CSS
38
star
9

css-animated-sprites

Goofy CSS shit
CSS
31
star
10

media-query-events

Script to add a MatchMedia event for each media query in a page's stylesheets
JavaScript
29
star
11

starstuff

A UI library for JXA
JavaScript
18
star
12

css-write-on

CSS Write-on text effect
CSS
15
star
13

slenderman

A poorly drawn typeface
CSS
14
star
14

tylergaw.com

My personal website since 2006
Nunjucks
14
star
15

netlify-cms-github-oauth-provider-server-example

A working example of a custom GitHub OAuth Provider for NetlifyCMS.
JavaScript
14
star
16

css-slideshows

Revolving image galleries using CSS animations and a bit of trickery.
CSS
13
star
17

mpa-view-transitions-sandbox

A collection of example view transitions for multi-page sites
HTML
12
star
18

sketch-generate-posts

A WIP Sketch Plugin to generate blog post elements from JSON'd RSS feeds
10
star
19

astro-example-i18next

An opinionated approach to translation with Astro and i18next.
JavaScript
10
star
20

jquery.dragsort

jQuery native drag and drop plugin
JavaScript
7
star
21

netlify-cms-github-oauth-provider-client-example

A working example of a custom GitHub OAuth Provider for NetlifyCMS.
HTML
7
star
22

jribbble-no-dependencies

A jQuery-free version of Jribbble
JavaScript
7
star
23

colormix.site

Visualize the CSS color-mix function
Astro
6
star
24

RNUpgradePath

An example repo for getting RN 0.57.x working
JavaScript
4
star
25

papersaver

A place to self-host drawings from Paper on the Web.
JavaScript
4
star
26

againwiththis

A site of little life reminders. I am dumb.
CSS
4
star
27

fullcourtshots

An at-a-glance Dribbble shot viewer
JavaScript
4
star
28

css-gradient-transition-sorta

Semi-transparent gradient transition?
HTML
4
star
29

jribbble.com

Demo page for jquery.jribbble
CSS
3
star
30

jxa-build-process

A partially complete front-end tooling process for JXA stuffs
JavaScript
3
star
31

css-blend-modes

Playing with CSS blend modes and filters
3
star
32

webvtt-cuemarker

A super simple helper for creating WebVTT cue times for HTML video elements
JavaScript
3
star
33

5secondbookmarklet

A bookmarklet for viewing 5 second films
JavaScript
3
star
34

html5forms

Experimenting with new (in 2011) html form features.
CSS
3
star
35

dicomr

A web application for uploading and viewing DICOM images. (built for an interview process)
Python
2
star
36

triple-dare

My entry for The Unmatched Style CSS Off 2011
CSS
2
star
37

rushmore.fm

There used to be a great little music community here. Maybe there will be again.
HTML
2
star
38

media-seek-from-url

Seek to a time in a audio or video element using a URL query parameter.
JavaScript
2
star
39

astro-react-client-only-bug-example

Created with StackBlitz ⚡️
JavaScript
2
star
40

thisdesignisart.com

Another drunk idea and domain purchase. Let's see if I actually build this one.
2
star
41

node-test-runner-demo

A small demo of the native node test runner
JavaScript
1
star
42

custombodyworks

Karma Gaw's business website
JavaScript
1
star
43

ios-add-to-readability

1
star
44

bowlinggreenmo

My 1st Website
CSS
1
star
45

dem-2020-candidate-websites

Nerd stats and thoughts about 2020 Democratic Presidential Candidate Websites
1
star
46

building-firefox-addons

An attempt to organize some decent docs and examples for building Firefox Add-ons
1
star
47

bigtrip

Itinerary for a big trip. This code is bad, but I don't feel bad.
JavaScript
1
star
48

pigwithshitonballs.com

A pig with shit on his balls
HTML
1
star
49

whatsgoingonwithcss

A presentation on new features in CSS3
HTML
1
star
50

supporters-python-twilio

An example of signing up new Supporters using The Groundwork API through SMS and a Flask Application
Python
1
star
51

froogaloop-rdb-tester

CSS
1
star
52

anthologies

Hold on to something.
HTML
1
star
53

vacation

Ruby
1
star
54

chrisgeth.com

In progress
CSS
1
star
55

mycoffeespoon

Photographer website
JavaScript
1
star
56

begin-svelte-app

Begin app
JavaScript
1
star
57

astro-icon-issue-1-example

An isolated example of an issue i'm seeing with astro-icon
Astro
1
star
58

borrowers

ember-cli-101 book example app
JavaScript
1
star
59

contentful-metalsmith-feeds

Metalsmith plugin to generate RSS and JSON feeds from Contentful posts.
JavaScript
1
star
60

svg-track-matte

SVG Video Masks
Ruby
1
star
61

astro-keyframes-issue-example

An isolated example of an issue I'm seeing with @keyframes in Astro 0.21+
Astro
1
star
62

supporters-python-flask

An example of signing up new Supporters using The Groundwork API through a Flask application.
Python
1
star
63

timebomb

A script to download songs from http://timtimebomb.com. Don't tell Tim, I think he'd be pissed and punch me in the throat
Python
1
star
64

wax

A record collection viewer
Astro
1
star