Friday roundup for March 28, 2008

ASP.Net, Browsers, JavaScript/Ajax, News 1 Comment »

Here is what I found interesting this week.

Key events and Safari 3.1
There has been a change in Safari 3.1 for how keypress events are handled. John Resig interviewed Yehuda Katz to get the skinny and understand why this was done.

eBay Discriminates Against Ebook Sellers, Squashes All Digital Downloads
In what will go down in Internet history as probably one of the lamest decisions ever in e-commerce, running second only to the firing of AOL CEO Jon Miller in 2006, eBay announced yesterday it will no longer allow any digitally downloadable product to be sold via an auction.

Where’s my .NET 3.5 (on IIS), Dude?
The not so obvious ‘problem’ is that if you fire up a machine that has .NET 3.5 installed, you might be surprised to find that the IIS service panel’s ASP.NET does not show an option to select the .NET Runtime of 3.5.

Opera and WebKit pass Acid3 test
The latest builds from Opera and WebKit are scoring a perfect 100/100 on the Acid3 test. Wow!

Where is Firefox on Acid 3? Here.
Some people have been surprised to not hear much from Mozilla around Acid 3. WebKit and Opera are duking it out, but what about Firefox?

Mike Shaver of Mozilla has posted on his views that Acid 3 is a missed opportunity and is pretty damning of the whole thing.

Using the YouTube API via Ext
With the YouTube API recently released, there’s bound to be lots of cool controls coming out soon. Thorsten Suckow-Homberg spent a weekend hacking up a Ext-based user extension that leverages YouTube’s chromeless API to build The Ext.ux.YoutubePlayer.

20 Types of Pages that Every Blogger Should Consider
When you use WordPress you’re given the choice when publishing between doing it as a ‘post’ or as a ‘page‘. Posts go up on your blog while ‘pages’ are static pages that you can publish without it having to go up on your blog.

Did you like this post? Be sure to grab my RSS feed so you don't miss out on more great articles.

Base2: A Standards Based JavaScript Library

JavaScript/Ajax No Comments »

I’ve posted about Dean Edwards‘ Base2 library in the past but I wanted to write a post that brings all the growth Base2 has under gone over the last couple of years into a brief overview of the project so it is easy to see the progress Dean has made and where the project is headed.

In early 2006 Dean Edwards began a little project called Base. This was he first attempt to ease the pain of developing Object Oriented JavaScript.

I want a nice base class for JavaScript OO:

  • I want to easily create classes without the MyClass.prototype cruft
  • I want method overriding with intuitive access to the overridden method (like Java’s super)
  • I want to avoid calling a class’ constructor function during the prototyping phase
  • I want to easily add static (class) properties and methods
  • I want to achieve the above without resorting to global functions to build prototype chains
  • I want to achieve the above without affecting Object.prototype

About one year later Dean released the next iteration, Base2. Although Base was a fairly simple library to use there was no documentation. Other than Dean’s, very helpful, posts on his website there was nothing you could refer to in the traditional reference sense.

In August of 2007 there appeared a nice post on Dean’s site that annouced the arrival of some documentation for Base. Although it is stamped as currently incomplete (at the time of this article anyways) it is a huge boost for the library and the community that has grown around it.

In early 2008 Dean released some improvements for Base2 and some nice code examples further demonstrating what the library can do to make developer’s lives easier.

One thing that, I believe, makes Base stand out, and Dean as an excellent programmer, is his commitment to standards. Base adherse to some fundamental OOP rules, which Dean has outlined in a nice reference guide for library developers.

Base has enjoyed great admiration in the JavaScript community with other libraries using it as a starting point for their library cores.

Thanks Dean for the great leadership you bring to the web development community and keep up the great work.

Did you like this post? Be sure to grab my RSS feed so you don't miss out on more great articles.

Method overloading in JavaScript

JavaScript/Ajax No Comments »

If you have been programming for any length of time you probably know what method overloading is or have at least heard of it.

What is method overloading?

Method overloading is a feature found in various object oriented programming languages such as C#, C++ and Java that allows the creation of several functions with the same name which differ from each other in terms of the type of the input and the type of the output of the function.

[Wikipedia]

With the formalities out of the way, there are times when method overloading can be very helpful. JavaScript is no exception. The problem is it is not as apparent how to achieve method overloading in JavaScript because it doesn’t work the same as more traditional languages do.

What won’t work

Let’s look at implementing an overloaded function how you would think it should work.

function myFunction() {
  //function with no arguments
}

function myFunction(arg) {
	//overloaded function with one argument
}

Now JavaScript will accept this and you may think you are done. Think again. You do not have an overloaded function. In the above example your second function definition just overwrote the first so you only have a function that excepts one argument. I told you it doesn’t work the same.

What will work

