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.

36 comments:

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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

  6. 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
  7. 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
  8. 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

  9. 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
  10. Technologistan is the popoular and most trustworthy resource for technology, telecom, business and auto news in Pakistan

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

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


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

    ReplyDelete
  14. 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
  15. This is a great article! I love the way it visualizes the git branching model. It really makes it easy to understand how git works.

    ReplyDelete
  16. the subsequent time i look at a weblog, with a piece of good fortune it does no longer fail me really as plenty as this particular one. I mean, i apprehend it changed into my choice to study, however i truely believed you would have some thing useful to mention. All i listen is a bunch of crying about some thing that you could restore in case you weren’t too busy seeking out attention. Once i to start with commented i appear to have clicked on the -notify me at the same time asm/s/tasks/240bd55f-c566-4473-9657-fb80d677c68e/totomeogtwi">먹튀스쿨먹튀신고

    ReplyDelete
  17. ambbo pgslot จังหวะเป็นคนรวยคนใหม่อยู่ใกล้นิดเดียว pg เพียงแค่ลงทุนให้เหมาะสม! เว็บพวกเรามีจุดเด่นและก็คุณลักษณะเด่นที่น่าดึงดูดมากมายก่ายกองหลายประการว่าแม้ท่านลงทะเบียน

    ReplyDelete
  18. สมัคร PG SLOT NEW นั้นมีสล็อตใหม่ออกมาอย่างต่อเนื่อง เพื่อตอบสนองความต้องการของผู้เล่นที่ต้องการความสนุกสนานและเสียงเพลงที่น่าฟัง PG SLOT ในช่วงเวลานี้มีสล็อตใหม่ๆ

    ReplyDelete
  19. pg slot 888 ทางเข้า สมัคร การเงินของเว็บ เกมสล็อต ค่าย pg 888 สามารถใช้บริการออนไลน์แล้วก็ได้โอกาสชนะเงินของพวกเรา ผู้เล่น PG Slot แล้วก็คนที่ใช้บริการสำหรับเพื่อการลงทุน

    ReplyDelete
  20. ทาง-เข้า-เล่น-pg90 เป็นเกมสล็อตออนไลน์ที่มีความนิยมอย่างมากในปัจจุบัน และมีความสนุกสนานระดับสากลที่หลากหลาย PG SLOT หากคุณต้องการเข้าเล่น PG90

    ReplyDelete
  21. pg slot wallet ดาวน์ โหลด ดาวน์โหลด PG SLOT เวอร์ชั่นปัจจุบัน เกมคาสิโน บนโทรศัพท์มือถือที่เยี่ยมที่สุดในประเทศไทย ทุกคนสามารถ ชนะแจ็คพอตแล้วก็รับเงินสด ได้ในทันที ยังเกม

    ReplyDelete
  22. รีวิว-ezybet-789 ออนไลน์ที่มีความน่าเชื่อถือและได้รับความนิยมจากผู้เล่นในประเทศไทยอย่างแพร่หลาย บริการของเว็บไซต์นี้มีความหลากหลายกว่า 30 กีฬาบาสเกตบอล PGSLOT

    ReplyDelete
  23. SLOTXO เกมใหม่ปัจจุบันปี 2023 เเนะนำเกมประสิทธิภาพสูงอัพเดทใหม่ๆมีเกมส์ให้เลือกเล่นมากยิ่งกว่า 200 เกมส์ แต่ละเกมมีต้นแบบแล้วก็อัตราที่สูงเเตกแตกต่างกัน ค้ำประกันจากผู้เล่นจริง เเนวโน้มของเกม pg slot หมายถึงล้ำยุค เข้าเล่นง่ายได้เร็ว

    ReplyDelete
  24. Marvelous work! Every one of you complete an unfathomable blog

    ReplyDelete
  25. Thank you for some other informative blog.

    ReplyDelete
  26. It's hard to find good quality writing like yours these days.

    ReplyDelete
  27. Hi there, the whole thing is going well here and of course everyone is sharing information.

    ReplyDelete
  28. Great Post! I look forward to seeing more from you in the future.

    ReplyDelete