jMar"s Blog DevSmash Developer Portal

Tuesday, April 22, 2008

Know Your Environment: PHP Server Module Reporter

This post was authored by David Walsh. To learn more about David, click here.

One of the unfortunate parts on my job is that I rarely get a say in the customer's hosting environment. We don't host our customers' sites so I'm usually at the mercy of whichever hosting provider the customer has contracted with. We usually try to steer our customer toward our preferred host, but most of the time the customer is reluctant to switch because they fear email issues and change in general.

Knowing the hosting environment's limitations before we begin to develop the website is a must. Imagine creating a great website and running into issues later on because the shared hosting server doesn't have a given extension installed. A nightmare!

I've created a basic PHP script that I simply FTP to the server and use to evaluate extensions on the server. I simply supply the extensions I require and the script does the rest of the work.

<?php
 /* set required extensions */
 $my_required_extensions = array(
  'gd',  //graphics library
  'xml',  //xml
  'mysql', //database
  'curl',  //networking
  'openssl', //site will need SSL
  'pecl'  //pear
 );
 natcasesort($my_required_extensions);
 
 //get loaded modules
 $loaded_extensions = get_loaded_extensions();
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <title><?php echo $source_article; ?> Example</title>
 <meta name="description" value="<?php echo htmlentities($meta_description); ?>" />
 <style type="text/css">
  body  { font-size:12px; }
  h2   { border-bottom:1px solid #ccc; font-weight:normal; font-size:18px; margin-bottom:5px; padding-bottom:2px; }
  p   { line-height:20px; margin-top:0; }
  .found  { background:lightgreen; padding:5px 10px; margin:0 0 10px 0; }
  .miss  { background:pink; padding:5px 10px; margin:0 0 10px 0; }
  .extra  { background:lightblue; padding:5px 10px; margin:0 0 10px 0; }
 </style>
</head>
<body>

<h1><?php echo $_SERVER['HTTP_HOST']; ?></h1>

<h2>General Information</h2>
<p>
 <strong>Server Software:</strong>  <?php echo $_SERVER['SERVER_SOFTWARE']; ?><br />
 <strong>Document Root:</strong> <?php echo $_SERVER['DOCUMENT_ROOT']; ?><br />
 <strong>PHP Version:</strong> <?php echo phpversion(); ?>
</p>

<h2>Extension Check</h2>
<?php 
 /* print out */
 //analyze results
 foreach($my_required_extensions as $ext)
 {
  if(in_array($ext,$loaded_extensions))
  {
   $matches[] = strtolower($ext);
  }
  else
  {
   $missings[] = strtolower($ext);
  }
  unset($loaded_extensions[$ext]);
 }
 //print out results
 natcasesort($matches); natcasesort($missings); natcasesort($loaded_extensions);
 foreach($matches as $match) { echo '<div class="found"><strong>',$match,'</strong> found!</div>'; }
 foreach($missings as $miss) { echo '<div class="miss"><strong>',$miss,'</strong> missing!</div>'; }
 foreach($loaded_extensions as $e) { if(!in_array($e,$matches) && !in_array($e,$missings)) { echo '<div class="extra"><strong>',$e,'</strong> is available.</div>'; } }
?><br />

</body>
</html>

The output looks as follows:

Extension Evaluator Screenshot
(click to enlarge)

If I run into the situation where a needed extension isn't there, I must decide whether to push for the customer to switch hosts or adjust the way I code the website. You'll also want to keep a copy of this on hand so that you have proof when the host changes the server and causes issues with the website. Happy coding!

David Walsh.David Walsh is a Senior Web Developer residing in Madison, WI. He spends most of his day getting a monitor tan coding PHP, CSS, MooTools, and XHTML. When not tinkering with the newest version of Moo, David uses soccer, Rock Band, and movies to dull his coding pains.

Friday, April 18, 2008

Add Hover Class to Anything in jQuery

Well I've been feeling a little guilty for the relative sparsity of my posts lately (not that I don't have a good excuse or two), but I wanted to at least get on here and share a quick little tip.

One of the most fundamental "effects" employed by CSS designers is that of indicating when an anchor tag is being "hovered". Virtually every CSS file you encounter will contain something like the following:

a:link {
 /* default styles for anchors */
}

a:hover {
 /* styles for hovered anchors */
}

Often times, however, this same effect is desirable for non-anchor elements as well. For example, in my applications, I like to visually indicate anything that can be the target of an onclick event - and practically speaking, that's not always an anchor. The problem is that :hover is not a reliable cross-browser pseudo-selector on non-anchor elements. Can anyone guess which clIEnt I'm talking about?

Well fret not, cause we have JavaScript to the rescue. In this particular example, as usual, I'm using jQuery to make life easy. Since we can't rely on :hover, we're going to dynamically add a class of hover via JavaScript. The code to do this is remarkably simple:

