Ralph Whitbeck - Blog

My trip to Toronto and Stack Overflow DevDays 2009

Ralph Whitbeck — Mon, 26 Oct 2009 02:06:32 GMT

On Wednesday, October 21st, 2009 I took the Amtrak train from Niagara Falls, NY to Toronto, Ontario, Canada. I was going to speak at Stack Overflow DevDays in Toronto on Friday October 23rd.

I got there an extra day earlier then needed because of the time the train was going to get in on Thursday night I would of missed the speakers dinner. But this extra time worked to my favor as I needed the extra time to work on finishing my slides and example code I was going to demo. But I really wanted to go to the NHL Hall of Fame since it was only a block away and I had the chance to take my picture with Lord Stanley's cup.

I spent the afternoon finishing up my slides and I ran through the presentation to make sure the timing was right. I was able to go through everything I wanted in 50 minutes.

That evening was the speakers dinner. I was looking forward to the dinner cause this would of been my first opportunity to meet Joel Spolsky. But I this was not to be. Why? Cause Joel forgot his passport and had to fly to NYC to pick it up. I did however meet all the speakers and four developers from FogCreek Software. One of which I learned was the intern (that is now working fulltime) who worked on StackExchange.com (the paid hosting version of Stack Overflow). We spent a couple of hours geeking out telling stories. The best story was of the assless chaps but I'll let Joey deVilla tell you that story.

So Friday came along and I was really nervous in the morning. Joel gave his keynote and as I sat through a couple more talks I was starting to relax. After lunch was my talk.

I've got to say Carsonified really made me comfortable before the talk. They set up my laptop and made sure it worked on the projector system. They even loaned me a Logitech slide switcher with a laser pointer. This made it so that I could walk away from my laptop and walk around the stage. I felt really comfortable after just a few minutes. I got a couple of laughs where I was expecting laughs in my slides. The 32" Viewsonic in the middle of the stage was great for letting me see my slides without being next to my laptop. It really made it much easier to talk.

In comparing this talk with my jQuery Conference talk I felt I did 200% better. I didn't read from my slides like I did in Boston. Everything flowed right out of me. Now that's not to say that I did a perfect job cause there was plenty of room for improvement.

I've been monitoring the reviews on twitter and the blogs and I finding people either really got a lot out of the talk or they picked up one or two things. I've only seen a couple of constructive criticism points for my talk. The point is that I felt I learned a lot from my jQuery Conference talk and I applied it to this talk and I think the results really show.

After the conference I was able to take a picture with Joel Spolsky.

I also took a photo with fellow speakers Joey deVilla (right) from Microsoft and Reginald Braithwaite (left).

After the conference the speakers, Joel, some attendees and I went to a local bar C'est What? to have a drink and we had great conversations about technology. I had the chance to talk with Joel one-on-one and got some advice on how to record podcasts, told him I'd love to hear more Israeli Army stories on the podcast and told about how I would love to know what question or answer a badge was referring to when I receive it in Stack Overflow.

I had an amazing time in Toronto and meet some great developers.

Stack Overflow DevDays Toronto - My Slides

Ralph Whitbeck — Sun, 25 Oct 2009 03:14:59 GMT

Here are my slides from Stack Overflow DevDays in Toronto.

jQuery For Developers Stack Overflow Dev Days Toronto

View more presentations from Ralph Whitbeck.

Please rate my talk at Speaker Rate

It's October - that means it's playoff time

Ralph Whitbeck — Fri, 02 Oct 2009 13:47:50 GMT

Warning! The following blog post is non-technical.

It's October and that means it's just about time for the Major League Baseball Playoffs to begin. This year is particularly exciting for me since the New York Yankees are going into October on fire. Their first opponent? The Boston Red Sox! Great way to start things off.

Flickr posted a bunch of old photo's of playoff past and posted the following photo:

It's such a great photo provided by the Library of Congress. During a game on July 6, 1924, Babe Ruth collided with the wall as he went for a foul ball. He was knocked out and was unconscious for five minutes.

There is just so much going on, you need to look at it for a while just to take it all in. Obviously you have ruth sprawled out on his back with what I assume both team doctors attending to him. One doctor is got a wet clothe on Ruth's face. I would assume he got the clothe from the Coke vendor who is kneeling down with them and has his basket of coke sitting on the bullpen's bench.

Now look at the wall he crashed into. It's solid concrete, no padding what-so-ever. No wonder he was knocked out. And look how much room there isn't for foul territory. He must of been hauling it to try make a play that was apparently borderline fair/foul.

Now let's look at the crowd. Apparently, the right field corner was designated for color folks. I can only see three white guys in the stands. Plus everyone is dressed in a tie and straw hats. Just goes to show it was certainly a different time back then.

There is so much that's different culturally for a game that hasn't really changed much since then. What do you like about this picture?

