به دومین نسخه از Chrome Dev Insider خوش آمدید، جایی که ما بهروزرسانیهایی در مورد چیزهای جدید و هیجانانگیز در جامعه و اینجا در Chrome به اشتراک میگذاریم. این یک قسمت جدید از داستانهای شخصی در مورد نحوه رویکرد ما به کارمان و نگاهی سریع به برخی از مهمترین بهروزرسانیهایی است که باید به آنها توجه کنید.
من ریچل اندرو، سرپرست محتوای web.dev و developer.chrome.com ، به عنوان عضوی از تیم روابط توسعهدهندگان کروم هستم. من بیش از بیست سال است که در حوزه وب، با تمرکز بر استانداردهای وب باز و CSS، کار میکنم و عضوی از گروه کاری CSS هستم.
دو ماه پیش، ما کنفرانس Google I/O را به پایان رساندیم و در آن برخی از مهمترین بهروزرسانیها در مورد چگونگی پشتیبانی از توسعهدهندگان برای سریعتر و قدرتمندتر کردن وب، ضمن حفظ امنیت و حریم خصوصی اطلاعات کاربران را به اشتراک گذاشتیم .
یکی از مواردی که برجسته بود (و ما خوشحالیم که جامعه به آن توجه کرد !) حجم عظیم کار تیم برای پشتیبانی از ویژگیهای بیشتر CSS و UI در وب است. در این نسخه از Chrome Dev Insider، شما را به پشت صحنه خواهیم برد تا ببینید چه کسی پشت این کار است، چگونه برای پشتیبانی از توسعهدهندگان CSS و UI تلاش میکنیم و چه چیزی در پیش است. به همین دلیل است که من از میزبانی این نسخه از Insider بسیار هیجانزدهام.
در اخبار
در اولین Chrome Dev Insider ، ما بهروزرسانیهایی در مورد طرحهای Compat 2021 و Interop 2022 به اشتراک گذاشتیم که در آن فروشندگان مرورگر و بازیگران اکوسیستم برای ارائه ویژگیهای بیشتر به وب که در همه مرورگرها پشتیبانی میشوند، با هم همکاری کردهاند. این طرح تمرکز زیادی بر CSS دارد زیرا ناسازگاری مرورگر یکی از بزرگترین چالشها برای توسعهدهندگان CSS است .
اگرچه این ممکن است برای اکثر افراد جدید نباشد، اما دیدن پیشرفتی که قبلاً در مرورگرها داشتهایم هیجانانگیز است.
اوایل ماه گذشته، شاهد انتشار یک نسخه آزمایشی از Safari 16.0 بودیم که شامل ویژگیهای هیجانانگیزی مانند Container Queries ، subgrid و flexbox inspector بود. نسخههای اخیر Firefox و Chrome شامل تعدادی ویژگی و اصلاحیه هیجانانگیز بودهاند - من هر ماه در سری پستهای جدیدم در مورد پلتفرم وب ، نکات کلیدی در مرورگرهای پایدار و بتا را پوشش میدهم.
گزارش ویژه: حمایت از توسعهدهندگان CSS و رابط کاربری
با توجه به اینکه سال ۲۰۲۲ سال هیجانانگیزی برای ویژگیهای CSS بود، فکر کردیم زمان مناسبی است که شما را به پشت صحنه ببریم. من با اونا کراوتس، سرپرست رابط کاربری وب و ابزارهای توسعه DevRel و نیکول سالیوان ، مدیر محصول ما برای رابط کاربری وب که بر APIهای CSS و HTML تمرکز دارد، نشستم تا در مورد سفر کروم به سمت پشتیبانی از توسعهدهندگان رابط کاربری صحبت کنیم.
بیایید با شما دو نفر شروع کنیم. کمی بیشتر از خودتان برای ما بگویید؟
نیکول: من مدیر محصول رابط کاربری وب در کروم هستم. من به طور خاص روی APIهای جدید CSS و HTML و توسعهدهندگان و طراحانی که رابط کاربری میسازند تمرکز دارم. این یک فضای هیجانانگیز با APIهای واقعاً مهمی است که در حال ظهور هستند، مانند Container Queries ، Scope و (امیدوارم!) ریتم عمودی .
اونا: من تیمهای رابط کاربری وب و DevTools DevRel را رهبری میکنم. ما بر پشتیبانی از مهندسان رابط کاربری در پلتفرم وب تمرکز داریم و مطمئن میشویم که آنها ابزارهای لازم برای موفقیت را در اختیار دارند. این شامل APIهای CSS و کامپوننتهای HTML به همراه ویژگیهای DevTools برای مشاهده تغییرات فعال و بازخورد است.
پشتیبانی کروم از توسعهدهندگان رابط کاربری در چند سال گذشته سرعت بیشتری گرفته است. به نظر شما چرا رسیدن به اینجا اینقدر طول کشید؟ بزرگترین چالشها چه بودند؟
اونا: ما باید کارهایی انجام میدادیم تا نشان دهیم این کار چقدر مهم است و چرا باید در اولویت باشد. ما با نظرسنجی DNA MDN در سال ۲۰۱۹ شروع کردیم که رابط کاربری را به عنوان یکی از نقاط ضعف اصلی پلتفرم شناسایی کرد. و از آن زمان، ما همچنان از دادهها به عنوان راهنمای خود از طریق MDN و نظرسنجیهای رضایت توسعهدهندگان داخلی خود استفاده کردهایم. نتیجه همه اینها این بود که ما توانستیم حمایت عمیقتری از رهبری به دست آوریم و کارهای مهندسی را در اطراف برخی از ویژگیهای توسعهدهندگان که بیشترین درخواست را در فضای رابط کاربری دارند، اولویتبندی کنیم. این ویژگیها همچنین بخش عمدهای از تمرکز ابتکاراتی مانند Compat 2021 و Interop 2022 را تشکیل میدهند.
نیکول: علاوه بر جلب موافقت رهبری، باید راه درست رساندن این APIها به توسعهدهندگان را نیز پیدا میکردیم. وقتی برای اولین بار به کروم پیوستم، در پروژهای به نام Layered APIs (یا به اختصار LAPI) این کار را خراب کردم. هدف LAPIها ارائه یک تجربه کامپوننت drop-in به توسعهدهندگان بود. من هنوز هم فکر میکنم این نتیجه بسیار خوبی بود که میتوانستیم به آن برسیم، اما اشتباهات زیادی مرتکب شدیم! ما ابتدا روی Toast Notifications و Virtual List تمرکز کردیم. دسترسی به Toastها تقریباً غیرممکن است و یک Virtual List یکی از سختترین کامپوننتها برای درست انجام دادن است. نیت ما خوب بود اما به توسعهدهندگان کمکی نمیکرد، بنابراین پروژه را کنار گذاشتیم. یادگیری از راه سخت دشوار است، اما هر اشتباهی باعث رنسانس CSS و HTML میشود که اکنون در حال وقوع است.
بیایید کمی بیشتر در مورد LAPI ها صحبت کنیم. آنجا چه اتفاقی افتاد؟
نیکول: برای رابطهای برنامهنویسی کاربردی (LAPI)، میدانستیم که وب به یک تجربه توسعهدهنده کامپوننتهای کشویی نیاز دارد که به ساخت رابط کاربری بومی نزدیکتر باشد. و واضح بود که اختراع مجدد چرخ، توسعهدهندگان را عقب نگه میدارد. نمیتوانم تعداد تبهایی را که در طول دوران حرفهایام ساختهام بشمارم! با این اوصاف، ما سعی کردیم با ارائه جاوا اسکریپت به همراه مرورگر، این مشکل را حل کنیم که بسیار سخت بود. هیچکس قبلاً جاوا اسکریپت را در مرورگر ارائه نکرده بود و مشخص نبود که چگونه باید با کد C++ که موتور رندر مرورگر را تغذیه میکند، تعامل داشته باشد. ما به نظرات سایر فروشندگان مرورگر گوش دادیم (ممنون، موزیلا!) و از آن رویکرد عقبنشینی کردیم و بنابراین توانستیم چیزی بسیار بهتر با رابط کاربری باز (Open UI) پیدا کنیم. با تکیه بر HTML و CSS، در نهایت به راهحلهای انعطافپذیر و اعلانی میرسیم. از آنجا که اعلانی است، میتوانیم دسترسیپذیری را به روشی که با جاوا اسکریپت به این راحتی انجام نمیشد، در آن بگنجانیم. من واقعاً از اینکه این روند به کجا میرود، هیجانزدهام. ما در حال کار بر روی پشتیبانی از selectmenu، popup، tooltip، nav، accordion، tabs، carousel و toggle هستیم که الگوهای طراحی رابط کاربری واقعاً ضروری هستند.
بنابراین ما چیزهای زیادی یاد گرفتهایم. و من میدانم که ابتکارات دیگری در این زمینه وجود داشته است، مانند CSS Houdini . داستان چیست؟
اونا: بله، CSS Houdini یکی دیگر از جاهایی است که ما از جامعه یاد گرفتهایم. کلی ویژگیهای مفید Houdini وجود دارد، اما بسیاری از آنها برای پذیرش و پشتیبانی گستردهتر، خیلی سطح پایین بودند. ما متوجه شدیم که پیادهسازی APIهای سطح پایین لزوماً اصطکاک را برای توسعهدهندگان کاهش نمیدهد. در عوض، تمرکز بر راهحلها و نیازهای سطح بالاتر به کسب پشتیبانی بین مرورگرها و فرودهای لازم برای ایجاد تغییر در اکوسیستم کمک کرده است. ما در حال حاضر پیشرفت را در https://ishoudinireadyyet.com/ پیگیری میکنیم.
صحبت از پشتیبانی از مرورگرهای مختلف شد، به نظر میرسد ابتکاراتی مانند Interop 2022 و Open UI نتایج مثبت قابل توجهی برای جامعه به همراه داشتهاند. از توسعهدهندگان چه میشنوید؟
اونا: یکی از مهمترین مشکلاتی که از توسعهدهندگان میشنویم، «یکسان کردن طراحی در مرورگرهای مختلف» است. ما با همکاری سایر فروشندگان مرورگر برای اولویتبندی و ارائه برخی از ویژگیهای مورد درخواست توسعهدهندگان، این مشکل را برطرف کردهایم. و بازخوردهایی که از جامعه دریافت کردهایم، بسیار مثبت بوده است. علاوه بر این، از طریق یک تلاش گسترده برای معماری مجدد به نام RenderingNG ، ارائه برخی از این ویژگیها با عملکرد بسیار بهتر امکانپذیر شده است. توسعهدهندگان هیجانزدهاند که این ویژگیهای مورد انتظار که سالها درخواست آنها را داشتند، بالاخره در حال کار بر روی آنها هستند و در مرورگرهای مختلف ارائه میشوند.
نیکول: هیجان توی جامعه کاملاً محسوسه. میتونید توی توییتر ببینیدش. :)
همکاری با این اکوسیستم برای هر موفقیتی که در آسانتر کردن زندگی توسعهدهندگان داشتهایم، حیاتی بوده است. میدانم که تیم شما کارهای زیادی در آنجا انجام داده است. آیا مایلید جزئیاتی را به اشتراک بگذارید؟
نیکول: اول از همه، من دائماً از پروژههایی که توسعهدهندگان در وب میسازند، شگفتزده میشوم. از کوچکترین کتابخانه گرفته تا فریمورکهای کامل، توسعهدهندگان چیزهای شگفتانگیزی میسازند. این یک جامعه فوقالعاده از سازندگان است. و کروم در حال برداشتن گامهای زیادی برای ارتباط بیشتر با این پروژهها است.
برای مثال، چند سال پیش ما شروع به کار با فریمورکهای جاوااسکریپت مانند React و Angular و متافریمورکها - برای مثال Next، Nuxt و Gatsby - کردیم. سال گذشته، ما همین کار را با ابزارها و فریمورکهای رابط کاربری مانند Sass، Bootstrap و Material شروع کردیم. امیدوارم در سال آینده بتوانیم با GreenSock و سایر ابزارهایی که زندگی توسعهدهندگان را آسانتر میکنند، همکاری کنیم. من به تازگی سخنرانی Cassie Evans از GreenSock را در کنفرانس Smashing دیدم و این موضوع مرا واقعاً از همکاری با افراد در حوزه انیمیشن هیجانزده کرد.
بنابراین بزرگترین فرصت برای اکوسیستم رابط کاربری وب را در کجا میبینیم؟
اونا: از نظر فرصتهای بزرگ، احساس میکنم که ما تازه در حال بررسی اجمالی امکانات موجود برای تجربیات وب قابل تنظیم هستیم. APIهای جدید مانند کوئریهای کانتینر و ویژگیهای رسانهای ترجیحی کاربر در CSS، در حال تعریف مجدد نحوهی نگاه توسعهدهندگان به طراحی واکنشگرا هستند. من همچنین از تجربیات طراحی مشارکتی که توسعهدهندگان و طراحان را قادر میسازد تا با کاربرانی که از وبسایتهایشان بازدید میکنند، هماهنگ کار کنند، هیجانزدهام.
و نیکول، قدم بعدی در نقشه راه تیمت چیست؟
نیکول: همه اکتشافات به چیزی قابل حمل تبدیل نمیشوند، اما چیزهای زیادی وجود دارد که در حال حاضر واقعاً در مورد آنها هیجانزدهام:
اونا به اولین نکته اشاره کرد، ما طراحی واکنشگرا و مبتنی بر مولفه را فعال میکنیم. این شامل ابزارهایی برای طراحی سیستمهای رنگی است تا طراحان بتوانند به ترجیحات کاربر مانند حالت تاریک پاسخ دهند. به عنوان مثال، فضای رنگی OKLCH روشنایی را در بین رنگها ثابت نگه میدارد. طراحان میتوانند از انتخاب رنگها به طراحی روابط بین رنگها حرکت کنند، بدون اینکه در نهایت با پالتهای کدر و نامفهوم مواجه شوند!
ما همچنین روی برخی از APIهای پردرخواست، مانند کوئریهای کانتینر ، لایههای آبشاری ، انتخابگر والد ( :has )، استایلهای scoped و تودرتو کار میکنیم. توسعهدهندگان به این موارد نیاز دارند تا بتوانند سیستمهای طراحی انعطافپذیر و پر از اجزای قابل استفاده مجدد بسازند.
انیمیشنهای مرتبط با اسکرول یکی دیگر از بخشهای جذاب است. من واقعاً دموی استیو گاردنر را دوست دارم. او اسکرول روان و انیمیشنهای هواپیمای جذابی دارد که هنگام اسکرول فعال میشوند. اگرچه اینها جذاب هستند، اما درست اجرا کردن آنها میتواند دشوار باشد، مخصوصاً با در نظر گرفتن دسترسیپذیری. بنابراین ما اکنون در حال اجرای تست کاربری برای دسترسیپذیری این ویژگی هستیم.
چیزی که من شخصاً بیشتر از همه در مورد آن هیجانزده هستم، کنترلهای رابط کاربری وب داخلی است. توسعهدهندگان بارها و بارها یک مجموعه تب مشابه را میسازند، فکر میکنم مرورگر میتواند کمک کند. در Open UI ، ما روی اجزایی مانند selectmenu، popup، tooltip، tabs، nav، accordion و toggle کار میکنیم. ما در حال بررسی این هستیم که چگونه میتوان قابلیت دسترسی را در این عناصر اولیه مرورگر گنجاند تا وب بتواند به مرور زمان به طور پیشفرض قابل دسترسی شود. سپس توسعهدهندگان میتوانند روی مشکلات پیچیدهتر و ظریفتر تمرکز کنند، در حالی که اصول اولیه مانند نحوه تب کردن تبها میتواند توسط مرورگر پشتیبانی شود. این احتمالاً به یک پست جداگانه نیاز دارد، بنابراین فعلاً به همین جا بسنده میکنم!
در نهایت، ما به سرمایهگذاری در تعامل بین مرورگرها ادامه خواهیم داد. همکاری با افراد در WebKit و Gecko برای ایجاد ثبات در تجربه توسعهدهندگان بسیار عالی بوده است. ما صدای توسعهدهندگان را با صدای بلند و واضح شنیدیم که این را میخواهند!
و اگر آن را بررسی نکردهاید، API انتقال عناصر مشترک تیم Seamless Web قرار است نحوه طراحی وب را تغییر دهد. تمام آن انتقالهای کوچک و ظریف که به طراحان اجازه میدهد طرحهای خود را در فضای فیزیکی جهتدهی کنند، نه تنها ممکن، بلکه آسان خواهند بود. جیک آرچیبالد یک نسخه آزمایشی عالی دارد.
اگر استانداردها خوب پیش بروند، ممکن است امسال حتی به ریتم عمودی هم نگاهی بیندازیم! ما میتوانیم بر اساس LayoutNG که ویژگیهای بسیار زیادی را در اختیار ما قرار میدهد، چیزی بسازیم.
از هر دو نفر متشکرم. مطمئنم که تمام جامعه، مثل ما، از دیدن سرعت جدید پیشرفتها و ویژگیهایی که به دنیای رابط کاربری وب میآیند، هیجانزده هستند. هنوز چیزهای زیادی برای بررسی وجود دارد، بنابراین به نظر شما باید سفر خود را از کجا شروع کنند؟
اونا: بخش «چه چیزهایی برای پلتفرم وب جدید است» در I/O، نکات برجسته بسیاری از ویژگیهای جدید و در حال ظهور امسال را پوشش میدهد. آدام آرگایل همچنین مقالهای عالی در مورد تمام CSSهای جدید و آینده نوشت. من فعلاً روی نسخههای پایدار تمرکز میکنم و فقط از کارهای دیگری که در آینده انجام میشوند، آگاه هستم. مجموعه «جدید برای پلتفرم وب» فوقالعاده شما، مطلبی عالی برای دنبال کردن در این زمینه است. عضویت در خبرنامه web.dev نیز این محتوا را به صندوق ورودی توسعهدهندگان ارسال میکند. و برای توسعهدهندگانی که به دنبال مشارکت و کمک در همه این موارد هستند، پیوستن به Open UI یکی از بهترین راههایی است که میتوانید از این کار حمایت کنید.
بهروزرسانیهای کلیدی آینده
ما سنت خود را حفظ میکنیم و شما را از تغییرات قریبالوقوعی که باید هنگام ایجاد تجربیات وب خود در نظر داشته باشید، مطلع میکنیم.
حداکثر عمر کوکیها را به ۴۰۰ روز محدود کنید
- بهروزرسانی: وقتی کوکیها با ویژگی
Expires/Max-Ageصریح تنظیم میشوند، اکنون مقدار آن به حداکثر ۴۰۰ روز در آینده محدود میشود. پیش از این، هیچ محدودیتی وجود نداشت و کوکیها میتوانستند چندین هزار سال در آینده منقضی شوند. هدف از این محدودیت، ایجاد تعادل بین الگوهای استفاده رایج و احترام به حریم خصوصی کاربر است. هر سایتی که بیشتر از هر ۴۰۰ روز بازدید شود، میتواند کوکیها را بهروزرسانی کند تا تداوم سرویس را تضمین کند و کاربران میتوانند مطمئن باشند که کوکیها هزاران سال بدون استفاده در مرورگرشان باقی نمیمانند. - جدول زمانی تخمینی: انتشار در کروم ۱۰۴ (پایدار در ۲ آگوست ۲۰۲۲).
- فراخوان برای توسعهدهندگان: توسعهدهندگان ممکن است نیاز داشته باشند که هنگام بازدید کاربران از وبسایتهایشان، کوکیها را بهطور فعال و بیشتر از قبل بهروزرسانی کنند. در غیر این صورت، ممکن است کاربران ۴۰۰ روز پس از تنظیم اولیه کوکی، از سیستم خارج شوند.
امیدوارم از خواندن این نسخه از Chrome Dev Insider لذت برده باشید. اگر آن را از دست دادید، این اولین نسخه است. مشتاقانه منتظریم که در سه ماهه بعدی مطالب بیشتری را برای شما ارائه دهیم.
تا آن زمان، نظرات خود را در مورد این نسخه از Chrome Dev Insider و آنچه میتوانیم برای بهتر کردن آن انجام دهیم، با ما در میان بگذارید.
نظر شما در مورد این نسخه از The Chrome Dev Insider چیست؟ نظرات خود را به اشتراک بگذارید .