Intereactive Web Design - Sugar Land, TX

When diving into PHP frameworks one of the handiest set of functions/methods you will find are the “Helpers“. The reason I like them so much is because they can really shorten the time it takes to write your code. A quick call to a helper can output lines and lines of HTML without actually writing it.

Doing more and more CSS/XHTML development brought to light that sometimes there might be a need to wrap an image with a span or div element to produce a dropshadow effect or to position it how you want. Chris and I were having a discussion about this and he came up with an idea of adding some Javascript “helpers” to speed up the coding of our CSS/XHTML.

Let me give you an example to help clarify what I’m talking about. Let’s say we have an image and we need that image to have a dropshadow. To do this we need to wrap it in a span tag so that our CSS works properly. So everywhere we want a dropshadowed image we would have to have something like this:

<span><img src = "image.png" /></span>

But we could easily write a javascript function (in our case we use jQuery) to have it auto-wrap all img elements having the class “dropshadow” with span tags.

$('img.dropshadow').wrap("<span></span>");

This simplifies and speeds up the HTML we have to write, because all we have to put into our templates is an img tag. In this case it doesn’t save a ton of time, but when you think about it in terms of styling forms with images or changing buttons to use different image types or styles you really begin to save a lot of time. And the best part is that you can keep things semantically correct. The markup doesn’t need span tags to keep the semantic meaning of having an image. The spans are there just to add the detail of the dropshadow in.

I’ve seem this methodology used in many plugins, so we’re not coming up with any revolutionary. But the point of this post is to try to push developers that have the convenience of using javascript, to use it to speed up their development. In an upcoming post we’re going to be sharing our use of a helper that simplifies how we style many different buttons in Mosaic. Hopefully that will show a real world example where it is literally saving us hours of work, over the course of building the app, everywhere we have need of a button.