In A Row - Get Your Ducks There

Introduction to PEAR

Fri, 11 Jul 2008 04:43:01 GMT

If you're a PHP programmer, chances are you've either run across PEAR or could get some excellent use out of it. PEAR is an acronym for PHP Extension and Application Repository. The creators and maintainers of PEAR encourage you to pronounce it just like the fruit with the same spelling. But you'll get more than fiber from PEAR, as you'll learn when you read the rest of this article...

A snippet from my article at codewalkers: The PEAR Package Tour: PEAR Basics.

Link Attack III

Fri, 27 Jun 2008 05:08:24 GMT

How to Get a Lot Done - 7 Tips to Achieve More
This veers a bit from my normal posts, but was a great read. If you have goals, big or small, and feel like you aren't reaching them, give this a read. The author certainly knows what he's talking about, being a world-travelling, company-starting, web-designing entrepreneur extraordinaire.

Query String to Object via regex
This is from remy sharp's blog. This is a great example of the wonderful tidbits he doles out in helpful posts on this blog. Lots of great jQuery, regex and Javascript "magic".

Sun T2000

Deep Profiling jQuery Apps
John Resig does it again, releasing another awesome project. This adds profiling into the callstack of a page utilizing jQuery. It goes much deeper that the profiling capabilities of firebug, and will be a great help if you have a heavy client-side app using jQuery.

Wide Finder 2
Tim Bray is running a second edition of his Wide Finder project. The basic premise is that taking advantage of the multiple processors available in modern day powerhouse boxes should be easier. He provided a fairly trivial application in ruby (72 lines to process gigs of log files for counts and top visited pages). He then ran it (in 23 hours) for a benchmark on an 8-core, 32-thread Sun T2000.

He's since given out accounts to a handful of others who had code to test on the box and provided some preliminary results. As you'll see... OCaml apparently rocks, with results coming in at under 10 minutes and less than twice the code footprint of the original. It's certainly an interesting project to follow.

A Programmer's Introduction to jQuery

Mon, 16 Jun 2008 14:31:00 GMT

I wrote this up a while ago, I don't even remember why, but thought some people might enjoy it.

"JavaScript, Ugh."

For many web developers, JavaScript is one of those subjects they'd rather avoid. Five years ago, the landscape of client-side scripting was pretty bleak. Browser inconsistencies, implementation bugs and numerous target platforms made developing client-side JavaScript a messy endeavor.

And then, much to the chagrin of those developers, "Web 2.0" happened. Overnight, every site on the internet began using AJAX, every feature request for a site involved something dynamic and client-side, and JavaScript development quickly became as important a skill as any server-side technology.

Enter the Libraries

As this trend continued, smart developers began longing for the level of abstraction found in most server-side environments. Just as a PHP developer could call mail() on nearly any platform and expect to have an email message sent, JavaScript developers craved this level of abstraction in their day to day work.

In response to this need, several sharp developers have responded with JavaScript libraries to fill this gap. These libraries seek to provide a uniform interface, across browser and operating system platforms, for the most common tasks that client-side scripting is called on to perform:

DOM Manipulation (moving page elements around, hiding and showing objects)
AJAX and other flavors of client-server interaction that avoid a page refresh
Animation
Rich Interfaces (drag and drop, windowing, tabs, events)
Form manipulation

Each of the popular libraries attempt to provide some or all of these capabilities, packaged in their own API.

On to jQuery

This article focuses on one of theses libraries, jQuery. jQuery design is focused on maintaining a small footprint, cross-browser compliance, and reducing the amount of code which must be written for applications. It provides abstractions for AJAX, DOM manipulation, event handling and animated effects.

Developing with jQuery depends on two basic concepts, CSS selectors and method chaining.

In most vanilla JavaScript code (which does not make use of a library), you will find code like this:

function toggle_element( element_id ) {
        var element = document.getElementById( element_id );
        if ( !element ) {
                return false;
        }
  
        var display = element.style.display;
        if ( !display || display == 'block' ) {
                element.style.display = 'none';
        }
        else {
                element.style.display = 'block';
        }
  
        return true;
}
  
window.onload = function () {
        var toggler = document.getElementById( 'toggle_help' );
        if ( toggler ) {
                toggler.onclick = function () { toggle_element( 'help' ) }
        }
}

The basic idea here, is that when the page is done loading, during the window.onload event, we find the toggle_help element and attach an onclick event to it. When that element is clicked, we find the DOM element with an id of "help", examine its current display state (the CSS attribute which controls how it is presented in the flow of the page), determine if it is currently hidden or not, and toggle its display state.

