From 571b4cea28f02065714f3671a3f42bcbaf14bdb3 Mon Sep 17 00:00:00 2001 From: Doug Neiner Date: Sat, 10 Mar 2012 22:17:48 -0600 Subject: [PATCH] Switched to coffeescript, fixed RSS feed --- out/atom.xml | 298 ++++++++++---------- out/coding/index.html | 2 + out/js/script.js | 52 ++-- out/learning/index.html | 2 + plugins/dnpygments/dnpygments.plugin.coffee | 1 - src/.htaccess | 6 +- src/documents/atom.xml.eco | 6 +- src/documents/js/script.js.coffee | 24 ++ src/documents/styles/style.css.stylus | 56 ++-- src/public/js/script.js | 31 -- 10 files changed, 239 insertions(+), 239 deletions(-) create mode 100755 src/documents/js/script.js.coffee delete mode 100755 src/public/js/script.js diff --git a/out/atom.xml b/out/atom.xml index 0ab2876..593ec18 100644 --- a/out/atom.xml +++ b/out/atom.xml @@ -3,8 +3,8 @@ Doug Neiner - 2012-03-11T01:17:50Z - http://code.dougneiner.com + 2012-03-11T04:15:52Z + http://code.dougneiner.com/ Doug Neiner doug@dougneiner.com @@ -16,6 +16,8 @@ + + Using CSS Classes with jQuery to Control Visual State @@ -23,184 +25,184 @@ 2012-02-27T05:34:55Z http://code.dougneiner.com/coding/using-css-classes-for-states.html -

Strategy

+ <h2>Strategy</h2> -

Instead of adjusting an HTML element's visual style with jQuery, make the same changes by strategically adding and removing classes. The classes can be applied on the component, region, and page level to control any static state of the host element or its decedents.

+<p>Instead of adjusting an HTML element's visual style with jQuery, make the same changes by strategically adding and removing classes. The classes can be applied on the component, region, and page level to control any static state of the host element or its decedents.</p> -

Symptoms

+<h2>Symptoms</h2> -

You can easily detect when to use this strategy when you discover yourself performing any of the following actions:

+<p>You can easily detect when to use this strategy when you discover yourself performing any of the following actions:</p> -
    -

  • You show, hide, or otherwise visually adjust two or more elements at the same time. The higher the number of elements changed, the greater the need for this strategy.

    • -

  • You need to run any number of jQuery selections via $( selector ), .find(), etc, just to adjust the visual display of those elements.

    • -

  • You use jQuery’s .css() method to change an element from one visual appearance to another predetermined appearance.

    • -
+<ul> +<li><p>You show, hide, or otherwise visually adjust two or more elements at the same time. The higher the number of elements changed, the greater the need for this strategy.</p></li> +<li><p>You need to run any number of jQuery selections via <code>$( selector )</code>, <code>.find()</code>, etc, just to adjust the visual display of those elements.</p></li> +<li><p>You use jQuery’s <a href="http://api.jquery.com/css"><code>.css()</code></a> method to change an element from one visual appearance to another predetermined appearance.</p></li> +</ul> -

Problem 1

+<h3>Problem 1</h3> -

The following code illustrates the first two of these symptoms:

+<p>The following code illustrates the first two of these symptoms:</p> -
$( document ).ready( function () {
-    // Three separate elements are selected
-    var loadingMessage = $( "#loadingMessage" ),
-        header = $( "#header" ),
-        content = $( "#content" );
+<div class='code-block code-lang-javascript'><div class="highlight"><pre><span class="nx">$</span><span class="p">(</span> <span class="nb">document</span> <span class="p">).</span><span class="nx">ready</span><span class="p">(</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
+    <span class="c1">// Three separate elements are selected</span>
+    <span class="kd">var</span> <span class="nx">loadingMessage</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span> <span class="s2">&quot;#loadingMessage&quot;</span> <span class="p">),</span>
+        <span class="nx">header</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span> <span class="s2">&quot;#header&quot;</span> <span class="p">),</span>
+        <span class="nx">content</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span> <span class="s2">&quot;#content&quot;</span> <span class="p">);</span>
 
-    // Three CSS changes are made:
-    loadingMessage.show();
-    header.hide();
-    content.hide();
+    <span class="c1">// Three CSS changes are made:</span>
+    <span class="nx">loadingMessage</span><span class="p">.</span><span class="nx">show</span><span class="p">();</span>
+    <span class="nx">header</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span>
+    <span class="nx">content</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span>
 
-    // Lots of setup and async code here
+    <span class="c1">// Lots of setup and async code here</span>
 
-    function someReadyCallback () {
-        // Three additional CSS changes are made
-        loadingMessage.hide();
-        header.show();
-        content.show();
-    }
-});
-
-
+ <span class="kd">function</span> <span class="nx">someReadyCallback</span> <span class="p">()</span> <span class="p">{</span> + <span class="c1">// Three additional CSS changes are made</span> + <span class="nx">loadingMessage</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span> + <span class="nx">header</span><span class="p">.</span><span class="nx">show</span><span class="p">();</span> + <span class="nx">content</span><span class="p">.</span><span class="nx">show</span><span class="p">();</span> + <span class="p">}</span> +<span class="p">});</span> +</pre></div> +</div> -

Problem 2

+<h3>Problem 2</h3> -

This short example illustrates the third symptom:

+<p>This short example illustrates the third symptom:</p> -
var $notification = $( ".notification" );
-if ( error ) {
-    $notification.css( "color", "red" );
-} else {
-    $notification.css( "color", "green" );
-}
-
-
+<div class='code-block code-lang-javascript'><div class="highlight"><pre><span class="kd">var</span> <span class="nx">$notification</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span> <span class="s2">&quot;.notification&quot;</span> <span class="p">);</span> +<span class="k">if</span> <span class="p">(</span> <span class="nx">error</span> <span class="p">)</span> <span class="p">{</span> + <span class="nx">$notification</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span> <span class="s2">&quot;color&quot;</span><span class="p">,</span> <span class="s2">&quot;red&quot;</span> <span class="p">);</span> +<span class="p">}</span> <span class="k">else</span> <span class="p">{</span> + <span class="nx">$notification</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span> <span class="s2">&quot;color&quot;</span><span class="p">,</span> <span class="s2">&quot;green&quot;</span> <span class="p">);</span> +<span class="p">}</span> +</pre></div> +</div> -

Solutions

+<h2>Solutions</h2> -

Solution 1

+<h3>Solution 1</h3> -

To visually adjust multiple items at the same time, follow these steps:

+<p>To visually adjust <strong>multiple items</strong> at the same time, follow these steps:</p> -
    -
  1. Find a parent element that is shared by the elements you wish to adjust. Often you can use the html or body element, but it can be any element that contains all the target elements.
    2. -
  2. Determine a good CSS class name to describe the combined visual state of the elements, optionally add that class to the HTML and then manipulate it by using jQuery’s addClass, removeClass and toggleClass methods. Prefixing these classes with state- is one way to signify their purpose.
    3. -
  3. Write CSS that scopes selections using a combination of the chosen parent element and the new class that is being applied to it.
    4. -
+<ol> +<li>Find a parent element that is shared by the elements you wish to adjust. Often you can use the <code>html</code> or <code>body</code> element, but it can be any element that contains all the target elements.</li> +<li>Determine a good CSS class name to describe the <em>combined</em> visual state of the elements, optionally add that class to the HTML and then manipulate it by using jQuery’s <a href="http://api.jquery.com/addClass"><code>addClass</code></a>, <a href="http://api.jquery.com/removeClass"><code>removeClass</code></a> and <a href="http://api.jquery.com/toggleClass"><code>toggleClass</code></a> methods. Prefixing these classes with <code>state-</code> is one way to signify their purpose.</li> +<li>Write CSS that scopes selections using a combination of the chosen parent element and the new class that is being applied to it.</li> +</ol> -

The CSS to fix our loadingMessage code would look like this:

