Download the latest version 1.3 of the plugin at http://showMessage.dingobytes.com/download/

This is my first attempt at a jQuery Plugin, so although it works fine for my liking, I am sure there are many things that can be done more effectively.

• Message displayed at the top of page (no scrolling to view error)
• Multiple messages can be displayed
• Options to automatically close the message after set delay
• Message closes with blur/’esc’ key/’close’ link

• Download
• Install
• Options
• Examples

<script type="text/javascript" src="/path/to/jquery.showMessage.min.js"
charset="utf-8"><\/script>

#showMessage li
{
font-family: Arial, Helvetica, clean, sans-serif;
font-size: large;
font-weight: bold;
color: red;
}

thisMessage:		[''],
backgroundColor:	'#F7F7F7',
color:			'#000000',
opacity:		90,
displayNavigation:	true,
autoClose:		false,
delayTime:		5000

http://randomonium.blog-o-blog.com/post/211379921/multi-touch-desktop-interface-want-it-now/This is not the answer to all the issues with touch technology, but it is addressing some of the biggest issues and is offering some solutions. I don’t think I would be sold on it as it is presented, but if the hardware and software could be integrated with an OS I like and still work, I would purchase it. Looking at the demo, I definitely believe it would increase efficiency.

10/GUI from C. Miller on Vimeo.

If you are not familiar with how JavaScript uses a generic XMLHttpRequest function, we would strongly suggest you read one of the many tutorials out there. Once you understand how it works and the different methods employed to do it, you will appreciate the ease of jQuery even that much more.

The first step is to download a current version of jQuery. We prefer to use the minified version. Another option is to load jQuery into your page is to use the Google AJAX Libraries API. We don’t use the other AJAX libraries enough to prefer this method, but we have used it in the past for client sites.

Of course we like things to be pretty, so we would also suggest some good images/icons to represent a valid and invalid username. You can create your own image or simply use Google Images to find a nice free icon set that has something to represent this. We have attached two simple icons that we prefer to use.

To get the document started, we assume that you have jQuery loading somewhere in the head of the document (using which ever method you prefer). We are going to make this simple so we just need to create a form to enter a username. The rules for a username are as follows:

1. Username can not have whitespace
2. Username must be at least 3 characters long
3. Username must be no longer then 24 characters long

Simple Registration Form

</p><br /><br />
<p><form id="registrationForm" action="/test/registrationForm.php" method="post"><br /><br /><br />
<fieldset><br /><br /><br />
<legend>Use form below to register</legend><br /><br /><br />
</fieldset><br /><br /><br />
<dl><br /><br /><br />
<dt><label for="username">Username</label></dt><br /><br /><br />
<dd><br /><br /><br />
<input type="text" id="username" name="username" /><br /><br /><br />
<em>Your username must be alphanumeric, 3-24 characters long, can contain underscores, but no spaces. We recommend that you don't change this unless you really have to.</em><br /><br /><br />
</dd><br /><br /><br />
<dt><label for="passwd">Password</label></dt><br /><br /><br />
<dd><input type="password" id="passwd" name="passwd" /></dd><br /><br /><br />
<dt><label for="passwd-confirm">Confirm Password</label></dt><br /><br /><br />
<dd><input type="password" id="passwd-confirm" name="passwd-confirm" /><br /><br /><br />
<dt></dt><br /><br /><br />
<dd><br /><br /><br />
<input type="submit" id="submitRegistration" value="Register" /><br /><br /><br />
</dd><br /><br /><br />
</dl><br /><br /><br />
</form><br /><br /><br />

Now that we have our form setup, we need to do a few things. Obviously we want to check the username when it is entered (or being entered). Second we will want to have some sort of client side validation to save us from processing an incomplete form. Lastly we will want to submit the form and process the response from the server. Whether you use PHP, ASP, ColdFusion or any other method, it is a good practice to validate the form server side as well. We won’t go into that to much, but is a point worth mentioning.

We prefer to insert the following BEFORE the form. You can put this in a *.js file or you can simply insert it into the page, either works for us. We will need to break the JavaScript into three parts. One function that checks the username, a second function that reads the username input element and initiates username check and a third function to validate and process the form.

Check Username Function

