Inline Block, A Quick Work-Around

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.