Progressive Enhancement

To learn more about JavaScript techniques, you can take the JavaScript class

Progressive enhancement is the fundamental base for all front-end development. At its most basic level, it is creating a functional separation between HTML, CSS, and JavaScript.

Progressive enhancement is a layered approach to Web design, where focus is put on content, the user, and accessibility. The first step is keeping your HTML, CSS, and JavaScript separated, but we don’t refer to them as HTML, CSS, and JavaScript. We refer to these three “layers” as structure, presentation, and behavior, probably so the methodology can be accurately applied to other areas beyond the current state of Web design.

Regardless, it is a bottom-up or inside-out building model for a website or application.

You first focus on the content and mark it up with semantic and meaningful HTML. This is the first layer, “structure.” After the content is properly marked up, we can move onto layer two, “presentation.” On the presentation layer, we deal with CSS. The third layer of progressive enhancement, “behavior,” we deal with last.

3_layers
Continue reading

JavaScript Tip: Reading from an Object

Reading a value from an object can also be accomplished using bracket or dot notation:

Unlike arrays, it’s not possible to read the contents of an object using a numeric index. The only type of index that can be used is a named one:

JavaScript Tip: this and Objects

When a function is created, a keyword called this is created (behind the scenes), which links to the object in which the function operates. Said another way, this is available to the scope of its function, yet is a reference to the object of which that function is a property/method. So every function, while executing has a reference to its current execution context.

Continue reading

JavaScript Tip: Iterating over an Object

Iterating over an object isn’t as simple as looping over an array. With an array, you simply increment an index value and use that to step through the array. With objects, there is no index value.

Objects are collections of key/value pairs, so you need to step through them differently:

Continue reading

JavaScript Tip: Adding Property to an Object

After you’ve declared your object, however, you can still add key/value pairs to it in a couple of ways.

This is known as bracket notation. The alternative and more common syntax is dot notation. Here’s an example:

Dot notation is simpler than bracket notation; however, there are certain tasks that can only be done with bracket notation. For example, you can use a variable inside the brackets, which can’t be done using dot notation. Bracket notation also supports strings containing spaces and other characters that are invalid in dot notation.

JavaScript Tip: Creating an Object

As with arrays, there are a couple of ways to create objects, and, just like arrays, one is preferred over the other. So even though you can do this:

You can also use object literal notation:

It’s safer to use the object literal notation {} as it’s unable to be overwritten. The object literal represents a new, empty object. Continue reading

JavaScript Tip: Strict Equal (===)

A strict equal comparison performs no conversion of types. Where “” == 0 would return true for a regular equal comparison, “” === 0 would not, since an empty string does not equal zero: