<?xml version="1.0" encoding="utf-8"?>
<rss xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:pingback="http://madskills.com/public/xml/rss/module/pingback/" version="2.0">
  <channel>
    <title>ProgramGood.Net - UX</title>
    <link>http://www.programgood.net/</link>
    <description>The journey to becoming a great programmer</description>
    <language>en-us</language>
    <copyright>Dave Mateer</copyright>
    <lastBuildDate>Thu, 29 Sep 2011 22:09:26 GMT</lastBuildDate>
    <generator>newtelligence dasBlog 2.2.8279.16125</generator>
    <managingEditor>davemateer@gmail.com</managingEditor>
    <webMaster>davemateer@gmail.com</webMaster>
    <item>
      <trackback:ping>http://www.programgood.net/Trackback.aspx?guid=1425f8be-3b1c-48bb-883d-8c69d77beb5f</trackback:ping>
      <pingback:server>http://www.programgood.net/pingback.aspx</pingback:server>
      <pingback:target>http://www.programgood.net/PermaLink,guid,1425f8be-3b1c-48bb-883d-8c69d77beb5f.aspx</pingback:target>
      <dc:creator>Dave Mateer</dc:creator>
      <body xmlns="http://www.w3.org/1999/xhtml">
        <p>
          <a href="http://www.programgood.net/content/binary/Windows-Live-Writer/VIdPub6.2_8AD5/image_2.png">
            <img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://www.programgood.net/content/binary/Windows-Live-Writer/VIdPub6.2_8AD5/image_thumb.png" width="468" height="415" />
          </a>
        </p>
        <p>
catching save.
</p>
        <p>
        </p>
        <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:1a0d66ce-b323-4724-907f-966707ba07d7" class="wlWriterEditableSmartContent">
          <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
            <div style="background-color: #000000; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap">
              <span style="color:#f1f2f3">FormView
