Testing IE9 in Ubuntu with VirtualBox setup script

Unfortunately for web developers some people still use internet explorer(IE) which means we need a way to test our pages in it.  There is no good way to install IE9 directly in Ubuntu so the best thing to do is set up a windows virtual machine and test your pages in that.  Fortunately Microsoft provides free VHD images of windows with various versions IE for free to developers(with a 90 licence).

To make this setup easier I have created a small bash script which does all the downloading, installation and configuration for you.

The script works as follows:
1. Downloads the RARed VHD file from microsoft.com
2. Installs unrar
3. extracts the VHD file
4. Installs VirtualBox
5. Configures a new Windows VM
6. Starts the new Windows VM

You can download the script here:
http://ubuntuone.com/458mPt4YJsB9rBiHEHhwGu

Place the script in your home folder.

Give the script execute permissions:
chmod +x install_win7_IE9_VM.sh

Run the script(and kick back because it takes a while to download and extract everything):
./install_win7_IE9_VM.sh

After running the script the first time you can just run your Windows VM from the VirtualBox GUI as normal.


NOTE: the Windows password is "Password1"

Fix Missing Menus in FileZilla in Gnome 3.6 with Ubuntu 12.10

After doing a fresh install of 12.10 Quantal on my laptop and installing Gnome 3.6(my DE of choice) I noticed the File etc. menus wee missing from FileZilla and SVN Workbench.  After a bit of googling I found a solution that works for me.

Open a terminal and enter the following:

sudo su

then:

echo "export UBUNTU_MENUPROXY=0" > /etc/X11/Xsession.d/81ubuntumenuproxy

then:

exit

Now reboot and the menus should appear as normal.

NOTE: this solution will also disable global menus in unity if you wish to undo the change run the following:

sudo rm /etc/X11/Xsession.d/81ubuntumenuproxy

Enjoy Gnome 3.6 on Ubuntu 12.10

Source: http://www.webupd8.org/2011/03/disable-appmenu-global-menu-in-ubuntu.html

Install LAMP in Ubuntu 12.10 Quantal(Apache, MySQL, PHP)

This is a short guide to installing a basic LAMP(Linux, Apache, MySQL, PHP) development environment on Ubuntu 12.10 Quantal Pangolin.

First install lamp:
Open a terminal and run the following:

sudo apt-get install lamp-server^

After the lamp server installation you will need write permissions to the /var/www directory.  Follow these steps to configure permissions.

Add your user to the www-data group

sudo usermod -a -G www-data <your user name>

now add the /var/www folder to the www-data group

sudo chgrp -R www-data /var/www

now give write permissions to the www-data group

sudo chmod -R g+w /var/www

now log out and log back in to see the changes reflected in nautilus.

Some extra things to install
The following are not essential but they are things I almost always need as part of a LAMP install so I have included instructions on installing them.

Curl:

sudo apt-get install php5-curl

Mod rewrite:

sudo a2enmod rewrite

To enable mod rewrite you also need to do some apache configuration:

sudo gedit /etc/apache2/sites-available/default

and change AllowOverride from None to All:

<Directory var="var" www="www">
Options Indexes FollowSymLinks MultiViews
AllowOverride All
Order allow,deny
allow from all
</Directory>

sudo /etc/init.d/apache2 restart

GD2 Graphics Lib:

sudo apt-get install php5-gd

And that's it, how easy was that?  Ubuntu rocks!

Basic asp.NET dev environment in Ubuntu 12.04

I recently had to do a small example of integrating the system I am currently working on into an asp.NET application.  Not having a windows machine handy I though I would give Mono a try.  Fortunately setting up a basic dev environment was really simple.  NOTE: this is a very basic dev environment with no IDE or frameworks installed etc, it was perfect for what I needed but may not be appropriate for full blown development.

First install xsp2:

sudo apt-get install mono-xsp2

then:

mkdir -p ~/dotnet

