2 tablespoons

Speed up PHP development in Eclipse PDT with Templates and Snippets

2008-08-26T16:23:56-07:00

Busy schedules, long to do lists, and deadlines make it tough for developers to get familiar with some of the advanced features their tools provide. This is a shame, because some features, like Eclipse Templates, can really reduce coding time and errors.

You already know that Eclipse PDT provides autocompletion and hints for PHP's built in functions. In addition, commenting your code with PHPDoc adds autocompletion and hinting for your application's classes, methods, and variables. If you haven't already discovered, Eclipse PDT also provides autocompletion of PHP's control structures, class definitions, and methods through code templates.

Eclipse PDT Templates

The PHP Developer Tools plug in provides several templates for all of PHP's control structures (if/else, for, foreach, while, switch, etc.) and more. Fire up Eclipse and take a look at Preferences > PHP > Templates. Here are all of the predefined templates available.

The name column indicates what you need to type to insert a template. Context, description, and the template code are all visible here. Some of the names are straightforward but others may take time to memorize. Printing the template list and keeping it nearby might be helpful.

To insert a template, type the name followed by Control + Space bar, select the template, and hit enter/return. Below, I typed 'swi' and then Control + Space bar to add a switch statement.

You must be working in a file that's part of a PHP Project to be able to use these PDT templates!

Once inserted, templates may contain variable fields. The switch template contains two variables (shown with box outlines below), one for the switch statement's variable/expression and the second for the case comparison. Just tab between the fields.

Think of all of the time you'll save and the typos you'll avoid with these templates. If the value or format of any of the templates don't fit with you or your team's coding standards, add new or edit existing templates, and share them with the team by exporting and importing them. Just to be safe, be sure to keep a copy of your exported template XML file as future PDT upgrades may overwrite customizations.

Eclipse Snippets

Most IDE's include a feature to save blocks of code for re-use and Eclipse is no exception. Snippets are suited for code that is not part of an existing template.

Add the snippet to your workspace by selecting Window > Show View > Other... and then select General > Snippets. You can add categories to group snippets however you'd like (ex. PHP, CakePHP, Zend Framework, CSS, Bash, Smarty, etc.). Once you have your categories, add snippets to them.

Open a file and enter a new block or select an existing block of code.
Copy the code block.
Click in the Snippets view, under a specific target category, if you've created categories.
Select "Paste as Snippet..." in the Snippets view menu.
In the "Customize Palette" dialog, enter a name and description.
Use the "Move Up" and "Move Down" buttons to order the snippet in lists as desired.
Click OK

You can also right-click anywhere in the Snippets view and select "Customize" to add a snippet. I haven't worked with variables yet, I assume they work like Template variables do. You can set when snippet categories are displayed so that, for example, PHP-related snippets are displayed only when you're editing PHP files.

Snippets can be exported and imported just like templates. Once I've created and used them for a while, I may share a few snippet categories. Let me know if you've seen any good collections.

Happy coding!

Evernote: Save notes, picts, clippings, and scribbles in one place

2008-07-16T22:28:42-07:00

When inspiration or a sense of responsibility hits me I'll jot down a note or sketch something out with whatever means are available. If I'm at work I'll send myself a to do list or a link to check out later in an email message. When out of reach of digitial devices, post it notes, scraps of paper, and the highly-versatile cocktail napkin receive the rest of my scribbles and scratches. Now if I could just remember where I've squirreled away these bits of brilliance.

Enter Evernote , a new service to help you collect and manage your mental notes in each of their forms. Evernote allows you to send and store notes in text, image, and audio format through a variety of methods. I had signed up for a free account last month but hadn't had a chance to take Evernote for a spin until tonight.

The Basics

It's easy to to get up and running. Submit notes through a web interface, your very own Evernote email address, desktop clients for Windows and Mac, or through mobile clients, including one for the iPhone. Create Notebooks to group your notes, add tags, and browse notes in either thumbnail or list views.

Email Notes and Attachments

Each Evernote account comes with a custom email address. Save this address to your desktop and mobile device to send text notes with photo or scanned attachments. Subject titles are used as note titles and Evernote seems to do a good job retaining message format. No worries about spam here since Evernote account addresses are sufficiently randomized.

I was hoping that I'd be able to rotate the image attachment shown below, but alas image rotation doesn't appear to be a feature yet. This was the only shortcoming I found with the service.

Send 'em from the Desktop

Evernote provides Mac and Windows users with handy desktop clients. Unfortunately Mac users with less than Leopard are left out.

The client allows you to easily create and format new text notes, screenshots, clipboard contents, and iSight pictures. You can also keep notes in sync locally for offline viewing and search.

Speaking of search

I was a bit skeptical of how well Evernote's OCR capabilities would work, especially with handwriting as poor as mine. I am blown away at how well Evernote's hand writing recognition worked. Keywords found in images are highlighted nicely as shown with the following 'FTP' search result.

Impressive

Overall I'm really impressed with Evernote. I plan on piling my notes near my Brother multipage scanner for periodic capture and posting. No more rifling through piles of paper for me. Give it a try and see what you think.

Notes on Popular JavaScript Frameworks, Libraries, and Toolkits, Part 1

2008-07-02T22:15:18-07:00

Although my JavaScript development focus is currently on the Yahoo! User Interface Library (YUI) I do try to keep up with some of the other libraries. Here I'll begin to offer up my recent notes and observations on five popular projects, Dojo, Ext JS, jQuery, Moo Tools, Prototype/Scriptaculous, and YUI.

What about <insert JavaScript library here>?

This is a fair question often asked while reading "comparative literature." According to other blog posts on the subject, Google, benchmark test results, and web development job ads, the projects covered here have garnered more attention from the web development community than others.

JavaScript Projects According to Google

Last month Google gave an endorsement of sorts to jQuery, prototype/script.aculo.us, MooTools, and dojo by offering hosting of each through their AJAX Libraries API. Any web developer in the world can now easily include the latest stable version of these libraries in their projects. I can't think of much higher praise for a project than a nod from Google. These projects can tout their selection and, more importantly, the benefits of Google serving as their CDN hosting service.

Google probably isn't going to host a competitor's library, even if Yahoo! didn't provide hosted versions of the YUI. I'm also guessing that the commercial component of Ext JS's dual licence ruled them out from the AJAX Library API.

Google Trends has become the latest judge in web popularity contests. Here's a Google Trend comparison of each project's web site: dojotoolkit.org, extjs.com, jquery.com, prototypejs.org, mootools.net.

I initially included MochiKit with the others but it did not fair well. MochiKit is a well-established project with many merits and deserves an honorable mention here. Some will also note that the YUI isn't included. Yahoo! uses http://developer.yahoo.com/yui/ instead of a dedicated subdomain for the YUI. The Google Trends report only showed data for developer.yahoo.com.

JavaScript Library Usage on Popular Sites

Pingdom, a server monitoring service, recently posted the results of a simple study of JavaScript framework usage among top websites. They chose to scan the HTML source of site home pages listed on the Alexa US Top 100 and the Webware Top 100 Web Apps. They searched for specific keywords and file names associated with the use of Prototype, JQuery, MooTools, YUI, Dojo, ExtJS and MochiKit. The study includes a list of sites they found using each and basic summaries of the libraries (Note: My next post will expand on these summaries).

The study didn't find evidence of Dojo, Ext JS, or MochiKit in use on the site's home pages but the results should not be considered conclusive. I suspect that Ext JS usage would score quite high in a survey of corporate intranet sites. Ext JS provides formal training and support services which are typically valued in corporate IT environments. In regards to Dojo, I suspect that the recent announcement of their partnership with the Zend Framework will produce a spike in its usage after the 1.6 release of the Zend Framework later this summer.

