Blogs

Implement Keypress Navigation using jQuery

Bedrich Rios at NETTUTS.com has put together a tutorial for creating keypress navigation using the jQuery JavaScript library. A keypress navigation, if implemented well, can increase usability of your web applications and sites. Basically, you create a way for users to navigate through your site [or part of it] without the use of their mouse. This has long been possible/common with rich desktop applications, but usually isn't implemented in many of today's web applications.

Bedrich's 8 step tutorial will have you creating keypress navigations in no time. Check out the demo if you want to get a taste. For the 8 course meal, visit How to Create A Keypress Navigation Using jQuery

Yahoo! Design Stencil Kit

Tagged:  

If you are working on a project you probably want to have a quick mock-up so the business can easily understand how a web application will look. Well, Yahoo! has just made it easier to do so with their new Design Stencil Kit.

Stencils kits are available for OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG), and Adobe Photoshop (PNG) and cover the following topics:

  • Ad Units
  • Calendars
  • Carousels
  • Charts and Tables
  • UI Controls
  • Form Elements
  • Grids
  • Menus and Buttons
  • Mobile - General
  • Mobile - iPhone
  • Navigation and Pagination
  • OS Elements
  • Placeholder Text
  • Screen Resolutions
  • Tabs
  • Windows and Containers

To use a design stencil, download the stencil kit compatible with your design application, launch your design application, and start adding stencil objects to your projects. Adobe Illustrator, OmniGraffle, and Visio users can ungroup stencil objects to customize and manipulate size, layout, and aesthetics.

You can read more about the stencil kit here.

You can go directly to the stencil kits here.

So, get the Design Stencil Kit and show the business what you are working on. Or even better, get your favorite Business Analyst to do it for you.

Google Health Data API

Tagged:  

Google recently released Google Health. The application makes it easy for users to keep track of their medical records. Along with releasing Google Health they have also released the Google Health Data API.

Below is an excerpt about the Google Health Data API.

The Google Health Data API allows client applications to view and send Health content in the form of Google Data API feeds. Your client application can use the Health Data API to create new medical records, request a list of medical records and query for medical records that match particular criteria.

Here are some of the things you can do with the Health Data API:

You can learn more about Google's Health Data API here.

I can see a lot of uses of this API for medical related mash-ups.

Adding Search with Lucene

Tagged:  

What if you are making a new web application that needs to search through files instead of just web pages. Well, you could write your own solution or you could use an existing search engine like Lucene.

Below is an excerpt from the Step Three: Profit! post about using Lucene.

There are a number of considerations to make when adding search to your site. For instance, you can usually get by pretty well with just integrating Google search into your website. This is fast, easy, and doesn't require messing with your backend code at all.

However, this is not really what I want. I want to let users search for files, not web pages, and I want the results integrated nicely with everything else. For instance, it would be cool to use a search query as a radio playlist like you can do on Hype Machine. So I'll need to build my own search engine.

This is not really that hard to do. I would recommend you read some articles and then download Managing Gigabytes for Java. Those articles are by Tom from AudioGalaxy. You may remember AudioGalaxy as the best thing to happen and unhappen to music in my lifetime. I know do. More importantly, it was deliciously scalable and for the most part it was just a search engine. So don't go writing one without learning some tips from the best.

I'm sure that a little engineering and MG4J could produce a highly scalable search engine. However, I didn't really want to spend that much time on it, so I went with a higher level solution in the form of Lucene for Java. There is also a popular version for Python. I would recommend waiting a while if you're considering using Lucy (Lucene in C with Python and Ruby bindings) because I don't consider it mature. I'd also stay away from layers on top of Lucene like Solr because if you're looking for tools to make Lucene easier to use then you're missing the point that it's already easy to use.

You can read more about using Lucene as a web server here.

So, if you are looking for a good search engine that can search for files check out Lucene.

jsLex

Tagged:  

Since Ajax applications are so popular we developers are always looking for better JavaScript tools. Well, jsLex is an eclipse plug-in that attempts to make it easier to improve JavaScript/Ajax performance.

Below is an excerpt from the jsLex site.

Why jsLex?

As Ajax is used for an increasing number of projects it is also being used in projects with larger and larger code base. When the code base of a project increases, chances are you will run into performance issues.

Working on the Apache XAP project and Nexaweb's Universal Client Framwework, which has a large code base it became apparent that hand injection of profiling code only worked so well. A new technique was needed to make it possible to capture a complete view of the performance of an Ajax application in a similar way to using jProfile for Java code.

