Giter Club home page Giter Club logo

bestpracticeschromeextension's Introduction

Web Developer Checklist

A browser extension for Chrome, Firefox, Edge and Opera.

Build status

Screenshot Chrome

Download

Rules

Various checks are performed on a website to make sure best practices are met. Those checks are handled by the rules engine.

These are the rules:

SEO

Add meaning with microdata

Checks that either itemscope attributes or <script type="application/ld+json"> exist.

Meta description

Checks that <meta name="description" /> exist in the <head>.

Robots.txt exist

Checks if robots.txt exist in the root of the website.

Mobile

CSS media queries

Checks if @media exist in any linked stylesheet.

Viewport meta tag

Checks that <meta name="viewport" /> exist in the <head>.

Usability

Favicon

Checks that either <link rel="shortcut icon" /> or <meta itemtype="image"> exist in the <head>. If not, it checks if favicon.ico exist in the root of the website.

Use friendly URLs

Checks that the URL doesn't contain any URL parameters. Technically, it checks if a ? exist in the URL.

HTML validator

Runs HTML validation to ensure the website adhere to the W3C HTML standard.

Accessibility

WAI-ARIA Landmarks

Check that a role attribute exist on any element on the webste.

Use 'alt' attributes on images

Checks all images for missing alt attributes.

Environment integration

Twitter cards

Checks that <meta name="twitter:title" /> exist.

OpenGraph/Facebook

Checks that <meta property="og:*" /> exist on the website.

Windows

Checks that either <meta name="application-name" /> or <meta name="msapplication" /> exist.

Apple iOS

Checks that <link rel="apple-*" /> exist on the website.

Performance

Number of DOM elements

Checks that the number of DOM elements on the page doesn't exeed 2000.

Google PageSpeed score

Checks the page on Google PageSpeed Insights to make sure it gets a score of at least 90.

Developers

To fork and build your own copy of this extension, simply clone the repo and run npm run build.

bestpracticeschromeextension's People

Contributors

codingoutloud avatar filipechagas avatar jayatoptal avatar madskristensen avatar sayedihashimi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

bestpracticeschromeextension's Issues

OpenGraph Integration Test

In BestPracticesChromeExtension/app/popup/rules.js you have the opengraph test as

opengraph: { text: "OpenGraph/Facebook", result: document.querySelector("meta[name^='og:']") !== null },

Which looks for the any meta tags with a name starting with "og:" but per the http://ogp.me/ website the meta tag should be property not name

i.e.

<meta property="og:title" content="The Rock" />

This may lead to false result even though a site is following the guildlines.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.