Screenshot of Netflix loading in Chrome

When Netflix loads a video it is using Microsoft Silverlight which is something that Chrome supports and gave me my first clue that there is no reason why Chrome shouldn’t be able to view a Netflix video. The solution was actually rather simple, tell Netflix that I’m not actually using Chrome but using Safari on the Mac. In order to do this you just have to add the following parameter when starting Chrome.

1

 --user-agent="Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_3; en-us) AppleWebKit/525.19 (KHTML, like Gecko) Version/3.2.1 Safari/525.19"

Add Parameter to Google Chrome Startup

I also tried changing the user agent to make Chrome appear like it is Internet Explorer. After applying that change Netflix gave me a activeX not supported error (image below). Since the problem was solved with the Safari user-agent text above I wasn’t too worried about it.

ActiveX is disabled

It is possible to change just about any icon that comes with an application.  There are a few different applications that will help make this job easy and my favorite is resource hacker. The reason that I can think of that someone would want to change a programs icon are the following:

• Two programs have icons that look too similar
• The program comes with an icon that does not give a good representation of what the program does
• To have the coolest icons on the block

Resource Hacker
Replace Icon

The steps to replace an icon for a program are fairly simple. Just follow the below steps to modify the icons for any of your applications.  

1. Download Resource Hacker
2. Unzip the file and run ResHacker.exe
3. Open the program that contains an icon you would like to change (like C:\Program Files\Brett Batie\Excel on Multiple Monitors\runExcel.exe)
4. Click Actions→Replace Icon in the Menu Bar
5. Click the “Open file with new icon…” button
6. Select the new icon (like C:\Program Files\Microsoft Office\Office12\EXCEL.exe)
7. Click the “Replace” button
8. Click File→Save in the Menu Bar
9. Close Resource Hacker All Done

Chrome Textarea

There is a new feature in both Safari and Chrome that allows a textarea to be resized by the user. In both browsers the feature is seen by a little icon that is in the bottom right corner of the textarea. This feature gives the user the ability to choose how much space they need for whatever it is they are writing.

For some websites this new feature may not be desired as resizing the textarea could break the layout of the website. I can think of a few ways to prevent the layout from breaking.

1. Design the page with a liquid layout
2. Turn off the users ability to resize the textarea
3. Give the textarea a max size

Redesigning the site with a liquid layout can be a lot of work and may not be optimal for the look & feel for the site. Many designers prefer to lock the site at a certain width to guarantee that everyone will see a website that looks exactly the same.

It is very easy to turn off the users ability to resize the textarea. Turning this feature off may be necessary due to the design of certain sites or to make it harder for the user to write a 100 page document in a small comment box. The following CSS can be used to remove the users ability to resize the textarea:

textarea{resize: none}

Place that code in your css file to remove the users ability to resize any textarea on the site. You could also remove it from 1 textarea on a page with inline css.

<textarea name="myTextarea" rows="3" cols="30" style="resize: none;"></textarea>

The third option of giving the textarea a max size has a similar solution of using css. The two properties that can be used are max-width and max-height. This will give the user the ability to resize the textarea but limit them to a certain max size. The css would look something like the following.

textarea{max-width: 100px; max-height: 100px;}

Of course you may only want to use one of the above properties to allow the user to grow the height to any size but not resize the width or vice versa.

An example of a site that could use one of the above steps is whitehouse.gov. There are two screen shots below that show the before and after of the user resizing the textarea.

Browsers giving the user the ability to resize a textarea is a great feature but it creates one more item that designers and developers need to be aware of when adding a textarea to a page.

Before

After

The other day I was looking for a solution to allow a user to dynamically resize a textbox. I first saw this feature in wordpress and wanted something similar for a site I was designing. Since wordpress is open source I had considered looking at their code to figure out how it was done. After searching google for a few minutes I came across a site that had put together some functions to make the job of implementing this feature very easy.

When the textbox is displayed on a site it looks like the following:

In order to place the texbox on your site you just need to download the source code and put something like the following on a webpage.

<link rel="stylesheet" href="/include/resize-textbox/style.css" type="text/css" media="screen" />
<script src="/include/resize-textbox/resize-textbox.js" type="text/javascript"></script>
<div id="rtContainer" style="border: 1px solid black; width: 480px; height: 250px;">
    <script type="text/javascript">
    <!--
    var rt = new ResizeableTextbox('myRT');
    rt.SetText("I Am Some Text");
    // -->
    </script>