$('*').hover(
 function() {
  $(this).addClass('hover');
 },
 function() {
  $(this).removeClass('hover');
 }
);

Now let's say you want to style a div with class iHoverable differently when it's being hovered. You can simply add the following rule to your style sheet:

.iHoverable {
 /* normal styles for this element */
}
.iHoverable.hover {
 /* styles for hover effect */
}

That's almost it - just a quick note from a practicality standpoint. I don't really recommend using $('*').hover(...) from the code above. If you already know that you only need to style hovers for elements of class iHoverable, then it would be more efficient to simply write $('.iHoverable').hover(...)

Kapeesh? Ok, now that's it.

OOPS!

It has come to my attention that this post is remarkably similar to a previous post by Karl Swedburg from over a year ago. My bad!

Thursday, April 17, 2008

Load Your Static Content the Dynamic Way

David Walsh was kind enough to let me guest author an article on his blog. Check it out!

Saturday, April 12, 2008

Introducing: Kwicks for jQuery

Well despite the underwhelming response I got from my teaser post earlier in the week, I went ahead and wrapped things up. For those of you jQuery fans who have been ashamedly drooling over the perfectly simple Kwicks effect for Mootools, now you can have it too.

The Kwicks for jQuery plugin, documentation, and examples can be found at the Kwicks for jQuery Homepage.

So far I've only been able to test it in IE6+, FF2+, Safari 3 for Windows, and Opera 9. If you encounter any issues let me know!

Tuesday, April 8, 2008

Spoiler Alert!

So I might have over dramatized this post a little - but I wanted to let you all know what I've been working on the last couple days...

Kwicks Teaser

Ya... totally awesome. I really just wanted to post this so that I could hear any special requests while I wrap things up. I really love the effect of this menu (see the Mootools home page), but I haven't actually used the Mootools original before. Therefore if there are any annoyances - I don't know what they are. The options that it currently supports are maxWidth, spacing, duration, and easing. If there's anything else you'd like to have control over, let me know now!

Thursday, April 3, 2008

Big Regex Improvements for Firefox 3 Beta 5

Having just posted my latest project, Asciible, that relies heavily (well, entirely) on client-side regular expressions, I've been paying closer attention to efficiency concerns. I don't know if I'd really consider myself to be a Firefox "fan boy", but it is my browser of choice, and I have to admit that I was surprised to find that IE7 was kicking FF2's butt when it came to executing String.replace().

To give you a real world context for my tests, Asciible simply searches through a text input and replaces special characters with their ASCII equivalents. Even all the custom options rely solely on simple String.replace()'s. So in fairness, be aware that this limited test does not represent an overall analysis of the regular expression engine. With that said, in this limited context IE was taking about 10% of the time it was taking Firefox to complete. I was even able to achieve nearly the same efficiency in FF2 by using a simple for loop and a character hash table - yuck.

After noticing this, I went and downloaded Firefox 3, Beta 4 and ran my tests again. I was disappointed to find only marginal improvements.

So time advances until earlier today when I was taking a look at the release notes for Firefox 3 Beta 5, and I couldn't help but notice they were touting some major performance improvements - specifically to the JavaScript engine. So with curiosity in hand I downloaded, installed, and ran my tests again. To spare you the suspense - no, Firefox did not put IE to shame, and in truth it was still the slower of the two. However it did show BIG improvements - and I'm happy to see that the regular expression engine has been given some serious attention. All in all, FF3 Beta 5 was completing the test in less than half the time it was taking FF2. For visualization purposes:

String.replace() comparison for IE7, FF2, and FF3 Beta 5

This is good news, especially since FF3 is still in beta. There's no guarantee that there will be further improvements in the final release, but the optimizations thus far are already outstanding, and certainly enough to leave me with my fingers crossed.

The Slashdot Effect

I suppose this just puts me in a long list of gratefuls to the slashdot community - but I wanted to give an overdue "thank you" to everyone who voted and put my Web 2.0, Meet JavaScript 2.0 article on the front page. Not that you haven't seen 100 such graphs before, but just in case you wanted to see how you utterly destroyed my traffic curve:

The Slashdot Effect

Incidentally, the same article made the front page of Reddit as well. The amount of traffic from Reddit was approximately 10% of that from Slashdot, but thanks to you Reddit folks none-the-less!

Tuesday, April 1, 2008

Introducing: Asciible

AsciibleWell, I've been silent for a little while - but I haven't been lazy! I've been a little slammed for time as of late, but I do have something new to to introduce: Asciible. As far as naming goes, Asciible barely edged out "Ascii Jeaves" - but it's never too late to go back...

In a nutshell, Asciible does all your ascii encoding for you. This obviously isn't the first utility to offer this service, but I have tried to make it the fastest and most flexible. Give it a whirl and let me know what you think!