蝌蚪伯的摳頂筆記

Y2017W25
2017-06-24 12:00
Tutorials
- Webpack 2: The Complete Developer’s Guide - Stephen Grider
  - Section 1 ~ Section 9
    
    結果買了這個課程之後 Webpack@3 就出了😱
Books
- ECMAScript 6 入门 - 阮一峰
  - 前言
  - ECMAScript 6简介
  - let 和 const 命令
  - 变量的解构赋值
  - 字符串的扩展
...閱讀全文
Y2017W21
2017-05-27 12:00
Books
- 《tmux: Productive Mouse-Free Development》中文翻译
Articles
- webpack文檔 - 概念
...閱讀全文
用 React 開發具有完整 CI/CD 流程的 Chrome Extension
2017-05-21 23:32
前言
身為一個前端工程師，在工作上遇到一些需要反覆操作的流程時，總會想要用一些方法來優化它。像我自己也在公司開發了一些 CLI 及 Chrome Extension 來加速日常的開發。然而在開發了這些工具的同時，我卻也不經意的為自己引入了新的反覆操作，如果可以把測試、過版、壓檔、上傳、發佈……等步驟全部自動化，我就可以更專注的在新功能上的開發上。

底下將以開發一個新的 Chrome Extension 為例，利用 Travis CI 及 Chrome Web Store Publish API 做到完整的 CI/CD 整合。

開發環境
1
2
3
4
$ node -v
v6.3.1
$ yarn -v
yarn install v0.24.5
流程
1. 建一個新的 React 專案
2. Chrome Extension 設定
3. 基本 CI 設定
4. 自動化打包及發布 CD 設定
5. 發布 Chrome Extension
...閱讀全文
Y2017W20
2017-05-20 12:00
本週寫了一篇教學文，感覺過程中收穫不少。也許以後可以把想要深究的主題當做是下次連載的文章內容，強迫自己「教學相長」wwww。

Blog posts
- 用 React 開發具有完整 CI/CD 流程的 Chrome Extension
  寫了一篇 travis & web store publish api 教學，其實用了蠻多時間在實驗 auth 及驗証上傳有沒有成功。有在寫 chrome extension 的同學可以試試看。
Articles
- Web Fundamentals
  主要是有一些關於前端架構，效能及設計方面的文章，內容很多，可以中午配鈑吃。
Tutorials
- Try Docker by Code School
  免費在線暢玩 docker
...閱讀全文
git submodule 教學
2017-05-15 15:13
前言
Submodules (子模組) 其實是個很常見的概念，在專案中想要引入其他專案的代碼，亦或是第三方的函式庫，被引入的庫就可以被看為是一個子模組。

在 Node.js 的專案中，子模組是由 yarn / npm 來幫我們管理其中的依賴。其他的語言也有相對應的套件管理系統，像是 Ruby 有 RubyGems，Elixir 有 hex ……等，這些套件管理系統可以利用 semver 格式的版本號來拉取想要的子模組版本。

但如果想引入的專案並沒有放在套件管理系統中，或是這個語言根本沒有對應的套件管理系統的時候，要想管理子模組就開始會變得有點麻煩。我們需要有一個比較好的方式來靈活管理我們的子模組。
...閱讀全文
Y2017W19
2017-05-13 12:00
Blog posts
- 使用 prettier 自動調整 JavaScript 樣式
Books
- 图说设计模式
  - 看懂UML类图和时序图
  - 创建型模式
    
    简单工厂模式( Simple Factory Pattern )
...閱讀全文
使用 prettier 自動調整 JavaScript 樣式
2017-05-10 17:41
前言
prettier 是一款 JavaScript 的樣式處理工具，它類似 golang 的 gofmt 可以自動排版你的程式。除了 Vanilla JS 之外，尚支援了 ES6, jsx, Flow 以及正在開發中的 TypeScript。它是由 vjeux (Christopher Chedeau) 開發，在 github 上面約有 10,000 個 stars。

prettier 從今年一月的第一個 commit 開始到現在快半年，不過到它真正引起我的興趣，是從上週 (5/3) 釋出的 v1.3.0 開始。至於這個版本有什麼特別的功能嗎？非也。主要是因為這個版本有公開它在 Facebook 內部各專案使用 prettier 的情形。
...閱讀全文
Y2017W18
2017-05-06 12:00
Articles
- 開發人員的面試指南 – A developer’s guide to interviewing
  面試時除了面試官問你問題，你也可以反過來詢問這間公司的工作環境、獲利手段或願景等等。文中列舉你可能會想問的問題，並依詢問對象區分為工程師、管理階層以及 CTO。很適合已有實習經驗或是想換工作的工程師閱讀。
- About rel=noopener
  網頁中的 <a> 在連至外部網站時，需要帶上 rel="noopener"，以避免惡意網站利用 window.opener 來改動原始網頁。
- 每位認真的程式設計師都要讀的10本經典書
  看過其中三本
  The Pragmatic Programmer
  (程序員修煉之道︰從小工到專家︰評注版)
  
  The Mythical Man-month: Essays on Software Engineering 👍
  (人月神話:軟體專案管理之道)
  
  Clean Code: A Handbook of Agile Software Craftsmanship
  (無瑕的程式碼－敏捷軟體開發技巧守則)
  
  The Clean Coder: A Code of Conduct for Professional Programmers
  (無瑕的程式碼番外篇－專業程式設計師的生存之道)
  
  Refactoring: Improving the Design of Existing Code
  (重構─改善既有程式的設計)
  
  Working Effectively with Legacy Code
  (修改代碼的藝術)
  
  Code Complete: A Practical Handbook of Software Construction
  (代碼大全 2)
  
  Head First Design Patterns 👍
  (深入淺出設計模式)
  
  Peopleware: Productive Projects and Teams
  (Peopleware：腦力密集產業的人才管理之道)
  
  Soft Skills: The software developer’s life manual 👍
  (軟體技能代碼之外的生存指南)
...閱讀全文
Y2017W17
2017-04-29 18:04
Leetcode
...閱讀全文
Y2017W16
2017-04-22 18:04
Books
- Programming Phoenix: Productive |> Reliable |> Fast - Chris McCord
  - Chapter 4 - Ecto and Changesets
  - Chapter 5 - Authenticating Users
- 软技能代码之外的生存指南 - John Z. Sonmez, 王小刚
  - Chapter 1 ~ 16
...閱讀全文