أدوات تطوير الواجهة الأمامية

يمكن تقسيم تطوير الويب إلى جزأين - الواجهة الأمامية والخلفية. يجب أن تتضمن الواجهة الأمامية (جزء العميل) تخطيط HTML مع أنماط CSS وجافا سكريبت ، والنهاية الخلفية - جزء الخادم ، والذي تتم كتابته عادةً بلغة Python و PHP و Ruby وما إلى ذلك.

بكلمات أبسط ، ما يراه المستخدم النهائي في المتصفح ، أكثر ما يلفت انتباهه هو الواجهة الأمامية.

وما يخفي عن عيون الإنسان تحت الغطاء هو النهاية الخلفية.

كما لاحظت ، إذا كانت هناك قائمة طويلة من لغات البرمجة على جانب الخادم ، فلا توجد منافسة على جانب العميل في JavaScript.

غالبًا ما يتم تقسيم الواجهة الأمامية أيضًا إلى تصميم وتطوير. يهتم مصمم الواجهة الأمامية بإنشاء واجهات مستخدم ويعرف HTML و CSS جيدًا.

لديه أو لديها أيضًا أدوات جيدة لإنشاء المخططات ، ولديه إحساس بالجمال. يكره أحيانًا JavaScript ، ولكنه يستخدم بمهارة الوظائف الإضافية مثل jQuery.

يتمتع بشكل أساسي بتنفيذ حلول التصميم. يولي مطورو الواجهة الأمامية مزيدًا من الاهتمام لكتابة التعليمات البرمجية في JavaScript. الإطارات والخوارزميات ونماذج البرمجة وما إلى ذلك ليست شيئًا غير مفهوم له.

إذن ، ما هي الأدوات التي تسهل حياة مطور الواجهة الأمامية في عام 2021؟ دعونا نناقش هذا الموضوع الفعلي.

قد يبدو الأمر مثيرًا للسخرية ، ولكن في حين أن تطوير الواجهة الأمامية له فوائد معيارية للمكونات ، إلا أنه لا يزال أكثر تجانسًا من الخدمات الدقيقة الخلفية.

توفر الواجهة الأمامية الدقيقة القدرة على تقسيم بنية الواجهة الأمامية إلى أجزاء مختلفة لفرق متعددة.

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

النظام البيئي الحديث لا يزال لديه بعض العيوب. المشكلات الأكثر شيوعًا التي يتم مواجهتها هي نشر واجهات أمامية منفصلة ، والربط ، والاختلافات في البيئات ، وما إلى ذلك.

باستخدام Bit ، يمكنك عزل الواجهات / المكونات الفردية وإصدارها وتطويرها واختبارها وتحديثها.

حاليًا ، تُستخدم هذه الإمكانات عند العمل مع تطبيقات متعددة (وكذلك لإعادة البناء التدريجي لأجزاء من التطبيقات الحالية من خلال المكونات).

التصميم الذري هو فلسفة أكثر منه منهجية بحتة.

تقارن النظرية ، التي قدمها المطور براد فروست ، تكوين تطبيقات الويب بالتركيب الطبيعي للذرات والجزيئات والكائنات الحية وما إلى ذلك.

تشكل الذرات جزيئات (مثل إدخال النص + زر + ذرة التسمية = جزيء البحث). تشكل الجزيئات الجسم. تعيش الكائنات الحية في قالب طبقة ، يمكن تجسيده في صفحة مقدمة للمستخدمين.

تتجاوز فوائد المكونات الذرية إنشاء تطبيقات معيارية لواجهة المستخدم بمكونات معيارية وقابلة لإعادة الاستخدام.

يجبرك هذا النموذج على التفكير في التكوين لفهم دور كل مكون وواجهة برمجة التطبيقات (API) بشكل أفضل ، وتسلسله الهرمي ، وكيفية تجريد عملية إنشاء تطبيق بشكل فعال.

في رأيي ، المستقبل لهم.

لماذا ا؟ نظرًا لأن مكونات الويب الخالصة هذه مستقلة عن إطار العمل ، فيمكنها العمل بدون استخدامها أو بدون توحيد.

فهي خالية من JS وتدعمها المتصفحات الحديثة. حجم الحزمة والاستهلاك مثاليان وتقديم DOM مذهل.

توفر هذه المكونات عنصرًا مخصصًا وواجهة برمجة تطبيقات JavaScript لتحديد نوع جديد من علامات HTML وقوالب HTML لتعريف الطبقات وظل DOM الذي يأتي مع المكونات.

تشمل الأدوات البارزة في هذا الإطار Lit-HTML (وعنصر Lit) و StencilJS و SvelteJS و Bit.

لقد ولّد ظهور التطوير المستند إلى المكونات العديد من الأدوات. واحدة من أشهرها هي Bit ومنصة استضافة Bit.dev الخاصة بها.

باستخدام Bit ، يمكنك عزل المكونات الموجودة وتصديرها إلى مجموعة مشتركة ديناميكية قابلة لإعادة الاستخدام.

على منصة bit.dev (أو على الخادم) ، يمكن تنظيم المكونات عن بُعد لفرق متعددة بحيث يتحكم كل فريق في تطوير مكوناته الخاصة.

يوفر النظام الأساسي أيضًا نظامًا بيئيًا مدمجًا للمكونات الشائعة: فهو يقوم تلقائيًا بتوثيق مكونات واجهة المستخدم ، وعرضها على منصة تفاعلية ، وحتى يوفر سجلًا مضمنًا لتثبيتها باستخدام npm / yarn.

بدلاً من ذلك ، يمكنك استخدام Bit import لاستيراد المكونات وإجراء تغييرات على أي مستودع.

على المدى القصير ، سيحدث هذا النهج ثورة في مشاركة المكونات ، وسيساعد على المدى الطويل على تمهيد الطريق للجبهات الصغيرة.

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

بينما تصبح التحديات المرتبطة بإدارة الحالة العالمية في تطبيق ما أكثر وضوحًا مع زيادة نمطية الواجهة ، أصبح Redux منقذًا للعديد من الفرق.

هل نقول وداعا ل Redux في عام 2021؟ يبدو وكأنه لا؟

ومع ذلك ، فإن ظهور ميزات جديدة في الأطر التي تتعامل مع الحالة (React hooks ، Context-API ، إلخ) يمهد الطريق لمستقبل بدون تخزين عالمي.

أصبحت أدوات مثل Mobx أكثر شيوعًا كل يوم بسبب طبيعتها الموجهة نحو المكونات والقابلة للتطوير.

وحدات ES هي معيار ECMAScript للعمل مع الوحدات في المتصفح. يمكن استخدامها لتغليف الوظائف بسهولة في وحدات مستخدمة عبر شبكات CDN ، إلخ.

مع إصدار Firefox 60 ، ستدعم جميع المتصفحات الرئيسية وحدات ES ، ويعمل فريق Node بالفعل على إضافة دعم لها في Node.js.

بالإضافة إلى ذلك ، سيتم دمجهم في WebAssembly في السنوات القليلة القادمة.

تعد الرموز المتحركة لـ CSS تقنية مهمة لتحسين أوقات التحميل ، حيث تجمع بين العديد من الرسومات الصغيرة في ملف رسومات واحد كبير.

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

هذا يبدو معقدًا ويتطلب الكثير من الضبط الدقيق. سيكون بدون الأدوات المفيدة التالية:

تحسين موقع الويب: إذا كنت ترغب في تجهيز موقع ويب موجود بنقوش CSS (التي أوصي بها الجميع) ، يمكن أن تساعدك أداة SpriteMe.

ما عليك سوى الانتقال إلى spriteme.org واسحب الرابط المعروض هناك إلى شريط الإشارات المرجعية في متصفحك. يمكنك الآن استدعاء الأداة بالنقر فوق الارتباط.

ثم يقوم بتحليل موقع الويب المفتوح حاليًا ويقترح مجموعة رموز يمكن تنزيلها مباشرةً كرسومات نهائية.

