Small little tiny but mostly good things.

My Office Live account silently healed itself.

Now I can really use it instead of Google Docs. Open document, edit, save. Open from another computer and all changes are there. This is Zen-like beautiful. There are ways to go in terms of productivity yet, little things sometimes getting in the way, but overall it works as it should. Good job! (and it’s not even at version 3.0 yet).

GoDaddy updated my hosting account to .NET 3.5

Also without saying a word. Few days after sending me email that it is absolutely positively not possible to upgrade from 2.0 to 3.5 and there is nothing can be done about it, I opened dashboard and it was there. I even put a little sample Silverlight app to test it - yep, works fine. Hmmm...  thanks Daddy!

Visual Web Developer 2008 Express edition SP1

Just read this on ScottGu’s blog:

How cool is this? Sure I do have VS 2008 (thanks to MSDN subscription my company paying) but for average hobbyist developer this is big. Thumbs up! (those guys on MVC team got to be really pushy).

Getting organized with OneNote and EverNote.

My initial impression with these two apps was right; I ended up using both of them in totally different scenarios. Although they are look like competitors, in reality – not so much.

I always use OneNote at work as kind of personal Wiki. And, as Wiki, it really shines – where do you find one that will let you drag and drop video and audio files into it, save emails and calendar entries with a button click, create decent graphics, flowcharts and let you do bunch other crazy things? I’m keep liking it.

EverNote, on the other hand, is indispensable as a visual clipboard that you can throw anything into and it just sticks. I use it all the time when run into something interesting browsing web – keeps your delicious bookmarks so much cleaner.

New theme for be 1.4

Start playing with another conversion from WP to BE. This one is to demonstrate new dynamic features available for upcoming 1.4 release. Because it will let you save theme settings, it opens a world of possibilities. Work in progress so far, I’m still looking for fun and creative ways to abuse this functionality.

Strong typing for Extension Manager in be 1.4

Extension manager is been neglected for some time, but now I’m back to making enhancements there. Strong typing for parameters been a popular demand, so I went for it and added easy ones for starters: Boolean and integer. Boolean rendered on the settings page as check box and both exposed through parameter’s AddValue method. Tricky part will be to implement more complex things like drop-downs etc.

I use thumb flash drives quite a lot moving between computers. It is still much faster to load a gig or two from the flash drive than to use Skydrive or other "cloud" alternative. For the most part it is painless - stick it in and OS will find and mount it, no setup requires. But one day perfectly good USB drive stopped working all of the sudden on one specific computer. It works fine on the others and other USBs work fine on that computer too. What's going on?

I never got any errors and little icon indicated that it is plugged in and works fine. But it would never show up in the file explorer. A bit mystified, I went to disk management (right-click "my computer" -> manage) and found that it is indeed working fine. But there is a small problem: it uses same drive letter as one of the network shares mounted on this box.

Wow. That is interesting. From what I understood, when you use flash drive for the first time Windows runs a setup and assigns drive letter to it. Then it will just re-use it to speed things up. And if in the meantime you mount something else to this drive letter and then try to use that specific USB flash drive again - you pretty much screwed. Windows will never tell you about conflict, it will just give up on mounting this drive and walk away in silence.

It is easy to fix by changing drive letter for any of conflicting devices, you can do it in the device manager itself by right-clicking the drive and selecting "change drive letter". In my case, I've changed it to "K". No one needs "K", right? Should be safe now.

Crafting CSS style sheet

This is the most time consuming operation in porting any CSS template to BlogEngine. If you like your design pixel perfect - that will cost you. These are some general tips that I hope will help make job a little bit easier.

• Move forward gradually, addressing one area at a time. Make sure your header section looks right and only then go to the post, comments, sidebar, archive etc. You don't want to go though the changes you've made in the last couple hours looking for one that totally screwed page layout or changed that color you really liked.
• Each step verify at least in Firefox and IE. Throwing into the mix Opera and Safari would be nice, too.
• Get a tool to work with DOM. You want to click on any element on the page and see CSS style attached to it. Firebug or Developer Toolbar will do the job.
• First, use only style sheet that came with template. Clean it up by removing anything you not going to use. For example, if you going to use only one level in unordered list you don't need "ul li ul li" for this class. Keep it simple.
• Start with generic html tags like headers, lists, paragraphs, images etc.
• Once that taken care of, move through BlogEngine style sheet and take only what you'll need. Again, one block at a time and moving on only after checking changes in all browsers you going to support.

Taking advantage of asp.net

BlogEngine is typical asp.net application, you can do in your theme whatever asp.net allows you - and this is a lot!

Add core namespace to the master page to get access to BE objects:

<%@ Import Namespace="BlogEngine.Core" %>

Now you can use it anywhere in the theme if need to. For example, to get a link to home page in any language BE supports:

<a href="<%=Utils.AbsoluteWebRoot %>" rel="home"><%=Resources.labels.home %></a>

It is common for themes to implement menu where current page you are on stands out in some way. You can easily add this by creating small function in code behind that returns different class string for current page:

public string MenuClass(string menuName)

{

  if (Request.Path.Contains(menuName))

    return "class=\"current_page_item\"";

  else

    return "class=\"page_item\"";

}

And then use this function in the theme to get class for the menu element:

<li <%=MenuClass("default.aspx")%> >

If you need to show element on the page only to blogger (admin):

<% if (Page.User.Identity.IsAuthenticated){ %>

    <div>Show admin/blogger content</div>

<%} %>

This tutorial is very basic and meant just to get you started. You can go as far or as little as you wish with your design, implementing sitemap menu, adding content placeholders, user controls and more. The point is, you’ll be really hard pressed to find project that is as easy to theme as BlogEngine. If you don’t like the way your theme looks – go ahead and change it. It is that easy!

Read part one

Test-drive tutorial theme

Download tutorial theme (52.75 kb)

Cool thing about open source is sharing. You give some - you get some. When it comes to themes, there are tons of great free designs out there on the web for applications like blogs. Some of them are generic CSS templates, others specifically designed for popular open source projects like WordPress. This tutorial is about converting WordPress theme to BlogEngine, but most of it very much applied to almost any web template in the universe.

First, lets get to know what exactly we need to build BlogEngine theme. Thankfully, not a whole lot - all you really need is to create a new folder under ~/themes and add three files with few lines of code:

// site.master

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="site.master.cs" Inherits="site" %>

<html>

 <head id="Head1" runat="server"></head>

 <body>

   <form id="Form1" runat="Server">

     <asp:ContentPlaceHolder ID="cphBody" runat="server" />

   </form>

 </body>

</html>

// postview.ascx

<%@ Control Language="C#" AutoEventWireup="true" EnableViewState="false" Inherits="BlogEngine.Core.Web.Controls.PostViewBase" %>

<h1><a href="<%=Post.RelativeLink %>"><%=Server.HtmlEncode(Post.Title) %></a></h1>

<asp:PlaceHolder ID="BodyContent" runat="server" />

// commentview.ascx

<%@ Control Language="C#" EnableViewState="False" Inherits="BlogEngine.Core.Web.Controls.CommentViewBase" %>

If you run you blog now and select theme with the same name you just gave to the folder, your new "theme" will work. It won’t look pretty, but you’ll see your posts and will be able to navigate to the details page and make comments etc. just fine.

From this example you can see that only things required in the theme are couple placeholders where BlogEngine will put generated content and couple tags like "head" and "form". That means, we can pretty much take entire Html from any template, put it in the site.master, stick placeholder in the corresponding gap - and we have our custom-built theme ready to go... well, almost :)

So, lets start by downloading WP theme. As example I'll use this tutorial theme. If you open archive and look inside, there are usually lots of .php files, images and few .css files. Delete all php's - you won't need them. Instead, go to demo site and open it up in the browser, right click and select "source code". Create html page in you theme folder and copy source code there. Make another copy - you'll use it as a reference if you accidently break something . Now run your project and go to html page, make sure it looks exactly as in the demo site.

When you look at the souce code you copied, there are a lot of hard coded content in there. Make it as uncomplicated as it gets by removing all content. Also, replace all web references with local ones. You'll get something much more manageable:

<html>

<head>

 <title>Tutorial Theme</title>

 <link rel="stylesheet" href="style.css" type="text/css" media="screen" />

</head>

<body>

