Archive for the ‘Guide’ Category

Migrating Your Blog from Blogger to WordPress

Wednesday, April 7th, 2010

How to convert your blog from Blogger to WordPress:

1. Make sure that your blog is in the “new” Blogger format and is not hosted on your own FTP server. To do this, first make sure that Blogger is publishing to a domain at blogspot.com and that you are using one of the new templates. If you can use the new templates or widgets, you are running the new Blogger.

WordPress Import

Go to Tools, then Import to grab data from your other blog.

2. Install WordPress on your host, and go to Tools, then Import. Choose Blogger from the list, give WordPress permission to grab your posts, and sit back. WordPress will soon have all your posts, tags, and comments. After importing the XML the button changes to allow you to map Blogger authors to WordPress authors. Remember that if you were publishing on your own FTP with Blogger, it may have put images in a different folder than WordPress does. Feel free to reconfigure WordPress, and move Blogger’s folder of images to where it needs to be on your host.

3. To preserve links, go to Settings, then Permalinks. Here you can choose a format for posts, categories, and tags to be used when WordPress generates links. Select Custom Structure and add the path /%year%/%monthnum%/%postname%.html. This will ensure that you can preserve your traffic when you move over to WordPress, so users who have bookmarked the old posts won’t get lost. WordPress might not be able to edit the .htaccess file for you after saving the permalink changes. If this happens it will produce the necessary code at the bottom of the page, which is easy to overlook.

Path Settings

Edit the path settings to reflect your desired URL format.

4. FOR ADVANCED USERS: The last step is to go into the default WordPress theme folder (wp-content/themes/default) and edit style.css and the pieces of the PHP template (header, footer, sidebar, etc.) to match what you had before. Be advised that if you don’t know what you’re doing, you can really screw up your template this way, but this is where you want to be if you have a very customized layout.

… and voila, now you should have a working WordPress blog with all your Blogger content safely inside. Hope this helps you make the transition.

Opening a Link in a New Window, and How Not To

Friday, May 8th, 2009

I often tell everyone here to avoid examples of JavaScript on the Internet, because more often then not it’s incorrect. The same goes for most of the popular examples of how to cause a link, an A tag more specfically, to open in a new window.

The most popular and incorrect way is using the target attribute:

<a href="http://www.example.com/" target="_blank">Using Target</a>

The target attribute was meant to direct content to load in a specific frame. In this case the keyword directs the browser to load the page in a new window, but with frames long dead and gone this little gem lives on as a reason people “can’t use HTML Strict.”:

The most common solution that people came up with this was to use JavaScript, but in some strange ways. Instead of opening the link directly, the page would go to an anchor and JavaScript would open the URL in a new window:

<a href="#" onclick="window.open('http://www.example.com/');">Using Onclick</a>

The HTML will validate, but if JavaScript is disabled the link won’t go anywhere, and it can’t be copied via a contextual menu. On top of that clicking on the link will cause the page to jump to the top, unless you add “return false;”:

<a href="#" onclick="window.open('http://www.example.com/'); return false;">Using Onclick</a>

Another approach to avoding the jump was to place JavaScript within the href attribute:

<a href="javascript:window.open('http://www.example.com');">Using inline JavaScript</a>

While inline JavaScript has its novel uses, this isn’t one of them. This method doesn’t offer much over the previous one and can be complicated even further when a wrapper function is called instead:

<a href="javascript:wrapperfunction();">Using inline abstracted JavaScript</a>

The only way to fix the issue of JavaScript being disabled was to put the link back in the href attribute:

<a href="http://www.example.com/" onclick="window.open('http://www.example.com/'); return false;">Improved use of onclick</a>

Using “return false;” stops the link from executing, allowing the URL to be put back in the href. This is the farthest I’ve seen any site go. it’s technically complete, but redundant. One last bit of JavaScript fixes that:

<a href="http://www.example.com/" onclick="window.open(this.href); return false;">Ideal use of onclick</a>

The redundancy is elimanted by using this.href. “this” refers to the current object in context, being the A tag. The “href” references the A tags href property and the value (URL) contained within.

The end result is a small generic addition to any A tag to make it open in a new window. The tag will pass HTML strict validation, “SEO” is preserved and if JavaScript is disabled everything keeps working.

Basecamp Writeboard & Message Erratic Formatting

Friday, May 8th, 2009

If you rely heavily on Basecamp, a project management service by 37signals, then you’ve probably run into issues with erratic formatting in Writeboards and Messages. The contextual documentation is sparse at best and doesn’t explain how to stop the unintended formatting caused by the inadvertent use of reserved sequences.

Through a little experimentation, it seems that most HTML tags are left unencoded. While unexpected and also potentially problematic this behavior has it benefits. The <code> and <pre> tags – and possibly more – turn off the Basecamp formatting engine and make it possible to preserve text that would otherwise be mis-formatted.

So next time you notice strange formatting, try surrounding your text in either <code> and <pre> tags. Remember that while these tags won’t show up in the message itself, they will appear in any notification e-mail, but the same is true for standard Basecamp formatting.

Movable Type Periodic Tasks (cron job) and cPanel

Wednesday, February 11th, 2009

If you’re having issues getting cPanel to run the Movable Type periodic tasks tool through cron, try adding quotes:

Most documentation uses this example:
cd /home/username/public_html/mt/; ./tools/run-periodic-tasks

We had problems getting the script to execute till quotes were added:
cd ’/home/username/public_html/mt/’; ./tools/run-periodic-tasks

The iPhone and HTTP Auth – How to save your password

Monday, August 4th, 2008

So you have an iPhone, but by now you’ve realized it doesn’t have a Keychain or any other sort of password management for web sites. While I can’t help with form based logins, there is hope when it comes to HTTP Authentication.

On the iPhone HTTP Auth login screens look like this:

The easiest way to get past those login prompts and store your password is to add it to the URL. I recognize this isn’t a new concept, but applying it to the iPhone might be to some. The format goes like this:

http(s)://username:password@www.example.com

If your username or password contains any non alphanumeric characters, in other words anything that isn’t A-Z and 0-9, then you must URL encode those characters. A common place this may occur is with cPanel based webmail where you have to use your full e-mail address as your login. In those cases enter in a + instead of an @. For example [email protected] becomes user+example.com as your login.

Once you’ve assembled the URL, bookmark it. I’ve found it to be the easiest to do this on the computer, then syncing it the iPhone. When on the iPhone you can go to the page and even add it to your home screen if you desire. While this doesn’t make up for true password storage, it does make it much easier to access sites protected by HTTP Auth.

In some instances this is the only way I can access some sites without being endlessly prompted for my login and password on the iPhone, no matter how accurate. This phenomenon has been observed by others as well.

The Disclaimer
Please recognize that you are storing your password in plain text, fully unencrypted. Your password is now as only safe as your bookmarks, and your iPhone. Normally in OS X your passwords are kept in a heavily encrypted database if you save them.

I can only hope that a full fledged Keychain will come to the iPhone, but for now this isn’t that bad of an alternative for sites that use HTTP auth.

Full Window Flash (With Minimum Dimensions), Done Right

Tuesday, June 3rd, 2008

2011-03-08 – Updated and now at:

http://dev.firefallpro.com/full-window-flash/

Original Article:

So you want to have Flash take up 100% of the browser window, but it also has to maintain minimum dimensions so content won’t be hidden if the window isn’t large enough. This will give Flash the ability to expand and contract as the user resizes the window, but if they make it too small scroll bars will appear. Achieving this involves a multistep process in order to properly support the most browsers (Safari, Firefox 2 & 3, IE 5 through 7).

Step 1: Create Your Container HTML File

Starting out with a HTML 4.01 Strict file is essential in creating a consistent experience. It’s time to get used to conforming to standards unless you want to mess around with multiple box models. No, you cannot use XHTML, no one should use it. Almost no one serves it properly and IE 6 has no clue what application/xml is. All you’ll do is force IE to render in quirks mode and use its box model.

Here is the start of a HTML 4.01 strict document as generated by BBEdit.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"        "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Full Window Flash With Minimum Dimensions</title> <meta name="generator" content="BBEdit 9.0"></head><body>

</body></html>

Step 2: Embed Your Flash with SWFObject 2

