Happy 16th birthday, Chrome! 🥳

Chrome celebrates its 16th anniversary this month!

اكيد سابقاً سمعت انه الـ NodeJs بتتميز بسرعتها بس شي مرة سالت حالك ليش؟

السر ورا هالشي هو الـ Event Loop اللي بخلي الكود asynchronous خليني اشرحلك شو قصدي:

تخيل حالك شغال بمطعم، عم تستقبل طلبات الزباين. كل زبون بيعطيك طلبه، بس بدل ما توقف بكل طلب وتنتظر الأكل يخلص، بتاخد الطلب وتروح تعطيه للشيف، وبتتابع تاخد طلبات جديدة من الزباين التانيين. الشيف عم يطبخ، وأنت كل شوي بتجي لعنده تشوف إذا الأكل صار جاهز، وإذا صار، بتوصله للزبون. هاد بالضبط مفهوم الـ Event Loop!

باختصار: انت ما بتوقف تستنى، بتتابع شغلك، والعمليات اللي برّا الكود (الشيف) بتكمل لحالها.

الـ Event Loop هو المسؤول عن إدارة العمليات اللي بتشتغل "خلف الكواليس". هو اللي بيضمن إنه الكود asynchronous مثل القراءات من الملفات أو طلبات الـ web يشتغل بدون ما يوقف البرنامج.

Facebook | Linkedin |Instgram | Telegram | YouTube

===================

أنا Somar Kesen أعمل كـ Full Stack Developer أنشر بشكل شبه يومي منشورات تحتوي على العديد من المعلومات عن تطوير البرمجيات و سوق العمل مستخلصة من خبرة سنين في العمل مع العديد من الشركات في الشرق الأوسط و أوروبا ضمن هذا المجال
—————————————————-
مازال التسجيل متاح على جلسة Git like a Pro بإمكانكم تتواصلوا معي حتى تعرفوا تفاصيل اكتر حول الجلسة و طرف الدفع المتاحة

لنفترض انه الفريق البرمجي تبعكم عم يشتغل على مشاريع بتحتاج إصدارات دورية واضحة مثلا انتوا شركة و عندكم اوقات ثابتة لنشر التحديثات و غيره.

او لنفترض مثلاً مشروعكم بيتطلب تحديثات سريعة و مستمرة او عم تشتغلوا على مشروع Open Source و بدكم الـ Community يساهم معكم.

طيب فرضاً فريقكم كبير و الشباب عم تشتغل على ميزات كتير بنفس الوقت و بدكم ترفعوا و تتبعوا هي الميزات بشكل مستقل؟

هي جزء من السيناريوهات اللي رح نحكي عنها بجلسة الـ Git Like a PRO اللي رح نتعلم فيها كيف فينا نحترف عالم الـ git و نتميز بشغلنا فيه و يرفع من مستوى تنسيقنا بالعمل.

لتعرف تفاصيل اكتر عن الجلسة و كيفية التسجيل فيها بإمكانكم تتواصلوا معي من خلال :

Facebook | Linkedin |Instgram | Telegram | YouTube

—————————————————————-

⚠️ خصم 20% من رسوم الجلسة لمستخدم الكود : TELE_OFFER_002 الكود صالح لشخص واحد فقط و يجب تأكيد الحجز اليوم. ⚠️

يرجى من اللي سجلوا على جلسة الـ Git Like a PRO و اللي ما تمت إضافتهم على المجموعة التواصل معي كرمال ضيفهم باقرب وقت

تمنياتي للجميع بداية اسبوع موفقة

بذكركم بانه الشباب اللي سجلت على جلسة الـ Git Like a PRO و اللي ما تمت إضافتهم على المجموعة التواصل معي كرمال ضيفهم باقرب وقت

الغروب مختلف عن غروب القناة وجب التنويه ⚠️

مارح يفهمها إلا اللي مقضى ليالي مع الـ Terminal 😂

شاركونا حساباتكم على LinkedIn نساوي Connection لبعض

