LeoYeh interactive channel

XSS 簡易攻擊手段

2021-06-27T02:33:00.001-07:00

最近在看 front-end 貼文看到一篇 XSS 攻擊的介紹，覺得很有趣，
讓我想起了多年前的一個練習，順便整理一下有哪些我知道的攻擊方式與防範手段。

XSS 是啥呢？
XSS cross site script，簡單說就是因為後端信任了使用者的輸入資料，在有漏洞或是沒有過濾掉或者瀏覽器問題的文字下，使用者可能幫你填入邪惡的程式碼，導致網站出錯。
所以在使用者輸入的部分要特別小心處理，可能是網址又或者只是個輸入框。

舉例：一個 html tag 可能因為漏洞，被迫產生兩個 html

<h1>{{ user }}<h1/>

多寫一個 html 截止與開始的 tag，在裡面其中多塞自己的程式。

<h1></h1><script>document.body.innerHTML = '';</script><h1></h1>

以下統整了XSS-Game 這個網站介紹的幾個簡單攻擊手法。
1. 在前端可以讓 user 輸入 html 變且顯示，document.body.innerHTML = '<h1>' + {{ msg }} + '</h1>'，像 {{ msg }} 就可能會被寫 '</h1><alert>alert('hi');</alert><h1>'
2. 透過 html tag 上的屬性觸發，像是 img onError 寫入
3. 使用者輸入要先過濾
4. a tag 可以使用 javascript:[function] 使用 js
5. 要正規化檢查使用者的輸入 decodeURIComponents 或是 toLowerCase() 再比對是必須的

另一個 xss 的練習
http://prompt.ml/1

dynamic import

2021-01-18T20:29:00.002-08:00

為了要處理相同 html 跟不同的 style，會用到判斷並動態載入 css modules 的，

但如果依照判斷後寫入 import 'XXX' 則會發生
'import' and 'export' may only appear at the top level

但 import 其實還可以 import(XXX) 這個就可以動態載入 module 的位置

    if (isA) {
      import('../assets/sass/A.scss')
    } else {
      import('../assets/sass/B.scss')
    }

而 vue.js 也有支援這樣的打包方式，真棒！

前端開發時才會碰到的問題 has been blocked by CORS policy

2020-12-03T00:18:00.002-08:00

在開發前端的時候常會在 http://localhost 的環境去連 https://stage.com/api/ ，
這時候常常就會被 chrome 的同源政策擋下來，但實際上測試機，前端檔案與 api 是相同 domain 的，這時候就可以安裝以下插件。

https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf

但如果 api 跟 js 不同 domain 的話，還是需要請後端改一下 api header 加一下白名單

範例：

header('Access-Control-Allow-Origin: *');

gulp not found command (mac)

2020-11-22T18:39:00.002-08:00

npm i gulp -D 後雖然有在專案資料夾中長出 /gulp
但 node 卻找不到 gulp 這個 node 檔案

解決方法有兩種
一種是將 gulp 安裝在 global 環境中
npm i gulp -g
但我不想這樣作，因為不是每個專案都用到 gulp

所以我讓 node 在專案資料夾中從設路徑可以找到 gulp 指令
步驟如下：
建一個 .bashrc 檔案，在專案根目錄，貼上..

alias gulp="node ./node_modules/gulp/bin/gulp.js"

終端機中測試
gulp -v
CLI version: 2.3.0 Local version: 4.0.2

完工

ios12 的事件分類改了！apple 在瀏覽器"嚴格"模式，一直領先群雄

2020-11-12T23:07:00.005-08:00

apple 在瀏覽器"嚴格"模式，一直領先群雄

最近發現 ios12 把 device 上的 click 事件改掉了～
以後再 device 用 touch 事件取代 click 會比較好唷～

window.addEventListener('click', () => {
console.log('click not trigger in ios12');
})

window.addEventListener('touchstart', () => {
console.log('ios12 use touch event, not click!');
})

