Justpaste

A convenient image uploader

Transcript

1. Justpaste A convenient image uploader http://justpaste.shume.in Shu-Ming Chang @ CNA micro conf.
2. Who am I • Shu-Ming Chang (ciffel) • Full time student at NTHU CSIE • CCU alumnus • Love web development and ruby • But work with Python... • Hate duplication (DRY)
3. 今天要分享的是 JavaScript
4. 今天要分享的是萌圖
5. 聊聊圖⽚片分享
6. 以前如何截圖？ 1. PrintScreen
7. 以前如何分享截圖？ 2. 開啟⼩小畫家
8. 以前如何分享截圖？ 3. 貼上
9. 以前如何分享截圖？ 4. 存檔
10. 以前如何分享截圖？ 5. 上傳
11. 以前如何分享截圖？ 6. 取得連結
12. Why Justpaste • 分享圖⽚片，特別是截圖 • 簡化處理的步驟 • 圖床 (imgur)
13. Justpaste 1. PrintScreen or Ctrl-C
14. Justpaste 2. 貼上
15. Justpaste 3. 取得連結
16. 實況看動畫 Live Demo
17. 實作細節
18. More Detail • HTML • Canvas • CSS • Bootstrap • Javascript (jQuery) • DOM traversal • Cross domain AJAX
19. Clipboard與Browser的 愛恨情仇 • ⼤大多Browser都限制Clipboard的存取權限 • Firefox, Chrome可讀取 • 但不能”寫⼊入” (Read-only)
20. Chrome讀取Clipboard • Google Chrome • window.Clipboard • window.addEventListener("paste", pasteHandler); • 從event.item[]中可以取得內容
21. Firefox讀取Clipboard • Mozilla Firefox • <div contenteditable="true"></div> (hide) • 要確保focus在此 • window.addEventListener("paste", pasteHandler); • 在DOM中取得children node (img)
22. 寫⼊入Clipboard • Flash • ZeroClipboard • 但是還是要有click的⾏行為，無法隨⼼心所 欲的寫⼊入
23. 談談圖床吧 • imgur • RESTful API • Free: 1250 uploads per day • 有⼈人上傳糟糕圖，不會被報警處理
24. Justpaste純Front-end • 曾經有個Ruby+Sinatra back-end • 現在純JavaScript • Cross domain AJAX呼叫RESTful API • 需要Server⽀支援 • http://www.html5rocks.com/en/ tutorials/cors/
25. 為什麼要做Web App? • 其實我也做過Native App直到我...... • Web App的好處 • ⽐比較潮 • 不需要安裝 • 版本永遠是最新的
26. Future Works • Drag and Drop (current working) • Browser extension • History • Album
27. Source Code https://github.com/ciffel/justpaste