關於網路那些事...

在過去 sass/scss 興起的時期，最常搭配 compass 以及相關的 mixins 來進行開發

CSS3 建構過程，時常會需要用到動畫設計，所以就將相關的參數及使用記錄下來，方便之後查詢及使用~

瀏覽器前綴

在使用任何CSS3高級屬性時，建議都要搭配瀏覽器前綴，讓屬性效果可以在各瀏覽器有更好的支援

-moz-{屬性}：Firefox 瀏覽器。
-webkit-{屬性}：Safari, Chrome, Opera 等瀏覽器。
-o-{屬性}： Opera 瀏覽器。
-ms-{屬性}： IE 瀏覽器。

Transition

Transition 可以用來設定基礎的動畫效果，直接指定要產生變化的css屬性

React 為 component (元件)提供了許多生命週期相關的方法

讓我們可以在 component 輸出前，輸出後，或者被消滅等狀態時，可以藉由這些方法來設計一些行為

所謂 Refs 就是官方不建議使用，又非得談的東西

React 典型的數據流是透過 props 在父子 Component (元件) 之間傳遞，

透過更新 props，透過新的 props 來 re-render 子元件

Event Loop 是 Javascript 主線程循環處理任務列隊（task queue）事件的運行機制

Web Event Loop

單線程設計

Javascript 主線程是以單線程的方式設計

在主線程中，包含許多要執行的任務，可以分成同步(synchronous)及非同步(asynchronous)任務，會按照順序處理這些任務

同步的任務比較單純，會遵照上方的規則，在主線程一個一個接續處理

在處理非同步任務時，不會等待非同步結果，就會接續處理後面的任務

例如，我們執行非同步任務，完成發出 ajax (不會等返回結果)..， 就會接續處理後面的行程

任務列隊（task queue）與 Event Loop

Javascript 會優先處理主線程的項目，接著才會處理任務列隊（task queue）的項目

並且，讀取任務列隊的行為會不斷的重複，及稱之為 Event Loop

當我們一開始執行非同步任務，或者在後續才觸發的任務，都會被排入任務列隊中

主線程就會不斷地去檢查，並依順序處理這些任務列隊中的項目

Node.js Event Loop

Node.js 由javascript建構，也是單線程的設計

圖 by @BusyRich

• Node.js 運作流程，會先從 V8 引擎解析應用程式的 javascript 腳本
• 接著，會調用 Node.js Bindings (Node.js API)
• 再透過 Libuv libary 執行 Node.js API，將這些任務以非同步方式傳給任務所屬的處理線程，並且持續執行，形成Event Loop
• 這些非同步任務取得結果後，會將結果返回給 V8 引擎
• V8再將這些結果傳到客戶端

Node.js 提供了兩個方法 process.nextTick, setImmediate

process.nextTick 可以在主執行線結束之前被執行 (進入下一個Event Loop之前)

setImmediate 可以在目前的任務列隊結束之前被執行

另外，node js 可以透過 Cluster API 來達到多執行緒設計

Session：

儲存於伺服器端，不用擔心用戶禁用session的問題，但計錄檔案的負荷由伺服器承擔。

Cookie：

儲存於用戶端，可能有用戶端禁用cookie，但伺服器不需承擔計錄檔案的負荷。

HTML5 Storage

HTML5 Storage 分別有 localStorage, sessionStorage, Web SQL Database, IndexedDB

localStorage

保存時間較久，要等到javascript被清空或清除快取時，才會消失 但是不適合比較複雜的資料(僅支援JavaScript 字符串值，無法處理布林、數字….及二進位制數據)，速度較慢，有性能的疑慮

sessionStorage

關閉瀏覽器或分頁Tab時，就會消失

IndexedDB

可用來建立及管理使用者用戶端裝置上的資料庫物件，

IndexedDB與WebSQL都支援異步操作，性能好且支持大數據集

但是使用上較為複雜，在各瀏覽器支援度仍待加強

在javascript建立的基礎底層，都會透過 prototype (原型鍊) 來設計出許多預設功能

開發網站需要留意各種解析度尺寸

這裡就整理一些常見的螢幕尺寸，在開發響應式網站 RWD (responsive web design) 時，可以直接拿來參考

液晶螢幕尺寸（吋） 畫面比例 解析度 15 4:3 1024768 17 / 19 5:4 12801024 19 寬螢幕 16:10 1440900 20 4:3 16001200 20 寬螢幕 16:10 16801050 21 4:3 16001200 21 寬螢幕 16:10 16801050 22 寬螢幕 16:10 16801050 23 4:3 16001200 24 寬螢幕 16:10 19201280

15吋————–原生解析度為1024768，畫面為4:3 17吋與19吋—原生解析度為12801024，畫面為5:4 19吋寬———–原生解析度為1440900，畫面為16:10 20吋————–原生解析度為16001200，畫面為4:3 20吋寬螢幕—–原生解析度為16801050，畫面為16:10 21吋————–原生解析度為16001200，畫面為4:3 21吋寬螢幕—–原生解析度為16801050，畫面為16:10 22吋寬螢幕—–原生解析度為16801050，畫面為16:10 23吋————–原生解析度為16001200，畫面為4:3 24吋寬螢幕—–原生解析度為19201280，畫面為16:10 27吋寬螢幕—–原生解析度為19201280，畫面為16:10 30吋寬螢幕—–原生解析度為25601600，畫面為16:10

Preact 是一個輕量級的框架(又一個坑)，大小僅3kb Preact 類似 React API 及模式，可使用 ES6 Class及Function Component

• 透過 preact-compat 就能簡單的兼容 React
• 包含React所需要的功能: JSX, VDOM, React DevTools, HMR, SSR..
• 高度優化和服務器端渲染
• 可以透過 preact-cli快速建立專案
• 支援 IE9 以上的主流瀏覽器

上面提到，可以透過 preact-cli 來快速建立 Preact Progressive Web App 專案 下面會介紹其特點、安裝及基本使用方式

React Static 是一個漸進式靜態網站生成工具，也是一個在server端渲染React 應用架構的框架，輕量且強大的架構可以滿足 SEO，完善的網站效能及兼顧使用者/開發者的體驗。

React 所產生的單頁式網站預設只有一個 title、meta..

可以透過 react-helmet 套件來動態產生 title、Meta…

目前主流的框架都會建議使用 PHP7 以上的環境

這時如果XAMPP的PHP版本過舊，就要考慮升級

可以參考下方的升級程序:

原則上，Facebook 秉持的重點仍在於減少垃圾內容，並促進有意義且真實的內容傳播

在過去，常見各種欺騙點擊的貼文，藉由聳動的標題來誘導使用者進入他們的網站，以賺取流量， 近期，則是常見另一種行銷貼文，用獎勵來引誘你來幫他們增加曝光量

推薦一款由 leecade 所發布的 react native swiper 套件，目前版本可以同時支援 iOS 及 Android，並且可以自定義樣式

目前手機普遍是透過電信公司提供的4G/3G行動網路服務來上網， 有些情況下，例如流量限制或收訊不良的情況下，還可以使用當時場所的wifi來使用網路， 但是，如果剛好在沒有行動網路或wifi的情況下，又需要使用手機上網時， 其實也可以直接透過電腦分享網路的方式，讓手機能連上網路

讓手機使用電腦網路

如何讓手機使用電腦網路，這裡以HTC手機來說明 由於各家廠牌可能設定方式會有差異，因此不保證可以設定成功

首先

通常我們需要使用到 Icons 時，都會前往常用的一些 Icon 網站取得相關工具包檔案

現在，在React Native Vector Icons 就一次幫你整合市面上常用的 Icon 類型，容易使用及修改

可以讓我們更簡單就能使用，真的非常方便

安裝 nginx

前往 nginx 官網，下載nginx/windows 的檔案

這裡下載的版本是 Stable version - nginx/Windows-1.12.2

在 C 槽新增一個 nginx_php/ 資料夾

將下載的nginx 壓縮檔解壓縮後放入

(更新日期: 2018/5/13)

當我們Google Adsense 達到100美金門檻之後，系統就會在指定時間自動付款，

在台灣，選擇西聯付款有相當多的優點，其中包括以下幾點:

• 交易安全安心
• 不須辦理銀行帳戶
• 收款人不須手續費
• 取款程序簡單快速，幾分鐘內即可收到款項
• 多元通路可辦理

可以在西聯官網查詢到，台灣地區支援付款的銀行機構及位置

根據最新資料顯示，目前台灣地區提供西聯服務的銀行主要有以下兩(三)幾家:

A LEFT JOIN B: 左外聯結，取得兩個資料表中，與A有關的資料。 A RIGHT JOIN B: 右外聯結，取得兩個表單中，與B有關的資料。 A INNER JOIN B: 將兩者匹配的資料取出來，即取得AB交集。 A OUTER JOIN B: 將兩者匹配及沒匹配的資料都取出來，即取得AB聯集。