# gitconfig Mac gitconfig path
~/.gitconfig [user] name = tedshd email = tedshd@gmail.com [alias] st = status co = checkout br = branch d = difftool [color] diff = auto status = auto branch = auto ui = auto [credential] helper = osxkeychain [push] default = simple [core] editor = vim [diff] tool = vimdiff [difftool] prompt = false vim diff
git d terminal
git diff
...
# CSS attribute ## 顏色與背景 color: background-color: background-images: background-repeat: no-repeat repeat-x repeat-y repeat background-position: center background-attachment: fixed scroll; background: url() left center no-repeat; ## 文字 text-align: left right center vertical-align: top bottom text-top text-bottom middle baseline super sub line-height: letter-spacing: (字距) word-spacing: (單字間距) text-indent: (首行縮排) font-family: font-size: font-weight: 100~900 font-style: italic oblique text-decoration: underline overline line-through none text-decoration: blink 文字閃爍(部分瀏覽器有用) text-decoration: line-through 刪除線 text-decoration: overline 文字頂部加線 text-decoration: underline 文字底部加線 text-decoration: none 沒有改變 ## 區塊 margin: padding: border-color: transparent border-width: border-style: solid double dotted dashed inset outset groove ridge width: height: vertical-align: middle ## 編排與顯示 float:left right clear:left right both position:relative absolute fixed top: left: right: bottom: z-index: display: block inline-block none inline visibility: hidden visible overflow: hidden scroll auto ## 條列項目 list-style: none disc square ## 其他 cursor: pointer crosshair wait help text move ## 虛擬樣式 :link 當文字或圖案是連結時 :hover 當滑鼠指標移到連結文字或圖案 :avctive 當滑鼠按下連結文字或圖案 :visited 當連結已經點過時 :focus focus :before { content: ""; } :after { content: ""; }
...
# Tip about CSS ## clearfix 為了清除浮動
.clearfix { *zoom: 1; } .clearfix:after { display: table; content: ""; line-height: 0; clear: both; } ## padding-right or bottom & margin-right or bottom 如遇 model box 問題盡可能在右或下做修正(因為 XY 是朝右下發展) 避免用到 top 盡量用 bottom
## scroll bar 在 windows 中，scroll bar 的寬是 16px
## a & img 在用 a 包覆 img 時會發現一個現象就是就算把 a 用 block 設定寬高設成跟 img 一樣還是會發現滑鼠在要從圖片下面移進圖片會發現進去前會有約 2px 的空白滑鼠就先變成有連結的狀態，經過詢問後發現是因為 img 的關係，img 本身會有一點高度在bottom，所以如果要去掉這高度有一些作法
...
# HTML Design Pattern ## 語意化(影響 SEO) ## 去 CSS 還可維持可讀性 ## 去 JavaScript 頁面還能 work -> 現在較不適用 ## 避免樣式標籤 <!-- not recommended --> <b></b> <i></i> <!-- use --> <strong></strong> <em></em> ## 避免將 style 寫在 HTML tag 上 ## 善用標籤以維持可讀性與語意化 ## 網頁上的載入圖片做適當的選擇 會變動的圖片以 <img src=""> 呈現 幾乎不會變動或重要性要低的圖片適合以 background 呈現 適當的利用 CSS sprite
...
# Vim More
a 輸入文字
i 插入字元
o 新增一行
:wq 儲存後離開
:w 儲存
:q 離開
:q! 離開不存檔
:w! 儲存 readonly
Esc 離開編輯模式
h 左
j 下
k 上
l 右
v 選擇
yy 複製整行
nyy 複製n行
yw 複製游標到單字結束
nyw 複製游標到n個單字結束
p 貼上
d + <- 刪除游標前一個字元
d + -> 刪除游標後一個字元
d + up 刪除游標所在和前一行
d + down 刪除游標所在和後一行
dd 刪除游標所在那一行
dw 游標停在某字第一個刪此字 停在字中刪後面的字
x 刪除游標所在字元
X 刪除游標所在前一個字元
nx 刪除游標所在n個字元
...
# text ellipsis div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 240px; } ## Tip 上述為必要 element 必須為 block 如用在 span 等行內元素，需用 display: inline-block; 多行會變一行顯示
...
## File Upload # Server side setting ## php.ini in Mac
/etc/php.ini file_uploads = On upload_max_filesize = 10M post_max_size = 10M file_uploads # 預設為on,允許用HTTP協定上傳 upload_tmp_dir # 上傳檔案暫存目錄,wamp5中,c:/wamp/tmp upload_max_filesize # 上傳檔案最大值 post_max_size # 利用 post 傳送數據所用最大值(利用 AJAX 或 post 上傳會有影響) max_execution_time # PHP執行時間最大值,預設為30秒 # style 由於預設的 <input type="file"> 樣式不好改，且每一個 broswer 預設的樣式都不一樣，所以都會希望用統一化的客制化樣式，但基本上不太可能把它的樣式改成所想要的客制化的樣式，除非直接用像 Bootstrap 之類的框架
## solution 1(hack) 把 <input type="file"> 的 style 設成 opacity: 0; 蓋在客制化的 button 上，也必須要設成跟客制化寬高一樣，以免覆蓋面積不一樣
CSS .btn, .file-select { width: 80px; height: 30px; } .
...
# command ## User su / sudo # 最高權限使用者 su -u <user name> bash # 切換使用者 exit # 跳出最高權限使用者 shutdown # 關機 shutdown -h now 立即關機 shutdown -h +m m分鐘後關機 shutdown -h hh:mm 幾點幾分關機 reboot # 重開機 login # 登入使用者 logout / exit # 登出 passwd # 修改密碼 useradd / adduser # 新增帳號 passwd # 修改密碼 sudo -u <user name> <shell> # 切換使用者 date # 顯示時間 date 月日時分(root修改) history # 顯示輸入過的指令 ps # 顯示目前執行的工作 chmod <777> # 修改權限 # rwx # 2*2 2 1 chown <user>:<user> <file> # 修改該 file owner uname -a # 確認 system OS uanme -r # linux kernel df # 確認硬碟空間 ## File Management ls # 列出檔案 ls -a 列出以.
...
# function account captcha validation use bootatrap model # result captcha fail captcha ok backend check account success fail(not exist) # method ajax # mockup link
# flow click forget password show model enter account & captcha(validation from js not null) submit(ajax) account fail(from backend) -> show message captcha fail(from backend) -> show message success -> show message
# flow(detail) 點擊忘記密碼 秀 bootstrap model 輸入帳號與驗證碼(利用 validation 作必填的檢查) 用 ajax 的方式送出
...
# modulize modulize selector var module = $('body'); module.on('click', 'a', function() { // dosomething... }); initialize if ($('body').length) { // dosomething } # selector id is better than tag and class
HTML
<div> <ul> <li id="id" class="class">text</li> </ul> </div> JavaScript
$('#id').html(); $('body').find('#id'); jsperf
##bind event use on bind on parent selector
$('ul').on('click', 'li', function () { // dosomething }); js Bin
...