發表於 更新於 分類於

工作上的應用：

  1. 錯誤訊息動態產生的空間
  2. 驗證自訂規則
  3. 確認密碼的表格
  4. 命名小地雷

錯誤訊息動態產生的空間

在element ui的input裡他是有預留錯誤訊息的空間的，但這讓表單看起來有點空洞，因為輸入欄與輸入欄間距有點大，有點浪費輸入空間，用開發者工具指向出現的錯誤訊息，發現其實很好改動：

1
2
3
.el-form-item__error {
	position: relative;
}

這樣就是動態產生的空間了。

驗證自訂規則

官方文件有寫很基本的寫法，稍微玩過應該就知道怎麼寫，但網路上有很多人使用最精簡的寫法，用正則表示式做驗證，直接看簡單的範例：

4~15碼開頭需要用英文的帳號驗證

1
2
3
4
5
6
someRules: {
	account: [
		{ required: true, message: ruleErrorMes.inputAccount, trigger: 'blur' },
		{ validator(r,v,b){(/^[a-zA-z]\w{3,15}$/).test(v)?b():b(new Error( errorMessage ))} }
	]
}

如果單純用正則判斷的話只要開正則的部分就好，剩下就是帶入自己要的errorMessage，只需要改兩個地方。

確認密碼的表格

其實只是簡單的判定兩個變數是不是相等，但我不知道怎麼在rule的function裡面找到我要的變數，所以我跳脫出他的from改用單純的input硬刻，時間上允許的話再回頭研究吧！

命名小地雷

先看簡單又正確的範例

1
2
3
4
5
6
7
8
<el-form :model="someModel" :rules="someModelRules" ref="someForm">
	<el-form-item :label="'account'" prop="account">
		<el-input type="text"
			v-model="someModel.account"
			:placeholder="'input here'">
		</el-input>
	</el-form-item>
</el-form>

在js

1
2
3
4
5
6
7
8
9
someModel: {
    account: ''
}
someModelRules: {
    account: [
		{ required: true, message: ruleErrorMes.inputAccount, trigger: 'blur' },
		{ validator(r,v,b){(/^[a-zA-z]\w{3,15}$/).test(v)?b():b(new Error( errorMessage ))} }
	]
}

注意！！！！！！！！
Model和Rules兩個物件裡面要驗證的名稱一定要互相對應，不然運作起來會整個一直狂驗證不過！！！

也就是說要驗證model的account，使用的規則名稱也必須是account，這實在很玄，他們應該是不相干的東西但不知道為什麼只要我用不一樣的名稱驗證起來就會一直不過，只有兩個一樣運作才正常。

記錄一下工作上遇到的東西，可能是我哪個環節有問題，歡迎指教～

發表於 更新於 分類於

Account kit可以做到手機或信箱驗證，其實實作起來真的很簡單，但是在Vue的component裡還是要注意一些小地方，這邊把我遇到的問題全部記錄下來。

不過這邊不贅述如何申請開發者帳號和申請應用程式app，他文件上已經夠清楚。

載入後的初始化

首先在html上一定要在header裡就載入sdk，並且在body後端做初始化動作：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Account kit</title>
	<script type="text/javascript" src="https://sdk.accountkit.com/en_US/sdk.js"></script>
</head>
<body>
	<div id="header" ref="header" v-cloak></div>
	<div id="app">
		<router-view></router-view>
	</div>
	<script>
		AccountKit_OnInteractive = function(){
			console.log('Initing signup funciton');
			AccountKit.init(
				{
					appId:"{{FACEBOOK_APP_ID}}",
					state:"{{csrf}}",
					version:"{{ACCOUNT_KIT_API_VERSION}}",
					fbAppEventsEnabled:true,
					Redirect:"{{REDIRECT_URL}}"
				}
			);
			console.log('Inited signup funciton');//為什麼下一個console在這後面會提到
		};
	</script>
	<script type="text/javascript" src="/dist/build.js"></script>
</body>
</html>

你會發現文件還有其他三個function，但那個是我要放在component的methods裡面的，在這邊也不贅述build.js裡面有什麼東西，直接寫component.vue的檔案：

P.S:這邊只取簡訊驗證所以不寫emailLogin的東西，兩個邏輯是一樣的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<template>
	<div>
		<input v-model="countryCode" />
		<input placeholder="phone number" v-model="phoneNumber"/>
		<button @click="smsLogin">Login via SMS</button>
	</div>
</template>

<script>
import Vue from 'vue'
export default {
	name: 'home',
	data: function () {
		return {
			countryCode: '+886',
			phoneNumber: ''
		}
	},
	methods: {
		smsLogin: function () {
			var countryCode = document.getElementById("country_code").value;
			var phoneNumber = document.getElementById("phone_number").value;
			AccountKit.login(
				'PHONE',
				{countryCode: countryCode, phoneNumber: phoneNumber}, // will use default values if not specified
				this.loginCallback
			);
		},
		loginCallback: function (response) {
			if (response.status === "PARTIALLY_AUTHENTICATED") {
				var code = response.code;
				var csrf = response.state;
				// Send code to server to exchange for access token
			} else if (response.status === "NOT_AUTHENTICATED") {
				// handle authentication failure
			} else if (response.status === "BAD_PARAMS") {
				// handle bad parameters
			}
		}
	}
}
</script>
<style lang="scss">
//some...
</style>

正常來講這樣就可以啟動Acoount kit的功能囉！

這邊紀錄一下一些問題以及我的作法：

問題面

account kit 方面

  1. 在html用script載入sdk.js的檔案之後他會執行裡面的function產生AccountKit_OnInteractive這個變數並且watch他，所以在我們下AccountKit_OnInteractive = function () { AccountKit.init() }的時候他自己會執行 AccountKit.init()一次，而且他要抓到正確的AccountKit.init參數。
  2. sdk.js載入之後AccountKit裡面有init和login這兩個function，要使用login之前一定要執行過init。
  3. 執行過AccountKit.init之後再執行一次會報錯。
  4. AccountKit.init的資訊似乎會在暫存裡面，所以刷新頁面如果出現donotlinktosdkdirectly的錯誤代表在抓到真正這次的sdk.js之前已經過早執行AccountKit.init。

vue 方面

  1. conponent的methods裡面雖然可以呼叫windows的東西但從外面無法呼叫這個component的methods(或許真的有辦法)，這會造成如果account kit function全都寫在windows 的話會造成完成後的function loginCallback執行上的困難。
  2. 雖然可以在component裡面呼叫到window的AccountKit_OnInteractive，但在vue裡面直接下AccountKit.login()他卻找不到正確的AccountKit.init的參數，我在想或許AccountKit在每個component裡面或許都是自己獨立的。

解決方法

問題1,2如何知道sdk.js完整抓下來並且正確的AccountKit.init()一次過，就像我範例中的html上下一段console.log('Inited signup funciton');即可清楚辨別，也可以避免問題3,4的問題。

問題5,6因為我們在html的window init了我們的AccountKit.init，為了讓AccountKit.login抓到window裡正確的參數，指定執行window.AccountKit.login即可。

可能是對很多東西還不是很熟，或許有更棒的做法，但我收尋不太到真正解到我痛點的文章，至少目前這個做法是很ok的，歡迎大家指點。

發表於 更新於 分類於 ，

我是一個寫程式的前端工程師，在安靜的辦公室常常會被我們網紅的叫聲嚇到，就是下面這位：
網紅.jpg

前陣子剛好師母在北京準備要回來看醫生，一問才知道離飛機剩不到24小時，但還是花了一萬左右的價格弄到了XDDD，先補上兩張開箱文：
開箱文1.jpg
開箱文2.jpg

接下來使用上的體驗它有分三種模式：

1.環境聲音普通模式：就是還可以清楚聽到外面的聲音
2.環境聲音語音模式：會把人聲留下來其他聲音稍微過濾掉
3.降噪開關：打開後就完全進入自己的世界

最常使用的其實就是降噪模式了，真的是大推！！

在我桌子底下每叫必嚇到我的網紅再開起降噪的時候像是隔壁巷子的狗在叫！

輕輕的壓住右邊的耳罩可以很清楚的聽到外界的聲音

這個耳機是有麥克風的，而且收音也十分良好，聽的音樂也會瞬間被轉的很小聲變成背景音樂繼續播放，可以直接參考官方網站由張鈞甯代言的廣告唷！用起來有鋼鐵人在用的感覺XD。

如果覺得降噪似乎有點不好的話長按降噪的開關鍵他會開始優化程序，他會偵測外界的聲音去做降噪的調整，但我個人是聽不太出來啦～

擁有舒服的音質和音樂操控

我想大家一定會很care音質好不好，音質的方面我不是專家但我覺得已經夠優秀，直接聽大砲進行曲來測試是很ok的唷！

方便的還有剛剛提到按住可以聽到外面聲音的右耳罩，其他功能單指左右滑是換曲子，上下滑是調整音量，連續點兩下歌曲就會暫停和播放囉！！

音量足夠且充電快速

一樣使用USB充電，盒子標榜是可以20個小時，我並沒有實際去測試過，大約經驗如下：

  • 音量約開到iPhone的1/3再高一點左右聽6~8小時會到中電量
  • 使用筆電充電大約兩小時之內就從中電量充到飽

順帶一提這個耳機長按電源鍵是開關機，按一下會報告目前電量。

舒適度在冷氣房可以戴上一整天

說真的台灣真的太熱，我想夏天不可能還可以像張鈞甯一樣在室外戴的這麼優雅跟帥哥眉來眼去再combo個一抹微笑。

我算是長時間戴著工作的(畢竟我沒辦法預測辦公室網紅哪時會叫XD)，除了吃飯和午休至少都會戴六個小時以上，有時候回家繼續使用電腦的話很有可能戴上超過10個小時，只要不流汗是沒有感到不舒服喲！只是都聽不到外界的聲音是會有點有自閉的感覺啦。

不會扣分的基本外觀

其實每個人審美觀真的不一樣，但至少這款真的是走比較低調風吧！不會像B牌比較高調，帶著走是很輕鬆自在的，直接附上與師傅的同款耳機照吧XD
師傅同款代言耳機.jpg

以上是我半個多月的使用心得，最後用我辦公室的網紅做個結尾吧！
112243.jpg

發表於 更新於 分類於

其實在網路上真的不好搜尋，也許是我關鍵字下的不好，所以這是我自己想辦法直接硬改css就好XD

簡單解決方法

1
2
3
.el-form-item__label::before {
	content: '' !important;
}

題外話紀錄

el-form-item在官方文件上有一個自己也有一個required的屬性可以寫在html上，有人說這個單純是控制那個星號(米字, *)的跟實際驗證無關，但我自己用是有關聯的！記錄以下幾個狀況：

  1. 不設定他也不給他rule的話預設值是false，所以required的驗證模式是關閉的。
  2. 要設定他的話在html上打:required = 'true'，就會開啟驗證模式摟！此時會有星號了。
  3. 如果不設定他但是rule有required這條規則的話也會把星號加上去喔！

發表於 更新於 分類於

繼上次的自製Dimmer突然發現一個問題，如果我的modal要垂直和水平都置中的話怎麼辦呢？

網路上一查就有一堆文章，我喜歡越簡單的越好，就介紹下面兩個：

子元素加上 margin: auto;

直接看範例吧～

1
2
3
<div class="father">
  <div class="son">Hello world!</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.father {
	position: relative;
	background-color: rgba(0, 0, 0, 0.53);
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 2;
}
.son {
	position: absolute;
	width: 100px;
	height: 50px;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	background: #fff;
	z-index: 3;
}

父元素使用 display: flex;

直接看範例吧～

1
2
3
<div class="father">
  <div class="son">Hello world!</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.father {
	display:flex;
	align-items:center;
	justify-content:center;
	background-color: rgba(0, 0, 0, 0.53);
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 2;
}
.son {
	position: relative;
	width: 100px;
	height: 50px;
	background: #fff;
	z-index: 3;
}

##參考文章
CSS 垂直置中的七個方法

發表於 更新於 分類於 ，

專案上的應用

  1. 使用vue-cli webpack-simple
  2. 使用vue-router呈現頁面所以大部份的view由.vue檔案組成
  3. 每個.vue檔案裡面直接在裡面寫自己的css
  4. html還是有引進大家共用的scc(由sass compass出來的css)

.vue檔案裡不能對外部的css檔案使用function

其實這觀念很簡單的，因為我們引入的已經是css檔案，自然.vue檔案不能使用@extend等sass才可以用的function去銜接他XD

但.vue檔案裡面還是能直接使用外部檔案的css喲！

RWD要寫在.vue檔案的最下面

正確寫法：

1
2
3
4
5
6
.someElement {
  display: block;
}
@media only screen and (max-width: 760px) {
  .someElement { display: none; }
}

錯誤寫法：

1
2
3
4
5
6
@media only screen and (max-width: 760px) {
  .someElement { display: none; }
}
.someElement {
  display: block;
}

如果使用錯誤寫法，我們可以在chrome的檢查工具上會發現RWD的東西即使被觸發顯示了，但還是會被下面原本someElement的東西蓋過去哦！
千萬不要太濫用!important這個猛藥！

