草監網路

[公告]草監網路更改網址至gratch.tw

2020-09-14T17:32:00.017+08:00

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉

前言

嗨，各位草監網路的朋友們，經過多年的思考，與一個不小心手賤改爛Blogger的版型後，我終於決定改用Wordpress系統，從Blogger中搬離出來，並將網址從https://nowills.blogspot.com改成http://gratch.tw。

為什麼搬離Blogger

最近我在看Google地圖革命這本書，裡面有小篇幅地提到Blogger與Sketchup，這兩個當初都是被Google收購之後，因為搶不到核心資源，又因為是被收購的子團隊，所以非常的邊緣，Sketchup就目前的情況，Google已經轉手他人，雖然Blogger最近積極改版，但很多地方還是很難用，我想Google需要Blogger的部分只因為他是部落格系統，而搜尋引擎需要內容，至於Blogger發展好壞，其實多年來使用Blogger的朋友應該都可以感覺的到，Google根本不在乎Blogger發展如何，相較於收購Youtube後的大動作，Blogger就顯得黯淡無光，有鑒於搬離Blogger是遲早的問題。

那為什麼是現在？

這個問題很單純，我在一開始也有提到，我一個不小心手賤的把我原本的Blogger版型改爛了，又修復不了，再加上內建版型十分難用，導致兩個月後我的流量只剩原本的十分之一不到。趁著現在流量很低，我覺得是一個從新出發的好時機，所以就變成現在了，剛好趁了這幾天工作空檔，花了兩個小時先建置出大概的Wordpress版型，花了五天在轉移文章、處理文章連結，到現在都還在陸續處理中，希望這個禮拜我可以處理完畢，正式將草監網路從Blogger轉移到現在的Wordpress架構下。

為什麼採用Wordpress？

我大概從Wordpress 2開始就有率續在使用，但一開始的Wordpress在對新手入門的門檻來說有點太高，你需要花時間研究程式才可以自己設計部落格頁面，再加上內建的所見即所得編輯器其實跟Blogger相比並沒有落差太多，所以跟Blogger想比就顯得沒有什麼優勢。但現在的Wordpress 5將所見即所得編輯器優化成Block編輯器，再加上現在tempalte builder plugin非常的多，我試用了幾款之後，目前主要採用的有Elementor 與 Oxygen Builder，這兩個編輯器相似度雖然很高，但他們的使用者族群是不同的，Elementor比較傾向給對Html、CSS等coding比較無法的使用者，直接拖拉設定就可以了，但對於可以自行coding的人來說Oxygen Builder 反而比較好一點，當然Oxygen Builder也有拖拉、設定就可以好的套件，但很多時候在display的部分都需要自行設定，這部分對於不會coding的人來說就顯得比較難懂一點。如果你問我這兩套一定要挑一套，哪一套比較好？我會毫不猶豫地跟你說Oxygen Builder，因為我自己在前端coding有一定的能力，後端也稍微懂一些，所以對我來說Oxygen Builder的靈活度比較適合我，可以有效降低學習Wordpress的template如何建置的門檻，後續我如果想要部分客製化，只要使用Wordpress現在得外掛，再搭配Oxygen Builder去做一些客製化，就可以達到我想要的效果。另外我覺得Oxygen Builder更優於Elementor的一點，是用Oxygen Builder開發的前端頁面程式碼較為乾淨，在瀏覽器讀取上速度更佳，但Oxygen Builder的缺點就是你無法使用其他現成佈景，如果你比較喜歡用現成佈景再去做一點修改，那建議你還是用Elementor會比較適合。

gratch.tw是怎麼來的？

因為這幾年不管是工程師還是設計師，在Line上都有許多群組，我自己也有開了幾個，一開始我以為沒有人認識我，結果開始慢慢的有人突然稱呼我「草大」，因為部落格名稱為「草監網路」，所以大家就乾脆簡稱我為草大，但其實草監兩個字合起來就是藍色的藍，草監這兩個字是為了紀念我之前的舊名字，而網路是因為我的工作一直都跟網站有關，而網站又擁有許多不同媒材，將網站把各種媒材做結合就會形成網絡，跟網路是一樣的，所以我愛網路，我的專長是做網站、興趣也是做網站，所以才會叫草監網路，如果直翻應該要叫 blue network 或 blue web 之類的，但我覺得這跟大家記得的「草大」落差有點太遠了，所以乾脆就採用草的 grass 與監的 watch 去做一個結合與簡寫，於是gratch這個字就出現了！

後續的規劃

草監網路依然會繼續撰寫一些與網路、網站有關事，不管是經驗分享或是學習筆記，只要跟網站有關事，都會繼續在這個部落格裡分享給各位，而其他與網路、網站沒關係的部分，日後如果有新文章都會在另外的部落格做分享，也就是說草監網路會著著專業領域的道路繼續前進，也希望未來的每一篇文章都還是可以看到你 : )

[node.js] npm ERR! code EACCES 問題解決

2020-06-09T00:32:00.002+08:00

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉

今天晚上在裝webpack的時候突然遇到問題，清掉cache也無解，認真的看了一下才發現原來是資料夾權限有問題啊！

如果你跟我一樣遇到npm ERR! code EACCES 然後 errno -13的話，你只要輸入以下兩個指令，修正資料夾權限問題，就可以解決這個問題

sudo chown -R `whoami` ~/.npm
sudo chown -R `whoami` /usr/local/lib/node_modules

本篇解答來源於stackoverflow的How to fix EACCES issues with npm install

[教學] CodeIgniter 4 快速上手 (ㄧ) 下載與安裝

2020-05-30T02:03:00.004+08:00

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉

CodeIgniter 是一個PHP 基底的框架，由於PHP7的執行效率比PHP5好，所以CodeIgniter 4 幾乎重寫了整個架構，採用PHP7作為基底，並於2020年5月1號正式發布，沒錯！就是今年的勞動節，趁著它發表還沒多久，我們就來試試看看有哪些坑要採吧！

開始開發前請確定你的電腦裡有足夠可以運行PHP7.2以上的環境，並且搭配Mysql或MariaDB資料庫，如果這個部分不會的朋友，建議google一下xampp、mamp、ampps等等的其中一套LAMP套裝軟體，以快速建置你的本機PHP執行環境。

無廢話開始教學！第一步就是安裝CodeIgniter 4，你可以透過 Composer下載，也可以用 git 從 github上clone下來，本篇要教的是連程式小白都會的從官網直接下載法！跟著以下步驟保證你零基礎也沒問題啊！

前往CodeIgniter 官網下載 CodeIgniter 4
下載回來直接直接解壓縮，會出現一個framework-4.X.X，把該資料內的檔案全數複製貼到你的開發環境中。
接著因為這個東西是外國人發明的，所以我們要添加語系包，讓錯誤訊息可以中文化，因此我們一定要到官方的github下載多國語言語系包，下載回來之後將「/Language」內的zh-tw資料夾，貼到我們開發環境中的「app/Language」內即可。
確定你的的開發環境是有正常啟動的，然後開啟你開發環境中的“/app/Config/App.php” ，確定第24行的public $baseURL 的設定符合你的本機環境。有些人要改成http://localhost 或是 http://localhost:8080，有些人可能是自訂名稱，像我用mamp我就是用內網ip的模式，所以這裡每個人都可都有點差異。
設定完baseurl 變數之後，我們要往下設定第66行的「$defaultLocale」，將其從en設定成「zh-tw」，也就是我們步驟3所複製的那個Language資料夾，如此一來我們就把錯誤訊息都設定成繁體中文了！
時區的部分也不要忘記了，讓我們繼續往下看到第102行的「$appTimezone」，把America/Chicago改成「Asia/Taipei」，到這邊這個App.php設定檔就差不多完成了。
我們回到開發環境的根目錄，將public資料集裡面的「.htaccess」跟 index.php 複製一份到根目錄，接著打開你剛剛建立在根目錄的index.php，將16行的「../」移除，如下圖：
在瀏覽器中開啟你的本機測試環境，你就可以看到歡迎頁了！
如果你想要開啟除錯模式，在CodeIgniter 4 你可以快速切換成開發模式來開啟除錯模式，只要在根目錄找到檔名env的檔案，將其複製一份，並重新命成成「.env」，然後將裡面的第17行設定成「CI_ENVIRONMENT = development」即可快速切換成開發模式，當然你也可以改回「CI_ENVIRONMENT = production」即可關閉。

以上就是本次的CodeIgniter 4 下載與安裝的教學，如果有哪邊寫錯或不清楚的地方麻煩留言告訴我，我會盡快修正的。

[創業] 關於職業道德這件事

2020-05-21T17:03:00.002+08:00

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉

一直以來我覺得要做好一個網站，絕對不是個人戰，而是團體戰，畢竟一個人能涉略的內容始終有限，學得廣的人不見得可以學得深，學得深的也容易因為廣度不夠而忽略了某些事，所以一直以來我都把自己放在學的廣的範疇裡，而其他夥伴放在學的深的範疇裡，以避免任何一個視角有任何遺漏的地方，這是目前我想得到最萬全的配置方式。

因為肺炎影響，普遍實體店面的生意都不少影響，小至餐飲店，大至婚宴會館、飯店、酒店，今年關門、倒閉的真的很多，就連我們做數位的也都有影響，隨著客戶生意不好，預算大幅刪減、結束營業直接關閉網站等等，為了提供好的服務品質，我們一直以來服務的客戶真的不多，所以每個結束營業或刪減預算的客戶對我們來說，都影響很大，但我們明白客戶這樣做的原因與理由，所以我們也只能繼續努力，不管是開拓客戶或是合作夥伴等等，我們都想盡辦法努力著。

最近我們手上有客戶要做SEO，雖然個人我也有涉略不少，過往也有將不少關鍵字操作到第一頁甚至第一名過，但一直都很想知道其他專業的SEO人士會做什麼事，心裡想著他們應該會比我專業吧，至少深度會比我深才對，於是就跟朋友合作這個SEO的項目，盤算著如果兩方一起做應該可以互相補強不足或遺漏的部分，雖然不覺得會有一加一大於二的效果，但至少也會超過一吧？沒想到卻發生了一件我覺得十分扯的事情，我甚至覺得對方一點職業道德都沒有。

因為朋友A也開公司了，營業項目裡有SEO，因為跟朋友A認識許久，也一直說要合作卻一直沒有適合的專案，所以這次就直接問了朋友A要不要一起合作，朋友A也爽快的答應了，然後朋友A把這件事委託給他的朋友B，而我完全不認識這個B，B先生自己也開了一家設計公司，服務內容除了一般關鍵字廣告、視覺設計、網站建置以外，B先生自己的專業技能是SEO，也有相關操作經驗，了解到這裡我當然覺得應該沒什麼問題，於是就將客戶的重要資料交付給B先生，並希望朋友A可以轉達拜託B多用點心在這件事上面，朋友A也答應了，到這裡我就開始等著B先生的作業時間，想不到B先生在確認專案並且拿到客戶資料後，B先生直接截圖客戶的網站數據貼在自己公司的粉絲團，開始數落客戶SEO做很差，隨便一間小公司都可以打趴等等的文案，而這件事是我在幾天後收到B先生那個錯誤百出的分析報告後才發現的，客戶的資料已經被B先生公開了至少五天，這五天不知道有多少人已經看過這些資料，而我在發現的當下第一時間也立馬通知朋友A，請B先生立即撤下，因為他已經洩漏的客戶的重要資料，朋友A當下嚇的都呆了，因為他沒想到B先生居然會洩漏客戶資料，而且還正大光明拿去打廣告，在我極度憤怒之下，朋友A通知了B先生，請他立刻撤下貼文，我也立即在那篇貼文下面留言請B先生撤下，於是15分鐘後貼文消失了，我原以為發生這樣的事B先生應該知道不可以這樣公開客戶資訊了，應該也將相關資訊撤下了，結果沒想到我隔天在Facebook某個Wordpress的社團發現了一模一樣的貼文！所以B先生根本只有撤下我當下發現那篇貼文，其他貼文根本沒有撤掉，這真的是刷新我的三觀，如果你幫客戶操作SEO後有成效，那當然你要當案例也沒有不行，問題是你根本什麼都還沒做就拿客戶的品牌去打廣告，還洩漏客戶的資料，你到底在想什麼？在我的警告下朋友A又立馬通知B先生立馬撤下，並且告知我已經沒有其他貼文了，怎麼可以這麼扯？

每當我問到重要的問題時，B先生就會開始拿業務話術來搪塞我，如果我今天是完全不懂的客戶，我也許可以被你唬過去，但很不幸的你的客戶這次是專業人士，那些話術看在我眼裡就是你在掩飾你不懂、你不會、你不知道怎麼辦的說法而已。朋友A真的人很好，很努力的在幫你處理我，我也明確的感受到朋友A他到底有多抱歉，我想跟B先生說，你事情惹得這麼大條，你的朋友還這麼努力幫你，我一次又一次給你機會，麻煩你好好、認真、專業的做好這個案子，讓我真的覺得你不是個騙子，那我真的十分樂意繼續跟你合作，還免費幫你打廣告，但麻煩你，這種天兵又刷三觀的不專業行為，甚至沒有職業道德的事情，不要再出現了！這個年已經夠難過了，你就別添亂了好嗎？

[徵才] 前端工程師助理或前端工程師

2020-03-18T19:57:00.001+08:00

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉

距離上次徵才已經是兩年前了，兩年前徵了一位PHP後端工程師，現在他已經可以獨立開發購物類型網站了，這兩年他從完全不懂PHP到現在，他只花了兩年就可以獨當一面，並且可以獨立開發難度較高的程式架構，詳情請見兩年前的徵才文，現在我們要徵前端工程師助理或是前端工程師。

兩年過去了，我們的平均年齡將近35歲了，需要心血來幫忙拉低平均值，畢竟公司也營運了六年，離職率又超低，每年公司也穩定成長，優於勞基法的工作條件，我們非常重視自律與自我成長，我們也很願意陪你從什麼都不會到變成團隊的依靠，如果您對前端工程師助理職缺有興趣，請先填寫問券：https://forms.gle/tdbQPLSFtDoZ4DwY7

從零開始/陪你成長/像家人一樣的團隊

我對前端工程師的定義很簡單，就是專心寫code，專注在前端發展上，你需要懂一些設計軟體，畢竟不是每個設計師都會幫你切圖，就算遇到會幫你切圖的，檔案命名也不見得是你想要的，所以你對設計軟體的學習是為了輔助你在工作上更順暢。你可以對HTML、CSS、javascript完全都不會，畢竟我們有在找助理，我也比較喜歡從頭開始訓練，但如果你不是應徵助理，那你至少要會HTML、CSS、javascript，其他加分條件是Less、Sass、Pug、git、Vue等等，歡迎列在自我介紹或自傳裡。

從2016年開始至今，我們已經累積超過10個國外設計獎項，舉凡designawards.asia、csswinner、awwwards都曾獲選過，團隊成員也曾獲得不止一次FWA獎項，致力將台灣的作品推向國際，讓世界看見台灣的數位軟實力！除了得獎以外，我們也致力培育有實力的人才，往年有協助企業導入最新技術、到國發會推廣技術、幫資策會培育人才，也曾經出過技術書籍、線上課程等等，所以對新人培訓有一定的認知。

抗壓力大挑戰/快速學習快速成長

如果你完全不會，但非常有信心自己可以耐得住學習的壓力，並且對自己期許可以在快的時間內從助理轉型成獨當一面的前端工程師，又剛好不得門路，千萬不要錯過這次機會，上次開職缺是兩年前，但那是後端，這可是開業以來甚至團隊組成以來第一次開放前端工程師名額，如果你想加入我們很久了，你也可以填寫問券報名，當你填寫完畢後，我會找時間與你聯繫！我第一次教人只花了三天就讓對方學會HTML與CSS，第二次教人只花了一週就讓對方可以獨立完成一個簡單的網頁，第三次教人......我已經不記得了！如果你一直覺得獨自學習很困難，沒有人陪你一起研究，別擔心，來我們這裡，天天都有工程師可以陪你一起聊程式，教學相長是我們最樂見得的事！

透過網路創造更多價值是我們的使命

