My pain began when I decided to learn objective-c to build an OSX application using the Remember The Milk API and after a bit of reading over their documentation realizing that the authorization can be a bit complex. I know that for some objective-c maybe as easy as breathing but let me just say that this is the first time I have ever attempted working with an API using REST, and also this is the first time attempting to build an application on the MAC, but I have had some experience building iPhone applications. So needless to say I am a beginner at this.

Now, for many online API’s there needs to be some kind of authorization that happens, which makes since, and the Remember The Milk REST API requires that you send a correctly formatted URL to them. One of the major parts of this url is the signature. The REST signature is a combination of several different strings tied together and hashed using MD5. It may be good to note here that MD5 is NOT encryption, and never use it as such. Its basically my understanding that all MD5 does is take a string and produce a binary code that can be decoded just about anywhere. So all in all after the signature is hashed using MD5 it should look something like this.

00be938d9cab78d2e24dfa21f40f4e0caf1

Yeah, just a bunch of gibberish. Notice that its all lowercase, more on that in a bit.

Ok, regardless of what its going to be used for the basic need here is to take a string(any string) turn it into an MD5 hash then return that has as a UTF-8 encoded string. The reason for the UTF-8 encoding si that most of these REST API’s call for it. Unfortunately Cocoa doesn’t seem to have any nice and simple method to produce an MD5, even after hour of searching on the net I still find this hard to believe. It would be so nice if we could just do this: md5(‘mystring’) and get a nicely formatted string.

For my project I created a class called Utilities and placed the following method there. This is a good idea because we really want this method to be reusable for every project that we may undertake, but all we want to have to do is include these file in our project and have the functionality easily accessible.

Utilities.h

#import <Cocoa/Cocoa.h>
#import <CommonCrypto/CommonDigest.h>
@interface Utilities : NSObject {
 
}
 
//generates md5 hash from a string
+ (NSString *) returnMD5Hash:(NSString*)concat;
 
@end

As you can see from above you will need to Import <CommonCrypto/CommonDigest.h> into your class, which provides some cryptographic voodoo which I am not bothering to learn unless absolutely necessary.  Next is the normal @interface, then the class method to produce an MD5 hash.

Utilities.m

#import "Utilities.h"
@implementation Utilities
 
//generate md5 hash from string
+ (NSString *) returnMD5Hash:(NSString*)concat {
    const char *concat_str = [concat UTF8String];
    unsigned char result[CC_MD5_DIGEST_LENGTH];
    CC_MD5(concat_str, strlen(concat_str), result);
    NSMutableString *hash = [NSMutableString string];
    for (int i = 0; i < 16; i++)
        [hash appendFormat:@"%02X", result[i]];
    return [hash lowercaseString];
 
}
 
@end

Above is the objective-c class method used to return a MD5 hash. All you would need to do is call the class method within any other class in your project like this.

NSString *rtmApiSig = [Utilities returnMD5Hash:[NSString stringWithFormat:@"%@api_key%@method%@", rtmSecret, rtmApiKey, rtmMethod]];

This is the actual code that I used for my Remember The Milk signature. A more simple way to demonstrate the usage of this would be.

NSString *myMD5String = [Utilities returnMD5Hash:@"test"];

This will produce, 098f6bcd4621d373cade4e832627b4f6. You can test your results by using this great tool.

One of the problems that I ran into is that most REST API’s require the hash to be lowercase and after wondering for to long of why the heck it wasn’t working I used that tool to figure out that the hash I was producing was incorrect, so I quickly changed the method to produce a lowercase string and everything was fixed.

So, now you should have a new utilities class which you can start piling with things like this for easy reuse in everyone of your projects. I haven’t done any extensive testing but you should be able to use this code for an iPhone application. But one thing I am sure about is that you can use this MD5 has for the Remember The Milk API or the Flickr API.

Please let me know if you have any questions or maybe even a better way of doing this, I will try to answer quickly.

Here is a look at their old website design.

The design I did for Graphic Creations.

And the final design for their new website.

…

As you can see the final design has but one major change to it which is the background color is completely green with some shadow edges for the content of the site. I’m guessing that the client, like so many others that I have had experience with, wanted to have a rigid structure and definition for what is the actual website area and the free space that one sees with a larger monitor. Since most design now used a fixed width layout I seem to be getting this request more often. Although, in my opinion, flanking the content with super bright green tends to be very garish especially when viewing the page on a 27″ monitor.

