The process for the current project is to pull a *.csv file from an email account, parse it into a database query/queries, generate html code and then store the html in a directory structure while also storing the report information in the database.

Unfortunately during testing I have had some typo’s and the generated report stored in the directory structure did not display as intended. The changes needed really didn’t warrant processing the script again and adding more useless entries into the database, so I decided to change the script and then update the html in the report.

Having over 100 reports generated, I needed a simple script to do this. I had done this with bash before, but I thought there had to be an easier way then looping through a for statement, saving the changes to a new file and then moving the new file to replace the old.

In comes Perl. Looking through some posts, I found that you can edit text in the file with Perl. The command goes something like this:

perl -pi -w -e 's/search/replace/g;' *.html

Here is a further explanation of what is going on.

-p assume loop (like -n) but print line also, like sed
-i edit <> files in place (makes backup if extension supplied)
-w enable many useful warnings (RECOMMENDED)
-e execute the follwing line of code

The code referred to after the -e is just a search and replace regular expression.

The ‘s/’ means to search and start your regular expression to search for.

You then enter your expression that you want to search for. You need to make sure you escape out special characters with the back-slash [\]. The forward slash is used to separate what you are searching for and what you want to replace. The replace section is an expression as well and you need to treat special characters the same way.

Finally you have the last forward slash indicates the end of your replace expression and the ‘g’ indicates global.

Here is an example of how I would change the directory used for images from ‘/image/’ to ‘images/’ for all the files in a directory with the extension of .html.

perl -pi -w -e 's/\/image\//images\//g;' *.html

That is how you do it. If you have to go through multiple directories, you could use a bash or perl command to loop through those directories. Hope it didn’t confuse you too much.

The plugin requires jQuery and if it is not included, it should load it for you.

Download contestant-rating ver. 0.1 [25 KB zip]
Download contestant-rating ver. 0.1 [23 KB rar]

The original upload had the wrong /js/ files in it, so have updated the download here.

Rate this Plugin!

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

Please see the site, as the information below is for previous versions. This has been updated!

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