油電雙掌

@qcl Code & Beer 2013-11-15

@qcl @NNNN @victor @curtis

伏地挺身，強身健體

http://yhackertw92.appspot.com

衝撞螢幕，邦伯報數；連線對戰，謝謝指教。

衝撞螢幕

viewport <html> <head> <meta name=”viewport” content=”” > </head> </html>

viewport • width • height (好像不怎麼有用呢...) • inital-scale • minimum-scale
• maximun-scale • user-scalable

viewport (width) • <meta name=”viewport” content=”width=...”> • width=device-width ◦ 980px
(?) • width=500px

viewport (inital-scale) • inital-scale=2 • inital-scale=0.5

viewport (scale) • inital-scale=1,maximum-scale=2 • inital-scale=1,maximum-scale=1,minimum- scale=1

viewport (user-scalable) • inital-scale=1,user-scalable=0

「對，動畫」

border-radius • border-radius • -webkit-border-radius • -moz-border-radius • border-radius: 50%;

border-radius • border-{top|bottom}-{right|left}-radius • -webkit-border-{top|bottom}-{right|left}-radius • -moz-border-{top|bottom}{right|left}-radius • border-top-right-radius: 50%;

(-webkit-)animation • animation-name: keyframesName • animation-iteration-count ◦ infinite ◦ a
number • animation-timing-function ◦ linear/ease/ease-in/ease-out/ease-in-out ◦ cubic-bezier() • animation-duration • animation-play-state ◦ paused/running • animation-delay

@ (-webkit-)keyframes • @(-webkit-)keyframes Name { 0% {} /* from
{} */ 50% {} 100% {} /* to {} */ }

邦伯報數

Bumbler to Speech http://zhusee2.github.io/bumbler-to-speech/

「非常不簡單」

語音列表 • 做好準備 • 拜託噢 • 沒有啦 • 我們贏啦～ •
非常不簡單 • 非常不滿意 • 開始 • 逆轟高灰 • 表現是不差 • 已經跨越了一個里程碑（掌聲） • 在關鍵時刻，做出明確的選擇

<audio> • audio.play() • audio.pause() • audio.load()

Magic on mobile devices! • autoplay/preload ◦ interact with user
◦ click • display: none ◦ controls ◦ 只好丟到螢幕外

Remote Debug (Chrome) • on your Android device ◦ Chrome
> Settings > ◦ 開發人員工具 > ◦ USB網頁偵錯功能

Remote Debug (Chrome) • on Desktop/Laptop ◦ Download ADB for
Chrome ◦ https://chrome.google. com/webstore/detail/adb/dpngiggdglpdnjdoaefidgiigp emgage

Remote Debug (Chrome)

Remote Debug (Safari) • on your iDevice ◦ Setting >
Safari > Advanced ◦ Web Inspector

Remote Debug (Safari) • on Desktop/Laptop ◦ Develop -> iDevice

Remote Debug (Safari)

Remote Debug (Firefox OS)

連線對戰

以後請 @NNNN 來講好了 :p

Yahoo! Hack Taiwan 2013

吃炒麵，寫炒麵

「我們贏啦！」

http://yhackertw92.appspot.com

https://github.com/qcl/you-dian-shuang-zhang

Thanks ^_< qingcheng.li @ qcl.tw

油電雙掌

油電雙掌

More Decks by Qing-Cheng Li

Other Decks in Programming

Featured

Transcript