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.
Octopress …Some Thoughts
I recently switched my blog from Wordpress to Octopress. Below are some thoughts/points I collected during this process.
Setting Up PhpStorm 2 With XDebug and MAMP
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.
A Full Page Width Scroller for jQueryUI - wideScroller
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.
IDEs for Front End Development & PHP
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.
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.
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.
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!
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.
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/

