Tildes Userscript: Tildezy
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.
The GitHub contains installation instructions if you've never used a userscript before, and contains some images showing off each feature described below.
Comment Collapser
The comment collapser was built because, with my shakey hands, I had a few times when I would click someone's name instead of the [-] beside it. With this feature *Triple* clicking anywhere on a comment, be it text or header, will collapse it as if you used the [-] button. It's set to 3 clicks as sometimes I double-click to begin copying a line and didn't want the conflict, but it can be changed to any amount of clicks on line 132https://github.com/TeJayH/Tildezy/blob/main/Tildezy.user.js#L132
Group Stars/Favourites
Allows you to click a ☆ beside each ~group on the Tildes homepage to *favourite* it, moving it to the top of the list. Supports as many or as few favourites as you'd wish.Scroll to Top Button
Adds a button pinned in the top right of every Tildes thread that sends you back to the top of the page. No more scrolling or reaching for the home keyOpen Comments in New Tab
Replaces the default function of a posts "x comments" to open the page in a new tab instead of the current tabUser Colors
This one is the thing that I made the entire script for, an entirely useless feature but one I love for silly reasons. Replaces the stock username color with a randomized one based on a hash made from the user's username. So everyone gets assigned their own color which will always be their color anywhere you see them. This one helps multi-person conversations flow better in my headNew Comment Traveller
Gives you navigation buttons either beside the Collapse Replies/Expand all buttons when scrolled up, or pinned in the top right when scrolled past those buttons. Navigation buttons jump quickly between each new comment in a thread.Markdown Buttons
Adds a selection of various buttons under every comment box that automatically insert markdown for you. No more forgetting which bracket style goes first for a clickable URL.Settings
Not really a *feature* on its own, but it exists. Adds a "Tildezy Settings" beside the Log In/Username button in the top right of the header, which opens a settings window to enable/disable any and all features of the script. Features can also be disabled by modifying lines 26-41 in the script, allowing you to hard toggle everything *including the settings itself* off should you wish.https://github.com/TeJayH/Tildezy/blob/main/Tildezy.user.js#L26-L41
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
Most people honestly don't care that much I have noticed over the years. Some do of course, but as long as it isn't complete spaghetti code a lot is tolerated.
Having had a quick look your code looks fine to me with possibly the exception that your settings can also be
const(I recommend using ESLint for catching that).I'll give the userscript a go later today when I am behind my desktop.
I'll need to give ESLint a shot thank you, I actually used this userscript as an excuse to try VSCode out for the first time, and apparently, they've got a plugin for it.
You are doing very well, the code looks good. It's readable and clearly shows what it does. It has proper variable/function names and the manipulation of the DOM is understandable too.
Don't let perfect be the enemy of good. :)
ESLint is always a good idea. You can also try out prettifier if you can live with its opinions.
There would also be the option to use Vite as a code minifier/compiler.
This would come in handy if you want to include other npm packages as you can make it compile into one bigger minified file.
I've actually debated getting the Voltaire quote as a tattoo as a reminder to myself not to fall down the perfection rabbit hole.
I'll look into prettifier as well, I wanted to avoid minimizing the code as I wanted it to stay fully readable and modifiable should someone wish to take it and use it as a stepping stone to learning on their own, same reason I put the repo under GPLv3, if there's even the small chance someone could take inspiration from what I made and use it as the catalyst to make something of their own I'm happy.
I feel you, we walk the same path. A lot of my personal projects are collecting dust in the drawer because they were never perfect enough for me and I don't have enough time to reach the completion I want.
That's a very valid choice to make! The script in it's current stage wouldn't really benefit of minification anyway. It was more a suggestion for the future. :)
VS Code has a plugin for everything. My favorite is indent-rainbow, which color codes your indentation so you can see the current level at glance.
Yup, although you also need node.js for it to be present and have ESLint either installed as a global module or be defined in your package.json
Just refactored it with ESLint, definitely a handy thing to know exists. Thanks again for the suggestion, it definitely results in some cleaner code and forces me to maintain a proper style instead of jumping between styles as I go.
I've been trying it out and quite like the various QoL improvements. So, good job! :)
Added to the wiki: https://tildes.net/~tildes/wiki/customizing_tildes#scripts
One can actually customize the "open in new tab" behavior of topic links, comment links, etc in the built-in site behavior settings.
The username colors and "scroll to top" button are features that are also implemented in the ReExtended extension. I prefer the ReExtended button since there is an option to jump to new comments in addition to a "back to top" button after all new comments have been read.
Yeah, I actually just found the built-in option for opening in a new tab as I was customizing my account, the userscript was written before I had my invite so it was built purely from a logged-out perspective. I think I'll leave the feature built in so anyone in situations like I was, the users browsing Tildes without an account yet, can have the feature as well.
Might be worth implementing a jump to new comments button as well, I didn't see mention of ReExtended until now but it does seem to be Firefox exclusive unless you manually pack it yourself which may be a bit much for some people, whereas a userscript can work in any browser that has a userscript extension (or could just be loaded in via a bookmarklet in any browser if you wished).
The wiki page is lovely I didn't expect Tildes to have so many options made already, thank you for adding me to the list!
I've now implemented a jump-to-new comment feature, which meshes well with my now edited Scroll to Top feature. I know you weren't really suggesting it, but you inspired me to add it so I figured I'd let you know.
i've been meaning to get into some programming, and have done some small courses in the past. nothing with javascript though. that being said, this is very readable, and the comments help a lot too!
one quick question: what's the rationale behind the if/else statement with starring being "if it's starred, remove it, else add it" instead of the other way around (which sounds more intuitive to me?)
also lines 306-321 is just the same thing twice, right?
fun to read this though.
Javascript is one of the languages that on its own I don't massively enjoy, but at the same time, I love deeply, because it gives you the power to essentially do whatever you want on whatever website you want via userscripts like this or via bookmarklets like this one that turns almost any website into a game of Katamari, because why not right?
For the star I assume you're referring to lines 164-179, which falls back to, sometimes programmers do silly things. That entire block is a remnant from me rewriting the entire favourites function twice because I called addGroupStars() twice by mistake and couldn't for the life of me figure out why the code was resulting in two sets of stars, so I made it go in and remove them first. I came back the next day and noticed the issue right away, but left the code behind because it didn't hurt to have the spare logic.
And good catch on 306-321, it's definitely exactly that yes, before I shared the script I went in and tried to reorganize the functions and clean up the comments, which apparently resulted in me duplicating the function
That makes sense, but just so you know, that's a problem that git solves as well. You can always look back at previous versions of the codebase to pull out functions that used to be there. It should give you some confidence to clean up older code, to keep things nice and trim.
Don't sweat it too much though. Things look nice, clean, and organized to me.
Thanks for sharing your contribution with the community!
That's also very true, my git habits are one of the bigger things programming-wise I need to improve, as mentioned above I don't share my code much, which means up until recently I've just kept a folder called Code on my HDD sorted by language, only things I had on git were the few shared things and some private stuff that was hosted so VPS could grab updates automatically.
Due to that, I've got a bad habit of both under and over-committing, I'll commit something then the instant I commit, spot an issue and send 3 more commits fixing, or I'll wait so long to commit the commit ends up bigger than the starting codebase.
Until you push you can commit all you want and squash it into a single commit for clarity.
Imo it's better to commit often and squash them into larger commits later as to have overwhelmingly large commits.
Very nice script. Some functionality seems to overlap with other userscripts but it's nicely done.
As a mobile user I'd hope some of the functionality makes it into the tildes. Especially back to the top and maybe some easier way to collapse comments.
I could ofc use a browser that supports userscripts but i adapted a webview app which makes it a quite native experience.
Just installed. Pretty cool. Triple click doesn't work on mobile (Firefox Nightly). Everything else seems to work though!
I didn't even think about it working in the browser on mobile, I tested cross-browser but mobile never crossed my mind. When I get home I'll give it a shot to see if I can get that feature working. Thanks for letting me know.
Would really love if the Triple click could work on mobile Firefox. Misclicking on the tiny minimize comment bar in the top left of the comment box is my least favourite thing about using Tildes on my phone.
@Allgedo got it working on firefox mobile below, apparently it just wasn't compatible with how I made my settings for whatever reason. You can grab it here
Excellent! I have it working on Hermit. This really helps :)
I set grants to none and deleted the settings stuff and then it works. https://pastebin.com/cQVw4SYL
Hey, so after using this for a while, I am absolutely in love with the username colors. As somebody who hates uniqueness and loves boring uniformity, it's the perfect amount of color and differentiation added to the site.
Glad to hear it, I definitely tried to strike a nice balance without making things conflict too much, honestly, I think the thing that sticks out the most is the settings button, but I really didn't want people to be forced to edit the script itself to turn things on or off.
You could put it in the User Menu, below Misc?
New update is live, v1.3.0. Adds a new section under each comment box to automatically insert markdown for you. Because Tildes supports HTML tags inside comments the code is built in a way that it's easy to add new buttons automatically, you only need to insert a new button on line 763.
Here's an example of a new button, which will automatically add header text for you.
buttonCreator.addButtonToMenu('Header', '<h1>', '</h1>')Getting the buttons below a comment box that appears when the user clicks reply was rather difficult to get working so if you run into issues please let me know, and if you're better than me at javascript please feel free to give the code a scan and let me know any improvements that could be made, it was very trial and error getting this running.
Don't know Tildes preferred option for updating something, didn't want to make a full new post just to say "wow look update", so posted here as a new comment.
I think your code is straightforward and easy to read. I’ll definitely try this out later tonight.
A few comments about the code:
I have a habit of trying to shorten expressions, so instead of:
I would do something like
I realize that doing too much of this can hurt readability.
Also, I started using tailwind css lately and I quite prefer it to defining my own styles.
Colorblind user/user of Solarized Light here. Is there any way we could limit or set what colors are available for the username colors? There are a number of colors that I'm struggling to read.
I tried to make the code work with every theme well, but my colour vision isn't the best either so I may have made the defaults the opposite of useful for you. As I use a dark theme I just defaulted to blocking the darkest of names without thinking to do the same for bright vivid colours.
You can modify lines 78-79 to adjust how dark/bright usernames are allowed to go, if a generated user colour is outside those limits it will regenerate a new colour for the person.
I just tried out a few numbers and these seem to be readable with solarize light, but you can really set anything, just keep lowering the brightness until you feel it looks good for you and away you go.
You might be able to implement quick and dirty color blind profiles by using HSL colors. HSL uses a single parameter for the color (unlike rgb), so you’d just need to make profiles with different forbidden hue ranges. You lose non-rainbow colors by maxing out saturation and lightness, but it’s a start.
Hey, trying it out now this script is fantastic. Do you plan on turning it into a proper browser extension?
I don't have plans on doing that any time soon no. It's not something I've ever done before and I'd be worried about the level of access extensions have, combined with my lack of knowledge I'd be worried about exposing users to a potential exploit or other issues.
Though it would make it a little easier to do certain things. For example one of the features I scrapped was this. I was working on adding a button beside each tag to automatically blacklist it for you. I had it mostly complete but ran into the problem of making it cleaner. It functioned if it visibly opened a new tab to the blacklist page, added the tag, clicked save, then closed the tab, but Tildes CSP stopped me from doing any of that invisibly and Tildes current lack of API stops me from doing it the only other way I know of.