إزاي تبعت بيانات لحظية من السيرفر؟ ⚡️
.
.
تخيل أنك فاتح Dashboard فيها بيانات بتتحدث تلقائيًا من غير ما تضطر تـ Refresh الصفحة كل شوية، أو بتتابع سوق الأسهم وأسعار العملات بتتغير قدامك في نفس اللحظة...
طبعًا أول حاجة هتيجي في بالك هي الـ WebSockets… بس استنى، هو ده الحل الوحيد؟ لا طبعًا.
فيه تقنية اسمها Server-Sent Events (SSE) ممكن تديك نفس النتيجة لكن بأسلوب أبسط وأسهل بكتير (من ناحية التنفيذ)، ولو متطلبات المشروع مش معقدة، هتكون أفضل من WebSockets...💯
تعال ندردش شوية عن الـ SSE: إزاي بيشتغل، إمتى تستخدمه، وإمتى مينفعش... 💡
———
https://www.linkedin.com/posts/dev-alisamir_devabrguide-softwaredevelopment-tech-activity-7314606244252545024-qR_W
.
.
تخيل أنك فاتح Dashboard فيها بيانات بتتحدث تلقائيًا من غير ما تضطر تـ Refresh الصفحة كل شوية، أو بتتابع سوق الأسهم وأسعار العملات بتتغير قدامك في نفس اللحظة...
طبعًا أول حاجة هتيجي في بالك هي الـ WebSockets… بس استنى، هو ده الحل الوحيد؟ لا طبعًا.
فيه تقنية اسمها Server-Sent Events (SSE) ممكن تديك نفس النتيجة لكن بأسلوب أبسط وأسهل بكتير (من ناحية التنفيذ)، ولو متطلبات المشروع مش معقدة، هتكون أفضل من WebSockets...💯
تعال ندردش شوية عن الـ SSE: إزاي بيشتغل، إمتى تستخدمه، وإمتى مينفعش... 💡
———
📍 LinkedIn:
https://www.linkedin.com/posts/dev-alisamir_devabrguide-softwaredevelopment-tech-activity-7314606244252545024-qR_W
❤9👍2🔥1
📌 الفرق بين 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 اللي بينفذه
———
#دقيقة_برمجة
❤6🔥4
🚨 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
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
❤4
الـ WebAssembly 🚀
.
.
تخيل معايا كده إنك عايز تكتب برنامج بيشتغل في المتصفح، بس البرنامج ده تقيل شوية… زي لعبة فيها جرافيكس عالية، أو برنامج بيعدل صور وفيديوهات، أو حتى تطبيق علمي بيعمل حسابات معقدة.
عادة في الحالات دي بتستخدم JavaScript، بس JavaScript مش دايمًا هتديك الأداء اللي أنت محتاجه… وهنا بييجي دور الـ WebAssembly 💥
———
الـ WebAssembly (أو WASM) هو تكنولوجيا بتسمحلك إنك تكتب كود بلغة تانية زي C أو ++C أو Rust، وتحوّله لحاجة شبه لغة الآلة يقدر المتصفح يفهمها ويشغّلها بسرعة رهيبة، أسرع بكتير من JavaScript.
يعني الـ WebAssembly مش لغة برمجة زي بقية اللغات، بل هي طريقة تشغّل بيها كود مكتوب بلغات قوية داخل المتصفح، وتستفيد من السرعة العالية دي من غير ما تتنازل عن مزايا الويب.
———
لو بتعمل مشروع تقيل ومحتاج أداء عالي، الـ WebAssembly هينقذك في حاجات زي:
- ألعاب 3D أو ألعاب أونلاين بتشتغل في المتصفح
- برامج معالجة صور وفيديوهات مباشرة على الويب
- برامج CAD أو محاكاة أو أدوات تحليل بيانات ضخمة
- أو حتى لو عندك مكتبة جاهزة بلغة زي C وحابب تستخدمها على الويب من غير ما تعيد كتابتها
———
1- بتكتب الكود بلغة قوية (زي C، C++، Rust)
2- بتستخدم Compiler بيحوّل الكود لملف بصيغة wasm
3- بتشغل الملف ده من داخل كود JavaScript بتاعك في الصفحة
4- المتصفح يشغّل WebAssembly وكأنك كاتب كود JavaScript، بس بأداء أعلى بكتير
وده كله بيشتغل في كل المتصفحات الكبيرة: Chrome، Firefox، Safari، Edge وغيرهم.
———
الإجابة: لا.
الـ JavaScript لسه هي الأساس في الويب، بس الـ WebAssembly بيشيل الحمل التقيل عن JavaScript، ويساعدك تنفذ أجزاء معينة في التطبيق بسرعة وكفاءة.
———
#دقيقة_برمجة
.
.
تخيل معايا كده إنك عايز تكتب برنامج بيشتغل في المتصفح، بس البرنامج ده تقيل شوية… زي لعبة فيها جرافيكس عالية، أو برنامج بيعدل صور وفيديوهات، أو حتى تطبيق علمي بيعمل حسابات معقدة.
عادة في الحالات دي بتستخدم 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، ويساعدك تنفذ أجزاء معينة في التطبيق بسرعة وكفاءة.
———
#دقيقة_برمجة
❤7👍6
مفهوم الـ 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 بس.
———
https://www.linkedin.com/posts/dev-alisamir_c-nodejs-backend-activity-7315806133082865664-7XsU
.
.
لو اشتغلت بـ Node.js قبل كده، أكيد سمعت عن مصطلح اسمه Event Loop، وأغلب الظن كنت بتعمل نفسك فاهمه عشان شكله تقيل ومش لطيف 😅
علشان تفهم إزاي Node.js بتتعامل مع الـ async code... فأنت محتاج تفهم Event Loop.
الموضوع ده هو السبب الرئيسي إن Node.js بتقدر تتعامل مع آلاف الـ requests من غير ما تعمل blocking للـ thread الوحيد اللي شغالة به.
تعال نفهم إيه هو الـ Event Loop، وإزاي فعلًا بيشتغل، وليه هو السبب الرئيسي إن Node.js بتقدر تدّيك أداء عالي جدًا رغم إنها شغالة بـ single-thread بس.
———
https://www.linkedin.com/posts/dev-alisamir_c-nodejs-backend-activity-7315806133082865664-7XsU
❤5
الفرق بين PUT و PATCH في REST API؟ 🤔
لو بتشتغل مع أي REST API، أكيد قابلت المصطلحين: PUT و PATCH…وسألت نفسك: هو إيه الفرق؟ وليه أوقات بنستخدم PUT وأوقات PATCH؟
———
يعني لما يكون عندك Data (زي مستخدم أو منتج) وعايز تعدّل عليه، بتستخدم واحدة منهم عشان تبعت التعديل للسيرفر.
لكن الفرق الأساسي بينهم هو: هل أنت بتعدل كل الـ Data ولا جزء منها؟
———
تقدر تقول كده إن PUT بيقول للسيرفر:
"أنا جاي أبدّل الحاجة دي كلها، اعتبر النسخة اللي عندك خلاص مش موجودة وابدأ من جديد باللي أنا ببعته."
يعني لازم تبعت كل البيانات المطلوبة حتى لو أنت ما غيّرت فيها حاجة.
🧾 مثال عملي:
تخيل عندك مستخدم فيه البيانات دي:
لو هتستخدم PUT علشان تغيّر الـ name بس، لازم تبعت كل الـ object كده:
لو نسيت تبعت الـ email أو الـ age، السيرفر ممكن يمسحهم أو يعتبرهم null...
يعني PUT بيحتاج تبعت كل البيانات، وبيستبدل الـ object بالكامل.
———
أما بقى PATCH فهو بيقول للسيرفر:
"أنا بس جاي أعدّل على جزئية معينة في الـ object، والباقي سيبه زي ما هو."
يعني تقدر تبعت بس الجزء اللي اتغيّر، من غير ما تبعت كل البيانات.
🧾 مثال عملي:
لو عايز تغيّر اسم أحمد لمحمود، تبعت كده:
والسيرفر هيعرف إنك عايز تغير الـ name بس، وهيخلي الباقي زي ما هو.
يعني PATCH بيستخدم في التعديلات الجزئية، وسهل ومناسب لو بتغير حاجة بسيطة.
———
- استخدم PUT لما تكون عايز تبدّل كل البيانات أو تعمل إعادة بناء كاملة للـ resource.
- استخدم PATCH لما تكون عايز تعدّل بس على حاجة واحدة أو اتنين في الـ object.
———
🧪 مثال توضيحي أخير:
لو عندك endpoint زي:
فده معناه إنك هتعدّل بيانات المستخدم رقم 1 كلها.
ولو عندك:
فده معناه إنك هتغيّر حاجة معينة بس في بيانات المستخدم ده.
———
#دقيقة_برمجة
لو بتشتغل مع أي 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
فده معناه إنك هتغيّر حاجة معينة بس في بيانات المستخدم ده.
———
#دقيقة_برمجة
❤10👍4
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
❤5👍2
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
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
❤5👍2
يعني إيه CDN؟ 🌍
كلمة CDN هي اختصار لـ Content Delivery Network، يعني "شبكة توصيل المحتوى"، ودي واحدة من الحاجات اللي بتسرّع مواقع الويب بشكل خرافي وبتخلي تجربة المستخدم أحسن بكتير، وخليني أشرحلك إزاي وليه 👇
———
تخيل إنك عامل موقع ومتخزن على سيرفر موجود في أمريكا، وجالك زائر من مصر... كل ما يفتح الموقع، جهازه بيبعَت طلب (request) للسيرفر اللي في أمريكا، والسيرفر بيرد عليه بالملفات (صور، CSS، JavaScript...)
المشكلة إن المسافة بعيدة، وده بيخلّي وقت تحميل الصفحة أطول 😩
———
الـ CDN عبارة عن شبكة كبيرة جدًا من السيرفرات (بنسمّيهم Edge Servers) منتشرين في كل مكان في العالم — في مصر، السعودية، أوروبا، أمريكا، آسيا... إلخ.
لما تستخدم CDN، هو بيخزن نسخة من الملفات الثابتة بتاعة موقعك (زي الصور، ملفات CSS و JS، الخطوط، الفيديوهات...) على كل السيرفرات دي.
يعني لما حد من مصر يفتح موقعك، بدل ما يتواصل مع السيرفر الأساسي في أمريكا، هيتواصل مع أقرب سيرفر ليه جغرافيًا (مثلاً في القاهرة أو دبي)، وده بيخلي الموقع يفتح بسرعة🚀
———
الـ CDN بيخزن أي حاجة Static، يعني ملفات مش بتتغير كتير زي:
- صور (JPEG، PNG، WebP...)
- ملفات CSS و JavaScript
- خطوط - Fonts
- فيديوهات
- وحتّى ملفات HTML لو الموقع Static
———
نعم، بيساعد في الأمان عن طريق:
- بيقدر يمنع الهجمات زي DDoS لأن الطلبات بتتوزع على سيرفرات كتير
- بيخفي الـ IP الحقيقي للسيرفر الأساسي
- بيقلل التحميل على الباك إند بتاعك
———
لو شغال على موقع أو Web App:
استخدام CDN هيحسّن سرعة الموقع
يقلل الـ (Bandwidth) المستهلك من السيرفر الرئيسي
بيحسّن ترتيب الموقع في جوجل (SEO)
ويخلّي الزوار مبسوطين ومش هيمشوا من أول ثانية 😅
———
- Cloudflare
- Akamai
- Amazon CloudFront
- Fastly
- Google CDN
ولو شغال في React أو Next.js، هتلاقي أدوات زي Vercel و Netlify بيستخدموا 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 بشكل تلقائي في الخلفية.
———
#دقيقة_برمجة
❤4👍4
الوجه الآخر لـ 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
بفضل الله وتوفيقه، تم نشر ثالث مقال في مدونة 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
❤5
الـ DoS Attack ⚡️
.
.
تخيّل أنك شغال على مشروعك، والموقع مستقر وكل حاجة تمام… وفجأة تلاقي كل حاجة وقفت، السيرفر مش شغال ولا بيرد على الطلبات اللي رايحه...
تدخل تشوف المشكلة، تلاقي الترافيك عالي جدًا بشكل مش طبيعي، ومفيش أي explanation واضح...
في اللحظة دي، لازم يكون أول حاجة تيجي في بالك: DoS Attack
الهجوم البسيط في فكرته، لكن ممكن يوقّع سيستم كامل في ثواني، مهما كان حجمه أو قوته (في الغالب).
———
https://www.linkedin.com/posts/dev-alisamir_dos-softwareengineer-devabrguide-activity-7316886145286520832-cCKa
https://qabilah.com/posts/68AhwGkw1Vk
.
.
تخيّل أنك شغال على مشروعك، والموقع مستقر وكل حاجة تمام… وفجأة تلاقي كل حاجة وقفت، السيرفر مش شغال ولا بيرد على الطلبات اللي رايحه...
تدخل تشوف المشكلة، تلاقي الترافيك عالي جدًا بشكل مش طبيعي، ومفيش أي explanation واضح...
في اللحظة دي، لازم يكون أول حاجة تيجي في بالك: DoS Attack
الهجوم البسيط في فكرته، لكن ممكن يوقّع سيستم كامل في ثواني، مهما كان حجمه أو قوته (في الغالب).
———
https://www.linkedin.com/posts/dev-alisamir_dos-softwareengineer-devabrguide-activity-7316886145286520832-cCKa
📍 Qabilah
https://qabilah.com/posts/68AhwGkw1Vk
❤4👍1
الفرق بين Low-level و High-level Languages 🧠
تعال نتكلم عن حاجة أساسية في عالم البرمجة، وهي نوعين من اللغات اللي بنكتب بيهم الكود:
Low-level Languages & High-level Languages
———
دي اللغات اللي بتتكلم تقريبًا بلغة الكمبيوتر نفسه، قريبة جدًا من الـ Hardware.
يعني لما تكتب كود بلغة Low-level، أنت بتتعامل مع الحاجات اللي داخل الجهاز نفسه زي الرامات، المعالج، وهكذا.
📌 أمثلة عليها؟
- Assembly Language
- Machine Code
✅ الميزة؟
- سريعة جدًا لأنها بتشتغل على مستوى قريب من الجهاز.
- بتوفر لك تحكم عالي جدًا في الموارد (زي الرامات والمعالج).
❌ العيب؟
- صعبة جدًا في الفهم.
- أي غلطة ممكن تعملك مشاكل كبيرة.
- كتابة البرامج بها بياخد وقت ومجهود كبير.
———
دي بقى اللغات اللي احنا بنتعامل بها في الغالب.
اللغات دي أقرب للبني آدم من الآلة، يعني تقدر تكتب الكود بلغة مفهومة شبه الإنجليزي، وتسيب للمترجم (compiler أو interpreter) مهمة تحويل الكلام ده للغة الكمبيوتر.
📌 أمثلة عليها؟
- Python
- JavaScript
- Java
- Ruby
- Go
✅ الميزة؟
- سهلة في التعلم والقراءة والكتابة.
- أسرع في تطوير البرامج.
- بتوفر أدوات ومكتبات بتسهل عليك الشغل جدًا.
❌ العيب؟
- أبطأ شوية من Low-level لأن في طبقة وسيطة (المترجم أو الـ runtime).
- مش دايمًا بتديك تحكم كامل في الـ Hardware.
———
#دقيقة_برمجة
تعال نتكلم عن حاجة أساسية في عالم البرمجة، وهي نوعين من اللغات اللي بنكتب بيهم الكود:
Low-level Languages & High-level Languages
———
🔧 أولًا: الـ Low-level Languages
دي اللغات اللي بتتكلم تقريبًا بلغة الكمبيوتر نفسه، قريبة جدًا من الـ Hardware.
يعني لما تكتب كود بلغة Low-level، أنت بتتعامل مع الحاجات اللي داخل الجهاز نفسه زي الرامات، المعالج، وهكذا.
📌 أمثلة عليها؟
- Assembly Language
- Machine Code
✅ الميزة؟
- سريعة جدًا لأنها بتشتغل على مستوى قريب من الجهاز.
- بتوفر لك تحكم عالي جدًا في الموارد (زي الرامات والمعالج).
❌ العيب؟
- صعبة جدًا في الفهم.
- أي غلطة ممكن تعملك مشاكل كبيرة.
- كتابة البرامج بها بياخد وقت ومجهود كبير.
———
🎩 ثانيًا: الـ High-level Languages
دي بقى اللغات اللي احنا بنتعامل بها في الغالب.
اللغات دي أقرب للبني آدم من الآلة، يعني تقدر تكتب الكود بلغة مفهومة شبه الإنجليزي، وتسيب للمترجم (compiler أو interpreter) مهمة تحويل الكلام ده للغة الكمبيوتر.
📌 أمثلة عليها؟
- Python
- JavaScript
- Java
- Ruby
- Go
✅ الميزة؟
- سهلة في التعلم والقراءة والكتابة.
- أسرع في تطوير البرامج.
- بتوفر أدوات ومكتبات بتسهل عليك الشغل جدًا.
❌ العيب؟
- أبطأ شوية من Low-level لأن في طبقة وسيطة (المترجم أو الـ runtime).
- مش دايمًا بتديك تحكم كامل في الـ Hardware.
———
#دقيقة_برمجة
❤4
شهادات Mongodb الرقمية
شهادات رقمية سريعة، مجانية تساعدك على تعلم مهارات جديدة في MongoDB وإبرازها من خلال شارة رقمية قابلة للمشاركة.
ابدأ الآن مجانًا:
https://learn.mongodb.com/skills
شهادات رقمية سريعة، مجانية تساعدك على تعلم مهارات جديدة في MongoDB وإبرازها من خلال شارة رقمية قابلة للمشاركة.
ابدأ الآن مجانًا:
https://learn.mongodb.com/skills
Mongodb
Level Up Your MongoDB Skills
Learn in-demand database skills to build scalable applications and drive impact. Developers & architects will learn to model data and apply advanced schema design patterns.
❤6👍1🔥1
الفرق بين الـ Compiler والـ Interpreter؟ ⚙️
لما تيجي تكتب كود بلغة برمجة زي C أو Python، الكود ده مش مفهوم بشكل مباشر للجهاز (لأن الجهاز بيفهم 0 و 1 بس)، فمحتاج حد يترجم له من لغة البشر إلى لغة الآلة.
وهنا بييجي دور الـ Compiler و الـ Interpreter، وظيفتهم الأساسية هي "ترجمة الكود"، لكن كل واحد له طريقته المختلفة.
———
الـ Compiler هو مترجم بياخد الكود كله مرة واحدة، يراجعه، يحوله للغة الآلة (machine code)، وبعد كده يشغل البرنامج.
مثال: زي ما تكون بتكتب مقال، وتديه للمصحح اللغوي يراجعه بالكامل، وبعد كده تنشره مرة واحدة.
📍 لغات مشهورة بتستخدم الـ Compiler:
- C
- C++
- Go
- Rust
✅ مميزاته:
- بيطلع برنامج سريع جدًا وقت التشغيل (لأن الترجمة حصلت قبل ما يبدأ يشتغل).
- ممكن يكتشف أخطاء كتير قبل ما تشغل البرنامج.
❌ عيوبه:
- أي تعديل في الكود، لازم تعيد الترجمة من الأول.
- وقت الترجمة ممكن يكون طويل شوية.
———
الـ Interpreter بيشتغل بطريقة مختلفة، هو بيترجم الكود سطر بسطر، يعني كل ما يلاقي سطر بيترجمه ويشغله فورًا.
مثال: زي مدرس بيقرأ جملة من كتاب بلغة أجنبية، ويترجمها لك في نفس اللحظة.
📍 لغات مشهورة بتستخدم الـ Interpreter:
- Python
- Ruby
- PHP
✅ مميزاته:
- سهل تجرب الكود بسرعة وتشوف النتيجة فورًا.
- ممتاز في التعليم أو التطوير السريع (prototyping).
❌ عيوبه:
- أبطأ في الأداء وقت التشغيل (لأنه بيترجم أثناء التشغيل).
- ممكن ما يتعرف على أخطاء موجودة في الكود غير لما يوصل للسطر اللي فيه المشكلة.
———
#دقيقة_برمجة
لما تيجي تكتب كود بلغة برمجة زي C أو Python، الكود ده مش مفهوم بشكل مباشر للجهاز (لأن الجهاز بيفهم 0 و 1 بس)، فمحتاج حد يترجم له من لغة البشر إلى لغة الآلة.
وهنا بييجي دور الـ Compiler و الـ Interpreter، وظيفتهم الأساسية هي "ترجمة الكود"، لكن كل واحد له طريقته المختلفة.
———
📌 أولًا: الـ Compiler
الـ Compiler هو مترجم بياخد الكود كله مرة واحدة، يراجعه، يحوله للغة الآلة (machine code)، وبعد كده يشغل البرنامج.
مثال: زي ما تكون بتكتب مقال، وتديه للمصحح اللغوي يراجعه بالكامل، وبعد كده تنشره مرة واحدة.
📍 لغات مشهورة بتستخدم الـ Compiler:
- C
- C++
- Go
- Rust
✅ مميزاته:
- بيطلع برنامج سريع جدًا وقت التشغيل (لأن الترجمة حصلت قبل ما يبدأ يشتغل).
- ممكن يكتشف أخطاء كتير قبل ما تشغل البرنامج.
❌ عيوبه:
- أي تعديل في الكود، لازم تعيد الترجمة من الأول.
- وقت الترجمة ممكن يكون طويل شوية.
———
📌 ثانيًا: الـ Interpreter
الـ Interpreter بيشتغل بطريقة مختلفة، هو بيترجم الكود سطر بسطر، يعني كل ما يلاقي سطر بيترجمه ويشغله فورًا.
مثال: زي مدرس بيقرأ جملة من كتاب بلغة أجنبية، ويترجمها لك في نفس اللحظة.
📍 لغات مشهورة بتستخدم الـ Interpreter:
- Python
- Ruby
- PHP
✅ مميزاته:
- سهل تجرب الكود بسرعة وتشوف النتيجة فورًا.
- ممتاز في التعليم أو التطوير السريع (prototyping).
❌ عيوبه:
- أبطأ في الأداء وقت التشغيل (لأنه بيترجم أثناء التشغيل).
- ممكن ما يتعرف على أخطاء موجودة في الكود غير لما يوصل للسطر اللي فيه المشكلة.
———
#دقيقة_برمجة
❤5👍4
الفرق بين MVC و MVVM و MVP 🧩
.
.
لو بتسمع عن المصطلحات الغريبة دي (MVC، MVP، MVVM) ومش فاهم معناها إيه، تعال نبسط الموضوع...
تخيل إنك بتبني أبلكيشن بيعرض بيانات للمستخدم، وبتعدل البيانات دي من وقت للتاني... طبيعي الكود هيتقسم لأجزاء عشان تفضل الدنيا منظمة، مش كود واحد كبير متشابك.
هنا بييجي دور الـ Design Patterns اللي بتنظم طريقة كتابة الكود، وأشهرهم:
———
- الـ Model: ده الجزء اللي بيحفظ ويتعامل مع البيانات (زي الـ database).
- الـ View: الجزء اللي المستخدم بيشوفه (الـ UI).
- الـ Controller: هو اللي بيتلقى الأوامر من المستخدم (زي لما يضغط على زرار)، ويكلم الـ Model، وبعد كده يخلّي الـ View تعرض البيانات.
🎯 مثال: المستخدم بيكتب اسمه، الـ Controller ياخده، يحفظه في الـ Model، وبعد كده يرجّع الاسم للـ View عشان تعرضه.
———
- الـ Model: نفس الفكرة بتاعت البيانات.
- الـ View: الجزء اللي المستخدم بيشوفه (الـ UI).
- الـ Presenter: هو "دماغ" التطبيق، بيتعامل مع الـ Model، ويبعَت النتائج للـ View تعرضها. والجميل هنا إن الـ View مبتعرفش حاجة عن الـ Model.
🎯 مثال: المستخدم ضغط زرار، الـ View تبعت الإشارة للـ Presenter، هو اللي يتصرف ويرجع النتيجة.
✅ فائدة الـ MVP: سهل تختبره (Testing) لأن الـ Presenter مفصول عن الـ UI.
———
ده pattern معمول مخصوص للـ UI اللي بتشتغل بـ Data Binding (زي Angular، React، أو حتى Flutter):
- الـ Model: البيانات كالعادة.
- الـ View: الـ UI.
- الـ ViewModel: هو اللي بيربط الاتنين ببعض. بيحول البيانات بشكل يناسب العرض، وبيتعامل مع الـ logic. هنا الـ View والـ ViewModel بيرتبطوا ببعض تلقائيًا عن طريق الـ Data Binding.
🎯 لما المستخدم يكتب حاجة، الـ ViewModel يلاحظ التغيير ويحدث الـ Model، والـ View تتحدث بشكل تلقائي.
———
لو شغال على مشروع تقليدي أو backend بسيط: جرب MVC.
لو عايز UI سهل في الاختبار والـ View مفصولة: MVP هو اختيارك.
لو بتشتغل بحاجة فيها Data Binding (زي Angular أو Flutter أو React): MVVM هو الأفضل.
———
#دقيقة_برمجة
.
.
لو بتسمع عن المصطلحات الغريبة دي (MVC، MVP، MVVM) ومش فاهم معناها إيه، تعال نبسط الموضوع...
تخيل إنك بتبني أبلكيشن بيعرض بيانات للمستخدم، وبتعدل البيانات دي من وقت للتاني... طبيعي الكود هيتقسم لأجزاء عشان تفضل الدنيا منظمة، مش كود واحد كبير متشابك.
هنا بييجي دور الـ Design Patterns اللي بتنظم طريقة كتابة الكود، وأشهرهم:
———
🔹 الـ MVC - Model View Controller
- الـ Model: ده الجزء اللي بيحفظ ويتعامل مع البيانات (زي الـ database).
- الـ View: الجزء اللي المستخدم بيشوفه (الـ UI).
- الـ Controller: هو اللي بيتلقى الأوامر من المستخدم (زي لما يضغط على زرار)، ويكلم الـ Model، وبعد كده يخلّي الـ View تعرض البيانات.
🎯 مثال: المستخدم بيكتب اسمه، الـ Controller ياخده، يحفظه في الـ Model، وبعد كده يرجّع الاسم للـ View عشان تعرضه.
———
🔹 الـ MVP - Model View Presenter
- الـ Model: نفس الفكرة بتاعت البيانات.
- الـ View: الجزء اللي المستخدم بيشوفه (الـ UI).
- الـ Presenter: هو "دماغ" التطبيق، بيتعامل مع الـ Model، ويبعَت النتائج للـ View تعرضها. والجميل هنا إن الـ View مبتعرفش حاجة عن الـ Model.
🎯 مثال: المستخدم ضغط زرار، الـ View تبعت الإشارة للـ Presenter، هو اللي يتصرف ويرجع النتيجة.
✅ فائدة الـ MVP: سهل تختبره (Testing) لأن الـ Presenter مفصول عن الـ UI.
———
🔹 الـ MVVM - Model View ViewModel
ده pattern معمول مخصوص للـ UI اللي بتشتغل بـ Data Binding (زي Angular، React، أو حتى Flutter):
- الـ Model: البيانات كالعادة.
- الـ View: الـ UI.
- الـ ViewModel: هو اللي بيربط الاتنين ببعض. بيحول البيانات بشكل يناسب العرض، وبيتعامل مع الـ logic. هنا الـ View والـ ViewModel بيرتبطوا ببعض تلقائيًا عن طريق الـ Data Binding.
🎯 لما المستخدم يكتب حاجة، الـ ViewModel يلاحظ التغيير ويحدث الـ Model، والـ View تتحدث بشكل تلقائي.
———
📌 طب أختار إيه؟
لو شغال على مشروع تقليدي أو backend بسيط: جرب MVC.
لو عايز UI سهل في الاختبار والـ View مفصولة: MVP هو اختيارك.
لو بتشتغل بحاجة فيها Data Binding (زي Angular أو Flutter أو React): MVVM هو الأفضل.
———
#دقيقة_برمجة
❤8
Recursion Explained with Pizza (You’ll Never Forget It Again)
https://dev.to/alisamir/recursion-explained-with-pizza-youll-never-forget-it-again-3m8a
❤5
الفرق بين Static Typing و Dynamic Typing ⌨️
.
.
قبل ما تدخل في مقارنة بين لغات البرمجة، لازم تبقى فاهم الفرق بين نوعين مهمين جدًا من أنواع اللغات:
الـ Static Typing و Dynamic Typing، وده بيتعلق بإزاي اللغة بتتعامل مع أنواع البيانات (Data Types) زي أرقام، نصوص، Boolean... إلخ.
———
اللغات اللي بتستخدم النظام ده بتتأكد من نوع البيانات وقت الكتابة (وقت الـ Compile)، مش وقت التشغيل.
يعني وأنت بتكتب الكود، لازم توضح نوع كل متغيّر (variable)، والمترجم (Compiler) هيبقى بيراجع الأنواع دي ويتأكد إنها ماشية صح.
✅ مثال بلغة TypeScript:
لو حاولت تدي قيمة مختلفة للنوع المتوقع، هيظهر لك خطأ على طول قبل ما الكود يشتغل.
📍 مميزات الـ Static Typing:
- بيقلل الأخطاء في وقت التشغيل.
- بيساعد أدوات التطوير (IDE) إنها تكملك الكود وتديك تحذيرات.
- بيخلي الكود أوضح وأسهل في الصيانة.
———
هنا بقى، اللغة مش هتسألك عن نوع المتغيّر، هتسيبك تكتب براحتك، وتحدد نوعه على حسب القيمة اللي هتحطها فيه وقت التشغيل.
✅ مثال بلغة JavaScript:
يعني نفس المتغيّر ممكن يكون رقم في سطر، و string في السطر اللي بعده، واللغة مش هتعترض
📍 مميزات الـ Dynamic Typing:
- الكود بيبقى أسرع في الكتابة.
- مناسب للتجريب والتطوير السريع (Rapid Prototyping).
- مرن أكتر في بعض الحالات.
———
TypeScript, Java, C++, Kotlin
JavaScript, Python, Ruby, PHP
———
#دقيقة_برمجة
.
.
قبل ما تدخل في مقارنة بين لغات البرمجة، لازم تبقى فاهم الفرق بين نوعين مهمين جدًا من أنواع اللغات:
الـ Static Typing و Dynamic Typing، وده بيتعلق بإزاي اللغة بتتعامل مع أنواع البيانات (Data Types) زي أرقام، نصوص، Boolean... إلخ.
———
📌 الـ Static Typing
اللغات اللي بتستخدم النظام ده بتتأكد من نوع البيانات وقت الكتابة (وقت الـ Compile)، مش وقت التشغيل.
يعني وأنت بتكتب الكود، لازم توضح نوع كل متغيّر (variable)، والمترجم (Compiler) هيبقى بيراجع الأنواع دي ويتأكد إنها ماشية صح.
✅ مثال بلغة TypeScript:
let age: number = 25;
age = "Hello"; // ❌ Error قبل ما الكود يتنفذ
لو حاولت تدي قيمة مختلفة للنوع المتوقع، هيظهر لك خطأ على طول قبل ما الكود يشتغل.
📍 مميزات الـ Static Typing:
- بيقلل الأخطاء في وقت التشغيل.
- بيساعد أدوات التطوير (IDE) إنها تكملك الكود وتديك تحذيرات.
- بيخلي الكود أوضح وأسهل في الصيانة.
———
📌 الـ Dynamic Typing
هنا بقى، اللغة مش هتسألك عن نوع المتغيّر، هتسيبك تكتب براحتك، وتحدد نوعه على حسب القيمة اللي هتحطها فيه وقت التشغيل.
✅ مثال بلغة JavaScript:
let age = 25;
age = "Hello"; // ✅ عادي جدًا
يعني نفس المتغيّر ممكن يكون رقم في سطر، و string في السطر اللي بعده، واللغة مش هتعترض
📍 مميزات الـ Dynamic Typing:
- الكود بيبقى أسرع في الكتابة.
- مناسب للتجريب والتطوير السريع (Rapid Prototyping).
- مرن أكتر في بعض الحالات.
———
🎯 أمثلة للغات Static Typing:
TypeScript, Java, C++, Kotlin
🔥 أمثلة للغات Dynamic Typing:
JavaScript, Python, Ruby, PHP
———
#دقيقة_برمجة
❤4👏2