我們協助客戶透過網路技術的運用，將現有價值加倍翻轉！但協助客戶固然很重要，你的價值對我們來說也很重要，透過實際作業你可以逐漸感受的自己的成長，我們有不同難度的專案，適合不同能力的你來實戰，每個環節我們也都有足夠專案、足夠資深的工程師可以帶領，不管是你想繼續深造前端的技能，或是想培養其他相關技能，我們都有不錯管道可以逐步培訓，就怕你不想學，不認真勤奮的人千萬不要來啊！

說了這麼多，如果你還有疑問，歡迎留言或直接聯絡我本人，我的Line ID是Nowill，如果看完你真的想加入我們，請先填寫問券：https://forms.gle/tdbQPLSFtDoZ4DwY7 我會與你聯繫

MAC必裝的Mac App軟體推薦

2019-10-09T16:41:00.002+08:00

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉

自從開始用Mac到現在，因為上一台在使用中常常出現小問題，也使用了四、五年時間，覺得又該升級我的生財工具，所以在去年底立馬訂了一台新的Macbook Pro 15寸 2018款，剛拿到新的Macbook pro 覺得多了一條touch bar 很不習慣以外，其實touch bar對我來說使用率還真的不高，大部分就是解鎖的touch ID、拿來播放音樂調大小聲跟調整螢幕亮度等等，其他的輔助功能我幾乎用不到，於是就覺得這條Touch bar給我濃濃的雞肋感，似乎存在感非常低，但我覺得很有可能是大部分軟體針對touch bar的支援度真的不高，以至於touch bar真的沒有什麼功能好用。算上這一台，這已經是我第四台Macbook pro 15寸了，從第一台還有吸入式光碟機到現在只剩下3個Thunderbolt 3 的USB-C孔，真的進步非常多啊！

首先，Mac除了會附贈作業系統OS，也可以免費升級OS以外，內建的iWork系列也是我覺得非常好用的軟體，iWork系列就包含了Page、Number以及Keynote，所以如果是買Mac來當文書機，你根本不需要安裝什麼東西就可以立即開始使用。如果從Windows剛換過來Mac系統的朋友，其實我個人覺得也沒有什麼障礙，所有的軟體都可以在finder找到，就等於Windows的「開始」了，至於常用快速鍵，你只要把Control鍵全部替換成command鍵（或稱蘋果鍵），基本上就差不多了，其他像是安裝軟體、移除軟體等等，Mac都比Windows簡單非常多。

第二個比較不一樣的是輸入法的切換，最新版的Mac OS輸入法切換是Control+空白鍵，以前是command+空白鍵，雖然改了好一陣子我偶而還是會不太習慣，再來如果你只是想快入中英文輸入法切換，很簡單你只要按一下「中/英」鍵，也就是平常在控制大小寫的那顆按鈕，這時你可能會問『那我如果真的想切換英文大小寫呢？』，別擔心，一樣是同一顆按鈕，只是你稍微按久一點就會切換英文大小寫了，再來我覺得第三個不一樣的就是軟體安裝與移除了。

Mac的軟體安裝有兩種，一種跟Windows很像要按一些確定、下一步等按鈕就可以完成安裝，另外一種你就是把你的App軟體拖曳到應用程式資料夾就完成了，這種方式真的超直覺又超沒有安裝感的，更別說移除應用程式了，在Windows上要移除軟體步驟非常多，但在Mac上你需要打開應用程式資料夾，然後把App軟體丟進垃圾桶，你就完工了，與你的現實生活對待垃圾的行為完全一至！

說了這麼多，現在就來聊聊我剛拿電腦後我會安裝的幾個Mac app軟體，其中大部分都是免費的，可以讓你的Mac更加強大，我順便也會介紹一些內建常用功能，所以你如果是Mac新手，這篇看完保證你經驗值瘋狂往上加，以下要介紹的Mac app軟體大部分都是要自行下載安裝，只有少部分有在App Store裡，自行下載安裝的軟體就需要「系統偏好設定」裡的「安全性與隱私權」裡選擇「一般」分頁，在下方會有一個「允許從以下來源下載的App」中選擇「任何來源」，如果你沒有這個選項，請在右上角點擊放大鏡Spotlight 裡，輸入Terminal(終端機的英文) 按下enter，就會打開「終端機」這個看起來很恐怖的黑底白字框，在終端機裡面輸入以下指令：
sudo spctl --master-disable
你可以直接複製以上指令貼在終端機裡，然後按下enter，畫面會出現password字樣，請不用害怕，在終端機裡輸入你的密碼，當你在輸入密碼時畫面不會有任何的改變或移動，你正常的輸入密碼，輸入完成後按下enter，即可以關閉終端機。接著如果你的「安全性與隱私權」裡的「一般」分頁還是沒有「任何來源」這個選項，請關掉「系統偏好設定」再重新來一次即可。如果你的「安全性與隱私權」裡的「一般」分頁顯示灰色無法讓你修改來源，請看左下角是不是有個鎖頭，點擊鎖頭輸入密碼後，鎖頭就會打開，你就可以修改成「任何來源」，接著養成好習慣，把把鎖頭鎖上即可，接著只要看到你喜歡的Mac app軟體，你就可以下載安裝來使用了。

Google Chrome (免費 Free)

雖然Mac內建Safari瀏覽器，但身為一個專業網站開發人員，我建議你另外安裝目前全世界最多人使用的Google Chrome瀏覽器，原因是Safari在不同OS不同版本下居然每個版本都長得都有點不太一樣，導致很多該支援的網頁語法或語言到Sfari就開始出現一堆問題，簡直就是悲劇的IE接班人，所以為了你的良好上網體驗著想，你還裝一下Google Chrome吧！
立即下載 Google Chrome

Line Mac版 (免費 Free)

Line是目前台灣使用率最高的社群聊天APP，大家打字的速度我相信都是電腦快過於手機或平板較多，有鑒於此，為了讓你訊息不漏接，或在必要時刻快速打字聊天的情況下，就非常建議你安裝一下Line的Mac桌機版本了，唯一比較困擾的是，輸入帳號密碼時你必須注意你的輸入法目前是中文還英文，我時常在登入時帳號密碼輸入完畢後，立刻看到登入失敗的訊息，通常都是因為我的輸入法切換成中文的緣故，所以你如果一直登入不能，請記得檢查你的輸入法目前是什麼語言喔。
立即下載 Line Mac版

截圖

Mac內建的截圖功能對我來說非常夠用，快速鍵是command+shift(向上箭頭)+3或4或5，3是全螢幕，4是擷取部分，5是完整的擷取功能，可以依據你的需求去做選擇，甚至還可以錄製螢幕，如果你按了4之後再加上空白鍵，你會發現你的滑鼠游標變成的照相機的icon，這時就會擷取你所選擇的視窗，其餘範圍都會是透明的，非常方便。如果只是截圖你可能會覺得還好，因為大部分我們可能都需要在圖上面畫點標示，或是打些字上去，這個功能Mac也內建了，有兩種方式可以在圖上面加上你想要標示，第一個方式就是當截圖完畢後，畫面右下角會顯示小縮圖，點擊小縮圖就會立刻進入繪圖模式，這時你就可以加上你想要的任何標示。另外一種方式是你的截圖都會直接存在桌面上，當你點擊打開圖片後，預覽程式也有繪圖功能，在上方工具列最右側的icon，你會看到一隻筆的圖示，點擊進去後就會進入繪圖模式了，所以針對截圖與基本的圖片標示功能這部分，我完全沒有想推薦的軟體，你真的該試試這些內建功能，真的非常方便好用又快速。

IINA (免費 Free)

IINA是一個非常好用的影音播放軟體，它支援了大部分的影音播放格式，雖然Mac有內建QuickTime Player，但它支援的播放格式實在太少，時常會遇到無法播放的情況。IINA也支持字幕導入，以往我會安裝VLC Player，但現在我已經全面改用IINA了。除了你電腦裡面的影音播放，IINA還支援線上串流與Youtube播放清單，但這兩個功能我就比較少用了，如果你時常看線上串流影音或是Yotube播放清單，你可以嘗試看看。
立即下載 IINA

Cheat Sheet (免費 Free)

換到Mac系統有一個阻礙就是常用的快速鍵似乎不靈了，有了Cheat Sheet你這個困擾可以瞬間解決！Cheat Sheet是一個很妙的Mac app軟體，只要安裝Cheat Sheet然後在「系統偏好設定」裡的「安全性與隱私權」，選擇「隱私權」分頁並在左側選擇「輔助使用」，然後將Cheat Sheet打勾，接下來你只要在任何軟體裡長按Command鍵，所有的快速鍵指令就會一次秀出來給你看！保證你多看幾次就能記起來，就算不想記也沒關係，只要長按Command鍵立馬可以查詢快速鍵！
立即下載 Cheat Sheet

Ityscal (免費 Free)

Mac內建右上角或顯示時間，我通常都會設定要顯示日期、星期與24小時制的時間，但我時常希望這個功能可以跟行事曆結合，通常如果要看月曆形態的畫面，在Mac裡你只能選擇行事曆這個軟體，當然你可以在行事曆裡面查看月份、安排行程等等的，但如果右上角的日期與時間就可以帶有這樣的功能不是更好？為了達到這個目的，我會安裝Ityscal，他可以將行事曆整合時間縮在右上角工具列上，這時右上角如果還有開啟內建的時間就會顯得很多餘，所以我就會關閉內建的時間顯示（系統偏好設定->日期與時間->時間分頁->取消第一個打勾），如此一來就會只保留Ityscal的日期時間，在做一些小調整即可完全取代內建的時間顯示。
立即下載 Ityscal
但如果你覺得Ityscal功能太強大，你想要在更精簡一點，只需要顯示月曆的話，那你可以改用Day-O 2 試試，也是個不錯的免費軟體喔！

Typora (免費 Free)

Typora是一套很簡潔得Markdown編輯器，如果有習慣在寫文章的朋友應該會知道Markdown這種輸入法，這種輸入法可以加速文章編寫的速度，也可以讓畫面更簡潔，使人更專心在寫作上，但剛使用Markdown的新手常常會不知道自己書寫的格式是不是正確的，這部分就是Typora的優點，因為Typora除了使用Markdown以外還結合了所見即所得編輯器的優點，讓你每完一行按下enter之後就自動轉換成正確格式顯示給你看，所以你很容易就可以知道你的Markdown格式是否正確，對於Markdown新手是非常友善的一個Mac app軟體，除此以外Typora的Markdown支援之強大，不管是表格、數學公式、甚至流程圖等等都難不倒它，如果你有寫文章的習慣，我非常建議你試試Typora，也許會有異想不到的效果喔！
立即下載 Typora

AppCleaner (免費 Free)

雖然說在Mac系統移除軟體只要拖曳到垃圾桶即可完成，但有不少軟體的設定檔是儲存在其他地方，所以如果要正完整清除一個軟體，我會建議使用AppCleaner，只要打開AppCleaner將你要刪除的軟體拖曳進去，AppCleaner就會自動掃描幫你抓出其他檔案，讓你一鍵清除乾淨，這個軟體不是必備的，這些設定檔存在電腦裡檔案也不會很大，所以其實有沒有刪除沒有非常重要，而且這些設定檔的用意是當你移除軟體後，哪天你又裝回軟體了，這些設定檔就會自動生效，你不需要重新設定軟體，所以要不要使用這個軟體，就看個人了，但你如果有點潔癖，我還是會建議你安裝一下啦！

立即下載 AppCleaner

Dozer (免費 Free)

當你Mac用久了之後你就會發現右上角的狀態icon多到一個爆炸，你會非常想要整理一下順序或是想隱藏一些icon，但Mac內建是沒有這個功能的，所以這個時候你就需要Dozer了，安裝Dozer後，你的右上角就會出現兩個原點，只要按下Command進行拖曳，你就可以改變原點或是右上角任合icon的順序，是不是很方便？如果你個人有點經費可以購買Mac app軟體，我會建議你改用Bartender 3，用起來的舒適度會比Dozer高一些，但如果你不想花錢，Dozer其實就很夠用了！如果安裝後不會使用Dozer，你可以看一下數位時代對Dozer介紹，非常簡單明瞭喔。
立即下載 Dozer

LyricsX (免費 Free)

對於愛哼歌但總是記不住的我，LyricsX簡直是神器，支援itunes與spotify等常用音樂播放軟體，可以直接線上搜尋歌詞顯示在你的畫面上，你不在「恩恩啊一」或「啦啦啦」的哼歌，可以直接看著螢幕開始唱，讓你瞬間可以一邊工作一邊K歌。LyricsX 還附帶歌詞延遲或加速的功能，讓你可以微調歌詞出現的時間，符合你個人的喜好，但如果你是跟胖虎一樣的朋友，建議你在周圍沒有任何人可以傷害耳膜的時候在使用，依然可以感受到大聲唱歌的愉悅喔！
立即下載 LyricsX

KeKa or eZip (免費 Free)

Mac內建的zip壓縮軟體非常的陽春，雖然用起來很簡單，但遇到其他壓縮格式就往往不支援，這時候就會建議使用Keka或eZip，我個人喜歡解壓縮前可以有個預覽功能先讓我看一下，所以我自己是用eZip比較多，但以功能來說我覺得Keka比較強大，另外比較有趣的一點是，Keka如果你透過Mac app Store安裝是需要付費的，這些付費是支持Keka繼續開發的動力，但你如果前往Keka官網下載是完全免費的喔！
立即下載 KeKa or 立即下載 eZip

以上就是我通常會在MAC新機上安裝的Mac App軟體，大部分對我來說都非常實用，有一些我有用但在本篇就沒介紹，對於新入手Mac的朋友我真的十分建議先尋找內建就有的方式，而不是先找有沒有相關軟體，Mac其實在大部分的情況下不安裝其他軟體都能符合你的基本需求，畢竟安裝軟體也會消耗硬碟空間，開啟使用也會消耗電腦性能，並不是所有的朋友都有能力購買最頂級的Mac，所以如果你只是購買入門款，在你使用的過程中，多多了解Mac有沒有內建的軟體可以協助你完成你想要的結果，我相信在尋找答案的過程中，你會越來越愛你的Mac！

[教學] 我們來用CRM吧！EspoCRM、vtigerCRM 與SuiteCRM

2018-09-08T19:58:00.002+08:00

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉

公司營運至今也有三、四年，一直以來都用很傳統的方式在整理檔案，並沒有採用任何CRM系統，常用客戶才會有登記在客戶的excel表裡，是的，我們用excel當作我們的CRM，就這樣用了兩年，雖然說沒有遇到執行上的問題，但是我總覺得我們一直在浪費這項資源，畢竟開發每一個客戶都要花很多時間，但是這些客戶開發後沒有再繼續維持的真的比想像中多很多，尤其是早期我們建置的網站，大部分客戶都還用到現在遲遲不肯更新，以至於我們跟客戶的緣分就僅止於一個網站開發的時間，緣分慎短，說來可惜。我們可以幫客戶的部分不光只是建立網站，還可以協助客戶拓展網路事業，透過網路我們可以幫你創造更多的價值，這才是我們團隊真正專業的地方。

如此這般的，我們來用CRM吧！

雖然我們擁有開發能力，但是一套專業的CRM勢必是要花許多時間才可以建立，雖然說近期公司專案上是有空檔，但是這空檔也不夠開發一整套完整的CRM，畢竟一套完整的CRM除了要可以掌握客戶名單以外，報價單、合約、發票等三大區塊也是基本必備的功能，另外還要可以發送email，如果報價單、合約可以透過系統產生並且自建流水編號，當然就會讓一切更有系統，搜尋也可以更加便利，其他功能像是服務或產品管理、日曆、會議或是銷售流程等等也是很重要的功能，這樣隨便列一列都可以開發出很多功能來，與其自己抽空開發，我想最快的方式還是尋找市面上的open source來解決問題，雖然不見得非常符合需求，但是至少是個不錯的開始！

透過Google，我找了好幾套open source的CRM來測試，像是SuiteCRM、VtigerCRM，還有一套叫EspoCRM，這些都是開源免費的CRM系統，我們就台一套一套好好介紹吧！

簡單易用的EspoCRM

