Represent Your Repositories Using the GitHub Badge!

By  on  

Update: The badge includes jQuery which breaks any MooTools on your page. Be aware before including...as I wasn't.

Update 2: MooTool's own Thomas Aylott has an awesome MooTools version! You can grab it at: http://github.com/subtleGradient/mootools-github-badge/tree/master!

GitHub users are generally proud of their repositories. Why not bring your repository list into your blog then?

The XHTML / JavaScript

<div id="github-badge"></div>
<script type="text/javascript" charset="utf-8">
  GITHUB_USERNAME = 'darkwing';
  GITHUB_LIST_LENGTH = 30;
  GITHUB_HEAD = 'div';
  GITHUB_THEME = 'white';
  GITHUB_TITLE = 'David\'s Projects';
  GITHUB_SHOW_ALL = 'Show all';
</script>
<script src="http://drnic.github.com/github-badges/dist/github-badge-launcher.js" type="text/javascript"></script>

Sooooooo little code!

So what are you waiting for? Represent and share your GitHub repositories!

Recent Features

  • By
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

  • By
    CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

Incredible Demos

  • By
    Image Data URIs with PHP

    If you troll page markup like me, you've no doubt seen the use of data URI's within image src attributes. Instead of providing a traditional address to the image, the image file data is base64-encoded and stuffed within the src attribute. Doing so saves...

  • By
    Instagram For MooTools

    If you're still rocking an iPhone and fancy taking a photo every now and then, you'd be crazy not to be using an app called Instagram.  With Instagram you take the photos just as you would with your native iPhone camera app, but Instagram...

Discussion

  1. wesite look like firefox personas web page Awesome design

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!