This means two things…

1. Keep your code contained
2. Place your code in one location

Lets see some examples. Note that I use YUI (Yahoo User Interface Library) to speed my development. However, the methods here will work with many libraries, or with no library at all.

Keep your code contained.

When you include your script into a page, you may do it via an external file or by placing your code inline in the page. If your not careful, your variables will be available to code in other places you did not mean for it to be, or you may overwrite a variables value that another developers code was used for somewhere else.

var current_value = "foo";
// do something with current value that should be foo....

//html code ... content... other stuff...

var current_value = "bar";
// do something with current value that should be bar

//html code ... content... other stuff...

// if we try to use the current_value down here, and expect it to be "foo" our code will break

How do we fix that leak? We can use an anonymous function to wrap the variables within, that way we don’t overwrite other peoples code later.

var current_value = "foo";
// do something with current value that should be foo....

//html code ... content... other stuff...

// wrap the code
(function(){
  // no when we set "current_value" it will not override the "current_value from above
  var current_value = "bar";
  // do something with current value that should be bar
})();

//html code ... content... other stuff...

// if we try to use the current_value down here, it should be the of value "foo"

This is important to understand when working with other peoples code, you’ll break something quick if you start merging code and leaving variables everywhere unwrapped.

Place your code in one location

Example, I need to build a function that lets me click a “Print” button and open a new window. I can create one object that will take an element and add all the functionality we need.

// this remains globally accessible
var AllMyStuff = {};

(function(){

  var Dom = YAHOO.util.Dom,
      Event = YAHOO.util.Event;

  var PrintPage = function(element)
  {
    this._print_element = element;
    this.init();
  };

  PrintPage.prototype = {

    _print_page_get_var: 'print_view=yes',
    _print_element: null,
    _window_name: 'PrintPage',
    _window_attributes: 'width=800,height=500,resizable=yes,scrollbars=yes,location=no',

    init: function()
    {
      // apply click event to the element
      Event.addListener(this._print_element, 'click', this.onPrintClick, null, this);
    },

    onPrintClick: function(event, args)
    {
      Event.preventDefault(event);
      var url = this.getUrlForNewWindow();
      window.open(url, this._window_name, this._window_attributes);
    }, 

    /**
     * Get the url. If there is a get variable in use, then append a new get variable after a & char
     * to indicate we want the print version. Otherwise, add the ? along with the get var.
     */
    getUrlForNewWindow: function()
    {
      var url = window.location;
      // do we have a search query (get variables)
      if(url.search.length) {
        url = url.pathname + url.search + '&' + this._print_page_get_var;
      } else {
        url = url.pathname + '?' + this._print_page_get_var;
      }
      return url;
    }

  }

// save our object in the global namespace so we can use it later
AllMyStuff.PrintPage = PrintPage;
})();

Notice how I’m using a global object to organize my code. This is one helpful habit that I ended up taking from YUI, they do this a lot and it’s helpful and keeps code organized.

The real reason for that though is that if I need to use that PrintPage object, I need to be able to do so later in the site. If I want to use this now, I just need to give the PrintPage object an element that will act as a button… for example…

< a href="printpage.html?thisPageTitle=something" id="printPageButton" > print < /a >

// given that link is on the page somewhere, I can do this to activate the print page button now...
var print_button_element = document.getElementById('printPageButton');
var print_button_object = new AllMyStuff.PrintPage( print_button_element );

If you go through the code above, you’ll notice that the object has an init function that will use that element, and automatically add any event functionality needed for that button to work.

Both are 16×16 pixel circles drawn with vectors, and snapped to a 1×1 pixel grid. You can hover over to see which was done in Illustrator and which in Photoshop, but first decide which one looks better-rounder, sharper, use whatever criteria you want.

IMHO, the Photoshop one is better. It’s not quite as crisp, but it seems rounder. The Illustrator one looks boxy and uneven.

Here’s a 1600% zoom in on both icons:

Illustrator, zoomed to 1600%

Photoshop, zoomed to 1600%

