You are previewing Refactoring HTML: Improving the Design of Existing Web Applications.
O'Reilly logo
Refactoring HTML: Improving the Design of Existing Web Applications

Book Description

Like any other software system, Web sites gradually accumulate “cruft” over time. They slow down. Links break. Security and compatibility problems mysteriously appear. New features don’t integrate seamlessly. Things just don’t work as well. In an ideal world, you’d rebuild from scratch. But you can’t: there’s no time or money for that. Fortunately, there’s a solution: You can refactor your Web code using easy, proven techniques, tools, and recipes adapted from the world of software development.

In Refactoring HTML, Elliotte Rusty Harold explains how to use refactoring to improve virtually any Web site or application. Writing for programmers and non-programmers alike, Harold shows how to refactor for better reliability, performance, usability, security, accessibility, compatibility, and even search engine placement. Step by step, he shows how to migrate obsolete code to today’s stable Web standards, including XHTML, CSS, and REST—and eliminate chronic problems like presentation-based markup, stateful applications, and “tag soup.”

The book’s extensive catalog of detailed refactorings and practical “recipes for success” are organized to help you find specific solutions fast, and get maximum benefit for minimum effort. Using this book, you can quickly improve site performance now—and make your site far easier to enhance, maintain, and scale for years to come.

Topics covered include

•    Recognizing the “smells” of Web code that should be refactored
•    Transforming old HTML into well-formed, valid XHTML, one step at a time
•    Modernizing existing layouts with CSS
•    Updating old Web applications: replacing POST with GET, replacing old contact forms, and refactoring JavaScript
•    Systematically refactoring content and links
•    Restructuring sites without changing the URLs your users rely upon

This book will be an indispensable resource for Web designers, developers, project managers, and anyone who maintains or updates existing sites. It will be especially helpful to Web professionals who learned HTML years ago, and want to refresh their knowledge with today’s standards-compliant best practices.
This book will be an indispensable resource for Web designers, developers, project managers, and anyone who maintains or updates existing sites. It will be especially helpful to Web professionals who learned HTML years ago, and want to refresh their knowledge with today’s standards-compliant best practices.

