### Google Search Console Setup

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Confirms Google Search Console is installed and correctly configured to monitor site presence in search results.

```APIDOC
Search Console:
  Status: Installed and correctly configured.
  Purpose: Monitor, maintain, and troubleshoot site's presence in Google Search results.
  Dependencies: Google account.
  Tools:
    - https://search.google.com/search-console/about
```

--------------------------------

### Google Analytics Setup

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Ensures Google Analytics is installed and correctly configured for website tracking.

```APIDOC
Google Analytics:
  Status: Installed and correctly configured.
  Purpose: Website traffic monitoring and analysis.
  Dependencies: Google Analytics account.
  Tools:
    - https://analytics.google.com/analytics/web/
    - http://www.gachecker.com/
```

--------------------------------

### BrowserConfig.xml for Windows Tiles

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

The minimum required XML markup for the `browserconfig.xml` file, defining various tile sizes and their corresponding image sources for Windows Start tiles.

```xml
<?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>
```

--------------------------------

### Preload CSS using loadCSS

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Provides an example of how to preload CSS files using the loadCSS utility from filament group. This technique helps to prevent render-blocking and improve perceived performance by loading non-critical CSS asynchronously.

```html
<!-- Example of preload CSS using loadCSS -->
<link rel="preload" href="path/to/your/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="path/to/your/styles.css"></noscript>
```

--------------------------------

### Windows Tiles Configuration

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Specifies the configuration for Windows tiles, linking to a `browserconfig.xml` file that defines tile sizes and icons for Windows devices.

```html
<!-- Microsoft Tiles -->
<meta name="msapplication-config" content="browserconfig.xml">
```

--------------------------------

### Performance Best Practices

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Optimizes website performance by setting goals for load times and file sizes, minifying HTML, implementing lazy loading, managing cookie sizes, and optimizing third-party components.

```APIDOC
Performance Goals:
  Description: Achieve specific performance metrics for user experience.
  Metrics:
    - First Meaningful Paint: Under 1 second
    - Time To Interactive: Under 5 seconds (average config, slow 3G), under 2 seconds (repeat visits)
    - Critical file size: Under 170Kb gzipped
  Resources:
    - Website Page Analysis: https://tools.pingdom.com
    - WebPageTest: https://www.webpagetest.org/
    - Size Limit: https://evilmartians.com/chronicles/size-limit-make-the-web-lighter

Minified HTML:
  Description: Ensure HTML is minified for faster loading.

Lazy loading:
  Description: Implement lazy loading for images, scripts, and CSS to improve initial response time.

Cookie size:
  Description: Limit cookie size to 4096 bytes and domain to 20 cookies.
  Resources:
    - RFC 6265: https://tools.ietf.org/html/rfc6265
    - MDN Cookies: https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
    - Browser Cookie Limits: http://browsercookielimits.squawky.net/

Third party components:
  Description: Replace third-party iframes or JS components with static alternatives where possible to limit external API calls and preserve privacy.
  Resources:
    - Simple sharing buttons generator: https://simplesharingbuttons.com/
```

--------------------------------

### Responsive Images with Srcset

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Guidance on using the `picture` and `srcset` attributes to deliver appropriately sized images based on the user's viewport. Improves performance and user experience.

```link
<link rel="stylesheet" href="https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/">
```

--------------------------------

### Image Optimization Tools

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

A collection of tools and services for optimizing images for the web, including format conversion, compression, and SVG optimization.

```link
<link rel="stylesheet" href="https://github.com/imagemin/imagemin">
<link rel="stylesheet" href="https://imageoptim.com/">
<link rel="stylesheet" href="https://www.keycdn.com/support/image-processing">
<link rel="stylesheet" href="https://tinypng.com/">
<link rel="stylesheet" href="http://quasimondo.com/ZorroSVG/">
<link rel="stylesheet" href="https://github.com/svg/svgo">
<link rel="stylesheet" href="https://jakearchibald.github.io/svgomg/">
```

--------------------------------

### Responsive Design Testing Tools

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Tools to test website responsiveness across various screen sizes and devices. Essential for ensuring a consistent user experience on all platforms.

```link
<link rel="stylesheet" href="http://ami.responsivedesign.is/">
<link rel="stylesheet" href="https://search.google.com/test/mobile-friendly">
<link rel="stylesheet" href="https://responsivedesignchecker.com/">
```

