tag:blogger.com,1999:blog-69669602061988681652026-09-17T02:14:04.136+08:00yiyingggghttp://www.blogger.com/profile/16556544437749712569noreply@blogger.comBlogger587125tag:blogger.com,1999:blog-6966960206198868165.post-59555549348842152882017-11-03T12:01:00.003+08:002017-11-03T12:01:48.974+08:00

要在畫面一進來 focus multiselect 的方式:參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted() 執行:this.my_multiselect.$el.focus();------ 要在畫面進來 focus tinymce 的方式: 關鍵字請搜尋 tinymce  init_instance_callbackhttps://stackoverflow.com/questions/19829126/tinymce-4-how-to-put-cursor-to-end-of-the-text 這就是解法還會判斷是不是有內文，有內文的話 會 cursor 到最後一的字後面。

yiyingggghttp://www.blogger.com/profile/16556544437749712569noreply@blogger.com0tag:blogger.com,1999:blog-6966960206198868165.post-49044165998237516172017-09-21T16:40:00.003+08:002017-09-21T16:40:57.585+08:00

photo crop from https://unpkg.com/vue@2.3.0/dist/vue.js好久以前，大概半年前我用了 Vue Typehead 這個第三方套件，那時候就按照 readme 直接用 extends 用上，半年後我加了好多新功能，把一樣的 methods, data property 拆出去變成 mixins。 extends: VueTypeahead, ---- mixins: [ hasPager, hasSearch ],今天在整理 code 的時候，就好奇這兩個差別是什麼，看了一下 source code，好像是一樣的作用，最後都是呼叫 mergeOptions，只是 mixins 可以帶很多個 (因為是 Array)，extends 就一個。

yiyingggghttp://www.blogger.com/profile/16556544437749712569noreply@blogger.com0tag:blogger.com,1999:blog-6966960206198868165.post-35031593779313210612017-09-21T16:16:00.004+08:002017-09-21T16:16:58.575+08:00

網站上有很多元件非常容易重複使用，例如 Loading 狀態，Alert 文字框，無資料的狀態，分頁等 Component，既然這些元件會時不時的被使用，那為何不直接註冊成 Global Component ?!，這樣就再也不用在每一頁重新 import 一次那些常用的 component 了。 在 new 一個 Vue 之前處理好這些 import 跟 註冊 component // main.js, 匯入所有需要註冊成全域的 component import Paginate from 'vuejs-paginate' import Loading from './components/Loader' import EmptyStatus from './components/EmptyStatus' // Register as global component

yiyingggghttp://www.blogger.com/profile/16556544437749712569noreply@blogger.com0tag:blogger.com,1999:blog-6966960206198868165.post-51613260104568913502017-09-19T16:26:00.003+08:002017-09-19T17:16:35.342+08:00

在 Vue / Vue-Resource 接 api 時候，前陣子有一件事一直很困擾我，那就是 Promise 沒有一個狀態讓我知道已經完成，不論 request 是否成功或失敗，我只能知道 resolve, reject, cache... ，但我希望有一個像 jQuery 的 always 一樣，能夠給我放一個 callback 在 request 完成時呼叫 (不論結果如何)。 今天看到一篇文章 (Finally the Promise.prototype.finally() is available)，說 Promise 的 finally 已經在 TC39 ECMAScript Proposal 裡面，現在急要用的話可以走 polyfill，該文章有幾種 polyfill 的做法，可以參考看看。不過我看 Vue-Resource 的原始碼，已經有幫我處理過

yiyingggghttp://www.blogger.com/profile/16556544437749712569noreply@blogger.com0tag:blogger.com,1999:blog-6966960206198868165.post-35614585359054512682017-09-18T17:11:00.001+08:002017-09-18T17:11:35.299+08:00

