Updated: June 29th 2023

Hello folks,

Like many of the other people that have been around lately, I'm new to Tildes, I've been browsing it without an account since last Monday or so while waiting for an email response (thanks @Deimos), and in that time I've been working on a little tool to add some QOL features I thought would make my experiences with the site feel better.

I didn't plan on sharing it initially, because I didn't think I'd be able to get the javascript into a usable state, and I'm not fond of sharing my code in general, as I always get a big wave of impostor syndrome whenever I do, "What if they look at my messy code and see how silly I do some things", that sort of thing. But with Tildes I want to try to correct some of my internet behaviours, for years I've generally stayed as a lurker, never commenting or sharing content of my own, so, hello there, hopefully, I stick to my guns and you see more of me.

Onto the script itself, currently, I've built five main features into it all of them being rather minor on their own, I did do bug testing on everything and couldn't find anything else, but if you notice anything please feel free to report it to me or post an issue on the repo. It's easy to miss bugs when you've only got one set of eyes.

Tildezy Github

The GitHub contains installation instructions if you've never used a userscript before, and contains some images showing off each feature described below.

Hopefully, someone gets some use out of this with me, I look forward to chatting with you all.

EDIT
Refactored the code and added a new comment traveller feature based on some of the comments below.

EDIT 2
Up to 1.3.0, we've got markdown buttons now, see comment explaining the change or check out the github readme

Just a hack job, but I'd seen some comment about it being inconvenient to ignore posts so I made a quick userscript (tested with Tampermonkey on Firefox) that adds hotkeys for bookmarking/ignoring/voting on a post. It can also navigate to the link or comments or prev/next pages (←/→). Only implemented for posts 1-9 at the moment.

Ex:

i+2 ignores and hides the 2nd post (or restores, if ignored)

? shows a summary of hotkeys

// ==UserScript==
// @name         Tildes
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Quickie convenience hotkeys for tildes.net
// @author       TT
// @match        *://tildes.net/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=tildes.net
// @grant        none
// @require      https://unpkg.com/hotkeys-js/dist/hotkeys.min.js
// ==/UserScript==
(function () {
    "use strict";
    let Action;
    (function (Action) {
        Action[Action["Invalid"] = 0] = "Invalid";
        Action[Action["Bookmark"] = 1] = "Bookmark";
        Action[Action["Comments"] = 2] = "Comments";
        Action[Action["Ignore"] = 3] = "Ignore";
        Action[Action["Open"] = 4] = "Open";
        Action[Action["Vote"] = 5] = "Vote";
    })(Action || (Action = {}));
    const regex = /tildes\.net(\/~(?<group>\w+))?/gi;
    let match = regex.exec(document.location);
    //In a group if I wanted to support hotkeys there?
    if (match.groups.group) {
        //alert(match.groups.group);
    }
    else {
        addArticleNumbers();
        addMainHotkeys();
    }
    //Route
    function routeAction(action, event, handler) {
        event.preventDefault();
        //Grab index.  Zero-index?
        let indexText = handler.key.substring(2);
        let index = parseInt(indexText) - 1;
        if (isNaN(index))
            return;
        actOnArticle(action, index);
    }
    function actOnArticle(action, index) {
        //Get article for index
        let article = document.querySelector(".topic-listing").children[index].children[0];
        //Do the thing
        switch (action) {
            case Action.Bookmark:
                if (article.style.borderStyle === 'solid')
                    article.style.borderStyle = 'none';
                else
                    article.style.borderStyle = 'solid';
                article.querySelector('button[data-ic-put-to$="bookmark"]').click();
                break;
            case Action.Comments:
                article.querySelector(".topic-info-comments a").click();
                break;
            case Action.Ignore:
                //Hide vs blank?
                if (article.style.visibility === "hidden")
                    article.style.visibility = "visible";
                else
                    article.style.visibility = "hidden";
                // article.style.display = 'none';
                article.querySelector('button[data-ic-put-to$="ignore"]').click();
                break;
            case Action.Open:
                article.querySelector(".topic-title a").click();
                break;
            case Action.Vote:
                article.querySelector(".topic-voting").click();
                break;
        }
    }
    function addArticleNumbers() {
        let titles = Array.from(document.querySelectorAll(".topic-title a"));
        for (let i = 1; i <= titles.length; i++) {
            let title = titles[i - 1];
            title.text = i + " - " + title.text;
        }
    }
    function addMainHotkeys() {
        //Set up handlers
        const handleBookmark = (event, handler) => routeAction(Action.Bookmark, event, handler);
        const handleComments = (event, handler) => routeAction(Action.Comments, event, handler);
        const handleIgnore = (event, handler) => routeAction(Action.Ignore, event, handler);
        const handleOpen = (event, handler) => routeAction(Action.Open, event, handler);
        const handleVote = (event, handler) => routeAction(Action.Vote, event, handler);
        hotkeys("shift+/", (e, h) => alert(getHelpText()));
        //Page nav
        hotkeys("left", (e, h) => Array.from(document.querySelectorAll(".pagination a")).find((e) => e.textContent == "Prev").click());
        hotkeys("right", (e, h) => Array.from(document.querySelectorAll(".pagination a")).find((e) => e.textContent == "Next").click());
        for (let i = 1; i <= 9; i++) {
            hotkeys("b+" + i, handleBookmark);
            hotkeys("c+" + i, handleComments);
            hotkeys("i+" + i, handleIgnore);
            hotkeys("o+" + i, handleOpen);
            hotkeys("v+" + i, handleVote);
        }
    }
    function getHelpText() {
        return `
    ←/→ = navigation
    b = Bookmark, i = Ignore, v = Vote,
    c = Open comments, o = Open link,

    Action+[1-9] calls that action on the corresponding article`;
    }
})();

