GitFiddle: JSFiddle, but for Git
Motivation
- More and more people need to learn/use Git.
- Git has a learning curve, especially when going beyond basic use patterns.
- Examples in books and tutorials are static, and don't let you easily play with possibilities and variations.
Features
-
Quickly set up a Git state by dragging, dropping, and connecting blocks representing commits, merges, branches, HEAD tag, etc. It would default to an "auto-populate mode" where you could just drag in a new commit, and the tool would make plausible changes to the file contents. (For instance, by default the start state of a file might be "abc", and when you attach a new commit block, it would automatically change the file to something like "abcd". If the user wants to override the details they can, but in most cases the specifics of the file changes may not matter for the purpose of the situation, so auto-populate would make set-up fast.)
-
Copy an existing Git state (e.g., one made by another user) and modify it / play with it.
-
Import a Git state from an actual repo (or a subset of that repo).
-
Execute Git commands on the state and see the results, with animations showing it happening.
-
Unlimited undo to try different commands from the same start state.
-
Set up a sequence of commands, with commentary, for others to watch, acting as an animated tutorial of something you want to explain, or a situation you want help with.
Use Cases
-
People wanting help using/understanding Git. You ask a question on stack overflow, and give a link to the GitFiddle set-up.
-
People wanting to play with Git scenarios in a sandbox in order to learn more about Git. This includes seeing what would happen when you execute commands in your current real repo that you've "imported".
-
Teaching Git by setting up scenarios, animations, and commentary. That is, the basic case is a git state with the ability to manually perform commands on it. This case adds the ability to predefine a sequence of commands that illustrate things happening on that state. There could be a sub-case here where you can make a tutorial interactive by requiring the user to enter commands to reach a goal, as in https://learngitbranching.js.org/.
Questions
-
Does it exist?
-
Would you use it?
Just found this and first wanted to answer:
I've been using git through my Ide for years, but only the basics. I started digging in this week and ran into the link above, which is brilliant. As I went through the examples, I thought there had to be a better way.
Since it's been a year or so, I have to ask if you generate a landing page. And, if so, do you have a link, what was the response, and might there be an implementation of the product?
Sorry, no landing page yet.
Can I ask: What are the things you've recently been doing in git that made you feel like you needed a tutorial. Working with multiple branches? Collaborating with others?
In what ways did learngitbranching help you and in what ways did you feel "there had to be a better way"? What was it about learngitbranching that seemed less than ideal?
I'm actually writing a post on that for tonight, but I will give you the short version:
I use SVN for work and GIT for personal projects. So, my GIT workflow is similar to the SVN workflow. I work on the main branch, one feature at a time, commit and push to GitHub. I know this is not optimal, but it generally works for me.
In the past, I've worked on a few problems simultaneously and got confused trying to separate them out for the commit. Not completely understanding what is going on with git commands can quickly become a tangled mess.
I'm considering starting an open-source project and feel like I'd better understand GIT much better before getting into it.
Thanks for the info. So learngitbranching was not helping you understand branching and merging? Or not understanding well enough?
Not at all; I highly recommend it as one of my top three introductions to git resources. Git branching feels different from the likes of SVN, and this tutorial does a good job demonstrating the concept.
Thanks for the reply. Could you tell me which of the listed features sound most useful to you personally?
Would you use it is something we cannot really answer. Some people will say yes, others say no and others give their ideas, but an idea is just an idea. The best way to answer the question is to create a landingpage (MVP) and see if people sign up.
Want to know more about this, check The Lean Startup (by Eric Ries) and Lean Customer Development.
Right, thanks. Note that I'm not asking "Is this a good idea?" I'm asking "Would you use it?" The idea being that people on IH are likely to be Git users, so would likely be able to say whether they'd be interested in trying it from the description above. But I will make a landing page as you suggest. It will contain much the same information as above, but with pictures (and ideally aminations), and the ability to enter an email address for beta access.
Here are some specific questions for you:
Are you a Git user?
Does my description above give you a good idea of what the thing would be? If not, which parts are unclear and would be helped by pictures or animations?
I used git, I barely understood the basics, so a product like this could be something for me, to play around with the command and learn what they do. I lost so much time doing it wrong😂 So I tend to say yes I would use it.
Excellent, thank you. When you were learning Git and losing time, what tutorials or books were you learning from?
I watched YouTube videos. But I remember setting it all up the first time was a horrible experience😂. Took me days to be able to push the code to Github from my editor Lol. Then I had all sorts of issues with merges etc. It worked, but don’t ask me how😂
Good information. Thank you. When I get something (even just an animation) working, I'll ping you to ask for feedback.
Sure! Happy to help!