EspoCRM內建多國語言，不需要另外安裝語系包，內建簡體中文可用，但是沒有繁體中文，介面操作上非常簡單易用，是採用左右兩欄設計，算是一套簡單小巧又容易上手的CRM系統，功能部分有客戶(公司)管理、聯絡人(窗口)管理、潛在顧客、商機、案例、電子郵件、日曆、會議、通話、任務、文件、行銷活動、知識庫、信息流、用戶管理，大部分命名都很淺顯易懂，操作上也不太需要特地學習，左手邊就是功能選單，新增一律在右上角，內容上方是搜尋，下方則是列表，是一套我覺得如果我們家也要開發CRM應該也會朝這個方向前進，畢竟這套CRM的介面操作邏輯與我們現在幫客戶客製化的後台管理系統操作邏輯是完全相同的，所以對我來說，一但架好我幾乎不用學習就可以立馬開始使用。

那既然EspoCRM這麼簡單易用，我為什麼沒有選擇它呢？原因是因為他少了數據分析、產品與服務、發票管理等部分。現今講求大數據的時代，凡事都必須要有有數據為依據，EspoCRM在這部分就顯得非常聰明，數據分析的功能你必須另外付費購買EspoCRM Advanced Pack，在這個Advanced Pack裡，你可以獲得報表、商業流程管理、工作流程、MailChimo串接、Google行事曆同步、Google聯絡人串接、產品管理、報價與發票管理。那這個Advanced Pack要多少錢呢？要美金495元，約台幣1萬5千元。雖然說EspoCRM非常簡單易用，但是在我還有其他選擇的情況下，這個1萬5千元要不要花就會變得很重要，再者我們只是一間小小工作室，還是要考慮成本問題，與其花1萬5買這個Pack，我可能寧願花在團隊的年度聚會上，因此這個EspoCRM到這裡就被我拋棄了。

你可以在這裡前往EspoCRM官方網站，也可以在這裡試用EspoCRM包含Advanced Pack的版本。

選單清晰有條理的vtigerCRM

vtigerCRM算是老牌open source CRM，是從更老牌的sugerCRM修改而成，而目前sugerCRM最新版本已經要付費購買，vtigerCRM最新版還是完全開源的。在選單的邏輯上顯得非常有調整，你很快就可以找到你所需要的項目，主要分成：行銷、銷售、庫存、支援、專案與工具等項目，對於產品的進銷存也是有不錯的管理，除了可以掌握客源也可以掌握供應商來源，如果不是銷售類也可以透過支援與專案進行服務類商業行為管理，算是不管各種商業模式支援度都是一等一的CRM軟體，也是我心中目前的第一優先選擇。

最後我沒有採用vtigerCRM的原因，在於目前vtigerCRM 7 並沒有繁體中文語系，語系安裝也需要通過擴展商店才能安裝，雖然有找到一些台灣的工程師自行開發的繁體中文資訊，但是礙於這些工程師不喜歡大家直接當伸手牌的緣故而沒有釋放出來，原本我想自個翻譯，但是進行了三天之後我就放棄了，原因是我的翻譯我自己覺得很怪，而且又沒有翻譯軟體的經驗，怕到時候翻譯出來變成四不像，導致好好一個CRM變的很難用，這也變成了我最後沒有選擇vtigerCRM的原因。另外對於vtigerCRM這樣包山包海的功能我其實也有點擔心，畢竟我想要的只是一個客戶管理系統，這樣包山包海真的好嗎？裝了一套超厲害的CRM但是我只會用到50%的功能這樣好嗎？反覆思考下我覺得似乎不太妥，所以即使是第一優先選擇，也漸漸的在我的清單中被劃掉了。

你可以在這裡下載最新版的vtigerCRM。

怪複雜又難懂的suiteCRM

suiteCRM與vitgerCRM一樣是來自於老牌的sugerCRM修改而成，所以本質上與vitgerCRM應該是差不多的，但是suiteCRM的選單就不像vtigerCRM那樣的好理解，雖然大部分vtigerCRM有的，suiteCRM也有，不過仔細核對後就會發現，suiteCRM少了供應商與支援區塊，所以讓suiteCRM可使用的範疇變得沒有vtigerCRM這樣的寬廣，雖然說功能變少，但是卻讓suiteCRM可以更專注在客戶維護、專案流程上，對於我們這種小型工作室來說，已經算很夠用了。

最後讓我選擇suiteCRM的原因也很簡單，suiteCRM擁有繁體中文語系翻譯檔，也就是大部分的操作都可以在中文介面下進行，所以也會讓學習門檻稍微降低一些，對於英文不好的我或其他同事來說也會更簡單。另外在系統擴充與設定的部分suiteCRM比vtigerCRM好非常多，suiteCRM不需要經過擴充市集進行擴充安裝，這意味著大家可以隨時開發擴充，擴充的發展就會比vtigerCRM來得自由一些，但是太過自由最後當然管理不易，最後當然還是回歸到vtiger那樣有擴充市集管理會比較好一些，suiteCRM深知這個道理，所以目前suiteCRM已經擁有線上市集，你可以從裡面找到很多不錯的應用跟佈景，數量遠遠多過vtigerCRM，付費方式有一次付清也有月租、年租等付費方式。

而suiteCRM本身在系統設定的部分，自由度也跟擴充一樣超級高，而且內建系統修復功能，像這樣龐大的系統難免會有出相障礙的時候，有內建系統修復功能的情況下，對於不了解程式的使用者或是對這麼龐大的系統感奈無奈的工程師就顯得非常體貼。再來studio工作室功能，這個翻譯在一開始我根本看不懂，後來嘗試了一下才發現原來這是資料庫與介面修改器，當我發現目前的欄位不符合使用時，我可以透過studio工作室自行新增，並且調整介面，這個功能除了可以修改繁體中文語系檔翻譯不確實的問題，而可以讓CRM系統更符合整體公司的流程，有鑑於這個studio的功能還有繁體中文語系的情況下，讓suiteCRM即使不是我心中的第一名，也雀屏中選了！

你可以在這裡下載最新版本的suiteCRM，與繁體中文語系。

在試用了suiteCRM一週之後，是發生了一些問題，但是就整體流程來說是非常符合我的需求，所以目前在快樂使用中，如果你也是一個小型的服務類型公司，我也會推薦你使用suiteCRM!

[跳坑] 超易懂RWD網頁前端攻略，最後1天，53折募資中

2018-05-25T00:11:00.001+08:00

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉

超易懂RWD網頁前端攻略

每年都我會花一點時間做一些瘋狂的事情，或者平常我不太可能會去做的事，而“募資課程”肯定會是今年的其中一項。

本次我與Yotta合作，開設了「超易懂RWD網頁前端攻略」，是我第一次在網路上開立網頁相關課程。在這之前我有在學學文創教過HTML相關課程，也有當過網頁技術家教的經驗，所以在教學這部分還算是有些經驗。除了在國發會當任過全國巡迴講師以外，也在良興電子、日盛銀行等企業當任RWD技術導入顧問，並開立RWD相關企業內部課程，當然我也在2014年出版了「好感度No.1的網頁設計：RWD不出槌法則，網站在任何裝置都完美呈現」一書。

由於第一次錄製課程，所以在Yotta的協助之下，我很快就進入軌道，了解線上課程募資的環節與步驟，當然對於課程的影片錄製上，Yotta也提供了協助，確保課程影片都在一定的水平上，讓各位上課時有一個妥善的線上學習環境，而我在短時間內也學會了錄音、影片剪輯等技巧，雖然還沒到非常爐火純青的地步，但是肯定可以讓各位感覺不出我是第一次錄製線上影音教學。尤其是錄音的部分，這幾天有請教了Amos老師，目前算是解決了錄音噪音過大的問題，當然有鑒於本人其實沒有薪水這種東西，所以如果要採購好一點的錄音錄影設備.......那就真的要拜託各位多多參與募資了，這樣我才會有經費錄製其他的線上課程啊XD 拜託各位了，剩下最後3天，保證物超所值啊！

本次課程的內容是完全適合新手，也就是完全沒有概念的朋友們，你不需要準備任何工具、器材，只要準備一顆想學習新知的心，以及你的電腦、雙手與網路，你就可以透過課程的安排從新手到老手，從菜鳥到資深，課程上會詳細講解常用的HTML與CSS，至於javascript部分會提到一些程式邏輯概念，但coding會用jQuery代替，以降低新手對javascript的稍高門檻的恐懼感，所以你不用擔心你的javascript會學不好，保證像雲在飄、頁面滑動等動畫對你來說不是什麼難事！

感謝在Line的網頁聊天群組中努力幫我推課程的朋友們，如果你想加入，我們有一個網頁設計師的日常聊天群組，請聯絡我 : ) 我會幫你加入這個Line群組，當然如果你有網頁相關問題我也歡迎你在「草監網路」粉絲團或「好感度No.1的網頁設計」社團詢問，我會盡全力努力回答你們的問題的 : )

超易懂RWD網頁前端攻略，最後1天，53折募資中，僅此一次機會，錯過可惜喔 : ) 想獲得更多課程資訊請洽：http://bit.ly/2qWxp28

[徵才] PHP後端開發工程師

2018-02-10T22:29:00.001+08:00

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉

後記：已經額滿，有機會會在公布，謝謝各位參與。

年輕、專業、新潮辦公模式

我們年齡平均皆在30歲左右，公司年齡4歲，
每年穩定成長，優於勞基法假期，重自律與自我成長

近期有一個PHP後端工程師職缺釋出，我們喜歡從基礎開始培養，
陪你從菜鳥變成扛壩子，如果你對這個職缺有興趣，
麻煩請先填寫初次面試的問券
https://nowill.typeform.com/to/OTKx0P
如果你會codeigniter也可以跟我們說，因為我們是codeigniter愛好者，
如果你不是菜鳥，但也想加入我們，我們也非常歡迎你填寫問券

2010年開始，團隊就已經存在，經過公司清算拆分，
2014年重新出發，而我們被拆分的原因是......
團隊績效、部門營業額皆勝過其他部門很大一截啊～～～～～

我們從2010年至今致力在開發RWD跨平台網站，
協助政府、企業、設計師、工程師導入RWD設計
我們期許我的每個作品都可以與國外網站做比較，
不讓台灣的技術、網頁成果落後於國際，至今
我們累積超過8個國外網頁設計相關獎項，
榮獲多次awwwards提名，成員也曾經榮獲FWA肯定

數位的遊牧民族，最潮的創業團隊營運模式

我們沒有固定上班據點，夥伴也散落全台各地，
我們靠網路集結我們的團隊，是徹底數位化經營的團隊，
你不需要每日經歷每日上下班的通勤，你必須極度自律
公司期許夥伴都是T型人才，除了專長還要跨領域發展

加入我們，你會擁有一群像家人般的夥伴
加入我們，你會發現上班原來還有另外一種方式
加入我們，你會發現原來做網站是可以如此的專業
加入我們，你會明白原來工作也可以如此自由快樂

作品介紹：購物車類作品：https://onlineshop.iprimo.tw/
形象官網類作品：http://www.karmamedical.cn/
活動網站類作品：http://audievent.com.tw/audi-sport/
更多內容請洽https://nowilldesign.com/

---------------以下是回覆2/11 中午填寫問券的 NonameS---------------

常常有人在網路上說認真就輸了，很不幸的，徵人是一件很認真的事，你既然要求我公開回覆，那我也公開回覆在這裡。

我不知道你有沒有認真看文章，我想你應該沒有很認真的看，因為文章裡有寫主要是在找菜鳥工程師，我們不是一般上下班打卡又一直凹員工的血汗公司，如果我要開一間普通的公司，那我去上班當個主管就好了，每個月薪水最少也有六、七萬以上，如果我心情好在兼職接案，每個月十出頭萬不是問題，我不需要沒事開一間公司，背著10個家庭的命運，擔心每個夥伴是不是忘記要休息，然後我自己卻完全沒有薪水可拿。

我要找的是夥伴，不是一個上下班打卡的員工，你覺得我身邊有一些員工，但是這些人對我來說他們都是比我家人還親的人，我沒有一天不感謝大家的努力，所以公司營運至今我連一毛叫“薪水”的錢都沒有拿過，這間公司一點都不賺錢是事實，它只是每年都剛好持平而已！你要求的年薪300萬已經超過我們整間公司一年來的淨利，平均算下來一個月25萬我想你自己也可以開一間，因為我們有時候一個月可能都還賺不到20萬。

最後我要回答你薪資範圍的問題，我覺得每個人對自己都有一個數字，但是每個人對數字的標準卻都不一樣，我說我這間不是普通公司，所以薪資算法其實每個人都不一樣，規則是可以談的，我要找的不是一個普通上下班的員工，我是真的在找夥伴，如果真的有興趣那再來談，如果你覺得這間公司有問題，那你大可不用多花時間在我們身上，我想這樣應該是非常公平的，你的價值請用自己的實力跟認真態度來爭取，而不是讓其他人來對你品頭論足！

看這篇立刻了解2018年網頁設計趨勢

2018-01-27T03:43:00.001+08:00

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉

近幾年網頁設計的技術發展真的變化萬千，就連網頁設計的趨勢也都年年有所成長，尤其是2018年網頁設計又到了另外一個里程碑，如果說你還不知道現在網頁設計最新的趨勢，那建議你趕快仔細閱讀惡補一下！

1. 純色的扁平化區塊設計已經退燒

近年來RWD設計從扁平化設計(flat design)到google 的material design，都是採用單一色彩設計較多，而且區塊設計也開始讓人覺得無趣，所以早期常看到的擬真設計、陰影、漸層等設計手法又開始回歸，但是跟早期用法相比還是有不同的地方，以icon來說，單一色彩的icon開始會出現兩、三種顏色做搭配，以按鈕來說以往採用單一色彩的表現，現在也開始使用漸層色彩與淡淡的陰影凸顯按鈕立體感，如此一來可以解決單一色彩的按鈕在某些佈局下容易被忽略或是誤認的情況。

範例網站：airbnb 、 uber

搜尋框有淺淺的陰影效果

icon再也不是單一色彩，而是會透過色彩突顯重要部分

2. 大膽的用色更容易加深印象

以往我們總是會用品牌色來當作整體網站的主軸，但是一但跳脫網站的主軸用色反而會讓網友有大吃一驚的效果，通常都可以留下不錯的印象，對於新品牌來說這樣的手法可能還不敢使用，但是對於已經耳熟能詳的品牌，這要的手法反而會帶來意想不到的效果。
範例網站：Dropbox

大眾對Dropbox的印象都是水藍色，但是現在卻可以很百變

3. 破格設計打破無聊的佈局

在RWD網頁設計佈局中，因為常用的12欄格線系統，導致所有區塊都方方正正，排列雖然非常整齊，但久而久之也會覺得無趣，所以越來越多網站的內容開始會呈現破格排列，以添增內容排版上的趣味性，提供網友意外的驚喜，可以增加網友在網站上的瀏覽時間。

利用產品原本的造型創造出圓角效果，並且透過錯位的排版增加內容的吸引力

範例網站：Bose

4. 微互動大升級，跟著捲軸一起動吃動

隨著捲軸追蹤技術的提升，以往只能在滑鼠移動或點擊時產生互動，但現在隨著你滑鼠捲動就可以安排內容區塊的進場、退場，以往的視差滾動只是圖片上的錯位效果，現在不但有錯位效果，還可以安排在頁面上製作有趣的動畫，例如火箭升空或九大行星環繞等這樣的效果，讓網友目不轉睛。

華麗的視差滾動效果可以讓網友目不轉睛

範例網站：invision

5. 影片背景運用

這裡說的影片背景通常影片長度都不會太長，而且也會墊一張大圖在影片下方，以免影片loading過慢時背景只有單一色彩的尷尬，許多用javascript或css3無法做出的視覺特效，可以透過影片的影音結合補強這點的不足。以前只能稍微滿足五感中部分視覺與聽覺，在網站與影片3D特效結合下，強烈視覺感官中又可以即時搭配配樂、音效，這樣的視覺與聽覺感官足以顛覆以往的設計。

將影片襯底，透過canvas製作數字遮罩，創造出不一樣的影片襯底效果

範例網站：Audi Q2、Microsoft Surface

6. 字型運用多變性

文字再也不是單純只是出現在畫面上，它也可以是遮罩或是有不同的錯位效果，甚至是一個很好做破格設計的元素，不再是單純呈現內容而已，也可以有互動的可能性。

將文字裸空、描邊，營造出不同的文字效果，加上墊底圖與破格設計可以將死板的網頁排版變成吸睛的動態海報

範例網站：benmingo

7. 手機載具螢幕加大