JavaScript Size and Performance Benchmark Tests

Performance benchmark tests based on general and randomized cases may seem to provide a smoking gun when choosing one framework over another, but be careful. Regardless of the tester's reputation or methods, these tests weren't run against your application in your environment. Ahh, those darn variables always get in the way of simple calculations ;) Tests may reveal advantages in one framework but ultimately performance is determined by a framework coupled with your design ingenuity, coding skill, and infrastructure.

PBwiki recently conducted a JavaScript library performance benchmark test that caught the interest of jQuery's creator, John Resig (for reasons that'll become more obvious in the next sentence). Of the libraries tested, jQuery did very well. Dojo and YUI were neck and neck in the middle of the pack. Prototype by itself was comparable to YUI and dojo but as soon as Scriptaculous was added to the mix, Prototype's performance seems to have suffered greatly. On his blog John provides a summary of the test results and emphasizes why you shouldn't trust random-user-generated performance tests. I wouldn't choose a library for a project solely on the numbers but I would likely cite poor results to discount one.

JavaScript Libraries in the Eyes of Employers

This aspect is of particular interest to those of you in the job market. If you're looking to expand your skill set, here are the JavaScript libraries that Indeed.com says employers are looking for in their job ads.

Prototype produced skewed results for obvious reasons and Prototype js didn't produce any results.

Obviously this is just a cursory comparison. I'm currently spending some time with each project to provide a more thoughtful description of each. In the meantime, what were the deciding factors when you chose a specific library?

A Few Diversions

2008-06-29T22:30:21-07:00

ScrnShots.com is yet another social networking site for the InterWeb. This one targets a small niche market, sharing screen shots. It may seem a bit too narrow of a focus, but I'm going to give it a try for a bit. Specifically, I'm going to start posting new screenshots used in tutorials and posts on this site. I'll also add it to my my list of design inspiration sites to review when I begin a new project.

ScrnShots includes all of the standard features, including tagging, favorites, feeds, and widgets. It also provides handy upload tools for both Mac and Windows. The Mac desktop uploader is available through a menu bar item and provides full screen, window, and area options. After capture you can easily caption and tag the screen shot then upload.

Wordle.net is simple diversion for any typography or tag cloud fanatic. Enter a list of words and phrases or use a set of del.icio.us tags or the contents of an RSS feed to generate a stylized word cloud. Change the structure, colors, and font face to make the cloud your own.

Here's my del.icou.us tag cloud.

And here's one that brought a laugh followed by my own sad self realization :/

Finally, if you like to doodle, Scribbls.com is for you. The idea is draw two things that create something totally different when they're combined. Words can't explain, so give it a try. Be sure to check the most hearted scribbls.

JavaScript Libraries Playing Nice with Others?

2008-06-27T16:48:26-07:00

A common occurrence in Web 2.0 sites, and one that a recent Pingdom study notes, is the concurrent use of multiple JavaScript libraries. One explanation for this is that a required (more often desired) feature or widget may appear to only be available within one specific library.

This perception may have been true a few years ago but is certainly less likely today. What's more likely is that a developer sees a real or perceived obstacle in implementing or developing a widget with one library over another. "Either the widget exists but I can't seem to install it or it's missing and I'm having trouble building it."

Either way, I'm beginning to develop more of a purist's view -- choose one framework for a project or environment and stick with it.

If a widget doesn't exist in a framework, I won't simply use another framework just to add it. Why you ask? Simplicity and performance. It's great that all of these JavaScript libraries reside in their own name space so as not to interfere with the others, but this makes it too easy to add unnecessary complexity and overhead to a site.

I've developed a few sites that embed the Gallery Photo Manager in Drupal. At its core Gallery uses YUI while Drupal uses jQuery. To complicate matters I implemented a Script.aculo.us-based Lightbox effect. The use of Script.aculo.us introduced repetition in basic DOM handling functions that are already provided in YUI and jQuery. Although the repetition only adds up to a few extra kilobytes, these kilobytes add up.

