Upgrade to Pro — share decks privately, control downloads, hide ads and more …

I know jQuery. Now what?

I know jQuery. Now what?

I've always been a big believer in using jQuery as a shortcut route to adding interactivity to web sites. You don't need to know the intricacies of browsers bugs around the DOM. But now you've got that essential jQuery knowledge, what's next? How do you live without jQuery? Are we even there yet? And what about your colleagues and peers - how do they progress with you?

Remy Sharp

April 19, 2013
Tweet

More Decks by Remy Sharp

Other Decks in Technology

Transcript

  1. $ =

  2. function getXmlHttpRequest() { var xhr; if (window.XMLHttpRequest) { xhr =

    new XMLHttpRequest(); } else { try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { xhr = false; } } } return xhr; } // disclaimer: John's jQuery version is a lot more elegant!
  3. function request(type, url, opts, callback) { var xhr = new

    XMLHttpRequest(); if (typeof opts === 'function') { callback = opts; opts = null; } xhr.open(type, url); // serialise post data if (type === 'POST' && opts) { // <snip...so I can make the slide smaller> } xhr.onload = function () { callback(JSON.parse(xhr.response)); }; xhr.send(opts ? fd : null); } var get = request.bind(this, 'GET'); var post = request.bind(this, 'POST');
  4. function request(type, url, opts, callback) { var xhr = new

    XMLHttpRequest(); if (typeof opts === 'function') { callback = opts; opts = null; } xhr.open(type, url); // serialise post data if (type === 'POST' && opts) { // <snip...so I can make the slide smaller> } xhr.onload = function () { callback(JSON.parse(xhr.response)); }; xhr.send(opts ? fd : null); } var get = request.bind(this, 'GET'); var post = request.bind(this, 'POST'); xhr.onload = function () { callback(JSON.parse(xhr.response)); };
  5. function request(type, url, opts, callback) { var xhr = new

    XMLHttpRequest(); if (typeof opts === 'function') { callback = opts; opts = null; } xhr.open(type, url); // serialise post data if (type === 'POST' && opts) { // <snip...so I can make the slide smaller> } xhr.onload = function () { callback(JSON.parse(xhr.response)); }; xhr.send(opts ? fd : null); } var get = request.bind(this, 'GET'); var post = request.bind(this, 'POST');
  6. $.fn.fitText = function( kompressor, options ) { // Setup options

    var compressor = kompressor || 1, settings = $.extend({ 'minFontSize' : Number.NEGATIVE_INFINITY, 'maxFontSize' : Number.POSITIVE_INFINITY }, options); return this.each(function(){ // Store the object var $this = $(this); // Resizer() resizes items based on the object width divided by the compressor * 10 var resizer = function () { $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); }; // Call once to set. resizer(); // Call on resize. Opera debounces their resize by default. $(window).on('resize orientationchange', resizer); }); };
  7. $.fn.fitText = function( kompressor, options ) { // Setup options

    var compressor = kompressor || 1, settings = $.extend({ 'minFontSize' : Number.NEGATIVE_INFINITY, 'maxFontSize' : Number.POSITIVE_INFINITY }, options); return this.each(function(){ // Store the object var $this = $(this); // Resizer() resizes items based on the object width divided by the compressor * 10 var resizer = function () { $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); }; // Call once to set. resizer(); // Call on resize. Opera debounces their resize by default. $(window).on('resize orientationchange', resizer); }); }; 1. extend
  8. $.fn.fitText = function( kompressor, options ) { // Setup options

    var compressor = kompressor || 1, settings = $.extend({ 'minFontSize' : Number.NEGATIVE_INFINITY, 'maxFontSize' : Number.POSITIVE_INFINITY }, options); return this.each(function(){ // Store the object var $this = $(this); // Resizer() resizes items based on the object width divided by the compressor * 10 var resizer = function () { $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); }; // Call once to set. resizer(); // Call on resize. Opera debounces their resize by default. $(window).on('resize orientationchange', resizer); }); }; 1. extend 2. each
  9. $.fn.fitText = function( kompressor, options ) { // Setup options

    var compressor = kompressor || 1, settings = $.extend({ 'minFontSize' : Number.NEGATIVE_INFINITY, 'maxFontSize' : Number.POSITIVE_INFINITY }, options); return this.each(function(){ // Store the object var $this = $(this); // Resizer() resizes items based on the object width divided by the compressor * 10 var resizer = function () { $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); }; // Call once to set. resizer(); // Call on resize. Opera debounces their resize by default. $(window).on('resize orientationchange', resizer); }); }; 1. extend 2. each 3. width
  10. $.fn.fitText = function( kompressor, options ) { // Setup options

    var compressor = kompressor || 1, settings = $.extend({ 'minFontSize' : Number.NEGATIVE_INFINITY, 'maxFontSize' : Number.POSITIVE_INFINITY }, options); return this.each(function(){ // Store the object var $this = $(this); // Resizer() resizes items based on the object width divided by the compressor * 10 var resizer = function () { $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); }; // Call once to set. resizer(); // Call on resize. Opera debounces their resize by default. $(window).on('resize orientationchange', resizer); }); }; 1. extend 2. each 3. width 4. css
  11. $.fn.fitText = function( kompressor, options ) { // Setup options

    var compressor = kompressor || 1, settings = $.extend({ 'minFontSize' : Number.NEGATIVE_INFINITY, 'maxFontSize' : Number.POSITIVE_INFINITY }, options); return this.each(function(){ // Store the object var $this = $(this); // Resizer() resizes items based on the object width divided by the compressor * 10 var resizer = function () { $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); }; // Call once to set. resizer(); // Call on resize. Opera debounces their resize by default. $(window).on('resize orientationchange', resizer); }); }; 1. extend 2. each 3. width 4. css 5. on
  12. if (options === undefined) { options = {}; } if

    (options.minFontSize === undefined) { options.minFontSize = Number.NEGATIVE_INFINITY; } if (options.maxFontSize === undefined) { options.maxFontSize = Number.POSITIVE_INFINITY; } .extend becomes init default options
  13. // assuming polyfill or IE9+ nodes.forEach(function (node) { // where

    we used `this`, we now use `node` // ... }) .each becomes regular loop
  14. var resizer = function () { var width = node.clientWidth;

    // ... }; .width becomes .clientWidth property Note: clientWidth != .width() - but will do for our solution
  15. // assuming polyfill or IE9+ window.addEventListener('resize', resizer, false); .on becomes

    .addEventLister Polyfill: h ps://gist.github.com/eirikbacker/2864711
  16. Recap querySelectorAll for DOM navigation Think about when to use

    jQuery / a library Ditch document.ready Use this.value Try .classList Really grok ajax No more JavaScript animations Maybe no-jQuery first?