發表於 更新於 分類於 ，

首先瞭解一下我的專案用了些什麼：

  1. vue-cli安裝webpack-simple
  2. 使用vue-router
  3. vue-router使用history模式
  4. 整個專案只用一個html檔案

遇到的問題點：

在本地端(8080port)的網頁除了使用跳轉畫面之外，也可以直接手動輸入網址呈現vue-router該出現的東西，但是在別的伺服器引擎上除非使用<router-link>跳轉畫面，不然直接手動輸入網址會出現404找不到網頁。

這是因為直接手動輸入網址是會取檔案的靜態位置(真實位置)，而vue-router的網址一律為動態位置(虛擬位置)，所以伺服器第一反應是在靜態位置找不到檔案而回傳404頁面。

在iis伺服器引擎上的解決方法

在伺服器根目錄創造一個web.config檔案，他是整個伺服器最先讀取的檔案，可以設定如果遇到什麼事情就去做哪些動作：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="API SETTING" stopProcessing="true">
          <match url="(^v2/*)|(^api/*)" />
          <action type="None" />
        </rule>
        <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
          <match url="(.*)" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="index.html" />
        </rule>
      </rules>
    </rewrite>
    <modules runAllManagedModulesForAllRequests="true"/>
  </system.webServer>
</configuration>

<action type="Rewrite" url="index.html" />拿來設定如果找不到網頁則利用當前的URL去執行哪一隻檔案！

發表於 更新於 分類於 ，

我的目的是希望做一個單獨的js檔案管理語言包，使所有的component都可以import使用

專案裡所需的東西

  1. vuex
  2. .json檔案做成的語言包
  3. 不要懷疑原來就是這麼精簡的心情

開始製作語言系統

我們先來製作兩個語言包吧！
首先創造兩個.json檔案分別為：
tw.json
en.json

tw.json
1
2
3
{
  language: '中文'
}
en.json
1
2
3
{
  language: 'English'
}

再來創造一個專門管理語言的js檔案，我命名為config：

config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

var config = new Vuex.Store({
	state: {
		language: 'tw',
		translations: {}
	},
	mutations: {
		getTranslations () {
			if ( state.language === 'tw' ) {
				$.ajax({
					url:'./tw.json',
					type: 'get',
					async: false,//設定同步讓語言包一定要先取到才export出去
					success: function (response) {
						state.translations = response;
						state.language === 'en'
					}
				});
			} else {
				$.ajax({
					url: './en.json',
					type: 'get',
					async: false,
					success: function (response) {
						state.translations = response;
						state.language === 'tw'
					}
				});
			}
		}
	}
});

之後開始創造html：
P.S:這裡用最兩光的按鈕直接切換語系，正常來講是下拉式選單之類的才最適合。

index.html
1
2
3
4
5
<center id="showTranslations" v-cloak>
  <button @click="changeLanguage">change</button>
  現在語系:{{ translations.language }}
</center>
<div id="component"></div>

開始撰寫main.js

main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import Vue from 'vue'
import Vuex from 'vuex'
import config from './config.js'

import myComponent from './component.vue'

Vue.use(Vuex)

//把從.vue檔案import的component實作出來
new Vue({
	el: '#component',
	render: h => h(myComponent)
})

//主要的東西也可以直接寫在此js裡面
new Vue({
	el: '#showTranslations',
	data: function () {
		return {
			someData: ''
		}
	},
	methods: {
		changeLanguage: function () {
			config.commit('getTranslations');
			//要呼叫vuex的function要使用commit
		}
	},
	computed: {
		translation() {
			return config.state.translations;
			//只用這種方法去讀取語言包！
		}
	}
})

開始撰寫component.vue

component.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template>
	<center>
		component語系:{{ translations.language }}
	</center>
</template>

<script>
import Vue from 'vue'
import Vuex from 'vuex'

import config from './config.js'
//每個component都要引進語言包！
Vue.use(Vuex)
export default {
	data() {
		return {
			someData: ''
		}
	},
	computed: {
		translation() {
			return config.state.translations;
		}
	}
}
</script>

這樣就可以簡單模擬一個專案有一隻js檔案是使用vuex達到讓每個component運用裡面的資料做很多初始化的事情囉！

執得注意的地方：
config的ajax一定要使用同步執行完整才export出去(async: false)，promise，axios等等都沒辦法做到。

