Happy Designer Mini #2 相關資源

happy-designer-mini-2.md

Happy Designer Mini #2 相關資源

• Registrano
• 照片

Prototyping tool - janetyc

mockup 人生 - ETBlue

• 零時政府 - clkao 致力於打造資訊透明化的社群。
• hackpad - 多人即時寫作系統，比 Google Docs 好用？
• Randy Lien 推薦：
  • Sketch
  • PixelMator

SMACSS – TouNeko

• Layout : 用 .l- 表示 Layout。
• Module : 皆用三個英文字表示。
• State : 用 .s- 表示狀態。
• 自己的問題：
  • reset.css / normalize.css - 不理解 h1-h6, ul, ol, li 的預設樣式對一個較具規模的網站有何幫助。
  • Pattern 問題 : 相同 Module Class 在網站中的不同地方，外觀大致相似、會如何微調？

Web Speech API - Zhusee

Web Speech API (HDM2)

var u = new SpeechSynthesisUtterance("daaaa");
u.lang = 'zh-TW';
window.speechsynthesis.speak(u);

• 可以文字轉語音。
• getVoices 取得目前在系統中的語音引擎。
• 內建的大多是 Compact 引擎，但是夠用。
• 一個語音檔大概 500MB。
• 中文的語音檔目前只有男聲。

CSS 360 Panorama - othree

• GitHub
• Demo

Collie - caesar

• Inventing on Principle - Bret Victor
• LiveCoding
• Collie.js
  • 高效能動畫函式庫（自動判斷用 CSS3 或 Canvas 來做動畫）
  • Collie-benchmark - 測試效能

利用 HTML5 打造網頁版 iTunes 11 專輯瀏覽效果 - dannvix

• SpeakerDeck
• ColorTunes - 依照專輯封面顏色找出主要色碼。
• 使用 Visualized Quantization 方法。
• 相關應用 - Lavish Bootstrap

如何透過 AngularJS 改寫食譜編輯界面 - dlackty

• Richard Lee
• Rails 跟 AngularJS 的整合經驗
• 愛料理
• A better way to learn AngularJS
• 結論 - 老老實實地用 Node.js，不要沒事就去包 Gem

手刻 Scrolling Animation - Bonana King

將圖片變成用許多的小字組合起來，真的超屌的。

• 香蕉王
• [http://slid.es/sliiice/scrolling-animation/fullscreen](scrolling animation)

Experience in building up an WebApp with grunt, bower, backbone and its extension - Randy

• grunt-shell - 很容易地整合以前寫好的程式碼。
• http://marionettejs.com/ - 讓 Backbone.js 跳舞。
• 跟 CSS 有關係的用 Class、跟 JS 有關係的都用 data attribute。
• 監視 UI Model 而非 DOM 的改變。
  • Backbone.Modelbinder
  • backbone.stickit
• i18next.com
• 線上翻譯工具。
• 可以將沒有翻譯的 Resource 到伺服器。
• 會存一份到 localStorage。