Race Conditions في React — لما الطلب القديم يسبق الجديد ويكتب فوقه

شرح عملي لمشكلة Race Conditions في React وإزاي تمنع الطلب القديم يكتب فوق الجديد باستخدام ignore و AbortController و React Query و React 19.

الـ Middleware — السر اللي بيخلي أي Framework للـ Backend منطقي

قبل ما تتعلم Express أو Fastify — لازم تفهم يعني إيه Middleware. اللي مش فاهمها بيعيد نفس الكود في كل Endpoint، واللي فاهمها بيكتب سيستم كامل في 30 سطر بس.

One line in Async you forgot — 11 days searching (Day 5)

سطر نسيته فيه await وقعدت 11 يوم تدور على الـ Bug. النهاردة هنفهم ليه الـ Promise المرفوضة أخطر من الـ Exception، وإزاي نبني Error Handling يحمي السيرفر من نفسه.

هيكلة المشروع والـ Modules — (اليوم الرابع)

ملف واحد كتبته في يوم بقى جحيم بعد 6 أشهر. النهاردة هنفهم ليه الـ Structure هو الفرق بين مشروع يعيش ومشروع يموت — وهنحول API بتاع اليوم التالت من ملف واحد لـ Architecture محترم خطوة بخطوة.

ابني HTTP Server من غير Express — إيه اللي تحت الغطاء (اليوم التالت)

هنبني سيرفر HTTP كامل من الصفر بدون أي فريم وورك. هنفهم إزاي الـ Request بيتقرأ، والـ Response بيتبعت، والـ Routing بيشتغل من جوه.

إزاي Node.js بيشتغل من جوه؟ (اليوم التاني)

تعالوا ندخل جوة محرك Node.js ونفككه حتة حتة. إيه هو الـ V8 Engine؟ وإيه التفاصيل الدقيقة للـ Event Loop وليه الـ Node.js سريع جداً رغم إنه بيعتمد على مسار واحد (Single-threaded)؟

المفهوم الحقيقي للـ Backend - (اليوم الأول)

هناخد رحلة الـ Request تحت الميكروسكوب. هنفصص كل تفصيلة تقنية من DNS للـ TCP للـ TLS والـ Database Indexes.

Deep Dive into Zustand with Next.js: Architecture and Hydration

دليل شامل لدمج Zustand مع Next.js App Router. هنـdive deep في التفاصيل التقنية للـ Hydration والـ Memory Management عشان تبني Architecture محترمة لتطبيقك.

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.

Mastering XHR in JavaScript

دليل شامل لـ XMLHttpRequest في JavaScript - من التاريخ والتطور إلى الاستخدامات المتقدمة. تعلم كيفية إرسال طلبات HTTP، تتبع التقدم، رفع الملفات، إدارة الأخطاء، ومقارنة مع Fetch API.

what is new in Tailwind CSS v4

تعرف على أهم التحديثات والمميزات الجديدة في Tailwind CSS v4، من تحسين الأداء إلى نظام الألوان الجديد OKLCH

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 Build Your Own Css Framework

دليل شامل لبناء مكتبة CSS خاصة بك، يتضمن مراحل التخطيط والتحضير، إعداد هيكل المشروع، بناء الأساسيات، نظام Grid، والمكونات المختلفة مثل Buttons والـForms والـCards

How Web Works

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

How to optimize Next.js applications

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

Largest Contentful Paint (LCP)

Keyboard Events

React Server Components

مش بس بشرحلك كيفية استخدام React Server Components، بس بشرحلك ليه هي ظهرت وإيه هو الـRsc Payload

Hidden Powers of Css

حاجات محدش هيقولهالك عن الـ CSS

Closure in JavaScript

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

Promises in JavaScript

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

Interface Vs Type

إحنا في TypeScript عندنا طريقتين لتحديد الshape of data ممكن نستخدم types أو interfaces وسؤال دايمًا بيتسأل في TypeScript هو "نستخدم (types) ولا (interfaces)؟" وإيه الفرق بينهم ؟

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 بتكبر معاك ! الكلام دا كله قالوا إن هيطبق السنة دي :( إن عشنا وكان لنا من العمر بقية

Cross-Site Request Forgery , Understanding SOP, CORS

هل إنت من المبرمجين الشريرين ولا مبرمج طيوب لذوذ ؟ متستغربش تعال أقولك سيناريو غريب شوية،حازم بيستخدم موقعك من نفس المتصفح اللي بيخش بيه ع موقع زي ٱموالي أو موقع البنك يخلص معاملاته الرقمية ، واللي بيفتح منه برضه جيميل ف طبعا المتصفح بيخزن ال cookies بتاعة حازم طبعا إنت عارف الconcept بتاع AJAX (Asynchronous JavaScript And XML) طب م أحاول في موقعي أعمل كود JavaScript يجيبلي بيانات حازم من المتصفح وبعدين أستخدم AJAX علشان أبعت ريكوست عشان أخزن بيانات حساب حازم أو أبعت ريكوست للجيميل كأني حازم

Media Queries vs Container Queries

زمان قبل 2010، كان مصممي الويب يقدروا يعملوا مواقع تناسب الديسكتوب بس. لحد ما جه Ethan Marcotte وقدم لنا مفهوم الـResponsive Web Design (RWD)، واللي عرفه موقع MDN بأنه طريقة لتصميم الويب عشان يناسب كل الأجهزة. وده خلى الـmedia queries عنصر أساسي في الRWD . لكن دلوقتي في تحول ناحية حاجة جديدة عرفتها Jen Simmons بـIntrinsic Web Design – اللي بتركز على عمل مكونات بتفهم السياق اللي هي فيه. وContainer Queries هي اللي بتخلي ده ممكن.

New Features in JavaScript

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

Shadow DOM

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

Viewport Units in CSS

أكيد كلكم سمعتوا عن الوحدات دي VH, DVH, SVH, وLVH في ال CSS بس إيه الفرق بينهم؟ تعالوا نفك الشفرة مع بعض!

Writing Logic in CSS

كنت تصدق إنك تقدر تكتب Logic جوا ال css ؟ تعال هقولك إزاي تعمل كل دول Conditions (if/then), Loops (for, while), Logical Gates (===, &&, etc.) and Variables.

Improve Web Performance with HTTP Caching

زاي تحسن ال preformance بتاع الwebsite بتاعك وتقلل من وقت تحميله لزاوره ، وكمان تقلل ال load ع السيرفر بتاعك ؟

Removing Object Properties in JavaScript

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

How to Compare Objects in JavaScript

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

Z-INDEX and Flow Layout Algorithm

معلومة غلط قلتها في يوم ف فيديوهات ليا وجب إني أنوه عن الصح بتاعها وأعتذر وأتمني إن ربنا يغفرلي تقصيري وقتها ، قلت ان ال z-index مبيشتغلش إلا مع ال position property in css ، ودا مش صح إطلاقًا ، ال z index مبتشغلش مع ال flow layout algorithm