في قمة مطوّري Chrome لعام 2014، تمّت تغطية مجموعة كبيرة من المواضيع وواجهات برمجة التطبيقات الجديدة تمامًا، ولكن ليس كلّها متعلّقة بالميزات الجديدة والرائعة.
إذا كنت مطوّر ويب جديدًا أو حتى مطوّرًا متمرسًا على وشك البدء في استكشاف واجهات برمجة تطبيقات جديدة، من المرجّح أن تتّبع الخطوات الثلاث التالية: التعلّم والإنشاء والتكرار.
يتناول مات غونت الجهود المتواصلة التي يبذلها فريق Chrome Developer Platform لمعالجة هذه المشاكل.
التعلُّم
أساسيات الويب هي مجموعة من مستندات حالات الاستخدام التي تتناول مجموعة من المواضيع. والهدف الأساسي هو مساعدة المطوّرين على تنفيذ أفضل الممارسات في أسرع وقت ممكن، حتى لو لم يكن لديهم أي معرفة بها.
أحد الأهداف الرئيسية لـ "أساسيات الويب" هو التأكّد من أنّ الإرشادات تقلّل من "الشلل في الاختيار" قدر الإمكان إذا كنت مبتدئًا في أحد topics. يتناول أدي عثماني هذه المشكلة بوضوح في Pastry Box.
إذا لاحظت أي مشاكل في الموقع الإلكتروني أو محتواه أو أردت أن يتناول "أساسيات الويب" موضوعًا معيّنًا، يُرجى إعلامنا بذلك من خلال إرسال ملاحظات على GitHub.
إنشاء
لمساعدتك في بدء مشروع ويب جديد، أنشأنا مجموعة أدوات للمبتدئين على الويب. يتضمّن كل ما تحتاجه:
- عملية إنشاء قوية
- نموذج HTML
- دليل الأسلوب
عملية التصميم
إذا كنت لا تعرف الكثير عن عمليات الإنشاء، يمكنك اعتبار عملية الإنشاء على أنّها برنامج يأخذ مجموعة من الملفات وينفّذ عليها مهام معيّنة ويُخرج إصدارات جديدة في موقع مختلف. تعمل المهام على تحسين الملفات لتحسين أوقات التحميل، والبحث عن الأخطاء المحتملة أو التعامل مع المهام التي يمكن تشغيلها آليًا.
في Web Starter Kit، تتوفّر العمليات التالية:
نحن نُصغّر ملفات CSS وJavaScript ونجمّعها كي يتمكّن المتصفّح من جلب الملف بسرعة، ويتم أيضًا تشغيل JavaScript من خلال JSHint للتحقّق من أفضل الممارسات المتعلّقة بJavaScript و الأخطاء الشائعة في الترميز. يتم تصغير الصور باستخدام أداة imagemin، ويمكنك تحقيق تخفيضات كبيرة في حجم الملف باستخدام هذه الأداة. لدينا أيضًا عملية لإنشاء صفحات الأنماط المتتالية (CSS) الخاصة بأدلّة الأنماط.
النص الأساسي لصفحات HTML المتوافقة مع الأجهزة المتعددة
إنّ المجموعة الأولى من رمز HTML الذي تكتبه لصفحة جديدة هي نموذجية جدًا، ومن المرجّح أن تتوفّر لديك طريقة للحصول بسرعة على ملف HTML عادي يعمل بشكل جيد على أجهزة وشاشات متعددة.
في Web Starter Kit، أردنا إضافة ميزات تُزيل الحدود بين المنصة وموقعك الإلكتروني، لذلك أضفنا ميزة الإضافة إلى الشاشة الرئيسية وشاشات البداية لنظام التشغيل Android وWindows Phone وiOS وOpera Coast.
دليل الأسلوب
العنصر الأخير في Web Starter Kit هو دليل الأنماط.
يمنحك ذلك أي مشروع جديد مجموعة رائعة من الأنماط والمكوّنات التلقائية التي تشجّع على التطوير المستنِد إلى الأنماط. يمكنك تغيير الأنماط الحالية للعناصر وإضافة أنماطك الخاصة.
في الإصدار التالي من WSK، الذي من المقرر إطلاقه في أوائل العام المقبل، نعمل جاهدين لتبسيط كيفية ملاءمة دليل الأنماط معًا والتبديل إلى شكل تصميم المواد وأسلوبه. عرض ماتنموذجًا أوليًا لما قد يبدو عليه هذا الإجراء في Chrome Dev Summit، ويمكنك الاطّلاع على مثال أدناه.
التكرار
بعد بدء تطبيق معرفتك الجديدة، ستحتاج إلى استخدام DevTools لإزالة الأخطاء وتحسين عملك والحفاظ عليه.
تتوفّر بعض الميزات الجديدة الرائعة في DevTools، ويلقي "مات" نظرة على الميزات الجديدة التالية.
وضع الجهاز
"وضع الجهاز" هو قسم جديد في "أدوات مطوّري البرامج" يتيح لك الاطّلاع سريعًا على كيفية عمل موقعك الإلكتروني على مختلف الأجهزة الجوّالة، مع عرض طلبات فحص الوسائط في CSS.
من الميزات الرائعة في "وضع الجهاز" هي إمكانية الحد من سرعات الشبكة، ما يتيح لك محاكاة تجربة المستخدم على اتصال GPRS أو EDGE أو 3G أو DSL أو Wi-Fi.
محلِّل عرض محتوى الصفحة
إذا سبق لك فتح علامة تبويب المخطط الزمني والنقر على زر التسجيل، من المرجّح أنّه حدثت بعض أحداث الطلاء في المخطّط البياني. عادةً ما يكون ذلك صندوقًا أسودًا لا يمكنك من خلاله معرفة سبب تصرف المتصفّح أو ما كان يقوم به.
لا يمنحك أداة تحليل عمليات الرسم المزيد من المعلومات عن ما يفعله المتصفّح تحديدًا أثناء عملية الرسم هذه.
تتبُّع عمليات الإبطال
تقدّم "أدوات مطوّري البرامج" الآن سبب حدوث عملية رسم أو تنسيق كلما أمكن ذلك، ويُعدّ ذلك مفيدًا لأي شخص يتعرّف على المخطط الزمني وسلوكيات المتصفّح ويسمح لك بتحسين الرمز البرمجي لتجنّب مشاكل الأداء.
عرض الرسم البياني المفصّل لأداء الرموز
هذه طريقة مختلفة جدًا لعرض المعلومات المتاحة في الجدول الزمني. يسهّل ذلك الاطّلاع على كيفية تداخل المهام ومعرفة سلوك المتصفّح الذي حدث نتيجة المهام الأخرى.
أداة عرض الإطارات
في طريقة عرض "مخطّط الحرارة"، يمكنك اختيار إطار معيّن، وضمن ذلك، ستتمكّن من استكشاف العناصر في الصفحة التي تمت ترقيتها إلى طبقة مركبة بالإضافة إلى سبب ترقيتها.
التعلّم إنشاء. التكرار
في ما يلي بعض الجهود التي يبذلها فريق Chrome لمساعدة المطوّرين على اكتساب مزيد من المهارة في تطوير الويب، لذا احرص على الاطّلاع على أساسيات الويب ومجموعة أدوات البدء على الويب والميزات الجديدة في أدوات مطوّري البرامج في Chrome.