Using database ID’s to create short links

To address this my original idea was to simply rely on the auto-incremented row ID’s for each item in the database.  For the database table, this looks something like this:

Which means it would be easy to utilize shortened URL’s that look like this:

• http://mywebsite.com/1
• http://mywebsite.com/2
• http://mywebsite.com/95131

However, these URL’s aren’t as short as they could be.  By only utilizing numbers (0-9) we’re not utilizing other valid characters (A-Z, a-z, -, _) that could potentially be used to create shorter URL’s.

Using Base 64 to create shorter URL’s

The numbers I’m utilizing for my database ID’s are using numbers based on 10.  Using this type of number I’m only utilizing the 0-9 characters  However, numbers that are based on 64 utilize other characters to represent numbers for which we do not have a character.

The way base 64 numbers are represented matches nicely with the characters that can be used in a URL.  Therefore, by converting my base 10 database id’s into base 64 I’ll get a shorter URL.  At the same time, I can be assured that the shortened URL’s aren’t duplicated since they are based on a unique database ID.

C# code for converting a Base-10 Integer to a Base-64 String

Ultimately, I wanted a solution that would work like this:

• ShortUrl.Shrink(95131) => Returns “XOb”
• ShortUrl.Expand(“XOb”) => Returns 95131

Here is the code I came up with.

using System;
using System.Linq;
using System.Text.RegularExpressions;

namespace MvcApplication.Helpers
{
    public static class ShortUrl
    {
        /// <summary>
        /// Converts a Base-10 Integer to Base-64.  This will effectively shorten the number of characters used to represent a number > 10.  
        /// </summary>
        public static string Shrink(int Number)
        {
            return ConvertDecToBase(Number, 64);
        }

        /// <summary>
        /// Converts a Base-64 Number (represented as a string) into a Base-10 Integer.  This will effectively expand the numbers of characters needed to represent the number.
        /// </summary>
        /// <param name="NumberString"></param>
        /// <returns></returns>
        public static int Expand(string NumberString)
        {
            return ConvertBaseToDec(NumberString, 64);
        }

        private static string DefaultChars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
        private static string Base64Chars =  "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_";

        private static int ConvertBaseToDec(string NumberString, int Base)
        {
            string Chars;
            if (Base == 64)
            {
                NumberString = Regex.Replace(NumberString, "^A+", "");
                Chars = Base64Chars;
            }
            else
            {
                NumberString = Regex.Replace(NumberString, "^0+", "");
                Chars = DefaultChars;
            }

            int Dec = 0;
            for (int i = 0; i <= NumberString.Length - 1; i++)
            {
                int CharNum = Chars.IndexOf(NumberString[i]);
                int Conversion = CharNum * IntPow(Base, (NumberString.Length - (i + 1)));
                Dec = Dec + Conversion;
            }

            return Dec;
        }

        private static string ConvertDecToBase(int OriginalNumber, int Base)
        {
            char[] Chars;
            if (Base == 64)
            {
                Chars = Base64Chars.ToCharArray();
            }
            else
            {
                Chars = DefaultChars.ToCharArray();
            }

            string encoded = "";
            encoded = ConvertDecToBase(OriginalNumber, Base, encoded, Chars);
            return encoded;
        }

        private static string ConvertDecToBase(int Number, int Base, string EncodedString, char[] Chars)
        {
            if (Number < Base)
            {
                EncodedString = EncodedString + Chars[Number];
            }
            else
            {
                int NewNumber = Number / Base;
                EncodedString = ConvertDecToBase(NewNumber, Base, EncodedString, Chars);

                Number = Number - (NewNumber * Base);
                if (Number < Base)
                {
                    EncodedString = EncodedString + Chars[Number];
                }
            }
            return EncodedString;
        }

        private static int IntPow(int x, int pow)
        {
            int ret = 1;
            while (pow != 0)
            {
                if ((pow & 1) == 1)
                    ret *= x;
                x *= x;
                pow >>= 1;
            }
            return ret;
        }
    }
}

Some notes

• The reason I didn’t use C#’s built-in Base-64 encoding is because it adds padding to the string.  As a result, the Base-64 string often becomes longer than the original decimal number.  (Making it useless for link shortening)
• There are decimal numbers that, when converted to Base-64, will turn into offensive words.  I haven’t dealt with this yet.
• Someone else created a Base-10 to Base-64 converter with C#.  It looks like this code uses bit-shifting.  This is probably faster (and more clever), but I had trouble understanding the code.
• There is a nice website that you can use to test these conversions.
• That website is based on some PHP-code that can be found here.

Responsive design is supported by 70-80% of today’s web devices

However, the complete answer is a lot more nuanced than this.  The number above examines all web-related traffic.  However, responsive design is often used to target mobile devices.  Those statistics look a lot different.  Furthermore, there are techniques for addressing browsers & devices that do not support responsive design.

This post will examine the details missing from the generic statistic above.

What web browsers support CSS3 media queries?

CSS3 media queries are the primary technology powering responsive design.  These queries enable web designers to customize the website’s style for different form factors (desktop, smartphone, tablet, print, etc.). Consequently, quantifying web browser support of responsive design requires an examination of CSS3 media query support:

[Image courtesy of caniuse.com]

The biggest red flag is Internet Explorer, which only recently began supporting CSS3 media queries with IE9.  IE9 is the current version of IE and previous versions still have significant marketshare.  In fact, as of this writing IE 8 maintains the largest marketshare (22.3%) for a single version of a web browser.

[Image courtesy of statcounter.com] 

If we add IE8 (22.3%), IE7 (3.96%) and IE6 (1.85%) then we quickly begin to climb towards the 20-30 non-supported percentage stated at the beginning of this post.  However, it’s worth noting that browser statistics vary per website.  For example, W3schools.com puts IE8 usage at 10.5%.  You’ll want to compare these general statistics with the statistics for your website.

How many mobile browsers support CSS3 media queries?

Many websites are using responsive design to target mobile devices (smartphones & tablets).  As shown above, IE8 is a cause for concern on desktop computers; however, IE usage on mobile devices is relatively insignificant:

[Image courtesy of hitslink.com]

These mobile statistics vary strongly based on region.  For example, Opera is the most popular mobile browser for large parts of Africa & Asia:

[Image courtesy of browserrank.com]

The good news is that CSS3 media queries are supported in all dominant mobile browsers (Android, iPhone, Opera, Blackberry, etc).

[Image courtesy of quicksmode.org]

As a result, if you’re primarily using responsive design to “gracefully degrade” your default website design for tablets and smartphones then CSS3 media queries are widely supported (90%+ support).  However, as with desktop traffic you’ll want to compare these statistics with your own website.

Does it really matter if Responsive Design isn’t supported?

Web browsers simply ignore anything they do not understand.  This behavior creates the basis for backwards compatibility on the web.  In fact, it’s possible for a modern HTML5 web page to be usable with a text-only browser.

Consequently, your website can utilize CSS3 media queries to create a responsive design while still addressing browsers and devices that do not yet support this technique.  Doing this requires you to define a set of base layouts, styles & functionality that would be appropriate for older browsers & devices.  CSS3 media queries would then be layered on.  Older browsers would ignore these unrecognized attributes and newer browsers would become enhanced by them.  In both cases the web page remains usable.

This design philosophy is known as progressive enhancement and it’s worth studying. These techniques can be supported at different levels, but at their core they enable you to utilize responsive design while still addressing older clients.

Conclusion – go ahead and give it a try

Responsive design is already supported by the majority of web traffic  (70-80%).  For mobile devices, that support is even higher (90%+).  Furthermore, CSS3 media queries are simply ignored if they aren’t supported.  Consequently, it’s possible to create a web design that is enhanced when possible but degrades when necessary.  As a result, there is no reason not to start experimenting with responsive design techniques on your own website.

Update from Reddit:  There is a clever Javascript library called respond.js that can be used to emulate CSS3 media query support in IE6, IE7 and IE8.

More information about responsive design

Content Management Systems (CMS) are a vital tool for creating and maintaining a modern web site.

However, CMS’s vary in price from free to $100k+ and there are widely differing opinions about what a CMS should cost.  I’m probably not going to change any minds on this and I’m not terribly interested in trying.  However, I would like to better frame this conversation.

Why is your CMS so expensive?

I work for Telerik and we have a CMS called Sitefinity.  This is a proprietary CMS that ranges in price from $499 – $7,999+.  Keep reading though.  I’m not here to sell you anything and if you think open-source is the way to go, have at it.  In the past I’ve been on both sides of the open-source debate; today I’m simply busy and only want to get work done faster (best tool for the job).

Nevertheless, I’ve had the “your software is too expensive” conversation more times than I would like.  I’ve also needed to answer people who ask “Why on earth would anyone buy a CMS?“.  Here is my best attempt at an answer…

Should a plow horse expect to be fed?

I know, I know…we’re a few generations removed from people with direct experience working with plow horses.  A plow horse is a beast of burden that helped farmers (prior to machines) till soil and generally be more productive.  In return, the farmer invested a small portion of their return back into the plow horse (via food).

Consider that the CMS is our modern day plow horse; it’s a tool that (hopefully) helps us produce more value from our websites.  How much value?  To answer that question you need to determine how much revenue you derive from your website.  Do you sell products?  Do you generate business leads?  Do you take donations?  Do you offer support?  All of these activities have a measurable business value that can be associated with the website.  For a given year, what is that value?

Let’s assume that number is as little as $100K.  It doesn’t seem unreasonable to imagine many organizations could associate $100K+ of annual value with their websites.  It’s also reasonable to expect that some percentage of that revenue should be re-invested to evolve and maintain the website.  In other words, take a small fraction of your return and feed your plow horse.

If an organization realizes $100K of annual revenue from their website and re-invests only 6% back into their website, that becomes $6K.    Does that feel unreasonable?  We’re talking about a single-digit percentage investment to maintain a tool that  helps us be more productive.

Penny-wise & pound-foolish

If you can accept the premise I’ve outlined above, then it simply becomes a process of discovering where you can get the most bang from your buck.  The cost of a CMS becomes negligible (even unimportant) IF it empowers you to be more productive.  By contrast, pinching pennies during CMS selection could leave you perpetually handicapped;  ultimately causing you to sacrifice lots of revenue due to missed opportunities.

Against this backdrop, I could make a case for our own CMS.  Hell, I might even be right if the use-cases we target align with your own needs.  It’s also possible that an open-source solution might be a better fit.  Either way, the price isn’t what’s important.  What’s important is choosing a CMS that helps you be productive.  In summary, choose wisely, and the CMS will pay for itself.

Update:  After writing this I realized I failed to mention the full ecosystem of implementors and analysts that exist around CMS deployments.  Everything I’ve written is equally applicable to them.  These people, through their expertise, can provide equal amounts of value for organizations wishing to maximize the returns from their website.

Video-conferencing solutions at a glance

All video-conferencing solutions limit how many attendees can participate with their webcams.  Once this limit is exceeded, the behavior varies from service to service.  However, most services will support several more audio-only participants.  Below I’ve summarized the video and total limits for each service.

 What happens when the video limit is exceeded?

Gotomeeting -Video in Gotomeeting is first come, first serve.  Each participant must manually enable their webcam.  However, once the 6 video-user limit is reached the option is disabled for other attendees.  These other attendees will be audio-only, able to see the 6 video users, but not utilize their own webcam.

Webex – When more than 7 participants join the meeting the meeting moderator can  select who can share video.  Up to 25 total participants can join the call but only 7 will have video sharing options available.

Skype – When more than 10 participants join, video conferencing and screensharing get disabled for everyone.  After this, the call continues and up to 25 participants can join for audio-only conferencing.

Google Hangouts – There is a hard cap of 10 participants.  Anyone else who joins the conference will be put into spectator mode.  They can hear the conference, but not participate.  I’m intrigued by Google Hangouts, but the 10 person limit is a deal-breaker.

Microsoft Lync – Using Lync all participants can utilize their webcam, but only the speaker gets focus (no Hollywood Squares style display).  Furthermore, I’m seldom able to get Lync to perform reasonably with 2 participants, let alone 250.  This problem becomes even worse for our telecommuters who are forced to VPN into the network to utilize Lync.  On a LAN this might be a great solution; however, for our distributed team Lync does not produce great results.

Oovoo – I have no direct experience with Oovoo yet.  If you do, feel free to comment below.

Blue Jeans Network – I have no direct experience with Blue Jeans Network yet.  I’m intrigued by its ability to bridge multiple solutions (WebEx, Skype, etc.) though.  I would love to see feedback from others who have direct experiences with this service.

Our current solution

For the time being we’re using Skype for voice-only communication.  It’s ubiquitous, which is nice; it also has integrated chat which the evangelism team seems to enjoy using during the meetings.  For screen-sharing, we’ll probably just fire-up a Gotomeeting session as needed.  We’ll only use it for screen-sharing and disable the audio.

In a nutshell, we’re abandoning video-conferencing entirely.  I’m not happy about this, but I haven’t been happy with any of the other options either.  I’ll update this post if I locate a better solution or more information.

Special thanks to @ryanlowdermilk for helping with this post.

After joining Telerik,  I launched sitefinitywatch.com and never again touched goondocks.com.  Consequently, this blog has stagnated and become a dumping ground for spammers.  There are now thousands of blog comments that contain nothing but spam:

I wanted to import my old blog posts and legitimate comments to this blog.  If you scroll down below you’ll see I’m using Disqus to manage my comments on this blog.  Consequently, I needed to find a way to filter the SPAM from these comments, export the comments from Sitefinity 3.x and then import these comments into Disqus.

How to import comments into Disqus

1. Creating a Test Forum on Disqus
1. Seriously, you’re going to make mistakes
2. Read the following resources:
1. Custom XML Import Format
2. Importing-Comments-into-Disqus
3. How to import your existing database comments into Disqus using generic WXR XML format
3. Create your Sitefinity Comments Export
1. Add the code below to your Sitefinity 3 project
2. Access the page and paste the resulting XML into Notepad
4. Upload the XML file to Disqus
5. Wait….

 Exporting Sitefinity 3 Comments using the API

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>

<!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 id="Head1" runat="server">
    <title>Use Ctrl + A to select All, then Paste into Notepad.  This is your XML export file.</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    <asp:Repeater ID="xmlRepeater" runat="server">
    <HeaderTemplate>
<pre>
&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
&lt;rss version=&quot;2.0&quot;
  xmlns:content=&quot;http://purl.org/rss/1.0/modules/content/&quot;
  xmlns:dsq=&quot;http://www.disqus.com/&quot;
  xmlns:dc=&quot;http://purl.org/dc/elements/1.1/&quot;
  xmlns:wp=&quot;http://wordpress.org/export/1.0/&quot;
&gt;
  &lt;channel&gt;
    </HeaderTemplate>

    <ItemTemplate>
    &lt;item&gt;
      &lt;title&gt;<%# Eval("[Title]") %>&lt;/title&gt;
      &lt;link&gt;http://www.goondocks.com/blog<%# Eval("[Url]") %>.aspx&lt;/link&gt;
      &lt;dsq:thread_identifier&gt;<%# Eval("[ID]") %>&lt;/dsq:thread_identifier&gt;
      &lt;wp:post_date_gmt&gt;<%# Eval("[DatePosted]")%>&lt;/wp:post_date_gmt&gt;
      &lt;wp:comment_status&gt;open&lt;/wp:comment_status&gt;

      <asp:Repeater DataSource='<%# Eval("[Comments]") %>' runat="server">

      <ItemTemplate>
        &lt;wp:comment&gt;
        &lt;wp:comment_id&gt;<%# Eval("[ID]") %>&lt;/wp:comment_id&gt;
        &lt;wp:comment_author&gt;<%# Eval("[Author]") %>&lt;/wp:comment_author&gt;
        &lt;wp:comment_author_email&gt;<%# Eval("[Email]") %>&lt;/wp:comment_author_email&gt;
        &lt;wp:comment_author_url&gt;<%# Eval("[Website]") %>/&lt;/wp:comment_author_url&gt;
        &lt;wp:comment_author_IP&gt;<%# Eval("[IpAddress]") %>&lt;/wp:comment_author_IP&gt;
        &lt;wp:comment_date_gmt&gt;<%# Eval("[DatePosted]")%>&lt;/wp:comment_date_gmt&gt;
        &lt;wp:comment_content&gt;&lt;![CDATA[<%# Eval("[Text]")%>]]&gt;&lt;/wp:comment_content&gt;
        &lt;wp:comment_approved&gt;1&lt;/wp:comment_approved&gt;
        &lt;wp:comment_parent&gt;0&lt;/wp:comment_parent&gt;
        &lt;/wp:comment&gt;
      </ItemTemplate>

      </asp:Repeater>

    &lt;/item&gt;
    </ItemTemplate>

    <FooterTemplate>
  &lt;/channel&gt;
&lt;/rss&gt;    
</pre>
    </FooterTemplate>
    </asp:Repeater>
    
    </div>
    </form>
</body>
</html>

using System;
using System.Collections;
using System.Web;
using Telerik.Cms.Engine;
using System.Text.RegularExpressions;

public partial class test : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Telerik.Cms.Engine.ContentManager contentManager = new Telerik.Cms.Engine.ContentManager("Blogs");
        IList posts = contentManager.GetContent();
        ArrayList Posts = new ArrayList();
        int Count = 0;

        // Loop through all blog posts
        foreach (IContent post in posts)
        {
            // Yes, I know ArrayLists and Hashtables are lame.  However, Sitefinity 3 was built with .NET 2.0 
            // which doesn't support generics and I didn't want to take the time to fully implement IList.

            Hashtable Post = new Hashtable();

            Post.Add("ID", post.ID);
            Post.Add("Title", post.GetMetaData("Title"));
            Post.Add("Url", post.Url);
            // That "GeteCreationDate()" only exists in later version of Sitefinity 3.x.
            Post.Add("DatePosted", post.DateModified.ToUniversalTime().ToString("yyyy-MM-dd HH:mm:ss"));
            Post.Add("Comments", new ArrayList());

            foreach (IComment comment in post.Comments)
            {
                ArrayList Comments = new ArrayList();

                // I had a TON of spam in my blog (thousands of comments), this is used to filter this SPAM.
                // Sorry for the offensive language, you can thank spammers for this.
                if (
                    comment.Visible == true &&
                    comment.IsReadByUser("admin") == true &&
                    comment.Text.Length > 100 &&
                    comment.GetCreationDate() < new DateTime(2011, 1, 1) &&
                    Regex.IsMatch(comment.Email, @"aol\.com") == false &&
                    Regex.IsMatch(comment.Author, @"\@") == false &&
                    String.IsNullOrEmpty(comment.Author) == false &&
                    Regex.IsMatch(comment.Text.ToString(), @"penis") == false &&
                    Regex.IsMatch(comment.Text.ToString(), @"sex") == false &&
                    Regex.IsMatch(comment.Text.ToString(), @"herbal") == false &&
                    Regex.IsMatch(comment.IpAddress.ToString(), @"121\.204") == false
                    )
                {
                    Count++;
                    Hashtable Comment = new Hashtable();
                    Comment.Add("ID", comment.ID);
                    Comment.Add("Author", comment.Author);
                    Comment.Add("Email", comment.Email);
                    Comment.Add("Website", comment.WebSite);
                    Comment.Add("Text", HttpUtility.HtmlEncode(comment.Text));
                    Comment.Add("IpAddress", comment.IpAddress);
                    // That "GeteCreationDate()" only exists in later version of Sitefinity 3.x.
                    Comment.Add("DatePosted", comment.GetCreationDate().ToUniversalTime().ToString("yyyy-MM-dd HH:mm:ss"));

                    ((ArrayList)Post["Comments"]).Add(Comment);
                }
            }

            if (((ArrayList)Post["Comments"]).Count > 0)
            {
                Posts.Add(Post);
            }
        }

        xmlRepeater.DataSource = Posts;
        xmlRepeater.DataBind();
    }
}

The Holidays are upon us and 2011 is nearly gone.  This past year has been extremely busy and significant for Sitefinity.  Before we move into 2012 I want to reflect on 2011.  This post is strictly my personal opinion and, consequently, is being published to my personal blog.

I’m publishing this for Sitefinity customers who might be interested in a Telerik insiders’ perspective on this past year.  Hopefully this provides some context and a glimpse into what’s coming in 2012.

Rewind, back to January 2011

I can’t address the significance of 2011 without talking about the release of Sitefinity 4.0.

Sitefinity 4.0 was a huge milestone for us and its release marked a transition to a new chapter in Sitefinity’s evolution.  Sitefinity 4.0 changed everything.  This isn’t marketing babble, this is truth.  Not one line of Sitefinity 3 code was used in Sitefinity 4.  Furthermore, in addition to rebuilding the product, we also introduced a new licensing and pricing model.

If you’re thinking “that looks like a lot of change to navigate”, then you’d be right.  Saying Sitefinity 4.0 was “disruptive” would be an understatement.  We were prepared for some measure of this, but it took a lot more time than expected to fully assimilate these changes.

Why was all this change needed?

For those who don’t know, I was a Sitefinity customer before I was an employee.  When I discovered Sitefinity (back in 2007) this was the tag-line:

At the time, this tagline matched my mental model.  I was a “developer” and I needed to deliver a website that could be managed by “end-users”.  Sitefinity spoke to me with this message and the product walked the talk.  I loved it!

However, this message now looks simplistic to me.  “End-user” is just a generic bucket where we dump everyone who isn’t us.  If you talk to those “end-users” you quickly discover real people with rich skillsets and objectives.  The CMS belongs as much to them, as it does developers.  Managing a modern website requires collaboration between multiple audiences and a good CMS enables this collaboration while simultaneously empowering diverse audiences throughout the organization.

This trend is a natural by-product of the web’s popularity.  An organization’s website is no longer a piece of technology, but instead a vital communication conduit.  As a result, the website impacts the entire organization and CMS stakeholders are diversifying.  Consequently, Sitefinity needed to engage beyond developers to address complex organizational challenges (governance, communication, collaboration, syndication, etc.).

Historically Sitefinity was an $899 product marketed and sold to developers.  If we wanted to move beyond this model, then substantial changes were required to the product and our organization.

Getting from here to there

I understand there could be debate about whether the premise outlined above is correct.  Some organizations still view the website as a “technology resource”.  As a result, CMS selection continues to be driven exclusively by the IT department and “users” simply inherit their decision.  For those scenarios, an $899 developer-focused product continues to be very attractive.

However, these scenarios are diminishing.  Internally, we became convinced Sitefinity needed to evolve beyond its historic market positioning to remain relevant.

This led to 3 conclusions:

1. We needed to rebuild Sitefinity from the ground-up.
2. We needed to double+ the size of the Sitefinity team.
3. We needed to change Sitefinity’s licensing.

I could write very long posts exploring each of these 3 decisions; instead I’ll try to quickly summarize:

• Rebuilding Sitefinity – When Sitefinity 3 was conceived, .NET 2.0 was the predominant framework.  A lot has happened since then and it was becoming difficult (hacky) to evolve the platform.  Rebuilding on .NET 4 enabled us to utilize a lot of newer technologies (WWF 4.0, web services, LINQ, etc.).  In addition, Sitefinity 3 was built on Nolics and Nolics is dead.
• Doubling the team – Rebuilding and then extending the product takes a lot of manpower.  In addition, selling a CMS to non-developers takes a very different sales organization.  Not to mention support, partner managers, etc…
• Changing the licensing – I could simply refer to #2, but it goes beyond that.  A flat $899 price would not fuel product development at our current pace, nor support the large customer projects that we were engaging with.  The new tiered pricing was implemented to provide a more sustainable & accessible licensing framework.

We knew these decisions would cause discomfort for existing customers and none of us felt happy about this.  However, we viewed this as a necessary transition needed to evolve Sitefinity.

Weathering the storm

We underestimated what it would take to assimilate all of this change.  It’s like dropping a boulder into a pond while you’re sitting in a boat.  You expect some waves and brace for them, but in this case the waves continued for months.

A big part of 2011 was devoted to stabilizing Sitefinity (the product, the organization, the community) after this change.  This included a stream of product releases, license extensions, extensive support, etc. It’s been an exhausting year.

However, under difficult circumstances the team has pulled together to deliver the best possible results.  We’ve made massive headway in 2011.  Today, Sitefinity is seeing strong adoption and customers are now delivering a stream of results on Sitefinity 4.

With our recent upgrade initiative, we’re largely closing the book on this difficult transition.  Of course it’ll never fully be done, but we feel good about where we’re starting in 2012.

A quick word for the developer audience

I already expressed our desire to engage beyond developers with Sitefinity 4.  In practical terms, this meant a heavy emphasis on usability.  It also meant a lot of features like scheduling, layouts, workflows, granular permissions, a form builder, rich classifications, etc., etc.  These features are designed to empower people throughout the organization.

However, in the midst of empowering non-developers we complicated things that .NET developers loved about Sitefinity 3; this primarily being the accessibility of Sitefinity’s extensibility.  My phrasing is very precise here.  Sitefinity 4 has obscene amounts of extensibility, but to a developer with a tight deadline (most of us) this extensibility isn’t easily grasped or utilized.

We’ve addressed this through “teaching resources” (Sitefinity SDK, extensive documentation, webinars, videos, blogs), but it still takes too much time to absorb.  Our goal in Q1 2012 is to create an extensibility framework that is naturally intuitive to .NET developers.  We’ll do this primarily through the Module Builder and with Sitefinity Thunder (roadmap).

