So here in WA State we have a new law going into effect on 6/12 that’s called the Distressed Properties Law. It will profoundly change how REALTORS® deal with foreclosures. To put it lightly, it has been a big deal for us getting our membership educated on the finer details and protocols called for in this new law.

At Washington REALTORS®, our Communications and IT departments are one and the same. I’m usually involved in bringing certain aspects of our PR campaigns to the web. The Distressed Properties campaign has been no different.

For those of you who attended the Tech Directors Conference in March, particularly those who took part in the Podcasting breakout group, may remember me mentioning the Flash Media Server (FMS) hosting we use for our streaming media. There are a handful of companies out there that specialize in Flash Media hosting… we use a company called Influxis.

So getting back to the Distressed Properties campaign, we produced an hour long DVD for Broker’s to share with agents. We kind of decided as an afterthought that I should prepare a streaming version of the DVD in six chapters for viewing on warealtor.org. So I went ahead and did this last week and officially published it last Thursday (5/29). We have a pretty stripped down account with Influxis that allows for a modest 40 concurrent streams.

So fast forward to Monday morning… we start getting calls from members that they are having issues watching the video. I naively open up my FMS Admin Console and immediately notice our total connections are pegged at 40! We did not anticipate the tremendous response at all! So I was immediately on the phone with Influxis upgrading our account to handle the huge demand. After a quick reboot of my Virtual Host, we were able to host 100 simultaneous streams. Quick and painless for the most part.

But demand kept increasing throughout the day yesterday and overnight so I upgraded again this morning to allow for 200 simultaneous streams! Thankfully working with FMS is pretty easy and Influxis makes upgrading your service a snap as well. It really saved us (me!) a lot of stress.

I realized if we had attempted to host the video locally on our web server it would’ve been toast! There’s just no way it would be able to keep up with demand… we use a Windows 2K3 Server which has no business streaming content! That’s the beauty of using FMS… it’s built specifically to stream Flash files. Not that you can’t host streaming Flash on a generic Linux or Windows server; it can be done but you run the risk of staring down the barrel of a serious crash. Take my word for it.

So next time your association needs to use streaming media, definitely take a look a Flash Media Server. It could save the day and save you a lot of headaches.

You can also buy the FMS software and run it locally if you are so inclined.

Do you have any experiences with Flash Media Server?

Resources:
Adobe’s Flash Media Server Page
Influxis Flash Media Hosting
Flowplayer: Flash Video Player for the Web

I must say I spend the vast majority of my day in Firefox which is probably the case for many web developer types out there. It is the de facto browser for development for a myriad of reasons… adherence to W3C standards (for the most part) being the biggest. But I think what gets me most excited about Firefox is the mind boggling array of add-ons available to developers. The foremost of which, in my opinion, is Chris Pedrick’s Web Developer Toolbar.

This add-on has so many amazing features that I will only introduce you to a few that I use regularly… ones that can save you huge amounts of time in debugging and help make your development cycle more efficient in general.

So yeah, I could gush all day about how much I love Firefox but many of you are likely aware of the power FF packs under it’s hood. Discovering the Web Developer Toolbar a couple of years ago was akin to a spiritual awakening for me… majorly geeky I know.

If you’re a standards practicing developer using CSS to control the presentation of your projects, Web Developer has some amazing features for you. The one that gets my vote for slickest is Edit CSS… which allows you to edit the CSS on your page, or any web page for that matter, in REAL TIME!

I can’t tell you how many times I’ve used this to demo different hex colors or font family’s in a layout. But the fun doesn’t stop there. You can edit whole sections of your layout and see the changes right there without having to edit your style sheet and uploading the changes. Pretty sweet!

A lot of times when I’m randomly surfing and I come across a page that piques my CSS curiosity I’ll often use the View CSS feature to peruse the page’s style sheet(s). This is great to check out what sorts of techniques other folks are using in their CSS… essentially it can be a nice educational tool.

Lets move on and look at Web Developer’s image features…

Taking a look at the image menu, you can see what’s at your fingertips. The feature I use most is View Image Information. It’ll display every single image on a given web page and inform you of its properties… including height, width, file size and any alt properties.

Again not only is this useful on your own projects but seeing how other sites are sliced and diced with images is a great learning tool. One other image feature worth mentioning is Replace Images With Alt Attributes. This’ll allow you to toggle on and off all image content in your page to check, for example, how things shape up in a non-visual web browser… like one a sight-impaired user may use to view your page.

Another very powerful Web Developer Toolbar feature within the Information menu is Display Element Information. This is what sold me when I first started using Web Developer.

Essentially you can think of it as a DOM inspector sort of deal that traverses the DOM for each individual block level element on your page and displays the relationships with its parent and sibling elements. If you look above the tab bar in the photo you’ll see a the box that displays the cascade beginning at HTML and traversing all the way down to your selected element. In addition, a dialogue box (the yellow box in the photo) will appear and tell just about anything you’d want to know about any element in your page. Way cool!

Remember the Edit CSS feature I told you about? Well a complementary feature also exists for HTML, appropriately called Edit HTML which is accessible under the Miscellaneous menu.

This also lets you edit your HTML in real time and preview changes without messing with your text editor and ftp client. It’s kind of similar to the “Try-It-Yourself Demos” over at W3Schools. So if you’ve used that before you’ll be right at home with Edit HTML in Web Developer.

Finally I’d like to touch on the window resizing features in Web Developer. Clicking on Resize, you’ll be presented with options to resize your browser window to an exact width and height. A fresh install of Web Developer will come with the option to resize to 800×600… the old school web design resolution standard. I added 1024×768 as that is the resolution I design for these days.

This feature is so simple yet so powerful that I can’t believe this isn’t a standard feature on all web browsers. Anyway you can easily create any resize dimensions you want by clicking Edit Resize Dimensions… and going through the set-up. You could also theoretically set up the browser window to roughly mimic the size of a mobile device, like an iPhone or Blackberry. The resize feature in conjunction with the Display CSS By Media Type feature (allowing you to view your Mobile Style sheet) can really help when optimizing for mobile devices. The iPhone / iPod Touch however are changing things for the better as the Safari browser on those devices completely ignores Mobile style sheets and basically displays as a mini version of a desktop browser. Designing for mobile devices is really tricky… in fact sometimes a plain (x)HTML document is the most effective way to go.

Well this only scratches the surface of what the Web Developer Toolbar is capable of. I’m continually finding new uses for it so I think the best thing to do, like most things, is to just experiment. I’ve found it to be a huge productivity enhancer and it plays a large part in the development of every project I do.

Web Developer is available for Firefox on both Mac and Windows. You won’t be disappointed!

Download Resources:

Web Developer page at Mozilla.org

Chris Pedrick’s Web Developer page

This post is first in a series dedicated to Firefox Add-ons. Hope you enjoyed this first installment.

How do you use the Web Developer Toolbar?

So I don’t know about you but I do a lot of image editing and optimization in my everyday web development tasks. Typically, in times past, I’ve used Adobe Fireworks CS3 and Adobe Photoshop CS3 for these activities. I’m still a heavy Fireworks user (I just love the CS3 update) but sometimes I want to do some quick and dirty editing without having to deal with the overhead of a desktop app (Photoshop I’m looking at you!). Enter Picnik.

So what is Picnik?

Well it’s an online photo editor with easy to use but powerful editing tools, all from a user-friendly interface in your web browser. All you have to do to get started is upload an image.

I first found out about Picnik about this time last year. Bitnik, the company behind Picnik, is a small operation based in Seattle run by a few ex-Microsoft employees. In the short time they’ve been around Picnik has gone through some pretty awesome changes. When I first started using it, it was pretty basic and still in beta. You could resize, crop, adjust color balance, apply a select few filter effects, apply a border, and a few other useful things.

Throughout 2007 they kept enhancing Picnik to the point that it was beginning to rival some of the most major features of Photoshop. All while remaining user-friendly and easily accessible for even a neophyte. Here’s a screenshot:

As you can see I used it to (partially) create the header image for realtortech.org.

Some techniques in Picnik are just a whole lot more straightforward than Photoshop. For example if you want to create nifty rounded corners on an image all you have to do is select “Rounded Edges” from the Frames menu:

Pretty darn easy and a far cry from the annoyance of accomplishing the same technique in Photoshop.

Probably the coolest thing about Picnik though is it’s extension for Firefox (and now Internet Explorer). This allows you to right-click on any image you find on the web and load it in the Picnik app for editing!

There are so many things you can do and this really only scratches the surface of Picnik’s functionality.

Many of Picnik’s features are available for free but to use some of the extended features you need to sign up for a premium account, which I would highly recommend. It’s cheap too…only $24.95 a year.

Overall, Picnik is a great workflow enhancer and can save a lot of time when you need to do basic to moderately advanced image manipulations.

What are your favorite alternative image editing tools?

It pretty much works as advertised. Like most WP plugins it’s easy to install and activate. To bring it up in your sidebar, you use the nifty template tag:

< ?php sidebarlogin(); ?>

Simple enough. Though it does have one quirk I’d like to point out. When you login with Sidebar Login, it has a pleasant “welcome” greeting, followed by your Username. Like so:

Kinda silly, huh? I think a better behavior for this would be to to use your “Display Name” so it’s a bit more personalized. So instead of in my case displaying “Admin,” it’ll display “Stevie,” which I have setup in the WP Dashboard:

All it takes is a little consultation with the WordPress Codex to produce this helpful document, Function Reference/get userdata to find the info we need.

In the code to the plugin, on or around Line 26 there you’ll find this:

echo $before_widget . $before_title . __("Welcome "). $user_info->user_login  .$after_title;

What we need to do is change $user_info->user_login to use $user_info->display_name. Here is the complete revised line:

echo $before_widget . $before_title . __("Welcome "). $user_info->display_name  .$after_title;

Enacting this change will now display your “Display Name” after you login. Problem solved:

The documentation for this plugin is not very complete so I did a Google search to see if others had this quandary. Much to my surprise I didn’t find anything so I thought I’d share what worked for me.

Thanks to the documentation at the WP Codex and reading through some PHP code, it was a quick solution. Take a look at the document at WP Codex to further experiment with your greeting.

Also thanks to Mike Jolley and his excellent Sidebar Login plugin!

Update 4/20/2009:
Sidebar Login has been updated so it now uses “Display Name” by default.

SQL Buddy runs in a web browser just like any other PHP app which is pretty cool. All you have to do is download the files, upload them to your webserver, and you’re off and running with pretty much zero configuration. And it’s even compatible with your browsers back and forward buttons!

It’s capable of just about everything that MySQL Administrator can do. I’ve been enjoying its ease-of-use. Definitely a pleasant way to take care of everyday MySQL admin tasks. It’s certainly not as powerful as something like Navicat but admirably does a handful of things well. Take it for a test drive.

Getting started in MySQL Administrator

I presume if you followed my previous article you downloaded the MySQL GUI Tools, if not go ahead and download and install them. When you first open MySQL Administrator you’ll get a login screen:

Where the button says “Skip” above it’ll say “Connect” for you… for some reason while taking screen shots it changed to “Skip.” Weird…

Working on the assumption that this is a fresh install of MySQL, you have not created a password for the “root” user. This is not a problem as you can easily do this after logging in to MySQL Adminstrator. Let’s not forget to tell MySQL Admininstrator where mysql.sock is located… expand “More Options” and put /var/mysql/mysql.sock in the box next to “Connect Using Socket.” So now the login screen should look like this:

Go ahead and hit “Connect” and you’re in:

If you take a look at the icon’s up top you can begin to get an idea of what you can do with MySQL Administrator. You can run backups, monitor MySQL connections, view logs, create new databases and users, and a host of other things. Lets start off by assigning a password to “root” user. A little disclaimer… keep in mind that this is MySQL’s superuser of sorts and some people do not assign “root” a password. So with that out of the way, click on “Accounts” and highlight “root.” As you’ll see all you have to do is type a password in the box, then confirm it in the next box, then click “Save Changes:”

Adding a new MySQL user

Since we’re already in the “Accounts” tab, lets go ahead and create a new MySQL user. All you need to do is press the “Add New User” button which is the first button in the bottom left corner:

So just type in the Login Information and press “Save Changes:”

Creating a new database

So let’s move on and create a new database. Click on “Catalogs” and then the “Add” (aka +) symbol in the bottom left corner:

Name your new Schema (aka database) and press “Ok.” This creates an empty database ready for your next web application! I have a local installation of WordPress on my MacBook Pro so here is what that “Schema” looks like:

So cool! Now we need to go back and assign privileges to the user we created in the previous step so the database can be accessed in an app.

Assigning privileges to a user

So go back to the “Accounts” panel, expand the user you previously created, and click on “Schema Privileges.” Directly underneath the User are a list of “hosts.” Since we’re just working locally, we’ll assign privileges to “localhost.” But feel free to add privileges to the other “hosts” for this user. This is probably the most confusing task you’ll do with MySQL Administrator so pay close attention. Highlight “localhost” and the “schema” you want to add user privileges to:

Now you need to select all (shift + click) the privileges you want to grant under “Available Privileges.” I just went ahead and gave myself all available privileges:

Next you’ll need to click the “Grant” button which is the one that has the “less than” character <. Now the privileges you assigned will be in the “Assigned Privileges” column:

This was a head scratcher for me when I first started using MySQL Administrator. If you ever run into any difficulties just hover over the area you have questions about and usually a tool tip will appear. Now your database is ready to tag team with PHP in your web app of choice!

Well this should get you off and running with MySQL Administrator. I really only scratched the surface of things that can be done. Just click around and check stuff out… that’s pretty much how I learned. Have fun…

It’s all pretty easy to do but requires a little attention to detail in parts. So lets get started.

Most of the files we’ll be working with are actually hidden from Finder. If you use a text editor like Coda, BBedit, Text Wrangler, or TextMate you can choose to have hidden files “shown” so you can find them in your file structure. I personally use Coda so all that you have to do is click on the “View” menu and choose Show Invisible Files, as illustrated below:

You can also run this simple Terminal command to “show” all hidden folders in Finder:

defaults write com.apple.finder AppleShowAllFiles TRUE

Then restart Finder by typing the following:

killall Finder

You should now be able to see all hidden files.

PHP

To enable PHP browse to Apache’s http.conf file located in /etc/apache2/httpd.conf

Find this line:

#LoadModule php5_module libexec/apache2/libphp5.so

All you need to do is uncomment the line by removing the hash # symbol.

LoadModule php5_module libexec/apache2/libphp5.so

Now save http.conf. Don’t be alarmed if it asks for your system password… this is normal.

PHP 5.2.6 is the version shipped with Leopard. All the most popular extensions are already activated so you should be good to go. However if you need some of PHP’s extended features you may want to consider rebuilding PHP from source code as I’ve read the version that ships with Leopard has been problematic for some. I’ve never had any problems myself but it’s something to look out for. All relevant PHP settings are in the php.ini file. I won’t be covering any tweaks to that file in this article but you should be aware that it exists. By default, Leopard has an empty configuration file but provides a file which can be used as a template. From a new terminal window, type:

sudo cp /etc/php.ini.default /etc/php.ini

This creates your php.ini file, which is located in /etc/php.ini for your future reference.

You’ve now enabled PHP so lets move on to Apache.

Apache

Our friends at Apple were kind enough to ship a very modern version of Apache 2.2.6 for our development work. Kudos! To start up Apache click on the “Sharing” preference pane in System Preferences and enable “Web Sharing” like so:

You can also use the following command the start Apache from Terminal:

sudo apachectl start

You’ll be prompted for your system password. Type it in and press enter.

If you need to restart Apache, this will do the trick:

sudo apachectl restart

Keep in mind any editing you do to the http.conf or to the php.ini will require a restart of Apache. You can use the above command or simply restart “Web Sharing” in System Preferences… it’s up to you.

Testing PHP

So now hopefully if everything has gone according to plan, we’ll see some fruits of our labor. Go back to the “Sharing” Preference Pane in System Preferences and click on the URL/ IP Address below “Your computer’s website.” If all goes well you’ll see a page that says “Test Page for Apache Installation.” You can also type http://localhost/ in your browser which will take you to the same place.

Now in your text editor create a PHP file and type the following code:

<?php phpinfo(); ?>

Save it in /Library/WebServer/Documents/ (start from the top level directory of your hard drive, not the Library directory in your home directory) with the name test.php.
Now type http://localhost/test.php in your browser and you should see something like this:

Great success!

Setting up a personal website and virtual hosting

If you’re the curious type and tried to click on “Your personal website” in the Web Sharing panel you may have noticed that you were greeted with a “Forbidden” message. So lets go ahead and set it up so you can serve up files from your “Sites” folder. Open up your text editor and create a file named after your “Home” folder. In my case it would be StevieBenge.conf. This file will live in /etc/apache2/users/. You’ll need to replace StevieBenge with the name of your “Home” directory. I’ve heard reports that this file is created automatically on new installs of Leopard but I had to create mine manually. Add the following code to the .conf file:

<directory "/Users/StevieBenge/Sites/*/">
    Options Indexes MultiViews FollowSymLinks
    AllowOverride All
    Order allow,deny
    Allow from all
</directory>

Like above, replace StevieBenge with the name of your “Home” directory. Save the file. This will allow Apache to serve files out of your “Sites” folder. Sweet! You’ll also need to restart Apache for this to take effect.

Moving right along, lets set up Apache for virtual hosts. Virtual hosts are essential if you want to serve multiple websites from your “Sites” folder. You can choose pretty much any “domain” name you want or mirror any production sites you have hosted on a live server. I like to name all of my local development sites with the extension .dev to keep easy track of things. Getting virtual hosts to work in Leopard was a huge stumbling block for me because of a lot of misinformation I read around the internet. I was was really happy to finally get this working. And as you’ll see it’s pretty straightforward.

So to get started, browse to /etc/hosts and add the following to the end of the file:

# Local aliases
127.0.0.1 steviebenge.dev

Remember to change steviebenge.dev to the name of a site in your “Sites” folder. 127.0.0.1 is an IP Address that tells your Mac that your site is hosted locally. The site will only be accessible on your Mac. Now we’ll need to reopen the.conf file we created earlier in /etc/apache2/users/:

<directory "/Users/StevieBenge/Sites/*/">
    Options Indexes MultiViews FollowSymLinks
    AllowOverride All
    Order allow,deny
    Allow from all
</directory>
 
NameVirtualHost *:80
 
<virtualhost *:80>
    DocumentRoot /Users/StevieBenge/Sites/steviebenge.dev
    ServerName steviebenge.dev
</virtualhost>

Again make sure to change the directory structure above to reflect your “Home” folder and the folder within your “Sites” folder you want to serve files out of. Restart Apache for the changes to take effect. So to test it out and make sure everything’s working properly, go ahead and move the test.php created earlier into your new directory in your “Sites” folder. If it’s successful you’ll again see:

Too add more virtual hosts run through the above steps again. Simple as that!

MySQL

Now here is where the fun begins. It’s odd that Apple didn’t include MySQL with Leopard as it’s pretty much synonymous with PHP. Anyway, you have a couple options for installing MySQL on Leopard. You can roll your own and compile and install from source code or use MySQL’s package installer for Leopard. I won’t discuss how to compile MySQL here but I did find an excellent tutorial on how to do this over at Dan Benjamin’s Hivelogic site. I came pretty close to giving this a shot but I opted for the MySQL package installer. Dan brings up many salient points on why it’s beneficial to compile your own install in his tutorial, so I’d highly recommend checking it out.

So head over to the MySQL downloads page and grab a copy of the Mac OS X 10.5 (x86) installer (currently 5.0.67). You can also optionally download the MySQL GUI Tools, which I would recommend as that is how I prefer to administrate MySQL. The Mac Installer is labeled MAC OSX 10.4 (Universal binaries) but, in my experience, it will work without issue on Leopard.

Install MySQL and the GUI Tools. There’s also a Preference Pane that you can install that allows MySQL to be stopped and started from System Preferences. Go ahead and install that as well.

After you install the MySQL Preference Pane, find it in System Preferences and start MySQL like so:

If you prefer starting MySQL from Terminal, you can do so with this command:

sudo /usr/local/mysql/support-files/mysql.server start

And you can use this command to stop MySQL:

sudo /usr/local/mysql/support-files/mysql.server stop

Now we’ll need to put the mysql.sock in the proper directory so MySQL can communicate with PHP.

Getting MySQL and PHP to communicate

The default location of mysql.sock is in the /tmp/mysql.sock directory. We’ll need to change this to /var/mysql/mysql.sock as this is where PHP will look for it.
So first off, create a my.conf (or in this case my.cnf) file in your text editor and save it as my.cnf in the /etc folder with the following code:

[client]
socket = /var/mysql/mysql.sock
 
[mysqld]
socket = /var/mysql/mysql.sock

Next move mysql.sock to it’s new directory by typing the following code in a Terminal window:

sudo mkdir /var/mysql
sudo ln -s /tmp/mysql.sock /var/mysql/mysql.sock

Believe it or not, that’s pretty much it. One thing to keep in mind is the MySQL GUI Tools will still look for the mysql.sock in the old location so when you log in to MySQL Administrator enter /var/mysql/mysql.sock in the “Connect Using Socket” box under More Options:

Now you’re ready to create your first MySQL Database. The MySQL Administrator makes this really easy, which I will cover in a future article. You can also administer your MySQL databases from Terminal. As I stated earlier, I prefer the GUI Tools but learning how to do things from Terminal is a useful skill to have. It’s totally up to you.

Bonus Information

I’ve read that you can also deal with the mysql.sock issue by editing the mysql.default_socket = line in your php.ini file to reflect the location of mysql.sock. I chose not to do this, but it may work for others

You may want to to change php.ini to report all PHP errors while you are in development. This can be done locating the following line:

error_reporting = E_ALL & ~E_NOTICE

And changing it to:

error_reporting = E_ALL

This is fine in your local development setup but of course not advised for a production server.

At the beginning of this article I illustrated how to “show” hidden files in Finder. Here’s that Terminal command again:

defaults write com.apple.finder AppleShowAllFiles TRUE
killall Finder

You can also “hide” those same hidden files with this command:

defaults write com.apple.finder AppleShowAllFiles FALSE
killall Finder

Another great resource for an all-in-one development setup is MAMP. Using MAMP negates the need to do any of the above tweaking as it has its own versions of Apache, PHP, and MySQL. It’s perfect for those that want to get up and running quickly with a minimum of fuss.

Conclusion

Well this should get you started with PHP, MySQL, and Apache in Mac OSX Leopard. My inspiration for writing this article was to combine a lot of the information I read from other sites while getting my MacBook Pro set up. Many of the articles I came across were written around the time Leopard was released last Fall so some of the information was a bit out of date. Not that any of the above methods are terribly original on my part, but I’d like to credit some of the sources that helped me:

procata.com: This was the best resource I found and well worth checking out as it shows you how to install the PEAR extension. Has some great tips that I didn’t cover here.

Installing MySQL on Mac OS X: MySQL’s own how-to guide.

adactio.com: Jeremy Keith’s guide.

foundationphp.com: Excellent screen shots with this PHP and Apache tutorial.

Thanks for reading and check back as I’ll be writing more articles about working with PHP, MySQL, and Apache. Feel free to keep the discussion going in the Comments below.