Bookmark this page and check back often for new tips all the time. Don't forget to follow me on Twitter.
HTML
- For <!doctype html>, the doctype is case-insensitive. This is valid in all compliant HTML parsers, but is not correct in XML.
- When using the <script> tag, specifying type="text/javascript" is optional. JavaScript is already the default programming language in all browsers.
- In HTML5, the <head> tag is obsolete. Put your metas, scripts, titles, and so on directly in the <html> tag, but outside <body>.
JavaScript
- If you're not sure whether you should use == or ===, just remember that " " == 0 is true, but " " === 0 is false.
- Also, true == 1, but true != 2.
- To use a switch statement with conditions, do this:
switch(true){
case boolean_condition1:
//Code
break;
case boolean_condition2:
//Code
break;
}
Or, just use if/else if statements. - The double tilde trick in JavaScript is frequently used to floor numbers (~~3.9 == 3). But never use it.
- In JQuery, if you use the empty or remove functions, JavaScript's garbage collector will delete any references to event handlers for the deleted components. If you remove stuff that has JavaScript events attached using something like document.getElementById("foobar").innerHTML = "", you could leak memory.
- If you want to transfer data from your server to JavaScript via your rendering engine, one possible hack is by writing data to a var, for instance:
var value = {{myNumber}};
var value = <?= echo myNumber ?>;
var value = @(ViewBag.myNumber);
Or whatever... But if you're worried that the value might not exist on the server, use this instead: var value = Number("{{myNumber}}"); so that if the value doesn't exist, it won't crash the client side with an "expected value after =" error. - The return keyword breaks if the return value is on a separate line. Semicolons are optional and JavaScript can be lazy in unexpected ways.
- You don't need jQuery to use css selectors to query elements in JavaScript. document.querySelectorAll() is an underrated built-in function that does nearly the same thing (though jQuery does add some nice features).
CSS
- When positioning elements as absolute, the target will, by default, be positioned relative to the window, unless one of the target's parents (or ancestors) are positioned as anything except static. So if a container is positioned as relative, it's children can be positioned as absolute, and setting things like left: 0, etc. on the child will position it relative to the parent.
- Browsers interpret decimal numbers in their own way. For instance, the current latest version of FireFox seems to ignore any "px" value with a decimal value. Chrome is inconsistent. Edge seems to be very robust, however. This is important to consider when setting style using JavaScript. If you're experiencing really weird style bugs with varying behaviors across browsers, and your web page uses dynamic styles, this is probably a good thing to keep in mind when you start debugging.
- Percentages for vertical margins and paddings are relative to width, not height.
Like I said, it's a work in progress. More to come.
