As an experiement I ported over my Accessible Numeric Stepper into a jQuery widget and added some accessibility enhancements and new features in the process.

This widget utilises ui.core.js - a factory method object for creating widget classes. Widgets in jQuery are essentially plugins at heart but built to follow stricter coding standards in order to unify the underlying quality between developers. It also adds convenient mouse interaction classes and option settings among other things.

The result is jQuery Numeric Stepper an unofficial jQuery UI widget. Features include:

• min, max, start and step size settings
• supports decimal values and decimal step sizes
• supports currency values
• keyboard and mousewheel interaction - increment/decrement values via cursor keys, +/- keys and mousewheel

Download latest source code here

Bugs? Missing feature? Code improvements? Let me know!

Which do you prefer? maybe all? maybe none? It's totally up to you and down to individual preference. The same could be said for Web Frameworks. This choice has come at a time when I am deciding on a Web Framework to use for a number of projects. So this post should hopefully put some sense into the one I go for...

So what is a web framework?

A Web Framework, short for Web Application Framework, is a collection of re-usable and easily extendable code in which developers could build web applications. A framework takes care of all the mundane tasks involved in development and follow well practiced methodologies such as MVC, KISS, DRY or any other code of practice of the framework authors choosing. A good web framework removes the head-banging, keyboard-bashing, screen-swearing parts of day-to-day development leaving you with just the fun bits.

There are a lot of web frameworks, as there are fruits. The three that most interest me at the moment are: Ruby on Rails, Django and The Zend Framework.

Ruby on Rails (RoR)

RoR is like the street kid of the Web; lovers of skateboards and graffiti; Cool, trendy and think they are the best! RoR is a full-stack Web Framework, meaning you either use it entirely or not.

RoR is very well documented with many popular web applications running on it.

Django

Django is like the new kid on the block with a rich dad. Django has actually been around for quite some time, born more or less the same time as RoR but has been living in obscurity. The recent news of Google AppEngine and its preference for Python has really boosted the Django community. Django was written entirely in Python from scratch even though there are myriads of existing Python libraries doing the same web tasks disparately.

Django comes built-in with an Administration area which is a big plus over RoR as in most cases there needs to be some sort of secure area for the client or customer. Django makes that easy.

The Zend Framework (ZF)

ZF is like a typical kid who gets the grades and progresses through high school without problems. PHP is about being everywhere and catering for everyone. ZF is slightly different to the other two as it's more a library of components rather than a full-stack framework. You use what you need and could even integrate any component into existing frameworks such as CakePHP or CI. ZF is also powerful enough to be a full-stack framework in itself if you choose to build your entire web application on it.

Myth

It is a typical myth that using RoR instantaneously means you have a winning solution and enforces you to create cool & friendly websites. The fact of the matter is Rails has been marketed so well and hyped to a point it has attracted all the cool street kids who are using their graffiti skills on Rails. If these kids chose PHP or Django or whatever, they will produce the same stunning results because of their exceptional talent, not the framework they chose.

Lastly...

Something that annoys me immensely is when people compare frameworks with snotty remarks like "My one is better than yours", "That framework is totally un-cool", "Using my framework you can do this in 5 mins, how long does it take in yours?"

As with the recent consensus between JavaScript pioneers; it does not matter what javascript library you use or choose not to use. The key is to use one that's right for you, your team and the project. I tend to take this stance with my frameworks too.

Obviously a framework promoting rapid development and prototyping, such as RoR and Django, makes development easier and helps developers concentrate on the more important aspects of a website - user interaction and website architecture.

Lastly, my choice is Django; at least for the current projects in hand anyway.

Found this CSS hack for Safari 3 today which can be handy from time to time:

 
@media screen and (-webkit-min-device-pixel-ratio:0){
    /* Safari 3 specific styles go here */
}
 

Most of the time if something looks good in Firefox 2 there's a 99% chance it will in Safari 3 too. So use this hack sparingly and only when absolutely necessary.

Free WiFi is everywhere now. Most coffee shops in central London have one; you can even get it at McDonald's in Regent street. But next time you're accessing free and open WiFi aka unsecured WiFi; STOP and think for a second. Consider the following:

• Do you have anything in your shared / network folders that might be sensitive, e.g. work documents, family photos, username/passwords? If the answer is yes then move that data into a secure folder before connecting. Once you are connected you are under the same LAN network as everyone else in the coffee shop so all shared stuff will be available to everyone
• Are you receiving email via SSL? No? Then don't open your email client because all communication to and from your email server will be open to hackers who do not have to do much hacking as all communication is sent in plain-text.
• Don't use web based email if it does not support https for the same reason above. Most web based email services don't support https with the exception of Gmail.

I'm sure there are other security holes but these are the three that came to mind. Sorry for scaremongering. Real as the threat may be I'm sure the chances of getting hacked in a coffee shop is pretty low!

Jeremiah Owyang's post on Email Consumes Us gives us food for thought on the ever changing tide of communication. Email can become very unmanageable it seems; although only last year many were singing its praises saying that Email is the best invention and all good web applications basically mirror an Email architecture. So if Email is no longer a viable solution in this hyper-connected world, what is? Is The Grid our only hope?

For those who have not heard, The Grid is a superfast internet 10,000 times faster than current broadband speeds.

The Grid could spawn a whole new generation of web applications and facilitate a new way of communicating in the future bringing deaf to the humble Email.

WebAIM recently released the WAVE Toolbar for Firefox, which augments their free online accessbility evaluation service, known as WAVE. WAVE is currently in version 4, much like Cynthia Says but with a focus on developer friendliness by overlaying results visually above the page you are testing. I think WAVE is a pretty cool idea. The fact of the matter that no automated tool can ever tell whether a website is truly accessible means it always boils down to human assessment in the end. So a visual tool is much welcomed as the explanations you get from Cynthia are quite cryptic at times.

For more power in your toolbar I recommend trying out the Firefox Accessibility Extension. This one is primarily an assistive tool for people with disabilities browsing the Web but also doubles up as a great accessibility evaluation tool for developers.

Yesterday's featured tutorial on Ajaxian.com was titled: Hacking transparent PNG support into IE6 with IE PNG Fix, CSS and jQuery by Brian Dillard.

I wonder how this tutorial got onto Ajaxian as the topic is so much out of date. Ajaxian has always been a place of inspiration and a pit stop for the latest and greatest in the world of JavaScript and the whole Web scene. I was a little put off by this tutorial, though out of curiosity took a dive in anyway.

The title alone is a mouthful to say the least and a glimpse of the trauma you will go through if you make the effort to read through the two part series. The tutorial specifically deals with how Pathfinder implemented transparent rounded corners on their new website. I know, nothing new. However, the worst is yet to come...

The transparent corners on Pathfinder's website are actually background PNG32 images. IE6 doesn't support PNG32 transparency so IE PNG Fix came to the rescue. What IE PNG Fix does is it finds all PNGs contained within img tags and backgrounds, and adds some additional styles on-the-fly to present those PNGs via the progid:DXImageTransform.Microsoft.AlphaImageLoader filter. Then to overcome yet another limitation introduced by AlphaImageLoader, jQuery was used to append an img tag on-the-fly below the rounded box to form the bottom corners.

OK, it does the job so why whine about it? Well it's an overkill if you think about it. Firstly IE6 has a problem with garbage collection when it comes to CSS filters. So the more AlphaImageLoader PNGs you have on a page the more unrecoverable memory you snatch away from your IE6 users. Secondly jQuery and IE PNG Fix are used in twine to tackle a single superfluous design problem, which adds a lot of unnecessary bloat. Pathfinder have truly fallen into the PNG transparency trap!

In the spirit of progress enhancement, which they avidly promote, they should have ignored IE6 and gave those users square boxes! However, for this particular case we're in luck as there is an alternative—convert those dreaded PNG32s into transparent PNG8s!

To demonstrate proof of concept take a look at this screenshot below. On the left is Firefox, on the right is IE6:

Not much difference aye? Apart from the aliased edges, which to be honest isn't all that bad, they look pretty similar. I don't think jagged edge corners are a sign of an amateur at work. I think it's a reasonable sacrifice. By using PNG8 your corners won't degrade as beautifully but they will degrade flawlessly. No hackery, less bloat; thereby saving memory, bandwidth and money.

Finally, I'm not suggesting we convert all our transparent PNGs into PNG8 format. I'm really just questioning whether the solution Pathfinder is presenting is the best solution and whether Ajaxian should be promoting it as it will no doubt lead many astray and fall into the PNG transparency trap.

Here are two very good SitePoint articles on how to make the most of PNG8 transparency in IE6:

• PNG8 - The Clear Winner
• Making ‘IE6-friendly’ PNG8 Images

Update 2008-06-17: Interesting... Transparent PNGs can even deadlock IE6! Yet another reason to avoid this kind of hackery if you can!

I'm sure no one noticed but Yelotofu got naked for about 1 hour today because the CSS Naked Day plugin I had installed last year thought today was the day to strip off!

Well, this years' CSS Naked Day will be held on the 9th of April. This time Yelotofu will be getting butt naked for 48 hours!

Come on, Join in the fun!

Codenamed "Brecker", is a milestone release with a tone of improvements.

They have totally revamped the Admin area. It looks much slicker now and the publishing process feels much more pleasant, it wasn't even bad before! But it has improved ten-folds with more Web 2.0 goodness.

I'm especially excited about the new stuff they have added. With the Media library you can now create a gallery in any post/page using the new Shortcode API. Visitors can comment on your photos. The gallery display is a bit bland though, but I think they did this on purpose as gallery display is something the Template should handle. I can see many Lightbox2 for WordPress plugins popping up very soon!

WordPress is fast becoming a more viable CMS solution in general due to the introduction of the Media Library and a better publishing interface. The Shortcode API also gives developers ability to directly inject PHP code into content areas allowing for more sophisticated displays and embedded widget add-ons.

I haven't talked about this before, but the Portfolio area on this site is actually a WordPress plugin. It's a pain to manage as it uses XML for data storage and XSL to transform the data into what you see. When I get some time I hope to build a more robust Portfolio plugin leveraging WordPress' new features so I no longer have to mess around with XML, FTP and image resizing!

You can read more about the release at Wordpress.org

What is CSS diagnostics? It's a method of applying styles to elements in your markup to catch standards compliance issues. A way of ensuring you don't leave any serious accessibility holes and a visual deterrent for web authors editing pages with diagnostics switched on.

Here are some resources I found useful in understanding the practicality of this pioneering concept:

• Diagnostic styling
• CSS Tools: Diagnostic CSS
• Helping your client maintain markup quality
• Find depreciated elements using CSS

The only problem with CSS diagnostics is that it relies on the CSS capabilities of a browser to find issues. So if your browser is less capable, meaning it doesn't understand the diagnostic styles, then it negates the idea totally. Mind you, we're at a point in CSS support whereby this is becoming less and less a problem but it is still a potential one.

Luckily CSS diagnostics isn't the be all and end all of diagnostics. We have the king of diagnostics — Firebug, Web Inspector for Safari and more recently the much improved IE8 Developer Toolbar. And if you're looking for a cross-browser solution there's always the brilliant XRAY. Oh, how spoilt we all are!