DevGuide

📌 What is Availability in System Design? ——— #system_design

Implementing Middleware in Next.js 💯 Next.js middleware is ideal for request interception, conditional routing, setting headers, and rewriting URLs, especially for edge-optimized, real-time applications. --- #frontend

You can now set Claude Code's output style to Concise. ⚡️ Claude leads with the result, keeps responses short, and still gives full detail when you ask. Turn it on in /config → Output style, or set "outputStyle": "Concise" in settings.json. ——— #ai

مصطلحات مهمة في عالم الـ System Design 💯 (٩) . . في البوست اللي فات وصلنا لمرحلة إن الـ Client والـ Server بقوا قادرين يتواصلوا بشكل لحظي باستخدام WebSockets. وده حل مشكلة مهمة جدًا: إزاي السيرفر يبعت تحديث للـ Client في نفس اللحظة من غير ما الـ Client يفضل يسأل كل شوية "فيه حاجة جديدة؟" لكن لسه عندنا سيناريو تاني. إيه اللي يحصل لو Service محتاجة تبلغ Service تانية إن حاجة حصلت؟ مثلًا، لو المستخدم دفع أونلاين، نظام الدفع محتاج يبلغ الـ Backend بتاعنا إن عملية الدفع نجحت. هل هنفضل نعمل Requests كل شوية ونسأل: "الدفع نجح ولا لا؟" مش أفضل حل. ——— 📌 Webhooks الـ Webhook فكرته بسيطة جدًا. بدل ما أنت تفضل تسأل Service تانية إذا حصل Event جديد، بتديها URL عندك، وتقول لها: "لما الحدث ده يحصل، ابعتيلي Request هنا." خلينا ناخد مثال واضح. لو المستخدم دفع عن طريق Stripe، بدل ما النظام بتاعك يفضل يسأل Stripe كل شوية: "الدفع نجح؟" منصة Stripe نفسها تبعتلك HTTP POST Request على الـ Webhook URL بتاعك أول ما عملية الدفع تنجح. وده بيوفر Requests كتير وبيخلي التواصل بين الأنظمة أكثر كفاءة. لكن تخيل إن التطبيق بقى كبير جدًا. بدل ما يكون عندك Service واحدة، بقى عندك مجموعة Services زي الـ  Payments و Orders و Inventory Shipping و Notifications... هل منطقي كل الوظائف دي تفضل داخل نفس التطبيق وتتواصل مع بعض بشكل مباشر؟ ——— 📌 Microservices في البداية، ممكن تبني التطبيق كله كـ Monolith. يعني كل الخدمات اللي فوق دي تبقى موجودة في تطبيق واحد. وده مش شيء سيئ، بالعكس، الـ Monolith ممكن يكون اختيار ممتاز جدًا لتطبيق صغير أو في بداية المشروع. لكن مع نمو التطبيق، الكود بيكبر، والـ Dependencies بين الأجزاء بتزيد، وأي تغيير في جزء من النظام ممكن يأثر على أجزاء تانية. فممكن نبدأ نقسم التطبيق إلى Services أصغر. مثلًا: • الـ Payment Service مسؤولة عن الدفع. • الـ Order Service مسؤولة عن الأوردرات. • الـ Inventory Service مسؤولة عن المخزون. • الـ Notification Service مسؤولة عن الإشعارات. كل Service تبقى مسؤولة عن جزء واضح من النظام، وتقدر تطور فيها وتعمل لها Deploy وتعمل لها Scaling بشكل مستقل. لكن هنا تظهر مشكلة جديدة. لو عندي عشرات الـ Services، وكل Service محتاجة تتواصل مع Service تانية، هل كل واحدة هتفضل تبعت HTTP Request للتانية وتستنى الرد؟ ممكن، لكن مش كل العمليات محتاجة Response فوري. وأحيانًا لو Service واحدة بطيئة أو واقعة، مش منطقي نخلي باقي النظام كله يستناها. وده بالضبط اللي بيخلينا نحتاج Message Queues. ——— 📌 Message Queues تخيل إن المستخدم عمل Checkout. دلوقتي فيه كذا حاجة ممكن تحصل: لازم نعمل Payment، ونحدّث Inventory، ونبعت Notification، وممكن نبدأ تجهيز الـ Shipping. هل لازم الـ Order Service تستنى كل الخدمات دي تخلص واحدة واحدة قبل ما ترد على المستخدم؟ مش بالضرورة. ممكن بدل كده تحط Message في Queue وتقول: "فيه Order جديد محتاج يتعالج." الـ Queue تحتفظ بالرسالة، والـ Service المسؤولة عن تنفيذ المهمة تاخدها لما تكون جاهزة. يعني عندنا طرف بيبعت الرسالة اسمه Producer، وطرف بيستقبلها ويعالجها اسمه Consumer. الميزة هنا إن الـ Services مش لازم تكون مرتبطة ببعض بشكل مباشر. لو الـ Payment Service مشغولة، الرسائل تفضل في الـ Queue لحد ما تقدر تعالجها. ولو حصل ضغط كبير، ممكن تزود عدد الـ Consumers علشان تعالج عدد أكبر من الرسائل في نفس الوقت. وده بيخلي النظام Scalable و Fault Tolerant، وبيفصل الـ Services عن بعض بشكل أفضل. من أشهر الأدوات اللي بتستخدم للفكرة دي Kafka و RabbitMQ و Amazon SQS. ——— 💡 الخلاصة النهارده عرفنا إزاي الـ Services المختلفة ممكن تتواصل مع بعض من غير ما كل حاجة تبقى مرتبطة بشكل مباشر: • الـ Webhooks: الـ Service تبعتلك Notification لما Event معين يحصل، بدل ما تفضل تسألها كل شوية. • الـ Microservices: تقسيم التطبيق الكبير إلى Services أصغر، كل واحدة مسؤولة عن جزء محدد. • الـ Message Queues: وسيط بيخلي الـ Services تتواصل بشكل Asynchronous، بحيث الـ Producer يحط الرسالة والـ Consumer يعالجها لما يكون جاهز. ——— دلوقتي عندنا نظام فيه Services كتير، والـ Message Queue ساعدتنا نفصل بينهم ونمنع الضغط من الانتقال من Service للتانية. لكن إيه اللي هيحصل لو Client بدأ يبعت آلاف الـ Requests في الثانية على الـ Public APIs بتاعتنا؟ هل هنسيبه يبعت براحتـه؟ أكيد لا. وده اللي هنتكلم عنه في البوست الجاي مع Rate Limiting و API Gateway ونتعرف على مصطلح Idempotency. ——— #system_design