值得一提的是 div 上面的事件，還是可以繼續沿用原來的 click 事件，
只有 window 才有差異.

heroku react deploy with node.js

2020-07-12T03:35:00.001-07:00

免費的雲端服務是獨立開發者最好的朋友，
今天分享 Heroku，價格可以看這邊，

首先可以先建立 react app

 npm i create-react-app my-app

再自行加工 my-app 內容..

預設會產生 /build 資料夾。

然後開一個 node server 把預設路徑改到 /build

 npm i express

// index.js of node env
var express = require('express')
var app = express()
const Path = require('path')
const PORT = process.env.PORT || '8080'
app.use(express.static(Path.join(__dirname, 'build')));
app.get('/*', (req, res) => {
  res.sendFile(Path.join(__dirname, 'build', 'index.html'));
});
app.listen(PORT)

丟 heroku

mac 安裝 heroku-cli

https://devcenter.heroku.com/articles/heroku-cli#download-and-install

產生一個 heroku 專案

 heroku create my-app

https://devcenter.heroku.com/articles/creating-apps

透過 git 推一專案

 git init // 初始

 git add . // 將全部 stage

 git commit -am "first commit" // 寫 commit message

 heroku git:remote -a "my-app" // 將 git remote repository 設定成 heroku 專案

 git push heroku master // 推到 master branch

zoomBlur shader

2020-06-16T21:30:00.003-07:00

ref

<!-- html -->
<script type="x-shader/x-vertex" id="vertexShaderZoom">
  varying vec2 vUv;
      void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  }
</script>

  <script type="x-shader/x-fragment" id="fragmentShaderZoom">
uniform sampler2D tDiffuse;
uniform vec2 center;
uniform float strength;
uniform vec2 resolution;
varying vec2 vUv;

float random(vec3 scale,float seed){return fract(sin(dot(gl_FragCoord.xyz+seed,scale))*43758.5453+seed);}

void main(){
vec4 color=vec4(0.0);
float total=0.0;
vec2 toCenter=center-vUv*resolution;
float offset=random(vec3(12.9898,78.233,151.7182),0.0);
for(float t=0.0;t<=40.0;t++){
  float percent=(t+offset)/40.0;
  float weight=4.0*(percent-percent*percent);
  vec4 sample=texture2D(tDiffuse,vUv+toCenter*percent*strength/resolution);
  sample.rgb*=sample.a;
  color+=sample*weight;
  total+=weight;
}
gl_FragColor=color/total;
gl_FragColor.rgb/=gl_FragColor.a+0.00001;
}
</script>


/// within js
    var shader = new THREE.ShaderMaterial({
      uniforms: {
        tDiffuse: { value: null },
        strength: { type: 'f', value: .1 },
        center: { type: 'v2', value: new THREE.Vector2(width * 0.5, height * 0.5) },
        resolution: { type: 'v2', value: new THREE.Vector2(width, height) },
      },
      vertexShader: document.getElementById('vertexShaderZoom').textContent,
      fragmentShader: document.getElementById('fragmentShaderZoom').textContent
    });

    zBlurPass = new ShaderPass(shader);

    composer.addPass(zBlurPass);

// reference
// https://gist.github.com/fatlinesofcode/3a02af88ac44a9adea0ca9021536095d

react.js functional vs class based components

2020-05-24T08:26:00.000-07:00

https://linyencheng.github.io/2020/02/02/react-component-class-based-vs-functional/

Class Based Functional
產生組件 O, 倚賴 extends Component X, 用 ES6閉包, const ABC = props => { ... }
存取 state this.state, this.setState({ abc: 123 }) const [abcState, setAbcState] = useSate(123)
LifeCycle Hook O, ex: update hooks
http://t.ly/G5RL X
存取 props this.props props
* 自動 merge state this.setState({ name: 'leo' })
this.setState({ age: 38 })
state =>
{ name: 'leo', age: 38 } const [nameState, setNameState] = useSate('leo')
=> { name: 'leo' }
const [ageState, setAgeState] = useSate(38)
=> { age: 38 }
使用時機要 mergeState
要 Lifesyscle Hooks
不用 ReactHooks (ex:useState) 沒什麼限制

