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:

  1. Install Stylus extension for firefox/chrome

  2. “Write new style” in the addon settings

  3. Copy paste the CSS code below in

  4. Modify the code around line ~11 in order to reflect your homeserver and any additional frendservers that you want to highlight

  5. Modify the code around line ~19 to reflect your homeserver

  6. (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

  7. (Optional) Play around with different markers and colors!

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

  • Yote.zipOPEnglish
    2·
    2 years ago

    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.

    • God@sh.itjust.worksMEnglish
      1·
      2 years ago

      :) 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)

      • Yote.zipOPEnglish
        3·
        2 years ago

        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.