أدلة الكيفية
شروحات عملية ومركّزة لمشكلات هندسية حقيقية — كل دليل مكتوب لتتمكن من اتباعه من البداية إلى النهاية وتشحن شيئاً يعمل.
كيفية نشر تطبيق Laravel على خادم VPS (Apache و MySQL)
نشر Laravel على خادم VPS يمنحك تحكمًا كاملًا في بيئة الخادم — إصدار PHP، الامتدادات، مهام cron، معالجات الطوابير، وكل شيء. سيأخذك هذا الدليل...
اقرأ الدليلكيفية إضافة دعم متعدد اللغات لتطبيق Laravel
بناء تطبيق Laravel يعمل بلغات متعددة أمر مباشر بمجرد أن تفهم أين يقع كل جزء: بادئات الروابط للتوجيه، ملفات الترجمة لنصوص الواجهة، middleware...
اقرأ الدليلكيفية إرسال رسائل بريد إلكتروني عبر Laravel
نظام Mail في Laravel يُغلّف مُرسِل PHP في واجهة برمجية نظيفة وقابلة للاختبار. تُعرّف كل بريد إلكتروني كـ Mailable class — مع موضوعه وقالبه و...
اقرأ الدليلكيفية جدولة المهام الدورية في Laravel
مُجدوِل المهام في Laravel يتيح لك تعريف جميع مهام cron بلغة PHP — لا حاجة لتعديل crontab الخادم عند كل مهمة جديدة. تسجّل إدخالًا واحدًا في c...
اقرأ الدليلكيفية رفع الملفات وتخزينها في Laravel
تجريد نظام الملفات في Laravel يجعل رفع الملفات أمرًا مباشرًا وقابلًا للتبديل. سواء كنت تخزّن الملفات محليًا، على القرص public، أو على Amazon...
اقرأ الدليلكيفية بناء واجهة REST API في Laravel باستخدام Sanctum
Laravel Sanctum هو أخف طريقة للمصادقة القائمة على الرموز (tokens). بعكس Passport، يأتي Sanctum مدمجاً مع Laravel ولا يحتاج إلى بنية OAuth —...
اقرأ الدليلكيفية تخزين استعلامات قاعدة البيانات المكلفة مؤقتاً في Laravel
لكل رحلة إلى قاعدة البيانات تكلفة. للبيانات التي نادراً ما تتغير — الإعدادات، الفئات، المنشورات الشائعة، قوائم التنقل — تشغيل نفس الاستعلام...
اقرأ الدليلكيفية تشغيل المهام في الخلفية باستخدام طوابير Laravel
كل شيء لا يجب أن يحدث قبل أن تتمكن من الرد على المستخدم ينتمي إلى طابور. إرسال بريد ترحيب، تغيير حجم صورة مرفوعة، استدعاء واجهة API خارجية،...
اقرأ الدليلكيفية ترحيل وبذر البيانات بأمان في Laravel
الـ migrations والـ seeders تحل مشكلتين مختلفتين. الـ migrations تدير مخطط قاعدة البيانات — الجداول والأعمدة والفهارس والمفاتيح الخارجية. هي...
اقرأ الدليلكيفية تشفير كلمات المرور بشكل صحيح في PHP
تخزين كلمات المرور بشكل خاطئ هو أحد أكثر الأخطاء التي قد يرتكبها مطور تأثيراً وعواقب. اختراق قاعدة بيانات بكلمات مرور نصية أو بتشفير ضعيف يك...
اقرأ الدليلكيفية تأخير الأحداث (Debounce) في JavaScript
في كل مرة يكتب فيها المستخدم في حقل بحث أو يغير حجم النافذة أو يتمرر عبر الصفحة، يُطلق المتصفح عشرات الأحداث في الثانية الواحدة. بدون تقييد...
اقرأ الدليلكيفية جلب وعرض بيانات API باستخدام JavaScript النقي
Fetch API هي الطريقة الحديثة لإجراء طلبات HTTP في المتصفح. تُعيد Promises، وتتكامل بسلاسة مع async/await، وتأتي مدمجة في كل المتصفحات — لا ح...
اقرأ الدليلكيفية التعامل مع إرسال النماذج والتحقق منها في JavaScript
تتوقف معظم دروس النماذج عند منع الإرسال الافتراضي وقراءة قيم الحقول. النماذج الحقيقية أصعب: تحتاج إلى التحقق قبل الإرسال، وعرض الأخطاء بوضوح...
اقرأ الدليلكيفية تنفيذ التمرير اللانهائي باستخدام IntersectionObserver
التقنية الكلاسيكية للتمرير اللانهائي تستمع إلى حدث scroll وتستدعي getBoundingClientRect() للتحقق من اقتراب أسفل القائمة من viewport. هذا الن...
اقرأ الدليلكيفية حفظ البيانات في localStorage بأمان
localStorage أبسط طريقة لحفظ البيانات عبر تحديثات الصفحة في المتصفح — بلا سيرفر وبلا قاعدة بيانات. يخزن أزواج مفتاح-قيمة كنصوص، ويصمد بعد إغ...
اقرأ الدليلكيفية إضافة وضع داكن (Dark Mode) إلى موقعك
لم يعد الوضع الداكن ترفاً — المستخدمون يتوقعونه. التطبيق الصحيح يعتمد على CSS custom properties لكل الألوان، وخاصية data-theme على عنصر <...
اقرأ الدليلكيفية تحميل الصور بشكل كسول لتسريع تحميل الصفحة
يؤجل التحميل الكسول (Lazy Loading) الصور الخارجة عن الشاشة حتى يقترب المستخدم منها بالتمرير، مما يقلل حجم الصفحة الأولي ووقت التفاعل. يدعم ا...
اقرأ الدليلكيفية جلب البيانات في React باستخدام useEffect
جلب البيانات في React أمر مباشر بمجرد فهم دورة الحياة. يعمل useEffect بعد الرسم، تُطلق طلب fetch، وعندما يتم الـ Promise تحدّث الـ state. لك...
اقرأ الدليلكيفية إدارة الحالة العامة في React باستخدام Context و useReducer
Context يحل مشكلة محددة واحدة: إيصال الـ state إلى المكوّنات المتعشقة بعمق دون تمرير props عبر كل طبقة بينهما. إنه ليس مكتبة لإدارة الـ stat...
اقرأ الدليلكيفية بناء نموذج تفاعلي مع التحقق في React
النماذج المتحكم بها (Controlled Forms) — حيث يمتلك React قيمة كل حقل مدخل — هي النمط القياسي في React. المقايضة هي كود أكثر مقارنةً بالمدخلا...
اقرأ الدليلكيفية نشر تطبيق Next.js على Vercel
Vercel هو أسرع طريق من مشروع Next.js إلى رابط حي على الإنترنت. المنصة صنعها نفس الفريق الذي أنشأ Next.js، لذا تعمل ميزات App Router وServer...
اقرأ الدليلكيفية إضافة المصادقة لتطبيق Next.js باستخدام Auth.js
Auth.js (المعروف سابقًا بـ NextAuth.js) الإصدار 5 هو الطريقة المعيارية لإضافة المصادقة إلى مشاريع Next.js بـ App Router. يتولى عنك إدارة OAu...
اقرأ الدليلكيفية بناء واجهة REST API باستخدام Node.js و Express
لا يزال Express أكثر إطارات Node.js الويب انتشارًا. هو بسيط بتصميمه — يمنحك التوجيه والـ middleware وخادم HTTP. كل شيء آخر (التحقق، المصادقة...
اقرأ الدليلكيفية إضافة مصادقة JWT لواجهة Node.js API
JWT (JSON Web Tokens) هي الطريقة الأكثر شيوعًا للمصادقة في REST APIs عديمة الحالة. يُصدر الخادم token موقّعًا عند تسجيل الدخول؛ يرسله العميل...
اقرأ الدليلكيفية التحقق من مدخلات API في Node.js باستخدام Zod
كل قيمة في req.body غير موثوقة. يستطيع المستخدم إرسال حقول مفقودة، نوع خاطئ، سلسلة فارغة حيث تتوقع بريدًا إلكترونيًا، أو blob بحجم 10 ميغابا...
اقرأ الدليلكيفية تحديد معدل الطلبات في واجهة Node.js
بدون تحديد معدل الطلبات، تكون واجهة API الخاصة بك عرضة لهجمات القوة الغاشمة على نقاط تسجيل الدخول، والمتتبعات العدوانية التي تُثقل قاعدة الب...
اقرأ الدليلكيفية التعامل مع الأخطاء مركزياً في تطبيق Express
كتلات try/catch المتفرقة التي تُنسّق استجابات الأخطاء كل منها على حدة تمثّل عبئاً على الصيانة وتُنتج مخرجات غير متسقة حتماً. مركزة معالجة ال...
اقرأ الدليلكيفية منع حقن SQL في PHP
حقن SQL لا يزال واحداً من أكثر الثغرات استغلالاً على الإنترنت، ومع ذلك يمكن منعه كلياً. يحدث عندما يُضاف المدخل الخارجي مباشرةً إلى استعلام...
اقرأ الدليلكيفية إعداد CORS لواجهة API بالشكل الصحيح
CORS (مشاركة الموارد عبر الأصول) تُطبَّق من قِبَل المتصفح، ليس الخادم. واجهة API الخاصة بك لا "تحجب" الطلبات العابرة للأصول — المتصفح يفعل ذ...
اقرأ الدليلكيفية إدارة متغيرات البيئة بأمان في Node.js
متغيرات البيئة هي الطريقة التي تُبقي بها الأسرار خارج الكود المصدري. كلمة مرور قاعدة بيانات مُدمجة في مستودع عام تنكشف لحظة رفعها، وإزالتها...
اقرأ الدليلكيفية توسيط عنصر في CSS (الطريقة الحديثة)
كان توسيط العناصر في CSS موضع سخرية لسنوات. أما اليوم فهو بسيط حقاً — شرط أن تستخدم الأداة الصحيحة. يغطي هذا الدليل كل الأساليب الحديثة: Fle...
اقرأ الدليلكيفية بناء تخطيط متجاوب باستخدام CSS Grid
CSS Grid هو أقوى نظام تخطيط أُضيف إلى CSS على الإطلاق. سطر واحد — grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) — يُنشئ شبكة ب...
اقرأ الدليلكيفية بناء رأس صفحة ثابت يختفي عند التمرير
رأس صفحة يلتصق بالأعلى أثناء التمرير بات أمراً بديهياً. أما رأس الصفحة الذي يختفي بذكاء حين تمرر للأسفل — مستردّاً مساحة الشاشة — ويعود للظه...
اقرأ الدليلكيفية تحريك العناصر عند التمرير
الحركات المُشغَّلة بالتمرير — حيث تتلاشى العناصر أو تنزلق للداخل عند دخولها نافذة العرض — هي من أكثر تفاصيل واجهة المستخدم فاعلية التي يمكنك...
اقرأ الدليلكيفية تنسيق حقول النماذج بشكل نظيف عبر المتصفحات
حقول النماذج هي أكثر عناصر HTML تفاوتاً في المتصفحات. كل متصفح يأتي بتنسيقاته الافتراضية الخاصة — padding مختلف، وحواف مدوّرة مختلفة، وأحجام...
اقرأ الدليلكيفية التراجع عن آخر commit في Git بأمان
للتو أجريت commit وندمت عليه فورًا — ملفات خاطئة، أو كود مكسور، أو رسالة بها خطأ إملائي. يمنحك Git عدة طرق للتراجع، والاختيار الصحيح بينها ي...
اقرأ الدليلكيفية حل تعارض الدمج في Git دون فقدان عملك
تحدث تعارضات الدمج عندما يُعدِّل فرعان السطور نفسها في الملف نفسه. لا يستطيع Git تحديد أي نسخة يحتفظ بها، لذا يتوقف ويطلب منك الاختيار. علام...
اقرأ الدليلكيفية كتابة رسائل commit جيدة في Git
رسالة الـ commit هي ملاحظة لنفسك في المستقبل (ولزملائك) تشرح سبب إجراء التغيير. الـ diff يُظهر الماذا؛ أما الرسالة فيجب أن تشرح اللماذا. الر...
اقرأ الدليلكيفية نشر موقع ساكن على GitHub Pages
GitHub Pages استضافة ساكنة مجانية مدمجة مباشرة في GitHub. لا خادم تُعدّه، ولا فاتورة لحركة المرور الصغيرة، وتحدث عمليات النشر تلقائيًا عند ك...
اقرأ الدليلكيفية إنشاء Git hook قبل الـ commit للتحقق من الكود
يشغّل الـ pre-commit hook سكريبتًا في اللحظة التي تكتب فيها git commit، قبل إنشاء أي commit. إذا خرج السكريبت بحالة غير صفرية، يُحظر الـ com...
اقرأ الدليلكيفية إعداد Nginx كوسيط عكسي لتطبيق Node
تطبيق Node الخاص بك يعمل على المنفذ 3000. يجلس Nginx أمامه ليتولى إنهاء TLS وتقديم الملفات الثابتة بأقصى سرعة، مع إمكانية تشغيل عدة تطبيقات...
اقرأ الدليلكيفية الحصول على شهادة SSL مجانية باستخدام Let's Encrypt
تُصدر Let's Encrypt شهادات TLS مجانية موثوقة من المتصفحات وتتجدد تلقائياً كل 90 يوماً. Certbot — العميل الرسمي — يُعدّل إعداد Nginx الخاص بك...
اقرأ الدليلكيفية وضع تطبيق Laravel في Docker مع PHP-FPM و Nginx
إعداد صورة واحدة تضم "PHP + Nginx + MySQL في حاوية واحدة" مغرٍ لكنه خاطئ — إنه يتعارض مع نموذج عمليات Docker، ويجعل التوسع مستحيلاً، ويضخّم...
اقرأ الدليلكيفية إعداد CI/CD باستخدام GitHub Actions
تلتقط بيبلاين CI/CD الـ commits المعطوبة قبل وصولها للإنتاج وتنشر الكود الناجح تلقائياً. GitHub Actions مجاني للمستودعات العامة وسخي للخاصة،...
اقرأ الدليلكيفية أتمتة النسخ الاحتياطي لقاعدة بيانات MySQL باستخدام Cron
النسخ الاحتياطي اليدوي يفشل في نهاية المطاف. مهمة cron لـ mysqldump تعمل الساعة 2 صباحاً مضغوطة، محتفظاً بها 7 أيام، منسوخة خارج الخادم — لا...
اقرأ الدليلكيفية تصميم مخطط قاعدة بيانات نظيف لميزة جديدة
معظم أخطاء المخطط تحدث قبل كتابة سطر واحد من الكود — حين يتخطى أحدهم خطوة التصميم ويذهب مباشرة إلى الـ migrations. المخطط السيئ يخلق ديناً ت...
اقرأ الدليلكيفية اكتشاف وإصلاح استعلامات MySQL البطيئة باستخدام EXPLAIN
استعلام يستغرق 20 ميللي ثانية في بيئة التطوير قد يستغرق 8 ثوانٍ في الإنتاج حين يبلغ الجدول مليون صف. الفجوة بين الحالتين غالباً تكون فهرساً...
اقرأ الدليلكيفية إضافة الفهارس الصحيحة لقاعدة البيانات
الفهارس هي أقوى أداة أداء متاحة للمطور دون لمس كود التطبيق — فهرس واحد في المكان الصحيح يمكنه تحويل استعلام من 10 ثوانٍ إلى 10 ميللي ثانية....
اقرأ الدليلكيفية تصحيح كود Node.js في VS Code باستخدام نقاط التوقف
معظم المطورين يُصحّحون Node.js بنفس الطريقة التي تعلموا بها البرمجة: console.log في كل مكان. ينجح الأمر — حتى يكون الخطأ داخل حلقة بـ 10,000...
اقرأ الدليلكيفية تنسيق كود JavaScript باستخدام Prettier و ESLint
تعليقات مراجعة الكود حول التنسيق — الفواصل الزائدة، أسلوب الاقتباس، المسافات البادئة — مضيعة لوقت الجميع. أتمتة التنسيق مع Prettier تُلغي فئ...
اقرأ الدليلهل تحتاج مساعدة في مشروعك؟
احجز استشارة مجانية لمدة 30 دقيقة لمناقشة تحدياتك التقنية واستكشاف الحلول معًا.