حسابي بأول تعليق 👇🏻

اكيد شي مرة حدثت تطبيق او نظام و صرت تتمنى لو ترجع للإصدار القديم بدون ما تخسر بياناتك أو تخرب شي؟

هون بيجي دور مفهوم Rollback Compatibility! هالمفهوم بيضمن إنه حتى لو التحديث الجديد فيه مشاكل، تقدر ترجع بكل أمان للإصدار السابق بدون عواقب كبيرة.

ليش مهم هالمفهوم؟
لما بتحدث نظام أو تطبيق، دايمًا فيه احتمال يصير مشاكل أو أخطاء غير متوقعة. بهيك مواقف، Rollback Compatibility بيسمحلك ترجع للإصدار القديم بسرعة وبدون أي خسائر. وهاد الشي بيكون ضروري جدًا خاصة إذا البرنامج عم تستخدمه شركات أو مؤسسات مهمة، لأن أي خطأ ممكن يسبب مشاكل كبيرة و شفنا هالشي بالتحديث اللي خرب المطارات و مؤسسات كبيرة بالعالم من فترة

كيف بيتطبق Rollback Compatibility؟

📌 حفظ البيانات بشكل آمن: لازم البيانات تكون محفوظة بطريقة إذا رجعت للإصدار القديم ما تضيع. يعني يكون فيه Backup دوري للبيانات المهمة.

📌 توافق الميزات القديمة: لازم الميزات القديمة تشتغل طبيعي حتى بعد التحديث. وإذا رجعت للوراء، لازم ما تواجه مشاكل باستخدام هاي الميزات.

📌 التحديث الجزئي: أحيانًا التحديث ما بيكون لكل النظام. ممكن يكون لجزء معين، وهون لو صار خطأ، النظام بيقدر يرجع بس لهالجزء بدون ما يأثر على الباقي.

📌اختبار الرجوع: ضروري كل ما تعمل تحديث، تختبر كيف النظام بيرجع للإصدار القديم. هالعملية بيسموها Rollback Testing، وهي بتتأكد إنه الرجوع يتم بدون مشاكل.

مشاكل ممكن تواجهها مع Rollback Compatibility:

📌 فقدان البيانات: لو الإصدار الجديد أضاف ميزات أو تغييرات كبيرة، ممكن لما ترجع للإصدار القديم تفقد بعض البيانات.

📌 عدم توافق الميزات: بعض الميزات الجديدة ممكن ما تشتغل بشكل سليم إذا رجعت للإصدار القديم.

📌 التعقيد التقني: تطبيق Rollback Compatibility بيزيد من تعقيد النظام، لأنك لازم تضمن إنه كل إصدار يشتغل مع الإصدارات السابقة بدون مشاكل.

إذا بتحب تضمن استقرار النظام وتجنب أي مشاكل بعد التحديثات، Rollback Compatibility بيكون عنصر أساسي. فشو رأيك؟ بتفضل يكون عندك هالنوع من الأمان بنظامك لتقدر تتراجع عن أي خطوة بكل سهولة؟


Facebook | Linkedin |Instgram | Telegram | YouTube

===================

أنا Somar Kesen أعمل كـ Full Stack Developer أنشر بشكل شبه يومي منشورات تحتوي على العديد من المعلومات عن تطوير البرمجيات و سوق العمل مستخلصة من خبرة سنين في العمل مع العديد من الشركات في الشرق الأوسط و أوروبا ضمن هذا المجال

شكراً لـ Yousef Saleh على المساعدة في إعداد هذا المحتوى.

هل معنا حدا متعامل مع Cloud Panel و Hostinger VPS بشكل عام ؟

إذا كنت web developer، فهذا لا يعني فقط أنك تكتب كود وبيطلع عندك الموقع شغال. في كتير أمور لازم تهتم فيها لتكون developer ناجح، مثل سرعة الموقع وسهولة فهم الكود والتعديل عليه. باختصار، لازم نولي نفس الاهتمام لأداء الموقع مثل ما نهتم ببنائه.

