Wednesday, December 29, 2010

Reviewing and renewing resolutions

My career

I'm still working on the same projects as I was last year: Firestation Antwerp and Ghent. This year we did not build a lot of brand new things, but we have added a decent amount of new functionalities. Next to that there were a bunch of bugs to fix and technical debt to pay off. I learned a lot from the mistakes we made and refactoring makes you really think about what good and clean code should look like.

In 2011 I will still be spending time on Firestation Antwerp and Ghent. There is a hazy bright light on the horizon though, chances are there is a new interesting challenge ahead.

This year I had some fun side-challenges. I gave internal technical sessions on ASP.NET 4 & ASP.NET AJAX, something I enjoyed doing more than I thought. I also passed the MCTS 70-536 exam, which I didn't enjoy studying for that much. In 2011 I want to pass at least one MCTS ASP.NET exam, and give more technical sessions.

Blog

I have written 62 posts this year. Not as much as I would have liked to. There are several reasons I didn't produce more content. I have had a technology hiatus this summer, because I was just too busy with other life stuff. Next to that, I have been working on a side-project and have been studying for the MCTS 70-356 exam. A lot of excuses, but I plan to make up for it in 2011.

I am pretty satisfied with the qualtiy I produced this year, although there is a lot of room for improvement. I like to think a good metric for quality is the number of visitors and retweets. I got double the traffic compared to last year, which makes me feel a little warm inside.



This year I mainly blogged about Webforms (refactoring), ASP.NET AJAX, the Bing API, TechEd, IE9 and HTML5. In 2011 I plan to continue to focus on Microsoft and the web. I'm still an MVC and WebMatrix novice, which needs to change next year.

Community

Last year I planned on being more active on StackOverflow, but I failed miserably. I don't think I will be making this a goal this year. I'm just going to continue to go there for questions only.

I also planned on going to a big event in 2010, which turned out to be TechEd Europe. Seriously, I could hang around there an entire month.

In being part of the Belgian .NET community I was less successful. I have been talking a lot with other Belgian developers through blogs and Twitter, but I should attend more real-life events. With the DrinksWithDevs community Davy Brion is starting, I think I might be doing better this year.

Travelling

One of the goals I'm totally satisfied about.

Next to citytripping in Belgium, I was lucky enough to travel abroad 5 times this year: There are no plans for next year (yet), but I don't think I will be able to do much better.

Sport/Health

This is a new section in this year's report. Sport has become more and more important to me over the years. Next to going to the gym and running, I picked up boxing this September.

In the next year I want to focus more on conditioning and less on strength. It's hard to set a specific goal right now, because I haven't measured the speed and distance of my runs this year. For Christmas I got the Nike+ iPod gear, so that should help me to collect some data the following months.

Conclusion

This year had its ups and downs. Not a lot of exciting things happened at work, but 2011 should change that. I am overall content with the progress of my blog, although I think I should do better next year. I should be very satisfied with the travelling I did this year, I have spent more than a month abroad! I think I improved my health noticeably this year, I hope I stay injury-free and can put enough effort in to keep on improving my conditioning.

All by all 2010 was a good year and I hope 2011 will be at least as good. And to be honest, I don't mind not being able to accomplish all goals, because the love of my family and friends compensates a lot. That was cheesy, right?

How was your year?

Monday, December 27, 2010

Format JavaScript with the IE9 developer tools

One of the new features in the IE9 developer tools Giorgio Sardo demoed at TechEd Europe, is the Format JavaScript tool. This tool can be very useful when you want to reverse engineer a minified script.

You can find this feature in the toolbox on the Script tab.


This is how jquery.min.js looks after formatting.


This feature is not available in the public beta (9.0.7.9360.16406), but should be available in the latest platform previews.

Edit: This feature is in the IE9 RC!

Sunday, December 26, 2010

HTML5: Exception handling with the Geolocation API

