Attackmonkey Blog

If like me, you use Umbraco, you'll probably be familiar with the UrlRewriting.Net module that the site uses that can be used to create rewrites and redirects on your site. However, if your site is running IIS7 or later, you should really be using the IIS Url Rewrite Module instead. It's MUCH faster, supports more advanced rule matching and conditions that UrlRewriting.Net, and is extensible too if you want to write your own rewrite matching code.

If you've never come across the module before, you can learn all about it's many features and there's a ton of useful tutorials and info over on the IIS.net website.

I'm going to assume that you're familiar with how the module works, and I'm going to show you a couple of nifty tricks that you can use to use the module to restrict acess to your site, say during testing, or an Umbraco upgrade, and how to do it in an SEO friendly way.

First, how can you restrict access to the site?

Lets say you're updating a section of your website and you want to lock people out of the section temporarily. I'd normally create a page that tells the user about this, and then create a rule something like this:

<rule name="Restrict Access to Umbraco" stopProcessing="true">  
    <match url="^/umbraco/(.*)" />
    <conditions>
        <add input="{REMOTE_ADDR}" pattern="123\.123\.123\.123" />
    </conditions>
    <action type="Rewrite" url="/update-notice/" />
</rule>

How the rule works is that it checks the path for the path ("/umbraco/" in this example) and if their IP address doesn't match a specified address (you can add as many clauses as you want for different addresses), they're shown a rewritten update notification page ("/update-notice/"). IN this example, the original URL is kept, but you could change the rule to a redirect if you'd prefer.

Secondly, how can we make it more SEO friendly?

The above approach is fine for quick stuff, or things that need to be permanently locked down, but what about SEO? What am I talking about? Let's say you lock everyone out of your site while performing an Umbraco upgrade, what happens when Google or any of the other search engines try and spider the site while you've locked them out? They'll probably see the page you've set up, and flag that the content has been redirected (or re-written, depending on how you've implemented the rule). This can negatively affect your SEO. What you REALLY want to do is return a 503 HTTP status. This tells the visiting client that the page is unavailable, but only temporarily, due to server maintenance. This will mean that Google will ignore the fact that your site is down, and stop indexing and try again later (and most other search bots will do the same).

So here's an example rule that returns a 503 status for the entire site, EXCEPT for a specific IP address:

<rule name="Return 503 For Whole Site" stopProcessing="true">  
    <match url=".*" />
    <conditions>
        <add input="{REMOTE_ADDR}" pattern="123\.123\.123\.123" />
    </conditions>
    <action type="CustomResponse" statusCode="503" subStatusCode="0" statusReason="Site is unavailable" statusDescription="Site is down for maintenance" />
</rule>

This works very similarly to the previous rule, except that the ENTIRE site returns a 503, unless you are coming from the specified IP address. Using this technique, it is possible to safely make the site unavailable for users/search bots, while still having it available to you for testing etc.

There's a lot more that you can do with the module, and I shall post some more tutorials soon, mostly focused around SEO!

:)

I was recently asked to upgrade the second ever Umbraco site I built from 4.0, all the way up to 6.1.6 (if possible). I was expecting the process to be quite painful, as they used a lot of old legacy DataTypes and packages (to be expected with the age of the site), but I was actually pleasantly surprised that performing the upgrade went pretty smoothly. It's just a bit time consuming!

I erred on the side of caution, and stepped through several versions to get from A to B. You could probably get away with less versions, but I wanted to play it safe! The versions I jumped through were:

• 4.5
• 4.6.1
• 4.8
• 4.9
• 4.11.4
• 4.11.10
• 6.0.5
• 6.1.6

Before you get started, I would recommend downloading the excellent WinMerge (or similar). A decent merge tool will make the upgrade process so much easier! Also read up on the general Umbraco upgrade advice, and the version specific upgrade advice. You can also check the release notes for each version you step through, as they sometimes have additional useful information in. These can be reached from the downloads page on our.

Make sure that you take a database backup at every step of the way, and a backup of the site files (I put everything into source control so I can step back to different versions if need be, and checked in after each successful upgrade).

For most versions, the process is the same, copy the "/bin", "/umbraco_client" and "/install" folders from the updated version into your site. Then copy everything in the "/umbraco" folder EXCEPT for the "/config" folder. Next, fire up WinMerge, and merge the following folders and files from the new version to your site:

• /config
• /umbraco/config
• /web.config

This step is extra important, as if you just overwite these files, you will lose all of your custom settings and dictionary items, which is a MASSIVE pain. Once that's done, run the site. You will get the installer, and step through it to upgrade the site. Test your site thoroughly, and repeat for each version!

In addition to the gotchas that are mentioned in the version specific upgrades documentation, I ran into a few additional gotachas which I'll list here for anyone else attempting the same thing:

• if you step through 4.7, in addition to the DLLs that the version notes say to remove, delete the formHandlers DLL and the VistaDB DLLs. Otherwise all of your XSLT macros will break!
• At 4.8, if you are upgrading from v4 (I'm not sure if this will be an issue if upgrading from later versions), you may find that your images embedded in the Richtext editor don't work any more. This is because there is a ~ in all of the paths. If this happens, run the script here and republish your site content.
• Also at 4.8, if you have a Richtext Editor with the context menu disabled, it may stop rendering in the back office. Switch the context menu back on to fix this, and then turn it off again once you've finished upgrading your site.
• 4.8 also breaks uComponents, you'll need to either update uComponets, or use the assembly binding workaround found here.
• At 4.9, it's highly likely that Contour will stop working. Upgrade Contour and you should be good. This was caused by some updates to JQuery in the CMS breaking some dependencies in the CMS.
• 6.0.5 you may find that you need to restart the app pool and clear the Examine indexes, otherwise you'll get null reference errors on the front end and back office. Restarting the app pool fixes these.

Also be sure to test all of your 3rd part DataTypes and extensions. I was pretty lucky, all of mine worked, bar one, which use log4net, which broke when I hit 4.11.10 (when log4net started shipping with umbraco). I fixed it by updaing the package, but I could also have used assembly binding like the uComponents fix.

That's pretty much it! It's a bit daunting if you're not overly technical, but as long as you're patient and careful, performing the upgrade didn't seem to be too painful. I hope this helps anyone else who attempts such a big jump!

Last year, there was an update to Chrome that caused a bit of a headache for some my client's editors. In the back office, if they tried to merge block level items, like paragraphs or list items, wierd stuff started happening.

Here's some example copy in the RTE in an affected site:

Now, I stick the cursor at the beginning of a paragraph and hit delete to merge two paragraphs, and this happens (note the second paragraph has gone tiny):

WTF? This doesn't happen in any other browsers, just Chrome. Lets look at the HTML source of the RTE text and see what's going on:

As you can see, Chrome has caused the RTE to wrap the second paragraph in several spans, and has added a load of inline line heights to the anchor tags. Not good. I waited to see if a future update to Chrome would fix this, it didn't. I have however figured out what causes it to freak out. Chrome doesnt like font sizes or line heights on the BODY or P tags in your RTE stylesheet to be defined in EMs for some reason. Switch the units to PX in your CMS stylesheet, clear your browser history and reload the CMS, and the issue should disappear.

I hope this helps anyone else who's run into this issue!

Following on from my previous article, here are some more packages that I find really useful and use in the majority of my Umbraco builds.

uComponents

No list would be complete without the daddy of Umbraco packages, the package so good that half of it's features got snaffled up into the core, uComponents! Written by Lee Kelleher and his band of mad scientists, this essential package contains a ton of useful DataTypes, XSLT extensions and assorted other goodies. I can't actually remember the last time I set up an Umbraco site without installing this package. To find out more about the package, you can check out it's rather impressive documentation. You can download the package from here.

AttackMonkey Custom Menus

This is one of mine. I've worked on a few sites where users would do things they weren't supposed to, like delete important pages like the site contact form, or in one case, the entire site settings section. I originally used to have some code in each site I built, but that was a massive pain in the arse, so I made a version of my code that could be managed via a config file. If you install the package, it allows you to configure completely custom menus for tree items (media or content), by either DocType or by Node ID. You can also configure it to just remove specific menu items. It's really quick and easy to set up, and it's been pretty useful on some of the larger more complex sites that I've built. I'm currenlty in the process of updating this bad boy for v7. Download the package here.

ImageGen

This is a handy package that was made by the awesome Mr Doug Robar, the chap who does the level 1 UK Umbraco training, who is also one of the nicest guys in the Umbraco community. It comes in two flavours, a free version and a pro version that you can unlock by buying a license. The package gives you a way of resizing and caching images to use on your site, so that you dont have to get the client to upload images in multiple sizes. They can just upload the largest version, and then you can use ImageGen to resize for the smaller versions. The free version does most of the things you might want, but the pro version has a lot of handy features, like the ability to crop images, watermark them and add text to them (useful for adding copyright notices etc). The pro version of the cost £125 at the time of writing, which is very reasonable! The cool thing is that you can use ImageGen in non-Umbraco sites too! To find out more about this package, check out the ImageGen website.

Media Icons

This is a realy simple package, but it really adds a lot of value for the actual CMS users in my opinion. What does it do? It simply swaps out the rather boring default media library icon for files ones that reflect the file extension on the file in the library. It ships with icons for most common file formats, such as:

• doc/docx
• flv
• mov
• pdf
• ppt/pptx
• swf
• txt
• xls/xslx
• zip

It's dead easy to add extra icons for any other file types you might need (just save an icon image to a special folder named after the extension of the file you want to associate it with). Basically, editors can easily tell from the icon in the media tree exactly what the file type is without needing to open it. You can gran the package here.

Digibiz Advanced Media Picker

Prior to v7, the Umbraco media picker was a bit, errr, basic. That all changed when Jeroen Breuer realease the Digibiz Advanced Media Picker (or DAMP as it's often known). This package is basically a media picker ON CRACK. It adds a ton of conveniences to the media picker, as well as having the ability to integrate with the various cropping datatypes and with third party services like Pixlr. You can event restrict users to only picking specific types of media with the pickers, which can be extremely handy for stopping editors from doing something daft like selecting a PDF as a thumbnail image for a news article. This is another package that makes it onto pretty much every single Umbraco site that I build! Grab the package here.

Back in the days of Web Forms, there were two main ways of implementing caching in Umbraco. You could cache the parts of the pages that were macros using the Umbraco marco caching features, or you could use the built in ASP.Net control and page level caching features (which perform slightly better than the Umbraco ones).

Now that Umbraco support MVC views, you no longer have the option to specify page level caching in your page templates like you could in the header of your web forms master templates, where you could add something like this to your master pages:

<%@ OutputCache Duration="60" VaryByParam="None"%>

You can't specify caching within a view itself, you either have to use the caching when you render a partial macro,  which you can do using Umbraco or you have to use an OutputCache directive on your action controllers.

Recently I worked on a site in Umbraco 6 where there were about five or six news/blog sections, each with their own RSS feeds, and then there was a master RSS feed in the root of the site that aggregated them all. The RSS feeds were pretty popular, so I really wanted to cache them for around 60 seconds, to help boost performance.

Using Umbraco partial caching, I'd have had to create a partial to render the RSS, and then had an "outer" view that loaded the partial and applied the caching, which I wasn't keen on, I'd rather cache the whole thing. Enter route hijacking in Umbraco. What is route hijacking? It gives you the ability to create your own controllers that will handle DocTypes and also Templates in a custom manner. As these allow you to override the ActionResult, that means you can apply an output caching directive to those templates.

So, in my example site, I have a Document Type called "RssFeed" that I would like to implement caching on for the WHOLE template. How would I do this? It's REALLY easy.

In my extensions project for my site (which contains all of my custom models, logic and helper methods), I added a class called "RssFeedController" with the following code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.Mvc;
using Umbraco.Web.Models;

namespace MySite.UmbracoExtensions.Controllers
{
  public class RssFeedController : Umbraco.Web.Mvc.RenderMvcController
  {
      [OutputCache(Duration = 60)]
      public ActionResult Index(RenderModel model)
      {
         return base.Index(model);
      }
   }
}

Note, that the name of the controller is very important, it should be the name of the DocType, with all spaces etc removed, followed by the word "Controller". So if your page was called "Awesome Feed" the class name would be "AwesomeFeedController". Notice the OutputCache declaration, all I'm doing is spcifying that the output should be cached for 60 seconds. There's no need to vary the cache, as the feeds can't be altered by the querystring or by user etc.

Compile the code and add the DLL to your site and it should be up and running! All Your RSS feeds are now cached for 60 seconds, and the best part is, they're cached by path, so each of the separate feeds is cached independantly.

This is only a very basic example, you can do a lot more with this, like vary the cache by parameters, specify whether the content should be cached locally or on the server, and even set different options for other allowed templates for the same DocType.

You can find out more about route hijacking  in the Umbraco docs, and more detailed information on how output caching works in MVC  on the MSDN. I hope this proves useful to someone :)