Adobe 提供的免費的中文 Webfont 服務,支援繁體中文

中文的字型檔案很大,要做到像英文一樣,有豐富的 Webfont 可以選用是件困難的事情。一些網路服務如 Justfont 、文鼎的 iFontCloud、 華康的威 Font 等,都可以做到即時抓取每個頁面所需要的字型檔案,降低網路傳輸量,再顯示出網頁的中文字型。但這些服務大多都有試用期限的限制,若到期就需要按月或每年繳交年費,對於流量不大的服務或部落格來說,是一筆不小的開銷。 好在今年六月,Adobe 正式宣布旗下免費的 Typekit Webfont 服務也開始支援複雜且檔案龐大的東亞字型,當中也包含繁體中文。最令人興奮的是,與 Google 合力開發的黑體字型-思源字體,也在支援列表之中,也就是說套用之後,網頁就可以自由的運用擁有七種不同粗細大小的美麗黑體,而且免費!不過這個服務不是完全沒有使用限制的,它最多只能支援一個 domain,另外如果你的網站瀏覽量每月超過 25,000 次瀏覽,選用的字體可能就沒辦法正確顯示出來,此時就只能付費升級了。 興奮之下,立刻試著將 Typekit 的思源字體套用到網頁上,果真非常漂亮,網頁終於可以像許多英文網頁一樣,擁有標題和內文明顯不同的兩種字體,

在前端開發利器 Atom 中設定跨平台套件同步

Atom 是由 Github 所推出完全免費的程式編輯器,是替代 Sublime Editor 的好工具,有許多網頁前端開發者是它的愛用者。根據筆者的經驗,安裝 React 套件後,開發 ReactJS 網頁比 Sublime 還要輕鬆很多。 Atom 官方網頁: https://atom.io/ Atom 有提供各種套件供使用者自行選用,然而作為一個開發者,可能在不只一台電腦上進行開發工作,若要每台電腦都分別做設定,恐怕是一件令人頭大的事情。好在有 atom-sync-settings 來幫我們利用 Github 帳號進行同步,解決跨平台開發的煩惱。 安裝 sync-settings 套件 在上方選單按 File -> Settings,叫出設定然後選左方 Install,在 Install Packages 下方搜尋 sync-settings ,再按下藍色的

一目了然的世界同志 (LGBT) 權益資訊視覺化

隨著人們漸漸認識到同志族群的存在,世界各國紛紛給予性傾向與主流族群不同的人平等的權利,讓少數人不再需要生活在恐懼以及壓抑之中。 但各國推動平權的腳步不一,雖然有 20 多國已經通過同性婚姻,還有許多國家的同志族群每一天是生活在不安之中,甚至生命受到威脅。 人權沒有國界,英國衛報(thegardian)在 2014 年與 AllOut 等多個全球性的同志團體合作,在國際反同日推出了一份非常清楚簡單的世界同志權益資訊視覺化。 要把上百個國家的各種權益很清楚做呈現,是超極大的挑戰,而衛報(thegardian)的圖表設計的非常成功,使用者可在這張上輕鬆地做探索,滑動到不同國家,並與其它國家區域做比較(可惜的是台灣沒出現在調查範圍裡)。你可以在這張圖裡面發現亞洲和非洲對於同志權益的保障最少,而歐洲則有較完整的制度面保障。 五種權益配合地理資訊清楚呈現 圖表以半圓形的方式並按五大洲來排列各國,滑動到不同的角度,中間的地圖還會很貼心的標出該國在地圖上的位置。在 LGBT 權益的部分,則分成同性間合意性行為(Consensual sex)、工作反歧視法(Workplace non-discrimination)、同性婚姻(Marriage)、收養(Adoption)、反歧視法保障(Protection against hate

美國各州同性婚姻資訊視覺化

2015年6月27日,美國最高法院以5票同意4票反對,裁定「禁止同性婚姻」違憲,等於宣告同性婚姻全美合法,各州再也不得拒絕發放結婚證書給同性伴侶。 從荷蘭成為世界第一個通過同性婚姻的國家開始,美國經過漫漫長路,先是「各州」陸續通過,終於在2015年經過大法官的判決,全國所有州都享有婚姻平權,成為第21個通過同志婚姻的國家。 各家媒體也為了這個議題,做出資訊視覺化圖表,讓大家更加理解美國推動婚姻平權艱辛的漫漫長路。 美國各州同性婚姻互動時間軸年表 LA Times 做了一個非常清楚簡單的互動時間軸年表,透過一張圖配合時間軸滑動就可以清楚瞭解到各州對於同性伴侶權益保障的程度。 這張互動式圖表不僅只有呈現通過或不通過而已,通過與完全禁止之間,同性伴侶如異性戀伴侶享有法律平等保障的程度以黃色(最低)到深紫色(最高)來表示,最低到最高分別是: 州憲法禁止同性婚姻以及其他權益 州憲法禁止同性婚姻 法律禁止同性婚姻以及其他權益 法律禁止同性婚姻 法律沒有禁止(但也沒有允許同性婚姻) 有同性伴侶法(Domestic Partnerships,但權益較異性戀婚姻次等,保障程度各州不一) 擁有較多保障的同性伴侶法 承認其它地區締結的同性婚姻(這州本身還未通過) 同志民事法律結合(Civil Unions,接近婚姻,但各州保障程度不一,

NVM 切換不同版本的NodeJS,無痛安裝 NodeJS

先安裝 NVM 會用到的 Packages (Ubuntu) sudo apt-get update sudo apt-get install build-essential libssl-dev 若在 Mac OSX 上面,有安裝 XCode 即可進行接下來的步驟。 若使用 Windows,可以試試看 https://github.com/coreybutler/nvm-windows (非 nvm 官方 Package) 安裝 NVM curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.25.3/install.sh | bash 最新版本可以上: https:

在 Ghost 部落格中加入程式碼標記 - 使用 Prism

如何在 Ghost Blog 中擁有上圖程式碼標記和顯示的功能呢? 試試看 Prism.js,不僅設置簡單,各類程式碼支援非常完整,連 ReactJS 的 JSX 都有支援,而且檔案極小,有多種主題可以做選擇,並可以針對自己的需求選取會用到的語言,縮短網頁讀取的時間。 根據需求客製化Prism 進入到 Prism 官網的下載頁面後,可以根據自己的需求選取主題和語言,若沒有要做進階的客製化調整,最上方選取預設的 Minified version 就可以。 選取主題和支援語言 標記程式碼的主題,一共有六種,可以透過網頁右方的按鈕玩玩看不同的主題,並圈選其中一個。 下方則有提供支援語言的選取,可以看到支援的非常豐富,選取自己可能會用到的就好,避免拖慢網頁載入速度太多。 選取外掛功能 Prism 標記功能還有各種附加的外掛可以使用,圈選出程式碼中最重要的幾行 code 的 Line Highlight 功能,根據你的需求挑選附加功能即可。 選取完成後會算出最後生成的 CSS + Javascript

Babun 省略安裝 Cygwin 的痛苦

在 Windows上開發應用很痛苦?太多Unix的命令不能用? 試試看Babun吧,不像Cygwin必須要逐一選取重要的套件,它是一鍵安裝的免費Windows Shell,會幫你一次安裝好常用的套件,讓你可以在Windows上使用Unix指令。 連結: http://babun.github.io/ Babun的特色 預先配置好的Cygwin 自動更新 整合了oh-my-zsh 提供類似apt-get的工具: pact 下載連結 http://projects.reficio.org/babun/download 安裝方法 下載後解壓縮,執行install.bat,即開始一鍵安裝 設定按右鍵顯示選單而非貼上 Babun預設在視窗中按右鍵會直接貼上,如果不習慣的話可以在視窗上方按右鍵 -> Options,叫出設定,然後在Right click ation那邊改成Show Menu即可。