Front End Developer Checklist

Gleb Letushov, a freelance editor , has adapted a checklist with David Dias's Github for the Netology blog. This checklist has already been translated, but since it is not on Habré, we decided that it would be useful. The checklist contains a complete list of items that need to be checked before launching and publishing the site.

The list is based on years of experience of front-end developers, and add-ons are compiled from publicly available sources.
')

Content

Head
HTML
Fonts
CSS
Images
Javascript
Security
Performance
Availability
SEO

How to use

All checklist items are required for most projects, but sometimes some of them can be omitted. For example, in the case of a administration web app, RSS is not useful.

Head

A list of elements from the Head section of an HTML document can be found on GitHub .

Meta tags

Doctype : Indicates the version of the HTML file and is located at the very beginning of the page. Doctype must specify the fifth version of HTML.

<!-- Doctype HTML5 --> <!doctype html>

W3C HTML5 page encoding definition .

The following three meta tags (Charset, X-UA Compatible and Viewport) must be placed on the top of the page immediately after the doctype:

Charset : the document encoding is UTF-8.

 <!--     --> <meta charset="utf-8">

X-UA-Compatible : controls the display of the page in Internet Explorer, so you need to set it.

 <!--  Internet Explorer       --> <meta http-equiv="x-ua-compatible" content="ie=edge"> <a href="https://msdn.microsoft.com/en-us/library/jj676915%28v=vs.85%29.aspx">

Determine the display of pages for Internet Explorer .

Viewport : The Viewport meta tag is set correctly.

 <!--   Viewport     --> <meta name="viewport" content="width=device-width, initial-s cale=1">

Title : The Title tag is used on all pages. Google calculates the length of the header, and cuts in output those that are larger than 472 pixels. The optimal length for the header is about 55 characters.

 <!--   Title --> <title>   65 </title>

The Title tag in the HTML document is MDN .
SERP Snippet Generator - creating a site description that Google will show on the search results page (for English text) .

Description : The description of the site inside the tag is unique and does not exceed 150 characters.

 <!--  Description --> <meta name="description" content="     150 ">

Description tag in HTML document - MDN .

Favicon : each favicon is correctly displayed. If there is only one file, favicon.ico, it should be placed in the root directory of the site. In this case, it is not necessary to refer to it in the HTML document. However, the reference to the favicon is better to indicate as in the example below. The optimal image format is. png , not .ico . Resolution - 32 × 32 px.

 <!--   --> <link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico"> <!--    --> <link rel="icon" type="image/png" href="https://example.com/favicon.png">

Favicon Generator - creating a favicon.
RealFaviconGenerator .
Guide on favicon on github .
Favicons, Touch Icons, Tile Icons, etc. Which do you need? - CSS Tricks .
PNG favicons - caniuse .

Apple Touch Icon : Apple touch icon is set to display on iOS devices. (The file resolution should be 200x200 px so that the icon is well displayed on all devices).

 <!-- Apple Touch Icon --> <link rel="apple-touch-icon" href="/custom-icon.png">

Configuring Web Applications .

Windows Tiles are listed as follows:

 <!-- Microsoft Tiles -->Browser configuration schema reference <meta name="msapplication-config" content="browserconfig.xml" />

The xml markup for the browserconfig.xml file looks like in the example:

 <?xml version="1.0" encoding="utf-8"?> <browserconfig>  <msapplication>    <tile>       <square70x70logo src="small.png"/>       <square150x150logo src="medium.png"/>       <wide310x150logo src="wide.png"/>       <square310x310logo src="large.png"/>    </tile>  </msapplication> </browserconfig>

Browser configuration schema reference .

Canonical attribute : use rel = "canonical" to avoid repetition of content.

 <!--       --> <link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">

Use canonical URLs - Search Console Help - Google Support .
5 common mistakes with rel = canonical - Google Webmaster Blog .

HTML tags

The lang : attribute must indicate the language of the current HTML page.

 <html lang="ru">

Direction : the text direction is set in a special HTML tag.

 <html dir="rtl">

dir - HTML - MDN .

Redirect to a page with another language : the value of the rel attribute is set to alternate.

 <link rel="alternate" href="https://es.example.com/" hreflang="es">

Conditional comments for Internet Explorer : set if necessary.

 <!–[if IE]>    Internet Explorer <![endif]–>

About conditional comments (Internet Explorer) - MSDN - Microsoft .

