jQuery Flashlight

It’s simple really…

The text is black and the background is black, so you can’t see the text, it looks blank. However, when you hover your mouse over the page, a background image with a color of white follows your mouse, giving the illusion of a flashlight on the page!

Simply make an html page like this. Then give the page or a block a black background.

			#black {
				background-color: black;
			}

Then give the element a background image, with the flashlight.jpg file.

			#black {
				background-color: black;
				background-image: url(http://iwearshorts.com/flashlight/images/flashlight.jpg);
				background-repeat: no-repeat;
				cursor: crosshair;
			}

That’s it! The jQuery just makes sure to track the mouse and move the background image along with it, this gives users the illusion that a flashlight is being shown over the text.

			jQuery(document).ready(function() {
				jQuery("#black").mousemove(function(e){
					jQuery("#black").css('background-position',(e.pageX - 250)+'px '+(e.pageY - 250)+'px');
				});
			});

View the Demo.

Goo.gl URL Shortener

Here’s a simple class for URL shortening using Google’s new URL API:

<?php

class GUrl {
	$api_url = "https://www.googleapis.com/urlshortener/v1/url?key=";
	$key;
	
	function __construct ($key = "YOUR_API_KEY") {
		// set up the API key if it exists
		$this->key = $key;
	}
	
	public function shortenUrl ($url) {
		curl_init();
		// concatenate the API url
		curl_setopt($ch,CURLOPT_URL,$this->api_url . $this->key);
		curl_setopt($ch,CURLOPT_POST,1);
		// send the json ecoded long version of the url
		curl_setopt($ch,CURLOPT_POSTFIELDS,json_encode(array("longUrl"=>$url)));
		curl_setopt($ch,CURLOPT_HTTPHEADER,array("Content-Type: application/json"));
		curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
		// execute
		$result = curl_exec($ch);
		// close
		curl_close($ch);
		// return the result
		return ($result['id'] = json_decode($result,true)) ? $result['id'] : false;
	}
}

?>

That’s it! Just one function to have cURL send Google the URL to be shortened and it should return a response with the shortened version contained within the parameter [‘id’]. The great thing about using google for this is later we can build a class to retrieve periodic analytics on these urls and see which links are performing well.

Array Based Templating System

Update: After experimenting with options in array based templating engines I have discovered that it’s not practical to use PHP as the platform for this technique. The fact that PHP does not allow identical array keys means that you can’t currently implement an array based template engine with say more than one paragraph tag since the <p> is output by setting an array key as such. Anyway, read on to get the full experiment:

While reading Agile Development with Rails, I came across an idea…small but it could be fairly powerful if done right. The question came up in the book about whether to include embedded ruby (ERb) within the view document itself. I wondered how a dynamically generated HTML page could exist without this functionality in a programming language…

Coming from PHP, I naturally just assumed that web programming languages either had some way to embed dynamically executed code into view elements or would have to simply print out every single line requiring something like a heredoc:

<?php
   $heredoc = <<<HEREDOC
       <p> This is some HTML inside a heredoc </p>
HEREDOC;

   echo $heredoc;
?>

However, PHP has great libraries for working with XML which is basically all HTML is…So let’s say we wanted to make a templating system strictly in PHP and then create a statically accessed but dynamically generated index page otherwise known as a cache…

First we’d load the page into our view.php file:

<?php
$xmlstr = <<<XML
<?xml version='1.0' standalone='yes'?>
<html>
 <head>
  <title>PHP: Behind the Parser</title>
 </head>
 <body>
  <h1>Hello World!</h1>
 </body>
</html>
XML;
?>

Let’s say we want that “Hello World” to be dynamic, so we’d replace the “Hello World” with a variable:

<?php

$dynamic_variable = "Hello World";

$xmlstr = <<<XML
<?xml version='1.0' standalone='yes'?>
<html>
 <head>
  <title>PHP: Behind the Parser</title>
 </head>
 <body>
  <h1>$dynamic_variable</h1>
 </body>
</html>
XML;
?>

Now we have a dynamic variable in a templated system, but not all that useful. We could just write this XML to a file, name it index.html and it would be a valid cached page…but not very exciting. However, what if we use PHP’s SimpleXML module to dynamically interact with this array, now we have dynamic access to any item in the page’s HTML in object format. Let’s add a paragraph with a class of “stuff” that says “This is an added element” underneath the h1 element:

