Posts Tagged ‘jQuery’

jQuery Plugin Development Beginner's Guide

"Build powerful, interactive plugins to implement jQuery in the best way possible"

I was approached by Packt Publishing and asked to review their new book jQuery Plugin Development Beginner’s Guide by author Giulio Bai, so with hopes of at least learning something new I picked it up and here’s what I found.

Learn the basic concepts

The first few chapters gives a quick introduction to the wonderful world of jQuery. By experimenting with other already well known plugins (like Validation by Jörn Zaefferer) you are introduced to some of the basic concepts of jQuery plugins. You’ll learn the difference between method type plugins and function type plugins, and how to make your plugins chainable with the standard jQuery functions. Most importantly you will learn how to create your very own plugin, complete with options handling, from scratch. For an aspiring jQuery plugin developer these chapters serves as a nice complement to the official jQuery plugin authoring documentation.

Master different kinds of plugins

The main part of the book deals with the many different kinds of plugins that you can create; media plugins, form plugins, UI plugins, animation plugins, utility plugins, etc. You get some basic coverage of how to create plugins of each type. For instance you will learn how to create your own nifty little HTML5 based MP3-player. The actual usefulness of the different implementations varies somewhat, but the real strength in these chapters are really all the small things that you learn along the way as each chapter attempts to take you a little bit further, making your code cleaner and cleaner.

Summary

The book is very well organized and each chapter pretty much follows the same structure. You get a set of “do it yourself” style instructions that are very easy to follow, and even though all you might be doing is copying and pasting code you will still get the feeling that you are building something yourself. I really like that you get to work with real code right away, because using jQuery is really all about doing things. For me personally the best learning practice has always been “learn by doing”, and from that perspective the books does a really good job, but it also encourages other ways of learning. Every exercise is followed by a “What just happened?” section that explains what you just did, also at the end of each chapter you will find a “Pop Quiz” and a “Summary” that makes you reflect on the things you have learned.

To sum it all up, if you want to learn how to write your own jQuery plugins or just learn more about working with jQuery this book definitely fits that purpose and works as a very well structured complement to the official online documentation for jQuery. For more seasoned jQuery developers there’s also quite a few nice tips and tricks that you may not already know of.

Advertisements
Toolbox

Sometimes it's hard to find the right tool for the job

Time for a credits post! Here are a few tools that I’ve found very useful when working with Exposure:

JSLint
Great web based code quality tool that does a static analysis of your JavaScript code and tells you what’s wrong it.

Minify JavaScript
I use this web based Javascript compressor to create the minified version of Exposure. Works like a charm!

Please note: I develop Exposure on a Mac, so if you are on a PC the next two tools simply won’t do you any good.

YumuZip
Brilliant tiny zip application that lets you create Windows friendly zip archives on your Mac. No more problems with strange Mac OS X specific files in my release archives!

Smultron
Lightweight text editor app that launches in a heartbeat. Perfect when making smaller changes to JavaScript code. (The site seems to be a bit off currently, but still a great application).

Carousel

Exposure now has image carousel support.

First I’d like to start by saying thank you for all the nice comments I’ve received in e-mails and in the “Feedback” section lately. I really appreciate it! I hope you’ll all like Exposure 0.7 as it includes a couple of new features that’s been requested by you guys.

Exposure 0.7 includes the following updates:

  • Image carousel support – You can view display the thumbnails in a carousel view. Big thanks to Nickolai Stanchev at Nimisoft for contributing with code for this fantastic new feature.
  • New demo addedA new demo that shows the new carousel feature has been added to the bundle.
  • Tie paging controls to images instead of pages – The new option imageControls lets you change the behavior of the paging controls. The new behavior will tie the controls to images instead of to pages (for example “Next” will then mean “next image” instead of “next page”). The third demo has been updated to demonstrate how to use this new feature. Read more about this in the documentation.
  • New key bindings – New keyboard navigation bindings has been added:
    • Up arrow – Last photo
    • Down arrow – First photo
    • Ctrl+Up arrow – Last page
    • Ctrl+Down arrow – Last page
  • Fixed broken minified script – The minified script found in the bundle should work this time.
  • Fixed broken German localization – The German localization file in the bundle should also work a lot better now.
  • Cleaner zip archive – No more Mac OS X specific files that looks weird to PC users.
  • New initialization callback function – New callback function onInit has been added to the options.
  • Several public functions added and updated – Several new public functions has been added and a few of the older ones has been updated. Check out the documentation!

 

