Ajax requests allow users to stay on the same page, while the site contacts the server in the background. This may be to post some information, or retrieve information, and the polite thing to do these days is to indicate to the user “Yes, we’re processing your request, please wait..”. But the claim here is there is no need to keep the user waiting. It’s pointless and they may as well have done a complete page reload.

Since we can use asynchronous requests the user can continue what they were doing, while the page request runs in the background. This makes the response “feel” faster to the user, even though it may not technically be. Now the problem comes in when the user navigates the browser away from the page before an ajax request has completed, causing data incomplete data, or loss of data. Where is the line drawn where it is “safe” to use this method. To keep all data integrity I would have to say never.

However, I’m not going to say “never”. Fact I believe with a little though we can avoid this almost always. He notes that Google Mail nicely displays a message which is visible, but not in the way of the user moving on to their next task. And although its ugly we could easily add onbeforeunload listeners to warn the user about navigating away from the page, then remove the listener when the request successfully completes.

So my thoughts are, why not?

Related posts:

1. Clientside Discussion
2. Filter Select Dropdowns as You Type

As you may know Clientside Plugin provides several utilities to Gedit for working with CSS and Javascript, including minifying, formatting, and error checking/lint. Also as a bonus it can batch minify multiple css or javascript files. Where it really comes in handy is formatting old code from yesteryear, when the developer had no coding style at all.

Related posts:

1. Gedit Clientside Plugin gets Batch Minify Option
2. Gedit Clientside Plugin
3. Gedit Clientside Now with CSSLint

This is where Email Dissector comes in to play. Email Dissector creates a dummy smtp server right on your desktop. It will then intercept any outgoing emails on the host and port it is listening on, and present them to you in a few different formats: HTML, HTML Source, Text (for multipart emails with alternate text versions), raw headers, and attachments.

Since the email server is contained right in the application, there is zero wait time. The inbox is refreshed immediately! Also the Inbox is the only box, as this is development work only.

Before we get too carried away it needs to be noted right off the bat that the html view uses webkit. This means it is likely much more advanced than the general email client, so don’t get too far ahead of yourself with css and javascript. The good part is you can quickly see any major issues before debugging in 50 different email clients.

The html source view elegantly shows off the markup. Now you can see what is wrong with your html.

The Text tab is for alternate text versions of emails. If your email client is html capable (which it probably is) it can be difficult to find the the text versions of emails if they are supplied. Believe it or not but some people actually like text emails as they are generally short and to the point. Email Dissector presents this conviniently.

Looking for the encoding or your reply-to values? Check the Raw tab to see all the headers sent

Finally you can see what attachments were sent.

Thats all there is to this simple little program, but it should surely speed up you email development significantly! Best part is it is developed in python, so it should run most anywhere python does as long as Webkit is available. (So far tested on Ubuntu and Windows). Enjoy!

Python Email Dissector on Github

Related posts:

1. Ubuntu 11.10 Almost Here
2. Send Mail Locally on Ubuntu

As you may know the easiest way on Ubuntu to get up and running with php is through Postfix. So lets get started and install a couple packages. You can do this either in Synaptic or the terminal.

sudo apt-get install postfix, mailutils, courier-pop, courier-imap

Now we need to tell postfix we want to use MailDir style mailbox, and listen on localhost:

sudo postconf -e "home_mailbox = Maildir/"
sudo postconf -e "mailbox_command = "
sudo postconf -e "mydestination = localhost, mail.localhost"
sudo  /etc/init.d/postfix restart

Ok, as you can see you can also add more domains to “mydestination”, you can do as you please here. With a little luck our postfix should be configured. Next we need to actually create our MailDir mailboxes. These are simply folders in our home directory. You can do this in your file browser or the terminal:

mkdir ~/Maildir
mkdir ~/Maildir/new
mkdir ~/Maildir/cur
mkdir ~/Maildir/tmp

Now we have a place to store all of our messages. Finally we just need to configure Evolution to read our messages. You should already have evolution installed. This part is pretty easy. Create a new account at username@localhost where your username is your ubuntu login username. Set your Receiving to Maildir, and on the Sending options use sendmail.

Now you should be able to send and receive mail to username@localhost. It would be nice to test html emails in more than just Evolution, however not many email clients appear to support a Maildir receiving format. I’m not an email expert however, so I’m always up suggestions

Related posts:

1. Localhost Subdomains on Ubuntu
2. Why Not To Use Sudo Graphically
3. Intrepid Ibex and Apache2 VirtualHost