</p><br /><br />
<p><script type="text/javascript" charset="utf-8"><br /><br /><br />
//<![CDATA[<br /><br /><br />
function usernameCheck(username)<br /><br /><br />
{<br /><br /><br />
$.get('/test/usernameCheck.php', { 'username':username }, function(xml) {<br /><br /><br />
$(xml).find('response').each( function() {<br /><br /><br />
var error = $(this).find('error').text();<br /><br /><br />
if ( error == 'false' )<br /><br /><br />
{<br /><br /><br />
var successCheck = $('<span></span>')<br /><br /><br />
.css({<br /><br /><br />
'padding-left':'1em'<br /><br /><br />
})<br /><br /><br />
.html('<img src="/test/images/dialog-ok.png" alt="successful" />Username is available.');<br /><br /><br />
$('input[name=username]').after(successCheck);<br /><br /><br />
}<br /><br /><br />
else<br /><br /><br />
{<br /><br /><br />
var errorCheck = $('<span></span>')<br /><br /><br />
.css({<br /><br /><br />
'padding-left':'1em'<br /><br /><br />
})<br /><br /><br />
.html('<img src="/test/images/dialog-error-small.png" alt="error" />Username is already registered.');<br /><br /><br />
$('input[name=username]').after(errorCheck);<br /><br /><br />
}<br /><br /><br />
});<br /><br /><br />
});<br /><br /><br />
}<br /><br /><br />

The code might look overwhelming right now, but it is actually pretty simple. If we break it down, you will see that the first thing we do inside the  usernameCheck() function is call the jQuery AJAX function $.get. This jQuery function will load a remote page using an HTTP GET request. It only has one requirement (the URL), but also allows for [data], [callback], [type] to be included. We are using both [data] and[callback], with [data] = { ‘username’:username } and [callback] = function(xml). The callback is the function that we want to be executed whenever the data is loaded successfully.

Looking into the function you will see that we are finding each <response> tag in the XML repsponse and inside of that we are looking for the text inside the <error></error> node/element of the XML and setting it to the variable “error”.

If the XML responds that error is “false” we use jQuery to create a <span></span> element with image and text response inside of it indicating the username is available. We then insert the new element we have just created after the form input element for username.

The “else” is doing the same thing, only it is showing the username is not available.

We will add some more components to this later, but for now lets move to the next functions.  These two functions should be triggered after the page loads, so we will be placing them inside the $(function() {}); element which tells jQuery to load them after the page loads. There are other methods to do this same thing (such as $(document).ready(function(){}); so if you are familiar with jQuery you can use the element you feel most comfortable with.

Initiate Username Check

</p><br /><br />
<p>$(function() {<br /><br /><br />
var t;<br /><br /><br />
$('input[name=username]').keyup( function() {<br /><br /><br />
// REMOVE WHITESPACE FROM USERNAME<br /><br /><br />
var username = $('input[name=username]').val();<br /><br /><br />
username = username.replace(/\s/g,'');<br /><br /><br />
$('input[name=username]').val(username);<br /><br /><br />
// IF THE USERNAME VALIDATES, CHECK THE DB<br /><br /><br />
if ( username !== '' &amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp; ( username.length >= 3 &amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp; username.length <= 24 ) )<br /><br /><br />
{<br /><br /><br />
if ( typeof(t) != 'undefined' )<br /><br /><br />
{<br /><br /><br />
clearTimeout(t);<br /><br /><br />
}<br /><br /><br />
t = setTimeout( function() { usernameCheck(username) }, 750 );<br /><br /><br />
}<br /><br /><br />
});<br /><br /><br />

You will notice the first variable we define is t. This is going to be used for the setTimeout() function later.

After that declaration you will see we are asking jQuery to watch the keyup event associated with the “username” input field and do “stuff” after each keystroke. We start  by simply asking for the value of the input field. Then we use the javascript replace() function to strip out any whitespace values followed by reinserting the “new” username back into the field.

We don’t want to even check for the username unless it meets the criteria we mentioned earlier, so we use the if() statement to help us validate that part. If the username is blank or if the username is greater then or equal to 3 characters and the username is less then or equal to 24 characters, then we continue to process the username.

We don’t want to bombard our server with a request every time a keystroke is made so we use the setTimeout function to  delay the request by a certain amount of time. In order to do this correctly though, we also need to clear the timeout if another keystroke is made within the delay, in effect starting the timeout over again.

Knowing this, we need to give the setTimeout a variable (t) when we call it. Because we know t may or may not exist, we use the if () statement to check for it. If it is defined, we use clearTimeout() function to remove the setTimeout. We can then set the variable t to a fresh setTimeout delay.

Validate and Submit Form

When the end user submits the form, we want to validate it and if it passes validation, submit the form. I am not going to go into a lot of detail about this as I have already done similar tutorials (see here). In a nutshell, we are just making sure the form is filled out and using AJAX to tell us if we were successful/unsuccessful when submitting form.

</p><br /><br />
<p>$('#submitRegistration').click( function() {<br /><br /><br />
//validate the form and submit<br /><br /><br />
var username = $('input[name=username]').val();<br /><br /><br />
var passwd = $('input[name=passwd]').val();<br /><br /><br />
var passwd-confirm = $('input[name=passwd-confirm]').val();<br /><br /><br />
var registrationData = $('#registrationForm).serializeArray();</p><br /><br />
<p>if ( username === ''  || ( username !== '' &amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp; ( username.length < 3 || username.length > 24 ) ) )<br /><br /><br />
{<br /><br /><br />
errorMessage.push("Username must have between 3 and 24 characters.");<br /><br /><br />
}<br /><br /><br />
if ( username !== '' &amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp; /\s/.test( username ) )<br /><br /><br />
{<br /><br /><br />
errorMessage.push("Username can not have any spaces.");<br /><br /><br />
}<br /><br /><br />
if ( passwd != passwd-confirm )<br /><br /><br />
{<br /><br /><br />
errorMessage.push("Password and Password confirmation do not match.");<br /><br /><br />
}</p><br /><br />
<p>if ( errorMessage.length > 0 )<br /><br /><br />
{<br /><br /><br />
showMessage( errorMessage, "error", "alert" );<br /><br /><br />
return false;<br /><br /><br />
}<br /><br /><br />
else<br /><br /><br />
{<br /><br /><br />
$.post('/test/registrationForm.php', registrationData, function(xml) {<br /><br /><br />
$(xml).find('response').each( function() {<br /><br /><br />
var error = $(this).find('error').text();<br /><br /><br />
var returnMessageString = $(this).find('returnMessage').text();<br /><br /><br />
var returnMessage = [];<br /><br /><br />
if ( error == 'false' )<br /><br /><br />
{<br /><br /><br />
returnMessage.push(returnMessageString);<br /><br /><br />
showMessage( returnMessage, "highlight", "info" );<br /><br /><br />
}<br /><br /><br />
else<br /><br /><br />
{<br /><br /><br />
returnMessage.push(returnMessageString);<br /><br /><br />
showMessage( returnMessage, "error", "alert" );<br /><br /><br />
}<br /><br /><br />
});<br /><br /><br />
});<br /><br /><br />
return false;<br /><br /><br />
}<br /><br /><br />
});<br /><br /><br />

So that is our start. You will notice if you run this code that it fails to work properly. What we don’t have is a way to clear out the “response” if it already exists on the page. Because we know where the response should be, we can create a simple check for the response and if it is found, remove it.  You will need to do this in both the usernameCheck function and also the function that sets the timeout.

</p><br /><br />
<p>if ( $('input[name=username]').next('span').length )<br /><br /><br />
{<br /><br /><br />
$('input[name=username]').next('span').remove();<br /><br /><br />
}<br /><br /><br />

Using the length of an element is how we check for the elements existence when using jQuery. Once we find that it does exist, we remove the entire element using the jQuery remove() function.

Lastly, jQuery has some features built in that make our forms prettier. I like to use animation to soften the effect of having elements just appearing BLAM! on the page. We can add a slow fade in effect to the username check to ease the message on the page . We add a diplay=none style to the span and then trigger the jQuery fadeIn() effect to achieve this.

</p><br /><br />
<p>var successCheck = $('<span></span>')<br /><br /><br />
.css({<br /><br /><br />
'display':'none',<br /><br /><br />
'padding-left':'1em'<br /><br /><br />
})<br /><br /><br />
.html('<img src="/test/images/dialog-ok.png" alt="successful" />Username is available.');<br /><br /><br />
$('input[name=username]').after(successCheck);<br /><br /><br />
$(successCheck).fadeIn('slow');<br /><br /><br />

There you have it, a nice jQuery username check.  You can test this out here or you can download the files (all zipped up) and give it a try yourself.

usernameCheck.zip (124KB)
usernameCheck.rar (117KB)

our application vs. good application

What might start off as a simple idea is turned into a three headed monster as more people add their input. The longer it takes the application to be completed, the more features are added to it until the next thing you know, the application has forms, polls, feedback, email to a friend, embed, etc all added to this small 300 x 300 pixel box.There are some steps that can make your product more user friendly and have a clean finished product. So just how do you make such a product? Well here are just a few ideas we have that might help you create a useful end product.

1. Step one is one you have heard before, we are sure. When you create the product follow the KISS (Keep It Simple Stupid) philosophy during the planning stages. Keeping the product simple helps speed the development, keeps the product focused on its core purpose and gives a good base foundation for the future of the product.
2. Make the product scalable. When ever possible, try to think about how this product can be built to allow it to grow. Keep in mind server, database, and client side concerns that might affect the product when it becomes an world wide sensation. If you can design a product that is scalable, it has the chance to have a much longer product life as well.
3. Stick to the original plan. If the project was well thought out, it should be flexible and grow as the product grows. If during the development, there are new ideas, don’t change the development path to include those. If the ideas are important they can be included in future versions of the product.
4. Use technology wisely. AJAX is useful, but it doesn’t mean the entire site has to be created using JavaScript. Some web users may be using applications that do not have JavaScript and would be left out of the experience. The product should gracefully degrade when necessary. Use client side and server side validation.

The end user has an important role with the products development. Let users know you want their constructive criticism of the product (and not just that it sucks). Have them be specific as to what they like and do not like about the product. It doesn’t mean every idea is a great idea, but listening can help you develop a better product.

So keeping your product simple, scalable and relevant can do more then just save you time, but also make your product more useful to the end user.

My understanding of javascript has increased as I have scoured google.com looking for functions and frameworks to fulfill my page or project needs, but I still feel there is a lot more to learn. I have decided to create this list to help anyone who might just be starting out and needs some direction.

1. Pick up a copy of “DOM Scripting: Web Design with JavaScript and the Document Object Model” by Jeremy Keith. This book is not easy enough to understand, but it also reminds new javascript users about graceful degradation. Before using any framework, I used many of the scripts in the book religiously. (find the book at http://www.friendsofed.com/book.html?isbn=9781590595336)
2. Use good web developer tools. Depending on your browser, make sure you are using web developer tools and checking for errors. Firebug is very popular for Firefox browser, but I still prefer the Web Developer tool bar. Microsoft offers a web developer tool bar for free download as well, but this does not have any javascript debugging included. You will need to enable javascript debugging in the IE browser and I would suggest downloading the Microsoft Debugging tool. (Firefox Web Developer: https://addons.mozilla.org/en-US/firefox/addon/60, Firefox Firebug: https://addons.mozilla.org/en-US/firefox/addon/1843 and Microsoft Script Debugger: http://www.microsoft.com/Downloads/details.aspx?familyid=2F465BE0-94FD-4569-B3C4-DFFDF19CCD99&displaylang=en)
3. Never depend on javascript. Good mark up will always gracefully degrade so that the end product is accessible and usable.
4. Use the javascript validator at http://jslint.com. Douglas Crockford knows his javascript and his validator (even though it is strict) will help you write good script.
5. Once your javascript validates, you can minify your script using one of the many javascript compressor/minification tools available. I have used http://javascriptcompressor.com/ with the Base62 encode and shrink variables checked and it has worked well. Another that I just started using is Closure Compiler found here: http://code.google.com/closure/compiler/
6. Once you are comfortable with javascript, use a framework to speed development. There are several frameworks available such as Jquery, YUI, Prototype, Dojo, Mootools, etc. Find the framework that best suits your needs and learn to use it.

I hope this toolkit will help you create accessible and usable applications. I might add to it as I think of more, but this is a great start (I know I wish I would have had it to start with).

I decided to try to combine some css with some javascript to make a nice reusable piece to display my form messages. Here is the fruit of that labor.

The function is going to take three arguments. The first argument is a message and or list of messages. The second is the id of the node you would like to stick the message before. The last argument is a classname.

/*global document */
function showMessage(thismessage, location_id, classname) {
//first clear showmessage div
if (document.getElementById("showmessage")) {
var clearerror = document.getElementById("showmessage");
clearerror.parentNode.removeChild(clearerror);
}

The first part of the function will check to see if the div “showmessage” exists. If it does then it will remove it from the document.

// create an showmessage div
var location = document.getElementById(location_id);

We define the location so it can be used later. Below we create a new div and set the id attribute to showmessage. We then can style the div for each instance using the className. After that we create an unordered list.

With the list ready, the messages can then be put into an array. We will split the messages up in this example with a pipe “|”.  You can substitute your own delimiter.

var showmessagediv = document.createElement("div");
showmessagediv.setAttribute("id", "showmessage");
showmessagediv.className = classname;
var showmessageul = document.createElement("ul");
showmessageul.setAttribute("id", classname + "list");
var showmessage = [];
showmessage = thismessage.split("|");
var i;
for (i = 0; i < showmessage.length; i++) {
var showmessageli = document.createElement("li");
var showmessagelitxt = document.createTextNode(showmessage[i]);
showmessageli.appendChild(showmessagelitxt);
showmessageul.appendChild(showmessageli);
}
showmessagediv.appendChild(showmessageul);
location.parentNode.insertBefore(showmessagediv, location);
// have to add this to display error until css corrected
}

Looping through the array, we create a new list element and insert the message. We append the message to the new list element and then append the list element to the unordered list element. When it is all done then we append the unordered list to the showmessage div. The last step of the function is to insert the new showmessage div right before the location_id.

Attached is the style I used with both the successful messages and the unsuccessfull images.

.errormsg {
clear: both;
display: block;
width: 90%;
color: #FFFFFF;
font-weight: bold;
background-color: #FF9D9D;
padding: 9px 10px 6px 40px;
margin: 10px 0;
border: 2px solid #FF0000;
}

.successmsg {
clear: both;
display: block;
width: 90%;
color: #333333;
font-weight: bold;
background-color: #9bc19b;
padding: 9px 10px 6px 40px;
margin: 10px 0;
border: 2px solid #039b03;
}

#errormsglist, #successmsglist {
margin-left: 0;
padding-left: 0;
list-style: none;
}

#errormsglist li, #successmsglist li{
padding-left: 20px;
background-repeat: no-repeat;
background-position: 0;
}

#errormsglist li { background-image: url(/icon/exclamation.png); }

#successmsglist li { background-image: url(/icon/accept.png); }

You can modify the CSS and change the class name to what ever you wish. The only think to remember is if you style the list, to append “list” to the style.

showMessage.js

showMessage.css

exclamation.png

accept.png

By no means is this a guide for all new linux user, but just a compilation of things learned while setting up web services on a Linux box in the past.

The first step, but not always a necessary step is setting up a new user. This is the preferred way to start as the /etc/skel has been preloaded with all the necessary directories and files to get new users started. If you are going to be a system administrator and you are not familiar with the /etc/skel/, please take some time learn more information about placing files in the /etc/skel/ directory to save time setting up new users. You can put default web directory such as www or public_html plus any other files and or directories you want to give to all new users.

To setup a new user you can simply use the following command (replace username with the username you want to use)

adduser -m username

Now that you have created the account, it is best to setup a password for the account. You can assign a password to the account using the following command

passwd username

You should be prompted to enter in the new password and then confirm the password. Assume a new account needs to be setup with the username of ditto. When you run the passwd ditto command you should be prompted for the password as follows.

Changing password for user ditto.
New UNIX password:
Retype new UNIX password:

Your new account is almost ready to start putting files up for the web. One thing to pass along to new system administrators is that you have to make sure you setup the right permissions on this new account so it is strongly suggested that you do this now.

Now the path to the new account may differ depending on your server. Assume for now that new users are setup in the /home/ directory. Assuming your new user “ditto” was created successfully, the new account for ditto should be /home/ditto/. Any files in your /etc/skel/ directory would be there as well. You can check this by using the following command to change directories and list the contents of the directory

cd /home/ditto && ls

In this example we have two folders for our user ditto and they are the public_html and wwwconf directories.

To change the permissions on the users ditto directory so it can be viewed by visitors, the permissions on the ditto directory must be changed to something like 755. This can be done to just ditto directory using following command:

chmod 755 /home/ditto

If you don’t know what 755 is as far as permissions, pause this tutorial and take the time to learn about chmod and what the different permissions will do for you.

Now comes the part where many configurations likely differ depending on what you have installed to run on your server. This tutorial opts to save a core httpd related .conf file in one httpd directory (conf.d) and then from there look for more .conf files in the user directory called wwwconf/. This setup is not the only one possibility in the universe and if you have an older setup or wish to do it differently that is your choice.

You can start your .conf file by copying a current one or creating a new one in your httpd/conf.d/ directory. This tutorial will assume that directory is located at /etc/httpd/conf.d/. Creat your new .conf file in vi or vim by using the following command.

sudo vim web.ditto.com.conf

This is going to be the core configuration file for your virtualhost. You will need to start the virtualhost using the tag:

<VirtualHost *:80>

The VirutalHost directive is used to enclose a group of directives which will apply only to a particular virtual host. Inside this directive you will put all the information pertaining to your site. You can put the email address to your ServerAdmin, the absolute path to the Document Root, the ServerName and any ServerAlias

ServerAdmin webmaster@localhost
Documentroot /home/ditto/public_html/
ServerName www.ditto.com
ServerAlias ditto.com

Now it is necessary to give Apache some directives that will apply to our public_html directory. To do this you will create another node inside the VirtualHost node named Directory. The Directory node here is used to enclose a group of directives which will apply only to the named directory and sub-directories of that directory (in this case the public_html directory).

<Directory /home/ditto/public_html>
Options ExecCGI FollowSymLinks +Includes
</Directory>

This tells Apache that the execution of CGI scripts is permitted, the server will follow symbolic links in this directory, and that server-side includes are permitted.

You will also like to have some type of error log as is very useful when troubleshooting an issue on the box, so be sure to include the following code for error logging. You can access the logs in your httpd/logs directory

ErrorLog logs/ditto.error
CustomLog logs/ditto.log combined

Now for the customized part. In order to let the user create their own Directory options another Directory directive is created that will point to a folder where other options/modifications can be made by the account user.

<Directory /home/ditto/wwwconf>
AllowOverride All
</Directory>

What this does is allows ditto to ftp or ssh into the box and create a .conf file with their own directives and options in the wwwconf/ directory. The directive inside the above tag says any directive which has the .htaccess context is allowed in .htaccess files. After this tag is closed, it can be followed up with

Include /home/ditto/wwwconf/*.conf

which tells Apache to grab any file with .conf in the wwwconf/ directory of ditto (if you didn’t know it already, the “*” is a wildcard here).

That should do it. You can now put an end to your VirtualHost node (if you have not already) and your end result should look something like

<VirtualHost *:80>
ServerAdmin webmaster@localhost
Documentroot /home/ditto/public_html/
ServerName www.ditto.com
ServerAlias ditto.com
<Directory /home/ditto/public_html>
Options ExecCGI FollowSymLinks +Includes
</Directory>
ErrorLog logs/ditto.error
CustomLog logs/ditto.log combined
<Directory /home/ditto/wwwconf>
AllowOverride All
</Directory>
Include /home/ditto/wwwconf/*.conf
</VirtualHost>

You can now save this in the httpd/conf.d/ folder. Now if you want to add a mod re-wite or make a password protected directory in public_html, you can add a .conf file to the wwwconf directory and save my changes there. There is still one more command to use in order for all of this to work and that is the command to restart the httpd service. This can be done very easily using the following command.

service httpd restart

If you are running on an older system, this command may not be recognized. In those cases you should be able to use

/etc/init.d/httpd restart

Assuming you didn’t get any errors when you restarted the httpd service your web service should now be working. If you get an error, be sure to address it right away. Most common issues are invalid paths in the <Directory> tags or missing directories that the <Directory> tags are directed too.

Hopefully this tutorial was helpful to at least one user out there. This tutorial will be followed up next by a tutorial that will help you setup subdomains, create password protected directories and create mod rewrites.

http://www.howtoforge.com/configuring-sendmail-to-act-as-a-smarthost-and-to-rewrite-from-address

Again DO NOT USE THE DESTRUCTIONS BELOW

I noticed last week that my emails were not being delivered properly. After taking a look at when the issue started, I realized that it was about the same time I updated my box.

My email was being returned with the reason: 550 Banned rcpt apache@localhost.localdomain. There was also another error 554 5.0.0 Service unavailable. Both of these errors on their own were not to helpful. I asked a friend (the one who sold me the box) to help and he gave me some good advice, but I was unable to resolve the issue and several Google searches didn’t reveal any solution.

I checked the maillog in /var/log/ and found that the mail was being sent internally, but I have to use my ISP mail server to actually deliver the messages and this was not happening. The error I found in the mail log that helped was “stat=Deferred: Temporary AUTH failure”. I was able to find the resolution to the issue right on the Sendmail.org site.

I use my sendmail as a client and up until last week I never had any issue with the setup I was using. I am still not sure if I began having an issue with sendmail because it was updated or if it was just my ISP found the security issue with the way I was using it, but eithr way, it stopped working correctly.

Here is the error:

----- The following addresses had permanent fatal errors -----
<apache@localhost.localdomain>
(reason: 550 Banned rcpt apache@localhost.localdomain *@localhost.localdomain)

----- Transcript of session follows -----
... while talking to mail.cableone.net.:
>>> RCPT To:<apache@localhost.localdomain>
<<< 550 Banned rcpt apache@localhost.localdomain *@localhost.localdomain
550 5.1.1 <apache@localhost.localdomain>... User unknown

Final-Recipient: RFC822; apache@localhost.localdomain
Action: failed
Status: 5.1.1
Remote-MTA: DNS; mail.cableone.net
Diagnostic-Code: SMTP; 550 Banned rcpt apache@localhost.localdomain *@localhost.localdomain
Last-Attempt-Date: Mon, 18 Aug 2008 21:45:23 -0500

---------- Forwarded message ----------
From: Mail Delivery Subsystem <MAILER-DAEMON>
To: <apache@localhost.localdomain>
Date: Mon, 18 Aug 2008 20:45:31 -0500
Subject: Returned mail: see transcript for details
----- The following addresses had permanent fatal errors -----
<support@cityofdilworth.com>
(reason: 550 Banned from (apache@localhost.localdomain) (*@localhost.localdomain))

----- Transcript of session follows -----
... while talking to mail.cableone.net.:
>>> MAIL From:<apache@localhost.localdomain> SIZE=1521
<<< 550 Banned from (apache@localhost.localdomain) (*@localhost.localdomain)
554 5.0.0 Service unavailable

Final-Recipient: RFC822; support@cityofdilworth.com
Action: failed
Status: 5.0.0
Diagnostic-Code: SMTP; 550 Banned from (apache@localhost.localdomain) (*@localhost.localdomain)
Last-Attempt-Date: Mon, 18 Aug 2008 20:45:31 -0500

---------- Forwarded message ----------

To resolve the issue, simply follow the instructions to setup SMTP AUTH that were provided by Benji Fisher. To start, log onto your machine as root.

1. Change directory to where your sendmail configuration files (sendmail.mc and sendmail.cf) are located, usually /etc/mail/
2. Create a safe subdirectory (suggested name auth/):# mkdir auth
# chmod 700 auth
3. Create a file with your authentication information (suggested name auth/client-info):
   AuthInfo:your.isp.net "U:root" "I:user" "P:password"

   filling in your ISP’s mail server, your user name, and your password. (Note: Earthlink, and perhaps other ISP’s, requires your full e-mail address as a user name.)

4. Generate the authentication database and make both files readable only by root:
   # cd auth
# makemap hash client-info < client-info
# chmod 600 client-info*
# cd ..
5. Add the following lines to your sendmail.mc file, filling in your ISP’s mail server:define(`SMART_HOST',`your.isp.net')dnl
define(`confAUTH_MECHANISMS', `EXTERNAL GSSAPI DIGEST-MD5 CRAM-MD5 LOGIN PLAIN')dnl
FEATURE(`authinfo',`hash /etc/mail/auth/client-info')dnl
6. Generate sendmail.cf:# m4 sendmail.mc > sendmail.cf
7. Restart the sendmail daemon, e.g., (this depends on your OS):# service sendmail restart or # /etc/init.d/sendmail restart

That should take care of the issue!