</div>

Doesn’t get much easier!

Now to critique the code a little. I wish the javascript functions were encapsulated in a class so I would not have to worry that another function might conflict with the functions for resizing the textarea. This is a fairly easy feature to add so it does not bother me to much.

Chrome Textarea

Now, if you are implementing the code on this page to give all browsers the ability to dynamically resize the textarea. You may want to disable the built in resize feature of both Chrome and Safari. This can easily be done with the following css.

#myRT{resize: none;}

Standard Mug

Everyone will probably laugh at me for this one but I just have to say it. I have found the ultimate water bottle to have at my desk. There is always the standard coffee mug and I have seen other engineers use these. The problem with the mug is it is too small. When I am writting code I don’t like to stop to get more water and will often forget about the water because I’m more focused on the programming than anything else.

My prefered water container needs to hold a good amount of water since I should be drinking somewhere around 10 cups of water a day. Most water bottles contain around half of that amount which means only one (maybe two) trip to refill per day.  This makes a water bottle a good solution to have near the computer.

Now the problem with most water bottles is that they are easy to spill. Some have caps that you unscrew and then drink the water. As soon as I unscrew the cap there is a high chance that I won’t bother to put the cap back on. When developing software I am often shuffling books, papers, pens on my desk. With all of the shuffling my chance of nocking over the water bottle is pretty good. Considering I have a fairly expensive computer under my desk that would be a very bad thing! I just need to find a water bottle that is easy to use and won’t spill.

After a bit of searching I found the perfect water bottle to have at my desk it is called a CAMELBAK. This water bottle has a great design. You can drink from it and no longer worry about spilling water on your important documents, books, or computer equipment. You can hold it upside down and no water comes out. Then when you want to drink from it you bite the nipple and suck (was there a better way to say that?). The bottle comes in different sizes ranging from .5 Liter to 1 Liter and a wide variety of colors. I bought the black 1 Liter and have been very happy with it.

In my previous post I mentioned that there was a way to create a bat file to force Excel to open each file in a new window. Opening Excel in multiple windows makes it easier to use Excel across multiple monitors and gives back the standard alt+tab to flip between Excel Spreadsheets. The problem with my previous solution was that the Excel files loose their icons. Unfortunately because the solution uses a bat file the icon cannot be changed. So I took the previous solution and enhanced it a little bit.

OpenOffice Icon

This solution uses the same principle but installs a program instead of using a bat file. This program has an icon so all the associated Excel files will also use that icon. I was originally hoping to use the Microsoft Icon for this program but after looking at their Terms of Use a decided to use the Open Office Icon.

Without further ado the directions to get Excel running on multiple monitors is below:

1. Download the following file and run the installer.

DOWNLOAD: Open Excel in Multiple Windows

If you cannot install this application because you need admin privileges you can download the following file. Then follow the directions below and make sure you browse to the location of where you stored this download (in the 2nd step).
DOWNLOAD: Standalone - Open Excel in Multiple Windows

2. Update the file association for each Excel File.

Right click the excel file and select “Open With…” and then in the window that opens click “Browse…”

Then select the program that you just installed. By default it will be installed at C:Program FilesBrett BatieExcel on Multiple MonitorsrunExcel.exe. Make sure that “Always use the selected program to open this kind of file” is checked in the “Open With” dialog.

Now anytime you open an Excel file it will open a new copy of Excel.

changelog:

1.1 - Fixed a problem where filenames with spaces would not open.


I noticed a problem with how IE supports overflowing text today. The problem is that the text can not be easily selected (with a mouse) when using overflow: auto; and white-space: nowrap. Here is an example to demonstrate this problem.

This text is not easy to select in IE because it will not automatically scroll to the right when the user is selecting it

The HTML for this example is below:

<pre style="border: 1px solid black; overflow: auto; width: 250px; white-space: nowrap; height: 40px;">;This text is not easy to select in IE because it will not automatically scroll to the right when the user is selecting it</pre >

I was able to solve this problem by changing overflow: auto; to overflow: scroll; as can be seen below.

This text is not easy to select in IE because it will not automatically scroll to the right when the user is selecting it

The HTML for this example is below:

<pre style="border: 1px solid black; overflow: scroll; width: 250px; white-space: nowrap; height: 40px;">;This text IS easy to select in IE because it will not automatically scroll to the right when the user is selecting it</pre >

I do not love this solution as it will always show the scroll bars even when they are not needed. Until someone finds a better solution or IE handles this better I will have to put up with it.