Real-Time WebSockets Course | Build a Live Sports Dashboard with Node.js & PostgreSQL 🚀 https://youtu.be/pbOXOY78dNA ——— #web

قد تكتب سطرًا برمجيًا، فينتفع به آلاف المسلمين، ويجري لك أجره ما دام يُنتفع به. يمضي كثير من الطلاب والخريجين عطلتهم الصيفية في تعلم تقنيات جديدة أو تنفيذ مشاريع شخصية، بحثًا عن خبرة عملية وفرصة لبناء معرض أعمالهم. وفي الوقت نفسه أصبح القرآن الكريم اليوم حاضرًا في آلاف التطبيقات والمواقع والمنصات الرقمية، ويقف خلف هذه التطبيقات مطورون يبنون مكتبات وأدوات ومحركات بحث وواجهات برمجية ومشاريع مفتوحة المصدر يعتمد عليها الآخرون، وتحتاج إلى مطورين يساهمون في تطويرها واستمرارها. ومن هنا جاءت حملة كود يخدم القرآن. فرصة صيفية للمطورين للمشاركة في مشاريع حقيقية تخدم القرآن الكريم، واكتساب خبرة عملية في بيئات تطوير احترافية، مع الإسهام في بناء أدوات ومكتبات وبنية تحتية قد ينتفع بها آلاف المستخدمين والمطورين من بعدهم. سواء كانت هذه أول مساهمة لك في عالم المصدر المفتوح، أو كنت مطورًا ذا خبرة تبحث عن مشروع يحدث أثرًا حقيقيًا... فستجد في هذه الحملة مشروعًا يمكنك أن تضيف إليه قيمة حقيقية. نجتمع لمدة شهرين حول مشاريع حقيقية، نطورها معًا، ونبني ما ينتفع به الناس بإذن الله. https://community.itqan.dev/d/644

