Introduction
In a world where web applications are evolving at a dizzying pace and innovation often equates to increased complexity, I decided to take a different approach with my Mastodon client. Although this project is not fully completed, it contains subtle details that I believe are valuable and worth sharing.
Readable CSS Classes
One of the most notable aspects of my client is the use of readable CSS classes. Unlike the current trend of monolithic applications where class names are often cryptic, I opted for a more accessible naming convention. I use Svelte's CSS scoping system with capitalized class names, making the DOM easier to read and the code easier to maintain.
Removing hashes was intentional, although it prevents the use of multiple components with the same name. However, this limitation has never posed a problem for me. In production, underscored classes are automatically converted for proper scoping, enhancing clarity without compromising functionality.
DOM Optimization and Bundle Size
When it comes to optimization, I have a particular approach regarding bundle size and DOM cleanliness. By using CSS modules for "components" whose sole purpose is to adjust CSS, such as panels or icons, I have significantly reduced my bundle size. I have also developed a code generator to make icons less cumbersome to manage and easily tree-shakable.
Consistent Naming
To ensure consistency, I directed Vite to use the same class name generation function as Svelte. This ensures that class names are consistent in the production build, a detail that may seem minor but makes all the difference for someone with a penchant for order and structure.
Daily Use
Despite its imperfections and unfinished status, I use my Mastodon client daily. This regular use allows me to continuously identify improvements and adjustments, all while maintaining a smooth and efficient workflow.
Conclusion
My Mastodon client is a project in constant evolution, shaped by design choices that prioritize readability and efficiency. If you're interested in learning more or discussing your own project, I invite you to take a few minutes to chat.
Let's discuss your project in 15 minutes.