背不起來的就寫下來吧 2019-12-29T05:46:57.731Z https://guahsu.io/ GuaHsu Hexo https://guahsu.io/2019/12/2019-review/ 2019-12-29T05:22:46.000Z 2019-12-29T05:46:57.731Z

<p>今年的 Review 總算是在西元年前寫完了,<br>踏入前端的第二年, 收穫超豐。 </p>

https://guahsu.io/2019/02/2018-review/ 2019-02-01T01:22:46.000Z 2019-01-31T14:19:30.749Z

<p>每年的 Review 都是在農曆年前XD，<br>今年是正式踏入前端的第一年，收穫頗豐。</p>

https://guahsu.io/2018/12/vue-cli3-load-yaml-and-set-env/ 2018-12-23T01:46:48.000Z 2018-12-23T02:37:41.296Z

<p>最近新專案使用 vue-cli3 來建構，<br>原本預設專案內的一堆 webpack 的設定檔都消失了，<br>要在專案根目錄底下自己建立一個 <code>vue.config.js</code> 來設置。</p> <p>記錄一下一些基本設定跟讀環境設定檔(yaml格式)的方法：</p>

https://guahsu.io/2018/11/vue-slot-machine/ 2018-11-03T05:38:57.000Z 2018-11-03T15:34:13.397Z

<p><img src="https://github.com/guahsu/Vue-SlotMachine/blob/master/demo.png?raw=true" alt="image"> </p> <p>這次又用了Vue + CSS寫一個吃角子老虎機(拉霸)來玩，<br>很多想法繼承年初寫的<a href="https://github.com/guahsu/Vue-TurnTable/" target="_blank" rel="noopener">大轉盤</a>，<br>主要藉由CSS 3D做獎項的主體，透過JS寫入CSS變數來更改起始與結束的旋轉角度，<br>也一樣有寫成可以透過Config來調節獎項內容與樣式。</p>

https://guahsu.io/2018/10/vue-sessionstorage-sharing-and-sync-vuex/ 2018-10-12T13:54:19.000Z 2018-10-12T14:16:03.343Z

<h1 id="範例連結"><a href="#範例連結" class="headerlink" title="範例連結"></a>範例連結</h1><p><a href="https://guahsu.io/Vue-sessionStorage/dist/">https://guahsu.io/Vue-sessionStorage/dist/</a> </p> <p>再vue專案中，如果有使用到vuex來做狀態管理，<br>那很常會遇到一件事情就是重新整理後就遺失了原本的狀態，<br>這裡紀錄我的解決方案：使多頁籤共享SessionStorage並透過同步達到Vuex資料的持久化。 </p>

https://guahsu.io/2018/08/thef2e-challenge-finish/ 2018-08-12T12:45:38.000Z 2018-08-12T12:45:51.000Z

<img src="/2018/08/thef2e-challenge-finish/theF2E.png"> <p>為期九週的挑戰終於結束，總算是可以好好休息了(?)<br>這九週的挑戰真的是各種練習都出現了，<br>也因為可利用時間不多的關係，感覺也是挑戰了寫草稿跟整理code的速度。</p>

https://guahsu.io/2018/08/vue-if-with-vue-show-singleton/ 2018-08-04T05:30:47.000Z 2018-08-12T12:29:25.000Z

<p>在Vue裡面撰寫時，條件渲染的<code>v-if</code> &amp; <code>v-show</code>在渲染上比較大的區別是：<br><code>v-if</code>條件為<code>true</code>時會把內容的DOM渲染出來，條件為<code>false</code>時會把DOM移掉，<br><code>v-show</code>則是一開始就先把DOM渲染出來，當條件切換時只做<code>display: none</code>的切換。</p> <p>而有時候我們需要透過<code>v-if</code>來避免<code>v-show</code>預先渲染了不必要的資料，<br>但又希望<code>v-if</code>條件達成後就繼續保留在頁面中不被移除，這時候就可以混在一起用了:)</p>

https://guahsu.io/2018/06/thef2e-challenge/ 2018-06-30T14:50:48.000Z 2018-08-12T12:33:11.000Z

<p>這個月下班跟假日幾乎都在擠時間玩六角舉辦的TheF2E挑戰，<br>每個禮拜要做出一個作品真的是滿ㄍㄧㄥ的，但也又重新學習到了不少東西。 </p> <p>目前進行到第四週，初試Grid覺得非常有趣..<br>心得暫時先記錄在自己挑戰的<a

https://guahsu.io/2018/06/expose-local-servers-to-the-internet-by-serveo/ 2018-06-12T13:40:34.000Z 2018-06-12T14:22:30.000Z

<p>在local開發程式時，如果要把程式放到手機或給其他同事測試時，<br>除了deploy到測試server外，可以透過serveo來簡易達成！<br>記錄如何使用serveo自訂subdomain並分享local vue專案。</p>

https://guahsu.io/2018/04/JavaScript-Duplicates-Array-Object/ 2018-04-12T14:58:09.000Z 2018-04-12T16:17:13.000Z

<p>昨天在 FB 社團看到有人提問：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [</span><br><span class="line"> &#123; <span class="attr">name</span>: <span class="string">"alex"</span>, <span class="attr">value</span>: <span class="number">10</span> &#125;,</span><br><span class="line"> &#123; <span class="attr">name</span>: <span class="string">"alex"</span>, <span class="attr">value</span>: <span class="number">20</span> &#125;,</span><br><span class="line"> &#123; <span class="attr">name</span>: <span class="string">"tom"</span>, <span class="attr">value</span>: <span class="number">30</span> &#125;,</span><br><span class="line"> &#123; <span class="attr">name</span>: <span class="string">"tom"</span>, <span class="attr">value</span>: <span class="number">40</span> &#125;</span><br><span class="line">];</span><br></pre></td></tr></table></figure></p> <p>想變成<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [</span><br><span class="line"> &#123; <span class="attr">name</span>: <span class="string">"alex"</span>, <span class="attr">value</span>: <span class="number">10</span> &#125;, </span><br><span class="line"> &#123; <span class="attr">name</span>: <span class="string">"tom"</span>, <span class="attr">value</span>: <span class="number">30</span> &#125;</span><br><span class="line"> ];</span><br></pre></td></tr></table></figure></p> <p>想了一陣子想到用<code>Set</code>&amp;<code>Filter</code>來處理..</p>

https://guahsu.io/2018/03/devtool-copy-console-data/ 2018-03-31T15:37:28.000Z 2018-03-31T15:52:24.000Z

<p>有時候從API或console印出的陣列或物件資料想存在local使用，<br>在chrome的開發者工具對想要儲存的對象按右鍵<code>store as global

https://guahsu.io/2018/02/2017-review-and-2018-target/ 2018-02-18T14:08:19.000Z 2018-08-12T12:32:33.000Z

<p>想到什麼寫什麼，有點亂七八糟的紀錄。 </p>

https://guahsu.io/2018/01/vue-turntable/ 2018-01-12T13:04:37.000Z 2018-01-18T17:28:26.000Z

<img src="/2018/01/vue-turntable/Vue-TurnTable-1.png"> <p>來用vue.js寫一個前端大轉盤吧!</p> <blockquote> <p>01/19 更新整體編輯模式<br>

https://guahsu.io/2017/12/vue-cli-webpack-pug-scss-bootstrap4/ 2017-12-17T08:54:41.000Z 2018-08-12T12:32:04.000Z

<img src="/2017/12/vue-cli-webpack-pug-scss-bootstrap4/vue-cli.png"> <p>這兩週一直在看BootStrap4跟Vue，真的覺得好好玩啊！<br>在此紀錄Vue-cli中使用pug/scss/BootStrap4的方法。<br>

https://guahsu.io/2017/12/Hexo-Next-LocalSearch-cant-work/ 2017-12-03T02:40:36.000Z 2017-12-03T14:51:45.000Z

<img src="/2017/12/Hexo-Next-LocalSearch-cant-work/LocalSearch_ERROR.png"> <p>有時候更新完文章，會莫名導致NexT的LocalSearsh有問題，<br>像是上圖一樣的卡住轉圈圈狀態也沒辦法解掉，這篇紀錄如何解決。</p>

https://guahsu.io/2017/11/JavaScript30-Final-Gif-Loader/ 2017-11-25T05:42:17.000Z 2017-11-25T15:02:57.000Z

<img src="/2017/11/JavaScript30-Final-Gif-Loader/demo31.png" class="gua-gif"> <h2 id="JavaScript30系列終於完成啦！！"><a href="#JavaScript30系列終於完成啦！！" class="headerlink" title="JavaScript30系列終於完成啦！！"></a>JavaScript30系列終於完成啦！！</h2><p>寫了一個<a href="https://guahsu.io/JavaScript30/">列表網站</a>擺放每一篇的練習概要與截圖，<br>這個<a href="https://guahsu.io/JavaScript30/">列表站</a>也是沒使用任何外部函式庫與框架，<br>最後一篇紀錄這個小站中做的靜/動態圖切換、loading效果。</p>

https://guahsu.io/2017/11/JavaScript30-30-Whack-A-Mole/ 2017-11-14T14:50:29.000Z 2017-11-23T01:57:14.000Z

<img src="/2017/11/JavaScript30-30-Whack-A-Mole/demo30.png" class="gua-gif"> <h2 id="主題"><a href="#主題" class="headerlink" title="主題"></a><strong>主題</strong></h2><p>JS30的最終篇啦！這次要來做一個打地鼠的小遊戲:D</p>

https://guahsu.io/2017/11/mac-update-cant-use-git/ 2017-11-12T14:17:26.000Z 2017-11-12T14:26:48.000Z

<p>昨天更新Ｍac的Command Line Tools後發現使用git指令無法使用：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span

https://guahsu.io/2017/11/JavaScript30-29-Countdown-Timer/ 2017-11-03T12:34:22.000Z 2017-11-23T02:04:20.000Z

<img src="/2017/11/JavaScript30-29-Countdown-Timer/demo29.png" class="gua-gif"> <h2 id="主題"><a href="#主題" class="headerlink" title="主題"></a><strong>主題</strong></h2><p>製作一個倒數計時器。</p>

https://guahsu.io/2017/10/JavaScript30-28-Video-Speed-Controller/ 2017-10-29T12:37:44.000Z 2017-11-23T02:04:19.000Z

<img src="/2017/10/JavaScript30-28-Video-Speed-Controller/demo28.png" class="gua-gif"> <h2 id="主題"><a href="#主題" class="headerlink" title="主題"></a><strong>主題</strong></h2><p>製作一個可控制影片速率的拉把。</p>