Extensible Development

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.)
Read more…

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. Read more…

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

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

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.

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.

Read more…

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.

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.

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.

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.

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 (1.2.4-2ubuntu7)