[xxbondsxx]

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

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]

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]

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]

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]

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

[gala8y]

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/ 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

Now, hurry up. :)

[0] http://news.ycombinator.com/item?id=5229185

[redDragon]

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.

[ndonnellan]

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]

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]

Haha, no worries. You did the work, I'm just peanut gallerying.

[eranation]

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?

[xxbondsxx]

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

[eranation]

This is great, thank you

[jasonm23]

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]

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

[littledot5566]

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]

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]

I love SmartGit. It runs on Mac OS X, Windows and Linux.

http://www.syntevo.com/smartgithg/index.html

[skrebbel]

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.

[Mahn]

This is pretty epic, thanks for making it.

[agsamek]

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]

Type "reset" into the terminal command line

[plumeria]

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

[benihana]

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

[mbell]

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]

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]

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.