بفضل الله وتوفيقه، تم نشر ثاني مقال في مدونة Level Up Coding على منصة Medium! 🚀

How to Build a Scalable Back-End with Zero Downtime Deployments 💡

In today’s digital landscape, businesses must ensure 24/7 availability to meet user expectations. A scalable back end with zero downtime deployments is essential, not optional.

This article presents a straightforward approach to building an efficient back end that scales seamlessly and deploys without disruption, keeping users satisfied.

———

🔗 Link To Article:

https://medium.com/gitconnected/how-to-build-a-scalable-back-end-with-zero-downtime-deployments-6f10b6d1f389

إزاي تعمل Commit صح في Git؟ ✅
.
.
الـ Commit في Git تعتبر "لحظة حفظ" للتغييرات اللي عملتها في مشروعك. يعني لو فيه حاجة حصلت وحبيت ترجع لها بعدين، تقدر تلاقي الـ Commit ده. لكن عشان يكون شغلك مميز، لازم تعمل Commit صح. 💡

———

1- اعمل Commit صغير ومنظم

لازم الـ Commit يكون خاص بتغيير معين أو ميزة معينة، يعني متعملش Commit كبير جدًا فيه شوية حاجات مش مترابطة. خليك دايمًا مركز في حاجة واحدة، زي "إصلاح bug في الصفحة الرئيسية" أو "إضافة زر جديد للتسجيل".

2- اكتب رسالة Commit واضحة

رسالة الـ Commit هي اللي هتشرح للناس (وأنت كمان بعد مدة) إيه اللي اتحسن أو اتغير في الكود. خلي الرسالة مختصرة وواضحة. زي:

- "Fix login issue" 👨‍💻
- "Add user profile page" 👤

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

3- استخدم صيغة الزمن الحاضر

خلي الرسالة مكتوبة في الزمن الحاضر. يعني لو هتكتب عن إضافة ميزة جديدة، اكتب "Add new feature" بدل "Added new feature". دايمًا خلي الكلام بسيط ومباشر.

4- افصل بين التغييرات باستخدام أكثر من Commit

متعملش Commit لكل حاجة مع بعض. يعني لو عدلت على أكثر من جزء في المشروع، خلي كل Commit له حاجة واحدة، كده لو حصل مشكلة في حاجة معينة، هتكون عارف الـ Commit اللي تسبب فيها.

5- متعملش Commit للـ Files المؤقتة أو اللي فيها بيانات سرية

زي ملفات الـ logs أو الملفات المؤقتة (node_modules أو build folders). خلي الملفات دي في الـ gitignore علشان Git ما يضيفها مع الـ Commits بتاعتك.

———

قبل ما تعمل الـ Commit، دايمًا اعمل مراجعة للتغييرات اللي عملتها باستخدام git status أو git diff. كده هتكون متأكد إنك مش ناسي حاجة أو فيه حاجة غلط.

———

#دقيقة_برمجة

يعني إيه Callback Function؟ 🔄

خلال رحلتك في عالم الـ JavaScript أكيد سمعت قبل كده عن Callback Functions، بس إيه الفكرة منها وليه بنستخدمها؟ 🤔

خليني أوضحها لك بطريقة بسيطة… تخيل أنك طلبت بيتزا من المطعم، وقالوا لك: "هتاخد 30 دقيقة عشان توصل." دلوقتي بدل ما تقعد مستني على باب المطعم، تقدر تسيب رقمك لهم، وأول ما البيتزا تجهز، هيكلموك ويقولوا لك: "تعال استلمها"

———

الـ Callback Function بتشتغل بنفس الطريقة، هي عبارة عن دالة بتتبعت كـ parameter لدالة تانية، ولما الدالة الأساسية تخلص شغلها، بتنادي الـ Callback عشان تنفذ حاجة معينة.

———

🎯 مثال عملي

function fetchData(callback) {
    console.log("Fetching data... ⏳");
    
    setTimeout(() => {
        console.log("Data fetched ✅");
        callback("Here is your data! 📦");
    }, 2000);
}

