寫喺舊金山（一）——咁耐搞過乜

又一篇標題同內文唔相符嘅文

更新下小弟嘅近況啦下

話說自上次更新個 blog 以來，已經差唔多一年 lu，半荒棄狀態嘅 blog 再唔更新就會好似再鋒利嘅刀一樣生鏽喔～～

話說自上次喺陳舊嘅金山做了三個月的廉價實習生後，輾轉之間又回到了陳舊的金山工作喔。期間都食過幾家茶飯，“真係學到好多野”、先知讀書真係好幸福喔～

第一份工——一間可以唔使用keyboard 打 code 嘅公司

呢間係第一份返黎做嘅 part-time，公司人手極度短缺——一個人負責全部 backend、一個負責 front-end + android、一個負責 iOS 全盤開發、一個 project man，另外加三個 CEO 級別嘅阿頭。呢個格局係典型嘅 startup 格局，但係越滾越多客，仲要分佈亞太區，都係得3 嘅阿頭，好自然唔係太清楚下面嘅 programmer 開發困難，結果工時越來越長，曾經嘅馬拉松跑手都好似有左幾個月身幾咁（不過我有一個月了 T.T）；或者可能太難請人跟，因為真係好難跟⋯⋯

因為佢哋有好多個網頁 template比唔同 client 用，由因為好多客，所以有超過 5x 幾個 template，但問題係個個 template其實差唔多樣，所以有一大堆 html 都係一模一樣，如果要更新的話，就要每個都要更新。莫講話 git diff 會慘不忍睹，改都改到噴腦漿。

好彩個老細都知咩事，就叫我整個 template generator，用 react.js gen 噻堆 template，結果因為整合舊有 template 有難度，加上耗時太長，結果做到一半就結束了。不過小弟自問已經盡我所能都整唔到 “css regions + jquery content" (Google 一下，可以話係無個 work)。

或說有次公司打算買新 keyboard 同 mouse ，問同事有咩想要，結果居然有人話唔使買 keyboard 啦，反正平時都淨係用 mouse copy & paste D code。呢句話真係 sad but true，5x 幾個 templates 真係日日都 copy & paste D code 😂。

個人感覺公司文化都太 chur 了，搞到個個同事都無時間打牙骹，一個星期返五日，計埋都40個鐘，咁嘅環境真係好悶，而且無得一齊進步，交流 best practice。公司嘅唯一娛樂，就係⋯⋯，好似無⋯⋯我感覺自己係零⋯⋯。唯一嘅娛樂喺自己比自己嘅娛樂，自我陶醉，算唔算～

第二份工——真係有 startup feel，而且一齊奮鬥嘅感覺

有一種工，你係自願加班、即使，因為返工嘅感覺同喺中學同成班 friend 做 project 嘅一樣。有無諗過返工係可以有無限量零食供應、成班同事咩水都吹得、仲要有一大堆 intern 差唔多年紀，再重重點！有超噻班嘅 senior engineer 帶住，係一班一有問題就可以問，幾秒鐘就可以好 make sense 咁答倒你問題嘅超勁programmer。

公司有一個好重要嘅原則，就是一定要 best practice，係一定！！！不過所謂 best practice 都只係一個 term，只要 future + proof + readable + efficient + … 就係 best practice。係呢方面最有經驗嘅都係大佬們喔～

同埋好幸運地！好重視 team lunch，而且每餐都一齊食。呢段時間係好重要，因為係陳舊金山做野果陣就試過餐餐自己食，真係悶到痴線；不過今次決定左要自己煮就好好多，起碼食飯都仲有同事入廚房吹下水，而且好多時同事都係自己整沙律，或者直接嗌外賣。

打到斷唔倒味，下次正式入正題，係陳舊金山痛上次嘅體驗幾唔同，而且第一次喺呢度參加 Hackathon～

分享一下我裝在 Atom 的 Packages/ Themes （＋後話）

一次過看，詳情看下面

用了 Atom 差不多一年了

差不多一年前開始因為寫網頁的關係，覺得 notepad++ 不太能滿足我的要求了，因為小弟的記憶力不好，記不了不同 framework, library 的 API，而 notepad++ 上的 Snippet 支援不多，極其量就是 HTML auto close bracket 等等，而且主題換來換去都是一個樣子（換主題一直是我的癖好，哈哈。想一下對著不會跟你互動的東西，每次看都一個樣子真的會悶死）。

因此就開始適用不同的 Text Editor 了，從 notepad++ 到 sublime text 到 bracket 到 Atom ，最後都留在 Atom 的世界裡咯～～（身邊的神人經常遊說我用 VIM/ Emacs ，哇～要是叫我學那些 commands 不如學一套新的語言，學變成都這麼難，還要學怎麼用 vim/ emacs   🙈 ）。

[Error Log] Empty AJAX responseText + parseError from JSON (MariaDB vs. mySQL)

Hell! I have been struggling on this problem for more than 2 months, and finally got an answer, and that’s related to MariaDB and mySQL. At this stage, I am still confused with whether this is the FINAL and REAL answer.

I am recording the whole process of bug discovery below here, but in a nutshell:

1. Got empty empty responseText from jQuery AJAX call
2. Got the parseError from the JQuery AJAX call
3. Found the source of the error, which is caused by the json_encode function in PHP
4. Compared the var_dump of the variable being json_encode from mySQL and MariaDB, the output is different
5. Output frommySQL one has strange character (ASCII code 130), whileMariaDB does not
   • Remind me that mySQL allows the PHP to read and write emoticon from and into the database
   • But, MariaDB does not
   • In conclusion for now, mySQL supports I/O of more unicode characters than MariaDB does (but Asian characters are also supported)
6. After removing the strange characters from themySQL database, problem solved.
   • Reason is due to the fact that json_encode supports only UTF-8

All string data must be UTF-8 encoded.

【秒懂】用 Javascript 做 Routing——讓 Single-page webapp 不用 Hashbang (#!) 也能瀏覽

  _     _             _ ____    ____             _   _             
 | |__ | |_ _ __ ___ | | ___|  |  _ \ ___  _   _| |_(_)_ __   __ _ 
 | '_ \| __| '_ ` _ \| |___ \  | |_) / _ \| | | | __| | '_ \ / _` |
 | | | |  | | | | | |___) | |  _ < (_) |  |  | | | | (_| |
  |_|\__|_|  |_|_|____/   \_\___/ \__,_|\__|_|_| |_|\__, |
                                                             |___/

【簡介】

做 Single-page webapp 最大的問題就是不能像普通鏈接一樣：

• 要不給加上【#!】(Hashbang) (e.g.) http://www.example.com/webapp#!/login
  • 這樣的【#!】，可以透過 (e.g.) http://www.example.com/webapp/index.html 有聯繫的 javascript 分析 【#!/login】，再輸出合適的內容
  • 但看起來好不順眼，直接跟 (e.g.) http://www.example.com/webapp/login 相比，下面的順眼多了
• 要不只能傳送網址的 Root Directory (e.g.) http://www.example.com/webapp
  • 這樣就更不方便，要登入就只能再按網頁上的按鈕來登入
  • 而且，分享也更困難～

所以，現在要做的是：

1. 讓網頁的內容能透過 (e.g.) http://www.example.com/webapp/login 來分享
2. 讓【上一頁】按鈕能運作，真的返回先前的狀態

但，要注意的是：

1. 網頁一定要透過 Javascript 才能執行
   • 如果要照顧沒有 Javascript 的瀏覽器用戶，只能把整個網頁用 Server-side programme 重寫
2. 不支援HTML5 的瀏覽器，也可以瀏覽網頁，但
   • 網址還是會有 #!
   • 不能使用【上一頁】、【下一頁】的按鈕

【事前功夫】

1. 要有已經設定好的 Server：以下的教學會分別說明 Apache 跟 Nginx
2. 為了簡化內容（還有小弟的技術不足, haha），以下內容用上 Javascript Framework  (e.g.)AngularJS,EmberJS,BareboneJS
   • 在這裡，會以 AngularJS 為目標
3. 支援 html5 的瀏覽器，尤其是支援 【History.pushState】

【秒懂步驟～開始】

下面的教學，會以一下的設置做背景

• Server: Apache/ Nginx
• Website Path: /webapp/exampleApp/
• 所以內部瀏覽的網址是: 127.0.0.1/webapp/exampleApp

以下內容將會一氣呵成，需要解釋的可以再留言區問～