Rey Bango

Web developer, honey badger

Internet Explorer 9 Beta has Arrived! The Features that Matter to Me as a Developer.

Wow, I can’t believe this day has come! After so many years of developers wishing for a better browser from Microsoft, one that was more consistent with web standards and would allow them to develop cross-browser websites leveraging the same markup, today marks the day that developers finally have that browser; Internet Explorer 9 Beta. It’s an important day because this release, although just a beta, is the culmination of a lot of effort and most importantly, listening, by the Internet Explorer team.

While the Internet Explorer browser has enjoyed widespread adoption by consumers, it hasn’t always been viewed fondly by the development community. The important work of building cross-browser compliant websites has often been cumbersome, due in part to differing interpretations of browser APIs in previous versions of Internet Explorer. The differences forced developers, myself included, to find workarounds for functionality that, in many cases, had a clearly defined standard behavior.

HTML5, CSS3, DOM

With Internet Explorer 9, there’s been a concerted effort by Microsoft to focus on standards-based functionality that will ease cross-browser development while providing the features needed to build rich and immersive websites. Take, for example, IE9’s support for many of the features of HTML5 and CSS3, the specifications which are defining the future of the web. By including support for features such as Canvas, video, @font-face, CSS3 media queries, SVG and many others, we now have a rich base to provide more compelling experiences to end users. In addition, by ensuring that these features are conformant to the defined specifications, the sites we build should work with any browser that also supports those specifications.

To take it a step further, the IE team has enhanced the performance of many of the new HTML5 features by taking advantage of the GPU. This means that text, graphics and video will be substantially smoother and more responsive allowing websites to perform more like true applications.

And at the DOM level, important changes have been made to be consistent with the defined specifications making it easier to whittle down browser-specific code. For example, support for the W3C DOM Events specification (addEventListener & removeEventListener) in place of the proprietary IE model (attacheEvent & detachEvent) has been one of the most welcomed changes to IE9 as has the introduction of getElementsByClassName, supported for some time in the DOM Level 2 specification and now available in IE9.

JavaScript

Equally important is the performance boost provided by the new Chakra JavaScript engine which basically blows away older versions of Internet Explorer and brings IE9 in line with modern browsers such as Chrome, Firefox and Opera. JavaScript development continues to become more complex and intricate so the importance of these performance enhancements can’t be understated. The Chakra engine interprets, compiles, and executes code in parallel and takes advantage of multiple CPU cores when available and the results are obvious by the greatly improved benchmark scores from the Webkit Sunspider JavaScript Benchmarks.

Chakra JavaScript Engine – WebKit SunSpider Benchmarks

Updated Developer Tools

Substantial work has been done to update the Internet Explorer Developer Tools. The built-in tools, usually found by pressing F12, provided quite a bit of capabilities but were missing key components that were essential to effective testing and debugging of client-side source code. With this update, the tools now include a much anticipated network traffic inspector, Console tab, CSS editing, and an improved JavaScript profiler.

The new Console tab is a welcome addition providing the ability to inspect script easily as well as receive important page-specific error and warning messages.

IE Developer Tools – Console Tab

Of the new features, the one that I’m most excited about is the network traffic inspector, mainly because the bulk of my application development involves Ajax-based requests.

IE Developer Tools – Network Performance of Specific Assets

IE Developer Tools – Network Request Information

I can now do such things as determine load times of specific assets or inspect my request/response headers, cookies and return values without the need for breaking out of the browser to a 3rd party application such as Fiddler or Charles.

Get to Using it Today

A lot of effort has gone into making Internet Explorer 9 Beta a better browser. There’s certainly more work to be done but the fact that we now have a version of IE that provides standards-based functionality and allows us to use the same markup across browsers is pretty hot.

To really appreciate what you can build with IE9, though, you need to just start digging into it. Microsoft has created the following sites to give developers the knowledge and inspiration they need to leverage IE9 to its fullest:

  • Beauty of the Web – Explore all of the new features of Microsoft’s latest browser and check out the cool demos built using the advanced features of Internet Explorer 9 Beta
  • Internet Explorer 9 Test Drive – This site breaks down the new, advanced features of Internet Explorer 9 Beta and lets you get a visual of what’s possible with each bit of functionality
  • Internet Explorer Guide for Developers – The developer documentation you’ll need to learn how about the specifics of Internet Explorer 9 Beta

It feels great to know that we’re on a path to being able to build truly feature-rich websites that will be easier to maintain and provide a more exciting experience to users. While we’ll still need to support older browsers for some time, the fact that all the major browser vendors are heading in the same direction is going to allow us to build some truly amazing things. I can’t wait!

Book Review: A Book Apart’s HTML5 for Web Designers by Jeremy Keith

I just finished A Book Apart’s first book titled HTML5 for Web Designers. The book, written by well-known developer Jeremy Keith, and provides an overview of HTML5. I was pretty hyped up to receive this book and pre-ordered it based on my experience with Jeremy’s previous book.

My Thoughts

If you’re totally new to HTML5, this book will give you a good overview of the new spec. It’s not a highly technical book and is meant to provide the reader with an understanding of the evolution of the spec as well as some of the most important features of HTML5 including Canvas, video and updated form capabilities. The book is very short (only 85 pages) and extremely easy to read, which allowed me to finish it off in about 2-3 days of non-contiguous reading. I also liked Jeremy’s use of humor throughout the book.

With that said, this book is definitely not a deep-dive into HTML5 and if you’re expecting to pick it up and actually learn how to use the new features, I think you’ll be disappointed. While there are some technical nuggets (especially around Canvas), the book is really just an overview with very little technical meat to it. And I believe that’s the way that A Book Apart is trying to promote their books; quick, easy-to-read materials that get you good information fast.

What I would recommend is that if you’re looking to get a 10,000 foot view of HTML5, pick up this book. It’s definitely worthwhile from that perspective. If you’re looking to better understand the implementation of specific features, then this is not the right choice. And I offer this recommendation whether you’re a developer or designer. Better resources for a deeper, technical understanding of HTML5 include:

Dive Into HTML5
HTML5 Demos
HTML5 Doctor

All of these are listed in the Resources section of the book and having read them previously truly are excellent sites for deep-diving into HTML5.

Canvas Baby Steps: An Introduction to the HTML 5 Canvas Element

I hate to admit it but I haven’t looked at <canvas> yet. It’s not for lack of wanting but more of time. Seems like there’s SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.

For those not familiar with it, the HTML 5 <canvas> element provides a rectangular area where you can draw anything you want on. It’s pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it.

If we look at the <canvas> element, the format is just like any other HTML element:

<canvas id="can1" width="300" height="300"></canvas>

You define the element along with specific attributes, just like most any other HTML element. In this case, we’re assigning it an “id” along with the width and height of the rectangular drawing area. The reason we assign it an “id” is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.

Now, I’m by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.

The first thing we need to do is great a reference to the <canvas> element. Remember that I discussed adding an “id” attribute to the element? This is where it comes in handy:

var myCanvas = document.getElementById( "can1" );

You could do the same thing in jQuery this way:

var myCanvas = $( "#can1" )[0];

but because we really don’t need all of the jQuery library’s syntactic sugar for this small demo, I’m just going to use plain ‘ole JavaScript.

Next, we’ll use the element’s getContext() method to grab the rendering context for that element. This is the area within your <canvas> element where the actual drawing will occur. It doesn’t have to be the same size as your canvas but it needs to fit within it.

var myContext = myCanvas.getContext( "2d" );

We specify “2d” as a parameter because it’s the only rendering context currently supported by the specification so for now, you’re limited to flat drawings.

Now that I have the rendering context, I can begin making my drawing. Using the fillStyle and strokeStyle properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the strokeRect() & fillRect() methods, I can use the colors defined in those properties to effect the change:

  myContext.fillStyle   = '#00f';
  myContext.strokeStyle = '#f00';  
  myContext.lineWidth   = 4;  
  myContext.strokeRect( 0,0,300,300);
  myContext.fillRect(0, 0, 300, 300);

What this does is gives me a nice blue box with a red border around it. It may not look like much but the fact that we’re able to do this via HTML and JavaScript is pretty cool:

Now I want to get fancy (well as much as I guess I can). I want to create a shape within the canvas rendering context so I’m first going to use the moveTo() method to position my starting point. The two parameters are “x,y” coordinates within your rendering context and I’d like to start at the top and centered:

  myContext.moveTo( 150, 0 );

Next, I’ll use the lineTo() method to draw a line to different “x,y” coordinates. Notice that I don’t have to re-use the moveTo() method to reposition the starting point of each line.

  myContext.lineTo( 0, 150 );
  myContext.lineTo( 150, 300 );    
  myContext.lineTo( 300, 150 );    
  myContext.lineTo( 150, 0 ); 

This code renders a box like this:

The last things I want to do are to adjust the fillStyle and strokeStyle properties so that they’re a different color:

  myContext.fillStyle   = '#F63806';  
  myContext.strokeStyle = "#000";

and then using the fill() and stroke() methods, apply the color changes to the new drawing:

  myContext.fill();
  myContext.stroke();

Wooo!! Okay, okay this is not going to land me a million bucks at an auction or even $1.50 on Esty but it’s a start. While what I built is fairly simple, the power of <canvas> can really be seen by visiting Canvasdemos.com. Along with excellent demos built using <canvas>, it provides tutorials on how to get up to speed on this element.

One really cool thing is that the gaming industry is keenly looking at <canvas> since it will help them distribute new games without the need for special plugins. Here’s a tutorial, for example, that talks about how to create a game using <canvas>. It certainly won’t replace dedicated console or PC games but it does open up opportunities to build the next FarmVille or PacMan. :)

Here’s the code to my tutorial:

<!DOCTYPE html>
<html lang="en">
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <meta name="robots" content="noindex" /> 
  <title>Canvas Test</title> 
</head> 
 
<body> 

<canvas id="can1" width="300" height="300"></canvas>

  <script type="text/javascript">
  var myCanvas = document.getElementById( "can1" );
  var myContext = myCanvas.getContext( "2d" );
  myContext.fillStyle   = '#00f';
  myContext.strokeStyle = '#F63806';  
  myContext.lineWidth   = 4;  
  myContext.fillRect(0, 0, 300, 300);  
  myContext.strokeRect( 0,0,300,300);

  myContext.moveTo( 150, 0 );
  myContext.lineTo( 0, 150 );
  myContext.lineTo( 150, 300 );    
  myContext.lineTo( 300, 150 );    
  myContext.lineTo( 150, 0 );      

  myContext.fillStyle   = '#F63806';  
  myContext.strokeStyle = "#000";
  
  myContext.fill();
  myContext.stroke();

  </script>
 
</body> 
</html> 

Sponsors



Learn JavaScript!

What to Read to Get Up to Speed in JavaScript.

The best books & blogs for learning JavaScript development. Broken down by experience levels!


My BIG LIST of JavaScript, CSS & HTML Development Tools, Libraries, Projects, and Books.

Constantly updated with the latest and greatest tools. Check it out!

Categories

Rey Bango is Stephen Fry proof thanks to caching by WP Super Cache