DiAdo的Web Development學習日誌: 2014

.row {
    overflow: hidden; 
}

[class*="col-"] {
    margin-bottom: -99999px; /* 讓overflow發生 */
    padding-bottom: 99999px; /* 讓padding-bottom超長，藉此拉長背景 */
}

如果不懂為何可以這樣的話，可以試著把overflow: hidden去掉，這樣也許就可以理解了

(當並排的區塊元素需要等高時，都可以用這招)

表單格式心得

網頁的form需要先用Javascript檢查格式後才送出
但後端的php仍然需要對欄位格式做檢查，不同的地方是當格式錯誤時，後端只要直接return就好了，不需要回傳錯誤訊息

2014年8月24日星期日

CSS/Javascript Playgrounds

http://designshack.net/articles/css/5-online-playgrounds-for-html-css-and-javascript-compared/

1.
At zoom level 100% one CSS pixel is exactly equal to one device pixel.

2.
Zooming as implemented in modern browsers consists of nothing more than “stretching up” pixels. That is, the width of the element is not changed from 128 to 256 pixels; instead the actual pixels are doubled in size. Formally, the element still has a width of 128 CSS pixels, even though it happens to take the space of 256 device pixels.

以上節錄自http://www.quirksmode.org/

對CSS, JS跨平台有完整探討的網站

http://www.quirksmode.org/

此外，http://www.quirksmode.org/mobile/裡面的The three viewports系列文章是鑽研CSS排版必讀的文章

2014年8月4日星期一

session_set_cookie_params()

session_set_cookie_params()要在session_start()之前呼叫
session_set_cookie_params()是"當client沒有傳session key時，設定cookie為參數所指定的值"
換句話說，當使用者下一次瀏覽該頁面時，因為client會傳session key給server，所以session_set_cookie_params()並不會更新cookie lifetime
得用setcookie()更新cookie lifetime

2014年7月28日星期一

CSS3所有的selectors介紹

http://www.w3.org/TR/selectors/#selectors

2014年7月20日星期日

檢查表單的一種js寫法

http://pastebin.com/rRJMsP8t

我是在https://donate.kptaipei.tw/看到的= ="

2014年6月29日星期日

Vim TagList, Ctags

Tag List:
vim-taglist.sourceforge.net/

Ctags:
http://ctags.sourceforge.net/

教學：
http://rickey-nctu.blogspot.tw/2009/02/vim-taglist.html
http://rickey-nctu.blogspot.tw/2009/02/vim-srcexpl.html

2014年6月8日星期日

Vim:
c[motion]: change command
caw: change a word (delete a word including the trailing space under the current cursor position, and enter insert mode)
ciw: change inner word (delete a word under the current cursor position, and enter insert mode)
cw: change from the the current cursor position to the end of the current word

2014年5月24日星期六

GNU screen好用指令

1.
CTRL + A + ESC or CTRL + A + [ 進入copy mode

2.
You can use vi like commands to navigate through the scollback buffer.

3.
Copying Text
Once the cursor is at the beginning location, press SPACEBAR to set your first mark. Next navigate to the ending position and hit it again. The second SPACEBAR will set your end mark and exit copy mode. One neat and often useful feature is selecting a rectangle on the screen rather than full lines. Use c and C to set the left and right column margins to the cursor’s current location.

4.
Pasting
Pasting is easy, just hit CTRL+a to activate screen then ] to paste.

5.
CTRL + A + n: next window
CTRL + A + p: previous window

6.
screen -ls 列出所有sessions
CTRL + A + :quit 退出session
CTRL + A + K 退出session
CTRL + A + D Detach Session

6.
CTRL + A + H: 把目前的畫面以文字形式存在文字檔

2014年4月7日星期一

Regular Expression教學

http://www.regular-expressions.info/

2014年3月21日星期五

PHP OOP Tutorial

http://code.tutsplus.com/tutorials/object-oriented-php-for-beginners--net-12762

2014年3月17日星期一

JavaScript The Right Way

http://jstherightway.org/

Code Conventions for the JavaScript Programming Language

http://javascript.crockford.com/code.html

What technical details should a programmer of a web application consider before making the site public?

http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before

以PHP正確地儲存使用者的密碼

http://stackoverflow.com/questions/1581610/how-can-i-store-my-users-passwords-safely/1581919#1581919

2014年3月11日星期二

HTTP Headers Security

HTTP Headers 的資安議題
http://devco.re/blog/2014/03/10/security-issues-of-http-headers-1/

CSS效能

CSS performance revisited: selectors, bloat and expensive styles
http://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/

2014年3月7日星期五

CSS-Tricks

http://css-tricks.com/

Best Fronted Tools 2014

http://fredsarmento.me/frontend-tools/

2014年2月4日星期二

讓Bootstrap Columns高度相同

http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height

看了不是很懂，改天再來研究

2014年2月3日星期一

[轉貼] 說說標準系列

想對CSS深入了解的話可以看看

http://bbs.csdn.net/topics/340173664

CSRF防禦

http://www.wikihow.com/Prevent-Cross-Site-Request-Forgery-%28CSRF%29-Attacks-in-PHP

https://www.owasp.org/index.php/PHP_CSRF_Guard

2014年2月1日星期六

解讀CSS

瀏覽器在看CSS的時候是以box model角度去看
所以我們人類在看HTML、CSS的時候，要以box model的角度去解讀

搞懂inline-block和vertical-align

inline-block：具有inline特性的block

What’s the Deal With Display: Inline-Block?
http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

Understanding CSS’s vertical-align Property
http://www.impressivewebs.com/css-vertical-align/

2014年1月31日星期五

視所有電腦上的資料為二進位資料

現在看很多攻擊，感覺要在一開始就把字串當作二進位資料來看待會比較安全
所以結論就是：一定要視字串為二進位資料

事實上，最好是「視所有電腦上的資料為二進位資料」，例如像是變數儲存的內容，甚至是word文件檔也是

Web Security資源

以我現在的程度，大致上到下面這幾個資源去找，Web Security資料就很完備了

1. OWASP
https://www.owasp.org/
wiki左邊的Reference有很多資料。Reference的Attacks很有參考價值，也有教你如何防範。
OWASP Code Review Guide也很值得參考。OWASP Cheat Sheets也是！

2. 書籍
「網頁程式駭客攻防實戰－以 PHP 為例」這本還不錯，整理得滿有條理的。但我覺得Paros有點難用，而且似乎也沒再更新了。建議可以改用Fiddler2。

10 Great CSS Tips for every Web Developer

http://www.kidsil.net/2013/12/10-great-css-tips/

第七點很好用：用max width和max height來讓瀏覽器自動調整圖片大小，同時維持圖片比例

[轉貼] CSS height的深入研究

CSS相對單位的概念

使用%, em等相對單位時，是相對於父元素

例如div A的width:50%的意思就是寬度是父元素div B寬度的50%
但如果父元素div B的寬度也是用相對單位表示，父元素的父元素div C卻沒有設定width
那麼父元素div B的寬度設定便無效，連帶影響div A的寬度設定也無效

http://www.cnblogs.com/StormSpirit/archive/2012/12/29/2836617.html

Learn Vim Progressively

http://yannesposito.com/Scratch/en/blog/Learn-Vim-Progressively/

display, div, CSS深入研究

table-cell搭配百分比寬度(重點：display: table的寬度要設定100%)
http://stackoverflow.com/questions/15373147/make-display-table-cell-use-percentage-width

display深入研究
http://www.cnblogs.com/StormSpirit/archive/2012/10/17/2726994.html
http://www.cnblogs.com/StormSpirit/archive/2012/10/24/2736453.html

CSS深入研究
http://www.cnblogs.com/StormSpirit/category/344334.html

用純CSS解決div垂直置中
http://blog.yam.com/hanasan/article/35806444

2014年1月30日星期四

Vim在UTF8 screen下亂碼解決辦法

1.
http://marc-abramowitz.com/archives/2011/12/14/vim-screen-corruption-with-screentmux-and-matchparen-vim/
Vim在UTF8 screen下，刪除字母的時候視窗會產生如亂碼般的錯誤，是由matchparen plugin導致的
關閉matchparen plugin的方法就是在.vimrc加入底下這行：
let loaded_matchparen = 1

2.
http://www.adp-gmbh.ch/vim/let_vs_set.html
vim的set和let的差別：
:set guifont=Lucida_Console:h9:cANSI
:let &guifont="Lucida_Console:h9:cANSI"
以上兩行等價

訂閱：意見 (Atom)

2014年10月9日 星期四

2014年10月6日 星期一

2014年9月29日 星期一

2014年9月22日 星期一

2014年9月18日 星期四

2014年9月13日 星期六

2014年9月10日 星期三

2014年9月9日 星期二

2014年9月5日 星期五

2014年9月4日 星期四

2014年8月31日 星期日

2014年8月26日 星期二

2014年8月25日 星期一

2014年8月24日 星期日

2014年8月4日 星期一

2014年7月28日 星期一

2014年7月20日 星期日

2014年6月29日 星期日

2014年6月8日 星期日

2014年5月24日 星期六

2014年4月7日 星期一

2014年3月21日 星期五

2014年3月17日 星期一

2014年3月11日 星期二

2014年3月7日 星期五

2014年2月4日 星期二

2014年2月3日 星期一

2014年2月1日 星期六

2014年1月31日 星期五

2014年1月30日 星期四

2014年10月9日星期四

2014年10月6日星期一

2014年9月29日星期一

2014年9月22日星期一

2014年9月18日星期四

2014年9月13日星期六

2014年9月10日星期三

2014年9月9日星期二

2014年9月5日星期五

2014年9月4日星期四

2014年8月31日星期日

2014年8月26日星期二

2014年8月25日星期一