James Jackson-South

Fun with UmbracoVirtualNodeRouteHandler

Wed, 13 May 2015 05:37:56 Z

This morning I answered a question on Our Umbraco regarding the best approach to provide a url allowing deep links for virtual nodes in Umbraco. In my answer I demonstrated how to use UmbracoVirtualNodeRouteHandler as a means of telling Umbraco what node to pass as my RenderModel.

Shannon talks about the UmbracoVirtualNodeRouteHandler with custom routing on his blog

I thought I'd expand on some of the functionality available to the developer by documenting a trick I use with implementations of UmbracoVirtualNodeRouteHandler to provide custom routing.

Use Case

Quite often I find myself reusing a single document type with multiple templates; I'm sure you have also. Most commonly a LoginRegisterPage or similar.

Now I don't know about you but one of the things I miss when using Umbraco is the ability to use Url.Action to generate urls for my content. I like routing in MVC and I think it's important, especially with the type of page as above to be able to generate the correct urls from within your views or controllers.

To understand what I am going to do here you first need to understand how routing works in Umbraco.

If you have the DocumentType LoginRegisterPage with the assigned template LoginPage this will map to a RenderMvcController called LoginRegisterPageController with an ActionResult LoginPage. This behaviour is standardised and predictable so we can utilise it.

DocumentType == Controller
Template == ActionResult

Example

So let's start by creating some routes.

// Custom routing for the membership pages so we can use
// proper redirects. 
RouteTable.Routes.MapUmbracoRoute(
"LoginPage",
"Login/",
new
{
    controller = "LoginRegisterPage",
    action = "LoginPage"
},
new LoginRegisterPageNodeRouteHandler());

RouteTable.Routes.MapUmbracoRoute(
"RegisterPage",
"Register/",
new
{
    controller = "LoginRegisterPage",
    action = "RegisterPage"
},
new LoginRegisterPageNodeRouteHandler());

Here I have created two routes that map to the relative urls /Login and /Register. They both map to the same controller but since two different templates are used it will map to two different ActionResult methods.

Note: I didn't use the word "virtual" in my handler names since I am mapping to actual nodes.

From here I will create a class that takes advantage of the predictability.

/// <summary>
/// An Umbraco route handler that allows the retrieval of the template alias name from the route action. 
/// </summary>
public abstract class TemplatedUmbracoVirtualNodeRouteHandler : UmbracoVirtualNodeRouteHandler
{
    /// <summary>
    /// Get the template from the current route.
    /// </summary>
    /// <param name="requestContext">
    /// The <see cref="RequestContext"/> containing information about the current HTTP request and route. 
    /// </param>
    /// <returns>
    /// The <see cref="string"/> representing the template alias.
    /// </returns>
    protected virtual string GetTemplateAlias(RequestContext requestContext)
    {
        return requestContext.RouteData.GetRequiredString("action");
    }
}

This class adds an additional method GetTemplateAlias to our handler pulling in the RouteData action variable which we know matches the template name of the node we want in the content tree.

And from here we can implement this our handler.

/// <summary>
/// The generic login/register page node route handler.
/// </summary>
public class LoginRegisterPageNodeRouteHandler : TemplatedUmbracoVirtualNodeRouteHandler
{
    /// <summary>
    /// returns the <see cref="IPublishedContent"/> associated with the route.
    /// </summary>
    /// <param name="requestContext">
    /// The request context.
    /// </param>
    /// <param name="umbracoContext">
    /// The umbraco context.
    /// </param>
    /// <returns>
    /// The <see cref="IPublishedContent"/>.
    /// </returns>
    protected override IPublishedContent FindContent(RequestContext requestContext, UmbracoContext umbracoContext)
    {
        UmbracoHelper helper = new UmbracoHelper(umbracoContext);
        string alias = typeof(LoginRegisterPage).Name;
        string templateAlias = this.GetTemplateAlias(requestContext);

        return helper.TypedContentAtRoot()
            .First()
            .Descendants()
            .First(d => d.DocumentTypeAlias.InvariantEquals(alias)
                     && d.GetTemplateAlias().InvariantEquals(templateAlias));
    }
}

Note: I use Ditto to create strong-typed models for my back office content. It's ace, you should give it a go!

If you look at the code in my handler you will see that I am searching the content for nodes that match both the name and template of the one I want.

It's as simple as that really... I can now use Url.Action("LoginPage", "LoginRegisterPage") and Url.Action("RegisterPage", "LoginRegisterPage") throughout my code to provide the correct urls to my respective pages priding me with functionality I sorely missed.

Experiments with Umbraco's IContentService

Wed, 25 Mar 2015 10:59:31 Z

I haven't had very much experience with the Umbraco ContentService. I've only just started playing around with it so if I've missed something obvious please tell me in the comments.

A Confusing API

Reading through the documentation, it seems a shade basic considering the importance of the subject matter and really doesn't go out of it's way to explain what to do and what will happen.

When saving an item using the content service, the methods signature for the first overload available for setting a property value is as follows.

IContentBase.SetValue(string propertyAlias, object value);

According to the documentation you should be able to set different types as the second argument. At time of writing they give the following example:

// Given a `ContentService` object get Content by its Id, set a few values
// and saves the Content through the `ContentService`
var content = contentService.GetById(1234);
content.SetValue("bodyText", "This text will be added to by RTE field");
content.SetValue("date", DateTime.Now);
contentService.Save(content);

Note the DateTime.Now instance there. Unfortunately support for the different types seems extremely limited. Passing a float causes the following exception.

The best overloaded method match for 'Umbraco.Core.Models.ContentBase.SetPropertyValue(string, string)' has some invalid arguments.

Yowza! That really doesn't give a great developer experience.

Magic Strings

Not much in Umbraco when dealing with content is strong-typed. If I were to hazard a guess as to why, ~~I would imagine it was because the code tooling to do some of the conversion functionality we can now was not available when the API's were designed.~~ (Update Turns out it was just a design decision). I have, however, felt the distinct impression at times through conversation that strong-typing is not wanted in certain areas.

I'm doing my best to provide it to developers when dealing with the cached IPublishedContent methods by contributing to Ditto. Content services, however, are not part of the scope for that project so having spent so much time developing with Umbraco in a strong-typed manner, coming across them here was a bit of a shock.

Let's look at that method again.

IContentBase.SetValue(string propertyAlias, object value);

The first parameter accepts a string. Now I don't know about you but the most common use case I would imagine for the method would be uploading a form or importing content through another service.

That form or service would contain classes with properties and using the API in this format would require the developer to insert magic strings for every property or use reflection to loop through with the property info name manipulating them for each instance.

Not code I want to write...

Expression Trees to the Rescue!

I wanted a way that I could call the method in the following format and not have to write those pesky strings:

IContentBase.SetValue(() => Class.Property);

In order to do that I will need to create an extension method that uses an Expression Tree. This is done by creating a Lambda Expression to represent the property.

Once inside our method we check to see whether, a property is being passed, and if so, coerce the various property values to call the old method with sanitized values.

/// <summary>
/// Sets the value of an <see cref="IContentBase"/> property to the given value.
/// </summary>
/// <param name="contentBase">
/// The <see cref="IContentBase"/>.
/// </param>
/// <param name="propertyLambda">
/// The <see cref="Expression"/> designating the value to save.
/// </param>
/// <typeparam name="T">
/// The <see cref="Type"/> of the property value.
/// </typeparam>
/// <exception cref="ArgumentException">
/// Thrown if the given <see cref="Expression"/> is not in the correct form.
/// </exception>
public static void SetValue<T>(this IContentBase contentBase, Expression<Func<T>> propertyLambda)
{
    MemberExpression expression = propertyLambda.Body as MemberExpression;

    if (expression == null)
    {
        throw new ArgumentException("You must pass a lambda of the form: '() => Class.Property' or '() => object.Property'");
    }

    PropertyInfo property = expression.Member as PropertyInfo;
    if (property != null)
    {
        MemberExpression member = (MemberExpression)expression.Expression;
        ConstantExpression constant = (ConstantExpression)member.Expression;
        object fieldInfoValue = ((FieldInfo)member.Member).GetValue(constant.Value);
        object value = property.GetValue(fieldInfoValue, null);
        string name = property.Name.ToSafeAlias(true);
        contentBase.SetValue(name, value.ToString());
    }
}

It's basic and doesn't take into account type conversion to and from strings, nor existing supported types but it's certainly a step in the right direction and better than what was there before.

Obviously, also, there is a an element of assumption in that technique in that we cannot predict what the alias will be and can only go on the most likely name based on the property. Personally though I don't believe the alias should be human editable and should be abstracted away with greater convention. That allows greater predictability and better quality code.

I would like to see more API signatures in Umbraco like the example I have created and would be more than happy to help try to tighten up the various APIs for the next major version.

Let me know what you think.

Cruncher v3

Sun, 30 Nov 2014 03:17:44 Z

No More `Ctrl-F5`

Last night at a ridiculous hour I released the latest version of my asset preprocessor for .NET

