Skel~ord

If I had a nickel for every time I did re-implement some part of Discord UI, I’d have two nickels. Which isn’t a lot, but it’s weird that it happened twice.

Introduction

Have you ever found yourself captivated by the seamless design and user-friendly interface of Discord? I certainly have. As a curious coder, I embarked on a mission to uncover the hidden mechanics behind one of its most intriguing components – the user list. Thus, Skelord was born, a voyage into the realm of Reverse Engineering, where I unraveled the magic that powers Discord’s user list and reimagined it in Svelte, all while preserving its cozy familiarity.

The User List Anatomy

The user list, a pillar of Discord’s intuitive interface, seemed like a puzzle begging to be solved. I dived into the depths of Discord’s React-based structure, deciphering its scroll-handling methods and intricacies. Armed with insights about both compiled React code mapping to their original sourcecode and classic JS patterns, I embarked on the journey of translating these discoveries into the world of Svelte, my go-to framework known for its simplicity and elegance.

VirtualScroller, the Svelte Way

The scroll mechanics used by Discord, a blend of relative and fixed heights manipulated by JavaScript, posed an interesting challenge. In Skelord, I replaced this convoluted dance with a simple, yet powerful overflow-based scroller. This shift not only played harmoniously with hardware acceleration and mouse scrolls but also paved the way for smoother interactions.

The discord way :

The skelord way :

Notice the small difference ? It plays big when running on low-end devices !

Theming scrollbar

One of Discord’s subtle yet delightful features is its distinctive scrollbar design. To recreate this charm while maintaining the native speed of a true scrollbar, I turned to the webkit scrollbar CSS theme. The result? A visual ode to Discord’s elegance while ensuring that scrolling remained a delightful and responsive experience. Thanks to the :hover state, I could make it optionnal to also show/hide the scrollbar when needed, resulting in a almost similar experience from the original UI.

SSR Serenade

To add a touch of modernity, Skelord embraced server-side rendering (SSR) through the enchanting realm of SvelteKit. By preloading user data on the server side, I paved the way for swifter initial load times and a more delightful user experience. The transition from component to component felt as smooth as the harmony of a well-composed symphony. Looking at the sourcecode, you’ll see some data-sveltekit-hydrate, that indicate how the JS should hydrate the frontend with the presented backend data.

Conclusion

The Discord user list, once thought understood yet a mystery, is now a cozy corner of familiarity within Skelord’s realm. As I reflect on this journey, I can’t help but revel in the joy of successfully capturing the essence of Discord’s UI internals list while infusing it with the magic of Svelte. It’s a tribute to the power of curiosity, innovation, and the beauty that lies in reimagining the familiar. I do hope to add more to this project, and maybe complete the whole frontend components for later use !