If you’re an active user of GitHub and work on any open-source projects then may want to show off your projects and activity on your own website.  This is where Gitview comes in.

Gitview allows you to display all your GitHub repos, and gives the option to display a detailed version including a graph of your project activity, or a simple compact version if you prefer.  Not only that, but all the information displayed is live.

The full feature list is:

• Asynchronous loading of all date
• All data is 100% live
• The Activity Graph uses the Canvas element
• You can toggle the regular or small version
• No need for additional styles
• Works with all JS frameworks (jQuery, Prototype, Mootools, etc)
• WTFPL license

Using it is very simple:

1.  Include the script on your page

<script src="http://logicalcognition.com/Projects/Gitview/Gitview.js"></script>

2.  Create a GitView anywhere on your page from a script tag or a JavaScript file:

var view = new Gitview({
  user    : 'cubewebsites',      // any github username
  domNode : document.body,  // domNode to attach to
  compact : false           // if set to true, will display smaller version of widget (no participation graph)
});

Enjoy!

The post Gitview – JS Widget To List GitHub Repositories appeared first on Cube Websites.

jQuery UI Bootstrap is an open-source effort by @addyosmani to introduce the Bootstrap styling into the standard jQuery UI widgets.  It covers many of the widgets available on the jQuery UI website including:

• Accordion
• Tabs
• Buttons and Button Sets
• Horizontal slider
• Progress Bar
• Dialogs
• Icons
• Date Picker

Whilst it’s still a work in process, what’s available already is fantastic and I’d love to see where this project goes.  It’s the next logical step for the Bootstrap framework; we have the standard web elements and layouts, now it’s about making those pages interactive using one of the most popular widget libraries available, jQuery UI, and making that look like the rest of the site…well it just makes good sense.

Bootstrap

Here’s a quick introduction to Bootstrap for those that haven’t yet heard of it, or aren’t sure what it does.

Bootstrap is a prototyping framework introduced by Twitter in mid-2011.  It’s aimed at making more consistent browsing experience for users as they browse various sites and applications on the web.  It’s free, open-source, and uses LessCSS making it a breeze to modify to suit your own needs.

Since it’s launch, it has been very well received by the developer community, and I’ve noticed it being adopted by many popular websites and open-source software including:

• Concrete5
• CodeAcademy
• WHMCS

I’ve even used it on the Cube Websites website for the form elements and as a grid system.

Get Started

• jQuery UI Bootstrap
• jQuery UI Bootstrap on GitHub
• Bootstrap

jQuery UI Bootstrap seems like a great idea, and has a lot of potential for making Bootstrap even better.  I’ll definitely be trying it on my next project involving UI widgets.  Whilst it looks fantastic already, I’d love to see where it goes from here.  One of the things I’d like to see is the stylesheets done in Less so that the widgets can be customised to look exactly how the web designer wants.

The post jQuery UI Bootstrap – A Bootstrap-themed kickstart for jQuery UI widgets appeared first on Cube Websites.

As one of the options for the widget I needed a custom value provider, so decided to use the instructions provided to specify a source model using the source_model parameter.

However, by using the given format the widget options just wouldn’t load in the admin area.

<source_model>widgettwo/services</source_model>

I couldn’t easily find any results by searching Google for help, so after spending a bit of time with trial and error I found the solution to this problem. Instead of using the module/model structure, you actually need to provide the class name of your model e.g.:

<source_model>Cube_CategoryFeatured_Model_Categories</source_model>

After updating my widget.xml file to use the new source model parameter everything worked smoothly.

The widget I’m creating will be included in the next commercial Magento template, and I’ll also make it available on Magento Connect for free of charge!

The post HOW TO: Correctly Set Source Model In A Magento Widget appeared first on Cube Websites.