Expect to hear more about this in January and February.  We’ll iterate on these tools rapidly until extensibility is widely accessible & utilized.  After all, developer productivity is what Telerik is widely recognized for.  It’s time for us to reclaim this benefit.

Wrapping up…

As many of you know Telerik is based in Sofia, Bulgaria and most of the Sitefinity team resides at this office.  I personally work from our Houston office and I visit Telerik HQ each year in October.  I chat with my co-workers constantly, but I only get to see them (in person) once a year.  This provides me a chance to view a time-elapsed perspective of this team and their growth.

Here is the team in October of 2010:

Here is the team in October of 2011:

This past October I left very optimistic.  My optimism didn’t stem from any grandiose idea that I saw prototypes for.  Instead, my optimism stemmed from the maturity and discipline I saw in action.  It was great to listen to their scrum meetings, their testing conversations, their planning meetings, etc.  The difficulties of this past year have made this team stronger and wiser.

Of course, we still have a lot of work ahead of us.  But we’re closing the book on 2011 and with it the high-volume of change that we needed to assimilate.  In 2012 we will finally get to explore the capabilities of this new team and product we’ve created.  As an evangelist, that makes me excited.  As a customer, hopefully it makes you excited too.

Happy Holidays and we’ll chat next year!  :)

However, it’s the web browser component of this device that caught my attention.

Introducing Amazon’s Silk Web Browser

Amazon is calling the Kindle Fire’s browser “Amazon Silk”.  This browser is based on WebKit, but utilizes Amazon’s Elastic Computing to optimize the delivery of web content. [More details]

This video gives a nice overview of how this works.

http://www.youtube.com/watch?feature=player_embedded&v=_u7F_56WhHk

The key point to understand is that the web request will be coming from Amazon’s Elastic Computing infrastructure, not the visitor’s Kindle Fire device.  For web sites that are doing personalization, content targeting or analytics, this presents a challenge.

It’s all about the experience

Web Experience Management is the latest hot trend in CMS.  WEM enables marketers to slice & dice their visiting audience into segments (based on behavior patterns, geolocation and profiles) and personalize content accordingly.

The ultimate goal is increased engagement (we want to cultivate a more engaged audience).  In practical terms though, this translates into more buying, sharing, subscribing, clicking, etc.

However, these personalization and targeting tools are often initially based on the IP address of your anonymous visitor.  Using their IP address the CMS can approximate which region of the world they are in and subsequent page requests bring their profile into clearer focus.

But what happens to this personalization when all the web requests are coming from Amazon’s Elastic Computing infrastructure?

Opera did it – and it broke personalization

Although not entirely the same, Opera already implemented a similar feature known as Turbo into their browser.  Opera, like Amazon Silk, is acting as a proxy and pre-fetching content on behalf of slower browsers.

As a little test, I fired up Opera Turbo and pointed it at WhatIsMyIPAddress.com.

For the record, I’m not off the cost of Africa and my ISP isn’t Opera Software.  Here is another test searching for “restaurants” with Google:

Google is very good at approximating your location (try it) and presenting restaurant results for your area.  However, with Opera Turbo it completely fails and they are forced to ask for my zip code.

There is still hope

Amazon Silk was only announced yesterday so details are still emerging.   It’s possible that Amazon has a solution to these challenges.  However, as demonstrated, these pre-fetching techniques can present sizable challenges for organizations that are employing personlization or content targeting on their web sites.  It will be interesting to see how Amazon addresses these challenges and how the CMS industry is impacted (if at all).

Long-term, I can’t imagine these pre-fetching technique will become widespread.  Mobile devices are getting increasingly more powerful and wireless broadband is becoming ubiquitous.  It will only be a matter of time before page load times are a non-issue.

However, content authors are often baffled by the behavior of these tools.  In fact, many characterize their Rich Text editor as the most fragile part of their CMS.  This blog post is inspired by my research into this challenge.

Why is web-based Rich Text editing so challenging?

• Web “browsers” were never designed to be MS Word.
• Lack of standards around browser-based WYSIWYG editing
• Each browser has a unique implementation of this functionality
• Rich Text editors require many layers of ‘hacks’ to create WYSIWYG editing

** Standards are beginning to emerge through HTML5

How can Rich Text editors be improved?

1. Get control of the toolbar
2. Automatically clean pasted content
3. Eliminate ad-hoc usage of fonts, font sizes & colors
4. Eliminate tables
5. Use good typography
6. Go ‘full screen’
7. Use TAB for indent
8. Apply custom styles to the editor to create WYSIWYG
9. Auto-save content

Enough talk, where is a demo?

I created a demo that implements many of these recommendations:

Rich Text WYSIWYG Demo

** This demo is a work in progress.  Please report any issues you discover.  Some of the scripting needs refactored.  I also haven’t done extensive testing for browser compatibility.  Consider this demo a proof-of-concept, at this stage.

See it in action

Rich Text (WYSIWYG) editors enable content authors, who know nothing about HTML, to create HTML.  However, there are good & bad practices with regard to HTML & CSS.  When Rich Text editors are poorly configured these tools make it easy for unsuspecting authors to accidently ruin their web site.

Using font types, sizes, colors & background colors in a Rich Text editor will eventually ruin your web site

Most Rich Text editors (and CMS’s) enable authors to arbitrarily select new fonts, font sizes, font colors and background colors.  However, these tools should not be used!  In fact, these tools should be entirely removed from the toolbar.

Understanding why these features are destructive requires some basic HTML & CSS knowledge.  Here is a simple example:

<a href=”http://gabesumner.com”>This is an important link.</a>

The HTML shown above defines a web link (like this).  These links are easy to create using a Rich Text editor.  However, this is an important link and the font should be bigger and red.  This is also easily accomplished using the font size and color features…

However, this is what these features do to the HTML:

<a href=”http://gabesumner.com”><span style=”font-family: verdana; font-size: 24px; color: #c00000;”>This is an important link.</span></a>

The Rich Text editor injects in-line styling directly into the HTML.  This looks fine and it’s easy to understand why many authors are entirely happy with these results.   Eventually, however, this in-line styling will create insidious challenges for the web site.

What will in-line (or ad-hoc) styling do to your web site?

Occasional use of in-line styling won’t create many problems for the web site.  However, as the web site grows and in-line styling multiplies it creates visual inconsistencies between pages.  Each time authors compose content they are arbitrarily deciding what, for example, an important link looks like.

This lack of consistency creates usability issues for web visitors.  Each page in the web site is redefining the visual interface.

The other challenge arises when the visual style of the web site needs modified.  This might be due to a simple redesign, or it might be needed to adapt the web site to a new form factor (phones, tablets, etc.).  When styling is injected directly into the content it becomes extremely difficult to modify.

Using pre-defined styles will make authors more productive and produce better results

Instead of arbitrarily sprinkling ad-hoc styling through the web site, authors can work with web developers & designers to establish a menu of pre-defined styles.  Once established, these styles can be used by authors to style content:

Behind the scenes, the Rich Text editor is applying pre-defined class styles to the content.

<a href=”http://gabesumner.com” class=”ImportantLink”>This is an important link.</a>

In this example, the “ImportantLink” class was pre-defined.  The styling associated with this class (font size, color, type, weight, etc.) is defined outside the web content.  This class could be used thousands of times and, if it needed restyled, modified in a single place.

The pros of pre-defined styles vastly outweigh the cons

Pre-defined styles take some extra time (initially) to define.  In addition, content authors might feel limited when they encounter new scenarios for which pre-defined styles do not exist.

However, once established, pre-defined styles are easy to use, produce rich results, and create a consistent visual experience throughout the web site.  Furthermore, these styles can be easily adapted by web developers & designers if needed.

Long-term, web site management will be much easier when in-line styling is avoided.

Unfortunately this style selector defaults to a very small width.  This small width can result in larger styles being truncated:

Thankfully this can be fixed with a couple of custom styles:

div.cke_panel.cke_ltr.cke_rcombopanel { width: 300px !important; }
span.cke_rcombo span.cke_styles a span span.cke_text { width: 150px; }

Where should these styles be put?

For my own project, I was using the contentsCss setting to apply a set of custom CSS styles to CKEditor.  Consequently, I simply put the styles shown above in this file.

However, these styles could also be put in the Editor.css file for the skin being used by CKEditor.  (The default skin is the Kama skin.)

Lastly, it’s possible these styles might not work with other (non-Kama) skins.

Best of luck!