The same code, implemented with jQuery looks something like this:

 $(document).ready( function () {
        $('#toggle_help').click( function () { $('#help').toggle(); });
});

As you can see, the code is significantly shorter. Admittedly, to try and compare based on the 22 versus three line count is a bit silly, as one could easily add or subtracts line from either implementation. I think it is clear, though, which version is simpler. jQuery strives to provide an appopriate level of abstraction, simplifying the developer's task, but not obscuring it behind a heavy API.

An important example of the abstraction jQuery provides is the $(document).ready() construct. This serves as an enhanced version of window.onload. The primary enhancement is that it acts in a cross-platform waym firing as soon as the DOM of the page is ready for manipulation. This is in contrast to window.onload which can be delayed indefinitely if objects on the page load slowly or improperly (images, iframes, scripts, etc.)

CSS Selectors

As shown in the previous example, one core features of jQuery is the use of CSS selectors to find elements within the page. By now, I imagine that most web developers have had exposure to at least basic CSS, which is all you'll generally need in order to develop very useful jQuery code. The selector engine in jQuery implements CSS2 and CSS3 selectors, as well as adding a few useful extras. The following examples, outline various selectors.

Very concise selectors and code fragments are provided by the use of the $ symbol. This is not a reserved character in JavaScript, and is used in jQuery as an alias for the main jQuery object. This will be seen throughout the examples.

To start, here's the page we'll work against for these selector examples:

<html>
        <head>
                <title>Test Page</title>
        </head>
        <body>
                <div id="header">
                        <h1>Test Page</h1>
                </div>
                <div class="instructions">
                        <ul>
                                <li>Read Page</li>
                                <li>Follow Examples</li>
                        </ul>
                </div>
                <div id="mainform">
                        <form>
                                <span class="instructions">
                                        Fill out this form.
                                </span>
                                <input type="text" name="first_name" />
                                <select name="gender">
                                        <option>Male</option>
                                        <option>Female</option>
                                </select>
                        </form>
                </div>
        </body>
</html>

A simple example, find the header and slide it out of view. The # character, in front of a name is used to find an element by its id attribute. An id should be unique in a pages structure. slideUp() is an animation method which decreases the height of an element over time, until it is hidden.

$('#header').slideUp('slow');

Find the title heading of the page, and change its color. In the selector, nested elements are found by simply following one selector with another.

$('#header h1').css('color', 'red');

Remove the second element of a list. The :nth-child() selector is provided by jQuery to facilitate this. remove() takes matched elements out of the DOM.

$('#instructions ul li:nth-child(2)').remove()

Where the CSS selector concept becomes very powerful, is when you want to operate on groups of items. All methods of the jQuery object will operate across all the elements that match a given selector.

Here, we'll find all the instructions and add a class to them. addClass() is a method which adds a CSS class to the matched elements, useful to quickly change items to match a set style. An important note, regarding addClass() is that an HTML element may have more than once class, even though this is not seen very often. To match all elements which have a given class, the classname is started with a period.

$('.instructions').addClass('warning');

These are some rather simple examples, but they touch on the main principles you'll use when creating selectors for use with jQuery. Details on all the selectors available are provided in the jQuery Docs.

Method Chaining and 'this'

One possible disadvantage to using CSS selectors, as outlined above, is that very complex selectors can become a performance bottleneck. They can also result in your code being cluttered with the same selector over and over, as you repeatedly manipulate the same elements. Two facilities help alleviate these issues.

Method Chaining

All methods of the jQuery object return themselves. This will be a familiar concept to many object-oriented programmers, but can look a bit foreign to others. The basic idea being that you need only perform a given selection operation once, and then you perform all necessary operations on that set of results.

$('.intructions').fadeIn('fast')
        .css('border', '1px solid red')
		.addClass('warning');

In this example, we find all the instructions. We cause them to appear, give them a red border and add the warning class. (Apparently, we really, really want our instructions followed) It is important to remember that this is equivalent to the following:

$('.intructions').fadeIn('fast');
$('.intructions').css('border', '1px solid red');
$('.intructions').addClass('warning');

Chaining methods in this manner allows for more concise code and snappier performance, as the selection operation need only be performed once.

'this'

Another facility provided is the definition of this inside each jQuery method context to reflect the current element being operated on. This becomes important with more advanced concepts, as many of them rely of providing callback functions which are executed in the context of each element matched by the selector.

In this example, we find every element with the class "click_to_hide" and then attach an onclick event to it.

$('.click_to_hide').click( function () {
        $(this).hide();
});