function processData(data) {
    console.log("Processing: " + data);
}

fetchData(processData);

📌 هنا الـ fetchData شغالة زي المطعم، وبتاخد callback كمعامل، وبمجرد ما تجيب الداتا، بتستدعي processData عشان تتعامل مع البيانات.

———

🛠 ليه نستخدم الـ Callback Functions؟

- التعامل مع العمليات غير المتزامنة (زي جلب بيانات من API أو تنفيذ عمليات بتاخد وقت).
- إعادة استخدام الكود بدل ما نكتب نفس الحاجة أكتر من مرة.
- تنظيم الكود بدل ما يكون كله متداخل وصعب القراءة.

———

❌ مشكلة الـ Callbacks؟

لو استخدمتها بطريقة غلط، ممكن تدخل في Callback Hell (كود متداخل بشكل معقد)، وده السبب اللي يخليك تستخدم الـ Promises والـ Async/Await 🚀

———

#دقيقة_برمجة

إيه الفرق بين Framework و Library؟ 🤔

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

مثال؟ لو بتكتب JavaScript ممكن تستخدم Lodash علشان تسهل عليك التعامل مع المصفوفات (Arrays)، أو Axios علشان تبعت طلبات API.

———

أما الـ Framework فالموضوع مختلف شوية، لأنه بيكون بيئة عمل متكاملة فيها قواعد وأنماط معينة لازم تلتزم بيها. يعني بدل ما أنت اللي بتنادي على الكود، هو اللي بينادي عليك وبيقولك "اكتب الكود بتاعك هنا".

مثال؟ إطار العمل Angular في الفرونت إند، و Django في الباك إند.

———

🔹 الـ Library = أنت اللي بتتحكم فيها وتستخدمها بحرية
🔹 الـ Framework = هو اللي بيديك القالب أو الشكل العام ويجبرك تمشي على نظام معين.

———

#دقيقة_برمجة

🔒 الفرق بين Encapsulation و Abstraction؟

ناس كتير بتتلخبط بين الـ Encapsulation والـ Abstraction وده طبيعي لأن الاتنين بيتكلموا عن إخفاء حاجات في البرمجة، بس كل واحد فيهم ليه هدف مختلف.

———

📦 الـ Encapsulation (الاحتواء أو التغليف): يعني إنك "تغلف" البيانات (زي الـ variables) والوظائف (زي الـ functions أو الـ methods) اللي بتتعامل مع البيانات دي داخل كائن واحد (class)، وكمان تمنع أي حد من خارج الكائن ده إنه يتعامل معاهم بشكل مباشر.

بمعنى تاني: بتخبي التفاصيل الداخلية، وبتخلي فيه واجهة واحدة بس الناس تتعامل معاها.

وده بيحافظ على الداتا من إنها تتغير بشكل خطأ أو عشوائي.

———

🛡 مثال بسيط:

لو عندك BankAccount class فيه متغير اسمه balance، مش المفروض أي حد يقدر يغير balance على مزاجه.

لازم تعدي من method زي deposit أو withdraw، ودي بتحط شروط (زي إنك مينفعش تسحب أكتر من اللي موجود).

يعني الكود بيكون كده:

class BankAccount {
  private int balance;

  public void deposit(int amount) {
    if (amount > 0) balance += amount;
  }

  public int getBalance() {
    return balance;
  }
}

هنا احنا "غلفنا" البيانات وخبيناها وخلينا التعامل معاها من خلال methods بس ✅

———

🎭 الـ Abstraction (التجريد): يعني إنك تركز على "إيه اللي الـ class بيعمله"، وتخبي "إزاي بيعمله"

بمعنى إنك بتعمل للـ user واجهة بسيطة يتعامل بيها، وما تعرفه التفاصيل الداخلية حصلت إزاي.

مثلًا: أنت لما بتشغل الغسالة من الزرار، مش لازم تعرف إزاي الموتور بيشتغل أو الميه بتتوزع أو إزاي البرنامج بيعدّ الوقت.
كل اللي يهمك هو إنك تضغط الزرار وهي تشتغل.

نفس الفكرة في الكود:

لو عندك method اسمها sendEmail(to, subject, body)، فالمستخدم مش محتاج يعرف الـ SMTP settings أو التفاصيل اللي بتحصل ورا الكواليس. كل اللي محتاجه إنه يبعت الإيميل وخلاص.

———

#دقيقة_برمجة

إزاي تبعت بيانات لحظية من السيرفر؟ ⚡️
.
.
تخيل أنك فاتح Dashboard فيها بيانات بتتحدث تلقائيًا من غير ما تضطر تـ Refresh الصفحة كل شوية، أو بتتابع سوق الأسهم وأسعار العملات بتتغير قدامك في نفس اللحظة...

طبعًا أول حاجة هتيجي في بالك هي الـ WebSockets… بس استنى، هو ده الحل الوحيد؟ لا طبعًا.

فيه تقنية اسمها Server-Sent Events (SSE) ممكن تديك نفس النتيجة لكن بأسلوب أبسط وأسهل بكتير (من ناحية التنفيذ)، ولو متطلبات المشروع مش معقدة، هتكون أفضل من WebSockets...💯

تعال ندردش شوية عن الـ SSE: إزاي بيشتغل، إمتى تستخدمه، وإمتى مينفعش... 💡

———

📍 LinkedIn:

https://www.linkedin.com/posts/dev-alisamir_devabrguide-softwaredevelopment-tech-activity-7314606244252545024-qR_W

📌 الفرق بين Inheritance و Polymorphism؟

الـ Inheritance (الوراثة) يعني إنك بتعمل Class جديد بيورّث كل الصفات (properties) والسلوكيات (methods) من Class تاني.

يعني لو عندك Class اسمه Animal فيه method اسمها makeSound، تقدر تعمل Class تاني اسمه Dog يورّث من Animal، وساعتها Dog هيكون فيه كل اللي عند Animal بشكل تلقائي.

ده بيوفرلك وقت ومجهود بدل ما تكتب نفس الكود في أكثر من مكان. بنقول عليه "إعادة استخدام للكود - Code Reusability".

———

الـ Polymorphism (تعدد الأشكال)، يعني إنك تقدر تستدعي نفس الـ method لكن كل Class ينفذها بطريقته

يعني مثلًا: عندك Dog و Cat الاتنين بيورثوا من Animal، وكل واحد فيه method اسمها makeSound...
لكن Dog له صوت معين، و Cat لها صوت تاني مختلف...

فلما تنادي makeSound على كل واحد، هيطلعلك صوت مختلف حسب نوع الحيوان، رغم إن اسم الـ method واحد.

———

الـ Inheritance يعني Class بيورث من Class تاني (علاقة "ابن و أب")
الـ Polymorphism: نفس الكود بيشتغل بطرق مختلفة على حسب الـ Class اللي بينفذه

———

#دقيقة_برمجة

🚨 The Hidden Costs of Choosing the Wrong Framework And How to Pick the Right One

Choosing a framework is like choosing a foundation for your house. Get it wrong, and everything you build on top starts to crack.

https://differ.blog/p/the-hidden-costs-of-choosing-the-wrong-framework-and-how-to-pick-the-right-one-adfbab

الـ WebAssembly 🚀
.
.
تخيل معايا كده إنك عايز تكتب برنامج بيشتغل في المتصفح، بس البرنامج ده تقيل شوية… زي لعبة فيها جرافيكس عالية، أو برنامج بيعدل صور وفيديوهات، أو حتى تطبيق علمي بيعمل حسابات معقدة.

عادة في الحالات دي بتستخدم JavaScript، بس JavaScript مش دايمًا هتديك الأداء اللي أنت محتاجه… وهنا بييجي دور الـ WebAssembly 💥

———

الـ WebAssembly (أو WASM) هو تكنولوجيا بتسمحلك إنك تكتب كود بلغة تانية زي C أو ++C أو Rust، وتحوّله لحاجة شبه لغة الآلة يقدر المتصفح يفهمها ويشغّلها بسرعة رهيبة، أسرع بكتير من JavaScript.

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

———

📌 أهم استخدامات الـ WebAssembly:

لو بتعمل مشروع تقيل ومحتاج أداء عالي، الـ WebAssembly هينقذك في حاجات زي:

- ألعاب 3D أو ألعاب أونلاين بتشتغل في المتصفح
- برامج معالجة صور وفيديوهات مباشرة على الويب
- برامج CAD أو محاكاة أو أدوات تحليل بيانات ضخمة
- أو حتى لو عندك مكتبة جاهزة بلغة زي C وحابب تستخدمها على الويب من غير ما تعيد كتابتها

———

إزاي الـ WebAssembly بيشتغل؟

1- بتكتب الكود بلغة قوية (زي C، C++، Rust)
2- بتستخدم Compiler بيحوّل الكود لملف بصيغة wasm
3- بتشغل الملف ده من داخل كود JavaScript بتاعك في الصفحة
4- المتصفح يشغّل WebAssembly وكأنك كاتب كود JavaScript، بس بأداء أعلى بكتير

وده كله بيشتغل في كل المتصفحات الكبيرة: Chrome، Firefox، Safari، Edge وغيرهم.

———

🤔 هل WebAssembly بديل لـ JavaScript؟

الإجابة: لا.

الـ JavaScript لسه هي الأساس في الويب، بس الـ WebAssembly بيشيل الحمل التقيل عن JavaScript، ويساعدك تنفذ أجزاء معينة في التطبيق بسرعة وكفاءة.

———

#دقيقة_برمجة

مفهوم الـ Event Loop في الـ Node.js 💡
.
.
لو اشتغلت بـ Node.js قبل كده، أكيد سمعت عن مصطلح اسمه Event Loop، وأغلب الظن كنت بتعمل نفسك فاهمه عشان شكله تقيل ومش لطيف 😅

علشان تفهم إزاي Node.js بتتعامل مع الـ async code... فأنت محتاج تفهم Event Loop.

الموضوع ده هو السبب الرئيسي إن Node.js بتقدر تتعامل مع آلاف الـ requests من غير ما تعمل blocking للـ thread الوحيد اللي شغالة به.

تعال نفهم إيه هو الـ Event Loop، وإزاي فعلًا بيشتغل، وليه هو السبب الرئيسي إن Node.js بتقدر تدّيك أداء عالي جدًا رغم إنها شغالة بـ single-thread بس.

———

📍 LinkedIn

https://www.linkedin.com/posts/dev-alisamir_c-nodejs-backend-activity-7315806133082865664-7XsU

الفرق بين PUT و PATCH في REST API؟ 🤔

لو بتشتغل مع أي REST API، أكيد قابلت المصطلحين: PUT و PATCH…وسألت نفسك: هو إيه الفرق؟ وليه أوقات بنستخدم PUT وأوقات PATCH؟

———

📌 أول حاجة: هما الاتنين بيستخدموا في التعديل (Update)

يعني لما يكون عندك Data (زي مستخدم أو منتج) وعايز تعدّل عليه، بتستخدم واحدة منهم عشان تبعت التعديل للسيرفر.

لكن الفرق الأساسي بينهم هو: هل أنت بتعدل كل الـ Data ولا جزء منها؟

———

✅ الـ PUT = تعديل شامل (Full Update)

تقدر تقول كده إن PUT بيقول للسيرفر:
"أنا جاي أبدّل الحاجة دي كلها، اعتبر النسخة اللي عندك خلاص مش موجودة وابدأ من جديد باللي أنا ببعته."

يعني لازم تبعت كل البيانات المطلوبة حتى لو أنت ما غيّرت فيها حاجة.


🧾 مثال عملي:

تخيل عندك مستخدم فيه البيانات دي:

{
  "name": "Ahmed",
  "email": "ahmed@example.com",
  "age": 25
}