--------------------------------

### Preconnection with preconnect

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Performs DNS lookup, TCP handshake, and TLS negotiation with services in advance during idle time using preconnect. This reduces latency for future connections.

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

--------------------------------

### Preloading Resources with preload

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Loads critical resources needed for the current page (e.g., scripts at the end of body) in advance using preload. This ensures essential resources are available quickly.

```html
<link rel="preload" href="app.js" />
```

--------------------------------

### Apple Web App Meta Tags

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Configures how the web application appears when added to the home screen on Apple devices, including the touch icon and status bar style.

```html
<!-- Apple Touch Icon (at least 200x200px) -->
<link rel="apple-touch-icon" href="/custom-icon.png">

<!-- To run the web application in full-screen -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Status Bar Style (see Supported Meta Tags below for available values) -->
<!-- Has no effect unless you have the previous meta tag -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
```

--------------------------------

### Image Alt Text Best Practices

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Guidelines for writing effective alternative text for images. Crucial for accessibility and SEO, providing context for visually impaired users and search engines.

```link
<link rel="stylesheet" href="https://axesslab.com/alt-texts/">
```

--------------------------------

### Prefetching Resources with prefetch

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Requests resources that will be needed soon (e.g., lazy-loaded images) in advance during idle time using prefetch. This improves perceived performance by having resources ready.

```html
<link rel="prefetch" href="image.png" />
```

--------------------------------

### Lazy Loading Images

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Implements lazy loading for images to improve initial page load times. Includes a polyfill for native lazy loading support.

```javascript
import 'loading-attribute-polyfill';
```

--------------------------------

### DNS Resolution with dns-prefetch

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Resolves DNS of third-party services in advance during idle time using dns-prefetch. This helps to speed up subsequent requests to these services.

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

--------------------------------

### Meta Description Tag

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Provides a brief summary of the page's content for search engines and social media previews. It should be unique and under 150 characters.

```html
<!-- Meta Description -->
<meta name="description" content="Description of the page less than 150 characters">
```

--------------------------------

### HTML Sitemap Provision

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Confirms that an HTML sitemap is provided and accessible, typically linked from the website's footer.

```APIDOC
HTML Sitemap:
  Status: Provided and accessible via footer link.
  Purpose: Offer users an overview of the website's structure.
  Guidelines:
    - https://support.google.com/webmasters/answer/183668?hl=en
```

--------------------------------

### sitemap.xml Verification

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Checks for the existence of sitemap.xml and its submission to Google Search Console.

```APIDOC
sitemap.xml:
  Status: Exists and submitted to Google Search Console.
  Purpose: Help search engines crawl and index website content.
  Tools:
    - https://websiteseochecker.com/html-sitemap-generator/
```

--------------------------------

### Security Best Practices

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Ensures the website is secure by implementing HTTPS, HSTS, CSRF, XSS prevention, Content Type Options, X-Frame-Options, and Content Security Policy.

```APIDOC
HTTPS:
  Description: Use HTTPS on every page and for all external content.
  Resources:
    - Lets Encrypt: https://letsencrypt.org/
    - Free SSL Server Test: https://www.ssllabs.com/ssltest/index.html
    - Strict Transport Security: http://caniuse.com/#feat=stricttransportsecurity

HTTP Strict Transport Security (HSTS):
  Description: Set the HTTP header to 'Strict-Transport-Security'.
  Resources:
    - Check HSTS preload status: https://hstspreload.org/
    - OWASP HSTS Cheat Sheet: https://cheatsheetseries.owasp.org/cheatsheets/HTTP_Strict_Transport_Security_Cheat_Sheet.html
    - OWASP Transport Layer Protection Cheat Sheet: https://cheatsheetseries.owasp.org/cheatsheets/Transport_Layer_Protection_Cheat_Sheet.html

Cross Site Request Forgery (CSRF):
  Description: Ensure server-side requests are legitimate and originate from the website/app.
  Resources:
    - OWASP CSRF Prevention Cheat Sheet: https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Request_Forgery_Prevention_Cheat_Sheet.html

Cross Site Scripting (XSS):
  Description: Ensure the page or website is free from XSS vulnerabilities.
  Resources:
    - OWASP XSS Prevention Cheat Sheet: https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html
    - OWASP DOM based XSS Prevention Cheat Sheet: https://cheatsheetseries.owasp.org/cheatsheets/DOM_based_XSS_Prevention_Cheat_Sheet.html

Content Type Options:
  Description: Prevent browsers from MIME-sniffing the content type.
  Resources:
    - X-Content-Type-Options: https://scotthelme.co.uk/hardening-your-http-response-headers/#x-content-type-options

X-Frame-Options (XFO):
  Description: Protect against clickjacking attacks.
  Resources:
    - X-Frame-Options: https://scotthelme.co.uk/hardening-your-http-response-headers/#x-frame-options
    - RFC7034: https://tools.ietf.org/html/rfc7034

Content Security Policy:
  Description: Define allowed content sources and protect against clickjacking.
  Resources:
    - Content Security Policy Introduction: https://scotthelme.co.uk/content-security-policy-an-introduction/
    - CSP Cheat Sheet (Scott Helme): https://scotthelme.co.uk/csp-cheat-sheet/
    - CSP Cheat Sheet (OWASP): https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html
    - Content Security Policy Reference: https://content-security-policy.com/
```