واليوم رح أعطيك بعض النصائح إذا كنت عم تستخدم React لتحسين performance وتشوف السرعة والأداء المثالي.

أول شي، استخدم lazy loading. شو يعني؟ هو آلية لتحميل المكونات والموارد عند الحاجة بس، مو كله دفعة وحدة بالبداية. هاد الشي بيساعد على:

تقليل وقت التحميل الأولي: لأن جزء من التطبيق بس هو اللي بينحمل بالبداية.
توفير الموارد: بيتم تحميل المكونات بس لما المستخدم يحتاجها.
تحسين تجربة المستخدم: بيساعد على التفاعل بسرعة أكبر مع التطبيق.
الخطوة التانية، استخدم React.memo. هي دالة بتقلل من إعادة عرض (render) المكونات لما الـ props ما تتغير، وهالشي بيحسن أداء المكونات اللي بتستقبل بيانات ثابتة.

الخطوة الثالثة، استخدم useMemo وuseCallback. الفرق بينهم:

useCallback: بيخزن الدالة لتجنب إنشاء دالة جديدة في كل إعادة عرض.
useMemo: بيخزن القيم المحسوبة لتجنب إعادة حسابها في كل مرة.
رابعاً، حسّن استعلامات البيانات باستخدام تقنيات مثل GraphQL لتقليل البيانات اللي عم تصارعها.

ولا تنسى تحسين استخدام الصور، وإزالة المكتبات غير المستخدمة، واستخدام code splitting. كمان، استخدم أدوات مثل React DevTools وProfiler لتحليل الأداء وتحديد نقاط الضعف.

باستخدامك هالنصائح رح تحسن أداء تطبيقات React، لكن لسه في كتير أمور تانية لتحسين الأداء.



Facebook | Linkedin |Instgram | Telegram | YouTube

===================

أنا Somar Kesen أعمل كـ Full Stack Developer أنشر بشكل شبه يومي منشورات تحتوي على العديد من المعلومات عن تطوير البرمجيات و سوق العمل مستخلصة من خبرة سنين في العمل مع العديد من الشركات في الشرق الأوسط و أوروبا ضمن هذا المجال

شكراً لـ Khder AL Romi على المساعدة في إعداد هذا المحتوى.

إذا سمعت بمفهوم الـ UX Design أو تصميم تجربة المستخدم، فهو ببساطة عن كيفية تحسين التفاعل بين المستخدم والتطبيق بطريقة سلسة ولطيفة. مثلاً، إذا كنت عم تحاول تسجل دخولك على تطبيق ولقيت أنو حقل الباسوورد صار لونه أحمر، هاد دليل من التطبيق لحتى تنتبه أنو في مشكلة بكلمة المرور. أو مثلاً لما تحمّل ملف وبيطلعلك دويرة صغيرة عم تدور، هاد بيعني "استنى شوي، نحن عم نشتغل على الملف".

هاد النوع من التفاصيل اللي منلاحظها بشكل يومي بكل التطبيقات اللي منستخدمها هو مثال على تصميم تجربة المستخدم. هاي التفاصيل بتوجّه المستخدم بطريقة غير مباشرة وبتعزز التفاعل مع التطبيق. الهدف الأساسي من تصميم تجربة المستخدم هو خلق تجربة ممتعة وسلسة تهتم بسلوك المستخدمين، بغض النظر عن اختلافاتهم.

وأهميتها بتكمن بالتالي:

تجربة إيجابية: لما بيكون التطبيق سهل الاستخدام، المستخدم بيضل يرجعله وبيصير عنده ولاء، يعني بيفضل يستخدمه دائماً.
تطبيق مميز: إذا عندك تطبيق بيقدم خدمة مشابهة لتطبيقات تانية، تجربة المستخدم المريحة رح تميّزه وتخلّي الناس تستخدمه لأنه أسهل وأكفأ، وبالتالي بتوفّر وقت وجهد.
إذا صادفت تجربة مستخدم عجبتك بتطبيق أو موقع، شاركنا برأيك فيها.