jsLex is that tool!

  • Go to the features page for more information. Click Me!
  • Go to the screen shots page to view screen shots of the application. Click Me!

jsLex gives developers a complete picture of the performance issues with-in thier Ajax application. By auto injecting profiling code using jsLex ant task, developers don't need to modify their code to track down bottlenecks, minimizing coding erros and saving time.

Currently developers need to hand inject profiling code into their applicaiton. Though this can be easily done as in the example below. Such a technique offers limited information and requires the developer to know percisely where the problem is located. Otherwise developers need to modify their code over and over as the try to find the problem area(s).

function doLongTask(){
  var start = new Date(); 

  for (var index = 0; index < infinite; index++){
     //Do something here
  }

  end = new Date(); 
  alert ("doLongTask took " + (end - start) + 
         " milliseconds to complete." );
}

You can read more about jsLex here.



I think that jsLex makes a good attempt of improving performance profiling of Ajax applications. Also, since the tool plugs-in to the extremely popular Eclipse IDE it can be very useful to many developers. If you have used jsLex, I would love to hear your experience with the plug-in.

How to Load In and Animate Content with jQuery

Tagged:  

If you are interested in writing an application with jQuery, but have not used the library before then you are probably looking for a few good tutorials. Over at NETTUTS they have put together a nice tutorial about loading and animating content with jQuery.

You can read an excerpt of the tutorial below.

Step 1

First thing's first, go and download the latest stable release of jQuery and link to it in your document:

<script type="text/javascript" src="jQuery.js"></script>

One of the best things, in my opinion, about jQuery is it’s simplicity. We can achieve the functionality described above coupled with stunning effects in only a few lines of code.

First let’s load the jQuery library and initiate a function when the document is ready (when the DOM is loaded).

$(document).ready(function() {
	// Stuff here
});

Step 2

So what we want to do is make it so that when a user clicks on a link within the navigation menu on our page the browser does not navigate to the corresponding page, but instead loads the content of that page within the current page.

We want to target the links within the navigation menu and run a function when they are clicked:

$('#nav li a').click(function(){
	// function here
});

Let's summarize what we want this function to do in event order:

  1. Remove current page content.
  2. Get new page content and append to content DIV.

We need to define what page to get the data from when a link is clicked on. All we have to do here is obtain the 'href' attribute of the clicked link and define that as the page to call the data from, plus we need to define whereabouts on the requested page to pull the data from - i.e. We don't want to pull ALL the data, just the data within the 'content' div, so:

var toLoad = $(this).attr('href')+' #content';

To illustrate what the above code does let's imagine the user clicks on the 'about' link which links to 'about.html' - in this situation this variable would be: 'about.html #content' - this is the variable which we'll request in the ajax call. First though, we need to create a nice effect for the current page content. Instead of making it just disappear we're going to use jQuery's 'hide' function like this:

$('#content').hide('fast',loadContent);

The above function 'hides' the #content div at a fast rate, and once that effect finished it then initiates the "loadContent" function (load the new content [via ajax]) - a function which we will define later (in step 4).

Step 3

Once the old content disappears with an awesome effect, we don't want to just leave the user wondering before the new content arrives (especially if they have a slow internet connection) so we'll create a little "loading" graphic so they know something is happening in the background:

$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');

Here is the CSS applied to the newly created #load div:

#load {
	display: none;
	position: absolute;
	right: 10px;
	top: 10px;
	background: url(images/ajax-loader.gif);
	width: 43px;
	height: 11px;
	text-indent: -9999em;
}

So, by default this 'load' span is set to display:none, but when the fadeIn function is initiated (in the code above) it will fade in to the top right hand corner of the site and show our animated GIF until it is faded out again.

Step 4

So far, when a user clicks on one of the links the following will happen:

  1. The current content disappears with a cool effect
  2. A loading message appears

Now, let's write that loadContent function which we called earlier:

function loadContent() {
	$('#content').load(toLoad,'',showNewContent)
}

The loadContent function calls the requested page, then, once that is done, calls the 'showNewContent' function:

function showNewContent() {
	$('#content').show('normal',hideLoader);
}

This showNewContent function uses jQuery's show function (which is actually a very boring name for a very cool effect) to make the new (requested) content appear within the '#content' div. Once it has called the content it initiates the 'hideLoader' function:

function hideLoader() {
	$('#load').fadeOut('normal');
}

We have to remember to "return false" at the end of our click function - this is so the browser does not navigate to the page

It should work perfectly now. You can see an example of it here: [LINK]

Here is the code so far:

$(document).ready(function() {

    $('#nav li a').click(function(){
    
    var toLoad = $(this).attr('href')+' #content';
    $('#content').hide('fast',loadContent);
    $('#load').remove();
    $('#wrapper').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal');
    function loadContent() {
    	$('#content').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
    	$('#content').show('normal',hideLoader());
    }
    function hideLoader() {
    	$('#load').fadeOut('normal');
    }
    return false;
    
    });
});

Step 5

You could stop there but if you're concerned about usability (which you should be) it's important to do a little more work. The problem with our current solution is that it neglects the URL. What if a user wanted to link to one of the 'pages'? - There is no way for them to do it because the URL is always the same.

So, a better way to do this would be to use the 'hash' value in the URL to indicate what the user is viewing. So if the user is viewing the 'about' content then the URL could be: 'www.website.com/#about'. We only need to add one line of code to the 'click' function for the hash to be added to the URL whenever the user clicks on a navigation link:

window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);

The code above basically changes the URL hash value to the value of the clicked link's 'href' attribute (minus the '.html' extension. So when a user clicks on the 'home' link (href=index.html) then the hash value will read '#index'.

Also, we want to make it possible for the user to type in the URL and get served the correct page. To do this we check the hash value when the page loads and change the content accordingly:

var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function(){
    var href = $(this).attr('href');
    if(hash==href.substr(0,href.length-5)){
        var toLoad = hash+'.html #content';
        $('#content').load(toLoad)
    } 
});

With this included here is all the javascript code required: (plus the jQuery library)

$(document).ready(function() {
	
    // Check for hash value in URL
    var hash = window.location.hash.substr(1);
    var href = $('#nav li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #content';
            $('#content').load(toLoad)
        } 
    });
    
    $('#nav li a').click(function(){
    
    var toLoad = $(this).attr('href')+' #content';
    $('#content').hide('fast',loadContent);
    $('#load').remove();
    $('#wrapper').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal');
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
    function loadContent() {
    	$('#content').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
    	$('#content').show('normal',hideLoader());
    }
    function hideLoader() {
    	$('#load').fadeOut('normal');
    }
    return false;
    
    });
});
You can read the full tutorial here.

jQuery is one of the best JavaScript/Ajax libraries that I've seen, so it is always good to see more tutorials using the library. If you haven't used jQuery before then I would recommend using it and this tutorial is a great place to start.

Title Capitalization in JavaScript

John Resig has written a good JavaScript port of the excellent Perl script written by John Gruber that provides pretty capitalization of titles. It is amazing how well the script works for capitalizing words.

Below is an excerpt from the post.

The excellent John Gruber recently released a Perl script which is capable of providing pretty capitalization of titles (generally most useful for posting links or blog posts).

The code handles a number of edge cases, as outlined by Gruber:

  • It knows about small words that should not be capitalized. Not all style guides use the same list of words — for example, many lowercase with, but I do not. The list of words is easily modified to suit your own taste/rules: "a an and as at but by en for if in of on or the to v[.]? via vs[.]?" (The only trickery here is that “v” and “vs” include optional dots, expressed in regex syntax.)
  • The script assumes that words with capitalized letters other than the first character are already correctly capitalized. This means it will leave a word like “iTunes” alone, rather than mangling it into “ITunes” or, worse, “Itunes”.
  • It also skips over any words with line dots; “example.com” and “del.icio.us” will remain lowercase.
  • It has hard-coded hacks specifically to deal with odd cases I’ve run into, like “AT&T” and “Q&A”, both of which contain small words (at and a) which normally should be lowercase.
  • The first and last word of the title are always capitalized, so input such as “Nothing to be afraid of” will be turned into “Nothing to Be Afraid Of”.
  • A small word after a colon will be capitalized.

He goes on to provide a full list of edge cases that this script handles.

You can read the full post here.

I can see some uses for this script in applications that would like to take user input and make it into a properly formatted title. This could be handy in a del.icio.us or digg like application.

Java The Next App Engine Language?

Tagged:  

Michael Podrazik has written an interesting post on what the next App Engine Language will be. If you don't know about App Engine it currently supports Python and you can read more about it here.

Below is an excerpt from the post.

So how reasonable would it be to offer a hosted Java environment? While almost any hosting provider currently gives you the option of running PHP, lots of 'em give you Perl, etc. virtually nobody except boutique hosting providers let you run Java. There's a good reason for this. First of all, Java is an enterprisey language and the apps that use Java on the server side are not especially well suited to run in a shared environment. Secondly, even if the market existed, there are technical limitations that make running Java in a shared resource pool problematic. While you can chroot PHP to prevent people from accessing the shared, underlying filesystem, with Java you can spawn threads and do lots of other things that make implementing resource consumption quotas problematic. The fact that you can't just run a Java program using an Apache module or through CGI, and the fact that there tends to be a mismatch in the skill sets that *nix ops people usually have and the skill set required to effectively manage a Java app just further muddies the waters.

What you would really need is a customizable JVM that let a hosting provider limit what hosted apps are allowed to do. You may be able to do this with a locked down SecurityManager, but doing the kinds of things that Google is doing with the App Engine Python implementation would be even better. Not very many people have the chops to write their own VM. Google is one of them, and oh yeah, they've already sorta done it. Twice.

GWT is interesting in that you write your applications in Java with certain elements of the API stripped out and the compiler translates your code to JavaScript. Android apps are written in Java with certain elements of the API stripped out and the compiler translate your code to run in Dalvik. Why not do something like this for App Engine and make it a trifecta?

Google is pouring a lot of resources into Java lately and in a public way. Guice is getting lots of attention lately as a Spring competitor.

You can read the full post here.

So, the post predicts that the next App Engine Language will be Java. However, it predicts that the API will be limited. I would love to hear your thoughts on this prediction, so leave your thoughts in the comments.

TubeSpy Now Available in 23 Languages

With the recent addition of 10 languages to the Google AJAX Language API, we have published an update to TubeSpy that includes support for Bulgarian, Croatian, Czech, Danish, Finnish, Hindi, Norwegian, Polish, Romanian and Swedish.

TubeSpy, a recent addition to Ajaxonomy Labs, is a YouTube Spy allowing you to see what videos others are watching on YouTube right now! TubeSpy was built using jQuery, the YouTube API, and more recently, the Google AJAX Language API to add support for other languages.

Visit TubeSpy

Clean Ajax

Tagged:  

Clean Ajax is an attempt to make Ajax development easier. Clean Ajax is inspired on the Java Message API and offers a reliable solution to Ajax.

Below are the features that Clean Ajax promises.

Features Provided

Clean focus is on simplicity and speed on development, keeping the focus only on AJAX issues.

It is very important to note that the sense of simplicity does not mean poorness, so Clean is not negligent with AJAX
problems and needs. To accomplish the mission of improve AJAX applications Clean provides:

  • A high level of abstraction, you can use just one facade to work with AJAX, abstracting everything else.
  • Configuration by exception, the messages require mimimum explicit configuration to work.
  • Simple way to customize message's behavior and apply your on logic to them.
  • Multiple request handle, the engine is able to handle multiple requests simultaneously.
  • Exception handle, the engine is aware about exceptions that can occur and how to report them.
  • Trace console to monitor messages life cycle.
  • Cache and history control (new on version 4.1).
  • Message queue used to manage the requests.
  • Garbage collection.
  • Integration with WebServices based on SOAP and XMLRPC protocols.
  • Cross-browser implementation compatible with the major browsers (Internet Explorer, Firefox, Mozilla,
    Opera and Netscape).

You can read more about Clean Ajax here and you can see some nice demos here. To download Clean Ajax here.

Below is the code from the planet example on the demo page.

				function showError(e){
				  alert(e);
				}
				
				function get(url, consumer, progress_bar, cache){
				  var message = Clean.createSimpleMessage(url, consumer, showError);
				  if(cache != null)
					message.cache = cache;
				  if(progress_bar != null){
					var progress = new EmbeddedProgressBar(document, progress_bar);
					message.progressBar = progress;  
				  }
				  Clean.doGet(message); 
				} 
				
				function post(url, consumer, form){
				  var message = Clean.createSimpleMessage(url, consumer, showError);	
				  Clean.postFormByName(message, form, false);
				} 
			

The code used does look very clean and small. I think there can be a lot of good uses for Clean Ajax and look forward to playing with it more.

Syndicate content