هل معنا حدا متعامل مع 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 قادمة

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

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

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

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

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

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

اليوم وصلنا لـ 500 مشترك، رغم انقطاعي عن القناة فترة بسبب الضغط لكن لسا كان في مشاهدات و مشتركين و تفاعل على الفيديوهات.

نشالله منوصل للالف قريباً 🔥

https://www.youtube.com/channel/UCSteMo_qy4wi_L3T5G6zb1Q

WordPress 6.7 Beta 2 is now available for testing!

لازم تشارك القناة مع كل شخص بتعرفه بيشتغل Word Press لأن عم تابع أخبار الموضوع أول بأول و رح يكون المحتوى مفيد الهم كتير

مبارح نزل خبر مهم للشباب اللي عم تستخدم Advanced Custom Fields (ACF) Plugin صار فيكم تستخدموا Secure Custom Fields (SCF) اللي هيي متلها تماماً و لكن آمنة و أكيد مجانية و فيك تشيل الـ ACF و تفعل بدالها SCF بدون اي مشاكل.

و على فكرة إذا موقعك ما اعتمد على تحديثات WP Engine ( شوف منشوراتي القديمة بتعرف شو قصدي )، فيك تعمل التحديث لـ SCF مباشرة، وإذا مفعل التحديثات التلقائية من Word Press، الموقع رح يتحدث تلقائياً للإضافة الجديدة.


Facebook | Linkedin |Instgram | Telegram | YouTube

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

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

شباب و صبايا الـ Frontend متاكل حقهم لهيك رح نحرك الجو شوي.

اللي بيشتغلوا Responsive Design شاركونا بالتعليقات نصائح لضمان نجاح التنفيذ

إذا كنت عم تكتب كود وبتلاقيه عم يقوم بعدة مهام بنفس الوقت، وقّف شوي وفكر: ليش ما أعطي كل مهمة لكلاس أو فنكشن لحالها؟

هاد يا جماعة مبدأ SRP أو Single Responsibility Principle، وبيقول إنو كل جزء من الكود، سواء كان class أو function، لازم يملك مسؤولية واحدة و واضحة بدل من أنو يكون قسم واحد من الكود مسؤول عن عدد كبير من الوظائف

خلينا ناخد مثال عملي من Laravel. مثلاً، إذا كان عندك UserController بيقوم بأكتر من شغلة:

بيجيب بيانات المستخدمين،
بيعدل البيانات،
وبيبعث إشعارات للمستخدمين!
الأنسب إنك تفصل المهام:

UserController بيجيب وبيعدل بيانات المستخدمين.
وتعمل NotificationService منفصل مسؤول عن إرسال الإشعارات.

بهالطريقة خلينا عملية اختبار و إعادة استخدام الكود اسهل و افضل.

شو رأيكم بهالمبدأ؟ بتشوفوا حالكم عم تطبقوا SRP بكودكم اليومي؟ أو بتواجهوا صعوبة بفصل المهام؟

شاركوا تجاربكم أو أسئلتكم بالتعليقات وخبرونا كيف بتحسنوا الكود بفضل هالمبدأ 💬👇

بحاجة شخص يكون Graphic Designer يساعدنا بموضوع التصاميم إذا بتعرفوا حدا او انتوا قادرين حاكوني بالتعليقات حتى نتواصل

استعدوا لأول حلقاتنا بلقاء استثنائي! 📢

ضيفتنا الآنسة سارة قطف، مؤسسة شركة Planlyze رح تكون معنا حتى نحكي خلال هاللقاء حول مجال تحليل النظم، وكيف ممكن نستخدمه لتحسين وتطوير المشاريع التقنية، ونتعرف على التحديات اللي بيواجهها المختصين بهالمجال.

الآنسة سارة رح تشاركنا بخبرتها الكبيرة اللي امتدت لـ 11 سنة في مجال المعلوماتية، البرمجة، والتحليل والإدارة، لتعطينا رؤى قيمة وأفكار عملية تساعدنا على النجاح بهالمجال.

إذا كنت مهتم أو حابب تتعلم أكتر، لا تفوت هالفرصة!

موعدنا يوم الجمعة الساعة 3 ظهراً بتوقيت سوريا.

💬 اسأل أسئلتك بالتعليقات ورح نجاوب عليها خلال الجلسة.

🔔 ملاحظة: الجلسة رح تكون مسجلة و رح تنزل على قناتي على يوتيوب. تابعونا! 👇

@sara_kataf