├── Procfile ├── .bowerrc ├── client ├── app │ ├── scripts │ │ ├── client.js │ │ ├── directives │ │ │ ├── userinfo.html │ │ │ └── userinfo.js │ │ ├── compare │ │ │ ├── compare.js │ │ │ └── compare.html │ │ ├── services │ │ │ ├── auth.js │ │ │ └── gitapi.js │ │ └── home │ │ │ ├── home.html │ │ │ └── home.js │ ├── .DS_Store │ └── styles │ │ └── style.css ├── .DS_Store ├── app.js └── index.html ├── .gitignore ├── .DS_Store ├── server ├── server.js └── middleware.js ├── index.js ├── bower.json ├── PRESS-RELEASE.md ├── README.md ├── package.json ├── gulpfile.js ├── karma.conf.js ├── test └── gitApi.js ├── CONTRIBUTING.md └── STYLE-GUIDE.md /Procfile: -------------------------------------------------------------------------------- 1 | web: node index.js -------------------------------------------------------------------------------- /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "client/lib/" 3 | } -------------------------------------------------------------------------------- /client/app/scripts/client.js: -------------------------------------------------------------------------------- 1 | // D3 Main js file. 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | client/lib 3 | client/app/dist -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnz133/GitInsights/HEAD/.DS_Store -------------------------------------------------------------------------------- /client/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnz133/GitInsights/HEAD/client/.DS_Store -------------------------------------------------------------------------------- /client/app/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnz133/GitInsights/HEAD/client/app/.DS_Store -------------------------------------------------------------------------------- /server/server.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var app = express(); 3 | 4 | require('./middleware.js')(app); 5 | 6 | module.exports = app; -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var app = require('./server/server.js'); 2 | 3 | var port = process.env.PORT || 3000; 4 | 5 | app.listen(port, function() { 6 | console.log('Server Running...'); 7 | }); 8 | -------------------------------------------------------------------------------- /client/app/scripts/directives/userinfo.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |

{{user.name}}

6 | {{user.blog}} 7 | {{user.email}} 8 | {{user.company}} 9 | {{user.followers}} 10 | github 11 |

