mylake: web

顯示具有 web 標籤的文章。顯示所有文章

2016年5月15日星期日

API命名

https://medium.com/@c9s/api-%E8%A8%AD%E8%A8%88-%E7%AC%AC%E4%B8%80%E9%83%A8-%E5%91%BD%E5%90%8D%E4%B9%8B%E8%A1%93-8dfe71576e95#.jf2ajejxq

語意是變數名稱中最重要的一部份，”published”, “unpublished” 意味著產品的狀態，所以最簡單最簡單的 pattern，就是 Adj. + N. 就可以是一個清楚的變數名稱。

單數複數表示也很重要，當我們採用複數命名，其意味著該變數很可能是一個 array 類型、collection 類型、traversable 類型的資料。

get => 取得否些屬性會數值
set => 和get一樣不該用在資料庫操作
query => api操作帶參數
do => 沒啥意義, 可用update, _update, _update的scope通常為private
fetch / store => 同query, 但fetch通常不帶有複雜的操作
build => 建置需要的資料, 還沒那麼明確, 建置資料準備給其他的東西用但還沒到資料庫
create => 建置到資料庫, 有明確的目標和範圍
new => 初始化
remove => 從資料集中移除項目移除關連
delete => 刪除實體資料刪除
traverse => 處理tree

2016年5月10日星期二

解釋 Cookie 的特性

http://blog.miniasp.com/post/2008/02/22/Explain-HTTP-Cookie-in-Detail.aspx

Cookie 的運作是這樣的：

Server 端回應給 Browser 一個或多個 "Set-Cookie" HTTP Header
Client 端 ( Browser ) 接收到 Set-Cookie 指令時，會將 Cookie 的名稱與值儲存在 Browser 的 Cookie 存放區，並記錄該 Cookie 隸屬的網域、網址路徑、過期時間、是否為安全連線
當 Browser 再次發出 HTTP Request 指令到 Server 時，就會比對目前在 Browser 內的 Cookie 存放區有沒有「該網域」、「該目錄」、「過期時間尚未過期」且「是否為安全連線」的 Cookie，如果有的話就會包含在 HTTP Request 指令的 "Cookie" Header 中。

2016年4月30日星期六

Clickjacking

http://cyrilwang.pixnet.net/blog/post/31798436-%5B%E6%8A%80%E8%A1%93%E5%88%86%E4%BA%AB%5D-clickjacking

http://blog.miniasp.com/post/2008/10/11/The-latest-cross-browser-exploit-Clickjacking.aspx

Kidnap your click, to create unexpected behavior:

ex: use invisible iframe to controller your click

user X-FRAME-OPTIONS to prevent it

2016年4月10日星期日

css 原理

http://kb.cnblogs.com/page/125663/

from right to left effect:

DIV#divBox p span.red{color:red;} => find class ‘red’, then find span, then find p ….

in order to filter some unrelated 元素 quickly

how to optimize css

不要在ID选择器前使用标签名
一般写法：DIV#divBox

　　更好写法：#divBox

　　解释：因为ID选择器是唯一的，加上div反而增加不必要的 CSS 匹配。
不要在 class 选择器前使用标签名

一般写法：span.red
更好写法：.red
解释：同第一条，但如果你定义了多个.red，而且在不同的元素下是样式不一样，则不能去掉，比如你css文件中定义如下：
```
　　p.red{color:red;}
　　span.red{color:#ff00ff}
```
　　如果是这样定义的就不要去掉，去掉后就会混淆，不过建议最好不要这样写
尽量少使用层级关系
一般写法：#divBoxp.red{color:red;}
更好写法：.red{..}
使用 class 代替层级关系
一般写法：#divBox ul li a{display:block;}
更好写法：.block{display:block;}
在 CSS 渲染效率中 id 和 class 的效率是基本相当的

class 会在第一次载入中被缓存，在层叠中会有更加好的效果，在根部元素采用id会具有更加好（id有微妙的速度优势）。

how browser work

http://ued.ctrip.com/blog/how-browsers-work-i-basic-knowledge.html

http://ued.ctrip.com/blog/how-browsers-work-rendering-engine-html-parsing-series-ii.html

