• Minimalist by Mahmoud Khaled at Six Revisions
• Wordpress by =sinthux at DeviantArt
• Green by ~klosdafrau at DeviantArt

I like gray/dark professional looking styles and just love carbon steel, like iNove has.

As Usability and CSS expert, I like to use CSS grids. But most grids are based on hardcoded ‘px’ values or ‘%’. Both have downsided. Using ‘px’ makes the design scale badly, even though most modern browsers scale entire pages and not just the text, some browsers make mistakes when ‘px’ is used. Using ‘%’ will make most part scale better, but it’s harder to work with. Most Usability experts and guidelines suggest using ‘em’. I’m not going into the details of the ‘px’ versus ‘em’ debate, but I too prefer ‘em’. Today I found some time to invest into looking into the issue of CSS frameworks/grids and ‘em’ again and found YUI 2 Grids CSS. This seems to be a very nice grid system using ‘em’, so I’m definitely going to try that when creating my new theme.

While reading about YUI 2’s Grids CSS and took a look att some examples. Using Google Chrome and looking at the examples, my chrome asked if it should translate the examples from Spanish. Since the examples use Lorem Ipsum text, there is no Spanish present, mistake 1. You can tell the automatic language detection in Chrome what language the page is in by selecting the right language from the drop-down menu. Shame there’s no ‘Latin’ in the list, mistake 2. Quite an amusing bug, but also quite astonishing that Latin is not in Google Translate’s repertoire.

As mentioned in my previous blog entry, I’ve been thinking about implementing a wordle/tagul plug-in for Wordpress using CSS3 only. I’ve just spent about 15 minutes experimenting and have already gotten quite far.

The tags

To make things simple I’ve taken the HTML from my own tag cloud, although slightly modified. For CSS3 to work, the tags need to be divided into groups for colour and size, tag-grp-# and tag-score-#.

<div class="widget widget_tag_cloud" id="tag_cloud-2"><h3>Tags</h3>
	<div>
		<a title="3 topics" class="tag-score-3 tag-link-13 tag-grp-1" href="http://blog.itwarlocks.com/tag/agile/">agile</a>
		<a title="3 topics" class="tag-score-3 tag-link-31 tag-grp-2" href="http://blog.itwarlocks.com/tag/apache/">apache</a>
		<a title="2 topics" class="tag-score-2 tag-link-30 tag-grp-1" href="http://blog.itwarlocks.com/tag/authentication/">authentication</a>
		<a title="2 topics" class="tag-score-2 tag-link-11 tag-grp-1" href="http://blog.itwarlocks.com/tag/blog/">blog</a>
		<a title="1 topic" class="tag-score-1 tag-link-5 tag-grp-1" href="http://blog.itwarlocks.com/tag/development/">Development</a>
		<a title="1 topic" class="tag-score-1 tag-link-26 tag-grp-3" href="http://blog.itwarlocks.com/tag/economy/">economy</a>
		<a title="1 topic" class="tag-score-1 tag-link-21 tag-grp-1" href="http://blog.itwarlocks.com/tag/extensibility/">extensibility</a>
		<a title="1 topic" class="tag-score-1 tag-link-15 tag-grp-3" href="http://blog.itwarlocks.com/tag/filosophy/">filosophy</a>
		<a title="3 topics" class="tag-score-3 tag-link-49 tag-grp-2" href="http://blog.itwarlocks.com/tag/gnutls/">gnutls</a>
		<a title="1 topic" class="tag-score-1 tag-link-16 tag-grp-1" href="http://blog.itwarlocks.com/tag/gui/">GUI</a>
		<a title="2 topics" class="tag-score-2 tag-link-62 tag-grp-1" href="http://blog.itwarlocks.com/tag/http/">http</a>
		<a title="2 topics" class="tag-score-2 tag-link-63 tag-grp-1" href="http://blog.itwarlocks.com/tag/https/">https</a>
		<a title="1 topic" class="tag-score-1 tag-link-27 tag-grp-3" href="http://blog.itwarlocks.com/tag/humanresources/">humanresources</a>
		<a title="1 topic" class="tag-score-1 tag-link-28 tag-grp-1" href="http://blog.itwarlocks.com/tag/innovation/">innovation</a>
		<a title="2 topics" class="tag-score-2 tag-link-50 tag-grp-1" href="http://blog.itwarlocks.com/tag/javascript/">JavaScript</a>
		<a title="1 topic" class="tag-score-1 tag-link-17 tag-grp-3" href="http://blog.itwarlocks.com/tag/leadership/">leadership</a>
		<a title="2 topics" class="tag-score-2 tag-link-19 tag-grp-3" href="http://blog.itwarlocks.com/tag/management/">management</a>
		<a title="2 topics" class="tag-score-2 tag-link-34 tag-grp-2" href="http://blog.itwarlocks.com/tag/mod_auth/">mod_auth</a>
		<a title="2 topics" class="tag-score-2 tag-link-35 tag-grp-2" href="http://blog.itwarlocks.com/tag/mod_auth_script/">mod_auth_script</a>
		<a title="2 topics" class="tag-score-2 tag-link-32 tag-grp-2" href="http://blog.itwarlocks.com/tag/mod_dav/">mod_dav</a>
		<a title="3 topics" class="tag-score-3 tag-link-52 tag-grp-2" href="http://blog.itwarlocks.com/tag/mod_gnutls/">mod_gnutls</a>
		<a title="2 topics" class="tag-score-2 tag-link-64 tag-grp-2" href="http://blog.itwarlocks.com/tag/mod_ssl/">mod_ssl</a>
		<a title="2 topics" class="tag-score-2 tag-link-36 tag-grp-1" href="http://blog.itwarlocks.com/tag/office/">office</a>
		<a title="2 topics" class="tag-score-2 tag-link-68 tag-grp-1" href="http://blog.itwarlocks.com/tag/open-source/">open source</a>
		<a title="3 topics" class="tag-score-3 tag-link-53 tag-grp-1" href="http://blog.itwarlocks.com/tag/openssl/">openssl</a>
		<a title="1 topic" class="tag-score-1 tag-link-24 tag-grp-3" href="http://blog.itwarlocks.com/tag/organisation/">organisation</a>
		<a title="3 topics" class="tag-score-3 tag-link-29 tag-grp-2" href="http://blog.itwarlocks.com/tag/php/">php</a>
		<a title="1 topic" class="tag-score-1 tag-link-9 tag-grp-1" href="http://blog.itwarlocks.com/tag/principles/">Principles</a>
		<a title="2 topics" class="tag-score-2 tag-link-25 tag-grp-1" href="http://blog.itwarlocks.com/tag/roi/">roi</a>
		<a title="1 topic" class="tag-score-1 tag-link-18 tag-grp-1" href="http://blog.itwarlocks.com/tag/scm/">SCM</a>
		<a title="1 topic" class="tag-score-1 tag-link-14 tag-grp-1" href="http://blog.itwarlocks.com/tag/scrum/">scrum</a>
		<a title="1 topic" class="tag-score-1 tag-link-12 tag-grp-1" href="http://blog.itwarlocks.com/tag/software/">software</a>
		<a title="3 topics" class="tag-score-3 tag-link-56 tag-grp-2" href="http://blog.itwarlocks.com/tag/ssl/">ssl</a>
		<a title="1 topic" class="tag-score-1 tag-link-20 tag-grp-3" href="http://blog.itwarlocks.com/tag/testing/">testing</a>
		<a title="1 topic" class="tag-score-1 tag-link-23 tag-grp-1" href="http://blog.itwarlocks.com/tag/thinktank/">thinktank</a>
		<a title="2 topics" class="tag-score-2 tag-link-65 tag-grp-2" href="http://blog.itwarlocks.com/tag/tls/">TLS</a>
		<a title="3 topics" class="tag-score-3 tag-link-57 tag-grp-2" href="http://blog.itwarlocks.com/tag/ubuntu/">ubuntu</a>
		<a title="2 topics" class="tag-score-2 tag-link-39 tag-grp-1" href="http://blog.itwarlocks.com/tag/vba/">vba</a>
		<a title="2 topics" class="tag-score-2 tag-link-66 tag-grp-1" href="http://blog.itwarlocks.com/tag/virtual-hosting/">Virtual Hosting</a>
		<a title="2 topics" class="tag-score-2 tag-link-38 tag-grp-1" href="http://blog.itwarlocks.com/tag/visualbasic/">visualbasic</a>
		<a title="3 topics" class="tag-score-3 tag-link-33 tag-grp-2" href="http://blog.itwarlocks.com/tag/webdav/">WebDAV</a>
		<a title="1 topic" class="tag-score-1 tag-link-40 tag-grp-1" href="http://blog.itwarlocks.com/tag/windows/">windows</a>
		<a title="2 topics" class="tag-score-2 tag-link-37 tag-grp-1" href="http://blog.itwarlocks.com/tag/word/">word</a>
		<a title="2 topics" class="tag-score-2 tag-link-86 tag-grp-2" href="http://blog.itwarlocks.com/tag/wordpress/">wordpress</a>
		<a title="2 topics" class="tag-score-2 tag-link-60 tag-grp-2" href="http://blog.itwarlocks.com/tag/zimbra/">zimbra</a>
	</div>
