O’Reilly Web Platform The Little Book of Website Quality Control Jens Oliver Meiert The Little Book of Website Quality Control by Jens Oliver Meiert Copyright © 2017 Jens Oliver Meiert All rights reserved Printed in the United States of America Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472 O’Reilly books may be purchased for educational, business, or sales promotional use Online editions are also available for most titles (http://safaribooksonline.com) For more information, contact our corporate/institutional sales department: 800-998-9938 or corporate@oreilly.com Editor: Meg Foley Production Editor: Shiny Kalapurakkel Copyeditor: Octal Publishing, Inc Interior Designer: David Futato Cover Designer: Karen Montgomery October 2016: First Edition Revision History for the First Edition 2016-09-20: First Release The O’Reilly logo is a registered trademark of O’Reilly Media, Inc The Little Book of Website Quality Control, the cover image, and related trade dress are trademarks of O’Reilly Media, Inc While the publisher and the author have used good faith efforts to ensure that the information and instructions contained in this work are accurate, the publisher and the author disclaim all responsibility for errors or omissions, including without limitation responsibility for damages resulting from the use of or reliance on this work Use of the information and instructions contained in this work is at your own risk If any code samples or other technology this work contains or describes is subject to open source licenses or the intellectual property rights of others, it is your responsibility to ensure that your use thereof complies with such licenses and/or rights 978-1-491-96633-4 [LSI] Foreword Website quality is often an overlooked and underrated web development topic I could go on about my personal philosophy, but what matters most is the person who shaped and guided my website quality ideology perhaps more than any other developer with whom I’ve ever worked: Jens Oliver Meiert Over the years, I’ve followed Jens through his ideas, blog posts, and books When I finally got the chance to work closer with him, I began to really understand his philosophy behind developing and maintaining websites alongside his relentless focus on quality We spent lots of time debating the merits of what quality meant, championing its importance, and making it work in fast-paced environments in which quality is more commonly a convenience rather than a requirement He was first to begin promoting the positive impact of quality on development, performance, collaboration, and overall maintenance in large web development teams To operate at scale, the focus switched from policing to advocating for quality while centering efforts around establishing value behind tools and automation For Jens, quality became a benchmark of professionalism and symbol of craftsmanship that still holds true today This little book is a glimpse into the world of website quality from the perspective of a passionate developer who strives to educate other developers and improve websites You will learn everything from topics related to website quality, putting it in practice, and the tools to help with the process Kevin Khaw Acknowledgments Quality, as this book aims to show, is such an important matter that it would be surprising if I, writing about the very subject, could not name the people to whom I’m indebted Lars Röwekamp and Jens Schumann, executives of Open Knowledge GmbH in Oldenburg, Germany — where I learned to improve my code — are the first to come to my mind Yet, as an important goal and a sign of professionalism, the mindset of quality comes close to ideas like “if something’s worth doing, it’s worth doing well,” too This little book would not exist were it not for old role models and old sayings, as well as for all the people who have made it reality For that, I want to thank very much my former colleague, manager, and good friend Kevin Khaw for the Foreword Finally, I want to recognize the entire O’Reilly team for their swift, competent, and kind help When this book turns out well, it will have been because of them Thank you all The Little Book of Website Quality Control Introduction There’s always something professional about doing a thing superlatively well Colonel Pickering, in George Bernard Shaw’s Pygmalion What is a good website? For us web professionals, this is a most important question Building good websites is part of our professional ethics, stemming from a code of honor that asserts that we can be professionals only if our work is good But how we know that our work — that our websites — are good? Many criteria and examinations come to mind, but there is actually an entire field dedicated to informing us: quality management Quality management, which can be broken down into quality planning, quality control, quality assurance, and quality improvement, comes with a host of methods to not just identify (control) and fix (improvement) defects, but to avoid them systematically (planning, assurance) This little book, which is the third in a series of books that cover important components of modern web development (after web frameworks and coding standards), focuses mostly on the quality control piece, for if we can’t “see” what’s wrong, we won’t fix or plan to avoid what’s wrong Still, it’s going to share advice on how to tie quality to our processes, for it is more useful to learn how to fish than to hope to be fed every day The book will all of this in a loose and relaxed manner, however, and not to the extent ISO standards would cover quality Finally, and although this should matter only in few instances, the book hinges more on websites rather than web apps That distinction is usually relevant when it comes to standards and development best practices, but there are some differences in how one should go about quality checking of sites as opposed to apps What follows will work slightly better and allow for more complete quality control of websites This is a little book, then, because it’s short Let’s leave the intro behind Code Formatter (Pretty Printer) (http://www.prettyprinter.de/) “Cognitive Walkthrough for the Web” Tools (http://bit.ly/2cBu5ED) Colorblind Web Page Filter (http://colorfilter.wickline.org/) Color Contrast Analysis (Jonathan Snook) (http://bit.ly/2cmljIc) Color Contrast Analysis (WCAG Contrast Checker; Gecko browser extension) (https://mzl.la/2cmVY1A) Color Contrast Analysis (WebAIM) (http://webaim.org/resources/contrastchecker/) Color Deficit Emulation (http://www.vischeck.com/vischeck/vischeckURL.php) Color Selector (http://bit.ly/2cGbe9P) Cookie Editor (WebKit browser extension) (http://bit.ly/2ctdnGQ) CSR Decoder (https://www.sslshopper.com/csr-decoder.html) CSS Accessibility Analysis (http://bit.ly/2cWIADz) CSS Analysis (http://cssstats.com/) CSS Compressor (http://hell.meiert.org/aux/compress/css/gui/) CSS Formatter (CSS Portal) (http://bit.ly/2cl8H2K) CSS Formatter (Lonnie Best) (http://bit.ly/2cKq91z) CSS Linter (http://csslint.net/) CSS Optimizer and Formatter (CSS Beautifier) (http://bit.ly/2ccoJ1v) CSS Optimizer and Formatter (CSScomb) (http://csscomb.com/online/) CSS Validator (W3C) (http://jigsaw.w3.org/css-validator/) CSS Validator (WDG) (http://www.htmlhelp.com/tools/csscheck/) DAML Validator (http://www.daml.org/validator/) Design Responsiveness Test (http://responsivepx.com/) DNS Analysis (https://cloudmonitor.ca.com/en/dnstool.php) DNS Propagation Check (https://www.whatsmydns.net/) Download Time Calculator (http://www.whytehouse.com/opener.html) Edge Compatibility Test (http://doesitworkonedge.com/) Email Blacklist Check (http://mxtoolbox.com/blacklists.aspx) Font Combinator (http://font-combinator.com/) Font Comparison (http://www.typetester.org/) Font Determiner (WhatFont; WebKit browser extension) (http://bit.ly/2cUTmY6) Font Determiner (WhatTheFont) (http://www.myfonts.com/WhatTheFont/) Font Fallback Determiner (bookmarklet) (http://ffffallback.com/) FTP Server Test (https://www.dotcom-tools.com/ftp-server-test.aspx) Golden Ratio Typography Calculator (http://www.pearsonified.com/typography/) Google Webmaster Guidelines Check (https://varvy.com/) hCalendar Generator (http://microformats.org/code/hcalendar/creator) hCard Generator (http://microformats.org/code/hcard/creator) hCard Validator (http://hcard.geekhood.net/) htaccess Validator (http://bit.ly/2cqOs3D) HTML Compatibility Check for XHTML (http://qa-dev.w3.org/appc/) HTML Compressor (http://htmlcompressor.com/compressor/) HTML Compressor (html-minifier) (http://bit.ly/2cUUjQ8) HTML Formatter (http://bit.ly/2cpa6qj) HTML, CSS, and Conformance Validator (http://validator.w3.org/unicorn/) HTML, CSS, and JS Formatter (https://www.dirtymarkup.com/) HTML Outline Extractor (http://gsnedders.html5.org/outliner/) HTML Validator (W3C) (http://validator.w3.org/) HTML Validator (WDG) (http://bit.ly/2cBBH9X) HTML Validator (http://html5.validator.nu/) HTTP Header Editor (Request Maker; WebKit browser extension) (http://bit.ly/2cWGNOH) HTTP Header Editor (Tamper Data; Gecko browser extension) (https://mzl.la/2coxG7D) HTTP Header Test (http://www.rexswain.com/httpview.html) HTTP Header Test (Advanced) (http://bit.ly/2ctczOY) Image and Link Analysis (http://bit.ly/2cKgyaV) Internationalization Check (http://bit.ly/2ccmF9Q) Internet Explorer Viewer (IE NetRenderer) (http://netrenderer.com/) Internet Explorer Viewer (URL2PNG) (https://www.url2png.com/) IP Address Trace (http://www.ip-tracker.org/) IP Determiner (DSLReports) (https://www.dslreports.com/whois) IP Determiner (http://www.ipdatabase.com/) IP Spam Check (http://www.spamhaus.org/lookup.lasso) iPhone Emulator (http://iphone4simulator.com/) JavaScript Compressor (http://dean.edwards.name/packer/) JavaScript Linter (JSHint) (http://jshint.com/) JavaScript Linter (JSLint) (http://www.jslint.com/) JSON Formatter (http://bit.ly/2cX1dXT) JSON Validator (http://pro.jsonlint.com/) Layout Bug Test (script) (http://bit.ly/2czWyeT) Link Analysis (http://juicystudio.com/services/linktest.php) Link Check (LinkTiger) (http://www.linktiger.com/) Link Check (Site Valet) (http://valet.webthing.com/link/) Link Check (W3C) (http://validator.w3.org/checklink) Load Time and Object Check (http://bit.ly/2cl1DDw) Load Time Check (http://bit.ly/2cRR4N7) Lynx Viewer (http://www.delorie.com/web/lynxview.html) Malware and Security Scanner (http://sitecheck.sucuri.net/) Markup Validator (http://www.validome.org/) MD5 and SHA Hash Generator (http://onlinemd5.com/) MD5 Encrypter (http://www.md5online.org/md5-encrypt.html) Microformat Extractor and Transformer (http://microform.at/) Mobile Emulator (http://mtld.mobi/emulator.php) Mobile-Friendliness Check (http://bit.ly/1TaiOL0) MX Lookup (http://mxtoolbox.com/) Network Intrusion Prevention and Analysis (Kismet; command-line tool) (https://kismetwireless.net/) Network Intrusion Prevention and Analysis (Snort; command-line tool) (https://www.snort.org/) Open Graph and Semantics Extractor (https://developers.facebook.com/tools/debug) Opera Mini Emulator (http://opr.as/2cKpahy) Password Generator (Arantius.com) (http://tools.arantius.com/password) Password Generator (GRC) (https://www.grc.com/passwords.htm) Password Generator (Packetizer) (https://secure.packetizer.com/pwgen/) Password Security Check https://howsecureismypassword.net/ Password Security Check (GRC) (https://www.grc.com/haystack.htm) Performance and Scalability Test (Pylot; command-line tool) (http://www.pylot.org/) Performance and Scalability Test (Tsung; command-line tool) (http://tsung.erlang-projects.org/) PGP Decrypter (http://www.igolder.com/pgp/decryption/) PGP Encrypter (http://www.igolder.com/pgp/encryption/) PGP Key Generator (http://www.igolder.com/pgp/generate-key/) Ping Tool (https://tools.pingdom.com/ping/) Ping Tool (Regional) (http://bit.ly/2coze1f) P3P Validator (http://www.w3.org/P3P/validator.html) QA Style Sheet (bookmarklet) (https://github.com/j9t/qa-style-sheet) RDF Validator (http://www.w3.org/RDF/Validator/) Reputation and Safety Check (https://www.mywot.com/) Responsiveness Test (http://www.viewlike.us/) Reverse IP Lookup (http://mxtoolbox.com/ReverseLookup.aspx) Rich Pin Validator (http://bit.ly/2cBCh7x) robots.txt Syntax Check (http://bit.ly/2cl6HYm) RSS and Atom Feed Validator (http://validator.w3.org/feed/) SADiC Validator (http://bit.ly/2cUCpzP) SBML Validator (http://sbml.org/Facilities/Validator/) Schema Generator (http://schema-creator.org/) Section 508 Check (http://www.508checker.com/) Section 508 and WCAG 1.0 Check (Site Valet) (http://valet.webthing.com/access/url.html) Section 508 and WCAG 2.0 Check (Cynthia Says) (http://www.cynthiasays.com/) Section 508, WCAG 2.0, and BITV 1.0 Check (http://achecker.ca/checker/) Security Breach Victim Check (https://haveibeenpwned.com/) Security Analysis (OWASP Mantra; browser extension) (https://sourceforge.net/projects/getmantra/) Semantics Check (Gecko browser extension) (https://mzl.la/2cjC31A) Semantics Extractor (http://bit.ly/2cp0MTp) Semantics Parser and Extractor (http://buzzword.org.uk/swignition/try) SHA-512 Hash Generator (http://bit.ly/2cWHLKX) Sitemap Validator (http://www.validome.org/google/validate) SPDY Implementation Check (http://spdycheck.org/) SQL Injection and Database Check (command-line tool) (http://sqlmap.org/) SQL Injection Scanner (command-line tool) (http://bit.ly/2ctd5fN) SQL Validator (http://developer.mimer.se/validator/index.htm) SSL Certificate Check (DigiCert) (https://www.digicert.com/help/) SSL Certificate Check (SSL Shopper) (https://www.sslshopper.com/sslchecker.html) SSL Client Check (https://www.howsmyssl.com/) SSL Scanner (command-line tool) (https://github.com/iSECPartners/sslyze) SSL Server Test (https://www.ssllabs.com/ssltest/) Traceroute Tool (https://cloudmonitor.ca.com/en/traceroute.php) Structured Data Test (Google) (https://search.google.com/structureddata/testing-tool) Structured Data Test (Yandex) (https://webmaster.yandex.com/microtest.xml) SVG Validator (http://bit.ly/2ctwMr0) Traceroute Tool (Visualized) (http://traceroute.monitis.com/) Trustworthiness Check (http://www.scamadviser.com/) Twitter Card Test (https://cards-dev.twitter.com/validator) Type Diff (https://tiff.herokuapp.com/) Type Live Test (http://typewonder.com/) Type Scale (http://type-scale.com/) Type Scale (Modular) (http://www.modularscale.com/) UI Test Automation (Ghost Inspector; browser extension) (https://ghostinspector.com/) UI Test Automation (Screenster) (http://screenster.io/) Universal Validator (http://watson.addy.com/) User Agent Detector (http://ua.met.cz/) User Identity Generator (http://bit.ly/2c84dAz) Viewport Size Determiner (http://bit.ly/2cScuWp) Virus Scanner (http://www.virustotal.com/) Wake-on-LAN Service (http://www.dslreports.com/wakeup) WCAG 1.0 Check (SIDAR) (http://www.sidar.org/hera/) WCAG 1.0 Check (TAW) (http://www.tawdis.net/) WCAG 2.0 Check (BOIA) (http://www.boia.org/) WCAG 2.0 Check (Evaluera) (http://www.evaluera.co.uk/) Web Application Security Analysis (Canoo; command-line tool) (http://bit.ly/2cT9wFm) Web Application Security Analysis (OWASP; server application) (https://sourceforge.net/projects/owasp/) Web Application Security Analysis (Skipfish; command-line tool) (https://github.com/spinkham/skipfish) Web App Test Automation (command-line tool) (https://github.com/svenfuchs/steam) Web Font Generator (http://bit.ly/2cWYrlz) Website Analysis (Alexa) (http://www.alexa.com/) Website Analysis (Nibbler) (http://nibbler.silktide.com/) Website Analysis (RankFlex) (http://www.rankflex.com/en/) Website Analysis (Site Analyzer) (https://www.site-analyzer.com/) Website Analysis (StatsCrop) (http://www.statscrop.com/) Website Analysis (UITest.com) (http://uitest.com/en/check/) Website Blockade Check for China (http://www.blockedinchina.net/) Website Blockade Check for England (https://www.blocked.org.uk/) Website Browser and Location Speed Test (http://bit.ly/2cGeYrO) Design Diff (script) (https://percy.io/) Website Design History (DomainTools) (http://bit.ly/2cjC0mD) Website Design History (Screenshots.com) (https://www.screenshots.com/) Website Fingerprint Check (https://www.grc.com/fingerprints.htm) Website Grader (Website Grader) Website Monitoring Service (http://www.montastic.com/) Website Performance Analysis (GTmetrix) (https://gtmetrix.com/) Website Performance Analysis (IISpeed) (https://www.iispeed.com/pagespeed/insights) Website Performance Analysis (Page Performance; WebKit browser extension) http://bit.ly/2cqOoRk) Website Performance Analysis (PageSpeed) (http://bit.ly/2coEeD8) Website Performance Analysis (Pingdom) (https://tools.pingdom.com/fpt/) Website Performance Analysis (WebPagetest) (http://www.webpagetest.org/) Website Performance Analysis (YSlow; browser extension) (http://yslow.org/) Website Review (http://www.reviewmyweb.com/) Website Technology Analysis (http://builtwith.com/) Website Timer (http://www.octagate.com/service/SiteTimer/) XHTML 1.0 Schema Validator (http://schneegans.de/sv/) XML Schema Validator (http://bit.ly/2ctvqJZ) XML Validator (http://www.xmlvalidation.com/) XML Well-Formedness Check and Validator (http://bit.ly/2cTlfnh) Summary This was a brief treatise on the subject of website quality control What have we learned? Quality management consists of quality planning, quality control, quality assurance, and quality improvement, and it comes with a number of methods to identify (control), fix (improvement), and avoid defects (planning, assurance) Website quality control entails the means to determine (a) whether websites meet our own expectations and (b) to what degree our websites meet professional best practices Quality control is important because otherwise we would have no way of knowing whether what we and produce is any good Quality control is professional; quality control saves time and money and sometimes nerves Quality control entails and must include a great number of tests, covering security, accessibility, usability, performance, functionality, maintainability, semantics, validation, layout and design consistency, typography, (general) code quality, and coding standard compliance In practice, quality control requires training, depends on our mindsets, stands and falls with automation, and needs enforcement And, finally, there are a gazillion tools for quality control and assurance Quality management is important, and no website should go without a plan for quality control About the Author Jens Oliver Meiert is a German philosopher and developer Jens, who has written seven or so nonbestselling books about a variety of topics (the most recent being How to Work on Oneself), is currently deepening his philosophy studies at the Universität Hamburg He is an invited expert and working group member at the W3C and has been a technical lead at companies like Google and GMX Between coding and thinking, Jens has traveled the world (18 countries on continents in 2012, 48 countries on continents from 2013–2015) and run a number of art-political campaigns (the most recent being It’s Not Too Late) He loves good coffee, men’s fashion, and Werder Bremen Online, he lives at meiert.com Say hello Foreword Acknowledgments The Little Book of Website Quality Control Introduction What Is Quality Control? Why Is Quality Control Important? The Great Website Quality Control Rundown Security Accessibility Usability Performance Functionality Maintainability Semantics Validation Layout and Design Consistency Typography Code Quality Coding Standard Compliance Quality Control in Practice Training Mindset Automation Enforcement Logistics Tools Summary ...O’Reilly Web Platform The Little Book of Website Quality Control Jens Oliver Meiert The Little Book of Website Quality Control by Jens Oliver Meiert Copyright © 2017... in the long run But what are our options to control the quality of our websites? We’ll look at that now in more detail The Great Website Quality Control Rundown When you think about the quality. .. stricter on the one end and more lenient on the other: Website quality control entails the means to determine (a) whether they meet our expectations and (b) to what degree our websites meet professional