第二十四個夏天後

2017年5月18日星期四

[macOS] 透過 MacPorts 安裝 MySQL Client

每次裝完都很感到疑惑，為何當下沒 mysql 指令可以用，然後又跑去 linux server 把玩 :p 其實是自己沒做設定罷了：


$ sudo port install mysql56

$ mysql

-bash: mysql: command not found

$ sudo port select mysql mysql56

$ mysql --version

mysql  Ver 14.14 Distrib 5.6.34, for osx10.11 (x86_64) using  EditLine wrapper

收工

2017年5月10日星期三

[Javascript] 添加密碼規則要求 - 使用 jQuery.validator

剛好碰到需求，且沒有太嚴重的部分，就先偷懶用前端擋：


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>



<script>



$(document).ready(function() {

 // 要有 a-z

 $.validator.methods.passwd_rule1 = function( value, element ) {

  return this.optional( element ) || /[a-z]+/.test( value );

 }

 // 要有 A-Z

 $.validator.methods.passwd_rule2 = function( value, element ) {

  return this.optional( element ) || /[A-Z]+/.test( value );

 }

 // 要有 0-9

 $.validator.methods.passwd_rule3 = function( value, element ) {

  return this.optional( element ) || /[0-9]+/.test( value );

 }





 $("form").validate({

  rules: {

   newPassword: {

    required: true,

    minlength: 8,

    passwd_rule1: true,

    passwd_rule2: true,

    passwd_rule3: true,

   },



   checkNewPassword: {

    equalTo: "#newPassword"

   }

  },



  messages: {

   newPassword: "密碼必須8位數以上，且需含大小寫英文跟數字",

   checkNewPassword: "輸入錯誤，請確認密碼",

  }

 });

});

</script>

其他把玩：

在 Chrome console 引入 library 測試，而非修改 source code


var js = document.createElement('script');

js.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";

document.getElementsByTagName('head')[0].appendChild(js);

var js = document.createElement('script');

js.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js";

document.getElementsByTagName('head')[0].appendChild(js);

替沒有 id tag 的 input 添加 id：


$('[name=newPassword]').attr('id', 'newPassword');

2017年5月8日星期一

[PHP] 把玩 Laravel @ macOS 10.11.6

最近使用 Vue.js 後，想說練一下怎樣跟 php 整合，就挑 Laravel 來試試了。這次全靠 MacPorts 跟 Composer 來把玩，碰到了一些問題筆記一下。


$ sudo port install wget tmux php71 php71-openssl php71-mcrypt php71-mbstring

$ sudo port select php php71

$ cd ~

$ php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"

$ php -r "if (hash_file('SHA384', 'composer-setup.php') === '669656bab3166a7aff8a7506b8cb2d1c292f042046c5a994c43155c0be6190fa0355160742ab2e1c88d40d5be660b410') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"

$ php composer-setup.php

$ php -r "unlink('composer-setup.php');"

建立專案：


$ time php ~/composer.phar create-project --prefer-dist laravel/laravel my-project

運行：


$ php artisan serve

Laravel development server started: <http://127.0.0.1:8000>

收工。

若有碰到奇怪的問題，通常是 php 版本問題：


Parse error: parse error, expecting `'&'' or `"variable (T_VARIABLE)"' in /Users/id/my-project/vendor/laravel/framework/src/Illuminate/Foundation/helpers.php on line 478

Script php artisan optimize handling the post-update-cmd event returned with error code 255

這是因為一開始偷懶不改變 php 環境變數，例如只用 alias php=php71 或是都用 php71 ~/composer.phar create-project --prefer-dist laravel/laravel my-project 這種執行方式所產生出來的，最後還是靠設定 PATH 或是 port select php php71 來解。

2017年4月19日星期三

[Vue.js] 使用 webpack / webpack-dev-server 之 Proxy 架構與後端 api 開發整合

使用 Vue.js 開發前端大概是今年的策略，一開始請同事試著把 embedded web interface 重構，碰到的第一個問題是，如何在桌機開發又能向 embedded device 發 request。如此一來，就是可以專心用 vue.js 開發網頁端，而 api 端也可以交給其他人開發，大家有一個共同整合測試的方式。這個在 server site 就是很直觀的 proxy 架構了，很幸運的，webpack 的彈性可以做到。

舉個例來說，我想讓 /json 這個 path 被包裝成回傳某筆資料，在此就用 ipinfo.io 來頂替一下。


https://webpack.js.org/configuration/dev-server/#devserver-proxy



module.exports = {

  entry: {

    app: './src/main.js'

  }, 

  devServer: {

    proxy: {

       '/json': {

          target: 'https://ipinfo.io/',

          secure: false

       }, 

    }, 

  },

...

然而，不知是不是因為我用 vue-cli 的關係：


$ vue init webpack my-project

$ npm list --depth=0

├── autoprefixer@6.7.7

├── babel-core@6.24.1

├── babel-loader@6.4.1

├── babel-plugin-transform-runtime@6.23.0

├── babel-preset-env@1.4.0

├── babel-preset-stage-2@6.24.1

├── babel-register@6.24.1

├── chalk@1.1.3

├── connect-history-api-fallback@1.3.0

├── copy-webpack-plugin@4.0.1

├── css-loader@0.26.4

├── eventsource-polyfill@0.9.6

├── express@4.15.2

├── extract-text-webpack-plugin@2.1.0

├── file-loader@0.10.1

├── friendly-errors-webpack-plugin@1.6.1

├── html-webpack-plugin@2.28.0

├── http-proxy-middleware@0.17.4

├── opn@4.0.2

├── optimize-css-assets-webpack-plugin@1.3.1

├── ora@1.2.0

├── rimraf@2.6.1

├── semver@5.3.0

├── shelljs@0.7.7

├── url-loader@0.5.8

├── vue@2.2.6

├── vue-loader@11.3.4

├── vue-style-loader@2.0.5

├── vue-template-compiler@2.2.6

├── webpack@2.4.1

├── webpack-bundle-analyzer@2.4.0

├── webpack-dev-middleware@1.10.1

├── webpack-hot-middleware@2.18.0

└── webpack-merge@2.6.1

搞了一陣子仍沒成功，且裡頭的確沒 webpack-dev-server :p 最後試了一些招術筆記一下，也看了很多大家再猜來猜去的論點。

總之，筆記兩種解法：

1.原先用 npm run dev 的方式啟動，乾脆改成用 webpack-dev-server 啟動方式，可以確定 devServer.proxy 的設定有吃到


$ npm install webpack-dev-server --save-dev

$ node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config build/webpack.v.conf.js

2.直接上code! 依照原理實作


$ vim build/dev-server.js

var httpProxy = require("http-proxy");

var apiProxy = httpProxy.createProxyServer();

app.use("/json", function(req, res) {

  //console.log(req);

  req.url = req.baseUrl;

  apiProxy.web(req, res, {

    target: {

      port: 80,

      host: 'ipinfo.io'

    }

  });

});

$ npm run dev

如此一來，都可以解決 :p 可以用 curl -I http://localhost:8080/json 來驗證。

其實改 code 的方式就是不想多測試他的 config 倒底是文件寫錯，還是被改壞，直接靠原理硬解。

2017年3月23日星期四

網路購買機車與實體店家購買的差別

一直說要換個大一點的機車，卡了很久終於成行了。尋找的方向很簡單，機車車墊長一點、置物箱大一點，可以完成近程多載個小孩就行，於是乎，找了 YAMAHA 勁豪125。結果整天騎 100 的我，有點不適應大車。然後很大的置物箱卻還是擺不進一頂 3/4罩安全帽(XL) 有點小失望，所幸已經很習慣都掛在車外 XD

聊點其他的，在找購買車子時，逛了 PCHOME/UDN 賣機車的，再去跟實體店家訊問價錢，發現一個很奇妙的地方：為何網路賣價跟實體店弄到好的價一樣(甚至更便宜)，甚至網路還可以免息分24期，更別說刷信用卡還可以衝 1% 甚至 2% ，一台6萬的車，立馬少付 600、1200 等等

所幸實體店家給了我很多解惑：

實體店家跟公司拿貨都有統一價
便宜一點的機車，通常是屬於業績車
網路上行銷總價便宜，但實體店家因批貨統一價而無法跟進
網路上的賣價可能不是弄到好，還得付購車手續費(燃料費、強制險、手續費等，以125的車可能落在1000~2500之間)
實體店刷卡，得再多信用卡手續費；分期付款得再跟銀行搭配，通常第一期會添加後續應繳的利息，以至於後面看起來像沒利息

至於網路購買，有的人會說機車店不管保固等事，追了一下比較像實體店沒賺，只是幫公司把車交給網購者，但車子若真的有問題，仍不至於不修啦，不修就告狀公司 XD

此外，實體店跟網購的金額差別，大概接近網路價 + 1000 ≦ 實體店辦到好的價格（若網路價不是辦到好的價格，實體店就會贏不少）。還有還會分去年跟今年出廠的車差別，通常去年的會便宜一千（網購的價錢是買到 2017 年，但實體店可能買到2016年），另外，實體店也會有已領牌的業績車，有機會還可以折1500-2000不等

總之，買車嫌麻煩就網購信用卡刷下去，若現金足，不如就去實體店家問問看有什麼優惠跟網購 PK 吧，目前還是覺得實體店優勢可能跟網購處於伯仲之間了，想著想著就去實體店買，也可以比較快拿到車，買完車未來也會常在同處維修，老闆也開心，自己也安心，至少不會碰到先拆座墊吧 XD (後來我才知道，有些車先拆座墊是為了做 FW/Device 檢測)

訂閱：文章 (Atom)

2017年5月18日 星期四

[macOS] 透過 MacPorts 安裝 MySQL Client

2017年5月10日 星期三

[Javascript] 添加密碼規則要求 - 使用 jQuery.validator

2017年5月8日 星期一