JavaScript frameworks have been around since around 2005 (looking at the Prototype and jQuery history); their purpose is to allow developers to easily add interactivity to a page by creating a JavaScript abstraction layer to build from. The library takes care of any cross browser issues and quirks, allowing developers to focus on the “cool” stuff, building websites. As a developer I can’t thank all the library authors enough; without them my working life would be so much more stressful (and my hair would be even grayer than it is now!).

Once you know what a JavaScript framework is, it doesn’t take a genius to guess what a micro-framework is. Where as a full framework will have many tools (methods) a developer can use, a micro-framework only focuses on a very specific set of functions. I like the knife analogy: a full-framework like Dojo would be a Swiss Army knife where as a micro-framework could be considered a small pen knife. So which do you use in a project? This completely depends on the project in hand. I’ve put together a small list of pros and cons for each (let me know if you have any others):

Full Framework

• Pros
• Extensive set of features to cater for most eventualities.
• Consistent API across features.
• Large user base with lots of community support.
• Huge number of working examples available.
• Many developers to fix bugs and add additional functionality.
• Single point of reference of documentation.

• Cons
• Large code base could be very daunting to new users.
• Large page footprint.
• Many features of the library may not be needed.

Micro-Framework

• Pros
• Small page weight, usually less than 5K.
• Small set of features so very quick to pick up and use.
• Main focus on a very specific set of functionality.
• No feature creep or excess code.
• Use the right tool for the right job.

• Cons
• Small number of developers, bugs and issues may take a while to be fixed.
• Development of the framework may stop completely.
• May be very little support from the author and the community.
• Fellow developers in your team may not be familiar with the framework.
• Mixing micro-frameworks could conflict if badly coded.
• Multiple frameworks could mean multiple HTTP requests.
• Multiple points of reference for API docs.
• Multiple frameworks could lead to an overlap in functionality.

Many of the cons for micro-frameworks stem from using more than one at a time, but if you only plan on using one then they can be ignored.

Micro-frameworks caught my eye recently due to a couple of small projects I’d been working on. The projects all used vanilla JavaScript as there was no need for a helper library. I later realised I needed to attach a few events and manipulate the DOM but I wanted to avoid including jQuery in the project as I only needed a small fraction of its functionality. Luckily the MicroJS website came to the rescue.

The examples below are taken from Query, Bonzo, Events.js and Bean. As you can see the usage for each is pretty self-explanatory with lots more functionality is available from each library’s website. If you’re a jQuery user the syntax will look very familiar.

CSS selector and DOM utility

Events

I’ll be trying out a few more of these micro-frameworks for my personal projects in the future as the ability to select only the functionality you need really appeals to me. Are there any other micro-frameworks you’ve used that you’d recommend? Leave me a comment and I’ll check them out.

Update: It just so happens that a handy library website has emerged inspired by the MicroJS website called EveryJS. The website lists all library’s rather than just micro versions. Not all are listed but I’m sure they will be added soon so it’s one to keep your eye on.

After hours of frustration I stumbled upon a similar forum post with the answer:

Hours of frustration over such a simple fix. Sods law I guess. Add this code to the function you use to register your custom post type like so (usually in your themes functions.php):

No more 404 errors! Huzzah! One last tip: make sure you turn off any caching plug-ins (DB-Cache reloaded, Hypercache etc) before you start redeveloping your WordPress blog. Yes I made that mistake too! Yesterday evening is one I wish to forget…

Update: If you are adding custom taxonomies to your post types you may need to add the flush rewrite rules to the function when you initialise them:

Update 2: Adding flush_rewrite_rules in the places mentioned above will force a flush for every page load. This is bad! For a better solution see Kens comment below.

Alternatively you could add the flush_rewrite_rules where suggested and reload your page; this will flush the rewrite rules and fix the 404 errors. Remember to remove or comment out the flush_rewrite_rules line after as it’s no longer needed! Thanks Ken for this update.

Talking to a fellow developer recently he recommended Komodo Edit (free), which is essentially a cut down version of Komodo IDE (not free). The list of features it supports is huge, way to many to list in this blog post but here are the ones that really caught my eye:

• Supports multiple client-side and server-side technologies (HTML, CSS, JavaScript, PHP, Python)
• No fuss auto-completion on many languages (this was sometimes an issue for me in Aptana).
• Supports various JavaScript libraries for auto-completion (enabled via preferences).
• Support for code snippets at the click of a button; helps cut down on some of the monkey work.
• XPI extensions available. What makes Firefox so great is it’s many extensions. This is also possible in Komodo.
• There’s an extension for Zen coding available (yay!).

Komodo Edit Interface: simple but functional.

It hasn’t been all plain sailing though, there are a few features that I miss from Aptana:

• Integration with Subversion (I’m guessing this is a Komodo IDE feature).
• JSlint for the JavaScript, but I have seen an extension available so this may be possible.
• Aptanas auto-complete feature for CSS showed what browsers were supported by the typed property, which was quite handy at times.
• Aptana used to add the trailing “;” in CSS to properties (it’s amazing how much you miss this feature when it isn’t there!).

These aren’t major issues, certainly not big enough to keep me using Aptana. Hopefully as the Komodo community grows more extensions and (useful) features will be developed. As long it stays quick to load and use, I’ll be happy!

Update: After using Komodo for a few more days I’ve noticed a couple more little bugs / annoyances:

• Auto-completing a paragraph tag automatically inserts “class=’classname’”, not quite sure why I’d need a class for every paragraph. Maybe there’s a preference for this?
• When you paste in a long line of text it seems to “drop off” the end of the page and isn’t recognised by the horizontal scrollbar. The only way to solve this is to use the right scrollbar arrow. Very weird!
• When indenting multiple lines of code using the ‘Tab’ key it seems to fail and only indent the line directly below the selected text. Another strange one.

There’s a beta release of version 6 out available on the website, maybe they have been reported and fixed. I’ll install it and see what happens. Fingers crossed!

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:

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):

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:

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.

One of Aptana’s helpful features is the ability to generate code using the easy to access menu bar at the top of the code window (see image):

Generate and wrap code at the touch of a button

A superb feature it must be said, but it is totally eclipsed when you start using the Zen Coding JavaScript Library. Zen Coding, written by Sergey Chikuyonok isn’t a JavaScript Library in the traditional sense, it isn’t uploaded and linked to in your web page; it’s installed as a plug-in for your selected text editor. As you can see from the list there are many versions available, so you aren’t restricted to only Aptana.

Let me explain what it does first, then I’ll show you how to install it (for Aptana). As a Front End Web Developer you will often find you’re writing out the same blocks of code again and again. You can just copy / paste then modify, but even that’s quite slow and tedious. Zen Coding uses a technology that you will be very familiar with: CSS selectors. It may seem confusing at first, but once you see it in action it makes perfect sense. Here are a few code examples I use all the time:

Using simple CSS selectors we’ve been able to quickly generate an unordered list that can be used for example, as a page navigation. You can even use more advanced selectors like siblings and abbreviated groups to generate more advanced HTML:

It may take a little while to get into the routine, it’s all to easy to slip back into typing the code by hand; but once you do you can build the basic mark-up of a page in a matter of minutes.

There’s a very informative article on Smashing Magazine from last year which you may find useful if you plan on investigating Zen Coding further; I highly recommend adding it to your “toread” list. There are so many more functions available that I haven’t even touched on in this article, you will be amazed.

Now that you’ve seen Zen Coding in action you may be wondering how you install it for use with Aptana. Well luckily it’s dead simple. First create a ‘new project’ in Aptana, call it whatever you like e.g. ‘Zen Coding’:

Within the new project create a scripts directory and copy the Zen Coding JavaScript into into the directory. That’s it you’re done! Restart Aptana and start using Zen Coding. Once you’ve typed in a string of CSS selectors you wish to convert to HTML, hit CTRL + E (Expand Abbreviation) and it will do the rest for you. One thing to note, you must keep the new project you’ve just created open at all times, else Aptana won’t be able to access the scripts.

You can customise the key you use expand an abbreviation by editing the “Key” value in “Expand Abbreviation.js”. For more information on available keycodes see the Aptana documentation here.

Hopefully you find Zen Coding useful, it’s certainly changed the way I code on a day to day basis.

A feature that I saw on another site (although I can’t remember which) was when a user rolled over a code box it would expand to fit the code, allowing the user to see everything. Cool little addition, so I decided to create my own using jQuery. I’ve taken some of the code from the plug-in and pasted it below so you can see it in action:

Since this action is fired on hover, I didn’t want the code boxes expanding immediately every time a user hovers over a box; as just scrolling down the page would expand the boxes which would become extremely annoying. The boxes should only expand when the cursor is left over the box; lucky there’s a plug-in for jQuery that already adds this functionality, it’s called $.event.special.hover.

Special hover simply replaces the standard hover event with one that monitors the speed of the cursor over a set period of time. If the cursor speed drops below the threshold the hover event fires. This is enough to stop random hover events firing when a user navigates over the page, simple!

I’d be interested to see if the code works for others using CodeColorer, there’s no reason why it shouldn’t. Download the code, give it a try and let me know what you think.

Some people may have deleted the default account for security reasons (very good idea) or they have more that one administrator account. After hunting about on the WordPress forums for a while I managed to piece together a little snippet of code to do this:

I placed it into it’s own function within my plug-in Class so it can be called whenever needed. It could also be used for finding users with different levels in WordPress if needed. If you wanted you could modify the function to accept an argument admin_user_ids($the_user_level_i_need); allowing you to get the IDs of users at whatever level you like.

There seemed to be a few ways of doing this on the forums, but this one works for me at the moment.

First thing I had to do (for my own sanity) was move the layout template outside of the CMS and into an external file. This gives you 2 advantages, you get to use whatever code editor you usually use to edit the template, and the file is then exposed so it can be committed to version control like any other file. It is simple to do with some very basic PHP:

Paste that code in to your layout with a content type of “text/html” and you are done.

The second code snippet allows you to generate a specific ID and class for every page; great if you need some CSS style / JavaScript hooks on different pages.

The first if else statement simply sets the home ID to “home” then every other page to “page-slug-name-here” (slug is set in the ‘Meta’ tab). The second one I use on ‘article’ pages; it simply says if the current page has a parent and its parent is the services page add a class of “event”. So now I can style every article page in the same way, and it’s safe for a client to add event pages themselves.

You may ask why the “$this->parent()”; this is to stop the site breaking when you hit the home page since the homepage has no parent, it is the parent of all other pages.