As you can see, we are creating an anonymous function for each element, and when the element is clicked, the element will be hidden. In this instance, we wrap this in the jQuery/$ method so we have access to the hide() method. Before wrapping, this is simply a DOM Element.

AJAX and Event Handling

Two final topics I'll touch on are AJAX and event handling. jQuery provides nice abstractions for both of these, which are likely to prevent numerous bugs and speed development.

AJAX

The must-have feature for modern web sites, AJAX, is greatly simplified when using the jQuery library. Without using a library, you would be writing complex code to first instantiate a browser-specific XmlHttpRequest object, then initiating a request and writing a callback function to be triggered.

With jQuery, for the most common cases of AJAX usage, you can accomplish this with one simple line:

// Grab the content of url and inject it into #div_to_load_in
$('#div_to_load_in').load(url);

For a more complex case, where you want to manipulate or act on the result, you'll need to add a bit more code.

var url = '/update_status.php';
$.get(url, {status: $('#status_field').val(}), function (data) {
        if ( data == 'OK' ) {
                alert('Status Updated');
        }
        else {
                alert('Sorry, Status Update Failed. (' + data + ')');
        }
});

Here we're assuming the existence of a server-side script, "update_status.php", which takes a "status" GET parameter and returns either "OK" or an error message. In this example, I also utilized the val() jQuery method which abstracts the process of obtaining the value from any form element. This includes finding the value attribute of the selected option in a <select> tag, value of a text field, or status of a checkbox.

Event Handling

Event handling in jQuery involves jQuery object methods which bind functions to events. All of these binding methods are chainable, as with the previous examples. Many of the browser-native events are simplified or enhanced, to make the script writer's life easier.

An example of this is hover() which allows you to bind a function to the movement of the mouse cursor in and out of an element. Here we add a faux caret to elements of a list as we hover over them, add a 'selected' class, and then remove these decorations when the user's mouse moves on.

 $('li').hover(
        function () { $(this).prepend('<span>&gt;</span>').addClass('selected'); },
        function () { $(this).removeClass('selected').find('span:first').remove(); }
);

In this example, we see use of this, method chaining, and find() which allows using selectors to dig down inside of an element.

Twitt(url)y - An Idea I Thought I Had

Fri, 13 Jun 2008 14:49:18 GMT

I had this awesome idea, evolved from my primary use for twitter -- finding interesting links that others tweet. I wrote a script to watch the public timeline and grab URLs, a script to resolve any tinyurl or is.gd or other links to their final destination, and a script to generate reports.

Then I did some googling. And found twitt(url)y where they aleady do this, with more features. ;)

Note to self: Search first, then build.

Below are some results from a limited running of my aborted project. I did learn about twitter users that simply spam their URL all day long, and thus the results are number of users that tweeted the link in the time period, not just number of times the link appeared.

Past 3 Hours
2       http://www.nicovideo.jp/watch/sm3643812
2       http://tinyurl.com/6rbvlk
2       http://www.expansion.com/edicion/exp/mercados/wall_street/es/desarrollo/1134736.html
2       http://www.floort.com/show.php/2759
2       http://www.lanacion.cl//prontus_noticias_v2/site/artic/20080613/pags/20080613083112.html
1       http://weather.livedoor.com/area/13/63.html
1       http://www.digitalspy.co.uk/spywire/
1       http://radiopopbitch.com
----------------
Past 6 Hours
2       http://www.thetimesherald.com/apps/pbcs.dll/article?AID=/20080613/NEWS01/806130302/1002
2       http://best-forex-broker.wetpaint.com/
2       http://blog.excite.co.jp/shokotan/2859817/
2       http://gribao.com/s/2325/
2       http://tinyurl.com/5jcyhu]
2       http://tinyurl.com/6rbvlk
2       http://twittercounter.com/
2       http://www.ecodazoo.com/
2       http://www.expansion.com/edicion/exp/mercados/wall_street/es/desarrollo/1134736.html
2       http://www.floort.com/show.php/2759
----------------
Past 12 Hours
12      http://traileraddict.com/trailer/transporter-3/french-teaser
8       http://pownce.com/jooanfossi/notes/2456076/
6       http://pownce.com/andi808/notes/2456075/
6       http://www.flickr.com/photos/anonymonk/2564362689/
4       http://pownce.com/accounts/login/?next=/sbflorido/notes/2449170/
4       http://www.flickr.com/photos/anonymonk/2564362689/:
2       http://www.dormiu.com.br/publieditorial/ultima-chamada-para-pequim-1555/
2       http://www.ecodazoo.com/
2       http://www.expansion.com/edicion/exp/mercados/wall_street/es/desarrollo/1134736.html
2       http://www.facebook.com/common/browser.php

