2016年10月19日 星期三

更新 macOS Sierra 之後 compass 指令不見

昨天更新 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 rootless mode #2018。祝你也順利 :)

2016年10月17日 星期一

[工作筆記] git filemode 設定,避免檔案權限不同而進 git status

最近工作常常在 windows 跟 Mac, Linux 上切換來切換去,發現在 Mac 掛磁碟機近來的 Repo 莫名其妙都進 git status 變成需要 diff 的檔案,明明也沒修改什麼,也有可能是因為用 afp 掛進來的,然後我也完全忘記有檔案權限這件事情,還好同事英明,快速指出原因。

要讓 git 忽略這個問題,只要設定 git 的 filemode 就行:

git config core.fileMode false

若想要設定成全域,加上 --global 就可以。

參考:

2016年10月16日 星期日

Chrome 開發人員工具 console 的一些快速選擇的用法

開發工具一直都是前端人員的求生工具之一,相信大家在使用瀏覽器 Debug 時通常也都會開啟 F12 的開發人員工具,最近我從書上學到一些快速 & 覺得實用的 selector (也許是老掉牙的知識了?!),紀錄一下:


(1) $0 選取目前被鎖定的元素
假如你已經在頁面上選擇某個元素了,那可以直接利用 $0 去選擇到你選到的 DOM。另外若你有載入 jQuery 的話,就可以直接利用 $($0) (或是 jQuery($0))去操作它。

其實 $( ) 代表的是 document.getElementById,但如果你裝的 library 也有 $( ) 這個 function,就會被你裝的 library 給取代。不過還好用 jQuery 感覺是沒差。

利用選取工具,去選擇你要的 DOM。

直接使用 $0:

而且 chrome 會記錄歷程,假設你選取過四個不同的 element,可以利用 $0, $1, $2, $3,而 $0 是拿最近一次選取的元素,最多,記錄到 $4 這樣。

如果是想要用 CSS 選取元素,可以用 $$(),相當於 document.querySelectAll()。比方說取得所有的 img,可以用 $$(img)




(2) $x('XPATH') 使用 XPath 選到符合的元素
使用 $x() 這個函示可以直接把 XPath 的值當作 selector,首先你可以在選取的 selector 按下右鍵,複製 XPath,或是你知道規則,也就不需要複製。


接著利用 $x( ) 將 XPath 當作 selector 進行 Query:


(3) $0 拿最近一次計算的值的結果




除了這些還有 clear() 可以清除 console 的內容。
dir({key: value}),dir ( ) 函示可以放入一個 object,會以可以展開的形式呈現。
table(object),以 table 的形式列出資料,這個功能我超愛,看起來很有新鮮感 :

Firefox 也有哦


若你有興趣知道更多,其實官方文件都有,建議可以去看看 :) 會有挖到寶的感覺

2016年10月14日 星期五

轉址 301 與 302 的不同

剛開始在買這個 domain 的時候,其實 winwu.cc 以及 www.winwu.cc 都可以連到,問題是我希望搜尋引擎以 www.winwu.cc 為主要的網址,那麼,沒有 www 這個 domain 或是利用其他 domain 時,我要把 user 導到 www.winwu.cc,這時候要選擇哪一種轉址呢?!


2016年10月13日 星期四

Compass 編譯的 Warning: DEPRECATION WARNING on line ..._deprecated-support.scss:

在跑 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 use the sass-convert command to automatically fix most cases.

然後我找到了一個 github 上 issue 的解法,請尋找 mrpatricko 的回答,方法是要我們去修改你的那隻 _deorecated-support.scss,第 87 行,當然你也要對照一下是不是那一行,然後把那幾行利用雙引號刮起來,原本的單引號再變成雙引號。

建議是先備份一支起來,再做修改,以免改錯,不知如何還原.. 。改這種 source 我總覺得怕怕的,但很成功的 warning 被趕走了 :)

結論: 不過就是要改一行 scss 而已,花了好久把環境備好..

2016年10月8日 星期六

九月份


今年的九月份說起來也蠻忙的,我在 Women Who Code Taipei  講了四次的基礎前端講座,若您有興趣也可以看看這些投影片,但是精華部分比較少,這四次的上課走法講求希望讓來參與課程的同學可以實作,所以投影片內容都不多,上課時話比較多。有些投影片若內容不完整,我也是透過口頭說明,可能是剛好有一兩週比較忙 QQ

第一週
第二週
第三週
第四週


您也可以持續關注 Women Who Code Taipei 的活動,http://www.meetup.com/Women-Who-Code-Taipei/events。四周短短加起來不到10小時上課時數,不過有些同學也是很認真的交作業,很不簡單 :)  當初我也有點掙扎四周可以講些什麼內容 XD

---

九月份還有另外一個比較重大的變化就是離職,我換了一家新公司,新的開始,很希望可以待上個 3 年以上。離開的那家公司有很多不捨,總而言之,雖然今年有很多不順心的事,但也只能往前看了,很久沒有經歷過這種人生低潮期,(上一次是高中時期),希望會越來越好...

Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...