</div>

The styling

Using CSS3 techniques like transform and transition (-webkit-transform, -webkit-transition, -moz-transform) you can easily get the tags to change then moused over.

/* Generic styles */
body {
	font-family: Arial, Helvetica, Tahoma, sans-serif;
}
a {
	color: #2970A6;
}
/* Wordpress widget style */
.widget {
	padding: 10px 15px 16px;
	width: 400px;
	border: 1px solid #C0C0C0;
}
/* Pretty tag cloud */
.widget_tag_cloud a {
	/* Transform is only applied to block elements, inlineblock preserves the layout: */
	display: inline-block;
	text-decoration: none;
	/* Animate the transitions for color, background and transform: */
	-webkit-transition: color,background,-webkit-transform 1s,1s,0.5s ease-out;
	-moz-transition: color,background 1s ease-out;
}
.widget_tag_cloud a:hover {
	background: #808080;
	color: #FFFFFF;
	/*font-size: 22pt;*/
	padding: 0.5em;
	margin: -0.5em;
	opacity: 0.7;
	-webkit-border-radius: 0.5em;
	-moz-border-radius: 0.5em;
}
/* Tag score determins size.
 * We want the mouse over size to be the same,
 * so different scales for each.
 */
a.tag-score-1 {
	font-size: 0.8em;
}
a.tag-score-1:hover {
	-webkit-transform: scale(2.5) !important; /* 0.8 x 2.5 = 2.0 */
	-moz-transform: scale(2.5) !important;
}
a.tag-score-2 {
	font-size: 1.25em;
}
a.tag-score-2:hover {
	-webkit-transform: scale(1.6) !important; /* 1.25 x 1.6 = 2.0 */
	-moz-transform: scale(1.6) !important;
}
a.tag-score-3 {
	font-size: 2em;
}
a.tag-score-3:hover {
	-webkit-transform: scale(1) !important; /* 2.0 x 1.0 = 2.0 */
	-moz-transform: scale(1) !important;
}
/* Tag groups determine colour. */
a.tag-grp-1 {
	color: #2970A6;
}
a.tag-grp-2 {
	color: #5FC159;
}
a.tag-grp-3 {
	color: #F6872B;
}
/* Some randomly chosen tags to rotate. */
.tag-link-21,
.tag-link-35,
.tag-link-24,
.tag-link-68 {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
}

The result

• Pretty tag cloud, stage 1
  (Only works perfectly in Webkit; Safari, Chrome and partially in Gecko; Mozilla, Firefox.)