I've decided to replace the effect with a YUI equivalent. One less library to complicate things and fewer file transfers to slow things down. What do you think? Are you using multiple JS libraries? Are you contemplating a JavaScript consolidation effort?

How to Remove a Workspace in Eclipse under OS X

2008-05-02T13:50:33-07:00

The other morning, before I had my morning coffee, I fired up Eclipse and when prompted to select my Workspace, I entered my password and hit return. Still in a haze, I wondered why I was looking at the default Workspace. After restarting and seeing my password in the selected Workspace I finally woke up. D'oh!

So where the heck is this Workspace list stored? I couldn't find the list under preferences. There wasn't a hidden settings file in my home directory. I then started poking around in /Applications/eclipse. Ah ha! Here's the setting file that contains recent workspaces.

/Applications/eclipse/configuration/.settings/org.eclipse.ui.ide.prefs

Opened this file up and deleted the workspace from the RECENT_WORKSPACES. I had to make sure that I didn't remove to many line feeds (\n) which separate each workspace. I'm not sure why eclipse stores these preferences in the Applications folder. Why isn't this information stored in my home directory?

Oh well. I may never make this mistake again, but you never know. Hope this helps someone else out there.

YUI Rollover Part 2: Improving JavaScript Performance and Scalability

2008-05-01T16:14:33-07:00

In my previous article we traded in old school JavaScript habits for unobtrusive methods and the Yahoo! User Interface Library (YUI). The YUI's Event and DOM extensions greatly simplify basic DOM scripting tasks. Let's build on this foundation and improve the rollover script's performance and scalability.

Thanks to Nick and Dirk for their comments on event listeners impact on script performance. Nick points out the fact that JavaScript performance will degrade as more buttons are added to the example rollover menu. The use of a DOM scripting technique called event delegation can greatly reduce performance hits sustained through the assignment of event listeners.

Improve Performance through Event Delegation and Bubbling

The current version of the rollover script loops through the menu container and assigns event listeners to each button. Assigning listeners to child elements this way can, and will, have a negative impact on performance.

credit: Senocular.com

Let's use event delegation to simplify things. Event delegation leverages an inherit browser behavior called "event bubbling". By default, when an event happens to an element's descendents, the event "bubbles up" through the DOM to the parent.

This means that we can assign event listeners to the menu rather than every button it contains. In our rollover example we can reduce the number of event listeners from 3 to just 1. Wow! We've just cut the work required to assign listeners by 66%. You can see that the performance savings of event delegation add up quickly.

We'll use the same HTML markup and CSS from the previous example.

<div id="menu">
  <div class="btn">
    <a href="#">Link 1</a>
    <p>Description for link 1</p>
  </div>
  <div class="btn">
    <a href="#">Link 2</a>
    <p>Description for link 2</p>
  </div>
  <div class="btn">
    <a href="#">Link 3</a>
    <p>Description for link 3</p>
  </div>
</div>

Here's the updated script using the YUI's Event and DOM extensions. The script now uses Event's handy getTarget() method which captures the target of the current event.

<script type="text/javascript">
// Create the menu object
var roll = {
  // The rollover function
  over : function(e) {
    // Capture the current target element
    var elTarget = YAHOO.util.Event.getTarget(e);
    // Step through this section of the DOM looking for a btn 
    // in the target's ancestory, stop at the menu container
    while (elTarget.id != 'menu') {
      // If we're over a btn, turn it on and stop
      if (YAHOO.util.Dom.hasClass(elTarget, 'btn')) { 
        YAHOO.util.Dom.addClass(elTarget, 'btn-over');
        break;
      // Keep looking one level up
      } else {
        elTarget = elTarget.parentNode;
      }
    }
  },
  // Reset menu styles
  out : function(e) {
    var btns = YAHOO.util.Dom.getElementsByClassName('btn', 'div', this);
    YAHOO.util.Dom.removeClass(btns, 'btn-over');
  }
};
// Assign event listeners to just the menu
YAHOO.util.Event.on('menu', 'mouseover', roll.over);
YAHOO.util.Event.on('menu', 'mouseout', roll.out);
</script>