Support the Exposure project:

buy-me-a-beer

Clean it up!

OK boys and girls, let's clean this mess up!

This release includes the following updates:

  • Cleaner code – The exposure code has gone through a rather extensive makeover. A lot of internal functions has been moved from public scope to private scope. Better documentation of the public functions are soon to follow!
  • New demo – A third demo has been added. Try it out!
  • Bundled with jQuery 1.4.4 – Exposure is now bundled with latest release of jQuery.
  • Minified version included in the bundle – You no longer have to download the minified version seperately.
  • Dynamically change the content of the gallery – Two new public functions has been introduced that lets you add and remove images dynamically.
  • New dataTarget option added – Allows you to specify an alternate target for image caption placement. See “Docs” for more info.
  • New allowDuplicates option added – Prevent Exposure from adding duplicates of images by setting this new option to false. See “Docs” for more info.
  • Improved demos – Image container elements in demos now have a default fixed size to prevent “jumping” when the demo galleries are loaded.
  • New onEmpty callback option added – New callback function added that’s called if the gallery is empty after the initial loading. It defaults to taking care of cleaning up and removing any added unneeded controls and containers. See “Docs” for more info.
Spanish flag

Exposure ahora habla español!

This release includes the following updates:

  • Spanish localization added – Exposure is now translated to Spanish. Big thanks to Miguel!
  • Keyboard shortcuts for slideshow – Use the space key to play or pause the slideshow.
  • Select which image to start with – Add the CSS class “selected” to any image link to make Exposure start with that image loaded instead of with the first one.
  • Slideshow without controls – You can now use the slideshow feature without having to specify a slideshow controls target.
  • Default onImage implementation – Added a default implementation of the onImage callback function that removes the previous image.
  • Option to hide thumbnail tooltips – New option “showThumbToolTip” added.
  • onKeyDown callback removed – Since it wasn’t really needed with the current version of the Hotkeys plugin, the onKeyDown callback function has been removed. If you miss it, please let me know.

Download Exposure 0.5.2 or see the updated Docs section.

Italian flag

Exposure now speaks Italian!

This release includes the following updates:

  • Italian localization added – Exposure is now translated to Italian (which means it speaks 5 languages!). Big thanks to Jacopo!
  • Paging now works better with different page sizes – Fixed bug in the paging that caused it to skip certain images.
  • Better caption handling – Better handling of caption effects in the first demo.
  • Smoother cross-fade transitions – Improved cross-fade effects with even smoother transitions in both demos. See the result.
  • Bundled with jQuery 1.4.3 – Exposure is now bundled with the latest version of jQuery.

Download Exposure 0.5.1

jQuery

jQuery 1.4.3 - write even less, do even more

This weekend version 1.4.3 of jQuery was released. One of the biggest improvements from my point of view is the new and up to 20% faster .css() function, which now also supports adding custom CSS properties using jQuery plugins. Also the faster traversing using .closest(), .filter(), .find() and .is() seems quite promising.

There’s also some new features, a quite handy utility function called jQuery.type() has been added. This function checks the current type of any given JavaScript object. For example jQuery.type(true) would return “boolean” and jQuery.type(function() {}) would return “function”.

Read about the all of the new additions and improvements in the updated jQuery 1.4.3 documentation.

Exposure is out of the box compatible with this latest update, so for the next release I will bundle Exposure with jQuery 1.4.3.