<div id="wrapper">

 <div id="left">

   <div id="logo"><h1><a href="#"></a></h1></div>

   <div id="navigation">

       <ul id="menu">

       <li class="current_page_item"><a href="#">Home</a></li>

       <li class="page_item"><a href="#">About</a></li>

       <li class="page_item"><a href="#">Blog Oh! Blog</a></li>

       </ul>

   </div>

   <div class="content">content</div>

 </div>

 <div id="right">Right sidebar</div>

 <div class="clear"></div>

 <div id="footer"><p><a href="#">Footer</a><br /><br /></p></div>

</div>

</body>

</html>

Now we are getting somewhere. Copy everything inside “body” tag into site.master page and replace content div with ContentPlaceHolder. Run your project and you’ll see that site looks much better. A little more patience and it will look like the picture below. In the next part I’ll show you how to reconcile CSS that comes with template and BlogEngine specific elements and we look at some tricks you can use building your custom theme.

Chris Blankenship came up with an initiative to start email subscription for administrators who have BlogEngine deployed on there websites. This can be useful for anybody who wants to stay on top of any important news about BlogEngine, not just sysadmins, so I would encourage folks to sign up. This is purely community effort – which, in my opinion, is great. There is going to be a new community site in the near future, but before it materializes, I glad to see when someone stands up.

I see great potential here, BE need to push it harder to become sort of a hub for each blog instance out there, not only providing services like subscriptions by exposing set of APIs, but also letting people to interact in p2p manner, using their blogs as part of BE network. We all can benefit from this. If anyone has ideas and proposals in this direction – share your thoughts!

Running public web site from your basement is unprofessional. I know that. For a couple years I'm running my own internet facing toy server at home as a sandbox project. Let me tell you - I'm still working on that 99.99999% uptime. 5-6 times a year my house loosing power, sometimes it comes back right away but it doesn't matter - server is going down and patiently awaiting me coming back from work. This alone means realistically 40-50 hours downtime a year. Sometimes it looks like my ISP goes down, too (may be he also running from the basement?) and I have to reset router to be able to connect again. Yet dependency on external DNS (I use DYNDns). And don't forget that you'll need to maintain it, patch, upgrade software, install new stuff with many-many reboots when you counting it year long. All that put together, and you got totally unreliable site that is constantly, chronically down. More...

When working with Widgets framework in upcoming BlogEngine 1.4, you have three choices for saving widget settings to data store: StringDictionary, XmlDocument and CustomObject. StringDictionary is really a simple one and will fit your needs in a lot (if not most) cases. XmlDocument provides more flexible data storage excellent for complex hierarchical data structures, but it might be a daunting task to handle. You might look at LinkList that comes with standard install on example of using XmlDocument. Custom object provides you with familiar way of working with complex data, but it has it's own gotchas. I'll try to address some of them here. More...

It is hard to keep track of everything you need to remember our days. You can try fancy Moleskine or stick papers to refrigerator, but it never worked for me. For a while now I use OneNote from Microsoft - and I really like it. It has lots of cool features, easy to use and well integrated with Office suite and other MS applications. One thing that always bugged me though, is that it is very much last century application when it comes to the web. There is no easy way to share your notebooks across desktop boundaries. Mostly I got around it carrying my stuff on the USB key, which works but obviously not the optimal way to go. Then I came across EverNote and from what I've herd it was a lot more web oriented, so I decided to test run it. More...

Developers don't like to write documentation. There is nothing one can do about it. Yet, no matter how many great features you add to the project, no one will use them if they not well documented and easily discoverable. There is no special department for document writers on the open source projects (alas), so man has to do what the man has to do...

It is work in progress, but I promise to put extra effort and catch up on all features I've been doing for BlogEngine before 1.4 will be released some time late spring. I'll maintain documents both on Wiki and this site, in the future Wiki will have documentation on current release and this site will have latest on new features that will be rolled out to the Wiki when new release will become available.

Widget is a special control you can add to the sidebar. What makes it special is that it is a member of the "zone" - area where you can add and configure these reusable components through the zone manager. It is similar to SharePoint WebParts - you can drag it around, set properties etc. And, in BlogEngine, you can build widget just in few simple steps. More...