BlogmyQuery – BMQ

It’s quite obvious that the smaller the files that make up your website are, the less time your visitors will wait for them to download. One way of reducing file sizes is minimising JavaScript and CSS files by removing comments and whitespace, among other things.

To do that, you can either let the server do it for you or minimise the files yourself before uploading them to the server. Letting the server do it automatically is probably the most convenient way since you don't have to remember to do it. But it isn't practical or possible for everyone to use something like minify, so sometimes you'll need to do it manually.

That may sound like more trouble than it's worth. Luckily for us TextMate users there's a handy YUI Compressor TextMate bundle that makes it almost as transparent as the server-side solution.

Read full post

Posted in CSS, Coding, JavaScript.

Spencer, the developer here at Function, has been working on putting together a simple ticket or bug tracking WordPress theme. The theme allows for easy creation of a ticket/support system right within WordPress, for free.

Spencer worked on this entire project himself, it was a one man project, and it turned out great, so please direct all comments and praise towards him.

Theme Demo & Download

View the Demo | Download Theme Free.

To get a true feel for the theme and it’s potential make sure you check out the demo. For more details, as well as a download link please read Spencer’s Post and make sure you let him know what you think of the theme.

Tweet

About the Free Theme

It’s a lightweight solution to a common problem, perfect for individuals or small teams to keep on top of tickets, or bugs, or any other uses you can think of.

It can be built on or expanded for much more extended use, but some of it’s standard features make it real alternative to other expensive systems.

The idea is to provide a base “framework� of sorts, that creates the core functionality needed for ticket tracking, but leaves room for the user to take it in any direction they want.

Thanks to Spencer

Once again I’d like to thank Spencer who worked on this full project himself, please follow him on Twitter and let him know your thoughts on the theme.

For anybody who may have missed it, last week we announced on the WPBundle progress blog that we were joining forces with the awesome WooThemes on our latest project, the WordPress Bundle, or WPBundle.

The new partnership means an even more exciting future for the project that we’ve put so much love into.

Brief Overview

The partnership allows us to offer our customers the save level of support that people know and love over at WooThemes. The guys at WooThemes have a solid support system in place that is well known for it’s high quality and efficiency, and now anyone who buys from WPBundle will receive the same level of support at no extra cost or monthly fee.

All of our themes will now be built on the WooFramework, the exact same framework used in all of the WooThemes products.

The Framework allows some extended controls, features and functions and allows us to have a standardized framework  across all of our own themes, which is great news for future updates and additional features.

Anybody who has used a theme by WooThemes before will be instantly familiar with how our themes will work, but likewise, for new customers you’ll find it easy to pick up, with everything already well documented.

We’re still in full control of the design & development of the themes, so none of designs will change, and none of our ideas will have to change as a result, so it’s a very positive partnership that helps us move forward with the project that we’ve put so much work into already. Exciting times ahead for sure.

Full Details

We’ve put together the full details of the deal and what it means for the project, or you can also read ho WooThemes announced it on their blog.

There’s still a lot of details & announcements to come, but for now we’re happy to have such a big player on board to help us on our journey, and it’s amazing to have some of the same amazing things that people love about WooThemes available now to our own customers.

Follow the Progress

As part of the build up to the launch we’re sharing previews on the progress blog. Here’s some of what we’ve been working on:

Each new shot gives you an insight into the quality of design work that goes into each theme, but also gives you a chance to see us build the bundle and see some of the ideas behind each one.

Make sure you follow us on Twitter too for more updates.

By Callum Chapman

Whether you’re just starting out in the graphic or web design industry, or you’ve been in it for years, the chances are there will occasionally be a time where you want to get a feel for a particular type of application (maybe something similar to Cinema 4D or Adobe Illustrator) before spending big bucks on it. Maybe sometimes you just need it for a very small job, in which case spending the big bucks on it just simply isn’t worth it. Or maybe you’re a student with not much money (which is usually the case) and just want an application that will do the job but not cost you an arm and a leg!