لو هتستخدم PUT علشان تغيّر الـ name بس، لازم تبعت كل الـ object كده:

{
  "name": "Mohamed",
  "email": "ahmed@example.com",
  "age": 25
}

لو نسيت تبعت الـ email أو الـ age، السيرفر ممكن يمسحهم أو يعتبرهم null...

يعني PUT بيحتاج تبعت كل البيانات، وبيستبدل الـ object بالكامل.

———

✅ الـ PATCH = تعديل جزئي (Partial Update)

أما بقى PATCH فهو بيقول للسيرفر:
"أنا بس جاي أعدّل على جزئية معينة في الـ object، والباقي سيبه زي ما هو."

يعني تقدر تبعت بس الجزء اللي اتغيّر، من غير ما تبعت كل البيانات.


🧾 مثال عملي:

لو عايز تغيّر اسم أحمد لمحمود، تبعت كده:

{
  "name": "Mahmoud"
}

والسيرفر هيعرف إنك عايز تغير الـ name بس، وهيخلي الباقي زي ما هو.

يعني PATCH بيستخدم في التعديلات الجزئية، وسهل ومناسب لو بتغير حاجة بسيطة.

———

💡 إمتى تستخدم كل واحد؟

- استخدم PUT لما تكون عايز تبدّل كل البيانات أو تعمل إعادة بناء كاملة للـ resource.
- استخدم PATCH لما تكون عايز تعدّل بس على حاجة واحدة أو اتنين في الـ object.

———

🧪 مثال توضيحي أخير:

لو عندك endpoint زي:

PUT /users/1

فده معناه إنك هتعدّل بيانات المستخدم رقم 1 كلها.

ولو عندك:

PATCH /users/1

فده معناه إنك هتغيّر حاجة معينة بس في بيانات المستخدم ده.

———

#دقيقة_برمجة

Master React: From Start to Finish — Your Ultimate Guide to Becoming a React Rockstar 🚀

React isn’t just a library—it’s a superpower. From startups to tech giants like Facebook and Airbnb, React powers the modern web.

Today, I’m sharing how you can master it, from your first "Hello World" to building full-blown, scalable applications.

———

📍 Why React? The Hype Is Real
🌱 1. The Foundations — Before React
⚛️ 2. The Core of React — Your Bread & Butter
🧠 3. Dive Deeper — Intermediate React
🧰 4. Tooling & Ecosystem — The Secret Sauce
🔁 5. State Management — Do You Really Need Redux?
🧱 6. Component Design & Reusability — Think Like a Pro
📦 7. TypeScript + React — The Modern Duo
🚀 8. Performance Optimization — Smooth & Snappy UIs
🔄 9. Testing — Write Code That Doesn’t Break
🌐 10. Go Full Stack (Optional but Powerful)
💼 11. Portfolio, Jobs & Interviews — The Final Boss

———

https://dev.to/alisamir/master-react-from-start-to-finish-your-ultimate-guide-to-becoming-a-react-rockstar-4a0a

VSCodium

Free/Libre Open Source Software Binaries of VS Code

VSCodium is a community-driven, freely-licensed binary distribution of Microsoft’s editor VS Code.

https://vscodium.com

يعني إيه CDN؟ 🌍

كلمة CDN هي اختصار لـ Content Delivery Network، يعني "شبكة توصيل المحتوى"، ودي واحدة من الحاجات اللي بتسرّع مواقع الويب بشكل خرافي وبتخلي تجربة المستخدم أحسن بكتير، وخليني أشرحلك إزاي وليه 👇

———

🎯 المشكلة الأساسية:

تخيل إنك عامل موقع ومتخزن على سيرفر موجود في أمريكا، وجالك زائر من مصر... كل ما يفتح الموقع، جهازه بيبعَت طلب (request) للسيرفر اللي في أمريكا، والسيرفر بيرد عليه بالملفات (صور، CSS، JavaScript...)

المشكلة إن المسافة بعيدة، وده بيخلّي وقت تحميل الصفحة أطول 😩

———

