atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">

  <title><![CDATA[Mega Awesome Blog 'n Stuff]]></title>
  <link href="http://gpalmer.me/atom.xml" rel="self"/>
  <link href="http://gpalmer.me/"/>
  <updated>2013-08-05T16:34:49-07:00</updated>
  <id>http://gpalmer.me/</id>
  <author>
    <name><![CDATA[Greg Palmer]]></name>
    <email><![CDATA[gpalmer323@gmail.com]]></email>
  </author>
  <generator uri="http://octopress.org/">Octopress</generator>

  
  <entry>
    <title type="html"><![CDATA[So, does this mean I work for Adobe?]]></title>
    <link href="http://gpalmer.me/blog/2013/08/05/so-does-this-mean-i-work-for-adobe/"/>
    <updated>2013-08-05T09:50:00-07:00</updated>
    <id>http://gpalmer.me/blog/2013/08/05/so-does-this-mean-i-work-for-adobe</id>
    <content type="html"><![CDATA[<p>Well, not really, but as of a few days ago, I can officially say my name is on their Brackets project! See <a href="http://github.com/adobe/brackets/pull/4515" target="_blank">pull request #4515</a>.</p>

<p>If you&rsquo;re not familiar with Brackets, it&rsquo;s Adobe&rsquo;s open-source code editor built mostly with web technologies (HTML, CSS, JS). While a bit of a ways off from more established code editors like Sublime Text, the Brackets software is pretty sweet and gaining momentum everyday. <a href="http://brackets.io/" target="_blank">Read more here if interested</a>.</p>

<p><img class="center" src="http://gpalmer.me/images/brackets-logo.png" title="'Adobe Brackets logo'" ></p>

<p>A few weeks back, during the final couple weeks of Hack Reactor, we had some time to work on open-source projects. I chose to dive right in and sought out as many projects as I could. I spent the greater part of a week discussing (and eventually submitting fixes for) various small GitHub issues in Backbone, Underscore, and Reveal.js to no avail. But it was all worth it when I received a series of GitHub emails in the middle of the night letting me know that <a href="https://github.com/TomMalbran" target="_blank">Tomás Malbrán</a> was reviewing the code I had submitted that evening to the Brackets project.</p>

<p>A code review from a fellow Brackets hacker halfway across the world? <a href="http://files.myopera.com/bud8girl/albums/41795/napoleondynamite.gif" target="_blank">Flippin&#8217; sweet!</a></p>

<p>So what did I even do, exactly?</p>

<!-- more -->


<p>Well, I did this:</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">function</span> <span class="nx">handleFileDelete</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>        <span class="kd">var</span> <span class="nx">entry</span> <span class="o">=</span> <span class="nx">ProjectManager</span><span class="p">.</span><span class="nx">getSelectedItem</span><span class="p">();</span>
</span><span class='line'>        <span class="k">if</span> <span class="p">(</span><span class="nx">entry</span><span class="p">.</span><span class="nx">isDirectory</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>            <span class="nx">Dialogs</span><span class="p">.</span><span class="nx">showModalDialog</span><span class="p">(</span>
</span><span class='line'>                <span class="nx">DefaultDialogs</span><span class="p">.</span><span class="nx">DIALOG_ID_EXT_DELETED</span><span class="p">,</span>
</span><span class='line'>                <span class="nx">Strings</span><span class="p">.</span><span class="nx">CONFIRM_FOLDER_DELETE_TITLE</span><span class="p">,</span>
</span><span class='line'>                <span class="nx">StringUtils</span><span class="p">.</span><span class="nx">format</span><span class="p">(</span>
</span><span class='line'>                    <span class="nx">Strings</span><span class="p">.</span><span class="nx">CONFIRM_FOLDER_DELETE</span><span class="p">,</span>
</span><span class='line'>                    <span class="nx">StringUtils</span><span class="p">.</span><span class="nx">breakableUrl</span><span class="p">(</span><span class="nx">entry</span><span class="p">.</span><span class="nx">name</span><span class="p">)</span>
</span><span class='line'>                <span class="p">),</span>
</span><span class='line'>                <span class="p">[</span>
</span><span class='line'>                    <span class="p">{</span>
</span><span class='line'>                        <span class="nx">className</span> <span class="o">:</span> <span class="nx">Dialogs</span><span class="p">.</span><span class="nx">DIALOG_BTN_CLASS_NORMAL</span><span class="p">,</span>
</span><span class='line'>                        <span class="nx">id</span>        <span class="o">:</span> <span class="nx">Dialogs</span><span class="p">.</span><span class="nx">DIALOG_BTN_CANCEL</span><span class="p">,</span>
</span><span class='line'>                        <span class="nx">text</span>      <span class="o">:</span> <span class="nx">Strings</span><span class="p">.</span><span class="nx">CANCEL</span>
</span><span class='line'>                    <span class="p">},</span>
</span><span class='line'>                    <span class="p">{</span>
</span><span class='line'>                        <span class="nx">className</span> <span class="o">:</span> <span class="nx">Dialogs</span><span class="p">.</span><span class="nx">DIALOG_BTN_CLASS_PRIMARY</span><span class="p">,</span>
</span><span class='line'>                        <span class="nx">id</span>        <span class="o">:</span> <span class="nx">Dialogs</span><span class="p">.</span><span class="nx">DIALOG_BTN_OK</span><span class="p">,</span>
</span><span class='line'>                        <span class="nx">text</span>      <span class="o">:</span> <span class="nx">Strings</span><span class="p">.</span><span class="nx">DELETE</span>
</span><span class='line'>                    <span class="p">}</span>
</span><span class='line'>                <span class="p">]</span>
</span><span class='line'>            <span class="p">)</span>
</span><span class='line'>                <span class="p">.</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>                    <span class="k">if</span> <span class="p">(</span><span class="nx">id</span> <span class="o">===</span> <span class="nx">Dialogs</span><span class="p">.</span><span class="nx">DIALOG_BTN_OK</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>                        <span class="nx">ProjectManager</span><span class="p">.</span><span class="nx">deleteItem</span><span class="p">(</span><span class="nx">entry</span><span class="p">);</span>
</span><span class='line'>                    <span class="p">}</span>
</span><span class='line'>                <span class="p">});</span>
</span><span class='line'>        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>            <span class="nx">ProjectManager</span><span class="p">.</span><span class="nx">deleteItem</span><span class="p">(</span><span class="nx">entry</span><span class="p">);</span>
</span><span class='line'>        <span class="p">}</span>
</span><span class='line'>    <span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>Which turns into this:</p>

<p><img class="center" src="http://gpalmer.me/images/brackets-confirm-folder-delete.png" title="'confirm folder delete'" ></p>

<p>Pretty cool, huh?</p>

<p>Prior to my few lines of code above, when someone deleted a folder, it simply disappeared from the sidebar and went to the trash. Now, a modal dialog box pops up and confirms whether or not you actually meant to delete said folder.</p>

<p>Adobe makes it <a href="http://github.com/adobe/brackets/blob/master/CONTRIBUTING.md"><em>super</em> easy</a> to get involved in the Brackets project, and it&rsquo;s a fantastic way to introduce yourself to a HUGE codebase and see what it takes to develop software at such a scale.</p>

<p>All in all: 10/10 &hellip;would code again</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Loopy Labels]]></title>
    <link href="http://gpalmer.me/blog/2013/07/16/loopy-labels/"/>
    <updated>2013-07-16T22:19:00-07:00</updated>
    <id>http://gpalmer.me/blog/2013/07/16/loopy-labels</id>
    <content type="html"><![CDATA[<p><strong>TIL: loops have labels&hellip;and in certain situations, they might actually be useful</strong></p>

<p>Way way back, to a time long long ago, when I was just getting started teaching myself how to code, I picked up one of the premier beginner&rsquo;s books on Javascript &mdash; <a href="http://eloquentjavascript.net/" target="_blank"><em>Eloquent Javascript</em></a> by Marijn Haverbeke.</p>

<p>It&rsquo;s been awhile, so I decided to check out the book once again. Aside from reminding myself just how far I&rsquo;ve come, I ended up discovering something I&rsquo;d never seen before.</p>

<p>Basically, when dealing with nested loops (typically not a very good idea due to potential complexity issues), you can provide labels to the inner and outer loops. The label can be any valid variable name that isn&rsquo;t a keyword and the syntax looks like this:</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">label</span><span class="o">-</span><span class="nx">outer</span> <span class="o">:</span>
</span><span class='line'>  <span class="c1">// some statement or loop</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">label</span><span class="o">-</span><span class="nx">inner</span> <span class="o">:</span>
</span><span class='line'>    <span class="c1">//some statement of loop</span>
</span></code></pre></td></tr></table></div></figure>


<p>This now provides us with a certain bit of additional functionality using the <code>break</code> and <code>continue</code> statements.</p>

<!-- more -->


<h3><code>break</code>:</h3>

<p>When the <code>break</code> statement is used without a specific label, it will break and kick out of the current loop. So if we <code>break</code> in the inner loop, it will merely return us to the next iteration of the outer loop. But sometimes, there might be a situation when we want to break out of the outer loop as well. In this case, using our labels from the example above, we would simply say <code>break label-outer</code> and it would kick out of the entire iteration process.</p>

<p>Example:</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">outer</span><span class="o">:</span>
</span><span class='line'>  <span class="k">for</span> <span class="p">(</span> <span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="mi">10</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">inner</span><span class="o">:</span>
</span><span class='line'>      <span class="k">for</span> <span class="p">(</span> <span class="kd">var</span> <span class="nx">j</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">j</span> <span class="o">&lt;</span> <span class="mi">10</span><span class="p">;</span> <span class="nx">j</span><span class="o">++</span> <span class="p">)</span> <span class="p">{</span>
</span><span class='line'>        <span class="k">if</span> <span class="p">(</span> <span class="nx">i</span> <span class="o">*</span> <span class="nx">j</span> <span class="o">===</span> <span class="mi">25</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>          <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span> <span class="nx">i</span> <span class="o">+</span> <span class="s1">&#39;x&#39;</span> <span class="o">+</span> <span class="nx">j</span> <span class="o">+</span> <span class="s1">&#39;= 25&#39;</span> <span class="p">);</span>
</span><span class='line'>          <span class="k">break</span> <span class="nx">outer</span><span class="p">;</span>
</span><span class='line'>        <span class="p">}</span>
</span><span class='line'>      <span class="p">}</span>
</span><span class='line'>  <span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>Although a very naive use case, the above nested loops will break when they find two numbers whose product is 25.</p>

<h3><code>continue</code>:</h3>

<p>Similar to the <code>break</code> statement, when the <code>continue</code> statement is used without a label context, it will only continue the current loop. Also similar to the <code>break</code> statement, when <code>continue</code> is used with the outer label, it will break from the inner loop and continue to the next iteration of the outer loop. Pretty nifty.</p>

<p>I&rsquo;d write another example, but it&rsquo;s pretty self-explanatory. If you&rsquo;re having trouble, which, being the smarty-pants you are, I know you&rsquo;re not&hellip;feel free to <a href="http://gpalmer.me/about/">contact me!</a>.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Hexagram]]></title>
    <link href="http://gpalmer.me/blog/2013/07/05/hexagram/"/>
    <updated>2013-07-05T21:57:00-07:00</updated>
    <id>http://gpalmer.me/blog/2013/07/05/hexagram</id>
    <content type="html"><![CDATA[<p><a href="http://hexagram.gpalmer.me" target="_blank"><strong>Click here for a live example of the Hexagram image gallery!</strong></a> or <a href="http://github.com/g-palmer/hexagram" target="_blank">Check out the code on Github</a></p>

<p>This blog is a bit overdue, but I thought I&rsquo;d take a second to highlight the personal project I worked on earlier this month. I had the unique opportunity of taking on a challenge from a local SF based startup. Without divulging too much information, they were basically looking for a cool way to dynamically display a busy feed of images.</p>

<p>Given a bit of creative freedom, I immediately took to sketching out as many ideas as I could on paper.</p>

<p><img class="right" src="http://gpalmer.me/images/collageideas.jpg" width="400"></p>

<p>After speaking with the client and going over each of the ideas, it became apparent that the honeycomb style interested them the most. Little did I know how much of a treat I was in for&hellip;</p>

<p>After only a few minutes of staring at my computer, I quickly realized how difficult it was to create dynamic, image-filled hexagons within the web world where hexagons weren&rsquo;t really meant to play. Then get them to tesselate, no less.</p>

<p>It took quite a bit of research and an even greater amount of revisiting middle and high school geometry, but I finally figured it out.</p>

<!-- more -->


<p>The basic idea behind creating a hexagon turned out to be the least of my worries. It&rsquo;s simply a stack of three rectangular <code>div</code>&rsquo;s rotated 60deg from the last, with the bottom <code>div</code> holding the background image and all overlapping areas being displayed. The tricky part turned out to be the math behind symmetric tesselation.</p>

<p><img class="left" src="http://gpalmer.me/images/hexmath.jpg" width="400"></p>

<p>With some 30-60-90 right triangle magic, I calculated the height and width of each hexagon making them fit perfectly in the avaiable screen space.</p>

<p>I really enjoyed how the end product turned out. And with Instagram adding video capability in the middle of the project period, I was able to HTML5 video support and it got even coolor.</p>

<p>I&rsquo;m currently in the middle of some refactors using only the Instagram API and hope to have a live version up and running shortly along with the open source repo on GitHub. Stayed tuned for that to pop up here shortly. But in the meantime, check out a small screenshot below!</p>

<p><img class="center" src="http://gpalmer.me/images/sfgiantshoneycomb.png" width="600"></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Who needs jQuery?]]></title>
    <link href="http://gpalmer.me/blog/2013/07/02/who-needs-jquery/"/>
    <updated>2013-07-02T20:55:00-07:00</updated>
    <id>http://gpalmer.me/blog/2013/07/02/who-needs-jquery</id>
    <content type="html"><![CDATA[<p><strong><em>THIS POST IS VERY MUCH STILL A WORK IN PROGRESS</em></strong></p>

<p>When first learning Javascript, aside from simple syntax and some for loops, typically a new developer will jump right into jQuery. This is largely a testament to the simplicity and power of the library as it allows someone with limited programming experience to start doing some pretty nifty things in the browser. jQuery doesn&rsquo;t even shy away from this fact: &lsquo;Write less, Do More&rsquo;. But as overused quotes from that one movie go, <em>&ldquo;With great power, comes great responsibility.&rdquo;</em></p>

<p><img class="center" src="http://ejohn.org/apps/workshop/adv-talk/jquery_logo.png" title="'jQuery'" ></p>

<p>The difference between a beginning developer and an intermediate to advanced developer is their ability to understand where all of this &lsquo;magic&rsquo; is coming from. So what better way to spend the next few minutes than checking out some of the native DOM methods that jQuery is replacing. And in doing so, we can come to better appreciate the library and maybe even speed up some of our sites<sup>1</sup>.</p>

<!-- more -->


<h3>Selectors</h3>

<p>We&rsquo;ll begin with the easy stuff. One of the first things people do with jQuery is learn how to select elements(nodes) from the DOM.</p>

<p>In jQuery you simply use a CSS style selector to grab an element of list of elements:</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">)</span> <span class="c1">// returns a list of all matching &#39;&lt;div&gt;&#39; elements</span>
</span><span class='line'><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#xyz&#39;</span><span class="p">)</span> <span class="c1">// returns the matching element with id=&quot;xyz&quot;</span>
</span><span class='line'><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.black&#39;</span><span class="p">)</span> <span class="c1">// returns a list of all matching elements with class=&quot;black&quot;</span>
</span></code></pre></td></tr></table></div></figure>


<p>But natively we can still do the same thing with:</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">)</span>
</span><span class='line'><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;xyz&#39;</span><span class="p">)</span>
</span><span class='line'><span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">&#39;black&#39;</span><span class="p">)</span>
</span></code></pre></td></tr></table></div></figure>


<p>We also can use methods that works more similar to jQuery:</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">([</span><span class="nx">some</span> <span class="nx">CSS</span> <span class="nx">style</span> <span class="nx">selector</span> <span class="nx">string</span><span class="p">])</span> <span class="c1">// returns first matched element</span>
</span><span class='line'><span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">([</span><span class="nx">some</span> <span class="nx">CSS</span> <span class="nx">style</span> <span class="nx">selector</span> <span class="nx">string</span><span class="p">])</span> <span class="c1">// returns list of matched element</span>
</span></code></pre></td></tr></table></div></figure>


<p>Because these methods also work on elements, we can chain them together to find all the <code>&lt;div&gt;</code> elements with <code>class="black"</code> that are children of the element with <code>id="xyz"</code>.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;xyz&#39;</span><span class="p">).</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">).</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">&#39;black&#39;</span><span class="p">)</span>
</span></code></pre></td></tr></table></div></figure>


<h3>Create and append new elements</h3>

<p>As you know, jQuery also allows us to dynamically create new elements(nodes) and then subsequently add them to the DOM.</p>

<p>In jQuery you just write a string of some valid HTML:</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">$div</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;&lt;div class=&quot;black&quot;&gt;&lt;p&gt;Hello World&lt;/p&gt;&lt;/div&gt;&#39;</span><span class="p">);</span> <span class="c1">// creates a new div element with class=&quot;black&quot; and some paragraph text</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">$img</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;&lt;img src=&quot;picture.jpg&quot; alt=&quot;My Picture&quot;&gt;&#39;</span><span class="p">);</span> <span class="c1">// creates a new img element with a src and alt text</span>
</span></code></pre></td></tr></table></div></figure>


<p>Natively we can still do the same thing:</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">div</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;div&#39;</span><span class="p">);</span> <span class="c1">// create new div element</span>
</span><span class='line'><span class="nx">div</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">&#39;black&#39;</span><span class="p">;</span> <span class="c1">// give it a class name of &#39;black&#39;</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">paragraph</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;p&#39;</span><span class="p">);</span> <span class="c1">// create new p element</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">text</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createTextNode</span><span class="p">(</span><span class="s1">&#39;Hello World&#39;</span><span class="p">);</span> <span class="c1">// create a new text node</span>
</span><span class='line'><span class="nx">paragraph</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">text</span><span class="p">);</span> <span class="c1">// add text node to the new div</span>
</span><span class='line'><span class="nx">div</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">paragraph</span><span class="p">)</span>
</span><span class='line'>
</span><span class='line'><span class="kd">var</span> <span class="nx">img</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;img&#39;</span><span class="p">);</span> <span class="c1">// create a new img element</span>
</span><span class='line'><span class="nx">img</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="s1">&#39;picture.jpg&#39;</span><span class="p">;</span> <span class="c1">// set it&#39;s src using direct property manipulation</span>
</span><span class='line'><span class="nx">img</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;alt&#39;</span><span class="p">,</span> <span class="s1">&#39;My Picture&#39;</span><span class="p">);</span> <span class="c1">// set it&#39;s alt using setAttribute method (similar to using img.alt)</span>
</span></code></pre></td></tr></table></div></figure>


<p>What I think is cool, and simplifies thinking about things a bit, is we can directly update properties on a node since it is basically just an object. An example of this is setting the <code>src</code> of the img by simply setting this property of the <code>img</code> node.</p>

<p>This works for just about everything from setting styles (CSS) to classes, ids and any data. Basically log a DOM node to the Chrome console and you can see all of the properties that are accessible.</p>

<p>Typically the next step would be to add these elements to the DOM</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;body&#39;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">$div</span><span class="p">)</span> <span class="c1">// jQuery select body element and append the new div</span>
</span><span class='line'>
</span><span class='line'><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;body&#39;</span><span class="p">).</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">div</span><span class="p">)</span> <span class="c1">// native select body, then append div</span>
</span></code></pre></td></tr></table></div></figure>


<p>There&rsquo;s actually some other ways that we can create elements and add them to the DOM using document and element methods such as <code>createDocumentFragment</code>, <code>innerHTML</code>, and <code>textContent</code>.</p>

<h3>Ajax</h3>

<p>Now for some of the more fun stuff. jQuery makes sending ajax requests incredibly simple:</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">([</span><span class="nx">options</span><span class="p">])</span>
</span></code></pre></td></tr></table></div></figure>


<p>Where options is an object containing things like the URL, ajax method, headers, data to send and callback functions.</p>

<p>Natively, things are a bit different, and can easily get complex. A lot of what makes jQuery ajax so nice is it abstracts away a lot of this complexity. To keep things simple, let&rsquo;s just say we want to make a &lsquo;GET&rsquo; request to a RESTful API and we expect to recieve some JSON data back, which we&rsquo;ll log to the console.</p>

<p>We have to create a new instance of the <code>XMLHttpRequest</code> class<sup>2</sup> to get things started.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">request</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">XMLHttpRequest</span><span class="p">();</span>
</span></code></pre></td></tr></table></div></figure>


<p>From there, we&rsquo;ll need to setup the request and make things happen.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">request</span><span class="p">.</span>
</span></code></pre></td></tr></table></div></figure>


<blockquote><p>1 By using native DOM APIs, we don&rsquo;t need to load jQuery (or can conditionally load jQuery if the browser doesn&rsquo;t support native DOM APIs). In addition, many performance tests have shown that using the native methods is quite a bit faster than jQuery. The tradeoff is that jQuery can also perform the methods on older browsers where native DOM APIs aren&rsquo;t supported &mdash; making things easier overall.
2 Read more about the <code>XMLHttpRequest</code> class on <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">MDN</a>. There&rsquo;s a bunch more it can do than just handle XML data and HTTP requests.</p></blockquote>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Reading the Underscore.js source code - Part 1]]></title>
    <link href="http://gpalmer.me/blog/2013/06/22/reading-the-underscore-dot-js-source-code/"/>
    <updated>2013-06-22T22:25:00-07:00</updated>
    <id>http://gpalmer.me/blog/2013/06/22/reading-the-underscore-dot-js-source-code</id>
    <content type="html"><![CDATA[<p>Now that I feel like I&rsquo;ve got a better understanding of the Javascript language, it&rsquo;s always been a side goal of mine to read through as many of the major JS frameworks, libraries, etc. as I can. I feel like being able to read through and understand what others have done to make really awesome code, will help push me along the way to be an even better coder myself.</p>

<p><img class="center" src="http://underscorejs.org/docs/images/underscore.png" title="'underscore.js'" ></p>

<p>The <a href="http://underscorejs.org/" target="_blank"><em>underscore.js</em></a> library has a special place in my heart as it played a major role in the early stages of learning JS. So what better place to start &mdash; here are a few notes from my runthrough of the <em>underscore.js</em> source:</p>

<!-- more -->


<p><strong>1. Setting the stage</strong></p>

<p>  The first bit of Underscore is all about setting the stage for the rest of the library by creating variables and setting references. This alone is not all that interesting, and something most programmers do. What caught my eye was the few lines meant to save bytes, boost performance and just make things easier later on.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">ArrayProto</span> <span class="o">=</span> <span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="nx">ObjProto</span> <span class="o">=</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="nx">FuncProto</span> <span class="o">=</span> <span class="nb">Function</span><span class="p">.</span><span class="nx">prototype</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="kd">var</span> <span class="nx">push</span>             <span class="o">=</span> <span class="nx">ArrayProto</span><span class="p">.</span><span class="nx">push</span><span class="p">,</span>
</span><span class='line'>      <span class="nx">slice</span>            <span class="o">=</span> <span class="nx">ArrayProto</span><span class="p">.</span><span class="nx">slice</span><span class="p">,</span>
</span><span class='line'>      <span class="nx">concat</span>           <span class="o">=</span> <span class="nx">ArrayProto</span><span class="p">.</span><span class="nx">concat</span><span class="p">,</span>
</span><span class='line'>      <span class="nx">toString</span>         <span class="o">=</span> <span class="nx">ObjProto</span><span class="p">.</span><span class="nx">toString</span><span class="p">,</span>
</span><span class='line'>      <span class="nx">hasOwnProperty</span>   <span class="o">=</span> <span class="nx">ObjProto</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">;</span>
</span></code></pre></td></tr></table></div></figure>


<p>  The above lines create references to prototype functions and save them to local variables. This only requires the prototype lookup once and never again&mdash;a performance boost, albeit quite marginal, that you can see in this <a href="http://jsperf.com/underscoreprotoperf#run" target="_blank">JSPerf test</a>.</p>

<p>  As noted in the annotations, this also saves a few bytes in the minified version of the library. For example <code>push.call</code> is quite a few characters shorter than <code>Array.prototype.push.call</code>.</p>

<p><strong>2. <code>(obj.length === +obj.length)</code></strong></p>

<p>  What the hell does that mean?</p>

<p>  Turns out, it&rsquo;s not that crazy. It basically just tests if the object&rsquo;s length property is a number. The unary <code>+</code> operator on the right side coerces whatever follows to a number. The <code>===</code> conditional then returns true only if the object&rsquo;s length property was already a number. This basically means that the only things to pass this conditional will be an array, string or a function<sup>1</sup>. Fancy, huh?</p>

<p><strong>3. <code>array.push</code> vs. <code>array[array.length]</code></strong></p>

<p>  In Underscore&rsquo;s annoted source code, the map function uses <code>results[results.length]</code> to push items to the end of an array. Curious about why they chose this implementation, I researched a bit on the differnces between using <code>length</code> instead of the <code>push</code> method. There seems to be quite a bit of discussion around this topic (more than is necessary here), but this <a href="http://stackoverflow.com/questions/614126/why-is-array-push-sometimes-faster-than-arrayn-value" target="_blank">Stack Overflow discussion</a> delves into the native C implementation of an array behind the scenes and includes some more JSPerf tests.</p>

<p>  Worth noting is that in the most recent version of the underscore.js source on GitHub, the map function is now using <code>push</code>.</p>

<p><strong>4. Using <code>each</code> to loop backwards</strong></p>

<p>  I always thought of <code>each</code> as a simple looping function that started at the front and worked it&rsquo;s way to the end. It went front to back and nothing more. In Underscore&rsquo;s <code>reduceRight</code> function, they pull a sweet little trick that I had never really thought of before&mdash;looping backwards through a collection using <code>each</code>.</p>

<p>  The trick is to keep a simple counter that begins at the collection&rsquo;s length, and rewrite the index with this counter every time through the <code>each</code> loop before doing anything else. Every time through the loop, simply reduce the counter. Magic!</p>

<p><strong>5. <code>void 0</code> and <code>undefined</code> is mutable</strong></p>

<p>  On line 243 of Underscore, right in the middle of the <code>where</code> function, we are presented with the lovely <code>void 0</code>:</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">_</span><span class="p">.</span><span class="nx">where</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">obj</span><span class="p">,</span> <span class="nx">attrs</span><span class="p">,</span> <span class="nx">first</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">isEmpty</span><span class="p">(</span><span class="nx">attrs</span><span class="p">))</span> <span class="k">return</span> <span class="nx">first</span> <span class="o">?</span> <span class="k">void</span> <span class="mi">0</span> <span class="o">:</span> <span class="p">[];</span>
</span><span class='line'>  <span class="k">return</span> <span class="nx">_</span><span class="p">[</span><span class="nx">first</span> <span class="o">?</span> <span class="s1">&#39;find&#39;</span> <span class="o">:</span> <span class="s1">&#39;filter&#39;</span><span class="p">](</span><span class="nx">obj</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">key</span> <span class="k">in</span> <span class="nx">attrs</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="k">if</span> <span class="p">(</span><span class="nx">attrs</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="o">!==</span> <span class="nx">value</span><span class="p">[</span><span class="nx">key</span><span class="p">])</span> <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>    <span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'><span class="p">};</span>
</span></code></pre></td></tr></table></div></figure>


<p>  What the hell does that mean? Ya, I had no idea either. First time I&rsquo;ve ever seen it. Come to find out that the keyword <code>void</code> is a special function that will always return <code>undefined</code> regardless of it&rsquo;s input (and it doesn&rsquo;t even need parens, much like <code>typeof</code> and <code>instanceof</code>.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="k">void</span> <span class="mi">0</span> <span class="c1">// returns undefined</span>
</span><span class='line'><span class="k">void</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> <span class="c1">// returns undefined</span>
</span><span class='line'><span class="k">void</span> <span class="mi">98457</span> <span class="c1">// returns undefined</span>
</span><span class='line'><span class="k">void</span> <span class="s1">&#39;I bet this will be undefined&#39;</span> <span class="c1">// returns undefined</span>
</span></code></pre></td></tr></table></div></figure>


<p>  So why not just use <code>undefined</code>? Well apparently <code>undefined</code> is simply a variable belonging to the all seeing &lsquo;global object&rsquo; created at run time. This means, that <em>technically</em> it is mutable, i.e. some JS asshole can change it. Therefore, by using <code>void 0</code> (or <code>void [anything]</code> for that matter)<sup>2</sup>, we can be sure that <code>undefined</code> is always the return.</p>

<p>Well that&rsquo;s about all I have time for at the moment. But I look forward to digging a little deeper in to the Underscore source and seeing what other JS gems I can find. Stay tuned for part 2.</p>

<blockquote><p>1 Functions have a length property!? This was definitely a surprise to me as well, but they sure as hell do. It&rsquo;s equal to number of arguments the function takes.</p>

<p>2 Although we can use <code>void [anything]</code> to get undefined, it has become common practice to use <code>void 0</code> because of it&rsquo;s simple, straightforward and some guy said so a long time ago and everyone else agreed with him.</p></blockquote>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Hello World]]></title>
    <link href="http://gpalmer.me/blog/2013/06/02/hello-world/"/>
    <updated>2013-06-02T21:10:00-07:00</updated>
    <id>http://gpalmer.me/blog/2013/06/02/hello-world</id>
    <content type="html"><![CDATA[<p>Hey it&rsquo;s my first blog post. Everybody look at me.</p>
]]></content>
  </entry>
  
</feed>