While I understand that long comment chains are generally symptomatic of a discussion veering off target, they are sometimes necessary for a discussion, often on Meta. However, I find it rather difficult to figure out who is replying to whom or which comment is being referenced.
Please make it easier to discern which comments belong to whom. Right now, the name of the questioner is styled differently in comments which helps whenever you want find replies made by the original poster. However, some discussions still get too interwoven to be able to figure out where you need to look to follow the thread.
I made a really simple snippet to show off the idea. Hovering over @[user-name]
mentions will cause that user's comments to become highlighted so that it is easier to figure out what comment is being referenced or replied to. The same principle could be applied to hovering over the actual comment author <a>
but I usually only have issues following mentions. The text used to test with came from the comments section of this question: Developer survey 2015, high rep users OS choice
/*jslint browser:true es5:true*/
/*global jQuery*/
(function($) {
"use strict";
function getUserComments(name) {
var cleanName = name.replace(/\s/g, "");
return $(".comment").filter(function() {
return (cleanName === $(this).find(".comment-user").text().replace(/\s/g, ""));
});
}
function main() {
$(".comment-copy").each(function() {
var commentTextNode = $(this);
commentTextNode.html(commentTextNode.html().replace(/@([a-zA-Z0-9]+)/, "@<span class=\"user-ref\">$1</span>"));
});
$(".user-ref").each(function() {
var commentUser = $(this);
commentUser.mouseover(function() {
getUserComments($(this).text()).each(function() {
$(this).addClass("highlight");
});
});
commentUser.mouseout(function() {
getUserComments($(this).text()).each(function() {
$(this).removeClass("highlight");
});
});
});
}
$(main);
}(jQuery));
.comment {
transition: background-color 0.2s;
}
.comment.highlight {
background-color: bisque;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="comments-319029" class="comments ">
<table>
<tbody data-remaining-comments-count="1" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true">
<tr id="comment-322528" class="comment ">
<td class="comment-actions">
<table>
<tbody>
<tr>
<td class=" comment-score">
<span title="number of 'useful comment' votes received" class="supernova">42</span>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
<td class="comment-text">
<div style="display: block;" class="comment-body">
<span class="comment-copy">It is the kind of experience they need to realize that pressing the Tab key <i>actually</i> inserts spaces. Takes a while, can be years.</span> –
<a href="/users/17034/hans-passant" title="614726 reputation" class="comment-user">Hans Passant</a>
<span class="comment-date" dir="ltr"><a class="comment-link" href="#comment322528_319029"><span title="2016-03-15 16:07:39Z" class="relativetime-clean">yesterday</span>
</a>
</span>
<span class="edited-yes" title="this comment was edited 3 times"></span>
</div>
</td>
</tr>
<tr id="comment-322529" class="comment ">
<td class="comment-actions">
<table>
<tbody>
<tr>
<td class=" comment-score">
<span title="number of 'useful comment' votes received" class="cool">3</span>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
<td class="comment-text">
<div style="display: block;" class="comment-body">
<span class="comment-copy">So if you downloaded the raw data, why aren't you plotting this yourself?</span> –
<a href="/users/1159478/servy" title="140520 reputation" class="comment-user">Servy</a>
<span class="comment-date" dir="ltr"><a class="comment-link" href="#comment322529_319029"><span title="2016-03-15 16:09:50Z" class="relativetime-clean">yesterday</span>
</a>
</span>
</div>
</td>
</tr>
<tr id="comment-322532" class="comment ">
<td class="comment-actions">
<table>
<tbody>
<tr>
<td class=" comment-score">
<span title="number of 'useful comment' votes received" class="warm">11</span>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
<td class="comment-text">
<div style="display: block;" class="comment-body">
<span class="comment-copy">@Servy, updated <code>rep info is not included in the raw data</code></span> –
<a href="/users/3160597/bludream" title="2615 reputation" class="comment-user owner">Bludream</a>
<span class="comment-date" dir="ltr"><a class="comment-link" href="#comment322532_319029"><span title="2016-03-15 16:14:31Z" class="relativetime-clean">yesterday</span>
</a>
</span>
</div>
</td>
</tr>
<tr id="comment-322552" class="comment ">
<td class="comment-actions">
<table>
<tbody>
<tr>
<td class=" comment-score">
<span title="number of 'useful comment' votes received" class="warm">10</span>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
<td class="comment-text">
<div style="display: block;" class="comment-body">
<span class="comment-copy">All the data say is that people who have more experience <i>with SO</i> prefer spaces. It says nothing about their experience programming :P</span> –
<a href="/users/215552/mike-mccaughan" title="2889 reputation" class="comment-user">Mike McCaughan</a>
<span class="comment-date" dir="ltr"><a class="comment-link" href="#comment322552_319029"><span title="2016-03-15 16:55:48Z" class="relativetime-clean">yesterday</span>
</a>
</span>
</div>
</td>
</tr>
<tr id="comment-322757" class="comment ">
<td class="comment-actions">
<table>
<tbody>
<tr>
<td class=" comment-score">
<span title="number of 'useful comment' votes received" class="hot">19</span>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
<td class="comment-text">
<div style="display: block;" class="comment-body">
<span class="comment-copy">It seems quite possible to get lots of rep here answering trivial questions, and hence end up being an "experienced SO user" but still not really an experienced programmer. Not sure I'd assign overly much weight to surveys like this if you're trying to determine best practices.</span> –
<a href="/users/2283319/chris-kitching" title="1059 reputation" class="comment-user">Chris Kitching</a>
<span class="comment-date" dir="ltr"><a class="comment-link" href="#comment322757_319029"><span title="2016-03-16 05:06:47Z" class="relativetime-clean">12 hours ago</span>
</a>
</span>
</div>
</td>
</tr>
<tr id="comment-322765" class="comment ">
<td class="comment-actions">
<table>
<tbody>
<tr>
<td class=" comment-score">
<span title="number of 'useful comment' votes received" class="warm">12</span>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
<td class="comment-text">
<div style="display: block;" class="comment-body">
<span class="comment-copy">A <i>tab character</i> is not the same as a <i>space character</i>. Yes, some editors do convert tabs to spaces or simply insert spaces when the tab key is pressed but that doesn't make the two equal. Ask anyone who has had to work with Makefiles.</span> –
<a href="/users/193619/nathan-osman" title="20029 reputation" class="comment-user">Nathan Osman</a>
<span class="comment-date" dir="ltr"><a class="comment-link" href="#comment322765_319029"><span title="2016-03-16 05:32:31Z" class="relativetime-clean">11 hours ago</span>
</a>
</span>
<span class="edited-yes" title="this comment was edited 1 time"></span>
</div>
</td>
</tr>
<tr id="comment-322767" class="comment ">
<td class="comment-actions">
<table>
<tbody>
<tr>
<td class=" comment-score">
<span title="number of 'useful comment' votes received" class="warm">5</span>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
<td class="comment-text">
<div style="display: block;" class="comment-body">
<span class="comment-copy">@MikeMcCaughan Experience is measured as a separate statistic from SO reputation: <a href="http://stackoverflow.com/research/developer-survey-2015#profile-experience">stackoverflow.com/research/…</a>. Note the word "too" in the quote: the correlation between a preference for spaces and SO rep exists <i>in addition to</i> the correlation between said preference and experience.</span> –
<a href="/users/1530508/approachingdarknessfish" title="8196 reputation" class="comment-user">ApproachingDarknessFish</a>
<span class="comment-date" dir="ltr"><a class="comment-link" href="#comment322767_319029"><span title="2016-03-16 05:37:31Z" class="relativetime-clean">11 hours ago</span>
</a>
</span>
</div>
</td>
</tr>
<tr id="comment-322876" class="comment ">
<td class="comment-actions">
<table>
<tbody>
<tr>
<td class=" comment-score">
<span title="number of 'useful comment' votes received" class="cool">3</span>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
<td class="comment-text">
<div style="display: block;" class="comment-body">
<span class="comment-copy">If you guys read the quotation correctly, you'd maybe notice that it doesn't assert that experience and SO reputation correlate. It says that <b>both</b> experience and SO reputation correlate with preference for spaces. <b>How experience was measured wasn't disclosed.</b></span> –
<a href="/users/607407/tom%c3%a1%c5%a1-zato" title="10903 reputation" class="comment-user">Tomáš Zato</a>
<span class="comment-date" dir="ltr"><a class="comment-link" href="#comment322876_319029"><span title="2016-03-16 09:59:11Z" class="relativetime-clean">7 hours ago</span>
</a>
</span>
</div>
</td>
</tr>
<tr id="comment-322877" class="comment ">
<td class="comment-actions">
<table>
<tbody>
<tr>
<td class=" comment-score">
<span title="number of 'useful comment' votes received" class="warm">9</span>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
<td class="comment-text">
<div style="display: block;" class="comment-body">
<span class="comment-copy">@HansPassant And then next tier of experience: realizing that not all IDEs does this, and that the first thing you need to check in your IDE is if replaces tabs with spaces.</span> –
<a href="/users/584518/lundin" title="46417 reputation" class="comment-user">Lundin</a>
<span class="comment-date" dir="ltr"><a class="comment-link" href="#comment322877_319029"><span title="2016-03-16 10:00:48Z" class="relativetime-clean">7 hours ago</span>
</a>
</span>
</div>
</td>
</tr>
<tr id="comment-322882" class="comment ">
<td class="comment-actions">
<table>
<tbody>
<tr>
<td class=" comment-score">
<span title="number of 'useful comment' votes received" class="cool">4</span>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
<td class="comment-text">
<div style="display: block;" class="comment-body">
<span class="comment-copy">Rep info in the raw data would be too personally identifiable, I think. Particularly for very high rep users.</span> –
<a href="/users/5419599/wildcard" title="157 reputation" class="comment-user">Wildcard</a>
<span class="comment-date" dir="ltr"><a class="comment-link" href="#comment322882_319029"><span title="2016-03-16 10:18:08Z" class="relativetime-clean">6 hours ago</span>
</a>
</span>
</div>
</td>
</tr>
<tr id="comment-322883" class="comment ">
<td>
<table>
<tbody>
<tr>
<td class=" comment-score">
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
<td class="comment-text">
<div style="display: block;" class="comment-body">
<span class="comment-copy">@Wildcard I was just about to say that - I can find the record that corresponds to my answers in the data already. Though you could possibly get round it by having rep banding like 1-1k, 1k-5k, 5k-10k, 10k-50k, 50k-100k, 100k+</span> –
<a href="/users/1663001/davidg" title="27773 reputation" class="comment-user">DavidG</a>
<span class="comment-date" dir="ltr"><a class="comment-link" href="#comment322883_319029"><span title="2016-03-16 10:19:47Z" class="relativetime-clean">6 hours ago</span>
</a>
</span>
<span class="edited-yes" title="this comment was edited 2 times"></span>
</div>
</td>
</tr>
<tr id="comment-322884" class="comment ">
<td>
<table>
<tbody>
<tr>
<td class=" comment-score">
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
<td class="comment-text">
<div style="display: block;" class="comment-body">
<span class="comment-copy">and one of the staff members could take a look and kindly publish the result</span> –
<a href="/users/3160597/bludream" title="2615 reputation" class="comment-user owner">Bludream</a>
<span class="comment-date" dir="ltr"><a class="comment-link" href="#comment322884_319029"><span title="2016-03-16 10:20:38Z" class="relativetime-clean">6 hours ago</span>
</a>
</span>
</div>
</td>
</tr>
<tr id="comment-322887" class="comment ">
<td class="comment-actions">
<table>
<tbody>
<tr>
<td class=" comment-score">
<span title="number of 'useful comment' votes received" class="cool">1</span>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
<td class="comment-text">
<div style="display: block;" class="comment-body">
<span class="comment-copy">@Lundin <i>All</i> IDEs <i>can</i> do this. Whether it's the default setting or not is a different matter. Moreover good editors have filetype sensitive indentation, so that when you edit a Makefile it will correctly use tabs instead of spaces to comply with the syntax.</span> –
<a href="/users/510937/bakuriu" title="37235 reputation" class="comment-user">Bakuriu</a>
<span class="comment-date" dir="ltr"><a class="comment-link" href="#comment322887_319029"><span title="2016-03-16 10:25:22Z" class="relativetime-clean">6 hours ago</span>
</a>
</span>
</div>
</td>
</tr>
<tr id="comment-322894" class="comment ">
<td class="comment-actions">
<table>
<tbody>
<tr>
<td class=" comment-score">
<span title="number of 'useful comment' votes received" class="cool">1</span>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
<td class="comment-text">
<div style="display: block;" class="comment-body">
<span class="comment-copy">@Bakuriu I take it you didn't program in Windows during late 90s. Indeed most <i>modern</i> IDEs have the option, but not always per default.</span> –
<a href="/users/584518/lundin" title="46417 reputation" class="comment-user">Lundin</a>
<span class="comment-date" dir="ltr"><a class="comment-link" href="#comment322894_319029"><span title="2016-03-16 10:29:31Z" class="relativetime-clean">6 hours ago</span>
</a>
</span>
</div>
</td>
</tr>
<tr id="comment-322896" class="comment ">
<td class="comment-actions">
<table>
<tbody>
<tr>
<td class=" comment-score">
<span title="number of 'useful comment' votes received" class="warm">9</span>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
<td class="comment-text">
<div style="display: block;" class="comment-body">
<span class="comment-copy">I reprogrammed emacs to insert a tab every time I hit space 4 times - yes, I'm that good. No-one else thought it was even possible. After that I was able to hack time (<a href="https://youtu.be/KEkrWRHCDQU" rel="nofollow">youtu.be/KEkrWRHCDQU</a>)</span> –
<a href="/users/1041868/bph" title="2518 reputation" class="comment-user">bph</a>
<span class="comment-date" dir="ltr"><a class="comment-link" href="#comment322896_319029"><span title="2016-03-16 10:33:55Z" class="relativetime-clean">6 hours ago</span>
</a>
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>