關於網路那些事...

How to output Object Data from Chrome console.log

April 3, 2018
Posted By Adam Ou-Yang

var myObject = Data.toJSON();
console.log(myObject);

If we just right click and save console object, something will wrong as fellowing

script.js:393 (64805) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]

Just stringify your object, console and save again

Chrome Enable Logging chrome.exe --enable-logging --v=1

April 3, 2018
Posted By Adam Ou-Yang

Browsing the Chrome Application Location

Change directory to Chrome and Press Enter

cd c:\Program Files (x86)\Google\Chrome\Application

Enable logging

Type in the following and Press Enter

This will open a new browser page, and open your site to create console.log

c:\Program Files (x86)\Google\Chrome\Application>chrome.exe --enable-logging --v=1

Check Log File

When console.log() output message, will save in fellowing path

Please copy and rename log file to other folder prevent be overwritten.

C:\Users\AppData\Local\Google\Chrome\User Data\chrome_debug.log

Ionic Error: connect ETIMEDOUT xxxxx at at Object._errnoException ... at _exceptionWithHostPort ... at TCPConnectWrap.afterConnect

March 22, 2018
Posted By Adam Ou-Yang

Whem Ionic error happened:

Error: connect ETIMEDOUT 34.196.18.91:443 at Object._errnoException (util.js:1022:11) at _exceptionWithHostPort (util.js:1044:20) at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1198:14)

Try Fellowing solution:

PROXY=http://proxy.yourcompany.com:8080 ionic start

Whem running command, will auto detect some package should be installed

? Detected PROXY in environment, but to proxy CLI requests, you'll need @ionic/      y
? Detected PROXY in environment, but to proxy CLI requests, you'll need @ionic/
cli-plugin-proxy installed. Install now? Yes
> npm i -g @ionic/cli-plugin-proxy@latest
√ Running command - done!

That’s all

Npm set proxy_html

March 19, 2018
Posted By Adam Ou-Yang

npm ERR! network If you are behind a proxy

This is a problem related to network connectivity. In most cases you are behind a proxy or have bad network settings. If you are behind a proxy, please make sure that the ‘proxy’ config is set properly. See: ’npm help config’

please set your npm proxy using: npm config set proxy http://<proxy.company.com>: npm config set https-proxy http://<proxy.company.com>:

example:

npm config set proxy http://proxy.company.com:8080
npm config set https-proxy http://proxy.company.com:8080

Laravel - PHP 無法取得 Hppt Request $_GET Params 值的解決方式

March 16, 2018
Posted By Adam Ou-Yang

這裡記錄一下，在 Nginx + PHP 環境無法取得 Http Get Request 的問題

在本機端，使用的是 apache 環境，會需要取得網址上的Get參數

<?php

    public function index(Request $request) {
    	$message = $request->message;
      ...
    }

上傳至 Server Side (Nginx 環境) 卻發現無法取得參數

嘗試取得完整網址與$_GET是否能取得值

這時先測看看完整網址以及檢查$_GET

<?php

    public function index(Request $request) {
				echo $_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
        print_r($_GET);

確定在 localhost 確實能完整捕捉到 Localhost 結果如:

http://localhost:8000?message=hello
Array
(
[message] => hello
)

但是在 server 上面有捕捉到完整網址，但同樣輸出的是空的 $_GET Server 輸出結果如:

http://example.com?message=hello
Array
(
)

檢查Server side 設定

正式 Server 使用的是 Nginx

前往Server 設定中，檢查一下 nginx.conf ，發現原因是

RTT 網路封包往返時間

March 16, 2018
Posted By Adam Ou-Yang

RTT (Round Trip Time) 亦可稱為往返時間

指的是，網路封包從發送命令，列隊，命令被執行，往返結果這一整個過程

客戶端與主機的地理位置距離，會影響資料傳輸所需的 RTT

以目前的網路基礎設施多採用光纖

PHP_CodeSniffer 簡介，及 VS Code 擴充使用

March 14, 2018
Posted By Adam Ou-Yang

PHP COdeSniffer 包含了兩個 PHP script

phpcs（PHP Code Sniffer），可以檢查程式碼風格
phpcbf (PHP COde Beautifier and Fixer)，自動修正程式碼風格

在 VS Code 會使用下面這個擴充

php-cs-fixer ，自動修正程式碼風格

讓 0-6月的寶寶睡過夜的方法

March 14, 2018
Posted By Adam Ou-Yang

0~6 月的嬰兒還沒有成熟的自然入睡能力，

因此，照顧這階段的寶寶，最大的困擾點往往就是孩子半夜淺眠，造成父母的時間跟著打亂

這裡就彙整一些方法，給各位參考

可依照寶寶的個性及習慣來調整~ 希望會對各位新生兒爸媽有所幫助

介紹 PHP 常見魔術方法

March 6, 2018
Posted By Adam Ou-Yang

PHP 常見魔術方法簡介

這裡針對一些比較常見的魔術方法進行說明：

`__construct`

首先，提到兩個魔術大家都會常用到： __construct CVT2HUGO: 與 __destruct CVT2HUGO: 會在物件被實例化時觸發，__destruct

使用 CSS Grid 快速建構原型

March 5, 2018
Posted By Adam Ou-Yang

CSS Grid 是一個 layout framework，

雖然多數新屬性僅有主流瀏覽器版本才有支援，但是具有未來性的東西，還是值得學，將陸續整理一些相關介紹及用法

這裡Grid建構原型相關圖片及範例主要參考自 Per Harald Borgen 這篇，有興趣的話，可以看看原始全文內容，介紹會更加詳細

接下來，開始介紹如何使用 Grid 建構原型

CentOS7 安裝 Chrome 步驟

March 3, 2018
Posted By Adam Ou-Yang

CentOS 預設沒有支援 Chrome，需要經過額外配置的方式才能安裝

這裡提供安裝的步驟做為參考

新增 google.repo 設定

前往 /etc/yum.repos.d/ 新增 google.repo

vi  /etc/yum.repos.d/google.repo

在 google.repo 貼上以下內容

[google64]
name=Google - x86_64
baseurl=http://dl.google.com/linux/rpm/stable/x86_64
enabled=1
gpgcheck=1
gpgkey=https://dl-ssl.google.com/linux/linux_signing_key.pub

開始安裝

透過下方指令來安裝 google-chrome-stalbe

sudo yum install google-chrome-stable

安裝過程若有提問可一律按 y

靜待安裝過程

檢查是否安裝完畢

透過檢查版本的方式，確定安裝完畢

google-chrome -version

點選應用程式> 網際網路 > 應該就會看到 Chrome 瀏覽器的圖示

終端機操作 MySQL(MariaDB) 指令~

February 27, 2018
Posted By Adam Ou-Yang

平時習慣透過介面方式來管理資料庫，趁著假日期間再來玩一下指令操作模式，

順道記錄一些透過終端機介面操作MySQL (or mariaDB) 的方式，便於之後再參考

(如果在windows 環境，請先將 mysql (…\mysql\bin) 加入環境變數中)

在這裡著重在操作及設定方面，不會提到太多CRUD相關操作

Visual Studio Code 快捷鍵彙整 [陸續更新中]

February 24, 2018
Posted By Adam Ou-Yang

Visual Studio Code 官方有提供一份快捷鍵使用技巧 VS Code Tips and Tricks - Keyboard Reference Sheets

可以依照你使用的系統下載完整的快捷鍵手冊

macOS, Windows, Linux

這裡列出 windows 版本基本常用的一些快捷鍵~

Redis 介紹

February 12, 2018
Posted By Adam Ou-Yang

Redis 介紹

Redis 是一個開源的 (BSD licensed) in-memory 的資料存放結構，可以被使用作為 Database，快取，訊息媒介。支援豐富的資料型態，包括: strings, hashes, lists, sets, stored sets, bitmaps, hyperloglogs 以及 geospatial indexes 儲存格式。

Redis 功能包括 replication, Lua scripting, LRU eviction, transactions，不同層級的 on-disk persistence(定時寫入硬碟，保持持久性), Redis Sentinel 的高可用性功能，以及 Redis Cluster 自動分區

你可以將上面的結構進行 atomic operations (原子操作。原子意思是不可分割的最小粒子，原子操作意思為不可中斷的一系列操作) ，例如: appending to a string incrementing the value in a hash pushing an element to a list computing set intersection, union and difference getting the member with highest ranking in a sorted set.

為了能有出色的執行效能，Redis 使用了 in-memory dataset 的方式來運作。並且能依照你習慣的方式，可以每次都將資料儲存在硬碟中，或者將每一個指令都寫入 log。如果你需要的是功能豐富、散播快且以記憶體的方式快取，就可以關掉持久性的寫入硬碟設定。

Redis 同時支援更細節的設定主從異步複製(master-slave asynchronous replication)，具有快速的非阻斷式優先同步、對於傳輸過程遺失部分片段，可採自動重新連結的方式，將網路節點中的小部分資料再重新同步。

其他還包括下列特性:

你可以從這個連結查看有哪些程式語言能使用 Redis Clients

微軟力挺 PWA ，將其加入 Edge 與 Win10，並列為應用商店一等公民

February 8, 2018
Posted By Adam Ou-Yang

“漸進式網站應用程式” (PWAs, Progressive Web Apps) 以網頁技術為基礎，能開發出原生APP或AP的特性，在各種設備帶來良好的體驗，不依靠網路的特性、快速加載、安裝、即時更新、推播訊息等等功能

Laravel - 取得最後查詢SQL語法

February 6, 2018
Posted By Adam Ou-Yang

Laravel 取得最後查詢SQL方式如下：

<?php
//啟用Query Log
DB::enableQueryLog();

//取得所有Query Log
$queries = DB::getQueryLog();

//取得最後一筆Query
$last_query = end($queries);

return $last_query;