In most programming languages, for example C, pointers are symbolized with an asterisk. JavaScript relies on the developer to know which vars are references and which aren’t. Why is this important? To put it succinctly, it is the difference between a variable being immutable or dynamic.

An example may be in order. Here’s a simple script you can paste into Firebug to see how pointers work.

var marxBros = ['Chico', 'Harpo', 'Groucho']
var marxBrosPointer = marxBros;
marxBrosPointer.push('Zeppo');
console.log(marxBros); // ['Chico', 'Harpo', 'Groucho', 'Zeppo']
console.log(marxBrosPointer); // ['Chico', 'Harpo', 'Groucho', 'Zeppo']

As you can see, marxBros and marxBrosPointer are identical. Anything you do to marxBrosPointer will change marxBros and vice versa. You can think of them like aliases which both reference the same thing.

There is actually no difference now. marxBros is the original and marxBrosPointer is the pointer. But, for all intents and purposes, they are identical. One thing to note is that if you reassign one of them to something else, it does not affect the other.

var marxBros = ['Chico', 'Harpo', 'Groucho']
var marxBrosPointer = marxBros;
marxBros = null;
console.log(marxBrosPointer); //  ["Chico", "Harpo", "Groucho"]

Now let’s look at a case where we are not dealing with pointers. Let’s do the same thing as our first example, but instead of using an array, we’ll use strings. Yes, this makes a big difference.

var marxBros = 'Chico, Harpo, Groucho';
var marxBrosCopy = marxBros;
marxBrosCopy += ', Zeppo';
console.log(marxBros); // 'Chico, Harpo, Groucho'
console.log(marxBrosCopy); // 'Chico, Harpo, Groucho, Zeppo'

When using strings instead of arrays, we find that changes to one do not change the other. Whether you change the original or the copy, they are not linked in the same way arrays and objects are. In the first example, changing either the original or the pointer resulted in changes to both variables. In this case, because strings are immutable in JavaScript, the var keyword copies a string instead of referencing it.

The same is true of numbers:

var numberOfMarxBros = 3;
var numberOfMarxBrosCopy = numberOfMarxBros;
++numberOfMarxBrosCopy;
console.log(numberOfMarxBros); // 3
console.log(numberOfMarxBrosCopy); // 4

Compare this to properties and functions, which use pointers:

// First let's make a cleanHouse function which has an action property
var cleanHouse = function() {
 console.log(arguments.callee.action);
}
cleanHouse.action = 'Doing your dishes...';

// Let's test and make sure it works as expected.
cleanHouse(); // 'Doing your dishes'

// So far so good. Now let's make a pointer to this function.
var actionToTake = cleanHouse;
actionToTake(); // 'Doing your dishes...'

// Now actionToTake is identical to cleanHouse. Any changes to one affect the other.
cleanHouse.action = 'Vacauuming the rug...';
actionToTake(); // 'Vacauuming the rug...'

actionToTake.action = 'Watering the plants...';
cleanHouse(); // 'Watering the plants...';

Here’s an example where the reference is lost and it does not achieve the goal:

var cleanHouse = function() {
    console.log('Doing your dishes...');
}

var actionToTake = cleanHouse;

actionToTake(); // 'Doing your dishes...'

// Off to a good start, but here's where it goes wrong:

cleanHouse = function() {
    console.log('Vacauuming the rug...');
};

// Now the reference has been broken and actionToTake no longer refers to cleanHouse.
// Instead, actionToTake refers to, literally, the anonymous function that cleanHouse previously referred to.

actionToTake(); // 'Doing your dishes...'

// cleanHouse now refers to a new separate function.
cleanHouse(); // 'Vacuuming the rug...'

As you can see, it’s important to know how to use pointers. It will help you decide when you need a copy or something, or when you need a reference to it.

Feel free to post clarifications or other explanations. This topic is certainly important to becoming an advanced JavaScript developer, yet it is not addressed too often. I think we could all benefit from more clarity on the subject, myself included.

I hope this article has helped shine some light on this issue. Happy coding!

Here’s a walkthrough for what I did to get set up, starting from square one. This is literally everything I did and installed from when I was first able to access the desktop after a fresh install.

Web Browsers

1. Install Firefox. Seriously, do I even have to mention this?
2. Install Chrome. I use Chrome for using CMS’s since I feel it’s a bit faster than Firefox. Administrating Joomla sites, for instance.
3. Install Safari. Safari Win has a somewhat different set of rendering bugs than it’s neighbor on the Mac, but there is enough of an overlap that I use it to spot-check.
4. Install Opera. It isn’t that widely used but I like to check out my sites in it.

Development Tools and Useful Apps