Next step

As can be seen, the layout of the tags is not right. This cannot be done with CSS, so this is where I’ll be using some jQuery in the next step. The biggest challenges will be the algorithm and font-size/letter calculations in the browser.

I recently came across Highcharts, a great JavaScript library for creating charts. It uses canvas where it can, supports skins (easily changed with CSS). I’ve been searching/waiting for a decent JavaScript based charting API and it has finally arrived.

Seeing as I’m a wordpressaholic I’m of course going to try and get it into Wordpress. Although that might turn out to be quite more than I can chew.

Data Source

Highcharts can create charts from different sources; JSON, AJAX and HTML Tables. Each of which are actually scripted, but Highcharts has nice examples. For a Wordpress plug-in the most common source would be an existing HTML table. To be easily used as a source, it would require some structure. As an example I’ll take the Browser Statistics for 2009 from w3schools.com.

Table:

<table width="100%" cellspacing="0" id="chart-1-table">
	<caption>
		<h2 class="title">Browser Statistics 2009</h2>
		<h3 class="subtitle">Source: <a href="http://www.w3schools.com/browsers/browsers_stats.asp" title="Browser Statistics at w3schools.com">w3schools.com</a></h3>
	</caption>
	<colgroup class="chart-axis-x">
		<col width="16%" align="left" title="Month"/>
	</colgroup>
	<colgroup width="12%" align="center" class="chart-axis-y">
		<col title="Internet Explorer 6"/>
		<col title="Internet Explorer 7"/>
		<col title="Internet Explorer 8"/>
		<col title="Firefox"/>
		<col title="Chrome"/>
		<col title="Safari"/>
		<col title="Opera"/>
	</colgroup>
	<thead>
		<tr>
			<th>2009</th>
			<th>IE6</th>
			<th>IE7</th>
			<th>IE8</th>
			<th>Firefox</th>
			<th>Chrome</th>
			<th>Safari</th>
			<th>Opera</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>November</th>
			<td>13.3%</td>
			<td>13.3%</td>
			<td>11.1%</td>
			<td>47.0%</td>
			<td>8.5%</td>
			<td>3.8%</td>
			<td>2.3%</td>
		</tr>
		<tr>
			<th>October</th>
			<td>12.8%</td>
			<td>14.1%</td>
			<td>10.6%</td>
			<td>47.5%</td>
			<td>8.0%</td>
			<td>3.8%</td>
			<td>2.3%</td>
		</tr>
		<tr>
			<th>September</th>
			<td>12.2%</td>
			<td>15.3%</td>
			<td>12.1%</td>
			<td>46.6%</td>
			<td>7.1%</td>
			<td>3.6%</td>
			<td>2.2%</td>
		</tr>
		<tr>
			<th>August</th>
			<td>10.6%</td>
			<td>15.1%</td>
			<td>13.6%</td>
			<td>47.4%</td>
			<td>7.0%</td>
			<td>3.3%</td>
			<td>2.1%</td>
		</tr>
		<tr>
			<th>July</th>
			<td>9.1%</td>
			<td>15.9%</td>
			<td>14.4%</td>
			<td>47.9%</td>
			<td>6.5%</td>
			<td>3.3%</td>
			<td>2.1%</td>
		</tr>
		<tr>
			<th>June</th>
			<td>7.1%</td>
			<td>18.7%</td>
			<td>14.9%</td>
			<td>47.3%</td>
			<td>6.0%</td>
			<td>3.1%</td>
			<td>2.1%</td>
		</tr>
		<tr>
			<th>May</th>
			<td>5.2%</td>
			<td>21.3%</td>
			<td>14.5%</td>
			<td>47.7%</td>
			<td>5.5%</td>
			<td>3.0%</td>
			<td>2.2%</td>
		</tr>
		<tr>
			<th>April</th>
			<td>3.5%</td>
			<td>23.2%</td>
			<td>15.4%</td>
			<td>47.1%</td>
			<td>4.9%</td>
			<td>3.0%</td>
			<td>2.2%</td>
		</tr>
		<tr>
			<th>March</th>
			<td>1.4%</td>
			<td>24.9%</td>
			<td>17.0%</td>
			<td>46.5%</td>
			<td>4.2%</td>
			<td>3.1%</td>
			<td>2.3%</td>
		</tr>
		<tr>
			<th>February</th>
			<td>0.8%</td>
			<td>25.4%</td>
			<td>17.4%</td>
			<td>46.4%</td>
			<td>4.0%</td>
			<td>3.0%</td>
			<td>2.2%</td>
		</tr>
		<tr>
			<th>January</th>
			<td>0.6%</td>
			<td>25.7%</td>
			<td>18.5%</td>
			<td>45.5%</td>
			<td>3.9%</td>
			<td>3.0%</td>
			<td>2.3%</td>
		</tr>
	</tbody>