cd dotnet

gedit Default.aspx

Then paste in the following:


<%
    HelloWorldLabel.Text = "Hello, world!";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label runat="server" id="HelloWorldLabel"></asp:Label>
    </div>
    </form>
</body>
</html>



now save the file and go back to the terminal and run:

xsp2

*Note: this must be run in the directory where you created the file.

Now open a browser and visit:
http://127.0.0.1:8080/Default.aspx

And that's it.  This is a very basic dev environment and is probably not suitable for a full blown application but it was perfect for my needs.

IMON Soundgraph VFD/LCD with XBMCbuntu

This is a short guide to setting up the an IMON Soundgraph VFD/LCD on XBMCbuntu Eden 11.0.  XBMCbuntu is based on Ubuntu 11.10 so this guide may also work for 11.10 although I have not tried it.

Open a terminal(either via SSH or Openbox) and run the following commands:


First install LCDproc:
sudo apt-get install lcdproc

Now edit the config file:
sudo nano /etc/LCDd.conf

change line 53 from
Driver=curses
to
Driver=imon

*NOTE: in nano to go to a line press CTRL+w then CTRL+t and enter 53 and press enter after editing the file press CTRL+x then y and then ENTER to close and save the file.

The IMON driver for some reason hangs on shutdown so run the following to fix the problem:

sudo mv /etc/rc6.d/K60LCDd /etc/rc6.d/K99LCDd


sudo mv /etc/rc0.d/K60LCDd /etc/rc0.d/K99LCDd

Upgrading to Skype 4 in Ubuntu 12.04 (from skype 2.2)

The latest version of Skype for Linux is here.  The new 4.0 version brings a number of improvements and brings the Linux Skype client up to speed with the OSX and Windows versions.  If you already have version 2.2 installed you will need to remove it before installing the latest 4.0 version.  I uninstalled my 2.2 version from the software centre but hit the following error when installing the new deb file:

trying to overwrite '/etc/dbus-1/system.d/skype.conf', which is also in package skype-bin:i386 2.2.0.35-0precise3

To get around this error just fire up a terminal and run the following commands:

sudo apt-get --purge remove skype

sudo apt-get autoremove

Then just install the latest deb file via the software centre like normal.

Note: I downloaded the Ubuntu 10.04 deb from the Skype download page(there doesn't seem to be a specific 12.04 one)

Source: Doog on http://community.skype.com/t5/Linux/Skype-won-t-upgrade-to-4-on-Ubuntu-12-04/m-p/795468

Install LAMP in Ubuntu 12.04 Precise(Apache, MySQL, PHP)

This is a short guide to installing a basic LAMP(Linux, Apache, MySQL, PHP) development environment on Ubuntu 12.04 Precise Pangolin.

First install lamp:
Open a terminal and run the following:

sudo apt-get install lamp-server^

After the lamp server installation you will need write permissions to the /var/www directory.  Follow these steps to configure permissions.

Add your user to the www-data group

sudo usermod -a -G www-data <your user name>

now add the /var/www folder to the www-data group

sudo chgrp -R www-data /var/www

now give write permissions to the www-data group

sudo chmod -R g+w /var/www

now log out and log back in to see the changes reflected in nautilus.

Some extra things to install
The following are not essential but they are things I almost always need as part of a LAMP install so I have included instructions on installing them.

Curl:

sudo apt-get install php5-curl

Mod rewrite:

sudo a2enmod rewrite

GD2 Graphics Lib:

sudo apt-get install php5-gd


And that's it, how easy was that?  Ubuntu rocks!

Install MySQL Workbench on Ubuntu 12.04

Currently there is no pre-built .deb file or repo available to install MySQL Workbench on Ubuntu 12.04.  One will probably appear soon after official release of 12.04 but at the moment it is still in beta so there are a few extra steps to get it working.

NOTE: Once Ubuntu 12.04 moves out of beta there will probably be a better way of doing this so please check the official MySQL Workbench download page and the official 12.04 repos before attempting this.

First of all you will need to download the latest MySQL Workbench from here.

Next you must download a .deb file for libzip1 as it is not available in the 12.04 repos.

32 bit version - https://launchpad.net/ubuntu/+archive/primary/+files/libzip1_0.9.3-1_i386.deb
64 bit version - https://launchpad.net/ubuntu/+source/libzip/0.9.3-1/+build/1728114/+files/libzip1_0.9.3-1_amd64.deb
for other architectures go here

After downloading just open them with the software centre and click install.

*NEW: The libmysqlclient16 package was removed from the 12.04 repos so you will need to download the old deb files for it:

32 bit version - http://launchpadlibrarian.net/94563300/libmysqlclient16_5.1.58-1ubuntu5_i386.deb
64 bit version - http://launchpadlibrarian.net/94808408/libmysqlclient16_5.1.58-1ubuntu5_amd64.deb


 Next open a terminal and install the following packages:

sudo apt-get install libzip1 python-paramiko python-pysqlite2 libctemplate0 libgtkmm-2.4-1c2a libmysqlclient16

Then cd to the directory where you downloaded the deb file and run:

sudo dpkg -i mysql-workbench-gpl-5.2.38-1ubu1104-i386.deb

And that should be it, enjoy!

Instructions loosely based on those found here: http://blog.csdn.net/kevin6216/article/details/7420421

Install Zenbound 2 on XBMCbuntu Eden

Zenbound 2 is a great little game I got as part of the latest Humble Bundle, it's surprisingly fun and a very innovative style of game play, unlike anything else I have played in fact.  Anyway i figured it would be a good game to have on my media center so here are the instructions for installing it on XBMCbuntu.

First you need to download the .deb file for Zenbound 2, once you have the .deb file you need to copy it to the home folder of your XBMCLive installation.  For instructions on this follow my guide "Copy files to XBMC with Filezilla"

Then open a terminal or SSH into your XBMCbuntu box and run the following commands:

sudo dpkg -i zenbound2_20120325-1_i386.deb

mkdir scripts

cd scripts

nano zenbound2.sh

Now copy in the following text(it's ctrl + shift + v to paste at the terminal)


#!/bin/bash
openbox &
/usr/games/zenbound2
killall -9 openbox

and save the file(ctrl + x and then y to confirm)

chmod +x zenbound2.sh

Now you need to use "Advanced Launcher" addon to create a shortcut to start Zenbound 2 from within XBMC.  Simply create a new launcher and point it as the zenbound2.sh file you created above(should be /home/xbmc/scripts/zenbound2.sh)

and that's it, have fun!

Installing And Yet It Moves in XBMCbuntu Eden

And Yet It Moves is a really fun physics indie game which I purchased as part of a Humble Bundle in 2011.  The following is a short guide to installing it on XBMCbuntu Eden, for instructions on installing it on XBMCLive Dharma check out my old guide here.

First you need to download the .deb file for And Yet It Moves, once you have the .deb file you need to copy it to the home folder of your XBMCLive installation.  For instructions on this follow my guide "Copy files to XBMC with Filezilla"

Then open a terminal or SSH into your XBMCbuntu box and run the following commands:

sudo apt-get install libtheora0 libopenal1 libsdl-image1.2

sudo dpkg -i andyetitmoves_1.2.2-1_i386.deb

mkdir scripts

cd scripts

nano andyetitmoves.sh

Now copy in the following text(it's ctrl + shift + v to paste at the terminal)

#!/bin/bash
openbox &
/usr/games/AndYetItMoves
killall -9 openbox

and save the file(ctrl + x and then y to confirm)

chmod +x andyetitmoves.sh

Now you need to use "Advanced Launcher" addon to create a shortcut to start Osmos from within XBMC.  Simply create a new launcher and point it as the osmos.sh file you created above(should be /home/xbmc/scripts/andyetitmoves.sh)

The first time you run the game you will probably want to go to options and set it to use fullscreen mode.

and that's it, have fun!

Install Osmos on XBMCbuntu Eden

Osmos is a really fun and addictive indie game which I purchased as part of a Humble Bundle in 2011.  The following is a short guide to installing it on XBMCbuntu Eden, for instructions on installing it on XBMCLive Dharma check out my old guide here.

First you need to download the .deb file for Osmos, once you have the .deb file you need to copy it to the home folder of your XBMCLive installation.  For instructions on this follow my guide "Copy files to XBMC with Filezilla"

Then open a terminal or SSH into your XBMCbuntu box and run the following commands:

sudo apt-get install libopenal1

sudo dpkg -i Osmos_1.6.1.deb

mkdir scripts

cd scripts

nano osmos.sh

Now copy in the following text(it's ctrl + shift + v to paste at the terminal)


#!/bin/bash
openbox &
/opt/Osmos/Osmos
killall -9 openbox

and save the file(ctrl + x and then y to confirm)

chmod +x osmos.sh

Now you need to use "Advanced Launcher" addon to create a shortcut to start Osmos from within XBMC.  Simply create a new launcher and point it as the osmos.sh file you created above(should be /home/xbmc/scripts/osmos.sh)

and that's it, have fun!

Install Minecraft in XBMCbuntu Eden

To run Minecraft you on XBMCbuntu Eden will first need to install Sun's Java JRE, you can my simple step by step guide here.

Now either SSH into your XBMCbuntu box or open a terminal on it and run the following commands:

wget https://s3.amazonaws.com/MinecraftDownload/launcher/minecraft.jar

mkdir scripts

cd scripts

nano mincraft.sh

then paste(ctrl + shift + v at the terminal)  this in and save(ctrl + x and then y to confirm)

#!/bin/bash
openbox &
/usr/lib/jvm/java-6-sun/jre/bin/java -Xmx1024M -Xms512M -cp ~/minecraft.jar net.minecraft.LauncherFrame
killall -9 openbox

then run:

chmod +x minecraft.sh


Now in the XBMC "Advanced Launcher" addon simply create a new launcher that points to the new minecraft.sh script(located at /home/xbmc/scripts/minecraft.sh).

Note: Minecraft is a resource hog and on my Acer Revo 1600 the performance was terrible, I also tested on an older desktop with a decent graphics card and it ran like a dream so if you're running XBMCbuntu on a small nettop don't expect great performance.

Install Sun Java JRE on XBMCbuntu Eden

While XBMCbuntu comes with OpenJDK pre-installed you may need to install the Sun Java JRE for some apps(like minecraft) to function correctly.  To install sun-java6-jdk in XBMCbuntu SSH into your XBMCbuntu box and run the following:

sudo add-apt-repository ppa:ferramroberto/java

sudo apt-get update

sudo apt-get install sun-java6-jdk sun-java6-plugin

During the install you will be prompted to agree to the java terms of service(hit Tab to highlight the ok button)

If you want to make Sun Java the default java for your system run this command:

sudo update-alternatives --config java

Alternatively if you want to leave OpenJDK as the default but run specific programs with Sun's java then run:
/usr/lib/jvm/java-6-sun/jre/bin/java

Note: if you are still using the older XBMCLive Dharma you can follow this guide to install java


And that's it, have fun!

Launch Chromium in fullscreen in XBMCbuntu Eden

On my new XBMCbuntu install the "Advanced Launcher" addon had a "chromium-browser" launcher configured by default.  Unfortunately when running the launcher chromium started but was only taking up half the screen(the maximise button was also missing and keyboard shortcuts would not increase the window size).  After some googling and no success I decided to roll my own solution which is as follows:

First SSH into your XBMCbuntu install and enter the following(if you are not comfortable using SSH simply log out of XBMC and log into openbox from the login screen then open a terminal and follow these steps)

mkdir scripts

cd scripts

nano chromium.sh

then paste(ctrl + shift + v at the terminal)  this in and save(ctrl + x and then y to confirm)


#!/bin/bash
openbox &
/usr/bin/chromium-browser
killall -9 openbox

then run 

chmod +x chromium.sh

Now in XBMCbuntu go to the "Advanced Launcher" and right click the "chromium-browser" launcher and select "Edit Launcher" then select "Advanced Modifications" then "Change Application" and select the script you made in the previous steps which is located at /home/xbmc/scripts/chromium.sh

Installing Minecraft on XBMC Live

Note: this guide is for the older XBMCLive Dharma release, for an updated guide for XBMCbuntu Eden go here.

First off you need to install java on XBMC Live, this is pretty easy just follow my guide here.

Next we need to download and install Minecraft.  To do this you need terminal access, you can follow my guide "3 ways to access the terminal on XBMC Live"

wget https://s3.amazonaws.com/MinecraftDownload/launcher/minecraft.jar

mkdir scripts

cd scripts

nano minecraft.sh

now paste this in(it's ctrl+shift+v to paste in the terminal):

#!/bin/bash
fluxbox &
java -Xmx1024M -Xms512M -cp ~/minecraft.jar net.minecraft.LauncherFrame
killall -9 fluxbox

now press Ctrl + X and then Y to save and exit

chmod +x minecraft.sh

Now you need to add a launcher shortcut to launch Minecraft from XBMC.  To do this just follow my instructions "Add a Shortcut to Launcher Add-on in XBMC" and select Home->scripts->minecraft.sh

Unfortunately there is currently no way to launch Minecraft in fullscreen so once it loads just hit "F11" to run in fullscreen mode.

If you want to install more games on XBMC Live check out my guide here

Things every Web Developer wishes Web Designers knew

As a web developer I work with many web designers.  I have great respect for web designers as they can do things I couldn't.  I can code but I have no eye for design, I can spot bad design easily but I don't have the talent to create good designs myself.  Because of this I rely heavily on web designers in my projects.  However there are a few key things I rarely find that web designers can do that would help greatly in the smooth running of projects.  While web designers are artists they sometimes seem to forget that fundamentally they are working with technology and at least some basic understanding of the underlying principles of the technologies they use and the web in general is something that every web designer should have.

1. Source Control
Subversion, Git, Mercurial or whatever I would love my designers to be at least familiar with the basics of source control.  It makes collaborating on code and pushing out updates so easy that it is basically essential to any web project.  It's not very difficult conceptually so spend a day reading up on it to familiarise yourself with the basics.

2. How to set up a local dev environment
I know designers love their Macs but if you have bought a Mac it is essential that you know how to set up a basic dev environment in OSX.  If you want to dev locally and you have decided to use OSX it is absolutely the web designer's responsibility to know how to configure and use their own equipment.  I am quite willing to answer sensible/interesting questions about the setup but not questions like "I don't get it, can you do it for me?".  I have as much(or as little) interest in learning how to set up a MAMP stack as you do in a setting up a LAMP stack so don't expect me to waste time figuring out how to get a web app running under OSX.

3. Virtualisation
This is a must.  If you can't/won't figure out how to get the app you are working on running under OSX you must be able set up a virtual instance of the server to test/dev with.  Also for testing various versions of IE you are basically going to have to understand this.  It's not difficult to learn and can save hours of time and hassle and there are plenty of options out there for virtualisation.  I use VirtualBox, it's free and does the job but there are a ton of other programs out there that you can use too.

If as a web designer you can master these basic technologies you will find working with web developers a lot easier(as well as garnering considerable respect from them).  I don't want this post to come off as a rant but I strongly believe that if you want to work in the tech industry you must have a understanding and interest in the technologies that underpin your profession.