Facebook | Linkedin |Instgram | Telegram | YouTube

===================

أنا Somar Kesen أعمل كـ Full Stack Developer أنشر بشكل شبه يومي منشورات تحتوي على العديد من المعلومات عن تطوير البرمجيات و سوق العمل مستخلصة من خبرة سنين في العمل مع العديد من الشركات في الشرق الأوسط و أوروبا ضمن هذا المجال

شكراً لـLobana Balloul على المساعدة في إعداد هذا المحتوى.

العناوين و المحاور الرئيسية اللي رح تكون معنا خلال جلسة Git Like a PRO اللي رح نحاول خلال هي الجلسة انه نوصل بالجميع لمرحلة احتراف و اتقان للعمل على الـ Git و توظيفه بمشاريعهم سواءً الفردية او ضمن فريق.

و كالعادة بالجلسات السابقة رح شارككم نتائج هي الجلسة على الطلاب لنعرف تأثيرها و فائدتها عليهم.

انتظرونا 🔥🙏🏻

ليش منخزن بيانات بالمتصفح؟ السبب الرئيسي هو تسريع الأداء بدل ما نستنى استجابة الخادم، البيانات المخزنة محلياً بتكون جاهزة فوراً.

ممكن نخزن معلومات متل اسم المستخدم من الجلسة السابقة أو محتويات سلة التسوق لوقت ترجع تتصفح أو نحفظ بيانات مؤقتاً إذا فصل النت أو لتسريع تحميل الموقع.

شو هيي طرق التخزين:

1️⃣ Local Storage: 🔵 تخزن البيانات بدون تاريخ انتهاء صلاحية. 🔵 السعة التخزينية حوالي 5 ميغابايت. 🔵 ما في نقل بيانات للخادم. 🔵 مو آمنة 100% لأنها تنخزن كنص (string).

2️⃣ Session Storage: 🔵 بتخزن البيانات لجلسة وحدة وبتنحذف لما تسكر المتصفح. 🔵 سعتها من 5 لـ 10 ميغابايت. 🔵 كل نافذة أو تاب بتعمل جلسة تخزين خاصة فيها.

3️⃣ Cookies: 🔵 بتخزن البيانات وبتنرسل مع طلبات XHR للخادم. 🔵 حجم التخزين أقل من 4 كيلوبايت. 🔵 ممكن تحدد صلاحيتها من الخادم أو المستخدم.

حتى تتوسعوا بهي المعلومات بنصحكم تشوفوا المنشور الكامل عنهم من خلال الرابط في اول تعليق.


Facebook | Linkedin |Instgram | Telegram | YouTube

===================

أنا Somar Kesen أعمل كـ Full Stack Developer أنشر بشكل شبه يومي منشورات تحتوي على العديد من المعلومات عن تطوير البرمجيات و سوق العمل مستخلصة من خبرة سنين في العمل مع العديد من الشركات في الشرق الأوسط و أوروبا ضمن هذا المجال

نشالله رح نكرر الجلسة خلال الشهر القادم بعد ما تبين انه في عدد من الاشخاص مهتمين بالحضور الاعلان كالعادة بينزل هون

تذكير نهائي للاشخاص اللي سجلوا بالجلسة مراسلتي للانضمام للمجموعة الخاصة بالجلسة

مين الضيوف اللي بتحبوا يكونوا معنا بجلسات Live قادمة

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

إذا في موضوع او مجال حابب تعرف عنه اكتر او ضيف ببالك حابب تستفيد من خبرته اذكرلي بالتعليقات لحتى نشتغل على الموضوع

صباح الخير جميعاً

تمنياتي الكم باسبوع موفق و بداية اسبوع سعيدة.

خلونا نبدأ هالاسبوع بفقرة سؤال و جواب - رح كون معكم على هاد المنشور للإجابة على اسئلتكم.

إذا كان عندك اي سؤال بإمكانك تتركه بالتعليقات و رح نجاوب عليه بأقرب وقت.