development

Don't switch to Ghost blogging platform (yet)

I’m a typical developer. I often can’t resist the urge to try different platforms. My current blogging platform (blogger) has numerous limitations. I started looking for alternatives, and Ghost appeared on the radar.

Ghost is a ground up blogging platform, being developed under the premise that other platforms (such as word press) are becoming overly complex.

Before I go into too much detail, I should point out that Ghost is beta (maybe even alpha software).

The good parts

Ghost offers some interesting features, such as:

  • Handlebar based templating
  • The ability to run on your own server/vm, or via Ghost’s own Hosted service
  • A very nice post editor, which has markup based formatting, and a live preview.
  • Open source,  so you can hack away at the code base.
  • Node JS based platform

The bad parts

Ghost’s hosting is a paid service. They offer a 30 day trial. I signed up… and then the wheels fell off.

I tried editing my new blog, but kept being presented with the sign up page. Filling in the sign up page again logs you into the site.

Once you have logged in, the next mystery is how to actually post. You have to manually append /ghost/ to your blog address. It’s not that much effort to provide a link for this.

Posting was straight forward enough, until I tried to include a code sample. I use Alex Gorbatchov’s syntax highlighter. To enable this on my Ghost blog, I had to edit my template. To do this, I had to download the default template from Github, edit the source, then zip it up and upload it via Ghost’s admin page.

I had my template setup, and I tried to add some code to a post, Ghost saved the HTML - but then stubbornly refused to display it. It could be something to do with the highligher using CDATA tags… it could be overly aggressive filtering (why do you need to filter out HTML that I add to my blog?)… it could be the lunar cycle, who knows.

At least the edit page looks nice.

The next big issue is that Ghost doesn’t have an API yet. There is no way to integrate other services. Want to import all your old blogger posts? bad luck. I have seen an import function (for Word Press) mentioned on the Ghost forums, but finding it is like finding the lost ark - and it doesn’t seem to work too well anyway.

The lack of an API means that offline editors, (like LiveWriter), can’t be used to update your blog. It also rules out the many mobile blogging apps on mobile platforms.

The final problem for me was performance. Ghost Hosted feels slow - at least from Australia. Blogger uses Googles CDN, and feels snappy virtually anywhere. Ghost don’t seem to have a solution that is working out here yet. A blog page that takes 5 or more seconds to load is going to translate to a lot of lost readers.

Conclusion

Ghost is a service that shows a lot of promise, but is not a usable option for me as it stands. I wouldn’t recommend going with them unless you are prepared to deal with a lot of issues and frustration. That said, they are showing all the signs of being awesome down the track.

If you can, consider contributing to Ghost’s code base, and help them get there faster. I look forward to giving them another try in 6 months.

References

/eof

Linking to Google Drive images from your Blog

A good number of us have content stored on google drive. Wouldn’t it be handy if we could reference that content in our blog posts? Good news, you can!

Steps

  1. Go to your google drive account.
  2. Ensure the folder the item is in, is shared (use the option Anyone who has the link can view).
  3. Share the item (use the same option as above). Copy the “Link to Share” link.
  4. Paste the link in the linkifier below
  5. Copy the link produced, and insert it into your blog via any of your usual methods

How it works

A link with this format: http://drive.google.com/file/d/[id number]edit?usp=sharing

is transformed using a regular expression, to this format:

http://drive.google.com/uc?export=view&id=(id number)

Google Drive Linkifier

Paste your Google Drive Link Here
Your link should have the format: https://drive.google.com/file/d/(id number)/edit?usp=sharing

Please post a comment if you have any problems.

/eof

Entity Tags (Etags)... what they are and why they rock

Last week, a coworker asked me a question about Etags. I’d never heard of of Etags - in spite of them being around since 1999!

In a nutshell, an etag is an identifier assigned to a specific version of a hosted object by a webserver - for the purposes of caching.

Etags operate as follows:

  1. A client sends a HTTP request for an object.
  2. The server returns the object to the client, along with the ETag value (as an Etag field, eg: ETag: “686897696a7c876b7e”). The client caches the object.
  3. When the client needs re-display the object, a it sends a HTTP request along with a If-None-Match field, eg: If-None-Match: “686897696a7c876b7e”.
  4. If the If-None-Match field matches the Etag for the resource, a HTTP 304 (NOT MODIFIED) response is sent. If the If-None-Match field does not match, a HTTP 200 (OK) response is sent along with the updated resource.

