Nice Urls - Slugs

By default ASP.NET MVC comes with urls like the following: /products/details/256. I find this already some kind of improvement over the normal web forms urls with aspx filename in the end but having numbers in the url is not really fashionable and SEO compatible. So while refactoring my app I thought that I will also make some fashionable and beautiful urls using so called slug. A slug is url compatible (no special characters, no spaces) string that is generated usually from the title of the item. So with slugs you can have url like /products/details/back-pack. It is not at all so hard to generate slugs. So you need an extra colums in the database table and on creation you generate the slug than you just need a GetBySlug instead of GetById and it is all working. If you are like me and have started out with ids and then change for slugs and want to keep also the "old" urls working the best is to have a GetByIdorSlug that tries to parse the third part of the url, and if it is an int it gets by id otherwise by slug, and that way old and new urls will work. :) Ok enough talking. I get to the point. Here is the code how to generate slug:

 public static string RemoveDiacritics(string stIn)
        {
            string stFormD = stIn.Normalize(NormalizationForm.FormD);
            StringBuilder sb = new StringBuilder();

            for (int ich = 0; ich < stFormD.Length; ich++)
            {
                UnicodeCategory uc = CharUnicodeInfo.GetUnicodeCategory(stFormD[ich]);
                if (uc != UnicodeCategory.NonSpacingMark)
                {
                    sb.Append(stFormD[ich]);
                }
            }

            return (sb.ToString().Normalize(NormalizationForm.FormC));
        }

        public static string CreateSlug(string stIn) { 

            string slug = stIn.ToLower();
            slug = RemoveDiacritics(slug);

             // Replace unwanted characters with space
             slug = Regex.Replace(slug, @"[^a-z0-9\s-]", " ");
             // Replace multple white spaces with single space
             slug = Regex.Replace(slug, @"\s+", " ").Trim();
             // Replace white space with -
             slug = slug.Replace(" ", "-");
 
             return slug;
        }

Things I wish I knew about how to create an ASP.NET MVC app....

I have a website I am doing as a hobby, and it is an ASP.NET MVC web application. I have started to write the code in March and I have launched the site in July so it is not very small not very large either, it is a normal size web app. :) I am full of plans though what new features to implement and even since July I have done already three new versions so the app is getting bigger and bigger. It has now reached a point that I have started to feel that the application is not well written enough to be maintainable in the long run so I have decided to refactor the whole backend. Here is a list of things I wish I knew when I started the app:

• In many sample databases and apps (at least in the ones I have seen before starting to do my app) the naming convention for the db table id is TableNameID (ProductID, OrderID...). This naming convention is a piece of crap. It is much better to call all ids just simply Id, and then you can make an interface IHasId and have nice methods that handle objects that implement IHasId. And I tell you to rename table ids is really painful though it is not impossible....
• LINQ to SQL was basically replaced by Entity Framework, and EF is developed by Microsoft while LINQ to SQL is just in maintenance mode... So if you can switch. I have switched....
• Dependency Injection is nice and it is nice to use an IoC container. If you want to understand what is this whole stuff I suggest this great presentation from Brand Wilson. I am using now Ninject.
• A Service layer is great to have. When I have started to do the app I have thought that only large apps need service layer and anyway I have a simple web app, no business logic. But it turns out there is always some business logic and service layer is good also in not so large apps...
• There is a great starter ASP.NET MVC app made by Rob Conery on codeplex. It is nice to download it and study it a bit and lean form it. The generic CRUD repository that is usable for all enities is especially great. Before I had All, Single, Add and stuff like that for all my entities separately, and this starter app taught me how to have just one generic. :) I love if I can delete code from my app and make my app cleaner with less lines of code. :)
• Never trust yourself or EF or LINQ to SQL and always check what gets actually executed on the database. I think that these abstractions and writing queries in C# and using navigation properties is great but you can find yourself very very easily doing very ineffective things on the database level (like select N+1, really ineffective queries with tons of joins....). Always monitor what is going on in the database and entity framework profiler is a great tool for that.

GIT branching and merging

Further useful git things about branching and merging: To list your existing branches:


$git branch


To check out visually what your branches are doing:


$gitk


To create a branch:


$git branch newbranchname


To change to a certain branch:


$git checkout branchname


To merge the changes made in the branch "branchname" into the current branch:


$git merge branchname


After merging the branch is not deleted automatically. To delete it:


$git branch -d branchname


To undo a merge:


$ git reset --hard HEAD


Merge branch obsolete into the current branch, using ours merge strategy:


$ git merge -s ours obsolete

Take out of source control some directories:

$ git rm -r --cached Somefolder/bin

An untraditional case with jquery autocomplete plugin

In my hobby project I have been using the jquery autocomplete pugin so far in several situations and I love it. It has so far fulfilled all my requirements, about every wish I had it turned out that there is an option to do that (e.g. multiple results, formatting, caching....). I know this plugin is not any more maintained but the new official jquery ui autocomplete is just so dumb compared to this one so I have decided to wait with the migration and continue to use this one (hopefully with time the jquery ui autocomplete will also get smarter....). So this hapiness was all true until today when I wanted to implement the following:

As the screenshot shows I wanted to have a small form with three inputs. In the third input I wanted to have an autocomplete that gives back the suggestions not only based on the prefix but based on the value of the first two inputs. So far this was no problem for the autocomplete: there is an option called extraParams that can be used for that. However I wanted to give back the suggestions as soon as the user clicks into the third input because I can restrict the possible values quite a lot already based on the selection in the first two fields. So triggering autocomplete on focus was my wish and this time my favorite plugin has let me down. There is a search() function that looked promising, so my first try was the following:

$("input#creme").focus(function(){
   $(this).search();
});

And indeed it does trigger a get request from the server however the ui was nowhere. :( My second try was something like this:

$("input#creme").focus(function(){
   $(this).trigger("keydown.autocomplete");
});

This one has not event sent a request to the server. It has done just nothing, and I do not know why. So after being sad the only hacky solution that has helped was that I have actually opened up the source code of the plugin and hacked into it so that with search I can trigger the autocomplete. I had to change just one line: in the search handler function I have replaced

request(value, findValueCallback, findValueCallback);

with

request(value, receiveData, hideResultsNow);

and this has actually helped. As I am not using search anywhere else, it is just ok for me now. However you will have to find out something smarter if you use search() according to its intended purpose. To get a perfect solution I just had to do one more thing: if the user changes the value in either of the first two inputs then the autocomplete cache has to be flushed.

$("input#brand").focus(function() {
   $("input#creme").flushCache();
});

I am flushing the cache already on focus. I am not good with javascript, but if you are here I guess you have already found that out. :) (I am planning to learn it though! :))

Setting up GIT

I have an ASP.NET MVC hobby project I am doing on my own but still a source control system is useful. After looking around I have choosen GIT. I have used already CVS, SVN, VSS, TFS and perforce but I have read good things about GIT, so I have thought that I might as well try it out. Well, I have never set up a source control system and I am not a linux guru either so I have pretty much spent my whole day with this (but as usual it is 10 minutes if you know how to do it). My setup is the following: I want to have a git remote repositry on a Linux desktop and I am developing on a Windows laptop. So for this scenario to set up, you kind of have to do the following: On the linux machine:

• Install GIT (it is written here how, but if you are so dumb with Linux as I am then I tell you that "su" is the command to become root)

• Create a directory where you want to have your repositry.

  mkdir gitrep

• Add write and execute writes recursively for everyone.

  chmod -R 777 gitrep

• Initialize the git bare repository

  git init --bare

• In your git repository in the .git fodler open up description file and give the repository a description (for me the push has failed without this, I do not know why....)

On the Windows machine do the following:

• Install git there as well (it is written here how)
• Go to the directory where your project is in Windows Explorer and right click and say GIT bash here. From now on everyting goes into git bash. So type in:

  git init

• Add your project

  git add .

• Commit your project

  git commit -m "Initial commit"

• Set up a remote: as far as I understand a remote is a git repository that is not your current repository. You can use a file share or like me connect to the remote repository via ssh (there are of course other options too....).It is a convention to call the remote origin.

  git remote add origin ssh://user@ipaddress/~/gitreponame

• So now everything is set up, let us push:

  git push origin master

• To test out that my thing is really in the remote repository I have quickly created a new folder with git init and added the same remote. Then I have said:

  git pull . remotes/origin/master

• And yes everything was there copied. :)