Tag Archives: github

@ML4ALL Meet Clair J. Sullivan & Ricky Hennessy

ricky-hennessyUsing Machine Learning to Increase Health Insurance Coverage

Ricky (@rickyhennessy) works as a Sr. Data Designer at Fjord, Design and Innovation from Accenture. Previously, he was at frog design, where he worked as a Sr. Data Scientist. Working at the intersection of data science and design, he’s been able to apply a more human centered approach to data science. He has also earned a PhD in biomedical engineering at UT Austin.

Working with a state run healthcare exchange, Ricky & team utilized their existing data to develop a machine learning model that could predict whether or not an individual was going to sign up for insurance through the exchange in the next open enrollment enrollment period. This model can then be used to inform outreach campaigns targeted at individuals at risk of dropping out of the exchange.

Continue reading →

Coding on Orchestrate.io & Orchestrate.js & Orchestrate.NET

First context, then I’ll dive in.

Orchestrate

http://orchestrate.io/

Orchestrate is a service that provides a simple API to access a multitude of database types all in one location. Key value, graph or events, some of the database types I’ve been using, are but a few they’ve already made available. There are many more on the way. Having these databases available via an API instead of needing to go through the arduous process of setting up and maintaining each database for each type of data structure is a massive time saver! On top of having a clean API and solid database platform and infrastructure Orchestrate has a number of client drivers that provide easy to use wrappers. These client drivers are available for a number of languages. Below I’ve written about two of these that I’ve been involved with in some way over the last couple of months.

Orchestrate.NET

https://github.com/RobertSmith/Orchestrate.NET

This library I’m currently using for a demonstration application built against the Deconstructed.io services (follow us on twitter ya! @BeDeconstructed), a startup I’m co-founding. I’m not sure exactly what the app will be, but being .NET it’ll be something enterprisey. Because: .NET is Enterprise! For more on this project check out the Deconstructed.io Blog.

Some of the latest updates with this library.

But there’s still a bit of work to do for the library, so consider this a call out for anybody that has a cycle they’d like to throw in on the project, let us know. We’d happily take a few more pull requests!  The main two things we’d like to have done real soon are…

Orchestrate.js

https://github.com/orchestrate-io/orchestrate.js

With the latest fixes, additions and updates the orchestrate.js client driver is getting more feature rich by the day. In addition @housejester has created an orchestrate-brain project for Hubot that uses Orchestrate.js. If you’re not familiar with Hubot, but sure to check out the company robot that can dramatically improve and reduce employee efficiency! Keep an eye on that project for more great things, or create a Hubot to keep a robotic eye on the project.

Here are a few key things to note that have been added to help in day-to-day coding on the project.

  • The travis.yml file has been added for the Travis Continuous Integration build. This build runs against node.js v0.10 and v0.8.
  • Testing is done with mocha, expect.js and nock. To get the tests up and running, clone the repo and then build with the make file. The tests will run in tdd format.
  • Promises are provided via the kew library.

If you’re opening up the project in WebStorm, it’s great to setup the mocha tests with the integrated mocha testing as shown below. After you’ve cloned the project and run ‘npm install’ then follow these steps to add the Mocha testing to the project. We’ve already setup exclusions in the .gitignore for the .idea directory and files that WebStorm uses.

First add a configuration by clicking on Edit Configurations.

Edit Configurations

Edit Configurations

Next click on the + to add a new configuration to run. Select the Mocha option from the list of configurations.

Mocha & Other Configurations in WebStorm

Mocha & Other Configurations in WebStorm

On the next screen set a name for the configuration. Set the test directory to the path for the test directory in the project. Then finally set the User interface option for Mocha to TDD instead of the default BDD.

Edit Configuration Dialog

Edit Configuration Dialog

Last but not least run the tests and you’ll see the list of green lights light up the display with positive results.

Test Build

Test Build

Bringing to Life an Open Source Software Project via Github & Jekyll – Part 1

Starting with Github, Automatic Page Generation & Jekyll

