nooshu - Matt Hobbs' Web Development Blog

Kneeling on the shoulders of giants

Category: JavaScript

All things JavaScript in its many forms, be it plain old JavaScript to a cutting edge Library abstraction.

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

jCarousel missing item width

On a recent project the UX team put together a set of wireframes where the use of carousels featured heavily. Luckily when you choose a JavaScript library like jQuery you have quite a few carousel plug-ins to choose from. I’ve used various different ones in the past, but my favorite is called jCarousel. You only have to take a quick look at the jCarousel homepage to see that it will do pretty much anything you ask of it. So in theory it should be a case of copy / paste the code into your site and you’re away. Unfortunately Web Development doesn’t always work that way; a small oversight can leave you racking your brains for hours… arghh!

The design and layout layout had already been created in the usual fashion. All that was left to do was to layer on all the JavaScript goodies (the fun part!). While implementing jCarousel I ran into a curious console error message:

“jCarousel: No width/height set for items. This will cause an infinite loop. Aborting…”

When I checked the carousel CSS, the item width had been set:

1
2
3
4
5
6
7
.product {
    float: left;
    display: inline;
    text-align: center;
    font-size: 0.75em;
    width: 75px;
    }

Strange. The width had been set, so the error message must be from something else. After a few minutes investigation it turned out that the carousel didn’t have a parent with a set width. When fired the carousel is wrapped with two divs; one wraps the carousel, the other wraps the carousel and the navigation. Neither of these divs have an explicit width set which is what was causing the problem. It was a very quick fix in the end:

1
2
3
4
.jcarousel-container {
    padding: 20px 0 0;
    width: 300px;/* Fixed! */
}

Upon a little more investigation it seems you can fix this issue in other ways too. Instead of using a class of “product” to set the item widths I tried using the following:

1
2
3
4
5
#carousel li {/* New selector also fixed it! */
    /*...*/
    font-size: 0.75em;
    width: 75px;
    }

Very strange! The CSS in both cases changes the same elements, it just ignored the width in the ‘product’ class.

So for anyone else encountering the same “No width/height set for items” issue here’s a quick check list for you to try:

  1. Make sure you set a width on the items (duh!). Maybe try different CSS selectors if necessary.
  2. Set a width on the “jcarousel-container” class or one of its parents.
  3. If all else fails, adapt one of the skin examples bundled with jCarousel.

The last one is very annoying if you have your carousel already styled up, but it is guaranteed to work.

JS1k: We have a winner!

If you’ve been following my blog posts over the past couple of months you will have seen JS1k being mentioned quite a few times. If not the idea is simple; create something cool with JavaScript using only 1024 bytes. Now you may think that you can’t do much with 1Kb, but you’d be wrong! Just take a look at the 1st place entry:

JS1k winner image using canvas

All this with 1024 bytes of JavaScript? That's crazy talk!

The author Marijn Haverbeke has created a very cool little platform game that’s actually very playable. As you jump from block to block and move through the level to collect the gold coins, the game gets progressively harder. How exactly did he do that I hear you ask; well using this code of course:

1
2
3
4
5
6
7
8
9
10
11
c=document.body.children[0];h=t=150;L=w=c.width=800;u=D=50;H=[];R=Math.random;for($ in C=
c.getContext('2d'))C[$[J=X=Y=0]+($[6]||'')]=C[$];setInterval("if(D)for(x=405,i=y=I=0;i<1e4;)L=\
H[i++]=i<9|L<w&R()<.3?w:R()*u+80|0;$=++t%99-u;$=$*$/8+20;y+=Y;x+=y-H[(x+X)/u|0]>9?0:X;j=H[o=\
x/u|0];Y=y<j|Y<0?Y+1:(y=j,J?-10:0);with(C){A=function(c,x,y,r){r&&a(x,y,r,0,7,0);fillStyle=c.P\
?c:'#'+'ceff99ff78f86eeaaffffd45333'.substr(c*3,3);f();ba()};for(D=Z=0;Z<21;Z++){Z<7&&A(Z%6,w/\
2,235,Z?250-15*Z:w);i=o-5+Z;S=x-i*u;B=S>9&S<41;ta(u-S,0);G=cL(0,T=H[i],0,T+9);T%6||(A(2,25,T-7\
,5),y^j||B&&(H[i]-=.1,I++));G.P=G.addColorStop;G.P(0,i%7?'#7e3':(i^o||y^T||(y=H[i]+=$/99),\
'#c7a'\));G.P(1,'#ca6');i%4&&A(6,t/2%200,9,i%2?27:33);m(-6,h);qt(-6,T,3,T);l(47,T);qt(56,T,56,\
h);A(G);i%3?0:T<w?(A(G,33,T-15,10),fc(31,T-7,4,9)):(A(7,25,$,9),A(G,25,$,5),fc(24,$,2,h),D=B&y\
>$-9?1:D);ta(S-u,0)}A(6,u,y-9,11);A(5,M=u+X*.7,Q=y-9+Y/5,8);A(8,M,Q,5);fx(I+'¢',5,15)}D=y>h?1:D"
,u);onkeydown=onkeyup=function(e){E=e.type[5]?4:0;e=e.keyCode;J=e^38?J:E;X=e^37?e^39?X:E:-E}

See, simple… urghh! That’s the minified source code so it won’t make much sense, but Marijn has been kind enough to post the unminified code for everyone to look at in a blog post about the entry. Very impressive! I’ll be taking a close look at the source when I get some spare time. Many congratulations to Marijn, superb work.

There are 10 winners in total listed on the JS1k page, all equally impressive, but here are my 5 personal favourites:

Some excellent submissions there, I sure you’d agree. Take a look at all the submissions on the JS1k demo page.

I’d like to say a big thank you to Peter van der Zee for creating the JS1k competition, I’ve really enjoyed it. I’m already looking forward to next year. On a side note, just imagine what’s possible with 2048 bytes!

Aloha Editor – Content editing the HTML5 way

The number of times I’ve built a website based on a CMS only to have the client utter the words “Oh I’m confused, it’d be so much quicker if you made the changes”. Right, so the CMS was a bit of a waste of time then! But fingers crossed thanks to Aloha Editor that may be a thing of the past. Often the problem clients have is actually finding the content that needs to be edited in the CMS; Aloha to the rescue!

What Aloha actually does is make the content editable right on the page; no need to jump into the CMS, find the page, make the changes then preview the result. Just click on the text you wish to edit and type away. Done! It’s hard to believe it actually works until you try it. Why not give it a go on their demo page. It incorporates a few HTML5 technologies which could cause issues with older IE versions, but the demo page seems to work (with a few quirks).

An example of Aloha Editor in action

Quickly and easily edit the demo webpage.

The core has been written to be very small and streamlined, with additional functionality being added by the way of user contributed plug-ins. There’s already an extensive API for developers to play with so I’m sure many of the missing features will be plugged very soon.

There are alternatives about such as TinyMCE and CKEditor, but they’re integrated directly into a CMS’ administration pages rather than as an inline editor like Aloha. Now before you get too excited there are a few cons:

  • It isn’t as simple as just dropping the scripts into a page, it needs to be integrated into a backend system for the changes to be saved.
  • Still in early development so could be quite buggy.
  • Doesn’t work with Opera Browser at the moment but this is being worked on.
  • Some features aren’t available yet, like image / media insertion. But I’m sure these will be developed as it matures.

So there are still a few issues to iron out but it all looks very promising! There were even murmurs on Twitter today about a WordPress plug-in and a Drupal v7 module (not 6 though I presume) in development. So it won’t be long before we’ll be able to try it out on a live site; hopefully it’s also simple enough for clients to use too!

Currently on page 5 of 12« First34567Last »