minimization fiddling [closes issue 3]

Makefile

@@ -28,6 +28,7 @@ init: clean
 
 minimize-html: init
 	{ for f in *.html; do python3 util/htmlminimizer.py "$$f" build/"$$f" || exit 1; done }
+	sed -i -e "s|;</script>|</script>|g" build/*.html
 
 minimize-js: init
 	${JAVA} -jar util/compiler.jar -js build/j/dih5.js > build/j/dih5.min.js

canvas.html

@@ -23,13 +23,10 @@ <h2 id=divingin>Diving In</h2>
 <caption>Basic &lt;canvas> support</caption>
 <thead>
 <tr><th title="Internet Explorer">IE<th title="Mozilla Firefox">Firefox<th title="Apple Safari">Safari<th title="Google Chrome">Chrome<th>Opera<th>iPhone<th>Android
-</thead>
 <tbody>
 <tr><td>7.0+<sup>*</sup><td>3.0+<td>3.0+<td>3.0+<td>10.0+<td>1.0+<td>1.0+
-</tbody>
 <tfoot>
 <tr><td colspan=7 style="text-align:left">* Internet Explorer 7 and 8 require the third-party <a href=http://code.google.com/p/explorercanvas/>explorercanvas</a> library. Internet Explorer 9 supports <code>&lt;canvas></code> natively.
-</tfoot>
 </table>
 
 <p class=clear>So what does a canvas look like? Nothing, really. A <code>&lt;canvas></code> element has no content and no border of its own.</p>
@@ -63,13 +60,10 @@ <h2 id=shapes>Simple Shapes</h2>
 <table class=bc>
 <thead>
 <tr><th title="Internet Explorer">IE<th title="Mozilla Firefox">Firefox<th title="Apple Safari">Safari<th title="Google Chrome">Chrome<th>Opera<th>iPhone<th>Android
-</thead>
 <tbody>
 <tr><td>7.0+<sup>*</sup><td>3.0+<td>3.0+<td>3.0+<td>10.0+<td>1.0+<td>1.0+
-</tbody>
 <tfoot>
 <tr><td colspan=7 style="text-align:left">* Internet Explorer 7 and 8 require the third-party <a href=http://code.google.com/p/explorercanvas/>explorercanvas</a> library. Internet Explorer 9 supports <code>&lt;canvas></code> shapes natively.
-</tfoot>
 </table>
 
 <p>Every canvas starts out blank. That&#8217;s boring! Let&#8217;s draw something.</p>
@@ -176,13 +170,10 @@ <h2 id=paths>Paths</h2>
 <table class=bc>
 <thead>
 <tr><th title="Internet Explorer">IE<th title="Mozilla Firefox">Firefox<th title="Apple Safari">Safari<th title="Google Chrome">Chrome<th>Opera<th>iPhone<th>Android
-</thead>
 <tbody>
 <tr><td>7.0+<sup>*</sup><td>3.0+<td>3.0+<td>3.0+<td>10.0+<td>1.0+<td>1.0+
-</tbody>
 <tfoot>
 <tr><td colspan=7 style="text-align:left">* Internet Explorer 7 and 8 require the third-party <a href=http://code.google.com/p/explorercanvas/>explorercanvas</a> library. Internet Explorer 9 supports <code>&lt;canvas></code> paths natively.
-</tfoot>
 </table>
 
 <p style="float:left;margin:1.75em 1.75em 1.75em 0"><img src=i/openclipart.org_media_files_johnny_automatic_7563.png alt="gerbil sitting on a chair with a quill and ink jar" width=167 height=347>
@@ -277,14 +268,11 @@ <h2 id=text>Text</h2>
 <table class=bc>
 <thead>
 <tr><th title="Internet Explorer">IE<th title="Mozilla Firefox">Firefox<th title="Apple Safari">Safari<th title="Google Chrome">Chrome<th>Opera<th>iPhone<th>Android
-</thead>
 <tbody>
 <tr><td>7.0+<sup>*</sup><td>3.0+<sup>&dagger;</sup><td>3.0+<td>3.0+<td>10.0+<td>1.0+<td>1.0+
-</tbody>
 <tfoot>
 <tr><td colspan=7 style="text-align:left">* Internet Explorer 7 and 8 require the third-party <a href=http://code.google.com/p/explorercanvas/>explorercanvas</a> library. Internet Explorer 9 supports canvas text natively.
 <tr><td colspan=7 style="text-align:left">&dagger; Mozilla Firefox 3.0 requires a compatibility shim.
-</tfoot>
 </table>
 
 <p>In addition to drawing <a href=#paths>lines on a canvas</a>, you can also draw text on a canvas. Unlike text on the surrounding web page, there is no box model. That means none of the familiar CSS layout techniques are available: no floats, no margins, no padding, no word wrapping. (Maybe you think that&#8217;s a good thing!) You can set a few font attributes, then you pick a point on the canvas and draw your text there.
@@ -362,15 +350,12 @@ <h2 id=gradients>Gradients</h2>
 <table class=bc>
 <thead>
 <tr><th><th title="Internet Explorer">IE<th title="Mozilla Firefox">Firefox<th title="Apple Safari">Safari<th title="Google Chrome">Chrome<th>Opera<th>iPhone<th>Android
-</thead>
 <tbody>
 <tr>
 <tr><th>linear gradients<td>7.0+<sup>*</sup><td>3.0+<td>3.0+<td>3.0+<td>10.0+<td>1.0+<td>1.0+
 <tr><th>radial gradients<td>9.0+<td>3.0+<td>3.0+<td>3.0+<td>10.0+<td>1.0+<td>1.0+
-</tbody>
 <tfoot>
 <tr><td colspan=8 style="text-align:left">* Internet Explorer 7 and 8 require the third-party <a href=http://code.google.com/p/explorercanvas/>explorercanvas</a> library. Internet Explorer 9 supports <code>&lt;canvas></code> gradients natively.
-</tfoot>
 </table>
 
 <p>Earlier in this chapter, you learned how to draw <a href=#shapes>a rectangle filled with a solid color</a>, then <a href=#paths>a line stroked with a solid color</a>. But shapes and lines aren&#8217;t limited to solid colors. You can do all kinds of magic with gradients. Let&#8217;s look at an example.</p>
@@ -450,13 +435,10 @@ <h2 id=images>Images</h2>
 <table class=bc>
 <thead>
 <tr><th title="Internet Explorer">IE<th title="Mozilla Firefox">Firefox<th title="Apple Safari">Safari<th title="Google Chrome">Chrome<th>Opera<th>iPhone<th>Android
-</thead>
 <tbody>
 <tr><td>7.0+<sup>*</sup><td>3.0+<td>3.0+<td>3.0+<td>10.0+<td>1.0+<td>1.0+
-</tbody>
 <tfoot>
 <tr><td colspan=7 style="text-align:left">* Internet Explorer 7 and 8 require the third-party <a href=http://code.google.com/p/explorercanvas/>explorercanvas</a> library. Internet Explorer 9 supports <code>&lt;canvas></code> images natively.
-</tfoot>
 </table>
 
 <p>Here is a cat:

forms.html

@@ -28,10 +28,8 @@ <h2 id=placeholder>Placeholder Text</h2>
 <caption>Placeholder support</caption>
 <thead>
 <tr><th title="Internet Explorer">IE<th title="Mozilla Firefox">Firefox<th title="Apple Safari">Safari<th title="Google Chrome">Chrome<th>Opera<th>iPhone<th>Android
-</thead>
 <tbody>
 <tr><td>&middot;<td>3.7+<td>4.0+<td>4.0+<td>11.0+<td>4.0+<td>&middot;
-</tbody>
 </table>
 
 <p>The first improvement <abbr>HTML5</abbr> brings to web forms is the ability to set <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#the-placeholder-attribute>placeholder text in an input field</a>. Placeholder text is displayed inside the input field as long as the field is empty and not focused. As soon as you click on (or tab to) the input field, the placeholder text disappears.
@@ -71,10 +69,8 @@ <h2 id=autofocus>Autofocus Fields</h2>
 <caption>Autofocus support</caption>
 <thead>
 <tr><th title="Internet Explorer">IE<th title="Mozilla Firefox">Firefox<th title="Apple Safari">Safari<th title="Google Chrome">Chrome<th>Opera<th>iPhone<th>Android
-</thead>
 <tbody>
 <tr><td>&middot;<td>4.0+<td>4.0+<td>3.0+<td>10.0+<td>&middot;<td>&middot;
-</tbody>
 </table>
 
 <p class=ss><img src=i/openclipart.org_johnny_automatic_angry_guy.png alt="angry guy with arms up" width=188 height=262>
@@ -323,15 +319,13 @@ <h2 id=type-date>Date Pickers</h2>
 <caption>Date picker support</caption>
 <thead>
 <tr><th style="text-align:left">Input Type<th>Opera<th>Every other browser
-</thead>
 <tbody>
 <tr><th><code>type="date"</code><td>9.0+<td>&middot;
 <tr><th><code>type="month"</code><td>9.0+<td>&middot;
 <tr><th><code>type="week"</code><td>9.0+<td>&middot;
 <tr><th><code>type="time"</code><td>9.0+<td>&middot;
 <tr><th><code>type="datetime"</code><td>9.0+<td>&middot;
 <tr><th><code>type="datetime-local"</code><td>9.0+<td>&middot;
-</tbody>
 </table>
 
 <p>This is how Opera renders <a href=examples/input-type-date.html><code>&lt;input type="date"></code></a>:
@@ -436,10 +430,8 @@ <h2 id=validation>Form Validation</h2>
 <caption>Form validation support</caption>
 <thead>
 <tr><th title="Internet Explorer">IE<th title="Mozilla Firefox">Firefox<th title="Apple Safari">Safari<th title="Google Chrome">Chrome<th>Opera<th>iPhone<th>Android
-</thead>
 <tbody>
 <tr><td>&middot;<td>4.0+<td>5.0+<td>6.0+<td>9.0+<td>&middot;<td>&middot;
-</tbody>
 </table>
 
 <p>In this chapter, I&#8217;ve talked about new input types and new features like auto-focus form fields, but I haven&#8217;t mentioned what is perhaps the most exciting part of <abbr>HTML5</abbr> forms: automatic input validation. Consider the common problem of entering an email address into a web form. You probably have some client-side validation in JavaScript, followed by server-side validation in PHP or Python or some other server-side scripting language. <abbr>HTML5</abbr> can never replace your server-side validation, but it might someday replace your client-side validation.
@@ -480,10 +472,8 @@ <h2 id=required>Required Fields</h2>
 <caption>&lt;input required> support</caption>
 <thead>
 <tr><th title="Internet Explorer">IE<th title="Mozilla Firefox">Firefox<th title="Apple Safari">Safari<th title="Google Chrome">Chrome<th>Opera<th>iPhone<th>Android
-</thead>
 <tbody>
 <tr><td>&middot;<td>4.0+<td>&middot;<td>&middot;<td>9.0+<td>&middot;<td>&middot;
-</tbody>
 </table>
 
 <p><a href=#validation><abbr>HTML5</abbr> form validation</a> isn&#8217;t limited to the type of each field. You can also specify that certain fields are required. Required fields must have a value before you can submit the form.

geolocation.html

@@ -40,10 +40,8 @@ <h2 id=w3c>The Geolocation API</h2>
 <caption>Geolocation <abbr>API</abbr> support</caption>
 <thead>
 <tr><th title="Internet Explorer">IE<th title="Mozilla Firefox">Firefox<th title="Apple Safari">Safari<th title="Google Chrome">Chrome<th>Opera<th>iPhone<th>Android
-</thead>
 <tbody>
 <tr><td>9.0+<td>3.5+<td>5.0+<td>5.0+<td>10.6+<td>3.0+<td>2.0+
-</tbody>
 </table>
 
 <p>Along with support for the standard geolocation <abbr>API</abbr>, there are a plethora of device-specific <abbr>API</abbr>s on other mobile platforms. I&#8217;ll cover all that later in this chapter.

history.html

@@ -55,10 +55,8 @@ <h2 id=how>The How</h2>
 <caption>history.pushState support</caption>
 <thead>
 <tr><th title="Internet Explorer">IE<th title="Mozilla Firefox">Firefox<th title="Apple Safari">Safari<th title="Google Chrome">Chrome<th>Opera<th>iPhone<th>Android
-</thead>
 <tbody>
 <tr><td>&middot;<td>4.0+<td>5.0+<td>8.0+<td>&middot;<td>4.2.1+<td>&middot;
-</tbody>
 </table>
 
 <p><a href=examples/history/fer.html>dive into dogs</a> is a straightforward but non-trivial example of using the <abbr>HTML5</abbr> history <abbr>API</abbr>. It demonstrates a common pattern: a long article with an associated inline photo gallery. In a supported browser, navigating the Next and Previous links in the photo gallery will update the photo in place <em>and update the <abbr>URL</abbr> in the browser location bar</em>, without triggering a full page refresh. In unsupported browsers &mdash; or, indeed, supported browsers where the user has disabled scripting &mdash; the links simply function as regular links, taking you to a new page with a full page refresh.

offline.html

@@ -26,10 +26,8 @@ <h2 id=divingin>Diving In</h2>
 <caption>Offline support</caption>
 <thead>
 <tr><th title="Internet Explorer">IE<th title="Mozilla Firefox">Firefox<th title="Apple Safari">Safari<th title="Google Chrome">Chrome<th>Opera<th>iPhone<th>Android
-</thead>
 <tbody>
 <tr><td>&middot;<td>3.5+<td>4.0+<td>5.0+<td>10.6+<td>2.1+<td>2.0+
-</tbody>
 </table>
 
 <p class=a>&#x2767;

storage.html

@@ -67,10 +67,8 @@ <h2 id=localstorage>Introducing HTML5 Storage</h2>
 <caption><abbr>HTML5</abbr> Storage support</caption>
 <thead>
 <tr><th title="Internet Explorer">IE<th title="Mozilla Firefox">Firefox<th title="Apple Safari">Safari<th title="Google Chrome">Chrome<th>Opera<th>iPhone<th>Android
-</thead>
 <tbody>
 <tr><td>8.0+<td>3.5+<td>4.0+<td>4.0+<td>10.5+<td>2.0+<td>2.0+
-</tbody>
 </table>
 
 <p>From your JavaScript code, you&#8217;ll access <abbr>HTML5</abbr> Storage through the <code>localStorage</code> object on the global <code>window</code> object. Before you can use it, you should <a href=detect.html#storage>detect whether the browser supports it</a>.
@@ -160,16 +158,13 @@ <h3 id=storage-event>Tracking Changes to the HTML5 Storage Area</h3>
 <caption>StorageEvent Object</caption>
 <thead>
 <tr class=ho><th>Property<th>Type<th>Description
-</thead>
 <tbody>
 <tr class=zebra><th><code>key</code><td>string<td>the named key that was added, removed, or modified
 <tr><th><code>oldValue</code><td>any<td>the previous value (now overwritten), or <code>null</code> if a new item was added
 <tr class=zebra><th><code>newValue</code><td>any<td>the new value, or <code>null</code> if an item was removed
 <tr><th><code>url</code><sup>*</sup><td>string<td>the page which called a method that triggered this change
-</tbody>
 <tfoot>
 <tr><td colspan=3>* Note: the <code>url</code> property was originally called <code>uri</code>. Some browsers shipped with that property before the specification changed. For maximum compatibility, you should check whether the <code>url</code> property exists, and if not, check for the <code>uri</code> property instead.
-</tfoot>
 </table>
 
 <p>The <code>storage</code> event is not cancelable. From within the <code>handle_storage</code> callback function, there is no way to stop the change from occurring. It&#8217;s simply a way for the browser to tell you, &#8220;hey, this just happened. There&#8217;s nothing you can do about it now; I just wanted to let you know.&#8221;
@@ -264,10 +259,8 @@ <h2 id=future>Beyond Named Key-Value Pairs: Competing Visions</h2>
 <caption>Web SQL Database support</caption>
 <thead>
 <tr><th title="Internet Explorer">IE<th title="Mozilla Firefox">Firefox<th title="Apple Safari">Safari<th title="Google Chrome">Chrome<th>Opera<th>iPhone<th>Android
-</thead>
 <tbody>
 <tr><td>&middot;<td>&middot;<td>4.0+<td>4.0+<td>10.5+<td>3.0+<td>2.0+
-</tbody>
 </table>
 
 <p>Of course, if you&#8217;ve used more than one database product in your life, you are aware that &#8220;<abbr>SQL</abbr>&#8221; is more of a marketing term than a hard-and-fast standard. (Some would say the same of &#8220;HTML5,&#8221; but never mind that.) Sure, there is an actual <abbr>SQL</abbr> specification (it&#8217;s called <a href="http://www.contrib.andrew.cmu.edu/~shadow/sql/sql1992.txt">SQL-92</a>), but there is no database server in the world that conforms to that and only that specification. There&#8217;s Oracle&#8217;s <abbr>SQL</abbr>, Microsoft&#8217;s <abbr>SQL</abbr>, MySQL&#8217;s <abbr>SQL</abbr>, PostgreSQL&#8217;s <abbr>SQL</abbr>, and SQLite&#8217;s <abbr>SQL</abbr>. Indeed, each of these products adds new <abbr>SQL</abbr> features over time, so even saying &#8220;SQLite&#8217;s <abbr>SQL</abbr>&#8221; is not sufficient to pin down exactly what you&#8217;re talking about. You need to say &#8220;the version of <abbr>SQL</abbr> that shipped with SQLite version X.Y.Z.&#8221;

util/htmlminimizer.py

@@ -36,7 +36,11 @@
                 else:
                     continue
             line = line.replace('&' + e + ';', chr(n))
-
+
+
+        # & followed by whitespace can be minimized as & (really!)
+        line = line.replace("& ", "& ")
+
         # strip leading and trailing whitespace, except inside <pre> blocks
         g = line.strip()
         if g.count('<pre'):

video.html

@@ -24,10 +24,8 @@ <h2 id=divingin>Diving In</h2>
 <caption>&lt;video> element support</caption>
 <thead>
 <tr><th title="Internet Explorer">IE<th title="Mozilla Firefox">Firefox<th title="Apple Safari">Safari<th title="Google Chrome">Chrome<th>Opera<th>iPhone<th>Android
-</thead>
 <tbody>
 <tr><td>9.0+<td>3.5+<td>3.0+<td>3.0+<td>10.5+<td>1.0+<td>2.0+
-</tbody>
 </table>
 
 <p>But support for the <code>&lt;video></code> element itself is really only a small part of the story. Before we can talk about <abbr>HTML5</abbr> video, you first need to understand a little about video itself. (If you know about video already, you can skip ahead to <a href=#what-works>What Works on the Web</a>.)
@@ -160,16 +158,13 @@ <h2 id=what-works>What Works on the Web</h2>
 <caption>Video codec support in shipping browsers</caption>
 <thead>
 <tr><th style="text-align:left">Codecs/container<th title="Internet Explorer">IE<th title="Mozilla Firefox">Firefox<th title="Apple Safari">Safari<th title="Google Chrome">Chrome<th>Opera<th>iPhone<th>Android
-</thead>
 <tbody>
 <tr><th>Theora+Vorbis+Ogg<td>&middot;<td>3.5+<td>&dagger;<td>5.0+<td>10.5+<td>&middot;<td>&middot;
 <tr><th>H.264+AAC+MP4<td>&middot;<td>&middot;<td>3.0+<td>5.0&ndash;?&Dagger;<td>&middot;<td>3.0+<td>2.0+
 <tr><th>WebM<td>&middot;<td>&middot;<td>&dagger;<td>6.0+<td>10.6+<td>&middot;<td>&middot;
-</tbody>
 <tfoot>
 <tr><td colspan=8 style="text-align:left">&dagger; Safari will play anything that QuickTime can play. QuickTime comes pre-installed with H.264/AAC/MP4 support. There are installable third-party plugins that add support for Theora and WebM, but each user needs to install these plugins before Safari will recognize those video formats.
 <tr><td colspan=8 style="text-align:left">&Dagger; Google Chrome will <a href=http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html>drop support for H.264</a> soon. <a href=http://blog.chromium.org/2011/01/more-about-chrome-html-video-codec.html>Read about why</a>.
-</tfoot>
 </table>
 
 <p>A year from now, the landscape will look significantly different as WebM is implemented in multiple browsers, those browsers ship non-experimental WebM-enabled versions, and users upgrade to those new versions.
@@ -178,17 +173,14 @@ <h2 id=what-works>What Works on the Web</h2>
 <caption>Video codec support in upcoming browsers</caption>
 <thead>
 <tr><th style="text-align:left">Codecs/container<th title="Internet Explorer">IE<th title="Mozilla Firefox">Firefox<th title="Apple Safari">Safari<th title="Google Chrome">Chrome<th>Opera<th>iPhone<th>Android
-</thead>
 <tbody>
 <tr><th>Theora+Vorbis+Ogg<td>&middot;<td>3.5+<td>&dagger;<td>5.0+<td>10.5+<td>&middot;<td>&middot;
 <tr><th>H.264+AAC+MP4<td>9.0+<td>&middot;<td>3.0+<td>&middot;<td>&middot;<td>3.0+<td>2.0+
 <tr><th>WebM<td>&nbsp;9.0+<sup>*</sup><td>4.0+<td>&dagger;<td>6.0+<td>10.6+<td>&middot;<td>2.3&Dagger;<sup>
-</tbody>
 <tfoot>
 <tr><td colspan=8 style="text-align:left">* Internet Explorer 9 will only support WebM &#8220;<a href="http://windowsteamblog.com/windows/b/bloggingwindows/archive/2010/05/19/another-follow-up-on-html5-video-in-ie9.aspx">when the user has installed a VP8 codec</a>,&#8221; which implies that Microsoft will not be shipping the codec themselves.
 <tr><td colspan=8 style="text-align:left">&dagger; Safari will play anything that QuickTime can play, but QuickTime only comes with H.264/AAC/MP4 support pre-installed.
 <tr><td colspan=8 style="text-align:left">&Dagger; Although Android 2.3 supports WebM, there are no hardware decoders yet, so battery life is a concern.
-</tfoot>
 </table>
 
 <p>And now for the knockout punch: