يتم تثبيت حوالي 30 امتدادًا في المتصفح الذي يعمل على تبسيط الحياة والعمل على الإنترنت. في هذه المقالة ، أرغب في مشاركة 10 من إضافات Google Chrome ذات الصلة لنوع الحروف الذي أستخدمه باستمرار عند تطوير المواقع.
1. PerfectPixel
مثال على استخدام PerfetPixel عند تطوير كتل جديدة على www.wrike.com
يتسبب تخطيط موقع البكسل إلى بكسل في صعوبات للمبتدئين والمحترفين ذوي الخبرة. يتطابق PerfectPixel مع صورة التخطيط أعلى التخطيط في المستعرض. في إعدادات التوسيع ، يمكنك ضبط شفافية وتخطيط التخطيط ، مما يسمح لك بمراعاة جميع الأحجام والمسافات البادئة اللازمة. سيؤدي استخدام هذا المكون الإضافي إلى تبسيط التخطيط وتقليل عدد التعديلات عند تقديم المشروع. في مجموعة الإضافات الخاصة بي ، تحتل PerfectPixel المرتبة الأولى نظرًا لوظائفها وسهولة الاستخدام.
رابط لتثبيت التمديد
2. Wappalyzer
دراسة حالة Wappalyzer في cooperate.wrike.com/2019/london
من المثير للاهتمام دائمًا الأدوات والتقنيات المستخدمة في المواقع. يوفر Wappalyzer معلومات حول CMS ، وأطر JS ، ومكتبات CSS ، وأدوات التحليل وأكثر من ذلك بكثير. تخيل أن الرسوم المتحركة على الموقع هي مكتبة CSS مجانية يمكنك استخدامها في مشروعك. سيؤدي ذلك إلى تقليل وقت البحث عن الأداة اللازمة ويكون مدركًا للتقنيات التي يستخدمها الموقع.
رابط لتثبيت التمديد
3. HTML5 Outliner
التسلسل الهرمي للرأس في habr.com/en/company/wrike
يعرض HTML 5 Outliner قائمة بالرؤوس في صفحة الموقع. يساعد الملحق في تكوين العناوين وتحديد الانتهاكات في التسلسل الهرمي. على سبيل المثال ، في علامة المقطع ، يعرض HTML 5 Outliner تحذيرًا بشأن عدم وجود علامة h2 . هذه هي إحدى الطرق السريعة والمريحة لتحديد الاستخدام الصحيح للعناوين في التخطيط.
رابط لتثبيت التمديد
4. Wireframify
Wireframify دراسة الحالة في www.wrike.com
يصمم المصممون مواقع باستخدام إطار سلكي - مجموعة من الخطوط والكتل والتوقيعات. يتيح لك هذا الأسلوب إنشاء بنية مشروع استنادًا إلى المسافة البادئة وحجم وموقع الكتل على الصفحة. يشمل Wireframify نموذجًا بديلًا للموقع في شكل إطار سلكي ، مما سيساعد على تجنب الاستخدام الخاطئ:
- الهامش السلبي
- محاذاة العناصر باستخدام الحشو.
- المسافة البادئة باستخدام خصائص CSS اليسار واليمين.
رابط لتثبيت التمديد
5. PageLiner
PageLiner Case Study at www.wrike.com/apps
في محرر الرسومات ، يمكنك محاذاة العناصر أو عرض شبكة الموقع باستخدام خطوط الدليل. يمكن لآلة الكتابة هذه تمكين هذه الوظيفة في المستعرض باستخدام PageLiner . يعرض الملحق أدلة مماثلة ، كما في نفس Adobe Photoshop. باستخدام PageLiner ، تصبح محاذاة العناصر أسهل بكثير.
رابط لتثبيت التمديد
6. مطور ويب
قائمة ميزات مطور الويب
يضيف Web Developer شريط أدوات إضافي إلى المستعرض. يوجد بداخلها 10 علامات تبويب: تعطيل ، ملفات تعريف الارتباط ، CSS ، النماذج ، الصور ، المعلومات ، متنوعة ، مخطط تفصيلي ، تغيير الحجم والأدوات. تسمح لك وظيفة الامتداد بـ:
- تعطيل CSS و JS والصور ؛
- تحقق من صحة HTML ، CSS ؛
- معالجة أنماط CSS ؛
- اختبار أشكال HTML
- عرض العلامات الوصفية المعلومات اللازمة ؛
- تغيير حجم نافذة المتصفح
- مسح ذاكرة التخزين المؤقت.
يظل مطور الويب امتدادًا شائعًا بين المطورين. يمكن مقارنتها مع الأدوات المتعددة في الحياة الحقيقية: لديك دائمًا مجموعة الأدوات اللازمة في متناول اليد.
رابط لتثبيت التمديد
7. مستخدم CSS
مثال CSS للمستخدم على www.wrike.com/customers
تخيل أنك تريد إصلاح CSS مباشرة في المتصفح ، ولكن بعد ذلك اضطررت إلى إعادة تحميل الصفحة. اختفت جميع إنجازاتك ، وعليك إجراء تغييرات مرة أخرى. استخدم User CSS ، والذي سيوفر أنماطك. لا مزيد من القلق حول CSS تختفي. تتيح لك وظيفة الملحق اختبار CSS المكتوب عند الانتقال إلى صفحات أخرى.
رابط لتثبيت التمديد
8. ستايلورل
دراسة حالة عن StyleURL في Wrike www.wrike.com/customers
لن يحل مستخدم CSS محل لوحة مطور المتصفح. إذا كنت معتادًا على العمل في devtools ولا ترغب في الوقت نفسه في فقد التغييرات بعد تحديث المتصفح ، فقم بتثبيت StyleURL . سيتذكر الملحق تغييراتك ويوفر القدرة على حفظ العمل في ملف منفصل أو تحميله على github gist.
رابط لتثبيت التمديد
9. Siteimprove مدقق إمكانية الوصول
Siteimprove دراسة حالة مدقق إمكانية الوصول في www.wrike.com/newsroom
Siteimprove Accessibility Checker هي أداة تقوم بفحص HTML للتأكد من توافقها مع معايير إمكانية الوصول لتوفير الوصول إلى المحتوى للجميع. يعرض الملحق أخطاء بمعلومات مفصلة. في الوصف الخاص بهم ، يمكنك العثور على حواشي سفلية من WCAG 2 وروابط مباشرة لمقالات مفصلة حول إمكانية الوصول.
رابط لتثبيت التمديد
10. Tabsbook
مثال Tabsbook
كل واحد يعمل مع الإشارات المرجعية بطريقته الخاصة. هناك أولئك الذين يقومون بحفظ الروابط للوصول السريع إلى المواقع ، وأولئك الذين يستخدمون الإشارات المرجعية لتخزين المعلومات المفيدة. باستخدام Tabsbook ، يمكنك تحويل إشاراتك المرجعية إلى قاعدة معرفية. تعرض واجهة الامتداد بنية مجلد شبيهة بالشجرة لسهولة التنقل في إشاراتك المرجعية. يتم تخزين جميع البيانات في السحابة ، والتي تتيح لك الوصول إليها من أي جهاز.
رابط لتثبيت التمديد
ستكون الإضافات مفيدة لجميع المبتدئين والمهنيين ذوي الخبرة الذين لم يعرفوا عنها. اكتب التعليقات التي تستخدمها.
يمكن العثور على مزيد من إضافات المتصفح المفيدة في أفضل 10 روابط لمكونات Chrome الإضافية للمصممين وملحقات Google Chrome المفيدة للمبرمجين.