Firelit Design

jQuery UI & Disabling Text Selection on Click

2012-01-25T19:11:00.000-08:00

Part of making a wonderfully interactive website with jQuery is the process of making certain elements clickable. Sometimes that means making a portion of text interactive without using the regular means of a hyperlink. One problem comes up when doing this, however. When a person clicks rapidly the browser usually interprets this to mean you want to highlight a word or paragraph. How do you stop this?Call .disableSelection() on the element with jQuery. This will disable text selection. For example:


$('#elementId').disableSelection();

It actually binds an event on the object which prevents the default behavior. It is an undocumented feature but it is awfully handy. Remember: it requires jQuery and jQuery UI as it is part of the jQuery UI core.

Synchronous AJAX with JQuery

2012-01-13T20:21:00.000-08:00

Yes, you read that right. I just didn't think anyone would understand SJAX.

AJAX, if you don't know, stands for Asynchronous JavaScript and XML and is the term widely applied to sending HTTP POST and GET requests from client-side javascript. In JQuery, that would be $.ajax() or $.getJSON() or any one of the other similar variations.

The question that I had, to continue with the topic of this post, was, How do I do preform a synchronous AJAX call? That is, how would I treat an AJAX call as if it were inline javascript. The JQuery functions I mention above have a parameter where you would specify the call-back function that would run after the requested document is fully retrieved by the client, hence the response and call back are run asynchronously, or whenever the response has been received from the server. Then, how do I make this synchronous so that the code after the call does not execute until the javascript GET or POST is complete.

Well, it is pretty darn easy, I've found. There is a single parameter, "async," that you set to false. That's it. I've written this whole blog post and the answer is a one-word parameter: async.

$.ajax(ajaxurl, {
     async: false
});

So, now you know how to do SJAX. ;)

Web App Framework Review: Sencha Touch, jQuery Mobile & more

2011-12-01T08:43:00.000-08:00

I was recently evaluating the different frameworks for developing mobile web apps. I created an app in Sencha Touch, jQuery Mobile and JQTouch.(I also did a responsive web site using media queries, but this isn't so much a framework.) Here is my summary.

Sencha Touch is very different than anything I have used before. All of the content of the web app is built with JS. You code everything with JS. This causes things to be a bit janky, especially on older smart phones that need more time to process all that script. The biggest drawback, however, is that the online documentation is very difficult to use, especially for newbies. They have a few video tutorials online, but some are outdated and many are inconsistent (some use MVC architecture, for instance, which really throws you off if every other tutorial doesn't). All-in-all, if you are a web developer by trade and are used to manipulating DOM-level elements, this is a very frustrating framework to try to learn. Be ready to spend a serious amount of time on the learning curve. (Also, you have to pay Sencha if you want the latest and greatest version of their framework.) After attempting a few different projects with Sencha Touch over months, I grew frustrated and threw in the towel, even outsourcing the remainder of one project to India.

jQuery Mobile is well documented and has plenty of example code for you to follow along. You develop your web app as you would a website and use different data-xxxx attributes on HTML objects to describe how objects should be styled or used. Once you have your structure, jQuery Mobile takes care of the rest, making everything look nice and employing fancy animated screen transitions. There is a small learning curve when getting started, nothing compared to Sencha Touch. And last but not least, jQuery Mobile is FOSS and appears to be in very active development. I was very happy with the example projects I put together with jQuery Mobile. They were easy to finish and worked well.

JQTouch, when I evaluated it, didn't appear to be in active development. The documentation was a little sketch and I found the demo/example code and the documentation disagreed on how things should be implemented. It took some trial and error to find out which methods were correct. I wouldn't recommend this framework for development unless they have taken great strides in recent months.

I want to mention responsive web design because it has great potential. While it doesn't give you the web app feel and isn't really a web app framework, it is definitely a good way to go if you need to develop a mobile web site. The pages load faster than they would using a web app framework (there is much less styling and JavaScript in the background). On the flip side, there are no fancy transitions, but that can be a good thing. You are in control of all the styling and the size of all the UI elements. Plus when designed right, it works on screens of all sizes -- there is no need for special mobile sub-domains or redirects.

In the end, no web app framework is perfect and completely replicates the native experience -- that hasn't happened, yet. With this said, I recommend jQuery Mobile and responsive web design as my favorites. They are different solutions for different problems (jQuery Mobile for a native-app experience, responsive for informational sites), but I would strongly suggest evaluating them if you have a new mobile web project coming up.

Hebrew Flash Card Web App

2011-11-30T09:27:00.001-08:00

While evaluating different web app frameworks, I put together a little web app to help me get back up to speed with my biblical Hebrew vocab. And if you know anything about trying to read the Hebrew Bible, knowing a good amount of vocab is (unfortunately) essential. The flash card app is built using Sencha Touch's framework and is at http://hebrewflash.me/ ... check it out on your smartphone or iPod touch. The chapter divisions are based on Basics of Biblical Hebrew by Pratico and Van Pelt (Zondervan) so it is a great free vocab tool for students using this textbook.

Partition and Mount a Drive on CentOS

2011-11-17T23:23:00.001-08:00

I have a few servers over at Softlayer. I recently procured a monthly computing instance with an additional 200 gigs of drive space. Thing is, the extra HD space doesn't come partitioned, formated or mounted. So, here is what you do:

First things first. Find the name of the physical drive: fdisk -l

This command will return a list of drives and information about each. You should find one that hasn't been partitioned with a name like /dev/sdb (or in my case /dev/xvdc for a computing instance) or similar. Check the size of the drive to make sure it is what you are looking for.

Next, partition the drive: fdisk /dev/xvdc (using the name of the drive, of course)

Once in the fdisk utility, press p to print the partitions to the screen. There should be none, because you haven't created any yet. If there are, are you sure you are using the right drive?

Next press n to create a new partition, press p for a primary partition, 1 for the first partition, and then use the default first and last cylinder (unless you know what you are doing, of course). Once this is set up, you can press p to make sure it worked and then finally, and most importantly, press w to write the changes to disk.

In the previous command, you'll get a slightly different name for the partition you created. It probably added a letter, something like /dev/sdb1 or /dev/xvdc1 would be right. You'll need it to format the drive: mkfs -t ext3 /dev/xvdc1 (I've used the ext3 file system, here, because it suited me just fine and is probably the most common.)

Now, where would like the disk mounted? You'll have to create a folder as the mount point. If you want the disk to be used for a new /data directory, then you'll have to create a folder with this name: mkdir /data

Next, add the drive and mount point to the /etc/fstab file so that it will be mounted at boot time. Use your favorite text editor, as they say. I used vi /etc/fstab and I added a new row, matching the spacing of the other rows: /dev/xvdc1 /data ext3 defaults 1 2

Lastly, you mount the drive using mount /dev/xvdc1 and you are all done.

Head on over to cd /data and check it out. Or run mount without parameters to check out the details.

PS. Here are a couple websites I used when I was working through this problem myself.

Synchronize Facebook Status & Twitter

2011-11-02T17:09:00.000-07:00

There is so much unhelpful junk out there on the web when you do a Google search on synchronizing your Facebook status' with Twitter. So, a quick post.

If you want your Facebook status to auto-tweet, go to http://www.facebook.com/twitter/

If you want your Tweets to auto-Facebook-status-update (why is there no verb for this?), go to http://apps.facebook.com/twitter/

It's just a slight change in the sub-domain. You don't need any 3rd part software or other service. Facebook and Twitter worked this out among themselves already.

jQuery Mobile Date Picker

2011-10-03T10:56:00.000-07:00

I've been working with jQuery Mobile on a new form. I have the need for a datepicker and was really impressed with what a man by the name of jstage has put together. It is really thurough. So, if you are looking a flexible, mobile date picker, this is a good one.

2 reasons I dislike Google's new look

2011-09-28T12:19:00.000-07:00

Google has been rolling out a new look lately. They are going with a very simple gray and red scheme (and orange in blogger?) for most of their products. I like the idea of it. I also think it is very attractive. But I also have 2 problems with it. And they both have to do with the usability of the new design.

1) They removed all but two visual cues. They've oversimplified it. When our eyes scan pages they pick up visual cues as to what is important and where to find things. It is very quick and very subconcious. Google used to have a lot of visual cues around the page with their old, colorful look. Now, they have red buttons, blue search buttons and everything else is gray. The red indicates something important. Everything else, they are saying, is not important. The problem is that is WAY over simplified. The fact is that this binary visual cue system (that is, red or gray) really slows me down. It is hard to find things quickly or to even orient myself on a page. I even have to think more when I try to figure out what Google service I am using. Their new look doesn't help my brain instantly digest a page. It slows me down because it is ultimately camouflaging the entire page of non-red text links and text interactions in a sea of gray.

2) The new look also makes lots of space for the top of the page. The Google search bar is prominent and then the actions. Then the rest of the page, the area I spend most of my time working and interacting with important data (whether it is a calendar, email list or voicemail transcripts), is now smaller. Not a lot smaller but enough that it really is annoying. This area should be bigger if they are going to change things, not smaller. This is the most important part of the page. The search bar does not need 1/4 of the site. Search is a single input and I spend only a fraction of my time there.

WordPress - Template for Parent Slug

2011-09-16T15:24:00.000-07:00

WordPress allows you to create special template files for each category. You can name these theme template files cateogry-ID.php or category-SLUG.php, which is nice. However, if you are viewing a category and it does not have its own template, WordPress doesn't look for a parent template file. It just skips that. In lui of creating a template file for every child category (which would be a real pain), I found a nice script that I've edited and improved to provide expanded support (it didn't support slugs in the template name).

Place this in your functions.php file:

// Use a parent category slug if it exists
function child_force_category_template($template) {
	$cat = get_query_var('cat');
	$category = get_category($cat);

	if ( file_exists(TEMPLATEPATH . '/category-' . $category->cat_ID . '.php') ) {
		$cat_template = TEMPLATEPATH . '/category-' . $category ->cat_ID . '.php';
		
	} elseif ( file_exists(TEMPLATEPATH . '/category-' . $category->slug . '.php') ) {
		$cat_template = TEMPLATEPATH . '/category-' . $category ->slug . '.php';
		
	} elseif ( file_exists(TEMPLATEPATH . '/category-' . $category->category_parent . '.php') ) {
		$cat_template = TEMPLATEPATH . '/category-' . $category->category_parent . '.php';
		
	} else {
		// Get Parent Slug
		$cat_parent = get_category($category->category_parent);
		
		if ( file_exists(TEMPLATEPATH . '/category-' . $cat_parent->slug . '.php') ) {
			$cat_template = TEMPLATEPATH . '/category-' . $cat_parent->slug . '.php';
			
		} else {
			$cat_template = $template;
			
		}
		
	}
	
	return $cat_template;
}
add_action('category_template', 'child_force_category_template');

JavaScript Array Scrambling

2011-08-29T14:21:00.000-07:00

Ever need to randomly re-order an array in JavaScript? I have. And, unfortunately, there is no native support for a function like shuffle() in PHP.

I found a few people suggest this technique, but I have found it to not be very good. The elements weren't all that random especially for the first and last elements in particular (they were usually one of two values).


myArray.sort( function(a, b) {

	return Math.round((Math.random() * 100) - 50);

});

It uses the native sort() function requires a function that will compare two values to determine which one comes first. If the number returned is negative it indicates that the 'a' item goes first and vice-versa if it is positive.

I found the following function to be more random:


function mixArray(arrayIn) {

	var arrayOut = [];

	var origLength = arrayIn.length;

	for (var x = 0; x < origLength; x++) {

		var randIndex = Math.floor(Math.random() * arrayIn.length);

		if (randIndex == arrayIn.length) randIndex--;

		arrayOut.push(arrayIn.splice(randIndex, 1)[0]);

	}

	return arrayOut;

};

myArray = mixArray(myArray);

CentOS and "su: incorrect password"

2011-08-13T16:13:00.000-07:00

I made a mistake. I was setting up CentOS and accidentily ran chown -R 0 /. Yep, a global & recursive ownership change. Not a good thing.

The first problem I noticed was that I couldn't use su -. It kept saying that I was using the "incorrect password" even though I was completely sure I was.

I after digging around, I found someone who had the same problem and a nice chap named Mike who, very impressively, pointed out the source of the problem (ie, the globaly recursive chown). His response: "He's got rather a mess, unfortunately." Uh oh.

Well, it seems that the mess wasn't as bad as I thought. After fretting and digging around the interwebs, I came across this article about resetting file permissions on RHEL (and CentOS by extension, of course). Hallelujah!!

Following the instructions there, I did this to fix my woes:

rpm --setperms -a

I am not convinced everything is back in its proper place and I will probably see more fallout from my careless command executing. BUT, I can successfully "su -" without any bogus password complaints. That I like.

Allstate's Roadside "Assistance"

2011-08-08T12:27:00.000-07:00

UPDATE 8/9/11: Allstate tracked me down to make things right. They are refunding my payment and explained that things don't normally go this way. What an impressive response.

It should be called "Allstate's Roadside Torture". And, I should have just googled "tow truck" ... I would have saved a lot of wasted time. I need to rant, badly.

My wife is pregnant and stuck in a parking lot. She calls the number that Allstate gives us for roadside assistance and can't even get past the first robo-bot operator. So she calls me for help. So, I call Allstate's well-promoted "Good Hands Roadside Assistance"... this is how it went.

I call the phone number the publicize for the service (1-800-255-7828). It is answered by a machine that wants me to speak what I want. So I say "roadside assistance." "You want coporate?" replies the machine. No, "I want help". Not working, so it offers me a directory and of course there is no roadside assitance options. After some very unfruitful back and forth with this annoying bot, it sends me to an operator.

The nice foreign operator would like to validate my policy. He needs my name. Then my SSN last four. Then he needs to validate every other peice of information he can find. Gotta check my zip and address and phone and email address. Seriously!? I need help. And these are the things you want to ask me about?

When he finally finishes with his 20 questions, THEN he tells me I need to call another number. Call 1-877-248-1266. Great ok. Thanks for that.

Now I am on to this new number. And a new game. First I get a message about adverse weather conditions in my area... I live near Seattle and it is the middle of the summer. What adverse weather conditions? You mean the 70 degrees and overcast? Is this causing havoc on your systems? Now after explaining that I need help to a new telephone operator, he also tells me I need to call a different number. This is a joke, right? Nope, I have to call a new number: 1-877-266-7561.

On to the third operator. Now I am having fun. Now I need to give him my credit card, phone number, email address, home address, zip code and whatever else he could come up with. After 10 minutes of divulging personal information he can finally could get me assistance. He puts me on hold and then finds someone that can help within the next 50 minutes. 50 minutes?! I am in the middle of a urban shopping center and 50 minutes is their timeline? I am not in the mountains or in some rural community, I could understand, then. I guess it is the best they can do because of all this crazy weather (sarcasm).

I will NEVER use Allstate's roadside service again. EVER. And Allstate needs to try their own service before they sell it.

SE Linux and "Can't connect to MySQL server"

2011-08-05T20:12:00.000-07:00

I've been setting up a server for the last few days for production. It is to be highly secure, so it is a real pain. Anyway, I ran into this problem where I could not connect to the remote database. It was driving me nuts. (I'm using CentOS by the way, and I was setting up a web server to connect to a remote MySQL database server.)

First, I checked that I was getting network connectivity by doing

telnet 10.0.0.1 3306

from the command line (where 10.0.0.1 is the IP of the database server). And, I got some gobbledygook that had the words "MySQL" in it, so I know that worked and the network was there.

Then, I checked the database's user list, to make sure connections were allowed from the user at my host. I did this by going into MySQL's CLI and entering

SELECT `Host`,`User` FROM mysql.user WHERE 1;

This printed out a list of all the users so I just made sure it and the host were correct. (There are more MySQL troubleshooting tips here.)

Then it finally hit me. What always causes problems for hours on end? SE Linux!! I know it is good for my server, but it sure does drive me nuts sometimes. If you want your web server to be able to connect to a remote DB, you have to give it rights with SE Linux. Run this at the command line:

setsebool -P httpd_can_network_connect_db on

and for good measure:

setsebool -P httpd_can_network_connect on

There, all fixed!

Update: HA HA! I've had this problem before and completely forgot about it.

PHP UTF-8 Script Input Cleaner

2011-08-01T08:25:00.000-07:00

When you switch to UTF-8 on your website, there is a few things that everyone recommends (for good reason) like using multi-byte functions (e.g., mb_strlen()) and adding the HTTP-EQUIV attribute header. One of these commonly recommended things is that you should clean up all user-submitted input.

With UTF-8 comes the ability to submit a lot of crazy characters to the script, either by POST or GET. These crazy characters might be control characters, invalid UTF-8 characters or some other charset that was mixed in for good measure. So, I created the following function to help clean my inputs:

<?PHP

function cleanUTF8(&$input, $stripSlashes = true) {
 if ($stripSlashes) $stripSlashes = get_magic_quotes_gpc();
 if (is_array($input)) 
  foreach ($input as $k => $v) cleanUTF8($input[$k], $stripSlashes);
 else {
  if ($stripSlashes) $input = stripslashes($input);
  $input = mb_convert_encoding($input, "UTF-8", "UTF-8");
  $input = preg_replace('!\p{C}!u', '', $input);
 }
}

?>

It is a recursive function in that it will iterate into a variable if arrays exist, as they sometimes do. It will also strip slashes for you if your version of PHP still has magic quotes on.

It removes invalid characters through the mb_convert_encoding() function. Anything that is not UTF-8 is dropped. Lastly, the fancy preg_replace() function removes all control characters. (The \p{C} means "all control characters", the !! are delimiters the same as // or ##, and the last "u" modifier means "treat this as UTF-8.")

At the top of your script add this to iterate over the input array and clean up the data:

<?PHP

cleanUTF8($_POST);
cleanUTF8($_GET);

?>

HTML5 Video File Conversions

2011-06-15T08:47:00.000-07:00

I think the best part of HTML5 Video is getting to convert the source file into a billion different formats for all the browsers (note: sarcasm). For a while I was struggling with Adobe's Media Encoder, trying to get that to do my work. It never really rose to the challenge.

Recently I've been using Adobe just for the FLV/FLA files (for flash fall-back) and then using Miro's video converter for the rest. It works a lot better, but is still not fool proof. I've found that the iPad and iPhone formats are still a little hit or miss when I test on the various iOS versions out there. What I like about Miro, though, is that I don't need to tune every parameter for the mp4. All I do is pick iPad and it takes care of the rest. Beautiful.

Another option is zencoder which has a nice API you can use. This would be a great option if you had to convert uploaded video or if you had a ton of video and you wanted to programmatically convert it. Just wanted to throw that out there.

iPhone, HTML5 Video & AWS: Movie format unsupported

2011-06-04T09:59:00.000-07:00

I've been working hard on a website that will have a video section using HTML5 video with a flash video fall back. It has taken way longer than I ever expected. What a mess this has become, trying to support every browser's own format, and then trying to support old browsers on top of that. Yikes.

One particularly troubling part has been the iPhone/iPod Touch support for video. Using multiple video encoders (Miro, QuickTime Pro, and even Sony Vegas HD) I was unable to post any video on the web that did not cause the iPhone to say "This movie format is unsupported." And it was crap, because I knew it WAS supported. And, even worse, the video would sometimes work... randomly.

Well, after lots of pain and banging my head against the wall, I found it out it was because I was using HTTPS on Cloudfront. For some reason, iOS occasionally rejects the Amazon Cloudfront SSL/TLS. Nice.

So, just take the S off of the HTTPS when playing HTML5 video served from Cloudfront.

Flowplayer Flash Video and SetReturnValue

2011-06-01T08:46:00.000-07:00

I recently set up a HTML5 video system with flash video fallback, for those crazy people with old browsers. VideoJS.com is a great site for explaining how to do this. Use this with the site with the info here for a great solution.

Anyway, the flash fall back using Flowplayer commercial was giving me a bunch of issues on IE7 & IE8. One was there was an error that was being logged in the console about 'SetReturnValue' not being defined. Turns out, the <object> tag must have an ID. The example code I copied from VideoJs's front page didn't have this. So, make sure you have a unique id set.

The other issue had to do with Flowplayer's branding removal (with a commercial license). Turns out, the registered domain name is not for the domain the video is being played on, but the domain the swf file is loaded from. I had the swf files on a CDN and the branding was not removed. Just had to move it back to the main site and all was good.

How to fix MySql Replication Error 1236

2011-04-05T11:08:00.000-07:00

We have some websites that use two database servers in master-master replication. Recently one of the servers died and had to be resurrected. (They are cloud based and SoftLayer doesn't seem to have their cloud-based offering thing nailed down, yet. Every week one of them will go down and be unresponsive until tech support does some magic.)

After one of the servers was brought back up the other server would not connect. It "Slave_IO_Running: No" and "Seconds_Behind_Master: null" which means it was not playing nicely.

First, I went to the MySql log files, which for this server is found at /var/log/mysql.log and looked at the last few messages here by running "tail /var/log/mysql.log" from the command prompt. This revealed the error number (server_errno=1236). It also had the following info:

Got fatal error 1236: 'Client requested master to start replication from impossible position' from master when reading data from binary log

Just before this entry in the mysql.log it indicates the file and position that it is trying to read. So, with this data in hand, I headed over to the master server and took a look at the bin logs. They are located in /var/lib/mysql/. Here I took a look at the file in question using the mysqlbinlog utility. I used the following command to check out the bin log. Obviously, you'll have to replace the position and file name with the position and file indicated in your mysql.log.

mysqlbinlog --offset=128694 mysql-bin.000013

And, this is what I saw here, among other things:

Warning: this binlog was not closed properly. Most probably mysqld crashed writing it.

Well, that explains things! When the server crashed the bin log was not closed properly. This is easy to fix. Going back to the slave server, I stopped the slave, reset the bin log position and started the server.

STOP SLAVE;
CHANGE MASTER TO MASTER_LOG_POS = 0;
CHANGE MASTER TO MASTER_LOG_FILE = 'mysql-bin.000014';
START SLAVE;

I simply pointed the slave to the start of the next bin log. It started right up with no problem.

SimpleXMLElement and EntityRef XML parser

2011-03-12T19:20:00.000-08:00

I am using the PHP class SimpleXMLElement to take care of parsing some XML data that I am sourcing from 3rd parties. It had been working well for a while, but I just discovered an error that was popping up frequently. This error was "XML parser error : EntityRef: expecting ';'".

This error comes about as a result of XML input data being improperly encoded. Two data sources I was using had encoded things like "&", "<" and ">" by leaving off the semi-colon. In other words, the ampersand had been encoded as "&" instead of "&". SimpleXMLElement doesn't like this and throws a warning fest.

To fix the problem, I added a line before calling SimpleXMLElement:

$xmldata = preg_replace('/&(amp|lt|gt)([^;])/', '&$1;$2', $xmldata);
$obj_xml = new SimpleXMLElement($xmldata);

The preg_replace fixes the encoding problem and adds the ampersand for you. Just a note, this will only fix the encoding for the three characters I specified above ("&", "<" and ">"). If there are others that are causing problems, you'll have to add them to the first argument of preg_replace().

Here is another blog/article that helped me discover the underlying issue.

Computer Backups

2011-03-02T19:27:00.000-08:00

I use Backblaze to back-up my computer's files. Let me explain why...

It is always important to have your files backed-up. And to have those files backed-up in a location that is secure. That is, away from your computer and locked and/or encrypted. There are a few big players in the online backup service sector. Carbonite and Mozy are both good examples.

It is important to have all my files backed up, especially on my work computer. If something were to happen, like fire or theft, I need to have a backup copy of all my files so I can get back to work as soon as possible. The great thing about online back-up services is that your back-up happens automatically, whenever you have an internet connection. The more automated the better!

I've been using Carbonite for the past couple of years for my laptop. It has worked pretty good. I like how they add a little icon in your file explorer on top of each folder and file that is backed up. It is a great visual cue that helps me to see exactly what is backed up and what is not.

HOWEVER, over the past few months my computer fan will turn on really loud, even when I am not using the computer. Looking closer I found that Carbonite's software was eating around 50% of my processor, causing my computer to heat up and the fan to turn on. As soon as I disabled Carbonite, the CPU utilization fell and the fan turned off. That's not right!

Well, I finally broke down and contacted their technical support. First, their technical support sucks. They have a crumby web interface, their emails are formated all funny, and the people on the other end take forever to get back to you. But, the worst part is that after I jumped through their hoops and they finally got back to me, all they said is that I use my computer "too much." Seriously!? It runs at 50% even when I am not using my computer.

What a waste of my time.

SO, now I am using Backblaze. I heard about them a while back through this Slashdot article about how they had made their hardware design public. Very cool: open-source hardware. Now that's an innovative company. And, as a double bonus, they will encrypt my files in a way that is extra safe. Only I can open my files. (I have a feeling those tech guys are Carbonite can browse my personal files whenever they'd like.) Last, but not least, when I need to restore my backed-up files, they will mail me a physical disk with all my files on it. Awesome!

And, I must mention this because I am a web designer, the Backblaze website is WAY better looking. Nice work, guys!

Storing Passwords in Databases

2011-02-24T15:36:00.000-08:00

In the last few weeks/months there have been a couple high-profile computer breaches in the news. One was at Plenty of Fish, an online dating website. The second was at HBGary, a computer security company (ah, the irony).

Plenty of Fish made a major security mistake. They stored passwords in their database in plain text. This means, if you had access to their database (legitimately or through a SQL injection vulnerability) you could see anyone's password. And this is typically a big security no, no. Passwords should always be hashed before being stored in a database.

Hashing is a one-way encryption that prevents a password (or any character string) from being un-encrypted. So, when a user logs in, you hash their entered password and compare it against the hashed password in the database. If they match, the password is the same. It is simple AND safe.

Two particular hashes are quite popular. SHA1 and MD5. Although they are beginning to be a bit dated now and, if I remember correctly, MD5 has been shown to have some vulnerabilities. Some of the more recent hashes are SHA256 and SHA512. (Use the hash function to implement them in PHP.)

Over at HBGary, the "security" firm, they actually did use hashes to store passwords. They used the common MD5 hashing algorithm. The problem with their implementation, is that they added nothing to the password before hashing it. This is an issue because people have created massive online collections of auto-generated hashes from between 1 and 12 characters (typically). So, if you have a hash, and you're a hacker, you look up the hash in this table and (if it is a normal-sized password) it will likely be found.

The best way to make this look-up table irrelevant is to add a set of constant, known characters to the password before the hashing takes place. This technique, called adding "salt" to the password, will create an extra long password, that will never show up in a look-up table. Why? Because it would take more than a lifetime to compute look-up tables that long. Hashing is an expensive operation, in terms of CPU cycles, and the longer the original text, the longer it takes to compute.

If you are building a website, and you have passwords to store, remember: salt & hash. Mmmm, sounds tasty!

Mac crash / Mac blue screen flash during use (not at startup)

2011-02-18T16:22:00.000-08:00

A few days ago my MacBook Pro (running OSX 10.6.6) starting having some weird issues. I would be working on the computer, and all of a sudden the screen would flash blue, and then a few seconds later show my blank desktop background, and then finally the dock would come back. All within a few seconds. All of my applications would be closed as if it had restarted.

This has happened about five times, all when I was using different programs. The first time it happened, it was after I dragged a file to trash; after that it happened while using iPhoto and it had frozen up on me; and another time while using Safari. Most recently, the blue screen flash occurred after waking the computer from sleep and trying to close the browser windows in Google Chrome.

I've researched a lot of Mac forums and apparently this is a common problem, and I saw posts from 2007 that were never resolved; I still haven't found a forum with a clear answer.

Anyways, I reviewed the console from the crash this morning, and saw that there was quite a bit of activity all occurring around the time of the blue screen flash, like "windowserver port death" and a whole lot of errors and warnings. This narrowed it down to a possible problem with the window server. I took it in to the Apple store nearby and spoke with a Mac Genius. I showed him the console with the errors, and he suspected it might be a permissions error causing the system to crash and then reboot (looks like it is logging out and then re-logging in at rapid pace).

The Mac Genius attached an external hard drive and rebooted from that and ran permissions repair. He recommended doing this every 3 months or so since it is easy to corrupt permissions. I had never done this before, and it took about 12 minutes. He also said he would recommend doing this at home by booting from the Install DVD I got with the computer. To do this, you have to press the 'option' key during startup in order to have the option to boot from the DVD. (I guess this is a change from pressing "C" with older models.)

Here's how to reboot and repair permissions from the OSX install DVD:

Insert install DVD, restart computer, and hold down the 'option' key during startup.
This will give the options of booting from the hard drive or the DVD – select DVD
The reboot could take up to 5 minutes or so.
When install screen comes up, go to "utilities" in the top menu bar and select "Disk Utility."
Click on the main hard drive (not the subfolder/partition), and click on "repair disk permission" button, allowing the process to complete. This could take a while, especially if never done before. (It could take up to 3 hours, but mine took 12 minutes.)
Quit Mac OSX installer from the menu bar and restart.

We were thinking this should clear up the problem, but if not, the second resort is to archive & reinstall OSX (archive will save all your data), and a third resort is to erase and install (after full backup of all data, of course). We'll see what happens! Hopefully it will work. That would be nice, since it is rather annoying to get the blue screen flash in the middle of doing something, and loosing any data you were working on.

Update 5/17/11
Well, after many months, many disk permissions repairs and many more blue screen crashes, we decided to go back to the Genius Bar. It was evident that the problem was not fixed. When we returned they ran a test on the hard drive. It apparently failed the test to some degree because they replaced the hard drive. Perhaps it was a hardware problem all along? We'll see.

-- This is a guest post by my wife Susan

VSFTPD & SELinux

2011-02-15T13:21:00.000-08:00

This can be a fun combo to work with. SELinux, or Security Enhanced Linux, is the life of any party. And Google searches about SELinux-related problems makes it pretty evident that very few people have taken the time to understand how this program works. I ran across numerous people simply suggesting that you turn off SELinux if it is getting in the way.

Well, I didn't buy into this wholesale approach to getting things to work. Besides, I want a secure system and if SELinux is going to help me in the long run, I want it enabled.

So, VSFTPD, or Very Secure FTP Daemon, is pretty standard. You can install it on CentOS systems (or RHEL, for that matter) by running "yum install vsftpd" from the command line. Once you get it installed you can make changes to the configuration file at "/etc/vsftpd/vsftpd.conf" using a file editor. Also, to make sure it is always running in the background run "chkconfig vsftpd on" and "service vsftpd restart" from the command line.

Make sure the configuration file is set up properly. Only give FTP access to a limited number of users (never include root), disable anonymous access and make sure users they can only access the files they need (I recommend chroot-ing them).

Now that VSFTPD is running, how do you allow users to access their home directories? SELinux usually will get in the way of this. Well, there is a SELinux setting for this called "ftp_home_dir" and this will allow users to access their home directory via FTP. To set this, from the command line run

setsebool -P ftp_home_dir 1

Be sure to also check file permissions and file ownership, if you run into problems. A file must be writable for everyone if they do not specifically own it.

If this fails to grant you FTP access where you need it, or your set-up is slightly different, you can always allow the FTP daemon full access to all files by running

setsebool -P allow_ftpd_full_access 1

This is granting a bit more power to the FTP daemon than is necessary, but it is much better than just disabling SELinux all-together.

By the way, here is a great intro to CentOS & SELinux.

Calculating Popularity

2011-02-09T21:15:00.001-08:00

I am working on a new site that will have a sort of ranking system. It will be used to list a series of resources that visitors can rate and score. This scoring will then drive what resources are listed first and what resources are listed last.

Well, how in the world do you calculate ratings? I want to make sure new sites get a chance to rank high (so that old sites don't stay at the top forever). I also want to make sure that sites with a low number of votes are put at the top, just because all of the 2 people voted the max. And the list goes on, the more you think about it, the more there is to it.

Well, this blog entry does a great job of explaining different ranking algorithims and how they work. I give it a great score and a high rank. ;)

Database connection (mysql_connect) taking a long time

2011-01-13T18:35:00.000-08:00

After setting up a new database, the connection from the web servers was really slow. We had enough combined traffic to slow down the response of the PHP function mysql_connect() to between 5 and 20 seconds. But the current load on the MySQL server wasn't that high... something fishy was going on.

What I found was that the database server was trying to do a reverse look-up on every connection using the IP. It was slowing down every connection for this. You can disable this by using the following option, as explained here.

--skip-name-resolve

"Do not resolve host names when checking client connections. Use only IP addresses. If you use this option, all Host column values in the grant tables must be IP addresses or localhost. See Section 7.9.8, "How MySQL Uses DNS"." --> http://dev.mysql.com

Anyway, you can make this change in the configuration file to be loaded at start-up (it doesn't have to be a command-line option). Simply add "skip-name-resolve" on a new line in the /etc/my.cnf file and restart your DB server. Voilà!

Good Design

2011-01-07T12:14:00.000-08:00

I've been thinking about good design for the past few months. Apple always seems like the best example of good design because of the simplicity, ease of use and rugged product designs.

I came across this article today about Dieter Rams, a product designer that has influenced many, including Apple.

Here are 10 principles of good design attributed to him:

Good design is innovative. 
Good design makes a product useful. 
Good design is aesthetic. 
Good design helps us to understand a product. 
Good design is unobtrusive. 
Good design is honest. 
Good design is durable. 
Good design is consequent to the last detail. 
Good design is concerned with the environment. 
Good design is as little design as possible.

Happy New Year!

2011-01-01T07:50:00.000-08:00

It is here: 2011. To begin this new year my wife and I will be moving to Seattle. We are excited and are looking forward to the change in seasons, again. It has also been over one year since I began web development full-time (I had done it part-time for many years prior). Things have gone very well for a first year, a blessing for sure. So many adventures.

Happy New Year!

Pure-FTPd and Passwords

2010-12-11T15:37:00.000-08:00

I use pure-ftpd as my FTP server, mostly because it was on the first server I managed and I got used to it. I've been having a little difficultly with setting it up on two new cloud computers and I came across this helpful note.

I set up new linux users and then when I tried to connect via FTP I would get a 530 Login authentication failed.

For whatever reason, if you create a new user and want to use it for FTP, the user must have a shell assigned. You can check the shell by looking at the /etc/passwd file and looking at the last parameter. If the user has no valid shell assigned, you can set this with a command like this:

chsh -s /bin/bash theusername

PHP to Remote Database Error: "Can't connect to MySQL server on..."

2010-10-20T17:58:00.000-07:00

On a new server migration project I am working on I have separate web and database servers. So, I use a private network to connect them. It took me a day to get working, so I am putting up a post to help others in similar situations.

First, just to clarify, I knew it was a web server problem (and not a network or db permissions issue), because I could connect to the MySQL server just fine from the MySQL command line on the web server. But, when I pinged the PHP web page from my browser I'd get this error:

Can't connect to MySQL server on '10.1.1.1' (13)

The problem was SELinux, which was installed and crackin' down on Apache rights.

One simple fix:
setsebool -P httpd_can_network_connect=1

More information can be found in this nice article:
http://www.ehow.com/how_2090983_connect-remote-database-under-selinux.html

SELinux would allow me to connect from the command line just fine. I could even execute the PHP script from the command line and connect fine. But SELinux did not like it when Apache tried to connect to a computer on the network. Hence the policy update, as stated above.

If you have other issues or it appears that your db server is having issues, here are some other MySQL debug tips as well.

Add Text to an Existing PDF Using PHP

2010-10-18T17:06:00.000-07:00

I am finishing up on a project right now that fills out a PDF application for a merchant account. The software helps the user through the application process by asking more targeted questions and filling in fields that are known. In order to do this I had found two PHP libraries that work quite well.

The first is FPDF. It is a free PHP library that allows you to create PDFs. It is not a module or binary code, just a straight up PHP script library. Color me impressed. You can download it at http://www.fpdf.org/

The second bit of code you need is called FPDI. This will import a PDF as a template and allow you to overlay text. It worked quite well for my project as I was taking an existing PDF and filling in fields on top of it. Just like FPDF, it is super easy to install because all it is is a collection of PHP script files. You can download it at http://www.setasign.de/products/pdf-php-solutions/fpdi/

Here is a quick demo by FPDI on how to use these two modules together.

To make it all work I created a flat, PDF version of the template PDF. I removed all of the form fields using Adobe Acrobat. The first run I got an error: "probably uses a compression technique which is not supported". ~~This was easily fixed by saving the PDF as PDF/A using Adobe Acrobat.~~ (Update below.)

If you have any questions, please let me know. I'd be glad to share more of what I learned.

Update (10/22/10): I've learned that saving the PDf as a PDF/A doesn't always solve the error I explained above. What has worked, however, is running Adobe Pre-Flight on the document. If you go to "Advanced" > "Print Production" > "Preflight" and then click on "Analyze and fix", Adobe will work some magic on the document and make it work with FPDI.

Update (1/27/11): FPDI, the free version of the PDF parser, requires the PDF to be version 1.4 or below. To save a PDF in this format, open the document in Adobe Acrobat, click "Save As" and then select the type "PDF, Optimized" then click the "Settings" button and select "Adobe Acrobat 5.0". This will save the PDF in version 1.4, which was last used in Adobe Acrobat 5.0!

Removing WordPress LINK: NEXT and PREV

2010-10-05T11:52:00.000-07:00

In WordPress, in the HTML HEAD, there are two <link> lines that are present. One is rel="next" and the other is rel="prev". Now, if you have some pages that you don't want just anyone to find (and the private and password-protect features are not appropriate), this little feautre may reveal them to the public.

To remove the LINK data from the HEAD:

First, pull up your template editor by going to Appearance >> Editor.
On the right side is a list of files. Click on "Theme Functions" or "functions.php" to edit it.
At the top, just after "<?php" add these lines of code:
1. remove_action('wp_head', 'parent_post_rel_link', 10, 0);
2. remove_action('wp_head', 'start_post_rel_link', 10, 0);
3. remove_action('wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);
Click "update file" at the bottom

All done! The link, rel="next" and rel="prev", as well as "start" and "parent", should be all gone from your template.

iPod Touch Battery Life Issue

2010-10-01T23:34:00.000-07:00

I love my iPod touch. But it had a problem. After upgrading to the latest and greatest software (iOS 3), the battery life was awful, to say the least. I charged it, set it on the kitchen table in the evening and by morning it was completely dead. Something was very wrong.

The first thing I tried was to disable all push notifications and alerts. And, after charging it up, I left it plugged in for a few extra hours (just in case). Unfortunately, I saw no change in performance. The iPod would die, again, within 24 hours, even if I had not used it. This was getting ridiculous.

I found a blog post that suggested performing a restore. So, I gave this a try. I plugged in the iPod to my laptop, and clicked the restore button in iTunes. After a few warnings and some waiting, the iPod was back to its squeaky-clean state. And I can say that now, after 3 days, that the restore worked and the battery life is back to normal. I haven't charged it in days and it is still going strong.

Bottom line, if your iPod touch's battery life was cut dramatically short after upgrading to iOS 3, try a full restore. Worked for me.

Leave a comment if you've had similar experiences. I'd be interested to hear if it worked for others as well.

Innovation

2010-09-25T10:58:00.000-07:00

I've been thinking a lot about innovation lately.

There are lots of areas where innovation is strong and advancing. I think of cellular phones, as one great example. Companies like Apple lead the pack, forcing the entire industry to innovate. And it seems like it is a good thing for all of us. I also think of Google and the area of internet services, with major innovation in how we use email and how we search the web. There is also, and this has traditionally been the case, a lot of innovation in the area of art and fashion. You can always get art and fashion that is not innovative, but it is not hard to find people who are pushing new boundaries and forging new styles in these areas.

There are also a lot of sectors where innovation is stagnate or happening at a slow pace. I think of the American automobile industry. There has not been much great innovation in a while and when there is any it is in response to foreign innovation. I also think of telecommunication companies and their service offerings. For instance, home telephone service has had little innovation in quite a while. Plain old telephone is plain old telephone and doesn't look like it is going to change any time soon (which is probably why so many younger people are willing to go without it, now).

So, what areas need innovation? This is my question. And, how can I contribute to these areas, not being a CEO of a major company? How can I use my talent and drive to affect change in these areas that desperately need innovation? These are the questions I've been exploring, lately...

A Better Browser

2010-09-02T08:20:00.000-07:00

This is my PSA to help the world rid itself of bad browsers:

So I just wrapped up major development on a 3-month project and I am stoked to be done. But, I am also more and more convinced of Internet Explorer's ... deficiency.

Now there are the normal "quirks" with IE that every web designer runs into (e.g., version 7's inline-block problem). These "features" are annoying and I have to deal with them often, but at least there are a number of known work-arounds to help me.

There is one major thing that I've come to see about IE in these past 3 months for which there are no work-arounds. It is dreadfully slow and clunky. Things that will run smoothly and look great on Chrome, Safari and Firefox, will look awful slow on IE. This last project uses a lot of DHTML and it has a really high level of user interaction, so naturally there are a lot of animations and fading of images, etc. IE just cannot handle it and I've had to remove a lot of animations for people who are visiting the site with IE.

So, now that the browser Google Chrome is celebrating its second birthday, I thought I'd share my thoughts about browsers once again. Use Chrome if you want a fast, responsive, useful browser. I particularly enjoy the streamlined UI. Switch between Chrome and IE and you'll notice MAJOR speed enhancements. I love Chrome and you will, too.

Installing Intermediate CA with cPanel

2010-07-20T08:46:00.000-07:00

When I saw that the VeriSign EV SSL / TLS certificates required an intermediate CA to be installed, I was worried it was going to be a long and painful process. Well, turns out it is super easy to install.

It seems that some of the modern browsers have no problem when the intermediate CA is not installed, but older ones, on the other hand, don't like it. So, here is how you make your cert work on most browsers.

First, copy the appropriate intermediate CA root bundle from VeriSign. I had a standard EV SSL, so I used the first cert on this page.

Now, log in to cPanel and click on "SSL/TLS Manager" > "Activate SSL on Your Web Site (HTTPS)". Use the drop-down box to select your domain and the domain's certificate should show up (the one you installed at an earlier time, or google "install SSL certificate with cPanel"). Then, you'll see an extra text box at the bottom called "Ca Bundle (CABUNDLE)." Just paste the intermediate CA there and click "Install." Yep, it's that easy.

Wildcard SSL on WHM and cPanel

2010-06-23T16:00:00.000-07:00

I had the task of implementing a wildcard SSL for a client the other day. I search the web for info on doing this with WHM and cPanel and got a host of wild answers that made it sound difficult to impossible. When I got done, I was surprised by how easy it was. Here is what I did..

By the way, just as a disclaimer, this is from memory. If you have any feedback, let me know in the comments.

Create an account for *.example.com (you must have a dedicated IP for the account for example.com)
Generate private keys (Log into cPanel > SSL/TLS Manager > Private Keys (KEY)) for the domain *.example.com
Generate a signing request (cPanel > SSL/TLS Manager > Certificate Signing Requests (CSR)) for the domain *.example.com
Go to your favorite certificate issuer (RapidSSL, for instance) and get your certificate using the CSR you just created
Upload your new certificate from your issuer (cPanel > SSL/TLS Manager > Certificates (CRT)) by pasting it in the box
Install & enable the new certificate (cPanel > SSL/TLS Manager > Activate SSL on Your Web Site (HTTPS)) for example.com (it is missing the * but this is ok)
Everything should be working now, so try it by going to https://example.com/
Create a * sub-domain so that all sub-domains will work (cPanel > Subdomains) directing them to the document root of public_html
Create a folder in public_html for each sub-domain you want to use
Add these lines to your .htaccess file to rewrite the URL:

# This line should only be in the file once, at the top
RewriteEngine On

RewriteCond %{HTTP_HOST} ^mysubdomain\.example\.com$
RewriteCond %{REQUEST_URI} !^/mysubdomain/
RewriteRule ^(.*) mysubdomain/$1 [L]

And that should be it. Like I said, I am doing this from memory. But, this is the general outline to getting a wildcard SSL working on cPanel. It does work and is not that hard to get going, contrary to many other posts. If I missed something or did a step wrong, please let me know so I can update this post.

Peace!

Base Dependency, JavaScript and how parseInt() returns 0

2010-05-19T13:47:00.001-07:00

I learned today that the parseInt() function in JavaScript actually has a second parameter that is optional. This second parameter defines the number's base. Thus, you can parse an integer that is binary, octal and hexadecimal. However, if you do not define the base, the parseInt function takes a guess at the base instead of defaulting to decimal.

So, if you have a parseInt('08') or parseInt('09'), the function will return 0. This is because it is guessing that these are octal numbers (based on the 0 in front) and then returns a 0 because they are invalid octal numbers.

The fix is simple, define the base. Use parseInt('08',10) or parseInt('09',10) instead. This blog post helped me and has more info on the matter.

Hash Changing, detecting the Back button in JavaScript

2010-05-13T17:00:00.000-07:00

If you use gmail and you are a web developer, you have probably noticed that they use hash or anchor links (e.g., "example.html#hash") to make your browser's back button very effective. These hash or anchor links were designed to bring your browser to a certain position in a page. Often they are used on help pages or FAQ pages to make the browser window scroll to a certain point. But, interestingly, they can also be used to set certain JavaScript states, when configured properly.

In order to monitor the hash state and determine if the browser's back or forward button were hence used, you must set up a polling loop. It will check the current hash against the last hash. If there is a change it will do something magical (whatever you want to do).


<script type="text/javascript">
/* set defaults */
var curHash = window.location.hash;

/* check for a change in hash (back or forward buttons) */
setInterval(function() {
 if (curHash != window.location.hash) {
  curHash = window.location.hash;
  /* -- do what you need to do when the hash changes! -- */
 }
}, 250);
</script>

The check time is set to 250 ms. But this can be tweaked for your particular needs.

There is rumors that in HTML 5 there will be a hash onchange event. This will really clean up the code, removing the need for polling. Until then, this is the next best thing.

PEAR Mail.php - Failed to add recipient (code: 451)

2010-05-03T11:59:00.000-07:00

I decided to use the PEAR mailer for a web project in order to send emails through my SMTP server. However, I was getting a strange error:

Failed to add recipient: xxxxx@gmail.com [SMTP: Invalid response code received from server (code: 451, response: Temporary local problem - please try later)]

Yikes! That is not a very helpful error. If the server doesn't know what what the response code means, how am I supposed to? Using SSH, I took a look at the exim_rejectlog located at /var/log and found that my mail server didn't particularly care for the source or 'From' email address.

After a bit of trial and error, it became clear that 'From' address must match the SMTP account's address. It is a nice anti-abuse feature (for shared servers) that I wasn't even aware of.

Anyway, if you get this error, it probably could be a number of things, but be sure to check that your 'From' email address matches the email address of the SMTP account you are using to send the email.

Page Loading Speed-Up

2010-04-28T08:59:00.001-07:00

I found out today that if you have JavaScript and CSS externally linked in your HTML head, the CSS should come first. This will allow browsers to fetch both external files at the same time. I use JavaScript to do some last minute page styling, depending on some parameters and also found that this helped the page flicker.

On a related note, the Page Speed add-on to Firefox is a handy little tool for determining areas for improvement for a website (that's where I learned of this CSS before JS tip).

Blocking Bots and Crawlers without Blocking Search Engines

2010-04-19T11:04:00.001-07:00

If you run any high-traffic websites it becomes apparent rather quickly that there are people out there trying to download your entire website (and there are many more people doing it than you would think). The question is, how do you block users with ill intent without blocking the major search engine bots (i.e., Yahoo, Google & Bing)?

The Google-recommended way is to do a reverse DNS look-up using the IP address. Then double-check the reverse DNS with a normal DNS look-up. The explanation is found here. Note that this code will not work alone. If implemented, all regular visitors will be blocked. You must add some code to count the number of visits from a unique IP address and use this information as well.

How is this done in code? Check out this great PHP solution. (Not sure if Bing uses the old msn search bot domain name or not.)

There is one issue that comes up with an implementation like this. By doing this you are blocking all bots and search engine crawlers which are not in your list. In other words, you are helping ensure that no other search engines can index your site. While it does still allow the major search engines to compete on the same level (at least in terms of your site), it is a bit anti-entrepreneurial and anti-competition because it locks-out small search engines and start-ups.

Random exclamation points inserted into emails

2010-04-09T15:05:00.000-07:00

I use PHP mail() to send out emails quite often. I recently found out that if you create your email as one long string without line breaks, you'll get random exclamation points in your emails. I was recently pointed towards RFC 2822 section 2.1.1 for the solution. It appears that no line can be longer than 998 characters without a line break.

How do you fix this? (1) The first way is to base-64 encode the data (best solution for plain text emails to retain long lines). Check out this blog for some info on that. (2) The other, much easier way, is to simply insert line breaks in your email (best solution for HTML emails where long lines are not needed). Add a "\r\n" to the end of each line in your email to make sure you never go over 998 characters.

Microsoft Wireless Keyboard 700 v2.0 - Keystroke Problem

2010-04-05T12:46:00.000-07:00

I thought I'd post this real quick in case someone else is experiencing the frustrating problem I was having. I have a Microsoft Wireless keyboard and mouse 700 and it has been driving me up the wall lately. The keyboard would miss keystrokes, would occasionally respond with a repeated keystroke and would otherwise be annoying. I tried replacing the batteries, re-syncing and restarting and nothing helped.

Then, I tried moving the receiver device that plugs into my USB port further away and voilà: Here I am typing up a storm without getting stressed. It is nice to have a keyboard that works again. Apparently the USB receiver cannot be within a certain distance from my keyboard... maybe I should have read the instruction manual.

Update (6/23/10): The manual states that the mouse & keyboard should be between 8 inches and 4 feet from the receiver.

Update 2 (8/10/10): I've officially given up on this mouse & keyboard. The mouse drains a fresh pair of AA batteries in about two weeks and the keyboard constantly has connectivity problems. I went back to old-fasioned wired replacements, for now.

PCI and multiple servers

2010-03-31T14:21:00.000-07:00

I noticed that a few web hosting companies out there recommend that you lease two servers when trying to reach PCI compliance. Which leaves me wondering, how can a small business afford to even be PCI compliant if this is a requirement?

PCI DSS compliance requires that "only one primary function is performed per server" (2.2.1). Because "primary function" can be interpreted different ways, on-site auditors (QSAs) will sometimes require 2 servers (one for the web servers and one for the database). The logic is that there is an increase risk for data breaches if there are multiple services on one box, giving a potential hacker multiple avenues of attack.

As a side note, many interpret "one primary function" to mean one collective function (e.g., one server is used for payments and thus can have a web server and database server to achieve this collective function). Moreover, you may be able to mitigate the danger of running too many services by never storing sensitive data in the first place (this is my recommendation).

So how is a small business supposed to do business online if a QSA happens to require 2 or more dedicated servers? A couple of cheap dedicated servers would run you about $300 a month.

I've not run this past a QSA but I wonder, why not use virtualization software like XenServer? Chuvakin and Williams, in their book PCI Compliance, talk about how virtualization can be effectively used to separate sensitive environments from other websites. With virtualization you can create multiple virtual machines (VM) on one server. Each VM acts as a separate server, completely isolated and contained. Each VM has its own resources and cannot take more than its share of CPU or memory. Because of this, for the purposes of PCI compliance, each VM could be considered an isolated server. Each VM could be used for separate tasks and they would be kept entirely isolated. It seems to me that this would be an acceptable solution for everyone involved.

Update: Stumbled across this article about virtualization and PCI compliance. Looks like they are working towards clearing up this area of the PCI DSS. Also, this PCI DSS expert believes that, "just like virtualization, running logical partitions that are segmented from each other doesn't violate what the council is trying to prevent" in requirement 2.2.1. Lastly, this QSA states that "Virtual machines need to be treated just like physical machines when assessing them for PCI
compliance" (pg 7).

efficiency

2010-03-19T09:44:00.000-07:00

"In the clarity of this morning, I'm thankful for sleep cycles that disrupt our progress, for children that stop your work and force you to keep someone you love alive, for the need to stop and eat, to stop and drink water, to stop and talk to friends. We buy billions of dollars in books that help us be more efficient, we praise the profit margin, and all the while, God is trying to slow us down, trying to remind us of what matters and what doesn't, trying to stop our human progress, stop our creation of false Gods." -- Donald Miller

BIND, Security and PCI Compliance

2010-03-17T18:02:00.000-07:00

I get to go through some of the fun known commonly as PCI Compliance. PCI Compliance is a good thing on the whole, nevertheless, it is time consuming. Today I spent time on my DNS server. I use BIND, the open source name server that is very popular across the net.

Upon a PCI scan I got this warning: "Bind Banner." It was a result of my system telling the world what version it is running. This could help a would-be hacker determine if my system is old and if it is vulnerable to certain security holes.

To tighten it up a bit, I made some edits in my config file at /etc/named.conf

At the end of the "options" section of named.conf, I added these lines:


 dnssec-enable no;
 version none;
 hostname none;

This disables or hides the display of the version number, the BIND hostname and disables DNSSEC (which PCI scans tell me is dangerous, even though it is intended for security).

Now, to check to make sure your BIND version is hidden (be sure to restart BIND, first), enter this into the bash command line:


dig -t txt -c chaos VERSION.BIND @myhostname.com

If you want some protection against an easy DoS target, add this to your "external" view in named.conf:


 additional-from-auth no;
 additional-from-cache no;

"recursion no;" should be in there already and this will prevent your server from being an open DNS server for the world. These extra lines above will go a step further and prevent the display of root name servers for external queries. While this is just your DNS server trying to be helpful, your server should just ignore all external queries that are for domains you don't serve. (More info here.)

PS. Looking for a list of all the available options in BIND? Here is a good one, although there is not a lot of description, it does look complete.

Terms of Service - Don't Add This

2010-03-15T19:24:00.000-07:00

Because I run a small business, I have to do everything – marketing, accounting, IT security, legal – on top of the real work of making the web site or application for my clients. When it comes to the big, confusing or time-intensive tasks, though, I am willing to pony up and pay the professionals (like when I do my taxes). Today I decided I should put on one of my many hats and take a look, once more, at my company's Terms of Service (TOS).

Interestingly, I came across this very helpful blog entry about including the famous "we can change this whenever we want and you have to check this website everyday for changes" clause that many businesses add to the top of the TOS. I always wondered about this. It doesn't seem quite fair – is it really legal? Well Eric Goldman argues that it can pretty much make your TOS invalid. Read here for more.

Resolving Name Server IP Addresses

2010-02-18T20:13:00.000-08:00

Ever thought about this? If I want to find the website example.com then my computer begins by contacting the TLD (.com) and finding the authoritative name server for example.com. If it is ns1.example.com, then how does my computer figure out the IP address for this subdomain? Is there a name server for the name server?

After searching about, I've been educated.

This problem is called circular referencing, for obvious reasons. So, to solve this problem, you register name servers with the same people you register the domain with. You specify the name of the name server and an IP address and they register what's called a glue record. This glue record is stored by the TLD (e.g., .com) name servers so that the IP address of your name server (e.g., ns1.example.com) can be sent when needed.

Bit 'o knowledge for you.

Need to check your glue records? A quick search on Google for glue record provides promising results, like this site.

PHP image manipulation

2010-02-16T11:03:00.001-08:00

If you have ever wanted to dynamically create or edit images, GD is a great solution for PHP (and LAMP configurations). I am writing this blog entry mostly because I was amazed at how easy it was to install. I just picked it in easyApache (using WHM) and "tada!" – it works. I can't say that about imagemagick. I've tried and tried to get that bit of software to work (on multiple servers) and it is always a pain. I remember on my first server (hosted by another company) I had requested imagemagick and they even had trouble installing it—the help desk ticket was pretty long by the time it was closed.

Anyway, moral of the story: Go with GD for dynamic image manipulation in PHP.

APC.php not Working

2010-02-15T01:00:00.000-08:00

I was getting a new server up and running and wanted to install APC (Alternative PHP Cache). Things were going great. I even ran phpinfo() and noted that APC had an entry. Everything was super, right?

I wanted more confirmation, so I used SSH, located apc.php and copied it to a domain for public access. I wanted to know how well APC was working for me. However, it wouldn't run. It sent back errors and when I tried to debug it I got no where.

Turns out, APC wasn't really doing much of anything. I had PHP installed and running as a CGI instead of an Apache Module. If PHP runs as a CGI, APC closes at the end of each script run and the cache is lost—it doesn't make much sense to use APC in this situation. While runing as a CGI has some security benefits you lose a bit of performance and, more importantly to me, APC doesn't really work.

I use WHM and so I went to "Main >> Service Configuration >> Apache Configuration" and then changed the PHP 5 handler to DSO. This solved the problem and apc.php loaded just fine the next time I tried. And it even had some pretty stats for me to see.

Easy Ways to Accept Donations Online

2010-02-13T10:09:00.000-08:00

There are a lot of options out there to help non-profits accept donations online. I want to briefly mention to different categories of solutions to help people who are trying to figure out what is best for their non-profit or church.

Perhaps the easiest solution is to use a service like PayPal. You sign up for an account and give them your account info and you are up and running soon. This is technically called an aggregation service, because you do not need to have any special accounts set up—PayPal has done that and accepts payments on your behalf. Google has a similar solution except that it, unlike PayPal, unfortunately requires donors to have Google checkout accounts. With these types of services you will have to pay higher per-transaction fees (10 to 30 cents) and transaction rates (around 3%).

The second option is to get what's called a merchant account. This is a special bank account that allows you to accept credit card payments directly (instead of through an aggregator, like PayPal). This is a process that requires an application and some extra steps to setup, but it is often worth the time. The per-transaction rates are almost always lower this route, but there are monthly service fees that are standard (around $10 to $30). Because of this, merchant accounts best for non-profits who are accepting more than a couple hundred in donations a month (but you'll have to do the math to make sure). The cool thing is that if you decide to get a merchant account, your donor's bank statements will actually have your organization's name next to each donation (as opposed to PayPal or Google).

If you want to accept donations online, the second option is a little trickier (because of security standards called PCI-DSS). But, there are companies out there like BlueFire Donations, which can help make this a breeze, helping get non-profits accepting credit credits online in no time.

Got a question? Post in the comments and I'll do my best to help out.

cURL and SSL

2010-01-22T14:52:00.000-08:00

cURL is a nice little extension to PHP. You can read an intro here.

I use cURL a lot. It seems that do a lot of web applications that connect to other servers for transactions (like payment gateways). You can do SSL or HTTPS requests to other web hosts without validating their certificates but you leave yourself open to man-in-the-middle attacks. While this seems unlikely if you are running out of a data center, checking the certificate validity is too easy to skip.

The one thing that you must do for this to work is tell cURL where the CA-bundle (or CURLOPT_CAINFO) is located. I am running CENTOS 5.4 and found CA info at "/etc/pki/tls/certs/ca-bundle.crt". I can enable this with the following two lines added before curl_exec();


 curl_setopt($ch, CURLOPT_CAINFO, "/etc/pki/tls/certs/ca-bundle.crt");
 curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 1);

Group Text Messaging - Schedule Text Messages

2010-01-22T10:18:00.001-08:00

I wanted to take a moment to promote another site I relaunched yesterday. It is ShortShout and it is a group text messaging platform. I've worked out some pretty low per-message rates to make it an affordable service. It can be used by any group and has some special info for churches who want to do text messaging. Check it out at ShortShout.com.

One of ShortShout's customers is a marketing team in Michigan led by Denise. Denise told me that she uses the system "to encourage and stay in touch with her friends/team members." Denise, in her own words, "is a motivator and keeps her team focused on their goals" with group text messaging and ShortShout.

MySQL and mysql_select_db

2010-01-14T08:06:00.000-08:00

I was convinced that mysql_select_db() was not working today. I wanted to simultaneously connect to two different databases. However, when I called the mysql_select_db function, it seemed that both connections were changing to the database I specified. I couldn't get one link to stay on the original database while I changed the second link to a new database.

After a little digging around I found a helpful user comment about using mysql_connect. The fourth parameter of this function is "new_link" and if you want to simultaneously have two connections open and both connections use the same credentials, you must set this parameter to TRUE. If you don't, it sees that the credentials are the same and will reuse the same resource link, even if you set a different variable.

So, this:


<?PHP
$conn1 = mysql_connect(HOST, USER, PASS);
mysql_select_db(TABLE_1, $conn1);  
$conn2 = mysql_connect(HOST, USER, PASS);
mysql_select_db(TABLE_2, $conn2);

turned into this:


<?PHP
$conn1 = mysql_connect(HOST, USER, PASS, true);
mysql_select_db(TABLE_1, $conn1);  
$conn2 = mysql_connect(HOST, USER, PASS, true));
mysql_select_db(TABLE_2, $conn2);

And tada, I could simultaneously connect to two (or more) databases.

jQuery and onKeyUp

2010-01-08T19:28:00.000-08:00

jQuery has the method keyup to take the place of the html attribute onkeyup. So, for example, let's say want to run a javascript function each time escape is pushed. You would do this like so:


<script type="text/javascript">
$(document).keyup(function(event) {
  if(event.keyCode == 27) { // Capture Esc key
      doSuperSpecialFunction();
  }
});
</script>

With this script anytime a key is pressed and goes up in the body of the document, the function specified runs. Simply replace the keyCode number (27, above) with the number that corresponds to your key (like 13 for enter or 8 for backspace). Remember, you must have jQuery "installed" in order for this to work.

Inline Block, A Quick Work-Around

2009-12-01T16:10:00.000-08:00

I've had previous struggles with inline-block quirks, and have been recently using a handy css solution I thought I'd share. Whenever I want a certain div, for example, to be displayed as inline-block, I simply add the class "inlineBlock" to it. Well, you ask, how do I define this class? I am glad you asked. I define it like so:


<style type="text/css">
.inlineBlock {
 display:-moz-inline-stack;
 display:inline-block;
 zoom:1;
 *display:inline;
}
.myClass1 {
 /* other stuff */
}
<style>

<div class="myClass1 inlineBlock">
 A fancy inline-block div.
</div>

This CSS causes my div to be displayed correctly as an inline-block in every browser I've checked. Not sure how the magic works specifically, but it does the job! If you have improvements or observations, add a comment below.

Browser detection with jQuery

2009-11-24T17:49:00.000-08:00

Those who create web apps to work for the widest possible audience, know that overcoming browser quirks is an unfortunate part of the job. The two greatest pains for me are IE6 and IE7, both common browsers with an uncommon ability to screw up my pages. (I think IE8 is a wonderful improvement to this line of browsers.) Recently I found out how to determine if a browser is IE7 or lower using this handy jQuery statement:


<script type="text/javascript">
if ($.browser.msie && (parseFloat($.browser.version) < 8)) {
     // Do something for IE7 or IE6
     // Like replace some image src with a gif (instead of transparent png)
     // or change a style to look right
}
</script>

Of course, you must have the jQuery library included on the page before this. But this little script is great for dealing with those demanding IE-specific quirks, like display:inline uniqueness, select-box borders and transparent png support.

IP Geo-Location Database

2009-11-24T16:53:00.001-08:00

In a previous post I talked about a nice website that will help you block countries from your site using the IP address.

In a related stream of thought, I found an entire database of IP addresses that is available for free. The nice people at IpInfoDb have an entire database of IP-to-location data available for download (in SQL, too). And, they give you some tips and PHP code on how to most effectively use it. Thanks IpInfoDb!

Good Design

2009-11-21T21:35:00.000-08:00

I respect good design. Or maybe I should say that I love good design. Trained as an engineer I have always appreciated the extra effort that has been put into certain objects, products, services, etc. There is something about the well designed computer or cell phone or chair, that just seems to captivate me. It is a form of art that everyone can appreciate.

I just recently watched the movie Objectified by Gary Hustwit. The movie explores the concept of design and what it means. In one interview a designer in Europe comments that the one company in the world that takes design seriously right now is Apple. I agree with that. Their products exhibit a quality of design that far surpasses many others.

It has me thinking about good design in websites. What does a well designed web site look like? How can I make my websites function and work on a higher level? It is a fun thing to think about and has my head filled with new ideas and approaches. I hope to be able to put some of it to the test soon.

javascript compression

2009-11-07T21:39:00.000-08:00

Compression of JavaScript is highly recommended. It reduces file sizes and quickens browser response times. There are a few good sites out there that do JavaScript compression. There are even some that will "obfuscate" your code, making it much harder to reverse-engineer.

Well, Google has released its JavaScript compression tool called Closure. There is even an online version.

Block countries from your website

2009-10-30T10:10:00.000-07:00

Ever wish you could block certain countries from your web server? I have. Sometimes it seems like all the hackers live in one place. I came across this website today that will create an .htaccess file for your web server. You can block any number of countries from your website based on their IP addresses. It cannot prevent determined people from using VPNs or proxies, but it works as a first line.

jQuery, checkbox status

2009-10-14T23:09:00.000-07:00

I wanted to find the state of a checkbox and hide or show some text using jQuery. The thing that I got stuck on was determining if the checkbox was checked. This is how I ended up doing it:


<script type="text/javascript">
$(document).ready(function() {
 $("input[name='cbname']").click( function() {
  if ($(this).attr('checked'))
   $('#text').hide();
  else
   $('#text').show();
 });
});
</script>
<input type="checkbox" name="cbname"> Hide!
<div id="text">
Disappearing Text
</div>

Simply checking the attribute 'checked' of the checkbox returns its state (in jQuery 1.3.2, at least).

Starting another script

2009-09-12T13:38:00.001-07:00

I have a PHP script that customers would use to start a process. The process was time-intensive, so I had it start another script in the background. It was important that the customer did not have to wait until the long process ended. After trying a few things, I found a forum that gave me my solution (sorry, can't find where it is anymore). This starts a PHP script in the background from within another PHP script:

shell_exec('php /public_html/accountname/longProcess.php > /dev/null 2>/dev/null &');

Simply replace the script name with our own and it should work (note: not sure if the whole path is required). What this does is force the standard output and error output to be discarded and the final ampersand causes it all to be run in the background.

TinyMCE Spell Checking

2009-09-08T21:57:00.001-07:00

In my last post I talked about the HTML/Rich-Text editor called TinyMCE. I have used it on a few sites for content management. Well, today I've learned of a plug-in for TinyMCE that is very promising.

This plug-in is a spell and grammar checker called After the Deadline. It is free for personal use, and from some of my limited tests it appears to be very powerful. I read on TechCrunch that it was recently acquired by WordPress co-founder Matt Mullenweg and is already enabled for users on their platform.

Need a spell checker? Check it out: http://www.afterthedeadline.com/

Text Area to HTML Editor

2009-09-03T01:00:00.000-07:00

TinyMCE is my visual HTML editor of choice (a.k.a. What You See Is What You Get or WYSIWYG). I use it on a number of websites to allow customers to update content without needing to take a class on HTML and CSS. It has worked pretty good for me thus far and best of all, its free.

One particular feature that I've recently discovered has made me pretty happy. TinyMCE allows me to supply a list of URLs for TinyMCE to make available when a user wishes to insert a hyper link. This is a beautiful thing. Before the user had to copy and paste every URL they wanted to link to.

Just as cool is that I can also supply a list of images and videos that can easily be inserted (no copying and pasting these URLs either). So after uploading an image to the server, they can edit a webpage and TinyMCE already has this image's URL ready if it is to be used.

In order to do all this, at the end of my TinyMCE initialization script I added these three lines:


<script type="text/javascript">
 tinyMCE.init({
  ...
  external_link_list_url : "/tiny_mce/links.php",
  external_image_list_url : "/tiny_mce/images.php",
  media_external_list_url : "/tiny_mce/media.php"
 });
</script>

Now, on the other side of these specified URLs I have a PHP script that rounds up every URL (or image or video) on the server and provides it in a JSON encoded list for TinyMCE. This way, when a user wants to insert a link (or image or video), TinyMCE already has a good list of links that the user can choose from.

Let's assume, for the PHP example script, that you have a 2D PHP array called $linkOptions that had every link the user might want to use. Here is a part of links.php, specified above:


<?PHP
 header("Content-type: application/javascript");
 
 echo "var tinyMCELinkList = new Array( \n\t";

 $firstLink = true;
 for ($j = 0; $j < sizeof($linkOptions); $j++) {
  // Go through each link of the array
  if ($firstLink) {
   echo "\n\t"; // No comma for the 1st
   $firstLink = false;
  } else echo ",\n\t";

  echo '['. htmlentities($linkOptions[$j][0]); // Link Name
  echo '","'. htmlentities($linkOptions[$j][1]) .'"]'; // Link URL
 }

 echo "\n".');'; // All done

Then, you would need to do replicate something like this for each of the link lists specified. Hope you find this feature as useful as I. Good luck!

PS. TinyMCE is also the HTML editor used for WordPress.

Domain Renewal Group

2009-08-25T20:02:00.000-07:00

This company has such awful business practices, I have to make a quick entry about. Today I received a bill-like letter in the mail from Domain Renewal Group (the same company as Domain Registry of America). In the letter they say that my domain name is expiring soon (as in 5 months from now) and that I should renew with them today. But, they are not the company I originally registered with nor would I ever want to (their fees are ridiculously high).

It is clear that Domain Registry of America has made a conceited effort to trick people into paying them through what appears to be a bill. They do say that "This notice is not a bill" but it is buried in the middle of a wordy paragraph, where it will be easily missed. I personally know of one organization that unwittingly sent them money, thinking that they were obliged to do so. Instead they fell for what amounts to a dirty scam and wasted their money. (Unfortunately their IT people were not consulted by their accounting people.)

So, if you get a fake bill from Domain Renewal Group, toss it in the garbage and maybe write your own review of this unethical company.

Other related sites: Domain Registry's BBB record, Dynadot's warning (a good registrar), and an understandably frustrated blogger.

CSS: inline-block

2009-08-22T15:22:00.000-07:00

So much time spent on one CSS statement - "display: inline-block;"

This statement is perfect for a new site I am working on. I want three columns of data to display side-by-side. But, I had many frustrations trying to get it to work cross-browser. This is what I found...

Inline-block works great on IE 8, Chrome and recent versions of Safari.

I had issues when it came to IE6 and IE7, no big surprise there. I fixed this with some conditional comments and the CSS property "display: inline" which acts the same as inline-block in IE.

I also had problems with Firefox 3! My old love of a browser takes issue with this statement (when used with other specific statements). Apparently "display: inline-block" does not play nice with "overflow: hidden" and "text-align: center". This strange alignment of the planets causes my text to align left, instead. Quirky. I ended up commenting out the overflow property, and everything worked for Firefox 3. (I also added a strange Firefox style statement to make sure it worked on FF 2: "display: -moz-inline-stack;".)

Group text messaging

2009-08-06T00:10:00.000-07:00

Just recently ShortShout has been released to the world, so I thought I'd give it a mention here. ShortShout is a group texting manager. It is a great way to keep groups up to date on events and changes and other things. It allows group leaders to send out SMS messages to everyone who subscribes. I originally designed it for my youth group. I found that many of the youth didn't check their email very often at all–and I think this is true for most people in general. But, they did check every text message they got. And that's what makes ShortShout such a great tool. You can send messages to people and not only are they read, but they are read almost as soon as they are sent. You can't beat that. This makes ShortShout a great tool for all kinds of groups, from youth groups to bowling leagues, basketball leagues to office pools. Check it out: http://shortshout.com/

Scaling

2009-07-17T22:35:00.000-07:00

Sometimes in life we have to face good problems -- problems that we are happy to have. One such problem is scaling. And it is only really thought about when your website is doing well and receiving a lot of traffic. Thus it is a good problem.

Here are some tips to scaling well and enabling your website to grow large, easily. (By the way, I am assuming a LAMP configuration.)

1. Be very careful using session data (e.g., $_SESSION['varname']), because if you ever need to expand to multiple web servers, this wont work. Session data is stored in memory and will not be present if the web visitor would happen to use a different server for a second request.

2. I know this is common practice, but I will repeat it anyway: Use library and include files for your scripts. In these files include common functions and common parts of your rendered pages (e.g., headers, menus and footers). This makes updating your entire website as simple as editing one file.

3. Plan ahead for major traffic spikes by using grid hosting (e.g., Media Temple's "Grid Service"). Grid hosting is a deal where server resources are pooled together and used for whatever site needs them. This way, when you get a major spike in traffic (e.g., you get slashdotted), you have ample processing power and bandwidth to handle it. You may have to pay a bit more when you get traffic spikes, but it is better than being suspended by your host.

4. Deliver your media content on another set of servers. Media files like movies and audio can take up a lot of bandwidth and file space. Whenever possible offload these files on to someone else's site and you'll save some cash and be more scalable. For example, upload your movies to YouTube or Vimeo and then embed their flash players in your own site. Alternatively, you can use a Content Delivery Network or something like Amazon's S3. When you host content with any one of these solutions you also gain in the area of speed and quality of delivery.

There is a lot more that can be said in this area, but these are the things I've come across that have helped me.

jQuery's getJSON

2009-07-02T08:45:00.000-07:00

I recently had a struggle getting jQuery's $.getJSON function to work on Internet Explorer (IE6 & IE7). I tried and tried to debug the javascript, but was getting no where. After giving up for a while and coming back to it the next day, I thought of checking the target file—the file jQuery was fetching asynchronously—for problems.

It turns out that IE doesn't like JSON encoded documents that are specified as UTF-8. Not sure what the problem is, but the document has to be returned in a format IE likes. If not, IE will not allow jQuery to process it. Now, I had a header on this file that specified the content-type and charset. But, I changed it and instead I put only the content-type at the top of my JSON-returning PHP files:

<?PHP
header("Content-Type: application/json");
?>

Why does IE balk at UTF-8 specified charsets for JSON-encoded responses?? Who knows. But, from the research I've done, specifying the charset in the HTTP header is not something that is required. I am sure there are good reasons to specify the charset, but this (above) works great for me.

email piping with PHP and cPanel

2009-04-28T15:56:00.000-07:00

I had a lot of trouble piping emails to a PHP script today. There was a real scarcity out there in terms of information (or I just didn't know how to search for the right terms). So, I thought I'd post about my fun in case someone else got stuck. (By the way, I use cPanel 11 and started with this script.)

What I wanted to do was set up an email address that would pipe to a PHP script. That is, my PHP script would get a copy of the emails. Then the PHP script could parse the file and do whatever; make a database entry or something similar.

I ran into two problems.

First, I would get a return email that said "Local delivery failed." It would have this at the top of the email:

pipe to |/home/accountname/public_html/emailin.php
   generated by msg@accountname.com
   local delivery failed

I found some website somewhere that suggested changing the file permissions for the PHP script (emailin.php in this case). So that is what I did, and it seemed to help. I used the cPanel File Manager to change the permissions to 754.

That fixed this problem.

The second problem was that despite receiving the email at the script and doing the appropriate things with it, I would still get an error email back. So, even though it all worked, my email would bounce back saying:

A message that you sent could not be delivered to one or more of its
recipients. This is a permanent error. The following address(es) failed:

 pipe to |/home/accountname/public_html/emailin.php
   generated by msg@accountname.com

The following text was generated during the delivery attempt:

------ pipe to |/home/accountname/public_html/emailin.php
      generated by msg@accountname.com ------

Again, after a few hours of searching I found someone that suggested changing the hash bang at the top of the script file to this: #!/usr/bin/php -q

That dash q made all the difference.

This was my adventure.

Logo Design

2009-04-17T13:46:00.000-07:00

Logos are everywhere. And I think every group needs a good logo, if they want to have their stuff easily recognized. I recognize logos much faster than I can read. Logos helps brand everything you do. Moreover, logos have truly utilitarian value for all types of cultural groups. Most churches and non-profits can benefit from a good logo. It ends up being used on websites, business cards and envelopes.

But, I have seen my share of ugly logos. (And, I must admit, I've even designed a few ugly ones myself.) As I am in the process of redesigning the Firelit logo, I did a little searching and found a couple good sites about logo designs, along with some sites with really good examples of logos.

David Airey has a good primer in logo design.

LogoPond has examples of well done logos.

Or use this site to see how "holy" your current church logo really is. He he ;)

javascript wonderland

2009-04-10T08:45:00.000-07:00

There is a lot you can do with JavaScript and DHTML. You can have custom pop-up messages, you can make things move around the screen, you can have pop-down menus, you can even send data to web servers (AJAX). But, it takes some work to get everything running smoothly. Especially when you want a certain user interface to work great no matter what browser is used.

jQuery is a great solution for JavaScript and user interface problems. They have a wonderful library of visual affects and more. Just take a look at their demos to get a feel for what I am talking about (in terms of UI). Then, if you want to integrate it into your own site, just download the code and plug it in (with a few tweaks and bumps - but that is expected, right?). It is a great way to get good functionality going quickly and reliably in a web site.

sIFR

2009-04-02T08:03:00.000-07:00

Ever want to do a design for the web but are totally dismayed to find the font families available are very limited. There aren't many fonts to choose from when you want your design to look the same across all browsers.

Mike Davidson and Mark Wubben take the credit for this great solution called sIFR (Scalable Inman Flash Replacement). It takes the normal text within your page and places a flash movie over the text with whatever font you want. So your plain, boring text is hidden with a flash movie of identical content and your personal, fully-cross-browser-compatible font. You can learn a lot more by checking out their site. It takes a little effort to set up, but works good and is virtually seamless.

Audio

2009-03-25T09:16:00.000-07:00

I use a website called iStockphoto when I need to find some good images for a website I am designing. And I usually have good luck finding something that will work.

Yesterday, I received an email from iStock and I learned that they do audio, too. They call it iStockaudio and you can find all kinds of royalty free music at fairly inexpensive prices. It could be a great place to find audio for your next website's flash or even for YouTube videos. It has potential. It only seems that searching for the right audio clip would be the hard part.

Helvetica

2009-02-25T23:08:00.000-08:00

I watched the movie "Helvetica" tonight. Yes it is about a font. And, as you might guess, it is kinda a slow movie. Nonetheless, some things were interesting. In particular I liked the short and interspersed review of part of the history of graphic design. Despite its focus on "Helvetica" and type face in general, it had many ideas and implications for design in general. I recommend it as a rainy day movie for any interested graphic design.

Trends & Ideas

2009-01-22T20:49:00.000-08:00

After a Google search I came across this great site that lists some of the web design trends that they noticed in 2008. It is a great site to get ideas and/or insiparation for any kind of design. There are some neat things going on and some uber creative people out there. Check it out: http://www.webdesignerwall.com/trends/2008-design-trends/

Accepting Donations Online

2009-01-21T10:12:00.000-08:00

Many online non-profits want to accept donations online. And for good reason, it is just easier for a lot of people to give that way. I know my wife and I prefer to give this way. We don't have to carry cash and we can donate whenever we want, easily and securely. The problem is, that most non-profits don't have the expertise or the money to pay for a custom solution.

In comes BlueFire. I have partnered with Halo Merchant Services to provide non-profits and faith based organizations an easy and low-cost way to accept donations online. Everything is taken care of for you. No need to worry about SSL certificates, advanced web scripting, or anything else on the technical side. All you do is copy and past a piece of code on to your website and viola, all done.

Payments & Donations

2009-01-03T23:17:00.000-08:00

I often work with groups that would like to accept donations online. There are always the easy alternatives available, like PayPal and Google Checkout. But, I recently had the chance to integrate a payment gateway into a custom cart. I had great success and was impressed with the business I worked with so I am giving them a shout-out here. If you are a non-profit (like a church or charity) and need to process credit cards or e-checks online, check out Halo Merchant Services.

Sitemaps

2008-12-09T11:47:00.000-08:00

Sitemaps are always a little fun. You get to see just how many pages your site has and which ones are more important to you. But, they are really important for search engines. It helps the automated search spiders find all the pages you have and then they can gain a helpful perspective based on the last update and your priority ranking.

This is the website to check out if you want to learn more about Sitemaps: http://www.sitemaps.org/protocol.php

I usually do my sitemaps in PHP. So, I am going to break new ground here and drop some code on my blog. Since most of my sites are now PHP, here is what I typically use:


<?PHP header("Content-Type: text/xml; charset= UTF-8"); ?>
<?PHP echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n"; ?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
 <url>
  <loc>http://www.mydomain.com/</loc>
  <lastmod><?PHP 
     echo date ("Y-m-d", filemtime("index.php")); 
     ?></lastmod>
  <changefreq>monthly</changefreq>
  <priority>0.5</priority>
 </url>
 <url>
  same stuff here...
 </ulr>
 
 ... and add more urls as needed
 
</urlset>

Make sure you test the URL in your browser first, but then it should be good to go. You can let the search engines know about it in the webmaster tools or even add a reference to it in your robots.txt file ("Sitemap: http://www.mydomain.com/sitemap.php").

CSS: background-position

2008-12-01T17:17:00.000-08:00

Today I discovered a new trick I can use for background images in CSS. It is based on the background-position property. This allows the designer to offset a background image used in an object (like a span or div).

I was looking at the images that Google uses in Gmail and noticed that some of their icons come all together in one larger PNG file. They form an array of icons. After some searching the web I landed on this article that explained how to select a single image from an image array: http://www.guistuff.com/css/css_imagetech1.html

Pretty neat. It reduces page load-time (because you load one image instead of multiple ones, and each file comes with overhead transaction data) and removes the need to pre-cache images for DHTML. A little bit of JavaScript and CSS and you're all set. It is going to be a handy thing to have in my design toolbox.

PDF Creator

2008-11-20T10:23:00.000-08:00

Whenever posting documents to the internet (or emailing them) it is always best to use PDFs. Using a PDF ensures that the document will look exactly like you intended it. If you use Word or Excel or something similar, there is always the chance that someone else wont have the same version or same fonts and that the end result will look very different. And, not everyone has the same software programs--Microsoft Office is expensive. But, Adobe Acrobat Reader is free! Also, it is generally more professional to send documents in PDF, such as invoices or proposals.

So, how do you create these PDFs without dishing out all the cash for Adobe Acrobat, the not-so-free version? I have been using the free PDF creator PrimoPDF for some time now. I really like it and it has not given me any problems. It creates great looking PDFs very quickly. It installs a new printer on your computer so that you can create a PDF from any program. But instead of something being printed physically it creates a PDF file that you can save.

Works great and it is free. Two things I value, as is apparent by previous blog posts. :)

Images

2008-11-07T23:00:00.000-08:00

Images are very important to the construction of an appealing website. I wrote before about the use of great image software, like GIMP. But, we still need to get those great stock photos to round of a site.

There are some great sites for this, even for free pics. Flickr, for instance, is one of these free picture sites. But not all pictures are available for all purposes. Use Flickr's advanced search to find those that you can use. On the bottom of their search page, you'll see options for creative commons licensed images. You can search multpile sites at once using everystockphoto.com. Or, if you want the easy and high-quality route and are willing to pay a small fee, check out iStockphoto.

New Site - Search Engine Submission

2008-10-04T12:39:00.000-07:00

Do you have a new website? Is it time to let the world know about it? Then submit it to the major search engines! And don't be fooled, this is not something you have to pay for. There are a lot of people out there trying to make money by submitting your site to search engines for you. You don't need to do this because it is really easy and straight forward.

According to Hitwise.com, the top 4 used search engines are Google, Yahoo, MSN and Ask. Almost 97% of all searches done on the internet are through one of these engines. So, these are the guys you will want to inform about your new website.

Visit each of the links, and you should be good to go:

Google

Yahoo (you'll have to make an account)

MSN Live UPDATE new URL for Bing

Ask (you'll have to make a sitemap)

Site Search Engine

2008-09-26T09:09:00.001-07:00

This is my last post about free Google services (for now). This one is about Custom Search by Google. Searching is a very important tool for a website to have, especially for sites with a large amount of content. You can not have visitors getting frustrated and leaving because they can not find what they are looking for.

The problem is, search engines are not easy things to create. If you have ever seriously thought about the prospect, you know it takes a lot of time and energy to implement a good one. Instead, why not use the great search technology that Google has created right on your site?

Google allows webmasters to install code that will allow your visitors to search your site. They constrain all search results to the domains you choose so the results are specific to you. And you can integrate the search results directly into your own template, so it all has a very coherent look and feel.

PS. "Custom Search" is similar to but not the same as "Site Search," a commercial (i.e., not free) service offered by Google.

Google Calendar

2008-09-17T13:07:00.001-07:00

The third blog post in my series of great Google freebies is Google Calendar. Google calendar is great for my wife and I. We both share a calendar and we can setup events to remind each other of upcoming appointments. It helps us communicate about our shared schedule.

Beyond this, Google Calendar is great for non-profits for two big reasons. First, everyone involved with a non-profit can have a shared calendar. This way everyone is on the same page and they are totally up-to-date with what is going on. You can also manage assets and room reservations through it, if you wanted. Just like with Outlook exchange server, you can see the busy/free calendar of your invitees when you try to find a good meeting time. And it is all free!

The second reason is that you can embed your calendar in your webpage. This is great for web designers. It takes a lot of programing to get a good calendar back-end up and running. Why not use what Google has done instead? You can do a simple embed of html calendar code (like this one) or you can completely customize the front-end while using Google's back-end. There are just so many options!

Google Calendar has worked well for me and saved me a lot of time. It is worth considering, especially with its low price tag (its FREE, if you missed that).

Free Email

2008-09-12T22:08:00.000-07:00

The next Google service that I would like to highlight is hosted email. This is a lesser known service offered by Google, I believe. However, it is probably the most powerful and most beneficial free service available to non-profits! Google offers free email service for any domain. Non-profits also get enhanced services that businesses have to pay for. You can get as many email addresses as you want, the SPAM protection is amazing, and each account gets over 7 GB of space!!

Once you set it up you get an administrator panel where you can manage all account information. And even though it is Gmail, all of your email addresses will reflect your domain name (e.g., name@your-domain.org). You can also customize it a bit and use your own logo. Additionally, you will get chat and other Google applications automatically. It can really boost in-office communication and efficiency.

I have used this service on multiple domains. I have set it up for the First Baptist Church of Los Angeles, and it has been a dream for them. Major universities have also started using it. Fuller Seminary, for example, uses it for all their student accounts.

Check it out. I really think you'll like it.

Analyzing Traffic

2008-09-08T22:22:00.000-07:00

Google has tons of great tools for webmasters. And the best part is that most of them are free! So, I decided to spend some time mentioning some of Google's free services. They are perfect for non-profits, ministries and whoever else is trying to save some money. This is the first post in a series on free Google resources.

The first Google service I want to mention in Google Analytics. It is a great statistics and web traffic analyzer available to the public. It has all kinds of nifty features and abilities. For instance, it will produce multiple world and country maps of your visitors, it outlines traffic flow, it details traffic sources, records visitor browser information and tons more. You can also set it up so that periodic PDF reports are sent to email addresses you provide--perfect for that monthly report.

It has one drawback: it is javascript based. This means you can only track web page hits, not image loading or anything else. It also means that anyone with javascript disabled will be invisible to the reports. However, with this in mind, Google Analytics is still an amazing resource that everyone should know about.

Virtual PC

2008-09-02T23:02:00.000-07:00

As a web designer, I want to make my web pages look pretty in any browser people may use. And, one of the hardest browsers to test for is Internet Explorer 6 (IE6). Unfortunately, my Google Analytics show that a little under half of all IE users use version 6. A slight majority have switched it IE7. But not enough to forget about IE6 users.

To really be certain that my page will look right in nearly every visitor's browser, I test in Firefox, IE7, Safari and IE6. I figure this will cover 95% of my visitors, plus if it works in these there is a good chance it will work in the others (e.g., Opera, Mozilla, etc.).

The problem I ran into is being able to test a site in IE6 and IE7. You can't have both versions installed on your PC at the same time: Microsoft forbids it. To help us designers out, Microsoft has virtual hard drives (VHDs) available with IE6 installed. So, if you download Virtual PC (free) and the install the VHD for IE6 at http://go.microsoft.com/fwlink/?LinkId=70868, you can easily test your design with IE6 on the same computer that has IE7 installed.

There you go. But, this would all be a lot easier if everyone just upgraded to IE7! What are they waiting for?

Transfering Websites

2008-08-28T23:28:00.001-07:00

I have transferred a few websites and domain names lately. Here are two tips that I think are worth writing down for now.

First, do things in the right order. If you are switching both the web host and domain name service, doing things in the right order will eliminate any downtime. Begin by starting your new hosting service and transferring your site's data there from the old host. Next, change your DNS to point to your new host. Then you can initiate the transfer of your domain. Doing it in this order will cause the switch to be seamless. I learned this the hard way. I found that after you initiate a transfer of a domain name it takes 5 business days and the DNS is locked during the period--no updates or changes allowed.

Second, there is a great tool that can help you change a site's script code from ASP to PHP. For instance, I had a site hosted on Windows Server and wanted to transfer it to a Linux server. The tool is free and it is called ASP2PHP. I have used it a bit and had some good successes. There are a few bugs, but it is a lot better than hand coding everything all over again.

That's all for now...

Image Editors

2008-08-26T20:07:00.001-07:00

There are some good, free image editors out there. If you are on a short budget but want to produce some top quality images, check these out:

Picasa2 - This is a really easy program to use and it is great for basic photograph edits. It handles some otherwise intensive tasks with easy (like shrinking and emailing images, exporting at reduced sizes, creating HTML photo albums). I also noticed that its file type compatibility is impressive (it was able to open a raw image file from my SLR).

Paint.NET - This is a more advanced image editor that is really easy to learn. It has a lot of features, is constantly being updated by its creator, is pretty powerful, and anyone can learn to use it. There is also an online library with extensions if you want even more graphics tools. When I first got into web design, this is the program I used.

GIMP - Now this is my favorite. It is even more powerful than Paint.NET and can create some amazing pictures. It rivals Photoshop in many ways. And, just like the others above, this one is free! There is a drawback, however. It is a hard to learn. It took me some real quality time before I felt comfortable with it. I suggest going to YouTube to watch some free tutorials on how to use it. This will give you a much needed head start on the learning curve and reduce some of the frustration that many experience. This is the only image editor I use now for web and graphic design.