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

  <title><![CDATA[Julia's Blog]]></title>
  <link href="http://iamjulia.github.io/atom.xml" rel="self"/>
  <link href="http://iamjulia.github.io/"/>
  <updated>2014-12-15T00:23:32-05:00</updated>
  <id>http://iamjulia.github.io/</id>
  <author>
    <name><![CDATA[Julia Zhang]]></name>
    
  </author>
  <generator uri="http://octopress.org/">Octopress</generator>

  
  <entry>
    <title type="html"><![CDATA[Rendering a Notice in Rails]]></title>
    <link href="http://iamjulia.github.io/blog/2014/12/14/rendering-a-notice-in-rails/"/>
    <updated>2014-12-14T23:31:08-05:00</updated>
    <id>http://iamjulia.github.io/blog/2014/12/14/rendering-a-notice-in-rails</id>
    <content type="html"><![CDATA[<p>Last week we had our science fair at the Flatiron School. It was nerve wracking, but an awesome and fun experience. The week prior was grueling. Whilst spending hours with my team building our app, I noticed something interesting about notices and errors.</p>

<p>The first place I rendered a notice was in the Sessions Controller. It was plain and simple, no problem.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">def</span> <span class="nf">destroy</span>
</span><span class='line'>  <span class="n">session</span><span class="o">[</span><span class="ss">:user_id</span><span class="o">]</span> <span class="o">=</span> <span class="kp">nil</span>
</span><span class='line'>  <span class="n">redirect_to</span> <span class="n">root_path</span><span class="p">,</span> <span class="ss">:notice</span> <span class="o">=&gt;</span> <span class="s2">&quot;You&#39;ve been signed out!&quot;</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>


<p>Great! Onto the next message, an error in my Landings Controller:</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">def</span> <span class="nf">create</span>
</span><span class='line'>  <span class="vi">@user</span> <span class="o">=</span> <span class="no">User</span><span class="o">.</span><span class="n">find</span><span class="p">(</span><span class="n">params</span><span class="o">[</span><span class="ss">:user_id</span><span class="o">]</span><span class="p">)</span>
</span><span class='line'>  <span class="vi">@landing</span> <span class="o">=</span> <span class="no">Landing</span><span class="o">.</span><span class="n">new</span><span class="p">(</span><span class="n">landing_params</span><span class="p">)</span>
</span><span class='line'>  <span class="k">if</span> <span class="vi">@landing</span><span class="o">.</span><span class="n">save</span>
</span><span class='line'>    <span class="n">redirect_to</span> <span class="n">user_landing_path</span><span class="p">(</span><span class="vi">@user</span><span class="p">,</span> <span class="vi">@landing</span><span class="p">)</span>
</span><span class='line'>  <span class="k">else</span>
</span><span class='line'>    <span class="n">render</span> <span class="s2">&quot;new&quot;</span><span class="p">,</span> <span class="ss">:error</span> <span class="o">=&gt;</span> <span class="s2">&quot;Please fill in all fields!&quot;</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>


<p>But wait, this notice did not render. The render method doesn&rsquo;t take an alert/notice/error hash entry like the redirect_to method does. So, how do we make a flash appear on &ldquo;render&rdquo;?</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">def</span> <span class="nf">create</span>
</span><span class='line'>  <span class="vi">@user</span> <span class="o">=</span> <span class="no">User</span><span class="o">.</span><span class="n">find</span><span class="p">(</span><span class="n">params</span><span class="o">[</span><span class="ss">:user_id</span><span class="o">]</span><span class="p">)</span>
</span><span class='line'>  <span class="vi">@landing</span> <span class="o">=</span> <span class="no">Landing</span><span class="o">.</span><span class="n">new</span><span class="p">(</span><span class="n">landing_params</span><span class="p">)</span>
</span><span class='line'>  <span class="k">if</span> <span class="vi">@landing</span><span class="o">.</span><span class="n">save</span>
</span><span class='line'>    <span class="n">redirect_to</span> <span class="n">user_landing_path</span><span class="p">(</span><span class="vi">@user</span><span class="p">,</span> <span class="vi">@landing</span><span class="p">)</span>
</span><span class='line'>  <span class="k">else</span>
</span><span class='line'>    <span class="n">flash</span><span class="o">.</span><span class="n">now</span><span class="o">[</span><span class="ss">:error</span><span class="o">]</span> <span class="o">=</span> <span class="s2">&quot;Please fill in all fields!&quot;</span>
</span><span class='line'>    <span class="n">render</span> <span class="s2">&quot;new&quot;</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>


<p>Not too much hassel. We had to add one extra line before the render - <code>flash.now</code>. This makes the notice render on the current page.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Total DOMination]]></title>
    <link href="http://iamjulia.github.io/blog/2014/11/16/total-domination/"/>
    <updated>2014-11-16T18:24:43-05:00</updated>
    <id>http://iamjulia.github.io/blog/2014/11/16/total-domination</id>
    <content type="html"><![CDATA[<p>Last week at the Flatiron school, we took the dive into Javascript and jQuery to create more inactive and dynamic webpages. Javascript and jQuery interact with something called the DOM - the document object model. The DOM is a representation of HTML in a hierarchal tree-like structure, or an API for HTML. It allows javascript and jQuery to quickly find HTML elements. Every browser is able to generate a DOM, but how? Glad you asked…</p>

<p>The first thing we will need to construct the DOM is some HTML.</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
</pre></td><td class='code'><pre><code class='objc'><span class='line'><span class="o">&lt;!</span><span class="n">DOCTYPE</span> <span class="n">html</span><span class="o">&gt;</span>
</span><span class='line'><span class="o">&lt;</span><span class="n">html</span><span class="o">&gt;</span>
</span><span class='line'><span class="o">&lt;</span><span class="n">body</span><span class="o">&gt;</span>
</span><span class='line'>
</span><span class='line'><span class="o">&lt;</span><span class="n">h1</span><span class="o">&gt;</span><span class="n">Hello</span> <span class="n">world</span><span class="o">&lt;/</span><span class="n">h1</span><span class="o">&gt;</span>
</span><span class='line'>
</span><span class='line'><span class="o">&lt;</span><span class="n">p</span><span class="o">&gt;</span><span class="n">Blah</span> <span class="n">blah</span> <span class="n">blah</span><span class="p">.</span><span class="o">&lt;/</span><span class="n">p</span><span class="o">&gt;</span>
</span><span class='line'>
</span><span class='line'><span class="o">&lt;/</span><span class="n">body</span><span class="o">&gt;</span>
</span><span class='line'><span class="o">&lt;/</span><span class="n">html</span><span class="o">&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>Upon receiving the HTML, the browser will tokenize, or convert strings into tokens. Adhering to the W3C HTML5 Standard, it will take strings inside brackets and create tokens, for example the <code>&lt;html&gt;</code> will be converted into an html token. Tokens look like: <code>start tag: html</code>,<code>start tag: body</code>, <code>start tag: h1</code>,<code>end tag: h1</code>, <code>start tag: p</code>, <code>end tag: p</code>,<code>end tag: body</code>, <code>end tag: html</code>. These tokens will be then converted into nodes by means of a lexer. A lexer is a type of parser. And from these nodes, a DOM tree will be constructed. The browser will be able to determine parents and children from the start and end tags. For example since the <code>start tag: body</code> is situated between the <code>start tag: html</code> and <code>end tag: html</code>, the browser will know that the <code>body</code> node is a child of the <code>html</code> node.</p>

<p><img src="http://iamjulia.github.io/images/DOM_tree.png" width="1024" height="768" title="DOM tree" alt="DOM"></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[APIs]]></title>
    <link href="http://iamjulia.github.io/blog/2014/11/02/apis/"/>
    <updated>2014-11-02T23:47:49-05:00</updated>
    <id>http://iamjulia.github.io/blog/2014/11/02/apis</id>
    <content type="html"><![CDATA[<p>What is an API??</p>

<p>Lately I’ve been hearing a lot about APIs - so I decided to look into what they really are and how they work. An API, short for Application Program Interface, is basically a set of instructions for building software application. The way I see it, APIs make life easier for programmers who make life easier for users of software applications.</p>

<p><img src="http://cdn.meme.am/instances/500x/34938439.jpg"></p>

<p>Although APIs help enormously with improving the user experience on many websites, they are completely invisible to the user. The main job of an API is to allow software to interact with other software, they silently work their magic in the background while users only see a pretty user interface.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Gimme Some Syntactic Sugar]]></title>
    <link href="http://iamjulia.github.io/blog/2014/10/15/gimme-some-syntactic-sugar/"/>
    <updated>2014-10-15T23:08:44-04:00</updated>
    <id>http://iamjulia.github.io/blog/2014/10/15/gimme-some-syntactic-sugar</id>
    <content type="html"><![CDATA[<p>As a beginner programmer, learning a new language can be scary and daunting. So, I was delighted to learn about &ldquo;syntactic sugar&rdquo;.</p>

<p>The term &ldquo;syntactic sugar&rdquo; sounds sweet and inviting, and it is! It is syntax that does not follow the regular conventions and it makes for easier writing and reading of code. Ruby was designed with it&rsquo;s users in mind so its syntax is rather natural and not much different from the way we actually speak at times. Syntactic sugar makes Ruby (and other languages) more user (and beginner) friendly!</p>

<p>Life with no sugar&hellip;</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='objc'><span class='line'><span class="mf">2.</span><span class="o">+</span><span class="p">(</span><span class="mi">5</span><span class="p">)</span>
</span><span class='line'><span class="n">x</span><span class="o">=</span><span class="n">x</span><span class="o">+</span><span class="mi">1</span>
</span><span class='line'><span class="s">&quot;hello world&quot;</span><span class="p">.</span><span class="n">send</span><span class="p">(</span><span class="o">:</span><span class="n">capitalize</span><span class="p">)</span>
</span><span class='line'><span class="n">a</span><span class="o">||</span><span class="n">a</span><span class="o">=</span><span class="n">b</span>
</span></code></pre></td></tr></table></div></figure>


<p>A spoon full of sugar helps the code look much prettier&hellip;</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='objc'><span class='line'><span class="mi">2</span><span class="o">+</span><span class="mi">5</span>
</span><span class='line'><span class="n">x</span><span class="o">+=</span><span class="mi">1</span>
</span><span class='line'><span class="s">&quot;hello world&quot;</span><span class="p">.</span><span class="n">capitalize</span>
</span><span class='line'><span class="n">a</span><span class="o">||=</span><span class="n">b</span>
</span></code></pre></td></tr></table></div></figure>


<p>Wow, look how much clearer and &ldquo;more human&rdquo; the code looks with a touch of sugar!</p>

<p>Unfortunately, not everyone is a fan of syntactic sugar. There are critics that see these exceptions as rather unimportant.</p>

<p>&ldquo;Syntactic sugar causes cancer of the semicolon.&rdquo; - Alan Perlis</p>

<p><img src="http://i2.kym-cdn.com/photos/images/facebook/000/184/700/1318369988001.jpg"></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[My First Post on Octopress]]></title>
    <link href="http://iamjulia.github.io/blog/2014/10/14/my-first-post-on-octopress/"/>
    <updated>2014-10-14T22:58:59-04:00</updated>
    <id>http://iamjulia.github.io/blog/2014/10/14/my-first-post-on-octopress</id>
    <content type="html"><![CDATA[<p>&ldquo;Hello World!&rdquo;</p>
]]></content>
  </entry>
  
</feed>
