個人把這段時間稱為「放生期」。這現象還蠻奇妙的,出社會前不曾想過會有這種情況,明明身處其中卻又像是隱形的存在一樣,除了說「真的很妙」外我還真心想不到太多形容詞。
不過人生會發生什麼事有時候也不是自己能選的,往好處想:至少有段空檔能思考近況然後投資些不同事情的時間,其實也不壞。
最後決定重新練習一下之前唸完沒機會用然後就忘的一乾二淨的CSS,近年因為前端和UI相關技術聲勢大漲的原因,網頁技術成了一種基本門檻,雖然我到現在還是不曉得究竟網頁技術和UI設計有什麼關係,但學會總是不吃虧。
說不定還有可能從遊戲開發這個無間地獄解放出來,但對這個圈子的心得有點難整理,也許留待後話吧。
目前開發網頁的工具而言雖然大部份還是使用Dreamweaver,不過因為前端用到JavaScript、後端用到PHP之類的語言,加上Dreamweaver在程式編輯和預覽的部份有些缺陷一直跟不上時代,身邊走這行的朋友慢慢都轉而投向比較純粹的程式編輯器。
一方面也是因為喜歡不同工具帶來的新鮮感,所以稍微搜尋了一下。
目前這方面的主流似乎是Sublime Text,之前玩的Visual Code也是類似的設計,沒有太多額外的功能,特色便是同樣的輕便單純,而且提供安裝客製化的外掛以強化原本較為陽春的核心,進而打造出偏個人化的Coding環境。
但Sublime Text下載來用了一陣子後覺得… 介面實在蠻陽春的,當然這種工具本身就是以簡單為主,要什麼都作到的話整個IDE難免就會像Visual Studio那麼誇張,也就不是太易用了。
Sublime Text3 |
另一個是雖然可以更換佈景,但只會影響到編輯頁而已,側欄部份基本上就維持一樣的色系,雖然可以把側欄的部份收起來,但強迫症如我總是覺得哪裡不對勁。
後來再搜尋相關工具的時候意外找到原來Adobe也有製作一款叫作Barckets的編輯工具(是說那為什麼不把Dreamweaver也整修一下…),整體看上去和前述的Sublime Text相似,而且網路上有提到的文章大多也一片好評,所以就跟著下載來玩玩看。
安裝完成後,初次啟動會打開一頁Getting Started,簡介Brackests是個什麼樣的東西。
Brackests Getting Started頁。 |
我下載的Brackests是1.8版,在網路上雖然有提到先前的版本沒有中文化,不過這版已經有了,安裝後可以在「除錯」的項目中找到「切換語言」的選項。切換語系後除了介面所有選項都會轉換成繁中外,包括原本的Getting Started也會跟著換成中文,個人覺得還蠻細心的,而且用詞還挺活潑有趣的。
繁體中文語系切換。 |
雖然Brackets如同其它編輯器也支援一眾多到滿出來的語言,不過目前看起來最大的特色及用途還是用於網頁開發上。
Brackets所支援的語言。 |
最重要的是它擁有即時預覽的功能,除了Google Chrome外,只要在選項中開啟「啟用實驗版即時預覽」,也能開啟Firefox來預覽。
和Dreamweaver相似,只要在原始碼中指定到某個區塊,即時預覽的頁面也會以閃一下爍底色來回應,能很容易知道目前編輯的區塊是影響哪個部份。
即時預覽功能按鈕。 |
顯示<p>標記的區塊範圍。 |
另一個很不錯的特色是只要在對應的tag上按ctrl+e快速鍵,就會拉開一個這樣的視窗,可以在色盤中快速調整需要的顏色或透明度,系統也會直接修改原始碼,不用再拼貼一次。
快速編輯面板 |
CSS在語法上需要輸入提示的時候,以色碼來說Brackets會有個簡單的標示,像background-image的話也會在syntax中彈出像url()之類的提示,Sublime Text就好像沒有了(但不曉得是否能透過套件強化)。
color參數提示 |
開啟套件管理頁面的按鈕。 |
好像是因為我安裝了Tab相關的套件,所以原本位於右側的功能鍵被移到底下去了(紅框處),點擊可以開啟套件管理的視窗。這部份不曉得如果未來像官網那樣,在右側因新增功能而增加按鈕時,整體版面會不會因此有所衝突,不過目前就先這樣了。
Brackets的套件管理不像Sublmie Text要再作額外的設定,本身就已經視覺化而且相當清楚,在各分類中可以看到對應的內容並管理,如果要安裝的話,只要在選項欄位中貼上套件安裝網址,或是在GitHub下載套件後開啟Brackets→說明→ 顯示擴充功能資料夾,然後將檔案拖放到User資料夾中重開就行了。
Brackets套件管理頁面。 |
不過套件管理功能的開啟比較慢一些,稍微瀏覽了一下在數量上也比Sublime Text來得少。
目前有使用的相關套件:
Shizimily Multi-Encoding for Brackets
Brackests不支援UTF-8之外的編碼,Sublime Text 似乎還是可以開啟的,但Brackests會直接彈出錯誤然後拒絕。可以透過安裝這個套件來解決。
Brackets Extension-UTF8 converter
Sublime Text也有的語系轉存用套件。
可以將現有文件作語系轉換。 |
可以快速生成HTML、 HTML5等基礎框架,方便快速開發。
HTML Templates可以選擇基礎框架。 |
Custom Work:Tabs-Custom Working
Brackets沒有分頁功能,可以用這個套件開啟相關的功能。
開啟分頁功能。 |
換佈景裝逼用,對個人開發實力及速度和經驗完全沒有任何關聯,但就是爽。
Themes for Barckets提供不少佈景可選。 |
*
基礎的安裝、調整和相關的外掛參考:
MUKI SPACE:我的 Brackets 編輯器設定 (佈景與外掛)
YAO WARK:Brackets 網頁開發軟體
*
使用到現在雖然是個人感覺,Brackets視覺上顯得較為一體化,從編輯區到側欄、切換頁面的彈出視窗以及功能列都是同一個色系,不會看起來一塊一塊的。
整體在設計上比較沒有那麼偏程式人員,介面和彈出視窗等動畫上甚致還有安排緩衝動畫,這點用心讓我還蠻喜歡的。
沒有留言:
張貼留言
路過留個言