Scout-app: دعم المصفف الآلي

مطلوب أيضًا بواسطة blindmikey (https://github.com/scout-app/scout-app/issues/276).

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

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

لم أر حتى الآن حالة استخدام لـ Autoprefixer لا يمكن إصلاحها بمجرد تنظيف قاعدة كود موجودة. يبدو وكأنه ضمادة.

بمجرد إضافة سنتي ، يسمح Autoprefixer لفريقي بكتابة css دون الحاجة إلى التفكير في إصدارات المستعرض التي تدعم أو لا تدعم بادئات البائعين ، ودون استخدام المزيجات الزائدة لتغطية كل بادئة بدلاً من مجرد كتابة css.

يعد Autoprefixer نعمة كبيرة لسير العمل لدينا ، والعديد من أطر عمل scss تستخدمه الآن افتراضيًا مثل التمهيد والأساس.

تضمين التغريدة

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

في فرعك الحالي إذا قمت بمعالجة هذا الملف:

.test
    transition: 1s ease all
    -webkit-border-radius: 3px
    background: #1E5799
    background: -moz-linear-gradient(top, #1E5799 0%, #2989D8 50%, #207CCA 51%, #7DB9E8 100%)
    background: -webkit-linear-gradient(top, #1E5799 0%, #2989D8 50%, #207CCA 51%, #7DB9E8 100%)
    background: linear-gradient(to bottom, #1E5799 0%, #2989D8 50%, #207CCA 51%, #7DB9E8 100%)
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1E5799', endColorstr='#7DB9E8', GradientType=0)

سوف ينتج هذا:

.test {
  -webkit-transition: 1s ease all;
  transition: 1s ease all;
  -webkit-border-radius: 3px;
  background: #1E5799;
  background: -webkit-linear-gradient(top, #1E5799 0%, #2989D8 50%, #207CCA 51%, #7DB9E8 100%);
  background: linear-gradient(to bottom, #1E5799 0%, #2989D8 50%, #207CCA 51%, #7DB9E8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1E5799', endColorstr='#7DB9E8', GradientType=0);
}
rstr='#1E5799', endColorstr='#7DB9E8', GradientType=0);
}

هناك العديد من المشاكل هنا:

1. الإخراج ليس CSS صالحًا.
2. سيتم الخلط بين مستخدم جديد أو شخص ما يتعلم Sass فقط بسبب قيام Scout-App بإضافة خصائص جديدة لا يريدها وإزالة الخصائص التي يريدها. لا ينبغي أن يتظاهر Scout-App بأنه نظام آلي يعرف أفضل من المستخدم النهائي.
3. لا يوجد خيار في واجهة المستخدم لتمكين / تعطيل Autoprefixer. هذا من شأنه أن يحل المسألتين أعلاه.
4. يبدو أن الأخطاء من Autoprefixer لا تظهر حاليًا. من الناحية المثالية ، سنقوم بتمريرها إلى شيء مشابه لـ scout.helpers.alert . لذلك قد تكون هناك رسائل في التطبيق وإشعارات سطح المكتب ومؤثرات صوتية يتم تشغيلها عند حدوث خطأ.

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

يتمثل أحد الحلول الممكنة في وجود علامة تبويب في لوحة إعدادات المشروع للتبديل من عرض إعدادات Sass إلى عرض Autoprefixer. يمكنك مشاهدة مثال على ذلك هنا:

• https://github.com/scout-app/scout-app/issues/316

ومع ذلك ، فإن التبديل بين وجهات النظر المبوبة هو خارج نطاق هذه المسألة. في الوقت الحالي ، سيكون مجرد وضع <hr /> في نهاية إعدادات Sass الحالية ثم وضع عناصر التحكم في واجهة المستخدم هناك أمرًا جيدًا حتى يكون لدينا نظام أفضل لتبديل طرق عرض علامات التبويب. في النهاية يمكن إعادة تشكيل هذا كمكوِّن إضافي إذا قمنا بتطبيق نظام مكون إضافي.

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

مرحبًا TheJaredWilcurt ،

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

أوافق على أن يكون الخيار اختياريًا هو الأفضل ، حتى لو تخلف عن السداد حتى لا يؤثر على المشاريع الحالية. أعتقد أن مربع اختيار بسيط سيكون كافياً. إذا كنا نتطلع إلى منح المزيد من التحكم الدقيق في بادئات المصفف التلقائي للمتصفحات ، فيمكننا توفير إدخال نصي يمنح المستخدم القدرة على إضافة وسيطة قائمة مستعرضات autoprefixer ، كما يفعل موقع الويب autoprefixer: https://autoprefixer.github.io/

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

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

تضمين التغريدة

يجب أن يكون هناك حقل إدخال حيث يمكنك استعراض ملف browserslist الخاص بك. يمكننا إجراء فحص سريع لمعرفة ما إذا كان موجودًا بالفعل وتعبئة حقل الإدخال مسبقًا.

إذا تعذر العثور على أحد ، فيمكن للمستخدم إما الإشارة إليه يدويًا ، أو النقر فوق الزر "إنشاء ملف قائمة المستعرض". سيؤدي هذا الزر إلى إنشاء الملف في جذر مجلد المشروع.

بعد العثور على ملف browserslist أو إنشائه ، نحتاج إلى عرض بعض واجهة المستخدم لتحرير الإعدادات.

الخيار 1 - الطريق السهل

سيتم عرض A textarea . سنقرأ محتويات الملف ونضعها في textarea . سيكون هناك زر حفظ أسفل textarea . سيؤدي النقر فوقه إلى حفظ محتويات textarea في الملف browserslist .

الخيار 2 - الطريق الصعب

لقد قمت بعمل نموذج بالحجم الطبيعي سريعًا لواجهة مستخدم محتملة

قد يتطلب ذلك قراءة في الملف وتحليل كل قاعدة وبناء عنصر تحكم في واجهة المستخدم حولها. ثم عند حفظ إعادة إنشاء القواعد ، قم بتخزينها في ملف. ليس صعبًا للغاية ، إنه مجهود أكثر من الطريق السهل. سيظل بإمكان المستخدمين لصق التعليمات البرمجية الخاصة بهم مباشرة في الملف ، خارج Scout-App.

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

تضمين التغريدة

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

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

إن سير العمل الذي أتخيله هو شيء قريب من سير العمل الحالي لتطبيق scout ، حيث يقوم المستخدم بإنشاء مشروع ، ويشير إلى إدخال scss / sass وإخراج css ، ولكن بعد ذلك يختار اختياريًا المصفف التلقائي وإذا رغب في إنشاء ملف تكوين في جذر المشروع لإضافة التكوين المتقدم.

أفكار؟

لقد فكرت فيه أكثر ، وليس من المنطقي حقًا إعطاء واجهة مستخدم أكثر قوة لهذا الغرض. إليك مفهوم منقح:

رمز علامة الاستفهام بعد النص سيربطك بوثائق قائمة المستعرض ويفتح في المتصفح الافتراضي للمستخدم.

Blindmikey ما هي أفكارك حول هذا التصميم.

تضمين التغريدة قد أقترح وجود رمز علامة الاستفهام هذا بعد "قائمة المستعرضات" حتى في حالة عدم العثور على واحدة. ربما بعض اللغات غير مطلوبة وما هو المصفف التلقائي الذي يتم تعيينه افتراضيًا في حالة عدم وجوده.

تضمين التغريدة

أعتقد أن الملف يجب أن يكون مطلوبًا ، وأن يوضع داخل مشروعهم في مكان ما (ويفضل في الجذر). لذلك فهو يوضح بوضوح الإصدارات التي يتم استخدامها. مما يمكنني رؤيته ، القيم الافتراضية هي >1%, last 2 versions, Firefox ESR .

لذلك إذا قمت بالنقر فوق الزر "تحميل الإعدادات الافتراضية" ، فسيتم استبدال محتوى منطقة النص بتلك الإعدادات الافتراضية ( >1%, last 2 versions, Firefox ESR ). لكنها لا تصبح نافذة المفعول حتى تنقر على "حفظ". إذا قمت بالنقر فوق "إعادة تعيين" ، فسيتم استبدال محتويات textarea بكل ما هو موجود في الملف حاليًا.

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

تضمين التغريدة

في أكتوبر ، عملت على Koa11y وتم شحن الإصدار 3 منه.

في تشرين الثاني (نوفمبر) ، سأعمل على node-flif وسيتم شحن الإصدار 1 منه.

في ديسمبر ، سأعمل على Scout-App وسيتم شحن الإصدار 2.xx. لست متأكدًا من عدد الميزات الجديدة التي سأتمكن من وضعها فيها. هذا على رأس القائمة ، لكنه يعتمد على مدى جنون الحياة (سأبدأ وظيفة جديدة في ديسمبر ، بالإضافة إلى أشياء عادية للعطلات). على الأقل ، سيتم اختبار / بناء / إصدار الفرع الرئيسي الحالي لجميع الأنظمة الأساسية. لكن قد أتمكن من التسلل إلى بعض الميزات الإضافية قبل شهر يناير ، بما في ذلك (ربما) هذه الميزة. لا وعود بأى شئ.