DevPatch

Symptoms That Something Is Seriously Wrong at a Startup

2011-08-22T09:42:00-07:00

For most of my professional career, from 1999-2007 I worked at large corporations (Conde Nast, John Wiley & Sons) and had almost no experience with either startups or small companies. There are huge differences in these work environments and for me, the most troubling was not knowing which problems were normal and which were signs of systemic problems that could kill the company.

While working at one small startup I reached out to a VC friend with the following question:

I realize that financial problems go hand in hand with a startup, but what are the symptoms that something is seriously wrong?

And his response:

Running low on cash with no prospects of funding is definitely a bad sign. Also lack of customer traction, no revenues and executive team turnover. If I had to name the "top three" this would be it.

Having worked at two startups, including one in Iceland during the financial collapse (kreppa) I would agree with his statement. I would add that these are not necessarily fatal but do signal that something is seriously wrong with the business. If the CEO/founder is aware of these issues and proceeds along the same path, you could be looking at a failed business.

The above quote also demonstrates the importance of having mentors/advisors outside of your startup bubble. Once you take the leap to start/work at a new company you often find yourself both hearing what you want to hear and surrounding yourself with people that tell you what you want to hear. A healthy dose of skepticism from an outside source (outside of the board of directors) is invaluable.

Octopress . . .Some Thoughts

2011-08-15T00:00:00-07:00

I recently switched my blog from Wordpress to Octopress. Below are some thoughts/points I collected during this process.

Summary

I generally like Octopress, and for me there are big advantages to using a static site generator over Wordpress (better security, no mysql, faster). However there are some issues (mostly minor) that came about as I began to really use it.

The Technology Stack

Octopress is a "framework" in the sense that it combines various technologies into a static site generator. On the plus side, you can leverage lots of interesting tools. On the bad side, if you are not already familiar with these tools you will have a lot to learn.

You could just use the stock design and feature set, but I think the most common use of this product will to be to customize the HTML/CSS/JS and stick with the Jekyll page generation framework.

That being said, to create a custom theme you will need to understand the CSS/JS/HTML (unless you start from scratch) along with the SASS & COMPASS technologies.

If you run into any bugs or display issues there are a lot of layers you may need to pull back. The below list is what I consider the significant technologies in use. If there is a display error (for example an IE8 bug I found) you may need to go through a lot of layers in the stack before finding the cause.

Source Control, Configuration, Preview, Build, and Deploy

Git
Ruby
RVM
Rake
Jekyll

Theming (CSS)

SASS
COMPASS-style

Theming (JS)

Modernizer.js (including plugins like respond.js, yepnope.js)
ender.js

Theming (Templates & Posts/Pages)

HTML5
YAML
Markdown

Keeping Updated

Updating Octopress from github is not as smooth as it can/should be. My workflo has been to update into a branch and confirm I have a good read on everything before doing a merge.

This should be improved/less risky in future versions and I already see some tweaks being pushed to github. However it pays to be careful.

Conclusion

Octopress is pretty cool and if you have the time to tinker it can be a lot of fun. I would just re-iterate that it's still relatively young and is a work-in-progress.

Setting up PhpStorm 2 with XDebug and MAMP

2011-02-23T00:00:00-08:00

Getting XDebug setup and working with PhpStorm 2 is relatively painless but I thought I would add some hints I found when setting this up. These instructions assume you are debugging a web based application using MAMP as your server environment.

Turn on Xdebug For MAMP

Luckily, the version of MAMP that I have, (and presumably yours too) comes with xdebug so no need to download anything. You can confirm you have everything by making sure you have the xdebug.so file in your php extensions folder (assuming you are using php 5.3).

MAMP/bin/php5.3/lib/php/extensions/no-debug-non-zts-20090626/xdebug.so

After confirming the above, the next step is to edit the php.ini file and enable this extension. At the bottom of your php.ini file you should already have an item under xdebug with the correct path. Uncomment this line and add an additional option to enable remote debugging. Note, in the below example I removed the full path to the extension, you should have the full path in your ini file.

config.ini

[xdebug]
zend_extension="path/to/xdebug.so"
xdebug.remote_enable=true

After editing, save the .ini file and restart apache. You can confirm xdebug is enabled by looking at the output of phpinfo and checking that an xdebug line appears in the credits... as seen in this screenshot.

Add Browser Shortcuts

We now need to add some "triggers" for starting and stopping debugging. Jetbrains supplies an easy way to do this via bookmarklets. You can generate these by going to http://www.jetbrains.com/phpstorm/marklets/ and click generate under the XDebug column, drag these to your bookmarks bar in your favorite browser.

Setup PHPStorm

The latest PHPstorm (version 2) makes this so easy! Simply go to your PHP project and click the "Start Listening PHP Debug Connections" button in the toolbar.

For testing, just add a breakpoint on a file that you can invoke with a web-browser. You can set a breakpoint by clicking in the gutter.

Trigger the Debugger

Go back to your browser and load your app in a manner that will trigger the breakpoint. Click the bookmarklet for xDebug start session and refresh. You should see a response in phpstorm, confirming that it is able to listen to XDebug requests.

You are all done!

Useful Links

The post from jetbrains going into more detail on using their debugger: http://blogs.jetbrains.com/webide/2011/02/zero-configuration-debugging-with-xdebug-and-phpstorm-2-0/

An outdated video on remote debugging with PHPStorm, there are some good tid-bits at the end concerning code inspection:

http://blogs.jetbrains.com/webide/2010/08/remote-debugging-in-phpstorm/

A Full Page Width Scroller For jQueryUI - wideScroller

2010-11-22T00:00:00-08:00

I needed a full page width image scroller that supported "infinite scrolling" and could handle being positioned, where the 1st image is aligned to something on the page. Poking around I found most jQuery scrollers made use of scrollTo and would not work when the window was the container. So I coded my own as a jQueryUI widget, this widget can be used with any HTML content.

