Thursday, March 30, 2006

Displaying the Sizes of Your SQL Server's Database's Tables

Displaying the Sizes of Your SQL Server's Database's Tables. Uses ASP.NET to show you how much space you are using for each table in your SQL Server database. Returns table name, number of rows, reserved space, space used by table data, space used by table indexes and unused space.


Tags: , ,

Tuesday, March 28, 2006

Helpful Links on JavaScript Closures

Helpful Links on JavaScript Closures. Some useful links on closures (what they are, how to write them etc). They are very useful, but can cause memory leaks (especially in Internet Explorer) and are not always appropriate.


Tags: ,

Wednesday, March 15, 2006

Round-up of 30 AJAX Tutorials

Round-up of 30 AJAX Tutorials is a very useful list of tutorials for those just starting with Ajax, or lacking knowledge in some areas. Areas it covers:

  • Client-Server Communication
  • Drag and Drop
  • Web Forms
  • File Uploader (Java)
  • Framework and Toolkit
  • Getting Started
  • Image Gallery (JavaScript, XML)
  • Keyword Suggest
  • Live Search
  • Rounded Corner
  • Sorting
  • Tabbed Pages

Tags: , ,

Tuesday, March 14, 2006

Ajax Toybox

Ajax Toybox gives you simple examples of using client-side JavaScript (XmlHttpRequest) to get remote content (served by PHP). Includes a dynamic City/State lookup and an RSS News Ticker (using Magpie RSS and PHP to get remote feeds).


Tags: , , , ,

Monday, March 06, 2006

JavaScript Framework Comparison - Popup Windows

I have a simple function for opening new windows. I want all anchors with the class external (or contained in a parent with this class name) to open links in a new window using this function. So I look at the various frameworks for doing it. In this case, I am comparing jQuery with Prototype (more may follow soon in an edit to this post).

function popup()
{
 window.open(this.href);
 return false;
}

This function is the same, regardless of framework used (so as to emulate a real world scenario).

HTML code:

<p>In a div</p>
<div class="external">
 <a href="http://www.google.com">Google</a> |
 <a href="http://search.yahoo.com">Yahoo</a> |
 <a href="http://search.msn.com">MSN</a> |
 <a href="http://www.ask.com">Ask</a>
</div>
<p>In a list</p>
<ul class="external">
 <li><a href="http://www.google.com">Google</a></li>
 <li><a href="http://search.yahoo.com">Yahoo</a></li>
 <li><a href="http://search.msn.com">MSN</a></li>
 <li><a href="http://www.ask.com">Ask</a></li>
</ul>
<p>Standalone</p>
<a href="http://www.google.com" class="external">Google</a>
<a href="http://search.yahoo.com" class="external">Yahoo</a>
<a href="http://search.msn.com" class="external">MSN</a>
<a href="http://www.ask.com" class="external">Ask</a>

jQuery

$(window).bind("load",function()
{
 $(".external a,a.external").bind("click",popup);
});

Works as expected in Internet Explorer 6 (Windows 2000), Opera 8.5 and Firefox 1.5.

Prototype

Event.observe(window, 'load', setPopup);
function setPopup()
{
 var nodes = $A(document.getElementsByClassName("external"));
 nodes.each(function(node)
 {
  if(node.nodeName == 'A')
  {
   Event.observe(node, 'click', popup);
  }
  else
  {
   var subnodes = $A(node.getElementsByTagName("a"));
   subnodes.each(function(node)
   {
    Event.observe(node, 'click', popup);
   });
  }
 });
}

It could just be me not knowing enough about Prototype, but that seems like far more code than necessary. It doesn't get any better though. Firefox and Opera opens the new window with the right page as expected, but return false is ignored. Internet Explorer opens a new windows and does not seem to ignore return false, but this.href ends up being undefined

Summary

In this case, jQuery wins out. Far less code is needed (both the framework and the page code) and it works in all tested browsers. So it shows that depending on the circumstances, it is not always best to go with the framework with the most features.


