Five Important Things to Know in Web Development

Neil Goodman — Sat, 05 May 2012 23:07:45 +0000

Getting back into web development a few months ago inspired me to write a list of topics on the subject. I came up with five things that I think are important for any web developer to at least be aware of.

The List

There are certainly more than five things to know when studying web development, but I came up with this list by choosing the skills that changed my development pattern from wild random hacking, to actual engineering.

I decided to focus on topics that would be useful to people just starting out, but at the same time were not completely trivial.

1. Clearing containers with `overflow: hidden;`

I used to insert

tags all over my HTML when dealing with floated elements. I stopped doing this after I learned a pretty useful trick: if a layout container in an HTML document is given the overflow: hidden; property, it will wrap around its floated children, producing the same effect as the solution. See my example here on jsFiddle.

Note: This is a useful trick, but I currently use LESS and Twitter Bootstrap in a lot of my projects. In that environment I just rely on the .clearfix() mixin. Check out LESS here: http://lesscss.org/ and Twitter Bootstrap here: http://twitter.github.com/bootstrap/.

2. CSS `position` and `z-index`

CSS positioning allows you to move elements around the page using offsets. For example:

#container {
    position: relative;
    top: 10px;
    left: 10px;
}

The above CSS offsets the #container element 10 pixels from its top and left edge in normal flow. Normal flow is the default rendering scheme for elements. There are CSS properties that can remove an element from normal flow, which allows for manual placement. This happens most often with elements that are floated or elements that have a position value set to absolute.

Absolute positioning is probably one of the most misunderstood concepts in CSS. I struggled with it for a while, but once you understand all the nuances, then it really isn't that difficult of a concept. Here are the basics:

All elements have a default position of static.
Any element with the position of relative will be offset from its normal position. You specify offsets using the top, left, right, and bottom properties.
Any element with the position of absolute will be offset from its first ancestor that has a position that is not static. An ancestor is any container element. For example, any
tag on this blog post has the tag as an ancestor, because all
tags are inside of the tag. All
tags are also inside of the tag, so is also an ancestor of
.
Any element with the position of absolute is taken out of the normal flow of the document, which means that the margin and padding of any neighboring element do not impact the absolutely positioned element.

There is another concept that is tied to using the position property in CSS, and that is the z-index property. This property allows you to lay elements on top of others. If you come from a math or engineering background, then you can think of the z-index as being an axis that is orthogonal to the screen. If you come from a design background, you can think of the z-index as being a layer number. In either case, elements with a higher z-index number will appear on top of elements with a lower z-index number. The reason this property is related to the position property is because you can only give z-index values to elements that have a position value other than static.

There is one last gotcha with position absolute. If you absolutely position an element, but you do not give it a top, left, right, or bottom value, then it will remain in the position that the browser would normally place it in. However, the element will still be taken out of the normal flow of the document, which means that its containers will not wrap around it, neighboring elements will not impact it with margin or padding values, and elements can appear above or beneath it. This style of absolute positioning is often used with drop-down menus, so that the drop-downs appear above all other content on the page, but otherwise appear where you would expect them to in the document.

Here is a jsFiddle with a position example.

If everything I just said made no sense to you, then read over some of these resources. One of them is bound to resonate with you. This is a really important concept to get down:

3. CSS Specificity

I went a long time without knowing about CSS specificity. Those days were a nightmare.

The bottom line: not all CSS selectors are equal. Each selector is given a weight and selectors with higher weight will override the styles contained in selectors with lower weight. Example:

CSS:

#too-bad-youre-blue {
    background-color: blue;
}

.i-want-you-red {
    background-color: red;
}

HTML:


    I am blue!

So, what is happening here? Well, we are trying to make the above

tag have a background-color of red and even though we wrote a valid selector that points to our

tag, it will still have a background of blue. Why? Because the #too-bad-youre-blue selector is selecting the same element using an ID selector, and ID selectors have a greater weight (or in CSS terms, a greater specificity). So, at the end of the day the ID selector is going to win.

What can you do to override the blue background? Each component of a selector impacts its specificity. The rule I learned was to give each ID in the selector a value of 100, each class a value of 10, and each tag a value of 1. For example:

/* This selector has a specificity of 111: (body = 1) + (#container = 100) + (.items = 10) = 111 */
body #container .items {
    font-weight: bold;
}

/* This selector has a specificity of 10: (.items = 10) = 10 */
.items {
    font-weight: normal;
}

In the above example, the first selector will make all text inside of the .items class bold, because the second selector has a smaller specificity. So, to make the

blue in the first example, we could use the following selector:

/* Notice that there is no space between the ID selector and class selector. This is how you select an
   element that has both an ID of too-bad-youre-blue and a class of i-want-you-red. */
#too-bad-youre-blue.i-want-you-red {
    background-color: red;
}

Here is a great article to learn more about specificity: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know

4. JavaScript Prototypes

JavaScript is a fully object-oriented language, but many developers coming from other object-oriented languages (such as Java) can have trouble adapting to JavaScript because it doesn't use classes. What JavaScript offers instead is prototype inheritance.

In JavaScript every object has a property known as a prototype. There is no cross-browser way to access this prototype, but you can access it in WebKit based browsers and Firefox by examining the __proto__ property. __proto__ will either be another object or null. Objects in __proto__ also have a __proto__ attribute. This defines a list of objects which is know as the prototype chain.

So what does the prototype actually do? If a method is called on an object that is undefined, then its prototype will be checked. If the prototype has the method, then it is called, otherwise the next prototype is checked and so on. This is also true for properties. This is easier to visualize in an example:

var baseObject  = {},
    superObject = {
        aMethod: function () {
            alert('Hello!');
        }
    };

baseObject.__proto__ = superObject; // Only use this in WebKit or Firefox.

baseObject.aMethod(); // This will popup an alert that says hello.

The only cross-browser way to set the prototype of an object is to use JavaScript's "constructor" mechanism:

// Define a simple function.
function MyFunction () {
}

// All functions are objects in JavaScript. Each function has a special property called prototype. When
// a function is used with the new operator, the object in its prototype property is placed into
// the __proto__ property of the new object. __proto__ will contain a reference to this object,
// so a change to the MyFunction.prototype property will effect all instances of MyFunction.
MyFunction.prototype = {
    aValue: 'Hello!'
};

// You will see this line in a lot of JavaScript code. This doesn't really do anything
// useful other than support some JavaScript programmers who like to test object types by using
// the constructor property: (obj.constructor === MyFunction). This is considered bad practice
// by many JavaScript programmers because the instanceof operator is a better way make this
// type of test. Still, why not just support everyone.
MyFunction.prototype.constructor = MyFunction;

// Use the new operator to create a new object using MyFunction as a constructor.
var instance = new MyFunction();

alert(instance.aValue); // This will output 'Hello!'

JavaScript's implementation of prototype based inheritance is often regarded as a major failure of the language's design, because it mixes in class inheritance syntax. Many JavaScript programmers use inheritance frameworks. Here is one from Google's Closure Library: http://closure-library.googlecode.com/svn/docs/closure_goog_base.js.html#goog.inherits

5. JavaScript Closures

In JavaScript you can define a function inside of another function, which causes some interesting scope issues:

// A basic example of a function that uses a variable defined in global scope.
var iAmAVariable = 'Storing a string';
function basicFunction() {
    console.log(iAmAVariable);
}

// A nested function example.
function nestedFunction() {
    var aLocalVariable = 'So local';

    var iAmTheNest = function () {
        console.log(aLocalVariable);
    }

    return iAmTheNest;
}

var testTheNest = nestedFunction();
testTheNest(); // This will output 'So local' on the log.

Notice how the iAmTheNest() function uses a local variable from the nestedFunction(). When iAmTheNest() was returned and stored in testTheNest and then executed, it was still able to access the aLocalVariable value even though nestedFunction() had already returned. This is because when a function is defined inside of another function in JavaScript, it is given a reference to all the local variables that existed in the outer function it was defined in. This reference is what is called a closure. So even though those local variables no longer live on the call stack, they do live inside of the closure that is being referenced by the nested function.

How is this useful? One use is with nested event handlers. Here is a jQuery example:

// This is common jQuery boilerplate, but it is an event that is fired once the DOM
// has finished loading. So, this fires a callback function.
$(document).ready(function () {
    var iLiveInThisFunction = 'Value';

    $('body').on('click', function (event) {
        // iLiveInThisFunction also lives in this handler's closure, so
        // it can be safely referenced when this handler is executed at a later
        // time.
        console.log(iLiveInThisFunction);
    });
});

That's it. Let me know if anything I said was horribly wrong or if you have any questions.

neilgoodman.net » Web