At the suggestion of a certain heathen who shall remain unnamed. I'm tossing up a quick and dirty comment (and post text) formatting guide. There is a formatting guide in the docs/wiki with a link just above the comment box, but it can be a bit much to digest.

*italics*
**bold**
~~strikethrough~~
[Text goes here](URL goes here)
<small>small text</small> 
<sub>subscript</sub>
<sup>superscript</sup>
# headline
`code which removes the formatting and makes it look like this block`
* bulleted
* lists
1. and
1. numbered
1. lists

Spoilers is a bit more complicated, the <details> start and end </details> is required, but the <summary> start and end </summary> is not unless you want text in the summary or you want the summary to be blank.

<details>
<summary>Summary text!</summary>

Body text inside spoiler!
</details>

Three underscores (or dashes, but dashes require an extra line) in a row on their own line creates a blank line to divide a topic...
---

You also have a sub-headline text option by putting a single dash under text...
-
...or headline text by putting an equal sign under text.
=

If you like userscripts (who doesn't?) you can install extensions like ViolentMonkey that allow you to install little bits of code like the Tildes Formatting Toolbar that can change/improve the sites you use and make formatting here a breeze.

Do use the formatting responsibly, but here are examples for bold, italics, strikethrough, links, small text, sub_script, super^script,

headline text,

sub-headline text,

code,

• bulleted
• lists,

1. and
2. numbered
3. lists

Most formatting can be combined as well such as superscripts, lines, and small text to make...

...sentences with a...¹

¹...footnote

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`;
    }
})();

For those who are new to Tildes:
This site has quite a number of wiki pages which are maintained by volunteers (except the ~tildes.official wiki pages, which are the official documentation). Many of these community pages are now out of date, so it's a good time for people to poke around and make some changes.
For more information, including how to gain wiki editing privileges, see the announcement post from 2019.

A bit of advertising:
For those who don't know, I have been maintaining the Customizing Tildes page since 2020. It is the official successor of the Awesome Tildes project and has numerous suggestions for improving the Tildes experience using userscripts, userstyles, and uBlock Origin's filtering capabilities. Feel free to drop a message if there's something that needs to be added to the wiki.

The Actual Problem

Changes to the wiki are no longer syncing with the GitLab repository. The last commit on GitLab is from 2021!

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();
    }
})();

I'd love to get a passable alternative interface to YouTube that just shows me what I'm subscribed to, a search bar, and nothing else. Does this exist as a userscript or alternate site?

Edit:

My current solution is to have my YouTube bookmark go directly to my subscriptions listing. I also have my ad blocker cut out the recommendations feed on the side. It works okay but maybe there's a better solution out there.

This is the ad block rule:

www.youtube.com##.ytd-watch-next-secondary-results-renderer
www.youtube.com##.ytd-guide-entry-renderer[title=Explore]
www.youtube.com##.ytd-guide-entry-renderer[title=Home]

I'm currently developing a minimal userscript manager who's main goal is to be fully auditable by any user in only ten minutes or so - my prototype uses less than 300 lines of javascript, and I'm trying to keep it that way.

To get the codebase this small, however, I have to be very picky with what features I implement - most notably, the code editor has to be very barebones. Are there any features that I'd be shooting myself in the foot by not including?

For example:

• syntax highlighting
• cloud sync
• regex url matching
• fullscreen editor (currently, it's just a browser popup - the intention is that you write code elsewhere and paste it in)

Any feedback is greatly appreciated!

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

A screenshot.

Following is a user script that embeds a thumbnail into the topic header. Was supposed to be trivial, but walking around the CSRP was not that easy. Luckily, someone had written a nice useful custom Base64 encoder, because I spent more than an hour trying to get btoa to do the thing.

// ==UserScript==
// @name     tildesYoutubeThumbs
// @version  1
// @grant    GM.xmlHttpRequest
// @namespace   tildes.net
// @include     https://tildes.net/~*/*
// ==/UserScript==

let youtubeIcon = document.querySelector('div.topic-icon-youtube_com')

if(youtubeIcon !== null) {
  let youtubeLink = youtubeIcon.nextSibling.nextSibling.href;
  let youtubeID = new URL(youtubeLink).searchParams.get('v');
  let thumbnailUrl = "https://img.youtube.com/vi/" + youtubeID + "/0.jpg";

  GM.xmlHttpRequest({
    method: "GET",
    url: thumbnailUrl,
    overrideMimeType: 'text/plain; charset=x-user-defined',
    onload: function(response) {
      if(response.status === 200) {
        let thumbElement = document.createElement('img');
        let thumbParentDiv = document.createElement('div');
        let header = document.querySelector('article.topic-full > header');
        let data = "data:image/jpeg;base64," + customBase64Encode(response.responseText);
        thumbElement.src = data;
        thumbElement.style = 'width: 60%; margin: auto';
        thumbElement.id = 'gk-youtube-thumbnail';
        thumbParentDiv.style = 'width: 100%; text-align:center;';
        header.appendChild(thumbParentDiv);
        thumbParentDiv.appendChild(thumbElement);
      }
    }
  });
}

// https://stackoverflow.com/questions/8778863/downloading-an-image-using-xmlhttprequest-in-a-userscript/8781262#8781262
function customBase64Encode (inputStr) {
    var
        bbLen               = 3,
        enCharLen           = 4,
        inpLen              = inputStr.length,
        inx                 = 0,
        jnx,
        keyStr              = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"
                            + "0123456789+/=",
        output              = "",
        paddingBytes        = 0;
    var
        bytebuffer          = new Array (bbLen),
        encodedCharIndexes  = new Array (enCharLen);

    while (inx < inpLen) {
        for (jnx = 0;  jnx < bbLen;  ++jnx) {
            /*--- Throw away high-order byte, as documented at:
              https://developer.mozilla.org/En/Using_XMLHttpRequest#Handling_binary_data
            */
            if (inx < inpLen)
                bytebuffer[jnx] = inputStr.charCodeAt (inx++) & 0xff;
            else
                bytebuffer[jnx] = 0;
        }

        /*--- Get each encoded character, 6 bits at a time.
            index 0: first  6 bits
            index 1: second 6 bits
                        (2 least significant bits from inputStr byte 1
                         + 4 most significant bits from byte 2)
            index 2: third  6 bits
                        (4 least significant bits from inputStr byte 2
                         + 2 most significant bits from byte 3)
            index 3: forth  6 bits (6 least significant bits from inputStr byte 3)
        */
        encodedCharIndexes[0] = bytebuffer[0] >> 2;
        encodedCharIndexes[1] = ( (bytebuffer[0] & 0x3) << 4)   |  (bytebuffer[1] >> 4);
        encodedCharIndexes[2] = ( (bytebuffer[1] & 0x0f) << 2)  |  (bytebuffer[2] >> 6);
        encodedCharIndexes[3] = bytebuffer[2] & 0x3f;

        //--- Determine whether padding happened, and adjust accordingly.
        paddingBytes          = inx - (inpLen - 1);
        switch (paddingBytes) {
            case 1:
                // Set last character to padding char
                encodedCharIndexes[3] = 64;
                break;
            case 2:
                // Set last 2 characters to padding char
                encodedCharIndexes[3] = 64;
                encodedCharIndexes[2] = 64;
                break;
            default:
                break; // No padding - proceed
        }

        /*--- Now grab each appropriate character out of our keystring,
            based on our index array and append it to the output string.
        */
        for (jnx = 0;  jnx < enCharLen;  ++jnx)
            output += keyStr.charAt ( encodedCharIndexes[jnx] );
    }
    return output;
}

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.

By default, no links are underlined in the Tildes interface, as far as I observed. I suggest that we underline the links that are in topic texts and comments. It is a nice visual clue in prose, and allows to distinguish between two consecutive links. Currently I'm using the following snippet in a userscript to achieve that:

// Underline links in prose.
document.querySelectorAll(".comment-text a, .topic-text-full a").forEach(
  function (elem) { elem.style="text-decoration: underline;"; });

The rest of the links function like buttons, so it's not that important (or even unnecessary) that they be underlined. What do you think?

I was missing this feature from Reddit and saw others were as well so I thought I would share a user script I created to solve this issue until it's added (if it's added)

// ==UserScript==
// @name         Tildes.net: Open external links in new tab
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Opens external links on tildes.net in a new tab
// @author       SleepyGary
// @match        https://tildes.net/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    document.querySelectorAll('a').forEach(el => {
        if (!el.href.includes('tildes.net') && el.href !== '') {
            el.target = "_blank";
        }
    });
})();

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.