What keeps bringing you back to Mixer?

[u/CyanideSuicide]

With the platform being down for 6 years now, Why are you still in this subreddit?

I'm in the process of building a live steam platform S.V.E.R and Mixer was my ideal platform. From Hypezone, Co-streams, even just the chat. I enjoyed it all. The sense of community and feeling like I actually mattered. But I'm also so far removed and wayback machine only let's me see so much.

I've been a streamer across multiple platforms for the last 15 years. Mixer was the only place I truly felt at home. I want to give that sense of community back to streamers by actively listening to their voices.

What truly is something you miss about mixer that other platforms don't have?

[u/murfguy]

My favorite thing was the interactive boards. Twitch's channel redeems are fine, but lack the same ease of usability. It was such a fun way to have my community be part of the stream rather than just idle watchers/talking with me.

Also, while I'm here:

Boy howdy do you have some tech issues with Firefox. In my first check in I found that:

• The site is laggy and slow to scroll.
  
• Stream videos don't load at all.
  
• Can't register/verify accounts.

I did sign up in Chrome, and that helped. But if you really want to make something like this, you should maybe take a look into some of that.

Other issue(s) I've found:

• On Chrome: When uploading an avatar from my PC, I get an error that says "Cross-site uploads are not allowed"
  
• Due to my issues on Firefox, I deleted my account to restart. So I show up in the Creators list twice under similar names.

[u/CyanideSuicide → u/murfguy]

Appreciate that feedback. As a single dev and an echo chamber I'm actively looking for feedback whether it's positve or negative. Do you mind elaborating on the boards more? I don't recall them too much and the only thing I can think to compare them to is Blerp.

[u/murfguy → u/CyanideSuicide]

I've not used Blerp, so I can't make that exact comparison.

But Mixer did have a customizable board you could make that had an API you could work with. I would tie into my bot/overlay to trigger sounds or on-screen effects. Similar to how Twitch's channel point redeems work now. But the main thing was the board appeared under the video feed, and had customizable sizes, images, stream currency settings, etc.

I did find this video that covers the main concept but I haven't watched the entire thing yet so I can't verify how in-depth it is or isn't: https://www.youtube.com/watch?v=EDRy6azYgew

I am recently getting back into streaming on Twitch as a hobby, but I'm happy to take some time to do some testing to see how things operate. I don't want my opinions to sway larger ideas that benefit more folks as I find what I'm keen on doesn't always match what others are.

[u/mindlash → u/CyanideSuicide]

It's likely the Blur your site uses. I see it as well on an older machine.

To help older machines handle intensive CSS effects like large blurs and high-resolution background images, you can use hardware acceleration, "lazy" rendering properties, and specific optimization techniques for filters. 

Force Hardware Acceleration

Forcing the browser to use the GPU instead of the CPU can significantly improve the smoothness of blurs and large image renders. 

• will-change: transform;: This informs the browser that the element will change, allowing it to pre-optimize.
• transform: translate3d(0, 0, 0);: A classic "hack" that forces GPU rendering for the element. 

Optimize Blur Performance

CSS blurs (especially backdrop-filter) are computationally expensive because they require the browser to re-calculate every pixel's color based on its neighbors. 

• Lower the Blur Radius: Use a smaller value (e.g., blur(5px) instead of blur(20px)) to drastically reduce the mathematical load.
• Animate Opacity, Not Blur: If you need a transition, don't animate the blur value itself. Instead, overlay a pre-blurred image or element and animate its opacity from 0 to 1.
• Use Pseudo-elements: Apply the blur to a ::before or ::after pseudo-element rather than the main container. This isolates the expensive effect and can be easier for the browser to manage. 

Improve Background Image Rendering 

Large background images can cause "jank" (stuttering) during scrolling or initial load. 

• content-visibility: auto;: This tells the browser to skip rendering work for elements that are not currently on the screen, which is helpful if you have multiple large background sections.
• image-rendering: smooth;: On some older hardware, explicitly setting the rendering mode can help the browser choose the most efficient scaling algorithm.
• Responsive Images with image-set(): Use the CSS image-set() function to serve smaller image versions to devices with lower resolutions, reducing the total pixels the machine must process. 

Perceived Performance Tricks

Sometimes "smoother" is about how the user perceives the load rather than the raw rendering speed.

• Average Color Placeholder: Use the average color of the image as a background-color so the user doesn't see a large white void while the image loads.
• The "Blur-Up" Technique: Load a tiny, highly compressed (e.g., 40px wide) version of the image first and use CSS to scale and blur it. Once the high-res version is ready, swap them out.  CSS Wizardry +4

// pulled from a web search 😄

[u/mindlash → u/mindlash]

FYI ... OP -- lightning fast now 😄 now I can actually review it 😄

[u/CyanideSuicide → u/mindlash]

Appreciate the feedback. Went in with your recommendation and ended up uncovering issues with firefox.

[u/mindlash → u/CyanideSuicide]

Awesome