I joined Tildes a couple of days ago, and I'm absolutely loving the interface and community.

In the last few days of using Tildes, I noticed a particular problem that was mildly annoying; if you have the "Collapse old comments when I return to a topic" setting on, and you click on a link that is supposed to lead to a comment in a topic you have already visited, it won't jump to that comment.

Searching around, I found a post about it from a day ago, in which long-time users have mentioned that it's been a known problem for a while now. In those comments, someone mentioned permalinks as a solution, but it appears that's still in the works.

For now, I've made a quick userscript that will address this issue (and adds some slight related functionality). It hasn't been thoroughly tested yet, so if any issues occur, please let me know. This userscript is designed to be used with Tampermonkey (a privacy-friendly alternate that should work is ViolentMonkey), which is available in all popular desktop browsers. Installation instructions for Tampermonkey are available on their site (it's installed like any other extension).

To install the script, you can head to this GitHub Gist which contains the code (click "Raw" to open the TamperMonkey install prompt), or you can copy and paste the code from the following dropdown block into a "New script" on the TamperMonkey dashboard. The dropdown is not guaranteed to contain the latest version.

// ==UserScript==
// @name         Tildes Comment Link Fix
// @namespace    https://gist.github.com/blankdvth/6da89fff580e8cf6e50f88847ddb5729
// @version      1.2.0
// @description  Fixes comment links (anchors) not working as a result of Tildes' comment collapsing feature.
// @author       blank_dvth
// @match        https://tildes.net/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=tildes.net
// @grant        none
// ==/UserScript==

/* 
    USER SETTINGS
    This script is not big enough to warrant a visual settings menu, so adjust settings here.
    true = enable, false = disable
*/
const alwaysRun_S = false; // If enabled, will always run the script, even if the comment was not collapsed (site works fine in this case). This is useful if you want to make use of the other settings.
const smoothScroll_S = false; // If enabled, will smoothly (animated) scroll to the comment. If disabled, will jump to the comment.
const uncollapseIndividual_S = true; // If enabled will uncollapse parent comments into one line instead of fully uncollapsing them.
const uncollapseChildren_S = true; // If enabled, will uncollapse all children of the comment. If disabled, will leave them collapsed.
const collapseIrrelevant_S = true; // The script uncollapses all parents to ensure the comment is visible. This will collapse irrelevant (not direct parent) comments again.
// END OF USER SETTINGS

/**
 * Uncollapses the comment if it is collapsed.
 * @param {HTMLElement} element Article element of the actual comment
 * @param {boolean} individual If true, will "uncollapse" into one line instead of fully uncollapsing
 * @returns {boolean} True if the comment was collapsed, false if it was not
 */
function uncollapse(element, individual = false) {
    if (element.nodeName !== "ARTICLE") return false;
    var removed = false;
    if (
        !individual &&
        element.classList.contains("is-comment-collapsed-individual")
    ) {
        element.classList.remove("is-comment-collapsed-individual");
        removed = true;
    }
    if (element.classList.contains("is-comment-collapsed")) {
        if (individual)
            element.classList.add("is-comment-collapsed-individual");
        element.classList.remove("is-comment-collapsed");
        removed = true;
    }
    return removed;
}

/**
 * Uncollapses all direct parents of the comment.
 * @param {HTMLElement} element Article element of the actual comment
 * @param {boolean} collapseIrrelevant If true, will collapse irrelevant comments again
 * @param {boolean} individual If true, will "uncollapse" into one line instead of fully uncollapsing
 * @returns {boolean} True if any parent was collapsed, false if none were
 */
function uncollapseParents(element, collapseIrrelevant, individual) {
    const relevant = []; // List of relevant elements (direct parents)
    var wasCollapsed = false; // Whether any parent was collapsed
    while (
        element.parentElement &&
        element.parentElement.nodeName !== "SECTION"
    ) {
        element = element.parentElement;
        relevant.push(element); // Add parent to relevant list
        if (uncollapse(element, individual)) wasCollapsed = true;
        // Collapse all irrelevant sibling comments (if feature enabled)
        if (collapseIrrelevant && element.nodeName === "ARTICLE") {
            element
                .querySelectorAll(
                    `article#${element.id} > ol.comment-tree > li.comment-tree-item > article:not(.is-comment-collapsed)`
                )
                .forEach((child) => {
                    if (!relevant.includes(child))
                        child.classList.add("is-comment-collapsed");
                });
        }
    }
    return wasCollapsed;
}

/**
 * Uncollapses all direct children of the comment.
 * @param {HTMLElement} element Article element of the actual comment
 */
function uncollapseChildren(element) {
    element
        .querySelectorAll("article.is-comment-collapsed article.is-comment-collapsed-individual")
        .forEach(uncollapse);
}

(function () {
    if (!location.hash.startsWith("#comment-")) return; // Not a comment hash
    const comment = document.getElementById(location.hash.substring(1)); // Get comment element
    if (!comment) return; // Comment does not exist
    // Uncollapse the comment itself, and it's parents, then perform other actions if needed/enabled
    if (
        uncollapse(comment) |
            uncollapseParents(
                comment,
                collapseIrrelevant_S,
                uncollapseIndividual_S
            ) ||
        alwaysRun_S
    ) {
        // Uncollapse all children (if feature enabled)
        if (uncollapseChildren_S) uncollapseChildren(comment);
        // Scroll to the comment
        if (smoothScroll_S) comment.scrollIntoView({ behavior: "smooth" });
        else comment.scrollIntoView();
    }
})();

It is was a tedious task to mention users: copy, type, paste. This script makes it a single step: drag and drop any username on to the comment you're composing, and tada! It's there.

Here is the script:

// ==UserScript==
// @name     tildesDragNDropUsernameForMention
// @version  1
// @grant    none
// @namespace   tildes.net
// ==/UserScript==

var userLinks = document.querySelectorAll('a.link-user');

var dragstartHandler = function (event) {
  var text = event.target.innerText;
  if(!text.startsWith('@')){
    text = "@" + text;
  }
  event.dataTransfer.setData("text", text);
  event.dataTransfer.dropEffect = 'copy';
}

userLinks.forEach(function (each) {
  each.setAttribute('draggable', true);
  each.ondragstart = dragstartHandler;
});

Patches welcome!

Edit: remove useless code

For those who want to prolong the experiment, here is a userscript to help:

// ==UserScript==
// @name     tildes
// @version  2
// @grant    none
// @namespace   tildes.net
// @include     https://tildes.net/*
// ==/UserScript==

document.querySelectorAll('.is-comment-mine .comment-votes').forEach((v) => v.parentNode.removeChild(v));

['.btn-post-action[name="vote"]', '.btn-post-action[name="unvote"]'].forEach((sel) =>
  document.querySelectorAll(sel).forEach((b) => b.innerText = b.innerText.replace(/ \(.*/, '')));

I am fairly sure that this syntax requires ES6, so if your browser is not compatible, you need to reimplement this using ES5. Should be straightforward but a bit more verbose.

So, after a rather clunky script to open comment's link in a new tab with the left click, I got inspired by the idea of @kalebo and wrote also a script to quickly jump to new comments in a topic.

I thought about writing a dedicated script but felt like it was going to become overly complicated for a user to import different script.

• The script itself is here: https://gist.github.com/theCrius/04dc86bea0ed0f1cbec7e57f1aaff9aa
• I wrote it with tampermonkey in mind: http://tampermonkey.net/
  Please read further as tampermonkey has issues with custom styles.
• And here is a simple tutorial on how to load script in tampermonkey: https://imgur.com/a/pY51wn2

These script are all meant to give the community some QoL while lightening the pressure on @deimos so he can work without too much stress from all the requests. As soon as the feature are implemented you should get rid of those script that in some parts felt like bad hacks to me that I was writing it.

I know the button to scroll to new messages is in a quite bad position (top center of your browser page) but I couldn't bear to deal with tampermonkey issue and its GM_AddStyle meta not working properly so I had to use the basic CSS provided by spectre already loaded in tildes.net.

If someone knows how to figure out that goddamn meta, let me know.

========= UPDATE ============

Edit: So apparently tampermonkey has issues with styles that are not yet fixed and firefox has some issue in general with script that inject stuff in the page (understandably).

For tampermonkey the solution is simple. Use violentmonkey instead. you can just copy the script and it will work.

For Firefox it's a little more dirty unfortunately but I cannot find other solutions. You need to open the internal URL about:config. Then search security.csp.enable and double click to disable it. After this the script will work.
Firefox has a very strict policy and the only real solution would be to write an extension and I don't think it's worth the effort in the current state of development.
For full description of what that policy does, check the official doc from mozilla: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP#Threats

I suggested already to have a setting in the profile to allow the user to decide if links should open in new tab so you won't lose the content you were being on this website. In the meanwhile I made a very simple script that does that for you using tampermonkey.

The script: https://gist.github.com/theCrius/04dc86bea0ed0f1cbec7e57f1aaff9aa

Tampermonkey: http://tampermonkey.net/ (available for all browsers)

A quick tutorial on how to do it, step by step with images: https://imgur.com/a/pY51wn2

Edit: Updated to open only link in comments in new tab. The rest of the navigation will load in the same tab by default.