這個方法有個比較大的缺點是json擋就得很土炮的自己一個一個字打上去囉！

發表於 更新於 分類於

現在jQuery幾乎已經成基本配備，簡單的網頁互動已經可以很輕鬆簡單的做一個基本的版本，這樣使用者在使用網頁的時候比較不會有頁面突然被刷新而不知所以然的疑慮，簡單的介紹fadeIn和fadeOut吧！

直接實作吧！

先做個最簡單的東西在html~

1
2
<div class="block"></div>
<div class="block2"></div>

再做一個簡單的css，注意我先把block2藏起來摟(display: none)！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
body {
  text-align: center;
}
.block ,.block2{
  display: inline-block;
  margin-right: 30px;
  width: 100px;
  height: 100px;
  outline: 1px solid;
}
.block {
  background-color: blue;
}
.block2 {
  background-color: red;
  display: none;
}

接下來js實作fadeIn和fadeOut吧！

1
2
3
4
5
6
7
8
9
10
function block () {
  $('.block').fadeOut(function () {
    $('.block2').fadeIn();
  });
}
function blockTwo () {
  $('.block2').fadeOut(function () {
    $('.block').fadeIn();
  });
}

實作出來會發現block2並沒有置中，這是因為她的display被宣染成block而不是inline-clock了！！
這時候只要加一段jQuery的小東西.css()即可，所以我們修改上面的JavaScript如下：

1
2
3
4
5
6
7
8
9
10
function block () {
  $('.block').fadeOut(function () {
    $('.block2').fadeIn().css("display","inline-block");
  });
}
function blockTwo () {
  $('.block2').fadeOut(function () {
    $('.block').fadeIn();
  });
}

可以參考我的codepen。

簡單認識fadeIn和fadeOut

在文件上他有兩個參數，一個是控制動畫的時間長短(單位是ms，預設400)，另一個是執行完畢後要做的事情(function)，兩個都是一樣的做法。

所以照著剛剛上面的範例條一個出來解釋的話：

1
2
3
$('.block2').fadeOut(3000, function () {
    $('.block').fadeIn(2000);
});

這樣就代表block2的fadeOut算整整三千毫秒執行完後才會執行後面的function，block的fadeIn會在兩千毫秒執行完畢。

參考網站

jQuery文件
stack overflow

發表於 更新於 分類於 ，

本來想說可以在這個地方兩三天寫一篇小日記，結果又沒做到了哈

自從過完生日之後我悶了好久一陣子，職涯的低潮，感情上的挫敗甚至是投資上的失利…
今天去健身房踩了呃…說實在的我不知道名稱叫什麼，總之現在留了一身汗大腿也頗酸，估計明天鐵腿了吧！

踩著運動器材想了很多事情，不知道所有的人會不會都有這麼一個迷惘的時期，不只限於在軟體界的，自己到底想要過的是什麼生活？

我想先別想太多了，我的思想因為這樣陷入了無限的輪迴，如果再加上職涯上的挫折，會陷入極度懷疑自己的困惑中，然後可怕的惡性循環開始，所有以前像是一顆顆糖果般甜美的成就感，現在化成火球卡在自己的胸口中把一切空間燒成灰燼，所有的開心的祝福好像都變成了背叛了自己的士兵拿著長槍一根根的往自己的背脊插了下去…，這一兩個月我差不多就是這種感覺吧XD”

雖然感覺上絕望已經來圍城，但我們暫緩腳步來做些理性的事情吧，那些教育上沒教過你的事情，好在我有很好的夥伴經常來幫我解圍。

好好盤點資源吧！自己永遠不會是真的在絕望，除非連健康都沒有了。
雖然我的公司跟我的職涯可成處在互相傷害的地步，其實並不是說公司有問題，是我進步的沒有這麼迅速了，也沒辦法幫公司做更厲害的東西，但真的給自己一個時間吧！

我在十一月底前只想做兩件事情，熟悉Vue和使用webpack模組化東西，就這樣了，當初我有許多宏偉的目標又信誓旦旦的講出了一堆東西，在了解自己的實力之後只讓我覺得像個最沒有信用的小人。

有了最低限度的目標就想辦法去做吧！這是最起碼的東西了，如果這也做不到應該就是我自己能力本質上的問題了。

接下來跟自己比賽吧！如果身邊朋友太強讓自己很痛苦的話或許是一件好事，至少看到了之後的目標，總之現在最重要的，還是穩住自己的腳步，一起享受這場遊戲吧！