Now that we have looked at what won’t work let’s take a look at the proper way to implement an overloaded function.

Let’s look at a simple example using bunnies. Awww, how cute.

function getBunnyColor() {
	var name = arguments[0] == null ? 'peter' : arguments[0];
	switch(name) {
		case 'peter':
			return 'brown';
			break;
		case 'flopsy':
			return 'white';
			break;
		default:
			return 'unknown bunny';
			break;
	}
}

getBunnyColor(); //-> 'brown'
getBunnyColor('flopsy'); //-> 'white'

What is that?

Now I’ll explain what I did. Every function has an array called arguments. This array contains the arguments that are passed into the function even if specific arguments are declared in the function definition.

So knowing that I didn’t bother to declare any arguments when I defined the function. I instead used the arguments array to detect what had been passed in. If arugments[0] was null (no argument had been passed) then I assigned a default name of ‘peter’.

Conclusion

So JavaScript implements method overloading a bit differently than most languages meaning your function definitions will look different but you use the overloaded functions the same way. Hope this helps you out!

Did you like this post? Be sure to grab my RSS feed so you don't miss out on more great articles.

Friday roundup for March 21, 2008

JavaScript/Ajax No Comments »

Well it is Thrusday but I won’t be around to post this on Friday being a holiday and all. I only have one link for you this week. Either it has been a boring week for dev blogs or I have been way to busy with other things to find them. Enjoy.

A collection is not an array
James Edwards summeriezes this point. Although at first glance a collection of DOM elements may look like an array (you can iterate like an array) but ultimately it is not an array and lacks many of the array methods like push().

Did you like this post? Be sure to grab my RSS feed so you don't miss out on more great articles.

Friday roundup - March 8, 2008

ASP.Net, Browsers, JavaScript/Ajax, Silverlight No Comments »

I have decided to start doing a Friday round up of all the interesting articles I find during the week. Here are some stories I found interesting for the week of March 3 to March 8. Enjoy!

Internet Explorer 8 will render in Standards Mode by default
The IE team has announced that it will render HTML markup in “the most standards compliant way it can.” It is nice to see that MS has decided to actually listen to what web developers want, in regards to IE, for a change.

The Top 5 Recommendations For Monetizing Your Blog
The readers over at ProBlogger have given their top recommendations on how to make some money with your blog.

Acid 3 released, Webkit praised
Jon Tan ran a few tests and posted the results. Hixie commented on his blog about the release, and praised WebKit on how they have been closing a large number of bugs

Silverlight to run on Symbian phones
Microsoft is working with Nokia to get Silverlight running on Symbian mobile phones. Would this help influence your decision to use Silverlight for UI over other technologies?

MVC Framework Preview 2 released, Jeff Palermo disappointed
Jeff gives a good overview, along with his opinion, of the changes that have been made in preview 2.

Internet Explorer 8 beta 1 is now available for download.
Take the first release of IE8 for a test drive. Will it deliver this time?

Did you like this post? Be sure to grab my RSS feed so you don't miss out on more great articles.

Use Javascript to open a link in a new window

JavaScript/Ajax No Comments »

This is a common question I see a lot on the Web Development Forum I help moderate. Many new developers read the tutorial on XHTML and ask “if target is depreciated then how do I open a link in a new window?” The answer is you use JavaScript. It is true that if the user has JavaScript disable then the link won’t open at all, right? I’ll show you the best way to open a link and have it degrade gracefully if JavaScript isn’t enabled and will even defy popup blockers.

Our leading lady, the anchor

Here is the link we’ll use for this article and will add our JavaScript to this link later on.

<a href="http://www.w3schools.com">Web Development Tutorials</a>

Okay now that the stage is set…

Enter stage right, our hero, JavaScript

Now comes the best part…

<a href="http://www.w3schools.com"
  onclick="return !window.open(this.href)">
  Web Development Tutorials
</a>

So let’s take a look at what this code does.

First off we added our code to the onclick event of the link so that it fires when the link is clicked. In order for our code to open a new window and not have the current window go to the specified link we would use a return false; but there are some conditions when an arbitrary return false; would be problematic for the user.

The plot thickens

Consider this if we had just done

<a href="http://www.w3schools.com"
  onclick="window.open(this.href); return false;">
  Web Development Tutorials
</a>

Now can you spot the problem with this? No? Don’t feel bad. This is probably the answer I see given most often. So what is wrong with it? Well if the user’s browser has a popup blocker enabled then this link will likely not open. Some popup blockers notify the user that it prevented the link from opening but some blockers don’t give any indication that they blocked the link. So the user could click away at your link and nothing would happen. In a case like this who do you think is to blame? You, of course, your site is broken because you are a poor excuse for a developer! We both know that is not the case but the user likely will assume this and not consider it is anything to do with them.

The resolution