1. Install SciTE with extensions. It’s a kick-ass text editor with code coloring for a support for a multitude of languages.
2. Install Aptana Studio. One of the best full-featured development environments around. Based on Eclipse so it can be a resource hog, and prone to some unusual behavior, but it’s still on a level beyond costly web dev IDEs like Dreamweaver.
3. Install XAMPP. This is a bundle that includes the Apache web server, MySQL database and support for PHP and Perl. It comes with lots of goodies like a web interface with quick links to all of the administrative areas, e.g. pre-installed phpMyAdmin for administrating the MySQL database. Note: make sure you install this to a folder without spaces, e.g. c:\xampp. For more information, read our article on setting up XAMPP.
4. Install TortoiseSVN.
5. Install 7-Zip.
6. Install DAMN NFO Viewer.
7. Install the MagicISO Virtual Drive.

Customizing Firefox

I like the clean up Firefox and streamline it a bit. Here are some of the things I do after a fresh install.

1. Delete the links in the bookmark toolbar (“Recent Headlines” and “Getting Started”) by right-clicking the bookmark and hitting ‘D’ on the keyboard. You can keep “Most Visited” if you like since it is actually useful.
2. Right-click on the navigation buttons and choose ‘Customize’ to streamline the icons. If you plan on using navigation icons, check the ‘Use small icons’ box so they are at least small. Remove the ‘Home’ link by dragging it away from the navbar.
3. Drag and the search box and the addressbar to the top area. Also, you can optionally drag the back/forward and stop/refresh buttons to the top, on the left of the addressbar. I personally remove the navigation in favor of keycommands. Instead of clicking back and forward buttons I just use the Alt+Left and Alt+Right keyboard shortcuts, respectively. I also remove the loading spinner on the top right of the page to save space. No need for a stop button when you can hit Esc, and why click the refresh button when you can hit CTRL+R? Obviously this is personal preference, but that’s how I roll!
4. Once you’re finished customizing it, hit ‘Done’ and then right-click on the navigation again and click on ‘Navigation Toolbar’ to hide it. We’ve just provided that much more screen real estate for what’s important, the web sites.

Firefox Extensions

1. Firebug
2. ColorZilla
3. MeasureIt
4. Web Developer
5. FireFTP
6. Delicious Bookmarks
7. ScribeFire
8. Flash Plugin
9. DivX Plugin

After installing the extensions and restarting, I add a few small icons to the top (on the left side of the addressbar). I add the icons for “Inspect Element” (Firebug), toggle the Web Developer Toolbar on and off, and tagging pages in Delicious.

Firefox Search Engines

You can install Firefox search engine plugins by visiting the MyCroft Project homepage. There are some nifty ones like Google Code Search. Also, you can install the MyCroft Project search plugin which actually searches available search plugins. How meta!

That’s it for now. I’m sure I left out a lot of great apps so I’ll have to write a follow-up. But, this is a pretty good start to getting up and running with a development environment.

The first thing to understand as an interviewer is the requirements of the job position and what competencies a candidate must possess to be a good fit. If the job is for back-end development, then experience working with databases, performance tuning, and writing scalable code is crucial, and only a cursory understanding of HTML and CSS is required. Alternately, for UI development work, it isn’t necessary to have a candidate who is wrapped up in the back-end code or has Big O notation at the tip of their tongue. There are certainly jacks-of-all-trades but when interviewing, it’s better to focus on a few crucial areas than try to set high standards for all areas across the board.

These are some of the areas you may want to explore, depending on the requirements of the position:

Software Development Skills

• Proficiency in at least one high-level programming language: C++, Java
• Basic understanding of object-oriented design & analysis: classes/inheritance, interface vs implementation, encapsulation
• Experience with source code version control: SVN, CVS, P4
• Algorithms: binary search, quicksort
• Data structures: array, hash, linked list
• Complexity/performance analysis: Big O notation, performance testing

Web Development Skills

• Candidate tests web-deployed code in big 3 browsers: IE6+, Firefox 2+, Safari 2+
• Candidate uses browser-specific debugging tools: IE Web Developer Toolbar, Script Debugger/Script Editor (IE), Firebug (Firefox), WebKit/Drosera (Safari)
• Extensive knowledge of at least one JS framework: jQuery, Prototype, MooTools, YUI
• Experience creating dynamic, database-driven websites: PHP/JSP/ASP, MySQL etc
• Candidate uses Selenium for front-end automated testing
• Proficient in Fireworks or other image editing software, and knowledgeable about how to best export images for the web (CSS sprites, GIF/JPG/PNG, etc)
• Follows front-end best practices like CSS-based layouts and unobtrusive JavaScript
• Experience developing rich user interfaces (drag-and-drop, Ajax, web applications/RIAs, animation effects)

General and Miscellaneous Skills

• Familiarity with agile development methodology: scrum, burndown charts
• Proficiency at Search Engine Optimization (SEO), Search Engine Marketing (SEM), and related fields
• Knowledgeable about security vulnerabilities in code. Experience with threat analysis software (e.g. Fortify for Java)
• Familiarity with automated unit/integration tests: JUnit (Java), Selenium (front end)
• DBA-related skills such as database optimization
• Usability skills and knowledge of user behavior
• Project management skills

