MUKI space*
Front-end Development,
Effective Note-Taking.
我的 Visual Studio Code 編輯器設定記錄 (佈景與模組)
2016 年開始使用 Brackets 編輯器，後來轉用 VS Code，因為其更新速度快、延伸模組豐富。VS Code 每月固定更新，且提供 Brackets 的內建功能如 CSS Peak。延伸模組如 Auto Rename Tag、Bracket Pair Colorizer 2、cdnjs 等，讓開發更順利。
推薦的其他模組包括 Git History、HTML CSS Support、Live Server、Settings Sync 等。這些模組能提升開發效率，並提供多樣化的功能，適合客製化需求。...
將檔案快速 push 到 gh-pages branch
GitHub 提供簡易環境可執行前端程式，只需在 repo 新增 gh-pages 分支並將檔案 push 即可。使用 Sourcetree 來切換 branch 會改變檔案，不是理想方法。建議使用 npm 套件 gh-pages 管理，安裝指令為 $ npm install gh-pages -g。
gh-pages 套件可簡單地將當前 branch 檔案推送到 gh-pages。執行 $ gh-pages -d . 指令時，需輸入 GitHub 帳號密碼多次。為避免此情況，修改 .git/config，將 repo 位置從 http:// 改為 git@，即可免密碼推送。...
我的 Brackets 編輯器設定 (佈景與外掛)
Brackets 是一款不太流行但功能豐富的編輯器，適合喜歡客製化的用戶。它支持即時預覽 HTML/CSS，且可快速查看及編輯 CSS。內建的選色功能讓設計更便捷，無需安裝額外外掛。
Brackets 提供多種外掛，從實用的 Git 整合到炫技的 CSS 顏色預覽，滿足不同需求。客製化簡便，字體樣式可輕鬆調整。內建 live preview 功能，支持即時語法檢視。還有中文介面選擇，適合不同語言使用者。...
想從設計走到前端？先了解前端在幹嘛吧！
設計師想轉前端需先了解前端工作流程。設計流程包括使用 PhotoShop 或 Sketch 設計網站，切版、排版及簡單的 JS 互動。前端流程則需從設計稿開始，切版、排版、撰寫 JavaScript 互動及與後端串接資料。
前端需掌握 HTML、CSS、JavaScript，並懂得處理 Client 端與 Server 端訊息。學習開發者工具進行網頁除錯及關注網頁效能也是前端的重要技能。從設計轉前端是一條漫長的路，但透過持續學習可以逐步進步。...