DotNetNerd's blog

Over the last couple of weeks I have been looking at quite a few new frameworks, tools and plugins. My focus area has mainly revolved around an app that I will be building that needs to pop and therefore it will make pretty heavy use of javascript and css - and of course by extention jQuery.

First of all dotLessCss deserves a mention, even though its actually not one things I looked at now. Basically it allows you to do some of the stuff you probably miss when working with css. Variables, mixins and nesting really helpes reduce all the repetitiveness. SquishIt is a little library I read about a while ago. It makes bundeling and minimizing javascript and css files as easy as can be. On top of that it also makes sure the files get versioned, so you won't run into users running on an old cached version.

In the category nice jQuery plugins I have looked at quite a few things. jQuery cookie addin makes it a no brainer to work with cookies. Watching a video from NDC I learned that newer browsers now support other ways of saving data on the client called sessionStorage and localStorage. As always the problem is compatibility, but there is a shim to fix this for IE6 and IE7, which are the main culprits.

I also looked at a few flashy jQuery addins, and FancyBox and Cycle solve a few of the things designers crave these days while being super simple to implement. Now that we are in the design department Cufón helpes you do font replacement easily, so you can use cool non websafe fonts.

Video is an area where there are quite a few options available, and it is becomming a jungle figure out which players support which formats and run in which browsers. Video for everybody is a simple way to implement videos in a way that will work across all the popular browsers. The idea is to use the html 5 video tag and then default to others where it is not supported. If being crossbrowser is not quite that important but designing the player is Silverlight has some great optios as well as flowplayer. Both are also easy to work with from javascript almost as straight foreward as the html 5 player API.

Lastly I saw a tweet about TopShelf and decided to try it out. Safe to say, I'll probably use it everytime I need to write a Windows Service from now on. It makes it just a little easier, and allows you to run your app either in a console or as a windows service.

A little while ago I read about a nice little library called .less, which is a port from ruby less, that lets you write css, but with the added features of enabeling variables, operations, mixins and nesting. Today I decided to try it out, and I definately want to give it my recommendation.

Using variables makes stylesheets a lot more maintainable because it allows you to avoid having colorcodes scattered all around the stylesheet simply by writing:

@listbackground_color: #E3EFFF;

Nesting just makes it more maintainable and gives the stylesheet a better sence of structure like this:

table.MapsList
{
  background-color: @listbackground_color;       
  tr th
  {
    width: 300px;
    background-color: @listbackgroundheader_color;
  }
}

Finally mixins makes it possible to keep the stylesheets more DRY (don't repeat yourself) like so:

.rightBackground { background-repeat:no-repeat;background-position:right; }
th.headerSortUp { .rightBackground; background-image: url(desc.gif); }
th.headerSortDown { .rightBackground; background-image: url(asc.gif); }

An added bonus is that you can toggle caching and minimizing from your web.config.