若有寫錯還請大大通知，感激～

React.js 更新畫面的流程 Lifecycle - Update

2020-05-24T00:36:00.001-07:00

React 提供有這些 Updating 階段的方法：

componentWillReceiveProps()：
React 17 開始被拿掉

static getDerivedStateFromProps()：
要使用 props 改變 state 用，傳回新的 state or null，用 this.setState
不要再這邊用 http request

shouldComponentUpdate()：
優化效能，回傳 boolean 詳細判斷，react.js 依 state, props re-render 的更新方式，不一定每次都要更新～

componentWillUpdate()：
React 17 開始被拿掉

render()：
React 開始組資料 jsx

getSnapshotBeforeUpdate()：
React 渲染前面判斷有沒有有沒有 props 被改變，可return 給 componentDidUpdate 第三的參數使用使用

componentDidUpdate()：
渲染完成，要使用 http request 可以在這邊

參考資料
React Life Cycle
https://iandays.com/2018/07/27/reactlife/

React 元件生命週期 (Component Lifecycle)
https://www.fooish.com/reactjs/component-lifecycle.html#static-getderivedstatefromprops-props-state

react.js css module

2020-05-17T09:12:00.001-07:00

css module
css 中的變數要怎麼讓 js 使用？
css 如果命名不好很容易污染別人，結果名稱越來越長。
為何要使用 css-module ，我參考了這篇。
https://www.itread01.com/content/1545772525.html

以下是簡易的使用方式

將共用 css 寫在 module，並命名 XXX.module.s[c|a]ss，如果寫css就用scss吧～

/* btn.module.sass */
.btn
  background-color: lightblue
  &:hover
    background-color: lightgreen
  &.red
    background-color: red

/* App.js */
import classes from './sass/btn.module.sass' // 全部樣式都載近來當 css

// ...
  const btnClasses = [classes.btn].join(' '); // 加入 .btn 樣式

// ...
        <button className={btnClasses}>click!</button>

.btn 樣式

.btn:hover 樣式

Left Join, Full Join 找出誰沒有

2020-05-08T03:23:00.001-07:00

Customers

Orders

Customers.C_id Left Join Orders.Cid，顧客的購物紀錄 (概念把 Orders 塞入 Customers，Customers 會變多，會發現沒有購物的客戶)

Orders.Cid Left Join Customers.C_id 購物的人是誰(概念把 Customers 塞入 Orders ，Orders 會變多，會發現交易的商品)

Orders.Cid Full Join Customers.C_id 顧客的購物紀錄 (包含沒有購物的客戶與沒有被買的商品)

Orders.Cid Full Join Customers.C_id 商品銷售紀錄 (包含沒有購物的客戶與沒有被買的商品)

vue-jest unit-testing 安裝篇

2020-04-26T07:19:00.003-07:00

裝 vue-jest

git url
jest 套件
設定
撰寫

git url

https://github.com/LeoYeh/vue-jest-setup

jest 套件

裝 jest, npm install --save-dev jest => 可以執行 .jest, .test 檔案
裝 vue-jest, npm install --save-dev vue-jest => 可以驗證 .vue 檔案
裝 test-utils, npm install --save-dev @vue/test-utils => 可用像是，測試組件不包含子組件的功能 (ShallowMount)

設定

jest 25.4.0 需要 Babel 7module. npm install --save-dev "babel-core@^7.0.0-bridge.0"
加入 babel.config.js (注意 array 結構)
exports = {

presets: [

'@vue/cli-plugin-babel/preset',

[

'@babel/preset-env',

{ targets: {

node: 'current',

},

},

],

],

};
jest.config.js
module.exports = {
// 檢查以下附檔案名的檔案

moduleFileExtensions: [

'js',

'json',

'vue',

],

// 在這個資料夾底下搜尋

moduleNameMapper: {

'@/(.*)$': '<rootDir>/src/$1'

},
// 忽略找這個資料夾

transformIgnorePatterns: [

'/node_modules/(?!MODULE_NAME_HERE).+\\.js$',

],
// 鄉對應檔案要用到的資源

transform: {

'^.+\\.(js|jsx)$': '<rootDir>/node_modules/babel-jest',

'^.+\\.vue$': '<rootDir>/node_modules/vue-jest',

},

};

寫測試(ref => https://dwatow.github.io/2019/07-03-vuejs/jest-for-vue-x/)

增加 src/actions.vue

<template>

<div class="text-align-center">

<input type="text" @input="actionInputIfTrue" />

<button @click="actionClick()">Click</button>

<p>{{$store.getters.text}}</p>

</div>

</template>

<script>

import Vue from 'vue'

import { mapGetters, mapActions } from 'vuex'

export default {

name: 'action',

methods:{

...mapActions(['actionClick']),

actionInputIfTrue: function actionInputIfTrue(event) {

const inputValue = event.target.value

if (inputValue === 'input') {

this.$store.dispatch('actionInput', { inputValue })

}

}

},

}

</script>
增加 ~/__test__/actions.test.js

import { shallowMount, createLocalVue } from '@vue/test-utils'

import store from '@/store'

import Action from '@/Actions.vue'

describe('Actions.vue', () => {

const localVue = createLocalVue()

const wrapper = shallowMount(Action, { store, localVue })

it('for test', () => {

expect(1).toBe(1)

})

})
調整 main.js

import Vue from 'vue'

import App from './Actions.vue'

import router from './router'

import store from './store'

Vue.config.productionTip = false

new Vue({

router,

store,

render: h => h(App)

}).$mount('#app')
執行 jest or 在 package.json 的 scripts 中，加入 "test": "jest"
如果你看到這畫面，代表你 jest 架好了

補充
不讓 jest 檢查 css，可以透過 identity-obj-proxy 把 sass 弄掉npm install identity-obj-proxy --save -dev"jest": { "moduleNameMapper": { "\\.(css|scss|sass|less)$": "identity-obj-proxy" }}加在 jest.config.js 上面

參考https://vue-test-utils.vuejs.org/guides/#testing-single-file-components-with-jest
https://medium.com/@milkmidi/jest-test-component-vue%E7%AF%87-testing-library-%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95-542db03a670b
https://dwatow.github.io/2019/07-03-vuejs/jest-for-vue-x/
https://wcc723.github.io/development/2020/02/02/jest-intro/

c# lambda count too slow 的眉角

2020-02-27T07:33:00.003-08:00

1. select count(*) table < 1ms
但
2. table.Count() > 5s

這是今天驚人的發現，後來上網查了一下才發現..
原來 2. 的 lambda，因為不是單純的處理 db 資料，他也是可以處理 c# 裡的類別，
所以 1 不等於 2 的寫法

以下提供兩種解法
a. 改用 sqlCommamd 來處理
b. 加一個 sql 欄位做判斷，讓 lambda 的 count 跑出來是 sql 語法，XD， table.Count(x => x.age > 0)

雖然 lambda 寫起來比較簡潔，但這個時候一點都不簡潔，為什麼沒有先 sql 判斷，再 C# 的判斷 .zZ。

補充：
改掉 count(*) 這個耗資源

Join(交集) groupJoin(聯集)

2020-02-21T01:04:00.000-08:00

理解一下聯集交集

線上測試

using System;
using System.Globalization;
using System.Collections.Generic;
using System.Linq;
using System.Text.RegularExpressions;
using System.Xml.Linq;
using Newtonsoft.Json;

namespace Rextester
{
public class Program
{
public static void Main(string[] args)
{

var playerList = new List<Player>
{
new Player { Id = 1, Name = "A Player", TypeId = 0 },
new Player { Id = 2, Name = "B Player", TypeId = 1 },
new Player { Id = 4, Name = "C Player", TypeId = 2 },
};
var typeList = new List<TypeData>
{
new TypeData { Id = 1, Name = "Type 1" },
new TypeData { Id = 2, Name = "Type 2" },
new TypeData { Id = 3, Name = "Type 3" },
new TypeData { Id = 4, Name = "Type 4" },
};

var list = playerList.Join(
typeList,
person => person.TypeId,
phone => phone.Id,
(left, right) => left);

Console.Write("左側取交集。\r\n");
Console.Write(JsonConvert.SerializeObject(list) + "\r\n");

var list1 = playerList.Join(
typeList,
person => person.TypeId,
phone => phone.Id,
(left, right) => right);

Console.Write("右側取交集。\r\n");
Console.Write(JsonConvert.SerializeObject(list1) + "\r\n");

var glist = playerList.GroupJoin(
typeList,
person => person.TypeId,
phone => phone.Id,
(left, right) => left);

Console.Write("左側聯集。留左砍右。\r\n");
Console.Write(JsonConvert.SerializeObject(glist) + "\r\n");

var glist1 = playerList.GroupJoin(
typeList,
person => person.TypeId,
phone => phone.Id,
(left, right) => right);

Console.Write("右側聯集。留右砍左。\r\n");
Console.Write(JsonConvert.SerializeObject(glist1) + "\r\n");
}

public class TypeData
{
public int Id { get; set; }
public string Name { get; set; }
}

public class Player
{
public int Id { get; set; }
public string Name { get; set; }
public int TypeId { get; set; }
}
}
}

windows 安裝服務

2020-01-05T21:23:00.001-08:00

新增專案
在ProjectInstaller 中，填入服務名稱 & 服務敘述

專案屬性中，(Debug 用，可以本機 Console.Write) 修改輸出類型 "主控台應用程式"

在 program.cs 中，加入指令碼

static void onInstall(string[] args)
{
    if (args.Length > 0)
    {
        switch (args[0])
        {
            case "-install":
            case "-i":
                {
                    ManagedInstallerClass.InstallHelper(new string[] { Assembly.GetExecutingAssembly().Location });
                    break;
                }
            case "-uninstall":
            case "-u":
                {
                    ManagedInstallerClass.InstallHelper(new string[] { "/u", Assembly.GetExecutingAssembly().Location });
                    break;
                }
        }
    }
}

重建專案(預設路徑~/bin/Debug)，並複製到遠端
遠端放置檔案資料夾中，shift + 右鍵開啟檔案總綰
鍵入 service -i ，成功會看到服務備安裝在服務清單中

ref: 刪除 service 方法
https://shazi.info/%E5%A6%82%E4%BD%95%E5%88%AA%E9%99%A4-windows-%E6%9C%8D%E5%8B%99%E7%9A%84%E6%96%B9%E6%B3%95-%EF%BC%8Dsc-delete/

c# 不是目前內容的模型的一部分

2019-12-31T09:53:00.002-08:00

動機：想用 Entity FrameWork 在正式機與測試機中，切換。

發生原因：因為正式機的 Entity edmx 沒有引用測試機的 table，導致正式機與測試機的模型不同，而 Entity 的 Dabe Frist 又是透過模型來控制資料庫的，就會發生 Connect String 雖然正確，但 model 不對。

處理方式1：
將正式的 edmx 引入測試站需要用到的 table

處理方式2：
改用 SqlConnection 直接處理，DataSet，不透過 Entity 的 Model

var mySqlConnection = new SqlConnection("server=192.168.O.O;UID=XX;PWD=OO;DATABASE=CECDB");
var mySqlCommand = new SqlCommand("SELECT * FROM SMS_Bill WHERE Acpd_ID = 'sylin'", mySqlConnection);
mySqlConnection.Open();
var myDataReader = mySqlCommand.ExecuteReader(CommandBehavior.CloseConnection);
if (myDataReader.Read())
{
string temp = myDataReader["Account"].ToString();
myDataReader.Close();
mySqlCommand.Dispose();
rep.Message = temp;
rep.Success = true;
}

c# 操作兩張表，將 bill 與 employee 不同的資料寫入 employee。

2019-12-23T00:10:00.000-08:00

最近比較 lambda ，linq ，sql 哪個好？
同樣是要操作兩張表，
目的要將 bill 與 employee 不同的資料寫入 employee，
結果發現一向好操作的 lambda 居然要寫這麼大坨。
看來 sql 還是有它方便的地方。

Lambda:
using (var smsDb = new smsEntities())
{
var billAcpdIdList = smsDb.SMS_Bill
.Select(item => item.ACPD_ID)
.ToList();

using (var cecDb = new Entities())
{
var employeeList = cecDb.EMPLOYEE
.Where(item =>
!item.EMP_ID.Contains("emp"))
.Where(item => !billAcpdIdList.Contains(item.EMP_ID))
.Select(item => new SMS_Bill
{
ACPD_ID = item.EMP_ID
})
.ToList();
}
}

LinQ:

using (var smsDb = new smsEntities())
{
using (var cecDb = new Entities())
{
var list =
(from employee in cecDb.EMPLOYEE
where !SqlMethods.Like(employee.EMP_ID, "%[_]_")
&& !(from bill in smsDb.SMS_Bill
select bill.ACPD_ID).Contains(employee.EMP_ID)
select new SMS_Bill
{
ACPD_ID = employee.EMP_ID,
Account = 0,
}).ToList();

smsDb.SMS_Bill.AddRange(list);
smsDb.SaveChanges();
}
}

SQL

INSERT SMS_BILL(ACPD_ID)

SELECT EMP_ID FROM EMPLOYEE

WHERE (EMP_ID NOT LIKE '%[_]_')

AND EMP_ID NOT IN (SELECT ACPD_ID FROM SMS_BILL)

c# 碰到的 http status code

2019-12-12T04:59:00.000-08:00

開始寫後端之後，對 http status code 還蠻依賴的，以下記錄一下碰到的幾種錯誤，

500 => 這個開頭的都是 server 端的問題。

500.19 => IIS server 沒有裝 .net 引擎，所以不能跑 .net 的發佈檔案。
https://support.microsoft.com/zh-tw/help/942055/http-error-500-19-error-when-you-open-an-iis-7-0-webpage

405 => 該路徑沒有合適的服務，就是可能路徑打錯了。
https://support.microsoft.com/zh-tw/help/942051/error-message-when-a-user-visits-a-website-that-is-hosted-on-a-server

404 => 該位置沒有檔案。

持續更新

vue-cli3 css 重複問題

2019-10-19T08:56:00.002-07:00

vue-cli3 基本上已經有處理 components 身上重複 css 的問題，
但如果配置 css 不對的話，重複 css 還是會發生。

主要是把 variables, mixin 寫在 vue.config.js 設定中，
而應用的部份要注入在 main.js 中

以下提供設定 code

vue.config.js

css: {

    loaderOptions: {

      sass: {

        data: '@import "@/assets/sass/global.sass";',

      },

      css: {

        data: '"swiper/dist/css/swiper.css";',

      },

    },

  },

main.js

import '@/assets/sass/app.sass';

docker reset

2019-08-05T08:56:00.003-07:00

查看目前有的 container

1. docker ps

https://stackoverflow.com/questions/16840409/how-to-list-containers-in-docker

2. docker container reset <container_id>

3. docker-compose build --pull; docker-compose up -d;

# 砍 image 

docker rmi

# 砍 暫存

docker volume prune

# 重抓

docker-compose build --pull; docker-compose up -d

ie text-justify

2019-07-19T00:09:00.001-07:00

https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-justify
雖然明文規定 text-justify: distribute 已廢除
但 ie 11 就是偏偏只能用這個語法，特別記錄一下

關於 Noto Sans 的字粗

2019-07-12T04:26:00.003-07:00

一直以為 Noto Sans 有字粗 100 ~ 900
但其實少數的幾個字粗是沒有的
200, 600, 800 沒有
測試結果是以下這幾種粗度才有提供喔～
https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900

像我最近就是用了 600 才發現原來不支援阿
當沒載到時 chrome browser 會選擇最接近的字粗
https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,700,900
font-weight: 500
這時候就會是 font-weight: 400 的樣式
font-weight: 600
就變成 font-weight: 700 了

總之要小心～

vue.js input 在 ios 上面 event hook 跟 android 不同

2019-07-10T09:08:00.000-07:00

最近流行搜尋不用點 enter 或確定
只要改變 input 就會自動搜尋
但 input 改變的時間點很重要，
尤其在中文拼字的時候，
不然就會撈到空值，

input(
@keydown="onShowMsg('down')"
@keyup="onShowMsg('keyup')"
@change="onShowMsg('change')"
@input="onShowMsg('input')"
)

輸入"ㄒ" "一" "ㄠ" 在點 "小"
在 ios12 iPhone8 上測試，會得到

[Log] down 字未拼完 "ㄒ"
[Log] input 字未拼完 "ㄒ"
[Log] keyup 字未拼完 "ㄒ"
[Log] down 字未拼完 "一"
[Log] input 字未拼完 "一"
[Log] keyup 字未拼完 "一"
[Log] down 字未拼完 "ㄠ"
[Log] input 字拼完 "ㄠ"
[Log] keyup 字拼完 "ㄠ"
[Log] input (x3) 字拼完 "小"
[Log] input 字拼完 "小"

雖然最終值是對的，但卻沒有明確得完成觸發點
後來改用 watch 來偵聽
input 的 data 結果就相當滿意

[Log] down 字未拼完 "ㄒ"
[Log] input 字未拼完 "ㄒ"
[Log] keyup 字未拼完 "ㄒ"
[Log] down 字未拼完 "一"
[Log] input 字未拼完 "一"
[Log] keyup 字未拼完 "一"
[Log] down 字未拼完 "ㄠ"
[Log] input 字拼完 "ㄠ"
[Log] keyup 字拼完 "ㄠ"
[Log] input (x3) 字拼完 "小"
[Log] input 字拼完 "小"
[Log] change 字拼完 "小"

... ellipsis 的飄移

2019-07-09T01:01:00.003-07:00

notoSans 應該是大家蠻常用的一種字型
最近發現他有個小問題
就是 ... ellipsis 會往上飄移

而且 earlyaccess 跟 release 都有這個問題
以下是測試網址
https://codepen.io/LeoYeh/pen/wLQRLJ

目前只有換成其他字型..來處理

css selector 的奧祕

2019-07-04T21:56:00.001-07:00

正常 selector 其實蠻夠用的
但比如說做個多語系可能就會需要用 zh-TW
div(class="zh-TW")

以下做了些測試

https://codepen.io/LeoYeh/pen/QXBzbO

	Class Based	Functional
產生組件	O, 倚賴 extends Component	X, 用 ES6閉包, const ABC = props => { ... }
存取 state	this.state, this.setState({ abc: 123 })	const [abcState, setAbcState] = useSate(123)
LifeCycle Hook	O, ex: update hooks http://t.ly/G5RL	X
存取 props	this.props	props
* 自動 merge state	this.setState({ name: 'leo' }) this.setState({ age: 38 }) state => { name: 'leo', age: 38 }	const [nameState, setNameState] = useSate('leo') => { name: 'leo' } const [ageState, setAgeState] = useSate(38) => { age: 38 }
使用時機	要 mergeState 要 Lifesyscle Hooks 不用 ReactHooks (ex:useState)	沒什麼限制