= Backbone.View.extend({</span>
              <br />
              <span style="color:#f1f2f3"> initialize: </span>
              <span style="color:#93c763">function</span>
              <span style="color:#f1f2f3"> ()
{</span>
              <br />
              <span style="color:#f1f2f3"> _.bindAll(</span>
              <span style="color:#93c763">this</span>
              <span style="color:#f1f2f3">, </span>
              <span style="color:#ec7600">'render'</span>
              <span style="color:#f1f2f3">);</span>
              <br />
              <span style="color:#f1f2f3">
              </span>
              <span style="color:#93c763">this</span>
              <span style="color:#f1f2f3">.template
= $(</span>
              <span style="color:#ec7600">"#productionFormTemplate"</span>
              <span style="color:#f1f2f3">);</span>
              <br />
              <span style="color:#f1f2f3"> },</span>
              <br />
              <br />
              <span style="color:#f1f2f3"> events: {</span>
              <br />
              <span style="color:#f1f2f3">
              </span>
              <span style="color:#ec7600">"change input"</span>
              <span style="color:#f1f2f3">: </span>
              <span style="color:#ec7600">"updateModel"</span>
              <span style="color:#f1f2f3">,</span>
              <br />
              <span style="color:#f1f2f3">
              </span>
              <span style="color:#ec7600">"submit #productionForm"</span>
              <span style="color:#f1f2f3">: </span>
              <span style="color:#ec7600">"save"</span>
              <br />
              <span style="color:#f1f2f3"> },</span>
              <br />
              <span style="color:#f1f2f3"> save: </span>
              <span style="color:#93c763">function</span>
              <span style="color:#f1f2f3"> ()
{</span>
              <br />
              <span style="color:#f1f2f3">
              </span>
              <span style="color:#93c763">this</span>
              <span style="color:#f1f2f3">.model.save(</span>
              <br />
              <span style="color:#f1f2f3">
              </span>
              <span style="color:#93c763">this</span>
              <span style="color:#f1f2f3">.model.attributes,</span>
              <br />
              <span style="color:#f1f2f3"> {</span>
              <br />
              <span style="color:#f1f2f3"> success: </span>
              <span style="color:#93c763">function</span>
              <span style="color:#f1f2f3"> (model,
response) {</span>
              <br />
              <span style="color:#f1f2f3"> alert(model.get(</span>
              <span style="color:#ec7600">"Title"</span>
              <span style="color:#f1f2f3">)
+ </span>
              <span style="color:#ec7600">" saved"</span>
              <span style="color:#f1f2f3">);</span>
              <br />
              <span style="color:#f1f2f3"> model.collection.trigger(</span>
              <span style="color:#ec7600">"itemSaved"</span>
              <span style="color:#f1f2f3">,
model);</span>
              <br />
              <span style="color:#f1f2f3"> },</span>
              <br />
              <span style="color:#f1f2f3"> error: </span>
              <span style="color:#93c763">function</span>
              <span style="color:#f1f2f3"> (model,
response) {</span>
              <br />
              <span style="color:#f1f2f3"> alert(</span>
              <span style="color:#ec7600">"problem"</span>
              <span style="color:#f1f2f3">);</span>
              <br />
              <span style="color:#f1f2f3"> model.trigger(</span>
              <span style="color:#ec7600">"itemError"</span>
              <span style="color:#f1f2f3">, </span>
              <span style="color:#ec7600">"There
was a problem saving "</span>
              <span style="color:#f1f2f3"> + model.get(</span>
              <span style="color:#ec7600">"Title"</span>
              <span style="color:#f1f2f3">));</span>
              <br />
              <span style="color:#f1f2f3"> }</span>
              <br />
              <span style="color:#f1f2f3"> }</span>
              <br />
              <span style="color:#f1f2f3"> );</span>
              <br />
              <span style="color:#f1f2f3">
              </span>
              <span style="color:#93c763">return</span>
              <span style="color:#f1f2f3">
              </span>
              <span style="color:#93c763">false</span>
              <span style="color:#f1f2f3">;</span>
              <br />
              <span style="color:#f1f2f3"> },</span>
            </div>
          </div>
        </div>
        <p>
 
</p>
        <p>
**BREAK**
</p>
        <p>
heading towards this:
</p>
        <p>
          <a href="http://www.programgood.net/content/binary/Windows-Live-Writer/VIdPub6.2_8AD5/image_4.png">
            <img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://www.programgood.net/content/binary/Windows-Live-Writer/VIdPub6.2_8AD5/image_thumb_1.png" width="473" height="484" />
          </a>
        </p>
        <p>
          <a href="http://www.programgood.net/content/binary/Windows-Live-Writer/VIdPub6.2_8AD5/image_6.png">
            <img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://www.programgood.net/content/binary/Windows-Live-Writer/VIdPub6.2_8AD5/image_thumb_2.png" width="442" height="484" />
          </a>
        </p>
        <p>
nice notifications!
</p>
        <p>
Validations are built into backbone:
</p>
        <p>
          <a href="http://www.programgood.net/content/binary/Windows-Live-Writer/VIdPub6.2_8AD5/image_8.png">
            <img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://www.programgood.net/content/binary/Windows-Live-Writer/VIdPub6.2_8AD5/image_thumb_3.png" width="244" height="185" />
          </a>
        </p>
        <h3>Is it Really Worth It?
</h3>
        <ul>
          <li>
Time spent on user experience is really valuable</li>
          <li>
Compelling to use</li>
          <li>
Good for us as developers to stretch</li>
        </ul>
        <img width="0" height="0" src="http://www.programgood.net/aggbug.ashx?id=1425f8be-3b1c-48bb-883d-8c69d77beb5f" />
      </body>
      <title>VIdPub6.2–BackboneJS</title>
      <guid isPermaLink="false">http://www.programgood.net/PermaLink,guid,1425f8be-3b1c-48bb-883d-8c69d77beb5f.aspx</guid>
      <link>http://www.programgood.net/2011/09/29/VIdPub62BackboneJS.aspx</link>
      <pubDate>Thu, 29 Sep 2011 22:09:26 GMT</pubDate>
      <description>&lt;p&gt;
&lt;a href="http://www.programgood.net/content/binary/Windows-Live-Writer/VIdPub6.2_8AD5/image_2.png"&gt;&lt;img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://www.programgood.net/content/binary/Windows-Live-Writer/VIdPub6.2_8AD5/image_thumb.png" width="468" height="415" /&gt;&lt;/a&gt;
&lt;/p&gt;
&lt;p&gt;
catching save.
&lt;/p&gt;
&lt;p&gt;
&lt;div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:1a0d66ce-b323-4724-907f-966707ba07d7" class="wlWriterEditableSmartContent"&gt;
&lt;div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt"&gt;
&lt;div style="background-color: #000000; max-height: 300px; overflow: auto; padding: 2px 5px; white-space: nowrap"&gt;&lt;span style="color:#f1f2f3"&gt;FormView
= Backbone.View.extend({&lt;/span&gt;
&lt;br&gt;
&lt;span style="color:#f1f2f3"&gt; initialize: &lt;/span&gt;&lt;span style="color:#93c763"&gt;function&lt;/span&gt;&lt;span style="color:#f1f2f3"&gt; ()
{&lt;/span&gt;
&lt;br&gt;
&lt;span style="color:#f1f2f3"&gt; _.bindAll(&lt;/span&gt;&lt;span style="color:#93c763"&gt;this&lt;/span&gt;&lt;span style="color:#f1f2f3"&gt;, &lt;/span&gt;&lt;span style="color:#ec7600"&gt;&amp;#39;render&amp;#39;&lt;/span&gt;&lt;span style="color:#f1f2f3"&gt;);&lt;/span&gt;
&lt;br&gt;
&lt;span style="color:#f1f2f3"&gt; &lt;/span&gt;&lt;span style="color:#93c763"&gt;this&lt;/span&gt;&lt;span style="color:#f1f2f3"&gt;.template
= $(&lt;/span&gt;&lt;span style="color:#ec7600"&gt;&amp;quot;#productionFormTemplate&amp;quot;&lt;/span&gt;&lt;span style="color:#f1f2f3"&gt;);&lt;/span&gt;
&lt;br&gt;
&lt;span style="color:#f1f2f3"&gt; },&lt;/span&gt;
&lt;br&gt;
&lt;br&gt;
&lt;span style="color:#f1f2f3"&gt; events: {&lt;/span&gt;
&lt;br&gt;
&lt;span style="color:#f1f2f3"&gt; &lt;/span&gt;&lt;span style="color:#ec7600"&gt;&amp;quot;change input&amp;quot;&lt;/span&gt;&lt;span style="color:#f1f2f3"&gt;: &lt;/span&gt;&lt;span style="color:#ec7600"&gt;&amp;quot;updateModel&amp;quot;&lt;/span&gt;&lt;span style="color:#f1f2f3"&gt;,&lt;/span&gt;
&lt;br&gt;
&lt;span style="color:#f1f2f3"&gt; &lt;/span&gt;&lt;span style="color:#ec7600"&gt;&amp;quot;submit #productionForm&amp;quot;&lt;/span&gt;&lt;span style="color:#f1f2f3"&gt;: &lt;/span&gt;&lt;span style="color:#ec7600"&gt;&amp;quot;save&amp;quot;&lt;/span&gt;
&lt;br&gt;
&lt;span style="color:#f1f2f3"&gt; },&lt;/span&gt;
&lt;br&gt;
&lt;span style="color:#f1f2f3"&gt; save: &lt;/span&gt;&lt;span style="color:#93c763"&gt;function&lt;/span&gt;&lt;span style="color:#f1f2f3"&gt; ()
{&lt;/span&gt;
&lt;br&gt;
&lt;span style="color:#f1f2f3"&gt; &lt;/span&gt;&lt;span style="color:#93c763"&gt;this&lt;/span&gt;&lt;span style="color:#f1f2f3"&gt;.model.save(&lt;/span&gt;
&lt;br&gt;
&lt;span style="color:#f1f2f3"&gt; &lt;/span&gt;&lt;span style="color:#93c763"&gt;this&lt;/span&gt;&lt;span style="color:#f1f2f3"&gt;.model.attributes,&lt;/span&gt;
&lt;br&gt;
&lt;span style="color:#f1f2f3"&gt; {&lt;/span&gt;
&lt;br&gt;
&lt;span style="color:#f1f2f3"&gt; success: &lt;/span&gt;&lt;span style="color:#93c763"&gt;function&lt;/span&gt;&lt;span style="color:#f1f2f3"&gt; (model,
response) {&lt;/span&gt;
&lt;br&gt;
&lt;span style="color:#f1f2f3"&gt; alert(model.get(&lt;/span&gt;&lt;span style="color:#ec7600"&gt;&amp;quot;Title&amp;quot;&lt;/span&gt;&lt;span style="color:#f1f2f3"&gt;)
+ &lt;/span&gt;&lt;span style="color:#ec7600"&gt;&amp;quot; saved&amp;quot;&lt;/span&gt;&lt;span style="color:#f1f2f3"&gt;);&lt;/span&gt;
&lt;br&gt;
&lt;span style="color:#f1f2f3"&gt; model.collection.trigger(&lt;/span&gt;&lt;span style="color:#ec7600"&gt;&amp;quot;itemSaved&amp;quot;&lt;/span&gt;&lt;span style="color:#f1f2f3"&gt;,
model);&lt;/span&gt;
&lt;br&gt;
&lt;span style="color:#f1f2f3"&gt; },&lt;/span&gt;
&lt;br&gt;
&lt;span style="color:#f1f2f3"&gt; error: &lt;/span&gt;&lt;span style="color:#93c763"&gt;function&lt;/span&gt;&lt;span style="color:#f1f2f3"&gt; (model,
response) {&lt;/span&gt;
&lt;br&gt;
&lt;span style="color:#f1f2f3"&gt; alert(&lt;/span&gt;&lt;span style="color:#ec7600"&gt;&amp;quot;problem&amp;quot;&lt;/span&gt;&lt;span style="color:#f1f2f3"&gt;);&lt;/span&gt;
&lt;br&gt;
&lt;span style="color:#f1f2f3"&gt; model.trigger(&lt;/span&gt;&lt;span style="color:#ec7600"&gt;&amp;quot;itemError&amp;quot;&lt;/span&gt;&lt;span style="color:#f1f2f3"&gt;, &lt;/span&gt;&lt;span style="color:#ec7600"&gt;&amp;quot;There
was a problem saving &amp;quot;&lt;/span&gt;&lt;span style="color:#f1f2f3"&gt; + model.get(&lt;/span&gt;&lt;span style="color:#ec7600"&gt;&amp;quot;Title&amp;quot;&lt;/span&gt;&lt;span style="color:#f1f2f3"&gt;));&lt;/span&gt;
&lt;br&gt;
&lt;span style="color:#f1f2f3"&gt; }&lt;/span&gt;
&lt;br&gt;
&lt;span style="color:#f1f2f3"&gt; }&lt;/span&gt;
&lt;br&gt;
&lt;span style="color:#f1f2f3"&gt; );&lt;/span&gt;
&lt;br&gt;
&lt;span style="color:#f1f2f3"&gt; &lt;/span&gt;&lt;span style="color:#93c763"&gt;return&lt;/span&gt;&lt;span style="color:#f1f2f3"&gt; &lt;/span&gt;&lt;span style="color:#93c763"&gt;false&lt;/span&gt;&lt;span style="color:#f1f2f3"&gt;;&lt;/span&gt;
&lt;br&gt;
&lt;span style="color:#f1f2f3"&gt; },&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&gt;
&lt;p&gt;
&amp;#160;
&lt;/p&gt;
&lt;p&gt;
**BREAK**
&lt;/p&gt;
&lt;p&gt;
heading towards this:
&lt;/p&gt;
&lt;p&gt;
&lt;a href="http://www.programgood.net/content/binary/Windows-Live-Writer/VIdPub6.2_8AD5/image_4.png"&gt;&lt;img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://www.programgood.net/content/binary/Windows-Live-Writer/VIdPub6.2_8AD5/image_thumb_1.png" width="473" height="484" /&gt;&lt;/a&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;a href="http://www.programgood.net/content/binary/Windows-Live-Writer/VIdPub6.2_8AD5/image_6.png"&gt;&lt;img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://www.programgood.net/content/binary/Windows-Live-Writer/VIdPub6.2_8AD5/image_thumb_2.png" width="442" height="484" /&gt;&lt;/a&gt;
&lt;/p&gt;
&lt;p&gt;
nice notifications!
&lt;/p&gt;
&lt;p&gt;
Validations are built into backbone:
&lt;/p&gt;
&lt;p&gt;
&lt;a href="http://www.programgood.net/content/binary/Windows-Live-Writer/VIdPub6.2_8AD5/image_8.png"&gt;&lt;img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px" title="image" border="0" alt="image" src="http://www.programgood.net/content/binary/Windows-Live-Writer/VIdPub6.2_8AD5/image_thumb_3.png" width="244" height="185" /&gt;&lt;/a&gt;
&lt;/p&gt;
&lt;h3&gt;Is it Really Worth It?
&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;
Time spent on user experience is really valuable&lt;/li&gt;
&lt;li&gt;
Compelling to use&lt;/li&gt;
&lt;li&gt;
Good for us as developers to stretch&lt;/li&gt;
&lt;/ul&gt;
&lt;img width="0" height="0" src="http://www.programgood.net/aggbug.ashx?id=1425f8be-3b1c-48bb-883d-8c69d77beb5f" /&gt;</description>
      <category>BackboneJS</category>
      <category>UX</category>
      <category>VidPub</category>
    </item>
  </channel>
</rss>