Start downloading books now!
Launch ShelfServer
E-Book reader for iPhone & iPod Touch

Archive for the ‘Website’ Category

WordPress be gone!

Monday, September 7th, 2009

Minor detour to migrate to Movable Type…  I’m still not sure I like their Open Source attitude, but their security track record certainly beats WordPress into the ground. 

WP’s reaction to latest worm attack on their software kind of finished me off on the platform.  (“What?  You didn’t update the day after we released a new version?  Oops!  Hope you don’t get hacked!”)…  WordPress updates are a protracted pain in the neck, in part because their auto-updater seems not to work on the local files but only via FTP and because they’ve evidently never heard of SCP.  I can’t even remember the last server I built that had an FTP server on it….

For the record, neither this site nor my personal site were in fact hacked, but given that I was able to migrate all content to Movable Type in about the same time a WordPress update typically takes me to install, I’ll call it a step forward.

Even setting up the themes was relatively painless once I got the hang of their templating system.

In BookShelf related news, it’s been a fairly productive long weekend.  I’ve got image support in PDF’s mostly working and LIT support looking relatively stable.  I also managed to get BookShelf working more or less under the 3.0 SDK, but it’s crashing like mad for some reason.  Some posts I’ve read online suggest that it may be the fault of the 3.0 SDK and that a future build may fix it.  I can’t see any possible way I’ll have another update ready before Apple releases 3.1, so hopefully everything will just fall into place.

Espresso Live Preview with Chrome, hold the Copypasta

Wednesday, April 29th, 2009

It seems like ages now that I’ve sought the “perfect” website design tool. Ever since the dark days of FrontPage, I’ve loathed HTML generators with their bloated markup and non-standards compliance. Still, while hand-coding XHTML is clearly the One True Path to Enlightenment, I’m no Buddha; and being able to do things WYSIWYG from time to time is a nice crutch. At the very least, I need a quick at hand live preview so that while I walk the Eight (below the) Fold Path, I can get a feel for what my page looks like as I’m writing it.
I spent a few weeks not long ago searching out Mac web design tools and putting them through their paces. I looked at full WYSIWYG tools like Sandvox and Rapidweaver, but both were a bit too invasive in terms of site layout, and neither allowed mixing rich text editing with manual markup creation while still providing a constant live preview.
I’ve always got my beloved TextMate to fall back on for markup editing, but Apple-Tabbing and hitting refresh in a browser isn’t exactly what I have in mind for live preview.
I tried out Coda for a while, but decided to Refrain from that. Nice enough, but not quite. Finally I settled on Espresso, in part because it finally unlocked in the last MacHeist, but more because I already fell in love with MacRabit’s CSSEdit which I still use extensively for editing pages that haven’t quite turned into “sites” of their own yet.
Espresso’s not bad, all told. It’s got live preview which you can tear off into its own window. It would be nice if you could dock the preview window to the top or bottom of the editor, but so be it. Espresso doesn’t have any kind of rich text editing, but with the rapidly updating live preview, I can pretty much live without that. I still write better markup than any generator I’ve ever run into.
Still, I was left with the problem of chrome. Espresso does make some valiant effort to preview script files like PHP, but it took one look at my pages and curled up in a ball whimpering in the corner. So I write complicated PHP pages…. It was about that point I decided to scrap PHP for the content pages in the site anyways, so no biggie. But the last thing I wanted to do was end up with all the chrome on every single page. What a maintenance nightmare…

Instead, I came up with a publishing process which applies the site chrome to bare XHTML pages as the site is uploaded. Each page is well-formed XHTML which has an html and mostly empty head tag (the title is set in each page), and a body tag with only the main (center) content of each page. All of the top/side navigation, colors, CSS, etc. is left off.
I wrote a bit of Ant script which prepares the XHTML pages before upload. I went with Ant mostly because it’s the devil I know very well, being a Java coder by day. Bash, Perl, or <insert scripting language> would surely have served just as well. The Ant script compiles and executes a few Java classes which connect to my MySQL server to get news and FAQ’s which are output to XHTML snippets using Freemarker templates (again, the devil I use every day). Finally the Ant script executes an XSLT transformation on all of the XHTML files to apply the chrome and output static HTML files which contain all of the chrome, ready to upload.
This way I only have to update the chrome in one place, but I still don’t need any scripting on the webserver to display everything. All of that’s great except that live preview only ever shows black text on a white background. Not too helpful that. Today I finally found the missing link.

It’s always been in the back of my mind that web browsers can apply XSLT transforms to XML files on the fly when they load them. The Daily WTF’s XSLT Mandlebrot reminded me of that this morning. As it turns out, the Safari-based live preview in Espresso honors XML processing directives as well, and so my prayers were finally (mostly) answered.
I had to tweak my XSLT a little bit to make it work. It appears that Safari only has an XSLT 1.0 parser whereas Firefox happily takes XSLT 2.0. Fortunately I didn’t have to change much to make 1.0. I had to default some of the xsl:param elements that are normally sent in from Ant to sensible values and also rename all of my source files from .html to .xhtml to get everything to work.
The final result is that I have plain XHTML files with no chrome and live preview WITH the chrome appearing in Espresso. I can edit the basic XHTML files; and in less than a second, the preview updates with all of its chrome-y goodness. The changes to make it all work are pretty minimal.
First, the web pages themselves: All pages must be well-formed valid XHTML. A minimum example looks something like this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<?xml-stylesheet type="text/xsl" href="apply-style.xsl"?>
<html xmlns="">
<link href="style.css" rel="stylesheet" type="text/css"/>

<div>Put your main content here.</div>

The file starts with an xml declaration and the XHTML doctype followed by an xml-stylesheet processing directive. That’s where the real magic happens. That directive points to an XSL file in the same directory which can process this page’s XML to create the final page. Below that are the rest of a simple XHTML page. The link to the CSS fools Espresso into thinking that there’s a stylesheet that can be edited and overridden for this page. The link element is actually replaced by the XSLT, but it does the job of allowing the CSS to be edited. Finally inside the body is the main content of the page, no chrome required.
The XSLT file that brings the whole thing together looks something like this:

<?xml version="1.0" encoding="UTF-8" ?>
xsi:schemaLocation=" dtd/xhtml1-strict.xsd"

<xsl:strip-space elements="*"/>
doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
cdata-section-elements="html:style html:script"
<!-- Default is just copy everything. -->
<xsl:template match="@*|node()"><xsl:copy><xsl:apply-templates select="@*|node()"/></xsl:copy></xsl:template>

<xsl:template match="/">
<title><xsl:value-of select="/html:html/html:head/html:title"/></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="EBook reader for iPhone or iPod Touch"/>
<meta name="keywords" content="iphone,ebook,e-book,reader,electronic,ipod"/>
<link href="{$httpRoot}style.css" rel="stylesheet" type="text/css"/>
<div id="header">
Header stuff goes here.

<div id="content">
<div id="maincontent">
<xsl:comment>=======Main Content Starts Here=======</xsl:comment>
<xsl:apply-templates select="/html:html/html:body/*"/>
<xsl:comment>========Main Content Ends Here========</xsl:comment>

<div id="sidecontent">
Side-nav content here

<div id="footer">
<div id="copyrightdesign">Copyright © 2008-2009 Zachary Bedell. All rights reserved.</div>

The above template is greatly simplified, but it gets the idea across. The real version has code to include the XML files containing site news & FAQ’s where appropriate, a template which calculates the correct value of {$httpRoot} based on the current sub-directory level, and some other BookShelf specific stuff. When I need to update the chrome for the site, the XSLT is the only file I need to touch (plus maybe the CSS if it’s a formatting change). Once the XSLT is updated, re-running the Ant script generates new HTML files and SCP’s them up to my Mac Mini webserver.
To make all of this work in Espresso, you need to … do nothing. Just open or create a project for your files, open an XHTML file and launch a live preview for it. Done!

Copyright © 2008-2009 Zachary Bedell. All rights reserved.