JavaScript jQuery promises… Widgets.peopleHeader = {     name: ‘People Header’,     log: true,     promise: new $.Deferred() … $.when(Widgets.peopleHeader.promise).done(function () { …

Check if Karma is installed globally npm list -g –depth=0 The Master/Detail View paradigm is the most common real-world application for MV* frameworks The organization of your code should show intent and be self-documenting… node_modules src (project files / root … includes index.html and favicon.ico)  app individual app JS files for controllers, templates, etc. main (main […]

A powerful API to store and sync data in realtime. Steps Install <script src=’https://cdn.firebase.com/js/client/2.2.1/firebase.js’></script> Reference (URL for your Firebase data) var myDataRef = new Firebase(‘https://xze3eg07ah9.firebaseio-demo.com/’); Write data with .set() method on a Firebase reference (write an object too) – myDataRef.set({name: name, text: text}); … In this example, when the object {name: name, text: text} is set, […]

SharePoint has a nasty habit of fooling JavaScript into thinking the DOM is loaded when there are actually still elements popping in afterwards.  Here’s a dirty script for testing the existence of a given element when you’re in a pinch… var wnt_spTimer, wnt_spElement; wnt_spTimer = window.setInterval(function(){ wnt_spElement = $(‘div[data-widget=”tools”] .heading-main h2’).length; if(wnt_spElement === 0){ console.log(‘******** […]

You can create custom jQuery events with jQuery’s .on() method and then trigger your custom event with jQuery’s .trigger() method.

JSON property keys are always in quotes, but not in JS XHR = XML HTTP Request CFM = Control Flow Management (ex. page loading and data loading asynchronously) $.ajax({    url: ”,    data: {‘myUrlParams’: ‘value’},    success: function(){…},    error: function(){…},    dataType: ‘json’ // use jsonp for cross-domain });

$.fn.makeTabsFor = function(){…};   // Create method $(tabs).makeTabsFor(content);   // Call method $.fn.makeTabsFor(content); // Call method when no selector is used When your plugin code gets called, it’s called in the context of the selected jQuery object, so the method “this” becomes the jQuery object itself.

Animations initiated by the user should be quick while animations initiated by the website can be slower to draw attention Animations create ‘eye-light’ and affordance for a website Use the jQuery easings plugin (or jQuery UI) since jQuery only comes with swing and linear A common configuration of the method’s arguments is… The hash (aka object or properties […]

In addition to viewing current events bound to an object with … $._data( $(‘SELECTOR’)[0], ‘events’ ); …in the console.  I’ve discovered it is sometimes necessary to bind the event to a parent which already exists on the page as some scenarios don’t have all objects ready when the .ready() method is fired (*ahem* SharePoint, I’m […]

You can view an object’s bound events in the console with… $._data( $(‘.element’)[0], ‘events’ );

This solution requires jQuery and Underscore. var wnt = {}; wnt.sortList = { asc: function(sList){ sListItems = $(sList).find(‘li’); sListItems = _.sortBy(sListItems, function(item){ return $(item).text(); }); $(sList).html(sListItems); }, desc: function(sList){ sListItems = $(sList).find(‘li’); sListItems = _.sortBy(sListItems, function(item){ return $(item).text(); }).reverse(); $(sList).html(sListItems); } }; wnt.sortToggle = “asc”; $(‘ul’).click(function(){ wnt.sortList[wnt.sortToggle]($(this)); wnt.sortToggle===’asc’ ? wnt.sortToggle=”desc” : wnt.sortToggle=”asc”; }); Fiddle

Examples of using .fail() method to handle errors via chaining… onSubmitEmailForm: function(e) { e.preventDefault(); if (this.isValid(this.$emailForm)) { $.ajax({ type: ‘POST’, url: this.$emailForm.attr(‘action’), data: this.$emailForm.serialize() }).done(_.bind(function(response) { this.$container.hide(); this.$(‘.email-success’).show(); PubSub.trigger(‘uotrack’, ‘UtilityBarShareEmail’); }, this)).fail(_.bind(function(response){ alert(“Your text did not match the image.”); }, this)); } }, $.get(“test.php”) .done(function(){ alert(“$.get succeeded”); }) .fail(function(){ alert(“$.get failed!”); }); Resources jQuery API

A JavaScript library that helps you write less and do more. $() is the same as jquery() Selectors: $(#id), $(element), $(.class), $(#multiple .selectors), $(p:first), $(p:last), $(p)[0] Adding .eq(#) counts 0-based forward or backwards from beginning or end of a set .size() method returns number of elements in the set $(document).ready(function(){…}); is the same as using […]