VirtualBox

Originally developed by Sun, Oracle’s VirtualBox is a great piece of free software.Let me repeat that. Great piece of free software. It’s so good they should charge for it. Really.  In case you’re unfamiliar with VirtualBox or virtualization in general, what VirtualBox does is allows you to turn one computer into as many different computers as you like by giving you the ability to run almost any operating system as if it were an application. No dual booting, no partitioning, no reformatting. You can create and destroy virtual machines at will.

So why is this great?

Because being able to quickly build a machine you wouldn’t otherwise normally have access to, or may not want to change, allows you to test and develop without the cost of having to buy the extra hardware that used to be needed for this. Plus, everything is right at your fingertips. Need to test on IE6 under Windows 98 (God be with you), no problem. Need to test on Ubuntu with Opera? No problem! Just fire up a virtual machine and you’re at work. And with today’s computing power, virtualized machines run as just about as fast as if they were a separate entity. And, not only are they good for testing designs across browsers and OSs, they’re great for setting up as development servers. Oh the possibilities! And all for free.

VirtualBox is a powerful x86 and AMD64/Intel64 virtualization product for enterprise as well as home use. Not only is VirtualBox an extremely feature rich, high performance product for enterprise customers, it is also the only professional solution that is freely available as Open Source Software under the terms of the GNU General Public License (GPL) version 2. Presently, VirtualBox runs on Windows, Linux, Macintosh, and Solaris hosts and supports a large number of guest operating systems including but not limited to Windows (NT 4.0, 2000, XP, Server 2003, Vista, Windows 7), DOS/Windows 3.x, Linux (2.4 and 2.6), Solaris and OpenSolaris, OS/2, and OpenBSD.

jsfiddle & JS Bin & JSONLint

jsFiddle, JS Bin, and JSONLint are websites that let you develop, test, and validate JavaScript in your browser. My favorite of the three is jsFiddle due to its combination of simplicity, speed, and options. jsFiddle and JSBin allow you to take HTML, JavaScript, and CSS and display the combined output in your browser without having to save and load files. Previously you might open a web development tool or IDE, create a file, add some code, save it, load it up in your browser, check the results and repeat. Now you can just go to a website, drop in your code and hit run. You can also share your code with others which is another huge plus. Being able to not constantly save files to see changes in your code is a giant time saver.
JSONLint is a free online tool to validate JSON data. Simply drop in your code and click validate to see if your JSON is valid. Couldn’t be simpler. This comes is especially handy when you’re dealing with AJAX requests and can’t figure out why your data isn’t coming across as you expected that it would.

jsPerf

According to their website, “jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks”. In other words, jsPerf allows you to compare snippets of JavaScript code head-to-head. Is it faster to use jQuery’s .find() or .children() function? Not sure? Quickly build a test and jsPerf will show you the results which you can also share with others (see, I told you .on() was faster than .live()!).

Dummying things up

I don’t know a designer or developer who hasn’t had the need to use placeholders. be it text or images, at some point you’ll just want some filler to stand it for the real content later. This is where placeholders and dummy data fit nicely. Fortunately there are several great free services that allow you to do just this.

Images

Whenever I need to use placeholder images, I use either placekitten.com or dummyimage.com. Both sites provide pretty much the same service in that you can simply get dummy images from them by modifying the URL you use. For example, need a 250×80 image fast? Use http://www.placekitten.com/250/80/. Couldn’t be easier. Or cuter. For serious business placeholder images, Dummyimages.com goes one step further and allows you to specify the background color, foreground color, text, and format of your image. Notable mention: http://www.placehold.it/

Text

One site I’ve used for generating dummy text for probably 10 years (including their Firefox add-on) is lipsum.com. Lipsum.com generates that you’re probably seen before that begins with “Lorem ipsum dolor sit amet…”. While there are plenty of similar services, lipsum.com has not only been around for a very long time, but they keep things simple while providing you with plenty of options. There are plenty of other copycat sites, but lipsum.com has been around for a very long time and has stuck with what made it useful instead of trying to be something it wasn’t.

Oooh, the colors

While I like to think of myself as equal parts designer and developer, I have to admit I’m probably more of a developer than a designer. So when it comes time for some design inspiration, specifically coming up with cool colors, I turn to Adobe’s Kuhler. Kuhler is a wonderful free online tool generates color schemes. They also offer a community where you can share themes with others.

Finally, among the many useful changes in CSS3 are color gradients. While they’re a great addition, I find them extremely difficult to code from memory. So my go-to website for generating them easily is the Ultimate CSS Gradient Generator. With it’s Photoshop like ease of use, generating cross-browser compatible CSS3 gradients couldn’t be easier.

So that’s a quick roundup of some of the free tools I use in my daily work. What tools do you use?

As a general rule of thumb, use .ajax() only when you can’t use one of jQuery’s other AJAX method. .ajax() is the Leatherman/Swiss Army knife of AJAX calls, but when you don’t need all that power:

• Use .get() for a simple GET request
• Use .getScript() for a simple SCRIPT request
• Use .getJSON() for a simple JSON request
• Use .post() for a simple POST request

Due to browser security restrictions known as the Same Origin Policy an AJAX request can not successfully retrieve data from a different domain, sub-domain, or protocol. While only being able to make AJAX requests to scripts on your own domain may feel like a deal-breaker, there are ways around this restriction. Script and JSONP requests are not subject to the same origin policy restrictions, which is how you can make AJAX calls to services like Flickr to get back data to your script. Note that another way to circumvent the Same Origin Policy is to use a proxy script to pull the data from the server that has the information you want. For example, you could use one of jQuery’s AJAX methods to call a PHP script on your own domain which in turn grabs data from another site (via a mechanism like fopen, fsockopen, cURL, etc.) and passes the response back to your jQuery call.

AJAX Methods

.ajax()

The $.ajax() function underlies all AJAX requests sent by jQuery. It is often unnecessary to directly call this function, as several higher-level alternatives like $.get() and .load() are available and are easier to use.

.get()

Equivalent to:

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

.getJSON()

Equivalent to:

$.ajax({
  url: url,
  dataType: 'JSON',
  data: data,
  success: callback
});

If the URL includes the string “callback=?” (or similar, as defined by the server-side API), the request is treated as JSONP instead.

.getScript()

Equivalent to:

$.ajax({
  url: url,
  dataType: "script",
  success: success
});

.load()

This method is the simplest way to fetch data from the server. It is roughly equivalent to:

$.get(url, data, success);

except that it is a method rather than global function and it has an implicit callback function. The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded. The POST method is used if data is provided as an object; otherwise, GET is assumed.

.post()

Equivalent to:

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

References: http://en.wikipedia.org/wiki/same_origin_policy, http://developer.yahoo.com/javascript/howto-proxy.html, http://json-p.org/

Ok, ok, I’ll spare the hackneyed rhymes and just present you with a completely new Infinite Carousel 3 for the holidays!

Unfortunately since this is a ridiculously busy time of year, I haven’t had time to throw up any demos just yet. But I will. In a few days. But in the meantime you can download the plugin and use it to your heart’s content. I did managed to cobble together some basic information about using the new version which I’m posting below.

Download

• Infinite Carousel 3

What’s New

• Completely rewritten. Smoother, faster, tighter.
• New options
• Images can be linked
• The carousel now accepts images and videos
• New timer
• New thumbnail options
• Easier styling

Notes

• Easing effects still require a separate jQuery easing plugin (I recommend http://gsgd.co.uk/sandbox/jquery/easing/), or adding easing code on your own.

Options

• transitionSpeed – the time (in milliseconds) a transition from one item to another should take (default 800)
• displayTime – the time (in milliseconds) an item should be displayed (default 6000)
• displayProgressRing – a Boolean value that shows or hides the progress ring in the upper right hand of the carousel (default true)
• progressRingColorOpacity – the color and opacity (in RGBa format) of the progress ring (default ’0,0,0,.5′)
• progressRingBackgroundOn – a Boolean value that shows or hides the progress ring background ring (default true
• progressRingBackgroundColorOpacity – the color and opacity (in RGBa format) of the progress ring background ring (default ’255,255,255,.5′)
• thumbnailType – the format of the item thumbnails (default ‘none’. Possible values are: ‘buttons’, ‘images’, ‘numbers’, ‘count’, or ‘none’)
• easeLeft – the easing method when the carousel moves to the left (default ‘linear’. To use values other than linear, either add an easing plugin or add easing code of your own)
• easeRight – the easing method when the carousel moves to the right (default ‘linear’. To use values other than linear, either add an easing plugin or add easing code of your own)
• imagePath – the path to the carousel’s navigation and playback control images (default ‘/js/infinitecarousel/images/’)
• inView – the number of items to be viewable at once (default 1)
• margin – the amount of margin to add around items (default 0)
• advance – the number of items to advance when a user clicks the left or right navigation buttons or the carousel is on autopilot (default 1)
• customClass – a name to be assigned to the carousel (or the carousel’s wrapper) that can be used for styling or scripting. The name will be prepended with “ic_” (default null)
• showControls – a Boolean value that shows or hides the play/pause controls (default true)
• autoHideCaptions – a Boolean values that hides captions between transitions ( default false)
• autoPilot – a Boolean value that moves the carousel automatically when the page loads (default false)
• prevNextInternal – a Boolean value that places the left/right navigation arrows inside or outside the carousel (default true)
• internalThumbnails – a Boolean values that determines whether the thumbnails are placed inside or below the carousel (default false)
• enableKeyboardNav – a Boolean value that enables or disables keyboard navigation. The left and right keys mimic the left and right arrows of the carousel, p pauses playback and s starts playback (default true).
• onSlideStart – default function(){},
• onSlideEnd – default function(){},
• onPauseClick – default function(){},
• onPlayClick – default function(){}

HTML

• An unordered list should contain your items (images, videos, or a mix).
• All items in the list must have the same dimensions which must be set
• Images can be wrapped with links
• Captions must be contained in paragraph tags and come after the image
• User CSS now controls the look of the thumbnails
• Video can have their own thumbnails by adding a longdesc attribute to them.

Ex:
    <ul id="carousel">
        <li><img width="200" height="133" alt="" src="p1.png" /><p>This is <strong>a caption</strong></p></li>
        <li><a href="http://www.google.com"><img width="200" height="133" alt="" src="p2.png" /></a></li>
        <li><a href="http://www.google.com"><img width="200" height="133" alt="" src="p3.png" /></a></li>
    </ul>

Instantiating

• $(‘#carousel’).infiniteCarousel({});

CSS Classes

• .ic_caption – styles the captions
• .ic_button – styles thumbnails
• .ic_active – styles the active thumbnail containers
• .ic_thumbnails – styles the div that holds the thumbnails

	** what's new:
		* completely rewritten. smoother, faster, tighter.
		* new options
		* captions
		* links
		* images or videos
		* new timer
		* new thumbnail options
		* easier styling

• We’d been planning on replacing the original, spam-ridden plugin site for quite some time
• In the process of deleting on the spam, all the plugins were deleted and we didn’t have a recent backup
• Instead of burning cycles keeping the old site on life support, we decided to make a clean break and kick development on the new site into high gear.
• The new site is powered by GitHub and a package manifest for plugins
• Plugins from the old site were never going to be automatically imported into the new one.
• The repo is at github.com/jquery/plugins.jquery.com
• We are very sorry, but also very excited!

So it looks like I’ll have to get everything moved over to github and make some updates to the plugin packages as well. In the meantime you can continue to download the plugins from this site. One of which is currently being completely re-written :)

Stopped support and development of their toolbar for Firefox

Maybe it’s the cynic in me, but I have to believe that this was done to get more people to switch to Chrome. I mean why else would they do this? The only public mention of this by Google says that Firefox now has most of the toolbar’s functionality built-in to the browser. Well sure, if you take the time to install a bunch of add-ons and create new bookmarks.

Removed the plus (+) as a search modifier

It used to be that when you required a word or phrase in a search term, you could just slap a + in front of it (e.g. don’t be +evil). In what looks like a move related to pushing Google+, Google has removed this functionality and now requires you to place quotes around any words or terms you require (e.g. don’t be “evil”). Google says that this is an improvement but I disagree.

Changed the look and functionality of Google reader

I don’t really care about the social features of Google Reader changing (I never used them), and Google shifting them to be more integrated with Google+, but I don’t like the new look. I’m sure I’ll get used to it in time, but what’s the deal with this new weird spacing they’re introducing? Did everyone at Google get giant new monitors to work with?

Changed the look of Gmail

Ug, see above. I’ve used Gmail since day one. Thankfully the functionality hasn’t changed, but like Google Reader the look has. Again, what’s up with the spacing? And the themes? I used Gmail’s “shiny” theme and have grown attached to it. Guess what? The new version of Gmail doesn’t have a theme that looks as good, or uses my screen real estate as efficiently. C’mon Google, get some folks with an eye for design involved and stop letting the engineers control everything.

Developed a social network that still doesn’t interest me

Once Google+ opened to the masses I tried it. Now mind you I don’t use Twitter or Facebook, so this move took some extra effort on my part. But I figured since I use most of Google’s other services that this might be for me. Unfortunately it doesn’t seem to be. After a few days I stopped checking my plus “stream” and don’t miss it. If I want people to know something, I’ll publish it here. If I want a select group of folks to know something, I’ll email them. I also have a hard time with the layout and the never-ending stream of data from other people without some way to filter it. Seems like a lot of noise gets through and I already have a had enough time getting through all my RSS feed items and emails in a day.

Shut down Google labs

Google labs was a cool place to check out some of the more abstract idea Google had. Granted a lot of projects in the labs never made it out of beta, but it was a place to go to see what might be coming next. As John Dvorak put it, “This is a disaster for users. I can see no real rationale for turning off the labs and re-distributing all the cool and nifty programs and projects that are found all over the site. To me, this is Google pulling a Yahoo.”

Changed the look of the search results page so that the right half of the page has a gaping hole for more page information

Let me say that I like having the ability to preview sites before visiting them, but why did the company that revolutionized slick web interfaces (e.g. Google Maps) come up with such an ugly preview feature? When you’re not using it, half of the screen is  empty. Huh? This is the best that Google could come up with? Oh, and while I’m  talking about search results, why haven’t they restored the ability to have more than 10 results per page? Ever since Google instant came out, that option has been dead.

Things they’ve done recently that I’m pleased with

Forced SSL for searches

About time. Now only Google knows what I’m looking for instead of my ISP and anyone else within packet sniffing distance.

Killed Google buzz

How long did this one need to limp along before someone put it out of its misery?

Changes

• No more SQL errors if using the class on a query with no results (although I fail to see the point of using it on an empty query anyway, but the bug is fixed)
• When selecting ‘ALL’ only one page is displayed, and if you are using the display_items_per_page drop-down menu, ‘ALL’ is now selected as well.
• If a page less than page one, or greater than the total number of pages is requested, no results are displayed and the appropriate prevous/next links are disabled
• The items per page array that populates the display_items_per_page drop-down menu is now an option that can be configured when instantiating the class. Previously this was hard-coded to the class.
• The $high option has been removed from the class (it was never used).

Note that if you receive a PHP notice about undefined indexes that you should turn down your error reporting. This notice may be displayed when loading the page for the first time when no $_GET variables are present. The class accounts for this, however PHP throws a notice about it.

Examples

• Basic example
• Form variables carry over example

I’ve also added license info at the head of the class (CC Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)).

Download

• PHP Pagination Class v2

Visit the Before/After plugin page to download the latest version and try out the demos.