HTML and CSS Reference
In-Depth Information
<div id='box' style='position:absolute; background-color:black; width:50px; height:50px;'></div>
</body>
<script>
var globalRequestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = globalRequestAnimationFrame;
var theElement = document.getElementById('box');
var movement = 0;
function animate(timestamp) {
//move something the new way
movement += 5;
globalRequestAnimationFrame(animate);
theElement.style.left = movement + 'px';
console.log(movement);
}
//kick animation off
globalRequestAnimationFrame(animate);
</script>
</html>
Using
requestAnimationFrame
allows the browser to intelligently offset the animation to the GPU (where doing
so is supported); this makes for smoother animation and also detects when a user is not viewing animated content on,
say, a hidden browser tab. The browser's throttling down the animation's frame rate saves resources; it automatically
picks back up should the user return to that tab. This is a world of difference from using
setTimeout
; as the browser
can really understand a designer's intentions, it allocates resources appropriately. (Since
requestAnimationFrame
is
still an emerging feature and not a finalized spec, be sure to include vendor-prefixed versions.)
XML
XML (extensible markup language) has long been a language of the Web and many other software programming
languages. XML's true beauty is in not being specific to any language. Completely agnostic, it describes rules that are
readable both by a human and by various coding languages. Using an
XMLHttpRequest
, XML is the response when
working with an HTTP web service call.
XMLHttpRequest
is subject to the same origin policy, which for security
reasons allows requests to be made only from within the domain of the page content. That is, you can't access
information from
twitter.com
or
google.com
using
XMLHttpRequest
. That said, an XML response is typically not
the favorite when dealing with JavaScript developers. Typically, developers ask to have their web services respond in
JSON format.
JSON
JSON (JavaScript object notation) is a name/value pair object that is handled natively inside of via JavaScript. What
makes it so highly useful is that it's extremely lightweight and legible. JSON is very helpful for responses when using
APIs for web services in mobile devices. Also, JavaScript with padding or JSON-P treats JSON as native JavaScript,
which means you won't run into cross-domain policy issues when requesting services from external domains. JSON
is becoming a standard response for Twitter and other popular API services because of its fast response and clean
readability. Listing 3-8 demonstrates a basic and easily understood JSON structure.