jQuery Conference 2009 - Summary

Ralph Whitbeck — Wed, 16 Sep 2009 15:25:23 GMT

I recently spoke at jQuery Conference 2009 in Boston on September 12, 2009. I gave the Beginning jQuery talk to an overflowing room of about 120 people. The highlight of my talk was letting two high school students Jamie Gillar and John Cicolella come on stage with me and demonstrate their school project, which they built using jQuery and jQuery UI plugins.

I got some really great feedback from my talk and am using some of the more constructive feedback as a little of what not to do next time. I think less slides and more code is the key. I walked the audience through my code example of pulling twitter into your web page using jQuery and JSON based on a previous blog post.

You can see my slides on slideshare:

jQuery For Beginners - jQuery Conference 2009

View more presentations from Ralph Whitbeck.

It was an exhausting week but it was the most fun I’ve had in quite some time. The first two days, Thursday and Friday, were designated jQuery Development Days in which we held meetings to discuss many topics that involved the jQuery project.

Topics like:

The Plugin Respository
jQuery UI Project
The Software Freedom Conservancy
How to spend donations (hint: more conferences)

That was followed by two days of the conference which were jammed packed with talks and networking. In addition to all the great jQuery team members I meet like Richard D. Worth, Brandon Aaron, Jörn Zaefferer, Scott González, Rey Bango, Karl Swedberg to name just a few, I also met some interesting people like Jonathan Snook (Squarespace), Micah Snyder (Digg), Stephen Walther (Microsoft Senior Program Manager for ASP.NET) and Steve Souder (Google) (who gave me a personal demonstration of his new tool Sprite Me before his talk Sunday morning, it looks amazing).

Rey Bango and I

Karl Swedburg and I

I also got to hang out with some guy named John Resig. I guess he’s important or something ;-). Seriously though, I’d like to thank John for the Conference and the hospitality he showed to the jQuery team during the time we were in Boston.

So what was announced at jQuery Conference regarding the jQuery project?

The source code for jQuery core ismoving from Subversion to Github.
jQuery will soon be a part of Software Freedom Conservancy to help protect the project going forward. This will move the copyright out from under John Resig’s name and into the Conservancy to make the jQuery project truly open source. This will also give jQuery the benefit of a voting counsel on top decisions, no one person will hold the finances and the Conservancy will now offer free legal advice.

The jQuery Team members sign the documents to join the Software Freedom Conservancy
Announced a revamped and simplified plugin repository. This is jQuery teams number one priority and is targeted to for release by end of year. (I will personally be working on the plugin repository)
jQuery 1.3.3 is close to release and already boasts overall speed improvements of 3.5 times faster, looking to land of couple more live events like blur and submit before release.
jQuery is planning version 1.4 to ship a stripped down version of jQuery for mobile devices. The mobile device will only strip out the Internet Explorer specific code to make the file smaller. It will still contain all the same functionality as the full version.
jQuery team members Mike Hostetler and Jonathan Sharp have formed a company called AppendTo to provide paid support of jQuery. This should help out Corporations who are holding off on using jQuery due to the lack of official support.
jQuery Infrastructure costs will be ~$0 starting in October. Media Temple has graciously stepped up and is offering to build the project a server cluster and is providing their CDN for the project to use. Current infrastructure costs run about $1600/month and rising with Amazon Cloudfront. A cost that was totally unsustainable due to the growth of jQuery.
Plugin authors will soon have the ability to host their plugins on jQuery’s CDN.
jQuery will soon help organize and sponsor basic funding for local jQuery Meetups/Groups around the world.
The jQuery Conference will now be held four times next year in Boston, London, San Francisco and Online.
Support that jQuery currently offers on Google Groups in the group jQuery-en will soon be transitioning to a forum site that will be set up. Software is currently being evaluated to meet the needs of supporting users effectively and efficiently.

*Photos by Jörn Zaefferer

PHP 101: Uploading a file

Ralph Whitbeck — Tue, 04 Aug 2009 23:51:42 GMT

I am doing some freelance work with PHP and I am posting these for my future reference. This is basic PHP 101 stuff here.

The HTML Form:

 <form enctype="multipart/form-data" action="upload.php" method="post">
    Please upload your file:     <div>        
<input id="fileUpload" name="fileUpload" type="file">        
<input id="submit" name="submit" value="Submit" type="submit">    
</div> </form>

The key part to the form is enctype="multipart/form-data" which tells the server to expect a file on postback.

The upload php file to process the file:

 <?php     $target_path = "uploads/";

    $target_path = $target_path . basename( $_FILES['fileUpload']['name']);
    if (isset($_FILES['fileUpload']))     {        
if(move_uploaded_file($_FILES['fileUpload']['tmp_name'], $target_path)) {            
echo "The file ".  basename( $_FILES['fileUpload']['name']).            
" has been uploaded";              
} else {                  
echo "There was an error uploading the file, please try again!";              
}         } ?>

