Jekyll2022-05-09T04:00:57+00:00http://todd-henderson.me/feed.xmlTodd Henderson - ÜberGeekThe personal site of Todd Henderson, maker, überGeek and technophile.Todd HendersonC# Async/Await - The death of callback hell.2018-03-15T00:00:00+00:002018-03-15T00:00:00+00:00http://todd-henderson.me/tutorials/csharp/c-async-basics<h2 id="what-is-asyncawait">What is async/await?</h2>
<p>Simply put, <code class="highlighter-rouge">async</code> and <code class="highlighter-rouge">await</code> are syntactic sugar for the handling callbacks. The basic idea is that when you call a method with <code class="highlighter-rouge">await</code>, it tells the compiler to wrap that bad boy in a <code class="highlighter-rouge">Task</code> and to pass it to the Task Scheduler. The Task Scheduler then executes the <code class="highlighter-rouge">Task</code>, and then the code following the <code class="highlighter-rouge">await</code> that is dependant on the <code class="highlighter-rouge">Task</code> is run. The two following examples are functionally equivalent, but the Async/Await way is more readable.</p>
<h3 id="callback-flow">Callback flow</h3>
<div class="language-csharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">class</span> <span class="nc">Program</span>
<span class="p">{</span>
<span class="k">public</span> <span class="k">static</span> <span class="k">void</span> <span class="nf">Main</span><span class="p">(</span><span class="kt">string</span><span class="p">[]</span> <span class="n">args</span><span class="p">)</span>
<span class="p">{</span>
<span class="n">Console</span><span class="p">.</span><span class="nf">WriteLine</span><span class="p">(</span><span class="s">"Run Callack"</span><span class="p">);</span>
<span class="nf">GetPosts</span><span class="p">(</span> <span class="n">results</span> <span class="p">=></span> <span class="n">Console</span><span class="p">.</span><span class="nf">WriteLine</span><span class="p">(</span><span class="s">$"GET /Posts (Callback):</span><span class="p">{</span><span class="n">results</span><span class="p">}</span><span class="s">"</span><span class="p">)</span> <span class="p">);</span>
<span class="p">}</span>
<span class="k">static</span> <span class="k">void</span> <span class="nf">GetPosts</span><span class="p">(</span> <span class="n">Action</span><span class="p"><</span><span class="kt">string</span><span class="p">></span> <span class="n">callback</span> <span class="p">)</span>
<span class="p">{</span>
<span class="k">using</span> <span class="p">(</span><span class="kt">var</span> <span class="n">client</span> <span class="p">=</span> <span class="k">new</span> <span class="nf">WebClient</span><span class="p">())</span>
<span class="p">{</span>
<span class="n">client</span><span class="p">.</span><span class="n">DownloadStringCompleted</span> <span class="p">+=</span> <span class="p">(</span><span class="n">sender</span><span class="p">,</span> <span class="n">e</span><span class="p">)</span> <span class="p">=></span>
<span class="p">{</span>
<span class="n">Console</span><span class="p">.</span><span class="nf">WriteLine</span><span class="p">(</span> <span class="s">"Runing WebClient Callback"</span><span class="p">);</span>
<span class="kt">string</span> <span class="n">pageSourceCode</span> <span class="p">=</span> <span class="n">e</span><span class="p">.</span><span class="n">Result</span><span class="p">;</span>
<span class="nf">callback</span><span class="p">(</span><span class="n">pageSourceCode</span><span class="p">);</span>
<span class="p">};</span>
<span class="n">client</span><span class="p">.</span><span class="nf">DownloadStringAsync</span><span class="p">(</span><span class="k">new</span> <span class="nf">Uri</span><span class="p">(</span><span class="s">"https://jsonplaceholder.typicode.com/posts/"</span><span class="p">));</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="asyncawait-flow">Async/Await flow</h3>
<div class="language-csharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">class</span> <span class="nc">Program</span>
<span class="p">{</span>
<span class="k">public</span> <span class="k">static</span> <span class="k">async</span> <span class="n">Task</span> <span class="nf">Main</span><span class="p">(</span><span class="kt">string</span><span class="p">[]</span> <span class="n">args</span><span class="p">)</span>
<span class="p">{</span>
<span class="n">Console</span><span class="p">.</span><span class="nf">WriteLine</span><span class="p">(</span><span class="s">"Run Async"</span><span class="p">);</span>
<span class="n">Console</span><span class="p">.</span><span class="nf">WriteLine</span><span class="p">(</span><span class="s">$"GET /Posts (async): </span><span class="p">{</span><span class="k">await</span> <span class="nf">GetPostsAsync</span><span class="p">()}</span><span class="s">"</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">static</span> <span class="n">Task</span><span class="p"><</span><span class="kt">string</span><span class="p">></span> <span class="nf">GetPostsAsync</span><span class="p">()</span>
<span class="p">{</span>
<span class="k">using</span> <span class="p">(</span><span class="kt">var</span> <span class="n">client</span> <span class="p">=</span> <span class="k">new</span> <span class="nf">HttpClient</span><span class="p">())</span>
<span class="p">{</span>
<span class="k">return</span> <span class="k">new</span> <span class="nf">HttpClient</span><span class="p">().</span><span class="nf">GetStringAsync</span><span class="p">(</span><span class="s">"https://jsonplaceholder.typicode.com/posts/"</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<p><em>*See <a href="/dotnet/the-awesomeness-that-is-async-main/">The Awesomeness that is async Main()</a></em></p>
<h2 id="wtf-are-tasks">WTF are Tasks</h2>
<p><code class="highlighter-rouge">Task</code> are basically what they sound like they are, little bits of work, that can be done asynchronously. They generally come in two varity: <code class="highlighter-rouge">Task</code> and <code class="highlighter-rouge">Task<T></code> where T is the “return” value of the <code class="highlighter-rouge">Task</code>. In case it isn’t obvious, you would use the generic <code class="highlighter-rouge">Task<T></code> when you need to retrieve a value, otherwise just return the plain ol <code class="highlighter-rouge">Task</code>.</p>
<h2 id="gotyas">Got’yas</h2>
<p>There are a couple things you need to keep in mind when working with async/await:</p>
<ul>
<li><code class="highlighter-rouge">Task</code>s are not threads.</li>
<li><code class="highlighter-rouge">Task</code>s that are <code class="highlighter-rouge">await</code>ed run in a sequential queue unless told to do otherwise, ie <code class="highlighter-rouge">Paralell.ForEach()</code>. Think nested callbacks for each <code class="highlighter-rouge">await</code> (not exactly but close enought for this article).</li>
<li><code class="highlighter-rouge">Task</code>s may be run on a different thread then called, but the results are then marshalled to the calling thread.</li>
<li><code class="highlighter-rouge">Task</code>s are cheap but not free. Every time you wrap/unwrap a <code class="highlighter-rouge">Task</code> with <code class="highlighter-rouge">await</code> you are paying a cost.</li>
</ul>
<h2 id="da-rulze">Da Rulze</h2>
<ul>
<li>If you don’t need the <code class="highlighter-rouge">await</code>ed value in a method, don’t use the <code class="highlighter-rouge">async</code> keyword and just return the unadulterated <code class="highlighter-rouge">Task</code>.</li>
<li>Methods should return either <code class="highlighter-rouge">Task</code> or <code class="highlighter-rouge">Task<T></code> except for when called by an event delegate, ie. <code class="highlighter-rouge">Button.clicked</code> then they may return <code class="highlighter-rouge">void1</code>.</li>
<li>Method names should end with the word ‘Async’.</li>
<li>“Async all the way”, Don’t be switching between synchronous and asynchronous. Pick one, and be confident with your decision.</li>
</ul>
<p>Until next time, keep <a href="https://en.wikipedia.org/wiki/Hacker_culture">Hackin’</a>.</p>Todd HendersonWhat is async/await?The Awesomeness that is async Main()2018-02-15T00:00:00+00:002018-02-15T00:00:00+00:00http://todd-henderson.me/dotnet/the-awesomeness-that-is-async-main<p>One of the cool new features of C# 7.1 is asynchronous main functions. For many .Net developers it’s not a really big deal, but for those of us that dwell in the dark arcane arts of command line application programming, it is. With Azure’s growing usefulness, small performant <a href="/resources/programming-glossary/#CLI">CLI</a> app are gaining popularity.</p>
<h2 id="getting-started">Getting Started</h2>
<p>With your tool of choice, create a new WebAPI project. Now that you have your shiny new project we will need to open up the project’s <code class="highlighter-rouge">.csproj</code> file and add either <code class="highlighter-rouge"><LangVersion>7.1</LangVersion></code> or <code class="highlighter-rouge"><LangVersion>latest</LangVersion></code> to it, like below:</p>
<div class="language-csharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p"><</span><span class="n">PropertyGroup</span><span class="p">></span>
<span class="p"><</span><span class="n">TargetFramework</span><span class="p">></span><span class="n">netcoreapp2</span><span class="p">.</span><span class="m">0</span><span class="p"></</span><span class="n">TargetFramework</span><span class="p">></span>
<span class="p"><</span><span class="n">LangVersion</span><span class="p">></span><span class="n">latest</span><span class="p"></</span><span class="n">LangVersion</span><span class="p">></span>
<span class="p"></</span><span class="n">PropertyGroup</span><span class="p">></span>
</code></pre></div></div>
<p class="notice"><strong>Note:</strong>
For ya’ll Windows people out there, you can change the language version in Visual Studio IDE (I’ll be damned if I know how). I am sure you can google it.</p>
<p>Now replace the <code class="highlighter-rouge">Main()</code> function in <code class="highlighter-rouge">program.cs</code> to <code class="highlighter-rouge">public static async Task Main(string[] args) => await BuildWebHost(args).RunAsync();</code> and Voilà you are now “<a href="https://msdn.microsoft.com/en-us/magazine/jj991977.aspx">async all the way</a>”.</p>
<h2 id="example">Example</h2>
<div class="language-csharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">using</span> <span class="nn">System.Threading.Tasks</span><span class="p">;</span>
<span class="k">using</span> <span class="nn">Microsoft.AspNetCore</span><span class="p">;</span>
<span class="k">using</span> <span class="nn">Microsoft.AspNetCore.Hosting</span><span class="p">;</span>
<span class="k">namespace</span> <span class="nn">AsyncMainDemo</span>
<span class="p">{</span>
<span class="k">public</span> <span class="k">class</span> <span class="nc">Program</span>
<span class="p">{</span>
<span class="k">public</span> <span class="k">static</span> <span class="k">async</span> <span class="n">Task</span> <span class="nf">Main</span><span class="p">(</span><span class="kt">string</span><span class="p">[]</span> <span class="n">args</span><span class="p">)</span> <span class="p">=></span> <span class="k">await</span> <span class="nf">BuildWebHost</span><span class="p">(</span><span class="n">args</span><span class="p">).</span><span class="nf">RunAsync</span><span class="p">();</span>
<span class="k">public</span> <span class="k">static</span> <span class="n">IWebHost</span> <span class="nf">BuildWebHost</span><span class="p">(</span><span class="kt">string</span><span class="p">[]</span> <span class="n">args</span><span class="p">)</span> <span class="p">=></span>
<span class="n">WebHost</span><span class="p">.</span><span class="nf">CreateDefaultBuilder</span><span class="p">(</span><span class="n">args</span><span class="p">)</span>
<span class="p">.</span><span class="n">UseStartup</span><span class="p"><</span><span class="n">Startup</span><span class="p">>()</span>
<span class="p">.</span><span class="nf">Build</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<p>Until next time, keep <a href="https://en.wikipedia.org/wiki/Hacker_culture">Hackin’</a>.</p>Todd HendersonOne of the cool new features of C# 7.1 is asynchronous main functions. For many .Net developers it’s not a really big deal, but for those of us that dwell in the dark arcane arts of command line application programming, it is. With Azure’s growing usefulness, small performant CLI app are gaining popularity.2017 in Review2018-01-15T00:00:00+00:002018-01-15T00:00:00+00:00http://todd-henderson.me/review_of_2017_and_2018_goals<p>All in all 2017 was a pretty productive year. I crossed of three checkpoints off the my <a href="/bucketlist/">Bucket List</a> this year, and I am more than halfway to completing my Black Belt in Aikido. In 2018 I want to focus on reviving my blog and outdoor activities with the children.</p>
<p>I just barely missed my goal of publishing an app in the the three app stores this year (they are waiting for approval).</p>
<h2 id="bucket-list-update">Bucket List Update</h2>
<ul>
<li>Sailing
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />ASA 101 (March 2017)</li>
</ul>
</li>
<li>Black Belt
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />4th Kyu - 1st Purple Belt (February 2017)</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />3rd Kyu - 2nd Purple Belt (November 2017)</li>
</ul>
</li>
</ul>
<h2 id="2017-goals">2017 Goals</h2>
<ul>
<li>App Development
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />Publish App to Google Play</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><del>Publish App to Apple</del></li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><del>Publish App to Microsoft Store</del></li>
</ul>
</li>
<li>Health/Fitness
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />Get weight below 220 lbs.</li>
</ul>
</li>
<li>Camping/Outdoor
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />Take the kids primitive camping this year</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />Get SASS shotgun (Stretch Goal)</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />Get Hiking campin MVP</li>
</ul>
</li>
<li>Sailing
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />Complete ASA 101</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />Meet monthly Cruising Kitty Goal</li>
</ul>
</li>
</ul>
<h2 id="2018-goals">2018 Goals</h2>
<ul>
<li>App Development
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Publish Daily Bucket to Apple (Roll Over)</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Publish Daily Bucket to Microsoft Store (Roll Over)</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Publish Apple Watch app for Daily Bucket</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Publish Google Wear app for Daily Bucket</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Finish Family Feature for Daily Bucket</li>
</ul>
</li>
<li>Health/Fitness
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Keep weight below 200 lbs.</li>
</ul>
</li>
<li>Camping/Outdoor
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Take the kids hiking camping at least twice this year</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Overnight hike with each of my children individually this year</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Get SASS Lever gun (Stretch Goal)</li>
</ul>
</li>
<li>Sailing
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />Complete ASA 103</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />Complete ASA 104</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Meet monthly Cruising Kitty Goal</li>
</ul>
</li>
<li>Blog
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />Update and Simplify my blog site</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />Automate posting of future posts</li>
<li class="task-list-item">Write smaller post monthly
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />January</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />February</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />March</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />April</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />May</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />June</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />July</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />August</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />September</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />November</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />December</li>
</ul>
</li>
</ul>
</li>
</ul>Todd HendersonAll in all 2017 was a pretty productive year. I crossed of three checkpoints off the my Bucket List this year, and I am more than halfway to completing my Black Belt in Aikido. In 2018 I want to focus on reviving my blog and outdoor activities with the children.Intro to cross platform development with C# Mono2016-07-08T00:00:00+00:002016-07-08T00:00:00+00:00http://todd-henderson.me/tutorials/csharp/intro-to-cross-platform-development-with-csharp-mono<p>Welcome to my tutorial on beginner cross platform development in C# with <a href="http://www.mono-project.com">Mono</a>. Mono is an open source implementation of the .NET Framework based on the ECMA standards for C# that works on most common platforms. As a ‘NIX developer, I am a big fan of the C family of languages. C# is a logical evolution in the C family, that has much of the power of C and C++, without all of the <code class="highlighter-rouge">malloc</code> and <code class="highlighter-rouge">calloc</code>. I have often said that C# is one of the few good thing that have come out of Microsoft.</p>
<p class="alert bias"><strong>Bias Alert!!:</strong> <br />
I am a Mono developer not a .Net developer, the difference is subtle (<em>Blasted carriage return line feed (“\r\n”) line endings</em>).</p>
<h2 id="a-little-about-c">A little about C#</h2>
<blockquote>
<p>“C is quirky, flawed, and an enormous success.”
― Dennis M. Ritchie</p>
</blockquote>
<p>C# is a strongly typed, modern, object oriented programming language developed my Microsoft in the early 2000s. It was developed as an update to the C family (C, C++, OOC) of languages. When built, C# is usually compiled to an intermediary language, such as <a href="/resources/programming-glossary/#CLI title="Common Language Infrastructure (CLI)"">Common Language Infrastructure (CLI)</a> code. There are a couple other compiling options out there, but they are not for the faint of heart (keep a lookout for future articles about that). Once compiled into the intermediary language, the application is run on a virtual machine (.NET, Mono, LLVM).</p>
<figure>
<img src="/assets/images/2016/570px-Mono_architecture.svg" />
<figcaption>Traced by User:Stannered (en:Image:Mono architecture.png)
[<a href="http://www.gnu.org/copyleft/fdl.html">GFDL</a> or <a href="http://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA-3.0</a>],
<a href="http://commons.wikimedia.org/wiki/File%3AMono_architecture.svg">via Wikimedia Commons</a>
</figcaption>
</figure>
<h3 id="compiling-c">Compiling C#</h3>
<p>Most of the time C# is compiled in a two step process. In step one, it is compiled into a common intermediary language and then Just In Time (JIT) compiled at run time by the virtual machine. This allows the compiler to run optimizations at runtime, automatic memory managment (garbage collection), dynamic types, and many other benifits. Like everything else JIT has it’s costs. Some of the cons of JITing is that it increases application start load time, lack of control of memory managment, larger application size, and incresed complexity of the virtual machines.</p>
<h3 id="how-is-that-different-then-cc-or-other-compiled-languages">How is that different then C/C++ or other compiled languages?</h3>
<p>In essence C/C++ is compiled directly to a platform (x86, Arm, …) specific executable binary. In order to run on multiple platform you must recompile the program for each platform. Compiled languages have the advantage of more or less total control of the memory allocation/deallocation, which means they CAN have better performance than virtualized languages like C#, but that leaves the entire responsibility of memory management to the developer.</p>
<p><img src="/assets/images/2016/c-c++_architecture.svg" alt="C++ Archetecture" /></p>
<h3 id="what-about-parsed-languages-like-php">What about parsed languages like PHP?</h3>
<p>Many of the parsed languages are migrating towards virtual machine (HHVM). The truly parsed languages are run through a parser, instead of a virtual machine. Parsing maps commands to pre-compiled, rather than compiling them into a lower level language (machine code, etc).</p>
<h2 id="hello-world">Hello World</h2>
<p>Let’s jump right into the mandatory “Hello World” application. For this tutorial I will am using <a href="http://xamarin.com">Xamarin Studio</a> on a Mac. The example should work on any C# compiler/IDE. Open up you IDE of choice and create a new command line application. If you are are using Xamarin Studio you should have a file called <em>Program.cs</em> that contains something like:</p>
<div class="language-csharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//Program.cs</span>
<span class="k">using</span> <span class="nn">System</span><span class="p">;</span>
<span class="k">namespace</span> <span class="nn">HelloWorld</span>
<span class="p">{</span>
<span class="k">class</span> <span class="nc">MainClass</span>
<span class="p">{</span>
<span class="k">public</span> <span class="k">static</span> <span class="k">void</span> <span class="nf">Main</span> <span class="p">(</span><span class="kt">string</span><span class="p">[]</span> <span class="n">args</span><span class="p">)</span>
<span class="p">{</span>
<span class="n">Console</span><span class="p">.</span><span class="nf">WriteLine</span> <span class="p">(</span><span class="s">"Hello World!"</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<p>At a minimum your app will need a class that can have any name with a public static method named <code class="highlighter-rouge">Main</code>. Each program can only have one public static method name <code class="highlighter-rouge">Main</code>.</p>
<h3 id="running-your-first-c-program">Running your first C# program</h3>
<p>To run the program you can use the IDE’s run command or build it, then run it from command line with <code class="highlighter-rouge">HelloWorld.exe</code> for DOS/Windows system or <code class="highlighter-rouge">mono HelloWorld.exe</code> for everything else. If you are developing for non-DOS/Windows system you can write a script such as the following to make it easier to run your program.</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">#!/bin/sh</span>
/usr/bin/mono /usr/lib/APPLICATION/myprogram.exe <span class="s2">"</span><span class="nv">$@</span><span class="s2">"</span>
</code></pre></div></div>
<p>Much like a standard C/C++ program the main method is passed an array of strings. The array contains the parameters passed to the program when run. For example, if you run the above program with <code class="highlighter-rouge">HelloWorld.exe me</code>, the value of <code class="highlighter-rouge">args[0]</code> will be “me”. To play nicer with ‘NIX OSes you could return an integer exit status like <code class="highlighter-rouge">public static int Main (string[] args)</code>. Most systems have a variety of exit codes available, but generally <code class="highlighter-rouge">0</code> for successful completion and <code class="highlighter-rouge">1</code> for error are all that is needed.</p>
<div class="language-csharp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//Program.cs</span>
<span class="k">using</span> <span class="nn">System</span><span class="p">;</span>
<span class="k">namespace</span> <span class="nn">HelloWorld</span>
<span class="p">{</span>
<span class="k">class</span> <span class="nc">MainClass</span>
<span class="p">{</span>
<span class="k">public</span> <span class="k">static</span> <span class="kt">int</span> <span class="nf">Main</span> <span class="p">(</span><span class="kt">string</span><span class="p">[]</span> <span class="n">args</span><span class="p">)</span>
<span class="p">{</span>
<span class="n">Console</span><span class="p">.</span><span class="nf">WriteLine</span> <span class="p">(</span><span class="s">"Hello World!"</span><span class="p">);</span>
<span class="k">return</span> <span class="m">0</span><span class="p">;</span> <span class="c1">//Exit status sucess</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<p>If everything went well you should have a program that prints <code class="highlighter-rouge">Hello World!</code> and exits. Thanks for sticking with me this far. Until next time, keep <a href="https://en.wikipedia.org/wiki/Hacker_culture">Hackin’</a>.</p>Todd HendersonWelcome to my tutorial on beginner cross platform development in C# with Mono. Mono is an open source implementation of the .NET Framework based on the ECMA standards for C# that works on most common platforms. As a ‘NIX developer, I am a big fan of the C family of languages. C# is a logical evolution in the C family, that has much of the power of C and C++, without all of the malloc and calloc. I have often said that C# is one of the few good thing that have come out of Microsoft.Xamarin Evolve 20142014-10-08T00:00:00+00:002014-10-08T00:00:00+00:00http://todd-henderson.me/conferences/evolve/evolve-2014<p>The idea of a truly cross platform development environment is one of my Holy Grails. I have spent most of my
adult life switching between platforms. One of my pet peeves is incomplete ports of applications. What do I mean by
that? Well, when we use apps, we have an expectation of behaviors that we are used to. Some of these expectations are platform
specific. For example on Windows systems the shortcut for copy is <code class="highlighter-rouge">ctrl-c</code>, while on Macs we use <code class="highlighter-rouge">Command-c</code>. This is a
small example but a prevalent one. In short when an app is on a platform it should look and feel like it was made for
that platform regardless of where is was coded.</p>
<p>![3d Printer](/assets/images/2014/xamarin-darwin-lounge.jpg</p>
<p>With that in mind, and previous experience with <a href="http://www.mono-project.com">Mono</a>, I traveled to the Evolve 2014
Conference hosted by <a href="http://xamarin.com">Xamarin</a>, in Atlanta, GA warily optimistic. I dared not to get my hopes
up, because I have been disappointed before (Screw you Java and your broken promises).</p>
<h2 id="initial-impressions">Initial Impressions</h2>
<p>I opted to attend the two training days before the conference to brush up on my C#(.net/mono) skills and to get a better
understanding of capabilities of Xamarin Studio. After two days training days and as the first day of the conference
closes, my initial impressions are pretty good. The Xamarin guys really know how to throw a conference. Every Xamarin
employee seams to have a passion about development. Attending this conference kind of reminds me of the all inclusive
cruises. It is like a geek vacation. I am surrounded by some of the coolest bleeding edge technologies, there is food
everywhere, and every evening there is a “Networking Event”.</p>
<p class="image-pull-right"><img src="/assets/images/2014/evolve-3d-printer.jpg" alt="3d Printer" /></p>
<p>Tonight we are having dinner and drinks at Georgia Aquarium, last night was a cocktail party at the hotel, the night
before that was dinner at a local restaurant.</p>
<h2 id="broken-promises">Broken Promises?</h2>
<p>The magic question is Xamarin another broken promise? Not yet. Have I finally found my Holy Grail? . . .Again not yet.
Xamarin is getting closer to a truly cross platform solution. By cross platform I truly mean it. It uses native libraries
to compile native functionality. Which meets my requirement of native performance and native behavior. With their forms
libraries, that are currently mobile only, you can get pretty darn close to it. But that is currently only for mobile
apps and it still has quite a few limitations. If the Xamarin people can keep the current passion for their product it
could very well meet that promise.</p>
<p>I will be posting more on my experiences with Xamarin and C# sharp in the weeks to come. Until then, keep Hacking.</p>Todd HendersonThe idea of a truly cross platform development environment is one of my Holy Grails. I have spent most of my adult life switching between platforms. One of my pet peeves is incomplete ports of applications. What do I mean by that? Well, when we use apps, we have an expectation of behaviors that we are used to. Some of these expectations are platform specific. For example on Windows systems the shortcut for copy is ctrl-c, while on Macs we use Command-c. This is a small example but a prevalent one. In short when an app is on a platform it should look and feel like it was made for that platform regardless of where is was coded.JavaScript 101 - Object and Array Iteration2014-09-08T00:00:00+00:002014-09-08T00:00:00+00:00http://todd-henderson.me/tutorials/javascript/javascript-101-object-and-array-iteration<h2 id="object-vs-arrays">Object vs. Arrays</h2>
<p>In <a href="/tutorials/javascript/javascript-101-variables/">JavaScript 101 - Variables</a> we covered the basics of arrays and objects.<br />
The thing to remember is that in JavaScript all of primitive types are also objects. An array is a type of object that has
extra functionality specific to arrays. For those of you coming from some of the stronger typed languages, keep in mind
that in JavaScript arrays are objects that contain <em>non-associative</em>(numeric keys only) data, and array keys don’t have
to be in consecutive numeric order. You can have an array with the keys like [1], [3], [7], [5].</p>
<p>Objects can contain both associative and non-associative data. Which means objects can store and receive data in both
array notation <code class="highlighter-rouge">testOBJ["key"]</code> and with object notation <code class="highlighter-rouge">testOBJ.key</code> as long as the key is non-numeric. For example:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">obj</span><span class="p">[</span><span class="s1">'key'</span><span class="p">]</span> <span class="o">=</span> <span class="s2">"Value"</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">obj</span><span class="p">[</span><span class="s1">'key'</span><span class="p">]</span> <span class="o">===</span> <span class="nx">obj</span><span class="p">.</span><span class="nx">key</span><span class="p">){</span> <span class="cm">/* true */</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">obj</span><span class="p">.</span><span class="nx">key</span><span class="p">);</span> <span class="cm">/* Works! */</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">obj</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span> <span class="o">=</span> <span class="s2">"Value"</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">obj</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span> <span class="o">===</span> <span class="nx">obj</span><span class="p">.</span><span class="mi">1</span><span class="p">){</span> <span class="cm">/* <-- SyntaxError: Unexpected number '.1' */</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">obj</span><span class="p">.</span><span class="mi">1</span><span class="p">);</span> <span class="cm">/*** Does NOT Work! ***/</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="incremental-loop">Incremental Loop</h2>
<p>If you need to loop through the values of an array that the keys are only numeric, mostly continuous (no large gaps
between numbers) and/or you need the values to be retrieve in numeric order you will need to use an incremental for loop
like the following:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Linear Array</span>
<span class="kd">var</span> <span class="nx">myArray</span> <span class="o">=</span> <span class="p">[</span><span class="s2">"aa"</span><span class="p">,</span> <span class="s2">"bb"</span><span class="p">];</span>
<span class="c1">//for loop</span>
<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"><</span> <span class="nx">myArray</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">myArray</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>
<span class="p">}</span>
<span class="cm">/* Console:
> aa
> bb
*/</span>
</code></pre></div></div>
<h2 id="objects-or-sparsely-populated-array">Objects or Sparsely Populated Array</h2>
<p>When you need to iterate over the values contained in an object or a sparsely populated array you will want to use a for
in loop. The for in loop iterates over <strong>ALL</strong> properties of an object or array. This includes not just the properties
that you set but also the properties that are part of the prototype. Each iteration you will need to check to see if
the current property is not part of the prototype, by using something like the <code class="highlighter-rouge">Object.hasOwnProperty()</code> method. Like:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">myObject</span> <span class="o">=</span> <span class="p">{</span><span class="na">key</span><span class="p">:</span><span class="s2">"one"</span><span class="p">,</span> <span class="na">key2</span><span class="p">:</span><span class="s2">"two"</span><span class="p">};</span>
<span class="c1">// for-in loop</span>
<span class="k">for</span> <span class="p">(</span><span class="nx">i</span> <span class="k">in</span> <span class="nx">myObject</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span><span class="p">(</span><span class="nx">myObject</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="nx">i</span><span class="p">)){</span>
<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="p">)</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="cm">/* Console:
> one
> two
*/</span>
</code></pre></div></div>
<p>One huge caveat to be aware of when iterating over arrays with for in loop is if the Object prototype has been
extended. Those properties will still be iterated over even using the <code class="highlighter-rouge">.hasOwnProperty()</code> check like in the previous
example. For example:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Enumeration</span>
<span class="nb">Object</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">newProperty</span> <span class="o">=</span> <span class="s2">"string"</span><span class="p">;</span>
<span class="c1">// Object literal</span>
<span class="kd">var</span> <span class="nx">myObject</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">field</span> <span class="p">:</span> <span class="s2">"myfield"</span><span class="p">,</span>
<span class="na">mymethod</span> <span class="p">:</span> <span class="kd">function</span><span class="p">(){</span>
<span class="k">return</span> <span class="s2">"hello"</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// for-in loop</span>
<span class="k">for</span> <span class="p">(</span><span class="nx">i</span> <span class="k">in</span> <span class="nx">myObject</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span><span class="p">(</span><span class="nx">myObject</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="nx">i</span><span class="p">)){</span>
<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="p">)</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="cm">/* Console:
> field
> mymethod
*/</span>
</code></pre></div></div>
<p>Some other issues that you need to be aware of is that there is some order inconsistency with properties of arrays and
objects when iterating over them with loops like the for in. Some engines order them alpha numerically, some order them
by order of input.</p>
<h2 id="ecmascript5">ECMAScript5</h2>
<p>The good news is there is a light at the end of the tunnel. The ECMAScript5 standards fixes much of this madness.
It adds the <code class="highlighter-rouge">Object.forEach()</code> method to objects for iterating over object contents. Some considerations are that the
<code class="highlighter-rouge">forEach()</code> loop is considerably slower than a for in loop, it is not available in IE older than 9, and even in some of
the newer IEs the implementation is inconsistent (Damn you IE).</p>
<p>So we just need to wait for IE8 to finally Die then much of this madness can end. Until next time Keep Hacking.</p>Todd HendersonObject vs. ArraysWebsite Upgrades2014-09-02T00:00:00+00:002014-09-02T00:00:00+00:00http://todd-henderson.me/website-upgrade<p>Over the weekend I made several upgrades to the website to help the performance of the podcast.<br />
Unfortunately, that meant the podcast went down for several hours last friday. One of the updates
I made was to change the servers hosting the podcast, because they were just not up to the chalenges of
streaming video. We live and we learn. With that change I had to also change the way the podcast is
generated on our site. I use <a href="http://jekyllrb.com">jekyll</a> as my blog platform and had to write a
custom solution to integrate the podcast with it.</p>
<p>If you are interested, I most likely will be writing a article on integrating my podcast. Keep an eye out
for it.</p>Todd HendersonOver the weekend I made several upgrades to the website to help the performance of the podcast. Unfortunately, that meant the podcast went down for several hours last friday. One of the updates I made was to change the servers hosting the podcast, because they were just not up to the chalenges of streaming video. We live and we learn. With that change I had to also change the way the podcast is generated on our site. I use jekyll as my blog platform and had to write a custom solution to integrate the podcast with it.Building a JavaScript Library Part 2: Element IDs2014-08-28T00:00:00+00:002014-08-28T00:00:00+00:00http://todd-henderson.me/tutorials/javascript/building-a-javascript-library-part-2<p>In <a href="/tutorials/javascript/building-a-javascript-library-part-1/">Part 1: DOM Selecting</a> of the
series we set our overall requirements and goals. With our goals of minimalism and performance
in mind we need to set the requirements for the this phase:</p>
<ul>
<li>Make some <a href="/resources/programming-glossary/#crud" title="Create, Remove, Update, Delete">C.R.U.D.</a> for element Id</li>
</ul>
<blockquote>
<p>“Before software can be reusable it first has to be usable.”</p>
<ul>
<li>Ralph Johnson (computer scientist)</li>
</ul>
</blockquote>
<p class="warning"><strong style="display: block">Notice:</strong>
The intended purpose of the library is as a teaching tool, it is not intended to be used in a production
environmental this time (or maybe ever). You’ve been warned!!</p>
<h2 id="element-id-crud">Element id C.R.U.D.</h2>
<p>An elements id is stored at the <code class="highlighter-rouge">id</code> property of an element. Since properties can be directly set and
changed we don’t need to add any convenience functions for them. We would just use the vanilla
javascript property like this:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">$elements</span> <span class="o">=</span> <span class="nx">select</span><span class="p">(</span><span class="s2">"body"</span><span class="p">);</span> <span class="c1">//See the select function we wrote last time.</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"elements[0].id"</span><span class="p">);</span> <span class="c1">// Writes "";</span>
<span class="nx">$element</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">id</span> <span class="o">=</span> <span class="s2">"foo"</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"elements[0.id"</span><span class="p">);</span> <span class="c1">// Writes "Foo";</span>
<span class="nx">$element</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">id</span> <span class="o">=</span> <span class="s2">"bar"</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"elements[0.id"</span><span class="p">);</span> <span class="c1">// Writes "bar";</span>
</code></pre></div></div>
<h2 id="removing-an-id">Removing an Id</h2>
<p>Removing an id from an elements might justify a special function, if for nothing else but consistency. <br />
We could simply set the id to an empty string like <code class="highlighter-rouge">$element.id =""</code>, but the element would still
have an id attribute which could lead to come confusion later on. So lets write a function that
removes the id attribute from all elements passed to it.</p>
<p>In the first article we decided to that we wanted to follow a design pattern that would work for
both synchronous and asynchronous programming. All of our methods going to following a similar
pattern: functionName(targetElements, all other parameters… , callback).</p>
<p>We’ll need to start the function off with a fast way to check if the <code class="highlighter-rouge">callback</code> was passed.<br />
After doing a bit of benchmarking <a href="http://jsperf.com/checking-a-callback">http://jsperf.com/checking-a-callback</a>
I found that using an empty anomous function as a fallback is the fastest way to use the
callback only if defined. So our base function should look like:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">removeId</span><span class="p">(</span><span class="nx">elements</span><span class="p">,</span> <span class="nx">callback</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">_callback</span> <span class="o">=</span> <span class="nx">callback</span> <span class="o">||</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">element</span><span class="p">,</span> <span class="nx">error</span><span class="p">){};</span>
<span class="p">}</span>
</code></pre></div></div>
<p>Where the <code class="highlighter-rouge">elements</code> is a html element or and array of html elements and <code class="highlighter-rouge">callback</code> is our callback
function. Since we could have either, we need to check if we have an array or a single element. <br />
The html element object does not contain a length property, while arrays and element lists do.<br />
If it is an array, then we will loop through the array and remove all of the ids.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">removeId</span><span class="p">(</span><span class="nx">elements</span><span class="p">,</span> <span class="nx">callback</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">_callback</span> <span class="o">=</span> <span class="nx">callback</span> <span class="o">||</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">element</span><span class="p">,</span> <span class="nx">error</span><span class="p">){};</span>
<span class="k">if</span> <span class="p">(</span><span class="s1">'length'</span> <span class="k">in</span> <span class="nx">elements</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">//Is an array of elements</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">elements</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="nx">key</span><span class="p">))</span> <span class="p">{</span>
<span class="cm">/****Remove element id here****/</span>
<span class="p">}</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="c1">//is a single element</span>
<span class="cm">/****Remove element id here****/</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<p>Lastly, we need to actually remove the elements’ ids. As I said above we could just set the id to an
empty string and that would work for most cases, but I prefer to remove the attribute completely
with the <code class="highlighter-rouge">element.removeAttribute('id')</code> method. There is very little performance difference and
it is a little safer for attribute checking. Then we need to call our callback function after the
removal[s]. Our final function would look like:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">removeId</span><span class="p">(</span><span class="nx">elements</span><span class="p">,</span> <span class="nx">callback</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">_callback</span> <span class="o">=</span> <span class="nx">callback</span> <span class="o">||</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">element</span><span class="p">,</span> <span class="nx">error</span><span class="p">){};</span>
<span class="k">if</span> <span class="p">(</span><span class="s1">'length'</span> <span class="k">in</span> <span class="nx">elements</span><span class="p">)</span> <span class="p">{</span>
<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">elements</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">elements</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="nx">key</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">elements</span><span class="p">[</span><span class="nx">key</span><span class="p">].</span><span class="nx">removeAttribute</span><span class="p">(</span><span class="s1">'id'</span><span class="p">);</span>
<span class="nx">_callback</span><span class="p">(</span><span class="nx">elements</span><span class="p">[</span><span class="nx">key</span><span class="p">]);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">elements</span><span class="p">.</span><span class="nx">removeAttribute</span><span class="p">(</span><span class="s1">'id'</span><span class="p">);</span>
<span class="nx">_callback</span><span class="p">(</span><span class="nx">elements</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<p>Dealing with element ids in javascript are pretty easy. Setting and changing and element’s id is as
simple as setting a property, and we have created an easy method for removing an id. The thing to
remember is that there should only be one element in a page per id. Though CSS can handle multiple
elments with the same id, JavaScript doesn’t handle it consistantly between browsers.</p>
<p>In the next article in the series we will cover manipulating element classes. Until then keep hacking.</p>Todd HendersonIn Part 1: DOM Selecting of the series we set our overall requirements and goals. With our goals of minimalism and performance in mind we need to set the requirements for the this phase:Building a JavaScript Library Part 1: DOM Selecting2014-07-31T00:00:00+00:002014-07-31T00:00:00+00:00http://todd-henderson.me/tutorials/javascript/building-a-javascript-library-part-1<p>In this series we will be building a basic JavaScript library for the most common tasks that we do. So, like any good project should, let’s start with our library’s requirements:</p>
<ul>
<li>IE8+ Compatible</li>
<li>Work in browsers and in nodeJs.</li>
<li>Synchronous and asynchronous design pattern.</li>
<li>Limited pollution of Global scope</li>
<li>no global & or _ object that will conflict with popular libraries</li>
</ul>
<p>and our Goals:</p>
<ul>
<li>Faster than jQuery on similar tasks.</li>
<li>Smaller than jQuery</li>
<li>Modular</li>
<li>Not to suck too bad.</li>
</ul>
<blockquote>
<p>“Without requirements or design, programming is the art of adding bugs to an empty text file.”</p>
<ul>
<li>Louis Srygley</li>
</ul>
</blockquote>
<p class="warning"><strong style="display: block">Notice:</strong>
The intended purpose of the library is as a teaching tool, it is not intended to be used in a production environmental this time (or maybe ever). You’ve been warned!!</p>
<h2 id="document-object-model-dom">Document Object Model (DOM)</h2>
<p>By far the most common task that JavaScript developers perform is manipulation HTML/XML elements. In JavaScript HTML/XML elements are controlled by the Document Object Model (DOM). The DOM object is stored as the <code class="highlighter-rouge">document</code> object in global scope (window) when running JavaScript in a browser. It can be called via <code class="highlighter-rouge">document</code> or <code class="highlighter-rouge">window.document</code>. The DOM stores all of the HTML/XML elements in a given scope (<code class="highlighter-rouge">window</code>) and the properties to manipulate those elements.
<br /><br /></p>
<p><img src="/assets/images/2014/DOM-Tree.png" alt="DOM Tree Diagram" /></p>
<p class="notice"><strong style="display: block">Note:</strong>
Command line JavaScript tools like NodeJS do not have a <code class="highlighter-rouge">document</code> object instantiated by default.</p>
<p><br /><br />
Before we can start doing fun stuff with DOM elements you must first be able to target them. You could traverse the <code class="highlighter-rouge">document</code> object like <code class="highlighter-rouge">document.body.children</code> which returns a list of direct children that can then be traversed similarly, but that can get tedious and costly rather quickly. Fortunately JavaScript provides us with some excellent tools for finding things in the dom. The five most useful are: <code class="highlighter-rouge">getElementById()</code>, <code class="highlighter-rouge">getElementsByClassName()</code>, <code class="highlighter-rouge">getElementsByTagName()</code>, <code class="highlighter-rouge">getElementsByName()</code>, and <code class="highlighter-rouge">querySelector()</code> / <code class="highlighter-rouge">querySelectorAll()</code>. These methods can be used on any DOM element, i.e. <code class="highlighter-rouge">document</code> any of it’s children.</p>
<p><strong>Use the following code for all quering examples.</strong></p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><title></span>Selecting DOM Elements<span class="nt"></title></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><p</span> <span class="na">id=</span><span class="s">"para1"</span><span class="nt">></span>Some text here<span class="nt"></p></span>
<span class="nt"><p</span> <span class="na">id=</span><span class="s">"para2"</span><span class="nt">></span>
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"unorderdList"</span> <span class="nt">></span>
<span class="nt"><li></li></span>
<span class="nt"><li></li></span>
<span class="nt"><li></li></span>
<span class="nt"></ul></span>
<span class="nt"></p></span>
<span class="nt"><button</span><span class="err">"</span> <span class="na">name=</span><span class="s">"red"</span><span class="nt">></span>red<span class="nt"></button></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<h3 id="getelementbyid">.getElementById()</h3>
<p>[element].getElementById() returns a single element that matched the given id or null if none can be found. Two thing that you will need to take note of: If you are used to jQuery or other such libraries you will notice there is no # sign in front of the id name. That’s right css selectors don’t work here it needs to match the element attribute exactly. On that note, the second thing to remember: it IS case sensitive.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">element</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'para1'</span><span class="p">);</span>
</code></pre></div></div>
<h3 id="getelementsbyclassname">.getElementsByClassName()</h3>
<p>[element].getElementsByClassName() returns a HTMLCollection of HTMLElements that matched the given class(es) name or null if none can be found. Again case sensitive, no . at the beginning of the class(es) and you can list multiple classes separated by spaces.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">element</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">'unorderdList'</span><span class="p">);</span>
</code></pre></div></div>
<h3 id="getelementsbytagname">.getElementsByTagName()</h3>
<p>[element].getElementsByTagName() returns a Live HTMLCollection of HTMLElements that matched the given element’s name (eg: p for <p> tag) or null if none can be found. Not case sensitive and the list is a live list, which means it updates to match changes in the DOM automatically.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">element</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">'li'</span><span class="p">);</span>
</code></pre></div></div>
<p class="notice"><strong style="display: block">Note:</strong>
There is some browser inconsistency with the return type of document.getElementsByTagName(). Some version of WebKit browsers returns a NodeList object instead of a HTMLCollection object.</p>
<h3 id="getelementsbyname">.getElementsByName()</h3>
<p>[element].getElementsByName() returns a NodeList of HTMLElements that matched the given element’s name attribute. If no matches can be found null is returned This one is case sensitive.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">element</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByName</span><span class="p">(</span><span class="s1">'red'</span><span class="p">)</span>
</code></pre></div></div>
<p class="notice"><strong style="display: block">Note:</strong>
There is some browser inconsistency with [element].getElementsByName(). Some browsers include matching id attributes, while other do not. Also some browsers ignore elements that have a name attribute that are not supported.</p>
<h3 id="queryselector--queryselectorall">.querySelector() / .querySelectorAll()</h3>
<p>If you are familiar with jQuery you will recognize the syntax. The heart of jQuery’s Sizzle selector engine is built around [element].querySelectorAll(). [element].querySelectorAll() returns a non-live NodeList of HTMLElements that match the CSS selector that were passed.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">element</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s1">'#para2 li'</span><span class="p">);</span>
</code></pre></div></div>
<p class="notice"><strong style="display: block">Note:</strong>
It will only work with valid CSS 2+ selectors, jQuery uses some CSS selectors that are non standard (eg, :first) that will not work with .querySelectorAll().</p>
<h3 id="performance">Performance</h3>
<p>To test the performance of the methods above: I prepared a jsperf.com benchmark:
<a href="http://jsperf.com/querying-dom-elements/2">http://jsperf.com/querying-dom-elements/2</a></p>
<p>As you can see, selecting a single element is faster than selecting a bunch of elements, which makes sense. You should also note that .querySelector() / .querySelectorAll() is significantly slower that all of the others.</p>
<h2 id="select">select()</h2>
<p>Now that we have covered the basics of selecting an element, we need to write our first function for our library. Since most of us are familiar with using CSS selectors for targeting elements, we will build our select() function around that premise. Again lets define our requirements/design:</p>
<ul>
<li>a selector parameter</li>
<li>an option to change the scope</li>
<li>return a normalized list of elements</li>
</ul>
<p>or</p>
<ul>
<li>pass results as a parameter on the callback function</li>
</ul>
<h3 id="queryselectorall-only">querySelectorAll() only</h3>
<p>Now that we have our specs lets write the function:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">select</span><span class="p">(</span><span class="nx">selector</span><span class="p">,</span> <span class="nx">scope</span><span class="p">,</span> <span class="nx">callback</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">_scope</span> <span class="o">=</span> <span class="nx">scope</span> <span class="o">||</span> <span class="nb">document</span><span class="p">,</span>
<span class="nx">_results</span> <span class="o">=</span> <span class="nx">_scope</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="nx">selector</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">callback</span> <span class="o">===</span> <span class="s1">'function'</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">callback</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="nx">_results</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">_results</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<p>That is pretty simple, it works on all the browsers on my box. In our example we have created a function that accepts three parameters: the CSS <code class="highlighter-rouge">selector</code> parameter, the optional HTMLElement <code class="highlighter-rouge">scope</code> parameter, and the optional <code class="highlighter-rouge">callback</code> function. Inside the function a variable <code class="highlighter-rouge">_scope</code> is created and set to the value of <code class="highlighter-rouge">scope</code> or <code class="highlighter-rouge">document</code> if <code class="highlighter-rouge">scope</code> is not set. The second variable that is created is <code class="highlighter-rouge">_results</code> and is set to the results of the scoped querySelectorAll() with the give <code class="highlighter-rouge">selector</code>. Finally we check to see if a <code class="highlighter-rouge">callback</code> function was passed if so call the callback with the results or if not return the results.</p>
<h4 id="performance-1">Performance</h4>
<p>Let’s test it and see how we did. I have setup another jsperf.com benchmark test for us:</p>
<p><a href="http://jsperf.com/queryselectorall-vs-select">http://jsperf.com/queryselectorall-vs-select</a></p>
<p>Not so hot. We roughly double the amount of time it takes to run a querySelectorAll() call with no real benefit. We are beating jQuery on the #Test but that it. I think we can do better.</p>
<h3 id="queryselectorall--getelementsbyclassname--getelementbyid">querySelectorAll() + getElementsByClassName() + getElementById()</h3>
<p>If you remember some of the other methods were a lot faster than querySelectorAll(). Lets use them to see if we can boost performance. For now we are going to focus on the performance of selecting by class and by id as they are the most common way to select elements.</p>
<h4 id="check-for-id-and-use-getelementbyid">Check for ID and use getElementById()</h4>
<p>We’re going to begin by using getElementById() to select elements when we are given only an id. To do that we need to check if the string <code class="highlighter-rouge">selector</code> starts with a # sign, doesn’t contains spaces or periods (.). For that we use one of the string functions <code class="highlighter-rouge">.indexOf()</code> that checks for the first occurrence of a string inside another string and returns the array index of the occurrence or -1 of not found.</p>
<p>If you remember <code class="highlighter-rouge">getElementById()</code> doesn’t like the # sign. We need to remove it before we can us it. There are a number of ways to do that, but I like the <code class="highlighter-rouge">.slice()</code> method for strings. slice(<em>x</em>) removes the first <em>x</em> number of characters from a string. It can also be used to take a chuck out of the middle of a string by adding a second parameter like:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">selector</span> <span class="o">=</span> <span class="s1">'#selector_D'</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">sliced</span> <span class="o">=</span> <span class="nx">selector</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="c1">// sliced = 'selector_D'</span>
<span class="kd">var</span> <span class="nx">sliced2</span> <span class="o">=</span> <span class="nx">selector</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">9</span><span class="p">)</span> <span class="c1">// sliced2 = 'selector'</span>
<span class="c1">//negative values remove remove from the end</span>
<span class="kd">var</span> <span class="nx">sliced3</span> <span class="o">=</span> <span class="nx">selector</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="o">-</span><span class="mi">2</span><span class="p">)</span> <span class="c1">// sliced3 = '#selector'</span>
<span class="kd">var</span> <span class="nx">sliced4</span> <span class="o">=</span> <span class="nx">selector</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="o">-</span><span class="mi">2</span><span class="p">)</span> <span class="c1">// sliced4 = 'selector'</span>
</code></pre></div></div>
<p>Now our function should look something like:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">select</span><span class="p">(</span><span class="nx">selector</span><span class="p">,</span> <span class="nx">scope</span><span class="p">,</span> <span class="nx">callback</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">_scope</span> <span class="o">=</span> <span class="nx">scope</span> <span class="o">||</span> <span class="nb">document</span><span class="p">,</span>
<span class="nx">_results</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">selector</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s2">"#"</span><span class="p">)</span> <span class="o">===</span> <span class="mi">0</span> <span class="o">&&</span> <span class="nx">selector</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s2">" "</span><span class="p">)</span> <span class="o">===</span> <span class="o">-</span><span class="mi">1</span> <span class="o">&&</span> <span class="nx">selector</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s2">"."</span><span class="p">)</span> <span class="o">===</span> <span class="o">-</span><span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">_results</span> <span class="o">=</span><span class="nx">_scope</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="nx">selector</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">1</span><span class="p">));</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">_results</span> <span class="o">=</span> <span class="nx">_scope</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="nx">selector</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">callback</span> <span class="o">===</span> <span class="s1">'function'</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">callback</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="nx">_results</span><span class="p">):</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">_results</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<h4 id="check-for-classes-and-use-getelementsbyclassname">Check for Class(es) and use getElementsByClassName()</h4>
<p>Checking for class names is a little more difficult, but not much because, we just need to check for a . at the beginning, that it doesn’t contain a # sign or a colon. This time we are replacing the . with a space because <code class="highlighter-rouge">getElementsByClassName()</code> can accept multiple classes separated by space. To do that we are using the <code class="highlighter-rouge">string.replace(/./g, " ")</code> method and a regular expression that looks for a . globally.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">select</span><span class="p">(</span><span class="nx">selector</span><span class="p">,</span> <span class="nx">scope</span><span class="p">,</span> <span class="nx">callback</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">_scope</span> <span class="o">=</span> <span class="nx">scope</span> <span class="o">||</span> <span class="nb">document</span><span class="p">,</span>
<span class="nx">_results</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">selector</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s2">"#"</span><span class="p">)</span> <span class="o">===</span> <span class="mi">0</span> <span class="o">&&</span> <span class="nx">selector</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s2">" "</span><span class="p">)</span> <span class="o">===</span> <span class="o">-</span><span class="mi">1</span> <span class="o">&&</span> <span class="nx">selector</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s2">"."</span><span class="p">)</span> <span class="o">===</span> <span class="o">-</span><span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">_results</span> <span class="o">=</span><span class="nx">_scope</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="nx">selector</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">1</span><span class="p">));</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">selector</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s2">"."</span><span class="p">)</span> <span class="o">===</span> <span class="mi">0</span> <span class="o">&&</span> <span class="nx">selector</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s2">"#"</span><span class="p">)</span> <span class="o">===</span> <span class="o">-</span><span class="mi">1</span> <span class="o">&&</span> <span class="nx">selector</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s2">":"</span><span class="p">)</span> <span class="o">===</span> <span class="o">-</span><span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">_results</span> <span class="o">=</span><span class="nx">_scope</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="nx">selector</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/./g</span><span class="p">,</span> <span class="s2">" "</span><span class="p">));</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">_results</span> <span class="o">=</span> <span class="nx">_scope</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="nx">selector</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">callback</span> <span class="o">===</span> <span class="s1">'function'</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">callback</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="nx">_results</span><span class="p">):</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">_results</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<h4 id="results-normalization">Results Normalization</h4>
<p>We’re getting closer, but we still have a problem with different return types. <code class="highlighter-rouge">getElementById()</code> returns a single HTMLElement, <code class="highlighter-rouge">getElementsByClassName()</code> returns a HTMLCollection, and <code class="highlighter-rouge">querySelectorAll()</code> returns a NodeList. We need to normalize or return results so it is the same regardless where it comes from. By far the easiest thing to standardize to is an array. It is really easy with <code class="highlighter-rouge">getElementById()</code>, all we have to do is wrap it in array notation (ie. surround it with square braces [] ) like so <code class="highlighter-rouge">_results = [_scope.getElementById(selector.slice(1))]; </code>. For the other two we need to do a little more fancy solution: <code class="highlighter-rouge">[].slice.call(object)</code>. <code class="highlighter-rouge">[].slice.call(object)</code> converts an object to an array. How it does that is a bit out of the scope of this article. If you are interested there are plenty of articles about it that are googleable.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">select</span><span class="p">(</span><span class="nx">selector</span><span class="p">,</span> <span class="nx">scope</span><span class="p">,</span> <span class="nx">callback</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">_scope</span> <span class="o">=</span> <span class="nx">scope</span> <span class="o">||</span> <span class="nb">document</span><span class="p">,</span>
<span class="nx">_results</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">selector</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s2">"#"</span><span class="p">)</span> <span class="o">===</span> <span class="mi">0</span> <span class="o">&&</span> <span class="nx">selector</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s2">" "</span><span class="p">)</span> <span class="o">===</span> <span class="o">-</span><span class="mi">1</span> <span class="o">&&</span> <span class="nx">selector</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s2">"."</span><span class="p">)</span> <span class="o">===</span> <span class="o">-</span><span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">_results</span> <span class="o">=</span> <span class="p">[</span><span class="nx">_scope</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="nx">selector</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">1</span><span class="p">))];</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">selector</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s2">"."</span><span class="p">)</span> <span class="o">===</span> <span class="mi">0</span> <span class="o">&&</span> <span class="nx">selector</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s2">"#"</span><span class="p">)</span> <span class="o">===</span> <span class="o">-</span><span class="mi">1</span> <span class="o">&&</span> <span class="nx">selector</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s2">":"</span><span class="p">)</span> <span class="o">===</span> <span class="o">-</span><span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">_results</span> <span class="o">=</span> <span class="p">[].</span><span class="nx">slice</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">_scope</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="nx">selector</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/./g</span><span class="p">,</span> <span class="s2">" "</span><span class="p">)));</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">_results</span> <span class="o">=</span> <span class="p">[].</span><span class="nx">slice</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">_scope</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="nx">selector</span><span class="p">));</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">callback</span> <span class="o">===</span> <span class="s1">'function'</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">callback</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="nx">_results</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">_results</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<h4 id="final-function">Final Function</h4>
<p>As a final measure for backwards compatibility I added a check for single alphabet character words to run through <code class="highlighter-rouge">getElementsByTagName()</code> before defaulting to <code class="highlighter-rouge">querySelectorAll()</code>. My tests show that the regular expression eats up any performance gain by using <code class="highlighter-rouge">getElementsByTagName()</code> to get tags, but it really doesn’t cost me anything but a few extra bites of storage.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">select</span><span class="p">(</span><span class="nx">selector</span><span class="p">,</span> <span class="nx">scope</span><span class="p">,</span> <span class="nx">callback</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">_scope</span> <span class="o">=</span> <span class="nx">scope</span> <span class="o">||</span> <span class="nb">document</span><span class="p">,</span>
<span class="nx">_results</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">selector</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s2">"#"</span><span class="p">)</span> <span class="o">===</span> <span class="mi">0</span> <span class="o">&&</span> <span class="nx">selector</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s2">" "</span><span class="p">)</span> <span class="o">===</span> <span class="o">-</span><span class="mi">1</span> <span class="o">&&</span> <span class="nx">selector</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s2">"."</span><span class="p">)</span> <span class="o">===</span> <span class="o">-</span><span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">_results</span> <span class="o">=</span> <span class="p">[</span><span class="nx">_scope</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="nx">selector</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">1</span><span class="p">))];</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">selector</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s2">"."</span><span class="p">)</span> <span class="o">===</span> <span class="mi">0</span> <span class="o">&&</span> <span class="nx">selector</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s2">"#"</span><span class="p">)</span> <span class="o">===</span> <span class="o">-</span><span class="mi">1</span> <span class="o">&&</span> <span class="nx">selector</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s2">":"</span><span class="p">)</span> <span class="o">===</span> <span class="o">-</span><span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">_results</span> <span class="o">=</span> <span class="p">[].</span><span class="nx">slice</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">_scope</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="nx">selector</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/./g</span><span class="p">,</span> <span class="s2">" "</span><span class="p">)));</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span> <span class="sr">/^</span><span class="se">[</span><span class="sr">a-zA-Z</span><span class="se">]</span><span class="sr">+$/</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">selector</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">_results</span> <span class="o">=</span> <span class="p">[].</span><span class="nx">slice</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">_scope</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="nx">selector</span><span class="p">));</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">_results</span> <span class="o">=</span> <span class="p">[].</span><span class="nx">slice</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">_scope</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="nx">selector</span><span class="p">));</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">callback</span> <span class="o">===</span> <span class="s1">'function'</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">callback</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="nx">_results</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">_results</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<h4 id="performance-2">Performance</h4>
<p>So how did we do? Well according to the <a href="http://jsperf.com/queryselectorall-vs-jquery-vs-select/2">http://jsperf.com/queryselectorall-vs-jquery-vs-select/2</a> benchmark test we average better than <code class="highlighter-rouge">querySelectorAll()</code> , and we beat jQuery in every test. Are we as robust as the jQuery’s Sizzle engine. Oh heck no. But that wasn’t the point of todays exercise. We are after Knowledge and Power!!</p>
<p>Until next time, Hack On!!</p>Todd HendersonIn this series we will be building a basic JavaScript library for the most common tasks that we do. So, like any good project should, let’s start with our library’s requirements:JavaScript 101 - Loops2014-07-21T00:00:00+00:002014-07-21T00:00:00+00:00http://todd-henderson.me/tutorials/javascript/javascript-101-loops<p>Repetitive tasks suck! Loops help us automate repetitive tasks by performing some specified
action until an exit condition is met. Loops come in two different flavors, entry loops and
exit loops.</p>
<h2 id="entry-loops">Entry Loops</h2>
<p>Entry loops check for the exit conditions before it does the action.</p>
<style>
.entryLoop {
}
.js-block {
color: #343434;
font-family: Monaco, 'Courier New', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
font-size: 12px;
background-color: #dadada;
padding: 10px;
}
.run {
cursor:pointer;
-moz-box-shadow:inset 0px 1px 0px 0px #dcecfb;
-webkit-box-shadow:inset 0px 1px 0px 0px #dcecfb;
box-shadow:inset 0px 1px 0px 0px #dcecfb;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bddbfa), color-stop(1, #80b5ea) );
background:-moz-linear-gradient( center top, #bddbfa 5%, #80b5ea 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bddbfa', endColorstr='#80b5ea');
background-color:#bddbfa;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
border:1px solid #84bbf3;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:40px;
line-height:40px;
width:100px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #528ecc;
}
.run:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #80b5ea), color-stop(1, #bddbfa) );
background:-moz-linear-gradient( center top, #80b5ea 5%, #bddbfa 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80b5ea', endColorstr='#bddbfa');
background-color:#80b5ea;
}
.run:active {
top:1px;
}
.resetButton {
cursor:pointer;
-moz-box-shadow:inset 0px 1px 0px 0px #dcecfb;
-webkit-box-shadow:inset 0px 1px 0px 0px #dcecfb;
box-shadow:inset 0px 1px 0px 0px #dcecfb;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bddbfa), color-stop(1, #80b5ea) );
background:-moz-linear-gradient( center top, #bddbfa 5%, #80b5ea 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bddbfa', endColorstr='#80b5ea');
background-color:#bddbfa;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
border:1px solid #84bbf3;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:40px;
line-height:40px;
width:100px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #528ecc;
}
.resetButton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #80b5ea), color-stop(1, #bddbfa) );
background:-moz-linear-gradient( center top, #80b5ea 5%, #bddbfa 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80b5ea', endColorstr='#bddbfa');
background-color:#80b5ea;
}
.resetButton:active {
top:1px;
}
.html {
}
ul.loopTarget{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
li.loopTarget{
display: inline-block;
margin-bottom: 5px;
list-style:none;
height: 50px;
width: 50px;
border-style:solid;
border-width:1px;
border-color: black;
background-color: red;
}
</style>
<div class="entryLoop">
<div class="js-block">
<strong>JavaScript:</strong>
<code class="javascript">
<div class="while">
<br /> var i = 0;
<br />var elementList = document.querySelectorAll('.loopResults li');
<br />
<br /><span id="while">while( <span class="i">i</span> <= 3 ) { </span>
<br />  <span id="doStuff">elementList[<span class="i">i</span>].style.backgroundColor = "green";</span>
<br />  <span id="ipp">i++;</span>
<br />}
<br />
<br />
</div>
<div class="run">Run</div> <div class="resetButton">Reset</div>
<br /><br />
<strong>Results:</strong>
<div class="loopResult">
<ul class="loopTarget">
<li class="loopTarget"> </li>
<li class="loopTarget"> </li>
<li class="loopTarget"> </li>
<li class="loopTarget"> </li>
</ul>
</div>
</code>
</div>
</div>
<script>window.jQuery || document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"><\/script>')</script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script>
//$('.js-block code').each(function(i, e) {hljs.highlightBlock(e, null, true)});
$loopTarget = $("li.loopTarget");
$i = $("span.i ");
$ipp = $("span#ipp");
$while = $("span#while");
$doStuff = $("span#doStuff");
$(".js-block .resetButton").on("click", function(){
console.log("click:resetButton");
$i.text('i');
$loopTarget.css({"background-color": "red"});
$while.css({"background-color": ""});
});
$(".js-block .run").on("click", function(){
var timeout = 1200;
var totalTime;
$loopTarget.each(function(i, $this) {
setTimeout(function(){
$while.css({"background-color": "yellow"});
setTimeout(function(){
$while.css({"background-color": 'green'});
}, timeout * i + 200);
setTimeout(function(){
$($this).css({"background-color": "green"});
$doStuff.css({"background-color": "yellow"});
}, timeout * i + 400);
setTimeout(function(){
$doStuff.css({"background-color": ""});
}, timeout * i + 600);
setTimeout(function(){
$i.text('i (' + (i + 1 ) + ')');
$ipp.css({"background-color": "yellow"});
}, timeout * i + 800);
setTimeout(function(){
$ipp.css({"background-color": ""});
}, timeout * i + 1000);
if( i+1 >= 4) {
totalTime = timeout * i + 1000;
setTimeout(function(){
$while.css({"background-color": 'yellow'});
}, totalTime + 200);
setTimeout(function(){
$while.css({"background-color": 'red'});
}, totalTime + 400);
}
}, timeout * i);
});
});
</script>
<h3 id="while">While()</h3>
<p>The <code class="highlighter-rouge">while()</code> loop is the basic entry loop. In the most simple terms it means: While the statement in the ()
evaluates to <code class="highlighter-rouge">truey</code> it does whatever code is in the {}.</p>
<p><strong>Example:</strong></p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><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="k">while</span> <span class="p">(</span><span class="nx">i</span> <span class="o"><=</span> <span class="mi">16</span><span class="p">)</span> <span class="p">{</span> <span class="c1">//Is the value of i greater than or equal to 16;</span>
<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="p">);</span>
<span class="nx">i</span><span class="o">++</span><span class="p">;</span> <span class="c1">// Add one to i;</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="for">For()</h3>
<p>The <code class="highlighter-rouge">for()</code> loop is a specialized entry loop used when you know how many times you want to loop through it.
It includes a built in loop counter and var incrementation. The syntax is:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">for</span> <span class="p">(</span> <span class="nx">counter</span> <span class="nx">variables</span> <span class="p">;</span> <span class="nx">Condition</span> <span class="nx">to</span> <span class="nx">evaluate</span> <span class="p">;</span> <span class="k">do</span> <span class="nx">math</span> <span class="nx">to</span> <span class="nx">counter</span><span class="p">){</span>
<span class="c1">//Do Stuff here</span>
<span class="p">}</span>
</code></pre></div></div>
<p><strong>Example:</strong></p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><=</span> <span class="mi">16</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span> <span class="p">)</span> <span class="p">{</span>
<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="p">);</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="exit-loops">Exit Loops</h2>
<p>Exit loops check the conditional statement after it runs the code. This means that exit loops are always run at least once.</p>
<h3 id="do---while">do{ … } while()</h3>
<p>The do..while() loop</p>
<p><strong>Example:</strong></p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><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="k">do</span> <span class="p">{</span>
<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="p">);</span>
<span class="nx">i</span><span class="o">++</span><span class="p">;</span> <span class="c1">// Add one to i;</span>
<span class="p">}</span> <span class="k">while</span> <span class="p">(</span><span class="nx">i</span> <span class="o"><=</span> <span class="mi">16</span><span class="p">)</span>
</code></pre></div></div>
<h2 id="special-loops">Special Loops</h2>
<p>There are some special purpose loops that are available to handle common or special cases.</p>
<h3 id="forin">for(in)</h3>
<p><strong>Example:</strong></p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span><span class="na">key1</span><span class="p">:</span><span class="mi">1</span><span class="p">,</span> <span class="na">key2</span><span class="p">:</span><span class="s2">"two"</span><span class="p">};</span>
<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">obj</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">key</span><span class="p">,</span> <span class="nx">obj</span><span class="p">[</span><span class="nx">key</span><span class="p">]);</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="bailing-out-of-a-loop">Bailing out of a Loop.</h2>
<p>Sometimes you need to exit a loop before it is met it’s exit condition. There are a several of ways to do that.</p>
<h3 id="break">Break</h3>
<p>We were introduced to the break statement with the <code class="highlighter-rouge">switch</code>. Break stops anything after the statement in the current scope {} and
jumps up one level of scope.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">for</span> <span class="p">(</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"><</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 class="k">if</span> <span class="p">(</span><span class="nx">i</span><span class="o">==</span><span class="mi">3</span><span class="p">)</span> <span class="k">break</span><span class="p">;</span>
<span class="nx">x</span><span class="o">=</span><span class="nx">x</span> <span class="o">+</span> <span class="s2">"The number is "</span> <span class="o">+</span> <span class="nx">i</span> <span class="o">+</span> <span class="s2">"<br>"</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="return">Return</h3>
<p>Returns does basically the same thing as break but also can return a specified variable.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">for</span> <span class="p">(</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"><</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 class="k">if</span> <span class="p">(</span><span class="nx">i</span><span class="o">==</span><span class="mi">3</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
<span class="nx">x</span><span class="o">=</span><span class="nx">x</span> <span class="o">+</span> <span class="s2">"The number is "</span> <span class="o">+</span> <span class="nx">i</span> <span class="o">+</span> <span class="s2">"<br>"</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<h3 id="continue">Continue</h3>
<p>Continue overrides the one iteration of a loop.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">for</span> <span class="p">(</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"><=</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 class="k">if</span> <span class="p">(</span><span class="nx">i</span><span class="o">==</span><span class="mi">3</span><span class="p">)</span> <span class="k">continue</span><span class="p">;</span>
<span class="nx">x</span><span class="o">=</span><span class="nx">x</span> <span class="o">+</span> <span class="s2">"The number is "</span> <span class="o">+</span> <span class="nx">i</span> <span class="o">+</span> <span class="s2">"<br>"</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>Todd HendersonRepetitive tasks suck! Loops help us automate repetitive tasks by performing some specified action until an exit condition is met. Loops come in two different flavors, entry loops and exit loops.