If you find yourself with a table of alternating rows, first a visible summary row followed by a hidden detail row, then selecting the next table row is a piece of cake. You may need to do it for any number of reasons, too. For starters, you may want to only turn on the "expand" icon in the summary row if there is actually data in the detail row. We will assume that the detail row contains div.something if there is actually data there. [js]$("table tr:visible").each(function() { ($(this).next().is(":has(div.something)") && $(this).find("img.expand").show()); });[/js] That will select the visible rows in the table and iterate over them. It will check each one to see if it has the div we are looking for and if it does, it will show the expand image. We are taking advantage of the fact that there are all function calls and using short circuit evaluation of the conditional to not run the argument after the && if it fails. One of my favorite Stupid Javascript Tricks. You may also want to actually show and hide the table when the expand icon is clicked. Also pretty easy to do. [js]$("table tr img.expand").click(function() { $(this).closest("tr").next().toggle(); });[/js] That will toggle the table row following the one containing the clicked expand icon. Pretty straightforward stuff, thanks to jQuery.

This is an easy one that I have been asked about a number of times before. I always recommend that you wrap your content area in a containing div to separate it from other portions of the page. Namespacing your DOM will keep your javascript and css from bleeding over into other panels unexpectedly. Hence the div#content. So, to automatically select the first element in the form on your page, all you need is this: [js]$("div#content form :input:visible:first").focus();[/js]If you want the first empty element, then you just need to change it to:[js]$("div#content form :input:visible:first[value='']").focus();[/js]You may be wondering why I did :input:visible instead of just :text, and that is because I want to get any input elements that are on the screen, not just text inputs. Using :input will return input, textarea, select, and button elements. Adding :visible will not only filter out visibly hidden forms, but also type='hidden' input elements as well.

Your markup is extremely important not only for the display of your application, but also for the complexity and stability of your javascript. There are three important tenets to building a selector friendly DOM.

1. Keep it Lean!

I cannot stress the importance of the markup of your pages enough. Some people think of the markup as being just the browser's input feed, but it is actually much more than that. It is the data model for a face of your application and has three separate but related users: the browser, the javascript, and the css.

Building your markup with all three of these in mind will make your selectors a lot cleaner and easier to work with. Adding DOM elements that aren't necessary will negatively impact all three of these aspects, so just don't do it. Whatever the reason for adding them to begin with, remove them if you don't need them anymore. Having extraneous stuff in there will also hurt our next bullet.

2. Be Consistent!

Your DOM needs to be consistent. This starts with understanding what all the tags actually are and what they are intended for. For example, a "p" tag is for paragraphs. Are you making a paragraph when you use it? If not, then you may want to consider using something else that is better suited. A "div" is for defining a logical block of elements on the screen. A "table" is for displaying tabular data. If you are using it for your page layout, shame on you!

Having a consistent way of creating your DOM will make it a lot easier to write generic selectors. You can't select all the rows in your form cleanly if some of them are wrapped in paragraphs and some are wrapped in divs.

3. Namespace!

Namespace the major portions of your page. It will allow you to write javascript and css that is specific to a portion of the page and will prevent unintended bleed over into other portions of the screen. The simplest example is a typical page layout with a header, left panel, and content pane. Each of these are unique elements on the screen and should have an id. Every selector that is intended for only that piece should then begin with "div#content" or whatever.

Ids and classes aren't just for css, either. If it makes sense, add a class to the elements that you want to select with your javascript even if it is never mentioned in the css. Those attributes are designed for use with selectors and since we use selectors heavily in both css and javascript, it is perfectly acceptable to add them for one or the other or both.

Also, if an element is meant to be totally unique on the screen, like your content pane, use an id instead of a class to distinguish it. By their nature, ids are unique on the screen and classes are for mass assignment, so using them appropriately gives you one more piece of metadata when interacting with your DOM.

The 120GB hard drive on my 15" MacBook Pro 2.16 Core 2 Duo has been teetering on the edge of full for a while now and I finally decided to go ahead and swap it out with a bigger and faster drive. One of the questions I had going into this was whether the SATA 3.0Gbps drives would work on the 1.5Gbps controller that is built into the motherboard. As it turns out, they work just fine. Here are the steps I took to replace the drive:

1. I bought a 320GB Western Digital Scorpio Black from Newegg along with an external enclosure.
2. Put the new drive in the enclosure and connected it to the Laptop.
3. Formatted and used Carbon Copy Cloner to copy my existing hard drive onto the new one. It took a couple of hours to complete.
4. Followed the instructions on ifixit.com for replacing the hard drive. It looks intimidating, but was actually really easy. Just don't lose those tiny screws!

I always hear people described as being a back-end guy or a front-end guy. Really, I think those terms are a little ambiguous and can be a little misleading. Or worse, you can get pigeon-holed into one or the other and then people don't trust you with half of the system.

