DevGuide

🔰 Top DevOps Tools

The Only TypeScript Course You Need in 2025 💯 https://youtu.be/K01hLNDdqg4

فيه أوقات وأنت شغال على UI، بتحتاج تأخّر ظهور البيانات شوية عشان تشوف شكل الـ Skeleton أو الـ Loader أو حتى شكل الصفحة قبل ما يكون فيها أي بيانات. يعني مثلًا بتجيب بيانات من API، لكن الـ API سريع جدًا، فـ الـ Skeleton بيظهر نص ثانية ويختفي، وما بتلحق تشوف شكله عامل إزاي. الحل هنا إنك تعمل delay بسيط قبل الريكوست أو قبل عرض البيانات. ———

// utils.ts

/**
 * Sleep function to delay execution for a given number of milliseconds.
 * @param ms - Duration to wait in milliseconds
 */
export const sleep = (ms: number): Promise<void> => {
  return new Promise((resolve) => setTimeout(resolve, ms));
};

——— وتقدر تستخدمها في الكود بالشكل ده:

import { sleep } from './utils.ts'; 

const fetchData = async () => {
  await sleep(1000); // 1 second
  
  const res = await fetch('https://jsonplaceholder.typicode.com/users');
  const data = await res.json();

  return data;
};

——— خلي بالك لو أنت هتضيفها في مرحلة الـ Development متنساش تشيلها في الـ Production، وممكن تتحكم فيها من خلال env variable...

يعني إيه Hotfix؟ 🤔 . . الساعة 2 بالليل، الدنيا هادية، وفجأة يرن تليفونك أو يجيلك Slack message بيقولك: - الناس مش عارفة تدخل على السيستم - فيه حاجة غريبة بتحصل بعد الـ Login - الناس مش عارفة توصل لصفحة الـ Checkout والمبيعات وقفت في اللحظة دي، مفيش وقت تفكر في الـ Agile ولا تقول "نضيفها في الـ Sprint الجاية" كل الكلام ده بيقف مؤقتًا، لأن دلوقتي فيه حاجة واحدة بس بتفكر فيها: "إزاي تحل المشكلة بأسرع شكل ممكن؟" وهو ده المقصود بالـ Hotfix... ———

📌 يعني إيه Hotfix؟

الـ Hotfix ببساطة هو تعديل سريع جدًا بيتعمل على الكود الموجود في الـ production علشان يحل مشكلة ظهرت فجأة، وبتأثر على المستخدمين أو السيستم نفسه. يعني مثلًا، لو فجأة زرار الدفع اختفى، أو الناس مش عارفة تعمل Login، أو حصل Crash في تطبيق موبايل بعد التحديث الأخير…ده بيستدعي تدخل سريع جدًا بـ Hotfix. ———

📌 إمتى بنلجأ لـ Hotfix؟

- لو المشكلة ظهرت في الـ Production ومظهرتش في الـ Testing. - لو المشكلة بتأثر على عدد كبير من الناس أو على Revenue الشركة. - مش هينفع تنتظر للـ Release الجاي. ———

📌 إيه الفرق بينه وبين أي Bug Fix؟

الـ Bug Fix ممكن يتأجل ويتحط في الـ Backlog ويتحل في Sprint جاية. إنما الـ Hotfix هو ضروري جدًا، بيتعمل بسرعة، غالبًا خارج الـ Sprint، وبيتم Testing ليه بشكل سريع بردو. بس خد بالك...السرعة هنا مش معناها تسرّع. الـ Hotfix لازم يتعمل بدقة، ويتراجع كويس، ويتعمله Testing على قد ما نقدر، لأن أي غلطة هتطلع في الـ Production مباشرة. ———

⚙️ خطوات التعامل مع Hotfix (من واقع التجربة):

- الـ Identify: حد بيبلغك بالمشكلة، سواء QA أو Support أو Logs أو حتى Client. - الـ Reproduce: جرّب تشوف المشكلة بنفسك علشان تتأكد وتفهم أصلها. - الـ Fix Quickly: اعمل تعديل سريع بس بدون ما تبهدل الكود. - الـ Test: جرّب الحل كويس. لو فيه Automated Tests، شغّلها. - الـ Deploy مباشرة: غالبًا بيتم Deployment منفصل عن الـ Release Cycle. - الـ Merge للـ Main Branch: أحيانًا بيتعمل Patch للفرع الرئيسي، وبعدها لازم ترجع تدمج الـ Fix ده في الـ Develop أو Master علشان يفضل موجود. ———

⚠️ المشاكل اللي ممكن تقابلها مع Hotfix:

