CodeSandbox 介紹 — 線上程式編輯器(前端)Online Web application editor
CodeSandbox 能支援前端框架開發線上編輯器(IDE)，常見除了 VueJS、AngularJS、ReactJS，還包含 VanillaJS、Preact 等，透過 CodeSandbox 開發能很簡單且快速使用，並省去很多需要配置的時間，且無論什麼時間，你都可以進行編輯與分享你的專案到各個地方。
另外，如果你對 GIT GUI 有興趣的話，可以延生閱讀這篇「Git GUI- GitKraken 介紹」文章，來提升您的工作效率！
進入正題
為什麼會想介紹 CodeSandbox呢？
事情是這樣子的，老闆希望每位工程師都要會前端常見的前端框架 VueJS，所以請了一位同事來替大家上課，讓大家能夠有開發的基礎，未來如果有新進員工，也能把教學影片給新人看。
於是，在某一天下午，同事發起了上課通知，於是課程就這麼開始了
第一步，大家的電腦上需安裝好相關的東西，例如 VS Code IDE、Npm 等，公司同事的筆電大部分都是 Macbook，有些則是 Windows 筆電，所以在安裝流程難免會不一樣，報錯的資訊也不盡相同
第二步則是下 command line 來建立 Vue 專案 ，這時候 windows 可能還要另外裝 bash shell 等等，而有些對 command line 也不太熟，例如怎麼 cd 到目錄，光是第一、二步驟就花了30分鐘起跳，這時候其實會讓學習者有碰壁的感覺，怎麼要開個 Vue project 會這麼麻煩
有什麼方式可以改善呢？這時候我想到了 CodeSandbox
CodeSandbox 可以改善初期的建立專案的步驟，對於想學前端框架會比較好上手，你能直接透過瀏覽器在網頁做線上編輯，使用上也很方便，也能使用一般快捷鍵，撰寫程式時也會隨時做存檔。
CodeSandbox 介紹
支援的服務項目
限制
Free 與 Patron 的分別
對大家來說，以免費來說對於剛入門的初學者來說，已經很夠用了
大家比較在乎的應該是Private Sandboxes(因為不想公開)，但你可以透過贊助支持，就可以享有 Patron 的權力～
如何快速建立專案 —以 VueJS為例
第一個方式
(1) 在首頁右上角有「Create Sandbox」按鈕
(2) 在點擊「Vue」
第二個方式
直接在首頁點擊「綠色方塊 → OPEN VUE」
Vue 支援包含 .js、.html、.scss,.vue…等
接著，當你看到這個畫面時…
不用懷疑，你已經完成專案的建立了！！
這是屬於 Fork 過來的Vue專案
初始目錄、檔案是不是跟我們一般自己建立專案一樣呢
建立專案後，我們來測試看看
支援除錯
試著打一些錯誤的程式碼，假設在第 14 行打了「omg」
你能在四個地方能看到提示錯誤的地方
1. 左邊Files目錄 (驚嘆號)
2. 中間編輯區
3. 右邊網頁畫面
4. 下方 Console
支援 ESLint
完整提供 ES6 提示字
CodeSandbox 採用 VS Code 快捷鍵
如果你本身已經使用過 VS code，那麼CodeSandbox你一定能馬上上手，稍微舉幾個快捷鍵例子，如下：
command + shift + p 顯示命令面板
command + p 快速打開檔案
command + d 查找相同的內容
option + shift + up/down 向 上/下 複製
option + up/dow 行往 上/下 移動
支援下載完整程式碼
你能夠把寫好的程式碼完整打包下來，如圖片「Export to ZIP」
支援分享/共享
這是很棒的事情，如果你遇到問題想詢問或想展示作品，你可以分享你的專案，別人即可在網頁上連結你的作品來觀看成果（不需要像一般分享時要先 clone 到本機去執行）
點擊上方 Share 按鈕
選擇分享的方式，分為以下四大種
Share Embed
(1) Editor url (also works on Medium)
(2) Embed url
(3) iframe
Share CodeSandbox Button
(1) Markdown
(2) HTML
Share QR
Share on Social Media
這是大致上目前的介紹，下一次有機會的話，會介紹比較特別的功能～
看完這一篇文章後，有沒有想趕快動手試試呢
馬上開始使用 CodeSandbox 來練習你的前端框架
