The document discusses lessons learned from examining popular jQuery plugins. It summarizes 30 top plugins, describing why each was created and how it grew. Key takeaways are that authors build plugins to make something better, for fun/exploration, or client needs. Managing features and user feedback is challenging. The best plugins have great demos, documentation, browser support testing, and are fun. The author is available for questions.

1. Learning from the
Best jQuery Plugins
by Marc Grabanski

2. Created jQuery UI
Datepicker and watch it
grow like a weed

3. Made me very interested
in examining plugins projects

4. TONS of jQuery Plugins

5. Looked at 500+ plugins
and selected 30+ best

6. Picked plugins based on
what I use or what was
recommended

7. My BEST plugins list
jQuery Plugins Toolbox
http://marcgrabanski.com/jquery-plugins-toolbox/

8. What lessons can learn by
examining plugin projects?

9. http://benalman.com/projects/jquery-bbq-plugin/

10. Everything one click away

11. Focused on Community

12. “it started out as a little snippet of code
that almost every web developer, at one
point or another, has written..”
Ben Alman

13. Read Ben’s Story
http://benalman.com/news/2010/04/cooking-bbq-the-
original-recipe/

14. http://colorpowered.com/colorbox/

15. Themes

16. very customizable, 36 options

17. “I would make a selection based on how well it's
appearance fit the project at hand.”
Jack Moore

18. “..added it to the jQuery plugin repository and
make a post about it on Reddit.com. Bloggers
picked it up from there”

19. http://www.eyecon.ro/colorpicker/

20. Simple API,
great functionality, looks good

21. http://stilbuero.de/jquery/cookie

22. “jQuery itself lacked such functionality. cookie
handling is such a basic requirement”
Klaus Hartl

23. http://jquery.malsup.com/cycle/

24. “at this stage in its lifecycle it's less about adding
features and more about adding demos.”
Mike Alsup

25. tons of demos
commitment to community

26. http://www.filamentgroup.com/lab/
date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/

27. mixes date picker with english

28. http://lab.smashup.it/flip/

29. “I built Flip after discovering that you can
create triangles/polygons by changing
border properties of an element”
Luca Manno

30. “people started downloading it and ask me for new
features/bug fixing”

31. http://jquery.malsup.com/form/

32. “early 2008 the form plugin initially
evolved as a collaborative effort
[through the mailing list].”
Mike Alsup

33. “The most notable feature addition I made was the
ability to support file uploads.”

34. “I really don't make an effort to spread the word about the
Form Plugin, it seems to thrive on its own.”

35. http://code.google.com/p/flot/

36. answers our burning
questions of browser support
right away

37. diverse demos shows versatility

38. “the existing open source Javascript
chart solutions were somewhat limited.
We specifically missed some interactive
features for a client”
Ole

39. “It is complicated. Really, you need to weigh the usefulness
of new features against the complexity they add.”

40. http://code.google.com/p/js-hotkeys/

41. http://digitalbush.com/projects/masked-input-plugin/

42. “I built this plugin just to scratch an itch. I
needed a masked input for a project I was
working on and I wasn't happy with the
current offerings”
Josh

43. “The only place I've ever really talked about it was on the
jQuery mailing list”

44. “Several people have submitted patches and bug
reports. When I see something that I feel like I
might use, then I'll implement it or roll a patch in.”

45. http://sorgalla.com/jcarousel/

46. DEMOS!

47. http://deepliquid.com/content/Jcrop.html

48. DEMOS!

49. “I originally built Jcrop because I had
searched for competing image cropping
plugins for jQuery and the offerings were
marginal.” Kelly Hallman

50. “I sent out a message to the jQuery mailing list and
sent messages inviting several high-profile web
development blogs.”

51. http://www.appelsiini.net/projects/jeditable

52. http://stanlemon.net/projects/jgrowl.html

53. DEMOS!

54. “as a Mac user I was familiar with Growl and
decided that would serve as a good basis for what
we were trying to do.”
Stan Lemon

55. http://www.trirand.com/blog/jqgrid/jqgrid.html

56. Deep API and supporting
documentation

57. DEMOS!

58. “I started the idea when I needed an
easy way to represent database
information in my project.” Tony

59. “I really try to extract the
essence from the user requests.”

60. http://code.google.com/p/jquery-json/

61. http://www.jstree.com/

62. deep documentation and demos

63. “I decided to create a tree view after
spending countless hours in searching for a
tree that met all the requirements for a
web-based CMS I was creating” Ivan

64. http://layout.jquery-dev.net/

65. http://markitup.jaysalvat.com/home/

66. “I build it for my personal need. I needed
an simple editor which was not a bloated
WYSIWYG editor.”
Jay Salvat

67. http://plugins.jquery.com/project/metadata

68. http://code.google.com/p/noswfupload/

69. http://dev.herr-schuessler.de/jquery/popeye/

70. “I was really tired of seeing the same
lightbox modal windows”
“I wanted a gallery that could exist inline
with the content”
Christoph Schüßler

71. “I posted a link on dzone and on on digg.”

72. “I added a dedicated site and an account at
uservoice ... there are also many requests which I'm
not going to follow, as they deviated too much from
the original purpose of the plugin.”

73. http://razorjack.net/quicksand/

74. Partnered with a designer to
“create stunning demo & documentation website”

75. “I loved this effect on Mac apps”
“I don't like Flash”
“[I wanted to] do something cool and
share it with people.. give back”
Jack

76. “submitted the plugin to the jQuery website plugin
repository, and drop a message on the jQuery group.”

77. http://flesler.blogspot.com/2007/10/jqueryscrollto.html

78. “After reading Karl's article I realized
that was a pretty useful thing that I
needed myself”
Ariel Flesler

79. “I didn't do much really, I posted on jquery-en about
it, and kept doing that for major releases.”

80. “I tried filtering through the requests and rejecting
those features that seemed out of scope.”

81. http://www.fyneworks.com/jquery/star-rating/

82. http://tablesorter.com/docs/

83. http://haineault.com/media/jquery/ui-timepickr/page/

84. “Principally for fun and exploration purpose.”
“[there is a] universally accepted form and
behavior [of calendars] while there is no such
thing for a time picker.”
Maxime Haineault

85. “I posted a link on reddit and woke up the next
morning to see that my submission had taken off
quite well, enough to crash my VPS and down my
site overnight.”

86. “.. when other programmers send me patches, I
always commit them as soon as I can.”

87. “The most enriching part was probably learning
how to deal with many ‘willing’ contributors. I
learned that often hell is paved with good
intentions, but I also learned how to manage hell.”

88. http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

89. http://jqueryui.com/

90. ThemeRoller

91. http://pixelmatrixdesign.com/uniform/

92. http://www.uploadify.com/

93. http://bassistance.de/jquery-plugins/jquery-plugin-validation/

94. Demos

95. “The validation plugin is the only one
I've wrote from scratch, the others, like
Tooltip, Accordion and Autocomplete,
started with some code from someone
else, usually where someone abandoned
his plugin.”
Jörn

96. http://jquery.thewikies.com/swfobject/

97. plugin theme SONG

98. In Summary

99. Authors Build Plugins to..
• Make Something Better
• Fun / Exploration
• Client Needs it

100. It is tough to decide on features and
manage users’ feedback and patches.

101. The Best Plugins Have
• Great demos
• Documentation
• Browser Support / Testing
• Fun!

102. Questions?
Marc Grabanski:
http://marcgrabanski.com
User interface and web application
development.
Examples: http://mjgin.com/work.html
Twitter: http://twitter.com/1Marc
Email: m@marcgrabanski.com