The book was already chosen as I’m essentially a substitute on this one. Despite being published by Microsoft, it covers some essential topics for developing on the web today. It even mentions Firebug (a firefox extension) so it’s nice that it’s not biased towards MSFT.

PHP
In October, I will be teaching the Introduction to PHP course a bit closer to where I live and work. I have not yet selected a book, but I’m currently working on adapting Trellis internal training materials.

There are still spots open so go ahead and register!

By following the instructions (reposted with more info) at http://blogs.sun.com/yakshaving/entry/netbeans_will_not_start_on) I was able to get things resolved. As far as I can tell, I have not affected anything else I have.

While I’ve used nicedit before in basic situations and had no problems, I encountered several fatal issues which caused us to revert to Tinymce.

Inner-DIV Implementation
Nicedit creates a new DIV element that relies on some newer HTML features to work properly. Multiple issues stemmed from this, but the primary problem was that all CSS from parent elements would cascade into the DIV, thus forcing me to reset or modify some of them.

Tinymce uses an iframe which is a completely new document, so all CSS does not filter through. This also helps avoid the following content problems.

API
When ajax load/save techniques were used, there were problems with how Nicedit would copy it’s content back to the textarea, thus requiring extra programming. The API documentation is not that great, so it was a little difficult.

Elements Used
In firefox, Nicedit would use a different set of markup elements than it would in IE, making the output harder to predict. This issue is partly due to the use of the Inner-DIV and contenteditable attribute. When filtering the input for markup, we had to allow for both sets of elements. In firefox, the elements were all SPANs with style attributes, which isn’t anywhere near semantic.

Firefox LI Bug
Instances of the editor inside of a list item would have a fatal problem with newlines. While you could type alphanumeric characters, newline key presses would have no result. This was a fatal problem that took some time to debug, but it’s been filed and is awaiting resolution.

Obviously, nicedit is a lot less powerful and has a much smaller community. While it works well for quick needs, nicedit just didn’t work for more standard uses, and we found tinymce a much better solution despite it’s bulk. Since then I’ve managed to weed out a lot of tinymce code we weren’t using, optimize it like crazy, and create some custom plugins for it.

View the Demonstration
Get source from github

I’ve forked the code from the cms to serve as a stand-alone plugin. It’s extremely easy to setup, as all you need to do is to activate it on an un/ordered list item element. Then, write your backend code to handle the incoming array as you need, and output the xml data for when the form loads.

<ul id="form-builder"></ul>

$(document).ready(function(){
	$('#form-builder').formbuilder({
		'save_url': 'save.php',
		'load_url': 'form-a.xml'
	});
});

The save_url is the url that the ajax will be sent to when the user saves the form. The form information is serialized so that the backend programming may handle it as an array.

The load_url is the url of an xml file that describes any existing form information, and the system uses it to restore the fields.

This requires jQuery 1.3+ and uses the scrollTo plugin for nice scrolling.

This is the first revision that’s external to our cms so I’ve labeled it 0.1.

Exploring the ability to create macros and bind them to key commands in Komodo IDE. I’m reposting the below macro that duplicates the lines or the current selection. Thus functionality was previously is Zend Studio 5, went missing from 6, and thanks to the macro, is available in Komodo. Enjoy!

// Duplicate Line or Duplicate Selection
komodo.assertMacroVersion(2);
if (komodo.view) { komodo.view.setFocus() };

var ke = komodo.editor;

if (ko.views.manager.currentView.scimoz.selText){
    // Copy the current selection
    new_selection = komodo.interpolate('%s');
    var pos = ke.currentPos;
    ke.insertText(pos,new_selection);
}else {
    ke.lineDuplicate();
}

I decided to wrap it all up into a jQuery plugin so that it’s easier to use in different projects. The serialized un/ordered list may be sent back to the server, and for example in PHP, will be interpreted as an array.

You may use this plugin by simply calling it on your UL or OL.

$(document).ready(function(){
    $('ul').serializelist();
});

You may download the most recent version directly from github:

http://github.com/botskonet/jquery.serialize-list

However, I found no documented way to parse XML using prototype, so with a bit of toying around I was able to find a pretty simple solution.

First of all, here is the html I have for the two selects I need to work with.

State:<br />
  <select onchange="searchStates()" id="states">
    <option value="">CHOOSE</option>
    <option value="CO">CO</option>
    <option value="OR">OR</option>
  </select>
<br /><br />  

Counties:<br />
  <select id="counties">
      <option value="">Please select a state first</option>
  </select>

The first select field has a list of states that when selected, will fill in the second select element with counties from the selected state. I could have gone the easy way and just replaced the counties element with HTML, but I wanted my counties to be returned in XML. As I mentioned, Prototype didn’t have any documented way of easily parsing XML nodes.

To start, the states select calls this function when the selection is changed:

 function searchStates(){
  var s = $F('states');
  var url = 'ajax_select.php';
  var pars = 'state=' + s;

  var myAjax = new Ajax.Request( url, { method: 'get', parameters: pars, onComplete: showResponse });

}

This function opens a new AJAX request through Prototype. It passes the value in the state selection box to ajax_select.php in the form of a GET request. On the server side I have the referenced php file to handle the request, and return some XML. (Obviously this file is simplified for example purposes).

< ?php

  header("Content-Type: text/xml");
  print'<?xml version="1.0" encoding="UTF-8" standalone="yes"?>'; 

?>

<response>
< ?php if($_GET['state'] == "CO") { ?>
  <record>
    <id>1</id>
    <state>CO</state>
    <county>Jefferson</county>
  </record>
< ?php } ?>
< ?php if($_GET['state'] == "OR") { ?>
  <record>
    <id>2</id>
    <state>OR</state>
    <county>Washington</county>
  </record>
< ?php } ?>
</response>

This file essentially returns an ID number, state, and county for the state passed in the GET request. It opens sending a ContentType of xml so that it doesn’t come back as text, and we add the xml declaration after that. These two statements are required otherwise the javascript gets text instead of XML, and can’t handle it the way we want.

To start out the response handling function, I call it showResponse. In the Prototype ajax request call, I told it onComplete: showResponse, which tells it to call the showResponse function if the request completes.

function showResponse(originalRequest){

}

This is the basic outline of the script. Using the prototype call for an element by its ID, I get the counties element. I need to clear it out, so I loop through it’s options and remove any.

  var c = $('counties');

  while (c.length > 0) {
    c.remove(0);
  }

Now my target element is clear. But the problem I set out to resolve, is the fact that Prototype doesn’t have any easy way of sorting through the child nodes and returning values. My solution is to pull the nodes out by name, since I know the names of the nodes I need.

var tagValue = originalRequest.responseXML.getElementsByTagName('county');
var tagId = originalRequest.responseXML.getElementsByTagName('id');

Now all we need to do is iterate through the array returned. I just picked the first array although it really doesn’t matter as both should have the same counts as they originate in the same records. I create a new option for the select element for each one, with a value of the ID I’m pulling from the XML, and text of the county name. IE handles this differently than other browsers, so I need to use try/catch to get past errors. IE uses nodeName.text while everyone else uses nodeName.textContent.

  for (var i = 0; i < tagValue.length; i++) {
    var opt = document.createElement("option");
    try {
      opt.text = tagValue[i].textContent;
      opt.value = tagId[i].textContent;
      c.add(opt, null);
    }
    // IE needs special handling
    catch(ex){
      opt.text = tagValue[i].text;
      opt.value = tagId[i].text;
      c.add(opt);
    }
}

That’s it! Checkout the working example here!

Or you can Download these source files along with Prototype here.