كل عام وانتم بخير بمناسبة حلول شهر رمضان المبارك 🎉❤️

نشرت مقال جديد على Eqraatech - اقرأ-تِك بيتكلم عن ال Broadcast Channel API

ال Broadcast Channel API هو أداة بنقدر نستخدمها لإرسال البيانات بين تبويبات المتصفح المختلفة (أو ال tabs)

بدأت المقال بالحديث عن بعض المواقف اللى بنحتاج نبعت فيها بيانات بين علامات التبويب ، و ازاى دا بيساعدنا فى بعض الأحيان على تحسين تجربة المستخدم داخل الموقع ، و بعدها اتكلمت عن طريقة استخدام ال API دا

تقدر تقرأ المقال بالكامل من خلال الرابط التالي
https://eqraatech.com/cross-tab-communication-with-broadcast-channel-api/

طلبت مشروع معين من ChatGPT و DeepSeek و V0 و Grok و Claude بنفس ال prompt و كانت النتيجة صادمة ، شاهد ماذا حدث !
https://www.linkedin.com/posts/ahmed0saber_%D8%B7%D9%84%D8%A8%D8%AA-%D9%85%D8%B4%D8%B1%D9%88%D8%B9-%D9%85%D8%B9%D9%8A%D9%86-%D9%85%D9%86-chatgpt-%D9%88-deepseek-%D9%88-v0-activity-7300582470150766593-_-K-

الفرق الحقيقي بين المكتبات و أُطُر العمل !
https://www.linkedin.com/posts/ahmed0saber_06-the-real-difference-between-libraries-activity-7278409967731134464-w_hd?utm_source=share&utm_medium=member_android

Introducing saber-colors.js, a light-weight JavaScript library providing essential color manipulation utilities.
https://www.linkedin.com/posts/ahmed0saber_github-ahmed0sabersaber-colors-a-light-weight-activity-7277739551119323136-pSCo?utm_source=share&utm_medium=member_android

ال optimistic update من أحد ال techniques ال tricky لتحسين تجربة المستخدم

لنفترض أننا شغالين على منصة تواصل اجتماعي مشابهة لفيسبوك أو لينكدان ، و عندنا مشكلة بسيطة و هى إن زرار اللايك بياخد نصف ثانية (مثلا) عشان يبعت ريكويست لل api و الريكويست ينجح ، بالتالي يتم تغيير شكل و لون الزرار

المشكلة هنا إن بعض اليوزرز هيلاحظوا إن الموضوع بياخد وقت ملحوظ و بعد كل ضغطة لايك هيكون واقف منتظرها تغير شكل الزرار عشان يتأكد إن اللايك اتعمل ف يقدر يكمل scroll بعدها

و البعض الآخر من اليوزرز هيضغط على الزرار اكتر من مرة لأنه شايف إن مفيش اى تفاعل من ناحية الزرار ف ممكن يكون مهنج مثلا

احنا بقا بنقدر نحل المشاكل دى ب technique بسيطة جدا اسمها optimistic update أو التحديث المتفائل (أو المستبشر) ، و من اسمه نقدر نفهم أنه بيتفائل بإن ال api request هينجح ف بيغير من شكل و لون الزرار لحظيا منغير ما ينتظر ال response ، بالتالي بمجرد ما اليوزر يضغط على الزرار هيلاقى الزرار شكله اتغير ف هيحس إن الأداء عالي و التطبيق سريع ف هيكمل scroll و يشوف البوست اللى بعده

طيب هنا احنا كننا بنفترض إن ال request هينجح و هو دا اللى المفروض يحصل بنسبة أكبر من ٩٩٪ ، و لكن لازم نعمل حساب إن الريكويست ممكن يفشل برضو ، فى الحالة دى بنرجع شكل الزرار كما كان و ننبه اليوزر إن فى خطأ حدث أثناء الإعجاب بالمنشور ، بالتالي اليوزر ممكن يتأكد من اتصاله بالانترنت و يجرب تاني

ممكن تلاحظ ال technique دى مستخدمة فى تطبيقات كتير بتستخدمها بشكل يومي ، و هى أكيد مش حاجة خاصة ب زرار اللايك فقط ولا منصات التواصل و لكنها كانت مجرد أمثلة ، ممكن مثال آخر يكون عن زرار ال add to cart/wishlist فى موقع e-commerce مثلا

لو بتخزن داتا بشكل local عند المستخدم و فجأة حبيت تغير من طريقة تخزينها لازم تاخد بالك من النقطة دى

لنفترض انك بتحفظ todo items فى ال local storage ب key و ليكن مثلا اسمه tasks ، و حبيت فى يوم من الأيام تخليها items ، تفتكر المفروض تعمل ايه ؟

لو فتحت الكود بتاعك و غيرت tasks إلى items فقط يبقى انت ناوي على مشاكل مع اليوزرز ، لأن كل يوزر منهم عنده تاسكات متخزنة بالفعل تحت اسم tasks ف لما فجأة الكود يبقى بيتعامل على اساس key اسمه items ، يبقى انا كا يوزر هسيب شوية تاسكات على الموقع بليل و اجى تاني يوم الاقى الموقع اتحدث و بيقول ملكش تاسكات عندنا !

بالتالي الحل دا مش هينفع ، و نحمد ربنا انها جات على قد كدا لأنك لو غيرت اسم property جوا object متخزن فى ال local storage سواء بشكل مباشر أو بداخل array of objects ممكن يوصل بيك الحال إلى undefined تتعرض قدام اليوزر أو ايرور يعطل الكود

طيب هنتعامل مع الموقف دا ازاى ؟

هتحتاج تكتب كود إضافي يعمل التعديل بشكل تلقائي عند كل مستخدم يدخل الموقع ، يعنى مثلا هياخد الداتا من ال localStorage tasks و يروح يحطها فى ال items و بعدها يحذف ال tasks ، ف لما الكود يطلب ال items هيلاقيها بدون مشاكل

أو ياخد الداتا و يloop عليها عشان يغير اسم property بداخل ال objects مثلا ، و يرجعها لل local تاني

طيب أفرض حبيت أعمل تعديل تاني على شكل الداتا ؟

حاليا هيكون عندك يوزرز لسا عندهم الداتا بصورتها الأولى اللى هى tasks مثلا و يوزرز عندهم الداتا بصورتها التانية اللى هى items ، و مطلوب نوصل بيهم الاتنين لصورة تالتة خالص

هنا مش هينفع نفس الكود يمشى مع كل المستخدمين و يوصل بيهم لنفس النتيجة المطلوبة ، ف هتحتاج تخزن version بداخل ال localStorage عشان تحدد على أساسه إذا كان اليوزر دا عنده الداتا على الحالة الأولى ولا التانية ولا التالتة ، عشان تعرف أنت المفروض تrun اهنى فانكشن ، ولا متعملش حاجة خالص لأن الداتا موجودة ب اخر شكل مطلوب ليها بالفعل

٨٠٪ من النتيجة المرغوبة بيجى بواسطة ٢٠٪ من المجهود المبذول
https://www.linkedin.com/posts/ahmed0saber_ahmed0saber-activity-7241142376797224961-Rc_T?utm_source=share&utm_medium=member_android

كل عام وانتم بخير ، عام هجري مليء بالبركات إن شاء الله ❤️