Monday, December 01, 2014

How To: Get started with D

As much as I like working with Java, it's nice to use a language that can be compiled to native code. Occasionally I dabble with C or C++ but the ecosystem is about as old as the languages. I want to work with a language that doesn't just have clear syntax but decent tools to handle builds and project dependencies as well as making it easy to compile on multiple platforms (Windows, Mac and Linux is a must).

D meets these needs (partly due to DUB). It's been around for over a decade but it's the second version (first released in 2007) that is currently in use.

The D compiler can be downloaded from and DUB can also be downloaded from the sub-domain Once they are both installed and available on your PATH open up a command prompt and use DUB to initialise a project.

DUB will create your project structure and a simple manifest file 'dub.json' which will be familiar to anyone that uses NPM or Gradle.

For this simple example I've added 'vibe-d' to the project dependencies. Then in the source file I've replaced the contents of the 'app.d' file with the simple example given on the Vibe-d website.

To compile the project simply run the 'dub' command in the root of the project. DUB will then download the vibe-d library, compile and link the project, the run the compiled executable.

That's it! We have a simple server running that can be opened in the browser.

Obviously this example is pretty trivial but I've been playing with D in my spare time for some months now (working on a GTK app) and have found the transition from Java to D to be relatively painless. So go give it a try.

Saturday, October 25, 2014

How To: List all compile dependencies using Gradle

Gradle makes it easy to add steps to the build process. Today I found a nice little task to list all project dependencies:

The only problem with this is when a project has some local dependencies that are included using compile files('lib/some.jar'). A dependency included in this way has no group, name, or version as it is not in a repository. This was causing a dependency in my project to show up as "null : unspecified : null". To get around this I made a variation of the task above which will list the filename of each jar file that is being included:

It comes in handy when you want your build server to provide a little more information for debugging problems. Simply add the task to your projects build.gradle file (anywhere below the dependencies block).

Monday, October 06, 2014

What happened to nine?

Microsoft may not acknowledge the number nine but one thing they are doing with their upcomming version of Windows is accepting that they were wrong about the start screen. This is something the GNOME Foundation should take notice of. At least Microsoft have listened to the backlash and realised that people still need a traditional desktop.

The idea of forcing a user interface designed for touch-screen devices onto users that need a productive desktop machine was always doomed to fail. Who cares if the average consumer is now buying a tablet instead of a desktop, as long there are jobs there will be a need for computers that can be productive in the workplace.

I do feel that the team at Microsoft deserve some respect for the work they've done in merging the start screen from Windows 8 with the menu from previous releases but most of all for backing down and listening to their users.

Thursday, August 28, 2014

Things to remember when creating an HTML email template

Every web developer knows about the kind of problems that can be encountered when supporting multiple browsers, especially older versions of IE. These days things are getting better though, even IE is able to do a half decent job. The world of email clients is another story all together though. The pain of supporting multiple browsers is nothing compared to the nightmare of trying to get your well designed email to render correctly in even a small selection of the hundreds of email clients out there.

Having spent the last few months doing a major overhaul of an application at work I decided it would be a good idea to redesign the email templates being sent from the system to be more in line with it's new layout.

As the emails are only received by members of staff during work I'm in the fortunate position of only needing to support two email clients. However, rather unfortunately the two clients we need to support a rather hideous; Microsoft Outlook and the built-in client used in BlackBerry devices.

There are two types of problems you'll encounter when designing email templates. Firstly email clients tend to lag far behind browsers in terms of HTML and CSS support and secondly there's a lot of weird quirky behaviour in some email clients.

For some strange reason Microsoft uses the same HTML engine used in Word to display HTML emails in Outlook, meaning that Outlook has minimal support for CSS properties. BlackBerry has full support for XHTML 1.0 and partial support for HTML 4 & CSS 2.1. So forget about using anything recent, email templates need to be done the old fashioned way, with tables.

To keep things simple I stuck to using a fairly basic layout using XHTML strict and validating it periodically using the W3C Validator to make sure everything was correct, not that it would make much of a difference, as some email clients (including Outlook 2007 and 2010) strip or ignore your doctype entirely.