由於硬體零件成本降低，再加上觸控裝置學習曲線較低，所以上網年齡層開始上升，再者長時間上網使用螢幕造成視力容易受損，所以裝置的介面越來越大，以手機來說iphone最後一隻小螢幕手機目前是iphone SE，同iphone5系列，螢幕尺寸是4寸（320*528points，解析度1136*640），但根據statcounter的統計，台灣目前手機最流行的解析度是360*640points，約有45.45%，目前iphone 8 的解析度已經到了414*736points（解析度1242*2208），因此在設計上開始可以添加更多有互動性的內容，而不該繼續侷限在小螢幕只能很刻板無聊的設計，而且行動載具上網比例遠高於桌機，所以在網站規劃上，思考的出發點就絕對要以行動載具為主，而不是傳統桌機電腦。

8. 有趣的粒子效果風格

早期只要遇到動畫幾乎都適用flash （或現在叫animate）來製作，當然在現在已經不適合這樣製作動畫，除了直接把動畫做成影片以外，我們也可以考慮使用css來做逐格動畫，或是使用javascript撰寫動畫程式，例如可以使用javascript製作粒子效果來與滑鼠互動，你可以發現這樣效果通常都可以帶來很吸睛的互動效果。

範例網站：MASAYUKI DAIJIMA、bacter

9. 向量插畫風格動畫

由於向量格式的圖片開始可以直接用在網站上，所以網站上插畫的運用也開始變多了，也因為是向量格式，所以可以符合RWD的運用，因此向量格式的動畫也開始為之流行。但這樣的動態通常都不會太長，而且考量檔案大小，其實不一定會直接用svg格式來製作動畫內容，他有可能是jpg或png搭配css sprite，或直接使用gif製作，但整體插畫風格會是比較偏向量風格。

範例網站：inturn、baunfire、awesomemotive

以上九點就是2018年主要的網頁設計趨勢，如果你前幾年都沒跟上，你會發現現在的網頁設計跟兩三年前相比已經有點不一樣，但是跟五年前相比，改變程度的差距已經開始變大了，任何一個網站我覺得使用3~5年不等就要考慮重新設計，原因是數位世界改變其實非常快，每年網頁相關技術還在不斷發展中，五年的時間其實已經可以造成開發技術的嚴重落差，就連視覺設計風格上也會有產生落差，所以如果你的網站已經用超過五年的朋友，尤其是還沒有跟上RWD響應式設計風潮的朋友，建議您考慮一下，重新設計一個全新符合現代的網站吧！搶救回你無形中失去了行動市場！

[心得] 原來有一種東西叫做大環境不好？

2017-10-31T04:54:00.002+08:00

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉

我很恐懼，越到年底越恐懼，想找朋友聊聊卻又不太敢，彷彿我好像出事才會上門一樣，但是我真的感受到我快沒柴燒了。

我：今年怎樣？
朋友Ａ：爛透了......我一堆獎金都拿不到，因為沒有達到業績門檻......

換個場景、換個對象：

我：你今年應該過得還不錯吧！
朋友Ｂ：你在開玩笑吧！大家都過得很慘你不知道嗎？我們公司連員工旅遊都取消了！

沒想過幾天一堆朋友開始找我：
朋友C：分點案子來做做好不好！我快餓死了.......
朋友D：你那裡有案子嗎？我已經三個月沒開張了.......

今年第三季只能用一盤死水來形容工作室的業績，在前兩季我都還沒這麼有感，到了第四季我彷彿又遇到了一次金融海嘯襲來襲，一直持續往上成長的曲線就這麼活活的變成了懸涯，以至於我們一行人在懸崖邊逗留了片刻的光陰，一直望著對面看看會不會突然出現一道彩虹可以讓我們當作空橋一般的越過這片懸崖。當然我知道經營公司其實是很現實的一件事，所以就算要死，我也會拼命地、不斷地垂死掙扎著，努力做到不讓夥伴們受到任何波擊，因為我始終相信『危機就是轉機』、『到了谷底你只剩下反彈這一條路』。

好在我在第三季初期煞了個車，但是煞車有點太晚，所以整間公司還沒有徹底轉型完畢，但是我始終相信依照我們速度、品質，就算是髮夾彎我們也可以平穩的、帥氣的完美過彎，畢竟我擁有著一流的團隊，每一個都是一路我看著走過來的弟弟妹妹，教學相長，這一家人就這樣一路跟我展開奇幻的公路冒險，最老的算一算也十二個年頭超過了，我們只是工作室登記的晚，所以在年輕的活力下，我們有著老成的心智，這也是為什麼這一路下來我們總是能交出漂亮的成績單的主因。

產品研發是沒有這麼快的，我也非常明確知道這點，也非常清楚產品要小型化到可測試的程度，這就是一種火花般的刺激，我很訝異我們居然沒有任何爭吵，但一起思考、煩惱這件事肯定少不了，但我有點不能接受內部產品開發速度過慢這件事，尤其是現在生意已經不太好的情況下，對大家來說請假休息還比產品研發重要，作為一個領導人我看在眼裡，心裡卻很想哭，因為我不知道該怎麼做才能讓速度變的跟客戶的專案一樣快，如果客戶的專案製作速度是高鐵，那我現在內部研發的速度就好比普通車，每站都停以外還嚴重誤點，深怕大家不知道這些產品是我們機會，髮夾彎沒彎過，那真的就是大家一起到海裡游泳了，房車就會變成一艄扁舟，萬一載不了這麼多人，那就真的只能跳船了......，而這是我最不想做的一件事，有鑑於此，這個過彎只能成功不能失敗。

還算好的消息是，會計概略的計算下來今年並沒有虧本，只有小賺，拿來支付一些年底的福利才剛剛好而已，所以第一步我就先砍了自己的福利，希望還能留下一丁點做明年開始的基金。公司營運這麼久，我真的第一次發現什麼才叫做大環境不好，每年都聽大家講，但是到了今年我才真的有這種體會，來得真的是又快又急，真的會殺的人措手不及。本來有要錄影開課的打算，但是目前也只好走一步算一步。好在我們一直都很贊同大家多元學習多元發展，當一個多元的人才，所以也許哪天我們還真的會一起轉職也說不定，當然我畢生扣除念一堆沒意義的校園課本與考試外，剩餘的99%都投入在網站上，我是徹底鐵了心這輩子都在做這件事，如果我是煙花，那就讓我順利綻放到最後吧！如果我是壽命將近的星星，那就讓我繼續在夜空中閃耀到最後一秒吧！

現實了這麼久，這次就讓我夢幻一點吧！加油Nowill Design ，加油品禾全端，讓我們期待明年滿滿的莊稼吧！

[教學] Vue js快速上手 (七) 改變樣式的魔術棒 v-bind

2016-12-05T03:18:00.001+08:00

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉

離上一篇的for loop又隔了一段時間(擦汗)，除了在思考這邊要說什麼以外，也是真的年底到了，忙了一堆不知道在忙什麼的事，不過我一直都沒有忘記我的教學還沒寫完......我想，應該也是我覺得我太忙了，所以我才每年都沒參加鐵人賽吧(搖頭)。

如果你會做網頁(我是指前端的部分)，那你一定知道HTML一定要搭配一個叫CSS的東西才能讓版面變漂亮、變好看，問題是我如果我用了vue.js，我要怎麼改變我的配色？比方說要提醒的東西就要上紅色、警告的東西就要上黃色、只是一般普通訊息就要上綠色的這種紅綠燈訊息，我是要怎樣才能在同一個按鈕或同一個Div內透過vue.js的運算就做到更換的效果？

這個時候我就不得不來說一下v-bind這個東西了，v-bind是vue.js裡負責改變配色、大小等等所用的屬性，也就是說v-bind就是針對css而存在的屬性，而這樣的屬性會有什麼樣的屬性值呢？再講屬性值之前，我們要來認識一下v-bind的副屬性，也就是v-bind:style與v-bind:class！

如果你對css很熟，你一定會知道所謂的行內樣式style="OOXX"，還有id與class樣式，當然由於id有不重複性，為了讓css可以更有效率，現在都會提倡大家用class，也因為此，所以只有v-bind:class，這個部分是比較特別的，可能稍微需要用一下大腦的記憶體。

首先我們先來看看v-bind:style怎麼用，其實用法還挺簡單的，屬性值裡面就直接寫行內樣式，但是樣式的數值，比方說顏色或文字大小，我們就可以設定在vue的data，這樣我們就可以直接帶進畫面，範例如下：


<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>0 Hello World</title>

    </head>

    <body>



        <div id="app">

            <div v-bind:style="{ color: myColor, fontSize: myFontSize + 'px' }">123</div>

        </div>



        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>

        <script>

            new Vue({

                el:'#app',

                data:{

                   myColor: 'red',

                   myFontSize: 30

                }

            });

        </script>

    </body>

</html>

如果你有跟著前面的教學一路學過來，我相信到這裡一定難不倒你，因為只是把data裡面的變數直接帶進去而已。當然我們現在我們在coding的時候一定要講求維護性，最好是不要改HTML只改CSS或是不要改HTML或CSS我們直接改js，所以我們換個比較好維護的寫法：


<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>0 Hello World</title>

    </head>

    <body>



        <div id="app">

            <div v-bind:style="myStyle">123</div>

        </div>



        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>

        <script>

            new Vue({

                el:'#app',

                data:{

                   myStyle: {

                    color: 'red',

                    fontSize: '30px'

                  }

                }

            });

        </script>

    </body>

</html>

是的，我們只要在v-bind:style裡面直接設定一個物件名稱，然後就可以在vue的data裡面直接透過物件去設定我們要屬性值，在這裡我們輸入的css是文字變紅並且文字變大成30px，簡單、明瞭、好維護！但是只能滿足我們基本需求，而且現在的網頁很少會用行內樣式啊！所以我們就來看看v-bind:class吧！

v-bind:class其實用法與寫法上當然就比剛剛的v-bind:style簡單，畢竟css部分我們都可以另外設定在css區域，日後要維護也是很容易，只要改css就好，不像剛剛好像把css混在js裡，當然看起來就會簡單很多，我們來看看範例：


<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>0 Hello World</title>

        <style>

          .active{

            color:red;

            font-size: 30px;

          }

        </style>

    </head>

    <body>



        <div id="app">

            <div v-bind:class="{ active: myCheck }">123</div>

        </div>



        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>

        <script>

            new Vue({

                el:'#app',

                data:{

                   myCheck: true

                }

            });

        </script>

    </body>

</html>

是的！在這個範例裡面我們很明顯的可以看到，使用v-bind:class，我們只要判斷這個class是不是要啟用就可以了，像我大括號裡面是寫active:check，其中active就是我們的class名稱，而myCheck則是我設定的變數名稱，我在vue的data裡面設定的ture，意思就是啟用這個class，所以當我們打開頁面的時候，你就會看到123這行div被套上了一個叫active的class。

咦？既然可以設定ture，那是不是也有false？那既然有ture跟false，那我是不是可以設定很多個class？？當然可以！你可以設定一連串的class名稱都沒有問題，因為重點在於要啟用哪一個class對吧？那要怎麼設定很多個class？我們簡單範例如下：


<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>0 Hello World</title>

        <style>

          .active{

            color:red;

            font-size: 30px;

          }

          .normal{

            color:green;

            font-size: 30px;

          }

        </style>

    </head>

    <body>



        <div id="app">

            <div v-bind:class="{ active: myCheck , normal:myCheck2 }">123</div>

        </div>



        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>

        <script>

            new Vue({

                el:'#app',

                data:{

                   myCheck: false,

                   myCheck2: true

                }

            });

        </script>

    </body>

</html>

看到範例有沒有覺得超簡單？只要在大括號裡面透過逗點連接，你就可以繼續輸入下一組class名稱跟判斷用的變數了，有沒有超簡單？你只要把myCheck與myCheck2的ture跟false對調，套在123這個div的class，就會對調囉！

本篇教學就到這邊，希望我能更快擠出時間寫下一篇教學(點頭)！

[教學] Vue js快速上手 (六) 一定要懂for loop

2016-10-12T06:19:00.001+08:00

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉

在寫教學的過程中很囧的一件事就是，教學還沒寫完新版本就誕生了，這就是我中途又去忙了一個多月之後，回來發現的第一件囧事，是的，Vue.js 2.0 釋出了，所以我花了一點時間概略地在看了一下，還有之前寫的五篇教學。所幸，因為我寫的是快速上手，都是基本用法與觀念，在新版的Vue.js變化不大，不影響之前五篇的教學範例，所以已經看了這系列教學的朋友其實不用太擔心，我也將教學裡面本來使用1.0.26版本的Vue.js，全數都改成了2.0.1版本的Vue.js了。

好了，這篇我們要來學一個跟if一樣很重要的東西，就是所謂的for，通常你學一個新的程式語言，不管你怎麼學，都會看到if else跟for 這兩個東西，也就是說當你學一個新語言，這兩個東西一定是在必定要學、要看的範圍裡，所以本篇我們再來看看for loop吧！

for loop 通常是用來處理列表或是重複輸出一樣格式的元素時再使用的，比方說我要在頁面上產生10個div、10個li，或是輸出九九乘法表這類的資料時，for loop就是你肯定要使用的第一選擇了！首先我們先來看看如何輸出1~10吧！


<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>0 Hello World</title>

    </head>

    <body>



        <div id="app">

            <span v-for="n in 10">{{ n }}</span>

        </div>



        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>

        <script>

            new Vue({

                el:'#app'

            });

        </script>

    </body>

</html>

上面這段code執行後你會發現在頁面會出現“12345678910”，有沒有覺得超簡單？看不懂？，其實我在span這裡加上了v-for屬性，屬性值裡面寫的意思是“變數n在10裡面”，然後樣本{{ n }} 則是輸出n這個變數，所以vue.js自然就會知道我的n要從1開始，一直跑到10，自然頁面上就會輸出1~10了。如果你不是用Vue.js v2，你是用v1例如版本1.0.26，那n的變數會從0開始輸出10個數字，你就會得到“0123456789”，所以如果你想要從1開始記得用n+1喔。

那要怎麼寫出九九乘法呢？我跟你說，真的超簡單，就用上面那個範例再多幾行就結束了！

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>0 Hello World</title>

    </head>

    <body>



        <div id="app">

            <div v-for="i in 9">

              <h3>{{ i }}</h3>

              <div v-for="j in 9">{{ i }} x {{ j }}={{ i*j }}</div>

            </div>

        </div>



        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>

        <script>

            new Vue({

                el:'#app'

            });

        </script>

    </body>

</html>

真的！就這樣四行，九九乘法就搞定了！有沒有超簡單？當然一般用v-for不光只是要輸出數字而已，就像我開頭有說for loop，通常拿來輸出列表用的，那假設我們有一個表是蘋果、香蕉、椰子，那我們要怎麼用v-for輸出呢？很簡單，我們只要把蘋果、香蕉、椰子放進data裡，我們就可以輸出在頁面了，以下就是範例。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>0 Hello World</title>

    </head>

    <body>



        <div id="app">

            <ul>

              <li v-for="item in items">

                {{ item.message }}

              </li>

            </ul>

        </div>



        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>

        <script>

            new Vue({

                el:'#app',

                data:{

                    items: [

                      { message: 'Apple' },

                      { message: 'banana' },

                      { message: 'Coconut' }

                    ]

                }

            });

        </script>

    </body>

</html>

是的，所以我們把蘋果、香蕉、椰子這些資料放進data裡，取名items，然後在v-for屬性裡設定一個變數叫item（你要改叫n或改叫i都行），然後就會開始輸出items的第一個、第二個、第三個，而當前items裡的第一個值、第二個值、第三個值就會自動帶入item中，然後第一、第二、第三的一二三，我們稱之為index，也就是目錄順序的意思，有需要也是可以輸出的。

在舉一個例子，比方說地址好了，台北市裡面有中山區、大同區、中正區，這樣資料要怎麼放進data裡？

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>0 Hello World</title>

    </head>

    <body>



        <div id="app">

            <ul>

              <li v-for="(item, index) in items">

                {{ parentMessage }} - {{ index }} - {{ item.message }}

              </li>

            </ul>

        </div>



        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>

        <script>

            new Vue({

                el:'#app',

                data: {

                  parentMessage: '台北市',

                  items: [

                    { message: '中正區' },

                    { message: '中山區' },

                    { message: '大同區' }

                  ]

                }

            });

        </script>

    </body>

