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

  <title><![CDATA[Alec Chen]]></title>
  <link href="http://blog.alec.tw/atom.xml" rel="self"/>
  <link href="http://blog.alec.tw/"/>
  <updated>2012-03-23T22:18:53+08:00</updated>
  <id>http://blog.alec.tw/</id>
  <author>
    <name><![CDATA[Alec Chen]]></name>
    
  </author>
  <generator uri="http://octopress.org/">Octopress</generator>

  
  <entry>
    <title type="html"><![CDATA[為 Octopress 加上 Last.fm 支援]]></title>
    <link href="http://blog.alec.tw/blog/2011/12/03/lastfm-sidebar/"/>
    <updated>2011-12-03T13:44:00+08:00</updated>
    <id>http://blog.alec.tw/blog/2011/12/03/lastfm-sidebar</id>
    <content type="html"><![CDATA[<p>想在側邊欄利用 <a href="http://www.last.fm">Last.fm</a> 分享最近聽過的歌。雖然 <a href="http://www.last.fm">Last.fm</a> 官方其實是可以幫你產生<a href="http://www.last.fm/tools/charts">一段 HTML</a> 方便你直接放在自己的網站上的，不過看來看去總覺得沒有任何一個符合目前的版型，於是作罷。</p>

<p>剛好自己來練習寫一個。</p>

<h2>架構</h2>

<p>看了一下 Octopress 關於 <a href="http://octopress.org/docs/theme/template/">Template</a> 的文件之後，才發現它的架構非常有彈性。任何客製化的內容都放在 <code>source/_includes/custom/</code> 裡面，而 sidebars 的內容放在 <code>asides</code> 裡。</p>

<p>使用的時候必須要在 <code>_config.yml</code> 裡面將自己寫好的 aside 加到 <code>_config.yml</code> 的 <code>default_asides</code> 陣列裡才會生效。出現的順序跟在陣列裡的順序是一樣的。</p>

<p>架構都搞清楚了，接下來問題就是怎麼寫 aside 了。</p>

<h2>實作</h2>

<p>參考了內建 <a href="http://delicious.com/">delicious</a> 支援的</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>
</pre></td><td class='code'><pre><code class=''><span class='line'>source/javascripts/octopress.js
</span><span class='line'>source/_includes/asides/delicious.html</span></code></pre></td></tr></table></div></figure>


<p>兩個檔案，發現只需要拿到網站提供的 JSON 之後事情就簡單了。</p>

<p><a href="http://www.last.fm">Last.fm</a> 有很詳細的<a href="http://www.last.fm/api/intro">手冊</a>提供給 Developer 參考，不過你必須先申請一個 API Key，才能利用 API 取用這些資料。在這裡我們需要的是 <code>user.getRecentTracks</code> 這個方法。</p>

<p>接下來只需要把</p>

<div><script src='https://gist.github.com/1426209.js?file='></script>
<noscript><pre><code>&lt;section&gt;
  &lt;h1&gt;Recent Tracks&lt;/h1&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
    function getRecentLastfmTracks(data) {
      var output = &quot;&lt;ul&gt;&quot;;
      var tracks = data[&quot;recenttracks&quot;].track;
      for (var i=0, l=tracks.length; i&lt;l; i++) {
        var track      = tracks[i];
        var artist     = track[&quot;artist&quot;][&quot;#text&quot;];
        var track_name = track[&quot;name&quot;];
        var track_url  = track[&quot;url&quot;];
        output += '&lt;li&gt;&lt;a href=&quot;' + track_url + '&quot;&gt;' + artist + ' - ' + track_name + '&lt;/a&gt;&lt;/li&gt;';
      }
      output += &quot;&lt;/ul&gt;&quot;;
      $('#lastfm').html(output);
    }
  &lt;/script&gt;
  &lt;div id=&quot;lastfm&quot;&gt;&lt;/div&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&amp;amp;user={{ site.lastfm_user }}&amp;amp;format=json&amp;amp;limit={{ site.lastfm_count }}&amp;amp;api_key={{ site.lastfm_api }}&amp;amp;callback=getRecentLastfmTracks&quot;&gt;&lt;/script&gt;
  &lt;a href=&quot;http://www.last.fm/user/alec929&quot;&gt;@alec929&lt;/a&gt; on Last.fm
&lt;/section&gt;</code></pre></noscript></div>


<p>放到 <code>source/_includes/custom/asides/lastfm.html</code> 裡，並且把這個路徑加到 <code>default_asides</code>。</p>

<p>然後在 <code>_config.yml</code> 裡新增下面三個參數</p>

<figure class='code'><figcaption><span>_config.yml</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='yaml'><span class='line'><span class="l-Scalar-Plain">lastfm_user</span><span class="p-Indicator">:</span>
</span><span class='line'><span class="l-Scalar-Plain">lastfm_count</span><span class="p-Indicator">:</span>
</span><span class='line'><span class="l-Scalar-Plain">lastfm_api</span><span class="p-Indicator">:</span>
</span></code></pre></td></tr></table></div></figure>


<p>填上自己的設定就搞定啦，打完收工！</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[用 Git 得獎盃 - Git Achievements]]></title>
    <link href="http://blog.alec.tw/blog/2011/12/02/git-achievements/"/>
    <updated>2011-12-02T07:08:00+08:00</updated>
    <id>http://blog.alec.tw/blog/2011/12/02/git-achievements</id>
    <content type="html"><![CDATA[<blockquote><p>已獲得獎盃。<br/>Git - 擊倒 50 名敵人</p></blockquote>


<p>這純粹是我自己的想像，因為最近都在玩再度成為經典的<a href="http://acg.gamer.com.tw/acgDetail.php?s=42215">秘境探險 3</a> 的關係。</p>

<p><a href="https://github.com/icefox">icefox</a> 的 <a href="https://github.com/icefox/git-achievements">git-achievements</a> 是一個很有意思的專案，在公司已經用了大概半年。它利用類似 PS3 的<a href="http://www.yourgamercards.net/profile/alecchen">獎盃</a>系統，可以讓你在枯燥的工作環境增加一點小小的趣味。</p>

<h2>安裝</h2>

<p>首先當然是 clone 一份來。</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>git clone https://github.com/icefox/git-achievements</span></code></pre></td></tr></table></div></figure>


<p>先別跟著做，因為這樣不是很正確，你只能自己欣賞你的獎盃，沒辦法跟別人分享。</p>

<p><a href="https://github.com/icefox/git-achievements">git-achievements</a> 內建 <a href="http://pages.github.com/">github pages</a> 支援，可以自動發佈你最新的成就，免功夫免技術，不用實在就太可惜囉。前提是你需要一個 <a href="http://github.com">github</a> 帳號。（沒有的快去申請！）</p>

<p>正確的方式是 fork 一份之後，再從自己的 repo clone 下來</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>git clone git@github.com:&lt;username&gt;/git-achievements.git</span></code></pre></td></tr></table></div></figure>


<p>最後改一下 bash 的環境變數（其他什麼 *sh 的請自行想像）</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'><span class="nb">export </span><span class="nv">PATH</span><span class="o">=</span><span class="s2">&quot;$PATH:~/git/git-achievements&quot;</span>
</span><span class='line'><span class="nb">alias </span><span class="nv">git</span><span class="o">=</span><span class="s2">&quot;git-achievements&quot;</span>
</span></code></pre></td></tr></table></div></figure>


<p>接著就不管他了，照原本的工作方式用 <a href="http://git-scm.com">git</a>。</p>

<h2>使用</h2>

<p>目前在公司因為用 svn 的同事還是佔大多數，程式碼也都是放在 svn server 上，所以常做的就是</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>git svn rebase
</span><span class='line'>git svn dcommit
</span></code></pre></td></tr></table></div></figure>


<p>於是我的得分大部分都是從 git-svn 來的，是不是感覺有點悲哀？真希望 Linus 來幫大家<a href="http://www.youtube.com/watch?v=4XpnKHJAok8">洗腦一下</a>。</p>

<p>總之邊<del>玩</del>工作就會邊升級，三不五時就有一個獎盃也算是有點提振士氣的效果。</p>

<p>最後如果你想欣賞你全部的獎盃的話，只需要打 <code>git achievements -p</code>，就會在你安裝 <a href="https://github.com/icefox/git-achievements">git-achievements</a> 的目錄產生 <code>index.html</code>，用瀏覽器打開就可以看到結果。假使你有照前面介紹的 fork 一份，而且也設定了</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>git config --global achievement.upload <span class="s2">&quot;true&quot;</span>
</span></code></pre></td></tr></table></div></figure>


<p>那麼每當你拿到新的獎盃，<a href="https://github.com/icefox/git-achievements">git-achievements</a> 就會自動幫你上傳，接著你就可以在</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>http://&lt;username&gt;.github.com/git-achievements
</span></code></pre></td></tr></table></div></figure>


<p>看到你全部的獎盃囉！是不是很有成就感！</p>

<p>你問我說耐不耐玩？看看作者 <a href="https://github.com/icefox">icefox</a> 自己都<a href="http://icefox.github.com/git-achievements/">還沒全破</a>，你說呢？一起來用 <a href="http://git-scm.com">git</a> 拿獎盃吧！</p>
]]></content>
  </entry>
  
</feed>
