I realised that this was because those projects were using the equally useful Combres resource combining library for .Net. Combres uses a number in the url path for caching, and without changing that, any updates to the css file will not be delivered to the browser.

Today I sat down and tweaked the ReCSS bookmarklet so that it checks the url for the /combres.axd path in the urls and changes the number in the url if it is present.

Here is the updated ReCSS bookmarklet. Enjoy.

The problem is that when you combine two or more website projects into a single role, the azure project still only compiles the primary website within the project. The other projects seem to just be copied from the location specified physicalDirectory attribute and included in the published package. Ensuring those are included in the package during the build process on your TFS Build server is fairly straight forward – you just add them in the ‘Items to Build’ of your build definition (before the cloud project!). However, what that does not do is transform the web.config files of those projects. The build seems to only compile the code and none of the extra tasks.

Discovering this took up two days of investigating – the problem manifested in a strange authentication cookie domain issue because our config transform should have replaced the authentication settings. Once we realised what was happening, fixing it did not take so long.

We add an after build event that transforms the config files in the project files but only if it looks like we are on the build server. Unload the website project in question and edit the .csproj file. Add an AfterBuild target as follows:

<Target Name="AfterBuild">
    <!-- other tasks may already be here -->
    <TransformXml Condition="Exists('$(OutDir)\_PublishedWebsites\$(TargetName)')"
                  Source="Web.config" Transform="$(ProjectConfigTransformFileName)"
                  Destination="$(OutDir)\_PublishedWebsites\$(TargetName)\Web.config" />
</Target>

What this does is run the transforms on the web.config files if the build server _PublishedWebsites directory exists.

The only thing lacking here is the file tidy up – the original config files still remain and are deployed in the package along with other files that are usually removed during the build. This does not effect the website in any way but it would be nice to remove those too. Any suggestions on how would be gratefully received.

This led me to the jQuery UI combox which uses the jQuery UI autocomplete control. This worked very nicely except that it is not a dropdown list that users are most used to seeing. As soon as the new form entered QA, I was pinged with a message saying that it was a bit awkward to use and would probably be difficult for users. I couldn’t disagree with that and this motivated me to try and see if I could make it more like a dropdown list.

After a few hours of head scratching, I am ready to present the first version of my control, which I would say is about 90% faithful to the feel of native control. There are a few things it does not do but I feel I am close enough to release it to the world for criticism.

Try the demo

Here is the code:

