5 ms·

Wow! Author here, did not expect this to get submitted to HN yet (was going to finish out a few more levels this weekend and clean everything up). Forgive the g

Wow! Author here, did not expect this to get submitted to HN yet (was going to finish out a few more levels this weekend and clean everything up). Forgive the giant "TODO" in the help dialog The link everyone should see is the demo: http://pcottle.github.com/learnGitBranching/?demo http://pcottle.github.com/learnGitBranching/?demo That shows a few example commands, the completion of a level, and finishes with the help dialog. Some interesting technical highlights - I made heavy use of javascript "Promises" to route control through the entire app. The source code has some nice examples, but it would be callback spaghetti without it - You can import and export trees to share with your friends ("import tree" and "export tree" commands) - You can build levels from within the app with "build level". The intro diaog should step you through the process - It even supports interactive rebasing! Try it out with "git rebase -i HEAD~3" Git is a fairly complex too that can be explained really well graphically. I never understood what I was doing until I saw diagrams in the git manpages and various books around on the internet. I wanted there to be an interactive form of these diagrams but it didn't exist --- so I built it. 9,000 lines of JS later I have this. There's still some polishing to be done, but I'd love for the community to share their knowledge about different git workflows and different ways to explain git concepts. I tried to make the bar for contributing as low as possible. You can build a level and submit a pull request without even cloning the repo!

nwhitehead 14y ago
Very nice! I worked through all the levels you have and everything worked great, it was a lot of fun. Some notes: I "cheated" and used cherry-pick before it was introduced, not sure if that should or should not be allowed. Sometimes I was frustrated because my graph looked like the goal except for "ghosted" nodes, had to go back and figure out a different way to solve the level the right way. I wished I had an "undo" feature to take back moves rather than resetting everything. Lots more hints would be good, this stuff is hard. Honestly I learned more git in the last 10 minutes than I've learned in a year of using git, or from several hours reading git tutorials.
- xxbondsxx 14y ago
  Wow that's great to hear! Seriously, really glad someone found it useful. That's the entire reason I built it. Levels support a "disable-map" that will prevent certain commands from executing. I somewhat foolishly assume that users only learn commands as I introduce them, but I should go back and lock down some of the levels. Also, I'm working on a way to compare trees without the ghosted nodes --- it's a bit tricky, but if anyone loves graph traversal and would love to help, chime in on github!
malandrew 14y ago
Absolutely brilliant work. I would love to see this expand out into a key reference for git beyond just learning branching. One great feature would be to support "learning modules" where anyone making a git tutorial could define their own lesson modules. This would go a long way to help people learn all the cool features of git, which is very daunting.
- xxbondsxx 14y ago
  That's a great idea! Right now I'm totally willing to accept levels with the current functionality, but it would be great (like you said) to be able to cover all the aspects of git. Staging / committing, branching, and eventually origins. I think the next thing on my plate is to implement origins, so you can demonstrate what a fetch / pull / pull --rebase really does
littledot5566 14y ago
Thanks for all the hard work! As a git noob, this is extremely useful to me. Thanks again! By the way, what are some recommended git GUIs for linux?
- ibrahima 14y ago
  Not OP but my feeling is that none of the git GUIs are particularly good or feature complete and I usually end up having to drop to a command line if I want to do anything interesting. That said, I really like `gitg` for its tree view and generally looking relatively nice, but I think functionality wise nothing really matches git gui and gitk, despite how ugly they are. Qgit is also kind of nice.
- ddon 14y ago
  I love SmartGit. It runs on Mac OS X, Windows and Linux. http://www.syntevo.com/smartgithg/index.html http://www.syntevo.com/smartgithg/index.html
  - skrebbel 14y ago
    This. It's the only UI tool that I know that is powerful enough for everyday work, yet simple enough to understand for noobs because it can't do everything that Git can. Sometimes, you'll have to use the shell, still, if you're a power user. Which is fine! Colour me impressed.
plumeria 14y ago
Thanks a lot for this!!! Keep up the good work!
jasonm23 14y ago
Fantastic work, I'd suggest that you provide walkthrough on each the solution, so that it's easy for people very new to git to follow along.
- xxbondsxx 14y ago
  That's a good idea. Right now I just blast the commands and hope you can follow along, but it would be nice to show the thinking behind the solution
ndonnellan 14y ago
So cool! I'm new to git (coming from mercurial) and think this would be awesome as a general purpose tutorial. Unfortunately it seems to assume some knowledge. For example, rebase is introduced in a very understandable way, but then I need to know what "rebase -i HEAD~4" does without being introduced to those concepts.
- xxbondsxx 14y ago
  True true, I was hoping to have a complete tutorial on positioning -- what master^^ does, HEAD~4, all of that. It was on my todo list but (for the millionth time) it got submitted without my knowledge. Open up a github issue and I'll definitely throw something up
  - ndonnellan 14y ago
    Haha, no worries. You did the work, I'm just peanut gallerying.
benihana 14y ago
What's the point of having a close button on a dialog window that doesn't close the dialog?
- deleted 14y ago
  [deleted]
- mbell 14y ago
  I also found this really confusing, just in general the "OSX window" design made me think I could close them, minimize them, move them, etc (which would have been really useful, especially the 'goal' window). The app in general is supremely awesome though, I love it, I hope github hires the author to fully flesh it out and make it part of their tutorial. It is insanely useful for people whom are new to git.
  - xxbondsxx 14y ago
    Ah!! I just realized people were clicking on those silly little buttons I had on the top... I totally added them simply for design flair. For now I'll add a nasty alert that they don't actually work, but eventually it would be cool to bind them to close events...
    - mbell 14y ago
      Just a side note - I think you can monazite this if desired. If you created a way for a company to easily define levels that mimic their typical workflow it would be a great on-boarding tool for new employees, a great interview tool and also a great reference tool for 'i need to do X, how does the company prefer I do X?'. I can definitely see this justifying a subscription fee for a lot of companies. Awesome work! I really wish this had existed when I first learned git.
Mahn 14y ago
This is pretty epic, thanks for making it.
eranation 14y ago
Hi Looks great, looking at the code, I'm trying to wrap my head around how you do your resource loading, the require call doesn't seem like RequireJS, and I found that the require method is defined in the bundle.js file. Are you using http://bundlejs.com http://bundlejs.com?
- xxbondsxx 14y ago
  I'm using browserify[1] -- it's a great system because I can write all my code node-style, write tests that run in pure node, and then wrap all my resources for the browser! Grunt is the actual tool that I use to manage the build (it also handles things like hashing, minifying, etc). [1] https://github.com/substack/node-browserify https://github.com/substack/node-browserify
  - eranation 14y ago
    This is great, thank you
agsamek 14y ago
I got stuck on Level 2 - created a few more branches and I couldn't complete the level. Goal completion check should be more open for additional work done as long as the main goal is completed. Alternatively - some way of level reset should be provided. Anyway - this is great work!
- rexreed 14y ago
  Type "reset" into the terminal command line
gala8y 14y ago
Wow! Author here, did not expect this to get submitted to HN yet (was going to finish out a few more levels this weekend and clean everything up). Forgive the giant "TODO" in the help dialog. Simply enough, http://pineapple.io/ http://pineapple.io/ was disscussed in another thread [0] few hours ago and your link happens to be second on the list at http://pineapple.io/?reset=true http://pineapple.io/?reset=true Now, hurry up. :) [0] http://news.ycombinator.com/item?id=5229185 http://news.ycombinator.com/item?id=5229185
- deleted 14y ago
  [deleted]
- redDragon 14y ago
  OP here. I am so sorry! I saw the link in a reddit post and cross-posted it to HN. I use Google Reader for reddit RSS and found the site awesome enough to warrant a HN post.

nwhitehead 14y ago

Very nice! I worked through all the levels you have and everything worked great, it was a lot of fun. Some notes: I "cheated" and used cherry-pick before it was introduced, not sure if that should or should not be allowed. Sometimes I was frustrated because my graph looked like the goal except for "ghosted" nodes, had to go back and figure out a different way to solve the level the right way. I wished I had an "undo" feature to take back moves rather than resetting everything. Lots more hints would be good, this stuff is hard. Honestly I learned more git in the last 10 minutes than I've learned in a year of using git, or from several hours reading git tutorials.

xxbondsxx 14y ago
Wow that's great to hear! Seriously, really glad someone found it useful. That's the entire reason I built it. Levels support a "disable-map" that will prevent certain commands from executing. I somewhat foolishly assume that users only learn commands as I introduce them, but I should go back and lock down some of the levels. Also, I'm working on a way to compare trees without the ghosted nodes --- it's a bit tricky, but if anyone loves graph traversal and would love to help, chime in on github!

malandrew 14y ago

Absolutely brilliant work. I would love to see this expand out into a key reference for git beyond just learning branching. One great feature would be to support "learning modules" where anyone making a git tutorial could define their own lesson modules. This would go a long way to help people learn all the cool features of git, which is very daunting.

xxbondsxx 14y ago
That's a great idea! Right now I'm totally willing to accept levels with the current functionality, but it would be great (like you said) to be able to cover all the aspects of git. Staging / committing, branching, and eventually origins. I think the next thing on my plate is to implement origins, so you can demonstrate what a fetch / pull / pull --rebase really does

littledot5566 14y ago

