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)，具有快速的非阻斷式優先同步、對於傳輸過程遺失部分片段，可採自動重新連結的方式，將網路節點中的小部分資料再重新同步。

其他還包括下列特性:

• Transactions
• Pub/Sub
• Lua scripting
• Keys with a limited time-to-live
• LRU eviction of keys
• Automatic failover

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

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

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

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

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

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

return $last_query;

LEAN 精實軟體度量 - 如何減少內耗成本

• 距離導致的浪費：開發需耗費移動或跨區域等候才能取得結果
• 層級導致的浪費：第一線人員需具備行動權力，才能減少來回溝通的成本
• 技術債的浪費：環境不一致導致上線部署出問題，寫出不良程式碼導致後續維護問題，都是技術債的一部分
• 文件導致的浪費：文件寫作錯誤，可能導致後續極大的損失及浪費，因此需重視文件的品質
• 度量本身的浪費：從客戶的角度來看，不會關心我們搜集這些度量的成果，他們重視的始終是價值，因此還是要評估現有狀況來導入度量，別因為強制導入而對價值造成影響

LEAN 精實軟體度量 - 如何提升效率

無論敏捷或精實，整體重點離不開以下幾點

• 進度
• 效率
• 品質
• 能力
• 客戶滿意度

LEAN 精實軟體度量 - 整體決策大目標

支撐決策的計畫可以區分為三個方向，從這些方向再衍伸出各種決策計畫，來設定合理的目標

• 組織

組織的方向除的公司本身，還包含競爭市場分析，內容包括產品規劃、藍圖、資源配置、市場調查

• 專案

專案主軸在於專案進度計畫，估算產能及工作量，提升品質，防範缺漏及測試，資源分配(交付週期、規模、個人及團隊能力)及能力提升計畫

• 個人至團隊

個人方面著重個人能力、工作量評估，提升目標則是個人能力、團隊能力及組織技能提升

本系列共五篇

1. LEAN 精實軟體度量 - 基礎結構及要求

2. LEAN 精實軟體度量 - 專案管理仍是重點

3. LEAN 精實軟體度量 - 整體決策大目標

4. LEAN 精實軟體度量 - 如何提升效率

5. LEAN 精實軟體度量 - 如何減少內耗成本

LEAN 精實軟體度量 - 專案管理仍是重點

整個敏捷開發或精實開發，都是圍繞在一個重點： 專案管理

專案管理最終目的是做出符合使用者期望

這也是純技術團隊發展 Scrum 通常被忽略的重點 - UI/UX 反饋 打造貼近使用者的產品，關鍵都在 UI/UX 這是在產品規劃過程必須考量的重點因素 因此在執行每一個階段後，都必須要再檢視，並檢討修正，確保品質與維持價值

LEAN 精實軟體度量 - 基礎結構及要求

軟體開發過程是一個複雜的體系，

敏捷開發 > 核心 > 快速交付？

快速交付，要交付的是任務

再聊精實度量之前，先談談敏捷開發一些基礎構成

敏捷開發角色大概可分成主要三類： Scrum master, 產品負責人, 團隊

每兩週為一個 sprint 單位，來做衝刺

為什麼要敏捷開發？ 因為要讓專案可以有節奏地進行

敏捷開發最終還是要回歸到專案管理本身 專案管理牽涉的層面較為複雜，通常會需要考量的因素較多 在專案經驗較缺乏的情況下，很容易形成做敏捷而不是變敏捷

只是表面上看起來有在做這件事情

在實施敏捷開發時，也應該針對目前成員及專案狀況來進行 scrumful

scrum 其實有基本的要求，其中包括成員素質、Master特質、專案經驗都有基本的要求 你無法在一個不求進步的團隊落實 scrum，因為最終結局機會讓人全部跑光，或者做出奇怪的東西

scrum 在紀律之下，必須要有充足的尊重跟授權 也就是說，團員要遵守一定的紀律，但Master也充足的授權及尊重他們的意見

本系列共五篇

1. LEAN 精實軟體度量 - 基礎結構及要求

2. LEAN 精實軟體度量 - 專案管理仍是重點

3. LEAN 精實軟體度量 - 整體決策大目標

4. LEAN 精實軟體度量 - 如何提升效率

5. LEAN 精實軟體度量 - 如何減少內耗成本

本文翻譯自 Rohit kumar 的 15 Web Design Trends in 2018 (+1 Bonus) 部分內容是以示意的方式翻寫，若有錯誤或建議，都歡迎提出

如果你是一個設計師，並且正在尋找能啟發靈感的趨勢? 那麼你就來對地方了。

在這裡由 Rohit kumar 所彙整的 15+1 個網頁設計趨勢，希望你會喜歡~

這裡，分別會用OAuth Server，以及 OAuth Client 兩個角度來說明 OAuth2 運作機制

一、建立 OAuth Server

安裝laravel

composer create-project --prefer-dist laravel/laravel laravel_oauth

cd laravel_oauth

設定資料庫

建立資料庫 ex. laravel_oauth 複製 .env.example 並命名為 .env

加入資料庫連線設定

生成 app key

產生 APP_KEY

php artisan key:generate

修改 session 儲存方式 (可選擇，如果要存在本地就可略過此步驟)

.evn

SESSION_DRIVER=database

建立 session migrate

php artisan session:table

重新 dump

composer dump-autoload

建立 migrate

php artisan migrate

建立 Authentication 架構

php artisan make:auth

建立 OAuth 2 passport

composer require laravel/passport

設定舊版本MySQL Migration

如果安裝的MySql版本較舊，可能會發生錯誤，因此需加入下方修改設定

app/Providers/AppServiceProvider.php

use Illuminate\Support\Facades\Schema;

public function boot()
{
    Schema::defaultStringLength(191);
}

Migrate

將 auth 及 passport 相關 migration 來自動建立資料表

在過去 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 專案 下面會介紹其特點、安裝及基本使用方式