</html>

這時候我們就可以用perantMessage來帶入台北市這樣的資料，然後上述的範例我也把index輸出在畫面上，你可以明確看到index的用途，最後，“item in items”這裡的in你要改成of 也是沒問題的，效果是一樣的，v-for的用法就介紹到這裡，用法真的不難，只是要如何運用得好就真的不是一件簡單的事了，希望到目前為止的教學可以讓你覺得得心應手、上手無障礙喔！

[教學] Vue js快速上手 (五) Vue.js要如何v-on的其他運用

2016-08-29T04:49:00.002+08:00

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉

上一篇我們講了很多v-on:click的運用，但是說到按鈕，最常出現的地方應該就是表單了，既然是表單，那就有所謂的submit這個動作，所以本篇一開始，我們就來說說v-on:submit吧！


<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>3 click</title>

    </head>

    <body>

        <div id="app">

            <form action="submit.html" v-on:submit="handleIt">

                <button type="submit">立即送出</button>

            </form>

        </div>



        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>

        <script>

            new Vue({

                el:'#app',



                methods:{

                    handleIt: function(){

                        alert("here I am!");

                    }

                }

            });

        </script>

    </body>

</html>

上述的範例與上一篇一開始的範例非常像，只是在這邊我們用了一個form表單，當表單送出時就會轉到submit.html，我的submit.html只是一個空白頁面，裡面寫著送出成功，所以目前這個範例是不會傳送任何東西到submit.html頁面的，只會在你按下按鈕的時候，跳出文字視窗寫著“here I am！”。到目前為止你會覺得v-on:submit跟上一篇v-on:click很像，如果不看原理只看結果基本上一模一樣的，只是一個是click一個是submit的差別而已。

好啦，那假設我們今天有一顆按鈕，但是我不希望他就這樣直接submit出去，那怎麼辦？我還是希望他按下按鈕之後會跑出“here I am！”，但是他不要送出資訊轉到submit.html，那這時我們要怎麼做？很簡單，我們只要寫v-on:submit.prevent就好了，有沒有很簡單？


<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>3 click</title>

    </head>

    <body>

        <div id="app">

            <form action="submit.html" v-on:submit.prevent="handleIt">

                <button type="submit">立即送出</button>

            </form>

        </div>



        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>

        <script>

            new Vue({

                el:'#app',



                methods:{

                    handleIt: function(){

                        alert("here I am!");

                    }

                }

            });

        </script>

    </body>

</html>

除了.prevent之外，還有.stop、.self、.capture等等，效果如何就留著給你自己嘗試與研究了。再來除了submit以外，還有keyup，keyup後面可以點的就多了，比方說.enter、.up、.down、.left、.right等等，後續如果有機會會想幾個範例來給大家看看。

連續寫了兩篇v-on，最後大家是不是開始覺得v-on好像會很常需要寫到？畢竟這些都是在互動性操作下會啟動function的功能，實戰上就顯得用到的比例很高，所以在vue.js裡就變成有簡寫的方法了。簡寫的方法很簡單，就是把“v-on:”改寫成@就可以了，我們拿一開始“here I am！”做範例如下。


<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>3 click</title>

    </head>

    <body>

        <div id="app">

            <form action="submit.html" @submit="handleIt">

                <button type="submit">立即送出</button>

            </form>

        </div>



        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>

        <script>

            new Vue({

                el:'#app',



                methods:{

                    handleIt: function(){

                        alert("here I am!");

                    }

                }

            });

        </script>

    </body>

</html>

透過@這樣的簡寫，我們就可以把“v-on:click”改寫成“@click”，把“v-on:submit”改寫成“@submit”，讓我們以後再用v-on的時候可以更快速的輸入，也可以避免你一直寫v-on、v-on的煩躁程度了，是不是很貼心呢！

[教學] Vue js快速上手 (四) Vue.js要如何v-on:click?

2016-08-28T03:26:00.001+08:00

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉

從開始到現在，我們的範例都是real time即時執行，但是一般網站幾乎都不是real time即時執行的，尤其是希望那些透過網友點擊才會出現互動的內容，本篇我們就來談談v-on這個屬性吧！v-on呢其實就有點類似jquery的on()，所以就會有click、submit、keyup等等這些延伸設定，我們假設畫面上有一個按鈕，按鈕按下後會跳出文字框，以下是範例程式碼。


<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>3 click</title>

    </head>

    <body>

        <div id="app">

            <input type="submit" value="立即送出" v-on:click="clickme">

        </div>



        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>

        <script>

            new Vue({

                el:'#app',



                methods:{

                    clickme: function(){

                        alert("here I am!");

                    }

                }

            });

        </script>

    </body>

</html>

是的，當你點擊了立即送出後，透啟動v-on:click屬性，屬性值是clickme，所以就會呼叫下方methods裡面clickme的function內容，然後你就會看到文字視窗內容顯示“here I am！”，當然有些人會說這個範例有點弱，我用javascript一樣做得到，當然！vue.js本身就是javascript 的 framework，所以javascript本來就可以辦得到，那我們來改造一下這個範例，讓頁面會統計你點擊這個按鈕次數，做一個小小的計數器，以下是修改過後的範例！


<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>3 click</title>

    </head>

    <body>

        <div id="app">

            <p>目前以點擊：{{count}}次</p>

            <input type="submit" value="立即送出" v-on:click="clickme">

        </div>



        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>

        <script>

            new Vue({

                el:'#app',

                data:{

                    count:0

                },

                methods:{

                    clickme: function(){

                         this.count += 1;

                    }

                }

            });

        </script>

    </body>

</html>

只要稍加修改，加上前幾篇教過的data，就可以做出一個簡單的計數器了！這邊要記得count這裡直接0的話，型別判斷就是數字，但是如果你寫'0'，就會被當文字型別，最後的結果就不是你想要計數器了！

好啦！最後再來一個簡單的click範例，這個範例就是假設我們有兩顆按鈕，分別按下去都會跳出不一樣的文字視窗，但是文字視窗的訊息不寫在methods裡面的function裡，而是共用相同的function，所以簡單說就是要可以丟參數進去function裡，以下就是範例！


<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>3 click</title>

    </head>

    <body>

        <div id="app">

            <button v-on:click="handleIt('uh')">I say uh</button>

            <button v-on:click="handleIt('ah')">you say ah</button>

        </div>



        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>

        <script>

            new Vue({

                el:'#app',



                methods:{

                    handleIt: function(msg){

                        alert(msg)

                    }

                }

            });

        </script>

    </body>

</html>

是的！根據這個範例呢，你也可以在那邊uh～～～ah～～～（這是某首DJ的歌，有點老了），當你點了"I say uh"，v-on:clicke就會呼叫handleIt function，然後把uh這個值丟到handleIt function裡，所以alert出來的內容就會變成“uh”，當然當你點了“you say ah”，就會把ah這個值丟入handleIt function中，最後alert出來的內容就會變成“ah”了！

由於v-on還有其他運用方式，要講的東西有點多，所以下一篇我們還是會繼續講v-on的其他用法，所以如果這一篇還不是很了解，建議多練習幾次範例，不然下一篇可能會更不懂喔！當然有問題你也可以在下方留言或上粉絲團、社團一起討論喔！

[教學] Vue js快速上手 (三) 必學的if else！v-show！

2016-08-23T21:32:00.001+08:00

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉

在上一篇我們學到了real time即時更新頁面的方法，在學習任何一種程式語言時，基本上都會有一些必學的東西，比方說變數、參數、if else 、 for loop 、 for each 、 while 與一些運算子（加、減、乘、除、and、or等等），這些都是一定會學到的東西，一旦你真的搞懂，即便換了一套程式語言，你也會發現這些部分都很似曾相識，所以這篇我們要來講的就是if else！

來介紹一下這一篇你會學到的三個html 擴充屬性：

v-show ：這是Vue.js特有的寫法，基本上就是等於v-if，所以屬性值就是所謂的運算條件了。
v-if ：同v-show，唯一差別是v-show只是用css dispaly:none來隱藏，但v-if是真的會移除
v-else ：這是當v-show或v-if條件不成立時需要選擇的答案

看完上面三點如果你覺得你完全沒看懂，千萬不要緊張，也不要覺得困難，就把它當專有名詞就好，就像橘子為什麼叫橘子，柳丁為什麼叫柳丁一樣，就只是一個名詞而已，不要為了看不懂這些名詞就停下來。現在我們來舉個實際範例來實現if else功能！

不知道到目前為止大家覺得Vue.js好不好學？如果要打個分數，1~10分你會打幾分？我們假設6分才及格，所以當你打6分以上，畫面會出現Vue.js so easy，如果不到6分，畫面上就會出現still learning Vue.js。好了！題目出來了，稍微思考一下大概要怎麼做吧！在程式開發的過程中，其實最難的部分是思考，思考如何把程式寫出來，還要考量架構、效能等等，這才是我覺得最難的地方，所幸題目是我出的，所以很簡單，你有想好一個大概了嗎？讓我們繼續看下去！

第一步當然是運用上一篇所學，先建立一個可以即時打分數的頁面，程式碼如下：


<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>2 v-show</title>

    </head>

    <body>



        <div id="app">

            <h1 class="error">{{ score }}分</h1>

            <p>你覺得vue.js簡單嗎？請輸入1~10分</p>

            <input type="text" v-model="score">

        </div>







        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <script>

            new Vue({

                el:'#app',







                data:{

                    score:''

                }



            });

        </script>

    </body>

</html>

好了！如果你執行上面的code，你會發現你已經完成一個簡單、可以即時顯示分數的頁面，只是第一行很奇怪，會一直掛個分在那邊，如果你輸入了1，它就變成1分，那就合理了，所以你可以帶入score的預設值是0，這樣就會顯示0分，看起來就會合理多了！

第二步就是，如果score分數超過6分就要顯示“Vue.js so easy”，但不足6分就要顯示“still learning Vue.js”，這部分要怎麼寫呢？那當然就要用到v-show與v-else了，以下就是範例程式碼：

 <!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>2 v-show</title>

    </head>

    <body>



        <div id="app">

            <h1 class="error">{{ score }}分</h1>

            <div v-show="score">

                <p v-if="score >= 6">Vue.js so easy</p>

                <p v-else>still learning Vue.js</p>

            </div>

            <p>你覺得vue.js簡單嗎？請輸入1~10分</p>

            <input type="text" v-model="score">

        </div>





        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <script>

            new Vue({

                el:'#app',

                data:{

                    score:'0'

                }

            });

        </script>

    </body>

</html>

上面的範例程式碼，我加上了score預設值是0，然後當score是有值的，就會根據目前輸入的分數去做判斷，判斷內容就是大於等於6分以上就會顯示“Vue.js so easy”，不足6分就會顯示“still learning Vue.js”，當然你也可以把條件是改成大於5分，結果會是一樣的，當然你把所有的v-show都改成v-if，結果還是會一樣的。當然我們也把我們最後的code上放jsfiddle：

當然這個題目還可以繼續延伸下去，比方說當輸入文字超過10時會出現警告訊息，而當score的參數值不存在時也會顯示不一樣的文字，各位可以自行增加一些條件來做延伸練習。

另外，值得一提的是在Vue 2.1版本加入了另外一個html屬性，也是屬於if else家族的，那就是“v-else-if”，用法其實跟else差不多，所以當你有很多else的時候，除了最後一個可以寫v-else以外，從倒數第二個以上的else都可以寫成v-else-if，各位也可以自行試試看喔！

[教學] Vue js快速上手 (二) 第一支Real-Time即時更新

2016-08-22T23:39:00.001+08:00

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉

在上篇我們教了Hello World的寫法，是不是非常簡單好懂，Vue.js其實還有許多不同的寫法是在輔助各種開發情況下，可以快速維護，減少前端人員來來回回找code的時間，而快速維護也變得是這一兩年來最重要的網站發展重點，不管是MVC、MVP或MVVM等等開發模式，其實主要的本質我覺得都在畫清職責、方便維護、提升效能，而這些寫法在後續的教學裡，如果有機會或者有好的例子，我會會盡量一一舉例讓大家可以了解。學習所有的寫法有助於您判斷、規劃一個好的開發架構，讓你日後維護或是開發類似的功能時可以事半功倍。本篇當然延續上篇，用“Hello World！”來做範例，不過會做一些修改與調整好來做展示。

首先在這裡我先提出一種與上篇不一樣的寫法，也是最簡單的變形，那就是將參數設定另外寫，也就是當你參數預設值非常複雜時，為了讓您可以發便維護，會建議你採用這種寫法。


<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>0 Hello World</title>

    </head>

    <body>



        <div id="app">

            {{ message }}

        </div>



        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <script>

            var data = {

                message:'Hello World!'

            }

            new Vue({

                el:'#app',

                data:data

            });

        </script>

    </body>

</html>

接下來，我要在這裡介紹一個新的html擴充屬性，叫V-model，如果直接按照屬性名來翻譯大概就是呼叫vue裡面的model功能，所以其實還蠻直白的，在Angular也有所謂的ng-model屬性，功能上是差不多的。怎麼使用V-model？很簡單，我們將剛剛的“Hello World！”加上一個input，如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>0 Hello World</title>

    </head>

    <body>



        <div id="app">

            <h1>{{ message }}</h1>

            <input type="text" v-model="message">

        </div>



        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <script>

            var data = {

                message:'Hello World!'

            }

            new Vue({

                el:'#app',

                data:data

            });

        </script>

    </body>

</html>

我們將{{message}} 加上h1標籤，然後在下方新增一個文字的input輸入表單，接著v-model名稱是message，所以這個input就會自動帶入與{{message}} 相同的參數內容，而你只要變更inupt裡面的文字，頁面上的{{message}}參數也會立刻馬上一起更新，非常好玩，而且，恭喜你！你在不知不覺中寫了第一隻用Vue.js完成的Real-time即時更新頁面！真是太厲害了你！有沒有很簡單！

這到底是什麼原理呢？如果你上一篇有注意看，你會發現我在解釋data裡面的message時，我是說“預設值”是"Hello World!"，是的！它是預設值，所以當你在v-model裡面輸入文字或刪減文字時，你修改的其實就是data裡面message的參數值，既然參數值改變，vue.js就會自動幫你啟動model進而修改{{message}} 在頁面上呈現的內容，進而達到Real-time即時更新頁面的效果。

最後要來說一下一個簡單的debug方式，開頭我們有說將data另外寫可以避免參數過多時顯得混亂，那們我們要怎麼確定我們參數的內容是對的？最簡單得方式就是顯示在頁面上，我們只要多一行就可以達到我們要的效果：


<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>0 Hello World</title>

    </head>

    <body>



        <div id="app">

            <h1>{{ message }}</h1>

            <input type="text" v-model="message">

            

            <div>{{ $data | json }}</div>

        </div>







        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <script>

            var data = {

                message:'Hello World!'

            }

            new Vue({

                el:'#app',

                data:data

            });

        </script>

    </body>

</html>

在這裡又看到{{}} 了，在裡面寫的是$data，也就是下面var data的內容，而|在這邊是filter的意思，也就是篩選，還蠻好用的，之後有時間會再好好的提一提，而最後的json就是大家可能還蠻熟悉的json格式，所以最後在畫面上你就可以看到用json格式組出來的data參數值了！

再試試看修改input內容看看，下方json格式的參數值是不是也會跟著改變？沒錯，你又再一次證明你真的完成了一個Real-Time即時更新頁面了！恭喜你！！

最後附上jsfiddle，讓各位可以在線上看到本篇教學最後一段code所呈現的結果：

[教學] Vue js快速上手 (一) Hello World!

2016-08-21T17:53:00.001+08:00

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉

對於前端框架目前有許多的選擇，比方說React、Angular，以及還有今天要介紹的Vue.js！Vue.js有人說它像React，也有人說它像Angular，Vue.js主要是View跟Model的部分，但是效能、速度以及學習門檻都比React或Angular低，所以上手簡單，對於javascript苦手，或是一直遲遲無法學會React或Angular的同學們來說，簡直是一道曙光！

