Animating the Git Branching Model: Part 1

I’ve been trying to learn Apple Motion 5.  In my day job, I draw a lot of architecture diagrams to communicate with clients and with my technical teams.  I find the use of the visual to be clarifying, therapeutic, and highly-effective.  Up until this point, I’ve focused on static diagrams that I can whip up using OmniGraffle. But the notion of motion has always enticed me.
This post does two things.  First, it brags about my first attempt at producing an animated gif using a combination of Apple Motion 5, and ffmpeg and gifsicle.  Second, it thematically advances a framework I had introduced in my last post which argued that to understand Git, you need to understand its underlying models. In that last post, I focused on the Places Model.  Today, I want to start illustrating the Branching Model.  

I am under no illusions that what I am providing is the best approach to understanding this model.  However, if even a few people find this animated gif useful, then it will have been worth it. (Personally, I wish I had something like this when I was first learning Git.)

Anticlimactically:

You will find at the bottom of this post the steps you can copy-and-paste to follow along with what is going on in this animation.  This is my first animation and I decided to keep it simple.  Initially I wanted to show all the trickery that occurred with all the forms of git reset (from soft to hard), to the graph-rewriting git rebase, to the confusions of a detached HEAD.  For now, I find this most basic explanation to be a necessary first step.  Those other animations will follow.


Here are some things that are worth noting about what’s going on in the animation:
  1. I am NOT showing what’s going on in the Places Model and the Content Model. You are not seeing how content is being added to the index from the working directory, or how content is being added as blobs.  All we are seeing is the temporal evolution of a DAG of commits.
  2. A git checkout is literally changing a pointer to a pointer, moving HEAD to point to a branch.
  3. A branch is nothing more than a pointer in a DAG of commits.
  4. The Branch Model uses commits as a proxy for the full DAG of the Content Model which includes graph objects of type commit, blob, tag, and tree, etc.  Each commit object is the starting point to a DAG that represents the state of the code from that point.  To repeat:  we are showing the DAG for the Branch Model, and not the full DAG of the Content Model.

Steps to Follow Along with Animation

   (copy and paste these into a command-line prompt on your favorite *nix)
  1. mkdir ordoTempliOrientis;  cd ordoTempliOrientis
  2. git init
  3. touch fileNum{1..5}.txt; git add fileNum*
  4. git commit -a -m "adding five empty files"
  5. echo "first line" >> fileNum1.txt;  git commit -a -m "adding a line… praise LBJ"
  6. echo "another line" >> fileNum1.txt;  git commit -a -m "adding a 2nd line"
  7. git branch fixXSSBug
  8. git checkout fixXSSBug
  9. echo "over here" >> fileNum2.txt; git commit -a -m "modifying different file -- 1st time"
  10. echo "adding a 2nd line in new branch" >> fileNum2.txt;  git commit -a -m "This is the 2nd commit on branch"
  11. echo "adding a 2nd line in new branch" >> fileNum2.txt; git commit -a -m "3rd commit on branch"
  12. git checkout master
  13. echo "When in disgrace" >> fileNum1.txt;  git commit -a -m "1st Sonnet Commit"
  14. echo "with FORTUNE and MENs eyes" >> fileNum1.txt;  git commit -a -m "Bill would be proud"


Now, if you want to verify that these steps worked, feel free to run ‘gitk --all‘ from the command line and you should see this:
More interesting and complicated Branching Model animations to follow. Feel free to steal.

