nooshu - Matt Hobbs' Web Development Blog

Kneeling on the shoulders of giants

JS1k: Smaller is Better!

Every once in a while something really grabs my interest. Since being introduced to Mr doob and remembering back to the amazing demos you used to get on various Amiga software (cough..); the demoscene has got me thinking about all the cool new possibilities for Web Developers. You can easily use JavaScript and the canvas tag and go visualisation crazy. Now when you mix in another factor: set a limit to the size of the code you can use; then it becomes really interesting!

Peter van der Zee has created a competition called JS1k, where the aim is to see what you can achieve using JavaScript and a canvas tag with a strict limit of 1024 bytes (1k). To put that in perspective, your average web page is 507K, so there isn’t a lot of room for manoeuvre! Saying that though, you will be surprised with what you can achieve with only 1024 bytes. Take a look at some of the accepted submissions and prepare to be amazed.

I’ve submitted my own entry which you can view here, it hasn’t been updated to the latest version yet but I’m sure it will be soon.

Particles changing colour depending on their proximity to different coloured circles.

My entry into JS1k. Looks simple but was a challenge to come under the 1k limit

Compared to some of the entries my demo looks a tad boring, but I really enjoyed putting it together. Condensing a script that was originally over 3.5k down to 1024 bytes was a real challenge. The last 20 bytes in particular were a pain in the backside! In version 0.2 I hit 1024 bytes exactly as I hadn’t realised you also have to style the demo page slightly if you use a black background. I think I may be able to shave a couple more bytes off, but I’m really coming close to the limit. The resulting code isn’t pretty and in no way readable, but it works! Take a look for yourself with a “view source” on the demo page.

According to Peter the competition is open until the 10th September, so I may just create a new demo and see how I get on. On a side note, JavaScript wizard p01 has dabbled with even smaller code limits of 512, 256 and 128 bytes. The results of which you can see here. Impressive stuff! I’m looking forward to seeing his entry into the competition.

Update: After a few optimisations and a run through the closure compiler I managed to get the demo down to 957 bytes.

Learning HTML5 Canvas

For a good while now I’ve been wanting to explore generating visualisations using JavaScript, and there really hasn’t been an easier time to do it with web technologies like Canvas and Processing (via processing.js). As with all things in life there’s never enough hours in the day to do everything. I’ve had the excellent book by Daniel Shiffman, ‘Learning Processing‘ which I’m about 4 chapters into; stareing back at me on my desk for 8 months now. It’s all bright and orange and full of cool stuff! But alas no time… until now. Time for me to pull my finger out and learn something new.

In terms of canvas I’ve already gone through quite a few tutorials on the API and how it works, so I’m not quite a complete beginner. If you are just starting out with canvas one set of tutorials I found particularly helpful is located at the Mozilla developer center (MDC). I must admit I’m struggling to find intermediate tutorials; lots of inspirational demonstrations but the code can make your head hurt due to its complexity.

I’ve compiled a list of canvas related demos and sites below, which I’ve been reading. I’m going to concentrate on canvas for the moment then come back to Processing at a later date.

html5 canvas with liquid particles

Liquid Particles demo by Daniel Puhe

Visualisations

  • Liquid Particles: Loving the simplicity and the bright colours. Try leaving the particles to collect into a tight ball then rip it apart!
  • JuicyDrop: If you ever tried Milkdrop for Winamp you will love this port to canvas. There are four examples of the thousands of Milkdrop visualisations available.
  • HTML 5 Audio Experiment: Another particle based visualisation, this time mixed with audio. I don’t think the particles react to the audio (correct me if I’m wrong!) as it seems to be a repeating pattern. But still very cool!
  • 3D landscape on HTML5 Canvas: Superb 3D visualisation by Seb Lee-Delisle. Canvas may only have a 2D context at the moment but with a little JavaScript magic you can create 3D visualisations.
canvas html5 video in 3d space

Blowing up a HTML5 Video in 3D space using canvas by Craftymind

Technical Demos

  • Blowing up HTML5 video: If the addition of plug-in less video wasn’t enough in HTML 5, check out this demo. Blow up a streaming video with a mouse click.
  • Cloth simulation: It may not sound that exciting but the demo is very clever. Pull and push the cloth with your mouse to see how the mesh changes. Maybe one day we will see Maya ported to HTML5 (it could take a while!)
  • Image Evolve: This has to be one of my favourite HTML5 canvas demos so far. Upload an image and watch how the computer generates the same image using overlapping polygons. The image improves over time; leave it a couple of days and a canvas based Mona Lisa can be yours!
  • Raycaster: If you’ve ever played Wolfenstein 3D this demo will look familiar. It may not look too pretty but it’s a great proof of concept.
retro asteroids in HTML5

HTML 5 Asteroids by Doug McInnes

