【分享】我自學幾年來使用的開發工具(上)

Picture form unsplash

小弟不才，自學了多年結果還是沒有甚麼長進；也才做出了一些作品，實在是有點失敗。

但多少還是有一些自學上的心得，接下來我想要分享的是我自學的這幾年來所用到的工具還有資源：

一、編輯器：

1. Sublime Text 3

Sublime Text似乎是目前前端以及網頁設計師所最常用的開發工具/編輯器，他的優點就是可擴充性非常的高，但也是歸功於他的Package Control的外掛數量，接下來我就來推薦幾款，我在SublimeText裡面所用的外掛。

• Emmet：這支外掛應該是Sublime裡面算最有名的外掛，它可以輸入很簡單的一些簡寫code，就可以Print出完整結構的程式碼非常的簡單易懂。
• Sass /CSS：讓Sass與CSS能夠有高亮的差異
• Autofilename：這個工具可以快速找出你編輯的檔案所在的資料夾同階層的文件與資料夾可以快速建立路徑的連結，十分的方便。
• HTML-CSS-JS Prettify：當你編輯程式碼如果覺得架構十分的混亂，可以安裝這支外掛，只要你按下了Ctrl+Shift+H，就可以將Html / CSS / JS的程式碼變得非常整齊且有秩序，看起來也非常容易辨認。(這支外掛需要搭配Node.js使用，使用前請先安裝或是LINK到Node.js)
• SidebarEnhancements：一支強化Sublime Sidebar的套件
• ColorHighlighter：能夠直接在編輯器上顯示該色碼的顏色
• LiveReload：搭配Chrome的plugin，只要存檔後修改後的頁面即可自動重新整理。
• SublimeCodeIntel：撰寫程式碼時會自動帶入一些基本的函數以及範例。
• Seti_UI theme(主題)：一款看起來酷炫，又是和專注於程式碼的主題。

更多Sublime相關的資訊，我在網路上還發現了一篇對岸網友寫的詳細解說，有興趣的朋友可以逛逛，保證受益良多！

Sublime Text 3 调教你的私人利器（上）、Sublime Text 3 调教你的私人利器（下）

2. Codepen
Codepen是一款線上即時編輯器，我主要拿來他來做一些簡單的單頁頁面，有時候要做假UI的呈現時，會用到這個線上編輯工具。它也同時結合了一些SublimeText 所有的Plugin，例如上面所提到的Emmet，即可以透過漸入簡單的簡碼+tab鍵後產出完整的code，也支援Sass/pug(原jade) 等等的預處理器的程式碼轉譯十分方便。以下是我常用它做的一些事情：

• 學習線上課程時當作筆記與嘗試用
• 需要快速開發單頁頁面做demo時
• 簡易的靜態網站
• 練習css的技巧

Codepen還有一個最棒的地方就是可以把自己寫好的code分享給其他人，方便在你有需要求助於人將code提供給他人review；或是要教學時，可以把自己寫好的code提供給他人參考當作model去模仿。

二、出圖工具：

• Sketch：Sketch這款工具，原本對它非常的無感，一直以來都認為用Photoshop或是Ai已經非常的好用了，但經過這一年來學習了Sass以及加強了CSS與HTML觀念之後，發現Sketch真的是一套非常方便於UI Design的工具(但前提是你的作品需要的是美式簡單風格，使用Sketch才會比較上手與能接受)，像之前有的設計師跟我說：「因為有很多東西都要在AI或是PS使用，但為甚麼你不用這兩款工具就好了？」。
  的確，PS 跟 Ai 確實是可以製作許多的東西，但在許多必須要批次修改的部分，需要非常多的時間去一個一個去修正。但自從Sketch開發了Symbol功能可以製作出元件模組之後，出圖的速度加快了許多！
• Photoshop / illustrator：這兩款歷久不衰的影像工具，相信大家都知道了就不再多說了XD

三、Prototype資源：

1. Placeholder.it：這款圖庫資源非常的好用，它可以任意指定不同長寬的圖片當作是示意圖，在網頁開發上所用的假圖非常好用。如下列的示意圖：

2. unsplash.it：這個資源主要適用於開發Prototype的階段或是DEMO給user時所用的圖片工具，較上方的Placeholder.it 較為完整。其使用方法也是在img標籤裡面鍵入一串特定的網址之後，呈現出隨機選取你指定大小圖片。

3. Placeimg：與unsplash.it相同，Placeimg也是一個隨機產生圖片的提供者，除了可以依照大小自動漂亮圖片，也可透過「分類」去尋找你想要的素材，使你在DEMO給客戶時比較美觀。

待續。