首先你的 Vue 專案也是使用 Vue Resource 處理 http request, 再往下看~ 在 SPA 因為有大量接 API 的需求，但每次都要在獨立的 component 處理不同的 http status code 狀態，實在有點麻煩，比方說遇到 api 的 status 是 401 的話，就要再寫一個 router push 到使用者登入畫面之類的 code，重複的邏輯散落在各處 page component. 因為 vue resource 有個好用的 api 叫做 interceptors，覺得他跟 Laravel 的 middleware 很相似，就是所有 request 都會經過他，做一些處理，因此可以利用 interceptors 過濾每一次 request 的狀態，假如是 401 就導到 login, 假如是 404 就導過去 not

yiyingggghttp://www.blogger.com/profile/16556544437749712569noreply@blogger.com0tag:blogger.com,1999:blog-6966960206198868165.post-60252133586221962012017-09-18T16:41:00.001+08:002017-09-18T16:44:01.370+08:00

一開始使用 Vue 寫 Single Page Application (SPA)，頁面越來越多時，編譯出來的 build.js 越來越肥，覺得這樣 request 時 loading 蠻吃緊的，最高甚至到了 3MB 以上，雖然有 nginx 的 gzip 在前面擋著，不過還是有其他方式可以盡量減少檔案大小，因此就打算針對某些 routes 做成按需加載，也就是有走到某個頁面時，再加載該頁面的 JavaScript。 *我的專案是 Vue2 / Webpack2 / Vue-Router 1.  首先要在 routes 的 import 寫法改一下，把需要按需加載的頁面，改成 resolve require 的方式: /* import Home from '../pages/Home' import Product from

yiyingggghttp://www.blogger.com/profile/16556544437749712569noreply@blogger.com0tag:blogger.com,1999:blog-6966960206198868165.post-37573315017280392532017-09-18T14:51:00.002+08:002017-09-18T15:32:38.553+08:00

在 Vue component 裏，隨時都有需要拿取一些設定的值，例如圖床的 domain，因為要組完整的圖片 url，例如某些功能是否要開啟，例如檔案大小的 MB 限制也要寫成設定，例如 api 的 endpoint，網址也不可能是 hard code, 也是統一透過一個設定而來。 寫成獨自的設定，不依賴後端傳設定，方便脫離後端。 我的做法是寫一隻 config，但是又需要丟進去給 Vue， 又不想直接 assing 給 window 物件 (如果要這麼公開的直接丟給 window，根本也不用寫 config.js，也很容易看到四散在各處的 window.xxx = 某個設定的值) 所以我就用了 Vue.prototype，集中管理所有跟設定有關的部分，傳給 Vue。 首先在專案的目錄的某處，放置這隻充滿設定的檔案，檔名我也叫 config.js const

yiyingggghttp://www.blogger.com/profile/16556544437749712569noreply@blogger.com0tag:blogger.com,1999:blog-6966960206198868165.post-17701187529384998002017-09-18T11:26:00.001+08:002017-09-18T11:26:08.221+08:00

很多人都習慣直接使用 Google 的 custom search 服務，在自己的網站上加入搜尋框。 假如現在有個需求是，想要紀錄使用者在 custom search 上搜尋的文字紀錄，方便公司做統計，什麼樣的單字是使用者特別想搜尋的，那就會需要一個 callback function 是使用者透過 custom search 後取得使用者 key 的單字。 其實官方文件有提到如何使用 callback，請參考，只是一開始我覺得官方這個範例不是很直覺。後來還是靠 stackoverflow取得 實作參考。 我是使用這組解法，後來有成功~ window.__gcse = { callback: myCallback }; 自定義一個 function (暫時叫 myCallback) 給 _gcse 的 callback，然後在 myCallback 記得接住

yiyingggghttp://www.blogger.com/profile/16556544437749712569noreply@blogger.com0tag:blogger.com,1999:blog-6966960206198868165.post-4746006907031550692017-09-18T11:03:00.001+08:002017-09-18T11:07:25.793+08:00

本文假設你已經裝好 Vue 以及 Webpack 等設定。 首先需要安裝 sweetalert2: npm i sweetalert2 --save-dev 在主要的程式進入點，例如: main.js (看個人摟) 做 import: import swal from 'sweetalert2' 接著在下方定義 swalPlugin 另外把 sweetalert2 的設定指回去給 Vue.prototype.$swal 你也可以定義別的名稱，例如 Vue.prototype.$sweetalert2 之類的。 const swalPlugin = {} swalPlugin.install = function(Vue){ swal.setDefaults({ confirmButtonClass: 'btn btn-primary',

yiyingggghttp://www.blogger.com/profile/16556544437749712569noreply@blogger.com2tag:blogger.com,1999:blog-6966960206198868165.post-82190825625641376092017-09-18T10:14:00.000+08:002017-09-18T10:14:19.036+08:00

CSS 的 ellipsis 是用來解決限制文字長度，過長則可以幫你在字尾加上 “...”，讓你不必費心思考怎麼處理 ... ，也不須麻煩後端做字元數量計算， 參考連結。 --- BTW: 但有個缺點就是只限制在文字只需要顯示最多一行的情況，多行的話則沒有辦法 (應該說辦法是有，只是還不能用 (以後可以期待 https://drafts.csswg.org/css-ui-4/#overflow-string)，而且解法我也認為大多是 workaround，除非等新的 css 屬性出來，所以多行擷取字元的話還是交給強大的後端吧，JS 處理顯得有些麻煩) --- 不過問題是因為我參考了網路上 sticky-footer 的做法 (參考)，因為網頁主要的 container, dispay: 是 table-row, 結果在整個網站想要使用 ellipsis 突然就沒有作用，

yiyingggghttp://www.blogger.com/profile/16556544437749712569noreply@blogger.com0tag:blogger.com,1999:blog-6966960206198868165.post-33908135802327759272017-04-24T14:41:00.000+08:002017-04-24T14:42:38.852+08:00

背景 vue2 + webpack2 所需要的 package npm i babel-eslint eslint eslint-config-vue eslint-loader, eslint-plugin-vue --save-dev webpack loader 調整為: { // 轉 ES6 以及 處理 Eslint 檢查 test: /\.js$/, use: [ 'babel-loader', 'eslint-loader' ], include: [      path.join(__dirname, './resources/assets/js/') ] }, include 可以換成 exclude, 如果你的專案結構很簡單的話。 另外在 loaderOptionsPlugin 調整為:

yiyingggghttp://www.blogger.com/profile/16556544437749712569noreply@blogger.com0tag:blogger.com,1999:blog-6966960206198868165.post-36963383025336275372017-02-13T18:53:00.001+08:002017-02-13T18:54:48.276+08:00

參考 http://stackoverflow.com/questions/42057797/laravel-5-4-artisan-migrate-fails-with-call-to-undefined-method-dispatch。 如果升級時，執行 php artisan 相關指令沒事，就不用理會這個。但如果出現類似錯誤，先把 bootstrap/cache 底下的檔案都刪掉，然後執行 php artisan cache:clear php artisan view:clear

yiyingggghttp://www.blogger.com/profile/16556544437749712569noreply@blogger.com0tag:blogger.com,1999:blog-6966960206198868165.post-37363472197183840612016-11-11T15:57:00.000+08:002016-11-11T15:59:29.334+08:00

最近開始覺得 Safari 大概是未來的 IE。 在使用 HTML5  的 video 播放影片時，遇到兩種影片播不出來的情況。 情況一 較少人會遇到，就是尚未更新成最新的 OS 作業系統，(我的情況是作業系統 OS X EI Capitan, safari版本: 9.0.2)，很不巧的我是用自己 server 的 https，當你的 SSL 憑證不是可以信任的，safari 無法載入 mp4，解法是什麼，就只好把 https 改成 http 了。 這個問題找好久，而且還要找到一台尚未更新 OS 的 Mac 來測真的很有困難。參考: http://stackoverflow.com/questions/25709713/safari-will-not-play-mp4-over-https, Cannot view Quicktime movies

yiyingggghttp://www.blogger.com/profile/16556544437749712569noreply@blogger.com1tag:blogger.com,1999:blog-6966960206198868165.post-80097161848710456812016-11-01T14:40:00.000+08:002016-11-01T14:40:51.287+08:00

參考: [SVG animation is not working on IE11] http://stackoverflow.com/questions/33812303/svg-animation-is-not-working-on-ie11 因為今天在處理一個 svg 的動畫發現在 IE 跑不出來，原本以為是因為使用 stroke-dasharray 跟 stroke-dashoffset... ，結果得到的解答是只有 Edge 會支援 SVG 的 Transition 跟 animation。簡單來說目前沒有特別方便快速的解法，網路上的解法建議是轉用 svg 的 library 像是 GreenSock 。 連我都還沒使用到 Edge 的人了，直接放棄在 IE 上的效果，結案。不過依舊要寫兩份樣式，先偵測瀏覽器是否為 IE，在 <body> 上

yiyingggghttp://www.blogger.com/profile/16556544437749712569noreply@blogger.com0tag:blogger.com,1999:blog-6966960206198868165.post-3135785065650810412016-10-19T09:38:00.004+08:002016-10-19T09:38:59.696+08:00

昨天更新 macOS Sierra 之後，執行 compass 出現 Operation not permitted - /usr/bin/compass，後來找到了一個方式，就是先切換成 root，再安裝: sudo su sudo gem install -n /usr/local/bin compass 不過要小心，在你更新完作業系統的之後，也請你先更新 xcode，再來處理這些 compass 路徑的問題。xcode 的安裝試試在 cli 執行 xcode-select --install，或是打開你的 App Store 找到他，然後更新，再來處理 compass 的安裝。 若這個解法不適合你，或者你是使用 homebrew 在安裝的話，你可以參考: Compass install fails on OS X 10.11 due to new

yiyingggghttp://www.blogger.com/profile/16556544437749712569noreply@blogger.com0tag:blogger.com,1999:blog-6966960206198868165.post-86231904370773576762016-10-17T23:14:00.002+08:002016-10-17T23:14:34.121+08:00

最近工作常常在 windows 跟 Mac, Linux 上切換來切換去，發現在 Mac 掛磁碟機近來的 Repo 莫名其妙都進 git status 變成需要 diff 的檔案，明明也沒修改什麼，也有可能是因為用 afp 掛進來的，然後我也完全忘記有檔案權限這件事情，還好同事英明，快速指出原因。要讓 git 忽略這個問題，只要設定 git 的 filemode 就行:git config core.fileMode false若想要設定成全域，加上 --global 就可以。參考: How do I make Git ignore file mode (chmod) changes? git tips: 设置filemode，避免NTFS文件权限变更引起的修改 git关于文件权限修改引起的冲突及忽略文件权限的办法

yiyingggghttp://www.blogger.com/profile/16556544437749712569noreply@blogger.com0tag:blogger.com,1999:blog-6966960206198868165.post-75881705665387046432016-10-16T23:39:00.001+08:002016-10-16T23:39:38.886+08:00

開發工具一直都是前端人員的求生工具之一，相信大家在使用瀏覽器 Debug 時通常也都會開啟 F12 的開發人員工具，最近我從書上學到一些快速 & 覺得實用的 selector (也許是老掉牙的知識了?!)，紀錄一下: (1) $0 選取目前被鎖定的元素 假如你已經在頁面上選擇某個元素了，那可以直接利用 $0 去選擇到你選到的 DOM。另外若你有載入 jQuery 的話，就可以直接利用 $($0) (或是 jQuery($0))去操作它。 其實 $( ) 代表的是 document.getElementById，但如果你裝的 library 也有 $( ) 這個 function，就會被你裝的 library 給取代。不過還好用 jQuery 感覺是沒差。 利用選取工具，去選擇你要的 DOM。 直接使用 $0: 而且 chrome 會記錄歷程，假設你選取

yiyingggghttp://www.blogger.com/profile/16556544437749712569noreply@blogger.com0tag:blogger.com,1999:blog-6966960206198868165.post-21190498799659240292016-10-14T23:59:00.000+08:002016-10-17T00:00:29.739+08:00

剛開始在買這個 domain 的時候，其實 winwu.cc 以及 www.winwu.cc 都可以連到，問題是我希望搜尋引擎以 www.winwu.cc 為主要的網址，那麼，沒有 www 這個 domain 或是利用其他 domain 時，我要把 user 導到 www.winwu.cc，這時候要選擇哪一種轉址呢?! 301 301 代表的是永久性的轉址，希望搜尋引擎不要去 index 原本的網址，以轉址後到達的頁面為主。 302 暫時性的轉址，原本的網址也希望被瀏覽器 index，只是可能因為什麼原因，所以需要先導到另外一個網址去。 我想只有在換網址時才會遇到這個問題，我其實也是在 godaddy 做 redirect 時才遇到過。以我的案例來說也是選擇 301，因為我希望搜尋引擎可以用 www 開頭的網址為主。 網路上也有些方便的工具幫你檢測是否為 301，像是

yiyingggghttp://www.blogger.com/profile/16556544437749712569noreply@blogger.com0tag:blogger.com,1999:blog-6966960206198868165.post-60396974326862640432016-10-13T09:36:00.001+08:002016-10-13T09:36:08.606+08:00

在跑 Gulp Compass 編譯 scss 時，一直出現這個 Warning 讓我覺得很焦躁，雖然是可以不管他。 詳細的錯誤訊息是: DEPRECATION WARNING on line 92 of XXXX/compass/css3/_deprecated-support.scss: #{} interpolation near operators will be simplified in a future version of Sass. To preserve the current behavior, use quotes: unquote('"$ie6-"#{$legacy-support-for-ie6} "$ie7-"#{$legacy-support-for-ie7} "$ie8-"#{$legacy-support-for-ie8}') You can

yiyingggghttp://www.blogger.com/profile/16556544437749712569noreply@blogger.com0tag:blogger.com,1999:blog-6966960206198868165.post-76358251172081898902016-10-08T23:17:00.002+08:002016-10-08T23:17:16.963+08:00

今年的九月份說起來也蠻忙的，我在 Women Who Code Taipei  講了四次的基礎前端講座，若您有興趣也可以看看這些投影片，但是精華部分比較少，這四次的上課走法講求希望讓來參與課程的同學可以實作，所以投影片內容都不多，上課時話比較多。有些投影片若內容不完整，我也是透過口頭說明，可能是剛好有一兩週比較忙 QQ第一週 第二週 第三週 第四週 您也可以持續關注 Women Who Code Taipei 的活動，http://www.meetup.com/Women-Who-Code-Taipei/events。四周短短加起來不到10小時上課時數，不過有些同學也是很認真的交作業，很不簡單 :)  當初我也有點掙扎四周可以講些什麼內容 XD---九月份還有另外一個比較重大的變化就是離職，我換了一家新公司，新的開始，很希望可以待上個 3 年以上。離開的那家

yiyingggghttp://www.blogger.com/profile/16556544437749712569noreply@blogger.com0tag:blogger.com,1999:blog-6966960206198868165.post-11694860221535094502016-09-26T11:49:00.004+08:002016-09-26T11:49:56.403+08:00

修改資料夾大小寫時，發現只修改大小寫沒有被視為 change 過的檔案 (這樣就沒辦法 commit 呀 !!) 將 git 的這個設定打開: git config core.ignorecase false 可以讓 git 將大小寫修正視為不同的檔案，這樣 git status 就會看到變化，進而可以正常 commit. (久久沒發文竟然是因為這種小問題... QQ)

yiyingggghttp://www.blogger.com/profile/16556544437749712569noreply@blogger.com0tag:blogger.com,1999:blog-6966960206198868165.post-8552793690494858412016-08-30T10:10:00.000+08:002016-08-30T10:10:34.627+08:00

讀《30歲前，你一定要去小公司》 很早之前在臉書看到某大神推薦這本書，上個月在書店看到，就買回家看。正確地來說應該是 45 個去小公司的優點，應該跟 30 歲無關吧 (總覺得台灣的翻譯商很喜歡幹這種標題殺人法，不知道是不想賺30歲以上的錢還是?!)。 作者自身在大公司待了蠻久的，30幾歲初，轉職至小公司，最後自己創業，從書上分享一些某些想法在大小公司上的優劣，以及心態，比較適合不知道自己該去哪一家公司的人 (如果同時有拿到大公司 offer 跟小公司 offer 的話)，可以給點方向，但台灣的企業，中小企業居多就是了。 書籍: http://www.books.com.tw/products/0010705881 讀《成為搶手人才的關鍵法則》 這本也是書名不能讓我接受但內容還 ok 的一本書。換句話說不如說是一本，”哪些雷, 哪些話，應該在職場上避開的經驗分享“

yiyingggghttp://www.blogger.com/profile/16556544437749712569noreply@blogger.com0tag:blogger.com,1999:blog-6966960206198868165.post-81612663921556419352016-07-28T16:40:00.000+08:002016-07-28T16:41:06.262+08:00

http://adit.io/posts/2016-03-13-Logistic-Regression.html 這篇作者寫的線性回歸，涵蓋 Ng 在 Coursera 上的 ML 第三章的內容。 線性回歸是一個分類的演算法。 線性回歸說起來是還蠻簡單的: 1. 準備你的資料 2. 把資料灑到圖上 (graph) 3. 然後畫一條線 (應該會有最適合的.. 看題目是什麼...)，可以把灑在圖上的資料做個切分 這條線叫做 Dicision Boundary. --- * g (...) 也稱為 sigmoid function，我們用這個 function 來約束預測的結果，使結果只會介於 0 ~ 1，單位是百分比值，如結果是 .95 則預測結果是 95%。 * Dicision boundary 是一條可以把你的資料區分成兩塊 (也就是分類) 的線。 * 如果你需要非線性分類

yiyingggghttp://www.blogger.com/profile/16556544437749712569noreply@blogger.com0tag:blogger.com,1999:blog-6966960206198868165.post-61363314974632625852016-07-26T19:28:00.000+08:002016-07-26T19:28:24.294+08:00

tsconfig.json 是 TypeScript 編譯時看的編譯設定檔案，能幫助你指定編譯的 TypeScript 檔案，輸出目錄等工作事項，像我在使用 Atom 編輯器時，若你的資料夾裡面有 .ts 檔案，而且你也有裝 IDE 針對 TypeScript 的一些 package，他會幫你掃掃看有無 tsconfig.json，若沒有會給你提示訊息。 tsconfig.json，這個檔案完全允許空白，預設情況下，專案下的根目錄，以及子目錄下的 ts 都會被編譯。 允許空白不代表不可以沒有這個檔案哦! 會得到這個 error: (這裡使用 npm typescript 的 command-line compiler) $ tsc error TS6053: File 'tsconfig.json' not found. 你可以自己建立 tsconfig.json 或是透過&

yiyingggghttp://www.blogger.com/profile/16556544437749712569noreply@blogger.com0tag:blogger.com,1999:blog-6966960206198868165.post-29578945752675259042016-07-25T23:36:00.001+08:002016-07-28T15:23:47.212+08:00

TypeScript 是一個 JavaScript 型別化的超集 (“typed superset”)，講『超集』兩字，要是沒有 google 我自己也都無法理解...，這裡有百度的解釋，若用那個網址的解釋圖來理解第一句話，大概是這個樣子: (BTW 我真的很認真在校正這一段，如果有畫錯請告訴我 QQ，我個人以前念書的時候就很沒自信看什麼子集, 超集...) 換句話說，TypeScript 可以用的東西，JavaScript 不一定會有，但 JavaScript 可以用的，TypeScript 也可以用。另外 TypeScript 也... : (以目前到 1.8的版本來說) 支援最新的 ECMAScript 標準. 可以把 TypeScript 轉換為 ES3, ES5, ES6, 也可以 Enables experimental support for ES7

yiyingggghttp://www.blogger.com/profile/16556544437749712569noreply@blogger.com0