February 2012
10 posts
5 tags
[Demo] CSS3 paper curl →
One of my favourite texture except minimal-texture
3 tags
{note} JavaScript object structure: speed matters →
create object本身已經燒資源，然而某些環境下property creation一樣有可以有效能問題…
3 tags
Responsive Background Image
如果只要Responsive Image用max-width: 100% + width:auto + height: auto已經可以做到 (甚至有人Develop了局部Resolution顯示的能力)，可是Background Image呢?
2 ways.
background-size:cover: 詳細的探討在這篇有，也有fallback (jQuery Anystretch)
border-image: Demo. 不過正如demo所言chrome很buggy…
2 tags
The State of HTML5 Video →
簡單總結:
繼續format上打架: FF和Opera只支援open的webM和ogg，IE/Mobile webkit/Safari只支援mpeg，chrome則是通殺… (╯‵□′)╯
Attribute好像大致相容，只是又是那個狀況－ 總有不同小問題 (＃°Д°)
fullscreen出乎意料的只有Safari系和FF支援，不過這個沒有API…
Streaming只有Apple做到可以用的地步
最後，Accessibility全滅。(茶)
所以還是Flash在一旁冷笑…
2 tags
HTML5 Security Cheatsheet →
地球很危險 ︴(||| ° △ °)︴
2 tags
the Performance Golden Rule: 所謂的效能樽頸... →
“在於沒寫好的front-end resources loading+該死的network” (尤其是Ajax橫行的年代)
註:
Sharding domain 是有錢人的玩意，但對很多browser都有用
Script concat是很多framework都支援的功能 (Rail尤佳)…至於沒framework如何做好像沒人碰過。然而代價是caching有影響(尤其是browser層面)、file size偏大
Async script loading是有著一打的loader在做，不過多file是個怎樣的情形沒實試過。
2 tags
[Backbone.js] 小心你的View...
Backbone是個很不錯的framework，提供了不錯的方式將model logic和view logic分家，大家用event溝通，code變的很好看-
只是View用起來要注意的事情真不少。
Zombie問題: AppRouter寫的不好換頁時會有大災難…
Reprint問題: change event binding及handler可以是效能殺手。
2 tags
[Note] Tumblr的markdown...
Tumblr的markdown有點特別。
Rule 1: 在html tag內的markdown不處理
Rule 2: 在code block內的html自動escape
Extra: 因為editor setting是User Setting的東西，一旦Enable全部Blog的Editor都是Markdown…
果然是給programmer用的東西…I love tumblr!
3 tags
January 2012
11 posts
3 tags
[JSWTF?] JavaScript’s internal character encoding:... →
造篇探討的是JS用的encoding。
結論是: 雖然spec是沒有限，不過大多數Engine internal用UTF-16，Language層面(exposes)當是UCS-2處理，只有在顯示層面才會處理surrogate pair的顯示。
文未作者有提供工具去處理UTF-16的字的escape工具，有興趣的人可以去參考一下。
以上。
2 tags
JavaScript Pattern Collection →
常見的JS pattern都有，分門別類，建議一讀。
2 tags
[teatime轉文] 你製杖嗎？不，我販劍
典故 圖源: Twitter/Plurk
國語諧音梗(或gag)，要解說的反白…
你智障(zhì zhàng)嗎? 不，我犯賤(fàn jiàn)
以上。
3 tags
Jasmine戰記#1: Run the test locally
Jasmine是個很好的BDD/TDD framework－基本是Rspec的JS版，所以很好理解: 先寫Spec定義行為、Fail、再寫Code Pass Test。Jasmine好在是可以和其他test tool framework好好配合去做Spying等事，大多數test case都可以漂漂亮亮。
問題是對於在CSS 1.0寫Webpage的傢伙而言TDD神馬的有如五里迷霧，完全思考不能…然而更悲哀的是，想偷懶找個繁中教學也沒有。(反而簡中還有一丁點…果然會做testing的傢伙直接衝英文是吧?)
所以只好一邊學自己一邊寫 (苦笑)
How to start
用Jasmine的第一步不是寫Test，是Run人家寫好的Test
如果是npm還簡單，是client side的JS library (例如 jQuery-waypoint...
3 tags
HTML5 History / pushState URLs, .htaccess and You →
這是作者的Apache Server被pushState URL惡搞後的修正記…
好的是用.htaccess就搞定，壞的是要用mod_rewrite
真是個麻煩的傢伙…(這又是另一個故事了)
The Restart Page →
jiwostudio:
各作業系統的開機畫面。超級酷！
2 tags
Sublime Text 2 Tips and Tricks →
1 tag
“Googling quick brought me to Apple’s “How-To” guide for coding...”
– http://www.bennadel.com/blog/2307-Disabling-Auto-Correct-And-Auto-Capitalize-Features-On-iPhone-Inputs.htm
1 tag
How iOS multitasking really works →
這篇說明了background processing的運作。
重點在iOS是會把suspend了的app的ram清走－－只是當Mac OSX有同樣功能時我一樣要手動purge時我實在覺得這句沒說服力耶…
p.s. 中文版
2 tags
jQuery 1.7的.on()
jQuery 1.7其中一個重點是把Event大改，而新出的.on()除了是效能大增外更是把寫Event Listener的習慣全改了…
Syntax
$("/* event hook element (selector) */")
.on(events // string of event
[, selectors] // *filter* descendant of event hook for triggering:
// * null = trigger on event hook => bind;
// * any selector => delegate
[,data] // `e.data` event...
2 tags
++[[]][+[]]+[+[]] = 10 -- tl;dr 版本
根據stackoverflow的解答:
+[] === 0
[[]][0] 因為 [[]] 生成一個[Array[0]] (Array with another array inside) 而Return [] (Notation的Trick) →所以 ++[] = 1 →另外[[]].length是1
最重要的: 那個答案，10，是String －－ 坑爹啊!! →因為 Number + String會出String …算了這個不重要
教訓: 身為Programmer看到數字時不能天真地以為那一定是Number Type
December 2011
23 posts
1 tag
Happy New Year!
(*ﾉﾟ▽ﾟ)ﾉA Happy New Year｡+.ﾟヽ(*´∀｀)ﾉﾟ.+｡
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...
November 2011
13 posts
about:dayjs
dayjs:
day.js是個mini-blog以每日一篇為原則來刊出讓你遠離各式災難的.js snipplet或是library。不管是node.js的npm還是jquery plugin及獨立的.js都收!
和另外那兩個tumblr不同，這個mini-blog是用中文 (反正英文的多到跟本吃不下…)
=======
天音:你會不會開太多了
我: 還好吧? 我需要比delicious好的snippet櫃…(被毆飛
Ambiguous ampersands [aka: Trouble of "Named... →
一切都是歷史遺留下來的問題…
2 tags
Better git workflow - lesson learnt from github
“Master is always depolyable”
“If you are nervous, depoly to staging”
“Keep your branches simple”
“code review? pull request & discuss”
“pull request are cheap as hell”
“Priority is observed, not manufactured or assigned. Otherwise, it is necessary not priority”
“If it were really important, it’d...
5 tags
“…Knockout does not provide guidance or constructs beyond the model,...”
– Backbone vs Knockout
==================
If a framework fails to reduce bad code, it FAILED.
After many years of js programming, I realize that we are hard to think in prototype-based oop with massive DOM tree around. Well structured JavaScript application is hard to achieve in real world.
1 tag
jQuery Summit Slide精選
以下為標題screen了的一部分:
State of jQuery
Unit Testing with QUnit (code) (mocking code)
Code Quailty (extra: Coding Style and Your Brain)
Sneaking structure into your DOM-based application
Large-scale JavaScript Application Architecture
jQuery & Responsive Web Design
popcorn.js - HTML5 video @ jqsummit
jQuery & CSS3 Selector
jQuery Deferred
詳細之後再寫~
3 tags
Non-blocking Web UI:不會卡的UI
之前做Project時碰到很嚴重的Blocking問題，剛好看到Spine.js作者的這篇
Asynchronous UIs - the future of web user interfaces
這篇點出了一個pattern: 我們設計的UI很多時都是”click-and-wait” (點擊與等待)，而User是討厭等待的生物…所以AUI應此而生。
而AUI的基本，是Non-blocking -
即使有大量JS Event或運算，網頁仍然有能力回應User的UI Event (mouse click之類)。
沒有該死的會鎖死整頁的progress bar/spinner但同時仍然有progress可見，User在等的時候仍然有事可做又不會誤會”thing is done”而關了網頁
...