Pre-coding tips

  1. Know your enemy: browser types
  2. Choose the modern DOCTYPE
  3. Resources
    1. Manuals and how to search in them
    2. Incompatibilities
    3. The ECMAScript specification
    4. HTML5
  4. More?

There are currently several main JavaScript/html engines available.

A regular web-site should look equally good in all of them.

Know your enemy: browser types

  • Firefox and other less known browsers which use an open-source engine called Gecko.
  • Safari/Chrome which both use an open-source rendering engine called Webkit, but different JavaScript implementations. Chrome uses Google V8 and Safari uses it’s own closed-source JavaScript engine. Because they both use Webkit, there’s a lot in common between them.
  • Opera uses it’s closed source engine called Presto.
  • Internet Explorer uses the closed-source engine called Trident. The engine is old and terrifying in IE6, IE7, but upgraded in IE8 and upgraded to much better standards compliance in IE9.

The terms Gecko, V8, Webkit are widely used in professional talks. Trident, Presto are less used.

Sometimes, the cross-browser development becomes complicated, so browsers are graded according to the level of support from A to C.

A. Latest Firefox, IE, Safari/Chrome
Supported ideally.
B. Opera, less recent major browsers
Supported well enough, but minor drawbacks in look and feel are possible.
C. Old major browsers
Only the core functionality of the site is supported.
D. Very old. Text browsers.
Not supported. If it works, it works. If it doesn’t, no one cares.

The grading above is an example from real life.

Choose the modern DOCTYPE

As you probably already know from HTML, there are two main rendering modes: Standards Mode and Quirks mode. Actually, there is a third mode called Almost Standards Mode, all of them described well in Wikipedia quirks mode page.

Browser chooses the mode according to DOCTYPE header of HTML.

For modern sites there is a good DOCTYPE:

*!*<!DOCTYPE HTML>*/!*

This DOCTYPE make modern browsers render in Standards Mode and older ones in Almost Standards Mode (which is the maximum they can do).

Note, that the modern rendering mode is not just an HTML issue. There are JavaScript properties which also depend on the rendering mode, especially CSS-box and positioning-related.

Also, styles can be applied differently, for example Internet Explorer 7+ in standards-compliant mode (strict !DOCTYPE), can apply the :hover pseudo-class to any element (as it should), while in a non-strict mode it can only apply :hover to links.

Not using correct DOCTYPE will cost you time debugging. <!DOCTYPE HTML> is ok.

Resources

Manuals and how to search in them

There are 2 main manuals on the net about JavaScript. One comes from Microsoft and called MSDN. They also call JavaScript a “JScript”.

Another one is documentation center of Mozilla Developer Network.

I use the following method of search. When I need to find “RegExp” in Mozilla documentation, I just type ”RegExp MDC” in google.

When I want to check MSDN, then “RegExp msdn”. Sometimes it helps to add additional “jscript” term: ”RegExp msdn jscript”.

MDN is usually good for general and firefox-specific information, while MSDN helps to deal with IE-specific features.

Incompatibilities

There are many cross-browser incompatibilities in frontend-programming. When you come across them, http://www.quirksmode.org/ may be a help.

It contains information about lots of incompatibilities. Also, there is a combo to search it. Try entering ”quirksmode onkeypress” in google for instance.

The ECMAScript specification

The language specification (formal description of syntax, basic objects and algorithms) of JavaScript is called ECMAScript.

Why not just "JavaScript" ?

You may ask: “Why standard for JavaScript is not just JavaScript?”.

That’s because JavaScript™ is a registered trademark of Oracle corporation (used to be Sun trademark, but now Oracle acquired Sun).

The title “ECMAScript” was choosen to keep the specification independent from trademark owners.

The language specification tells a lot about how it works, but it is an advanced source of information.

Today we live in a time of changes. The modern standard is ECMA-262 5th edition (or just ES5), but browsers are in the process of implementing it.

The old standard is ECMA 262 3rd edition (ES3). It is supported by all major browsers.

When you want to learn how the language works in-depth, there’s more perspective in reading ES5, but remember that many features are not implemented yet. You can find a list of supported browsers/features at http://kangax.github.com/es5-compat-table/.

HTML5

JavaScript is a general-purpose programming language. That’s why ECMAScript specification does not tell a word about browsers.

The browser stuff is described by a family of HTML5 standards.

The official W3.org DOM specifications are large, but extremely valuable. Use them as a reference.

The searching combo ”something site:w3.org” helps for DOM and Events-related questions.

The only problem with W3 is that it describes how it should be, not how it is.

More?

Please write your general coding tips in comments.

Tutorial

Donate

Donate to this project