This mechanism allows objects to be transmitted only when they have changed - saving on bandwidth. What's even better, is that Etags are on be default in IIS and Apache and supported by all major browsers. Sounds like a win-win!

Notes

  • Etags work with all major browsers (IE8+,FF,Chrome,Safari)
  • Etags work along side other cache headers (such as expiry)
  • Etags are usually generated based on timestamps
  • Etags can be used as a tracking mechanism

References

/eof

Auto mocking with AutoMoq

AutoMoq is a nice little package I came across today. The AutoMoq home page describes it as follows:

AutoMoq is an "auto-mocking" container that creates objects for you. Just tell it what class to create and it will create it.

Why is this useful? Consider the following scenario. We have a BananaCakeFactory class, that relies on a Banana Repository.

Here is the constructor:


public BananaCakeFactory(IBananaRepo bananaRepo);

If we want to run Unit Tests on methods in BananaCakeFactory, we will have to write all the mocking code to mock IBananaRepo. That’s fine.

Time goes on, our app grows more complex. Now our BananaCakeFactory needs to Sugar Repo as well…


public BananaCakeFactory(IBananaRepo bananaRepo, ISugarRepo sugarRepo);

We add mocks for our Sugar Repo, and update all our constructor calls for BananaCakeFactory. When we have a large solution, time spent adding new mocks and updating constructors really adds up. AutoMoq can take the pain away.

Here is an example of how we use AutoMoq to create a mocked class, ready for testing:


// init
mocker = new AutoMoqer();

// mock a Banana Cake Factory
var cakeFac = mocker.Create<BananaCakeFactory>();

// inject our IRepo
mocker.GetMock<IBananaRepo>();

// do work
var result = cakeFac.Bake();

Now if we want to add our Sugar Repo, all that’s needed is the following additional line:


mocker.GetMock<ISugarRepo>();

Happy Coding!

Reference URLs

  • AutoMoq Homepage
  • AutoMoq Nuget Package
  • /eof

    Setting up SyntaxHighligher on Blogger

    As a technical blogger, one of my first questions was:

    how do I add syntax highlighting to my blog?
    I discovered Syntax Highlighter. Syntax Highlighter is a fantastic tool. It looks good, it is easy to set up, and it supports a large number of languages.

    I am going to walk you through setting up Syntax Highlighter on the Blogger platform. The first thing you need to do, is go to your blog template, and choose “Edit HTML”.

    We are going to use the CDN (shared hosting) version of the scripts. Paste this code block in the HEAD section:

    
    <link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css"
        rel="stylesheet" type="text/css" />
    <link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css"
        rel="stylesheet" type="text/css" />
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"
        type="text/javascript" />
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js"
        type="text/javascript"/>
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js"
        type="text/javascript"/>
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js"
        type="text/javascript"/>
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js"
        type="text/javascript"/></script>
    

    This gives us the Syntax Highligher styles, core scripts, and support for HTML/C#/Javascript. If you need additional languages, simply copy the last line, and change the .js to one of the available brushes.

    Next, go to the bottom of the page, above the tag. Add the following:

    
    <script type='text/javascript'>
        // code highlight
        SyntaxHighlighter.config.bloggerMode = true;
        SyntaxHighlighter.all()
    </script>

    This causes Syntax Highlighter parse your code samples. Syntax highligher is now configured. So, how do we post code samples?

    There are a number of ways, but I have found this is the most reliable way:

    
    <script type=“syntaxhighlighter” class=“brush: xml”><![CDATA[
     // Your code goes here!
    ]]></script>
    Note that the brush type needs to match one of the brushes you added in the .js imports further up.

    Why do we use that odd CDATA syntax? It turns out that embedding code in code (such as this page) is harder than you might think. The browser will try to interpret the code. We can change all the code characters to character codes - but that alters the original code and quickly gets tiresome.

    Using <script> tags allows syntax highlighter to find your code sample. CDATA is a special tag that prevents XML/HTML parsers (such as your browser) from trying to parse that code block.

    If you do use Syntax Highlighter, make sure you provide a link to the author’s site, as he provides it free of charge.

    Reference URLs * Syntax Highlighter - http://alexgorbatchev.com/SyntaxHighlighter/ * What is CData? - http://stackoverflow.com/questions/7092236/what-is-cdata-in-html

    /eof

    VS2013 Web Essentials Zen Coding is a huge time saver for web developers

    As a web developer, I have regularly found myself needing to type a large amount of HTML layout code. Your page starts to grow, and your eyes begin to glaze over as you type DIV after DIV.

    Enter Zen Coding. In a nutshell, ZenCoding is a set of editor extensions, allowing a developer to use shorthand for common tasks. Microsoft have incorporated these extensions into Web Essentials for Visual Studio 2013.

    I can’t overstate how awesome this feature is. For example, if I type:

    
    div
    

    …and then hit the tab key, I get:

    
    <div>
    </div>
    

    A div has been added for me. But what if I need to add a CSS Id?

    
    div#mainContent
    
    // tab...
    <div id="mainContent">
    </div>
    

    We can add a CSS class too:

    
    div#mainContent.redbox
    
    // tab...
    <div id="mainContent" class="redbox">
    </div>
    

    Maybe we need some test data to check our layout? Zen even supports Lorem Ipsum!

    
    div>lorem
    
    // tab...
    <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
    </div>
    

    This part is cool. What if we want 3 table rows, each with 2 columns? (yes, I know, you all use pure CSS now - not tables)..

    
    table>tr*3>td*2
    
    // tab...
    <table>
    <tr>
            <td></td>
            <td></td>
        </tr>
    <tr>
            <td></td>
            <td></td>
        </tr>
    <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
    

    If you find it isn’t working after installing Web Extensions, make sure you are using the release copy of Visual Studio 2013 (the latest version of Web Extensions doesn’t work with VS2013 pre-release). Let me know if you find more handy short cuts.

    /eof

    Nested Dependencies in MVC4

    Given how complex the average MVC4 application can become, it is likely that you are going to come across the situation where you build up a dependency chain. It may look like this: Controller -> Provider/Manager -> Dependency

     A common scenario may be that your controller needs a Lookup Manager, and that manager needs a cached query passed in.

    In this scenario, the Unity.Mvc4 nuGet package comes into play.

    Here is our home controller:

    
    // Home controller
    public class HomeController : AsyncController
    {
        private ILookupManager<StatusLookup> statusLookup;
    
        // constructor with lookup dependency
        public HomeController(ILookupManager<StatusLookup> statusLookup)
        {
            this.statusLookup = statusLookup;
        }
    }
    

    Notice that the constructor requires the StatusLookup.

    Here is the Status Manager implementation. Observe that it is a generic class, expecting a StatusLookup object. The constructor requires a query passed in (of type IQuery).

    
    //LookupManager.cs
    public class LookupManager<T> : ILookupManager<T> where T : ILookupField
    {
        private IQuery<T> _query;
    
        // lookup manager has a Query dependency
        public LookupManager(IQuery<T> query)
        {
            _query = query;
        }
    
        public List<T> Lookup()
        {
            // return lookup query result
            return _query.Get();
        }
    }
    

    This is where life gets easy. After installing the Unity.Mvc4 nuGet package, our MVC project gains a “boostrapper” class. This provides us with a simple mechanism to get any dependency into any class in our MVC app. It works by utilising the Unity Dependency Injection container.

    
    // Boostrapper.cs
    // Added by the Unity.Mvc4 NuGet package
    private static IUnityContainer BuildUnityContainer()
    {
        var container = new UnityContainer();
    
        // initialise Status lookup
        container.RegisterType<IQuery<StatusLookup>, QueryStatusLookup>();
    
        // make Status lookup available to mvc4 controllers
        container.RegisterType<ILookupManager<StatusLookup>, LookupManager<StatusLookup>>();
    
        RegisterTypes(container);
        return container;
    }
    

    If we have a look at the BuildUnityContainer() method, there are two calls to container.RegisterType(). The first is to provide the IQuery dependency to StatusLookup. The second is to provide the StatusLookup dependency to our HomeController.

    To keep it all manageable, make sure your dependencies are passed using an interface (ILookupManager, and IQuery in my case).

    /eof