</table>

Style:

.chart table {
	margin: 0;
	padding: 0;
	font-size: 0.86em;
}
.chart table tr {
	line-height: 1.5em;
}
.chart table th,
.chart table td {
	padding: 0.5em;
	border-top: 1px solid #999999;
}
.chart table thead {
	background-color: #F0F0F0;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E0E0E0), to(#FFFFFF));
}
.chart table thead th {
	border-bottom: 1px solid #999999;
	border-top: 1px solid #999999;
}
.chart table thead th:first-child,
.chart table tbody th {
	text-align: left;
}
.chart table tbody td {
	text-align: center;
}
.chart table h2.title {
	font-size: 1.2em;
	margin-bottom: 0px;
}
.chart table h3.subtitle {
	font-size: 0.86em;
	margin-top: 0px;
}

Charting

The Highcharts API has a lot of options, too much to mention here, but a few are key to working successfully with pre-existing tables. The examples don’t use jQuery to parse the HTML, but since both Wordpress and Highcharts use it, I will too. These properties are static in the examples, but were they’ll need to be more dynamic; title, subtitle, xAxis, plotOptions.series. These options can be obtained from the table text or structure.

title and subtitle can be grabbed from the <caption>:

title: {
	text: (function(){
		var table = $('#chart-1-table');
		var title = $('caption .title', table);

		return title ? title.html() : '';
	}())
},
subtitle: {
	text: (function(){
		var table = $('#chart-1-table');
		var subtitle = $('caption .subtitle', table);

		return subtitle ? subtitle.html() : '';
	}())
},

Currently the title and subtitle are taken from tags with the ‘title’ and ’subtitle’ classes, but just using H2 and H3 (or H1 and H2) would work too of course.

xAxis as in the examples:

xAxis: {
	categories: [
		'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
		'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
	],
	title: {
		text: 'Month'
	}
}

Since we’ve got an existing table with labels, we can do it more dynamically.
xAxis from existing table:

xAxis: {
	categories: (function(){
		var table = $('#chart-1-table');
		/*
		 * The first column in the table body uses <TH> tags,
		 * to separate them from data.
		 */
		var cats = $('tbody > tr > th', table)
			.map(function(){
				return $(this).text();
			});

		return $.makeArray(cats);
	}()),
	title: {
		text: 'Month'
	}
}

map allows you to turn the array with elements into an array with the actual text.

series as in the examples:

series: [{
	name: 'November'
}, {
	name: 'October'
}, {
	name: 'September'
}, {
	name: 'August'
}, {
	name: 'July'
}, {
	name: 'June'
}, {
	name: 'May'
}, {
	name: 'April'
}, {
	name: 'March'
}, {
	name: 'February'
}, {
	name: 'January'
}]

Since we’ve got an existing table with labels, we can do it more dynamically.
series from existing table:

