Ajax

Google Maps adds Terrain View

Tagged:  

Google Maps has received an update - it now has a Terrain view. The option appears where the Hybrid button used to appear. Don't worry, they haven't gotten rid of Hybrid! It's now a part of the Satellite button (a checkbox appears below the button that allows you to toggle "Labels" - which are the street/road/highway/etc.. names).

Google Maps Options

Here's a view of San Francisco in Terrain View:
Google Maps Terrain View

And here's a view of the Grand Canyon in Terrain View:

Google Maps Grand Canyon

Take a trip over to Google Maps to play around with this new feature.

Calendar - A Javascript class for Mootools

Tagged:  

Calendar Logo

Calendar is a Javascript class that adds accessible and unobtrusive date-pickers to your form elements.

Calendar has been successfully tested in Safari, Firefox, Opera and Internet Explorer. The class requires Mootools 1.1 with Fx.Style, Element and Window. In order to enable dragging, the class also requires the Drag component.

Features include:
* Style-able and semantic XHTML
* Future / past calendar restrictions
* Highly configurable use of inputs and selects
* Multi-calendar support (with padding)
* Variable navigation options
* Multi-lingual and fancy date formatting


Calendar

Example Usage:

Form element:

 <input id="date" name="date" type="text" />

Page header:

 <head>
  <script type="text/javascript" src="mootools.js"></script>
  <script type="text/javascript" src="calendar.js"></script>
  ...
  <script type="text/javascript">
    window.addEvent('domready', function() { myCal = new Calendar({ date: 'd/m/Y' }); });
  </script>
</head>

Click here for more information, a couple of demos, and to download the class.

Agile Ajax

Tagged:  
Dilbert

Video: Essentials of the DOM and JavaScript in 10 Minutes

Tagged:  

A screencast of a workshop on the DOM and JavaScript explaining the elements of the DOM and how to script it in JavaScript

With the increased use of Ajax, more developers have been exposed to the DOM. And whether you're new to JavaScript, or just need a refresher, this quick 10 minute video will touch on some fundamentals of DOM manipulation in JavaScript.

[youtube=http://www.youtube.com/watch?v=URF2sVQWuxU]

A GMail-like "Loading" Notifier

Tagged:  

This one is an oldie, but it's a goodie.

Ajax apps do stuff behind the scenes, so as developers we need to make a diligent effort to keep users notified with the current status of their requests. One of the quickest and easiest ways is to display a loading message whenever an process is running in the background. We've all seen GMail's Loading message on the top right corner of our screens when we're searching for mail and you can easily add that same functionality to your apps using the code from Point Writer.

Click here to check it out and try out the demo.

YSlow? aka Y(!Fast)

Tagged:  

YSlow analyzes web pages and tells you why they're slow based on the rules for high performance web sites. YSlow is a Firefox add-on integrated with the popular Firebug web development tool.

YSlow gives you:
* Performance report card
* HTTP/HTML summary
* List of components in the page
* Tools including JSLint

Podcast, Screencast
Take a look at the YSlow Podcast and Screencast.

Performance View
YSlow analyzes any web page and generates a grade for each rule and an overall grade. If a page can be improved, YSlow lists the specific changes to be made.

Stats View
YSlow calculates the total size of the web page for both empty cache and primed cache scenarios, as well as information about cookies.

Components View
YSlow lists all the components in the page including their type, URL, Expires date, gzip status, load time, size, and ETag. You can also view the HTTP response headers for any component.

Click here to visit the YSlow page at the Yahoo Developer Network

The Development Process

Tagged:  

If you need a good laugh, click the image below.

The Development Process

Take it one step further and make your own version of the comic!
Check out projectcartoon.com and create your own version by rearranging the slides and editing the captions.

Selenium: A testing tool for web apps

Tagged:  

Selenium is a test tool for web applications. Selenium tests run directly in a browser, just as real users do. And they run in Internet Explorer, Mozilla and Firefox on Windows, Linux, and Macintosh. This tool is great for testing your Ajax based applications because it can simulate user activity and assert results to ensure your code is executing as expected.

Browser compatibility testing. Test your application to see if it works correctly on different browsers and operating systems. The same script can run on any Selenium platform.

System functional testing. Create regression tests to verify application functionality and user acceptance.

Selenium IDE

Selenium IDE is an integrated development environment for Selenium tests. It is implemented as a Firefox extension, and allows you to record, edit, and debug tests. Selenium IDE includes the entire Selenium Core, allowing you to easily and quickly record and play back tests in the actual environment that they will run.
Selenium IDE is not only recording tool: it is a complete IDE. You can choose to use its recording capability, or you may edit your scripts by hand. With autocomplete support and the ability to move commands around quickly, Selenium IDE is the ideal environment for creating Selenium tests no matter what style of tests you prefer.

Features:

  • Easy record and playback
  • Intelligent field selection will use IDs, names, or XPath as needed
  • Autocomplete for all common Selenium commands
  • Walk through tests
  • Debug and set breakpoints
  • Save tests as HTML, Ruby scripts, or any other format
  • Support for Selenium user-extensions.js file
  • Option to automatically assert the title of every page

Click here to visit the Selenium homepage
and click here for the Selenium IDE

Optimize your Ajax with TIBCO General Interface Performance Profiler

Tagged:  

TIBCO General Interface Performance Profiler

As the complexity of your Ajax applications increase, so do the opportunities for performance issues to arise. Checkout TIBCO General Interface Performance Profiler, an open source (BSD License) Ajax application profiling tool for benchmarking the performance of Ajax solutions created with TIBCO General Interface and other Ajax toolkits. Create performance testing scripts in JavaScript then run them against live applications to get performance statistics for selected operations within your application. The Performance Profiler is smart enough to let you handle asynchronous operations too.

With this profiler, you can now dissect your application to test how long it takes your services to respond, your components to render, your data to parse, and your functions to execute. Basically everything you need to pinpoint the bottlenecks in your code. One thing this profiler won't do -- optimize your code for you -- that's your job.

Click here to vist Tibco's GI Performance Profiler Homepage

A Better Ajax Back Button Solution

If you've spent any time coding an Ajax application you know that the one of the problems with Ajax is that it breaks the back button. You have probably seen solutions that use an iframe and a hash (#) in the url to fix this issue. While this works there is a much simpler way that I've been using in my applications for the last year or so.

The key is the A tag (also known as the anchor tag) and the name parameter with a hash in the url. The trick is to either dynamically create the element or to just change the value of the name parameter to the matching value of the hash.

Below is an example of changing the name of the anchor tag.

//Anchor Rename Object this could also be a simple function if preferred.
var AnchorRename=new Object();
AnchorRename.CreateObject=function(anchorname, anchorid){
	this.anchorid=anchorid; //This is the id of the anchor element
	this.anchorname=anchorname;
	this.RenameAnchor(anchorname, anchorholerid);
};
AnchorRename.CreateObject.prototype={
	RenameAnchor:function(anchorname, anchorid){
		document.getElementById(anchorid).name = anchorname;
	}
};

In this example you would pass in the new value of the name (which must be the same value as after the hash in the url) and the id of the anchor element.

Below is an example of dynamically creating the tag and name values.

//Anchor Rename Object
var AnchorRename=new Object();
AnchorRename.CreateObject=function(anchorname, anchorholderid){
	this.anchorholerid=anchorholderid; //This is the id of the element to hold the new anchor
	this.anchorname=anchorname;
	this.RenameAnchor(anchorname, anchorholderid);
};
AnchorRename.CreateObject.prototype={
	RenameAnchor:function(anchorname, anchorholderid){
		var AnchorCode=document.createElement("a");
	        AnchorCode.setAttribute("name", anchorname);
		document.getElementById(anchorholderid).appendChild(AnchorCode);	       
	}
};

In this example you would pass in the new value of the name (which again must be the same value as after the hash in the url) and the id of the anchor element.

Now the question that you may be asking is how does creating or renaming the anchor element help with fixing the back button. That is where when you call the object comes into play. You need to create or rename the object before a link is clicked. So, I would recommend using an onmouseover and an onfocus event to call the create or rename of the element so that before a link is clicked the required anchor element will be created.

I hope that this post has shown an easier solution to fix the back button problem that occurs when we create Ajax applications. Now go out there and try using it on your applications!

Update: I have posted a working example of this solution and it can be read here.

Syndicate content