earth tech

Here are [links to] templates used for the earth blogs pages. These templates are HTML encoded, so they should be copied and pasted rather than directly downloaded, since the HTML elements and blogger tags will show up as HTML entities in the HTML source code.

These templates is specific to blogger.com and probably won't work with other blogging services.

These templates are moving towards being XHTML and CSS standards compliant, but probably aren't there, yet. That is: the goal here is to write the template in such a way that the resulting blog pages will validate using the W3C validation services.

The blogger template for the ain't it strange blog: aint_it_strange.html

The template for blog null: blog_null-v3.html

The template for this [earth tech] blog is derived from the template for earth food: earth_tech-blog-template.html. Additionally, the stylesheet for earth tech is available: earth_tech.css

Labels: blog, blogger, css, template

posted by pd wilson   #   04:20

Problem

The problem we're solving here is that Firefox does not store a page icon when a bookmark is created which launches a Javascript to e.g. open a pop-up. Specifically, while the Google Bookmarks script is handy and functional, there is no icon stored for it, which means that if we - as some are wont to do - put the Google Bookmarks shortcut on the tool bar without a Name (in the Name: field of the Properties dialog), a generic icon is used which is difficult to differentiate from the rest of the toolbar icons at a glance.

To give you an idea of how annoying this is, here's a screen-shot of typical our FF Links toolbar on a typical day:

Where is the Bookmark Icon Stored?

In looking at the Firefox bookmarks.html file we find that bookmark icons are stored as non-standard attributes of HTML A elements, each of which contain a bookmark URL as an HREF attribute.

We haven't been able to find this documented anywhere, but if we look at the Firefox bookmark file [Firefox 2.0.0.5], the bookmark for the Firefox Start Page looks something like this:

  <DT><A HREF="http://en-us.start.mozilla.com/firefox"
  LAST_VISIT="1162959544"
  ICON="data:image/png;base64,
  iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/
  9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJ
  ZTwAAAHWSURBVHjaYvz//z8DJQAggJiQOe/fv2fv7Oz8rays/N+VkfG/iYnJfyD/1+rVq7
  ffu3dPFpsBAAHEAHIBCJ85c8bN2Nj4vwsDw/8zQLwKiO8CcRoQu0DxqlWrdsHUwzBAAIGJ
  mTNnPgYa9j8UqhFElwPxf2MIDeIrKSn9FwSJoRkAEEAM0DD4DzMAyPi/G+QKY4hh5WAXGf
  8PDQ0FGwJ22d27CjADAAIIrLmjo+MXA9R2kAHvGBA2wwx6B8W7od6CeQcggKCmCEL8bgwx
  YCbUIGTDVkHDBia+CuotgACCueD3TDQN75D4xmAvCoK9ARMHBzAw0AECiBHkAlC0Mdy7x9
  ABNA3obAZXIAa6iKEcGlMVQHwWyjYuL2d4v2cPg8vZswx7gHyAAAK7AOif7SAbOqCmn4Ha
  3AHFsIDtgPq/vLz8P4MSkJ2W9h8ggBjevXvHDo4FQUQg/kdypqCg4H8lUIACnQ/SOBMYI8
  bAsAJFPcj1AAEEjwVQqLpAbXmH5BJjqI0gi9DTAAgDBBCcAVLkgmQ7yKCZxpCQxqUZhAEC
  CJ4XgMl493ug21ZD+aDAXH0WLM4A9MZPXJkJIIAwTAR5pQMalaCABQUULttBGCCAGCnNzg
  ABBgAMJ5THwGvJLAAAAABJRU5ErkJggg=="
  LAST_CHARSET="ISO-8859-1"
  ID="rdf:#$.vPhC3">Firefox Start Page</A>

The example above has been line-wrapped and HTML encoded, but clearly, the icon used for this bookmark is defined by the content of the [non-standard] ICON attribute of the A element. Furthermore, we may deduce a few things from the definition shown:

• data: - this implies that something besides data might be stored here. Since we don't have a specification for this attribute value, we'll pass over this for the moment and just plan on using it "as is" - that is, we will create a bookmark that uses this same format for the ICON attribute
• image/png;base64 - This appear to be a MIME-type/encoding specification - we're guessing that the 'base64' goes with the [more obviously a MIME-type] 'image/png' since it is separated by a semi-colon instead of a comma...
• The string after the comma is obviously uuencoded data - the image itself, stored as ASCII characters pto avoid the problems inherent with trying to put binary image data in a text file]

Solution

Since

1. we don't have a base64 encoder handy,
2. we want to avoid manual editting of bookmarks.html
3. the Firefox bookmark property sheet doesn't provide a means to set the icon to use for the bookmark
4. we want to do this as much as possible within Firefox

we propose to follow the following steps to accomplish the goal of setting the ICON attribute of a bookmark which launches a Javascript target:

1. Create a Shortcut Icon Image to use in the bookmark
2. Create a webpage that has the bookmark/page icon we created
3. Navigate Firefox to the page we created
4. Boomark the page in Firefodx
5. Edit that bookmark, removing the page URL, and adding the Javascript
6. Clear the 'Name' property of the bookmark

Create an Shortcut Icon Image

Here is a link to the shortcut icon we created for the 'Add Google Bookmark' script: star-gold+16.png

This icon was created using The GIMP - a description of creating the PNG image is beyond the scope of this post.

Create a Web Page that Uses the Shortcut Icon

This is pretty simple, but assumes access to a web server - for some reason it doesn't seem to work with file:// URLs.

Here is the code for the HTML file we use:

  <html>
    <head>
      <title>example</title>
      <link rel="shortcut icon"
      href="star-gold+16.png" />
    </head>
    <body>
      <p>Example of shortcut icon META element</p>
    </body>
  </html>

This file is a here: http://blogs.earthside.org/earth_tech/uploads.html

Creating the Bookmark

Here is a screen shot of the browser showing the newly created toolbar icon - a plain file icon with labeled 'example'.

Note that you will need to click the newly created shortcut once to get the new icon to show up on the toolbar - for some reason the icon doesn't load when the shortcut is created [this can be seen if you watch the bookmarks.html file - it doesn't update until you click the new shortcut for the first time and the icon loads - it may be that the shortcut would update if FF closed, but...].

Here is a screenshot of the browser after the toolbar shortcut icon has loaded:

Next we open the properties page for the old Gmark shortcut and copy the Jacascript out of the Location field.

Below is a copy of the the Javascript - this all has to go on one line for in the bookmark Properties dialog Location field:

 javascript:(function(){var
 a=window,b=document,
 c=encodeURIComponent,
 d=a.open(
 %22http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=%22
 +(b.location)+%22&title=%22+c(b.title),%22bkmk_popup%22,
 %22left=%22+((a.screenX||a.screenLeft)+10)+%22,
 top=%22+((a.screenY||a.screenTop)+10)+%22,height=420px,width=550px,
 resizable=1,alwaysRaised=1%22);a.setTimeout(function(){d.focus()},
 300)})();

Here is a link to a text file which contains the Javascript shown above, but all on one line, so it can be easily copied and pasted [the line is 392 characters in length]: gmark.js

1. Open the properties dialog for the 'example' shortcut
2. Clear the 'Name' field
3. Paste the Javascript code into the 'Location' field
4. Hit the 'OK' button to save the bookmark

Here is a screen-shot of the 'example' properties after the above changes have been made:

The DT element line from the bookmarks.html file with the Javascript target and the custom icon [saved to a text file]: http://blogs.earthside.org/earth_tech/uploads/gmark.txt

The toolbar with the new shortcut icon which launches the Javascript to add a Google Bookmark:

Notes:

1. In the screenshot above, the button labeled "Gmark" has the script to add the current browser page to Google Bookmarks stored in its "Location" property - the script is launched when the button is clicked.
2. This functionality [add Google Bookmark] exists in the IE Google toolbar, but not in the Firefox version.
3. The Gmark button is the only button currently on the toolbar that contains a Javascript, but it's so ugly that it would be nice to have a way to add an icon to the buttons which launch Javascript before any more are added.
4. The Firefox bookmark property sheet does not provide a way to set the icon to be displayed for a given bookmark.
5. The Firefox bookmark property sheet does allow a blank "Name" property field, unlike IE, which treats the bookmark name as a filename, and hence will not allow the bookmark to exist without a filename.
6. There are almost certainly others [e.g. manually Base-64 encoding the icon image], but this solution will work for trivial cases, since it leverages the "built-in" Firefox icon storage functionality - this has the advantage of not requiring you to edit the bookmarks.html file.
7. Based on the previous note, above, it should be possible to create a PHP or CGI scripted server page which will allow this process to be somewhat automated [e.g. allow the user to select a favicon from a list, then return a page which has that image as a page icon - the Javascript could be added to the bookmark created for the generated page, preserving the ICON attribute of the bookmark A element...
8. Various of the attribute names used in the Firefox bookmarks file are not defined in HTML, and so are not properly speaking "legal" HTML - we don't really care about that here, but it's worth noting if you are interested in manipulating the bookmarks.html file directly [ignoring the instructions from mozilla to the contrary].
9. Comletely unrelated, but handy: If you click a button on the toolbar while holding down the Shift key, the target URL opens in a new window. Ctrl+<click> opens the target in a new tab.

Labels: bookmarks, firefox, graphics, icons, javascript

posted by pd wilson   #   02:40

I don't usually blog about other blogs, but Eater's post about the open sourcing of MIT's curriculum is worth taking a look at, if only because he's propagating an idea that I've been pushing for quite a few years: Online [networked], open sourced public schools. Note that there is quite a bit of effort to create the definitive "online high school", but so far everything I've seen [e.g. in state of Ohio] is closed source, and is basically designed to keep the students off the internet. Public schools in the US are long way from being willing to use the Internet to educate students. From the luddite POV adopted by most "Boards of Education" [in my experience], the Internet is something the students must be protected from, not something that they should be allowed to reference as a source in a term paper...

posted by pd wilson   #   07:40

Checking out the JavaScript drawing program example called Doodle at the webreference.com section on JavaScript Programming, I found this bit of CSS that does syntax highlighting: SyntaxHighlighter.css [http://www.webreference.com/css/SyntaxHighlighter.css]

See also the Doodle Javascript programming example provided by WebReference for use of these style classes. Nice bit of work.

Here is a trivial example of the HTML to use of some of SyntaxHighlighter.css classes [from the example article, page 3]:

<div style="width: 700px;">
<textarea name="code" class="javascript" cols="60" rows="10"> 

<P class=code>&lt;script src="core.js" 
type=text/javascript&gt;&lt;/script&gt;<BR>&lt;script src="graphics.js" 
type=text/javascript&gt;&lt;/script&gt;<BR>&lt;script src="canvas.js" 
type=text/javascript&gt;&lt;/script&gt;<BR>&lt;script 
type=text/javascript&gt;<BR>var canvas = null;<BR>function initCanvas() 
{<BR>&nbsp;&nbsp;&nbsp;canvas = new 
Canvas($('theCanvas'));<BR>}<BR>window.setTimeout(initCanvas, 
10);<BR>&lt;/script&gt;<BR>&nbsp;&nbsp;&nbsp;&lt;div id="theFrame" 
class="CanvasFrame"&gt;&lt;/div&gt;<BR>&nbsp;&nbsp;&nbsp;&lt;div id="theCanvas" 
class="Canvas"&gt;&lt;/div&gt;<BR>&lt;/div&gt;</P>

</textarea>
</div>

Other examples occur in the article.

This CSS seems to make a nice complement to the PHP syntax highlighter blogged about elsewhere.

Labels: blog, blogger, code, css, html, javascript, php, source, syntax highlighter, web

posted by pd wilson   #   05:10

Scott Hurring's .emacs has some lines of interest:

;; Turn ON mouse wheel support
(mouse-wheel-mode)

This mouse-wheel-mode doesn't seem to be available in GNU Emacs 20.4.1 (sparc-sun-solaris2.5.1) - instead a couple functions are defined in the .emacs:

;; Mousewheel
(defun sd-mousewheel-scroll-up (event)
  "Scroll window under mouse up by five lines."
  (interactive "e")
  (let ((current-window (selected-window)))
    (unwind-protect
        (progn 
          (select-window (posn-window (event-start event)))
          (scroll-up 5))
      (select-window current-window))))

(defun sd-mousewheel-scroll-down (event)
  "Scroll window under mouse down by five lines."
  (interactive "e")
  (let ((current-window (selected-window)))
    (unwind-protect
        (progn 
          (select-window (posn-window (event-start event)))
          (scroll-down 5))
      (select-window current-window))))

(global-set-key (kbd "") 'sd-mousewheel-scroll-up)
(global-set-key (kbd "") 'sd-mousewheel-scroll-down)

Seems like quite a lot of code, but this probably is what's obscured by the mwheel and mouse-wheel-mode modules.

According to the Fedora Emacs docs, the following should work with "the older version 20 of Emacs":

;; Enable wheelmouse support by default
(require 'mwheel)

However, this doesn't seem to work with the Solaris version - probably because mwheel appears is not installed.

Other items of interest here include:

;; show line numbers at bottom
(setq line-number-mode t)
(setq column-number-mode t)
(line-number-mode t)
(column-number-mode t)

;; no crap in *scratch* on startup
(setq inhibit-startup-message t)
(setq inhibit-startup-echo-area-message t)

Labels: .emacs, emacs, mouse, wheel

posted by pd wilson   #   19:52