Enhancing Engagement: Enabling Comments on My Articles

Last week, I introduced the first phase of a major project: incorporating reactions to my articles. Today, I'm excited to unveil the second phase: enabling comments on my articles.

A Second Phase ​

In the previous article, I detailed the progressive approach I'm pursuing to enhance my personal website. Step by step, I aim to introduce features to engage with you, the reader, and create a platform for meaningful interactions around all the knowledge I share.

It's a progressive process because I believe this is the most effective way to deliver, rather than waiting to complete everything at once. At the same time, it keeps me motivated and focused by achieving small victories and receiving feedback. And since I'm learning Laravel, it prevents me from feeling overwhelmed by the project's complexity. In essence, it's a win-win scenario.

The Importance of Comments ​

Recently, I posted on X a thread about "singleton composables". Swiftly, I received comments, suggestions, and insights that made me realize that I could be mistaken. I was mistaken. And I'm grateful that I had the opportunity to learn from others' feedback.

Two weeks ago, I also published an article on the simplest method to create a Vue.js component library. At one juncture, there were two approaches to constructing the library. I chose one, deeming it the simplest, but through comments, people could have shared their thoughts and experiences, which could have assisted others in making better decisions and learning from one another.

Comments are valuable as they allow us to express our thoughts, ask questions, and engage in discussions. They enable us to learn from each other, broaden our knowledge, and grow collectively. With this in mind, I decided to implement the comments feature on my personal website.

Taking the Second Step ​

And here we are, the comments feature has been implemented and launched.

This phase posed more challenges than the first. I had to consider various factors and make decisions throughout the process. It's fascinating to observe how the same feature can be implemented in different ways. Ultimately, it's about striking a balance, aiming to choose the best solution for your specific scenario based on your needs and constraints like time, resources, and expertise.

• Which editor to use? Notion-like, Markdown, or WYSIWYG?
• How to render the editor? EasyMDE, CKEditor, Quill, or a simple textarea?
• How to highlight the code blocks? Prism.js, Highlight.js, or Shiki? This is crucial for my technical articles.
• How to preview the comments? Real-time, on-demand, or in browser?
• Is a reply a comment? Comments can have replies, but should replies be considered comments?
• Does a comment deletion delete the replies? If a comment is deleted, should the replies be removed as well?
• Who can comment? Everyone, authenticated users, or only me? It would be odd if only I could comment on my articles.

The benefit of building the project incrementally is that these were the only decisions I had to make. I didn't have to worry about the entire project, just the comments feature.

To address these questions, I conducted research, experimented, and made trade-offs.

• Research: I tried to find articles on best practices but didn’t find anything especially useful. So I delved into GitHub Discussions and Laracasts Forum. I discovered interesting patterns and ideas that I could leverage.
• Experiment: In previous projects, I used EasyMDE and Quill. I also examined editors from the platforms mentioned earlier, and my final choice may surprise you. 🫣
• Trade-offs: Choosing simplicity over complexity. This is my guiding principle, and all my decisions are informed by it. However, simplicity can be quite complex and doesn't mean compromising on features or user experience.

All these decisions were made with the user in mind. I aim to make the commenting experience as seamless and enjoyable as possible, encouraging you to share your thoughts, ask questions, and engage in discussions.

Sometimes I'm wrong, and sometimes there are better solutions, and these are the moments when I need your feedback. I acknowledge I'm not perfect and I'm always open to learning and improving. With this new comments feature, it's now easier than ever to share your thoughts and help everyone learn and grow. 💜

Would you like to delve deeper into how I implemented the comments feature? Let me know in the comments below. ⬇️

I'm contemplating writing a series of articles about this project, from ideation to real-world implementation, complete with numerous code snippets and explanations.