35 comments:

  1. As a student you might not be able to write the assignment on your own then I recommend you getting the humanities assignment help from a reliable service provider like us.

    ReplyDelete
  2. This is quite a .good blog. Keep sharing. I love them Are you also searching for Nursing Writing Center? we are the best solution for you. We are best known for delivering nursing writing services to students without having to break the bank.

    ReplyDelete
  3. I want to always read your blogs. I love them Are you also searching for Nursing capstone Writing Help? we are the best solution for you. We are best known for delivering Nursing capstone writing services to students without having to break the bank

    ReplyDelete
  4. I want to always read your blogs. I love them Are you also searching for Nursing thesis writing services? we are the best solution for you. We are best known for delivering Nursing thesis writing services to students without having to break the bank

    ReplyDelete
  5. You were great and everyone received so much from your experience and knowledge
    Absolutely amazing, thank you for sharing your knowledge with me. 메이저사이트

    ReplyDelete
  6. I don’t even know how I ended up here, but I thought this post was great.
    I do not know who you are but certainly you’re going to a famous blogger if you are not already 경마사이트

    ReplyDelete
  7. I blog frequently and i really thank you for your content. The article has truly peaked my interest. 카지노사이트

    ReplyDelete
  8. I am truly thankful to the holder of this site who has shared this great post at here. 사설토토

    ReplyDelete
  9. Your Information is so amazing. I appreciate your hard work and your skills. Thank you for sharing this information with us.
    Hot Rolling Mill Manufacturer In India
    Hot Rolling Mill Manufacturer
    Rolling Mill Manufacturers
    Rolling Mill Manufacturer
    Rolling Mill

    ReplyDelete
  10. Nice Post. Thanks for sharing.
    Are you looking excellent solution of EDM Roll Branding Machine Manufacturer in India? We are the best option for you EDM Roll Branding Machine because we provide you top-quality products, equipment at affordable prices. We have trained engineers that designed & developed equipment as per quality standards. Get contact to more details through our toll-free number.

    ReplyDelete
  11. Instructions to Connect Epson Printer to Wifi Router In homes and workplaces, Wi-Fi is quickly supplanting wired LAN. Connect Epson printer to wifi without screen That is the reason most top-of-the-line Epson printers presently accompany Wi-Fi introduced in them. Presently, without connecting links, you can print reports remotely. In any case, you simply need to associate your Epson printer and design it to print over a Wi-Fi association before you print. So the inquiry here is How to Connect Epson Printer to Wifi Router effectively and in less time. Some more current Epson printers can interface with your PC straightforwardly without used your modem: select Wireless or Wi-Fi Direct on the Epson remote printer Now click on the Wireless; the image on the Epson gadget you need to associate Choose the remote printer from the organization list, at that point enter your printer's secret phrase. Brother printer MFC L2750DW wireless setup

    ReplyDelete
  12. Very good article post. Really looking forward to read more. Really Cool. 온라인카지노

    ReplyDelete
  13. Your style is very unique compared to other people I’ve read stuff from. Thanks for posting when you have the opportunity, Guess I will just bookmark this page 사설토토

    ReplyDelete
  14. Welldone Information. Thanks for sharing with us.
    Jio Digital Tower is one of the best solutions to install Reliance Jio tower on your land or roof. If you want to set up a Jio Tower but you have no idea How To Install A Jio Tower Don't worry, we will tell you step-by-step solutions for Jio tower installation. To know more details about Jio tower installation, visit the website.

    ReplyDelete
  15. HP Com Printer Setup: Open your HP Officejet Pro 6978 printer, Then interface it to Wifi and visit to the 123.hp.com/setup to download HP Officejet Pro 6978 Driver to finish HP printer setup.

    ReplyDelete

  16. I admire what you have done here. I like the part where you say you are doing this to give back but I would assume by all the comments that this is working for you as well. Feel free to visit my website;
    야설



    ReplyDelete
  17. I admire what you have done here. I like the part where you say you are doing this to give back but I would assume by all the comments that this is working for you as well. Feel free to visit my website; 일본야동



    ReplyDelete
  18. Thank you for some other informative blog. Where else could I get that type of information written in such an ideal means? I have a mission that I’m just now working on, and I have been at the look out for such information. Feel free to visit my website;
    국산야동

    ReplyDelete
  19. Usually I never comment on blogs but your article is so convincing that I never stop myself to say something about it. You’re doing a great job Man and Thanks for the post,Interesting stuff to read. Keep it up. Feel free to visit my website;

    일본야동

    ReplyDelete

  20. Good Work At All. I Really impressed and got lots of information from your post and encourage me to work as best as I can. Feel free to visit my website;
    한국야동

    ReplyDelete
  21. Technologistan is the popoular and most trustworthy resource for technology, telecom, business and auto news in Pakistan

    ReplyDelete
  22. Awarded Best website development in noida, Leading Web Development, SEO, Digital Marketing & Branding Company India

    ReplyDelete
  23. Fashion-forward designs such as those from Bella + Canvas prove the tank top can look great anywhere. blank apparel wholesale distributors

    ReplyDelete
  24. I am really pleased to read this web site posts which carries tons of valuable data, thanks
    for providing such information. 먹튀검증


    ReplyDelete
  25. Total Assignment Help gives best asa referencing service here with experts specializing in a wide range of disciplines ensuring you get the assignments that score maximum grades.

    ReplyDelete
  26. Technologistan is the popoular and most trustworthy resource for technology, telecom, business and auto news in Pakistan

    ReplyDelete
  27. Thanks for sharing this with so much of detailed information, its much more to learn from your article. Keep sharing such good stuff. 사설토토

    ReplyDelete
  28. I think the admin of this web page is actually working hard in support of his web site, for the reason that here every information is quality. 바카라사이트

    ReplyDelete
  29. Anupama is the famous serial of star plus and this serial is very famous for a well known personality of the anupama serial i.e. anupama anuj kapadia? At shayari ka pitara you'll find the shayari recite by anuj kapadia along with the hd images.

    ReplyDelete