The problem lies in the fact that measurements are based on the element they are attached to. Thus, to convert any CSS property (i.e. “5em” or “20%”) to pixels, one must determine what the relative height of a single line of text is in pixels.

This tool creates an invisible child element, measures a single line of text, and uses that for measurements.

Thus, to convert 90% (or any measurement, for that matter) to pixels, you could do the following:

   var borderRadiusPixels = $.UnitConverter.px( $('#mydiv').css('border-top-left-radius') );

Here’s the source.

For more advanced operations, you can do things like this:

   // create a new unit conversion
   var measurement = new $.UnitConverter( $('#mydiv') );
 
   // load a value to be examined
   measurement.load( $('#mydiv').css('border-left-width') );
 
   // add 10% to the height
   measurement.add( '10%' );
 
   // convert the measurement to various output types
   var pxs = measurement.px();
   var ems = measurement.convert( 'em' );
   var pct = measurement.convert( '%' );
 
   // determine what the measurement would be in another element (i.e. with a different line height)
   var clonePxs = measurement.clone( $('#nudderElement') ).px();

Hopefully this will give you a good head start on conquering similar issues, without having to invent any wheels!

http://www.zenovations.com/blog/misc/regex.html

http://tldp.org/LDP/abs/html/index.html

Since this took me quite a while to figure out, I thought I’d include the steps here for others.

Installing Xdebug

Over SSH, I ran the following:

$ pecl install xdebug

Configuring Xdebug in php.ini

;;;;;;;;;;;;;;;;;;;
; Module Settings ;
;;;;;;;;;;;;;;;;;;;
zend_extension=/usr/lib/php/modules/xdebug.so
 
[xdebug]
xdebug.remote_enable=1
xdebug.remote_port=9000
xdebug.idekey=PHPSTORM-XDEBUG
xdebug.remote_connect_back=1
 
[Date]

Note the use of zend_extension; as of PHP 5.3, this is the only one that works (extension=…) will appear to function, but never connect!

Also, I used xdebug.remote_connect_back=1 – this allows connections from anywhere. But since I’ve configured my server to load a separate php.ini for each site (sorry, this is outside the scope of this discussion), and the entire site is under development and protected by .htaccess, I didn’t have to worry about other people debugging remotely.

An alternative to using remote_connect_back is to specify the remote_host to your local ip address:

xdebug.remote_host=0.0.0.0 ;your ip address
;xdebug.remote_connect_back=0

 Alternative: Loading via .htaccess instead of php.ini

Alternately, I could have dropped a .htaccess file into my root directory for the virtualhost, if the php.ini for each site were too much trouble:

php_value  zend_extension=/usr/lib/php/modules/xdebug.so
php_flag   xdebug.remote_enable on
php_value  xdebug.remote_port 9000
php_value  xdebug.idekey PHPSTORM-XDEBUG
php_flag   xdebug.remote_connect_back on

Configuring PhpStorm

I followed these instructions to the letter. Make sure you set up the “PHP Remote Debug” and not the “PHP Server” option if you’re using my list here as a guide (both work, I just chose the remote)

Remember to get those IDEKEY values to match up in the editor and on the server!

Configure Firewalls

On CentOS, I use apf, so I configured my firewall by adding port 9000 into the following settings: IG_TCP_PORTS, EG_TCP_PORTS

Then I restarted apf:

$ /etc/init.d/apf restart

At home, I opened a connection in my firewall by adding a redirect for port 9000 to my personal PC.

Starting it Up

Remember to reload Apache’s config!

$ /etc/init.d/httpd reload

Make sure PhpStorm is set to break on first line, or you won’t know if it worked! (you need the debugger to get involved):

Start the PhpStorm Remote Debug:

Make sure to click the “listen for connections” icon!

A quick note on semantics here: It is not technically necessary to have the debug server running and “listen for connections” clicked. Listen for connections will, in fact, start the debugger when an incoming connection is received. However, for initial testing, having the debugger actually ON was very helpful in being sure PhpStorm wasn’t failing to start incoming connections.

Connect to your IP address from the web server to make sure it can talk to your IDE:

$ telnet 0.0.0.0 9000

Add XDEBUG_SESSION_START=PHPSTORM-XDEBUG in the URL of the site to initiate a connection:

Witness debugging in all its glory!

Browser Plugins

There are browser plugins for Chrome and Firefox that make remote connections a breeze; you no longer have to type the parms into the URL. I’ve used both of these with success and highly recommend this simplification.

This is a great site as once registered, you can check any number of the flash cards sets, then say “study 50″ or “study 100″ and it will give you a random cross section of the sets to study for the day. It tracks correct/incorrect and provides charting, as well as some other nice tools (keyboard navigation–yay!)

