وقتی HTML و CSS جای جاوااسکریپت رو میگیرن
فرانتاند
جاوااسکریپتخلاصهٔ کاملتر
نویسنده میگه سالها جاوااسکریپت اسب بارکش وب بوده؛ هر کاری که HTML یا CSS از پسش برنمیاومد رو با JS حل میکردیم. این روند تجربهٔ کاربر رو جلو برده، ولی به گفتهٔ نویسنده الان وب زیر بار همین JS داره خفه میشه. حالا که HTML و CSS مدام قویتر میشن، منطقیه که هر بار کاری که میشه رو از روی دوش JS برداریم و بدیم به اونها.
بر همین اساس، پروژهٔ NoLoJS یه مجموعهٔ ارگانیک از الگوهای رایجیه که میشه فقط با HTML و CSS و بدون JS یا با خیلی کم JS پیادهشون کرد. نویسنده تأکید میکنه که این کالکشن یه چیز ثابت نیست؛ قراره همینطور که HTML و CSS بالغتر میشن، اون هم گستردهتر بشه. کد و مخزنش هم روی GitHub در دسترسه و از Issue و PR استقبال میشه.
لیست الگوها حسابی متنوعه و کارای روزمرهٔ فرانتاند رو پوشش میده: آکاردئون با حالتهای مختلف باز و بسته شدن، تب، مودال و Popover، کاروسل CSSی با سواپ و نقطههای نشانگر، منوی کشویی کنار صفحه (offscreen nav)، فیلتر، Lazy Load برای عکس و ویدیو و صدا، اسکرول نرم، Scroll Spy، پارالاکس و اسلایدر مقایسهٔ تصویر. ایدهٔ پشت کار اینه که خیلی از اینها رو دیگه لازم نیست با JS بسازی.
نویسنده یه نکتهٔ جالب هم درباره ساختار پروژه میگه: هر الگو رو به اسم خود قابلیت نامگذاری کرده، نه به اسم عنصر HTML یا پراپرتی CSS. مثلاً بهجای loading یا preload، اسم lazy-load رو گذاشته تا کسی که دنبال این کاره راحتتر پیداش کنه. هر الگو هم یه README داره با توضیح کوتاه، نامهای دیگهای که باهاش شناخته میشه و لینک به Baseline یا CanIUse برای بررسی پشتیبانی مرورگرها.
نویسنده اشاره میکنه که وسط کار تازه به مخزن بزرگ You-Dont-Need-JavaScript برخورده، ولی به نظرش اون پروژه به خاطر نبود توضیح و دموی کافی و چون نمونهکداش کل صفحهان، تشخیص اینکه چی واقعاً لازمه سخته. برای همین تصمیم گرفته کار خودش رو با نمونههای مینیمال و تمیز ادامه بده. آخر مطلب هم لیستی از منابع و آدمهایی که سالها روی این موضوع نوشتن معرفی کرده.
نکات کلیدی:
- ایدهٔ اصلی: انتقال بار کاری از JS به HTML و CSS برای سبکتر شدن صفحه
- یه کالکشن زنده و رو به رشد از الگوهای رابط کاربری بدون یا با کم JS
- پوشش الگوهای رایج مثل آکاردئون، تب، مودال، کاروسل و منوی کشویی
- نامگذاری بر اساس قابلیت، نه عنصر HTML یا پراپرتی CSS
- هر الگو با README، توضیح و لینک به Baseline یا CanIUse
