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.
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 discord way :
The skelord way :
Notice the small difference ? It plays big when running on low-end devices !
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.
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.
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 !
SVDX Midi Controller
A deep dive on how to use Midi controller on some rhythm game
Federated Social Network
Using a minimal MVC framework and a hand-coded REST API, this application wanted to clone Twitter by bringing real-time messaging features.
Creating a dashboard page in HTMl/CSS that communicate with a PHP API. OAuth login is made with Steam and Discord.
Want more ?
I've got a lot of other awesome projectsSee them all !