Take a look at the functioning example.

Allow for Growth

The updated rollover script gives us a big improvement in performance, but it doesn't scale at all. The script includes hardcoded references to a single menu. What if we want to add additional menus?

First, let's update the stylesheet to use classes, instead of an ID, to target and style rollover menus.

.rollover { 
  font: 85% Arial, Helvetica, san-serif;
}
.rollover .btn, .rollover .btn-over {
  background-color: #e7e7e7;
  border-width: 2px;
  border-style: solid;
  color: #666;
  float: left;
  margin: 0 5px;
  width: 150px;
}
.rollover .btn {
  border-color: #999;
}
.rollover .btn a, .rollover .btn-over a { 
  color: #fff;
  background-color: #999;
  display: block;
  padding: .3em .5em;
  text-decoration: none;
}
.rollover p { 
  clear: both;
  padding-top: 1em;
}
.btn p {
  padding: 0 .5em;
}
 
/* Rollover styles */
.rollover .btn-over {
  border-color: #666;
  color: #000;
}
.rollover .btn-over a {
  background-color: #666;
}

Next, apply the rollover class to a menu, or two.

<div id="menu1" class="rollover">
  <div class="btn">
    <a href="#">Link 1</a>
    <p>Description for link 1</p>
  </div>
  <div class="btn">
    <a href="#">Link 2</a>
    <p>Description for link 2</p>
  </div>
  <div class="btn">
    <a href="#">Link 3</a>
    <p>Description for link 3</p>
  </div>
  <p>Here's a menu.</p>
</div>
 
<div id="menu2" class="rollover">
  <div class="btn">
    <a href="#">Link 3</a>
    <p>Description for link 3</p>
  </div>
  <div class="btn">
    <a href="#">Link 4</a>
    <p>Description for link 4</p>
  </div>
  <div class="btn">
    <a href="#">Link 5</a>
    <p>Description for link 5</p>
  </div>
  <p>Here's another menu.</p>
</div>

The script now needs to include a method for adding event listeners to each of the rollover menus. This task is handled by menu.init() which is run once the page is loaded. The only other change is the use of the rollover class to stop our walk of the DOM.

<script type="text/javascript">
// Create the menu object
var roll = {
  // Assign event listeners to all rollover menus, 
  // Isn't getElementsByClassName wonderful?!
  init : function() {
    var menus = YAHOO.util.Dom.getElementsByClassName('rollover', 'div');
    YAHOO.util.Event.on(menus, 'mouseover', roll.over);    
    YAHOO.util.Event.on(menus, 'mouseout', roll.out);
  },
  // The rollover function, only change is using className instead of ID
  over : function(e) {
    // Capture the current target element
    var elTarget = YAHOO.util.Event.getTarget(e);
    // Step through this section of the DOM looking for a btn 
    // in the target's ancestory, stop at the menu container
    while (elTarget.className != 'rollover') {
      // If we're over a btn, turn it on and stop
      if (YAHOO.util.Dom.hasClass(elTarget, 'btn')) { 
        YAHOO.util.Dom.addClass(elTarget, 'btn-over');
        break;
      // Keep looking one level up
      } else {
        elTarget = elTarget.parentNode;
      }
    }
  },
  // Reset menu styles
  out : function(e) {
    var btns = YAHOO.util.Dom.getElementsByClassName('btn', 'div', this);
    YAHOO.util.Dom.removeClass(btns, 'btn-over');
  }
};
 
// Initialize all rollover menus when the page loads
YAHOO.util.Event.on(window, 'load', roll.init);
</script>

