From c5e8e2597c6e8b940590bbd48d2947ebdd3c90e8 Mon Sep 17 00:00:00 2001
From: Mark Pilgrim <mark@diveintomark.org>
Date: Sun, 8 Feb 2009 00:09:42 -0500
Subject: [PATCH] migrate js to jquery

--HG--
rename : dip3.packed.js => dip3.min.js
---
 case-study-porting-chardet-to-python-3.html |   3 +-
 dip3.css                                    |  14 +-
 dip3.js                                     | 220 +++++++-------------
 dip3.min.js                                 |   1 +
 dip3.packed.js                              |   1 -
 native-datatypes.html                       |  30 ++-
 porting-code-to-python-3-with-2to3.html     |   9 +-
 your-first-python-program.html              |  44 ++--
 8 files changed, 133 insertions(+), 189 deletions(-)
 create mode 100644 dip3.min.js
 delete mode 100644 dip3.packed.js

diff --git a/case-study-porting-chardet-to-python-3.html b/case-study-porting-chardet-to-python-3.html
index fd6e061..79514d7 100644
--- a/case-study-porting-chardet-to-python-3.html
+++ b/case-study-porting-chardet-to-python-3.html
@@ -4,7 +4,8 @@
 <meta charset="utf-8">
 <title>Case study: porting chardet to Python 3 - Dive into Python 3</title>
 <link rel="stylesheet" type="text/css" href="dip3.css">
-<script type="text/javascript" src="dip3.packed.js"></script>
+<script type="text/javascript" src="http://www.google.com/jsapi"></script>
+<script type="text/javascript" src="dip3.js"></script>
 <link rel="shortcut icon" href="data:image/ico,">
 <link rel="alternate" type="application/atom+xml" href="http://hg.diveintopython3.org/atom-log">
 <style type="text/css">
diff --git a/dip3.css b/dip3.css
index 1688d99..3e66cfd 100644
--- a/dip3.css
+++ b/dip3.css
@@ -3,8 +3,12 @@ body{margin:28px}
 body,.widgets a{font:normal medium 'Gill Sans','Gill Sans MT','Ikarius ADF',Candara,Jara,sans-serif;line-height:1.75;word-spacing:0.1em}
 a{background:transparent;text-decoration:none;border-bottom:1px dotted}
 a:hover{border-bottom:1px solid}
