We’ll it’s public now. I’m currently hard at work writing AdvancED DOM Scripting: Dynamic Web Design Techniques, which is why my posts have been arriving less frequently lately. I’m soloing this one as author so it’s a lot more work compared to my last book, but still very enjoyable. I’ll post a bit more about the book in the coming weeks to get everyone excited.
I was just typing a search query into my Firefox Google toolbar. My query was going to be “scriptaculous draggable events” as I’m trying to squash a bug but apparently goggle had some other ideas:
Interesting how Google is trying to corrupt my young mind!
We’ll it seems my 9-month old MacBook Pro battery has suffered a fate similar to that of others.
About two weeks ago I noticed it randomly shutting of after a few minutes on battery power (not shutting down but rather completely losing power as if the battery died). This situation was rather scary as I’m currently working on my second book and a computer that loses power without notice isn’t a good thing while writing.
The battery indicator in the title bar read fully charged and the little green lights on the battery also indicated fully charged. iStat Pro indicated about 85 charge cycles and a battery health of 95%. This was strange. After a power failure, the battery indicated it was totally dead until it began to charge at which point it was full again. After trying this a few times, iStat Pro indicated a battery health of 3% — not good.
I searched the web for similar problems and began to fear the worst or at least I thought I would have to purchase a new battery. It seems there is a recall for batteries but it wasn’t for the 17-inch model that I have. First however I though I’d try 1-800-SOS-APPL — and it worked!
After briefly describing my problem, the Apple service rep — no questions asked — politely offered to send me a new battery at no charge! Sweet! I now have a new battery but while waiting for it to arrive I had left the bad battery in my MacBook to fill the gaping hole in the bottom. After only a day, I noticed that it wasn’t sitting quite so level on the desk and flipping it over revealed the problem:
It’s only grown bigger in the last few day. The funny part is the lights still indicate it’s charged! I guess It’s time to ship it back.
Defective products are never fun but congrats to Apple on not hassling me. I’ve only had a few issues with Apple products over the years and every time it’s been dealt with fairly and quickly.
Of all the software I have on my Mac, I’ve always been missing a decent JavaScript editor. I do have editors that support JavaScript syntax highlighting and such but they lack those extra features. For other languages such as:
(note the lack of a WYSIWYG editor! Everything by hand!)
But I really want a good JavaScript IDE. And I may have found one. A colleague pointed me at Aptana, I just downloaded it and gave it a quick try and looks very promising:
My only complaint is that it’s written in Java so it doesn’t use the standard windowing methods on my Mac but I can look past that if it’s good enough. Hopefully this will now complete my tool set.
Well it’s been almost a month since my last post but fear not as content will be flooding in soon. I’ve been busy busy the past month with several things:
and much more. If you’ve enjoyed my articles so far, fear not as more will be coming, I promise.
I’ve been searching high and low for an application that takes a screenshot of an entire web page, not just what’s on the visible screen and I finally found one! Paparazzi(http://www.derailer.org/paparazzi/ “Check it out!”)! And it’s FREE!
I came across a great article about creating CSS production notes by Andy Clark. It’s a great idea to show co-workers the information and notes about a file but in my production environment I often use subversion so I’ve merged the two. If you use subversion and a dynamic language such as PHP there’s no reason why you can’t show the subversion log for the current file in the same way. Here’s a quick little PHP script that does exactly that. Feel free to use and edit it as much as you like, just let me know if you make a big improvement so I can post it here. Enjoy:
<?php
/**
* A quick PHP script to produce the notes markup from subversion logs.
* @see http://24ways.org/2006/css-production-notes
*/
//the current file in the repository, you could use $_SERVER['PHP_SELF']
$file = '/home/jeff/subversion/myproject/trunk/index.php';
//retrieve the log from subversion
$exec = array(
'cmd'=> 'svn log --xml --verbose ' . escapeshellarg($file), //command
'output'=>null,
'return'=>null
);
exec($exec['cmd'],$exec['output'],$exec['errors']);
//make it a string.
$log = join($exec['output']);
//create the notes
$notes = '';
$xml = new SimpleXMLElement($log);
//build the notes
foreach ($xml->xpath('//logentry') as $entry) {
$message = nl2br($entry->msg);
$notes .=
<<<NOTE
<li>
<blockquote cite="{$entry->author}">
<p>{$message}</p>
<p class="date">{$entry->date}</p>
</blockquote>
</li>
NOTE;
}
$notes = '<ul>'.$notes.'</ul>';
//do whatever you need with it.
echo $notes;
?>
I’ve been trying to keep up with at least one good long post a week but with the holidays approaching I’ll be spending some much needed time with the family and with the added need to work on my next book (which I’ll be announcing in the new year), I may not be posting as frequently. I will if I can, but if not I’ll try and make it up in the new year with a few extra posts here and there.
This past weekend my wife and I decided to check out the new Boston Pizza that was recently built near our house. It’s one of only a few new popular restaurants in town so we were told the line has been crazy long with more than an hour wait at times. We decided that before we went, we would check out the on-line menu too see what they had. That way, if the line was too long we could just order takeout and go home to enjoy our meal. The domain name BostonPizza.com wasn’t hard to guess so I pulled up the site and we proceeded to peruse the menu (I decided on a small hawaiian and my wife chose the Ultimate Pepperoni pizza). While browsing the menu I also noticed that the main navigation used a ‘drop-down’ effect:
Being the curios web developer I am, I decided to investigate a little further to see how it was done and if it was a semantic list a la suckerfish (though I had to work quickly as my wife was getting hungry after looking at the photos of pizza).
Regardless of what you’ve heard about Web 2.0, why it’s cool, why it’s not really 2.0, or why the term Web 2.0 may actually be important, one thing is certain. It’s very shagadellic and it’s all about asyncronicity baby!
Yes that’s right, everyone is doing it asynchronous now, newbies and hackers alike. And why not? It’s all the rage! I mean, how boring was the way your grandparents did it? So mundane, always following the same routine:
Are you really happy with the result of a simple load, wait, click, repeat? Maybe you enjoy the repetitiveness since you’re web site ’seems’ to enjoy it equally, but what if there’s more?. To enjoy the best experience of asyncronicity, all you need are the Ajax twins: XmlHttpRequest and ActiveXObject(”Microsoft.XMLHTTP”) — but that’s where it begins to get a little complicated. It seems these two have been taking over the minds of many a young web developer, corrupting their thoughts with wild imaginative fantasies. Now, day-in and day-out, 24/7, all the web developers can think about is:
All these asynchronous communications change the very nature of your application’s flow. You can’t rely on that mundane load, wait, click, repeat cycle because the page never fully loads again, only little pieces of it do. For instance, take this common simple administration tool for a news item list on a website:
The ‘check mark’ and ‘x’ symbols represent the ‘active’ state of the items in the list.
To ‘activate’ an item, the user would simply click the check box or the x and several things may happen. If you’re using the traditional workflow, your web application will probably do something like this where the page is forced to reload:
This is a typical “Web 1.0″ application flow. You click, a request is sent to the server, it responds, and the entire page is reloaded to reveal the new change. Often, you’re left sitting at the top of the page and forced to scroll down to even see the change. What fun.
Alternatively, if you’re going asynchronous with Ajax, you’ll end up with something that looks a little more like this, where only small protions of the page change using the appropriate DOM scripting:
No reloading except for the manipulation of the page with your favorite DOM methods. So where’s the problem? We’ll it’s not really a problem — if you know what you’re doing. The thing you have to remember is that you’re doing things asynchronously now. Requests are going out every time you click the buttons, but they don’t necessarily come back in the same order. Huh? Let me explain with an example. Click this button several times quickly in succession:
Notice the order of the requests coming back? The request number represent the order you clicked the button but the order of the list represents the order they were completed by the server. When you click the button, a request is sent to the server and in this case all I’m doing is simulating some server traffic by sleeping the PHP script for a random time:
<?
header("Cache-Control: no-cache, must-revalidate");
sleep( $time = (2/rand(1,8)) );
echo "$time";
die();
?>
and then sending back the $time before completing the request. If you wait at least 2 seconds between each button click, it’ll probably return requests in the same order because the initial request will complete before the following request. But, if you click it quickly several times quickly in succession, in this case less than 2 seconds apart, you may have a request of 1.5 seconds followed by a request of 0.5 seconds. When that occurs, the second request will finish and complete before the earlier request! This demonstrates asynronous in action - it’s out of sync and out of order, running at the same time as other requests.
If you check out the JavaScript I’m using to do the request it looks something like this:
var counter=0;
function doRequest(e){
var num = ++counter;
new Ajax.Request("http://jeffreysambells.com/openprojects/PHP/sleeper.php",
{
onComplete:function(t){
e.innerHTML += "<li>Request <strong>" + num + "</strong> <em>(took " + t.responseText + " seconds)</em></li>";
}
});
}
All it does is make an Ajax request (using the Prototype library Ajax object, since it’s already loaded in my blog) and then processes the result when complete. The key thing to remember is that the action you want to take as a result of the request must be placed on the onComplete handler of the Ajax object (or onSuccess in the case of prototype if you’re doing error handling). I often see Ajax rookies doing something similar to:
var counter=0;
function doRequest(e){
var num = ++counter;
new Ajax.Request("http://jeffreysambells.com/openprojects/PHP/sleeper.php");
e.innerHTML += "<li>Request <strong>" + num + "</strong> <em>(took " + t.responseText + " seconds)</em></li>";
}
which is just plain wrong. As I demonstrated earlier, The XmlHttpRequest object is asynchronous, this means that the
new Ajax.Request("http://jeffreysambells.com/openprojects/PHP/sleeper.php");
line will execute, but may not return before the
e.innerHTML += "<li>Request <strong>" + num + "</strong> <em>(took " + t.responseText + " seconds)</em></li>";
line executes. If you want your script to wait until the request is complete, you must handle the remaining script from within the onComplete handler by splitting your JavaScript code into objects and methods, then calling the appropriate one when each request is complete.
In the ‘wrong’ way above, there’s the additional problem of using
t.responseText, which isn’t in the scope of thedoRequest()function, but we’ll discuss that mistake another time.
It’s that simple. Nothing too complicated just a complete shift in the ‘top down execution’ approach you’re probably more familiar with. All you have to do is remember that the A in Ajax means Asynchronous. That’s the key.
If you’d like to learn more about Ajax, I’d suggest first reading the original Ajax article by Jesse James Garrett at Adaptive Path “Ajax: A New Approach to Web Applications” and the many excellent resources over on ajaxian.com but in the mean time have fun with Ajax — the more you do it the better you’ll get.