Cruncher is a cool bit of kit. It makes optimizing your resources easy. It can bundle unlimited combinations of remote and local CSS, Less, Sass, JavaScript, and CoffeeScript files. Like really... Mix and match them anyway you like and Cruncher will preprocess them accordingly and produce links to the processed output.

Cruncher can handle nested CSS @import statements, re-maps relative resource urls and has a self cleaning cache should any changes be made to any of the referenced files. It can also parse CSS and add vendor prefixes to rules by Can I Use using AutoPrefixer.

You can, and most definitely should get it here

How it works

When processing a collection of inputs, Cruncher will identify the content type and apply the correct preprocessor to the input converting it to CSS or JavaScript accordingly. CSS files are then passed through an AutoPrefixer postprocessor if it is enabled (By default it is). It will then, if you are running in release mode minify the output using the Microsoft Ajax Minifier

Finally links are produced in the page as follows.

<link rel="stylesheet" href="/assets-cruncher/-1287271604.css">
<script type="text/javascript" src="/assets-cruncher/-1661000378.js"></script>

Where the name is the hash of the combined output. This allows the native static file handler to take over which is great for performance (though all this activity is also heavily cached both in the browser and the server). If any changes are detected by file monitors for each file and imported files then the number will change which forces the browser to request the updated output. That allows instant propagation of changes made to the input files. No More Ctrl-F5!

Usage

It really couldn't be easier. Simply add @using Cruncher to your view and use the following methods to add resources. This all works in webforms syntax also.

// Default.
@CruncherBundler.RenderCSS("style.css", "style.less", "style.scss")

// Render the link wth a media query.
@CruncherBundler.RenderCSS(new HtmlString("media=\"(max-width: 800px)\""), "style.css", "style.less", "style.scss")

// Default.
@CruncherBundler.RenderJavaScript("jquery-2.1.1", "test.coffee", "test.js")

// Render the script with the 'async' boolean enabled.
@CruncherBundler.RenderJavaScript(JavaScriptLoadBehaviour.Async, "jquery-2.1.1", "test.coffee", "test.js")

// Render the script with the 'defer' boolean enabled.
@CruncherBundler.RenderJavaScript(JavaScriptLoadBehaviour.Defer, "jquery-2.1.1", "test.coffee", "test.js")

There's a great writeup of the async and defer attributes here

Feel free to have a good look through the sourcecode. It's all, as ever, open source under the Apache 2.0 license and contributions are most welcome.

Thanks

I'd very much like to thank both Alain (I'm so sorry I have forgotten your surname) for providing some simply awesome ideas and code and Jeroen Breuer for reporting bugs and providing me with projects to tests against for this release. You both got me revisiting code I'd long forgotten about and didn't realise anyone was using.

On Why I built a Responsive Framework

Tue, 02 Sep 2014 21:23:00 Z

Why?

One of the things a work on in my spare time is a responsive framework. You might have already seen it.

A few people have asked my why I built it, as there's already several popular frameworks out there. There's one answer I give every time:

Because I needed it.

Complexity

The other, sadly more popular frameworks, are great pieces of work. A lot of effort has gone into building and testing them and they do a pretty good job for the most part. They all have the same problem though - They're all too design opinionated.

If I'm building a website the last thing I need to do is overwrite styles that have already been added by the base stylesheet. Every single change that you have to perform introduces greater opportunity for error and adds weight to the websites resources. Each change also introduces complexity and makes a website more difficult to maintain.

That's the last thing I need when I'm working with a tight deadline hanging over me.

Avoiding the issue of opinionated design has been paramount in the development of Responsive. Every bit of CSS has been coded specifically not to force excessive styles on the developer. Only the required code is present to provide the functionality to build a cross-browser responsive experience

Accessibility

Another issue that isn't handled properly with other frameworks is accessibility. There's been meagre attempt to remedy this from other frameworks but for the most part they are a mess. I needed something that would handle the greater bulk of accessibility requirements without the developer having to do anything additional. As a result, every JavaScript component within Responsive handles the creation and manipulation of ARIA attribution to ensure that its behaviour is accessible to screen readers.

Internationalisation

None of the frameworks that I am aware of have support for right-to-left languages built in. Developers shouldn't have to jump through hoops to do this. Grids, floated and positioned elements should switch, touchable components should reverse their behaviour, and directional keyboard events should reverse their behaviour all with the minimum of change required by the developer. Responsive allows you to switch this by adding the attribute dir="rtl" to the html element*

In Summary

By now you should see why I created the framework and why both you and I should be developing our websites both responsive and fixed with Responsive. Web development has never been more complicated, we're trying to do so much more with less time and more devices than ever before and we need the best setup possible to ensure that we can build performant, flexible, accessible sites. So give it a go, you'll be surprised at how much there is to offer.

* There has been conversation with other developers based on an outdated information in this article that states that we should not do this as it reverses the position of the scrollbar in certain obsolete browsers. Instead, we should hack the document by adding a child element to the body setting the attribute on that. In my humble opinion that is ass-backwards (pun intended) If there is a browser bug in any of the non-obsolete browsers report it, don't hack around it.

Image Processing for Everybody!

Wed, 27 Aug 2014 02:51:45 Z

Happy ImageProcessing Day!

Today marks the new release of my open source project ImageProcessor. I'm very proud of it.

Inspired by the frantic codings of the brilliant people I met at this years Umbraco CodeGarden retreat this release has turned into an almost complete rewrite of the library. I've dramatically simplified the code required to write plugins whilst making the library much more robust and modular adding a few very cool (I think so anyway) features.

We now have the following:

ImageProcessor

Automatic image file type detection
Automatic plugin detection
Ability to extend image file type support via the ISupportedImageFormat interface
Ability to extend individual processors via the IGraphicsProcessor interface
Methods to load embedded native (unmanaged) libraries from within plugins
True separation of concerns from the .Web extension.
More specific error handling feedback

ImageProcessor.Web

Automatic plugin detection
Ability to extend individual processors via the IWebGraphicsProcessor interface
Improved and more consistent parsing syntax.
Improved processing and caching performance
More images are now cached (theoretically 409,600,000,000)
Post processing events to tap into. ImageProcessingModule.OnPostProcessing
Improved error handling for remote image requests
Url configurable EXIF preservation

There's more but it's probably best for you to read the documentation. As ever, it's a work in progress but I've tried to make them readable and precise. If you want to help at any point to improve the library, there is always a good place to start.

I'd really like to thank Scott Hanselman for sharing the library on his blog and the Umbraco team and community for their continuing support and faith in my ability. You guys absolutely rock! #h5yr's and approving nods all round!

Filepath too long?

Tue, 05 Aug 2014 13:57:28 Z

I thought I'd write this post as a reminder to myself and as a helper for anyone daft enough to try to use Node on a Windows machine.

Node has a mental system for managing packages which involves deeply nesting dependencies in the node_modules folder. This can lead to all sorts of problems on Windows machines like making the --watch overload for Jekyll die on its ass.

You can't even delete the damn thing properly due to Windows path constraints. It's really annoying to say the least but at least they know about it

Here's a quick method I use to remove the folder when I need to.

Open a command prompt or whatever your shell tool of choice is, navigate to the parent folder of the node_modules folder and type in the following commands:

mkdir foo
robocopy foo node_modules /MIR
del foo
del node_modules

This command uses the robocopy utility and the /MIR "mirror" flag to mirror the empty foo directory to the node_modules folder emptying it out. You can then delete both directories.

Voilà :)

A Call To Arms

Sat, 26 Jul 2014 12:54:03 Z

The popularity of the Internet is the most important single development in the world of computing since the IBM PC was introduced in 1981.

Bill Gates was quoted as saying that. I'd go further.

I believe that the Internet is the single most important invention we have ever created.

With the Internet we can now universally share information like never before. We can pool resources to solve problems, provide education resources for each other and future generations, and provide support and services (sometimes lifesaving) for almost all our needs. It has revolutionised almost every aspect of our interaction as a species with billions of people now having access to the largest, free, information portal that has ever been created.

The internet is a Good Thing ™

I am a web developer. I imagine that you, reading this are one also. As such we possess a unique and special set of skills that allow us to create software to expand upon and improve the Internet. I believe that as developers we have an obligation, I would say a privileged one, to ensure that every single piece of work we produce is delivered to the highest possible standard

To do that requires effort on our part. It requires dedication, passion, craftsmanship, and an attention to detail.

At present I don't believe as a profession we do this. I won't go into specific technical details with this post but I will list some of the common mistakes I see professionals make on a daily basis.

Multiple blocking requests of unminified resources in the head of the document.
Incorrect use of elements rendering websites inaccessible.
Sporadic, in-line JavaScript and CSS.
Unoptimized, massive image requests increasing page weight.

This is bread and butter stuff, day one stuff and we really should do better.

So here is my challenge to you: Every time you release a piece of work, ask yourself whether it is the best that you can do. Is it fast, lightweight? Is it accessible? Have you followed the defined standards? Have you tested it?

If you haven't, you are doing not only yourself a disservice but also one to the people who consume your work, who depend on your work and you should question your fitness for such an important role.

Strong words I know but we have a duty of care.