Progress Update

It's been a while since I've made a post, so I thought I would give a quick update on the progress I have been making on my blog. I haven't had as much time lately to work on it as I would have liked. I have gotten a few things accomplished, though. Click through to the full post to see what I've been up to.

Comments

First and foremost is comments. I now have a rudimentary comment system that will allow for participation in the discussion by my readers. Each post contains a list of user comments followed by a comment input form. Currently, the blog administrator has the ability to turn comment moderation on or off. A future goal is to notify the administrator, either by email or message box, when there are comments in need of moderation. Also, comments may be turned on or off site-wide or on a post-by-post basis. Comments are stored in the database using the following model:

public class BlogCommentDto
{
    [Key]
    [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
    public int Id { get; set; }

    public virtual BlogPostDto BlogPost { get; set; }

    public virtual BlogCommentDto ReplyToComment { get; set; }

    [Required, StringLength(100)]
    public string Name { get; set; }

    [Required, StringLength(100)]
    [DisplayName("E-mail")]
    [RegularExpression(@"^([\w\!\#$\%\&\'\*\+\-\/\=\?\^\`{\|\}\~]+\.)*[\w\!\#$\%\&\'\*\+\-\/\=\?\^\`{\|\}\~]+@((((([a-zA-Z0-9]{1}[a-zA-Z0-9\-]{0,62}[a-zA-Z0-9]{1})|[a-zA-Z])\.)+[a-zA-Z]{2,6})|(\d{1,3}\.){3}\d{1,3}(\:\d{1,5})?)$")] 
    public string Email { get; set; }

    public string GravatarHash { get; set; }

    [StringLength(100)]
    [DisplayName("Home page")]
    public string Homepage { get; set; }

    [StringLength(100)]
    [DisplayName("Comment Title")]
    public string Title { get; set; }

    [Required]
    [DisplayName("Comment")]
    public string Comment { get; set; }

    [DataType(DataType.DateTime)]
    [DisplayName("Date of Comment")]
    public DateTime CommentDate { get; set; }

    [StringLength(50)]
    [DisplayName("IP Address")]
    public string IpAddress { get; set; }

    [DisplayName("Approve for Publishing?")]
    public bool IsApproved { get; set; }

    [DisplayName("Deleted?")]
    public bool IsDeleted { get; set; }
}

A couple of comment features that I have yet to develop are auto-populating registered user information and highlighting administrator comments.

WYSIWYG and Syntax Highlighting

I've also made the switch from TinyMce and SyntaxHighlighter to ckEditor 4.1.1 and Prettify. So far I'm really liking ckEditor for writing blog posts and comments. I think it's style is much cleaner and it seems to be easier to use from a development standpoint. There is also a plugin that works pretty seemlessly with Prettify for code syntax highlighting. 

In respects to using Prettify over SyntaxHighlighter, the setup is far easier as it only requires the inclusion of one javascript file instead of the multiple javascript and css files that were required by SyntaxHighlighter. I also like that it has the Sons of Obsidian theme out of the box which is what I use for my Fonts and Colors settings in Visual Studio. Come on, doesn't it look nice?

/// <summary>
/// Returns an MD5 hash of an email address for Gravatar images.
/// </summary>
/// <returns>MD5 hash of the email address.</returns>
public static string GravatarHash(this string s)
{
    using (var md5Hash = System.Security.Cryptography.MD5.Create())
    {
        byte[] data = md5Hash.ComputeHash(Encoding.UTF8.GetBytes(s.Trim().ToLower()));

        StringBuilder sb = new StringBuilder();
 
        for (int i = 0; i < data.Length; i++)
        {
            sb.Append(data[i].ToString("x2"));
        }

        return sb.ToString(); 
    }
}

The above code snippet is an extension that computes the md5 hash of the given string. This hash value is used to retrieve the Gravatar associated with the email address that was supplied by a commenter. If no email address is supplied or no gravatar exists for the given email address, then a unique geometric pattern based on the md5 hash is displayed next to the comment instead.

Icon Fonts

Sprinkled throughout the site, you may notice little images included in links such as   or   or even   (May the 4th be with you!). Ok I'm a day late for that one, Ha! How about Revenge of the 5th? Alright that was terrible.

Anyway, the point of all that is to say that instead of using image icons, I've gone the route of icon fonts, or glyphs. For this I used IcoMoon. IcoMoon makes it super easy to select only the glyphs you want and download a package of fonts along with a stylesheet. Included is also a sample html page that displays all the glyphs along with their classes and hex values.

Now, there are pros and cons to using icon fonts instead of images. The biggest con being the glyphs are flat and can contain only one color at a time without either putting a lot of effort into slicing and stacking them or applying a gradient.

Now onto the pros:

• They are crisp and scalable:   ->   ->  
• Colors may be set in CSS:        
• CSS transitions also apply like in this link: Darth Vader
• Basically any transformation you can do for text also applies to glyphs

The code to produce the little Darth Vader glyph can be as simple as

    <span class="icon-darthvader">&nbsp;</span>

It's pretty awesome what you can do with these icon fonts. I only wish I weren't just now discovering them!

What's Next

Next on my list is to wrap up a few loose ends on the commenting system. Then I'm planning on tackling Categories and Tags. I'm also hoping to get a few posts up with some photos I've taken recently as well as a post on the replacement media PC I have recently installed in our bedroom. Thanks for reading!