Web Development Articles

October 1, 2007 – 1:38pm Prevent DNS Servers from redirecting local requests

When I start work on a new web project I usually create a new virtualhost on my development machine so that I can access a local version of the site at something like http://myproj/ instead of http://localhost/~myusername/myproj. I use a nice little shell script written by Patrick Gibson called virtualhost.sh that handles this task on OS X. One little snafu I run into depending on my ISP is that their DNS servers will sometimes capture my local request to the domain name and try to redirect before my request even hits my local server. To fix this, you have to edit your local hosts database. Open up /private/etc/hosts and add a line like:

127.0.0.1       myproject

Now, any requests to http://myproject/ should be recognized as a local host and your DNS servers will no longer redirect you.

Posted in  OS X Web Development   |  No Comments »   |  delicious  Digg

August 16, 2007 – 5:09pm New symfony plugin: sfLightWindowPlugin

We’re pleased to announce the release of our latest symfony plugin, sfLightWindowPlugin. sfLightWindowPlugin provides great helper functions for LightWindow v2.0. LightWindow is a great improvement over the original Lightbox 2 script, and includes handlers for virtually all media types, including flash, quicktime, youtube videos, images, remote content, inline content, and more. Using this plugin, it’s amazingly simple to add these great effects to your symfony site.

Check out the sfLightWindowPlugin Demo for a closer look. You won’t be disappointed!

To download the sfLightWindowPlugin, visit the wiki page for download and installation instructions.

Posted in  Web Development   |     |  20 Comments »   |  delicious  Digg

August 15, 2007 – 3:25am Stereolabels released: updated labels.js for Prototype

Stereolabels unobtrusively places form input labels inside the form inputs themselves. Upon page load, the script crawls the DOM for labels with the specified class name (default is ‘inside’) and places the label text inside the input field. Upon clicking the field, the label is removed. When the element loses focus, if there is no input the label returns. This behavior is only applied to text, textarea, and password input fields.

Information and a download are available in our code section: Stereolabels

Posted in  Web Development   |     |  No Comments »   |  delicious  Digg

August 10, 2007 – 1:57pm Tracking AJAX applications with Google Analytics

In doing some research today for a client, I learned that it is indeed possible to track ajax requests with Google Analytics. All you have to do is make a call to the urchinTracker passing it the page name of the request and it will do the rest. Typically you will want to do this in the code section that handles the ajax response:

var myAjax = new Ajax.Request(
  url,
  {
    method: 'get',
    parameters: pars,
    onComplete: function() { urchinTracker("/yourAjaxPageName" ); }
  }
); 

More on this can be found in the Google Analytics Help Center.

Posted in  Web Development   |  No Comments »   |  delicious  Digg

August 3, 2007 – 9:56am TextMate Tip of the Day: Drag a file from the project drawer

Just discovered this by accident: If you want a list of files in your project or any sub directory, drag the item from the file drawer into a document. A nicely formatted list of all of the files will automatically be placed into your doc. Now… if only I needed it. Maybe someday.

TextMate: Click to View Screencast

Posted in  OS X Web Development   |  No Comments »   |  delicious  Digg

August 2, 2007 – 1:15pm SSH Login without entering your password

Using an SSH key to connect to the server allows you to log in without entering your password.

To generate an SSH key on Mac OS X or Linux machines:

  • Open a Terminal window and enter:
ssh-keygen -d

Unless you set an alternative local storage location when prompted, your public key will be stored in ~/.ssh/id_dsa.pub. For increased security enter a passphrase when prompted, however this is probably not necessary unless many people use your computer.

  • At the command line enter the following and copy the output to the clipboard.
cat ~/.ssh/id_dsa.pub
  • Log in to the server.
  • Switch into the ssh directory:
cd .ssh
  • Type:
vi authorized_keys
  • Paste your public key from the clipboard, then save and exit vi.
Posted in  OS X Web Development   |  2 Comments »   |  delicious  Digg

July 29, 2007 – 5:30pm svn add new files, remove all svn directories

to add all new files in a project to the respository you can use either:

svn status | grep "^\\?" | awk '{print $2}' | xargs svn add

svn status | grep "^\\?" | sed -e 's/? *//' | sed -e 's/ /\\\\ /g' | xargs svn add

to remove all svn directories from a project:

find . -iname '.svn' -print0 | xargs -0 rm -rf 
Posted in  Web Development   |  No Comments »   |  delicious  Digg

July 26, 2007 – 11:31am sfCombineFilterPlugin released: Combine js and css requests into single compressed files

The sfCombineFilter plugin automatically combines included js and css files in your web response into one request each, passing the string of file names to a special php file that concatenates them and compresses them for faster delivery. This file is then cached for future use.

Information and download instructions are available in our code section: sfCombineFilter

Posted in  Web Development   |     |  1 Comment »   |  delicious  Digg

July 23, 2007 – 8:45pm Prototype Tabs Script released, Scriptaculous Optional

We just released a small script that allows you to easily create tabbed content on your web sites with a nice fade effect. Having searched for a decent script that uses prototype.js and scriptaculous to quickly create tabbed inline content and not having found one, we were inspired to create our own, much as stickmanlabs did with the accordion script. Check out the prototype tabs demo.

Posted in  Web Development   |     |  3 Comments »   |  delicious  Digg

July 20, 2007 – 6:14pm Symfony: path to upload directory, other sf_* config values

sf_upload_dir, sf_upload_dir_name, sf_data_dir… I know there are a lot of configuration values available throughout the symfony code, but I don’t use them enough to remember what they are exactly. The Symfony Upload File documention helps describe which paths you need for for file uploads. In your templates/view, you will want to use:

sfConfig::get('sf_upload_dir_name')

This will usually be the string “uploads” unless you changed the setting in your configuation. When you need the *full path* to the file on your web server, say to move or save the uploaded file, then you use:

sfConfig::get('sf_upload_dir')

To make things easier, usually I will use those configuration settings in conjunction with a custom setting for the type of media I am uploading. Say for example I have a “Person” table that has a column named “photo”. This column stores a file name of a person’s picture. I want to store all of these photos in web/uploads/photos. First, I’ll add a setting to my app.yml file:

all:
  dir:
    photo:    "photos"
    doc:       "docs"
    logo:      "logos"

Then in my lib/model/Person.php, I’ll add a method to give me the web path:

public function getPhotoPath()
{
  return $this->getPhoto() ? '/' . sfConfig::get('sf_upload_dir_name') . '/' . sfConfig::get('app_dir_photo') . '/' . $this->getPhoto() : null;
}

May seem like a lot of code, but now anytime I want to display the person’s picture in a template I can use:

<?php image_tag($person->getPhotoPath()) ?>

If I ever decide to move all the stored photos into another directory, perhaps because it’s growing too large and we want them in subfolders based on username or something, then all we have to do is change it in one place and we can be certain no existing templates will break.

If instead you wanted to change the actual ‘uploads’ path, then you can override the symfony parameter in your project’s config/config.php file (note this is copied from the symfony documentation page linked to above):

sfConfig::add(array(
  'sf_upload_dir_name'  => $sf_upload_dir_name = 'uploads',
  'sf_upload_dir'       => sfConfig::get('sf_root_dir').DIRECTORY_SEPARATOR.sfConfig::get('sf_web_dir_name').DIRECTORY_SEPARATOR.$sf_upload_dir_name,
));

As a final note for the curious, if you look in your symfony directory (the actual symfony code base, not your project directory), you can take a look at all of the sfConfig values in config/constants.php. Here are a few variables and their default values that might come in handy:

$sf_root_dir    = sfConfig::get('sf_root_dir');
$sf_app         = sfConfig::get('sf_app');
$sf_environment = sfConfig::get('sf_environment');

$sf_bin_dir_name     = 'batch',
$sf_cache_dir_name   = 'cache',
$sf_log_dir_name     = 'log',
$sf_lib_dir_name     = 'lib',
$sf_web_dir_name     = 'web',
$sf_upload_dir_name  = 'uploads',
$sf_data_dir_name    = 'data',
$sf_config_dir_name  = 'config',
$sf_apps_dir_name    = 'apps',
$sf_test_dir_name    = 'test',
$sf_doc_dir_name     = 'doc',
$sf_plugins_dir_name = 'plugins',
Posted in  Web Development   |     |  1 Comment »   |  delicious  Digg