You can choose from these or other criteria to create a baseline for what makes an ideal candidate, ignoring the skills which aren’t relevant. Once you’ve determined the skills necessary for the position, you may find that a Ph.D. is less qualified than someone without a college degree, depending on the skills required. So, never make assumptions about candidates simply based on their credentials or previous work experience. Developers can take drastically different amounts of time to complete tasks based on their prior experience and their ability to learn new things quickly.

Criteria for Various Job Positions

Let’s look at a few example job positions and apply criteria from the list above.

Quality Assurance Engineer

An ideal QA engineer for a website will be an expert at creating automated test suites for front and back end, and should also be aware of security issues. So you could focus the interview on how they choose to write test suites, and come up with sample test suites for real-life objects (e.g. an elevator). Then you could ask them to list some of the common security threats (e.g. XSS, XSRF) and how to mitigate them.

Of course, if you already have a security engineer at your company, then you may not require your QA to wear another hat. But for most small- to medium-sized businesses, it’s most efficient and cost effective for your developers to wear many hats. In fact, you may have a software developer who also does QA on the site, or a QA engineer who does project management. It all depends on the size of your company and the particular restraints in budget for your development team.

Software Developer / Programmer

Let me say right off the bat that I’ve never conducted a software development interview. But, I have been through a few, and I have an idea of what types of questions I would ask depending on the position.

There are some general software development skills that I would consider, such as experience with SVN (or other source control), automated testing, knowledge of data structures and algorithms, and perhaps object oriented design and analysis.

If the candidate is a Java developer, then you can ask about things like exception handling, reflection, familiarity with libraries (Swing, Struts, JSF etc), or other Java-specific questions. If they are a C++ developer then you should drill down into memory management, constructors/destructors, and other tropes of C++. It’s up to you as the interviewer to determine the right questions to ask based on the job requirements, or to find someone else to conduct the interview if you can’t. I know I would have a hard time conducting an interview with a C++ developer, unless I had a “cheatsheet” with all the correct answers to the questions.

Web Developer

For a web development position, the focus will be less on knowledge of traditional computer science and more on the candidate’s knowledge of current best practices. Since best practices are always changing, the ideal web developer is enthusiastic and passionate about their field, and stays up to date by reading/contributing to blogs, belonging to email lists or other online communities and generally keeping “in the know” about the best way to solve problems.

Unlike traditional computer programming, in which code is executed in a controlled environment and changes to the language take years to complete, web development is a fast-paced field where changes happen all the time and code is executed in a wide range of environments, each with its own caveats and bugs. So, the ideal web developer is familiar with the issues surrounding development on each platform and environment, especially the Big 3 browsers (IE, Firefox and Safari).

Interview Coding Challenges

A great way to test a developer is to actually have them write some code for you. As they say, “the proof is in the pudding,” and even a developer who successfully answers your questions may not be able to complete the test put forth. The test can be verbal (if conducting the interview by phone), on a whiteboard (if in person) or you can give the candidate a time limit and have them email you the code. The choice is yours, just make sure that you choose one modality for all candidates. It isn’t fair comparing one candidate’s typed code to what another said on the phone, or drew on a whiteboard. Also remember that generally typed code will be higher quality than that spoken over the phone or written on a whiteboard.

I’ve posted a few JavaScript challenges on this blog that would make good interview questions for a JS developer. You could also adapt some of these to other languages such as C++, PHP or Java:

• Reverse a Linked List
• Dispense Change
• Cardinal Numbers

Other challenges include reversing a string, reversing the words in a string, finding words that occur in both files, converting a clock from digital time to degrees (e.g. for an analog clock’s hands), or generally any other relatively simple test you can come up with.

Layouts and HTML/CSS

For candidates doing CSS, just send them a mock-up and give them a reasonable amount of time to complete the HTML/CSS for it. You could optionally send a PSD or layered PNG, but more commonly people just send flat images. Really, the test shouldn’t be much — maybe the wireframe for a site, or a navbar, menu or UI component. You can also give them some challenge questions about explaining various CSS properties and how to use them. Challenges I’ve had in the past are:

• Make a banner and horizontal navbar that matches the dimensions of a wireframe
• Make a 3-column site with a fluid-width center column
• Create a vertical drop-down menu or horizontal flyout menu (bonus points for a cross-browser CSS-only solution, though JavaScript solutions are accepted)
• Explain the difference between absolute and relative positioning, and what happens when you put one type of element inside another
• Explain the difference in block and inline display
• Explain what effect float has on elements. Does float change elements’ display property, and if so, does it make it block or inline? (Answer: block)
• Explain what effect z-index has on elements and the natural z-index order.
• Explain CSS specificity.

On this last point, CSS specificity, I find it’s fun to show a list of CSS rules and ask which rule wins out. If you know the trick how rules are calculated, it’s easy to tell:

<!-- Sample HTML code -->
<p class="description" id="main">
  Some text.
  <span class="special">
      Some more text.
  </span>
