Pretty tag cloud: Stage 1

January 5th, 2010 No comments

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

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.

Categories: Development Tags:

The road ahead

January 5th, 2010 No comments

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.

Categories: .this Tags: , ,

Advanced charts in Wordpress

December 17th, 2009 No comments

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…

RTFM is dead, long live STFG

October 6th, 2009 No comments

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

October 1st, 2009 No comments

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.

Categories: .this Tags:

Blog syndication

July 24th, 2009 No comments
SourcedFrom

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

July 21st, 2009 No comments
Open Source

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

July 16th, 2009 No comments

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)

Open Source Enterprise

July 8th, 2009 2 comments

Introduction

Ever thought about running an entire business on Open Source? Or even a huge enterprise that has the size of Microsoft, Sun, IBM, Ericsson or Steria? It might sound impossible or even insane, but I’m about to show that’s it not. Far from it even.

A business is always far more complex that it appears to it’s customers, there are internal processes, divisions, decision organs, infrastructure and much more. Can all that be supported by Open Source Software? Of course!

Although some of the products I will be mentioning in this article, I do not normally use them. The reason for choosing them here is because they can be easily integrated, which is the reasoning behind this article. I discovered a net of OSS products that might seem unrelated but together might be quite exciting. Read more…

HTTPS Virtual Hosts on Ubuntu 8.04 LTS Server

June 18th, 2009 5 comments

Introduction

Normally having multiple virtual hosts on Apache with HTTPS is not possible. HTTPS is short for HTTP/SSL which means HTTP encapsulated by SSL (Secure Socket Layer). This means the HTTP traffic sent to the Apache webserver is encrypted using SSL.

The VirtualHost definitions in the Apache configuration are used to specify the SSL options. To know what VirtualHost Apache should use, Apache sneak previews the HTTP header to look for the “HOST” field. With HTTPS the HTTP header can only be previewed after the SSL connection has been established, so technically Apache cannot know what VirtualHost definition to use to set up the SSL connection.

Apache could use the correct SSL options if it knew what VirtualHost definition it should use and luckily that is possible. SSL supports several encryption protocols, the newest being TLS (Transport Layer Security). Technically this is a replacement for SSL and would result in HTTP/TLS instead of HTTP/SSL. TLS has a feature called SNI (Server Name Indication) which is the equivalent of HTTP’s “HOST” field.

There are a few problems with SNI though.The standard SSL/TLS module that comes with Apache is mod_ssl, which is based on OpenSSL. Unfortunately OpenSSL does not support SNI in it’s TLS implementation yet. It has been added to OpenSSL 0.99 and backported to 0.98, but mod_ssl doesn’t support it. GnuTLS is an alternative to OpenSSL and it does support the SNI feature in TLS. A GnuTLS based module for Apache is mod_gnutls, but this is not available as a Ubuntu binary. Internet Explorer 7 only supports SNI on Windows Vista, thus causing the same problem as SSL on Windows XP.
Read more…