You can also download the files I used in the presentation.

• PowerPoint and Mindmap from the video
• Sample taxonomy mindmap mentioned in video

hMailServer is a full featured e-mail server, but we’re just going to use it for e-mail relay (SMTP) (I found a post with supposedly a VB script for specifying the drop folder for incoming e-mail but haven’t worked with it). This is also only a good idea for testing purposes. While I don’t see why hMailServer cannot be used for deployments (albeit small ones) it still isn’t advisable. Most likely if you’re implementing SharePoint in your enterprise then you’re already drinking the Exchange juice so just use that.

Installing and Configuring hMailServer

1. First you’ll want to download hMailServer.

2. Start the install.

3. Move through the prompts, but choose full installation when asked.

4. It will then bring you to a screen asking you about the database to use. Since we’re already running SQL Server for SharePoint let’s use that so select “External Database Engine.” (Clicking the images will magnify them.)

Specify Database Engine

5. After finishing the install it will open up a database wizard. The first option we’re giving is the database instance. Select the option to  create a new hMailServer database.

Create Database

6. Then it will ask for information to connect to your database instance. The database server address is most likely your computer name (contoso for me), and then choose whatever you want to call the database. Lastly, choose the Windows authentication option for authentication mechanism (most likely the account you’re using has the dbowner role on SQL Server but if not add it).

Server Connection Info

7. Then you will be prompted to select the service instance. Select the SQL Server (MSSQLSERVER) service.

Service Instance Selection

8. Move through the next screens (it will provision the database), and then lastly you will be prompted to specify a password for the admin account. Add one and finish the wizard.

9. Next it will open the hMailServer administrative interface. Login and expand the following nodes: Settings — Advanced — IP Ranges. Highlight My computer. Then specify 0.0.0.0 as the Lower IP and 255.255.255.255 as the Upper IP.

IP Relay Configuration

10. Now click on Domain in the navigation panel. Here you’ll add a domain. I chose my computer name (with a .com suffix), and then click advanced and specify a catch-all e-mail address. You can then exit the hMailServer administration interface.

11. Next open Central Administration. We will now specify the outgoing e-mail settings by clicking on the System Settings header on the splash page and then choosing “Configure outgoing e-mail settings.”

12.For the “Outbound SMTP server” put in your computer name, and I put in my catch-all e-mail address for the “From address” and “Reply-to address.” Save your change.

Central Admin E-mail Settings

13. Lastly, I tested it by adding a user to a site with an e-mail specified in AD, and it worked!

E-mail Success!

Edit Dialog

A client asked me to create a roll-up of some document libraries, and I decided to exercise the data form web part. It worked fine until I was asked why he got an open/save dialog and not the standard SharePoint read-only/edit dialog from document libraries as to the right.

After some help from some Twitter folk (@zaijian and @gvaro) it was made evident that there is some JavaScript that surrounds the anchors in the document library.  After comparing AllItems.aspx to my custom page I saw the JavaScript not included. I then added the JavaScript references around my XSL, and sure enough I got the dialog!

I tried to go one step farther and the whole context menu, but I was only able to get portions of us such as the gold hover bar. I know there were some hidden divs the JavaScript used, but alas I had other work to move onto. If anyone has experience with adding the whole context menu I’d be glad to add it here for others.

<a onclick="return DispEx(this,event,'TRUE','FALSE','TRUE','SharePoint.OpenDocuments.3','0','SharePoint.OpenDocuments','','','','110','0','0','0x7fffffffffffffff')" href="{@FileRef}" onfocus="OnLink(this)"><xsl:value-of select="@FileLeafRef" /></a>

That being said, making the migration is painful in some areas. One of which was how I handle the lack of productivity software I had in Windows—namely Microsoft Outlook.  As I search around there are a few options in attempting to tackle this problem.

1. Use VMWare Fusion or Crossover to load Windows and then Outlook.
2. Use Microsoft Entourage.
3. Find a way to use the native OS X applications (iCal, Mail.app, and Address Book).

Using Virtualization Technology

This seems straight forward enough on the surface, but on the inside it’s fraught with problems.  First, the idea of using a virtual machine to load productivity software doesn’t seem, well, productive.  This is especially true when I have to dedicate a gig of precious memory to the VM (granted I have 4 GB).  I tried it, and I was able to use it without problem but I wasn’t happy with this option.  I became discontent with it when I started using Mail.app for my personal e-mail. I love the simplicity of the application, and I wanted to use it full time.  I should say I tried Crossover, and I didn’t like it at all. VMWare’s unity feature is far better.

Use Microsoft Entourage

I went out and got a license of MS Office 2008 for Mac.  Word, Excel, and PowerPoint aren’t bad, but they pale in their Windows counterparts. After using the ribbon for so long now I love it. Office 2008 has a “ribbon” of sorts, and it’s not that bad. For quick document work it works fine. If I need more then I can use my virtual machine. However, this isn’t the case for Entourage.

Microsoft Entourage has to be one of the worst e-mail clients I’ve ever used. Sure, it connects to Exchange without a problem, but when you have expectations it will work like Outlook it is very disappointing.  I tried it for a while, and I decided it simply doesn’t cut it. The way you add recipients in e-mail is awful, and I quickly found out that you can’t do HTML e-mail in Entourage which means no embedded links. Epic fail. I hated it, and it made me look to the third option.

Faking Exchange Support

I say “faking,” because the support isn’t native to the OS X apps. Recently, Apple unveiled that the next version of the OS dubbed “Snow Leopard” will have native support for Exchange 2007 in their apps similar to the iPhone (which I use without complaint). But right now my company uses Exchange 2003 which I don’t know if it will be support in Snow Leopard, and it isn’t to be released until next summer.  That leaves a long time for frustration. Surely, there must be a way to do this right?

After searching extensively I discovered I’m not the only who has struggled through this. What surprises me even more is the lack of a third party vendor to fill this void. I would’ve happily paid several hundred dollars for this, but there is nothing out there to accomplish this. It is obvious that only until recently is Apple taking the enterprise environment seriously with Exchange support (no matter how much they may despise it).  I fortunately was able to find a solution in the mean time. Here is my recipe:

Ingredients

1. Microsoft Entourage (bear with me)
2. Mail.app
3. IMAP enabled in Exchange
4. Dock Dodger

Preparation

The preferences pane in Entourage

I discovered that Entourage supports sync services to send calendar events and contacts to the native OS X programs. OK, this is a good start.  As you can see in the screenshot go to Entourage — Preferences and select Sync Services in the left panel.  Then check both boxes to send calender events and contacts to the native applications.  This will via a background service take care of the synchronization from the native apps to Exchange. When you select the option to sync you will receive a prompt, and you will want to choose “Merge Entourage items with Sync Services items” which will allow bi-directional sync between the two. So if you add an event in iCal it will go to Entourage and then Exchange, and if I add an event in my iPhone it will go from Exchange to Entourage to iCal. Not pretty but it works.

Then we have the e-mail issue. This was by far the most difficult and frustrating part. When you create accounts in Mail.app it allows you to create Exchange accounts which is a misnomer. What it means is it will attempt to use Outlook Web Access to send/receive, but it also means you’ll be really using IMAP on an Exchange server.

I found an article which outlines setting up IMAP on Exchange. I had to sweet talk my boss, and he sympathized and helped.  They set up IMAP (Exchange is above me), and that led me to now getting closer to being free of Entourage.  When you set up an account under the Exchange heading you’ll be asked to specify a mail server (such as mail.yourdomain.com) which will come from your Exchange admin. You will also give it the address where you access Outlook Web Access (your webmail address). I was then able to successfully download messages. I had some problems with SMTP. My company uses RPC over HTTPS to connect so I had to use the Password option and specified my credentials (for the username I had to use domain\username).  Then I was up and running!

Cleaning Up

Now it’s working. It’s not pretty, but I wasn’t expecting it to be. It was a utilitarian effort, and it succeeded in accomplishing my goal. But it wasn’t as seamless as I wanted. Entourage would always show up in the dock and also the application switcher. Now I never want to see Entourage anywhere, and I found Dock Dodger. This is a freeware program that removes running applications from the dock and application switcher. By simply dragging the Entourage icon into the app it removed it. Before I did that I click on the icon in the dock and decided to open it at login (as I’ll always need it).

You’ll also notice dialogue windows for the send/receive. I haven’t found a way to completely remove them, but if you close it when it’s running it will go away. Unfortunately, on reboot it comes back. I hope to find an answer to get rid of the dialogue.

Concluding Thoughts

I can now use the native apps, and I am up and running. Entourage now uses around ~75 MB of memory which is much better than the 1 GB option with VMWare Fusion.  I am happy for now, and I look forward to Snow Leopard when I can completely axe Entourage from my life.

I would like to thank Nick Dawson (my Pownce buddy) for empathizing with my struggle and pointing me in the direction I needed.

Hirsch’s Branding Effort

I was recently tagged to “brand” a SharePoint installation for Hirsch Pipe & Supply Co.  I knew it would be an interesting challenge, but I had no idea how bad it truly would be.

SharePoint is built on ASP.NET 2.0 which I had worked with in my previous job. I found ASP.NET very powerful and flexible. Master pages, App_Themes, CSS Friendly Adapters, and more made working on ASP.NET interfaces relatively painless.  Knowing that SharePoint utilized master pages I thought it would be much easier than it was.  However, it turned out to not be the case.

The Default Master Page

I was immediately struck by the mess that is the default master page.  The master page is laid out with, of course, tables which is reminiscent of why Microsoft is such a joke in the designer world.  Well, I decided to rip out the tables, and surely that would make it easier right?  No.  It turns out that SharePoint only uses one standard ASP.NET control (the navigation control), and the rest are SharePoint specific “delegate” controls which made layouts with CSS difficult.  These are of course stored on the file system, and the only way to edit them is to create painful features.  It looked as though I was stuck with extensive tables for much of the layout.

When I did yank out much of the table layouts it only opened up a headache down the road.  It was actually more painful to try and layout it with CSS then just sticking with the table layouts.  What made it difficult are the extensive nuances in the SharePoint interface that are dependent on others.  For instance, I would lay it out in CSS, but when I went to edit the page to add web parts everything went awry due to dependencies on extensive tables for layout.  I was able to lay out the majority of the default master page with CSS, but I ended up reverting to tables for the main content area due to pain after pain. I did go with Heather Solomon’s minimal base master page for publishing sites which was a better start then I had.

The CSS

The fun doesn’t stop there.  SharePoint has a core stylesheet that is over 4,000 lines long.  I’ve dealt with more styles in one shot, but looking at the stylesheet you would think a 10th grader created them.  There is a lack of shorthand, units of measure, and extensive IE proprietary styles.  Add onto the fact there are no comments in the stylesheet it is absolutely useless to attempt to decode it.  You also can’t simply remove the core styles; well, you could, but it’s another headache that is ultimately not worth tackling.  It’s again easier to deal with the bad then try to make it better.

SharePoint does allow you to specify an alternate stylesheet which does, thankfully, get rendered after the core styles.  The cascade becomes your best friend in altering the styles.  You’ll also notice the “classitis” that abounds in the master page and core styles.  They all have a prefix of ms– which is unneeded and unhelpful.  I wasn’t surprised to find a lack of advanced CSS 2 selectors due to the pressure to support IE 6, but they are hardly any descendant selectors which would drastically decrease the amount of classes in the markup.

The JavaScript

I know Microsoft is now supporting jQuery which we can only hope will reduce the amount of “obtrusive” JavaScript through the site.  It reminds me of how I wrote JavaScript back in the day.  Attempting to decode the core JavaScript is a puzzle I didn’t even attempt.  You are once again forced to use proprietary JavaScript instead of taking it on to write it any better.  If they did abstract the obtrusive JavaScript it would drastically decrease the complexity of the markup sent to the browser. I did end up using jQuery to set the size of certain divs, and I also attempted to clone() and append() DOM elements but it proved fruitless.

Hope for SharePoint vNext

I hope, first that I never have to alter the SharePoint UI again, but that the next version of SharePoint will construct a better default UI with the following changes.

1. Use CSS for layouts.
2. Ditch the delegate controls to use more of the standard ASP.NET controls (or at least improve them).
3. Use a well-commented core CSS file with advanced selectors to eliminate the need for classes.
4. Switch to an unobtrusive JavaScript model.
5. An increased focus on accessibility for public-facing sites.

I contacted Mark to contribute to his fantastic catalog of contributors, and he passed some my way. In the last week I handled questions from two users already! One deals with a technical use of the technology and another asks for advice in encouraging adoption by end users. Please check them out as well as subscribe to Mark’s blog!

• How can I restrict views to the contributor’s content, only?
• How do I get End Users to start using SharePoint?

With the IE Tab Firefox extension we can browse SharePoint sites inside the Firefox interface on demand without having to open IE. Here is a short screencast on how to do it.

And this example is better than other’s I’ve seen. On some sites where the blog/post title is long then the post title is truncated! This is unacceptable when search engines give so much weight to the content of your post titles.

For a long time I circumvented this behavior by using the Optimal Title plugin. It worked fine, but it was yet another plugin for something that should’ve been inside the core. So I opened ticket #4407 to integrate the plugin architecture into the core. I created a patch, and it became changeset 6,538! In short, I added a parameter into wp_title() that sets the location of the separator. By default, it goes to the left, but you can move it to the right by specifying it. If you don’t specify anything it defaults to the legacy behavior of going to the left.

This is the code you can now use to generate sexy SEO titles:

<?php wp_title('&raquo;',true,'right'); ?> <?php bloginfo('name'); ?>

This will print: Post/Page Title » Blog Name. By ensuring that you specify meaningful titles for your postings then you can ensure that your findability will increase.  The official documentation on this function has also been updated to include this change.

1. Well-formed, semantic markup
2. CSS for layout and presentation
3. Ensure that the form is both usable (easy to read/use) and presentable
4. No tables or line breaks

To avoid the line breaks we simply use the CSS “clear” property. This property says: “clear all floated elements to the x side of me”. So for clear: left; means that there should be no floated elements to the left of the element, and I use this in laying out the form.

Here is the CSS, but be sure to check out the full example.

body {
font: 13px "Myriad Pro", serif;
}
fieldset {
width: 300px;
padding: 10px;
}
legend {
font-weight: bold;
}
label, select, textarea, input {
float: left;
font: inherit;
border: 1px solid #ccc;
margin-bottom: 15px;
}
fieldset *:hover, fieldset *:focus {
background-color: #eee;
}
label:hover, legend:hover {
background-color: transparent;
}
label {
width: 75px;
clear: left;
font-weight: bold;
border: none;
}
input[type="submit"] {
clear: left;
margin-top: 10px;
margin-left: 75px;
}
textarea {
width: 200px;
height: 75px;
}

I knew jQuery existed, but I didn’t realize how powerful the language was until recently. When I realized I could select and manipulate DOM elements with CSS selectors then I was off to the races! I love how it’s tailored for designers who already understand that syntax. There is no more getElementById(“search”) or other garbage, because I can write this.

$("search").show();

Now, that is elegant! The only thing more impressive then the way it does selectors is how extensive the API is. Not only is extensive, but it is actually understandable. It’s the perfect balance between extensibility and ease of use. It’s like adding Mootools and script.aculo.us together with better DOM selectors.

Toggle Goodness

I love JavaScript toggles and its variations. It’s much more elegant that simply changing an element from display “none” to “block.” jQuery comes with an easy way to toggle elements, and I recently did something like this at work.

$(".click").click(function() {
        $(".toggle").slideToggle("fast");
	return false;
});

Ajax With jQuery

jQuery doesn’t stop there. Doing Ajax is simpler than it seems it should be. Here’s a function that onclick will do a GET via Ajax and return a message notifying the user that the request was successful.

$(".ajax").click(function() {
	$.ajax({
    		type: "GET",
    		url: "load.html",
    		dataType: "script"
		})
	$(".successmsg").ajaxSuccess(function(evt, request, settings){
    	        $(this).append("<p>Successful Request!</p>");
	});
});

What if I want to append content into the DOM? Difficult right? Not so much.

$(".append").append("Append some text");

jQuery Plugins

The cool thing for all those effects that jQuery doesn’t provide out-of-the-box then it provides a rich API for users to develop plugins on top of jQuery. For instance, my portfolio utilizes the Coda-Slider jQuery plugin.

At work I was tasked to create some DHTML menus which I believe is a usability nightmare and an IA mistake, but alas I had to. I wanted to maximize the usability, and I found Superfish which is “Suckerfish on ‘roids.” I was able to make sexy menus that had plugins on top of the plugin including the hoverIntent jQuery plugin which is smart enough to know whether you really want the menu or if you’re just trying to move around the page.

Additional Resources

Well, that’s just scratching the surface of what jQuery can do! While learning more about it I’ve found several sites that have helped me.

Tutorials/Blogs

• jQuery Crash Course
• Learning jQuery
• jQuery for Designers
• Remy Sharp
• jQuery Tutorials for Designers

jQuery Plugins

• Official Repository
• jQuery User Interface (Coming Soon)
• 240 Plugins jQuery
• 50+ Amazing jQuery Examples (Part 1)

API Documentation

• jQuery API Browser
• Official Documentation
• jQuery Mailing Lists/IRC

IDE Integration

• Getting Started with Aptana and jQuery
• Intellisence for jQuery in Visual Studio 2008