breath of fresh marasm

Sitecore Facebook Device - Facebook Open Graph device for Sitecore

2011-11-10T16:17:00.009+01:00

Recently I've been working on a Sitecore project for a large company that produces distilled beverages. One of the requirements was that before user can access any content within the site, they must pass age verification process. Still we needed to be able to share any of the pages on the Facebook, with the content specific for that particular page, not the data which is displayed on the age verification page.

While sharing the page on Facebook, it crawls the page and looks for the data that can be displayed for other Facebook users. The first thing which is checked is open graph data. I'm not going to explain it deeply in this post, but if you want to know more, you can learn it from here open graph protocol - facebook developers. What we need to know for the purposes of this article is that there are some meta tags that should be included within the html page header that are used by Facebook. Our goal was to display the page with those meta tags instead of the age verification page, if the site is crawled by Facebook.

For this purpose we chose the approach that uses Sitecore devices functionality. When the page is accessed by Facebook, the user agent of the facebook browser introduces itself as

facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)

We created a new device in the Sitecore that is used for the browser agent containing facebookexternalhit. Then we prepared a layout that is used for this device only and which contains all the open graph meta data required by Facebook. This allowed us to assure that all the end users will have to age verify before accessing the site, while Facebook can retrieve meaningful data.

Once you've set up the device and the layout, you can easily check whether you did it properly using the official Facebook URL Linter. The screenshot below shows an example of debug result for a page which has open graph meta data set.

Has Google PageRank started to ignore 'www'?

2011-07-21T15:13:00.002+02:00

Nearly year ago I became crazy about optimizing websites performance. YSlow and PageSpeed became my closest friends. One of their advices was to serve static content from cookieless domains. Unfortunately, my private web site url was http://marasm.pl (without 'www.' prefix) so I wasn't able to create any cookieless subdomain as all 'marasm.pl' cookies were used for subdomains.

That was the reason why I changed the url of my website to www.marasm.pl and redirected (with 301) all the calls from the url without 'www' to the new addresses. One month later PageRank of all pages within my site dropped to 0. I wasn't the happiest person in the world but there was nothing I could do. I left everything as it was hoping that the value of the content would earn its PageRank back.

One week ago I noticed that the PageRank of my website pages is back. More surprisingly, now it has the same values for the pages for both urls starting with 'www' and without, despite the fact that urls without 'www' are redirected. I'm sure one year ago Google didn't give any PageRank for the pages that were redirected with 301. Why did they change their minds? Is the current solution better? What would happen if I switch my domain back to the marasm.pl without 'www'?

How to determine who deleted the page in EPiServer

2010-06-18T12:23:00.004+02:00

Couple of days ago a colleague of mine was looking for a way to determine who moved a page to the recycle bin in EPiServer. Much to my surprise, there is no way to find that out using EPiServer edit / admin mode.

I had been sure that when one moves the page to the recycle bin, the new version is created, but it turned out that there is no single trace who deleted the page. That's why I wrote the code below:

using System;
using System;
using EPiServer;
using EPiServer.Core;
using EPiServer.DataAccess;

namespace Web
{
    public class Global : EPiServer.Global
    {
        protected void Application_Start(Object sender, EventArgs e)
  {
            DataFactory.Instance.MovedPage += SaveNewVersionIfDeleted;
        }

        private static void SaveNewVersionIfDeleted(object sender, PageEventArgs e)
        {
            if (DataFactory.Instance.IsWastebasket(e.TargetLink))
            {
                PageData deletedPage = DataFactory.Instance.GetPage(e.PageLink).CreateWritableClone();
                SaveAction action = SaveAction.ForceNewVersion;
                action |= (deletedPage.PendingPublish) ? SaveAction.Save : SaveAction.Publish;
                DataFactory.Instance.Save(deletedPage, action);
            }
        }
    }
}

The code is very short and simple. In Application_Start method of the Global.asax.cs I added a new method to the DataFactory.Instance.MovedPage handler. This method checks whether the target is recycle bin and forces a new version of the page. Now if you check the version list of any of the page in the recycle bin, the latest version shows you who and when deleted the page.

Custom scheduled jobs in EPiServer - advanced tips

2009-11-30T15:40:00.010+01:00

If you are here, you probably know what EPiServer scheduled jobs are. If not, I suggest you to take a look at Ted Nyberg post here Ted Nyberg: scheduled jobs in EPiServer first. If you're still with me, I assume you already have basic knowledge about scheduled jobs in EPiServer.

In this post I want to talk about several things you should take into account during your work with EPiServer scheduled jobs like:
* running the scheduled job on the chosen server
* executing only one EpiServer job in the same time
* executing scheduled job as a specified user
* process within the job thread is executed

Many servers - one job only

If you have many web servers connected to the single DB server (no matter if this is your development or production environment), you should be aware of the fact, that if the job is started automatically ANY of the servers can start your scheduled job. What is more, you can not be sure that the job won't be run on many servers in the same time. In some cases this is desired behavior, while in other it can cause serious problems.

Lets consider a situation when the role of the scheduled job is to perform some CPU consuming calculations. Assume that we have 4 server: 3 of them can be accessed via Internet and the other one is used only for entering content. In this scenario I would like all those calculations to be performed on the 4th server so the users accessing the site do not encounter any performance issues.

There is simple solution - stop EPiServer Scheduler service on the servers that can be accessed via Internet and leave the service running only on the 4th server. Do not forget to set Startup Type of the service to "Manual", in other case the scheduler will start on the machine after the reboot.

Only one job executed in the same time

There are plenty of situations when we don't want to let 2 same scheduled jobs to be executed simultaneously. But when we have a scheduled job that is run very often and execution of which can take a lot of time, we can be pretty sure that such a moment will occur when scheduler will try to execute the same job despite the fact that one job is still running.

To avoid it, we can use System.Threading.Monitor class like this:

using System;

namespace Maras.ScheduledJobs
{
    [EPiServer.PlugIn.ScheduledPlugIn(DisplayName = "My job",
        Description = "Only one 'My job' will be executed parallelly")]
    public class MyJob
    {
        private static readonly object MyJobLock = new object();

        public static string Execute()
        {
            if (!System.Threading.Monitor.TryEnter(MyJobLock))
            {
                // other job uses the monitor
                return "Job is still running";
            }

            try
            {
                // ... here comes the real code of the job
                return String.Empty;
            }
            catch (Exception exc)
            {
                return string.Format("Unknown exception caught ({0} {1})", 
                    new object[] { exc.Message, exc.StackTrace });
            }
            finally
            {
                System.Threading.Monitor.Exit(MyJobLock);
            }
        }
    }
}

It is very important to exit the monitor in finally statement. In other case you can block your jobs until the application is restarted.

Executing EPiServer scheduled job as a specified user

If you execute your job manually from the admin mode, your job is executed with all privileges that your user has. However, when your job is run by the scheduler, it does not have you user access rights. Believe me, it's really easy to forget about it while developing new scheduled job.

Fortunately it's really easy to log with the specified user name in the EPiServer. the only thing to do is to assign new principals to the PrincipalInfo.CurrentPrincipal like this:

EPiServer.Security.PrincipalInfo.CurrentPrincipal =
    EPiServer.Security.PrincipalInfo.CreatePrincipal("username");

For more information take a look at Ted Nyberg: Run a scheduled job as a specific EPiServer user.

Process within the job thread is executed

In the development phase of the scheduled job, most of the time you will start your job manually from the admin mode. In this case the job will be run within the web application process and its thread will have all privileges and rights that your user has.

However, when you set the scheduler to run the job automatically, there is a huge difference. Probably the most important is that you don't have user rights, but I already wrote about it above. The other thing that you should consider is that you don't have access to the HttpContext.Current stuff. And probably there are dozens of other things specific for your application.

Summarizing

While developing your custom scheduled job for EPiServer one has to remember that there is a big difference between jobs run manually and jobs run automatically by the scheduler. I hope that after reading this post you won't have any problems with your own scheduled jobs.

If you know about anything else that should be added to the list above, do not hesitate to comment below.

ASP.NET web site performance

2009-07-21T11:41:00.016+02:00

I've been working on a site for a tile and wood flooring specialist store recently. That was my first own project on such a big scale. Ok, maybe not so big comparing to projects that I worked on as a Cognifide employee, but still pretty big as a single person project. It was a challenging experience for me as I set up a goal for myself - the site has to load as fast as possible.

The result can be seen here el-ART. The site is in Polish but there is no need for understanding the content so don't worry ;)

Here is the full story of my work with this site.

Many web developers think that if the site is small then they don't have to worry about the speed of the response time. Unfortunately, they are wrong. Look at the site again (el-ART). There was not much html there but there were about 15 images (including logos and css images), several css files and couple of scripts. 30 or 40 requests per every page load. Then I started optimization - there are dozens of tools which can help you with it - I prefer Page Speed Firefox addon.
Lets go step by step with several of it's clues:

Combine external CSS

There are several ways of reducing the number of requests that are sent by the browser. One of them is combining external css files. The easiest way for this is just to create a single file and copy the content of all css files into the new file. Then just replace all previous css links with the one to the new file. However, the solution is not perfect. If you have several files, you can easily keep order in them and it's easy to find what you need. With one file it becomes a challenge.

But there is an easy solution - you can create your own handler that will combine all css files for you and will return them as a single response. If your site is an ASP.NET site, you can use custom resource handler like this one. If you use other environment, you will find something similar for sure. I used my own one with gzip compression enabled, extended caching and setting header values. It not only decreases the number of the requests, but reduces the size of the response as well.

Combine external Javascript

This one is pretty similar to combining css files. However, it has to be extended if you are using Web Extensions - the site will use a lot of .axd files and it's a little bit harder to cope with them. But Damian Kulik created a solution for this which can be found here http://damikulik.blogspot.com/2009/07/script-and-styles-optimizer-for-aspnet.html. I'm not going to copy and paste from his blog here so if you want to know more about it then just stay on his blog for a couple of minutes.

Optimize the order of styles and scripts

The order of the styles and javascript files is really important. Sometimes it is enough just to move link up or down on the page to decrease the time of loading page significantly. How? It's all about the parallelization downloads. The general rule is: css files should be in the < head /> tag, while js files should be placed as far in the content as it is possible, sometimes even just before the end of the < body /> tag. More about ordering on google code.

Optimizing images

There are 2 main rules here:
- use compressed images - in many cases you can compress your images so they look exactly the same but they are smaller. Page Speed will compress the files for you and display links to compressed images so you can use them on your site.
- do not resize images in html - do not display big images that are resized - the browser will have to download the big file anyway and, what is worse, IE browsers use a pretty bad algorithm for resizing images so they look not nice.

CSS sprites

This one is huge! Probably I should mention about it on the very top of the article but never mind. The whole idea of CSS sprites is described on the css tricks site. Instead of downloading dozens of images and wasting time for requesting all of them, you can download only one image and display parts of it wherever you need them. Take a closer look at my site again (el-ART) - there are 6 links with images in the bottom part of the page. If you would check their properties you would see that all of them has the same background - gallery.jpg, just moved with background-position css property. The image is smaller than 6 separate images and browsers load it several times faster.

Compress response

One more thing that could be done is compression of the response html. When you write html then you should format it so it could be easily read and maintain, but when you send it to the user, it should be as small as possible. It really easy to apply it in ASP.NET. The only thing to do is to edit the Application_BeginRequest method in Global.asax.cs class as follows:

protected void Application_BeginRequest(object sender, EventArgs e)
{
    if (Request.RawUrl.ToLower().EndsWith(".aspx"))
    {
        string acceptEncoding = Request.Headers["Accept-Encoding"];

        if (!string.IsNullOrEmpty(acceptEncoding))
        {
            acceptEncoding = acceptEncoding.ToLower();

            if (acceptEncoding.Contains("gzip"))
            {
                Response.Filter = new HtmlCompressStream(Response.Filter, CompressionMode.Compress,
                                                         HtmlCompressStream.CompressionType.GZip);
                Response.AddHeader("Content-encoding", "gzip");
            }

            else if (acceptEncoding.Contains("deflate"))
            {
                Response.Filter = new HtmlCompressStream(Response.Filter, CompressionMode.Compress,
                                                         HtmlCompressStream.CompressionType.Deflate);
                Response.AddHeader("Content-encoding", "deflate");
            }
        }
    }
}

Decrease loading time - summary

All those optimization tips helped me to create the site that is displayed very fast. There are only 12 requests for the content, the size of all of them is about 210KB, and the site loads for me in less than 1 second. Just to show you the difference, BBC site uses 82 requests (556KB) and loads about 10 seconds for me.

If you have any interesting experience with increasing performance of the ASP.NET sites or want to show how you deal with optimizing issues, do not hesitate to leave your comment below.

Useful links:
Firebug
Page Speed
Web Analyzer

EPiServer - hiding 'Workflow' and 'Statistics' tabs

2009-05-15T14:12:00.008+02:00

When you use edit mode of the EPiServer CMS and select any of the pages then you see 5 tabs above it: "View", "Edit", "Version List", "Workflow" and "Statistics". While the first 2 of them are used frequently and the third one ("Version List") is pretty useful for advanced users, the last 2 of them ("Workflow" and "Statistics") are redundant in many cases. And editors don't even need to know that they exist. So lets hide them.

It can be easily done in admin mode with a tool called 'Plug-in Manager' which can be found on the 'Config' tab.

The way of hiding the tabs is slightly different for various versions of EPiServer. I tested it in with 5.1.422.256 and 5.2.375.133 versions.

Hiding 'Workflow' tab:
- in 5.1.422.256 version - choose 'EPiServer.WorkflowFoundation.UI' plugin, switch to 'Overview' tab and deselect 'Workflow (EditPanel)' option in the 'User Interface' section.
- in 5.2.375.133 version - choose 'EPiServer User Interface' plugin, switch to 'Overview' tab and deselect 'Workflow (EditPanel)' option in the 'User Interface' section.

I you need to hide 'Statistics' tab (in both versions) choose 'EPiServer User Interface ' plugin, switch to 'Overview' tab and deselect 'Statistics (EditPanel)' option in the 'User Interface' section.

It can be slightly different in the version of the EPiServer which you use, but the general rule is the same.

EPiServer - filter page tree view

2009-04-15T12:46:00.007+02:00

Recently I was working on the EPiServer site that contains dozens of subsections. Every of them is managed by different editor. I was asked to display in page tree view in edit mode only those pages, that editor has editing access. It is reasonable as having dozens of pages (all marked with padlock) makes editing harder or at least less comfortable. Lets do not talk more about the background and take a look at implementation...

In general I think that EPiServer code is a little bit too sealed. I hate all those classes where you can not reimplement part of the code on your own or where you can not overwrite methods. However, this time I was nicely surprised. It was enough to create custom implementation of the EPiServer.PlugIn.PlugInAttribute and use DataFactory.Instance.FinishedLoadingChildren event.

Actually, on the beginning I wanted to use DataFactory.Instance.LoadingChildren and set RequiredAccess to AccessLevel.Edit (see below), but it didn't work for me. If you know why, please comment so I can learn something :)

private static void Instance_LoadingChildren(object sender, ChildrenEventArgs e)
{
    e.RequiredAccess = AccessLevel.Edit;
}

First I created my class inheriting from EPiServer.PlugIn.PlugInAttribute and implemented Start method so it adds new ChildrenEventHandler to the DataFactory.Instance.FinishedLoadingChildren event:

using System.Web;
using EPiServer;
using EPiServer.Configuration;
using EPiServer.Core;
using EPiServer.PlugIn;
using EPiServer.Security;

namespace Maras.TreeAdapter
{
    public class TreeAdapter : PlugInAttribute
    {
        public static void Start()
        {
            DataFactory.Instance.FinishedLoadingChildren += Instance_FinishedLoadingChildren;
        }

        private static void Instance_FinishedLoadingChildren(object sender, ChildrenEventArgs e)
        {
            if (IsAccessCheckNecessary(e))
            {
                int index = 0;
                while (index < e.Children.Count)
                {
                    if (e.Children[index].ACL.HasAccess(PrincipalInfo.Current.Principal, AccessLevel.Edit))
                    {
                        index++;
                    }
                    else
                    {
                        e.Children.RemoveAt(index);
                    }
                }
            }
        }
    }
}

As you can see, I check whether the access control is necessary and then I remove all the children that current user is not allowed to edit. Pretty important is the IsAccessCheckNecessary method. My implementation assumes that I want to filter pages in edit mode and for the children of the start page only, so it looks like this:

