December 2011
23 posts
2 tags
Hover and Click Trigger for Circular Elements with... →
其中一個用border radius的WTF是: mouse event會在element附近的空白位置發動。
現在用數學一點的方法去解決這個問題…
1 tag
logstalgia: website access log visualization →
2 tags
Font: Memetica →
4chan meme, Rage Faces被人做成字型就是這樣…
奇怪的是有些符號也有圖，dafont的bug?
3 tags
[JS WTF] Coercion Performances →
Coercion，又稱Type Casting，一個在JS世界充滿WTF的鬼東西 （所以才有”Watch out for type coercion when using ==.“這個idiom…)
連結要看有用coercion好還是casting好－例子用的是JS 1.6新增的Array.some
結果是coercion勝出，在mobile上好像會更明顯…不過就算是casting+ ===結果也差不了多少。
Evil or not is your choice.
3 tags
[HTML5 Rant] Audio Rumble
[HTML5 Rant其之一]
眾所週知其中一個HTML5的重點是原生Audio，眾所不知的是，這個Audio的implementation有夠爛的。
格式大戰 因為各種原因各browser對不同audio codec的支援是有的沒的[source]: 圖表 (其實html5 video也是同樣吐血，而且大家一面倒支援h.264) 然而更吐血的是，權利金
權利金 在網站上播mp3要給個$2500USD，而且就算你肯給也有一票限制。建議用ogg或是支援更廣的aac [source]
Bug一堆 詳情看此: The state of HTML5 audio 簡單來說是問題是loopback、playback delay (timing issues)、preload等次要的feature在不同的browser有不同的問題… 還有不要說webkit...
Holiday Reading #1: Backbone.js
Backbone.js Fundamentals
Backbone.js x jQuery Mobile: Flickly Mobile
Hello Backbone.js
Offical Tutorial List
backbone-marionette
2 tags
Advent Calendar for web developer
Advent Calendar是甚麼在本家已經寫過，不知道的人可以參考這篇。下面是給各位在假期時提升實力的Advent Calendar，到12月24日就會出完:
MDN Advent Calendar: 每天出一篇今年的Web Development文章精選
24 Ways 每天出一篇Web Development/Web Design的文章－基本上是沒人寫過的新技術，作者都很有實力。
HTML5 and CSS3 Advent 2011 另一個多人談論的HTML5+CSS3的技術Calendar
HTML 5 Advent Calendar ‘11 日本的開發者其實比台灣和香港的更熱心於HTML5 (看jsdo.it就知道了)，這是他們針對HTML5各個不同技術的技術發表的Calendar－－即使不懂日文看看人家的焦點也是好的…
Performance...
1 tag
“See, experience is cheap. All it takes is time. Skill is harder, but really...”
– CEO Friday: Why we don’t hire .NET programmers
萬年菜鳥就是這樣煉成的: They don’t have the attitude to be expert.
p.s. 來源的碎碎念是，” .NET teaching the wrong things for startups.” 對於出色的Developer的.NET經驗，我個人的解釋是: 他也許見證過 .NET在大傢伙之下的死氣沉沉才會轉戰startup的
2 tags
Your Trouble Maker: positioned:fixed
我對position: fixed的意見是…沒事別用太多
Desktop:
頁面太長機能不行的在scrolling會小lag
某些Browser如FF (8代還會) zoom了scrolling也會小lag
Mobile:
iOS5以下不支援 (會fallback至position:absolute)
iOS5有bug: iOS5 position fixed bug
慎用。
1 tag
1 tag
HTML5 as a techonology
( Markup + JavaScript APIs + CSS ) is what people generally mean when talking about HTML5 as a techonology.
by Eric Freeman and quoted by @wastemobile, Head First HTML5 Programming
結果Developer還是沒法阻止世人啊。
3 tags
“Having images scaling down presents a problem though, if you’re a...”
– from “Note On Adaptive-images-yet-again”
上文說的是一般adaptive image用max-width解決的問題: 浪費。
Resize時的Algorithm差異也是個問題，但相對次要－bicubic系的分別一般人看不出來。Image Size在Ram、Network、CPU使用上不Resize有明顯的performance down，然而目前為止的solution都很有問題－不是Rule寫至流淚(每組screen resolution的Media Query寫一次啊!)就是Resize...
2 tags
"Android的顯示問題非硬體加速不行，弊在爛架構"
“Android’s graphics problems are not due to a lack of hardware acceleration. They’re due to poor architecture.”
- Corun @ Hacker News
以上為上文[Mobile] Android上的硬體加速 (前稱[Webkit] Android上的webkit硬體加速)之後續討論之一。這篇詳述了iOS和Android對View的方式的差異，外加:
在iOS上想達至和Android有同樣「效果」(Lag)，請用Layer
Android的策略有個好處: 吃少一點的記憶體。(看似是為了支援low-end機種的選擇)
p.s. 正式一點的後續在Why is Android laggy, while iOS,...
1 tag
Daring Fireball: The New Twitter (R.I.P. Tweetie) →
jiwostudio:
John Gruber:
But this, today’s new Twitter, is something else. It’s an attempt at a best way to do Twitter that is as consistent as possible across multiple platforms, ranging from the iPhone to Android to the mobile and desktop web.
1 tag
On Magazines and the iPad →
jiwostudio:
They are all craps.
(Via Daring Fireball)
3 tags
localStorage Read Performance →
這是localStorage的讀取效能測試。結果…血淚啊血淚：
雖然說Test環境有點不公平 (Ram Read VS [極有可能的] HDD Read)，不過其結果也太Orz
即使是String*，能夠到百萬級的browser少的可憐。(只有Safari 5和IE9)
Chrome不知為何沒Result
後面有一些反映到bottleneck是在Query Handshaking，而非Query本身－一百次Query 100 char還不及一次query 10000 char。(因為是Local所以不到某個size跟本是看不出來吧?)
慢的要死的傢伙們很可能是用sqlite。(除IE 9是XML外，大多數是SQLite)
*要注意的是localStorage只可存String－所以經常存入的是JSON...
3 tags
“When you’re optimizing performance of your site/app, your priorities are...”
– Paul Irish (Vinci’s Note: * is my footnote)
2 tags
[Mobile] Android上的硬體加速
Android的世界真是有夠杯具。
下文要說明的是Android上的硬體加速是如何的無能: OS Animation其實是有加速可是仍然卡、ICS如何不及Gingerbread的boundary case；一些硬體限制及優化策略 (Tile-based rendering)；2MB的OpenGL overhead可以有多要命等等…
How about some Android graphics true facts? I get tired of seeing so much misinformation posted and repeated all over the place about how graphics rendering works on Android. Here is some truth: • Android has always used...
2 tags
Nota Luminis: 語言與門面：一些航空公司網站的比較 →
這是notaluminis透過各大航空網站比較語言對排版的影響: (以下為節錄，全文在此: Nota Luminis: 語言與門面：一些航空公司網站的比較)
這是全日空（All Nippon Airways）的日文網站，中規中矩 (update: 那是 ANA 美國的日文網站，日本的日文網站版面還是略有不同)：
但是套用同樣設計的英文網站，看起來就有稀稀落落的感覺：
將西歐語言套入一個原先為東亞文字設計的版面，本來不是一件容易的事情。早年，Windows 作業系統對東亞文字有限制。例如過去新細明體 9pt、11pt、12pt 有固定的點陣字型，任何非上述大小的字型，在一定尺寸之下（例如小於…
看完全文後你會知道那種為了省錢而不改版面的做法不是每種語言也通的。(e.g. 東亞方塊字 vs 西歐字母)
1 tag
[Mid Night Murmur] The problem of coffeescript and...
Here is the one-line explanation of the title:
“The problem is, they break the debugger, live editing tool, or the fast fix ability between code and browser”.
The problem source? “compiling”.
Compiling destroys the source code structure and all the line number become meaningless - so error messages are much less useful (or even useless), your development shortcut is...