<?php

$dynamic_variable = "Hello World";

$xmlstr = <<<XML
<?xml version='1.0' standalone='yes'?>
<html>
 <head>
  <title>PHP: Behind the Parser</title>
 </head>
 <body>
  <h1>$dynamic_variable</h1>
 </body>
</html>
XML;

$xml = new SimpleXMLElement($xmlstr);

$paragraph = "This is an added element";
$p = $xml->body[0]->addChild('p', $paragraph);
$p->addAttribute('class', 'stuff');

?>

Pretty cool, but it still isn’t too helpful, we can access every item on the page template…but we can’t easily remove children or alter the flow of the document. What we need is something in an array format. That way, if we need to, we can push() pop() and sort any information we’d like. Additionally, we can load arrays into convenient looping methods like foreach(). So let’s build our HTML page as an array:

<?php

$page = array (
            "head" => array("title" => "The Title"),
            "body" => array("h1" => "Hello World!", "p" => "This is a paragraph!")
                );

function assocArrayToXML($root_element_name,$ar)
{
    $xml = new SimpleXMLElement("<?xml version="1.0"?><{$root_element_name}></{$root_element_name}>");
    $f = create_function('$f,$c,$a','
            foreach($a as $k=>$v) {
                if(is_array($v)) {
                    $ch=$c->addChild($k);
                    $f($f,$ch,$v);
                } else {
                    $c->addChild($k,$v);
                }
            }');
    $f($f,$xml,$ar);
    return $xml->asXML();
} 

echo assocArrayToXML("html", $page);

?>

Nice! So now we can access any part of the page template without a bunch of messy HTML and PHP mixed together. If you look closely you don’t even have any greater than or less than symbols (other than to demarcate arrays)! Unfortunately, that’s about as far as you can go with an array. Due to the limitations of PHP, you cannot have two unique items with the same keys in an array. So in this model, I would not be able to generate more than one paragraph tag. This makes certain HTML necessities like list items impossible and thus this templating system unreasonable. The only way to make this system work would be to give each item in the array a unique id to make each key unique.

Photo Study: Light

Amazing light in the kitchen this morning so I decided to whip out the ol’ D-90 and try to get better at photography! I just wanted to study the light, specifically, what adjustments I could make to alter the way the image appears. I wanted to capture the atmosphere of the room and play with the intensity of the lighting:

Lessons learned, this photo would have been perfect but I wasn’t watching my background and managed to get a bunch of beer bottles in the frame…dangit!

This picture had good balance lightwise, but I couldn’t manage to filter out the shadows on the wall, kind of distracting I think…

After Not being able to remove the shadows from the wall I altered the f-stop and ISO settings, gave it a slower shutter speed and managed to amp up the light…but I still caught those damn shadows!

Here I boost the light too much, a really low f-stop, low light sensitivity but a really long shutter speed make this photo way too dramatic.

Finally….

This was one of the first shots I took before I started playing with lighting. At the very least, I learned to watch my backgrounds more closely.

Ruby, Rails and CentOS with Knownhost and cPanel

This article is primarily for those hosting a VPS with Knownhost and using a CentOS/cPanel combination. However, if the server was set up correctly, this tutorial should work with any CentOS/cPanel server.

Where to start?

To begin, you must have atleast minimal experience with the command line interface. Users should have SSH access and know how to use it. If you have heard of Putty before, then you are probably good to go. We will be installing ruby manually, installing rails through gem and installing sqlite3 manually, please find out before hand that you absolutely need the newest version of ruby and rails before you update this. Managing ruby and gems is far easier if done through the gui cPanel interface. However, at the time of writing this they only allow upgrades to 1.8.7 and I needed 1.9.2 so here we go!

Installing Ruby 1.9.2:

Before we can do anything we need the newest version of ruby.

  1. Log into your command prompt and check the version and which ruby you are using:
    ruby --version
    which ruby
    
  2. Most likely, your ruby version should be located at: /usr/bin or /usr/local/bin, now you must decide where to download your installation – I chose /var/tmp – change to that directory:
    cd /var/tmp
  3. Now grab the latest version of ruby (this may be out of date by the time you read it so look here for the latest version, simply copy the url of the download link on this page):
    wget ftp://ftp.ruby-lang.org//pub/ruby/1.9/ruby-1.9.2-p180.tar.gz
    
  4. Now that we have a fresh copy on our server, extract the zipped file (I downloaded a tar.gz file so extract with tar -zxf):
    tar -zxf ruby-1.9.2-p180.tar.gz
    
  5. Change into the newly created directory after your done extracting:
    cd ruby-1.9.2-p180
    
  6. Configure the Makefile:
    ./configure
    
  7. Build the executable:
    make
    
  8. Install the program:
    make install
    
  9. Check which path we are using for ruby:
    which ruby
    
  10. Check to see which version of ruby we are using:
    ruby --version
    

If everything went smoothly you should have the newest version of ruby running on your system. It should most likely be run from /usr/local/bin and the version should match the filename you just downloaded.

Now Install Rails:

  1. This step is pretty easy, simply type in the command below and watch the magic happen:
    gem install rails
    

If everything here worked correctly you should now have rails on your system! However, you probably won’t be able to run a rails server yet, if you enter the command below and receive an error about sqlite being out of date, then continue…

Install sqlite3:

If you typed “gem install sqlite3-ruby” and it didn’t work, the you most likely need to compile the most recent version of sqlite3 manually. Here is where you can find the most up to date versions, I chose to install the tar.gz version.

  1. change to your /var/tmp directory again:
    cd /var/tmp
    
  2. Find the link for the most recent version of sqlite3 and copy it, then download it to your server:
    wget http://www.sqlite.org/sqlite-autoconf-3070500.tar.gz
    
  3. Unpack it:
    tar -zxf sqlite-autoconf-3070500.tar.gz
    
  4. Change to the newly created install directory:
    cd sqlite-autoconf-3070500
    
  5. Configure the Makefile:
    ./configure
    
  6. Make the application:
    make
    
  7. Install the application:
    make install
    

If everything went well, you should have the newest version of sqlite3 installed on your server but you still need ruby to talk to it, so issue the command:

gem install sqlite3-ruby

Now Ruby should have a gem installed called sqlite3! This will allow you to run a ruby server.

Test Your Setup:

Now that you have installed everything you need to get your ruby server and rails application up and running you need to test to make sure it’s working.

  1. Navigate to your /home directory or wherever you are comfortable setting up a test blog:
    cd /home
    
  2. Run the following command:
    rails new blog
    
  3. This has set up a very basic blogging application at (in my example) /home/blog, change to that directory:
    cd /home/blog
    
  4. Run the rails server and navigate to your server to port 3000 to check it out! For instance, go to “http://mydomain.com:3000” or if you don’t have a domain for your server, just put in the IP address, so “http://11.111.11.11:3000”.
    rails server
    

That should be it for getting your rails server up and running on a CentOS system running cPanel just like Knownhost’s setup. Now if you’d like to set up a database and get started building applications, I would advise checking out:

Compiling From Source: Ruby 1.9.2 on CentOS

Recently I tried to upgrade ruby on my server. Installation was supposed to go something like this:

cd /tmp
wget ftp://ftp.ruby-lang.org//pub/ruby/1.9/ruby-1.9.2-p180.tar.gz
tar -zxf ruby-1.9.2-p180.tar.gz
cd ruby-1.9.2-p180
./configure
make
make install

However, when I got to the “./configure” command, I would return a c compiler error. So I check my c compiler and it was in fact working… Then I tried another version of ruby with the same result. So I did some searching…

It turns out, if you set your server up a long time ago or are running a VPS that has been set up by other admins, there might be a chance you have your /tmp directory mounted with the ‘noexec’ option. This will option will block any execution of programs within the /tmp directory itself. So you have a couple options:

Download to /tmp then tar to some other folder (I used root for example, probably a bad example)

cd /tmp
wget ftp://ftp.ruby-lang.org//pub/ruby/1.9/ruby-1.9.2-p180.tar.gz 
tar -zxf ruby-1.9.2-p180.tar.gz /root/ruby-temp
cd /root/ruby-temp/ruby-1.9.2-p180
./configure
make
make install

Download to Another Directory and Install

cd /root
mkdir /root/ruby-temp
cd ruby-temp
wget ftp://ftp.ruby-lang.org//pub/ruby/1.9/ruby-1.9.2-p180.tar.gz 
tar -zxf ruby-1.9.2-p180.tar.gz
cd /root/ruby-temp/ruby-1.9.2-p180
./configure
make
make install

Best Option: Change Permissions on the /tmp Directory (remember to change it back when finished!)

mount -o,remount,rw,exec /tmp
cd /tmp
wget ftp://ftp.ruby-lang.org//pub/ruby/1.9/ruby-1.9.2-p180.tar.gz 
tar -zxf ruby-1.9.2-p180.tar.gz
cd ruby-1.9.2-p180
./configure
make
make install
mount -o,remount,rw,noexec /tmp

Also Try: /var/tmp

* If you don’t have permission to change the “exec” option on the /tmp drive, you can also try and compile from the /var/tmp directory. The same command can be executed on the /var/tmp directory as well:

mount -o,remount,rw,exec /var/tmp
mount -o,remount,rw,noexec /var/tmp

So like this:

mount -o,remount,rw,exec /var/tmp
cd /var/tmp
wget ftp://ftp.ruby-lang.org//pub/ruby/1.9/ruby-1.9.2-p180.tar.gz 
tar -zxf ruby-1.9.2-p180.tar.gz
cd ruby-1.9.2-p180
./configure
make
make install
mount -o,remount,rw,noexec /var/tmp

Or just:

cd /tmp
wget ftp://ftp.ruby-lang.org//pub/ruby/1.9/ruby-1.9.2-p180.tar.gz 
tar -zxf ruby-1.9.2-p180.tar.gz
cd ruby-1.9.2-p180
./configure
make
make install

Hope that helped!

Hidden Messages in Images

There’s a technique called “steganographic encoding” where one hide’s a text message or even a whole file structure inside a seemingly normal image. We’re going to make a simple version of this!

  • First, let’s find an image to use…I chose this self portrait I snapped while RJ was playing around with reactivision.

  • Next, lets decide what we want in our message… for now I’ll just make up some text. I’ll type “This is a secret message” in a text file. You could have a whole set of files if you wanted, just compress them into a zipped folder. Save this file (as a .txt) and the image (as a .jpg) into a folder on your Desktop.

  • Now open a command prompt (Windows 7 & vista just open the start menu and type “cmd” – XP users, just go to start -> run -> then type “cmd”)
  • Change to the directory where your image and text file are stored on your desktop. Issue the command:
  • cd C:UsersOwnerDesktopsecret
  • Type the following: (you must change the file names to your own…I used secret.jpg and secret.txt)
  • copy /B secret.jpg + secret.txt new.jpg

  • Hit enter and the DOS prompt should create a file called new.jpg in the same directory you were working in. The /B you entered above is to copy binary data, which simply copies the text data onto the end of the JPEG image. However, when you open the image, the image header tells your computer to stop reading after the length of the image…thus no one will know that there is more information available.

  • To get the information out of this image, simply change the file extension of the new image to “.txt” instead of “.jpg” and your computer should be able to read the message. In fact, for added security, you could zip the text files up and password protect the directory before copying it.

You can see from the image above that the text “This is a secret message!” didn’t take up very much room in the file, so a user wouldn’t see a different file size. However, I put alot of information in that image, say from this page, then the file size will change significantly. This can tip people off if the filesize of images is not roughly what they expect.

Below is the large image, try and decode it’s message! Simple right click the image, save it to your Desktop and change the file extension to “.txt” or simply open the image in a text editor like notepad++. You should then be able to read the secret message! Have fun…

Motivation Behind the Article:

Recently, the Anonymous group hacked an infamous church organization during a live interview. It’s gotten a lot of press because of the skill and precision with which the attack was carried out. The fact that it was done during a live interview with one of the members of the Anonymous Group conveys a sense that these hackers can effortlessly and reliably take down networks at will. I think it’s sad that the majority of the web population doesn’t have any idea how to do something like this. We’ve recently seen examples of why the lack of fundamental knowledge about hacking is a bad thing. It’s better IMO to be at least cognizant of such things rather than taking the whole “head in the sand” approach. Possessing knowledge about internet infrastructure and how to circumvent it might be the equivalent to our founding fathers’ intent on the right to bear arms.

We’ll be starting off this week with an old trick (from 1985) used to hide messages in seemingly innocuous images. It’s pretty simple, if no one suspects the image of containing a message then information can flow freely without fear of discovery. Suddenly, a person with this skill can communicate freely without fear of censorship. Online, sites like flickr and forums become instant message boards without anyone knowing. In fact, it was suspected that terror groups where using these same channels to communicate back in 2001. However, not everyone who needs to communicate in this way is a terrorist. There are plenty of legitimate reasons for the public to be made aware of this technique. If nothing else,

Creative Brief for Terry Southern

We’re developing a creative brief for one of our clients, Nile Southern (son of the well known writer Terry Southern) and I though it would be helpful to display our process thus far in nailing down something tangible. First off we had a meeting with our client (Nile) to learn about his needs and goals for the project. We then did a “deep dive” into Terry’s work, watching movies, reading books and having literary type discussions. Once we felt we had a firm grasp on Terry’s work and life, we started coming up with key entry points into this story.

The project is transmedia, so there will be a lot of options for communicating with target audiences. Transmedia involves telling a story (could even be self perpetuating, dynamic and ever changing story) through various media channels. There are the standard ways of communicating a marketing message, like print, radio, TV and the internet…but there are more creative and engaging ways to get your message out too. I really like what Trent Resnor did with “dystopia” where he communicated messages through “clues” on everything from government conspiracy to an underground resistance. The whole thing was an integrated game played with NIN fans in order to communicate his ideas and thoughts about what he sees as our inevitable future.

Initially, I had come up with an entry point around some kind of satirical element whether it be a newspaper article or law written to amend our constitution. I respected Terry’s work with satire/hyperbole and wanted to do something along those lines. So I presented a case where we try to get a law passed to amend the constitution for “wallstreeters.” Terry often presented social discourse in his satire often commenting on the current struggles of our society. So I thought it would be interesting to present this entry point as a recently discovered “work” of Terry’s.

The idea was to get a law passed that would “re-classify” wallstreet bankers as “solitary states” thereby deposing these people from all rule of law and allowing them to take full advantage of their elevated positions in life. We would go so far as to take legal argument for the law and promote it as if we actually believed wallstreeters were entitled to this position. The idea stemmed from thought around what Terry might be saying about our society today. What would he have commented on? What would he have despised?

There were more popular presentations and the idea was not well received. So I went back to the drawing board. I read some more work and sketched out a few ideas. I tried to break this whole thing down to one fundamental guideline. What was Terry’s ultimate purpose in writing? It had to be something simple yet elegantly connective. It likely existed in most if not all, his work. Finally, last night I locked in on it.

Terry just wanted truth. He saw mainstream ideas as elaborate hoaxes. He noticed that highly produced works, like those on Broadway were only “representations” of true human emotion but were so commercialized they became sterile. He wrote in 1962 for Glamour about this exact phenomenon in an article entitled The Beautiful-Ugly Art of Lotte Lenya. He drew attention to the difference between a genuine emotion experience and a purely cerebral representation of an experience. He talked about Broadway shows being glamorous and “eventful” but not necessarily realistic. He was interested in how audience had genuine emotional reaction to something and used the Off-Broadway stage collage “Brecht on Brecht” as having the ability to provide that.

Audience actually reacts stronger to a situation that is “believable” and “ugly” than a dolled up and utopianistically contrived example of an emotion. He argued that if people can see the “real” or “truth” in something, they identify with it and have genuine emotional reactions to events surrounding these things. He called Broadway shows “stylized ideals” and thought of “ordinary” as “life in its bedrock essence.” This simple truth exists in many of his works. SGR (Stiff Gook Rimming) for example was an extraordinarily hyperbolic extraction of war…but is it so extra ordinary? Do snipers not tally the numbers of people they’ve killed? Southern simply takes one more step and refers to situations where soldiers take “tokens” of their enemy, much like scalping. There are other examples.

In the file Easy Rider Southern end’s the movie with nothing more than our main character and his companion being brutally murdered for apparently no more reason than a badly thought out joke. Isn’t that how many endings in “reality” happen? Go to the theatre today and try to watch a movie where the audience doesn’t have their way. Often times in life, the hero never emerges from chaos and simply succumbs. I find that more identifiable than a situation where John McClane ends up with a total body count of around 100 people in 8 hours. I find it interested that the top US Army sniper currently on active duty today has only 78 confirmed kills. I’ve seen more deaths than that watching any of the James Bond films.

Therefore, for the creative brief concerning Terry Southern, I propose a campaign around “calling out” the differences between reality and “stylized ideals.” Where could we add discourse around these differences? Maybe a poster in a subway seemingly hanging over the head of a street artist playing music for “tips” that reads “Hero.” Or maybe it’s more like the Dove campaign for “Real Beauty,” showing normal looking people as models to celebrate the ordinary.

How does this help to relaunch the career of Terry Southern? We could hopefully start a movement. Much like what Trent Reznor was doing by calling attention to our own inevitable future, we could call attention to the “true emotional experiences” we are missing by participating in pop culture.

I will bring this idea to the table today in the hope that it will be better received and could possible become the “bedrock” or our up and coming relaunch of Terry Southern’s Career campaign. Either way, I will be writing about the process of creating a brief next time.

Ajax Flickr Widget – WordPress

I recently wanted to have my Flickr photostream displayed in the sidebar of this site. I couldn’t find a simple widget that would display my photostream without having to hack a bunch of CSS to make it match my site, I also needed to photos to load in after site load because it’s a bit heavy on the images. I needed a better solution, so I decided to build my own. The result is almost ready to be released for WordPress as a plugin. Just a few minor cleanup issues.

Basically, it works off the phpflickr library, users fill out a simple form to get started and the module loads the most recent photos in the photostream asynchronously in order to ensure the site’s fastest possible load time.

I thought it might be helpful to quickly review how to write an ajax enable WordPress 3.0+ plugin:

Initialize the Widget:

class Flickr_Gallery extends WP_Widget {
	function Flickr_Gallery() {
		 $widget_ops = array(
		 'classname' => 'flickrgallery',
		 'description' => 'Displays most recent flickr photos from the stream according to a specified username.');
		$control_ops = array(
		 'width' => 250,
		 'height' => 250,
		 'id_base' => 'flickrgallery-widget');

		 $this->WP_Widget('flickrgallery-widget', 'Flickr Gallery', $widget_ops, $control_ops );
	}

Output a form where users can fill in the necessary information:

// produce the form for the widget
function form ($instance) {
$defaults = array('catid' => '1', 'numberposts' => '5');
$instance = wp_parse_args( (array) $instance, $defaults ); ?>
<p>
<label for="<?php echo $this->get_field_id('key'); ?>">API Key:</label>
<input type="text" name="<?php echo $this->get_field_name('key') ?>" id="<?php echo $this->get_field_id('key') ?> " value="<?php echo $instance['key'] ?>" size="20"> </p>
<p>
<label for="<?php echo $this->get_field_id('secret'); ?>">Secret:</label>
<input type="text" name="<?php echo $this->get_field_name('secret') ?>" id="<?php echo $this->get_field_id('secret') ?> " value="<?php echo $instance['secret'] ?>" size="20"> </p>
<p>
<label for="<?php echo $this->get_field_id('username'); ?>">Username:</label>
<input type="text" name="<?php echo $this->get_field_name('username') ?>" id="<?php echo $this->get_field_id('username') ?> " value="<?php echo $instance['username'] ?>" size="20"> </p>
<p>
<label for="<?php echo $this->get_field_id('numberphotos'); ?>">Number of Photos per Page:</label>
<select id="<?php echo $this->get_field_id('numberphotos'); ?>" name="<?php echo $this->get_field_name('numberphotos'); ?>">
<?php for ($i=1;$i<=99;$i++) {
$i = $i * 3;
echo '<option value="'.$i.'"';
if ($i==$instance['numberphotos']) echo ' selected="selected"';
echo '>'.$i.'</option>';
} ?>
</select>
</p>
<?php
}
// produce the form for the widgetfunction form ($instance) {
 $defaults = array('catid' => '1', 'numberposts' => '5');  $instance = wp_parse_args( (array) $instance, $defaults ); ?>
 <p>     <label for="<?php echo $this->get_field_id('key'); ?>">API Key:</label>     <input type="text" name="<?php echo $this->get_field_name('key') ?>" id="<?php echo $this->get_field_id('key') ?> " value="<?php echo $instance['key'] ?>" size="20"> </p>
 <p>     <label for="<?php echo $this->get_field_id('secret'); ?>">Secret:</label>     <input type="text" name="<?php echo $this->get_field_name('secret') ?>" id="<?php echo $this->get_field_id('secret') ?> " value="<?php echo $instance['secret'] ?>" size="20"> </p>    <p>     <label for="<?php echo $this->get_field_id('username'); ?>">Username:</label>     <input type="text" name="<?php echo $this->get_field_name('username') ?>" id="<?php echo $this->get_field_id('username') ?> " value="<?php echo $instance['username'] ?>" size="20"> </p>    <p>   <label for="<?php echo $this->get_field_id('numberphotos'); ?>">Number of Photos per Page:</label>   <select id="<?php echo $this->get_field_id('numberphotos'); ?>" name="<?php echo $this->get_field_name('numberphotos'); ?>">   <?php for ($i=1;$i<=99;$i++) {		$i = $i * 3;        echo '<option value="'.$i.'"';        if ($i==$instance['numberphotos']) echo ' selected="selected"';        echo '>'.$i.'</option>';     } ?>    </select>  </p>
 <?php}

Create a standard "Save" function:


// save the widget
function update ($new_instance, $old_instance) {
$instance = $old_instance;

$instance['numberphotos'] = $new_instance['numberphotos'];
$instance['key'] = $new_instance['key'];
$instance['secret'] = $new_instance['secret'];
$instance['username'] = $new_instance['username'];

return $instance;
}

Output the widget:

// print the widget
function widget ($args,$instance) {
	extract($args);
	$key = $instance['key'];
	$secret = $instance['secret'];
	$username = $instance['username'];
	$numberphotos = $instance['numberphotos'];
	echo $before_widget;
	echo $before_title.$title.$after_title;
	// load in your custom output function below
	echo customeOutputFunction();
	echo $after_widget;
}

We must also have a function to register the widget with WordPress:

// register the widget
function load_flickr_gallery() {
register_widget('Flickr_Gallery');
}

Finally, add the hook that will register the widget when WordPress loads widgets:

//add_action('widgets_init', 'load_flickr_gallery');
add_action('widgets_init', create_function('', 'return register_widget("Flickr_Gallery");'));

Now, if we want ajax functionality, add:

// Function for handling AJAX requests
function flickr_gallery_handler() {
	// Check that all parameters have been passed
	if ((isset($_GET['mywidget_request']) && ($_GET['mywidget_request'] == 'some_action')) && isset($_GET['page'])) {
		$fpage = (int)$_GET["page"];
		if($fpage < 99){
			echo outputGallery($key, $secret, $username, $numberphotos, $fpage);
			exit();
		} else {
			echo "The page you requested is too large!";
			exit();
		}
	} elseif (isset($_GET['mywidget_request']) && ($_GET['mywidget_request'] == 'some_action')) {
		// Otherwise display an error and exit the call
		echo "Error: Unable to display request.";
		exit();
	}
}

And add the ajax handler to the init():

// Add the handler to init()
add_action('init', 'flickr_gallery_handler');

Now simply include some sort of ajax script to the front end in order pass the request:

jQuery(document).ready(function(){
	function ajaxLoadGallery(dest) {
		jQuery("#gallery-container div.page, #gallery-container ul, #gallery-container p").fadeOut();
		jQuery.ajax({
			type    : "GET",
			url     : "index.php",
			data    : { mywidget_request    : "some_action",
						page : dest
						},
			success : function(response) {
				// do something with the server response here

			}
		});
	}
});

And your all set!

Feel free to add any other functions outside this class, or inside for that matter, just remember not to violate any WordPress reserved function names you should be able to add any function you want!

Amazing Business Cards

SXSW is coming up sooner that I want it to and in preparation, I’m going to need a lot of business cards. In fact, I don’t just need a business card, I need a BUSINESS card. Something that people say to themselves, “haha, I remember that guy…” and also conveys the “I just don’t feel right throwing this business card away!” emotion.

I checked out a site with some really cool business cards. However, I need something that’s more inline with what I’m trying to convey to the world. So I’ll be stepping through the process of making a business card from design to production. Here are my guidelines:

  1. The card must be interactive
  2. It’s a plus to recycle!
  3. Cheap
  4. Memorable
  5. No disposables (yes I thought of sticks of gum and printing on the wrapper…but people would just toss it)
  6. It has to fit my personality.

So over the next couple of weeks I’ll be documenting my exploration of business cards. Starting with some really great ideas: