Update .htaccess with Dynamic DNS IP Address to Prevent Password Protection

March 9th, 2010

I was working on a password protected site that needed to allow one specific user access without requiring a login/password to access it. The site was already using .htaccess to password protect the entire site so the quickest solution was to use the following type of setup in the htaccess file:

Order deny,allow
Deny from all
AuthGroupFile /dev/null
AuthName "A Blog"
AuthType Basic
AuthUserFile /home/admin/domains/domain.com/.htpasswd/public_html/.htpasswd
require valid-user
Allow from person.getmyip.com
Satisfy Any

The main addition that I added to the password protection is line 8 "Allow from". This line allows a specific IP address or host to have access without requiring password protection.

However, the host that needed to be used was a Dynamic DNS hostname. This creates a problem as Apache takes the following steps when the user requests access.

  1. Grab IP from user requesting access
  2. Do a reverse DNS lookup
  3. Compare the results to the host in the Allow from line (person.getmyip.com)

In this case when a reverse DNS lookup is completed on the users IP address it will not find the Dynamic DNS hostname. Instead, it will find the hostname that is associated with your ISP which might look something like this 8.sub-79-231-223.myvzw.com.

There are a number of ways to get around this issue. In my case I wanted to use a small script to dynamically populate the .htaccess file with the correct IP address.

Below is the following PHP script that handles updating .htaccess with the latest IP address. The main requirement is that there is a comment "# Allow from person.getmyip.com" somewhere in the .htaccess file. This line tells the script where to insert the IP address on the very next line.

<?php
// Rewrites the entire htaccess file. When a line starts with '# Allow from brett.getmyip.com' the
// very next line will be replaced with the actual ip associated with brett.getmyip.com
$htaccessFile = "/home/admin/domains/batie.com/public_html/.htaccess";
$handle = fopen($htaccessFile, "r");
if ($handle) {
	$previous_line = $content = '';
	while (!feof($handle)) {
		$current_line = fgets($handle);

		if(stripos($previous_line,'# Allow from person.getmyip.com') !== FALSE)
		{
			$output = shell_exec('host person.getmyip.com');
			if(preg_match('#([0-9]{1,3}\.){3}[0-9]{1,3}#',$output,$matches))
			{
				$content .= 'Allow from '.$matches[0]."\n";
			}
		}else{
			$content .= $current_line;
		}
		$previous_line = $current_line;
	}
	fclose($handle);

	$tempFile = tempnam('/tmp','allow_');
	$fp = fopen($tempFile, 'w');
	fwrite($fp, $content);
	fclose($fp);
	rename($tempFile,$htaccessFile);
}
?>

I quickly wrote this script and realize that there is room for improvement. However, this meet the need and solved the problem.

After the script was completed adding a simple line to the crontab (crontab -e) file got it running on a regular basis to automatically update the file with the current IP.

# Script to update ip access for dynamic dns host - it allows person.getmyip.com
*/5 * * * * /usr/local/bin/php /home/admin/scripts/allow_person.php >/dev/null 2>&1

Paste Code – Live Writer Plugin To Paste HTML/Code

March 6th, 2010

I recently started using Windows Live Writer and I believe it is currently the best application out there for quickly posting to a blog. However, I found one issue where I could not easily paste HTML and other code and decided to develop a plugin to address it.

If your in a hurry here is the download link:

DOWNLOAD: Paste Code For Windows Live Writer

The Issue

Below is an example of some code I would like to paste into Live Writer.

<html>
<head>
	<title>Hello World</title>
</head>
<body>
	Hello World
</body>
</html>

When I try to paste the above code in the "Edit" window. It appears correctly on the screen but in reality Live Writer added content to my code. When I view the source I receive the following:

&lt;html&gt;
  <br />&lt;head&gt;

  <br />&#160;&#160;&#160; &lt;title&gt;Hello World&lt;/title&gt;

  <br />&lt;/head&gt;

  <br />&lt;body&gt;

  <br />&#160;&#160;&#160; Hello World

  <br />&lt;/body&gt;

  <br />&lt;/html&gt;

This is very close to how I desire to have the code formatted. However, the major problem is it inserted a bunch of <br /> characters. It does make sense that it inserted these <br />’s since in most cases we want line returns to have breaks but this is not the case when pasting source code.

Next, if I paste the code in the "Source" window the problem is the code is taken as actual source. This means that the code will not be seen on the screen but instead will be interpreted by the browser. If I then swap back and forth between the "Edit" and "Source" windows my code gets reformatted to be the following:

Hello World

Which is obviously not what I wanted.

Solution: A Plugin

To address the issues stated above I put together a plugin that will allow pasting code in either the "Edit" or "Source" windows. It will replace special characters so that the code will be viewable and will not insert extra HTML (like <br />’s).

Below is a screenshot of the plugin in action:

sshot-2010-03-06-[3]

This plugin will automatically take the code that exists on the clipboard and display it in the "Code Snippet" section and give the ability to edit the code before pasting it.

It also has the "Before Code Snippet" and "After Code Snippet" text areas. These two text areas allow defining code to wrap around your code snippet. By default the two box’s will have <pre> and </pre>. Using either a <pre> or a <textarea> is required in order to have the formatting display correctly. If the content of "Before Code Snippet" and "After Code Snippet" is changed it will be remembered the next time the plugin is used.

Once insert is clicked in the plugin the code will be added to your post in Windows Live Writer and will be formatted correctly.

DOWNLOAD: Paste Code For Windows Live Writer

Icing On Top

With this plugin in place we can easily paste code and not worry about the formatting. However, it is very beneficial to have the source code displayed on your blog with syntax highlighting. I do know that there are a few plugins for Windows Live Writer that will apply syntax highlighting to code. However, I do not love this for the following reasons:

  1. Will not work when writing an article from blog’s admin page.
  2. Will not easily allow changing the Syntax Highlighting to a different algorithm. There are a ton of different Syntax Highlighting plugins for blogs and every once in a while I like to upgrade to the the latest and greatest.
  3. Will not work if I decide I want to move away from Windows Live Writer (that will never happen, right?).

For my blog I am using the syntax highlighter developed by Alex Gorbachev. There is also a nice plugin that quickly installs this syntax highlighting in a wordpress blog. With the paste code plugin for Windows Live Writer in combination with syntax highlighting I can quickly paste code and achieve the following results:

sshot-2010-03-06-[4]

How to: Watch Netflix in Chrome

March 13th, 2009
Screenshot of netflix loading in Chrome

Screenshot of Netflix loading in Chrome

I just recently started playing with Chrome and after a bit of investigation I think I am going to make the switch from my current browser Maxthon. One problem I noticed when using Chrome was I could no longer watch instant movies in Netflix. Now, I could do what they recommend and use Internet Explorer (or Maxthon) to view a movie but I’m stubborn and wanted to view it in Chrome so I found a way.

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.

 --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

Add Parameter to Google Chrome Startup

To add this parameter right click the Google Chrome shortcut and go down to Properties. Then after chrome.exe in the Target: box paste the above text (make sure you include a space after chrome.exe).

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

ActiveX is disabled

How to Modify a Program’s Icon

March 9th, 2009

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

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

Turn off resize textarea in Chrome & Safari

February 23rd, 2009
Chrome Textarea

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

Before

[caption id="attachment_173" align="alignleft" width="300" caption="After"]After[/caption]

Dynamically Resize a Textarea

February 19th, 2009

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

Chrome Textarea

In testing this code I found out that both Chrome (Google’s browser) and Safari already have the ability to dynamically resize a textarea built into the browser. Both browser’s implemented the feature by adding a little icon in the bottom right of the textarea. This is a nice feature and hopefully the other browsers will also add this feature to their future versions.

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;}

Best Water Bottle for Computer Geeks

January 30th, 2009
Standard Mug

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.

Open Excel in Multiple Windows

January 29th, 2009

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

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…”

Open With

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.

Selecting Overflowing Text in IE

January 21st, 2009

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.

Open Excel in Two Windows (Microsoft Excel 2007 / Windows Vista)

January 19th, 2009
There is a flaw with the below solution it causes the associated Excel files to loose their icons. I posted a follow-up article for opening Excel in Multiple Windows that provides the same solution while associating a new icon with the Excel Files.

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:

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…”

Open With

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.