SWFObject 2 is a free JavaScript library that provides the ability to uniformly embed Flash while maintaining standards compliance and cross-browser support. I strongly urge you to check out the documentation as this article won’t go into any depth about its use.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"        "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Full Window Flash With Minimum Dimensions</title> <meta name="generator" content="BBEdit 9.0"> <script src="js/swfobject.js" type="text/javascript"></script> <script type="text/javascript"> <!--  swfobject.registerObject("flash_holder","7.0.19","swf/expressInstall.swf"); //--> </script></head><body> <div id="content">

  <!-- BEGIN: Flash Embed -->  <object id="flash_holder" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%">   <param name="movie" value="flash.swf">   <param name="quality" value="high">   <param name="scale" value="noscale">   <!--[if !IE]>-->   <object type="application/x-shockwave-flash" data="flash.swf" width="100%" height="100%">    <param name="quality" value="high">    <param name="scale" value="noscale">   <!--<![endif]-->

    <!-- BEGIN: Alternate Content -->    <div>Adobe Flash is required to view this website. Please <a href="http://www.adobe.com/go/EN_US-H-GET-FLASH/" onclick="window.open(this.href); return false;">install</a> it and reload this page.</div>    <!-- END: Alternate Content -->

   <!--[if !IE]>-->   </object>   <!--<![endif]-->  </object>  <!-- End: Flash Embed -->

 </div></body></html>

Between the head tags the SWFObject JavaScript file is referenced, followed by the function call itself. Between the body tags two nested objects are used along with some IE conditional comments. If none of this makes any sense, you probably still need to read the SWFObject documentation. The important thing is to set the width and height of the both objects to 100%.

Stopping here would create a nicely embedded Flash file that will resize with the window. Though a little CSS needs to be added to make it properly fill the window.

Step 3: The CSS

CSS needs to be added to make sure the Flash fills the entire window. There are a variety of issues with full window content, the specifics which I no longer recall, so you’ll just have to trust me for the most part.

Add within the head tags the following CSS:

 <style type="text/css"> <!--  html,  body,  div#content {   width: 100%;   height: 100%;  }

  body {   padding: 0;   margin: 0;   background-color: #FFFFFF;  }

  div#content,  object {   overflow: hidden;  } --> </style>

Now the Flash should take up the entire window. Though this doesn’t yet solve the problem of enforcing a minimum size when a user resizes the window. The user could shrink the window down and miss important elements, but Flash has no way of telling the browser that needs to maintain a certain size. A little CSS is all it takes to address that in modern browsers.

 <style type="text/css"> <!--  html,  body,  div#content {   width: 100%;   height: 100%;  }

  body {   padding: 0;   margin: 0;   background-color: #FFFFFF;  }

  div#content,  object#flash_holder {   min-width: 800px;   min-height: 600px;  }

  div#content,  object {   overflow: hidden;  } --> </style>

There is some over-specification in there because of a Safari bug.

I purposefully said modern browsers, because IE 6 and below have no idea what min-width or min-height even is. Chances are forgoing IE 6 support is not a likely option.

Step 4: Making Up for It with JavaScript

Even though IE 6 doesn’t support the CSS that would make this process complete doesn’t mean it has to get any more difficult. I created a JavaScript function called minsize()* to emulate the absent behavior.

<head>...<script src="js/minsize.js" type="text/javascript"></script>...</head>

The function takes the ID of the element you want to set minimum dimensions to, followed by the width, then the height. It should be wrapped in a IE conditional statement and placed at the end of the document before the closing body tag.

<!--[if lte IE 6]><script type="text/javascript">minsize('content',1000,750);</script><![endif]-->

*Please do not redistribute this file. The credits within need to remain intact. I also ask to be notified of any changes or improvements so I can update and repost the file as needed.

Step 5: Dealing with “Click to Activate”

Certain versions of IE will display a message around a Flash embed saying that it must be clicked to activate. This is due to that whole patent mess. Microsoft eventually licensed the patent so not every version of IE is effected. This can also be solved with another JavaScript workaround that should be included at the end of the document before the closing body tag, wrapped in IE conditional comments.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"        "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Full Window Flash With Minimum Dimensions</title> <meta name="generator" content="BBEdit 9.0"> <style type="text/css"> <!--  html,  body,  div#content {   width: 100%;   height: 100%;  }

  body {   padding: 0;   margin: 0;   background-color: #FFFFFF;  }

  div#content,  object#flash_holder {   min-width: 800px;   min-height: 600px;  }

  div#content,  object {   overflow: hidden;  } --> </style> <script src="js/minsize.js" type="text/javascript"></script> <script src="js/swfobject.js" type="text/javascript"></script> <script type="text/javascript"> <!--  swfobject.registerObject("flash_holder","7.0.19","swf/expressInstall.swf"); //--> </script></head><body> <div id="content">

  <!-- BEGIN: Flash Embed -->  <object id="flash_holder" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%">   <param name="movie" value="flash.swf">   <param name="quality" value="high">   <param name="scale" value="noscale">   <!--[if !IE]>-->   <object type="application/x-shockwave-flash" data="flash.swf" width="100%" height="100%">    <param name="quality" value="high">    <param name="scale" value="noscale">   <!--<![endif]-->

    <!-- BEGIN: Alternate Content -->    <div>Adobe Flash is required to view this website. Please <a href="http://www.adobe.com/go/EN_US-H-GET-FLASH/" onclick="window.open(this.href); return false;">install</a> it and reload this page.</div>    <!-- END: Alternate Content -->

   <!--[if !IE]>-->   </object>   <!--<![endif]-->  </object>  <!-- End: Flash Embed -->

 </div><!--[if lte IE 7]> <script src="js/clicktoactivate.js" type="text/javascript"></script><![endif]--><!--[if lte IE 6]> <script type="text/javascript">  minsize('content',800,600); </script><![endif]--></body></html>

I hope you’ve enjoyed scrolling to the end of this document as much as I did writing it. Here are the referenced files:

Now at: http://dev.firefallpro.com/full-window-flash/

Completed HTML
minsize.js (1.0.001)
clicktoactivate.js
SWFObject

Please send me comments on how I can improve this process or minsize.js. I will try to keep this document up-to-date and expand it if necessary.

Take a Screenshot on your PC with Windows XP

Tuesday, April 1st, 2008

I couldn’t find an explanation fast enough with Google, so:

How to take a screenshot on your PC with Windows XP:

1. Press the Print Screen key on your keyboard. Sometimes its abbreviated as PrtScn.

2. Right click on your desktop and select New -> Bitmap Image.

3. Right click on the file that was just created, New Bitmap Image and select Edit. Paint should open.

4. Within Paint go to the Edit menu and select Paste. The window should now contain the contents of the screenshot you took earlier.

5. Go to the File menu and select Save As….

6. Name your file, and save it as a JPEG. You could have just saved it normally as a Bitmap, but a JPEG will be much smaller.

7. Close Paint, and delete the New Bitmap Image if you Saved As. Alternatively you can keep it around if you find yourself taking screenshots often.

Not quite as easy as a Mac, but what do you expect.

Guide to cleaning a PCB: How Coke nearly killed a Mac Mini

Sunday, April 29th, 2007

During Dan’s second week his Mac Mini died. He was certain that if I didn’t have reason to fire him before, that I did now. Lucky for him I was on vacation and knew nothing about what happened or even cared. When I got back we spent some time trying to figure out how, what seemed to be a normally working machine, suddenly stopped working.

Upon taking it apart (I really wish I had taken pictures) I noticed there was some familiar looking dark residue on the bottom of the case and on the board as well. Having drank tankers worth of the stuff I quickly identified what appeared to be Coke syrup. Had my favorite beverage killed this Mac Mini, or was it just a coincidence? I didn’t remember spilling anything, at least not recently. Jon had spilled some almost a year ago, but that seemed too long ago to make a difference.

I dabbed up what I could with a paper towel re-seated everything and slapped it back together. Hoping the hard drive was at fault, even though it refused to turn on at times, I was able to get it going long enough to reformat it, and bring everything up-to-date.

No more then an hour in to Dan using it, the machine shuts off again and refuses to turn on. So much for it being the hard drive. It seems like the Coke was heating up and actually bridging some of the points on the board. Assuming it probably shorted out I pronounced it dead and stuck it in a drawer.

There the Mac Mini sat for months all but forgotten until it’s hard drive was scavenged. I decided it was time to pitch the thing unless there was some way to fix it. I consulted Google, Mr. O, and Steve Marchesani. It seemed like I might be able to wash it and remove the residue which may be causing all of these problems. I still risked doing all of this to find permanent damage, but it seemed like a good idea at the time.

The Guide

Tools & Materials
– Mac Mini take-apart tools (2 thin putty knives)
– PCB cleaner spray from Radio Shack
– Distilled water from the pharmacy
– 2 cans of compressed air
– Liquid damaged circuit board (Mac Mini logic board in this case)

Step 1
Take the device completely apart. After getting the case open the Mac Mini doesn’t have too many internal components, and the only one that appeared to be affected was the logic board itself. It is important to remove anything that will come off, there is no need unnecessarily subject other things to this process. The heat sink, though technically removable didn’t seem to be worth the time, and getting it back on would have most likely ended in disaster.

Step 2
Go at the board with the PCB cleaner and complimentary brush attached to the nozzle. Over the sink seems like a good place. The cleaner appears to be something like WD40, which people said they have used to clean printed circuit boards (PCBs). I wasn’t sure how conductive WD40 is and wasn’t going to find out given the availability of a substance that clearly states that it is safe for use on a PCB. The stiff brush seems like it would break the bonds on the board, but nothing seemed harmed as I sprayed and moved the brush across the surface of the board. Not clear on where the Coke went, I drenched the board in the cleaner and scrubbed everywhere I could get at.

Step 3
Warm some distilled water in the microwave. Next do the unthinkable, drop the whole board in a shallow pool of the warm distilled water. People fill their entire computer cases with mineral oil in the name of cooling. Any other liquid doesn’t seem that harmful considering that. Distilled water, in theory, is free from any of the junk that may be found in normal drinking water. Depending on where you live or your pipes it could be anything. I did read about people putting the board under the shower, which doesn’t seem to provide any obvious benefits. Others suggested the cold cycle on the dishwasher (without any detergent), some said use the warm cycle, some even said use detergent. Though drastic, I don’t see how its much more effective, and you are likely leave deposits behind that will corrode the board over time or just make things worse. While the board is taking a bath it couldn’t hurt to use the brush from the PCB cleaner to give the board some additional surface cleaning.

Step 4
After soaking for a little rinse the board with any remaining distilled water. The bath which managed to dissolve any remaining Coke syrup is now filled with impurities, none of which you want hanging around after spending all this time.

Step 5
Proceed to use the compressed air to blow the water away. This works far better then you might suspect and gets water out of those hard to reach places like inside the DVI connector. If trapped in a small space, water may take quite a while to evaporate on it’s own. The high pressure, especially when using one of those little red straws that come with the can, forces most of the water out. If you don’t use an entire can of air then you’re probably not trying hard enough.

Step 6
Wait. Even though the board may appear dry, and it might even be, there is still the chance that water may be lurking somewhere. The Mac Mini has a little piece of foam that’s affixed to the board, which was still damp. Place the washed unit somewhere safe and with adequate ventilation, preferably where you will forget about it for a few days. I left it alone for a week which was probably more then enough.

Step 7
Check for signs of damage. Physical damage that may have occurred during the cleaning process can only lead to even more destructive things when you put it all back together and plug it in. Also check for corrosion / oxidation, if the water was clean none should be present. There also shouldn’t be signs that any liquid was present at all. If any area appears blackened its already dead and you now have a rather clean but useless board.

Step 8
Put it all back together, but only enough to make it work and not get shocked. There is no reason to go though all the trouble if it’s not going to work when fully assembled. In the case of the Mac Mini that required just about everything except for the top case. I plugged it in fully expecting the circuit breaker to pop soon after, or something to smoke. Making it that far I proceeded to push the power button. Still no smoke, and a comforting, but loud Mac Startup tone (I guess the case muffles that).

Conclusion
Much to my surprise and a few hours of testing the Mac Mini lived again. It needed a hard drive, and didn’t like a ViewSonic display unless it was using the VGA adapter, but other then that it worked normally. I even ran the graphing application with the 3D examples to sap up as much of the CPU as possible and left it on over night to simmer. It survived the night without any noted problems.

Currently the resurrected Mac Mini is spending it’s time connected to my TV serving as a pseudo Apple TV. I still don’t fully trust it. Each time I go to wake it from sleep I expect nothing to happen, but so far things have been fine.

Apache Quick Setup on RedHat

Saturday, January 13th, 2007

We recently had to install Apache on a RedHat server which is very quick via RPM, however setting it up so it acts in a fashion familiar to those who use shared hosting comes with a few gotchas. Here are the steps once the RPM installation is complete:

Create the following directories in the user folder:
mkdir /home/myuser/logs
mkdir /home/myuser/public_html

Create the necessary Apache log files:
touch /home/myuser/logs/access_log
touch /home/myuser/logs/error_log

Set permissions:
chmod -R 755 /home/myuser/
chmod 644 /home/myuser/logs/access_log
chmod 644 /home/myuser/logs/error_log

Add the following to the Apache configuration file and adjust where necessary:
/etc/httpd/conf/httpd.conf

ServerAdmin [email protected]
DocumentRoot /home/myuser/public_html
ServerName example.com
ErrorLog /home/myuser/logs/error_log
CustomLog /home/myuser/logs/access_log common

Set Apache to run at boot:
sudo chkconfig httpd on

Once all of that is done Apache should automatically come up at boot.