「TechBridge 技術共筆部落格」&《創意電力公司：我如何打造皮克斯動畫》

TechBridge 技術共筆部落格

這週的軍中讀物一樣是走一個部落格＋一本書的模式。由於入伍兩個月來幾乎沒讀什麼技術相關的東西，所以這次挑了 TechBridge 這個技術共筆部落格的文章來看。它主要是由四個工程師負責撰文，近期有時會有新作者的文章，講的技術涵蓋 Web、App、機器人、新的語言、基礎 DSA 和數據分析......等等，當中也有不少適合初學者的文章。

對於我這樣一個比較常寫 Web 的人來說，裡面讓我偏愛的主題大概是 Web Security 和 Optimization 這兩塊吧。像是 XSS、CSRF、SQL Injection、DDoS、CSS keylogger 和一些各式各樣的 OWASP issues，這些文章把它們的機制寫的淺顯易懂，讓我感覺醍醐灌頂，對資安防禦有更深刻的理解。而 Optimization 相關的主題主要跟前後端的 Cache 有關，另外也有一些針對 React、Browser 的性能優化，又或是像 WebAssembly 這種高效能新技術的介紹。

其他我覺得不錯的主題有：直播、WebVR、支付 API、RxJS 等特定技術介紹，React Fiber、Flux、DOM、Ajax、原型鍊等 Web 原理講解，Sketch、D3v4、Canvas、CSS 等視覺化相關的操作指南。有些原本就懂的東西，看過別人的解釋後會有全新的感受；而沒接觸過的技術在讀了介紹後更覺得新奇有趣，會想直接在放假時做些嘗試。簡而言之，那些跟我日常開發密切相關，並且能提供幫助的主題總是讓我收穫最多。

當然這個部落格涵蓋的內容絕對不只這點，只不過像機器人這種我過去涉獵較低的領域，或是類似 Python 新手入門這種太簡單的教學文，對於我產生的影響就相對小了不少，畢竟手邊沒有電腦，在理解較少的情況下只能當走馬看花，略顯可惜。下面列出一些我喜歡的文章。

資安

〈與 DDoS 奮戰：nginx, iptables 與 fail2ban〉
〈Web 資訊安全（Security）簡明入門教學指南〉
〈讓我們來談談 CSRF〉
〈我遇過的最難的 Cookie 問題〉
〈Top issues on OWASP〉
〈CSS keylogger：攻擊與防禦〉

優化

〈Browser Rendering Optimization〉
〈資料庫的好夥伴：Redis〉
〈循序漸進理解 HTTP Cache 機制〉
〈前後端分離與 SPA〉
〈了解 WebAssembly 的基礎使用方法〉
〈React 性能優化大挑戰：一次理解 Immutable data 跟 shouldComponentUpdate〉

特定技術

〈直播協定 hls 筆記〉
〈2017，讓我們再來看看 Web Components 吧！〉
〈Web VR 初探〉
〈統一網頁支付介面：Payment Request API〉
〈Reactive Programming 簡介與教學(以 RxJS 為例)〉
〈希望是最淺顯易懂的 RxJS 教學〉

心得與推薦

〈記一次軟體工程師面試心得〉
〈別猶豫了，來修 CS50 吧！〉

演算

〈淺談二分搜尋法〉
〈Shingling, MinHashing and Common distance measure I〉

視覺

〈給工程師的 Sketch Prototyping 簡易入門教學〉
〈與 CSS Grid 的第一次接觸〉
〈CSS 魔術師 Houdini API 介紹〉
〈D3v4 工作坊 - React + D3 繪製 svg 動態路線地圖〉
〈D3v4 & Canvas 工作坊 - D3 + Canvas 繪製動態路線圖〉
〈D3v4 工作坊 - 製作 D3 plugin 來繪製草圖風格長條圖〉
〈用 CSS 畫畫的小技巧〉

Web

