Apr 04

Get a visual snapshot of a repo or a person on github

My Hack Reactor group project is finally online! It’s an app for visualizing the activity related to a user or a repo on Github.

Do you contribute by day or night?

Screen Shot 2013-04-04 at 上午9.26.51

What’s the break-down of your Github activity?

Screen Shot 2013-04-04 at 上午9.28.16

Where do open source contributions come from?

Screen Shot 2013-04-04 at 上午9.31.17

Our tech stack

We used Node.js and Express for our server, pulled data from the Github API and stored it in a Mongo database, used Angular.js as our front-end framework and did the data visualization with D3.

Our group

There were three of us on the project — John, Gavin and myself. I kicked off the backend server and database set-up, after which John did the virtually all the backend work. Gavin did most of the Angular and layout, and started the D3 portion of the work, which I finished. We were the only group of three and we actually lost two days to a false start on a different project before pivoting to this one, but I’m pretty satisfied with how it turned out. All in all, we made pretty good progress considering the depth of the tech stack the the limited time.

Try it out!

We’ve put Gitvis online. Give it a try!

Posted in Uncategorized | Tagged , , , , , | Leave a comment
Apr 02

How I became an open source contributor in four easy steps

How did I become an open source contributor? I did a few small projects for language learners and released them under a CC license in a my previous life, but that’s not what this piece is about. This is about contributing to an open source project that matters and doing so in a technical capacity.

Step 1: Inspiration

At Hack Reactor Marcus often invites guest speakers to come over and teach us in the evenings. On one occasion it was Jeff Dickey, a senior engineer who had hired a lot of junior devs while working at TapJoy. His talk was fantastic, covering topics from how interviewing to positioning to helping create a better on-boarding environment after being hired. One thing he told us that made an impression on me was just how much hiring managers cared about github profiles. Having just come back from east Asia, this was something I’d only recently fully realized. He showed us his first contribution to a high profile — a simple CSS fix that any of us could have done!

Obviously, he couldn’t claim to be a large contributor off the basis of this one simple fix, but he did get a considerable boost from having it on his profile. If nothing else it was clear that he was engaged and working with the code.

Step 2: Mentoring a new student

A few weeks later, I was pairing with a newer student at Hack Reactor, going over his reimplementation of Underscore.js. He had already completed a CS major before coming to SF, so his code was a bit better than mine had been that early in the course. But I did see one pretty big error– his implementation of reduce set its memo to zero if the argument weren’t provided instead of starting on the first two elements. Here is how his implementation of _.reduce behaved:

Step 3: Serendipity

My mentee was a bit surprised to hear this was a problems since all his tests were passing. It turns out that our tests had come from the actual Underscore test suite and not a single test in the suite used multiplication in its anonymous function. Our instructor said essentially the same thing Jeff Dickey did. “Be bold, fix it and make the pull request!”.

Step 4: Touching octocat tentacles with the jashkanas



Conclusion: There’s no down-side to helping out!

Here were my main take-aways:

  1. It’s easy to contribute on git hub! You just have to fork a repo, download it, make your changes, commit and push them back up and then do a pull request. It sounds like a lot but it’s really not as difficult as I had imagined.
  2. Contributing tests is especially easy. There’s no chance of stepping on others’ toes as there would be with new feature proposals. You’re just strengthening what the original author envisioned.
Posted in Uncategorized | Tagged , , , , | Leave a comment
Mar 24

Hack Reactor Diaries #5 (weeks 7-8)

The first Hack Reactor class has graduated started working, a new cohort has arrived and my class is now the senior class. The new students are awesome! Considering how selective Hack Reactor is, I can’t say I’m surprised, but it has been great to meet them all.

My personal project went down to the wire since I kept changing directions, but it’s been great. I learned how to make a scheme interpreter and then changed directions, making a domain specific language for my robot game. I also had the chance to present it at a meetup and the reception was great! The only mild downer is that my time at Hack Reactor is now 2/3 finished and there are so many opportunities but so little time.

Posted in Uncategorized | Tagged , , , | Leave a comment
Mar 15

Talk notes: Sublime, VI and command line orientation

These are the notes from my presentation for the new class at Hack Reactor.  I know the time constraints make it tough to answer everything, so feel free to ask here.