Lets say we want to show the navigation on landscape orientation with the ipad, but hide on portrait orientation. On top of that if the device is smaller than 480px lets hide as well. This should include the iPhone. Lets be honest, there is only so much space on a phone.

We start out with the same html layout as the previous post:

<!DOCTYPE html>
<html>
	<head>
		<title>Advanced CSS Media Query</title>
		<link rel="stylesheet" href="advanced.css" />
		<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$('#nav').bind('touchend', function(){
					$t = $(this);
					if($t.hasClass('focus'))
						$t.removeClass('focus');
					else $t.addClass('focus');
				});
			});
		</script>
	</head>

	<body>

		<div id="wrapper">

			<div id="nav">
				<ul>
					<li><a href="#" title="Link">Link to Home</a></li>
					<li><a href="#" title="Link">Link to There</a></li>
					<li><a href="#" title="Link">Link to Here</a></li>

					<li><a href="#" title="Link">Link to This</a></li>
				</ul>
			</div>

			<div id="content">
				<h1>This is the Title</h1>

				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

				<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
				<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
				<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

				<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
				<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
				<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>

		</div>

	</body>
</html>

You’ll notice I added a bit of javascript. We’ll cover that in a moment. Now for the CSS:

@charset "UTF-8";

/*
*    Mass Reset
*/
*{ margin: 0; padding: 0; border: 0; }
body{ background-color: #f4fff4; font: normal 1em/1.5em Arial, Serif; }

/*
*    Normal layout
*/
#wrapper{  }
#wrapper #nav{ width: 160px; float: left; background-color: #eeeeee; border-right: solid 20px #aaa; height: 100%; position: fixed; z-index: 1000; }
#wrapper #content{ margin-left: 180px; padding: 10px 20px; position: relative; z-index: 100; }

#wrapper #nav ul{ list-style: none; }
#wrapper #nav ul li a{ display: block; padding: 8px 5px 8px 10px; border-bottom: solid 1px #aaa; color: #548f54; text-decoration: none; }
#wrapper #content h1,
#wrapper #content p{ margin: 5px 0; }

/*
*    When screen is smaller than 480px or portrait
*/
@media (orientation:portrait), (max-device-width:480px), (max-width:480px){

	#wrapper #nav{ margin: 0 0 0 -160px; opacity: 0.95; }
	#wrapper #content{ margin-left: 20px; }

	#wrapper #nav:hover,
	#wrapper #nav:focus,
	#wrapper #nav.focus{
		margin: 0 -160px 0 0;

		-moz-transition-property: margin;
		-moz-transition-duration: 1s;
		-moz-transition-timing-function: ease-out;
		-webkit-transition-property: margin;
		-webkit-transition-duration: 1s;
		-o-transition-property: margin;
		-o-transition-duration: 1s;
	}
}

Now, we know we have a couple scenarios to consider, orientation: portrait and max-width: 480px. So as you can see I listed those conditions in my @media. Pretty straight forward addition to the basic example.

Ok, so now you’re wondering about that javascript…

$(function(){
	$('#nav').bind('touchend', function(){
		$t = $(this);
		if($t.hasClass('focus'))
			$t.removeClass('focus');
		else $t.addClass('focus');
	});
});

Unfortunately for many touch screen phones these days there is no mouse, so being able to fire the “hover” in the css is impossible. So we are simply going to add a class “focus” to the nav on the “touchend” event, where when you touch the #nav handle the menu will slide out. (if you notice we added the .focus class also in the CSS along with the “:hover” pseudoselector)

Thats all there is to it. You should now have a fully working navigation menu that slides out and hides on certain orientations or screen widths. And as always I’ve provided the working example.

Related posts:

1. Effective Example of CSS Media Queries
2. 7 Lucky Tips for Mobile Development

The theory here is that you can create a new object by passing in a normal javascript object. Also either in the constructor you can specify a sorting function or manually call sort against your object. From then on when you insert into your object it will be placed in accordance to your sort routine. The beauty of this is that it brings together the power of the javascript Object and the javascript Array. Here is how to create a new object:

// Our sort function, this is how we want to keep our object ordered
var sf = function(ak,av,bk,bv){
	var v1 = av.toLowerCase(),v2 = bv.toLowerCase();

	if(v1 < v2) return -1;
	if(v1 > v2) return 1;
	return 0;
}

