I've been doing a bit more Javascript recently, specifically using Prototype AJAX stuff with Google Maps ,and I've come up with a few guiding principles that have helped me keep stuff neat and tidy. I thought I'd share them with you, my handful of readers.
SCRIPT tags should live inside HEAD
There are very few reasons for having SCRIPT tags inside the document body. The main one, use of document.write() nearly always leads to ugly code. It's also not actually allowed in XHTML, despite most browsers accepting it as long as the page is delivered as text/html.
Furthermore, SCRIPT in the document body is in my opinion always the result of a perceived problem that's actually the result of poor architectural choices.
One of the emergent web technologies I'm very interested in is the Microformats project, a set of ways of making data embedded in HTML documents machie-readable.
Two of the most widely adopted Microformats are hCard and XFN.
hCard is a standardised method for marking up contact data. the point of it is that if all sites mark up contact data the same way, it's easier to parse.
XFN is all about the relationships between sites, and one of its key features is that it allows you to identify that a set of online profiles all belong to the same person (if they've voluntarily linked them).
HTML is great. It's the lingua franca of the web, and a fantastic format for exchange of hyperlinked information. However, it has its drawbacks - It typically relies on multiple external files, different browsers interpret it in different ways, and printing it is a bit of a minefield, even with the limited print CSS currently available.
So, sometimes it makes sense to present documents as a PDF as well. I've done so on this very site, with my CV, after finding that most recruitment sites won't except an HTML document, and recruiters just get confused when you attach one to an email (or send them a hyperlink).
The component I use is called dompdf. At its heart it is an HTML->PDF converter written completely in PHP, and is pretty simple to use. The code to convert some HTML to a PDF looks something like this:
<?php
// include in the dompdf library
require_once('dompdf_config.inc.php');
spl_autoload_register('DOMPDF_autoload');
// instance dompdf
$dompdf = new DomPDF();
$dompdf->set_paper('a4');
// tell the user-agent to expect a PDF
header('Content-type: application/pdf');
// load the HTML, convert it to PDF and output
$src = file_get_contents('document.html');
$dompdf->load_html($src);
$dompdf->render();
echo $dompdf->output();
?>
The first thing I should probably mention is that yes, despite saying I wouldn't, I got an iPhone 3G relatively soon after release. I'll skip the reasons why for now, that's for a future posting. Naturally the first thing I did upon getting my iPhone was to plug in my own site's URL into the browser and see how it did - you can see the result in the screengrab.
You know what - it's not bad. The site looks roughly as it should, and with a bit of zooming and panning around all the content is accessible. However, on first load the text isn't really legible and it's not making the best usage of the limited screen space on the iPhone. Also, the large header graphic makes loading a bit strenuous over an EDGE connection when I'm not in 3G coverage.
Simon has been blogging recently (here and here), about 'mobilising' websites (and has written a good article on the subject for php|architect) so it's something I've been thinking about lately and I decided to see what it would take to improve the way the page was rendered on iPhone.
Yahoo! recently launched a beta of their new Fire Eagle service and thanks to the kindness of Simon I managed to snag an invite code.
The simple concept behind Fire Eagle is that it's a web service that stores your geographical location. That's it. There are no other fancypants features to get in the way of the central message, everything else is left as an exercise for third parties.
Like Twitter, Fire Eagle straddles a blurry line between a website and an API. The site itself offers very little - a box to write your location in, and a map showing the last known location (see picture).