-a:link{color:#1b67c9}
+a:link,.widgets a{color:#1b67c9}
 a:visited{color:darkorchid}
+.widgets a{text-decoration:underline;border:0}
+.widgets,.widgets a,.download,.c{font-size:small}
+blockquote .widgets{float:left}
+blockquote .block{clear:left}
 h1 a,h2 a,h3 a,#nav a{color:inherit !important}
 abbr,acronym{letter-spacing:0.1em;text-transform:lowercase;font-variant:small-caps}
 h1,h2,h3,p,ul,ol{margin:1.75em 0;font-size:medium}
@@ -13,15 +17,13 @@ h2,h3{clear:both}
 form div{float:right}
 pre{white-space:pre-wrap;padding-left:2.154em;line-height:1.75;border-left:1px dotted}
 pre,kbd,code,samp{font-family:Consolas,Inconsolata,Monaco,monospace;font-size:medium;word-spacing:0}
-pre a{padding:0.4375em 0;border:0}
+pre a,.widgets a{padding:0.4375em 0;border:0}
 pre a:hover{border:0}
-.widgets,.widgets a,.download{font-size:small}
-.widgets a{color:#1b67c9;text-decoration:underline;padding:0}
 kbd{font-weight:bold}
 .prompt{color:#667}/*the neighbor of the beast*/
 td pre{margin:0;padding:0;border:0}
 li ol{margin:0}
-.c{text-align:center;font-size:small}
+.c{text-align:center}
 p.fancy:first-letter{float:left;background:transparent;color:gainsboro;padding:0.11em 4px 0 0;font:normal 4em/0.68 serif}
 blockquote.q{margin:auto;text-align:right;font-style:oblique}
 .skip a,.skip a:hover,.skip a:visited{position:absolute;left:0px;top:-500px;width:1px;height:1px;overflow:hidden}
@@ -36,7 +38,7 @@ span,tr + tr th:first-child{font-family:'Arial Unicode MS',sans-serif;font-style
 .note{margin-left:4.94em}
 .note span{display:block;float:left;font-size:xx-large;line-height:0.875em;margin:0 0.22em 0 -1.22em}
 table.simple th{font-family:inherit !important}
-.fr{width:100%;border:1px dotted}
+.fr{width:100%;border:1px dotted;margin-top:3.5em}
 .fr h4{margin-top:-1.2em;margin-left:-1em;width:8.5em;border:1px dotted;padding: 3px 3px 3px 13px;background:#fff;color:inherit;position:relative}
 .hover{background:#eee;color:inherit;cursor:default}
 i.baa{font-family:Baskerville,Constantia,Palatino,'Palatino Linotype','URW Palladio L','URW Bookman L',serif}/* "baa" = "best available ampersand" http://simplebits.com/notebook/2008/08/14/ampersands.html */
diff --git a/dip3.js b/dip3.js
index 7c996d7..f0cb395 100644
--- a/dip3.js
+++ b/dip3.js
@@ -1,152 +1,78 @@
-function getPreContent(elm) {
-    if (elm.nodeType == 3) {
-        // this string will be concatenated to a "<pre>" and displayed as HTML, so escape brackets
-        return elm.nodeValue.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+var COMPARISON_LANGUAGES = {'python2': 'Python 2', 'java': 'Java', 'perl5': 'Perl 5', 'clang': 'C'};
+var TOGGLE_BLOCK_TEXT = {'visible': 'hide', 'hidden': 'show'};
+
+google.load("jquery", "1");
+google.setOnLoadCallback(function() {
+$(document).ready(function() {
+/*
+  // toggle-able language comparisons
+  for (var lang in COMPARISON_LANGUAGES) {
+    $("blockquote.compare").filter("blockquote." + lang).each(function(i) {
+      $(this).wrapInner('<div class="block"></div>');
+      $(this).prepend('<div class="widgets">[ <a href="#" onclick="toggleComparisonNotes(\'' + lang + '\');return false" class="toggle">hide ' + COMPARISON_LANGUAGES[lang] + ' notes</a> ]</div>');
+    });
+  }
+*/
+
+  // "hide", "open in new window", and (optionally) "download" widgets on code & screen blocks
+  $("pre > code").each(function(i) {
+    var pre = $(this.parentNode);
+    if (pre.parents("table").length == 0) {
+      pre.addClass("code");
     }
-    if (elm.nodeType != 1) {
-        // don't include comments
-	return '';
-    }
-    if (elm.nodeName.toLowerCase() == 'span') {
-        // don't include callouts
-        return '';
-    }
-    if (elm.className && elm.className == 'widgets') {
-        // don't include the "view as plain text" and "download" widgets
-        return '';
-    }
-    var arChildren = elm.childNodes;
-    var count = arChildren.length;
-    var s = '';
-    for (var i = 0; i < count; i++) {
-        s += getPreContent(arChildren[i]);
-    }
-    return s;
+  });
+  $("pre.code, pre.screen").each(function(i) {
+    this.id = "autopre" + i;
+    $(this).wrapInner('<div class="block"></div>');
+    $(this).prepend('<div class="widgets">[<a class="toggle" href="javascript:toggleCodeBlock(\'' + this.id + '\')">' + TOGGLE_BLOCK_TEXT['visible'] + '</a>] [<a href="javascript:plainTextOnClick(\'' + this.id + '\')">open in new window</a>]</div>');
+
+    $(this).prev("p.download").each(function(i) {
+      $(this).next("pre").find("div.widgets").append(" " + $(this).html());
+      this.parentNode.removeChild(this);
+    });
+  });
+
+  // synchronized highlighting on callouts and their associated lines within code & screen blocks
+  $("pre.code, pre.screen").each(function() {
+    $(this).find("a:not([href])").each(function(i) {
+      var a = $(this);
+      var li = a.parents("pre").next("ol").find("li:nth-child(" + (i+1) + ")");
+      li.add(a).hover(function() { a.addClass("hover"); li.addClass("hover"); },
+                      function() { a.removeClass("hover"); li.removeClass("hover"); });
+    });
+  });
+
+  // synchronized highlighting on callouts and their associated table rows
+  $("table").each(function() {
+    $(this).find("tr:gt(0)").each(function(i) {
+      var tr = $(this);
+      var li = tr.parents("table").next("ol").find("li:nth-child(" + (i+1) + ")");
+      if (li.length > 0) {
+        li.add(tr).hover(function() { tr.addClass("hover"); li.addClass("hover"); },
+                         function() { tr.removeClass("hover"); li.removeClass("hover"); });
+      }
+    });
+  });
+}); /* document.ready */
+}); /* google.setOnLoadCallback */
+
+function toggleComparisonNotes(lang) {
+  // FIXME: save state in cookie, pass state to toggle(), reset text accordingly
+  $("blockquote." + lang + " div.block").toggle(false);
+  $("blockquote." + lang + " div.widgets a.toggle").text("show " + COMPARISON_LANGUAGES[lang] + " notes");
+}
+
+function toggleCodeBlock(id) {
+  $("#" + id).find("div.block").toggle();
+  var a = $("#" + id).find("a.toggle");
+  a.text(a.text() == TOGGLE_BLOCK_TEXT['visible'] ? TOGGLE_BLOCK_TEXT['hidden'] : TOGGLE_BLOCK_TEXT['visible']);
 }
 
 function plainTextOnClick(id) {
-    var elm = document.getElementById(id);
-    if (!elm) { return; }
-    var win = window.open("about:blank", "plaintext", "toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=600,height=400,left=35,top=75");
-    win.document.open();
-    win.document.write('<pre>' + getPreContent(elm));
-    win.document.close();
-}
-
-function toggleBlock(id) {
-    var elm = document.getElementById(id);
-    if (!elm) { return; }
-    var elmToggle = document.getElementById(id + 'toggle');
-    if (!elmToggle) { return; }
-    var elmBlock = document.getElementById(id + 'block');
-    if (!elmBlock) { return; }
-    if (elmToggle.firstChild.nodeValue == 'show') {
-	elmBlock.style.display = 'block';
-	elmToggle.firstChild.nodeValue = 'hide';
-    } else {
-	elmBlock.style.display = 'none';
-	elmToggle.firstChild.nodeValue = 'show';
-    }
-}
-
-window.onload = function() {
-// downloadable code samples
-var arPre = document.getElementsByTagName('pre');
-for (var i = arPre.length - 1; i >= 0; i--) {
-    var elmPre = arPre[i];
-    if (elmPre.className == 'screen' || elmPre.firstChild.nodeName.toLowerCase() == 'code') {
-	var id = elmPre.id;
-	if (!id) {
-	    id = "autopre" + i;
-	    elmPre.id = id;
-	}
-	var usDownload = '';
-	var elmDownload = elmPre.previousSibling;
-	while (elmDownload && (elmDownload.nodeType != 1)) {
-	    elmDownload = elmDownload.previousSibling;
-	}
-	if (elmDownload && (elmDownload.nodeName.toLowerCase() == 'p') && (elmDownload.className == 'download')) {
-	    usDownload = ' ' + elmDownload.innerHTML;
-	    elmDownload.parentNode.removeChild(elmDownload);
-	}
-	elmPre.innerHTML = '<div id="' + id + 'widgets" class="widgets">[<a id="' + id + 'toggle" class="toggle" href="javascript:toggleBlock(\'' + id + '\')">hide</a>] [<a id="' + id + 'plaintext" href="javascript:plainTextOnClick(\'' + id + '\')">open in new window</a>]' + usDownload + '</div><div id="' + id + 'block">' + elmPre.innerHTML + '</div>';
-    }
-  
-}
-
-// synchronized highlighting for code blocks with callouts
-// note: must do this after downloadable code samples loop because
-//       setting innerHTML destroys event handlers
-for (var i = arPre.length - 1; i >= 0; i--) {
-    var elmPre = arPre[i];
-    var arCallout = elmPre.getElementsByTagName('span');
-    if (arCallout.length == 0) { continue; }
-    var elmCalloutList = elmPre.nextSibling;
-    while (elmCalloutList && (elmCalloutList.nodeType != 1)) {
-        elmCalloutList = elmCalloutList.nextSibling;
-    }
-    if (elmCalloutList.nodeName.toLowerCase() != 'ol') { continue; }
-    var arCalloutListItem = elmCalloutList.getElementsByTagName('li');
-    if (arCalloutListItem.length != arCallout.length) {
-        alert('Number of callouts != number of callout list items:\n' + elmPre.innerHTML);
-        continue;
-    }
-    for (var j = arCallout.length - 1; j >= 0; j--) {
-        var elmCallout = arCallout[j].parentNode;
-        var elmCalloutListItem = arCalloutListItem[j];
-        elmCallout._li = elmCalloutListItem;
-        elmCalloutListItem._div = elmCallout;
-        elmCallout.onmouseover = function() {
-           this.className = 'hover';
-           this._li.className = 'hover';
-        };
-        elmCalloutListItem.onmouseover = function() {
-           this.className = 'hover';
-           this._div.className = 'hover';
-        };
-        elmCallout.onmouseout = function() {
-           this.className = '';
-           this._li.className = '';
-        };
-        elmCalloutListItem.onmouseout = function() {
-           this.className = '';
-           this._div.className = '';
-        };
-        
-    }
-}
-
-// synchronized highlighting for tables with callouts
-var arTables = document.getElementsByTagName('table');
-for (var i = arTables.length - 1; i >= 0; i--) {
-    var elmTable = arTables[i];
-    var olNotes = document.getElementById('skip' + elmTable.id);
-    if (!olNotes) { continue; }
-    var arNotes = olNotes.getElementsByTagName('li');
-    var arTableRows = elmTable.getElementsByTagName('tr');
-    if (arNotes.length == 0) { continue; }
-    for (var j = arTableRows.length - 1; j >= 1; j--) {
-        var elmTableRow = arTableRows[j];
-        var elmNote = arNotes[j - 1];
-        elmTableRow._li = elmNote;
-        elmNote._tr = elmTableRow;
-        elmTableRow.onmouseover = function() {
-           this.className = 'hover';
-           this._li.className = 'hover';
-        };
-        elmNote.onmouseover = function() {
-           this.className = 'hover';
-           this._tr.className = 'hover';
-        };
-        elmTableRow.onmouseout = function() {
-           this.className = '';
-           this._li.className = '';
-        };
-        elmNote.onmouseout = function() {
-           this.className = '';
-           this._tr.className = '';
-        };
-    }
-}
-
+  var clone = $("#" + id).clone();
+  clone.find("div.widgets, span").remove();
+  var win = window.open("about:blank", "plaintext", "toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=600,height=400,left=35,top=75");
+  win.document.open();
+  win.document.write('<pre>' + clone.html());
+  win.document.close();
 }
diff --git a/dip3.min.js b/dip3.min.js
new file mode 100644
index 0000000..29bc688
--- /dev/null
+++ b/dip3.min.js
@@ -0,0 +1 @@
+var COMPARISON_LANGUAGES={python2:"Python 2",java:"Java",perl5:"Perl 5",clang:"C"};var TOGGLE_BLOCK_TEXT={visible:"hide",hidden:"show"};google.load("jquery","1");google.setOnLoadCallback(function(){$(document).ready(function(){for(var a in COMPARISON_LANGUAGES){$("blockquote.compare").filter("blockquote."+a).each(function(b){$(this).wrapInner('<div class="block"></div>');$(this).prepend('<div class="widgets">[ <a href="#" onclick="toggleComparisonNotes(\''+a+'\');return false" class="toggle">hide '+COMPARISON_LANGUAGES[a]+" notes</a> ]</div>")})}$("pre > code").each(function(b){var c=$(this.parentNode);if(c.parents("table").length==0){c.addClass("code")}});$("pre.code, pre.screen").each(function(b){this.id="autopre"+b;$(this).wrapInner('<div class="block"></div>');$(this).prepend('<div class="widgets">[<a class="toggle" href="javascript:toggleCodeBlock(\''+this.id+"')\">"+TOGGLE_BLOCK_TEXT.visible+"</a>] [<a href=\"javascript:plainTextOnClick('"+this.id+"')\">open in new window</a>]</div>");$(this).prev("p.download").each(function(c){$(this).next("pre").find("div.widgets").append(" "+$(this).html());this.parentNode.removeChild(this)})});$("pre.code, pre.screen").each(function(){$(this).find("a:not([href])").each(function(d){var c=$(this);var b=c.parents("pre").next("ol").find("li:nth-child("+(d+1)+")");b.add(c).hover(function(){c.addClass("hover");b.addClass("hover")},function(){c.removeClass("hover");b.removeClass("hover")})})});$("table").each(function(){$(this).find("tr:gt(0)").each(function(c){var d=$(this);var b=d.parents("table").next("ol").find("li:nth-child("+(c+1)+")");if(b.length>0){b.add(d).hover(function(){d.addClass("hover");b.addClass("hover")},function(){d.removeClass("hover");b.removeClass("hover")})}})})})});function toggleComparisonNotes(a){$("blockquote."+a+" div.block").toggle(false);$("blockquote."+a+" div.widgets a.toggle").text("show "+COMPARISON_LANGUAGES[a]+" notes")}function toggleCodeBlock(c){$("#"+c).find("div.block").toggle();var b=$("#"+c).find("a.toggle");b.text(b.text()==TOGGLE_BLOCK_TEXT.visible?TOGGLE_BLOCK_TEXT.hidden:TOGGLE_BLOCK_TEXT.visible)}function plainTextOnClick(c){var b=$("#"+c).clone();b.find("div.widgets, span").remove();var a=window.open("about:blank","plaintext","toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=600,height=400,left=35,top=75");a.document.open();a.document.write("<pre>"+b.html());a.document.close()};
\ No newline at end of file
diff --git a/dip3.packed.js b/dip3.packed.js
deleted file mode 100644
index 1e56b41..0000000
--- a/dip3.packed.js
+++ /dev/null
@@ -1 +0,0 @@
-function getPreContent(e){if(e.nodeType==3){return e.nodeValue.replace(/</g,"&lt;").replace(/>/g,"&gt;")}if(e.nodeType!=1){return""}if(e.nodeName.toLowerCase()=="span"){return""}if(e.className&&e.className=="widgets"){return""}var d=e.childNodes;var c=d.length;var b="";for(var a=0;a<c;a++){b+=getPreContent(d[a])}return b}function plainTextOnClick(c){var b=document.getElementById(c);if(!b){return}var a=window.open("about:blank","plaintext","toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=600,height=400,left=35,top=75");a.document.open();a.document.write("<pre>"+getPreContent(b));a.document.close()}function toggleBlock(d){var c=document.getElementById(d);if(!c){return}var b=document.getElementById(d+"toggle");if(!b){return}var a=document.getElementById(d+"block");if(!a){return}if(b.firstChild.nodeValue=="show"){a.style.display="block";b.firstChild.nodeValue="hide"}else{a.style.display="none";b.firstChild.nodeValue="show"}}window.onload=function(){var p=document.getElementsByTagName("pre");for(var q=p.length-1;q>=0;q--){var c=p[q];if(c.className=="screen"||c.firstChild.nodeName.toLowerCase()=="code"){var n=c.id;if(!n){n="autopre"+q;c.id=n}var h="";var f=c.previousSibling;while(f&&(f.nodeType!=1)){f=f.previousSibling}if(f&&(f.nodeName.toLowerCase()=="p")&&(f.className=="download")){h=" "+f.innerHTML;f.parentNode.removeChild(f)}c.innerHTML='<div id="'+n+'widgets" class="widgets">[<a id="'+n+'toggle" class="toggle" href="javascript:toggleBlock(\''+n+'\')">hide</a>] [<a id="'+n+'plaintext" href="javascript:plainTextOnClick(\''+n+"')\">open in new window</a>]"+h+'</div><div id="'+n+'block">'+c.innerHTML+"</div>"}}for(var q=p.length-1;q>=0;q--){var c=p[q];var b=c.getElementsByTagName("span");if(b.length==0){continue}var e=c.nextSibling;while(e&&(e.nodeType!=1)){e=e.nextSibling}if(e.nodeName.toLowerCase()!="ol"){continue}var s=e.getElementsByTagName("li");if(s.length!=b.length){alert("Number of callouts != number of callout list items:\n"+c.innerHTML);continue}for(var o=b.length-1;o>=0;o--){var d=b[o].parentNode;var t=s[o];d._li=t;t._div=d;d.onmouseover=function(){this.className="hover";this._li.className="hover"};t.onmouseover=function(){this.className="hover";this._div.className="hover"};d.onmouseout=function(){this.className="";this._li.className=""};t.onmouseout=function(){this.className="";this._div.className=""}}}var k=document.getElementsByTagName("table");for(var q=k.length-1;q>=0;q--){var u=k[q];var r=document.getElementById("skip"+u.id);if(!r){continue}var l=r.getElementsByTagName("li");var m=u.getElementsByTagName("tr");if(l.length==0){continue}for(var o=m.length-1;o>=1;o--){var a=m[o];var g=l[o-1];a._li=g;g._tr=a;a.onmouseover=function(){this.className="hover";this._li.className="hover"};g.onmouseover=function(){this.className="hover";this._tr.className="hover"};a.onmouseout=function(){this.className="";this._li.className=""};g.onmouseout=function(){this.className="";this._tr.className=""}}}};
\ No newline at end of file
diff --git a/native-datatypes.html b/native-datatypes.html
index 42f0d68..4b0901d 100644
--- a/native-datatypes.html
+++ b/native-datatypes.html
@@ -4,7 +4,8 @@
 <meta charset="utf-8">
 <title>Native datatypes - Dive into Python 3</title>
 <link rel="stylesheet" type="text/css" href="dip3.css">
-<script type="text/javascript" src="dip3.packed.js"></script>
+<script type="text/javascript" src="http://www.google.com/jsapi"></script>
+<script type="text/javascript" src="dip3.js"></script>
 <link rel="shortcut icon" href="data:image/ico,">
 <link rel="alternate" type="application/atom+xml" href="http://hg.diveintopython3.org/atom-log">
 <style type="text/css">
@@ -87,14 +88,37 @@ body{counter-reset:h1 2}
 <samp class="prompt">>>> </samp><kbd>size &lt; 0</kbd>
 <samp>True</samp></pre>
 <h2 id="numbers">Numbers</h2>
-<p>FIXME
+<p>Numbers are awesome.  There are so many to choose from.  Python supports both integers and floating point numbers.
+<pre class="screen">
+<a><samp class="prompt">>>> </samp><kbd>type(1)</kbd>                 <span>&#x2460;</span></a>
+<samp>&lt;class 'int'></samp>
+<a><samp class="prompt">>>> </samp><kbd>1 + 1</kbd>                   <span>&#x2461;</span></a>
+<samp>2</samp>
+<a><samp class="prompt">>>> </samp><kbd>1 + 1.0</kbd>                 <span>&#x2462;</span></a>
+<samp>2.0</samp>
+<samp class="prompt">>>> </samp><kbd>type(2.0)</kbd>
+<samp>&lt;class 'float'></samp>
+<a><samp class="prompt">>>> </samp><kbd>1.12345678901234567890</kbd>  <span>&#x2463;</span></a>
+<samp>1.1234567890123457</samp>
+<a><samp class="prompt">>>> </samp><kbd>type(1000000000000000)</kbd>  <span>&#x2464;</span></a>
+<samp>&lt;class 'int'></samp></pre>
+<ol>
+<li>
+<li>
+<li>
+<li>
+<li>Integers can be arbitrarily large.
+</ol>
+<blockquote class="note compare python2">
+<p><span>&#x261E;</span>Python 2 had separate types for <code>int</code> and <code>long</code>.  The <code>int</code> datatype was limited by <code>sys.maxint</code>, which varied by platform but was usually <code>2<sup>32</sup>-1</code>.  Python 3 has just one integer type, which behaves mostly like the old <code>long</code> type from Python 2.
+</blockquote>
 <h2 id="lists">Lists</h2>
 <p>FIXME
 <h2 id="sets">Sets</h2>
 <p>FIXME
 <h2 id="dictionaries">Dictionaries</h2>
 <p>One of Python's most important datatypes is the dictionary, which defines one-to-one relationships between keys and values.
-<blockquote class="note compare-perl5">
+<blockquote class="note compare perl5">
 <p><span>&#x261E;</span>A dictionary in Python is like a hash in Perl 5.  In Perl 5, variables that store hashes always start with a <code>%</code> character.  In Python, variables can be named anything, and Python keeps track of the datatype internally.
 </blockquote>
 <p>Creating a dictionary is easy.  The syntax is similar to <a href="#sets">sets</a>, but instead of values, you have key-value pairs.  Once you have a dictionary, you can look up values by their key.
diff --git a/porting-code-to-python-3-with-2to3.html b/porting-code-to-python-3-with-2to3.html
index 236c902..1ad251a 100644
--- a/porting-code-to-python-3-with-2to3.html
+++ b/porting-code-to-python-3-with-2to3.html
@@ -4,7 +4,8 @@
 <meta charset="utf-8">
 <title>Porting code to Python 3 with 2to3 - Dive into Python 3</title>
 <link rel="stylesheet" type="text/css" href="dip3.css">
-<script type="text/javascript" src="dip3.packed.js"></script>
+<script type="text/javascript" src="http://www.google.com/jsapi"></script>
+<script type="text/javascript" src="dip3.js"></script>
 <link rel="shortcut icon" href="data:image/ico,">
 <link rel="alternate" type="application/atom+xml" href="http://hg.diveintopython3.org/atom-log">
 <style type="text/css">
@@ -911,13 +912,13 @@ except:
 <th>Python 2</th>
 <th>Python 3</th>
 </tr>
-<tr><th>&#x2460;</th>
+<tr><th></th>
 <td><code>aClassInstance.aClassMethod.im_func</code></td>
 <td><code>aClassInstance.aClassMethod.__func__</code></td></tr>
-<tr><th>&#x2461;</th>
+<tr><th></th>
 <td><code>aClassInstance.aClassMethod.im_self</code></td>
 <td><code>aClassInstance.aClassMethod.__self__</code></td></tr>
-<tr><th>&#x2462;</th>
+<tr><th></th>
 <td><code>aClassInstance.aClassMethod.im_class</code></td>
 <td><code>aClassInstance.aClassMethod.self.__class__</code></td></tr>
 </table>
diff --git a/your-first-python-program.html b/your-first-python-program.html
index 80c11d7..6f75371 100644
--- a/your-first-python-program.html
+++ b/your-first-python-program.html
@@ -4,7 +4,8 @@
 <meta charset="utf-8">
 <title>Your first Python program - Dive into Python 3</title>
 <link rel="stylesheet" type="text/css" href="dip3.css">
-<script type="text/javascript" src="dip3.packed.js"></script>
+<script type="text/javascript" src="http://www.google.com/jsapi"></script>
+<script type="text/javascript" src="dip3.js"></script>
 <link rel="shortcut icon" href="data:image/ico,">
 <link rel="alternate" type="application/atom+xml" href="http://hg.diveintopython3.org/atom-log">
 <style type="text/css">
@@ -89,8 +90,8 @@ if __name__ == "__main__":
 <p><span>&#x261E;</span>In some languages, functions (that return a value) start with <code>function</code>, and subroutines (that do not return a value) start with <code>sub</code>.  There are no subroutines in Python.  Everything is a function, all functions return a value (even if it's <code>None</code>), and all functions start with <code>def</code>.
 </blockquote>
 <p>The <code>approximate_size</code> function takes the two arguments &mdash; <var>size</var> and <var>a_kilobyte_is_1024_bytes</var> &mdash; but neither argument specifies a datatype.  (As you might guess from the <code>=True</code> syntax, the second argument is a boolean.  You'll learn what that syntax does in [FIXME xref-was-#apihelper].)  In Python, variables are never explicitly typed.  Python figures out what type a variable is and keeps track of it internally.
-<blockquote class="note compare-java compare-cplusplus">
-<p><span>&#x261E;</span>In Java, <abbr>C++</abbr>, and other statically-typed languages, you must specify the datatype of the function return value and each function argument.  In Python, you never explicitly specify the datatype of anything.  Based on what value you assign, Python keeps track of the datatype internally.
+<blockquote class="note compare java">
+<p><span>&#x261E;</span>In Java and other statically-typed languages, you must specify the datatype of the function return value and each function argument.  In Python, you never explicitly specify the datatype of anything.  Based on what value you assign, Python keeps track of the datatype internally.
 </blockquote>
 <h3 id="datatypes">How Python's datatypes compare to other programming languages</h3>
 <p>An erudite reader sent me this explanation of how Python compares to other programming languages:
@@ -131,7 +132,7 @@ if __name__ == "__main__":
 
     """</code></pre>
 <p>Triple quotes signify a multi-line string.  Everything between the start and end quotes is part of a single string, including carriage returns, leading white space, and other quote characters.  You can use them anywhere, but you'll see them most often used when defining a <code>docstring</code>.
-<blockquote class="note compare-perl">
+<blockquote class="note compare perl5">
 <p><span>&#x261E;</span>Triple quotes are also an easy way to define a string with both single and double quotes, like <code>qq/.../</code> in Perl 5.
 </blockquote>
 <p>Everything between the triple quotes is the function's <code>docstring</code>, which documents what the function does.  A <code>docstring</code>, if it exists, must be the first thing defined in a function (that is, on the next line after the function declaration).  You don't technically need to give your function a <code>docstring</code>, but you always should.  I know you've heard this in every programming class you've ever taken, but Python gives you an added incentive: the <code>docstring</code> is available at runtime as an attribute of the function.
@@ -142,14 +143,6 @@ if __name__ == "__main__":
 <p>FIXME
 <h3 id="styleconventions">Style conventions</h3>
 <p>FIXME
-<div class="fr">
-<h4>Further reading</h4>
-<ul>
-<li><a href="http://www.python.org/dev/peps/pep-0257/">PEP 257: Docstring Conventions</a>
-<li><a href="http://www.python.org/dev/peps/pep-0008/">PEP 8: Style Guide for Python Code</a>
-<li><a href="http://docs.python.org/3.0/tutorial/controlflow.html#documentation-strings">Python Tutorial: Documentation Strings</a>
-</ul>
-</div>
 <h2 id="everythingisanobject">Everything is an object</h2>
 <p>In case you missed it, I just said that Python functions have attributes, and that those attributes are available at runtime.  A function, like everything else in Python, is an object.
 <p>Run the interactive Python shell and follow along:
@@ -173,7 +166,7 @@ if __name__ == "__main__":
 <li>When you want to use functions defined in imported modules, you need to include the module name.  So you can't just say <code>approximate_size</code>; it must be <code>humansize.approximate_size</code>.  If you've used classes in Java, this should feel vaguely familiar.
 <li>Instead of calling the function as you would expect to, you asked for one of the function's attributes, <code>__doc__</code>.
 </ol>
-<blockquote class="note compare-perl">
+<blockquote class="note compare perl5">
 <p><span>&#x261E;</span><code>import</code> in Python is like <code>require</code> in Perl.  Once you <code>import</code> a Python module, you access its functions with <code><var>module</var>.<var>function</var></code>; once you <code>require</code> a Perl module, you access its functions with <code><var>module</var>::<var>function</var></code>.
 </blockquote>
 <h3 id="importsearchpath">The <code>import</code> search path</h3>
@@ -195,12 +188,6 @@ if __name__ == "__main__":
 <p>Everything in Python is an object, and almost everything has attributes and methods.  All functions have a built-in attribute <code>__doc__</code>, which returns the <var>docstring</var> defined in the function's source code.  The <code>sys</code> module is an object which has (among other things) an attribute called <var>path</var>.  And so forth.
 <p>Still, this doesn't answer the more fundamental question: what is an object?  Different programming languages define &#8220;object&#8221; in different ways.  In some, it means that <em>all</em> objects <em>must</em> have attributes and methods; in others, it means that all objects are subclassable.  In Python, the definition is looser; some objects have neither attributes nor methods (more on this in [FIXME xref-was-#datatypes]), and not all objects are subclassable (more on this in [FIXME xref-was-#fileinfo]).  But everything is an object in the sense that it can be assigned to a variable or passed as an argument to a function (more in this in [FIXME xref-was-#apihelp]).
 <p>This is so important that I'm going to repeat it in case you missed it the first few times: <em>everything in Python is an object</em>.  Strings are objects.  Lists are objects.  Functions are objects.  Even modules are objects.
-<div class="fr">
-<h4>Further reading</h4>
-<ul>
-<li><a href="http://docs.python.org/3.0/reference/"><cite>Python Reference Manual</cite></a> explains exactly what it means to say that <a href="http://docs.python.org/3.0/reference/datamodel.html#objects-values-and-types">everything in Python is an object</a>, because some people are pedantic and like to discuss this sort of thing at great length.
-</ul>
-</div>
 <h2 id="indentingcode">Indenting code</h2>
 <p>Python functions have no explicit <code>begin</code> or <code>end</code>, and no curly braces to mark where the function code starts and stops.  The only delimiter is a colon (<code>:</code>) and the indentation of the code itself.
 <pre><code>
@@ -223,22 +210,16 @@ if __name__ == "__main__":
 <li>The <code>for</code> loop also marks the start of a code block.  Code blocks can contain multiple lines, as long as they are all indented the same amount.  This <code>for</code> loop has three lines of code in it.  There is no other special syntax for multi-line code blocks.  Just indent and get on with your life.
 </ol>
 <p>After some initial protests and several snide analogies to Fortran, you will make peace with this and start seeing its benefits.  One major benefit is that all Python programs look similar, since indentation is a language requirement and not a matter of style.  This makes it easier to read and understand other people's Python code.
-<blockquote class="note compare-java">
+<blockquote class="note compare java">
 <p><span>&#x261E;</span>Python uses carriage returns to separate statements and a colon and indentation to separate code blocks.  <abbr>C++</abbr> and Java use semicolons to separate statements and curly braces to separate code blocks.
 </blockquote>
-<div class="fr">
-<h4>Further reading</h4>
-<ul>
-<li><a href="http://www.python.org/dev/peps/pep-0008/">PEP 8: Style Guide for Python Code</a> discusses good indentation style.
-</ul>
-</div>
 <h2 id="runningscripts">Running scripts</h2>
 <p>Python modules are objects and have several useful attributes.  You can use this to easily test your modules as you write them, by including a special block of code that executes when you run the Python file on the command line.  Take the last few lines of <code>humansize.py</code>:
 <pre><code>
 if __name__ == "__main__":
     print(approximate_size(1000000000000, False))
     print(approximate_size(1000000000000))</code></pre>
-<blockquote class="note compare-c">
+<blockquote class="note compare clang">
 <p><span>&#x261E;</span>Like <abbr>C</abbr>, Python uses <code>==</code> for comparison and <code>=</code> for assignment.  Unlike <abbr>C</abbr>, Python does not support in-line assignment, so there's no chance of accidentally assigning the value you thought you were comparing.
 </blockquote>
 <p>So what makes this <code>if</code> statement special?  Well, modules are objects, and all modules have a built-in attribute <code>__name__</code>.  A module's <code>__name__</code> depends on how you're using the module.  If you <code>import</code> the module, then <code>__name__</code> is the module's filename, without a directory path or file extension.
@@ -249,6 +230,15 @@ if __name__ == "__main__":
 <pre class="screen"><samp class="prompt">c:\home\diveintopython3> </samp><kbd>c:\python30\python.exe humansize.py</kbd>
 <samp>1.0 TB
 931.3 GiB</samp></pre>
+<div class="fr">
+<h4>Further reading</h4>
+<ul>
+<li><a href="http://www.python.org/dev/peps/pep-0257/">PEP 257: Docstring Conventions</a> explains what distinguishes a good <code>docstring</code> from a great <code>docstring</code>.
+<li><a href="http://docs.python.org/3.0/tutorial/controlflow.html#documentation-strings">Python Tutorial: Documentation Strings</a> also touches on the subject.
+<li><a href="http://www.python.org/dev/peps/pep-0008/">PEP 8: Style Guide for Python Code</a> discusses good indentation style.
+<li><a href="http://docs.python.org/3.0/reference/"><cite>Python Reference Manual</cite></a> explains what it means to say that <a href="http://docs.python.org/3.0/reference/datamodel.html#objects-values-and-types">everything in Python is an object</a>, because some people are pedantic and like to discuss that sort of thing at great length.
+</ul>
+</div>
 <p class="c">&copy; 2001-4, 2009 <span>&#x2133;</span>ark Pilgrim, <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">CC-BY-3.0</a>
 </body>
 </html>