Another section that is likely to be striped out is the head along with any style tags. For this reason it's best to use in-line styling on your markup. MailChimp provide a handy CSS Inliner Tool which can help do this once the design is complete.

Thursday, August 14, 2014

The worst javascript kludge ever

Due to limitations in a third party application, today I've had to create the most hideous workaround I've ever done. Essentially I needed to create a new instance of IE rather than just creating a new browser window. Using ActiveX I first attempted to create an IE instance directly.

When looking at the Task Manager I could see that the new window was still a child of the same parent process so I needed to go even further. I used ActiveX to get a shell then run iexplore.exe passing in the url I want to open:

It's for an internal site which should only be accessed by IE and does in fact do exactly what is needed but it still makes me shudder.

Friday, May 16, 2014

WTFilter now on the Atlassian Marketplace

Over the last week I've been updating the WTFilter plugin for Confluence. The last release was back in 2012 and it was unfinished. I figured that it's about time I finished it off and did a proper build.

It now filters comments as well as pages and blog posts both during creation and edits. It's also been updated for the latest versions of Confluence, anything since 5.0.

The new build, version 1.2.0, can now be downloaded from the Atlassian Marketplace.

Sunday, March 16, 2014

Elder Scrolls Online

Whilst checking my inbox earlier I found that I'd been sent a beta invite for Elder Scrolls Online. So I downloaded the Mac client and started the 22GB net install. Three and a half hours later...

I've only played about an hour but so far it's been impressive, except for the fact that the game crashed on me after completing the first mages guild quest. I'm not usually into MMO games but for this one I may make an exception.

Friday, February 28, 2014

How To: Use Bootstrap 3 in your Java Web App

Last year I built a Java webapp for work using JSF, Primefaces, Spring, PrettyFaces, the regular kind of stuff that is generally used when developing an app to run on Tomcat Server. I chose not to use the Primefaces styling, wanting to create my own styles making use of the LESS files that are used to generate Bootstraps CSS. It's worth noting that Primefaces does have various themes including a Bootstrap theme but it isn't quite the same. You can remove the Primefaces styling by placing the following in your web.xml:

The app originally used Bootstrap 2.3.2 and much has changed since then. I've spent the whole of today going through the process of upgrading to Bootstrap 3.1.1. For anyone wanting to update from version 2 there is a convenient page on the Bootstrap website: Migrating to v3.x. Apart from the obvious changes to classnames were are a few steps required to get the new version working properly.

The best way to make use of Twitter Bootstrap in a JSF web application is to use bootstraps LESS files. These should be added the same way as any other resources. When you come to build your application the 'lesscss-maven-plugin' can compile all the LESS files into a minified css file, which can be used in your template using the following:

When upgrading to Bootstrap 3 I found that the plugin was no longer able to compile Bootstraps LESS files as the used features that were not supported in the version of LESS that was used by the plugin. Fortunately this can be resolved in the configuration block for the plugin by manually providing a path to a more recent LESS version.