Choose your own talk

  • How to exit or save & exit VIM
  • How to enable/disable VIM mode in Sublime
  • Sublime short-cuts in general
  • Multi-select
  • Strip out HTML
  • How to learn in general
  • Build JS from Sublime


VI Crash course

Why it’s worth it to learn at least the basics

  • VI is the default editor on most unix machines.
  • It’s available for almost anything.
  • It’s keyboard-only and great for cramped spaces.
  • It’s very fast for proficient users.
  • If you don’t, it will be completely baffling when it pops up for a git commit

There are two modes: edit mode and command mode

  1. Edit mode is like a “normal” editor.
    • What you type appears.
    • Press esc to enter command mode
  2. Command mode is where the magic (or frustration happens)
    • Commands let you do complex things more quickly
    • Just a few commands are enough to get around
    • With more commands comes more power
    • You can repeat any command by entering a number first
    • Regex can be used in VI
    • There are several commands to return to edit mode (a, i, p, o, etc…)

Basic VI commands

Use your right hand for basic movement:

  • h – left
  • j – down
  • k – up
  • l – right

Other movement:

  • w – go to the the next word
  • b – go back a word
  • ^ – go the the beginning of a line
  • $ – go the the end of the line
  • /foo – searches for foo
  • n – goes to the next instance of whatever you just searched for
  • N – goes to the previous instance of whatever you searched for

Cutting, pasting and copying:

  • dd – delete the current line
  • yy – yank the current line into memory without deleting it
  • dw – delete from the cursor to the current word
  • db – delete from the cursor back to the beginning of the word
  • y$ – yank everything from the cursor to the end of the line
  • p – paste whatever you last yanked or deleted

Don’t forget about using numbers!

  • 7k – up 7 lines
  • 15j – down 15 lines
  • 2p – paste two copies of whatever you last deleted or yanked
  • 4w – forward 4 words
  • 5dd – delete 5 lines
  • 3yyp – make 3 copies of the current line

Switching into insert move

  • i – go into insert mode right before the cursor
  • a – go into insert mode right after the cursor, AKA append
  • oopen up a new line below the cursor and go into insert mode
  • Oopen up a new line above the cursor and go into insert mode

I lied to you all

VI actually has a third mode

  • Hit esc:, or just : from command mode, to open the command line
  • :w writes, or saves the current file
  • :q quits and closes the file
  • :q! quits and closes the file even if you haven’t saved yet
  • :35 goes to line number 35
  • :$ goes to the last line in the file
  • :/\d3/ regex match 3 digits to use in subsequet finds
  • :s/\d*px/10px/ change some number +px on the current line into 10px
  • :4 s/cat/dog/g change all copies of the word ‘cat’ on line 4 to ‘dog’
  • :1,$ s/.*padding.*$//g delete every line with the word ‘padding’


Sublime Shorcuts

  • cmd + shift + f to do a global find accross all files
  • cmd or fn + left/right to go to the beginning or end of a line
  • option + left/right to go forward or back a word
  • cmd + click to add another cursor for multi-edit
  • cmd + d to highlight copies of the curently selected word for multi-edit
  • cmd + shift + d to duplicate the current line
  • cmd + ctrl + up/down to move the current line up or down
  • cmd + j to concatenate the next line onto the current one

The Sublime Command Palette

  • cmd + shift + p to open the command palette
  • You can install, uninstall, enable and disable packages from here

Packages I like:

  • sublime-better-coffescript adds coffeescript highlighting compilation and more
  • Vintage and VintageEx – add VI support into Sublime, but no regex support.
  • SublimeLinter draws attention to syntax problems
  • TrailingSpaces lets you eliminate all the trailing spaces in a file by hitting ctrl + s.

Adding a JS build-system to Sublime

  • Open the Tools>Build System menu and select “new build system”
  • Name it Node, and a new file called node.sublime-build will be created.
  • Add the following data to it and save:

  • Restart Sublime
  • Select Node as the build system for your file and hit cmd + b to build from Sublime!