+<p>The CSS to fix our <code>loadingMessage</code> code would look like this:</p> -
/* Loading message is hidden by default, only shown during loading */
-#loadingMessage { display: none; }
-.state-loading #loadingMessage { display: block; }
+<div class='code-block code-lang-css'><div class="highlight"><pre><span class="c">/* Loading message is hidden by default, only shown during loading */</span>
+<span class="nf">#loadingMessage</span> <span class="p">{</span> <span class="k">display</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span> <span class="p">}</span>
+<span class="nc">.state-loading</span> <span class="nf">#loadingMessage</span> <span class="p">{</span> <span class="k">display</span><span class="o">:</span> <span class="k">block</span><span class="p">;</span> <span class="p">}</span>
 
-/* Content and Header are hidden during loading */
-.state-loading #content,
-.state-loading #header { display: none; }
-
-
+<span class="c">/* Content and Header are hidden during loading */</span> +<span class="nc">.state-loading</span> <span class="nf">#content</span><span class="o">,</span> +<span class="nc">.state-loading</span> <span class="nf">#header</span> <span class="p">{</span> <span class="k">display</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span> <span class="p">}</span> +</pre></div> +</div> -

Since the page will always start in a loading state, we add the class of loading directly to the <body> element:

+<p>Since the page will always start in a loading state, we add the class of <code>loading</code> directly to the <code>&lt;body&gt;</code> element:</p> -
<body class="state-loading">
-
-
+<div class='code-block code-lang-html'><div class="highlight"><pre><span class="nt">&lt;body</span> <span class="na">class=</span><span class="s">&quot;state-loading&quot;</span><span class="nt">&gt;</span> +</pre></div> +</div> -

Finally, we delete almost all the code we had before, and just remove the loading class when loading is complete:

+<p>Finally, we delete almost all the code we had before, and just remove the <code>loading</code> class when loading is complete:</p> -
// Lots of setup and async code here
+<div class='code-block code-lang-javascript'><div class="highlight"><pre><span class="c1">// Lots of setup and async code here</span>
 
-function someReadyCallback () {
-    // The app is loaded!
-    $( document.body ).removeClass( "state-loading" );
-} 
-
-
+<span class="kd">function</span> <span class="nx">someReadyCallback</span> <span class="p">()</span> <span class="p">{</span> + <span class="c1">// The app is loaded!</span> + <span class="nx">$</span><span class="p">(</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span> <span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span> <span class="s2">&quot;state-loading&quot;</span> <span class="p">);</span> +<span class="p">}</span> +</pre></div> +</div> -

Solution 2

+<h3>Solution 2</h3> -

To adjust the visual display of a single item, follow these steps:

+<p>To adjust the visual display of a <strong>single item</strong>, follow these steps:</p> -
    -
  1. Any aspect of the visual display that will not change should be defined as the element’s default display.
    2. -
  2. Determine a good class name to describe the new visual state of the element, optionally add that class to the HTML for the element and then manipulate it by using jQuery’s class manipulation methods.
    3. -
  3. Write CSS that scopes the new styles to the chosen element with the new class applied. You can also use multiple class syntax if you the element you are styling is already defined by a class: .notification.ready (Multiple class syntax is not supported by IE6 and lower).
    4. -
+<ol> +<li>Any aspect of the visual display that will not change should be defined as the element’s default display.</li> +<li>Determine a good class name to describe the new visual state of the element, optionally add that class to the HTML for the element and then manipulate it by using jQuery’s class manipulation methods.</li> +<li>Write CSS that scopes the new styles to the chosen element with the new class applied. You can also use multiple class syntax if you the element you are styling is already defined by a class: <code>.notification.ready</code> (Multiple class syntax is not supported by IE6 and lower).</li> +</ol> -

If we assume the default state of our notification display is green, we can use the following CSS:

+<p>If we assume the default state of our notification display is <code>green</code>, we can use the following CSS:</p> -
.notification { color: green; }
-.notification.state-error { color: red; }
-
-
+<div class='code-block code-lang-css'><div class="highlight"><pre><span class="nc">.notification</span> <span class="p">{</span> <span class="k">color</span><span class="o">:</span> <span class="nb">green</span><span class="p">;</span> <span class="p">}</span> +<span class="nc">.notification.state-error</span> <span class="p">{</span> <span class="k">color</span><span class="o">:</span> <span class="nb">red</span><span class="p">;</span> <span class="p">}</span> +</pre></div> +</div> -

The following code will add the class of state-error when our variable error is true:

+<p>The following code will add the class of <code>state-error</code> when our variable <code>error</code> is true:</p> -
var $notification = $( ".notification" );
-$notification.toggleClass( "state-error", error );
-
-
+<div class='code-block code-lang-javascript'><div class="highlight"><pre><span class="kd">var</span> <span class="nx">$notification</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span> <span class="s2">&quot;.notification&quot;</span> <span class="p">);</span> +<span class="nx">$notification</span><span class="p">.</span><span class="nx">toggleClass</span><span class="p">(</span> <span class="s2">&quot;state-error&quot;</span><span class="p">,</span> <span class="nx">error</span> <span class="p">);</span> +</pre></div> +</div> -

Strengths

+<h2>Strengths</h2> -
    -
  • Speed – By strategically using classes instead of direct manipulation, you remove the need to find, then adjust multiple elements. Very little code is needed to add or remove a class, replaced potentially slow moving code (selectors and traversal) with extremely efficient code. By leaving the bulk of the changes up to the browser, you also capitalize on the speed of the browser’s CSS engine.
    • -
  • Separation of functionality and style – By only manipulating a class name, you leave the bulk of the visual definition in the CSS files – where they belong. In a team setting, this also allows a designer to modify the design without interacting with the JavaScript.
    • -
  • Self describing code – If the class names you choose are descriptive, then where they are added and removed is afforded an immediate increased in clarity (For a caveat to this point, see the note about Education at the end of this post)
    • -
  • Scoped events with delegation – You can leverage these class names to automatically filter out unwanted event triggers based on state. Look at the following example for ideas:
    • -
+<ul> +<li><strong>Speed</strong> – By strategically using classes instead of direct manipulation, you remove the need to find, then adjust multiple elements. Very little code is needed to add or remove a class, replaced potentially slow moving code (selectors and traversal) with extremely efficient code. By leaving the bulk of the changes up to the browser, you also capitalize on the speed of the browser’s CSS engine.</li> +<li><strong>Separation of functionality and style</strong> – By only manipulating a class name, you leave the bulk of the visual definition in the CSS files – where they belong. In a team setting, this also allows a designer to modify the design without interacting with the JavaScript.</li> +<li><strong>Self describing code</strong> – If the class names you choose are descriptive, then where they are added and removed is afforded an immediate increased in clarity (For a caveat to this point, see the note about <a href="#education">Education</a> at the end of this post)</li> +<li><strong>Scoped events with delegation</strong> – You can leverage these class names to automatically filter out unwanted event triggers based on state. Look at the following example for ideas:</li> +</ul> -
$( document )
+<div class='code-block code-lang-javascript'><div class="highlight"><pre><span class="nx">$</span><span class="p">(</span> <span class="nb">document</span> <span class="p">)</span>
 
-    // perform the save, but not if we are still
-    // loading or in the middle of a save
-    .on( "click", "body:not(.loading, .saving) button.save", function () {        
-        ...
-    })
+    <span class="c1">// perform the save, but not if we are still</span>
+    <span class="c1">// loading or in the middle of a save</span>
+    <span class="p">.</span><span class="nx">on</span><span class="p">(</span> <span class="s2">&quot;click&quot;</span><span class="p">,</span> <span class="s2">&quot;body:not(.loading, .saving) button.save&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>        
+        <span class="p">...</span>
+    <span class="p">})</span>
 
-    // prevent forms from submitting
-    // if a save is in progress
-    .on( "submit", "body.saving", function ( e ) {
-        e.preventDefault();
-    })
+    <span class="c1">// prevent forms from submitting</span>
+    <span class="c1">// if a save is in progress</span>
+    <span class="p">.</span><span class="nx">on</span><span class="p">(</span> <span class="s2">&quot;submit&quot;</span><span class="p">,</span> <span class="s2">&quot;body.saving&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span> <span class="nx">e</span> <span class="p">)</span> <span class="p">{</span>
+        <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
+    <span class="p">})</span>
 
-    // only run the setup one time per element
-    .on( "click", ".widget:not(.widget-setup)", function () {
-        ...
-        $( this ).addClass( "widget-setup" );
-    });
-
-
+ <span class="c1">// only run the setup one time per element</span> + <span class="p">.</span><span class="nx">on</span><span class="p">(</span> <span class="s2">&quot;click&quot;</span><span class="p">,</span> <span class="s2">&quot;.widget:not(.widget-setup)&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> + <span class="p">...</span> + <span class="nx">$</span><span class="p">(</span> <span class="k">this</span> <span class="p">).</span><span class="nx">addClass</span><span class="p">(</span> <span class="s2">&quot;widget-setup&quot;</span> <span class="p">);</span> + <span class="p">});</span> +</pre></div> +</div> -

Notes

+<h2>Notes</h2> -

Transitions

+<h3>Transitions</h3> -

Often the move from one state to another is accompanied by some sort of animation. Since much of the time these transitions are visual finesse, I suggest using CSS3 transitions and animations to implement the transitions. The fallback in unsupported browsers will simply be an instant change from one state to the next. In situations where the animation is crucial to the interaction, you may not be able to leverage everything covered in this article.

+<p>Often the move from one state to another is accompanied by some sort of animation. Since much of the time these transitions are visual finesse, I suggest using CSS3 transitions and animations to implement the transitions. The fallback in unsupported browsers will simply be an instant change from one state to the next. In situations where the animation is crucial to the interaction, you may not be able to leverage everything covered in this article.</p> -

Using Attributes instead of Classes

+<h3>Using Attributes instead of Classes</h3> -

You can also use attribute changes to control flow, though I haven't done any speed comparisons between the two methods. Here is an example using a custom HTML5 data attribute named data-state:

+<p>You can also use attribute changes to control flow, though I haven't done any speed comparisons between the two methods. Here is an example using a custom HTML5 data attribute named <code>data-state</code>:</p> -
<body data-state="loading">
-
-
+<div class='code-block code-lang-html'><div class="highlight"><pre><span class="nt">&lt;body</span> <span class="na">data-state=</span><span class="s">&quot;loading&quot;</span><span class="nt">&gt;</span> +</pre></div> +</div> -
body[data-state="loading"] #loadingMessage,
-body[data-state="saving"] #savingMessage { display: block; }
-
-
+<div class='code-block code-lang-css'><div class="highlight"><pre><span class="nt">body</span><span class="o">[</span><span class="nt">data-state</span><span class="o">=</span><span class="s2">&quot;loading&quot;</span><span class="o">]</span> <span class="nf">#loadingMessage</span><span class="o">,</span> +<span class="nt">body</span><span class="o">[</span><span class="nt">data-state</span><span class="o">=</span><span class="s2">&quot;saving&quot;</span><span class="o">]</span> <span class="nf">#savingMessage</span> <span class="p">{</span> <span class="k">display</span><span class="o">:</span> <span class="k">block</span><span class="p">;</span> <span class="p">}</span> +</pre></div> +</div> -
$body.attr( "state", "ready" ); // From loading to ready
-// ... other code ...
-$body.attr( "state", "saving" ); // Switch to saving
-
-
+<div class='code-block code-lang-javascript'><div class="highlight"><pre><span class="nx">$body</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span> <span class="s2">&quot;state&quot;</span><span class="p">,</span> <span class="s2">&quot;ready&quot;</span> <span class="p">);</span> <span class="c1">// From loading to ready</span> +<span class="c1">// ... other code ...</span> +<span class="nx">$body</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span> <span class="s2">&quot;state&quot;</span><span class="p">,</span> <span class="s2">&quot;saving&quot;</span> <span class="p">);</span> <span class="c1">// Switch to saving</span> +</pre></div> +</div> -

Education

+<h3 id="education">Education</h3> -

If you work in a team environment, it would be wise to discuss this strategy with your team before implementing. JavaScript developers who do not work with CSS frequently may not understand the ramifications of the addClass and removeClass methods throughout your code.

+<p>If you work in a team environment, it would be wise to discuss this strategy with your team before implementing. JavaScript developers who do not work with CSS frequently may not understand the ramifications of the <code>addClass</code> and <code>removeClass</code> methods throughout your code.</p> @@ -220,9 +222,9 @@ 2012-02-18T20:42:09Z http://code.dougneiner.com/learning/essential-javascript-design-patterns.html -

I really enjoyed Addy's presentation at the jQuery UK Conference where he touched on just a few patterns mentioned in this free online book. I haven't read through it yet, but I am super excited to learn more about some of these patterns. I think I will also find out the names for a number of the patterns I already use!

+ <p>I really enjoyed Addy's presentation at the jQuery UK Conference where he touched on just a few patterns mentioned in this free online book. I haven't read through it yet, but I am super excited to learn more about some of these patterns. I think I will also find out the names for a number of the patterns I already use!</p> -

View Link →

+ <p><a href="http://addyosmani.com/resources/essentialjsdesignpatterns/book/">View Link →</a></p> @@ -242,22 +244,22 @@ 2010-09-20T05:00:00Z http://code.dougneiner.com/coding/stop-using-return-false.html -

Probably one of the first topics covered when you get started learning about jQuery events is the concept of canceling the browser’s default behavior. For instance, a beginner click tutorial may include this:

+ <p>Probably one of the first topics covered when you get started learning about jQuery events is the concept of canceling the browser’s default behavior. For instance, a beginner click tutorial may include this:</p> -
$("a.toggle").click(function () {
-    $("#mydiv").toggle();
-    return false; // Prevent browser from visiting `#`
-});
-
-
+<div class='code-block code-lang-javascript'><div class="highlight"><pre><span class="nx">$</span><span class="p">(</span><span class="s2">&quot;a.toggle&quot;</span><span class="p">).</span><span class="nx">click</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> + <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#mydiv&quot;</span><span class="p">).</span><span class="nx">toggle</span><span class="p">();</span> + <span class="k">return</span> <span class="kc">false</span><span class="p">;</span> <span class="c1">// Prevent browser from visiting `#`</span> +<span class="p">});</span> +</pre></div> +</div> -

This function toggles the hiding and displaying of #mydiv, then cancels the browser’s default behavior of visiting the href of the anchor tag.

+<p>This function toggles the hiding and displaying of <code>#mydiv</code>, then cancels the browser’s default behavior of visiting the href of the anchor tag.</p> -

It is in these very first examples that bad habits are formed as users continue to use return false; whenever they want to cancel the default browser action. I am going to cover two very important topics in this article relating to the canceling of browser events.

+<p>It is in these very first examples that bad habits are formed as users continue to use <code>return false;</code> whenever they want to cancel the default browser action. I am going to cover two very important topics in this article relating to the canceling of browser events.</p> -

Continue reading at Fuel Your Coding…

+<p><a href="http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/">Continue reading at Fuel Your Coding…</a></p> -

This article was written for and published at Fuel Your Coding, on September 20, 2010. The material covered still applies to jQuery code written today.

+<p><em>This article was written for and published at Fuel Your Coding, on September 20, 2010. The material covered still applies to jQuery code written today.</em></p> @@ -271,11 +273,11 @@ 2010-05-21T05:00:00Z http://code.dougneiner.com/coding/introduction-to-stateful-widgets.html -

The jQuery UI Widget Factory is a separate component of the jQuery UI Library that provides an easy, object oriented way to create stateful jQuery plugins. Plugins created using the Widget Factory can be simple or very robust as evidenced by the official jQuery UI widgets, each of which are built on top of the Widget Factory. This article will first look briefly at why you might want to use the Widget Factory, then present an in depth walkthrough of creating a stateful plugin using the Factory.

+ <p>The jQuery UI Widget Factory is a separate component of the <a href="http://jqueryui.com">jQuery UI</a> Library that provides an easy, object oriented way to create stateful jQuery plugins. Plugins created using the Widget Factory can be simple or very robust as evidenced by the official jQuery UI widgets, each of which are built on top of the Widget Factory. This article will first look briefly at why you might want to use the Widget Factory, then present an in depth walkthrough of creating a stateful plugin using the Factory.</p> -

Continue reading at Script Junkie…

+<p><a href="http://msdn.microsoft.com/en-us/scriptjunkie/ff706600.aspx">Continue reading at Script Junkie…</a></p> -

This article was written for and published at Script Junkie, on May 21, 2010. This article is current for jQuery UI 1.8, though 1.9 will bring a number of changes when released.

+<p><em>This article was written for and published at Script Junkie, on May 21, 2010. This article is current for jQuery UI 1.8, though 1.9 will bring a number of changes when released.</em></p> diff --git a/out/coding/index.html b/out/coding/index.html index 61e3139..1070172 100644 --- a/out/coding/index.html +++ b/out/coding/index.html @@ -76,6 +76,8 @@

Coding

+ +

  • diff --git a/out/js/script.js b/out/js/script.js index 5ab1670..00a97fe 100644 --- a/out/js/script.js +++ b/out/js/script.js @@ -1,31 +1,25 @@ -(function () { +(function() { -var className = document.body.className, - index = /^page-(coding|learning)-index/.test( className ), - comments_enabled = !index && /^page-(coding|learning)/.test( className ), - comment_container; + (function() { + var className, comment_container, comments_enabled, dsqLoad, index; + className = document.body.className; + index = /^page-(coding|learning)-index/.test(className); + comments_enabled = !index && /^page-(coding|learning)/.test(className); + window.disqus_developer = 0; + window.disqus_shortname = 'dougneiner'; + if (!index) { + comment_container = document.getElementById("disqus_thread"); + if (!comment_container) return; + dsqLoad = function() { + var dsq; + dsq = document.createElement('script'); + dsq.type = 'text/javascript'; + dsq.async = true; + dsq.src = "http://" + window.disqus_shortname + ".disqus.com/embed.js"; + return (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); + }; + return dsqLoad(); + } + })(); -// Set global config for Disqus -window.disqus_developer = 0; -window.disqus_shortname = 'dougneiner'; - -if ( index ) { - // Show comment count -} else { - // Enable comments - comment_container = document.getElementById( "disqus_thread" ); - - if ( !comment_container ) { - return; - } - - // Load Disqus - (function() { - var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; - dsq.src = 'http://' + window.disqus_shortname + '.disqus.com/embed.js'; - (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); - })(); -} - - -}()); \ No newline at end of file +}).call(this); diff --git a/out/learning/index.html b/out/learning/index.html index 7b0573d..1fa91cc 100644 --- a/out/learning/index.html +++ b/out/learning/index.html @@ -84,6 +84,8 @@

    Learning

    + +

  • diff --git a/plugins/dnpygments/dnpygments.plugin.coffee b/plugins/dnpygments/dnpygments.plugin.coffee index 6e67f3b..1c9d11e 100644 --- a/plugins/dnpygments/dnpygments.plugin.coffee +++ b/plugins/dnpygments/dnpygments.plugin.coffee @@ -44,7 +44,6 @@ module.exports = (BasePlugin) -> finalize = () -> document.body = document.body.replace rFormatBlocks, (a, b, lang, html) -> - console.log( processed[ 0 ] ) processed.shift() next() diff --git a/src/.htaccess b/src/.htaccess index c384ada..88125ef 100644 --- a/src/.htaccess +++ b/src/.htaccess @@ -10,4 +10,8 @@ AddOutputFilterByType DEFLATE text/html text/css application/x-javascript text/j ExpiresDefault "access plus 10 years" Header unset cache-control: Header append cache-control: "max-age=315360000" - \ No newline at end of file + + +RewriteEngine on +RewriteCond %{HTTP_USER_AGENT} !FeedBurner +RewriteRule ^atom\.xml$ http://feeds.feedburner.com/dougneiner/code [R,L] \ No newline at end of file diff --git a/src/documents/atom.xml.eco b/src/documents/atom.xml.eco index 8b97ee8..d492806 100644 --- a/src/documents/atom.xml.eco +++ b/src/documents/atom.xml.eco @@ -4,7 +4,7 @@ <%= @site.date.toIsoDateString() %> - http://code.dougneiner.com + http://code.dougneiner.com/ Doug Neiner doug@dougneiner.com @@ -21,9 +21,9 @@ <% end %> <%= document.date.toIsoDateString() %> http://code.dougneiner.com<%= document.url %> - <%- (document.contentRenderedWithoutLayouts || "").replace( /

    /g, '') %> + <%= (document.contentRenderedWithoutLayouts || "").replace( /
    /g, '') %> <% if document.link: %> -

    View Link →

    + <p><a href="<%= document.link %>">View Link →</a></p> <% end %> diff --git a/src/documents/js/script.js.coffee b/src/documents/js/script.js.coffee new file mode 100755 index 0000000..dacad2b --- /dev/null +++ b/src/documents/js/script.js.coffee @@ -0,0 +1,24 @@ +(() -> + className = document.body.className + index = /^page-(coding|learning)-index/.test className + comments_enabled = !index and /^page-(coding|learning)/.test className + + # Set global config for Disqus + window.disqus_developer = 0 + window.disqus_shortname = 'dougneiner' + + unless index + # Enable comments + comment_container = document.getElementById( "disqus_thread" ) + return unless comment_container + + # Load Disqus + dsqLoad = () -> + dsq = document.createElement('script') + dsq.type = 'text/javascript' + dsq.async = true + dsq.src = "http://#{window.disqus_shortname}.disqus.com/embed.js" + (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq) + + dsqLoad() +)() \ No newline at end of file diff --git a/src/documents/styles/style.css.stylus b/src/documents/styles/style.css.stylus index 00a3bb8..d5fb6ac 100644 --- a/src/documents/styles/style.css.stylus +++ b/src/documents/styles/style.css.stylus @@ -28,6 +28,36 @@ $l_purple = #8959a8 $main = $l_blue +box-shadow() { + -webkit-box-shadow: arguments; + -moz-box-shadow: arguments; + box-shadow: arguments; +} + +round( size ) { + -webkit-border-radius: size + -moz-border-radius: size + border-radius: size +} + +round-top( size ) { + -webkit-border-top-left-radius: size + -webkit-border-top-right-radius: size + -moz-border-radius-topleft: size + -moz-border-radius-topright: size + border-top-left-radius: size + border-top-right-radius: size +} + +round-bottom( size ) { + -webkit-border-bottom-left-radius: size + -webkit-border-bottom-right-radius: size + -moz-border-radius-bottomleft: size + -moz-border-radius-bottomright: size + border-bottom-left-radius: size + border-bottom-right-radius: size +} + pre { margin: 0; padding: 0; @@ -218,32 +248,6 @@ body.sub-page > header:not(:hover) > a h1 { background-image: linear-gradient(to right, rgba(0,0,0,0.05), rgba(0,0,0,0.05)), url("../img/bg-noise.png"); } -box-shadow() - -webkit-box-shadow: arguments; - -moz-box-shadow: arguments; - box-shadow: arguments; - -round( size ) - -webkit-border-radius: size - -moz-border-radius: size - border-radius: size - -round-top( size ) - -webkit-border-top-left-radius: size - -webkit-border-top-right-radius: size - -moz-border-radius-topleft: size - -moz-border-radius-topright: size - border-top-left-radius: size - border-top-right-radius: size - -round-bottom( size ) - -webkit-border-bottom-left-radius: size - -webkit-border-bottom-right-radius: size - -moz-border-radius-bottomleft: size - -moz-border-radius-bottomright: size - border-bottom-left-radius: size - border-bottom-right-radius: size - .nameplate { width: 202px; margin: 35px auto 25px auto; diff --git a/src/public/js/script.js b/src/public/js/script.js deleted file mode 100755 index 5ab1670..0000000 --- a/src/public/js/script.js +++ /dev/null @@ -1,31 +0,0 @@ -(function () { - -var className = document.body.className, - index = /^page-(coding|learning)-index/.test( className ), - comments_enabled = !index && /^page-(coding|learning)/.test( className ), - comment_container; - -// Set global config for Disqus -window.disqus_developer = 0; -window.disqus_shortname = 'dougneiner'; - -if ( index ) { - // Show comment count -} else { - // Enable comments - comment_container = document.getElementById( "disqus_thread" ); - - if ( !comment_container ) { - return; - } - - // Load Disqus - (function() { - var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; - dsq.src = 'http://' + window.disqus_shortname + '.disqus.com/embed.js'; - (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); - })(); -} - - -}()); \ No newline at end of file