Games

  • HTML 5 Asteroids: If you are into retro arcade games there are plenty to choose from built with HTML5. Here’s the classic ‘Astroids’ for your time wasting pleasure.
  • HTML5 Pacman: Another classic, this time Pacman. A of version of Pacman hit the news recently when Google replaced their logo with a playable version of Pacman and cost 4.2 million hours of productivity. Not bad people!
  • Experimenting With Textures: Much like the Raycaster technical demo above only a little more advanced. The game actually looks to use some of the original Wolfenstein 3D textures. Now where are the German soldiers?
  • Torus: Looking for a 3D version of Tetris? Look no further as Ben Joffe has done exactly that.
Fire by mr doob

One of many experiments by Mr doob, this one is called 'Fire'.

Compilation Sites & Experiments

  • Mr Doob: If you haven’t seen Mr Doobs site you’ve been missing out. Lots of HTML5 and Flash experiments for you to look at. You can learn lots by doing a quick view source!
  • Chrome Experiments: To promote their Chrome browser Google launched Chrome Experiments. The demos available really show off the speed of the V8 JavaScript engine.
  • Hakim.se: If you like particle visualisations you will love the site by Hakim El Hattab. The HTML5 – Keylight demo is superb.
  • Andrew Hoyer: I mentioned this site earlier with the cloth simulation; but Andrews other experiments are also worth looking at. If you like mathematics you will love these demos. On a side note I’m impressed with the site design too!

Wow there’s a lot to look at there, with more and more coming out every day. So little time! If only I didn’t have to sleep…

Nooshu.com now with added HTML5 goodness

So I finally pulled my finger out and took the HTML5 plunge over the past day or so; the Nooshu WordPress theme now has a sprinkling of HTML5. Mmmm I have that warm fuzzy feeling of completeness! In all honesty it’s been an easy way to learn about the new HTML5 specifications (although they aren’t complete and won’t become a W3C recommendation until 2022… no that isn’t a typo!).

HTML5 has added a host of new tags which have much more semantic meaning. So instead of using ‘divs’ to section off areas of your page layout, you can now use:

1
2
3
4
5
6
<!-- Some of the new HTML5 Tags -->
<header></header>
<footer></footer>
<article></article>
<section></section>
<nav></nav>

It’s certainly a welcome addition to the modern web. My favourite part of HTML5 has to be the doctype (other than the canvas element):

1
2
3
4
5
<!-- No more -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!-- Much better! -->
<!DOCTYPE html>

Look how simple it is! No more copy / paste from a previous project for this doctype.

My main concern when converting the theme to HTML5 was how it would work in IE; as IE8 supports parts of HTML5 but IE6 and IE7 not at all. When IE comes across a tag it doesn’t recognise it just ignores it. Since the tags aren’t recognised you won’t be able to style your lovely new HTML5 template in IE6 & IE7. Lucky you can patch this missing functionality using JavaScript. Remy Sharp has created a script called html5shim, that adds the missing tags to IE. Just add the following code to your header and you will now be able to style your HTML5 tags:

1
2
3
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

The script must be in the header and must fire before the DOM is created. The script simply creates all the new HTML5 elements using the document method ‘createElement’, you don’t even need to attach the created elements to the DOM! Now IE will recognise the tags and you can get on with your page styling. Yay!

Those who use WordPress 3.0 may have noticed that the default Kubric theme is no more and it’s been replaced with a new theme called twenty ten. The theme uses the HTML5 doctype but it doesn’t use any of the new tags. I guess because of the IE issues. Maybe this will be changed in future releases.

The Nooshu theme is still a work in progress, and I’ll modify areas as I learn more about the new HTML5 features. Here are a selection of links that I found incredibly useful while working on the theme:

  • Dive into HTML5: Read through this article and you will be well on your way to learning HTML5. It delves into the history of HTML and progresses forward right up to implementing the new specifications.
  • HTML5 Doctor: Looking for HTML5 related news or need some clarification of a new tag? Look no further than HTML5 Doctor. Lots of articles available for you to read and there’s even the option to ask a question if you don’t find the answers you are looking for.
  • HTML 5 Outliner: So you’ve created your shiny new HTML5 template; why not check it with the outliner to see if it makes sense to a user / search engine.
  • W3C Markup Validator: It’s been a while since I’ve used a validator since I have one built into Firefox, but the W3C validator was very handy for pointing out attributes and tags that are no longer supported in the specifications. It also gives you a quick benchmark to aim at.

If you have any other useful HTML5 tips and links let me know below.

Looking for a new CMS for small websites

Recently I’ve been looking at other small CMS solutions for future projects. For a while now I’ve been using Frog CMS; unfortunately development seems to have stopped which is a shame. At the weekend I stumbled across quite a major security concern with Frog involving a Cross-site request forgery (CSRF). Using Google it is even possible to find ready to be used scripts (which I won’t link to here). Being hacked using CSRF is unlikely to happen as it requires a user who regularly uses the site to click on a rogue link, but even so it’s quite concerning.