Add the fonts to '/webapp/resources/fonts' then edit 'glyphicons.less', change the @font-face block to match the following:
@font-face {
font-family: 'Glyphicons Halflings';
src: url("#{resource['fonts/glyphicons-halflings-regular.eot']}");
src: url("#{resource['fonts/glyphicons-halflings-regular.eot']}?#iefix") format('embedded-opentype'),
url("#{resource['fonts/glyphicons-halflings-regular.woff']}") format('woff'),
url("#{resource['fonts/glyphicons-halflings-regular.ttf']}") format('truetype'),
url("#{resource['fonts/glyphicons-halflings-regular.svg']}#glyphicons-halflingsregular") format('svg');
Using the steps provided here you should be all set to start theming you app using Bootstrap. The great thing about using the LESS files rather than just adding the compiled CSS to the app is that you can use the same mixins that Bootstrap provides as well as easy access to the global values used in variables.less.

Monday, December 16, 2013

Setting up Arch Linux on Raspberry Pi

I've had a Raspberry Pi for almost a year now and despite my intention to use it for development it's ended up being used to run Raspbmc. I couldn't let it go a year without it being used for something more interesting so I spent some time this evening getting it configured for use.

I gave RISC OS a go first, thinking it'd be fun to use something completely alien to me but the novelty wore off within the first few minutes of using it. So I decided to scrap that idea and install Arch instead.

I've not used Arch since the move to systemd so it seemed like a good opportunity document the install process as my previous post about installing Arch is a little out of date.

To start with you need an SD Card with a recent Arch image. Here is my bash history from preparing the memory card:
$ diskutil list
$ diskutil unmountDisk /dev/disk1
$ sudo dd bs=4m if=archlinux-hf-2013-07-22.img of=/dev/disk1
$ diskutil eject /dev/disk1
Now is also a good time to change the root password. With that done, set the timezone and locale info. Start by uncommenting the line for your locale (in my case en_GB) from '/etc/locale.gen'. Now generate the locale settings:
# locale-gen
You'll also need to run the floowing two commands with the appropriate language and timezone:
# localectl set-locale LANG="en_GB.UTF-8"
# timedatectl set-timezone Europe/London
I'm using a Belkin wireless-N adapter with my Pi so I needed to setup my wifi using the following:
# install -m640 /etc/netctl/examples/wireless-wpa /etc/netctl/home-wifi
Then edit the '/etc/netctl/home-wifi' file with the correct SSID and password. Once done enable it:
# netctl enable home-wifi
You should now have internet access so do an update pacman -Syu then install vim:
# pacman -S vim
To get rid of some unsightly black borders on my monitor (overscan) I needed to edit the boot config:
# vim /boot/config.txt
Uncomment the line 'disable_overscan=1'. I also chose to uncomment 'hdmi_drive=2' as I only ever intend to force audio over HDMI.

I find the default console font a little small on a 1080p monitor so I also decided to create a /etc/vconsole.conf file with the following:
While on the subject of fonts, it may be worth installing these if you need some nice truetype fonts:
# pacman -S ttf-dejavu ttf-droid ttf-linux-libertine ttf-ubuntu-font-family
Before creating a user account install the sudo package and configure it so that all users in the wheel group can use sudo:
# pacman -S sudo
# EDITOR=vim visudo
Uncomment the line '%wheel ALL=(ALL) ALL'.

I'm using a 32GB SD Card for the installation so I had to resize the root partition. This can be done within Arch by using fdisk to delete the extended partition then recreate a new extended partition using the remaining space and another logical partition. Once the changes are written you'll need to reboot then run resize2fs. See Growing the RPi root partition for full details.

Most Linux users stick to using bash but I want my user account to default to Zsh, so have installed the package prior to creating the user account:
# pacman -S zsh
# useradd -m -g users -G audio,lp,optical,storage,scanner,video,wheel,games,power -s /usr/bin/zsh USERNAME
Set a password for the new user then exit and login as the newly created user.

To have a little colour in your zsh prompt add something like the following to the end of your .zshrc file:
PS1="%{%F{cyan}%}%n%{%F{red}%}@%{%F{blue}%}%m %{%F{yellow}%}%~ %{$%f%}%% "
As I'm going to be doing development on the Pi I also installed Java7, Python, NodeJS, Ruby, and a C compiler:
# pacman -S python python-pip ruby clang nodejs jdk7-openjdk openjdk7-src maven

Sunday, November 24, 2013

Android Studio - Early Access Preview v0.3.6

This weekend I decided to continue the work of updating the Android Call Location project to build using the latest version of Android Studio (0.3.6). When I tried Studio in September I had copied my code into a new project to get up and running quickly. It's a perfectly acceptable way of doing things but I wanted to go through the process of migrating my code from the original Eclipse way of doing things to the newer Android Studio style.

Since version 22 of the Eclipse ADT Plugin there has been an option to generate Gradle build files when exporting a project from Eclipse. It's been ages since I used Eclipse, still on Indego, so I downloaded the latest version; Kepler. After adding the ADT Plugin and restarting the IDE the option to generate the Gradle files was there. Having Eclipse create the Gradle build files seemed like the best option but in fact was actually the cause of a few problems when the time came to open the project in Android Studio.

In my post about Android Studio Gotchas, I wrote about Android Studio using its own bundled Android SDK. Eclipse used the Android SDK that was manually installed on my system which was not as up to date as the one in Studio. This meant that the generated build.gradle file had an older build tools version.

Another thing I had to look out for was the minimum and target SDK versions. I've chosen version 8 as the minimum and will target version 18. I also set version 18 of the SDK as the compileSdkVersion and 18.1.1 for the buildtoolsVersion. These will all need to have been downloaded through the SDK Manager within Android Studio.

Since creating the application a newer version of the Google Maps API has been released so I also needed add a dependency for Google's play-services. I'm also going to be using Fragments in the app, which were not available in the Android API that was used to create the app. To add this new functionality without breaking backwards compatibility I've added support-v4 and appcompat-v7 to the dependencies as well.
dependencies {
    compile ''
    compile ''
    compile ''

Sunday, October 20, 2013

Android Studio Gotchas

I decided to carry on with some programming today using the Android Studio EAP. On opening the IDE there was a prompt to update to version 0.3.0 so I chose to update and restart. Subsequently much of my time was spent trying to work out why my project wouldn't build anymore.

The first problem was a simple fix. I prefer to use my local Gradle distribution rather than a Gradle Wrapper so I downloaded the latest version (1.8) and changed my GRADLE_HOME environment variable to point to the new version and restarted Android Studio.

The next problem was that the appcompat-v7 dependency could not be resolved. The Android Support Library package is needed for backwards compatibility without it my project will not build. When running the Android SDK manager from the terminal I could see that it was installed and up to date. This baffled me for some time, then I found that Android Studio wasn't actually using the Android SDK that I have installed on my system. The IDE has its own Android SDK bundled. I personally don't like this as I don't think the SDK belongs in the installation of Android Studio. I want the flexibility to chose where my SDK is installed. Once I realised that the SDK on my system path and the SDK being used by Android Studio were not the same it was easy to fix. Use the IDE to open the SDK Manager under the tools menu, then once updated restart the IDE.

Sunday, October 06, 2013

9 years of Ubuntu

I've had to move home twice in the last 12 months and still have a few boxes left to sort out. Whilst unpacking some books the other day I came across the installation cd for Ubuntu 5.04 (Hoary Hedgehog) which came with issue 53 of Linux Magazine. It was Canonicals second release.

At the time I'd been reading about Linux, BSD, and Solaris as I wanted something different from the norm. I found Linux quite frustrating back then (and still do sometimes) and like many others that try it for the first time I only lasted a couple of weeks before returning to the all familiar Windows XP.

I still liked the idea of using open-source software though. So it wasn't long before I was testing the water again from the safety of a virtual machine, then moving onto dual booting.

These days most of my computers run Linux, generally either Ubuntu or Fedora. I made the transition around three years ago and despite the occasional problem, I'm happy with the decision. Yesterday I updated the computer in my lounge to Ubuntu 13.10, which means it's over eight years since I tried Ubuntu for the first time. Canonical released Ubuntu 4.10 (Warty Warthog) in Oct 2004 so this latest version marks their ninth anniversary. In that time they've made a real impact in the Linux community and I hope they continue to do well.

Sunday, September 22, 2013

Android Studio - Early Access Preview v0.2.9

Following on from my post on Friday about Gradle. I decided to get started with the Early Access Preview of Android Studio (v0.2.9). My Android Call Location project has been dormant for some time so it's the perfect opportunity to try out the new tools whilst also updating the project to work with the more recent Android API.

So far I'm very impressed with the integration between the Android SDK and Intellij IDEA. It only took a few minutes to get my project working in an emulated Nexus 4.

Friday, September 20, 2013

How To: Add Gradle support to a Maven project

In 2010 I started working on Confluence/Jira Plugins (written in Java) for Adaptavist. My programming experience back then consisted of small projects with little or no dependencies and no automated tests, so landing a job at a software company was a big eye opener. It was during this time that I was introduced to Maven. Having the ability to define a projects dependencies and build process so that any other developer can easily compile the same project without needing to waste time configuring their dev environment is certainly a big win. It made a huge impression on me and I have been an advocate of Maven ever since.

While working at Adaptavist I had the good fortune to attend Devoxx in Belgium. During the conference I heard about Gradle but didn't pay it much mind as my day to day work was so geared around a specific set of tools. Since that time I've been involved in a few Android projects. Although there is an android-maven-plugin, I found trying to build Android projects using Maven considerably painful; this is due partly to the fact that an Android project structure does not fit well with the conventions that Maven uses.
"Gradle combines the power and flexibility of Ant with the dependency management and conventions of Maven into a more effective way to build"
Recently I came across this page showing the progress of Gradle support in the Android SDK. This prompted me to do a little reading about Gradle to see if it could help make Android development a little less troublesome. Starting with the why Gradle page, and some good presentations on youtube I decided to download and install the latest version (1.7 at time of writing).

Installation is easy, just the same as Maven and most other tools. Set an environment variable called GRADLE_HOME and then make sure %GRADLE_HOME%\bin is on your PATH variable (same kind of thing for Linux & Mac). Once that's done just run 'gradle -v' from the command line to make sure it's setup correctly.

Thankfully the Gradle developers have made it easy for people to add Gradle support to existing Maven projects. In the root folder of your project just run 'gradle setupBuild' and Gradle will detect your pom file and create a 'build.gradle' file using the same dependencies and build settings.

Wednesday, September 18, 2013

How To: Install Quake 3 Arena on Ubuntu

This evening I wiped my old Belinea 2.1 laptop and installed Ubuntu 13.04 on it. I wanted to have at least one game on it so I settled on Quake 3 as the machine is a little old. To install Quake 3 you need to have 'pak0.pk3' from the original installation. Then it's simply a case of running the following commands:
sudo apt-get install quake3 game-data-packager
game-data-packager quake3 /path/to/pak0.pk3 /path/to/
sudo dpkg -i quake3-data_30_all.deb

My laptop resolution is 1280 x 800 (16:10) so to get Quake3 making full use of my screen I needed to edit the q3config.cfg file:
vim ~/.q3a/baseq3/q3config.cfg
Then set the following:
seta r_mode "-1"
seta r_customwidth "1280"
seta r_customheight "800"

Friday, August 30, 2013

Kick the Windows Command Prompt into shape with ConEmu

Having been a Linux user for a number of years I tend to find it somewhat frustrating when using the Windows Command Prompt. Microsoft shows no sign of making any changes in this area even though it's an essential tool for any IT worker, especially software developers. At the least I tend to have Cygwin, Git-Bash, and a couple of instances of the Command Prompt open while working. At home I tend to use either a Mac or some GNU/Linux variant so it's simply a case of opening a new tab in the terminal emulator when I need to.

This is something that ConEmu can take care of. Not only can it allow for tabbed instances of the Windows Command Prompt, it will work for other terminals as well. It was recommended to me today by my boss who was looking for a better way to use the Command Prompt in Windows. I'm currently using it just to help managing the various dev tools I use. So Cygwin, PowerShell, Git-Bash, and the CMD are all available in the same place.

To make a console such as Cygwin available within ConEmu simply open the settings and add a new task.

In the task parameters you can put the location for the related icon:
/icon "C:\cygwin\Cygwin.ico"
Then, in the commands section, add the command that should be run to open a new Cygwin instance:
C:\cygwin\bin\bash --login -i

So now I have all of my command line tools running within one window but it doesn't stop there, ConEmu has tons of features so go take a look.

Saturday, August 10, 2013

Changing workflow from Java to Node.js (JSF to JavaScript)

Over the last year I've been working in a small team on an ambitious project to build a web application that will bring together information from a range of disparate sources within the company and provide all of the key information in a concise manner. It started out as a Java web application generated from a Maven Archetype with dependencies on JSF 2.1, Spring, Hibernate, and Primefaces.

This tried and tested workflow meant that the project was able to advance at a good pace. As the application grew however there seemed to be an ever increasing battle with JSF. We're dealing with a lot of dynamic content on our pages and although our web-app was good it just didn't have the speed we wanted.

The decision was made to move away from JSF and Spring in favour of using a Javascript MVC framework. The application was split into server-side code that would provide a REST interface and our client-side resources. We still use Java for the backend which connects to our various systems and provides a the API for the UI to connect to.

Using this approach all the required layout data is sent to the users browser during the initial page load. After that, most of the data going back and forth is just json. When the browser receives a new json object, it can be added to the page using the appropriate template which is already available. Changing to this new way of doing things has made a massive improvement to the user experience.

The new front end is built using a collection of tools that are run using Node. So instead of Maven, Tomcat, Spring, JSF, Primefaces, and the like, we're now using:
LESS or Sass
So there's a fair amount of reading and tutorials to do to get up to speed but results more than make up for the initial learning curve.

The new user interface started life using a scaffolding tool called Yeoman. Much like using Maven archetypes, Yeoman can be used to generate a project structure for you based on a variety of available generators such as generator-webapp, generator-ember, generator-heroku, generator-chromeapp, generator-firefox-os, and so on. Yeoman should be installed globally using NPM:
npm install -g yo
The install will also include Grunt and Bower. Grunt is used to build your project and Bower handles dependencies such as Bootstrap and other client-side stuff.

There are various client-side MVC frameworks around, the two major contenders being Ember and AngularJS. We went with Ember (more on this in future posts), so the next step is to install the generator for an Ember application:
npm install -g generator-ember
Before using the Ember generator you need to make sure you have ruby & compass installed. You'll also need to install 'grunt-contrib-compass' via NPM:
sudo gem install compass
sudo npm install -g grunt-contrib-compass
By now you should be ready to generate an Ember web app:
yo ember
This will download various packages and create your project structure. When finished you should see the following files and directories in your current directory:
Yeomans job is now done. From now on you'll just need to use Grunt & Bower. When updating or adding dependencies to bower.json you'll need to run 'bower update' or 'bower install'. For now though why not start the application up, just run:
grunt server

Friday, July 05, 2013

How To: Use base64 in your CSS for background images

Following on from my post about using D3 to generate graphs. I've recently been evaluating Highcharts for use in a rather large project that I have been working on since last year. So far I've been impressed with the library but that's another topic. What I want to write about is something I've been playing with recently; embedding images into a CSS file using base64.

The reason I came across this is due to accessibility. On producing some pie charts in our app the client mentioned the fact that the colours being used may prevent some their users from seeing the sections of the chart. After some searching and a post on stackoverflow, I was pointed in the direction of a pattern fill plugin which would solve our issue. The example I had seen used a standard image file but I was keen to create some SVG patterns inspired by the pages on philbit and

Using the example SVG patterns and editing them on Codepen, I gathered a few base64 values which can be used in the following format:
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zd…R0aD0iOTkiIGhlaWdodD0iMjUiIGZpbGw9IiNhOWNlMDAiPjwvcmVjdD4KPC9nPgo8L3N2Zz4=);
The result of using the base64 values of the SVG images as backgrounds within Highcharts is shown below. There is also a jsfiddle if you want to see how it works.

Thursday, June 20, 2013

A few reasons why I use LESS

Last year I was introduced to LESS. It's a great way to write CSS as it allows you to nest your styles, set variables, and much more. The first reason I prefer LESS over standard CSS is variables. It's a simple feature that's really helpful. Say you want to use #fd0100 as your value for red. In CSS this would require ensuring that any time you change the red value in one CSS rule you should check for other instances that the same value was used and then update them accordingly. With LESS you simply need to define what your red value is:
@red: #fd0100;
Next up is imports. When using LESS you can split your CSS rules accross multiple files to make them more manageable. Then when you come to build your project you can have them all build into a single CSS file. For example, in the project I'm working on I have a main.less file that imports the following:
@import "reset";
@import "colours";
@import "mixins";
@import "tablet";
@import "desktop";
Mixins are another great feature for LESS. Using mixins you can write little chunks of re-useable CSS. In this little example I have a mixin that sets border-radius using browser specific rules as well as the standard CSS rule. The default radius is 4 pixels but the mixin can have any other valid value passed to it.
.border-radius(@radius: 4px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;