RSS : if you are preparing to launch a blog or website with articles, then do not forget to set the link to RSS.
Inline Critical CSS : Critical CSS is set - these are styles that are instantly loaded at the time of opening the page. Usually connects to the main CSS files using the Style tag.

Critical by Addy Osmani on Github - automates the creation of critical CSS.

Correct CSS call : all CSS files must be connected before JavaScript in the Head section. The exception is JS-files that are loaded asynchronously and located at the very top of the page.

Meta tags for social networks

It is advisable to add basic Facebook and Twitter meta tags to any website . Remaining tags can be added if necessary .

Facebook Open Graph : Facebook Open Graph (OG) tags are checked, configured and display the information you need. Image size must be at least 600 x 315 px, and better than 1200 x 630 px.

 <meta property="og:type" content="website"> <meta property="og:url" content="https://example.com/page.html"> <meta property="og:title" content="Content Title"> <meta property="og:image" content="https://example.com/image.jpg"> <meta property="og:description" content="Description Here"> <meta property="og:site_name" content="Site Name"> <meta property="og:locale" content="en_US">

A Guide to Sharing for Webmasters .
Check page with validator Facebook OG .

Twitter Card : should be configured as in the example below.

 <meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@site_account"> <meta name="twitter:creator" content="@individual_account"> <meta name="twitter:url" content="https://example.com/page.html"> <meta name="twitter:title" content="Content Title"> <meta name="twitter:description" content="   200 "> <meta name="twitter:image" content="https://example.com/image.jpg">

Getting started with cards - Twitter Developers .
Check website using Twitter card validator .

HTML

HTML5 semantic elements : HTML5 elements are used appropriately (header, section, footer, main ...).

HTML Reference is a handy instruction on HTML .

Error pages : pages created for 404 and 500 errors. Pages of the 500th error should include CSS styles (without external calls on the server).
Noopener : if the external link needs to be opened in a new tab using target = "_ blank" , then add the attribute rel = "noopener" to them . This will prevent theft of user data if the page of another site is used for phishing. For older versions of Firefox, set the attribute rel = "noopener noreferrer" .

About rel = noopener .

Comments : before publishing the page make sure to delete all comments and unnecessary code.

HTML Testing

W3C-validator : all pages of the site must be tested by the validator on the W3C site. It will help to find undetected errors in the HTML code.

W3C validator .

Making HTML-code : in order to correct the defects in the code and reduce its size, use a special service.

Dirty markup .

Check links on the page : all links are working and do not give 404 error during the transition.

W3C Link Checker .

Fonts

Connected font format: WOFF, WOFF2 and TTF formats are supported by all modern browsers.

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 .

Font weight : does not exceed 2 MB.

CSS

Read the CSS guide and the Sass guide , many leading front-end developers follow the rules described in these guides. If there are additional questions on CSS, the answers can be found on the CSS Reference .

Responsive design : responsive website layout.
Print with CSS : Print tables are configured correctly for each page.
Preprocessors : The page uses a CSS preprocessor ( Sass is preferable).
Unique ID : IDs on the page do not repeat.
Reset CSS : The page contains the actual CSS files to reset the standard browser styles (reset, normalize or reboot). Many CSS frameworks, such as Bootstrap or Foundation, include the Normalize.css file.

Reset.css .
Normalize.css .
Reboot

JS prefixes : all classes or id used in JS start with js and are not used to style through CSS.

 <div id="js-slider" class="my-slider"> <!-- Or --> <div id="id-used-by-cms" class="js-slider my-slider">

HTML Style Tag : Avoid using the Style tag to define styles inside an HTML page. In some cases, the use is justified, for example, to set the background for the slider.
Vendor Prefixes : Vendor CSS Prefixes solve compatibility issues with older browsers.

-webkit - Chrome and Safari,
-o - Opera;
-ms - Internet Explorer;
-moz - Mozilla.

Autoprefixer CSS online .

Performance

Combining CSS files : All CSS files are merged into one file. ( Not suitable for HTTP / 2 ).
Optimization : all CSS files are compressed.
CSS blocking the display of the site : make sure that the CSS files do not block the display of content, increasing the page load time.

loadCSS by filament group .
Example of preload CSS using loadCSS .

Unused CSS code : all extra code deleted.

UnCSS Online .
PurifyCSS .
Chrome DevTools Coverage .

CSS testing

Stylelint : all CSS and SCSS files without errors.

stylelint, a CSS linter .
Sass guidelines .

Responsive design : site pages tested for permissions: 320 px, 768 px, 1024 px (you can check on other permissions depending on the purpose of the site).
CSS Validator : found and fixed all the errors in the CSS files.

CSS Validator .

Browsers : site pages tested in popular browsers (Safari, Firefox, Chrome, Internet Explorer).
Mobile browsers : the site is tested in mobile browsers (Chrome, Safari ...).
OS : site tested in popular operating systems (Windows, Android, iOS, MacOS)
Pixel perfect : the page is as accurate as possible. Of course, not 100%, but still worth adhering to the template.

Pixel Perfect - Chrome Extension .

Reading direction : if the project needs support not only for languages that are read from left to right (left-to-right - LTR), but also for those that are read from right to left (right-to-left - RTL), then you need to check whether their website.

Building RTL-Aware Web Apps & Websites: Part 1 - Mozilla Hacks .
Building RTL-Aware Web Apps & Websites: Part 2 - Mozilla Hacks .

Images

To understand image optimization, check out Essential Image Optimization (in English) by Addy Osmani.

Optimization : All images are optimized for display in the browser. WebP format can be used on important pages, for example, on the main page.

Imagemin .
Free image optimization is possible using ImageOptim .

Picture / Srcset : The picture / srcset attributes are used to display the most appropriate picture at a given resolution (size) of the screen.

How to Build Responsive Images with srcset .

Retina : all images must have 2x or 3x resolution in order to display well on retina displays.
Sprite file : small pictures on the site are combined into one sprite file. This is a large image consisting of small pictures. If these are icons, then they can be combined into a sprite picture of the SVG format.
Width and height : if the required image dimensions are known in advance, then the width and height must be specified in the img attribute.
Image description : all img pictures should be described by words in the alt attribute.

 <img alt=' '>

Alt-texts: The Ultimate Guide .

Delayed loading of images : the site is configured so that images are not downloaded immediately, but as you scroll through the site.

Javascript

JavaScript code in separate files : there should not be any embedded JS code in the HTML document. It is better to simply provide a link to the code file.
Merge : JavaScript files are merged into one.
Optimization : all JavaScript files are minimized (you can add the .min suffix to the name).

Minify Resources (HTML, CSS, and JavaScript) .

JavaScript security :

Guidelines for Developing Secure Applications Utilizing JavaScript .

Async or defer : JavaScript files are loaded asynchronously using the async attribute, or use the defer attribute, which runs the script only after the page is fully loaded.

Remove Render-Blocking JavaScript .

Modernizr : if you need to add a specific function to the site, then you can use the Modernizr JS library. It determines which features of HTML, CSS, JS are supported by the user's browser.

Modernizr .

Javascript testing

ESLint : The javascript code was checked in ESLint, some bugs were fixed.

ESLint - The pluggable utility for javascript and jsx .

Security

Check out the site

securityheaders.io - checks HTTP security headers.
Observatory by Mozilla - Indicates a weak point in security.
ASafaWeb - Automated Security Analyzer for ASP.NET Websites .

HTTPS : HTTPS is used not only on all pages, but also for external elements - plug-ins, images.

Let's Encrypt - Free SSL / TLS Certificates .
Free SSL Server Test .
Strict Transport Security .

HTTP Strict Transport Security (HSTS) : HSTS configured to enforce the connection over HTTPS.

Check HSTS preload status and eligibility .
HTTP Strict Transport Security Cheat Sheet - OWASP .
Transport Layer Protection Cheat Sheet - OWASP .

Cross-site request forgery (CSRF) : to prevent CSRF, you must be sure that server requests originate from your site or application.

Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet - OWASP .

Cross-site scripting (XSS) : There should be no XSS requests on the page or site.

XSS (Cross Site Scripting) Prevention Cheat Sheet - OWASP .
DOM based XSS Prevention Cheat Sheet - OWASP .

Content Type Options : in Google Chrome and Internet Explorer, it prevents mime-sniffing attacks and mime types from being attempted to other than those stated on the server.

X-Content-Type-Options - Scott Helme .

X-Frame-Options (XFO) : site visitors are protected from clickjacking.

X-Frame-Options - Scott Helme .
RFC7034 - HTTP Header Field X-Frame-Options .

Performance

Page weight : each page weighs up to 500 Kb.

Website Page Analysis .
Size Limit: Make the Web lighter .

Optimization : HTML minimized.

W3C Validator .

Delayed loading of elements (Lazy loading) : images, scripts and CSS styles are loaded as you scroll the page to reduce the site recall time.
Cookies size : if you use cookies, then check that the size of each file is no more than 4096 bytes, and the total number of files does not exceed 20.

Cookie specification: RFC 6265 .
Cookies
Browser Cookie Limits .

Third-party components : third-party iframe frames and external JS scripts (for example, share buttons) are replaced with static elements, where possible. This limits the number of external API calls and keeps secret from third-party services the actions of users on your site.

Simple sharing buttons generator

Requests

Explanation of the following techniques .

DNS prefetch : DNS load times for other sites are reduced by using predictive pages with dns-prefetch .

 <link rel="dns-prefetch" href="https://example.com">

Preconnection : DNS lookup, TCP and TLS communication with services that will be needed soon, is done in advance during idle time with preconnect .

 <link rel="preconnect" href="https://example.com">

Prefetching : the resources that will be needed soon (for example, images when lazy loading) are loaded in advance by the browser and placed in the cache using prefetch .

 <link rel="prefetch" href="image.png">

Preloading : the resources that will be needed on the current page (for example, the scripts at the end of the Body tag) can be loaded using
preload .

 <link rel="preload" href="app.js">

Difference between prefetch and preload .

Performance testing

Google PageSpeed : all pages of the site (not only home) were tested on Google PageSpeed and scored at least 90 points out of 100.

Google PageSpeed .
Test your mobile speed with Google .
WebPagetest - Website Performance and Optimization Test .

Availability

View A11ycasts playlists with Rob Dodson (English).

Progressive enhancement : Most site features, such as navigation or search, should work with JavaScript turned off.

Enable / Disable JavaScript in Chrome Developer Tools .

Color Contrast : The site’s color contrast complies with the WCAG AA standard (for mobile AAA).

Contrast ratio .

Headlines

H1 : on all pages there is a headline H1, which is different from the name of the site given in title.
Headers : Headers are used in the correct order - from H1 to H6.

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

Landmarks

Role banner : the role = “banner” attribute is specified for the Header tag.
Role navigation : for Nav - attribute role = "navigation" .
Role main : for Main, the role = "main" attribute is specified.

Using ARIA landmarks to identify regions of a page .

Semantics

Different input types on HTML5 are used : this is important for mobile devices, because for different types of input they show different looking keyboards.

Mobile Input Types .

Forms

Label : associated with each individual input in the form elements. If the label cannot be displayed, you need to use aria-label.

Using the aria-label attribute - MDN .

Availability testing

Accessibility Test Standards : To test a page, use WAVE.

Wave testing .

Keyboard navigation : test your site using only the keyboard. All items on the site must be available for use.
Screen reader : all pages of the site should work in programs for reading information (VoiceOver, ChromeVox, NVDA or Lynx).
Focus : if the focus for elements is disabled, it is replaced with a visible state in CSS.

Managing Focus - A11ycasts # 22 .

SEO

Google Analytics : Google Analytics is installed and working correctly.
Headings : heading text helps to understand the information on the current page.
sitemap.xml : a sitemap.xml sitemap was created and sent to the Google Search Console (Google Webmaster Tools).
robots.txt : the robots.txt file does not block the site pages.

Check robots.txt using the Google Robots Testing Tool .

Structured data : help search engines to understand the information on the pages. Therefore, the pages must be tested and free of errors.

Introduction to Structured Data - Search - Google Developers .
Test the site using the Structured Data Testing Tool .
A full list of classes for structuring data can be found at Schema.org .

HTML sitemap : works and is available in the site footer.

Sitemap guidelines - Google Support .
Sitemap generator .

From the Editor

Online courses Netology on the topic:

the course “ HTML layout: from zero to the first layout ”;
the course “ Adaptive and Mobile Layout ”;
Profession " Frontend-developer ";
profession " Web developer ";
free course for beginners " HTML and CSS from scratch ".

Source: https://habr.com/ru/post/347740/

All Articles

Front End Developer Checklist

Content

How to use

Head

Meta tags

HTML tags

Meta tags for social networks

HTML

HTML Testing

Fonts

CSS

Performance

CSS testing

Images

Javascript

Javascript testing

Security

Check out the site

Performance

Requests

Performance testing

Availability

Headlines

Landmarks

Semantics

Forms

Availability testing

SEO

From the Editor

More articles: