Beginner: Commodore 64

Ah the good old Commodore 64 with it’s dot matrix printer and mega floppy disks. I still remember the keyboard command chants I memorized as a child “shift-l-shift-o-shift-a-shift-d-space-shift-quote-shift-4-0-shift-4-comma-8-return-shift-l-shift-i-shift-s-shift-t-return or better know as

LOAD "$0",8
LIST

The Commodore was more an assembly of different boxes that clicked and whirred more than a Kitchenaid mixer. My little fingers had to work extra hard to press the keys on the heaviest keyboard you could imagine. A big steel case acted as a both a container for the parts and a stand for the TV/monitor. My big heavy steel joystick was well worn from hours of playing Jumpman but wold probably still work today if I could find a DE9M to USB adapter (do those actually exist?). The funniest thing is the monitor is still alive, hooked up to a dusty old VCR in the basement of my in-laws along with an original Nintendo!

Learning: Macintosh LC

The LC’s screen was tiny at 512×384 but I didn’t care because it was a million times better than the Commodore. The LC gave me my first real experience with graphical computing and desktop publishing. I spent hours learning how to use it, breaking it and fixing it. I remember specifically preparing a repot for school, learning all the ins and outs of Page-Maker and document layout. I did so well that my teacher actually commented on how well done it was but also said that it looked like I had a lot of help (which I hadn’t)—a life lesson learned there.

A few years later in high school, I applied for a job in the composing department at the local newspaper. They still relied heavily on X-Acto knives and wax to assemble the 40 page bi-weekly paper but the expertise I built up at home, fiddling and working with the LC, gave me the knowledge to transition the paper to an entirely digital workflow, with a few networked Power Macintosh 7200‘s and some new gumdrop iMac G3′s.

Creative: PowerMac 7500

In the later years of high school my entrepreneurial bug hit and I decided to go into business for myself doing desktop publishing. The LC with the Apple StyleWriter printer wasn’t cutting it anymore so we acquired the Power Macintosh 7500 along with an Apple AudioVision display. This was a big heavy machine relative to the LC but it lasted many years and served it’s purpose well, earning me enough money to pay for university and continue my desktop publishing career. If you happen to have lived in southern Ontario and read the Nassagaweya News during the late 90′s it was designed and produced on this machine.

Misfits

At this same time, I also had a PowerMac 5400CD and a PowerBook 140 that I’d acquired second hand. Neither were as powerful or as useful as the 7500 but served as a secondary and somewhat portable machines to work the growing pile of peripherals I was acquiring such as scanners, EZ Drives, Zip drives and various printers.

Student: PowerBook 2400c

I went to Ryerson University in Toronto, about an hour commute there and back everyday on the train. I didn’t want to waste the time staring out the window so I invested in the PowerBook 2400. This machine came without a CD drive which made it relatively small and was easy to carry in my bag. The unfortunate thing was that the battery malfunctioned after only a year and a half but I was unable to get it fixed because the model was only distributed in the US and I was in Canada. It worked well plugged in but lost the usefulness of a portable computer. It also lacked an ethernet port so when the internet was starting to become popular it eventually became a paperweight. I still have it and switch it on every once in awhile to remember the good old days of System 7.5.

Entreprenure: PowerMac G4

Near the end of university I started to get more serious about desktop publishing as a career and picked up a new G4 and a nice Lacie monitor. I had this great machine for several years, tinkering with upgrades and learning a lot about how computers work in general. Though it wasn’t really “portable” the case design with the handles allowed me to lug it back an forth to work every day (to the office of a web design company I started). Today, it still runs but is mainly used by my in-laws to sync their iPods with their music.

Deskjob: PowerMac G5

This wasn’t really “my” computer but was the one we acquired at work so that I could stop lugging my G4 back and forth. I lovingly nicknamed it the “wind tunnel” for the roaring sound it would make when all the fans kicked in. It didn’t happen often but when it did you could hear it four or five offices away from mine. It was a nice fast machine but I don’t think I ever really took advantage of the quad processors.

Writer: 17″ MacBook Pro (discrete)

Along with the entrepreneurial bug, I also began writing so I needed something portable. The MacBook was great and had a beautiful monitor however, over time, I found it too large and bulky. Carrying around a 17″ MacBook isn’t comfortable long term and I never found the 17″ necessary when I was away from my desk. A smaller screen and bigger external monitor is a much better solution.

Family: 27″ iMac (Late 2011)

With kids and a wife also wanting a decent computer at home, I’m now using a new 27″ iMac. I really like the Machine, the monitor is wonderful but I’m kicking myself for not getting the SSD option. At the time I’d had never used SSD and didn’t understand the performance increase it provides. If your considering an upgrade definitely, without thought, choose the SSD option. It will make a world of difference.

Professional: 13″ MacBook Air (Late 2011)

This is my current Mac and probably the best Mac I’ve ever had. The size makes it extremely portable and light but still useful perfectly useful on the go in PhotoShop or XCode. With the SSD drive it feels much faster than my iMac for daily tasks. The only time is feels slower is when I’m doing a processor intensive task such as encoding a movie. If you’re looking for a new Mac I’d highly recommend trying and Air.

Mixed in with the above were several other machines that belonged to either my parents, sister or in-laws which included 4 different gumdrop iMacs, a Clamshell iBook, a SuperMac clone and some Macintosh SE‘s and several IIcx‘s.

Reeder uses Google Reader as a backend but there wasn’t an easy way to export my Mail.app RSS feeds into Google Reader—until I wrote the little script below to do it for me.

This PHP script reads the Mail.app settings and generates a MailAppToGoogleReader.opml file suitable for importing directly into Google Reader’s settings pane. All you have to do is copy the script to a file such as MailToGoogleReader.php and run the Terminal command:

$ php -e MailToGoogleReader.php

Now I can sit back and relax with Reeder on the iPad.

<?php

$opml = '<?xml version="1.0" encoding="ISO-8859-1"?>
<opml version="1.0">
<head>
<dateCreated>'.date('d-M-Y').'</dateCreated>
</head>
<body>
';

foreach (glob("/Users/jsambells/Library/Mail/RSS/*/Info.plist") as $plist) {
    $xml = new SimpleXmlElement(file_get_contents($plist));
    $results = $xml->xpath('//plist/dict[1]/key[.="RSSFeedURLString"]/following-sibling::*[1]/text()');
    $url = (string)$results[0][0];

    $opml .= '<outline type="rss" xmlUrl="' . $url . '"/>' . "\n";
}

$opml .= '
</body>
</head>
';

file_put_contents( "MailAppToGoogleReader.opml", $opml );

echo "done!";
`open .`;

a JavaScript framework that aims to ease development of dynamic web applications. Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere

But AJAX is far from the only thing that Prototype has going for it. It also provides a list of useful functions, the simplest (and my favorite) being the $() function to replace the document.getEementById() function – my keyboard is much happier! The downside is in the documentation. The doumentation is very lacking, almost non-existant, which is very annoying, but there are sites such as script.aculo.us that are picking up the slack and providing some informed documentation. A quick google search will also reveal a lot of working examples you can learn from as well.

Aside from what it has to offer, I was impressed by it’s ease of use and simplicity while working on a recent idea. At work, we were starting to use paper and pens to track the time we were spending on each project. As a growing company, we need to know this information so that we can better adjust our quotes and estimates, but the time spent writing and tracking the information became tedious after only one week. thinking about it on my commute home from work one day I had a better idea. Enter Prototype and a JavaScript app.

Starting from a quick sketch, I was able to create a working app using an XHTML/Prototype user interface and PHP server side base, in less than an hour. It relied on 100% AJAX communication but it was for my personal use anyways so it didn’t matter. Quick, fast, simple, clean code and anything else I could ask for. Now tracking time is as simple as typing in a task and hitting go. No more fumbling with paper and pens.

If you haven’t tried prototype yet I highly suggest you do. You’ll be up and running in minutes!

I’m playing with the theme to see how the wordpress stuff works. I tried to install it under another location but unless I install two databases as well, I can’t seem to mess with it because the stylesheets are referenced by full URL (strange). I’ll just play here and you’ll have to watch it change over time.

It’s far from done right now so plesae bear with me as I learn. I won’t be breaking any links so bookmark as necessary, but the design still has a long way to go so please be kind.

While working on a top secret project at We-Create, I was faced with a road block regularily encountered by many web developers: the ‘Same Origin‘ security policy. Simply put, it’s the security restrictions in the web browser that confines actions to the same domain where the page is located. For example, in accordance with the policy, JavaScript running on this page in Jeffreysambells.com should only communicate with JeffreySambells.com and be denied access to any other domains. Usually this isn’t a problem as the policy doesn’t apply to loading non dynamic objects such as images from other domains, and most AJAX requests will be between the browser and JeffreySambells.com. As well, to protect against Cross Site Scripting (XSS), it makes sense to disallow seemingly random requests to other domains. The problem arises in places such as my top secret project where I require a centralized data service on one domain which communicated via AJAX with pages viewed on other domains. With the ‘Same Origin’ security policy this isn’t possible using any traditional AJAX methods! But it is possible with a little JavaScript trickery. The most common AJAX methods use the XmlHttpRequest object or the Microsoft equivalent ActiveX object to make requests. If you try to pass in a full URL to another domain, both will error, denying access to your request. Similarly, some people have been crafty and attempted to use an embedded <iframe> window to retrieve their data from another server. This can be somewhat successful as you can load an external domain using the iframe and pass in any GET parameters you like, but you can only submit data this way, not retrieve it.

The Solution: XssHttpRequest

To overcome the Same Origin policy, I had to revert back to an ‘old-school’ way of doing AJAX and create an XssHttpRequest JavaScript object that dynamically inserts <script> tags to load external JavaScript. This works because the script tag’s src attribute isn’t bound by the Same Origin policy. We’ve all used it to load javascript from thrid party sources such as the Google Maps API and similarily that’s what we’re doing, only dynamically.

Advantages of using XssHttpRequest

• Allows Cross Domain AJAX
• Compatible with most popular browsers
• Implemented object can use similar methods to standard AJAX objects

Disadvantages of using XssHttpRequest

• You need to control the response end or create a server side tunnel using cURL or WGet
• Can only load valid JavaScript
• You can only request using GET, not POST

Get the XssHttpRequest source now

To overcome the disadvantages listed above, the XssHttpRequest object sends a variable name with it’s request. The responding script then only needs to return a JavaScript source file that defines the supplied variable. The flow is illustrated in the following diagram:

A Working Example

To see it work for yourself, I’ve setup a simple test script here on JeffreySambells.com. The following PHP script is hosted here at http://JeffreySambells.com/code/XssHttpRequest/response.php:

<?
$script = <<<JAVASCRIPT
    alert('Hello World from {$_SERVER['SERVER_NAME']}');
JAVASCRIPT;
echo 'var '.$_GET['XssHttpRequestVar'].' = "'.addslashes($script).'" ;';
?>

Download the source for the XssHttpRequest object and use it the same way you would the XmlHttpRequest object:

<script type="text/javascript">

//include source for XssHttpRequest from link above

function doRequest() {
    request = new XssHttpRequest();
    request.open("GET", "http://jeffreysambells.com/code/XssHttpRequest/response.php", true);
    request.onreadystatechange=function() {
        if(request.readyState==4) {
            alert('Completed request: ' + request.responseText);
            eval(request.responseText); //execute the javascript.
        }
    }
    request.send(null);
}

window.onload=doRequest;

</script>

Now, when the page loads you should see a JavaScript alert of the responseText and a second alert that says ‘Hello World from JeffreySambells.com’. In the above example I’ve eval()’d the responseText to do this, but you could easily return and XML file and then parse the XML as nesessary! Just remember that the respons needs to be valid JavaScript, but the JavaScript can define whatever you want.

The example illustrated here is simple but it proves data from JeffreySambells.info was loaded into your web page. Loading data from another domain is the key to a centralized AJAX service so start building your centralized services now! Feel free to use and modify the XssHttpRequest object to suit your needs, I only ask that you let me know of any improvments so that I may improve the script here and let me know if you use it in a project so I can link back to your project as an example.

The realization I had with the design for this site was that I don’t want to focus on the navigation at all, I want to focus on the content. Specifically, I want to focus the audience to the article that was most recently posted (Maybe even the one you’re reading now). Sure all the posts will be linked so you can still easily find them by searching or browsing the categories, but the one you probably came to read will be the one at the top of the home page so you’re not going to use a navigation bar to get there! There’s no real need for me to highlight how to get to my past archives. I’ll link to them somewhere so you could find them, but if you came to see something I wrote a while back, you either know what it’s about and where to find it, or you came here via hyperlink from a search engine or another site. Whichever way you got here, you’re probably going to find what your looking for without a heavy navigation bar.

As of now, the site still has one of the great WordPress themes (KISS I believe) but soon I’ll be re-doing the design yet again, only this time I’ll focus on highlighting the content rather than navigation so check back soon for JeffreySambells.com v1. Maybe this attempt will be successful!

I was recently working on a project that required the map to fetch points within the viewport after it had been moved or dragged. This is easy enough to do by adding a listener for the moveEnd event and using the GXmlHttp object to query the server, but things didn’t go so smoothly once I started zooming the map in and out. When zooming out, the points that cam back were only within the original window at the previous zoom, not the new zoom. I tracked the problem down to the fact that the map triggers the moveEnd event prior to triggering the zoom event so my map was fetching point before the zoom!

I started to wonder just what the order of events where so I whipped up this little map to capture the order. Basically it’s just has an event listener for each possible event so just click, move and zoom to see what happens. It can be very enlightening to see just what events are triggered at which times. (Just for fun I’ve also included some of the undocumented events)

Check out the map