So that is why I did not use return false. Before we go to much further we’ll look at this.href. This is very simple it just takes the value of href=”" for the current link (this).

Now it is important to note that the function, window.open, returns a boolean to identify whether it was successful at opening the window or if it got blocked. If the window if successful, true, then we want to stop the link from changing the location of the current window. This is why I use return !window.open(this.href). It will return the opposite of the status of the window open. So if the window opens correctly our code returns false preventing the change of the current window but if the function fails to open then our code returns true and the current window opens the link. So either way the user gets to view the content of the link uninterupted.

So our story has a happy ending, JavaScript has helped out users to view links in new windows while degrading nicely when JavaScript is disabled or our window gets blocked.

Did you like this post? Be sure to grab my RSS feed so you don't miss out on more great articles.

IE7.js version 2.0 (beta)

JavaScript/Ajax, News No Comments »

Dean Edwards has released the next version of his IE7 script to fix IE’s implementation of JavaScript.

I’ve made some important changes to the script which I’ll now outline.

* The IE7 project is now hosted on googlecode (I got fed up with SourceForge).
* IE7 is no longer modular. Instead I’ve merged the scripts into two: IE7.js and IE8.js
* IE7.js includes only fixes that are included in the real MSIE7 browser.
* All other enhancements are moved to IE8.js.
* IE7 is now much smaller (11KB gzipped).
* IE7 is now much faster (it uses the selector engine from base2.DOM)
* There are no dependencies on other files (except blank.gif)
* You can hotlink IE7/IE8.js directly from Google’s servers (usage instructions below)

Some fixes are removed completely:

* the :root selector
* support for XML files
* support for CSS namespaces
* the fix for base64 encoded images

Did you like this post? Be sure to grab my RSS feed so you don't miss out on more great articles.

Base2: Dean Edwards announces beta

JavaScript/Ajax No Comments »

There has been some movement on the base2 project by Dean Edwards. He recently announced the beta testing stage for base2 after being in development for sometime.

There are some great features in base2 and you should check it out. Dean has posted 3 articles on his blog with code samples for the base2 beta.

base2/base2.DOM in Beta
base2.DOM is now ready for a beta release. As previously discussed, I’ve renamed the Selectors API methods to keep in line with the standard.

base2: An Introduction
I’ve been working on base2 for a couple of years now and it is finally ready for a beta release. With base2 I aim to solve various problems with inconsistent JavaScript implementations and add a little sugar to the language at the same time.

Organise Your Code with base2.Package
A base2.Package provides a mechanism for bundling classes, constants and functions within a closure. You can define what symbols you want to export from the Package and you can define the symbols you want to import into the closure.

Did you like this post? Be sure to grab my RSS feed so you don't miss out on more great articles.

Internet Explorer doesn’t just suck, it also blows!

Browsers, JavaScript/Ajax No Comments »

brothercake of sitepoint.com has taken the time to outline not only how Internet Explorer fails to implement standard specifications but also that it doesn’t even implement it’s own propritary features in a consistant way. This article proves once again just how badly IE is implemented.

I’m spending most of my time these days working on SitePoint’s upcoming Ultimate JavaScript Reference, a task that I can fairly say is eating my brain.

Unlike the authors of the imminent Ultimate CSS Reference, I didn’t have any particular inclination to be nice to Internet Explorer. And I knew I was going to run into bugs and quirks, none of which would be any different in IE7, because the DOM simply wasn’t on the development radar for that version.

Even so, I’ve been nothing short of staggered at the sheer amount of chaotic brokenness evident in its implementation of even the simplest of things.

You may remember, not so long ago, that I wrote about the behavior of href attributes in Internet Explorer, and how for links they come back as qualified URIs rather than literal attribute values. But, oh man … that is so the tip of the iceberg when it comes to getAttribute() …

Read more…

Did you like this post? Be sure to grab my RSS feed so you don't miss out on more great articles.

Object Killing in IE7

Browsers, JavaScript/Ajax No Comments »

Jon Sykes has discovered a bizarre bug in Internet Explorer 7 (and presumably IE6 as there is next to no difference in the JScript engines). You probably wouldn’t encounter this bug very often but if you did it would really make you pull out your hair trying to debug.

There is a bug in IE7 where by a line of code inside a conditional statement that NEVER runs, can cause an object that is set with a fairly standard object declaration to be whipped. Even weirder is that it will have whipped the code even if you put a debug alert of the object before the code that does the whipping. Confused? I know I am.

Thankfully it does look fairly simple to work _around_ and avoid. But it’s probably a debug nightmare, and it’s a bug I couldn’t find referenced anywhere, so I figured it was worth sharing.

Did you like this post? Be sure to grab my RSS feed so you don't miss out on more great articles.
WP Theme & Icons by N.Design Studio
Entries RSS Login