Jekyll2023-03-04T11:46:37+00:00http://hakilebara.com/feed.xmlhakilebaraHakilebara, I build web products.
Mobile Photo Scroll Effect2017-12-04T00:00:00+00:002017-12-04T00:00:00+00:00http://hakilebara.com/post/2017/12/04/mobile-photo-scroll-effectTIL how to have a faster CSS transition on hover out than on hover in2017-11-27T00:00:00+00:002017-11-27T00:00:00+00:00http://hakilebara.com/post/2017/11/27/css-different-transition-speedAn EmberJS high order tab component2017-10-17T00:00:00+00:002017-10-17T00:00:00+00:00http://hakilebara.com/post/2017/10/17/high-order-tab-component-with-emberjsSmooth CSS Push Buttons2017-10-17T00:00:00+00:002017-10-17T00:00:00+00:00http://hakilebara.com/post/2017/10/17/smooth-css-push-buttonsTIL how to change Phoenix development server port2017-08-29T08:04:44+00:002017-08-29T08:04:44+00:00http://hakilebara.com/post/2017/08/29/til-how-to-change-phoenix-dev-server-port<p>You can run your Phoenix dev server on a different port that tcp/4000.</p>
<figure class="highlight"><pre><code class="language-elixir" data-lang="elixir"><span class="c1"># myapp/config/dev.exs</span>
<span class="n">config</span> <span class="ss">:my_app</span><span class="p">,</span> <span class="no">MyApp</span><span class="o">.</span><span class="no">Endpoint</span><span class="p">,</span>
<span class="ss">http:</span> <span class="p">[</span><span class="ss">port:</span> <span class="no">System</span><span class="o">.</span><span class="n">get_env</span><span class="p">(</span><span class="s2">"PORT"</span><span class="p">)</span> <span class="o">||</span> <span class="mi">4000</span><span class="p">],</span></code></pre></figure>
<p>Phoenix will use the ENV variable “PORT” if it exists. Otherwise it will fallback to tcp/4000.
Then from the terminal</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nv">$ PORT</span><span class="o">=</span>4003 mix phx.server</code></pre></figure>
<p>or</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nv">$ PORT</span><span class="o">=</span>4003 iex <span class="nt">-S</span> mix phx.server</code></pre></figure>
<p><a href="https://github.com/phoenixframework/phoenix/issues/962#issuecomment-111635557">reference: Chris McCord’s answer on github</a></p>
<p><strong>Tested on</strong> <br />
<em>elixir 1.4.4</em> <br />
<em>phoenix 1.3.0</em> <br />
<em>macOS Sierra 10.12.6</em> <br /></p>You can run your Phoenix dev server on a different port that tcp/4000.Loading Partial Models with Emberjs2017-08-22T11:04:44+00:002017-08-22T11:04:44+00:00http://hakilebara.com/post/2017/08/22/ember-partial-data-fetching<p>Problem: How can I fetch an index of shallow models and flesh them out when needed?</p>
<p>Example: you have an index of stories to display but you don’t want to fetch all the stories’ content on the index route.</p>
<p>If your backend api is following the <a href="http://jsonapi.org">json:api</a> spec. You can use <a href="http://jsonapi.org/format/#fetching-sparse-fieldsets">Sparse Fieldsets</a>.</p>
<p>Given the following routes:</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// app/router.js</span>
<span class="nx">Router</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">route</span><span class="p">(</span><span class="dl">'</span><span class="s1">stories</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">route</span><span class="p">(</span><span class="dl">'</span><span class="s1">story</span><span class="dl">'</span><span class="p">,</span> <span class="p">{</span> <span class="na">path</span><span class="p">:</span> <span class="dl">'</span><span class="s1">:story_id</span><span class="dl">'</span> <span class="p">});</span>
<span class="p">});</span>
<span class="p">});</span></code></pre></figure>
<p>This should only fetch the attributes you need to display your index of stories.</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// app/routes/stories/index.js</span>
<span class="nx">model</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">store</span><span class="p">.</span><span class="nx">query</span><span class="p">(</span><span class="dl">'</span><span class="s1">story</span><span class="dl">'</span><span class="p">,</span> <span class="p">{</span> <span class="na">fields</span><span class="p">:</span> <span class="p">{</span> <span class="na">story</span><span class="p">:</span> <span class="dl">'</span><span class="s1">title</span><span class="dl">'</span> <span class="p">}</span> <span class="p">});</span>
<span class="p">}</span></code></pre></figure>
<p>Then on the individual story route (e.g <code class="language-plaintext highlighter-rouge">/stories/1</code>), you can use setupController to flesh out your model with extra data.</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// app/routes/stories/story.js</span>
<span class="nx">setupController</span><span class="p">(</span><span class="nx">controller</span><span class="p">,</span> <span class="nx">model</span><span class="p">)</span> <span class="p">{</span>
<span class="cm">/** this._super(controller, model); **/</span>
<span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="nx">model</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="dl">'</span><span class="s1">content</span><span class="dl">'</span><span class="p">))</span> <span class="p">{</span> <span class="c1">// if the model is not fully fleshed-out</span>
<span class="kd">let</span> <span class="nx">fullModel</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">findRecord</span><span class="p">(</span><span class="dl">'</span><span class="s1">story</span><span class="dl">'</span><span class="p">,</span> <span class="nx">model</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
<span class="nx">controller</span><span class="p">.</span><span class="kd">set</span><span class="p">(</span><span class="dl">'</span><span class="s1">model</span><span class="dl">'</span><span class="p">,</span> <span class="nx">fullModel</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span></code></pre></figure>
<p>The model hooks blocks the UI, however the subsequent fetch in setupController will not.
This means that if you launch the app at /stories and that navigate to /stories/1 you might see that
the stories’ content is missing for a few seconds.</p>
<p>This is actually wanted. We render a part of the UI and then wait for the rest of the UI to load.
This is a good place to put a content placeholder while the stories content
is being fetched. This is would be a good use case for ember-concurrency.</p>Problem: How can I fetch an index of shallow models and flesh them out when needed?