好多人會用 CodePen 來抄 code 交貨，所以寫篇文章介紹一下 CodePen 比大家。
CodePen 係一個線上模擬開發環境，可以寫 HTML、CSS、JavaScript，直接睇到結果，仲可以分享連結俾人睇。介面友好，無難度，非常推薦俾初學者。
每個專案叫 Pen，想要進階功能如私人專案、儲存本地圖片與資產，就要付費成為 Pro 會員，開啟 Project。不過免費版本已經夠大部分人用。
如何提升開發效率
第一招：自訂 Pen 的設定
剛登入首頁，點擊左上角 CREATE PEN，創建新專案，再去右上角的 SETTING 設定專案。CodePen 會自動幫你寫好 <body> 以外部分，想更改 <html> 或 <head> 可以在這裡設定。外部樣式或腳本都可以在這裡設定，唔好直接寫在編輯器的 HTML、CSS 或 JavaScript 區塊。
第二招：整理程式碼
本地開發環境通常會用 Prettier 或 ESLint 來整理程式碼。在 CodePen 中可以點選面板右側的向下按鈕選擇對應功能。善用自動整理功能，讓程式碼更容易閱讀。
第三招：客製化開發環境
CodePen 方便好用，但有時會懷念自己習慣的開發環境。可以在編輯器偏好中調整喜歡的功能與外觀。我自己鍾意 Oceanic Dark 同 JetBrains Mono 字體的搭配。
其他問題：如何在 CodePen 中使用外部資源？
使用 imgur 託管圖片
imgur 是免費的線上圖片託管服務，有許多種類的圖片
獲得圖片的連結
本地端開發時，資源的相對路徑直接寫上去就可以。在 CodePen，如果冇付費，點樣放資源上 Pen 呢？好簡單，找線上託管資源網站就可以。最常見的圖片可以用 imgur。拖曳圖片到 imgur 網頁上，自動上傳並生成連結，這個連結就是圖片的網址，可以直接複製貼上到 CodePen 或其他網頁中。
總結
CodePen 介面簡單友好，無需安裝，隨時隨地可以寫碼。適合初學者快速上手，仲可以即時預覽效果，對學習網頁開發非常有幫助。
沒有留言:
發佈留言