يقوم SpriteMe أيضًا بإنشاء كود CSS المناسب ، والذي عليك فقط تضمينه في موقع الويب الخاص بك مع الرسم.

رسومات Sprite من رسومات فردية: من أجل إنشاء رسم Sprite + CSS تلقائيًا من رسومات فردية ، يمكنك ببساطة تحميل رسوماتك بتنسيق ZIP معبأة إلى CSS Sprite Generator. الأداة تفعل الباقي.

إنشاء CSS من Sprite Graphics: إذا كنت قد قمت بالفعل بعمل رسم Sprite بنفسك وتريد الآن رمز CSS المناسب لمعالجة الرسومات الفردية ، فيمكنك استخدام Sprite Cow.

هناك تقوم بتحميل الرسم ، وتحديد العناصر الفردية ويتم عرض كود CSS على الفور.

أصبح نصف قطر حدود خاصية CSS أكثر شيوعًا ويوفر على العديد من مطوري الواجهة الأمامية دفع وحدات البكسل.

يمكن إنشاء أزرار دائرية ومربعات ودوائر وأشكال أخرى باستخدام HTML + CSS خالص. لولا هذه البنية الطويلة جدًا:

-webkit-border-top-left-radius: 10px ؛
-webkit-border-bottom-right-radius: 10px ؛
-موز-الحدود-نصف قطر-يسار: 10 بكسل ؛
-موز-الحدود-نصف قطر-أسفل اليمين: 10 بكسل ؛
-الحدود العلوية اليسرى نصف القطر: 10 بكسل ؛
- الحد - أسفل - نصف القطر الأيمن: 10 بكسل ؛

... لزاويتين دائريتين ؟! حسنًا ، أربعة من الأسطر الستة تأتي من البادئات الخاصة بالمتصفح (بادئات البائع) ، والتي نأمل ألا تكون موجودة في وقت ما.

ومع ذلك ، يجب ذكر الموقع الصغير المفيد border-radius.com (يسهل تذكره!) في هذه المرحلة.

هناك تقوم ببساطة بإدخال قيمة نصف قطر الحدود المطلوبة في كل ركن من أركان المستطيل ، وتحصل على معاينة ويظهر رمز CSS المرتبط في المنتصف.

نصيحة: إذا كنت تريد حظر بادئات البائع تمامًا ، فيمكنك تجربة إحدى الأداتين التاليتين: CSS Prefixer (وحدة التحكم ، Python) ، Prefix free (JavaScript)

من لا يعرف ذلك؟ لديك فكرة عفوية أو أجزاء من كود CSS / JS ترغب في تجربتها.

مجرد القليل من التجربة والخطأ. تقدم الصفحة jsFiddle الخيار الأسهل والأسرع. لديك أربعة نوافذ في وضع ملء الشاشة: "HTML" و "CSS" و "JavaScript" و "النتيجة".

أدخل الكود ، ربما حدد إطار عمل JavaScript ، اضغط على "تشغيل" ، تم!

يتم عرض النتيجة مباشرة في نافذة "النتيجة" وبالطبع يمكنك التفاعل معها.

لكن jsFiddle تقدم أيضًا العديد من الخيارات والوظائف مثل حفظ "fiddles" في الحساب ، ومسح الكود ، ودمج "fiddles" في مواقع الويب الأخرى ، وما إلى ذلك.

بالإضافة إلى ذلك ، لا تزال الخدمة في مرحلة ألفا ، لذلك يمكننا أن نتطلع إلى المزيد من الميزات والتحسينات.

إذا قمت بوضع قدر كبير من القيمة على التوافق عبر المستعرضات وقمت بتحديد الإعدادات الافتراضية المختلفة (حجم الشاشة ، عمق اللون ، JavaScript ، Java ، Flash).

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

إذا كنت تريد إلقاء نظرة فاحصة على موقع الويب الخاص بك في المشكلة الفرعية "Internet Explorer" ، فيمكنك القيام بذلك باستخدام برنامج IETester المفيد.

