Consilience Blog

Introducing Ionic, a CSS framework put together to specifically handle layouts with more than 2 columns in CSS.

The framework, originally written by Jason under the name ‘fluid1′, has been used on our client’s website, IEMA.net, since 2005. The aim of the project was to make it accessible to all the common browsers, whilst keeping the HTML markup as semantic as possible.

Currently the script only supports a maximum of 3 columns, but there is no reason why the algorithm can’t be extended to support any number of columns.

Ionic has its own microsite under development where you’ll be able to grab the latest releases and find out more about the framework. The link is:
www.consil.co.uk/ionic.

Americano Coffee

We at Consilience are privy to some day to day luxuries during our time in the office; my personal favourite are our 10:20 caffe lattes courtesy of Ruth. I find that a good cup of coffee kickstarts the day and helps me out from, what is usually, a very zombie-like state.

A morning coffee has become part of my daily routine, whether I am at home, at work, or on the train to university. Recently, I’ve started building up my own coffee making set, and learnt some of the tricks of the trade to making a decent cup of joe.

Coffee Preparation

There are three common ways of preparing coffee:

• Espessso – steam is pumped through the coffee under pressure.
• Brewing – coffee is brewed in hot water
• Instant – coffee is dry prepared and dissolves into hot water.

Instant coffee, no matter what the Kenco man says, is not as good as fresh coffee. Granted it is cheap, convient and great for everyday use if you’re a regular drinker; but it lacks the flavour, aroma, and drug effect you get from brewing or espresso coffee.

I know only one thing about brewing coffee, and that is that I don’t like it as much as espresso! In my view, brewing coffee is like the proper method to make instant coffee. For sure it’s nice, and you can make a lot of it at once so it’s great for dinner parties; it just doesn’t have that specialness that espresso seems to have.

Espresso is a very strong and condensed flavour. If it’s done properly, you get the full richness of the coffee. Espresso is the sort of coffee I drink daily, and the one I’ll be talking about in this post.

Equipment

Grinder

It suprised me when I was first told that the most important element in coffee making is the grinding of the coffee bean. Buying a decent grinder is something that so many people don’t do, including me! It’s the one thing you have control over when you’re making an espresso.

Having a grinder allows you to grind your coffee closer to when you drink it. Once coffee is ground, it starts to deteriorate fast. I’ve heard a golden rule that you don’t want your coffee exposed to oxygen for longer than:

• 12 months – green beans,
• 12 days – roast beans,
• 12 minutes – ground beans

A coarse grind makes a more dilluted coffee. This makes it ideal for cafetieres and drip brews, where the coffee is exposed to the hot water for longer.

A finer grind is best used in espresso machines. More of the bean is exposed to the water/steam giving a fuller flavour. If you put finely ground coffee into a cafetiere, you’ll end up with a bitter taste.

£100 – Iberital MC2
£50 – Dualit burr grinder
£50 – Zassenhaus hand grinders

I have an old blade grinder that I swiped from my Gran. She’s got a Zassenhaus now which I’ve used a couple of times. It takes a while to hand grind coffee, usually 10 minutes, but the results are just as good as the more pricy eletric ones. Don’t waste your money on a  blade grinder; you’re better off buying small amounts of pre-ground coffee.

Espresso machine

I don’t know much about the technicalities of espresso machines. Water pressure, ease of use, and being able to clean the thing easily are all important. Based upon reviews from the internet, these four seem like a good bet depending on your budget:

£200 – Gaggia Classic
£125 – Gaggia Cubika
£100 – Krups XP4020
£65 – De’Longhi Bar 14 – I have one of these.

Other bits and bobs

• An airtight jar to keep your coffee in.
• A coffee tamper if you haven’t already got one, to push the coffee firmly into the portafilter

Choosing your coffee

All down to preference, but don’t buy the beans pre-ground. As already mentioned, pre-ground coffee will have been exposed to the elements, and will already be going stale before you open it.

