ابتدای این هفته دوره ۳۴ ام از رقابت‌ چهار هفته‌ای CSSBattle تمام شد، من هم در این دوره شرکت کردم و توانستم رتبه ۱۸ ام را با در نظر گرفتن راه‌حل‌های Unicode کسب کنم. در ادامه در خصوص CSSBattle، تجربه قبلی‌ام، دلیل شرکت در این رقابت، نحوه آماده شدن و تجربه‌ای که بدست آوردم توضیح می‌دهم.

CSSBattle چیست؟

CSSBattle رقابتی برای توسعه‌دهنده‌‌ها و طراحان است، هر target یک تصویر دارد و شرکت کننده باید با استفاده HTML و CSS تصویر ارائه شده را بازآفرینی کند، خروجی کدها و تصویر ارائه شده بایستی بصورت کامل یکسان باشند، در نهایت کدی که کوتاه تر باشد امتیاز بیشتری دریافت می‌کند.

تجربه قبلی‌ در CSSBattle

دو سال قبل به مدت چند هفته در وبسایت فعالیت داشتم و تا Battle #11 پیش رفته بودم اما ادامه ندادم چون تعداد target های باقی مانده خیلی زیاد بود و برخی از مواردی که انجام داده بودم با وجود اینکه درست بودند بصورت ۱۰۰ درصد با تصویر ارائه شده منطبق نمی‌شدند.

تصمیم به شرکت در Battle #34

از طریق توییتر متوجه شدم که یک رقابت جدید از اول ماه فوریه با حمایت CodePen به مدت چهار هفته با هشت target برگزار میشه و جایزه‌‌ای هم برای سه نفر اول در نظر گرفته شده است.

واقعیت اینه که خیلی مشتاق شدم و بطور جدی تصمیم گرفتم در این دوره از رقابت شرکت کنم، با توجه به انجام پروژه‌های Single div CSS Illustration و CSS Only Patterns اعتماد به نفس خوبی داشتم و فکر می‌کردم می‌توانم جایزه CodePen را دریافت کنم.

آماده شدن برای رقابت

با توجه به تغییراتی که CSS در چند سال اخیر داشته ترفندهایی که استفاده می‌شود هم به روز شده و تغییرات زیادی داشته قبل از هر چیزی صفحه نکات و ترفندها را در وبسایت CSSBattle مطالعه کردم و با جستجو در وب سعی کردم ترفندها و روش‌های جدیدی که برای نوشتن کدهای کمتر وجود داره را یاد بگیرم و چیزهایی که از قبل می‌دانستم یادآوری شود.

کار دیگه‌ای که انجام دادم حل Daily Targets بوده، این بخش طی دو سال اخیر اضافه شده و این امکان را می‌دهد تا بهترین راه‌حل‌های target روز قبل را مشاهده و روش‌هایی که شرکت‌کنندهای برتر استفاده می‌کنند را بررسی کنید.

شروع رقابت

بعد از انجام دو target در هفته اول متوجه شدم رقابت بسیار شدیدی وجود دارد و باید جایگاه اول تا سوم را فراموش کنم؛ طی مدتی که رقابت در جریان بود هر روز بهترین راه‌حل‌های Daily Targets روز قبل را بررسی می‌کردم و سعی می‌کردم چیزهای جدید یاد بگیرم و کدهای بهتری بنویسم.

می‌دانستم یکی از روش‌هایی که برای کم کردن کدها وجود دارد استفاده از Unicode است بنابراین در این خصوص در forum وبسایت جستجو کردم و با کمی آزمون و خطا توانستم برای اولین بار در دو target از Unicode هم استفاده کنم.

در هفته آخر تلاشم برای بهبود رتبه‌ام به اوج خودش رسید و هر شب روی target های مختلف کار می‌کردم تا اینکه به مرحله‌ای رسیدم که دیگه راه‌حلی برای بهبود عملکردم نداشتم.

کمک گرفتن از هوش مصنوعی

واقعیت اینه که هوش مصنوعی کمک زیادی نمی‌کند حتی در موارد خیلی ساده بعنوان مثال Gemini و GitHub Copilot چیزی در خصوص واحد q در CSS نمی‌دانستند و این توضیحات Copilot در خصوص مقدار 1q هست:

This is a non-standard unit and seems to be a typo or placeholder. Typically, units like px, %, em, etc., are used.

یا وقتی خواستم کد زیر را بصورت کوتاه‌تر بازنویسی کنند هیچکدام جواب درستی ندادند.

border-radius: 200px 200px 0 0;

در حالی که جواب خیلی ساده بود و باید از واحد in به جای px استفاده می‌شد.

border-radius: 1in 1in 0 0;

با اینحال می‌توانید برای تفسیر و توضیح در خصوص کدها از این ابزارها استفاده کنید و تا حد قابل قبولی کدها را توضیح می‌دهند.

جمع بندی

کسب رتبه یک تا سه در همچين رقابتی مستلزم تجربه کافی در این رقابت‌ها است و به تلاش خیلی زیادی نیاز داره، انتظاراتم اولیه‌ام منطقی نبود و امکان نداشت بعد از دو سال دور بودن از این فضا بتوانم جایزه CodePen را بگیرم؛ با اینحال شرکت در این رقابت تجربه خیلی خوبی بود، از عملکردم راضی هستم و کدهای خوبی نوشتم.