DIY: Build a jQuery Plugin!

You can search forums, GitHub, and of course the jQuery Plugin Repository to find a plugin that will fit most of your needs, but what happens when you already have a function that you've built that you know would be perfect as a jQuery plugin?

In this talk we will start with a JavaScript function that is used as an image replacement technique for RWD and learn how it works, why it would be a perfect candidate to be made into a plugin, and then how to make that happen.

Geared towards those new to jQuery in general, the concepts presented will be useful to any and all dealing with today's modern web (especially in regards to adaptive and responsive design).

Transcript

1. DIY: Build a jQuery Plugin! with Phil Dutson (@dutsonpa)
2. Phil Dutson • Solution Architect for ICON Health & Fitness • Author of: - Sam’s Teach Yourself jQuery Mobile in 24 Hours - jQuery, jQuery UI, and jQuery Mobile: Recipes and Examples - Android Developers Cookbook (2nd edition) - Responsive Mobile Design: Designing for Every Device
3. The Problem Dealing with responsive images in responsive/adaptive web design
4. Responsive images • Art direction • Speed and payload • Supporting the internet of things
5. Art Direction • The perfect image for 1920x1080 is usually not the perfect image for 320x568 • You can make the browser scale, but, you really shouldn’t make the browser scale • Either sell the lifestyle, or sell the product
6. Device mocks from https://dribbble.com/shots/988673-Flat-Devices
7. Speed and Payload • Increase site “time to usable” by deferring blocking resources (but think intrinsically with images!) • Deliver images that the device making the request can use
8. The Internet of Things • Not every device has a high pixel density display • Not all high pixel density displays are the same (some devices have 1.5x, 2x, or even 3x) • Strike a balance between image size and device capability (if 1.5x images will work, use them to save on file size)
9. There is no possible way this projector is going to accurately show you pixel density differences between any sample images
11. To see the difference… • Get a 2x device (iPhone4+, MotoX…) • Get a 1x device (*book, non-retina MBP) • Go to http://labs.devcannon.com/pixeldensity/ • Don’t know your device pixel density is? Go to http://www.mobiledesignrecipes.com/device-statistics/
12. The Solution Server, Markup, or a little JavaScript
13. Server Solution • Use server side scripting to resize and serve images • Install or compile a third-party module on your Nginx or Apache server (e.g. mod_pagespeed) • Toss your shared hosting solution for a dedicated or cloud solution that gives you full control over your server (wink wink: https:// www.digitalocean.com/?refcode=6b2fe9c26ff1)
14. Markup Solution • Use the picture element • http://www.whatwg.org/specs/web-apps/current-work/multipage/ embedded-content.html#embedded-content • Supported on Chrome 38+, Opera 24+, Firefox 33+ • Use srcset property in images • http://www.whatwg.org/specs/web-apps/current-work/multipage/ embedded-content.html#attr-img-srcset • Supported on Chrome 34+, Opera 23+, Chrome for Android 36+
15. JavaScript Solution • Javascript allows us to programmatically choose what our users will end up viewing • Customizable solution for the madness that the Marketing department will eventually require • Using data-attributes allows us to get information into the plugin
16. Sample Element Using Data-Attributes <img class=“pixity" src=“images/placeholder.gif" alt="Pixity test” data-path=“images" data-sm=“small.jpg" data-md=“medium.jpg" data-lg=“large.jpg" data-xl="xlarge.jpg" />
17. function pixity(imgClass, limitSm, limitMd, limitLg) { // set defaults if (imgClass === undefined) { imgClass = "pixity"; } if (limitSm === undefined) { limitSm = 480; } if (limitMd === undefined) { limitMd = 768; } if (limitLg === undefined) { limitLg = 960; } var cw = document.documentElement.clientWidth, domNode = $("." + imgClass); function imgSm(domNode) {! domNode.each(function () {! var $this = $(this);! $this.attr('src', $this.data('path') + '/' + $this.data('sm'));! });! }! function imgMd(domNode) {! domNode.each(function () {! var $this = $(this);! $this.attr('src', $this.data('path') + '/' + $this.data('md'));! });! }! function imgLg(domNode) {! domNode.each(function () {! var $this = $(this);! $this.attr('src', $this.data('path') + '/' + $this.data('lg'));! });! }! function imgXl(domNode) {! domNode.each(function () {! var $this = $(this);! $this.attr('src', $this.data('path') + '/' + $this.data('xl'));! });! }! ! if (cw <= limitSm) { imgSm(domNode); } else if (cw <= limitMd) { imgMd(domNode); } else if (cw <= limitLg) { imgLg(domNode); } else { imgXl(domNode); } }
18. Building the Plugin function(); to $.function();
19. Plugin Template ;(function($){ $.fn.functionNameHere = function(options) { var settings = $.extend({/*defaults here*/},options); // globals here // functions here ! // execute here } })(jQuery);
20. Adding default values ;(function($){ $.fn.pixity = function(options) { var settings = $.extend({ imgClass: 'pixity',! limitSm: 479,! limitMd: 767,! limitLg: 959! },options); … })(jQuery);
21. Adding Variables ;(function($){ $.pixity = function(options) { ... // globals here var domNode = $('.'+settings.imgClass);! var cw = document.documentElement.clientWidth;! // functions (as vars) here var imgSm = function() {! domNode.each(function() {! var $this = $(this);! $this.attr('src',$this.data('path') +'/'+$this.data('sm'));! });! };! ! ... } })(jQuery);
22. Adding Execution Logic ;(function($){ $.pixity = function(options) { ... ! // execute here if (cw <= settings.limitSm) {! imgSm();! } else if (cw <= settings.limitMd) {! imgMd();! } else if (cw <= settings.limitLg) {! imgLg();! } else {! imgXl();! }! } })(jQuery);
23. Adding and Calling the Plugin <!-- Place your plugin after the include of jQuery --> <script src=“//code.jquery.com/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="javascript/jquery.pixity.js"></script> Call the plugin through an href or onclick: <a href="javascript:$.pixity();">Trigger Pixity!</a> ! Or you can place the call inside of .ready(): ! $(document).ready(function() { $.pixity(); });
25. Learn More! • Official jQuery plugin docs (http://learn.jquery.com/ plugins/) • Scott Jehl Picturefill (http://scottjehl.github.io/ picturefill/) • Responsive Image Community Group (http:// responsiveimages.org/) • jQuery plugin repository (http://plugins.jquery.com/)
26. Thank You! Questions, comments, and the like can be asked and answered by stalking me online: ! +Phil Dutson! @dutsonpa Pixity Core on GitHub: https://github.com/dutsonpa/pixity