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

  • God@sh.itjust.worksMEnglish
    3·
    1 year ago

    ah, nice to know! :) Thanks, and I’m super glad to have you back. I’ve actually been using your script (version 1.3) as a basis for another plugin I’m making. I’m not sure it’ll see the light of day but it’s fun, and it’s my first attempt at a firefox extension.

    • Yote.zipOPEnglish
      2·
      1 year 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·
        1 year 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·
          1 year 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.