</p>

/* Challenge:
 * What color is the "special" text? */

body .description span {
   color: blue;
}

p.description {
   color: red;
}

body .description .special {
   color: pink;
}

#main .special {
   color: orange;
}

#main span {
   color: green;
}

For those of you unfamiliar with how CSS specificity is calculated by browsers, it is a point-based system where the selector with the highest point value wins. The three main things selectors consist of are elements, classes and ids. These are worth 1 point, 10 points and 100 points respectively. Given this knowledge, do you know which rule wins out in the above example?

By calculating the point values of the rules, you see that the rule #main .special is worth 110 points and is the winner, hence the color of the “special” text is orange.

Hiring People who Write Good Code

Besides “just working”, the criteria for what makes good code differs from person to person, but in general, you’ll want to look for readability, useful comments, simplicity, accuracy, good formatting and code that doesn’t repeat itself. So, even if two candidates submit working solutions to a problem, you can still determine which is the better candidate by analyzing the code itself with these criteria in mind.

In addition to this, you may consider their talent, as opposed to their current skill in any one area. If the candidate is highly talented and passionate about the position, then they will most likely be able to learn any particular skills required for the position, within reason. Of course, talented individuals should demonstrate expertise in a number of domains already, which will give you an idea of their potential for growth in job-specific areas. You may also consider their participation in online forums, discussion groups and blogs (like this one, wink wink) related to their job field. Active participation in online communities demonstrates dedication and passion for those particular fields of interest.

I hope this article has been informative for interviewers and perhaps interviewees as well. Feel free to post your favorite (or least favorite) interview questions.

2. Go to the page you are interested in inspecting and click on the bookmark in your browser called “Inspect JS”. That will load breakable.js into the head of the page you are currently using.

3. In firebug go into the scripts tab and view breakable.js.

4. Set a break point on line 7 where it says funct();

5. Find out what the ID is of the element that has the event listener.

6. Click the console tab in firebug. Type in: breakOn(“elementID”, “eventTrigger”);
Example: breakOn(“prettyImageOver”, “onmouseover”); Example 2: breakOn(“ajaxImageChanger”,”onclick”);

7. (1)Initialize the event by mousing over it or whatever you you chose as the event trigger. If the original js author chose a mouse over event then you should also use a mouse over event. Because if you choose an onclick for an onmouseover event then by the time you click it the event has already passed you by..

8. (2)Firebug will transfer over to the breakable.js in the scripts tab at the breakpoint funct(). Step into it by (3)clicking the arrow right in firebug script section.

9. and you will enter into the javascript code of whatever function is called by the event.

I love this! Big thanks to my friend Grady Morgan for writing this short script!

MooTools makes working with cookies quite easy. Based on functions from Paul Peter Koch’s QuirksMode, the MooTools API for handling cookies is intuitive and easy to remember.

For storing simple bits of information on the browser, the Cookie methods read(), write() and dispose() are adequate. As their names imply, these read, write and delete cookies from the browser, respectively.

But, if you want to do something more complex, such as save a JSON string each time a method is called on the cookie, then Hash.Cookie is for you.

What’s the difference between the Hash.Cookie methods and the standard methods you say? For one, Hash.Cookie is its own module, so make sure the version of MooTools you’re using has it included. Besides that, Hash.Cookie gives you all the functionality of the Hash class, including getters/setters, each(), some(), filter(), has(), keyOf() and more. For the full documentation on all Hash methods available, view the Hash docs here.

Here’s an example that uses the Hash.Cookie class to store how many times a user has visited the page. Note that this uses Firebug so if you don’t have it enabled, you’ll need to override console.log().

window.addEvent('domready', function() {
    var cookie = new Hash.Cookie('test-cookie');

    var numberOfVisits = $defined(cookie.get('numberOfVisits')) ?
                         cookie.get('numberOfVisits') :
                         0;

    cookie.set('numberOfVisits', numberOfVisits + 1);

    console.log('You have visited the page ' +
                 cookie.get('numberOfVisits') +
                 ' times.');
});

On line 1, we start by declaring everything to occur when the DOM is ready.
For MooTools developers, this should be a familiar practice. Although we aren’t
manipulating the DOM in this example, I’ve left it in, as Firebug threw an error
when I tried to console.log() before the DOM was ready.

On line 2, we instantiate a new cookie named ‘test-cookie’ without any options. Interestingly, this also has the effect of loading the cookie if it already exists. This means that the first time the user visits the page, it will write a cookie, but on all subsequent visits it will read a cookie. The end result is the same: we have a reference to the cookie as a hash object, and can use the methods that the Hash class provides.

Next, on lines 4-6, we use a ternary operator to check if ‘numberOfVisits’ has already been written to the cookie. If so, we read it from the cookie. If not, it is initialized to 0.

On line 8, we increment ‘numberOfVisits’ using the set() method. Finally, we log the number of visits using Firebug’s console.log().