--------------------------------

### Structured Data Implementation and Testing

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Validates that structured data is implemented correctly and passes testing without errors, aiding crawlers in understanding page content.

```APIDOC
Structured Data:
  Status: Tested and without errors.
  Purpose: Help crawlers understand page content.
  Technologies:
    - JSON-LD (https://json-ld.org/)
    - Microdata (https://www.w3.org/TR/microdata/)
  Testing Tools:
    - https://search.google.com/test/rich-results
  Vocabularies:
    - Schema.org Full Hierarchy (http://schema.org/docs/full.html)
```

--------------------------------

### RTL Language Support Resources

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Resources for understanding and implementing Right-to-Left (RTL) language support in web applications. Crucial for internationalization.

```link
<link rel="stylesheet" href="https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1/">
<link rel="stylesheet" href="https://hacks.mozilla.org/2015/10/building-rtl-aware-web-apps-websites-part-2/">
```

--------------------------------

### HTML5 Doctype Declaration

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Ensures the browser renders the page in HTML5 mode. This declaration must be the very first thing in your HTML document.

```html
<!doctype html><!-- HTML5 -->
```

--------------------------------

### Favicon Links

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Links to various favicon formats, including standard ICO, recommended PNG, and modern SVG. Favicons are essential for branding and site identification in browser tabs.

```html
<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- Recommended favicon format -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">
<!-- Recommended modern favicon format (not recommended for legacy browsers) -->
<link rel="icon" type="image/svg+xml" href="https://example.com/favicon.svg">
```

--------------------------------

### Heading Logic Check

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Verifies that heading text logically structures and helps users understand page content.

```APIDOC
Heading Logic:
  Purpose: Improve content understanding through logical heading structure.
  Tools:
    - http://khan.github.io/tota11y/#Try-it (Tota11y, tab Headings)
```

--------------------------------

### robots.txt Validation

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Ensures the robots.txt file is not blocking access to important webpages.

```APIDOC
robots.txt:
  Status: Not blocking webpages.
  Purpose: Control search engine crawler access to website sections.
  Tools:
    - https://www.google.com/webmasters/tools/robots-testing-tool
```

--------------------------------

### Pixel Perfect Chrome Extension

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

A Chrome extension to compare creatives with code implementation for design fidelity. Helps ensure visual consistency between design mockups and the actual website.

```link
<link rel="stylesheet" href="https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=en">
```

--------------------------------

### Viewport Meta Tag

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Configures the viewport for responsive web design, ensuring proper scaling and display across different devices. It's crucial for mobile-first development.

```html
<!-- Viewport for responsive web design -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
```

--------------------------------

### Page Title Tag

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Sets the title of the HTML document, which appears in the browser tab and is important for SEO. Keep titles concise, ideally under 55 characters.

```html
<!-- Document Title -->
<title>Page Title less than 55 characters</title>
```

--------------------------------

### Facebook Open Graph Meta Tags

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Essential and recommended Facebook Open Graph meta tags for social media sharing. Includes type, URL, title, image, description, site name, locale, and optional image dimensions for better rendering.

```html
<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">
<!-- Next tags are optional but recommended -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
```