When you open an Excel file in Windows Vista, it will only open 1 instance of Excel and force you to tile the windows in order to see both at the same time. I find this annoying especially when I want the Excel files to display on multiple monitors.

I looked around for some solutions and found the following:

• Open Excel two times from the start menu.
• Turn off DDE and modify shortcut (I couldn’t get this to work on Windows Vista)

I didn’t like using the start menu option as I like to use Windows Explorer to open my Excel files and I couldn’t get the DDE option to work. So, I took a minute and developed my own fairly simple solution.

1. Put the following line of text in a bat file and save it at as c:\Program Files\runExcel.bat

start "Excel" "c:\Program Files\Microsoft Office\Office12\EXCEL.EXE" /e %1

2. Modify the shortcut for the .xls extension

Right click the excel file and select “Open With…” and then in the window that opens click “Browse…”

Then select the bat file you created in the first step by browsing to c:\program files and selecting runExcel.bat. Make sure that “Always use the selected program to open this kind of file” is checked in the “Open With” dialog.

Now anytime you double click on an Excel file it will always open it in a new window - the way I think it should be.

I previously discussed how to get Google to verify a WordPress blog by making a few modifications to the .htaccess file. I would like to take this a step further and discuss how a password protected site can be verified with Google. Verifying a password protected site became necessary for me when I wanted to add a password protected site to Adsense.

The first thing that needs to be done is to have your server respond with a valid 404 error by adding something like the following to your .htaccess file.

ErrorDocument 404 "This file does not exist."

Now you just need to give Google access to two files with a name similar to google54fbcc37db740a4d.html and noexist_54fbcc37db740a4d.html. You will need to login to Google’s Webmaster Tools Dashboard to see what the google*.html filename is in your case and then replace the “google” part with “noexist_” for the second file. Now that you have the names you will need to modify your password protection code that looks something like the following to exclude the two files from password protection.

AuthGroupFile /dev/null
AuthName "A Blog"
AuthType Basic
AuthUserFile /home/user/domains/domain.com/.htpasswd
require valid-user

To exclude the two files you would add the below code to your .htaccess file.

<FilesMatch "(google54fbcc37db740a4d\.html)|(noexist_54fbcc37db740a4d.html)">
  Allow from all
  Satisfy any
</FilesMatch>

Don’t forget to create the google*.html file on your server and replace the names of the files in the above code with your filenames.

Extra Directions for WordPress

Now the above directions should be enough for most password protected sites but for WordPress that is using permalinks one more thing needs to be done. You need to tell WordPress to not send the request for noexist_*.html to index.php. To do this find the following code in your .htaccess file.

1
2
3
4
5
6
7

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

and add the following RewriteCond after line 5.

RewriteCond %{request_uri} !^/noexist_54fbcc37db740a4d.html$ [nc]

In order to verify your site with google you need to go to Google’s Webmaster Tools Dashboard and add your website and then click verify. After clicking verify it will ask you to put a file on your website with a name similar to google54fbcc37db740a4d.html. In most cases this is all that needs to be done and then google can verify that you are the owner.

If you are using permalinks with WordPress it is not so easy to get Google to verify your site. There are two items that are causing validation to not work with WordPress. First, Google is trying to access more than just google54fbcc37db740a4d.html it is also trying to request a page that does not exist. When I tested it, Google was also asking for noexist_54fbcc37db740a4d.html. You might notice that Google just replaced the word “google” with “noexist_”. Second, WordPress is taking a request for any page (including ones that do not exist) and trying to find an appropriate page and is therefore not returning a 404 error. These two problems cause Google to respond with the following error when you try to validate your site.

We’ve detected that your 404 (file not found) error page returns a status of 200 (Success) in the header.

 The code that causes WordPress to not return a 404 for an invalid page is the following which is in an .htaccess file.

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

After creating your file google54fbcc37db740a4d.html and adding it to your server you just have to modify the above .htaccess file to have it not redirect the request for noexist_54fbcc37db740a4d.html to index.php. You also need to specify a specific page or message to display when a 404 error occurs. You can do that by replacing the above code with the following code.

RewriteEngine On
ErrorDocument 404 "This page does not exist"
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{request_uri} !^/noexist_54fbcc37db740a4d.html$ [nc]
RewriteRule . /index.php [L]

Make sure you replace the 54fbcc37db740a4d in the above code with the same characters of the file that google tells you to add to your website.