Note how Illustrator adds grey pixels to the left and top of the icon. It’s got to be a bug in the software. I had been considering using Illustrator for low-res icons, but based on that finding, I’ll stick with Photoshop.

You need PHP 5 to run Symfony. It is currently installed by default, but it’s only the default for the apache user. If you ssh into your server and try to run ’symfony cc’ or any other command, it bombs or errors out. This is because in the command line under your ssh user for some reason they default to PHP 4. (go ahead, ssh in and run ‘php -v’. you’ll see.)

I fixed this by doing the following…

1. edit your ~/.bash_profile and add the line ‘alias php=/usr/local/php5/bin/php’
That will make PHP 5 the default when typing ‘php -v’ or any other php command into the terminal.

2. change how you use the ./symfony command. If your like me, you just type ./symfony cc or whatever when typing. You need to type ‘php ./symfony cc’ instead, to make sure you use your alias to run symfony under PHP 5

References
http://wiki.dreamhost.com/Installing_PHP5#Using_DreamHost.27s_PHP_5

YUI does not have a function named getElementsByTagName, but the getElementsBy will do just that.

getElementsBy(method, tag, root, apply)

The method attribute is the important one here. The tag, and root are mainly there to offer optimization by reducing the possible scope of items the method is ran against.

If all you need is elements by a certain tag name, just pass in a function into the first argument that always returns true, and make sure to pass in a tag name for argument 2 that your looking for.

For example,
var forms = yDom.getElementsBy(function(el){return true;},'form'); should return an array of form elements that can be accessed further.

If you need a more specific filter (e.g. only ‘a‘ tags with class=’selected’) you could interact with the el item in the function. If you return true, the item will be added to the list. Otherwise return false and it won’t be in the array.

A good resource for more YUI Dom fun can be found at klauskomenda.com

If you’ve ever found yourself looking for that exact command on Google, one of these might be worth pinning to your workspace wall.

The Best Developer Cheat Sheets Around (from Webmasters by Design)

1. Don’t use the DELETE statement

Instead, use an UPDATE statement to mark a row to be deleted at a later time. Build your database so that the tables have a ‘deleted’ column. Then, run the DELETE at a later time on all rows marked to be deleted. Just use a small boolean value in the ‘deleted’ column, or you could even call it ’status’ and leave room for more status’s of a row by using an integer or small character value.

This can be big. Put simply, an UPDATE statement is cheeper than a DELETE statement because your DELETE statement will force the entire table to re-index the primary keys and the indexed.

2. Reduce IO’s by reducing SELECT calls

If you use UPDATES a certain way, and your database is also using UNIQUE fields correctly, you can reduce SELECT statements.

For example, if you have a table where you want to decide wether to INSERT or UPDATE, you might try running a SELECT to check for the data first. That will ALWAYS result in two calls.

<?php
// this code will always result in two calls !!
$count = functRunQuery("SELECT COUNT(*) FROM user_table WHERE username='john';");
if ($count > 0) // then run UPDATE
else // run INSERT
?>

Instead, run the UPDATE or INSERT first without using a SELECT call if you can…

<?php
// this code could result in one call
$affectedRowCount = functRunQuery("UPDATE user_table SET username='bob' WHERE username='john';");
if ($affectedRowCount > 0) // we're done, don't need to do anything
else // didn't find any rows so run the INSERT here
?>

OR, if your table would probably see more successful INSERTs than UPDATEs do it the other way around (PHP5 method here)…

<?php
// this code could result in one call
try {
// try inserting the user without checking possible unique conflicts...
functRunQuery("INSERT INTO user_table (a_unique_username) VALUES ('bob')");
} catch {
// catch the error here if 'bob' is already in the database, and run an UPDATE instead
}
?>

If scalability is a possible issue for your application, you should always be looking for ways to reduce database calls and cut down on re-indexing.

First, what is an abstract class? In not-so-technical terms, they seem to be just like a normal class. You define methods, variables, use a construct function, and can declare items as private or public.

abstract class FormBuilder {

	public $method;
	public $action;
	public $name;

	function __construct($name,$action,$method) {
		$this->name = $name;
		$this->action = $action;
		$this->method = $method;
	}
}

However, you cannot create instances of these class’s directly. You must create another non-abstract class and extend the abstract class.

class LoginForm extends FormBuilder {
	function printForm() {
		print '<form name="'.$this->name.'" method="'.$this->method.'" action="'.$this->action.'">';
		print '... form body ...';
		print "</form>";
		return true;
	}
}
$frontPageLoginForm = new LoginForm();
$frontPageLoginForm->printForm();

In this case you could move to creating a info request form, submit story form, or any kind you may need. Then create instances of those class’s as needed with methods and attributes custom taylored to the data that class handles.

So, why write the abstract class? In this case we could create a lot of form types, and build up the parent class to handle validation, creating form fields and storing variables that are relative to all forms (e.g. a unique id generator or timestamp.)

Then build up the classes that extend the abstract class to define less used and not-so-global features. In this case maybe username and password, along with a password encryption method may only make sense to a login form, not a request info form.

I think this starts to make a lot more sense as you start to use them more. At first, I thought ‘why not just build them into the main class?’ But as our team started extending those class’s more and more, it became obvious why we used that structure when we were able to tweak one validate method in the parent abstract class to fix a glitch in error handling was one file rather than multiple files.

Check out the PHP Manual for a much more technical view of PHP abstract classes.

PHP Include

<?php include(”header.inc”); ?>

ASP include

<!––#include file=”info_header.inc”––>

Include statements allow you to place part of your code into a separate document that can then be included on multiple pages of your website. The advantage is that you can include all you your details, logo, links, and so forth in one file. Then, if you need to update anything in that section, all of the pages including that file are automatically updated. You can also do the same for the footer.

Since these included files are simple text documents, they can have whatever extension you want, but commonly end in .inc. When read by a browser, the included file is read as part of the initial page. That is, the browser sees header.inc, index.php (or .asp), and footer.inc as one document.

The procedure is pretty straightforward, but here are some basic examples to get you started. The following examples are in PHP, but the ASP would work exactly the same with the appropriate include statement.

header.inc:

<html>

<head>
<title>Include Example</title>
</head>

<body>
<div id=”nav”">
<ul>
<li><a href=”books.php”>Favorite Books</a></li>
<li><a href=”movies.php”>Favorite Movies</a></li>
<li><a href=”other.php”>Other Favorites</a></li>
</ul>
</div>

index.php:

<?php include(”header.inc”); ?>

<div id=”content”>
<h1>Title</h1>
<p>Some content.</p>
</div>

<?php include(”footer.inc”); ?>

footer.inc:

<div id=”footer”>
Copyright info
</div>

</body>

</html>

It is likely an impossible task to make a decent website that is usable by everyone, but it is a noble effort to try. The major users we need to consider (in addition to those that we consider as “standard” users) include those using old browsers, screen readers, and text browsers, those with poor vision, those who are colorblind, users without Javascript, those using cell phones or other mobile device.

What needs to be done?

1. Design using web standards.

• If you do this, then you are already well on your way because you site should already degrade nicely in old browsers and be formatted pretty well for text browsers.

2. Don’t open links in new windows if you can help it.

• New windows are bad news for screen readers.
• The target attribute has been deprecated by the W3C and may not be supported by browsers in the future.

3. Avoid using Javascript for links (new windows and otherwise).

• Not all users have javascript-enabled browsers. Try to provide an alternate option for these users if the use of Javascript is unavoidable.

4. Use descriptive links

• Use descriptive wording that will not mislead users. Avoid the phrase “click here.”
• Make use of the title attribute to support or extend link description.
• If you are going to open a link in a new window, let the user know in some way.

5. Describe you images thoroughly for screen readers and text browsers

• Make sure that you describe the image in the alt attribute.
• Make sure any and all text conveyed in the image is described in the alt tag.
• Use the longdesc attribute for complex images such as graphs and charts.
• Added bonus: search engine crawlers look at alt tags, so good descriptions can help your optimization.

