Rickard Nilsson

Day 3, the final day of Codegarden 2011, the annual Umbraco festival, is over and the Umbraco community is once again scattered all over the world. An interesting point that was maid during the round up was that only 250+ of the 200 000 active Umbraco users attended the conference. However, the fortunate part of the community, which were able to attend, is an awesome crowd with lots of really talented people. Thank you all for making it such a great experience.

Highlights from Codegarden 11:

Umbraco is the single most active project on Codeplex…

…Umbraco is teaming up with Mark Boulton Design to give users a better and more beautiful experience…

…Umbraco v5 CTP is available for download on Codeplex, the beta is scheduled for release later this summer and the final version will be coming at the end of 2011…

…v5 is a complete rewrite built on ASP.NET MVC with a solid foundation, rearchitected from the ground up using best practices, patterns, and frameworks like unit testing, IoC, DI, nHibernate, Autofac, etc…

…you can read all about and influence the development of v5 at http://jupiter.umbraco.org

…Deli is the new Umbraco package marketplace on http://our.umbraco.org where you can buy and, or sell packages…

…there are basically two approaches for implementing multilingual sites in Umbraco, either you duplicate the node structure per language, or use logic in your templates to get the language specific content from another sub document or property.

www.asp.net has run on Umbraco for more than a year now. Microsoft is planning to move MSDN and Technet to Umbraco as well, which means that Microsoft is really pushing Umbraco and because of this, Umbraco’s growth has escalated, even in the US.

…Courier 2 is the way to do continuous integration and deployment with Umbraco. There are no providers for TFS yet though…

…ClientDependency framework is a powerful tool for managing JavaScript and CSS dependencies in ASP.NET applications and has been an integral part of Umbraco since v4.

Finally, i give the conference 5 of 5 because its so much more than just a conference, actually more of a festival including great people, activities, sessions, service, and food. Very much recommended if you’re into Umbraco in any way.

Day 2 of Codegarden 11 has come to an end. And what and end it was. The infamous Umbraco Bingo brought the craziest things ever, including a marching girl band, a midget Elvis, a pillow fight, and the grand prize of getting a real Umbraco tattoo live on stage!

The conference, on the other hand, was a little slow, and for me it was mainly focused on the low level concepts, and patterns used in Umbraco 5, coming much later this year (se yesterday’s post). If day one contained very brief subjects with very little details, the second day was quit the opposite.

For me, the most interesting thing from todays sessions was the one on the ClientDependency framework. This is something that has been shipped with Umbraco backend since v4 but is actually a separate project on Codeplex, entirely independent of Umbraco itself. The framework provides a way to automatically manage JavaScript and CSS dependencies in any ASP.NET web application, using best practices like merging, minification, and compression, as well as automatically setting far future expire headers (I’ve written a post on minifying JavaScript and CSS before).

Tomorrow is the final day of Codegarden…

Codegarden 11 is an annual developer conference for everything Umbraco where everyone from casual users to core developers attend to learn, share ideas, network and socialize for three days in sunny Copenhagen. This year’s event is all about Jupiter – version 5 of Umbraco rearchitected on ASP.NET MVC, scheduled to ship later this year. Actually, the CTP was released live on the stage during the keynote.

Another exciting news from HQ, the company behind Umbraco, is version 2 of Courier, which promises to deliver automated deployment of content and developer artifacts to Umbraco, made really easy. They even dropped the price to 99€!

A new thing HQ are releasing now at Codegarden is Umbraco Deli, which is a marketplace for packages. Up until this point, there’s really been no place like this where you can sell licenses to your packages for download, other on your own.

The first day of Codegarden has come to an end and it’s been a really grate day for me, meeting all these new people which, are passionate about much of the same things I am. The day finished on a canal boat and after that the party continued into the night at a local office here in Copenhagen.

Looking forward to another great day!

Also follow my Codegarden experience through twitter, flickr, and Facebook.

It has been almost three years since I wrote my top ranking post on this blog: Applying stylesheets dynamically with jQuery. It was a quick and dirty example of a testing scenario pulled together for a colleague but it has become my number one linked post. It is still the post that gets the most hits every month because it is the first hit on Google for jquery add stylesheet which seems to be a lot of people has trouble with.

So, I felt it was time to do another post on the subject considering I’ve been using jQuery more or less every day these last three years.