Learn AI for free directly from top companies. 💯 1- Anthropic: http://anthropic.skilljar.com 2- Google: http://grow.google/ai 3- Meta: http://ai.meta.com/resources 4- NVIDIA: http://developer.nvidia.com/cuda 5- Microsoft: http://learn.microsoft.com/en-us/training 6- OpenAI: http://academy.openai.com 7- IBM: http://skillsbuild.org 8- AWS: http://skillbuilder.aws 9- http://DeepLearning.AI: http://deeplearning.ai 10- Hugging Face: http://huggingface.co/learn ——— #ai

مصطلحات مهمة في عالم الـ System Design 💯 (٨) . . لحد دلوقتي كنا بنتكلم عن البيانات. يعني Users و Products و Orders... وكلها بيانات بتتخزن في قاعدة البيانات بشكل طبيعي. لكن خليني أسألك سؤال. لما ترفع صورة على Facebook، أو فيديو على YouTube، أو PDF على Google Drive... هل الملفات دي بتتخزن داخل الـ Database؟ الإجابة إن قواعد البيانات فعلًا تقدر تخزن ملفات، لكن في الأنظمة الكبيرة غالبًا مش بيكون ده أفضل اختيار. لأن تخزين الملفات الكبيرة داخل قاعدة البيانات بيكون أقل كفاءة، وأصعب في التوسع، وغالبًا أعلى تكلفة. علشان كده الأنظمة الكبيرة بتستخدم حل مخصص لتخزين الملفات. ——— 📌 Blob Storage الـ Blob اختصار لـ Binary Large Object. ببساطة، هو مكان مخصص لتخزين الملفات الكبيرة، زي: - الصور - الفيديوهات - ملفات PDF - ملفات الصوت - أي File المستخدم يرفعه بدل ما نخزن الملف نفسه داخل قاعدة البيانات، بنخزنه في Blob Storage، ونحفظ في الـ Database مجرد رابط الملف أو الـ Metadata الخاصة به. تخيل إن عندك مكتبة. الـ Database هي فهرس الكتب. لكن الكتب نفسها موجودة في المخزن. لما حد يطلب كتاب، الفهرس يقولك هو موجود فين، وبعدها تروح تجيبه. وده نفس اللي بيحصل. علشان كده خدمات زي: - Amazon S3 - Google Cloud Storage - Azure Blob Storage اتعملت مخصوص للغرض ده. لكن حتى لو الملف متخزن في Blob Storage، لسه فيه مشكلة. ماذا لو المستخدم موجود في مصر، والملف موجود على سيرفر في أمريكا؟ ——— 📌 CDN (Content Delivery Network) تخيل إن عندك شركة لها فرع واحد في القاهرة. وكل العملاء في إسكندرية وأسوان والمنصورة لازم يروحوا القاهرة كل مرة. أكيد هيضيعوا وقت كبير. الحل الطبيعي إنك تفتح فروع في أماكن مختلفة. وده بالظبط اللي بيعمله الـ CDN. الـ CDN عبارة عن شبكة من السيرفرات موزعة في دول ومدن مختلفة. ولما المستخدم يطلب ملف لأول مرة، أو حسب إعدادات الـ CDN، بيتم الاحتفاظ بنسخة منه على سيرفرات قريبة من المستخدمين. بعد كده، أي مستخدم يطلب نفس الملف غالبًا هيوصله من أقرب سيرفر ليه، بدل ما يروح كل مرة للسيرفر الأصلي. وده بيقلل الـ Latency بشكل كبير، ويخلي الصور والفيديوهات تفتح أسرع. علشان كده معظم المواقع الكبيرة بتستخدم CDN، خصوصًا لو عندها مستخدمين من دول مختلفة. لكن كل اللي اتكلمنا عنه لحد دلوقتي بيعتمد على فكرة واحدة... الـ Client يطلب، وبعدها السيرفر يرد. طيب لو السيرفر هو اللي عايز يبعت بيانات من نفسه، من غير ما المستخدم يطلب؟ ——— 📌 WebSockets خلينا ناخد مثال. أنت فاتح تطبيق واتساب. وصاحبك بعتلك رسالة. إزاي الرسالة ظهرت عندك فورًا؟ هل التطبيق كل ثانية بيبعت Request للسيرفر يسأله: "فيه رسالة جديدة؟" الطريقة دي اسمها Polling، وكانت وما زالت بتستخدم في بعض الحالات، لكنها بتستهلك Requests كتير بدون داعي. عشان كده في التطبيقات اللي محتاجة تحديثات لحظية، بنستخدم WebSockets. الـ WebSocket بيعمل اتصال مستمر بين الـ Client والـ Server. بدل ما كل شوية نفتح Connection جديد، الاتصال يفضل مفتوح. وبالتالي أول ما يحصل أي تحديث، السيرفر يقدر يبعته مباشرة للـ Client. وده السبب إننا بنستخدم WebSockets في تطبيقات زي: - WhatsApp - Messenger - Slack - Discord - Live Notifications - Live Dashboards لأنها محتاجة البيانات توصل في نفس اللحظة تقريبًا. ——— 💡 الخلاصة النهارده عرفنا إزاي الأنظمة الكبيرة بتتعامل مع الملفات، وإزاي بتوصل التحديثات لحظيًا. • الـ Blob Storage: مكان مخصص لتخزين الملفات الكبيرة بدل قاعدة البيانات، مع الاحتفاظ بالرابط أو الـ Metadata داخل الـ Database. • الـ CDN: شبكة من السيرفرات بتحتفظ بنسخ من الملفات بالقرب من المستخدمين، علشان تقلل وقت التحميل والـ Latency. • الـ WebSockets: اتصال مستمر بين الـ Client والـ Server يسمح بإرسال التحديثات لحظيًا، بدل الاعتماد على إرسال Requests متكررة. ——— دلوقتي بقينا نعرف إزاي التطبيقات تخزن الملفات وتبعتها بسرعة للمستخدم. لكن التطبيقات الكبيرة مش بتكون Service واحدة. غالبًا بتكون عشرات أو مئات الخدمات، وكل Service محتاجة تتواصل مع التانية. وده اللي هنتكلم عنه في البوست الجاي، لما نتعرف على Webhooks و Microservices و Message Queues. ——— #system_design

#frontend

الفرق بين Hashing و Encoding و Encryption 🔐 . . وأنت بتشتغل في الباك إند، أو بتتعامل مع APIs، أو حتى بتشتغل على تطبيق بسيط فيه عملية تسجيل دخول… في الغالب قابلت مصطلحات زي Hashing و Encoding و Encryption. وممكن تفتكر إنهم شبه بعض، أو إن أي واحد فيهم "بيأمن البيانات وخلاص". لكن الحقيقة إن كل واحد له هدف مختلف تمامًا، ولو استخدمت حاجة غلط ممكن تفتح ثغرات أمنية وأنت مش واخد بالك. تعال ندردش شوية عن الفرق بينهم... ——— ✅ أولًا: الـ Hashing: تخيل إنك بتعمل بصمة لأي معلومة… مش علشان ترجع لها بعدين، لكن علشان تتأكد إنها متغيرتش. الـ Hashing بياخد قيمة (زي password مثلًا)، ويطلع منها سلسلة ثابتة الطول شكلها عشوائي – اسمها Hash – واللي بتستخدمها عشان تطابق أو تتحقق من البيانات من غير ما تحتاج تخزن الأصل. 🎯 المهم هنا: - العملية دي One Way (مفيش رجوع). - لو غيرت حرف واحد، الـ Hash كله بيتغير. - وده اللي بنستخدمه مثلًا لما نخزن الـ Passwords في قواعد البيانات. ⚠️ لو حد عرف الـ Hash، مش هيعرف يطلع منه الباسورد الأصلي (بس ممكن يعمل Brute Force ويحاول يخمنه). ——— ✅ ثانيًا: الـ Encoding: الـ Encoding هو طريقة بنحول بها البيانات لشكل تاني علشان يسهل تخزينها أو نقلها. زي Base64، اللي بتحول مثلًا صورة أو نص يحتوي رموز غريبة لشكل مفهوم لأي نظام. 🎯 المهم هنا: - العملية دي Two Way (تقدر ترجّع البيانات الأصلية). - مفيش أي حماية أو تشفير، أي حد يعرف نوع الـ encoding يقدر يفكه بسهولة. - الهدف منه بس إنك تنقل الداتا بدون ما تضيع أو تبوظ. مثال بسيط: لو عندك some text ممكن يتحول بـ Base64 إلى: c29tZSB0ZXh0 ——— ✅ ثالثًا: الـ Encryption: لو أنت عايز تبعت داتا سرية لحد، ومش عايز أي حد في النص يفهمها. هتعمل لها تشفير باستخدام مفتاح (Key)، والمستلم اللي معاه المفتاح يقدر يفكها. 🎯 المهم هنا: - العملية دي Two Way، بس لازم المفتاح. - لو المفتاح اتسرّب أو ضاع، أي حد يقدر يفك البيانات. - بتستخدمها في إرسال معلومات حساسة زي بطاقات الدفع أو بيانات المستخدمين. فيه نوعين من الـ Encryption: - الـ Symmetric: نفس المفتاح بيشفّر ويفك (زي AES). - الـ Asymmetric: مفتاحين، واحد بيشفّر (public) والتاني بيفك (private) – زي اللي بيستخدم في HTTPS.

