IT training the little book of website quality control khotailieu

The Little Book of Website Quality Control Jens Oliver Meiert Foreword by Kevin Khaw... Jens Oliver MeiertThe Little Book of Website Quality Control... [LSI] The Little Book of Website

The Little Book

of Website

Quality Control

Jens Oliver Meiert

Foreword by Kevin Khaw

Jens Oliver Meiert

The Little Book of Website

Quality Control

[LSI]

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 limi‐ tation 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 responsi‐ bility to ensure that your use thereof complies with such licenses and/or rights.

Table of Contents

Foreword vii

The Little Book of Website Quality Control 1

Introduction 1

What Is Quality Control? 3

Why Is Quality Control Important? 5

The Great Website Quality Control Rundown 7

Quality Control in Practice 23

Tools 27

Summary 37

Website quality is often an overlooked and underrated web develop‐ment topic I could go on about my personal philosophy, but whatmatters most is the person who shaped and guided my website qual‐ity ideology perhaps more than any other developer with whom I’veever worked: Jens Oliver Meiert

Over the years, I’ve followed Jens through his ideas, blog posts, andbooks When I finally got the chance to work closer with him, Ibegan to really understand his philosophy behind developing andmaintaining websites alongside his relentless focus on quality Wespent lots of time debating the merits of what quality meant, cham‐pioning its importance, and making it work in fast-paced environ‐ments in which quality is more commonly a convenience ratherthan a requirement

He was first to begin promoting the positive impact of quality ondevelopment, performance, collaboration, and overall maintenance

in large web development teams To operate at scale, the focusswitched from policing to advocating for quality while centeringefforts around establishing value behind tools and automation ForJens, quality became a benchmark of professionalism and symbol ofcraftsmanship that still holds true today

This little book is a glimpse into the world of website quality fromthe perspective of a passionate developer who strives to educateother developers and improve websites You will learn everythingfrom topics related to website quality, putting it in practice, and thetools to help with the process

— Kevin Khaw

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 notname 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 tocome to my mind Yet, as an important goal and a sign of profes‐sionalism, the mindset of quality comes close to ideas like “if some‐thing’s worth doing, it’s worth doing well,” too

This little book would not exist were it not for old role models andold sayings, as well as for all the people who have made it reality Forthat, I want to thank very much my former colleague, manager, andgood friend Kevin Khaw for the Foreword Finally, I want to recog‐nize the entire O’Reilly team for their swift, competent, and kindhelp When this book turns out well, it will have been because ofthem Thank you all

viii | Foreword

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 mostimportant question Building good websites is part of our professio‐nal ethics, stemming from a code of honor that asserts that we can

be professionals 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 plan‐ning, 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 coverimportant components of modern web development (after webframeworks and coding standards), focuses mostly on the qualitycontrol 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 do all of this in a

loose and relaxed manner, however, and not to the extent ISO stand‐ards would cover quality.

Finally, and although this should matter only in few instances, thebook hinges more on websites rather than web apps That distinc‐tion is usually relevant when it comes to standards and developmentbest practices, but there are some differences in how one should goabout quality checking of sites as opposed to apps What follows willwork slightly better and allow for more complete quality control of

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 qual‐ity of all factors involved in production.” ISO 9000, also throughWikipedia, is said to define quality control as “a part of quality man‐agement focused on fulfilling quality requirements.” Google, withoutoffering attribution, understands quality control to be “a system ofmaintaining standards in manufactured products by testing a sam‐ple of the output against the specification.”

We want to use a definition that is stricter on the one end and morelenient on the other: “Website quality control entails the means todetermine (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’ll look at some processes andmethods useful to improve, not just measure, the quality of ourwork

Why Is Quality Control Important?

Quality control is—for that decisive reason—important, becausewithout it we have no robust way of determining whether what we

do and produce is any good

Quality control, therefore, is a key differentiator between professio‐nal and amateur work Consistent quality is the mark of the profes‐sional

Quality control, finally, saves time and money and sometimesnerves, 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 amoment 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 mightthink of linters; and for others, security suites pop into their minds.What do we test for? Not only spec compliance as with validation, orcode formatting with linters, we can—and should, as professionals—test for everything we can get our hands on Going through what wecan get our hands on and showing what tools we have at our dis‐posal is the purpose of this section For each area, in descendingorder of importance, we’ll go over why quality control matters andlook at available tools and automation options

The tools are mostly web-based; applications have been left out, andexceptions noted The idea was not to shoulder the probably impos‐

sible task of listing and evaluating all tools, but to give the interested

reader a starting point to evaluate production sites instantly (Notethat despite all diligence exercised in retrieving and evaluating thesetools, neither the author nor O’Reilly Media assumes responsibilityfor the usefulness, reliability, or accuracy of the tools listed.)

Security

Security can be considered the most important thing to test forbecause whatever it is we and our users 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 los‐ing the service itself, and possibly much more We stand and fallwith the security of the services that we offer.

Security is critical, but it’s also tricky in the light of website qualitycontrol For one, websites—rather than apps—might or might notdeal with any personal and sensitive information or even ask theirusers to provide such information For another, security is not trivial

to test and not necessarily to be evaluated all from the outside Thisleads us to the situation in which, although security is so crucial,there’s not that much to add outside the context of dedicated infor‐mation 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-organizational means

to ensure that his services and the data those services gather aresecure

• 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

• IP Determiner

• IP Spam Check

• Malware and Security Scanner

• MD5 and SHA Hash Generator

• Password Generator (Packetizer)

• Password Security Check

• Password Security Check (GRC)

• 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-linetool)

• Website Blockade Check for China

• Website Blockade Check for England

• Website Fingerprint Check

• Website Monitoring Service

Accessibility

Per Wikipedia, accessibility “refers to the design of products, devi‐ces, services, or environments for people with disabilities”; “the con‐cept of accessible design ensures both ‘direct access’ (i.e., unassisted)and ‘indirect access,’ meaning compatibility with a person’s assistivetechnology (for example, computer screen readers).” Accessibility isone of the most important ideas to understand, for the Web is allabout accessibility—accessibility is, in fact, the Web’s biggestpromise 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 UnitedStates, BITV in Germany, or RGAA in France—that supports andpresses for worldwide accessibility The key standards, Web Content Accessibility Guidelines (WCAG), published by the World Wide WebConsortium (W3C) have gone through two versions and are,though not perfect, robust There are a good number of tools, as weshall see And still, accessibility remains one of the industry’s step‐children

10 | The Great Website Quality Control Rundown

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 Geckobrowser 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; Geckobrowser 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 awebsite, hence it deserves special mention here Because it is not atechnical concern, however, it’s only mentioned in passing If youare interested in this and not already familiar with designing andkeeping a usable website, you might want to check out some keyresources for further information, like Usability.gov, Nielsen Nor‐man Group, or UXmatters

Performance

For the longest time, Google has worked following the mantras,

“every millisecond counts” and, though weaker, “fast is better thanslow” And for good reason! Speed is a key factor for a positive userexperience—so crucial, in fact, that it’s one of the determinants forcustomer satisfaction and conversion

There are many studies that back performance up as important forquality websites, and Six Revisions (with Why Website Speed isImportant), Impressive Webs (with The Importance of Page Speed),and WebSiteOptimization.com (with Empirical Study of Web SiteSpeed on Search Engine Rankings) provide pointers for a goodnumber 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

12 | The Great Website Quality Control Rundown

• Website Performance Analysis (GTmetrix)

• Website Performance Analysis (IISpeed)

• Website Performance Analysis (Page Performance; WebKitbrowser 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 work‐

flows: 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 knowwhether when building and extending our sites and their functional‐ity, we can’t get to what we just built and extended Whether we’dadd a new registration page or post a new press release, we typicallynotice as part of the testing and launch process whether it actuallymade it live and can be found

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

• Accessibility, HTML, and Link Check (WebKit and Geckobrowser 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)

at the same time it’s regularly among the most neglected ones.What is maintainability, what does this ability and efficiency reallyrefer to? That is a valid question in light of the fact that many longyears of neglect have yielded little documentation and few best prac‐tices pertaining to maintainability and maintenance “One cannotnot maintain”—that is the “law” I’ve coined in despair One cannotnot 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 thefield of web development went through its first stage of maturationand developed a better sense for how HTML markup should bewritten This awareness was motivated in part by a higher and closerregard for web standards—mostly in relation to the underlyingspecifications—and in part by stronger emphasis on the need forwebsites to be more accessible

14 | The Great Website Quality Control Rundown