npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

jribbble

v3.0.0

Published

A JavaScript library for the Dribbble API

Downloads

64

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

thegawthegaw

Keywords

dribbble

Readme

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