private static readonly string UI_URL = Settings.Instance.UIUrl.ToString().ToLower();

private static bool IsAccessCheckNecessary(ChildrenEventArgs e)
{
    return e.PageLink == PageReference.StartPage &&
           HttpContext.Current.Request.Url.ToString().ToLower().StartsWith(UI_URL);
}

If you know any easier way of doing what I needed, feel free to comment below.

Source code can be downloaded from here: source code

EPiServer rich text editor

2009-03-12T13:13:00.013+01:00

PropertyLongString and XHTML String are probably the most frequently used types of properties in all EPiServer sites. They are used on nearly all content pages. However I wanted to use the editor control on the standard aspx page. I thought it would be really easy - just put HtmlEditor control on my page and voila. It was a little bit more complex but finally I managed to do what I needed.

Lets start with an aspx page. What we need to do is to put <EPiServer:Property /> on the page and set EditMode attribute to true. I set Width and Height attributes as well but this is optional. Remember not to forget about setting runat="server" property. I also put message panel and button on the page so I can show how to access the text put into the wysiwyg editor. Here is my aspx page:

<%@ Page Language="C#" AutoEventWireup="True" CodeBehind="HtmlEditorPage.aspx.cs" Inherits="MyProject.HtmlEditorPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Html Editor Page</title>
        <link rel="stylesheet" type="text/css" href="/App_Themes/Default/Styles/system.css" />
    </head>
    <body>
        <form runat="server" method="post">
            <asp:Panel ID="pnlMessage" runat="server" Visible="false" CssClass="EP-systemMessage">
                <asp:Literal ID="litMessage" runat="server" />
            </asp:Panel>
            <EPiServer:Property id="myHtmlEditor" Width="500" height="350" EditMode="true" runat="server" />
            <asp:Button ID="btnSend" runat="server" Text="Send" OnClick="btnSend_Click" />
        </form>
    </body>
</html>

Now it's time to write something in code behind. First we need to register scripts that are required by the editor. I used ResolveUrlFromUI and ResolveUrlFromUtil methods but if you know your UI and Util directories then you can put whole paths without using those methods. Now lets create new PropertyLongString. We can select chosen editor options for the property or just select EditorToolOption.All. If you don't want to use any of them you don't have to set it at all. Next set Name of your property and assign it to the InnerProperty of the editor. That's all .You have pretty HtmlEditor on your page.

The last thing is accessing the data from the editor. I tried several ways of accessing it but only one worked for me: retrieving content of the property by using value from Request.Form. If you know any smarter way, let me know. So here is code behind (source code can be downloaded from here: source code):

#region

using System;
using EPiServer;
using EPiServer.Core;
using EPiServer.Editor;

#endregion

namespace MyProject
{
    public partial class HtmlEditorPage : SimplePage
    {
        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);

            if (!Page.ClientScript.IsClientScriptIncludeRegistered("system.js"))
            {
                Page.ClientScript.RegisterClientScriptInclude("system.js",
                                                              ((PageBase) Page).ResolveUrlFromUI("javascript/system.js"));
                Page.ClientScript.RegisterClientScriptInclude("system.aspx",
                                                              ((PageBase) Page).ResolveUrlFromUI("javascript/system.aspx"));
                Page.ClientScript.RegisterClientScriptInclude("episerverscriptmanager.js",
                                                              ((PageBase) Page).ResolveUrlFromUtil(
                                                                  "javascript/EPiServerScriptManager.js"));
            }

            PropertyLongString longString = new PropertyLongString();

            // select chosen options or use EditorToolOption.All
            longString.EditorToolOptions = EditorToolOption.Bold | EditorToolOption.Italic | EditorToolOption.Underline;
            longString.Name = "MyLongStringProperty";
            myHtmlEditor.InnerProperty = longString;
        }

        protected void btnSend_Click(object sender, EventArgs e)
        {
            // yeah this is the only way of accessing what you put in the editor
            litMessage.Text = Request.Form[myHtmlEditor.ID + "$ctl00$" + myHtmlEditor.PropertyName];
            pnlMessage.Visible = true;
        }
    }
}

TheBugger - to see without looking

2009-03-06T10:25:00.020+01:00

In my view, one of the most important developer skill is to see without looking. Let me explain what I mean. Assume that we have a piece of code that have some complex functionality. You see it for the very first time and you want to know how it works and what it is used for. You could debug the code of course. However it would be perfect if you were able to see without looking - look at the code, read it and know what it is responsible for.

As in all other cases training makes a master. But still, doing the same thing to many times makes it boring and even annoying. That's why I do really like to practice my skills in some other ways. One of them is minesweeper. Yeah, the same old minesweeper that you had in your first MS Windows. But the rules of the game are to easy for you. So lets make them a little bit harder.

It's really easy to find all bugs when you have a possibility of marking bugs. But what when you can not tick their location? You have to remember their placement, to see where they are without looking at them. First time is not so effortless. Believe me, the second one is much simpler. And tenth is even easier than you expected. The same is with code reading. So don't give up - practice.

Are you able to debug the field without a possibility of marking bugs? Sure you are. If you weren't, you wouldn't be here ;)

Start again

So how fast have you debugged the field?

Any ideas how to make TheBugger more challenging? Leave your comment and I will consider it for sure.

And what are your ways of training your mind?

The easiest way of editing web.config dynamically

2009-03-03T15:13:00.007+01:00

Some time ago I needed to update web.config programatically from my web site in order to add my own key to <appSettings /> tag. I spent a lot of time looking for a solution on the Internet. I wasted a lot of time trying to reuse existing code from the Web but nothing worked for me. I most cases they thrown an exception, some didn't even compile. Finally I found one on my own.

First lets read existing configuration and value of the settings element:

protected void Page_Load(object sender, System.EventArgs e)
{
    if (!IsPostBack)
    {
        System.Configuration.Configuration config = System.Web.Configuration.WebConfigurationManager.OpenWebConfiguration("~");

        System.Configuration.KeyValueConfigurationElement setting = config.AppSettings.Settings["MyValue"];

        if (null != setting)
        {
            // lets do something with the value - displaying it in a textbox is an ides
            textboxValue.Text = setting.Value;
        }
    }
}

We can use web.config file from some other directory if we use its name instead of '~' in WebConfigurationManager.OpenWebConfiguration("~") method.

We've already read the value and displayed it in textbox so we are ready to save updated value (or add new settings element if it hasn't been saved yet).

protected void btnSave_Click(object sender, System.EventArgs e)
{
    try
    {
        System.Configuration.Configuration config = System.Web.Configuration.WebConfigurationManager.OpenWebConfiguration("~");

        System.Configuration.KeyValueConfigurationElement setting = config.AppSettings.Settings["MyValue"];

        if (null != setting)
        {
            config.AppSettings.Settings["MyValue"].Value = textboxValue.Text;
        }
        else
        {
            config.AppSettings.Settings.Add("MyValue", textboxValue.Text);
        }

        config.Save();
        literalMessage.Text = "New value saved. Application will be restarted automatically.";
    }
    catch (System.Exception exc)
    {
        literalMessage.Text = (exc.Message + "<br />" + exc.StackTrace).Replace("\n", "<br />");
    }
}

And that's all. The solution is short so the post is short ;) Any comments? Do not hesitate to write them below.

EPiServer online users list

2009-02-27T10:35:00.019+01:00

Working with the application which is edited by dozens of people makes the application harder to maintain. Have you ever thought about the people that are doing their job editing the site before you start deploy the new version of the application? I hadn't used to... until I got a lot of complaints from editors that lost their job. "I wanted to save what I'd wrote but I got 'service unavailable' message instead" they repined.

It made me look for the solution for this problem. Sure, I could do the new builds during the nights but what if the site is hosted by external company and you don't have access to the servers? You won't be able to force anyone from that company to stay in the office over night just to deploy the new version of the site.

The other solution would be to send emails to all editors saying that server will be restarted so they can can save all their work. This idea has only only small drawback - it assumes that editors check their emails frequently. I've already spent enough time maintaining sites to know that it barely happens.

Finally I found a solution that works fine for me. I use System.Web.Security.Membership to get all users that are logged in and deploy the new builds when no one but me is editing the site.

So lets go step by step with this solution. Firstly I created the web page that would be used to diplay active users. I put the repater on it:

<asp:Repeater ID="rptUsers" runat="server">
    <HeaderTemplate><table></HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td><%# ((MembershipUser)Container.DataItem).UserName %></td>
            <td><%# ((MembershipUser)Container.DataItem).LastActivityDate.ToString("HH:mm:ss")%></td>
        </tr>
    </ItemTemplate>
    <FooterTemplate></table></FooterTemplate>
</asp:Repeater>

and overrode OnLoad method:

public partial class OnlineUsers : SimplePage
{
    private static DateTime applicationStartTime;

    public static DateTime ApplicationStartTime
    {
        set { applicationStartTime = value; }
    }

    protected override void OnLoad(EventArgs e)
    {
        if (!User.Identity.IsAuthenticated)
        {
            AccessDenied();
        }

        List<MembershipUser> users = new List<MembershipUser>();

        foreach (MembershipUser user in Membership.GetAllUsers())
        {
            if (user.IsOnline && user.LastActivityDate > applicationStartTime)
            {
                users.Add(user);
            }
        }

        users.Sort(delegate(MembershipUser u1, MembershipUser u2)
                       { return u2.LastActivityDate.CompareTo(u1.LastActivityDate); });

        rptUsers.DataSource = users;
        rptUsers.DataBind();

        base.OnLoad(e);
    }
}

On the beginning I though it would be enough to check MembershipUser.IsOnline property, but it turned out that when application is started all users are treated as online, cause MembershipUser.LastActivityDate is set to the time when application started. That's why I added applicationStartTime field that I set in Global.asax.cs file in Application_Start method and compare it with LastActivityDate property:

public class Global : EPiServer.Global
{
    protected void Application_Start(Object sender, EventArgs e)
    {
        OnlineUsers.ApplicationStartTime = DateTime.Now;
    }
}

And that's all. I can check whether my build would interrupt anyone's work. Remember, a happy customer is your walking advertisement. Lets try not to upset them unnecessarily ;)

Source code can be downloaded from here: source code

Extended Image Url Property

2009-02-06T13:58:00.014+01:00

Some time ago I got a request from our customer saying "We have so many images in EPiServer that we frequently choose wrong one. Could you provide a functionality so images are displayed in edit mode?".

Sure we can. It's really easy to create own custom propery or extend existing one in EPiServer 5. Some basics about it can be found here on world.episerver.com. In this case I extended PropertyImageUrl property.

First thing that I did was overriding CreatePropertyControl method in my class:

< Hide code

[PageDefinitionTypePlugIn(DisplayName = "URL to Image (Extended)")]
public class PropertyImageUrlExtended : PropertyImageUrl
{
    public override IPropertyControl CreatePropertyControl()
    {
        return new PropertyImageUrlExtendedControl();
    }
}

Then I created PropertyImageUrlExtendedControl (overriding PropertyUrlControl class of course). The only thing that has to be done here is custom implementation of SetupEditControls method:

< Hide code

protected override void SetupEditControls()
{
    base.SetupEditControls();

    Image image = new Image ();
    image.Style.Add("clear", "both");
    image.Style.Add("float", "left");
    image.ImageUrl = PropertyUrl.Value as string;

    if (String.IsNullOrEmpty(image.ImageUrl))
    {
        image.Style.Add("display", "none");
    }

    Controls.Add(image);

    foreach (Control control in Controls)
    {
        if (control is TextBox)
        {
            TextBox tb = (TextBox) control;
            tb.Attributes.Add(
                // clean source or set the new value; hide or display image
                "OnChange",
                @"this.parentNode.getElementsByTagName('IMG')[0].src = this.value;
                if (this.value != null) this.parentNode.getElementsByTagName('IMG')[0].style.display = 'block';
                else this.parentNode.getElementsByTagName('IMG')[0].style.display = 'none';");
            break;
        }
    }
}

First I execute base.SetupEditControls() in order to create label, textbox and file picker. Then I add image, set its source and hide it if the source is empty. The second part of this method allows to update source of the image every time the content of the textbox holding chosen image is changed. It's a short javascript updating the source of the image and hiding or showing the image if the source is empty or not respectively. Result looks like this:

Source code can be downloaded from here: source code

Internet Explorer 6 - Web Developers Nightmare

2009-01-27T14:57:00.020+01:00

I finally have a short break from fixing bugs and writing C# code. I'm creating new templates for one of our products instead. Yeah, I know, developers should not be responsible for html and css stuff. However I do really want to diversify into new areas, cause no one knows what future will bring to us. So I started my work. It's a pretty relaxing activity. No compiling, no complexity - just html, Firebug and me. I wish it were so easy...

Opera, Safari, even Chrome - everything looks smooth. Then I opened what I'd created in IE7. Few fixes and it looks exactly as I wanted. I did it even without Developer Toolbar. I was nearly there - just one last glance in IE6 (Multiple IE is veeeery useful here). Well said "one last glance"... Layout of the page is completely crashed. I feel like I'm writing the page from the scratch. 4 additional lines in <head />:

<!--[if IE 6]>
  <link rel="stylesheet" href="/Styles/ie6.css" type="text/css"
          media="screen" title="IE bugfixes" charset="utf-8" />     
<![endif]-->

and here we go. "display: inline-block", "border-collapse: collapse" (a friend of mine, master of design, didn't even know that such an attribute exists), "clear: both; overflow: hidden;" nearly everywhere. Is my template so wrong? Or maybe it's the "browser". Heh "browser" - maybe I should not even call it with this word.

Maybe if I catch a goldfish or find Alladin's Lamp, I will have a wish "No IE6!". Maybe if I concentrate really hard... Ehhh who I'm trying to cheat. Hope often blinks at a fool. Let's check the reality. Fortunately I have an access to the real data - our products :) Let's look at a sport portal first - over milions page views per day - it seems to be a good place to check stats.

Sport portal users
Browser	Percentage
IE 7	32.7%
IE 6	24.7%
Firefox 3	11.2%
Unknown	8.0%
IE 5.5	5.9%
Mozilla 5	5.3%
Safari	4.1%
Mozilla 4	2.7%
Firefox 2	1.4%
Opera 9	1.5%
IE 8.0	0.5%
...	...

Nearly 25% users with IE6? I hoped it would be significantly less. And who still has IE 5.5? Maybe it's because of the fact that 50% of visitors are form UK and about 10% from both USA and Nigeria. Maybe rest of the world prefers other browsers? Let's check another site - 10k users per day, 26% from Canada, 8% from Span, 4,5% from Philippines, 4% from Lithuania, all other countries less than 1%. Yeah this is really international site.

International site users
Browser	Percentage
IE 6.0	45.9%
IE 7.0	32.3%
Firefox 3.0	9.2%
Netscape 4.0	4.1%
Mozilla 5.0	2.5%
Unknown 0.0	2.1%
Safari 5.0	1.3%
Firefox 2.0	1.2%
...	...

Looks like the world loves IE6. Maybe because it's very slow, maybe because it doesn't display properly thousands of pages, maybe ... I don't even want to guess their reasons. The truth is as you see above. I wish I were allowed to put a big banner on all the sites that my company creates, saying "Still using IE6? With other browsers surfing will be funnier and faster. Don't believe? Try one of the links ... " and display it whenever browser is recognized as IE6 or lower.

Wanna know my opinion? We will never be able to stop supporting IE6. You probably know that old code never dies. I must worry you, old browser never dies neither.

Useful links:
Firebug
Developer Toolbar
Multiple IE

Internal server errors handling

2009-01-25T13:02:00.006+01:00

"Page could not be loaded". "Internal server error". Arghhhh ... When I see such a message on the website I feel like leaving the site hastily and never come back. The worse is when this is a site that I've built ... Ok, I can cope with this when I'm the one who tried to open the page. But what when I don't know that on the site that I'm responsible for, someone gets such a message every minute? And visitors one by one give up entering this page. Yeah, this is a serious problem.

Let's do something with this. Sure, we can create custom error page (like I described it for 404 error here). It would look nicely and inform user that our site encountered some difficulties and that we will deal with them soon surely. Yeah, but we're not able to fix the problem if we don't know about it. Solution seems to be pretty obvious - let's send an email to us informing that the page doesn't work. But what if when we'll try to open the page later, it will be up and running again? Or if the page crashes only in some particular circumstances that we won't be able to reproduce?

It would be really good to know about every error on the site no matter who tried to browse it. We can use Application_Error handler here. The Application_Error event handler is specified in the Global.asax file of the application. This handler is called whenever an unhandled exception is thrown in your application. So let's add this handler and send a notification error every time when something is wrong on our site.

Show code >

public class Global : SiteBase
{
    protected void Application_Error(Object sender, EventArgs e)
    {
        SendEmail(new List<string> { "you@yoursite.com" });
    }

    private void SendEmail(List<string> emails)
    {
        try
        {
            MailMessage objEmail = new MailMessage
            {
                Subject = CreateSubject(),
                Body = CreateMessage(),
                From = new MailAddress("error500@yoursite.com")
            };

            foreach (string email in emails)
            {
                objEmail.To.Add(email);
            }

            SmtpClient smtpClient = new SmtpClient("127.0.0.1"); // assuming that smtp is running locally
            smtpClient.Send(objEmail);
        }
        catch (Exception exc)
        {
            // you can log the exception here
        }
    }

    private string CreateMessage()
    {
        const string message = "500 error on yoursite.com\r\n\r\n" + //
                               "URL: {0}\r\n" + //
                               "RawURL: {1}\r\n" + //
                               "IP: {2}\r\n" + //
                               "Browser: {3}\r\n" + //
                               "Crawler: {4}\r\n" + //
                               "User (if logged in): {5}\r\n" + //
                               "Reason: {6}";

        string browserName = "";
        string crawler = "";
        string user = "";

        if (Request.Browser != null)
        {
            browserName = Request.Browser.Browser;
            crawler = Request.Browser.Crawler.ToString();
        }

        if (User.Identity.IsAuthenticated)
        {
            user = User.Identity.Name;
        }

        return String.Format(message, Request.Url.AbsoluteUri, Request.RawUrl, Request.UserHostAddress, 
            browserName, crawler, user, GetReason());
    }

    private static string GetReason()
    {
        StringBuilder message = new StringBuilder("Error 500");

        Exception currentException;

        for (currentException = HttpContext.Current.Server.GetLastError();
             currentException != null;
             currentException = currentException.InnerException)
        {

            message.AppendFormat("\r\n\r\ntype={0}\r\n\r\nmessage={1}\r\n\r\nstack=\r\n{2}\r\n\r\n",

                                 currentException.GetType().FullName,

                                 currentException.Message,

                                 currentException.StackTrace);

        }
        return message.ToString();
    }

    private string CreateSubject()
    {
        return string.Format("your site 500 error [ {0} ]", Request.RawUrl);
    }
}

You probably won't need it in your development environment, but notification about erros should be a part of you production application for sure. Let me just give a short example:
Pretty big portal. Maintained and upgraded all the time. Up to 1,5 milion page views per day. One of the popular pages that hasn't been touched for a long time was down because of some very low level code change... For 2 weeks. After I added notification about application errors, I was able to fix it immediately. Without it... Most probably it would still be down.

You can tell me that you are brilliant developer, that your sites have no problems, that when you create something you don't have to worry about it anymore. I can pretend that I believe you. Maybe even you are perfect. However remember that hardware and software that you depend on are not.

Intelligent custom 404 page

2009-01-24T13:40:00.004+01:00

Have you ever clicked on the link on some page and got beautiful 404 page saying "Please make sure that you have typed the URL correctly"? Have you ever tried to open link that you found in google, the one that you had opened milion times before, and then saw the same page? I have. I know how annoying it can be. After all it is so easy to create custom 404 error page and display a message that is a little bit more intelligent.

Let's start with our own 404 page. Create new aspx file and call it whatever you want. PageNotFound is what I always use. I think it's good idea not to use the same template that we use for all the rest of our site - after all it is an error page. Pretty simple design, short message, maybe logo and few links with the most common used pages would be just fine. Now we need to set IIS to use this page for 404 errors instead of the default one. It's pretty simple. If you have never done this before take a look here http://technet.microsoft.com/en-us/library/bb727138.aspx. It will take you less than 5 minutes.

Ok, so we have custom error page, but what we were supposed to do was to display some intelligent message. That's the place where we can use url referrer. We can access it from code behind without any problems (Request.UrlReferrer). What does it give to us? In general we have 4 possibilities:

Empty referrer. It means that user either typed the url and made a mistake, clicked on link sent by email of instant messenger or used a bookmark. This is what we can display to them: "Got a wrong link? Mis-typed the url? Your bookmarks are out of date?".

Referrer is search engine. If referrer is from Google, Yahoo or any other search engine it is clear that index of this engine is most probably out of date. So tell user about it. We can even try harder. Several lines of code like those:

Show code >

   string referrer = "";
   if (Request.UrlReferrer != null)
   {
       referrer = Request.UrlReferrer.AbsoluteUri.ToLower();
   }
   if (referrer.Contains("google.") ||
       referrer.Contains("ifind.freeserve") ||
       referrer.Contains("ask.co") ||
       referrer.Contains("altavista.co") ||
       referrer.Contains("msn.co") ||
       referrer.Contains("yahoo.co") ||
       referrer.Contains("looksmart.co"))
   {
       string site = referrer.Split('/')[2];
       string reason = "Incorrect url found in [" + site + "] search engine (searching for: '";
       string[] paramsString = referrer.Split('?');
       if (paramsString.Length > 1)
       {
           List<string> searchTerms = new List<string>(paramsString[1].Split('&'));
           List<string> queryStrings = new List<string>(4) {"q=", "p=", "ask=", "key="};

           foreach (string searchTerm in searchTerms)
           {
               foreach (string queryString in queryStrings)
               {
                   if (searchTerm.StartsWith(queryString, StringComparison.OrdinalIgnoreCase))
                   {
                       reason += searchTerm.Replace(queryString, "").Replace("+", " ");
                   }
               }
           }
           reason += "')";
       }
   }

give us information about what user looked for. Maybe we're able to give them a hint with few most probable links?

If referrer is from some other site then we know that link on that site is incorrect. We're not able to do anything about this but we can always inform user that it's not our fault and that the link that they used is wrong.
The last possibility is that referrer is from our site. It would be good to apologize and fix the link.

Yeah, fix the link ... Easy to say but ... we would have to know that we have a bad link somewhere on our site first. It is easier than you think. Let's send an email to us. Another piece of code will send a mail to our addresses with information on where user came from and what wasn't found:

Show code >

   private void SendEmail(List<string> emails)
   {
       MailMessage objEmail = null;
       try
       {
           objEmail = new MailMessage
                          {
                              Subject = CreateSubject(),
                              Body = CreateMessage(),
                              From = new MailAddress("error404@yourdomain.com")
                          };
           foreach (string email in emails)
           {
               objEmail.To.Add(email);
           }

           SmtpClient smtpClient = new SmtpClient("127.0.0.1"); // assuming that smtp is running locally
           smtpClient.Send(objEmail);
       }
       catch (Exception exc)
       {
           LOG.Error(String.Format("Exception while sending email {0}", objEmail), exc);
       }
   }
 
   private string CreateSubject()
   {
       return string.Format("your site 404 error [ {0} ]", Url);
   } 
 
   private string url; 
 
   private string Url
   {
       get
       {
           if (null == url)
           {
               string[] urls = Request.RawUrl.Split(new[] { ";" }, StringSplitOptions.RemoveEmptyEntries);

               if (urls.Length > 1)
               {
                   url = Request.RawUrl.Substring(urls[0].Length + 1);
               }

               if (url.Contains(":80/"))
               {
                   url = url.Replace(":80", "");
               }
           }
           return url;
       }
   }
 
   private string CreateMessage()
   {
       const string message = "404 error on yoursite.com\r\n\r\n" + //
                              "URL: {0}\r\n" + //
                              "Referrer: {1}\r\n" + //
                              "IP: {6}\r\n" + //
                              "Browser: {2}\r\n" + //
                              "Crawler: {3}\r\n" + //
                              "User (if logged in): {4}\r\n" + //
                              "Possible reason: {5}";

       string browserName = "";
       string crawler = "";
       string referrer = "";
       string user = "";

       if (Request.Browser != null)
       {
           browserName = Request.Browser.Browser;
           crawler = Request.Browser.Crawler.ToString();
       }

       if (Request.UrlReferrer != null)
       {
           referrer = Request.UrlReferrer.AbsoluteUri.ToLower();
       }

       if (User.Identity.IsAuthenticated)
       {
           user = User.Identity.Name;
       }

       return String.Format(message, Url, referrer, browserName, crawler, user, GetReason(referrer, Url), 
           Request.UserHostAddress);
   }
 
   private static string GetReason(string referrer, string url)
   {
       try
       {
           string reason;
           if (String.IsNullOrEmpty(referrer))
           {
               reason = "Mis-typed URL - empty referrer";
           }
           else if (referrer.Contains("google.") ||
                    referrer.Contains("ifind.freeserve") ||
                    referrer.Contains("ask.co") ||
                    referrer.Contains("altavista.co") ||
                    referrer.Contains("msn.co") ||
                    referrer.Contains("yahoo.co") ||
                    referrer.Contains("looksmart.co"))
           {
               string site = referrer.Split('/')[2];
               reason = "Incorrect url found in [" + site + "] search engine (searching for: '";
               string[] paramsString = referrer.Split('?');
               if (paramsString.Length > 1)
               {
                   List<string> searchTerms = new List<string>(paramsString[1].Split('&'));
                   List<string> queryStrings = new List<string>(4) {"q=", "p=", "ask=", "key="};

                   foreach (string searchTerm in searchTerms)
                   {
                       foreach (string queryString in queryStrings)
                       {
                           if (searchTerm.StartsWith(queryString, StringComparison.OrdinalIgnoreCase))
                           {
                               reason += searchTerm.Replace(queryString, "").Replace("+", " ");
                           }
                       }
                   }
                   reason += "')";
               }
           }
           else if (url.Split('/')[2] != referrer.Split('/')[2])
           {
               reason = "Incorrect url on the referring site ( " + referrer + " )";
           }
           else if (url.Split('/')[2] == referrer.Split('/')[2])
           {
               reason = "Incorrect url on yoursite.com ( " + referrer + " )";
           }
           else
           {
               reason = "unknown reason";
           }
           return reason;
       } catch (Exception exc)
       {
           LOG.Error("exception while looking for a reason", exc);
       }
       return "Unknown";
   }

What is more, if many users try access the same not existing url (e.g. we change the url of one of the pages on our site), we can redirect them where they most probably wanted to be. I recommed using 301 redirect (permanently moved) instead of 302 (temporarily moved). I'm not going to draw water in a sieve trying to convience anyone of pros and cons of 301 redirect - if anyone is really interested in this, type 301 vs 302 in google. It's enough of this in the web already, let's do not create any artifical crowd ;)

Let's go further with 404. Our custom 404 page will inform us not only about not existing pages, but about the missing images, javascript files or even hacking attempts. If you will notice that some ips flood you with suspicious requests, you can always ban them. And if you are tired of getting and getting 404 emails that you are not interested in, you can always create a list of regexes and filter what do you want to send and what not.

Agree with me or not, but custom error pages for 404 or 500 errors should be one of the first steps in web application development.