In my previous post on the Geolocation API I passed in a PositionErrorCallback to the geolocation.getCurrentPosition() method. When I received this callback I displayed a generic message informing the user something went wrong. In real-world scenarios you probably want the message to be more specific. You might also want to call a specific fallback method depending on what went wrong.

This is where the PositionError argument of the PositionErrorCallback comes in handy. This object has two properties: code and message.

The code property can return three codes:
  • 1: PERMISSION_DENIED
  • 2: POSITION_UNAVAILABLE
  • 3: TIMEOUT
The message property returns a string describing what went wrong. Be careful, this property is primarily intended for debugging!

Example

The codesnippet below only shows the part where I am handling the PositionErrorCallback. You can find the demo and full source here.

function onError(error){
    var content = document.getElementById("content");        
    var message = "";
    
    switch (error.code) {
        case 0:
            message = "Something went wrong: " + error.message;
            break;
        case 1:
            message = "You denied permission to this page to retrieve a location.";
            break;
        case 2:
            message = "The browser was unable to determine a location: " + error.message;
            break;
        case 3:
            message = "The browser timed out before retrieving the location.";
            break;
    }
    
    content.innerHTML = message;
}

Top 5 popular posts of 2010

Today I have spent a few hours evaluating this year's analytics of my blog. In total I posted 59 entries this year, but in this post you will only find the 5 most popular, plus the ones that I liked writing a lot but failed to make it to the top 5.

The most popular posts of 2010

1. Cannot start Service from the command line or debugger.: The most popular post of 2010, almost all traffic was completely driven by search engines. In this post I share a trick that makes it easier for our team to debug Windows services. Next to the trick our team uses, I also share some alternative (Microsoft) approaches to this issue.

2. Customizing Telerik RadGrid tooltips: Looks like a lot of people are not fond of the default RadGrid tooltips, or they are searching for a way to localize the tooltips (which is not supported). In this post I show how you can customize the RadGrid tooltips and make the customization consistent through your webapplication using ASP.NET Themes.

3. Listening for UDP packets in a Windows service using an UdpClient: In this post you can find how to use an UdpClient in a Windows service to listen for UDP packets.

4. HTML5: The Geolocation API is scary (good): People definitely are curious for HTML5. Here I show an example of the HTML5 Geolocation API. I also search for documentation on the internals of the Geolocation API, but come home empty handed. I am still looking for good resources! You can also find a demo where you can test how accurate the Geolocation API is for your machine. Please let me know.

5. Switching with non-constant cases in C#: In this post I try to resolve Compiler Error CS0150 (A constant value is expected). The first option uses else-if statements and the second option uses a dictionary. The second option turns out to be the most safe and elegant.

My favorite posts of 2010

1. Webforms lessons learned the hard way Part 1 and Part 2: In these two posts I look back on what I have learned about Webforms in the past two years.

2. Webforms refactoring: Eliminating redundant eventhandlers using a dictionary to map controls: Something I have seen way too often, redundant eventhandlers in Webforms. In this post I use a few iterations to come up with a good solution. You should also check out the follow-up.

3. Building a tagcloud with jQuery and ASMX Webservices: This post demonstrates how you can create your own tagcloud using jQuery and good old ASMX Webservices.

Thank you so much for reading my posts this year! I will come to a more in-depth personal review of 2010 in a future post.

Sunday, December 19, 2010

HTML5: The Geolocation API is scary (good)

I read about the HTML5 Geolocation API in the Pro HTML5 Programming book a while ago, and decided to play with it on this lazy Sunday.

Using the Geolocation API to make a one-shot position request is very straight-forward. Get a reference to the navigator.geolocation object and call the getCurrentPosition() method, passing in at least a PositionCallback. In this example I'm also passing in a PositionErrorCallback. In the PositionCallback you can examine the properties of the position object. Here I am only using the latitude and longitude properties.

function showLocation(){                        
    if (navigator.geolocation){
        navigator.geolocation.getCurrentPosition(onSuccess, onError);
    } else {
        var content = document.getElementById("content");        
        content.innerHTML = "Geolocation is not supported by your browser!";
    }                
}
 
function onSuccess(position){
    var content = document.getElementById("content");        
    content.innerHTML = position.coords.latitude + ", " + position.coords.longitude;
}
 
function onError(error){
    var content = document.getElementById("content");        
    content.innerHTML = "Something went wrong..";
}

That's really easy, right? You can find the complete source and demo here.

The scary part

The privacy part isn't that scary, because the specs state that browsers must acquire permissions through a user interface. The scary part is, that it really works and is very accurate even though I'm on a desktop with no known hotspots nearby! After getting the results, I pasted them in Google Maps and they were only a few meters off. Why is it that while most geolocation services have been failing over the years, it suddenly works this good?

There is some documentation out there, but this documentation is very simplistic and doesn't touch the internals.

The Pro HTML5 Programming book lists which sources can be used.
A device can use any of the following sources:
  • IP address
  • Coordinate triangulation:
    • Global Positioning System (GPS)
    • Wi-Fi with MAC addresses from RFID, Wi-Fi and Bluetooth
    • GSM or CDMA cell phone IDs
  • User defined
FireFox lets the Google Location Services assist them.
If you consent, Firefox gathers information about nearby wireless access points and your computer’s IP address. Then Firefox sends this information to the default geolocation service provider, Google Location Services, to get an estimate of your location. That location estimate is then shared with the requesting website.

Feel free to share more good resources!

What is the outcome on your machine?

Check out the demo, paste the result in Google Maps and please let me know how accurate the results are for you.

Saturday, December 18, 2010

Programmatically disable UpdatePanels

In this post I'll show you how to programmatically disable all UpdatePanels in a page. I don't know in which scenario you would want to use this, but I had to use it to hack around an issue with the ReportViewer control. I'll save you the details, really.

To disable all the UpdatePanels, you need to set the EnablePartialRendering property of the ScriptManager to false. You can get a reference to the current ScriptManager by using the GetCurrent() method passing in a reference to the current page.
protected void Page_Init(object sender, EventArgs e) {
ScriptManager.GetCurrent(this.Page).EnablePartialRendering = false;
}
There is one gotcha: you need to set this property on the Page_Init event, otherwise an InvalidOperationException gets thrown.

Sunday, December 12, 2010

HTML5 selectors and jQuery

In my first post on the HTML5 javascript Selector API I wondered how the new methods querySelector() and querySelectorAll() would influence jQuery.

At the time, I couldn't find any information on the subject, but yesterday I found out that jQuery has been taking advantage of these new methods since version 1.4.3.

From the release notes..
The performance of nearly all the major traversal methods has been drastically improved. .closest(), .filter() (and as a result, .is()), and .find() have all been greatly improved.

These improvements were largely the result of making greater use of the browsers querySelectorAll and matchesSelector methods (should they exist). The jQuery project petitioned the browsers to add the new matchesSelector method (writing up a test suite, talking with vendors, and filing bugs) and the whole community gets to reap the excellent performance benefits now.




The above performance results specifically look at three very common cases in jQuery code: Using .closest() on a single DOM node, using .filter() (or .is()) on a single DOM node, and using .find() rooted on a DOM element (e.g. $(“#test”).find(“something”)).

Note that the the browsers shown are those that actually support querySelectorAll or matchesSelector – existing browsers that don’t support those methods continue to have the same performance characteristics.

Looks like it's not a bad idea to keep an eye on the release notes..

Friday, December 10, 2010

More accurate javascript execution time measurement with the msPerformance API

A cool feature of Internet Explorer 9 is the msPerformance API. This API helps you to accurately measure the performance of a webpage. A lot of developers have built their own performance measurement constructs over the years, based on the Date function, but the results of these constructs can be way off!

John Resig (jQuery inventor) has an in detail blogpost where he discovers where custom javascript execution time measurement goes wrong.
In Summary: Testing JavaScript performance on Windows XP and Vista is a crapshoot, at best. With the system times constantly being rounded down to the last queried time (each about 15ms apart) the quality of performance results is seriously compromised. Dramatically improved performance test suites are going to be needed in order to filter out these impurities, going forward.

Browsers know exactly how long it takes to load webpages and execute scripts. IE9 now makes it possible to consume this information through the msPerformance API.

If you are interested in performance marks of the document loading, you can read properties of the msPerfomanceTiming object. If you are, like me, interested in measuring execution time of a specifc function, you can use some functions of the msPerformance object. Have a look at the following codesnippet.

function runTest(){                
    var msPerformance = window.msPerformance;
    
    if (msPerformance){        
        msPerformance.mark("writeLoopBegin");
        
        for (var  i = 0; i < 50000; i++){
            document.writeln(i);
        }        
        
        msPerformance.markAndMeasure("writeLoopEnd", "writeLoopMeasure", "writeLoopBegin");        
        var res = msPerformance.getMeasure("writeLoopMeasure");
        
        alert(res + " ms elepased.");    
    } else {
        document.write("msPerformance isn't available in your browser.")
    }
}

The first thing you have to do is get a reference to the msPerformance object. To start measuring you need to call the mark function. After marking, you can run the code you want to measure. When that is done, you need to call the markAndMeasure function. Once the end is marked an measurement is finished, you can get the results by calling the getMeasure function.

See it in action here.

What about standards?

You probably noticed by the ms prefix that this isn't part of the standards yet. It does look like there are efforts being made by the W3C to get a performance measurement API into the standards though.

Is this something you have been waiting for?

Sunday, December 5, 2010

HTML5: Drawing images to the canvas gotcha

While I was playing with the Canvas API I came across a weird issue: I was trying to draw an image to the canvas, but the image failed to render very often.

Have a look at the source. Do you spot the problem?

<!DOCTYPE html>
<html>
    <head>
        <title>HTML5: Canvas</title>
        <script type="text/javascript">        
            window.addEventListener("load", draw, true);
            
            function draw(){                            
                var canvas = document.getElementById('canvas');
                var context = canvas.getContext('2d');    
 
                var img = new Image();
                img.src = "http://3.bp.blogspot.com/_0sKGHtXHSes/TPt5KD-xQDI/AAAAAAAAA0s/udx3iWAzUeo/s1600/aspnethomepageplusdevtools.PNG";                
                
                context.drawImage(img, 0, 0);                
            }            
        </script>        
    </head>
    <body>
        <canvas id="canvas" height="500" width="500">
            Looks like canvas isn't supported in your browser! 
        </canvas>
    </body>
</html>

It wasn't until I opened Firebug and saw an unhandled exception in the console that I discovered what was going on.
uncaught exception: [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: file:///....html :: draw :: line 15" data: no]

Browsers load images asynchronously while scripts are already being interpreted and executed. If the image isn't fully loaded the canvas fails to render it. Turns out the weird issue, is pretty logical.

Luckily this isn't hard to resolve. We just have to wait to start drawing until we receive a callback from the image, notifying loading has completed.

<script type="text/javascript">        
    window.addEventListener("load", draw, true);
    
    function draw(){                                    
        var img = new Image();
        img.src = "http://3.bp.blogspot.com/_0sKGHtXHSes/TPt5KD-xQDI/AAAAAAAAA0s/udx3iWAzUeo/s1600/aspnethomepageplusdevtools.PNG";                
        img.onload = function(){
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');    
        
            context.drawImage(img, 0, 0);        
        };            
    }                    
</script>

You can find the demo and source here.

Did you spot the problem in the first codesnippet?

HTML5: More on selectors

Last weekend I blogged on new addittions to the javascript Selector API: querySelector() and querySelectorAll(). These two new methods enable you to find elements by matching against a group of selectors. I only scratched the surface in the previous post, that's why you can find a few more examples in this post. These examples should demonstrate the power and ease of use of the new Selector API features. It's impossible to show you all of the selectors usages in just one post, that's why I strongly encourage you to have a look at the W3C Selectors specifications.



I experimented on the asp.net homepage using the IE9 developer tools.

Attribute selectors

Select all elements which have an attribute named title.

>>document.querySelectorAll('[title]');
[object] {
    length : 5,
    0 : http://www.asp.net/,
    1 : [object HTMLImageElement],
    2 : http://www.asp.net/get-started,
    3 : http://www.asp.net/downloads,
    4 : http://www.asp.net/rss/spotlight
}

Select all elements where the title attribute has the value set to Rss.

>>document.querySelectorAll('[title=Rss]');
[object] {
    length : 1,
    0 : http://www.asp.net/rss/spotlight
}

Select all elements where the href attribute is set to http://umbraco.org/ and where the target attribute is set to _blank.

>>document.querySelectorAll('[href="http://umbraco.org/"][target="_blank"]');
[object] {
    length : 1,
    0 : http://umbraco.org/
}

Select all elements where the href attribute contains umbraco.

>>document.querySelectorAll('[href*="umbraco"]');
[object] {
    length : 3,
    0 : [object HTMLLinkElement],
    1 : [object HTMLLinkElement],
    2 : http://umbraco.org/
}

Class selectors

Find the first element where the class is set to .search_box.

>>document.querySelector('.search_box')
[object HTMLInputElement] {
    jQuery1291484082884 : 1,
    align : "",
    border : "",
    hspace : 0,
    vspace : 0,
    accept : "",
    alt : "",
    checked : false,
    defaultChecked : false,
    defaultValue : "Search"
    ...
}

Id selectors

Find the first element with the id #WLSearchBoxInput.

>>document.querySelector('#WLSearchBoxInput')
[object HTMLInputElement] {
    jQuery1291484082884 : 1,
    align : "",
    border : "",
    hspace : 0,
    vspace : 0,
    accept : "",
    alt : "",
    checked : false,
    defaultChecked : false,
    defaultValue : "Search"
    ...
}

Pseudo classes

Select the first hyperlink that is being hovered over.

>>document.querySelector('a:hover')
http://umbraco.org/ {
    charset : "",
    coords : "",
    hash : "",
    host : "umbraco.org:80",
    hostname : "umbraco.org",
    href : "http://umbraco.org/",
    hreflang : "",
    name : "",
    pathname : "",
    port : "80"
    ...
}

Select the third child element from the first element with the class .welcom_nav.

>>document.querySelector('.welcome_nav:nth-child(3)')
    type : "",
    compact : false,
    currentStyle : [object MSCurrentStyleCSSProperties],
    runtimeStyle : [object MSStyleCSSProperties],
    accessKey : "",
    className : "welcome_nav",
    contentEditable : "inherit",
    dir : "",
    disabled : false,
    id : ""
    ...
}

As you can see searching for elements with native javascript has become a lot easier. I tried to show some examples which can be applied to real life scenarios. Examples based on more complex scenarios can be found in the W3C Selectors specifications.

What do you think?

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.

Specificiations

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>
<html>
    <head>
        <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;
            }
        </style>
    </head>
    <body>
        <div id="header">
            <h1>HTML5: Selector API</h1>
        </div>
        <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>                
            </ul>            
        </div>
    </body>
</html>

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

function selectFirstNewMethod(){
    var firstNewMethod = document.querySelector('li.new');
    firstNewMethod.style.color = 'Red';
}

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

function selectAllNewMethods(){
    var allNewMethods = document.querySelectorAll('li.new');
    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, li.new Selector.

function selectExistingAndNewMethods(){
    var existingAndNewMethods = document.querySelectorAll('li.exists, li.new');
    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 Peugeot.com and Asp.net.

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!

Thursday, October 14, 2010

Trip Report Denmark (Part 2)

If you missed the first part of this trip report, you can find it here.

Funen

After three days of Copenhagen we stayed at Funen for two days. This is the smallest of the three big islands of Denmark. Our motel was in a small town called Faaborg.

During these two days in Funen the most impressive attraction we went to see was the Egeskov Castle. This castle is Europe's best preserved Renaissance water castle. You can also walk around in the big park surrounding the castle, or visit the five museums on the Egeskov domain. The vintage automobile and motorcycle museums are awesome!






Jutland

The last three days of our trip we stayed at the biggest island (peninsula) of Denmark, Jutland.

Here we visited the oldest city of Denmark, went hiking and strolled the cleanest beaches in Europe. A perfect place to relax and find new energy.






Conclusion

This trip was amazing. From Copenhagen to Jutland, this country has surprised me hundreds of times. We got the best out of Denmark's culture and history in Copenhagen, and enjoyed the beauty of Denmark's nature in Funen and Jutland. Summarized Denmark has it all!

One small drawback is that Denmark isn't cheap. Everything is twice as expensive compared to Belgium. Although with some good looking around you can save a lot.

And you?

Have you ever been to Denmark? Is it on your wishlist?


Credit to my (beautiful) girlfriend for making these beautiful pictures.

Wednesday, October 13, 2010

Trip Report Denmark (Part 1)

Last month me and my girlfriend went on a holiday to Denmark for a week. We had a great time, visited a lot of places and took hundreds of pictures. In this post you can find a trip report containing the best pictures and tips on places to see.

Copenhagen

The first three days of this holiday we visited Copenhagen. These three days were the most interesting, but also the most intensive days of the holiday. There are so many places to visit in Copenhagen!


If you are in Copenhagen to do some sightseeing I advice you to get yourself a Copenhagen card. This card is valid for 72 hours and includes entrance fees for almost all attractions and public transport. And it only costs 63€.

Ripley's believe it or not museum

Next to the TV show hosted by Superman, there are Ripley's believe it or not museums spread over the world. Although this museum isn't a must-see, the bizarre items featured are definitely entertaining.



Dansk Design Center

Although this is one of the museums my girlfriend had to drag me to, it turned out to be not that bad. The UX people out there will find this very interesting.



Christianborg

This palace used to be the home of the Danish monarchy. Today Christianborg is the seat of the parliament, the Prime Minister's Office and the Supreme Court.

The palace is probably most known for it's turbulent past. It had to be rebuilt two times due to serious fires.

A small part of the palace is open to the public. The inside of the palace is even more impressive than the outside!



Tivoli

Tivoli is the second oldest amusement park in the world. It was built over 150 years ago. Although you can't compare it to Disney World, this is a must-see. If you go there, I advice you to go by night.




Zoological Museum

In this museum there is a permanent exhibition called From Pole To Pole. There is also a semi-permanent Darwin exhibition.





Copenhagen Zoo

The Copenhagen Zoo is definitely worth a visit. The main reason we wanted to go there is because we wanted to see a Tasmanian Devil. Copenhagen Zoo is the only zoo outside of Australia that has Tasmanian Devils in captivity. It turned out it didn't totally live up to our expectation.






The Tasmanian Devil guarding its territory borders. Not that scary right?

Christiania

Christiania is a special part of Copenhagen. This part of Copenhagen is a self-proclaimed autonomous neighbourhood. In the seventies a group of hippies founded this freetown. Although the government tried to turn the situation around at first, in the late seventies Christiania was tolerated and considered a social experiment.

This probably was the weirdest experience of this trip. Soft drugs are tolerated and publicly sold in Christiania, giving this freetown a very special atmosphere. People from all around Copenhagen get together here to smoke, socialize and chill.

Too bad taking pictures at Pusher Street isn't allowed.





Rosenborg castle

This castle used to be a country summerhouse for the monarchy. Today it is a museum exhibiting the Royal Collection and Crown Jewels.




Nyhavn

Nyhaven, meaning new harbor, is very popular among tourists. It is best known for its colorful buildings and cozy restaurants.



Architecture

For people with an architectural fetish there are tons of buildings worth visiting. The ones that impressed me the most are the Black Diamond and the new Opera House.




And you?

Have you ever been to Denmark? Is it on your wishlist?

Part two of this Trip Report will be published tomorrow..

Thursday, September 23, 2010

Things good to know about SQL State Server

While installing a SQL State Server last week, I came across a few things worth sharing about the installation and use of SQL State Server.

Finding a good tutorial

There are lots of tutorials out there on how to install SQL State Server but most of them are not great. To do a basic installation you only need this Msdn documentation on how to run the Aspnet_regsql.exe tool and edit your web.config.

All the objects in Session need to be serializable

If you try to store an object in Session which isn't marked as serializible an HttpException will get thrown with following message.
Unable to serialize the session state. In 'StateServer' and 'SQLServer' mode, ASP.NET will serialize the session state objects, and as a result non-serializable objects or MarshalByRef objects are not permitted. The same restriction applies if similar serialization is done by the custom session state store in 'Custom' mode.
Marking your classes with the Serializible attribute shouldn't be a problem. Be careful when storing WebControls in Session though, most of these aren't marked as serializible!

When you are using UpdatePanels this exception doesn't fully propagate to the front-end. The javascript error shown will have following message.
Error: Sys.WebForms.PageRequestManagerServerErrorException: An unknown error occurred while processing the request on the server. The status code returned from the server was: 500
Use the same machinekey on multiple servers

To make the SQL State Server work across servers hosting the same application, you need to make sure the machineKey element in the machine.config is identical.

Redundancy options are limited

Looking at the Msdn documentation, it looks like only SQL Server clustering is supported. You can't specify a Failover Partner, so SQL Server mirroring isn't supported.
In SQLServer mode, you can configure several computers running SQL Server to work as a failover cluster, which is two or more identical computers running SQL Server that store data for a single database. If one computer running SQL Server fails, another server in the cluster can take over and serve requests without session-data loss.
More experience?

Do you know more things good to know about SQL State Server?

Saturday, September 18, 2010

Building a tagcloud with jQuery and ASMX Webservices

Generating tagclouds is nothing new. People have been generating tagclouds server-side since the seventies. Lately more and more tagclouds are being generated client-side.

There is nothing wrong with generating tagclouds server-side. Telerik has a great tagcloud server control. Generating tagclouds server-side can bring some overhead though, so depending on the scenario and the requirements you might decide to do it client-side. There are a ton of fancy ready-to-use jQuery tagcloud plug-ins out there. None of them met my requirements perfectly, so I decided to do it myself.

In this post you can find my own implementation. It's simple, straightforward and a decent base to start experimenting yourself.

Making the tags available through an ASMX Webservice

In my implementation I use an ASMX Webservice to expose a TagCollection. The TagCollection is an object which contains a List<Tag>. The TagCollection also has a MaxWeight property which we will need on the client-side to calculate the relative weight.

   1:  public class TagCollection {
   2:      public TagCollection() { }
   3:   
   4:      public TagCollection(List<Tag> items, int maxWeight) {
   5:          this.Items = items;
   6:          this.MaxWeight = maxWeight;
   7:      }
   8:   
   9:      public List<Tag> Items { get; set; }
  10:      public int MaxWeight { get; set; }
  11:  }


A Tag is a simple object with two properties: Value and Weight.

   1:  public class Tag {
   2:      public Tag() { }
   3:   
   4:      public Tag(string value, int weight) {
   5:          this.Value = value;
   6:          this.Weight = weight;
   7:      }
   8:   
   9:      public string Value { get; set; }
  10:      public int Weight { get; set; }
  11:  }


In the ASMX WebService I created the GetTagCollection method which returns a TagCollection. Don't forget to uncomment the [System.Web.Script.Services.ScriptService] declaration and to add the [ScriptMethod(ResponseFormat = ResponseFormat.Json)] declaration to the GetTagCollection method.

   1:  [WebService(Namespace = "http://TagCloudWithJquery.com")]
   2:  [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
   3:  [System.Web.Script.Services.ScriptService]
   4:  public class TagService : System.Web.Services.WebService { 
   5:      [WebMethod]
   6:      [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
   7:      public TagCollection GetTagCollection() {
   8:          var items = new List<Tag>() {
   9:                  new Tag(".NET", 20),
  10:                  new Tag("CodeSnippets", 15),
  11:                  new Tag("...", 10),
  12:                  new Tag("ASP.NET", 18)                
  13:              };
  14:          var maximumWeight = items.Max(i => i.Weight);
  15:   
  16:          var tagCollection = new TagCollection(items, maximumWeight);        
  17:   
  18:          return tagCollection;
  19:      }
  20:  }


Consuming the ASMX Webservice

Consuming the ASMX Webservice with jQuery is relatively simple. If you are new to consuming ASMX Webservices with jQuery, I advice you to read this excellent article.

When the document is ready I make a call to the ASMX Webservice and when the call is successful all the work gets passed to the onTagCloudSuccess function.

   1:  $(document).ready(setupTagCloud);
   2:   
   3:  function setupTagCloud() {
   4:      $.ajax({
   5:          type: "POST",
   6:          contentType: "application/json; charset=utf-8",
   7:          url: "Services/TagService.asmx/GetTagCollection",
   8:          data: "{}",
   9:          dataType: "json",
  10:          success: onTagCloudSuccess
  11:      });
  12:  }


Don't forget to add a script reference to the latest version of jQuery.

Generating the tagcloud

All the work happens in the onTagCloudSuccess function. In this function I iterate over all the items in the TagCollection. For each item I calculate its relative weight using the TagCollections MaxWeight property. Depending on the relative weight the tag gets a different css class. This logic can be found in the getCloudItemClass function.

Finally I append a new listitem to the unordered list 'items' using the tags value and the calculated css class.

   1:  function onTagCloudSuccess(data, textStatus) {      
   2:      var maxWeight = data.d.MaxWeight;
   3:   
   4:      $.each(data.d.Items, function(i, item) {
   5:          var itemWeight = item.Weight;
   6:          var relativeItemWeight = itemWeight / maxWeight;
   7:          var itemClass = getCloudItemClass(relativeItemWeight);            
   8:   
   9:          $("#items").append("<li class='" + itemClass + "'>" + item.Value + "</li>");
  10:      });       
  11:  }
  12:   
  13:  function getCloudItemClass(weight) {
  14:      if (weight < 0.35) {
  15:          return "light";
  16:      } else if (weight < 0.7) {
  17:          return "medium";
  18:      } else {
  19:          return "heavy";
  20:      }       
  21:  }


Don't forget to add an unordered list with the id set to 'items' to your page.

So far this looks something like this.



I used following css to make the unordered list look like a tagcloud.

   1:  #items li {               
   2:      display: inline-block;         
   3:      margin: 4px;
   4:  }
   5:   
   6:  .heavy { font-size: 60px ; color:Red; }
   7:  .medium { font-size: 30px; color:Orange; }
   8:  .light { font-size: 14px ; color:Yellow; }


Setting the display to inline-block on the listitems makes the unordered list go horizontal instead of vertical. The heavy, medium and light classes are used to give the tagclouditems a style that matches with their heaviness.

The final result looks like this.



Different ways of marking up a tagcloud can be found in this article.

Get the source

You can find the full source here.

Feedback

As always I want to hear your feedback. Please tell me how this implementation can be improved.