(function ($) {
    $.widget("ui.combobox", {
        _create: function () {
            var self = this,
				select = this.element.hide(),
				selected = select.children(":selected"),
				value = selected.val() ? selected.text() : "",
				regSearch = /^[^a-zA-Z0-9]*([a-zA-Z0-9])/i,
				comboData = select.children("option").map(function () {
					if (this.value ) {
						var text = $(this).text(), 
							labelHtml = self.options.label ? self.options.label(this) : text; //allows list customization
 
						return {
							label: labelHtml,
							value: text,
							option: this
						};
					}
				});
 
            var input = this.input = $("<input type='text' />")
					.insertAfter(select)
					.val(value)
					.keydown( function( event ) {
							var keyCode = $.ui.keyCode;
							switch( event.keyCode ) {
								case keyCode.PAGE_UP:
								case keyCode.PAGE_DOWN:
								case keyCode.UP:
								case keyCode.DOWN:
								case keyCode.ENTER:
								case keyCode.NUMPAD_ENTER:
								case keyCode.TAB:
								case keyCode.ESCAPE:
									//let autocomplete handle these
									break;
								default:
									//prevent autocomplete doing anything
									event.stopImmediatePropagation();
									//only react to [a-zA-Z0-9]
									if ((event.keyCode < 91 && event.keyCode > 59)
										|| (event.keyCode < 58 && event.keyCode > 47)) {
 
										var str = String.fromCharCode(event.keyCode).toLowerCase(), currVal = input.val(), opt;
 
										//find all options whose first alpha character matches that pressed
										var matchOpt = select.children().filter(function() {
											var test = regSearch.exec(this.text);
											return (test && test.length == 2 && test[1].toLowerCase() == str);
										});
 
										if (!matchOpt.length ) return false;
 
										//if there is something selected we need to find the next in the list
										if (currVal.length) {
											var test = regSearch.exec(currVal);
											if (test && test.length == 2 && test[1].toLowerCase() == str) {
												//the next one that begins with that letter
												matchOpt.each(function(ix, el) {
													if (el.selected) {
														if ((ix + 1) <= matchOpt.length-1) {
															opt = matchOpt[ix + 1];
														}
														return false;
													}
												});
											}
										} 
 
										//fallback to the first one that begins with that character
										if (!opt)
											opt = matchOpt[0];
 
										//select that item
										opt.selected = true;
										input.val(opt.text);
 
										//if the dropdown is open, find it in the list
										if (input.autocomplete("widget").is(":visible")) {
											input.data("autocomplete").widget().children('li').each(function() {		
												var $li = $(this);
												if ($li.data("item.autocomplete").option == opt) {
													input.data("autocomplete").menu.activate(event,$li);
													return false;
												}
											});
										}
									}
									//ignore all other keystrokes
									return false;
									break;
								}
					  })
					.autocomplete({
					    delay: 0,
					    minLength: 0,
					    source: function (request, response) { response(comboData); },
					    select: function (event, ui) {
					        ui.item.option.selected = true;
					        self._trigger("selected", event, {
					            item: ui.item.option
					        });
					    },
					    change: function (event, ui) {
							if (!ui.item) {					
								var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
									valid = false;
								select.children("option").each(function () {
									if ($(this).text().match(matcher)) {
										this.selected = valid = true;
										return false;
									}
								});
								if (!valid) {
									// remove invalid value, as it didn't match anything
									$(this).val("");
									select.val("");
									input.data("autocomplete").term = "";
									return false;
								}
							}
					    }
					})
					.addClass("ui-widget ui-widget-content ui-corner-left")
					.click(function() { self.button.click(); })
					.bind("autocompleteopen", function(event, ui){
						//find the currently selected item and highlight it in the list
						var opt = select.children(":selected")[0];
						input.data("autocomplete").widget().children('li').each(function() {		
							var $li = $(this);
							if ($li.data("item.autocomplete").option == opt) {
								input.data("autocomplete").menu.activate(event,$li);
								return false;
							}
						});
					});
 
            input.data("autocomplete")._renderItem = function (ul, item) {
                return $("<li></li>")
					.data("item.autocomplete", item)
					.append("<a href='#'>" + item.label + "</a>")
					.appendTo(ul);
            };
 
            this.button = $("<button type='button'>&nbsp;</button>")
					.attr("tabIndex", -1)
					.attr("title", "Show All Items")
					.insertAfter(input)
					.button({
					    icons: {
					        primary: "ui-icon-triangle-1-s"
					    },
					    text: false
					})
					.removeClass("ui-corner-all")
					.addClass("ui-corner-right ui-button-icon")
					.click(function () {
					    // close if already visible
					    if (input.autocomplete("widget").is(":visible")) {
					        input.autocomplete("close");
					        return;
					    }
 
					    // pass empty string as value to search for, displaying all results
					    input.autocomplete("search", "");
					    input.focus();
					});
        },
 
		//allows programmatic selection of combo using the option value
        setValue: function (value) {
            var $input = this.input;
            $("option", this.element).each(function () {
                if ($(this).val() == value) {
                    this.selected = true;
                    $input.val(this.text);
					return false;
                }
            });
        },
 
        destroy: function () {
            this.input.remove();
            this.button.remove();
            this.element.show();
            $.Widget.prototype.destroy.call(this);
        }
    });
})(jQuery);

The particular functions I tried to add are:

• Removal of any standard textbox typing characteristics
• Typing in the textbox jumps to the item begining with that letter
• Hitting the same letter continuously cycles through the items beginning with that letter
• Programatically select an item using the value
• Retain navigation through list via arrow keys/paging
• Opening the list jumps to the selected item

Feel free to take it and use it but I am very keen on any improvements that can be made, so please let me know what you think.

I know that performance is a bit of a problem with large lists but stopping autocomplete from rebuilding the list each time it is displayed is a little tricky and would mean changing more of it’s private functions – something I was hoping to avoid. Suggestions welcome.

*Edit: I totally had my terminology messed up. I was calling my control a combobox which it absolutely isnt. It is a dropdown list, so I have updated the post to reflect that. *places dunce hat on*