💡 الحل؟ هنا ييجي دور الـ CDN

الـ CDN عبارة عن شبكة كبيرة جدًا من السيرفرات (بنسمّيهم Edge Servers) منتشرين في كل مكان في العالم — في مصر، السعودية، أوروبا، أمريكا، آسيا... إلخ.

لما تستخدم CDN، هو بيخزن نسخة من الملفات الثابتة بتاعة موقعك (زي الصور، ملفات CSS و JS، الخطوط، الفيديوهات...) على كل السيرفرات دي.

يعني لما حد من مصر يفتح موقعك، بدل ما يتواصل مع السيرفر الأساسي في أمريكا، هيتواصل مع أقرب سيرفر ليه جغرافيًا (مثلاً في القاهرة أو دبي)، وده بيخلي الموقع يفتح بسرعة🚀

———

📦 بيخزن إيه بالظبط؟

الـ CDN بيخزن أي حاجة Static، يعني ملفات مش بتتغير كتير زي:

- صور (JPEG، PNG، WebP...)
- ملفات CSS و JavaScript
- خطوط - Fonts
- فيديوهات
- وحتّى ملفات HTML لو الموقع Static

———

🔐 طب هل الـ CDN بيأثر على الأمان؟

نعم، بيساعد في الأمان عن طريق:

- بيقدر يمنع الهجمات زي DDoS لأن الطلبات بتتوزع على سيرفرات كتير
- بيخفي الـ IP الحقيقي للسيرفر الأساسي
- بيقلل التحميل على الباك إند بتاعك

———

🧪 طب إيه الفائدة ليا كمبرمج؟

لو شغال على موقع أو Web App:

استخدام CDN هيحسّن سرعة الموقع

يقلل الـ (Bandwidth) المستهلك من السيرفر الرئيسي

بيحسّن ترتيب الموقع في جوجل (SEO)

ويخلّي الزوار مبسوطين ومش هيمشوا من أول ثانية 😅

———

🔥 أمثلة على CDN مشهورة:

- Cloudflare
- Akamai
- Amazon CloudFront
- Fastly
- Google CDN

ولو شغال في React أو Next.js، هتلاقي أدوات زي Vercel و Netlify بيستخدموا CDN بشكل تلقائي في الخلفية.

———

#دقيقة_برمجة

الوجه الآخر لـ Tailwind CSS

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

———

The Dark Side of Tailwind: When Utility Classes Become a Mess

Tailwind CSS has taken the web development world by storm, promising rapid prototyping, customizable designs, and a utility-first approach that feels like a breath of fresh air.

Developers love it. Designers tolerate it. And for many, it’s the holy grail of modern front-end frameworks. But let’s be real — there’s a dark side to Tailwind that no one talks about until they’re knee-deep in a tangled mess of unreadable HTML.

So, grab your coffee, and let’s dive into why Tailwind’s utility classes can sometimes turn your clean codebase into a chaotic nightmare.

———

📌 رابط المقال:

https://medium.com/gitconnected/the-dark-side-of-tailwind-when-utility-classes-become-a-mess-f339fb72cb81

الـ DoS Attack ⚡️
.
.
تخيّل أنك شغال على مشروعك، والموقع مستقر وكل حاجة تمام… وفجأة تلاقي كل حاجة وقفت، السيرفر مش شغال ولا بيرد على الطلبات اللي رايحه...

تدخل تشوف المشكلة، تلاقي الترافيك عالي جدًا بشكل مش طبيعي، ومفيش أي explanation واضح...

في اللحظة دي، لازم يكون أول حاجة تيجي في بالك: DoS Attack
الهجوم البسيط في فكرته، لكن ممكن يوقّع سيستم كامل في ثواني، مهما كان حجمه أو قوته (في الغالب).

———

📍 LinkedIn

https://www.linkedin.com/posts/dev-alisamir_dos-softwareengineer-devabrguide-activity-7316886145286520832-cCKa

📍 Qabilah

https://qabilah.com/posts/68AhwGkw1Vk