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
    5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

  • By
    Being a Dev Dad

    I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

Incredible Demos

  • By
    CSS Tooltips

    We all know that you can make shapes with CSS and a single HTML element, as I've covered in my CSS Triangles and CSS Circles posts.  Triangles and circles are fairly simply though, so as CSS advances, we need to stretch the boundaries...

  • By
    Printing MooTools Accordion Items

    Sometimes we're presented with unforeseen problems when it comes to our JavaScript effects. In this case, I'm talking about printing jQuery and MooTools accordions. Each "closed" accordion content element has its height set to 0 which means it will be hidden when the...

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!