Vue.js的優點呢，主要就是專注在web技術上，支援html template、pug (jade)、coffeescript，甚至可與sass、less等加強版CSS做整合，而擴充性質的plugin也是頗多的，所以對於專注web技術研發的朋友呢，這就真的值得學一下了，畢竟不像React、Angular專注跨平台、跨載具，導致要學的東西就變很多，或是有很多新的架構概念要學習，當然Vue.js也是有缺點的，那就是太專注於web上了，其他平台就沒辦法好好使用了，不過反過來說，如果你主要是開發web，那你來說就沒什麼差了，而且Vue.js可以說是簡單版的Angular，當你學會Vue.js之後要轉到Angular反而可以讓你學習快速，神奇吧！趕快來看一下怎麼用Vue.js吧！

仔細看官網文件你會發現有一堆安裝方式要看，感覺好像非常複雜，其實一點也不複雜，就跟你載入jquery一樣：


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

只要把上面這一行放在html檔案裡就可以了，有沒有很簡單？當然你要下載下來放在網站目錄裡也是一個不錯的選擇！

按照寫程式慣例，我們就來示範一個Hello World吧！

第一步，非常簡單，建立空白的html頁面。


<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Hello World</title>

    </head>

    <body>



    </body>

</html>

第二步，引入Vue.js，並建立一個div命名id為app。


<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>0 Hello World</title>

    </head>

    <body>



        <div id="app">

            

        </div>



        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    </body>

</html>

第三步，建立Vue執行的function，在div#app寫入Hello World!


<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>0 Hello World</title>

    </head>

    <body>



        <div id="app">

            {{ message }}

        </div>



        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <script>

            new Vue({

                el:'#app',

                data:{

                    message:'Hello World!'

                }

            });

        </script>

    </body>

</html>

結束！有沒有超簡單！看不太懂？沒關係我來稍微解釋一下，在div#app裡面，你會看到{{ message }} 這樣的東西，如果你以前學過Smarty（PHP的樣板引擎），你會覺得有點熟悉，如果沒學過Smarty也沒關係，pug (jade)也類似{}的東西，簡單來說{{}}就是會幫你帶參數進去這個位置上，而在new Vue裡面我指定在id名稱為app的這個element（通常會翻成元素）裡帶進message參數，而message我在這裡指定預設值為Hello World! ，以上就是示範Hellow world的寫法，有沒有很簡單！很簡單吧！讓我們用jsfiddle把這一篇的code來執行一下看看：
如果你還搞不懂，沒關係，可以在本篇或Facebook社團裡提問，我會盡快解決你的問題的！

我在網站製作流程中各個環節會用到的工具

2016-08-14T03:04:00.002+08:00

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉

一個網站的製作流程，基本劃分就會專案接洽、網站企劃、視覺設計、前端工程、後端工程與測試上線這幾個環節，而在各個環節裡又會使用不同的工具，雖然可以找到在介紹前端的工具，或是介紹企劃的工具，但是將每個環節所需要的工具整理在一起的文章我個是還蠻少見的，喜歡實驗新工具的我而常常裝了一堆東西或註冊一堆東西之後，發現沒有推薦文章來的好用就刪除了，經過了這麼多年，以下就來介紹我還裝在我的mac上或是實際上我們公司有在使用的工具吧！

專案接洽

在這個環節裡主要是一些文書處理軟體，比方說Word、excel、Power Point或Page、Numbers、Keynote，除了這些常備文書軟體外，我們公司還有用：

Redmine - 專案管理系統，是免費的Open Source，可以分派問派、追蹤問題處理進度，並且可以統整文件與檔案，對專案進度頗重要的甘特圖也有內建功能對應，對我們公司的工作流程來說非常重要的，就連薪資我都是用這個做記錄。

OmniPlan - 這是我個人最近再用的單機專案管理軟體，Mac only。我會用它的主因是為了他的甘特圖，建立快速而且乾淨、清楚，但除此之外的其他功能我都沒在用，所以其實有點殺雞用牛刀的感覺。使用頻率不高，除非我要畫甘特圖，不然幾乎用不到。

網站企劃

Xmind - 對於資料整理、腦力激盪來說，我覺得Xmind真的非常有用，他可以用看似零散其實很有條理的mind map把資料整理起來，透過這樣整理的過程資料就可以變成有用的資訊，也可以讓我們比較全觀的看整個專案或是某個想法，可以避免見樹不見林的情況，而除了全觀以外，也可以細看某一個分支想法的細節，真的是可以讓你見樹又見林啊！mind map 這東西我從高中就開始使用了，還記得是某節輔導課輔導老師教的，要我們用mind map來表達我自己，我大概就是從這個時候開始才認為自己想走資訊吧，之後因為我很不會唸書，更不會背書，我就異想天開的想說不知道mind map能不能拿來背書......沒想到真的可以，成績也一路從吊車尾變成拿獎學金，厲害吧！還不趕快試試看用免費版本的Xmind來畫mind map！免費版其實就很夠用了，要付費也很ok喔！

Balsamiq Mockups - 這是一個網站很醜、軟體介面很醜，但是對於不會設計軟體的專案或企劃來說，非常容易上手的原型企劃工具，只要拖拉三兩下就可以完成一頁的企劃，缺點是他無法設定連結，所以我只有要做三個頁面以下或想快速表達我的想法時才會使用它，算是對專案溝通上非常便利的一個工具。

Mockplus - 這其實像是Balsamiq Mockups 的加強版，是對岸同胞製造的，有免費與付費版本，因為是對岸製造，所以對英文充滿障礙的朋友們就可以使用這個了，不但網站比較好看、軟體介面也比較好看，使用上手程度其實是差不多的，不過我個人使用的頻率比Balsamiq Mockups 低很多，原因在於Mockplus的功能強很多。

Axure rp - 我印象中我是從4.0版本開始用起，現在已經到8.0了，對於RWD響應式網站的繪製更加的便利、成熟、好用，不管是新手還是老手都可以用得非常開心，是用來建立wireframe的好幫手，我們家也是使用Axure rp 來建立wireframe與客戶核對規格、資料與功能，並且再透過wireframe與內部人員溝通，由於已經有畫面與資料，所以在內部溝通上問題就減少了很多，不用依靠彼此的想像來做討論，可以減少彼此誤會而產生糾紛的情況，一路用下來真的都很不錯！有些人可能會覺得用Axure rp 產出的html又不能延續使用，所以直接請前端來做wireframe不就好了，但是對我來說wireframe其實就像大樓建造時的藍圖，藍圖在討論過程中修修改改的，你總不能叫工程師直接來做吧？這樣工程師光處理這些不確定是否真的是修改的修改就可以忙到吐血了，怎麼集中火力做出品質好的前端？而且我們家人力非常精簡，所以這種算是核對內容的任務就該由專案或企劃來完成，讓工程師就專心在實際開發上，心無旁騖才能做得更好。但是如果今天是做擬真一點的prototype那我就會覺得可以由前端工程師來協助，原因在於prototype通常都很接近最後實際的成品，中間修改的服務不會像wireframe這麼大，對相較之下對於前端工程師的負擔就不會這麼重，也不會過於繁瑣。

視覺設計

photoshop - 這應該不用介紹了，我想做設計的不知道ps應該不算會設計吧？不過嚴格來說這是拿來修圖、修照片用的，不太適合拿來做網站。

illustrator - 我想這也是不需要介紹，因為這跟上一樣都是adobe出的，只是這個是向量軟體，對於RWD響應式網站來說還算是ok的設計軟體。

Sketchup app - 噢！這個軟體真的是太酷了，簡單、易學、好上手，最重要的是拿來做響應式網頁設計非常的方便，而且可以直接輸出@2x跟@3x的圖，一次還可以輸出多種格式，我現在偶而還會拿來畫圖，真的是好用得不得了！如果我還有更多空閒時間，我應該會一直跟它溺在一起吧！如果滿分五顆星，它應該是給五顆都不夠那種，沒試過的設計師一定要試試看！

marvel - 跟invision差不多的prototype webapp服務invision便宜，主要拿來與客戶過視覺設計使用，客戶可以直接在設計稿上標註留言，加快視覺提案修改與討論的進度。

前端/後端工程

Sublime Text - 前後端開發我都用它，因為他真的是神兵利器來著，好用的不得了！連我們家不會寫code的專案也都在用，因為真的很好用啊！順便介紹一些好用的plugin！

Afterglow - 這是我目前在用的theme，不過我有做一些微調，有一些地方我覺得間距太高或太大，所以我有調整小一點，不過整體來說看起來還蠻清爽的。
Emmet for Sublime Text - zen coding的新名字Emmet！簡單來說就是用一些簡碼來幫助你快速打html與css，一開始可能會覺得不太習慣，還要記點東西才會用，可是用久了之後其實會發現不太需要記什麼東西，自然而然就很上手了，而且coding速度會快很多！
Gist - 很多前端或後端會把常用的code記錄下來，有些人會用單機軟體，我則是用Github的Gist，透過這個套件可以快速把片段的code插入當前頁面裡，還不錯用，但是我改用jade之後我就很少用到了。

Sourcetree - 有介面的git工具，也可以搭配bitbucket使用。git的使用在中大型專案上顯得格外重要，尤其是多方協作的時候，很容易發生覆蓋或回朔的問題，有了git做版本紀錄後，誰誰誰蓋到code或誰誰誰搞錯檔案都很清楚，可以減少很多溝通上的誤會，也能快速讓所有的程式碼復原。

SvnX - 有介面的免費svn工具，如果不知道svn是什麼，其實svn跟git差不多，也是版本控管工具。

Prepros - 這是一個多功能的工具，他可以協助編譯Less、Sass、Compass、Stylus，也可以協助編譯Jade template、Haml、coffeescript等等，不管是壓縮檔案、圖片或是Live reload、FTP等功能，都非常好用。我目前都是過Prepros來處理CSS與使用Jade template和Live reload，非常方便，免費版會一直跳出贊助訊息，但是不影響使用，如果有能力贊助可以考慮一下。

imageoptim - 這是一個mac only的圖片壓縮程式，一般前端在處理圖片的時候，大部分還是會用photoshop來處理，可是photoshop在圖片縮的功能上奇差無比，同樣一張jpg的檔案大小有可能會差到50%，所以通常在上線之前，我會在用imageoptim壓縮所有的圖片，以減少網站loading。

filezilla - 我目前在使用的ftp，應該很多人也都使用這套，我會設定好FTP站台，然後匯出，讓客戶直接匯入filezilla使用，客戶只要點兩下就可以連上空間了。

主機/測試上線

除了一般LAMP系列（Linux、Apache、Mysql、php）以外，我有時還會安裝一些其他的東西來輔助我管理主機。

AWStats - 老牌免費的log分析，一般主機安裝完後都會有文字的log分析，但是因為打開就只會看到一多字，所以除非有什麼問題，不然其實很少會使用，但是安裝AWStats之後，log資料就會變得很簡單易懂，所以就清楚的可以看到流量、網友使用環境等等，讓log資料效益提高。

GoAccess - 跟AWStats一樣是log分析使用的，近期我比較喜歡用這一套，介面看起來比較新穎，比較適合我，我對介面好像跟好用其實還蠻注重的，不過功能來說其實跟AWStats差不多，安裝上來說，我覺得比AWStats簡單一點。

ApacheBench - 這是Apache附帶的一個主機壓力測試軟體，簡稱AB，主要是針對Apache主機效能做檢測，像是每秒可以送出多少request，除了Apache主機以外，像是lighttpd或是IIS主機也都可以使用。

Apache JMeter - 也是Apache的產品，採用Java開發，也是用來測試主機效能用的，這套應該會比AB詳細一點，不過我每次測試都只是大概看一下，所以我兩套都會用，交叉測試，雖然結果總是差不多就是了。

virtualbox - 虛擬機、模擬器，用來建立各種測試環境用的，我主要拿來跑windows OS用的，原因是有些客戶一定會用windows only的設定，導致我用mac無法使用，所以通常只有需要用windows的時候我才會使用。

MAMP - Mac軟體，類似xampp，是可以快速在本機端架起php使用環境的軟體，還蠻好用的。

其他

silverback - Mac專屬的UX使用軟體，主要就是螢幕錄影還有使用者臉部錄影，目前2.0已經可以免費使用，3.0還沒推出，持續等待新版推出中。

textnut - markdown文字編輯器，目前我是拿來寫部落格文章使用，但是圖片沒有辦法一起上傳到blog裡，所以還在尋找其他不錯的解決的方，但是拿來寫文章還不錯用。

以上就是我目前對於網站專案來說比較常用到的軟體工具，比較可惜的是有些是mac only，不是跨平台，不過應該還是找得到類似的軟體可以替代，希望這一篇對那些也想學得很複雜的朋友們有所幫助喔！

我們家老闆與老闆愛去的網站

2016-06-23T00:11:00.002+08:00

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉

創業開始至今，我們一直是壓力很大的一群創業夥伴，不過我們有一位還蠻開明的老闆，她總是可以帶給我們釋放壓力的笑點與笨點，而且每天都會叫員工們起床，還會提醒員工們該吃飯了，是位很值得跟隨的好老闆。

先來看一下我們家老闆的玉照：

本照片感謝老闆度假好夥伴－貓工寓熱情拍攝

是的，我們家老闆是隻不折不扣的貓咪，就跟水星領航員一樣，唯一不同的是眼睛不是藍色的（知道我在說什麼的應該都有動漫宅基因）。我家的老闆名字叫Boss，姓張名啵嘶，今年一歲五個月，是個漂亮小姐，但是非常調皮好動，我都懷疑她的性別是不是寫錯了，她每天的任務就是叫員工起床，然後提醒員工在工作之餘也要記得休息，避免員工一股腦兒一直工作搞壞了身體，偶而會沒收員工的電腦，讓員工適度休息，是個十分盡責的好老闆，特技是握手、換手、兩隻手、拍手、換手拍、碰頭、躺下。平常休閒嗜好是跟狗狗一樣玩員工丟老闆撿遊戲，目前單身，沒有徵男友的打算。

我們家Boss有一個隱藏任務，那就是想辦法努力賺到自己的吃喝玩耍，滿足自己的生活所需，但目前都是失敗中，不過前陣子有去當看板模特，聽說效果非常好，歡迎其他廠商來接洽：

本照片感謝高級手工飾品達人－蛋董手作項圈的模特兒聘請

好了，做完了老闆的介紹與工作內容之後，要來講一點比較生活化一點的事情，那是吃啦！Boss不算嘴很挑的貓，但是說不挑偶而也會挑一下，比方說他不喜歡一層不變的乾糧或罐頭，就好比每天叫你吃餛飩麵你總有一天也會想換吃個便當之類的是一樣的，可是貓的乾糧或罐頭如果要便宜，就要買大量，大量的話，光是Boss自己也要吃個兩三個月才可能吃完，不要說吃完，還沒吃到一半就膩死了，所以目前我們員工們都是朝量小較貴的方式在購買老闆的乾糧或罐頭，老實說這樣還蠻傷本的，尤其是我自己簡直可以當選最窮老闆第一名的情況下，Boss只能靠其他員工供養了。

員工白天要上班，晚上要加班，老實說真的很少有時間可以去幫老闆物色新美食，或是幫老闆補充吃貨，既然Boss是位網路公司的老闆，我們就要用網路來克服這件事，所以時常瀏覽各大貓食網站就變成員工的休閒活動，除了比較商品種類、包裝重量與價格以外，最重要的還是網站營運要讓我們安心、放心。為什麼要說安心、放心呢？因為我們曾經在網路上購買罐頭，但是收到貨的時候發現罐頭外觀鏽蝕有點嚴重，退貨手續又非常麻煩，但是又很怕老闆吃了腸胃會不好，所以網站可以讓人安心、放心的購買，對我們來說就非常重要了。

而最近我們終於找到了一家可以讓我們安心、放心的貓食網站了，那就是毛孩好夥伴－毛孩市集 http://ppmarket.tw ！首先這個網站是採用台灣本土創業的電商系統QDM，而營運方也是本土創業的fandora的夥伴，而且在毛孩市集的粉絲頁上，可以跟小編貼心互動，小活動辦得也非常的勤快，真的讓人很放心，說說最近的一件事好了，我們家Boss近期一直受軟便的困擾，其實就是一直反覆的腸胃炎，抓去醫生看還照了超音波都顯示正常沒事，但是Boss因為腸胃不適有明顯花更多時間在睡覺上，不像以往滿屋子活繃亂跳，有鑑於此，我們打算幫Boss換回一開始他嬰兒時代吃的乾糧與罐頭，上毛孩市集市集訂購了一批乾糧與罐頭，再訂購時因為我們實在太擔心了，特別在訂單上面註明這是要給我們家一直在拉肚子的老闆吃的，如下照片：

