Ben Lobaugh Online

Javascript: Parse Twitter Usernames, Hashtags and URIs

blobaugh — Wed, 28 Jul 2010 20:56:04 +0000

Twitter provides a plain-text stream of tweets. I was looking to add links to this stream for the usernames, URIs, and hashes. I wound up with the following function that hopefully you will find useful.

 
function parseTwitter(text) {
        // Parse URIs
        text = text.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(uri) {
		return uri.link(uri);
	});
 
        // Parse Twitter usernames
        text = text.replace(/[@]+[A-Za-z0-9-_]+/, function(u) {
		var username = u.replace("@","")
		return u.link("http://twitter.com/"+username);
	});
 
	// Parse Twitter hash tags
	text = text.replace(/[#]+[A-Za-z0-9-_]+/, function(t) {
		var tag = t.replace("#","%23")
		return t.link("http://search.twitter.com/search?q="+tag);
	});
        return text;
}

To use it simply toss in any string with a Twitteresque format and viola, links!

Bus Pilots: 2010 Family Reunion

blobaugh — Mon, 19 Jul 2010 14:39:44 +0000

I had a great time at the Family Reunion this year! I highly encourage anyone reading this to check out the Bus Pilots website and attend next year. It is a weekend long event starting Friday evening and ending Sunday afternoon. On Friday we all met a Sonic in Boise for dinner. Afterwards we cruised the dubs around downtown Boise drawing quite the attention and frustrating all the non-VW drivers. Mike then graciously allowed us to crash his place for a social BBQ. Saturday morning we did a road rallye. That was a hoot. Each car was given cryptic directions and we had to attempt to follow them and pick up clues for points along the way. It was great driving around Boise and seeing everyone else turning down random streets just as lost as you. And then there was Sunday, the big day. Sunday we all piled in to Anne Morrison park in Boise and lined up the cars for the show. It was great fun, perfect weather, good food vendors, and lots of cars. I think the total came in around 90. Come next year if you can, and keep an eye out on the Bus Pilots website for more events!

I took pictures of almost every car there. You can view the full gallery by clicking any image below.

PHP: Downloading remote content with CURL

blobaugh — Wed, 07 Jul 2010 21:57:42 +0000

With fopen becoming increasingly scarce on web hosts, CURL is becoming a better and better solution to retrieving remote content with PHP. CURL is a fairly standard PHP module and chances are if your host does not support it a simple ticket will have them installing it for you.

Because I am constantly loosing my CURL code and being forced to look it up again I decided to post my favorite CURL function for future reference for myself. I hope that you may get some use out of this as well.

 
/**
 * Get a web file (HTML, XHTML, XML, image, etc.) from a URL.  Return an
 * array containing the HTTP server response header fields and content.
 */
function curlFile($url) {
    $options = array(
        CURLOPT_RETURNTRANSFER => true,     // return web page
        CURLOPT_HEADER         => false,    // don't return headers
        CURLOPT_FOLLOWLOCATION => true,     // follow redirects
        CURLOPT_ENCODING       => "",       // handle all encodings
        CURLOPT_USERAGENT      => "blob curler 1.2", // who am i
        CURLOPT_AUTOREFERER    => true,     // set referer on redirect
        CURLOPT_CONNECTTIMEOUT => 120,      // timeout on connect
        CURLOPT_TIMEOUT        => 120,      // timeout on response
        CURLOPT_MAXREDIRS      => 10,       // stop after 10 redirects
    );
 
    $ch      = curl_init( $url );
    curl_setopt_array( $ch, $options );
    $content = curl_exec( $ch );
    $err     = curl_errno( $ch );
    $errmsg  = curl_error( $ch );
    $header  = curl_getinfo( $ch );
    curl_close( $ch );
 
    $header['errno']   = $err;
    $header['errmsg']  = $errmsg;
    $header['content'] = $content;
    return $header;
}

Additional Reading:
Reading a Remote File Using PHP
How to get a webpage using CURL

Retrieve remote JSON content with jQuery

blobaugh — Wed, 30 Jun 2010 20:03:58 +0000

I am currently working on an iPhone app using the PhoneGap project as a base. PhoneGap allows me to use my current web development knowledge to develop an application using HTML, CSS, and Javascript. A key component in almost all iPhone applications is retrieval of remote content. I am going to walk you through the steps I took while developing the iPhone app for Northwest Nazarene University.

For ease of development purposes I have downloaded the jQuery library, version 1.4.2, to my local machine.

Let's start by creating a basic HTML file that we will manipulate as we go.

 


        JSON Demo

