Get an Array of Element Contents in jQuery

Posted on: 9月 11 2014
By: Dylan Chang
With: Comments

DOM

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>

Normal Solution

var items = [];
$('li').each(function(){
    items.push( $(this).text() );
});
items.join(); // "item1,item2,item3,item4"

Advanced Solution

var items = $('li').map(function(){
    return $(this).text();
}).get();
items.join(); // "item1,item2,item3,item4"

如果不使用 jQuery 改用原生寫法，需使用支援 ECMAScript 5.1 的瀏覽器 ( browser compatibility )

Performance

還沒仔細研究 jQuery 實作 map() 的方式，不過稍微測一下 performance 其實兩者差不多

Capturing the Command Output in PHP exec()

Posted on: 9月 10 2014
By: Dylan Chang
With: Comments

在 PHP 中執行外部程式可使用 exec()，
如果要將執行的回傳結果儲存下來，可加入第二個參數存值。
如 exec( "{command}", $output )

但有時候 $output 只有空值，查了些資料後得到如下結論：

第二個參數 $output 只會抓 STDOUT 的內容
如果回傳結果是 error messages，則會是屬於 STDERR，因此 $output 抓不到
在 command 後加上 2>&1 可將 STDERR 轉成 STDOUT

Ref.

CSS Selector's Specificity

Posted on: 8月 8 2014
By: Dylan Chang
With: Comments

一直以來都沒有詳細去研究它，因為自己的專案都會用自己知道的規則和邏輯去設計，
通常只會用 ID attributes 和 non-ID attributes，所以詳細的計算規則沒那麼重要。

不過因為公司的專案是很多人一起合作的，每個人的寫法和習慣不同，
（有人習慣 selector 寫一長串，也有人寫很精簡）
加上今天同事問了這個問題，所以還是整理一下計算的規則。

計分規則

以 W3C 的標準套用方便自己記憶的方式，規則如下：

優先權積分為四位數 abcd
- MSB 代表優先權最高，LSB 代表優先權最低
- a 為 inline style，如 <p style="color:red">
- b 為 ID attributes，如 <p id="test">
- c 為非 ID 的 attributes，如 <p class="test"> 或 <p rel="new">
- d 為 element name (即 tag name)，如 <p>
- 以上在 select 中每多一種就在該位數加 1 分，最後直接比較四位數大小即其優先權順序

舉例

p#test
- b = 1 (#test)
- d = 1 (p)
- 積分為 0101
div#menu ul.main li[rel=current] + span
- b = 1 (#menu)
- c = 2 (.main & [rel=current])
- d = 4 (div & ul & li & span)
- 積分為 0124

Ref. http://www.w3.org/TR/CSS2/cascade.html#specificity

Sublime Text 2 SFTP encoding error

Posted on: 7月 28 2014
By: Dylan Chang
With: Comments

最近換了開發環境，終於從死守了很久的 XP 換到 Windows 8.1 了，
很納悶的是不知為何換環境後 Sublime Text 2 的 SFTP 一直無法正確運作，
Validating remote folder 時一直會跳出 encoding error 的訊息。

起初一直以為是 server 設定的問題，但測試了三台不同環境的機器都一樣有這個狀況，
搞了一個多小時才找到原因出在什麼地方…

Solution

Win 7 / 8 / 8.1 的使用者目錄如果是中文，如 C:/Users/中文，則有可能會遇到這個狀況，
後來新建了一個使用者帳戶名稱是全英文的，就解決了。

關於服貿網摘

Posted on: 4月 20 2014
By: Dylan Chang
With: Comments

服貿網摘：http://fumao.digest.cc

太陽花學運318發動以來已創下了台灣歷史上許多新紀錄，其中包括驚人的網路動員與快速的資訊流通。在410光榮退場畫下逗號的同時，有很多人希望能將這歷史上重要的一章保留下來，例如中研院便積極地保留議場內外的標語、宣言、畫作等創作文物，作為未來回顧歷史的重要史料。

我們都知道，PTT的文章沒有被板主「m文」予以保留的話，將會隨著時間的流逝，在未來的數個月後被系統自動清除。身為網路世代的一分子，經歷了這次學運在網路上的另一個戰場，當然希望這些重要的文章也能夠保留下來，於是我製作了「服貿網摘」，收錄本次事件在批踢踢兩個重要的看板（八卦板、服貿板）以及其他網路媒體、社群網站上的重要文章。

當時在板上不斷被貼出的現場最新情況，以及許多一一被揭露出的政府奧步，或是大家對服貿議題的討論與辯證，許多文章不斷被推著「幫高調」、「中肯」等推文，最後卻逐漸被淹沒在文章海中成了過眼雲煙，這是非常可惜的一件事。而「服貿網摘」還有另一個功能，每篇文章都能歸類到相關的分類中，未來要檢視時只需直接瀏覽該分類，即可查看所有性質相同的高度關注文章。

我花了一週的時間將317開始板上所有推文數高的文章都看過一遍，並將有價值的文章挑出來各自分類：

「打臉文」把所有臉已經腫到像神豬的文章都列出來，一次看完全部真的很過癮！
「苦中作樂」則蒐集了這次學運發展過程中，鄉民無限的創意與令人發噱的時事變化。
「可恥的奧步」將所有政府或統媒的卑劣手段都彙整在一起，看過這些內容你還能不氣憤嗎？
「各界聲援」將所有知名人士與專家學者站出來聲援太陽花的紀錄整理出來，這麼多有名望的人相挺，難道太陽花的正當性還不夠高嗎？
「全民運動」將不分行業支持這次運動的行為一一保存，台灣人這次這麼團結，政府的所作所為真的完全沒錯嗎？
「遍地開花」彙整世界各地的支持聲浪，這麼多旅外同胞都勇敢站出來發聲了，馬政府還是一意孤行嗎？

還有其他類別，就等各位一一去查看了。文章數量非常多，未來網站會加上搜尋功能，如果您有發現有價值但沒被收錄的文章，歡迎各位自行新增！
（註：文章列表最上方可以選擇排序方式，方便直接以各種指標閱讀文章）

Samsung Galaxy S2 刷機流程

Posted on: 3月 12 2014
By: Dylan Chang
With: Comments

自從去年七月手機從 2.3.5 升級到 4.1.2 之後就一直覺得越來越不順暢，用越久感覺越卡越頓。且中華電信客製版也裝了一堆用不到的 apps，導致 S2 少少的 2G app 空間一直爆滿，索性就在網路上查了些資料大膽進行刷機…
（目前刷了 CeleriterRom 2.7，即 Android 4.4 KitKat，順暢使用中）

S2 刷機流程

此流程適用於 從未刷機過第一次想嘗試刷機 的 S2 使用者

刷之前有先把 app 空間從 2G 改成 6G，如果單純只是想安裝其他 ROM 的話可以直接從第 3 步驟開始：（第 1 步驟只是個人備份時的小筆記，可忽略）

備份
- 快速備份 LINE 所有紀錄：http://mobileai.net/2013/10/27/line-backup-and-restore-without-root/
- 備份檔案：
  - /GT-I9100/Phone/LINE_Backup (上面那種方法失敗時的備案)
  - /GT-I9100/Phone/DCIM/Camera
  - /GT-I9100/Phone/cwmoney/backup/cwmoney_ex_db_20140310.sdb
  - /GT-I9100/Phone/Music
  - /GT-I9100/Phone/Pictures/Screenshots
  - /GT-I9100/Phone/data/com.anod.calendar/backup
先修改分割區將 2G 安裝限制改為 6G
- 修改分割區參考：http://rezxx.blogspot.tw/2014/01/s2-1.html
- 下載 32G 版本分割區 6G 的 pit：http://apk.tw/forum.php?mod=viewthread&tid=313933&page=2#pid5083891
- 下載原廠 ROM 參考：http://gphonefans.net/thread-158029-1-1.html
- 下載 Odin 參考：Google “Odin 1.85” 第一個連結即是
下載 CWM Recovery
- 文章內有下載點：http://galaxys2root.com/cwmtwrp-recovery/
下載 CeleriterRom (4.4 KitKat)
- 文章內有下載點：http://forum.xda-developers.com/galaxy-s2/development-derivatives/rom-celeriterrom-v2-2-t2560574
將上面兩個步驟的檔案都放到 SDCard 中，先雙 wipe
進原廠 recovery(3e) 用臨時 CWM 安裝支援 4.4 的 CWM（v6 以上），再用裝好的 CWM 刷 CeleriterRom，最後再雙 wipe 並恢復原廠
- 臨時 CWM 參考：http://apk.tw/thread-211866-1-1.html
- 安裝支援 4.4 的 CWM 參考：http://galaxys2root.com/galaxy-s2-roms/how-to-install-android-4-4-kitkat-rom-on-galaxy-s2-gt-i9100sgh-i777/
- 刷 CeleriterRom 參考：http://rezxx.blogspot.tw/2014/01/s2-2-kitkat-rom.html
- 刷機標準流程參考：http://dacota.pixnet.net/blog/post/29127048

解決 Chrome 狀態列消失 - 擴充功能 DStatusBar

Posted on: 3月 9 2014
By: Dylan Chang
With: Comments

前陣子我的 Google Chrome 在更新之後狀態列就莫名消失了，對我來說平常上網時能隨時 preview 有瀏覽意圖的連結的 URL 是非常重要的功能，因此狀態列消失著實造成了一點困擾。

查了一下發現這個狀況似乎是個已知的問題，但網路上的解法^[1][2][3]在我的電腦上都沒辦法成功讓狀態列恢復，後來乾脆直接寫了一個 extention 來顯示 link href。

Source Code

https://github.com/dylango/DStatusBar

Download crx File

https://github.com/dylango/DStatusBar/blob/master/DStatusBar.crx?raw=true

Screenshot

DStatusBar Screenshot

Known Issues

hover target 的 tagName 非 A 時不會顯示（例如 <a href="..."><img src="..."></a>，即 <a> 裡還有包其他 tag），有空再來修

CSS3 帥啊老皮

Posted on: 12月 7 2013
By: Dylan Chang
With: Comments

無聊來練習一下 Sass & Compass，也是第一次用 CSS3 來畫圖。先挑了張比較單純的圖案來試試，探險活寶（Adventure Time）的老皮，大部分都是用 border-radius，只有小地方用到 rotate 和 scale，其餘沒什麼特殊技巧…

See the Pen Jake in CSS3 by Dylan Chang (@dylango) on CodePen

Original

CSS3 (Chrome)

CSS3 (Firefox)

CSS3 (IE9)

CSS3 (IE8)

CSS3 (IE8) XD

CSS3 學習筆記

Posted on: 11月 4 2013
By: Dylan Chang
With: Comments

Prefix

IE: -ms
Firefox: -moz-
Chrome: -webkit-
Safari: -webkit-
Opara: -o-

顏色

rgb(<red>, <green>, <blue>)
hsl(<hue>, <saturation>, <lightness>)
- hue：色調，表示色盤角度
- saturation：飽和度，100% 表示最高
- lightness：亮度，0% 最暗，100% 最亮，50% 為 normal
rgba(<red>, <green>, <blue>, <alpha>)
- alpha：透明度，0 完全透明，1 完全不透明
hsla(<hue>, <saturation>, <lightness>, <alpha>)

圓角

border-radius: <value>
- 1 個值：四個角
- 2 個值：左上右下、右上左下
- 4 個值：左上、右上、右下、左下

陰影

box-shadow: <水平位移> <垂直位移> <模糊半徑>[ <擴散距離>] <顏色>[ inset]
text-shadow: <水平位移> <垂直位移>[ <模糊半徑>]
可設定多組，以 , 分隔

漸層

linear-gradient([<orientation>, ]<color>, ...)
- orientation：預設以垂直方向呈現，設定特定角度可改變方向，如 45deg
- color：可設中斷點，多加一組 px 單位或百分比的數值即可，如 #CCC 20%
radial-gradient(<color>, ...)
(tool)

多重背景

以 , 分隔多組設定即可

Selector

:first-child：第一個元件
:last-child：最後一個元件
:only-child：自己是唯一子元件的元件
:target：目前 URL 的 hash 指向的元件
:checked：目前勾選的 checkbox
:nth-child(x)
- x = 1：即 :first-child
- x = 2n 或 x = even：即偶數項元件
- x = 2n+1 或 x = odd：即奇數項元件
- x = 3n：即 3 的倍數項元件
- nth-last-child(x)：反向操作，從底部算回來
direct descendant：>
negation：:not(<selector>)

轉換

transition: <duration> <CSS property>[ <time-function>][ <delay>]
- duration：單位為 s 或 ms
- time-function：linear、ease-in、ease-out、ease-in-out，或用 cubic-bezier() (tool)
- 可設定多組，以 , 分隔

Box Sizing

box-sizing: border-box | content-box
- context-box：預設值，先算出 block 寬度再加上 margin、padding 及 border
- border-box：反之

變形

trasform: <transform-function>
- rotate(x)：以參考點為中心軸 2D 旋轉 x 度
- skewX(x)：以參考點為中心軸沿著橫向傾斜 x 度
- skewY(x)：以參考點為中心軸沿著縱向傾斜 x 度
- skew(x,y)：以參考點為中心軸沿著橫向傾斜 z 度、縱向傾斜 y 度
- scaleX(x)：由參考點橫向縮放 x 倍
- scaleY(x)：由參考點縱向縮放 x 倍
- scale(x,y)：由參考點 2D 橫向縮放 x 倍、縱向縮放 y 倍
- translateX(x)：由參考點橫向移動 x 距離
- translateY(x)：由參考點縱向移動 x 距離
- translate(x,y)：由參考點 2D 橫向移動 x 距離、縱向移動 y 距離
- matrix(a,b,c,d,e,f)：transformation matrix (tool)
- 角度單位：deg、rad、grad
- 可設定多組，以空白分隔

Flexible Box Model

display: box; 可使子元件水平排列（如傳統使用 float 效果），子元件預設會延展成父元件大小，若要控制子元件大小需設定其 box-flex
box-flex: 0; 元件不會延展，設為 1 或大於 1 則會延展至填滿可用空間為止（亦可藉此設定比例）

字型

@font-face {
	font-family: myFont;
	src: url('font.ttf');
}

JavaScript Patterns 閱讀筆記 (8) DOM and Browser Patterns

Posted on: 10月 28 2013
By: Dylan Chang
With: Comments

前面的章節皆在探討 JavaScript 核心，與執行環境無關；本篇則著重於 browser 上的相關 pattern。

Separation of Concerns

Concerns 有三：
1. Context：文件內容，即 HTML
2. Presentation：外觀表現，即 CSS
3. Behavior：使用者互動或文件動態改變，即 JavaScript
當關閉 CSS 或 JavaScript 時，應確保頁面仍可正常閱讀，且主要功能仍可正常運作
避免將 CSS 或 JavaScript 內嵌在 context 中
應直接檢測明確的 method 或 property，避免使用 user agent sniffing

DOM Scripting

避免在 loop 中存取 DOM，應 assign 其 reference 給 local variable
盡量使用 selector API（如 document.querySelector() 或 document.querySelectorAll()），而 id="" 是尋找節點最快的方式（document.getElementById()）
更新 DOM 會使 browser 進行 repain（重新繪製畫面）及 reflow（重新計算元素的幾何結構），因此應在 “live” DOM tree 之外進行操作（如：新增時先用 document fragment 容納所有節點，待一連串的動作完成後再將這個已定案的 fragment 加至 DOM；修改時則可先在 clone 中處理，完成後再替換原本的節點）

Events

使用 addEventListener()/attachEvent() 時，適時加上 stopPropagation()/cancelBubble=true 及 preventDefault()/returnValue=false
利用 event delegation 減少 event listeners 的總量（如 div 內有十個 button，可在 div 上加一個 listener 就好而不是在每一個 button 都加）

Long-Running Scripts

JavaScript 中雖沒有 thread，但可藉由 setTimeOut() 模擬，或使用較新的 browser 所支援的 Web Workers，以避免因 lag 而使 user 不能操作畫面

Remote Scripting

XMLHttpRequest (AJAX)
JSONP (for cross-domain)
iframe
image beacon（只需送 request 不需接 response 時可用，response 傳 HTTP 204 為佳）

Deploying JavaScript

合併 scripts 以減少 HTTP request，可用 cat 命令操作
使用 minify 工具壓縮，縮小檔案大小
開啟 gzip 壓縮，增快載入速度

.htaccess

1	AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/javascript application/json

使用 Expires header，增加檔案待在 cache 的機會

.htaccess

1 2	ExpiresActive On ExpiresByType application/x-javascript "access plus 10 years"

使用 CDN，讓各地 user 可更快速存取檔案

Loading Strategies

<script> 的 attribute 不要加上 language 或 type 等歷史遺跡，可加 defer 或 HTML5 的 async 使其不會 block 網頁的下載流程（browser 會同時下載多個檔案，但遇到外部 script 會暫停下一步下載直到該 script 完成下載並分析與執行完畢）；async 尚未廣泛支援，因此可將外部 script 放置頁面底端（</body> 前），或動態加入 <script> 元素實現 asyncronous 下載（document.createElement("script")），後者需注意各 script 檔之間的相依性（因各檔案下載完成的時機未必如同預期順序）
當頁面需在 server-side 進行複雜運算時，可使用 chunked encoding 分批傳送頁面片段，利用 server 尚未完成工作時先將部分靜態內容送給 client-side

Strategy of Loading a Big Script

lazy loading：先載入 core 使主要功能開始運作，再用 onload 動態加 <script> 載入其他次要功能（如特效、XHR 實作等）
loading on demand：需要時才載入，並在完成後執行 callback

require("extra.js", function () {
		functionDefinedInExtraJS();
});
function require(file, callback) {
		var script = document.getElementsByTagName('script')[0],
		newjs = document.createElement('script');
		// IE
		newjs.onreadystatechange = function () {
				if (newjs.readyState === 'loaded' || newjs.readyState === 'complete') {
						newjs.onreadystatechange = null;
						callback();
				}
		};
		// others
		newjs.onload = function () {
				callback();
		};
		newjs.src = file;
		script.parentNode.insertBefore(newjs, script);
}

preloading：若希望單純只下載 script 檔案而不進行分析及執行，IE 可用 image beacon，其他 browser 可用 <object> 替代 <script>