Should help node.js newbies like myself...

Also, it would be helpful to describe how to enter sandbox mode, as this is very useful for git lectures...

Git stores snapshots, not deltas. If a file has changed twice, there will be two copies of it in the repository.

However, Git does re-use files that haven't changed between commits, keeping repositories small.

With this in mind, your intro is lying to people.

When completing a level the dialog shows a space in the quoted level name.

I've worked through the tutorials a little, as far as the rebase one. I'm entirely new to git having only used it previously to download an entire codebase (or two) and most recently - 2 weeks ago - started using it via a Netbeans plugin.

The problem I'm having is understanding what the processes are doing to the code that one is trying to version - the tutorial appears to miss out the fact that one is operating on a codebase and the point is to provide versioning on that codebase (I assume).

For example in the first lesson one performs 2 commits, OK. But what happens when one does that and why would one perform a commit. Presumably the reason to commit is to record a new "checkpoint" for the code that one can go back to or share? So there's a step of changing the code between the 2 commits isn't there? IMO you need some way to show that there is an intermediate step of writing code.

Then when branching I guess that you get multiple versions of a file and these get merged somehow to produce a master version in the master branch, but none of this detail of the files is shown.

Apologies if this is all wrong thinking, like I say I'm a newb on git but this is the part of the tutorials that seems most lacking to me. They definitely have some value for me but as I'm mainly trying to understand git WRT code versions it is lacking, as I've said.

Thanks.

Window appears ultra-wide, blue area not visible.

Works on Chrome.

When either a branch name or a command is misspelt, it contributes towards the total. This is quite annoying because the message about whittling down the number of commands still shows up despite the number of valid commands entered being on par with the solution.

Kudos for the great app !

I'd like to translate it to French. Could you tell me how you'd like me to do it ? (markdowns could be a map of intl_id → vectors with current vector strings for "en_US", but what about the rest of the app ?)

Cheers,

B.

I tried,but i failed.

I was just pointed to this awesome project by a friend. Sadly, it does not work in Opera (12.14.1738/x64).

More specifically, it does not come up with the introductory windows that one gets in other browsers. No clues as to the cause - it just seems to hang on the "help" command.
It was subsequently a bit annoying to discover that Firefox doesn't work either, nor does IE.

Thank you for the anticipated resolution.

When the prompt is empty the $ sign is misplaced.
Also the Insert-Marker is placed at the wrong char.

For example, I'd expect git reset --hard c1 to push me back to c1. git rebase c1 to rebase against c1 and git merge c1 to do just that.

Windows 7, Chrome 24.0.1312.57 m

To reproduce:

• build level
• define name

This just hangs without displaying a dialog -- the green up/down arrow is displayed beside the command. Further commands do nothing. "Uncaught Error: woah we dont support that method yet" is display in console after typing define name.

Trace:

Uncaught Error: woah we dont support that method yet bundle.min.16cb085d.js:1
v.extend.processLevelBuilderCommand bundle.min.16cb085d.js:1
a.trigger bundle.min.16cb085d.js:1
f.Model.extend.processCommand bundle.min.16cb085d.js:1
f.Model.extend.popAndProcess bundle.min.16cb085d.js:1
f.Model.extend.sipFromBuffer bundle.min.16cb085d.js:1
(anonymous function) bundle.min.16cb085d.js:1

intro5
type the following:
git reset HEAD~1
git checkout pushed
git revert (fails with error)
git revert HEAD

But in the "end screen" you'll get the message that you used 4 commands "You solved the level in 4 command(s); our solution uses 3."

What is interesting that if you use incorrect command name like "git checkout11 pushed" it fails with error but isn't counted.

Hi, awesome project! I'd like to add some more shortcuts but I can't seem to build the project. I ran npm install and then npm install grunt -g but I'm getting this error when trying to build:

[lkysow@Lukes-Macbook learnGitBranching (master)]$ grunt build
Loading "shell.js" tasks and helpers...ERROR
>> TypeError: Cannot read property '_' of undefined
<WARN> Task "shell" not found. Use --force to continue. </WARN>

Aborted due to warnings.

And when run with --force:

lkysow@Lukes-Macbook learnGitBranching (master)]$ grunt  build --force
Loading "shell.js" tasks and helpers...ERROR
>> TypeError: Cannot read property '_' of undefined
<WARN> Task "shell" not found. Used --force, continuing. </WARN>

Done, but with warnings.

If you think the issue I'm seeing is something peculiar to my environment then no worries, I'll continue trying to debug it myself.

Is possible to translate learnGitBranching into other language? Because some beginner may not good at English.

Thanks for your great job!

The windows buttons are positioned vertically (did you forget to add float:left and set their width properly?)

The first console window rarely loads its contents.

I also see this in the console:
SCRIPT438: Object doesn't support property or method 'getEvents'
bundle.min.16cb085d.js, line 1 character 249445

P.S. Debugging half-meg of minified JS is totally cool.

There should be a command bar at the bottom that includes basic helper commands -- undo, help, reset, and maybe the demo!

Executing just 'show' gives the error:
The command "show" isn't supported, sorry!