1. Open up a git bash and type ‘git fetch’ or…
2. Click on Remotes->manage remote repositories, click on the Default Pull Behaviour tab, click Update all remote branch

Its a little bit hidden away in the Git Extension UI, so thats probably why I have so much of a problem finding it.

It wasn’t long before I began to use the NHibernate Validator framework to provide some validation on my models. Using it is similar to Data Annotation Validators which I had used in another project and I liked the way you could use resource files to provide the error messages the Data Annotation Validators produce.

It seemed to take me ages to figure out the equivalent in the NHibernate Validator framework, as I had to piece it together from several other articles which talked about various customizations that could be done. In the end it turns out that its not very difficult to do at all. Here’s how:

Firstly, when validating your models, you need to point the validation engine to your resource file in the configuration:

//create engine
var engine =  new ValidatorEngine();
 
//configure and add resource file
var configure = new FluentConfiguration();
configure.SetCustomResourceManager("My.Website.Resources.ValidationMessages", Assembly.Load("MyWebsite"));
engine.Configure(configure);
 
//engine configured, now you can validate
var errors = engine.Validate(myentity);

To specifiy which resource value to use, you specify the resource key in the attribute wrapped in curly brackets as follows:

 
public class MyEntity {
 
  [NotNullNotEmpty(Message = "{ResourceKeyWithCurlyBrackets}")]
  public string SomeProperty { get; set; }
 
}

…and thats all there is to it, the text in the resource file should appear in the validation results.

<?php  if (!defined('BASEPATH')) exit('No direct script access allowed');

and end with:

/* End of file MyFile.php */
/* Location: ./path/to/file/MyFile.php */

The line at the start of the file is a security measure to stop files being executed outside the framework, whilst the end is just informative but useful anyhow.

I like to do the same thing with all the files I create for my applications but found the typing tedious and because I use the VS.php in Visual Studio, I decided to write a couple of snippets to do it for me.

If you are not familiar with snippets in Visual Studio or how to get the following xml to work as a snippet, you can read all about then on msdn. Anyhow, without further ado, here they are:

filestart.snippet:

<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <CodeSnippet Format="1.0.0">
    <Header>
      <Title>filestart</Title>
      <Author>Dan Sargeant</Author>
      <Description>CodeIgniter File start to stop direct script access</Description>
      <HelpUrl></HelpUrl>
      <SnippetTypes>
          <SnippetType>Expansion</SnippetType>
	      <SnippetType>SurroundsWith</SnippetType>
	  </SnippetTypes>
      <Shortcut>filestart</Shortcut>
    </Header>
    <Snippet>
      <Code Language="PHP" Kind="" Delimiter="$"><![CDATA[<?php  if (!defined('BASEPATH')) exit('No direct script access allowed');
]]></Code>
    </Snippet>
  </CodeSnippet>
</CodeSnippets>

fileend.snippet:

<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <CodeSnippet Format="1.0.0">
    <Header>
      <Title>fileend</Title>
      <Author>Dan Sargeant</Author>
      <Description>CodeIgniter file ending</Description>
      <Shortcut>fileend</Shortcut>
      <SnippetTypes>
          <SnippetType>Expansion</SnippetType>
	      <SnippetType>SurroundsWith</SnippetType>
	  </SnippetTypes>
    </Header>
    <Snippet>
      <Declarations>
        <Literal>
          <ID>filename</ID>
          <ToolTip>Filename</ToolTip>
          <Default>myfile.php</Default>
        </Literal>
        <Literal>
          <ID>directory</ID>
          <ToolTip>Directory</ToolTip>
          <Default>models</Default>
		  </Literal>
      </Declarations>
      <Code Language="PHP"><![CDATA[
/* End of file $filename$*/
/* Location: ./application/$directory$/$filename$*/]]></Code>
    </Snippet>
  </CodeSnippet>
</CodeSnippets>

The key to it is the use of the windows port of ffmpeg. It can convert just about anything to anything. However, it is a command line tool and converts one file at a time which means a lot of typing if you want to convert an entire album. I spent a little time the other day figuring out a small batch file that can be used to convert and entire albumn in on go. I thought I’d share it with you. Just create a file called say, convert.bat and place one of the following in it:

For Monkey’s Audio APE files:

for /f "tokens=*" %%a IN ('dir /b *.ape') do call ffmpeg -i "%%~na%%~xa" -acodec alac "%%~na.m4a"

For FLAC files:

for /f "tokens=*" %%a IN ('dir /b *.flac') do call ffmpeg -i "%%~na%%~xa" -acodec alac "%%~na.m4a"

Then all you have to do is place your batch file, along with ffmpeg.exe into the directory that contains the files you want to convert and run the batch file. It will convert every file in the directory to apple lossless. Easy.

After exhausting all the free options, I made the shift to the commercial tool Beyond Compare 3 a few weeks ago and have not looked back since. So far, it has been awesome. Slick, easy to understand the differences and the pro version even does the three way merging needed for git.

I spend most of my development time, be it C#, VB, PHP or Javascript in the visual studio environment and so when I use git for source control, git extensions is essential. Making both git extensions and Beyond Compare work together is a little bit of trail and error as the very informative source control support page only covers configuring git via the bash. So to save myself the brain ache again and perhaps to help others, I jot these settings down:

Under Global Settings:

Merge tool: BCompare
Path to mergetool: C:/Path/To/BComp.exe
Mergetool command: “C:/Path/To/BComp.exe” “$LOCAL” “$REMOTE” “$BASE” “$MERGED”

Diff tool: BCompare
Path to difftool: C:/Path/To/BComp.exe
Difftool command: “C:/Path/To/BComp.exe” “$LOCAL” “$REMOTE”

Make sure you dont override the tool in the local settings or if you want to set it to BCompare.

I stepped through the code and discovered that I was using the set_value() function to retrieve the value posted from the form. This is a no-go I’m afraid. set_value is supposed to be used to set the values of inputs and textareas in forms within the view itself and as such runs the htmlspecialchars function across the form post value before returning it. There is a function specifically designed for what I wanted: $this->input-post(fieldname). Lesson learned.

The shift from SVN to Git was surprisingly easier than I expected. I remember SVN being a little frustrating to get going when I first started with that and was expecting a similar experience, especially when I was trying to shift a couple of in-progress projects from one to the other. What I did find however, is that the guides out there, although pretty good, did not quite match what I wanted to do. I thought I would jot it down so I don’t forget when I need to go it again. Its all done by logging into your server using putty or whatever your ssh client is. Lets jump straight in:

Git is installed on the (gs) so we can get straight into it. Firstly create a directly where you would like to keep your repositories:

mkdir /home/#####/data/git

Next create a temporary directory to store the git-svn export of your svn repository:

mkdir /home/#####/data/git/myapp_tmp

Next, create a text file (users.txt) to map your svn users to you git users. It should contain something like:

mysvnuser1 = Git User1 <gituser1@mysite.com>
mysvnuser2 = Git User2  <gituser2@mysite.com>

I saved mine to the /home/#####/data/git/ directory.

Next we initialise our git repository, ready to import the svn repository:

git-svn init file:///path/to/svnrepo/myapp/trunk/ --no-metadata

Note that I use the file:// notation to specify a local path to where my svn repository is kept. In my case it was /home/#####/data/svnrepo/ but it depends on how you set yours up. The no-metadata flag just ensures that only the information we need is transferred. We then need to setup our user mapping file:

git config svn.authorsfile /home/#####/data/git/users.txt

Now for the money shot, we import the data from svn:

git-svn fetch

All going well, your svn repository and all the history should have been imported into your git repository.

The final steps are done in order to tidy up your new git repository so that it is just a standard git repository, without all the svn associations. We remove the svn assocations by cloning it:

git clone myapp_tmp myapp.git

This gives you a myapp.git directory with the actual repository (everything in the .git directory) as well as your working files. As this is on the server, you do not need all the working files, just everything in the .git directory. We can fix that as follows:

cd myapp.git
mv .git .. && rm -fr *
mv ../.git .
mv .git/* .
rmdir .git
git config --bool core.bare true

Most of those commands just move everything out of the .git directory and remove the working files. The final command however marks the repository as a bare repository, i.e. one without the working files.

Thats it. You should now have a git repository on your server that you can clone to your development machine and begin work.