If you’re one of these people, this list is for you – and there is probably an application or two in here that those of you who are not looking for freebies will love too. The post is full of open source applications for Mac OS X, Windows, Linux, iPhone/Pad and Android phones, from development apps, painting and image editing apps and nifty little tools that come in handy from time to time.

Development Apps

Notepad++ | Windows
Notepad++ is a free source code editor that replaces Windows’ standard Notepad editor, and is available in several different languages across the globe.

TextWrangler | Mac OS X
TextWrangler is a powerful general purpose text editor, HTML editor and Unix and server administrator’s tool. It is a very basic text editor with powerful but very simple functions.

Titanium | Windows, Mac OS X, Linux
Titanium is a free and open source application development platform, and lets you create native mobile, tablet and desktop application experiences using existing web skills you may already have such as Javascript, HTML, CSS, Python, Ruby and PHP.

Smultron | Mac OS X
Smultron is a text editor which is both easy to use and powerful. It is designed to neither confuse newcomers nor disappoint advanced users. It works for a whole variety of needs such as web programming, script editing or making a simple to-do list.

SilverEdit | Android
SilverEdit is a text editor for your Android mobile with support for creating, opening and saving HTML, CSS, PHP, XML and TXT documents.

SimpleCSS | Windows, Mac OS X
SimpleCSS allows you to easily create CSS files from scratch and/or modify existing ones with ease using a familiar “point and click” interface. You can also manage multiple CSS projects at any one time.

Komodo Edit | Windows, Mac OS X, Linux
Komodo Edit is a cross-platform text editor that works on all three major operating systems. It supports PHP, Python, Ruby, Perl and Tcl, plus support for other web development languages such as CSS, HTML, Javascript and template languages such as RHTML and Django.

FTP Apps

FileZilla | Windows, Mac OS X, Linux
FileZilla is a free, fast and reliable cross-platform FTP, FTPS and SFTP client with lots of useful features and an intuitive graphical user interface.

Cyberduck | Mac OS X
Cyberduck is a libre, open source FTP, SFTP, WebDAV, Cloud Files, Google Docs and Amazon S3 browser for Mac OS X. It features an easy to use and attractive user interface.

AndFTP | Android
AndFTP is an Android application for mobile devices. It is a full FTP client with FTP, SFTP and FTPS support – now you can upload and download files on your Android!

net2ftp | Web Application
Net2ftp is a browser based FTP client with similar features to desktop solutions. You can navigate your FTP servers, upload/download files, zip/unzip files, install software, and edit text and html files.

Flickr Uploadr | Windows, Mac OS X
Flickr Uploadr is a super easy way to upload your images to Flickr directly from your desktop without the need to actually visit Flickr’s website. You can add edit your images titles, tags and descriptions as well as add your images to groups, too.

Image Editing Apps

GIMP | Windows, Mac OS X, Linux
GIMP is a powerful open-source image editing app with similar features to Adobe Photoshop, such as a customizable interface, photo enhancement features and digital retouching.

GIMPshop | Windows, Mac OS X, Linux
GIMPshop is a modification to the above application, “GIMP”, sharing all of GIMP’s features. The biggest modification is that GIMP has been customized to look and feel just like Adobe Photoshop, so it’s a great application to use if you’re already familiar with or use Photoshop on a regular basis.

Paint.net | Windows
Paint.net is a Windows based image editor with an interface that Windows users will already be familiar with. The application supports layers and has a wide variety of tools.

Active Pixels 2 | Windows
Active Pixels 2 is another Windows based image editor. Version two includes support of over 100 graphic formats with web-safe options, as well as layers, effects, gradients and brushes.

Aviary Falcon | Web Application
Aviary Falcon is a superb little image editor that allows you to create images from scratch and edit existing images and photographs. The application is very simple, but is speedy and great for minor edits on the go, and ideal for painting.

