An interactive git visualization and tutorial. Aspiring students of git can use this app to educate and challenge themselves towards mastery of git!

Overview

LearnGitBranching

Build Status PRs Welcome

LearnGitBranching is a git repository visualizer, sandbox, and a series of educational tutorials and challenges. Its primary purpose is to help developers understand git through the power of visualization (something that's absent when working on the command line). This is achieved through a game with different levels to get acquainted with the different git commands.

You can input a variety of commands into LearnGitBranching (LGB) -- as commands are processed, the nearby commit tree will dynamically update to reflect the effects of each command:

demo-gif

This visualization combined with tutorials and "levels" can help both beginners and intermediate developers polish their version control skills. A quick demo is available here: https://pcottle.github.io/learnGitBranching/?demo

Or, you can launch the application normally here: https://pcottle.github.io/learnGitBranching/

Sandbox Mode

By default the application launches in "sandbox mode" with a basic repository already created. Here you can enter commands and mess around with a repository as much as you like. Keep in mind you can

  • undo to undo the effects of the last command
  • reset to start over with a clean slate (works in levels too)
  • git clone to simulate remote repositories!

Sandbox mode can be great for demonstrating something to a friend, but the real learning is with levels...

Levels

Type levels to see the available lessons / challenges (and which ones you have solved so far). Each level series aims to teach some high-level git concept, and each tab of levels separates major worlds of info (like remote repositories versus local).

For some added fun, there is a "git golf" concept where we keep track of how many commands you use to solve each level. See if you can match all of our records!

Sharing permalinks

You can share a link to LearnGitBranching with an arbitrary set of commands that will execute upon load by using the command URL parameter. You will also likely want to disable the intro dialog for this case with the NODEMO url param; here is an example to get started.

Level Builder

You can build levels with build level. The dialog will walk you through the process, and at the end you can export level to get a JSON blob. Paste that in a gist or directly into an issue and I can check it out / merge in your changes! You can also share this level directly with friends by having them run "import level" or simply specify a gist ID in the url params like so: https://pcottle.github.io/learnGitBranching/?gist_level_id=a84407351f9c9f0cb241

Reporting Bugs / Opening Issues

When reporting bugs, try running the command debug_copyTree() in your JS console when in a state just before reproducing a bug. This can avoid having to copy all the commands you used to get into a specific state. (I can then use the importTreeNow command to get to that exact state)

How the app works / Contributing functionality

LearnGitBranching is a pretty simple application (from a technical perspective). There's no backend database or any AJAX requests -- it's a 100% clientside application written in JavaScript. The production version (on github.io) literally just serves up an HTML page with some JS and CSS. The rest of the magic lies in the 9k+ lines of JavaScript :P

Because the app contains a lot of code, I have written everything into Nodejs-style modules. The modules are packaged together with the Browserify and then sent down in a format the browser can understand.

As of December 2013, I've migrated the build process to use Grunt >0.4, since the older version was giving a lot of people build headaches. It should be fairly rock solid now!

Here is the high-level process of the build:

  • The code is written into the node.js modules which require other modules
  • CSS is written into just one stylesheet (there is not a whole ton of styling)
  • New HTML is written into a template HTML file (template.index.html). Only needed for new views
  • The app is "built", which outputs:
    • index.html in the root directory
    • CSS and JS files in ./build directory
  • If the app is being built for production, then these CSS and JS files are hashed (to bust caches) and tests are run
  • That's it!

Thus, if you build the app locally, all you have to do in order to run the app is just open up index.html in the root directory of the repo. Pretty simple

Building yourself / Contributing Functionality

For contributing core functionality in the app, you'll probably want to test your changes at least once before submitting a pull request. That means you'll need the "gulp.js" build tool to build the app:

https://gulpjs.com/docs/en/getting-started/quick-start

You'll also need yarn to download all the dependencies of the project.

The general workflow / steps are below:

git clone <your fork of the repo>
cd learnGitBranching
yarn install

git checkout -b newAwesomeFeature
vim ./src/js/git/index.js # some changes
yarn gulp fastBuild # skips tests and linting, faster build

# after building you can open up your browser to the index.html
# file generated and see your changes

vim ./src/js/git/index.js # more changes
yarn gulp build # runs tests and lint

git commit -am "My new sweet feature!"
git push
# go online and request a pull

Alternatively, you can also build and run the app in a pre-configured online workspace:

Open in Gitpod

Helpful Folks

A big shoutout to these brave souls for extensively testing our sandbox and finding bugs and/or inconsistencies:

  • Nikita Kouevda
  • Maksim Ioffe
  • Dan Miller

And the following heroes for assisting in translating:

  • Jake Chen
  • 우리깃 ("urigit")
  • "bcho"
  • "scientific-coder"
  • "ace-coder"
  • Joël Thieffry
  • Jens Bremmekamp ("nem75")
  • "hilojack"
  • Ming-Hsuan-Tu ("twmht")
  • Mikhail Usov ("mikhailusov")
  • Matias Garcia Isaia ("mgarciaisaia")
  • Marc-Olivier Arsenault ("marcolivierarsenault")
  • Eroany H Leader ("lhyqy5")
  • Honorat ("ahonorat")
  • Vasil Kulakov ("coyl") & Lyubov Agadjanyan ("shayenblue")
  • Aliaksei Berkau ("alexeiberkov")
  • Mizunashi Mana ("mizunashi-mana")
  • YourSenseiCreeper
  • Olsza

Also huge shoutout for everyone who has put up a pull request that was pulled! Check out the 30+ contributors we have in the Contributors View

And everyone who has reported an issue that was successfully closed!

Comments
  • Unable to get past

    Unable to get past "hide goal" phase at the very first tutorial

    Hello,

    I was unable to do anything after the "Goal To Reach" window pops up. When I click any of the window buttons of the goal window, nothing happened. Then I tried to write down hide goal on the console; no luck either.

    This error comes up on the browser console: this.goalVis is undefined

    I tried this on an Ubuntu Linux, Firefox, Brave and Chrome's latest browsers. I saw the issue on every one of them

    Thanks!

    opened by ilgaz 22
  • Internationalization

    Internationalization

    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.

    opened by scientific-coder 18
  • Make it possible to keep the goal window visible (and maybe movable, minimizable, and restorable)

    Make it possible to keep the goal window visible (and maybe movable, minimizable, and restorable)

    First of all, really nice job on this - this is a great way to learn and become better at git. If I wanted to show someone how to learn git, this is exactly where I would send them.

    My biggest gripe right now is the amount of effort that's required to bring up the "Goal to Reach" window, as well as the fact that there's no way to keep it open while you're working on the level. At the very least, I wish there was an easy, discoverable way to bring it up with a single click.

    But ideally, I'd love to see the UI more functional as a whole. You have these containers styled as OS X windows, but they're aren't movable or resizable at the moment. If they were, that would be a great way to achieve this - you could have a menu bar at the bottom where you could minimize or restore all these windows as needed. If we go this route, then this issue is basically just a duplicate of #85.

    Otherwise, just going the simpler route, I would recommend that the goal window should be on the right side (so it doesn't cover up the terminal window), and when it's closed, it doesn't completely disappear out of view, but simply collapses into the sidebar - perhaps similarly to how the sidebar on http://colourco.de/ works (though maybe use click instead of hover to bring it back). Clicking on the sidebar can basically just trigger the "show goals" or "hide goals" command.

    I'd be willing to try to pitch in if you like either of the ideas above.

    opened by lukas-shawford 17
  • Time to switch to switch?

    Time to switch to switch?

    Thanks for this great tool that I use to teach git at Paris-Dauphine University.

    This request is related to #750. git 2.23 was released two and half years ago. May I suggest that it’s about time to switch the lessons to talk about git switch (and git restore where appropriate) instead of git checkout? I think that this would ease learning.

    opened by oliviercailloux 15
  • Drag and drop for git interactive rebase doesn't work

    Drag and drop for git interactive rebase doesn't work

    Hi, When trying to change the order of commits when doing for example git rebase -i HEAD~4 (as in level Moving Work Around:2) nothing happens. Tried this in different browsers (chrome, firefox, Internet explorer) on linux and windows pcs. And thanks for this wonderful site btw

    opened by zahitz 15
  • Enable use of slash (/) and dash (-) in branch names

    Enable use of slash (/) and dash (-) in branch names

    Many projects have branch naming conventions that look something like jed/topic-name. I'm making workflow-specific levels for one such project and would like to be able to use the actual naming conventions. Is there a reason why such names are not allowed presently?

    opened by jedbrown 14
  • Honor browser's locale when able

    Honor browser's locale when able

    The application always start in English. The user has to close the demo window, close the level selector, figure out that little circle is an Earth icon, understand it is a locale selector, pick his language, and just then starts understanding what he's being told.

    It would be superb to default the language to the browser's preferred languages setting as much as it's possible.

    opened by mgarciaisaia 13
  • grunt build task failed

    grunt build task failed

    hi,

    I clone the project and run the command grunt build to build the html files.

    It gave me the following errors

    ....
    Running "jasmine_node" task
    
    /home/mht/learnGitBranching/node_modules/grunt/lib/util/task.js:352
              throw e;
                    ^
    TypeError: Cannot read property '1' of null
        at Object.<anonymous> (/home/mht/learnGitBranching/node_modules/jasmine-node/lib/jasmine-node/index.js:24:57)
        at Module._compile (module.js:456:26)
        at Object.Module._extensions..js (module.js:474:10)
        at Module.load (/home/mht/learnGitBranching/node_modules/grunt-browserify/node_modules/browserify/node_modules/coffee-script/lib/coffee-script/coffee-script.js:211:36)
        at Function.Module._load (module.js:312:12)
        at Module.require (module.js:364:17)
        at require (module.js:380:17)
    at Object.<anonymous> (/home/mht/learnGitBranching/node_modules/grunt-jasmine-node/tasks/jasmine-node-task.js:5:21)
        at Object.thisTask.fn (/home/mht/learnGitBranching/node_modules/grunt/lib/grunt/task.js:58:16)
        at Task.<anonymous> (/home/mht/learnGitBranching/node_modules/grunt/lib/util/task.js:343:36)
        at Task.<anonymous> (/home/mht/learnGitBranching/node_modules/grunt/lib/util/task.js:319:9)
        at /home/mht/learnGitBranching/node_modules/grunt-shell/tasks/shell.js:47:4
        at ChildProcess.exithandler (child_process.js:635:7)
        at ChildProcess.EventEmitter.emit (events.js:98:17)
        at maybeClose (child_process.js:735:16)
        at Socket.<anonymous> (child_process.js:948:11)
        at Socket.EventEmitter.emit (events.js:95:17)
        at Pipe.close (net.js:466:12)
    

    I have installed grunt-cli (from grunt tool).

    I am not sure whether or not the version of grunt triggers the errors.

    Thank you!

    opened by twmht 13
  • Unable to enter commands in console on both Chome and Edge

    Unable to enter commands in console on both Chome and Edge

    Using Windows 10 - I can interact with the UI but the console does not take any input on both Chrome and Edge.

    image

    However, when I use Firefox I can enter commands just fine

    image

    The cursor is also visible in Firefox on the console, but is not visible on the other two browsers.

    Firefox: image

    Other: image

    opened by noahbowman 12
  • Should be easier to send link to 3rd party lessons

    Should be easier to send link to 3rd party lessons

    Currently it isn't easy to get somebody to try a 3rd party lesson, they manually have to copy and past the JSON.

    Would be good if this could be somehow simplified, e.g. by linking to:

    http://pcottle.github.io/learnGitBranching/?tree_gist=gistid_of_json http://pcottle.github.io/learnGitBranching/?lesson_gist=gistid_of_json

    and/or:

    http://pcottle.github.io/learnGitBranching/?tree_url=url_to_json http://pcottle.github.io/learnGitBranching/?lesson_url=url_to_json

    This would make it much easier to share problems between users, that may not necessarily be appropriate to include in this project.

    Javascript security issues might be a problem, as this would require retrieving the JSON from another domain, I have a vague recollection this might not be allowed, at least not without some sort of proxy on pcottle.github.io (not even sure if that is possible).

    opened by brianmay 12
  • "git cherry-pick" error if same parent

    From C1, if you run the following commands:

    git commit    
    git checkout C1    
    git cherry-pick C2
    

    I believe you should end up back on C2, because the cherry-pick adds exactly the same commit, with exactly the same parent.

    This simulator ends up creating a clone of the C2 revision, C2'.

    I believe this means the solution in "Juggling Commits 2" is incorrect, and the correct solution should be:

    git checkout master
    git commit --amend
    git cherry-pick C3
    

    As when you cherry-pick C2 from its parent (which seems pointless here anyway), you still end up with C2.

    opened by brianmay 12
  • Improve description of clone

    Improve description of clone

    I find this description a bit confusing:

    Technically, git clone in the real world is the command you'll use to create local copies of remote repositories (from github for example). We use this command a bit differently in Learn Git Branching though -- git clone actually makes a remote repository out of your local one. Sure it's technically the opposite meaning of the real command, but it helps build the connection between cloning and remote repository work, so let's just run with it for now.

    https://github.com/pcottle/learnGitBranching/blob/a78e4d1327b8cf5eb6bcc2c0300918fab4f26419/src/levels/remote/clone.js#L71

    1. I suggest to instead phrase it in one of these ways:
    • Don't go into the distinction which one is the remote: "git clone is the command to create a copy of an existing repository"
    • Or: invert the language: "Assume that a git repository by someone else exists somewhere (typical on another machine/server). You can use clone to get a local copy of that repository."
    1. The example uses git clone without specifying a remote url. Maybe it's worth to require passing in some dummy url git clone https://example.com/myrepo.git to make the example more realistic. Or even make a small example repo on github `git clone https://github.com/pcottle/learnGitBranching-clone-example.git)/, so that the call would work in real life (and users can see the repo in GitHub - though the clone operation in the tutorial is still a dummy of course).
    opened by timhoffm 3
  • Colors match when they should not

    Colors match when they should not

    First of all, incredible work here. A fantastic web app for learning Git.

    It looks like colors may be randomly rendered for examples to distinguish one branch from another. However, sometimes the same color is rendered for different branches: Screen Shot 2022-07-22 at 1 43 38 PM

    opened by jesshart 2
  • About Animation of graphs

    About Animation of graphs

    Good Afternoon,

    I would like to grab your attention towards a problem, about the visualization of the graph. It does not showup sometimes in the demonstration, on the Right-side of the curved square box while explaining about the lesson content. I am using a Brave browser. I request you to investigate & solve the bug at your earliest convenience.

    Yours Faithfully, Thank you.

    image

    opened by AmberSRP 1
  • git rebase error log history

    git rebase error log history

    Hello, I have a error order history when I use the last tag in main tab.

    Here we have main that is a few commits ahead of branches one two and three. For whatever reason, we need to update these three other branches with modified versions of the last few commits on main.

    Blow is my git command:

    $ git rebase C2 three
    $ git checkout one
    $ git cherry-pick C4 C3 C2
    $ git checkout two
    $ git cherry-pick C5
    $ git rebase two one
    
    WechatIMG71754

    The history of branch one should be:

    C2``->C3``->C4``->C5`->C1->C0
    
    opened by LiuShuaiQ 2
SAP Community Code Challenge: This repository contains an empty OpenUI5 application and end-to-end tests written with wdi5. Take part in the challenge and develop an app that passes the tests.

SAP Community Code Challenge - UI5 The change log describes notable changes in this package. Description This repository is the starting point for the

SAP Samples 8 Oct 24, 2022
Hot-challenge-solving application for any coding challenge services.

✔️ Solv Hot-challenge-solving application for any coding challenge services. Introduction Solv [sɑːlv] is a cli application for solving coding challen

Sophia 8 Dec 13, 2022
zkPoB is a mobile compatible tool that lets anyone prove they own a Bufficorn (or any NFT) without revealing which Buffi they own or the address they are verifying themselves with

zkPoB is a mobile compatible tool that lets anyone prove they own a Bufficorn (or any NFT) without revealing which Buffi they own or the address they are verifying themselves with

Marto.eth 10 Aug 25, 2022
OpenXAI : Towards a Transparent Evaluation of Model Explanations

OpenXAI : Towards a Transparent Evaluation of Model Explanations Website | arXiv Paper OpenXAI is the first general-purpose lightweight library that p

null 121 Dec 28, 2022
A map for 1337 Khouribga's new labs clusters. This tool will help 1337 students find available posts, and search for other students in the cluster by name or login.

1337KH Labs Clusters Map Hellow. This tool is made by 1337 Khouribga students for 1337 Khouribga students to help make their lives at the school easie

Oussama 18 Aug 8, 2022
An on-demand peer tutoring platform by students, for students.

OURFinals An on-demand peer tutoring platform by students, for students. Database The prisma/ folder contains: migrations/: Past database migrations (

Aditya Banerjee 3 Jan 6, 2022
This Repository consist of Daily learning JS, Assignments, coding challenge, projects, references, tutorial

?? A Tour of JavaScript This Repository consist of Daily learning, Assignments, coding challenge, projects, references, tutorial. ??‍?? ??‍?? alert(

null 23 Sep 7, 2022
An interactive Bitcoin tutorial for orange-pilled beginners. Illustrates technical Bitcoin concepts using JavaScript and some Bitcoin Core RPC commands. Programming experience is helpful, but not required.

Try Bitcoin Try Bitcoin is an interactive Bitcoin tutorial inspired by and forked from Try Regex, which is inspired by Try Ruby and Try Haskell. It il

Stacie Waleyko 33 Nov 25, 2022
A lightweight JavaScript library for creating interactive maps and pretty data visualization.

Jsvectormap A lightweight Javascript library for creating interactive maps and pretty data visualization. Explore docs . Report bug · View demo · Down

Mustafa Omar 204 Dec 24, 2022
The proposal of this repository is having a scaffold with some scenarios where you can challenge your front-end knowledge.

Frontend Kata / Interview ?? Hello developer! The proposal of this repository is having a scaffold with some scenarios where you can challenge your fr

Adrián Ferrera González 2 Nov 11, 2022
The code base for the tutorial on how to use the TypingDNA Verify API

TypingDNA-Verify-API-Tutorial The code base for the tutorial on how to use the TypingDNA Verify API Resources TypingDNA Website TypingDNA Verify Docs

Tim Ruscica 21 Oct 6, 2022
Full source-code for the step-by-step tutorial on how to use Phaser + Colyseus together.

Phaser: Real-time Multiplayer with Colyseus Full source-code for the step-by-step tutorial on how to use Phaser + Colyseus together. Live Demo See ste

Colyseus 19 Dec 24, 2022
This repo is accompanying a tutorial that is meant to be a simple introduction to vector search JavaScript engineers who use MongoDB Atlas.

hello-vector-search A simple JavaScript program to run from your computer to vectorize the sample_mflix.movies collection: vectorize_collection.js. A

Marcus 7 Oct 23, 2022
Request-Header-Parser-Microservice App for FreeCodeCamp Backend Challenge

API Project: Request Header Parser Microservice for freeCodeCamp User stories: I can get the IP address, preferred languages (from header Accept-Langu

Christotle Agholor 3 Mar 20, 2022
Moonquake - NASA App Challenge 2022

Moonquake Project presented in the Hackathon Madrid NASA Space App Challenge. Challenge 3d map of seismic moon events. Display data like day, amplitud

Eduard Aymerich 3 Oct 3, 2022
Timetable app (webapp) for SLIIT students of all years

Build status: Timetable App (for SLIIT students) This web app is made for SLIIT students of all years and all specializations. The timetables of most

Pawan Senpura 20 Nov 26, 2022
This is a project that is used to execute python codes in the web page. You can install and use it in django projects, You can do any operations that can be performed in python shell with this package.

Django execute code This is a project that is used to execute python codes in the web page. You can install and use it in django projects, You can do

Shinu 5 Nov 12, 2022
Source for the links app that we build in the SST tutorial.

Tutorial Links App Source for the Links app that we build in the SST tutorial — docs.sst.dev/learn It's a simple Reddit clone built using: SST Postgre

SST 5 Dec 16, 2022