Javascript Tip: Avoid Global Variables

Creating globals is considered a bad practice in general and is specifically problematic in a team development environment. Globals create a number of nontrivial maintenance issues for code going forward. The more globals, the greater the possibility that errors will be introduced due to the increasing likelihood of a few common problems.

The potential for naming collisions increases as the number of global variables and functions increase in a script, as do the chances that you’ll use an already declared variable accidentally. The easiest code to maintain is code in which all of its variables are defined locally.

The global environment is where native JavaScript objects are defined, and by adding your own names into that scope, you run the risk of picking a name that might be provided natively by the browser later on.

Ensuring that your functions don’t rely on globals improves the testability of your code. Continue reading

CSS Inheritance

People often confuse inheritance with the cascade. Although they seem related at first glance, the  two concepts are actually quite different. Luckily, inheritance is a much easier concept to grasp.

Certain properties, such as color or font size, are inherited by the descendants of the elements those styles are applied to. For instance, if you were to give the body element a text color of  black, all the descendants of the body element would also have black text. The same would be  true of font sizes.

css_inheritance

Continue reading

CSS Cascade and Specificity

Ever wonder why they are called “cascading” style sheets? CSS allows you to apply several style sheets to the same document, which means there are bound to be conflicts. CSS handles such conflicts through a process known as the cascade.

The cascade refers to what happens when several sources of style information vie for control of the elements on a page: style information is passed down (“cascades” down) until it is overridden by a style command with more weight. Continue reading

Naming your ID and Classes

When naming your IDs and classes, it is important that you keep the names as “unpresentational” as possible.

For instance, if you want all of your form notification messages to be red, you could give them a class of red. This is fine as long as there are no other red elements on the page. However, say you wanted to style required form labels red as well. You are now forced to guess to which element that class could refer, and things are already starting to get confusing.

Imagine how confusing the code could become if you used presentational elements across the whole site? Continue reading

JavaScript Tip: Console.log

In JavaScript development, a very useful method for finding out the details about a JavaScript item (variable, object, property, etc) you have, is the console.log() method. This allows you to place things in the console rather than somewhere on your page (like using an alert() method).

Browser Support

  •   Chrome, Safari, Opera: native console.log()
  •   Firefox: native console.log() with Firebug
  •   IE9: native console.log(), but it needs Develop Tools to be turned on first.
  •   IE8: Do not bother, use Firebug Lite instead.

JavaScript Tip: Event Registration

JavaScript normally runs code sequentially, which means in the order that the browser reads it from your file, but we can write JavaScript code that will run only when something happens in the browser. That’s because browsers can trigger events, when things happen to elements on your page.

When the page loads in a browser, when the user moves the mouse over a link, when a video has finished loading, or when a form is submitted are events. So if you want to take care of a task when something happens you have to capture that event, and that’s done through a process called event registration.

This means telling the browser that you want to do something when an event takes place, and there’s several ways of doing that. Some are more compatible with older browsers than others.

The first (but legacy) way of doing this is by using tag attributes, and this works pretty simply.

Continue reading