Common command-line tasks

  • cp -r source destination: copies the source directory and all its children to the target destination
  • rm -rf dirToDestroy: removes the directory and all its sub directories
  • ls -la: lists all files including hidden ones and shows them in long form
  • history: list the history of recently executed commants
  • !871: re-run the 871st command in the history
  • cat somefile prints out a file
  • cat somefile | grep someword prints out lines of somefile that include someword

Reference links:

Huge bag of VI tricks: http://rayninfo.co.uk/vimtips.html

Posted in Uncategorized | Tagged , , | Leave a comment
Mar 15

Adding a JS build-system to Sublime

Frustratingly, the Sublime Text editor doesn’t set up a build system for JavaScript the way it does for Ruby and some other languages. Fortunately, it’s an easy problem to fix. Assuming your JS interpreter is Node.js, these are the steps to set it up:

  • Open the Tools>Build System menu and select “new build system”
  • Name it Node, and a new file called node.sublime-build will be created.
  • Add the following data to it and save:
    • Restart Sublime
    • Select Node as the build system for your file and hit cmd + b to build from Sublime!

    Here’s an example JS file to run:

    Video walkthrough:

    For more Sublime goodies, see:
    Notes from my talk at Hack Reactor
    Strip trailing whitespace every time you save a file in Sublime Text

Posted in Uncategorized | Tagged , | 17 Comments
Mar 07

A parser generator for JavaScript

I’ve been getting more and more interested in programming languages ever since I did a prototype of that programmable robot game a couple of weeks ago.

My goal at the time was to solidify what I had learned of Backbone.js and to get some more practice with CoffeeScript. It was a really intense, two-day sprint and I had a great time! At the end, I was at a bit of a dead-end without learning more about how to make an interpreter. Instead of continuing the work on the game, I’ve returned to a great set of online tutorials for learning about programming languages, and in the process encountered a neat library– PEG.js.

It’s for creating parsers. It can be included in a webpage, it can be installed as a node package (npm install pegjs), and it’s got a great online parser tester!

I’ve started making a PEG for Scheme, with the goal of making a full blown scheme interpreter that will run from inside a blog post. If I can do that, then making a simple language for the robot game should be easy :)

Posted in Uncategorized | Tagged , , , | Leave a comment
Mar 04

Hack Reactor Diaries #4 (week 6)

I’m at the half-way point of my intense JavaScript program. In week six we did some more work with the sequelize ORM and used meteor to make a basic clone of Stack Overflow. On the first day of break I went to Heroku’s Waza conference and it was great. I got the T-shirt I’m wearing in the video and a prototype of one of the speakers’ table-top games! Some people gave me good feedback on RoboDuel (demoed in the previous video). I’ve got three topics I’m considering for my personal project to work on during this break. As usual, feedback is welcome!

Posted in Uncategorized | Tagged , , , , | Leave a comment
Feb 27

Plans for the next nine days

Tomorrow is my last day of class at Hack Reactor before the break starts. I’m absolutely exhausted. There are so many things to do and so many things to learn, that I’ve decided to list them:

  • Contribute to an open source project
  • If I can get some time with our instructor, get started working on his project, bound.js
  • Do some contract work for a friend of a friend who recently got in touch with me
  • Improve my RoboDuel game
  • Work through more of the programming language design course at Nathan’s University
  • Clean up a couple of things on Toshuo
  • Meet up with a couple of cool people I’ve recently met at meetups

I’m especially looking forward to that last one.

Posted in Uncategorized | Tagged , , | Leave a comment
Feb 22

Hack Reactor Diaries #3 – RoboDuel with Backbone and CoffeeScript

This week we had a two day make-up cycle in which we could work on whatever we wanted. I used it to make a prototype of a programmable robot fighting game! In the course of doing so, I got to do some more work with Backbone.js and CoffeeScript. It was a lot of fun, too! I plan to work on it some more when I have a chance and I’d love your feedback on it. Gameplay starts 4m20s into the video.

Posted in Uncategorized | Tagged , , , , , , | 1 Comment
Feb 22

Hack Reactor Diaries #2

This is an archive of some of my thoughts after completing the first two weeks of Hack Reactor. When I filmed it, I wasn’t sure if I’d ever share it or not, but I’ve decided to go the open route. Warning: it’s not edited and it’s full of uhms and pauses.

Posted in Uncategorized | Tagged , , , , | Leave a comment