Table of Contents

  1. Copyright
  2. Praise for Refactoring HTML
  3. The Addison-Wesley Signature Series
    1. The Addison-Wesley Signature Series
      1. Signers: Kent Beck and Martin Fowler
      2. Titles in the Series
  4. Foreword by Martin Fowler
  5. Foreword by Bob DuCharme
  6. About the Author
  7. 1. Refactoring
    1. Why Refactor
      1. Smell: Illegible Code
      2. Smell: The CEO Can’t Fill Out His Travel Expense Vouchers
      3. Smell: Slow Page-Rendering Times
      4. Smell: Pages Appear Different in Different Browsers
      5. Smell: Pages Require Dangerous or Nonstandard Technologies
      6. Smell: Your Company’s Home Page Suddenly Says, “Pwned by Elite Doodz”
      7. Smell: Your First Appearance on Google Is on Page 17
      8. Smell: Readers Send E-mail Saying Your Site Is Broken
    2. When to Refactor
    3. What to Refactor To
      1. Why XHTML
      2. Why CSS
      3. Why REST
        1. All Resources Are Identified by URLs
        2. Safe, Side-Effect-Free Operations Such as Querying or Browsing Operate via GET
        3. Nonsafe Operations Such as Purchasing an Item or Adding a Comment to a Page Operate via POST
        4. Each Request Is Independent of All Others
    4. Objections to Refactoring
  8. 2. Tools
    1. Backups, Staging Servers, and Source Code Control
    2. Validators
      1. The W3C Markup Validation Service
      2. The Log Validator
      3. xmllint
      4. Editors
    3. Testing
      1. JUnit
      2. HtmlUnit
      3. HttpUnit
      4. JWebUnit
      5. FitNesse
      6. Selenium
      7. Getting Started with Tests
    4. Regular Expressions
      1. Searching
      2. Search Patterns
    5. Tidy
      1. -asxhtml
      2. -clean
      3. Encodings
      4. Pretty Printing
      5. Generated Code
      6. Use As a Library
    6. TagSoup
      1. TagSoup versus Tidy
    7. XSLT
  9. 3. Well-Formedness
    1. What Is Well-Formedness?
    2. Change Name to Lowercase
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    3. Quote Attribute Value
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    4. Fill In Omitted Attribute Value
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    5. Replace Empty Tag with Empty-Element Tag
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    6. Add End-tag
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    7. Remove Overlap
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    8. Convert Text to UTF-8
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    9. Escape Less-Than Sign
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    10. Escape Ampersand
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    11. Escape Quotation Marks in Attribute Values
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    12. Introduce an XHTML DOCTYPE Declaration
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    13. Terminate Each Entity Reference
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    14. Replace Imaginary Entity References
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    15. Introduce a Root Element
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    16. Introduce the XHTML Namespace
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
  10. 4. Validity
    1. Introduce a Transitional DOCTYPE Declaration
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    2. Remove All Nonexistent Tags
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    3. Add an alt Attribute
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    4. Replace embed with object
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    5. Introduce a Strict DOCTYPE Declaration
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    6. Replace center with CSS
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    7. Replace font with CSS
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    8. Replace i with em or CSS
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    9. Replace b with strong or CSS
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    10. Replace the color Attribute with CSS
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    11. Convert img Attributes to CSS
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    12. Replace applet with object
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    13. Replace Presentational Elements with CSS
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    14. Nest Inline Elements inside Block Elements
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
  11. 5. Layout
    1. Replace Table Layouts
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
        1. The Content
        2. Two Columns, Sidebar on Left
        3. Two Columns, Sidebar on Right
        4. Three Columns, Sidebar on Left and Right
    2. Replace Frames with CSS Positions
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    3. Move Content to the Front
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    4. Mark Up Lists as Lists
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    5. Replace blockquote/ul Indentation with CSS
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    6. Replace Spacer GIFs
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    7. Add an ID Attribute
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    8. Add Width and Height to an Image
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
  12. 6. Accessibility
    1. Convert Images to Text
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    2. Add Labels to Form Input
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    3. Introduce Standard Field Names
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    4. Turn on Autocomplete
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    5. Add Tab Indexes to Forms
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    6. Introduce Skip Navigation
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    7. Add Internal Headings
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    8. Move Unique Content to the Front of Links and Headlines
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    9. Make the Input Field Bigger
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    10. Introduce Table Descriptions
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    11. Introduce Acronym Elements
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    12. Introduce lang Attributes
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
  13. 7. Web Applications
    1. Replace Unsafe GET with POST
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    2. Replace Safe POST with GET
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
        1. Replacing Forms with Links
    3. Redirect POST to GET
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    4. Enable Caching
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    5. Prevent Caching
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    6. Introduce ETag
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    7. Replace Flash with HTML
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    8. Add Web Forms 2.0 Types
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
        1. email
        2. date
        3. time
        4. datetime
        5. datetime-local
        6. month
        7. week
        8. number
        9. range
        10. url
        11. Browser Support
        12. Data Validation
    9. Replace Contact Forms with mailto Links
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    10. Block Robots
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    11. Escape User Input
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
        1. Variations
  14. 8. Content
    1. Correct Spelling
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    2. Repair Broken Links
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
        1. Repairing Links
    3. Move a Page
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    4. Remove the Entry Page
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
    5. Hide E-mail Addresses
      1. Motivation
      2. Potential Trade-offs
      3. Mechanics
  15. A. Regular Expressions
    1. Characters That Match Themselves
    2. Metacharacters
    3. Wildcards
    4. Quantifiers
      1. Zero or One: ?
      2. Zero or More: *
      3. One or More: +
      4. A Specific Number of Times: {}
    5. Class Shorthands
    6. Character Classes
    7. Groups and Back References
    8. Whitespace
    9. Alternation: |
    10. Greedy and Nongreedy Matches
    11. Position