Aviary Phoenix | Web Application
Aviary Phoenix is basically a much more complex version of Falcon (shown above). This web application is much more advanced with the ability to work with layers and a bunch of effects, and takes the same kind of approach to image editing that Photoshop does.

Adobe Photoshop Express (Mobile Photoshop) | iPhone, iPad, Android
Adobe Photoshop Express (previously Mobile Photoshop) is a simple and super easy to use application for your iPhone, iPad and Android based mobile. With the application you can crop, rotate and change the colors of your photos, as well showing off with art effects such as glows, sketches and vintage layer styles.

iPaint | Mac OS X
iPaint is a painting application for Mac OS X, based off a former painting application called Paintbrush that hadn’t been updated for a while. The application is a simple one, and is designed for painting and nothing more.

ChocoFlop | Mac OS X
Although ChocoFlop has now been discontinued and there is no (new) support, the application can still be downloaded. ChocoFlop allows your to edit your photos and design pretty things using Apple’s CoreImage technology, and takes advantage of your Mac’s graphics card.

Adobe Ideas 1.0 | iPad
Adobe Ideas is a digital sketchbook, somewhere you can capture your ideas anywhere you go (so long as you have your iPad!). It is a professional companion to Adobe Illustrator and Photoshop.

Krita | Windows, Mac OS X, Linux
Krita is a KDE program for sketching and painting, offering an end-to-end solution for creating digital painting files from scratch.

Pixia | Windows
Pixia is the English version of a popular Japanese painting and retouching software for full color graphics. It supports mask and layer functions in a similar way to Photoshop all packed into a user friendly interface.

Picnik | Web Application
Picnik is a simple web-based application that allows you to auto-correct your photographs, as well crop and resize them. Other features include being able to adjust your photos exposure levels, colors, sharpen your photo and remove red-eyes.

Splashup | Web Application
Splashup is yet another web application, offering multiple image editing, pixel-level control and layers. There is also a “light” version for those who are looking for a more fun and casual image editing experience.

CinePaint | Windows, Mac OS X, Linux
CinePaint offers support for 8-bit, 16-bit and 32-bit color channels of deep paint, something that a lot of other free painting applications cannot open. The app is easy to use and similar to Photoshop, and is available for Windows, Mac OS X and Linux.

Vector Editing Apps

Inkscape | Windows, Mac OS X, Linux
InkScape is the most well known open source vector graphics editor and has very similar capabilities to professional pieces of software such as Adobe Illustrator, CorelDraw and Xara X.

Aviary Raven | Web Application
Aviary Raven is a very powerful web application that works with vector files. If you are familiar with Illustrator, Raven is a great choice.

Alchemy | Windows, Mac OS X, Linux
Alchemy is a very interesting vector-based editing application that makes use of a handful of interesting features that other apps don’t. For example it has an intentionally reduced level of functionality; no undo, no selecting and no editing. You can also produce shapes with your voice, different noises create different widths and forms of lines.

Color Scheme & Management Apps

Color Stream | iPhone
Color Stream is a lovely color tool for the iPhone which lets you create and store color palettes either from scratch or generated from a photograph or piece of artwork.

Adobe Kuler | Web Application
Adobe Kuler is an official Adobe web-based application that allows you to browse existing and create/save your own color schemes.

Palettes | iPhone
Palettes is a powerful productivity tool for creating and maintaining color palettes. Great for creating color schemes when you’re on the go.

Aviary Toucan | Web Application
Aviary Toucan is very similar to Adobe Kuler, a web-based app where you can create your own color schemes and save or export them as files ready to use in your documents.

COLOURlovers | Web Application
COLOURlovers is more of a community website than it is an actual application, however certain elements of it (such as the color and pattern generator) perform in very similar ways in which Adobe Kuler and Aviary Toucan do, with the added extra of having a community to rate your schemes and patterns.

3D Rendering Apps

3D Canvas | Windows
3D Canvas is a real-time 3D modelling and animation tool that incorporates an intuitive drag-and-drop approach to 3D modelling.

Blender | Windows, Mac OS X, Linux
Blender is a free open source 3D content creation suite available for all major operating systems under the GNU General Public License. The application is top quality and is up there with the best of the rendering applications that cost thousands of dollars.

Typography Related Apps

Adobe Type Manager Light | Windows, Mac OS X
Adobe Type Manager Light is a system software component that automatically generates high-quality screen font bitmaps.

FontExampler | Mac OS X
FontExampler is a simple but useful application that takes sample text entered by the user and generates a list of that text in all available fonts on your system.

FontList | Windows
FontList is very similar to FontExample (above) only for Windows. Instead of producing a list right in front of you, it will produce a HTML file which you can then open to see your dummy text in all the different fonts on your system.

WhatTheFont | iPhone
WhatTheFont is a great little iPhone application by MyFonts.com. It allows you to take photographs of a particular typeface using your iPhone’s camera and then determine similar typefaces which you can then download for your next project.

Handy Miscellaneous Apps

Paparazzi! | Mac OS X
Paparazzi! is a small utility application for Mac OS X that allows you to take full page screenshots of web pages, ideal for putting in your portfolio.

Aviary Talon | Web Application
Aviary Talon does the exact same thing as Paparazzi! (above) but is available as an online application as well as a Firefox plugin.

ResizeMe | Mac OS X
ResizeMe is a lovely little batch image editor for Mac. It allows you to rename, resize, scale, crop and flip images all in batch, as well as apply basic effects such as drop shadows and text watermarks. This nifty little application speeds up your workflow a great deal.

Ruler Plus | iPhone
As it says on the tin, Ruler Plus is a simple ruler application for your iPhone, measuring both inch and centimeters.

Thinking Space | Android
Thinking Space is a mind mapping application for Android phones which allows you to map your mind on the go, where ever you are.

FreeMind | Windows, Mac OS X, Linux
FreeMind is a premier free mind-mapping application written in Java that allows you to create mind-maps easily without wasting all that paper!

jQuery plug-ins provide an excellent way to save time and streamline development, allowing programmers to avoid having to build every component from scratch. But plug-ins are also a wild card that introduce an element of uncertainty into any code base. A good plug-in saves countless development hours; a bad plug-in leads to bug fixes that take longer than actually building the component from scratch.

Fortunately, one usually has a number of different plug-ins to choose from. But even if you have only one, figure out whether it’s worth using at all. The last thing you want to do is introduce bad code into your code base.

