# 瀑布流(Pinterest-style) layout 目前看見 3 種作法
jquery plug in salvattore.js CSS3 column # jquery plug in ## Masonry 一款較多人使用的 jQuery plug in, 可向下相容到 IE8 Masonry
## Grid-A-Licious jQuery plug in, 向下相容到 IE9 Grid-A-Licious
# salvattore 利用 data attribute 來達到 CSS3 column 的效果 獨立運作的 js 不必依靠其他的 js library 輕巧快速 向下相容到 IE9 salvattore 不過沒 CSS 所以要加入 CSS 以便讓版面順利出來 已修改的 salvattore CSS source code(可依需求進行修改)
@-webkit-keyframes showsup { from { opacity: 0; -webkit-transform: translate(0, -20px); } to { opacity: 1; -webkit-transform: translate(0, 0); } } @-moz-keyframes showsup { from { opacity: 0; -moz-transform: translate(0, -20px); } to { opacity: 1; -moz-transform: translate(0, 0); } } @-o-keyframes showsup { from { opacity: 0; -o-transform: translate(0, -20px); } to { opacity: 1; -o-transform: translate(0, 0); } } @keyframes showsup { from { opacity: 0; transform: translate(0, -20px); } to { opacity: 1; transform: translate(0, 0); } } .
...
# Coding Style ## 條件判斷 在 PHP & JavaScript 中有許多邏輯判斷 當有許多條件要去檢查時, 一般來說就是用 if 一直寫下去 最後就造成下面的情況(以 PHP 為例)
if ($a === $b) { if ($c) { if ($c >= 10) { if ($d) { // do something // ... } return; } return; } } 這樣下去就沒完沒了, 而且縮排會越來越多, 要看 code 也很不方便 所以假如就已作條件檢查來說 可以用以下的做法
// check condition 1 if ($a !== $b) { return; } // check condition 2 if (!$c || $c === '') { return; } // check condition 3 if ($c < 9) { return; } // check condition 4 if (!
...
# Place on and embed code from internet We can use cdnjs or some library sites embed js or css. But How can we embed our code from internet? I have 2 ways.
## GitHub If you can use GitHub Push your code to GitHub Wtach code on GitHub Find Raw and click it. open code like
https://raw.github.com/tedshd/jQuery_scroll_to_top/master/javascripts/scroll_to_top.js and then delete . after raw like
https://rawgithub.com/tedshd/jQuery_scroll_to_top/master/javascripts/scroll_to_top.js Embed it finally.
...
# JavaScript - design pattern ## 避免與減少全域變數(global variable) 全域變數非常方遍使用, 但使用的不好會使 JavaScript 有問題 因為有可能重複使用且有可能別的 library 也有用到該名稱 在 JavaScript: 優良部分 書中提到可用物件的方式包起來
var GlobalObj = {}; // 開始定義 GlobalObj.var1 = 'string'; GlobalObj.arr = [1, 2, 3]; ... // or var GlobalObj = { var1: 'string', arr: [1, 2, 3] }; 使用 閉包(Closure) 也是一個避免全域變數的方法
...
# Git Doc 中文導讀
LearnGitBranching
...
# Effeckt.css demo
上面頁面都是利用 CSS3 的 Animations 與 Transitions 效果做出來的
GitHub
使用該 library 須載入 Modernizr 這個 library Modernizr 是用來判斷 browser 是否支援 HTML5 or CSS3 所用的 library, 並能把相同功能但在不同 browser 實作的 API 或 CSS3 property 一致化
主要是透過添加 class or data attribute 的方式, Modernizer 就在其中做了整合各 browser 的事情
## How does it work 動畫部分是利用 CSS3 的 Animations 與 Transitions 至於事件的觸發是利用 CSS3 Transition Events, 由於各個 browser 實作都不一樣, 所以這裡加載了一個 /js/demo/demo.js 的 js, 但在這 js 有個有趣的地方就是有用 ajax 去載入開發者名單, 所以就另開個 js 來載入
...
# onbeforeunload onbeforeunload 是在 browser 在轉換頁面時會觸發的事件 當有 return 值時, 會出現 confirm 視窗, 並停住觸發的行為 目前試過會觸發的行為有
上一頁 / 下一頁 重新整理 關閉視窗 前往其它 URL submit 事件 URL 改變時 這幾種較常見 用法如下
var fun = function () { return 'Exit?'; } window.onbeforeunload = fun; return 的值是 confirm 的訊息 可 return string or array 無法 return fuinction
也可以用條件判斷
var fun = function () { var value = document.getElementsByTagName('textarea')[0].value; if (value) { return 'Exit?'; } return; } window.
...
# Something about CI note user guide
## redirect $this->load->helper('url');
...
# Plug-In Install by Package Control
Fisrt use sublime need install Package Control Ctrl + ~ show command line enter
import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation' restart sublime finish
## ZenCoding ## jsFormat 讓 js 整齊 ctrl + alt + f GitHub
## SublimeTmpl 載入預設的樣板
## Emmet 快速輸入
## Gist ## BracketHighlighter ## Themes Dayle Rees Color Schemes Farzher Fox ## sublime-jslint GitHub
...
# Hot Key Document
Mac OS X
## Windows Ctrl+Shift+p 開啟指令列 Tab 自動完成字詞 ctrl + d 選單字 alt + F3 選相同的字 ctrl + f 搜尋 ctrl + 0 focus 到 siderbar Ctrl + Shift + <- or -> Alt + <- or -> 單字 or 符號間移動 Ctrl + Alt + up or down 輸入多選 Ctrl + g 跳行
## Mac OS X Command + shift + p 開啓指令列 Ctrl + Shift + up or down 輸入多選 Ctrl + g 跳行 Command + <- or -> 跳到行首 or 行尾 Ctrl + tab 上一個 focus 的分頁 Ctrl + shift + tab 下一個 focus 的分頁 Command + K + L tolowercase Command + K + U touppercase
...