Umbraco SurfaceController – Navigation

Currently, I work a lot with Umbraco. I am loving it a lot for a lot of good things (flexibility, possibility to go hard-core, good user experience, wonderful community). One part I was not 100% fond of is the macros part. Although macros (I mostly use MVC macros) are great in many respects, they quickly result in overcomplicated pieces of code with a very unhealthy mix of html and C# code.

One of those overcomplicating macros in my situation is the menu macro. Therefore, when the SurfaceController was ported from Umbraco 5 to Umbraco 4.10 (and above) I decided to rebuild my menu and breadcrumbs macros into a new navigation surface controller (called, how surprising, NavigationSurfaceController).

In this blog post, I will try to highlight some parts of the surface controller when I have some spare time to do so.

In the mean time, or when you are simply looking for all the code, feel free to download the source code zip. Don’t expect a working solution, just copy the files in your own solution (Umbraco extensions dll or even the main project) and start enjoying ;) . I would love to get feedback!

Happy coding!

Asynchronous JQuery loading using yepnope – almost there, but with quirks…

Today I stumpled upon a problem I was not (entirely) able to solve. I wanted to use the Javascript code printed below to load JQuery code asynchronously (using yepnope).

<script src="/scripts/modernizr-2.6.2.min.js" type="text/javascript"></script>
<script src="/scripts/yepnope.1.5.4-min.js" type="text/javascript"></script>
<script type="text/javascript">
	var docready = [], $ = function () { return { ready: function (fn) { docready.push(fn); } }; };
	yepnope({
		load: '//ajax.googleapis<em><strong>OFFLINE</strong></em>.com/ajax/libs/jquery/1.8.2/jquery.min.js',
		complete: function () {
			if (!window.jQuery) {
				yepnope({ load: '/scripts/jquery-1.8.2.min.js', complete: initJQuery });
			} else {
				initJQuery();
			}
		}
	});

	function initJQuery() {
		$ = window.jQuery;
		for (var index in docready) $(document).ready(docready[index]);
	}
</script>

The code works almost perfectly. The JQuery library is loaded from the Google CDN as requested, and when that one is not available, it falls back to local script loading. While the JQuery library is not yet loaded, I hold all calls to $(document).ready() to fire them when JQuery is loaded entirely. This works! However, I discovered that JQuery plugins do not work with this code, as they require the JQuery or $ object.

I know I should use the initJQuery function for plugin loading based on JQuery, but since some plugins get inserted by ASP.NET partial views or Rejuicer, this is not possible. Currently, I stick with late loaded synchronous JQuery plugin loading while still holding $(document).ready calls for later (guaranteed) execution. I am curious about your solutions though ;) .

PS. Ow, currently, the piece of code I use for now, is:

// in head:
<script type="text/javascript">var docready = [], $ = function () { return { ready: function(fn) { docready.push(fn); } }; };</script>

// just before </body> tag:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">window.jQuery || document.write('<script src="/scripts/jquery-1.8.2.min.js" type="text/javascript"><\/script>')</script>
<script type="text/javascript">
    // fire all preliminary $(document).ready(fn) calls immediately after jquery is loaded.
    $ = jQuery;
    for (n in docready) $(document).ready(docready[n]);
</script>

Self closing iframe tag fails Javascript execution

On a project I am currently working on, I have to use an iframe. Since I included the iframe in my web application, the Javascript code beneath it stopped working immediately. I did not see the problem at first and had a tough time finding out the iframe caused the problem. As it were, I used a self-closing iframe. The solution to the problem was to add a closing iframe tag instead of using a self-closing iframe… Simple solution, but I assume more people will face this problem as I did ;) .

Happy coding!

Deploying a website to Azure using Git results in error 501 on refs? The solution…

Currently, I am playing with the new Windows Azure Web Sites feature. Although the free version lacks custom host names support (which is promised to be possible in the future by Scott Guthrie), it is a pleasure to work with. I am currently working on a small website, based on WordPress. The development version is currently hosted on Azure using this manual: https://www.windowsazure.com/en-us/develop/php/tutorials/website-w-mysql-and-git/.

When deploying one of my PHP websites to Windows Azure today using Git (git push azure master), I stumbled upon an error.

It said something about refs not being implemented. I still don’t know what was wrong, but executing git pull azure master did the trick for me. The result of this operation? Already up-to-date (as expected). After pulling, I was able to execute a successful git push azure master call

Happy coding!