HTML and CSS Reference
In-Depth Information
JavaScript or not, before digging into it, I'd recommend reading the quick post by Rebecca Murphey called “A Baseline
for Front-End Developers” (
rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers
). She outlines
the importance of building, testing, and process automation; these are things that every developer can relate to.
■
the dOM tree is the markup of elements in the document. For more information on the dOM tree, visit
Note
Minify
When you're dealing with JavaScript, HTML and CSS, it's always nice to have a minified version and an archive
version. The minified version should be used in campaign production environments; it reduces the code to a single
code block with less k-weight than the archived version by removing line breaks and white space and by replacing
verbose names with single letter references. The archived version should always be your wordy, cleanly legible code
base—that is, something you can go back to in a couple years and quickly understand it to make updates.
Minifying code is especially useful when it's being deployed to mobile devices and tablets that could be on 3G
speeds or less. Some developers even automate the process of compiling all their JavaScript files and minifying them.
Tools like Apache's ANT, Maven, and Grunt can help you streamline this process when you're getting JavaScript ready
for deployment. Conversely, if you ever want to unminify JavaScript code, an extremely useful tool is
jsbeautifier.org
;
it allows you to view code in a much more formatted and digestible way. An example would be jQuery's library minified
(
code.jquery.com/jquery-1.8.2.min.js
)
and unminified (
code.jquery.com/jquery-1.8.2.js
)
versions.
Async
In HTML5 compliant and modern browsers, JavaScript has now offered an
async
attribute to loading script files;
async
is used when script files are to be loaded in parallel and asynchronous to the other scripts loading on the
page. These are scripts that have no dependency on the rest of the page content. This is especially useful in helping
load a page more quickly or when an external script is not responding. Having the script load with
async
allows the
page to render yet not be held up trying to execute a script that has failed. The main takeaway with
async
is avoiding
parser block—the situation where the document stops rendering until script files are done. This usually results in
no elements being rendered to the screen because most script files are added to the head of the document and the
parser can't get past it. For JavaScript ad tags, using
async
can ensure that your ad script doesn't delay the rendering
of the publisher's page until after all your ad content comes down. To get a better understanding on this feel free to
check out some of the examples from The Deck and
BuySellAds.com
(
css-tricks.com/thinking-async
)
. Listing 3-4
outlines the use of
async
in an ad call.
Listing 3-4.
Using Async JavaScript in an Ad Call
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script
async
src='
http://code.someAdTag.js
'
></script>
</head>
<body>
</body>
</html>