أنت بحاجة إلى جهاز كمبيوتر يعمل بنظام Win XP أو أعلى ، ويمكنك اختبار جميع إصدارات IE تقريبًا (معاينة IE10 و IE9 و IE8 و IE7 و IE 6 و IE5.5) في برنامج واحد وحتى بالتوازي.

الأمر برمته عملي جدًا ، خاصةً لأن هناك خيارات أخرى مفيدة مثل "إعادة التحميل بإفراغ ذاكرة التخزين المؤقت" هناك.

نصيحة: إذا كان لديك IE8 أو أعلى مثبتًا ، فيمكنك التبديل إلى محرك IE7 باستخدام أدوات المطور (اضغط F12) عن طريق تحديده ضمن "وضع المستند".

أنا شخصياً أعتقد أن خطوط الويب رائعة وهي أيضًا مهمة للغاية إذا كنت ترغب في إنشاء موقع ويب معقول ومعاصر.

قريباً سيكون من الصعب تخيل الحياة بدونهم.

لذلك ، يرجى الرجوع إلى الموقع الرائع Fontquirrel.com ، والذي يقدم الآن أكثر من 700 خط متاح مجانًا.

يمكن تنزيل معظم الخطوط كمجموعة @ font-face ، والتي تتضمن الخط بتنسيقات مختلفة ، وملف CSS المناسب وعرض توضيحي.

بهذه الطريقة ، يمكنك الحصول على الخط الذي تريده على موقع الويب الخاص بك في بضع دقائق فقط.

توفر التنسيقات المرفقة التوافق مع المتصفحات التالية: Firefox 3.5+ و Opera 10+ و Safari 3.1+ و Chrome 4.0.249.4+ و Internet Explorer 4+ و iPad و iPhone.

نصيحة: هناك أيضًا وحدة Drupal رائعة يمكن من خلالها دمج Font Squirrel وموفري خطوط الويب الآخرين بسهولة بالغة في موقع ويب Drupal: @ font-your-face module.

"لا ، أفضل قليلاً أخف. أو أفضل مثل هذا اللون هناك ... "

بينما يحول عالم الكمبيوتر قيم RGB إلى مساحة ألوان HSV في مثل هذه المواقف ، ويزيد السطوع ويعيد حسابه إلى التمثيل السداسي عشري RGB ، يعتقد مطور الواجهة الأمامية:

"لا تقلق. انظر إلى امتداد المتصفح. "أستخدم امتداد Firefox ColorZilla لفترة طويلة ، وهو متوفر الآن أيضًا لمتصفح Chrome.

الوظيفة الرئيسية للامتداد هي منتقي الألوان الذي يمكنك من خلاله العثور على اللون في أي مكان على موقع الويب.

بالمناسبة ، يعمل هذا أيضًا مع الصور ، لذلك لا يتم تقييم خصائص CSS ببساطة. ثم يتم نسخ القيمة على سبيل المثال مباشرة إلى الحافظة كقيمة سداسية عشرية (يمكن تحديد التنسيق).

عملي للغاية! هناك أيضًا منتقي ألوان كما تعرفه من Photoshop and Co ، سجل للألوان المحددة وأكثر من ذلك بكثير.

نصيحة: إذا كنت تبحث عن اللون التكميلي المطابق أو مجموعات الألوان المتناغمة الأخرى للون ، فتأكد من إلقاء نظرة هنا: colorchemedesigner dot com

أخيرًا وليس آخرًا ، الأداة التي أستخدمها غالبًا: Chrome. F12. ادوات المطورين.

لا أريد الخوض في مزيد من التفاصيل حول الوظائف الفردية هنا. أعتقد أن أي شخص يستخدمه سيقدره.

إذا لم تقم بذلك ، فعليك بالتأكيد تجربته. فحص HTML ، والتحرير المباشر لـ CSS + HTML ، ووحدة تحكم تصحيح أخطاء JavaScript ، وتحليل وقت التحميل ، و.

إنه ببساطة عملي للغاية ويتم تنفيذه جيدًا.

علاوة على ذلك ، يمكنك إلقاء نظرة على مكونات WordPress الإضافية وملحقات Chrome.