[Offtopic: by the way, did you know that we are publishing a Smashing eBook Series? The brand new eBook #3 is Mastering Photoshop For Web Design, written by our Photoshop-expert Thomas Giannattasio.]

Do You Need A Plug-In At All?

The first step is to figure out whether you even need a plug-in. If you don’t, you’ll save yourself both file size and time.

1. Would Writing It Yourself Be Better?

If the functionality is simple enough, you could consider writing it yourself. jQuery plug-ins often come bundled with a wide variety of features, which might be overkill for your situation. In these cases, writing any simple functionality by hand often makes more sense. Of course, the benefits have to be weighed against the amount of work involved.

For example, jQuery UI’s accordion is great if you need advanced functionality, but it might be overkill if you just need panels that open and close. If you don’t already use jQuery UI elsewhere on your website, consider instead the native jQuery slideToggle() or animate().

2. Is It Similar to a Plug-In You’re Already Using?

After discovering that a particular plug-in doesn’t handle everything you need, finding another plug-in to cover loose ends might be tempting. But including two similar plug-ins in the same app is a sure path to bloated JavaScript.

Can you find a single plug-in that covers everything you need? If not, can you extend one of the plug-ins you have to cover everything you need? Again, in deciding whether to extend a plug-in, weigh the benefits against the development time involved.

For example, jQuery lightbox is a nice way to enable pop-up photos in a gallery, and simpleModal is a great way to display modal messages to users. But why would you use both on the same website? You could easily extend one to cover both uses. Better yet, find one plug-in that covers everything, such as Colorbox.

3. Do You Even Need JavaScript?

In some situations, JavaScript isn’t needed at all. CSS pseudo-selectors such as :hover and CSS3 transitions can cover a variety of dynamic functionality much faster than a comparable JavaScript solution. Also, many plug-ins apply only styling; doing this with mark-up and CSS might make more sense.

For example, plug-ins such as jQuery Tooltip are indispensable if you have dynamic content that requires well-placed tooltips. But if you use tooltips in only a few select locations, using pure CSS is better (see this example). You can take static tooltips a step further by animating the effect using a CSS3 transition, but bear in mind that the animation will work only in certain browsers.

Avoid Red Flags

When reviewing any plug-in, a number of warning signs will indicate poor quality. Here, we’ll look at all aspects of plug-ins, from the JavaScript to the CSS to the mark-up. We’ll even consider how plug-ins are released. None of these red flags alone should eliminate any plug-in from consideration. You get what you pay for, and because you’re probably paying nothing, you should be willing to cut any one a bit of slack.

If you’re fortunate enough to have more than one option, these warning signs could help you narrow down your choice. But even if you have only one option, be prepared to forgo it if you see too many red flags. Save yourself the headache ahead of time.

4. Weird Option or Argument Syntax

After using jQuery for a while, developers get a sense of how most functions accept arguments. If a plug-in developer uses unusual syntax, it stands to reason that they don’t have much jQuery or JavaScript experience.

Some plug-ins accept a jQuery object as an argument but don’t allow chaining from that object; for example, $.myPlugin( $('a') ); but not $('a').myPlugin(); This is a big red flag.

A green flag would be a plug-in in this format…

$('.my-selector').myPlugin({
 opt1 : 75,
 opt2 : 'asdf'
});

… that also accepts…

$.myPlugin({
 opt1 : 75,
 opt2 : 'asdf'
}, $('.my-selector'));

5. Little to No Documentation

Without documentation, a plug-in can be very difficult to use, because that is the first place you look for answers to your questions. Documentation comes in a variety of formats; proper documentation is best, but well-commented code can work just as well. If documentation doesn’t exist or is just a blog post with a quick example, then you might want to consider other options.

Good documentation shows that the plug-in creator cares about users like you. It also shows that they have dug into other plug-ins enough to know the value of good documentation.

6. Poor History of Support

Lack of support indicates that finding help will be difficult when issues arise. More tellingly, it indicates that the plug-in has not been updated in a while. One advantage of open-source software is all of the eye-balls that are debugging and improving it. If the author never speaks to these people, the plug-in won’t grow.

When was the last time the plug-in you’re considering was updated? When was the last time a support request was answered? While not all plug-ins need as robust a support system as the jQuery plug-ins website, be wary of plug-ins that have never been modified.

A documented history of support, in which the author has responded to both bug and enhancement requests, is a green flag. A support forum further indicates that the plug-in is well supported, if not by the author then at least by the community.

7. No Minified Version

Though a fairly minor red flag, if the plug-in’s creator doesn’t provide a minified version along with the source code, then they may not be overly concerned with performance. Sure, you could minify it yourself, but this red flag isn’t about wasted time: it’s about the possibility that the plug-in contains far worse performance issues.

On the other hand, providing a minified, packed and gzipped version in the download package is an indication that the author cares about JavaScript performance.

8. Strange Mark-Up Requirements

If a plug-in requires mark-up, then the mark-up should be of high quality. It should make semantic sense and be flexible enough for your purposes. Besides indicating poor front-end skills, strange mark-up makes integration more difficult. A good plug-in plugs into just about any mark-up you use; a bad plug-in makes you jump through hoops.

In certain situations, more rigid mark-up is needed, so be prepared to judge this on a sliding scale. Basically, the more specific the functionality, the more specific the mark-up needed. Completely flexible mark-up that descends naturally from any jQuery selector is the easiest to integrate.

9. Excessive CSS

Many jQuery plug-ins come packaged with CSS, and the quality of the style sheets is just as important as the JavaScript. An excessive number of styles is a sure sign of bad CSS. But what constitutes “excessive” depends on the purpose of the plug-in. Something very display-heavy, such as a lightbox or UI plug-in, will need more CSS than something that drives a simple animation.

Good CSS styles a plug-in’s content effectively while allowing you to easily modify the styles to fit your theme.

10. No One Else Uses It

With the sheer volume of jQuery users, most decent plug-ins will probably have something written about them, even if it’s a “50 jQuery [fill in the blank]” post. Do a simple Google search for the plug-in. If you get very few results, you might want to consider another option, unless the plug-in is brand new or you can verifiy that it is written by a professional.

Posts on prominent blogs are great, and posts by prominent jQuery programmers are even better.

Final Assessment

After you’ve given the plug-in the third degree, the only thing left to do is plug it in and test how well it performs.

11. Plug It In and See

Probably the best way to test a plug-in is to simply plug it on the development server and see the results. First, does it break anything? Make sure to look at JavaScript in the surrounding areas. If the plug-in includes a style sheet, look for layout and styling errors on any page that applies the style sheet.

Additionally, how does the plug-in perform? If it runs slowly or the page lags considerably when loading, it might be important to consider other options.

12. Benchmarking With JSPerf

To take your performance review to the next level, run a benchmark test using JSPerf. Benchmarking basically runs a set of operations a number of times, and then returns an average of how long it took to execute. JSPerf provides an easy way to test how quickly a plug-in runs. This can be a great way to pick a winner between two seemingly identical plug-ins.

An example of a performance test run in jsPerf.

13. Cross-Browser Testing

If a plug-in comes with a lot of CSS, make sure to test the styling in all of the browsers that you want to support. Bear in mind that CSS can be drawn from external style sheets or from within the JavaScript itself.

Even if the plug-in doesn’t have any styling, check for JavaScript errors across browsers anyway (at least in the earliest version of IE that you support). jQuery’s core handles most cross-browser issues, but plug-ins invariably use some amount of pure JavaScript, which tends to break in older browsers.

14. Unit Testing

Finally, you may want to consider taking cross-browser testing even further with unit tests. Unit testing provides a simple way to test individual components of a plug-in in any browser or platform you want to support. If the plug-in’s author has included unit tests in their release, you can bet that all components of the plug-in will work across browsers and platforms.

Unfortunately, very few plug-ins include unit test data, but that doesn’t mean you can’t perform your own test using the QUnit plug-in.

With minimal set-up, you can test whether the plug-in methods return the desired results. If any test fails, don’t waste your time with the plug-in. In most cases, performing your own unit tests is overkill, but QUnit helps you determine the quality of a plug-in when it really counts. For more information on how to use QUnit, see this tutorial

An example of a unit test run in QUnit.

Conclusion

When assessing the quality of a jQuery plug-in, look at all levels of the code. Is the JavaScript optimized and error-free? Is the CSS tuned and effective? Does the mark-up make semantic sense and have the flexibility you need? These questions all lead to the most important question: will this plug-in be easy to use?

jQuery core has been optimized and bug-checked not only by the core team but by the entire jQuery community. While holding jQuery plug-ins to the same standard would be unfair, they should stand up to at least some of that same scrutiny.

Related Posts

You may be interested in the following related posts:

• Commonly Confused Bits Of jQuery
• Spicing Up Your Website With jQuery Goodness
• jQuery and JavaScript Coding: Examples and Best Practices
• 45 Useful jQuery Techniques and Plugins

(al)

© Jon Raasch for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: Coding, javascript, jquery