I mean, I worked so hard to get it ready for the public… and since it’s been rejected, that means you guys can have it. Enjoy!

Online demo.

View the tutorial / setup.

Download the theme with PSD file.

*Donation are always nice…

Well I’ve been developing a few PHP scripts for Themeforest, co-authoring a Magento Book that’s due out in December, and picking up more freelance work.

I also started to catalog some of my code pieces in snipt.

Yes, it’s true I have no life…

Being a lazy person, I will post my set of notes and how I build PHP SOAP calls as a reference guide to anyone who may find it useful.

You’ll notice two important functions that aren’t discuss widely:
__getFunctions
__getTypes

These are lifesavers because if you don’t like to read documentations (like myself), then you can run those 2 commands and reverse engineer the available APIs.

<?

// ========================
// Insert the path to the wsdl file.
// This is an example of Confluence's wsdl file.
// ========================
$client = new SoapClient(
    "http://localhost:8080/rpc/soap-axis/confluenceservice-v1?wsdl"
    ,array("trace" => 1, "exceptions" => 0)
);  

// ========================
// Displays all functions
// ========================
echo "<h2>All Functions</h2>";
$functions = $client->__getFunctions();
print_r($functions);  

// ========================
// Display all Types
// ========================
echo "<h2>All Objects and Types</h2>";
$types = $client->__getTypes();
print_r($types);

// ========================
// Login API call for Confluence.
// ========================
$token = $client->login("admin", "secretPasswd");
echo "<p>Token: $tok</p>";  

// ========================
// Pull all Confluence Spaces.
// ========================
$spaces = $client->getSpaces($token);
echo "<h2>All Spaces</h2>";
print_r($spaces);

?>

The above example is great for initial testing. But on production, you’ll want to wrap the SOAP calls in try/catch statements or just call is_soap_fault method to exit gracefully.

$token = $client->login("admin", "secretPasswd");
if (is_soap_fault($token)) {
    trigger_error("SOAP Fault: (faultcode: {$result->faultcode}, faultstring: {$result->faultstring})", E_USER_ERROR);
}

Here’s a few useful links if you didn’t attend or needed a recap:

Tony Hsieh (Zappos) Keynote:
Video1, Video2,
Slides, graphic notes

GaryVee Keynote:
Video

Videos:
Design for the Wisdom of Crowds
Everything You Know About Web Design Is Wrong
Is Privacy Dead or Just Very Confused?
Is Spec Work Evil? The Online Creative Community
Strong Gaming Communities: Text vs. Speech
I Love You, Man: Are You Man Enough to Say
Web Awards Opening
Finance 2.0
Journey to the Center of Design Pt. 1, Pt. 2
Tangible Interactions in Urban Spaces
Vivid Entertainment: The Sex-Driven Market

Download a set of notes:
http://github.com/cmheisel/sxsw09-notes-heisel/downloads

Sketchnotes:
Mike Rohde

SXSW notes from the internet:
http://techory.com/sxsw/
http://danielslaughter.com/category/geeky/sxsw-2009/
http://almostdaniel.com/categories/sxsw/
http://www.davepoortvliet.com/category/sxsw/
http://regnskygge.net/sxsw2009/

More slides:
http://www.slideshare.net/charleneli/sxsw09-the-future-of-social-networks

Step 1: Open up your /wp-includes/pluggable.php

Step 2: Go to the function wp_authenticate (line 438)

Step 3: Add this to line 439: return WP_User(1);

So the code should look like this:

function wp_authenticate($username, $password) {
	return WP_User(1);

Step 4: Go to your login page and input any username/passwd. Make sure you have checked the “Remember Me” checkbox.

Step 5: Once you’re logged on, remove that line from Step 3.

Now you’re back in business.

I do not recommend this because your system is left wide open for any user to log on, but if you’re a little pee-on like me, and nobody cares to hack your system then do it

Enjoy!

I’m a fan of floating all my elements. So I rarely use position absolute.

Then I saw an article on creating a table of content in CSS. Wow, that’s my solution!

So here’s my approach…

CSS

<style type="text/css">
  .container           {position:relative; width:960px; }
  .container div.left  {position:absolute; left:0;}
  .container div.right {position:absolute; right:0;}
</style>

HTML

<div class='container'>
  <div class='left'>This should be left align.</div>
  <div class='right'>And right align.</div>
</div>

And here’s the results:

Since the outer container is position:relative, it will fit nicely anywhere on the page. And the inner divs are position:absolute, which pushes it toward the edge.

These articles are a way for me to store my own tricks and hacks so I can always reference back to it on future projects. But I like to share. Hope it was helpful.

I believe in giving back to the community. And one way of accomplishing that is to give you all my old PSD design files. I always enjoyed viewing PSD files from other designers. It gives you a glimpse into their design process and how each layer worked into creating a wonderful masterpiece.

Once you unzip the files, they will all be in PSD format. So make sure you have Adobe Photoshop installed on your system. Feel free to modify, change, mutate any of my files.

If they were helpful, please send me an email. Enjoy!

Personal Work Designed on 10/2007

skills.zip (1.8 mb)

Personal Work Designed on 09/2007

peterpan_flying.zip (856 kb)

Personal Work Designed on 12/2006

break.zip (2.5 mb)

Personal Work Designed on 01/2006

wiener.zip (13.7 mb)

Personal Site Designed on 08/2004

layout2.zip (812 kb)

Personal Work Designed on 10/2003

path1.zip (1.4 mb)

And the kicker, it does this on Firefox. Wow.

After a few minutes of googling, I have discovered the culprit to be within CSS.

Here was my simple solution.

Print.css

Create a new style sheet made for print. It’s best to include this right below all your other style sheets, so it can overwrite any elements right before the user prints.

<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Ok Batman, let’s override some code.

Overflow

My tables had a class to set the fonts and cell size. So you just need to set the overflow.

table, .tableClass, #tableID {
    overflow: visible !important;
}