We could statically build our own JSON string here, but since we are building an app to retreive remote content why don't we use an external source. There is a weather module in the NNU iPhone app that will do nicely. You can find it here http://www.nnu.edu/iphone/api/weather.php and the output should look something like

{"temp":["70"],"condition":["Fair"]}

(At the time of writing this was correct, but the site is still in development and may change slightly)

Great, we have our source, now we need to pull the content from it. Luckily jQuery provides some handy tools for grabbing remote content, and specifically for JSON data. Here is where the first trick comes in, cross site scripting (XSS). XSS happens when a Javascript service attempts to pull content from another server. XSS has been used for malicious purposes in the past and is therefore tightly controlled. jQuery is supposed to be able to legitimately access remote content, but if you are having problems see my post Enabling XSS for iPhone apps with PhoneGap and jQTouch to learn how to configure your Apache server to allow the remote pull.

Let's see what the jQuery code looks like

$.getJSON('http://www.nnu.edu/iphone/api/weather.php', function(data) {
  $('body').html('
 
' + data.temp + '
 
'
    + '
 
' + data.condition + '
 
');
});

Using $.getJSON we can provide a callback for the returned JSON. I am going to use a dynamic function in this example, however you can also point it to a function name you define elsewhere. See http://api.jquery.com/jQuery.getJSON/ for more information regarding the $.getJSON function.

After previewing the index.html file in your browser you should see

73
 
Fair

Congratulations, you have successfully pulled remote JSON into your app!

You can download the complete source code here

 


        JSON Demo

Complex Objects
Let's take it a step further now and work with some complex objects. We will be using the NNU iPhone app's JSON news feed located here http://www.nnu.edu/iphone/api/rssproxy.php?url=nnu_news . I am not going to post the JSON string because it gets quite long. You can view it by loading that URI into your browser.

Again, create your initial basic HTML index file. We will reuse the one listed in the above section.

Now the code for this section is going to be a little more intense. The object we are getting back contains multiple array of information. We will need to loop over the array in order to grab the individual news elements and display their contents. jQuery provides us with the $.each function (See http://api.jquery.com/each/) which we can hand the JSON data off to and get to the good stuff. Let's see what this code will look like

$.getJSON('http://www.nnu.edu/iphone/api/rssproxy.php?url=nnu_news', function(data) {
        $.each(data, function(i,item){
                $('body').append('' + item.title + '');
                $('body').append('
Published:' + item.pubDate + '');
                $('body').append('
 
' + item.description + '
 

');
 
        });
});

If everything was written correctly you should now see a listing of the news items when you refresh the index.html file in your browser.

You can download the full source here

Having Trouble?
If you are receiving a denied error from the server, or a 200 success message with no content you may be experiencing cross site scripting (XSS) issues. Take a gander at my post Enabling XSS for iPhone apps with PhoneGap and jQTouch to prevent this behavior in the future

PHP+Apache: Enabling XSS for iPhone apps with PhoneGap and jQTouch

blobaugh — Thu, 24 Jun 2010 17:40:22 +0000

I am currently working on developing an iPhone app for Northwest Nazarene University. Part of this app will need to connect to the school's webserver to retreive items such as news feeds and shared photo galleries. Being primarily a web developer I have turned to two projects created by Nitobi persons, PhoneGap and jQTouch.

PhoneGap allows me to use my current HTML, CSS, and Javascript knowledge to build a site. Then using the PhoneGap xcode project I simply drop the web files into a directory and PhoneGap transforms them into a glorious iPhone app.

jQTouch is a jQuery based library that makes the app look and feel like a real iPhone app.

This setup worked beautifully until I needed to connect to the school's webserver and retreive content. I began to run into cross site scripting (XSS) headaches. After days of pounding my head into my desk I ran across a neat little feature in Apache that allows you to turn off the XSS protection on the server. You may be thinking that sounds insecure, and you would be right, but if you are trying to pull content off your server with Javascript from remote locations it may be just the thing you need to get it working. This does not come built in Apache, it is a module you have to add in. It was pretty trivial. Here are the directions for setting up mod_headers in Ubuntu

To check and see if mod_headers was actually loaded save the following to a PHP file and view it from the server in your browser

print_r(apache_get_modules());

If that was successful mod_headers should be listed. You can now move on to the more fun stuff.

There are two ways in which you can allow XSS. The first is through a .htaccess file. This method works great, however it enables XSS for all files in the directory. The second is through PHP header(). The PHP method allows you to target more specifically what files are XSS capable, and even would allow you to do some other safety checks in your code before setting the XSS header.

.htaccess

Header add Access-Control-Allow-Origin "*"

PHP

header('Access-Control-Allow-Origin: *');

Another thing to take note of is the *. The * means anyone from anywhere may do XSS. You can however specify specific hosts that have access. See the link at the bottom of this post for more information on that.

Congratulations! You should now have an XSS compatible website. Make extra sure that all of your security is in place because XSS opens up a whole new can of worms for crackers. Ensure all input from users is cleaned before it touches your database or anything else remotely sensitive.

Articles that helped me along the way:
Access-Control-Allow-Origin Multiple Origin Domains?
Configure Apache To Accept Cross-Site XMLHttpRequests on Ubuntu
HTTP Access Control
Server-Side Access Control
Social Javascript (cross-site ajax)

jQuery: Selecting only the first level children

blobaugh — Tue, 22 Jun 2010 18:50:02 +0000

Using the .not() operator with jQuery it is possible to select only the first level of children of an element. This could come in handy on a menu for instance. Let's see what the menu code looks like.

 

Item

Sub
Sub2
Sub3


Item2
Item3

We are trying to get ul li, but not ul li ul li. jQuery has a brilliant method to select page elements like so:

 
$('ul li')

However this will get ALL of the li elements not matter the depth. We only want the first level of li. Luckily jQuery again has a method to accomplish this using .not()

 
$('ul li').not('ul li ul li')

Voila! We now have only the first level of li elements

PHP: Recursively convert an object to an array

blobaugh — Wed, 16 Jun 2010 21:00:11 +0000

When pulling in array from outside data sources you often receive an array back. The problem is that sometimes even though you know you should have an array your application does not and therefore assigns it to the stdObject object, which of course is nothing. To make it usable you must convert it back into an array. With a simple object that may be as simple as a cast, but when you are working with large complex datasets that may be several layers deep you need to make sure you get at all of them. Enter beautiful recursion. After playing with PHPs array_walk_recursive() for a bit I hit on a custom recursive function that does exactly the job. Simply pass it your object and it will munch away at it trying to convert it into a PHP array. Take a gander at the code for this below.

 
function object_to_array($obj) {
    if(is_object($obj)) $obj = (array) $obj;
    if(is_array($obj)) {
        $new = array();
        foreach($obj as $key => $val) {
            $new[$key] = object_to_array($val);
        }
    }
    else $new = $obj;
    return $new;
}

PHP: Show error on screen when disabled by php.ini

blobaugh — Wed, 16 Jun 2010 17:36:51 +0000

It is quite common to run into situations where PHP errors are suppressed or written to a log file somewhere on a live, non-development server. If you are troubleshooting and need to see the error that can be a pain. Luckily PHP and Apache have provided us with two great workarounds. The first happens through a PHP function call in a script, the second is a .htaccess directive which does require special configuration of Apache, but the majority of servers I have worked with allow this functionality.

Place this code near the top of a PHP file

 
ini_set("display_errors","1");
error_reporting(E_ALL);

This code goes into the .htaccess file. Just be sure your .htaccess file is in the proper directory relative to the code you are trying to debug

 
php_value display_errors on

Just be sure you turn error printing back off when you are done.

PHP: Add Google Analytics to an entire static HTML website with PHP

blobaugh — Mon, 14 Jun 2010 21:38:41 +0000

I am in a situation where I need analytics data and none is provided. The entire 35k+ file website is all static HTML running on a Windows IIS server. I am not familiar enough with Windows Server to know what sort of scripting capabilities there are, but I do have PHP available. I wrote a simple script that uses the PHP 5 RecursiveDirectorIterator to look through the entire site and append the Google Analytics code to the closing body tag. It then rewrites the file it is looking at.

If you are stuck in a similar situation where you do not have scripting abilities you may want to consider giving this script a go, or altering it to fit whatever language you are using. Works like a charm.

 
$directory = 'where your files are';
 
$it = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($directory));
 
while($it->valid()) {
 
    if (!$it->isDot()) {
        $c = file_get_contents($it->key());
        $c = str_replace('', YOUR ANALYTICS CODE HERE . '', $c);
        $fh = fopen($it->key(), 'w');
        fwrite($fh, $c);
        fclose($fh);
        echo "Replaced body in: " . $it->key();
    }
 
    $it->next();
}

Might be worth it to ensure you are looking only at .html and .htm files if you have a complex set. Additionally, if you have a very large set of files you may need to look at timeout issues.

Javascript: Forward user to new page

blobaugh — Mon, 07 Jun 2010 04:00:45 +0000

I often find myself needing to forward a user through Javascript for various reasons. Here are a couple quick snippets of Javascript to accomplish that task.

This one is supposed to block the Back button from tracking the change

 
window.location.replace("http://example.com");

 
window.location = "http://www.example.com";