

Discover more from Dub Nation HQ
Experiment: Hacking Better Comments
This is an experimental workaround using bookmarklets. Don't sue me.

Eventually, Substack is going to give us better comment powers.
Until then, I was inspired by jaxfor3’s idea to use a bookmark to supercharge comments.
Installation
Chrome
Copy the code below.
View > Always Show Bookmarks Bar.
You now see the Bookmarks Bar under the url. Control-click on it for a menu, pick Add Page…
Paste code in “URL”. Type in name you choose (I have “SC”). Save.
Mac Safari
Copy the code below.
View > Show Favorites Bar.
Easiest to overwrite an old Bookmark. Control-click on old Bookmark > Edit Address… Then paste in code. Control-click on Bookmark > Rename. Your choice of name, I call it “SC’.
If no Bookmarks to re-use, Bookmarks > Add Bookmark…
iPhone and iPad
I’m not sure how to do it directly, but I have my bookmarks synced across my Apple devices and it synced from my Mac.
Show bookmarks in Safari > Favorites, and it works.
Here is a quick tutorial on bookmarklets for further help.
Usage
Navigate to the comments of an article (I click on the little speech icon, you can also click on Load more comments at the end), then click on the bookmark. If the page unformats, click it again.
SuperComments v6
This bookmarklet hits a number of comment power requests.
colors recommended (3 or more likes) comments
colors unread comments
sorts most recent comments to the bottom (replies don’t change order)
comment entry now at bottom
image URLs get image embedded after
YouTube URLs get video embedded after
same color scheme as GSOM
shows unread count in comment counters (you can use this on the front page to see which posts have unread comments) (v6)
floating menu at bottom for Next Unread & Mark All Read, like GSOM (v6)
Same keyboard shortcuts as GSOM
C - Next Comment
X - Mark as Read
Shift + C - Previous Comment
Shift + A - Mark All Read
Z - Mark Read & Next
N - Mark Read & Go to Next Unread (LGW only)
Shift-N - Mark Read & Go to Previous Unread (LGW only) (v6)
Issues
Unread counts are kept per specific browser (in a cookie), not at the site
If you reload the page, all effects will be gone, for better or worse.
Substack sometimes reloads comments, so you have to run this again
Cookies fill up on some browsers… working to shrink the cookie storage.
Future Directions
Add Twitter embed — tricky because of Cross-Origin Resource Security policies.
Turn into a Chrome/Safari extension so don’t have to manually run it.
Merge in jaxfor3’s work on comment previews.
Pictures of SC in action
This shows the unread and recommended comments colors, with simple embeds for YouTube and IMG links.

This is what the unread counter looks like (it’s next to the comment count icon).

