tag:blogger.com,1999:blog-88929356069544773632024-03-05T14:46:27.090-06:00Ryan Anklam's Web Development BlogAnonymoushttp://www.blogger.com/profile/14442784579016175402noreply@blogger.comBlogger88125tag:blogger.com,1999:blog-8892935606954477363.post-55635436559826236802013-08-14T09:40:00.005-05:002013-08-14T09:40:48.073-05:00Indiana Jones and the Temple of DOM SlidesI recently gave a talk at ThatConference 2013 titled "Indiana Jones and the Temple of DOM" in which I received a lot of requests to share the slides from attendees so I figured I'd share them with everyone. I'll likely turn this into a video that I'll post online but until I get to that please enjoy the slides here:<div>
<br /></div>
<div>
<a href="https://www.dropbox.com/s/ohm5ogutiel77ib/Temple-Of-DOM.pdf">https://www.dropbox.com/s/ohm5ogutiel77ib/Temple-Of-DOM.pdf</a></div>
<div>
<br /></div>
<div>
I'd also love to hear your feedback and suggestions how I could make it better!</div>
Anonymoushttp://www.blogger.com/profile/14442784579016175402noreply@blogger.comtag:blogger.com,1999:blog-8892935606954477363.post-4691398090110134482013-08-01T13:22:00.002-05:002013-08-01T13:25:32.901-05:00Sessions I'm Excited to See at ThatConference 2013<div style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
With <a href="http://www.thatconference.com/" target="_blank">ThatConference</a> right around the corner I thought I'd share what sessions I'm excited about attending. There is a ton of great content to choose from so making my decisions was quite hard. I ended up going with with a focus on Angular JS and CSS. <br />
<br />
What sessions are you most looking forward to? </div>
<div style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
<strong>Indiana Jones and the Temple of DOM</strong></div>
<div style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
<em>me</em></div>
<div style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
How could I expect people to want to come to my presentation if I wasn't excited about it myself. I think I've put together a pretty fun presentation that I hope everyone will enjoy.</div>
<div style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
<strong>Angular JS Crash Course</strong></div>
<div style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
<em>Ian Muir</em></div>
<div style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
I've been learning a lot of Ember.js lately and I'm very happy with it, however it seems like a lot of people are turning to Angular lately. I'm really looking forward to seeing what Angular has to offer.</div>
<div style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
<strong>Tubing Down the Asset Pipeline in Node.js</strong></div>
<div style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
<em>Jacob Gable</em></div>
<div style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
I've used Node for a few things, however, I'd love to learn a lot more about it.</div>
<div style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
**JavaScript broke my heart. And then I met AngularJS.</div>
<div style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
<em>Joe Eams</em></div>
<div style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
While I'm sad that there are no Ember talks at ThatConference, I'm glad that I'll get to take a longer look at Angular. Perhaps I'm missing something and I'll fall in love with it as much as everybody else after I see more of it.</div>
<div style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
<strong>Front End Legos: Better Design with Reusable HTML & CSS</strong></div>
<div style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
<em>Shay Howe</em></div>
<div style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
I've been spending a lot of time properly learning CSS lately. That means less hacks and more of being able to understand and explain what I'm doing. This means immersing myself into CSS as much as I can so this one is a no-brainer for me.</div>
<div style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
**Adventures in CSS: Advanced Techniques for a Fabulous Front-End</div>
<div style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
<em>Amelia Marschall-Miller</em></div>
<div style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
This one sounds really fun! It sounds like I'm going to learn a lot from this session and hopefully bring back some new tools to use.</div>
<div style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
<strong>Laniard schmaniard! Spruce Up Your Existing Website With HTML5, CSS3, and Responsive Design</strong></div>
<div style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
<em>Wolf Loescher, Bertine Buchan</em></div>
<div style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
Responsive design is so hot right now. I know enough about it, and have worked on a few responsive sites, but I can always learn more. This session</div>
Anonymoushttp://www.blogger.com/profile/14442784579016175402noreply@blogger.comtag:blogger.com,1999:blog-8892935606954477363.post-79161960163924931572013-06-26T07:52:00.002-05:002013-06-26T19:39:31.949-05:00A Look Into How Parameters Are Passed In JavaScript<span style="font-family: inherit;">I recently came across a question on StackOverflow about how JavaScript handles parameters, if they are passed by value or by reference. There seemed to be a lot of confusion and misinformation about what is actually happening behind the scenes.</span><br />
<span style="font-family: inherit;"><br />
</span> <span style="font-family: inherit;">TLDR; <strong>All</strong> arguments are passed by value in JavaScript, however, when dealing with non-primitive datatypes like objects and arrays a variable is created that points to the location of the object memory that is then is passed into the function. This means that changes to the variable inside the function will affect the original object's values. Once the argument is reassigned (e.g. <code>arg = {}</code> ) the variable now has the location of the new object in it so the original variable is no longer changed when the value changes.</span><br />
<br />
<h4>
<span style="font-family: inherit; font-size: small;">By Reference vs. By Value</span></h4>
<span style="font-family: inherit;">Let's start be defining exactly what by passing a variable reference and by value actually means.</span><br />
<br />
<h4>
<span style="font-family: inherit;">By Reference</span></h4>
<span style="font-family: inherit;">If a parameter is being passed into a function by reference it means that only a reference to the variable is being passed into the function is passed as the argument. The variable in the function and the variable that is passed into the function are actually pointing to the same location in memory. Put simply, if the value is modified inside the function the original value is also changed.</span><br />
<br />
<h4>
<span style="font-family: inherit;">By Value</span></h4>
<span style="font-family: inherit;">If a value is being passed into a function by value it means that a copy of the variable is being passed into the function. The variable in the function and the variable that is passed into the function are two separate variables. Put simply, if the value is modified inside a function the original value will remain unchanged.</span><br />
<br />
<h4>
<span style="font-family: inherit;">By The Book</span></h4>
<span style="font-family: inherit;">According to MDN:</span><br />
<blockquote>
<span style="font-family: inherit;">The parameters of a function call are the function's arguments. Arguments are passed to functions by value. If the function changes the value of an argument, this change is not reflected globally or in the calling function. However, object references are values, too, and they are special: if the function changes the referred object's properties, that change is visible outside the function.</span></blockquote>
<h4>
<span style="font-family: inherit;">Huh?</span></h4>
<span style="font-family: inherit;">Let me try to describe this with pictures. First let's create a variable that is a simple object literal:</span><br />
<span style="font-family: inherit;"><br />
</span> <code><span style="background-color: #cccccc; font-family: Courier New, Courier, monospace;">var obj = { foo : 'foo' };</span></code><br />
<span style="font-family: inherit;"><br />
</span> <span style="font-family: inherit;">When we do this the variable obj is really just a reference to a location in memory that holds the actual object:</span><br />
<span style="font-family: inherit;"><br />
</span> <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTksvvInbeq64cdCuaL7tAKT88xTcYevoQjZdMSL5x2QHVpDX8sySin258_vMhPuthYYfULoqsUahYs-KLzj6JL7G8ggXigGJ1rfAzHnffoeXQDHrm3cH7npzjKfe9A9GBEEHRI5it_8_W/s1600/illustration-one.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: inherit;"><img border="0" height="86" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTksvvInbeq64cdCuaL7tAKT88xTcYevoQjZdMSL5x2QHVpDX8sySin258_vMhPuthYYfULoqsUahYs-KLzj6JL7G8ggXigGJ1rfAzHnffoeXQDHrm3cH7npzjKfe9A9GBEEHRI5it_8_W/s320/illustration-one.png" width="320" /></span></a></div>
<span style="font-family: inherit;"><br />
</span> <span style="font-family: inherit;">If a function is invoked and obj is passed into the function as an argument that reference is copied and passed into the function. In other words, the reference is being passed <em>by value</em>:</span><br />
<span style="font-family: inherit;"><br />
</span> <code><span style="background-color: #cccccc; font-family: Courier New, Courier, monospace;">doSomething( obj );</span></code><br />
<span style="font-family: inherit;"><br />
</span> <span style="font-family: inherit;">This is where things start to get interesting. The pointer to the object is passed into the function call by value. In other words, a copy of the pointer is created and passed into the function call. We now have two variables that point to the <strong>same</strong> object:</span><br />
<span style="font-family: inherit;"><br />
</span> <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBE-smXwKnGuBNtg7UVz05I2vy0GUXavft9GhriGHyMR8Xt6W_I2cU0nsZk1kJUULHaLnfuZt40F9COy4LQq1xAq80rW8JE0js_5bR9J9RSWpwIyQRrwY3tLK2cv31yrm7bV-vmJqigvdF/s1600/illustration-two.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: inherit;"><img border="0" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBE-smXwKnGuBNtg7UVz05I2vy0GUXavft9GhriGHyMR8Xt6W_I2cU0nsZk1kJUULHaLnfuZt40F9COy4LQq1xAq80rW8JE0js_5bR9J9RSWpwIyQRrwY3tLK2cv31yrm7bV-vmJqigvdF/s320/illustration-two.png" width="320" /></span></a></div>
<span style="font-family: inherit;"><br />
</span> <span style="font-family: inherit;"><br />
</span> <span style="font-family: inherit;">At this point if the argument is <strong>modified</strong> inside the function call the changes will be reflected on the original varialbe outside of the function call. However if the argument is <strong>reassigned</strong> inside the function the reference will no longer point to the original object and changes inside the function will no longer affect the variable outside the function call:</span><br />
<span style="font-family: inherit;"><br />
</span> <br />
<pre style="background-color: #cccccc;"><code><span style="font-family: Courier New, Courier, monospace;">function doSomething( obj ){
obj = { baz : 'baz' }; //reassigns the pointer
}</span></code></pre>
<span style="font-family: inherit;"> </span><span style="font-family: inherit;"><br />
</span> <span style="font-family: inherit;">After reassignment our objects in memory look like this:</span><br />
<span style="font-family: inherit;"><br />
</span> <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBe_jti-VhIp8vY366C0PzJaCtbNRvNFIq2fp2QVrHVkC-uagnWMGf73SG2wU5_2L2CavMhJvpTMXOC3HMQ8K_uXD6a8wSFnzE8sh1CI8YQ92ItfrJl8GRE0I1i48iBbmpm0IZsLAURkje/s1600/illustration-three.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: inherit;"><img border="0" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBe_jti-VhIp8vY366C0PzJaCtbNRvNFIq2fp2QVrHVkC-uagnWMGf73SG2wU5_2L2CavMhJvpTMXOC3HMQ8K_uXD6a8wSFnzE8sh1CI8YQ92ItfrJl8GRE0I1i48iBbmpm0IZsLAURkje/s320/illustration-three.png" width="320" /></span></a></div>
<span style="font-family: inherit;"><br />
</span> <span style="font-family: inherit;"><br />
</span> <br />
<h3>
<span style="font-family: inherit;">What about primitives?</span></h3>
<span style="font-family: inherit;">At this point you might be asking yourself, what about primitive datatypes like strings and numbers? The truth is that the point is quite moot since primitives are <em>immutable</em>, which means they cannot be changed. When a primitive is changed a new variable is created and reassigned to the original. Since this reassignment happens every time a primitive is changed it doesn't matter, the primitive will never point to the original location in memory once its changed so you'll always end up with the same behavior as if it was being passed by value.</span>Anonymoushttp://www.blogger.com/profile/14442784579016175402noreply@blogger.comtag:blogger.com,1999:blog-8892935606954477363.post-5123377448520093242013-05-24T15:48:00.000-05:002013-05-24T15:49:47.508-05:00JavaScript Inheritance - HowTo Shoot Yourself In the Foot With Prototypes!<br />
<div class="p1">One thing that has long eluded me is a good understanding how JavaScript inheritance works when the parent constructor function has instance properties. The following code has a Widget parent class that has a messages properties. In this case we want each instance to be initialized with an empty messages array:</div><br />
<script src="https://gist.github.com/bittersweetryan/5645870.js"></script><br />
<br />
<div class="p1">Before we set SubWidget's prototype to a new instance of our Prototype constructor on line 12 we get an object graph that looks like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE0ofVA60_ivXLxRREUpEkhACvGlfCT20oci6Nb8AanLD4EPjciYPH7Eh4Y7EAqVqscayWnFDQVFHBhqdOBGpSvBM6o6IvtxcYOOHvR_N4TPCStLei8UzfbT8yY6KwhLmZmcXknSusbUfW/s1600/JavaScriptPrototypes.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="175" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE0ofVA60_ivXLxRREUpEkhACvGlfCT20oci6Nb8AanLD4EPjciYPH7Eh4Y7EAqVqscayWnFDQVFHBhqdOBGpSvBM6o6IvtxcYOOHvR_N4TPCStLei8UzfbT8yY6KwhLmZmcXknSusbUfW/s400/JavaScriptPrototypes.png" width="400" /></a></div><div class="separator" style="clear: both; text-align: left;">After the code on line 12 is run the <span style="color: blue; font-family: Courier New, Courier, monospace;">new </span>keyword does its magic and ties everything together creating a new inheritance tree and a new scope. Our object graph now looks something like this:</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4DK0QZLeQQDZlfFP8Ulp1WunD-Lf84fmkz4y0WPgzwGdtqbSg7NrAojbRZzmTdP-D_t7FFsErSThl4wtKnvvQEODHqnLQp6RZ-TkZXNfCCS-MuNeG5iuzgh5zB8QA7Ksj9wOxCMiL46Zy/s1600/JavaScriptPrototypes+(1).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="291" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4DK0QZLeQQDZlfFP8Ulp1WunD-Lf84fmkz4y0WPgzwGdtqbSg7NrAojbRZzmTdP-D_t7FFsErSThl4wtKnvvQEODHqnLQp6RZ-TkZXNfCCS-MuNeG5iuzgh5zB8QA7Ksj9wOxCMiL46Zy/s400/JavaScriptPrototypes+(1).png" width="400" /></a></div><div class="separator" style="clear: both; text-align: left;">Do you see what the problem is yet? Lets create some instances of our subclass to highlight the issue:</div><br />
<script src="https://gist.github.com/bittersweetryan/5645875.js"></script><br />
Now our object graph looks like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdh5l7Rapu_EohY0I9nTGlRqf_LYTc2LQ7Ky8WI1XHq3c16pRnw_MkxGU3kwUzrZCaIcrf8imOemekk1IRr9E_UaTuRo9IykHXJV-916E4H0shct9U7dbGNMxase3-NInQ03VBO8scigCE/s1600/JavaScriptPrototypes+%25284%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdh5l7Rapu_EohY0I9nTGlRqf_LYTc2LQ7Ky8WI1XHq3c16pRnw_MkxGU3kwUzrZCaIcrf8imOemekk1IRr9E_UaTuRo9IykHXJV-916E4H0shct9U7dbGNMxase3-NInQ03VBO8scigCE/s400/JavaScriptPrototypes+%25284%2529.png" width="281" /></a></div><br />
<br />
<div class="separator" style="clear: both; text-align: left;">Before I talk about the real problem here I'd like to step back and talk about the "type" property on the widget's constructor. If it is not initialized by assignment each instance's "type" property actually points to the constructor's "type" property. However, once it is initialized by assigning a value to like so: <span style="font-family: Courier New, Courier, monospace;">sub1.type = 'Fuzzy Bunny'</span> it becomes a property of the instance, as shown in the new object graph:</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguKjU3jMUkVLuUR0sPDnLMdSum6wW5MEHmerD8JzJswm_Ug4vTn95Ln1lpjU1fB6p3m0oCFEV1TJcMUtHOU4jj0fn2dEpAZwfbL4d_r7VXunrmcgZb5Rt4kKiwONQmPF4zDBNHPY_TXweQ/s1600/JavaScriptPrototypes+(2).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguKjU3jMUkVLuUR0sPDnLMdSum6wW5MEHmerD8JzJswm_Ug4vTn95Ln1lpjU1fB6p3m0oCFEV1TJcMUtHOU4jj0fn2dEpAZwfbL4d_r7VXunrmcgZb5Rt4kKiwONQmPF4zDBNHPY_TXweQ/s400/JavaScriptPrototypes+(2).png" width="306" /></a></div><div class="separator" style="clear: both; text-align: left;">Our bug should start to become clear now. Let's look at the value of both sub1 and sub2's messages array:</div><br />
<a class="jsbin-embed" href="http://jsbin.com/oqopiv/3/embed?console">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script><br />
<br />
<div class="separator" style="clear: both; text-align: left;">Each object is sharing the same messages array! It would be tempting to fix this by adding another property to the SubWidget constructor like so:</div><br />
<script src="https://gist.github.com/bittersweetryan/5646085.js"></script><br />
<br />
<div class="separator" style="clear: both; text-align: left;"></div><div class="separator" style="clear: both;">However, what if we wanted to create other objects that extended Widget? That new object would also need a messages array and pretty soon we have code that is a nightmare to maintain and extend. Additionally, what if we wanted to add other properties to the Widget constcutor that were initialized when instances of its sub classes were constructed? This isn't very reusable or flexible solution. </div><div class="separator" style="clear: both;"><br />
</div><div class="separator" style="clear: both;">In order to properly fix this all that needs to be done is to add a single line of code to our SubWidget constructor that will invoke the Widget constructor with the same scope of our SubWidget constructor:</div><br />
<script src="https://gist.github.com/bittersweetryan/5646066.js"></script><br />
<br />
<div class="separator" style="clear: both;">Now when we create new objects each instance has a new instance of the messages array:</div><br />
<a class="jsbin-embed" href="http://jsbin.com/apidow/4/embed?console">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script><br />
<br />
<div class="separator" style="clear: both;">Now our object graph is correct:</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0h1OPmH77NCnNKTCAypfRKnu5qFPwcPOvHfO-QHnBr5sr6WuHgWrvYN8KgpbjGf18_CcrqprULq-0B_zDqEtx1o1syoXtxtayZD-wRhHkqfU4mWJX_MJI34BHQEIMVv4OPO-00dFvCRkA/s1600/JavaScriptPrototypes+(3).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="332" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0h1OPmH77NCnNKTCAypfRKnu5qFPwcPOvHfO-QHnBr5sr6WuHgWrvYN8KgpbjGf18_CcrqprULq-0B_zDqEtx1o1syoXtxtayZD-wRhHkqfU4mWJX_MJI34BHQEIMVv4OPO-00dFvCRkA/s400/JavaScriptPrototypes+(3).png" width="400" /></a></div><div class="separator" style="clear: both;"><br />
</div><div class="separator" style="clear: both;"><br />
</div><br />
<div class="separator" style="clear: both; text-align: left;"><br />
</div><br />
</div>Anonymoushttp://www.blogger.com/profile/14442784579016175402noreply@blogger.comtag:blogger.com,1999:blog-8892935606954477363.post-12267027484299677602013-05-13T12:43:00.002-05:002013-05-13T12:44:43.115-05:00Warm and Fuzzies<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY8nysJYH0ssgBVlDXOR3av90nACaJhE2xAsAoUde7du0O_-9r8Wyv622zFZHx3JdwTZen_Bu4_jPAsbRa9vXr0znxmwCsVsqkUKLg29yT3xoj90C1yucmciTsNxtzFWHRqAod7Tnr0xrj/s1600/images.jpeg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY8nysJYH0ssgBVlDXOR3av90nACaJhE2xAsAoUde7du0O_-9r8Wyv622zFZHx3JdwTZen_Bu4_jPAsbRa9vXr0znxmwCsVsqkUKLg29yT3xoj90C1yucmciTsNxtzFWHRqAod7Tnr0xrj/s1600/images.jpeg" /></a></div>
<span style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;">Be honest, how many times have you looked at someone else's code and said something like, "Who wrote this? They msut be an idiot!" or something to that effect? I do it all the time, and if my ears aren't deceiving me I hear others doing it all the time as well. Sometimes this kind of response is justified, like the time when I came across a piece of code that queried a table and used a for loop to filter the rows instead of using a WHERE clause. However, sometimes it's our own insecurities and shortsightedness that triggers this reaction and stops us from looking at things more objectively.</span><br />
<br style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;" />
<span style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;">Today I found a piece of code that at first appeared to be completely backwards and I started going to the familiar place of negativity. I was ready to rip it out and reactor it till it was perfect, my perfect. Then I'd scour commit logs to find out who wrote such bad code. I'm not sure what happened but something inside me decided to take a step back and look at the code and do a little research first. After a few minutes I actually learned that the was actually written quite cleverly. I still scoured the commit logs to find out who wrote it but then I took a different approach. I chose to open up my e-mail client and wrote the developer a short e-mail telling them that I really liked the way they wrote that piece of code and that I learned something from it, and you know what, it felt pretty darn good.</span><br />
<br style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;" />
<span style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;">It's so easy in the software development industry to focus on the negative, we are surrounded by it most of the time. The users of the software we write rarely communicate with us unless it's to tell us that something went wrong or doesn't work the way they expect. Even our friends and family encourage this sort of reaction by coming to us with their virus-laden computers and never asking to see what cool stuff we've been working on. We also love to look at other people's code and find the slightest problems. Raise your hand if you've scoured someones blog post looking for poorly written code? I have. It makes me feel like a smarter person when I can find flaws in other people's code, however it still doesn't make me feel any better about the code I've written. My point is, that it's super easy to focus on the negative to make us briefly feel better about ourselves. However, my experience today has taught me that it feels FAR better to focus on the positive aspects of others code and to take a few minutes to tell the other developer that you like what they've written as well. </span>Anonymoushttp://www.blogger.com/profile/14442784579016175402noreply@blogger.comtag:blogger.com,1999:blog-8892935606954477363.post-8191490028159631372013-05-10T08:51:00.002-05:002013-05-10T08:51:40.065-05:00cf.Objective() Session: An Introduction to AMD With RequireJS
<br />
<div class="p1">
AMD modules have been the subject of a lot of talk lately, some people <a href="http://addyosmani.com/writing-modular-js/"><span class="s1">really like</span></a> them, some people <a href="http://tomdale.net/2012/01/amd-is-not-the-answer/"><span class="s1">hate</span></a> them. Regardless, there is a lot of AMD JavaScript code being written these days and it would behoove any JavaScript developer to have a working knowledge of AMD and RequireJS in their toolbelt. Personally, what I love about AMD modules is that I don't have to worry about loading my script files in the right order in my markup, I also love that each module's dependencies are clearly defined within its source code. Writing decoupled and reusable "micro" applications within a RequireJS application becomes super easy.</div>
<div class="p1">
<br /></div>
<div class="p1">
The barrier of entry to AMD and RequireJS can sometimes look a bit high when first exposed to the concepts, and indeed it may be if you are still putting all your code inside your $( document ).ready() function. However, if you've been using a MV* framework, or if you've been using Rebecca Murphey's <a href="http://rmurphey.com/blog/2009/10/15/using-objects-to-organize-your-code/"><span class="s1">Object Pattern</span></a> to organize your code, getting started with AMD will be super easy in most cases.</div>
<div class="p1">
<br /></div>
<div class="p1">
This session will help you get acquainted with writing AMD modules, adding RequireJS to your project, and using the R.js optimizer to optimize your RequireJS source code. After it you should have a good understanding of how powerful modular JavaScript code can be and have a good working understanding of the moving parts of a RequireJS application so you can go home and start adding RequireJS to your next project.</div>
<div class="p1">
<br /></div>
<div class="p1">
The best part is, if you attend my session (which is scheduled in the last time slot of the conference) there's a chance we will get to site down one-on-one and talk about Require and AMD.</div>
Anonymoushttp://www.blogger.com/profile/14442784579016175402noreply@blogger.comtag:blogger.com,1999:blog-8892935606954477363.post-13494810792020480172013-05-09T11:01:00.000-05:002013-05-09T11:01:57.526-05:00cf.Objective() Session: The Art of JavaScript, Level Up Your Skills In 60 Minutes<br />
<div class="p1">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">JavaScript is a funny language, many really smart programmers never really take the time to learn it. They learn how to write jQuery code, but never learn the beauty of the language beneath it. I blame JavaScirpts trouble past for this, if you've ever had to debug JavaScript on IE6 you know what I mean.</span></div>
<div class="p1">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br />
</span></div>
<div class="p1">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">This session is for developers who know JavaScript but dont <i>really</i> know JavaScript. If you are unsure about attending ask yourself these following questions, if you answer is "no" to any of them, you might want to attend this session:</span></div>
<div class="p1">
<ul>
<li><span class="s1" style="font-family: Arial, Helvetica, sans-serif;">What is the difference between </span><code>var func = function(){}</code><span class="s1" style="font-family: Arial, Helvetica, sans-serif;"> and </span><code>function func(){}</code><span class="s1" style="font-family: Arial, Helvetica, sans-serif;">?</span></li>
<li><span class="s1" style="font-family: Arial, Helvetica, sans-serif;"> <div class="p1">
There is a subtle difference between lexical scoping and closures, what is it?</div>
</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">What [7] == 7 is and why?</span><br />
</li>
<li><span style="font-family: Arial, Helvetica, sans-serif;"> <div class="p1">
What each log statement produces when running the following code:</div>
<script src="https://gist.github.com/bittersweetryan/5548350.js"></script><br />
</span></li>
<li>What <code>undefined || 'foo'</code> returns? </li>
<li>Why <code>foo.constructor === Foo</code> is false when running the following code:<br />
<script src="https://gist.github.com/bittersweetryan/5548371.js"></script><br />
</li>
</ul>
</div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">If that's not enough to convince you to come to my session maybe this will: I'm giving away a copy of "Effective JavaScript" that is signed by David Herman himself! </span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<br />Anonymoushttp://www.blogger.com/profile/14442784579016175402noreply@blogger.comtag:blogger.com,1999:blog-8892935606954477363.post-12260486595590338762013-05-06T20:42:00.001-05:002013-05-06T20:42:22.863-05:00I'll Be Speaking About The DOM At ThatConferenece In August<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuEQqp5Qy4tbpuSPnVz8g8IUefsoxg8iuXJWelQTnsP6LvmnIoBIGKb86eH1Yju40tBs21c1kOT_4tO6n0d8hbixTSge8sa1g6ZpaaZJVQ5t9eeUM0BZZiW58gklWmHIQABjdJ9y6LVOVA/s1600/IMG_1425.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuEQqp5Qy4tbpuSPnVz8g8IUefsoxg8iuXJWelQTnsP6LvmnIoBIGKb86eH1Yju40tBs21c1kOT_4tO6n0d8hbixTSge8sa1g6ZpaaZJVQ5t9eeUM0BZZiW58gklWmHIQABjdJ9y6LVOVA/s320/IMG_1425.jpg" width="320" /></a></div>
I'm really excited to have been chosen as a speaker for this year's ThatConference conference in the Wisconsin Dells in August. If you haven't heard of ThatConference before its billed as "Summer Camp For Geeks" and prides itself on being a relaxed, fun, and wide-ranging conference. It's also one of the few conferences where there are specific family friendly activities planned during the conference (being held at an indoor water park doesn't hurt in this regard).<br />
<br />
With tracks on mobile, web, cloud, and "other" there each time slot is packed with interesting sessions from some top notch speakers. I'm extremely honored to be amongst such amazing company. One session I'd like to draw attention to is <a href="http://rohdesign.com/" target="_blank">Mike Rohde's</a> "<a href="http://www.thatconference.com/Sessions/session_2092" target="_blank">Sketchnote Workshop</a>". I have the pleasure to work with Mike and have been through his workshop. Even if you are a terrible drawer (like myself) you'll take away a lot of excellent information from this session. <br />
<br />
My session is titled "<a href="http://www.thatconference.com/Sessions/session_607" target="_blank">Indiana Jones and the Temple of DOM</a>" and will focus on using the browser's native Document API's to select and manipulate a page's contents without the help of a library like jQuery. Why is this important? Here I defer to Remy Sharp's "<a href="http://remysharp.com/2013/04/19/i-know-jquery-now-what/" target="_blank">I know jQuery. Now What?</a>" TLDR, while jQuery super awesome every project doesn't need to start with immediately adding jQuery for it. There are many cases where all of the events your project needs are already built right into the web Browser. Anonymoushttp://www.blogger.com/profile/14442784579016175402noreply@blogger.comtag:blogger.com,1999:blog-8892935606954477363.post-42272062978632380182013-04-19T14:46:00.002-05:002013-04-19T14:46:15.307-05:00Kick Ass Cross-Platform Workflow With Grunt<div style="color: #737373; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3kREdMzzwYVv9dCDnR1EcmhRspQsiwdenrO8K_hme4Iz18Al-N-VqPyW2RXweWYGG0wjEI10oaYl6LeGSFaH-ioJo0RUUk36rUVfz48rv9wN6luyyEYgtRlCzhI-ijzLnFN0l6b-U3M5u/s1600/grunt.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3kREdMzzwYVv9dCDnR1EcmhRspQsiwdenrO8K_hme4Iz18Al-N-VqPyW2RXweWYGG0wjEI10oaYl6LeGSFaH-ioJo0RUUk36rUVfz48rv9wN6luyyEYgtRlCzhI-ijzLnFN0l6b-U3M5u/s1600/grunt.jpg" /></a>My apologies for the vulgar title, but Grunt has me pretty excited these Days. I work on a Mac at home and on a Windows machine at work, this means that cross platform tools are extremely important to my workflow. I hate having to use CodeKit at home and Scout at work to compile my .scss files. Additionally tying a project to a platform specific tool means that its that much harder for others to get involved. Lately I've become a bit of a GruntJS fanboy, not only does it <br />
meet my cross platform needs, but it cuts down the number of tools I need to use because it does so many things.</div>
<div style="color: #737373; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
The <a href="https://npmjs.org/package/grunt-contrib-watch" target="_blank">watch</a> plugin has made my workflow even better by allowing me to run Grunt tasks when files in my project are added, changed, or deleted. With watch whenever a .less or .scss file gets updated Grunt will see the change and automatically compile the file for me. This post will walk you through installing watch and a compiler plugin and addresses a few of the gotcha's I ran into along the way. </div>
<h3 style="color: #404040; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 18px; line-height: 36px; margin: 0px; padding: 0px;">
Install Grunt</h3>
<div style="color: #737373; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
Duh. Installing Grunt is out of the scope of this post but the <a href="http://gruntjs.com/getting-started" style="color: #0069d6;">Grunt Homepage</a> does an excellent job of walking you through the intstall (here's a hint you'll need to install Node too). It's important to note here that version 0.4.0 and newer of Grunt works much differently than prior versions, and that the examples in this post will only work with version 0.4.0 or newer of Grunt.</div>
<h3 style="color: #404040; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 18px; line-height: 36px; margin: 0px; padding: 0px;">
Install Compiler Plugin</h3>
<div style="color: #737373; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
Once you have Grunt installed the next step is to get a compiler installed (since my current project is using Twitter Bootstrap I'm going to walk through setting up the LESS compiler in this post, however the process is the same for any other compiler).</div>
<div style="color: #737373; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
To find the plugin you need the <a href="http://gruntjs.com/plugins" style="color: #0069d6;" target="_blank">Grunt plugin</a> page has a list of plugin's available for Grunt. Clicking on a plugin will send you to the plugin's NPM page where you'll find documentation on the plugin and the command needed to install the plugin.<br />
<br />
<blockquote class="tr_bq">
A quick not on plugins. There are two type's of plugins "contrib" and "non-contrib". The "contrib" plugins are official plugins and are maintained by the Grunt team. I always prefer to use the "contrib" plugins whenever I can since they are generally better maintained and supported.</blockquote>
</div>
<div style="color: #737373; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
To install the Grunt LESS plugin:</div>
<ul style="color: #737373; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px;">
<li><div style="margin-bottom: 9px; padding: 0px;">
open the terminal and navigate to the project's root directory in a terminal</div>
</li>
<li><div style="margin-bottom: 9px; padding: 0px;">
type in <code style="background-color: #fee9cc; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: rgba(0, 0, 0, 0.746094); font-family: Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 12px; padding: 1px 3px;">npm install grunt-contrib-less --save-dev</code> in the command line</div>
</li>
<li><div style="margin-bottom: 9px; padding: 0px;">
hit enter</div>
</li>
</ul>
<div style="color: #737373; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
It really is that simple. The <code style="background-color: #fee9cc; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: rgba(0, 0, 0, 0.746094); font-family: Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 12px; padding: 1px 3px;">--save-dev</code> command will ensure that the plugin, and its version, are added to your package.json file.<br />
<blockquote class="tr_bq">
If you are not using a package.json file I strongly suggest you start. Using a package.json file means that you don't have to add your node_modules code to your distributions, users simply have to type in <code style="background-color: #fee9cc; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: rgba(0, 0, 0, 0.746094); font-family: Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 12px; padding: 1px 3px;">npm install</code> in a terminal to install the dependencies.</blockquote>
</div>
<h3 style="color: #404040; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 18px; line-height: 36px; margin: 0px; padding: 0px;">
Install The Watch Plugin</h3>
<div style="color: #737373; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
The next step is simple, install the watch plugin. While still in your project's root directory in the terminal type in:</div>
<div style="color: #737373; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
<code style="background-color: #fee9cc; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: rgba(0, 0, 0, 0.746094); font-family: Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 12px; padding: 1px 3px;">npm install grunt-contrib-watch --save-dev</code></div>
<h3 style="color: #404040; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 18px; line-height: 36px; margin: 0px; padding: 0px;">
Configure your Gruntfile</h3>
<div style="color: #737373; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
Before you go any further read the <a href="http://gruntjs.com/configuring-tasks" style="color: #0069d6;" target="_blank">"Configuring Tasks"</a> section of the Grunt website. <strong>This will save you a lot of time in the long run, I promise.</strong> Many plugins will assume that you know how to configure tasks and will leave these details out of their documentation.</div>
<div style="color: #737373; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
A few points of frustration that I've run into that are covered in "Configuring Tasks" are:</div>
<ul style="color: #737373; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px;">
<li><div style="margin-bottom: 9px; padding: 0px;">
Specifying the task name to configure. Typically the task name is the same as your plugin name.</div>
</li>
<li><div style="margin-bottom: 9px; padding: 0px;">
<strong>Specifying source and destination files</strong>. This is almost always left out of documentation and is almost always extremely important since a lot of plugins deal with manipulating files. </div>
</li>
<li><div style="margin-bottom: 9px; padding: 0px;">
<strong>Targets</strong> and how to use them (some plugins require targets and some do not, the bad news is that it's usually poorly documented whether a plugin uses them or not).</div>
</li>
</ul>
<h5 style="color: #404040; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 14px; line-height: 36px; margin: 0px; padding: 0px;">
Configure the Compiler</h5>
<div style="color: #737373; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
Now that I've gotten that out of the way, lets walk through setting up the LESS compiler in the Gruntfile. In order to add a LESS task to the Gruntfile add a property named <code style="background-color: #fee9cc; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: rgba(0, 0, 0, 0.746094); font-family: Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 12px; padding: 1px 3px;">less</code> to the object that is passed into the <code style="background-color: #fee9cc; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: rgba(0, 0, 0, 0.746094); font-family: Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 12px; padding: 1px 3px;">grunt.initConfig()</code> function. Since the LESS plugin requires targets (it will fail without them) I am going to specify a <code style="background-color: #fee9cc; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: rgba(0, 0, 0, 0.746094); font-family: Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 12px; padding: 1px 3px;">development</code> target in the configuration.</div>
<blockquote style="color: #737373; font-family: georgia, serif; font-size: 13px; font-style: italic; line-height: 18px; margin: 0px 0px 18px; padding: 13px 13px 21px 15px;">
<div style="font-size: 14px; padding: 0px;">
A quick note on targets: if no target is specified when register or running a task ALL targets for a task will be executed.</div>
</blockquote>
<div style="color: #737373; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
The <code style="background-color: #fee9cc; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: rgba(0, 0, 0, 0.746094); font-family: Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 12px; padding: 1px 3px;">development</code> target in this example only uses properties: <code style="background-color: #fee9cc; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: rgba(0, 0, 0, 0.746094); font-family: Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 12px; padding: 1px 3px;">src</code> and <code style="background-color: #fee9cc; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: rgba(0, 0, 0, 0.746094); font-family: Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 12px; padding: 1px 3px;">dest.</code> These properties are used to tell the LESS task where to find the <code style="background-color: #fee9cc; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: rgba(0, 0, 0, 0.746094); font-family: Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 12px; padding: 1px 3px;">.less</code> files and where to put the compiled .<span style="font-family: monospace;">css</span> file. The syntax <code style="background-color: #fee9cc; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: rgba(0, 0, 0, 0.746094); font-family: Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 12px; padding: 1px 3px;">/**.*.less</code> tells Grunt to get all files with a <code style="background-color: #fee9cc; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: rgba(0, 0, 0, 0.746094); font-family: Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 12px; padding: 1px 3px;">.less </code>extension in the <code style="background-color: #fee9cc; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: rgba(0, 0, 0, 0.746094); font-family: Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 12px; padding: 1px 3px;">less</code> directory and all of its sub-directories.</div>
<pre style="border: 1px solid rgb(217, 217, 217); color: #737373; font-family: Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 11px; line-height: 16px; margin-bottom: 18px; padding: 14px; white-space: pre-wrap; word-wrap: break-word;"><code style="background-color: #fee9cc; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: rgba(0, 0, 0, 0.746094); font-family: Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 12px; padding: 1px 3px;">
</code><pre style="border: 1px solid rgb(217, 217, 217); color: #737373; font-family: Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 11px; line-height: 16px; margin-bottom: 18px; padding: 14px; white-space: pre-wrap; word-wrap: break-word;"><code style="background-color: white; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; font-family: Monaco, 'Andale Mono', 'Courier New', monospace; padding: 0px;">grunt.initConfig({
less: {
development : {
src : [ 'less/**/*.less' ],
dest : 'css/compiled-better.css'
}
}
)};</code></pre>
</pre>
<pre style="border: 1px solid rgb(217, 217, 217); color: #737373; font-family: Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 11px; line-height: 16px; margin-bottom: 18px; padding: 14px; white-space: pre-wrap; word-wrap: break-word;"><code style="background-color: #fee9cc; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: rgba(0, 0, 0, 0.746094); font-family: Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 12px; padding: 1px 3px;">
</code></pre>
<h5 style="color: #404040; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 14px; line-height: 36px; margin: 0px; padding: 0px;">
Configure Watch</h5>
<div style="color: #737373; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
The watch plugin does exactly what it's name implies, watches a directory for changes. Since this plugin does not require the use of targets I'll skip them in this example and will put properties directly under the watch task. At a minimum watch needs two properties: <code style="background-color: #fee9cc; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: rgba(0, 0, 0, 0.746094); font-family: Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 12px; padding: 1px 3px;">files</code> and <code style="background-color: #fee9cc; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: rgba(0, 0, 0, 0.746094); font-family: Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 12px; padding: 1px 3px;">tasks</code>. The <span style="font-family: monospace;">files</span> property tells watch what files to look for changes for, and <span style="font-family: monospace;">tasks</span> property tells watch what tasks to run when a change is detected.</div>
<div style="color: #737373; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
The example below is telling watch to listen for any changes to files with a<code style="background-color: #fee9cc; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: rgba(0, 0, 0, 0.746094); font-family: Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 12px; padding: 1px 3px;">.less</code> extension in the <code style="background-color: #fee9cc; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: rgba(0, 0, 0, 0.746094); font-family: Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 12px; padding: 1px 3px;">less</code> folder and any of its sub-folders and to run the <code style="background-color: #fee9cc; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: rgba(0, 0, 0, 0.746094); font-family: Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 12px; padding: 1px 3px;">less</code> task when a change is detected.</div>
<pre style="border: 1px solid rgb(217, 217, 217); color: #737373; font-family: Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 11px; line-height: 16px; margin-bottom: 18px; padding: 14px; white-space: pre-wrap; word-wrap: break-word;"><pre style="border: 1px solid rgb(217, 217, 217); color: #737373; font-family: Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 11px; line-height: 16px; margin-bottom: 18px; padding: 14px; white-space: pre-wrap; word-wrap: break-word;"><code style="background-color: white; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; font-family: Monaco, 'Andale Mono', 'Courier New', monospace; padding: 0px;">watch: {
files : [ 'less/**/*.less' ],
tasks : [ 'less' ]
}</code></pre>
</pre>
<h5 style="color: #404040; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 14px; line-height: 36px; margin: 0px; padding: 0px;">
Register Tasks</h5>
<div style="color: #737373; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
The last step in configuring your Gruntfile is to register the <code style="background-color: #fee9cc; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: rgba(0, 0, 0, 0.746094); font-family: Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 12px; padding: 1px 3px;">less</code> and <code style="background-color: #fee9cc; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: rgba(0, 0, 0, 0.746094); font-family: Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 12px; padding: 1px 3px;">watch</code> tasks. To do this the following lines are added to the Gruntfile immediately <em>after</em> the <code style="background-color: #fee9cc; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: rgba(0, 0, 0, 0.746094); font-family: Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 12px; padding: 1px 3px;">grunt.initConfig()</code> call:<br />
<br />
<br />
<pre style="border: 1px solid rgb(217, 217, 217); font-family: Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 11px; line-height: 16px; margin-bottom: 18px; padding: 14px; white-space: pre-wrap; word-wrap: break-word;"><code style="background-color: white; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; font-family: Monaco, 'Andale Mono', 'Courier New', monospace; padding: 0px;">grunt.initConfig({
...
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');</code></pre>
</div>
<h3 style="color: #404040; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 18px; line-height: 36px; margin: 0px; padding: 0px;">
Run the Watch Task</h3>
<div style="color: #737373; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
The last step is to run the watch task. In a terminal window once again navigate to the root directory of the project and enter:</div>
<div style="color: #737373; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
<code style="background-color: #fee9cc; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: rgba(0, 0, 0, 0.746094); font-family: Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 12px; padding: 1px 3px;">grunt watch</code></div>
<div style="color: #737373; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 0px;">
Grunt will run the watch task which will then tell you that its "<code style="background-color: #fee9cc; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: rgba(0, 0, 0, 0.746094); font-family: Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 12px; padding: 1px 3px;">Waiting...".</code> When a change is detected Grunt will spring into action and you'll see the normal Grunt messages start to appear in the console. When the tasks are complete watch will go back to the <code style="background-color: #fee9cc; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; color: rgba(0, 0, 0, 0.746094); font-family: Monaco, 'Andale Mono', 'Courier New', monospace; font-size: 12px; padding: 1px 3px;">Waiting...</code> status.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYLrQLDalIwIr-rd7Rf2OJMpEzc3OArk1almvFOF-uzOWdGZiIdBL9kLJw_hGbu6keaPjnXDyW4tcGTPsUnUHFVmTiI9B1eEQRwXclWUTXp9y7d2PDJhh_rArhpWTWXZ69Qy-u22K-fwOD/s1600/terminal.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYLrQLDalIwIr-rd7Rf2OJMpEzc3OArk1almvFOF-uzOWdGZiIdBL9kLJw_hGbu6keaPjnXDyW4tcGTPsUnUHFVmTiI9B1eEQRwXclWUTXp9y7d2PDJhh_rArhpWTWXZ69Qy-u22K-fwOD/s640/terminal.png" width="640" /></a></div>
<br /></div>
<br />Anonymoushttp://www.blogger.com/profile/14442784579016175402noreply@blogger.comtag:blogger.com,1999:blog-8892935606954477363.post-65934535976689211492013-04-15T21:15:00.000-05:002013-04-15T21:16:28.206-05:00A Quick Look at e.target and e.currentTarget. And Bubbling.Since jQuery makes such easy work of event listeners it's sometimes easy to ignore some of the finer points of JavaScripts events. Two things that I often forget is the difference between the e.target and e.currentTarget properties of the event object that gets passed into a event callback. Hopefully writing this post will help the concepts stick in my head.<br />
<br />
The reason we need both of these properties is because of event bubbling. Event bubbling is when a event travels up the DOM, until it reaches the document node. Lets say we have a DOM tree that looks like this:<br />
<br />
<span style="font-family: Courier New, Courier, monospace;">document</span><br />
<span style="font-family: Courier New, Courier, monospace;">|</span><br />
<span style="font-family: Courier New, Courier, monospace;">|--div</span><br />
<span style="font-family: Courier New, Courier, monospace;">| |</span><br />
<span style="font-family: Courier New, Courier, monospace;">| |--span</span><br />
<span style="font-family: Courier New, Courier, monospace;">| | |</span><br />
<span style="font-family: Courier New, Courier, monospace;">| | |--a</span><br />
<span style="font-family: Courier New, Courier, monospace;"><br />
</span> Here we have a <span style="color: #20124d;"><b>document</b></span> node with a child of a <b><span style="color: #073763;">div</span></b> with a child of a <span style="color: #073763;"><b>span</b></span> with a child of an <span style="color: #073763;"><b>anchor</b></span>. When the <b style="color: #073763;">anchor</b> is clicked the any event listeners for the anchor are triggered, then the event bubbles up to it's parent, the <b style="color: #073763;">span</b> and any of it's event listeners are triggered, then the event bubbles up to the <b><span style="color: #073763;">div</span></b> where its event listeners are triggered, and finally the event bubbles up to the <b style="color: #20124d;">document</b> element where any of it's event listeners are triggered. <br />
<br />
Assuming that the span and div have a margin, padding, and border of 0 whenever a user clicks on the link the event the <span style="font-family: Courier New, Courier, monospace;">target</span> property of the event that is triggered on the <b style="color: #073763;">anchor</b>, <b style="color: #073763;">span,</b> <b><span style="color: #073763;">div</span></b> and <b style="color: #20124d;">document</b> will always be the anchor, since this is where the event originated. The <span style="font-family: Courier New, Courier, monospace;">currentTarget</span> property will always be the element that is listening for the event. <br />
<br />
The following code shows event listeners on 4 different objects, however when a user clicks on the anchor link the target will be the same for each event listener.<br />
<br />
<script src="https://gist.github.com/bittersweetryan/5392810.js"></script><br />
<br />
Open up your console and run the following example, paying close attention to the order the events fire as they bubble up the dom:<br />
<br />
<a class="jsbin-embed" href="http://jsbin.com/inakid/2/embed?live">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>Anonymoushttp://www.blogger.com/profile/14442784579016175402noreply@blogger.comtag:blogger.com,1999:blog-8892935606954477363.post-86084310698341773982013-03-13T13:57:00.001-05:002013-03-24T17:38:58.847-05:00Exploring jQuery Queues<div class="p1">
This week I ran into an interesting issue at work. There was an event that was triggered when a custom font loaded that added a fixed position element to an item in a container. Another team wrote some code that caused that container to animate when the page loaded. Sometimes the fixed position element would get placed randomly inside that container because the event was firing before the animation completed. Instead of tightly coupling the animation with the positioning of the element I decided to inspect the animating element's FX queue when the event was triggered to make sure that the element was not in the process of moving when it was added.</div>
<div class="p1">
Queues in jQuery are a useful way to add a list functions to an element that should be executed in a particular order. The real benefit is that queues give you full control of when each item in the queue is invoked using the <code>dequeue</code> method. If you've used a jQuery animation function you've already used the jQuery fx queue. What a lot of people don't know is that jQuery provides a nice API for inspecting and manipulating queues.</div>
<div class="p1">
<br /></div>
<div class="p1">
Lets take a look at the typical use case for a jQuery queue; adding multiple animations to an element:</div>
<br />
<script src="https://gist.github.com/bittersweetryan/5154898.js"></script><br />
<br />
<div class="p1">
Demo: </div>
<br />
<a class="jsbin-embed" href="http://jsbin.com/ehabud/5/embed?live">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script><br />
<br />
<br />
<div class="p1">
When this code is executed each function is invoked one immediately right after the other. However, each animation is NOT performed instantly, each animation is added to the elements <i>fx</i> queue. When each animation is finished the next animation in the queue is invoked.<br />
<br /></div>
<div class="p1">
One interesting thing to note about the <i>fx</i> queue is that calling the <code>stop()</code> method on an element that is animating will only stop the <b>current animation in the queue</b> and immediately call the next animation in the queue. In order to truly stop all of the the animations the element's queue must be cleared as well.</div>
<div class="p1">
In order to modify the first example to stop all animations when an element is clicked the following code is needed:</div>
<br />
<script src="https://gist.github.com/bittersweetryan/5154920.js"></script><br />
<br />
<div class="p1">
Demo: </div>
<br />
<a class="jsbin-embed" href="http://jsbin.com/ehabud/6/embed?live">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script><br />
<br />
<div class="p1">
<b>Delaying And Creating Queues</b></div>
<div class="p1">
<b><br />
</b></div>
<div class="p2">
Custom queues can be created on any elements by passing in a name to the queue call. In addition any queue's execution can be delayed when it is dequeued by using the <code>delay( delayMs, queueName )</code> method. <b>It's important to note that the delays are added to the queue itself so they need to be added to the queue before the function that you want delayed, however calling dequeue will trigger the delay and invoke the next callback from the queue</b>. This timer will not start until <code>dequeue()</code> is called on the element's queue.</div>
<div class="p2">
<br /></div>
<div class="p2">
In the following example the queue's execution will be delayed by 1 second, an item will be added to the element, the queue will be delayed by another half second, another item will be appended to the element, the queue is then delayed for another second, and finally another item will be added to the element. The first item in the queue will be invoked in the <code>$.ready()</code> function and each callback in the queue will <code>dequeue</code> the next item in the queue.</div>
<br />
<script src="https://gist.github.com/bittersweetryan/5154945.js"></script><br />
<br />
<div class="p2">
Demo:</div>
<br />
<a class="jsbin-embed" href="http://jsbin.com/exojaz/6/embed?live">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script><br />
<br />
What makes custom queues with delays an attractive alternative to setTimeout or setInterval is that each item in the queue can have a different delay time before it is invoked.Anonymoushttp://www.blogger.com/profile/14442784579016175402noreply@blogger.comtag:blogger.com,1999:blog-8892935606954477363.post-15522596021885630342013-02-27T20:42:00.001-06:002013-02-27T20:42:08.450-06:00Playing with ECMAScript.Harmony Modules using TraceurAs aI was a preparing a presentation on AMD and RequireJS I started looking ahead at the modules proposed for ECMAScript.Harmony. In Addy Osmani's article <a href="http://addyosmani.com/writing-modular-js/" title="Writing Modular JavaScript With AMD, CommonJS & ES Harmony">Writing Modular JavaScript With AMD, CommonJS & ES Harmony</a> he mentioned called Traceur which is a JavaScript compiler for ECMAScript Harmony syntax. This allows developers to give the future of JavaScript a test drive today.<br />
<br />
One of the new features coming in Harmony that has me excited is modules. Modules will be a way to encapsulate code and explicitly define its dependencies and public API. ES Harmony gives us three new keywords for modules: <code>module</code>, <code>import</code>, and <code>export</code>. The <code>module</code> keyword is used to initialize a new module, the <code>import</code> keyword declares dependencies to import from a module into a context, and the <code>export</code> keyword explicitly declares public properties that will be available for other modules to import.<br />
<br />
In addition Harmony modules:<br />
<ul>
<li>are statically scoped</li>
<li>have the <code>this</code> keyword bound to the global object</li>
</ul>
<h3>
Traceur</h3>
Before we are able to write modules today we'll need an environment that supports Harmony syntax. For this we'll use Google's Traceur compiler. In order to implement Traceur you'll need three things:<br />
<ol>
<li>Traceur library file</li>
<li>Traceur bootstrap file</li>
<li>Harmony code</li>
</ol>
Adding the Traceur library and bootstrap to an application is as easy as adding the scripts to a web page:<br />
<br />
<script src="https://gist.github.com/bittersweetryan/5053604.js"></script><br />
<br />
Now that we have a compiler in place we just need some code for it to compile. To do this simply create a script block with a type of <code>script/traceur</code>.<br />
<br />
<script src="https://gist.github.com/bittersweetryan/5053600.js"></script><br />
<br />
When the page loads Traceur will compile your Harmony code to JavaScript that works in today's modern browsers.<br />
<br />
For your convince I've created a JS Bin with Traceur ready to go on <a href="http://jsbin.com/atatab/1/edit?html,console">JS Bin</a>. In addition there is an online compiler you can use here: <a href="http://traceur-compiler.googlecode.com/git/demo/repl.html">http://traceur-compiler.googlecode.com/git/demo/repl.html</a><br />
<br />
Now that we have an environment that supports Harmony to work in lets take a look at modules.<br />
<br />
<h3>
Playing With Modules</h3>
<br />
First I'd like to point modules aren't meant to be classes, there the <code>class</code> keyword for that. According to the ECMAScript Wiki modules are a<br />
<blockquote class="tr_bq">
<span style="color: #666666; font-size: large;">"Standardized mechanism for creating libraries"</span></blockquote>
Modules do not create a new execution context, the <code>this</code> keyword in a module is bound to the global object. Looking at the code that Traceur outputs for a simple <code>module</code> definition shows this:<br />
<br />
<script src="https://gist.github.com/bittersweetryan/5053400.js"></script><br />
<br />
Even though a module does not get a new execution context , it does get a new static scope. In the following code I am creating a new module called carFactory that exports a variable named ford into the global namespace. Calling ford.wheels results in '4' and trying to access carFactory's internal wheels variable results in an error:<br />
<br />
<a class="jsbin-embed" href="http://jsbin.com/atatab/3/embed?html">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script><br />
<br />
Its also important to note that doing an <code>import *</code> will import the variables from the modules <em>with the same names the have in the module</em>.<br />
<br />
A module can also have multiple exports as shown in the following code (note the syntax for importing multiple exports in a single statement):<br />
<br />
<a class="jsbin-embed" href="http://jsbin.com/ebozoj/3/embed?html">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script><br />
<br />
A module also doesn't only have to export objects, it can export anything:<br />
<br />
<a class="jsbin-embed" href="http://jsbin.com/owehey/1/embed?html">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script><br />
<br />
Variables that are imported can also renamed the from modules using the following syntax:<br />
<br />
<a class="jsbin-embed" href="http://jsbin.com/enebus/1/embed?html">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script><br />
<br />
Lastly modules can be nexted. Nested modules have privileged access to their parent modules scope. Nested modules are also private to their parent modules scope unless they are explicitly exported. Here is an example of a public nested module that accesses its parents scope:<br />
<br />
<a class="jsbin-embed" href="http://jsbin.com/ocewip/1/embed?html">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script><br />
<br />
<h3>
Conclusion</h3>
Modules in Harmony look like they are going to be very useful and there's a lot you can do with them. They help reduce the need for the overuse of the function keyword and reduce the need for patterns like AMD and complex loaders RequireJS and CurlJS (of which I am currently a huge fan). For more reading on modules I suggest checking out the modules section on the <a href="http://wiki.ecmascript.org/doku.php?id=harmony:modules">ECMAScript Harmony WIKI</a>. Anonymoushttp://www.blogger.com/profile/14442784579016175402noreply@blogger.comtag:blogger.com,1999:blog-8892935606954477363.post-43930679317528638202012-10-24T10:32:00.000-05:002012-10-24T10:32:00.343-05:00jsonmé: A Simple HTML and JavaScript Resume GeneratorIt's been forever since I updated my resumé so I decided to turn my GitHub page into my living resumé. Being a web developer I wanted to so something unique yet simple. After playing around with a few concepts I decided to put all of my resume's data into a JSON file and create a small web app that would read it via AJAX and display its contents. I was so happy with the result that I decided to extract out the code and put it up on GitHub and the result is <a href="https://github.com/bittersweetryan/jsonme" target="_blank">jsonmé</a>. <br />
<br />
I wanted jsonmé to have a small footprint yet work in all browsers back to IE6. I decided to use the <a href="http://sizzlejs.com/" target="_blank">Sizzle.js</a> selector engine since it has such a proven track record in jQuery. I also needed a small library for doing normalized AJAX requests. I settled on <a href="http://snackjs.com/" target="_blank">snack.js</a>, its a small and well written utility library with AJAX capabilities that also gives me a normalized document ready function. <br />
<br />
The resulting application is a simple and easy to implement application. The easiest way to create your jsonmé is to fork the GitHub repository and rename it to <yourgithubusername>.github.com. For instance my personal resume is at <a href="http://bittersweetryan.github.com/" target="_blank">http://bittersweetryan.github.com</a>. </yourgithubusername><br />
<br />
The code is completely Open Source and licensed under the MIT license so feel free to grab it and do whatever you want with it. If you do something awesome with it I'd love to hear about it or even get a pull request for it. <br />
<br />
The source can be found at: <a href="https://github.com/bittersweetryan/jsonme">https://github.com/bittersweetryan/jsonme</a>Anonymoushttp://www.blogger.com/profile/14442784579016175402noreply@blogger.comtag:blogger.com,1999:blog-8892935606954477363.post-37715355608039421222012-10-04T13:52:00.000-05:002012-10-04T13:52:30.086-05:00Using the Partial Application Pattern in ColdFusion 10The partial application pattern has been popular in JavaScript for some time now, Ben Alman has a great article on it: <a href="http://benalman.com/news/2012/09/partial-application-in-javascript/" target="_blank">http://benalman.com/news/2012/09/partial-application-in-javascript/</a>. While refactoring some particularly redundant code I decided to try this pattern in ColdFusion using the power of closures and the function datatype.<br />
<br />
<h4>The Partial Pattern</h4><br />
Lets start by taking one of Ben's examples and converting it to ColdFusion. Minuse a few syntactical changes we could almost copy and paste his code into ColdFusion. Lets start of by looking at a simple add function:<br />
<script src="https://gist.github.com/3835367.js?file=adder.cfc"></script><br />
Now lets say we use that function to add one to a few numbers:<br />
<script src="https://gist.github.com/3835386.js?file=adder.cfm"></script><br />
Instead of passing the parameter one to each function call wouldn't it be nice to have a function called addOne that just adds one to whatever argument is passed in? Simple. We can just create a new, more specialized, function that returns the invocation of our add function that always passes one as its first parameter: <br />
<script src="https://gist.github.com/3835414.js?file=adder.cfc"></script><br />
Thats great. What if we want to add other numbers? We'd have to create a separate function for each number. What if those numbers aren't always known when we are writing our code, are we going to write a million different utility functions? Of course not. We can take the concept of creating a specialized function step further using the function datatype and closures to create a partial application that will help us construct new helper functions on the fly:<br />
<script src="https://gist.github.com/3835452.js?file=adder.cfc"></script><br />
Looking at the code there are a few important concepts to note. First look at how this new function returns a function, this is a new datatype on ColdFusion 10 so this code will not work in any version less than 10. Second, and most importantly, look at how this new function is a closure. When we invoke the makeAdder function the inner function that is returned has access to makeAdder's argument even after makeAdder is invoked.<br />
<br />
Since the makeAdder function returns a function we need to set a variable equal to the makeAdder's result to use it. Once we do that the new function can be invoked just like any other function:<br />
<br />
<h4>Real World Example</h4><br />
In my application I had a function that took a long list of arguments which was called multiple times with only a few of the arguments changing between each call. This created some ugly code that was getting to be a pain to maintain. Instead of calling this function multiple times passing in all the arguments each time I decided to use the partial application pattern to clean up some of my code. This is what my new partial function looked like:<br />
<script src="https://gist.github.com/3835502.js?file=partial.cfc"></script>Instead of having one function that has 7 arguments that is called multiple times I have one function that takes 5 arguments that is called once. This function returns another function that gets called with only 3 arguments:<br />
<script src="https://gist.github.com/3835530.js?file=partial.cfc"></script><br />
When ColdFusion first got closures I was unable to make the mental connection to how I was using closures in the JavaScript code I was writing. Slowly I am starting to write my ColdFusion more like I write JavaScript.<br />
<br />
<br />
<br />
<br />
Anonymoushttp://www.blogger.com/profile/14442784579016175402noreply@blogger.comtag:blogger.com,1999:blog-8892935606954477363.post-78192666350408660212012-10-03T08:29:00.003-05:002012-10-03T08:29:27.845-05:00NCDevCon "The Art of JavaScript" Presentation LinksThis is just a real quick post so I can share the link to my NCDevCon presentation slides and video.<br />
<br />
The slides can be found at:<br />
<br />
<a href="http://bittersweetryan.github.com/art-of-javascript/" target="_blank">http://bittersweetryan.github.com/art-of-javascript/</a><br />
<br />
The video can be found at (sorry, its in Silverlight format only):<br />
<br />
<a href="http://textiles.online.ncsu.edu/online/SilverlightPlayer/Default.aspx?peid=02c7fe6174654f96b78a6194d3dbbe9d1d" target="_blank">http://textiles.online.ncsu.edu/online/SilverlightPlayer/Default.aspx?peid=02c7fe6174654f96b78a6194d3dbbe9d1d</a><br />
<br />
One more thing, I was mentioned in the KeyNote! You can watch that here, I'm mentioned in the second section about: "ColdFusion Today":<br />
<br />
<a href="http://textiles.online.ncsu.edu/online/SilverlightPlayer/Default.aspx?peid=9c64b0db237e4240847875f95795138d1d" target="_blank">http://textiles.online.ncsu.edu/online/SilverlightPlayer/Default.aspx?peid=9c64b0db237e4240847875f95795138d1d</a><br />
<br />
Please if you enjoyed let me know, or if you have any questions or suggestions how I can make this presentation better please let me know!Anonymoushttp://www.blogger.com/profile/14442784579016175402noreply@blogger.comtag:blogger.com,1999:blog-8892935606954477363.post-31577864627176030412012-09-06T09:14:00.000-05:002012-09-06T09:14:39.231-05:00ColdFusion Quickie : Using the Ternary Operator To Pass Conditional Argument ValuesIts been awhile since I've done a ColdFusion quicke post and I found this trick to be quite useful especially when dealing with ORM domain entities. <br />
<br />
Lets say that we have a domain object called User that gets populated out when a user signs up for an account. This object has some simple properties; <span style="font-family: Courier New, Courier, monospace;">fullName</span> and <span style="font-family: Courier New, Courier, monospace;">email</span> (lets not get into object purity here and say that those should be a member of a Contact object). Lets also assume that when a user signs up all only an e-mail address is required, they can leave their name blank if they choose to. The important thing to note here is that when a user object is loaded from the database the fullName property may hold a value of <span style="font-family: Courier New, Courier, monospace;">null</span>. <br />
<br />
When a user signs up for an account our application calls a function that will send a welcome message to a user that has a signature of: <span style="font-family: Courier New, Courier, monospace;">sendWelcomeMessage(required <span style="color: blue;">String</span> name, required <span style="color: blue;">String</span> email)</span> (for arguments sake lets say that we don't have the ability to change. If this function is invoked using implied getters from the User object we'll run into problems if <span style="font-family: Courier New, Courier, monospace;">getFullName()</span> returns <span style="color: blue; font-family: Courier New, Courier, monospace;">null</span>. This is where the ternary operator can quite useful in sending a default value to a function:<br />
<br />
<span style="font-family: Courier New, Courier, monospace;">sendWelcomeMessage( </span><br />
<span style="font-family: Courier New, Courier, monospace;"> (!<span style="color: blue;">isNull</span>(person.getFullName()) ? user.getFullName() : "User" , </span><br />
<span style="font-family: Courier New, Courier, monospace;"> user.getEmail</span><br />
<span style="font-family: Courier New, Courier, monospace;">);</span><br />
<br />
The ternary operator takes a value or expression that can be evaluated to a Boolean and returns one of two things based on the result of that expression. The ternary operator's signature looks like this:<br />
<br />
<span style="font-family: Courier New, Courier, monospace;">(expression) ? trueStatement : falseStatement</span><br />
<br />
As you can see in our example, we check if <span style="font-family: Courier New, Courier, monospace;">person.getFullName()</span>does not return <span style="font-family: Courier New, Courier, monospace;">null</span> and pass that value if its true, otherwise pass in a default value of "User". Anonymoushttp://www.blogger.com/profile/14442784579016175402noreply@blogger.comtag:blogger.com,1999:blog-8892935606954477363.post-68908278070244870052012-09-04T07:50:00.003-05:002012-09-06T07:54:11.998-05:00jQuery Function Of The Week: Deferred (deep dive)This week we'll take a deeper look into jQuery's Deferred object. According to the jQuery docs:<br />
<blockquote class="tr_bq">
<code style="background-color: #eeeeee; border: 0px; color: #222222; font-size: 13px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">jQuery.Deferred()</code><span style="background-color: #fafafa; color: #222222; font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 21px;">, introduced in version 1.5, is a chainable utility object that can register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function.</span></blockquote>
That is a bit of a mouthful. I like to think of deferrds somewhat like a telephone call. You'd like to contact someone so you dial a number. Based on what happens when you call that number you will take action. If the callee answers the call you can start a conversation, if you get their voice mail (I almost said answering machine but I'm afraid that some readers will have no idea what that is) you can take leave a message. Also, when the phone is ringing you can even do something else, you only care about what happens once the number you are calling responds in some way. This is an extremely simplified way of describing how Deferreds work because Deferrds can do so much more. <br />
<br />
If you've used jQuery's AJAX functions you've already been taking advantage of Deferreds, the AJAX functions are actually using Deferrds behind the scenes with a lot of the details abstracted out for you. <br />
<br />
When talking about Deferreds its important to note that there are two parts to each Deferred implementation: the <b>callers</b> and the <b>callees</b>. The callers are the functions that either do something that other functions are waiting for or functions that take action based on the results of another function. The callees are the functions that depend on the results of at least one of the callee functions. <br />
<br />
<b><span style="font-size: large;">The Callers</span></b><br />
<br />
Like I mentoned before, the caller functions are divided into two parts: the functions that do something that other functions depend on, and the functions that take action based on the the results of other functions. The <span style="font-family: Courier New, Courier, monospace;">when(deferrds)</span>function is the first part of the callers and is a wrapper for all of the functions have results that other functions are waiting for. jQuery will execute the functions passed into <span style="font-family: Courier New, Courier, monospace;">when</span> immediately and asynchrouously. This means if we have the following code:<br />
<script src="https://gist.github.com/3488243.js?file=gistfile1.js"></script><br />
<span style="font-family: Courier New, Courier, monospace;">func1()</span>, <span style="font-family: Courier New, Courier, monospace;">func2(),</span> and <span style="font-family: Courier New, Courier, monospace;">func()</span><span style="font-family: inherit;">will all be called at approximately the same time. </span><br />
<span style="font-family: inherit;"><br />
</span><span style="font-family: inherit;">Functions passed into when are expected to return a </span><span style="font-family: Courier New, Courier, monospace;">promise</span><span style="font-family: inherit;"> object back to the when() function. This promise will </span>either<span style="font-family: inherit;"> be </span><span style="font-family: Courier New, Courier, monospace;">resolved</span><span style="font-family: inherit;"> or </span><span style="font-family: Courier New, Courier, monospace;">rejected</span><span style="font-family: inherit;"> (more on these in the callees section) by the function passed into </span><span style="font-family: Courier New, Courier, monospace;">when</span><span style="font-family: inherit;">, and based on this result one of callback functions will be called. </span><br />
<span style="font-family: inherit;"><br />
</span> <span style="font-family: inherit;">The </span>second<span style="font-family: inherit;"> part of </span>the<span style="font-family: inherit;"> callers are the functions that respond to the results of the functions passed into the when function. The three functions are: </span><span style="font-family: Courier New, Courier, monospace;">then</span><span style="font-family: inherit;">, </span><span style="font-family: Courier New, Courier, monospace;">done</span><span style="font-family: inherit;">, and </span><span style="font-family: Courier New, Courier, monospace;">fail.</span><span style="font-family: inherit;"> The </span><span style="font-family: Courier New, Courier, monospace;">then(doneCallbacks, failCallbacks)</span><span style="font-family: inherit;"> is a single method that encapsulates the functionality of the </span><span style="font-family: Courier New, Courier, monospace;">done()</span><span style="font-family: inherit;"> and </span><span style="font-family: Courier New, Courier, monospace;">fail()</span><span style="font-family: inherit;"> callbacks. The first argument to the </span><span style="font-family: Courier New, Courier, monospace;">then</span><span style="font-family: inherit;"> function is a function, or array of functions, that will be called when all the functions passed into the </span><span style="font-family: Courier New, Courier, monospace;">when()</span><span style="font-family: inherit;"> function are </span><span style="font-family: Courier New, Courier, monospace;">resolved</span><span style="font-family: inherit;">. </span><br />
<span style="font-family: inherit;"><br />
</span> <span style="font-family: inherit;">The second argument passed into the </span><span style="font-family: Courier New, Courier, monospace;">then</span><span style="font-family: inherit;"> function is a function, or array of functions, that will be immediately invoked as soon as any of the functions passed into the </span><span style="font-family: Courier New, Courier, monospace;">when()</span><span style="font-family: inherit;"> function are </span><span style="font-family: Courier New, Courier, monospace;">rejected</span><span style="font-family: inherit;">. </span><span style="font-family: inherit;"> </span><span style="font-family: inherit;">The </span><span style="font-family: Courier New, Courier, monospace;">then</span><span style="font-family: inherit;"> and </span><span style="font-family: Courier New, Courier, monospace;">done</span><span style="font-family: inherit;"> functions will </span>receive arguments from each function passed into the <span style="font-family: Courier New, Courier, monospace;">when</span> function, in the order they were passed. <span style="font-family: inherit;"> These arguments are passed into them via the </span><span style="font-family: Courier New, Courier, monospace;">resolve</span><span style="font-family: inherit;"> and </span><span style="font-family: Courier New, Courier, monospace;">reject</span><span style="font-family: inherit;"> methods (we will talk about when we discuss the callees). If you'd like to be a bit more expressive in your code instead of using the </span><span style="font-family: Courier New, Courier, monospace;">then()</span><span style="font-family: inherit;"> you can specify the doneCallbacks and failCallbacks in the </span><span style="font-family: Courier New, Courier, monospace;">done()</span><span style="font-family: inherit;"> and </span><span style="font-family: Courier New, Courier, monospace;">fail()</span><span style="font-family: inherit;"> methods. These methods are called the same was as the doneCallbacks, and failCallbacks of the then() function.</span><br />
<span style="font-family: inherit;"><br />
</span> <span style="font-family: inherit; font-size: large;"><b>The Callees</b></span><br />
<span style="font-family: inherit;"><b><br />
</b></span> <span style="font-family: inherit;">When functions are passed into the </span><span style="font-family: Courier New, Courier, monospace;">when</span><span style="font-family: inherit;"> function jQuery expects these </span>functions<span style="font-family: inherit;"> to return a </span><span style="font-family: Courier New, Courier, monospace;">promise</span><span style="font-family: inherit;"> to it. A </span><span style="font-family: Courier New, Courier, monospace;">promise</span><span style="font-family: inherit;"> is just a message telling the </span><span style="font-family: Courier New, Courier, monospace;">when</span><span style="font-family: inherit;"> function that sometime in the future the function is either going to send it a </span><span style="font-family: Courier New, Courier, monospace;">reject( args )</span><span style="font-family: inherit;"> or </span><span style="font-family: Courier New, Courier, monospace;">resolve( args )</span><span style="font-family: inherit;"> message. Once the </span><span style="font-family: Courier New, Courier, monospace;">when</span><span style="font-family: inherit;"> function </span>receives<span style="font-family: inherit;"> the promise object from a function it just sits and waits for a response. The callee functions can also pass information back to the </span><span style="font-family: Courier New, Courier, monospace;">when</span><span style="font-family: inherit;"> function by passing arguments into the </span><span style="font-family: Courier New, Courier, monospace;">reject</span><span style="font-family: inherit;"> and </span><span style="font-family: Courier New, Courier, monospace;">resolve</span><span style="font-family: inherit;"> methods (I'll show you an example of this in the real world example). </span><span style="font-family: inherit;">Lets take a look at a typical callee function that implements the Deferred object and talk a bit more about what is going on:</span><br />
<script src="https://gist.github.com/3488387.js?file=gistfile1.js"></script><br />
Here we have a function that is going to implement the <span style="font-family: Courier New, Courier, monospace;">$.Deferred()</span> function and immediately return a <span style="font-family: Courier New, Courier, monospace;">promise</span> message to the <span style="font-family: Courier New, Courier, monospace;">when()</span> function that called it. The <span style="font-family: Courier New, Courier, monospace;">$.Deferred()</span><span style="font-family: inherit;"> constructor function takes an optional function as an argument which is passed a reference to itself as an argument. The above function could also have been rewritten as: </span><br />
<script src="https://gist.github.com/3488409.js?file=gistfile1.js"></script><br />
<b>Its important to note that if a function passed into when does not implement this Deferred pattern it will immediately be treated as resolved. </b><br />
<br />
<b><span style="font-size: large;">Real World Example</span></b><br />
<br />
Now that we've looked at the parts of the Deferred lets take a look at a real world example. In order to demonstrate the power of Deferred's lets take a look at some code that can benefit from them:<br />
<a class="jsbin-embed" href="http://jsbin.com/awaver/2/embed?live">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script><br />
<br />
The intent of this code is to fade out any current content, get some tweets from twitters search API, and finally display the new tweets. When any of the buttons are pressed you'll quickly see that something isn't right, and this is because the code being called relies on asynchronous operations like doing an AJAX call and jQuery animations. <br />
<br />
One approach to fix this would be to put the <span style="font-family: Courier New, Courier, monospace;">getTweets</span> function as a callback to the <span style="font-family: Courier New, Courier, monospace;">cleanDiv</span> function's <span style="font-family: Courier New, Courier, monospace;">fadeOut</span> callback, move the <span style="font-family: Courier New, Courier, monospace;">addTweets</span> function to the ajax calls success callback, and finally move the the <span style="font-family: Courier New, Courier, monospace;">$tweetDiv.fadeIn('slow')</span> code to the addTweets function. Doing so would tightly couple this code together making it tough to extend and maintain. A better solution would to use the power of jQuery's <span style="font-family: Courier New, Courier, monospace;">Deferred</span> object. <br />
<br />
First lets look at our click handler function rewritten to take advantage of the <span style="font-family: Courier New, Courier, monospace;">Deferred</span> object:<br />
<br />
<script src="https://gist.github.com/3490886.js?file=test.js"></script><br />
<br />
The first thing you probably notice is that there is more code in the new click handler. The Deferred calls do add a bit of code, but I feel this code is quite expressive (meaning that the intent of the code is very clear) and each of the callback functions are decoupled from any function they are waiting on. One other thing to note here is the use of the <span style="font-family: Courier New, Courier, monospace;">done()</span> and <span style="font-family: Courier New, Courier, monospace;">fail()</span> callbacks. In the done() callback I use the <span style="font-family: Courier New, Courier, monospace;">when()</span> and <span style="font-family: Courier New, Courier, monospace;">then()</span> methods of the Deferred implementation. Here I am only specifying a single argument which will get called if/when the addTweets function passed into it has completed. Since I'm not going to reject the promise anywhere in the addTweets function only passing in a done callback is sufficient.<br />
<br />
Now lets take a look at one of the new callee functions. Here is the code for the new getTweets function:<br />
<br />
<script src="https://gist.github.com/3616012.js?file=deferred.js"></script><br />
<br />
Since there is no access to the internal representation of the <span style="font-family: Courier New, Courier, monospace;">$.ajax </span>method's Deferred function I have to wrap the entire function in a <span style="font-family: Courier New, Courier, monospace;">Deferred</span> call. Another thing to note is that Twitter's API will return a 200 status (which will invoke the ajax function's success callback) even if there is an error so I will inspect the object returned from Twitter when determining weather to <span style="font-family: Courier New, Courier, monospace;">resolve</span> or <span style="font-family: Courier New, Courier, monospace;">reject</span> the Deferred object. If a key of "error" is found in the data returned from Twitter I <span style="font-family: Courier New, Courier, monospace;">reject</span> the Deferred which tells our click handler function to run the <span style="font-family: Courier New, Courier, monospace;">fail</span> callback. I'll also pass a message to the fail callback through the <span style="font-family: Courier New, Courier, monospace;">reject</span> method call.<br />
<br />
<br />
Putting it all together we get a nice and smooth implementation of our application. As you can see I've also included an error button which will trigger an error in the twitter API.<br />
<br />
<a class="jsbin-embed" href="http://jsbin.com/otugat/3/embed?live">JS Bin</a>Anonymoushttp://www.blogger.com/profile/14442784579016175402noreply@blogger.comtag:blogger.com,1999:blog-8892935606954477363.post-82107728775577405012012-08-14T09:51:00.001-05:002012-08-17T10:39:42.281-05:00jQuery Function of the Week: grepThis week's jQuery function of the week is grep. According to the jQuery docs grep:<br />
<blockquote class="tr_bq"><span style="background-color: #fafafa; color: #777777; font-family: 'myriad pro', 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif; font-size: 17px; font-style: italic; line-height: 23px;">Finds the elements of an array which satisfy a filter function. The original array is not affected.</span></blockquote>There is only a single signature for the grep function: <span style="font-family: Courier New, Courier, monospace;">$.grep(array, function(element, index) [,invert])</span>. The function being passed in should return a truthy value or a falsy value based on the input argument. If the invert parameter is left out, or is false then the grep function will return a new array with all the items that the satisfy the truth test function that was passed in. If invert is set to true, grep will return a new array with all the items that do not satisfy the truth test function.<br />
<br />
Lets take a look at looping through an array of text and removing the word "the":<br />
<br />
<a class="jsbin-embed" href="http://jsbin.com/usanud/5/embed?live,javascript">JS Bin demo</a><script src="http://static.jsbin.com/js/embed.js"></script><br />
<br />
Now lets take a look at the same code, but with the invert parameter set to true:<br />
<br />
<a class="jsbin-embed" href="http://jsbin.com/efireq/5/embed?live,javascript">JS Bin demo</a><script src="http://static.jsbin.com/js/embed.js"></script><br />
<br />
You'll see that only the word "the" is returned. <br />
<br />
<a href="http://blog.bittersweetryan.com/p/jquery-function-of-week.html">Check out the all of the jQuery function's of the week.</a>Anonymoushttp://www.blogger.com/profile/14442784579016175402noreply@blogger.comtag:blogger.com,1999:blog-8892935606954477363.post-8529343976675195902012-08-09T09:24:00.000-05:002012-08-14T20:52:05.470-05:00jQuery Function Of The Week: nextAllI'm super busy this week so this week's jQuery function of the week is going to be an easy one: nextAll. According to the jQuery Documentation use nextAll to:<br />
<blockquote class="tr_bq">
<span style="background-color: #fafafa; color: #777777; font-family: 'myriad pro', 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif; font-size: 17px; font-style: italic; line-height: 23px;">Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.</span></blockquote>
Lets say we had a list of items, and we wanted to highlight every vegetable Using nextAll would look like this:<br />
<br />
<a class="jsbin-embed" href="http://jsbin.com/esalir/1/embed?live,javascript">JS Bin demo</a><script src="http://static.jsbin.com/js/embed.js"></script><br />
<br />
Optionally a selector can be passed into nextAll to further filter the results. Here we'll only select the even vegetables that are after our original selector:<br />
<br />
<a class="jsbin-embed" href="http://jsbin.com/ayisit/1/embed?live,javascript">JS Bin demo</a><script src="http://static.jsbin.com/js/embed.js"></script><br />
<br />
<div>
<a href="http://blog.bittersweetryan.com/p/jquery-function-of-week.html">Check out the all of the jQuery function's of the week.</a></div>
Anonymoushttp://www.blogger.com/profile/14442784579016175402noreply@blogger.comtag:blogger.com,1999:blog-8892935606954477363.post-89756318463834011642012-08-01T19:10:00.002-05:002012-08-14T20:51:16.704-05:00jQuery Function Of The Week: proxyIn my JavaScript fundamentals presentations I have a section that talks about scope and how it can become confusing when using jQuery. The reason for this is becuase jQuery normalizes the <span style="font-family: Courier New, Courier, monospace;">this</span> scope in its function calls. In other words when inside a jQuery method call <span style="font-family: Courier New, Courier, monospace;">this</span> usually refers to the DOM elements in the jQuery set.<br />
<br />
This can be clearly illustraed in a simple jQuery event callback (note use your browsers console, not jsbin's for the meantime):<br />
<br />
<a class="jsbin-embed" href="http://jsbin.com/eqopow/2/embed?live,javascript">JS Bin demo</a><script src="http://static.jsbin.com/js/embed.js"></script><br />
<br />
This can become a problem when we try to write reusable code. Lets say we want to put our event handler into a object and then call it when a user clicks on a link:<br />
<br />
<a class="jsbin-embed" href="http://jsbin.com/uzuqil/2/embed?live,javascript">JS Bin Demo</a><script src="static.jsbin.com/js/embed.js"></script> <br />
<br />
If you run the code you'll see that you get "<span style="color: #274e13;">Hello, undefined</span>" instead of "<span style="color: #274e13;">Hello, Homer Simpson</span>". The reason is simple, jQuery used the link as the context of this where no myName property exists. Enter <span style="font-family: Courier New, Courier, monospace;">jQuery.proxy</span>.<br />
<br />
According to the jQuery Documentation, the proxy function:<br />
<blockquote class="tr_bq">
<span style="background-color: #fafafa; color: #777777; font-family: 'myriad pro', 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif; font-size: 17px; font-style: italic; line-height: 23px;">Takes a function and returns a new one that will always have a particular context.</span></blockquote>
This means that by using the $.proxy function we can make our callback run in the proper context, in this case itself:<br />
<br />
<a class="jsbin-embed" href="http://jsbin.com/ecefij/2/embed?live,javascript">JS Bin Demo</a><script src="static.jsbin.com/js/embed.js"></script><br />
<br />
The change is subtle, but the result is exactly what we want. Now, at this point you might be asking yourself, "isn't this the same thing as using the <span style="font-family: Courier New, Courier, monospace;">apply()</span> or<span style="font-family: Courier New, Courier, monospace;"> call()</span> methods (<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply" target="_blank">mdn apply documentation)</a>? The answer is yes...and no. Lets look at how to get the desired result using <span style="font-family: Courier New, Courier, monospace;">apply():</span><br />
<br />
<a class="jsbin-embed" href="http://jsbin.com/uvigil/2/embed?live,javascript">JS Bin Demo</a><script src="http://static.jsbin.com/js/embed.js"></script><br />
<br />
If you look closely you'll notice a slight difference, the callback is now invoked in an anonymous function instead of passed directly to the <span style="font-family: Courier New, Courier, monospace;">on()</span> method. This is because the apply method invokes the function immediately whereas jQuery's proxy function only returns a reference function for later invocation. This is a bit nicer because it makes for slightly more terse code.<br />
<br />
In addition the <span style="font-family: Courier New, Courier, monospace;">proxy()</span> function does a few more things: <br />
<br />
<ul>
<li>it makes sure that the function passed in is actually a function</li>
<li>it assignes a unique ID to the function. <b>This is very important because when trying to unbind a function you may not be unbinding the proper function if you are passing in the function to the off() method. Its best to always use namespaced events when using on() and off() with $.proxy().</b></li>
</ul>
<div>
<a href="http://blog.bittersweetryan.com/p/jquery-function-of-week.html">Check out the all of the jQuery function's of the week.</a></div>
Anonymoushttp://www.blogger.com/profile/14442784579016175402noreply@blogger.comtag:blogger.com,1999:blog-8892935606954477363.post-24465642887267640062012-07-27T11:28:00.003-05:002012-07-29T06:52:49.493-05:00Solving JavaScript Async Issues the Easy Way, With EventsBy now we all know that JavaScript is asyncronous and what that means, right? If not the following code will help explain the concept in 30 seconds:<br />
<br />
<script src="https://gist.github.com/3188637.js?file=async.js">
</script><br />
This code will run function <span style="color: #274e13;">a</span>() then <span style="color: #274e13;">b</span>(), even if the ajax request in a() has not yet completed.<br />
<br />
There are a lot of approaches that can be used to make sure that b only runs when a is done. One approach would be to use jQuery deferreds like so:<br />
<br />
<script src="https://gist.github.com/3188703.js?file=async.js">
</script><br />
We can also use a async library, such as <a href="https://github.com/kriskowal/q" target="_blank">q</a>, if we need a bit more power. Or we can use JavaScript's <span style="font-family: 'Courier New', Courier, monospace;">setTimeout(func, delay)</span> function to continuously check for a variable the function <span style="color: #274e13;">a</span>() sets when it is done before we call <span style="color: #274e13;">b</span>(), how awful does that sound? In some cases there is a quite simple way to achieve this, by using events. I might even argue that using events is the more JavaScripty way to do things in the right situation. Lets take a look at the a/b example, this time using events:<br />
<br />
<script src="https://gist.github.com/3188756.js?file=async.js">
</script><br />
Lets take take a look at a real world example of using events to make sure things happen in the proper order. Here we will use a backbone collection as a wrapper for a one or more <span style="color: #073763;">Contact</span> objects that will be reused in multiple places in an application:<br />
<br />
<script src="https://gist.github.com/3188820.js?file=async.js">
</script><br />
Let say we want to use this collection to populate a drop down when a view is initialized like so:<br />
<br />
<script src="https://gist.github.com/3188839.js?file=async.js">
</script><br />
Using this code there is a good chance that the models will be an empty array when we try to add them to the dropdown. Also, when the collection's <span style="font-family: 'Courier New', Courier, monospace;">fetch()</span> completes the <span style="font-family: 'Courier New', Courier, monospace;">app.contacts.models</span> array will be reset, meaning that the reference to the contacts in your view likely will not reference the current <span style="font-family: 'Courier New', Courier, monospace;">app.contacts.models</span> array.<br />
<br />
To fix this, lets first update our collection to trigger an event when the contacts are loaded. In this example I'm going to use jQuery's<span style="font-family: 'Courier New', Courier, monospace;"> trigger(eventName)</span> function to keep things easy:<br />
<br />
<script src="https://gist.github.com/3188783.js?file=async.js">
</script><br />
The last step is to make sure we are adding the carriers to the drop down after they have been added to the collection. To do this we just need to add an event listener to our initialize function:<br />
<br />
<script src="https://gist.github.com/3188907.js?file=async.js">
</script><br />
<br />
Now we will always be working with a populated collection in our <span style="font-family: 'Courier New', Courier, monospace;">addContacts</span> method.Anonymoushttp://www.blogger.com/profile/14442784579016175402noreply@blogger.comtag:blogger.com,1999:blog-8892935606954477363.post-69776853419567476712012-07-23T21:14:00.000-05:002012-08-14T20:50:39.149-05:00jQuery Function Of The Week: onejQuery's one function is an extremely useful function when you want an event to fire exactly one time. According to the official jQuery documentation use one to, "Attach a handler to an event for the elements. The handler is executed at most once per element" One is a much more terse way of setting an event handler and calling unbind() or off() in the handler function. <br />
<br />
The easiest use of one is to pass it an event and a handler like so:<br />
<br />
<script src="https://gist.github.com/3167576.js?file=gistfile1.js">
</script><br />
<br />
<a href="http://jsbin.com/edakus/1/edit?javascript,console,live" target="_blank">Click Here to Demo on JS Bin</a><br />
<br />
You can click the link as many times as you wish, however the event will only fire once. <br />
<br />
You can pass in more than one event handler to the one function by passing in a list of events separated by a space. When you do this each event will fire once. In this example the event will fire 3 times, one time for each event:<br />
<br />
<script src="https://gist.github.com/3167571.js?file=gistfile1.js">
</script><br />
<br />
<a href="http://jsbin.com/itigoj/3/edit?javascript,console,live" target="_blank">Click Here to Demo on JS Bin</a><br />
<br />
You can also pass in custom data to the event handler, the data comes attached to the event.data object like so:<br />
<br />
<script src="https://gist.github.com/3167563.js?file=gistfile1.js">
</script><br />
<br />
<a href="http://jsbin.com/atuxom/4/edit?live,console,javascript" target="_blank">Click Here to Demo on JS Bin</a><br />
<br />
One additional thing you can do with the one function is use an additional selector to pass into the one event that will attach the event to exactly one of the descendants of the matched set. In the following example click on any of the li elements, then click on another, you'll see the event only fires for the first element selected. <br />
<br />
<script src="https://gist.github.com/3167517.js?file=gistfile1.js">
</script><br />
<br />
<a href="http://jsbin.com/atejof/4/edit?live,console,javascript" target="_blank">Click Here to Demo on JS Bin</a><br />
<br />
<a href="http://blog.bittersweetryan.com/p/jquery-function-of-week.html">Check out the all of the jQuery function's of the week.</a><br />
<br />
<br />
Anonymoushttp://www.blogger.com/profile/14442784579016175402noreply@blogger.comtag:blogger.com,1999:blog-8892935606954477363.post-66180195871248229542012-07-18T14:03:00.001-05:002012-07-18T14:03:21.261-05:00Playing Around With JavaScript's stopPropagation and preventDefault MethodsWhile playing around with pure JavaScript events lately I created this jsfiddle to demonstrate the concepts of the event methods preventDefault() and stopPrpagation(). While you are playing with it make sure to have your Browser's console open so you can see the debugging output. <br />
<br />
The preventDefault() method on an event, does exactly that, prevents the event's default behavior. In this instance it stops an <a> element from going to the link. The stopPropagation() method stops the event from bubbling up DOM nodes. In this case we have an <a> link nested in a <span> that is nested in a <div>. When a user clicks on the <span style="background-color: white;"><a> the event is triggered on that element, then the span, then the div, all the way up the DOM until it reaches the document node. Calling stopPropagation() on the </span><span style="background-color: white;"><a>'s click event only triggers the event on the </span><span style="background-color: white;"><a> element and none of its parent nodes. </span><br />
<br />
<iframe allowfullscreen="allowfullscreen" frameborder="0" src="http://jsfiddle.net/bittersweetryan/rAXYQ/embedded/" style="height: 300px; width: 100%;"></iframe>Anonymoushttp://www.blogger.com/profile/14442784579016175402noreply@blogger.comtag:blogger.com,1999:blog-8892935606954477363.post-57001165281731484692012-07-05T07:20:00.001-05:002012-07-05T07:20:37.162-05:00Screencast: Awesome New Feature In The ColdFusion SublimeText Package.If you haven't updated your SublimeText ColdFusion package recently you really need to. The one I only know as <a href="https://twitter.com/#!/atomi" target="_blank">atomi</a> has added function intellisence, which in my opinion is huge! <br />
<br />
From what I experienced in the early release it only works after a function is added and the file is saved, however once you do you can now start to type the name of a function and hit "tab" and Sublime will fill in the function WITH the parameter names and types. Check out the video below to see this in action.<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="375" mozallowfullscreen="" src="http://player.vimeo.com/video/45203078" webkitallowfullscreen="" width="500"></iframe> <br />
<a href="http://vimeo.com/45203078">SublimeText ColdFusion Function Intellisence</a> from <a href="http://vimeo.com/user4958667">Ryan Anklam</a> on <a href="http://vimeo.com/">Vimeo</a>.Anonymoushttp://www.blogger.com/profile/14442784579016175402noreply@blogger.comtag:blogger.com,1999:blog-8892935606954477363.post-77375847443633300112012-07-03T08:46:00.000-05:002012-07-03T08:46:08.366-05:00ColdFusion Koans Drive ExtendedI've decided to extend the ColdFusion Koans contribution drive till the end of July! The project received lots of great contributions, however, some potential contributors ran out of time while working on making their contributions awesome. <br />
<br />
If you don't know what the drive is all about check out my original <a href="http://blog.bittersweetryan.com/2012/06/coldfusuion-koans-contribution-drive.html" target="_blank">post</a>.<br />
<br />
<br />Anonymoushttp://www.blogger.com/profile/14442784579016175402noreply@blogger.com