چک لیست برنامه‌نویسی Front-End

۱۰ مهر ، ۱۳۹۸

این مقاله بر اساس سال ها تجربه در خصوص توسعه فرانت اند میباشد که چک لیست کاملی از کارهایی که قبل ار اهمیت اهمیت بالا آوردن وب سایت باید چک کنید را در اختیارتان میگذارد. این چک لیست از بخش های زیر تشکیل شده است:

    1. Head
    2. HTML
    3. Webfonts
    4. CSS
    5. Images
    6. JavaScript
    7. Security
    8. Performance
    9. Accessibility
    10. SEO

نحوه استفاده:

تمامی موضوعات داخل چک لیست برای اکثر پروژه ها مورد نیاز است.اما بعضی از آنها می توانند حذف شوند یا که ضروری نباشند.برای مثال شاید شما برای یک وب اپلیکیشن نیازی به RSS نداشته باشید. ما از 3 سطح اهمیت استفاده میکنیم:

اهمیت پایین به این معنی که اهمیت پایین دارند، توصیه میشود اما می تواند در بعضی از شرایط حذف گردد.

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

اهمیت بالا به این معنی که اهمیت اهمیت بالایی دارد و نمی تواند حذف شود.اولویت اول باید بر روی این عنصر باشد.

 

 

HTML

HTML5 Semantic Elements(عناصر اصلی html5 ): اهمیت بالا از عناصر اصلی html5 برای تقسیم صفحه استفاده کنیم مثل هدر و سکشن و فوتر.

 HTML Reference

 

Error pages(ارور صفحه ها): اهمیت بالاصفحه ارور 404 و5xx وجود داشته باشد. به یاد داشته باشید ارور 5xx داخل خود css هارو نگه دارد.

Noopener: اهمیت متوسطدر صورت استفاده از لینک های خارجی با "target="_blank لینک شما باید دارای خاصیت "rel="noopener باشد. برای جلوگیری کردن تب nabbing .

 About rel=noopener

 

Clean up comments(پاک کردن کامنت): اهمیت پایینقبل از ارسال و آپلود صفحه کامنت ها و کد های غیر ضروری حذف گردند.

W3C compliant (اعتبار سنجی صفحه): اهمیت بالاتمامی صفحه ها نیاز دارند تا در W3C اعتبار سنجی شوند تا در صورت وجود مشکل آن را برطرف کرد.

 W3C validator

 

HTML Lint: اهمیت بالا من از ابزارهایی برای کمک به تجزیه و تحلیل مسائل مربوط به کد استفاده میکنم.

 Dirty markup

 webhint

 

Link checker (چک کننده لینک ها): اهمیت بالاچک کنیم که لینک شکسته در صفحه نباشد نا با ارور 404 روبرو نشویم.

 W3C Link Checker

 

Ad Blockers test (تست بلاک کننده تبلیغات): اهمیت متوسط

 Use AdBlocking in your Dev Environment

 

Webfonts

Webfont format (فرمت وب فونت ها): اهمیت بالااز فرمت های WOFF,WOFF2 و TTF در صفحات خود استفاده کنید که همه مرورگر ها آن را ساپورت میکنند.

 WOFF - Web Open Font Format - Caniuse.

 WOFF 2.0 - Web Open Font Format - Caniuse.

 TTF/OTF - TrueType and OpenType font support

 Using @font-face - CSS-Tricks

 

Web Font size (سایز وب فونت ها): اهمیت بالا سایز وب فونت ها نباید بالاتر از 2 مگابایت باشد .

Webfont loader(بارگذاری وب فونت ها): اهمیت پایینبارگذاری وب فونت ها را کنترل می‌کند

 Typekit Web Font Loader

 

CSS

Responsive Web Design ( طراحی واکنش گرا): اهمیت بالاصفحات باید واکنشگرا باشند.

CSS Print: اهمیت متوسطهر صفحه stylesheet به درستی در صفحه های مربوط به خود جا داده شده باشند.

Preprocessors (پیش پردازنده ها): اهمیت پایین پروژه از پیش‌پردازنده‌هایی مثل sass , less استفاده کنند.

Unique ID( ایدی منحصر به فرد): اهمیت بالا اگر از آیدی استفاده میکنید آن منحصر به فرد باشد و در قسمت های مخصوص به کار روند.

Reset CSS(ریست css): از css ریست‌ها استفاده کنید مثل rest , normalize , reboot. اگر هم از فریم ورک مثل بوت استرپ و فاندیشن استفاده میکنید نرمالیزه داخل آن ها میباشد.

 Reset.css

 Normalize.css

 Reboot

 

JS prefix(پسوند جاوا اسکریپت): اهمیت پایینهمه کلاس ها یا آیدی ها که در جاوا اسکریپت استفاده میکنیم را با js شروع کنیم و از آنها در فایل css استفاده نکنیم.

embedded or inline CSS ( cssهای داخل سند html یا داخل خط کد): اهمیت بالااجتناب کردن از نوشتن استایل در خط کد یا داخل صفحه مگر برای کار های ضروری مثل عکس بکگراند در اسلایدر ها)

Vendor prefixes( پیشوند وندورها): اهمیت بالااستفاده از پیشوند های وندورها برای ساپورت تمام مرورگرها مثل -webkit

 Autoprefixer CSS online

 

Concatenation(تلفیق): اهمیت بالاتمام فایل های css در یک فایل تلفیق شوند.

Minification(فشرده سازی): اهمیت بالاتمام فایل ها فشرده شوند.

Non-blocking: اهمیت متوسط

Unused CSS ( cssهای بلا استفاده): اهمیت پایینهمگی حذف گردند.

Stylelint: اهمیت بالاهمه فایل های css و sass بدون ارور باشند.

 stylelint, a CSS linter

 Sass guidelines

 

Responsive web design (واکنشگرا): اهمیت بالاهمه صفحات در نقطه شکست ها بررسی شوند.برای همه دستگاه ها

Css validator (اعتبار سنج css): اهمیت متوسطفایل css اعتبار سنجی شود و مشکلات برطرف شوند.

Desktop Browsers(مرورگر هی دسکتاپ): اهمیت بالاهمه صفحات در مرو گر های دسکتاپ مثل کروم سافاری و موزیلا و … امتحان شوند.

Mobile browser(مرورگر موبایل): اهمیت بالاهمه صفحات در مرورگر های موبایل مثل کروم و سافاری تست شوند.

OS(سیستم عامل): اهمیت بالادر همه سیستم عامل ها تست شود. 

Reading direction( جهت خواندن): اهمیت بالاهمه صفحات در صورت نیاز در حالت های چپ به راست و راست به چپ تست شوند.

 

Images

برای درک کامل بهینه سازی تصاویر کتاب Essential Image Optimization  بخوانید.

Optimization(بهینه سازی): اهمیت بالاهمه عکس ها بهینه شوند برای لود سریع تر مرورگرها.

Picture/Srcset: اهمیت متوسطاز srcset مناسب کاربر در پروژه ها استفاده کنید.

 How to Build Responsive Images with srcset

 

Retina(رتینا): اهمیت پایینبرای صفحه نمایش‌های retina از قالب عکس‌های 2x استفاده کنید.

Sprite: اهمیت متوسط

Width and Height( طول و ارتفاع): اهمیت بالااگر سایز نهایی عکس ها را می‌دونید آنها را با خاصیت width و height نشان دهید.

Alternative text (متن جایگزین): اهمیت بالاتمام عکس ها خصوصیت alternative را دارا باشند. 

Lazy load(لیزی لود): اهمیت متوسط عکس ها به صورت لیزی لود بارگذاری شوند.

 

JavaScript

JavaScript Inline(جاوا اسکریپت داخل خط کد): اهمیت بالاهیچ کد جاوا اسکریپتی به صورت این لاین و داخل کد html نوشته نشده باشد.

Concatenation تلفیق: اهمیت بالاهمه فایل های جاوا اسکریپت تلفیق شوند.

Minification فشرده سازی: اهمیت بالاهمه فایل های جاوا اسکریپت فشرده شوند و با min به اخر اسم فایل آنها را مشخص نمایید.

 Minify Resources (HTML, CSS, and JavaScript)

 

JavaScript security(امنیت جاوا اسکریپت): اهمیت بالا

 Guidelines for Developing Secure Applications Utilizing JavaScript

 

noscript tag (تگ noscript): اهمیت متوسطدر داخل تگ noscript پیغامی می‌نوسیم که در صورت غیر فعال بودن جاوا اسکریپت مرورگر یا ساپورت نکردن آن مرورگر آن پیغام ا نمایش دهد.

Non-blocking (غیر مسدود سازی): اهمیت متوسط فایل های جاوا اسکریپت میتوانند با خاصیت async غیر همسان بارگزاری شوند یا با خاصیت deferred دیرتر بارگزاری شوند.

 Remove Render-Blocking JavaScript

 

Optimized and updated JS libraries(بهینه سازی و اپدیت کتابخانه های جاوا اسکریپت): اهمیت متوسط تمام کتابخانه های مورد استفاده در پروژه به آخرین نسخه بروزرسانی شوند.

 You may not need jQuery

 Vanilla JavaScript for building powerful web applications

 

ESLint(تست جاواسکریپت): اهمیت بالاتست با ESLint و نداشتن خطا و ارور

 ESLint - The pluggable linting utility for JavaScript and JSX

 

Performance

(اهداف برای دستیابی) Goals to achieve: اهمیت متوسطصفحات شما باید به این اهداف برسند:

نشان دادن اولین المان زیر یک ثانیه فایل های مهم gzip زیر 170 کیلوبایت باشد.

Minified HTML(فشرده سازی html): اهمیت متوسطفایل اج تی ام ال شما باید کوچک شده باشد.

Lazy loading(لیزی لود): اهمیت متوسطتصاویر، اسکریپتها و CSS باید به صورت لیزی لود باشند تا زمان پاسخ بهتر شود. 

Cookie size (سایز کوکی): اهمیت متوسطاگر از کوکی ها استفاده می کنید باید مطمئن شوید که هرکوکی 4096 بایت را بیشتر نمیگیرد و نام دامنه شما بیش از 20 کوکی ندارد.

 Cookie specification: RFC 6265

 Cookies

 Browser Cookie Limits

 

Third party components (کامپوننت های شخص سوم): اهمیت متوسطفریم های شخص سوم یا کامپوننت های وابسته به JS خارجی(مانند دکمه های به اشتراک گذاری) با کامپوننت های استاتیک جایگزین شوند ، این محدودیت ها برای API خارجی باعث حفظ حریم شخصی کاربر شما می شود.

 Simple sharing buttons generator

 

Google PageSpeed (تست صفحه ها با گوگل تست سرعت): اهمیت بالاتمام صفحات سایت چک شوند ( نه فقط صفحه اصلی) و امتیاز صفحات باید بالای 90 از 100 باشد.

 Google PageSpeed

 Test your mobile speed with Google

 WebPagetest - Website Performance and Optimization Test

 GTmetrix - Website speed and performance optimization

 Speedrank - Improve the performance of your website

 

Accessibility

Progressive enhancement (بالا بردن بهره وری): اهمیت متوسطقابلیت های عمده مانند ناوبری اصلی و جستجو باید بدون جاوا اسکریپت کار کنند.

 Enable / Disable JavaScript in Chrome Developer Tools

 

Color contrast: اهمیت متوسطکنتراست رنگ حداقل باید WCAG را AA پاس کند.(AAA برای موبایل)

 Contrast ratio

 

Headings (تگ هدینگ): اهمیت بالاهدینگ ها باید به درستی و اهمیت ها باشد.از h1 تا h6

 Why headings and landmarks are so important -- A11ycasts #18

 

Specific HTML5 input types are used(از ورودی های خاص html5 استفاده گردد): اهمیت متوسطاین یک موضوع مهم به ویژه برای موبایل ها میباشد که باید صفحه کلید سفارشی و ویجت ها را برای انواع مختلف از آنها نشان دهد.

 Mobile Input Types

 

Form Label (برچسب ها): اهمیت بالایک برچسب با هر عنصر فرم ورودی مرتبط است. در صورتی که یک برچسب نمایش داده نشود، به جای آن از aria-label استفاده کنید.

 Using the aria-label attribute - MDN

 

Accessibility standards testing(تستهای استاندارد دسترسی پذیری): اهمیت بالااز ابزار WAVE برای تست استفاده کنید و اینکه آیا صفحه شما به استانداردهای دسترسی پذیری احترام می گذارد با خیر.

 Wave testing

 

Keyboard navigation: اهمیت بالاوب سایت خود را فقط با صفحه کلید تست کنید و ببینید که آیا همه ی المان ها با صفحه کیبورد به درستی کار می کنند یا خیر.

Screen-reader(صفحه خوان): اهمیت متوسطتمام صفحات در صفحه خوان تست شوند (VoiceOver, ChromeVox, NVDA or Lynx). 

Focus style(استایل فوکوس): اهمیت بالا اگر استایل فوکوس را غیر فعال کردید آن را در css فعال کنید.

 

SEO

Google Analytics(گوگل آنالیک): اهمیت بالاگوگل آنالیز نصب شده باشد و تنظیماتش به درستی وارد شده باشد.

 Google Analytics

 GA Checker (and others)

 

Headings logic(منطق تگ هدینگ): اهمیت متوسطتگ های هدینگ کمک میکند تا بفهمیم چه محتوایی در این صفحه میباشد.

 Tota11y, tab Headings

 

Sitemap.xml: اهمیت بالاباید وجود داشته باشد و به کنسول جستجوی Google ارائه شود.

Robots.txt: اهمیت بالا

Structured Data(ساختار داده ها): اهمیت بالاصفحات با استفاده از داده های ساختاری تست شده و بدون خطا باشند. داده های ساختاری به خزنده موتور جست و جو گر ها کمک می کند محتوای در صفحه فعلی را درک کند.

 Introduction to Structured Data - Search - Google Developers

 RDFa - Linked Data in HTML

 JSON-LD

 Microdata

 Test your page with the Structured Data Testing Tool

 Complete list of vocabularies that can be used as structured data. Schema.org Full Hierarchy

 

Pagination link tags(تگ صفحه بندی): اهمیت متوسط rel=prev و rel=next داخل محتوای چند صفحه ای استفاده کنید.

 Pagination (rel="prev/next") Testing Tool

 Pagination guidelines - Google Support

 

 

 


میانگین آرا:
92% (5 نفر)
رای دهید:
مقالات مرتبط
مشاهده بیشتر...