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

This project, Skelord, was initiated to replicate the functionality of Discord’s user list within a new context, driven by an interest in understanding and implementing modern UI design principles.

Driven by curiosity, I ventured to explore the mechanics behind Discord on yet another one day rush project.

Understanding the User List Anatomy

Discord’s user list is a fundamental component of its interface. The analysis began with an examination of the scroll-handling methods and architecture of Discord’s React-based structure, with the goal of understanding its underlying mechanics.

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 and classic JS patterns, I embarked on the journey of translating these discoveries into the world of Svelte, my go-to framework.

Implementing VirtualScroller, the Svelte Way

Discord’s scroll mechanics utilize a combination of relative and fixed heights managed by JavaScript. In Skelord, a simplified overflow-based scroller was implemented to achieve smoother interactions, particularly beneficial for devices with limited resources.

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 !

Recreating the Scrollbar Theme

The distinctive scrollbar design of Discord was replicated using webkit scrollbar CSS theming in Skelord, ensuring optimal performance while closely mirroring the original UI.

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.

Server-Side Rendering (SSR)

Skelord utilized server-side rendering (SSR) through SvelteKit to preload user data on the server side, resulting in faster initial load times and seamless transitions between components.

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 project successfully replicated Discord’s user list functionality within the Skelord clone. This demonstrates the ability to analyze, understand, and implement complex UI components, with potential applications in various web development projects.