RubyKnight - Chess Engine in Ruby

Tue, 10 Jun 2008 03:43:50 GMT

I wrote this a while ago, while reading Behind Deep Blue (which is a great book). It's a chess engine written in ruby. The actual engine is implemented as a move generator, positional evaluator and a board class which handles the state as a set of bitboards and undoable move events.

Included are a command-line client and an xboard interface. The command-line interface accepts coordinate notation and a few commands:

e2e4 - coordinate notation, move a pawn
!play - tell the engine to play as the current color
!undo - roll back a move
!dump filename - store the current board state
!load filename - load a stored board
!reset - start a new game
!quit - end the game

You can cut the verbosity of the generator engine by editing line 121 of evaluator.rb:

@@ -118,7 +118,7 @@ module RubyKnight
                def time_it label
                        start = Time.now
                        res = yield
-                       puts "TIMING( '#{label}=>#{res}'): #{Time.now - start} seconds"
+                       #puts "TIMING( '#{label}=>#{res}'): #{Time.now - start} seconds"
                        res
                end
        end

The evaluator is very primitive, and only thinks one move ahead. Some sort of breadth-first time thinking mode was next on the to-do list.

You can grab the code via git:

git clone http://darkwing.inarow.net/git/rubyknight.git

Debian OpenSSL Security Snafu

Thu, 5 Jun 2008 21:24:26 GMT

Darn, I thought I dealt with this. So, a couple weeks back news broke about the terrible OpenSSL problem that had caused gobs of easily crackable ssl keys to generated on debian and its derivatives, and I read up on it. Being that this is an ubuntu server, I was vulnerable, so I could have swarn I did an apt-get install openssl and got updated versions and regenerated my keys.

Fast forward to yesterday evening. I got an invite to Heroku and was playing with the git interface. I uploaded by public key, and it told me that I had a blacklisted key and pointed me to the ubuntu security warning.

The removed lines:

MD_Update(&m,buf,j);
[ .. ]
MD_Update(&m,buf,j); /* purify complains */

If you didn't hear about the snafu, then you should look into it. If you did, maybe you should look into it again. Took me 10 minutes to fix up 3 bad keys and install the new openssl stuff via apt-get.

(For those who didn't hear: Many moons ago, a line in an openssl file caused a warning in a tool the debian maintainers used. The maintainer removed it, and the complaint went away and everything seemed to work fine. Unfortunately, that line initialized the random number generator. Without that line, every key on a debian system was generated with the random number generator initialized to the process id of the generating program... a tiny, easily bruteforceable set of seeds.)

Linode.com == Awesome VPS Provider

Mon, 2 Jun 2008 16:47:58 GMT

I've been hosting a virtual private server with Linode for roughly 7 months and I must say, I've been incredibly happy. My happiness was magnified recently, when they added a Newark, NJ facility to their list of locations. Previously, I had been hosted in their Fremont, CA datacenter. While it was perfectly adequate, the difference in ping times and throughput that came from being on the same coast made for a compelling case, and I migrated this server.

This is where Linode really shines. I logged into my admin console, and submitted a support ticket asking to migrate. Next, I hopped over to their DNS manager (DNS hosting is provided free with a linode account) and cranked the TTL of all my DNS records down to 1 hour. While I was still doing that (at roughly 12:30AM EST), one of the staff had configured my migration and responded with my new IP.

After waiting a day or two for the ne TTL to propogate, it was time to move. I updated a few IP specific config files, made sure everything was in order and shut down. I followed the "you have a migration pending" link in the linode admin console, and initiated the transfer. The wonderful AJAX admin console kept me updated about the transfer of my disk images. I added a boot job to the end of the queue and went to bed.

Unfortunately, here's where I screwed up. Linodes bit went perfectly, the images moved over and the server booted. Unfortunately, I hadn't cleaned up /etc/udev/rules.d/ and my virtual Xen nic got assigned to eth1 because of the new MAC address. This meant that dhclient failed to get me my shiny new IP.

Fast forward to the morning, I discover the server isn't up. I immediately ssh to the LISH console... which is an account on the Xen host which allows attaching to the server console, scheduling boot jobs and troubleshooting a server with network issues. After a bit of fumbling around, I hopped onto #linode and asked for help:

08:58 -!- cdmoyer [~cdmoyer@cpe-76-180-99-185.buffalo.res.rr.com] has joined #linode
08:59 < cdmoyer> Hmm, eth0 disappeared after migration?  doh.
08:59 < caker> cdmoyer: blame udev
09:00 < caker> cdmoyer: remove /etc/udev/rules.d/70-persistent-net.rules and/or /etc/iftab, restart networking
09:03 < cdmoyer> ah, awesome, thanks caker.
09:04 -!- CDMoyer_ [~cmoyer@207.192.69.20] has joined #linode
09:04 -!- cdmoyer [~cdmoyer@cpe-76-180-99-185.buffalo.res.rr.com] has quit [Quit: cdmoyer]
09:05 -!- CDMoyer_ is now known as CDMoyer
09:05 < caker> CDMoyer: woot
09:05 < CDMoyer> Being on the same coast as my linode is very nice.
09:05 < CDMoyer> 1/3 the ping and 80% faster transfer. ;)
09:06 < tasaro> that's because I put red pinstripes on your IPz
09:06 < scott> racing stripes
09:06 < StevenK> Because red VPSes go faster
09:06 < scott> 1/3 the bling though
09:06 < CDMoyer> awesome.  i'm ordering the next linode with a spoiler, too.

