2015年10月14日 星期三

PHP 進行斷字還是用 mb_ 開頭的好?! (substr v.s mb_substr)

我們常在什麼 XX 列表上,有時候因為一行文字過長,所以會有想把文字做截斷的動作,比方說 『i love you so much, do you know』,假設這段文字剛好擺進 div 時就是會過長,所以我想要把他截斷成 『i love you so much, do...』,最後還故意加了 ... 來表示。

假設這個問題只會發生在單行文字,那我會建議你用 css  的 ellipsis 解決掉,因為單行的段字做 ... 結尾用 css 蠻快的,但是發生在兩行或三行是就不能用 css 了。

這裏有一段很簡陋的程式碼,用意是每一筆 title 我都會判斷它的長度是否超過我認為的最常的可能性 (目前看起來是我希望他不要超過 39 個字),過長我就會用 substr 把它截斷,從第 0 個位子截到 39,最後補上 ... 字串:


不過很可惜這樣的做法有問題,我假設我存在資料庫的字串都是正確的字符編碼,可是經過這個 substr 截出來的字串,卻讓我得 � 奇怪的詭異符號,為什麼?!

經 google 發現原來 substr 算的是 bytes 而不是 characters,取而代之的是,如果你使用 mb_ 開頭的 function,可以額外處理 multi-byte encodings 的部分。

後來我用 mb_substr 將以上的程式碼改寫了一下: (要注意 function 的參數跟 substr 數量不太一樣)



每次在追這種怪問題都覺得心疲,但是得到解答後就覺得好多了

這個需求讓我想到以前工作的一些經驗,因為英文字跟中文字算出來的大概要擷取的數量是不一樣的,所以... 挺麻煩的。有時候 不要為了一些沒必要的堅持而堅持。

如果還有什麼不瞭解的地方可以 google substr vs mb_substr。

只是我還是不知道,到底在什麼情況下,我們會只用 substr ?


2015年10月13日 星期二

Rails Girls Weekly - JavaScript Basic For 6 Weeks(5/6)


剛剛上完了第五週的課程 jQuery 基礎,其實是真的非常基礎 :P 花了一個多小時帶一下。另外也有提到 Framework 跟 library 是不一樣的概念,如果想學 jQuery,把 css selector 弄懂很重要,如果你是初學者,可以學習以下兩個網站為開端:


http://flukeout.github.io/
https://www.codecademy.com/en/tracks/jquery

2015年10月12日 星期一

[隨筆] 用 css mask-image 做遮罩

晚上剛好幫我朋友看一個 colorbox 的問題,起初我以為只是一個改改 css  border-radius 就好的問題,沒想到弄到最後竟然去找 mask-image 的方法。

情況是他希望在 colorbox 打開時,四邊都維持某種程度的 border-radius,但是在 colorbox 的 iframe 裡面,當你 scroll 時,border-radius 就失效了,其實不是失效,而是裡面的 div 的背景色本來就存在於那個區域,所以 content 是滿的沒有錯

廢話不多說,我只能講最後我用了這個方法,他使用了 mask-image 的方式去做遮罩的概念,在 colorbox 那一個 iframe 做這層,就可以一直 mask 四邊都有 border-radius 的效果:  How to make CSS3 rounded corners hide overflow in Chrome/Opera。




改完之後不管裡面怎麼捲,都能維持外框有 border-radius 的情況:


太久沒有好好研究 css,已經退化到這種程度也真是一種悲哀。
因為 colorbox 一直都是網頁製作 popup/lightbox 當紅炸子雞的套件,所以我還是記一下,以防以後有需要用到又忘了。

2015年10月9日 星期五

Rails Girls Weekly - JavaScript Basic For 6 Weeks(4/6)

昨天本來要發文,但是想說早上還要去參加 phpconf 2015 所以就早早睡了 :P

week4 講了基礎的 array, object 怎麼定義,還有 JSON,雖然講到 JSON 有點難了..sorry。
因為加了一小時講一點怎麼 commit 到 github,所以昨天有兩個 slide,只是最後 live demo 的時候沒有成功,不知道網路還是 github 怎麼了,有點可惜就是.. 下次我還是不要嘗試做這種 live demo 的事好了 QQ

老實說簡報都很基本,但是還是要看個人的接受程度,也有有些人會覺得很難,只是有些事情,就算當下的聽眾不能接受,我還是必須說一下,主要是因為這些都是"定義",該描述出來的事情還是得說一下...。

