RIP, Steve Jobs - Thank you for a better web & real HTML5

Dear Steve,

Thank you for your innovative iPad and bringing HTML5 into the real world.
Thank you for leading Apple to push a better, beautiful web standard  (HTML5 & CSS3), and say no to Flash - it change the web again.
Thank you for making the best development machine I have. (iMac '09 / Snow Leopard)
Thank you for founding & leading the amazing Apple, Inc. Please Rest in Peace.

Best Regards,
Vinci (@vincicat)
=======================
要不是Apple推HTML5 & CSS3 + No Flash + iPad，大概沒有今天的Web: HTML5的興盛與Adobe & M$對HTML5的轉向以至今天的browser軍備競賽…
Steve，Thank you.

[Crazy CSS] Box/Text Shadow Magic

如果要說CSS3最偉大的地方，除了transition & animation就是陰影: box-shadow & text-shadow

CSS3 Box shadow和text-shadow優在可以一個element下N個shadow (次序/z-index同multiple background)，而且會一定程度上反映element變形過的效果*，加上有方向性(outset/inset)、xy offset及可變大及設定羽化範圍幾乎是有無限可能－修邊柔化的好工具。缺點是會拖慢rendering及有時會很buggy^...不過有了這兩個傢伙本來瘋狂的CSS又再更瘋狂了...

* 如border-radius...但不受transparent border影響
^ buggy的是text-shadow，而且是chrome在xp上的某些字型部分字會消失，十分靈異。(Update: Chrome 14+已修正 [source])

[Box shadow實戰]

• 高光
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
• 替下了 css transform的element修邊...
  box-shadow: 0 0 1px transparent; (webkit限定)
• 當然有3D..
  3D Tower
• 再威一點的是，實物化
  3d-box-shadow photoframe (除了照片沒有別的圖了...)
• box shadow+text shadow+gradient反光: 有炫光(glare)的3D button
  Nothing Insightful • An effect that makes the Crikkket web app unique...
• 當border用: Multiple Border (好像見過彩虹版的..)
  Multiple Borders with CSS
  (不過要注意的是，box-shadow是不包在Box-model內、預設大小也是用content box去算－origin好像是按照border-box...)
  (off topic: 都是惡搞border的: Have Fun w/ Borders – Beveled, Pressed, & More!)
• 繪圖
  1DIV クマ吉
• Mask, 007 style
  暗闇に浮かぶ文字

box-shadow因為有inset和可以銳利化成正方體(solid color, blur radius = 0)、變圓形，配上:before & :after惡搞潛能真的很多 (論惡搞其實css3 gradient才是皇者，不過這個下次再說了)

[Text shadow實戰]

• 3D Text
   基本: How to Create 3D Text With CSS3 & 3d-text
   animated: 3D Text Tower
   再立體一點: css isometric text [blog post]
• Len Flare 柔光
  the new lens flare
• Photoshop 靠邊站時間
  Letterpress、double stroke
  Neon、inset、fire、retro, etc
  Blur
• Antialias font: 替webfont修邊
  Smooth font using CSS3 text-shadow property

只要配上webkit-stroke和text clip mask photoshop是可以靠邊站的 (汗)
webkit這Engine真是令人又愛又恨啊。

[Crazy JS] Terminal Tool in Browser

在SFD和人聊起就寫一下: 到底今天的browser可以有多少native app有的東西?
於是從cross-compiling聊到模擬器和各種porting...

[模擬器]
JSLinux
地上最強32 bit PC emulator in browser, Linux OS: 由bios到gcc compiler一應俱存還有boot機，不過又是一close tab東西就沒了? [wikipedia說明]
(至於HTML5 VNC/SSH Tool應該是一打，不贅）
(BBS的話一個gaaan就夠了...)

visual 6502
IC的東東，不會玩但光是看就很威。

JSNES
vNES的JS port，令人懷念的紅白機也可以在browser玩了


以上都是對系統有所要求的 (畢竟行模擬器要2x~4x原裝硬體的系統需求)，以下則是把native app重寫/重編譯至browser環境運行:

[terminal tool]
web vi
vi (not vim) in your browser....又一以canvas作為基礎的web IDE…自mozilla Bespin (已和Ace合併)以後大家都這樣作了? 邪道啊...

Lodis
Database也有: NOSQL Database, Redis, in browser (mongoDB印象中好像有...)

speak.js
將 eSpeak用Emscripten由C++重新編譯至JS...而且是除IE以外的browser都支援! (天殺的IE不吃data-uri wav...)


不過除了把一堆program塞進browser tool另外一種是把各種terminal tool用JS重新打造 (js port...不過更精確是npm port):

[js port]
https://github.com/danlucraft/git.js
用JS寫的git...有browser git repo viewer，但需要rake踢起 (有支援npm的計劃但看似未實行 XD)


看來因為node.js和強大的browser JSEngine可以預見再瘋狂的porting陸續有來 (笑)