From b31972acf968c324cc91eacba1b752b8ee26ff93 Mon Sep 17 00:00:00 2001 From: Mark Pilgrim Date: Wed, 18 May 2011 15:32:49 -0400 Subject: [PATCH] minimization fiddling [closes issue 3] --- Makefile | 1 + canvas.html | 18 ------------------ forms.html | 10 ---------- geolocation.html | 2 -- history.html | 2 -- j/ga.js | 2 +- offline.html | 2 -- storage.html | 7 ------- util/htmlminimizer.py | 6 +++++- video.html | 8 -------- 10 files changed, 7 insertions(+), 51 deletions(-) diff --git a/Makefile b/Makefile index 39de9db..ae97192 100644 --- a/Makefile +++ b/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|;||g" build/*.html minimize-js: init ${JAVA} -jar util/compiler.jar -js build/j/dih5.js > build/j/dih5.min.js diff --git a/canvas.html b/canvas.html index 2ea0a04..a6e2e42 100644 --- a/canvas.html +++ b/canvas.html @@ -23,13 +23,10 @@

Diving In

Basic <canvas> support IEFirefoxSafariChromeOperaiPhoneAndroid - 7.0+*3.0+3.0+3.0+10.0+1.0+1.0+ - * Internet Explorer 7 and 8 require the third-party explorercanvas library. Internet Explorer 9 supports <canvas> natively. -

So what does a canvas look like? Nothing, really. A <canvas> element has no content and no border of its own.

@@ -63,13 +60,10 @@

Simple Shapes

IEFirefoxSafariChromeOperaiPhoneAndroid -
7.0+*3.0+3.0+3.0+10.0+1.0+1.0+ -
* Internet Explorer 7 and 8 require the third-party explorercanvas library. Internet Explorer 9 supports <canvas> shapes natively. -

Every canvas starts out blank. That’s boring! Let’s draw something.

@@ -176,13 +170,10 @@

Paths

IEFirefoxSafariChromeOperaiPhoneAndroid -
7.0+*3.0+3.0+3.0+10.0+1.0+1.0+ -
* Internet Explorer 7 and 8 require the third-party explorercanvas library. Internet Explorer 9 supports <canvas> paths natively. -

gerbil sitting on a chair with a quill and ink jar @@ -277,14 +268,11 @@

Text

IEFirefoxSafariChromeOperaiPhoneAndroid -
7.0+*3.0+†3.0+3.0+10.0+1.0+1.0+ -
* Internet Explorer 7 and 8 require the third-party explorercanvas library. Internet Explorer 9 supports canvas text natively.
† Mozilla Firefox 3.0 requires a compatibility shim. -

In addition to drawing lines on a canvas, 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’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 @@

Gradients

IEFirefoxSafariChromeOperaiPhoneAndroid -
linear gradients7.0+*3.0+3.0+3.0+10.0+1.0+1.0+
radial gradients9.0+3.0+3.0+3.0+10.0+1.0+1.0+ -
* Internet Explorer 7 and 8 require the third-party explorercanvas library. Internet Explorer 9 supports <canvas> gradients natively. -

Earlier in this chapter, you learned how to draw a rectangle filled with a solid color, then a line stroked with a solid color. But shapes and lines aren’t limited to solid colors. You can do all kinds of magic with gradients. Let’s look at an example.

@@ -450,13 +435,10 @@

Images

IEFirefoxSafariChromeOperaiPhoneAndroid -
7.0+*3.0+3.0+3.0+10.0+1.0+1.0+ -
* Internet Explorer 7 and 8 require the third-party explorercanvas library. Internet Explorer 9 supports <canvas> images natively. -

Here is a cat: diff --git a/forms.html b/forms.html index e270bc2..36856ba 100644 --- a/forms.html +++ b/forms.html @@ -28,10 +28,8 @@

Placeholder Text

Placeholder support IEFirefoxSafariChromeOperaiPhoneAndroid - ·3.7+4.0+4.0+11.0+4.0+· -

The first improvement HTML5 brings to web forms is the ability to set placeholder text in an input field. 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 @@

Autofocus Fields

Autofocus support IEFirefoxSafariChromeOperaiPhoneAndroid - ·4.0+4.0+3.0+10.0+·· -

angry guy with arms up @@ -323,7 +319,6 @@

Date Pickers

Date picker support Input TypeOperaEvery other browser - type="date"9.0+· type="month"9.0+· @@ -331,7 +326,6 @@

Date Pickers

type="time"9.0+· type="datetime"9.0+· type="datetime-local"9.0+· -

This is how Opera renders <input type="date">: @@ -436,10 +430,8 @@

Form Validation

Form validation support IEFirefoxSafariChromeOperaiPhoneAndroid - ·4.0+5.0+6.0+9.0+·· -

In this chapter, I’ve talked about new input types and new features like auto-focus form fields, but I haven’t mentioned what is perhaps the most exciting part of HTML5 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. HTML5 can never replace your server-side validation, but it might someday replace your client-side validation. @@ -480,10 +472,8 @@

Required Fields

<input required> support IEFirefoxSafariChromeOperaiPhoneAndroid - ·4.0+··9.0+·· -

HTML5 form validation isn’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. diff --git a/geolocation.html b/geolocation.html index a71bce0..e5b8c7e 100644 --- a/geolocation.html +++ b/geolocation.html @@ -40,10 +40,8 @@

The Geolocation API

