الموقع ده هيساعدك تقوي مهاراتك في عالم الـ System Design 💯
.
.

System Design Problems 💯

Practice High-Level Design (HLD) with our interactive whiteboard and get AI-powered feedback.

———

https://www.scalemock.com/hld

List Markers in CSS ✅

الفرق بين gRPC و REST – أيهما أقوى وليه ممكن تحتاج الـ gRPC؟ 🤔
.
.
لفترة طويلة، الـ REST كان كفاية جدًا علشان الـ APIs تتعامل مع بعضها. بس مع الوقت، ظهرت تحديات جديدة، وبدأنا نحتاج حلول أسرع، أخف، وأكتر كفاءة.

هنا ظهر الـ gRPC، بس هل ده معناه إن REST انتهى؟ لا طبعًا، كل واحد له مكانه واستخدامه. تعال نشوف الفرق بينهم وإمتى تستخدم كل واحد منهم...

———

1. طريقة الاتصال

- الـ REST: بيعتمد على HTTP 1.1، وكل Request بيبقى مستقل تمامًا عن اللي قبله. يعني كل مرة بتطلب حاجة، السيرفر بيحتاج يفتح Connection جديد ويرد عليك، وبعدها الـ Connection بيتقفل – لكن لو السيرفر بيدعم Keep-Alive (وهي ميزة في HTTP 1.1)، الـ Connection ممكن يفضل مفتوح لفترة، وده بيقلل المشكلة شوية. بس برضو، HTTP 1.1 مش بيدعم Multiplexing.

- الـ gRPC: بيستخدم HTTP/2، وده بيسمح بأنه يعمل Multiplexing، يعني يقدر يبعت أكتر من طلب في نفس الـ Connection بدون ما يستنى كل طلب يخلص الأول. النتيجة؟ أداء أسرع واستهلاك أقل للـ Resources

———

2. نقل البيانات

- الـ REST: بيعتمد على JSON في أغلب الحالات، وده فورمات سهل القراءة بس مش الأمثل من حيث السرعة أو حجم البيانات. لكن REST مش مقتصر على JSON؛ ممكن تستخدم XML أو حتى Plain Text لو عايز، بس JSON هو الأكثر شيوعًا.

- الـ gRPC: بيعتمد على Protocol Buffers (Protobuf)، وهو Binary Format مضغوط جدًا، وأسرع بكتير في الـ Serialization/Deserialization من JSON
———

3. الأداء

- الـ REST: بيستهلك Bandwidth أعلى بسبب الـ JSON (أو أي Text Format) والـ Headers الكبيرة اللي في كل Request.

- الـ gRPC: أخف وأسرع لأنه بيستخدم Binary Encoding وبيحافظ على Connection مفتوح طول الجلسة.
———

4. الـ Code Generation

- الـ REST: لو عايز تكتب Client، لازم تبنيه يدويًا وتتعامل مع الـ HTTP Requests بنفسك.

- الـ gRPC: بيديك Code Generation جاهز بلغات كتير (JavaScript, Python, Go, etc.)، يعني تقدر تكتب الـ API مرة واحدة بس والـ Clients في لغات مختلفة تستهلكها بسهولة.

———

5. دعم الـ Streaming

- الـ REST: مش بيدعم الـ Streaming بشكل Native، ولو عايز تعمل حاجة شبه كده هتحتاج حلول زي WebSockets. لكن لو بتستخدم HTTP/2 مع REST، ممكن تستفيد من Server-Sent Events كحل جزئي، بس ده مش شائع.

- الـ gRPC: بيدعم Bi-directional Streaming، يعني الكلاينت والسيرفر يقدروا يبعتوا بيانات لبعض بشكل متزامن من غير ما يستنوا بعض.

———

6. التوافقية مع الـ Browsers

- الـ REST: بيشتغل في أي مكان، أي متصفح، وأي بيئة بدون مشاكل.

- الـ gRPC: ما بيشتغل مباشرة في المتصفح لأنه بيعتمد على HTTP/2 و Protobuf، لكن ممكن تدمجه مع gRPC-Web علشان تتعامل مع المتصفحات.

———

📌 إمتى تستخدم REST؟

✅ لو الـ API بتاعك هيشتغل مع المتصفحات مباشرة.
✅ لو عايز حل سهل، موثق كويس، ومعروف عند أغلب المطورين.
✅ لو بتتعامل مع سيرفرات مش بتدعم gRPC أو مش عايز تبني حاجة معقدة.

———

📌 إمتى تستخدم gRPC؟

🚀 لو عندك Microservices Architecture وعايز أداء سريع واستهلاك قليل.
🚀 لو بتتعامل مع Mobile Apps أو IoT Devices وعايز تقلل الـ Bandwidth.
🚀 لو عايز تعمل Real-time Communication بين الـ Services.

———