To see larger images and some more detail about this website and a link to get there check it out in my work gallery here.

Thanks to Printing Storefront Solutions for making this design and development possible.

The Model-View-Controller is basically a design theory and a very logical organization of the parts or an iPhone application.

Model is basically the classes that hold your application’s data. For example if you created an application that when a button was pressed would take the name of that button (a string) then output that string to a label or a text field, then in this instance the Model object would be the string itself, the actual data that was used and transferred. This is a very loose example actually but, its simplicity I think makes the Model object more understandable. Most application that use a Model object will be storing or preserving data like when using Core Data classes.

View is fairly easy, if you can see it then its place in the MVC theory is View.  Although in some application there is a necessity for View objects to be hidden or invisible, these are still considered to be View objects. A view object can be windows, buttons, labels, etc…

Controller is the mediator between the Model and View. A controller object interprets user actions made in view objects and communicates new or changed data to the model layer. When model objects change, a controller object communicates that new model data to the view objects so that they can display it. Simply, the Controller object looks at changes from either the Model or View and Tell them how to behave.

The main reason for MVC theory is very similar to Object Oriented theory, where any object that is written should be easily identifiable as belonging to one of these three categories and no functionality within that object could be classified as belonging to any of the other two categories. Its all about abstraction and portability! An object that implements a button (View) should contain code that processes data (Controller) when it is tapped.  A class that implements a button can be used in any application but, a class that implements a button that processes a specific action or calculation can only be used in that one particular application.

Example declaration of an action method:

- (IBAction)doSomething:(id)sender;

• -(IBAction) = the return type
• doSomething: = name of the action
• (id) = argument
• sender; = argument name

The name of the action can be anything you want but must have a return type of IBAction, which is the same as declaring a return type of -(void).  It just says that action methods do not return a value.

Usually an action method will take one argument and is typically defined as id and given a name of sender.  (id)sender; is not always necessary when declaring an action method but is typically used all the time.  The purpose of (id)sender; is to contain a reference to the control that has triggered the action method.

The Outlet is and instance variable, and our controller class can refer to objects in the nib by using Outlets.  Outlets are used to effect objects in your nib such as text labels, buttons and so on.  By declaring an outlet and connecting that outlet to an object in the nib, you could use the outlet from within your code to change any object in your nib.

The Outlet is declared using (IBoutlet)

Example:

@property (nonatomic, retain) IBOutlet UILabel *statusText;

The IBOutlet keyword is defined like this:

#ifndef IBOutlet
#define IBOutlet
#endif

IBOutlet does nothing as far as the compiler is concerned. Its purpose is to act as an indicator or hint to tell Interface Builder that this is an instance variable that were going to use to connect to an object in the nib. At any time if you want an instance variable to connect to an object in the nib then it must be preceded by the IBOutlet keyword.

Connections made from your code to the nib must use these instance variables.

I wonder where Google will index that last statement..?

Anyway, If I was making a 6 million dollar man I would really make sure that I stitched the bionic parts on correctly to avoid any conflicts with current body structure. The same is true with Jquery and WordPress. You don’t want your awesome bionic enhancements to fail after uploading the latest super awesome plugin that uses MooTools or Prototype. The main reason why Jquery would conflict with other libraries like Prototype is the “$”, which is used to replace getElementById(), Prototype uses the same symbol but in different ways, Its as if Jquery and Prototype are fighting for control over that id. Or, comparatively its like the 6 Million Dollar Man battling it out with the 6 Million Dollar woman. The resulting barrage of bell-bottoms, hairspray and bionic sound effects may just rip your face off!

None of us want to see that happen so read on.

Jquery loaded correctly

After reading several posts on the subject, listed at end of post,  I came up with the ultimate way of calling Jquery into WordPress. Here is what the following code will do for you.

• Deregister the local copy of Jquery used by wordpress
• Call Jquery hosted from Google
• Register Jquery from Google and place it in the footer
• Register your other external js files and place them after Jquery

[php]
<?php
// Footer scripts
function jquery_init() {
if (!is_admin()) {//load scripts for non admin pages
wp_deregister_script(‘jquery’);//deregister current jquery
wp_register_script(‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’, false, ’1.3.2′, true);//load jquery from google api, and place in footer
wp_enqueue_script(‘jquery’);

// load a additional js files
wp_enqueue_script(‘my_script’, get_bloginfo(‘template_url’) . ‘/js/my-script.js’, array(‘jquery’), ’1.0′, true);
wp_enqueue_script(‘my_script2′, get_bloginfo(‘template_url’) . ‘/js/my-script2.js’, array(‘jquery’), ’1.0′, true);
}elseif (is_admin()){//load scripts for admin page
wp_enqueue_script(‘my_admin_script’, get_bloginfo(‘template_url’) . ‘/js/my-admin-script.js’, array(‘jquery’), ’1.0′, true);
wp_enqueue_script(‘my_admin_script2′, get_bloginfo(‘template_url’) . ‘/js/my-admin-script2.js’, array(‘jquery’), ’1.0′, true);
}
}
add_action(‘init’, ‘jquery_init’);
// END :Footer scripts
?>
[/php]

Ok, there area couple of things I want to go over here.

1. You should always always put all of your scripts in the footer. Why? Because, when a web page loads the markup it loads from top to bottom. So, if you have several scripts at the top of the page your users have to wait for all that stuff to load in the background before any of the lower content will load. That’s almost as unbearable as Steve Austin running in slow-mo. Also, most of your javascript is no good unless it has content to play with, so just put the scripts at the bottom of the page and it will load faster with every thing working correctly. If you don’t believe me just view the source on my website and see, all the scripts in the footer.
2. Let google host it, its faster. Google provides AJAX Libraries API hosting for most well known javascript libraries and we can definitely take advantage of this CDN.
3. Have WordPress place your external scripts according to their javascript library. The wp_engueue_ascript() function allows for an argument called $deps, which you can use to attach any other external scripts to its library and then WordPress will place it on the page accordingly.

Loading inline scripts

One of my scripts needs to be loaded from another external file and it needs to go below the previous scripts on the page. Here is how you can do that.

[php]
<?php // Banner Footer scripts
function alt_footer_files(){ ?>
<script type="text/javascript">
jQuery(document).ready(function($) {
//my javascript here using $
});
</script>

<?php } }
add_action(‘wp_footer’, ‘alt_footer_files’, 10);
// END :Footer scripts
?>
[/php]

