做更越少，獲得越多！

昨天跟我的學生在台中星巴克喝咖啡，說真的，我已經很少去星巴克了，現在全家就能滿足我

記得七年前剛接觸網路行銷，台灣做這個領域的人沒幾個，國外一大堆，當聽到他們的生活模式時我超開心的。因為通常這些人只帶一個助理，或是只有自己一個人，例如：心靈雞湯的作者，秘密的作者

而他們每天的工作，都在星巴克或是家裡的廚房完成，重點是他們都有一個事業帝國

你不覺得很神奇嗎？不需要店租，裝潢，買一大堆機械，不用做員工管理...只要一個人就完成

接下來的日子，我就讓自己每天在星巴克，或是類似的咖啡廳完成一天的工作。同時我也堅持著一個人完成所有工作...一個人學寫wordpress模板，一個學php語法，一個人學影片錄製，一個人學...

你看了會不會頭痛啊！
然後我把學生訓練成跟我一樣的超人...（幸好折磨出幾個高手^^）

當我完成整個行銷系統正式銷售產品後，第一年的工作天數只有12天

接著我開始試著包裝其他的老師，因為我想證明在不同領域我也獲得一樣的成果，畢竟我是老師，我就要先做給學生看，不是只有出一張嘴。事實證明，我得到相近的結果，基本上我協助的人，他們什麼都不會，就只有專業知識，而且有的連專業知識都沒有，我就憑著一股熱忱做下去

可是，我發現我開始恨這份工作，討厭這份合作，這個時候我每天工作16小時...時薪從1.68萬降到 幾十塊

我告訴自己這是在磨練，但我的內心知道，這是在騙自己，因為我就是不喜歡做這些事。當時因為以上的這些因素，我錄了一個影片砍掉我所有的名單，並且鼓勵這個市場上的人，暫時退出市場

一年後，我又回來了，我的行銷功力又更好，這些事還是不斷上演

有天我問我自己，我為什麼這麼恨這份工作？

我給了自己很多理由，可是我又覺得不對。因為這份事業是大家夢寐以求的

所以我換個角度問，當時我是為什麼喜歡上這份事業的
答：因為我喜歡到哪裡都能工作，幫助很多人可以在網路上擁有一份事業

但這樣還是不夠，因為我還是逃避工作

於是我又換個角度問自己，我該做什麼事情，才可以讓自己很快樂的每天做這份工作，並且讓事業可以順利的擴張
最後我得到了答案：每天寫Eamil跟讀者建立關係，在鏡頭前分享有用的知識 完畢！

然後其他的部分，都由喜歡做這些事的人來做

這就是讓你每天起床後可以很快樂，堅持在你喜歡事業的方法，同時如果設計出一個良好生意模式的話，那麼你將會開始過很快樂的網路行銷生活

前幾封信我跟你提到了網路事業擴張的方法，這就是第一步：讓事業圍繞在你的強項，只做你在行，你喜歡的工作，當你找出強項後不斷的加強它

我以前拖垮自己的原因就在於，我試圖增強自己的所有技能，尤其是弱項，所以我毀了自己的事業

這是你今天的作業：
1.寫下你工作上所有該做的事
2.哪些事很重要，但是你一直推延，如果不做會影響到你的事業發展 ->別人的工作
3.哪些是由別人來做，會比你做得更好 ->別人的工作
4.哪些是你完全不應該做 ->別人的工作
5.所有工作 刪除掉 2 3 4的工作 =你樂在其中，而且會讓你事業發展的工作

你最喜歡哪件工作呢？做哪件事會讓你很開心，甚至是免費你也願意做呢？請在下面跟我們分享^^

下星期三晚上八點的直播，我將跟你分享事業擴張模組，這個模組會讓你突破整個網路行銷的盲點

很快跟你再聊
Marc

HTML/CSS/JavaScript 開發工具總整理

這篇幫您整理出實作 HTML/CSS/JavaScript 時，一些比較酷的工具、函式庫。非常有用！很推薦大家看！我簡單翻譯一下大綱，不過我會推薦以：

(1) 編輯器：教您用那個工具來撰寫 HTML/CSS/JavaScript 會比較好。
(4) 函式庫：補充 JavaScript 原來不足之處。如同加上「金剛飛翼（函式庫）」後的「鐵金剛（JavaScript）」就突然能飛是一樣的。
(3) 前處理器：把常用、好用、可能高達數百行的 CSS/JavaScript 程式碼，濃縮成一個名字，讓您使用後，彈指之間有如寫出數百行 CSS/JavaScript 般。
(2) 框架：原始碼外觀可能完全不像 JavaScript，但寫完後，會由框架轉換成 JavaScript 去執行。讓您不但「寫得少」，還有「功能多」的好處。有點像「前處理器」+「函式庫」的綜合體。
(5) 工具：一些測試、編譯、模板等工具，可以讓你的程式設計工作，更加自動化、更輕鬆。

這樣的順序來研讀。不過我底下的翻譯為了配合原文，無法調整成我認為理想的順序，請大家見諒囉！

原文連結：
https://tutsplus.com/tutorial/essentials-tools-for-a-modern-front-end-development-workflow/

---------

(1) 編輯器（寫碼之用）：

- 「Sublime Text 3」：
這個我們介紹過好幾次了！個人非常推薦！Sublime Text 3 是要錢的，不過它的前一版 Sublime Text 2，則可以「試用」到天荒地老，不另收費！

