Last week at the Developing Ordinary Times (sub-)blog, I introduced a set of more advanced “new since last visit” functions that I’m in the process of turning into a WordPress “plugin.” Some feedback from a handful of interested users and some further testing led me to add a few more features, and eventually to re-work and rationalize the code and underlying approach, whose initial outlines I had borrowed from developer John Parris.
With discussion there having run its course, and with some substantial additional work having been finished, this slow Sunday with football on seems as good a time as any to try it out. To make the transition easier, I’m installing it in two steps, leaving the old new new comments since last visit formatting and headings in place while the new new comments since last visit gathers the info it needs to work.
Using Comments Since Last Visit Reloaded (CSLVR)
For those of you not engaging with the site during the transition, the first thing you may notice may be what’s not there: Leftover new comment formatting from the prior regime. You’ll be starting with a clean slate, and won’t see anything at all until you’ve visited a thread at least once, and there’s at least one new comment to highlight.
At that point, I think most of you will be able just to dive in, but, if you’re not so sure about it, here’s a quick video demonstration of what CSLVR does – or of what you can do with it:
In words:
1. CSLVR highlights comments new since your last visit on a per-thread basis, and preserves highlighting for the duration of a session, currently set at 15 minutes. In other words, after you have visited a post for the first time, comments made after that point will show up as “new” on your next return visit. They will remain highlighted for 15 minutes whether or not you add a comment of your own or browse to another post. 1
2. You get a button for skipping directly to new comments and, through use of a “Go to Next Clicker” that appears next to each new comment, scrolling quickly through new comments separately. When you reach the end of a long comment list, the GTN Clicker will take you back to the top of the comments section (in most cases: the functions can be sensitive to environment). The GTN Clicker will be available immediately, the GTN button will appear in phase 2 of the transition.
3. Another button will give you the option to Show New Comments Only (again, for the particular thread only):
4. A third button, which will appear on the Show New Only display, will let you Sort the list of new comments either Newest to Oldest or Oldest to Newest.
5. If you click on any link within the Show New Only display, it will open a new browser tab or window, leaving the new comments list intact in the prior tab or window. (There’s a bit of a mysterious transition in the demo video where I click offscreen from the new window back to the old one.)
6. CSLVR also includes a bit of responsive formatting for small screens. For example, the GTN Clicker shifts to the left, while its container quadruples in size and goes dark without hover, to make it easier to find and click:
NOTE: Not all mobile browsers will be optimized for all CSLVR features: You may get confusing execution lags and other unexpected behaviors – please let me know if you encounter any, and please provide device/browser info along with precise descriptions if you want me to see about improving your results!
7. You will be able to re-start the thread-session at any time by clicking a Mark All Read button that appears at the far right and bottom of the regular and show-only threads.
About The Cookies
The application relies on setting three cookies in your browser, so, in addition to being thread-specific, it will also be browser-specific. That means that, if you like to switch between browsers and devices, then what’s new or old for you on Firefox/Windows may not be on Chrome/Android and so on.
As for the cookies themselves, they shouldn’t add any appreciable burden to your browser. In addition to being quite compact, the CSLVR cookies all have relatively near-term expiration dates. The session cookies are set to expire after 15 minutes (the session length), and the two cookies that define last visits are currently set to expire after 30 days. Though all of the cookies will be frequently updated, each new cookie of the same type replaces an old one. So, if you visit the thread once, you get 3 small cookies, of which 2 persist, but, no matter how many times you visit again, you still will have only 3 cookies at most per visited thread. If you visit 30 different threads once each over the course of 30 days, you’ll have the same amount of cookie in your browser as if you visit 30 different threads 30 times each over the same period. 2 If you’re like many internet users, your Google and Amazon cookies alone may take up more total space – among likely hundreds of other cookies collected within your favorite browser.
I’ll leave the cookie discussion here, as I’m not sure how well-understood cookies are to the average internet user or how much even the typical above average user wants to know about them. It may be enough for you to know that many websites depend on them in different ways, as do users for many conveniences – like being “remembered” by a site. On the other hand, though your cookie assortment may not say as much about your virtual travels as your “history,” it will still reveal a lot about where you’ve been. If where you go – yes, that certain Tumblr site you clicked to that day… – is not something you’re comfortable with anyone who’s interested finding out, you might want to consider looking into the matter further.
Implementation
Big thanks, again, to all who helped, and especially to OGs nevermoor and Vikram Bath, who provided invaluable suggestions all along. Any defects in what I’ve done with some of their suggestions, however, or any problems that may arise with the proto-plugin in this first broad implementation, will be entirely my fault.
In the last connection I hope you all like Comments Since Last Visit Reloaded, or that the general liking of it clearly outweighs whatever hating of it, but I will be surprised if there aren’t still some hinks to work out and improvements to be made. For my own part, I’m still curious about how well it will handle very long and complex threads, since making them easier to keep up with is a main reason for creating the plugin in the first place. It may be that a bit of real in-the-field testing will reveal severe problems and require de-activation: I’ve tried to simulate “real blogging life” both off-line and at Developing…, but at some point with these things you just have to see how your logic handles the slings and arrows of outrageous browsing.
- The previous version defined “visit” somewhat more vaguely and for some users confusingly, combining both site-wide and per-thread information.
- If you use Chrome, or Firefox with the Firebug add-on, you can right-click and choose Inspect Element anywhere in the page, then check Resources/Cookies or the Cookies tab, respectively, to see the timestamp magic happen. While you’re there, feel free to delete any old stale cookies you see, though, if you don’t, they’ll expire on their own in due time.
Wooooo!
I’m going to give it a few days of real use to see if I have other thoughts, but otherwise this is excellent work.Report
Recognizing I’m probably way too invested at this point, a few thoughts:
1. The clickable buttons are showing a thin rectangle instead of an arrow. Maybe an invalid character reference?
2. It’s not clear to me exactly how the buttons work. What I expected was that the button at any particular comment would point at the subsequent unread comment. I’m getting different behavior:
Assume 10 unread nested comments. If I have 1-3 on the screen, and click the button next to #3, it scrolls from 1 to 2. If I instead scroll down so that 4-6 are on the screen, and click the button next to #6, it seems to scroll to #5 (i.e. “next after top of screen” logic). I think my expected behavior would be more intuitive and functional, but you’re the designer.
3. It appears that the last button points to the top of the comment thread. Might prefer the first NSLV comment, but there is (of course) a button right there so we are only talking an extra click.
4. The only UI issue I see with putting a button at the bottom right of a comment (especially with the functionality in #2) is that it breaks focus when reading. This might be because I’m used to scrolling through threads with a keypress, but I find myself pulled away from text to find the button I need to click when jumping to the next group of NSLV comments. I’m not sure what the solution is (other than parallel shortcut keys),Report
Thanks for the feedback, and please don’t apologize for taking an interest: You’re the only one who has.
1. Are you able to provide a screenshot? Also, what browser/os?
2. Again, knowing browser/OS combo would be helpful, also if you view the threads at some unusual magnification level. In general, clicking the button should take you to the comment with the next one. With long comments or in other ways oddly vertically situated comments, it might take you a second click, or an extra scroll, to get to the clicker.
I haven’t noticed the behavior you found about being on 3, and going to 1 or 2. If you could point me in addition the specific thread where you encountered that sequence, that might also be helpful.
3. I found from my own experience that going to the top of the comment thread to resume the cycle was more convenient, since at that point I might very well want to show only new or refresh as start the cycle again with the first new comment.
4. Noted. But I think you’re right about your being used to having a keypress alternative.Report
2: normal magnification (Windows/Chrome) Was playing around with buttons in this thread. Maybe it’s an interplay issue with your comment snaking, as I happened to be looking at reverse-nested comments at the time I wrote that, but if I have the screen centered on North’s “I’m gonna check it out!” with the comment from Glyph above entirely in-screen (and both unread), clicking the button next to North’s comment scrolls to the top of that comment rather than the next one.
3: fair explanation.
4: I definitely recognize there’s a limit to which your solution should cater to my unusual preferences.Report
on #2, that sounds a little less unexpected/problematic than the earlier description.
If you start with the GTN BUTTON up at the top, then click your way through clicker by clicker, you should ideally bring each comment in succession to the top of the screen, then reach the last one, click, and be returned to the top of the comment section.
If you jump ahead, or start the sequence by clicker rather than by button, then it there might be a slight hitch when the code calculates its target: as an offset from the top. It will end up finding the prior clicker and scrolling to show the associated comment as “next unread.” BUT next click it should continue proceeding down the list, and, only at the last, targetless clicker, scroll back to top.
So, if there are comments 1 through 10, and you have come to a screen showing you 4 and 5, and click 5, the code first finds the 5 clicker as the “next target,” and then should go to 6, as new next target, on next click.
In my use, I found that kind of within “bounds of the expectable,” if you will. But clicking on 4, then 5, then getting stuck in some kind of loop that never got you to 6 and beyond – that I would find disturbing.Report
To be clear: there was never a loop. I would just expect that no matter what my screen is showing clicking “next” at a comment will take me to the NSLV comment after that.
People won’t just click through all the comments (in part for the UI reason I noted above) but will likely scroll through unread chunks until they need the button to jump ahead. It’s strange, under that use condition, to click the button and be jumped back up thread.Report
Next time you run across the problem, please take a very close look at what’s happening that you find confusing. It’s hard enough to state clearly, but I think that wherever you are and whenever you click, unless you’re on the last new comment, you’ll always go down. I figured users would find that sufficiently in bounds (and just keep clicking!), but I agree it’s not toadly optimal.
So, first I’ll replace the character code with image icons,, and then I’ll see if I can jigger the jQuery to make things smoother for out-of-sequence/midthread clickers. It may be simple, or it may require more complicated offset calculation and array counting. Either way, it may facilitate some other more advanced indications (like producing down icons when down-clicking, and an up or recycle icon when you’re on the last new comment in the list – but no promises!).
Thanks as ever for getting down into the details on this.Report
You know one thing I forgot to ask: I’ve already replaced the arrows character in the top button with an image icon version, but I wonder if it was showing for you while the side-clicker wasn’t.
Will get to the side-clicker shortly. EDIT Er – later…Report
Arrows now displaying correctly.
The time it goes up is when I’ve read a few comments on the screen and clicked the button next to the last of ’em. Makes the screen scroll backwards/up every time on my setup.Report
The clickable buttons are showing a thin rectangle instead of an arrow. Maybe an invalid character reference?
It renders properly on my screen. This does raise the philosophical question as to what makes an invalid character reference. The character code is a valid Unicode glyph; OTOH, lots of fonts fail to define the arrow glyphs. This is part of why I’ve made the Noto fonts my default — Google has committed to defining every glyph at least up through Unicode 6.2 for them. The other reason is that with some spacing tweaks, the Noto Serif font is quite attractive.Report
I’d – obviously wrongly! – expected virtually all browsers to handle the character correctly. I may just use an image (or two) instead, though I’ve tried applying a very generic serifed font stack specifically for the clicker arrow (both top and side), as an experiment just to see whether it fixes the problem for nevermoor for now.Report
Now I have a square empty box instead of a thin one. (Windows/Chrome)
It’s trying to render the glyph in Georgia. (font-family: Georgia, Times, ‘Times New Roman’, serif;)Report
Odd – have no idea why it would be I think I’ll just replace it with image icons. On Windows 7/Chrome, I’ve had no problem either way, nor on Android. Have you tried a cache flush? Seems this wasn’t a problem for you when we were discussing the earlier versions on the Developing blog?Report
True, it wasn’t a problem there. Just did a hard reload and commenting to get an NSLV.Report
Not fixed.Report
Switched to decimal from hexadecimal code just on off chance it works for you. Decimal is, in my observation, more common in HTML. Had only used hex because in an early draft it was part of a CSS “content” statement, and for those you use escaped hex. One difference that only the obsessively observant would notice is that this is a different double arrow character than the one I was using on Developing: It’s down then up, rather than up than down, though the difference in the code was only an F rather than a C.Report
Nope.Report
I’ve seen versions of fonts that include one glyph but not the other. To some extent, fonts can be the kind of DLL hell that some of us used to suffer through — no version numbers, upgrades break as much as they fix, etc. This is the kind of problem that has led to abominations like Font Awesome.Report
Will teach me to distrust the code for the also-ran characters anyway, though I still lack a good guess why my Chrome is getting what nevermoor’s Chrome isn’t, and why it worked OK for him on Developing…, but not hereabouts. If it’s not a problem 100% unique to this site, it’s worth encountering the exception early rather than late.Report
Yep. Color me mystified too. Image is the right solution, though, especially if you see this as a shareable WP plugin (which you should, it’s great work!)Report
Need another new comment to look at something.Report
Can we have the Greek Alphabet? Or is that crazy talk?Report
All things are possible in this best of all possible worlds, Jaybird.
I’ve just added CSS support for Greek. So, if you can type Greek characters, you would wrap them in a span tag, like so (experiment #1):
??? ???? ????? ??????? ??. ?? ??? ???? ???????, ?? ??? ?????? ?????????, ??? ?? ??????? ????????. ?? ??? ????? ????????, ??? ?????? ??????? ??. ?? ??? ?????? ??????? ????????. ??? ???? ?????? ??. ?? ??? ????? ?????, ?? ??????? ???????? ???????? ???, ??? ?? ????? ????????.
hmmm… still working on it – didn’t turn out to be as simple as indicated.Report
????? ???? ?’ ?????Report
Ehhh, that’s still Greek to me.Report
You must be a beta then.Report
Iota find that insulting, and not too long ago I would’ve. But you’re right: I got beta.Report
Good work. Here’s a High Phi for you.Report
Thank mu!Report
Nu problem.Report
You call that a high phi? This is a high phi: Φ!Report
Well, that wasn’t very high at all, was it?Report
Aargh – seems to be a verkakte main site problem – Am Greeking away like a hossifier over on the sub-blog: https://ordinary-times.com/developing/2015/09/cookie-assortment/#comment-397
Since it adds a tad to site overhead to load the Greek font, plus I’d have to fix this here site some, if it’s only a one time or very occasional short statement, you could carve it out as though in virtual stone using HTML characters: https://codex.wordpress.org/Help:Editing#Greek_characters
I’m so glad I’m a β: γs are so stupid, and αs have to much responsibility!
Alternatively, you could cook up the Greek somewhere else, then screen-capture it.
If, however, we’re going to be reading Xenophon in the original – excuse me, gentlepeople – RE-reading Xenophon in the original, then maybe we can create support here for it.Report
dagnabbitReport
Your problem’s not on the font side. It’s on the input side. The input plugin is converting all non-Latin characters to question marks. I saved this page as a local HTML file, edited the source to change the question marks in your comment to Greek and Asian characters, then loaded it in my browser, and they displayed just fine. If you can get the input plugin to stop eating non-Latin characters, everything should be fine. I’m guessing that there’s a simple setting to do this.Report
@ck-macleod Not sure if this is the issue, but it may be that your SQL tables use a Latin character set, in which case the solution (or at least one part of it) might be to change the collation.Report
Didn’t want to start futzing with the database directly on a live site – especially changing the collation on a site with archives as large as this one – not when there are preferred ways to handle the issue, and there are warnings about unexpected results and the amount of time it may take to perform a conversion.
I’ll do some experimenting in the development environment version of the site later.
As I noted above, if we REALLY had an interest in doing lotso Greek, we could load fonts with the appropriate character sets (they come in different flavors for classical vs modern Greek, for instance). I’m not sure what you had in mind in the previous comment by “input plugin.” There is a WordPress setting for the language of your site, but there’s no built-in WP setting for making your English language site add Greek in a way that will render as Greek on browsers generally – and limited information on the subject beyond what I’ve already referred to.Report
Also, high φ.
Psych! (or rather ????)Report
Can I do that too?
Edit: Guess not.Report
Fair enough, although I wouldn’t expect it to take that long. The vast majority of characters on this site are ASCII, and ASCII characters have exactly the same encoding in Latin and UTF-8 encodings.
Is that what you did to get Greek characters working on the test blog? I saw that they actually appeared in the source, so I guess that means they’re in the database?
I’m not sure what you had in mind in the previous comment by “input plugin.”
Nothing, really. I don’t know much about WordPress, so I assumed there was some plugin that handled comment submission.Report
Well, what appears in the source is not necessarily what appears in the db, but in this case I think it is, and I think (will check!) that all of the stuff converted to question marks above is also whatever it was before being questionmarkified.
As for WP, there’re lots of things that go into producing this wonderful comment thread. “Plugin” usually refers to an application or set of functions or whatever you want to call it that can be optionally added to the “Core.”
As for high phi’s – here’s some inline versions.
φ.
φ.
φ.
φ.
http://www.w3schools.com/cssref/playit.asp?filename=playcss_vertical-align&preval=superReport
I know how to do the superscript, but when I try to add style to a span tag, it gets taken out, probably because allowing commenters to add arbitrary style directives could mess stuff up pretty badly. There’s an HTML sup tag, but I’m not sure if that’s allowed: testing.
Edit: Nope. Gets eaten up.Report
Oops, you’re right. There are a limited number of “allowed tags” for non-registered users, by default, and, yes, it is considered sitewise unhygienic to be letting just anyone use ’em in an open text area – so, if they’re not specifically white-listed, like the ones applied by the comment-formatting buttons, they get stripped out.Report
Ahem – the kindly developer of Simple Comment Editing made a change, on request, and I’m uh trying it out here.Report
hmm… looking like a nopeReport
sce fixed?
EDIT: Absitively – should be a little less obtrusive this way.Report
ach – but have a display problem all the same.Report
I know there are others, but this is another example of how the new commenting features have changed how conversation happens. Burt is the post author. But most of the comments are responses or responses to responses to the first comment by Damon. https://ordinary-times.com/blog/2015/09/16/idiocy-week-one/Report
Thanks for that. I’m still looking forward to the day that we get a comment thread in multiple snakeback mode: I’ve seen several reach from snake-left (pink) to snake-right (blue), but none yet from s-l to s-r and s-l again, much less full-on multiple sl’s and sr’s. Having a breakpoint (formerly max-depth) at 10 makes that harder to achieve, but I think we have it in us.Report