1- التسرّع يسبب مشاكل أكبر من الأصلية. 2- ممكن تعمل Conflict في الـ branches لو معملتش merge للتعديلات صح. 3- لو الفريق معندوش آلية CI/CD كويسة، ممكن الـ Deployment يكون صعب ورخم. 4- ممكن ناس من الفريق متبقاش Online وقت المشكلة وده هيطول فترة حلها. ———

💡 إزاي نجهّز نفسنا إننا نعمل Hotfix بشكل كويس؟

- يبقى عندك Logs قوية وسهلة البحث. - الـ Monitoring Tools تشوف منها المشاكل بسرعة. - يكون عندك Process واضحة للـ Hotfix: مين بيحل؟ مين بيراجع؟ مين بيعمل Deploy؟ - وثّق المشكلة والـ Fix علشان ما تتكرر. ——— بعد ما تعمل Hotfix، يفضل إنك تعمل Post-Mortem: يعني تتناقش مع الفريق إيه اللي حصل؟ ليه المشكلة دي وصلت للـ Production؟ وإزاي نمنعها المرة الجاية؟ ——— وفقكم الله لكل خير 🌿

إزاي الـ HTTPS بيشتغل؟ 🤔 . . تخيل معايا إنك بتبعت جواب لواحد صاحبك، بس الجواب ده فيه معلومات سرية زي كلمة سر أو رقم فيزا. لو بعته في ظرف عادي، أي حد في النص ممكن يفتحه ويشوف اللي فيه، ويقرر يستخدمه ضدك. إنما لو الجواب ده متشفر، ومقفول بقفل مش هيتفتح غير بمفتاح مع صاحبك بس، فالموضوع هنا بقى آمن ومفيش خوف من أي متطفل. هو ده بالضبط الفرق بين HTTP و HTTPS. الـ HTTP = الجواب العادي. الـ HTTPS = الجواب المشفر. تعال ندردش شوية ونشوف إزاي الـ HTTPS بيشتغل وبيأمّن الداتا بينك وبين أي موقع... ——— 🔗 LinkedIn: https://www.linkedin.com/posts/mentoor-io_webdevelopment-mentoor-softwaredevelopment-activity-7349830368893530112-HK-4 🔗 Qabilah: https://qabilah.com/posts/Y2HAs0OpQUg 🔗 Facebook: https://www.facebook.com/share/p/1Aur2dq9Bw

مفهوم الـ JavaScript Proxy 💯 . . عمرك دخلت على أوضة فيها مرايا في كل حتة؟ كل حركة بتعملها بتتشاف في المرايات من كذا زاوية، بس أنت في الآخر لسه بتتحرك في نفس الأوضة. تخيل بقى إن في الـ JavaScript فيه ميكانيزم بيعمل نفس الفكرة دي، بس مش لمراقبة حركتك، لمراقبة الـ object نفسه اللي بتتعامل معاه. الميكانيزم ده اسمه Proxy، واحد من أقوى الأدوات اللي ممكن تخلّي شغلك في الـ JavaScript فيه مرونة وتحكم عالي. ——— 🔗 LinkedIn: https://www.linkedin.com/posts/dev-alisamir_javascript-javascriptdeveloper-webdevelopment-activity-7349710022563479554-Z_MG 🔗 Qabilah: https://qabilah.com/posts/odUcoaVZ2jU

AI Python for Beginners

- Learn Python programming fundamentals and how to integrate AI tools for data manipulation, analysis, and visualization. - Discover how Python can be applied in various domains such as business, marketing, and journalism to solve real-world problems and enhance efficiency through practical applications. - Leverage AI assistants to debug code, explain concepts, and enhance your learning, mirroring real-world software development practices. ——— 🔗 https://www.deeplearning.ai/short-courses/ai-python-for-beginners

Line Clamp in CSS 🚀

Understanding Dynamic Routes 💯

Dynamic routes are a must if you're building anything scalable.

They turn your folder structure into real pages, with SEO, loading states, and clean URLs all built in.

Bash brackets cheat sheet ✅

Rest API Fundamentals 💯

ليه بنستخدم الـ ORM؟ 🤔 . . تعال ندردش شوية عن حاجة ممكن تغيّر طريقة شغلك مع الـ database وتوفّر عليك وقت ومجهود كبير جدًا… وهي الـ ORM. لكن قبل ما ندخل في التفاصيل تعال نرجع ورا شوية... فاكر أول مرة تعلمت فيها إزاي تتعامل مع الـ database؟ ——— 🔗 LinkedIn: https://www.linkedin.com/posts/mentoor-io_orm-database-backend-activity-7348410219284041728-uaep 🔗 Qabilah: https://qabilah.com/posts/ku4aLi4n2rs 🔗 Facebook: https://www.facebook.com/share/p/1BFsS16jZj

9 Essential Books Every Software Engineer Should Read ✅

Gallery Layout using CSS Grids in 5 steps 💯

مفهوم الـ End-to-End Test 💯 . . خلال رحلتك في عالم البرمجة، أكيد اشتغلت على Feature جامدة، وكنت متأكد إن الـ code شغال زي الفل. كتبت Unit Tests، وكل الـ functions بتـرجّع اللي المفروض ترجعه. بعد كده جربت الـ app بإيدك، كل حاجة ماشية حلو… بس لما رفعت الكود على الـ staging أو الـ production، فجأة حاجات وقعت! ⚠️ المشكلة هنا إن اللي أنت اختبرته مش كفاية... أنت اختبرت أجزاء صغيرة، لكن ما اختبرت الرحلة كاملة من أول ما الـ user يفتح الـ app لحد ما يوصل لهدفه. وهنا بييجي دور الـ End-to-End Testing (E2E)... ———

🎯 يعني إيه End-to-End Test؟

الـ End-to-End Test ببساطة هو نوع من أنواع الـ Testing اللي بيحاكي تصرفات الـ user الحقيقية. بنختبر الـ system كـ “صندوق أسود” من غير ما نهتم بالتفاصيل الداخلية، إحنا بس عاوزين نتأكد إن الـ app بيشتغل زي ما الـ user متوقع بالضبط، من أول خطوة لآخر خطوة. يعني بنبدأ من الـ UI، ونتفاعل مع الـ buttons والـ forms والـ links، وبنشوف هل الـ backend بيرد زي ما المفروض؟ هل الـ database اتحدثت؟ هل النتيجة اللي ظهرت للمستخدم منطقية؟ ———

📌 إمتى تستخدم الـ E2E؟

- لما تكون بتسلم Feature مهمة جدًا، زي عملية دفع أو تسجيل دخول. - لو الـ app فيه flows معقدة أو steps كتير وبتعتمد على بعض. - لما تحب تتأكد إن الـ integration بين الـ frontend والـ backend شغال تمام. - وقت الـ release، علشان تطمن إن الـ system ككل شغال سليم من الأول للآخر. ———

🛠 أشهر أدوات الـ End-to-End Testing

- الـ Cypress: سهل، واضح، بيشتغل على المتصفح، وبيخليك تـ debug بسهولة. - الـ Playwright: سريع وبيدعم browsers كتير، وممتاز للـ automation. - الـ Selenium: قديم وتقيل شوية، بس لسه ناس بتستخدمه عشان مرن وبيشتغل بلغات مختلفة. ———

⚙️ أمثلة على Scenarios ممكن نعملها E2E Test

- مستخدم بيسجل في الموقع، بيرجعله confirmation message. - مستخدم بيدخل بيانات كريدت كارد وبتتم عملية الدفع. - مستخدم بيعمل login وبيتنقل على الـ dashboard. - مستخدم بيبعت فورم contact us وتوصله رسالة تأكيد. ———

💡 ليه الـ E2E Tests مهمة؟

- بتمنع الـ regressions اللي ممكن تحصل بعد تغييرات كبيرة. - بتكشف bugs مش ممكن تكتشفها بالـ Unit أو الـ Integration tests. - بتديك confidence إن الـ system ككل شغال زي ما المفروض. - بتساعد الفريق كله (frontend, backend, QA) يكونوا مطمنين قبل أي release. ———

⚠️ بس خلي بالك...

الـ E2E Tests تقيلة في الـ execution، وبطيئة مقارنةً بالأنواع التانية. فعشان كده بنكتب منها بس الـ critical flows، مش كل حاجة. كمان أي تغيير بسيط في UI ممكن يكسرها… فلازم تكتبها بشكل كويس وقابل للصيانة. ———

💡 نصائح لو هتبدأ تكتب E2E Tests:

- ابني test لكل user journey مهمة. - حاول تعزل الـ data اللي بتستخدمه في التست (استخدم mocks أو test accounts). - حافظ على naming واضح وسهل في الـ tests. - شغّلها في CI/CD pipeline عشان تمسك المشاكل قبل ما توصل للناس. ——— الـ E2E Testing هو خط الدفاع الأخير، اللي بيأكد إن كل حاجة ماشية تمام من منظور المستخدم. وكمان هو اللي بيخليك ضامن إن الـ feature اللي تعبت فيها مش هتبوظ لما تطلع production. ——— وفقكم الله لكل خير 🌿

Deep Dive into React’s Reconciliation Algorithm: How It Works and How to Master It 💯 https://dev.to/alisamir/deep-dive-into-reacts-reconciliation-algorithm-how-it-works-and-how-to-master-it-2ih4

دورة GitHub Actions كاملة 💯 https://www.youtube.com/watch?v=7gJFHjXscr8

🔰 Docker crash course - how Docker works

What is an AI Agent?