DevGuide

دردشة سريعة عن الـ Temporal Dead Zone في JavaScript ⚡️ . . لو اشتغلت بـ let أو const في JavaScript، يبقى مهم جدًا تبقى فاهم الموضوع ده كويس جدًا… عشان هو واحد من الحاجات اللي ممكن تخلي الكود بتاعك يضرب وأنت مش فاهم ليه، وتفضل تلف حول نفسك بالساعات تحاول تحل error شكله غريب جدًا... تعال ندردش شوية عن الـ Temporal Dead Zone أو الـ TDZ ——— 🎯 الأول: يعني إيه Temporal Dead Zone؟ ببساطة كده، الـ Temporal Dead Zone هي الفترة الزمنية اللي بتبدأ من أول ما الـ scope بتاع المتغير بيتنفذ، لحد اللحظة اللي المتغير نفسه بيتعرف فيها (يعني بيتعمله declaration). خلال الفترة دي، المتغير موجود "في دماغ JavaScript" بس مش مسموح توصل له، ولو حاولت تستخدمه... JavaScript هتقولك ReferenceError. ——— ✅ مثال سريع يوضح الموضوع:

console.log(myVar); // ReferenceError: Cannot access 'myVar' before initialization
let myVar = 10;

تفتكر ليه الكود ده بيطلع Error؟ ده لأن myVar دخل في الـ Temporal Dead Zone من أول ما الـ scope بدأ، ومش خارج منها غير بعد ما نوصل لسطر

let myVar = 10

يعني المتغير موجود بس مش جاهز لسه للاستخدام. ——— 🤔 طب ليه ده بيحصل؟ الـ JavaScript بتعمل حاجة اسمها Hoisting لكل المتغيرات، سواء var أو let أو const. بس فيه فرق: - الـ var: بيتعمله hoisting وتبقى الـ default value = undefined، فممكن تستخدمها قبل ما تُعلن عنها. - الـ let و const: بيتعملهم hoisting بردو، لكن ملهمش value، وبيكونوا في منطقة اسمها الـ TDZ لحد ما يوصل السطر اللي بيعملهم declaration. ——— مجموعة أمثلة توضح الفرق بين var و let: مثال بـ var:

console.log(a); // undefined
var a = 5;

نفس المثال بـ let:

console.log(b); // ReferenceError
let b = 5;

الاتنين اتعملهم hoisting… بس var أخذ value undefined، إنما let من غير value، فدخل في الـ TDZ... ——— 📌 معلومات مهمة عن الـ TDZ: 1- الـ TDZ مش بس بتأثر على المتغيرات… كمان بتأثر على function parameters اللي متعرف لها default values 2- المتغير بيفضل في TDZ لحد ما توصل لسطر التعريف بتاعه. 3- الـ const كمان لها TDZ زي let بالضبط، لكن الفرق إنك لازم تعطيها قيمة وقت التعريف. 4- الـ TDZ بتمنعك من استخدام المتغير قبل ما تجهزه، وده هيحميك من مشاكل كتيرة. ——— 🧠 كده نفهم إن: الـ let و const أحسن من var في إنهم بيخلوا الكود predictable. بس في نفس الوقت لازم تكون فاهم TDZ كويس جدًا علشان متغلطش غلطة بسيطة تكسرلك الكود. كل ما تستخدم let أو const فوق في الكود، تأكد إنك مش بتستدعيهم قبل ما يتعرفوا.

انضم إلى #مجرة — مجتمع المطوّرين ومستجدّات التقنية! اكتشف أحدث المقالات والأدوات وشارك خبراتك مع مطوّرين من كل مكان. https://majara.dev/register?ref=alisamir

System Design Course – APIs, Databases, Caching, CDNs, Load Balancing & Production Infra 🚀 https://youtu.be/C842vFY5kRo

Software Engineering for Undergrads 💯 ———

Software Engineering CS391 - 2024

Software Engineering CS391 Course at Faculty of Computers an Information, Assiut University https://youtube.com/playlist?list=PLtk4ylDqiyiZxnwWGP-AsA8S5UYYsXp5U&si=K7b004cFY7yhH1GH

مليون خبير لأوامر الذكاء الاصطناعي

مبادرة طموحة تهدف إلى تمكين مليون فرد بمهارات الذكاء الاصطناعي وهندسة الأوامر على مدار السنوات الثلاث المقبلة انطلاقاً من دبي. توفر هذه الدورة أساساً متيناً لفهم الذكاء الاصطناعي والذكاء الاصطناعي التوليدي وهندسة الأوامر لتطبيقات وأدوات الذكاء الاصطناعي، بما يمكّن المنتسبين من الاستخدام الفعال لأدوات الذكاء الاصطناعي في عملهم وحياتهم اليومية. وسوف يتقن المشاركون من خلال المناهج التفاعلية والعملية لغة مخاطبة الذكاء الاصطناعي، وصياغة أوامره، بما يعزز الاستفادة من تقنياته المصممة لتعزيز الإنتاجية والأعمال الإبداعية، ومن ثمّ تحقيق النجاح في سوق العمل وتطوراته المتسارعة. https://dub.ai/ar/omp-ar

Container Queries Explained ⚡️

Container queries make components truly smart. They adapt to their space, not the screen.

دردشة سريعة عن مفهوم الـ ACID في الـ Database ⚡️ . . تخيل إنك شغال على system ضخم زي تطبيق بنكي أو موقع بيع أونلاين… في اللحظة اللي المستخدم بيحوّل فيها فلوس أو بيأكد عملية شراء، لازم تكون متأكد إن البيانات دي محفوظة صح، ومفيش أي احتمال يحصل فيها خلل أو تضارب، حتى لو السيرفر وقع أو الكهرباء قطعت. ⚠️ وهنا ييجي دور الـ ACID وهو ده العمود الفقري اللي بيخلي الـ Database تكون ثابتة، موثوقة، ومتوقعة السلوك في كل الحالات، سواء كان عندك عملية واحدة بسيطة أو آلاف الـ transactions في نفس الثانية. الـ ACID بيحط أربع قواعد أساسية بتخلي أي Database system يعرف يتصرف وقت المشاكل ويحافظ على البيانات من غير ما يحصل chaos أو data corruption. ———

📌 أولًا: Atomicity

يعني لو عندك transaction بتنقل فلوس من حساب لحساب: - تسحب 1000 جنيه من حساب A - وتضيف 1000 لحساب B لو أول خطوة نجحت والتانية فشلت لأي سبب (مثلًا السيرفر وقع)، المفروض الـ Database ترجع كل حاجة زي الأول، كأن العملية محصلتش. ———

📌 ثانيًا: Consistency

الـ Consistency معناها إن الـ Database تفضل دايمًا في state صحيحة ومظبوطة. يعني كل القواعد (constraints, rules, triggers) اللي أنت محددها لازم تفضل متطبقة بعد أي عملية. مثلًا: لو عندك rule بيقول إن الرصيد مينفعش يكون بالسالب، فـ بعد أي transaction لازم الـ DB تفضل محافظة على القاعدة دي. لو حصل violation للقواعد دي، العملية كلها تتلغي. ———

ثالثًا: Isolation

تخيل معايا كذا transaction شغالين في نفس الوقت... واحد بيضيف بيانات، والتاني بيعدّل، والتالت بيقرأ. لو مفيش Isolation، الدنيا هتبقى فوضى، وكل transaction هيشوف الـ data وهي لسه بتتغير! لكن مع وجود الـ Isolation، كل transaction بتتعامل كأنها العملية الوحيدة اللي بتتنفذ. يعني حتى لو كذا transaction شغالين في نفس اللحظة، النتائج اللي بيشوفوها مضمونة ومفيهاش تداخل أو corruption. وطبعًا فيه مستويات مختلفة للـ Isolation (زي Read Uncommitted, Read Committed, Repeatable Read, Serializable)، وكل واحدة لها trade-offs بين الأداء والدقة. ———

رابعًا: Durability

الـ Durability معناها إن بمجرد ما الـ Database تقولك "تمت العملية بنجاح"، يبقى خلاص الـ data دي محفوظة ومش هتضيع حتى لو السيرفر وقع أو الكهرباء قطعت. إزاي؟ لأن الـ DB بتكتب التغييرات على الـ disk (أو الـ log files) قبل ما تقولك العملية نجحت، علشان تقدر تسترجعها لو حصل أي failure. ——— #دقيقة_برمجة

