Permalink
Browse files

Updates for 2011 jQuery conference

  • Loading branch information...
1 parent 47c1d8b commit 6d120767799f9cc07251283f2b86a6df659ca563 @timmywil committed Oct 15, 2011
Showing with 30 additions and 45 deletions.
  1. +30 −45 index.html
View
@@ -1,6 +1,6 @@
<!DOCTYPE html>
<!--
- Rare Javascript Operators
+ Awesome
by Timmy Willison
WTFPL License
If you want the cool kid fonts for this preso:
@@ -34,7 +34,7 @@
<meta content='IE=Edge;chrome=1' http-equiv='X-UA-Compatible' />
<meta content='timmy willison personal website' name='description' />
<meta content='timmy willison' name='author' />
- <title>Attributes in jQuery | by timmmy willison</title>
+ <title>Attributes and Properties in jQuery | by timmmy willison</title>
<link href='css/main.css' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono' rel='stylesheet' type='text/css' />
<script src='js/modernizr-shim.min.js'></script>
@@ -46,24 +46,11 @@
<!-- Title -->
<div class='slide' id='landing'>
<section class='middle landing'>
- <h1>Attributes in jQuery</h1>
+ <h1>Attributes and Properties in jQuery</h1>
<h4>by Timmy Willison</h4>
</section>
</div>
<!-- Who I Am -->
- <div class='slide' id='about-me'>
- <header>
- <h1>Who the...</h1>
- </header>
- <section>
- <ul>
- <li>jQuery Core Team (Committer/Bug Triage)</li>
- <li>jQuery 1.6 and the <code>.attr()</code> rewrite</li>
- <li>Recently joined a new creative team at EPB</li>
- <li>I'm in your code, messing with your attributes.</li>
- </ul>
- </section>
- </div>
<!-- What Changed -->
<div class='slide' id='what-changed'>
<header>
@@ -73,20 +60,20 @@ <h1>WAT changed in jQuery 1.6?</h1>
<ul>
<li>Rewrite of <code>.attr()</code> and the addition of the <code>.prop()</code>/<code>.removeProp()</code> methods</li>
<li>Significant performance improvements in <code>.attr()</code>, <code>.val()</code>, and Event triggering</li>
- <li>attrHooks, valHooks, propHooks, requestAnimationFrame animations, more deferred functions, relative css</li>
+ <li>attrHooks, valHooks, propHooks, more flexible deferreds, relative css</li>
</ul>
</section>
</div>
<!-- What was the confusion? -->
<div class='slide' id='confusion'>
<header>
- <h1>I haz propribute?</h1>
+ <h1>Previously, the <code>.attr()</code> method...</h1>
</header>
<section>
<ul>
- <li><code>.attr()</code> has handled both attributes and properties in the same method since 1.0</li>
- <li><code>.attr()</code> had several bugs and was hard to maintain.</li>
- <li>Therefore, a fundamental concept in javascript was lost on some developers who only use jQuery.</li>
+ <li>handled both attributes and properties in the same method</li>
+ <li>had several bugs and was hard to maintain. e.g. forms</li>
+ <li>inadvertently contributed to some developers missing out on a fundamental concept in javascript.</li>
</ul>
</section>
</div>
@@ -111,7 +98,7 @@ <h1>/facepalm</h1>
<section>
<p>These don't make sense in the world of attributes.</p>
<br />
- <pre class='brush:js;toolbar:false'>$(window).attr...&#x000A;$(document).attr...&#x000A;$("input").attr("selectedIndex");&#x000A;$("#foo").attr("nodeName");&#x000A;$("#bar").attr("tagName");&#x000A;$("&lt;input&gt;").attr("type");&#x000A;&#x000A;</pre>
+ <pre class='brush:js;toolbar:false'>$(window).attr...&#x000A;$(document).attr...&#x000A;$("input").attr("selectedIndex");&#x000A;$("#foo").attr("nodeType");&#x000A;$("#bar").attr("tagName");&#x000A;$("&lt;input&gt;").attr("type");&#x000A;&#x000A;</pre>
</section>
</div>
<!-- Boolean attributes -->
@@ -121,7 +108,7 @@ <h1>Boolean Attributes and Properties</h1>
</header>
<section>
<p>The spark of discussion, these are special. According to the <a href="http://www.w3.org/TR/html4/interact/forms.html#adef-value-INPUT">spec</a>, attributes such as checked do not map to properties of the same name.</p>
- <i>The most common boolean attributes are checked, selected, readOnly, and disabled</i>
+ <i>The most common boolean attributes are checked, selected, readonly, and disabled</i>
<pre class='brush:js;toolbar:false'>&lt;input type="checkbox" checked="checked"&gt;&#x000A;// Maps to .defaultChecked (initial value)</pre>
<pre class='brush:js;toolbar:false'>$('input').attr('checked', true);&#x000A;// Didn't set the checked property in 1.6</pre>
<pre class='brush:js;toolbar:false'>// Do this instead&#x000A;$('input').prop('checked', true);&#x000A;$('input').prop('checked', false);&#x000A;&#x000A;</pre>
@@ -140,65 +127,63 @@ <h1><code>example === true</code></h1>
<!-- 1.6.1 -->
<div class='slide' id='jQuery_161'>
<header>
- <h1>1.6.1 fixes compatibility</h1>
+ <h1>1.6.1 fixed compatibility</h1>
</header>
<section>
<ul class='smaller'>
- <li>Changing boolean attributes with <code>.attr()</code> changes the property</li>
+ <li>Changing boolean attributes with <code>.attr()</code> changes the property (still better to use <code>.prop()</code>)</li>
<li><code>.attr()</code> can be used on the window/document (just defers to <code>.prop()</code>)</li>
- <li>In these cases, it is better to use <code>.prop()</code> since <code>.attr()</code> will simply call <code>.prop()</code> for you.</li>
<li><strong>Note:</strong> Node properties such as selectedIndex, nodeName, tagName, and defaultValue are no longer retrievable with <code>.attr()</code>, but can now be retrieved with <code>.prop()</code>.</li>
</ul>
</section>
</div>
<!-- .attr("value") -->
<div class='slide' id='value'>
<header>
- <h1><code>.attr("value")</code></h1>
+ <h2>The value attribute is not what you think it is.</h2>
</header>
- <section class='middle'>
- <h2><code>value</code> should never be retrieved with <code>.attr()</code>. OK, except for buttons. Setting makes sense in certain circumstances (e.g. creating new elements).</h2>
+ <section>
+ <p>To retrieve and set the current value of an input, <br>you need the value property</p>
+ <pre class='brush:js;toolbar:false'>$input.prop('value'); // Current value&#x000A;$input[0].getAttribute('value'); // Default value&#x000A;$input.attr('value');&#x000A;// Right now, retrieves the property, but this will be deprecated in 1.7.&#x000A;$input.val(); // Hey, there's a whole method devoted to value!</pre>
<br />
- <h3>The <code>.val()</code> method handles all the weirdness that comes with the value property, and it handles retrieving value for more elements across browsers. It is <i>preferred</i>.</h3>
+ <a href='http://bugs.jquery.com/ticket/10383' target='_blank'>http://bugs.jquery.com/ticket/10383</a>
</section>
</div>
- <!-- Preferred Usage -->
- <div class='slide' id='preferred-usage'>
+ <!-- Summary -->
+ <div class='slide' id='summary'>
<header>
- <h1>
- <a href='http://blog.jquery.com/2011/05/12/jquery-1-6-1-released/' target='_blank'>Preferred Usage (more info here)</a>
- </h1>
+ <h1>Summary</h1>
</header>
<section>
<blockquote>
- "The .prop() method should be used for boolean attributes/properties and for properties which do not exist in html (such as window.location). All other attributes (ones you can see in the html) can and should continue to be manipulated with the .attr() method."
- <br />
- - jQuery blog
+ Use the <code>.attr()</code> method for attributes and the <code>.prop()</code> method for properties. Often, they will be the same value, but if you want
+ any <b><i>current</i></b> values, meaning if it can change with user interaction, use <code>prop</code>.
+ In cases where it doesn't make a difference, <code>prop</code> will be faster.
</blockquote>
</section>
</div>
<!-- Preview -->
<div class='slide' id='preview'>
<header>
- <h1>Coming Up in jQuery 1.7</h1>
+ <h1>The Future of Attributes and Properties</h1>
</header>
<section class='middle'>
+ <br />
<ul>
- <li>jQuery.Callbacks (opens the door for pub/sub)</li>
- <li>Super-awesome animation toggling (<a target="_blank" href="http://jsfiddle.net/timmywil/gqZL5/24/">example</a>)</li>
- <li>HTML5 element tag support (shim, innerHTML, and cloning)</li>
+ <li>We are discussing deprecating the boolHook in jQuery 1.7 for removal in 1.8</li>
+ <li>Also, the value attrHook and tabIndex attrHook ( this will fix Sizzle bugs as well )</li>
+ <li>Gravitating towards a fully consistent API: <code>.attr()</code> for attributes and <code>.prop()</code> for properties</li>
</ul>
- <p class='down'>*Upgrade to 1.6.2 when it comes out! <br>Several bug fixes and ultra-solid.</p>
</section>
</div>
<!-- Thanks -->
<div class='slide' id='thanks'>
<section class='middle'>
<h1>Thanks!</h1>
<ul class='none'>
- <li><a href="http://twitter.com/#!/timmywil">@timmywil (Also in the #jquery irc)</a></li>
+ <li><a href="http://twitter.com/#!/timmywil">@timmywil</a> (Also in the #jquery irc)</li>
<li><a href="http://github.com/timmywil">Github</a></li>
- <li>jQuery <3 community. <a href="http://docs.jquery.com/Getting_Involved">Getting Involved</a></li>
+ <li>jQuery community. <a href="http://docs.jquery.com/Getting_Involved">Getting Involved</a></li>
</ul>
</section>
</div>

0 comments on commit 6d12076

Please sign in to comment.