CSS 奇技淫巧十八招

開始覺得自己會寫 CSS 也算有一段時間了,常常遇到一些非常實用的技巧不斷地反覆使用,但是有不少是我個人覺得對初學者來說很難從樣式作用上自己發現可以如此的用法。
例如border-radius: 50% 現在已經成了大家隨手都會用來搓圓仔的標準寫法了,但我一開始也是不知道可以這樣直接設百分比從正方形變成圓形。
正好最近在教人學習 CSS ,把這些技巧整理下來分享,也方便自己備忘參考。
繼續閱讀 CSS 奇技淫巧十八招

tig ── git 的命令列好夥伴

tig
tig

一直以來我在會用到 git 的機器上都會裝 tig ,但也只是用到閱覽 commit 的用途,直到最近看到有 .tigrc 這種東西,再看了一下別人的設定用法,這才知道我根本不會用 tig,也才發現原來 tig 可以用來補足 git 那麼差的使用體驗。
繼續閱讀 tig ── git 的命令列好夥伴

CSS 分散對齊橫列選單項目

在打造網站版面時,有時候為了美觀因素,在網站的主選單會把項目內容分散對齊,讓視覺重心看起來比較平衡。

<nav class="__wrapper">
  <h2 class="__hidden">主選單</h2>
  <ul class="__inline" id="menu">
    <li>News</li>
    <li>Projects</li>
    <li>About</li>
  </ul>
</nav>
.__wrapper {
  width: 960px;
  margin: 0 auto;
}
 
.__hidden {
  display: none;
}
 
ul.__inline {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
 
ul.__inline > li {
  display: inline-block;
}

以上是一個基本的主選單內容,要達成這個目的,以 CSS 一般來說有以下三種作法:

繼續閱讀 CSS 分散對齊橫列選單項目

Fedora 20 “Heisenbug” 與台灣社群支援站

Fedora 20
Fedora 20

Fedora 20 不負一再延期的優良傳統,在比最初的預定發行日期晚了一個月後,總算於12月中順利釋出。
這次台灣社群在1月初也和往常一樣在台北舉行了 Release Party,我在活動上終於把延宕多時的台灣社群支援站公開上線。
繼續閱讀 Fedora 20 “Heisenbug” 與台灣社群支援站

Git hooks 的執行腳本管理

Git hooks 是 git 在開發流程上很有用的機制,以其中的 pre-commit 來說,最為人熟知的用途就是在 commit 前自動執行測試,以檢查新增的內容是否有缺失。此外還有其它促進團隊協作的用法,例如檢查 commit message 是否合乎規定的格式,或是禁止直接 commit 到 master branch 等等。
繼續閱讀 Git hooks 的執行腳本管理

Mozilla Summit 2013 in Brussels

Mozilla Summit 2013 in Brussels
Mozilla Summit 2013 in Brussels

繼去年有幸去參加在新加坡舉行的 MozCamp 後,今年也得到了參加 Mozilla Summit 的機會,這次一共在 Brussels、Toronto、Santa Clara 三個城市一同盛大舉辦,而且我還很幸運改抽到了去布魯塞爾,到歐盟首府去開開眼界。
繼續閱讀 Mozilla Summit 2013 in Brussels

使用 git subtree 來分拆子目錄成獨立的新 repo

以往要達到分拆子目錄成新的 repo ,就像這個問題在 Stack Overflow 上原本的解答那樣,得用上 git filter-branch 跟一堆繁複的流程才能達成,不過後來有人寫了 git-subtree來專門處理這件事,由於這個功能似乎太常被用到,所以在 git 1.7.11 以後就有內建這個模組了(但是不一定有裝上去),現在使用 git subtree 指令可以很簡單地把單一資料夾相關的 commit 都抽出來。
繼續閱讀 使用 git subtree 來分拆子目錄成獨立的新 repo

Add-on SDK 已經整合進 Firefox

Firefox 在 22 已經整合了原先的 Add-on SDK,各個模組都已包含在 Firefox 裡,並將過時的 API 一併廢棄,也因此之前使用 SDK 開發的套件都必須使用 1.14 版重新打包,目前還沒有下一代 SDK,只能繼續使用原先的 1.14 版來開發。

Firefox 23 開始 SDK 團隊繼續增添改進,新的功能如終於可以自訂 Panel 出現的位置,不過由於 SDK 還沒有新版,包含這些新功能的文件就只能在線上翻閱了。

Dictionary Panel
Dictionary Panel

既然可以自訂 Panel 的位置,我就順手將這個功能加到 Dictionary Panel 上面,並使用 simple-prefs 模組來提供選項切換,只需要簡單的修改就完工了。