I was able to make this lib work with jQuery 1.2.6 by making only this one-liner change:

    //this.element.hover(this.options.onHover); 
    this.element.hover(this.options.onHover, this.options.onHover);

Here are the criteria I used to narrow down the possible project management and time tracking solutions:

• Web based application
  Our devs use various platforms and it needs to run everywhere without install and upgrade headaches, I also considered Air and Flash apps
• Support for 5 users
  Because, yanno, we need five people to record time
• Time tracking must include timer with start/stop capabilities
  We are multi taskers and like accuracy; we considered products with timer widgets as well
• Feature list and pricing prominent
  Excluded all sites with vague details, no screenshots,  or “contact us for details and pricing” models, due to sheer volume and time needed to research
• Must have a free trial evaluation
  Yanno, so I could evaluate them
• Professional and sharp web site
  Attention to detail is critical to good software design and project management, how they run their site should reflect this

After nearly ten hours of research, I narrowed the field to fifteen products. Then I evaluated each product by importing several of our current projects into it and using the time tracking tools for one day. After which I ran reports and recorded my findings in a spreadsheet. The final ratings were on a 1-5 scale, based on usability, project management capabilities, time tracking capabilities, invoicing features, reporting capabilities, and API and integration tools. Here’s what I came up with:

Once I had some numbers to work with, I weighted each product to meet our needs, based on the following criteria:

• Usability: Ease and speed of use is very important to us, as we have little time for project management (x2)
• Time tracking capabilities: highly critical (x5)
• Project management capabilities: highly critical (x5)
• Low price:  we want to keep the price under $50 a month, so our value calculation was tweaked accordingly:  rating *3 – (price per month/10)
• Invoicing, reports, and so on are nice, of course, but we can make due with our external, existing solutions

So, using this data, here were my findings:

It should be apparent that ProWorkflow is, hands down, the best overall product on the market. It’s quality, well thought out, bug free, fast, and powerful. Skylight was by far the best for our needs, according to price versus quality. The rest of the data is interesting, but several of the products listed had a time tracking or project management rating less than three, which is insufficient for our needs. So the final choices for us were as follows:

• Skylight – use this and put up with the slow, laborious interface; our preference for now
• Basecamp + MyHours/Harvest/Tick – together, these products are a complete package, but pricey
• ProWorkflow – very pricey, but we could bite the bullet on this and get the best quality product on the market.

If you’d like to view or download the complete data, including links to all of the product sites, you can find all the gory details in the Google spreadsheet. You can also view the same data sorted by total quality instead.

Of course, if you use a lib like extjs, jQuery, et al, then you have no need of this. But if you’re trying to hack out a greasemonkey script or insert some minimalist code, here it is.

And here it is, for my own archives:

function getElementsByClass(searchClass,node,tag) {
	var classElements = new Array();
	if ( node == null )
		node = document;
	if ( tag == null )
		tag = '*';
	var els = node.getElementsByTagName(tag);
	var elsLen = els.length;
	var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
	for (i = 0, j = 0; i < elsLen; i++) {
		if ( pattern.test(els[i].className) ) {
			classElements[j] = els[i];
			j++;
		}
	}
	return classElements;
}

Here’s another alternative I found on Glazblog, using xpath to search the document:

document.getElementByClassName = function(needle) {
  var xpathResult = document.evaluate('//*[@class = needle]', document, null, 0, null);
  var outArray = new Array();
  while ((outArray[outArray.length] = xpathResult.iterateNext())) {
  }
  return outArray;
}

I don’t really know which is more efficient, though I suspect the xpath search could be taxing in very large documents. I’m positive, based on IE’s fake implementation of key/value pairs in the DOM, that they both suck in IE, even if you specify a specific tag type to search. Obviously, providing a node makes the regular expression search faster, by virtue of having less content to parse.

Here is a quick script for sending an email:

#!/bin/bash
 
# Subject of email
SUBJECT="Test email with attachment from a bash script"
 
# Where to send it
TO_ADDRESS="your@email.com"
 
# Where the attachment is
ATTACHMENT_FILE="/tmp/attachment.txt"
 
# For fun, let's put something into the attachment
echo "This goes into the file."  >  $ATTACHMENT_FILE
echo "This appends to the file." >> $ATTACHMENT_FILE
 
# send the message
/bin/mail -s "$SUBJECT" "$TO_ADDRESS" < $ATTACHMENT_FILE

sc delete ServiceName

You can find the service name by going to Control Panel -> Administrative Tools -> Services, right click the service and choose properties, the service name is shown there.