WebConf 2013 筆記
Day 1
開發 web 的遠大前程
- Speaker: 李智樺 (Ruddy Lee)- 要找到興趣很重要，不要為了達成特並目的去做
- Scrum 很重要, 但一個不能用
- 沒有 feedback, smaill iteration 就沒有敏捷開發
- 敏捷開發還是要寫文件 => test case, live docution
- 現在的 programmer 沒有人擁有自己的 code
- 開發團隊必須要有 一致的編程規範
- 時間管理很重要 番茄工作法
- Curation web, 兜兜哲學
node.js production site architecture
- Speaker: Ben (POP 作者)- 監控 node app: Monit(Ubuntu 內建) and Forever(node 模組)
- Nginx 可以作為 reverse proxy 和 static file server. 在 production 環境下可以擋一台在前面增加 scalability
- 高擴展性架構 client -> load balancer -> * ( Nginx reverse proxy -> * node.js) -> * database cluster -> Membership, Payment -> CDN -> S3 (static files)
- 也可以用 Cloud Service: Heroku, Nodejitsu, mongoHQ
-
解除 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 - 我們在找人, 把 github 帳號丟給我們就好了 <- Github 非常重要
那些 Mockup 沒告訴你的事
- Spearker: Adam Wang (阿當)- mockup 是一個模型: 任何一張 screenshot 都算是
- 彈性: i18n, 圖片的濫用
-
對齊: line-height, box-model, z-index
text-overflow: ellipsis; /\*CSS3\*/ - 一致性: 配色與變數, 狀態
-
親和力: ARIA, tabIndex
<a role="button" href="#">Panic</a> -
漸進式改良: CSS3 box-shadow, text-shadow, border-radius, keyframe-anmation; placeholder, required
http://youtu.be/hdTxeR90_
- 是介面不是圖: 防呆, pushState/PJAX
-
卷軸: 一目瞭然, Parallax scrolling
stellar.js
-
效能: lazyload
10.跨裝置設計: Responsive Web Design
不要用 :hover 來做提示了, 請加上 :active // 觸控螢幕沒有 hover
磚業也要專業 - 如何成為更好的 PHPer
- Speaker: 大澤木小鐵此演講獎大量的 guideline，可以直接看投影片
- 微薪技嘉是台灣工程師的寫照
-
debug 工具:
xdebug.org
FirePHP - 統一的編成風格 http://www.php-fig.org/
- 套件管理 Composer
你們都誤解了，網路是很安全的！
- Speaker: 翁浩正 (Allen Own)- live demo
-
無知: 管理者需要學習
- 最新資安弱點: expolit
- 最新駭客攻擊手法
- 新建置技術、新防禦技術
- 避免僥倖心態
-
無能: 管理者需要修練
-
伺服器不安全
- 系統未更新、修補
- 未做安全性設定
- 未使用服務沒關閉
- 開發環境未隔離: 備份檔, .svn, .sql
- 管理後台未隔離
-
應用程式不安全
- 使用別人撰寫的套件或框架
- 自行撰寫不安全程式或設定
- 網站錯誤訊息未隱藏: 資料庫欄位, 實體路徑
- 老舊程式維護困難
-
管理不安全
- 權限控管
- 密碼安全性原則
線上破解 hash cmd5.com
-
伺服器不安全
-
無恥: 管理者未盡責任
- 隱匿不報
- 推卸責任
- 湮滅證據
-
相關網站
security focus
大陸網站
無廢話 DRBD + Heartbeat 實戰
- Speaker: Weithenn-
DRBD: Distributed Replicated Block Device
- 可以想做是跨網路的 RAID 1
-
高可用性的三種實現方式
- DNS
- IP: Heartbeat
- MAC
- Failover: 壞了後有人救
- Failback: 回復後會自動回來 (但因為機器可能時好時壞, 這個動作手動比較好)
- DRBD + Heatbeat 是 host-level 的 HA, 不是 application-level 的保護, 所以單一 application 出問題不會切換的
Maintainable CSS with Sass and Compass
- Speaker: hlb (registrano, compass.app, fire.app)- SASS + Compass
- SASS 可以直接算 HSL
-
可以自動切 Sprites, 也支援 Retina
不擔心 IE 6, 7, 8 可以用 Icon Font / SVG
- 3.2 新增 placeholder 解決 extend 的問題
- (中略)
- 方法學
- CSS code guideline
- 自動化產生 style guide
2012 年網頁技術濃縮咖啡
- Speaker: 吳逸文 (Even Wu)- 網頁設計是資訊流的整理, 可以任意折疊 (RWD)
-
應該要用 SCSS
- Fire.app 很好用
-
顏色與形狀要注意
- 調和顏色比重
- 間隔, 突出
- Web 字體，用 Cloud font。
-
Responsive Design
- 圖: 先暫位
- 文: 遺尿 (可以用 Macho.js)
-
Hi-DPI 設計
- 多用 CSS3: 圓角, 陰影, 漸層
- 多用 Web fonts 和 icon fonts 或 SVG
Develop Tools in Modern Browsers
- Speaker: OOO- alert 會讓程式停下來, console.log 會繼續執行, 所以 alert debug 還是很有用
- Firebug 算是第一個前端的開發工具
- live 介紹 chrome 開發者工具
- live 介紹 opera 開發者工具
- safari + ipad => remote debug
- Firebug Lite 獨立 browser 的工具
Media Query 123
- Speaker: 閃光洽 (Hina)- CSS3 的新特性
- 針對不同裝置螢幕大小載入不同的 CSS
- @media 靠 @viewport 而不是瀏覽器本身
- 寬度需要依照裝置螢幕的密度來換算
- Content first: 在任何不同裝置上, 都能看到一樣的重點
- RWD = @media + @viewport
-
@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)- 專業分工: 研究 - 設計 - 前端 - 後端
-
環環相扣:
- 使用者經驗設計師: 研究 + 設計
- 使用者介面工程師: 設計 + 前端
- 應用程式工程師: 前端 + 後端
-
打造原型
- 紙面原型
- 手工打造 HTML e.g. bootstrap
- 工具打造 HTML e.g. FW
- 影片
- 互動 flash
- 簡報
- 可點擊 pdf
- 線上工具
- 立體模型
- Doule Diamond 設計流程: 點子 (Discover)-(Define) 願景 (Develop)-(Deliver) 成果
-
原型設計原則
- 了解給誰看的
- 設定要探索的範圍
- 選擇適合的工具
- 不一定要自己做, 用現成工具, 會意就好
- 精細度足夠就好
- 只做需要的部分
- 早點開始做
網站效能調整－網站系統篇
-Speaker: TonyQ- 效能簡單的定義: 更快的響應時間
- 效能調整的時間: 通常已經 production 了, 設計和實作階段只能假想效能問題, 但可能不是源頭
- 平民 style: 不用 cluster, load balance, data slicing
- 誰要來調整: team 內部的人, 外來專家不了解專案難以處理 (即使用 tools 也是)
- 4~5 萬 pageview/day 會碰到第一次門檻 (soft tune 即可), 10-20萬會碰到第二次門檻 (hardware 要強)
- 瓶頸產生: (1) 流量增加, (2) 新服務部屬, (3) 使用到外部 API
- 調整效能第一步: Profiling (在 tune 之前一定要做)
-
Profiling 工具:
- 開發者工具, 先了解時間耗損最多在哪
- Database 的 slow query log
- Google Analytics 找到 hot page, 找 downlaod time
- 在 PHP 中插時間戳, 計算各部分所花的時間 (通常會符合 721 法則)
- 在 JS 中插時間戳
- 一定要看數據說問題, 不要用猜的
- 有可能是 Framework 導致的, 例如 ORM 沒有用 lazy load
- 會有雪崩效應, 越來越多人按 F5
- table lock 要注意
-
方法:
- Refine process
- cache
- index
- 分離長時間的操作
