React 從 JSX 開始 Hello World
相信每個使用 React 的前端工程師都會聽過並學習使用 JSX 這個語法，雖然官方是說不一定要求使用 JSX，不過先來看一下它如何寫，也許就不會這麼排斥它了…吧？
什麼是 JSX？JAX 是一種 JavaScript 的語法擴充，官方推薦使用它來寫出使用者界面的外觀，而且 JSX 允許你使用 JavaScript 所有的功能。
從 Hello World 開始學 JSX
See the Pen First React - Hello World by Bucky Chu
(@bucky0112) on CodePen.
從上面的 CodePen 中，可以看到畫面顯示 Hello World，不過是怎麼動的呢？看一下程式碼：
1ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById("root"));
各位觀眾，這就是 JSX 了，看起來 JavaScript 裡面的結構跟一般的 HTML 差不多，其實把它當成是威力加強版的 HTML 就可以了（跟 Koe ...
如何刪除 Hexo 已發佈的文章
不小心在 Hexo 發佈一篇不要的文章，本來以為直接刪除 posts 裡面的文章再重新發佈一次就可以了，結果沒用，在 stack overflow 找了一下就解開了，紀錄一下該怎麼解決。
不囉嗦，直接上作法：
直接在 source/_post 資料夾中刪除文章。
在終端機執行 hexo clean，並在根目錄下刪除 db.json。
執行 hexo generate 或是 hexo g。
執行 hexo deploy 或是 hexo d 重新發佈。
其實還蠻簡單的，只是官方文件找不到這個方法蠻意外的。
參考文件來源：How do I delete a post in hexo
SCSS import 切分檔案管理
在以往單純使用 CSS 的開發經驗中，總是會使用一支 CSS 檔案來設計所有的樣式，但是這樣的缺點是之後的維護相當困難，要找一個樣式的 code 可能要找很久。之前在寫 Vue 專案的時候，覺得元件式的管理很棒，所有元件分離讓之後的管理變得容易很多，現在才發現原來 SCSS 也可以做類似的事情，感覺好用很多啊～
變數管理這個方法在我上次的專案中， 在我自定義 BootstrapVue 的顏色時有用到。而在 SCSS 中的作法也是差不多，假設目前有一支 .scss 檔案，已經有設定顏色的變數，想要讓變數分割成一支獨立的檔案來管理的話，做兩步驟就可以成功使用 import 來管理：
新增一支 _variable.scss，裡面放變數的設定。
在主要 .scss 檔中 import 檔案：@import "variable";
123456789101112131415// all.scss@import "variable";.banner-title { max-width: 460px; background: li ...
ES6 好用語法 - 解構賦值
懶得定義一樣的值嗎？來試試複製大法吧～
解構賦值 (Destructuring assignment)在 MDN 中的介紹為 - 解構賦值語法是一種 JavaScript 運算式，可以把陣列或物件中的資料解開擷取成為獨立變數。
陣列解構一般如果想要把陣列中的資料給複製並建立一個新的變數的話，可能會這樣做：
12345const winter_is_comming = ['December', 'January', 'February'];const winter_1st_month = winter_is_comming[0];const winter_2nd_month = winter_is_comming[1];const winter_3rd_month = winter_is_comming[2];
如果透過解構的話，作法有點像是把右邊的值給複製進去給左邊的變數一樣，可以這樣做：
123const winter_is_comming = ['December', 'January&# ...
SCSS 變數運用
說來慚愧，立志成為一名前端工程師的我，只會純 CSS 跟框架來幫網頁做樣式，對於 SASS 這個好用的語言工具卻是知道的不多，所以想趁有時間來學一下 SASS，就開了這個學習筆記系列。
何謂 SASS？根據維基百科中介紹，SASS 全名為 Syntactically Awesome Stylesheets，是一個將指令碼解析成 CSS 的手稿語言，也就是 SassScript。SASS 有兩種語法，一種是 SASS，另一種是 SCSS，那麼兩種有什麼差別呢？
這是 SCSS 的寫法：
See the Pen scss sample by Bucky Chu
(@bucky0112) on CodePen.
這是 SASS 的寫法：
See the Pen sass sample by Bucky Chu
(@bucky0112) on CodePen.
跟普通的 CSS 相比，SCSS 是相對好入門的寫法，在相同架構下，例如 li 就可以寫在 ul 中，而且寫法差不多；而 SASS 看起來架構也一樣，差別在於完全沒有大括號跟分號，感覺很適合懶人的寫法。不 ...
ES6 好用語法 - 箭頭函式
在 ES6 中，有許多好用的語法可以使用，這篇就來介紹箭頭函式。
前言最近買了一本書，書名是「從 Hooks 開始讓你的網頁 React 起來」。其實我本來就一直對 React 很有興趣，雖然後來跑去學了 Vue.js，不過我內心對 React 還是有一份憧憬，而且也想要了解這兩者有什麼不同之處，所以就開始來試著學看看吧。
React 是目前 JavaScript 三大框架中之一，雖然它比較像是一個用來渲染 UI 組件的函式庫而不是一個框架 (Framwork)，不過在其生態圈下有許多好用的函式庫，所以要說它是框架也是可以的。
React 雖然很強大，但是要入門的門檻還是有的，至少你的 ES6 語法要夠熟悉，所以想要寫一些文章來熟悉一下我的 ES6，那麼就開始吧！
箭頭函式 (Arrow Function)一般函式的寫法函式一般在 JavaScript 中的寫法可能會是這樣:
12345function callName(name) { return `my name is ${name}`;}callName('Bucky&#x ...
JavaScript 作品實戰班之課程心得
在經歷了為期 8 週的課程之後，回顧當時的猶豫，現在覺得上到這個課程真的是太好了，感覺對使用 JavaScript 的信心提升了不少，對於 Vue.js 的掌握度也越來越熟悉，甚至還用 Vue CLI 做了一個電商網站呢！
當初為什麼報名這堂課？雖然我在前端領域學習了一陣子了，不過對於 JavaScript 還是有點不夠熟練，以至於對於做出一個作品出來覺得沒有什麼信心，所以遲遲準備沒有好的作品去面試。這時候正好六角學院開了一個 - JavaScript 作品實戰班。看了一下課綱，六角學院的老師們將會在 8 週教我們 JavaScript 的邏輯規劃、將 ES6 運用在實戰中、從 Vue.js 的基礎教學，一直到使用 Vue CLI，一直到做出一個 SPA 網站出來。我自己也剛好在六角學院學 Vue.js 中，感覺這是一個可以快速練功的好選擇，所以就刷了下去惹。
回顧學習過程與最喜歡哪些活動？這 8 週下來，都會有每日任務讓你從做中學，甚至還有團體任務讓你跟組員們一起學習解題，啊！對了，忘了說到六角在這課程中導入了打怪的模式，也分了組別可以有團體打王，或是每週任務讓個人輸出傷害讓最後 ...
Vue.js 的 component 是什麼？
當做完一個專案時，每當想要修改某樣東西時，都要再重新審視程式碼，這時候就會非常痛苦。而 Vue.js 中有一個 component 的概念，就不用再害怕維護專案啦。
元件概念
而什麼是 component 呢？
圖片來源：Vue.js 官網
它的概念是一個網頁中，一些比較常用的組件，例如：nav bar 或是 side bar 等等區塊。這時候使用 component 來控制一個區塊，這樣就會非常好整理以及修改。
下面有一個點擊的範例，是從 Components Basics 稍微做個修改的範例，讓我們試著改成使用 Component 來看看：
1234567<div id="app"> <button-counter> <button @click="plus"> 我被按了 {{ count }} 下 </button> </button-counter></div>
1234567891011l ...
JS 基礎回顧 - DOM
想像一下在夾娃娃機中，我們操作著爪子，在機台中抓取我們想要的東西。而這樣的概念，有點像是我們要怎麼樣來藉由 JavaScript 操作網頁畫面的 HTML 元素，文件物件模型（Document Object Model, DOM）就可以幫助我們來做這件事。
那麼我們有哪些爪子可以使用呢？一般常使用的有：
getElementById()
getElmentsByClassName()
querySelector()
querySelectorAll()
下方有兩塊 div，如果想改變它們的文字內容的話，就可以透過 DOM 來操作。
12<div class = "doll" id = "doll-1">娃娃1</div><div class = "doll" id = "doll-2">娃娃2</div>
來看看個別使用的方法：
getElementById()
1234document.getElementById('doll-1 ...
執行環境：程式執行
JavaScript 在產生執行環境時，會有兩個階段。
第一階段是創造，會設定變數和函數到記憶體中。
第二階段則是執行。
而這篇文章則會提到執行的部份。
當在創造階段時，都已經設定好所有東西，到執行這個階段就很單純，只是逐行執行自己寫好的程式碼而已。進行編譯跟轉換後，讓電腦看得懂，這樣就結束了。
不免俗的來看一下程式碼，當執行以下的程式碼後，會如何運作呢？
123456789101112function b() { console.log('Test');}b(); console.log(a);var a = 'Hello';console.log(a)
首先呼叫 b()，沒有什麼問題，會執行 function 內的程式碼，印出 ‘Test’。
第一個 console.log(a)，由於在創造階段時，先給 a 一個 undefined，然後執行，所以就印出 undefined。
第二個 console.log(a)，因為有給 a 一個值，所以執行後，就印出 ‘Hello’。
再看其他例子，下 ...
