امروز عصر بعد از اینکه جلسه چَپتِر فرانت رو نِصفه نیمه شرکت کردم یکی از بچه‌ها تماس گرفت و من رو به اولین کد ریویو رسمی عمرم دعوت کرد! یکمی صحبت کردیم و بهم گفت که لینک مرج ریکوئستی رو که من باید بررسی کنم رو برام فرستاده؛
خوب! مثل هر آدم کنجکاو دیگه‌ای منم فاصله بین گوشی و کامپیوتر رو پرواز کردم که ببینم این کدی که قراره ریویو کنم چطوریه و اصلا مربوط به کجای پروژه است؛ خوب اگه شما هم مشتاقید باید بگم کد مقصود مربوط به یکی از بخش‌هایی بود که قبلا روش کار کرده بودم ( اگه فکر می‌کنید خوب مسلمه! قطعا توی باسلام کار نمی‌کنید! )
حالا چرا همه اینا رو گفتم؟ چون کد رو نگاه کردم و به یه سری مسئله‌های خیلی ساده برخوردم که اگه بهشون دقت کنیم احتمالا در طولانی مدت کد بهتری داشته باشیم! ( و خوب این دلیل خوبی شد برای کنار گذاشتن تنبلی و نوشتن یه پست جدید که واقعا به درد یکی بوخوره! )
فرمت نبودن کدها اولین چیزی بود که توی این کد ریویو به چشمم خورد، و فهمیدم که اگر با کسی که داره کد شما رو ریویو می‌کنی دشمنی دارید کافیه کدتون رو فرمت نکنید! صد در صد تضمین میکنم که طرف حتما سردرد می‌گیره!
ولی جدا همخوانی نداشتم indent ها توی فایل‌های مختلف ( یا حتی بدتر! توی خط‌های مختلف یه فایل ) واقعا باعث میشه خوندن اون کد برای همه حتی خودمون سخت بشه، و توی طولانی مدت هم براتون مشکلات زیادی میاره
برای مثال؛
یادمه چند وقت پیش یکی از بچه‌ها رو دیدم که یکی دو روز درگیر این بود که چرا استایل‌هایی که به فلان تگ میده اصلا درست کار نمی‌کنن در حالی که همه چیز رو مو به مو از روی یه آموزش پیش رفته بود؛ البته با این تفاوت که کد رو فرمت نکرده بود و به‌زور داشت تلاش می‌کرد بین اون بازار شام مشکل رو پیدا کنه! که احتمالا اگه prettier مثل یه فرشته نجات نرسیده بود و کدش رو فرمت نکرده بود، یکی دو روز دیگه هم باید تلاش می‌کرد تا متوجه بشه یکی از تگ‌ها رو اصلا نَبَسته!
البته بعضی‌ها هم عمدا کد رو فرمت نمی‌کنن چون می‌دونن که باعث میشه تغییراتی که بقیه دادن ( ولی یادشون رفته فرمت کنن ) با تغییرات خودشون توی یه کامیت قرار بگیره؛ و خوب اصلا کار درستی نیست شاید حلال حروم بشه!
البته جواب این شبهه خیلی سادس! که توی عنوان هم بهش اشاره کردم! قبل از زدن حتی یک خط کد، کل فایل رو فرمت کنید و توی یه کامیت جدا اون رو برای همیشه ثبت کنید!
همچنین اگه برای نوشتن کامیت‌هاتون از استاندارد خاصی استفاده می‌کنید احتمالا توی اون استاندارد برای فرمت کردن کد یه مثالی زده شده مثل اینجا که خط پایین رو مثال زده:
style (formatting, missing semi colons, etc; no production code change)
این مورد هم یکی از چیزهایی بود که قبلا خودم باهاش کاری نداشتم و خلاصه انقدر دردسر درست کردم برای بقیه که هنوز جای مشت و لگدهاشون درد می‌کنه! ( ولی عوضش الان دیگه کاملا رعایت میکنم! )
این موضوع خیلی نیازی به توضیح نداره، هرچند که از نظر اهمیت میشه گفت خییییییلیییییی مهمه! حالا چرا؟ چون این موضوع حتی بیشتر از قانون اول کد رو خوانا می‌کنه، حتی می‌تونم بگم اگر استاندارد، درست انتخاب بشه قطعا کمک می‌کنه با درد کم‌تر و سرعت بیشتری فیچر جدید اضافه کنید و خیلی چیزای دیگه که اگه بگم خوندن این مقاله رو ول می‌کنید و میرید سراغ انتخاب استاندارد درست برای پروژه‌تون!
فوت کوزه‌گری هم یه سرچ ساده راجب Style Guide اون زبان یا فریم‌ورکی هست که دارید باهاش کار می‌کنید.
البته یادتون باشه سخت نگیرید و توی دنیای استانداردهای مختلف غرق نشید! چون هرچقدر هم بگردید هیچ وقت به بهترین نمی‌رسید.
یکی دیگه از مواردی که شاید خیلی‌هامون دچارش هستیم همینه! یه سینتکس ناآشنا رو می‌بینیم و از بقیه نمونه‌های توی پروژه استفاده می‌کنیم تا کارمون رو راه بندازیم. ( البته این حرکت معمولا درست جواب میده و عملا هیچ اتفاق اشتباهی نمی‌افته! اما خوب، همیشه این اتفاق نمی‌افته )
توی یکی از بخش‌ها متوجه شدم که برای نوشتن استایل‌ها از BEM استفاده شده که به‌نظرم خیلی خوب بود و اون بخش از کد واقعا خوانا بود؛ اما یکمی که دقت کردم دیدم توی ادامه اون بخش بچه‌ها ( از جلمه خودم :D ) اومدن سینتکس رو از روی کدهای قبلی کپی کردن، ( مثل هر برنامه‌نویس حرفه‌ای دیگه‌ای! ) اما متاسفانه مفموم BEM رو رعایت نکردن!
مثلا اینجا رو ببینید؛
.spinner { width: 3rem; height: 3rem; border-radius: 50%; .... } .spinner--tiny { width: 1.5rem; height: 1.5rem; .... }
اگه یکمی راجب BEM خونده باشید این کد کاملا براتون عادیه البته به‌جز یه بخشش! اون قسمت که یه modifier داره دوتا از property های block رو تغییر میده. ( البته می‌دونیم که این اجازه توی BEM وجود نداره بلکه کد رو میشه به شکل زیر نوشت که به‌نظر من بهتره )
.spinner { border-radius: 50%; .... } .spinner--normal { width: 3rem; height: 3rem; .... } .spinner--tiny { width: 1.5rem; height: 1.5rem; .... }
الان توی این شرایط هیچ کدوم از پراپرتی‌ها override نمی‌شن که کد رو خیلی امن‌تر می‌کنه مخصوصا اگر این دو تا کلاس توی دو تا فایل مختلف باشن که ممکنه یکیشون دیرتر لود بشه!
گاها پیش میاد که استایلی که توی لوکال روش کار می‌کنیم کاملا با استایلی که روی سایت اصلی میره فرق داره! و دلیلش هم می‌تونه این باشه که اولویت قرار گرفتن استایل‌ها توی لوکال و سایت اصلی ممکنه فرق داشته باشه ( بخاطر سرعت اینترنت یا نحوه باندل کردن فایل‌ها و ... )
خوب به‌نظرم بسه، بقیه موارد رو خودتون اوستا هستید! اگه چیزی رو اشتباه گفتم یا حس می‌کنید ناقصه یا هرچیز دیگه‌ای لطفا بهم اطلاع بدید. ممنون! راستی روزتون هم ( با یکمی تاخیر ) مبارک!
