2013年8月9日 星期五

WebConf 2013 筆記

最近好不容易碩士口試結束了,可以花點時間趕緊來追一下過去幾個禮拜...幾個月 lost 調的資訊。COSCUP 2013 的影片還沒出來,所以先來看一下 WebConf 的影片, 以下是 Day 1 我有看的 talk 的筆記:

WebConf 2013 筆記

Day 1

開發 web 的遠大前程

- Speaker: 李智樺 (Ruddy Lee)
  1. 要找到興趣很重要,不要為了達成特並目的去做
  2. Scrum 很重要, 但一個不能用
  3. 沒有 feedback, smaill iteration 就沒有敏捷開發
  4. 敏捷開發還是要寫文件 => test case, live docution
  5. 現在的 programmer 沒有人擁有自己的 code
  6. 開發團隊必須要有 一致的編程規範
  7. 時間管理很重要 番茄工作法
  8. Curation web, 兜兜哲學

node.js production site architecture

- Speaker: Ben (POP 作者)
  1. 監控 node app: Monit(Ubuntu 內建) and Forever(node 模組)
  2. Nginx 可以作為 reverse proxy 和 static file server. 在 production 環境下可以擋一台在前面增加 scalability
  3. 高擴展性架構 client -> load balancer -> * ( Nginx reverse proxy -> * node.js) -> * database cluster -> Membership, Payment -> CDN -> S3 (static files)
  4. 也可以用 Cloud Service: Heroku, Nodejitsu, mongoHQ
  5. 解除 limit
    sudo vi /etc/security/limits.conf
    #add the following 4 lines
    root soft nofile 51200
    root hard nofile 51200
    * soft nofile 51200
    * hard nofile 51200
    sudo vi /etc/pam.d/common-session
    #add
    session required pam_limits.so
    sudo vi /etc/profile
    #add
    ulimit -SHn 51200
  6. 我們在找人, 把 github 帳號丟給我們就好了 <- Github 非常重要

那些 Mockup 沒告訴你的事

- Spearker: Adam Wang (阿當)
  1. mockup 是一個模型: 任何一張 screenshot 都算是
  2. 彈性: i18n, 圖片的濫用
  3. 對齊: line-height, box-model, z-index
    text-overflow: ellipsis; /\*CSS3\*/
  4. 一致性: 配色與變數, 狀態
  5. 親和力: ARIA, tabIndex
    <a role="button" href="#">Panic</a>
  6. 漸進式改良: CSS3 box-shadow, text-shadow, border-radius, keyframe-anmation; placeholder, required
    http://youtu.be/hdTxeR90_
  7. 是介面不是圖: 防呆, pushState/PJAX
  8. 卷軸: 一目瞭然, Parallax scrolling
    stellar.js
  9. 效能: lazyload 10.跨裝置設計: Responsive Web Design
    不要用 :hover 來做提示了, 請加上 :active // 觸控螢幕沒有 hover

磚業也要專業 - 如何成為更好的 PHPer

- Speaker: 大澤木小鐵
此演講獎大量的 guideline,可以直接看投影片
  1. 微薪技嘉是台灣工程師的寫照
  2. debug 工具:
    xdebug.org
    FirePHP
  3. 統一的編成風格 http://www.php-fig.org/
  4. 套件管理 Composer

你們都誤解了,網路是很安全的!

- Speaker: 翁浩正 (Allen Own)
  1. live demo
  2. 無知: 管理者需要學習
    1. 最新資安弱點: expolit
    2. 最新駭客攻擊手法
    3. 新建置技術、新防禦技術
    4. 避免僥倖心態
  3. 無能: 管理者需要修練
    1. 伺服器不安全
      • 系統未更新、修補
      • 未做安全性設定
      • 未使用服務沒關閉
      • 開發環境未隔離: 備份檔, .svn, .sql
      • 管理後台未隔離
    2. 應用程式不安全
      • 使用別人撰寫的套件或框架
      • 自行撰寫不安全程式或設定
      • 網站錯誤訊息未隱藏: 資料庫欄位, 實體路徑
      • 老舊程式維護困難
    3. 管理不安全
      • 權限控管
      • 密碼安全性原則
      線上破解 hash cmd5.com
  4. 無恥: 管理者未盡責任
    1. 隱匿不報
    2. 推卸責任
    3. 湮滅證據
  5. 相關網站
    security focus
    大陸網站

無廢話 DRBD + Heartbeat 實戰

- Speaker: Weithenn
  1. DRBD: Distributed Replicated Block Device
    • 可以想做是跨網路的 RAID 1
  2. 高可用性的三種實現方式
    • DNS
    • IP: Heartbeat
    • MAC
  3. Failover: 壞了後有人救
  4. Failback: 回復後會自動回來 (但因為機器可能時好時壞, 這個動作手動比較好)
  5. DRBD + Heatbeat 是 host-level 的 HA, 不是 application-level 的保護, 所以單一 application 出問題不會切換的

Maintainable CSS with Sass and Compass

- Speaker: hlb (registrano, compass.app, fire.app)
  1. SASS + Compass
  2. SASS 可以直接算 HSL
  3. 可以自動切 Sprites, 也支援 Retina
    不擔心 IE 6, 7, 8 可以用 Icon Font / SVG
  4. 3.2 新增 placeholder 解決 extend 的問題
  5. (中略)
  6. 方法學
  7. CSS code guideline
  8. 自動化產生 style guide

2012 年網頁技術濃縮咖啡

- Speaker: 吳逸文 (Even Wu)
  1. 網頁設計是資訊流的整理, 可以任意折疊 (RWD)
  2. 應該要用 SCSS
    • Fire.app 很好用
  3. 顏色與形狀要注意
    • 調和顏色比重
    • 間隔, 突出
  4. Web 字體,用 Cloud font。
  5. Responsive Design
    • 圖: 先暫位
    • 文: 遺尿 (可以用 Macho.js)
  6. Hi-DPI 設計

Develop Tools in Modern Browsers

- Speaker: OOO
  1. alert 會讓程式停下來, console.log 會繼續執行, 所以 alert debug 還是很有用
  2. Firebug 算是第一個前端的開發工具
  3. live 介紹 chrome 開發者工具
  4. live 介紹 opera 開發者工具
  5. safari + ipad => remote debug
  6. Firebug Lite 獨立 browser 的工具

Media Query 123

- Speaker: 閃光洽 (Hina)
  1. CSS3 的新特性
  2. 針對不同裝置螢幕大小載入不同的 CSS
  3. @media 靠 @viewport 而不是瀏覽器本身
  4. 寬度需要依照裝置螢幕的密度來換算
  5. Content first: 在任何不同裝置上, 都能看到一樣的重點
  6. RWD = @media + @viewport
  7. @viewport 沒事不要亂改, 可以複製貼上
    <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="width=device-width; initial-scale=1">
    <meta name="viewport" content="width=device-width; initial-scale=1; minimum-scale=1.0">

用原型驅動設計

- Speaker: 阿修 (Justin Lee/lis186)
  1. 專業分工: 研究 - 設計 - 前端 - 後端
  2. 環環相扣:
    • 使用者經驗設計師: 研究 + 設計
    • 使用者介面工程師: 設計 + 前端
    • 應用程式工程師: 前端 + 後端
  3. 打造原型
    • 紙面原型
    • 手工打造 HTML e.g. bootstrap
    • 工具打造 HTML e.g. FW
    • 影片
    • 互動 flash
    • 簡報
    • 可點擊 pdf
    • 線上工具
    • 立體模型
  4. Doule Diamond 設計流程: 點子 (Discover)-(Define) 願景 (Develop)-(Deliver) 成果
  5. 原型設計原則
    • 了解給誰看的
    • 設定要探索的範圍
    • 選擇適合的工具
    • 不一定要自己做, 用現成工具, 會意就好
    • 精細度足夠就好
    • 只做需要的部分
    • 早點開始做

網站效能調整-網站系統篇

-Speaker: TonyQ
  1. 效能簡單的定義: 更快的響應時間
  2. 效能調整的時間: 通常已經 production 了, 設計和實作階段只能假想效能問題, 但可能不是源頭
  3. 平民 style: 不用 cluster, load balance, data slicing
  4. 誰要來調整: team 內部的人, 外來專家不了解專案難以處理 (即使用 tools 也是)
  5. 4~5 萬 pageview/day 會碰到第一次門檻 (soft tune 即可), 10-20萬會碰到第二次門檻 (hardware 要強)
  6. 瓶頸產生: (1) 流量增加, (2) 新服務部屬, (3) 使用到外部 API
  7. 調整效能第一步: Profiling (在 tune 之前一定要做)
  8. Profiling 工具:
    • 開發者工具, 先了解時間耗損最多在哪
    • Database 的 slow query log
    • Google Analytics 找到 hot page, 找 downlaod time
    • 在 PHP 中插時間戳, 計算各部分所花的時間 (通常會符合 721 法則)
    • 在 JS 中插時間戳
  9. 一定要看數據說問題, 不要用猜的
  10. 有可能是 Framework 導致的, 例如 ORM 沒有用 lazy load
  11. 會有雪崩效應, 越來越多人按 F5
  12. table lock 要注意
  13. 方法:
    • Refine process
    • cache
    • index
    • 分離長時間的操作

沒有留言:

張貼留言

部落格是發表個人言論的地方,歡迎您給留言來進行討論與給予指教,但也希望您以理性開放的態度來看待文章內容,如果我也會尊重您的留言一般。謝謝