Getters, Setters and Auto-Saving Cookies

Getters and setters should be familiar to anyone versed in Java but I imagine some JavaScript developers may be unfamiliar with them. Essentially, get() and set() methods are provided for you to use instead of directly accessing the data. For instance, cookie.hash.numberOfVisits and cookie.get(‘numberOfVisits’) both return the same data, but the former directly accesses the data while the latter uses a wrapper method.

There are numerous reasons to use getters/setters instead of directly accessing the data, but one practical example is the use of Hash.Cookie’s autoSave functionality. There is an autoSave flag in the options which, if enabled, will save the data after each operation on the hash. It defaults to ‘true’ which is why I didn’t have to write() the cookie in the above example.

Since I didn’t define a duration in the options object when instantiating the cookie (nor did I even include an options object, for that matter), it will only live for the duration of the browser. In other words, it’s a session cookie: When the user exits the browser and restarts, the cookie will be destroyed. For the cookie to live beyond the lifespan of the browser, you can specify the duration of the cookie to live (in days).

The other options which I omitted were domain, path and secure. None of those were important for my example but for some applications, setting domain- and path-specific cookies and ensuring they are only accessed over HTTPS may be necessary

This example is somewhat simple but I hope it has provided an introduction to using MooTools’ excellent Hash.Cookie API. Good luck and enjoy a tall glass of soymilk with your Hash Cookies!

In this article I will explore the use of the JavaScript date object and its methods. We won’t be using any JavaScript libraries because the existing API is quite adequate, and most libraries don’t really offer much in the way of extensions anyway.

Let’s start with displaying the current time. You can do this by using the Date() constructor and calling the toString() method on it. If you have Firebug, open up the console and type this code:

var date = new Date();
date.toString();

You’ll see that date.toString() evaluates to a string containing the current time in Greenwich Meridian Time (GMT). In my case, it is “Tue May 06 2008 16:06:39 GMT-0700 (Pacific Daylight Time).”

There are a number of other to methods available as well. You can paste these into the Firebug console to see what they evaluate to. I’ve put my example as a comment after each one:

• date.toDateString(); // “Tue May 06 2008″
• date.toGMTString(); // “Tue, 06 May 2008 23:06:39 GMT”
• date.toLocaleDateString(); // “Tuesday, May 06, 2008″
• date.toLocaleString(); // “Tuesday, May 06, 2008 4:06:39 PM”
• date.toLocaleTimeString(); // “4:06:39 PM”
  

Practical Applications of the JavaScript Date Object

One of the most obvious applications of the date object is to display the current time, should you desire to do so. Oftentimes news websites will contain the day’s date, and sometimes they have a clock as well. For example, see the BBC’s homepage which displays the day’s date and an analog-style clock done in Flash:

The BBC follows the format “Tuesday 6 May 2008″ for example. Let’s construct that using JavaScript:

function getFormattedDate(date) {
    var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    var day = days[date.getDay()];

    var months = ["January", "February", "March", "April", "May", "June",
                  "July", "August", "September", "November", "December"];
    var month = months[date.getMonth()];

    // Returns a string formatted like "Tuesday 6 May 2008"
    return day + " " +
           date.getDate() + " " +
           month + " " +
           date.getFullYear();
}

getFormattedDate(new Date());

You could also accomplish this with some RegEx hackery but I think this is cleaner, albeit a bit more verbose. The benefit of doing this with RegEx is that you can use one of the existing toString() methods, such as toLocaleString(), and then parse the data you need from there.

Actually, given that the data is delimited by commas, you could accomplish this simply by splitting the returned string without the use of RegEx. Doing it that way would avoid the need to tediously specify the names of all the days and the months.

Creating a Countdown Timer in JavaScript

Another use case for the JavaScript date object is to count down the time remaining until a certain date. This could be the launch of a new website or product, the cut-off time for a submission, or anything else that requires notification of the time remaining until a specific date and time.

On a website I previously worked on, Endless.com, there is a countdown timer in the banner that notifies the customer how long they have to order to get next day shipping. This is a fun idea because it adds a little pressure for the customer to make an impulse buy as the cutoff time comes closer. I’ve seen similar uses on other e-commerce sites and it adds a nice touch, for those sites which offer next-day shipping.

To do something like this, I imagine you’d need two functions, one to update the HTML with the correct date string (given a date object as input), and another, possibly anonymous function that is declared with a setInterval, which decrements the current time and calls the update function. Without writing the implementation details, I imagine it would look something like this:

function updateTimeRemaining(date) {
    // implementation details for parsing data from date object
    // and updating the DOM
}

window.onload = function() {
    var interval = setInterval(function() {
        updateTimeRemaining(new Date());
    }, 1000);
};

The updateTimeRemaining() function would need to be written to output the time remaining given a date object. I feel that there may be a better way to do this than creating a new Date() instance every second, however. Could we not use the same date object but decrement its time manually every second? In any case, this isn’t a full-fledged solution at this point, just an outline of one possible solution.

What are your favorite uses of the JavaScript date object? Do you have other use cases that I’ve left out here? Please leave them in the comments and I may even devote a whole article to them. There is quite a bit you can do with date and time and I’m always on the lookout for new uses. Hopefully these short examples will get you thinking about how you can use the JavaScript date object on your site. ]]> http://www.thetruetribe.com/2008/05/javascript-date-object/feed/ 0 http://www.thetruetribe.com/2008/05/downloading-the-full-mootools-library/ http://www.thetruetribe.com/2008/05/downloading-the-full-mootools-library/#comments Tue, 06 May 2008 04:20:00 +0000 admin http://wordpress.thetruetribe.com/?p=21

One of my minor frustrations on the MooTools download page has always been having to manually select each component to add. While it is nice that you can keep the filesize down by omitting components that you don’t need, I wish they had a way to select all components at once.

Well, it turns out they do. I just found out that Mootools actually allows you to select all components by calling the Download.all() method. You can do this by opening the Firebug console while you’re on the MooTools download page and entering Download.all() and clicking Run. Alternately, if you don’t have Firebug, you can enter javascript:Download.all() into the addressbar and press enter. This will select all components on the page.

Despite the name, Blogger isn’t just limited to blogs. It actually makes for a nifty Content Management System (CMS) for a wide range of sites, including e-commerce, informational and educational sites.

I’ve found it to be an easy and inexpensive (well, free) solution for simple content management, albeit a comparatively inflexible one. You won’t get the rich plugin library of blogging platforms like WordPress or CMS’s like Joomla, Pligg or Drupal. But you will get the benefit of having a very fast setup time. I estimate once you get good at it, it only takes 15 minutes to be up and running with Blogger (not counting time developing the template of course).

If you already have an existing site layout, adding in Blogger functionality is a snap. Blogger uses special markup that is compartmentalized and easily pasted into an existing HTML layout.

Also, when deploying to your own web server, Blogger plays nice with with PHP. I’m not sure about other web languages such as ASP or Perl/Mason, but I imagine as long as it’s an interpreted language, it should be fine.

Blogger is completely transparent to use. In other words, your users will have no idea you’re using Blogger. One caveat: If you enable comments on your posts then it will be revealed when a user clicks to add a comment.

Setting up a Blog

You have three options for hosting the blog. You can get free hosting and a sub-domain at blogspot.com, for instance, thetruetribe.blogspot.com. Or, you can register your own domain name with Blogger for a small fee (e.g. thetruetribe.com). Or, if you already have hosting and a domain name with another provider, you can publish to that domain from Blogger.

By far, most people have a sub-domain at blogspot.com. But, except for personal blogs, this isn’t really appropriate most of the time. Although I do see e-commerce sites have blogs at blogspot.com addresses, this is somewhat of a faux pas in my opinion.

One reason not to have your blog on a separate domain is that it divides resources. If you have both yoursite.com and yoursite.blogspot.com, the SEO will be twice as difficult as keyword relevance and backlinks will be split between the two web properties. From an SEO standpoint (and probably from a user’s standpoint as well), it’s ideal to have the blog or news page be on the same domain as the main site. You could also publish the blog to a sub-domain of the site, for instance blog.yourdomain.com, without ill effect.

My recommendation is to go for one of the other two options unless it’s a personal site, as you will want to have a custom domain in order to rank well for SEO and also for users to be able to easily recall the domain and access it.

The second option, registering the domain through Blogger and having them host it, has the benefit that you get free hosting and can use their powerful XML templates. The XML templates were released in 2007 and seem to have been complete rewrite of their templating engine. You don’t get this functionality when publishing to your own FTP site, so this is the best option if you want to fully utilize what Blogger has to offer. Blogger’s XML templates allow easy drag-and-drop rearranging of widgets on the page, as well as a variety of built in widgets including RSS feed aggregators, image galleries and so on.

The third option, publishing to your own FTP site, is appropriate if you already have a domain name and hosting or if you wish to utilize the flexibility having your own hosting can give you. But, take note that you will be limited to only using “Blogger 1.0″ templates, without any of the new XML features or widgets. Still, this is usually sufficient for simple content management.

Publishing Via FTP from Blogger

Here’s a walkthrough to getting set up with Blogger on your own FTP server.

1. Go to www.blogger.com and click “Create blog now”
2. Don’t bother filling out any of the information just yet. Instead, click on “Advanced Blog Setup”
   
3. On the following page you can enter account details for your FTP server. You can choose what path and filename to publish to, as well as whether to publish using FTP or SFTP. You can choose to publish to a .html file (e.g. index.html) or a .php file if your hosting supports it.

That’s it! Assuming all the details have been entered correctly, Blogger should be set up to publish files to your FTP server now. It will publish the main page at the URL you specified, as well as archive pages and individual “permalink” pages for posts.

Customizing the Blogger Template