I was expecting help to see the available show commands (like 'show solution'). To take this even further, an overview of the available commands would be useful (help doesn't help here ;) ). Nice catch on 'ls' btw!

You should totally gamify gitGraph and submit it to the game off.

https://github.com/blog/1303-github-game-off

Version of Safari is Version 6.0.2 (8536.26.17). Need to test this in other browsers to see if it's just a Safari issue

If you make an error or typo on level-2 branching and still complete the proper steps the goal does not complete, you must start over from scratch by re-refreshing the browser.

Reproduce.

git branch bugfix git branch bugFix git checkout bugFix

This correctly branches from C0:
git checkout -b test C0

This always branches from HEAD:
git checkout C0 -b test

There is a big problem with the CSS in Firefox 19.0 (Mac)

As you can see in the screenshot everything is mixed up.

I am not that good of an CSS Developer, otherwise I would help.

I noticed a couple of typos as I was going through the levels. I'll post a pull request with the details.
Thanks for the cool tutorial.

Hello, I have a problem with using cherry-pick (ignore if my solution is wrong), but when I do cherry-pick in this level, it "freezes", not sure if it's a problem with chrome tho.

Google Chrome: Version 25.0.1364.97 m

As you can see from the image, the second command does not run due to the cherry-pick being stuck

Console:

Should be empty:
Array[1]
0: TypeError
message: "Cannot call method 'highlightTo' of undefined"
stack: "TypeError: Cannot call method 'highlightTo' of undefined↵From previous event:↵"
proto: Error
length: 1
proto: Array[0]
bundle.min.eac15d86.js:1
Uncaught TypeError: Cannot call method 'highlightTo' of undefined bundle.min.eac15d86.js:1

Just typing

git reset another

in the master branch wil instantly 'solve' the problem, without getting the same tree as the target.

This doesn't seem to be a valid solution.

People first get to this page doesn't know there is a locale for him.

Part of the help text for the level intro 5 is "With resetting, you can push out your changes to share with others."

Shouldn't that be "With reverting, you can push out your changes to share with others."?

In the level where you introduce reset and revert there really isn't any explanation for why we type HEAD or HEAD~1. This doesn't really help a user learn what those mean and why that is the command one needs to use.

This 3-command sequence achieves the desired outcome

git rebase newImage master # checkout and fast-forward master
git commit --amend
git cherry-pick caption

This 4-command sequence also achieves the same thing

git checkout master
git reset --hard newImage
git commit --amend
git cherry-pick caption

Neither of the above are recognized. The expected solution seems to be

git checkout master
git cherry-pick newImage # identical except for the date
git commit --amend
git cherry-pick caption

although this also works

git rebase newImage master
git commit --amend
git commit --amend  # yes, twice
git cherry-pick caption

I tried to delete my branch bugfix

$git branch -D bugfix

but after pressing enter, I got following message at terminal ( extra space between bugfix with error message)

$git branch -D bug fix unknown ref bug

This is a very nice tutorial. Any plans for doing one for git-flow?

"git help" totally breaks it.

also main.css:592 says: right; -5px; instead of right: -5px;

When using the site on smaller screen resolutions (in this case 1366x768) modal windows (such as the first Alert dialog - pictured below) cannot be dismissed as the button at the bottom of the dialog is not visible, and browser scroll bars do not work (in this case for Google Chrome 24.0.1312.57), and the red Mac OS X style button in the top left of the dialog does not work either.

The ability to either dimiss the modal window using the red button, or use the browser scroll bars should be enabled when such a window appears.

The level "Branch Spaghetti" has a solution that uses interactive rebase, a mode not discussed in the lessons up to that point. A newcomer to git will be absolutely unable to solve that level. (And even experienced git users will be unable to solve it... interactive rebase is just not used very often.)

Atleast put the link to http://pcottle.github.com/learnGitBranching/ into the README and the github description.

"That's because this new commit C1' introduces changes -- it just happens to introduce changes that exactly reverses the commit of C1."

Should be C2' and C2.

First off, nice project! Very fun to play around with.

I was able to create some minor problems in Chrome with the introduction to intro5. Others levels may be susceptible to the same issue. The issue is going back and forward, causing the the graphs to no longer line up with the descriptions:

1.) Click "git reset head~1"
2.) Click next
3.) Click back

both the reset and revert panels are all missing a commit, and no longer line up with the commits mentioned in the text.

commands with multiple spaces between them and git (e.g. git commit) don’t get recognized and fail. normalizing spaces would surely help.

See HN comments

Sometimes you want to try different stuff and simply undo the last command and try another one, it would be great if there was at least an undo button, and preferably an undo stack!

I just discovered the "undo" command, but it does not reset the command-count but restarts the level.

There should be a way to restart a level (without showing the level-hint) from the commandline and resetting the counter.

EDIT: Ooops seems to be my mistake. Now it did.
But the desire for a "full reset/undo" is still there.

In the "Branch Spaghetti" level, I should be able to say:

git checkout one
git cherry-pick c4 c3 c2

This syntax works in real git, but does not work here.

Page with "git revert HEAD".
After click the "git revert HEAD" button on the image we are look C2'( C1' needed )

But anyway: Great tool! Will it share with my colleague who isn't so Git aware.

Windows 7 - Chrome Windows 7, Chrome 24.0.1312.57 m

To reproduce:

• build level
• edit dialog
• Add a ModalAlert with anything, click confirm.
• Click 'Test' on the newly created view. Nothing happens, error in console
• Click 'Test Entire View'. Nothing happens, error in console

Both 'Test' buttons yield "Uncaught TypeError: undefined is not a function" in error console

The level intro dialog says: So this means that our final tree should show C2, C3, C4', C5', etc all in order., however the goal image shows C3, C2', C4':

It would be great to have a "documentation" feature that would give a brief overview of the results of each command (eg. a popup window with trees that shows what git rebase master bug_fix would do) or git help rebase could show a little window with the illustration.

I'm currently running Version 26.0.1404.0 (180391) of Chromium. In the command window, after you have entered enough commands a scroll bar will appear. I am unable to interact with the scroll bar and the mouse scroll wheel doesn't scroll the window either.