nooshu - Matt Hobbs' Web Development Blog

Kneeling on the shoulders of giants

Category: Ramblings

A random ramble from the large squidgy organ inside my skull.

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!

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…

Snipplr under new management!

A few months ago I wrote a blog post regarding Snipplr, and how it was annoying it’s user base. By the look of it other people noticed the severe lack of development and abundance of spam and the site has been sold to envato.com (which I must say I love the site design).

With Envato behind Snipplr hopefully it will go from strength to strength. They already have a huge number of popular sites behind them including Nettuts and FreelanceSwitch which I read regularly.

Snipplr under new management

Under new management, huzzah! There have been improvements already! (no ads!)

There’s already been activity on the Snipplr twitter account asking for feedback, so here are a few of my requests:

  • Remove spam snippets & comments.
  • Better sign-up process to stop spam.
  • Fix the export function in the user preferences.
  • Better syntax highlighting (I hate having to click plain text before copy / paste).
  • Fix the blog links from the homepage, they have never worked for me.
  • Ability to remove comment spam from your own snippets.
  • Better design… the original orange was better than the current version.
  • Fix the gigs functionality, or at least explain how it works. I’ve never had much luck.
  • Use OpenID, I hate remembering all those passwords.
  • Ability for the API to output snippets as JSON-P.

Those are all I can think of at the moment but I’m sure there are others. Really looking forward to seeing how Snipplr evolves in the coming weeks and months!

High Resolution Icons for Google Chrome

I’ve been using Google Chrome as my default browser for quite a few months, I still use Firefox for Web Development but for general browsing you really can’t beat the speed of Chrome. One of my favourite Chrome features is the ‘Create application shortcuts…’ function. Creating an application shortcut essentially adds an icon to your desktop, Chrome will then run the web application like it is a free-standing desktop application (you still need to be connected to the internet unless it uses some form of offline storage).

If you are a Gmail user I highly recommend creating an application shortcut to see this function in action. One thing you will notice when you create the shortcut with Gmail is it uses a high resolution icon. If you create a shortcut using a standard website, by default the favicon.ico is used. As the favicon is limited to 16 by 16 resolution it will look very ugly blown up on your desktop.

Various application shortcuts I've created

You can really see the difference between the Gmail icon (left) and the standard favicons.

The image above really illustrates the difference between a 16 x 16 icon and a high resolution version. Now of course you could just change the icon in the Windows properties…. but that’s boring. Why not offer your users a high resolution image along with the standard favicon? It really is very simple:

1
2
<link rel="icon" href="/icon_32x32.png" sizes="32x32" />
<link rel="icon" href="/icon_48x48.png" sizes="48x48" />

Simply place this code in your head tag of your web application and link to the corresponding icons. Now when your user creates an application shortcut they will have a nice high resolution icon on their desktop.

Hi resolution Chrome icon

You can really see the difference when you add a high resolution icon

I’ve added a high resolution icon for my blog administration, now if only F1 live timings would do the same. For those of you who want to add a high resolution icon to your WordPress blog add the following code to your functions.php:

1
2
3
4
5
6
function wp_hi_res_admin_icons() {
    echo '<link rel="icon" href="/wp-content/themes/' . basename(dirname(__FILE__)) . '/images/icon_name_32.png" sizes="32x32" />'."\n";
    echo '<link rel="icon" href="/wp-content/themes/' . basename(dirname(__FILE__)) . '/images/icon_name_48.png" sizes="48x48" />'."\n";
}
add_action('login_head', 'wp_hi_res_admin_icons');
add_action('admin_head', 'wp_hi_res_admin_icons');

This will add the icon code to your administrator login panel and dashboard; or paste the raw HTML into your header.php so all users can see the icons.

Converting a WordPress post to a custom post type

Update: There is now a plug-in that does this for you called Post Type Switcher so you don’t have to get your hands dirty with the SQL (thanks Bruno!). Another plug-in called Convert Post Types is also available that does the job for you, Thanks to Steve for that one.

With the release of WordPress 3.0, developers now have the ability to create custom post types by adding a few lines of code to a themes functions.php. The feature is a huge step forwards for WordPress as it moves closer to being a viable CMS solution (without all the hacks). There have been a number of projects I’ve worked on that have required a custom post type; rather than relying on the client selecting the correct category under ‘Add new post’, which tends to always leads to issues.

I’m in the process of converting nooshu.com to use custom post types and taxonomies, the main area in particular is my portfolio section. At the moment the portfolio posts are just standard posts which have a category of ‘portfolio’ attached to them. It works, but I don’t get that warm fuzzy feeling, and it feels like a bit of a hack. So time to start using a custom post type of ‘portfolio’ (yay!).

Unfortunately at the moment there doesn’t seem to be a quick way of converting a published standard post into a shiny new custom post type, at least not from the administration area. After a little investigation work using phpmyadmin and the nooshu WordPress database, I discovered it’s actually quite easy. Be warned though, it’s easy to break your blog by editing the database directly, so make sure you back everything up. I take no responsibility for what happens if you break something!

To convert a post into a custom post type; in phpmyadmin look for the wp_posts table. Inside it do a search, where the ‘post_type’ value equals ‘post’. This will give you a list of all your posts (otherwise you will also have all the revisions and attachments listed). From the list you should be able to pick out the posts you want converting to your new post type, edit one of these posts and change ‘post_type’ from ‘post’ to your new custom post. In my case this would be ‘portfolio’:

phpmyadmin admin panel for a WordPress post

Change 'post_type' from 'post' to your custom post type.

Click save and go back to the previous page. Done! You should now see the post appear under your new custom post type in the WordPress admin panel. If you have any issues just change ‘post_type’ back to ‘post’ and it will reappear under the standard posts. No information is lost when changing the post type.

It’s not an ideal solution, hopefully it will be possible to do it from the administration panel in the future; but it does save having to re-enter all the posts under the custom post type for the moment.

Currently on page 5 of 11« First34567Last »