Tags: ,

Saturday, March 04, 2006

JavaScript Frameworks

There are many frameworks to make working with web pages (via JavaScript) easier. All of them work cross browser, do events (window load, element click etc) and basic manipulation (get element, modify css, hide/show/move), but some do more than others. Syntax often differs between them.

Choosing one to work with depends on what you want to do, and how much code you are willing to write yourself (sometimes it is more satisfying to figure out a solution to a problem yourself, rather than to rely on someone else's code). Like with any code, the more it does, the bigger the download for the client. So it may be best to go with the most minimal solution (no extra features you won't use).

Here is a basic overview of what is available (that I know of)

Prototype

http://prototype.conio.net/

There is a useful reference for this at Prototype Dissected. As you can see from it, Prototype has quite a lot of features.

Very widely used and quite a reasonably big file (approx 46kb). There are several other projects based on it.

  • Ruby On Rails - open source web development framework, based on the Ruby language.
  • script.aculo.us - a library (approx 100kb) for adding visual effects (animation, fade), drag and drop and more to your web pages.
  • Rico - an Ajax library (approx 90kb) built on Prototype. Behaviour - this uses CSS style selectors to attach events to elements in your page.
  • moo.fx - a lightweight (3kb / 6kb with extra effects) alternative to script.aculo.us. Also, as an option, you can use a cutdown version of Prototype (3kb)

jQuery

http://jquery.com/

A relative newcomer onto the scene. Very lightweight and easy to use. < 15kb compressed. Basic features include: DOM traversing and modification, iteration, events, style and effects. Plugins are easy to write and there is currently an Ajax one available. Example code (adds a line break after all labels, and adds a border around the associated element):

var break = document.createElement("br");
$(window).bind("load",function()
{
 $("label").after(break).each(htmlFor);
});
function htmlFor()
{
 $(this.htmlFor).css("border","1px solid #000");
}

Dojo

http://dojotoolkit.org/

Animation, Widgets, Events, Ajax and more. It includes a rich text editor widget, which just requires some extra html markup. However, to make best use of it, extra attributes need to be added, meaning that it will not validate. It can be applied to div's, but then there would be an issue if the client has JavaScript disabled, so it is better if textarea's are used instead. Other widgets include a DatePicker, TimePicker, Menu, ContextMenu and ToolBar. It has a package system which means you don't have to include extra markup (it is dynamically loaded). Better suited when you know the client has enough bandwidth (i.e. not on dial up). There are several build available:

  • AJAX
  • I/O (XmlHttp)
  • Event + I/O
  • Widgets
  • The "Kitchen Sink" (all packages)

There is a good Dojo tutorial available: Dojo Done Quick, which covers coverting your own code to use the Dojo events and widget systems.

Yahoo! User Interface Library

http://developer.yahoo.net/yui/

One of the most well known companies that are doing a free toolkit for working with JavaScript. Already outlined its features before: Yahoo! User Interface Library and Design Pattern Library

Atlas

http://weblogs.asp.net/scottgu/archive/2005/06/28/416185.aspx

Microsoft is working on Atlas, mainly targetted at ASP.NET developers, but hopefully will work with any server side solution. No download link that I can find, so at the moment, the Yahoo one is the most 'mainstream' (company known for other things) solution.

Conclusion

These should be seen as enhancements to your web page. You should still have a fallback to server side processing. Otherwise your site is not accessible. Get the basics done first, then work on the client to improve the experience and reduce hits to you web server.


Tags: , ,

Friday, March 03, 2006

Yahoo! Developer Network - PHP Developer Center

Yahoo! Developer Network - PHP Developer Center - found via Quick Link: Yahoo's PHP Developer Center. A good resource for PHP developers, including snippets and useful links. Code is for interacting with Yahoo's Web services, but could be used as a learning tool for various common tasks (parsing XML, caching etc).

Tags: , ,