صورة كنان أبو عياش

حرفة تسليم الواجهات

كيف أصنع الواجهات وأسلّمها

تصف هذه الصفحة كيف أنقل عمل الواجهات من تسليم التصميم حتى التسليم — حرفة وتنفيذ وأداء وجاهزية متعددة اللغات — وليست كتالوج أنظمة أو Architecture. تظهر الأدوات ضمن الخطوات التي تدعم تلك الحرفة. الأجهزة ضمن «إعدادي» في نهاية الصفحة.

تسليم التصميم

التدفق:Figma → المتطلبات → حالات التجاوب

قراءة تصاميم Figma المعتمدة لدقة الواجهة وحالات التجاوب قبل بناء واجهة الإنتاج.

  • Figma

    يُستخدم لمراجعة التصاميم وفحص تفاصيل الواجهات وفهم تخطيطات وحالات التجاوب واستخراج القيم وتحويل الواجهات المعتمدة إلى كود.

التنفيذ

التدفق:المكوّنات → الصفحات → تكامل API

صناعة مكوّنات قابلة لإعادة الاستخدام وتحويلها إلى صفحات وربط واجهات مدعومة بـ API مع تنسيق واضح للمهام.

  • Cursor

    محرر الكود الأساسي المستخدم في التنفيذ وإعادة الهيكلة واستكشاف الكود والعمل على مستودعات Frontend بمساعدة الذكاء الاصطناعي.

  • Visual Studio Code

    محرر كود يُستخدم للتحرير العام والإضافات والعمل الخفيف على المشاريع.

  • Node.js

    يُستخدم لتشغيل أدوات Frontend ومديري الحزم وخوادم التطوير وعمليات Build ومنظومة Vue وNuxt.

  • ClickUp

    يُستخدم لمتابعة المهام المسندة والمواعيد والأولويات وتقدم المشاريع.

  • Toggl

    يُستخدم لتسجيل وقت العمل على المشاريع والمهام.

  • Slack

    يُستخدم للتواصل مع الفريق ومناقشات المشاريع ومتابعة التنفيذ.

  • WhatsApp

    يُستخدم للتواصل التشغيلي المباشر والتنسيق السريع عند الحاجة.

التحكم بالإصدارات

التدفق:Issue → فرع → Commits → Pull Request

إبقاء التغييرات قابلة للمراجعة والتتبع من الـ Issue حتى الدمج.

  • Git

    يُستخدم للفروع وCommits وسجل التغييرات وتنظيم العمل محليًا.

  • GitHub

    يُستخدم للمستودعات الخاصة وPull Requests وتتبع Issues وسجل الكود والتعاون.

مراجعة الجودة

التدفق:ESLint → TypeScript → CodeRabbit → مراجعة يدوية

اكتشاف مشكلات الاتساق والأنواع والمراجعة قبل فحوصات الأداء والتسليم.

  • ESLint

    يُستخدم للمحافظة على اتساق الكود واكتشاف المشكلات الشائعة.

  • TypeScript Checks

    تُستخدم لاكتشاف أخطاء الأنواع وتحسين موثوقية التنفيذ.

  • CodeRabbit

    يُستخدم بوصفه طبقة إضافية لمراجعة الكود داخل Pull Requests.

  • الاختبار اليدوي

    يُستخدم لمراجعة التجاوب ودقة التصميم والنماذج والتفاعلات والأجهزة والمتصفحات وأحجام الشاشات.

الأداء

التدفق:Lighthouse → PageSpeed → GTmetrix

قياس سلوك التحميل وتحديد فرص تحسين Frontend قبل التسليم.

  • Lighthouse

    يُستخدم لمراجعة الأداء والوصول وأفضل الممارسات وSEO.

  • Google PageSpeed Insights

    يُستخدم لتقييم سرعة التحميل واكتشاف فرص تحسين Frontend.

  • GTmetrix

    يُستخدم كمرجع إضافي لمراجعة التحميل والأداء.

التسليم

التدفق:التجاوب → المتصفحات → RTL/LTR → المراجعة النهائية

قبل التسليم أتحقق من سلوك التجاوب عبر نقاط الكسر، وأراجع المتصفحات الرئيسية، وأتأكد من تخطيطات العربية RTL والإنجليزية LTR، وأجري مراجعة نهائية للتفاعلات والصقل وجاهزية المحتوى. التسليم هنا معتمد على النص — دون تسجيلات دخول وهمية للأدوات أو أزرار تكامل مصطنعة.

الهندسة بمساعدة الذكاء الاصطناعي

التدفق:Cursor / Codex / Claude Code / CodeRabbit

استخدام وكلاء ومساعدي الترميز لتسريع العمل دون تجاوز التحقق البشري.

  • Cursor

    يُستخدم لدعم التنفيذ وإعادة الهيكلة واستكشاف المستودعات وتسريع حل المشكلات التقنية.

  • Codex

    وكيل ترميز بالذكاء الاصطناعي يُستخدم لدعم التنفيذ الواعي بالمستودع والمساعدة في البرمجة.

  • Claude Code

    وكيل ترميز بالذكاء الاصطناعي يُستخدم للمساعدة الواعية بالمستودع أثناء التنفيذ ومهام المراجعة.

  • CodeRabbit

    يُستخدم بوصفه طبقة إضافية لمراجعة الكود داخل Pull Requests.

  • ChatGPT

    مساعد ذكاء اصطناعي عام يُستخدم للصياغة ودعم البحث واستكشاف المشكلات.

تتم مراجعة مخرجات الذكاء الاصطناعي والتحقق منها قبل الدمج، ولا تُطبَّق تلقائيًا.

إعدادي

إعدادي

  • Lenovo Legion Pro 7

    جهاز التطوير الأساسي للبناء المحلي والمحررات والمتصفحات وأحمال عمل Frontend المتزامنة.

  • LG UltraGear 34″ 2K

    شاشة عريضة تُستخدم للبرمجة متعددة الألواح ومراجعة التصاميم والتوثيق ونوافذ التطبيقات المتوازية.

  • Ubuntu

    بيئة Linux المستخدمة لأدوات التطوير والأوامر وإدارة الحزم وسير عمل المشاريع.