var ord = new Ordering({
	Tom: 'first',
	Jane: 'second',
	Sally: 'third',
	Bill: 'forth',
	Lee: 'fifth',
	Carl: 'sixth',
	Stan: 'seventh',
	Earl: 'eighth',
	Paul: 'ninth',
	Tray: 'tenth'
}, sf);

This creates an ordering object which will be sorted alphabetically by the values. Keep in mind the values can be any data type you wish, and you can handle them how you need to in your sort functions. But wait! There’s More!

If you need to inject an item at a specific position, you can use the inject method:

ord.inject('Trent', 'NEW ITEM', function(pk, pv, nk, nv){
	return (nk=='Earl');
});

To set a value:

ord.set('Ted','ocho');

To erase a value:

ord.erase('Sally');

To loop over the object (in order):

str = '';
ord.each(function(k,v){
	str += k +': '+ v +'\n';
});

To resort your object (pass in an optional sort function like the one from the constructor)

ord.sort();

There are also other functions implemented like:

• feed(object) (populate the object)
• every(fn)
• some(fn)
• map(fn)
• filter(fn)
• subset(fn)
• slice(start, end)
• get(key)
• getAt(numeric_index)
• indexOf(key)
• clone()
• keys() (return an array of the keys, in order)

The source is also very straight forward, so don’t be shy if you’re unaware how to use something, just dive right in and figure it out. There is also an html file with the source with some examples. Enjoy!

Related posts:

1. Object Inject – Insert Item into Javascript Hash
2. Looping Through Dates with Javascript
3. Compute Linear Regressions in Javascript

if(a == b){
	return true;
}
else return false;

And…

if(a == b){
	return true;
}
return false;

In theory as well that would be a little less file size by removing all “else return…” and leaving just “return…”. I started thinking on this while creating the Gedit Clientside Plugin (try it out).

First off JSLint likes brackets around conditions (even one line conditions). Not sure why as its perfectly ok not to have brackets. This seems more like the developers preference to me. Then JSMin produced bad javascript when handling an else return in some code. Adding brackets or making the change above solved that problem.

Related posts:

1. JsonSQL Ported to PHP
2. Return Multiple Result Sets with PHP and PostgreSQL Functions

For all of the gedit nuts out there (like myself) who develop css and javascript, I have created a gedit plugin just for you. The Gedit Clientside Plugin. This plugin can minify and beautify javascript and css. Also for javascript you jsLint is included. Finally for good measure, I threw in a gzip method as well.

Before I go any further, let me get you to the github page where you’ll find plenty of documentation and more importantly the download:

Gedit Clientside Plugin

This plugin mostly uses other open source tools, such as:

• JS-Beautifier to format and “Unminify”
• JSMin to minify
• JSLint to look for syntax issues
• CSSTidy to beautify and minify css
• CSSLint to look for syntax issues

And to run these excellent tools there are two prerequisites (you probably already have one):

• PHP to run CSSTidy
• NodeJS to run JSLint and JS-Beautifier

As I mentioned there is documentation on the Github page, so for usage and further configuration check there. Hope you enjoy!

Related posts:

1. Gedit Clientside Plugin gets Batch Minify Option
2. Updated Lint for Clientside
3. Gedit Minifier Plugin

• Minify JS: Ctrl+U
• Minify CSS: Ctrl+Alt+U

The other issue (not really an issue but it bothered me) is that the JSMin library the plugin is using didn’t clean all line breaks, leaving many lines even if there are few characters on each line. I added a quick regular expression to clean up those. Now we get a nice one-liner. I’ve mainly been minifying the same few scripts over and over so I hope this works for other libraries as well.

Related posts:

1. Gedit Clientside Plugin gets Batch Minify Option
2. Gedit Minifier Plugin
3. Gedit Clientside Plugin

I often find myself having to do a lot of jumping around to develop. I write the code, test, then minify, then copy files, etc.. I also have a strange interest in gedit, so I decided I’d create a quick little plugin to minify files for me. The plugin is dirt simple. While your file (javascript or css) is the active document, just go to Tools->Minify JS or Tools->Minify CSS and it will take the contents of the current file, minify it, and save it to the clipboard. From there you can just paste the new minified code where ever.

I can’t take all the credit however, the JSMin library is used to do the actual minification, I’ve just wrapped it up nicely in a gedit plugin. Please check it out. I’ve enjoyed developing this little plugin so I may have found another area of interest! I’d love to hear if anyone else uses it!

Download Gedit Minifier Plugin

Related posts:

1. Gedit Clientside Plugin gets Batch Minify Option
2. Gedit Clientside Plugin
3. Updated Lint for Clientside