الـ REST مش رايح في أي حتة، ولسه مناسب لمعظم الاستخدامات. لكن لو بتبني سيستم معقد، وعايز كفاءة أعلى، وخصوصًا لو عندك Microservices أو High-performance Systems، الـ gRPC ممكن يكون الحل الأمثل لك.

بفضل الله تم نشر مقال جديد في مدونة Level Up Coding على منصة Medium 🔥

Page Pagination (Offset) vs Cursor Pagination: A Practical Guide for Developers & SEO Professionals

📌 Pagination is the technique of dividing large datasets into smaller, manageable chunks (pages) to improve performance, usability, and content discoverability.

https://levelup.gitconnected.com/page-pagination-offset-vs-cursor-pagination-a-practical-guide-for-developers-seo-professionals-489624914905

مقياس طويق لتحديد الميول التقني💡

يساعدك هذا الاختبار من معرفة المجالات المناسبة لميولك التقنيّة، بين أهم المجالات التقنيّة الأكثر احتياجًا في سوق العمل وتقنيات المستقبل.

https://assessment.tuwaiq.edu.sa

الفرق بين SSR و CSR و SSG 💯
.
.
في عالم الويب، لما بتيجي تختار الطريقة اللي هيتم بها عمل (Render) لصفحات الموقع بتاعك، أكيد قابلت المصطلحات دي:

📌 الـ Server-Side Rendering (SSR)
📌 الـ Client-Side Rendering (CSR)
📌 الـ Static Site Generation (SSG)

تعال ندردش شوية ونعرف الفرق بينهم وإمتى تختار كل واحد منهم وشوية تفاصيل لذيذة...

———

📍 الـ Server-Side Rendering (SSR):

الـ SSR يعني الصفحة بيحصل لها "Rendering" بالكامل في السيرفر قبل ما توصل للمستخدم. يعني أول لما المستخدم يفتح الموقع، السيرفر بيعمل معالجة للبيانات ويرجع صفحة HTML كاملة.

✅ مميزاته:
- أسرع في أول تحميل للصفحة (First Contentful Paint)، لأن الصفحة بتوصل جاهزة.
- ممتاز للـ SEO، لأن محركات البحث زي Google بتقدر تفهم الصفحة بسهولة.
- مفيد جدًا لو عندك محتوى بيتغير كتير أو بناءً على بيانات المستخدم (زي الصفحات الشخصية أو الـ Dashboards).

❌ عيوبه:
- وقت استجابة السيرفر (Server Response Time) ممكن يبقى طويل مع الضغط الكبير.
- السيرفر نفسه محتاج يبقى قوي عشان يقدر يتعامل مع عدد المستخدمين.

⚡️ أمثلة:
- مواقع الأخبار اللي محتواها بيحتاج تحديث لحظي.
- مواقع التجارة الإلكترونية زي Amazon (محتوى متغير ومهم للـ SEO).

———

📍 الـ Client-Side Rendering (CSR):

في الـ CSR الـ Render بيحصل في جهاز المستخدم. يعني السيرفر بيبعت ملف HTML بسيط مع JavaScript، والـ JavaScript دي بتتكفل بكل حاجة بعد كده.

✅ مميزاته:
- أسرع بعد أول تحميل للصفحة، لأن الـ JavaScript بتحول التطبيق لحاجة ديناميكية وسريعة.
- مناسب جدًا للـ SPAs (Single Page Applications).
- تقليل العبء على السيرفر مقارنة بـ SSR.

❌ عيوبه:
- الـ SEO ضعيف شوية، لأن محركات البحث ساعات بتواجه صعوبة في قراءة المحتوى.
- أول تحميل للصفحة ممكن يبقى بطيء (Initial Load Time) لأن الجهاز بيحتاج يحمّل كل الـ JavaScript.

⚡️ أمثلة:
- تطبيقات زي Gmail أو Trello اللي المستخدم بيتفاعل معاها كتير بعد التحميل الأول.
- أي حاجة فيها Dynamic Interactions كتير.

———

📍 الـ 3. Static Site Generation (SSG):

الـ SSG يعني كل الصفحات بيحصل لها "Render" مرة واحدة أثناء الـ Build Time (وقت بناء الموقع). والصفحات دي بتتبعت للمستخدم جاهزة من غير معالجة إضافية.

✅ مميزاته:
- أسرع حاجة في التحميل (Load Time) لأن الصفحة ثابتة وجاهزة.
- ممتاز جدًا للـ SEO.
- مفيش عبء على السيرفر تقريبًا، لأن الصفحات كلها جاهزة وموجودة على CDN (شبكة توصيل المحتوى).

❌ عيوبه:
- مش عملي للمواقع اللي محتواها بيتغير باستمرار (Dynamic Content).
- لو عندك عدد ضخم من الصفحات، وقت الـ Build هيبقى طويل جدًا.

⚡️ أمثلة:
- المدونات (Blogs) زي Gatsby أو Hugo.
- المواقع اللي محتواها ثابت زي المواقع التعريفية (Portfolio Websites).

———

📌 إمتى تستخدم إيه؟

- الـ SSR: لو محتاج محتوى ديناميكي مع SEO ممتاز.
- الـ CSR: لو بتعمل SPA ومش محتاج SEO قوي.
- الـ SSG: لو عندك محتوى ثابت وعايز سرعة عالية في التحميل.

Stop writing CSS like it's 2015

Modern CSS code snippets, side by side with the old hacks they replace. Every technique you still Google has a clean, native replacement now.

https://modern-css.com

إزاي الموقع بيظهر قدامك في المتصفح؟ 🤔
.
.
ببساطة الـ Critical Rendering Path هو "الطريق اللي بيمشي فيه المتصفح عشان يقدر يحول الكود بتاعنا (HTML, CSS, JavaScript) لشكل مرئي للمستخدم."

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

———

📌 LinkedIn:
https://www.linkedin.com/posts/dev-alisamir_frontend-webdeveloper-frontenddeveloper-activity-7432862974408777730-rB8Y

📌 Qabilah:
https://qabilah.com/posts/فهم-الـ-critical-rendering-path-خطوات-تسريع-ظهور-صفحات-الويب~219532766721605632

دردشة سريعة عن الـ API Gateway 💯
.
.
لو بتشتغل على مشروع كبير أو على بيئة Microservices معقدة، أكيد هتحتاج تتعامل مع الـ API Gateway، لأنها ببساطة بتشتغل كـ "بوابة" أو وسيط بين المستخدمين (Clients) وبين مجموعة الخدمات اللي بيقدمها التطبيق.

———

📌 يعني إيه API Gateway؟

خلينا نقول إنك بتشتغل على مشروع كبير زي موقع بيع منتجات، وفيه خدمات كتير مستقلة، زي خدمة للمشتريات، خدمة للدفع، خدمة للمخزون، وخدمة للملف الشخصي.

الـ API Gateway هي الجزء اللي بتستلم الطلبات من الـ Clients (زي تطبيق الموبايل أو الويب) وتوجهها للـ Microservice الصحيحة.

يعني بدل ما التطبيق يبعت طلب مباشر لكل خدمة ويضيع وقت في فهم مسارات كتير، الـ API Gateway بتستقبل الطلب وتنفذه وتبعت البيانات للي عاوزها.

———

📌 الـ API Gateway بتعمل إيه بالضبط؟

✅ توجيه الطلبات: لما ييجي طلب من العميل، الـ API Gateway بتختار الخدمة المناسبة اللي هتقدر تستجيب للطلب ده وتبعته لها.

✅ توحيد البيانات: لو عندك خدمات مختلفة والعميل محتاج بيانات من أكتر من خدمة، الـ API Gateway بتجمع البيانات دي كلها وترجعها للعميل في رد واحد.

✅ التحكم في الأمان: بتسمح لك تعمل قواعد الأمان زي التحقق من الهويات (Authentication) والترخيص (Authorization)، عشان تضمن إن الطلبات اللي جايه كلها من مصادر موثوق فيها.

✅ التحكم في المعدل (Rate Limiting): تقدر من خلالها تحدد عدد الطلبات اللي ممكن يجريها العميل في وقت معين، بحيث تحمي خدماتك من أي ضغط غير طبيعي أو هجمات زي DDoS.

✅ التوجيه الديناميكي (Dynamic Routing): لو عندك إصدارات مختلفة من نفس الخدمة، تقدر تحدد أي إصدار يستخدمه الـ Client أو تغير التوجيه حسب الوقت أو حسب الـ Load.

✅ التحسين والأداء (Caching): ممكن كمان تقوم بعمل Cache للطلبات اللي بيتكرر استخدامها، وده بيساعد في تخفيف الحمل على الخدمات.

———

📌 ليه مهم نستخدم الـ API Gateway؟

لو عندك تطبيق بيدير أكتر من خدمة، التعامل المباشر بين العميل وكل خدمة على حدة ممكن يبقى معقد ويتطلب وقت طويل، وده بيأثر على أداء التطبيق.

هنا بقى بييجي دور الـ API Gateway اللي بتسهل التعامل وتوفر طريقة منظمة وبسيطة للتفاعل مع الخدمات.

كمان، لو محتاج تطبق سياسات الأمان بشكل موحد، أو محتاج تعمل Analytics للطلبات اللي بتيجي، يبقى الـ API Gateway هي المكان الصح اللي تعمل فيها كل ده، لأنها نقطة التحكم الرئيسية اللي بتشوف وتتحكم في كل الطلبات اللي جاية ورايحة بين العميل والخدمات.

———

📌 أدوات ومكتبات الـ API Gateway

فيه أدوات كتير تقدر تستخدمها كـ API Gateway، زي:

⚙️ Kong
⚙️ NGINX
⚙️ AWS API Gateway
⚙️ Zuul

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