LESS gradient mixin with fallback for IE

As you could read in my last post (long time ago) I've rather used SCSS over LESS but when I upgraded my Visual Studio to version 2012 I decided not to install Mindscape's addin as VS already comes with support for LESS, CoffeeScript and TypeScript via Web Essentials addin. So I started writing my usual set of mixins in LESS. It seemed simple and straight forward at first until I started writing .gradient mixin that should somewhat also support older non-CSS3 browsers like outdated IE8.

Gradient mixin requirements

CSS3 gradient support is great but when creating a public facing webapp I usually want to support old(er) browsers so they'd display something in place of those nifty looking gradients. I opt for a flat background colour that is a mix between first and last gradient colour. But that's not all. Here are my gradient mixin requirements:

1. support CSS3 gradients using background-image style property
2. support prefixed variations i.e. -webkit
3. graceful degradation for older non-CSS3 browsers by providing a flat colour calculated from first and last gradient definition colour as vast majority of gradients are two coloured
4. provide mixin parameters in the same way as we provide them for actual CSS so without resorting to escaped ~"..." LESS notation
5. all fallbacks for flat colours have to be automatically calculated by the mixin instead of providing it manually

CSS3 cross browser SASS... no, SCSS mixins

I like automation that eliminates human factor of forgetting of doing something. Happens to me just like it most likely happens to you. Especially when we do repetitive things. That's why I've written a few posts that are direct result of me striving for automation. May it be the post about NUnit test project settings in Visual Studio that starts NUnit test runner by simply pressing F5 button or the additional file editor that automatically executes batch (*.bat) files from within Visual Studio. Never mind. This one's related to simplicity, versatility and automation. And CSS3 stylesheets of course.

Actually it's about the extended CSS syntax that we get by writing SCSS stylesheets (similar to LESS, but more on it later on). SCSS used to be called SASS with its own syntax but now uses CSS syntax hence changed its name. I will be using SCSS acronym from now on because that's what my following code example uses. If you've ever used any of these two you'll know the benefits of simplified, easier to handle and more powerful style sheets. I have been flirting with this couple for some time now, but on this last project of mine, my flirting became a serious relationship. I started using SCSS. What I will share with you here are a few common mixins that are usable to any web developer.

Running or debugging NUnit tests from Visual Studio without any extensions

If you write unit tests and use NUnit test framework this may be helpful. I decided to write this simple step by step project configuration because I tend to set it up on every new project but keep forgetting all its details of how to do this. Setting it up is simple and a one-time only process for each test project.

Application model entity localisation in Asp.net MVC

If you are an Asp.net MVC developer and live in non English speaking country, then you've faced the challenge of application localisation. Although frameworks these days support localisation it's usually not a straightforward process. Especially when it comes to web applications. There's always a dilemma how to implement localisation and how to choose request locale. Should it follow browser language settings or user preference? Either way there's an underlying base foundation that can be used to implement each.

This post is not about localisation in general but rather just about application model classes and their property names localisation when presented in Asp.net MVC views by means of Html.LabelFor() extension methods. There already is a class DisplayNameAttribute but it lacks capabilities we need.

This blog post is related to .net framework 3.5 and older because there's a new attribute provided by the .net framework 4 and newer. It's called DisplayAttribute which has even more capabilities than those implemented below.

jQuery UI slider extension that enhances range capabilities

I'm going to provide you with the code that makes it possible to set bounds to range slider handles (minimum and maximum) and some more sugar along with it.

I needed to create a range slider that is a bit smarter than the one provided by jQuery UI library that only allows to set minimum and maximum values for the whole slider, but I needed to set a few things more. I had to provide a range slider that would allow users to select time range between midnight and midday the next day (36 hours all together). These were my requirements:

• Lower handle can only move to midnight the next day (so it can move between 00:00 and 1d 00:00) - this simply means that time range must start today
• Selected range must be at least 1 hour wide
• Selected range can't be wider than 24 hours all together

These were my requirements and although I like jQuery UI plugins/widgets and even though it comes with a slider it doesn't work as expected. I could of course put it all in my slide handler, but tha wouldn't be reusable and it would also not allow me to do some additional things I implemented along. Want to know which ones?

BLToolkit MapResultSet builder

or How I refactored my seemingly identical methods with generic type parameters

As I've written in the past I'm using BLToolkit lightweight ORM on one of my projects. But some parts of it seem very silly actually and I can't really see why did they decide to do certain parts the way that they did. One of them being the configuration for multiple result sets. You know those where you write TSQL query that returns more than one result. BLToolkit has this nice DbManager mapping method called ExecuteResultSet() that takes an array of MapResultSet objects. And these you have to prepare yourself first so mapper will actually populate your object lists. Their example looks like this (just the relevant code):

   1:  List<Parent> parents = new List<Parent>();

   2:  MapResultSet[] sets = new MapResultSet[3];

   3:   

   4:  sets[0] = new MapResultSet(typeof(Parent), parents);

   5:  sets[1] = new MapResultSet(typeof(Child));

   6:  sets[2] = new MapResultSet(typeof(Grandchild));

   7:  // and so on and so forth for each result set

   8:   

   9:  using (DbManager db = new DbManager())

  10:  {

  11:      db

  12:          .SetCommand(TestQuery)

  13:          .ExecuteResultSet(sets);

  14:  }

As you can see you have to create an array of MapResultSet objects of the correct size (using a magic value - and you know I don't like them) and then set an instance to each (again using magic values). Seems tedious? I thought so as well. Hence I've done it differently.

Cross browser headers with vertical rotated text

You've probably come across the problem of displaying these kind of tables:

• many columns
• header column at the top
• content cells display narrow data - flags (yes/no, true/false, y/n, on/off, finite states like yes/no/maybe etc.) or just icons that denote some sort of state as in feature list tables where each cell displays either a check-mark or nothing or green and empty cirles or similar...
• header cells contain much wider data than content cells - more words that take much valuable horizontal space

If you had to display these kind of tables you've probably been thinking how could you make header cells narrower but not clip their content so headers still make sense... The idea is to display header cells as tall cells with vertically displayed text so columns can stay narrow as their content cells need. This way our tables get horizontally usable and don't take much space. It's true that header row becomes higher (depending on the amount fo text that you'd like to display, but hey there's just one header row in the whole table.

Anyway. So if you did struggle with this and also wanted it to display approximately the same on all three major nowadays browsers than you did spend some time solving it. If you didn't but you think you may in the future, then just use the code I'll provide here and off you go.

Use CSS floats to flow data in columns rather than rows with jQuery .transpose() plugin

I know we have CSS3 multi-column layout that makes HTML content flow in columns dead simple but the problem is that only the most modern browsers (as of July 2011) support this CSS3 capability. As you might have guessed this means tough luck for Internet Explorer users. Microsoft decided that CSS3 column layout is not something developers or better web designers would need so IE still doesn't support it. Not even in version 9 that is.

Even though CSS3 multi-column support got supported recently we have been displaying data in pseudo columns for some time. We either displayed tables when we had tabular data or used CSS floats or CSS inline-blocks when displaying lists and we didn't want the list to be long and narrow which makes it hard to use. The nice thing about floating is that elements take as much horizontal space as they can inside container and when individual items are set a fixed width this means that they will display in column-like layout. The problem is though that floated items run in rows meaning that when you have alphabetic text (or numbers) list items they won't flow in columns as we're used to ie. in phonebooks. No. Items flow in rows. This makes these kind of lists hard to read and search through. But I have a solution for you. jQuery plugin that re-arranges your items into columns to improve their usability.

Removing route values from links/URLs in Asp.net MVC

I didn't really know how to properly title this post to make it easily searchable by those who bump into routing-related issue. Words like arbitrary, ambient, unwanted, unneeded, extra, unrelated etc route values popped into my mind, but I decided to title it as it is now.

One of the main pillars of Asp.net MVC is routing. Many applications can just use default route definition to cover all their scenarios but some applications require it to be a bit more complex. Look at this example:

   1:  routes.MapRoute(

   2:      "CustomerSpecific",

   3:      "Customers/{customerId}/{controller}/{action}/{id}"

   4:      new { controller = "Customers", action = "Index", id = UrlParameter.Optional },

   5:      new { customerId = @"\d+" }

   6:  );

   7:   

   8:  routes.MapRoute(

   9:      "Default",

  10:      "{controller}/{action}/{id}",

  11:      new { controller = "Home", action = "Index", id = UrlParameter.Optional }

  12:  );

Seems fine? Well it does and it works, but you will have problems when you'll be anywhere in http://www.domain.com/Customers/n/... and would like to also generate links to parts of your application that are covered by default route definition (second route). Let me show you why.

Improving Asp.net MVC maintainability and RESTful conformance

I've used Asp.net MVC for a few years now but this issue I've stumbled upon just a few days ago seems something everydayish and I wonder how come I've never bumped into it. It has to do with Asp.net MVC routing and action method selection. First of all think of default route definition that looks like this:

   1:  // default application route

   2:  routes.MapRoute(

   3:      "Default",

   4:      "{controller}/{action}/{id}",

   5:      new { controller = "Home", action = "Index", id = UrlParameter.Optional }

   6:  );

Mind that id route value is optional? Yes optional. So it should be perfectly feasible to have two action methods: one with the id parameter and one without it: public ActionResult Index() { ... } and public ActionResult Index(int id) { ... } But you've probably guessed it? This doesn't work out of the box. You'll get a runtime error stating that there are two matching action methods for the current request. A bit strange? I thought so as well. So let's try and accomplish just that!