One of the most common mistakes people make with JavaScript is polluting the global namespace with too many low-level function and variable declarations and then running into subtle bugs when one declaration stomps on another.
For example, if you declare something like var foo = "value"; in a JavaScript file that gets pulled into your HTML page through a script tag, that foo variable is now in the global namespace. You could have some other JavaScript file that also gets pulled in that also declares a foo variable, puts a different value in it, and then your code could start doing unintended things because of the value supplied by that other JavaScript file. If your foo variable is only intended to be used by other code in the same JavaScript file, there's a simple and common structure to be aware of for controlling that scope: Immediately Invoked Function Expressions (IIFEs), also sometimes referred to as automatically invoked functions, or self-invoking functions.
All you need to do is wrap the contents of your JavaScript file in the following syntax:
(function()
// Your code here
})();
Now, any variables you declare inside that function are local variables that won't pollute the global namespace and can't be stomped on by other JavaScript files being executed in the same page or scope. Those variables can still be used by any functions declared within that "Your code here" scope through the magic of closures, so you have a nice atomic, modular approach to declaring your chunks of functionality. You'll see this as a common approach to declaring things such as modules, controllers, directives and services in Angular code, for example.
Posted by Brian Noyes on 02/23/20150 comments
Have you ever noticed when using search engines that some of the results look much better than others? Why do some of the results have pictures and other specific information and links?
A good way to provide this additional information to search engines is using microdata, which adds extra metadata to HTML to better describe the content. A repository of some common vocabularies (schemas) is available at schema.org. The "person" schema could be used to further describe information about a blog:
<!DOCTYPE html>
<html>
<head>
<title>Robert Boedigheimer</title>
</head>
<body>
<section itemtype="http://schema.org/Person" itemscope>
<h3 itemprop="name">Robert Boedigheimer</h3>
<img src="/images/robert.jpg" width="206" height="250" itemprop="image" /><br />
<nav>
<a itemprop="url" href=" http://aspadvice.com/blogs/robertb/">Blog</a><br />
<a itemprop="url" href="http://tinyurl.com/boedie-mvp">MVP Profile</a>
</nav>
</section>
</body>
</html>
The itemscope designates the area in the document where a particular schema is used. In this case it's using the http://schema.org/Person schema. The schema provides specific properties that can be attached to the content. The itemprop attribute with value of "name" indicates that this content represents the person's name. The <img> tag has added the itemprop of "image" so that search engines understand which of the various images on the page is a photo of the given person.
Adding microdata is really easy to do, and it's a great way to distinguish your products in search engine results and bring you new customers!
Posted by Robert Boedigheimer on 02/23/20150 comments