2016年10月20日

[資源] 適合打 code 時清楚簡潔的字體選擇---Fira Code


認識 PJ 的人應該都知道,PJ 在寫 code 的時候,很重視編輯器撰寫時視覺上舒適的感受,總覺的畫面好看的編輯器打起 code 來就是比較舒服,用起來就是比較開心。

最近在網路上發現了一個免費字體 Fira Code ,一開始使用的時候,還覺得有些字體變得好像有襯線的感覺而不太習慣,但嘗試一下子之後,發現這個字體非常的清晰易讀,對於每天在碼海中的工程師們非常合適,可以來嘗試用用看!

下載網址:https://github.com/tonsky/FiraCode

目前大多數的編輯器(Atom, Brackets, VSCode)都有支援這款編輯器的連字功能(ligatures), sublime text 目前雖然還沒有支援這款編輯器的連字功能,但一樣能夠套用字型到編輯器當中。

Sublime Text 使用方式


下載並安裝

首先,到FiraCode的 Github 頁面下載字體,在下載的檔案中包含 ttf 的字型資料夾檔,打開並根據所屬的作業系統將字型檔安裝在作業系統上。

套用於 sublime

打開 Sublime Text 後進入 Preference --> Settings

這時候一般會同時開啟兩個視窗,左邊的是 Default , 右邊的是 User。


我們要在 User 的設定檔中新增一行 "font_face": "Fira Code",,如下圖中第四行所示:


存檔後,應該就可以順利將字體套用上去了。

如果你也很在意編輯器好不好看,視覺上舒不舒服的朋友們,也可以下載來試試看!

2016年10月10日

[資源] 假圖產生器 Fake Image Placeholder



再製作網頁的過程中,常常會有一些版面的位置可能是已經知道圖片的大小,但是設計師還沒有把圖切好給你,這時候空一個位置在那不僅不方便我們看整體版面的配置,在美觀上也常常給人一種未完成品的感覺。

這時候,你可以用簡單方便的假圖產生器快速生成一個圖,先把圖放在版面上,之後等實際的圖片切好之後,再把完成的圖置換上來就可以了。

假圖產生器網址:http://fakeimg.pl/

使用方式


使用方法非常的簡單,只需要在 http://fakeimg.pl/300x250/ 標住顏色的位置更改為想要的尺寸就可以了。


更改顏色

如果你覺得灰色太過單調,你可以在網址後方多帶一些參數,就可以達到換色的效果,例如: http://fakeimg.pl/440x320/282828/EAE0D0/ ,其中第一個參數是給背景色,第二個參數是給文字顏色(也可以不給),結果如下圖:


更改文字內容

同樣地,如果你想要更改文字內容,也可以透過給予參數的方式來更改,像是 http://fakeimg.pl/440x300/282828/EAE0D0/?text=PJCHENder ,或者如果不想改顏色,只想改文字的話,可以輸入 http://fakeimg.pl/440x300/?text=PJCHENder 也可以。


非常的簡單好用,利用這個簡單的小功能,從此不用在自己製作假圖,相信也將節省很多開發上的時間。

假圖產生器網址:http://fakeimg.pl/

這個功能也有開發 sublime text 的 plugin ,安裝後只要在 sublime 中打"fakeimg" 就會產生對應的連結網址了!