nooshu - Matt Hobbs' Web Development Blog

Kneeling on the shoulders of giants

Full Frontal 2010

Last Friday I had the pleasure of attending Full Frontal 2010 which was held at the Duke of York’s cinema, Brighton. A super venue for an extremely informative and entertaining 1 day JavaScript conference. After attending in 2009 I didn’t want to miss out this year. If you’ve never been to the Duke of York’s cinema it’s well worth a visit; be warned though, the seats are very comfy and it’s quite hard to stay awake at times!

Full Frontal web conference with Remy Sharp

Slightly embarrassing moment for Remy via the Twitter board.

There were some truly excellent talks, ranging from IE6 and ChromeFrame to the latest developments in HTML5 and the mobile web. Big thank you to all the speakers they did a superb job:

  • Alex Russell: Excellent talk on ChromeFrame, an IE browser plug-in that replaces the IE render engine with that of Chrome (if enabled via a meta tag). He didn’t have many kind words to say about IE but then again who does.
  • Jan Lehnardt: Very informative talk on the mobile web, specifically some of the issues surrounding it. He then switched to CouchDB and how it could be used on a mobile device. CouchDB is a very powerful document-oriented database that can be accessed from anywhere that allows HTTP requests.
  • Paul Rouget: My favourite talk of the day. Paul is a development guru who works for Mozilla and his talk was on a few of the features we should look out for in Firefox 4. This included the Audio Data API, FileAPI and WebGL. WebGL looks, well, amazing!
  • Paul Bakaus: Who would have thought you could use JavaScript and the DOM to create a powerful gaming platform. Well Paul showed us you can by demoing his latest prototype using the Aves Engine to create a “Sims” like game… in JavaScript!
  • Dan Webb: Dan works or Twitter as a Front End Engineer. His talk was on how to get around the pesky same-origin problem when pulling in data from other sites. We have JSON-P sure, but there are other methods too; like postMessage, CORS and that old favourite the iframe.
  • Brian LeRoux: Brian is a developer on a product called PhoneGap which aims to plug the gaps for mobile developers and encourage handset creators into providing better API’s.
  • Seb Lee-Delisle: Seb is a very well known Flash developer but he also has many other skill sets up his sleeve. His talk ranged from 2D particles all the way to the Unity 3D Game Development tool. Incredibly inspirational talk with stunning demos. The future looks very exciting indeed!

The highlight for me was defiantly Paul Rougets talk on “Batshit crazy stuff you’ll be able to do in browsers”. He demonstrated a selection of custom builds of Firefox 4 and left everyone gob smacked with what HTML5 has in store. Using WebGL and the Audio Data API to create a 3D scene that reacts to the music as well as illustrating how useful the new Drag and Drop File API can be. As a bonus he even patched a version of Firefox to interface directly with his web-cam and take a photo and manipulated it via the browser; no plug-ins required! Just wow!

Big thank you to Remy and Julie for taking the time to organise this years event; hopefully I get to go again in 2011.

Three.js and the Audio Data API Visualisation

3D audio visualisation

Mr Doob has created a superb JavaScript 3D Engine in three.js. Screenshots from my 'Bowl' demo.

I’ve been watching the development of three.js by Mr Doob for a couple of months and have been desperate to experiment with it. With Firefox 4 well into the beta stage I decided to bite the bullet and do a little Audio Data visualisation in 3D!

I’ve dabbled with audio visualisation and the HTML5 Audio Data API in the past, so I’m pleased I’ve had a chance to use it again and see what’s new. Note: My previous audio visualisations using canvas no longer work due to specification changes in the API. A pitfall of using an API that’s still in the draft stages I guess.

I’ve put together 5 simple demo’s all based around the same theme showing some of the options available in three.js. My favourite is “bowl”, pretty colours galore!

  • Circle: Simple circle, zoom in / out using the mouse wheel.
  • Cubes: Same as circle only using the cube primitive.
  • Cylinder: Using the cylinder primitive with a floating camera.
  • Sinewave: Rotated sinewave (looks a little like a chandelier).
  • Bowl: A combination of the above demos to create an interesting 3D bowl effect.

Please note these demos will only work in Firefox 4. The Audio Data API is still a draft specification and Mozilla is the only browser vendor to have added it to date. I’m looking forward to it being added to Chrome (Webkit), with its superb V8 JavaScript engine. The demo’s really are just the tip of the iceberg for both three.js and the Audio Data API. It’s certainly an area of the HTML5 specification to keep your eye on.

The music track used in the visualisation is called “Sad Robot” by a group called “Pornophonique”. Very catchy tune that you can download from Jamendo.

Update: It looks like enabling the Google Page Speed Apache module seems to have broken the demos. I’ve disabled it now so it should hopefully fix it (fingers crossed!).

Internet Explorer 9 Preview 6, we have a winner

No you aren’t dreaming; winner and Internet Explorer (IE) have been mentioned in the same sentence. I know it’s hard to believe, but the browser that has been the bane of every Web Developer’s life since 2001 has finally grown up and accepted web standards. According to the W3C HTML5 Test Suite released last week, IE9 p6 is the most compliant browser. Now before the huge (geek) party and dancing on the grave of IE6 starts, there are a couple of major points to note:

  1. IE9 is still only a preview release, not a complete browser.
  2. When released IE9 will only work on Vista and Windows 7.

Point 2 is unfortunately a big party pooper. Windows XP is the operating system that refuses to die, 48% of users who visited W3schools in October were on XP. That’s a large percentage of people who are excluded from installing IE9. We can always hope that these users are using a standards compliant browser from another company (Firefox, Chrome, Safari, Opera) but that may be a little optimistic.

So, even though IE9 is a huge step forward by Microsoft, it doesn’t look like older versions of IE are going to die out any time soon. Luckily the UK government are forward thinkers… wait, no, that’s a lie. So the browser that’s been crippling the web for the best part of a decade looks like it may be around for another 10 years. I’ll put the party poppers back in the draw then.

WordPress plug-ins and svn:externals

So last week I decided to play with the post-commit hook in Subversion which allows you to easily update your WordPress install after committing changes to your repository. After some trial and error this works perfectly. One issue you may run into with WordPress when it’s committed to SVN is using the auto-update plug-in function.

Committing your plug-ins to SVN tends to break this (very cool) auto-update functionality. SVN adds a hidden “.svn” directory to each directory you commit. WordPress auto-update tries to delete the updating plug-ins folder before downloading and extracting the new version into the “wp-content/plugins directory”. WordPress isn’t able to delete the “.svn” directories so the auto update process fails, leaving you without the plug-in you were trying to update (since it deleted it before failing).

So what’s the solution? Well you could download the latest plug-in version and manually extract / commit it to your repository; but that’s too long winded (and boring). The ideal solution lies in the use of the svn:externals property. It allows you to attach an external repository location to a folder in your own repository. Since all WordPress plug-ins are hosted in the WordPress repository you can update all your plug-in’s directly from there with a quick “SVN Update”! Perfect!

You can do this via SSH and the command line or you can do it via a SVN client with a GUI (I use TortoiseSVN). I’ll be showing you how to do it via the GUI.

First you need to remove the plug-in you want to update from your repository if it’s been added. This may seem a little strange as you are trying to update it; but we need to update from an external repository and if a version already exists it will fail:

Delete the plug-in you wish to update

Delete the plug-in you need updating from the repository first

Next you need to setup your svn:externals property on the “wp-content/plugins” directory via the properties menu:

tortoise properties menu

Edit the properties on the 'plugins' directory.

Now for the tedious bit. For all the plug-ins you want SVN to auto-update, you will need to find the WordPress repository URL for. So for the example, to update Akismet and All in One SEO pack you will enter the following:

1
2
akismet http://plugins.svn.wordpress.org/akismet/trunk/
all-in-one-seo-pack http://plugins.svn.wordpress.org/all-in-one-seo-pack/trunk/
Using Tortoise SVN externals

Add the plug-in repositories to the externals properties, one per line.

Once you’ve added all the plug-ins you want to auto-update (remember to remove them first if they already exist in your repository!) commit your changes. Then watch the magic happen via an update:

Updating WordPress plugins directly from the repository

Plug-ins checked out from the WordPress repository.

Akismet and All in One SEO Pack have been checked out from the WordPress repository trunk. Every time you do an update SVN will check for new versions of the plug-ins. Great stuff! There is a slight warning with checking out from trunk; the developer could be working on a new release and unfinished code may have been committed, so the plug-in may be broken if updating from trunk! To get around this you may want to checkout from the plug-in tags (final versions) instead. To do that change the repository URLs to:

1
2
akismet http://plugins.svn.wordpress.org/akismet/tags/2.4.0/
all-in-one-seo-pack http://plugins.svn.wordpress.org/all-in-one-seo-pack/tags/1.6.9/

Unfortunately this will involve changing your svn:externals property every time a new version of a plug-in comes out, but it’s less likely your plug-ins will break. Note: Remember to replace the tag version number with the latest version.

I hope this little tip helps you streamline your deployment!

P.S. On a side note, if anybody knows how to auto update from a tag automatically please leave a comment, I’d love to know if it’s possible.

SVN post-commit hook on Dreamhost

Over the past couple of days I decided to start using the SVN post-commit hook for deploying sites to my staging servers. Once you get it working it will save you a massive amount of time. Make changes on your local server, then, when you’re ready, commit your changes to the repository and the server will auto-update the staging site. Nice! For instructions on how to set this up on your Dreamhost server take a look here.

Unfortunately a slight over-site on my part didn’t make deployment easy. I followed the instructions to the letter (more than once!) but received the same error on commit:

1
post-commit hook failed (exit code 255) with no output.

At first I thought this was a permissions issue but that turned out not to be the case. The solution in the end was because I was saving the do_update.cgi script in Windows format in Notepad++! Doh! Windows and UNIX new lines just don’t mix!

To save a file in UNIX compatibility mode in Notepad++ click “Edit” then “EOL Conversion”. Make sure UNIX Format is greyed out (why greyed out? no idea) when you save your CGI script. Upload to the server and you’re done. Won’t be forgetting to do that again any time soon!

Currently on page 9 of 24« First7891011Last »