Front-end style guide

This style guide covers the interaction of HTML and JavaScript.

The "front end" refers to what people see in their web browsers. We create that experience using HTML, CSS, and JavaScript. We tend to use the jQuery library, and we try to follow good conventions.

This document contains links to high-quality style suggestions from others, and also names some common problems that have occurred in the OpenHatch code in the past.

Strategies to avoid real-world problems

This is how the OpenHatch dynamic HTML avoids common problems.

Note that the OpenHatch code does not yet follow this guide. It ought to. Perhaps it can be a release goal in the future.

If it's not a link, don't make it a link

If there's no fallback for non-JS users, don't use the <A> tag.

http://openhatch.org/bugs/issue478 covered a problem where a user was clicking on what appeared to be a link. However,

Don't rely on "return false;"

It is easy to mistakenly use "return false;" at the end of a JavaScript callback when you really mean event.preventDefault(). You can read more about this problem.

Good references

This document by isobar looks great.