--------------------------------

### Front-End Checklist Structure

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

This snippet outlines the structure and categorization of the Front-End Checklist. It details the different levels of flexibility (low, medium, high) for checklist items and the types of resources (documentation, tools, media) that may be included.

```markdown
# 🗂 Front-End Checklist

## How to use?

All items in the **Front-End Checklist** are required for the majority of the projects, but some elements can be omitted
or are not essential (in the case of an administration web app, you may not need RSS feed for example). We choose to use
3 levels of flexibility:

- ![Low][low_img] indicates that the item is recommended but can be omitted in certain situations.
- ![Medium][medium_img] indicates that the item is highly recommended but can potentially be omitted in very specific
  cases. However, omitting these elements can negatively impact performance or SEO.
- ![High][high_img] indicates that the item cannot be omitted under any circumstances. Removing these elements may
  result in page malfunctions or cause accessibility and SEO issues. Testing should prioritize these elements first.

Some resources possess an emoticon to help you understand which type of content / help you may find on the checklist:

- 📖: documentation or article
- 🛠: online tool / testing tool
- 📹: media or video content

## Head

> [!NOTE]
> You can find [a list of everything](https://github.com/joshbuchea/HEAD) that could be found in the `<head>` of an HTML document.
```

--------------------------------

### Twitter Card Meta Tags

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Standard Twitter Card meta tags for optimizing content display on Twitter. Includes card type, site and creator handles, URL, title, description, and image.

```html
<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="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">
```

--------------------------------

### Character Encoding Declaration

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Declares the character encoding for the document, typically UTF-8, which supports a wide range of characters. This should be one of the first meta tags in the `<head>`.

```html
<!-- Set character encoding for the document -->
<meta charset="utf-8">
```

--------------------------------

### Alternate Language and x-default Tags

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Uses rel="alternate" with hreflang attributes to indicate alternate language versions of a page and specifies a default version for international landing pages with hreflang="x-default".

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

```html
<link rel="alternate" href="https://example.com/" hreflang="x-default" />
```

--------------------------------

### CSS Linting with Stylelint

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Ensures all CSS or SCSS files are free of errors using Stylelint. This tool helps maintain code quality and consistency.

```bash
npm install stylelint --save-dev
npx stylelint "**/*.css"
```

--------------------------------

### HTML Language and Direction Attributes

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Specifies the language of the page content using the 'lang' attribute and the text direction (left-to-right or right-to-left) using the 'dir' attribute on the html tag.

```html
<html lang="en"></html>
```

```html
<html dir="rtl">
  <!-- ... -->
</html>
```

--------------------------------

### Critical CSS Implementation

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Embeds critical CSS (styles for above-the-fold content) directly within `<style>` tags before the main CSS file to improve perceived page load performance.

```html
<!-- Critical CSS -->
<style>
  /* Minified CSS for above-the-fold content */
</style>
<link rel="stylesheet" href="main.css">
```

--------------------------------

### Noscript Tag Usage

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Demonstrates the use of the `<noscript>` tag to provide fallback content when JavaScript is disabled or unsupported. This is crucial for accessibility and ensuring a basic user experience in such scenarios, particularly in client-side rendering heavy applications.

```html
<noscript> You need to enable JavaScript to run this app. </noscript>
```

--------------------------------

### JS Prefix for JavaScript Classes

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Demonstrates the use of 'js-' prefix for classes or IDs intended for JavaScript manipulation, ensuring separation from CSS styling. This convention helps maintain cleaner code and prevents accidental styling of elements controlled by JavaScript.

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

--------------------------------

### Canonical URL Tag

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

The rel="canonical" link relation specifies the preferred version of a web page to prevent duplicate content issues in search engine results.

```html
<!-- Helps prevent duplicate content issues -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-read.html">
```

--------------------------------

### CSS Validation

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Validates CSS code to ensure it conforms to W3C standards. Helps catch syntax errors and potential rendering issues.

```link
<link rel="stylesheet" href="https://jigsaw.w3.org/css-validator/">
```

--------------------------------

### ARIA Label for Accessibility

Source: https://github.com/thedaviddias/front-end-checklist/blob/main/README.md

Associates a label with an input form element when a visible label cannot be displayed. This is crucial for screen reader users.

```html
<input type="text" aria-label="Search input">
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.