series: (function(){
	var result = [];

	var table = $('#chart-1-table');
	/*
	 * Get all the columns from the table head.
	 * Some tables have multiple rows in the header.
	 */
	var head = $('thead > tr:last', table);
	/*
	 * Skip the first column, it's the Y-axis label.
	 */
	var columns = $('th:gt(0)', head);

	for (var i = 0, iMax = columns.length; i < iMax; i++) {
		result.push(
			{
				name: $(columns[i]).text()
			}
		);
	};

	return result;
}())

And lastly the plotOptions.dataParser function:

dataParser: function(data) {
	var result = [];

	var table = $('#chart-1-table');

	/*
	 * The series are defined by names, so we need to check what series we're in.
	 */
	var head = $('thead > tr:last', table);
	var column = $('th:gt(0)', head).map(function(){
		return $(this).text();
	}).index(this.options.name);

	/*
	 * Loop through all the data rows for this series.
	 */
	var rows = $('tbody > tr', table);
	for (var i = 0, max = rows.length; i < max; i++) {
		/*
		 * The first column (using a <TH> tag) contains the category name.
		 */
		var rowDate = $('th', rows[i]);
		if (rowDate.size() > 1) {
			rowDate = rowDate[0];
		}
		rowDate = rowDate.text();

		/*
		 * Grab the cell in the right column for this series.
		 */
		var cell = $('td', rows[i])[column];
		cell = $(cell);

		/*
		 * Add an array to the result with the category name and cell value.
		 */
		result.push([
			rowDate,
			parseFloat(cell.text())
		]);
	}

	return result;
}

The code for above dataParser is very specific for tables using categories. Tables with a lot more data that use timestamp should use xAxis.type = 'datetime' and convert the value of the row header to a UTC date.

Compete code:

var chart1 = null;

$(document).ready(function(){
	chart1 = new Highcharts.Chart({
		chart: {
			renderTo: 'chart-1-container',
			defaultSeriesType: 'line'
		},
		title: {
			text: (function(){
				var table = $('#chart-1-table');
				var title = $('caption .title', table);

				return title ? title.html() : '';
			}())
		},
		subtitle: {
			text: (function(){
				var table = $('#chart-1-table');
				var subtitle = $('caption .subtitle', table);

				return subtitle ? subtitle.html() : '';
			}())
		},
		xAxis: {
			categories: (function(){
				var table = $('#chart-1-table');
				/*
				 * The first column in the table body uses <TH> tags,
				 * to separate them from data.
				 */
				var cats = $('tbody > tr > th', table)
					.map(function(){
						return $(this).text();
					});

				return $.makeArray(cats);
			}()),
			title: {
				text: 'Month'
			},
			type: 'linear'
		},
		yAxis: {
			title: {
				text: 'Percent'
			},
			labels: {
				formatter: function() {
					return this.value + '%';
				}
			}
		},
		tooltip: {
			formatter: function() {
				return	'<strong>' + this.series.name + '</strong><br />'+
						this.x + ': ' + Highcharts.numberFormat(this.y, 1) + '%';
			}
		},
		plotOptions: {
			line: {
				//stacking: 'percent',
				lineColor: '#ffffff',
				lineWidth: 1,
				marker: {
					lineWidth: 1,
					lineColor: '#ffffff'
				},
				data: 'datatable',
				dataParser: function(data) {
					var result = [];

					var table = $('#chart-1-table');

					/*
					 * The series are defined by names, so we need to check what series we're in.
					 */
					var head = $('thead > tr:last', table);
					var column = $('th:gt(0)', head).map(function(){
						return $(this).text();
					}).index(this.options.name);

					/*
					 * Loop through all the data rows for this series.
					 */
					var rows = $('tbody > tr', table);
					for (var i = 0, max = rows.length; i < max; i++) {
						/*
						 * The first column (using a <TH> tag) contains the category name.
						 */
						var rowDate = $('th', rows[i]);
						if (rowDate.size() > 1) {
							rowDate = rowDate[0];
						}
						rowDate = rowDate.text();

						/*
						 * Grab the cell in the right column for this series.
						 */
						var cell = $('td', rows[i])[column];
						cell = $(cell);

						/*
						 * Add an array to the result with the category name and cell value.
						 */
						result.push([
							rowDate,
							parseFloat(cell.text())
						]);
					}

					return result;
				}
			}
		},
		series: (function(){
			var result = [];

			var table = $('#chart-1-table');
			/*
			 * Get all the columns from the table head.
			 * Some tables have multiple rows in the header.
			 */
			var head = $('thead > tr:last', table);
			/*
			 * Skip the first column, it's the Y-axis label.
			 */
			var columns = $('th:gt(0)', head);

			for (var i = 0, iMax = columns.length; i < iMax; i++) {
				result.push(
					{
						name: $(columns[i]).text()
					}
				);
			};

			return result;
		}())
	});
});

