關於網路那些事...

GraphCool 介紹

October 27, 2017
Posted By Adam Ou-Yang

安裝 GraphQL Server 教學

這裡會紀錄 GraphQL 也稱 GraphCool 的操作

安裝

首先，用管理員權限開啟 cmd，安裝graphcool

安裝 graphcool

npm install -g graphcool

初始化graphcool專案

接著，前往專案資料夾，建立 local 端的graphcool管理初始化

graphcool init

Deploy

安裝完畢後，會看到選項 graphcool deploy, 將你的Graphcool server發布在線上 graphcool local up, 開始你的本地端Graphcool graphcool add-template facebook-auth, 加入facebook 驗證

我們先選擇線上發布

graphcool deploy

線上管理介面

接著，會自動開啟瀏覽器，前往 https://console.graph.cool/graphql/schema 這時，開啟本地端的 types.graphql 會發現裡面的 schema 已經被發佈到線上

現在，新增一個 Test types.graphql

type User @model {
  id: ID! @isUnique
  name: String
  dateOfBirth: DateTime

  # Uncomment below - you can declare relations between models like this

  # posts: [Post!]! @relation(name: "UserPosts")
}

type Test @model {
  id: ID! @isUnique
  namesss: String
  dateOfBirth: DateTime

  # Uncomment below - you can declare relations between models like this

  # posts: [Post!]! @relation(name: "UserPosts")
}

再輸入發布指令

MySQL - InnoDB 簡介

October 20, 2017
Posted By Adam Ou-Yang

MySQL 5.0 之後的版本支援的儲存引擎包括 MyISAM, InnoDB, MEMORY, CSV …等

其中 InnoDB 屬於交易安全表(支持交易，行級鎖定，外鍵和表加密)

MyISAM、MEMORY、CSV則屬於非交易安全表。

將目前支援的儲存引擎列出來，就能看到個引擎的支援狀況:

> SHOW ENGINES \G
...
*************************** 2. row ***************************
      Engine: InnoDB
     Support: DEFAULT
     Comment: Percona-XtraDB, Supports transactions, row-level locking, foreign keys and encryption for tables
Transactions: YES
          XA: YES
  Savepoints: YES
*************************** 3. row ***************************
      Engine: MEMORY
     Support: YES
     Comment: Hash based, stored in memory, useful for temporary tables
Transactions: NO
          XA: NO
  Savepoints: NO
*************************** 4. row ***************************
      Engine: MyISAM
     Support: YES
     Comment: MyISAM storage engine
Transactions: NO
          XA: NO
  Savepoints: NO
...
8 rows in set (0.00 sec)

在 MySQL 5.5 之前，預設的儲存引擎是 MyISAM

React 入門

October 18, 2017
Posted By Adam Ou-Yang

React 是一個 View 框架，主要的用途有幾個:

將UI物件化
運用 props 來傳輸數據
依照 state 變化來調整 view
使用虛擬 DOM 提升效能

在開始之前，請預先安裝 webpack + babel + react依賴環境

接下來，會一步步來說明:

用 Yarn + webpack 2 + Babel 架設 React 環境

October 18, 2017
Posted By Adam Ou-Yang

Webpack 是一個 module 整合工具，用來將javascript 打包成一支讓瀏覽器能夠運行的 bundle.js。

看似簡單，但其實功能非常強大

webpack 的功能:

和 Browserify一樣，可以整合 ES Modules, CommonJS 及 AMD modules，減少依賴進而加速了運行的時間
可以將js打包成單一個 bundle.js 或者多個可以非同步載入的模塊(需搭配plugin，可減少初期載入時間)
可結合babel等編譯器，進行文件預編譯功能。例如，將 JSX、ES6、Typescript…轉javascript，Handlebar 字串({{expression}}) 編譯，images 轉 Base64等

此外，還有一些 plugin 可以使用

例如 common-chunks-webpack-plugin - 可以將一些要再多地方共享的模組拆分成獨立的 bundle extract-text-webpack-plugin - 可以將 bundle 中的 CSS 另外存成一支 app.bundle.css html-webpack-plugin - 可用來動態產生HTML內容，並且會自動將打包過的js整合再一起 i18n-webpack-plugin - 可製作多國語系 compression-webpack-plugin - 壓縮內容

ECMAScript 2015 (ES6) 入門

October 14, 2017
Posted By Adam Ou-Yang

ES2015 是在2015年6月正式發布的一項重大更新

但是在命名方面有點混亂，很容易讓人產生誤解，所以，還是必須先來認識一下:

ES2015 == ECMAScript 2015 == ES6 == ECMAScript 6

並且，ECMA委員會決定，每年6月都來發布新版本，並以該年作為版本標記所以 2016年，發布了 ECMAScript 2016 (ES2016) 可視為ES6.1版本，僅小幅新增如 includes 方法及指數運算等功能

但普遍仍會以 ES6來描述 ES2015

所以，懂了嗎?以後聽到有人在說 ES2015或ES6，那都是在講同一個事情

Babel 入門

October 14, 2017
Posted By Adam Ou-Yang

本文是依據 Babel 官網及網路參考資料逐步學習記錄的內容

Babel 這個壞男孩(發音似 Bad boy) 喜歡追求新潮的東西，同時內心是個文青，熱愛老東西。所以，當他接觸到新的內容，就會想盡辦法與舊事物融合~ 只能說個性實在完美

每當有新的javascript語法(例如ES2015-ECMAScript 6)出現，都只能靜待瀏覽器支援才能決定是否採取行動。為了解決這樣的痛點，Babel就出現了。

Browserify 入門

October 13, 2017
Posted By Adam Ou-Yang

本文是依據 Browserify 官網及網路參考資料逐步學習記錄的內容

Browserify 讓我們可以在瀏覽器中使用Node.js 風格的模組，不管是 AMD / CMD / ES6 …..風格的模塊化，它都能認識，並且編譯成瀏覽器認識的JS。

Browserify 運作的方式，會先在代碼中以靜態分析(static analysis)搜尋有調用 require()的內容，彙整出調用依賴關係圖(dependency graph)，並且將關鍵字解析成路徑，然後根據路徑找到檔案，接著，檔案會被打包(bundle)成單一獨立的 javascript 檔案，讓你可以直接在網頁中直接使用。並且，打包的檔案預設都會使用嚴格模式 ```use

接下來，開始介紹 Browserify 安裝方式及用法說明:

PHP 產生 GUID 唯一辨識碼字串

October 7, 2017
Posted By Adam Ou-Yang

GUID

GUID (Globally Unique Identifier) 是由微軟所提出實現UUID的一種作法，早期包含了MAC地址、硬體序號、網卡相關參數，當地時間等，來建立起的唯一字串，但是因為會有暴露MAC的安全疑慮，因此，後來衍伸的版本則有陸續做不同的調整，總而言之，目的都是用來建議唯一辨識字碼，普遍來說，GUID 字串長度為 32個16進位（0－9，A－F），如：{12AB3456-7AAAA-1010-A2EE-12345B67899D} (本質是屬於128位元的二進位整數)。

在PHP5.0 ~ 5.4.4 的版本，windows都可以直接透過 com_create_guid() 來取得GUID，但是在Linux以及5.4.5之後的版本則預設不支援 com_create_guid()，會發生錯誤訊息:

Fatal error: Uncaught Error: Call to undefined function com_create_guid() ...

(windows 環境中，php5.4.5以上版本需添加com拓展才能使用) 雖然不一定能使用com_create_guid()，還是可以自行生成GUID 當系統不支援com_create_guid() 就能透過自行生成的方式取代，

網路上已有人提供產生guid的寫法，如下:

MySQL - ENUM 與SET 類型比較

October 4, 2017
Posted By Adam Ou-Yang

ENUM 列舉陣列與 SET 集合非常類似

底下分別說明兩者類型，以及舉例說明:

ENUM

ENUM 最多可預設 65535 個成員

1-255個成員 (佔1位元) 255-65535個成員 (佔2位元)

存取資料時，只允許從預設的成員之中，挑選其中單一值

也可以用數字代表，1就代表第一個成員..以此類推

範例:

> CREATE TABLE enum_demo (name VARCHAR(10), gender ENUM('M','F'));

回應:
Query OK, 0 rows affected (0.05 sec)

接下來我們插入多筆資料，並且試著插入

正常的ENUM值
非ENUM預設的數字值
非ENUM預設的英文字母
插入多個值

> INSERT INTO enum_demo (name,gender) VALUES ('jenny','F'), ('joe','M'), ('way',0), ('grown',1), ('bang',2), ('rown',100), ('honer',NULL), ('tank',''), ('show','F,M');

回應:
Query OK, 9 rows affected, 4 warnings (0.00 sec)
Records: 9  Duplicates: 0  Warnings: 4

從回應來看，可以看到插入9筆資料，但有3筆警示

檢查內容如下:

> SELECT * FROM enum_demo;

回應
+-------+--------+
| name  | gender |
+-------+--------+
| jenny | F      |
| joe   | M      |
| way   |        |
| grown | M      |
| bang  | F      |
| rown  |        |
| honer | NULL   |
| tank  |        |
| show  |        |
+-------+--------+
9 rows in set (0.00 sec)

SET

SET 預設值最多可以包含 64個成員

nodejs Cannot find module xxx 解法

October 4, 2017
Posted By Adam Ou-Yang

在使用 nodejs ，時常遇到版本無法支援的狀況，導致會出現找不到相關模組的情況

例如: Cannot find module ‘github-url-from-git’

處理的方式分別有以下幾種

MySQL 內建功能函數 - IP 格式轉換處理與天數計算

October 4, 2017
Posted By Adam Ou-Yang

這裡特別介紹MySQL內建的功能函數

分別說明如下:

[解決] PHP Notice: Undefined index和Undefined variable的解决方法

October 3, 2017
Posted By Adam Ou-Yang

在安裝新的PHP，或者升級PHP版本時，可能會遇到下列錯誤:

PHP Notice: Undefined variable:

遇到這類問題時，可以嘗試以下解法

設計師必備的 30 個高質感免費字型 [ 熱門蒐藏]

最新推薦給設計師30個高質感免費字型，適用於大標題、Logo、T恤、標籤、海報、徽章等用途。每一個字型都是經過精挑細選，讓你可以用來創造更具有個人風格的設計專案，並且這些字型都能免費提供個人或商業用途，非常值得蒐藏。

現代PHP password_hash 雜湊加密採用隨機SALT 使用方式

September 21, 2017
Posted By Adam Ou-Yang

Md5 已經公認為危險的加密方式，而SHA-512也能以每秒4600萬次計算進行破解，儘管被破解的速度較慢，但是仍有安全上的疑慮。

通常駭客如果取得了大量的加密字串，需要先猜測出你使用的是哪一種SALT，如果所有的密碼都採用相同的SALT，那麼一但破解第一組，代表其他密碼也就能順而進行破解

現在，PHP提供的 password_hash 可以達到隨機生成處理 SALT，因此就連開發者也不會知道每次加密會使用甚麼SALT，這樣當駭客想要進行破解，成本就當然會更高

PHP 雜湊加密演算 sha256、sha224、sha512....

September 21, 2017
Posted By Adam Ou-Yang

過時的 MD5 以及 SHA1

早期，常使用 md5, sha1 雜湊(hash)來進行加密，

但是md5已經能成功破解，及sha1 (, sha0) 都有理論的破解方式，因此還是推薦使用其他可替換的加密演算法。

PHP - 內建 web server localhost -S -t 啟用方式

September 6, 2017
Posted By Adam Ou-Yang

這裡簡單介紹如何直接透過PHP 內建 web server，預覽網站的方式

但是還是建議透過 apache, nginx…等 web server 比較好

PHP 啟用內建 web server 使用方式:

直接啟動

> php -S localhost:8000

PHP 7.2.3 Development Server started at Sat Mar 31 08:39:18 2018
Listening on http://localhost:8010
Document root is C:\site
Press Ctrl-C to quit.

從指定的根目錄啟動

PHP 取得字串前、中、後部分字串長度

September 4, 2017
Posted By Adam Ou-Yang

透過PHP的 substr 可以取得字串中的部分字元，並且可以指定長度

語法格式如下:

<?php
//string substr( string $string , int $start [, int $length ] )
substr('原始字串' , 開始位置 ,要取得的長度 );

下方紀錄一些用法

從前面取得字串

<?php
echo substr('abcdef', 1);     // bcdef
echo substr('abcdef', 1, 3);  // bcd
echo substr('abcdef', 0, 4);  // abcd
echo substr('abcdef', 0, 8);  // abcdef

從後面取得字串

從最後方開始取得字串的方式，可以把 start 的參數設定為負值即可

<?php
$rest = substr("abcdef", -1);    // returns "f"
$rest = substr("abcdef", -2);    // returns "ef"
$rest = substr("abcdef", -3, 1); // returns "d"

將 length 設定為負值的方式，從後方開始算結束點

length 設定為負數，會從後面開始算終結點例如 start 0, length -1 - 從第一次元開始，至倒數一字元

<?php
$rest = substr("abcdef", 0, -1);  // returns "abcde"  從第1次元開始，至倒數2字元
$rest = substr("abcdef", 2, -1);  // returns "cde"  從第3次元開始，至倒數2字元
$rest = substr("abcdef", 4, -4);  // returns false  從第5次元開始，至倒數5字元 ---> 區間不對會發生錯誤
$rest = substr("abcdef", -3, -1); // returns "de"