Sep 17 2007

Twelve Elements of JavaScript Style

I’ve been reading a lot of articles and viewing many presentations on JavaScript. One of the most prolific writer and presenter on the subject is Yahoo!’s Douglas Crockford. I’ve recently rediscovered Crockford’s classic article on The Elements of JavaScript Style (part 2). Between these two articles Crockford lists 12 key elements of JavaScript style.

  • Avoid archaic constructions.
  • Always use blocks in structured statements.
  • Avoid assignment expressions.
  • Use object augmentation.
  • Use common libraries.
  • Watch out for type coercion when using ==.
  • Use the ?: operator to select one of two values.
  • Don’t use the ?: operator to select one of two actions.
  • Use the || operator to specify a default value.
  • Never use implicit global variables.
  • global variables are evil.
  • Use inner functions to avoid global variables.

Aug 10 2006

Rounded Corners With Rico

I’ve seen and tried a ton of HTML/CSS/JavaScript tricks and hacks to get rounded corners on DIV elements. So far I have found that the easiest way to get rounded corners on divs is by using the Rico JavaScript framework. To demonstrate this in code let me define a snippet of HTML:

<DIV id="mydiv" style="background-color: #FFE6BF">
  some text
</DIV>

To make the DIV element have rounded corners just execute the following bit of JavaScript, perhaps in the document.onload event method:

Rico.Corner.round('mydiv');

You can also pass in some additional options to Rico’s round function which indicates which corner(s) to round. Here is another example which rounds only the top-right and bottom-left corners:

Rico.Corner.round('mydiv', {corners:'tr bl'});

And of course, br and tl also work.

As a convenience, you can round the corners of multiple elements at once. To round all DIV elements that use a given class use the following JavaScript:

new Rico.Effect.Round('div', 'roundCssClass');

With the above JavaScript, only those DIV element that use the CSS class roundCssClass will be rounded off.


Sep 24 2005

Hide Your HTML Source

Sometimes you might not want to allow guests to your website to view the HTML source code. You can disable the right click context menu by using the following bit of code in your page:

<body oncontextmenu='return false;'>

You can use this feature to prevent users from right clicking and saving an image from your site. This is support by IE and Firefox. I have seen sites use similar functionality to this to pop up an alert with a copyright message is a user tries to right click on an image.

Keep in mind that a user can always disable JavaScript altogether, view the source from the application menu, and/or even save the whole HTML file onto his/her desktop and view the source from Notepad.