Rachel Simone Weil, product manager for the new Microsoft Edge’s developer tools, recently gave a talk at OpenJS world addressing how the webhint tool suite supports web developers in implementing best practices.
Weil introduced webhint as an answer to the feedback she received from hundreds of web developers while working on the Microsoft Edge dev tools:
Making sites accessible, PWA-ready, with all of these sorts of up-to-the-minute best practices and latest features in place is really hard work.
[…] Webhint helps developers address the challenging and time-intensive parts of developing and debugging for the web.
Webhint self-describes as a customizable linting tool that helps developers improve sites’ accessibility, speed, cross-browser compatibility, and more by checking the authored code for best practices and common errors.
Webhint may run as a command-line application (that issues an HTML report with a short summary of findings) and can be integrated into a CI workflow. It is also available as a Visual Studio extension and may then display detected issues and recommendations directly in the IDE, while coding.
Webhint can also be installed as a browser extension (for Firefox, Edge and Chrome browsers) and allows developers to do on-demand runtime analysis on a page while debugging or after a page was deployed. Lastly, webhint can also be run from the webhint scanner site on any page without installing anything.
Hints are gathered in seven categories: performance, pitfalls, security, development, PWA, compatibility, and accessibility with a total of over 70 hints implemented at the time of writing this article.
Performance hints include analysis of image optimization, and javascript minification, detection of the presence of broken links, or how the web page relates to a web performance budget.
Development hints analyze how developers use development tools (e.g. bundlers, transpilers, optimizers). These include the analysis of a Babel, TypeScript, or Webpack config,
Compatibility hints include checking that CSS stylesheet limits are respected; or that CSS, HTML, and JavaScript on the page have not deprecated or use features that are not supported by the targeted browsers.
PWA hints include manifest validation. Accessibility hints help ensure that a site is usable via the keyboard, or that content has enough contrast for a good reading experience. Pitfall hints warn the developer about common gotchas and save them the debugging hours (Specify button type, No `createElement` with SVG, Prefixed CSS first, scoped-svg-styles hints).
The list of hints that developers want to apply can be configured via a .hintrc file. Custom hints can be added to the list of existing hints.
Weil’s talk includes a live demonstration of the usage and configuration of webhint and is available online.