2015年10月7日 星期三

git 反悔 commit,想要 rollback 恢復回到上一次的 commit

最近在工作上偶爾需要這個功能...,就是一直去 merge 別人的 branch,結果上一次 merge 的結果是有問題的,就會想要還原之前的版本,模擬的情境像這樣 (圖中的 SHA1 都是假造):

假設我有一個 branch 叫 winwu,這是我每次 commit 倒數幾個的歷程:



由於最後一次 commit (紅色那顆 ew3354) 其實是有問題的,所以我希望退回到 2Tefw88 那個 commit:



指令是:
git reset --hard 2Tefw88
git push origin winwu --force

簡化的表達方式是:
1. 首先 reset -hard 先“強制”回到某次 commit
git reset --hard 要 Rollback 的 commit SHA1
(有 --hard 也有 --soft,用法我沒有提到,可以自己去查查看 :P)

2. 接著重新 push 到你想要 push 的 branch,記住一定要有 force,否則 commit 不上去哦...
git push origin BRANCH 名稱 --force


參考文章:
Git 版本控制:利用 git reset 恢復檔案、暫存狀態、commit 訊息 - appleboy
http://stackoverflow.com/questions/927358/how-do-you-undo-the-last-commit
http://git-scm.com/docs/git-reset


2015年10月6日 星期二

2015 南投集集亂走亂逛兩天一夜


這個週末因為朋友要去南投參加衝小鎮的活動,所以身為他的朋友跟朋友們也都一起跟去了 (講義氣 XD),不過沒有特別安排什麼行程,就只是當做出門踏青,隨意走走而已。

交通
去程:  (高鐵)臺北->台中新烏日(700多),然後從新烏日搭電車到二水,再直接換月台轉搭到集集的區間車。時間要對準,因為二水到集集的區間車沒有很多,如果錯過一班,可能下一班要 1-2 小時才有。

回程: 區間車從集集到二水,再從二水搭自強回台北 (487元)。

Rails Girls Weekly - JavaScript Basic For 6 Weeks(3/6)

PPT


本來今天的課程是上週的,只是剛好遇到颱風,所以延到今天:P
week3 講的是基本的 event 跟 function
其實真的要細講,都不是一兩小時能帶過的,如果大家覺得這份簡報,有什麼很基礎而我沒有提到的部分,也歡迎讓我知道,這樣有朝一日還要分享基礎 javascript 才有機會改進呀 !

謝謝來上課的朋友們,如果有什麼做不好的地方,直接反應吧! :)

2015年9月30日 星期三

Laravel 在 Eloquent alias table 名稱

在 Laravel 撈資料的時候發現有時候 Eloquent 很不好組,尤其是有 sub query 的時候....,後來用了 DB 的方式去做 Query:
$query = DB::table('xxx_xxxx AS a')
     ->where(
         'a.GG',   '=',
         DB::raw(
            '(select max(GG) from xxx_xxxx as b where xxx_xxxx.`no` = b.no)'
         )
)

但我後來發現原來 alisa 在 Eloquent 有方法耶...
在 Eloquent 使用 Alias,只需要使用 from 的這 static method,比方說上面那一句可以改成下面這一句,後面的 where 幾乎是沿用就可以了。

$query = XXXXXXX::from('xxx_xxxx as a')
$query-> where(
'xxx_xxxx.GG,  '=',
DB::raw(
'(select max(GG) from xxx_xxxx as b where xxx_xxxx.`no` = b.no)'
)
);
堅持要用 Eloquent 的原因是,之前改了一些 getter/setter (accessors and mutators),如果今天用 DB:: 的方式去撈資料,我改寫的 getter 好像就沒有作用了,哭...,還好後來還是有找到方法,硬是全用 Eloquent 的方法取資料。




2015年9月23日 星期三

關於買樣板來製作網頁這一件事情

穎(@look_me08)張貼的相片 於 張貼

(因為不放圖顯得很空洞,所以放一張今天晚上在左道咖啡的照片)

今天買了一套 Admin 介面的樣板,我想起這件事情,還滿值得研究研究談一下想法。事實上我很常買樣板,甚至有些我根本也沒有用到,不過買回去第一件事情,想想別人為什麼可以做樣板做到可以拿來賣錢,一定有它方便於我的地方。

首先,完整性不用講,常常我們腦袋裡想的天馬行空,後台想要多牛B就多牛B,但就是不想動!? 對吧,於是幻想就停留在那一刻,然後刻出來的東西照樣平庸。

接下來是樣板有時候是『學習的樣本』,你可以買到用 Angular 製作的樣板,bootstrap 一樣,很多很多,你可以透過套過樣板知道別人怎麼把這一堆前端的 library, plugins 『兜』在一起,就算手法不是很高明,但也是一種解決方案,千萬不要覺得這些事情很簡單... 前端是很苦工的...。

可以學但不要照單全收,有些樣板不一定是很有組織的程式碼,這樣也是挺合理的... 因為畢竟他可能只是在 demo 某一件事情,通常你買來可能還需要再整理過。

再來是學習使用現有的樣板套用在自己的系統上,不論你的 template engine 是什麼,趁機組織一下頁面可以共用的地方,分出哪些是東西是 layout, partial, widget, 或是 bla~bla~bla~,有助於一點點習慣程式喜歡『re use』的概念。


當然也有人會認為,買樣板沒有樂趣,很有可能撞板或是什麼的... ,我個人是覺得只限於後台或是內部系統會買。前台的話,我還是喜歡有設計過的網頁 :P

只是想起,有一次在做手機版網站,當時還菜,一直不懂為什麼手機上看我的網站,那顆 menu 的按鈕按下去之後,感應很緩慢,不知道有 fastclick 可以幫我解決手機上 click delay 的問題,這點,從樣板學來,所以我知道了有這個工具。

第二個經驗是,樣板使用的 plugin 有時候會讓我驚訝,『原來有這種工具!』的心情。

前端是一個做久了有時候會很沉悶的工作,但偶爾發現一些驚喜,內心還是會很澎湃的,也許有這樣的心情的時候,才發現自己已經是個有點懶散的老鳥了...,因為懶,所以我寧可刷個幾百塊錢買樣板,企圖得到一個系統看起來很完整,能 work,眼睛順眼的結果。


2015年9月22日 星期二

Rails Girls Weekly - JavaScript Basic For 6 Weeks(2/6)

(圖源: Railsgirls Taiwan 粉絲頁)

這週是 week2,講的內容是關於 JavaScript 的 dialogs box,還有一些條件判斷。

上課是還蠻輕鬆愉快的啦,希望大家都堅持的下去,可以一路上到 week6 :)

其實可以的話,看 readme 比較清楚。
github repo: https://github.com/winwu/javascript-basic-toturial/blob/master/week2/README.md


PPT:


『在 PHP 上學會自動化測試與實戰 TDD』 ... 下課後


前言
我自己剛開始在使用 phpunit 遇到的一些問題: (嚴格來說也不能說奇怪... 要說自己涉世未深..)
1. 效能問題 (越跑越慢, 甚至慢的奇怪).
2. Database 沒有設定好,設定錯誤導致應該要以 SQLite 而不小心跑成 MySQL.
3. 類別的 Mock 不會寫.
4. tearDown 的地方有時候會忘記.
5. 測試碼太多支時,會有點不知道怎麼組織
6. 會丟 Exception 的 function 不知道怎麼測,又不希望被標成 risky tests (phpunit 如果發現你的  測試 function 根本沒有 assert 時會出現的訊息)
7. 知道的 assert 太少 (雖然這完全是沒唸書的關係...)


上週末,去上了兩天小鐵(大澤木小鐵)的 TDD 課程,更了解 TDD 的連續兩天 workshop,算是非常有收獲,尤其七,八月以來,工作上的團隊開發也漸漸開始使用 TDD 開發,雖然很不熟練,用法用的亂七八糟,但是也是因為有過這些錯的經驗的接觸之後,來上課才更能瞭解什麼是 better way,我還蠻喜歡這種感覺的,就是我不喜歡從0開始,然後一直讓別人來教我什麼是好的, 什麼是對的,這樣的感受太不夠深刻了 :P 不犯錯的學習只會讓我覺得這件事情好像不難?! 然後挑戰性就失去了...


第一天講單元測試, unit test 算是很小的單元,一次只做一件事情的測法,這個算是剛學習測試最好上手 and 理解的。再來一些原則,像是 3A ... 還有教到一些重構,因為寫測試的時候,難免會邊重構, 邊寫測試,所以學測試,跟重構也有一點關係。(我也想起自從開始學 TDD 之後,也會開始對重構很有興趣,這真的是不知道為什麼 XD) 因為這堂課的關係,我才發現 phpstorm 好棒啊! 這些 refactor 的功能 sublime 都沒有.. 雖然有些殘念,不過接下來可以在專案重構時,也趁機學學使用 phpstorm。

(圖: 主辦單位準備的點心,這紅茶綠茶讓人想到測試就是紅燈, 綠燈不斷循環阿... 但記得最後 commit 上去要綠燈就是了~)

另外 phpunit 產出 coverage 報表非常的不錯,看到程式碼開始有一點覆蓋率之後,感覺就像是有在上班啊 (誤)

第二天著重在 BDD,只能說 BDD 非常有趣,大概是因為感覺很像照著 spec 來寫測試,那些腳本寫起來,雖然很抽象...,但是我竟然是在用程式語言寫一個 spec 的感覺,很神奇+詭異,測試工具真的是什麼怪功能都有 @@ ~ 只是剛開始寫,覺得不太順暢,還需要多練習就是了...尤其 Example 用 Laravel 來講解,又更貼近於我的日常了 :P ,心得是: 相較於 TDD,我覺得團隊要導入 BDD 比 TDD 還難...,只是『感覺』,說不上很特別的理由,大概是因為 spec 本身就很難有(存在),就算有也會變動,如果今天的需求是改 spec,那麼 BDD 要改,程式改了,TDD 也要改,一個測流程,一個測功能跟程式,超 high 的 XD 感覺 commit 會很多~

在專案上的導入測試這件事情來說,我反而覺得是誰先來開始帶起這個風氣比較重要。

回家 TODO :
* 學習使用 mockery 去 Mock 物件
* behat (BDD)
* 等 91 哥開下一梯 TDD 的課程 :)

為什麼要上 TDD 實戰,跟上面的前言7點有很大的關係,因為有些情況不知道自己做得對不對,有些內心還沒有解法,所以想要更了解多一點,這樣比較扎實 :D 這兩天真的很有回饋感 XD 感謝主辦單位,也謝謝小鐵 ~

2015年9月15日 星期二

Rails Girls Weekly - JavaScript Basic For 6 Weeks(1/6)

今天去五倍紅寶石講一場 JavaScript 基礎,因為這個課程分六週上,所以今天只是第一週,投影片在此。只希望來的人都有收穫,不要充滿挫折。。。 下班還願意學習的人真的不容易 :) 辛苦了!  

下週二一樣有 week2,到時候再分享新的文章。


Coursera 機器學習基石 第二講:Learning to Answer Yes/No [二元分類] 筆記 (很亂,不要看 ><)

這兩天看的是第二講。

我可能還要再找週末時間整理吧(預計中秋連假...)
(目前在尋找好編輯數學公式的工具...)。

奧.. 我非常累,先睡
事情已經多到我覺得是我的極限了。


2015年9月13日 星期日

Coursera 機器學習基石 第一講: The Learning Problem 筆記

請大家忽略這篇吧...
這是記錄給我自己看的,筆記很亂,只有我自己看得懂 :P
林軒田老師的課真的很不錯,就以介紹 hypothesis 那一段來說,比 Ng 的課好理解些,或許語言真的有差吧...,雖然 Ng 的課有翻譯,可是還是有些吃力啊...

week1 講 Learning Problem,光是把影片看完,消化一下,筆記一下,大約 2-3hr 吧...
說實在還真的沒什麼把握有能力 pass 這堂課耶,程度落差大...
然後我真的睏了,沒什麼力氣整理筆記,這也是順手拿起來的紙張寫一寫...
(字醜得比國小生還醜..)


2015年9月10日 星期四

『機器學習駭客秘笈』 讀書心得 (上)


書目: 機器學習駭客秘笈
Machine Learning for Hackers - Case Studies and Algorithms to Get You Started
作者: Drew Conway, John Myles White
譯者:林威仰
出版社:歐萊禮

我一直在猶豫我到底要不要寫這篇心得,因為我到底能寫出什麼有幫助的事情我也不知道?!不過看看就好... 希望沒有浪費讀者太多時間。

關於你要看這本書的話,有幾個建議:
*這本書的範例是用 R 語言來解說,所以,比較優良的情況是,你有學過基本的 R 應該會更上手,不過也不用太擔心,第一章節會介紹 R 的安裝跟一些基本概念。
*這本書介紹了幾個常見的 Machine Learning 的方法,像是分類, 回歸, 資料分群, 最佳化。


## 前言
* 『機器學習是什麼? 抽象來說,是一系列的工具與方法,協助我們從各種記錄或資料中,萃取出其模式規則甚至是隱含其中的深層資訊。』- 第一頁。
* 這本書雖然用了『駭客』兩字,但不是我們心中所認為的那種駭客,而是指喜歡學習新技術,並且用來解決問題的人。
* 機器學習涉及到非常多領域,基礎理論是數學跟統計學 (當然還有其他的啦 XD)。
* 機器學習包含許多的理論,初學者如果想要看這本書,最好可以對一些基礎的理論有所涉略。
* 『動手實做才是機器學習的圭臬』 - p.1 前言
* 機器學習有兩種方式,一個是『監督式學習』,另一個是『非監督式學習』。書中的第三章, 第四章,都是監督式學習。


## 第一章 使用 R 語言
*『統計學探討如何從解讀資料中的資訊』 - p.1
*『機器學習則是要將資料轉換為有意義的事務』- p.1
* 機器學習處理的問題不外乎兩個型態,分類問題跟回歸問題。
* R 的缺點是無法處理極大量的資料,如果你只是為了驗證幾個簡單的概念,使用 R 蠻適合的,但是目標如果是建立企業級的資料分析系統,R 就不會是最好選擇,像是 google 或是 facebook 都用 R  來做實驗性的機器學習演算法,但是真的要實戰,是會把演算法移到像 C 語言來實做之類的。


## 第二章 資料探索
(我個人覺得整理資料最難..)
這章對我來說其實在講數學比較多,會介紹平均數, 中位數, 眾數, 分位數, 標準差, 變異數。看了很頭痛的東西 XD 好想哭,好吃力...


## 第三章 本文分類: 垃圾郵件判斷
* 二分法,也就是分類問題(classification) 是機器學習常見的方法,這本書舉例了垃圾郵件判斷,分類法最重要的一個點就是特徵擷取,比方說,你拿什麼特點來認定某封信件是否為垃圾郵件? 。在這本書會介紹如何用內文的內容,去做分類,比方說某些文字出現的機率過高,有可能是就是垃圾信件之類的。

* 本文分類演算法又稱為 『單純貝氏分類器 (Naive Bayes Classifier)』,在書中的範例,將每封信的文字分成兩類的文字,一類是可能出現在垃圾郵件的單字,另一類則否,然後算出一個大概的機率,這還會談到先驗機率 (機率為多少就可以判斷是垃圾郵件) 等等。

* 章節會有實作的 code 可以看,有實做一個貝氏垃圾分類器,另外還用到了 R 的 tm 套件,tm 套件就是 text mining,用來做本文探勘的工具,還會用到 ggplot2 畫一些圖,感受一下分類的結果,恩.. 如果你覺得這章很 hard code... 那後面的章節更 hard code (哭),但蠻有趣的,如果你跟我一樣不懂實做,那就把方法看一看。

這章的範例雖然有趣,但一般的分類問題絕對不是用一個簡單的條件就可以將條件一分為二,所以接下來來到了第四章。

## 第四章 項目排序: 優先收件匣
* 這個章節其實是延續第三章,如果我們今天把一堆郵件做分類,一類是正常的,一類是可能為垃圾郵件的,再來,我們希望針對垃圾郵件的可能性做排序...

* 為一組資料做排序,也是機器學習常見的工作,最有名的例子: 推薦系統。

* 如果你還沒看過這本書,可以先思考看看: 你打算用什麼來排序哪些信件是重要的?

* 小提示: 在解決一些機器學習的問題時,視覺化資料永遠是一個了解資料的一個不錯的方法,幫助你瞭解特徵之間的關聯性。 - 參考 p.107


第五章開始我留到下回再寫,有點累,內容有點多,後面開始講看不懂的線性回歸。


結論
* R 的話,可以去上 coursera 的課,或是 datacamp,只看第一章就想要把 R 弄熟,不可能 XD。
* 這本沒有我想像中的.. 基礎 XD 可能我不是這個領域的人吧.. 感覺看這本書在平行世界,但是學到很多方法 :)。



PS: 這本書已經賣出去了

Vue multiselect set autofocus and tinymce set autofocus

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