2014年5月9日星期五

Caching Tutorial

https://www.mnot.net/cache_docs/

Kinds of Web Caches

browser caches
proxy caches
gateway caches

how to control caches

html meta tags -> easy to use , but aren’t very effective . only honored by a few browser caches , not proxy caches
http headers -> give you a lot of control over how both browser caches and proxies handle your representations .


HTTP/1.1 200 OK

Date: Fri, 30 Oct 1998 13:19:41 GMT
Server: Apache/1.3.3 (Unix)
Cache-Control: max-age=3600, must-revalidate
Expires: Fri, 30 Oct 1998 14:19:41 GMT
Last-Modified: Mon, 29 Jun 1998 02:28:12 GMT
ETag: "3e86-410-3596fbbc"
Content-Length: 1040
Content-Type: text/html

Controlling Freshness with the Expires HTTP Header

Expires -> it has some limitations , because there’s a date involved , clocks must be synchronized
easy to forget that you’ve set some content to expire at a particular time

Cache-Control HTTP Headers

Useful Cache-Control response headers include:

max-age = [seconds]
s-maxage = [seconds]

Tips for Building a Cache-Aware Site

Use URLS consistently
Use common library of images and other elements
Make caches store images and pages that don’t change often by using Cache-Control:max-age header with a large value
Make caches recognize regularly
If a resource changes , change its name
don’t change files unnecessarily
Use cookies only where necessary
Minimize use of SSL

Writing Cache-Aware Scripts

only write file that have changed
set an age-related header for as far in the future as practical -> max-age
parsing the HTTP headers : If-Modified-Since , 304 Not Modified
don’t use POST unless it’s appropriate .
don’t embed user-specific information in the URL unless the content is unique to that user
Don’t count on all request from a user coming from the same host
Generate Content-Length response headers

2014年3月8日星期六

html object embed images

images


<img src="smiley.gif" alt="Smiley face" width="42" height="42" title="ilake">

alt 當圖片因為被刪掉或網路等問題 無法顯現時所會出現的文字 (alternate text)
title 當滑鼠指標移到圖片時 顯現的文字

object , embed


通常一起使用,為了要兼顧瀏覽器

因為之前IE 很多不支持embed 只支持object

參考連結

html dl dt dd

dl 的意義是 Definition List，中文是「定義清單」
dt 的意義是 Definition Term，中文是「定義項目」。
dd 的意義是 Definition Description，中文是「定義描述」。


<dl>

  <dt>Coffee</dt>

  <dd>Black hot drink</dd>

  <dt>Milk</dt>

  <dd>White cold drink</dd>



</dl>

效果如下

Coffee
Black hot drink
Milk
White cold drink

2014年3月7日星期五

html text

簡單的幾種html text tag的格式


<em>Emphasized text</em><br>

<strong>Strong text</strong><br>

<dfn>Definition term</dfn><br>

<code>A piece of computer code</code><br>

<samp>Sample output from a computer program</samp><br>

<kbd>Keyboard input</kbd><br>

<var>Variable</var><br>

<q>test</q><br>

<address>address<address><br>

效果如下

Emphasized text

Strong text

Definition term

A piece of computer code

Sample output from a computer program

Keyboard input

Variable

test


address


可以維持輸入的格式<pre></pre>

Text in a pre element               

is displayed in a fixed-width

font, and it preserves

both      spaces and

line breaks

Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks


<abbr title=“ilake”>  amy </abbr> ->滑鼠指標移過去時會顯示ilake

2014年2月5日星期三

overflow:hidden屬性

來源
http://www.superpay.com.tw/2009arts/article/c/212.html

overflow:hidden這個CSS樣式是大家常用到的CSS樣式，但是大多數人對這個樣式的理解僅僅局限於隱藏溢出，而對於清除浮動這個含義不是很瞭解。

　　一提到清除浮動，我們就會想到另外一個CSS樣式：clear:both，我相信對於這個屬性的理解大家都不成問題的。但是對於“浮動”這個詞到底包含什麼樣的含義呢?我們下面來詳細的闡述一下。