Try some different flavours from the HasBean store. My personal favourite so far (only tried 4 types) is the Columbian Agua Azol – because it tastes nice!

Best to keep your coffee in the fridge in an airtight container.

Making the espresso

1. Take the portafilter off the espresso machine
2. Preheat the espresso machine.
3. Grind your coffee while you’re waiting for the machine to heat up
4. Put the ground coffee into the portafilter and scrape any excess off so you have a nice flat top
5. Force or “tamp” the coffee down as hard as you can using your tamper
6. Start up your machine. You want the coffee to pour in about 25 secs/30ml. If it takes longer than that to come through then your grind is too fine; if it takes less your grind is too coarse.
7. You now have an espresso which is ready to drink!

In part 2 I’ll talk about some of espresso based types of coffee you can make including; caffe latte, flat white, cappuccino, mocha and americano.

Credits

Thanks to Ruth Lunn and Steve at Brown Sugar cafe, Monkseaton Metro station, for sharing their coffee know-how with me!

Please comment on this post and share some of your tips and ideas, they’re all very welcome!

To anyone out there reading up on clearing, this is the best method:

http://www.positioniseverything.net/easyclearing.html

It’s totally cross-browser compatible, doesn’t leave any messy markup and leaves the code fully accessible. It does however have 1 flaw…

Scroll down to the part about the IE/Mac problem and you’ll see the fix involves adding a display: inline-block to the container block, which is then re-instated to a display: block in the IE stylesheet.

The problem is that inline-block also affects all the other non-IE browsers. This gives us a wrapper that’s not 100% wide. So what can we do?

Initial Setup

The following example will work on every modern browsing environment except Internet Explorer on Macs. You may just want to leave it like this and not bother accommodating the ancient browser.

MyPage.html

<html>
<head>
   <link rel="stylesheet" type="text/css" href="main.css" media="screen" />
   <!--[if IE]>
      <link rel="stylesheet" type="text/css" href="ie.css" media="screen" />
   <![endif]-->
</head>
<body>
   <div class="clear">
      <div style="float: left;"></div>
      <div style="float: right;"></div>
   </div>
</body>
</html>

main.css

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

ie.css

.clear { zoom:1; }

Getting it working in IE/Mac

As described in the P.I.E article, an inline-block trigger on the wrapper will trigger Internet Explorer’s  built in auto-clearing. There are 2 ways to do this:

Overwriting display

Apply 100% width to the inline-block in your main stylesheet This works 99% of the time, just be aware of issues with the IE box model bug.

Add this code to main.css after the clear:after rule:

.clear { display:inline-block; width:100%; }

You now need to revert the display property back to block for IE/Win to get the auto-clearing effect to work. Replace the code in ie.css with:

.clear { zoom:1; display:block; }

Browser sniffers

Have different stylesheets for IE/Win and IE/Mac and include them using a server-side or JavaScript browser sniffer. This is arguably the cleanest fix.

First off remove the conditional include from MyPage.html (<!–[if IE]> …). This file will be included later on using a different method.

Create a new file called iemac.css:

.clear { display:inline-block; width:100%; }

PHP users can them add this code in the html <head> element:

<?php
$browser = strtolower($_SERVER['HTTP_USER_AGENT']);
if (strpos($browser, 'msie')) {
   if (strpos($browser, 'mac')) {
      echo "<link rel='stylesheet' type='text/css' href='iemac.css' />";
   }
   echo "<link rel='stylesheet' type='text/css' href='ie.css' />";
}
?>

Alternatively, you can apply a fix using JavaScript. Again this goes in the <head>:

<script language="javascript" type="text/javascript">
<!--
if (navigator.appName.indexOf("Microsoft Internet Explorer") >= 0) {
   if (navigator.platform.indexOf("Mac") >= 0) {
      document.write("<link rel='stylesheet' type='text/css' href='iemac.css' />");
   }
   document.write("<link rel='stylesheet' type='text/css' href='ie.css' />");
}
// -->
</script>

A quick note to developers that are styling elements that use monospace fonts (pre, code, q, etc). Be aware that some browsers, like Safari and Chrome, have their own fixed-width font size preference, which by default is set to 13px. This upsets proceedings when you apply a proportional (% or em) font-size to the body.

There are three solutions to counter this problem:

1. Apply font-size to each element separately
2. Remove monospace from the font stack and treat it as a variable spaced font
3. Use a fixed font size

Firefox and Internet Explorer have a single default font size so you can’t apply a larger size to monospace elements.

On the same subject, Google Chrome users can also set different default sizes for their serif and sans-serif fonts. By default these are identical so it will not affect the styling for the majority of users.

The Final Four

Down to last four; CakePHP, CodeIgnitor, Kohana and Zend. The test is to get each framework to print ‘Hello World’ on its own ‘/hello/’ page. For each test I will record the time taken to:

1. Work out how to complete the task, which will indicate how simple it is to use, and how good the documentation is.
2. How long the script takes to execute, to measure the performance. This will be averaged over 5 attempts

CodeIgniter

Test completed in 15 minutes. I only had to use two pages from the documentation, One to print, one to remove index.php from the url.

Execution took 0.031 seconds.

CakePHP

Took an 1 hour. Far too much made of the installation. File permissions to deal with, database configuration, why?! Did I say i wanted caching enabled and connect to a database? Then when I finally got to writing a controller, it didn’t let me do a raw echo. So I create a view, and find it comes with a default layout?! Takes me another 15 minutes to look through the manual to find how to switch it off. Too much crap to get through.

Execution took 1.388 seconds.

Kohana

It was difficult to accurately analyse this one because it’s so similar to CodeIgniter, and I think it’s assumed that people using it are familiar with CI too. The documentation isn’t at the level of CIs, but it’s still very clear. Took me slightly longer to find how to print ‘Hello World’ and a lot more pages, but it came with an example .htaccess file to speed up removing the index.php in the URL. 15 minutes.

Execution took 0.039 seconds.

Zend

Zend took 30 minutes to set up correctly. It’s very much start from scratch with Zend, nothing is there for you. You need to create the directory hierarchy, and all the files within it outside of the library itself. However the documentation was excellent, and I knew where I was going very quickly, it just involved a lot of ‘admin’ to get there.

Execution took 0.078 seconds.

The Result

I had planned to do some more tests for the final four, but it wouldn’t be justified as I’ve already made up my mind!

4th place – CakePHP

Cake is a good framework no doubt about it. One of it’s main perks that everyone raves about is its automatic code generation dubbed ‘automagic’. I could see this being an advantage for a rapidly expanding website, and for experienced PHP developers, but for me though it’s like learning to fly a plane with autopilot.

Another problem for me is the documentation. For argueably the most complex framework of the lot, it’s poor.

Finally the features, or classes, that it comes aren’t as extensive as the other three frameworks. There are many third party plugins to be found in ‘the bakery‘ but they should be integrating some of the more useful ones into the framework release so you don’t have to go looking for them.

3rd place – Zend

Zend is a damn nice library of code, and has some great components like lucene search. In terms of flexibility in the applications it can produce I’d probably put it in the number 1 slot. The documentation is also brilliant, especially the reference guide and the quick start tutorials. At this level, it’s ultimately down to preference.

2nd place – CodeIgniter

Sooo we have a winner, but why did it pip CodeIgniter? CodeIgniter is brilliantly simple, flexible, but best of all it’s the fastest framework on the market. The documentation is good, especially the screencasts. It also boasts the advantage of working with both PHP4 and PHP5.

1st place – Kohana

As this is just an evolution of CodeIgniter you can get started using both its own and the CI documentation. Why is it better than CodeIgniter? Two reasons:

• It’s strict PHP5 and takes advantage of all its new features. This makes it more future-proof and robust for building object-oriented applications.
• It’s ran by a community as oppose to an organisation.

And that’s it! Enough writing, more programming!

Read part 1