Extensible Development

Pig Latin

Jeffrey Ridout — Fri, 26 Feb 2010 13:19:37 +0000

I’ve been thinking about creating my own theme for WordPress for a while now — for over 1 year to be honest. —while looking at a few interesting designs to use as a base. I’m very interested in UX and UI Usability, but lousy at drawing and creating nice graphics. (I can use Photoshop and Fireworks, but the result is never what I had in my head, more like thinking about a Ferrari and ending up with a rusted VW Beetle.)
Here are a few designs I found interesting:

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.

32bit VPN in Windows 7 x64 and XPM

Jeffrey Ridout — Thu, 25 Feb 2010 15:04:41 +0000

Introduction

Until a week ago I’ve been using Windows^® XP as the corporate standard prescribes. But having started looking into Microsoft SharePoint 2010, I was allowed to switch to Windows^® 7 x64. (The switch also included a very nice MSDN license, thus giving me access to loads of Microsoft sweetness.) The x64 stands for 64 bit of course.

The change from 32 to 64 bits went quite smooth, except for one minor hiccup. There is no 64bit client for Cisco VPN.
There are free and Open Source based VPN clients that are compatible with Cisco that have 64bit versions, but they could not be used in this case.

Installing Windows^® XP Mode

Windows^® XP Mode (XPM) is an out-of-the-box solution by Microsoft, based on their Virtual PC. It allows for the installation of a licensed Windows XP machine, complete with drive, USB, desktop and Start Menu integration.

Visit the Virtual PC website at Microsoft for more information: Windows Virtual PC and XP Mode

Installing the VPN client

At my work, we use a Cisco VPN client. Mainly because we’ve got a Cisco VPN server, but also because it uses OTP. Our OTP send an SMS to our work phone and no other VPN client seems to support this. (Would be great if Shrew would decide to support this.)

Connecting Windows 7 to the XPM VPN Client

I could explain how to set up your networking in W7 and XPM to get access to the VPN client, but Craig Pringle did that quite good already. One extra step needed for this solution is the use of static IPs. Set the IP address of the loopback device in W7 and XPM, for example 192.168.2.1 in W7 and 192.168.2.2 in XPM. Using dynamic IPs as they are by default might cause the XPM IP to change, causing problems in later steps.

Note

I couldn’t get W7 and XPM to connect through the loopback at first, it seemed the firewall in XPM blocked the traffic. Disabling the firewall for the loopback adapter solved it. A security warning is issued when disabling the firewall, but since it’s used for W7 – XPM communication only, no firewall is needed.

Routing network traffic through the XPM VPN Client

When the VPN Client is active and connected to the VPN, all applications running in XPM will have access to it. Applications in W7 however will not. The network traffic needs to be routed through XPM.

The easiest way is by using 2 tools; a proxy running in XPM, CCProxy and a rerouter running in W7, ProxyCap.
CCProxy is an easy to set up proxy, just choose the type of proxy and you’re done. ProxyCap is a small commercial application that allows you to reroute traffic from any application through a proxy. Just choose the application to reroute and specify the proxy running in XPM. I use Microsoft Visual Studio in W7, so I’ve set up ProxyCap to reroute it to CCProxy in XPM. When working out of office, run CCProxy in XPM and ProxyCap in W7 and you’re done.

Pretty tag cloud: Stage 1

Jeffrey Ridout — Tue, 05 Jan 2010 15:01:45 +0000

Introduction

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-#.

`Tags`



	

		agile

		apache

		authentication

		blog

		Development

		economy

		extensibility

		filosophy

		gnutls

		GUI

		http

		https

		humanresources

		innovation

		JavaScript

		leadership

		management

		mod_auth

		mod_auth_script

		mod_dav

		mod_gnutls

		mod_ssl

		office

		open source

		openssl

		organisation

		php

		Principles

		roi

		SCM

		scrum

		software

		ssl

		testing

		thinktank

		TLS

		ubuntu

		vba

		Virtual Hosting

		visualbasic

		WebDAV

		windows

		word

		wordpress

		zimbra

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.

The road ahead

Jeffrey Ridout — Tue, 05 Jan 2010 07:39:22 +0000

The year marker has passed, it’s 2010. What did 2009 bring and where is 2010 heading?

2009

