The overall goal of what I am trying to do is, I am trying to allow the visitor to view the 'lifecycle' of how one snippet of code has evolved over time. They should be able to quickly see how the snippet changes each step of the way.

If you are familiar with Git or any version control, just imagine your favorite code snippet in an open-source project and how it evolves commit-to-commit.

To be clear, I am going to show what I have right now for two scenarios:

  • The code snippets by themselves ("vanilla version") on a timeline.
  • The code snippets with the diffs ("diffed version") on a timeline - the diff shows any changes between the two code snippets.

On each snippet, I will show some meta-data (author's avatar, date posted, etc.).

However, I am not fully satisfied with the way I am doing it now and would love any suggestions on how to improve the way I display both the vanilla & diff versions of my data.

I have implemented 2 options so far. A left-aligned & a center-aligned timeline.

Vanilla (no diffs)





Diffed Versions





Notice the red & green bits at the end. Those are the diffs. The red piece on the left shows what has been removed in that snippet of code, the green piece on the right shows what has been added.

For comparison, this is how Github displays similar data.

I would love any suggestions for how I can present this better or accomplish my goal.


2 Answers 2


I agree with Philip that I adore the centered design more, and about putting the snippets always on the same side to ensure consistency. But here are some tweaks. Have you considered something like this?

  1. Have the timeline split the screen approximately 4:6 horizontally. (thus you will have more space for the diff windows, you can put them on top of each other, but I like it side by side. Becuase I think it is easier for the users to compare. )
  2. Put the snippet window on the left, and the diff windows on the right. (thus users don't need to scroll down for the diff)
  3. maybe less code in the snippet. (I don't think you need to mark the change in the snippet, but less code in there would help to locate the change)

Before you go into the development, it is always good to test your design(s) on actual users, and see what their thoughts are. Sometimes you will be amazing about how different designers and users can be when comes to using the products.

Your design looks good! Good luck!

enter image description here

  • Thanks for the thoughtful comment. I do like the idea of having the code snippet smaller...that does make sense. I also like the idea of having the diffs larger & side-by-side, because that really is the focus and main point of this. I would love if there was a way to do "less code in the snippet too", but the issue is that there is no way to really tell in advance which code snippet will have the 'least code', because the code changes over time. The more time there is, the higher the likelihood that there will be snippets that are larger. But I do take your point :) Commented Jul 20, 2016 at 23:33
  • The code change point for "less code issue" does make sense! I wasn't considering that! Sorry. Good luck~
    – Wen G
    Commented Jul 21, 2016 at 2:12

I would go with the center-aligned approach. The reason is because:

  • Having the whole snippet adds context to the diff change. I recommend indicating in the snippet where the change occurred because it is not currently easy to determine that information at a glance.
  • I would not need to scroll to the bottom of the snippet to see the diff, which is probably what I would be most interested in if I was using this timeline. If I had to scroll through a very long snippet just to see a single line change, I would become frustrated quickly.

Consider also keeping the snippet and diff on the same side of the timeline between events in order to bring consistency of location. For example, assign the left side of the timeline to always be the snippet and the right side to always be the diff. It will allow the user to associate each side to a specific type of information, enabling quicker information foraging. If the alternating of snippet and diff is a stylistic decision, then disregard this paragraph.

Anyways, it looks great! Good luck!

  • Very interesting points. I like the idea of keeping the diffs on one side only for consistency's sake. That idea about adding the diff within the snippet is interesting....I feel like that may get confusing, no? Commented Jul 20, 2016 at 6:35
  • Also re: the diff, should I put the diffs side-by-side or on top of each other? Or should I display them some other way? Because one thing I am seeing now is that I am running out of space within the diff to read it properly, with it being side-by-side like that. Commented Jul 20, 2016 at 6:37
  • 1
    @marcamillion Oh sorry, I didn't mean to have the diff within the snippet, just to indicate (using a vertical change bar or a horizontal rule) where the change occurred. I think Wen G has the right idea about the side-by-side diff. Since the diff is the main piece that users most likely will care about, I would dedicate more screen space to it. Having the snippet there is for reference and you may even consider adding a toggle button to hide or show it in order to show even more space for the diff. Commented Jul 22, 2016 at 13:49
  • Interesting idea re: the toggle. I think you guys are on to some really great ideas. I haven't fully settled on what I will go with yet. I am going to play with it a little. Commented Jul 22, 2016 at 23:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.