[Userstyle] Add hearts to users from your homeserver/other designated servers (Frend Detector) v1.6 (pawb.social)

submitted 1 year ago* (last edited 1 year ago) by yote_zip@pawb.social to c/tech@pawb.social

34 comments fedilink hide all child comments

I made a userscript (eventually converted into a userstyle) so I could go sightseeing across lemmy and spot all you animals out in the wild. pawb.social, pawb.fun, and furry.engineer are pre-filled already, but you can add other servers to track as well!

Edit: Special mention to redyoshi49q@furry.engineer for this post, whose techniques resulted in CSS to achieve parity with my userscript. My older userscript should not be used anymore, as the CSS will do the same thing but more efficiently.

Instructions:

Install Stylus extension for firefox/chrome
"Write new style" in the addon settings
Copy paste the CSS code below in
Modify the code around line ~11 in order to reflect your homeserver and any additional frendservers that you want to highlight. Currently it's set to pawb.social and the mastodon servers that pawb.social also operates, but feel free to add some of the furry instances below as well (post in the comments if you've got a good furry instance to add here!):

yiffit.net
meow.social

Modify the code around line ~19 to reflect your homeserver
(Optional) If you'd like your homeserver buddies to have a different marker, uncomment the various sections around line ~27 through ~50 by removing the /* and */ bits
(Optional) Play around with different markers and colors!

CSS/Userstyle: https://gist.github.com/redyoshi49q/f1b2d1da0a8f7536aba1f8c3110d2dd8

top 28 comments

sorted by: hot top controversial new old

[-] redyoshi49q@furry.engineer 3 points 1 year ago

I whipped up a proof-of-concept user CSS that does this (and should automatically adapt to entries shifting down).

**********

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("pawb.social") {

a.text-info[title$="@lemmy.blahaj.zone"] span::before {
content: "❤ ";
color: red !important;
}

a.text-info:not([title*="."]) span::before {
content: "★ ";
color: yellow !important;
}

}

[-] redyoshi49q@furry.engineer 3 points 1 year ago* (last edited 1 year ago)

The first part prepends a red heart to usernames from a particular remote server (and variants of the CSS selector can be copy/pasted into a comma delimited list to allow the rule to apply to other servers as well).

The second part prepends a yellow star to usernames from the local server... by crudely assuming that they won't contain any periods (CSS selectors aren't flexible enough for anything more elegant). The selector can instead be applied to the first rule to make those hearts as well.

[-] yote_zip@pawb.social 2 points 1 year ago* (last edited 1 year ago)

Edit: Okay, apparently you need to pick a language if you're sending a message from lemmy to mastodon, otherwise you get eternal spinner.

Normal comment as follows:

You're amazing. I had a gut feeling that CSS could solve this but I couldn't find enough info myself. I'm a backend/integration guy and CSS scares me.

This solution is definitely better designed than mine, but I'm not sure if it can handle highlighting when you're on a foreign server instance (e.g. literally on beehaw.org and not pawb.social). This isn't a huge deal imo but I posted the script somewhere and someone immediately wanted that feature so I put it into mine. I did solve the shifting around issue - it wasn't that hard to solve I just wasn't expecting lemmy to reuse elements in such a weird way. When a post comes into the feed, all the elements change their values directly - nothing "moves" around in the DOM (at least that's what I observed during 10 seconds of testing).

With your current CSS, there's an issue where the star inserts itself on upvote counts for me after I've upvoted a post:

This should be fixable by using something like this (pls fix if I'm doing it wrong):

a.text-info[title$="@lemmy.blahaj.zone"] span::before {
content: "❤ ";
color: red !important;
}

a.text-info:not([title*="."])[href*="/u/"] span::before {
content: "★ ";
color: yellow !important;
}

[-] redyoshi49q@furry.engineer 3 points 1 year ago

I can confirm both that my original version has the bug you described and that your fix does not produce that bug.

I don't actually have a native Lemmy account, so I didn't realize that upvoting would cause the upvote count to gain a CSS class that I used in my selector.

(Thankfully, the DOM changed to reflect given/taken upvotes in spite of me not being logged into the Lemmy server at all; I only got a "Not logged in." error each time.)

[-] redyoshi49q@furry.engineer 3 points 1 year ago

(Also, you would not believe how often I've had to write user CSS to unbreak the broken CSS of websites.

A classic example is when the CSS defines dark text color without defining a background color. The browser I use derives color defaults from the OS, which uses light text on a dark background, and the page renders in dark text on a dark background, generally becoming nearly unreadable.

I've also (ab)used "display: none !important;" to snip out annoying "improvements" to pages.)

[-] yote_zip@pawb.social 2 points 1 year ago

I've ended up with a style like this:

a.text-info[href*="/u/"][href$="@pawb.social"] span::before,
a.text-info[href*="/u/"][href$="@pawb.fun"] span::before,
a.text-info[href*="/u/"][href$="@furry.engineer"] span::before {
content: "❤ ";
color: red !important;
}

a.text-info[href*="/u/"]:not([href*="@"]) span::before {
content: "★ ";
color: yellow !important;
}

Frustratingly, I can't seem to check whether pawb.social is in the href of a relative href like /u/yote_zip. If I could do that, this could work on foreign instances, because I could add a qualifier that someone is not only a member of the instance I'm currently on, but also my specific homeserver. As-is, this can be limited to pawb.social and will work just fine.

[-] redyoshi49q@furry.engineer 2 points 1 year ago

Try this:

@-moz-document domain("pawb.social"), domain("yiffit.net") {
a.text-info[href*="/u/"][href$="@pawb.fun"] span::before,
a.text-info[href*="/u/"][href$="@furry.engineer"] span::before {
content: "❤ ";
color: red;
}
a.text-info[href*="/u/"]:not([href*="@"]) span::before {
content: "★ ";
color: yellow;
}
}

@-moz-document domain("pawb.social") {
a.text-info[href*="/u/"]:not([href*="@"]) span::before {
content: "❤ " !important;
color: red !important;
}

}

[-] redyoshi49q@furry.engineer 2 points 1 year ago

There's three lists of domains at play here:

* The domains in the first @-moz-document are domains where hearts and stars appear at all.
* The domains in that section's a.text-info block are the domains that get hearts.
* The domains in the second @-moz-document are the domains where the stars are overridden by hearts.

This lets you always have hearts on an instance, even if you're already on that instance, while also letting you have stars show native accounts elsewhere.

[-] yote_zip@pawb.social 1 points 1 year ago* (last edited 1 year ago)

I'm unsure if this is what you mean exactly, but I was able to use your techniques to get parity with my script's logic (star removed for simplicity at the moment):

a.text-info[href*="/u/"][href$="@pawb.social"] span::before,
a.text-info[href*="/u/"][href$="@pawb.fun"] span::before,
a.text-info[href*="/u/"][href$="@furry.engineer"] span::before {
    content: "❤ ";
    color: red;
}
@-moz-document domain("pawb.social") {
    a.text-info[href*="/u/"]:not([href*="@"]) span::before {
        content: "❤ " !important;
        color: red !important;
    }
}

This CSS is logically equivalent to what I was doing in my script:

So it works on all sites and highlights users from the first 3 sites (first is a user's homeserver). On pawb.social specifically, it detects native users and adds a heart to them. In practice, this means everyone from those 3 servers should always have a heart next to them no matter where you go in the lemmyverse.

[-] redyoshi49q@furry.engineer 2 points 1 year ago

It took me a bit to realize as much, but it seems that you edited the script based on another commenter's suggestion to make parts of it run on /every/ page (with the expectation of only changing anything on Lemmy pages). That's... probably fine; the CSS is pretty specific.

https://gist.github.com/redyoshi49q/f1b2d1da0a8f7536aba1f8c3110d2dd8 <- I made an update that cleans up a few things and re-adds the functionality that I originally intended for the stars to have (using houses instead) with commented out CSS.

[-] redyoshi49q@furry.engineer 2 points 1 year ago

You're welcome to version bump this and add yourself as an author, by the way; you participated quite a bit in this process.

(The character limit of Mastodon has been a little bit cozy for this extended exchange, hence why I finally decided to just make and link a gist.)

[-] yote_zip@pawb.social 1 points 1 year ago

Sure. just add me as an author on that gist and I'll put it in the post instead. Posting raw code on lemmy is not ideal, especially because I can't seem to color it based on the language.

[-] redyoshi49q@furry.engineer 1 points 1 year ago

Done.

[-] yote_zip@pawb.social 1 points 1 year ago* (last edited 1 year ago)

Yeah, I had the same concerns here: https://pawb.social/comment/121816. The CSS is specific enough that I don't think it's a problem, but it is slightly more of a concern with the CSS than the JS because the CSS doesn't abort itself. With my userscript it also ran on every site but instantly aborted if it wasn't actually a lemmy site.

As far as wildcard fediverse stuff goes, I still think this is quite acceptable. I just saw this addon which scans every word on every website (and every mutation?) for fediverse formatted links to convert to clickables, so on a scale of 1 to that monstrosity, this one's at a 0.

[-] stefenauris@pawb.social 1 points 1 year ago

I love this concept! Another prominent instance that comes to mind is meow.social I'm looking forward to playing with this after work ^_^

[-] yote_zip@pawb.social 2 points 1 year ago

Added to the description!

[-] TerrorBite@meow.social 2 points 1 year ago

I'm on meow.social, it's a good instance but it is quite large and is near the limits of what it can handle, I believe. The Fediverse does better spread across smaller instances.

I signed up about five years ago back when it was smaller; then snouts.online went down, and a lot of users migrated to meow.

[-] Wander@yiffit.net 0 points 1 year ago

Thank you so much for this and thank you for mentioning us! ❤️

I'm not on a PC right now but will install it in a little while.

[-] yote_zip@pawb.social 0 points 1 year ago

❤️ I'm working on an update to this at the moment so stay tuned. The way lemmy re-uses links is not what I was expecting, so currently if lemmy live-inserts a new post above another one, everyone's hearts get mixed up. I've got a fix for this but I'm going to look at a couple other features as well.

[-] Wander@yiffit.net 2 points 1 year ago

No worries! I was wondering if I could pitch an idea. The biggest gripe I have right now with Lemmy is not being able to only view content of furry instances.

I was imagining a userscript that when you turn it on, hides any post that wasn't submitted to an @pawb.social or @yiffit.net instance.

Do you think that's feasible?

[-] yote_zip@pawb.social 3 points 1 year ago* (last edited 1 year ago)

I updated the script here: https://greasyfork.org/en/scripts/468689-frend-detector-lemmy

From a userscript side I think what you want is not super easy. I'm more of a backend guy than a web dev so maybe I'm missing something obvious, but best case I think you'd only get a couple posts at a time with a script solution, since the server is going to serve you a ton of junk you don't want before you filter it out with a script. To my (limited) knowledge, there's no way to ask the server for specific communities so you get a full page worth of useful content.

I think the main thing we need is multi-community support (e.g. r/furry+secretfurryagenda+furry_irl on reddit), the ability to view the local timeline of another lemmy instance, and possibly those two ideas combined into multi-local-instance timeline. I think this sort of feature is only doable by the actual lemmy team via feature request on the lemmy github: https://github.com/LemmyNet/lemmy/issues

I'm super new to lemmy though, so I might be missing something!

[-] Wander@yiffit.net 2 points 1 year ago

Yeah, you're right. You would probably have lots of empty pages. Hopefully it's something that is implemented soon on the server side

[-] yote_zip@pawb.social 2 points 1 year ago

I found this issue for the local timeline part: https://github.com/LemmyNet/lemmy/issues/3105 and this issue for the multi-community part: https://github.com/LemmyNet/lemmy/issues/3071

So looks like the community is already on the case. If you have a github account, give it a thumbs up and we're on our way!

[-] Wander@yiffit.net 3 points 1 year ago

Will do once I'm back at my desktop. Thank you <3

[-] redyoshi49q@furry.engineer 1 points 1 year ago

A CSS script could do that... if the :has() selector is supported.

With that said, I've recently run into issues with that selector not being supported (due to it being recent CSS spec) in two different (but not recently updated) user style extensions that I've tried it with (in one, it is entirely unrecognized; in the other, you get errors when trying to do nontrivial things in the :has() ).

I could copy/paste some example user CSS for you if you'd like to see if you can get it working.

[-] southernwolf@pawb.social 0 points 1 year ago

Fantastic!!! I didn't even think of this, but this is an excellent idea.

I'm starting work on what I hope to make a browser extension to automatically connect back to your primary instance of choice if you visit another instance. Doing so cause I got tired of having it be that I'd visit an instance (like from the Rust subreddit) and not have it be linked to here so I can follow stuff. I'll have it be a user can set their primary instance, then when they visit another one, they can easily have it connect back properly so they can follow communities and interact there.

(Apologies if that sounded confusing... I'm still not sure on all the verbage for the Fediverse. Hopefully it'll make sense when I release it x3 )

[-] yote_zip@pawb.social 2 points 1 year ago

Okay updated!

[-] yote_zip@pawb.social 1 points 1 year ago

I also got a bit mixed up with getting redirected to a new instance so I look forward to your extension! As I also posted below, I need to fix this code a tiny bit, because I forgot that lemmy can live-load new posts, and the hearts can get mixed up in that case. Easiest to demonstrate by going to /c/all and sorting by new.

load more comments

this post was submitted on 14 Jun 2023

12 points (100.0% liked)

Furry Technologists

1323 readers

1 users here now

Science, Technology, and pawbs

founded 2 years ago

MODERATORS

Soatok@pawb.social

stefenauris@pawb.social