Css3 Animations vs JQuery

Use jQuery animations when:

• Performance is not an issue
• Animation is critical to use-ability

transitionend (webkitTransitionEnd) (MSTransitionEnd?)
animationstart animationend animationiteration(webkitAnimationStart, webkitAnimationEnd, webkitAnimationIteration)(MSAnimationStart, MSAnimationEnd, MSAnimationIteration) http://tinyurl.com/lokazv4

Useful Links

Unit Testing:

Minutes Now Will Save Hours Later

How to Test?

Future of Selectors

timmy wilson, writer of swizzle

<parent>
    <style scoped>
        @import url(whatever);/*sweet*/
        ul li { background: blue; }
    </style>
    <ul><li>blue</li></ul>
</parent>
<ul><li>notblue</li></ul>

CSS4

Selectors Level 4 Highlights

:matches() /* 'or' group your selectors (only compound selectors, no combinators)*/
a:link, a:visited, a:hover, a:active
/* becomes */ a:matches(:link, :visited, :hover, :active)
div#main, div.animated, div.visible
/* becomes */ div:matches(.animated, .visible, #main)
:not(:link, :visited) //opposite of matches

label /for/ input { display: none }<label for="someid">hidden</label><input id="someid"/>

 .superman[data-power='flying' i]

:any-link { color: blue; } :local-link { color: red; } 
:local-link(3) { color: orange;} /* number is for depth http://x.com/1/2/3/ */

(More) selector level 4

<style>:blank { color: red;} :empty { color: blue; } 
<p>     </p><!-- ← red --><p></p><!-- ← blue -->

p.foo:nth-match(even) /* !!! */
option:nth-match(-1n+4 of :selected) /* first four */

/* sets the background of the containing li on hover */
nav > ul > $li > a:hover { background: gray }/* add shadow to the containing ul on hover */
nav > $ul > li > a:hover { box-shadow: 0 0 10px black }

<p id="outside-scope">not green</p>
<section>
<style scoped> p {background: green;}; /*or*/ :scope p {background: green;}</style>
<p>is green!</p>
</section><script>section.querySelectorAll(':scope p');//super fast!</script>

Scoped and jQuery

Introducing findAll()

jQuery.find = function(selector, context) {
    return context.findAll(selector);
}

Fixing Broken Windows

Problems:
Mixed spaces and tabs, trailing whitespace

• Avoid monolithic files
  
• Embrace long term laziness
• Modules!
• When writing require.js
• Leave $.fn alone unless you really mean it
• Prefer simple dependencies over complex
• Dead Code (kill it)

Write testable code

Bug Wild

Tests demonstrate correct performance of specific tasks under highly constrained circumstances.
They do not prove the absence of bugs.

In fact, your users will encounter precisely those bugs that you did not write tests for.

Even if you had 100% coverage, (which you don't) testing cannot prove correctness.

Notify the users of failures as soon as possible, or their bug reports will often be unhelpful and misleading.

Always have an onerror handler

This is your last line of defense.

If you get here, you are crashing.

In an onerror handler, you get the error message and the line number and URL where the error originated.

window.onerror = function (message, url, line) {
  ExampleApp.crash(message, url + '\n' + 'line: ' + line);
};

The rules of exception handling

1. Never catch an exception you can't do anything about.

2. If you catch an exception you cannot handle,
   always re-throw the same exception.

3. If you catch an exception in your top-level code that you 
   cannot handle, crash.

Never throw in a callback.

especially yui!

Wrap code that can throw in try/catch blocks.

function safeCallback(fn) {
  return function () {
    try {
      return fn.apply(this, arguments);
    } catch (e) {
      ExampleApp.crash(e.name + ': ' + e.message, e.stack);
    }
  };
}

When using callbacks, always provide an error handler

$.ajax('http://api.example.com/foo/bar', {
  success: safeCallback(function (result) {
    // ...
  }),
  error: safeCallback(function (jqXHR, textStatus, errorThrown) {
    // ...
  })
});

Always provide a fail handler when using promises

$.ajax('http://api.example.com/foo/bar').
  done(safeCallback(function (result) {
    // do something cool...
  })).
  fail(safeCallback(function (jqXHR, textStatus, errorThrown) {
    // handle the error...
  }));

How do I get a report?

Email - Requires User Action (copy/paste)

Web Form - More Complicated, requires server support

Automatic Reports - No feedback

Send an automatic report immediately.

• Provide user with a link to a feedback form
• Attach feedback to initial report
• Airbrake
• Debuggify
• Errorception
• JSLogger
• Muscula
• Sentry - Finally one that's not only a service

MAD SCIENCE

Reanimator