Your front end performance is fine. Your front end scalability isn't.

Performance checklists optimize for users -- load times, Core Web Vitals, image compression. Scalability checklists optimize for teams -- what breaks when you go from 3 engineers to 30.

مقال لذيذ ومفيد بيتكلم عن مفهوم مهم جدًا في عالم البرمجة، وهو Cryptography، وبيوضح أهم المفاهيم والأنواع اللي هتقابلك كتير خلال رحلتك كـ Developer. ⚡️ . .

7 Cryptography Concepts Every Developer Should Know 💯

. . Cryptography is no longer just a “security engineer topic.” Whether you build authentication systems, APIs, payment integrations, or secure file sharing features, understanding core cryptography concepts is essential for every modern developer. In this guide, we’ll break down the 7 most important cryptography concepts every developer should know, explain how they work, and show practical Node.js examples you can apply in real-world systems. ——— https://medium.com/@dev.alisamir/7-cryptography-concepts-every-developer-should-know-cd4b579e20bf

الفرق بين Low-level و High-level Languages 🧠 تعال نتكلم عن حاجة أساسية في عالم البرمجة، وهي نوعين من اللغات اللي بنكتب بيهم الكود: 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. ——— #دقيقة_برمجة

SQL Full Course for Beginners (30 Hours) – From Zero to Hero

https://youtu.be/SSKVgrwhzus

CLAUDE CODE FULL COURSE 4 HOURS: Build & Sell (2026)

https://youtu.be/QoQBzR1NIqI

مفهوم الـ CDN🌍 . . كلمة CDN هي اختصار لـ Content Delivery Network، يعني "شبكة توصيل المحتوى"، ودي واحدة من الحاجات اللي بتسرّع مواقع الويب بشكل خرافي وبتخلي تجربة المستخدم أحسن بكتير، وخليني أشرحلك إزاي وليه 👇 ——— 🎯 المشكلة الأساسية: تخيل إنك عامل موقع ومتخزن على سيرفر موجود في أمريكا، وجالك زائر من مصر... كل ما يفتح الموقع، جهازه بيبعَت طلب (request) للسيرفر اللي في أمريكا، والسيرفر بيرد عليه بالملفات (صور، CSS، JavaScript...) المشكلة إن المسافة بعيدة، وده بيخلّي وقت تحميل الصفحة أطول 😩 ——— 💡 الحل؟ هنا ييجي دور الـ CDN الـ CDN عبارة عن شبكة كبيرة جدًا من السيرفرات (بنسمّيهم Edge Servers) منتشرين في كل مكان في العالم — في مصر، السعودية، أوروبا، أمريكا، آسيا... إلخ. لما تستخدم CDN، هو بيخزن نسخة من الملفات الثابتة بتاعة موقعك (زي الصور، ملفات CSS و JS، الخطوط، الفيديوهات...) على كل السيرفرات دي. يعني لما حد من مصر يفتح موقعك، بدل ما يتواصل مع السيرفر الأساسي في أمريكا، هيتواصل مع أقرب سيرفر ليه جغرافيًا (مثلاً في القاهرة أو دبي)، وده بيخلي الموقع يفتح بسرعة🚀 ——— 📦 الـ CDN بيخزن إيه بالظبط؟ الـ 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 بشكل تلقائي في الخلفية. ——— #دقيقة_برمجة

Proxy Power Moves in JavaScript 💯

From reactivity to access control, the Proxy API isn't just for nerds, it's a power tool for elegant code.

مفهوم الـ 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، ويساعدك تنفذ أجزاء معينة في التطبيق بسرعة وكفاءة. ——— #دقيقة_برمجة

🍪 CookieStore API offers a modern, promise-based way to read, write, update, and delete cookies, all without parsing strings manually. It brings, ✅ Async operations ✅ Structured data ✅ Service worker support Learn more 👇 https://developer.mozilla.org/en-US/docs/Web/API/CookieStore

انضم إلى #مجرة — مجتمع المطوّرين ومستجدّات التقنية! اكتشف أحدث المقالات والأدوات وشارك خبراتك مع مطوّرين من كل مكان. ——— https://majara.dev/register?ref=alisamir