And here's the working example of the rollover script that scales.

Conclusion

So there you have it. A few simple examples illustrating how to improve performance and scalability in JavaScript. These are basic examples and hopefully they'll help you refactor your scripts to meet your site's needs. I highly recommend reading Peter-Paul Koch's explanation of mouse events and event order in the DOM and how each browser handles them. They helped me tremendously.

Introduction to Unobtrusive JavaScript, DOM Scripting, and the Yahoo! User Interface (YUI) Library

2008-04-24T22:07:15-07:00

If you know JavaScript but have yet to make the leap to unobtrusive JavaScript, read on. I'll demonstrate how to upgrade a traditional DHTML rollover to an unobtrusive script and then to a script that leverages the Yahoo! User Interface Library's (YUI).

What is Unobtrusive JavaScript and DOM Scripting?

Rather than hardcoding event handlers as HTML attributes, unobtrusive JavaScript assigns them using the DOM. Well-structured, valid HTML is a prerequisite to DOM scripting. Documents should declare a DOCTYPE, they should validate against the DOCTYPE, and presentational styles should be applied with CSS (read "should" as "life will be easier for everyone if you do"). Use a few targeted CSS ID and class selectors to define page layout. Don't go overboard on defining selectors, remember, descendent selectors are your friend.

I'll use a simple text-based rollover for demonstration purposes. In a perfect world, with perfect browsers, this effect would be created using the CSS pseudo hover class but, as you've probably guessed, it doesn't work in Internet Explorer 6. Here's a screenshot of what we're building.

The Rollover, Obtrusively Old School Style

First, the style sheet. Nothing wrong here as long as these are stored in an external CSS file.

#menu { 
  font: 85% Arial, Helvetica, san-serif;
}
#menu .btn {
  background-color: #e7e7e7;
  border-color: #999;
  border-style: solid;
  border-width: 2px;
  color: #666;
  float: left;
  margin: 0 5px;
  width: 150px;
}
#menu .btn a { 
  color: #fff;
  background-color: #999;
  display: block;
  padding: .3em .5em;
  text-decoration: none;
}
#menu p {
  padding: 0 .5em;
}

Next the markup. The old school technique involves writing the rollover script functions and triggering them from event attributes. More complex actions required more and more stuff muddying up what was a perfectly readable HTML document.

<div id="menu">
  <div id="btn1" class="btn" onmouseover="rollOver('btn1')" onmouseout="rollOut('btn1')">
    <a href="#">Link 1</a>
    <p>Description for link 1</p>
  </div>
  <div id="btn2" class="btn" onmouseover="rollOver('btn2')" onmouseout="rollOut('btn2')">
    <a href="#">Link 2</a>
    <p>Description for link 2</p>
  </div>
  <div id="btn3" class="btn" onmouseover="rollOver('btn3')" onmouseout="rollOut('btn3')">
    <a href="#">Link 3</a>
    <p>Description for link 3</p>
  </div>
</div>

Finally, the JavaScript. A function to set styles on mouseover and another to restore the original styles on mouseout. If you change a color in the stylesheet, you'll have to change it here too.

<script type="text/javascript">
// Apply rollover styles
function rollOver(el) {
  // Get the elements
  var thisBtn = document.getElementById(el);
  var thisLink = thisBtn.getElementsByTagName('a');
  // Change their styles
  thisLink[0].style.backgroundColor = '#666';
  thisBtn.style.borderColor = '#666';
  thisBtn.style.color = '#000';
}
// Reset styles
function rollOut(el) {
  // Get the elements
  var thisBtn = document.getElementById(el);
  var thisLink = thisBtn.getElementsByTagName('a');
  // Change their styles back again
  thisLink[0].style.backgroundColor = '#999';
  thisBtn.style.borderColor = '#999';
  thisBtn.style.color = '#666';
}
<script>

Make the Script Less Obtrusive