Thanks for all the hard work! As a git noob, this is extremely useful to me. Thanks again! By the way, what are some recommended git GUIs for linux?

ibrahima 14y ago
Not OP but my feeling is that none of the git GUIs are particularly good or feature complete and I usually end up having to drop to a command line if I want to do anything interesting. That said, I really like `gitg` for its tree view and generally looking relatively nice, but I think functionality wise nothing really matches git gui and gitk, despite how ugly they are. Qgit is also kind of nice.
ddon 14y ago
I love SmartGit. It runs on Mac OS X, Windows and Linux. http://www.syntevo.com/smartgithg/index.html http://www.syntevo.com/smartgithg/index.html
- skrebbel 14y ago
  This. It's the only UI tool that I know that is powerful enough for everyday work, yet simple enough to understand for noobs because it can't do everything that Git can. Sometimes, you'll have to use the shell, still, if you're a power user. Which is fine! Colour me impressed.

plumeria 14y ago

Thanks a lot for this!!! Keep up the good work!

jasonm23 14y ago

Fantastic work, I'd suggest that you provide walkthrough on each the solution, so that it's easy for people very new to git to follow along.

xxbondsxx 14y ago
That's a good idea. Right now I just blast the commands and hope you can follow along, but it would be nice to show the thinking behind the solution

ndonnellan 14y ago

So cool! I'm new to git (coming from mercurial) and think this would be awesome as a general purpose tutorial. Unfortunately it seems to assume some knowledge. For example, rebase is introduced in a very understandable way, but then I need to know what "rebase -i HEAD~4" does without being introduced to those concepts.

xxbondsxx 14y ago
True true, I was hoping to have a complete tutorial on positioning -- what master^^ does, HEAD~4, all of that. It was on my todo list but (for the millionth time) it got submitted without my knowledge. Open up a github issue and I'll definitely throw something up
- ndonnellan 14y ago
  Haha, no worries. You did the work, I'm just peanut gallerying.

benihana 14y ago

What's the point of having a close button on a dialog window that doesn't close the dialog?

deleted 14y ago
[deleted]
mbell 14y ago
I also found this really confusing, just in general the "OSX window" design made me think I could close them, minimize them, move them, etc (which would have been really useful, especially the 'goal' window). The app in general is supremely awesome though, I love it, I hope github hires the author to fully flesh it out and make it part of their tutorial. It is insanely useful for people whom are new to git.
- xxbondsxx 14y ago
  Ah!! I just realized people were clicking on those silly little buttons I had on the top... I totally added them simply for design flair. For now I'll add a nasty alert that they don't actually work, but eventually it would be cool to bind them to close events...
  - mbell 14y ago
    Just a side note - I think you can monazite this if desired. If you created a way for a company to easily define levels that mimic their typical workflow it would be a great on-boarding tool for new employees, a great interview tool and also a great reference tool for 'i need to do X, how does the company prefer I do X?'. I can definitely see this justifying a subscription fee for a lot of companies. Awesome work! I really wish this had existed when I first learned git.

Mahn 14y ago

This is pretty epic, thanks for making it.

eranation 14y ago

Hi Looks great, looking at the code, I'm trying to wrap my head around how you do your resource loading, the require call doesn't seem like RequireJS, and I found that the require method is defined in the bundle.js file. Are you using http://bundlejs.com http://bundlejs.com?

xxbondsxx 14y ago
I'm using browserify[1] -- it's a great system because I can write all my code node-style, write tests that run in pure node, and then wrap all my resources for the browser! Grunt is the actual tool that I use to manage the build (it also handles things like hashing, minifying, etc). [1] https://github.com/substack/node-browserify https://github.com/substack/node-browserify
- eranation 14y ago
  This is great, thank you

agsamek 14y ago

I got stuck on Level 2 - created a few more branches and I couldn't complete the level. Goal completion check should be more open for additional work done as long as the main goal is completed. Alternatively - some way of level reset should be provided. Anyway - this is great work!

rexreed 14y ago
Type "reset" into the terminal command line

gala8y 14y ago

Wow! Author here, did not expect this to get submitted to HN yet (was going to finish out a few more levels this weekend and clean everything up). Forgive the giant "TODO" in the help dialog. Simply enough, http://pineapple.io/ http://pineapple.io/ was disscussed in another thread [0] few hours ago and your link happens to be second on the list at http://pineapple.io/?reset=true http://pineapple.io/?reset=true Now, hurry up. :) [0] http://news.ycombinator.com/item?id=5229185 http://news.ycombinator.com/item?id=5229185

deleted 14y ago
[deleted]
redDragon 14y ago
OP here. I am so sorry! I saw the link in a reddit post and cross-posted it to HN. I use Google Reader for reddit RSS and found the site awesome enough to warrant a HN post.