December 2011 - Posts
The async and defer Script Attributes in HTML5
One of the rules of thumb that you always hear regarding script elements is to put them very close to the </body> closing tag of the Web page. The main reason for that is that script elements are fetched and executed immediately when the browser encounter them. This default behavior includes blocking the browser’s rendering, loading a JavaScript file into memory, and executing its code immediately. In many circumstances, and in particular when large JavaScript files are involved, this might create a performance bottleneck.
One of the solutions for this problem is to use script tag injections or other Ajax techniques to prevent the browser from blocking. That might help to increase performance but it requires more coding and testing and in some occasions might create bugs because it is very hard to synchronize the file loading and executioning.
HTML5 introduces the async script attribute which helps to load scripts asynchronous. In the specifications you can also find another attribute, the defer attribute, that is very similar to the async attribute but it has another purpose. Both of the attributes will be presented in this post.
The async Attribute
The async attribute was introduced in HTML5. Its purpose is to signal the browser that a script should be executed asynchronously, and as soon as it is available. This means that when a browser encounter a script tag with the async attribute, it will download the script asynchronous and not block the rendering process. At the first opportunity after the script finished downloading and before the window’s load event the browser will execute the script. Here is how you will use the async attribute:
<script src="jsFile.js" async></script>
The async attribute can be used only on script element that point to external JavaScript file. That means that the src attribute must exists when you use the attribute. Also, you can’t know the execution order of scripts that use the async attribute.
In most of the major browsers, such as Chrome, Firefox, and Opera, the attribute is available for use. IE9 and previous versions of IE don’t support the attribute yet.
The defer Attribute
The defer attribute is not new in HTML5. It can be found in most of the browser (even in very early versions of IE). Its purpose is to signal the browser that a script should be executed in parallel and without stopping the page’s rendering. Deferred scripts guaranteed to run in sequence in the order that they are written in the code. They are executed before the DOMContentLoaded event. Here is an example of using the defer attribute:
<script src="jsFile.js" defer></script>
As in the async attribute, defer attribute can be used only on script element that point to external JavaScript file.
Pay attention not to use the defer attribute on external script files that use the document.write or generate document content.
What happens if you add both of the attributes to a script element?
Here is the answer in the specifications:
“The defer attribute may be specified even if the async attribute is specified, to cause legacy Web browsers that only support defer (and not async) to fall back to the defer behavior instead of the synchronous blocking behavior that is the default.”
Summary
The post introduced the async and defer script attributes. Both of them can be used to improve the performance of Web pages because they help to load scripts asynchronous without blocking the page rendering. In most of the times you will use the attributes instead of writing your script elements in the bottom of the Web page.
Build Modern Web Applications with HTML5 CSS3 and JavaScript – Slide Deck and Demos
Today, I delivered a second round of my HTML5 MSDN session at Microsoft HQ. I want to thank all the attendees who attended and heard about the transition that the web eco-system is going through. The session agenda was as follows:
- What is HTML5?
- The New Elements
- Migration to HTML5
- HTML5 APIs (Canvas, Web Storage, AppCache, Geolocation and Web Workers)
- CSS3
The slide deck and demos can be downloaded from here.
Enjoy!
CSS3 2D and 3D Transform
When I first encountered CSS3 transform property, I had a nostalgic moment that took me back to the days that I was a computer science student. Back then, one of the mathematics courses that I had to take was linear algebra. Linear algebra deals with vector spaces and linear functions that make transformations using vectors and matrixes. The course itself wasn’t so hard but later on, when I started to work as a Web developer, I always thought to myself were can I use those pesky vectors and matrixes in a Web site or application without any plugins. Now with CSS3 transform I got the an answer.
CSS3 Transform
Using the new CSS3 transform property you can create element transformations and to change the shape, size and position of the element. The transform property can get a set of transformation functions which can be composed if you write them separated by whitespace.
The 2D transform functions included:
- translate – given left and top parameters, the element will move from its position to the new point. There are also a translateX and translateY functions that get only one parameter and translate the element only in one axis.
- rotate – given a degree the element rotate clockwise according to the degree. Pay attention that the parameter should be in a specific format for example these are valid parameters: 60deg, 80deg and etc.
- scale – given a width and height, the element will increase or decrease its size. There are also scaleX and scaleY functions that get only one parameter and scale the element only in one axis.
- skew – given x degree and y degree parameters, the element will turn in the given angles first in the x-axis and then in the y-axis. There are also skewX and skewY functions that get only one parameter and skew the element only in one axis.
- matrix – given six a-f parameters apply the transformation matrix [a b c d e f] on the element.
The 3D transform functions included:
- matrix3d – the same as the matrix function but now gets 16 parameters.
- translate3d – gets an additional z-axis parameter.
- scale3d – gets an additional z-axis parameter. There is also scaleZ function that scale the element only in the z-axis.
- rotate3d – gets four parameters – x, y and z that define the [x y z] direction vector and a degree to rotate in that direction. There is also a rotateZ function that rotate the element in the z-axis.
A Simple Transform Example
Using the transform property is simple as to set every other CSS property on an element. Here is a simple example of how to use the transform property:
<!DOCTYPE html>
<html>
<head>
<title>Transformation Example</title>
<style type="text/css">
#rotatedTriangle
{
position:absolute;
left: 100px;
top:100px;
height: 100px;
width: 100px;
background-color: Green;
transform: rotate(45deg) scale(2, 2);
}
</style>
</head>
<body>
<div id="rotatedTriangle"></div>
</body>
</html>
Pay attention – I use the specification CSS properties. In every major browser up until the specification become recommendation you will have to use the browser prefix.
Here is a picture of the outcome of the transformation in the Web page:
Combining CSS3 Transform and CSS3 Animations
In a previous post I wrote about CSS3 animations and how to use it to create simple animations. You can combine the knowledge of CSS3 animations with CSS3 transform in order to create sophisticated animations embedded in your Web pages. Lets see a simple example:
<!DOCTYPE html>
<html>
<head>
<title>Transformation and Animation</title>
<style type="text/css">
@keyframes trans
{
from { transform: translate(0px, 0px) scale(1, 1); }
to { transform: translate(300px, 300px) scale(2, 2); }
}
#animatedDiv
{
position:absolute;
left: 100px;
top:100px;
height: 100px;
width: 100px;
background-color: Green;
animation: trans 5s linear 1s infinite;
}
</style>
</head>
<body>
<div id="animatedDiv"></div>
</body>
</html>
In the example I use the @keyframes rule to apply the translate and scale function on a div element embedded in the Web page. The animation will translate the div 300px in the x-axis and y-axis and then it will scale the div twice its size. This is a simple example but it shows the concept of using two CSS3 modules to get a very interesting outcome.
Pay attention – I use the specification CSS properties. In every major browser up until the specification become recommendation you will have to use the browser prefix.
Summary
CSS3 transform helps to create element transformations in 2D and 3D. Using this new CSS3 module can help to create graphics and of course animations which could be achieved in the past only with plugins or with a lot of JavaScript code. Not all the browsers support the transform property but you can use fallbacks in order to implement it even today.
CSS3 Animations
Lately I’m involved in a very interesting HTML5 project which I’ll tell about in the future. Meanwhile, I get to “play” with HTML5 and CSS3 specifications. One of the new interesting CSS3 specifications is probably the CSS3 animations. Does these things ring a bell – animated images, simple animation with Flash or JavaScript. If so, this post is for you.
Why to Use Animations?
Most of the Web sites and applications today use animations. You can find them in marketing ads embedded inside a site, in animated images while waiting for something like download to finish and in many other places. The added value of animation is that it draws the user’s attention. This is also its drawback since over using animations can cause distraction and might draw users from the Web site or application. In the past if you wanted to use animations you could use animated images, Flash or JavaScript. Today with HTML5 that isn’t necessary. You can use Canvas, SVG or even CSS to achieve the same results.
What is CSS3 Animations?
CSS3 introduces a new CSS module which is called CSS Animations Module Level 3. The module describe how to create simple animations using CSS3 new properties. CSS3 animations are defined with a new @keyframes rule which define the frames of the animation. Combined with the animation properties you can achieve simple animations that are composed of style changes only.
Defining the Animation
In order to define the animation, you will use the @keyframes rule and give it a meaningful name. Inside the @keyframes block you must specify a starting and ending point for the animation. You do that using 0% or from value for the starting point an 100% or to value for the ending point. You can also create frames by specifying their percentage in the animation itself. Here is a simple animation definition:
@keyframes changeBackground
{ from { background-color: white; } 50% { background-color: green; } to {background-color: white; }}
The animation here just change the background from white to green during the running of the animation. You can use any CSS property to create your animations.
defining the animation isn’t sufficient since it does nothing. In order to run the animation you will use the animation properties to set it to a DOM element.
The animation Properties
There are a set of animation functions that are specified in the specification such as animation-name and animation-duration. I prefer to use the shorten animation property that include those functions. The animation property gets 6 different parameters which are name, duration, timing function, delay, iteration count and direction. If the duration is omitted than its default value is 0 and the animation won’t run. Also if the name is ‘none’ value that will stop a running animation. Here is an example of setting the animation property on some element with the animatedDiv id:
#animatedDiv
{ animation: changeBackground 2s linear 1s infinite alternate;
}
The animation will run the animation that was defined earlier, for 2 seconds duration, with a linear timing function, with a delay of 1 second, infinite and the direction will be alternate.
Pay attention that most of the browsers added CSS3 animation with their prefix so the previous code won’t work in all browsers. For example, Chrome uses the @-webkit-keyframes rule and the –webkit-animation property prefixes.
Summary
CSS3 animations can help to reduce the use of animated images and the use of plug-ins for simple animation. It define a simple animation model which can be set by defining the animation with the @keyframes rule and using them on elements with the animation properties.
Keep Users Coming Back With Desktop Notifications for Web Apps Article
A few days ago, an article I wrote for DZone web site was published in their HTML5 Microzone. The article is called “Keep Users Coming Back With Desktop Notifications for Web Apps” and it discusses desktop notifications and in particular IE9 Pinned Sites and HTML5 Notification API.
You can read the article here.
Enjoy!
SDP11 My Tutorial Days Demos
Sela SDP11 is over.
Here are some photos that my colleagues caught me talking during the conference:
I want to thank all the attendees who attended the two tutorial days that I delivered:
As promised, I uploaded all the demos from the tutorials to my SkyDrive and you can download it from here.
See you in the next SDP.