Monday, November 29, 2010

HTML5: New in the javascript Selector API

Because I finally got the MCTS 70-536 certification out of the way, I can start experimenting with some fun stuff again. One of the things on the top of my list is HTML5. I started reading the book Pro HTML5 Programming, so expect more posts on HTML5 in the near future.

In this post I will show you two new methods in the javascript Selector API which are extremely useful to find elements.


Methods we can now use to find elements are getElementById(), getElementsByName() and getElementsByTagName(). In HTML5 there are two new methods in the Selector API: querySelector() and querySelectorAll(). These new methods find elements by matching against a group of selectors.

Their description as in the W3C specifications is:
The querySelector() method on the NodeSelector interface must, when invoked, return the first matching Element node within the node’s subtrees. If there is no such node, the method must return null.
The querySelectorAll() method on the NodeSelector interface must, when invoked, return a NodeList containing all of the matching Element nodes within the node’s subtrees, in document order. If there are no such nodes, the method must return an empty NodeList.

Throwing out some feelers

To play with these new methods I made a simple page which displays an unordered list of methods in the Selector API. Existing methods have the class exists and new methods have the class new.

<!DOCTYPE html>
        <title>HTML5: Selector API</title>        
        <style type="text/css">
            html {
                font-family: Verdana;
                font-size: 1.2em;
            #header {
                width: 100%;
            .exists {
                font-style: italic;
            .new {
                color: green;
                font-weight: bold;
        <div id="header">
            <h1>HTML5: Selector API</h1>
        <div id="content">
            <ul id="methodslist">
                <li class="exists">getElementById</li>
                <li class="exists">getElementsByName</li>
                <li class="exists">getElementsByTagName</li>
                <li class="new">[NEW] querySelector</li>
                <li class="new">[NEW] querySelectorAll</li>                

To select the first new method we can use the querySelector() method with the Selector. The first matching element is returned.

function selectFirstNewMethod(){
    var firstNewMethod = document.querySelector(''); = 'Red';

To select all new methods we can use the querySelectorAll() method with the Selector. All matching elements are returned.

function selectAllNewMethods(){
    var allNewMethods = document.querySelectorAll('');
    for (var i = 0; i < allNewMethods.length; i++){
        allNewMethods[i].style.color = 'Blue';

To select all methods (existing and new) we can use the querySelectorAll() method with the li.exists, Selector.

function selectExistingAndNewMethods(){
    var existingAndNewMethods = document.querySelectorAll('li.exists,');
    for (var i = 0; i < existingAndNewMethods.length; i++){
        existingAndNewMethods[i].style.color = 'Yellow';

These examples just demonstrate the tip of the iceberg. Check out the Selectors specifications to see how they can be used to greatly improve the way of finding elements in the DOM.

Demo and source

You can find the demo and source here.

The HTML5 Selector API and jQuery?

I am far from a jQuery or javascript expert, so I wonder: how will these methods and selectors influence jQuery? Will they be encapsulated into jQuery, because I can imagine that these natively implemented methods will be a few times faster than jQuery Selectors?

Edit: querySelectorAll is being used by jQuery since version 1.4.3. (Source).

Sunday, November 28, 2010

Add certifications to your LinkedIn profile

October 18th LinkedIn released five new sections that can be added to your profile. The most important for us developers might be the Certifications section. Although your peers aren't easily impressed by a certification, future partners and employers might be.

How to dock/pin IE9 developer tools

The first time you open the IE9 developer tools a new window opens.

This isn't always desirable, think laptop/small monitor. That's why you can dock/pin the tools in your browser. It took me a few minutes of dragging and searching in menus before I found the way to do this. In the upper right corner of the window you find an extra button Pin. You can also use the shortcut CTRL + P.

Thursday, November 11, 2010

TechEd Europe 2010: Day 3

In this post you can find information on the sessions I attended at TechEd Europe today. I will give a very brief summary per session accompanied by some interesting links you can use to find more information on the subject.

ASP.NET MVC for WebForms developers

Dino Esposito started his session by comparing ASP.NET MVC to ASP.NET WebForms. Once that was out of the way, he showed how both technologies, having the same functionalities and using the same core, are different in their implementation.

This MSDN article shows a detailed comparison of these two technologies. If you are (relatively) new to ASP.NET MVC, like me, you can start learning more by visiting the project portal.

Deep dive into HTML5

To get our full attention Giorgio Sardo started his session by showcasing two amazing HTML5 implementations already out there in the wild:Once he had our attention, he started demoing the technical stuff:If you can't wait to start playing with HTML5, you can find support for HTML5 Visual Studio Intellisense at the Visual Studio Gallery.

What's new in ASP.NET MVC 3 and Razor

In this session Jonathan Carter showed us what's new in ASP.NET MVC 3.

He focused on the 4 most important improvements:
  • Package management with NUGet
  • Simplified view development with new Helpers and Razor
  • Improved testability with dependency resolution
  • Global filters
You can find more information on what's new in ASP.NET MVC 3 here.

Design considerations for ASP.NET MVC applications

The last session of the day was probably the most intensive one. Dino Esposito took us on a deep dive into some important ASP.NET MVC best practices:

I plan on posting the most interesting stuff here daily this week, so stay tuned!

TechEd Europe 2010: Day 2

In this post you can find information on the sessions I attended at TechEd Europe yesterday. I tried to give a very brief summary per session accompanied with some interesting links you can use to find more information on the subject.

Architecture Discovery with Visual Studio 2010 Ultimate

In the first session of the day Peter Provost demoed the most important architecture discovery features in Visual Studio 2010 Ultimate:
- DGML dependency graphs
- Architecture explorer
- Layer diagram
- UML modeling

I really need to try this out on my own solutions as soon as I get back to Belgium!

Usability, SEO, Security: Common RIA and Ajax mistakes (and fixes)

Christian Wenz composed a list of common RIA and Ajax mistakes. Next to pointing out the mistakes, he also demonstrated how you can fix them.

Problems he talked about are:
- Bookmarks and maintaining state: You could maintain state using cookies, but that is kind of nasty. It's better to use url hashes to get the job done.
- Back and forward buttons: In most AJAX applications the browsers back and forward buttons don't work as they should. The easiest way to make this work is by using the ASP.NET ScriptManager to enable history. The client-side alternative for this comes in the form of a jQuery plug-in (BBQ, hasChange or history).
- Concurrent HTTP requests: Because browsers limit the number of concurrent HTTP requests to the same FQDN, you should avoid this when possible. If necesseray you can use a model called Comet.
- Security: Security is hard. Beware of XSS, CSRF and SQL injection.

What you as an ASP.NET Developer, need to know about jQuery.

This session was hosted by Gill Cleeren. Gill maintained a solid pace, and was able to show us a ton of code examples in only 60 minutes.

You can already download the presentation and samples on his blog. Strongly adviced!

Best practices for building high performance web applications

The host of this session was Pete Lepage. To be honest I expected more from this session. Pete spent 75% of this session advertising IE9..

I found a few useful best practices in this session though:
- Javascript: Try to minimize symbol resolution and remove duplicate scripts.
- Network: Minify your scripts and use sprites for images to reduce network connections.

For more information on the subject, read this article titled "Best Practices for Speeding Up Your Web Site".

Data Development GPS: Guidance for choosing the right data access technology for your application today

Drew Robbins took us around all data access technologies available in .NET today.

The most relevant data access technologies in .NET available today are:
- ADO.NET Core
- Linq To Sql
- ADO.NET Entity Framework
- WCF Data Services and OData

ADO.NET Core isn't going anywhere. This is the foundation of all modern .NET data access technologies. Use the ADO.NET Core when you want full control. Linq To Sql still is fully supported, but little to none new investments are made by Microsoft. You should avoid using Linq To Sql for new projects. The technology you should use is the ADO.NET Entity Framework. Microsoft is making signifcant investments into this framework, and the .NET community seems to be very happy with this. WCF Data Services and OData should be used for services that primarily expose data.

I plan on posting the most interesting stuff here daily this week, so stay tuned!

Tuesday, November 9, 2010

TechEd Europe 2010: Day 1

In this post you can find information on the sessions I attended at TechEd Europe today. I tried to give a very brief summary per session accompanied with some interesting links you can use to find more information on the subject.

Getting your return on investment with Microsoft .NET Framework 4

In this session, Drew Robbins gave an overview of things new in .NET 4.

You can find a full list of new features and improvements in .NET 4 in this MSDN article.

A lap around Windows IE9 for developers

Pete Lepage gave us a lap around IE9. He told us that with this version of IE, Microsoft is trying to focus on three things:
  • Using the whole pc (GPU!)
  • Creating a site-centric UI
  • Being compliant with the standards (HTML5 & CSS3)
His presentation should be available on his blog tonight.

To get some more insight on what IE9 is all about, check the website Beauty of the Web. Also don't forget to download the beta version of IE9! It really is the best browser out there.

The future of C#

Mads Torgersen talked about the future of C#. Version 5 of C# will be all about asynchronous programming.

To learn more, watch this video on Channel 9 called "Inside C# Async". If you want to go deeper, Jon Skeet did several very low-level blog posts on this topic this month.

Software testing with VS2010

This was part 1 of 2 on software testing with VS2010. In this first part Brian Keller mainly talked about Microsoft Test Manager. This tool helps you plan, test, track and organize manual tests. Its integration with Team Foundation makes this a tool which I want to start using in the near future.

To see what I am talking about, you can watch the video "Introduction to Test Case Management in Visual Studio 2010 with Microsoft Test and Lab Manager" on Channel 9.

Building great websites fast using Umbraco

Umbraco is an Open Source CMS written in ASP.NET. It serves 85.000 websites, including and

The founder of Umbraco, Niels Hartvig, gave this session. Next to showing us how to set up a basic new website with Umbraco, he also made an exciting announcement. In the near future Umbraco will support Razor syntax!

As Niels told us, Umbraco has a great community, so the best place to start playing and learning is the Umbraco community website.

F# in VS2010

Microsoft shipped F# as a first class citizen of the .NET languages in Visual Studio 2010. F# is a functional language which tries to solve complex problems with simple code.

Don Syme showed us how to get started with F#. To get started yourself, visit the F# Developer Center.

He also talked about the future of F#, where Type providers look very cool and innovative. You can watch his session on the future of F# at PDC here.

I plan on posting the most interesting stuff here daily this week, so stay tuned!

Monday, November 8, 2010

TechEd Europe 2010: Keynote summary

The Keynote made it very clear how important the cloud might/will be for the industry the following years. The presenter Brad Anderson even compared the Cloud with the invention of electricity, enough said.

Microsoft sees the Cloud delivering three core services:
  • SaaS: Software as a service
  • IaaS: Infrastructure as a service
  • PaaS: Platforms as a service
Below you can find a list of new products that were demoed during the Keynote. Next to the Windows 7 Phone and SQL Azure all these products were new to me and one by one they looked very promising.

Software as a serviceInfrastructure as a servicePlatforms as a service
I plan on posting the most interesting stuff here daily this week, so stay tuned!