Autogrow textarea Angular directive with vertically centered text

This post is about emulating input[text] with a textarea element to create a text wrapping input that adjusts its height to the amount of content it holds. A working example can be found on Plunker.

When was the last time you asked yourself about input[text] element's user experience and usability? Well in normal situation (that is likely 90% of the time) this element works great but in the remaining cases it may not be ideal. Whenever you need your users to enter long(er) one-liners input[text] may not be your best option as it can't wrap text so part of it outside element's boundaries is being hidden. If nothing else, it's distracting to users.

You mainly have two options here each with its ups and downs:

• textarea element - very similar to input[text] as it allows entering unformatted text that can wrap as many lines as its length requires; it has some styling problems though (I'll explain that in a bit) and also allows entering multiple lines of text which may be undesirable but easy to handle/prevent
• content editable div element - it can easily be styled to look exactly like input[text] and it also wraps long lines of text (normally) just like textarea; the main problem is controlling its behaviour to prevent text formatting in a cross browser way

Of the two options the first one seems simpler so let's implement it.

Angular ngRoute routing authorization with asychronous promises

AngularJS routing doesn't support route authorization out of the box and nor does its popular cousin ui-router even though the latter supports state change cancellation with later continuation (using $urlRouter.sync(); check documentation). But in non-trivial Angular SPAs this feature is regularly needed. So I went off implementing it.

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?

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!

Custom Asp.net MVC route class with catch-all segment anywhere in the URL

Asp.net MVC routing does a fine job with routes that have a finite number of segments. We define them with route URL pattern string. The default provided by the Asp.net MVC project template being {controller}/{action}/{id}. Most web applications can do everything using only this single route definition and many developers don't even think beyond this standard. But sometimes this single route just isn't enough or it's just not acceptable.

A real world example

Think of a web site you're building that has hierarchically organised categories. Like Amazon. We have books, music, electronics, etc. And every top category has sub categories. And so on and so forth. Using default route definition we would access a particular (sub)category simply by: www.domain.com/categories/index/647 That's fine, but it's definitely not human friendly. If we'd change our route URL definition to {controller}/{action}/{id}/{name} this would already be much friendlier: www.domain.com/categories/index/647/web-development That's something similar (not the same, because we're still using action names here) to what Stackoverflow does with it's questions.

But now think of this super human readable web address: www.domain.com/books/computer-internet/web-development/latest This one would display latest web development books. As we can see it defines categories in hierarchical order similar to breadcrumbs. All in human readable format. Doing this kind of routing isn't supported out of the box (because we have an action at the end), but I think we could do better. Let's try and create a route that supports this.

jQuery parseJSON automatic date conversion for Asp.net and ISO date strings

This one's quite common. You asynchronously communicate (a.k.a. Ajax) with your server and get JSON data in return. You most probably use $.parseJSON() on the client side which actually parses JSON string and returns an object. We've all used that. But (yes, there's always a but) there's a catch. There's no defined standard for date serialization, so jQuery will not parse your dates back to dates. What the heck even native JSON parser (these days supported in all major browsers) won't do that. So you have to do it yourself. Manually. Or, modify default jQuery functionality a bit and get it done automatically.

Custom action method selector attributes in Asp.net MVC

Some of the least customized but very useful extension points in Asp.net MVC are action method selector attributes. We use them all the time without actually knowing, but we may write our own as well and make seemingly complex things trivial.

A real world example

Take for instance Twitter website. When you first visit their site, you are presented with the anonymous visitor home page that provides search capabilities, trends etc.

But when you're logged in you see a completely different page. Web address is still the same, but content is completely different. You see your home twitter page where you can send tweets and read your stream.

Using custom action method selector attributes, you can easily differentiate between such requests without using multifaceted controller actions.