#frontend

Software Testing with Playwright https://www.freecodecamp.org/news/software-testing-with-playwright

مصطلحات مهمة في عالم الـ System Design 💯 (٧) . . في البوست اللي فات عرفنا يعني إيه Replication و Sharding و Vertical Partitioning، وعرفنا إزاي نتعامل مع كميات ضخمة من البيانات. لكن حتى بعد كل ده، فيه سؤال مهم... هل كل Request لازم يروح للـ Database؟ تخيل إن الصفحة الرئيسية في موقعك بيدخلها مليون مستخدم في اليوم، وكلهم تقريبًا بيطلبوا نفس البيانات. هل منطقي إننا في كل مرة نروح نسأل الـ Database عن البيانات دي من أول وجديد؟ أكيد لا... لأن حتى أسرع Database لها حدود، وكل قراءة زيادة معناها ضغط أكبر، واستهلاك أعلى للموارد. ——— 📌 Caching الـ Cache عبارة عن مكان بنخزن فيه البيانات اللي بنستخدمها بشكل متكرر، بحيث لما حد يطلبها مرة تانية، نرجعها بسرعة بدل ما نروح لقاعدة البيانات. لو فيه عندك بيانات ثابتة معظم الوقت، ومبيحصلش عليها تغييرات كتير، فمش منطقي إن كل Request يروح للـ Database. أول Request لو البيانات مش موجودة في الـ Cache وده اسمه  (Cache Miss)، يجيبها من الـ Database ويحفظها في الـ Cache، وبعدها الطلبات التالية تعمل Cache Hit. وده واحد من أهم الأسباب اللي بتخلي التطبيقات تكون سريعة الاستجابة، وفي نفس الوقت بيقلل الضغط على قاعدة البيانات. لكن استخدام الـ Cache مش بيحل كل المشاكل. ——— 📌 Denormalization فاكر لما تكلمنا عن SQL Databases؟ وقتها قلنا إننا بنقسم البيانات على جداول مختلفة، علشان نقلل تكرار البيانات ونحافظ عليها منظمة. وده فعلًا أفضل تصميم في حالات كتير. لكن مع زيادة عدد المستخدمين، ممكن تلاقي إنك كل مرة تعرض صفحة واحدة، محتاج تعمل Join بين 4 أو 5 جداول. وده بيكلف قاعدة البيانات وقت ومجهود مع كل Request. هنا بعض الأنظمة بتاخد قرار مختلف. بدل ما تمنع تكرار البيانات، تسمح بتكرار جزء منها، مقابل إن القراءة تبقى أسرع. يعني مثلًا، بدل ما كل مرة تجيب اسم المستخدم من جدول Users، ممكن تخزن اسمه داخل جدول Orders نفسه. أيوه... البيانات بقت مكررة. لكن في المقابل، بقيت تقدر تجيب بيانات الأوردر في Query واحدة، من غير Joins كتير. وده اسمه Denormalization. لكن ليه تمن. لأن لو اسم المستخدم تغير، هتحتاج تحدثه في أكتر من مكان. ومن هنا تبدأ تكتشف إن الـ System Design معظمه عبارة عن Trade-offs. كل قرار بيحل مشكلة، لكنه في المقابل بيخلق تحديات جديدة. ——— 📌 CAP Theorem بعد ما بدأنا نستخدم أكتر من Database، وعملنا Replication و Sharding، كده إحنا دخلنا عالم الـ Distributed Systems. وفي العالم ده، فيه سؤال مهم جدًا... هل ينفع كل السيرفرات تشوف نفس البيانات، والنظام يفضل متاح للمستخدمين، حتى لو حصلت مشكلة في الشبكة؟ للأسف... لا. وده بالظبط اللي بتشرحه CAP Theorem. النظرية دي بتقول إن في الأنظمة الموزعة، لو حصل Network Partition، مش هتقدر تحقق كل المميزات في نفس الوقت. في الحالة دي، لازم تختار بين Consistency و Availability، لأن Partition Tolerance أصبحت مفروضة عليك. فهل الأهم إن كل المستخدمين يشوفوا نفس البيانات، حتى لو بعض الطلبات هتتأخر؟ ولا الأهم إن النظام يفضل شغال ويرد على المستخدمين، حتى لو بعض البيانات تكون لسه متحدثتش في كل السيرفرات؟ علشان كده هتلاقي إن مفيش Database أو Distributed System ينفع لكل السيناريوهات. كل واحد معمول علشان يوازن بين احتياجات مختلفة. ——— 💡 الخلاصة النهارده عرفنا 3 مفاهيم مهمين جدًا في تحسين أداء الأنظمة: • الـ Caching: تخزين البيانات المستخدمة باستمرار في مكان أسرع، لتقليل الضغط على قاعدة البيانات. • الـ Denormalization: تكرار جزء من البيانات لتقليل الـ Joins وتسريع عمليات القراءة. • الـ CAP Theorem: عند حدوث Network Partition، لازم تختار بين Consistency و Availability. ——— دلوقتي بقينا نعرف إزاي نخلي الوصول للبيانات أسرع. لكن... التطبيقات مش بتتعامل مع بيانات بس. إيه اللي بيحصل مع الصور، والفيديوهات، والملفات؟ وهل منطقي نخزنها كلها داخل قاعدة البيانات؟ ده اللي هنتكلم عنه في البوست الجاي، لما نتعرف على Blob Storage و CDN وكمان هنتكلم عن الـ WebSockets