這是一個常用的div寫法，下面我們來書寫樣式。大家可以在DMX中自己做試驗

#wai{ width:500px; background:#000; height:500px;}

#nei { float:left; width:600px; height:600px; background:red;}

　　可以看到，我給nei這個id加了一個浮動，我們常規的理解是，我們允許nei這個id的div的右邊出現其他的內容，只要它的寬度不超過wai這個div和nei這個div的剩餘值。

　　如果div wai中還包含其他的div，我不允許它出現在nei的右側，我們則用樣式clear:both指定這個div，不允許它浮動在nei右側。

　　這些在ie6裏面是正確的。但是在火狐或者其他流覽器裏面，我們發現問題並非如此簡單。我們發現，當nei這個div的寬度和高度都大於wai這個div的時候，wai並沒有被內撐開而是依舊顯示為我們指定的寬高。在我的例子中，都是500。

　　這個時候我不理解了，我搜索了很多的資料，但是都沒能理解這是為什麼，直到看到別人在類似的情況下給wai這個div加了一個overflow:hidden這個屬性解決了這個問題。

　　我們直到overflow:hidden這個屬性的作用是隱藏溢出，給wai加上這個屬性後，我們的nei的寬高自動的被隱藏掉了。另外，我們再做一個試驗，將wai這個div的高度值刪除後，我們發現，wai的高度自動的被nei這個div的高度值給撐開了。

　　說到這裏，我們再來理解一下“浮動”這個詞的含義。我們原先的理解是，在一個平面上的浮動，但是通過這個試驗，我們發現，這不僅僅是一個平面上的浮動，而是一個立體的浮動!

　　也就是說，當nei這個div加上浮動這個屬性的時候，在顯示器的側面，它已經脫離了wai這個div，也就是說，此時的nei的寬高是多少，對於已經脫離了的wai來說，都是不起作用的。打個形象的比喻就是當JJ脫離BB的時候，JJ的大小對於BB是沒有撐開的作用的(有點少兒不宜的感覺-_-|||)

　　OK，當我們全面的理解了浮動這個詞的含義的時候，我們就理解overflow:hidden這個屬性中的解釋，清除浮動是什麼意思了。也就是說，當我們給wai這個div加上overflow:hidden這個屬性的時候，其中的nei等等帶浮動屬性的div的在這個立體的浮動已經被清除了，就好比JJ又進入了BB內，JJ的大小自然又會影響到BB的大小。

　　這就是overflow:hidden這個屬性清除浮動的準確含義。

　　當我們沒有給wai這個div設置高度的時候，nei這個div的高度，就會撐開wai這個div，而在另一個方面，我們要注意到的是，當我們給wai這個div加上一個高度值，那麼無論nei這個div的高度是多少，wai這個高度都是我們設定的值。而當nei的高度超過wai的高度的時候，超出的部分就會被隱藏。這就是隱藏溢出的含義!

　　我相信，通過我的這些文字，大家對overflow:hidden這個屬性有了全新的認識。希望大家和我一樣，在div+css學習中能夠不斷的進步!

2013年8月26日星期一

ajax post get

http://stackoverflow.com/questions/14562408/ajax-post-does-not-works

ajax post 遇到url長度太長的問題

把url和參數分開帶不要加在一起

用data存參數和url分開

Instead of putting the data on the URL you should be putting it in the body of a POST request. You need to add a data value to the object you're passing to the ajax function call. Like this:

$.ajax({
        url: url, type:"POST", data:{pcontent: $(pcontent).serialize()
}

2013年8月25日星期日

裝飾網頁的 CSS3 小技巧

來源 http://www.icoding.co/2013/08/css3-tricks-to-embellish-web

裝飾網頁的 CSS3 小技巧

24 八月 2013 NO COMMENT

CSS3 已經發展到讓前端開發者可以很容易的在頁面上加入許多複雜的視覺效果，這篇文章整理了十個 CSS3 小技巧來讓頁面看起來稍微專業一點

使用 CSS3 將圖片變成黑白圖片

CSS3 定義了 filter 這個功能，所以其實可以很容易的對影片作出各種基本的影像濾鏡。這邊使用的是 grayscale 這個 filter 來讓圖片變黑白，其它還有許多包含 sepia，intert，saturate .. 等。詳細請參考這個範例。

圖面黑與白：http://codepen.io/kswlee/pen/GIajg

另外其實 filter 不只可以用在 img 上，其實可以用在任何 element 上，比如這個測試就對 iframe 來作出黑白的效果

當然也可以用在 video element 上。

iframe 黑與白: http://jsbin.com/eZinOMI/1/

使用 CSS3 做頁面頂端陰影

很簡單的效果，但專業感加分

但陰影效果不要用太重，太重就 low 了。

http://codepen.io/kswlee/pen/CgvuK

CSS3 偵測 double clicks

你相信真的可以只用 CSS3 就可以偵測 double click 嗎？不信請看

http://codepen.io/kswlee/pen/amdtw

CSS3 畫三角形

使用 Pure CSS 來作畫這件事情，之前流行過一陣的 Pure CSS Mnion 已經讓大家見證到透過 CSS3 做任意形狀的可能性。但回歸基本我們還是看一下如何做出透過 CSS 做出非矩形的 element 外觀吧。 http://cdpn.io/zbGBp

使用 CSS calc() 函氏

有時候我們只想做針對 CSS value 做一些基本的計算，這時候並不需要為了這件事情寫 JavaScript，一個簡單的 calc() 就可以搞定了。

http://codepen.io/kswlee/pen/FmDHs

使用 CSS3 做文字漸層

CSS3 本身並無直接的 text gradient 可以套用，但可以轉個彎使用 image-mask 搭配 gradient 來達成。 http://codepen.io/kswlee/pen/wctnx

使用 CSS3 關閉 pointer events (包含滑鼠與 touch)

要讓 element 不去收 user input 可以很容易透過一個簡單的 CSS 屬性設定就可以達成。

http://codepen.io/kswlee/pen/HzqAE

使用 CSS3 做縫線樣式邊框

輕鬆做出專業區塊邊框。 http://codepen.io/kswlee/pen/fviJr

使用 CSS3 客製化捲軸 (WebKit only)

多年前只有 IE 提供客製化捲軸，現在 Webkit-based 的也可以。

http://codepen.io/kswlee/pen/ChygD

使用 CSS3 做模糊文字效果

你一定曾經想找出屬性要做出這個效果，但就只是需要一個小技巧把文字顏色設透明

http://codepen.io/kswlee/pen/BchxD

使用 CSS3 做邊角緞帶效果

就是 GitHub 樣式的邊角緞帶

http://codepen.io/kswlee/pen/qIrdv

參考資料：http://www.catswhocode.com/blog/modern-css3-techniques-to-embellish-your-website

訂閱：文章 (Atom)

2016年5月15日 星期日

2016年5月10日 星期二

2016年4月30日 星期六

2016年4月10日 星期日

2014年5月9日 星期五

Kinds of Web Caches

how to control caches

Controlling Freshness with the Expires HTTP Header

Cache-Control HTTP Headers

Tips for Building a Cache-Aware Site

Writing Cache-Aware Scripts

2014年3月8日 星期六

images

object , embed

2014年3月7日 星期五

2014年2月5日 星期三

2013年8月26日 星期一

2013年8月25日 星期日

裝飾網頁的 CSS3 小技巧

使用 CSS3 將圖片變成黑白圖片

使用 CSS3 做頁面頂端陰影

CSS3 偵測 double clicks

CSS3 畫三角形

使用 CSS calc() 函氏

使用 CSS3 做文字漸層

使用 CSS3 關閉 pointer events (包含滑鼠與 touch)

使用 CSS3 做縫線樣式邊框

使用 CSS3 客製化捲軸 (WebKit only)

使用 CSS3 做模糊文字效果

使用 CSS3 做邊角緞帶效果

2016年5月15日星期日

2016年5月10日星期二

2016年4月30日星期六

2016年4月10日星期日

2014年5月9日星期五

2014年3月8日星期六

2014年3月7日星期五

2014年2月5日星期三

2013年8月26日星期一

2013年8月25日星期日