مدوّنتنا
تصفّح مقالات مدوّنتنا حول تصميم وتطوير المواقع والتسويق الرقمي لتبقى على اطّلاع بأحدث التوجّهات والاستراتيجيات.
تم العثور على 101 مقال
الوضع الداكن دون وميض في Next.js 16: كيف نستخدم سكربت سمة حاجبًا وcolor-scheme وزر تبديل آمنًا مع الـ Hydration
وميض الوضع الداكن عند إعادة تحميل الصفحة مشكلة توقيت: الخادم لا يستطيع قراءة localStorage. نشرح سكربت السمة الحاجب الذي نستخدمه في Next.js 16، ولماذا لا نضع السمة في cookie حفاظًا على الرسم الثابت، وكيف نبني زر تبديل يمر بالـ hydration دون أي عدم تطابق.
صور Open Graph الديناميكية في Next.js 16: كيف نبني opengraph-image.tsx ونتحقق من إصدار Satori الذي تضمّنه next/og ونحافظ على صحة معاينات الروابط
واجهت بطاقات المشاركة المولّدة لدينا ثلاث مفاجآت: خط WOFF2 لم يستطع المحرّك قراءته، وملف README لـ Satori يصف محرّكًا أحدث من المضمّن في Next.js، وصفحة ظلّت تعرض صورة الـ layout. هذه ملاحظاتنا الميدانية حول opengraph-image.tsx في Next.js 16 وأولوية البيانات الوصفية وفحص og:image قبل مشاركة أي رابط.
استضافة Next.js 16 ذاتيًا في Docker: مخرجات standalone ومعالجات التخزين المشتركة ومشكلات تعدد النسخ
حاوية Next.js الواحدة تعمل مباشرة، أما النسخة الثانية فتعطّل Server Actions وrevalidateTag() وفحوص الصحة. هذا ملف Dockerfile بوضع standalone الذي نبنيه لـ Next.js 16، ومعه مفتاح التشفير المشترك وdeploymentId ومعالجات التخزين المبنية على Redis التي تجعل عدة نسخ تتصرف كتطبيق واحد.
اختبارات الانحدار البصري باستخدام toHaveScreenshot في Playwright: كيف نثبّت الصور المرجعية داخل Docker ونخفي المحتوى المتغير ونستخدم لقطات شجرة الوصول
فشلت الصور المرجعية التي ولّدناها لاختبارات لقطات الشاشة على جهاز Mac عند تشغيلها على CI بنظام Linux دون تغيير سطر واحد من الكود. نشارك هنا كيف نشغّل toHaveScreenshot() في Playwright بشكل موثوق: صور مرجعية تُولَّد داخل صورة Docker مثبتة الإصدار، وتجميد الوقت وإخفاء المحتوى المتغير، وهامش اختلاف قريب من الصفر، ولقطات aria للتحقق من البنية.
مهارات Claude Code عمليًا: كيف نستخدم SKILL.md والتحكم في الاستدعاء وملف CLAUDE.md أخف
تحولت ملفات CLAUDE.md لدينا إلى كتيّبات تشغيل تُحمَّل في كل جلسة. حلّت مهارات Claude Code هذه المشكلة: ملف SKILL.md يبقى وصفه متاحًا دائمًا بينما يُحمَّل متنه عند الحاجة فقط. إليك كيف نكتب أوصافًا تُفعِّل المهارة، ونُبقي مهارات النشر يدوية، ونحقن بيانات حية، ونتعامل مع حدود الضغط التي تُضعف المهارات الطويلة.
إدارة الموارد الصريحة في TypeScript وNode.js 24: كيف نستخدم using وawait using وDisposableStack
يأتي تسرب الاتصالات غالبًا من مسار خطأ واحد تخطّى استدعاء release(). يشغّل Node.js 24 التعليمتين using وawait using بشكل أصلي، ويترجمهما TypeScript منذ الإصدار 5.2. نشرح هنا كيف يجعل فريقنا عملاء قواعد البيانات والمعاملات والمجلدات المؤقتة وتجهيزات الاختبارات قابلة للتحرير، ومتى نستخدم DisposableStack، والفخين اللذين يجب تجنبهما: SuppressedError والبث الذي يعيش بعد نطاقه.
بناء خادم MCP بعيد في Next.js باستخدام mcp-handler 2: الأدوات وOAuth ومواصفة 2026-07-28 عديمة الحالة
أصبحنا نبني خوادم MCP البعيدة كـ Route Handler واحد في Next.js باستخدام mcp-handler 2 ومواصفة MCP عديمة الحالة بإصدار 2026-07-28. نشرح هنا كيف نركّبها، وكيف نصمّم أدوات يستدعيها النموذج بشكل صحيح، وكيف نؤمّنها بـ OAuth وبيانات RFC 9728، وكيف نختبرها قبل اتصال أي عميل حقيقي.
sitemap.ts و robots.ts في Next.js 16: كيف نتحكم في زواحف Google وزواحف البحث بالذكاء الاصطناعي
كيف نولّد robots.txt و sitemap.xml عبر robots.ts و sitemap.ts في Next.js 16، وأي زواحف الذكاء الاصطناعي نسمح بها للبحث مقابل التدريب، وقاعدة مجموعات user-agent التي تُسقط أسطر Disallow بصمت، وكيف نضبط lastModified لتثق به الزواحف.
قراءة EXPLAIN ANALYZE في PostgreSQL: كيف نجد الفهرس الناقص وراء نقطة API بطيئة في Node.js
توقّفنا عن إضافة فهارس PostgreSQL بالتخمين. طريقتنا: نحدّد الاستعلام الأعلى تكلفة عبر pg_stat_statements، ونقرأ خطة EXPLAIN (ANALYZE, BUFFERS) بحثًا عن الصفوف التي تُقرأ ثم تُهمَل، ثم نضيف الفهرس المركّب أو الجزئي أو فهرس التغطية الذي تطلبه الخطة، ونبنيه باستخدام CREATE INDEX CONCURRENTLY.
اختبارات التكامل على PostgreSQL حقيقية باستخدام Testcontainers: حاوية واحدة لكل تشغيل وقاعدة بيانات لكل ملف اختبار
كانت المستودعات الوهمية (mocks) تُبقي الاختبارات ناجحة بينما كان SQL الحقيقي خاطئًا. نقلنا اختبارات التكامل في خدمات Node.js إلى PostgreSQL حقيقية عبر Testcontainers: حاوية واحدة لكل تشغيل لـ Vitest، وترحيلات تُطبَّق مرة واحدة على قاعدة بيانات قالب، وقاعدة بيانات مستنسخة لكل ملف اختبار، وإعدادات تُبقي التشغيل سريعًا، وطريقة تشغيل كل ذلك في GitHub Actions.
استعلامات N+1 في واجهات Node.js البرمجية: كيف نكتشفها ونجمّعها باستخدام DataLoader ونفرض ميزانية للاستعلامات — ملاحظات ميدانية
استعلام N+1 يختبئ أثناء التطوير المحلي ويضاعف عدد الرحلات إلى قاعدة البيانات في بيئة الإنتاج. نشارك كيف يكتشفه فريقنا بعدّ الاستعلامات لكل طلب وباستخدام pg_stat_statements، ومتى نختار JOIN أو استعلام IN مجمّعًا أو DataLoader، والاختبار في CI الذي يُبقي عدد الاستعلامات ثابتًا مهما زاد حجم الصفحة.
noUncheckedIndexedAccess وexactOptionalPropertyTypes: كيف نفعّل خيارات الصرامة الإضافية في TypeScript داخل قواعد شيفرة حقيقية
ما زال الخيار "strict": true يسمح لـ TypeScript بافتراض أن items[0] موجود دائمًا وأن الخاصية الاختيارية لا تحمل undefined صريحة أبدًا. نشرح ما يلتقطه noUncheckedIndexedAccess وexactOptionalPropertyTypes، وأنماط الإصلاح التي تغني عن الإفراط في تأكيدات عدم القيمة الفارغة، وآلية CI التي نعتمد بها الخيارين ملفًا تلو الآخر من دون طلب دمج ضخم واحد.
ابقَ على اطّلاع
اشترك في نشرتنا البريدية للحصول على أحدث الرؤى حول تصميم وتطوير المواقع والتسويق الرقمي.