- 「Light Table」：
它的好處就是一邊編輯，可以一邊看到結果。不必等到用瀏覽器秀出來才知道對錯。不過這個特性個人沒有覺得有多好，我自己不太推。

- 「WebStorm」：
一個將「寫碼、偵錯、看結果」全部整合在一個視窗的工具。是很不錯！但如果您不喜歡掏錢買軟體，這個可能不是你要的。

- 「Vim」：
已經五十歲的一個老牌編輯器！免費、不太好學、但學會後您不會想換其它編輯器。這有點像開慣手排車的人，要他回來開自排車，簡直要了他的命一樣。

- 「Brackets」
也是整合「寫碼、偵錯、看結果」於一身的工具。Adobe 研發、免費。不過整合得沒有 WebStorm 好，很多功能 Sublime Text 2/3 也做得到。所以個人還是認為學 Sublime Text 比較划算。

(2) JavaScript 程式框架（Frameworks）：

所謂「框架」，就是把本來要自己寫兩三百行程式碼才能實現的功能，讓您在彈指之間就寫出來的工具。如果您的程式碼用了「框架」，外觀上有可能看起來一點都不像 JavaScript 原始碼！不過它在底層「展開」後，仍然是 JavaScript 原始碼無誤！只不過你要寫的是那一兩行「未展開」的框架原始碼，而非「展開後」那兩三百行 JavaScript 原始碼就是了。

用框架來寫程式，就像你包餃子是買做好的「餃子皮（框架）」來包，而非買「麵粉（JavaScript）」從頭做起。時間上省了很多！

比較著名的 JavaScript 框架有（可以混用）：

- Backbone：jQuery （一種函式庫，後述）最流行的框架。
- Ember.js：提供一堆很美麗的 Cocoa UI（一種用 JavaScript 寫成的人機界面），還讓你用少少幾行完成。
- AngularJS：Google 提供！主要用來擴充 HTML 的功能之用。著重在功能面上的一個框架。
- Knockout.js：它著重在「資料綁定」。這是 Backbone 比較弱的一環。Backbone 做資料綁定可能要好幾百行，Knockout.js 大概只要十幾行就完成了。
- Meteor：架構在 Node.js（一種跑在伺服器上的 JavaScript，地位等同 PHP）的框架，目的是希望讓 Node.js 的程式師能少寫幾行程式碼。
- Mocha：一種針對「JavaScript」做「單元測試」的框架。類似 Java 裡的 JUnit。競爭對手包括「Jasmine」與「QUnit」。

(3) 前處理器（Preprocessors）:

所謂「前處理器」，就是把一些常用、複雜的 CSS/JavaScript 寫法，賦予它一個簡短名字。然後只要你在 CSS/JavaScript 原始碼內 寫上這個名字，這些前處理器，就會把它展開，還原成原來 CSS/JavaScript 的樣子。這會讓你大大縮短開發時間！著名的前處理器排列如下（大部份人會慣用其中之一即可，雖然也可以混用）：

以下是 CSS 的三大前處理器：
- Sass
- LESS
- Stylus

以下是 JavaScript 的兩大前處理器：
- CoffeeScript
- TypeScript

以下是全方位的前處理器：
- CodeKit
- LiveReload

(4) 函式庫（Libraries）：

所謂函式庫，就是人家幫你寫好的 JavaScript 副程式。想用時，直接拿來呼叫即可。正如「鐵金剛（JavaScript）」本來不會飛，加上「金剛飛翼（函式庫）」後，就有飛的功能了。著名的函式庫如下所示：

- jQuery：它是用來操縱整個 HTML 節點（或稱 DOM 結構）最棒的函式庫！講到操作 DOM，除了 jQuery 外不作第二人想！
- Underscore：它是用來補足 JavaScript 沒提供「顯而易見」函數而被發明出來的。如 find(), shuffle()...等。它與 Backbone 框架緊密結合。用了 Backbone 的人很少沒聽過 Underscore 的大名的。
- D3：它的拿手好戲就是顯示統計圖表！如果你想用 JavaScript 顯示各類統計圖表，D3 絕對不可錯過！

(5) 工具（Tools & Utilities）

- RequireJS：一個 JavaScript 檔案/模組載入器。允許你把 JavaScript 寫成小小模組，然後像樂高積木一樣載入使用。不好學，但學會後很值得。
- Testem：JavaScript 的測試用工具。
- Grunt：一個可以將 JavaScript 的編譯、載入、測試、執行工作，自動化的命令列工具。類似 C 語言世界裡的 make。
- Normalize：可以將你的程式碼，改到連用 IE 低版本瀏覽器來看，效果都跟 Chrome 或 Firefox 一樣的工具。
- HTML5 Boilerplate：它裡面包含了上百個「模板」，可以讓你「拷貝與貼上」，就能擁有強大的網頁功能，不必寫大量程式碼。
- Twitter Bootstrap：由 Twitter 工程師貢獻的大量模板，也是可以讓你「拷貝與貼上」使用它們。
- Foundation 4：與 Bootstrap 是競爭對手、也有大量模板供你拷貝與貼上使用之。

https://tutsplus.com/tutorial/essentials-tools-for-a-modern-front-end-development-workflow/

---
原文已經率先刊登於 G+ 私密社團「紀老師網頁程式設計」。對 HTML/CSS/JavaScript 感興趣的朋友，可以申請加入：

https://plus.google.com/communities/100793154849235819235

（申請制，審核時間 24 小時內）