The past year brought a lot less than I expected, no personal projects were really finished. But I did learn a lot, about maintenance, development and personal growth. I set out to read a few books, Deepak Chopra amongst then; not done. I wanted to create a new look & feel for my blog; not even started. I started a small project to create a WordPress plug-in that detects vcards (microformats) and creates a visible floating card; half done. In december I found Highcharts and wanted to turn it into a WordPress plug-in; going steady. It seems like 2009 wasn’t to successful, but that’s not quite true. I’ve been busy at work, helping out everywhere I can. I’ve learned quite a lot about Javascript, social media, cloud computing, architecture and so on.

The goals I had for 2009 were not missed, they just changed. When the road ahead for the company was discussed at work, I reminded my colleagues about the fact, that – just like in any/every agile project – goals are in constant flux, changing and moving around.

2010

So what’s going to happen in the coming year? Since I was on the topic of “agile”, I can say that I’m becoming a member of Dragon Open Source Foundation. DOSF is a group of people from Sundsvall that aim to become the main source for information regarding Open Standards and Open Source Software for the public sector in Sweden. This fits perfectly with my goal to help the Swedish public sector to start focussing more on Open Source and Agile development. (A big thanks to Peter Axelsson, my previous boss at Steria, for pushing me into DOSF.)

Personal projects are always a bit tricky, mine are mostly revolved around development. There are a few things I’ve been thinking about turning into WordPress plug-ins; MathJax and Wordle. MathJax should be pretty straight forward, but not Wordle. At least not how I have it in mind, pure CSS3 based. Replacing the tag cloud with something that works and looks like Tagul, using only CSS3 should be a very nice challenge and CSS3 skill sharpening project.

The road ahead has been planned, now it’s time to rip it apart and just have fun sailing through 2010.

Advanced charts in WordPress

Jeffrey Ridout — Thu, 17 Dec 2009 14:11:06 +0000

Introduction

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:



	
		Browser Statistics 2009
		Source: w3schools.com
	
	
		
	
	
		
		
		
		
		
		
		
	
	
		
			2009
			IE6
			IE7
			IE8
			Firefox
			Chrome
			Safari
			Opera
		
	
	
		
			November
			13.3%
			13.3%
			11.1%
			47.0%
			8.5%
			3.8%
			2.3%
		
		
			October
			12.8%
			14.1%
			10.6%
			47.5%
			8.0%
			3.8%
			2.3%
		
		
			September
			12.2%
			15.3%
			12.1%
			46.6%
			7.1%
			3.6%
			2.2%
		
		
			August
			10.6%
			15.1%
			13.6%
			47.4%
			7.0%
			3.3%
			2.1%
		
		
			July
			9.1%
			15.9%
			14.4%
			47.9%
			6.5%
			3.3%
			2.1%
		
		
			June
			7.1%
			18.7%
			14.9%
			47.3%
			6.0%
			3.1%
			2.1%
		
		
			May
			5.2%
			21.3%
			14.5%
			47.7%
			5.5%
			3.0%
			2.2%
		
		
			April
			3.5%
			23.2%
			15.4%
			47.1%
			4.9%
			3.0%
			2.2%
		
		
			March
			1.4%
			24.9%
			17.0%
			46.5%
			4.2%
			3.1%
			2.3%
		
		
			February
			0.8%
			25.4%
			17.4%
			46.4%
			4.0%
			3.0%
			2.2%
		
		
			January
			0.6%
			25.7%
			18.5%
			45.5%
			3.9%
			3.0%
			2.3%

Browser Statistics 2009

Source: w3schools.com
2009	IE6	IE7	IE8	Firefox	Chrome	Safari	Opera
November	13.3%	13.3%	11.1%	47.0%	8.5%	3.8%	2.3%
October	12.8%	14.1%	10.6%	47.5%	8.0%	3.8%	2.3%
September	12.2%	15.3%	12.1%	46.6%	7.1%	3.6%	2.2%
August	10.6%	15.1%	13.6%	47.4%	7.0%	3.3%	2.1%
July	9.1%	15.9%	14.4%	47.9%	6.5%	3.3%	2.1%
June	7.1%	18.7%	14.9%	47.3%	6.0%	3.1%	2.1%
May	5.2%	21.3%	14.5%	47.7%	5.5%	3.0%	2.2%
April	3.5%	23.2%	15.4%	47.1%	4.9%	3.0%	2.2%
March	1.4%	24.9%	17.0%	46.5%	4.2%	3.1%	2.3%
February	0.8%	25.4%	17.4%	46.4%	4.0%	3.0%	2.2%
January	0.6%	25.7%	18.5%	45.5%	3.9%	3.0%	2.3%

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 :


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  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  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  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	'' + this.series.name + '
'+
						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  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

[drain file 1 url 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.

RTFM is dead, long live STFG

Jeffrey Ridout — Tue, 06 Oct 2009 14:17:32 +0000

Knowledge is power, or for developers it’s skill. Or is it?

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.

Back in the saddle

Jeffrey Ridout — Thu, 01 Oct 2009 11:08:48 +0000

After almost 2 months of leave (having baby can hardly be called a vacation), I’m back at work and eager to start again.
A lot of things have changed at work while I was gone, so I’m curious to see how they play out.

My goals of being a part of the OSOSS movement and resharpening my web skills are back in action and I hope to be blogging a lot more from now on.

For now I’ve got an enormous pile of e-mails to dig through and lots of things to update.

Blog syndication

Jeffrey Ridout — Fri, 24 Jul 2009 10:57:10 +0000

This blog now supports SourcedFrom. SourcedFrom allows for re-publishing of WordPress content using their open API.

If you wish to re-publish the content on this blog, please ask to be added to the list.

OSOSS movement

Jeffrey Ridout — Tue, 21 Jul 2009 11:26:56 +0000

Open Source

A few weeks ago I asked the Dutch OSOSS public-sector organisation (NOiV) for permission to translate information on their website and their documents. Today I received a reply and they agreed. That means I’ll be translating some of their work into Swedish.

The Dutch OSOSS movement is quite a bit ahead of the Swedish OSOSS movement, thus it only seems logical to use their experience and materials to fuel the Swedish movement. There are OSOSS organisations in Sweden, but they seem disconnected (Open Sweden, Dragon OSF, Almedalsveckan). I’m going to try to leverage the gap between the OSOSS groups and even moreso, I’m going to try and get Steria to become a major player in OSOSS movements in every country Steria operates.

Steria operates in 16 countries across different sectors, in Sweden the public sector is the major working area. Reusing resources, materials and experience from all countries will create a stronger, more robust OSOSS movement throughout all countries. Whether I succeed in taking Steria along with me for this journey remains to be seem, but I’m very hopeful.

The use of Open Standards and Open Source Software for the public sector is crucial for everyone, so I intend to do whatever I can for society, the public sector and the Open Source community.

I’m going to start with translating a whitepaper that describes the fiction and facts about Open Standards and Open Source Software. Let’s see what we can accomplish with that.

Update: HTTPS Virtual Hosts on Ubuntu 8.04 LTS Server

Jeffrey Ridout — Thu, 16 Jul 2009 13:59:28 +0000

Original article: [intlink id="167" type="post" target="_self"]HTTPS Virtual Hosts on Ubuntu 8.04 LTS Server[/intlink] The gnutls and gcrypt packages were updated for Ubuntu 8.04, but they are still not right for mod_gnutls. libgnutls-dev (2.0.4-1ubuntu2.5) libgnutls13 (2.0.4-1ubuntu2.5) gnutls-bin (2.0.4-1ubuntu2.5) libgcrypt11-dev (1.2.4-2ubuntu7) libgcrypt11 … Continue reading →

Extensible Development

Pig Latin

32bit VPN in Windows 7 x64 and XPM

Introduction

Installing Windows® XP Mode

Installing the VPN client

Connecting Windows 7 to the XPM VPN Client

Routing network traffic through the XPM VPN Client

Pretty tag cloud: Stage 1

Introduction

The tags

Tags

The styling

The result

Next step

The road ahead

2009

2010

Advanced charts in WordPress

Introduction

Data Source

Browser Statistics 2009

Source: w3schools.com

Charting

Demo

Next steps

RTFM is dead, long live STFG

Back in the saddle

Blog syndication

OSOSS movement

Update: HTTPS Virtual Hosts on Ubuntu 8.04 LTS Server

Installing Windows^® XP Mode

`Tags`