Locating Bugs in Your Javascript Code

If you’re anything like me, you have traditionally used javascript alert boxes to try to identify and diagnose bugs in your javascript code. There are two major issues with this process, though.

  1. It’s extremely inconvenient for your users if you’re trying to debug a live application.
  2. It can be a real problem if you end up in some sort of long/infinite loop and end up outputting multiple alert boxes.

There is a better way, though, and it basically works in Internet Explorer (version 8), Firefox (with the Firebug extension installed), Chrome, Safari and Opera. This is nothing new, by any strecth of the imagination, but it still seems to be a bit of a well-kept secret for a lot of developers.

Cross-Browser Gradient Backgrounds

One of the great new features coming with CSS3 is the ability to use native gradient backgrounds. In addition to saving server resources (no need to call an external image), the gradients tend to be more vibrant and faithful to the original colors than any external images.

So far, none of the modern browsers have agreed on which method to use to implement the gradients, so you will need to utilize a few different methods in order to get it to work in multiple browsers.

Comparing 3D Environments in Your Browser

Editor’s note: Austin from MuseGames put together this comparison of how 3D environments render in a variety of browsers. Muse Games is a destination site that finally brings fun 3D, multiplayer gaming in to the web browser.

Being peddlers of 3D content, we thought it appropriate to take a look at the current state of 3D in the browser. How do the different browsers stack up? Read on to find out, and if you’re using IE6, please, for the love of your developers, upgrade.

 Safari 3 (and 4)

Safari 3D

Rating: BEST

Download:  Mac  PC

Both Safari 3 and 4 dominate all the other browsers in terms of speed, performance, and aesthetics, with 4 being the latest and greatest. We of course realize Safari is not all that popular, particularly with Windows users, but the sheer technical superiority of Safari warrants giving it a shot. In terms of specifics, Safari 4 executes javascript faster than any other browser (with the exception of Chrome, where it is about evenly matched), it supports the latest standards for website design, and it exhibits no threading or memory issues related to rendering 3D in the browser via an ActiveX plugin(see Firefox).

CSS3 Will Include Rounded Corners

With Web 2.0, rounded corners have become wildly popular. Unfortunately, as of right now, you need to use transparent images, some fancy CSS hacks and some extraneous HTML to make them work properly.

However, Mozilla (Firefox) and Webkit (Safari, Konqueror) browsers have implemented a property called border-radius, which will apparently be included in the CSS3 spec, allowing you to easily create rounded corners on any bordered HTML element.

At this time, you have to use browser-specific properties for Mozilla and Webkit browsers, as the border-radius property is not yet fully implemented. You can find more information about the -moz-border-radius and -webkit-border-radius implementations on The Art of Web. More info about the proposed CSS3 spec on border-radius can be found on the W3 site.

Insert Text Into Textareas Using Javascript

The other day, I was working on a script to allow administrators to edit templates within the admin center of the content management system I’m developing. Rather than just using a plain textarea with the contents of the template files, I wanted to add some simple functions with javascript. First, I wanted to set it up so that the tab button would insert a tab rather than skipping to the next form field. Second, I wanted to add a list of the various template tags that can be used in the CMS, and allow the admins to click on one of those to insert it in the textarea.