Event Loop & Async: ليه JavaScript دايمًا بتطلع النتايج “غلط”؟

إمتى الكود بيتنفذ؟ وليه الترتيب بيطلع عكسي؟ رحلة جوه الـ Call Stack، Web APIs، والفرق بين الـ Task Queue والـ Microtask Queue اللي بيوقع Seniors في الـ Interviews.

Closures & Memory: شنطة الذكريات اللي مابتتنسيش

فهم الـ Closures مش بس هيجاوبك على أسئلة الانترفيو، ده هيخليك تفهم يعني إيه Memory Safety و Garbage Collection. رحلة جوه الـ Heap والـ Stack.

this in JavaScript: The Most Misunderstood Binding

مش كل this تعني instance. دليلك الشامل لفهم أخطر كلمة في الـ JS: من الـ Call-Site والـ 4 Rules، لحد الـ Arrow Functions وكوارث الـ React Event Handlers.

let vs var vs const: The One Hack That Separates Juniors from Seniors

رحلة من الصفر للاحتراف في فهم المتغيرات في JavaScript. مش مجرد var و let، ده شرح للـ Memory Model، Scope Chain، Hoisting، والـ Engine Optimizations.

App Router vs Pages Router

لما نزل App Router، ناس كتير افتكرت إنه مجرد طريقة تنظيم مختلفة — بس اللي حصل فعلاً أعمق من كده بكتير. App Router بيشتغل بطريقة مختلفة تمامًا، مبنية على React Server Components (RSC)، ودي مش مجرد فكرة بسيطة — ده تغيير كامل في طريقة بناء تطبيقات React.

Event-based Code Replayer

Scrimba مش platform بتسجّل فيديوهات screen capture زي أي كورس تقليدي، لأ، هما عندهم proprietary playback engine بيشتغل كـ event-based replayer. بدال ما يسجّلوا فيديو، هما بيسجّلوا كل حاجة بتحصل جوه الـ code editor كـ discrete DOM + editor-level events: keypresses, cursor movement, selection, deletions، وحتى clipboard interactions.

How to optimize Next.js applications

إزاي تحسّن تطبيقات Next.js بتاعتك عشان تبقى أسرع وأحسن

Largest Contentful Paint (LCP)

Keyboard Events

Closure in JavaScript

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

Promises in JavaScript

المقالة دي غير إن هي بتتكلم عن الـpromise وبتشرحه بأمثلة عملية بتشرحلك إزاي عملوا Implementation للـ Promise

Chrome Extensions

JavaScript Preformance Optimization

بفضل الله دي أكبر مقالة ممكن تقابلها بتتكلم في الـtopic دا بالتفصيل والمعلومات دي وأمثلة advanced بالكود كامل ، المقالة دي محتاجة تركيزك بالكامل

useTransition Hook in React

أي hook إتعمل بييجي عشان case محتاجها أو مشكلة أنا محتاج أحلها ، ال hook دا مهم لو عاوز تoptimize ال performance قبل ما نخش على الـ useTransition، لازم نفهم الأول المشكلة اللي بتواجهنا

Safe Assignment Operator in JavaScript

لو إنت جاي من باك جراوند لغات زي Go، Rust ف أعتقد إنك فهمت البوست كله لإنها واخدة الفكرة من اللغات دي تقدر تقول هتودع كتابة ال Try-Catch Blocks في ال error handling ف هي الفكرة ف إنه واخد الفكرة كلها من اللغات دي نفسها ف إنه يتعامل مع ال error ك values عشان كده في Proproposal جديد وطبعا لازم يعدي علي كل الـstages ويتقبل عشان يبقي supported

Virtual DOM in React

خلينا نتكلم شوية عن السر اللي بيخلي المواقع المفضلة عندك سريعة ومستجيبة بالشكل ده. السر في الموضوع ده بيرجع لطريقة التعامل مع الـ DOM. الـ (Document Object Model) بيمثل الصفحة بتاعتك على هيئة structured tree. زمان كنا بنستخدم طرق في الـ JavaScript زي getElementById أو removeChild عشان نعمل تعديلات على الصفحة. لكن مع تعقيد المواقع الويب وتوسعها، الطرق دي ممكن تخلي الأداء بطيء. هنا بتيجي قوة React بالـ Virtual DOM اللي غيرت قواعد اللعبة تمامًا.

Error Boundaries - The Security Net for Your App 🛡️

ببساطة هما components في React بتتحط حوالين components تانية عشان تCatch أي أخطاء تحصل في الـrendering أو ال Lifecycle Methods بتاعة الcomponents دي. يعني زي شبكة أمان كده بتمنع التطبيق كله إنه ي failing لو فيه خطأ حصل في component معين. الفكرة إننا بدل ما المستخدم يشوف شاشة بيضا أو الأبلكيشن مش شغال بنعرضله fallback UIs

Scroll Problem in React Router

وإنت بتستخدم React Router أكيد قابلك المشكلة دي ،بشكل افتراضي، في أي تطبيق معمول بـReact Router، لما تعمل navigation من صفحة لصفحة تانية، الـscroll ما بيرجعش للأول، يعني لو كنت قافل الصفحة وانت في جزء معين منها، الصفحة التانية هتفتح وانت في نفس المكان.

Key Prop in React

مستحيل تكون اشتغلت بريأكت ومشوفتش ال Warning ده :( في اللحظة دي ممكن تفكر "ما هو مجرد تحذير"، لكن صدقني، الموضوع أخطر من كده. التحذير ده ممكن يكون سبب لمشاكل كبيرة في الـ application بتاعك إزاي تتعامل مع React Keys صح؟ 🤔

Understanding Automatic Batching in React

في React 18، ظهرت ميزة جديدة وهي Automatic Batching، اللي بتساعد في تقليل الـ renders وبالتالي بتحسن الأداء بشكل كبير. قبل ما نتكلم عن الـ Automatic Batching، خلينا نفهم الأول إيه اللي كان بيحصل في الفيرجنز اللي فاتت من React وإيه التغيير اللي حصل؟

Web Workers in JS

شايفك بتهرش في دماغك وبتسأل نفسك سؤال مهم إزاي JavaScript بتشتغل بسنجل thread و Web Workers بتعمل Multi-threading؟ هجاوبك بالتفصيل في الأخر

The Dark Side of useState - Traps and Gotchas in React

تعال بقي أقولك علي 4 غلطات بشعة بتعملها وانت بتستخدم useState وهتخليك تشد ف شعرك لو لسه مبتدأ

Proxies in JavaScript

هنتكلم عن ال Proxies وتعال أفاجئك بسر بسيط Vue 3 مبني على الـ Proxies بشكل أساسي. في الإصدار الثالث من Vue، تم استخدام الـ Proxy لتحسين الأداء والتفاعل مقارنةً بالإصدار الثاني اللي كان بيعتمد على Object.defineProperty. فالمقال دا مش رفاهية لو متعرفش يعني إيه Proxy؟

Mutation Observer in JS

هتكلم عن حاجة مش واخدة حقها في ال js وناس كتير متعرفهاش وهي ال MutationObserver الـ MutationObserver بيتيح لك تراقب التغييرات اللي بتحصل في DOM بتاعك بشكل فعال وسريع يعني إيه MutationObserver؟ MutationObserver هي API موجودة في JavaScript بتسمح لك تراقب أي تغيير بيحصل في DOM nodes. يعني لو حصل إضافة، حذف، أو تعديل لأي عنصر في الصفحة، الـ MutationObserver هيقدر يكتشف دا.

Why Props is Unchangeable in React

وبما إنها unchangeable إيه الطريقة اللي خلوا بيها ال props تبقى unchangeable في ال js ?

Detect Adblocker in JS

النهارده كنت محتاج أكتشف إذا كان المستخدم مشغل adblocker ولا لأ. ممكن تسأل ليه؟ في الحالة دي، كنت عاوز أتحقق من بعض بيانات المستخدم عن طريق نظام خارجي، لكن الـ adblockers زي Ghostery هتمنع الاتصال دا. مثال ع المواقع العالمية اللي بتستخدم اتصالات بأنظمة خارجية هو موقع Facebook اللي بيتتبع تفاعل المستخدمين عن طريق Google Analytics. لو كان المستخدم مشغل adblocker، الطلبات دي ممكن تتمنع.

Garbage Collection - Memory Management in JavaScript

لو هنتكلم عن الmemory management بشكل عام ف لغات البرمجة بتتقسم لشقين ، شق بيخليك إنت كمبرمج تتحكم manualluy ب إيدك وتخصص الmemory و ت free up زي ال c++ وال c عن طريق functions زي malloc و free وغيرهم وتقدر تستخدم libraries تضيف نوع من أنواع ال garbage collection زي boehm-demers-weiser ، بس دي مش جزء من اللغة نفسها ، ولغات تانية بتعمل دا بشكل automated عن طريق الgarbage collection زي الjava و python و js ، فيه شق تالت بقي خرج برا الصندوق وفكرت بشكل مختلف زي Rust ، عملت نظام خاص بيها إسمه الownership بيطبق وقت الcompile time وبيتكون من شوية principles زي الsingle owner وال scope و ال borrowing وال safe references ، تعال بقي نتكلم ف حبيبتنا ،

What's New in JavaScript ECMAScript® 2024 (ES15)

ال ECMAScript® 2024 (ES15) ، إيه الجديد في JavaScript متستغربش :( إنت بتكبر والjs بتكبر معاك ! الكلام دا كله قالوا إن هيطبق السنة دي :( إن عشنا وكان لنا من العمر بقية

New Features in JavaScript

تعال أقولك شوية features جديدة في ال js عشان تبقي جامد جمودة

Shadow DOM

إمتى ظهر الـ Shadow DOM، وظهر ليه، وأهميته إيه؟

Removing Object Properties in JavaScript

فيه أكتر من طريقة عشان أقدر أحقق دا ؟ عندي اتنين object والهدف بتاعي إني أخليهم similar

How to Compare Objects in JavaScript

دا سؤال مهم جدا تعال نجاوب عليه in depth لما تيجي تقارن أي primitive values في ال js ف الموضوع بسيط بتستخدم أي equality operators كمثال :