(caker and tasaro are linode staff, and in that chat log, perfectly demonstrate the knowledge, responsiveness, helpfulness and sense of humor of the company)

For the record, I've got a Linode 540. $30/month, 15G storage, 540M ram and 300G transfer. Their base plan is $20/month and provides 360M ram, 10G storage and 200G transfer. Also, for the record, they don't have a referral plan. ;)

Google "AJAX Libraries" API

Tue, 27 May 2008 21:37:00 GMT

Google is now providing free hosting for various popular JS toolkits. jQuery, MooTools, Prototype and Dojo seem to be included at this point. The idea is that they provide servers which properly server up cache-headers (and bandwidth, I suppose) and the more people that use these URLs, the faster interactive "Web 2.0" pages will load. (Because the user will have already loaded and cached the libraries from another site using the Google API)

They providee a loading API:

<script	src="http://www.google.com/jsapi"></script>

And a URL which provides the requested version and library:

<script	src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

Both methods allow you to provide as much specificity as you want for the version. Ask for version 1, and you'll get the latest in the 1 series... ask for 1.2.6 and you'll get that minor revision.

I'm not sure, is this a great idea... or another foothold for Google to take over the world. Or both?

AJAX Libraries API Project Page on Google

TinyDB, Toy Framework and jQuery Plugin

Sat, 24 May 2008 02:58:58 GMT

TinyDB is an interesting take on "cloud storage." Basically, you send some data via GET, they give you a URL, your data is stored in that URL. It's not private and it doesn't store a lot of information, but it has some interesting possibilities.

I think a good use for these sort of things, will be quick-built client-side only content dumpage. You go to "twitter-overload.com" type in a larger than 140 character message and hit save. JavaScript bundles up your data, stores it in TinyDB and hands you back a URL which will reload that data from TinyDB and display it. You take that url and post it to twitter. (Yes, I know that services like this exist, but the idea of doing it entirely client-side is interesting.)

TinyDB Toys is a simple proof of this concept. Here's a TinyDB Toy URL with some embedded data.

To facilitate this, I wrote a jQuery plugin, jQuery.tinydb. The two methods are documented within the source.

Drop me a comment if you hack up something cool with this.

Basic git for a Local Repo

Sat, 17 May 2008 16:28:54 GMT

I'm still not fully sold on git, but sometimes it's nice to set up version control for a single project. It's nice to be able to track what you've done, roll back experiments and otherwise protect your work (and sanity.) This is just an annotated account of this process for a small project I was doing with CakePHP, half to later refresh my memory and half for others doing the same.

> git init # create the in-place repo
 
> git add app # add files
 
> echo ".gitignore" >.gitignore # ignore some files
> echo "cake" >> .gitignore
> echo ".htaccess" >> .gitignore
 
> git branch working   # create scratchpad
 
> git checkout working # start working on it.
Switched to branch "working"
 
# edit some files
 
> git status
# On branch working
# Changed but not updated:
#   (use "git add <file>..." to update what will be committed)
#
#       modified:   app/controllers/events_controller.php
#
no changes added to commit (use "git add" and/or "git commit -a")
 
> git add events_controller.php
# On branch working
# Changes to be committed:
#   (use "git reset HEAD <file>..." to unstage)
#
#       modified:   app/controllers/events_controller.php
#
 
# rinse and repeat until you're done with a chunk of work
 
> git commit -m"Bug fixes"  # commit this set of changes to the working branch
 
> git diff ../maste   # see what you changed
 
> git checkout master  # head back to original
> git merge working    # merge your changes in