February 2010
10 posts
jQuery 之空空如也
jQuery 的致命問題
請試試看這段程式碼：
$(“anElementThatIsNotInTheDOM”).doSomething(); // IT DIES
—
先要知道
$() 其實就是 jQuery() 的縮寫。它們通常會傳回一個陣列，所以可以使用 .length() 來測試。
—
jQuery.size() 是甚麼？
答案很簡單：jQuery.size(object) { return object.length; } ，所以這祇是一個包裝方法而已。
—
如何修改第一行程式碼，讓它更堅固？
這樣作就可以了：
if ($(element).length == 0) return;
$(element).doSomething();
—
Origin: Evadne Wu 2010/02/12
Use custom attributes, and bid farewell to...
We all agree that although the DOM itself does a million tricks, it sometimes just lack the right attribute. When it comes to storing metadata, unorthodox means are often used, furthermore littering the DOM. Some may say that <element aCustomAttribute=”…”> is not workable, but today we’ll prove them wrong.
The secret recipe here is called Customized DTDs.
—
Sidebar: What is...
2/10的聚會
雖然快要過年了，但本週2/10還是很想跟大家聚一聚。 照例會在生態綠，我七點半會到，有興趣的朋友歡迎過來。
到時可能會討論一下這個東西的作法與數種尚未解決的難題：
Canvas2Image — as PNG / JPEG / BMP. →
Jacob Seidelin’s implementation on saving the content of a HTML 5 canvas.
Quoted:
“Using the HTML5 canvas element, you can create all sorts of cool graphics client-side on the fly using Javascript. However, the canvas image cannot (in all browsers) simply be saved to disk as any other image.
Luckily there is a neat function on the the canvas object called toDataURL(). This functions encodes the...
FF 3.6’s new File API; styling file input in FF →
Proof that HTML 5 kicks SWFUpload from the back side, and hard.
On the file input, para-phrased:
Firefox ignores all CSS width / height statements on a file input control, but it recognizes font-size (e.g. the font* statements work). It also does not respect the cursor statement.
Another issue — sending RFC#1867-compliant binary raw data, is super simple:
if (window.XMLHttpRequest &&...
WebKit CSS Reflections →
Try -webkit-box-reflect: <direction> <offset> <mask-box-image> in any WebKit-based browser.
You can even say <img src=”bubbles.jpg” style=”border:5px solid white;-webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));”>
Quoted: “Reflections will update automatically...
Thinning text “fattened” by Mac OS X 10.6 Safari /... →
-webkit-text-stroke:1px transparent; works.
LESS — the new CSS
Just like how jQuery revolutionized the way we write JavaScript, LESS is the new way we write CSS. Ever dreamed of using variables instead of writing convoluted statements, and resorting to finding and replacing every time? Done! Nested statements, so you don’t end up with “body header span.content:hover” every time? Done! Found it important to have your key colors all in one place? That’s...
週三又到了
週三又到了，但是本週三（2010/02/03）聚會因太多人無法前來，暫停一次。
最近弄了一個 float 動畫，點到的 block 我故意隱藏起來，讓你知道這是真的依照 float 規則來動。
點子剛出現時，有用 iChat 討論。一開始認為要弄一個計算位置的程式來跑，但後來有人建議可以複製一份在背景，讓瀏覽器跑 float 後，取得位置來做動畫。但後來又想到直接詢問母元素不就好了。
於是寫了 li.item > a 的文件，並且套用樣式：
.item { flaot: left }
.item a { position: absolute }
然後 a 的 top, left 位置用 $(“.item”).position() 就能解決了！
—
關於這裡頭的 a 元素要怎麼動，有兩種方法：
CSS transition：以 WebKit...
本週聚會暫停一次
本週聚會因多數人無法前來，暫停一次。