Demo

• Browser statistics

Next steps

The above code works great for a single instance, but for use in a plug-in it’s too scattered. The first thing to do is to create a dataSource Interface or base Class that provides functions for series, categories and dataParser.
For a Wordpress plug-in an advanced GUI for the WYSIWYG editor is needed to allow access to the complex options, not to mention a chart preview inside the editor.

Before the time of Google developers were required to learn, remember and never forget the knowledge they needed to perform their work. I might be a bit of a dinosaur in that way, since I’d rather simply know than rely too much on Google. The media has reported cases of student relying more and more on Google (or Bing or anyother web search.) No longer is anyone required to know everything, the web answers all questions.

A fun example is something that actually happens around me sometimes. Since I live and work in Sweden many Operating Systems are in Swedish. Everything is in Swedish, even the error messages. That’s a great feat of the developers to successfully implement I18n, but sometimes other developers can’t find the solution to their problems because they don’t know the English version.

A well known expression in the programming world is RTFM, but this is becoming a relic of an older age, these days a new expression is more valid, STFG.

Unfortunately the expression “Knowledge is power” is still very true. Search engines hold more and more knowledge and thus power. Since it’s all free and open, there is absolutely no problem with that, in fact it’s great. It means everyone can share the knowledge. The real problem is that the people who are supposed to have the knowledge in their brains are become reliant on web search. What happens if the web is not accessible when they need it, or – god forbid – companies like Google and Microsoft start putting a price on that knowledge?

Yes, web search can solve many problems and provide a wealth of knowledge. But don’t just remember the URL to the knowledge you require, remember the actual knowledge instead. Reading news feeds about new techniques in HTML, CSS, JAVA, .NET, Ruby, etc. is great. But you should remember it, quite easy if you experiment with what you’ve read. Doing it stores more in the mind than reading about it.

Go ahead, STFG. Experiment, do, develop, extend and Remember.

Just a small heads-up about what I’ve been up to…

My old server got hacked, so I had do finish the installation of critical services on my new server. To manage virtual domains I had installed WebMin with VirtualMin on it, but somehow it refused to work for e-mail. Not feeling much for reinstalling VirtualMin I searched for an alternative to manage the e-mail services. I’m now quite happy VirtualMin bugged because now I came across Zimbra. Zimbra is currently running on my new server and it’s just brilliant. The only shame is that it only supports Ubuntu 8.04 LTS and won’t support any other Ubuntu’s until Ubuntu 10 LTS. Installing Zimbra itself is quite easy so I will not be blogging about that, what I will be blogging about is what I did to make it more secure… I added mod_gnutls to my apache to benefit from it’s support for SNI which allows Virtual Hosting of HTTPS domains. With mod_gnutls with my own Root CA, server CA and P12 nobody but me can access the web interface of my Zimbra and with mod_ssl set up as a proxy, my apache provides an easy and secure bridge between Zimbra and the Internet. If this sounds interesting, keep your eye on my blog…

I’ve been planning on creating my own theme for this blog, but as usual work and other tasks mess up my priorities. Never the less, I did get a chance to pratice my theme making skills by creating a Wordpress MU theme at work for internal blogging. This brought me back on track with CSS and JavaScript again. What I started wondering is, is there any support for Continuous Integration with JavaScript. And is there automated Code Revision/Quality Assurance for JavaScript? Turns out there are possibilities… JavaScript Code Review is quite easy with JSLint, there are java ports and there’s Rhino, so getting it into a CI system like Hudson should be quite straight forward. There’s also JSUnit which allows Unit Testing of JavaScript. I’ll be experimenting with JSLint in Rhino and Hudson, but also in PHP! Recently the Mozilla JavaScript engine became available as an extension for PHP, so I’m curious about running JSLint and JSUnit in that.

These are just 2 very exciting topics I’m playing with at the moment, so stay tuned!

…
There are some circumstances where an organisation’s culture is possibly too different to successfully adopt agile. At the moment I can think of only 3 reasons why I wouldn’t do agile software development:

1. If I was working for an organisation that believed it needed complete clarity about a solution before it could start a project. I believe this is a false positive, and it would be very hard to adopt agile in an environment where key stakeholders insist on this.

2. If I was working for an organisation where the relevant product owners couldn’t – or wouldn’t – commit to being actively involved throughout the project. I really do believe that active user involvement is the first principle of agile, and imperative for a project to succeed.

3. If I was working with a team that I didn’t believe could cope with ambiguity, or didn’t have sufficient communication skills to collaborate effectively with business colleagues or customers.
…

This week I hit number 1. The past 2,5 months I’ve been working at Statens Pensjonkasse in Oslo Norway.
From now on the team I’m in will be completely responsible for the production and delivery of new maintenance releases of the main application used by SPK. We went through the process of producing, testing and delivering the next version and something very interesting came up…

A complete new version of the application (front, middle and back-end) is being made by another group – a quite large group where Steria Norway is also involved – using Adobe Flex and Java. The project is called Perform and uses modern technologies and techniques, Scrum among others.

When we took over maintenance of SPK’s current system, they gave an introduction course to Scrum and said it was up to us if we wanted to maintain their application using waterfall or Scrum. As an agile evangelist and ScrumMaster I of course felt the urge to choose Scrum, but was that right?

Until now the entire maintenance period had been quite ad-hoc with lots of Service Desk issues coming in and ad-hoc solutions being needed. (But that’s another story…) This meant there was no real opportunity to think about the development process. But now that we’re taking over as maintenance release team and need to plan more ahead, I had assumed we’d go Scrum. That however, seems quite impossible, even quite unsuitable.

The way new releases are prepared is quite glued to the waterfall development process that has been used until now and as we see it, that cannot be changed. Yet. (I’m not giving up hope.) The customer first gives us a list of open issues that need to be a part of the next release, we estimate the time required, they approve, we build. Then the testing starts… Testing is done in at least 2 phases, system test and acceptance test. We learned that both are done manually and that they’re identical. During the system test phase a person manually goes through all the tests, if all tests pass someone goes through all the tests again but calls it acceptance phase. This hair raising principle is the main reason for not being able to apply Scrum, since it cannt be changed. It may be possible to change it later, but that might take a year and this version of the application is planned to be superseded by Perform in a few years, so it doesn’t really feel like it’s worth the struggle. Just for the experience and sake of Scrum I should try, but probably won’t.
The reason the production and testing procedures are as is, is because of how the application has designed and written. Almost all of the functional code is written in C and embedded SQL. C is hard to fit into Continuous Integration and the embedded SQL is so complex that we dare not even think about mocking/simulation or automation. (A typical SQL task runs for at least 10 hours before any results/errors can be seen.) Even if we did manage to rewrite the code so it was testable with CI, the environment the building (make, nmake) run in and the application environment are so hard-coded that it would take weeks to make it more modular and portable (with portable I mean being able to build and run anywhere without breaking dependencies). (The windows client build process has dependencies that are only built in the Unix server process, but that discussion is off-topic.)

It is quite a shame, but Scrum is not the way to go this time. At least we’ll be able to use Scrum internally while implementing the next release, since Agile/Scrum can always be applied within a waterfall (or other) wrapping.