Should You Extend or Wrap jQuery UI 1.8 Widgets

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.

(more…)

Communication Between jQuery UI Widgets

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.
(more…)

Deploying Zend Framework With Apache ANT

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!
(more…)

Debugging Front End Code, New Tools

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.

(more…)

Lectures on JavaScript History & Future

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

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.

(more…)

Installing Node.Js On OS X 10.6

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.

(more…)

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

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!
(more…)

Painless EOT Font Generation With FontSquirrel

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.
(more…)

DevPatch.com Launched

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.