Let's clean things up a bit. Strip those event handlers from the button containers.

<div id="menu">
  <div class="btn">
    <a href="#">Link 1</a>
    <p>Description for link 1</p>
  </div>
  <div class="btn">
    <a href="#">Link 2</a>
    <p>Description for link 2</p>
  </div>
  <div class="btn">
    <a href="#">Link 3</a>
    <p>Description for link 3</p>
  </div>
</div>

Now, make a few CSS adjustments and additions to define the hover styles where they belong, in the style sheet.

#menu { 
  font: 85% Arial, Helvetica, san-serif;
}
#menu .btn, #menu .btn-over {
  background-color: #e7e7e7;
  border-width: 2px;
  border-style: solid;
  color: #666;
  float: left;
  margin: 0 5px;
  width: 150px;
}
#menu .btn {
  border-color: #999;
}
#menu .btn a, #menu .btn-over a { 
  color: #fff;
  background-color: #999;
  display: block;
  padding: .3em .5em;
  text-decoration: none;
}
#menu p {
  padding: 0 .5em;
}
 
/* Rollover styles */
#menu .btn-over {
  border-color: #666;
  color: #000;
}
#menu .btn-over a {
  background-color: #666;
}

With that done, hook it all up with the script.

<script type="text/javascript">
// Attach event listeners to the buttons
function findButtons() {
  var menu, btns, i;
  // Get the menu element to access the btn divs
  menu = document.getElementById('menu');
  btns = menu.getElementsByTagName('div');
  for (i=0; i<btns.length; i++) {
    // Attach event listeners for rollovers to the btns
    if (/btn/.test(btns[i].className)) { 
      btns[i].onmouseover = function(){roll(this);};
      btns[i].onmouseout = function(){roll(this);};
    }
  }
}
// Attached to the buttons and ready to roll
function roll(o) {
  // btn is our off state, so turn it on
  if (o.className == 'btn') {
    o.className = 'btn-over';
  // Otherwise, turn it off
  } else {
    o.className = 'btn';
  }
}
// Initialize the rollover
window.onload = function() {
  findButtons();
}
</script>

Everything is now in its proper place. No more JavaScript in the HTML and styles aren't defined in the JavaScript. This will be much easier to maintain.

Unobtrusive, the YUI Style

YUI is one of the many JavaScript libraries that have gained attention in recent years. Some say it's too big and bulky and that may be true in certain cases, like creating a simple rollover. But it's rare in our Web 2.0 world that a site's only JavaScript-powered feature is a rollover. YUI is my current JavaScript framework of choice because along with being feature-rich, it's well documented, tested, and supported.

So here's the rollover script powered by the YUI's Yahoo! Global Object, and DOM and Event extensions.

<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript">
// Create a menu object, put everything we need into it
var menu = {
  // Initialize the menu rollover
  init : function() {
    // Get the btn elements
    btns = YAHOO.util.Dom.getElementsByClassName('btn', 'div', 'menu');
    // Assign event listeners to the btns
    for (var i=0; i<btns.length; i++) {
      YAHOO.util.Event.addListener(btns[i], 'mouseover', menu.roll, i);
      YAHOO.util.Event.addListener(btns[i], 'mouseout', menu.roll);
    }
  },
  // First, turn 'em all off, then turn one on
  roll : function(e, i) {
    YAHOO.util.Dom.removeClass(btns, 'btn-over');
    YAHOO.util.Dom.addClass(btns[i], 'btn-over');
  }
};
// Initialize the menu
YAHOO.util.Event.on(window, 'load', menu.init);
</script>

The YUI version basically works just like the unobtrusive version. Yahoo! provides hosted versions of all the YUI extensions, just add a link to yahoo-dom-event.js. With the help of the Yahoo! Global Object and DOM and Event extensions, it's easy to grab button elements and assign event handlers that trigger the roll function. The main difference here is that everything is neatly encapsulated into the menu object. The YUI's getElementsByClassName and remove/addClass methods make DOM scripting a breeze.