It’s time for another blog series! This is a series I’m starting to outline that crazy complex site I’m building to prove out all sorts of things, all located at http://adron.me. So far it’s just a site that hold portfolio information for my coding, biking and related information about me. However I’m using this as a base template, that anybody can use via the github repo I’ve created simply titled Me, to start and scale their own personal site. But beyond that, I’ll be using practices and technology that can be used to truly scale large sites with lots of users. If you have any questions, comments or suggestions about this series please ping me on Twitter @adron or leave a comment on this blog itself.

First things first, let’s get our git repository setup on github with the appropriate issues list, and project page via gh-pages (jekyll).

Create a new github project.

Creating a new github project, setting it up with a default Node.js readme file and .gitignore.

Creating a new github project, setting it up with a default Node.js readme file and .gitignore. (Click for full size image)

Next we’ll have the site created and github will display the repository page. On this page you can see that the README.md and .gitignore file have been created with some basic defaults for a Node.js Project. At the top right click on the Settings button to navigate to the settings page.

Settings, get there.

Settings, get there. (Click on image for full size)

On the settings page scroll down until you see the section for Github Pages with the Automatic Page Generator button. Click that button.

Github Pages Automatic Page Generator.

Github Pages Automatic Page Generator. (Click for full size image)

You’ll be directed to create a page, with default data as shown below.

Default Github Pages Project Page

Default Github Pages Project Page. (Click for full size image)

Scroll down on this page and click to create the automatically generated page. You’ll be sent to the page to select a theme. I just went with the default since I’ll delete it later to create the Jeckyll project page instead. Click on publish on this screen.

Default Template Selection for Github Pages.

Default Template Selection for Github Pages. (Click for full size image)

Once this page generates you’ll be directed back to the github repository again. At the top of the page there will be a link to the newly generated page. You can click on this to navigate to it and see what it looks like. Also note that the new repository branch which is named gh-pages is not displayed. This new branch includes all of the files for this Github Pages project page.

Github Pages Automatic Page Generator generated a branch for the new page.

Github Pages Automatic Page Generator generated a branch for the new page. (Click for a full size image)

Change the branch to the gh-pages branch and you’ll see that the branch has entirely different files than the master branch.

The default files created in an automatically generated Github Pages site.

The default files created in an automatically generated Github Pages site. (Click for full size image)

If you click on the link at the top of the page, you’ll see where the current automatically generated page is and where the future jekyll site we’ll build will be located at. This page that was generated (unless you chose another theme) will look like this.

Github Pages default page with a default theme.

Github Pages default page with a default theme. (Click for full size image)

Now we have an appropriate branch and we’re ready to toss a jeckyll project in its place. However, if a default template and related content works for your project, that’s a great way to go with it. However some projects may want a blog or other content, just a bit more the default generated page, and this is what we’ll create with this jeckyll site. It’s also very easy to create a jeckyll site and create an image portfolio or a host of other types of sites, all backed by a git repository on github. I’ll keep moving now, on to the jeckyll site!

A Github Jeckyll Site

First get a clone of the site that was generated in the above instructions.

git clone git@github.com:Adron/Me.git

Now we have a good working directory where this is cloned at. First switch branches to the gh-pages branch. Get a list of all branches (the -a switch shows all branches, even the remote branches).

git branch -a

The results will display with the full branch names for the remote branches.

git branch -a
* master
  remotes/origin/HEAD -> origin/master
  remotes/origin/gh-pages
  remotes/origin/master
  remotes/origin/theme-all-by-itself

The asterisks shows the current active branch. The branch that needs edited is the remotes/origin/gh-pages branch. Check it out with the following command.

git checkout remotes/origin/gh-pages

Which will then print out the following content.

Note: checking out 'remotes/origin/gh-pages'.

You are in 'detached HEAD' state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by performing another checkout.

If you want to create a new branch to retain commits you create, you may
do so (now or later) by using -b with the checkout command again. Example:

  git checkout -b new_branch_name

HEAD is now at d430b0c... ... etc. etc...

What this basically means is, we have a branch that is disconnected and not attached to the repository in any way. To fix this we’ll create a working local branch to work with the remotes/origin/gh-pages branch. Do this with the following command.

git branch gh-pages

Then if you get a list of the existing local branches the master and gh-pages branches will be available locally.

git branch
* (no branch)
  gh-pages
  master

Now switch to that branch. Since we’re currently on (No branch) this content will be switched to the local gh-pages branch wit the following command.

git checkout gh-pages

Now delete all those files in that directory that github automatically created. In their place add a README.md and .gitignore file. In the commands below I’m using Sublime Text 2 command line tooling to open up the files into memory with Sublime Text 2.

subl .gitignore

Add the following content to the .gitignore file.

_site/
*.DS_Store
.DS_Store

Save that file. Create the README.md and…

subl README.md

…add some content to it.

My Awesome Header
===
Description: An appropriate description.
Documentation
---
Dammit, WRITE YOUR DOCUMENTATION!!!!

I added a little mark down for that README.md example just so there is something more than just text displaying.

Add these files to the local repository, committing and then pushing them up to the remote gh-pages repository.

git add -A
git commit -m 'Adding initial .gitignore and README.md content.'
git push origin gh-pages

Now in this directory we’re about to get things kicking for Jeckyll. First, get Jeckyll.

sudo gem install jeckyll

For your specific OS you may want to check out the actual jeckyll repository installation instructions. There is more of a break down of various operating system needs for use.

Once it is installed, we’re now ready to use jeckyll to generate static content and even run the jeckyll server to view what our site looks like locally. Now let’s get some content together that jeckyll will know how to statically generate for viewing.

Create a folder called “_layouts” in the local repository. With the “_” at the beginning of the directory, it will not be generated into the static content by jekyll, but the convention is for the _layouts directory to include the templates for creating a standard layout for the rest of the pages in the site.

mkdir _layouts

After creating the new folder, create a default.html inside the folder.

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title> {% if page.title %} {{ page.title }} | {% endif %} Adron Hall</title>
  <link rel="stylesheet" href="css/styles.css" />
</head>
<body>
 
  <div id="main">
 
    <header>
      <h1> Adron's Github Project Pages </h1>
    <header>
 
    <nav role="navigation">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
 
    {{ content }}
 
    <footer>
      <p>&copy; Adron's Github Project Pages 2013 | All Rights Reserved. </p>
    </footer>
 
  </div>
</body>
</html>

In the above HTML the {{ page.title }} item is a template variable that will display the title of the page when it is generated into static content by jekyll. Once this is created add an index.html page to the root path of the repository.

subl index.html

Now add the following content to the index.html page and save it.

---
layout: default
---
<section role="banner">
  The banner will go here eventually.
</section>
 
<section class="content">
  <p>
  Welcome to Adron Hall's Github Project Pages all manually created with jekyll!! Please, check out the blog at <a href="http://compositecode.com">Composite Code</a>!
  </p> 
</section>

Now create a stylesheet and respective static directory for it.

mkdir css

Create a styles.css file and add the following content that Dave Gamache created. I’ve included it below with all the appropriate licensing information and related content. Save this file when done.

/*
* Skeleton V1.1
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 8/17/2011
*/


/* Table of Content
==================================================
	#Reset & Basics
	#Basic Styles
	#Site Styles
	#Typography
	#Links
	#Lists
	#Images
	#Buttons
	#Tabs
	#Forms
	#Misc */


/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0 none;
    font: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 18px;
}
	ol, ul {
		list-style: none; }
	blockquote, q {
		quotes: none; }
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none; }
	table {
		border-collapse: collapse;
		border-spacing: 0; }


/* #Basic Styles
================================================== */
	body {
		background: url(../images/body_bg.png) repeat; 
		font-family: 'Dosis', sans-serif;
		font-size:14px;
		font-weight:500;
		color:#E8E8E8;
		text-shadow:0 1px 0 rgba(0, 0, 0, 0.7);
		-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
		-webkit-text-size-adjust: 100%;
 }