After setting up the FTP details, The following page presents readymade templates for Blogger. I’ll assume you already have a layout you’d like to use. If not, then now would be a good time to make one.

Since we don’t need to use the template for any layout, CSS or HTML other than the Blogger-specific code, it doesn’t matter a great deal which template you choose. But for now, just choose Minima, so we’re working with the same code base.

Select Minima, continue, and publish a post (the obligatory “Hello, world!” of your new blog). The click on the Template tab to get down to business, cut-and-paste style.

The next step is to open up your layout file in the editor of your choice (I prefer SciTE and Aptana personally) and get ready to cut-and-paste.

The first tags to grab are <$BlogPageTitle$> and <$BlogMetaData$>, which output the title of your blog and hook up the RSS feeds, respectively. The <$BlogPageTitle$> tag can be outputted as the page title (i.e. in <title></title> tags) as well as the header, in an <h1>.

The resulting code should look like this:

<head>
<title><$BlogPageTitle$></title>
<$BlogMetaData$>
</head>

The <$BlogMetaData$> tag outputs a lot of good stuff including all flavors of RSS feeds (RSS 2.0, RSD, Atom).

Next, grab everything between and including the <Blogger></Blogger> tags. You’ll want to paste this into the main wrapper of you site, where you want the dynamic content to be. This is typically something like <div id=”main-content”>. It’s a lot of code to paste, and the indentation may be a bit off, but if you’ve correctly copied it, it should work fine.

As for styling, you can inspect the resulting HTML using Firebug and see the pre-defined classes. Or you can always add classes yourself to the Blogger code. Just make sure not to add any ids since the code will be repeated once for each post.

The Sidebar: Recent Posts, Archives, Profile

You may want to include archived posts, recent posts or your Blogger profile. It’s quite simple, really. Scrolling down towards the bottom of the Minima HTML/Blogger tag source, you’ll find an area marked with the comment “Begin #sidebar.” Here is where we’ll find the tags:

<$BlogMemberProfile$>

This one outputs your Blogger profile pic and description. Nothing too useful but I guess it’s nice for a blog site.

<ul id=”recently”>
<BloggerPreviousItems>
<li><a href=”<$BlogItemPermalinkURL$>”><$BlogPreviousItemTitle$></a></li>
</BloggerPreviousItems>
</ul>

This code outputs the recent posts, with links to their individual permalink pages.

<ul class=”archive-list”>
<BloggerArchives>
<li><a href=”<$BlogArchiveURL$>”><$BlogArchiveName$></a></li>
</BloggerArchives>

</ul>

This code links to the archive pages.

Hopefully this post has proven helpful and will give you the confidence to publish your own Blogger-powered dynamically driven sites! It’s nothing fancy, but it gets the job done and is a breeze to set up. Post comments with any other tweaks you’ve found or issues you run into. Blogger certainly has its shortcomings but for the price (i.e. free), I’m not complaining, and it does a lot of things right too.

Have fun and happy bloggin’!

I use Firebug’s console.log() method extensively when developing code. But, when viewing the site in Internet Explorer, Safari, Opera or other browsers that don’t have Firebug, console.log() throws an error. Rather than wrap each log statement in a try/catch, I just add this bit of code during development that checks for Firebug and redefines the console.log() method if Firebug isn’t installed:

 // When logging messages with console.log()
 // if user doesn't have Firebug, write them to the DOM instead
 if (typeof console == "undefined") {

  // Create an unordered list to display log messages
  var logsOutput = document.createElement('ul');
  document.getElementsByTagName('body')[0].appendChild(logsOutput);

  // Define console.log() function
  console = {
   log: function(msg) {
    logsOutput.innerHTML += '<li>' + msg + '</li>';
   }
  };
 }

Logging Statements in Production Code

If you don’t want to have to remove your console.log() statements in production code, you can set a “development mode” flag that ignores log messages.

var DEVELOPMENT_MODE = true;

// When logging messages with console.log()
// if user doesn't have Firebug, write them to the DOM instead
if (typeof console == "undefined" && DEVELOPMENT_MODE == true) {

  // Create an unordered list to display log messages
  var logsOutput = document.createElement('ul');
  document.getElementsByTagName('body')[0].appendChild(logsOutput);

  // Define console.log() function
  console = {
    log: function(msg) {
      logsOutput.innerHTML += '<li>' + msg + '</li>';
    }
  };
} else if (DEVELOPMENT_MODE == false) {
  console = {
    log: function() {} // Do nothing
  };
}

I made the flag uppercase since it follows naming
conventions for constants. Now you can set the DEVELOPMENT_MODE flag when deploying to production environments and leave your logging messages intact, if you desire.

Take note that this adds unnecessary page-weight from the logging messages, so to fully optimize the code, logging should be removed. But, leaving some amount of logging in the production code is probably acceptable, as long as it doesn’t add more than a few kilobytes to the page weight. As long as you’re using GZip, minifying your JavaScript and serving it with far future expires headers, a few extra k aren’t going to hurt anything.

