I made a jQuery plugin, and so can you!
This weekend I set out to make my first ever javascript plugin. I wanted to make a simple tool that I could actually share with people and they could use with ease. It was a lot easier than I thought it would be, so I wanted to share! Hopefully you’ll realize that you can do the same.
First, I watched this great lynda.com tutorial on how to make a jQuery plugin:
✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨
Then, I concepted my idea — I wanted to make ‘sparkleHover.js’
What does it do? It emits particles on hover over any object that you tell it to:
Like this:
Writing the entire plugin (not including watching the tutorial) took me 6 hours total. I signed up for this ‘day of productivity’ called [CAVE DAY] at a co-working space in NYC, where they guided us in sprints and provided great support for ‘getting sh*t done!’. Basically, they made us set our intention for the day, and then rang a bell to signify the beginning and end of 30 minute sprints, and led us in 5 minute stretches in between; they provided a delicious and healthy breakfast and lunch, as well as sponsored snacks. Fantastic. Thank you Cave Day!
Here are some of the screen grabs I took along the way of my progress:
Step 1 — Can I invoke my plugin on everything with a specific class and have it add divs to the document.body and then remove them after 3 seconds. Can I have them move down and to the right as well? (this was more like step 10, but I forgot to document up until this point)
Step 2 — Can I start the animation on the exact [x,y] of the element and have the disperse in all directions?
Step 3 — Can I allow the user to set parameters? How about letting them select color and sprite size and radius?
Step 4 — More parameters! This is how the client invokes the plugin. Now there are even more parameters (or don’t select any and use default). Choose form one of three shapes.
Step 5 — You can now add images too!
Step 6 — Validation. I had to make sure to return the $target so that my plugin can be chained with other jQuery plugins. Then I moved my target divs into a container and tested out relative and absolute positioning, only to realize that my logic off .offset() was wrong. So changed the way that I was finding the $target’s center point. Then I also tried to explore other validation ideas, like allowing camelCase when you select the shape. Ex: ‘circle’ or ‘Circle’ will work. Or allowing the image key’s value to be ‘true’ or true (string or boolean).
Step 7 — Share it! Download it here on github! Fork it, make a pull request, make it better, Report bugs, whatever you want!
Thanks, hope this was helpful!
Eve