.max-image 								{ width:100%; height:auto; }
/* #Typography
================================================== */
	h1, h2, h3, h4, h5, h6 {font-weight: normal;}
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
	h1 { font-size: 26px; line-height: 22px; margin-bottom: 14px; color:#FFCC00;}
	h2 { font-size: 20px; line-height: 24px; margin-bottom: 10px; color:#FFF; font-weight:600; }
	h3 { font-size: 16px; line-height: 22px; margin-bottom: 10px; color:#FFF; }
	h4 { font-size: 15px; line-height: 20px; margin-bottom: 4px; color:#bc4444; }
	h5 { font-size: 14px; line-height: 24px; }
	h6 { font-size: 14px; line-height: 21px; }
	.subheader { color: #777; }

	p { margin: 0 0 20px 0; }
	p img { margin: 0; }
	p.lead { font-size: 21px; line-height: 27px; color: #777;  }

	em { font-style: italic; }
	strong { font-weight: bold; color: #333; }
	small { font-size: 80%; }

/*	Blockquotes  */
	blockquote, blockquote p { font-size: 18px; line-height: 24px; color: #333; }
	blockquote { margin: 0; padding: 0 20px 0 20px; border-left: 2px solid #F87536; }
	blockquote cite { display: block; color: #ff8a00; }
	blockquote cite:before { content: "\2014 \0020"; }
	blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }

	hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }


/* #Links
================================================== */
	a, a:visited { color: #f35f2a; text-decoration: none; outline: 0; }
	a:hover, a:focus { color: #FFF; }
	p a, p a:visited { line-height: inherit; }


/* #Lists
================================================== */
	ul, ol { margin-bottom: 20px; }
	ul { list-style: none outside; }
	ol { list-style: decimal; }
	ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
	ul.square { list-style: square outside; }
	ul.circle { list-style: circle outside; }
	ul.disc { list-style: disc outside; }
	ul ul, ul ol,
	ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%;  }
	ul ul li, ul ol li,
	ol ol li, ol ul li { margin-bottom: 6px; }
	li { line-height: 18px; margin-bottom: 12px; }
	ul.large li { line-height: 21px; }
	li p { line-height: 21px; }

/* #Images
================================================== */

	img.scale-with-grid {
		max-width: 100%;
		height: auto; }


/* #Buttons
================================================== */

	/*.button,
	button,
	input[type="submit"],
	input[type="reset"],
	input[type="button"] {
		background: #3973a6;  Old browsers 
		background: #3973a6 -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%);  FF3.6+ 
		background: #3973a6 -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2)));  Chrome,Safari4+ 
		background: #3973a6 -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%);  Chrome10+,Safari5.1+ 
		background: #3973a6 -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%);  Opera11.10+ 
		background: #3973a6 -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%);  IE10+ 
		background: #3973a6 linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%);  W3C 
	  border: 1px solid #3973a6;
	  border-top: 1px solid #3973a6;
	  border-left: 1px solid #3973a6;
	  color: #FFF;
	  display: inline-block;
	  font-size: 12px;
	  font-weight: bold;
	  text-decoration: none;
	  text-shadow: 0 1px rgba(33, 77, 121, .75);
	  cursor: pointer;
	  margin-bottom: 20px;
	  line-height: normal;
	  padding: 8px 10px; }

	.button:hover,
	button:hover,
	input[type="submit"]:hover,
	input[type="reset"]:hover,
	input[type="button"]:hover {
		color: #222;
		background: #FF8A00;  Old browsers 
		background: #FF8A00 -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%);  FF3.6+ 
		background: #FF8A00 -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3)));  Chrome,Safari4+ 
		background: #FF8A00 -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%);  Chrome10+,Safari5.1+ 
		background: #FF8A00 -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%);  Opera11.10+ 
		background: #FF8A00 -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%);  IE10+ 
		background: #FF8A00 linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%);  W3C 
	  border: 1px solid #888;
	  border-top: 1px solid #aaa;
	  border-left: 1px solid #aaa; }

	.button:active,
	button:active,
	input[type="submit"]:active,
	input[type="reset"]:active,
	input[type="button"]:active {
		border: 1px solid #666;
		background: #ccc;  Old browsers 
		background: #ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%);  FF3.6+ 
		background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4)));  Chrome,Safari4+ 
		background: #ccc -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%);  Chrome10+,Safari5.1+ 
		background: #ccc -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%);  Opera11.10+ 
		background: #ccc -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%);  IE10+ 
		background: #ccc linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%);  W3C  }

	.button.full-width,
	button.full-width,
	input[type="submit"].full-width,
	input[type="reset"].full-width,
	input[type="button"].full-width {
		width: 100%;
		padding-left: 0 !important;
		padding-right: 0 !important;
		text-align: center; }

	 Fix for odd Mozilla border & padding issues 
	button::-moz-focus-inner,
	input::-moz-focus-inner {
    border: 0;
    padding: 0;
	}*/


/* #Tabs (activate in tabs.js)
================================================== */
	/*ul.tabs {
		display: block;
		margin: 0 0 20px 0;
		padding: 0;
		border-bottom: solid 1px #ddd; }
	ul.tabs li {
		display: block;
		width: auto;
		height: 30px;
		padding: 0;
		float: left;
		margin-bottom: 0; }
	ul.tabs li a {
		display: block;
		text-decoration: none;
		width: auto;
		height: 29px;
		padding: 0px 20px;
		line-height: 30px;
		border: solid 1px #ddd;
		border-width: 1px 1px 0 0;
		margin: 0;
		background: #f5f5f5;
		font-size: 13px; }
	ul.tabs li a.active {
		background: #fff;
		height: 30px;
		position: relative;
		top: -4px;
		padding-top: 4px;
		border-left-width: 1px;
		margin: 0 0 0 -1px;
		color: #111;
		-moz-border-radius-topleft: 2px;
		-webkit-border-top-left-radius: 2px;
		border-top-left-radius: 2px;
		-moz-border-radius-topright: 2px;
		-webkit-border-top-right-radius: 2px;
		border-top-right-radius: 2px; }
	ul.tabs li:first-child a.active {
		margin-left: 0; }
	ul.tabs li:first-child a {
		border-width: 1px 1px 0 1px;
		-moz-border-radius-topleft: 2px;
		-webkit-border-top-left-radius: 2px;
		border-top-left-radius: 2px; }
	ul.tabs li:last-child a {
		-moz-border-radius-topright: 2px;
		-webkit-border-top-right-radius: 2px;
		border-top-right-radius: 2px; }

	ul.tabs-content { margin: 0; display: block; }
	ul.tabs-content > li { display:none; }
	ul.tabs-content > li.active { display: block; }

	/* Clearfixing tabs for beautiful stacking */
	/*ul.tabs:before,
	ul.tabs:after {
	  content: '\0020';
	  display: block;
	  overflow: hidden;
	  visibility: hidden;
	  width: 0;
	  height: 0; }
	ul.tabs:after {
	  clear: both; }
	ul.tabs {
	  zoom: 1; }*/*/


/* #Forms
================================================== */

	form {
		margin-bottom: 20px; }
	fieldset {
		margin-bottom: 20px; }
	input[type="text"],
	input[type="password"],
	input[type="email"],
	textarea,
	select {
		border: 1px solid #ccc;
		padding: 6px 4px;
		outline: none;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		color: #777;
		margin: 0;
		width: 210px;
		max-width: 100%;
		display: block;
		margin-bottom: 20px;
		background: #fff; }
	select {
		padding: 0; }
	input[type="text"]:focus,
	input[type="password"]:focus,
	input[type="email"]:focus,
	textarea:focus {
		border: 1px solid #aaa;
 		color: #ffcc00;
 		-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
		-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
		box-shadow:  0 0 3px rgba(0,0,0,.2); }
	textarea {
		min-height: 60px; }
	label,
	legend {
		display: block;
		font-weight: bold;
		font-size: 13px;  }
	select {
		width: 220px; }
	input[type="checkbox"] {
		display: inline; }
	label span,
	legend span {
		font-weight: normal;
		font-size: 13px;
		color: #444; }

/* #Misc
================================================== */
	.remove-bottom { margin-bottom: 0 !important; }
	.half-bottom { margin-bottom: 10px !important; }
	.add-bottom { margin-bottom: 20px !important; }

Now we can use the jekyll command to generate the static content and review it. In a subsequent post I’ll cover how to run this via the server to test out what the page would look like with all relative links.

jekyll

…and after execution the following message will display at the command line.

WARNING: Could not read configuration. Using defaults (and options).
	No such file or directory - /Users/adronhall/Codez/Me/_config.yml
Building site: /Users/adronhall/Codez/Me -> /Users/adronhall/Codez/Me/_site
Successfully generated site: /Users/adronhall/Codez/Me -> /Users/adronhall/Codez/Me/_site

This warning isn’t super relevant just yet. We’ve got a basic generated jekyll site localted at /Users/adronhall/Codez/Me/_site where that path is your path to the _static directory within your git repository. Once the content is verified via the _static directory the site is ready to post.

git add -A
git commit -m 'Adding the index.html and basic layouts template for a starter jekyll site.'
git push origin gh-pages

After it pushes, it may take up to 10 minutes before it displays properly. This is likely because Github has to queue the jekyll command to run to statically generate your content for the gh-pages branch. To view the newly created site and see if the generation has occurred navigate to http://yourusername.github.io/Me/. In the case of my personal site, it’s http://adron.github.io/Me/. Also note, at this stage the page and CSS look pretty bad. But work with me here, we’re going to add elements that will align the theme with the actual project as things come together. This css page however will be a core base for everything we’ll work through.

This concludes part 1. I’ve covered created the Github Pages automatically created templates pages, how to delete those and setup a manually created jekyll site. This gives a huge amount of control to the site, to edit, add blogs or other jekyll and of course JavaScript capable site features.

In subsequent parts of this blog series I’ll cover diving into deployment to AWS (Amazon Web Services), how to setup beanstalk via AWS, setting up Riak for a data back end and how to distribute this web application and Riak to offer a massively scalable site architecture (because you never know when you’ll get slammed with page hits on your personal site righ!) Among all these massive distributed how-to topics I’ll also dive into how exactly I’ve got a template and node.js application up and running via AWS and using Riak. So lots of material and information coming in the subsequent parts of this blog series.

🙂 Please subscribe (see upper right follow link to get emails, and no, you’ll get NO spam from me, just blog entries), comment below if you have any questions & let me know if you’d like me to add in any other how-to articles. Thanks & Enjoy!

Getting Github : JavaScript Libraries Spilled EVERYWHERE! Series #003

This is an ongoing effort putting together some JavaScript app code on client and on server that started with blog entry series #001 and #002.

This how-to is going to kind of go all over the place. My goal is to get github data. The question however is, how and with what. I knew there were some available libraries, so writing straight and pulling straight off of the API myself seemed like it would be unnecessary work.

The github API documentation is located at http://developer.github.com/v3/ with the list of client libraries for ease of access listed at http://developer.github.com/v3/libraries/. The first two that I forked and cloned were the gh3 and npm installed the octonode and node-github libraries.

Node.js Based Github Libraries

The two node based projects install via npm, as things go with node and were super easy. The first one I gave a test drive to is the https://github.com/ajaxorg/node-github project. I forked it and dove right in.

$ npm install github
npm http GET https://registry.npmjs.org/github
npm http 200 https://registry.npmjs.org/github
npm http GET https://registry.npmjs.org/github/-/github-0.1.8.tgz
npm http 200 https://registry.npmjs.org/github/-/github-0.1.8.tgz
$

After that quick install I took a stab at the test code they have in the README.md.

var GitHubApi = require("github");

var github = new GitHubApi({
    // required
    version: "3.0.0",
    // optional
    timeout: 5000
});
github.user.getFollowingFromUser({
    user: "adron"
}, function(err, res) {
    console.log(JSON.stringify(res));
});

This worked all well and good, so I moved on to some other examples. The following example however needed authentication. To authenticate you’ll need to add the little snippet below with the username and password. However there’s also a Oauth token method you can use too, which I’ve not documented below. To check out other auth methods check out the documentation.

var GitHubApi = require("github");

var github = new GitHubApi({
    version: "3.0.0", timeout: 5000,
});

github.authenticate({
    type: "basic",
    username: "adron",
    password: "yoTurkiesGetYourOwn"
});

github.orgs.get({
	org: "Basho"
}, function(err, res){
	console.log(res);
});

The result is prefect for putting together a good display page or something of the organizations.

$ node adron_test.js
{ login: 'basho',
  id: 176293,
  url: 'https://api.github.com/orgs/basho',
  repos_url: 'https://api.github.com/orgs/basho/repos',
  events_url: 'https://api.github.com/orgs/basho/events',
  members_url: 'https://api.github.com/orgs/basho/members{/member}',
  public_members_url: 'https://api.github.com/orgs/basho/public_members{/member}',
  avatar_url: 'https://secure.gravatar.com/avatar/ce5141b78d2fe237e8bfba49d6aff405?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-org-420.png',
  name: 'Basho Technologies',
  company: Basho,
  blog: 'http://basho.com/blog/',
  location: 'Cambridge, MA',
  email: null,
  public_repos: 105,
  public_gists: 0,
  followers: 0,
  following: 0,
  html_url: 'https://github.com/basho',
  created_at: '2010-01-04T19:05:19Z',
  updated_at: '2013-03-17T20:29:09Z',
  type: 'Organization',
  total_private_repos: YYY,
  owned_private_repos: XXX,
  private_gists: 0,
  disk_usage: 788016,
  collaborators: 0,
  billing_email: 'not_a_valid_address@basho.com',
  plan: { name: 'platinum', space: 62914560, private_repos: billions },
  meta: { 'x-ratelimit-limit': '5000', 'x-ratelimit-remaining': 'azillion' }
}

Now at this point there’s a few significant problems. Setting up tests of the integration variety for this library gets real tricky because you need to authenticate, or at least I do for the data that I want. This doesn’t bode well for sending any integration tests or otherwise to Travis-CI or otherwise. So even though this library works, and would be processed on the server-side and not on the client side, having it as a non-tested part of the code base bothers me a bit. What’s a good way to setup tests to verify that things are working? I’ll get that figured out shortly and it’ll have to be another blog entry, maybe. For now though, let’s jump into the client side library and see how it functions.

Client Side JavaScript Github

For the client side I started testing around with the gh3 library. It has two dependencies, jQuery and Underscore.js. jQuery is likely always going to be in your projects. Underscore.js is also pretty common, but sometimes you’ll find you’ll need to go download the library. Upon download and getting the additional libraries I needed installed, I gave the default sample a shot.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>gh3 Sample</title>
</head>
<body>
    <ul id="user"></ul>
</body>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/underscore-min.js"></script>
<script src="js/gh3.js"></script>
<script>
	var adron = new Gh3.User("adron")
	,	userInfos = $("#user");

	adron.fetch(function (err, resUser){
		if(err) {
			throw "outch ..."
		}
		console.log(adron, resUser);
		_.each(_.keys(resUser), function (prop) {
			userInfos.append(
				$('<li>').append(prop+" : "+resUser[prop])
			);
		});
	});
</script>
</html>

This worked pretty seamlessly. Also it got me thinking, “what do I really want to do with the github library?” If it’s a server side service, obviously I’d want to use the Node.js libraries probably. However if it is client side data I want, is it even ideal that the server side actually pull the data anyway? The other issues around cross site scripting and related matters come into play too if it is a client side script, but this might be, even in spite of that, just what I needed. For now, that left me with some solid things to think about. But I was done for now… so until next entry, cheers!

Setting Up Github for Windows for Powershell CLI Users

Recently I installed the Github for Windows App. It’s a great app, however, I’d rather not use it for the day to day interactions I have with Git. I have a lot of branching, forking and merging to do that just doesn’t happen to well with the app. It’s a great app, but overall I’m just a few dozen times faster with the command line versus using an application.

So why did I download it and install it? The UI is great looking. I wanted to check it out and see how it worked, overall I’ve been fairly impressed. It’s not all that bad. The other cool thing about having it installed is it makes getting started on a fresh machine much faster with Powershell and such, however all the repos are setup with https instead of git as the path. This I’m not a fan of, so I threw this video together real quick to show how I remedy the situation.

Deploy a Framework Friday #4 Some Node.js .gitignore Cloud 9 IDE Sharing toward Cloud Foundry / Iron Foundry Deployment

Today’s “Deploy a Framework Friday” is a little bit of a diversion. Today Richard (@rseroter) and I dove into Cloud9IDE (@Cloud9IDE) to try out some pair programming with the online IDE sharing. We made some minor progress with Matt (@matt_pardee) & Eric (@ang3lfir3) jumping in for a few minutes. The intent of this effort was to pull together a little code to deploy, as Richard wrote about a few months ago in the article “Deploying Node.js Applications to Iron Foundry using the Cloude9 IDE“.

Here’s a video of us all fumbling through attempting to get the .gitignore file setup.

Richard Seroter (@rseroter) and I (@adron) took a stab at sharing some code, with the attempt to do some pair programming. We made a little progress, and even had some people join us live via Twitter and edit some of the code with us. For a short play by play, check out the blog entry here: http://compositecode.com/2012/08/03/deploy-a-frame…dry-deployment/

Questions:

  1. Why did the .gitignore not show up on Richard’s Screen?
  2. What were the intermittent errors that came up?
  3. Why did it say I was setup for “premium” but I couldn’t use express?
  4. Is it supposed to be that the other person can’t make changes while someone is chatting?

I’m not sure what happened (anyone at Cloud 9 IDE know what happened) when the .gitignore totally disappeared  but in the video you can see that I committed and pushed the .gitignore file. I had to recreate it to get anything to show up, and initially it didn’t seem to share either. I’m not sure how that is supposed to work, but am assuming something wasn’t setup correctly in the first place.

As for express I’ll be giving that a try a little bit later.

Next Steps Toward Deployment

Over the next few weeks or so, Richard and I will be going back and forth building a Node.js based web application for deployment from Cloud 9 IDE to our Iron Foundry Environment. Overall, this will be a slightly drawn out “Deploy a Framework Friday“, with its own sub-parts to the series.

We’ll culminate the project in an open source project that will be available on Github and also with a summary on the Iron Foundry Blog. In one of our pending blog entries we’ll draw up the architecture of the application we’ll be building out. So stay tuned!

NOTE: Working in conjunction with these other bloggers / blogs:

Huboard, Github Issues ala Kanban, Implemented…

Recently I discovered Huboard. Thanks to those that helped me find it! Huboard is really simple and helps keep that kanban visibility when everyone can’t be in the same environment all the time. I setup a board for one of the pending OSS Projects that will be coming live. These are the steps I took. 1. Go to http://www.huboard.comand login with your Github identifiy. This will use your existing github account and you’ll then have access to all your projects to setup and use as you see fit with Huboard.

Allow Github to Provide Identify Access

Allow Github to Provide Identify Access

2. Huboard will now list all of your projects you have github.

Huboard Repository List (Click for full size image)

Huboard Repository List (Click for full size image)

3. Get your list items all labeled appropriately. (All explained below image)

Issues listed with appropriate Labels (Click for full size image)

Issues listed with appropriate Labels (Click for full size image)

The key to Huboard is the simple tagging. Each issue in the project will display as an open issue on the repository/project list in Huboard, however to get them to show up on the kanban there is a special label pattern to use. Simply add a number, dash, and the title of the issue for it to be listed in the kanban. Then apply the label(s) to the issue. For example, in the screenshot above you can see that item #3, which has a titled of “#3 – Initiate Project & Setup” also has a label of “2 – Ready”. This label will list the item in the column “Ready” on the kanban board. The same goes for each of the items that are listed as backlog. The kanban board in Huboard uses the number to order the columns by the labels and the following title as the column header. The respective kanban board for the issue listing above looks like this.

Huboard kanban (Click for full size image)

Huboard kanban (Click for full size image)

For now I’ve primarily been just adding the issues and maintaining them via the Github web interface. However the items can be moved via commit messages. Here are some examples;

  • push GH-#
  • pushed GH-#
  • move GH-#
  • moves GH-#

With that you get maximum Github Awesome + Kanban Communication.