Take a look at the final product.

Conclusion

Hopefully these basic examples serve as a kick in the rear for those clinging to those old school ways. Now that you have the basics of event handling down, I'll show you how to improve the scripts performance through event delegation and how to make it scalable to power multiple rollover menus.

Subversion Administration: Separate an SVN Repository into Individual Projects

2008-03-20T21:02:15-07:00

I've been using Subversion since the Gallery Project switched to it from CVS a few years back. I decided to install Subversion to manage my freelance projects last year and am getting up to speed on repository administration. I flip-flopped for a while on whether to keep projects in a single or separate repositories. I initially decided to keep everything in one repository, but later decided to separate them out. Fortunately, the svnadmin and svndumpfilter utilities make it relatively simple to separate repositories into individual projects.

My goal is to create two new projects from folders stored in the trunk of a single repository. My repository's history isn't complex—it doesn't contain tags or branches yet. You'll need to put a bit more thought into how to deal with existing tags and branches.

My current svn root layout is:

/svnroot
    /branches
    /tags
    /trunk
        /project1
        /project2

The desired layout is:

/svnroot
    /project1
        /branches
        /tags
        /trunk
    /project2
        /branches
        /tags
        /trunk

The basic steps to separate these repositories are:

Dump the current repository
Separate folders in the dump to separate files with svndumpfilter
Create new repositories
Load the filtered dump files into the new repositories
Cleanup the new repository layout, move files from trunk/projectN to trunk/
Delete the original branches, tags, and trunk repositories from svnroot

I'll use tmp as working directory to dump and filter files.

Dump the current repository

svnadmin dump /svnroot/originalproject &gt; /tmp/original.dump

Separate folders to separate files with svndumpfilter

cat /tmp/original.dump | svndumpfilter --drop-empty-revs --renumber-revs include trunk/project1 &gt; /tmp/project1.dump
cat /tmp/original.dump | svndumpfilter --drop-empty-revs --renumber-revs include trunk/project2 &gt; /tmp/project2.dump

The key here is the include option which targets the project folder(s). There's also an exclude option that might come in handy if you're trying to remove one folder from a group of many. The --drop-empty-revs and --renumber-revs options remove commit log messages for other folders and renumber the remaining revision numbers.

Create new repositories

svnadmin create /svnroot/project1
svnadmin create /svnroot/project2

Load the filtered dump files into the new repositories

svnadmin load /svnroot/project1 &lt; /tmp/project1.dump 
svnadmin load /svnroot/project2 &lt; /tmp/project2.dump

Cleanup new repository layout, move files from trunk/projectN to trunk/

Each repository layout now looks something like:

/svnroot
    /project1
        /branches
        /tags
        /trunk
            /project1
                file1
                ...
                fileX

But they should look like:

/svnroot
    /project1
        /branches
        /tags
        /trunk
            file1
            ...
            fileX

Subversion doesn't allow wildcard gobling, so it's impossible to do something like:

svn move trunk/project1/* trunk/

It was possible to edit path information in the project dump files before loading them, but it seemed easier to check out a working copy of each, move things around, and then commit the changes.

svn checkout file :///svnroot/project1 /tmp/project1
cd /tmp/project1/trunk

Now, a little shell work to move things around. Thanks Tigris! PLEASE NOTE: Use this at your own risk. Back up your repository before trying the following or be ready to use svn revert.

for i in /tmp/project1/trunk/project1/*; do svn mv $i /tmp/project1/trunk; done
svn commit -m "Moved all project files to trunk"
svn remove /tmp/project1/trunk/project1
svn commit -m "Removed obsolete project1 folder after moving its contents to trunk"

Lather, rinse, repeat.

At some point I'll probably back track and write a post on installing and configuring Subversion with MacPorts but that's it, at least for now.