First we test to see if fileUpload has a value if so it attempts to save the file to the target path. If all goes well we get a message that the upload passed. If not a message that there was a problem.

403 Permissions Denied on your users Site in OSX

Ralph Whitbeck — Mon, 13 Jul 2009 14:27:10 GMT

I came into work today and turned on web sharing and got a 403 Permissions Denied error.

I followed the typical procedure to fix this, to no avail.

The fix was to set the user home directory permissions so everyone had read access. It currently was set so everyone had no access.

Hope that helps someone someday.

Apples Developer Connection Documentation is buggy

Ralph Whitbeck — Sun, 12 Jul 2009 17:40:09 GMT

I was working this morning on setting up a LAMP environment in OSX. I found this tutorial from Apple's Developer Connection. As I haven't set up PHP on a Mac in quite a while i felt I needed a refresher.

It was going good till I got to the section "Enabling PHP in Apache." They outline a script you need to run but to a new Mac user this isn't readily apparent how to do. Obviously this is geared towards the advanced Mac Developer even though the topic is for a beginner. I finally deduce from past experience that this needs to be run like a batch script on Windows. I do a search on Google for "shell scripting in osx" and found that I needed to run "sh filename.sh" in the terminal window. So I created a file and copy/pasted the script into the file, saved and switched to the terminal. Here is the script I pasted, DO NOT RUN THIS:

set admin_email to (do shell script "defaults read AddressBookMe ExistingEmailAddress")

user_www=$HOME/Sites

filename=php-test

user_index=${user_www}/${filename}.php

user_db=${user_www}/${filename}-db.sqlite3

# NOTE: Having a writeable database in your home directory can be a security risk!


conf=`apachectl -V | awk -F= '/SERVER_CONFIG/ {print \$2}'| sed 's/"//g'`

conf_old=$conf.$$

conf_new=/tmp/php_conf.new


touch $user_db

chmod a+r $user_index

chmod a+w $user_db

chmod a+w $user_www


echo "Enabling PHP in $conf ..."

sed '/#LoadModule php5_module/s/#LoadModule/LoadModule/' $conf | sed

"s^you@example.com^<b>\$admin_email</b>^" > $conf_new


echo "(Re)Starting Apache ..."

osascript <<EOF

do shell script "/bin/mv -f $conf $conf_old; /bin/mv $conf_new $conf;

/usr/sbin/apachectl restart" with administrator privileges 



EOF

The first time I run it I am asked for the administrative password which I provide. After I see that the script had a few errors. But the instructions on the tutorial say I should be able to create phpinfo page and see the phpinfo data. I create the file try to run it and the web server isn't running.

I do some troubleshooting and eventually figure out that httpd.conf has not no data in it anymore. There is an older file with a version number attached but I can't copy or write to httpd.conf cause I don't have su priv on this computer.

I go back to the script file and try to figure out what happened. First I need to fix my apache. I hack together a shell script to fix my httpd.conf and I come up with this:

osascript <<EOF

do shell script "/bin/mv -f /private/etc/apache2/httpd.conf.9002 /private/etc/apache2/httpd.conf" with administrator privileges

EOF

This restores the original httpd.conf that was made as a back up. Retry to access a file in apache and it serves it. Success! At this point I want to make my own backup file of httpd.conf in case the script screws it up more.

osascript <<EOF

do shell script "/bin/cp -f /private/etc/apache2/httpd.conf /private/etc/apache2/httpd.conf.bak" with administrator privileges

EOF

So why did httpd.conf have no data in it? Looking over the script it seems that it is uncommenting the line for the PHP module and sending the output to conf_new. But it seems the file specified in conf_new is never created in the script. So when the final line is called to copy the new file over httpd.conf there is nothing to copy. I solve this by adding another line: touch $conf_new

Now let's tackle the script, the first error I see is that a file doesn't exist: chmod: /Users/ralph/Sites/php-test.php: No such file or directory

The file doesn't exist apparently touch $user_index isn't included in the script. Which is funny cause nothing else in the script requires the $user_index. The script is basically just trying to create a php file. I also add touch $user_index to the script.

Next error is: s^you@example.com^<b>$admin_email</b>^: No such file or directory

I wasn't quite sure what was causing this error and I couldn't solve fixing it but I determined that it was trying to replace the default admin e-mail with the one I specified earlier. I took out that part of the command. So the new line now looks like: sed '/#LoadModule php5_module/s/#LoadModule/LoadModule/' $conf > $conf_new

The final script looks like this:

user_www=$HOME/Sites
filename=php-test
user_index=${user_www}/${filename}.php
user_db=${user_www}/${filename}-db.sqlite3
# NOTE: Having a writeable database in your home directory can be a security risk!