Geolocation API support IEFirefoxSafariChromeOperaiPhoneAndroid - 9.0+3.5+5.0+5.0+10.6+3.0+2.0+ -

Along with support for the standard geolocation API, there are a plethora of device-specific APIs on other mobile platforms. I’ll cover all that later in this chapter. diff --git a/history.html b/history.html index 1b31920..e301f5d 100644 --- a/history.html +++ b/history.html @@ -55,10 +55,8 @@

The How

history.pushState support IEFirefoxSafariChromeOperaiPhoneAndroid - ·4.0+5.0+8.0+·4.2.1+· -

dive into dogs is a straightforward but non-trivial example of using the HTML5 history API. 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 and update the URL in the browser location bar, without triggering a full page refresh. In unsupported browsers — or, indeed, supported browsers where the user has disabled scripting — the links simply function as regular links, taking you to a new page with a full page refresh. diff --git a/j/ga.js b/j/ga.js index 44c6f9e..8315ba2 100644 --- a/j/ga.js +++ b/j/ga.js @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/offline.html b/offline.html index 6bd1b28..b6dd95d 100644 --- a/offline.html +++ b/offline.html @@ -26,10 +26,8 @@

Diving In

Offline support IEFirefoxSafariChromeOperaiPhoneAndroid - ·3.5+4.0+5.0+10.6+2.1+2.0+ -

❧ diff --git a/storage.html b/storage.html index d6e95ee..6e6f114 100644 --- a/storage.html +++ b/storage.html @@ -67,10 +67,8 @@

Introducing HTML5 Storage

HTML5 Storage support IEFirefoxSafariChromeOperaiPhoneAndroid - 8.0+3.5+4.0+4.0+10.5+2.0+2.0+ -

From your JavaScript code, you’ll access HTML5 Storage through the localStorage object on the global window object. Before you can use it, you should detect whether the browser supports it. @@ -160,16 +158,13 @@

Tracking Changes to the HTML5 Storage Area

StorageEvent Object PropertyTypeDescription - keystringthe named key that was added, removed, or modified oldValueanythe previous value (now overwritten), or null if a new item was added newValueanythe new value, or null if an item was removed url*stringthe page which called a method that triggered this change - * Note: the url property was originally called uri. Some browsers shipped with that property before the specification changed. For maximum compatibility, you should check whether the url property exists, and if not, check for the uri property instead. -

The storage event is not cancelable. From within the handle_storage callback function, there is no way to stop the change from occurring. It’s simply a way for the browser to tell you, “hey, this just happened. There’s nothing you can do about it now; I just wanted to let you know.” @@ -264,10 +259,8 @@

Beyond Named Key-Value Pairs: Competing Visions

Web SQL Database support IEFirefoxSafariChromeOperaiPhoneAndroid - ··4.0+4.0+10.5+3.0+2.0+ -

Of course, if you’ve used more than one database product in your life, you are aware that “SQL” is more of a marketing term than a hard-and-fast standard. (Some would say the same of “HTML5,” but never mind that.) Sure, there is an actual SQL specification (it’s called SQL-92), but there is no database server in the world that conforms to that and only that specification. There’s Oracle’s SQL, Microsoft’s SQL, MySQL’s SQL, PostgreSQL’s SQL, and SQLite’s SQL. Indeed, each of these products adds new SQL features over time, so even saying “SQLite’s SQL” is not sufficient to pin down exactly what you’re talking about. You need to say “the version of SQL that shipped with SQLite version X.Y.Z.” diff --git a/util/htmlminimizer.py b/util/htmlminimizer.py index 2bf1ece..226b91a 100644 --- a/util/htmlminimizer.py +++ b/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 

 blocks
         g = line.strip()
         if g.count('Diving In
 <video> element support
 
 IEFirefoxSafariChromeOperaiPhoneAndroid
-
 
 9.0+3.5+3.0+3.0+10.5+1.0+2.0+
-
 
 
 
But support for the <video> element itself is really only a small part of the story. Before we can talk about HTML5 video, you first need to understand a little about video itself. (If you know about video already, you can skip ahead to What Works on the Web.)
@@ -160,16 +158,13 @@ 
What Works on the Web

 Video codec support in shipping browsers
 
 Codecs/containerIEFirefoxSafariChromeOperaiPhoneAndroid
-
 
 Theora+Vorbis+Ogg·3.5+†5.0+10.5+··
 H.264+AAC+MP4··3.0+5.0–?‡·3.0+2.0+
 WebM··†6.0+10.6+··
-
 
 † 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.
 ‡ Google Chrome will drop support for H.264 soon. Read about why.
-
 
 
 
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 @@ 
What Works on the Web

 Video codec support in upcoming browsers
 
 Codecs/containerIEFirefoxSafariChromeOperaiPhoneAndroid
-
 
 Theora+Vorbis+Ogg·3.5+†5.0+10.5+··
 H.264+AAC+MP49.0+·3.0+··3.0+2.0+
 WebM 9.0+*4.0+†6.0+10.6+·2.3‡
-
 
 * Internet Explorer 9 will only support WebM “when the user has installed a VP8 codec,” which implies that Microsoft will not be shipping the codec themselves.
 † Safari will play anything that QuickTime can play, but QuickTime only comes with H.264/AAC/MP4 support pre-installed.
 ‡ Although Android 2.3 supports WebM, there are no hardware decoders yet, so battery life is a concern.
-
 
 
 
And now for the knockout punch: