the little book of website quality control

The Little Book of Website Quality Control, the cover image, and related trade dress are trademarks of O’Reilly Media, Inc.. What Is Quality Control?Wikipedia defines quality control oft

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 andinstructions 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 inthis 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]

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 websitequality ideology perhaps more than any other developer with whom I’ve ever worked: Jens OliverMeiert

Over the years, I’ve followed Jens through his ideas, blog posts, and books When I finally got thechance to work closer with him, I began to really understand his philosophy behind developing andmaintaining websites alongside his relentless focus on quality We spent lots of time debating themerits 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, thefocus switched from policing to advocating for quality while centering efforts around establishingvalue behind tools and automation For Jens, quality became a benchmark of professionalism andsymbol of craftsmanship that still holds true today

This little book is a glimpse into the world of website quality from the perspective of a passionatedeveloper who strives to educate other developers and improve websites You will learn everythingfrom 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, writingabout the very subject, could not name the people to whom I’m indebted Lars Röwekamp and JensSchumann, 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’sworth doing well,” too

This little book would not exist were it not for old role models and old sayings, as well as for all thepeople 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 teamfor their swift, competent, and kind help When this book turns out well, it will have been because ofthem 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 goodwebsites is part of our professional ethics, stemming from a code of honor that asserts that we can beprofessionals only if our work is good

But how do 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) andfix (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 modernweb development (after web frameworks and coding standards), focuses mostly on the quality controlpiece, 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 do 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 developmentbest practices, but there are some differences in how one should go about quality checking of sites asopposed 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

What Is Quality Control?

Wikipedia defines quality control (often, but rarely in this book, abbreviated as “QC”) as “a process

by which entities review the quality of all factors involved in production.” ISO 9000, also throughWikipedia, is said to define quality control as “a part of quality management focused on fulfillingquality requirements.” Google, without offering attribution, understands quality control to be “a

system of maintaining standards in manufactured products by testing a sample of the output against thespecification.”

We want to use a definition that is stricter on the one end and more lenient on the other: “Websitequality control entails the means to determine (a) whether they meet our expectations and (b) to whatdegree our websites meet professional best practices.”

“Means,” then, will refer largely to infrastructure—that is, tools Also, as stated a moment ago, we’lllook at some processes and methods useful to improve, not just measure, the quality of our work

Why Is Quality Control Important?

Quality control is—for that decisive reason—important, because without it we have no robust way ofdetermining whether what we do and produce is any good

Quality control, therefore, is a key differentiator between professional and amateur work Consistentquality is the mark of the professional

Quality control, finally, saves time and money and sometimes nerves, particularly 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 of websites, what comes to your mind? How would you test—and

what would you test for? Take a moment to ponder this question

We should readily recall some tools and tests known to us from our everyday work Some of us might

remember validators; some might think of linters; and for others, security suites pop into their minds.What do we test for? Not only spec compliance as with validation, or code formatting with linters,

we can—and should, as professionals—test for everything we can get our hands on Going throughwhat we can get our hands on and showing what tools we have at our disposal is the purpose of thissection For each area, in descending order of importance, we’ll go over why quality control mattersand look at available tools and automation options

The tools are mostly web-based; applications have been left out, and exceptions noted The idea was

not to shoulder the probably impossible task of listing and evaluating all tools, but to give the

interested reader a starting point to evaluate production sites instantly (Note that despite all diligenceexercised in retrieving and evaluating these tools, neither the author nor O’Reilly Media assumesresponsibility for the usefulness, reliability, or accuracy of the tools listed.)

Security

Security can be considered the most important thing to test for because whatever it is we and ourusers are doing, if the security of it is compromised, we and our users are compromised and can beharmed in a number of ways, from losing data (and privacy) to losing the service itself, and possiblymuch more We stand and fall with the security of the services that we offer

Security is critical, but it’s also tricky in the light of website quality control For one, websites—rather than apps—might or might not deal with any personal and sensitive information or even asktheir users to provide such information For another, security is not trivial to test and not necessarily

to be evaluated all from the outside This leads us to the situation in which, although security is socrucial, there’s not that much to add outside the context of dedicated information security

Let’s go over some tools that are available to us (again primarily with a focus on web-based tools).The responsible website owner should—and will—employ additional, notably inner-organizationalmeans to ensure that his services and the data those services gather are secure

AES Encrypter

Bandwidth Speed Test

Blowfish Hash Generator

Cookie Editor (WebKit browser extension)

CSR Decoder

DNS Analysis

DNS Propagation Check

Download Time Calculator

Email Blacklist Check

FTP Server Test

HTTP Header Editor (Request Maker; WebKit browser extension)

HTTP Header Editor (Tamper Data; Gecko browser extension)

Malware and Security Scanner

MD5 and SHA Hash Generator

MD5 Encrypter

MX Lookup

Network Intrusion Prevention and Analysis (Kismet; command-line tool)Network Intrusion Prevention and Analysis (Snort; command-line tool)Password Generator (Arantius.com)

Password Generator (GRC)

Password Generator (Packetizer)

Password Security Check

Password Security Check (GRC)

PGP Decrypter

Security Breach Victim Check

Security Analysis (OWASP Mantra; browser extension)

SHA-512 Hash Generator

SPDY Implementation Check

SQL Injection and Database Check (command-line tool)

SQL Injection Scanner (command-line tool)

SSL Certificate Check (DigiCert)

SSL Certificate Check (SSL Shopper)

SSL Client Check

SSL Scanner (command-line tool)

SSL Server Test

Traceroute Tool

Traceroute Tool (Visualized)

User Identity Generator

Virus Scanner

Wake-on-LAN Service

Web Application Security Analysis (Canoo; command-line tool)Web Application Security Analysis (OWASP; server application)Web Application Security Analysis (Skipfish; command-line tool)Website Blockade Check for China

Website Blockade Check for England

Website Fingerprint Check

Website Monitoring Service

Accessibility has often been linked to making data available to machines—like search engine bots—

but it is, first and foremost, about making information available to people.

Legislation exists in many countries—like Section 508 in the United States, BITV in Germany, or

RGAA in France—that supports and presses for worldwide accessibility The key standards, Web Content Accessibility Guidelines (WCAG), published by the World Wide Web Consortium (W3C)have gone through two versions and are, though not perfect, robust There are a good number of tools,

as we shall see And still, accessibility remains one of the industry’s stepchildren

Independent of whether we would be held accountable legally, accessibility is one of the most

important things that we should cater to on our sites

Accessibility Analysis (Gecko browser extension)

Accessibility Check (AATT; Automated; command-line tool)

Accessibility Check (FAE)

Accessibility Check (WAEX)

Accessibility Check (WAVE 3.0)

Accessibility Developer Tools (WebKit browser extension)

Accessibility, HTML, and Link Check (WebKit and Gecko browser extension)

Accessibility Linter

Accessibility Visualization (script)

ARIA Validator (WebKit browser extension)

Colorblind Web Page Filter

Color Contrast Analysis (Jonathan Snook)

Color Contrast Analysis (WCAG Contrast Checker; Gecko browser extension)

Color Contrast Analysis (WebAIM)

Color Deficit Emulation

Section 508 and WCAG 1.0 Check (Site Valet)

Section 508 and WCAG 2.0 Check (Cynthia Says)

Section 508, WCAG 2.0, and BITV 1.0 Check

WCAG 1.0 Check (SIDAR)

WCAG 1.0 Check (TAW)

WCAG 2.0 Check (BOIA)

WCAG 2.0 Check (Evaluera)

Usability

Usability is one of the most critical areas to focus on when running a website, hence it deserves

special mention here Because it is not a technical concern, however, it’s only mentioned in passing

If you are interested in this and not already familiar with designing and keeping a usable website, youmight want to check out some key resources for further information, like Usability.gov, Nielsen

Norman Group, or UXmatters

Performance

For the longest time, Google has worked following the mantras, “every millisecond counts” and,though weaker, “fast is better than slow” And for good reason! Speed is a key factor for a positiveuser experience—so crucial, in fact, that it’s one of the determinants for customer satisfaction andconversion

There are many studies that back performance up as important for quality websites, and Six Revisions(with Why Website Speed is Important), Impressive Webs (with The Importance of Page Speed), andWebSiteOptimization.com (with Empirical Study of Web Site Speed on Search Engine Rankings)provide pointers for a good number of them

Today, test tools abound for performance measuring Here are some of them:

Availability Check (CurrentlyDown.com)

Availability Check (Is It Down Right Now)

Availability Check (Regional; InternetSupervision.com)

Availability Check (Regional; Site24x7)

CSS Analysis

Load Time and Object Check

Load Time Check

Performance and Scalability Test (Pylot; command-line tool)

Performance and Scalability Test (Tsung; command-line tool)

Website Browser and Location Speed Test

Website Performance Analysis (GTmetrix)

Website Performance Analysis (IISpeed)

Website Performance Analysis (Page Performance; WebKit browser extension)

Website Performance Analysis (PageSpeed)

Website Performance Analysis (Pingdom)

Website Performance Analysis (WebPagetest)

Website Performance Analysis (YSlow; browser extension)

Website Timer

Functionality

Another user-centered matter concerns site functionality and workflows: can we get from A to B?

Fortunately, even though this is important to ensure, it’s easy to verify—so easy in fact, that most ofthe time functionality testing is “implied.”

How so? What have we just said? Essentially, that we’d know whether when building and extendingour sites and their functionality, we can’t get to what we just built and extended Whether we’d add anew registration page or post a new press release, we typically notice as part of the testing and

launch process whether it actually made it live and can be found

Thus, it’s advantageous to tell by other means whether everything’s where we expect it to be, andwhether it works as we expect it to work Here are some tools to do that:

Accessibility, HTML, and Link Check (WebKit and Gecko browser extension)

Browser Test Automation (Sahi; browser extension)

Browser Test Automation (Selenium; browser extension)

Browser Test Automation (Squish)

Browser Test Automation (Watir; browser extension)

“Cognitive Walkthrough for the Web” Tools

Image and Link Analysis

Link Analysis

Link Check (LinkTiger)

Link Check (Site Valet)

Link Check (W3C)

Responsiveness Test

UI Test Automation (Ghost Inspector; browser extension)

UI Test Automation (Screenster)

What is maintainability, what does this ability and efficiency really refer to? That is a valid question

in light of the fact that many long years of neglect have yielded little documentation and few bestpractices pertaining to maintainability and maintenance “One cannot not maintain”—that is the “law”I’ve coined in despair One cannot not maintain originates in the fact that anything we produce must atsome point be dealt with again, whether by us or by others

(As for tools, only sadness seems to be available as of yet.)

QA Style Sheet (bookmarklet)

Semantics

Semantics was one of the hot topics of the last decade, when the field of web development wentthrough its first stage of maturation and developed a better sense for how HTML markup should bewritten This awareness was motivated in part by a higher and closer regard for web standards—mostly in relation to the underlying specifications—and in part by stronger emphasis on the need for

websites to be more accessible.

Today, the hype has long moved on to web apps, and tolerance has stretched a bit again to “anythinggoes.” WAI-ARIA has grown and matured as both tool and excuse Microdata and web components

have, so far, also done their share to allow a mindset of “semantics is not important anymore” toflourish

Is this all justified? No But the situation is complex To make a bit more sense of it, we should breakthings apart

For semantics, we should look at where it’s coming from and what people mean when they talk about

it Semantics in HTML refers to authority—and consensus-based meaning The W3C or the

WHATWG—the authorities—define in specifications what each element and attribute means

Vendors and the web development community buy into these definitions Sometimes, as for

consensus, they disagree (voiced in standard controversies) or they add their own solutions (as with

microformats) ID and class names represent the most minimal form of consensus on meaning,

sometimes just brought forth by a single developer

For new technology and techniques, we find ourselves in a conflict The standards community hasgiven in to a form of arms race against itself After years of slow progress, low output, and seemingindifference to the user and vendor community, suddenly those involved in standards want to

micromanage everything This has led the specifications to grow in number and size, and we’ve still

not been able to take inventory of everything we’re now capable of doing With that growing

complexity, we risk losing it all, http://bit.ly/2cUCbZB, or so I feel But with respect to semantics,we’re right at the seam, and things have become loose there No one focuses any longer on the

meaning of what documents and templates describe anymore.

Semantics will make it back to our agendas for the following reason: we can only get the most out ofcode and information within code, ensure best access to that code, and work best together on code ifthe code has meaning, or is used according to the meaning it had been assigned

There are a number of semantics checks and generators for enriched markup available:

hCalendar Generator

hCard Generator

HTML Outline Extractor

Microformat Extractor and Transformer

Open Graph and Semantics Extractor

Schema Generator

Semantics Check (Gecko browser extension)

Semantics Extractor

Semantics Parser and Extractor

Structured Data Test (Google)

Structured Data Test (Yandex)

Twitter Card Test

(Some accessibility and validation tools cover aspects of semantics, too; to avoid repetition and notdistort the view on the “purely semantic” testing options, these have not been duplicated here.)

Validation

Validation as a measurable priority had peaked, too, before falling from grace But popularity doesnot correlate with validity (hah!), accuracy, or quality, and one can argue well how validation is arelevant factor for website quality It is such an important factor for that reason that only validationensures we’ve been coding according to the different specs—a condition that corresponds with

professionalism, or at least professional ethics

Although this is almost all there is to say about validation, the web development landscape begs todiffer, most notably when it comes to HTML and CSS HTML is more stable and used in more placesthan CSS CSS is under heavier development and occasionally experimental, yet style sheets live inrelatively few places (CSS being “orthogonal” to HTML makes for its relevance in maintainability).That means that validation for HTML is far more important than for CSS Because HTML is stable, it

is easier to validate, and because it’s so prevalent—all over the place in templates and documents—it’s also much more critical to validate

We are in the envious situation of having a great many, good-quality validators at our disposal:

Accessibility, HTML, and Link Check (WebKit and Gecko browser extension)

ARIA Validator (WebKit browser extension)