我們本來以為這些備註都是寫好玩的，寫給我們自己心安的，可是沒想到我們收到貨之後，或單上面居然寫了個特：

老實說我們其實不知道這個特是不是特殊訂單的意思，但是看到的當下真覺得我們得備註真的有被看到的感覺，真好！為了感謝毛孩市集，特地附上上述訂單中的乾糧與罐頭照，還有老闆本貓與乾糧、罐頭合照！

我相信你會覺得這是一篇業配文，不，你錯了，這是一篇炫耀文！！趕快來當我的Boss是貓的粉絲吧！

如何在mac os上開發.net 網站

2016-06-20T05:11:00.003+08:00

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉

前陣子因為接了一個前端工程的案子，但是因為後端是.net所寫，為了避免來回一直上傳FTP或SVN等等，所以我上網找了一些資料，才知道去年.net已經推出跨平台版本，目前還在RC版，所以說.net不在是windows only的東西了，這倒是一個好消息，不過我們家目前還是專精於PHP上，目前沒有要拓展.net事業的想法。

PHP的話在本機上架環境，懶人版大概就是裝一下XAMPP或MAMP，我個人是用MAMP架本機的環境，所以我在想也許已經有人做好懶人包，可以很快的在Mac上寫 .net 程式了。果然Google了一下我找到了Mono。

Mono目前支援Mac OS、Windows、Linux，所以跨平台性不錯，比起需要一直用windows官方提供的資源來說，更沒有拘束，也可以實現在使用非windows系統開發 .net 程式的夢想，可以說是解救了不少人，也可以讓 .net 跳脫平台限制，增加未來參與開發的人員，目前 .net環境下的開發語言其實還蠻多的，有人會用VB但是現在最紅的應該是C#，有機會可以研究一下。

下載Mono後，只要按照安裝流程指示安裝，就差不多可以完成了，過程大約不會花到3分鐘左右，因為要安裝的套件其實還蠻多的，所以比一般其他程式安裝起來還要久一點。

安裝好了之後要如何使用呢？其實官網有個簡單教學，不過對於有英文障礙的人來說還是非常有障礙，簡單來說，步驟如下：

1. 將以下範例程式用文字編輯器（例如：Sublime text）儲存於您想用來開發的 .net城市的資料夾中，檔名儲存為hello.cs

using System;

 

public class HelloWorld

{

    static public void Main ()

    {

        Console.WriteLine ("Hello Mono World");

    }

}

2. 開啟終端機terminal，切換到開發的資料夾位置，切換指令為" cd 資料夾位置"。輸入資料夾位置時，可以開始finder切換到該資料夾再直接拖曳到終端機terminal裡面，終端機terminal就會自動出現資料夾位置，可以節省您key in的時間。

3. 輸入編譯指令“mcs hello.cs”，然後再輸入執行指令“mono hello.exe”，就會看到執行結果顯示在終端機terminal中。

以上就是最簡單的 .net執行步驟，如果你希望你的程式可以開個視窗，請照以下步驟：

1. 將以下範例程式儲存於測試資料夾中，並將檔名存成hello.cs


using System;

using System.Windows.Forms;



public class HelloWorld : Form

{

    static public void Main ()

    {

        Application.Run (new HelloWorld ());

    }



    public HelloWorld ()

    {

        Text = "Hello Mono World";

    }

}

2. 在終端機terminal切換到該資料夾並輸入以下編譯指令“mcs hello.cs -pkg:dotnet”，然後再輸入執行指令“456，就會看到執行結果有個小視窗跑出來。

以上都是壓成exe封包的方式，那如果是網頁呢？要如何打開測試頁面的內容？很簡單，請照以下步驟：

1. 將以下程式碼儲存於開發資料夾中，並將檔案名稱儲存成default.aspx。


<%@ Page Language="C#" %>

<html>

<head>

   <title>Sample Calendar</title>

</head>

<asp:calendar runat="server" showtitle="true">

</asp:calendar>

</html>

2. 在終端機terminal切換到該資料夾並輸入以下編譯指令“xsp4 --port 9000”，即可使用http://localhost:9000/default.aspx 這樣的網址在瀏覽器中預覽。

3. 只要在終端機terminal按個enter就可以停止server運行了。

Re:只要回答這些問題，就能讓投資人完整了解你的創業與公司

2016-06-15T02:05:00.001+08:00

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉

今天在創業小聚上看到了一篇文章：只要回答這些問題，就能讓投資人完整了解你的創業與公司，雖然我不曾找過投資人，卻有過幾次投資人問我要不要給投資，秉著我是道地台灣人，勤奮的一步一腳印踏實作為，我每次都拒絕了，我相信他們在我身上看了些什麼，也不懂為什麼有人要給我錢我卻不要，但是不外乎他們都會告訴我要加油，而我也沒想太多的一路走到現在。

工作室登記到現在頂多兩年多，制度、組織完全比照一般公司，不但有三節，每年十二月固定出國員工旅遊，只是因為我是0元創業，所以以最低資本額二十萬做商業登記，這件事阻礙了我很多提案，這又是另外一件事，在這裡就不提了。我常常會思考別人在我身上看到了什麼，又有什麼是我自己沒看到的？大家都知道知己知彼百戰百勝，但是大家真的了解自己嗎？知道自己在幹嘛嗎？這我時常懷疑著，而且我也會做許多的假設，並且在腦海中演練這些假設，無時無刻我都在思考著，這也是我現在最重要的任務，決定團隊的方向，帶領大家一步一步往前走。正因為我總是會做許多假設，也會幻想這些假設的前後結果，所以當我看到這一篇充滿問題的文章，我倒是覺得挺好玩的，所幸乾脆寫一篇文章來記錄一下，就以工作室現況來回答這些問題好了，雖然這些問題比較適合新創事業回答，對於我們公司目前這種一點都還不新創的經營方式來說還蠻不適合的，不過我想思考一下這些問題，對我來說應該是有利無害。

你公司叫什麼？目前有沒有官網？公司在哪？做多久了？

我的公司叫品禾全端網路工作室，統一編號是41058743，要查公司資料請至新北市商業司，公司主要營業項目是網站製作，不管是形象官網、EC購物車網站或是活動網站等等，都是我們的專長範圍，甚至運用網站技術製作進銷存或物聯網管理系統等等，我們都有相關的經驗。

官網目前有兩個，原因是在公司成立前以soho模式從一個人開始到變成一個團隊，我們都對外稱為Nowill Design，所以我們有一個團隊的官網Nowill Design，還有一個品禾全端網路工作室的官網，所以一共兩個。

公司沒有據點。是的，我們沒有據點，礙於台灣公司法規定一定要登記商業住宅作為據點，所以目前登記在板橋，是我爸的起家厝，以前我爸公司也登記在這，有點傳承的意味。不過目前我住在中和，合約書信往來是以中和居住地為主，但是我們真的沒有一個叫做辦公室的地方。真要說辦公室，我們都在雲端作業，所以我的公司是雲端公司，我們所有的公司夥伴散落台灣各地，有的在偏遠山區，有的在屏東海岸、中部有彰化、北部除了台北還有桃園，因為我相信真正厲害的高手絕對不會只在台北，而這些厲害的人不是有個人情緒因素就是家裡有本難念的經，但是這些障礙都不會影響他們的工作效率與成果，都是一等一的高手，也是值得信賴的好夥伴。打從soho團隊開始，我們就是透過plurk、line、skype等通訊軟體線上協作，分工確實，使得每個專案都在時程內完成，如果以soho時段算起，我們已經存在十年了，但是如果以公司登記算起，那我們還是兩年的新公司，可能只能算剛會走路的嬰兒，但是我們的知識與經驗是非常多元與廣闊的。

公司的核心價值是？

公司的核心價值是速度、服務與品質，我們在製作與開發的速度上保持穩定、敏捷的速度，並且提供完善的服務，而且我們客戶幾乎都會變成我們的朋友，一旦我們覺得專案會有問題，會立即與客戶反應，並且提出解決方案，讓專案順利進行，每個專案的內容品質都非常不錯，所以我們公司目前沒有業務開發部門，都是依照客戶彼此介紹、口碑傳播而來，而我們公司的願景是希望可以透過網路創造更多價值，不管是電子商務發達現今或是物聯網科技的研究，我們都不斷的在做嘗試，比方說除了一般形象官網或是活動網站開發製作，我們於2011年就開始推廣RWD響應式網站設計，也曾得過CSS Awards的網站設計獎項，對於視差滾動、逐格動畫等技術運用也有相關經驗，我們也做過雲端交易系統，或是雲端車輛控管這樣的物聯網科技，我們都很積極在參與。我覺得我們公司做事的風格就是不管在什麼專案裡面，我們都希望可以make something fun，因為我相信用快樂的心情做出來的專案品質會與煩燥不堪、凌亂不齊的心態做出來的品質更高，而且在專案過程中可以快樂得進行也是讓夥伴充滿動力的重要元素之一。

一句話描述解決的問題？

沒有網站製作相關的技術或經驗？我們一定可以解決你的問題。

公司怎麼營收？什麼時候開始營收？

公司是0元創立，所以每月薪資、器材或其他雜支都由上月盈餘支付。目前主要就是承接各式官網、EC購物網站、活動網站等專案為主，營收的部分打從公司創立到現在都是有盈餘的，近期可能有點收支不平衡的狀態，但是還在盈餘可容與範圍內，所以到目前為止公司都是不斷在獲利當中。等獲利足夠讓團隊少接一些專案時，我們會進行內部專案製作開發的行動，因為我們的知識、技術，是非常完整的，對於服務性質網站的創立與營運也有一定的經驗，只是公司目前需要以獲利為主要目標，所以目前主要還是以承接各式專案為主要營收。

主要是設定的營收來自於誰？為什麼？

公司營收沒有主要收入來於誰或哪家公司，而且直接客戶與合作的客戶的比重也差不多一半一半，所以在公司收入部分比較不會突然有哪些客戶不見了就導致收支不平衡，並免公司陷入金錢危機，所以專案類型、客戶類型的部分，目前佈局都是非常平均的。

目前有什麼可以證明這個模式可以成功的關鍵數據與資訊？

公司還沒倒、有盈餘、薪資每月照常發放、三節禮盒或聚餐、每年12月固定員工旅遊並且每人補助一萬元新台幣員旅津貼（但新進員工不滿一年都要留守）。

你獲取使用者最大的關鍵跟策略是什麼？

觀察、測試、調整。獲得客戶的最快關鍵就是跟客戶當好朋友，讓客戶徹底了解我們，然後獲得客戶的最大策略就是讓客戶介紹客戶，也就是所謂的口碑行銷（有專有名詞有比較威嗎？！）

團隊核心成員有誰？怎麼認識的？負責什麼？待多久了？

核心成員......，大家都是！對我來說夥伴們是家人、是責任、是牽絆，彼此認識契機都不同，有些是以前烘培雞時代就認識（台灣開始有個人網頁免費空間的時候，那時候奇摩還是奇摩），彼此一起交流個人網站營運的心得、技術，從興趣到專業，然後一起打混在到現在。還有一些是學校的學弟、學妹。當然後期也有一些透過面試加入的夥伴，彼此負責的範圍都不同，但是又可以互相cover，我們的夥伴都不是單一技能人才，通常會前端的也會一點後端，會後端的也會一點前端，是專案也可以做設計，是設計也可以做前端，都是複合型人才。年資來說，由於公司才成立兩年多，算年資真有點沒什麼好講，但是如果以團隊來說，裡面陪著我一起度過10年的人還不少。

團隊有幾個人？分成什麼部門？工程師幾位？每年研發成本多少？

十個左右吧？老實說我真的很少認真算到底有幾個人，因為我們常常有人一請假就用月為單位，然後就出國了，幾個月後才回來，以一般公司來說，這樣的員工很難被與以重任吧？因為時常不在之類的緣故，不過在我們這裡是平常事，連我自己都有出國三個月的紀錄在......，不過公司營運一切正常，因為公司開在雲端，所以我只要有電腦跟網路就可以上班了。部門的話，以網站製作來說分為專案、企劃、設計、前端、後端，但是我們家都是複合技能，所以每個專案的隊員組成會不太一樣，然後又因為是複合技能所以我也很難算幾個設計師、幾個工程師，目前一個月接五個活動案還行，官網的話大概1個月最少可以處理一個吧？！速度快得有點驚人？別忘了速度是我們的核心價值之一！至於每年的研發成本，就目前公司來說除了人事成本以外就是一些主機設備或網址費用，一個月就是幾十萬左右。

國內外有什麼主要競爭者？

很多啊，因為網頁設計門檻很低，而且我們專營PHP，而PHP又是一個0成本就可以學習製作開發的動態程式語言，所以競爭者何其多！但是就以速度與品質來說，滿分如果一百，我們家應該是可以在80分以上，這我倒是非常有自信。而且因為經驗豐富，所以任何問題我們都可以很快速的反應與解決，以程式安全性來說也蠻高的，因為我們曾經做過類似銀行端的線上交易網路系統（不是一般EC購物車串接金流），那個安全性等級就要非常高，不過我們的程式通過了安全性測試，所以在程式安全性上也是不錯的。對於前端互動、後端開發我們對外的評價一向還不錯，而企劃、架構、SEO、UX部分是我個人的專長，我曾協助過客戶進行官網改版，獲得年度最佳官網殊榮，也有得到FWA，我們團隊本身也有得過CSS Awards，所以相較其他網頁設計公司來說我們更專業。

別人複製你要多久？

複製我？那可能要10年喔，畢竟我從開始做網站至今都20年了，而且我寫的第一份產品企劃到現在拿來看都還算非常新潮，所以我覺得要複製我難度有點高。複製我的營業模式的話，可能在人事成本上會非常高，因為要請到相當知識與技術的員工已經不是“資深”等級可以處理的，可能要是經理人等級了吧？找人本身有一定的難度，找對人更是難。而且對於不太懂網頁製作細節的人來說，可能初期做一堆專案都是賠錢的，跌跌撞撞可能最少也要一兩年才能摸索個出所以然來。

轉型做新產品的主要原因是什麼？

這個是未來進行式，也就是未來會發生但還在進行中。轉型做產品主要的原因是想要拓展營收範圍，目前講白一點主要是代工廠的角度，可能幫別人做OEM或ODM（委託代工或設計加工），所以未來會朝OBM市場拓展（自創品牌），但只是市場變大，不會放棄OEM或ODM，所以屆時會是OEM、ODM、OBM並行。

公司過去一年的營收與財務狀況？

我可能要跟會計要一下財務報表我才能告訴你，但是我去年還完房貸了，房子是前年買的，一年內還完，這樣應該還不錯吧？小套房就是了。

前一輪拿了多少？什麼時候拿？股份出多少？

沒有前一輪、後一輪的問題，也沒有什麼時候拿，因為我是獨資！獨資！個人造業個人擔！

你自己出了多少錢？

0元，或者換個方式說，最低資本額二十萬。

你三年後預計的營業額？人事成本？獲利狀況？

我以前會想這個問題，但是每年想的都有一段落差，所以我今年沒有特別想這個問題，不過預計會有所謂的實體辦公室，主要是拿來給客戶參觀跟當教室使用。人事成本最多頂天就是現在的一倍，我不希望公司超過20人，我覺得現在小組織的公司生活比較容易，因為時代改變得太快了，由其是網路業，每年都有新技術、新知識，所以更新太快，如果組織太大反而會改變不易，因此會一直維持小組織模式。獲利狀態就是剛剛說的除了OEM、ODM收入外，還會有OBM收入，只是OBM收入多寡目前無法預期。

你怎麼算估值的？

我沒有算。只有一堆假設跟倍數假設。

為什麼是PreA輪？為什麼不直接A輪？

獨資真的，這間工作室是獨資，營業登記上面寫的很清楚，獨資。

你這輪預計要拿最少多少錢？最多願意分多少股份？為什麼？

沒有預期，也不想。但是日後OBM的產品我是可以售出的，就是直接賣出整個品牌與品牌連帶的服務、網站，這是沒有問題的。

公司有沒有FA顧問在協助處理股權跟財務架構？