conf=`apachectl -V | awk -F= '/SERVER_CONFIG/ {print \$2}'| sed 's/"//g'`
conf_old=$conf.$$
conf_new=/tmp/php_conf.new

touch $user_index
touch $user_db
touch $conf_new
chmod a+r $user_index
chmod a+w $user_db
chmod a+w $user_www
chmod a+w $conf_new

echo "Enabling PHP in $conf ..."
sed '/#LoadModule php5_module/s/#LoadModule/LoadModule/' $conf > $conf_new

echo "(Re)Starting Apache ..."
osascript <<EOF
do shell script "/bin/mv -f $conf $conf_old; /bin/mv $conf_new $conf;
/usr/sbin/apachectl restart" with administrator privileges

EOF

I feel like the script written in the Developers Connection article was just written and not tested. But what is really concerning is there is no way to provide feedback on the article on the page. MSDN provides a way on every page asking if the tutorial was helpful and provides an area to comment.

Needless to say I did not finish the tutorial.

Why did Sci Fi choose the name SyFy?

Ralph Whitbeck — Fri, 10 Jul 2009 13:29:49 GMT

If you know me then you know that I am huge fan of the Sci Fi Channel, mainly for Battlestar Galactica. But three months ago they announced a rebranding and earlier this week they executed the name change.

Yesteday, I wrote about why they choose to rebrand on BrandLogic Dialogue:

CNN.com quotes Dave Howe, the president of Syfy, on the reasons why the channel needed the rebranding:
“We needed a unique and distinct brand name that we can own for the future, that works in the multiplatform, on-demand world,” he said, adding that “Sci Fi” isn’t a brand name, it’s “a genre name.”
“Syfy,” he said, “gives us a unique brand name.
“The last thing we want to do is alienate our core audience,” he added. With the new name, shows such as “Galactica” can be exposed to a wider audience, one not scared away by all that “Sci Fi” connotes (”space and aliens and the future,” in Howe’s words).
Howe continues on how the name was chosen:
“This was a two-year exercise,” he said. The new name, he says, needed to be usable all over the world in Internet URLs, brand extensions and merchandising, and “the only way to do that is to create an empty name.
“We explored them all,” he said. “We wanted a word that was uniquely ours,” while not straying too far from the sound of “Sci Fi.”

The post has spurred a good discussion on people's opinions of the name change even spurring a separate blog article from the Technology Viewer blog. What are your thoughts on the name change?

Transparent PNG's and IE 6

Ralph Whitbeck — Mon, 22 Jun 2009 17:07:45 GMT

IE 6 doesn't have native support for the Alpha channel that make PNG's transparent. This can make PNG's look very ugly in IE6 when they are transparent.

Asking around the office today, I got a cool solution that uses IE's proprietary behavior css attribute to call a Compiled HTML document that applies filters to the PNG to behave correctly.

It's pretty easy to install:

How To Use
Follow these simple steps to add this to your page:
Copy and paste iepngfix.htc and blank.gif into your website folder.
Copy and paste this into your website's CSS or HTML:
<style type="text/css"> img, div { behavior: url(iepngfix.htc) } </style>
That CSS selector must include the tags/elements on which you want PNG support -- basically, give it a comma-separated list of tags you use. It must also include the correct path to the .HTC relative to the HTML document location (not relative to the CSS document!). For instance, yours may look like this:
<style type="text/css"> img, div, a, input { behavior: url(/css/resources/iepngfix.htc) } </style>
If your site uses subfolders, open the .HTC file in a text editor like Windows Notepad and change the blankImg variable to include a correct path to blank.gif like so:
var blankImg = '/images/blank.gif';
Again the path is relative to the HTML file. Otherwise, you will see a "broken image" graphic!

Selecting the fastest selector for jQuery using Firebug Profile

Ralph Whitbeck — Tue, 16 Jun 2009 14:47:07 GMT

Today I needed to select all the h3's within a div and set a margin-top property on all items in the returned set except the first.

I came up with a few ways to return the results I was looking for (here are some jQuery examples):

$("#div h3").slice(1);

$("#div h3:not(:first)");

$("#div h3:gt(0)");

I've been reading a lot about how your selection can be optimized based on how you structure your query. So I ran each query through Firebug Profile to see which selector query was the fastest. Load the page, click on the "Profile" button at the top, run your query in the console, click the "Profile" button again to stop the profile. You'll get the time it took to execute that statement. Here are the results for each:

$("#div h3").slice(1);3.305ms

$("#div h3:not(:first)");0.705ms

$("#div h3:gt(0)");2.347ms

It's clear from my testing that the second query is 2-3 times faster then the rest for my page and my specific uses. Your specific profile times may vary based on HTML structure and selector query. So it's always good practice to test the speed of your selector if there is more then one way to get your results so that you are using the most efficient selector for your situation.