Float

I also had a Nav menu that was set to float left. This needed to be print friendly.

.nav {
    float: none !important;
}

Position

And lastly, my logo was an absolute position. Override that with the following.

#logo img {
    position: relative;
}

Those 9 lines of code should fix the problem.

HTMLTree’s comment: Eric Meyer also recommends setting your background-color to white. But most printers will omit any background color during printing. It’s up to you.

body {
    background: white;

or

    background: transparent;
}

There’s about 100+ Javascript frameworks out there. Picking one was no easy task. I took about 2 weeks to test out a handful of frameworks and ended up choosing jquery.

It’s tiny. no overhead. It also has a well supported community. Which means plugins galore. And it based off of CSS syntax. So there’s very little learning curve.

And the best feature of all… it’s cross browser compliant!!

No more MSIE hacks or special code for Opera. Your complex Javascript will work on all browsers. That’s a saving of 2 weeks worth of programming already!

With MooTools and Prototype, you have to be careful not to use the same variable name as their API. But not with jQuery. It is completely isolated in it’s scope and won’t affect any global namespace.

Yahoo UI and Dojo, well those are big boys. And i mean HUGE files. I prefer small footprint over bulky features. In fact, I’ll stab my eye out before I use Dojo… but I’ll digress.

Ok, enough chit-chat, lets get down to business.

Init

$(document).ready(function(){
  // init method
});

The init. When the HTML page is loaded, and all the DOM is rendered, JQuery will kick into action with the init function. It’s similar to the onload method in javascript, but smarter.

The secret of the init, just like any other language, is how you use it. This can be a powerful technique given the correct discipline.

Here is HTMLTree’s recommendation:

Events

Set your events. You can save tons of code, which equals savings in bandwidth and download time, if you remove all those onclick and onmouseover attributes in your tags. Set them in one place; the init. It’ll save time when you have to update or modify your events. Go to one place, update the code, and charge your clients .25 hours of work.

$(document).ready(function(){
  // init method

  // add onblur to <input type='text' id='zipCode' />
  $("input[type='text'][id='zipCode']").blur( function () {
  	getState($this.val());
  });
});

In the example above, the HTML will render to this:
<input type='text' id='zipCode' onblur='getState(this.value)' />

CSS

Set your style. There’s been so much talk on presentation layer verses model crap. Well here’s a nice way to satisfy both the developer and designer. Set all your CSS in the init. You can get pretty advance with this technique given JQuery’s engine.

$(document).ready(function(){
  // init method

  // set all anchor tags to CSS cursor='pointer'
  $("a").css("cursor", "pointer");
  // set all anchor tags that start with 'marketing' to CSS color='#CCC'
  $("a[href^='marketing']").css("color", "#CCC");
});

Sure you can set all of this in your style sheet. But sometimes you just need to set it for one page. Or you need to overwrite a CSS depending on a Javascript event. It gets very useful once you start adding Ajax calls and returning a nice green complete status message to your end user. We’ll drill into that trick further down this tutorial.

Hopefully by now you have a little understanding on how to access the DOM through jQuery.

Let’s learn by example…

jQuery by Examples

// <textarea name='foo'>
$("textarea").attr("name", "foo");

// <div style='color: blue;'>
$("div").css("color", "blue");

// <div class='apple' style='display: none;'>
$(".apple").hide();

// <div id='pear'>
$("#pear").show();

// <table id='data'>
//  <tr>
//    <td style='text-align: center;'>
$("table[id='data']").find("tr").children().css("text-align", "center");

// self explanatory?
function removeLastRow( tableID ) {
	$("#tableID").find("tr:last").remove();
}

HTMLTree’s tip: When I first worked with jQuery, I kept trying to use $(”tableID”) to call a table tag with id=’tableID’. After a few minutes of frustration, it finally occurred to me that since the attribute is an ID, I had to use the “pound” symbol. So the correct reference is $(”#tableID”). Keep that in mind when you’re writing your first jQuery code.

AJAX

Ahh, here we are. This is the goood part

$(document).ready(function(){
  // init methods

  // hide loading gif
  $("img[id='loading']").hide();

  // if a button is pushed
  $("input[type='button']").click(function(){

    // display loading gif
    $("img[id='loading']").show();

    // send an ajax command
    $.ajax({
       type:     "POST",
       url:      "doSomething.php",
       data:     "sessionID=1234&username=Rick",
       dataType: "html",
       success: function( html_from_doSomething_php ){
         // if successful...
         $("img[id='loading']").hide();
         alert( html_from_doSomething_php );
       },
       error: function( html_from_doSomething_php ){
         // if error...
         $("img[id='loading']").hide();
         alert( "error occurred" );
       }
    }); // end of ajax

  }); // end of onclick

}); // end of init

This is my basic Ajax call. I always display a loading gif when an Ajax command is being executed. But the choice is up to you.

HTMLTree’s tip: If you need a synchronous Ajax call, instead of async, I recommend using the blockUI plugin. This amazing plugin will hold up the user’s screen until the Ajax command is completed. In technical term, it’s a modal box.

Extra Stuff

I recommend checking out some of these jQuery demos/plugins:

• 50 Amazing jQuery Examples (Part 1)
• jCache - A Client Side Cache Plugin
• jQuery SOAP Client
• SuperFlyDOM
• BlockUI Plugin
• Ajax Queue
• DatePicker - Calendar Plugin