در اجلاس Chrome Dev Summit 2014 تعداد زیادی از موضوعات و APIهای جدید با نام تجاری پوشش داده شد، اما همه چیز در مورد جدید و درخشان نیست.
اگر یک توسعه‌دهنده وب جدید یا حتی یک توسعه‌دهنده با تجربه هستید که می‌خواهید APIهای جدید را کاوش کنید، به احتمال زیاد این سه مرحله را دنبال خواهید کرد: یادگیری، ساخت و تکرار.
Matt Gaunt تلاش‌های مداوم تیم پلتفرم توسعه‌دهنده Chrome برای رفع این مشکلات را پوشش می‌دهد.
فرا گرفتن
Web Fundamentals مجموعه ای از مستندات مورد استفاده است که طیف وسیعی از موضوعات را پوشش می دهد. هدف اصلی این است که توسعه دهندگان را از دانش اندک یا بدون دانش به اجرای بهترین شیوه ها در سریع ترین زمان ممکن برسانیم.
یکی از اهداف اصلی Web Fundamentals این است که اطمینان حاصل شود که اگر در یک موضوع تازه کار هستید، این راهنمایی تا حد ممکن "فلج انتخاب" را کاهش می دهد. آدی عثمانی در Pastry Box این موضوع را کاملاً پوشش می دهد.
اگر مشکلی در مورد سایت یا محتوای آن مشاهده کردید یا مایلید که Web Fundamentals موضوع خاصی را پوشش دهد، لطفاً با ارسال بازخورد در GitHub به ما اطلاع دهید.
ساختن
برای کمک به شما در راه اندازی یک پروژه وب جدید ، کیت شروع وب را ایجاد کردیم. همه چیز مورد نیاز شما را دارد:
- یک فرآیند ساخت جامد
- Boilerplate HTML
- راهنمای سبک
فرآیند ساخت
برای کسانی از شما که در ساخت فرآیندها تازه کار هستند، ساده ترین راه برای فکر کردن به فرآیند ساخت این است که آن را به عنوان برنامه ای مشاهده کنید که مجموعه ای از فایل ها را می گیرد و وظایف خاصی را بر روی آنها انجام می دهد و نسخه های جدید را در مکان دیگری خروجی می دهد. وظایف، فایل‌ها را برای بهبود زمان بارگذاری، بررسی خطاهای احتمالی یا انجام کارهایی که می‌توانند خودکار شوند، بهینه می‌کنند.
در Web Starter Kit ما فرآیندهای زیر را داریم:
ما CSS و جاوا اسکریپت را کوچک می کنیم و به هم متصل می کنیم تا مرورگر بتواند فایل را به سرعت واکشی کند، جاوا اسکریپت نیز از طریق JSHint اجرا می شود تا بهترین شیوه های جاوا اسکریپت و اشتباهات رایج کدنویسی را بررسی کند. تصاویر با imagemin کوچک می شوند و با استفاده از آن می توانید حجم فایل را کاهش دهید. ما همچنین فرآیندی برای ایجاد راهنماهای سبک CSS داریم.
Boilerplate برای HTML چند دستگاهی
اولین مجموعه ای از HTML که برای یک صفحه جدید می نویسید، استاندارد بسیار باتلاقی است و به احتمال زیاد راهی برای نگهداری سریع یک فایل HTML موجودی خواهید داشت که در چندین دستگاه و اندازه صفحه نمایش به خوبی کار می کند.
در Web Starter Kit ما می‌خواستیم برای هر ویژگی که خطوط بین پلتفرم و سایت شما را محو می‌کند، پشتیبانی اضافه کنیم، بنابراین ما پشتیبانی برای افزودن به صفحه اصلی و صفحه نمایش اسپلش را برای Android، Windows Phone، iOS و Opera Coast اضافه کرده‌ایم.
راهنمای سبک
آخرین قطعه Web Starter Kit، Styleguide است.
این به هر پروژه جدید مجموعه ای عالی از سبک ها و مؤلفه های پیش فرض می دهد که توسعه مبتنی بر سبک را تشویق می کند. شما می توانید سبک های موجود را به عناصر تغییر دهید و سبک خود را اضافه کنید.
در نسخه بعدی WSK که قرار است در اوایل سال آینده منتشر شود، ما سخت کار می کنیم تا نحوه هماهنگی راهنمای سبک را با هم ساده کنیم و به ظاهر و احساس طراحی متریال تغییر دهیم. Matt در کروم Dev Summit یک نمونه اولیه از آنچه ممکن است به نظر برسد را نشان داد و می‌توانید نمونه‌ای را در زیر ببینید.
تکرار کنید
هنگامی که شروع به پیاده سازی دانش جدید خود کردید، می خواهید از DevTools برای اشکال زدایی، بهبود و حفظ کار خود استفاده کنید.
چند ویژگی جدید بزرگ در DevTools وجود دارد و مت نگاهی به ویژگی‌های جدید زیر می‌اندازد.
حالت دستگاه
Device mode بخش جدیدی در DevTools است که به شما امکان می دهد به سرعت نحوه عملکرد سایت خود را در دستگاه های تلفن همراه مختلف مشاهده کنید، در حالی که درخواست های رسانه را در CSS خود مشاهده می کنید.
یکی از ویژگی‌های عالی Device Mode توانایی کاهش سرعت شبکه است که به شما امکان می‌دهد تجربه کاربر را در اتصال GPRS، EDGE، 3G، DSL یا Wifi شبیه‌سازی کنید.
پروفیل رنگ
اگر تا به حال تب تایم لاین را باز کرده اید و دکمه ضبط را فشار داده اید، احتمالاً شاهد اتفاقات رنگ آمیزی در آبشار بوده اید. به طور معمول، این یک جعبه سیاه است که هیچ راهی برای شما وجود ندارد که بدانید چرا مرورگر انجام داده است، یا چه کاری انجام می دهد.
Paint profiler no اطلاعات بیشتری در مورد آنچه که مرورگر در طول آن رنگ انجام می دهد به شما می دهد.
ردیابی بی اعتباری
DevTools اکنون دلیلی را ارائه می دهد که چرا رنگ یا طرح بندی هر زمان که می تواند رخ داده است، این برای هر کسی مفید است که در مورد جدول زمانی، رفتارهای مرورگر یاد می گیرد و به شما امکان می دهد کد خود را برای جلوگیری از مشکلات عملکرد بهینه کنید.
نمای نمودار شعله
این یک روش بسیار متفاوت برای مشاهده اطلاعات موجود در جدول زمانی است. این کار باعث می‌شود که ببینید چگونه کارها با هم تداخل دارند و چه رفتار مرورگر در نتیجه کارهای دیگر رخ داده است.
نمایشگر قاب
در حالی که در نمای Flame Chart، می‌توانید یک فریم خاص را انتخاب کنید و در آن، می‌توانید بررسی کنید که کدام عناصر در صفحه به یک لایه ترکیبی ارتقا یافته‌اند و همچنین دلیل ارتقای آنها را نیز بررسی کنید.
فرا گرفتن. ساختن. تکرار کنید
اینها برخی از تلاش‌های تیم Chrome برای کمک به توسعه‌دهندگان برای سرعت بخشیدن به توسعه وب است، بنابراین حتماً Web Fundamentals ، Web Starter Kit و ویژگی‌های جدید در Chrome DevTools را بررسی کنید.