-------------------------------------------------------------------------------- /server/middleware.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var bodyparser = require('body-parser'); 3 | var morgan = require('morgan') 4 | 5 | module.exports = function (app) { 6 | 7 | app.use(bodyparser.json()); 8 | app.use(morgan('dev')); 9 | app.use(express.static(__dirname + '/../client')) 10 | 11 | app.get('/', function (req, res) { 12 | res.sendFile('index.html'); 13 | }); 14 | 15 | } -------------------------------------------------------------------------------- /client/app/scripts/directives/userinfo.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | angular.module('gitInsight.userinfo', []) 5 | .directive('userInfo', userInfo); 6 | 7 | function userInfo () { 8 | return { 9 | link: link, 10 | restrict: 'E', 11 | templateUrl: 'app/scripts/directives/userinfo.html', 12 | scope: { 13 | user: '=' 14 | } 15 | }; 16 | 17 | function link (scope, ele, attrs) { 18 | } 19 | } 20 | 21 | })(); -------------------------------------------------------------------------------- /client/app/scripts/compare/compare.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | 'use strict'; 3 | 4 | angular.module('gitInsight.compare', []) 5 | .controller('CompareController', CompareController); 6 | 7 | CompareController.$inject = ['$scope', 'GitApi', 'Auth']; 8 | function CompareController ($scope, GitApi, Auth) { 9 | $scope.userOne = {}; 10 | $scope.userTwo = {}; 11 | $scope.toDo = function(){ 12 | console.log('howdy'); 13 | }; 14 | } 15 | 16 | })(); -------------------------------------------------------------------------------- /client/app.js: -------------------------------------------------------------------------------- 1 | angular.module('gitInsight', [ 2 | 'gitInsight.home', 3 | 'ngRoute', 4 | 'gitInsight.gitapi', 5 | 'gitInsight.auth', 6 | 'gitInsight.userinfo', 7 | 'gitInsight.compare', 8 | ]) 9 | .config(function($routeProvider, $httpProvider){ 10 | $routeProvider 11 | .when('/', { 12 | templateUrl: 'app/scripts/home/home.html', 13 | controller: 'HomeController' 14 | }) 15 | .when('/compare', { 16 | templateUrl: 'app/scripts/compare/compare.html', 17 | controller: 'CompareController' 18 | }) 19 | .otherwise({ 20 | redirectTo: '/' 21 | }); 22 | }); -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "GitInsights", 3 | "main": "index.js", 4 | "version": "0.0.0", 5 | "homepage": "https://github.com/waieez/GitInsights", 6 | "authors": [ 7 | "John Zhang", 8 | "Seunghoon Ko", 9 | "Eli Xian" 10 | ], 11 | "description": "Github User Insights", 12 | "license": "MIT", 13 | "ignore": [ 14 | "**/.*", 15 | "node_modules", 16 | "client/bower/", 17 | "test", 18 | "tests" 19 | ], 20 | "dependencies": { 21 | "angular": "~1.3.14", 22 | "bootstrap": "~3.3.2", 23 | "angular-material": "~0.8.3", 24 | "angular-route": "~1.3.14", 25 | "firebase": "~2.2.2", 26 | "nvd3": "~1.7.1" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /client/app/scripts/compare/compare.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Search 7 | 8 | 9 | 10 | 11 | 12 | 13 | Search 14 | -------------------------------------------------------------------------------- /PRESS-RELEASE.md: -------------------------------------------------------------------------------- 1 | ## GitInsights ## 2 | For Recruiters/Developers looking to find talent. 3 | 4 | ## Summary ## 5 | Quickly visualize/analyze Github user activity. 6 | 7 | ## Problem ## 8 | Finding talent via Github is hard. Github Insights makes it easy to analyse and visualize the information you care about by simply searching their username. 9 | 10 | ## Solution ## 11 | Quickly visualize/analyze Github user activity 12 | 13 | ## Quote from You ## 14 | GitInsight as your talent finder. 15 | 16 | ## How to Get Started ## 17 | Type the github username you are interested in, boom info at a glance. 18 | 19 | ## Customer Quote ## 20 | “I recruited the best engineer with GitInsight! I saw that he actually a lot of experience with Rust, instead of some students just trying to make a greenfield project in Rust.” 21 | 22 | ## Closing and Call to Action ## 23 | GitInsights Today! 24 | 25 | ## Licence 26 | MIT -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Codeshipped!](https://codeship.com/projects/7cdce540-ab49-0132-e8c7-262a69de4513/status?branch=test) 2 | 3 | # GitInsights! 4 | 5 | Quickly visualize/analyze Github user activity, GitInsights Today! 6 | 7 | ## Team 8 | 9 | - __Product Owner__: John Zhang 10 | - __Scrum Master__: Eli Xian 11 | - __Development Team Members__: John Zhang, Eli Xian, Seunghoon Ko 12 | 13 | ## Table of Contents 14 | 15 | 1. [Usage](#Usage) 16 | 1. [Requirements](#requirements) 17 | 1. [Development](#development) 18 | 1. [Installing Dependencies](#installing-dependencies) 19 | 1. [Tasks](#tasks) 20 | 1. [Team](#team) 21 | 1. [Contributing](#contributing) 22 | 23 | ## Usage 24 | 25 | Finding talent via Github is hard. Github Insights makes it easy to analyse and visualize the information you care about by simply searching their username. 26 | 27 | ## Requirements 28 | 29 | - Node 0.10.x 30 | - Express 4.12.x 31 | - Angular 1.3.x 32 | 33 | ## Development 34 | 35 | ### Installing Dependencies 36 | 37 | From within the root directory: 38 | 39 | ```sh 40 | sudo npm install -g bower 41 | npm install 42 | bower install 43 | ``` 44 | 45 | ### Roadmap 46 | 47 | View the project roadmap [here](LINK_TO_PROJECT_ISSUES) 48 | 49 | 50 | ## Contributing 51 | 52 | See [CONTRIBUTING.md](CONTRIBUTING.md) for contribution guidelines. 53 | -------------------------------------------------------------------------------- /client/app/scripts/services/auth.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | angular.module('gitInsight.auth', []) 5 | .factory('Auth', Auth); 6 | 7 | Auth.$inject = []; 8 | function Auth () { 9 | //Uses Firebase only to authenticate via Github 10 | //Authenticated Github users are allowed to make 2000api calls/hr vs 60 for unauthenticated users 11 | 12 | //create an instance to interact with firebase api. 13 | //url refers to Firebase database. 14 | //for more information about Firebase please refer to http://www.firebase.com 15 | var ref = new Firebase("https://boiling-torch-2275.firebaseio.com"); 16 | var githubToken; 17 | 18 | return { 19 | login: login, 20 | getToken: getToken 21 | }; 22 | 23 | function getToken () { 24 | return githubToken; 25 | } 26 | 27 | function login (callback) { 28 | //creates a popup for authentication via github 29 | //closes pop after and sets the githubToken for use in GitApi calls 30 | ref.authWithOAuthPopup("github", function (error, authData) { 31 | if (error) { 32 | console.log("Login Failed!", error); 33 | } else { 34 | console.log("Authenticated successfully with payload:", authData); 35 | githubToken = authData.github.accessToken; 36 | callback(error, authData); 37 | } 38 | }); 39 | } 40 | } 41 | 42 | })(); 43 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "GitInsights", 3 | "version": "0.0.0", 4 | "description": "Github User Insights", 5 | "main": "index.js", 6 | "dependencies": { 7 | "angular": "^1.3.14", 8 | "angular-mocks": "^1.3.14", 9 | "body-parser": "^1.12.0", 10 | "bower": "^1.3.12", 11 | "express": "^4.12.2", 12 | "morgan": "^1.5.1" 13 | }, 14 | "devDependencies": { 15 | "gulp": "^3.8.11", 16 | "gulp-concat": "^2.5.2", 17 | "gulp-jshint": "^1.9.2", 18 | "gulp-nodemon": "^1.0.5", 19 | "gulp-sourcemaps": "^1.5.0", 20 | "gulp-uglify": "^1.1.0", 21 | "karma": "^0.12.31", 22 | "karma-chai": "^0.1.0", 23 | "karma-mocha": "^0.1.10", 24 | "karma-nyan-reporter": "0.0.60", 25 | "karma-phantomjs-launcher": "^0.1.4" 26 | }, 27 | "scripts": { 28 | "test": "echo \"Error: no test specified\" && exit 1", 29 | "start": "node index", 30 | "postinstall": "bower install" 31 | }, 32 | "repository": { 33 | "type": "git", 34 | "url": "https://github.com/GitInsights/GitInsights" 35 | }, 36 | "keywords": [ 37 | "Github", 38 | "Insights" 39 | ], 40 | "author": "John Zhang, Seunghoon Ko, Eli Xian", 41 | "license": "MIT", 42 | "bugs": { 43 | "url": "https://github.com/GitInsights/GitInsights/issues" 44 | }, 45 | "homepage": "https://github.com/GitInsights/GitInsights" 46 | } 47 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var concat = require('gulp-concat'); 3 | var uglify = require('gulp-uglify'); 4 | var jshint = require('gulp-jshint'); 5 | var karma = require('karma').server 6 | var nodemon = require('gulp-nodemon'); 7 | 8 | var paths = { 9 | scripts: [ 10 | 'client/*.js', 11 | 'client/app/scripts/**/*.js', 12 | ], 13 | dist: 'client/app/dist' 14 | } 15 | 16 | gulp.task('default', ['lint', 'test', 'build', 'watch']); 17 | 18 | // Lint js files 19 | gulp.task('lint', function () { 20 | gulp.src(paths.scripts) 21 | .pipe(jshint()) 22 | .pipe(jshint.reporter('default')) 23 | }); 24 | 25 | gulp.task('test', function (done) { 26 | karma.start({ 27 | configFile: __dirname + '/karma.conf.js', 28 | singleRun: true 29 | }, done); 30 | }); 31 | 32 | // Uglify and Concat js files 33 | gulp.task('build', function () { 34 | gulp.src(paths.scripts) 35 | .pipe(uglify()) 36 | .pipe(concat('scripts.min.js')) 37 | .pipe(gulp.dest(paths.dist)) 38 | }); 39 | 40 | gulp.task('watch', function () { 41 | gulp.watch(paths.scripts, ['lint', 'test', 'build']); 42 | }); 43 | 44 | gulp.task('serve', function () { 45 | nodemon({ 46 | script: 'index.js', 47 | ext: 'html js', 48 | ignore: ['node_modules'] 49 | }) 50 | .on('change', ['lint', 'test']) 51 | .on('restart', function () { 52 | console.log('restarting server'); 53 | }); 54 | }); -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration 2 | // Generated on Fri Mar 13 2015 23:23:21 GMT-0500 (Central Daylight Time) 3 | 4 | module.exports = function(config) { 5 | config.set({ 6 | 7 | // base path that will be used to resolve all patterns (eg. files, exclude) 8 | basePath: '', 9 | 10 | 11 | // frameworks to use 12 | // available frameworks: https://npmjs.org/browse/keyword/karma-adapter 13 | frameworks: ['mocha', 'chai'], 14 | 15 | 16 | // list of files / patterns to load in the browser 17 | files: [ 18 | 'client/lib/firebase/firebase.js', 19 | 'client/lib/angular/angular.js', 20 | 'node_modules/angular-mocks/angular-mocks.js', 21 | 'client/app/scripts/**/*.js', 22 | 'test/*.js', 23 | ], 24 | 25 | 26 | // list of files to exclude 27 | exclude: [ 28 | 'karma.conf.js' 29 | ], 30 | 31 | 32 | // preprocess matching files before serving them to the browser 33 | // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor 34 | preprocessors: { 35 | }, 36 | 37 | 38 | // test results reporter to use 39 | // possible values: 'dots', 'progress' 40 | // available reporters: https://npmjs.org/browse/keyword/karma-reporter 41 | reporters: ['nyan'], 42 | 43 | 44 | // web server port 45 | port: 9876, 46 | 47 | 48 | // enable / disable colors in the output (reporters and logs) 49 | colors: true, 50 | 51 | 52 | // level of logging 53 | // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG 54 | logLevel: config.LOG_INFO, 55 | 56 | 57 | // enable / disable watching file and executing tests whenever any file changes 58 | autoWatch: true, 59 | 60 | 61 | // start these browsers 62 | // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher 63 | browsers: ['PhantomJS'], 64 | 65 | 66 | // Continuous Integration mode 67 | // if true, Karma captures browsers, runs the tests and exits 68 | singleRun: false 69 | }); 70 | }; 71 | -------------------------------------------------------------------------------- /client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Git Insights 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /client/app/scripts/home/home.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

Git Insight

6 | 14 |
15 |
16 | 17 |
18 | 19 |
20 |

Git Insight

21 |

We can help recruiters and employers analyze someone's github profile

22 |

23 | 24 | 25 | 26 | 27 | 28 | Search 29 | 30 |

31 |
32 | 33 | 34 |
35 |

36 | 37 | 38 | 39 | 40 | 41 | Compare Users 42 | 43 |

44 |
45 | 46 |
47 | 48 | 49 |
50 | 51 |
52 | 53 | 54 |
55 | 56 |
57 | 58 | 59 |
60 | 61 |
62 |
63 | 64 |
65 |
66 |
67 |
68 | -------------------------------------------------------------------------------- /client/app/styles/style.css: -------------------------------------------------------------------------------- 1 | /* Custom style */ 2 | 3 | /* 4 | * Globals 5 | */ 6 | 7 | /* Links */ 8 | a, 9 | a:focus, 10 | a:hover { 11 | color: #222; 12 | } 13 | 14 | /* Custom default button */ 15 | .btn-default, 16 | .btn-default:hover, 17 | .btn-default:focus { 18 | color: #333; 19 | text-shadow: none; /* Prevent inheritence from `body` */ 20 | /*background-color: #fff;*/ 21 | border: 1px solid #fff; 22 | } 23 | 24 | 25 | /* 26 | * Base structure 27 | */ 28 | 29 | html, 30 | body { 31 | height: 100%; 32 | /*background-color: #333;*/ 33 | } 34 | body { 35 | color: #333; 36 | text-align: center; 37 | text-shadow: 0 1px 3px rgba(0,0,0,.5); 38 | } 39 | 40 | /* Extra markup and styles for table-esque vertical and horizontal centering */ 41 | .site-wrapper { 42 | display: table; 43 | width: 100%; 44 | height: 100%; /* For at least Firefox */ 45 | min-height: 100%; 46 | -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5); 47 | box-shadow: inset 0 0 100px rgba(0,0,0,.5); 48 | } 49 | .site-wrapper-inner { 50 | display: table-cell; 51 | vertical-align: top; 52 | } 53 | .cover-container { 54 | margin-right: auto; 55 | margin-left: auto; 56 | } 57 | 58 | /* Padding for spacing */ 59 | .inner { 60 | padding: 30px; 61 | } 62 | 63 | 64 | /* 65 | * Header 66 | */ 67 | .masthead-brand { 68 | margin-top: 10px; 69 | margin-bottom: 10px; 70 | } 71 | 72 | .masthead-nav > li { 73 | display: inline-block; 74 | } 75 | .masthead-nav > li + li { 76 | margin-left: 20px; 77 | } 78 | .masthead-nav > li > a { 79 | padding-right: 0; 80 | padding-left: 0; 81 | font-size: 16px; 82 | font-weight: bold; 83 | color: #fff; /* IE8 proofing */ 84 | color: rgba(55,55,55,.75); 85 | border-bottom: 2px solid transparent; 86 | } 87 | .masthead-nav > li > a:hover, 88 | .masthead-nav > li > a:focus { 89 | background-color: transparent; 90 | border-bottom-color: #a9a9a9; 91 | border-bottom-color: rgba(255,255,255,.25); 92 | } 93 | .masthead-nav > .active > a, 94 | .masthead-nav > .active > a:hover, 95 | .masthead-nav > .active > a:focus { 96 | color: #333; 97 | border-bottom-color: #fff; 98 | } 99 | 100 | @media (min-width: 768px) { 101 | .masthead-brand { 102 | float: left; 103 | } 104 | .masthead-nav { 105 | float: right; 106 | } 107 | } 108 | 109 | 110 | /* 111 | * Cover 112 | */ 113 | 114 | .cover { 115 | padding: 0 20px; 116 | } 117 | .cover .btn-lg { 118 | padding: 10px 20px; 119 | font-weight: bold; 120 | } 121 | 122 | 123 | /* 124 | * Footer 125 | */ 126 | 127 | .mastfoot { 128 | color: #999; /* IE8 proofing */ 129 | color: rgba(55,55,55,.5); 130 | } 131 | 132 | 133 | /* 134 | * Affix and center 135 | */ 136 | 137 | @media (min-width: 768px) { 138 | /* Pull out the header and footer */ 139 | .masthead { 140 | position: relative; 141 | top: 0; 142 | } 143 | .mastfoot { 144 | position: relative; 145 | bottom: 0; 146 | } 147 | /* Start the vertical centering */ 148 | .site-wrapper-inner { 149 | /*vertical-align: middle;*/ 150 | } 151 | /* Handle the widths */ 152 | .masthead, 153 | .mastfoot, 154 | .cover-container { 155 | width: 100%; /* Must be percentage or pixels for horizontal alignment */ 156 | } 157 | } 158 | 159 | @media (min-width: 992px) { 160 | .masthead, 161 | .mastfoot, 162 | .cover-container { 163 | width: 1100px; 164 | } 165 | } 166 | 167 | #chart { 168 | margin-top: 100px; 169 | clear: both; 170 | padding: 1px; 171 | } 172 | 173 | div .welcome { 174 | margin-top:14%; 175 | } 176 | -------------------------------------------------------------------------------- /test/gitApi.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | describe('GitApi', function(){ 4 | 5 | describe('Core', function(){ 6 | 7 | var $httpBackend, GitApi, Auth; 8 | var gitApi = 'https://api.github.com'; 9 | 10 | beforeEach(module('gitInsight.gitapi')); 11 | beforeEach(module('gitInsight.auth')); 12 | beforeEach(inject(function ($injector, _GitApi_, _Auth_){ 13 | $httpBackend = $injector.get('$httpBackend'); 14 | GitApi = _GitApi_; 15 | Auth = _Auth_; 16 | 17 | //resource used by getUserRepos 18 | var _userResource = gitApi + '/users/waieez/repos'; 19 | $httpBackend 20 | .when('GET', _userResource) 21 | .respond([ 22 | { 23 | "full_name": "waieez/GitInsights", 24 | "owner": { 25 | "login":'waieez' 26 | }, 27 | "url": gitApi + '/repos/waieez/GitInsights' 28 | }, 29 | { 30 | "full_name": "waieez/Blog", 31 | "owner": { 32 | "login":'waieez' 33 | }, 34 | "url": gitApi + '/repos/waieez/Blog' 35 | } 36 | ]); 37 | 38 | //getAllWeeklyData will make an api call for each repo 39 | var _repoResource1 = gitApi + '/repos/waieez/GitInsights/stats/contributors'; 40 | $httpBackend 41 | .when('GET', _repoResource1) 42 | .respond([ 43 | { 44 | "weeks": [{}, {}, {}], 45 | "author": {"login":"imskojs"} 46 | }, 47 | { 48 | "weeks": [{}, {}, {}], 49 | "author": {"login":"johnz133"} 50 | }, 51 | { 52 | "weeks": [{}, {}, {}], 53 | "author": {"login":"waieez"} 54 | } 55 | ]); 56 | 57 | var _repoResource2 = gitApi + '/repos/waieez/Blog/stats/contributors'; 58 | $httpBackend 59 | .when('GET', _repoResource2) 60 | .respond([ 61 | { 62 | "weeks": [{}, {}, {}], 63 | "author": {"login":"waieez"} 64 | } 65 | ]); 66 | })); 67 | 68 | afterEach(function () { 69 | $httpBackend.verifyNoOutstandingExpectation(); 70 | $httpBackend.verifyNoOutstandingRequest(); 71 | }); 72 | 73 | it('should return an object with all the required methods', function(){ 74 | expect(GitApi).to.be.an('object'); 75 | expect(GitApi.getUserRepos).to.be.a('function'); 76 | expect(GitApi.getRepoWeeklyData).to.be.a('function'); 77 | expect(GitApi.getAllWeeklyData).to.be.a('function'); 78 | }); 79 | 80 | describe('getUserRepos', function () { 81 | 82 | it("should return a list of a user's repos", function(){ 83 | GitApi.getUserRepos('waieez') 84 | .then(function (repos) { 85 | var username = repos[0].owner.login; 86 | var repoName = repos[0].full_name; 87 | expect(username).to.equal('waieez'); 88 | expect(repoName).to.equal('waieez/GitInsights'); 89 | expect(repos.length).to.equal(2); 90 | }); 91 | $httpBackend.flush(); 92 | }); 93 | 94 | }); 95 | 96 | describe('getRepoWeeklyData', function(){ 97 | 98 | it('should return an array of objects', function () { 99 | var mockRepoObject = {url:gitApi + '/repos/waieez/GitInsights'}; 100 | GitApi.getRepoWeeklyData(mockRepoObject, 'waieez') 101 | .then(function(data){ 102 | var authorName = data.author.login; 103 | var weeksData = data.weeks; 104 | expect(authorName).to.equal('waieez'); 105 | expect(weeksData.length).to.eql(3); 106 | }); 107 | $httpBackend.flush(); 108 | }); 109 | 110 | }); 111 | 112 | describe('getAllWeeklyData', function () { 113 | 114 | it("should return the user's weekly data", function(){ 115 | GitApi.getAllWeeklyData('waieez') 116 | .then(function (result) { 117 | expect(result.length).to.equal(2); 118 | }); 119 | $httpBackend.flush(); 120 | }); 121 | }); 122 | }); 123 | }); -------------------------------------------------------------------------------- /client/app/scripts/home/home.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | 'use strict'; 3 | 4 | angular.module('gitInsight.home', ['ngMaterial', 'ngMessages']) 5 | .controller('HomeController', HomeController) 6 | //defines the colors 7 | .config( function($mdThemingProvider){ 8 | $mdThemingProvider.theme('docs-dark', 'default') 9 | .primaryPalette('light-blue') 10 | }); 11 | 12 | HomeController.$inject = ['$scope', '$window', '$location', 'GitApi', 'Auth']; 13 | 14 | function HomeController($scope, $window, $location, GitApi, Auth){ 15 | $scope.currentUser = {}; 16 | $scope.users = []; 17 | $scope.loaded = false; 18 | $scope.loaded3 = false; 19 | $scope.labels = []; 20 | $scope.series = []; 21 | $scope.graphData = []; 22 | $scope.timeStamps = []; 23 | $scope.userOneData = []; 24 | $scope.githubName = false; 25 | $scope.test = 'l'; 26 | $scope.getUserRepos = function(){ 27 | GitApi.getUserRepos($scope.currentUser.username) 28 | .then(function(data){ 29 | $scope.loaded = true; 30 | }); 31 | }; 32 | 33 | $scope.getAllWeeklyData = function(){ 34 | GitApi.getAllWeeklyData($scope.currentUser.username) 35 | .then(function(data){ 36 | addGraphData(GitApi.reduceAllWeeklyData(data, $scope.currentUser.username)); 37 | $scope.loaded = true; 38 | $scope.users.push($scope.currentUser); 39 | $scope.currentUser = {}; 40 | return data; 41 | }) 42 | .then(function (data) { 43 | return GitApi.gatherLanguageData(data); 44 | }) 45 | .then(function (data) { 46 | var languages = GitApi.getUserLanguages(data); 47 | addPieGraph(languages); 48 | }); 49 | }; 50 | 51 | //TODO: refactor into service 52 | var addGraphData = function(data){ 53 | 54 | var secondsPerYear = 525600 * 60; 55 | var dateNow = new Date() / 1000; //convert to unix 56 | var dateXYearsAgo = dateNow - (secondsPerYear * 1); 57 | 58 | var netAdditions = []; 59 | var unixTimeStamps = []; 60 | var newTimeStamps = []; 61 | 62 | for(var week in data){ 63 | unixTimeStamps.push(+week); 64 | netAdditions.push(data[week].a - data[week].d); 65 | } 66 | var series1 = {"key": $scope.currentUser.username + "'s Net Additions", "values": []}; 67 | 68 | for(var i = 0; i < unixTimeStamps.length; i++){ 69 | if (unixTimeStamps[i] > dateXYearsAgo) { 70 | series1.values.push([unixTimeStamps[i], netAdditions[i]]); 71 | } 72 | } 73 | 74 | if($scope.userOneData.length >= 2){ 75 | $scope.userOneData = []; 76 | } 77 | 78 | $scope.userOneData.push(series1); 79 | 80 | // nv is a nvd3 library object. (on global scope) 81 | nv.addGraph(function() { 82 | // Creates multi-line graph 83 | var chart = nv.models.lineChart() 84 | .x(function(d) { return d[0] }) 85 | .y(function(d) { return d[1] }) 86 | .color(d3.scale.category10().range()) 87 | .useInteractiveGuideline(true); 88 | 89 | // Define x axis 90 | chart.xAxis 91 | // .tickValues(unixTimeStamps) 92 | .tickFormat(function(d) { 93 | return d3.time.format('%x')(new Date(d*1000)) 94 | }); 95 | 96 | // Define y axis 97 | chart.yAxis 98 | .domain(d3.range(netAdditions)) 99 | .tickFormat(d3.format('d')); 100 | 101 | // append defined chart to svg element 102 | d3.select('#chart svg') 103 | .datum($scope.userOneData) 104 | .call(chart); 105 | 106 | // resizes graph when window resizes 107 | nv.utils.windowResize(chart.update); 108 | return chart; 109 | }); 110 | }; 111 | 112 | var count = 0 113 | var addPieGraph = function (languages){ 114 | // Limits max user comparison = 2 115 | count++ 116 | if(count > 2){ 117 | $scope.loaded3 = false; 118 | count = 1; 119 | } else if (count === 2){ 120 | $scope.loaded3 = true; 121 | } 122 | //Changes format from {JavaScript: 676977.4910200321, CSS: 3554.990878681176, HTML: 41.838509316770185, Shell: 4024.4960858041054} 123 | // to [{"key": "One", "value": 222}, ... , {"key": "Last", "value": 222}] 124 | var languageData = d3.entries(languages) 125 | 126 | // Add second pie chart when comparing users. 127 | var chart = "#chart2" 128 | if(count === 2){ 129 | chart = "#chart3" 130 | } 131 | 132 | // nvd3 library's pie chart. 133 | nv.addGraph(function() { 134 | var pieChart = nv.models.pieChart() 135 | .x(function(d) { return d.key }) 136 | .y(function(d) { return d.value }) 137 | .showLabels(true) 138 | .labelType("percent"); 139 | 140 | d3.select(chart + " svg") 141 | .datum(languageData) 142 | .transition().duration(350) 143 | .call(pieChart); 144 | 145 | return pieChart; 146 | }); 147 | }; 148 | 149 | $scope.login = function(){ 150 | Auth.login(function(err, authData){ 151 | $scope.$apply(function(){ 152 | $scope.githubName = authData.github.displayName; 153 | }); 154 | }); 155 | }; 156 | 157 | } 158 | })(); 159 | 160 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | ## General Workflow 4 | 5 | 1. Fork the repo 6 | 1. Cut a namespaced feature branch from master 7 | - bug/... 8 | - feat/... 9 | - test/... 10 | - doc/... 11 | - refactor/... 12 | 1. Make commits to your feature branch. Prefix each commit like so: 13 | - (feat) Added a new feature 14 | - (fix) Fixed inconsistent tests [Fixes #0] 15 | - (refactor) ... 16 | - (cleanup) ... 17 | - (test) ... 18 | - (doc) ... 19 | 1. When you've finished with your fix or feature, Rebase upstream changes into your branch. submit a [pull request][] 20 | directly to master. Include a description of your changes. 21 | 1. Your pull request will be reviewed by another maintainer. The point of code 22 | reviews is to help keep the codebase clean and of high quality and, equally 23 | as important, to help you grow as a programmer. If your code reviewer 24 | requests you make a change you don't understand, ask them why. 25 | 1. Fix any issues raised by your code reviwer, and push your fixes as a single 26 | new commit. 27 | 1. Once the pull request has been reviewed, it will be merged by another member of the team. Do not merge your own commits. 28 | 29 | ## Detailed Workflow 30 | 31 | ### Fork the repo 32 | 33 | Use github’s interface to make a fork of the repo, then add that repo as an upstream remote: 34 | 35 | ``` 36 | git remote add upstream https://github.com/hackreactor-labs/.git 37 | ``` 38 | 39 | ### Cut a namespaced feature branch from master 40 | 41 | Your branch should follow this naming convention: 42 | - bug/... 43 | - feat/... 44 | - test/... 45 | - doc/... 46 | - refactor/... 47 | 48 | These commands will help you do this: 49 | 50 | ``` bash 51 | 52 | # Creates your branch and brings you there 53 | git checkout -b `your-branch-name` 54 | ``` 55 | 56 | ### Make commits to your feature branch. 57 | 58 | Prefix each commit like so 59 | - (feat) Added a new feature 60 | - (fix) Fixed inconsistent tests [Fixes #0] 61 | - (refactor) ... 62 | - (cleanup) ... 63 | - (test) ... 64 | - (doc) ... 65 | 66 | Make changes and commits on your branch, and make sure that you 67 | only make changes that are relevant to this branch. If you find 68 | yourself making unrelated changes, make a new branch for those 69 | changes. 70 | 71 | #### Commit Message Guidelines 72 | 73 | - Commit messages should be written in the present tense; e.g. "Fix continuous 74 | integration script". 75 | - The first line of your commit message should be a brief summary of what the 76 | commit changes. Aim for about 70 characters max. Remember: This is a summary, 77 | not a detailed description of everything that changed. 78 | - If you want to explain the commit in more depth, following the first line should 79 | be a blank line and then a more detailed description of the commit. This can be 80 | as detailed as you want, so dig into details here and keep the first line short. 81 | 82 | ### Rebase upstream changes into your branch 83 | 84 | Once you are done making changes, you can begin the process of getting 85 | your code merged into the main repo. Step 1 is to rebase upstream 86 | changes to the master branch into yours by running this command 87 | from your branch: 88 | 89 | ```bash 90 | git pull --rebase upstream master 91 | ``` 92 | 93 | This will start the rebase process. You must commit all of your changes 94 | before doing this. If there are no conflicts, this should just roll all 95 | of your changes back on top of the changes from upstream, leading to a 96 | nice, clean, linear commit history. 97 | 98 | If there are conflicting changes, git will start yelling at you part way 99 | through the rebasing process. Git will pause rebasing to allow you to sort 100 | out the conflicts. You do this the same way you solve merge conflicts, 101 | by checking all of the files git says have been changed in both histories 102 | and picking the versions you want. Be aware that these changes will show 103 | up in your pull request, so try and incorporate upstream changes as much 104 | as possible. 105 | 106 | You pick a file by `git add`ing it - you do not make commits during a 107 | rebase. 108 | 109 | Once you are done fixing conflicts for a specific commit, run: 110 | 111 | ```bash 112 | git rebase --continue 113 | ``` 114 | 115 | This will continue the rebasing process. Once you are done fixing all 116 | conflicts you should run the existing tests to make sure you didn’t break 117 | anything, then run your new tests (there are new tests, right?) and 118 | make sure they work also. 119 | 120 | If rebasing broke anything, fix it, then repeat the above process until 121 | you get here again and nothing is broken and all the tests pass. 122 | 123 | ### Make a pull request 124 | 125 | Make a clear pull request from your fork and branch to the upstream master 126 | branch, detailing exactly what changes you made and what feature this 127 | should add. The clearer your pull request is the faster you can get 128 | your changes incorporated into this repo. 129 | 130 | At least one other person MUST give your changes a code review, and once 131 | they are satisfied they will merge your changes into upstream. Alternatively, 132 | they may have some requested changes. You should make more commits to your 133 | branch to fix these, then follow this process again from rebasing onwards. 134 | 135 | Once you get back here, make a comment requesting further review and 136 | someone will look at your code again. If they like it, it will get merged, 137 | else, just repeat again. 138 | 139 | Thanks for contributing! 140 | 141 | ### Guidelines 142 | 143 | 1. Uphold the current code standard: 144 | - Keep your code [DRY][]. 145 | - Apply the [boy scout rule][]. 146 | - Follow [STYLE-GUIDE.md](STYLE-GUIDE.md) 147 | 1. Run the [tests][] before submitting a pull request. 148 | 1. Tests are very, very important. Submit tests if your pull request contains 149 | new, testable behavior. 150 | 1. Your pull request is comprised of a single ([squashed][]) commit. 151 | 152 | ## Checklist: 153 | 154 | This is just to help you organize your process 155 | 156 | - [ ] Did I cut my work branch off of master (don't cut new branches from existing feature brances)? 157 | - [ ] Did I follow the correct naming convention for my branch? 158 | - [ ] Is my branch focused on a single main change? 159 | - [ ] Do all of my changes directly relate to this change? 160 | - [ ] Did I rebase the upstream master branch after I finished all my 161 | work? 162 | - [ ] Did I write a clear pull request message detailing what changes I made? 163 | - [ ] Did I get a code review? 164 | - [ ] Did I make any requested changes from that code review? 165 | 166 | If you follow all of these guidelines and make good changes, you should have 167 | no problem getting your changes merged in. 168 | 169 | 170 | 171 | [style guide]: https://github.com/hackreactor-labs/style-guide 172 | [n-queens]: https://github.com/hackreactor-labs/n-queens 173 | [Underbar]: https://github.com/hackreactor-labs/underbar 174 | [curriculum workflow diagram]: http://i.imgur.com/p0e4tQK.png 175 | [cons of merge]: https://f.cloud.github.com/assets/1577682/1458274/1391ac28-435e-11e3-88b6-69c85029c978.png 176 | [Bookstrap]: https://github.com/hackreactor/bookstrap 177 | [Taser]: https://github.com/hackreactor/bookstrap 178 | [tools workflow diagram]: http://i.imgur.com/kzlrDj7.png 179 | [Git Flow]: http://nvie.com/posts/a-successful-git-branching-model/ 180 | [GitHub Flow]: http://scottchacon.com/2011/08/31/github-flow.html 181 | [Squash]: http://gitready.com/advanced/2009/02/10/squashing-commits-with-rebase.html 182 | -------------------------------------------------------------------------------- /client/app/scripts/services/gitapi.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | "use strict"; 3 | 4 | angular.module('gitInsight.gitapi', []) 5 | .factory('GitApi', GitApi); 6 | 7 | GitApi.$inject = ['$q', '$http', 'Auth']; 8 | function GitApi ($q, $http, Auth) { 9 | 10 | var gitApi = 'https://api.github.com/'; 11 | var usersRepos = {}; 12 | 13 | return { 14 | reduceAllWeeklyData: reduceAllWeeklyData, 15 | getAllWeeklyData: getAllWeeklyData, 16 | getRepoWeeklyData: getRepoWeeklyData, 17 | getUserRepos: getUserRepos, 18 | getUserContact: getUserContact, 19 | gatherLanguageData: gatherLanguageData, 20 | getUserLanguages: getUserLanguages 21 | }; 22 | 23 | //a week is an array of objects 24 | //each object is in the form of {additions: #, deletions #, week:#(UNIX time)} 25 | //we extract the additions and deletions from each data object for each week, from each repo 26 | //we return an array of reduced week objects to graph the total additions/deletions 27 | function reduceAllWeeklyData (array, username) { 28 | var reduced = {}; 29 | array.forEach(function (result) { 30 | if(result!==undefined && result.author.login.toLowerCase() === username.toLowerCase()){ 31 | result.weeks.forEach(function (data) { 32 | var week = data.w; 33 | for (var key in data) { 34 | reduced[week] = reduced[week] || {}; 35 | reduced[week][key] = (reduced[week][key] || 0) + data[key]; 36 | delete reduced[week].w; 37 | } 38 | }); 39 | } 40 | }); 41 | return reduced; 42 | } 43 | 44 | //returns data from each api call 45 | //after all successfully resolves 46 | function getAllWeeklyData (username) { 47 | return getUserRepos(username) 48 | .then(function (repos) { 49 | var promises = repos.map(function (repo) { 50 | return getRepoWeeklyData(repo, username); 51 | }); 52 | return $q.all(promises); 53 | }); 54 | } 55 | 56 | function get (url, params) { 57 | //Auth.getToken() retrieves the gitToken when a user authenticates with 58 | //firebase's Github Provider 59 | 60 | //perhaps extend params with given input 61 | params = params || {access_token: Auth.getToken()}; 62 | return $http({ 63 | method: 'GET', 64 | url: url, 65 | params: params 66 | }); 67 | } 68 | 69 | //returns an array of additions/deletions and commits 70 | //made by a user for a given repo 71 | function getRepoWeeklyData (repo, username) { 72 | var contributors = repo.url + '/stats/contributors'; 73 | 74 | return get(contributors).then(function (res) { 75 | var numContributors = res.data.length; 76 | //if there are multiple contributors for this repo, 77 | //we need to find the one that matches the queried user 78 | for(var i = 0; i < numContributors; i++){ 79 | if(res.data[i].author.login === username) { 80 | var data = res.data[i]; 81 | //we attach some metadata that will help us with chaining these queries 82 | data.url = repo.url; 83 | data.numContributors = numContributors; 84 | return data; 85 | } 86 | } 87 | }); 88 | } 89 | 90 | function getUserRepos (username) { 91 | //if cached, return repo list as promise 92 | if (usersRepos[username]) { 93 | return $q(function (resolve, reject) { 94 | return resolve(usersRepos[username]); 95 | }); 96 | } 97 | 98 | //else, fetch via api 99 | //currently only fetches repos owned by user 100 | //TODO: Fetch all repos user has contributed to 101 | var userRepos = gitApi + 'users/' + username + '/repos'; 102 | return get(userRepos).then(function (res){ 103 | var repos = res.data; 104 | var username = res.data[0].owner.login; 105 | usersRepos[username] = repos; 106 | return usersRepos[username]; 107 | }); 108 | } 109 | 110 | function getUserContact (username) { 111 | var userContact = gitApi + "users/" + username; 112 | return get(userContact).then(function (res) { 113 | return res.data; 114 | }); 115 | } 116 | 117 | // In order to get an idea of the user's language use, 118 | // we first supply information about all repos the user has contributed to. 119 | 120 | // For each repo, we make at most two requests, 121 | // getLanguageStats gathers the language statstic for that repo, 122 | // if the user is the sole contributor for the repo, 123 | // we can add the language stat directly to the final result 124 | // else, getCodeFrequency gets the repo's data for weekly additions/deletions 125 | // the ratio between the user's and the repo's net additions is used to estimate 126 | // the portion the user has contributed to the repo in each language. 127 | 128 | // This approximation strives to reduce the number of api calls to Github 129 | // while giving a reasonable estimate of the user's language use. 130 | 131 | // Please let us know if there is a better way. 132 | 133 | function gatherLanguageData (data) { 134 | var promises = data.map(function (repo) { 135 | if (repo) { 136 | var requests = [repo]; 137 | requests[1] = getLanguageStats(repo); 138 | 139 | //only get code frequency if the repo has multiple contibutors 140 | //otherwise we can just add the languageStat directly. 141 | if(repo.numContributors > 1) { 142 | requests[2] = getCodeFrequency(repo); 143 | } 144 | 145 | return $q.all(requests); 146 | } else { 147 | return []; 148 | } 149 | }); 150 | //$q is angular's light version of the q promise library 151 | //each api call executes asynchronously, 152 | //we return only when all of them have resolved 153 | return $q.all(promises); 154 | } 155 | 156 | // Once all the requests have been resolved, we can sum the values 157 | // across all repos and get an estimate of the user's language use 158 | // based on the total number of bytes per language. 159 | 160 | function getUserLanguages (repos) { 161 | var squashed = {}; 162 | repos.forEach(function (repo) { 163 | var result = estimateUserContribution(repo); 164 | if (result) { 165 | for (var language in result) { 166 | if (squashed[language]) { 167 | squashed[language] += result[language]; 168 | } else { 169 | squashed[language] = result[language]; 170 | } 171 | } 172 | } 173 | }); 174 | return squashed; 175 | } 176 | 177 | //returns an object representing the number of bytes 178 | //each language used in this repo uses. 179 | function getLanguageStats (repo) { 180 | var repoLanguages = repo.url + '/languages' 181 | return get(repoLanguages).then(function (res) { 182 | return res.data; 183 | }); 184 | } 185 | 186 | //returns an array of arrays 187 | //each subarray contains information about the total number of additions/deletions 188 | //for a given week made in this repo 189 | function getCodeFrequency (repo) { 190 | var repoCodeFreq = repo.url + '/stats/code_frequency'; 191 | return get(repoCodeFreq).then(function (res) { 192 | return res.data; 193 | }); 194 | } 195 | 196 | function estimateUserContribution (repo) { 197 | var result = {}; 198 | 199 | // no data on repo 200 | if (repo.length === 0){ 201 | return null; 202 | } 203 | 204 | // no request for contributor data, 205 | // user is sole contributor 206 | // return entire languageStat 207 | if (!repo[2]) { 208 | return repo[1]; 209 | } 210 | 211 | var weeklyData = repo[0].weeks; 212 | var languageStats = repo[1]; 213 | var codeFreq = repo[2]; 214 | 215 | var userNetAdditions = 0; 216 | var repoNetAdditions = 0; 217 | 218 | //weeklyData is an array of week objects 219 | //with the format {additions:#, deletions:#, week:#(UNIX Timestamp)} 220 | weeklyData.forEach(function (week) { 221 | userNetAdditions += (week.a - week.d); 222 | }); 223 | 224 | //codeFreq is is an array of arrays 225 | //with the format [timestamp, additions, deletions] 226 | codeFreq.forEach(function (week) { 227 | repoNetAdditions += (week[1] - week[2]); 228 | }); 229 | 230 | var ratio = (userNetAdditions/repoNetAdditions); 231 | 232 | for (var key in languageStats) { 233 | result[key] = languageStats[key] * ratio; 234 | } 235 | 236 | return result; 237 | } 238 | 239 | } 240 | 241 | })(); 242 | -------------------------------------------------------------------------------- /STYLE-GUIDE.md: -------------------------------------------------------------------------------- 1 | ### Indentation 2 | 3 | When writing any block of code that is logically subordinate to the line immediately before and after it, that block should be indented two spaces more than the surrounding lines 4 | 5 | * Do not put any tab characters anywhere in your code. You would do best to stop pressing the tab key entirely. 6 | * Increase the indent level for all blocks by two extra spaces 7 | * When a line opens a block, the next line starts 2 spaces further in than the line that opened 8 | 9 | ```javascript 10 | // good: 11 | if(condition){ 12 | action(); 13 | } 14 | 15 | // bad: 16 | if(condition){ 17 | action(); 18 | } 19 | ``` 20 | 21 | * When a line closes a block, that line starts at the same level as the line that opened the block 22 | ```javascript 23 | // good: 24 | if(condition){ 25 | action(); 26 | } 27 | 28 | // bad: 29 | if(condition){ 30 | action(); 31 | } 32 | ``` 33 | 34 | * No two lines should ever have more or less than 2 spaces difference in their indentation. Any number of mistakes in the above rules could lead to this, but one example would be: 35 | 36 | ```javascript 37 | // bad: 38 | transmogrify({ 39 | a: { 40 | b: function(){ 41 | } 42 | }}); 43 | ``` 44 | 45 | * use sublime's arrow collapsing as a guide. do the collapsing lines seem like they should be 'contained' by the line with an arrow on it? 46 | 47 | 48 | ### Variable names 49 | 50 | * A single descriptive word is best. 51 | 52 | ```javascript 53 | // good: 54 | var animals = ['cat', 'dog', 'fish']; 55 | 56 | // bad: 57 | var targetInputs = ['cat', 'dog', 'fish']; 58 | ``` 59 | 60 | * Collections such as arrays and maps should have plural noun variable names. 61 | 62 | ```javascript 63 | // good: 64 | var animals = ['cat', 'dog', 'fish']; 65 | 66 | // bad: 67 | var animalList = ['cat', 'dog', 'fish']; 68 | 69 | // bad: 70 | var animal = ['cat', 'dog', 'fish']; 71 | ``` 72 | 73 | * Name your variables after their purpose, not their structure 74 | 75 | ```javascript 76 | // good: 77 | var animals = ['cat', 'dog', 'fish']; 78 | 79 | // bad: 80 | var array = ['cat', 'dog', 'fish']; 81 | ``` 82 | 83 | 84 | ### Language constructs 85 | 86 | * Do not use `for...in` statements with the intent of iterating over a list of numeric keys. Use a for-with-semicolons statement in stead. 87 | 88 | ```javascript 89 | // good: 90 | var list = ['a', 'b', 'c'] 91 | for(var i = 0; i < list.length; i++){ 92 | alert(list[i]); 93 | } 94 | 95 | // bad: 96 | var list = ['a', 'b', 'c'] 97 | for(var i in list){ 98 | alert(list[i]); 99 | } 100 | ``` 101 | 102 | * Never omit braces for statement blocks (although they are technically optional). 103 | ```javascript 104 | // good: 105 | for(key in object){ 106 | alert(key); 107 | } 108 | 109 | // bad: 110 | for(key in object) 111 | alert(key); 112 | ``` 113 | 114 | * Always use `===` and `!==`, since `==` and `!=` will automatically convert types in ways you're unlikely to expect. 115 | 116 | ```javascript 117 | // good: 118 | 119 | // this comparison evaluates to false, because the number zero is not the same as the empty string. 120 | if(0 === ''){ 121 | alert('looks like they\'re equal'); 122 | } 123 | 124 | // bad: 125 | 126 | // This comparison evaluates to true, because after type coercion, zero and the empty string are equal. 127 | if(0 == ''){ 128 | alert('looks like they\'re equal'); 129 | } 130 | ``` 131 | 132 | * Don't use function statements for the entire first half of the course. They introduce a slew of subtle new rules to how the language behaves, and without a clear benefit. Once you and all your peers are expert level in the second half, you can start to use the more (needlessly) complicated option if you like. 133 | 134 | ```javascript 135 | // good: 136 | var go = function(){...}; 137 | 138 | // bad: 139 | function stop(){...}; 140 | ``` 141 | 142 | 143 | ### Semicolons 144 | 145 | * Don't forget semicolons at the end of lines 146 | 147 | ```javascript 148 | // good: 149 | alert('hi'); 150 | 151 | // bad: 152 | alert('hi') 153 | ``` 154 | 155 | * Semicolons are not required at the end of statements that include a block--i.e. `if`, `for`, `while`, etc. 156 | 157 | 158 | ```javascript 159 | // good: 160 | if(condition){ 161 | response(); 162 | } 163 | 164 | // bad: 165 | if(condition){ 166 | response(); 167 | }; 168 | ``` 169 | 170 | * Misleadingly, a function may be used at the end of a normal assignment statement, and would require a semicolon (even though it looks rather like the end of some statement block). 171 | 172 | ```javascript 173 | // good: 174 | var greet = function(){ 175 | alert('hi'); 176 | }; 177 | 178 | // bad: 179 | var greet = function(){ 180 | alert('hi'); 181 | } 182 | ``` 183 | 184 | # Supplemental reading 185 | 186 | ### Code density 187 | 188 | * Conserve line quantity by minimizing the number lines you write in. The more concisely your code is written, the more context can be seen in one screen. 189 | * Conserve line length by minimizing the amount of complexity you put on each line. Long lines are difficult to read. Rather than a character count limit, I recommend limiting the amount of complexity you put on a single line. Try to make it easily read in one glance. This goal is in conflict with the line quantity goal, so you must do your best to balance them. 190 | 191 | ### Comments 192 | 193 | * Provide comments any time you are confident it will make reading your code easier. 194 | * Be aware that comments come at some cost. They make a file longer and can drift out of sync with the code they annotate. 195 | * Comment on what code is attempting to do, not how it will achieve it. 196 | * A good comment is often less effective than a good variable name. 197 | 198 | 199 | ### Padding & additional whitespace 200 | 201 | * Generally, we don't care where you put extra spaces, provided they are not distracting. 202 | * You may use it as padding for visual clarity. If you do though, make sure it's balanced on both sides. 203 | 204 | ```javascript 205 | // optional: 206 | alert( "I chose to put visual padding around this string" ); 207 | 208 | // bad: 209 | alert( "I only put visual padding on one side of this string"); 210 | ``` 211 | 212 | * You may use it to align two similar lines, but it is not recommended. This pattern usually leads to unnecessary edits of many lines in your code every time you change a variable name. 213 | 214 | ```javascript 215 | // discouraged: 216 | var firstItem = getFirst (); 217 | var secondItem = getSecond(); 218 | ``` 219 | 220 | * Put `else` and `else if` statements on the same line as the ending curly brace for the preceding `if` block 221 | ```javascript 222 | // good: 223 | if(condition){ 224 | response(); 225 | }else{ 226 | otherResponse(); 227 | } 228 | 229 | // bad: 230 | if(condition){ 231 | response(); 232 | } 233 | else{ 234 | otherResponse(); 235 | } 236 | ``` 237 | 238 | 239 | 240 | ### Working with files 241 | 242 | * Do not end a file with any character other than a newline. 243 | * Don't use the -a or -m flags for `git commit` for the first half of the class, since they conceal what is actually happening (and do slightly different things than most people expect). 244 | 245 | ```shell 246 | # good: 247 | > git add . 248 | > git commit 249 | [save edits to the commit message file using the text editor that opens] 250 | 251 | # bad: 252 | > git commit -a 253 | [save edits to the commit message file using the text editor that opens] 254 | 255 | # bad: 256 | > git add . 257 | > git commit -m "updated algorithm" 258 | ``` 259 | 260 | 261 | ### Opening or closing too many blocks at once 262 | 263 | * The more blocks you open on a single line, the more your reader needs to remember about the context of what they are reading. Try to resolve your blocks early, and refactor. A good rule is to avoid closing more than two blocks on a single line--three in a pinch. 264 | 265 | ```javascript 266 | // avoid: 267 | _.ajax(url, {success: function(){ 268 | // ... 269 | }}); 270 | 271 | // prefer: 272 | _.ajax(url, { 273 | success: function(){ 274 | // ... 275 | } 276 | }); 277 | ``` 278 | 279 | 280 | ### Variable declaration 281 | 282 | * Use a new var statement for each line you declare a variable on. 283 | * Do not break variable declarations onto mutiple lines. 284 | * Use a new line for each variable declaration. 285 | * See http://benalman.com/news/2012/05/multiple-var-statements-javascript/ for more details 286 | 287 | ```javascript 288 | // good: 289 | var ape; 290 | var bat; 291 | 292 | // bad: 293 | var cat, 294 | dog 295 | 296 | // use sparingly: 297 | var eel, fly; 298 | ``` 299 | 300 | ### Capital letters in variable names 301 | 302 | * Some people choose to use capitalization of the first letter in their variable names to indicate that they contain a [class](http://en.wikipedia.org/wiki/Class_(computer_science\)). This capitalized variable might contain a function, a prototype, or some other construct that acts as a representative for the whole class. 303 | * Optionally, some people use a capital letter only on functions that are written to be run with the keyword `new`. 304 | * Do not use all-caps for any variables. Some people use this pattern to indicate an intended "constant" variable, but the language does not offer true constants, only mutable variables. 305 | 306 | 307 | ### Minutia 308 | 309 | * Don't rely on JavaScripts implicit global variables. If you are intending to write to the global scope, export things to `window.*` explicitly instead. 310 | 311 | ```javascript 312 | // good: 313 | var overwriteNumber = function(){ 314 | window.exported = Math.random(); 315 | }; 316 | 317 | // bad: 318 | var overwriteNumber = function(){ 319 | exported = Math.random(); 320 | }; 321 | ``` 322 | 323 | * For lists, put commas at the end of each newline, not at the beginning of each item in a list 324 | 325 | ```javascript 326 | // good: 327 | var animals = [ 328 | 'ape', 329 | 'bat', 330 | 'cat' 331 | ]; 332 | 333 | // bad: 334 | var animals = [ 335 | 'ape' 336 | , 'bat' 337 | , 'cat' 338 | ]; 339 | ``` 340 | 341 | * Avoid use of `switch` statements altogether. They are hard to outdent using the standard whitespace rules above, and are prone to error due to missing `break` statements. See [this article](http://ericleads.com/2012/12/switch-case-considered-harmful/) for more detail. 342 | 343 | * Prefer single quotes around JavaScript strings, rather than double quotes. Having a standard of any sort is preferable to a mix-and-match approach, and single quotes allow for easy embedding of HTML, which prefers double quotes around tag attributes. 344 | 345 | ```javascript 346 | // good: 347 | var dog = 'dog'; 348 | var cat = 'cat'; 349 | 350 | // acceptable: 351 | var dog = "dog"; 352 | var cat = "cat"; 353 | 354 | // bad: 355 | var dog = 'dog'; 356 | var cat = "cat"; 357 | ``` 358 | 359 | 360 | ### HTML 361 | 362 | * Do not use ids for html elements. Use a class instead. 363 | 364 | ```html 365 | 366 | 367 | 368 | 369 | 370 | ``` 371 | 372 | * Do not include a `type=text/javascript"` attribute on script tags 373 | 374 | ```html 375 | 376 | 377 | 378 | 379 | 380 | ``` 381 | --------------------------------------------------------------------------------