Friday, August 17, 2007

Just had a funny thought...

I was just thinking how much I love JavaScript and how it has been my favorite language/platform for years. People who consider themselves 'real' developers have always given me a hard time because of it. That and "you can use it just like an OOP language, but it's not really one"! Haha! Who cares if it only acts like it!?

How could you not love it? It's so dynamic - you can do anything you want with it!

It's funny that everyone is getting excited about the DLR in upcoming .Net releases. And, "it's so cool, because it supports dynamic language extensions to C#." Hehehe.. Well, at least the rest of the world is finally starting to catch up to me.. 8^)

Important differences between the JavaScript null and undefined

I'm cleaning up some old code today primarily consisting of JavaScript and a bit of C# (ASP.net). I'm trying to make the code faster and more easily understood.

I thought I'd clean up the code used when working with elements on the page. Generally, this consists of an assignment from the DOM to a local JS variable and then an if statement to verify the object was found.

Now, some people will claim that it isn't necessary to perform the check (assuming you are checking during onload or after) because it is highly unlikely that only part of the web page will be downloaded. I agree that it is unlikely and quite frankly if only a portion of the page gets downloaded you're going much more important problems to worry about than a few JavaScript error dialogs. But, nevertheless, I still feel it is a good practice to check for null objects.

I have always done a simple check as follows:

var obj = document.getElementById("myobject");
if (obj)
   obj.style.display = "block";


However, I know many web developers who go a little further:

var obj = document.getElementById("myobject");
if (null != obj && "undefined" != typeof(obj))
   obj.style.display = "block";


I generally only check for undefined when checking if a method parameter exists or not.

function myFunc(id, e)
{
   var obj = document.getElementById(id);
   if (obj)
   {
      if ("undefined" != e && null != e)
         obj.innerHTML = "An error occurred: " + e;
   }
}


Does it matter? What do you do? What's the difference between null and undefined?

Well, so the difference between null and undefined are very simple, yet very important. null is actually an object in JavaScript. undefined is a value for objects that don't exist or variables that have not yet been assigned to.

Checking for null is simple:

if (obj) // the object exists
if (null != obj) // the object exists
if (!obj) // the object is null
if (null == obj) // the object is null


Checking for undefined is just as simple*:

// test as an object
if (undefined != obj) // the object is defined
if (undefined == obj) // the object is undefined
// test as a string
if ("undefined" != typeof(obj)) // the object is defined
if ("undefined" == typeof(obj)) // the object is undefined


*Please note, however that a lot of people make the simple mistake of testing the wrong thing with regards to undefined. There are two ways to test it, as a string or as an object. Look closely at the two different types of examples above, so you don't accidentally mix them up! (Which I've only done about a bajillion times!)

And, don't forget that just because an object is not undefined, does not mean that it is non-null as well. In other words a null object is still an object therefore it is defined. That make sense?




Well, in my cleaning up I decided to revisit the whole thing and noticed like all maturing web applications there are many variations and uses of these throughout our code. I needed to know for sure, however, what is returned by getElementById (and getElementsByName) when the object or objects are not found. And, also what is the best, cleanest way to test those objects.

So, I wrote a few tests:

var obj = document
      .getElementById("this-elem-doesnt-exist");
if (!obj)
   alert("!obj");
if (obj)
   alert("obj");
if (null == obj)
   alert("null == obj");
if (null != obj)
   alert("null != obj");
if (undefined == obj)
   alert("undefined == obj");
if (undefined != obj)
   alert("undefined != obj");
if ("undefined" == typeof(obj))
   alert("\"undefined\" == typeof(obj)");
if ("undefined" != typeof(obj))
   alert("\"undefined\" != typeof(obj)");
if (undefined == typeof(obj))
   alert("undefined == typeof(obj)");
if (undefined != typeof(obj))
   alert("undefined != typeof(obj)");





Now, let's run the same tests against an object that we know exists:

var obj = document
      .getElementById("this-elem-exists");
if (!obj)
   alert("!obj");
if (obj)
   alert("obj");
if (null == obj)
   alert("null == obj");
if (null != obj)
   alert("null != obj");
if (undefined == obj)
   alert("undefined == obj");
if (undefined != obj)
   alert("undefined != obj");
if ("undefined" == typeof(obj))
   alert("\"undefined\" == typeof(obj)");
if ("undefined" != typeof(obj))
   alert("\"undefined\" != typeof(obj)");
if (undefined == typeof(obj))
   alert("undefined == typeof(obj)");
if (undefined != typeof(obj))
   alert("undefined != typeof(obj)");






Based on the results, I really think that all you should have to do is a simple check as in the first example. So, I'm changing our code to look nice and clean using just a simple if (obj), unless there is a need to check if it's undefined.

Thursday, August 16, 2007

Targeting Firefox, IE 7, and IE 6 (and older) browsers via CSS

The tip for today's post is applying different styles to IE 7, IE 6 and older, and all the other browsers out there without having custom script or changing out style sheets. It’s simple too!

1) First, create your normal style, which of course applies to all browsers:
  padding: 2px 6px 2px 6px;
2) Then, create the style you’d like to apply only to Internet Explorer 7:
  #padding: 1px 6px 1px 6px;
3) Now, create the style to apply only to Internet Explorer 6 and older:
  /* _padding: 3px 4px 3px 4px; */

There you have it! Now you can target the three main browsers: IE 6, IE 7, and everyone else.

Technically, step 2 doesn’t only apply to IE 7, but really applies to all Internet Explorer browsers. In other words, if you wanted to target all IE browsers only steps 1 and 2 are needed.

I don’t remember where I found this. I believe parts came from a couple of different sources, but anyway, it’s a great hack – especially when used together.

Saturday, August 4, 2007

How many blogs are you subscribed to?

Reading blogs take too much time. There have always only been a few that I actually read, frequently. But, most of them, even long time favorites (such as Scobleizer) just seem to take too much time to read.

I have found myself unsubscribing from blogs more and more. Not that I ever had a whole lot to begin with. At the highest point I maybe had 60 subscribed to in my reader. I just don't want to spend the time reading blogs, where most of it is what I consider fluff. Currently, I have about 35 subscriptions, but only about 15 are really active with at least 2 or more posts a week. Of course, some like MAKE and Engadget have dozens and more each day.

Being an IT and Dev Generalist, I am involved in so many different technologies. I would like to get the synopsis of each area without having to slowly go through all of the (seemingly) countless posts about the things I'm not interested in. I want to go to a web site and be able to read in 10 minutes or less each day the current buzz about the subjects I'm interested in. It would of course keep track of what I last looked at. If I wanted more detail (and had time for such a thing) I could follow links for more, etc.

I would also like it to remind me, say, once a month to look at certain topics. Things like check out the latest health-related articles on MSN Health or check up on what my local politicians are currently going on about.

I'm thinking the user interface should be similar to this:


Information Technology

Windows Home Server

No news to report | Saved for later (2)

Windows Scripting

New blog posts (3) | New articles (6) | Saved for later (2)

Windows Mobile

New blog posts (4) | No new articles

Development

Ruby

Blog posts (11) | New articles (4)

C# / .Net

Blog posts (11) | New articles (4)

Hardware & Hobbies Engineering

Robotics

New blogs posts (3) | No new articles

HAM Radio

No new blogs | No new articles

Commodore 64

No new blogs | No new articles

Politics

Ann Coulter / Human Events

New blogs posts (3) | New articles (1)