فرادرس۷ اشتباه توسعه دهندگان مبتدی که نباید مرتکب شوید | راهنمای کاربردی
اولین‌ها همیشه دشوارترین هستند. فرقی نمی‌کند چه کاری انجام می‌دهید، بی‌شک اولین باری که آن را انجام دادید، با سعی و خطای فراوان و تلاش زیاد همراه بوده است. در ادامه و به تدریج با تکرار و تجربه، فرایند کار برای شما آسان شده و با سرعت بیشتری همراه است. ما در این مقاله 7 اشتباه توسعه دهندگان مبتدی را بررسی می‌کنیم.
به عنوان مثال وب‌سایت پورتفولیوی زیر را در نظر بگیرید:
طراحی این وب‌سایت از سوی یک توسعه‌دهنده مبتدی و در نرم‌افزار Figma دو ماه زمان برده است. این زمان شامل طراحی اولیه، کدنویسی بخش فرانت با استفاده از SASS و بدون هیچ فریمورک، توسعه بک‌اند با استفاده از Django و توزیع آن روی Heroku بوده است. شاید بپرسید چرا طراحی یک پورتفولیوی تک‌صفحه‌ای دو ماه زمان برده است؟ دلیل آن این است که اغلب این زمان صرف دیباگ کردن کد شده است. در ادامه این راهنما به بررسی این پروژه و اشتباهاتی که قابل اجتناب بوده‌اند، می‌پردازیم.
طراحی در فیگما
در این بخش اشتباهاتی که غالباً در بخش طراحی رخ می‌دهد را بررسی می‌کنیم.
از کامپوننت‌ها به جای کپی/چسباندن عناصر استفاده کنید
فیگما قابلیت قدرتمندی به نام کامپوننت دارد. این قابلیت به ما امکان می‌دهد که کپی‌هایی از عناصر تکراری ایجاد کنیم که به هم متصل باشند و به این ترتیب موجب می‌شود که تغییر دادن آن‌ها سریع‌تر و آسان‌تر باشد. اگر نتوانیم کامپوننت‌ها را تنظیم کنیم، باید هر کدام را به صورت منفرداً تغییر اندازه بدهیم.
روش بهینه این است که آن‌ها را به یک کامپوننت تبدیل کنیم. به این ترتیب باید عنصر را انتخاب کرده و روی Create Component در نوار ابزار کلیک کنید. سس کلید Alt را نگه داشت و کامپوننت را بکشید تا وهله‌های جدیدی از آن ایجاد شود.
زمانی که کامپوننت ایجاد شد، هر تغییری که در کامپوننت والد ایجاد شود، روی همه وهله‌های فرزند نیز انعکاس می‌یابد:
تعیین استایل‌های رنگ برای ایجاد پالت رنگ شخصی
اگر با مفهوم پالت رنگ ناآشنا باشید، مجبور هستید مداوماً کدهای hex رنگ را به نقاط مختلف کپی کنید که کاری زمان‌گیر و غیر بهینه است. برای به‌کارگیری سریع‌تر رنگ‌ها بهتر است با تنظیم استایل‌های رنگ یک پالت رنگ در فیگما ایجاد کنید.
برای ایجاد یک استایل رنگ، ابتدا رنگی را انتخاب کنید. به این منظور به بخش color styles رفته رنگ را اضافه کنید:
بهره‌گیری از آن استایل رنگ در یک کامپوننت اینک بسیار کارآمدتر است:
کدنویسی فرانت‌اند
در این بخش با اشتباه‌های برنامه‌نویسان تازه‌کار در حوزه کدنویسی آشنا خواهیم شد.
حذف استایل‌بندی تکراری از CSS
استایل‌های تکراری که نیاز ندارید را از CSS اضافه کنید تا حجم فایل مربوطه بیهوده زیاد نشود. برای نمونه کد زیر از استایل‌بندی تکراری استفاده شده است. تعیین عرض 100% روی عناصر بلوکی کاری تکراری است چون به طور پیش‌فرض عرض 100% را اشغال می‌کنند:
استایل‌بندی تکراری یک اشتباه رایج حتی در میان توسعه‌دهندگان باتجربه است. از آنجا که استایل‌بندی تکراری هیچ خطایی ایجاد نمی‌کند، ممکن است فکر کنید که مشکلی ندارد. ابزارهای مخصوص توسعه‌دهندگان مرورگر کروم می‌توانند برای شناسایی خطوط استفاده نشده کد در فایل CSS مورد استفاده قرار گیرند. اگر به دلیل بزرگ بودن فایل CSS نمی‌خواهید هر کد را به صورت دستی تست کنید، می‌توانید از ابزارهایی مانند Unused CSS یا PurifyCSS استفاده کنید.
پیش از رفتن به سراغ کامپوننت بعدی، آن را واکنش‌گرا کنید
هرگز وظیفه واکنش‌گرا ساختن وب‌سایتتان را به کاری که بعداً باید انجام دهید، تبدیل نکنید:
در این صورت ممکن است متوجه شوید که نسخه دسکتاپ وب‌سایت پایان یافته است و می‌خواهید نوار ناوبری را واکنش‌گرا کنید. متوجه می‌شوید که این کار با تعیین flex-direction روی مقدار column قابل اجرا است. اما در ادامه مشخص می‌شوید که این کار ناشدنی است. در ادامه کوئری‌های مدیا را به نوار ناوبری اضافه می‌کنید و می‌بینید که موقعیت دیگر کامپوننت‌ها به هم می‌ریزد و مجبور هستید صدها خط کد را از نو بنویسید.
هر وب‌سایت یک سری از کامپوننت‌های متوالی است که از بالا به پایین کنار هم قرار گرفته‌اند. دست‌کاری نخستین کامپوننت این سری در نهایت موجب ایجاد تغییر در موارد بعدی خواهد شد. برای اجتناب از بازنویسی همه موارد بهتر است که جنبه واکنش‌گرایی کامپوننت‌هایی که طراحی می‌کنید را به پایان ببرید و سپس به سراغ نوشتن کامپوننت بعدی بروید.
به جای استفاده از فرمت PNG یا JPEG از فرمت WebP استفاده کنید
بهتر است از قالب‌های مدرن تصویر مانند WebP استفاده کنید تا زمان بارگذاری کاهش یافته و پهنای باند کمتری مصرف شود.
اگر از یک وب‌سایت با تصاویر زیاد ساخته‌اید، بهتر است فرمت تصاویر را به صورت WebP دربیاورید تا سایت روی اتصال‌های کند نیز سریع‌تر لود شود. از قالب WebP به عنوان فرمت اصلی تصاویر و از PNG به عنوان گزینه جایگزین برای مرورگرهایی مانند Safari که از این فرمت پشتیبانی نمی‌کنند، بهره بگیرید:
توزیع
در این بخش نکاتی در خصوص بحث توزیع وب‌اپلیکیشن را مرور می‌کنیم.
سازگاری بین مرورگرها را تست کنید
بدترین کاری که در مورد یک وب‌اپلیکیشن می‌توان انجام داد این است که آن را با توجه صرف به یک مرورگر طراحی کنید. سازگاری بین مرورگر بخشی اساسی از حفظ بازدیدکنندگان و تضمین تجربه کاربری یکنواخت است.
اگر یک وب‌سایت آن قدر ساده است که می‌توان آن را به صورت دستی تست کرد، در این صورت دانلود کردن نسخه‌های مختلف مرورگرها و اجزای روی آن‌ها بهترین گزینه محسوب می‌شود. این کار زمان‌بری است، اما هزینه‌ای ندارد. با این حال در مورد سایت‌های پیچیده‌تر، چندین منبع در اختیار شما قرار دارند که برخی رایگان و برخی دیگر پولی هستند. این منابع امکان تست سازگاری بین مرورگری را روی دستگاه‌های مختلف فراهم می‌سازند. یکی از محبوب‌ترین موارد LambdaTest است.
پیاده‌سازی اعتبارسنجی ورودی
اگر سایتی می‌سازید که کاربر از طریق فرم با آن تعامل یافته و داده‌هایی را به اشتراک می‌گذارند، باید داده‌ها را در هر دو سمت کلاینت و سرور اعتبارسنجی کنید. توجه کنید که تا زمانی که ورودی کاربر اعتبارسنجی نشده است، نباید به آن اعتماد کنید.
اعتبارسنجی ورودی وظیفه پیچیده‌ای است و در هر فریمورک به روش متفاوتی انجام می‌گیرد. در مورد افراد تازه‌کار، اعتبارسنجی ابتدایی فرم را می‌توان با استفاده از HTML5 با مدیریت خطای سمت کلاینت داخلی اجرا کرد. نمونه‌ای از این حالت تعیین خصوصیت true برای مشخصه email در مورد فیلد‌های ایمیل است. در چنین مواردی، اگر کاربر از فرمت صحیحی برای وارد کردن ایمیل استفاده نکند، خطایی به وی نشان داده می‌شود.
سخن پایانی
از این که این مقاله را با عنوان 7 اشتباه توسعه‌دهندگان مبتدی فرانت‌اند تا انتها مطالعه کردید از شما متشکریم و امیدواریم موارد مطرح شده در این راهنما مورد توجه شما قرار گرفته باشند و بتوانید از آن‌ها در پروژه‌های آینده خودتان استفاده کنید.
