Miriam Suzanne یک نویسنده، هنرمند و توسعهدهنده وب در دنور، کلرادو است و در حال حاضر روی مشخصات CSS هیجانانگیزی مانند Container Queries و Cascade Layers کار میکند.
این پست بخشی از Designcember است. جشن طراحی وب، که توسط web.dev برای شما آورده شده است.
میریام سوزان نویسنده، هنرمند و توسعه دهنده وب در دنور، کلرادو است. او یکی از بنیانگذاران OddBird (یک آژانس وب)، نویسنده کارکنان CSS Tricks، عضو تیم اصلی Sass و کارشناس دعوت شده W3C در گروه کاری CSS است. اخیراً او بر توسعه ویژگیهای جدید CSS مانند Cascade Layers، Container Queries و Scope متمرکز شده است. آفلاین، میریام یک رماننویس، نمایشنامهنویس و موسیقیدان است. ما در مورد کار او با Sass و CSS صحبت کردیم.
ریچل: من برای اولین بار به خاطر چارچوب شبکه ای شما سوزی با کار شما آشنا شدم، چه چیزی باعث شد آن را ایجاد کنید؟
میریام: در سال 2008، چیدمان در وب تجربه بسیار متفاوتی بود. توسعهدهندگان از طرحبندی جدول به شبکههای شناور معناییتر (اما هنوز هککننده) رفته بودند. رونقی در "فریمورکهای شبکهای" 12 ستونی یکاندازه وجود داشت – که یک شبکه از پیش تعریفشده (معمولاً ایستا) با مجموعهای از کلاسهای CSS از پیش تعریفشده ارائه میکرد. اگر به چیز قابل تنظیم بیشتری نیاز داشتید، خودتان هستید. واضح بود که وبسایتها باید پاسخگوتر شوند، اما پرسشهای رسانهای هنوز در دسترس نبودند، و مشکلات سازگاری مرورگر در اطراف شناورهای سیال وجود داشت.
من از رویکرد سیستمهای CSS ناتالی داون استفاده میکردم، که در پاسخگویی به اندازه فونت و اندازه نمایش هوشمندانه بود، اما از همه هکهای تکراری ریاضی و مرورگر مورد نیاز ناامید شدم. در همان زمان، Sass شروع به جلب توجه کرد و کاملاً برای آنچه من نیاز داشتم مطابقت داشت. اولین پیش نویس سوزی بسیار ساده بود: فقط چند میکس برای انجام محاسبات و اضافه کردن هک هایی که نیاز داشتم. هدف این بود که حداقل باشد و فقط کد اصلی را خروجی بگیرد. شبکه های کاملاً قابل تنظیم، بدون کلاس های از پیش تعریف شده.
راشل: چگونه از کار بر روی یک پیش پردازنده CSS به کار بر روی مشخصات CSS تغییر کردید؟ آیا فکر می کنید کار بر روی پیش پردازنده زمینه خوبی برای نوشتن مشخصات بود؟
میریام: در تجربه من همپوشانی های زیادی وجود دارد، و من هنوز در هر دو طرف این شکاف بسیار فعال هستم. اما من فکر میکنم که این تا حد زیادی به لطف تیم Sass بهویژه به رهبری ناتالی وایزنبام است، که دیدگاهی بسیار بلندمدت دارد—تلاش برای توسعه ابزارهایی که به راحتی با استانداردهای توسعه وب ادغام میشوند. هنگامی که به آینده استانداردهای وب اصلی فکر می کنید، فراتر از راه حل های "نظر" یک اندازه و ایجاد انعطاف پذیری طولانی مدت، ضروری است.
چگونه میتوانیم ابزارهایی بسازیم که به تنوع نیازها و رویکردهای توسعهدهنده احترام بگذارند و در عین حال دسترسی و سایر ملاحظات مهم را تشویق و تسهیل کنند؟
راشل: ما یک سری چیزها را وارد CSS کردهایم که اساساً جایگزین عملکردی میشوند که به طور سنتی بخشی از Sass بود. آیا دلایل محکمی برای استفاده از چیزی مانند Sass وجود دارد؟
میریام: برای برخی افراد بله، اما هیچ پاسخ جهانی در اینجا وجود ندارد. برای مثال متغیرها را در نظر بگیرید. متغیرهای Sass از نظر واژگانی دارای محدوده واژگانی هستند و بر روی سرور کامپایل میشوند، با ساختارهای داده سازمانیافته مانند فهرستها و اشیاء، دستکاری رنگ و غیره. این برای منطق سیستم طراحی که نیازی به اجرا در مرورگر ندارد، عالی است.
متغیرهای CSS مقداری همپوشانی دارند، همچنین میتوانند مقادیر را ذخیره کنند، اما مجموعهای کاملاً متفاوت از نقاط قوت و ضعف مبتنی بر آبشار را ارائه میکنند. Sass نمی تواند ویژگی های سفارشی را مدیریت کند و CSS واقعاً نمی تواند داده های ساخت یافته را مدیریت کند. هر دو مفید هستند و هر دو قدرتمند هستند - اما نیازهای خاص شما ممکن است متفاوت باشد.
من فکر میکنم وقتی افراد میتوانند ابزارهایی را که دیگر به آنها نیاز ندارند حذف کنند، بسیار خوب است، و برخی از پروژهها ممکن است به متغیرهای سمت سرور و مشتری نیاز نداشته باشند. فوق العاده! اما خیلی ساده است که فرض کنیم این بدان معناست که آنها یکسان هستند و یکی به سادگی جایگزین دیگری می شود. همیشه موارد استفاده وجود دارد که برخی از منطق طراحی در سمت سرور اتفاق بیفتند، و برخی در سمت کلاینت اتفاق بیفتند - حتی اگر به نقطهای برسیم که زبانها اساساً ویژگیهای یکسانی را ارائه دهند. پیش پردازنده ها برای دراز مدت با ما هستند.
راشل: آیا چیزی وجود دارد که شما را متعجب کرده است، زیرا شما بیشتر درگیر کار ایجاد استانداردها شده اید، یا هر چیزی که فکر می کنید عموماً ممکن است مردم از این روند آگاه نباشند؟
میریام: قبل از درگیر شدن، فرآیند استانداردها مانند یک جعبه سیاه مرموز و جادویی به نظر می رسید، و من مطمئن نبودم که چه انتظاری داشته باشم. من می ترسیدم که دانش کافی از مرورگرهای داخلی برای مشارکت نداشته باشم، اما واقعیت این است که آنها به مهندسان مرورگر بیشتری نیاز ندارند. آنها به توسعه دهندگان و طراحان بیشتری نیاز دارند که در حال ساخت وب سایت ها و برنامه های کاربردی در طبیعت هستند.
من متعجب شدم وقتی متوجه شدم تعداد کمی از افراد درگیر عمدتاً بر روی استانداردها متمرکز هستند، اما تعداد بسیار کمی از آنها عمدتاً در حال توسعه یا طراحی وب سایت هستند. W3C از "داوطلبان" از سازمان های عضو تشکیل شده است (اغلب توسط آن سازمان ها پرداخت می شود، اما به عنوان شغل اصلی آنها نیست) و عضویت آن ارزان نیست. که شرکت کنندگان را از طراحان و توسعه دهندگان روزمره دور می کند، به خصوص آنهایی که ما در آژانس های کوچک یا به صورت مستقل کار مشتری انجام می دهیم. نقش من به عنوان یک کارشناس دعوت شده کاملاً داوطلبانه خواهد بود، یک سرگرمی گران قیمت، اگر بودجه خارجی برای آن کار پیدا نکرده بودم.
در واقعیت، این فرآیند کاملاً باز و عمومی است و نیاز به مشارکت توسعهدهنده دارد – اما همیشه مکالمههای زیادی در یک زمان اتفاق میافتد که پیدا کردن مکان شما دشوار است. به خصوص اگر کار روزانه شما نباشد.
راشل: پرسشهای کانتینر برای بسیاری از توسعهدهندگان وب برای سالهای متمادی جام مقدس بوده است. من از این واقعیت که ما آنها را دریافت می کنیم بسیار هیجان زده هستم. من احساس میکنم که بسیاری از مردم به سودمندی پرسشهای کانتینر فکر میکنند - آیا احساس میکنید آنها پتانسیلی برای باز کردن خلاقیت بیشتر دارند؟
میریام: کاملاً، اگرچه من آنها را کاملاً جدا نمی بینم. همه ما زمان محدودی داریم و سعی می کنیم کدهای قابل نگهداری و عملکردی بنویسیم. زمانی که انجام کاری به صورت عملی سخت باشد، احتمال کمتری وجود دارد که در مورد آنچه ممکن است خلاق شویم.
با این حال، صنعت وب اکنون تحت سلطه منافع شرکت های بزرگ است، و بنابراین این نگرانی های تجاری همیشه بیشتر از هنرمندان وب وقت پخش می کنند. و من فکر می کنم اگر خلاقیت وب را به عنوان یک مورد استفاده اولیه برای ویژگی ها نادیده بگیریم، چیزهای زیادی از دست می دهیم. من از دیدن برخی از هنرپیشههای CSS که با نمونه اولیه پرس و جوی کانتینر بازی میکنند بسیار هیجانزده شدهام. جی تامپکینز یک نسخه نمایشی هوشمندانه و تعاملی از پردههای ونیز CSS به عنوان تفسیری بر روی میم قدیمی ضد CSS ساخته است. فکر میکنم در این فضا چیزهای بیشتری برای کاوش وجود دارد، و من نمیتوانم منتظر بمانم تا ببینم مردم چه چیز دیگری میآورند.
مکالمه همچنین بر روی پرس و جوهای مبتنی بر اندازه متمرکز شده است، به عنوان مورد اصلی، اما من هیجان زده هستم که ببینم مردم با پرس و جوهای سبک چه می کنند – توانایی نوشتن سبک های شرطی بر اساس مقدار یک ویژگی یا متغیر CSS. این یک ویژگی بسیار قدرتمند است و تا کنون عمدتاً کشف نشده است. فکر می کنم فرصت های خلاقانه تری را باز می کند!
راشل: آیا کاری وجود دارد که ما نتوانیم انجام دهیم (یا راهی برای انجام آینده داریم) در CSS که فکر می کنید مفید باشد؟
میریام: من در مورد برخی مشخصات دیگر که روی آنها کار کرده ام بسیار هیجان زده هستم. لایههای آبشاری به نویسندگان کنترل بیشتری بر روی مسائل اختصاصی میدهد و Scope باید با هدفگیری انتخابگر دقیقتر کمک کند. اما هر دوی اینها دغدغه های معماری سطح بالایی هستند. هنرمند درون من بیشتر برای چیزهایی مانند جابهجایی CSS، روشی برای ایجاد سبکهای تعاملی، یا «خطهای زمانی» کانتینری هیجانزده است که به ما امکان میدهد مقادیر را بین رسانهها یا نقاط شکست کانتینر به آرامی انتقال دهیم. این پیامدهای بسیار عملی برای تایپوگرافی واکنشگرا دارد، اما همچنین فرصتهای خلاقانه زیادی را برای هنر و انیمیشن واکنشگرا باز میکند.
ریچل: چه کسی در حال حاضر کار واقعاً جالب، سرگرم کننده یا خلاقانه ای در وب انجام می دهد؟
میریام: اوه، من حتی مطمئن نیستم که چگونه به آن پاسخ دهم، افراد زیادی هستند که در زمینه های مختلف کار خلاقانه انجام می دهند. استانداردهای مهیج زیادی از CSSWG و Open-UI در حال انجام است، از جمله برخی از کارهای شما بر روی تکه تکه شدن. اما من اغلب بیشترین الهامات را از هنرمندان وب و اینکه چگونه مردم این ابزارها را به تولید میرسانند، به روشهایی که مستقیماً به تجارت مرتبط نیستند، میبینم. افرادی مانند Jhey ، یا Lynn Fisher ، یا Yuan Chuan ، یا بسیاری دیگر که مرزهای کاری را که فناوری های وب می توانند به صورت بصری و تعاملی انجام دهند پیش می برند. حتی افرادی که کارهای تجاری بیشتری انجام می دهند می توانند از تکنیک های هنری خود چیزهای زیادی بیاموزند.
من همچنین از هنر وب مفهومی تر افرادی مانند بن گروسر قدردانی می کنم که مدام ما را وادار می کند تا در مورد آنچه از وب و به ویژه رسانه های اجتماعی می خواهیم تجدید نظر کنیم. برای مثال، minus.social جدید او را بررسی کنید.
راشل: با کار میریام در CSS در css.oddbird.net همراه باشید و از طریق وبسایتش به نشانی miriam.codes و Twitter @TerribleMia ، در مورد کارهای دیگری که او میخواهد مطلع شوید.