The Code
javascript:(function()%7BLIKE_HOT%20%3D%203%3BLIKE_HOT_COLOR%20%3D%20%22%23D4F5B8%22%3BUNREAD_COLOR%20%3D%20%22%23FFFAB4%22%3BRERUN_SECONDS%20%3D%2060%3Bvar%20functionsToRun%20%3D%20function()%20%7BcolorHotComments()%3BsortByDate()%3BrerunOnLoadMore()%3BcommentEntryToBottom()%3BsweetenEachComment(%5BembedMedia%5D)%3BclickCollapsedReplies()%3BinitilalizeOnce()%3BformatPage()%3B%7D%3Bvar%20closest%20%3D%20function(el%2C%20fn)%20%7Breturn%20el%20%26%26%20(fn(el)%20%3F%20el%20%3A%20closest(el.parentNode%2C%20fn))%3B%7D%3Bvar%20colorHotComments%20%3D%20function()%20%7Bvar%20likes%20%3D%20document.querySelectorAll(%22.comment-actions%22)%3Blikes.forEach(function(like)%20%7Bvar%20likeCount%20%3D%20like.innerText.match(%2F%5Cd%2B%2F)%3Bif%20(likeCount)%20%7BlikeCount%20%3D%20parseInt(likeCount%5B0%5D)%3Bif%20(likeCount%20%3E%3D%20LIKE_HOT)%20%7Bvar%20t%20%3D%20closest(like%2C%20function(el)%20%7Breturn%20el.tagName%20%3D%3D%3D%20%22TABLE%22%7D)%3Bt.style.padding%20%3D%20%2210px%22%3Bt.style.backgroundColor%20%3D%20LIKE_HOT_COLOR%3B%7D%7D%7D)%3B%7D%3Bvar%20sortByDate%20%3D%20function()%20%7Bvar%20parents%20%3D%20document.querySelectorAll(%22.comment-list-items%22)%3Bparents.forEach(function(list)%20%7Bvar%20comms%20%3D%20list.children%3Bcomms%20%3D%20Array.prototype.slice.call(comms)%3Bvar%20commsSorted%20%3D%20comms.sort(function(a%2C%20b)%20%7Bvar%20ida%20%3D%20a.querySelector(%22DIV%22).id.match(%2F%5Cd%2B%2F)%3Bif%20(ida)%20%7Bida%20%3D%20parseInt(ida%5B0%5D)%7D%3Bvar%20idb%20%3D%20b.querySelector(%22DIV%22).id.match(%2F%5Cd%2B%2F)%3Bif%20(idb)%20%7Bidb%20%3D%20parseInt(idb%5B0%5D)%7D%3Breturn%20idb%20-%20ida%3B%7D)%3BcommsSorted.forEach(function(c)%20%7Blist.insertBefore(c%2C%20list.firstChild)%3B%7D)%3B%7D)%3B%7D%3Bvar%20commentEntryToBottom%20%3D%20function%20()%20%7Bvar%20input%20%3D%20document.querySelectorAll(%22.comment-input-wrap%22)%3Binput.forEach(function%20(inp)%20%7Binp.parentNode.insertAdjacentElement('beforeend'%2Cinp)%3B%7D)%7D%3Bvar%20rerunOnLoadMore%20%3D%20function%20()%20%7Bdocument.querySelectorAll(%22.collapsed-reply%2C.more-comments%20%2C.more-replies%22).forEach(function(button)%20%7Bbutton.addEventListener(%22click%22%2C%20function()%20%7BsetTimeout(reformatPage%2C%201000)%3B%7D)%3B%7D)%3B%7D%3Bvar%20sweetenEachComment%20%3D%20function%20(callbacks)%20%7Bdocument.querySelectorAll(%22.comment-body%22).forEach(function(com)%20%7Bcom.querySelectorAll(%22SPAN%22).forEach(function(sp)%20%7Bif%20(!sp.classList.contains(%22sweetened%22))%20%7Bcallbacks.forEach(function%20(cb)%20%7Bcb(sp)%3B%7D)%3Bsp.className%20%2B%3D%20%22%20sweetened%22%3B%7D%7D)%3B%7D)%3B%7D%3Bvar%20embedMedia%20%3D%20function%20(sp)%20%7Bsp.querySelectorAll(%22.linkified%22).forEach(function(autolink)%20%7Bvar%20url%20%3D%20autolink.href%3Bif%20(url.match(%2F%5C.(gif%7Cjpg%7Cjpeg%7Cpng)%2F))%20%7Bvar%20elem%20%3D%20document.createElement(%22img%22)%3Belem.setAttribute(%22src%22%2C%20url)%3Belem.setAttribute(%22width%22%2C%20%22100%25%22)%3Bautolink.insertAdjacentElement(%22afterend%22%2Celem)%3B%7D%3Bvar%20ytCode%3Bvar%20ytSearch%20%3D%20url.match(%2F%5C%2F%5C%2F(youtu.be)%5C%2F(%5Cw%2B)%2F)%3Bif%20(ytSearch%20%26%26%20ytSearch%5B2%5D)%20%7BytCode%20%3D%20ytSearch%5B2%5D%7D%3Bif%20(url.match(%2F%5C%2F%5C%2F(www.)%3F(youtube%5C.com)%5C%2F(%5Cw%2B)%2F))%20%7BytSearch%20%3D%20url.match(%2Fv%3D(%5Cw%2B)%2F)%3Bif%20(ytSearch)%20%7BytCode%20%3D%20ytSearch%5B1%5D%3B%7D%7D%3Bif%20(typeof%20ytCode%20!%3D%3D%20%22undefined%22)%20%7Bvar%20ifrm%20%3D%20document.createElement(%22iframe%22)%3Bifrm.setAttribute(%22src%22%2C%20%22https%3A%2F%2Fwww.youtube.com%2Fembed%2F%22%20%2B%20ytCode)%3Bifrm.style.width%20%3D%20%22640px%22%3Bifrm.style.height%20%3D%20%22360px%22%3Bautolink.insertAdjacentElement(%22afterend%22%2Cifrm)%3B%7D%3B%7D)%3Breturn%3B%7D%3B%2F*!%20js-cookie%20v3.0.0-beta.3%20%7C%20MIT%20*%2F!function(e%2Ct)%7B%22object%22%3D%3Dtypeof%20exports%26%26%22undefined%22!%3Dtypeof%20module%3Fmodule.exports%3Dt()%3A%22function%22%3D%3Dtypeof%20define%26%26define.amd%3Fdefine(t)%3A(e%3De%7C%7Cself%2Cfunction()%7Bvar%20n%3De.Cookies%2Cr%3De.Cookies%3Dt()%3Br.noConflict%3Dfunction()%7Breturn%20e.Cookies%3Dn%2Cr%7D%7D())%7D(this%2Cfunction()%7B%22use%20strict%22%3Bvar%20e%3D%7Bread%3Afunction(e)%7Breturn%20e.replace(%2F(%25%5B%5CdA-F%5D%7B2%7D)%2B%2Fgi%2CdecodeURIComponent)%7D%2Cwrite%3Afunction(e)%7Breturn%20encodeURIComponent(e).replace(%2F%25(2%5B346BF%5D%7C3%5BAC-F%5D%7C40%7C5%5BBDE%5D%7C60%7C7%5BBCD%5D)%2Fg%2CdecodeURIComponent)%7D%7D%3Bfunction%20t(e)%7Bfor(var%20t%3D1%3Bt%3Carguments.length%3Bt%2B%2B)%7Bvar%20n%3Darguments%5Bt%5D%3Bfor(var%20r%20in%20n)e%5Br%5D%3Dn%5Br%5D%7Dreturn%20e%7Dreturn%20function%20n(r%2Co)%7Bfunction%20i(e%2Cn%2Ci)%7Bif(%22undefined%22!%3Dtypeof%20document)%7B%22number%22%3D%3Dtypeof(i%3Dt(%7B%7D%2Co%2Ci)).expires%26%26(i.expires%3Dnew%20Date(Date.now()%2B864e5*i.expires))%2Ci.expires%26%26(i.expires%3Di.expires.toUTCString())%2Cn%3Dr.write(n%2Ce)%2Ce%3DencodeURIComponent(e).replace(%2F%25(2%5B346B%5D%7C5E%7C60%7C7C)%2Fg%2CdecodeURIComponent).replace(%2F%5B()%5D%2Fg%2Cescape)%3Bvar%20c%3D%22%22%3Bfor(var%20u%20in%20i)i%5Bu%5D%26%26(c%2B%3D%22%3B%20%22%2Bu%2C!0!%3D%3Di%5Bu%5D%26%26(c%2B%3D%22%3D%22%2Bi%5Bu%5D.split(%22%3B%22)%5B0%5D))%3Breturn%20document.cookie%3De%2B%22%3D%22%2Bn%2Bc%7D%7Dreturn%20Object.create(%7Bset%3Ai%2Cget%3Afunction(t)%7Bif(%22undefined%22!%3Dtypeof%20document%26%26(!arguments.length%7C%7Ct))%7Bfor(var%20n%3Ddocument.cookie%3Fdocument.cookie.split(%22%3B%20%22)%3A%5B%5D%2Co%3D%7B%7D%2Ci%3D0%3Bi%3Cn.length%3Bi%2B%2B)%7Bvar%20c%3Dn%5Bi%5D.split(%22%3D%22)%2Cu%3Dc.slice(1).join(%22%3D%22)%3B'%22'%3D%3D%3Du%5B0%5D%26%26(u%3Du.slice(1%2C-1))%3Btry%7Bvar%20f%3De.read(c%5B0%5D)%3Bif(o%5Bf%5D%3Dr.read(u%2Cf)%2Ct%3D%3D%3Df)break%7Dcatch(e)%7B%7D%7Dreturn%20t%3Fo%5Bt%5D%3Ao%7D%7D%2Cremove%3Afunction(e%2Cn)%7Bi(e%2C%22%22%2Ct(%7B%7D%2Cn%2C%7Bexpires%3A-1%7D))%7D%2CwithAttributes%3Afunction(e)%7Breturn%20n(this.converter%2Ct(%7B%7D%2Cthis.attributes%2Ce))%7D%2CwithConverter%3Afunction(e)%7Breturn%20n(t(%7B%7D%2Cthis.converter%2Ce)%2Cthis.attributes)%7D%7D%2C%7Battributes%3A%7Bvalue%3AObject.freeze(o)%7D%2Cconverter%3A%7Bvalue%3AObject.freeze(r)%7D%7D)%7D(e%2C%7Bpath%3A%22%2F%22%7D)%7D)%3Bfunction%20get_all_cookies()%20%7Bvar%20cookies%20%3D%20%7B%20%7D%3Bif%20(document.cookie%20%26%26%20document.cookie%20!%3D%20'')%20%7Bvar%20split%20%3D%20document.cookie.split('%3B')%3Bfor%20(var%20i%20%3D%200%3B%20i%20%3C%20split.length%3B%20i%2B%2B)%20%7Bvar%20name_value%20%3D%20split%5Bi%5D.split(%22%3D%22)%3Bname_value%5B0%5D%20%3D%20name_value%5B0%5D.replace(%2F%5E%20%2F%2C%20'')%3Bcookies%5BdecodeURIComponent(name_value%5B0%5D)%5D%20%3D%20decodeURIComponent(name_value%5B1%5D)%3B%7D%7Dreturn%20cookies%3B%7Dvar%20initilalizeOnce%20%3D%20function%20()%20%7Bif%20(typeof%20INIT_DONE%20%3D%3D%3D%20%22undefined%22)%20%7BREAD_ARTICLES%3D%7B%7D%3Bvar%20cookObj%20%3D%20get_all_cookies()%3Bvar%20cooks%20%3D%20_.each(_.keys(cookObj)%2C%20function%20(cooKey)%20%7Bif%20(cooKey.match(%2F%5Ehttp%2F))%20%7BREAD_ARTICLES%5BcooKey%5D%3DJSON.parse(cookObj%5BcooKey%5D)%3B%7D%7D)%3Bif%20(typeof%20READ_ARTICLES%20%3D%3D%3D%20%22undefined%22)%20%7BREAD_ARTICLES%3D%7B%7D%3B%7D%3Bif%20(typeof%20SELECTED_ARTICLE%20%3D%3D%3D%20'undefined'%20%26%26%20document.querySelector(%22.comment-anchor%22)%20!%3D%3D%20null)%20%7BSELECTED_ARTICLE%20%3D%20document.querySelector(%22.comment-anchor%22).id%3B%7Ddocument.addEventListener('keypress'%2C%20commentNav)%3BINIT_DONE%3D1%3BmakeBottomBar()%3B%7D%7D%3Bvar%20saveReadArticles%20%3D%20function%20()%20%7BCookies.set(cleanURL(document.URL)%2C%20JSON.stringify(READ_ARTICLES%5BcleanURL(document.URL)%5D)%2C%7B%20expires%3A%207%20%7D)%3B%7D%3Bvar%20hashCode%20%3D%20function(str)%20%7Bvar%20hash%20%3D%200%2C%20i%2C%20chr%3Bif%20(str.length%20%3D%3D%3D%200)%20return%20hash%3Bfor%20(i%20%3D%200%3B%20i%20%3C%20str.length%3B%20i%2B%2B)%20%7Bchr%20%20%20%3D%20str.charCodeAt(i)%3Bhash%20%20%3D%20((hash%20%3C%3C%205)%20-%20hash)%20%2B%20chr%3Bhash%20%7C%3D%200%3B%7Dreturn%20hash%3B%7D%3Bvar%20cleanURL%20%3D%20function%20(url)%20%7Breturn%20url.replace(%2F%5C%2Fcomments(%5C%2F)%3F(%23.*)%3F%2F%2C%22%22)%3B%7D%3Bvar%20isRead%20%3D%20function%20(articleId%2C%20url)%20%7Bif%20(typeof%20url%20%3D%3D%3D%20%22undefined%22)%20%7Burl%20%3D%20document.URL%3B%7Dif%20(typeof%20READ_ARTICLES%5BcleanURL(url)%5D%20%3D%3D%3D%20%22undefined%22)%20%7BREAD_ARTICLES%5BcleanURL(url)%5D%3D%7B%7D%3B%7Dreturn%20READ_ARTICLES%5BcleanURL(url)%5D%5BarticleId%5D%3B%7D%3Bvar%20markRead%20%3D%20function%20(articleId%2Curl)%20%7Bif%20(typeof%20url%20%3D%3D%3D%20%22undefined%22)%20%7Burl%20%3D%20document.URL%3B%7Dif%20(typeof%20READ_ARTICLES%5BcleanURL(url)%5D%20%3D%3D%3D%20%22undefined%22)%20%7BREAD_ARTICLES%5BcleanURL(url)%5D%3D%7B%7D%3B%7DREAD_ARTICLES%5BcleanURL(url)%5D%5BarticleId%5D%3D1%3BsaveReadArticles()%3B%7D%3Bvar%20markAllRead%20%3D%20function%20()%20%7Bvar%20comments%20%3D%20document.querySelectorAll(%22.comment-anchor%22)%3Bfor%20(var%20i%20%3D%200%3B%20i%20%3C%20comments.length%3B%20i%2B%2B)%20%7Bif%20(!comments%5Bi%5D.id.match(%2F-reply%2F))%20%7BmarkRead(comments%5Bi%5D.id)%3B%7D%3B%7D%7D%3Bvar%20readCount%20%3D%20function%20(url)%20%7Bif%20(typeof%20url%20%3D%3D%3D%20%22undefined%22)%20%7Burl%20%3D%20document.URL%3B%7Dif%20(typeof%20READ_ARTICLES%5BcleanURL(url)%5D%20%3D%3D%3D%20%22undefined%22)%20%7BREAD_ARTICLES%5BcleanURL(url)%5D%3D%7B%7D%3B%7Dreturn%20Object.keys(READ_ARTICLES%5BcleanURL(url)%5D).length%3B%7D%3Bvar%20formatPage%20%3D%20function%20()%20%7Bdocument.querySelectorAll(%22.comment-anchor%22).forEach(function%20(comm)%20%7Bvar%20commId%20%3D%20comm.id%3Bif%20(!comm.id.match(%2F-reply%2F))%20%7Bt%3Dcomm.parentNode.querySelector(%22table%22)%3Bt.style.padding%20%3D%20%2210px%22%3Bif%20(isRead(comm.id))%20%7Bt.style.backgroundColor%20%3D%20%22%23FFFFFF%22%3B%7D%20else%20%7Bt.style.backgroundColor%20%3D%20UNREAD_COLOR%3B%7D%3Bif%20(SELECTED_ARTICLE%20%3D%3D%3D%20comm.id)%20%7Bt.style.borderLeft%20%3D%20%225px%20solid%20gold%22%3BscrollNicelyIntoView(t)%3B%7D%20else%20%7Bt.style.borderLeft%20%3D%20null%3B%7D%3B%7D%7D)%3BcolorHotComments()%3BdisplayUnreadCount()%3B%7D%3Bvar%20reformatPage%20%3D%20function%20()%20%7BclickCollapsedReplies()%3BsetTimeout(functionsToRun%2C%203000)%3B%7D%3Bvar%20clickCollapsedReplies%20%3D%20function%20()%20%7Bdocument.querySelectorAll(%22.has-new-comments%20%3E%20button%22).forEach(function%20(d)%20%7Bd.click()%3B%7D)%3Bdocument.querySelectorAll(%22.collapsed-reply%22).forEach(function%20(d)%20%7Bd.click()%3B%7D)%3B%7D%3Bvar%20displayUnreadCount%20%3D%20function%20()%20%7Bdocument.querySelectorAll(%22table.post-meta%22).forEach(function%20(t)%20%7Bt.querySelectorAll(%22tr%20%3E%20td.post-meta-item.icon%22).forEach(function%20(icon)%20%7Ba%3Dicon.querySelector(%22a%3Anot(.like-button)%22)%3Bif%20(a)%20%7Bvar%20read%20%3D%20readCount(a.href)%3Ba.innerHTML%20%3D%20a.innerHTML.replace(%2F%20%5C%2F%20%3Cb%3E.*%2F%2C%22%22)%3Bvar%20total%20%3D%20parseInt(a.innerText)%3Bvar%20unread%20%3D%20total%20-%20read%3Bif%20(!isNaN(unread)%20%26%26%20unread)%20%7Ba.innerHTML%20%2B%3D%20%22%20%2F%20%3Cb%3E%22%20%2B%20unread%20%2B%20%22%20unread%3C%2Fb%3E%22%3B%7D%3B%7D%3B%7D)%3B%7D)%3B%7D%3Bvar%20scrollNicelyIntoView%20%3D%20function%20(elt)%20%7Bwindow.scrollBy(%7Btop%3A%20elt.getBoundingClientRect().top%20-%20100%2Cbehavior%3A%20'smooth'%7D)%3B%7D%3Bvar%20findComment%20%3D%20function%20(spec)%20%7Bvar%20selectedIndex%3Bvar%20previousIndex%3D0%3Bvar%20nextIndex%3Bvar%20nextUnreadIndex%3Bvar%20prevUnreadIndex%3Bvar%20firstUnreadIndex%3D0%3Bvar%20lastUnreadIndex%3Bvar%20answerIndex%3Bvar%20comments%20%3D%20document.querySelectorAll(%22.comment-anchor%22)%3Bfor%20(var%20i%20%3D%200%3B%20i%20%3C%20comments.length%3B%20i%2B%2B)%20%7Bif%20(!comments%5Bi%5D.id.match(%2F-reply%2F))%20%7Bif%20(!isRead(comments%5Bi%5D.id)%20%26%26%20!firstUnreadIndex)%20%7BfirstUnreadIndex%20%3D%20i%3B%7D%3Bif%20(!isRead(comments%5Bi%5D.id))%20%7BlastUnreadIndex%20%3D%20i%3B%7Dif%20(typeof%20selectedIndex%20%3D%3D%3D%20%22undefined%22)%20%7Bif%20(%20comments%5Bi%5D.id%20%3D%3D%3D%20SELECTED_ARTICLE)%20%7BselectedIndex%20%3D%20i%3B%7D%20else%20%7BpreviousIndex%20%3D%20i%3Bif%20(!isRead(comments%5Bi%5D.id))%20%7BprevUnreadIndex%20%3D%20i%3B%7D%3B%7D%3B%7D%20else%20%7Bif%20(typeof%20nextIndex%20%3D%3D%3D%20%22undefined%22)%20%7BnextIndex%20%3D%20i%3B%7D%3Bif%20(typeof%20nextUnreadIndex%20%3D%3D%3D%20%22undefined%22)%20%7Bif%20(!isRead(comments%5Bi%5D.id))%20%7BnextUnreadIndex%20%3D%20i%3B%7D%3B%7D%3B%7D%3B%7D%3B%7D%3Bswitch%20(spec)%20%7Bcase%20%22Next%22%3AanswerIndex%20%3D%20nextIndex%20%7C%7C%20selectedIndex%3Bbreak%3Bcase%20%22NextUnread%22%3AanswerIndex%20%3D%20nextUnreadIndex%20%7C%7C%20firstUnreadIndex%20%7C%7C%20selectedIndex%3Bbreak%3Bcase%20%22PrevUnread%22%3AanswerIndex%20%3D%20prevUnreadIndex%20%7C%7C%20lastUnreadIndex%20%7C%7C%20selectedIndex%3Bbreak%3Bcase%20%22Prev%22%3AanswerIndex%20%3D%20previousIndex%3Bbreak%3Bdefault%3AanswerIndex%20%3D%20selectedIndex%3B%7D%3Breturn%20comments%5BanswerIndex%5D.id%3B%7D%3Bvar%20selectPrevUnread%20%3D%20function%20()%20%7BSELECTED_ARTICLE%20%3D%20findComment(%22PrevUnread%22)%3B%7D%3Bvar%20selectNextUnread%20%3D%20function%20()%20%7BSELECTED_ARTICLE%20%3D%20findComment(%22NextUnread%22)%3B%7D%3Bvar%20selectNextComment%20%3D%20function%20()%20%7BSELECTED_ARTICLE%20%3D%20findComment(%22Next%22)%3B%7D%3Bvar%20selectPrevComment%20%3D%20function%20()%20%7BSELECTED_ARTICLE%20%3D%20findComment(%22Prev%22)%3B%7D%3Bvar%20markSelectedRead%20%3D%20function%20()%20%7BmarkRead(SELECTED_ARTICLE)%3B%7D%3Bvar%20replySelected%20%3D%20function%20()%20%7Bvar%20a%20%3D%20document.querySelector(%22%23%22%20%2B%20SELECTED_ARTICLE)%3Bvar%20links%20%3D%20a.parentNode.querySelector(%22table%22).querySelector(%22.comment-actions%22).querySelectorAll(%22a%22)%3Blinks.forEach(function%20(link)%20%7Bif%20(link.innerText%20%3D%3D%3D%20%22Reply%22)%20%7Blink.click()%3B%7D%3B%7D)%3B%7D%3Bvar%20commentNav%20%3D%20function%20(e)%20%7Bvar%20focused%20%3D%20document.activeElement%3Bif%20(focused.type%20%3D%3D%3D%20%22textarea%22)%20%7Bconsole.log(%22in%20textarea%22)%3B%7D%20else%20%7Bconsole.log(e.code)%3Bswitch%20(e.code)%20%7Bcase%20%22KeyC%22%3Aif%20(e.shiftKey)%20%7BselectPrevComment()%7D%20else%20%7BselectNextComment()%3B%7D%3Bbreak%3Bcase%20%22KeyX%22%3AmarkSelectedRead()%3Bbreak%3Bcase%20%22KeyZ%22%3AmarkSelectedRead()%3BselectNextComment()%3Bbreak%3Bcase%20%22KeyN%22%3Aif%20(e.shiftKey)%20%7BmarkSelectedRead()%3BselectPrevUnread()%3B%7D%20else%20%7BmarkSelectedRead()%3BselectNextUnread()%3B%7Dbreak%3Bcase%20%22KeyR%22%3Ae.stopPropagation()%3BreplySelected()%3Bbreak%3Bcase%20%22KeyA%22%3Aif%20(e.shiftKey)%20%7BmarkAllRead()%3B%7D%3Bbreak%3Bdefault%3A%7D%3BformatPage()%3B%7D%3B%7D%3Bvar%20makeBottomBar%20%3D%20function%20()%20%7Bd%3Ddocument.createElement(%22div%22)%3Bd.classList.add(%22footer%22)%3Bd.style%3D%22position%3A%20fixed%3B%20bottom%3A%200%3B%20width%3A%20100%25%3B%20height%3A%2060px%3B%20background%3A%20%23ffeb98%3B%20opacity%3A%2080%25%3B%20border-top%3A%203px%3B%20border-top-color%3A%20%23ffcd00%3B%20border-top-style%3A%20solid%3B%20text-align%3Acenter%22%3Bd.id%3D%22bottomBar%22%3Bb%3Ddocument.createElement(%22button%22)%3Bb.id%3D%22goNextUnread%22%3Bb.classList.add(%22button%22%2C%22primary%22)%3Bb.innerText%3D%22Next%20Unread%22%3Bb.style%3D%22margin%3A%2010px%3B%22%3Bb.addEventListener(%22click%22%2C%20function%20()%20%7BmarkSelectedRead()%3BselectNextUnread()%3BformatPage()%3B%7D)%3Bd.appendChild(b)%3Bc%3Ddocument.createElement(%22button%22)%3Bc.id%3D%22markAllRead%22%3Bc.classList.add(%22button%22%2C%22primary%22)%3Bc.innerText%3D%22Mark%20All%20Read%22%3Bc.style%3D%22margin%3A%2010px%3B%22%3Bc.addEventListener(%22click%22%2C%20function%20()%20%7BmarkAllRead()%3BformatPage()%3B%7D)%3Bd.appendChild(c)%3Bdocument.getElementsByTagName('body')%5B0%5D.appendChild(d)%3B%7D%3BfunctionsToRun()%3BRERUN_PROCESS%20%3D%20setInterval(function%20()%20%7BclearInterval(RERUN_PROCESS)%3BreformatPage()%3B%7D%2C%20RERUN_SECONDS*1000)%7D)()
Problems
If it doesn’t work, ask me politely here and maybe I can improve things. If it’s going haywire, just reload the page and all effects will be gone.
Experiment: Hacking Better Comments
How do you "walk through" comments w/o a keyboard on IPhone? Since there is no "Next Uread" tab embedded and I haven't figured out a way to have virtual keyboard being on always on Android.
Is "The Code" embedded at your article latest and greatest one to try out?