jQuery Plugin

I’ve created a simple jQuery plugin for adding or switching out stylesheets dynamically and interactively and it can be used like this:

<ul>

    <li><a href="#" rel="1.css">Apply Stylesheet 1</a></li>

    <li><a href="#" rel="2.css">Apply Stylesheet 2</a></li>

    <li><a href="#" rel="3.css">Apply Stylesheet 3</a></li>

</ul>

$('a').click(function () {

    $.stylesheets.clear().add($(this).attr('rel'));

    return false;

});

$.stylesheets = (function () {

    var stylesheets,

        add,

        clear;

    add = function (cssfile) {

        $('head').append('<link href="' + cssfile + '" rel="stylesheet" />');

        return stylesheets;

    };

    clear = function () {

        $('head link[rel=stylesheet]').remove();

        return stylesheets;

    };

    return stylesheets = {

        add: add,

        clear: clear

    };

} ());

Download source / demo

I’ve created a Facebook page for rickardnilsson.net to be able to share more unedited material to the world than I have time with if I would write blog posts.

…and it will not be just another twitter feed rather I will have the opportunity to discuss and interact with people sharing my set of interests including web development, internet and social media.

Update: I would like to thank all of you who helped med secure a username on Facebook

If you share my interests or like me for some reason, please “Like” me on the button above to get all the extra material as well as blog post updates served conveniently on your Facebook wall.

-- Rickard

Since Facebook launched their share link feature anyone including you can share your site or pages to their friends. You can tailor what is displayed on the Facebook wall in terms of title, description image and URL.

Facebook is smart enough to use the html meta tags on your page for title and description and it may list some or all of the <img> tags to the user to choose from. This is great as a starting point and may be enough in many cases, however in some it is not.

Say that you put a Like button on a page. What happens when a user Likes it is that Facebook uses the title and description as before but it may try to pick an image from the page, probably closest in proximity to the Like button. This may not be what you want as you might want a specific image to be displayed on Likes.

Open Graph protocol

The Open Graph protocol enables you to integrate your web pages into the Facebook social graph. You can turn your pages into graph objects by adding additional meta information.

<html xmlns:og="http://ogp.me/ns#">

  <head>

    <title>Join the dark side with Son of Obsidian Visual Studio color scheme</title>

    <meta property="og:title" content="Join the dark side with Son of Obsidian Visual Studio color scheme"/>

    <meta property="og:type" content="article"/>

    <meta property="og:url" content="http://rickardnilsson.net/post/2011/05/05/join-the-dark-side-with-son-of-obsidian.aspx"/>

    <meta property="og:image" content="http://rickardnilsson.net/image/Rickard_Nilsson.jpg"/>

    <meta property="og:description"

          content="Join the dark side with Visual Stuide color scheme

          Son of Obsidian. Download it from http://studiostyl.es/"/>

    ...

  </head>

  ...

</html>

Additional images

One image may not be enough e.g. when users share your page with the above mentioned Share link feature. To still enable users to pick one of the images on your page you can add additional og:image <meta> tags to the header.

Photographed for Hotspot · Photo by Henrik Bäck

A couple of month ago I switched my Dell dev machine for a new MacBook Pro and it has been a joy ever since. Even though my main work still is in Windows and Visual Studio I much rather do it on a virtual machine on top of Mac OS X than on my old Dell.

I’m running Win7 virtually on VirtualBox complete with my dev tools, including Visual Studio and ReSharper.

For office and communication I’m using Office 2011 and Communicator 2011 for Mac and it works great!

Do you also want to join the dark side? This is the theme I use.

Update: Download My customized Son of Obsidian Visual Studio color scheme for ReSharper

Download it from studiostyl.es/schemes/son-of-obsidian

How to change settings

Go to Tools > Options > Environment > Import and Export Settings

Check Use team settings file and click Browse…

Select the .vssettings file downloaded from above and click OK.

Done!

Note: When using the team settings file option the previous settings are preserved and can easily be restored by unchecking again.

After graduation I started out on my professional career as developer on the .NET stack. As I was new to the platform and tools I began searching for means to educate myself and continue to stay up to date with everything that was going on in the industry.

I found that listening to audio talk shows, or “podcasts”, was a great way to get an even flow of new information about the platform, industry and the .NET community. The podcasts quickly introduced me to a whole new world of MVPs, regional directors, .NET user groups, events, and conferences, new technology, as well as how it is to work in the business.

My advice to you, professional or student, novice or experienced, who is interested in building software with Microsoft tooling and products, follow one or more of these channels because for me, they really boosted my career and has been a cheap way for me to get ahead. I use the time on the commute every day to stay on top of things.

The .NET podcasts I have followed since the beginning and still follow every week are:

Subscribe · iTunes · Zune · Facebook page

Favorite shows:

642. Bruce Lawson and Remy Sharp on HTML 5
346. Future of .NET Panel at DevTeach Toronto
240. The ORM Smackdown!

Subscribe · iTunes

Favorite shows:

256. JavaScript and jQuery: Moving beyond Alert()
72. Be a Better Developer in Six Months
31. Test Driven

Subscribe · iTunes

Favorite shows:

132: Phil Haack, Keith Dahlby and Paul Betts on Git for Windows developers
117: Llewellyn Falco on Approval Tests

Why should you bother with combing and minifying JavaScript and CSS files? If you are a web developer working with sites with any significant traffic, you simply should because of the impact it will have on the load time of your site and how your visitors will perceive the page loading faster.

In the field of web site optimization, pioneered by Yahoo, there are many rules or guidelines which you should try to follow in hunt for milliseconds on the client side. In fact, it’s on the client that you will get the most value for your optimization work rather than on the server side [SOUDERS]. This is a subset of the rules regarding JavaScript and CSS.

Guidelines for web site optimization

• Put all your CSS in separate .css files
• Put your CSS links as early in the header section of the page as possible
• Minify your CSS files, i.e. remove whitespace etc.
• Try combining all of your CSS files into one
  
  
• Put all your JavaScript code in separate .js files
• Put your JavaScript imports as close to the </body> tag as possible
• Minify your JavaScript files
• Try combing all of your JavaScript files into one
• If possible try loading large scripts asynchronously
  
  
• Enable GZIP compression on all your static content, e.g. CSS and JavaScript files
• Set far future expire headers on your static content

Microsoft Ajax Minifier

I have searched for a tool that could help me implement many of the optimization guidelines and found a few worth taking a closer look at, one of these is the Google Closure Compiler. It has loads of features including file combining, minification, “compiling” your JavaScript into better JavaScript, as well as an API for loading your scripts asynchronously.

However, being a pragmatic .NET developer, I chose the most easily accessible tool available for me, which is Microsoft’s Ajax Minifier. It’s a free tool available on Codeplex and documentation is provided on the www.asp.net site.

Ajax Minifier comes as a command-line application and after you have installed it you can use it through it’s own command prompt.

Minifying JavaScript

Minifying a single JavaScript file is pretty straight forward. Simply type in the command prompt:

• ajaxmin inputfile.js –out outputfile.js

then add –clobber if you wish to override the outputfile.js if it exists, as in:

• ajaxmin inputfile.js –out outputfile.js –clobber

Minifying CSS

Minifying a single CSS file is equally simplistic as follows:

• ajaxmin inputfile.css –out outputfile.css –clobber

As before, add –clobber to override any existing output file.

Combining files

Unfortunately there are no documentation on the asp.net site about how to combine multiple files into one, however, the ajaxmin command itself provides a hint given the /? parameter:

As an alternative to the input file parameter you can use the –xml parameter and supplying it with the path to an xml file of the following format:

<?xml version="1.0" encoding="utf-8"?> 

<root> 

    <output path="outputfile.js"> 

        <input path="inputfile1.js"/> 

        <input path="inputfile2.js"/> 

        <!-… -> 

    </output> 

</root> 

The Ajax Minifier will combine all of your input files into one, minify it, and produce the result in the output file. Using this approach you can also control in what order the files are loaded into the page and sort out any dependency issues, just as you would, had you listed includes in the regular html file (or .master or whatever).

The Ajax Minifier does not seem to have the smarts to deduce that this is JavaScript files so you need to supply it with a –js parameter like so:

• ajaxmin –js –xml jsxmlfile.xml –clobber

I haven’t found a way to combine JavaScript and CSS in the same xml file so you need to make a separate file for you CSS files with the same format as above and instead of the –js parameter, use the –css dito:

• ajaxmin –css –xml cssxmlfile.xml –clobber