I have been working on a few sprints lately that require some javascript to do dynamic positioning of a DOM element on whatever was just clicked on the screen. Here is a sample of some of that code. It assumes that there is an element, a.some_link, that when you click it the dynamically positioned element, #DP, places itself just to the right and centered vertically. It will also detect if positioning to the right will cause it to be off the screen and flip it to the left side instead. The only CSS requirement is that #DP be "position: absolute;". [js]$("a.some_link").click(function() { //Get the coordinates of the clicked element. var cellPosition = $(this).position(); //Add the left displacement to the width of the trigger, //placing the DP just to the right of it. var horizontalPosition = cellPosition.left + $(this).outerWidth(); //Here is the fancy part. If the position plus the width of your DP //if greater than the window width, change the position to the left //side of the trigger. if (horizontalPosition + $("#DP").outerWidth() > $(window).width()) { horizontalPosition = cellPosition.left - $("#DP").outerWidth(); } //Center your DP vertically on the trigger. var verticalPosition = cellPosition.top - ($("#DP").outerHeight() / 2) + ($(this).outerHeight() / 2); //Update the position of your DP. $("#DP").css({top: verticalPosition, left: horizontalPosition}); });[/js] Also note that if you were to call "animate" instead of "css" in that last call, then it would animate the movement instead of just snapping it to the new position.

Using a sqlite database in an iPhone app is actually really easy. The only real requirement to get started is that you need to create a sqlite database to include, which is very easy to do.

sqlite3 test.sqlite3

CREATE TABLE iphone_test ( id INTEGER PRIMARY KEY, value VARCHAR(255) );

INSERT INTO iphone_test (value) VALUES ("This is value 1"); INSERT INTO iphone_test (value) VALUES ("This is value 2");

You need to link the sqlite3 framework library to your project. All you need to do is right-click on the Frameworks folder and select Add > Existing Frameworks... then select:

/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS2.2.1.sdk/usr/lib/libsqlite3.0.dylib

Step 3 - Add Some Code to Your AppDelegate.h

Open up your AppDelegate.h and add an import for sqlite3.h so you can use sqlite. Then this declaration inside your @interface so you have a nice handle to the database:

sqlite3 *database;

Then add these prototypes for the methods we are adding to the AppDelegate.m:

- (void)verifyDatabase:(NSString *)databaseName databasePath:(NSString *)databasePath;

- (NSString *) randomRecordContent;

Step 4 - Add Some Code to Your AppDelegate.m

Open up your appDelegate.m and add this method in somewhere. This will make sure that the database file exists in the user's file store and if it doesn't, it will copy it over from your application code.

- (void)verifyDatabase:(NSString *)databaseName databasePath:(NSString *)databasePath { NSFileManager *fileManager = [NSFileManager defaultManager]; if (![filemanager fileExistsAtPath:databasePath]) { NSString *databasePathFromApp = [[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:databaseName]; [fileManager copyItemAtPath:databasePathFromApp toPath:databasePath error:nil]; } [fileManager release]; }

Then add this code inside your applicationDidFinishLaunching method to get the location of the database in the users phone:

NSString *databaseName = @"test.sqlite3"; NSString *documentsDir = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) objectAtIndex: 0]; NSString *documentsPath = [documentsDir stringByAppendingPathComponent:databaseName];

Now call the verifyDatabase method to copy the database from your app code to the users file store in case it isn't already there.

[self verifyDatabase: databaseName databasePath:databasePath];

Open the database so you can use it throughout your application:

sqlite3_open([databasePath UTF8String], &database);

Don't forget to close the connection in your dealloc method:

sqlite3_close(database);

Finally, add in a method that will read something from the database. In this case, we are adding the implementation of randomRecordContent that we specified in the header.

-(NSString *) randomRecordContent { NSString *theValue; const char *sqlStatement = "select value from iphone_test order by random() limit 1"; sqlite3_stmt *compiledStatement; if (sqlite3__prepare_v2(database, sqlStatement, -1, &compiledStatement, NULL) == SQLITE_OK) { while (sqlite3_step(compiledStatement) == SQLITE_ROW) { theValue = [NSString stringWithUTF8String:(char *)sqlite3_column_text(compiledStatement, 0)]; } } sqlite3_finalize(compiledStatement); return theValue; }

Now you are all set. As long as you have a handle to your AppDelegate, you can call this method and grab something from the database. For example, if you are in your view controller you can get a handle and call the method like this:

YourAppDelegate yourAppDelegate = (YourAppDelegate *)[[UIApplication sharedApplication] delegate]; NSString theValue = [yourAppDelegate randomRecordContent];

So there you have it. Hopefully that code is pretty readable. Please post comments or e-mail me if you have any questions.