I guess this is kind of a review so in true geek style I will mark it up in hreview format.

Hackday 2007

Overall: Hackday London was a good weekend and I would definitely do it next year!

Overall Rating: 5/5

Reviewed on Jun 20, 2007 by Ben

‘Port Out, Starboard Home’ then became abbreviated to Posh and attributed to the rich passengers.

But now it has a new meaning. Some big names in development world came up with the acronym POSH, meaning ‘Plain Old Semantic Markup’, with a goal to promote semantic markup.

What?

POSH is an umbrella term for using semantic markup and best practices when creating markup for your web pages. Its all about using the correct semantic markup to create structured content in pages, separating out this structure from presentation and other good practices to make your markup play nice.

Why are you not POSH?

To be honest it is not hard to POSH, there is not real excuse for not producing POSH markup.
So why are there so many web pages out there that are still not built with proper semantic markup. I would say its down to a number of things.

1. Ignorance - not being aware of these techniques and best practices. Hopefully snappy acronyms like POSH will bring about more awareness.
2. Laziness - “It takes too long to learn CSS. I’ll do this page in tables because its easier for me.”, come on son! call your self a professional, get with the times and learn CSS.
3. Old code base - Legacy code that spits out table based layouts need updating and that takes time and money, both of which you may not have.
4. You use ASP.NET, although things are improving slowly!

There are many benefits to using POSH and not so many drawbacks.

Benefits of POSH

• Pages are easier to read and understand, therefore they will be easier and quicker for developers to maintain and debug.
• Pages are more portable to other devices other that web browsers.
• Pages are structured correctly making them more search engine friendly.
• Pages are more accessible, easer to read by screen readers.

Drawbacks of POSH

• Effort, you have to get off your arse and learn something new.
• Having to update your legacy CMS which will take time and money.

I know that this post may seem a bit biased but I can genuinely not think of a good reason not to use POSH in your code.

If your CMS still produces tables and all manner of tag soup then bear this in mind. It makes bad business sense not to update your CMS to use POSH, you are limiting your potential market. A CMS that produces more search engine friendly and accessible markup will be more attractive to clients and may well give you the edge you need against other competing CMS’s.

How can I be POSH?

A good starting point is to check out the POSH page on the microformats wiki. There is a good checklist and resources to give your markup the POSH touch.

If I am preaching to the converted then help spread the word!

  'irb.bat' is not recognized as an internal or external command,
  operable program or batch file

I did a little digging around on the internet and found out it was a problem with using Instant Rails and RadRails together. Instant Rails is a self contained development environment for Ruby on Rails on a Widows machine. It does not modify your system environment at all, as a concequence Windows did not know where to find my irb.bat file to run the Ruby shell for the console.

This is easily fixed though, all you have to do is go to

My Computer > Properties > Advanced > Environment Variables > System Variables.

Find the variable named Path, then click Edit and add in the following (this assumes you installed Instant Rails into a directory called InstantRails in your C drive, if not replace the path with your own path):

C:\\InstantRails\\ruby\\bin;

Make sure there is a ; separating the value you add and the current variable value. Windows will now know where to find the Ruby executable files. For completeness you could also add in some more paths to let Widows know where the executables are for MySQL, Apache and PHP.

C:\\InstantRails\\mysql\\bin;C:\\InstantRails\\Apache;C:\\InstantRails\\PHP

There does not seem to be a huge amount of support documentation out there at the moment for RadRails. I think this will improve soon. Aptana has only just taken over the RadRails project and are settling in at the moment, there is a good resource here for setting up RadRails and Instant Rails.

Before reading this post you may want to read Eric Meyer’s article Containing Floats which explains the clearing problem well.

What I really want to discuss the merits and flaws of both methods and try and decide which method is best to use. It is really a debate about whether or not to add extra markup to your XHTML document.

Clearing With Structural Markup

A common technique is to place a <br /> or <div> with some CSS

.clearme { clear:both; }

This will clear the space below the floated element.

Pros

This method is easy to understand and implement.

If your layout and design allows it you can use existing elements on the page to do this job for you, e.g. a footer placed underneath the floated items.

Cons

In most cases you can not rely on using existing mark-up to clear floated items, especially for complex designs and layouts. Extra non-semantic mark-up then has to be added.

It is considered good practice to separate content and presentation and there is an argument that adding extra XHTML elements to clear floating items goes against this practice.

Using this method you are adding bits of mark-up that do not have any semantic value and are just used for layout purposes. Although not a terrible crime I do think that as a developer you should strive to produce mark-up that is as meaningful and semantically correct as possible. One of the reasons you still see sites with “divitus” is because many developers really have not grasped the finer points of semantic mark-up.

Clearing Without Structural Mark-up

This method popularised by positioniseverything uses some clever CSS to clear the floated elements:

XHTML

<div class="clearfix">
    <div class="floating">
        <p>The content ..</p>
    </div>
</div>

CSS

.clearfix:after {
    clear:both;
    content:".";
    display:block;
    height:0pt;
    visibility:hidden;
}

.clearfix {display: inline-block;}

For IE6 using conditional comments

.clearfix {height:1px;}

Basically the .clearfix class uses the :after pseudo-element to insert a ‘.’ after the floated element. This is then cleared achieving the desired results

Pros

This is a neat and elegant solution that does not require any additional mark-up, separating presentation from content. One of my work colleagues pointed out that the CSS is actually adding content into the page, therefore breaking the separation.

I would argue that it is not really altering the XHTML document itself and is OK, but would agree that it is a grey area.

Cons

A problem I have found with this solution stems from its complexity. A developer with a basic level of CSS knowledge will find it hard to fully understand what .clearfix is doing, therefore leaving it open to abuse and overuse.

Some of the CSS rules in .clearfix trigger IE to give an element “layout” (A mystery in itself). Giving elements layout in IE fixes a multitude of strange CSS rendering bugs. This may lead to .clearfix being used in the wrong context to fix CSS bugs and not as intended as a way to clear floated items.

This technique does not work in IE browsers, this is easily rectified for IE7, but IE6 needs a rule adding in the IE6 specific stylesheet, you may need to include an extra stylesheet to accommodate.

Summary

To clear floated elements using mark-up or not really boils down to the Content vs Presentation debate.

There is no doubt that HTML was designed to convey meaning and structure and not presentation. Some developers argue that you should try to use mark-up that has semantic value, adding extra elements in the code that have no semantic meaning and are just for layout should be avoided.

On the other hand some developers see the .clearfix class as a hack and that it is using CSS to add content thereby breaking the separation in that way.

The structural mark-up approach has a simplicity that I like, it uses a minimal amount of code to achieve its goal. But the CSS method has an elegance that wins me over and that is the method I use most of the time.

Which method you use really comes down to personal choice and the circumstance. For example, if you are knocking up a quick holding page and need to clear a floated item you are not going to use the CSS based method. You would need to add in an extra stylesheet, but that would be overkill for a holding page.

If you had a complex design to implement with lots of floated elements you may want to use the CSS based method, it would be a cleaner way to clear the elements without the added bloat of more XHTML on an already complex page.

Be pragmatic and use the right tools for the job.

I must however stress that if you don’t understand how .clearfix works then don’t use it!

A picture of Coniston, the village we stayed in, from the other side of the lake.

It was nice to get away from the Internet for a while, I had no way of accessing email or RSS readers so the temptation was not there.

I think I really benefited from getting away from development. Not thinking about programming and new ideas for a while gave me a chance to recharge. I feel ready to get back to it and try to work at some of my new ideas to get something built.

I would definitely recommend shutting down your ‘web factory’ for at least a week to avoid burnout.

The motivation for this blog comes from the agile development principle of sharing knowledge.

Be a Mentor: By teaching others knowledge you have gained you can break down communication barriers and encourage the exchange of information, benefiting everyone. If I can help one person with a nugget of knowledge then I will be a happy man.

It’s not all selfless giving of knowledge. This site will keep me writing and thinking, preventing my brain from going on standby. Hopefully by thinking about what I want to write on this blog will give me inspiration for new ideas and projects.

Why is it called Ben 2.0

Because this is the second version of my blog and also a comical reference to the way that ‘web 2.0′ is an overused buzz word.

What is it going to be about?

Web development , design, programming, photography and general thoughts from my messy head.

Your blog is broken!

I decided that it would be better to get the blog live and then fix the minor problems later rather delaying the launch too much longer. If you find any bugs then contact me through the usual channels or the contact form.

I have a few issues that I am aware of, for example, it still needs to be tested in Safari and IE 6 (I don’t have access to these at home) and there is a little problem with the ajax comments form. Apart from that its just all minor changes to icons or typography and maybe a new Wordpress plug in or two.

Hope you enjoy!