[{"data":1,"prerenderedAt":474},["ShallowReactive",2],{"post-\u002Fposts\u002Fenhancing-engagement-notifications-and-other-enhancements":3,"post-link-en-0d4cb8be-230e-444e-9419-fce9adf0ef6b":228},{"id":4,"title":5,"body":6,"contentId":216,"date":217,"description":218,"extension":219,"meta":220,"navigation":80,"path":221,"rawbody":222,"robots":223,"schemaOrg":223,"seo":224,"sitemap":225,"stem":226,"__hash__":227},"posts\u002Fposts\u002Fenhancing-engagement-notifications-and-other-enhancements.md","Enhancing Engagement: Notifications and Other Enhancements",{"type":7,"value":8,"toc":212},"minimark",[9,22,33],[10,11,12,13,17,18,21],"p",{},"For the past two weeks, I have been focused on enhancing the ",[14,15,16],"strong",{},"interactivity"," of my website. I believe it's vital to enable readers to ",[14,19,20],{},"engage"," with the content I share and interact with one another. This can foster meaningful conversations and discussions, which are essential for growth and learning, both for you and me.",[10,23,24,25,28,29,32],{},"I began by incorporating ",[14,26,27],{},"reactions"," to my articles, followed by enabling ",[14,30,31],{},"comments",". You can explore more about these features in the articles below:",[34,35,37],"callout-read-more",{"id":36},"0d4cb8be-230e-444e-9419-fce9adf0ef6b",[34,38,40,65,70,77,87],{"id":39},"c8faba17-5480-49fb-a201-d426ea583097",[10,41,42,43,48,49,53,54,48,57,60,61,64],{},"At the conclusion of each article on the ",[44,45,47],"a",{"href":46},"\u002Fposts","blog"," and ",[44,50,52],{"href":51},"\u002Fseries","series"," pages, you'll find two new sections: ",[14,55,56],{},"Reactions",[14,58,59],{},"Comments",". With the former, you can express your feelings about the article using predefined emojis. This feedback is important as it provides immediate insights into the content I share. Through the latter, you can share your thoughts, ask ",[14,62,63],{},"questions",", and engage in discussions with me and other readers. I'm eager to see how these interactions will develop over time.",[66,67,69],"h2",{"id":68},"notifications-to-keep-you-updated","Notifications to keep you updated",[10,71,72,73,76],{},"Today, I'm delighted to unveil a new feature: ",[14,74,75],{},"notifications",".",[78,79,81,82],"video",{"autoPlay":80,"loop":80,"muted":80,"playsInline":80},true,"\n  ",[83,84],"source",{"src":85,"type":86},"https:\u002F\u002Fimages.soubiran.dev\u002Fposts\u002Fenhancing-engagement-notifications-and-other-enhancements\u002Fnotifications.mp4","video\u002Fmp4",[88,89,90,101,108,111,115,118,132,143,159,165,170,174,183,186,189],"callout-support-my-work",{},[10,91,92,93,96,97,100],{},"Previously, if you posted a ",[14,94,95],{},"comment"," on one of my articles, there was no way to know if I or someone else had replied. You had to periodically return to check for new ",[14,98,99],{},"activity",", which is both impractical and frustrating. You invest time in writing, and you expect a response. However, if you're unaware when it happens, engaging in a conversation is challenging.",[10,102,103,104,107],{},"This has changed. I have implemented a ",[14,105,106],{},"notification system"," that alerts you when someone responds to your comment. In the header, a new bell icon will display a badge when there are unread notifications. Clicking on it will open a panel listing all notifications. You can click on one to navigate directly to the article and the comment. Moreover, you can mark all as read or delete them.",[10,109,110],{},"If you'd like to try it, leave a comment below. I will reply, and you will receive a notification. I am enthusiastic about how this will enhance interactions on my website.",[66,112,114],{"id":113},"additional-enhancements","Additional enhancements",[10,116,117],{},"Alongside notifications, I have made several other improvements to my website.",[10,119,120,121,124,125,128,129,76],{},"I developed a ",[14,122,123],{},"profile"," page. You can access it by clicking the link in the footer. It contains all the information regarding your account. For now, it's quite basic, but I plan to add more features in the future, like a ",[14,126,127],{},"dashboard"," or a ",[14,130,131],{},"settings page",[10,133,134,135,138,139,142],{},"I included your ",[14,136,137],{},"profile picture"," above the \"Add a Comment\" header in the comment ",[14,140,141],{},"section",". It's a small detail, but now, you know which account you're using for interaction.",[10,144,145,146,149,150,154,155,158],{},"You can ",[14,147,148],{},"submit a comment"," using the shortcut ",[151,152,153],"kbd",{},"Ctrl"," + ",[151,156,157],{},"Enter",". This is a common shortcut for form submission, and I feel it's crucial to provide it.",[10,160,145,161,164],{},[14,162,163],{},"like a comment"," to show your appreciation without replying. It's a simple gesture, but it can brighten someone's day. This feature is also integrated with the notification system. If someone likes your comment, you will receive a notification.",[78,166,81,167],{"autoPlay":80,"loop":80,"muted":80,"playsInline":80},[83,168],{"src":169,"type":86},"https:\u002F\u002Fimages.soubiran.dev\u002Fposts\u002Fenhancing-engagement-notifications-and-other-enhancements\u002Fcomment-likes.mp4",[66,171,173],{"id":172},"looking-forward","Looking forward",[10,175,176,177,128,180,182],{},"I sincerely hope you will enjoy these new features. Please share your thoughts about them through a ",[14,178,179],{},"reaction",[14,181,95],{},". 💫",[10,184,185],{},"I'm eager to continue enhancing my website and adding more features, but I need your feedback. If you have any suggestions or ideas, please share them with me. I'm open to any input that can help me provide a better user experience.",[187,188],"hr",{},[10,190,191,192,195,196,202,203,208,209,211],{},"All these new functionalities are built on a custom ",[14,193,194],{},"API"," developed with ",[44,197,201],{"href":198,"rel":199},"https:\u002F\u002Flaravel.com",[200],"nofollow","Laravel",". I primarily use ",[44,204,207],{"href":205,"rel":206},"https:\u002F\u002Flaravel.com\u002Fdocs\u002F11.x\u002Fnotifications",[200],"Laravel Notifications"," to construct the ",[14,210,106],{},". I'm impressed by Laravel's flexibility and power. With just a few lines of code, I can create a robust system that significantly enriches my website.",{"title":213,"searchDepth":214,"depth":214,"links":215},"",2,[],"600cf474-9e89-4045-9030-021332c2dfd6","2024-10-24","In this third update, discover the new notification system and other enhancements I've made to my website to help you to engage with others and me.","md",{},"\u002Fposts\u002Fenhancing-engagement-notifications-and-other-enhancements","---\ncontentId: 600cf474-9e89-4045-9030-021332c2dfd6\ntitle: \"Enhancing Engagement: Notifications and Other Enhancements\"\ndescription: In this third update, discover the new notification system and other enhancements I've made to my website to help you to engage with others and me.\ndate: 2024-10-24\n---\n\nFor the past two weeks, I have been focused on enhancing the **interactivity** of my website. I believe it's vital to enable readers to **engage** with the content I share and interact with one another. This can foster meaningful conversations and discussions, which are essential for growth and learning, both for you and me.\n\nI began by incorporating **reactions** to my articles, followed by enabling **comments**. You can explore more about these features in the articles below:\n\n\u003CCalloutReadMore id=\"0d4cb8be-230e-444e-9419-fce9adf0ef6b\" \u002F>\n\n\u003CCalloutReadMore id=\"c8faba17-5480-49fb-a201-d426ea583097\" \u002F>\n\nAt the conclusion of each article on the [blog](\u002Fposts) and [series](\u002Fseries) pages, you'll find two new sections: **Reactions** and **Comments**. With the former, you can express your feelings about the article using predefined emojis. This feedback is important as it provides immediate insights into the content I share. Through the latter, you can share your thoughts, ask **questions**, and engage in discussions with me and other readers. I'm eager to see how these interactions will develop over time.\n\n## Notifications to keep you updated\n\nToday, I'm delighted to unveil a new feature: **notifications**.\n\n\u003Cvideo autoplay loop muted playsinline>\n  \u003Csource src=\"https:\u002F\u002Fimages.soubiran.dev\u002Fposts\u002Fenhancing-engagement-notifications-and-other-enhancements\u002Fnotifications.mp4\" type=\"video\u002Fmp4\">\n\u003C\u002Fvideo>\n\n\u003CCalloutSupportMyWork \u002F>\n\nPreviously, if you posted a **comment** on one of my articles, there was no way to know if I or someone else had replied. You had to periodically return to check for new **activity**, which is both impractical and frustrating. You invest time in writing, and you expect a response. However, if you're unaware when it happens, engaging in a conversation is challenging.\n\nThis has changed. I have implemented a **notification system** that alerts you when someone responds to your comment. In the header, a new bell icon will display a badge when there are unread notifications. Clicking on it will open a panel listing all notifications. You can click on one to navigate directly to the article and the comment. Moreover, you can mark all as read or delete them.\n\nIf you'd like to try it, leave a comment below. I will reply, and you will receive a notification. I am enthusiastic about how this will enhance interactions on my website.\n\n## Additional enhancements\n\nAlongside notifications, I have made several other improvements to my website.\n\nI developed a **profile** page. You can access it by clicking the link in the footer. It contains all the information regarding your account. For now, it's quite basic, but I plan to add more features in the future, like a **dashboard** or a **settings page**.\n\nI included your **profile picture** above the \"Add a Comment\" header in the comment **section**. It's a small detail, but now, you know which account you're using for interaction.\n\nYou can **submit a comment** using the shortcut \u003Ckbd>Ctrl\u003C\u002Fkbd> + \u003Ckbd>Enter\u003C\u002Fkbd>. This is a common shortcut for form submission, and I feel it's crucial to provide it.\n\nYou can **like a comment** to show your appreciation without replying. It's a simple gesture, but it can brighten someone's day. This feature is also integrated with the notification system. If someone likes your comment, you will receive a notification.\n\n\u003Cvideo autoplay loop muted playsinline>\n  \u003Csource src=\"https:\u002F\u002Fimages.soubiran.dev\u002Fposts\u002Fenhancing-engagement-notifications-and-other-enhancements\u002Fcomment-likes.mp4\" type=\"video\u002Fmp4\">\n\u003C\u002Fvideo>\n\n## Looking forward\n\nI sincerely hope you will enjoy these new features. Please share your thoughts about them through a **reaction** or a **comment**. 💫\n\nI'm eager to continue enhancing my website and adding more features, but I need your feedback. If you have any suggestions or ideas, please share them with me. I'm open to any input that can help me provide a better user experience.\n\n---\n\nAll these new functionalities are built on a custom **API** developed with [Laravel](https:\u002F\u002Flaravel.com). I primarily use [Laravel Notifications](https:\u002F\u002Flaravel.com\u002Fdocs\u002F11.x\u002Fnotifications) to construct the **notification system**. I'm impressed by Laravel's flexibility and power. With just a few lines of code, I can create a robust system that significantly enriches my website.\n",null,{"title":5,"description":218},{"loc":221},"posts\u002Fenhancing-engagement-notifications-and-other-enhancements","FIhnP3VRPt7_J6YQufqLiGStl02h4nUAEO1pYwSiSFg",{"id":229,"title":230,"body":231,"contentId":36,"date":465,"description":466,"extension":219,"meta":467,"navigation":80,"path":468,"rawbody":469,"robots":223,"schemaOrg":223,"seo":470,"sitemap":471,"stem":472,"__hash__":473},"posts\u002Fposts\u002Fenhancing-engagement-adding-reactions-to-my-articles.md","Enhancing Engagement: Adding Reactions to My Articles",{"type":7,"value":232,"toc":459},[233,236,240,253],[10,234,235],{},"Hey there! I hope you're doing well. I'm excited to share with you the beginning of a significant project that will accompany me over the coming months.",[66,237,239],{"id":238},"introduction","Introduction",[10,241,242,243,248,249],{},"In March 2024, I announced the overhaul of my personal website for the fourth time, this time using ",[44,244,247],{"href":245,"rel":246},"https:\u002F\u002Fvitepress.dev\u002F",[200],"VitePress",". This decision was guided by the desire for a streamlined yet robust tool that allows me to write easily and rapidly while maintaining control over both design and functionality. ",[250,251,252],"em",{},"VitePress is truly exceptional in this regard.",[34,254,256,260,267,273,282,299,303,314,317,323,327,345,350,353,436,442,451,456],{"id":255},"674a3932-aaba-445c-82bb-0896ce3a8e7e",[66,257,259],{"id":258},"exploring-new-horizons","Exploring new horizons",[10,261,262,263,266],{},"In June 2024, I embarked on learning ",[44,264,201],{"href":198,"rel":265},[200]," for two primary reasons.",[10,268,269,270],{},"Firstly, I aimed to broaden my expertise and skills in web development. I want to create applications from the ground up, turning ideas into reality without heavily relying on external services. ",[250,271,272],{},"And I'm already working on my first SaaS 🤫.",[10,274,275,276,281],{},"Secondly, I sought more flexibility in my career options. Since the outset of my professional journey, I have predominantly used ",[44,277,280],{"href":278,"rel":279},"https:\u002F\u002Fangular.dev\u002F",[200],"Angular"," as my main tool. I am eager to explore new avenues as Angular no longer resonates with me.",[10,283,284],{},[250,285,286,287,292,293,298],{},"I considered ",[44,288,291],{"href":289,"rel":290},"https:\u002F\u002Frubyonrails.org\u002F",[200],"Rails",", but once you've experienced the Laravel Documentation and ",[44,294,297],{"href":295,"rel":296},"https:\u002F\u002Flaracasts.com\u002Freferral\u002FBarbapapazes",[200],"Laracasts",", the choice becomes apparent.",[66,300,302],{"id":301},"progressing-incrementally","Progressing incrementally",[10,304,305,306],{},"Addressing the first reason demands substantial time and effort. It is a long-term initiative that I perceive as a significant challenge. Although I may not precisely know where to begin or how the journey will unfold, I am clear about my ultimate goal. Like all challenges, the best approach is to break them into smaller, manageable tasks, solve them individually, and then integrate the solutions. ",[250,307,308,309,76],{},"This is the essence of ",[44,310,313],{"href":311,"rel":312},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FDivide-and-conquer_algorithm",[200],"divide and conquer",[10,315,316],{},"I firmly believe that the most effective way to learn is through practical projects. Not just a simple to-do list but something functional with a real purpose.",[10,318,319,320],{},"Meanwhile, I aim to enhance engagement with others. It's much more enjoyable to share and converse, to have interactions. For months, I've been contemplating additions to my personal website but struggled to find a practical, engaging, and useful idea. ",[250,321,322],{},"Until now.",[66,324,326],{"id":325},"taking-the-first-step","Taking the first step",[10,328,329,330,333,334,337,338],{},"Here we are. I decided to implement the feature to ",[14,331,332],{},"react to my articles using predefined emojis",", supported by an API developed with ",[44,335,201],{"href":198,"rel":336},[200],". ",[250,339,340,341,76],{},"And the front-end continues to be powered by ",[44,342,247],{"href":343,"rel":344},"https:\u002F\u002Fvitepress.dev",[200],[78,346,81,347],{"autoPlay":80,"loop":80,"muted":80,"playsInline":80},[83,348],{"src":349,"type":86},"https:\u002F\u002Fimages.soubiran.dev\u002Fposts\u002Fenhancing-engagement-adding-reactions-to-my-articles\u002Fdemo.mp4",[10,351,352],{},"Initially, it might appear as a minor feature, and that's true; it isn't vast, yet for a first step, it suffices. In this process, I engaged with numerous different concepts:",[354,355,356,365,373,392,400,408,417,425],"ul",{},[357,358,359,364],"li",{},[44,360,363],{"href":361,"rel":362},"https:\u002F\u002Flaravel.com\u002Fdocs\u002Fsocialite",[200],"Laravel Socialite"," for GitHub authentication.",[357,366,367,372],{},[44,368,371],{"href":369,"rel":370},"https:\u002F\u002Flaravel.com\u002Fdocs\u002Fsanctum",[200],"Laravel Sanctum"," for API authentication.",[357,374,375,380,381,380,386,391],{},[44,376,379],{"href":377,"rel":378},"https:\u002F\u002Flaravel.com\u002Fdocs\u002Fpint",[200],"Laravel Pint",", ",[44,382,385],{"href":383,"rel":384},"https:\u002F\u002Fphpstan.org\u002F",[200],"PHPStan",[44,387,390],{"href":388,"rel":389},"https:\u002F\u002Fgetrector.org\u002F",[200],"Rector"," for code quality assurance.",[357,393,394,399],{},[44,395,398],{"href":396,"rel":397},"https:\u002F\u002Fforge.laravel.com\u002F",[200],"Laravel Forge"," for deployment.",[357,401,402,407],{},[44,403,406],{"href":404,"rel":405},"https:\u002F\u002Fwww.hetzner.com\u002F",[200],"Hetzner"," for the server infrastructure.",[357,409,410,411,416],{},"Custom Command for database backups and ",[44,412,415],{"href":413,"rel":414},"https:\u002F\u002Fwww.cloudflare.com\u002Fdeveloper-platform\u002Fr2\u002F",[200],"R2"," for their storage.",[357,418,419,424],{},[44,420,423],{"href":421,"rel":422},"https:\u002F\u002Ffilamentphp.com\u002F",[200],"Filament"," for the dashboard management.",[357,426,427,428],{},"100% test coverage. ",[250,429,430,431,182],{},"Achievable with ease using Laravel and ",[44,432,435],{"href":433,"rel":434},"https:\u002F\u002Fpestphp.com\u002F",[200],"Pest",[10,437,438,439],{},"And that's about it. ",[250,440,441],{},"Not too shabby for five days of work!",[10,443,444,445],{},"Reviewing all the source code of ",[446,447,450],"git-hub-link",{"repo":448,"name":449},"pinkary-project\u002Fpinkary.com","Pinkary Project"," greatly enhanced my understanding of these tools and the process of building a Laravel application.",[10,452,453],{},[250,454,455],{},"One of the significant aspects of this step is laying the groundwork for more features on my website and numerous articles to share what I've learned.",[10,457,458],{},"So, what are your thoughts? ⬇️",{"title":213,"searchDepth":214,"depth":214,"links":460},[461,462,463,464],{"id":238,"depth":214,"text":239},{"id":258,"depth":214,"text":259},{"id":301,"depth":214,"text":302},{"id":325,"depth":214,"text":326},"2024-10-01","The initial yet crucial phase of a significant project that will accompany me in the upcoming months. Let's start small by adding reactions to my articles.",{},"\u002Fposts\u002Fenhancing-engagement-adding-reactions-to-my-articles","---\ncontentId: 0d4cb8be-230e-444e-9419-fce9adf0ef6b\ntitle: \"Enhancing Engagement: Adding Reactions to My Articles\"\ndescription: The initial yet crucial phase of a significant project that will accompany me in the upcoming months. Let's start small by adding reactions to my articles.\ndate: 2024-10-01\n---\n\nHey there! I hope you're doing well. I'm excited to share with you the beginning of a significant project that will accompany me over the coming months.\n\n## Introduction\n\nIn March 2024, I announced the overhaul of my personal website for the fourth time, this time using [VitePress](https:\u002F\u002Fvitepress.dev\u002F). This decision was guided by the desire for a streamlined yet robust tool that allows me to write easily and rapidly while maintaining control over both design and functionality. _VitePress is truly exceptional in this regard._\n\n\u003CCalloutReadMore id=\"674a3932-aaba-445c-82bb-0896ce3a8e7e\"\u002F>\n\n## Exploring new horizons\n\nIn June 2024, I embarked on learning [Laravel](https:\u002F\u002Flaravel.com) for two primary reasons.\n\nFirstly, I aimed to broaden my expertise and skills in web development. I want to create applications from the ground up, turning ideas into reality without heavily relying on external services. _And I'm already working on my first SaaS 🤫._\n\nSecondly, I sought more flexibility in my career options. Since the outset of my professional journey, I have predominantly used [Angular](https:\u002F\u002Fangular.dev\u002F) as my main tool. I am eager to explore new avenues as Angular no longer resonates with me.\n\n_I considered [Rails](https:\u002F\u002Frubyonrails.org\u002F), but once you've experienced the Laravel Documentation and [Laracasts](https:\u002F\u002Flaracasts.com\u002Freferral\u002FBarbapapazes), the choice becomes apparent._\n\n## Progressing incrementally\n\nAddressing the first reason demands substantial time and effort. It is a long-term initiative that I perceive as a significant challenge. Although I may not precisely know where to begin or how the journey will unfold, I am clear about my ultimate goal. Like all challenges, the best approach is to break them into smaller, manageable tasks, solve them individually, and then integrate the solutions. _This is the essence of [divide and conquer](https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FDivide-and-conquer_algorithm)._\n\nI firmly believe that the most effective way to learn is through practical projects. Not just a simple to-do list but something functional with a real purpose.\n\nMeanwhile, I aim to enhance engagement with others. It's much more enjoyable to share and converse, to have interactions. For months, I've been contemplating additions to my personal website but struggled to find a practical, engaging, and useful idea. _Until now._\n\n## Taking the first step\n\nHere we are. I decided to implement the feature to **react to my articles using predefined emojis**, supported by an API developed with [Laravel](https:\u002F\u002Flaravel.com). _And the front-end continues to be powered by [VitePress](https:\u002F\u002Fvitepress.dev)._\n\n\u003Cvideo autoplay loop muted playsinline>\n  \u003Csource src=\"https:\u002F\u002Fimages.soubiran.dev\u002Fposts\u002Fenhancing-engagement-adding-reactions-to-my-articles\u002Fdemo.mp4\" type=\"video\u002Fmp4\">\n\u003C\u002Fvideo>\n\nInitially, it might appear as a minor feature, and that's true; it isn't vast, yet for a first step, it suffices. In this process, I engaged with numerous different concepts:\n\n- [Laravel Socialite](https:\u002F\u002Flaravel.com\u002Fdocs\u002Fsocialite) for GitHub authentication.\n- [Laravel Sanctum](https:\u002F\u002Flaravel.com\u002Fdocs\u002Fsanctum) for API authentication.\n- [Laravel Pint](https:\u002F\u002Flaravel.com\u002Fdocs\u002Fpint), [PHPStan](https:\u002F\u002Fphpstan.org\u002F), [Rector](https:\u002F\u002Fgetrector.org\u002F) for code quality assurance.\n- [Laravel Forge](https:\u002F\u002Fforge.laravel.com\u002F) for deployment.\n- [Hetzner](https:\u002F\u002Fwww.hetzner.com\u002F) for the server infrastructure.\n- Custom Command for database backups and [R2](https:\u002F\u002Fwww.cloudflare.com\u002Fdeveloper-platform\u002Fr2\u002F) for their storage.\n- [Filament](https:\u002F\u002Ffilamentphp.com\u002F) for the dashboard management.\n- 100% test coverage. _Achievable with ease using Laravel and [Pest](https:\u002F\u002Fpestphp.com\u002F). 💫_\n\nAnd that's about it. _Not too shabby for five days of work!_\n\nReviewing all the source code of \u003CGitHubLink repo=\"pinkary-project\u002Fpinkary.com\" name=\"Pinkary Project\" \u002F> greatly enhanced my understanding of these tools and the process of building a Laravel application.\n\n_One of the significant aspects of this step is laying the groundwork for more features on my website and numerous articles to share what I've learned._\n\nSo, what are your thoughts? ⬇️\n",{"title":230,"description":466},{"loc":468},"posts\u002Fenhancing-engagement-adding-reactions-to-my-articles","LD0HcKhXb60MUxL3IW43GYJzYnvIjjtinUYforzYsiA",1790086900967]