Here I use add_action() to load scripts into the wordpress footer at position 10, which will be below all of the previous script links. You should also notice that I am calling Jquery using “jQuery(document).ready(function($)”. This replaces the normal “$(document).ready(function()” and allows jquery to function in a no conflict mode but still being able to use the $ in your markup.

Awesome posts about the subject

• Eric Martin, most of the information comes from this great post.
• The WordPress Codex on this subject.
• Using Jquery with other libraries, from the jquery site.
• Including Jquery the right way from the diggwp site.
• Wow the original TV intro of 6 Million Dollar man brings back memories of my childhood

Annotate and image with ImageMagic and PHP

Original test image

Simple annotate

How its done

Here is the code used for the above image annotation.

[php]
<?php
header( ‘Content-Type: image/jpg’ );
system("convert saob.jpg -font AvantGarde-Book -fill black -pointsize 20 -gravity center -annotate +0+0 ‘Senseless Acts of Beauty’ jpg:-");
?>
[/php]

Code Breakdown

• saob.jpg (The location of the original test image)
• -font AvantGarde-Book (The font command sets the font family, I chose AvantGarde-Book which is already used by my server)
• -fill black (fill is the command that sets the fill for the font, I set the color to black)
• -pointsize 20 (set the size of the font to 20)
• -gravity center (tells the font to be placed in absolute center of the image, vertically and horizontally)
• -annotate +0+0 ‘Senseless Acts of Beauty’ (command to apply text to image, you can use the +0+0 as x and y coordinates)
• jpg:- (output a jpg file)

See reference and tons of example here.

Why can’t I get ImageMagick to work?

Either its not installed on your shared host, or its installed and crippled so you can’t use php functions like “exec(), or system()”. Its good to mention that if you are running into this problem you may want to check out some API’s that hook into ImageMagick like Imagick for PHP, or MagickWand.  Both are very good API’s but, you will find less examples working with them then the original ImageMagick documentation.

Now, before we get into an example, I would like to point out that most of the examples around the net are using personal installs of ImageMagick, or from a person that has root access to a dedicated server. This allows these code guru’s to edit the Apache server to accept functions that most shared hosting has turned off.

The first time I tried ImageMagick I installed a virtual machine on my computer running Linux(Umbuntu) and I used and SSH connection to run bash commands on the local server that had the perfect install of ImageMagick that let me do whatever I wanted. Here the bad thing about that, It took FOREVER! And not only was I unsure about the security of my server but I also didn’t know how it would effect and actual server CPU, of even if all my code would work on the server that I moved it to.

So, the perfect solution came to me the other day when I ran phpinfo() on my current host HostGator, and found that ImageMagick was installed. Within minutes I was running ImageMagick commands on my development domain, AWESOME!

So, Long story short, don’t try installing ImageMagick unless you have all the time in the world and your an Apache guru, just use HostGator!

Is ImageMagick installed on my current host?

The first thing you want to do before you begin working with ImageMagick is make sure that its installed on your host’s server, along with what font’s you can use and what convert commands are installed on the server.

note: The following code will assume that you have FTP access to your server and have basic knowledge of PHP.

Just create a page called magicktest.php and paste in the following code

[php]
<?php
header(‘Content-Type: text/plain’);
system("exec 2>&1; type convert");
system("exec 2>&1; locate */convert");
system("exec 2>&1; convert -version");
system("exec 2>&1; convert -list type"); // << before IM v6.3.5-7
system("exec 2>&1; convert -list font");
?>
[/php]

This will run a few of commands on your server to see what is present.

• header (tells the browser what type of content will be displayed, nothing before this or you will get a header error)
• type (Tells you if convert is available on the command PATH and where it is)
• locate (finds all convert commands that exist on the server, including ones that are NOT ImageMagick commands)
• convert -version (prints the version number of convert)
• convert -list type (lists fonts for an older version of ImageMagick)
• convert -list font (lists the fonts that ImageMagick has access to)

If all you see ar errors, then “convert” is not on the command line path, and your ISP provider did not initialize the web server PATH properly to include it. If this is the case you will need to find out exactly where it is located and use something like this for you PHP scripts, which makes your script less portable. For example suppose the “convert” command is in “/opt/php5extras/ImageMagick/bin“, then you can set that in a variable at the top (for quick changes for different ISP hosts), and directly specify its location. For more explanation on this see the master of all things ImageMagick Anthony Thyssen and this post.

Now once you have all that information save it somewhere, you will always need to reference the convert path or fonts installed.

Can I use exec() to run commands on my host?

An easy way to test and see if exec() is available and working on your server is to run the following code provided by php.net.

[php]
// outputs the username that owns the running php/httpd process
// (on a system with the "whoami" executable in the path)
echo exec("whoami");
?>
[/php]

If you see your user name then its all working fine. If not, you may want to try system(), and/or passthru(). Actually in most cases if your code doesn’t work try system() or passthru(), I will be using a combination of the three in my post examples.

Difference between ImageMagick images and normal image files

The basic idea of ImageMagick is that you want the server to adjust your images just like you could do in photoshop. But, you won’t be referencing your images the same as <img src="myimage.jpg" />. With photoshop you edit and image then save it as a file then reference the file, src=”myfile.jpg”.  With ImageMagick, you ask the server to do the image edits and then it returns code that builds the image in the browser, this is the main reason why we need header() at the top of your php file. If you didn’t specify headers before your code you would get a bunch of crazy characters all over the page.

Here is how its done. You create a file called rotateImage.php, then you reference it just like and image, <img src=”rotateImage.php” />. So you pull the php file in through the image tag and it displays your image as if the php file WAS an image file. Very cool right!!

Examples!! Rotate

Original test image

Rotate image 45 degrees

The magick! Rotate and image with just two lines of code!

[php]
<?php
header( ‘Content-Type: image/jpg’ );
system("convert saob.jpg -rotate 45 jpg:-");
?>
[/php]

Example:  Annotate, negate, resize…

Several commands in one!

The magick! Annotate, Negate, Resize, swap, composite

[php]
<?php
header( ‘Content-Type: image/jpg’ );
$color="white";
$image="saob.jpg";
$scale="200%";
$size="140×96";
$string="Senseless Acts of Beauty";
passthru("convert -background none -fill ‘$color’ -gravity center" .
" -font AvantGarde-Book -size ‘$size’ caption:’$string’" .
" \\( ‘$image’ -negate -resize ‘$scale’ \\) -swap -2,-1 -composite" .
" jpg:-" );
?>
[/php]

Its almost limitless of what you can do with ImageMagick so, that being said, I plan on making a bunch of short posts just showing examples of ImageMagick usage along with the code on how you can do the same. As always if you have any questions just post a comment. THANKS!!

Optimize: Contact Form 7

One of the top WordPress plug-ins to download is Contact Form 7 (best form plug-in in my opinion). One great thing about this plug-in is that it automatically moves its JavaScript to the footer of your site. But, the JavaScript is still used on every page as well as the style sheets. Now, if your like me you just need these styles and scripts to run on one page, not throughout the entire site. Here is how to fix this.

First things first, make sure you set up Contact Form 7 and its working 100% correctly out of the box before you begin editing its current functionality.

Step 1

Open the main PHP file for the plug-in, in this case its wp-contact-form-7.php located in the plug-in’s root folder. What I usually do is search for any reference to the scripts or styles that I want to move. If you do a search for .js you will come to several lines of code seen in the image below.

As you can see above wp_enqueue_script() is being used to queue the JavaScript into the WordPress loop. The most important part of this function is the name of the script that is being queued, “contact-form-7″. Make note of this.

Step 2

Now one of the most important parts of moving this code around, so we can speed up our page, is to do it without editing any of the original plug-in files. And you ask “WHY?”.

Well, lets say you do all kinds of edits to this plug-in’s php files and you get your page to humm like a top and your all super happy eating ice-cream and smiling. Then the next time you open up your WordPress dashboard you see a warning to update your plug-in because it has a security bug or something, put down the ice-cream, update your plug-in and watch all your awesome work go away…

Yeah sucks doesn’t it?

So, how can you edit what a plug-in does without touching it? MAGIC!! No, just kidding, all you need is your functions.php file in your child theme, or if you don’t have one just create it and add the code below.

[php]
<?php
function my_deregister_javascript() {
if (!is_page(‘contact’)){
wp_deregister_script( ‘contact-form-7′ );
}
}
add_action( ‘wp_print_scripts’, ‘my_deregister_javascript’, 100 );
?>
[/php]

Step 3

Now you can paste that code in your functions.php file and wonder why its not working or you can continue reading. Here is what this function is doing.

function my_deregister_javascript() {

The above line begins your function and names it, you can make it say whatever you want, as long as it is unique, but I like my_deregister_javascript().

if (!is_page('contact')){

This is very important! The above line looks for the pages that ARE NOT! named “contact”. So, if you have Contact Form 7 on a page called “snuffalupagus” then this line should read,

if (!is_page( ‘snuffalupagus’ )){

If you have multiple forms on different pages then it would change to,

if(!is_page(array(‘page1′,’page2′,’page3′)){

wp_deregister_script( 'contact-form-7' );

The above line is the action line. It de-registers the script from the loop, kills it, stops it from running, EXTERMINATE! Sorry, was just watching some Doctor Who….

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

The above last line just ads our new function into the queue at position 100.

Step 4

Check to make sure that the scripts used for Contact Form 7 are no longer in the footer for every page except for the page/pages where your forms are being used, and pick up your ice-cream again.

Step 5

Paste the code below into your functions.php file. This will remove the Contact Form 7 style sheets from the head of all your pages except for the page named “contact”. Essentially, this is the same code as above, and you should adjust accordingly.

[php]
<?php
function remove_contact_style(){
if (!is_page(‘contact’)){
remove_action( ‘wp_head’, ‘wpcf7_wp_head’ );
}
}
add_action(‘wp_head’, ‘remove_contact_style’, 9);
?>
[/php]

Your Done!

Hopefully that wasn’t too hard .

Optimize: WP-Cufon

WP-Cufon is a great plug-in that i use on my site to turn all heading into a no web safe font. The JavaScript used for this plug-in is needed on every page but, using the code below you can remove the JavaScript from the head and put it in the footer where it belongs.

[php]
<?php
function remove_scripts() {
remove_action(‘wp_head’, ‘wpcufon_init’);
add_action(‘wp_footer’, ‘wpcufon_init’, 9);
}
add_action(‘init’, ‘remove_scripts’);
?>
[/php]

That’s all for now, more to come later…

Just add the script below to your functions.php file in your WordPress installation and the queries will appear in the bottom left or your browser as long as your logged in (and only if you logged in).

[php]
<?
php if (is_user_logged_in()) {
?>
<div id="speed-test" style="padding:10px;background:#F66;color:#fff;font-weight:bold; position:fixed;bottom:0;">
<?php echo get_num_queries(); ?> queries in <?php timer_stop(1); ?> seconds.
</div>
<?php } ?>
[/php]

If you like this script or need help installing it please leave a comment.