沒有，因為我不想搞得這麼複雜。

有沒有什麼需要告訴我的法律議題？

沒有，不然你反問我好了！（自問自答還希望別人反問你？！）

有什麼事情是你覺得說給別人聽別人也聽不懂的？

我不覺得有耶，因為我喜歡把事情簡單化，太複雜的東西我反而覺得會造成執行困難。

你覺得這個模式未來還有什麼點是別人聽到會驚訝的？

驚訝倒覺得不會，反而我是我把一個常見的營運模式加了一點創新的成分在經營，然後找到我們目前被取代機率較低的專案範圍，然後繼續拓展我們的事業範圍。我覺得很多新創產品收益好不見得是他的模式很特別或是會讓人驚訝，反而常常是那些平淡無奇，說穿了好像很多人都可以做得到的模式，只有從中細細觀察、品嚐，才會發現那些驚訝的地方。

總算回答完所有的問題了，所以目前我覺得我應該去了解的就是公司目前的財務報表與未來三五年營收預估之類的預期問題，不過目前我個人是覺得這些問題好像都還好，因為就公司來說我們才算剛學會走路的沒多久的孩子，離穩定還有一小段路，而且等穩定之後我們就會去做其他服務或內容產出類型的網站，相對來說我們未來的變數還蠻大的。

[網站]Nowill Desiign 2016年官網改版

2016-05-29T01:47:00.001+08:00

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉

網站網址：http://nowilldesign.com/

第一個Nowill Design官方網站是在某次要去做RWD響應式網站設計相關演講的前一晚，花了兩個小時用bootstrap v2隨便疊一疊就放上去了，在演講的當下拿了這個2小時心血的官網做Demo，我也很坦誠地說這只有花兩個小時而已，雖然現場大家都說不可能2小時做這樣......但這是真的。

很多人會好奇我一個人怎麼可能在兩個小時內完成這樣的網站，其實我也只是邊做邊想，我唯一在做之前就想好的就是只有網站的架構，內容非常簡單：關於我們、服務內容、服務過的客戶、案例以及聯絡我們，簡單就好，至於內容文案都都當下做到哪寫到哪，並沒有什麼特別厲害的文案。

真的要來更新官網，說真的，在那次之後我曾經多次想要重新翻新Nowill Design的網站，但是我常常才開始做完選單或稍微畫完是意圖之後，就開始無限忙碌，導致我根本沒時間完成，所以就在電腦裡累積了很多2015 v1、v2、v3、v4、v5......隨著不同時段產生不同的idea，而且隔一段時間後再回去看就會覺得好像不夠好，於是就重新做了一個新版本，結果就這樣搞了將近一年半，什麼都沒有做完，而且自己還越來越龜毛。

為了可以讓這個2小時灰濛濛的官網可以退休，我決定還是採取一樣的製作模式，我直接使用現在還在alpha的bootstrap v4版本，開始做到哪寫到哪，沒想到意外的順利，也順便提前體驗一下bootstrap v4的版本，在一天內就做了整個網站，但是因為在跨平台過程中有許多破綻需要修正，所以一放又是兩個月，終於到今天才更換上線。

在公司正式開立前，我的javascript功力其實一直停在只會用別人寫好的plugin的狀態，雖然會搭配jquery寫一些很簡單的動態，但是對於javascript一直沒有什麼信心，而且開公司後我也沒什麼時間好好練習，甚至在前端工作都交給了我更放心、更專業的學弟來處理，實踐人就是一整個厲害！也因為大家其實忙到一個翻掉的地步，所以我才自己又再次動手，直接從前端下手，而且這次加上了一些微互動的部分，至於表單的部分也不再是單純的php表單，有加上了ajax技術，雖然非常的簡單，但是透過這次的翻新，我發現自己也在不知不覺中進步了非常多，這還是我根本沒有什麼機會與時間可以練習的狀態下，不知不覺進步的。

對於這次網站比較有趣的，是我們家的形象人物：紅色小惡魔，整個大大升級了！現在他會360度旋轉了啊！！之前都一直只有正面，側面特別版只有在名片上才可以看到，現在在網站上可以看到360度旋轉了喔！因為我太高興了，所以就故意做得很大隻XD 希望以後有機會出一些周邊產品，好好推廣這隻從我大學就一路陪伴著我走過一切點點滴滴的小惡魔！

最後還有一點點廢話，因為匆匆上線，深怕不上線下次有空可能又隔好幾個月，所以網站測試有限，並沒有非常全面的測試，但已經驗來說應該是大部分解析度都可以正常瀏覽，不會有什麼問題，如果有發現有問題的地方再麻煩大家多多幫忙告知一下喔。

第一次當木工就上手

2016-05-14T01:22:00.001+08:00

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉

我是一個還蠻有DIY魂的人，所以有任何DIY機會時我都會想要自己試試看，因為沒試過就不知道自己適不適合，更何況螺絲起子可是我成長的好夥伴，我也莫名的很喜歡看到螺絲起子（還有瑞士刀！）。前陣子裝冷氣時，裝機的師傅為了整體換新，包含旁邊的管線，所以就將牆上的木作切了好大一個洞，大概35cm乘以45cm這麼大。一開始看到這麼大的洞，當然第一時間就是打電話找木工師傅，沒想到問了三～四位木工，他們都說這工太少了沒有時間處理，就連做四五十年水電的老爸的木工朋友們也都不願意來幫忙，沒想到換完冷氣後，在木作牆壁上的大洞就變成我的夢魘，我遮風避雨的屋子，現在牆上有一個大洞，而且可以直接看到外面的風景。

一個35乘45公分的大洞，對業務來說是很要命的風水忌諱，牆壁破掉會破財，抱著寧可信其有不可信其無的心態，而且也避免外面的蜜蜂、蚊子、恐龍（我對認不出來的昆蟲都統稱為恐龍）入侵我渺小溫馨的家，我只好先拿A4紙把洞黏起來，不過當時手邊只有B4紙，我活生生用了三張B4才蓋起那個洞，可見這個洞真的不小，我也一個頭好幾個大，當然也有可能我不會用紙糊牆壁，所以才需要用到三張B4紙。

在上網Google如何補木作牆壁，還有詢問一些cosplay道具製作專家還有裝潢監工朋友之後，我大概知道怎麼自己去補這個大洞，第一種作法就是用石膏或批土填起來，但是這個洞有點大，所以光用石膏或批土我可能不如用水泥來得快，所以第二種作法就是先用木材把洞填起來或塞滿，之後再上石膏與批土打平，最後再上油漆就可以結束這個夢魘了。
因為要用到木材，所以就開始上網找哪種木材比較適合我，找了一下是乎飛機木還蠻適合我，也問了朋友飛機木是不是比較好裁切，朋友說用美工刀就可以削飛機木了，對於沒有任何裁切工具的我，當下聽到用美工刀也行就有一種“就是這個木！這是這個木！”的感受！於是列了一下清單，找個週末去B&Q特力屋採購：

木材（飛機木類型），可以需要覆蓋這個大洞兩次的量
鋸子，鉅木頭用的
批土
石膏板或石膏粉
刮刀
油漆、油漆刷
木材用強力膠（取代釘槍）

先說油漆吧！我本來很煩惱油漆不知道要買什麼顏色，所幸破洞的木作還有幾片比較大的木片，我就帶木片去特力屋油漆區，然後就這樣比對出油漆顏色是玫瑰白（或百合白？這兩種顏色差一點點而已，還蠻難分的！），所以我選油漆的方式可能幫不上大家，因為我要補的洞在我現在住的房子裡，所以我直接買比較貴的立邦漆，比較沒有油漆味，通常油漆味散去大概需要兩週，建議不要住在有油漆味的屋子裡，會頭暈的以為自己中毒了，而且你真的可能會中毒啊！再來鋸子就直接買一把最便宜的，因為家裡不可能一天到晚都有破洞吧？油漆刷本來想買油漆三件組，但是特力屋的員工經過就跟我說油漆三件組的油漆刷很爛，建議我換支便宜的羊毛刷比較好刷，而且刷起來也比較漂亮，我看了一下單買油漆刷還比較便宜，至於裝油漆的盤子我可以用外面攤販給的紙碗代替。千望不要忘記還有砂紙，在上油漆前牆壁最少用砂紙磨平，這樣近看比較不會坑坑疤疤，油漆三件組裡面有附一張，但是其實我要補的洞還蠻大的，附的沙紙其實還蠻小張的，所以最後乾脆也單買砂紙，一次四五張的樣子，也才幾十塊，全部合起來還比油漆三件組便宜多了！

在特力屋來來回回我一直找不到批土跟石膏粉，剛好遇上建議我買羊毛油漆刷的店員，就順道問他了，沒想到他問我：“你要好一點的批土還是普通的？”，因為我不知道該如何回答，就告訴他我要補家裡的牆壁，他就說那普通的批土就好了，於是他就拿了一罐批土給我跟我說這牌還不錯，然後又拿了一包石膏粉給我，跟我說其實批土就是石膏粉加水，成分差不多。如果你有看過批土的成分，的確大概就是石膏加水，當然還有其他的東西，最後就是最麻煩的木材了，因為我真的什麼都不懂，所以在那邊看了很多木材，最後還是問了店員，也把我帶去的木片拿給店員看，店員看了看說我這是三層板，但是最近高中園遊會都被買光了，只剩四層板，叫我買四層板一大張，他在幫我切一塊小的給我......我傻了！我買一大塊板幹麻？而且板子還比我家的牆壁還厚，我買這麼一大張是要幹麻？於是我很失望地四處看其他木材，一起去採購的室友說我們要不要乾脆買塑膠瓦愣板貼一貼算了，也比較好裁切，當下我真的覺得買不到木材也只好這樣了，拿了一塊塑膠瓦愣板之後，剛剛要我買四層板的店員過來說：“你們不能買這個啦！這個一下子就爛了，還會熱脹冷縮，不適合你們啦！” 於是我跟室友又默默地放回去了，但是我們也不能買四層板啊？該怎麼辦呢？這時在旁邊看到松木抽強板與桐木抽牆板，兩種材質老實說我也不知道，因為我其實是想找飛機木，於是我拿了一條松木跟一條桐木的抽牆板，發現桐木抽牆板輕好多，而且摸起來的質感、重量，都跟我在書局看到的飛機木很像，拿起手機google了一下，發現飛機木就是桐木.....於是我就買了兩條最長的桐木抽牆板回家了，就這樣結束了我在特力屋的補牆採購。

既然買了抽牆板，我就不用考慮太多鉅木頭的事情了，我只要量好每段木頭需要的長度即可，於是我拿出卷尺開始測量，因為牆上的大洞其實邊緣並不是直線，是有點弧度的，所以每一塊木頭的長度也有一點不太一樣，至於斜口處我只能用石膏或批土硬補了！於是就這樣拿鋸子努力鋸抽牆板，然後一塊一塊用強力膠黏上去，一般師傅都會用釘槍，“蹦蹦蹦”按幾下就釘好木頭了，但是我只是要補這個洞......雖然我真的還蠻想買釘槍的。我對補這個洞的策略其實還蠻簡單的，就是先用直的抽牆板把洞先補起來，然後為了跟三層板差不多厚度，可以少上一些批土或石膏，所以還要上第二層橫的抽牆板，這樣兩層中間還用強力膠黏牢，應該就還蠻扎實的了。

直的抽牆板黏上去，因為不知道強力膠什麼時候會乾，強力膠瓶身上是寫半小時，可是半時候我一摸，黏上去的抽牆板就凹下去了，所以我只好拿透明膠帶黏在凹下去的抽牆板上，然後在快速拉起，透過膠帶的黏力把凹下去的抽牆板再拉回來，然後這次我就乖乖的等了一天之後才再黏第二層橫的抽牆板。

第二層橫的抽牆板，為了消耗強力膠，所以擠的非常多，但是意外的卻變得非常扎實，扎實到我已經可以一拳打在上面，不會有任何板子凹陷的狀況，當然這是黏好第二層橫的抽牆板後，再過一天的情況了。

在上了兩層木頭後，其實離要與三層板的表面齊平，還有一小段距離，我原以為用批土上一土就可以了，可是我後來上了三層批土，又因為批土原本的水份過多，每次上完後，批土一乾就出現裂痕，最後我只好改上石膏，在攪拌石膏時我故意加少量的水，然後用最快的速度磨平，這裡真的要磨平，不然後面用砂紙磨平時會想哭，因為我攪拌的石膏太硬了，我後來用砂紙磨根本一動也不動，當然石膏上完後我還是有再上一層批土讓表面更平，甚至稍微凸一點，最後再用砂紙磨平。

砂紙磨平後其實就是倒點油漆再加水調色，調色完之後就可以開始油漆了，水加多點在油漆裡其實不會怎樣，因為油漆不能只上一層，要多上幾層才可以把顏色真的上上去，不然油漆下面可能會有一些奇怪的痕跡。前前後後我大概上了四層油漆，剩下的油漆我就拿來補其他牆面上骯髒處，因為後期水加得有點多，所以塗在其他牆面上時也不太容易出現色差，我想是因為油漆成分比較薄的緣故吧！就這樣我完成了我這次的木工之旅！還挺好玩的，我爸媽也覺得我補的還不錯（我爸是做水電工程的，而且他只做新蓋的大樓），也許我以後可以考慮偶而兼差一下，這樣我就真的可以買釘槍了！

Mac上的寫作軟體推薦TextNut

2016-04-17T03:17:00.001+08:00

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉

最近一直在思考怎樣可以讓自己有時間可以維持寫作的習慣，又不會讓自己覺得要一直連上Bolgger才可以好好寫作，如果說有App可以支援讓我在本機端寫作，當我寫完一篇文章後可以幫我直接發佈到部落格上，那應該對我來說還蠻方便的才對。

近年來比較紅的寫作方式是Markdown，但是我一直沒有機會可以好好使用的Markdom，以往在Rich editer裡面寫作的問題是我必須一直來回在操作文字加粗、放大、變色等等，甚至圖片的排版也會花我許多時間，而Markdown的目的就是要易讀易寫，對於文章錯字頗多的我還真的蠻重要的，因此我這幾天一直在找寫作相關的Mac軟體，我找了好幾款，最後我選擇了TextNut，它是Free免費的軟體，而且他不只可以用在Mac上還可以用iphone、ipad，而且支援iCloud，換句話說就是可以隨時隨地寫作，而且雖然軟體免費，但沒有任何廣告干擾，簡直跟付費軟體沒兩樣！

在找到TextNut之前，我其實也有看過其他的軟體，比方說Leafnote，Leafnote拿來寫作對於目錄編寫模式來說是還蠻方便的，但是不支援Markdown，所以在試用後沒多久就被排除了，接著我也看了一下Byword2，Byword2支援Markdown，而且還支援直接發布到Blogger、Wordpress、Evernote、Tumblr，非常的符合我的需求，而且他還有支援iColud與Dropbox，同時也有iOS版本，所以也可以做到隨時寫作，但最大的問題是所有軟體都要先付費才可以使用，就在這時候我看到了TextNut。

TextNut跟Byword2還蠻像的，而且TextNut對於對Markdown不熟的人，有非常好用的輔助功能列，讓你使用Markdown不會有任何的困擾，甚至完全不用熟Markdown就可以開始用，光是這點就贏過我找的其他軟體了。當然免費版是有限制的，比方說Libary只能開4個，外加2個Dropbox資料夾，所以頂多6個Libary，一般來說應該還蠻夠用的，如果不夠用還是建議付費支持一下軟體，iOS版本下載免費，功能解鎖只要120元新台幣，而且綁定itunes帳號，所以換手機或重灌都可以取回，不用二次付款，價格不貴，真的！Mac OS版本下載免費，功能解鎖要24.99美金，所以大概810塊新台幣，一樣重新安裝時可以解鎖付費功能，不用二次付費。開發一個好用的軟體要花好多心力與時間，要不斷雕琢、不斷Debug，身為網站建置工作者的我，絕對非常可以體會的，所以喜歡～還是麻煩請付費支持一下喔！

如果你有跟我一樣的困擾，我真的非常建議可以使用TextNut來寫作，本篇就是我使用TextNut寫作並且發布到Blogger上，真的非常好用，也大幅加快了我寫作的速度，這樣一來我以後好像除了太忙以外沒有別的理由不繼續寫部落格了？