Requirements

To use wideScroller you need the following:

jquery.ui.dpui.wideScroller.js - the wide scroller widget
jquery-1.5
jquery-ui-1.8.4 - requires widget factory, can include effect if you want fancy easing
jquery.ba-throttle-debounce - used to throttle the window resize event

You must use jquery-1.4.2 because of a bug that was introduced in jQuery 1.4.3 and is not currently resolved. This bug will only affect you if the total width of your scrollable elements is greater than 10000px. Once this bug is resolved you should be able to update to the latest jQuery without changing any code.

Download Code

Grab the source & examples from github.

Vew Demo

This demo shows the basic functionality - take a look before reading further as it will help explain things. Note how the "active" image is aligned with the "locator" div and how things work correctly if you resize the page.

The HTML Template

foo.html

<span class="ws-currentItem"></span> of
<span class="ws-totalItems"></span>

<div>
    <a href="#" class="prev"> < </a>
    <a href="#" class="next"> > </a>
</div>

<div id="scroller">

    <div id="scroller-spinner"></div>

    <div id="scroller-container">

        <div class="dpui-ws-item dpui-ws-active">
            <img src="images/image1.png"  width="940" height="400" />
        </div>

        <div class="dpui-ws-item">
            <img src="images/image2.png"  width="940" height="400" />
        </div>

        <div class="dpui-ws-item">
            <img src="images/tom.jpg"  width="371" height="400" />
        </div>

        <div class="dpui-ws-item">
            <img src="images/image4.png"  width="250" height="400" />
        </div>

        <div class="dpui-ws-item">
            <img src="images/image5.png"  width="250" height="400" />
        </div>

        <div class="dpui-ws-item">
            <img src="images/image6.png"  width="940" height="400" />
        </div>

    </div>
</div>

Each scrollable item requires the class dpui-ws-item and the active item requires the class dpui-ws-active. Most of the other classes can be specified in the options (see below). The HTML and CSS from github is thoroughly commented.

The CSS

The opacity is just for the demo, you can use any styling you like. , For the locator, in this example its a fixed width centered div, this would likely be your top nav or something similar.

foo.css

body {
    padding:0;
    margin:0;
}


#scroller {
    overflow:hidden;
    position:relative;
    width:100%;
    height:525px;
}

#scroller-container {
    margin:8px 0 35px 0;
    height:480px;
    position:absolute;
    top:0px;
    left:0px;
    width:100000px;
}

.dpui-ws-item {
    position:absolute;
    padding:0 8px 0 0;
    opacity:.5;
}

.dpui-ws-active {
    opacity:1 !important;
}

#locator {
    width:980px;
    margin:0 auto 0 auto;
}

#scroller-spinner {
    position:absolute;
    width:100%;
    height:100%;
    background:#f5f5f5 url(images/spinner.gif) center center no-repeat;
    top:0px;
    left:0px;
    z-index:5;
}

The JavaScript

foo.js

$(function() {
    $("#scroller").wideScroller();
});

Options

wideScroller provides the following options:

offsetLocatorID	required: yes default value: #locator identifies the locator, where the content will be aligned
containerID	required: yes default value: #scroller-container the container of the scrollable elements, must be different from the element the widget is invoked upon
loaderID	required: yes default value: #scroller-spinner hides the scrollable items while we re-shuffle them, see examples
nextButtonClass	required: yes default value: .next the class of the next button/link
prevButtonClass	required: yes default value: .prev the class of the prev button/link
showItemNumbers	required: no default value: true set to true if you want to display 1 of XX
currentItemDisplayClass	required: no unless showItemNumbers is true default value: .ws-currentItem if showItemNumbers is true class of current item display
totalItemDisplayClass	required: no unless showItemNumbers is true default value: .ws-totalItems if showItemNumbers is true class of total items display
goToItem	required: no default value: null used if you want to set an image other than the first as the inital image (see specify-start.html example)
easing	required: yes default value: linear the easing effect for the scroll, can use jqueryUI easing if you are including.
speed	required: yes default value: 300 the speed of the scrolling, because you might be animating a large number of large images, you may need to adjust this to cut down on "tearing"

Events

The following events have callbacks that you can hook into:

startScroll	scrolling has started
stopScroll	scrolling has stopped
nextButtonClick	next button clicked
previousButtonClick	previous button clicked
resize	window resize, (likely to be invoked numerous times)

You can hook into a callback when the widget is instantiated or after instantiation using the standard jQuery UI Widget Interface:

foo.js

//During Instantiation
$("#scroller").wideScroller({
    startScroll: function() {
        $(".foo").hide();
    },
    stopScroll: function() {
        $(".foo").show();
    }
});

//After Instantiation Using Jquery UI Widget
("#scroller").wideScroller("option", "startScroll", function(){
    $(".foo").hide();
});

Performance

If you are sliding a large number of images or if the images have very large dimensions you may notice some "tearing" in certain browsers. You can tweak both the easing and speed to find what fits best for your use-case. I have found that a faster speed (smaller in ms) makes the animation look smoother. If you are able to use > jquery.1.4.3 you can also play with jQuery.fx.interval.

How It Works

Some details on how the widget works, not required reading but might be useful if something is not working as expected. Note that in the illustrative images the grey area is the visible browser window.

Default State Before Widget Before the widget loads, the page looks something like this (depending on browser). The "first" image is flush with the browser window and the rest of the images extend to the right. This initial state is not very important as the widget will move everything around.

Widget Is Loaded When the widget loads, it aligns the active image to the location of a user defined ID. It then re-orders the images... when it reaches one that is beyond the right edge of the window it appends those images before the active image in reverse order.

Moving Forward Advancing through the images, all images are scrolled (using animate) the width of the next image... the next image aligns to the same location. Prior to animating we clone the first image image from the left to the right. The image is cloned so the scrolling appears smooth if the image is visible on the left and will be visible on the right during the animation (so image 4 would be visible going off the left edge and appearing to come in from the right edge). The cloned image is kept but the original is removed. Similar steps occur when moving backward.

Final Thoughts

If you have any comments or questions, please feel free to contact me or just use the below comment form.

IDEs For Front End Development & PHP

2010-10-19T00:00:00-07:00

I make my living as a front-end developer and spend the majority of my time in an IDE. So the IDE for me, is an incredibly important piece of software. I've played with and purchased a bunch of em' and what follows are my personal thoughts on each. I hope this might save you some time/money when deciding which IDE to invest in.

Some of these IDEs I used for years, others for only a short time. All were used on a minimum of one real project from creation to launch. If you are interested in a spreadsheet type feature list, head on over to Wikipedia's http://en.wikipedia.org/wiki/Comparison_of_integrated_development_environments. If you don't want to read the pros/cons of each just skip to the conclusion.

Requirements

OS X is my primary OS so all the IDE's are available for that platform. Some are also available on Linux or Windows but not all. My top priorities for IDEs in no particular order are:

Support For Various Version Control Systems (GIT and SVN minimum)
Syntax coloring/validation/code completion for the following
1. HTML
2. CSS
3. Javascript
4. PHP
Support code completion for JS and PHP frameworks (jQuery/YUI and Zend Framework on the PHP side)

Contenders

The IDE's I Evaluated:

Coda
TextMate
Aptana 2
PhpStorm

Coda

URL: http://www.panic.com/coda/ Cost: $99 Pros: I used this editor for many years, writing everything from basic HTML/CSS to full apps using Drupal and Zend Framework. Overall the interface is great and very intuitive. The file browser is wonderful, better than all the other IDE's tested, you can easily duplicate and otherwise mess around with your file structure without leaving the IDE (I use duplicate file a lot). For some reason a lot of IDE's have a crappy file interface.

SVN integration is implemented fairly well but Coda does not come with a file compare tool, so to use that you need the OSX developer tools, once installed works great.

The editor for HTMl/CSS/JavaScript is basic and works.

Cons: Coda is a basic editor and lacks a lot of the features you need on a more complex project. Code completion works for standard HTML/CSS but is way too basic for Javascript. I could not get code completion to work with any external libraries, either jQuery or Zend Framework. This might be possible through hacks etc but it was not supported natively.

Coda (as of writing) only supports SVN, so GIT is not an option (at least not natively).

There are other features that Coda has that I never used, like sharing and the code hints. The code navigator (structure) is also too basic to be useful.

Recommendation: I used Coda for many years as my primary IDE, however as the projects I worked on became more complex I felt Coda was actually holding back my development. It was Coda's lack of GIT integration and "real" PHP code completion that prompted me to start looking at other IDE's.

Overall Coda is great for basic HTML/CSS and I still use it for this purpose. However on a project with non-trivial Javascript or any PHP I would look elsewhere.

Textmate

URL: http://macromates.com/ Cost: $56 Pros: Textmate is incredibly customizable, and if you like color themes, there are a ton out there. Textmate relies heavily on bundles to add functionality. So if you need any additional version control systems and/or language support that is not native, you grab a bundle and off you go. Basic code completion worked relatively well however you mile may vary depending on what frameworks/external libraries you use. jQuery was a bit funky, that might have been due to the bundle I used and I never got Zend Framework code completion to work.

Cons: As I mentioned before I never got the Textmate code completion really working with jQuery or Zend Framework, this might have been my failing but honestly this stuff should be easy.

GIT integration worked via a bundle (not sure which one I used) but the interface was klunky, I still had to use the terminal.

Customization and key commands are great but not intuitive and there is a steep learning curve.

Recommendation: Whenever I go to a Javascript meetup or watch a front-end presentation online, tons of people use Textmate and that's why I first tried it. However in my experience it was not a very good IDE. Textmate explicitly states that it is not an IDE "TextMate is not an IDE but by using its powerful snippets, macros, and unique scoping system, it can often provide features that even a language specific IDE lacks."

That being said, I got frustrated trying to get everything working.. things I expected to run out of the box like GIT, did not.. and when they were installed things did not feel integrated. If you have the time, textmate can be a pretty powerful tool but for me, it was too klunky and too much of a pain to get setup the way I wanted it.

Aptana 2

URL: http://www.aptana.com/ Cost: Free

Pros: It's Eclipse.

Cons: It's Eclipse.

Recommendation: I really tried to love Aptana. Aptana was the first IDE that I got Zend Framework code completion working. Then I upgraded to a new version, everything went to pot, and I abandoned Aptana after that.

Aptana at it's core is Eclipse with a bunch of Aptana developed tools added on. These add support for HTML/CSS/JS code assist, JS debugging, FTP/SFTP deploying etc. All these things work, but they do not feel integrated... Aptana always feels like a java ide with some front end stuff added on ... because that's exactly what it is.

A good example are the options that eclipse has (colors, editor settings etc) there are about a million of these.. and as a front end developer you only need some of them. Lot's of Eclipse baggage.

PHP support is provided by PDT, Aptana used to bundle their own PHP plugin but this was removed in Aptana 2 and might be added back in Aptana 3. In either case the PHP code support was OK but it's buggy.

To me Aptana is way too much and way too much that has nothing to do with front end web development. Things might change in Aptana 3 but for now this is not an IDE I would recommend.

PhpStorm

URL: http://www.jetbrains.com/phpstorm/ Cost: $99 or $49 if promo is running Pros: Great support for code completion, things tend to work out of the box. If you have jQuery or Zend in your project or path, PHP storm just finds it.. and indexes it. Code completion even works with file paths and with image sizes. So after inserting an image you can use code completion to fill out the width and height. Whoah an IDE that actually makes web development easier, very nice!!

PHP support in my experience was flawless (used on both a Wordpress project and a Zend Framework project).

Version control is tightly integrated, GIT integration is well done. Never had to use the console.

Lots of "helpers" specifically for front end devs, great CSS editor.

Cons: PHPstorm is a java app so it will run in windows/linux/osx. On OS X it runs fine except it's memory usage tends to increase hour by hour, eventually I restart it... especially if I have photoshop or another memory heavy app open.

The file manager is less than ideal, I often use "reveal in finder" and do copying and other file operations outside of the IDE.

The project creation process has a small learning curve, not very intuitive but also not a deal breaker. One thing I do not like, there is no master list of projects you have created, there is a list of recent projects... but I am not sure if this lists everything.

Recommendation: Best front-end IDE out there and probably the best PHP IDE. Actually feels like they used Front End Web Development use cases when adding features.

Conclusion

Both Phpstorm and Coda feel like they were created specifically to make the lives of front end developers easier, and it shows. PhpStorm is the stronger IDE of the two, and I highly recommend it. It has a lot of features that make your life easier, everything feels integrated and nothing is overwhelming. So for HTML/CSS/Javascript/PHP I would (and do) use PhpStorm.

Please do share your opinions in the comments and if you have any other IDE suggestions please let me know.

Should You Extend or Wrap jQuery UI 1.8 Widgets

2010-05-21T00:00:00-07:00

As part of a recent project I was tasked with creating a set of custom jQuery UI widgets. When specing my widgets I discovered almost all would use some existing widget features, like sortable. I found myself trying to decide if I should extend existing widgets or somehow wrap the existing widgets with my custom code? I think this is a common question.

The jQuery UI widget factory provides a method to inherit one and only one widget. For example If you look at some of the jquery ui widget source code (draggable, droppable, sortable) you will notice that most inherit mouse. However when writing my own widgets I found that I never needed to do any of the things inheritance was intended for, such as overriding methods.

For me, I just needed some of the default widget behaviors (like sortable) applied to my own custom code. I decided to wrap the existing widget behavior rather than extend.

So how does this work? Let's take the example of a page selector.

My hypothetical page selector widget needs to do the following:

User can click to select a page
User can reorder pages
Selecting or Reordering triggers an ajax save
I want to append the draggabe handle in the JS

As you can see there is a mix of behavior, the reordering is boiler plate sortable, but appending the draggable handle and other features are all custom.

A quick visual:

So for this widget I want to use sortable to handle the sorting, but everything else will be custom code.

Here is the base/empty code for our widget:

base.js

$(function(){
    $.widget("ui.pageSelector", {
        options: {

        },

        _create : function() {

       },

        _destroy : function() {

       }

     });
});

Options

Our first challenge are the options. We have two sets of options, the options for sortable and the options for pageSelector (our custom widget). You can handle options as either one object or two.

One Object

jquery.ui.pageSelector.js

$.widget("ui.pageSelector", {
    options: {
        customName : "customValue",
        items: '.sort-item',
        handle:'.sort-handle',
        containment: '.page-slider-container',
        placeholder: 'sort-item-placeholder ui-state-highlight',
        forcePlaceholderSize: true,
        opacity:'0.6',
        revert:'100',
        delay:'100'
    },

In the above example options for the wrapped widget and the custom widget are all together (customName is for the pageSelector widget). I think there are significant problems with this approach, for example when we instantiate sortable we pass it options it does not need, and I can imagine name conflicts (if you are not careful).

Two Objects

jquery.ui.pageSelector.js

$.widget("ui.pageSelector", {
    options: {
        customName : "customValue",
        sortableOptions: {
            items: '.sort-item',
            handle:'.sort-handle',
            containment: '.page-slider-container',
            placeholder: 'sort-item-placeholder ui-state-highlight',
            forcePlaceholderSize: true,
            opacity:'0.6',
            revert:'100',
            delay:'100'
        }
    },

I like the second approach better as we can handle the sortable options separately. Later when we invoke sortable we can pass just the options it needs.

Instantiating The Wrapped Widget

In the _create method we can now instantiate the sortable, passing in the sortableOptions object:

jquery.ui.pageSelector.js

_create : function() {
    var self = this, o = this.options, e = this.element;

    e.sortable(o.sortableOptions);

Hooking Into The Wrapped Widget

Now that our widget is instantiated we can start adding the widget specific behavior. In this example we want to trigger a save on the wrapped sortable's event sortupdate. To do this we can bind that event in our _create method:

jquery.ui.pageSelector.js

_create : function() {
    var self = this, o = this.options, e = this.element;

    e.sortable(o.sortableOptions);

    e.bind("sortupdate",function(event,ui){
        self._saveSortOrder();
    })

You can also invoke methods on your sortable using this syntax:

foo.js

e.sortable('serialize');

The above approach has worked really well for me and I was able to create custom widgets that encapsulated the behavior I needed.

Option Based Function Callbacks

Semi-related: I discovered that some "widgets" that you might want to wrap (say non jQuery UI like tinyMCE) allow callback functions to be defined as an option. This can cause problems if you want to invoke a function from within your widget.

For example

jquery.ui.pageSelector.js

$.widget("ui.pageSelector", {
    options: {
        customName : "customValue",
        someFooOptions: {
            save_callback : function () {
             //I want to do something here!
            },
        }
    },

In the above example I want the save behavior to be handled by my custom widget, but the code I am wrapping only provides a callback method. You can't invoke widget methods from the options since there is no scope.

My solution was to use a trigger bound to this widgets instance:

jquery.ui.pageSelector.js

$.widget("ui.pageSelector", {
    options: {
        customName : "customValue",
        someFooOptions: {
            save_callback : function (id) {
                // Trigger Custom Event
                $(id).trigger("my:customSaveEvent");
            },
        }
    },

. . .
   _create : function() {
        var self = this, o = this.options, e = this.element;

        $(e).bind("my:customSaveEvent", function(){
           //do stuff
        }),

In this example I trigger the "my:customSaveEvent" in the callback. This event is bound to behavior in my widget. For this to work you just need to somehow get the id of the widget passed in (or some other identifier). You want to be careful not to trigger the event on the entire document as you may have multiple widgets instantiated.

Communication Between jQuery UI Widgets

2010-03-22T00:00:00-07:00

When writing user interfaces using jQuery I often need widgets to interact with each other. For example, an ajax status widget that displays a spinner when an ajax call starts, and displays a status message when the ajax call completes. This widget should be accessible by whatever other widgets are on the page.

In the past I directly called methods from each widget, but this creates a lot of "glue code" and dependencies. I had recently watched this YUI Theatre video on Scalable Javascript Application Architecture and wanted to apply the following to my jQuery UI Widgets:

Widgets should be able to live on their own
Keep everything loosely coupled

Approach

Given the above I decided to use jQuery's custom events to enable publish/speak and subscribe/listen into my widgets. Each widget would publish certain events and subscribe to others. This approach effectively decouples the widgets and allows them to function independently.

The two key jQuery methods:

bind - Bind will perform the "listen" or "subscribe"
trigger - Trigger will perform the "speak" or "publish"

Example Code Subscribe/Listen

Note I am using jQuery 1.4.2 & jQuery UI 1.8rc3.

The following is a bare bones widget and has most of the code removed so it can serve as an example. This widget has two bound custom events dpui:ajaxStart & dpui:ajaxEnd (DPUI is just my namespace for events "DevPatch UI"). Whenever the custom events are triggered the widget will output text to a firebug console.

UPDATED March 22, 2010 I updated my custom event format to namespace:eventName.

UPDATED July 20, 2011 Removed unnecessary jquery.

jquery.ui.ajazStatus.js

$(function(){
    $.widget("ui.ajaxStatus", {
        options: {

        },
        _create : function() {
            var self = this;

            self.element.addClass("dpui-widget")

            self.element.bind("dpui:ajaxStart", function(e) {
                console.log("ajax start");
            });

            self.element.bind("dpui:ajaxEnd", function(e) {
                console.log("ajax end");
            });
        },
        destroy: function(){
            $.Widget.prototype.destroy.apply(this, arguments);
        },
    });
});

Example Code Speak/Publish

Below is the code that would be in another widget.

foo.js

$(".dpui-widget").trigger("dpui:ajaxStart");

The class .dpui-widget is my namespace class that is applied to every UI widget with speak/listen. If you wanted to do this globally you could use:

foo.js

$(document).trigger("dpui:ajaxStart");

Important to note here that I am not calling dpui:ajaxStart on the ajax widget, instead I am triggering this event on a sub-set of document objects. Any document objects that are subscribed to this custom event will have their action triggered.

Conclusion

I think the above approach solves many of my problems, but I can imagine some issues, especially on larger projects.

If you have additional thoughts or suggestions for a different approach please leave a comment.

The following two blog posts were very helpful and are a good intro to jQuery widgets and event pooling.

http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/

http://www.michaelhamrah.com/blog/2009/12/organizing-javascript-for-event-pooling-with-jquery/

Deploying Zend Framework With Apache ANT

2010-03-03T00:00:00-08:00

I recently wrote a quick ANT script to deploy a personal Zend Framework project and thought I would share the code. If you are just getting started with Agile development, ANT builds/deployments are a great first step with immediate benefits. The following example is bare-bones, it does not run tests or do anything complicated but it should give you something that works and can be built upon.

For more ANT goodness check out my other posts: Deploying Drupal with ANT, CSS Cache Busting & Drupal, Using YUI Compressor with ANT.

Methodology

For my project I need ANT to do the following:

Checkout From Subversion HEAD Or A Specific Revision Of The Project
Remove Files That Should Not Go To Production (Documentation)
Configure Zend For The Correct Environment
Securely Transfer Code To Production Server

I think this is a very common use-case so... onto the code!

Pre-Reqs

Apache ANT
SnvAnt - Provides Subversion Interface To ANT
JSCH Jars - Provides SCP To ANT

I am using Zend 1.10. In this example the only Zend dependency is using Zend_Application with production/development sections in your application.ini file.

Setup Zend

Setting up Zend is the easy part. We need a folder within our project to hold two files:

build.xml - the file that contains all the ant tasks
build.properties.prod - the file that contains the properities required by build.xml

We also need a .htaccess file that will be used in production. The important part of this file is APPLICATION_ENV, this value is used by Zend to determine what environment it is in and what settings to use from your application.ini file.

Simply copy the .htaccess file that is already there, and rename to htaccess.prod. Edit the file and change SetEnv APPLICATION_ENV development to SetEnv APPLICATION_ENV production.

The below screenshot shows how I have set things up. Orange arrows are the important parts.

build.properties.prod

Below is my example properties file. Included are settings for:

Locations of Subversion Jar Files
Subversion Login Information
Temp File Locations
Path To Comment File
Production Server Information (user/pwd are entered a runtime)

The path to the comment file is where we will instruct ANT to insert the version information and timestamp. This allows us to "view source" on the production site and see the revision information and date/time of last build.

You need to customize all values for your own environment, the comments within the file should help explain what you need to do.

build.properties

# -----------------------------------------------------------------------------
# build.properties
# This file is referenced by the  build.xml file.
# -----------------------------------------------------------------------------

# -----------------------------------------------------------------------------
# External jars needed for Subversion
# Example:
# lib.dir=/usr/local/ant/lib
# svnant.jar=${lib.dir}/svnant.jar
# svnClientAdapter.jar=${lib.dir}/svnClientAdapter.jar
# svnjavahl.jar=${lib.dir}/svnjavahl.jar
# -----------------------------------------------------------------------------

lib.dir=/usr/share/ant/lib
svnant.jar=${lib.dir}/svnant.jar
svnClientAdapter.jar=${lib.dir}/svnClientAdapter.jar
svnjavahl.jar=${lib.dir}/svnjavahl.jar

# -----------------------------------------------------------------------------
# Subversion Login and URL
# Example:
# svnant.repository.user=username
# svnant.repository.passwd=password
# svnant.project.url=svn://XXX.XXX.XX.XX/path/to/project
# -----------------------------------------------------------------------------

svnant.repository.user=username
svnant.repository.passwd=password
svnant.project.url=svn://path.to.your.repo.project/trunk

# -----------------------------------------------------------------------------
# Build Folder Locations
# Example:
# temp.dir=temp
# build.dir=release
# -----------------------------------------------------------------------------

temp.dir=/temp/scratch
build.dir=/temp/release

# -----------------------------------------------------------------------------
# Comment File Location, Where we output revision information requires tokens
# in file: @build-revision@
# -----------------------------------------------------------------------------

comment.file.path=/your-app/views/scripts/common/footer.phtml

# -----------------------------------------------------------------------------
# Deploy Location and Login
# Example:
# deploy.server=sugababes.com
# deploy.path=/path/to/directory
#
# -----------------------------------------------------------------------------

deploy.server=productionserver.com
deploy.path=/full/path
<

build.xml

Contained within the build XML file are all the tasks used by ANT. First the tasks we will actually run:

build-release : checksout and builds release (good for testing without sending to production)
deploy-release : deploys release and expands on target server
build-deploy : a short cut that builds and releases to production in one step (most commonly used)

The above relies on the following ANT tasks to do the actual work:

clean : clean up from any previous builds
checkout : checkout project from subversion
cleanRelease : removes folders that should not be deployed (documentation, the build folder)
populate : copy and rename the correct htaccess file, remove old one
revision : find token in file, replace with revision number and date/time stamp
zip release : compress file
deploy : use scp to transfer zip file
extractConfigure : delete existing files on target server, extract zip file on target server.

build.xml

<?xml version="1.0"?>
<project name="DevPatch Client App" basedir="." default="usage">

<description>
    Build File For DevPatch Client Zend Deployment - checkout from subversion,
    cleans release, creates zip file and scp file to the correct environment.
</description>    
    
<property file="build.properties.${env}" />
    
<!-- ===================================================== -->
<!-- Subversion                                            -->
<!-- ===================================================== -->     
    <path id="project.classpath">
        <pathelement location="${svnjavahl.jar}" />
        <pathelement location="${svnant.jar}" />
        <pathelement location="${svnClientAdapter.jar}" />
    </path>

    <typedef resource="org/tigris/subversion/svnant/svnantlib.xml"
        classpathref="project.classpath"  />

    <target name="checkout">
        <svn username="${svnant.repository.user}"
             password="${svnant.repository.passwd}">

            <checkout url="${svnant.project.url}"
             revision="${revision}"
             destPath="${temp.dir}" />
        </svn>
    </target>
    
<!-- ===================================================== -->
<!-- Utility & Clean Up                                    -->
<!-- ===================================================== -->         
   <target name="clean">
      <delete dir="${temp.dir}"/>
   </target>  

   <target name="cleanRelease">
      <delete dir="${temp.dir}/build" />
      <delete dir="${temp.dir}/db" />    
      <delete dir="${temp.dir}/docs" />      
   </target>

<!-- ===================================================== -->
<!-- Replace Token In Footer With Revision Number          -->
<!-- ===================================================== -->     
   <target name="revision">
      <svn>
         <status path="${temp.dir}" revisionProperty="Revision" />
      </svn>
      <tstamp/>
      <replace file="${temp.dir}${comment.file.path}"
               token="@build-revision@"
               value="Revision: ${Revision}, Built On: ${DSTAMP} : ${TSTAMP}"/>
   </target>
    
<!-- ===================================================== -->
<!-- Copy/rename correct htaccess file. Remove existing    -->
<!-- file                                                  -->
<!-- ===================================================== -->     
    <target name="populate">
        <delete file="${temp.dir}/public/clients-admin/.htaccess"/>
        <copy file="${temp.dir}/public/clients-admin/htaccess.${env}"
            tofile="${temp.dir}/public/clients-admin/.htaccess"/>   
        <delete file="${temp.dir}/public/clients-admin/htaccess.${env}"/>
   </target>

<!-- ===================================================== -->
<!-- zip release                                           -->
<!-- ===================================================== -->         
    <target name="zipRelease">
        <mkdir dir="${build.dir}"/>
        <zip destfile="${build.dir}/YOUR-FILE-NAME_${revision}.zip"
             basedir="${temp.dir}" />
        <antcall target="clean"/>
    </target>
    
<!-- ===================================================== -->
<!-- deploy to target server                                  -->
<!-- ===================================================== -->     
    <target name="deploy">
        <scp file="${build.dir}/YOUR-FILE-NAME_${revision}.zip"
            todir="${user}@${deploy.server}:${deploy.path}"
            password="${pass}"
            trust="true"
        />
    </target>
    
<!-- ===================================================== -->
<!-- Extract and configure on target server, delete        -->
<!-- manually everything, create data folder        -->
<!-- set correct dir permissions                           -->
<!-- ===================================================== -->     
    <target name="extractConfigure">
        <sshexec host="${deploy.server}"
                      username="${user}"
                  password="${pass}"
                  trust="yes"
                  command="cd ${deploy.path}; 
                          rm -R app-clients-admin;
                          rm -R library;
                          rm -R public; 
                          rm -R data;      
                          mkdir data;
                          mkdir data/cache;
                          mkdir data/session;                                              
                          chmod 775 data/cache;
                          chmod 775 data/session;
                          unzip -o YOUR-FILE-NAME_${revision}.zip;
                          rm YOUR-FILE-NAME_${revision}.zip;   
                         "/>
    </target> 
        
<!-- ===================================================== -->
<!-- Targets                             -->
<!-- ===================================================== -->             
    <target name="build-release"
            description="Checksout and Build Release, Specify revision and environment (prod) 
                         Example: ant build-release -Drevision=HEAD -Denv=prod"
            depends="clean,checkout,cleanRelease,populate,revision,zipRelease"/>
            
    <target name="deploy-release"
            description="Deploys Release and Expands on Target Server 
                         Example: ant deploy-release -Drevision=value -Denv=prod -Duser=value -Dpass=value"
            depends="deploy,extractConfigure" />
            
    <target name="build-deploy"
          description="Checksout,Build, Deploys in One Step
                       Example: ant build-deploy -Drevision=value -Denv=prod -Duser=value -Dpass=value"
            depends="clean,checkout,cleanRelease,populate,revision,zipRelease,deploy,extractConfigure" />           
    
    <target name="usage">
        <echo message="  Execute 'ant -projecthelp' for build file help."/>
        <echo message="  Execute 'ant -help' for Ant help."/>
    </target>     

</project>

cleanRelease and extractConfigure is where you will likely need to do the most customizing. For example during extractConfigure I remove my data directory where I store cache/session data then re-create. This is something specific to my application.

When running the ANT targets you supply the revision (or HEAD) the target environment (just prod in the example), and the username/password for your production environment:

Example: ant build-deploy -Drevision=HEAD -Denv=prod -Duser=foo -Dpass=foobar

The env variable is used to specify which properties file to use and which htaccess file to copy. If you supplied qa, ANT would look for build.properties.qa and htaccess.qa.

Running ant -projecthelp will show you the 3 main targets and examples of their usage.

Debugging Front End Code, New Tools

2010-03-01T00:00:00-08:00

Front End debugging tools have come a long way. Below are some of the tools I am using on a daily basis to debug and fine-tune my front end code.

Firebug - Firefox Plugin

Firebug is my workhorse for general debugging. It has the standard set of CSS inspectors and a robust net monitor. The net monitor is essential for debugging XHR requests. I could not develop Ajax applications without it.

Chrome - Developer Tools

Google's chrome browser comes with an amazing set of developer tools and is quickly replacing firebug in my toolkit. It has all the standard CSS inspectors and JS debuggers but goes a bit further than firebug. I was blown away when I discovered CPU profiling. This is a great way to sniff out memory leaks, really important if you are adding/removing DOM elements like a madman.

Also important to point out are the JS timeline tools, showing you a breakdown of loading, scripting, rendering while you are interacting with the web page. Another great tool for optimizing speed.

Pixel Perfect - Firefox Plugin

The ultimate tool for making sure you have translated a design to HTML with pixel perfect accuracy. Pixel Perfect allows you to overlay an image onto a web page and manipulate it's opacity. This makes it incredibly simple to compare a design mockup and your HTML.

Lectures on JavaScript History & Future

2010-02-15T00:00:00-08:00

Douglas Crockford is currently giving a series of lectures on JavaScript. So far there are 2 and they are fascinating:

http://developer.yahoo.com/yui/theater/

Load Routes From Routes.ini Config File In Zend Application Bootstrap

2010-02-10T00:00:00-08:00

I spent waaaay to many hours trying to load routes via a config file in Zend Framework 1.10 and I think this might be a problem with the documentation I was following on the Zend Framework site. More on that later, let's get to my solution first.

Here is the use case I am addressing: I want to store routes in a .ini file and have this file loaded via the Application Bootstrap. Zend Application allows me to store these in the application.ini file but I have a large number and want to store them separately.

First create your routes.ini file:

config.ini

[production]
routes.linkA.route = "linkA"
routes.linkA.defaults.controller = "linkB"
routes.linkA.defaults.action = "linkBAction"

Where linkA is the incoming route and linkB is the outgoing route

New let's add the function to load this file in the Bootstrap. Add the following to your boostrap.php:

bootstrap.php

protected function _initRewrite() {
    $front = Zend_Controller_Front::getInstance();
    $router = $front->getRouter();
   
    $config = new Zend_Config_Ini(APPLICATION_PATH . '/configs/routes.ini', 'production');      
    $router->addConfig($config,'routes');
} 

That's it, everything should be working :-)

The above use case is addressed in the Zend Framework Documentation but I could not get their example to work:

http://framework.zend.com/manual/en/zend.controller.router.html

Using Zend_Config with the RewriteRouter
Sometimes it is more convenient to update a configuration file with
new routes than to change the code. This is possible via
the addConfig() method.

. . .

$config = new Zend_Config_Ini('/path/to/config.ini', 'production');
$router = new Zend_Controller_Router_Rewrite();
$router->addConfig($config, 'routes');

No matter how hard I tried I could not get the above to work. It is very simple code but there are no instructions on where this can/should be run. Maybe this can't be run from the bootstrap? I even wrote a plugin and but no matter what I tried I could not get this to work using Zend_Controller_Router_Rewrite().

It is also possible that I completely mis-understood the documentation and got all mixed up, I struggle with Zend Documentation sometimes.

If you figure out how to do this using Zend_Controller_Router_Rewrite() please leave a comment it was driving me nuts!

Installing Node.Js On OS X 10.6

2010-02-08T00:00:00-08:00

Updated May 7 2010, With Version 0.1.94 From GitHub

Node.js is evented i/o for Google's V8 Server Side JavaScript engine. For me . . . node.js means I can write apps that can handle tons of requests without having to learn/think about threads & locks (all I know about threads is that they are scary and involve big books from O'reilly).

As a front-end developer the node.js approach is fantastic because I already think in terms of events and I love writing code in JavaScript.

Installing node.js on OS X is super-easy and the documentation on the node.js site is great, but I figured I would write a step-by-step for OS X since I had just installed it for the first time. The node.js install includes Google's V8 JS engine so no need to worry about installing that.

Download and Install Node.JS

Get node.js from either github or download from the node.js site. If you need GIT for OS X you can grab the code from google http://code.google.com/p/git-osx-installer/ and follow GitHub's install instructions.

http://github.com/ry/node

http://nodejs.org/#download

Build & Install

Build node.js by following the instructions in the readme or just run:

./configure
 make 
 make install

At this stage you may get an error about a missing compiler (I did). This can be caused by outdated developer tools or completely missing developer tools. In my case I did not run the Xcode install from my Snow Leopard Disc when I upgraded. So if you get this error grab your Snow Leopard DVD, put the kettle on, and run the Xcode installer.

You may also get a permissions error running make install, in this case just sudo make install.

Test Server With Hello World

Copy the test server code from below (taken directly from http://nodejs.org):

server.js

var sys = require('sys'),
    http = require('http');

    http.createServer(function (req, res) {
        setTimeout(function () {
            res.writeHead(200, {'Content-Type': 'text/plain'});
            res.end('Hello World\n');
        }, 2000);
    }).listen(8000);

sys.puts('Server running at http://127.0.0.1:8000/');

Run it with:

node example.js

And go the the following url in a browser:

http://127.0.0.1:8000/

You should see the text "hello world". If you do congrats, node.js is installed!

Managing CSS and JavaScript files within a Zend Framework App - A Different Approach: View Plugin

2010-02-05T00:00:00-08:00

Reading this article on the Zend Framework Blog Managing CSS and JavaScript files within a Zend Framework App, speaking personally as a front-end developer I would use a different system.

In my approach loading up different CSS/JS files per controller is the exception not the rule. We load additional CSS/JS when we need to do something very special, for example a page with a flash file uploader.

I also think loading dependent files outside of the controller can make it difficult for other developers to work on your code. You can't just look at the controller to see what other CSS/JS dependencies are being used, you need to check the file system.

My approach is a View Plugin that manages a standard set of CSS/JS for every layout. Additional CSS/JS if needed are added in the controllers.

Onto the code!

View Plugin Example

Here is my example view plugin from a recent project:

View.php

<?php
class Plugin_View extends Zend_Controller_Plugin_Abstract {
    public function routeStartup() {

        $view = new Zend_View();

        $view->doctype('XHTML1_STRICT');
        $view->headTitle()->setSeparator(' - ')->append('FooBar.com');
        $view->headMeta()->appendHttpEquiv('Content-Type','text/html; charset=utf-8');
        $view->headLink()->appendStylesheet('/css/style.css');

        $view->addHelperPath('ZendX/JQuery/View/Helper/', 'ZendX_JQuery_View_Helper');
        $view->jQuery()->enable();
        $view->jQuery()->uiEnable();

        $view->jQuery()->setLocalPath('/js/jquery/jquery-1.3.2.min.js');
        $view->jQuery()->setUiLocalPath('/js/jquery/jquery-ui-1.7.2.custom.min.js');
        $view->jQuery()->addStylesheet('/css/smoothness/jquery-ui-1.7.2.custom.css');
        $view->jQuery()->addJavascriptFile('/js/interface-utils.js');

        $viewRenderer = new Zend_Controller_Action_Helper_ViewRenderer();
        $viewRenderer->setView($view);
        Zend_Controller_Action_HelperBroker::addHelper($viewRenderer);
    }
}

The code in an example layout file:

<?= $this->doctype() ?>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>  
  <?= $this->headMeta() ?>
  <?= $this->headLink() ?>
  <?= $this->jQuery() ?>        
  <?= $this->headScript() ?> 
  <?= $this->headTitle()?> 
</head> 
<body>

As you can see from the above code, the Plugin handles everything needed for the HEAD area of the page, and it is all in one place.

Adding Additional CSS/JS From A Controller

If you need to add additional CSS/JS files, you can now do this in the controller - when needed. In the following example I need to add the dependencies for "Uploadify" a flash based multifile uploader.

UploadController.php

<?php

class UploadController extends Zend_Controller_Action {

    public function init() {

    }

    public function indexAction() {
        $this->view->headLink()->appendStylesheet('/uploadify/uploadify.css');
        $this->view->headScript()->appendFile('/uploadify/swfobject.js');
        $this->view->headScript()->appendFile('/uploadify/jquery.uploadify.v2.1.0.min.js');
    }

</pre>

The above inserts the dependencies into the layout for this controller action only. Sweet!!

From my perspective this approach works better and I think from a code organization structure it is cleaner. Any special CSS/JS can be added on a per-controller or per-controller-action basis and it will be very clear to other developers what is being loaded and where.

Painless EOT Font Generation With FontSquirrel

2010-02-03T00:00:00-08:00

So you want to use @font-face to add some fancy fonts to your site. Well there is that pesky problem of IE needing a specific font type. Until recently you had to use Microsoft's WEFT tool to generate the right files. Personally I'd rather stick needles into my eyeballs than use this awful program, luckily some online tools have sprung up to ease the pain.

Font Squirrel has a great online conversion tool that handles generating the fonts/CSS and everything for you. All you need is the TrueType or OpenType version of the font.

http://www.fontsquirrel.com/fontface/generator

It will even base64 encode the font, allowing you embed the entire font into your CSS (rather than having a file) to avoid the "text flashing/switching" that can occur.

Be aware that you will need to encode all variants of the font you want to use, including bold/italic so keep an eye on your file size.

DevPatch.com Launched

2010-02-01T00:00:00-08:00

Announcing the launch of DevPatch.com!

I will be using the blog section to share technical tips & tricks focusing on:

XHTML & HTML 5
jQuery
Server Side JavaScript
Zend Framework
Technical Project Management

Special thanks to Lesley Marker @ Marker Design for developing the DevPatch logo/branding.