Redefining All Firebug Methods

If you use other Firebug methods, such as assert(), trace() or error(), then you may want to use the following code, provided by the developers of Firebug as part of the Firebug Lite project.

This code redefines all Firebug methods as empty functions when Firebug isn’t installed on the browser:

if (!window.console || !console.firebug) {
  var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",
  "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];

  window.console = {};
  for (var i = 0; i < names.length; ++i)
    window.console[names[i]] = function() {}
}

Getting Started

First, make sure you’re running Firefox. If you aren’t, get Firefox now. You won’t be disappointed. Next, install Firebug by following the link and clicking “Install Now.” After installing, restart Firefox and continue.

Now you can click the small icon in the bottom right corner of the Firefox window to open Firebug. Go ahead and open it– the first time running, you may have to choose to enable it for sites on the world wide web.

Using the Console

The first tab that’s open in Firebug is the console. The console tab shows JavaScript error messages, as well as having a command line interface (CLI) where you can enter JavaScript and execute it in real time.

Using the CLI, you can call functions, define variables, or even write new functions.

The JavaScript error messages are are also helpful for debugging since they show you which line the error occurred on, as well as a stack trace.

Another interesting feature is the ability to log messages to the console by using the method console.log(). Note that this will throw an error in browsers which don’t have Firebug installed, so it’s just for development purposes.

Logging messages can be very useful when debugging complex JavaScript applications that have a lot of moving parts. It can also be used for page profiling. Here’s an example of how you might use logging to the console to add some rudimentary speed profiling of a JavaScript function:

function doStuff() {
var startTime = new Date().getTime(); // The current time in epoch milliseconds

// Add code here to be profiled

var endTime = new Date().getTime() - startTime;
console.log("The function doStuff() took " + endTime + " milliseconds to complete.");
}

This would result in a message being logged to the console with the amount of milliseconds it took for that code to execute. Nothing fancy, but it gets the job done!

DOM Inspection

Clicking the next tab over in Firebug, to HTML, you’ll find a two-paned window that allows you to browse the DOM on the left and edit CSS on the right.

Start opening HTML tags and mousing over them. You’ll notice that the HTML element on the screen lights up when you hover over the tag. It’s a nice feature that lets you quickly orient yourself in the code.

The highlighted area also shows how much space an element is taking up on the screen. The color blue denotes the element’s height and width, while yellow is margin and purple is padding.

Clicking the Inspect button (next to the bug icon in the top left corner of Firebug) will toggle a mode where you can click on HTML elements on the screen and it will go to that tag in the code.

There’s another tab for DOM inspection, the aptly-named DOM tab. Here you will find all of the DOM objects created by JavaScript, such as variables and functions, as well as the core DOM API (for example, the window and document objects can be inspected here).

I check this page when I want to view the current state of the page and watch it change as JavaScript executes. For example, say I have a variable that keeps track of how many items are in a shopping cart. I could watch this variable in the DOM tab to make sure that it’s incremented when I add an item to the cart.

Editing CSS on the Fly

Going back to the HTML tab, notice that the pane on the right shows CSS styles for whichever element is currently selected. You can choose an element in the left pane (or by clicking Inspect and then clicking the element), and the CSS styles for that element will be displayed. Furthermore, you can edit the properties and even add new ones.

Firebug has a different take on CSS editing than some other debugging programs, namely the Microsoft Web Developer Toolbar, so I’ll clarify how it works: In Firebug, when you change a CSS style, it updates it for every element on the page. Conversely, in Microsoft Web Developer Toolbar, changing CSS styles only affects the currently selected element.

By way of example, say you have the CSS rule p {padding: 10px;}. You then select a P tag and change it to padding: 20px; using Firebug. The result is that every P tag will now have 20px padding, unlike other programs where it would only affect the styles of the selected tag.

To add a new style, simply click twice in the whitespace inside of a style block, next to the existing declarations. Firebug even has a convenient auto-complete feature for writing CSS.

In the right page, there are three tabs: Style, Layout and DOM. So far, we’ve been editing CSS in the Style tab, but make sure to check out the other two as well. The Layout tab offers an alternate view of the box model for the selected element, along with pixel-precise measurements of its dimensions. The DOM tab shows all properties and methods for that element.

Page Profiling and Network Metrics

Nothing’s worse than making a great site only to have it suffer from poor front end performance. (OK, well, a lot of things are worse — but it’s still frustrating!). The Firebug Net profiler can help get to the source of that slowness.

Although it is far from robust, the Net tab offers semi-reliable metrics on the download speed of all assets including the HTML document, CSS, JavaScript, images and any other linked files.

You can see which files are being downloaded concurrently and which are blocking (hint: it’s the JavaScript), and how many connections are being opened with a given domain.

For more extensive page profiling, be sure to check out YSlow!, a plugin for Firebug (I guess that makes it an extension-of-an-extension) developed by Yahoo.