分類彙整:Programming

Start/Stop/Restart Apache in Terminal (Mac OSX Lion)

想要開啟 Mac OSX Lion 內建的 Apache 的話,首先請打開「系統偏好設定」->「共享」->「網頁共享」,之後就可以透過 Terminal 開、關、重開 Apache 了,開啟或是關閉之後在「網路共享」要看到最新狀態的話,點到其他的項目再點回來就會看到到底 Apache 有沒有打開。

在 Terminal 底下啟動 Apache 的指令:(以下指令輸入之後都需要再接著輸入 root 密碼)

sudo apachectl start

關閉 Apache:

sudo apachectl stop

重開 Apache:

sudo apachectl restart

PS. 如果沒有開啟網頁共享就直接在 Terminal 底下開啟 Apache 的話,會發現放在 /Users/[使用者名稱]/Sites 跟 /Library/WebServer/Documents 底下的檔案瀏覽器都抓不到…網頁共享一定要開著才抓的到…聽說是因為 Mac 的 Apache 跟正常的 Apache 不一樣關係…Apple good job…Orz

CSS And SEO Small Tips

CSS

  • 只出現一次的就要用 ID。
  • double class 是指同一個 DOM element 下了兩個 class,應該改用 sass mixin。
  • 會有 id 恐懼症表示對目前的網頁結構沒有概念,應該是實作不夠,什麼東西該出現一次應該是在寫 html 時就想好的。寫網頁,應該是在腦中已經有了個概念,一次將 html 架構出來再用 css 來調版面。
  • 記得所有用文字的 img 一定要再加文字上去,舉例來說,地址可以用 img,但是其實他是文字說明公司地址,所以應該是用 p+內文 然後隱藏。 最後用背景圖片顯示比較漂亮的字型。

SEO

  • 不要忘了 html 只是文件結構而不是讓你好排版的架構。 想想你這份文件想表達的是什麼東西。 最簡單的方法就是當你 css 拿掉時這份文件對人們來說是否還有意義。
  • 基本上在前端命名統一都用 dash。其實 dash, underscore, camel case 都是合法的使用方式。 有一說法是老舊的瀏覽器不支援 underscore as css selector。 不過現在市面上常見的瀏覽器都有支援了。 但你看看各大 library 的命名方法。 都是用 dash(hyphen),這背後一定有他的設計理念。至於 url、img、css、js 等等的檔案命名用 dash 對 seo 有幫助。this-is-an-img 對搜尋引擎來說是 this is an image,this_is_an_image –> thisisanimage。

重新命名 Git Branch

假設現在有兩個 branch, master 跟 old-branch ,目前在 master ,想要把 old-branch 的名字改成 new-branch 的話,請輸入:

git branch -m old-branch new-branch

如果現在已經在 old-branch ,想要直接把名字改成 new-branch 的話,就輸入:

git branch -m new-branch

這樣就搞定了 😛
ps. 因為剛開始學,現在只能分享基本指令抱歉啊哈哈哈XDD

讓 Git Case Sensitive

最近剛開始學怎麼用 Git 跟 Github,用著用著發現一件事,為什麼我本地端檔案的檔名都改成小寫了,但 Github 上面的檔名都還是原本的狀態咧!?

Stackoverflow 查了一下之後發現,原來預設的設定是 case insensitive ,但要變成 sensitive 的話要怎麼做呢?

很簡單 ,有幾個方法:

  • 用文字編輯器打開 .git/config ,找到 ignorecase = true ,然後把 true 改成 false 就可以了,如果沒有找到這行,就自己在 core 那個區塊裡加一行 ignorecase = false 也可以達到一樣的效果。
  • 進到要修改的資料夾,在 terminal 輸入 git config core.ignorecase false ,可以讓目前的 git repository case sensitive。

 

延伸閱讀:
How to make git ignore changes in case?
Git – change case of a file on windows?

增進 CSS 效能、解 IE hack 的 Tips

最近又開始重新練習純用 HTML 跟 CSS clone 簡單的網頁,但過程當中遇到一些問題,以下是整理出來的筆記,感謝 Ben 過程當中的指導。

CSS 屬性排列, 一致, Reset, 效能, id 與 class 標記原則

  1. css 屬性先後基本上沒差, 除非重複宣告, 後面的就會複寫掉前面的, 但有些公司會要求要按照字母順序排列, 以方便查找屬性跟方便多人維護, 看公司要求或是個人習慣
  2. 為了讓 css code 好看好維護, 括號, 空格要一致
  3. 如果顏色要用三個數字, 就統用三個數字, 不要一些用三個一些用六個 ex. 不要有些用 #555 有些用 #555555
  4. css 一定要 reset, 不然跨瀏覽器會死人, 記得用 HTML5 的版本(因為 HTML5 有些新標籤)
  5. reset 裡的東西要仔細看. 很多不是標準的東西要刪掉, 或是和 reset 沒相關東西放在別的檔案, 如果 clearfix 已經在 reset 裡面了, style 裡就不要重複
  6. header 裡一定要有 h1, style 不要直接下在 header
  7. 盡量下 id, class, 不要用 div > div 這種東西, 不好了解效能也差
  8. id, class 前不要加 tag ex. h1.logo –> .logo, div#main li .subtitle –> .subtitle, 能短盡量短 ex. div#main li a –> #main a –> .main_list_link
  9. 頁面上應該唯一存在的東西就用 id 標記, 一個網頁應該只會有一個 logo, logo 就可以用 #logo 標記, nav current 只會有一個所以改用 id
  10. 要注意一個 element 不要下超過一個 class, ie6 吃不到. 應該是用 sass mixin 寫法比較好

url 的絕對路徑與相對路徑, 加引號與不加引號

  1. img, css, js 用絕對路徑不要用相對路徑 ( 要完成這些請愛用 Middleman )
  2. background img 的 url 要加雙引號, 為了安全

Float, Inline Elements and Block Elements

  1. float 一定要跟著 display: inline, 不然在 ie 會有 double margin 問題
  2. 別在 inline element 下 margin, padding, 除非有下 float
  3. li 用 float 比較好調整 style, inline element (display: inline;) 要調整 style 會比較麻煩(float 會把 inline element 轉成 block element)
  4. a 轉成 display: block; 點擊區域比較大, 也比較好下 style. 總之 inline element 就是個邪惡的東西. 非常不好調整 style.
  5. a 裡面只能有 inline element, 所以不能放 h2 (block element), 要 h2 > a
  6. img (預設是 inline element)跟下面的有一個小縫隙, 這會隨著瀏覽器不同改變. display 改成 block 就不會有縫隙了
  7. display: block 比較常用在解一些 bug, 像是 img bug 等等. 也有因為要讓 link 變大一點比較好點到(nav menu 之類). 要在 inline element 裡面用 line element 偽裝成 block element, 主要也是要撐開 element 作 styling, ex. ul > li > a > span <— 這時 span 就可以用 display:block 來撐開. 因為你不能放 div 在 a 裡. display:inline 基本上只用在 float element hack. 或是你真的像讓某 block element 偽裝成 inline, 不過非常少見.

Padding, Margin

  1. 能用 padding 就不要用 margin, margin 在 ie 比較會有無法預期的錯誤. 基本上 margin 拿來置中就好
  2. 同一個 element 盡量不要同時用 margin 和 padding
  3. margin, padding 盡量用 margin: 8px 0 0 10px 這種寫法, 四個數字分別代表 “上, 右, 下, 左”, 能用 0 表示的時候不要用 0px

Cross Browser

  1. 盡量不要用 :first-child, :last-child 是因為不是所有瀏覽器都支援, 不用 .first-child 是因為 server-side 要 generate content 要下判段式, 所以如果能用簡單的 css 解決, 當然最好

其他

html5 ie hack 請加上下面這段(加在 head, 而且為了更好的效能請加在 css 檔的後面)

<!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

有用 Zen Coding 嗎? 沒有的話一定要用一下! 可以讓寫 code 的效率大增!

另外記得用 .gitignore 把不想 commit 進去的東西列出來.gitignore 要放在 project 根目錄

Install Zen Coding Plugin for Sublime Text 2

由於 Zen Coding Projects 沒有提供官方的 Sublime Text 2 外掛,所以在官方網站沒得下載…但目前可以透過其他方式,安裝步驟如下:

  1. 安裝 Package Control
  2. 重開 Sublime Text 2
  3. 打開 Package Control 視窗(Preference>Package Control)
  4. 輸入 Package Control: install package (“Package Control:"應該會打開的時候已經被輸入。),然後按 enter
  5. enter 完之後會出現一個視窗,在輸入框中輸入 zen ,這時候應該會看到選單裡面有 Zen Coding 的選項,選"Zen Coding"(直接 enter 或是用滑鼠點選都可以)
  6. 重開 Sublime Text 2

已經安裝完了,請開一個 index.html ,然後輸入 header>h1>a[href=#]{Hello Zen Coding}*4 ,在此行最後面按一下 Tab ,就會看到剛才那行變成以下的 code

<header>
<h1>
<a href="#">Hello Zen Coding</a>
<a href="#">Hello Zen Coding</a>
<a href="#">Hello Zen Coding</a>
<a href="#">Hello Zen Coding</a>
</h1>
</header>

PS.後來得知,理論上, Textmate Bundle 也是可以安裝在 Sublime Text 2 的,有興趣的也可以試試看 😛