關於網路那些事...

Marketing, SEO, Web trends, Programming tutorial, Web design, and Life event...

展開運算符 Spread Operator 其餘運算符 Rest Operator 獨立介紹

Spread Operator(展開運算符) 與 Rest Operator (其餘運算符) 這兩種特性原則上及寫法都一樣, 但特徵不同,所以使用情境不同 Spread Operator 把一個陣列展開(expand)成個別值 (這裡陣列也可以用其他iterable的物件,包括: String、Array、Map、Set..等) Rest Operator 收集其餘的值,轉變成一個陣列 定義函式時,在傳入參數欄位使用一個 Rest Operator, 就能一次取得多個 a,b,c,d,e 傳入值,並轉為陣列格式來使用

Continue Reading

Promise 獨立介紹篇

Promise 已經被ES6及新的瀏覽器支援,是一個強大的異步執行流程語法結構 Promise 可以讓我們確保某件事情做完之後,才進行後續動作 本質上都是使用callback(回呼函式),並且都是async(異步執行) 當我們實際執行一個 promise,他會先將狀態切換為 pending(等待中),並且依照 resolve 或reject 來返回結果 then..catch 連鎖處理 我們可以透過 Promise 來進行 then..catch 連續的連鎖流程處理 Promise.all 方法 promise.all 可以用陣列的方式一次帶入多個promise, 執行到最後會再回傳一個 Promise 物件 有幾點特色: 一項被reject或發生錯誤,就會返回 reject 全部執行都完成 resolve ,才會返回成功resolve 返回的resolve promise順序會跟傳入陣列中的順序一致 promise.

Continue Reading

Arrows Function 獨立介紹篇

ES6 Arrows Function 和 Normal Function 差別 Arrow Function 主要有以下優勢: 語法簡單。少打很多字元。 可以讓程式碼的可閱讀性提高。 會參照當時環境中的 this ( bind(this) ) 好處 在使用內部函式時,內部函式有自己的this,通常會指向最外部 windows 物件, 因此,通常要先用變數指定this,傳到內部函式使用, 而 Arrow function 則不必再透過變數就能直接使用外部函式的this作為自己的this 注意情況 在物件裡的屬性,必須使用function,而不能使用 Arrows function

Continue Reading

Javascript Closure 獨立介紹篇

當我們宣告且呼叫一個函式時,函式本身會形成一個 scope,scope 裡面會包含 Closure

特性

Closure 原則就是,是一個可以用 by Reference 的方式紀錄函式建立時的環境,包括了:

Closure 內部所建立的變數,限定於內部使用,

在Closure 裡也可以存取到 Scope chain 中的所有變數,

Continue Reading

Javascript function 獨立介紹篇

Javascript 最難理解的源頭,始於 function

First Class Functions

https://pjchender.blogspot.tw/2016/03/javascriptfunctionobjects.html First Class Functions(一級函式)的概念,是指其他類型(Objects, String, Boolean, Numbers)做的事, Function都能做,包括將Function指定成一個變數等等 (assign them to variables, pass them around, create them on the fly)。

  • 函式只是物件的一種
  • 可以將 function 儲存成變數
  • 可以將 function 當成參數代入另一個 function 中
  • 可以在一個 function 中回傳另一個 function
  • function 跟物件一樣有屬性(property)

function只是一種特殊的物件,它可以被當作物件來使用

所有函式都是物件中的"方法"

function 本身有幾個scope(作用域):

  1. 函式本身
  2. 外部函式內容(如果是函式中的函式,可存取外部函式內容)
  3. 全域

Continue Reading

如何調整 MySQL 上傳資料庫檔案大小限制 [紀錄]

php 預設都會有檔案上傳大小、傳輸時間等等限制

雖然一般資料庫都是由DBA負責維運,但有時在維護特殊的專案時,

也可能需要用到匯入測試,進而需要調整一些設定,

所以直接把常用的參數記錄起來,也可方便於日後查詢

Continue Reading

自動化測試工具介紹

主流測試框架介紹

本篇主要參考 Essential Skills for Landing a Test Automation Job in 2018 內容整理而成。

Test Automation Engineers (測試自動化工程師) 在業界的需求有不斷持續的增加的趨勢,從去年 34% 已成長到 40%

Continue Reading

Visual Studio Code - VSCode 擴充(extension)套件推薦 [陸續更新]

強大的編輯器,可以讓工程師更快更有效率的開發,目前介紹的VSCode 是目前公認最強大的編輯器之一,並且擁有相當廣泛的擴充套件及功能,這裡將陸續整理相關套件。 未來,將預計陸續依照各種開發類型推薦套件組合。 下載 VSCode 首先,前往官網下載 VSCode 安裝檔 安裝完畢後,就能直接從左邊功能選項開啟套件擴充選單 只要輸入下方關鍵字就能找到相關套件 這裡列出的是自己安裝的列表 Auto Close Tag Auto Rename Tag AutoFileName Beautify Bootstrap 3 Snippets cdnjs Chinese Translation Debugger for Chrome Font-awesome codes for css Font-awesome codes for html Git History (git log) HTML Bolierplate HTML Snippets Node Debug 2 Open Folder Context Menus for VS Code Open folder in new instance PHP Debug PHP Extension pack PHP InstalliSense PHP-Autocomplete Preview on Web Server React Native Tools SCSS IntelliSense Vetur

Continue Reading

MySQL - 浮點數與定點數

一般對於數字應用上,多數還是以整數為主 實際應用時,通常會先考量數字長度,並且通常都不會有問題 但是遇到與金融交易時,常常會牽涉到小數點的問題,也就是這裡要談的議題 - 定點數與浮點數 浮點數 具有小數點,插入的資料若小數點超過預設長度,則會實施四捨五入 在MySQL中,float, double( or real) 都可以用來儲存浮點數 在使用時,可能會有誤差的問題 定點數 字串形式存放數值,若插入的數值長度超過預設長度,會回報錯誤 (在SQLMode 預設情況仍會四捨五入後,插入資料) 在 MySQL 中,decimal (or numberic) 都可以用來儲存定點數 對於精確度要求較高的資料,都要使用定點數來儲存 範例 我們直接來建立一個浮點數及定點數的資料表 MariaDB [example]> CREATE TABLE float_and_decimal(flo float(10,2), deci decimal(10,2)); Query OK, 0 rows affected (0.

Continue Reading

PHP - 目前網址取得方式技巧

這裡紀錄如何透過PHP來取得目前網址的相關方式

假設目前有一個網址: http(s)://www .example.com/site/contact.php?uid=123456&class=3

PHP 取得目前網址相關方式

在 PHP 取得網址相關的方式有以下幾個:

<?php
$_SERVER['HTTP_HOST']; // www.exampe.com
$_SERVER['REQUEST_URI']; // /site/contact.php?uid=123456&class=3
$_SERVER['PHP_SELF'];// site/contact.php
$_SERVER['QUERY_STRING'];// uid=123456&class=3

Continue Reading

MySQL - 檢視表 (View)

檢視表是一個虛擬的資料表,從MySQL 5.0.1 版本即開始支援 在使用時,設計者可自行將多個表格進行關聯、篩選,製作成一份獨立的檢視表 使用上,具有以下優點 簡單明瞭: 使用者不需要理解整個資料結構,直接呼叫檢視表就能取得整合完成的資料 安全: 使用者僅能看到檢視表允許查詢的部分 獨立: 檢視表結構會彙整關聯的資料表,當關聯資料表新增資料時,也能同時取得;僅有當關聯表修改列名時,才需要調整檢視表的結構對應名稱 建立檢視表 CREATE OR REPLACE VIEW user_view AS SELECT * FROM user; Query OK, 0 rows affected (0.01 sec) 刪除檢視表 DROP VIEW user_view Query OK, 0 rows affected (0.

Continue Reading

GraphCool 介紹

安裝 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 驗證

Continue Reading

MySQL - InnoDB 簡介

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.

Continue Reading

React 入門

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

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

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

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

Continue Reading

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

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 - 壓縮內容

Continue Reading

Babel 入門

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

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

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

Continue Reading

Browserify 入門

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

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

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

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

Continue Reading

PHP 產生 GUID 唯一辨識碼字串

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的寫法,如下:

Continue Reading

MySQL - ENUM 與SET 類型比較

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.

Continue Reading

nodejs Cannot find module xxx 解法

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

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

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

Continue Reading