برای بسیاری از افراد تازه‌کار در دنیای توسعه سمت کاربر یا Front-End Development موضوعات ابتدایی و پایه‌ای بسیار واضح به‌نظر می‌رسد و هیچوقت فکر نمی‌کنند که روزی در کدنویسی آن موارد اشتباه کنند. اما واقعیت این است که همین موضوعات پایه‌ای هم می‌توانند بخشی از اشتباهات یک توسعه‌دهنده سمت کاربر باشند. با در نظر گرفتن این موضوع در این مطلب قصد داریم شما را با مرسوم‌ترین اشتباهات بسیاری از توسعه‌دهندگان فرانت-اند آشنا کنیم. سعی کنید این اشتباهات را در کدهای خودتان تکرار نکنید.
اشتباهات مربوط به HTML
1. تعیین نکردن DOCTYPE
DOCTYPE دستوری است که با استفاده از آن مرورگر به نسخه HTML مربوط به سند شما پی می‌برد. برای نوشتن این دستور در HTML نسخه ۵ تنها کافی‌ست تا قطعه کد زیر را در ابتدای سند وارد کنید:
<!DOCTYPE HTML>2. نبستن تگ‌ها
یکی از اشتباهات مرسوم طراحان وبسایت نبستن تگ‌ها است. این موضوع از آن جهت ایجاد می‌شود که توسعه‌دهندگان توجه کافی به کدها ندارند. برای جلوگیری از این موضوع میتوانید از یک ادیتور مناسب استفاده کنید که در آن تگ‌ها به صورت خودکار بسته می‌شوند.
۳. کد جاوااسکریپت
اگر قصد استفاده از جاوااسکریپت به صورت Internal را دارید باید از تگ script استفاده کنید.
<script type=”text/javascript”></script>در نسخه‌های قبلی HTML استفاده از خاصیت type ضروری بود اما در HTML5 میتوانید از این مقدار استفاده نکنید.
یک نکته مهم که برنامه‌نویسان گاهی در آن اشتباه می‌کنند آن است که تگ‌های script را باید در انتهای کدهای مربوط به قسمت body قرار دهید.
۴. استفاده نکردن از خاصیت alt
خاصیت alt به عنوان یک جایگزین برای تصاویر استفاده می‌شود. البته جدای از این کاربرد، alt سئو وبسایت را بهینه‌تر کرده و همچنین دسترسیپذیری را افزایش می‌دهد.
۵. ID منحصر به فرد
گاهی اوقات برنامه‌نویسان مبتدی چندین المان را با استفاده از یک ID روی یک صفحه قرار می‌دهند. این کار اشتباه است. ID المانی است که باید به صورت منحصر به فرد تعیین شود. به این معنا که یک ID باید متعلق به یک tag باشد. اگر قصد دارید یک استایل را به المان‌های مختلفی اعمال کنید بجای استفاده از ID باید از Class استفاده کنید.
۶. استفاده زیاد از inline-style
استایل‌دهی به صورت inline-style کاری اشتباه است چرا که باعث پیچیده شدن پروژه خواهد شد. بجای آن بهتر است از رویکردهای Internal و External استفاده کنید. اگر کدهای‌تان کوتاه است رویکرد Internal می‌تواند جوابگوی شما باشد در غیر اینصورت بهتر است از همان فایل style.css استفاده کنید.
۷. استفاده از تگ br برای قالب‌دهی به متون
یکی دیگر از اشتباهات بزرگی که توسعه‌دهندگان انجام می‌دهند استفاده کردن از تگ br برای قالب‌دهی به متون است. برای اعمال فواصل و استایل‌های مشابه آن بهتر است از CSS استفاده کنید. انجام چنین کاری باعث بالا رفتن سازگاری وبسایت در دستگاه‌های مختلف نیز می‌شود.
اشتباهات مربوط به CSS
۱. استفاده زیاد از !important
important دستوری است که باعث اولویت دهی به یک استایل خاص و نادیده گرفتن استایل‌های دیگر می‌شود. هیچ‌گاه در استفاده از این المان زیاده‌روی نکنید چرا که کدهای شما را ناسازگار کرده و کنترل آن را سخت می‌کند.
۲. نام classها
هدف از classها می‌تواند موضوعات مختلفی باشد. اما یکی از مهمترین آن‌ها استفاده دوباره کردن است. به این معنا که شما یک استایل خاص را تعریف کرده و آن را روی المان‌های مختلفی اعمال می‌کنید. برای انجام چنین کاری بهتر است از نام‌های معناداری استفاده کنید که بهتر از وضعیت استایل‌ها خبردار شوید.
۳. استفاده نکردن از میانبرهای CSS
برای برخی از استایل‌های CSS یکسری میانبر وجود دارد که دانستن آن‌ها به تمیز‌تر بودن کدها کمک می‌کند. برای مثال دستور padding را در نظر بگیرید. استفاده کردن از padding-top، padding-buttom و… می‌تواند کدهای‌تان را شلوغ بکند. بجای این کار تنها کافی‌ست تا padding را فراخوانی کنید.
۴. کثیف کاری!
یکی از دلایل اصلی ایجاد CSS کم شدن المان‌های تکراری در یک فایل کدنویسی شده است. برای مثال اگر قصد اعمال یک استایل روی المان‌های مختلف را دارید بجای آنکه به صورت تک تک این کار را انجام دهید، همه آن‌ها را در یک گروه اعمال کنید.
این موضوع را نیز در نظر بگیرید که استفاده کردن از selectorهای تودرتو می‌تواند پیچیده و گاهی اوقات شَلخته باشد. به همین خاطر مهم است که در حد توان آن‌ها را کوتاه نگه دارید.
موارد بیشتر
در ادامه به‌صورت تیتروار شما را با برخی دیگر از اشتباهات دنیای Front-End Development آشنا خواهیم کرد:
عدم بهینه‌سازی عملکرد (Performance Optimization):
- بارگذاری حجم زیاد از فایل‌های جاوااسکریپت و CSS.
- استفاده نادرست از تصاویر با رزولوشن بالا بدون فشرده‌سازی.
- عدم استفاده از کَش (Caching) برای فایل‌های ثابت.
عدم رعایت اصول دسترسیپذیری (Accessibility)
- عدم استفاده از تگ‌های HTML مناسب مثل <label> برای فرم‌ها.
- عدم توجه به کنتراست رنگ‌ها و عدم قابلیت خواندن متن‌ها برای کاربران کم‌بینا.
- عدم استفاده از متن جایگزین (Alt text) برای تصاویر، که پیشتر هم به آن اشاره شد.
استفاده نادرست از CSS و جاوااسکریپت
- استفاده بیش از حد از کلاس‌های عمومی در CSS که می‌تواند باعث تداخل شود.
- استفاده از جاوااسکریپت به جای CSS برای انیمیشن‌ها، که ممکن است باعث کاهش عملکرد شود.
عدم تست صحیح (Proper Testing)
- عدم تست کافی بر روی مرورگرها و دستگاه‌های مختلف.
- نادیده گرفتن تست واحد (Unit Testing) و تست‌های اتوماتیک.
عدم پیروی از معماری مناسب
- استفاده از ساختارهای پیچیده و غیرمنظم در پروژه.
- عدم جداسازی کدهای مربوط به منطق (Logic) و نمایش (Presentation).
عدم استفاده از ابزارهای مدرن و مفید
- عدم استفاده از ابزارهای بسته‌بندی مثل Webpack یا Parcel.
- نادیده گرفتن ابزارهای تحلیل کد مثل ESLint برای جاوااسکریپت و Stylelint برای CSS.
عدم مدیریت صحیح وضعیت (State Management)
- استفاده نادرست و پیچیده از وضعیت در اپلیکیشن‌های تک‌صفحه‌ای (Single Page Applications).
- عدم استفاده از کتابخانه‌های مدیریت وضعیت مانند Redux یا Context API در React.
عدم توجه به امنیت
- عدم استفاده از بهترین شیوه‌ها برای جلوگیری از حملات XSS و CSRF.
- عدم اعتبارسنجی مناسب ورودی‌های کاربر.
در پایان
توسعه‌دهندگان فرانت‌اند ممکن است به دلایل مختلفی دچار اشتباهات مرسوم شوند. این اشتباهات می‌توانند ناشی از عدم تجربه، عدم آگاهی از بهترین شیوه‌ها، یا حتی فشار زمانی باشند. در این مطلب سعی کردیم تا شما را با برخی از اصلی‌ترین این اشتباهات آشنا کنیم.
همچنین برای جلوگیری از این اشتباهات، توصیه می‌شود توسعه‌دهندگان به طور مداوم در حال یادگیری و به‌روز‌رسانی دانش خود باشند، از بهترین شیوه‌ها و ابزارهای مدرن استفاده کنند و پروژه‌های خود را به خوبی تست و بررسی نمایند.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید