New digs…

So, I got tired of fighting WordPress and spending money to host it. I wanted something a bit simpler that would let me focus on writing. So, I’ve moved CodeGardener.com to Posterous, and refreshed the look considerably.

I’m still not done with the redesign. The links in the navigation pane aren’t all working yet. And, I need to work on the other views (search, tags, etc.) But, the general look and feel is pretty much complete.

Overall, the process has been pretty smooth. It was refreshingly simple compared to WordPress. Though, Posterous has a nastly little habit of applying styles to your content without your knowledge. As I discover ones I don’t like (e.g. the large-quote, medium-quote, small-quote nonsense), I’ll stomp on them with some CSS of my own.

Best of all, I’m sending this post via email, which is exactly what I wanted. Hopefully, I won’t have to spend several minutes fixing it once it hits the web.

UPDATE: Raw email didn’t handle paragraphs the way I wanted. Let’s try using Markdown.

UPDATE 2: Markdown works great! Might even want to go back and implement it more broadly throughout the site, since it’s so much easier to read than HTML.

HTML5 and CSS3 in Visual Studio 2010

As a web developer looking to stay current, I’ve been trying to do all of my personal projects in HTML5 and CSS3 for some time now. In fact, browser support is generally outstanding. Unfortunately, the lack of tooling support has made it a bit more difficult. But, now that’s all changed.

Assuming you’re running Visual Studio 2010 SP1, you can download and install the Web Standards Update for Microsoft Visual Studio 2010 SP1, which will add IntelliSense support for the latest updates to HTML, CSS, and JavaScript.

In case you’re looking for more information: here’s a link to the announcement, and a link to Scott Hanselman’s demo of the release.

Moving past and to the semantic web

In his recent conversation, a coworker mentioned if you’re still using the <table> tag to layout your web pages, “you need to move out of the 90’s.” Of course, I agree. And, I frequently use <div> tags instead of <table> tags.

But, a little digging on the web has shown me I’ve probably been overusing <div> tags. Instead, the recommendations I’m seeing (links at the bottom of this post) are to limit <div> tags to the main layout of your page – things like headers, content, side-bars, and footers. Then, use traditional HTML markup for the content inside each area of your layout.

One such example I ran across used the <fieldset> and <ol> tags to render a form. It looked like this:

<form>
  <fieldset>
    <legend>Please enter your credentials:</legend>
    <ol>
      <li>
        <label for="username">User Name:</label>
        <span class="input"><input type="text" id="username"/></span>
      </li>
      <li>
        <label for="password">Password:</label>
        <span class="input"><input type="text" id="password"/></span>
      </li>
      <li>
        <span class="submit"><input type="button" id="login" value="Login"/></span>
      </li>
    </ol>
  </fieldset>
</form>

Without any CSS, it rendered like this:

image

Of course, that’s not the nicest looking form. But, it does provide some distinct advantages – especially to users who depend on accessibility tools to “view” the web. By enclosing the elements of the form in an ordered list (<ol>), for example, the user can hear how many elements there are in the form.

And, by enclosing all of the fields in a <fieldset>, we give the user additional context that gets repeated with each <label> in the form. This would be particularly useful for a shopping cart, where the Address fields might be repeated in multiple contexts, such as shipping address and billing address. Just enclose each group of fields in a separate <fieldset> and give them an appropriate <legend>.

To get the form to look less like a list and more like a traditionally (<table>) formatted form, I used this CSS:

<style type="text/css">
    fieldset {
        width: 260px;
        border: solid 1px black;
        }
    ol {
        list-style: none;
        margin: 0px 0px 0px -60px ;
        }
    li {
        display: table-row;
        }
    li label {
        width: 100px;
        float: left;
        text-align: right;
        padding: 5px;
        }
    li .input {
        width: 140px;
        float: right;
        text-align: left;
        padding: 5px;
        }
</style>

After which, it rendered like this:

image

Or, after another five minutes, I created this CSS, to render the <label> tags above the <input> tags:

<style type="text/css">
    fieldset {
        width: 200px;
        border: solid 1px black;
        }
    ol {
        list-style: none;
        margin: 0px 0px 0px -30px ;
        }
    li {
        display: table-row;
        }
    li label {
        width: 100px;
        padding: 5px;
        }
    li .input {
        width: 140px;
        float: left;
        text-align: left;
        padding: 5px;
        }
</style>

This rendered the form like this:

image

So, in the end, I learned something today. I hope you do to!

Here are the links I promised:

Enjoy!