The perils of message placement

Today I entered a contest to win a windows phone I filled in the form and clicked send the form cleared and nothing happerned, or so I thought.

Where Is it?

I scrolled down a little and there was a success message, It goes to show if you place a ajax message in the wrong place it can lead to confusion. If the message was above the submit button it would of been fine.

Oh there it is.

My Typography Cheat Sheet

I know very little about web design and typography in fact most it is from one presentation, so here is my typography cheat sheet.

My Typography Cheat Sheet

  • Line height of 1.3-2.0 ems
  • Column width: 2 alphabets
  • Body text: 16px
  • 2-3 typefaces, maximum
  • Sans-serif (ex. Helvetica) for titles
  • Serif (ex. Georgia) for body text

Some Links

Markdown and Javascript

When I created my demo site I wanted to use markdown for all the text so that I can have the same text in github as when the site is displayed. After searching the internet io found showdown but there was a problem it is not very well maintained. There however is an offshoot that the guys at stackoverflow are using called pagedown.

Notice: There is a jQuery plugin I created the details on how to use it are further down this page.

To get pagedown working get the code from the pagedown repo (if you can’t be bothered with hg you can grab it here), then use the following code:

<html>
    <head>
      <title>Example</title>
    </head>
    <body>
        <button id="load">Load Markdown</button>
        <div id="content"></div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script src="pathto/Markdown.Converter.js"></script>
        <script>
            $(document).ready(function () {
                $('#load').click(function(e) {
                    e.preventDefault();
                    //Get the markdown
                    $.ajax({
                        url: 'yourfile.md',
                        dataType: 'html',

                        success: function(data) {
                            //do the markdown replace
                            var converter = new Markdown.Converter();
                            var result = converter.makeHtml(data);

                            $('#content').replaceWith(result);
                        }
                    });
                });
            });
        </script>
    </body>
</html>

jQuery Plugin

I have also created a jquery plugin to simplify the process that I use for this site to get it working download the plugin then do the following:

<html>
    <head>
      <title>Example</title>
    </head>
    <body>
        <button id="load">Load Markdown</button>
        <div id="content"></div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script src="pathto/Markdown.Converter.js"></script>
        <script src="pathto/jquery.markdown.js"></script>
        <script>
            $(document).ready(function () {
                $('#load').click(function(e) {
                    $('#content').loadMarkdown({
                         url: "yourfile.md",
                         replaceWith: true, //true use replaceWith ELSE appendTo when adding
                         preAdd: function(result) {
                            //Replace some of the generated text
                         },
                         postAdd: function() {
                             //Do anything you want to after the content is added
                         }
                    });
                });
            });
        </script>
    </body>
</html>

Why pay for hosting?

Free Hosting

I don’t like to pay for stuff on the internet this also goes for hosting. Recently I wanted to put up some demo javascript so I figured it was time to find some free hosting.

I turned to google again to try and find an answer. There were a lot of of sites offering free hosting but most of them were crap, I did however find two options thar seemed pretty good, they were:

Google App Engine

What you get for free

With the new Google App Engine pricing you get:

  • 1GB Disk space.
  • 1GB Outgoing bandwidth daily.
  • 1GB Incoming bandwidth daily.

How to set it up

I have created a github project with instructions and all you need.

Amazon S3 Static Hosting

What you get for free

With AWS Free Usage Tier you get (for one year only):

  • 5 GB of Amazon S3 storage.
  • 20,000 get requests monthly.
  • 2,000 put requests monthly.
  • 15GB of data transfer out each month for one year.

How to set it up

  1. Go to amazon and sign up for a free account.
  2. Open the management console.
  3. Select “Amazon Simple Storage Service (S3)” from the dropdown at the top of the page.
  4. Select the bucket(figure 1.1) and then click the properties button(figure 1.2).
  5. Select the website tab(figure 1.3).
  6. Click “Enable” and enter your Index Document this would normally be “index.html”.
  7. Note down the Endpoint and click save.
  8. Upload your site using the upload button.
  9. Select all the files in your site right click and select “Make Public” (Figure 2.1).
  10. Open the endpoint address for step 7 and enjoy your website.

A Got Ya

There seems to be an issue with the bucket names where you cannot create a website unless your bucket name is all lowercase. I found that if you stick to lowercase and only dashes you will be fine.

Figure 1 Figure 1

Figure 2 Figure 2