Now I could keep using Wolf CMS (which is a variation on Frog) but my thoughts are why keep all your eggs in one basket. If Frog is vulnerable then its likely that Wolf will be too. So time to look about for a new small CMS.

The CMS will be used for very small websites (5 – 20 pages) where MODx, Drupal and WordPress are just overkill; It gets updated regularly and is based on PHP / MySQL. I’ve been having a search and have found a few that look really promising:

Textpattern

Very clean looking CMS (love the typography on its homepage… not that it matters) and having tried the demo I can see the admin interface is simple to use and all the features are easy to find. I think the admin area needs a little work in terms of design, but the comments on Opensourcecms all seem to be very positive so I’ll definatly be installing it locally and having a closer look.

Text pattern homepage

A flexible, elegant and easy-to-use CMS. We shall see!

Concrete5

Another interesting CMS, the video on the homepage makes it look like some sort of action movie, maybe a little over the top but whatever. I was unable to find a live demo of the CMS unfortunately, but the screencasts from the video looked very promising. There’s also an option of Concrete5 hosting the CMS, which removes the (sometimes) tricky setup process; great for non-technical people.

concrete5 homepage

Dramatic homepage video, but how well does it work? Live demo please!

CMS Made Simple

Of the new CMS’ I’ve looked at CMS Made Simple is my favorite. The live demo looked good with a very intuitive administrator area. Some of the comments on Opensourcecms were quite negative; so I’ll have to do some testing of the installation and template system before I commit to building a live site with it.

CMS Made Simple homepage

Some negative comments but it looks very promising.

For my next small project I’ll be using one of these small CMS’, but which one will it be? When i decide I’ll be sure to update you. Got any other suggestions? Why not leave a comment.

New to Drupal? Here are a few helpful links

For the past week or so I’ve been expanding my horizons and started using a new CMS (to me at least), it’s name is Drupal. Now Drupal has been around for many years, originally known as ‘Drop’ until it was renamed to ‘Drupal’ in 2001. The CMS is now on version 6 (with alpha versions of 7 available from the download page). As I’ve only just started using this extremely powerful CMS I thought I’d put together a quick list of links and tips of what I’ve learnt so far. Hopefully other beginners like myself will find them useful.

Screencasts

  • Lynda.com: I can’t stress enough how useful Lynda.com has been while learning Drupal (or any other piece of software for that matter). It has 3 superb sets of screencasts available that will take you from a complete beginner a fairly competent Drupal developer. They aren’t free but they are well worth the money!
  • Learn by the Drop: Another set of brilliant screencasts that you can use to get up to speed on how to use Drupal. The site contains both premium and free videos for the ‘want to be’ Drupal developer.

Websites

  • Stack Overflow: Now I know this is a bit of a catch-all site as it can be used for any programming language, but you will often find many questions you have, have already been answered on Stack Overflow. The Drupal specific questions are available here.
  • Drupal Snippets: Drupal Snippets is a whole site dedicated to…. erm… snippets for Druplal. I must admit I’ve yet to use the site, but I bookmarked it as soon as I found it as I’m sure it will come in extremely useful after learning the basics.

Modules

  • CCK: Download and install this module and developing dynamic websites in Drupal becomes so (so!) much easier. CCK (Content Construction Kit) is a module that expands Drupals native Custom Content Types functionality opening a whole world of possibilities for your site and users. In essence CCK makes it easier to ‘push’ data into your site in any way you see fit. It’s even being included into the core of Drupal 7.
  • Views: Over the past couple of days I’ve been blown away by the power and versatility of the Views module. Where CCK is used to push data into your site database, Views ‘pulls’ the data back out and display it in any format you like. It’s quite intimidating at first as there are tonnes of options and settings, but once you get your head around it, the Drupal world is your oyster. A free screencast on how to use it is available here.
  • Pathauto: Coming from WordPress I’m used to its fantastic permalink functionality, once setup it just works. Drupal doesn’t seem to come bundled with anything similar (please correct me here if I’m wrong!) so installing the Pathauto module will plug that gap. The module automatically generates a path for various content types without you having to worry about it.

Themes

  • Zen: If you are a Front End Developer like myself you will be wanting a solid foundation with which to build and style your site. You could just edit one of the bundled themes if that’s your thing, but I prefer to start a fresh. The Zen theme is a fantastic theme with which to base your styling off. One big tip, don’t edit the main Zen folder, create a sub-theme by following these directions (I learnt that the hard way).

So there you go, hopefully fellow Drupal beginners will find the links above useful. Any that I’ve missed off or that you’d recommend? Leave a comment below.

Currently on page 11 of 23« First910111213Last »