6. Consider the near-sighted

• Make sure your text is big enough to read for all.
• Use relative units for text so that the size can be increased.

7. Use contrasting colors for text and background

• One of the keys to accessibility is legibility. See my last article for more on this subject.

This tutorial really just covers the basics, the stuff that is easy and that everyone should do. This should get you started, but to truly understand the reaches of accessibility, check out these links:

About Accessibility

• What Is Web Accessibility? by Trenton Moss
• W3C WAI
• Section 508 homepage

Developing Accessible websites

• W3C’s WCAG Checklist
• Dive Into Accessibility

Validation

• Cynthia Says Accessibility Validation (basic)
• Bobby Quality, Accessibility, and Privacy Validation (advanced)

How To Set a Cookie

JavaScript has a built in object called the “cookie” object. You can access it simply with the following call.

alert(document.cookie)

Click Here to see what is in your browsers doument.cookie.

If you want to save something as a cookie, you have to URL encode it. This means you should use the same syntax that you see when people pass information in the address bar of a web address (the GET method, to be exact.) For example, www.chickenbeak.com?site=chickenbeak or www.chickenbeak.com?name=chris&site=chicken.

document.cookie = "site=chickenbeak"
document.cookie = "name=chris"

Click Here to set your browsers cookie like above.
Then Click Here to see what is in your browsers doument.cookie.

As you can see, the cookies are stored in the same format that you write them as, which is again URL encoded. You will want a JavaScript function that sifts through the document.cookie object and picks out the information you need. We will do this by splitting the long string saved in the document.cookie, and take the one bit of info we need.

What if we wanted to display a JavaScript message box to a visitor the first time they visit your homepage, but not every time they browse back to your homepage from a sub page of the site. We will set a cookie telling us that they have been there. Let’s start with a JavaScript function.

function getCookie(cookieName) {}

The way we want this function to work is to pass the function a cookie name, and it returns the cookie value. We will mainly be using the JavaScript “split” function, storing the separate values into an array, and for each spot in that array running the split again. See, this is the pattern of a long cookie.

“varName=varValue;varName=varValue;varName=varValue”

So, let’s do the first split.

cookieInfo = document.cookie
cookieInfo = cookieInfo.split(";")

This leaves us with an array “cookieInfo” which would contain values looking like “varName=varValue” for each cookie. We need to loop through this array one time and split it again.

cookieCount = cookieInfo.length
for(i = 0; i < cookieCount; i++) {
tempCookieInfo = cookieInfo[i].split("=")
//next we look at the [0] spot, which is the "varName"
//and look to see if it match's the "cookieName"
if(unescape(tempCookieInfo[0]) == cookieName
return tempCookieInfo[1]
}
}

Note the comment above in the code. That is where we get the actual value based on the name of the cookie. Notice the use of the “unescape” JavaScript function? Remember that the cookies are URL encoded, which means you’ll get the codes like %20 instead of a space. That unescape will help in keeping the information formatted best for your JavaScript comparisons.

Let’s put it all together

We have a function now that will pull a value out of the document.cookie object. We would use it something like this…

if(getCookie("mySiteVisited") == "yes") {
//do nothing
} else {
document.cookie = "mySiteVisited=yes"
alert("Welcome!")
}

And that would of course require our full function from above…

function getCookie(cookieName) {
if(document.cookie) {
cookieInfo = document.cookie
cookieInfo = cookieInfo.split(";")
cookieCount = cookieInfo.length
for(i = 0; i < cookieCount; i++) {
tempCookieInfo = cookieInfo[i].split("=")
if(unescape(tempCookieInfo[0]) == cookieName) {
return tempCookieInfo[1] } } }
else { return null }
}

Oh, don’t forget that big “if” block around most of the functions code. If the document.cookie object is not used by their browser, the function returns null. That way you can see if the viewer use’s cookies or not. That can be helpful because you can write code to react the lack of cookie support.

There you have it, set cookies, get cookies and a bit of use from the “split” JavaScript function.