Minute44 - Dan Schonhaar

In case you haven’t been paying attention, we appear to be in a recession, and during these hard times it can’t hurt to work on the old skill set and diversify a little so that’s exactly what I’ve been doing. If you’ve been following over the past few months I’ve taught myself how to build a WordPress theme and have actually recently done one as a freelance job. Now however, I thought it was time to turn my hand to something else. When it comes down to it, building a WordPress theme isn’t much more than coding an xHTML and CSS website so I wanted to learn something a bit more… you know, scripty.

I’ve never been good at programming. I do tutorials and it goes something like “Okay, I get it…. yeah, got that…. cool, I understand…oh, wait… what?” then I get frustrated and give up so doing a little research online I came to the conclusion that jQuery was the way to go. JQuery isn’t a scripting language in it’s own right, it’s a JavaScript library, albeit a very comprehensive and fully extensible one. It’s tag line is “Write less, do more.” and from what I’ve learned so far that is absolutely the truth. I’m still at the very early stages of learning the library thanks to the amazing tutorial videos over at themeforest.net but I’m already in awe of how simple it makes things. Things like sliding or fading show/hide animations and advanced selectors are cut down to just one or two lines of code. Using plain old JavaScript would take an absolute age. Obviously I’m only scratching the surface of what the library is capable of, and as I said before it is fully extensible with new add-ons being released all the time.

What makes jQuery so simple is that it uses CSS selectors to refer to elements on the page so it allows you to refer to specific parts of your HTML in the exact same way you would refer to them in your CSS; either by saying what element it is (p or a or li) or by their class or ID (.class or #id) not only does this make things way faster, it really helps people like myself learn the library because I’m already experienced in CSS. Look at the example below. All that is doing is saying that when the link with an ID of ‘trigger-out’ is clicked, then fade out the div with an ID of ‘box’ and as you can see those elements are referred to in the same way as you would in CSS; #trigger-out and #box. Simple.

Another beautiful thing about this is that you can use jQuery to quickly add or remove CSS classes to any element you want and as such allow user interaction to influence the appearance of the whole site. This can be for something as simple as allowing users to choose what colour they want to view the site in all the way through to giving excellent visual feedback when validating forms or clicking/hovering over links. of course, this could all be done without jQuery but… remember “Write less, do more”. Why anyone would want to do things like this the hard way, I have no idea.

So what do I intend to do with this stuff? Well, I certainly hope to include some nice jQuery UI stuff in my upcoming blog redesign for sure. At the moment I’m just thinking about applying some cool show/hide transitions on some menus and also a nice ‘photo frame’ type thing to display my latest photos. Also, I can’t really talk about it on here, but there may well be some scope for me to apply these skills to my day job as well. That’s not forgetting, of course, that it’s just a nice feather to have in ones cap.

If anyone reading this knows of any handy jQuery resources that I should take a look at then please, feel free to post them in a comment and I’ll be sure to check them out. Also, if you’re at the same sort of stage as me and have anything to say, please do.

Tutorials at jQuery.com

Themeforest.net blog