Tylor Sherman

About a half hour ago I found a really great script on Github for quickly browsing posts on a page. If you are on the homepage of my site, try typing the following hotkeys:

If you have used the hotkeys in GMail or Google Reader, you will have likely used these shortcuts before. This usability pattern is showing up in quite a few places and I really like it. Take a look at how effective it is for browsing images on The Big Picture (make sure you're on a post), on Flickriver, and on FFFFOUND!.

Drupal is a great candidate for this pattern since quickly browsing through a list of nodes is quite common. Also, since Drupal comes with jQuery, adding the script wasn't too difficult. Here are some small adjustments to make it work.

This guide assumes that you are using Views to generate a list of nodes but it should be easy to adapt to other situations.

1. Snag the jQuery version provided on Git and save it to your theme's directory.
2. Add the page_keys.js to Drupal by adding the line scripts[] = paging_keys.js to your theme's .info.
3. We have to make a few small adjustments to the script to make it play nice with Drupal. Go take a look at the settings array found on line 84 of paging_keys.js. Let's change it to the following:
   
var config = {
  nodeSelector: '#main .node h2.node-title a',
  prevPageSelector: '.pager-previous a',
  nextPageSelector: '.pager-next a',
  pagingNavId: 'paging-nav',
  keyNext: 'j',
  keyPrev: 'k',
  keyNextPage: 'h',
  keyPrevPage: 'l',
  keyRefresh: 'r',
  additionalBodyClass: 'paging-keys',
  bottomAnchor: 'bottom'
};


   This assumes that the list of nodes will be under the div '#main', but you will probably want to change this to be more specific. For my own site I've also used the view name in the selector to ensure that there is not any weird behaviour. The only other changes to the config array were for the Drupal pager.

4. We want to add the anchor "bottom" to the last node of the View, allowing the script to move nicely between pages. To do this, we can add a small snippet to the node title link in node.tpl.php. Here is what my revised node title code looks like:
   
<h2 class="title node-title">
  <a href="<?php echo $node_url; ?>"<?php if($view) { end($view->result)->nid == $node->nid ? print 'name="bottom"' : NULL; } ?>><?php echo $title; ?></a>
</h2>


   This will check if we are displaying the last node for this view and add 'name="bottom"' to it's title link.

And you are done! Hopefully everything is working great. If you encounter problems, make sure that caching is turned off while you try to integrate this.

A friend emailed a few months ago wondering how to compile a C program. Since this is an important first step for developers and I found that there were no simple and clear resources available related to Eclipse, I thought it might be good idea to go over it. So... here's how to setup and compile a "Hello world!" program in C, C++, and Java using the Eclipse IDE.

I've broken this up into five parts:

1. Installing and setting up Eclipse
2. Hello world in C with Eclipse
3. Hello world in C++ with Eclipse
4. Hello world in Java with Eclipse
5. Compiling from the command line

1. Installing and setting up Eclipse

Eclipse is a free, cross-platform, open-source integrated development environment (IDE) that makes development easier. It features plugins for many languages, including PHP and Google Android, but it is also great for C, C++, and Java.

To download Eclipse, visit their download page (http://www.eclipse.org/downloads/) and choose either "Eclipse IDE for Java Developers" or "Eclipse IDE for C/C++ Developers". Install as is standard for your operating system. If you are going to be developing in different languages (I've been using all three at school right now) just download either one and install the other's packages later. To install additional packages, open up Eclipse and click Help > Software Updates, then click on the Available Software tab, expand "Ganymede Update Site", choose which plugins you want (probably either C and C++ Development or Java Development), and click Install on the right.

Eclipse keeps your panels organized using what's called a "Perspective", if you have both Java and C/C++ development installed you will have two perspectives which you can switch between:

To compile programs in C/C++ or Java you may need to install the appropriate compiler. So, go ahead and install Java or GCC. On Mac OS, installing Apple Developer Tools (http://developer.apple.com/tools/xcode/) should do the trick if it's not already installed.

Now create a new project by clicking File > New > Project.. and follow the wizard. It will allow you to choose which language you want to use and setup all the necessary files for it. You'll have to give it a name, but can probably ignore the rest of the options in the wizard.

Now that we have Eclipse setup, lets compile a program.

2. Hello world in C with Eclipse

You should now have a new project setup and need to create your first source file. To do this, click File > New > Source File. I named mine HelloWorld.c.

Lets add some code to this file:
#include <stdio.h>
main() {
  printf("Hello world!\n");
}


Now click on the little hammer build icon and then the big green play button. This will compile and then run the program, showing "Hello world!" printed in your Console window.

3. Hello world in C++ with Eclipse

With a new C++ project setup, create a new file called HelloWorld.cpp. Then enter the following code:
#include <iostream.h>
main() {
  cout << "Hello World!\n";
}


Now click on the little hammer build icon and then the big green play button. This should compile and then run the program showing "Hello world!" printed in your Console window.

4. Hello world in Java with Eclipse

Now that you have a new project setup, you have to create your first class. To do this, click File > New > Class. Give it a name, I chose to use "HelloWorld". For now, you can probably ignore all of the other options. It will bring up a new file called HelloWorld.java which contains the following code:
public class HelloWorld {
 
}

Let's add our Hello World code by changing this to:
public class HelloWorld {
  public static void main( String[] args ) {
    System.out.println("Hello world!");
  }
}


Now click on the big green "play" button to compile and run the program - you will be prompted to choose how you want to run this, choose "Java Application". Then magically in the Console window you will see "Hello world!" printed!

5. Compiling from the command line

Since I think getting familiar with the command line (Terminal.app in OS X) is important I will also add instructions for compiling each of these files from the command line.

C:

1. Navigate to the directory containing your files.
2. To compile, run: gcc HelloWorld.c -o hello
3. Then to run the program: ./hello

C++:

1. Navigate to the directory containing your files.
2. To compile, run: g++ HelloWorld.cpp -o hello
3. This will probably give you a bunch of warnings but it will be fine. Then to run the program: ./hello

Java:

1. Navigate to the directory containing your files.
2. To compile, run: javac HelloWorld.java
3. Then to run the program: java HelloWorld