Edit: @redyoshi49q@furry.engineer has designed a better solution using only CSS, and this should be used instead of the old script! If you’re reading this page for the first time, ignore this message.
This userstyle adds a red heart next to people that are from your home server, and any other servers that you manually define. Spot your server buddies out in the wild!
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
-
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
Very cool! I’m not a web developer by trade so don’t take anything I wrote as good design, but the mutation observer + disconnect/reconnect paradigm seems like a good way to generically interact with lemmy. I tried to monitor for normal DOM/etc events and couldn’t find any that happened when lemmy moved stuff around, so this is the only way I could find.
:) ChatGPT had actually given me the observer syntax, I used it for the first plugin on the community 😎😎 ChatGPT made most of it too hahah. It’s simple enough.
I am actually a professional web developer. But that doesn’t mean I’m amazing at it, though I do know a few… practices, not sure if I should call them “best practices” or even “good design” hahahah, I just do what it takes.
I switched the whole thing to typescript though which tends to produce better results for complex things. Typechecking at compile time saves a shitton of debugging time. For the rest of things like the addon folder structure, dependencies and anything else, I just ask ChatGPT. It is now my universal encyclopedia! 🥸 (encyclopedia, assistant, codemonkey, proofreader, second brain for when mine turns off and also my new source of type errors cuz its common sense is sometimes nonexistent)
Strongly typed languages are definitely my jam. Develop slightly slower, debug 2x less, faster runtime. What’s not to like. Kudos for actually being a web developer - it makes my head hurt. Case in point: me writing all this complicated JS when the problem was cleanly solvable with attribute selectors in CSS. I’m technically fullstack but I mostly stay backend and application-level if I can help it. Web dev has too many options for how to accomplish something, and I never know what the proper answer is. I’m interested to see what general paradigm people will use to interact with lemmy - I feel there has to be a more efficient way than mutation observer. Lemmy’s HTML markup could stand to be more verbose as well - extra classes to hook onto for more precise manipulation.