11 اشتباه متداول توسعه دهندگان فرانت اند Front-end

توسعه دهندگان فرانت اند Front-End عناصر ظاهری و کدهای نوشته شده توسط برنامه نویسان بک اند Back-End را با یکدیگر ترکیب می کنند و برای این کار 3 ابزار اساسی کدهای HTML، CSS و جاوا اسکریپت را مورد استفاده قرار می دهند. کدهای HTML برای توسعه ساختار منطقی صفحات وبسایت استفاده می شوند در حالی که کدهای CSS در راستای عملکرد و رندرینگ صفحات مورد استفاده قرار می گیرند.

جاوا اسکریپت نیز از اهمیت بالایی در برنامه نویسی فرانت اند برخوردار است به گونه ای که عناصر تعاملی و ارتباطی صفحات وبسایت را برای توسعه دهندگان به ارمغان می آورد. البته زمانی که توسعه دهندگان فرانت اند در روند برنامه نویسی دچار اشتباه شوند، ارتباط بین این 3 تکنولوژی متوقف شده و مشکلات زیادی برای ادامه فرآیند توسعه به وجود می آید. امروز در داناپ به 11 مورد از اشتباهات متداول برنامه نویسان Front-End را به شما معرفی می کنیم پس تا انتهای این مطلب با ما همراه باشید.

11 اشتباه متداول توسعه دهندگان Front-End

1- عدم توجه به جزییات :

برنامه نویسان فرانت اند در هنگام پیاده سازی طرح های مربوطه تا حد ممکن به تمام جزییات توجه می کنند اما بعضی اوقات استفاده از طرح های جذاب مد نظر آنها به دلایل مختلف از جمله ریسپانسیو نبودن امکان پذیر نیست. در این صورت صفحات ایجاد شده توسط توسعه دهندگان فرانت اند خراب و غیرعادی به نظر می رسند.

این مشکل معمولا زمانی اتفاق می افتد که ابزارهای طراحی نظیر XD یا Zeplin در مقایسه با یک مرورگر، عناصر طراحی شده را به شکل دیگری ترجمه کنند که این موضوع در نهایت باعث ایجاد اختلاف بین دو نسخه از طراحی می شود. البته توسعه دهندگان Front-End می توانند عناصر طراحی را با یکدیگر مقایسه کرده و تفاوت های جزئی آن را شناسایی و برطرف کنند.

به خاطر داشته باشید که این فرآیند مستلزم مهارت است بنابراین سعی کنید همواره نظرات و بازخورد دیگران مخصوصا طراحان را درباره صفحات وبسایت جویا شوید. در حقیقت آنها از لحاظ ذهنی آشنایی بیشتری با مفاهیم و اصول رابط کاربری (UI) و تجربه کاربری (UX) دارند بنابراین تفاوت های بسیار کوچک را نیز متوجه می شوند.

2- عدم سازگاری صفحات :

امروزه حدود نیمی از جمعیت جهان از تلفن های هوشمند استفاده می کنند و طبق پیش بینی CNBC تا سال 2025 حدود 72% از این جمعیت فقط از طریق موبایل خود به محتوای وب دسترسی پیدا خواهند کرد. اگرچه این پیش بینی ممکن است به وقوع نپیوندد اما با توجه به همه گیر شدن استفاده از تلفن های همراه در چند سال گذشته چندان دور از ذهن هم به نظر نمی رسد.

بنابراین امروزه قابلیت واکنش پذیری یا همان ریسپانسیو بودن صفحات یک وبسایت امری اجتناب ناپذیر به شمار می رود. البته توسعه دهندگان فرانت اند باید زمان صحیح استفاده از این قابلیت را نیز بلد باشند. برخی از توسعه دهندگان فرانت اند در ابتدا طرح های خود را اجرا کرده و این مرحله را در آخر پروژه انجام می دهند ولی از آنجایی که همواره بر روی یک مجموعه کار می کنند، فقط یک رزولوشن صفحه در اختیار آنها قرار دارد.

در حقیقت کار بر روی ریسپانسیو بودن صفحات مستلزم اجرای تست ها و تغییرات بسیار وقت گیر است. بنابراین سعی کنید از همان ابتدای پروژه با استفاده از ابزارهای کاربردی نظیر ViewPoint ادامه کار را برای خود راحت کنید.

3- عدم سازگاری با مرورگرهای مختلف :

اگرچه بیشتر مرورگرهای جدید بر اساس یک استاندارد واحد کار می کنند ولی قابلیت اجرا در مرورگرهای مختلف مخصوصا Internet Explorer همچنان یکی از دغدغه های اصلی برنامه نویسان فرانت اند به شمار می رود. در حقیقت از آنجایی که هر مرورگر صفحات را به شکل متفاوتی رندر می کند، توسعه دهندگان فرانت اند باید صفحات وبسایت را در هرکدام از مرورگرهای موجود نیر تست کنند.

این کار یک فرآیند طولانی مدت به شمار می رود چرا که توسعه دهندگان باید این آزمایش را با رزولوشن های متفاوت در هر مرورگر انجام دهند. اما اگر به عنوان طراح Front-End تجربه کاربری برای شما اهمیت دارد باید این کار را با صبر و حوصله کافی انجام دهید.

4- HTML یا XHTML تاریخ گذشته :

یکی دیگر از اشتباهات رایج برنامه نویسان فرانت اند تناقض در سینتکس کدهای HTML است. کدهای HTML5 در مقایسه با HTML4 یا XHTML دارای سینتکس بسیار متفاوت و در عین حال ساده ای هستند. برای مثال عناصر Void نظیر “input” ، “br” یا “img” جایگزین تگ های تکی (Self-Closing) شده اند.

اگرچه به کار بردن تگ های تکی بر روی صفحات تاثیر نمی گذارد اما نباید به صورت متناوب از آنها استفاده شود. به طور کلی پیشنهاد ما به شما این است که سینتکس HTML5 را یاد گرفته و از آن استفاده کنید.

5- Semantic اشتباه HTML :

استاندارد HTML5 همچنین عناصر معنایی بی شماری دارد که به طراحان در توسعه ساختار منطقی و ایندکس کردن هر چه بهتر صفحات کمک می کند. البته برخی از توسعه دهندگان مبتدی تمایلی به استفاده از عناصر سمانتیک “from”، “article” و “table” ندارند و معمولا از عناصر غیر سمانتیک نظیر “div” استفاده می کنند. این کار یک عمل وقت گیر و غیر ضروری محسوب می شود. البته شما می توانید مشکلات مربوط به گزینه 4 و 5 را با استفاده از Validatorهای موجود در یک IDE یا ویرایشگر کد برطرف کنید.

6- عدم اعتبار سنجی Input :

طراحان فرانت اند معمولا فرض را بر این می گذارند که کاربران همواره ورودی های مورد نظر را در مکان درست خود قرار می دهند. اما این یک فرضیه اشتباه است بنابراین توصیه می شود که همیشه اعتبار سنجی Input توسط طراحان انجام شود. این کار باعث می شود که داده ها در فرمتی صحیح در دیتابیس ذخیره شوند، علاوه بر این تجربه کاربری را بهبود می بخشد.

مهم تر از همه اعتبار سنجی Input امنیت صفحات را ارتقا می دهد و از بروز حملات XSS، اختلال در سیستم و نشت حافظه مموری جلوگیری به عمل می آورد.

7- سئوی ضعیف :

نیمی از سئو در نحوه نگارش کدها خلاصه می شود بنابراین طراحان فرانت اند باید تمامی نکات مربوط به سئو را در پروژه های خود رعایت کنند. با این حال هنوز هم برخی از توسعه دهندگان نکاتی مانند استفاده از ویژگی alt برای تصاویر سایت را از قلم می اندازند.

مشکل اصلی در حقیقت این است که خزندگان موتورهای جستجو، مرتبط بودن تصاویر با محتوای وبسایت را از طریق بررسی ویژگی alt تشخیص می دهند. تصاویر بدون تگ alt کاملا تزئینی محسوب می شوند بنابراین موتورهای جستجو از پردازش آنها چشم پوشی کرده و در نتایج خود به کاربران نمایش نمی دهند.

یکی دیگر از اشتباهات رایج در این بخش عدم استفاده از تیترهای مناسب است. برای مثال استفاده از تیتر H3 به جای H1 به علت زیبایی ظاهری بیشتر موجب به هم ریختن ساختار صفحات می شود و خزنده های موتورهای جستجو آن را به عنوان یک امتیاز منفی برای وبسایت شما در نظر می گیرند.

در آخر باید از سلامت لینک های داخلی و خارجی صفحات اطمینان حاصل کنید. لینک های معیوب به عنوان یک خطا توسط خزنده های موتورهای جستجو گزارش می شوند. شما می توانید با استفاده از ابزارهایی نظیر Google Search Console یا افزونه کروم Check My List مشکلات لینک های موجود در صفحات را به راحتی شناسایی و برطرف کنید.

8- عدم بهینه سازی تصاویر :

در صورت عدم بهینه سازی تصاویر، بارگذاری آنها در صفحات وب فضای بسیار زیادی را به خود اختصاص می دهد. البته به خاطر داشته باشید که فرآیند فشرده سازی نباید بر روی تمام تصاویر اعمال شود چرا که کیفیت برخی از آنها به شدت افت پیدا می کند اما حجم برخی از موارد نظیر تصاویر Thumbnail نباید بی دلیل بالا باشند. بهینه سازی تصاویر یک فرآیند بسیار ساده است به گونه ای که شما می توانید با استفاده از ابزارهای آنلاین این کار را انجام دهید.

9- وابستگی بیش از حد به jQuery :

فریم ورک jQuery در یک برهه زمانی محبوبیت بسیار بالایی در بین طراحان فرانت اند داشت به گونه ای که آنها برای افزودن انیمیشن یا دستکاری DOM از این فناوری استفاده می کردند. امروزه فریم ورک هایی نظیر AngularJS و ReactJS تمام قابلیت های jQuery را در اختیار طراحان قرار می دهند، بنابراین استفاده از فریم ورک jQuery در بسیاری از پروژه های برنامه نویسی منسوخ شده است.

به طور کلی یادگیری و آشنایی با فریم ورک jQuery یا هر کتابخانه دیگر خوب است اما به یاد داشته باشید که وابستگی بیش از حد به آنها به ضرر شما تمام می شود.

10- استفاده از یک فایل HTML :

برخی از توسعه دهندگان تمام فایل های CSS، HTML و جاوا اسکریپت را در یک فایل قرار می دهند که در زمان انجام تست مشکلات بسیاری را برای آنها به وجود می آورد. اولین قدم برای جلوگیری از بروز این مشکل انتقال فایل های JS به یک فولدر خارجی است. قدم دوم آشنایی با عناصر وب بومی (Native Web) است. شما با یادگیری این مبحث می توانید معماری پروژه خود را بهبود دهید و تست های Unit را به راحتی اجرا کنید. استفاده از فریم ورک هایی نظیر Vue js و React نیز به شما در اجرای عناصر ماژولار کمک می کنند.

11- استفاده اشتباه از AutoPlay :

شاید برای شما هم پیش آمده باشد که یک موسیقی یا ویدئوی تصادفی به صورت ناگهانی در هنگام باز کردن یک وبسایت برایتان پخش شود. طراحان فرانت اند در برخی از مواقع برای شوکه کردن کاربران این کار را انجام می دهند اما برای از کار انداختن آنها از مولفه autoplay در تگ های ویدیو استفاده می کنند:

مشکلی که در این بخش وجود دارد این است که autoplay در دسته متغیرهای بولین (Boolean) قرار نمی گیرد بنابراین به صورت True or False کار نمی کند؛ به عبارت دیگر مرورگر این رشته تگ را مشاهده کرده و بدون توجه به عبارت false فایل ویدیویی را به صورت خودکار پخش می کند.

بیشتر مرورگرهای مدرن معمولا تنظیمات autoplay را به صورت پیش فرض در حالت خاموش قرار می دهند. اما به طور کلی پاک کردن Attitude یا استفاده از عباراتی نظیر autostart که با متغیرهای بولین سازگاری دارند بهترین راه حل های جلوگیری از این مشکل به شمار می روند.