今天幫同事看一個奇怪的問題, XP SP3 下 Apache 一直跑不起來, 看 error.log 都是這樣的訊息：
WSASocket failed to open the inherited socket
Google 的半天, 還有這樣的絕招, 把 TCPIP 設定中『進階』下的『Wins』頁籤中『啟用 LMHOSTS』搜尋的選項取消, 就可以了。不過這一招在機器重開後就又失效, 得重新操作才能把 Apache 跑起來。再 Google 了一下, 根據以下這篇：
于老師教室討論版 • 檢視主題 - 費爾個人防火牆和Apache伺服器相衝
發現可能是因為費爾防火牆軟體的關係, 網路上可以找到許多同樣的災情回報。這軟體很邪門, 即使沒有跑起來,還是會讓 Apache 掛點, 一定要移除才行。
順手記下來, 免得日後萬一遇到又耗掉許多無謂的時間。
星期一, 3月 24, 2014
星期二, 3月 18, 2014
讓 Sublime Text 開啟 Big5 編碼的文字檔
之前嘗試使用 Sumline Text 的時候, 發現無法開啟 Big5 編碼的檔案後就做罷, 今日心血來潮找了一下, 原來早就有人寫好 package 了, 只要參考以下這邊文章安裝 Convert2UTF8 即可：
如何解決 Sublime Text 的中文亂碼？ - 海芋小站
安裝之後, 就可以正常開啟 Big5、GB、JIS 編碼的檔案了。
Windows 8.1 下更改『網路位置』
今天遇到一個莫名其妙的狀況,筆電上架好的 web server 其他電腦就是連不上去,後來才發現應該是網路位置設成『公用網路』,所以連線要求都被擋掉了,一時間居然不知道要去哪裡設定『網路位置』為『私人網路』, 查了一下才知道原來要在 Modern Style中設定。首先進入『電腦設定』畫面：
接著點選『網路』：
在『網路』頁面右側選取要設定的網路連線：
進入特定的網路連線頁面後, 只要開啟其中的『尋找裝置與內容』選項, 就會變成『私人網路』,關閉此選項就會變成『公用網路』。
這個設定讓我今天吃足苦頭, 趕快記錄下來, 省得下次又出狀況。
星期一, 3月 10, 2014
HTML5 中 window.orientation 屬性
在行動裝置的瀏覽器上, 提供有 window.orientation 屬性, 可以讓你判別裝置的擺向, 以下這篇文章透過實際的實驗, 告訴你不同裝置對於這個屬性的結果, 有照片直接對照, 非常清楚：
A misconception about window.orientation – Matthew Gifford
簡單來說, 若是 90 或是 -90, 就是橫向, 其他值 (只有可能是 180 或是 0) 就是直向。90 對大部分裝置都是指螢幕上邊轉向左邊橫擺, -90 則是螢幕上邊轉向右邊橫擺 (但有的裝置在這種情況下仍然傳回 90)。0 在大部分裝置是正常直擺, 180 則是整個反轉 (但有個裝置在這種情況下仍然傳回 0)。
要特別注意的是, 平板通常是以寬邊為基準, 直擺時是短邊在左右兩側, 和手機不同。如果是有實體 home 鈕, 不管手機或是平板, 都是以 home 為直擺的下邊, 這樣就不會弄錯了。
A misconception about window.orientation – Matthew Gifford
簡單來說, 若是 90 或是 -90, 就是橫向, 其他值 (只有可能是 180 或是 0) 就是直向。90 對大部分裝置都是指螢幕上邊轉向左邊橫擺, -90 則是螢幕上邊轉向右邊橫擺 (但有的裝置在這種情況下仍然傳回 90)。0 在大部分裝置是正常直擺, 180 則是整個反轉 (但有個裝置在這種情況下仍然傳回 0)。
要特別注意的是, 平板通常是以寬邊為基準, 直擺時是短邊在左右兩側, 和手機不同。如果是有實體 home 鈕, 不管手機或是平板, 都是以 home 為直擺的下邊, 這樣就不會弄錯了。
星期日, 3月 09, 2014
HTML5 deviceorientation 事件與 CSS3 rotate3D 的方向
由於處理一本 HTML5 翻譯書的關係, 被 HTML5 中 deviceorientation 事件與 CSS3 rotate3D 的方向弄得暈頭轉向, 網路上看起來講得最清楚的就是 This End Up: Using Device Orientation 這篇文章了, 再透過其中的 demo 範例, 可以了解基本的座標軸都是 (圖片取自 Mozilla 網站)：
但是 deviceorientation 事件的角度是以右手系統為基準 (亦即右手拇指為座標軸), 所以手機螢幕朝右邊翻時, DeviceOrientationEvent.gamma 會由 0 度漸增至 90 度, 三軸的方向如下圖所示 (圖片來源：http://msdn.microsoft.com/library/ie/dn433240.aspx)：
Internet Explorer 的 developer 網站上『裝置方向事件』 一文中的方向說明也是如此。
但是 CSS3的 rotate3D 方向 y 軸是相反的, 而且是以左手系統為基準, 這是很容易搞混的方式, 程式很容易寫錯 (圖片來源：DEV.OPERA)：
補充：更慘的是, Mozilla 目前的方向與 webkit 為基礎的瀏覽器並不一致,參考 Orientation and motion data explained 一文即可發現其中說明的方向與上述略有差異,如果在 Firefox for Android 版本上執行本文一開頭所提到的 HTML5Rocks 網站上的範例,更是會發現完全是以左手系統為基礎, 要特別留意。
但是 CSS3的 rotate3D 方向 y 軸是相反的, 而且是以左手系統為基準, 這是很容易搞混的方式, 程式很容易寫錯 (圖片來源：DEV.OPERA)：
星期二, 2月 25, 2014
RWD VS AWD VS Fluid Web Layout
最近這一年 RWD (Responsive Web Design) 很紅, 不過昨天同事問了我一個問題, RWD 和 AWD (Adaptive Web Design) 有什麼不一樣？什麼又是 Fluid Web Layout？我聽到時也是一愣, 查了一下各家說法, 大致瞭解如下：
- RWD 是在瀏覽器端判別不同裝置視窗大小, 讓同一個網頁自動套用不同的 CSS 變化版面配置。由於單一網頁內要處理各種尺寸裝置的關係, 所以必須包含所有可能需要的資料, 網頁檔案就會比較肥大, 或是小尺寸螢幕卻是用高解析度的圖檔縮小顯示, 導致下載速度較慢。
- AWD 則是由伺服端判斷後因應不同裝置而傳回不同版本的網頁給瀏覽器顯示, 這種方式可以針對個別裝置設計一套單獨的檔案, 例如小尺寸螢幕有特別設計的 HTML 檔、低解析度的圖檔等等, 檔案內容不必包山包海, 下載速度較快。也因為如此, 不同裝置會導向不同的網址, 例如常見的 m.yahoo.com 就是給手機用的版本, 而 www.yahoo.com 則是 PC 的版本。
- Fixed web layout 指的是版面配置時直接使用 pixel 這種固定大小的單位指定寬度, 不論用哪一種尺寸的螢幕或是瀏覽器視窗觀看, 寬度都不會改變。
- Fluid web layout 指的則是版面配置時是使用百分比這樣的相對單位, 讓版面上個別區域根據相對比例分配寬度等等。
- elastic web layout 則是以相對字體大小的 em 為單位指定寬度。
星期三, 2月 19, 2014
Android 4.2 以上開啟『開發人員選項』
Google 真是一間充滿技客 (Geek) 風格的公司, Android 4.2 版以上在『設定』中把『開發人員選項』給隱藏了, 但是除非你查網路, 或者是剛好跟Google 心有靈犀一點通, 否則大概永遠猜不出來要怎麼把它秀出來。
答案其實很簡單, 進到『設定/關於手機』, 找到『軟體版本』項目 (或是者『建置編號』、『版本號碼』之類的), 在這個項目上連續按幾次, 就會看到『恭喜你已經成為開發人員』這樣的訊息, 接著在『設定』下就會看到熟悉的『開發人員選項』。
PS：如果你按錯項目, 在『Android 版本』上連按, 則是會看到可愛的 Jelly Bean 彩蛋畫面！
答案其實很簡單, 進到『設定/關於手機』, 找到『軟體版本』項目 (或是者『建置編號』、『版本號碼』之類的), 在這個項目上連續按幾次, 就會看到『恭喜你已經成為開發人員』這樣的訊息, 接著在『設定』下就會看到熟悉的『開發人員選項』。
PS：如果你按錯項目, 在『Android 版本』上連按, 則是會看到可愛的 Jelly Bean 彩蛋畫面！
訂閱：
文章 (Atom)