Not exactly sure why.   I decided to make the home page of inarow.net something else (which isn’t done yet.)  So, I started shopping around for blogging options.  I see too much of wordpress on the clock, so I wrote that off.  I ended up on tumblr because I liked their API, flexibility and capabilities.

Speaking of API, it was about an hour to import all my posts from bloxsom.

Google’s AJAX APIs Playground is an awesome new tool recently released by Google. It allows you to browse through their various APIs and view examples. This is a great way to see what the Google APIs have to offer and get a quick example of each.

Even better, each example can be executed, modified and re-executed right on the page. The final source your create can be copy and pasted, and each API has a link to the documentation.

Definitely head on over and check it out. I follow various Google developer blogs, but I was quite suprised to see the breadth of their API offering. Graphs, maps, search, blogging and more are all included, with great examples and an excellent interface.

As an example, check out this incredily simple way to add a scrolling RSS ticker to a page. This will grab the provided feed, and rotate the articles inside the #content div on the page. You’ll want to check out the full example to see the needed javascript files and provided stylesheet.

google.load('feeds', '1');

function OnLoad() {
var feeds = [{
title: ‘In A Row’,
url: ‘http://inarow.net/index.rss’
}];

}

google.setOnLoadCallback(OnLoad);

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”.

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.

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;
        }

}

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.

Further Reading

Hopefully, you now have a feeling for what jQuery can do for your code. This was simply the 10,000 foot introductory fly-by… jQuery packs a sizeable array of methods and functionality into its 14kb size, and it takes a while to familiarize yourself with most of them. To continue you exploration, these sites may be of use:

• jQuery Site
• jQuery Manual
• How jQuery Works by John Resig, Original jQuery Author

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

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>
<script>
	google.load("jquery", "1.2");
</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 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.

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”

1. edit some files

> git status

1. On branch working
2. Changed but not updated:
3. (use “git add …” to update what will be committed)
   #
4. modified: app/controllers/events_controller.php
   #
   no changes added to commit (use “git add” and/or “git commit -a”)

> git add events_controller.php

1. On branch working
2. Changes to be committed:
3. (use “git reset HEAD …” to unstage)
   #
4. modified: app/controllers/events_controller.php
   #

1. 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

So, after giving Allan some feedback about the latest less project, Get More Honey, we chatted a bit and it came out that I’m a PHP guy, with a bit of a leaning towards CakePHP. But, I’ll fully admit that I love the ruby language, have played with it quite a bit, but simply never had an opportunity to write a rails app. People pay me to write PHP code. ;)

But, it did inspire me to fire up vim and write something in ruby. (Some day I’ll dust off RubyKnight, the chess engine I wrote in ruby after reading Behind Deep Blue) Here it is:

#!/usr/bin/ruby
# Written by Chris Moyer (chris@inarow.net // http://inarow.net/)
# Do with it whatever you want.  That's public domain, right?

require ‘readline’
require ‘rubygems’
require ‘twitter’

user = ARGV⁰
pass = ARGV¹

if !user or !pass then
puts ‘usage: tweet username password’
exit
end

$0 = “tweet #{user} xxxxxxxx”
twitter = Twitter::Base.new(user, pass)

while line = Readline::readline(’(tweet)> ’) do
Readline::HISTORY.push(line)
if line.length > 140 then
puts “#{line.length – 140} characters too long, try again.”
else
begin
twitter.post(line)
puts “Tweeted!”
rescue
puts “Failed to tweet! (#{$!})”
end
end
end

puts “\nBye!”

It solves my problem of reading twitter via gtalk, and not wanting to open twitter.com to post… while hating when I underestimate the length of my message and being trunctaed. I can just let this run in window of my screen session, and tweet away.

So, I’d love to hear from the rubyists out there:

• What aspects of this are not good, idiomatic ruby practice?