〈一看就懂的 JSX 簡明入門教學指南〉
〈從 Flux 與 MVC 的差異來簡介 Flux〉
〈一看就懂的 React 開發環境建置與 Webpack 入門教學〉
〈淺談 React Fiber 及其對 lifecycles 造成的影響〉
〈輕鬆理解 Ajax 與跨來源請求〉
〈DOM 的事件傳遞機制：捕獲與冒泡〉
〈該來理解 JavaScript 的原型鍊了〉
〈用 Node.js 快速打造 RESTful API〉
〈如何做出一個好的 NodeJS 模組？〉
〈後端軟體工程工具箱：資料庫/SQL/ORM篇〉

App

〈Progressive Web App 會是未來趨勢嗎？〉
〈一看就懂的 React Native + Firebase Mobile App 入門教學〉
〈React Native in 24 Hours〉

《創意電力公司：我如何打造皮克斯動畫》 

再來談談《創意電力公司：我如何打造皮克斯動畫》 這本書，看完後我覺得是本值得細讀的好書。作者艾德文·卡特姆是個對電腦視覺有極大熱忱的電腦科學家，他早期在盧卡斯影業的電腦圖形部擔任領導，並在一次迪士尼動畫師參訪中結識了約翰·拉薩特。後來這個部門被賈伯斯收購，並改名叫皮克斯。透過結合艾德文團隊的新型電腦繪圖技術和約翰等動畫師的創意天賦，皮克斯創造出一部又一部的經典動畫電影。

《創意電力公司》這本書，是以艾德文第一人稱的視角，講述皮克斯從誕生到輝煌，再到被迪士尼收購的故事。書中的核心宗旨是透過故事的方式告訴我們，皮克斯是用什麼樣的方式打造其企業文化、努力的維持住源源不絕的創意，並且在公司逐漸擴大的情況下平衡各個部門的。

最後摘錄三段書中的內容，大概就可以看到一點皮克斯的精神了：

「把高明的點子交給平庸的團隊，點子就會毀在他們手上。把平庸的點子交給一支卓越的團隊，那麼團隊要麼對點子進行改進，要麼將點子推翻，並提出更好的構想。組織一支得力的團隊是保證點子發光的前提。思想源於人才，因此人才要比點子更加重要。將人才放在第一位的作法正是在捍衛我們的企業文化。」

「皮克斯所有影片的樣片都是一團糟，而我們的工作就是把這些影片從『不堪入目』提升到『可以一看』的水準。想像一下，一部由會說話的玩具來頂大樑的影片，一不小心就會落入缺乏創意，煽情私膩或是商業味太濃的俗套；一部有關老鼠掌廚的影片，這創意是多麼令人倒口；而『瓦力』開頭那沒有一句對白的 39 分鐘，又是怎樣的一步險棋啊！我們雖然敢於在這樣的劇情上下注，但是並不代表這些劇情一次就能領到『通關卡』。這是一個再自然不過的事實，因為創意總要從某處開始，我們篤信支持互助、坦誠回饋的力量，也相信只有通過三番五次的返工，返工，再返工，才能為有缺陷的劇本找到突破口，為空洞的角色賦子靈魂。」

「安德魯經常把『失敗要趁早，失敗要盡快』以及『人應當盡可能地壓縮犯錯的時間』掛在嘴邊。在他看來，失敗就好像學騎自行車，如果你幻想不出岔子，不跌幾個跟頭就能學會，無異於癡人說夢。安德魯說：『盡你所能找一輛矮的自行車，戴上護肘和護膝以消除你對摔跤的顧慮，然後就開始學吧。』如果你每次嘗試新事情時都使用這樣的思維模式，你就可以慢慢學會顛覆失敗的負面含義了。安德魯這樣說：『你不會對一個第一次學彈吉他的人說：你應該先好好琢磨一下手指在琴頸上的位置，然後再開始彈，因為你只能彈一次，沒有第二次了。如果你出了岔子，我們就不管你而直接往下進行了。』」