Frederik Vig - ASP.NET developer » EPiServer

Geta.oEmbed version 1.2 is out

Frederik Vig — Sat, 19 Nov 2011 18:50:59 +0000

Due to a changes in the oEmbed API I’m using for this module (it got bought by Embedly), I’ve updated the code to use the new API instead. The biggest change on your part is that you need to register on Embedly to obtain a key for the API.

Registration

To get the key register on this page: Embedly Pricing Plan, if you scroll to the bottom you’ll see the free version which should be plenty for most uses (there is among other things a restriction on the number of requests).

After the registration you should receive the key in your email inbox. Add this key to your sites appSettings configuration.

 key="EmbedKey" value="your-key-goes-here" />

The great thing about Embedly is the support for 220 different providers, here’s the list: Providers.

Upgrade

You can get the latest version (Geta.oEmbed 1.2) from nuget.episerver.com, or download the source code from Geta’s Open Source repository.

Related Posts:

Faster EPiServer sites – client side performance

Frederik Vig — Sun, 09 Oct 2011 08:59:04 +0000

First part of a new series where I’m going to focus on performance and scaling. I’m going to go through all the best practices we as EPiServer developers should know about, not only to create EPiServer sites that are fast, but ultra-fast.

I’m going to use the Overlook hotel sample site. The goal is of course to make it ultra-fast!

To follow along you should have the overlook site installed and setup. Let’s get started!

Client side performance

I’m using Firefox as my main developer browser, I’ll also be using three great addons for Firefox: Firebug, YSlow, and Page Speed.

If we run YSlow on the front page of overlook hotel we’ll get a score of 66/100 (grade D) with a few suggestions for improvements.

With Page Speed we get a score of 62/100.

I’m going to focus on IIS 7 and above, most of the stuff is also possible with IIS 6, but I’m not going to go through IIS 6.

Compress components with gzip

Read more about the benefits of gzipping your content here: Gzip Components.

In IIS 7 this is very easy. First make sure you have both static and dynamic compression installed.

Next step is enabling both static and dynamic compression in web.config. Go to the section and add the following:

 doDynamicCompression="true" doStaticCompression="true" dynamicCompressionBeforeCache="true" />

Re-run both YSlow and Page Speed. Your score should now be 72 and 78 with an A in gzip.

You can find more information on urlCompression on IIS.NET. By default IIS 7 will actually enable static and dynamic compression for you.

You might have spotted the httpCompression section under .

>
  >
	 mimeType="text/*" enabled="true" />
	 mimeType="message/*" enabled="true" />
	 mimeType="application/javascript" enabled="true" />
	 mimeType="application/x-javascript" enabled="true" />
	 mimeType="*/*" enabled="false" />
  >
  >
	 mimeType="text/*" enabled="true" />
	 mimeType="message/*" enabled="true" />
	 mimeType="application/javascript" enabled="true" />
	 mimeType="application/x-javascript" enabled="true" />
	 mimeType="*/*" enabled="false" />
  >
   name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll" />
>

You don’t actually need this section to enable gzip (IIS will just use it’s default settings), but it’s nice to know about it when you need to tweak your default gzip settings a bit. Basically urlCompression specifies what to compress and httpCompression specifies how. More information on httpCompression: HTTP Compression .

If we check the applicationHost.config file for IIS 7 you can see the default settings (location: %windir%\system32\inetsrv\config\applicationHost.config):

<httpCompression directory="%SystemDrive%\inetpub\temp\IIS Temporary Compressed Files">
	<scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll" />
	<staticTypes>
		<add mimeType="text/*" enabled="true" />
		<add mimeType="message/*" enabled="true" />
		<add mimeType="application/x-javascript" enabled="true" />
		<add mimeType="application/atom+xml" enabled="true" />
		<add mimeType="application/xaml+xml" enabled="true" />
		<add mimeType="*/*" enabled="false" />
	staticTypes>
	<dynamicTypes>
		<add mimeType="text/*" enabled="true" />
		<add mimeType="message/*" enabled="true" />
		<add mimeType="application/x-javascript" enabled="true" />
		<add mimeType="*/*" enabled="false" />
	dynamicTypes>
httpCompression>

By default httpCompression is set to only gzip files over 2700 bytes, we can fix this by adding the following code:

 directory="%SystemDrive%\websites\_compressed" minFileSizeForComp="1024">
	 name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll" />
	>
		 mimeType="text/*" enabled="true" />
		 mimeType="message/*" enabled="true" />
		 mimeType="application/javascript" enabled="true" />
		 mimeType="application/json" enabled="true" />
		 mimeType="*/*" enabled="false" />
	>
>

Add Expires headers

Adding Expires headers to static and dynamic files like CSS, JavaScript and images tells the client to cache the files locally, lessening the burden on the server (less requests). Making your sites resources/components cache-able. More information: Add an Expires or a Cache-Control Header.

Back in our sites web.config file under the section, we have the section:

>
     cacheControlMode="UseMaxAge" cacheControlMaxAge="1.00:00:00">>
>

The interesting part here is of course the clientCache element.

UseMaxAge will add CacheControlMaxAge to the HTTP Headers sent to the client, we can then tell the client to cache the static files for 1 year:

>
     cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00"/>
>

With UseExpires you specify a date instead:

>
     cacheControlMode="UseExpires" httpExpires="Tue, 19 Jan 2038 03:14:07 GMT" />
>

You can only use one of these (if you’re not using the location element) at a time. I usually use MaxAge, it’s simpler and you don’t have to remember to update your settings when the date passes.

The important thing to remember is that if you make any changes to the static files you’ll need to use another name. You can add a querystring, change the name, or in some other way update the path to reflect that the file has changed.

Let’s update it to say that the client should cache the files for 1 year:

>
     cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00"/>
>

This helped bring the list of components down from 86 to 15. But we’re not quite finished yet.

EPiServer uses the location element to specify access rights and to use EPiServer’s StaticFileHandler for files located in Global Files, Page Files, Documents and other places that use Virtual Path Providers.

 path="PageFiles">
	>
		>
			 name="webresources" path="WebResource.axd" verb="GET" type="System.Web.Handlers.AssemblyResourceLoader" />
			 name="wildcard" path="*" verb="*" type="EPiServer.Web.StaticFileHandler, EPiServer" />
		>
	>
	 expirationTime="365.00:00:00" />
>
 path="Documents">
	>
		>
			 name="webresources" path="WebResource.axd" verb="GET" type="System.Web.Handlers.AssemblyResourceLoader" />
			 name="wildcard" path="*" verb="*" type="EPiServer.Web.StaticFileHandler, EPiServer" />
		>
	>
	 expirationTime="365.00:00:00" />
>
 path="Global">
	>
		>
			 name="webresources" path="WebResource.axd" verb="GET" type="System.Web.Handlers.AssemblyResourceLoader" />
			 name="wildcard" path="*" verb="*" type="EPiServer.Web.StaticFileHandler, EPiServer" />
		>
	>
	 expirationTime="365.00:00:00" />
>

More information in EPiServer’s SDK: Caching of static files. This technique uses the Expires header instead of MaxAge, but with the same effect.

You might have noticed the section:

>
	>
		 extension=".gif" policy="DontCache" kernelCachePolicy="CacheUntilChange" duration="0.00:01:00" location="Any" />
		 extension=".png" policy="DontCache" kernelCachePolicy="CacheUntilChange" duration="0.00:01:00" location="Any" />
		 extension=".js" policy="DontCache" kernelCachePolicy="CacheUntilChange" duration="0.00:01:00" location="Any" />
		 extension=".css" policy="DontCache" kernelCachePolicy="CacheUntilChange" duration="0.00:01:00" location="Any" />
		 extension=".jpg" policy="DontCache" kernelCachePolicy="CacheUntilChange" duration="0.00:01:00" location="Any" />
		 extension=".jpeg" policy="DontCache" kernelCachePolicy="CacheUntilChange" duration="0.00:01:00" location="Any" />
	>
>

The caching setting is used to configure output caching for IIS. You have both output caching for IIS and for ASP.NET. More information: Caching . By default IIS output caching is turned on.

What EPiServer has done is told IIS to not cache static files like images, CSS and JavaScript and let ASP.NET handle it instead. You can read more about IIS output caching here: Configure IIS 7 Output Caching.

Let’s remove the whole section and use the default settings instead.

Now we have a score of 78 points in YSlow and 95 in Page Speed. Here you can see how much of the total size is now cached:

On the left we can see the total size and number of requests the first time, on the right is the size and number of requests after that. We’re now down to 3 requests and 16KB. Quite an improvement don’t you think?

Minify JavaScript and CSS

When we’re developing we usually work with multiple JavaScript and CSS files to make it easier to structure and maintain them. However in production we should take care to automatically compress and bundle the files.

It’s important to note the difference between the rule Gzip Components and Minify JavaScript and CSS, which will remove comments, unneeded whitespaces and replace variable/function names with shorter versions.

There are a few tools we can use for this:

SquishIt – I’ve written about it before: CSS and JavaScript compression and bundling
Cassette
ASP.NET 4.5 Optimization

We’re going to use ASP.NET 4.5 Optimization preview. You can easily install it through NuGet.

Note: you’ll need to run .NET 4, so we’ll need to upgrade our solution to use .NET 4 instead of .NET 3.5. This is quite easy thanks to David Knipe. Change the projects target framework in Visual Studio and install the EPiServerCMS6ToNetFour package from nuget.episerver.com.

After that you’ll be able to install ASP.NET 4.5 Optimization successfully.

To enable it we just call the EnableDefaultBundles() method inside Application_Start in Global.asax:

public class Global : EPiServer.Global
{
	protected void Application_Start(object sender, EventArgs e)
	{
		BundleTable.Bundles.EnableDefaultBundles();
	}
}

Next step is updating the way external JavaScript and CSS files are included. By default, everything you refer to in a folder gets bundled together (only for the same type, so JavaScript and CSS files don’t get bundled together even if they’re in the same folder).

<link href="/Templates/DemoSite/Styles/Main/css" rel="stylesheet" type="text/css" />
<script src="/Templates/DemoSite/Scripts/Main/js"></script>

We add the path to the folder followed by either /css or /js.

I had to manually update the code-behind files of site.master and the composer functions and change:

Page.RegisterCSSFile("ComposerFunctions.Teaser.Styles.Teaser.css", UriSupport.ResolveUrlBySettings("/Templates/DemoSite/ComposerFunctions/Teaser/Styles/Teaser.css"));

To:

Page.RegisterCSSFile("ComposerFunctions.Teaser.Styles.Teaser.css", UriSupport.ResolveUrlBySettings("/Templates/DemoSite/ComposerFunctions/Teaser/Styles/css"));

What I did was bundle the different JavaScript and CSS files into folders like components/modules and updated their references to use these folders instead.

There were a few inline scripts that I didn’t compress, but overall this helped a lot. I have now 97/100 points in Page Speed and 79/100 in YSlow.

Make fewer HTTP requests

Modern browsers can send up-to 6 requests at a time to the same domain. Older browsers up-to 2. Combining resource files like JavaScript, CSS and images into as few files as possible not only decreases the sites total size, but also make it load much faster for the client.

For JavaScript and CSS files we can use the technique we learned in the previous step (Minify JavaScript and CSS). For images we can use CSS sprites or embed the images.

What we’re going to do is embed the CSS background images into the stylsheets. I’ve borrowed the code from Mads Kristensen’s presentation on Build – Optimize your website using ASP.NET and IIS8.

using System;
using System.IO;
using System.Text.RegularExpressions;
using System.Web;
using System.Web.Hosting;
using Microsoft.Web.Optimization;
 
namespace EPiServer
{
    public class CssWithImagesMinify : CssMinify
    {
        private static readonly Regex url = new Regex(@"url\((([^\)]*)\?embed)\)", RegexOptions.Singleline);
        private const string format = "url(data:image/{0};base64,{1})";
 
        public override void Process(BundleResponse bundle)
        {
            HttpContext.Current.Response.Cache.SetLastModifiedFromFileDependencies();
            base.Process(bundle);
            string reference = HttpContext.Current.Request.Path.Replace("/css", "/");
 
            // When publishing the bundler can be called from "/" causing image reference to be invalid.
            if (reference == "/")
                reference = "/Content/";
 
            foreach (Match match in url.Matches(bundle.Content))
            {
                var file = new FileInfo(HostingEnvironment.MapPath(reference + match.Groups[2].Value));
                if (file.Exists)
                {
                    string dataUri = GetDataUri(file);
                    bundle.Content = bundle.Content.Replace(match.Value, dataUri);
                    HttpContext.Current.Response.AddFileDependency(file.FullName);
                }
            }
        }
 
        private string GetDataUri(FileInfo file)
        {
            byte[] buffer = File.ReadAllBytes(file.FullName);
            string ext = file.Extension.Substring(1);
            return string.Format(format, ext, Convert.ToBase64String(buffer));
        }
    }
}

For all the images we want to embed we just add ?embed behind their name:

background: url('../Images/abuse.png?embed') no-repeat scroll 0 0 transparent;

We also need to update Global.asax and tell BundleTable to use our CSS Minifier instead.

protected void Application_Start(object sender, EventArgs e)
{
	var css = new DynamicFolderBundle("css", typeof(CssWithImagesMinify), "*.css");
	var js = new DynamicFolderBundle("js", typeof(JsMinify), "*.js");
 
	BundleTable.Bundles.Add(css);
	BundleTable.Bundles.Add(js);
}

The CSS files now have their background images embedded automatically!

background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA5IAAAAFCAYAAAA3+tN0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGFJREFUeNrs1zEKg1AQRdE/VgYN4uZcZDYXxEDSfd8W0gmeA5fpp3vVWpvSmB5pTs+0pLX3/moAAADcTlVtOe+0pyN90jf9Bu8BAADgH4YkAAAAhiQAAACGJAAAABdxCjAAa0EKFYXT/VsAAAAASUVORK5CYII=") repeat-y scroll 0 0 transparent;

There’s also a nice extension for Visual Studio that let’s right-click a folder inside Visual Studio and optimize all the images inside that folder: Image Optimizer.

I now have 99/100 in Page Speed and 95/100 in YSlow.

Further improvements

Use a CDN – See Use a Content Delivery Network and Virtual Path Provider for Amazon S3
Remove whitespaces and comments from HTML markup
Optimize CSS selectors and placement of stylesheets
Optimize JavaScript code, especially jQuery, remove inline code and update the placement of the JavaScript code
Reduce DNS Lookups and consider using a service like Amazon’s Route 53 for faster DNS lookups

Resources

Related Posts:

Installing EPiServer Live Monitor on IIS 7 running .NET 4

Frederik Vig — Fri, 07 Oct 2011 14:08:12 +0000

A client asked me to install Live Monitor for EPiServer CMS on their site today. Simple enough task, I started by reading the tech-note for the installation: Installation Instructions – Live Monitor.

First problem

Where is the installation file!? After a little digging around I found out that it was in the zip file for EPiServer CMS (Live Monitor.msi). After the installation Live Monitor was now available under the Modules node in EPiServer Deployment Center.

Second problem

Since we’re using Web.config transformation for updating our configurations files (web.config, episerver.config etc) when we deploy to different environments (test, staging, production), we’ve removed the namespace for episerver.config (xmlns=”http://EPiServer.Configuration.EPiServerSection”). If you try to run the installation without this namespace, you’ll get the following error:

 xmlns="http://EPiServer.Configuration.EPiServerSection">

Adding the namespace and rerunning the installation made the error disappear.

Third problem

Everything seemed to be running smoothly until I logged in and visited the Live Monitor overview. I get an error message:

I suspected something was wrong with my web.config file after the installation. Since the site is running .NET 4, everytime I update or install EPiServer products/modules I need to update the new stuff that gets added. I’m using a source control system (of course you’re too), so it was quite easy for me to spot the new stuff that the Live Monitor installation added.

 name="svc-Integrated" path="*.svc" verb="*" type="System.ServiceModel.Activation.HttpHandler, System.ServiceModel, Version=3.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" resourceType="Unspecified" preCondition="integratedMode" />

Should be:

 name="svc-Integrated" path="*.svc" verb="*" type="System.ServiceModel.Activation.HttpHandler, System.ServiceModel.Activation, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" resourceType="Unspecified" preCondition="integratedMode" />

Cool, now I get a nice overview over the site. But there are no visitors!

Fourth and last problem

First I suspected that the tracking code wasn’t added, but a quick view source showed that everything was fine there. I then opened up Firebug and saw that I got a 404 error for TrackerHandler.ashx. Having a peek at web.config again I spotted that TrackerHandler.ascx was registered in the handlers section followed by .

>
 name="EPiTraceTracker" path="TrackerHandler.ashx" verb="*" type="EPiServer.Trace.CMS.Handlers.TrackerHandler" />
 />

Moving TrackerHandler.ashx after the removed the 404 error and we have visitors showing up on Live Monitors overview!

Related Posts:

Tags version 0.2 released for EPiServer CMS

Frederik Vig — Mon, 05 Sep 2011 18:04:56 +0000

I’ve done a few updates to the Tags module for EPiServer CMS. The major change is that it’s now using the page’s PageGuid instead of PageLink (PageReference). This guaranties that the reference to the page will be correct, even when used with mirroring.

The other updates I’ve done is added a scheduled job that cleans up and check’s that the tagged pages still exist and that they still have their tag. You’ll need to manually set this up in admin mode. Depending on the size of the site I’ll usually set this to 30 minutes. The job goes through all pages that have a tag and validates them.

I’ve also implemented the TagEngine. This is a very first version so expect a few updates here soon. Here’s ITagEngine.cs

using System.Collections.Generic;
using EPiServer.Core;
using Geta.Tags.Models;
 
namespace Geta.Tags.Interfaces
{
    public interface ITagEngine
    {
        PageDataCollection GetPagesByTag(string tagName);
        PageDataCollection GetPagesByTag(Tag tag);
        PageDataCollection GetPagesByTag(string tagName, PageReference rootPageReference);
        PageDataCollection GetPagesByTag(Tag tag, PageReference rootPageReference);
        IEnumerable<PageReference> GetPageReferencesByTags(string tagNames);
        IEnumerable<PageReference> GetPageReferencesByTags(IEnumerable<Tag> tags);
        IEnumerable<PageReference> GetPageReferencesByTags(string tagNames, PageReference rootPageReference);
        IEnumerable<PageReference> GetPageReferencesByTags(IEnumerable<Tag> tags, PageReference rootPageReference);
    }
}

You’ll of course find Tags for EPiServer CMS on nuget.episerver.com. Go and give it a try – please let me know how things go and if you have any feedback, leave a comment, tweet me or send me an email.Related Posts:

Easily add comment functionality to EPiServer CMS with DISQUS

Frederik Vig — Sun, 21 Aug 2011 10:41:20 +0000

DISQUS is a very popular hosted comment system that makes it very easy to add comment functionality to new or existing sites. It takes care of spam, security (blacklists, whitelists), moderation, mobile and social media support and more.

To get started we need to sign up at disqus.com. The next step is adding the necessary JavaScript code to our site template – I created a new user control that I then can add to the templates that should have comment functionality enabled.

<%@ Control Language="C#" AutoEventWireup="false" EnableViewState="false" CodeBehind="Disqus.ascx.cs" Inherits="EPiServer.Templates.Units.Disqus" %>
 
<div id="disqus_thread">div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'example'; // required: replace example with your forum shortname
 
    // The following are highly recommended additional parameters. Remove the slashes in front to use.
    var disqus_identifier = '<%= CurrentPage.PageGuid %>';
    var disqus_url = '<%= CurrentPage.GetExternalUrl() %>';
 
    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function () {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.a>noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqusspan>a>

The disqus_shortname is the shortname you used when you signed up. disqus_identifier is a unique identifier for that page (I used the CurrentPage’s PageGuid property), and disqus_url is the permalink for the page, I just used the GetExternalUrl() method of the Extensions library for EPiServer CMS for this. That’s it, now you only need to include the user control in the templates where you want to allow comments.

Since I tested this locally (not on a public domain) I had to add the following variable to get it to work: var disqus_developer = 1; – which turns on developer mode for DISQUS.

Comment count in lists

If you have a list of pages that have comments you might want to display the number of comments that they have. DISQUS provides us with additional code we can use for just this purpose.

<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'example'; // required: replace example with your forum shortname
 
    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function () {
        var s = document.createElement('script'); s.async = true;
        s.type = 'text/javascript';
        s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
        (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
    }());
</script>

We can add this code to the bottom of our templates (right before the closing body tag). I then created an extension method for building the link to the comments.

public static string GetDisqusCommentLink(this PageData page)
{
	var link = new TagBuilder("a");
 
	string url = page.LinkURL + "#disqus_thread";
 
	link.MergeAttribute("href", url);
	link.MergeAttribute("data-disqus-identifier", page.PageGuid.ToString());
 
	return link.ToString(TagRenderMode.Normal);
}

To use the TagBuilder class you’ll need to add a reference to System.Web.Mvc.dll (version 2 ships with EPiServer CMS 6 R2).

There’s a lot more you can do with DISQUS, I encourage you to take a look at their developer docs and to try it out.Related Posts:

Tags for EPiServer CMS

Frederik Vig — Thu, 21 Jul 2011 10:32:24 +0000

I’ve started working on a new module for EPiServer CMS that adds tagging functionality to EPiServer Pages. This is something I’ve seen the need for in a lot of my projects lately. In the past I’ve used everything from the built in categories to custom solutions. The concept is quite simple, editors want a way to add more meta data to their pages, which then can be used for finding relevant pages, creating lists, facades navigation in search pages etc.

The module consists of two parts at the moment:

Custom property for adding tags to a page
TagEngine for finding pages with tags

Tags property

When adding Geta.Tags to your project a new custom property (Tags) will get added:

In edit mode this looks something like this:

Notice in the last screenshot that you get autocomplete for existing tags. You can add as many pages to a tag as you like, but each tag is unique, so you can only have one ‘uk’ tag, ‘europe’ tag etc.

TagEngine

TagEngine is used for finding pages based on one or more tags. You can specify a starting point (root PageReference), otherwise you’ll get back all pages tagged with that tag.

TagEngine looks like this at the moment:

public interface ITagEngine
{
    PageDataCollection GetPagesByTag(string tagName);
    PageDataCollection GetPagesByTag(Tag tag);
    PageDataCollection GetPagesByTag(string tagName, PageReference rootPageReference);
    PageDataCollection GetPagesByTag(Tag tag, PageReference rootPageReference);
    PageReferenceCollection GetPageReferencesByTags(string tagNames);
    PageReferenceCollection GetPageReferencesByTags(IEnumerable<Tag> tags);
    PageReferenceCollection GetPageReferencesByTags(string tagNames, PageReference rootPageReference);
    PageReferenceCollection GetPageReferencesByTags(IEnumerable<Tag> tags, PageReference rootPageReference);
}

I can’t promise that this is how the finale version is going to look. I’m also considering a more fluent approach.

tagEngine.Tag("customer").GetPages();
tagEngine.Tag(tag).GetPages(rootPageReference);
tagEngine.Tags(tagCollection).GetPageReferences();

I’m open to suggestions/ideas .

Behind the scenes

All of Tags data is saved in Dynamic Data Store. When a page is saved that has a Tags property I check if it’s a new or existing tag, I then add the PageReference of the page (only PageId not WorkId) to a PageReferences collection.

[EPiServerDataStore(AutomaticallyCreateStore = true, AutomaticallyRemapStore = true)]
public class Tag
{
	public Identity Id { get; set; }
 
	public string Name { get; set; }
 
	/// 
	/// Lowercase, words combined by - between them
	/// 
	public string Slug { get; set; }
 
	public string Description { get; set; }
 
	// number of objects, pages that use this term
	public int Count { get; set; }
 
	public PageReferenceCollection PageReferences { get; set; }
}

There are a couple of problems with this approach:

Mirroring – not guaranteed to get the same PageId
Globalization – same tags get added to all versions

I then have a scheduled job that basically cleans everything up, makes sure there are no PageReferences to pages that no longer exist or have removed their tag. This job is not implemented yet.

Coming soon

A more stable version for nuget.episerver.com
Implementation of TagEngine and TagsScheduledJob
Settings class for the Tags property

Project homepage

You can find the project homepage on EPiCode and the source code here.

I’m very open to suggestions and ideas. Do you think this will be useful?Related Posts:

EPiServer Mail 5 R2: The stored procedure ‘spEPiServerMailSampleRecipientSourceGetMailingLists’ doesn’t exist

Frederik Vig — Thu, 02 Jun 2011 18:18:50 +0000

After completing the installation of EPiServer Mail 5 R2 (see my previous post: EPiServer Mail 5 R2 Installation problem). Everything seemed to be going fine, except for in edit mode. After the installation, when I tried editing a page, I got the following error message in edit mode (standard EPiServer CMS 6 R2 with EPiServer Mail 5 R2):

[InvalidOperationException: The stored procedure 'spEPiServerMailSampleRecipientSourceGetMailingLists' doesn't exist.]
   System.Data.SqlClient.SqlCommand.DeriveParameters() +2840515
   System.Data.SqlClient.SqlCommandBuilder.DeriveParameters(SqlCommand command) +241
   Microsoft.Practices.EnterpriseLibrary.Data.Sql.SqlDatabase.DeriveParameters(DbCommand discoveryCommand) +72
   Microsoft.Practices.EnterpriseLibrary.Data.Database.DiscoverParameters(DbCommand command) +194
   Microsoft.Practices.EnterpriseLibrary.Data.ParameterCache.SetParameters(DbCommand command, Database database) +132
   Microsoft.Practices.EnterpriseLibrary.Data.Database.GetStoredProcCommand(String storedProcedureName, Object[] parameterValues) +135
   EPiServer.Common.Data.DatabaseHandler.GetCommand(Boolean inTransaction, String sp, CommandType commandType, Object[] args) +208
   EPiServer.Common.Data.DatabaseHandler.GetReader(Boolean inTransaction, String sp, CommandType commandType, Object[] args) +32
   EPiServer.Common.Data.DatabaseHandler.GetReader(Boolean inTransaction, String sp, Object[] args) +26
   EPiServer.Mail.Sources.SampleSource.SampleSource.GetRecipientContainers(ISite site, Int32 page, Int32 pageSize, Int32& totalItems, RecipientContainerSortOrder[] order) +302
   EPiServer.Mail.Core.EP.Web.ComposeNewMailControl.BindRecipientContainers() +480
   EPiServer.Mail.Core.EP.Web.ComposeNewMailControl.InitializeRecipientsSection() +789
   EPiServer.Mail.Core.EP.Web.ComposeNewMailControl.Page_Init(Object sender, EventArgs e) +72
   System.Web.Util.CalliHelper.EventArgFunctionCaller(IntPtr fp, Object o, Object t, EventArgs e) +25
   System.Web.UI.Control.InitRecursive(Control namingContainer) +133
   System.Web.UI.Control.InitRecursive(Control namingContainer) +421
   System.Web.UI.Control.InitRecursive(Control namingContainer) +421
   System.Web.UI.Control.InitRecursive(Control namingContainer) +421
   System.Web.UI.Control.InitRecursive(Control namingContainer) +421
   System.Web.UI.Control.InitRecursive(Control namingContainer) +421
   System.Web.UI.Control.InitRecursive(Control namingContainer) +421
   System.Web.UI.Control.InitRecursive(Control namingContainer) +421
   System.Web.UI.Control.InitRecursive(Control namingContainer) +421
   System.Web.UI.Control.InitRecursive(Control namingContainer) +421
   System.Web.UI.Control.InitRecursive(Control namingContainer) +421
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +1954

After looking a little at the stack trace and at the download section of EPiServer World I noticed the code sample for EPiServer Mail. After downloading the files I found two sql-scripts (EPiServerMailSampleRecipientSource_stored_procedures.sql and EPiServerMailSampleRecipientSource_tables.sql) that add a couple of tables and stored procedures that you apparently need. After executing both sql-scripts in my EPiServer Mail database everything worked fine again, and I was able to access edit mode.Related Posts:

EPiServer Mail 5 R2 Installation problem

Frederik Vig — Thu, 02 Jun 2011 16:00:47 +0000

When trying to install EPiServer Mail 5 R2 on an existing site I came across this bug: #65398.

At C:\Program Files (x86)\EPiServer\Mail\5.1.343.270\Install\System Scripts\Install Site (No Database).ps1:297 char:20
+         Update-EPiXmlFile <<<<  -TargetFilePath $webConfigFilePath -ModificationFilePath (Join-Path $appWebConfigSourcePath 'web.config.modification.clearhandlers.xml')
System.IO.FileNotFoundException: Could not find file 'C:\Program Files (x86)\EPiServer\Mail\5.1.343.270\Install\Configuration\web.config.modification.clearhandlers.xml'.
File name: 'C:\Program Files (x86)\EPiServer\Mail\5.1.343.270\Install\Configuration\web.config.modification.clearhandlers.xml'
   at System.IO.__Error.WinIOError(Int32 errorCode, String maybeFullPath)
   at System.IO.FileStream.Init(String path, FileMode mode, FileAccess access, Int32 rights, Boolean useRights, FileShare share, Int32 bufferSize, FileOptions options, SECURITY_ATTRIBUTES secAttrs, String msgPath, Boolean bFromProxy)
   at System.IO.FileStream..ctor(String path, FileMode mode, FileAccess access, FileShare share, Int32 bufferSize)
   at System.Xml.XmlDownloadManager.GetStream(Uri uri, ICredentials credentials)
   at System.Xml.XmlUrlResolver.GetEntity(Uri absoluteUri, String role, Type ofObjectToReturn)
   at System.Xml.XmlTextReaderImpl.OpenUrlDelegate(Object xmlResolver)
   at System.Threading.CompressedStack.runTryCode(Object userData)
   at System.Runtime.CompilerServices.RuntimeHelpers.ExecuteCodeWithGuaranteedCleanup(TryCode code, CleanupCode backoutCode, Object userData)
   at System.Threading.CompressedStack.Run(CompressedStack compressedStack, ContextCallback callback, Object state)
   at System.Xml.XmlTextReaderImpl.OpenUrl()
   at System.Xml.XmlTextReaderImpl.Read()
   at System.Xml.XmlLoader.Load(XmlDocument doc, XmlReader reader, Boolean preserveWhitespace)
   at System.Xml.XmlDocument.Load(XmlReader reader)
   at System.Xml.XmlDocument.Load(String filename)
   at EPiServer.Install.Xml.Installers.UpdateXmlInstaller.SetUpSubInstallers()
   at EPiServer.Install.Xml.Installers.UpdateXmlInstaller..ctor(InstallationManager installationManager, String targetFilePath, String modificationsFilePath, Dictionary`2 namespaces, Dictionary`2 replaces, Boolean autoAddNamespaces)
   at EPiServer.Install.Xml.XmlInstallationManager.UpdateXml(String targetFilePath, String modificationFilePath, Dictionary`2 namespaces, Dictionary`2 replaces, Boolean autoAddNamespaces)
   at EPiServer.Install.Xml.Cmdlets.UpdateConfigCmdlet.ProcessRecord()
   at System.Management.Automation.Cmdlet.DoProcessRecord()
   at System.Management.Automation.CommandProcessor.ProcessRecord()

The fix turned out to be quite simple. Comment out the element under the section of the sites web.config before the installation (uncomment after). This solved it for me and the installation completed without any troubles.

Big thanks to EPiServer Support for helping me with this problem.Related Posts:

Part 1: Injection – OWASP Top 10 for EPiServer Developers

Frederik Vig — Sun, 22 May 2011 13:04:02 +0000

Injection flaws have always been one of the biggest security wholes in web applications. The good news is that it is very easy to protect against them, ones you know how.

So what is injection?

Injection flaws, such as SQL, OS, and LDAP injection, occur when untrusteddata is sent to an interpreter as part of a command or query. The attacker’s hostile data can trick the interpreter into executing unintended commands or accessing unauthorized data.

What this means is that evil input data (from querystrings, form data, HTTP Headers etc) cause your applications queries or commands to change (in a way not designed by you as the developer of the application).

The most common form is SQL injection. Eg:

string query = "SELECT * FROM customers WHERE ID='" + Request["id"];

The attacker can then simple modify either the querystring, form data or the HTTP header collection.

http://example.com/customers?id=’ or ’1′=’1

This allows the attacker to view the customer information they like, or even go as far as deleting the table (if they run in a user context that has enough database rights).

One way to fix this is to either use parameters or stored procedures:

string query = "SELECT * FROM customers WHERE ID=@id";
SqlCommand command = new SqlCommand(query, connection);
SqlParameter idParameter = new SqlParameter("@id", SqlDbType.Int) { Value = Request["id"] };
 
command.Parameters.Add(idParameter);

This is better, now when someones tries to run http://example.com/app/accountView?id=’ or ’1′=’1 they’ll get an error (since we’ve defined that id is an integer, ADO.NET takes care of sanitizing the input).

Validate all input

First rule is to always code defensively. An attacker can easily modify everything sent to you, without needing a HTML form. HTTP proxies like Fiddler make this easy. It is much safer for us to whitelist input (specify what we consider valid input), than to blacklist input (specify what is not allowed). The reason for this is simple, you know what is accepted and valid and can make sure that the input matches that pattern. With blacklisting there is a infinitive number of different patterns we’d need to validate against.

In the case above where we accept an ID, which in our case only consists of integers. We can use the int.TryParse() method to validate the input:

int id;
 
if(!int.TryParse(Request.QueryString["id"], out id)
{
  lblMessage.Text = "Invalid customer id.";
  return;
}
 
// valid integer number

Notice that we now only check the querystring (I’m not using Request["id"] anymore), We also validate and make sure that this is a number. Taking this a step further we could make sure that the number follows a pattern that we’ve defined for customer IDs (at least 4 digits, only positive numbers etc), by using a regular expression.

Dynamic Data Store

With EPiServer CMS 6 came the Dynamic Data Store, (more information on Dynamic Data Store). EPiServer has a factory class for accessing the dynamic data store: DynamicDataStoreFactory. We then use LINQ and Lambda to query the data. If you’ve used ORM tools like NHibernate, LINQ to SQL, Entity Framework etc before this should be familiar. The LINQ and Lambda code then gets translated to SQL code by both using parameters and stored procedures (which protect us against SQL-injections). If you’re curious how this code looks, take a look at the SqlServerDataStoreProvider class in EPiServer.Data.dll.

Always, always use EPiServer’s API when accessing EPiServer data. Not only does it protect against security vulnerbilities like SQL-injection, it also adds smart caching, event notifications and other goodies.
Related Posts:

CSS3 buttons and EPiServer editor stylesheet

Frederik Vig — Sun, 08 May 2011 11:21:43 +0000

You’ve probably seen them around, the cool new CSS3 styled buttons. Before you had to use images and image replacement to achieve a similar effect. Now you can do this without images and by only using CSS. The cool thing about this is that it makes it so much easier to use on our sites. We can easily add these buttons to the editor stylesheet and let our editors choose from the different action buttons that they are allowed to use.

Here is a button that we can use in three different colors. As you can see the only change needed is the additional HTML class.

<p><a href="#" class="action-button blue">Blue button</a></p>
<p><a href="#" class="action-button green">Green button</a></p>
<p><a href="#" class="action-button orange">Orange button</a></p>

The CSS code looks like this:

.action-button, .action-button:visited {
	display: inline-block;
	padding: 5px 10px;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
 
}
 
.action-button.green, .action-button.green:visited		{ background-color: #99c70a; }
.action-button.green:hover						{ background-color: #6f9302; }
.action-button.blue, .action-button.blue:visited		{ background-color: #22adbf; }
.action-button.blue:hover							{ background-color: #017691; }
.action-button.orange, .action-button.orange:visited		{ background-color: #ff5c00; }
.action-button.orange:hover							{ background-color: #d45500; }

To make it work in Internet Explorer as well we can use CSS3 PIE.

We can easily add these three buttons to the editor stylesheet so that our editors can pick them from the styles drop down list in TinyMCE.

.action-button, .action-button:visited {
	display: inline-block;
	padding: 5px 10px;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
 
.action-button.green
{
    EditMenuTitle: Buttons;
	EditMenuName: Green;
    background-color: #99c70a;
}
.action-button.blue {
	EditMenuName: Blue;
    background-color: #22adbf;
}
.action-button.orange {
	EditMenuName: Orange;
    background-color: #ff5c00;
}

You can set the path to your editor stylesheet in episerver.config, under site settings and uiEditorCssPaths or by adding a dynamic property with the name UIEditorCssPaths.

This will add the options green, blue and orange to the style drop down list, grouped under the Buttons title:

We can now select any link and apply the button look to it. The result:

Pretty cool huh?Related Posts: