Github just implemented a great edit history UI

Unknown
Unknown
in Product

I just noticed that if you edit a comment in Github the edited label now has a dropdown that lists all of the edit dates of your post.

Click on one of the dates and a popup shows you a diff between it and the previous version.

This is a very nice UI and we'll definitely need something like it for the knowledge base. They even handle diffs nicely. If you notice in the above picture the only change I made was to formatting and the diff still shows an appropriate change.

Anyone who can figure out their diff library (in js) gets a beer.

Comments

  • Alex Powell
    Alex Powell

    I really like the way they did this. I have no chance of winning the beer... though. Good luck friends :)

  • Unknown
    Unknown
    edited June 2018

    It's definitely something totally in house. Digging through the source maps right now.

    A peek through the network request shows these diffs are being done server side. Then on the frontend the changes are highlighted with CSS.

    An example of of the html they spit out.

    <div class="Box-body overflow-auto">
  <div id="edithistory-box-overlay-description" class="js-rich-diff rich-diff prose-diff d-block">
    <article class="markdown-body entry-content comment-body p-0">
      <div class="changed rich-diff-level-zero"><p class="rich-diff-level-one"><del>This is not a security issue, but I'm not super keen on scrubbing our internal info so I'm putting it here.</del><ins><em>This is not a security issue, but I'm not super keen on scrubbing our internal info so I'm putting it here.</em></ins></p></div>
<p class="vicinity rich-diff-level-zero">Ops has noted that memory has nearly doubled during their last update. We need to do some profiling to see if something has gone awry. Failing that there is probably some low hanging fruit that may help us.</p>
<div class="expandable unchanged js-expandable rich-diff-level-zero">
<p class="unchanged rich-diff-level-one">Here is information I can give you:</p>
<ol class="unchanged rich-diff-level-one">
<li class="unchanged">The old hash is 1e85917. Note it's quite old.</li>
<li class="unchanged">The new hash is b6b9f09, but I'm guessing you can just profile latest master.</li>
<li class="unchanged">The code in question is on orchestration. It runs its own custom plugins, but otherwise a pretty bare-bones version of Vanilla. Since it will be difficult to set up an orchestration environment I recommend profiling a few JSON responses and maybe some common dashboard pages.</li>
</ol>
  • Unknown
    Unknown
    edited June 2018

    Anyone who can figure out their diff library (in js) gets a beer.

    It that a trick question because there's no JS involved there.

    Seems to be an in house solution which has been around for years:

  • Unknown
    Unknown

    I updated my above comment with more links.

  • Unknown
    Unknown

    It looks like we have a challenge to implement something like this. There are projects out there that have similar functionality. We could implement in javascript or in PHP at the API layer.

    Does anyone have thoughts on that?

  • Unknown
    Unknown
    edited June 2018

    On the JS there is diff.

    Live Demo: link

    • Browser support down to IE8.
    • A few different diffing methods for plain text.
    • The different types of diffs all extend a base class. It seems quite extendable if we wanted to build on top of it. This si code of the word diffing
    • Diffs get returned back as an array of the following shape:
    const diff = {
  value: "someString",
  added: true,
  removed: false,
};

Categories