最近好不容易碩士口試結束了，可以花點時間趕緊來追一下過去幾個禮拜...幾個月 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
   • ColorSnapper
   • HSL Color Picker
   • SassMe
3. 可以自動切 Sprites, 也支援 Retina

   不擔心 IE 6, 7, 8 可以用 Icon Font / SVG

4. 3.2 新增 placeholder 解決 extend 的問題
5. (中略)
6. 方法學
   • OOCSS
   • SMACSS
   • BEM
7. CSS code guideline
8. 自動化產生 style guide
   • KSS
   • Styledocco

2012 年網頁技術濃縮咖啡

- Speaker: 吳逸文 (Even Wu)

1. 網頁設計是資訊流的整理, 可以任意折疊 (RWD)
2. 應該要用 SCSS
   • Fire.app 很好用
3. 顏色與形狀要注意
   • 調和顏色比重
   • 間隔, 突出
4. Web 字體，用 Cloud font。
   • Typekit (歐文)
   • Justfont (中文)
   • Typesquare (日文)
5. Responsive Design
   • 圖: 先暫位
   • 文: 遺尿 (可以用 Macho.js)
6. Hi-DPI 設計
   • 多用 CSS3: 圓角, 陰影, 漸層
   • 多用 Web fonts 和 icon fonts 或 SVG
     • http://symbolset.com
     • http://pictos.cc
     • http://fortawesome.github.om/Font-Awesome
     • http://adamwhitcroft.com/climacons/font

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
    • 分離長時間的操作